@aqua-ds/web-components
Version:
AquaDS Web Components
290 lines (285 loc) • 11.5 kB
JavaScript
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
import { a as allCountries, d as defineCustomElement$c } from './aq-flag2.js';
import { e as emitEvent } from './eventEmitter.js';
import { P as PopoverWidths } from './PopoverWidths.js';
import { d as defineCustomElement$k } from './aq-autocomplete2.js';
import { d as defineCustomElement$j } from './aq-autocomplete-core2.js';
import { d as defineCustomElement$i } from './aq-autocomplete-item2.js';
import { d as defineCustomElement$h } from './aq-badge2.js';
import { d as defineCustomElement$g } from './aq-banner2.js';
import { d as defineCustomElement$f } from './aq-button2.js';
import { d as defineCustomElement$e } from './aq-checkbox2.js';
import { d as defineCustomElement$d } from './aq-divider2.js';
import { d as defineCustomElement$b } from './aq-helper-text2.js';
import { d as defineCustomElement$a } from './aq-label2.js';
import { d as defineCustomElement$9 } from './aq-popover2.js';
import { d as defineCustomElement$8 } from './aq-radio2.js';
import { d as defineCustomElement$7 } from './aq-tag2.js';
import { d as defineCustomElement$6 } from './aq-tag-group2.js';
import { d as defineCustomElement$5 } from './aq-text-field2.js';
import { d as defineCustomElement$4 } from './aq-tooltip2.js';
import { d as defineCustomElement$3 } from './aq-transition2.js';
import { d as defineCustomElement$2 } from './virtual-scroll-list2.js';
const aqFlagSelectorCss = ":host{display:block}.aq-flag-selector__label{margin-bottom:var(--spacing-size-minor)}.aq-flag-selector .aq-text-field{height:var(--spacing-size-big)}.aq-autocomplete-item{padding:var(--spacing-size-minor) var(--spacing-size-minor)}.aq-autocomplete-item .aq-flag__flag--country{height:var(--spacing-size-extra);border-radius:var(--spacing-size-medium)}";
const AqFlagSelector$1 = /*@__PURE__*/ proxyCustomElement(class AqFlagSelector extends HTMLElement {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
this.popoverWidth = PopoverWidths.AUTO;
this.value = '';
this.label = '';
this.info = '';
this.isRequired = false;
this.isDisabled = false;
this.isReadonly = false;
this.isOutline = false;
this.isError = false;
this.isName = true;
this.showCallSign = false;
this.showShortName = false;
this.identifier = 'iso2';
this.helperText = '';
this.noResultsText = 'No results found';
this.placeholder = '';
this.isSelect = false;
this.cleanOnEscape = false;
this.closeOnSelect = false;
this.countryDefault = '';
this.countries = [];
this.normalizedCountries = [];
this.getCountries = 'country';
this.classFlagSelector = {
'aq-flag-selector': true,
'aq-flag-selector-outline': this.isOutline,
};
}
updateAutocompleteConfig() {
this.setConfigFlag();
}
setConfigFlag() {
if (this.autocompleteEl?.setConfigFlag) {
this.autocompleteEl.setConfigFlag({
active: true,
isName: this.isName,
showCallSign: this.showCallSign,
showShortName: this.showShortName,
countryDefault: this.normalizeCountryDefault,
identifier: this.identifier,
});
}
}
normalizeCountries() {
if (typeof this.countries[0] === 'string') {
const country = this.countries[0];
const getPropertyToCompare = item => {
if (/^\d+$/.test(country))
return item.country;
if (country.length === 2)
return item.iso2;
if (country.length === 3)
return item.iso3;
return null;
};
allCountries.forEach(item => {
const propertyToCompare = getPropertyToCompare(item);
if (this.countries.includes(propertyToCompare)) {
this.normalizedCountries.push({
value: item.country,
text: item.name + ' ' + item?.country,
country: item.country,
iso3: item.iso3,
name: item.name,
iso2: item.iso2,
});
}
});
}
}
componentWillLoad() {
this.normalizeCountries();
}
componentDidLoad() {
this.autocompleteEl = this.hostElement.querySelector('aq-autocomplete');
this.setConfigFlag();
}
get normalizeCountryDefault() {
if (!this.countryDefault)
return null;
const country = allCountries.find(item => this.countryDefault === item.country);
if (!country)
return null;
return {
value: country.country,
text: country.name + ' ' + country?.country,
country: country.country,
iso3: country.iso3,
name: country.name,
iso2: country.iso2,
};
}
handleChangeValue(e) {
if (this.getCountries === 'iso2') {
this.value = e.detail.value.iso2;
}
else if (this.getCountries === 'iso3') {
this.value = e.detail.value.iso3;
}
else {
this.value = e.detail.value.value;
}
emitEvent('input', this.hostElement, { value: this.value }, e);
}
render() {
return (h("div", { key: '1c2a8afdddfe9d2773005c84dfbab0cf6a998884', class: this.classFlagSelector }, h("aq-autocomplete", { key: '87d1461b25800fe6d50cd8b2cba0fe881cbf3ef7', onInput: e => e.stopPropagation(), onChange: e => this.handleChangeValue(e), typeAutocomplete: this.isSelect ? 'button' : 'input', label: this.label, info: this.info, isReadonly: this.isReadonly, "popover-width": this.popoverWidth, isRequired: this.isRequired, isPlain: this.isReadonly || this.isOutline, isError: this.isError, isDisabled: this.isDisabled, helperText: this.helperText, items: this.normalizedCountries, placeholder: this.placeholder, cleanOnEscape: this.cleanOnEscape, closeOnSelect: this.closeOnSelect })));
}
get hostElement() { return this; }
static get watchers() { return {
"isName": ["updateAutocompleteConfig"],
"showCallSign": ["updateAutocompleteConfig"],
"countryDefault": ["updateAutocompleteConfig"],
"showShortName": ["updateAutocompleteConfig"]
}; }
static get style() { return aqFlagSelectorCss; }
}, [256, "aq-flag-selector", {
"popoverWidth": [1, "popover-width"],
"value": [1537],
"label": [1],
"info": [1],
"isRequired": [4, "is-required"],
"isDisabled": [4, "is-disabled"],
"isReadonly": [4, "is-readonly"],
"isOutline": [4, "is-outline"],
"isError": [4, "is-error"],
"isName": [4, "is-name"],
"showCallSign": [4, "show-call-sign"],
"showShortName": [4, "show-short-name"],
"identifier": [1],
"helperText": [1, "helper-text"],
"noResultsText": [1, "no-results-text"],
"placeholder": [1],
"isSelect": [4, "is-select"],
"cleanOnEscape": [4, "clean-on-escape"],
"closeOnSelect": [4, "close-on-select"],
"countryDefault": [1, "country-default"],
"countries": [16],
"getCountries": [1, "get-countries"],
"normalizedCountries": [32]
}, undefined, {
"isName": ["updateAutocompleteConfig"],
"showCallSign": ["updateAutocompleteConfig"],
"countryDefault": ["updateAutocompleteConfig"],
"showShortName": ["updateAutocompleteConfig"]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["aq-flag-selector", "aq-autocomplete", "aq-autocomplete-core", "aq-autocomplete-item", "aq-badge", "aq-banner", "aq-button", "aq-checkbox", "aq-divider", "aq-flag", "aq-helper-text", "aq-label", "aq-popover", "aq-radio", "aq-tag", "aq-tag-group", "aq-text-field", "aq-tooltip", "aq-transition", "virtual-scroll-list"];
components.forEach(tagName => { switch (tagName) {
case "aq-flag-selector":
if (!customElements.get(tagName)) {
customElements.define(tagName, AqFlagSelector$1);
}
break;
case "aq-autocomplete":
if (!customElements.get(tagName)) {
defineCustomElement$k();
}
break;
case "aq-autocomplete-core":
if (!customElements.get(tagName)) {
defineCustomElement$j();
}
break;
case "aq-autocomplete-item":
if (!customElements.get(tagName)) {
defineCustomElement$i();
}
break;
case "aq-badge":
if (!customElements.get(tagName)) {
defineCustomElement$h();
}
break;
case "aq-banner":
if (!customElements.get(tagName)) {
defineCustomElement$g();
}
break;
case "aq-button":
if (!customElements.get(tagName)) {
defineCustomElement$f();
}
break;
case "aq-checkbox":
if (!customElements.get(tagName)) {
defineCustomElement$e();
}
break;
case "aq-divider":
if (!customElements.get(tagName)) {
defineCustomElement$d();
}
break;
case "aq-flag":
if (!customElements.get(tagName)) {
defineCustomElement$c();
}
break;
case "aq-helper-text":
if (!customElements.get(tagName)) {
defineCustomElement$b();
}
break;
case "aq-label":
if (!customElements.get(tagName)) {
defineCustomElement$a();
}
break;
case "aq-popover":
if (!customElements.get(tagName)) {
defineCustomElement$9();
}
break;
case "aq-radio":
if (!customElements.get(tagName)) {
defineCustomElement$8();
}
break;
case "aq-tag":
if (!customElements.get(tagName)) {
defineCustomElement$7();
}
break;
case "aq-tag-group":
if (!customElements.get(tagName)) {
defineCustomElement$6();
}
break;
case "aq-text-field":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "aq-tooltip":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "aq-transition":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "virtual-scroll-list":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
const AqFlagSelector = AqFlagSelector$1;
const defineCustomElement = defineCustomElement$1;
export { AqFlagSelector, defineCustomElement };