@xplortech/apollo-core 2.6.0 → 2.7.0

package/dist/collection/components/xpl-input/xpl-input-phone/xpl-input-phone.js

@@ -196,21 +196,21 @@ export class InputPhone {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'e966930ecc1ce026b03daf50902ee783d469af03', class: {
+        return (h(Host, { key: '79d8146efc51fb1fba4e595655274beff9e2f09a', class: {
                 'xpl-input-phone': true,
                 'xpl-input-phone--error': !!this.hasErrorState,
                 'xpl-input-phone--open': this.dropdownOpen,
                 'xpl-input-phone--domestic': !this.isInternational,
-            } }, h("div", { key: 'd594d5345f30bd1165662930abee8b4214b2640d', class: "xpl-input-wrapper" }, this.isInternational && (h("button", { key: '64842282265b03cce24e5d80386ea3f56c36b5ad', type: "button", id: this.triggerId, class: "xpl-input-phone__trigger", disabled: this.disabled, "aria-haspopup": "listbox", "aria-expanded": this.dropdownOpen ? 'true' : 'false', "aria-label": "Select country", onClick: this.handleTriggerClick }, ((_a = this.selectedCountry) === null || _a === void 0 ? void 0 : _a.name) && (h("xpl-icon", { key: '00b0b9e477d285cc3e1c61becfbc056511d99ea2', class: "xpl-input-phone__flag", icon: getCountryIconName(this.selectedCountry.name), size: 24, "aria-hidden": "true" })), h("xpl-icon", { key: '9cc394beb1573e00e0eca641bfa8590a5837ff48', class: "xpl-input-phone__trigger-icon", icon: "chevron-down", size: 20, "aria-hidden": "true" }))), h("div", { key: 'ade974ac878f7c7bc3aa07f613a3005283d86819', class: "xpl-input-phone__input-wrap" }, this.isInternational && (h("span", { key: 'f4907b6f5919184dad42bac3a1071b2bbfe71a06', class: "xpl-input-phone__dial-code" }, this.effectiveDialCode)), h("input", { key: '89dce440dba56953574a05eda46862b4f24f84f8', ref: (el) => {
+            } }, h("div", { key: 'f617abbc8656f0d9418e3bb87f0fdcd8b1646138', class: "xpl-input-wrapper" }, this.isInternational && (h("button", { key: '133d07a3d70e8c9e3c3a6690ae2296f176a409f7', type: "button", id: this.triggerId, class: "xpl-input-phone__trigger", disabled: this.disabled, "aria-haspopup": "listbox", "aria-expanded": this.dropdownOpen ? 'true' : 'false', "aria-label": "Select country", onClick: this.handleTriggerClick }, ((_a = this.selectedCountry) === null || _a === void 0 ? void 0 : _a.name) && (h("xpl-icon", { key: '20928aee771232962454e469210a31718922286c', class: "xpl-input-phone__flag", icon: getCountryIconName(this.selectedCountry.name), size: 24, "aria-hidden": "true" })), h("xpl-icon", { key: '22078ac403d3965ba72ee9164520778f3f65cc56', class: "xpl-input-phone__trigger-icon", icon: "chevron-down", size: 20, "aria-hidden": "true" }))), h("div", { key: '29cab6a655c36fd5add277b6d3c0f06c498a742d', class: "xpl-input-phone__input-wrap" }, this.isInternational && (h("span", { key: 'e83457a14cd689f43082afb611c7641f1353da36', class: "xpl-input-phone__dial-code" }, this.effectiveDialCode)), h("input", { key: 'ee747daab159986e319599ec6705c8f5edc78c3e', ref: (el) => {
                 this.inputEl = el;
-            }, type: "tel", id: this.inputId, class: "xpl-input-phone__input", name: this.name, disabled: this.disabled, readonly: this.readonly, required: this.required, "aria-invalid": this.hasErrorState ? 'true' : 'false', placeholder: this.effectivePlaceholder, autocomplete: this.isInternational ? 'tel-national' : 'tel', inputmode: "numeric", maxlength: this.maxInputLength, value: this.displayValue, onInput: this.handleNumberInput }), this.nationalNumber && this.isEditable && (h("button", { key: '21e63c5dad2d73c8969e71c10cae9c507da8574a', type: "button", class: "xpl-input-phone__clear", "aria-label": "Clear phone number", onClick: this.handleClear }, h("xpl-icon", { key: 'ef1044fd8cc939db7281a8e68e72c54effb55101', icon: "x-circle", size: 16 }))))), this.isInternational && this.isEditable && (h("xpl-dropdown", { key: '0de330a03e99bdc73af073ad5b20a7b817192307', ref: (el) => {
+            }, type: "tel", id: this.inputId, class: "xpl-input-phone__input", name: this.name, disabled: this.disabled, readonly: this.readonly, required: this.required, "aria-invalid": this.hasErrorState ? 'true' : 'false', placeholder: this.effectivePlaceholder, autocomplete: this.isInternational ? 'tel-national' : 'tel', inputmode: "numeric", maxlength: this.maxInputLength, value: this.displayValue, onInput: this.handleNumberInput }), this.nationalNumber && this.isEditable && (h("button", { key: 'ddb1bb6cf9ab3fb4bc3295db64fc986fe5dbf69b', type: "button", class: "xpl-input-phone__clear", "aria-label": "Clear phone number", onClick: this.handleClear }, h("xpl-icon", { key: 'c0f3201d0b34f9cbe5af9247540199db0c184514', icon: "x-circle", size: 16 }))))), this.isInternational && this.isEditable && (h("xpl-dropdown", { key: '8d4e50ee17d880272eaccf08cf8c84fc4400c36d', ref: (el) => {
                 this.dropdownRef = el;
             }, isOpen: this.dropdownOpen, triggerId: this.triggerId, anchorToTrigger: true, closeOnSelect: true, mode: "single", options: this.dropdownOptions, update: this.handleDropdownUpdate, onIsOpenChange: (e) => {
                 this.dropdownOpen = e.detail;
-            }, "aria-label": "Country" }, h("div", { key: '6055decf8f631611786fc8720b17cf84341ef316', slot: "header", class: "xpl-input-phone__search-wrap" }, h("xpl-input", { key: '6c53dbde79069dc000214f22d29b17e568fde19f', class: "xpl-input-phone__search", type: "text", label: "", placeholder: "Search", value: this.searchQuery, autocomplete: "off", onInputEvent: (e) => {
+            }, "aria-label": "Country" }, h("div", { key: '5808ecb917ee94ba31c8ab106152d2d61feae74a', slot: "header", class: "xpl-input-phone__search-wrap" }, h("xpl-input", { key: '76a2477f0e039e390dd26a0c34cdab758d3c10d6', class: "xpl-input-phone__search", type: "text", label: "", placeholder: "Search", value: this.searchQuery, autocomplete: "off", onInputEvent: (e) => {
                 var _a;
                 this.searchQuery = (_a = e.detail) !== null && _a !== void 0 ? _a : '';
-            } }, h("xpl-icon", { key: 'cb57543146d6f874849d518aea4c01f670e4afa4', slot: "pre", class: "xpl-input-phone__search-icon", icon: "magnifier", size: 20 })))))));
+            } }, h("xpl-icon", { key: '0a6b49b3a0df0769fb5dfa59f97c40adeaee8dd1', slot: "pre", class: "xpl-input-phone__search-icon", icon: "magnifier", size: 20 })))))));
     }
     static get is() { return "xpl-input-phone"; }
     static get properties() {

package/dist/collection/components/xpl-input/xpl-input-search/xpl-input-search.js

@@ -0,0 +1,485 @@
+import { Host, h, } from "@stencil/core";
+export class InputSearch {
+    constructor() {
+        this.hasAncestorForm = false;
+        this.ariaLabel = 'Search';
+        this.autocomplete = 'off';
+        this.disabled = false;
+        this.hasError = false;
+        this.hasVisibleLabel = false;
+        this.placeholder = 'Search';
+        this.readonly = false;
+        this.required = false;
+        this.shape = 'rounded';
+        this.value = '';
+        this.handleInnerFormSubmit = (event) => {
+            event.preventDefault();
+            if (this.disabled || this.readonly) {
+                return;
+            }
+            this.emitSearchCommit(this.value.trim());
+        };
+        this.handleClear = (event) => {
+            var _a;
+            event.preventDefault();
+            if (this.disabled || this.readonly) {
+                return;
+            }
+            this.value = '';
+            this.valueChange.emit('');
+            this.inputEvent.emit('');
+            (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+        this.handleInput = (event) => {
+            const target = event.target;
+            this.value = target.value;
+            this.valueChange.emit(target.value);
+            this.inputEvent.emit(target.value);
+        };
+        this.handleKeyDown = (event) => {
+            if (event.key !== 'Enter')
+                return;
+            if (this.disabled || this.readonly) {
+                return;
+            }
+            const input = event.target;
+            if (input.form) {
+                return;
+            }
+            event.preventDefault();
+            this.emitSearchCommit(this.value.trim());
+        };
+        this.handleFocus = (event) => {
+            this.focusEvent.emit(event);
+        };
+        this.handleBlur = (event) => {
+            this.blurEvent.emit(event);
+        };
+    }
+    connectedCallback() {
+        this.syncAncestorFormFlag();
+    }
+    async setFocus() {
+        var _a;
+        (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    syncAncestorFormFlag() {
+        const root = this.el;
+        const next = Boolean(root && typeof root.closest === 'function' && root.closest('form'));
+        if (this.hasAncestorForm !== next) {
+            this.hasAncestorForm = next;
+        }
+    }
+    get hasValue() {
+        return this.value !== undefined && this.value.length > 0;
+    }
+    get resolvedInputAriaLabel() {
+        var _a;
+        if (this.hasVisibleLabel) {
+            return undefined;
+        }
+        return ((_a = this.ariaLabel) !== null && _a !== void 0 ? _a : '').trim() || 'Search';
+    }
+    get rendersInnerSearchForm() {
+        return !this.hasAncestorForm;
+    }
+    emitSearchCommit(detail) {
+        this.search.emit(detail);
+    }
+    renderShell() {
+        const shell = (h("div", { class: "xpl-input-search__shell" }, h("span", { class: "xpl-input-search__icon", "aria-hidden": "true" }, h("xpl-icon", { icon: "magnifier", size: 20 })), h("input", { "aria-describedby": this.hasError ? this.errorMessageId : undefined, "aria-invalid": this.hasError ? 'true' : undefined, "aria-label": this.resolvedInputAriaLabel, autocomplete: this.autocomplete, class: "xpl-input-search__input", disabled: this.disabled, id: this.inputId, name: this.name, onBlur: this.handleBlur, onFocus: this.handleFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: this.placeholder, readonly: this.readonly, ref: (el) => {
+                this.inputEl = el !== null && el !== void 0 ? el : undefined;
+            }, required: this.required, role: "searchbox", type: "text", value: this.value }), h("button", { "aria-hidden": this.hasValue ? undefined : 'true', "aria-label": "Clear search", class: "xpl-input-search__clear", disabled: this.disabled || this.readonly, onClick: this.handleClear, type: "button" }, h("xpl-icon", { icon: "circle-xmark", size: 16 }))));
+        if (this.rendersInnerSearchForm) {
+            return (h("form", { class: "xpl-input-search__form", onSubmit: this.handleInnerFormSubmit }, shell));
+        }
+        return shell;
+    }
+    render() {
+        return (h(Host, { key: 'ac235500df2d6958d9070535f922a018bce14906', class: {
+                'xpl-input-search': true,
+                'xpl-input-search--disabled': this.disabled,
+                'xpl-input-search--error': this.hasError,
+                'xpl-input-search--has-value': this.hasValue,
+                'xpl-input-search--readonly': this.readonly,
+                'xpl-input-search--shape-box': this.shape === 'box',
+            } }, this.renderShell()));
+    }
+    static get is() { return "xpl-input-search"; }
+    static get properties() {
+        return {
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name when there is no visible label from the parent; maps to `aria-label` on the input.\nWhen the parent provides a visible label, the input is named by `<label for=\"\u2026\">` \u2014 this prop is ignored for naming.\nEmpty or whitespace-only values are treated as missing and fall back to `'Search'` so the field is never unnamed."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label",
+                "defaultValue": "'Search'"
+            },
+            "autocomplete": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Passed to the native input (`autocomplete` attribute). Default `off` matches common\ninline-search UX; browsers may still apply heuristics."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "autocomplete",
+                "defaultValue": "'off'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the field and clear control."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "errorMessageId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Element id for `aria-describedby` when `hasError` (error message lives on `xpl-input`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-message-id"
+            },
+            "hasError": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set by `xpl-input` when `error` is shown \u2014 drives `aria-invalid` / `aria-describedby`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "has-error",
+                "defaultValue": "false"
+            },
+            "hasVisibleLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, parent `xpl-input` renders a visible label \u2014 omit `aria-label` on the input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "has-visible-label",
+                "defaultValue": "false"
+            },
+            "inputId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Associates the control with the parent `xpl-input` label (`for` / `id`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "input-id"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Form field `name` on the native input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder shown when the value is empty."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "'Search'"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the input is editable."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "readonly",
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the input is required."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "shape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'rounded' | 'box'",
+                    "resolved": "\"box\" | \"rounded\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shell corner radius: `rounded` (pill) or `box` (rounded rectangle)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "shape",
+                "defaultValue": "'rounded'"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current value (controlled-friendly)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasAncestorForm": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "blurEvent",
+                "name": "blurEvent",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the inner control loses focus.\nWhen nested under `xpl-input type=\"search\"`, this event bubbles to the `xpl-input` host (same\nevent name as other input types)."
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "focusEvent",
+                "name": "focusEvent",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the inner control receives focus.\nWhen nested under `xpl-input type=\"search\"`, this event bubbles to the `xpl-input` host (same\nevent name as other input types)."
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "inputEvent",
+                "name": "inputEvent",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired on every input change (typing, paste) and when the value is cleared \u2014 mirrors `xpl-input` text fields.\nWhen nested under `xpl-input type=\"search\"`, bubbles to the `xpl-input` host."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "search",
+                "name": "search",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user commits a search (Enter with no enclosing form owner, or submit of the inner\nsearch form). `event.detail` is the trimmed query string.\nWhen nested under `xpl-input type=\"search\"`, the parent listens with `onSearch` and re-emits so the\ncanonical `search` `@Event` stays on `xpl-input`."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired on every input change (typing, paste) and when the value is cleared.\n`event.detail` is the raw `value` string (not trimmed).\nWhen nested under `xpl-input type=\"search\"`, bubbles to the `xpl-input` host."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Moves keyboard focus to the search field.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/xpl-input/xpl-input-time/xpl-input-time.js

@@ -105,11 +105,11 @@ export class InputTime {
         }));
     }
     render() {
-        return (h(Host, { key: '2dfd50560c047646807e49c2263454286b607a35', class: {
+        return (h(Host, { key: '6ed0e8da81a96e0e4e7078a7477c9a4ee92532ba', class: {
                 'xpl-input-time': true,
                 [`xpl-input-time--mode-${this.mode}`]: true,
                 'xpl-input-time--error': !!this.hasErrorState,
-            } }, h("xpl-input", { key: '5ebb2d5031efae40beae3ac0cf2a40bed5b96ae5', pre: h("xpl-icon", { class: "xpl-input-time__clock-icon", icon: "clock", size: 24 }), post: this.timeFormat === '12h' ? this.amPm || 'AM' : null, type: "text", _id: this.inputId, disabled: this.disabled, name: this.name, required: this.required, readonly: this.readonly, placeholder: this.placeholder, max: this.max, min: this.min, onInput: this.handleInput, value: this.formattedValue, onFocusEvent: this.handleFocus, onBlurEvent: this.handleBlur, onClick: this.handleClick }), !this.readonly && !this.disabled && (h("xpl-dropdown", { key: '313ee3020ddf2710e82756f1bc0e260b8959ef9e', options: this.options, isOpen: this.showOptions, ref: (el) => {
+            } }, h("xpl-input", { key: 'bae0f7e9b9e3f14b5d780a0300ef672da9301596', pre: h("xpl-icon", { class: "xpl-input-time__clock-icon", icon: "clock", size: 24 }), post: this.timeFormat === '12h' ? this.amPm || 'AM' : null, type: "text", _id: this.inputId, disabled: this.disabled, name: this.name, required: this.required, readonly: this.readonly, placeholder: this.placeholder, max: this.max, min: this.min, onInput: this.handleInput, value: this.formattedValue, onFocusEvent: this.handleFocus, onBlurEvent: this.handleBlur, onClick: this.handleClick }), !this.readonly && !this.disabled && (h("xpl-dropdown", { key: 'cd8ae7e4c7d130bdbf44aeb2f806b3c9a490d8bb', options: this.options, isOpen: this.showOptions, ref: (el) => {
                 this.dropdown = el;
             }, class: "xpl-input-time__dropdown" }))));
     }