@xplortech/apollo-core 2.10.0 → 2.12.0

package/dist/cjs/xpl-input_4.cjs.entry.js

@@ -0,0 +1,524 @@
+'use strict';
+
+var index = require('./index-3cBvw409.js');
+var v4 = require('./v4-_2BfiRUa.js');
+var index$1 = require('./index-BvmWjxWc.js');
+var lifecycle = require('./lifecycle-DeSsFfQZ.js');
+
+const Input = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.blurEvent = index.createEvent(this, "blurEvent", 7);
+        this.focusEvent = index.createEvent(this, "focusEvent", 7);
+        this.inputEvent = index.createEvent(this, "inputEvent", 7);
+        this.search = index.createEvent(this, "search", 7);
+        this.valueChange = index.createEvent(this, "valueChange", 7);
+        this.multiline = false;
+        this.dateFormat = 'Y-m-d';
+        this.timeFormat = '24h';
+        this.allowCustomOption = false;
+        this.mode = 'single';
+        this.accept = '';
+        this.multiple = false;
+        this.hideTriggerOnSelect = false;
+        this.hideFileNames = false;
+        this.hideAcceptText = false;
+        this.defaultCountry = 'US';
+        this.isInternational = true;
+        this.ariaLabel = '';
+        this.type = 'text';
+        this.handleChildValueChange = (event) => {
+            event.stopPropagation();
+            this.valueChange.emit(event.detail);
+        };
+        this.valueChanged = (event) => {
+            const target = event.target;
+            this.valueChange.emit(target.value);
+        };
+        this.characterCount = 0;
+        this.passwordVisible = false;
+        this.hasPreSlotContent = false;
+        this.handleBlur = (ev) => {
+            this.blurEvent.emit(ev);
+        };
+        this.handleFocus = (ev) => {
+            this.focusEvent.emit(ev);
+        };
+        this.handleInput = (ev) => {
+            if (this.multiline) {
+                this.updateCharacterCount();
+            }
+            const { value } = ev.target;
+            this.inputEvent.emit(value);
+        };
+        this.handleSearchBlurForward = (event) => {
+            const { detail } = event;
+            if (!detail) {
+                return;
+            }
+            event.stopPropagation();
+            this.blurEvent.emit(detail);
+        };
+        this.handleSearchCommit = (event) => {
+            event.stopPropagation();
+            this.search.emit(event.detail);
+        };
+        this.handleSearchFocusForward = (event) => {
+            const { detail } = event;
+            if (!detail) {
+                return;
+            }
+            event.stopPropagation();
+            this.focusEvent.emit(detail);
+        };
+    }
+    connectedCallback() {
+        this.syncPreSlotContent();
+        this.connectPreSlotObserver();
+    }
+    disconnectedCallback() {
+        if (this.preSlotSyncTimeoutId !== undefined) {
+            clearTimeout(this.preSlotSyncTimeoutId);
+            this.preSlotSyncTimeoutId = undefined;
+        }
+        this.disconnectPreSlotObserver();
+    }
+    componentWillLoad() {
+        if (this._id === undefined || this._id === null || this._id === '')
+            this._id = v4.v4();
+        if (this.multiline && this.maxCharacterCount !== undefined) {
+            this.characterCount = this.value !== undefined ? this.value.length : 0;
+        }
+        this.syncPreSlotContent();
+    }
+    componentWillRender() {
+        this.disconnectPreSlotObserver();
+    }
+    componentDidRender() {
+        this.schedulePreSlotSync();
+    }
+    async setFocus() {
+        if (this.type === 'search') {
+            await this.searchInputRef?.setFocus();
+            return;
+        }
+        this.input?.focus();
+    }
+    connectPreSlotObserver() {
+        this.disconnectPreSlotObserver();
+        if (this.multiline || this.type === 'search' || typeof MutationObserver === 'undefined') {
+            return;
+        }
+        this.preSlotObserver = new MutationObserver(() => {
+            this.schedulePreSlotSync();
+        });
+        this.preSlotObserver.observe(this.el, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['slot'],
+        });
+    }
+    disconnectPreSlotObserver() {
+        this.preSlotObserver?.disconnect();
+        this.preSlotObserver = undefined;
+    }
+    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;
+        }
+        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() {
+        switch (this.type) {
+            case 'file':
+                return (index.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 }, index.h("slot", { name: "trigger" })));
+            case 'color':
+                return (index.h("xpl-input-color", { disabled: this.disabled, value: this.value, placeholder: this.placeholder, required: this.required, hideEyeDropper: this.hideEyeDropper, onInputChange: this.handleChildValueChange }));
+            case 'date':
+                return (index.h("xpl-input-date", { inputId: this._id, disabled: this.disabled, name: this.name, required: this.required, readonly: this.readonly, value: this.value, placeholder: this.placeholder, post: this.post, pre: this.pre, max: this.max, min: this.min, dateFormat: this.dateFormat, mode: this.mode, onValueChange: this.handleChildValueChange }));
+            case 'time':
+                return (index.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 (index.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((this.label ?? '').trim());
+                const hasErrorMessage = Boolean(this.error && this.error.length > 0);
+                return (index.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 (index.h("div", { class: "xpl-input-wrapper" }, !this.multiline && (index.h("label", { class: {
+                        'xpl-input-pre': true,
+                        'xpl-input-pre--hidden': !this.pre && !this.hasPreSlotContent,
+                    }, htmlFor: this._id }, index.h("slot", { name: "pre" }, this.pre))), !this.multiline ? (index.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 ?? 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 })) : (index.h("textarea", { disabled: this.disabled, id: this._id, name: this.name, placeholder: this.placeholder, readonly: this.readonly, ref: (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' && (index.h("button", { "aria-label": "Toggle password visibility", class: "xpl-input-password", onClick: () => {
+                        this.passwordVisible = !this.passwordVisible;
+                    }, role: "presentation" }, index.h("xpl-icon", { icon: this.passwordVisible ? 'eye-closed' : 'eye', size: 24 }))), this.post && !this.multiline && (index.h("label", { class: "xpl-input-post", htmlFor: this._id }, this.post)), this.multiline && this.maxCharacterCount !== undefined && (index.h("span", { class: "xpl-input-characters" }, this.characterCount, "/", this.maxCharacterCount))));
+        }
+    }
+    render() {
+        let hasError = false;
+        if (this.error) {
+            hasError = true;
+        }
+        else if (this.multiline &&
+            this.maxCharacterCount !== undefined &&
+            this.characterCount > this.maxCharacterCount) {
+            hasError = true;
+        }
+        return (index.h(index.Host, { key: '008387a60d49c0a4d303f7b6254c18ba109138c8', class: {
+                'xpl-input': true,
+                'xpl-input--disabled': !!this.disabled,
+                'xpl-input--error': hasError,
+                'xpl-input--readonly': !!this.readonly,
+                [`xpl-input--${this.type}`]: true,
+            } }, this.label && (index.h("label", { key: '73e44138ac4bcd5ab6f96de33d818ae0d0bdb8fb', class: "xpl-input-label", htmlFor: this._id }, this.label, this.description && index.h("small", { key: '85b33374df5ba7f1c002d1a5555a23013fd5f8f9' }, this.description))), this.renderInput(), (this.error?.length ?? 0) > 0 && (index.h("label", { key: '802f79003fe348f0d6927701b4becdf086dc207e', class: "xpl-input-error", htmlFor: this._id, id: `${this._id}-error` }, index.h("xpl-icon", { key: '3b43c9816359cfbfc0c11a8874a4b561d04986d1', icon: "circle-warning", size: 16 }), index.h("span", { key: '76fe2a5cb424eb17e5d7c9358f81d2ad36775903' }, this.error)))));
+    }
+    get el() { return index.getElement(this); }
+};
+
+function isInsideFixedPosition(element) {
+    if (!lifecycle.isBrowser()) {
+        return false;
+    }
+    let el = element.parentElement;
+    while (el && el !== document.body && el !== document.documentElement) {
+        if (getComputedStyle(el).position === 'fixed') {
+            return true;
+        }
+        el = el.parentElement;
+    }
+    return false;
+}
+function getNearestScrollableAncestor(element) {
+    if (!lifecycle.isBrowser()) {
+        return undefined;
+    }
+    let el = element.parentElement;
+    while (el && el !== document.body && el !== document.documentElement) {
+        const style = getComputedStyle(el);
+        const overflow = style.overflow + style.overflowX + style.overflowY;
+        if (/auto|scroll/.test(overflow)) {
+            return el;
+        }
+        el = el.parentElement;
+    }
+    return undefined;
+}
+
+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>`;
+const InputDate = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.valueChange = index.createEvent(this, "valueChange", 7);
+        this.hasErrorStateChanged = index.createEvent(this, "hasErrorStateChanged", 7);
+        this.rangeSelected = index.createEvent(this, "rangeSelected", 7);
+        this.dateFormat = 'Y-m-d';
+        this.mode = 'single';
+        this.flatpickrStaticLayout = false;
+        this.valueChanged = (event) => {
+            const target = event.target;
+            this.valueChange.emit(target.value);
+        };
+    }
+    onHasErrorStateChanged(newValue) {
+        this.hasErrorStateChanged.emit(newValue);
+    }
+    onValueChanged(newValue) {
+        this.flatpickrInstance?.setDate(newValue);
+    }
+    connectedCallback() {
+        queueMicrotask(() => this.ensureFlatpickr());
+    }
+    disconnectedCallback() {
+        this.flatpickrInstance?.destroy();
+        this.flatpickrInstance = undefined;
+        this.flatpickrStaticLayout = false;
+        this.unwrapStaleFlatpickrWrapper();
+    }
+    componentDidRender() {
+        this.ensureFlatpickr();
+    }
+    ensureFlatpickr() {
+        if (!lifecycle.isBrowser()) {
+            return;
+        }
+        if (this.flatpickrInstance || !this.input || !this.el.isConnected) {
+            return;
+        }
+        this.unwrapStaleFlatpickrWrapper();
+        this.initFlatpickr();
+    }
+    initFlatpickr() {
+        const { input } = this;
+        if (!input) {
+            return;
+        }
+        const insideFixed = isInsideFixedPosition(this.el);
+        this.flatpickrInstance = index$1.flatpickr(input, {
+            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) {
+                    const [start, end] = selectedDates;
+                    this.rangeSelected.emit({
+                        start,
+                        end,
+                    });
+                }
+            },
+        });
+        queueMicrotask(() => {
+            if (this.flatpickrStaticLayout !== insideFixed) {
+                this.flatpickrStaticLayout = insideFixed;
+            }
+        });
+    }
+    unwrapStaleFlatpickrWrapper() {
+        const { input } = this;
+        const wrapper = input?.parentElement;
+        if (!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 (index.h(index.Host, { key: 'ed469d24ccc404df6d361338c6f34b9a902c2a67', class: {
+                'xpl-input-date': true,
+                [`xpl-input-date--mode-${this.mode}`]: true,
+                'xpl-input-date--error': !!this.hasErrorState,
+                'xpl-input-date--flatpickr-static': this.flatpickrStaticLayout,
+            } }, index.h("div", { key: 'ab4798bd6bb4be6495050504eb8a606d80fe84dc', class: "xpl-input-wrapper" }, this.pre && (index.h("label", { key: '4bf483491d4a688564f745ef75b770e741177599', class: "xpl-input-pre", htmlFor: this.inputId }, this.pre)), index.h("input", { key: '99030b75c8fe9bb681d9d3c4ea44b16346316c7c', 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 ?? undefined;
+            }, onChange: (event) => {
+                this.valueChanged(event);
+            } }), index.h("xpl-icon", { key: 'fb4de593bb36664cd8f95518b5da622df545e437', class: "xpl-input-calendar", icon: "calendar", size: 24 }), this.post && (index.h("label", { key: '6835c6b4832918efa513e57c62ec5326f63d8c36', class: "xpl-input-post", htmlFor: this.inputId }, this.post)))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "hasErrorState": [{
+                "onHasErrorStateChanged": 0
+            }],
+        "value": [{
+                "onValueChanged": 0
+            }]
+    }; }
+};
+
+const InputFile = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.inputChange = index.createEvent(this, "inputChange", 7);
+        this.accept = '';
+        this.multiple = false;
+        this.hideTriggerOnSelect = false;
+        this.hideFileNames = false;
+        this.hideAcceptText = false;
+        this.files = null;
+        this.openFileDialog = () => {
+            if (this.disabled) {
+                return;
+            }
+            this.fileInput?.click();
+        };
+        this.handleFileChange = (event) => {
+            const target = event.target;
+            this.files = target.files ? Array.from(target.files) : null;
+        };
+        this.onRemoveFileByIndex = (fileIndex) => {
+            this.files = (this.files ?? []).filter((_, i) => i !== fileIndex);
+        };
+    }
+    onFilesChange(newFiles) {
+        this.inputChange.emit({
+            type: 'file',
+            value: newFiles,
+        });
+    }
+    async removeFileByIndex(fileIndex) {
+        this.onRemoveFileByIndex(fileIndex);
+    }
+    render() {
+        return (index.h(index.Host, { key: '62b134a3517ea8e5d9c0ba8a0f0c0ba56413a05b', class: {
+                'xpl-input-file': true,
+                'xpl-input-file--hide-trigger-on-select': !!this.hideTriggerOnSelect,
+                'xpl-input-file--disabled': !!this.disabled,
+            } }, index.h("span", { key: '8f3aa455cf7fe9f27dbab609969dfac1bf4b1a3a', class: {
+                'xpl-input-file__trigger-wrapper': true,
+                'xpl-input-file__trigger-wrapper--hidden': !!this.hideTriggerOnSelect && (this.files?.length ?? 0) > 0,
+            }, role: "button", tabIndex: 0, onClick: this.openFileDialog }, index.h("slot", { key: '3d5d42f659cd78b9f54e008113a2ff99ddaa4a03', name: "trigger" })), (this.files?.length ?? 0) > 0 && !this.hideFileNames && (index.h("ul", { key: 'd827f178ba04e03d8879b1cf81674226b3f265c7', class: "xpl-input-file__file-list" }, (this.files ?? []).map((file, fileIndex) => (index.h("li", { class: "xpl-input-file__file-item" }, index.h("span", { class: "xpl-input-file__file-name" }, file.name), index.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 && (index.h("span", { key: '3bc1ab3c72d4039a2635b9ceb4a22f4a98875632', class: "xpl-input-file__accept" }, "Accepted file types: ", this.accept)), index.h("input", { key: '23f6d50b87fe8e4b315670c73565bc50ca592ed5', onChange: this.handleFileChange, type: "file", ref: (el) => {
+                this.fileInput = el ?? undefined;
+            }, hidden: true, accept: this.accept, multiple: this.multiple, name: this.name })));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "files": [{
+                "onFilesChange": 0
+            }]
+    }; }
+};
+
+const InputSearch = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.blurEvent = index.createEvent(this, "blurEvent", 7);
+        this.focusEvent = index.createEvent(this, "focusEvent", 7);
+        this.inputEvent = index.createEvent(this, "inputEvent", 7);
+        this.search = index.createEvent(this, "search", 7);
+        this.valueChange = index.createEvent(this, "valueChange", 7);
+        this.hasAncestorForm = false;
+        this.ariaLabel = 'Search';
+        this.autocomplete = 'off';
+        this.disabled = false;
+        this.hasError = false;
+        this.hasVisibleLabel = false;
+        this.placeholder = 'Search';
+        this.readonly = false;
+        this.required = false;
+        this.shape = 'rounded';
+        this.value = '';
+        this.handleInnerFormSubmit = (event) => {
+            event.preventDefault();
+            if (this.disabled || this.readonly) {
+                return;
+            }
+            this.emitSearchCommit(this.value.trim());
+        };
+        this.handleClear = (event) => {
+            event.preventDefault();
+            if (this.disabled || this.readonly) {
+                return;
+            }
+            this.value = '';
+            this.valueChange.emit('');
+            this.inputEvent.emit('');
+            this.inputEl?.focus();
+        };
+        this.handleInput = (event) => {
+            const target = event.target;
+            this.value = target.value;
+            this.valueChange.emit(target.value);
+            this.inputEvent.emit(target.value);
+        };
+        this.handleKeyDown = (event) => {
+            if (event.key !== 'Enter')
+                return;
+            if (this.disabled || this.readonly) {
+                return;
+            }
+            const input = event.target;
+            if (input.form) {
+                return;
+            }
+            event.preventDefault();
+            this.emitSearchCommit(this.value.trim());
+        };
+        this.handleFocus = (event) => {
+            this.focusEvent.emit(event);
+        };
+        this.handleBlur = (event) => {
+            this.blurEvent.emit(event);
+        };
+    }
+    connectedCallback() {
+        this.syncAncestorFormFlag();
+    }
+    async setFocus() {
+        this.inputEl?.focus();
+    }
+    syncAncestorFormFlag() {
+        const root = this.el;
+        const next = Boolean(root && typeof root.closest === 'function' && root.closest('form'));
+        if (this.hasAncestorForm !== next) {
+            this.hasAncestorForm = next;
+        }
+    }
+    get hasValue() {
+        return this.value !== undefined && this.value.length > 0;
+    }
+    get resolvedInputAriaLabel() {
+        if (this.hasVisibleLabel) {
+            return undefined;
+        }
+        return (this.ariaLabel ?? '').trim() || 'Search';
+    }
+    get rendersInnerSearchForm() {
+        return !this.hasAncestorForm;
+    }
+    emitSearchCommit(detail) {
+        this.search.emit(detail);
+    }
+    renderShell() {
+        const shell = (index.h("div", { class: "xpl-input-search__shell" }, index.h("span", { class: "xpl-input-search__icon", "aria-hidden": "true" }, index.h("xpl-icon", { icon: "magnifier", size: 20 })), index.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 ?? undefined;
+            }, required: this.required, role: "searchbox", type: "text", value: this.value }), index.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" }, index.h("xpl-icon", { icon: "circle-xmark", size: 16 }))));
+        if (this.rendersInnerSearchForm) {
+            return (index.h("form", { class: "xpl-input-search__form", onSubmit: this.handleInnerFormSubmit }, shell));
+        }
+        return shell;
+    }
+    render() {
+        return (index.h(index.Host, { key: '017e5d3958dccf6ca1096cd623ffd49b302a5ab3', class: {
+                'xpl-input-search': true,
+                'xpl-input-search--disabled': this.disabled,
+                'xpl-input-search--error': this.hasError,
+                'xpl-input-search--has-value': this.hasValue,
+                'xpl-input-search--readonly': this.readonly,
+                'xpl-input-search--shape-box': this.shape === 'box',
+            } }, this.renderShell()));
+    }
+    get el() { return index.getElement(this); }
+};
+
+exports.xpl_input = Input;
+exports.xpl_input_date = InputDate;
+exports.xpl_input_file = InputFile;
+exports.xpl_input_search = InputSearch;

package/dist/cjs/xpl-large-card.cjs.entry.js

@@ -1,10 +1,27 @@
 'use strict';
 
-var index = require('./index-BaXVr8ux.js');
+var index = require('./index-3cBvw409.js');
+var slotPresence = require('./slot-presence-HmQUW2Ba.js');
 
+const GRAPH_CONTENT_SLOT = 'graph-content';
 const LargeCard = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        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) {
@@ -16,10 +33,52 @@ const LargeCard = class {
             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 = slotPresence.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 (index.h(index.Host, { key: '886078965cb1ca87fd9c4f45a8b06f089a4b2e04', role: "group", class: `xpl-large-card ${this.link ? 'xpl-large-card__link' : ''}`, tabindex: "0" }, index.h("dt", { key: '1c2006c9167b2d46262b222ace3c5e9135863783', class: "xpl-large-card__header" }, index.h("header", { key: '21ba4629c7e3d0d9dff98f9dde2ac4bc9f1f494e' }, index.h("slot", { key: 'd50991dc4fcca6c56c04c7cc9a401f0894035aa2', name: "title" }, this.name), this.link && (index.h("span", { key: '35b1b15786c1674f6d1797ec3b04da81b27d5d3a', class: "xpl-data-card__header-arrow" }, index.h("xpl-icon", { key: 'f52a7a39b3d044341296d88adb9d2bc07cdec9ab', icon: "chevron-right", size: 16 })))), this.description && (index.h("div", { key: 'bac9d6cec27272d277c991c81e651714603066a2', class: "xpl-large-card__description" }, this.description))), index.h("dd", { key: '9da3ca8ec575a6755f1f47065299ec3ab3e5169b', class: "xpl-large-card__body" }, hasContentSlot && index.h("slot", { key: '022da3c1e07c264441c58f7d42d6edca109a504d', name: contentSlot }))));
+        return (index.h(index.Host, { key: '1f4d73841c0645f6eaa784d5a684baf605fd249c', role: "group", class: `xpl-large-card ${this.link ? 'xpl-large-card__link' : ''}`, tabindex: "0" }, index.h("dt", { key: '37a067e460a49508251b44102fd8470caef01c95', class: "xpl-large-card__header" }, index.h("header", { key: '4ab9ba4d4bee0b82b7e5f51fec425caa23334bca' }, index.h("slot", { key: 'ce45a8dd99e027d1ce56c780d6304438524778b1', name: "title" }, this.name), this.link && (index.h("span", { key: '90c795212858e49ff947da8e91ccbeee357e92ef', class: "xpl-large-card__header-arrow" }, index.h("xpl-icon", { key: '459405641d21f234bc322f20745cdb5f81e4c60e', icon: "chevron-right", size: 16 })))), this.description && (index.h("div", { key: '7cffdab2f56ef65c097e254ae859b1314f96849f', class: "xpl-large-card__description" }, this.description))), index.h("dd", { key: '6454b51a6cc99af277c557b16a0e77877aa455d9', class: "xpl-large-card__body" }, this.graphContentPresent && index.h("slot", { key: 'c1ec933cef4a0098e69f408445de06ca32799911', name: GRAPH_CONTENT_SLOT }))));
     }
     get el() { return index.getElement(this); }
 };