@xplortech/apollo-core 2.4.3 → 2.6.0

package/dist/collection/components/xpl-header-accordion/xpl-header-accordion.js

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-export class XplHeaderAccordion {
+export class HeaderAccordion {
     constructor() {
         this.initialExpanded = false;
         this.disabled = false;
@@ -68,7 +68,7 @@ export class XplHeaderAccordion {
         this.applyBorderRadiusToLastRow();
     }
     render() {
-        return (h(Host, { key: 'ee3fd9eb9638936fad6fdf39e6206e0e2732b920', class: "xpl-header-accordion" }, h("div", { key: '94435c73c7f099bbd06ae686bdfa757d23af93e1', class: `header-accordion header-accordion--${this.expanded ? 'expanded' : 'collapsed'}` }, this.hasCheckbox && (h("xpl-checkbox", { key: '55999a12930fd86d3c7271092a245db7e6229708', class: "xpl-header-accordion__parent-checkbox", checked: this.parentChecked, disabled: this.disabled, indeterminate: this.parentIndeterminate, onCheckboxChange: (event) => this.handleParentCheckboxChange(event.detail) })), h("button", { key: '30fd009b44784a7718f8491c29b2319d8f24d775', "aria-expanded": this.expanded, "aria-controls": this.contentId, class: "toggle-area", onClick: this.toggleAccordion, type: "button" }, h("slot", { key: '29fd48fd7e822b01c6599ca1114492731e528720', name: "title" }), h("xpl-icon", { key: 'a9d71ba4fb4701186b7e896ed0a8c6747179346b', size: 16, icon: "chevron-down", class: this.expanded && 'rotate' }))), h("div", { key: '7d77c1a03c80b65a92d5db3ccf1c64c66a544ee5', id: this.contentId, role: "region", class: !this.expanded ? 'content--hidden' : 'content--shown' }, h("slot", { key: '1db8deafe423aaf6ec3eb2d4e783b49d9a207712', name: "content" }))));
+        return (h(Host, { key: '511ce0498294e0064e94ff14b847f75260c6c7cf', class: "xpl-header-accordion" }, h("div", { key: '75550adfe2cff80c32e3fe73bfba5888a4bfc91d', class: `header-accordion header-accordion--${this.expanded ? 'expanded' : 'collapsed'}` }, this.hasCheckbox && (h("xpl-checkbox", { key: 'd46601b19497594f44b4633228a6f020f29c8914', class: "xpl-header-accordion__parent-checkbox", checked: this.parentChecked, disabled: this.disabled, indeterminate: this.parentIndeterminate, onCheckboxChange: (event) => this.handleParentCheckboxChange(event.detail) })), h("button", { key: 'b15087f6e34cd0d31e77d5c3b35640b7734ed556', "aria-expanded": this.expanded, "aria-controls": this.contentId, class: "toggle-area", onClick: this.toggleAccordion, type: "button" }, h("slot", { key: '8f655d108a016212852f0a7138fa82ea386ed26a', name: "title" }), h("xpl-icon", { key: 'abe7fb2fe4a19db7bcd2cbed7fec903cbeeaee4d', size: 16, icon: "chevron-down", class: this.expanded && 'rotate' }))), h("div", { key: 'e86c0a67e94b24f4c39386e8f728de34242e7344', id: this.contentId, role: "region", class: !this.expanded ? 'content--hidden' : 'content--shown' }, h("slot", { key: 'a86303b3cf41724f65e10db14d0f6464c68d49c2', name: "content" }))));
     }
     static get is() { return "xpl-header-accordion"; }
     static get properties() {

package/dist/collection/components/xpl-icon/icon-types.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/xpl-icon/icons.stories.js

@@ -1,4 +1,16 @@
-import data from "@xplortech/apollo-icons/build/data.json";
+import apolloIcons from "@xplortech/apollo-icons";
+const iconNames = Object.keys(apolloIcons);
+const allTags = new Set();
+iconNames.forEach((name) => {
+    var _a;
+    const keywords = ((_a = apolloIcons[name]) === null || _a === void 0 ? void 0 : _a.keywords) || [];
+    keywords.forEach((keyword) => allTags.add(keyword));
+});
+const tagToIconsMap = {};
+allTags.forEach((tag) => {
+    const iconsWithTag = apolloIcons.getIconsByTag(tag);
+    tagToIconsMap[tag] = iconsWithTag.map((icon) => icon.symbol);
+});
 export default {
     title: 'Components/Icons',
     argTypes: {
@@ -11,30 +23,53 @@ export default {
     },
 };
 export const Icons = ({ size, color }) => `
-    <xpl-input placeholder="Search icons..." id="icon-search"></xpl-input>
+    <xpl-input placeholder="Search icons by name or tag..." id="icon-search"></xpl-input>
     <script>
         const iconSearch = document.getElementById('icon-search');
+        // Tag-to-icons mapping built using getIconsByTag from @xplortech/apollo-icons
+        const tagToIconsMap = ${JSON.stringify(tagToIconsMap)};
+
+        // Helper function to get icons matching a tag (mirrors getIconsByTag behavior)
+        function getIconsByTag(tag) {
+            const searchTag = tag.toLowerCase();
+            const matchingIcons = new Set();
+            Object.entries(tagToIconsMap).forEach(([tagKey, icons]) => {
+                if (tagKey.toLowerCase().includes(searchTag)) {
+                    icons.forEach(icon => matchingIcons.add(icon));
+                }
+            });
+            return Array.from(matchingIcons);
+        }
+
         iconSearch.addEventListener('inputEvent', (event) => {
-            const search = event.detail;
-            const filteredIcons = ${JSON.stringify(Object.keys(data))}.filter(icon => icon.includes(search));
+            const search = event.detail.toLowerCase();
             const items = document.querySelectorAll('#where-icons-go .item-container');
             const noSearchResults = document.querySelector('.no-search-results');
+            let visibleCount = 0;
+
+            // Get icons that match by tag using getIconsByTag
+            const iconsMatchingTag = getIconsByTag(search);
+
             items.forEach(item => {
-                if (item.querySelector('.icon-name').textContent.includes(search)) {
+                const iconName = item.querySelector('.icon-name').textContent;
+
+                // Match by icon name or by tag (using getIconsByTag results)
+                const matchesName = iconName.toLowerCase().includes(search);
+                const matchesTag = iconsMatchingTag.includes(iconName);
+
+                if (matchesName || matchesTag) {
                     item.style.display = 'block';
+                    visibleCount++;
                 } else {
                     item.style.display = 'none';
                 }
             });
-            if (filteredIcons.length === 0) {
-                noSearchResults.style.display = 'block';
-            } else {
-                noSearchResults.style.display = 'none';
-            }
+
+            noSearchResults.style.display = visibleCount === 0 ? 'block' : 'none';
         });
     </script>
     <div class="where-icons-go" id="where-icons-go" style="color: ${color};">
-        ${Object.keys(data)
+        ${iconNames
     .map((icon) => `<div class="item-container">
                         <xpl-tooltip text="Click to copy" >
                             <div class="item" onclick="navigator.clipboard.writeText('<xpl-icon icon=&quot;${icon}&quot;></xpl-icon>')">
@@ -69,7 +104,7 @@ Icon.argTypes = {
         type: { name: 'string', required: true },
     },
     icon: {
-        options: Object.keys(data),
+        options: iconNames,
         control: {
             type: 'select',
         },

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

@@ -1,7 +1,8 @@
 import { Host, h } from "@stencil/core";
-import octicons from "@xplortech/apollo-icons";
-export class XplIcon {
+import apolloIcons from "@xplortech/apollo-icons";
+export class Icon {
     render() {
+        var _a;
         let options = {};
         if (this.size !== undefined) {
             if (typeof this.size === 'number') {
@@ -15,10 +16,10 @@ export class XplIcon {
         let wrapperClasses = 'xpl-icon__wrapper ';
         if (this.backgroundColor)
             wrapperClasses += `xpl-icon__wrapper--with-background xpl-icon__wrapper--with-background--${this.backgroundColor}`;
-        return (h(Host, { key: '24576487ab74d82288bd43262d3021f19d12489d' }, h("figure", { key: '1b90df03ca412fd56fd868f934a24712d3a19079', class: wrapperClasses }, h("span", { key: 'e0ebd1ccfb6796190240841035a0a2db8c1bb3f1', "aria-label": this.icon, role: "img", class: "xpl-icon", style: {
+        return (h(Host, { key: 'c622a660e3ed7d9dce7dc08a868360ffc43f2f8d' }, h("figure", { key: 'c12f8de568fa6e652914fbc894a1269f6085d880', class: wrapperClasses }, h("span", { key: 'a8386f0d0fc3848a36b5120dd5f24356c403d0f5', "aria-label": this.icon, role: "img", class: "xpl-icon", style: {
                 width: `${options.width}px`,
                 height: `${options.height}px`,
-            }, innerHTML: octicons[this.icon].toSVG(options) }), h("figcaption", { key: 'd3976b8859355ef990e9bffa210b5c005505c308' }, this.icon, " icon"))));
+            }, innerHTML: (_a = apolloIcons.getIcon(this.icon)) === null || _a === void 0 ? void 0 : _a.toSVG(options) }), h("figcaption", { key: '4d56222dc219feedd1e8e2c957ca01728a845b56' }, this.icon, " icon"))));
     }
     static get is() { return "xpl-icon"; }
     static get originalStyleUrls() {
@@ -37,21 +38,18 @@ export class XplIcon {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "IconName",
-                    "resolved": "\"ai\" | \"alarm-clock\" | \"alert-circle\" | \"alert-hex\" | \"alert-triangle\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-right\" | \"arrow-up\" | \"arrow-up-right\" | \"award\" | \"bell\" | \"bell-slash\" | \"bookmark\" | \"bookmark-slash\" | \"briefcase\" | \"calendar\" | \"calendar-month\" | \"calendar-week\" | \"camera\" | \"cash-register\" | \"check\" | \"check-circle\" | \"check-circle-fill\" | \"chevron-down\" | \"chevron-left\" | \"chevron-right\" | \"chevron-up\" | \"chevrons-down\" | \"chevrons-left\" | \"chevrons-right\" | \"chevrons-up\" | \"circle-slash\" | \"clipboard\" | \"clock\" | \"code-square\" | \"comment\" | \"comment-alt\" | \"comment-check\" | \"comment-closed\" | \"comment-discussion\" | \"comment-minus\" | \"comment-plus\" | \"comment-x\" | \"compass\" | \"credit-card\" | \"dash\" | \"dollar-bill\" | \"dollar-sign\" | \"download\" | \"drag\" | \"dumbbells\" | \"duplicate\" | \"edit\" | \"expand\" | \"eye\" | \"eye-closed\" | \"eye-droper\" | \"file\" | \"flag\" | \"folder\" | \"gear\" | \"gift\" | \"globe\" | \"graph\" | \"graph-bar\" | \"grid\" | \"heart\" | \"home\" | \"image\" | \"info\" | \"kebab-horizontal\" | \"kebab-vertical\" | \"key\" | \"law\" | \"layers\" | \"left-align\" | \"light-bulb\" | \"line\" | \"link\" | \"link-external\" | \"list-ordered\" | \"list-unordered\" | \"loader\" | \"location\" | \"lock\" | \"mail\" | \"mail-check\" | \"mail-closed\" | \"mail-minus\" | \"mail-plus\" | \"mail-x\" | \"map\" | \"megaphone\" | \"minus-circle\" | \"moon\" | \"navigation\" | \"organization\" | \"package\" | \"paperclip\" | \"pencil\" | \"people\" | \"percent\" | \"person\" | \"person-add\" | \"person-circle\" | \"phone\" | \"phone-minus\" | \"phone-pause\" | \"phone-plus\" | \"phone-slash\" | \"phone-x\" | \"pie-chart\" | \"pin\" | \"pin-circle\" | \"pin-circle-filled\" | \"pin-filled\" | \"play\" | \"plus\" | \"plus-circle\" | \"printer\" | \"question\" | \"refresh-cw\" | \"repeat\" | \"right-align\" | \"rocket\" | \"rotate-ccw\" | \"rotate-cw\" | \"save\" | \"search\" | \"share\" | \"shopping-bag\" | \"shopping-cart\" | \"sign-in\" | \"sign-out\" | \"signature\" | \"sliders-h\" | \"sliders-v\" | \"sort\" | \"star\" | \"star-fill\" | \"star-half-fill\" | \"sun\" | \"tag\" | \"three-bars\" | \"time-reverse\" | \"tools\" | \"trashcan\" | \"triangle-down\" | \"triangle-left\" | \"triangle-right\" | \"triangle-up\" | \"trophy\" | \"unlock\" | \"upload\" | \"video-camera\" | \"x\" | \"x-circle\" | \"x-circle-fill\" | \"zoom-in\" | \"zoom-out\"",
-                    "references": {
-                        "IconName": {
-                            "location": "local",
-                            "path": "/home/runner/work/apollo/apollo/packages/apollo-core/src/components/components/xpl-icon/xpl-icon.tsx",
-                            "id": "src/components/components/xpl-icon/xpl-icon.tsx::IconName"
-                        }
-                    }
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Name of icon"
+                    "tags": [{
+                            "name": "property",
+                            "text": "{string}\n\nSee [available icons](./ICONS.md) for the complete list,\nor view the [Storybook icon gallery](?path=/story/components-icons--icons)."
+                        }],
+                    "text": "Name of icon."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -32,20 +32,14 @@ export default {
             type: { name: 'string', required: false },
         },
         type: {
-            options: ['text', 'number', 'file', 'password', 'date', 'time', 'color'],
+            options: ['text', 'number', 'file', 'password', 'date', 'time', 'color', 'phone'],
             control: {
                 type: 'select',
             },
         },
-        timeFormat: {
-            control: {
-                type: 'select',
-            },
-            options: ['12h', '24h'],
-        },
     },
 };
-export const Input = ({ label, description, disabled, error, errorMessage, pre, post, type }) => {
+export const Input = ({ label, description, disabled, error, errorMessage, pre, post, type, defaultCountry, isInternational, }) => {
     let attrs = '';
     if (label)
         attrs += ` label="${label}"`;
@@ -60,7 +54,11 @@ export const Input = ({ label, description, disabled, error, errorMessage, pre,
     if (post)
         attrs += ` post="${post}"`;
     if (type !== 'text')
-        attrs += ` type=${type}`;
+        attrs += ` type="${type}"`;
+    if (type === 'phone' && defaultCountry)
+        attrs += ` default-country="${defaultCountry}"`;
+    if (type === 'phone' && isInternational === false)
+        attrs += ` is-international="false"`;
     return `<xpl-input${attrs} name="input-name" placeholder="Placeholder"></xpl-input>`;
 };
 Input.args = {
@@ -72,6 +70,20 @@ Input.args = {
     pre: '',
     post: '',
     type: 'text',
+    defaultCountry: 'US',
+    isInternational: true,
+};
+Input.argTypes = {
+    defaultCountry: {
+        control: { type: 'text' },
+        description: 'Default country (ISO code) for phone input',
+        if: { arg: 'type', eq: 'phone' },
+    },
+    isInternational: {
+        control: { type: 'boolean' },
+        description: 'Enables international mode with country selector. When false, locked to defaultCountry with no picker.',
+        if: { arg: 'type', eq: 'phone' },
+    },
 };
 Input.parameters = {
     layout: 'centered',
@@ -109,6 +121,10 @@ Input.parameters = {
             return output;
         })(Input.args),
     },
+    design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=16215-5412&p=f&t=vVY2x58f7oPprNSr-11',
+    },
 };
 export const Multiline = ({ label, description, disabled, error, errorMessage, maxCharacterCount, }) => {
     let attrs = ' multiline';
@@ -302,6 +318,12 @@ Timepicker.args = {
     max: '18:00',
     type: 'time',
 };
+Timepicker.argTypes = {
+    timeFormat: {
+        control: { type: 'select' },
+        options: ['12h', '24h'],
+    },
+};
 Timepicker.parameters = {
     layout: 'centered',
     'web-component': {
@@ -529,3 +551,51 @@ Color.parameters = {
         })(Color.args),
     },
 };
+export const Phone = ({ label, description, placeholder, disabled, defaultCountry, isInternational, value, }) => {
+    let attrs = ` type="phone" label="${label}" name="phone" placeholder="${placeholder}"`;
+    if (description)
+        attrs += ` description="${description}"`;
+    if (disabled)
+        attrs += ` disabled`;
+    if (defaultCountry)
+        attrs += ` default-country="${defaultCountry}"`;
+    if (isInternational === false)
+        attrs += ` is-international="false"`;
+    if (value)
+        attrs += ` value="${value}"`;
+    return `<xpl-input${attrs}></xpl-input>`;
+};
+Phone.args = {
+    defaultCountry: 'US',
+    description: 'Enter your phone number with country code',
+    disabled: false,
+    error: false,
+    errorMessage: '',
+    isInternational: true,
+    label: 'Phone number',
+    placeholder: 'Enter number',
+    value: '+0000000000',
+};
+Phone.argTypes = {
+    isInternational: {
+        control: { type: 'boolean' },
+        description: 'Enables international mode with country selector. When false, locked to defaultCountry with no picker.',
+    },
+};
+Phone.parameters = {
+    layout: 'centered',
+    'web-component': {
+        render: Phone(Phone.args),
+    },
+    html: {
+        render: (() => `
+                <div class="xpl-input">
+                    <label class="xpl-input-label" for="phone-id">${Phone.args.label}</label>
+                    ${Phone.args.description ? `<small>${Phone.args.description}</small>` : ''}
+                    <div class="xpl-input-wrapper xpl-input-phone">
+                        <button type="button" class="xpl-input-phone__trigger" aria-haspopup="listbox">+1</button>
+                        <input type="tel" id="phone-id" name="phone" placeholder="${Phone.args.placeholder}" class="xpl-input-phone__input" />
+                    </div>
+                </div>`)(),
+    },
+};

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

@@ -7,7 +7,7 @@ const fallbackColorValues = {
     b: 0,
     a: 1,
 };
-export class XplInputColor {
+export class InputColor {
     constructor() {
         this.placeholder = 'Select color';
         this.eyeDropperSupported = 'EyeDropper' in window;
@@ -193,16 +193,16 @@ export class XplInputColor {
             top: `${y}px`,
             background: `rgb(${r}, ${g}, ${b})`,
         };
-        return (h(Host, { key: '639f311d46bbb46e327ae6b05fe24b47795adbf3', class: "xpl-input-color" }, h("xpl-popover", { key: 'ad9d6145e4e5ac581c6d22f726050767ff82d861', disabled: this.disabled, display: "menu" }, h("div", { key: '219e1754388cfc2ecff25b42b67322e780a1e7d6', slot: "trigger" }, h("div", { key: '7beafe5304521d496bf7d7f8f82de01c9b7de00d', class: {
+        return (h(Host, { key: 'a8cdba9ff504fbeaf7b21167b778d8cf00216a1a', class: "xpl-input-color" }, h("xpl-popover", { key: '535497f6aba0e7e9e65b894cd8c62cebe8ad3dd5', disabled: this.disabled, display: "menu" }, h("div", { key: '436c51111938bbbef99698b94bd5c3123bc0b42d', slot: "trigger" }, h("div", { key: '09e8f57c0d1a35d1b0a5785ebb141db62c3db4d2', class: {
                 'xpl-input-color__display': true,
                 'xpl-input-color__display--disabled': this.disabled,
                 'xpl-input-color__display--error': !!this.hasErrorState,
-            } }, h("span", { key: '2caae6b87902c50eb754e93ce939797d619da723', class: "xpl-input-color__color", style: {
+            } }, h("span", { key: '76da6216e95d48dd5cdbb890e7fe14cf1be85c6b', class: "xpl-input-color__color", style: {
                 background: objectToStringColor(this.colorValues),
-            } }), this.colorValues.hex ? (h("span", { class: "xpl-input-color__value" }, objectToStringColor(this.colorValues))) : (h("span", { class: "xpl-input-color__placeholder" }, this.placeholder)), this.eyeDropperSupported && !this.hideEyeDropper && (h("xpl-icon", { key: '8cd0f1e94bf2eaf31ad82a4c8d307badef8046fc', size: 20, icon: "eye-droper", class: "xpl-input-color__icon", onClick: (e) => {
+            } }), this.colorValues.hex ? (h("span", { class: "xpl-input-color__value" }, objectToStringColor(this.colorValues))) : (h("span", { class: "xpl-input-color__placeholder" }, this.placeholder)), this.eyeDropperSupported && !this.hideEyeDropper && (h("xpl-icon", { key: 'c4a560be47d17c98f353c0e324c0f9025f535fae', size: 20, icon: "eye-dropper", class: "xpl-input-color__icon", onClick: (e) => {
                 e.stopPropagation();
                 this.openEyeDropper();
-            } })))), h("div", { key: '8e6add90e733d299cea94559dcbc29dd4e64d9cd', class: "xpl-input-color__menu" }, h("div", { key: 'a488c9b7ef3ff0cabbbb4bf5a631f209034a2539', class: "xpl-input-color__sl-grid", ref: (el) => {
+            } })))), h("div", { key: '844a66fa0523b133ce3e2b6d83e395254e9b513f', class: "xpl-input-color__menu" }, h("div", { key: 'c687aaa94b122258e09cffabcc5029905ddccb27', class: "xpl-input-color__sl-grid", ref: (el) => {
                 this.colorInputElements.slGrid = el;
             }, style: {
                 background: [
@@ -210,9 +210,9 @@ export class XplInputColor {
                     `linear-gradient(to right, #fff, #fff0)`,
                     `rgb(${hueBaseColor.r} ${hueBaseColor.g} ${hueBaseColor.b})`,
                 ].join(', '),
-            }, onMouseDown: this.startDrag, onTouchStart: this.startDrag }, h("div", { key: '542a5cafd651e6b49f813f6eecb46088b0b6f97c', class: "xpl-input-color__sl-thumb", style: slThumbStyle })), h("div", { key: 'fd3268874bb0c0bc22c2d2db15dd50c38d3ae70a', class: "xpl-input-color__grid" }, h("input", { key: '08ea52b5c2bbc2800b2ad5cca6981813e4578ce5', type: "range", min: "0", max: "360", value: this.hue, class: "xpl-input-color__slider xpl-input-color__hue", name: "color-hue-slider", ref: (el) => {
+            }, onMouseDown: this.startDrag, onTouchStart: this.startDrag }, h("div", { key: '7e65660cef09fc5ae0c9dc0d49fe7769ad15b55a', class: "xpl-input-color__sl-thumb", style: slThumbStyle })), h("div", { key: '5e76247d0d59fca5500416ddeaca53784dc42209', class: "xpl-input-color__grid" }, h("input", { key: '5b891dd55f6d4f5d1242d142c9af8a3af496e398', type: "range", min: "0", max: "360", value: this.hue, class: "xpl-input-color__slider xpl-input-color__hue", name: "color-hue-slider", ref: (el) => {
                 this.colorInputElements.hue = el;
-            } }), h("input", { key: '1692e362cb1e48446f33e2f82c5988546ad6a6f0', type: "range", min: "0", max: "1", step: "0.01", value: a, class: "xpl-input-color__slider xpl-input-color__alpha", name: "color-alpha-slider", ref: (el) => {
+            } }), h("input", { key: 'ae20b7cbfa6303c6615afee0fc35d0dda3bc1f70', type: "range", min: "0", max: "1", step: "0.01", value: a, class: "xpl-input-color__slider xpl-input-color__alpha", name: "color-alpha-slider", ref: (el) => {
                 this.colorInputElements.alpha = el;
             }, style: {
                 backgroundImage: [
@@ -222,9 +222,9 @@ export class XplInputColor {
                     `linear-gradient(45deg, transparent 75%, #ccc 75%)`,
                     `linear-gradient(-45deg, transparent 75%, #ccc 75%)`,
                 ].join(', '),
-            } }), h("div", { key: '5de3d1979fbb4c4a2892961fcbd7e6fc2d2723b4', class: "xpl-input-color__preview", style: {
+            } }), h("div", { key: 'c4b884401f5324e37e09637785a2148ef5c99112', class: "xpl-input-color__preview", style: {
                 background: `rgba(${r}, ${g}, ${b}, ${a})`,
-            } })), h("div", { key: '3a660bdbb902bc8bfddb8c423f2462404b0221b8', class: "xpl-input-color__inputs" }, Object.entries(this.colorInputElements)
+            } })), h("div", { key: '5d8eff1bf9e51bd44116c01e3bfd016414662d92', class: "xpl-input-color__inputs" }, Object.entries(this.colorInputElements)
             .filter(([key]) => ['hex', 'r', 'g', 'b', 'a'].includes(key))
             .map(([key]) => (h("xpl-input", { key: key, label: key.toLocaleUpperCase(), name: `color-${key}-input`, placeholder: key === 'hex' ? '793EF7' : '0', value: this.colorValues[key], ref: (elRef) => {
                 this.colorInputElements[key] = elRef;

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

@@ -1,12 +1,14 @@
-import { Host, h } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
 import flatpickr from "flatpickr";
+import { getNearestScrollableAncestor, isInsideFixedPosition, } from "../../../utils/layout-ancestors";
 const arrowSvg = (rotate = false) => `<svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="${rotate
     ? 'M0.557948 5.6813L6.06209 0.132167C6.23831 -0.0440556 6.52327 -0.0440556 6.69949 0.132167L7.44187 0.874551C7.61809 1.05077 7.61809 1.33573 7.44187 1.51195L2.99882 6L7.44187 10.488C7.61809 10.6643 7.61809 10.9492 7.44187 11.1254L6.69949 11.8678C6.52327 12.0441 6.23831 12.0441 6.06209 11.8678L0.557948 6.3187C0.381726 6.14248 0.381726 5.85752 0.557948 5.6813Z'
     : 'M7.44187 6.3187L1.93773 11.8678C1.76151 12.0441 1.47655 12.0441 1.30033 11.8678L0.557948 11.1254C0.381726 10.9492 0.381726 10.6643 0.557948 10.488L5.001 6L0.557948 1.51195C0.381726 1.33573 0.381726 1.05077 0.557948 0.874551L1.30033 0.132167C1.47655 -0.0440556 1.76151 -0.0440556 1.93773 0.132167L7.44187 5.6813C7.6181 5.85752 7.6181 6.14248 7.44187 6.3187Z'}" /></svg>`;
-export class XplInputDate {
+export class InputDate {
     constructor() {
         this.dateFormat = 'Y-m-d';
         this.mode = 'single';
+        this.flatpickrStaticLayout = false;
         this.valueChanged = (event) => {
             const target = event.target;
             this.valueChange.emit(target.value);
@@ -19,17 +21,31 @@ export class XplInputDate {
         var _a;
         (_a = this.flatpickrInstance) === null || _a === void 0 ? void 0 : _a.setDate(newValue);
     }
-    componentDidLoad() {
-        this.flatpickrInstance = flatpickr(this.input, {
-            allowInput: true,
-            dateFormat: this.dateFormat,
-            defaultDate: this.value,
-            maxDate: this.max,
-            minDate: this.min,
-            mode: this.mode,
-            nextArrow: arrowSvg(),
-            prevArrow: arrowSvg(true),
-            onClose: (selectedDates) => {
+    connectedCallback() {
+        queueMicrotask(() => this.ensureFlatpickr());
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.flatpickrInstance) === null || _a === void 0 ? void 0 : _a.destroy();
+        this.flatpickrInstance = undefined;
+        this.flatpickrStaticLayout = false;
+        this.unwrapStaleFlatpickrWrapper();
+    }
+    componentDidRender() {
+        this.ensureFlatpickr();
+    }
+    ensureFlatpickr() {
+        if (this.flatpickrInstance || !this.input || !this.el.isConnected) {
+            return;
+        }
+        this.unwrapStaleFlatpickrWrapper();
+        this.initFlatpickr();
+    }
+    initFlatpickr() {
+        const insideFixed = isInsideFixedPosition(this.el);
+        this.flatpickrInstance = flatpickr(this.input, Object.assign(Object.assign({ allowInput: true }, (insideFixed
+            ? { static: true }
+            : { appendTo: getNearestScrollableAncestor(this.el) })), { dateFormat: this.dateFormat, defaultDate: this.value, maxDate: this.max, minDate: this.min, mode: this.mode, nextArrow: arrowSvg(), prevArrow: arrowSvg(true), onClose: (selectedDates) => {
                 const minRequiredDates = !this.required ? 0 : this.mode === 'single' ? 1 : 2;
                 this.hasErrorState = selectedDates.length < minRequiredDates ? 'required' : null;
                 if (selectedDates.length === 2) {
@@ -39,19 +55,39 @@ export class XplInputDate {
                         end,
                     });
                 }
-            },
+            } }));
+        queueMicrotask(() => {
+            if (this.flatpickrStaticLayout !== insideFixed) {
+                this.flatpickrStaticLayout = insideFixed;
+            }
         });
     }
+    unwrapStaleFlatpickrWrapper() {
+        const { input } = this;
+        const wrapper = input === null || input === void 0 ? void 0 : input.parentElement;
+        if (!(wrapper === null || wrapper === void 0 ? void 0 : wrapper.classList.contains('flatpickr-wrapper'))) {
+            return;
+        }
+        const parent = wrapper.parentElement;
+        if (!parent) {
+            return;
+        }
+        while (wrapper.firstChild) {
+            parent.insertBefore(wrapper.firstChild, wrapper);
+        }
+        parent.removeChild(wrapper);
+    }
     render() {
-        return (h(Host, { key: '6024246dd7a92cc6396c634e8e87d614b1d860e3', class: {
+        return (h(Host, { key: '35f91387097b7fd5bdc59ff8608c3700470ff367', class: {
                 'xpl-input-date': true,
                 [`xpl-input-date--mode-${this.mode}`]: true,
                 'xpl-input-date--error': !!this.hasErrorState,
-            } }, h("div", { key: '0c8fe7b8057715618ae040b64ee2ae6506051200', class: "xpl-input-wrapper" }, this.pre && (h("label", { key: 'd0d1048313962c7381b9fc4e2d07b107d42f86d1', class: "xpl-input-pre", htmlFor: this.inputId }, this.pre)), h("input", { key: '3daca1a28baf14701e4b7a9761d2ff91be8dcd96', type: "date", id: this.inputId, disabled: this.disabled, name: this.name, required: this.required, readonly: this.readonly, placeholder: this.placeholder, max: this.max, min: this.min, ref: (el) => {
+                'xpl-input-date--flatpickr-static': this.flatpickrStaticLayout,
+            } }, h("div", { key: '7f561dba2b2aa7d308d0029a20ace5d918368afc', class: "xpl-input-wrapper" }, this.pre && (h("label", { key: '2e87d6e22a2a69db7e91c69fb3d59f81d8358e52', class: "xpl-input-pre", htmlFor: this.inputId }, this.pre)), h("input", { key: '53d05e6b6b637e298f31cb1f2b9c56d9d597688f', type: "date", id: this.inputId, disabled: this.disabled, name: this.name, required: this.required, readonly: this.readonly, placeholder: this.placeholder, max: this.max, min: this.min, ref: (el) => {
                 this.input = el;
             }, onChange: (event) => {
                 this.valueChanged(event);
-            } }), h("xpl-icon", { key: '82c57c4694c088debfb710e37bd90b5132fa3339', class: "xpl-input-calendar", icon: "calendar-month", size: 24 }), this.post && (h("label", { key: '553fa633312ed0adf1fd38352f40142e2b48eeaa', class: "xpl-input-post", htmlFor: this.inputId }, this.post)))));
+            } }), h("xpl-icon", { key: '45c1d48fe6a312855cf3bd90e139d060821c4ba4', class: "xpl-input-calendar", icon: "calendar-month", size: 24 }), this.post && (h("label", { key: '037657e9a3cecc054d95b6fd835b58885eef8042', class: "xpl-input-post", htmlFor: this.inputId }, this.post)))));
     }
     static get is() { return "xpl-input-date"; }
     static get properties() {
@@ -309,6 +345,7 @@ export class XplInputDate {
     }
     static get states() {
         return {
+            "flatpickrStaticLayout": {},
             "hasErrorState": {}
         };
     }
@@ -365,6 +402,7 @@ export class XplInputDate {
                 }
             }];
     }
+    static get elementRef() { return "el"; }
     static get watchers() {
         return [{
                 "propName": "hasErrorState",

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

@@ -1,5 +1,5 @@
 import { Host, h, } from "@stencil/core";
-export class XplInputFile {
+export class InputFile {
     constructor() {
         this.accept = '';
         this.multiple = false;
@@ -33,18 +33,18 @@ export class XplInputFile {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '984964735a57f0c1ae83b7a6e9ad548b8b732694', class: {
+        return (h(Host, { key: '87df3edce40c74988426ba9fcef4bc3f5740c56b', class: {
                 'xpl-input-file': true,
                 'xpl-input-file--hide-trigger-on-select': this.hideTriggerOnSelect,
                 'xpl-input-file--disabled': this.disabled,
-            } }, h("span", { key: '20da96646dda47226058869a6a3c188aa602ae7b', class: {
+            } }, h("span", { key: '11e4c220751ce3f06fd15a741a1f8b81d98c18bc', class: {
                 'xpl-input-file__trigger-wrapper': true,
                 'xpl-input-file__trigger-wrapper--hidden': this.hideTriggerOnSelect && ((_a = this.files) === null || _a === void 0 ? void 0 : _a.length) > 0,
-            }, role: "button", tabIndex: 0, onClick: this.openFileDialog }, h("slot", { key: 'd6355378f46c6a6edd193839e3ff24bd241db9b6', name: "trigger" })), ((_b = this.files) === null || _b === void 0 ? void 0 : _b.length) > 0 && !this.hideFileNames && (h("ul", { key: '48a7c3ff9668c7a7ad3e1f719c05f0439db0eb98', class: "xpl-input-file__file-list" }, this.files.map((file, fileIndex) => (h("li", { class: "xpl-input-file__file-item" }, h("span", { class: "xpl-text-callout" }, file.name), h("xpl-icon", { icon: "x-circle", size: 24, onClick: (e) => {
+            }, role: "button", tabIndex: 0, onClick: this.openFileDialog }, h("slot", { key: '6daba4f9e520c12a791bfd18f2894e55f0da86f4', name: "trigger" })), ((_b = this.files) === null || _b === void 0 ? void 0 : _b.length) > 0 && !this.hideFileNames && (h("ul", { key: '3459f9c3e8618962c02f1e25e6b80f63fe4d593d', class: "xpl-input-file__file-list" }, this.files.map((file, fileIndex) => (h("li", { class: "xpl-input-file__file-item" }, h("span", { class: "xpl-text-callout" }, file.name), h("xpl-icon", { icon: "x-circle", size: 24, onClick: (e) => {
                 e.preventDefault();
                 e.stopPropagation();
                 this.onRemoveFileByIndex(fileIndex);
-            }, class: "xpl-input-file__remove-icon" })))))), this.accept && !this.hideAcceptText && (h("span", { key: '81a892b3c7cac161c4fe893b9e627055d43a13c8', class: "xpl-input-file__accept xpl-text-caption" }, "Accepted file types: ", this.accept)), h("input", { key: 'bb3e89c64ae62748b3e4afd5f80fcede37ae7b3a', onChange: this.handleFileChange, type: "file", ref: (el) => {
+            }, class: "xpl-input-file__remove-icon" })))))), this.accept && !this.hideAcceptText && (h("span", { key: '2c8646cd5ef7e235e75c68bf4832ce1d9c578493', class: "xpl-input-file__accept xpl-text-caption" }, "Accepted file types: ", this.accept)), h("input", { key: 'd303ac9e074e8031ed2d695cc85eef32ef40f058', onChange: this.handleFileChange, type: "file", ref: (el) => {
                 this.fileInput = el;
             }, hidden: true, accept: this.accept, multiple: this.multiple, name: this.name })));
     }

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

@@ -0,0 +1,58 @@
+export const PHONE_COUNTRIES = [
+    { countryCode: 'US', dialCode: '+1', name: 'United States' },
+    { countryCode: 'CA', dialCode: '+1', name: 'Canada' },
+    { countryCode: 'GB', dialCode: '+44', name: 'United Kingdom' },
+    { countryCode: 'AU', dialCode: '+61', name: 'Australia' },
+    { countryCode: 'DE', dialCode: '+49', name: 'Germany' },
+    { countryCode: 'FR', dialCode: '+33', name: 'France' },
+    { countryCode: 'ES', dialCode: '+34', name: 'Spain' },
+    { countryCode: 'IT', dialCode: '+39', name: 'Italy' },
+    { countryCode: 'NL', dialCode: '+31', name: 'Netherlands' },
+    { countryCode: 'BE', dialCode: '+32', name: 'Belgium' },
+    { countryCode: 'AT', dialCode: '+43', name: 'Austria' },
+    { countryCode: 'CH', dialCode: '+41', name: 'Switzerland' },
+    { countryCode: 'PL', dialCode: '+48', name: 'Poland' },
+    { countryCode: 'IE', dialCode: '+353', name: 'Ireland' },
+    { countryCode: 'PT', dialCode: '+351', name: 'Portugal' },
+    { countryCode: 'SE', dialCode: '+46', name: 'Sweden' },
+    { countryCode: 'NO', dialCode: '+47', name: 'Norway' },
+    { countryCode: 'DK', dialCode: '+45', name: 'Denmark' },
+    { countryCode: 'FI', dialCode: '+358', name: 'Finland' },
+    { countryCode: 'NZ', dialCode: '+64', name: 'New Zealand' },
+    { countryCode: 'JP', dialCode: '+81', name: 'Japan' },
+    { countryCode: 'CN', dialCode: '+86', name: 'China' },
+    { countryCode: 'IN', dialCode: '+91', name: 'India' },
+    { countryCode: 'BR', dialCode: '+55', name: 'Brazil' },
+    { countryCode: 'MX', dialCode: '+52', name: 'Mexico' },
+    { countryCode: 'ZA', dialCode: '+27', name: 'South Africa' },
+    { countryCode: 'SG', dialCode: '+65', name: 'Singapore' },
+    { countryCode: 'HK', dialCode: '+852', name: 'Hong Kong' },
+    { countryCode: 'KR', dialCode: '+82', name: 'South Korea' },
+];
+export function getCountryByCode(countryCode) {
+    return PHONE_COUNTRIES.find((c) => c.countryCode === countryCode);
+}
+export function getCountryByDialCode(dialCode) {
+    return PHONE_COUNTRIES.find((c) => c.dialCode === dialCode);
+}
+export function parseE164(value) {
+    if (!value || !value.startsWith('+'))
+        return null;
+    const digits = value.slice(1).replace(/\D/g, '');
+    if (!digits.length)
+        return null;
+    const sorted = [...PHONE_COUNTRIES].sort((a, b) => b.dialCode.replace(/\D/g, '').length - a.dialCode.replace(/\D/g, '').length);
+    const matchedCountry = sorted.find((country) => {
+        const codeDigits = country.dialCode.slice(1).replace(/\D/g, '');
+        return digits.startsWith(codeDigits);
+    });
+    if (!matchedCountry)
+        return null;
+    const codeDigits = matchedCountry.dialCode.slice(1).replace(/\D/g, '');
+    const nationalNumber = digits.slice(codeDigits.length);
+    return { dialCode: matchedCountry.dialCode, nationalNumber };
+}
+export function toE164(dialCode, nationalNumber) {
+    const digits = (dialCode.slice(1) + nationalNumber).replace(/\D/g, '');
+    return digits.length ? `+${digits}` : '';
+}