npm - @nanoporetech-digital/components - Versions diffs - 2.4.0 → 2.7.0 - Mend

@nanoporetech-digital/components 2.4.0 → 2.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (266) hide show

package/dist/collection/components/checkbox/checkbox.js CHANGED Viewed

@@ -276,7 +276,7 @@ export class Checkbox {
       "getter": false,
       "setter": false,
       "attribute": "value",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "'on'"
     },
     "name": {
@@ -296,7 +296,7 @@ export class Checkbox {
       "getter": false,
       "setter": false,
       "attribute": "name",
-      "reflect": false
+      "reflect": true
     },
     "required": {
       "type": "boolean",
@@ -315,7 +315,7 @@ export class Checkbox {
       "getter": false,
       "setter": false,
       "attribute": "required",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "false"
     },
     "type": {
@@ -405,7 +405,7 @@ export class Checkbox {
         "references": {
           "Color": {
             "location": "import",
-            "path": "/builds/99mRzSBj/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -441,7 +441,7 @@ export class Checkbox {
         "references": {
           "CheckboxChangeEventDetail": {
             "location": "import",
-            "path": "/builds/99mRzSBj/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -512,7 +512,7 @@ export class Checkbox {
           },
           "ControlValidity": {
             "location": "import",
-            "path": "/builds/99mRzSBj/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         },
         "return": "Promise<ControlValidity>"

package/dist/collection/components/checkbox/checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Prop,\n Event,\n EventEmitter,\n h,\n ComponentInterface,\n State,\n Watch,\n Method,\n Element,\n Host,\n} from '@stencil/core';\nimport { CheckboxChangeEventDetail, ControlValidity } from '../../interface';\nimport { Color } from '../../interface';\nimport { createColorClasses } from '../../utils';\nimport { focusVisible } from '../../utils/focus-visible';\n\nlet checkboxIds = 0;\n\n/*\n `nano-checkbox` is used to let a user choose one or more options from a limited number of options.\n * They appear as checked when activated.\n * They can be checked by mouse, keyboard, touch or programmatically by setting the checked property.\n \n @slot - if you do not set a label attribute, you can use this slot for more complex markup\n /\n@Component({\n tag: 'nano-checkbox',\n styleUrl: 'checkbox.scss',\n scoped: true,\n})\nexport class Checkbox implements ComponentInterface {\n private inputId = `nano-cb-${checkboxIds++}`;\n private input: HTMLInputElement;\n private shouldReport = false;\n\n @Element() private host: HTMLNanoCheckboxElement;\n\n @State() _invalid = false;\n @State() inputType: 'checkbox' \| 'radio' = 'checkbox';\n\n /* @internal /\n @Prop({ mutable: true, reflect: true }) hasFocus = false;\n\n /\n checked property that can be used to get/set the value. accepts only boolean values\n /\n @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n @Watch('checked')\n async handleCheckedChange() {\n this.input.checked = this.checked;\n\n if (this.inputType === 'radio' && this.name && this.checked) {\n let form = this.host.closest('form');\n let radios: Element[];\n if (form) {\n radios = Array.from(\n form.querySelectorAll(`nano-checkbox[name=\"${this.name}\"]`)\n );\n } else {\n radios = Array.from(\n document.querySelectorAll(`nano-checkbox[name=\"${this.name}\"]`)\n ).filter((radio) => !radio.closest('form'));\n }\n radios.map((el: HTMLNanoCheckboxElement) => {\n if (el !== this.host) el.checked = false;\n });\n }\n this.nanoChange.emit({ value: this.value, checked: this.checked });\n }\n\n /\n If `true`, the user cannot interact with the checkbox.\n /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /\n The value of a checkbox is analogous to the value of an `<input type='checkbox'>`,\n * it's only present when `checked` is true.\n /\n @Prop() value: string = 'on';\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() name: string;\n\n /\n Set to true to make the field required.\n /\n @Prop() required: boolean = false;\n\n /\n Controls the underlying field type and style.\n /\n @Prop({ reflect: true }) type:\n \| 'radio'\n \| 'checkbox'\n \| 'tag'\n \| 'segment'\n \| 'segment-pill' = 'checkbox';\n\n @Watch('type')\n typeChange() {\n if (this.type === 'checkbox' \|\| this.type === 'tag')\n this.inputType = 'checkbox';\n else this.inputType = 'radio';\n }\n\n /\n label property that can be used to set the label text. Alternatively you may use a label slot.\n /\n @Prop() label?: string;\n\n /\n If `true`, the checkbox will visually appear as indeterminate (only relevant for type=\"checkbox\")\n /\n @Prop({ mutable: true, reflect: true }) indeterminate: boolean = false;\n\n @Watch('indeterminate')\n handleIndeterminateChange() {\n this.checked = false;\n this.input.indeterminate = this.indeterminate;\n }\n\n /\n This will be true when the control is in an invalid state.\n * Validity is determined by the `required` prop. Or if custom validity message is set. @readonly\n /\n @Prop({ reflect: true })\n get invalid() {\n if (!this.shouldReport) return false;\n return !this.input.validity.valid;\n }\n\n /\n Color to use from your application's color palette.\n /\n @Prop() color?: Color;\n\n /\n Emited when the checkbox is toggled\n /\n @Event() nanoChange: EventEmitter<CheckboxChangeEventDetail>;\n\n /\n Emited when the checkbox is focused\n /\n @Event() nanoFocus: EventEmitter;\n\n /\n Emited when the checkbox is blurred\n /\n @Event() nanoBlur: EventEmitter;\n\n // public methods\n\n /\n Returns the native input control\n /\n @Method()\n async getInputElement() {\n if (this.input) return this.input;\n }\n\n /\n Get the current state of the control.\n * @param validateFirst - perform validation first before reporting\n * @returns `Promise<{ isValid: boolean, errorMessage: string }>`\n /\n @Method()\n async reportValidity(\n validateFirst: boolean = false\n ): Promise<ControlValidity> {\n if (validateFirst) {\n this.shouldReport = true;\n this._invalid = !this.input.reportValidity();\n }\n return {\n isValid: !this.invalid,\n errorMessage: this.input.validationMessage,\n };\n }\n\n /\n Sets a custom validation message.\n * If `message` is not empty, the field will be considered invalid. Use in conjunction with `nano-checkbox-group`\n /\n @Method()\n async setError(message: string) {\n if (!this.input) return;\n\n this._invalid = !!message.length;\n this.input.setCustomValidity(message);\n }\n\n /\n Sets focus on the checkbox.\n /\n @Method()\n async setFocus() {\n if (this.input) {\n this.input.focus();\n focusVisible.force(this.input);\n }\n }\n\n /\n Removes focus from the checkbox.\n /\n @Method()\n async removeFocus() {\n if (this.input) {\n this.input.blur();\n focusVisible.force(this.input, false);\n }\n }\n\n // private handlers\n\n private handleInvalid = (ev: Event) => {\n this.shouldReport = true;\n this._invalid = !(ev.target as HTMLInputElement).validity.valid;\n };\n\n private handleChange = (ev: InputEvent) => {\n this.checked = (ev.target as HTMLInputElement).checked;\n this.indeterminate = false;\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.nanoFocus.emit();\n };\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.nanoBlur.emit();\n };\n\n / Although many radio components can be 'checked',\n the underlying control may not be. Check */\n private isRadioChecked() {\n setTimeout(() => (this.checked = this.input.checked), 20);\n }\n\n // Stencil hooks\n\n componentWillLoad() {\n this.typeChange();\n }\n\n componentDidLoad() {\n this.input.indeterminate = this.indeterminate;\n this.isRadioChecked();\n focusVisible.observe(this.input);\n }\n\n disconnectedCallback() {\n focusVisible.unobserve(this.input);\n }\n\n render() {\n const labelId = this.inputId + '-lbl';\n let isRtl = (this.host.ownerDocument as Document).dir === 'rtl';\n\n return (\n <Host\n class={{ ...createColorClasses(this.color) }}\n dir={isRtl ? 'rtl' : null}\n >\n <label\n class={{\n nanocb: true,\n 'nanocb--checked': this.checked,\n 'nanocb--invalid': this.invalid,\n 'nanocb--disabled': this.disabled,\n 'nanocb--focused': this.hasFocus,\n 'nanocb--indeterminate': this.indeterminate,\n }}\n htmlFor={this.inputId}\n >\n <input\n type={this.inputType}\n name={this.name}\n required={this.required}\n checked={this.checked}\n disabled={this.disabled}\n value={this.value}\n aria-labelledby={labelId}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onChange={this.handleChange}\n ref={(input) => (this.input = input)}\n id={this.inputId}\n onInvalid={this.handleInvalid}\n />\n <span class={'nanocb__input nanocb__input--' + this.type}></span>\n\n <div id={labelId} class={'nanocb__label nanocb__label--' + this.type}>\n {this.label && !!this.label.length && <span>{this.label}</span>}\n <span hidden={this.label && !!this.label.length}>\n <slot />\n </span>\n </div>\n </label>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Prop,\n Event,\n EventEmitter,\n h,\n ComponentInterface,\n State,\n Watch,\n Method,\n Element,\n Host,\n} from '@stencil/core';\nimport { CheckboxChangeEventDetail, ControlValidity } from '../../interface';\nimport { Color } from '../../interface';\nimport { createColorClasses } from '../../utils';\nimport { focusVisible } from '../../utils/focus-visible';\n\nlet checkboxIds = 0;\n\n/*\n `nano-checkbox` is used to let a user choose one or more options from a limited number of options.\n * They appear as checked when activated.\n * They can be checked by mouse, keyboard, touch or programmatically by setting the checked property.\n \n @slot - if you do not set a label attribute, you can use this slot for more complex markup\n /\n@Component({\n tag: 'nano-checkbox',\n styleUrl: 'checkbox.scss',\n scoped: true,\n})\nexport class Checkbox implements ComponentInterface {\n private inputId = `nano-cb-${checkboxIds++}`;\n private input: HTMLInputElement;\n private shouldReport = false;\n\n @Element() private host: HTMLNanoCheckboxElement;\n\n @State() _invalid = false;\n @State() inputType: 'checkbox' \| 'radio' = 'checkbox';\n\n /* @internal /\n @Prop({ mutable: true, reflect: true }) hasFocus = false;\n\n /\n checked property that can be used to get/set the value. accepts only boolean values\n /\n @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n @Watch('checked')\n async handleCheckedChange() {\n this.input.checked = this.checked;\n\n if (this.inputType === 'radio' && this.name && this.checked) {\n let form = this.host.closest('form');\n let radios: Element[];\n if (form) {\n radios = Array.from(\n form.querySelectorAll(`nano-checkbox[name=\"${this.name}\"]`)\n );\n } else {\n radios = Array.from(\n document.querySelectorAll(`nano-checkbox[name=\"${this.name}\"]`)\n ).filter((radio) => !radio.closest('form'));\n }\n radios.map((el: HTMLNanoCheckboxElement) => {\n if (el !== this.host) el.checked = false;\n });\n }\n this.nanoChange.emit({ value: this.value, checked: this.checked });\n }\n\n /\n If `true`, the user cannot interact with the checkbox.\n /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /\n The value of a checkbox is analogous to the value of an `<input type='checkbox'>`,\n * it's only present when `checked` is true.\n /\n @Prop({ reflect: true }) value: string = 'on';\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop({ reflect: true }) name: string;\n\n /\n Set to true to make the field required.\n /\n @Prop({ reflect: true }) required: boolean = false;\n\n /\n Controls the underlying field type and style.\n /\n @Prop({ reflect: true }) type:\n \| 'radio'\n \| 'checkbox'\n \| 'tag'\n \| 'segment'\n \| 'segment-pill' = 'checkbox';\n\n @Watch('type')\n typeChange() {\n if (this.type === 'checkbox' \|\| this.type === 'tag')\n this.inputType = 'checkbox';\n else this.inputType = 'radio';\n }\n\n /\n label property that can be used to set the label text. Alternatively you may use a label slot.\n /\n @Prop() label?: string;\n\n /\n If `true`, the checkbox will visually appear as indeterminate (only relevant for type=\"checkbox\")\n /\n @Prop({ mutable: true, reflect: true }) indeterminate: boolean = false;\n\n @Watch('indeterminate')\n handleIndeterminateChange() {\n this.checked = false;\n this.input.indeterminate = this.indeterminate;\n }\n\n /\n This will be true when the control is in an invalid state.\n * Validity is determined by the `required` prop. Or if custom validity message is set. @readonly\n /\n @Prop({ reflect: true })\n get invalid() {\n if (!this.shouldReport) return false;\n return !this.input.validity.valid;\n }\n\n /\n Color to use from your application's color palette.\n /\n @Prop() color?: Color;\n\n /\n Emited when the checkbox is toggled\n /\n @Event() nanoChange: EventEmitter<CheckboxChangeEventDetail>;\n\n /\n Emited when the checkbox is focused\n /\n @Event() nanoFocus: EventEmitter;\n\n /\n Emited when the checkbox is blurred\n /\n @Event() nanoBlur: EventEmitter;\n\n // public methods\n\n /\n Returns the native input control\n /\n @Method()\n async getInputElement() {\n if (this.input) return this.input;\n }\n\n /\n Get the current state of the control.\n * @param validateFirst - perform validation first before reporting\n * @returns `Promise<{ isValid: boolean, errorMessage: string }>`\n /\n @Method()\n async reportValidity(\n validateFirst: boolean = false\n ): Promise<ControlValidity> {\n if (validateFirst) {\n this.shouldReport = true;\n this._invalid = !this.input.reportValidity();\n }\n return {\n isValid: !this.invalid,\n errorMessage: this.input.validationMessage,\n };\n }\n\n /\n Sets a custom validation message.\n * If `message` is not empty, the field will be considered invalid. Use in conjunction with `nano-checkbox-group`\n /\n @Method()\n async setError(message: string) {\n if (!this.input) return;\n\n this._invalid = !!message.length;\n this.input.setCustomValidity(message);\n }\n\n /\n Sets focus on the checkbox.\n /\n @Method()\n async setFocus() {\n if (this.input) {\n this.input.focus();\n focusVisible.force(this.input);\n }\n }\n\n /\n Removes focus from the checkbox.\n /\n @Method()\n async removeFocus() {\n if (this.input) {\n this.input.blur();\n focusVisible.force(this.input, false);\n }\n }\n\n // private handlers\n\n private handleInvalid = (ev: Event) => {\n this.shouldReport = true;\n this._invalid = !(ev.target as HTMLInputElement).validity.valid;\n };\n\n private handleChange = (ev: InputEvent) => {\n this.checked = (ev.target as HTMLInputElement).checked;\n this.indeterminate = false;\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.nanoFocus.emit();\n };\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.nanoBlur.emit();\n };\n\n / Although many radio components can be 'checked',\n the underlying control may not be. Check */\n private isRadioChecked() {\n setTimeout(() => (this.checked = this.input.checked), 20);\n }\n\n // Stencil hooks\n\n componentWillLoad() {\n this.typeChange();\n }\n\n componentDidLoad() {\n this.input.indeterminate = this.indeterminate;\n this.isRadioChecked();\n focusVisible.observe(this.input);\n }\n\n disconnectedCallback() {\n focusVisible.unobserve(this.input);\n }\n\n render() {\n const labelId = this.inputId + '-lbl';\n let isRtl = (this.host.ownerDocument as Document).dir === 'rtl';\n\n return (\n <Host\n class={{ ...createColorClasses(this.color) }}\n dir={isRtl ? 'rtl' : null}\n >\n <label\n class={{\n nanocb: true,\n 'nanocb--checked': this.checked,\n 'nanocb--invalid': this.invalid,\n 'nanocb--disabled': this.disabled,\n 'nanocb--focused': this.hasFocus,\n 'nanocb--indeterminate': this.indeterminate,\n }}\n htmlFor={this.inputId}\n >\n <input\n type={this.inputType}\n name={this.name}\n required={this.required}\n checked={this.checked}\n disabled={this.disabled}\n value={this.value}\n aria-labelledby={labelId}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onChange={this.handleChange}\n ref={(input) => (this.input = input)}\n id={this.inputId}\n onInvalid={this.handleInvalid}\n />\n <span class={'nanocb__input nanocb__input--' + this.type}></span>\n\n <div id={labelId} class={'nanocb__label nanocb__label--' + this.type}>\n {this.label && !!this.label.length && <span>{this.label}</span>}\n <span hidden={this.label && !!this.label.length}>\n <slot />\n </span>\n </div>\n </label>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/datalist/datalist.js CHANGED Viewed

@@ -49,7 +49,7 @@ export class DataList {
      * Options can be defined declaratively by nesting `<nano-option>` elements or imperatively using this prop */
     this.options = [];
     /** Tweaks the datalist behaviour and linked control semantics and behaviour.
-     * e.g. 'select' will make the linked input control readonly.
+     * e.g. 'select' will make the linked input control `readonly`.
      */
     this.type = 'input';
     /** Force datalist open */
@@ -259,6 +259,7 @@ export class DataList {
       case 'select':
         autocompleteType = 'list';
         readonly = true;
+        dwConfig = { closeOnSelect: true, placement: 'center' };
         break;
     }
     if (!this.isNanoInput) {
@@ -526,8 +527,8 @@ export class DataList {
       "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "{ host?: HTMLNanoDropdownElement; autoOpen?: boolean; open?: boolean; handleOpenChange?: () => void; closeOnSelect?: boolean; containingElement?: HTMLElement; tetherTo?: HTMLElement; handleTetherToChange?: () => void; placement?: \"top\" | \"top-start\" | \"top-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"right\" | \"right-start\" | \"right-end\" | \"left\" | \"left-start\" | \"left-end\"; distance?: number; skidding?: number; hoist?: boolean; handlePopoverOptionsChange?: () => void; dialogTitle?: string; nanoShow?: EventEmitter<any>; nanoAfterShow?: EventEmitter<any>; nanoHide?: EventEmitter<any>; nanoAfterHide?: EventEmitter<any>; secondaryOpen?: (ev: CustomEvent<any>) => void; secondaryClose?: (ev: CustomEvent<any>) => void; handlePanelSelect?: (event: CustomEvent<any>) => void; show?: () => Promise<void>; hide?: () => Promise<void>; connectedCallback?: () => void; componentDidLoad?: () => void; disconnectedCallback?: () => void; render?: () => any; }",
-        "resolved": "{ host?: HTMLNanoDropdownElement; autoOpen?: boolean; open?: boolean; handleOpenChange?: () => void; closeOnSelect?: boolean; containingElement?: HTMLElement; tetherTo?: HTMLElement; handleTetherToChange?: () => void; placement?: \"top\" | \"top-start\" | \"top-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"right\" | \"right-start\" | \"right-end\" | \"left\" | \"left-start\" | \"left-end\"; distance?: number; skidding?: number; hoist?: boolean; handlePopoverOptionsChange?: () => void; dialogTitle?: string; nanoShow?: EventEmitter<any>; nanoAfterShow?: EventEmitter<any>; nanoHide?: EventEmitter<any>; nanoAfterHide?: EventEmitter<any>; secondaryOpen?: (ev: CustomEvent<any>) => void; secondaryClose?: (ev: CustomEvent<any>) => void; handlePanelSelect?: (event: CustomEvent<any>) => void; show?: () => Promise<void>; hide?: () => Promise<void>; connectedCallback?: () => void; componentDidLoad?: () => void; disconnectedCallback?: () => void; render?: () => any; }",
+        "original": "{ host?: HTMLNanoDropdownElement; autoOpen?: boolean; open?: boolean; handleOpenChange?: () => void; closeOnSelect?: boolean; containingElement?: HTMLElement; tetherTo?: HTMLElement; handleTetherToChange?: () => void; placement?: PopoverPlacement; distance?: number; skidding?: number; hoist?: boolean; handlePopoverOptionsChange?: () => void; dialogTitle?: string; nanoShow?: EventEmitter<any>; nanoAfterShow?: EventEmitter<any>; nanoHide?: EventEmitter<any>; nanoAfterHide?: EventEmitter<any>; secondaryOpen?: (ev: CustomEvent<any>) => void; secondaryClose?: (ev: CustomEvent<any>) => void; handlePanelSelect?: (event: CustomEvent<any>) => void; show?: () => Promise<void>; hide?: () => Promise<void>; connectedCallback?: () => void; componentDidLoad?: () => void; disconnectedCallback?: () => void; render?: () => any; }",
+        "resolved": "{ host?: HTMLNanoDropdownElement; autoOpen?: boolean; open?: boolean; handleOpenChange?: () => void; closeOnSelect?: boolean; containingElement?: HTMLElement; tetherTo?: HTMLElement; handleTetherToChange?: () => void; placement?: PopoverPlacement; distance?: number; skidding?: number; hoist?: boolean; handlePopoverOptionsChange?: () => void; dialogTitle?: string; nanoShow?: EventEmitter<any>; nanoAfterShow?: EventEmitter<any>; nanoHide?: EventEmitter<any>; nanoAfterHide?: EventEmitter<any>; secondaryOpen?: (ev: CustomEvent<any>) => void; secondaryClose?: (ev: CustomEvent<any>) => void; handlePanelSelect?: (event: CustomEvent<any>) => void; show?: () => Promise<void>; hide?: () => Promise<void>; connectedCallback?: () => void; componentDidLoad?: () => void; disconnectedCallback?: () => void; render?: () => any; }",
         "references": {}
       },
       "required": false,
@@ -549,7 +550,7 @@ export class DataList {
         "references": {
           "OptionInterface": {
             "location": "import",
-            "path": "/builds/99mRzSBj/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -598,7 +599,7 @@ export class DataList {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Tweaks the datalist behaviour and linked control semantics and behaviour.\ne.g. 'select' will make the linked input control readonly."
+        "text": "Tweaks the datalist behaviour and linked control semantics and behaviour.\ne.g. 'select' will make the linked input control `readonly`."
       },
       "getter": false,
       "setter": false,

package/dist/collection/components/datalist/datalist.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"datalist.js","sourceRoot":"","sources":["../../../src/components/datalist/datalist.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n ComponentInterface,\n h,\n Host,\n Element,\n State,\n Watch,\n Prop,\n Event,\n EventEmitter,\n writeTask,\n Build,\n} from '@stencil/core';\nimport { debounce, raf } from '../../utils';\nimport type { Dropdown } from '../dropdown/dropdown';\nimport type { OptionInterface } from '../../interface';\n\nfunction findLabel(formCtrl: Element) {\n let foundLabel: HTMLLabelElement;\n\n if (formCtrl.id) {\n foundLabel = document.querySelector(`label[for='${formCtrl.id}']`);\n }\n if (!foundLabel) {\n foundLabel = formCtrl.closest('label');\n }\n return foundLabel;\n}\n\nlet listIds = 0;\n\n/*\n `nano-datalist` a visually consistent and more flexible replacement for a native\n * [datalist](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist). Can be nested within a `nano-input`\n * or linked to any input control via the `input` prop. Is used internally within `nano-select`.\n * Options can be defined declaratively by nesting `<nano-option>` elements or imperatively using the `options` prop\n \n @slot - use `<nano-option>` elements for more complex html. Alternatively use the `options` prop\n * @slot list-top - shows at the top of the list when there are options present\n * @slot list-bottom - shows at the bottom of the list when there are options present\n * @slot no-result - shown when there are no results otherwise nothing will be shown\n /\n@Component({\n tag: 'nano-datalist',\n styleUrl: 'datalist.scss',\n shadow: true,\n})\nexport class DataList implements ComponentInterface {\n // Private State\n\n private isNanoInput = false;\n private typeToSelect = '';\n private typeToSelectTimeout: number;\n private nanoDropdown: HTMLNanoDropdownElement;\n private listBox: HTMLNanoMenuElement;\n private mo?: MutationObserver;\n private listId = `nano-datalist-${listIds++}`;\n private isFiltered = false;\n private shouldFocus = false;\n // all potential option eles. Set via slot or `options` prop.\n // Some may get hidden due to filtering\n private get allOptEles() {\n return this._allOptEles;\n }\n private set allOptEles(opts) {\n // when allOptEles are initially set (on slot change / options) -\n // add options to 'selected' and fire selected event if\n // value isn't set on the input\n this._allOptEles = opts;\n if (this.connectedInput?.value) return;\n\n opts.forEach((opt) => {\n if (opt.selected && !this.selected.includes(opt.value)) {\n this.changeInputValue(opt);\n }\n });\n }\n private _allOptEles: HTMLNanoOptionElement[] = [];\n\n @Element() host: HTMLNanoDatalistElement;\n\n // active option eles that are not hidden.\n @State() actvOptEles: HTMLNanoOptionElement[] = [];\n @State() connectedInput: HTMLInputElement \| HTMLTextAreaElement;\n @State() inputLabel: HTMLLabelElement;\n @State() hasNoResult: boolean;\n @State() shouldOpen: boolean;\n @State() canOpen: boolean = true;\n @State() optionIds: string[] = [];\n\n constructor() {\n this.inputChange = debounce(this.inputChange.bind(this), 50);\n }\n\n // Public API\n\n /* By default, items in the list will appear 'selected' when the value in the linked input control matches.\n * However you can add other selected options via the the selected prop. /\n @Prop({ mutable: true }) selected: string[] = [];\n\n /* nano-dropdown config options you can pass to the nested dropdown component /\n @Prop()\n get dropDownConfig() {\n return this._dropDownConfig;\n }\n set dropDownConfig(ddc: Partial<Dropdown>) {\n this._dropDownConfig = { ...this._dropDownConfig, ...ddc };\n }\n private _dropDownConfig: Partial<Dropdown> = {\n skidding: -1,\n };\n\n /* Provide an option list.\n * Options can be defined declaratively by nesting `<nano-option>` elements or imperatively using this prop /\n @Prop() options?: OptionInterface[] = [];\n\n /* A selector to a HTMLInputElement /\n @Prop() input?: string \| HTMLInputElement;\n\n /* Tweaks the datalist behaviour and linked control semantics and behaviour.\n * e.g. 'select' will make the linked input control readonly.\n /\n @Prop() type: 'select' \| 'selctMulti' \| 'input' = 'input';\n\n /* return all the active options currently within the datalist. Can be useful for validation /\n @Prop()\n get activeOptions() {\n return this.allOptEles;\n }\n\n /* Force datalist open /\n @Prop({ mutable: true }) open: boolean = false;\n\n @Watch('open')\n openWatcher() {\n writeTask(() => {\n this.nanoDropdown.open = this.open;\n this.connectedInput.setAttribute('aria-expanded', this.open.toString());\n });\n }\n\n /* Use this option to disable to default filtering. This is useful if filtering happens\n * externally via another method (e.g. via ajax)\n /\n @Prop() disableFilter = false;\n\n /* Activate / deactivate the datalist control /\n @Prop() disabled = false;\n\n // State change watchers\n\n @Watch('input')\n async watchInputChange() {\n let nanoInput;\n if ((nanoInput = this.host.closest('nano-input'))) {\n this.isNanoInput = true;\n this.connectedInput = await nanoInput.getInputElement();\n } else if (\n this.input &&\n typeof this.input === 'string' &&\n (nanoInput = document.querySelector(this.input))\n ) {\n this.isNanoInput = false;\n this.connectedInput = nanoInput;\n } else if (this.input instanceof HTMLElement) {\n this.connectedInput = this.input;\n }\n }\n\n @Watch('options')\n manageSlotChangeListener() {\n if (!this.host) return;\n\n // we're not using `options` - setup new MO\n if ((!this.options \|\| !this.options.length) && !this.mo) {\n if (Build.isBrowser) {\n const mo = (this.mo = new MutationObserver(() =>\n this.processSlottedContent()\n ));\n mo.observe(this.host, { childList: true, subtree: true });\n }\n this.processSlottedContent();\n return;\n }\n\n // we're using `options` - trash current MO\n if (this.options?.length) {\n if (!!this.mo) {\n this.mo.disconnect();\n this.mo = undefined;\n }\n\n // add imperative `options`\n writeTask(() => {\n this.allOptEles = this.options.flatMap((option, i) => {\n if (option.value \|\| option.label) {\n const opt = Object.assign(document.createElement('nano-option'), {\n label: option.label,\n value: option.value,\n ariaPosinset: i,\n ariaSetsize: this.options.length,\n selected: option.selected,\n id: this.listId + '-option-' + i,\n textContent: option.label ? option.label : option.value,\n slot: 'internal-opts',\n });\n this.host.append(opt);\n return opt;\n }\n });\n\n if (this.connectedInput?.value.length && this.type !== 'select') {\n this.inputChange();\n } else this.actvOptEles = [...this.allOptEles];\n });\n }\n // forceUpdate(this.host);\n }\n\n @Watch('type')\n @Watch('connectedInput')\n watchTypeChange() {\n if (!this.connectedInput) return;\n\n let dwConfig: Partial<Dropdown> = { closeOnSelect: false };\n let autocompleteType: 'list' \| 'both' = 'both';\n let readonly = false;\n\n switch (this.type) {\n case 'selctMulti':\n // dwConfig.closeOnSelect = false;\n break;\n case 'select':\n autocompleteType = 'list';\n readonly = true;\n break;\n }\n\n if (!this.isNanoInput) {\n dwConfig.tetherTo = this.connectedInput;\n }\n\n this.dropDownConfig = { ...this.dropDownConfig, ...dwConfig };\n this.connectedInput.setAttribute('aria-autocomplete', autocompleteType);\n this.connectedInput.readOnly = readonly;\n }\n\n @Watch('connectedInput')\n manageInputEvents(newInput?: HTMLInputElement, oldInput?: HTMLInputElement) {\n if (!!oldInput) {\n const nanoInput = oldInput.closest('nano-input');\n if (nanoInput) {\n nanoInput.removeEventListener('nanoChange', this.inputChange);\n }\n oldInput.removeEventListener('change', this.inputChange);\n oldInput.removeEventListener('click', this.inputClick);\n oldInput.removeEventListener('keydown', this.inputKeydown);\n oldInput.removeEventListener('input', this.inputChange);\n\n this.inputLabel = null;\n\n writeTask(() => {\n oldInput.removeAttribute('role');\n oldInput.removeAttribute('aria-expanded');\n oldInput.removeAttribute('aria-controls');\n oldInput.removeAttribute('aria-owns');\n oldInput.removeAttribute('aria-haspopup');\n oldInput.removeAttribute('aria-autocomplete');\n oldInput.removeAttribute('autocomplete');\n });\n }\n if (!!newInput) {\n const nanoInput = newInput.closest('nano-input');\n if (nanoInput) {\n nanoInput.addEventListener('nanoChange', this.inputChange);\n }\n newInput.addEventListener('change', this.inputChange);\n newInput.addEventListener('click', this.inputClick);\n newInput.addEventListener('keydown', this.inputKeydown);\n newInput.addEventListener('input', this.inputChange);\n this.listId = this.host.id \|\| this.listId;\n\n this.inputLabel = newInput?.labels?.item(0) \|\| findLabel(newInput);\n\n writeTask(() => {\n this.host.id = this.listId;\n newInput.setAttribute('role', 'combobox');\n newInput.setAttribute('aria-expanded', 'false');\n newInput.setAttribute('aria-controls', this.listId);\n newInput.setAttribute('aria-owns', this.listId);\n newInput.setAttribute('aria-haspopup', 'listbox');\n newInput.setAttribute('autocomplete', 'off');\n });\n }\n }\n\n @Watch('selected')\n @Watch('actvOptEles')\n watchActvOptChange() {\n let c = 0;\n const val = this.connectedInput?.value \|\| '';\n const optIds = [];\n\n writeTask(() => {\n this.allOptEles.forEach((opt, i) => {\n if (this.actvOptEles.includes(opt)) {\n c++;\n opt.setAttribute('aria-posinset', c + '');\n opt.setAttribute('aria-setsize', this.actvOptEles.length + '');\n opt.hidden = false;\n this.isSelected(opt, val);\n } else {\n opt.removeAttribute('aria-posinset');\n opt.removeAttribute('aria-setsize');\n opt.hidden = true;\n opt.selected = false;\n }\n opt.id = this.listId + '-option-' + i;\n optIds.push(opt.id);\n });\n this.optionIds = optIds;\n });\n }\n\n @Watch('actvOptEles')\n @Watch('hasNoResult')\n manageCanOpen() {\n if (this.actvOptEles.length \|\| this.hasNoResult) this.canOpen = true;\n else this.canOpen = false;\n }\n\n /\n Opens the dropdown if it can, it should and there are items to display.\n /\n @Watch('shouldOpen')\n @Watch('canOpen')\n manageDropdownDisplay() {\n if (this.shouldOpen && this.canOpen && !this.disabled) this.open = true;\n if (!this.shouldOpen \|\| !this.canOpen) this.open = false;\n }\n\n @Watch('actvOptEles')\n fireActiveOptsEvent() {\n this.nanoOptionsUpdated.emit(this.actvOptEles);\n }\n\n // Events\n\n /* Fired when an item is selected. /\n @Event() nanoSelect: EventEmitter<HTMLNanoOptionElement>;\n\n /* Fired when a currently selected item is reselected. /\n @Event() nanoDeselect: EventEmitter<HTMLNanoOptionElement>;\n\n /* Fired when active options change /\n @Event() nanoOptionsUpdated: EventEmitter<HTMLNanoOptionElement[]>;\n\n // Private logic\n\n private isSelected(opt: HTMLNanoOptionElement, val: string) {\n if (val === opt.value \|\| this.selected.includes(opt.value)) {\n opt.selected = true;\n } else opt.selected = false;\n }\n\n private get dropwdownOpen() {\n if (!this.nanoDropdown \|\| !this.open) return false;\n return true;\n }\n\n private get exactMatch() {\n return this.allOptEles.find(\n (opt) => this.connectedInput.value === opt.value\n );\n }\n\n /* reflect value back to the connected input unless the event is cancelled */\n private changeInputValue(opt: HTMLNanoOptionElement) {\n let nanoSelected;\n\n if (this.selected.includes(opt.value)) {\n // deselect option\n this.selected = this.selected.filter((val) => val !== opt.value);\n nanoSelected = this.nanoDeselect.emit(opt);\n } else {\n // select new option\n this.selected = [...this.selected];\n nanoSelected = this.nanoSelect.emit(opt);\n }\n\n if (!nanoSelected.defaultPrevented) {\n if (this.connectedInput) this.connectedInput.value = opt.value;\n\n const event = new window.Event('change');\n this.connectedInput?.dispatchEvent(event);\n }\n }\n\n // a new option has been picked\n private optSelected = (e: CustomEvent<HTMLNanoOptionElement>) => {\n e.stopPropagation();\n this.changeInputValue(e.detail);\n raf(() => this.inputChange());\n\n if (this.type === 'select') this.shouldOpen = false;\n };\n\n // this is for type=\"select\" only.\n // Filter options that start with text - aggregates letters (as opposed to getting the value from input)\n private setOptStartsWith() {\n const attrFind = (toFind: string) =>\n toFind.toLowerCase().substring(0, this.typeToSelect.length) ===\n this.typeToSelect;\n\n const foundEle = this.allOptEles.find(\n (opt) =>\n opt.value.trim().length > 0 &&\n !opt.disabled &&\n (attrFind(opt.textContent) \|\|\n attrFind(opt.value) \|\|\n attrFind(opt.label) \|\|\n attrFind(opt.filterMeta))\n );\n if (foundEle) this.changeInputValue(foundEle);\n }\n\n // Event handlers\n\n private processSlottedContent() {\n raf(() => {\n this.allOptEles = Array.from(this.host.querySelectorAll('nano-option'));\n this.hasNoResult = !!this.host.querySelector('[slot=\"no-result\"]');\n\n if (this.connectedInput?.value.length && this.type !== 'select') {\n this.inputChange();\n } else this.actvOptEles = this.allOptEles;\n });\n }\n\n // sets focus immediately on open when 'select' - mirroring native behaviour\n private handleShow = async () => {\n if (this.type === 'select' \|\| this.shouldFocus) {\n this.shouldFocus = false;\n this.listBox.setFocus();\n }\n };\n\n // any changes to the connected input value will filter the list of active options\n private inputChange() {\n if (this.disableFilter) {\n this.actvOptEles = this.allOptEles;\n return;\n }\n\n const val = this.connectedInput.value;\n const valStr = val.trim().toLowerCase();\n\n let exactMatch = false;\n const activeEles = [];\n const attrFind = (toFind: string) =>\n toFind.toLowerCase().indexOf(valStr) > -1;\n\n this.allOptEles.forEach((opt) => {\n if (\n (val === opt.value \|\| val === opt.label) &&\n this.type !== 'selctMulti'\n ) {\n opt.selected = true;\n exactMatch = true;\n } else this.isSelected(opt, val);\n });\n\n this.allOptEles.forEach((opt) => {\n if (!valStr.length \|\| exactMatch) {\n activeEles.push(opt);\n } else if (\n opt.value.trim().length > 0 &&\n !opt.disabled &&\n (attrFind(opt.textContent) \|\|\n attrFind(opt.value) \|\|\n attrFind(opt.label) \|\|\n attrFind(opt.filterMeta))\n ) {\n activeEles.push(opt);\n }\n });\n\n this.isFiltered = valStr.length && !exactMatch;\n this.actvOptEles = activeEles;\n }\n\n private inputClick = () => {\n this.shouldOpen = true;\n // open dropdown if possible\n this.manageDropdownDisplay();\n };\n\n private inputKeydown = (e: KeyboardEvent) => {\n const ignoreKeys = [\n 'Shift',\n 'ArrowRight',\n 'ArrowLeft',\n 'Escape',\n 'Enter',\n 'Tab',\n ];\n if (ignoreKeys.includes(e.key)) {\n if (e.key === 'Tab') this.shouldOpen = false;\n return;\n }\n\n // When select, mirror native select behaviour. Search on closed list\n if (\n this.type === 'select' &&\n !['ArrowDown', 'ArrowUp'].includes(e.key) &&\n (e.key !== ' ' \|\| this.typeToSelectTimeout)\n ) {\n if (e.key === ' ' \|\| /^[a-z0-9]+$/i.test(e.key)) {\n clearTimeout(this.typeToSelectTimeout);\n this.typeToSelectTimeout = window.setTimeout(() => {\n this.typeToSelect = '';\n this.typeToSelectTimeout = 0;\n }, 750);\n this.typeToSelect += e.key;\n this.setOptStartsWith();\n }\n return;\n }\n\n this.shouldOpen = true;\n // open dropdown if possible\n this.manageDropdownDisplay();\n if (['ArrowDown', 'ArrowUp'].includes(e.key)) this.shouldFocus = true;\n };\n\n // handles key down on options. Either 'picks'\n // an option or passes event back to input for search / filter\n private optionKeyDown = (\n e: KeyboardEvent & { target: HTMLNanoOptionElement }\n ) => {\n const ignoreKeys = [\n 'Shift',\n 'ArrowUp',\n 'ArrowDown',\n 'Escape',\n 'Enter',\n 'Tab',\n 'Space',\n 'PageUp',\n 'PageDown',\n 'Home',\n 'End',\n ' ',\n ];\n if (ignoreKeys.includes(e.key)) {\n if (e.key === 'Escape') this.connectedInput.focus();\n return;\n }\n\n const deleteKeys = ['Delete', 'Backspace'];\n // this passes whatever's typed back to our input control\n if (\n this.type !== 'select' &&\n (!this.exactMatch \|\| deleteKeys.includes(e.key))\n ) {\n this.connectedInput.focus();\n }\n };\n\n // Component lifecycle\n\n connectedCallback() {\n this.watchInputChange();\n }\n\n componentDidLoad() {\n this.manageSlotChangeListener();\n this.openWatcher();\n }\n\n componentDidRender(): void {\n setTimeout(() => {\n if (!this.connectedInput)\n console.warn(\n 'no `nano-input` found. `nano-datalist` should be nested within an `nano-input` or linked via `input` prop',\n this.host\n );\n }, 500);\n }\n\n render() {\n return (\n <Host\n role=\"listbox\"\n aria-owns={this.optionIds.join(' ')}\n aria-label=\"Select options from the list below\"\n >\n <nano-dropdown\n {...this.dropDownConfig}\n ref={(el) => (this.nanoDropdown = el)}\n dialogTitle=\"Select options from the list below\"\n class={{\n dlist__dropdown: true,\n 'dlist--isfiltered': this.isFiltered,\n }}\n onNanoAfterShow={this.handleShow}\n onNanoAfterHide={(_) => (this.open = false)}\n >\n <nano-menu\n hidden={!this.actvOptEles.length}\n type=\"listbox\"\n label={this.inputLabel ? this.inputLabel.textContent : undefined}\n class={{\n dlist__menu: true,\n 'dlist__menu--open': this.dropwdownOpen,\n }}\n tabIndex={-1}\n onNanoSelect={this.optSelected}\n onKeyDown={this.optionKeyDown}\n ref={(el) => (this.listBox = el)}\n >\n <slot name=\"list-top\" />\n {!this.options.length && <slot />}\n {!!this.options.length && <slot name=\"internal-opts\" />}\n <slot name=\"list-bottom\" />\n </nano-menu>\n <nano-menu\n type=\"listbox\"\n label=\"No results found\"\n hidden={!!this.actvOptEles.length}\n class={{\n dlist__menu: true,\n 'dlist__menu--open': this.dropwdownOpen,\n }}\n >\n <slot name=\"no-result\" />\n </nano-menu>\n {!!this.actvOptEles && (\n <div aria-live=\"polite\" role=\"status\" class=\"dlist__status\">\n {this.actvOptEles.length} result\n {this.actvOptEles.length > 1 ? 's' : ''} available.\n </div>\n )}\n </nano-dropdown>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"datalist.js","sourceRoot":"","sources":["../../../src/components/datalist/datalist.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAET,CAAC,EACD,IAAI,EACJ,OAAO,EACP,KAAK,EACL,KAAK,EACL,IAAI,EACJ,KAAK,EAEL,SAAS,EACT,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAI5C,SAAS,SAAS,CAAC,QAAiB;EAClC,IAAI,UAA4B,CAAC;EAEjC,IAAI,QAAQ,CAAC,EAAE,EAAE;IACf,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,QAAQ,CAAC,EAAE,IAAI,CAAC,CAAC;GACpE;EACD,IAAI,CAAC,UAAU,EAAE;IACf,UAAU,GAAG,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;GACxC;EACD,OAAO,UAAU,CAAC;AACpB,CAAC;AAED,IAAI,OAAO,GAAG,CAAC,CAAC;AAEhB;;;;;;;;;;GAUG;AAMH,MAAM,OAAO,QAAQ;EA2CnB;IA1CA,gBAAgB;IAER,gBAAW,GAAG,KAAK,CAAC;IACpB,iBAAY,GAAG,EAAE,CAAC;IAKlB,WAAM,GAAG,iBAAiB,OAAO,EAAE,EAAE,CAAC;IACtC,eAAU,GAAG,KAAK,CAAC;IACnB,gBAAW,GAAG,KAAK,CAAC;IAmBpB,gBAAW,GAA4B,EAAE,CAAC;IAIlD,0CAA0C;IACjC,gBAAW,GAA4B,EAAE,CAAC;IAK1C,YAAO,GAAY,IAAI,CAAC;IACxB,cAAS,GAAa,EAAE,CAAC;IAMlC,aAAa;IAEb;+EAC2E;IAClD,aAAQ,GAAa,EAAE,CAAC;IAUzC,oBAAe,GAAsB;MAC3C,QAAQ,EAAE,CAAC,CAAC;KACb,CAAC;IAEF;kHAC8G;IACtG,YAAO,GAAuB,EAAE,CAAC;IAKzC;;OAEG;IACK,SAAI,GAAsC,OAAO,CAAC;IAQ1D,0BAA0B;IACD,SAAI,GAAY,KAAK,CAAC;IAU/C;;OAEG;IACK,kBAAa,GAAG,KAAK,CAAC;IAE9B,iDAAiD;IACzC,aAAQ,GAAG,KAAK,CAAC;IA4PzB,+BAA+B;IACvB,gBAAW,GAAG,CAAC,CAAqC,EAAE,EAAE;MAC9D,CAAC,CAAC,eAAe,EAAE,CAAC;MACpB,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;MAChC,GAAG,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;MAE9B,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ;QAAE,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;IACtD,CAAC,CAAC;IAkCF,4EAA4E;IACpE,eAAU,GAAG,KAAK,IAAI,EAAE;MAC9B,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,IAAI,CAAC,WAAW,EAAE;QAC9C,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;QACzB,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC;OACzB;IACH,CAAC,CAAC;IA8CM,eAAU,GAAG,GAAG,EAAE;MACxB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;MACvB,4BAA4B;MAC5B,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAC/B,CAAC,CAAC;IAEM,iBAAY,GAAG,CAAC,CAAgB,EAAE,EAAE;MAC1C,MAAM,UAAU,GAAG;QACjB,OAAO;QACP,YAAY;QACZ,WAAW;QACX,QAAQ;QACR,OAAO;QACP,KAAK;OACN,CAAC;MACF,IAAI,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE;QAC9B,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK;UAAE,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;QAC7C,OAAO;OACR;MAED,qEAAqE;MACrE,IACE,IAAI,CAAC,IAAI,KAAK,QAAQ;QACtB,CAAC,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC;QACzC,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,IAAI,CAAC,mBAAmB,CAAC,EAC3C;QACA,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE;UAC/C,YAAY,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;UACvC,IAAI,CAAC,mBAAmB,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;YAChD,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;YACvB,IAAI,CAAC,mBAAmB,GAAG,CAAC,CAAC;UAC/B,CAAC,EAAE,GAAG,CAAC,CAAC;UACR,IAAI,CAAC,YAAY,IAAI,CAAC,CAAC,GAAG,CAAC;UAC3B,IAAI,CAAC,gBAAgB,EAAE,CAAC;SACzB;QACD,OAAO;OACR;MAED,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;MACvB,4BAA4B;MAC5B,IAAI,CAAC,qBAAqB,EAAE,CAAC;MAC7B,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC;QAAE,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;IACxE,CAAC,CAAC;IAEF,8CAA8C;IAC9C,8DAA8D;IACtD,kBAAa,GAAG,CACtB,CAAoD,EACpD,EAAE;MACF,MAAM,UAAU,GAAG;QACjB,OAAO;QACP,SAAS;QACT,WAAW;QACX,QAAQ;QACR,OAAO;QACP,KAAK;QACL,OAAO;QACP,QAAQ;QACR,UAAU;QACV,MAAM;QACN,KAAK;QACL,GAAG;OACJ,CAAC;MACF,IAAI,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE;QAC9B,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ;UAAE,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE,CAAC;QACpD,OAAO;OACR;MAED,MAAM,UAAU,GAAG,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC;MAC3C,yDAAyD;MACzD,IACE,IAAI,CAAC,IAAI,KAAK,QAAQ;QACtB,CAAC,CAAC,IAAI,CAAC,UAAU,IAAI,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,EAChD;QACA,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE,CAAC;OAC7B;IACH,CAAC,CAAC;IA7dA,IAAI,CAAC,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;EAC/D,CAAC;EAjCD,6DAA6D;EAC7D,uCAAuC;EACvC,IAAY,UAAU;IACpB,OAAO,IAAI,CAAC,WAAW,CAAC;EAC1B,CAAC;EACD,IAAY,UAAU,CAAC,IAAI;;IACzB,iEAAiE;IACjE,yDAAyD;IACzD,+BAA+B;IAC/B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;IACxB,IAAI,MAAA,IAAI,CAAC,cAAc,0CAAE,KAAK;MAAE,OAAO;IAEvC,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;MACnB,IAAI,GAAG,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;QACtD,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC;OAC5B;IACH,CAAC,CAAC,CAAC;EACL,CAAC;EAwBD,iFAAiF;EACjF,IACI,cAAc;IAChB,OAAO,IAAI,CAAC,eAAe,CAAC;EAC9B,CAAC;EACD,IAAI,cAAc,CAAC,GAAsB;IACvC,IAAI,CAAC,eAAe,mCAAQ,IAAI,CAAC,eAAe,GAAK,GAAG,CAAE,CAAC;EAC7D,CAAC;EAiBD,gGAAgG;EAChG,IACI,aAAa;IACf,OAAO,IAAI,CAAC,UAAU,CAAC;EACzB,CAAC;EAMD,WAAW;IACT,SAAS,CAAC,GAAG,EAAE;MACb,IAAI,CAAC,YAAY,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;MACnC,IAAI,CAAC,cAAc,CAAC,YAAY,CAAC,eAAe,EAAE,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;IAC1E,CAAC,CAAC,CAAC;EACL,CAAC;EAUD,wBAAwB;EAGxB,KAAK,CAAC,gBAAgB;IACpB,IAAI,SAAS,CAAC;IACd,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,EAAE;MACjD,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;MACxB,IAAI,CAAC,cAAc,GAAG,MAAM,SAAS,CAAC,eAAe,EAAE,CAAC;KACzD;SAAM,IACL,IAAI,CAAC,KAAK;MACV,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ;MAC9B,CAAC,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAChD;MACA,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;MACzB,IAAI,CAAC,cAAc,GAAG,SAAS,CAAC;KACjC;SAAM,IAAI,IAAI,CAAC,KAAK,YAAY,WAAW,EAAE;MAC5C,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC;KAClC;EACH,CAAC;EAGD,wBAAwB;;IACtB,IAAI,CAAC,IAAI,CAAC,IAAI;MAAE,OAAO;IAEvB,2CAA2C;IAC3C,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE;MACvD,IAAI,KAAK,CAAC,SAAS,EAAE;QACnB,MAAM,EAAE,GAAG,CAAC,IAAI,CAAC,EAAE,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE,CAC9C,IAAI,CAAC,qBAAqB,EAAE,CAC7B,CAAC,CAAC;QACH,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;OAC3D;MACD,IAAI,CAAC,qBAAqB,EAAE,CAAC;MAC7B,OAAO;KACR;IAED,2CAA2C;IAC3C,IAAI,MAAA,IAAI,CAAC,OAAO,0CAAE,MAAM,EAAE;MACxB,IAAI,CAAC,CAAC,IAAI,CAAC,EAAE,EAAE;QACb,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC;QACrB,IAAI,CAAC,EAAE,GAAG,SAAS,CAAC;OACrB;MAED,2BAA2B;MAC3B,SAAS,CAAC,GAAG,EAAE;;QACb,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;UACnD,IAAI,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,KAAK,EAAE;YAChC,MAAM,GAAG,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,EAAE;cAC/D,KAAK,EAAE,MAAM,CAAC,KAAK;cACnB,KAAK,EAAE,MAAM,CAAC,KAAK;cACnB,YAAY,EAAE,CAAC;cACf,WAAW,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM;cAChC,QAAQ,EAAE,MAAM,CAAC,QAAQ;cACzB,EAAE,EAAE,IAAI,CAAC,MAAM,GAAG,UAAU,GAAG,CAAC;cAChC,WAAW,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK;cACvD,IAAI,EAAE,eAAe;aACtB,CAAC,CAAC;YACH,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;YACtB,OAAO,GAAG,CAAC;WACZ;QACH,CAAC,CAAC,CAAC;QAEH,IAAI,CAAA,MAAA,IAAI,CAAC,cAAc,0CAAE,KAAK,CAAC,MAAM,KAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;UAC/D,IAAI,CAAC,WAAW,EAAE,CAAC;SACpB;;UAAM,IAAI,CAAC,WAAW,GAAG,CAAC,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC;MACjD,CAAC,CAAC,CAAC;KACJ;IACD,0BAA0B;EAC5B,CAAC;EAID,eAAe;IACb,IAAI,CAAC,IAAI,CAAC,cAAc;MAAE,OAAO;IAEjC,IAAI,QAAQ,GAAsB,EAAE,aAAa,EAAE,KAAK,EAAE,CAAC;IAC3D,IAAI,gBAAgB,GAAoB,MAAM,CAAC;IAC/C,IAAI,QAAQ,GAAG,KAAK,CAAC;IAErB,QAAQ,IAAI,CAAC,IAAI,EAAE;MACjB,KAAK,YAAY;QACf,kCAAkC;QAClC,MAAM;MACR,KAAK,QAAQ;QACX,gBAAgB,GAAG,MAAM,CAAC;QAC1B,QAAQ,GAAG,IAAI,CAAC;QAChB,QAAQ,GAAG,EAAE,aAAa,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC;QACxD,MAAM;KACT;IAED,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;MACrB,QAAQ,CAAC,QAAQ,GAAG,IAAI,CAAC,cAAc,CAAC;KACzC;IAED,IAAI,CAAC,cAAc,mCAAQ,IAAI,CAAC,cAAc,GAAK,QAAQ,CAAE,CAAC;IAC9D,IAAI,CAAC,cAAc,CAAC,YAAY,CAAC,mBAAmB,EAAE,gBAAgB,CAAC,CAAC;IACxE,IAAI,CAAC,cAAc,CAAC,QAAQ,GAAG,QAAQ,CAAC;EAC1C,CAAC;EAGD,iBAAiB,CAAC,QAA2B,EAAE,QAA2B;;IACxE,IAAI,CAAC,CAAC,QAAQ,EAAE;MACd,MAAM,SAAS,GAAG,QAAQ,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;MACjD,IAAI,SAAS,EAAE;QACb,SAAS,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;OAC/D;MACD,QAAQ,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;MACzD,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;MACvD,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;MAC3D,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;MAExD,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;MAEvB,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;QACjC,QAAQ,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;QAC1C,QAAQ,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;QAC1C,QAAQ,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;QACtC,QAAQ,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;QAC1C,QAAQ,CAAC,eAAe,CAAC,mBAAmB,CAAC,CAAC;QAC9C,QAAQ,CAAC,eAAe,CAAC,cAAc,CAAC,CAAC;MAC3C,CAAC,CAAC,CAAC;KACJ;IACD,IAAI,CAAC,CAAC,QAAQ,EAAE;MACd,MAAM,SAAS,GAAG,QAAQ,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;MACjD,IAAI,SAAS,EAAE;QACb,SAAS,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;OAC5D;MACD,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;MACtD,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;MACpD,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;MACxD,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;MACrD,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,MAAM,CAAC;MAE1C,IAAI,CAAC,UAAU,GAAG,CAAA,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,MAAM,0CAAE,IAAI,CAAC,CAAC,CAAC,KAAI,SAAS,CAAC,QAAQ,CAAC,CAAC;MAEnE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC;QAC3B,QAAQ,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QAC1C,QAAQ,CAAC,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;QAChD,QAAQ,CAAC,YAAY,CAAC,eAAe,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;QACpD,QAAQ,CAAC,YAAY,CAAC,WAAW,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;QAChD,QAAQ,CAAC,YAAY,CAAC,eAAe,EAAE,SAAS,CAAC,CAAC;QAClD,QAAQ,CAAC,YAAY,CAAC,cAAc,EAAE,KAAK,CAAC,CAAC;MAC/C,CAAC,CAAC,CAAC;KACJ;EACH,CAAC;EAID,kBAAkB;;IAChB,IAAI,CAAC,GAAG,CAAC,CAAC;IACV,MAAM,GAAG,GAAG,CAAA,MAAA,IAAI,CAAC,cAAc,0CAAE,KAAK,KAAI,EAAE,CAAC;IAC7C,MAAM,MAAM,GAAG,EAAE,CAAC;IAElB,SAAS,CAAC,GAAG,EAAE;MACb,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE;QACjC,IAAI,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;UAClC,CAAC,EAAE,CAAC;UACJ,GAAG,CAAC,YAAY,CAAC,eAAe,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC;UAC1C,GAAG,CAAC,YAAY,CAAC,cAAc,EAAE,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;UAC/D,GAAG,CAAC,MAAM,GAAG,KAAK,CAAC;UACnB,IAAI,CAAC,UAAU,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;SAC3B;aAAM;UACL,GAAG,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;UACrC,GAAG,CAAC,eAAe,CAAC,cAAc,CAAC,CAAC;UACpC,GAAG,CAAC,MAAM,GAAG,IAAI,CAAC;UAClB,GAAG,CAAC,QAAQ,GAAG,KAAK,CAAC;SACtB;QACD,GAAG,CAAC,EAAE,GAAG,IAAI,CAAC,MAAM,GAAG,UAAU,GAAG,CAAC,CAAC;QACtC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;MACtB,CAAC,CAAC,CAAC;MACH,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC;IAC1B,CAAC,CAAC,CAAC;EACL,CAAC;EAID,aAAa;IACX,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,IAAI,IAAI,CAAC,WAAW;MAAE,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;;MAChE,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;EAC5B,CAAC;EAED;;KAEG;EAGH,qBAAqB;IACnB,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,QAAQ;MAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACxE,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,OAAO;MAAE,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;EAC3D,CAAC;EAGD,mBAAmB;IACjB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;EACjD,CAAC;EAaD,gBAAgB;EAER,UAAU,CAAC,GAA0B,EAAE,GAAW;IACxD,IAAI,GAAG,KAAK,GAAG,CAAC,KAAK,IAAI,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;MAC1D,GAAG,CAAC,QAAQ,GAAG,IAAI,CAAC;KACrB;;MAAM,GAAG,CAAC,QAAQ,GAAG,KAAK,CAAC;EAC9B,CAAC;EAED,IAAY,aAAa;IACvB,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,IAAI;MAAE,OAAO,KAAK,CAAC;IACnD,OAAO,IAAI,CAAC;EACd,CAAC;EAED,IAAY,UAAU;IACpB,OAAO,IAAI,CAAC,UAAU,CAAC,IAAI,CACzB,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,KAAK,GAAG,CAAC,KAAK,CACjD,CAAC;EACJ,CAAC;EAED,8EAA8E;EACtE,gBAAgB,CAAC,GAA0B;;IACjD,IAAI,YAAY,CAAC;IAEjB,IAAI,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;MACrC,kBAAkB;MAClB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,KAAK,GAAG,CAAC,KAAK,CAAC,CAAC;MACjE,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KAC5C;SAAM;MACL,oBAAoB;MACpB,IAAI,CAAC,QAAQ,GAAG,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC;MACnC,YAAY,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KAC1C;IAED,IAAI,CAAC,YAAY,CAAC,gBAAgB,EAAE;MAClC,IAAI,IAAI,CAAC,cAAc;QAAE,IAAI,CAAC,cAAc,CAAC,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC;MAE/D,MAAM,KAAK,GAAG,IAAI,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;MACzC,MAAA,IAAI,CAAC,cAAc,0CAAE,aAAa,CAAC,KAAK,CAAC,CAAC;KAC3C;EACH,CAAC;EAWD,kCAAkC;EAClC,wGAAwG;EAChG,gBAAgB;IACtB,MAAM,QAAQ,GAAG,CAAC,MAAc,EAAE,EAAE,CAClC,MAAM,CAAC,WAAW,EAAE,CAAC,SAAS,CAAC,CAAC,EAAE,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;MAC3D,IAAI,CAAC,YAAY,CAAC;IAEpB,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CACnC,CAAC,GAAG,EAAE,EAAE,CACN,GAAG,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC;MAC3B,CAAC,GAAG,CAAC,QAAQ;MACb,CAAC,QAAQ,CAAC,GAAG,CAAC,WAAW,CAAC;QACxB,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC;QACnB,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC;QACnB,QAAQ,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC,CAC9B,CAAC;IACF,IAAI,QAAQ;MAAE,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;EAChD,CAAC;EAED,iBAAiB;EAET,qBAAqB;IAC3B,GAAG,CAAC,GAAG,EAAE;;MACP,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC,CAAC;MACxE,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;MAEnE,IAAI,CAAA,MAAA,IAAI,CAAC,cAAc,0CAAE,KAAK,CAAC,MAAM,KAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;QAC/D,IAAI,CAAC,WAAW,EAAE,CAAC;OACpB;;QAAM,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,UAAU,CAAC;IAC5C,CAAC,CAAC,CAAC;EACL,CAAC;EAUD,kFAAkF;EAC1E,WAAW;IACjB,IAAI,IAAI,CAAC,aAAa,EAAE;MACtB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,UAAU,CAAC;MACnC,OAAO;KACR;IAED,MAAM,GAAG,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC;IACtC,MAAM,MAAM,GAAG,GAAG,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC;IAExC,IAAI,UAAU,GAAG,KAAK,CAAC;IACvB,MAAM,UAAU,GAAG,EAAE,CAAC;IACtB,MAAM,QAAQ,GAAG,CAAC,MAAc,EAAE,EAAE,CAClC,MAAM,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;IAE5C,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;MAC9B,IACE,CAAC,GAAG,KAAK,GAAG,CAAC,KAAK,IAAI,GAAG,KAAK,GAAG,CAAC,KAAK,CAAC;QACxC,IAAI,CAAC,IAAI,KAAK,YAAY,EAC1B;QACA,GAAG,CAAC,QAAQ,GAAG,IAAI,CAAC;QACpB,UAAU,GAAG,IAAI,CAAC;OACnB;;QAAM,IAAI,CAAC,UAAU,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;IACnC,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;MAC9B,IAAI,CAAC,MAAM,CAAC,MAAM,IAAI,UAAU,EAAE;QAChC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;OACtB;WAAM,IACL,GAAG,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC;QAC3B,CAAC,GAAG,CAAC,QAAQ;QACb,CAAC,QAAQ,CAAC,GAAG,CAAC,WAAW,CAAC;UACxB,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC;UACnB,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC;UACnB,QAAQ,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC,EAC3B;QACA,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;OACtB;IACH,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,MAAM,IAAI,CAAC,UAAU,CAAC;IAC/C,IAAI,CAAC,WAAW,GAAG,UAAU,CAAC;EAChC,CAAC;EAgFD,sBAAsB;EAEtB,iBAAiB;IACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;EAC1B,CAAC;EAED,gBAAgB;IACd,IAAI,CAAC,wBAAwB,EAAE,CAAC;IAChC,IAAI,CAAC,WAAW,EAAE,CAAC;EACrB,CAAC;EAED,kBAAkB;IAChB,UAAU,CAAC,GAAG,EAAE;MACd,IAAI,CAAC,IAAI,CAAC,cAAc;QACtB,OAAO,CAAC,IAAI,CACV,2GAA2G,EAC3G,IAAI,CAAC,IAAI,CACV,CAAC;IACN,CAAC,EAAE,GAAG,CAAC,CAAC;EACV,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,IAAI,EAAC,SAAS,eACH,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,gBACxB,oCAAoC;MAE/C,qCACM,IAAI,CAAC,cAAc,IACvB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EACrC,WAAW,EAAC,oCAAoC,EAChD,KAAK,EAAE;UACL,eAAe,EAAE,IAAI;UACrB,mBAAmB,EAAE,IAAI,CAAC,UAAU;SACrC,EACD,eAAe,EAAE,IAAI,CAAC,UAAU,EAChC,eAAe,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAE3C,iBACE,MAAM,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,EAChC,IAAI,EAAC,SAAS,EACd,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,EAChE,KAAK,EAAE;YACL,WAAW,EAAE,IAAI;YACjB,mBAAmB,EAAE,IAAI,CAAC,aAAa;WACxC,EACD,QAAQ,EAAE,CAAC,CAAC,EACZ,YAAY,EAAE,IAAI,CAAC,WAAW,EAC9B,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;UAEhC,YAAM,IAAI,EAAC,UAAU,GAAG;UACvB,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,IAAI,eAAQ;UAChC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,IAAI,YAAM,IAAI,EAAC,eAAe,GAAG;UACvD,YAAM,IAAI,EAAC,aAAa,GAAG,CACjB;QACZ,iBACE,IAAI,EAAC,SAAS,EACd,KAAK,EAAC,kBAAkB,EACxB,MAAM,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,EACjC,KAAK,EAAE;YACL,WAAW,EAAE,IAAI;YACjB,mBAAmB,EAAE,IAAI,CAAC,aAAa;WACxC;UAED,YAAM,IAAI,EAAC,WAAW,GAAG,CACf;QACX,CAAC,CAAC,IAAI,CAAC,WAAW,IAAI,CACrB,wBAAe,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,eAAe;UACxD,IAAI,CAAC,WAAW,CAAC,MAAM;;UACvB,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;wBACnC,CACP,CACa,CACX,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n ComponentInterface,\n h,\n Host,\n Element,\n State,\n Watch,\n Prop,\n Event,\n EventEmitter,\n writeTask,\n Build,\n} from '@stencil/core';\nimport { debounce, raf } from '../../utils';\nimport type { Dropdown } from '../dropdown/dropdown';\nimport type { OptionInterface } from '../../interface';\n\nfunction findLabel(formCtrl: Element) {\n let foundLabel: HTMLLabelElement;\n\n if (formCtrl.id) {\n foundLabel = document.querySelector(`label[for='${formCtrl.id}']`);\n }\n if (!foundLabel) {\n foundLabel = formCtrl.closest('label');\n }\n return foundLabel;\n}\n\nlet listIds = 0;\n\n/*\n `nano-datalist` a visually consistent and more flexible replacement for a native\n * [datalist](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist). Can be nested within a `nano-input`\n * or linked to any input control via the `input` prop. Is used internally within `nano-select`.\n * Options can be defined declaratively by nesting `<nano-option>` elements or imperatively using the `options` prop\n \n @slot - use `<nano-option>` elements for more complex html. Alternatively use the `options` prop\n * @slot list-top - shows at the top of the list when there are options present\n * @slot list-bottom - shows at the bottom of the list when there are options present\n * @slot no-result - shown when there are no results otherwise nothing will be shown\n /\n@Component({\n tag: 'nano-datalist',\n styleUrl: 'datalist.scss',\n shadow: true,\n})\nexport class DataList implements ComponentInterface {\n // Private State\n\n private isNanoInput = false;\n private typeToSelect = '';\n private typeToSelectTimeout: number;\n private nanoDropdown: HTMLNanoDropdownElement;\n private listBox: HTMLNanoMenuElement;\n private mo?: MutationObserver;\n private listId = `nano-datalist-${listIds++}`;\n private isFiltered = false;\n private shouldFocus = false;\n // all potential option eles. Set via slot or `options` prop.\n // Some may get hidden due to filtering\n private get allOptEles() {\n return this._allOptEles;\n }\n private set allOptEles(opts) {\n // when allOptEles are initially set (on slot change / options) -\n // add options to 'selected' and fire selected event if\n // value isn't set on the input\n this._allOptEles = opts;\n if (this.connectedInput?.value) return;\n\n opts.forEach((opt) => {\n if (opt.selected && !this.selected.includes(opt.value)) {\n this.changeInputValue(opt);\n }\n });\n }\n private _allOptEles: HTMLNanoOptionElement[] = [];\n\n @Element() host: HTMLNanoDatalistElement;\n\n // active option eles that are not hidden.\n @State() actvOptEles: HTMLNanoOptionElement[] = [];\n @State() connectedInput: HTMLInputElement \| HTMLTextAreaElement;\n @State() inputLabel: HTMLLabelElement;\n @State() hasNoResult: boolean;\n @State() shouldOpen: boolean;\n @State() canOpen: boolean = true;\n @State() optionIds: string[] = [];\n\n constructor() {\n this.inputChange = debounce(this.inputChange.bind(this), 50);\n }\n\n // Public API\n\n /* By default, items in the list will appear 'selected' when the value in the linked input control matches.\n * However you can add other selected options via the the selected prop. /\n @Prop({ mutable: true }) selected: string[] = [];\n\n /* nano-dropdown config options you can pass to the nested dropdown component /\n @Prop()\n get dropDownConfig() {\n return this._dropDownConfig;\n }\n set dropDownConfig(ddc: Partial<Dropdown>) {\n this._dropDownConfig = { ...this._dropDownConfig, ...ddc };\n }\n private _dropDownConfig: Partial<Dropdown> = {\n skidding: -1,\n };\n\n /* Provide an option list.\n * Options can be defined declaratively by nesting `<nano-option>` elements or imperatively using this prop /\n @Prop() options?: OptionInterface[] = [];\n\n /* A selector to a HTMLInputElement /\n @Prop() input?: string \| HTMLInputElement;\n\n /* Tweaks the datalist behaviour and linked control semantics and behaviour.\n * e.g. 'select' will make the linked input control `readonly`.\n /\n @Prop() type: 'select' \| 'selctMulti' \| 'input' = 'input';\n\n /* return all the active options currently within the datalist. Can be useful for validation /\n @Prop()\n get activeOptions() {\n return this.allOptEles;\n }\n\n /* Force datalist open /\n @Prop({ mutable: true }) open: boolean = false;\n\n @Watch('open')\n openWatcher() {\n writeTask(() => {\n this.nanoDropdown.open = this.open;\n this.connectedInput.setAttribute('aria-expanded', this.open.toString());\n });\n }\n\n /* Use this option to disable to default filtering. This is useful if filtering happens\n * externally via another method (e.g. via ajax)\n /\n @Prop() disableFilter = false;\n\n /* Activate / deactivate the datalist control /\n @Prop() disabled = false;\n\n // State change watchers\n\n @Watch('input')\n async watchInputChange() {\n let nanoInput;\n if ((nanoInput = this.host.closest('nano-input'))) {\n this.isNanoInput = true;\n this.connectedInput = await nanoInput.getInputElement();\n } else if (\n this.input &&\n typeof this.input === 'string' &&\n (nanoInput = document.querySelector(this.input))\n ) {\n this.isNanoInput = false;\n this.connectedInput = nanoInput;\n } else if (this.input instanceof HTMLElement) {\n this.connectedInput = this.input;\n }\n }\n\n @Watch('options')\n manageSlotChangeListener() {\n if (!this.host) return;\n\n // we're not using `options` - setup new MO\n if ((!this.options \|\| !this.options.length) && !this.mo) {\n if (Build.isBrowser) {\n const mo = (this.mo = new MutationObserver(() =>\n this.processSlottedContent()\n ));\n mo.observe(this.host, { childList: true, subtree: true });\n }\n this.processSlottedContent();\n return;\n }\n\n // we're using `options` - trash current MO\n if (this.options?.length) {\n if (!!this.mo) {\n this.mo.disconnect();\n this.mo = undefined;\n }\n\n // add imperative `options`\n writeTask(() => {\n this.allOptEles = this.options.flatMap((option, i) => {\n if (option.value \|\| option.label) {\n const opt = Object.assign(document.createElement('nano-option'), {\n label: option.label,\n value: option.value,\n ariaPosinset: i,\n ariaSetsize: this.options.length,\n selected: option.selected,\n id: this.listId + '-option-' + i,\n textContent: option.label ? option.label : option.value,\n slot: 'internal-opts',\n });\n this.host.append(opt);\n return opt;\n }\n });\n\n if (this.connectedInput?.value.length && this.type !== 'select') {\n this.inputChange();\n } else this.actvOptEles = [...this.allOptEles];\n });\n }\n // forceUpdate(this.host);\n }\n\n @Watch('type')\n @Watch('connectedInput')\n watchTypeChange() {\n if (!this.connectedInput) return;\n\n let dwConfig: Partial<Dropdown> = { closeOnSelect: false };\n let autocompleteType: 'list' \| 'both' = 'both';\n let readonly = false;\n\n switch (this.type) {\n case 'selctMulti':\n // dwConfig.closeOnSelect = false;\n break;\n case 'select':\n autocompleteType = 'list';\n readonly = true;\n dwConfig = { closeOnSelect: true, placement: 'center' };\n break;\n }\n\n if (!this.isNanoInput) {\n dwConfig.tetherTo = this.connectedInput;\n }\n\n this.dropDownConfig = { ...this.dropDownConfig, ...dwConfig };\n this.connectedInput.setAttribute('aria-autocomplete', autocompleteType);\n this.connectedInput.readOnly = readonly;\n }\n\n @Watch('connectedInput')\n manageInputEvents(newInput?: HTMLInputElement, oldInput?: HTMLInputElement) {\n if (!!oldInput) {\n const nanoInput = oldInput.closest('nano-input');\n if (nanoInput) {\n nanoInput.removeEventListener('nanoChange', this.inputChange);\n }\n oldInput.removeEventListener('change', this.inputChange);\n oldInput.removeEventListener('click', this.inputClick);\n oldInput.removeEventListener('keydown', this.inputKeydown);\n oldInput.removeEventListener('input', this.inputChange);\n\n this.inputLabel = null;\n\n writeTask(() => {\n oldInput.removeAttribute('role');\n oldInput.removeAttribute('aria-expanded');\n oldInput.removeAttribute('aria-controls');\n oldInput.removeAttribute('aria-owns');\n oldInput.removeAttribute('aria-haspopup');\n oldInput.removeAttribute('aria-autocomplete');\n oldInput.removeAttribute('autocomplete');\n });\n }\n if (!!newInput) {\n const nanoInput = newInput.closest('nano-input');\n if (nanoInput) {\n nanoInput.addEventListener('nanoChange', this.inputChange);\n }\n newInput.addEventListener('change', this.inputChange);\n newInput.addEventListener('click', this.inputClick);\n newInput.addEventListener('keydown', this.inputKeydown);\n newInput.addEventListener('input', this.inputChange);\n this.listId = this.host.id \|\| this.listId;\n\n this.inputLabel = newInput?.labels?.item(0) \|\| findLabel(newInput);\n\n writeTask(() => {\n this.host.id = this.listId;\n newInput.setAttribute('role', 'combobox');\n newInput.setAttribute('aria-expanded', 'false');\n newInput.setAttribute('aria-controls', this.listId);\n newInput.setAttribute('aria-owns', this.listId);\n newInput.setAttribute('aria-haspopup', 'listbox');\n newInput.setAttribute('autocomplete', 'off');\n });\n }\n }\n\n @Watch('selected')\n @Watch('actvOptEles')\n watchActvOptChange() {\n let c = 0;\n const val = this.connectedInput?.value \|\| '';\n const optIds = [];\n\n writeTask(() => {\n this.allOptEles.forEach((opt, i) => {\n if (this.actvOptEles.includes(opt)) {\n c++;\n opt.setAttribute('aria-posinset', c + '');\n opt.setAttribute('aria-setsize', this.actvOptEles.length + '');\n opt.hidden = false;\n this.isSelected(opt, val);\n } else {\n opt.removeAttribute('aria-posinset');\n opt.removeAttribute('aria-setsize');\n opt.hidden = true;\n opt.selected = false;\n }\n opt.id = this.listId + '-option-' + i;\n optIds.push(opt.id);\n });\n this.optionIds = optIds;\n });\n }\n\n @Watch('actvOptEles')\n @Watch('hasNoResult')\n manageCanOpen() {\n if (this.actvOptEles.length \|\| this.hasNoResult) this.canOpen = true;\n else this.canOpen = false;\n }\n\n /\n Opens the dropdown if it can, it should and there are items to display.\n /\n @Watch('shouldOpen')\n @Watch('canOpen')\n manageDropdownDisplay() {\n if (this.shouldOpen && this.canOpen && !this.disabled) this.open = true;\n if (!this.shouldOpen \|\| !this.canOpen) this.open = false;\n }\n\n @Watch('actvOptEles')\n fireActiveOptsEvent() {\n this.nanoOptionsUpdated.emit(this.actvOptEles);\n }\n\n // Events\n\n /* Fired when an item is selected. /\n @Event() nanoSelect: EventEmitter<HTMLNanoOptionElement>;\n\n /* Fired when a currently selected item is reselected. /\n @Event() nanoDeselect: EventEmitter<HTMLNanoOptionElement>;\n\n /* Fired when active options change /\n @Event() nanoOptionsUpdated: EventEmitter<HTMLNanoOptionElement[]>;\n\n // Private logic\n\n private isSelected(opt: HTMLNanoOptionElement, val: string) {\n if (val === opt.value \|\| this.selected.includes(opt.value)) {\n opt.selected = true;\n } else opt.selected = false;\n }\n\n private get dropwdownOpen() {\n if (!this.nanoDropdown \|\| !this.open) return false;\n return true;\n }\n\n private get exactMatch() {\n return this.allOptEles.find(\n (opt) => this.connectedInput.value === opt.value\n );\n }\n\n /* reflect value back to the connected input unless the event is cancelled */\n private changeInputValue(opt: HTMLNanoOptionElement) {\n let nanoSelected;\n\n if (this.selected.includes(opt.value)) {\n // deselect option\n this.selected = this.selected.filter((val) => val !== opt.value);\n nanoSelected = this.nanoDeselect.emit(opt);\n } else {\n // select new option\n this.selected = [...this.selected];\n nanoSelected = this.nanoSelect.emit(opt);\n }\n\n if (!nanoSelected.defaultPrevented) {\n if (this.connectedInput) this.connectedInput.value = opt.value;\n\n const event = new window.Event('change');\n this.connectedInput?.dispatchEvent(event);\n }\n }\n\n // a new option has been picked\n private optSelected = (e: CustomEvent<HTMLNanoOptionElement>) => {\n e.stopPropagation();\n this.changeInputValue(e.detail);\n raf(() => this.inputChange());\n\n if (this.type === 'select') this.shouldOpen = false;\n };\n\n // this is for type=\"select\" only.\n // Filter options that start with text - aggregates letters (as opposed to getting the value from input)\n private setOptStartsWith() {\n const attrFind = (toFind: string) =>\n toFind.toLowerCase().substring(0, this.typeToSelect.length) ===\n this.typeToSelect;\n\n const foundEle = this.allOptEles.find(\n (opt) =>\n opt.value.trim().length > 0 &&\n !opt.disabled &&\n (attrFind(opt.textContent) \|\|\n attrFind(opt.value) \|\|\n attrFind(opt.label) \|\|\n attrFind(opt.filterMeta))\n );\n if (foundEle) this.changeInputValue(foundEle);\n }\n\n // Event handlers\n\n private processSlottedContent() {\n raf(() => {\n this.allOptEles = Array.from(this.host.querySelectorAll('nano-option'));\n this.hasNoResult = !!this.host.querySelector('[slot=\"no-result\"]');\n\n if (this.connectedInput?.value.length && this.type !== 'select') {\n this.inputChange();\n } else this.actvOptEles = this.allOptEles;\n });\n }\n\n // sets focus immediately on open when 'select' - mirroring native behaviour\n private handleShow = async () => {\n if (this.type === 'select' \|\| this.shouldFocus) {\n this.shouldFocus = false;\n this.listBox.setFocus();\n }\n };\n\n // any changes to the connected input value will filter the list of active options\n private inputChange() {\n if (this.disableFilter) {\n this.actvOptEles = this.allOptEles;\n return;\n }\n\n const val = this.connectedInput.value;\n const valStr = val.trim().toLowerCase();\n\n let exactMatch = false;\n const activeEles = [];\n const attrFind = (toFind: string) =>\n toFind.toLowerCase().indexOf(valStr) > -1;\n\n this.allOptEles.forEach((opt) => {\n if (\n (val === opt.value \|\| val === opt.label) &&\n this.type !== 'selctMulti'\n ) {\n opt.selected = true;\n exactMatch = true;\n } else this.isSelected(opt, val);\n });\n\n this.allOptEles.forEach((opt) => {\n if (!valStr.length \|\| exactMatch) {\n activeEles.push(opt);\n } else if (\n opt.value.trim().length > 0 &&\n !opt.disabled &&\n (attrFind(opt.textContent) \|\|\n attrFind(opt.value) \|\|\n attrFind(opt.label) \|\|\n attrFind(opt.filterMeta))\n ) {\n activeEles.push(opt);\n }\n });\n\n this.isFiltered = valStr.length && !exactMatch;\n this.actvOptEles = activeEles;\n }\n\n private inputClick = () => {\n this.shouldOpen = true;\n // open dropdown if possible\n this.manageDropdownDisplay();\n };\n\n private inputKeydown = (e: KeyboardEvent) => {\n const ignoreKeys = [\n 'Shift',\n 'ArrowRight',\n 'ArrowLeft',\n 'Escape',\n 'Enter',\n 'Tab',\n ];\n if (ignoreKeys.includes(e.key)) {\n if (e.key === 'Tab') this.shouldOpen = false;\n return;\n }\n\n // When select, mirror native select behaviour. Search on closed list\n if (\n this.type === 'select' &&\n !['ArrowDown', 'ArrowUp'].includes(e.key) &&\n (e.key !== ' ' \|\| this.typeToSelectTimeout)\n ) {\n if (e.key === ' ' \|\| /^[a-z0-9]+$/i.test(e.key)) {\n clearTimeout(this.typeToSelectTimeout);\n this.typeToSelectTimeout = window.setTimeout(() => {\n this.typeToSelect = '';\n this.typeToSelectTimeout = 0;\n }, 750);\n this.typeToSelect += e.key;\n this.setOptStartsWith();\n }\n return;\n }\n\n this.shouldOpen = true;\n // open dropdown if possible\n this.manageDropdownDisplay();\n if (['ArrowDown', 'ArrowUp'].includes(e.key)) this.shouldFocus = true;\n };\n\n // handles key down on options. Either 'picks'\n // an option or passes event back to input for search / filter\n private optionKeyDown = (\n e: KeyboardEvent & { target: HTMLNanoOptionElement }\n ) => {\n const ignoreKeys = [\n 'Shift',\n 'ArrowUp',\n 'ArrowDown',\n 'Escape',\n 'Enter',\n 'Tab',\n 'Space',\n 'PageUp',\n 'PageDown',\n 'Home',\n 'End',\n ' ',\n ];\n if (ignoreKeys.includes(e.key)) {\n if (e.key === 'Escape') this.connectedInput.focus();\n return;\n }\n\n const deleteKeys = ['Delete', 'Backspace'];\n // this passes whatever's typed back to our input control\n if (\n this.type !== 'select' &&\n (!this.exactMatch \|\| deleteKeys.includes(e.key))\n ) {\n this.connectedInput.focus();\n }\n };\n\n // Component lifecycle\n\n connectedCallback() {\n this.watchInputChange();\n }\n\n componentDidLoad() {\n this.manageSlotChangeListener();\n this.openWatcher();\n }\n\n componentDidRender(): void {\n setTimeout(() => {\n if (!this.connectedInput)\n console.warn(\n 'no `nano-input` found. `nano-datalist` should be nested within an `nano-input` or linked via `input` prop',\n this.host\n );\n }, 500);\n }\n\n render() {\n return (\n <Host\n role=\"listbox\"\n aria-owns={this.optionIds.join(' ')}\n aria-label=\"Select options from the list below\"\n >\n <nano-dropdown\n {...this.dropDownConfig}\n ref={(el) => (this.nanoDropdown = el)}\n dialogTitle=\"Select options from the list below\"\n class={{\n dlist__dropdown: true,\n 'dlist--isfiltered': this.isFiltered,\n }}\n onNanoAfterShow={this.handleShow}\n onNanoAfterHide={(_) => (this.open = false)}\n >\n <nano-menu\n hidden={!this.actvOptEles.length}\n type=\"listbox\"\n label={this.inputLabel ? this.inputLabel.textContent : undefined}\n class={{\n dlist__menu: true,\n 'dlist__menu--open': this.dropwdownOpen,\n }}\n tabIndex={-1}\n onNanoSelect={this.optSelected}\n onKeyDown={this.optionKeyDown}\n ref={(el) => (this.listBox = el)}\n >\n <slot name=\"list-top\" />\n {!this.options.length && <slot />}\n {!!this.options.length && <slot name=\"internal-opts\" />}\n <slot name=\"list-bottom\" />\n </nano-menu>\n <nano-menu\n type=\"listbox\"\n label=\"No results found\"\n hidden={!!this.actvOptEles.length}\n class={{\n dlist__menu: true,\n 'dlist__menu--open': this.dropwdownOpen,\n }}\n >\n <slot name=\"no-result\" />\n </nano-menu>\n {!!this.actvOptEles && (\n <div aria-live=\"polite\" role=\"status\" class=\"dlist__status\">\n {this.actvOptEles.length} result\n {this.actvOptEles.length > 1 ? 's' : ''} available.\n </div>\n )}\n </nano-dropdown>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/date-input/date-input.css CHANGED Viewed

@@ -45,32 +45,13 @@ nano-icon {
           flex-direction: column;
   position: relative;
 }
-@media (max-width: 35.9375em) {
-  .date-field::before {
-    content: "";
-    position: fixed;
-    background: rgba(0, 0, 0, 0);
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    z-index: -1;
-    -webkit-transition: z-index 0.001s ease 1s, background 0.2s ease;
-    transition: z-index 0.001s ease 1s, background 0.2s ease;
-  }
-  :host([picker-open]) .date-field::before {
-    -webkit-transition: z-index 0.001s ease, background 0.2s ease 0.001s;
-    transition: z-index 0.001s ease, background 0.2s ease 0.001s;
-    background: rgba(0, 0, 0, 0.5);
-    z-index: 100;
-  }
-}
 .date-field__dropdown {
   --padding: 0;
   --overflow: visible;
   padding: 0 !important;
   width: 0 !important;
   width: 100%;
+  z-index: var(--nano-layer-index-dropdown, 300) !important;
 }
 .date-field__close-bar {
   -webkit-box-align: center;

package/dist/collection/components/date-input/date-input.js CHANGED Viewed

@@ -102,6 +102,7 @@ export class DateInput {
      * Close the picker after a date is selected
      */
     this.closeAfterPicked = true;
+    this._dropDownConfig = {};
     // Event handlers
     this.onInputChange = (e) => {
       e.stopPropagation();
@@ -214,6 +215,13 @@ export class DateInput {
   handlePickerOpenChange() {
     this.dropdown.open = this.pickerOpen;
   }
+  /** nano-dropdown config options you can pass to the nested dropdown component */
+  get dropDownConfig() {
+    return this._dropDownConfig;
+  }
+  set dropDownConfig(ddc) {
+    this._dropDownConfig = Object.assign(Object.assign({}, this._dropDownConfig), ddc);
+  }
   // Methods
   /**
    * Get the current state of the control.
@@ -307,27 +315,31 @@ export class DateInput {
   render() {
     this.locale =
       navigator.languages || navigator.language || undefined;
-    let placement = this.host.ownerDocument.dir === 'rtl'
-      ? 'bottom-start'
-      : 'bottom-end';
+    this.dropDownConfig.placement =
+      this.dropDownConfig.placement || 'bottom-end';
+    if (this.host.ownerDocument.dir === 'rtl') {
+      this.dropDownConfig.placement.replace('start', 'end');
+    }
+    if (this.trigger)
+      this.dropDownConfig.tetherTo = this.trigger;
     const valueDate = parseISODate(this.value);
     const hasHelperSlot = !!this.host.querySelector('[slot="helper"]');
     return (h(Host, { class: Object.assign({}, createColorClasses(this.color)) },
       h("div", { class: "date-field" },
-        h("nano-input", { class: "date-field__input", slot: "trigger", required: this.required || undefined, showInlineError: this.showInlineError, validateOn: this.validateOn, placeholder: this.placeholder !== 'false' ? this.placeholder : undefined, pattern: this.pattern, label: this.label, disabled: this.disabled || undefined, color: this.color || undefined, autofocus: this.autofocus || undefined, clearInput: this.clearInput || undefined, onNanoChange: this.onInputChange, onNanoInput: this.onInputKey, onNanoValidate: this.onInputValidate, name: "", form: this.form || undefined, size: this.size || undefined, readonly: this.readonly, value: this.inputValue, ref: (input) => (this.input = input), floatLabel: this.floatLabel, hideLabel: this.hideLabel, inputmode: 'numeric' },
+        h("nano-input", { class: "date-field__input", slot: "trigger", required: this.required || undefined, showInlineError: this.showInlineError, validateOn: this.validateOn, placeholder: this.placeholder !== 'false' ? this.placeholder : undefined, pattern: this.pattern, label: this.label, disabled: this.disabled || undefined, color: this.color || undefined, autofocus: this.autofocus || undefined, clearInput: this.clearInput || undefined, onNanoChange: this.onInputChange, onNanoInput: this.onInputKey, onNanoValidate: this.onInputValidate, name: "", form: this.form || undefined, size: this.size || undefined, readonly: this.readonly, value: this.inputValue, ref: (input) => (this.input = input), floatLabel: this.floatLabel, hideLabel: this.hideLabel, inputmode: 'numeric', part: "input" },
           h("slot", { name: "start", slot: "start" }),
           h("slot", { name: "label" }),
           h("slot", { name: "end", slot: "end" }),
           this.picker && [
             h("button", { slot: "end", class: "date-field__open", type: "button", onKeyDown: this.onTriggerKey, onClick: this.onTriggerClick, ref: (trigger) => (this.trigger = trigger), disabled: this.disabled || this.readonly },
               h("nano-icon", { name: "light/calendar-alt" })),
-            h("nano-dropdown", { slot: "end", placement: placement, onNanoHide: this.onDropdownHide, onNanoShow: this.onDropdownShow, dialogTitle: "Choose a date", class: "date-field__dropdown", ref: (dropdown) => (this.dropdown = dropdown) },
+            h("nano-dropdown", Object.assign({ slot: "end", onNanoHide: this.onDropdownHide, onNanoShow: this.onDropdownShow, dialogTitle: "Choose a date", class: "date-field__dropdown", ref: (dropdown) => (this.dropdown = dropdown) }, this.dropDownConfig, { part: "dropdown" }),
               h("div", null,
                 h("div", { class: "date-field__close-bar" },
                   h("button", { class: "date-field__close", type: "button", onMouseDown: this.onCloseClick, onKeyDown: this.onCloseKeyDown, ref: (pickerClose) => (this.pickerCloseBtn = pickerClose) },
                     h("nano-icon", { name: "light/times" }),
                     h("span", { class: "vhidden" }, "Close window"))),
-                h("nano-date-picker", { onNanoDatePicked: this.onDatePicked, min: this.min || undefined, max: this.max || undefined, "is-modal": true, ref: (picker) => (this.pickerEle = picker), localization: this.localization, selectedDate: this.value || this.initialPickerDate, firstDayOfWeek: this.firstDayOfWeek, color: this.color || undefined }))),
+                h("nano-date-picker", { onNanoDatePicked: this.onDatePicked, min: this.min || undefined, max: this.max || undefined, "is-modal": true, ref: (picker) => (this.pickerEle = picker), localization: this.localization, selectedDate: this.value || this.initialPickerDate, firstDayOfWeek: this.firstDayOfWeek, color: this.color || undefined, part: "date-picker" }))),
           ],
           (hasHelperSlot || this.helperText || this.showInlineError) && (h("span", { slot: "helper" },
             h("span", { class: { vhidden: !!this.value.length } },
@@ -393,7 +405,7 @@ export class DateInput {
         "references": {
           "LocalDateOpts": {
             "location": "import",
-            "path": "/builds/99mRzSBj/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -514,7 +526,7 @@ export class DateInput {
         "references": {
           "DaysOfWeek": {
             "location": "import",
-            "path": "/builds/99mRzSBj/0/Digital/nano-components/packages/components/src/utils/date-utils.ts"
+            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/utils/date-utils.ts"
           }
         }
       },
@@ -538,7 +550,7 @@ export class DateInput {
         "references": {
           "DuetLocalizedText": {
             "location": "import",
-            "path": "/builds/99mRzSBj/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -580,7 +592,7 @@ export class DateInput {
         "references": {
           "Color": {
             "location": "import",
-            "path": "/builds/99mRzSBj/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -909,6 +921,24 @@ export class DateInput {
       "attribute": "close-after-picked",
       "reflect": false,
       "defaultValue": "true"
+    },
+    "dropDownConfig": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "{ host?: HTMLNanoDropdownElement; autoOpen?: boolean; open?: boolean; handleOpenChange?: () => void; closeOnSelect?: boolean; containingElement?: HTMLElement; tetherTo?: HTMLElement; handleTetherToChange?: () => void; placement?: PopoverPlacement; distance?: number; skidding?: number; hoist?: boolean; handlePopoverOptionsChange?: () => void; dialogTitle?: string; nanoShow?: EventEmitter<any>; nanoAfterShow?: EventEmitter<any>; nanoHide?: EventEmitter<any>; nanoAfterHide?: EventEmitter<any>; secondaryOpen?: (ev: CustomEvent<any>) => void; secondaryClose?: (ev: CustomEvent<any>) => void; handlePanelSelect?: (event: CustomEvent<any>) => void; show?: () => Promise<void>; hide?: () => Promise<void>; connectedCallback?: () => void; componentDidLoad?: () => void; disconnectedCallback?: () => void; render?: () => any; }",
+        "resolved": "{ host?: HTMLNanoDropdownElement; autoOpen?: boolean; open?: boolean; handleOpenChange?: () => void; closeOnSelect?: boolean; containingElement?: HTMLElement; tetherTo?: HTMLElement; handleTetherToChange?: () => void; placement?: PopoverPlacement; distance?: number; skidding?: number; hoist?: boolean; handlePopoverOptionsChange?: () => void; dialogTitle?: string; nanoShow?: EventEmitter<any>; nanoAfterShow?: EventEmitter<any>; nanoHide?: EventEmitter<any>; nanoAfterHide?: EventEmitter<any>; secondaryOpen?: (ev: CustomEvent<any>) => void; secondaryClose?: (ev: CustomEvent<any>) => void; handlePanelSelect?: (event: CustomEvent<any>) => void; show?: () => Promise<void>; hide?: () => Promise<void>; connectedCallback?: () => void; componentDidLoad?: () => void; disconnectedCallback?: () => void; render?: () => any; }",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "nano-dropdown config options you can pass to the nested dropdown component"
+      },
+      "getter": true,
+      "setter": true,
+      "defaultValue": "{}"
     }
   }; }
   static get states() { return {
@@ -932,7 +962,7 @@ export class DateInput {
         "references": {
           "DateInputChangeEventDetail": {
             "location": "import",
-            "path": "/builds/99mRzSBj/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -955,7 +985,7 @@ export class DateInput {
         "references": {
           "ControlValidityEventDetail": {
             "location": "import",
-            "path": "/builds/99mRzSBj/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -977,7 +1007,7 @@ export class DateInput {
           },
           "ControlValidity": {
             "location": "import",
-            "path": "/builds/99mRzSBj/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         },
         "return": "Promise<ControlValidity>"