@xplortech/apollo-core 2.11.0 → 3.0.0

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

@@ -20,7 +20,6 @@ export class InputSearch {
             this.emitSearchCommit(this.value.trim());
         };
         this.handleClear = (event) => {
-            var _a;
             event.preventDefault();
             if (this.disabled || this.readonly) {
                 return;
@@ -28,7 +27,7 @@ export class InputSearch {
             this.value = '';
             this.valueChange.emit('');
             this.inputEvent.emit('');
-            (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
+            this.inputEl?.focus();
         };
         this.handleInput = (event) => {
             const target = event.target;
@@ -60,8 +59,7 @@ export class InputSearch {
         this.syncAncestorFormFlag();
     }
     async setFocus() {
-        var _a;
-        (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
+        this.inputEl?.focus();
     }
     syncAncestorFormFlag() {
         const root = this.el;
@@ -74,11 +72,10 @@ export class InputSearch {
         return this.value !== undefined && this.value.length > 0;
     }
     get resolvedInputAriaLabel() {
-        var _a;
         if (this.hasVisibleLabel) {
             return undefined;
         }
-        return ((_a = this.ariaLabel) !== null && _a !== void 0 ? _a : '').trim() || 'Search';
+        return (this.ariaLabel ?? '').trim() || 'Search';
     }
     get rendersInnerSearchForm() {
         return !this.hasAncestorForm;
@@ -88,7 +85,7 @@ export class InputSearch {
     }
     renderShell() {
         const shell = (h("div", { class: "xpl-input-search__shell" }, h("span", { class: "xpl-input-search__icon", "aria-hidden": "true" }, h("xpl-icon", { icon: "magnifier", size: 20 })), h("input", { "aria-describedby": this.hasError ? this.errorMessageId : undefined, "aria-invalid": this.hasError ? 'true' : undefined, "aria-label": this.resolvedInputAriaLabel, autocomplete: this.autocomplete, class: "xpl-input-search__input", disabled: this.disabled, id: this.inputId, name: this.name, onBlur: this.handleBlur, onFocus: this.handleFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: this.placeholder, readonly: this.readonly, ref: (el) => {
-                this.inputEl = el !== null && el !== void 0 ? el : undefined;
+                this.inputEl = el ?? undefined;
             }, required: this.required, role: "searchbox", type: "text", value: this.value }), h("button", { "aria-hidden": this.hasValue ? undefined : 'true', "aria-label": "Clear search", class: "xpl-input-search__clear", disabled: this.disabled || this.readonly, onClick: this.handleClear, type: "button" }, h("xpl-icon", { icon: "circle-xmark", size: 16 }))));
         if (this.rendersInnerSearchForm) {
             return (h("form", { class: "xpl-input-search__form", onSubmit: this.handleInnerFormSubmit }, shell));
@@ -96,7 +93,7 @@ export class InputSearch {
         return shell;
     }
     render() {
-        return (h(Host, { key: 'bbbcb91c290fec3f0ad0f7df9cb9e43c699f3ab2', class: {
+        return (h(Host, { key: '4a152d3a8db620391334488e1c6c3cdbe9250ba3', class: {
                 'xpl-input-search': true,
                 'xpl-input-search--disabled': this.disabled,
                 'xpl-input-search--error': this.hasError,

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: '5494cc0a537152b9d8dfa03e5281b21e6bb6eee2', 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: '0d32784cd9fc8acacae1854a966bb426fa135fb5', 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: '206c668ca8ee29ceffaf14f14acd90fb076fc0ae', 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" })));
@@ -115,31 +148,31 @@ export class Input {
             case 'time':
                 return (h("xpl-input-time", { inputId: this._id, disabled: this.disabled, name: this.name, required: this.required, readonly: this.readonly, value: this.value, placeholder: this.placeholder, max: this.max, min: this.min, step: this.step, mode: this.mode, timeFormat: this.timeFormat, allowCustomOption: this.allowCustomOption, onValueChange: this.handleChildValueChange }));
             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 }));
+                return (h("xpl-input-phone", { inputId: this._id, disabled: this.disabled, error: this.error !== undefined, 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 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 : '' }));
+                const hasVisibleLabel = Boolean((this.label ?? '').trim());
+                const hasError = this.error !== undefined;
+                const hasErrorMessage = hasError && (this.error?.length ?? 0) > 0;
+                return (h("xpl-input-search", { ariaLabel: (this.ariaLabel ?? '').trim() || 'Search', autocomplete: this.autocomplete ?? 'off', disabled: this.disabled, errorMessageId: hasErrorMessage ? `${this._id}-error` : undefined, hasError: hasError, 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) {
+        if (this.error !== undefined) {
             hasError = true;
         }
         else if (this.multiline &&
@@ -151,13 +184,13 @@ export class Input {
         if (type === 'password' && this.passwordVisible) {
             type = 'text';
         }
-        return (h(Host, { key: '909cf5bbf56456a5bc27e5a3cb6a662ada8df1a7', class: {
+        return (h(Host, { key: '94a5e19a36756ac43ebbe6d3996a2ffbf475da24', 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: 'd41b5e5245483e2ea235c910f85cd6a21b100dec', class: "xpl-input-label", htmlFor: this._id }, this.label, this.description && h("small", { key: 'c9d55823b8b97678b2f5f4374446c3693e6dceaa' }, this.description))), this.renderInput(), (this.error?.length ?? 0) > 0 && (h("label", { key: '20e5a1d2af06e571f0757aa60633438f79a6a17d', class: "xpl-input-error", htmlFor: this._id, id: `${this._id}-error` }, h("xpl-icon", { key: 'a193ee5f1d3e0d8479fa8dfd66ab27edeb400d30', icon: "circle-warning", size: 16 }), h("span", { key: 'acf686fe036d1a1e9cb944ff773dda86e90ff39a' }, this.error)))));
     }
     static get is() { return "xpl-input"; }
     static get properties() {

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: '9fdddb5c8d02400545f57499c92af0ee0aa4be67', role: "group", class: `xpl-large-card ${this.link ? 'xpl-large-card__link' : ''}`, tabindex: "0" }, h("dt", { key: '3854e5f89efa2c968f7abeb8284c0ab8e3e31fda', class: "xpl-large-card__header" }, h("header", { key: '0057d377780108f886dae2d9a6a1f3d81748b5fc' }, h("slot", { key: '243d38d7635a2e288a1ec7f7894b772d5005acee', name: "title" }, this.name), this.link && (h("span", { key: 'f2ce2ff09a50471ee255bac8bda406908c272388', class: "xpl-large-card__header-arrow" }, h("xpl-icon", { key: '86233617aaf74a137d84639e1477c311671fad7b', icon: "chevron-right", size: 16 })))), this.description && (h("div", { key: 'ab0c0134a2468d22d122dfe810306d570beee8e8', class: "xpl-large-card__description" }, this.description))), h("dd", { key: '6fb1262327dc91fd0a982bd31ee7deaa94625e12', class: "xpl-large-card__body" }, this.graphContentPresent && h("slot", { key: 'b1e170a19004aad87015786307b926e58d031751', 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/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;
         }