@postnord/pn-marketweb-components 4.1.0 → 4.1.2

package/umd/modules/@postnord/web-components/components/pn-input.js

@@ -2,381 +2,4 @@
  * Built with Stencil
  * By PostNord.
  */
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { u as uuidv4, k as awaitTopbar, e as en } from './helpers.js';
-import { a as alert_exclamation_circle } from './alert_exclamation_circle.js';
-import { c as check } from './check.js';
-import { c as close } from './close.js';
-import { d as defineCustomElement$4 } from './pn-button2.js';
-import { d as defineCustomElement$3 } from './pn-icon2.js';
-import { d as defineCustomElement$2 } from './pn-spinner2.js';
-
-const icon$1 = '<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M1.81 11.727a1 1 0 0 1 1.363.378c.29.513.835 1.343 1.7 2.174a9.5 9.5 0 0 0 3.457 2.128c1.03.361 2.244.593 3.67.593s2.64-.232 3.67-.593a9.5 9.5 0 0 0 3.458-2.128 9.7 9.7 0 0 0 1.698-2.174 1 1 0 0 1 1.742.984 11.5 11.5 0 0 1-1.445 2.001l1.686 2.322a1 1 0 1 1-1.618 1.175l-1.537-2.116a11.4 11.4 0 0 1-2.453 1.48l.763 2.785a1 1 0 1 1-1.928.528l-.73-2.661c-.993.251-2.093.397-3.306.397s-2.313-.146-3.306-.397l-.73 2.661a1 1 0 1 1-1.928-.528l.763-2.786a11.4 11.4 0 0 1-2.453-1.479L2.81 18.587a1 1 0 0 1-1.618-1.175l1.686-2.322a11.5 11.5 0 0 1-1.445-2 1 1 0 0 1 .379-1.363" clip-rule="evenodd"/></svg>';
-const preview_off = icon$1;
-
-const icon = '<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12 7c-5.382 0-7.908 3.33-8.758 4.775a.43.43 0 0 0 0 .45C4.092 13.67 6.618 17 12 17s7.908-3.33 8.758-4.775a.43.43 0 0 0 0-.45C19.908 10.33 17.382 7 12 7M1.518 10.761C2.55 9.005 5.618 5 12 5s9.45 4.005 10.482 5.761a2.43 2.43 0 0 1 0 2.478C21.45 14.995 18.382 19 12 19s-9.45-4.005-10.482-5.761a2.43 2.43 0 0 1 0-2.478M8 12a4 4 0 1 1 8 0 4 4 0 0 1-8 0m4-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4" clip-rule="evenodd"/></svg>';
-const preview_on = icon;
-
-const translations = {
-    SHOW: {
-        sv: 'Visa',
-        en: 'Show',
-        da: 'At vise',
-        fi: 'Näytä',
-        no: 'Vise',
-    },
-    HIDE: {
-        sv: 'Dölj',
-        en: 'Hide',
-        da: 'Skjule',
-        fi: 'Piilottaa',
-        no: 'Gjemme seg',
-    },
-    CLEAR: {
-        sv: 'Rensa',
-        en: 'Clear',
-        da: 'Klar',
-        fi: 'Asia selvä',
-        no: 'Klar',
-    },
-};
-
-const pnInputCss = "pn-input{display:inline-flex;flex-direction:column}pn-input .pn-input-label{cursor:pointer;display:flex;justify-content:space-between;align-items:flex-end;font-weight:400;color:#2d2013;margin:0 0 0.25em 0;gap:0.5em;-webkit-tap-highlight-color:transparent;transition-property:color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-input .pn-input-label{transition-duration:0s;transition-delay:0s}}pn-input .pn-input-label>span{font-size:0.875em}pn-input .pn-input-group{position:relative}pn-input .pn-input-element{--pn-input-offset-left:0em;--pn-input-offset-right:0em;color:#2d2013;background-color:#ffffff;border:0.0625em solid #969087;border-radius:0.5em;padding:0.75em;font-family:inherit;font-size:1em;font-weight:500;line-height:1.5em;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}pn-input .pn-input-element:-webkit-autofill,pn-input .pn-input-element:-webkit-autofill:hover,pn-input .pn-input-element:-webkit-autofill:focus,pn-input .pn-input-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #e0f8ff inset;-webkit-text-fill-color:#2d2013}pn-input .pn-input-element{outline:0.2rem solid transparent;outline-offset:0.2rem}pn-input .pn-input-element:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}pn-input .pn-input-element{transition-property:outline-color, background-color, border-color, color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-input .pn-input-element{transition-duration:0s;transition-delay:0s}}pn-input .pn-input-element::placeholder{color:#5e554a;font-weight:normal}pn-input .pn-input-element:hover{border-color:#005d92}pn-input .pn-input-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}pn-input .pn-input-element{width:100%;padding-left:calc(var(--pn-input-offset-left) + 0.75em);padding-right:calc(var(--pn-input-offset-right) + 0.75em)}pn-input .pn-input-element:read-only{border-color:#ffffff}pn-input .pn-input-element:disabled~.pn-input-eyecandy>pn-icon>.pn-icon-svg>path{fill:#969087}pn-input .pn-input-element::-webkit-calendar-picker-indicator{visibility:hidden;display:none}pn-input .pn-input-element::-webkit-textfield-decoration-container,pn-input .pn-input-element::-webkit-search-cancel-button,pn-input .pn-input-element::-webkit-inner-spin-button,pn-input .pn-input-element::-webkit-outer-spin-button,pn-input .pn-input-element::-webkit-search-decoration{-webkit-appearance:none;-moz-appearance:none;appearance:none}pn-input .pn-input-element[type=number]{appearance:textfield}pn-input .pn-input-eyecandy{position:absolute;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:0.5em;height:1.5em}pn-input .pn-input-eyecandy[data-prefix]{left:0.75em}pn-input .pn-input-eyecandy[data-suffix]{right:0.75em}pn-input .pn-input-text{color:#5e554a;font-weight:400;line-height:1.5em}pn-input .pn-input-message{color:#5e554a;font-size:0.875em;font-weight:400;margin:0.25em 0 0 0;display:flex;flex-direction:column;gap:0.25em}pn-input .pn-input-message[hidden],pn-input .pn-input-message>span[hidden]{display:none}pn-input .pn-input[data-error]>.pn-input-label{color:#a70707}pn-input .pn-input[data-error]>.pn-input-group>.pn-input-element{border-color:#a70707}pn-input .pn-input[data-error]>.pn-input-group>.pn-input-element:hover{border-color:#500715}pn-input .pn-input[data-error]>.pn-input-group>.pn-input-element:focus-visible{background-color:#ffffff;border-color:#a70707;outline-color:#a70707}pn-input .pn-input[data-error]>.pn-input-message[role=alert]{color:#a70707}pn-input .pn-input[data-valid]>.pn-input-label{color:#005e41}pn-input .pn-input[data-valid]>.pn-input-group>.pn-input-element{border-color:#005e41}pn-input .pn-input[data-valid]>.pn-input-group>.pn-input-element:hover{border-color:#002f24}pn-input .pn-input[data-valid]>.pn-input-group>.pn-input-element:focus-visible{background-color:#ffffff;border-color:#005e41;outline-color:#005e41}";
-
-const PnInput$1 = /*@__PURE__*/ proxyCustomElement(class PnInput extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-    }
-    id = `pn-input-${uuidv4()}`;
-    idMessage = `${this.id}-message`;
-    prefix;
-    suffix;
-    mo;
-    get hostElement() { return this; }
-    offsetLeft = 0;
-    offsetRight = 0;
-    showHelperSlot = false;
-    showErrorSlot = false;
-    showPassword = false;
-    togglePassword() {
-        this.showPassword = !this.showPassword;
-    }
-    /** Text label placed above the input field. */
-    label;
-    /** Text message placed underneath the input field. */
-    helpertext;
-    /**
-     * Provide a unique HTML id to connect the input with the label.
-     * A unique uuid ID will be generated if this field is left empty.
-     **/
-    inputid = this.id;
-    /** Set the value of the input. */
-    value = '';
-    /**
-     * Set the language manually for the translations of show/hide/clear button text.
-     * Not needed if you have the pntopbar on the page.
-     **/
-    language = null;
-    /**
-     * Select an icon to display before the input field value.
-     * `icon` takes precedence over the `text-prefix` prop.
-     *
-     * @see {@link textPrefix}
-     * @category Visual
-     **/
-    icon;
-    /**
-     * Set a small text before the input field value.
-     * Cannot be used together with an `icon` at the same time.
-     *
-     * @see {@link icon}
-     * @see {@link textSuffix}
-     * @category Visual
-     **/
-    textPrefix;
-    /**
-     * Set a small text after the input field value.
-     * Cannot be used with the `text-prefix` prop at the same time.
-     *
-     * @see {@link textPrefix}
-     * @category Visual
-     **/
-    textSuffix;
-    /** pn-input supports: `text`, `password`, `url`, `tel`, `search`, `number` & `email`. @category HTML input */
-    type = 'text';
-    /**
-     * HTML input name. Setting a name will help the browser understand what type of data the input have
-     * and can better assist with autofill data based on previous entires much better.
-     *
-     * @category HTML input
-     **/
-    name;
-    /**
-     * Provide a placeholder text. Remember that this is no replacement for a label.
-     * The placeholder should be a nice addition to the label/helpertext, not important information.
-     *
-     * @category HTML input
-     **/
-    placeholder;
-    /**
-     * Let the browser know what type of autocorrects the input should use.
-     * Works much better if a `name` and `inputid` is supplied.
-     * @see {@link name}
-     * @see {@link inputid}
-     *
-     * @category HTML input */
-    autocomplete;
-    /** The maximum number of characters the user should be able to add, also adds a visible counter. @category HTML input */
-    maxlength;
-    /**
-     * Hint the browser about what type of virtual keyboard should be used.
-     * The browser will be able to decide this on its own most of the time,
-     * especially if you use the `type`, `name` and `inputid` props.
-     *
-     * Leave empty or with a `''` value if you want the browsers default behaviour (`text`).
-     *
-     * @category HTML input
-     **/
-    inputmode;
-    /** Point to a datalist element for this input. @category HTML input */
-    list;
-    /** Pattern prop. @category HTML input*/
-    pattern;
-    /** Set the `min` value of the `number` input. @category HTML input */
-    min;
-    /** Set the `max` value of the `number` input. @category HTML input */
-    max;
-    /** Set a `step` for the number input. @category HTML input */
-    step;
-    /** While you can use the `aria-label`, using a `label` is far more accessible. @category HTML input */
-    arialabel;
-    /** Set the ID of what this input controls. @category HTML input */
-    ariacontrols;
-    /** Set the input as `required`. @category State */
-    required = false;
-    /** Set the input as `disabled`. @category State */
-    disabled = false;
-    /** Set the input as `readonly`. @category State */
-    readonly = false;
-    /** Set the input as `valid`. Provides a green color and a check icon. @category Validation */
-    valid = false;
-    /**
-     * Set the input as `invalid`. Provides a red color and red warning icon.
-     * @see{@link error Provide an error message.}
-     * @category Validation
-     **/
-    invalid = false;
-    /**
-     * Set the input as `invalid` and display an error message (applies the same style as `invalid`).
-     *
-     * Error message; will take precedence over helpertext if both are provided.
-     * @see{@link invalid Set invalid without an error message.}
-     * @category Validation
-     **/
-    error;
-    handleOffset() {
-        requestAnimationFrame(() => requestAnimationFrame(() => {
-            const left = this.prefix?.clientWidth ? this.prefix.clientWidth + 8 : 0;
-            const right = this.suffix?.clientWidth ? this.suffix.clientWidth + 8 : 0;
-            this.offsetLeft = left;
-            this.offsetRight = right;
-        }));
-    }
-    handleMessage() {
-        this.checkSlottedHelper();
-        this.checkSlottedError();
-    }
-    async componentWillLoad() {
-        this.handleMessage();
-        if (this.inputid !== this.id)
-            this.idMessage = `${this.inputid}-message`;
-        if (this.language === null)
-            await awaitTopbar(this.hostElement);
-    }
-    componentDidLoad() {
-        this.handleOffset();
-        if (this.mo)
-            this.mo.disconnect();
-        this.mo = new MutationObserver(() => {
-            this.handleOffset();
-            this.handleMessage();
-        });
-        this.mo.observe(this.hostElement, {
-            subtree: true,
-            childList: true,
-        });
-    }
-    setVal(event) {
-        const target = event.composedPath?.()[0];
-        this.value = target.value;
-    }
-    clearVal() {
-        const inputClear = new InputEvent('input', { bubbles: true, data: '' });
-        const input = this.hostElement.querySelector('input');
-        this.value = '';
-        input.focus();
-        input.value = this.value;
-        input.dispatchEvent(inputClear);
-    }
-    translate(prop) {
-        return translations?.[prop]?.[this.language || en];
-    }
-    hasHelperText() {
-        return this.helpertext?.length > 0 || this.showHelperSlot;
-    }
-    hasErrorMessage() {
-        return this.error?.length > 0 || this.showErrorSlot;
-    }
-    /** If any error is active, either via the prop `invalid` or `error` prop/slot. */
-    hasError() {
-        return this.hasErrorMessage() || this.invalid || this.showErrorSlot;
-    }
-    /** If any helpertext or error message is active. Checks both props and slots. */
-    hasMessage() {
-        return this.hasHelperText() || this.hasErrorMessage();
-    }
-    checkSlottedHelper() {
-        const slottedHelper = this.hostElement.querySelector('[slot=helpertext]')?.textContent;
-        this.showHelperSlot = !!slottedHelper?.length;
-    }
-    checkSlottedError() {
-        const slottedError = this.hostElement.querySelector('[slot=error]')?.textContent;
-        this.showErrorSlot = !!slottedError?.length;
-    }
-    getInputType() {
-        const types = ['text', 'password', 'url', 'tel', 'search', 'number', 'email'];
-        return types.includes(this.type) && !this.showPassword ? this.type : 'text';
-    }
-    isPassword() {
-        if (this.disabled)
-            return false;
-        return this.type === 'password' || (this.type === 'text' && this.showPassword);
-    }
-    passwordText() {
-        return this.translate(this.showPassword ? 'HIDE' : 'SHOW');
-    }
-    /** Check if there is a valid or error state active. Returns false if neither is true. */
-    displayState() {
-        return this.valid || this.hasError();
-    }
-    /**
-     * Returns the correct icon for the current state (valid or error).
-     * Defaults to error icon.
-     * @see {@link displayState}
-     */
-    stateIcon() {
-        if (this.valid)
-            return check;
-        return alert_exclamation_circle;
-    }
-    /**
-     * Returns the correct color for the validation icon. Defaults to red.
-     * @see {@link displayState}
-     */
-    stateColor() {
-        if (this.valid)
-            return 'green700';
-        return 'warning';
-    }
-    showPrefix() {
-        return this.textPrefix && !this.icon;
-    }
-    showSuffix() {
-        return !this.showPrefix() && !!this.textSuffix?.length && !this.isPassword() && this.type !== 'search';
-    }
-    showClear() {
-        if (this.disabled || this.readonly)
-            return false;
-        return this.type === 'search' && !!this.value?.length;
-    }
-    render() {
-        return (h(Host, { key: 'f6553d466069c8e7558eb98dfd6deba21905d888' }, h("div", { key: 'e4eb511c59f571eccf70570cff7b44145ee64a70', class: "pn-input", "data-valid": this.valid, "data-error": this.hasError() }, (this.label || this.maxlength >= 1) && (h("label", { key: 'fc2a2516335378e1b6dabdb39b5da538c4cca995', htmlFor: this.inputid, class: "pn-input-label" }, this.label && h("span", { key: '63571398139a931d8a5dd59698f7ec26e0bc6ba9' }, this.label), this.maxlength >= 0 && h("span", { key: 'eb08d059863c41a86ff77102f837565d9eafe3ce' }, `${this.value.length}/${this.maxlength}`))), h("div", { key: '56ab6a577a2712b5430749515b22e776ec9b56a8', class: "pn-input-group" }, h("input", { key: 'ace87466651b4ef525d739f9499b4fa8b10a36e1', type: this.getInputType(), id: this.inputid, class: "pn-input-element", name: this.name, placeholder: this.placeholder, autocomplete: this.autocomplete, maxlength: this.maxlength, list: this.list, pattern: this.pattern, min: this.min, max: this.max, step: this.step, value: this.value, inputmode: this.inputmode, disabled: this.disabled, required: this.required, readonly: this.readonly, "aria-label": this.arialabel, "aria-describedby": this.hasMessage() ? this.idMessage : null, "aria-controls": this.ariacontrols, "aria-invalid": this.hasError()?.toString(), style: {
-                '--pn-input-offset-left': `${this.offsetLeft}px`,
-                '--pn-input-offset-right': `${this.offsetRight}px`,
-            }, onInput: e => this.setVal(e) }), h("div", { key: '334cb0b553144a1271e1a2e094ef3d19776f308d', class: "pn-input-eyecandy", "data-prefix": true, ref: el => (this.prefix = el) }, !!this.icon && h("pn-icon", { key: 'ac827d5f752445b4a5d0e94ae44646513deeb84f', icon: this.icon, "aria-hidden": "true" }), this.showPrefix() && h("span", { key: 'd0d4e2ad948ca3c9155e7b405ea2f4cd4f064f71', class: "pn-input-text" }, this.textPrefix)), h("div", { key: 'e972870933dfb2d8cf294facf51dceb7c64d8bf6', class: "pn-input-eyecandy", "data-suffix": true, ref: el => (this.suffix = el) }, this.showSuffix() && h("span", { key: 'd37da7ccf870f54455731417ac6afbe573589e8a', class: "pn-input-text" }, this.textSuffix), this.displayState() && h("pn-icon", { key: '5432e13d6a53b1e8d143498d0c068b035b89da21', "aria-hidden": "true", icon: this.stateIcon(), color: this.stateColor() }), this.isPassword() && (h("pn-button", { key: '7a04e3189a7ed5d3b29e93d0ac1031c22ffb14e0', icon: this.showPassword ? preview_on : preview_off, iconOnly: true, arialabel: this.passwordText(), small: true, appearance: "light", variant: "borderless", onClick: () => this.togglePassword() })), this.showClear() && (h("pn-button", { key: 'b9941892bb3cf8d64b810be56d3525b4fe7aa394', icon: close, iconOnly: true, arialabel: this.translate('CLEAR'), small: true, appearance: "light", variant: "borderless", onClick: () => this.clearVal() })))), h("p", { key: '466cf477bb1a8fd5f69c24cf9769a53b77a84167', class: "pn-input-message", id: this.idMessage, role: this.hasErrorMessage() ? 'alert' : null, hidden: !this.hasMessage() }, this.hasHelperText() && !this.hasError() && h("span", { key: '760f744cdc4cd0f35399b3e5e5dfb563a6e326a2', class: "pn-input-helper" }, this.helpertext), h("span", { key: '853ecf5094683f8ea69acd81ffa454c2ad7da383', class: "pn-input-helper-slot", hidden: !this.showHelperSlot || this.hasError() }, h("slot", { key: '634e73d6d3b93a1d5f0429de708fd3901968ec31', name: "helpertext" })), this.hasErrorMessage() && h("span", { key: 'f150a81d23c50bf2b705f7082d31bf748aaf91e7', class: "pn-input-error" }, this.error), h("span", { key: '2cd93c90d13a0ef9f153d051f3ee99ff9e25d025', class: "pn-input-error-slot", hidden: !this.showErrorSlot }, h("slot", { key: 'c1d461b5a82d635c57af689f29bf485e82117303', name: "error" }))))));
-    }
-    static get watchers() { return {
-        "textPrefix": ["handleOffset"],
-        "textSuffix": ["handleOffset"],
-        "helpertext": ["handleMessage"],
-        "error": ["handleMessage"]
-    }; }
-    static get style() { return pnInputCss; }
-}, [772, "pn-input", {
-        "label": [1],
-        "helpertext": [1],
-        "inputid": [1],
-        "value": [1025],
-        "language": [1],
-        "icon": [1],
-        "textPrefix": [1, "text-prefix"],
-        "textSuffix": [1, "text-suffix"],
-        "type": [1025],
-        "name": [1],
-        "placeholder": [1],
-        "autocomplete": [1],
-        "maxlength": [2],
-        "inputmode": [1],
-        "list": [1],
-        "pattern": [1],
-        "min": [8],
-        "max": [8],
-        "step": [8],
-        "arialabel": [1],
-        "ariacontrols": [1],
-        "required": [4],
-        "disabled": [4],
-        "readonly": [4],
-        "valid": [4],
-        "invalid": [4],
-        "error": [1],
-        "offsetLeft": [32],
-        "offsetRight": [32],
-        "showHelperSlot": [32],
-        "showErrorSlot": [32],
-        "showPassword": [32]
-    }, undefined, {
-        "textPrefix": ["handleOffset"],
-        "textSuffix": ["handleOffset"],
-        "helpertext": ["handleMessage"],
-        "error": ["handleMessage"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pn-input", "pn-button", "pn-icon", "pn-spinner"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pn-input":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PnInput$1);
-            }
-            break;
-        case "pn-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "pn-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "pn-spinner":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const PnInput = PnInput$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PnInput, defineCustomElement };
-//# sourceMappingURL=pn-input.js.map
-
-//# sourceMappingURL=pn-input.js.map
+import{P as o,d as p}from"./pn-input2.js";const s=o,t=p;export{s as PnInput,t as defineCustomElement}

package/umd/modules/@postnord/web-components/components/pn-input2.js

@@ -0,0 +1,5 @@
+/*!
+ * Built with Stencil
+ * By PostNord.
+ */
+import{transformTag as t,proxyCustomElement as e,HTMLElement as n,forceUpdate as i,h as a,Host as p}from"@stencil/core/internal/client";import{u as s,k as r,e as o}from"./helpers.js";import{a as l}from"./alert_exclamation_circle.js";import{c as u}from"./check.js";import{c}from"./close.js";import{d}from"./pn-button2.js";import{d as h}from"./pn-icon2.js";import{d as f}from"./pn-spinner2.js";const m={SHOW:{sv:"Visa",en:"Show",da:"At vise",fi:"Näytä",no:"Vise"},HIDE:{sv:"Dölj",en:"Hide",da:"Skjule",fi:"Piilottaa",no:"Gjemme seg"},CLEAR:{sv:"Rensa",en:"Clear",da:"Klar",fi:"Asia selvä",no:"Klar"}},b=e(class extends n{constructor(t){super(),!1!==t&&this.__registerHost()}id=`pn-input-${s()}`;idMessage=`${this.id}-message`;prefix;suffix;mo;get hostElement(){return this}offsetLeft=0;offsetRight=0;showHelperSlot=!1;showErrorSlot=!1;showPassword=!1;togglePassword(){this.showPassword=!this.showPassword}label;helpertext;inputid=this.id;value="";language=null;compact=!1;icon;textPrefix;textSuffix;type="text";name;placeholder;autocomplete;maxlength;inputmode;list;pattern;min;max;step;arialabel;ariacontrols;required=!1;disabled=!1;readonly=!1;valid=!1;invalid=!1;error;handleOffset(){requestAnimationFrame((()=>{const t=this.prefix?.clientWidth?this.prefix.clientWidth+8:0,e=this.suffix?.clientWidth?this.suffix.clientWidth+8:0;this.offsetLeft=t,this.offsetRight=e}))}handleMessage(){this.checkSlottedHelper(),this.checkSlottedError()}connectedCallback(){this.mo=new MutationObserver((()=>{i(this.hostElement),this.handleOffset(),this.handleMessage()})),this.mo.observe(this.hostElement,{childList:!0,subtree:!0})}disconnectedCallback(){this.mo&&this.mo.disconnect()}async componentWillLoad(){this.handleMessage(),this.inputid!==this.id&&(this.idMessage=`${this.inputid}-message`),null===this.language&&await r(this.hostElement)}componentDidLoad(){this.handleOffset()}setVal(t){const e=t.composedPath?.()[0];this.value=e.value}clearVal(){const t=new InputEvent("input",{bubbles:!0,data:""}),e=this.hostElement.querySelector("input");this.value="",e.focus(),e.value=this.value,e.dispatchEvent(t)}translate(t){return m?.[t]?.[this.language||o]}hasHelperText(){return this.helpertext?.length>0||this.showHelperSlot}hasErrorMessage(){return this.error?.length>0||this.showErrorSlot}hasError(){return this.hasErrorMessage()||this.invalid||this.showErrorSlot}hasMessage(){return this.hasHelperText()||this.hasErrorMessage()}checkSlottedHelper(){const t=this.hostElement.querySelector("[slot=helpertext]")?.textContent;this.showHelperSlot=!!t?.length}checkSlottedError(){const t=this.hostElement.querySelector("[slot=error]")?.textContent;this.showErrorSlot=!!t?.length}getInputType(){return["text","password","url","tel","search","number","email"].includes(this.type)&&!this.showPassword?this.type:"text"}isPassword(){return!this.disabled&&("password"===this.type||"text"===this.type&&this.showPassword)}passwordText(){return this.translate(this.showPassword?"HIDE":"SHOW")}displayState(){return this.valid||this.hasError()}stateIcon(){return this.valid?u:l}stateColor(){return this.valid?"green700":"warning"}showPrefix(){return this.textPrefix&&!this.icon}showSuffix(){return!this.showPrefix()&&!!this.textSuffix?.length&&!this.isPassword()&&"search"!==this.type}showClear(){return!this.disabled&&!this.readonly&&"search"===this.type&&!!this.value?.length}validLabel(){return this.label?.length>0||this.maxlength>=1}useLabel(){return this.validLabel()&&!this.compact}useCompactLabel(){return this.validLabel()&&this.compact}renderLabel(){return a("label",{htmlFor:this.inputid,class:"pn-input-label","data-compact":this.compact},this.label&&a("span",null,this.label),this.maxlength>=0&&a("span",null,`${this.value.length}/${this.maxlength}`))}render(){return a(p,{key:"3250630450288d09811b7c78bca5091ba93ec7ab"},a("div",{key:"db673ba19f300966eaf5c38136fe7d6143aa661d",class:"pn-input","data-valid":this.valid,"data-error":this.hasError(),style:{"--pn-input-offset-left":`${this.offsetLeft}px`,"--pn-input-offset-right":`${this.offsetRight}px`}},this.useLabel()&&this.renderLabel(),a("div",{key:"b216b7f951be237aed6e46f1ccbcfd29b2a3cad1",class:"pn-input-group"},a("input",{key:"4ee129c35c6a74a359df9d611b236132d7afac38",type:this.getInputType(),id:this.inputid,class:"pn-input-element",name:this.name,placeholder:this.compact?this.placeholder||" ":this.placeholder,autocomplete:this.autocomplete,maxlength:this.maxlength,list:this.list,pattern:this.pattern,min:this.min,max:this.max,step:this.step,value:this.value,inputmode:this.inputmode,disabled:this.disabled,required:this.required,readonly:this.readonly,"aria-label":this.arialabel,"aria-describedby":this.hasMessage()?this.idMessage:null,"aria-controls":this.ariacontrols,"aria-invalid":this.hasError()?.toString(),"data-compact":this.compact,"data-value":this.value?.length>0,onInput:t=>this.setVal(t)}),this.useCompactLabel()&&this.renderLabel(),a("div",{key:"753a9abeaf5bfa5ffb3be10042a76aa7863bce9c",class:"pn-input-eyecandy","data-prefix":!0,ref:t=>this.prefix=t},!!this.icon&&a("pn-icon",{key:"acf1a6e42c9d37cab6f6a0453d8ea674df1cd0c3",icon:this.icon,"aria-hidden":"true"}),this.showPrefix()&&a("span",{key:"70d2eb7e94e790d665a57557595c2bce4855b827",class:"pn-input-text"},this.textPrefix)),a("div",{key:"1dcae3fb8489d2dc6aa7325baea693591acef31c",class:"pn-input-eyecandy","data-suffix":!0,ref:t=>this.suffix=t},this.showSuffix()&&a("span",{key:"05044f3fbea582d507de30a0ff751abaf1da3206",class:"pn-input-text"},this.textSuffix),this.displayState()&&a("pn-icon",{key:"727650c9e6c9b9da2ef43e933fab95b6adc8a6bb","aria-hidden":"true",icon:this.stateIcon(),color:this.stateColor()}),this.isPassword()&&a("pn-button",{key:"4e28eddff11c9aea670a6764aeb0316bccba1c1c",icon:this.showPassword?'<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12 7c-5.382 0-7.908 3.33-8.758 4.775a.43.43 0 0 0 0 .45C4.092 13.67 6.618 17 12 17s7.908-3.33 8.758-4.775a.43.43 0 0 0 0-.45C19.908 10.33 17.382 7 12 7M1.518 10.761C2.55 9.005 5.618 5 12 5s9.45 4.005 10.482 5.761a2.43 2.43 0 0 1 0 2.478C21.45 14.995 18.382 19 12 19s-9.45-4.005-10.482-5.761a2.43 2.43 0 0 1 0-2.478M8 12a4 4 0 1 1 8 0 4 4 0 0 1-8 0m4-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4" clip-rule="evenodd"/></svg>':'<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M1.81 11.727a1 1 0 0 1 1.363.378c.29.513.835 1.343 1.7 2.174a9.5 9.5 0 0 0 3.457 2.128c1.03.361 2.244.593 3.67.593s2.64-.232 3.67-.593a9.5 9.5 0 0 0 3.458-2.128 9.7 9.7 0 0 0 1.698-2.174 1 1 0 0 1 1.742.984 11.5 11.5 0 0 1-1.445 2.001l1.686 2.322a1 1 0 1 1-1.618 1.175l-1.537-2.116a11.4 11.4 0 0 1-2.453 1.48l.763 2.785a1 1 0 1 1-1.928.528l-.73-2.661c-.993.251-2.093.397-3.306.397s-2.313-.146-3.306-.397l-.73 2.661a1 1 0 1 1-1.928-.528l.763-2.786a11.4 11.4 0 0 1-2.453-1.479L2.81 18.587a1 1 0 0 1-1.618-1.175l1.686-2.322a11.5 11.5 0 0 1-1.445-2 1 1 0 0 1 .379-1.363" clip-rule="evenodd"/></svg>',iconOnly:!0,arialabel:this.passwordText(),small:!0,appearance:"light",variant:"borderless",onClick:()=>this.togglePassword()}),this.showClear()&&a("pn-button",{key:"2181adb68c152d837ef03bf9b7e0eb66eb3ea6d2",icon:c,iconOnly:!0,arialabel:this.translate("CLEAR"),small:!0,appearance:"light",variant:"borderless",onClick:()=>this.clearVal()}))),a("p",{key:"b8b1039a61a23efd24ebd71285b15cce7bfc5ec0",class:"pn-input-message",id:this.idMessage,role:this.hasErrorMessage()?"alert":null,hidden:!this.hasMessage()},this.hasHelperText()&&!this.hasError()&&a("span",{key:"4433df6b700cc40ce2ae698d2474f57163b398a1",class:"pn-input-helper"},this.helpertext),a("span",{key:"41c8fb1cbbc17b7c349922cac2ff42244a017e0c",class:"pn-input-helper-slot",hidden:!this.showHelperSlot||this.hasError()},a("slot",{key:"5628bbc8db75161d18ad3e75c259bf3eb5fc9052",name:"helpertext"})),this.hasErrorMessage()&&a("span",{key:"e41145d7fab9f3ae35dd428971c79673d0531301",class:"pn-input-error"},this.error),a("span",{key:"ae85a9420fcb449cc874eadc7a066dd772f097a9",class:"pn-input-error-slot",hidden:!this.showErrorSlot},a("slot",{key:"bdd31ab2f706cac6e243562d035361a381ecfa43",name:"error"})))))}static get watchers(){return{textPrefix:[{handleOffset:0}],textSuffix:[{handleOffset:0}],helpertext:[{handleMessage:0}],error:[{handleMessage:0}]}}static get style(){return`${t("pn-input")}{display:inline-flex;flex-direction:column}${t("pn-input")} .pn-input{--pn-input-offset-left:0em;--pn-input-offset-right:0em}${t("pn-input")} .pn-input-label{cursor:pointer;display:flex;justify-content:space-between;align-items:flex-end;font-weight:400;color:#2d2013;margin:0 0 0.25em 0;gap:0.5em;-webkit-tap-highlight-color:transparent;transition-property:color, transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${t("pn-input")} .pn-input-label{transition-duration:0s;transition-delay:0s}}${t("pn-input")} .pn-input-label[data-compact]{position:absolute;top:1.5625em;left:calc(var(--pn-input-offset-left, 0px) + 0.75em + 0.0625em);margin:0;pointer-events:none;align-items:center;height:1.5em;max-width:calc(100% - (var(--pn-input-offset-left, 0px) + 0.75em) - (var(--pn-input-offset-right, 0px) + 0.75em));transform:translateY(-50%) scale(1) translateZ(0);transform-origin:0 0;transition-delay:0.2s}${t("pn-input")} .pn-input-label[data-compact]>span{font-size:1em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;line-height:1.5em}${t("pn-input")} .pn-input-label>span{font-size:0.875em}${t("pn-input")} .pn-input-group{position:relative}${t("pn-input")} .pn-input-element{width:100%;color:#2d2013;background-color:#ffffff;border:0.0625em solid #969087;border-radius:0.5em;padding:0.75em calc(0.75em + var(--pn-input-offset-right)) 0.75em calc(0.75em + var(--pn-input-offset-left));font-family:inherit;font-size:1em;font-weight:500;line-height:1.5em;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}${t("pn-input")} .pn-input-element:-webkit-autofill,${t("pn-input")} .pn-input-element:-webkit-autofill:hover,${t("pn-input")} .pn-input-element:-webkit-autofill:focus,${t("pn-input")} .pn-input-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #e0f8ff inset;-webkit-text-fill-color:#2d2013}${t("pn-input")} .pn-input-element{outline:0.2rem solid transparent;outline-offset:0.2rem}${t("pn-input")} .pn-input-element:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}${t("pn-input")} .pn-input-element{transition-property:outline-color, background-color, border-color, color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${t("pn-input")} .pn-input-element{transition-duration:0s;transition-delay:0s}}${t("pn-input")} .pn-input-element[data-compact]{text-align:left;padding-top:1.125em;padding-bottom:0.375em;max-width:unset}${t("pn-input")} .pn-input-element[data-compact]::placeholder{color:transparent}${t("pn-input")} .pn-input-element[data-compact]:focus+.pn-input-label,${t("pn-input")} .pn-input-element[data-compact]:not(:placeholder-shown)+.pn-input-label{transform:translateY(-85%) scale(0.75);transition-delay:0s}${t("pn-input")} .pn-input-element::placeholder{color:#5e554a;font-weight:normal}${t("pn-input")} .pn-input-element:hover{border-color:#005d92}${t("pn-input")} .pn-input-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}${t("pn-input")} .pn-input-element:read-only{border-color:#ffffff}${t("pn-input")} .pn-input-element:disabled~.pn-input-eyecandy>${t("pn-icon")}>.pn-icon-svg>path{fill:#969087}${t("pn-input")} .pn-input-element::-webkit-calendar-picker-indicator{visibility:hidden;display:none !important}${t("pn-input")} .pn-input-element::-webkit-textfield-decoration-container,${t("pn-input")} .pn-input-element::-webkit-search-cancel-button,${t("pn-input")} .pn-input-element::-webkit-inner-spin-button,${t("pn-input")} .pn-input-element::-webkit-outer-spin-button,${t("pn-input")} .pn-input-element::-webkit-search-decoration{-webkit-appearance:none;-moz-appearance:none;appearance:none}${t("pn-input")} .pn-input-element[type=number]{appearance:textfield}${t("pn-input")} .pn-input-eyecandy{position:absolute;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:0.5em;height:1.5em}${t("pn-input")} .pn-input-eyecandy[data-prefix]{left:0.75em}${t("pn-input")} .pn-input-eyecandy[data-suffix]{right:0.75em}${t("pn-input")} .pn-input-text{color:#5e554a;font-weight:400;line-height:1.5em}${t("pn-input")} .pn-input-message{color:#5e554a;font-size:0.875em;font-weight:400;margin:0.25em 0 0 0;display:flex;flex-direction:column;gap:0.25em}${t("pn-input")} .pn-input-message[hidden],${t("pn-input")} .pn-input-message>span[hidden]{display:none}${t("pn-input")} .pn-input[data-error]>.pn-input-label{color:#a70707}${t("pn-input")} .pn-input[data-error]>.pn-input-group>.pn-input-element{border-color:#a70707}${t("pn-input")} .pn-input[data-error]>.pn-input-group>.pn-input-element:hover{border-color:#500715}${t("pn-input")} .pn-input[data-error]>.pn-input-group>.pn-input-element:focus-visible{background-color:#ffffff;border-color:#a70707;outline-color:#a70707}${t("pn-input")} .pn-input[data-error]>.pn-input-group>.pn-input-element:-webkit-autofill,${t("pn-input")} .pn-input[data-error]>.pn-input-group>.pn-input-element:-webkit-autofill:hover,${t("pn-input")} .pn-input[data-error]>.pn-input-group>.pn-input-element:-webkit-autofill:focus,${t("pn-input")} .pn-input[data-error]>.pn-input-group>.pn-input-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #fef7f6 inset;-webkit-text-fill-color:#2d2013}${t("pn-input")} .pn-input[data-error]>.pn-input-message[role=alert]{color:#a70707}${t("pn-input")} .pn-input[data-valid]>.pn-input-label{color:#005e41}${t("pn-input")} .pn-input[data-valid]>.pn-input-group>.pn-input-element{border-color:#005e41}${t("pn-input")} .pn-input[data-valid]>.pn-input-group>.pn-input-element:hover{border-color:#002f24}${t("pn-input")} .pn-input[data-valid]>.pn-input-group>.pn-input-element:focus-visible{background-color:#ffffff;border-color:#005e41;outline-color:#005e41}${t("pn-input")} .pn-input[data-valid]>.pn-input-group>.pn-input-element:-webkit-autofill,${t("pn-input")} .pn-input[data-valid]>.pn-input-group>.pn-input-element:-webkit-autofill:hover,${t("pn-input")} .pn-input[data-valid]>.pn-input-group>.pn-input-element:-webkit-autofill:focus,${t("pn-input")} .pn-input[data-valid]>.pn-input-group>.pn-input-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #edfbf3 inset;-webkit-text-fill-color:#2d2013}`}},[772,"pn-input",{label:[1],helpertext:[1],inputid:[1],value:[1025],language:[1],compact:[4],icon:[1],textPrefix:[1,"text-prefix"],textSuffix:[1,"text-suffix"],type:[1025],name:[1],placeholder:[1],autocomplete:[1],maxlength:[2],inputmode:[1],list:[1],pattern:[1],min:[8],max:[8],step:[8],arialabel:[1],ariacontrols:[1],required:[4],disabled:[4],readonly:[4],valid:[4],invalid:[4],error:[1],offsetLeft:[32],offsetRight:[32],showHelperSlot:[32],showErrorSlot:[32],showPassword:[32]},void 0,{textPrefix:[{handleOffset:0}],textSuffix:[{handleOffset:0}],helpertext:[{handleMessage:0}],error:[{handleMessage:0}]}]);function g(){"undefined"!=typeof customElements&&["pn-input","pn-button","pn-icon","pn-spinner"].forEach((e=>{switch(e){case"pn-input":customElements.get(t(t(e)))||customElements.define(t(t(e)),b);break;case"pn-button":customElements.get(t(t(e)))||d();break;case"pn-icon":customElements.get(t(t(e)))||h();break;case"pn-spinner":customElements.get(t(t(e)))||f()}}))}export{b as P,g as d}