import { r as registerInstance, c as createEvent, h, H as Host } from './index-b1696fed.js';
import { P as PdsLabel, a as assignDescription, m as messageId } from './pds-label-62469596.js';
import { b as danger } from './index-56752d25.js';

const baseCss = ":where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(div,label,p,span){color:var(--pine-color-text-default)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}";
const PdsInputStyle0 = baseCss;

const pdsInputCss = ":host{--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);--box-shadow-focus-error:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-red-300);--color-background-disabled:var(--pine-color-grey-100);--color-background-error:var(--pine-color-red-050);--color-border-active:var(--pine-color-grey-400);--color-border-default:var(--pine-color-grey-300);--color-border-disabled:var(--pine-color-grey-200);--color-border-error:var(--pine-color-red-600);--color-border-hover:var(--pine-color-grey-500);--color-text-default:var(--pine-color-grey-950);--color-text-disabled:var(--pine-color-grey-600);--color-text-error:var(--pine-color-red-600);--color-text-placeholder:var(--pine-color-grey-600);--color-text-placeholder-disabled:var(--pine-color-grey-400);--font-size-helper-message:var(--pine-font-size-085);--font-size-input-field:var(--pine-font-size-100);--font-size-label:var(--pine-font-size-100);--font-weight-helper-message:var(--pine-font-weight-normal);--font-weight-input-field:var(--pine-font-weight-normal);--font-weight-label:var(--pine-font-weight-medium);--line-height-label:var(--pine-line-height-150);--line-height-helper-message:var(--pine-line-height-125);--line-height-input-field:var(--pine-line-height-150);--spacing-field-padding-block:var(--pine-spacing-100);--spacing-input-field-padding-inline:var(--pine-spacing-200);--spacing-label-margin-block-end:var(--pine-spacing-100);--spacing-margin-top-helper-message:var(--pine-spacing-100);--spacing-icon-error-message:var(--pine-spacing-050);display:inline}.pds-input{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}label{font-size:var(--font-size-label);font-weight:var(--font-weight-label);line-height:var(--line-height-label);-webkit-margin-after:var(--spacing-label-margin-block-end);margin-block-end:var(--spacing-label-margin-block-end)}input{border:1px solid var(--color-border-default);border-radius:10px;font-size:var(--font-size-input-field);font-weight:var(--font-weight-input-field);line-height:var(--line-height-input-field);padding:var(--spacing-field-padding-block) var(--spacing-input-field-padding-inline);}input:disabled{background-color:var(--color-background-disabled);border-color:var(--color-border-disabled);color:var(--color-text-disabled);cursor:not-allowed;}input:disabled::-webkit-input-placeholder{color:var(--color-text-placeholder-disabled)}input:disabled::-moz-placeholder{color:var(--color-text-placeholder-disabled)}input:disabled::-moz-placeholder{color:var(--color-text-placeholder-disabled)}input:disabled:-ms-input-placeholder{color:var(--color-text-placeholder-disabled)}input:hover{border-color:var(--color-border-hover)}input:focus-visible{border-color:var(--color-border-active);-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}input::-webkit-input-placeholder{color:var(--color-text-placeholder)}input::-moz-placeholder{color:var(--color-text-placeholder)}input::-moz-placeholder{color:var(--color-text-placeholder)}input:-ms-input-placeholder{color:var(--color-text-placeholder)}input:has(~.pds-input__error-message){background-color:var(--color-background-error);border-color:var(--color-border-error)}input:has(~.pds-input__error-message):focus-visible{-webkit-box-shadow:var(--box-shadow-focus-error);box-shadow:var(--box-shadow-focus-error);outline:none}.pds-input__error-message,.pds-input__helper-message{font-size:var(--font-size-helper-message);font-weight:var(--font-weight-helper-message);line-height:var(--line-height-helper-message);-webkit-margin-after:0;margin-block-end:0;-webkit-margin-before:var(--spacing-margin-top-helper-message);margin-block-start:var(--spacing-margin-top-helper-message)}.pds-input__error-message{-ms-flex-align:center;align-items:center;color:var(--color-text-error);display:-ms-flexbox;display:flex;font-size:var(--font-size-helper-message);gap:var(--spacing-icon-error-message)}";
const PdsInputStyle1 = pdsInputCss;

const PdsInput = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.pdsInput = createEvent(this, "pdsInput", 7);
        this.onInputEvent = (ev) => {
            const input = ev.target;
            if (input) {
                this.value = input.value || '';
            }
            this.pdsInput.emit(ev);
        };
        this.autocomplete = undefined;
        this.componentId = undefined;
        this.disabled = undefined;
        this.errorMessage = undefined;
        this.helperMessage = undefined;
        this.invalid = undefined;
        this.label = undefined;
        this.name = undefined;
        this.placeholder = undefined;
        this.readonly = undefined;
        this.required = undefined;
        this.type = 'text';
        this.value = undefined;
    }
    render() {
        return (h(Host, { key: '2894ea5f48af1818f28ce05c63ec28ee6dff2f5d', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: '92ce53c22ca6eed66e33c1c50c8d0ff0a3b68b4c', class: "pds-input" }, h(PdsLabel, { key: '71be1b6dbaee982e199e482f1edc21b34621e1a3', htmlFor: this.componentId, text: this.label }), h("input", { key: '4ff1e2d8b3f5156a4f7ace72b168ec1f03959463', class: "pds-input__field", "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, disabled: this.disabled, id: this.componentId, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, type: this.type, value: this.value, onInput: this.onInputEvent }), this.helperMessage &&
            h("p", { key: 'b0b144c49182e233f59d442384a1904b7a8307cd', class: "pds-input__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
            h("p", { key: 'f66cc5c3b0463a4f7f62c54626692fa11f221568', class: "pds-input__error-message", id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'efaccf89df9ca61b12f48c25c57bc02074d405e8', icon: danger, size: "small" }), this.errorMessage))));
    }
};
PdsInput.style = PdsInputStyle0 + PdsInputStyle1;

export { PdsInput as pds_input };

//# sourceMappingURL=pds-input.entry.js.map