Mike Phares
127634f5ab
Back to .net8.0 api/v4/InfinityQS ApiExplorerSettings Wafer Counter Color Sorting
117 lines
3.2 KiB
JavaScript
117 lines
3.2 KiB
JavaScript
import { h } from "@stencil/core";
|
|
export class Chip {
|
|
constructor() {
|
|
this.placeholder = undefined;
|
|
this.selectedValue = "";
|
|
}
|
|
handleOutsideClick(event) {
|
|
const path = event.composedPath();
|
|
if (!path.includes(this.el)) {
|
|
this.closedMenu();
|
|
}
|
|
}
|
|
handleDropdownItemValueEmission(event) {
|
|
this.selectedValue = event.detail;
|
|
this.ifxDropdownMenu.emit(event.detail);
|
|
this.toggleMenu();
|
|
}
|
|
getDropdownMenu() {
|
|
let dropdownMenuComponent = this.el.querySelector('ifx-dropdown-menu');
|
|
return dropdownMenuComponent;
|
|
}
|
|
closedMenu() {
|
|
let dropdownMenuComponent = this.getDropdownMenu();
|
|
dropdownMenuComponent.isOpen = false;
|
|
}
|
|
toggleMenu() {
|
|
let dropdownMenuComponent = this.getDropdownMenu();
|
|
dropdownMenuComponent.isOpen = !dropdownMenuComponent.isOpen;
|
|
this.toggleCloseIcon();
|
|
}
|
|
toggleCloseIcon() {
|
|
const closeIconWrapper = this.el.shadowRoot.querySelector('.wrapper-close-button');
|
|
closeIconWrapper.classList.toggle('show');
|
|
}
|
|
render() {
|
|
return (h("div", { "aria-value": this.selectedValue, "aria-label": 'chip with a dropdown menu', class: "dropdown container" }, h("div", { class: "wrapper", onClick: () => this.toggleMenu() }, h("div", { class: "wrapper-label" }, this.selectedValue ? this.selectedValue : this.placeholder), h("div", { class: "wrapper-close-button" }, h("ifx-icon", { icon: "chevrondown12" }))), h("slot", { name: "menu" })));
|
|
}
|
|
static get is() { return "ifx-chip"; }
|
|
static get encapsulation() { return "shadow"; }
|
|
static get originalStyleUrls() {
|
|
return {
|
|
"$": ["chip.scss"]
|
|
};
|
|
}
|
|
static get styleUrls() {
|
|
return {
|
|
"$": ["chip.css"]
|
|
};
|
|
}
|
|
static get properties() {
|
|
return {
|
|
"placeholder": {
|
|
"type": "string",
|
|
"mutable": false,
|
|
"complexType": {
|
|
"original": "string",
|
|
"resolved": "string",
|
|
"references": {}
|
|
},
|
|
"required": false,
|
|
"optional": false,
|
|
"docs": {
|
|
"tags": [],
|
|
"text": ""
|
|
},
|
|
"attribute": "placeholder",
|
|
"reflect": false
|
|
}
|
|
};
|
|
}
|
|
static get states() {
|
|
return {
|
|
"selectedValue": {}
|
|
};
|
|
}
|
|
static get events() {
|
|
return [{
|
|
"method": "ifxDropdownMenu",
|
|
"name": "ifxDropdownMenu",
|
|
"bubbles": true,
|
|
"cancelable": true,
|
|
"composed": true,
|
|
"docs": {
|
|
"tags": [],
|
|
"text": ""
|
|
},
|
|
"complexType": {
|
|
"original": "CustomEvent",
|
|
"resolved": "CustomEvent<any>",
|
|
"references": {
|
|
"CustomEvent": {
|
|
"location": "global",
|
|
"id": "global::CustomEvent"
|
|
}
|
|
}
|
|
}
|
|
}];
|
|
}
|
|
static get elementRef() { return "el"; }
|
|
static get listeners() {
|
|
return [{
|
|
"name": "mousedown",
|
|
"method": "handleOutsideClick",
|
|
"target": "document",
|
|
"capture": false,
|
|
"passive": true
|
|
}, {
|
|
"name": "ifxDropdownItem",
|
|
"method": "handleDropdownItemValueEmission",
|
|
"target": undefined,
|
|
"capture": false,
|
|
"passive": false
|
|
}];
|
|
}
|
|
}
|
|
//# sourceMappingURL=chip.js.map
|