Mike Phares
127634f5ab
Back to .net8.0 api/v4/InfinityQS ApiExplorerSettings Wafer Counter Color Sorting
99 lines
2.9 KiB
JavaScript
99 lines
2.9 KiB
JavaScript
import { h } from "@stencil/core";
|
|
export class BreadcrumbItem {
|
|
constructor() {
|
|
this.isLastItem = false;
|
|
}
|
|
handleOutsideClick(event) {
|
|
const path = event.composedPath();
|
|
if (!path.includes(this.el)) {
|
|
this.closeDropdownMenu();
|
|
}
|
|
}
|
|
getDropdownMenu() {
|
|
const dropdownMenu = this.el.shadowRoot.querySelector('.dropdown-menu');
|
|
return dropdownMenu;
|
|
}
|
|
menuWrapperEventReEmitter(event) {
|
|
this.emittedElement = event.detail;
|
|
}
|
|
getMenuIconWrapper() {
|
|
return this.emittedElement;
|
|
}
|
|
handleClassList(el, type, className) {
|
|
el.classList[type](className);
|
|
}
|
|
closeDropdownMenu() {
|
|
const dropdownMenu = this.getDropdownMenu();
|
|
const menuWrapper = this.getMenuIconWrapper();
|
|
this.handleClassList(dropdownMenu, 'remove', 'open');
|
|
this.handleClassList(menuWrapper, 'remove', 'show');
|
|
}
|
|
toggleDropdownMenu() {
|
|
const dropdownMenu = this.getDropdownMenu();
|
|
const menuWrapper = this.getMenuIconWrapper();
|
|
this.handleClassList(dropdownMenu, 'toggle', 'open');
|
|
this.handleClassList(menuWrapper, 'toggle', 'show');
|
|
}
|
|
handleLastItem() {
|
|
const breadcrumbItems = this.el.closest('ifx-breadcrumb').querySelectorAll('ifx-breadcrumb-item');
|
|
if (this.el === breadcrumbItems[breadcrumbItems.length - 1]) {
|
|
this.isLastItem = true;
|
|
}
|
|
else
|
|
this.isLastItem = false;
|
|
}
|
|
componentWillLoad() {
|
|
this.handleLastItem();
|
|
}
|
|
componentDidUpdate() {
|
|
this.handleLastItem();
|
|
}
|
|
componentDidLoad() {
|
|
const dropdownMenu = this.el.querySelector('ifx-dropdown-menu');
|
|
if (!dropdownMenu) {
|
|
const iconMenuWrapper = this.getMenuIconWrapper();
|
|
this.handleClassList(iconMenuWrapper, 'toggle', 'hide');
|
|
}
|
|
else {
|
|
dropdownMenu.isOpen = true;
|
|
}
|
|
}
|
|
render() {
|
|
return (h("li", { class: 'breadcrumb-parent', "aria-current": `${this.isLastItem ? 'page' : ""}`, onClick: () => this.toggleDropdownMenu() }, h("li", { class: "breadcrumb-wrapper" }, h("slot", { name: 'label' }), h("div", { class: "dropdown-menu" }, h("slot", null))), !this.isLastItem && h("span", { class: "breadcrumb-divider" }, "/")));
|
|
}
|
|
static get is() { return "ifx-breadcrumb-item"; }
|
|
static get encapsulation() { return "shadow"; }
|
|
static get originalStyleUrls() {
|
|
return {
|
|
"$": ["breadcrumb-item.scss"]
|
|
};
|
|
}
|
|
static get styleUrls() {
|
|
return {
|
|
"$": ["breadcrumb-item.css"]
|
|
};
|
|
}
|
|
static get states() {
|
|
return {
|
|
"isLastItem": {}
|
|
};
|
|
}
|
|
static get elementRef() { return "el"; }
|
|
static get listeners() {
|
|
return [{
|
|
"name": "mousedown",
|
|
"method": "handleOutsideClick",
|
|
"target": "document",
|
|
"capture": false,
|
|
"passive": true
|
|
}, {
|
|
"name": "breadcrumbMenuIconWrapper",
|
|
"method": "menuWrapperEventReEmitter",
|
|
"target": undefined,
|
|
"capture": false,
|
|
"passive": false
|
|
}];
|
|
}
|
|
}
|
|
//# sourceMappingURL=breadcrumb-item.js.map
|