@xplortech/apollo-core 2.5.0 → 2.7.0

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

@@ -1,13 +1,13 @@
 import { Host, h } from "@stencil/core";
-export class XplHeaderAccordion {
+export class HeaderAccordion {
     constructor() {
-        this.initialExpanded = false;
-        this.disabled = false;
-        this.selectedCount = -1;
-        this.hasCheckbox = true;
-        this.expanded = this.initialExpanded;
+        this.expanded = false;
         this.parentChecked = false;
         this.parentIndeterminate = false;
+        this.disabled = false;
+        this.hasCheckbox = true;
+        this.initialExpanded = false;
+        this.selectedCount = -1;
         this.toggleAccordion = () => {
             this.expanded = !this.expanded;
         };
@@ -21,21 +21,26 @@ export class XplHeaderAccordion {
             });
         };
     }
-    applyBorderRadiusToLastRow() {
-        var _a;
-        if (this.expanded) {
-            const rows = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelectorAll('xpl-dynamic-table-row');
-            const lastRow = rows[rows.length - 1];
-            const cells = lastRow === null || lastRow === void 0 ? void 0 : lastRow.querySelectorAll('xpl-dynamic-table-cell');
-            cells[0].style.borderBottomLeftRadius = '0.5rem';
-            cells[cells.length - 1].style.borderBottomRightRadius = '0.5rem';
-        }
-    }
-    watchSelectedCount(selectedCount, _previousCount) {
+    watchSelectedCount(selectedCount) {
         if (selectedCount > -1) {
             this.updateParentCheckbox(selectedCount);
         }
     }
+    componentWillLoad() {
+        this.expanded = this.initialExpanded;
+    }
+    componentDidLoad() {
+        const initialCheckboxesValue = this.selectedCount > -1 ? this.selectedCount : 0;
+        this.updateParentCheckbox(initialCheckboxesValue);
+    }
+    handleChildCheckboxChange() {
+        var _a;
+        if (this.selectedCount === -1) {
+            const childCheckboxes = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelectorAll('[role="region"] xpl-checkbox input:not([disabled])');
+            const checkedCount = Array.from(childCheckboxes).filter((checkbox) => checkbox.checked).length;
+            this.updateParentCheckbox(checkedCount);
+        }
+    }
     updateParentCheckbox(selectedCount) {
         var _a;
         const childCheckboxes = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelectorAll('[role="region"] xpl-checkbox input:not([disabled])');
@@ -52,23 +57,11 @@ export class XplHeaderAccordion {
             this.parentIndeterminate = true;
         }
     }
-    handleChildCheckboxChange() {
-        var _a;
-        if (this.selectedCount === -1) {
-            const childCheckboxes = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelectorAll('[role="region"] xpl-checkbox input:not([disabled])');
-            const checkedCount = Array.from(childCheckboxes).filter((checkbox) => checkbox.checked).length;
-            this.updateParentCheckbox(checkedCount);
-        }
-    }
-    componentDidLoad() {
-        const initialCheckoxesValue = this.selectedCount > -1 ? this.selectedCount : 0;
-        this.updateParentCheckbox(initialCheckoxesValue);
-    }
-    componentWillRender() {
-        this.applyBorderRadiusToLastRow();
-    }
     render() {
-        return (h(Host, { key: '36101a7c73fddd9944c96ed15dd6570b20ae031d', class: "xpl-header-accordion" }, h("div", { key: 'a58005a8bafb5d56e73c6a78dc4f88a8285ee8fa', class: `header-accordion header-accordion--${this.expanded ? 'expanded' : 'collapsed'}` }, this.hasCheckbox && (h("xpl-checkbox", { key: '6e96eb7c2670ac82a0f6b088a93fd09127338328', class: "xpl-header-accordion__parent-checkbox", checked: this.parentChecked, disabled: this.disabled, indeterminate: this.parentIndeterminate, onCheckboxChange: (event) => this.handleParentCheckboxChange(event.detail) })), h("button", { key: '097ecde99648e1ab397a2b65becdf525e03c21c4', "aria-expanded": this.expanded, "aria-controls": this.contentId, class: "toggle-area", onClick: this.toggleAccordion, type: "button" }, h("slot", { key: '002e4645b7df25d7725e6f9860c815fe3977fa62', name: "title" }), h("xpl-icon", { key: '04492dda041fabc3deeb4031cab2d2ebeae1f766', size: 16, icon: "chevron-down", class: this.expanded && 'rotate' }))), h("div", { key: '310457718b09b0481040c83dc73327251be308cd', id: this.contentId, role: "region", class: !this.expanded ? 'content--hidden' : 'content--shown' }, h("slot", { key: 'c13229b1538cae02a449bf00483174824de17f3a', name: "content" }))));
+        return (h(Host, { key: '216b10c02e1248c374ec646d30f835163b9b7792', class: {
+                'xpl-header-accordion': true,
+                'xpl-header-accordion--expanded': this.expanded,
+            } }, h("div", { key: '41cbb9358a5d76f44f135d76c945fe801cafc474', class: `header-accordion header-accordion--${this.expanded ? 'expanded' : 'collapsed'}` }, this.hasCheckbox && (h("xpl-checkbox", { key: 'c939d100f687b14455424ee3f0b6bdfd7de785bb', class: "xpl-header-accordion__parent-checkbox", checked: this.parentChecked, disabled: this.disabled, indeterminate: this.parentIndeterminate, onCheckboxChange: (event) => this.handleParentCheckboxChange(event.detail) })), h("button", { key: '4d98d8d75b4c7c7ba8e50ce6d43ed3b83919d624', "aria-expanded": this.expanded, "aria-controls": this.contentId, class: "toggle-area", onClick: this.toggleAccordion, type: "button" }, h("slot", { key: 'd9c993b7e8e6cf0b46014d6c535a52c84386b8ed', name: "title" }), h("xpl-icon", { key: '58d114ae4dd93c9ec15e3d74cfb2d33c6c1b57cb', size: 20, icon: "chevron-down", class: this.expanded && 'rotate' }))), h("div", { key: '46a98c094621ec02c9416bcfa7a2d33e6ce468d4', id: this.contentId, role: "region", class: !this.expanded ? 'content--hidden' : 'content--shown' }, h("slot", { key: '7966e352ec17125afa59a7590dbc8e9372a39f41', name: "content" }))));
     }
     static get is() { return "xpl-header-accordion"; }
     static get properties() {
@@ -92,7 +85,7 @@ export class XplHeaderAccordion {
                 "reflect": false,
                 "attribute": "content-id"
             },
-            "initialExpanded": {
+            "disabled": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -104,15 +97,15 @@ export class XplHeaderAccordion {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Whether the accordion is expanded initially."
+                    "text": "Whether the accordion is disabled."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "initial-expanded",
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
-            "disabled": {
+            "hasCheckbox": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -124,53 +117,53 @@ export class XplHeaderAccordion {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Whether the accordion is disabled."
+                    "text": "Whether to display a parent checkbox in the accordion header."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "disabled",
-                "defaultValue": "false"
+                "attribute": "has-checkbox",
+                "defaultValue": "true"
             },
-            "selectedCount": {
-                "type": "number",
+            "initialExpanded": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "number",
-                    "resolved": "number",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The number of selected child items, or -1 to auto-calculate."
+                    "text": "Whether the accordion is expanded initially."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "selected-count",
-                "defaultValue": "-1"
+                "attribute": "initial-expanded",
+                "defaultValue": "false"
             },
-            "hasCheckbox": {
-                "type": "boolean",
+            "selectedCount": {
+                "type": "number",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "number",
+                    "resolved": "number",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Whether to display a parent checkbox in the accordion header."
+                    "text": "The number of selected child items, or -1 to auto-calculate."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "has-checkbox",
-                "defaultValue": "true"
+                "attribute": "selected-count",
+                "defaultValue": "-1"
             }
         };
     }

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

@@ -1,6 +1,6 @@
 import { Host, h } from "@stencil/core";
 import apolloIcons from "@xplortech/apollo-icons";
-export class XplIcon {
+export class Icon {
     render() {
         var _a;
         let options = {};
@@ -16,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: '485fe60cec37994f94402756a16f068176b1cbbb' }, h("figure", { key: '9767c5743a3520c36f7733b7f1bf92847af78eb2', class: wrapperClasses }, h("span", { key: 'f11637a97e7a0d1a28572743d8facd78c0b902fc', "aria-label": this.icon, role: "img", class: "xpl-icon", style: {
+        return (h(Host, { key: 'cf84ae3e7ff4ae0b4ae8e1b1cf3b9331bc887c6c' }, h("figure", { key: '74e2727f9bf4ff8d710eff9b99632ffa669b84ae', class: wrapperClasses }, h("span", { key: '2d8be2bd318bd27e0bc4299cfe518668e424fffe', "aria-label": this.icon, role: "img", class: "xpl-icon", style: {
                 width: `${options.width}px`,
                 height: `${options.height}px`,
-            }, innerHTML: (_a = apolloIcons.getIcon(this.icon)) === null || _a === void 0 ? void 0 : _a.toSVG(options) }), h("figcaption", { key: '5293e424f6ef17fc99e7ffad8615861b1ac0443d' }, this.icon, " icon"))));
+            }, innerHTML: (_a = apolloIcons.getIcon(this.icon)) === null || _a === void 0 ? void 0 : _a.toSVG(options) }), h("figcaption", { key: '3c7a383da59ac0766500273799b203a28c7c7ff3' }, this.icon, " icon"))));
     }
     static get is() { return "xpl-icon"; }
     static get originalStyleUrls() {

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

@@ -8,6 +8,7 @@ export default {
                 'valueChange',
                 'hasErrorStateChanged',
                 'rangeSelected',
+                'search',
             ],
         },
     },
@@ -32,20 +33,24 @@ export default {
             type: { name: 'string', required: false },
         },
         type: {
-            options: ['text', 'number', 'file', 'password', 'date', 'time', 'color'],
-            control: {
-                type: 'select',
-            },
-        },
-        timeFormat: {
+            options: [
+                'text',
+                'number',
+                'file',
+                'password',
+                'date',
+                'time',
+                'color',
+                'phone',
+                'search',
+            ],
             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 +65,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 +81,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',
@@ -306,6 +329,12 @@ Timepicker.args = {
     max: '18:00',
     type: 'time',
 };
+Timepicker.argTypes = {
+    timeFormat: {
+        control: { type: 'select' },
+        options: ['12h', '24h'],
+    },
+};
 Timepicker.parameters = {
     layout: 'centered',
     'web-component': {
@@ -533,3 +562,135 @@ 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>`)(),
+    },
+};
+export const Search = ({ label, description, disabled, error, readonly, errorMessage, placeholder, value, name, shape, autocomplete, ariaLabel, }) => {
+    let attrs = ' type="search"';
+    if (label !== undefined && label !== '')
+        attrs += ` label="${label}"`;
+    if (description)
+        attrs += ` description="${description}"`;
+    if (disabled)
+        attrs += ` disabled`;
+    if (error)
+        attrs += ` error${errorMessage ? `="${errorMessage}"` : ''}`;
+    if (placeholder)
+        attrs += ` placeholder="${placeholder}"`;
+    if (value)
+        attrs += ` value="${value}"`;
+    if (name)
+        attrs += ` name="${name}"`;
+    if (shape)
+        attrs += ` shape="${shape}"`;
+    if (autocomplete)
+        attrs += ` autocomplete="${autocomplete}"`;
+    if (ariaLabel)
+        attrs += ` aria-label="${ariaLabel}"`;
+    if (readonly)
+        attrs += ` readonly`;
+    return `<xpl-input${attrs}></xpl-input>`;
+};
+Search.args = {
+    ariaLabel: '',
+    autocomplete: '',
+    description: '',
+    disabled: false,
+    error: false,
+    errorMessage: '',
+    label: '',
+    readonly: false,
+    name: '',
+    placeholder: 'Search…',
+    shape: 'rounded',
+    value: '',
+};
+Search.argTypes = {
+    ariaLabel: {
+        control: { type: 'text' },
+        description: 'Accessible name when no visible label (search inputs only)',
+    },
+    shape: {
+        control: { type: 'select' },
+        options: ['rounded', 'box'],
+    },
+};
+Search.parameters = {
+    layout: 'centered',
+    design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=2430-168374&p=f&t=oG14CHMwd7GirmPv-11',
+    },
+    'web-component': {
+        render: Search(Search.args),
+    },
+    html: {
+        render: (() => `
+<div class="xpl-input xpl-input--search">
+  <div class="xpl-input-search">
+    <form class="xpl-input-search__form">
+      <div class="xpl-input-search__shell">
+        <span class="xpl-input-search__icon" aria-hidden="true"></span>
+        <input
+          class="xpl-input-search__input"
+          id="search-html-id"
+          name="${Search.args.name}"
+          type="text"
+          role="searchbox"
+          aria-label="Search"
+          placeholder="${Search.args.placeholder}"
+          autocomplete="off"
+        />
+        <button type="button" class="xpl-input-search__clear" aria-label="Clear search"></button>
+      </div>
+    </form>
+  </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: '89789ef1ae21c4c555f67fd1a09159765eb1ef9e', class: "xpl-input-color" }, h("xpl-popover", { key: '2eececd5d3592e0111bc507892eb7f7cd8bad8e6', disabled: this.disabled, display: "menu" }, h("div", { key: '56d4a7bb25c3cdeb09d38d2fa986fe7595c453c0', slot: "trigger" }, h("div", { key: 'e49c0143d634a99cc547ead6af263716a28dd9ff', class: {
+        return (h(Host, { key: '6f03535db1b5f451c74a0f1a1abc586605e5c9ca', class: "xpl-input-color" }, h("xpl-popover", { key: 'dae1f3a3b7afdd9231b6feba2d3711fbd1d6716e', disabled: this.disabled, display: "menu" }, h("div", { key: 'a8402cf534186d06f940c3e3436db17afb0152e8', slot: "trigger" }, h("div", { key: 'e9e775229df2a4f8afa252ef03c0a0cd15a93aa4', class: {
                 'xpl-input-color__display': true,
                 'xpl-input-color__display--disabled': this.disabled,
                 'xpl-input-color__display--error': !!this.hasErrorState,
-            } }, h("span", { key: 'e65efc371fab736e640f375446c22340f801b8a2', class: "xpl-input-color__color", style: {
+            } }, h("span", { key: '9abe3e899192f4f08e682f8d7a9a9af9adf5982f', 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: 'b71aa6dd82c16ac328da186920e04b2992341317', size: 20, icon: "eye-dropper", 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: '9e6832ca2ca1b91c9bf91b1816c1f7c8169202f3', 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: '86643ca93847cff19653ebb54160588f2764ae17', class: "xpl-input-color__menu" }, h("div", { key: '40f43b769954163f0d22ff8dc80bcd2e0df4777e', 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: '29f42021c1e55827f1fffcdd416608f01b6bda81', class: "xpl-input-color__sl-thumb", style: slThumbStyle })), h("div", { key: 'e727c66cd44ff40c672f58ae9264485cda3698b7', class: "xpl-input-color__grid" }, h("input", { key: '899cdc6cf61d1452809850dbc847c9df8265437b', 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: '3e72ef16b142fe44bebbcbbd2686fcfa3fb958bc', 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: 'c389627f5c0fa8878ead7d6765ecbe9b2f82debb', 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: 'efd8daf09c022fdc19a6373f0bcd1d32b7548fd2', 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: 'c2707549e3285693ce4c7e0449e047be90640504', 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: 'e6ac05a6d58d92570331489b8a317d17c0726873', class: "xpl-input-wrapper" }, this.pre && (h("label", { key: 'ef746e91506c2bd2c2bc9986bfbb7f0b82a0f079', class: "xpl-input-pre", htmlFor: this.inputId }, this.pre)), h("input", { key: '125e566456a2de4d75fe38fee50a78de886b8009', 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: '399495edb8791cda73084dcef21663a3d207da2f', class: "xpl-input-calendar", icon: "calendar-month", size: 24 }), this.post && (h("label", { key: '6570bf947a23280b04389ed591f7ea401f14f1a5', 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: '579d1ec1094bc5b1aeec622996694728fb1facca', 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: '66b3cc31f1e2bfa4ee1896e64a667e2a26166b50', 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: '53b23be4e2a5b0f920e650c14e591cb1de3b8bac', name: "trigger" })), ((_b = this.files) === null || _b === void 0 ? void 0 : _b.length) > 0 && !this.hideFileNames && (h("ul", { key: '53a294c3765d5b6229f5ed79023095538a1c5edf', 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: 'afcd0be79ed4ffa5696990eb76d8615f61c430f9', class: "xpl-input-file__accept xpl-text-caption" }, "Accepted file types: ", this.accept)), h("input", { key: '08ffdfed6e25b11363e664abe7bdb66ae6b96bb7', onChange: this.handleFileChange, type: "file", ref: (el) => {
                 this.fileInput = el;
             }, hidden: true, accept: this.accept, multiple: this.multiple, name: this.name })));
     }