@xplortech/apollo-core 2.11.0 → 2.12.0

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

@@ -11,16 +11,16 @@ export class InputTime {
         this.showOptions = false;
         this.options = [];
         this.handleInput = (ev) => {
-            var _a;
             const target = ev.target;
-            const allowedChars = (_a = target.value) === null || _a === void 0 ? void 0 : _a.replace(/[^0-9:apmAPM]/g, '');
+            const allowedChars = target.value?.replace(/[^0-9:apmAPM]/g, '');
             this.value = allowedChars;
         };
         this.handleFocus = () => {
             this.showOptions = true;
         };
         this.handleBlur = () => {
-            this.value = normalizeTime(this.value);
+            const normalized = normalizeTime(this.value ?? '');
+            this.value = normalized ?? undefined;
         };
         this.handleClick = () => {
             this.showOptions = true;
@@ -63,7 +63,9 @@ export class InputTime {
             this.hasErrorState = 'Invalid time format, must be HH:MM';
             return;
         }
-        if (this.value < this.min || this.value > this.max) {
+        const min = String(this.min ?? '00:00');
+        const max = String(this.max ?? '23:59');
+        if (this.value < min || this.value > max) {
             this.hasErrorState = 'Out of range';
             return;
         }
@@ -79,11 +81,10 @@ export class InputTime {
         this.hasErrorStateChanged.emit(newValue);
     }
     componentDidLoad() {
-        var _a;
         if (this.mode === 'range') {
             console.warn('Range mode is not supported for time inputs at this time.');
         }
-        (_a = this.dropdown) === null || _a === void 0 ? void 0 : _a.addEventListener('isOpenChange', (e) => {
+        this.dropdown?.addEventListener('isOpenChange', (e) => {
             this.showOptions = e.detail;
         });
     }
@@ -95,7 +96,7 @@ export class InputTime {
         this.updateState(this.value);
     }
     getOptions() {
-        return generateTimeOptions(this.step, this.min.toString(), this.max.toString(), this.timeFormat).map(({ label, value }) => ({
+        return generateTimeOptions(this.step, String(this.min ?? '00:00'), String(this.max ?? '23:59'), this.timeFormat ?? '24h').map(({ label, value }) => ({
             label,
             value,
             onClick: () => {
@@ -105,12 +106,12 @@ export class InputTime {
         }));
     }
     render() {
-        return (h(Host, { key: 'aef2e65955381ed89dd800e889bd20469a201172', class: {
+        return (h(Host, { key: '61190dc5c00042aa095367bcce600a4d759bdbca', class: {
                 'xpl-input-time': true,
                 [`xpl-input-time--mode-${this.mode}`]: true,
                 'xpl-input-time--error': !!this.hasErrorState,
-            } }, h("xpl-input", { key: '90f85f631d876714e65134e964ec521bce1d7948', pre: h("xpl-icon", { class: "xpl-input-time__clock-icon", icon: "clock", size: 24 }), post: this.timeFormat === '12h' ? this.amPm || 'AM' : null, type: "text", _id: this.inputId, disabled: this.disabled, name: this.name, required: this.required, readonly: this.readonly, placeholder: this.placeholder, max: this.max, min: this.min, onInput: this.handleInput, value: this.formattedValue, onFocusEvent: this.handleFocus, onBlurEvent: this.handleBlur, onClick: this.handleClick }), !this.readonly && !this.disabled && (h("xpl-dropdown", { key: 'f42c653946921b15cb0c1b24db01d299c22406c1', options: this.options, isOpen: this.showOptions, ref: (el) => {
-                this.dropdown = el;
+            } }, h("xpl-input", { key: '8793e06e961f53794df33d0015280930a43d1a90', pre: h("xpl-icon", { class: "xpl-input-time__clock-icon", icon: "clock", size: 24 }), post: this.timeFormat === '12h' ? this.amPm || 'AM' : undefined, type: "text", _id: this.inputId, disabled: this.disabled, name: this.name, required: this.required, readonly: this.readonly, placeholder: this.placeholder, max: this.max, min: this.min, onInput: this.handleInput, value: this.formattedValue, onFocusEvent: this.handleFocus, onBlurEvent: this.handleBlur, onClick: this.handleClick }), !this.readonly && !this.disabled && (h("xpl-dropdown", { key: '7c88be365f26e1eecb6c731acb9d1c87d96973dd', options: this.options, isOpen: this.showOptions, ref: (el) => {
+                this.dropdown = el ?? undefined;
             }, class: "xpl-input-time__dropdown" }))));
     }
     static get is() { return "xpl-input-time"; }

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

@@ -40,12 +40,6 @@ export class Input {
             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) {
@@ -67,11 +61,16 @@ export class Input {
             this.focusEvent.emit(detail);
         };
     }
-    hasDirectPreSlotChild() {
-        return Array.from(this.el.children).some((child) => child.getAttribute('slot') === 'pre');
+    connectedCallback() {
+        this.syncPreSlotContent();
+        this.connectPreSlotObserver();
     }
-    updateCharacterCount() {
-        this.characterCount = this.input.value.length;
+    disconnectedCallback() {
+        if (this.preSlotSyncTimeoutId !== undefined) {
+            clearTimeout(this.preSlotSyncTimeoutId);
+            this.preSlotSyncTimeoutId = undefined;
+        }
+        this.disconnectPreSlotObserver();
     }
     componentWillLoad() {
         if (this._id === undefined || this._id === null || this._id === '')
@@ -79,32 +78,66 @@ export class Input {
         if (this.multiline && this.maxCharacterCount !== undefined) {
             this.characterCount = this.value !== undefined ? this.value.length : 0;
         }
-        if (!this.multiline) {
-            this.hasPreSlotContent = this.hasDirectPreSlotChild();
+        this.syncPreSlotContent();
+    }
+    componentWillRender() {
+        this.disconnectPreSlotObserver();
+    }
+    componentDidRender() {
+        this.schedulePreSlotSync();
+    }
+    async setFocus() {
+        if (this.type === 'search') {
+            await this.searchInputRef?.setFocus();
+            return;
         }
+        this.input?.focus();
     }
-    componentDidLoad() {
-        if (this.multiline || this.type === 'search')
+    connectPreSlotObserver() {
+        this.disconnectPreSlotObserver();
+        if (this.multiline || this.type === 'search' || typeof MutationObserver === 'undefined') {
             return;
-        if (typeof MutationObserver !== 'undefined') {
-            this.preSlotObserver = new MutationObserver(this.syncPreSlotContent);
-            this.preSlotObserver.observe(this.el, { childList: true });
         }
+        this.preSlotObserver = new MutationObserver(() => {
+            this.schedulePreSlotSync();
+        });
+        this.preSlotObserver.observe(this.el, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['slot'],
+        });
     }
-    disconnectedCallback() {
-        var _a;
-        (_a = this.preSlotObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    disconnectPreSlotObserver() {
+        this.preSlotObserver?.disconnect();
+        this.preSlotObserver = undefined;
     }
-    async setFocus() {
-        var _a, _b;
-        if (this.type === 'search') {
-            await ((_a = this.searchInputRef) === null || _a === void 0 ? void 0 : _a.setFocus());
+    schedulePreSlotSync() {
+        if (this.preSlotSyncTimeoutId !== undefined) {
+            clearTimeout(this.preSlotSyncTimeoutId);
+        }
+        this.preSlotSyncTimeoutId = setTimeout(() => {
+            this.preSlotSyncTimeoutId = undefined;
+            if (!this.el.isConnected) {
+                return;
+            }
+            this.syncPreSlotContent();
+            this.connectPreSlotObserver();
+        }, 0);
+    }
+    syncPreSlotContent() {
+        if (this.multiline || this.type === 'search') {
             return;
         }
-        (_b = this.input) === null || _b === void 0 ? void 0 : _b.focus();
+        const next = Array.from(this.el.querySelectorAll('[slot="pre"]')).some((node) => node.closest('xpl-input') === this.el);
+        if (next !== this.hasPreSlotContent) {
+            this.hasPreSlotContent = next;
+        }
+    }
+    updateCharacterCount() {
+        this.characterCount = this.input?.value.length ?? 0;
     }
     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, onInputChange: this.handleChildValueChange, _id: this._id }, h("slot", { name: "trigger" })));
@@ -117,27 +150,26 @@ export class Input {
             case 'phone':
                 return (h("xpl-input-phone", { inputId: this._id, disabled: this.disabled, error: !!this.error, name: this.name, required: this.required, readonly: this.readonly, value: this.value, placeholder: this.placeholder, defaultCountry: this.defaultCountry, preferredCountries: this.preferredCountries, isInternational: this.isInternational, onValueChange: this.handleChildValueChange }));
             case 'search': {
-                const hasVisibleLabel = Boolean(((_a = this.label) !== null && _a !== void 0 ? _a : '').trim());
+                const hasVisibleLabel = Boolean((this.label ?? '').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, onValueChange: this.handleChildValueChange, 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 : '' }));
+                return (h("xpl-input-search", { ariaLabel: (this.ariaLabel ?? '').trim() || 'Search', autocomplete: this.autocomplete ?? '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, onValueChange: this.handleChildValueChange, placeholder: this.placeholder ?? 'Search', readonly: this.readonly, ref: (el) => {
+                        this.searchInputRef = el ?? undefined;
+                    }, required: this.required, shape: this.shape ?? 'rounded', value: this.value ?? '' }));
             }
             default:
                 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;
+                        this.input = el ?? undefined;
                     }, 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;
+                        this.input = el ?? undefined;
                     }, required: this.required, onChange: this.valueChanged, onFocus: this.handleFocus, onBlur: this.handleBlur, onInput: this.handleInput }, this.value)), this.type === 'password' && (h("button", { "aria-label": "Toggle password visibility", class: "xpl-input-password", onClick: () => {
                         this.passwordVisible = !this.passwordVisible;
                     }, role: "presentation" }, h("xpl-icon", { icon: this.passwordVisible ? 'eye-closed' : 'eye', size: 24 }))), this.post && !this.multiline && (h("label", { class: "xpl-input-post", htmlFor: this._id }, this.post)), this.multiline && this.maxCharacterCount !== undefined && (h("span", { class: "xpl-input-characters" }, this.characterCount, "/", this.maxCharacterCount))));
         }
     }
     render() {
-        var _a;
         let hasError = false;
         if (this.error) {
             hasError = true;
@@ -151,13 +183,13 @@ export class Input {
         if (type === 'password' && this.passwordVisible) {
             type = 'text';
         }
-        return (h(Host, { key: '909cf5bbf56456a5bc27e5a3cb6a662ada8df1a7', class: {
+        return (h(Host, { key: '008387a60d49c0a4d303f7b6254c18ba109138c8', class: {
                 'xpl-input': true,
-                'xpl-input--disabled': this.disabled,
+                'xpl-input--disabled': !!this.disabled,
                 'xpl-input--error': hasError,
-                'xpl-input--readonly': this.readonly,
+                'xpl-input--readonly': !!this.readonly,
                 [`xpl-input--${this.type}`]: true,
-            } }, this.label && (h("label", { key: '0391385b4f19a7a4e36e0a42f4bac9e0400fd7df', class: "xpl-input-label", htmlFor: this._id }, this.label, this.description && h("small", { key: '5724a1710c660297a31cbc37b46b68a0e837e583' }, this.description))), this.renderInput(), ((_a = this.error) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("label", { key: 'ea1f4fe026d00c4119df392df786648f46e21e4b', class: "xpl-input-error", htmlFor: this._id, id: `${this._id}-error` }, h("xpl-icon", { key: '42c279d5e037da8178c4db4e4b934150ddc43a42', icon: "alert-circle", size: 16 }), h("span", { key: '461f9c09aaa8642df9645e856fa10a312572054c' }, this.error)))));
+            } }, this.label && (h("label", { key: '73e44138ac4bcd5ab6f96de33d818ae0d0bdb8fb', class: "xpl-input-label", htmlFor: this._id }, this.label, this.description && h("small", { key: '85b33374df5ba7f1c002d1a5555a23013fd5f8f9' }, this.description))), this.renderInput(), (this.error?.length ?? 0) > 0 && (h("label", { key: '802f79003fe348f0d6927701b4becdf086dc207e', class: "xpl-input-error", htmlFor: this._id, id: `${this._id}-error` }, h("xpl-icon", { key: '3b43c9816359cfbfc0c11a8874a4b561d04986d1', icon: "circle-warning", size: 16 }), h("span", { key: '76fe2a5cb424eb17e5d7c9358f81d2ad36775903' }, this.error)))));
     }
     static get is() { return "xpl-input"; }
     static get properties() {

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

@@ -1,5 +1,28 @@
+import { expect, waitFor } from "storybook/test";
+import { setAutoSnapshotOptions } from "vitest-plugin-vis";
+const waitForHydration = async ({ canvasElement }) => {
+    if (document.fonts?.ready) {
+        await document.fonts.ready;
+    }
+    await waitFor(() => {
+        const cards = canvasElement.querySelectorAll('xpl-large-card');
+        expect(cards.length).toBeGreaterThan(0);
+        const customEls = canvasElement.querySelectorAll('xpl-large-card, xpl-icon, xpl-tooltip');
+        customEls.forEach((el) => expect(el.classList.contains('hydrated')).toBe(true));
+    }, { timeout: 15000 });
+};
 export default {
     title: 'Data Components/Large Card',
+    tags: ['vrt'],
+    beforeEach() {
+        document.body.classList.remove('dark');
+        document.body.classList.add('light');
+        setAutoSnapshotOptions({
+            enable: true,
+            failureThreshold: 2,
+            failureThresholdType: 'percent',
+        });
+    },
     argTypes: {
         contentType: {
             control: 'radio',
@@ -29,8 +52,8 @@ export default {
         },
     },
 };
-export const LargeCard = ({ name, description, link, title, graphContent }) => `
-    <dl class="xpl-dl xpl-dl--center">
+export const LargeCard = ({ name, description, link, title, graphContent, }) => `
+    <dl class="xpl-dl xpl-dl--center" style="width: 37.5rem;">
         <xpl-large-card
             name="${name}"
             description="${description}"
@@ -87,7 +110,7 @@ LargeCard.parameters = {
                         ${title || ''}
                         ${link
             ? `
-                                    <span class="xpl-data-card__header-arrow">
+                                    <span class="xpl-large-card__header-arrow">
                                         <xpl-icon
                                             icon="chevron-right"
                                             size={16}
@@ -129,3 +152,4 @@ LargeCard.parameters = {
         url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=17661-38565&p=f&t=01tbTrRZyfvVafsA-11',
     },
 };
+LargeCard.play = waitForHydration;

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

@@ -1,5 +1,24 @@
 import { Host, h } from "@stencil/core";
+import { hostHasNamedSlot } from "../../utils/slot-presence";
+const GRAPH_CONTENT_SLOT = 'graph-content';
 export class LargeCard {
+    constructor() {
+        this.graphContentPresent = false;
+    }
+    connectedCallback() {
+        this.syncGraphContentSlot();
+        this.connectGraphContentSlotObserver();
+    }
+    disconnectedCallback() {
+        if (this.graphContentSlotSyncTimeoutId !== undefined) {
+            clearTimeout(this.graphContentSlotSyncTimeoutId);
+            this.graphContentSlotSyncTimeoutId = undefined;
+        }
+        this.disconnectGraphContentSlotObserver();
+    }
+    componentWillLoad() {
+        this.syncGraphContentSlot();
+    }
     componentDidLoad() {
         if (this.link) {
             const anchorEl = this.el.getElementsByTagName('a')[0] || this.el.getElementsByTagName('button')[0];
@@ -10,10 +29,52 @@ export class LargeCard {
             anchorEl.appendChild(anchorSpan);
         }
     }
+    componentWillRender() {
+        this.disconnectGraphContentSlotObserver();
+    }
+    componentDidRender() {
+        this.scheduleGraphContentSlotSync();
+    }
+    connectGraphContentSlotObserver() {
+        this.disconnectGraphContentSlotObserver();
+        if (typeof MutationObserver === 'undefined') {
+            return;
+        }
+        this.graphContentSlotObserver = new MutationObserver(() => {
+            this.scheduleGraphContentSlotSync();
+        });
+        this.graphContentSlotObserver.observe(this.el, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['slot'],
+        });
+    }
+    disconnectGraphContentSlotObserver() {
+        this.graphContentSlotObserver?.disconnect();
+        this.graphContentSlotObserver = undefined;
+    }
+    scheduleGraphContentSlotSync() {
+        if (this.graphContentSlotSyncTimeoutId !== undefined) {
+            clearTimeout(this.graphContentSlotSyncTimeoutId);
+        }
+        this.graphContentSlotSyncTimeoutId = setTimeout(() => {
+            this.graphContentSlotSyncTimeoutId = undefined;
+            if (!this.el.isConnected) {
+                return;
+            }
+            this.syncGraphContentSlot();
+            this.connectGraphContentSlotObserver();
+        }, 0);
+    }
+    syncGraphContentSlot() {
+        const hasGraphContent = hostHasNamedSlot(this.el, GRAPH_CONTENT_SLOT);
+        if (hasGraphContent !== this.graphContentPresent) {
+            this.graphContentPresent = hasGraphContent;
+        }
+    }
     render() {
-        const contentSlot = 'graph-content';
-        const hasContentSlot = this.el.querySelector(`[slot="${contentSlot}"]`);
-        return (h(Host, { key: '30865d2efaf693257afb21c768981e2785c81ad4', role: "group", class: `xpl-large-card ${this.link ? 'xpl-large-card__link' : ''}`, tabindex: "0" }, h("dt", { key: 'bf95f5c52d36b3aa9174222ea2f3bb7e788f5992', class: "xpl-large-card__header" }, h("header", { key: '5a18e7dfe1544b65fa13e9b918d06ca0fdabb9f2' }, h("slot", { key: '94e9bd081a2c1fe5eb57cb8cedd0ab1224bb5bb3', name: "title" }, this.name), this.link && (h("span", { key: '082622ba8e2446dc65fe4f37ee1e15bab1c8785d', class: "xpl-data-card__header-arrow" }, h("xpl-icon", { key: '407180586601126e1ea5fb2c6af006d109067b39', icon: "chevron-right", size: 16 })))), this.description && (h("div", { key: '381711e6390dd685b0951d7dd08faeb6f9ef34f3', class: "xpl-large-card__description" }, this.description))), h("dd", { key: '2cf8a71574bef72aee76720525e26288b92cecc2', class: "xpl-large-card__body" }, hasContentSlot && h("slot", { key: '03a58f57d713de2abad1b815a77c91f340ef1f0a', name: contentSlot }))));
+        return (h(Host, { key: '1f4d73841c0645f6eaa784d5a684baf605fd249c', role: "group", class: `xpl-large-card ${this.link ? 'xpl-large-card__link' : ''}`, tabindex: "0" }, h("dt", { key: '37a067e460a49508251b44102fd8470caef01c95', class: "xpl-large-card__header" }, h("header", { key: '4ab9ba4d4bee0b82b7e5f51fec425caa23334bca' }, h("slot", { key: 'ce45a8dd99e027d1ce56c780d6304438524778b1', name: "title" }, this.name), this.link && (h("span", { key: '90c795212858e49ff947da8e91ccbeee357e92ef', class: "xpl-large-card__header-arrow" }, h("xpl-icon", { key: '459405641d21f234bc322f20745cdb5f81e4c60e', icon: "chevron-right", size: 16 })))), this.description && (h("div", { key: '7cffdab2f56ef65c097e254ae859b1314f96849f', class: "xpl-large-card__description" }, this.description))), h("dd", { key: '6454b51a6cc99af277c557b16a0e77877aa455d9', class: "xpl-large-card__body" }, this.graphContentPresent && h("slot", { key: 'c1ec933cef4a0098e69f408445de06ca32799911', name: GRAPH_CONTENT_SLOT }))));
     }
     static get is() { return "xpl-large-card"; }
     static get properties() {
@@ -77,5 +138,10 @@ export class LargeCard {
             }
         };
     }
+    static get states() {
+        return {
+            "graphContentPresent": {}
+        };
+    }
     static get elementRef() { return "el"; }
 }

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

@@ -1,4 +1,6 @@
 import { v4 as uuid } from "uuid";
+import { setAutoSnapshotOptions } from "vitest-plugin-vis";
+import { waitForHydration } from "../../../../.storybook/utils/wait-for-hydration";
 const PLACEHOLDER_AVATAR_SRC = 'https://placebear.com/128/128';
 function slotBasedAvatarMarkup(slotAvatar, name) {
     if (slotAvatar === 'image') {
@@ -10,6 +12,13 @@ function slotBasedAvatarMarkup(slotAvatar, name) {
     return `<xpl-avatar name="${name}"></xpl-avatar>`;
 }
 export default {
+    tags: ['vrt'],
+    beforeEach() {
+        setAutoSnapshotOptions({ enable: true });
+    },
+    async play({ canvasElement }) {
+        await waitForHydration(canvasElement);
+    },
     title: 'Components/List',
     parameters: {
         controls: {
@@ -165,7 +174,7 @@ export default {
         },
     },
 };
-const script = ({ id, avatar, avatars, badges, metadata, link, title, subtext }) => `
+const script = ({ id, avatar, avatars, badges, metadata, link, title, subtext, }) => `
     (function() {
         const list = document.getElementById("${id}");
         const item = ${JSON.stringify({
@@ -289,7 +298,7 @@ export const List = (props) => {
         `;
     }
     return `<xpl-list id="${id}"></xpl-list>
-    <script>${script(Object.assign({ id }, props))}</script>`;
+    <script>${script({ id, ...props })}</script>`;
 };
 List.args = {
     type: 'Slot based',

package/dist/collection/components/xpl-list/xpl-list-item/xpl-list-item.js

@@ -14,6 +14,12 @@ function emptyXplListItemSlotPresence() {
         title: false,
     };
 }
+function renderLegacyAvatarCell(item) {
+    if (!item.avatar || typeof item.avatar !== 'string') {
+        return null;
+    }
+    return item.avatar.slice(0, 1) === '/' || item.avatar.slice(0, 4) === 'http' ? (h("xpl-avatar", { src: item.avatar, name: item.title })) : (h("xpl-avatar", { name: item.title }, item.avatar));
+}
 export class XplListItem {
     constructor() {
         this.dragFromHandle = false;
@@ -42,7 +48,7 @@ export class XplListItem {
                 e.dataTransfer.setData('text/plain', this.itemId || this.el.id || '');
             }
             const wrapper = this.el.querySelector('.xpl-list-item__wrapper');
-            wrapper === null || wrapper === void 0 ? void 0 : wrapper.classList.add('dragging');
+            wrapper?.classList.add('dragging');
             this.itemDragStart.emit({ itemId: this.itemId, item: this.el });
         };
         this.handleDrop = (e) => {
@@ -69,7 +75,7 @@ export class XplListItem {
             }
             e.preventDefault();
             const wrapper = this.el.querySelector('.xpl-list-item__wrapper');
-            wrapper === null || wrapper === void 0 ? void 0 : wrapper.classList.add('drag-over');
+            wrapper?.classList.add('drag-over');
         };
         this.handleDragLeave = (e) => {
             if (this.disabled) {
@@ -84,7 +90,7 @@ export class XplListItem {
             this.detachDragHandlePointerReleaseListeners();
             this.dragFromHandle = false;
             const wrapper = this.el.querySelector('.xpl-list-item__wrapper');
-            wrapper === null || wrapper === void 0 ? void 0 : wrapper.classList.remove('dragging', 'drag-over');
+            wrapper?.classList.remove('dragging', 'drag-over');
             const parent = this.el.parentElement;
             if (parent) {
                 Array.from(parent.children).forEach((sibling) => {
@@ -92,7 +98,7 @@ export class XplListItem {
                         return;
                     }
                     const siblingWrapper = sibling.querySelector('.xpl-list-item__wrapper');
-                    siblingWrapper === null || siblingWrapper === void 0 ? void 0 : siblingWrapper.classList.remove('drag-over');
+                    siblingWrapper?.classList.remove('drag-over');
                 });
             }
             this.itemDragEnd.emit({ itemId: this.itemId, item: this.el });
@@ -281,22 +287,20 @@ export class XplListItem {
         return false;
     }
     getTitleSlotAccessibleText() {
-        var _a;
         const directTitle = Array.from(this.el.children).find((c) => c.getAttribute('slot') === 'title');
         if (directTitle) {
-            return (_a = directTitle.textContent) !== null && _a !== void 0 ? _a : undefined;
+            return directTitle.textContent ?? undefined;
         }
         const slotEl = Array.from(this.el.querySelectorAll('slot[name="title"]')).find((s) => s.closest('xpl-list-item') === this.el);
         if (slotEl && typeof slotEl.assignedNodes === 'function') {
             const combined = slotEl
                 .assignedNodes({ flatten: true })
                 .map((node) => {
-                var _a, _b;
                 if (node.nodeType === Node.TEXT_NODE) {
-                    return (_a = node.textContent) !== null && _a !== void 0 ? _a : '';
+                    return node.textContent ?? '';
                 }
                 if (node.nodeType === Node.ELEMENT_NODE) {
-                    return (_b = node.textContent) !== null && _b !== void 0 ? _b : '';
+                    return node.textContent ?? '';
                 }
                 return '';
             })
@@ -307,26 +311,24 @@ export class XplListItem {
         return undefined;
     }
     getRowIdForAccessibleLabel() {
-        var _a, _b, _c;
-        const fromProp = (_a = this.itemId) === null || _a === void 0 ? void 0 : _a.trim();
+        const fromProp = this.itemId?.trim();
         if (fromProp) {
             return fromProp;
         }
-        const fromAttr = (_b = this.el.getAttribute('item-id')) === null || _b === void 0 ? void 0 : _b.trim();
+        const fromAttr = this.el.getAttribute('item-id')?.trim();
         if (fromAttr) {
             return fromAttr;
         }
-        const fromId = (_c = this.el.id) === null || _c === void 0 ? void 0 : _c.trim();
+        const fromId = this.el.id?.trim();
         if (fromId) {
             return fromId;
         }
         return '';
     }
     getSelectableRadioLabel() {
-        var _a;
         const rowId = this.getRowIdForAccessibleLabel();
         if (this.slotPresence.title) {
-            const titleText = (_a = this.getTitleSlotAccessibleText()) === null || _a === void 0 ? void 0 : _a.trim();
+            const titleText = this.getTitleSlotAccessibleText()?.trim();
             if (titleText) {
                 return titleText;
             }
@@ -340,22 +342,19 @@ export class XplListItem {
         }
         return 'Select list item';
     }
-    renderLegacyAvatarCell() {
-        if (!this.item.avatar || typeof this.item.avatar !== 'string') {
-            return null;
-        }
-        return this.item.avatar.slice(0, 1) === '/' || this.item.avatar.slice(0, 4) === 'http' ? (h("xpl-avatar", { src: this.item.avatar, name: this.item.title })) : (h("xpl-avatar", { name: this.item.title }, this.item.avatar));
-    }
     renderPropBasedItem() {
         const { item } = this;
+        if (!item) {
+            return null;
+        }
         const hasRight = item.avatars || item.badges || item.subtext;
         const Tag = item.href ? 'a' : 'div';
         const linkProps = item.href ? { href: item.href } : {};
         return (h(Host, { role: "listitem", class: {
                 'xpl-list-item': true,
-                'xpl-list-item--error': this.error,
-                'xpl-list-item--disabled': this.disabled,
-            }, hidden: this.hidden }, this.renderLegacyAvatarCell(), h(Tag, Object.assign({ class: "xpl-list-item-content" }, linkProps), h("div", { class: "xpl-list-left" }, h("div", null, h("h4", null, item.title), item.metadata && (h("ul", { class: "xpl-list-item-metadata" }, item.metadata.map((d) => {
+                'xpl-list-item--error': !!this.error,
+                'xpl-list-item--disabled': !!this.disabled,
+            }, hidden: this.hidden }, renderLegacyAvatarCell(item), h(Tag, { class: "xpl-list-item-content", ...linkProps }, h("div", { class: "xpl-list-left" }, h("div", null, h("h4", null, item.title), item.metadata && (h("ul", { class: "xpl-list-item-metadata" }, item.metadata.map((d) => {
             if (typeof d === 'string') {
                 return h("li", null, d);
             }
@@ -379,7 +378,6 @@ export class XplListItem {
         return (h("div", { class: "xpl-list-item__title-badge" }, h("xpl-badge", { dotOnly: true, size: "small", variant: variant })));
     }
     renderSlotBasedItem() {
-        var _a;
         const hasRightSideContent = this.slotPresence.details || this.slotPresence.badges || this.slotPresence.actions;
         const hasStackedContent = this.slotPresence.title ||
             this.slotPresence.metadata ||
@@ -401,21 +399,21 @@ export class XplListItem {
         const rowBody = (h(Fragment, null, reorderActive && (h("div", { class: "xpl-list-item__reorderable" }, h("xpl-button", { class: {
                 'xpl-list-item__drag-handle': true,
                 'xpl-list-item__drag-handle--keyboard-mode': this.isKeyboardMode,
-            }, type: "button", variant: "tertiary", sentiment: "neutral", iconOnly: true, icon: this.isKeyboardMode ? 'caret-expand-y' : 'grip-dots-vertical', disabled: this.disabled, onClick: this.preventRowLinkNavigation, onMouseDown: this.handleDragHandleMouseDown, onKeyDown: this.handleDragHandleKeyDown }))), this.selectable && radioGroupName ? (h("div", { class: "xpl-list-item__selectable", onClick: this.handleRadioClick }, h("xpl-radio", { checked: this.selected, disabled: this.disabled, name: radioGroupName, value: (_a = this.itemId) !== null && _a !== void 0 ? _a : '', onRadioChange: this.handleRadioChange }, this.getSelectableRadioLabel()))) : null, this.slotPresence.avatar && (h("div", { class: "xpl-list-item__avatar", onClick: this.preventRowLinkNavigation }, h("slot", { name: "avatar" }))), hasStackedContent && (h("div", { class: "xpl-list-item__stacked" }, (this.slotPresence.title || this.slotPresence.titleBadge) && (h("div", { class: "xpl-list-item__title-row" }, h("div", { class: "xpl-list-item__title-wrapper" }, this.renderTitleBadge(), h("slot", { name: "title" })))), this.showDivider && h("xpl-divider", null), this.slotPresence.metadata && (h("div", { class: "xpl-list-item__metadata-row" }, h("slot", { name: "metadata" }))), this.slotPresence.stackedExtra1 && (h("div", { class: "xpl-list-item__stacked-extra-1" }, h("slot", { name: "stacked-extra-1" }))), this.slotPresence.stackedExtra2 && (h("div", { class: "xpl-list-item__stacked-extra-2" }, h("slot", { name: "stacked-extra-2" }))), this.slotPresence.stackedExtra3 && (h("div", { class: "xpl-list-item__stacked-extra-3" }, h("slot", { name: "stacked-extra-3" }))))), hasRightSideContent && (h("div", { class: "xpl-list-item__right" }, this.slotPresence.details && (h("div", { class: "xpl-list-item__details" }, h("slot", { name: "details" }))), this.slotPresence.badges && (h("div", { class: "xpl-list-item__badges" }, h("slot", { name: "badges" }))), this.slotPresence.actions && (h("div", { class: "xpl-list-item__actions", onClick: this.preventRowLinkNavigation }, h("slot", { name: "actions" }))))), this.href ? (h("span", { class: "xpl-list-item__link-chevron", "aria-hidden": "true" }, h("xpl-icon", { icon: "chevron-right", size: 12 }))) : null));
+            }, type: "button", variant: "tertiary", sentiment: "neutral", iconOnly: true, icon: this.isKeyboardMode ? 'caret-expand-y' : 'grip-dots-vertical', disabled: this.disabled, onClick: this.preventRowLinkNavigation, onMouseDown: this.handleDragHandleMouseDown, onKeyDown: this.handleDragHandleKeyDown }))), this.selectable && radioGroupName ? (h("div", { class: "xpl-list-item__selectable", onClick: this.handleRadioClick }, h("xpl-radio", { checked: this.selected, disabled: this.disabled, name: radioGroupName, value: this.itemId ?? '', onRadioChange: this.handleRadioChange }, this.getSelectableRadioLabel()))) : null, this.slotPresence.avatar && (h("div", { class: "xpl-list-item__avatar", onClick: this.preventRowLinkNavigation }, h("slot", { name: "avatar" }))), hasStackedContent && (h("div", { class: "xpl-list-item__stacked" }, (this.slotPresence.title || this.slotPresence.titleBadge) && (h("div", { class: "xpl-list-item__title-row" }, h("div", { class: "xpl-list-item__title-wrapper" }, this.renderTitleBadge(), h("slot", { name: "title" })))), this.showDivider && h("xpl-divider", null), this.slotPresence.metadata && (h("div", { class: "xpl-list-item__metadata-row" }, h("slot", { name: "metadata" }))), this.slotPresence.stackedExtra1 && (h("div", { class: "xpl-list-item__stacked-extra-1" }, h("slot", { name: "stacked-extra-1" }))), this.slotPresence.stackedExtra2 && (h("div", { class: "xpl-list-item__stacked-extra-2" }, h("slot", { name: "stacked-extra-2" }))), this.slotPresence.stackedExtra3 && (h("div", { class: "xpl-list-item__stacked-extra-3" }, h("slot", { name: "stacked-extra-3" }))))), hasRightSideContent && (h("div", { class: "xpl-list-item__right" }, this.slotPresence.details && (h("div", { class: "xpl-list-item__details" }, h("slot", { name: "details" }))), this.slotPresence.badges && (h("div", { class: "xpl-list-item__badges" }, h("slot", { name: "badges" }))), this.slotPresence.actions && (h("div", { class: "xpl-list-item__actions", onClick: this.preventRowLinkNavigation }, h("slot", { name: "actions" }))))), this.href ? (h("span", { class: "xpl-list-item__link-chevron", "aria-hidden": "true" }, h("xpl-icon", { icon: "chevron-right", size: 12 }))) : null));
         return (h(Host, { class: {
                 'xpl-list-item': true,
-                'xpl-list-item--error': this.error || this.slotPresence.errorText,
-                'xpl-list-item--disabled': this.disabled,
+                'xpl-list-item--error': !!(this.error || this.slotPresence.errorText),
+                'xpl-list-item--disabled': !!this.disabled,
                 'xpl-list-item--slot-based': true,
-                'xpl-list-item--selected': this.selected,
-            }, hidden: this.hidden }, this.href ? (h("div", { role: "listitem", class: "xpl-list-item__listitem-shell" }, h("a", Object.assign({ class: wrapperClass, href: this.href }, dragSurfaceProps), rowBody))) : (h("div", Object.assign({ role: "listitem", class: wrapperClass }, dragSurfaceProps), rowBody)), this.slotPresence.errorText && (h("div", { class: "xpl-list-item__error-text" }, h("xpl-icon", { icon: "circle-warning", size: 16 }), h("slot", { name: "error-text" })))));
+                'xpl-list-item--selected': !!this.selected,
+            }, hidden: this.hidden }, this.href ? (h("div", { role: "listitem", class: "xpl-list-item__listitem-shell" }, h("a", { class: wrapperClass, href: this.href, ...dragSurfaceProps }, rowBody))) : (h("div", { role: "listitem", class: wrapperClass, ...dragSurfaceProps }, rowBody)), this.slotPresence.errorText && (h("div", { class: "xpl-list-item__error-text" }, h("xpl-icon", { icon: "circle-warning", size: 16 }), h("slot", { name: "error-text" })))));
     }
     syncReorderDragHandleA11y() {
         if (!this.reorderable || this.disabled) {
             return;
         }
         const host = this.el.querySelector('xpl-button.xpl-list-item__drag-handle');
-        const nativeBtn = host === null || host === void 0 ? void 0 : host.querySelector('button');
+        const nativeBtn = host?.querySelector('button');
         if (!nativeBtn) {
             return;
         }