@aqua-ds/web-components
Version:
AquaDS Web Components
543 lines (539 loc) • 24.4 kB
JavaScript
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { P as PopoverWidths } from './PopoverWidths.js';
import { F as FlagIdentifier, g as getNameFlag, d as defineCustomElement$6 } from './aq-flag2.js';
import { B as BannerState, d as defineCustomElement$a } from './aq-banner2.js';
import { d as defineCustomElement$b } from './aq-autocomplete-item2.js';
import { d as defineCustomElement$9 } from './aq-button2.js';
import { d as defineCustomElement$8 } from './aq-checkbox2.js';
import { d as defineCustomElement$7 } from './aq-divider2.js';
import { d as defineCustomElement$5 } from './aq-popover2.js';
import { d as defineCustomElement$4 } from './aq-radio2.js';
import { d as defineCustomElement$3 } from './aq-tooltip2.js';
import { d as defineCustomElement$2 } from './aq-transition2.js';
import { d as defineCustomElement$1 } from './virtual-scroll-list2.js';
const aqAutocompleteCoreCss = ".tippy-content{text-align:left !important}.tippy-box[data-theme~=aqua]{padding:0px !important}.aq-render-multiple .aq-checkbox__item{display:none !important}";
const AqAutocompleteList = /*@__PURE__*/ proxyCustomElement(class AqAutocompleteList extends HTMLElement {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
this.aqselections = createEvent(this, "aqselections", 7);
this.aqinstancePopover = createEvent(this, "aqinstancePopover", 7);
this.showPopover = createEvent(this, "showPopover", 7);
this.typeAutocomplete = 'input';
this.popoverWidth = PopoverWidths.DEFAULT;
this.allowSelectAll = false;
this.isMultiple = false;
this.items = [];
this.iconDisclosure = '';
this.disabledAllOptions = false;
this.cleanOnEscape = false;
this.filter = '';
this.cleanFilterOnSelect = false;
this.maxShowSelected = 2;
this.maxSelect = 2;
this.isReadonly = false;
this.closeOnSelect = false;
this.showCheckbox = true;
this.isDisabled = false;
this.isLoading = false;
this.infoBanner = {
title: '',
message: '',
state: BannerState.INFO,
visible: false,
close: true,
};
this.showRadio = false;
this.noResultsText = '';
this.showAllItems = false;
this.configFlag = {
active: false,
isName: false,
showCallSign: false,
showShortName: false,
countryDefault: null,
identifier: FlagIdentifier.ISO2,
};
this.selectDefault = false;
this.activatorElement = null;
this.popoverConfig = {
hideOnClick: false,
hideOnClickOutside: true,
interactive: true,
appendTo: document.body,
};
this.placement = 'bottom-start';
this.localItems = [];
this.isDisabledSelectAll = false;
this.isDisabledDeselectAll = false;
this.selectedItems = [];
this.footer = false;
this.keyVirtualScrollList = 0;
}
onItemsChange(newVal) {
this.localItems = newVal.map(item => ({ ...item }));
this.selectedItems = [];
}
onDisableAllOptions() {
this.validateDisableAllOptions();
}
onMaxSelect() {
this.validateMaxSelected();
}
onIsDisabled(newVal) {
if (newVal) {
this.popoverInstance?.disable();
}
else {
this.popoverInstance?.enable();
}
}
onFilterChange(newVal, oldVal) {
if (newVal === oldVal)
return;
let itemsToRender;
itemsToRender = [...this.localItems];
if (!this.items.length || !newVal) {
itemsToRender = this.items.map(item => ({ ...item }));
}
else {
const items = this.filterOptions();
itemsToRender = items.map(item => ({ ...item }));
}
this.localItems = itemsToRender;
if (itemsToRender.length === 0) {
this.localItems = [{ text: this.noResultsText }];
}
this.validateMaxSelected();
}
handleKeyDown(event) {
if (event.key === 'Escape' && this.cleanOnEscape) {
this.popoverInstance?.hide();
this.iconDisclosure = 'aq-icon-chevron-down';
this.selectedItems = [];
this.deselectAllItems();
}
}
async updateElementSelected(item) {
this.deleteItemSelected(item);
}
validateCountryDefault() {
if (this.configFlag.countryDefault) {
const flagItemName = getNameFlag(this.configFlag.countryDefault.iso3, this.configFlag.countryDefault.iso2, this.configFlag.countryDefault.name, this.configFlag.countryDefault.country, 'code', this.configFlag.isName, this.configFlag.showCallSign, this.configFlag.showShortName);
const flagItem = { ...this.configFlag.countryDefault, textFlag: flagItemName };
this.validateClick(flagItem);
}
}
deleteItemSelected(item) {
this.selectedItems.forEach(element => {
if (element.value === item.value) {
this.selectedItems.splice(this.selectedItems.indexOf(element), 1);
}
});
this.validateDisableAllOptions();
this.validateMaxSelected();
}
validateDisableAllOptions() {
const deepCopyItems = items => {
return items.map(item => {
const newItem = { ...item };
if (item.options) {
newItem.options = deepCopyItems(item.options);
}
return newItem;
});
};
if (this.disabledAllOptions) {
this.localItems = deepCopyItems(this.localItems);
const disableRecursively = items => {
items.forEach(item => {
item.disabledLocal = true;
if (item.options) {
disableRecursively(item.options);
}
});
};
disableRecursively(this.localItems);
}
else {
this.localItems = deepCopyItems(this.localItems);
}
}
componentWillLoad() {
this.localItems = this.items.map(item => ({ ...item }));
}
validateCleanFilterOnSelect() {
if (this.cleanFilterOnSelect && this.isMultiple) {
this.filter = '';
if (this.selectedItems.length === this.maxSelect) {
this.isDisabledSelectAll = true;
this.isDisabledDeselectAll = false;
}
}
}
updateListMenu() {
setTimeout(() => {
const listMenu = this.el.closest('aq-autocomplete').querySelector('aq-list-menu');
const event = new CustomEvent('update');
listMenu.dispatchEvent(event);
}, 10);
}
handleShow(e) {
if (this.isDisabled || this.isReadonly || this.isLoading)
return;
this.popoverInstance = e.detail;
this.aqinstancePopover.emit(this.popoverInstance);
this.showPopover.emit(true);
this.validateDisableAllOptions();
if (this.isReadonly)
return;
}
selectAllItems() {
this.localItems.forEach(item => {
if (!item.disabledLocal || !item.disabled)
this.validateClick(item);
});
this.isDisabledSelectAll = true;
this.isDisabledDeselectAll = false;
}
deselectAllItems() {
this.selectedItems.forEach(item => {
if (!item.disabledLocal || !item.disabled)
this.validateClick(item);
});
this.selectedItems = [];
this.isDisabledSelectAll = false;
this.isDisabledDeselectAll = true;
}
validateMaxSelected() {
const selectsItemsLenght = this.selectedItems.length;
const itemsNoSelected = this.localItems.filter(item => !this.selectedItems.some(item1 => item1.value === item.value));
const updateSubItems = (item, value) => {
item.map(element => {
element.disabledLocal = value;
if (element.options) {
updateSubItems(element.options, value);
}
});
};
if (selectsItemsLenght >= this.maxSelect) {
itemsNoSelected.map(item => {
this.localItems.forEach(item1 => {
if (item.value === item1.value) {
item1.disabledLocal = true;
if (item1.options) {
updateSubItems(item1.options, true);
}
}
});
});
}
else {
const itemsDisabled = this.localItems.filter(item => item.disabledLocal);
itemsDisabled.map(item => {
this.localItems.forEach(item1 => {
if (item.value !== item1.value) {
item1.disabledLocal = false;
if (item1.options) {
updateSubItems(item1.options, false);
}
}
});
});
}
}
validateCloseOnSelect() {
if (this.closeOnSelect) {
this.popoverInstance?.hide();
}
}
validateClickFlag(item) {
const flagItemName = getNameFlag(item.iso3, item.iso2, item.name, item.country, this.configFlag.identifier, this.configFlag.isName, this.configFlag.showShortName, this.configFlag.showCallSign);
const flagItem = { ...item, textFlag: flagItemName };
this.validateClick(flagItem);
}
async validateClick(item) {
if (item.disabledLocal || item.disabled)
return;
if (this.isMultiple) {
const isDuplicate = this.selectedItems.some(selectedItem => selectedItem.value === item.value);
if (isDuplicate) {
this.selectedItems = this.selectedItems.filter(selectedItem => selectedItem.value !== item.value);
}
else {
this.selectedItems = [...this.selectedItems, item];
}
this.validateMaxSelected();
}
if (this.showRadio) {
this.selectedItems = [item];
}
this.validateCloseOnSelect();
this.aqselections.emit(item);
}
filterOptions() {
const filterItems = (items) => {
if (!items)
return [];
return items
.map(item => {
if (!item)
return null;
const matchesFilter = item.text?.toLowerCase().includes(this.filter.toLowerCase());
if (item.options) {
const filteredOptions = filterItems(item.options);
if (!matchesFilter && filteredOptions.length === 0) {
return null;
}
return { ...item, options: filteredOptions, highlightedText: this.getHighlightedText(item.text, this.filter) };
}
if (!matchesFilter) {
return null;
}
return { ...item, highlightedText: this.getHighlightedText(item.text, this.filter) };
})
.filter(Boolean);
};
return filterItems(this.items);
}
getHighlightedText(text, filter) {
if (!filter)
return text;
const regex = new RegExp(`(${filter})(\\s)?`, 'gi');
return text.replace(regex, (p1, p2) => {
const strong = `<strong style='font-weight: 700;'>${p1}</strong>`;
return `${p1}` === `${p2} ` ? `${strong} ` : strong;
});
}
renderItem(item, level = 1) {
if (item.isDivider)
return this.divider();
const paddingItem = level > 0 ? `${level * 16}px` : '';
const isSelectedItem = !!this.selectedItems.some(selected => selected.value === item.value);
const source = { isSelected: isSelectedItem };
return (h("div", null, h("aq-autocomplete-item", { paddingItem: paddingItem, onClick: () => this.validateClick(item), source: source, isDisabled: item.disabledLocal || item.disabled }, h("span", { style: { whiteSpace: 'nowrap' }, class: "aq-autocomplete-item__text", innerHTML: item?.highlightedText || item?.text })), item.options && item.options.map(option => this.renderItem(option, level + 1))));
}
renderCheckbox(item, level = 0, isSelected = false) {
if (item.isDivider)
return this.divider();
const paddingItem = level > 0 ? `${level * 16}px` : '';
const isSelectedItem = isSelected || !!this.selectedItems.some(selected => selected.value === item.value);
const source = { isSelected: isSelectedItem };
return (h("div", { class: !this.showCheckbox ? 'aq-render-multiple' : '' }, (item.show || !item.hasOwnProperty('show')) && (h("aq-autocomplete-item", { onClick: () => this.validateClick(item), isMultiselect: true, paddingItem: paddingItem, source: source }, h("aq-checkbox", { isChecked: isSelectedItem, isDisabled: item.disabledLocal || item.disabled, style: { whiteSpace: 'nowrap' }, value: isSelectedItem, label: h("span", { class: "aq-autocomplete-item__text", innerHTML: item?.highlightedText || item?.text }) }))), item.options && item.options.map(option => this.renderCheckbox(option, level + 1, isSelectedItem))));
}
renderRadio(item, level = 0) {
if (item.isDivider)
return this.divider();
const paddingItem = level > 0 ? `${level * 16}px` : '';
const isSelectedItem = !!this.selectedItems.some(selected => selected.value === item.value);
const source = { isSelected: isSelectedItem };
return (h("div", null, (item.show || !item.hasOwnProperty('show')) && (h("aq-autocomplete-item", { onClick: () => this.validateClick(item), paddingItem: paddingItem, source: source }, h("aq-radio", { style: { width: `auto` }, isChecked: isSelectedItem, idRadio: "radio-autocomplete", name: "radio-autocomplete", isDisabled: item.disabledLocal || item.disabled, label: h("span", { class: "aq-autocomplete-item__text", innerHTML: item?.highlightedText || item?.text }), value: item?.text, valueRadio: item?.text }))), item.options && item.options.map(option => this.renderRadio(option, level + 1))));
}
renderCountry(item) {
return item.text !== this.noResultsText ? (h("div", null, h("aq-autocomplete-item", { class: "aq-autocomplete-item__flag", onClick: () => this.validateClickFlag(item) }, h("aq-flag", { style: { whiteSpace: 'nowrap' }, country: item.country, showCallSign: this.configFlag.showCallSign, isName: this.configFlag.isName, showShortName: this.configFlag.showShortName })))) : (h("aq-autocomplete-item", null, h("span", { class: "aq-autocomplete-item__text", innerHTML: item?.highlightedText || item?.text })));
}
divider() {
return h("aq-divider", { orientation: "horizontal" });
}
getContent(item) {
return (h("div", null, !this.isMultiple && !this.showRadio && !this.configFlag.active && this.renderItem(item), this.isMultiple && !this.configFlag.active && this.renderCheckbox(item), !this.isMultiple && !this.configFlag.active && this.showRadio && this.renderRadio(item), this.configFlag.active && this.renderCountry(item)));
}
get getPopoverConfig() {
return {
...this.popoverConfig,
placement: this.placement,
maxWidth: 'auto',
offset: [0, this.typeAutocomplete === 'input' ? 4 : 2],
interactive: true,
hideOnClickOutside: true,
onHide: instance => {
this.showPopover.emit(false);
this.aqinstancePopover.emit(instance);
},
onMount: instance => {
this.aqinstancePopover.emit(instance);
if (this.isDisabled || this.isReadonly || this.isLoading) {
instance?.disable();
}
},
};
}
get getItemsLength() {
return this.localItems.length > 0;
}
closeBanner() {
this.infoBanner = { ...this.infoBanner, visible: false };
}
get getInfoBanner() {
if (this.isMultiple && this.selectedItems.length === this.maxSelect && this.infoBanner.visible) {
return (h("div", { style: { display: this.infoBanner.visible ? 'block' : 'none' } }, h("aq-banner", { titleBanner: this.infoBanner.title, state: this.infoBanner.state, value: this.infoBanner.visible, hasCloseIcon: this.infoBanner.close, onClose: () => this.closeBanner() }, this.infoBanner.message)));
}
}
setActivatorElement() {
requestAnimationFrame(() => {
if (!this.activatorElement) {
const parent = this.el.closest('aq-autocomplete');
if (this.typeAutocomplete === 'input') {
const activator = parent?.querySelector('aq-text-field');
if (activator) {
this.activatorElement = activator;
}
}
else {
const activator = parent?.querySelector('aq-text-field');
if (activator) {
this.activatorElement = activator;
}
const input = activator.querySelector('input');
if (input) {
input.type = 'button';
input.style.cursor = 'pointer';
input.style.textAlign = 'justify';
if (this.selectDefault) {
input.value = this.items[0].text;
this.validateClick(this.items[0]);
}
else {
input.value = '';
}
}
}
}
});
}
componentDidLoad() {
this.validateCountryDefault();
this.setActivatorElement();
}
popoverSlot(el) {
this.footer = !!el.querySelector('[slot="footer"]');
}
render() {
const getPopoverConfig = this.getPopoverConfig;
const getInfoBanner = this.getInfoBanner;
return (h(Host, { key: '6cd49ad78a4fe244a2c53953de7e4765cb288744' }, h("aq-popover", { key: '2b07ce444265fa7185f4479954880c2a53a5f46c', class: "aq-autocomplete-core", slot: "popover", ref: el => this.popoverSlot(el), onAqshow: instance => this.handleShow(instance), trigger: this.activatorElement, config: { ...getPopoverConfig } }, getInfoBanner, h("virtual-scroll-list", { key: '73e6d919afa614cc92c29b81ef4d400967af1625', flagSelector: this.configFlag.active, items: this.localItems, renderItem: item => {
return this.getContent(item);
}, estimatedItemHeight: 30, maxRenderCount: 20, showAllItems: this.showAllItems, width: this.popoverWidth }, h("slot", { key: 'eee7423f3dd698c3d82607c5425c3107002e3ade', name: "header" }), h("slot", { key: 'aa39640b59fd45d3bf689c9eb43a0a6fb2f347a4' }), this.allowSelectAll && this.isMultiple && (h("div", { key: '226000635794318e5fa68957bbd752fea63a88f3', class: "aq-list-menu__header_all" }, h("aq-button", { key: '3dc6b39095c4b2b93c9a3d7f82a21756664f63b0', isDisabled: this.isDisabledSelectAll, onClick: () => this.selectAllItems() }, "Select All"), h("aq-button", { key: '0efba626636cac9ce5d841d4d313cf7ca9e03682', isDisabled: this.isDisabledDeselectAll, onClick: () => this.deselectAllItems() }, "Deselect All")))), this.footer && h("aq-divider", { key: '5eb3910aa002afa3d36bb578ee2da9e3c045a058', orientation: "horizontal" }), h("slot", { key: 'bb28efd3a7cca95e9ff2767cd48bc33d26e37312', name: "footer" }))));
}
get el() { return this; }
static get watchers() { return {
"items": ["onItemsChange"],
"disabledAllOptions": ["onDisableAllOptions"],
"maxSelect": ["onMaxSelect"],
"isDisabled": ["onIsDisabled"],
"filter": ["onFilterChange"]
}; }
static get style() { return aqAutocompleteCoreCss; }
}, [260, "aq-autocomplete-core", {
"typeAutocomplete": [1, "type-autocomplete"],
"popoverWidth": [8, "popover-width"],
"allowSelectAll": [4, "allow-select-all"],
"isMultiple": [4, "is-multiple"],
"items": [16],
"iconDisclosure": [1, "icon-disclosure"],
"disabledAllOptions": [4, "disabled-all-options"],
"cleanOnEscape": [4, "clean-on-escape"],
"filter": [1],
"cleanFilterOnSelect": [4, "clean-filter-on-select"],
"maxShowSelected": [2, "max-show-selected"],
"maxSelect": [2, "max-select"],
"isReadonly": [4, "is-readonly"],
"closeOnSelect": [4, "close-on-select"],
"showCheckbox": [4, "show-checkbox"],
"isDisabled": [4, "is-disabled"],
"isLoading": [4, "is-loading"],
"infoBanner": [16, "info-banner"],
"showRadio": [4, "show-radio"],
"noResultsText": [1, "no-results-text"],
"showAllItems": [4, "show-all-items"],
"configFlag": [16, "config-flag"],
"selectDefault": [4, "select-default"],
"activatorElement": [32],
"popoverConfig": [32],
"placement": [32],
"popoverInstance": [32],
"localItems": [32],
"isDisabledSelectAll": [32],
"isDisabledDeselectAll": [32],
"selectedItems": [32],
"footer": [32],
"keyVirtualScrollList": [32],
"updateElementSelected": [64]
}, [[8, "keydown", "handleKeyDown"]], {
"items": ["onItemsChange"],
"disabledAllOptions": ["onDisableAllOptions"],
"maxSelect": ["onMaxSelect"],
"isDisabled": ["onIsDisabled"],
"filter": ["onFilterChange"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["aq-autocomplete-core", "aq-autocomplete-item", "aq-banner", "aq-button", "aq-checkbox", "aq-divider", "aq-flag", "aq-popover", "aq-radio", "aq-tooltip", "aq-transition", "virtual-scroll-list"];
components.forEach(tagName => { switch (tagName) {
case "aq-autocomplete-core":
if (!customElements.get(tagName)) {
customElements.define(tagName, AqAutocompleteList);
}
break;
case "aq-autocomplete-item":
if (!customElements.get(tagName)) {
defineCustomElement$b();
}
break;
case "aq-banner":
if (!customElements.get(tagName)) {
defineCustomElement$a();
}
break;
case "aq-button":
if (!customElements.get(tagName)) {
defineCustomElement$9();
}
break;
case "aq-checkbox":
if (!customElements.get(tagName)) {
defineCustomElement$8();
}
break;
case "aq-divider":
if (!customElements.get(tagName)) {
defineCustomElement$7();
}
break;
case "aq-flag":
if (!customElements.get(tagName)) {
defineCustomElement$6();
}
break;
case "aq-popover":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "aq-radio":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "aq-tooltip":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "aq-transition":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
case "virtual-scroll-list":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
export { AqAutocompleteList as A, defineCustomElement as d };