@aqua-ds/web-components
Version:
AquaDS Web Components
81 lines (77 loc) • 6.22 kB
JavaScript
import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
import { U as UniqueIdGenerator } from './uidGenerator.js';
const aqTreeMenuItemCss = ".aq-tree-menu-item__button{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:start;gap:var(--spacing-size-minor);position:relative;padding:calc(var(--spacing-size-small) * 3) var(--spacing-size-medium) calc(var(--spacing-size-small) * 3) var(--spacing-size-large);height:var(--spacing-size-big);width:100%;font-family:var(--font-family-basic);font-size:var(--font-size-s);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-7);color:var(--color-ink-base);border:var(--spacing-size-basic) solid transparent;border-radius:0;background-color:transparent;cursor:pointer;-webkit-transition:0.3s;transition:0.3s}.aq-tree-menu-item__button:hover{background:var(--color-paper-lighter);-webkit-box-shadow:var(--shadow-medium);box-shadow:var(--shadow-medium);z-index:2}.aq-tree-menu-item__button:active{-webkit-box-shadow:var(--shadow-active) !important;box-shadow:var(--shadow-active) !important}.aq-tree-menu-item__button:focus{-webkit-box-shadow:var(--shadow-focus);box-shadow:var(--shadow-focus)}.aq-tree-menu-item__button:focus-visible{outline:none}.aq-tree-menu-item__button:focus,.aq-tree-menu-item__button:active{background:var(--color-paper-lighter);z-index:3;margin-top:4px}.aq-tree-menu-item__button--open{background-color:var(--color-primary-lighter) !important}.aq-tree-menu-item__button--disabled{color:var(--color-paper-dark);pointer-events:none}.aq-tree-menu-item__children{padding-left:4px;padding-right:4px;margin-left:-4px;margin-right:-4px;overflow-y:hidden;max-height:0;opacity:0;-webkit-transform:translateY(-45px);transform:translateY(-45px);-webkit-transition:max-height 0.15s ease-in-out, opacity 0.1s ease-out, -webkit-transform 0.3s ease-in-out;transition:max-height 0.15s ease-in-out, opacity 0.1s ease-out, -webkit-transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out, max-height 0.15s ease-in-out, opacity 0.1s ease-out;transition:transform 0.3s ease-in-out, max-height 0.15s ease-in-out, opacity 0.1s ease-out, -webkit-transform 0.3s ease-in-out}.aq-tree-menu-item__children--visible{max-height:1000px;opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}.aq-tree-menu-item__level{width:100%}.aq-tree-menu-item__label,.aq-tree-menu-item__level{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;gap:var(--spacing-size-minor)}";
const AqTreeMenuItem = /*@__PURE__*/ proxyCustomElement(class AqTreeMenuItem extends HTMLElement {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
this.toggleSubItem = createEvent(this, "toggleSubItem", 7);
this.level = 0;
}
handleClickOption() {
// ! Updating current item by reference
this.item.isOpen = !this.item.isOpen;
this.item = { ...this.item };
this.toggleSubItem.emit(this.item);
}
generateUID() {
return new UniqueIdGenerator().generateId();
}
getArrowIconTemplate() {
const getArrowIcon = this.item.isOpen ? 'aq-icon-chevron-up' : 'aq-icon-chevron-down';
return this.item?.childrenItems && this.item.childrenItems.length > 0 ? h("em", { class: getArrowIcon }) : h("span", { style: { width: "0.875rem" } });
}
getOptionIcon() {
return {
[`${this.item.icon}`]: !!this.item.icon,
['aq-icon-folder']: !this.item.icon && !!this.item?.childrenItems,
};
}
render() {
const getItemClass = {
'aq-tree-menu-item': true,
};
const getLevelButtonClass = {
'aq-tree-menu-item__level': true,
};
const getButtonClass = {
'aq-tree-menu-item__button': true,
'aq-tree-menu-item__button--open': this.item.isOpen && !!this.item?.childrenItems,
'aq-tree-menu-item__button--disabled': this.item.isDisabled,
};
return (h("div", { key: '6b1bf0ecdf5fd141f494916a839834bd0bb7ebb8', class: getItemClass }, h("button", { key: '62856f79085e832bcce483c051e086cd5facb8fd', class: getButtonClass, onClick: () => this.handleClickOption(), disabled: this.item.isDisabled }, h("div", { key: 'eaec3262943d2180a86c48bf2597da875846f53e', class: getLevelButtonClass, style: { paddingLeft: `calc(${this.level}*var(--font-size-m))` } }, this.getArrowIconTemplate(), h("div", { key: '1eb18fb903bc2d1ac576066e18b6bf8474ec44dc', class: "aq-tree-menu-item__label" }, h("em", { key: '67e41caa1dc18ab293fd0518faaf1a1f8e4114b2', class: this.getOptionIcon() }), h("span", { key: 'd46dca7ecac94a95c09431734f18a1c0774938fb' }, this.item.label)))), this.item?.childrenItems && this.item?.childrenItems.length > 0 &&
h("div", { key: '234d86f6771fb5061b662a8bec4ed463e0cb8021', class: {
'aq-tree-menu-item__children': true,
'aq-tree-menu-item__children--visible': this.item.isOpen
} }, this.item?.childrenItems.map((subitem, idx) => {
return h("aq-tree-menu-item", { key: idx, item: subitem, idItem: subitem.idItem || `${this.generateUID()}`, level: this.level + 1 });
}))));
}
get hostElement() { return this; }
static get style() { return aqTreeMenuItemCss; }
}, [256, "aq-tree-menu-item", {
"level": [2],
"item": [1032],
"idItem": [8, "id-item"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["aq-tree-menu-item", "aq-tree-menu-item"];
components.forEach(tagName => { switch (tagName) {
case "aq-tree-menu-item":
if (!customElements.get(tagName)) {
customElements.define(tagName, AqTreeMenuItem);
}
break;
case "aq-tree-menu-item":
if (!customElements.get(tagName)) {
defineCustomElement();
}
break;
} });
}
export { AqTreeMenuItem as A, defineCustomElement as d };