@aqua-ds/web-components
Version:
AquaDS Web Components
217 lines (213 loc) • 8.89 kB
JavaScript
import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
import { P as PopoverWidths } from './PopoverWidths.js';
import { d as defineCustomElement$6 } from './aq-button2.js';
import { d as defineCustomElement$5 } from './aq-dropdown-item2.js';
import { d as defineCustomElement$4 } from './aq-list-menu-host.js';
import { d as defineCustomElement$3 } from './aq-popover2.js';
import { d as defineCustomElement$2 } from './aq-tooltip2.js';
import { d as defineCustomElement$1 } from './aq-virtual-list2.js';
const aqDropdownCss = ".aq-dropdown{font-family:var(--font-family-basic);width:auto;display:-ms-inline-flexbox;display:inline-flex}.aq-dropdown__activator{width:auto;height:100%;display:inline-block;min-height:0.625rem}.aq-dropdown__container{position:fixed;display:-ms-flexbox;display:flex;z-index:1900;background:var(--color-white);-webkit-box-shadow:var(--shadow-basic);box-shadow:var(--shadow-basic);border-radius:var(--spacing-size-minor);margin-top:0;overflow-y:auto;padding:var(--spacing-size-short) 0}.aq-dropdown__container:focus-visible{outline:none}.aq-dropdown__container--show{display:block}.aq-dropdown__container--hide{display:none}.aq-dropdown__virtual-list{max-height:360px;overflow-y:auto}.aq-dropdown--active .aq-button.button{-webkit-box-shadow:var(--shadow-active);box-shadow:var(--shadow-active);z-index:1}.aq-dropdown__banner{margin-bottom:var(--spacing-size-minor)}";
const AqDropdown = /*@__PURE__*/ proxyCustomElement(class AqDropdown extends HTMLElement {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
this.selection = createEvent(this, "selection", 7);
// Props
this.items = [];
this.label = '';
this.idParent = '';
this.dataCallback = null;
this.closeOnClickOutside = true;
this.isDisabled = false;
this.placement = 'right';
this.popoverWidth = PopoverWidths.DEFAULT;
// State
this.isVisible = false;
this.activatorElement = null;
this.showListMenu = false;
this.popoverConfig = {
hideOnClick: false,
hideOnClickOutside: this.closeOnClickOutside,
};
this.localItems = [];
}
onItemsChange(newVal) {
this.localItems = newVal;
}
// Methods
addClassActive() {
const parent = this.getParentElement;
if (parent) {
parent.classList.add('aq-dropdown--active');
}
}
removeClassActive() {
const parent = this.getParentElement;
if (parent) {
parent.classList.remove('aq-dropdown--active');
}
}
validateClick(item) {
if (item.callback && typeof item.callback === 'function') {
item.callback(this.dataCallback);
}
else if (!!item.text) {
this.selection.emit(item.text);
}
else {
this.selection.emit(item);
}
}
onVisible(value) {
this.isVisible = value;
}
getItemClassLength(item) {
return item?.class?.length > 0;
}
getItemIconLength(item) {
return item?.icon?.length > 0;
}
getItemClassIconLength(item) {
return item?.classIcon?.length > 0;
}
setVisible(evt) {
this.onVisible(evt.detail);
}
renderActivator() {
return this.getLabelLength ? h("aq-button", null, typeof this.label === 'string' ? this.label : '') : h("slot", { name: "activator" });
}
setDropdownStyle(item) {
return {
[item.class]: item.class && this.getItemClassLength(item),
};
}
setIconStyle(item) {
return {
[item.icon]: true,
[item.classIcon]: item.classIcon && this.getItemClassIconLength(item),
};
}
handleShow() {
setTimeout(() => {
const listMenu = this.el.querySelector('aq-list-menu');
const event = new CustomEvent('update');
listMenu.dispatchEvent(event);
}, 50);
}
get getLabelLength() {
return typeof this.label === 'string' && this.label.length > 0;
}
get getItemsLength() {
return this.localItems.length > 0;
}
get getParentElement() {
return document.getElementById(this.idParent) || this.el;
}
get getDropdownStyle() {
return {
'aq-dropdown': true,
'aq-dropdown--active': this.isVisible,
};
}
get getActivator() {
return this.getLabelLength ? this.renderActivator() : h("slot", { name: "activator" });
}
get getPopoverConfig() {
return {
...this.popoverConfig,
placement: this.placement,
};
}
get getContent() {
const items = this.localItems.map((item, index) => (h("aq-dropdown-item", { class: this.setDropdownStyle(item), key: index, onSelection: () => this.validateClick(item) }, item.icon && this.getItemIconLength(item) ? h("em", { class: this.setIconStyle(item) }) : null, h("span", { class: "aq-dropdown-item__text" }, item.text))));
return items;
}
componentDidLoad() {
this.localItems = [...this.items];
}
componentDidRender() {
requestAnimationFrame(() => {
const activator = this.el.querySelector('span');
if (activator) {
this.activatorElement = activator;
this.activatorElement.children[0].isDisabled = this.isDisabled;
}
});
}
// Render
render() {
const getDropdownStyle = this.getDropdownStyle;
const getItemsLength = this.getItemsLength;
const isDynamic = !getItemsLength;
const activator = this.getActivator;
const getPopoverConfig = this.getPopoverConfig;
const getContent = this.getContent;
return (h("div", { key: '0a73dd81d644ddf2dc74175c95c0443f9f23fc5f', class: getDropdownStyle }, h("span", { key: '530b03a2bea48d007082470ba090887cb220248c' }, activator), h("aq-popover", { key: '9a6428ead88bd13806aa4b0872a0b41321b091c6', slot: "popover", disabled: this.isDisabled, onAqshow: () => this.handleShow(), trigger: [this.activatorElement], config: getPopoverConfig }, h("aq-list-menu", { key: 'eff86bf305439098e04495664dcde05b2826f4b9', "is-dynamic": isDynamic, popoverWidth: this.popoverWidth, container: this.el, activator: this.activatorElement }, h("slot", { key: '9709b9fb6816faa592c2e25979fa4c3277d9a3d4', name: "header", slot: "header" }), getItemsLength ? h("div", { slot: "content" }, getContent) : h("slot", { name: "content", slot: "content" }), h("slot", { key: '66cd8af8c203eb2fa4e3f7bdfacb6328fb1322a7', name: "footer", slot: "footer" })))));
}
get el() { return this; }
static get watchers() { return {
"items": ["onItemsChange"]
}; }
static get style() { return aqDropdownCss; }
}, [260, "aq-dropdown", {
"items": [1040],
"label": [1],
"idParent": [1, "id-parent"],
"dataCallback": [8, "data-callback"],
"closeOnClickOutside": [4, "close-on-click-outside"],
"isDisabled": [4, "is-disabled"],
"placement": [1],
"popoverWidth": [8, "popover-width"],
"isVisible": [32],
"activatorElement": [32],
"showListMenu": [32],
"popoverConfig": [32]
}, undefined, {
"items": ["onItemsChange"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["aq-dropdown", "aq-button", "aq-dropdown-item", "aq-list-menu", "aq-popover", "aq-tooltip", "aq-virtual-list"];
components.forEach(tagName => { switch (tagName) {
case "aq-dropdown":
if (!customElements.get(tagName)) {
customElements.define(tagName, AqDropdown);
}
break;
case "aq-button":
if (!customElements.get(tagName)) {
defineCustomElement$6();
}
break;
case "aq-dropdown-item":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "aq-list-menu":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "aq-popover":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "aq-tooltip":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
case "aq-virtual-list":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
export { AqDropdown as A, defineCustomElement as d };