@xplortech/apollo-core 2.5.0 → 2.7.0

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

@@ -1,6 +1,6 @@
-import { Host, h } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
 import { v4 as uuid } from "uuid";
-export class XplInput {
+export class Input {
     constructor() {
         this.multiline = false;
         this.dateFormat = 'Y-m-d';
@@ -12,6 +12,9 @@ export class XplInput {
         this.hideTriggerOnSelect = false;
         this.hideFileNames = false;
         this.hideAcceptText = false;
+        this.defaultCountry = 'US';
+        this.isInternational = true;
+        this.ariaLabel = '';
         this.type = 'text';
         this.valueChanged = (event) => {
             const target = event.target;
@@ -19,12 +22,13 @@ export class XplInput {
         };
         this.characterCount = 0;
         this.passwordVisible = false;
-        this.handleFocus = (ev) => {
-            this.focusEvent.emit(ev);
-        };
+        this.hasPreSlotContent = false;
         this.handleBlur = (ev) => {
             this.blurEvent.emit(ev);
         };
+        this.handleFocus = (ev) => {
+            this.focusEvent.emit(ev);
+        };
         this.handleInput = (ev) => {
             if (this.multiline) {
                 this.updateCharacterCount();
@@ -32,6 +36,35 @@ export class XplInput {
             const { value } = ev.target;
             this.inputEvent.emit(value);
         };
+        this.syncPreSlotContent = () => {
+            const hasSlotted = this.hasDirectPreSlotChild();
+            if (hasSlotted !== this.hasPreSlotContent) {
+                this.hasPreSlotContent = hasSlotted;
+            }
+        };
+        this.handleSearchBlurForward = (event) => {
+            const { detail } = event;
+            if (!detail) {
+                return;
+            }
+            event.stopPropagation();
+            this.blurEvent.emit(detail);
+        };
+        this.handleSearchCommit = (event) => {
+            event.stopPropagation();
+            this.search.emit(event.detail);
+        };
+        this.handleSearchFocusForward = (event) => {
+            const { detail } = event;
+            if (!detail) {
+                return;
+            }
+            event.stopPropagation();
+            this.focusEvent.emit(detail);
+        };
+    }
+    hasDirectPreSlotChild() {
+        return Array.from(this.el.children).some((child) => child.getAttribute('slot') === 'pre');
     }
     updateCharacterCount() {
         this.characterCount = this.input.value.length;
@@ -42,8 +75,32 @@ export class XplInput {
         if (this.multiline && this.maxCharacterCount !== undefined) {
             this.characterCount = this.value !== undefined ? this.value.length : 0;
         }
+        if (!this.multiline) {
+            this.hasPreSlotContent = this.hasDirectPreSlotChild();
+        }
+    }
+    componentDidLoad() {
+        if (this.multiline || this.type === 'search')
+            return;
+        if (typeof MutationObserver !== 'undefined') {
+            this.preSlotObserver = new MutationObserver(this.syncPreSlotContent);
+            this.preSlotObserver.observe(this.el, { childList: true });
+        }
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.preSlotObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    async setFocus() {
+        var _a, _b;
+        if (this.type === 'search') {
+            await ((_a = this.searchInputRef) === null || _a === void 0 ? void 0 : _a.setFocus());
+            return;
+        }
+        (_b = this.input) === null || _b === void 0 ? void 0 : _b.focus();
     }
     renderInput() {
+        var _a, _b, _c, _d, _e, _f;
         switch (this.type) {
             case 'file':
                 return (h("xpl-input-file", { accept: this.accept, disabled: this.disabled, hideAcceptText: this.hideAcceptText, hideFileNames: this.hideFileNames, hideTriggerOnSelect: this.hideTriggerOnSelect, multiple: this.multiple, name: this.name, _id: this._id }, h("slot", { name: "trigger" })));
@@ -53,8 +110,20 @@ export class XplInput {
                 return (h("xpl-input-date", { inputId: this._id, disabled: this.disabled, name: this.name, required: this.required, readonly: this.readonly, value: this.value, placeholder: this.placeholder, post: this.post, pre: this.pre, max: this.max, min: this.min, dateFormat: this.dateFormat, mode: this.mode }));
             case 'time':
                 return (h("xpl-input-time", { inputId: this._id, disabled: this.disabled, name: this.name, required: this.required, readonly: this.readonly, value: this.value, placeholder: this.placeholder, max: this.max, min: this.min, step: this.step, mode: this.mode, timeFormat: this.timeFormat, allowCustomOption: this.allowCustomOption }));
+            case 'phone':
+                return (h("xpl-input-phone", { inputId: this._id, disabled: this.disabled, name: this.name, required: this.required, readonly: this.readonly, value: this.value, placeholder: this.placeholder, defaultCountry: this.defaultCountry, preferredCountries: this.preferredCountries, isInternational: this.isInternational }));
+            case 'search': {
+                const hasVisibleLabel = Boolean(((_a = this.label) !== null && _a !== void 0 ? _a : '').trim());
+                const hasErrorMessage = Boolean(this.error && this.error.length > 0);
+                return (h("xpl-input-search", { ariaLabel: ((_b = this.ariaLabel) !== null && _b !== void 0 ? _b : '').trim() || 'Search', autocomplete: (_c = this.autocomplete) !== null && _c !== void 0 ? _c : 'off', disabled: this.disabled, errorMessageId: hasErrorMessage ? `${this._id}-error` : undefined, hasError: hasErrorMessage, hasVisibleLabel: hasVisibleLabel, inputId: this._id, name: this.name, onBlurEvent: this.handleSearchBlurForward, onFocusEvent: this.handleSearchFocusForward, onSearch: this.handleSearchCommit, placeholder: (_d = this.placeholder) !== null && _d !== void 0 ? _d : 'Search', readonly: this.readonly, ref: (el) => {
+                        this.searchInputRef = el !== null && el !== void 0 ? el : undefined;
+                    }, required: this.required, shape: (_e = this.shape) !== null && _e !== void 0 ? _e : 'rounded', value: (_f = this.value) !== null && _f !== void 0 ? _f : '' }));
+            }
             default:
-                return (h("div", { class: "xpl-input-wrapper" }, this.pre && !this.multiline && (h("label", { class: "xpl-input-pre", htmlFor: this._id }, this.pre)), !this.multiline ? (h("input", { autocomplete: this.autocomplete, disabled: this.disabled, id: this._id, max: this.max, min: this.min, name: this.name, placeholder: this.placeholder, readonly: this.readonly, ref: (el) => {
+                return (h("div", { class: "xpl-input-wrapper" }, !this.multiline && (h("label", { class: {
+                        'xpl-input-pre': true,
+                        'xpl-input-pre--hidden': !this.pre && !this.hasPreSlotContent,
+                    }, htmlFor: this._id }, h("slot", { name: "pre" }, this.pre))), !this.multiline ? (h("input", { autocomplete: this.autocomplete, disabled: this.disabled, id: this._id, max: this.max, min: this.min, name: this.name, placeholder: this.placeholder, readonly: this.readonly, ref: (el) => {
                         this.input = el;
                     }, required: this.required, step: this.step, type: this.type, value: this.value, onChange: this.valueChanged, onFocus: this.handleFocus, onBlur: this.handleBlur, onInput: this.handleInput })) : (h("textarea", { disabled: this.disabled, id: this._id, name: this.name, placeholder: this.placeholder, readonly: this.readonly, ref: (el) => {
                         this.input = el;
@@ -78,13 +147,13 @@ export class XplInput {
         if (type === 'password' && this.passwordVisible) {
             type = 'text';
         }
-        return (h(Host, { key: 'c682985a3d592f9f9902a16013a5d00f40ce5e44', class: {
+        return (h(Host, { key: '21535bfebdb899ef3bf28ae4ac252ffcc8b03388', class: {
                 'xpl-input': true,
                 'xpl-input--disabled': this.disabled,
                 'xpl-input--error': hasError,
                 'xpl-input--readonly': this.readonly,
                 [`xpl-input--${this.type}`]: true,
-            } }, this.label && (h("label", { key: '21d863221e85a255f3dc5e662139b7abc0e72907', class: "xpl-input-label", htmlFor: this._id }, this.label, this.description && h("small", { key: '25d078a667c8b9cbf4d1b5d1f412c3d0e736013a' }, this.description))), this.renderInput(), ((_a = this.error) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("label", { key: '7e13c1fc18496bdf50cdb2a239c113c182b83f18', class: "xpl-input-error", htmlFor: this._id }, h("xpl-icon", { key: '900d641cfcd94d9f6cc85ba34e1e211448c203df', icon: "alert-circle", size: 16 }), h("span", { key: '74f7868861f5c262038bee3de2faeecc46b2454d' }, this.error)))));
+            } }, this.label && (h("label", { key: 'f72b35d866295451cf74832dd191853e77190590', class: "xpl-input-label", htmlFor: this._id }, this.label, this.description && h("small", { key: '712910cd0e7a1db84add0f1483fdc0da6c38a07d' }, this.description))), this.renderInput(), ((_a = this.error) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("label", { key: 'd8fcab92ea7f4989e9d2db1117e689ad9a26ced8', class: "xpl-input-error", htmlFor: this._id, id: `${this._id}-error` }, h("xpl-icon", { key: 'cbe4f7792ea586c78b7bc0f34d277bfa5977d50e', icon: "alert-circle", size: 16 }), h("span", { key: '91f88da21c48f0bf069e4c20205a81cfbb30fb1e' }, this.error)))));
     }
     static get is() { return "xpl-input"; }
     static get properties() {
@@ -234,7 +303,7 @@ export class XplInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Whether the input is editable\n\nApplies to text, password, number, and date inputs."
+                    "text": "Whether the input is editable\n\nApplies to text, password, number, date, and search inputs."
                 },
                 "getter": false,
                 "setter": false,
@@ -253,7 +322,7 @@ export class XplInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Including a `value` will pre-populate the input\nwith the given string.\n\nApplies to text, password, number, and date inputs."
+                    "text": "Including a `value` will pre-populate the input\nwith the given string.\n\nApplies to text, password, number, date, and search inputs."
                 },
                 "getter": false,
                 "setter": false,
@@ -272,7 +341,7 @@ export class XplInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Hint for form autofill feature\n\nApplies to text, password, number."
+                    "text": "Hint for form autofill feature\n\nApplies to text, password, number, and search inputs."
                 },
                 "getter": false,
                 "setter": false,
@@ -291,7 +360,7 @@ export class XplInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Placeholder text that appears when the field has no value\n\nApplies to text, password, number, and date inputs."
+                    "text": "Placeholder text that appears when the field has no value\n\nApplies to text, password, number, date, and search inputs."
                 },
                 "getter": false,
                 "setter": false,
@@ -631,12 +700,111 @@ export class XplInput {
                 "reflect": false,
                 "attribute": "hide-eye-dropper"
             },
+            "defaultCountry": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Default country code (ISO 3166-1 alpha-2) when value is empty, e.g. \"US\".\n\nApplies to phone inputs."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-country",
+                "defaultValue": "'US'"
+            },
+            "preferredCountries": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Country codes to show at the top of the country list, e.g. [\"US\", \"CA\", \"GB\"].\n\nApplies to phone inputs."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "isInternational": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "true\n\nApplies to phone inputs."
+                        }],
+                    "text": "Enables international mode with country selector for phone inputs.\nWhen false, the phone input is locked to defaultCountry with no country picker."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-international",
+                "defaultValue": "true"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name for search inputs when there is no visible `label` (after trim).\nIgnored for naming when a visible label is shown.\nDefaults to `''`; whitespace-only values are treated as missing and fall back to `'Search'` so the field is never unnamed when there is no visible label.\n\nApplies to search inputs (`type=\"search\"`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label",
+                "defaultValue": "''"
+            },
+            "shape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'rounded' | 'box'",
+                    "resolved": "\"box\" | \"rounded\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Shell corner radius for search inputs: `rounded` (pill) or `box` (rounded rectangle).\n\nApplies to search inputs (`type=\"search\"`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "shape"
+            },
             "type": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'date' | 'time' | 'text' | 'number' | 'password' | 'file' | 'color'",
-                    "resolved": "\"color\" | \"date\" | \"file\" | \"number\" | \"password\" | \"text\" | \"time\"",
+                    "original": "| 'date'\n        | 'time'\n        | 'text'\n        | 'number'\n        | 'password'\n        | 'file'\n        | 'color'\n        | 'phone'\n        | 'search'",
+                    "resolved": "\"color\" | \"date\" | \"file\" | \"number\" | \"password\" | \"phone\" | \"search\" | \"text\" | \"time\"",
                     "references": {}
                 },
                 "required": false,
@@ -656,7 +824,8 @@ export class XplInput {
     static get states() {
         return {
             "characterCount": {},
-            "passwordVisible": {}
+            "passwordVisible": {},
+            "hasPreSlotContent": {}
         };
     }
     static get events() {
@@ -708,7 +877,7 @@ export class XplInput {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Event that emits the current value of the input"
+                    "text": "Event that emits the current value of the input (including search fields)."
                 },
                 "complexType": {
                     "original": "string",
@@ -723,7 +892,22 @@ export class XplInput {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Event that emits the current value of the input\n\nApplies to text like inputs only."
+                    "text": "Event that emits the current value of the input\n\nApplies to text-like inputs and search inputs."
+                },
+                "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\ninternal search form). `event.detail` is the trimmed query string.\n\nApplies to search inputs (`type=\"search\"`)."
                 },
                 "complexType": {
                     "original": "string",
@@ -732,4 +916,26 @@ export class XplInput {
                 }
             }];
     }
+    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 native control (text field, textarea, or search inner input).",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
 }

package/dist/collection/components/xpl-large-card/large-card.stories.js

@@ -124,4 +124,8 @@ LargeCard.parameters = {
             </section>
         `)(LargeCard.args),
     },
+    design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=17661-38565&p=f&t=01tbTrRZyfvVafsA-11',
+    },
 };

package/dist/collection/components/xpl-large-card/xpl-large-card.js

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-export class XplLargeCard {
+export class LargeCard {
     componentDidLoad() {
         if (this.link) {
             const anchorEl = this.el.getElementsByTagName('a')[0] || this.el.getElementsByTagName('button')[0];
@@ -13,7 +13,7 @@ export class XplLargeCard {
     render() {
         const contentSlot = 'graph-content';
         const hasContentSlot = this.el.querySelector(`[slot="${contentSlot}"]`);
-        return (h(Host, { key: '6c7928c9fae502001c8866eaa4b3f858a26eaead', role: "group", class: `xpl-large-card ${this.link ? 'xpl-large-card__link' : ''}`, tabindex: "0" }, h("dt", { key: 'df8e79e59236237ed54d640b544c7a19a850f89b', class: "xpl-large-card__header" }, h("header", { key: '6159de81cbcae7021f3a57fa3a800b241e548ca9' }, h("slot", { key: 'c2aac7c35f67430d0b09f1ad259c5121ef80e02f', name: "title" }, this.name), this.link && (h("span", { key: 'b292328bfb83340c848a793105df6892e6dd29e6', class: "xpl-data-card__header-arrow" }, h("xpl-icon", { key: 'e7bf907891716116cf050f7033d02d3822b56062', icon: "chevron-right", size: 16 })))), this.description && (h("div", { key: 'f9bee0304cd33f23a303c4562b0e48ac99f88483', class: "xpl-large-card__description" }, this.description))), h("dd", { key: 'e5800cc865b61e0a30a2b0dd7c432b630057281e', class: "xpl-large-card__body" }, hasContentSlot && h("slot", { key: 'a31d2a18c13340cc82a5b9c1af6963c024ec9a3a', name: contentSlot }))));
+        return (h(Host, { key: '886078965cb1ca87fd9c4f45a8b06f089a4b2e04', role: "group", class: `xpl-large-card ${this.link ? 'xpl-large-card__link' : ''}`, tabindex: "0" }, h("dt", { key: '1c2006c9167b2d46262b222ace3c5e9135863783', class: "xpl-large-card__header" }, h("header", { key: '21ba4629c7e3d0d9dff98f9dde2ac4bc9f1f494e' }, h("slot", { key: 'd50991dc4fcca6c56c04c7cc9a401f0894035aa2', name: "title" }, this.name), this.link && (h("span", { key: '35b1b15786c1674f6d1797ec3b04da81b27d5d3a', class: "xpl-data-card__header-arrow" }, h("xpl-icon", { key: 'f52a7a39b3d044341296d88adb9d2bc07cdec9ab', icon: "chevron-right", size: 16 })))), this.description && (h("div", { key: 'bac9d6cec27272d277c991c81e651714603066a2', class: "xpl-large-card__description" }, this.description))), h("dd", { key: '9da3ca8ec575a6755f1f47065299ec3ab3e5169b', class: "xpl-large-card__body" }, hasContentSlot && h("slot", { key: '022da3c1e07c264441c58f7d42d6edca109a504d', name: contentSlot }))));
     }
     static get is() { return "xpl-large-card"; }
     static get properties() {