@xplortech/apollo-core 2.11.0 → 3.0.0

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

@@ -0,0 +1,525 @@
+'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 !== 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((this.label ?? '').trim());
+                const hasError = this.error !== undefined;
+                const hasErrorMessage = hasError && (this.error?.length ?? 0) > 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: 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 (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 !== undefined) {
+            hasError = true;
+        }
+        else if (this.multiline &&
+            this.maxCharacterCount !== undefined &&
+            this.characterCount > this.maxCharacterCount) {
+            hasError = true;
+        }
+        return (index.h(index.Host, { key: '94a5e19a36756ac43ebbe6d3996a2ffbf475da24', 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: 'd41b5e5245483e2ea235c910f85cd6a21b100dec', class: "xpl-input-label", htmlFor: this._id }, this.label, this.description && index.h("small", { key: 'c9d55823b8b97678b2f5f4374446c3693e6dceaa' }, this.description))), this.renderInput(), (this.error?.length ?? 0) > 0 && (index.h("label", { key: '20e5a1d2af06e571f0757aa60633438f79a6a17d', class: "xpl-input-error", htmlFor: this._id, id: `${this._id}-error` }, index.h("xpl-icon", { key: 'a193ee5f1d3e0d8479fa8dfd66ab27edeb400d30', icon: "circle-warning", size: 16 }), index.h("span", { key: 'acf686fe036d1a1e9cb944ff773dda86e90ff39a' }, 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: '768d9bffdb7431a48824590f9ae61f8e77735e98', 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: '5b3421bad3bc8474b3724fc7a4287ccf98bd1ba5', class: "xpl-input-wrapper" }, this.pre && (index.h("label", { key: 'f0e88d0052247c15decc6de2635db1fb847fdd94', class: "xpl-input-pre", htmlFor: this.inputId }, this.pre)), index.h("input", { key: '251ddfab7140c7a13fd2ef36d7baefe81ed3e716', 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: '6828c8024496963a2a480091a40326154e21d1f5', class: "xpl-input-calendar", icon: "calendar", size: 24 }), this.post && (index.h("label", { key: 'e08267b6ffc0d605b557e69784b54757621182c7', 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: 'baa52af5a8ee6222ff745cece6e59d9480165af6', class: {
+                'xpl-input-file': true,
+                'xpl-input-file--hide-trigger-on-select': !!this.hideTriggerOnSelect,
+                'xpl-input-file--disabled': !!this.disabled,
+            } }, index.h("span", { key: '802ed05f26bd1e2a618f5e09bea7370fe69a4718', 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: '487381f2b34d2ad528f1b32f976e5513c1e29c11', name: "trigger" })), (this.files?.length ?? 0) > 0 && !this.hideFileNames && (index.h("ul", { key: 'fe7b503a89a65af02cbb39b93b518b2dde790a34', 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: '6e5e54426f2b33858b374d09014ec0096fa43bb4', class: "xpl-input-file__accept" }, "Accepted file types: ", this.accept)), index.h("input", { key: '81d08e97d8d2c8a59640348e295261f9acd439cc', 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: '4a152d3a8db620391334488e1c6c3cdbe9250ba3', 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: '30865d2efaf693257afb21c768981e2785c81ad4', role: "group", class: `xpl-large-card ${this.link ? 'xpl-large-card__link' : ''}`, tabindex: "0" }, index.h("dt", { key: 'bf95f5c52d36b3aa9174222ea2f3bb7e788f5992', class: "xpl-large-card__header" }, index.h("header", { key: '5a18e7dfe1544b65fa13e9b918d06ca0fdabb9f2' }, index.h("slot", { key: '94e9bd081a2c1fe5eb57cb8cedd0ab1224bb5bb3', name: "title" }, this.name), this.link && (index.h("span", { key: '082622ba8e2446dc65fe4f37ee1e15bab1c8785d', class: "xpl-data-card__header-arrow" }, index.h("xpl-icon", { key: '407180586601126e1ea5fb2c6af006d109067b39', icon: "chevron-right", size: 16 })))), this.description && (index.h("div", { key: '381711e6390dd685b0951d7dd08faeb6f9ef34f3', class: "xpl-large-card__description" }, this.description))), index.h("dd", { key: '2cf8a71574bef72aee76720525e26288b92cecc2', class: "xpl-large-card__body" }, hasContentSlot && index.h("slot", { key: '03a58f57d713de2abad1b815a77c91f340ef1f0a', name: contentSlot }))));
+        return (index.h(index.Host, { key: '9fdddb5c8d02400545f57499c92af0ee0aa4be67', role: "group", class: `xpl-large-card ${this.link ? 'xpl-large-card__link' : ''}`, tabindex: "0" }, index.h("dt", { key: '3854e5f89efa2c968f7abeb8284c0ab8e3e31fda', class: "xpl-large-card__header" }, index.h("header", { key: '0057d377780108f886dae2d9a6a1f3d81748b5fc' }, index.h("slot", { key: '243d38d7635a2e288a1ec7f7894b772d5005acee', name: "title" }, this.name), this.link && (index.h("span", { key: 'f2ce2ff09a50471ee255bac8bda406908c272388', class: "xpl-large-card__header-arrow" }, index.h("xpl-icon", { key: '86233617aaf74a137d84639e1477c311671fad7b', icon: "chevron-right", size: 16 })))), this.description && (index.h("div", { key: 'ab0c0134a2468d22d122dfe810306d570beee8e8', class: "xpl-large-card__description" }, this.description))), index.h("dd", { key: '6fb1262327dc91fd0a982bd31ee7deaa94625e12', class: "xpl-large-card__body" }, this.graphContentPresent && index.h("slot", { key: 'b1e170a19004aad87015786307b926e58d031751', name: GRAPH_CONTENT_SLOT }))));
     }
     get el() { return index.getElement(this); }
 };