'use strict';

var index = require('./index-BUvWX8u2.js');
var form = require('./form-CpM5Z8q7.js');
var attributes = require('./attributes-oNMnBEnP.js');
var utils = require('./utils-7jx8T2mW.js');
var index$1 = require('./index-DGBoDsAL.js');

const pdsInputTokensCss = ":host{--pine-input-color-background-danger:var(--pine-color-red-050)}";

const labelCss = ":host{display:inline-block}:host([aria-disabled=true]) label{color:var(--pine-color-text-label-disabled)}:host([aria-readonly=true]) label{color:var(--pine-color-text-label-readonly)}label{color:var(--pine-color-text-label);font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}";

const pdsInputCss = ":host{--pds-input-background:var(--pine-color-background-container);--pds-input-border-color:var(--pine-color-border);--pds-input-border-color-hover:var(--pine-color-border-hover);--pds-input-border-color-disabled:var(--pine-color-border-disabled);--pds-input-border-radius:var(--pine-dimension-125);--pds-input-border-width:var(--pine-border-width-thin);--pds-input-padding-x:var(--pine-dimension-150);--pds-input-padding-y:calc(var(--pine-dimension-xs) - var(--pine-border-width));--pds-input-font:var(--pine-typography-body);--pds-input-text-color:var(--pine-color-text-strong);--pds-input-placeholder-color:var(--pine-color-text-placeholder);--pds-input-icon-color:var(--pine-color-text-secondary);--pds-input-disabled-background:var(--pine-color-background-container-disabled);--pds-input-disabled-text-color:var(--pine-color-text-disabled);--pds-input-error-color:var(--pine-color-text-message-danger);--pds-input-error-background:var(--pine-input-color-background-danger);--pds-input-error-border:var(--pine-color-border-danger);--pds-input-error-border-hover:var(--pine-color-border-danger-hover);--pds-input-addon-background:var(--pine-color-background-subtle);--pds-input-addon-color:var(--pine-color-text-secondary);--pds-input-field-min-height:var(--pine-dimension-450);--box-shadow-focus:0 0 0 1px var(--pine-color-background-container), 0 0 0 3px var(--pine-color-focus-ring);--box-shadow-focus-error:0 0 0 1px var(--pine-color-background-container), 0 0 0 3px var(--pine-color-focus-ring-danger);display:inline}:host pds-select::part(select){background-color:var(--pds-input-error-background);border-color:var(--pds-input-error-border)}:host::part(prefix),:host::part(suffix){-ms-flex-align:center;align-items:center;color:var(--pine-color-text-label-readonly);display:-ms-flexbox;display:flex;height:100%;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);white-space:nowrap;z-index:var(--pine-z-index-raised)}:host::part(prefix){border-end-start-radius:var(--pds-input-border-radius);-webkit-border-end:var(--pine-border-width-none);border-inline-end:var(--pine-border-width-none);border-start-start-radius:var(--pds-input-border-radius);inset-inline-start:var(--pds-input-padding-x)}:host::part(suffix){border-end-end-radius:var(--pds-input-border-radius);-webkit-border-start:var(--pine-border-width-none);border-inline-start:var(--pine-border-width-none);border-start-end-radius:var(--pds-input-border-radius);inset-inline-end:var(--pds-input-padding-x)}:host::part(prepend),:host::part(append){-ms-flex-align:center;align-items:center;background-color:var(--pds-input-addon-background);border:var(--pds-input-border-width) solid var(--pds-input-border-color);color:var(--pds-input-addon-color);display:-ms-flexbox;display:flex;overflow:visible}:host::part(prepend){border-end-start-radius:var(--pds-input-border-radius);-webkit-border-end:var(--pine-border-width-none);border-inline-end:var(--pine-border-width-none);border-start-start-radius:var(--pds-input-border-radius)}:host::part(append){border-end-end-radius:var(--pds-input-border-radius);-webkit-border-start:var(--pine-border-width-none);border-inline-start:var(--pine-border-width-none);border-start-end-radius:var(--pds-input-border-radius)}:host([has-prepend]) ::slotted(pds-button[slot=prepend]){--pds-button-background:var(--pds-input-addon-background);--pds-button-border:var(--pine-border-width-none);--pds-button-border-radius:var(--pine-dimension-none);--pds-button-border-radius-end-end:var(--pine-dimension-none);--pds-button-border-radius-start-end:var(--pine-dimension-none);--pds-button-border-radius-start-start:var(--pds-input-border-radius);--pds-button-border-radius-end-start:var(--pds-input-border-radius);--pds-button-min-height:calc(var(--pine-dimension-450) - calc(2 * var(--pine-border-width)));--pds-button-box-shadow-focus:0 0 0 3px var(--pine-color-focus-ring);--pds-button-outline-focus:none}:host([has-append]) ::slotted(pds-button[slot=append]){--pds-button-background:var(--pds-input-addon-background);--pds-button-border:var(--pine-border-width-none);--pds-button-border-radius:var(--pine-dimension-none);--pds-button-border-radius-end-start:var(--pine-dimension-none);--pds-button-border-radius-start-start:var(--pine-dimension-none);--pds-button-border-radius-start-end:var(--pds-input-border-radius);--pds-button-border-radius-end-end:var(--pds-input-border-radius);--pds-button-min-height:calc(var(--pine-dimension-450) - calc(2 * var(--pine-border-width)));--pds-button-box-shadow-focus:0 0 0 3px var(--pine-color-focus-ring);--pds-button-outline-focus:none}:host([has-prepend]) ::slotted(pds-select[slot=prepend]){--pds-select-background:var(--pds-input-addon-background);--pds-select-border:var(--pine-border-width-none);--pds-select-border-radius-end-end:var(--pine-dimension-none);--pds-select-border-radius-end-start:var(--pds-input-border-radius);--pds-select-border-radius-start-end:var(--pine-dimension-none);--pds-select-border-radius-start-start:var(--pds-input-border-radius);--pds-select-min-height:calc(var(--pine-dimension-450) - calc(2 * var(--pine-border-width)))}:host([has-append]) ::slotted(pds-select[slot=append]){--pds-select-background:var(--pds-input-addon-background);--pds-select-border:var(--pine-border-width-none);--pds-select-border-radius-end-end:var(--pds-input-border-radius);--pds-select-border-radius-end-start:var(--pine-dimension-none);--pds-select-border-radius-start-end:var(--pds-input-border-radius);--pds-select-border-radius-start-start:var(--pine-dimension-none);--pds-select-min-height:calc(var(--pine-dimension-450) - calc(2 * var(--pine-border-width)))}:host([aria-readonly=true]) input{background-color:var(--pine-color-background-container-disabled);color:var(--pine-color-text-readonly)}:host([aria-disabled=true])::part(prepend),:host([aria-disabled=true])::part(append){background-color:var(--pds-input-disabled-background);border:var(--pds-input-border-width) solid var(--pds-input-border-color-disabled)}:host([full-width=true]){width:100%}:host([invalid=true])::part(prepend),:host([invalid=true])::part(append){background-color:var(--pds-input-error-background);border:var(--pds-input-border-width) solid var(--pds-input-error-border)}:host([highlight]:not([disabled]):not([aria-disabled=true]):not([invalid]):not([aria-readonly=true])){--pds-input-background:var(--pine-color-accent-disabled);--pds-input-border-color:var(--pine-color-accent);--pds-input-border-color-hover:var(--pine-color-accent-hover);--pds-input-text-color:var(--pine-color-text-accent)}:host([highlight]:not([disabled]):not([aria-disabled=true]):not([invalid]):not([aria-readonly=true]))::part(prefix),:host([highlight]:not([disabled]):not([aria-disabled=true]):not([invalid]):not([aria-readonly=true]))::part(suffix){color:var(--pine-color-text-accent)}:host([highlight]:not([disabled]):not([aria-disabled=true]):not([invalid]):not([aria-readonly=true])) .pds-input__field:focus-visible{outline-color:var(--pine-color-focus-ring)}.pds-input{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.pds-input__label-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-input__label{color:var(--pine-color-text-strong);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-input__label-wrapper .pds-input__label{-webkit-margin-after:0;margin-block-end:0}.pds-input__action{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs)}.pds-input__field-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;position:relative;width:100%}.pds-input__field-wrapper.has-prefix .pds-input__field{-webkit-padding-start:calc(2 * var(--pds-input-padding-x) + var(--prefix-width, 1em));padding-inline-start:calc(2 * var(--pds-input-padding-x) + var(--prefix-width, 1em))}.pds-input__field-wrapper.has-suffix .pds-input__field{-webkit-padding-end:calc(2 * var(--pds-input-padding-x) + var(--suffix-width, 1em));padding-inline-end:calc(2 * var(--pds-input-padding-x) + var(--suffix-width, 1em))}.pds-input__field-wrapper.has-prepend .pds-input__field{border-end-start-radius:var(--pine-dimension-none);border-start-start-radius:var(--pine-dimension-none)}.pds-input__field-wrapper.has-append .pds-input__field{border-end-end-radius:var(--pine-dimension-none);border-start-end-radius:var(--pine-dimension-none)}.pds-input__field{background:var(--pds-input-background);border:var(--pds-input-border-width) solid var(--pds-input-border-color);border-radius:var(--pds-input-border-radius);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pds-input-text-color);-ms-flex:1;flex:1;font:var(--pds-input-font);letter-spacing:var(--pine-letter-spacing);min-height:var(--pds-input-field-min-height);min-width:var(--pine-dimension-none);padding:var(--pds-input-padding-y) var(--pds-input-padding-x);-webkit-transition:border-color var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease;width:100%}.pds-input__field:hover:not(:disabled){border-color:var(--pds-input-border-color-hover)}.pds-input__field:disabled{background:var(--pds-input-disabled-background);border-color:var(--pine-color-border-disabled);color:var(--pds-input-disabled-text-color);cursor:not-allowed}.pds-input__field:disabled::-webkit-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-input__field:disabled::-moz-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-input__field:disabled:-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-input__field:disabled::-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-input__field:disabled::placeholder{color:var(--pine-color-text-placeholder-disabled)}.has-error .pds-input__field:hover:not(:disabled){border-color:var(--pds-input-error-border-hover)}:host-context([data-theme=dark]) .has-error .pds-input__field:hover:not(:disabled){border-color:var(--pine-color-red-950)}.pds-input__field:focus-visible:not(.has-error){border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width);position:relative;z-index:1}:host([has-prepend]) .pds-input__field:focus-visible:not(.has-error),:host([has-append]) .pds-input__field:focus-visible:not(.has-error),:host([has-prefix]) .pds-input__field:focus-visible:not(.has-error),:host([has-suffix]) .pds-input__field:focus-visible:not(.has-error){outline-offset:var(--pine-dimension-none)}.pds-input__field::-webkit-input-placeholder{color:var(--pds-input-placeholder-color)}.pds-input__field::-moz-placeholder{color:var(--pds-input-placeholder-color)}.pds-input__field:-ms-input-placeholder{color:var(--pds-input-placeholder-color)}.pds-input__field::-ms-input-placeholder{color:var(--pds-input-placeholder-color)}.pds-input__field::placeholder{color:var(--pds-input-placeholder-color)}.pds-input__field:-moz-placeholder-shown{text-overflow:ellipsis}.pds-input__field:-ms-input-placeholder{text-overflow:ellipsis}.pds-input__field:placeholder-shown{text-overflow:ellipsis}.has-error .pds-input__field{background-color:var(--pds-input-error-background);border-color:var(--pds-input-error-border)}:host-context([data-theme=dark]) .has-error .pds-input__field{background-color:var(--pine-color-red-950)}.has-error .pds-input__field:focus-visible{outline-color:var(--pine-color-focus-ring-danger);position:relative;z-index:1}.pds-input__error-message,.pds-input__helper-message{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-after:var(--pine-dimension-none);margin-block-end:var(--pine-dimension-none);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-input__error-message{color:var(--pds-input-error-color);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-input__error-message pds-icon{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-input__field::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;background-color:var(--pds-input-placeholder-color);cursor:pointer;height:var(--pine-dimension-sm);-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.646 3.646a.5.5 0 0 1 .708 0L8 7.293l3.646-3.647a.5.5 0 0 1 .708.708L8.707 8l3.647 3.646a.5.5 0 0 1-.708.708L8 8.707l-3.646 3.647a.5.5 0 0 1-.708-.708L7.293 8 3.646 4.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.646 3.646a.5.5 0 0 1 .708 0L8 7.293l3.646-3.647a.5.5 0 0 1 .708.708L8.707 8l3.647 3.646a.5.5 0 0 1-.708.708L8 8.707l-3.646 3.647a.5.5 0 0 1-.708-.708L7.293 8 3.646 4.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\");-webkit-mask-size:contain;mask-size:contain;width:var(--pine-dimension-sm)}";

const PdsInput = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.pdsBlur = index.createEvent(this, "pdsBlur");
        this.pdsChange = index.createEvent(this, "pdsChange");
        this.pdsFocus = index.createEvent(this, "pdsFocus");
        this.pdsInput = index.createEvent(this, "pdsInput");
        this.pdsKeyDown = index.createEvent(this, "pdsKeyDown");
        this.inheritedAttributes = {};
        this.isComposing = false;
        this.hasLoaded = false;
        /**
         * If true, the input has prefix content (non-focusable)
         */
        this.hasPrefix = false;
        /**
         * If true, the input has suffix content (non-focusable)
         */
        this.hasSuffix = false;
        /**
         * If true, the input has prepend content (focusable)
         */
        this.hasPrepend = false;
        /**
         * If true, the input has append content (focusable)
         */
        this.hasAppend = false;
        /**
         * If true, the input has action content in the label area
         */
        this.hasAction = false;
        /**
         * Determines the type of control that will be displayed
         * `'email'`, `'number'`, `'password'`, `'tel'`, `'text'`, `'url'`
         * @defaultValue "text"
         */
        this.type = 'text';
        /**
         * The value of the input.
         */
        this.value = '';
        /**
         * Determines if the input has focus.
         */
        this.hasFocus = false;
        this.onInputEvent = (ev) => {
            const input = ev.target;
            if (input) {
                this.value = input.value || '';
            }
            this.emitInputChange(ev);
        };
        this.onChangeEvent = (ev) => {
            this.emitValueChange(ev);
        };
        this.onBlurEvent = (ev) => {
            this.hasFocus = false;
            if (this.focusedValue !== this.value) {
                /**
                 * Emits the `pdsChange` event when the input value
                 * is different than the value when the input was focused.
                 */
                this.emitValueChange(ev);
            }
            this.pdsBlur.emit(ev);
        };
        this.onFocusEvent = (ev) => {
            this.hasFocus = true;
            this.focusedValue = this.value;
            this.pdsFocus.emit(ev);
        };
        this.onCompositionStart = () => {
            this.isComposing = true;
        };
        this.onCompositionEnd = () => {
            this.isComposing = false;
        };
        this.onKeyDownEvent = (ev) => {
            this.pdsKeyDown.emit(ev);
        };
    }
    /**
     * Sets focus on the native `input` in the `pds-input`. Use this method instead of the global
     * `input.focus()`.
     */
    async setFocus() {
        if (this.nativeInput) {
            this.nativeInput.focus();
        }
    }
    observeAddonResize() {
        var _a;
        if (typeof ResizeObserver === 'undefined')
            return;
        // Disconnect existing observer before creating a new one
        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
        this.resizeObserver = new ResizeObserver(() => {
            this.updateAddonWidths();
        });
        if (this.prefixEl) {
            this.resizeObserver.observe(this.prefixEl);
        }
        if (this.suffixEl) {
            this.resizeObserver.observe(this.suffixEl);
        }
    }
    updateAddonWidths() {
        requestAnimationFrame(() => {
            if (this.prefixEl) {
                const prefixWidth = this.prefixEl.offsetWidth;
                this.el.style.setProperty('--prefix-width', `${prefixWidth}px`);
            }
            if (this.suffixEl) {
                const suffixWidth = this.suffixEl.offsetWidth;
                this.el.style.setProperty('--suffix-width', `${suffixWidth}px`);
            }
        });
    }
    renderPrefix() {
        const hasPrefix = this.el.querySelector('[slot="prefix"]') !== null;
        if (hasPrefix) {
            return (index.h("div", { class: "pds-input__prefix", part: "prefix", ref: (el) => this.prefixEl = el }, index.h("slot", { name: "prefix", onSlotchange: () => this.updateAddonWidths() })));
        }
        return null;
    }
    renderSuffix() {
        const hasSuffix = this.el.querySelector('[slot="suffix"]') !== null;
        if (hasSuffix) {
            return (index.h("div", { class: "pds-input__suffix", part: "suffix", ref: (el) => this.suffixEl = el }, index.h("slot", { name: "suffix", onSlotchange: () => this.updateAddonWidths() })));
        }
        return null;
    }
    renderPrepend() {
        const hasPrepend = this.el.querySelector('[slot="prepend"]') !== null;
        if (hasPrepend) {
            return (index.h("div", { class: "pds-input__prepend", part: "prepend" }, index.h("slot", { name: "prepend" })));
        }
        return null;
    }
    renderAppend() {
        const hasAppend = this.el.querySelector('[slot="append"]') !== null;
        if (hasAppend) {
            return (index.h("div", { class: "pds-input__append", part: "append" }, index.h("slot", { name: "append" })));
        }
        return null;
    }
    renderAction() {
        const hasAction = this.el.querySelector('[slot="action"]') !== null;
        if (hasAction) {
            return (index.h("div", { class: "pds-input__action", part: "action" }, index.h("slot", { name: "action" })));
        }
        return null;
    }
    componentWillLoad() {
        this.inheritedAttributes = Object.assign({}, attributes.inheritAriaAttributes(this.el));
        this.hasPrefix = this.el.querySelector('[slot="prefix"]') !== null;
        this.hasSuffix = this.el.querySelector('[slot="suffix"]') !== null;
        this.hasPrepend = this.el.querySelector('[slot="prepend"]') !== null;
        this.hasAppend = this.el.querySelector('[slot="append"]') !== null;
        this.hasAction = this.el.querySelector('[slot="action"]') !== null;
        // Store the original pdsInput event emitter
        this.originalPdsInput = this.pdsInput;
    }
    connectedCallback() {
        // Initialize ElementInternals for form association (only once per element instance)
        if (this.el.attachInternals && !this.internals) {
            this.internals = this.el.attachInternals();
        }
        // Re-establish ResizeObserver after DOM reconnection
        // Only run if component has already loaded (refs are available)
        if (this.hasLoaded && !this.resizeObserver) {
            this.updateAddonWidths();
            this.observeAddonResize();
        }
    }
    disconnectedCallback() {
        var _a;
        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
        this.resizeObserver = undefined;
    }
    componentDidLoad() {
        this.hasLoaded = true;
        this.debounceChanged();
        this.updateAddonWidths();
        this.observeAddonResize();
        // Set initial form value
        this.updateFormValue();
    }
    debounceChanged() {
        const { pdsInput, debounce, originalPdsInput } = this;
        /**
         * If debounce is undefined, we have to manually revert the pdsInput emitter in case
         * debounce used to be set to a number. Otherwise, the event would stay debounced.
         */
        this.pdsInput = debounce === undefined ? originalPdsInput !== null && originalPdsInput !== void 0 ? originalPdsInput : pdsInput : utils.debounceEvent(pdsInput, debounce);
    }
    valueChanged() {
        const nativeInput = this.nativeInput;
        const value = this.getValue();
        if (nativeInput && nativeInput.value !== value && !this.isComposing) {
            nativeInput.value = value;
        }
        // Update form value when value changes
        this.updateFormValue();
    }
    getValue() {
        return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();
    }
    /**
     * Emits a pdsChange event
     */
    emitValueChange(event) {
        const { value } = this;
        const newValue = value == null ? value : value.toString();
        this.focusedValue = newValue;
        this.pdsChange.emit({ value: newValue, event });
    }
    /**
     * Emits a `pdsInput` event
     */
    emitInputChange(event) {
        const { value } = this;
        // Checks for both null and undefined values
        const newValue = value == null ? value : value.toString();
        this.pdsInput.emit({ value: newValue, event });
    }
    /**
     * Updates the form value using ElementInternals API
     */
    updateFormValue() {
        if (form.isSpecTest())
            return;
        if (this.internals && this.internals.setFormValue) {
            const value = this.getValue();
            this.internals.setFormValue(value || null);
            // Set validity based on native input validation
            if (this.nativeInput && this.internals && this.internals.setValidity) {
                this.internals.setValidity(this.nativeInput.validity, this.nativeInput.validationMessage, this.nativeInput);
            }
        }
    }
    /**
     * Form Associated Custom Elements API: Called when the form is reset
     */
    formResetCallback() {
        this.value = '';
        this.updateFormValue();
    }
    /**
     * Form Associated Custom Elements API: Called when the form is disabled
     */
    formDisabledCallback(disabled) {
        this.disabled = disabled;
    }
    /**
     * Form Associated Custom Elements API: Called to restore form state
     */
    formStateRestoreCallback(state) {
        if (typeof state === 'string') {
            this.value = state;
        }
        else if (state instanceof FormData && this.name) {
            // Extract value from FormData using the input's name
            const value = state.get(this.name);
            if (typeof value === 'string') {
                this.value = value;
            }
        }
    }
    render() {
        const { componentId, disabled, errorMessage, helperMessage, invalid = false, label, } = this;
        const value = this.getValue();
        const inputWrapperClasses = {
            'pds-input__field-wrapper': true,
            'has-focus': this.hasFocus,
            'has-error': invalid || !!errorMessage,
            'is-disabled': disabled,
            'has-prefix': this.hasPrefix,
            'has-suffix': this.hasSuffix,
            'has-prepend': this.hasPrepend,
            'has-append': this.hasAppend,
        };
        return (index.h(index.Host, { key: 'ecf4cc212e5c3ebc18082b790803e6b2ccb8ca77', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-prefix": this.hasPrefix ? 'true' : null, "has-suffix": this.hasSuffix ? 'true' : null, "has-prepend": this.hasPrepend ? 'true' : null, "has-append": this.hasAppend ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null, "full-width": this.fullWidth ? 'true' : null }, index.h("div", { key: 'acdf92a30068fc04a17816ec6d85295b47e512ee', class: "pds-input" }, label && (index.h("div", { key: '4569f0b3761db89e85a090eff6af1c47cb562115', class: {
                'pds-input__label-wrapper': true,
                'visually-hidden': this.hideLabel,
            } }, index.h("label", { key: '90b0a863d78115fa158429db11548fc2a9ee5ae6', htmlFor: componentId, class: "pds-input__label" }, index.h("span", { key: '3d440aaafc4daeffe45152cd23d27472d7ebf85a' }, label, this.required && index.h("span", { key: 'c7bf6ef6191e961a106b8885cab604aa89730eba', class: "pds-input__required-indicator" }, " *"))), !this.hideLabel && this.renderAction())), index.h("div", { key: '81f0b8a347bc9a06c753b9f31f5e30ac78e45adb', class: inputWrapperClasses }, this.renderPrepend(), this.renderPrefix(), index.h("input", Object.assign({ key: '3785b396bf9174766973e8b19028e4dcecde19d9', ref: (input) => (this.nativeInput = input), class: "pds-input__field", "aria-describedby": form.assignDescription(componentId, invalid, helperMessage), "aria-invalid": invalid ? "true" : undefined, autocomplete: this.autocomplete, disabled: disabled, id: componentId, max: this.max, maxlength: this.maxlength, min: this.min, minlength: this.minlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, step: this.step, type: this.type, value: value, onInput: this.onInputEvent, onChange: this.onChangeEvent, onBlur: this.onBlurEvent, onFocus: this.onFocusEvent, onKeyDown: this.onKeyDownEvent, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.renderSuffix(), this.renderAppend()), helperMessage && (index.h("p", { key: 'e9e4aa936346811e0a5ca0fa5107f548b52fcc99', class: "pds-input__helper-message", id: form.messageId(componentId, 'helper') }, helperMessage)), errorMessage && (index.h("p", { key: 'ef3694246fa3d8f818da438e7ec4411dd56b084c', class: "pds-input__error-message", id: form.messageId(componentId, 'error') }, index.h("pds-icon", { key: '0e52079db701ca720cfa4d474107e55c85df5052', icon: index$1.danger, size: "small" }), errorMessage)))));
    }
    static get formAssociated() { return true; }
    get el() { return index.getElement(this); }
    static get watchers() { return {
        "debounce": ["debounceChanged"],
        "value": ["valueChanged"]
    }; }
};
PdsInput.style = pdsInputTokensCss + (labelCss + pdsInputCss);

exports.pds_input = PdsInput;
//# sourceMappingURL=pds-input.entry.cjs.js.map
