Mike Phares
127634f5ab
Back to .net8.0 api/v4/InfinityQS ApiExplorerSettings Wafer Counter Color Sorting
53 lines
2.6 KiB
JavaScript
53 lines
2.6 KiB
JavaScript
'use strict';
|
|
|
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
|
const index = require('./index-ca0e0765.js');
|
|
|
|
const chipCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-block}.container{position:relative;font-family:var(--ifx-font-family)}.container .wrapper{display:inline-flex;flex-direction:row;align-items:center;padding:8px 16px;gap:8px;background:#FFFFFF;border:1px solid #BFBBBB;border-radius:100px}.container .wrapper:hover{cursor:pointer;border:1px solid #575352}.container .wrapper:active{border:1px solid #0A8276}.container .wrapper .wrapper-label{font-style:normal;font-weight:400;font-size:0.875rem;line-height:1.25rem;display:flex;align-items:center;color:#1D1D1D;flex:none;order:0;flex-grow:0}.container .wrapper .wrapper-close-button ifx-icon{transition:0.3s;width:12px;height:12px}.container .wrapper .wrapper-close-button.show ifx-icon{transition:0.3s;transform:rotate(-180deg)}";
|
|
|
|
const Chip = class {
|
|
constructor(hostRef) {
|
|
index.registerInstance(this, hostRef);
|
|
this.ifxDropdownMenu = index.createEvent(this, "ifxDropdownMenu", 7);
|
|
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 (index.h("div", { "aria-value": this.selectedValue, "aria-label": 'chip with a dropdown menu', class: "dropdown container" }, index.h("div", { class: "wrapper", onClick: () => this.toggleMenu() }, index.h("div", { class: "wrapper-label" }, this.selectedValue ? this.selectedValue : this.placeholder), index.h("div", { class: "wrapper-close-button" }, index.h("ifx-icon", { icon: "chevrondown12" }))), index.h("slot", { name: "menu" })));
|
|
}
|
|
get el() { return index.getElement(this); }
|
|
};
|
|
Chip.style = chipCss;
|
|
|
|
exports.ifx_chip = Chip;
|
|
|
|
//# sourceMappingURL=ifx-chip.cjs.entry.js.map
|