@postnord/pn-marketweb-components 4.1.0 → 4.1.2

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

@@ -2,304 +2,4 @@
  * Built with Stencil
  * By PostNord.
  */
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { u as uuidv4, k as awaitTopbar, e as en } from './helpers.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="M2 12a1 1 0 0 1 1-1h18a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1" clip-rule="evenodd"/></svg>';
-const minus = 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 2a1 1 0 0 1 1 1v8h8a1 1 0 1 1 0 2h-8v8a1 1 0 1 1-2 0v-8H3a1 1 0 1 1 0-2h8V3a1 1 0 0 1 1-1" clip-rule="evenodd"/></svg>';
-const plus = icon;
-
-const translations = {
-    DECREASE: {
-        en: 'Decrease',
-        sv: 'Minska',
-        da: 'Reducere',
-        fi: 'Vähentää',
-        no: 'Redusere',
-    },
-    INCREASE: {
-        en: 'Increase',
-        sv: 'Öka',
-        da: 'Øge',
-        fi: 'Lisääntyä',
-        no: 'Øke',
-    },
-    MAX_VALUE_MESSAGE: {
-        en: 'Maximum value is ',
-        sv: 'Högsta värde är ',
-        da: 'Højeste værdi er',
-        fi: 'Korkein arvo on',
-        no: 'Høyeste verdi er',
-    },
-    MIN_VALUE_MESSAGE: {
-        en: 'Minimum value is ',
-        sv: 'Lägsta värde är ',
-        da: 'Laveste værdi er ',
-        fi: 'Pienin arvo on ',
-        no: 'Laveste verdi er ',
-    },
-};
-
-const pnCounterCss = "pn-counter{display:inline-block}pn-counter .pn-counter{display:inline-flex;flex-direction:column}pn-counter .pn-counter-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-counter .pn-counter-label{transition-duration:0s;transition-delay:0s}}pn-counter .pn-counter-label>span{font-size:0.875em}pn-counter .pn-counter-input{--pn-counter-ch:0ch;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-counter .pn-counter-input:-webkit-autofill,pn-counter .pn-counter-input:-webkit-autofill:hover,pn-counter .pn-counter-input:-webkit-autofill:focus,pn-counter .pn-counter-input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #e0f8ff inset;-webkit-text-fill-color:#2d2013}pn-counter .pn-counter-input{outline:0.2rem solid transparent;outline-offset:0.2rem}pn-counter .pn-counter-input:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}pn-counter .pn-counter-input{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-counter .pn-counter-input{transition-duration:0s;transition-delay:0s}}pn-counter .pn-counter-input::placeholder{color:#5e554a;font-weight:normal}pn-counter .pn-counter-input:hover{border-color:#005d92}pn-counter .pn-counter-input:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}pn-counter .pn-counter-input{text-align:center;width:100%;max-width:calc(3.5em + var(--pn-counter-ch));outline:0.2rem solid transparent;outline-offset:0.2rem}pn-counter .pn-counter-input:focus-visible{outline-color:#005d92}pn-counter .pn-counter-input:read-only{border-color:#ffffff}pn-counter .pn-counter-input:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}pn-counter .pn-counter-input::-webkit-inner-spin-button,pn-counter .pn-counter-input::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none}pn-counter .pn-counter-input[type=number]{appearance:textfield}pn-counter .pn-counter-items{display:inline-flex;flex-direction:row;gap:0.5em;transition-property:gap;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-counter .pn-counter-items{transition-duration:0s;transition-delay:0s}}pn-counter .pn-counter-items[data-hidebuttons]{gap:0}pn-counter .pn-counter-items[data-hidebuttons]>pn-button{transform:scale(0) translateZ(0);width:0}pn-counter .pn-counter-items>pn-button{transform:scale(1) translateZ(0);transform-origin:center center;width:3em;transition-property:transform, width;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-counter .pn-counter-items>pn-button{transition-duration:0s;transition-delay:0s}}pn-counter .pn-counter-helpertext{color:#5e554a;font-size:0.875em;font-weight:400;margin:0.25em 0 0 0;display:flex;flex-direction:column;gap:0.25em}pn-counter .pn-counter-sr-only{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);margin:-1px;white-space:nowrap}";
-
-const PnCounter$1 = /*@__PURE__*/ proxyCustomElement(class PnCounter extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.counterInput = createEvent(this, "counterInput", 7);
-    }
-    id = `pn-counter-${uuidv4()}`;
-    idLabel = `${this.id}-label`;
-    idText = `${this.id}-text`;
-    idAmount = `${this.id}-count`;
-    counterElement;
-    get hostElement() { return this; }
-    clearAriaTimer;
-    displaySrValue = false;
-    showMinMaxMessage = false;
-    /** Prevent double events when reaching min/max values. */
-    lastDispatchedValue;
-    interactType;
-    /** Label for the counter */
-    label;
-    /** Set a helpertext for the counter. */
-    helpertext;
-    /** Set a predefined value */
-    value = 0;
-    /** Set a unique HTML ID for the counter */
-    counterid = this.id;
-    /** Set the language manually for the built in translations. */
-    language = null;
-    /** Text for the decrease button. Default is "Decrease". @category Translation */
-    labelDecrease;
-    /** Text for the increase button. Default is "Increase". @category Translation */
-    labelIncrease;
-    /** Set a message that shows below input when user wants to set a value that is below `min`. Default is "Minimum value is x" @category Translation */
-    minMessage;
-    /** Set a message that shows below input when user wants to set a value that is above `max`. Default is "Maximum value is x"  @category Translation */
-    maxMessage;
-    /** HTML input name. @category HTML input */
-    name;
-    /** Minimum value. @category HTML input */
-    min;
-    /** Maximum value. @category HTML input */
-    max;
-    /** Increase/decrease the value in steps, default is 1. @category HTML input */
-    step = 1;
-    /** Suggest values for the counter input. @category HTML input */
-    list;
-    /** Set the counter as required. @category State */
-    required = false;
-    /** Set the counter as readonly. @category State */
-    readonly = false;
-    /** Set the counter as disabled. @category State */
-    disabled = false;
-    /**
-     * Instead of listening to multiple input, change and/or click events, we bundled them into one.
-     * - `value` is the current counter value.
-     * - `input` is true if the user changed the value with the HTML input.
-     * - `decrease` is true if the user clicked on the decrease button.
-     * - `increase` is true if the user clicked on the increase button.
-     */
-    counterInput;
-    watchValue() {
-        this.showSrContent();
-        this.showMinMaxMessage = false;
-        if (this.hasMin() && this.value < this.min) {
-            this.setMin();
-            this.showMinMaxMessage = true;
-        }
-        if (this.hasMax() && this.value > this.max) {
-            this.setMax();
-            this.showMinMaxMessage = true;
-        }
-        if (this.lastDispatchedValue !== this.value)
-            this.counterInput.emit({
-                value: this.value,
-                input: this.interactType === 'input',
-                decrease: this.interactType === 'decrease',
-                increase: this.interactType === 'increase',
-            });
-        this.lastDispatchedValue = this.value;
-        this.handleInputLength();
-    }
-    handleId() {
-        this.idLabel = `${this.counterid}-label`;
-        this.idText = `${this.counterid}-text`;
-        this.idAmount = `${this.counterid}-count`;
-    }
-    async componentWillLoad() {
-        this.handleId();
-        if (this.language)
-            return;
-        await awaitTopbar(this.hostElement);
-    }
-    componentDidLoad() {
-        this.counterElement = this.hostElement.querySelector('.pn-counter-input');
-        this.handleInputLength();
-    }
-    setVal(event) {
-        const { valueAsNumber } = event.target;
-        if (isNaN(valueAsNumber))
-            return;
-        this.interactType = 'input';
-        this.value = valueAsNumber;
-    }
-    setMin() {
-        if (this.hasMin())
-            this.value = this.min;
-    }
-    setMax() {
-        if (this.hasMax())
-            this.value = this.max;
-    }
-    hasMin() {
-        return typeof this.min === 'number';
-    }
-    hasMax() {
-        return typeof this.max === 'number';
-    }
-    decreaseAmount() {
-        if (this.hasMin() && this.value <= this.min)
-            this.showMinMaxMessage = true;
-        this.interactType = 'decrease';
-        this.value = this.value - this.step;
-    }
-    increaseAmount() {
-        if (this.hasMax() && this.value >= this.max)
-            this.showMinMaxMessage = true;
-        this.interactType = 'increase';
-        this.value = this.value + this.step;
-    }
-    keyBoardInput(event) {
-        event.stopImmediatePropagation();
-        if (!/^(Home|End)$/.test(event.key))
-            return;
-        event.preventDefault();
-        this.interactType = 'input';
-        if (event.key === 'Home')
-            this.setMin();
-        if (event.key === 'End')
-            this.setMax();
-    }
-    showSrContent() {
-        if (this.clearAriaTimer) {
-            clearTimeout(this.clearAriaTimer);
-        }
-        this.displaySrValue = true;
-        this.clearAriaTimer = setTimeout(() => {
-            this.displaySrValue = false;
-        }, 4000);
-    }
-    toggleMinMaxMessage() {
-        const isMax = this.value === this.max;
-        const i18ntxt = `${isMax ? 'MAX' : 'MIN'}_VALUE_MESSAGE`;
-        const message = this.translate(i18ntxt) + `${isMax ? this.max : this.min}`.toString();
-        return isMax ? this.maxMessage || message : this.minMessage || message;
-    }
-    getTextMessage(showValue = false) {
-        if (this.showMinMaxMessage)
-            return this.toggleMinMaxMessage();
-        return showValue ? this.value.toString() : this.helpertext;
-    }
-    describedbyIds() {
-        const list = [];
-        if (this.helpertext)
-            list.push(this.idText);
-        if (this.displaySrValue)
-            list.push(this.idAmount);
-        if (list.length === 0)
-            return null;
-        return list.join(' ');
-    }
-    translate(prop) {
-        return translations?.[prop]?.[this.language || en];
-    }
-    noButtons() {
-        return this.disabled || this.readonly;
-    }
-    handleInputLength() {
-        const ch = this.max ? this.max.toString() : this.value.toString();
-        if (ch.length > 3)
-            this.counterElement.style.setProperty('--pn-counter-ch', `${ch.length - 3}ch`);
-        else
-            this.counterElement.style.setProperty('--pn-counter-ch', '0ch');
-    }
-    render() {
-        return (h(Host, { key: '4ebc9597343d24473f745ae6f847a6b48a8f6af0' }, h("div", { key: 'bed20d505ebe5490787413a5d1573b4fe2bbc6ed', class: "pn-counter", role: "group", "aria-labelledby": this.idLabel, "aria-describedby": this.describedbyIds() }, h("label", { key: '12dac33ecc76369b7777dcc189c79555b5882e13', htmlFor: this.counterid, class: "pn-counter-label", id: this.idLabel }, h("span", { key: '5f1448379b2592a92f928beffa0bd8861cc32726' }, this.label)), h("div", { key: 'bf75b3d6dfb3fc2a9dd79c5255dd6cacaeba7670', class: "pn-counter-items", "data-hidebuttons": this.noButtons() }, h("pn-button", { key: 'a3559366cacdf27bf5fb7572a55c51c3f3fa14cf', "data-decrease": true, appearance: "light", variant: "outlined", "no-tab": this.noButtons(), icon: minus, iconOnly: true, arialabel: this.labelDecrease || this.translate('DECREASE'), onClick: () => this.decreaseAmount() }), h("input", { key: 'bd0d56f4ea78128ea8259966edf6c345c45e06a0', id: this.counterid, class: "pn-counter-input", type: "number", min: this.min, max: this.max, step: this.step, value: this.value, name: this.name, required: this.required, readonly: this.readonly, disabled: this.disabled, "aria-describedby": this.describedbyIds(), onInput: e => this.setVal(e), onKeyDown: (e) => this.keyBoardInput(e) }), h("pn-button", { key: '770b62d7b3ff6c27ce7e4c0349e49236f65be054', "data-increase": true, appearance: "light", variant: "outlined", "no-tab": this.noButtons(), icon: plus, iconOnly: true, arialabel: this.labelIncrease || this.translate('INCREASE'), onClick: () => this.increaseAmount() })), !!this.getTextMessage() && (h("p", { key: '7a0f9cc0838545dcf7ae1b20798e0eeabbec19b9', id: this.idText, class: "pn-counter-helpertext" }, h("span", { key: '343fa6cef1e44da4ceb69f3f8e650a210b0aa76e' }, this.getTextMessage()))), h("p", { key: 'defe5fda110e1079b11c4b58bbc9cec1e326f163', id: this.idAmount, class: "pn-counter-sr-only", "aria-live": "assertive" }, this.displaySrValue ? this.getTextMessage(true) : ''))));
-    }
-    static get watchers() { return {
-        "value": ["watchValue"],
-        "counterid": ["handleId"]
-    }; }
-    static get style() { return pnCounterCss; }
-}, [768, "pn-counter", {
-        "label": [1],
-        "helpertext": [1],
-        "value": [1538],
-        "counterid": [1],
-        "language": [1],
-        "labelDecrease": [1, "label-decrease"],
-        "labelIncrease": [1, "label-increase"],
-        "minMessage": [1, "min-message"],
-        "maxMessage": [1, "max-message"],
-        "name": [1],
-        "min": [2],
-        "max": [2],
-        "step": [2],
-        "list": [1],
-        "required": [4],
-        "readonly": [4],
-        "disabled": [4],
-        "clearAriaTimer": [32],
-        "displaySrValue": [32],
-        "showMinMaxMessage": [32],
-        "lastDispatchedValue": [32],
-        "interactType": [32]
-    }, undefined, {
-        "value": ["watchValue"],
-        "counterid": ["handleId"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pn-counter", "pn-button", "pn-icon", "pn-spinner"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pn-counter":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PnCounter$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 PnCounter = PnCounter$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PnCounter, defineCustomElement };
-//# sourceMappingURL=pn-counter.js.map
-
-//# sourceMappingURL=pn-counter.js.map
+import{transformTag as e,proxyCustomElement as t,HTMLElement as n,createEvent as i,h as o,Host as r}from"@stencil/core/internal/client";import{u as s,k as a,e as c}from"./helpers.js";import{d as l}from"./pn-button2.js";import{d as u}from"./pn-icon2.js";import{d as p}from"./pn-spinner2.js";const d={DECREASE:{en:"Decrease",sv:"Minska",da:"Reducere",fi:"Vähentää",no:"Redusere"},INCREASE:{en:"Increase",sv:"Öka",da:"Øge",fi:"Lisääntyä",no:"Øke"},MAX_VALUE_MESSAGE:{en:"Maximum value is ",sv:"Högsta värde är ",da:"Højeste værdi er",fi:"Korkein arvo on",no:"Høyeste verdi er"},MIN_VALUE_MESSAGE:{en:"Minimum value is ",sv:"Lägsta värde är ",da:"Laveste værdi er ",fi:"Pienin arvo on ",no:"Laveste verdi er "}},h=t(class extends n{constructor(e){super(),!1!==e&&this.__registerHost(),this.counterInput=i(this,"counterInput",7)}id="pn-counter-"+s();idLabel=this.id+"-label";idText=this.id+"-text";idAmount=this.id+"-count";get hostElement(){return this}clearAriaTimer;displaySrValue=!1;showMinMaxMessage=!1;lastDispatchedValue;interactType;label;helpertext;value=0;counterid=this.id;compact=!1;language=null;labelDecrease;labelIncrease;minMessage;maxMessage;name;min;max;step=1;list;required=!1;readonly=!1;disabled=!1;counterInput;watchValue(){this.showSrContent(),this.showMinMaxMessage=!1,this.hasMin()&&this.value<this.min&&(this.setMin(),this.showMinMaxMessage=!0),this.hasMax()&&this.value>this.max&&(this.setMax(),this.showMinMaxMessage=!0),this.lastDispatchedValue!==this.value&&this.counterInput.emit({value:this.value,input:"input"===this.interactType,decrease:"decrease"===this.interactType,increase:"increase"===this.interactType}),this.lastDispatchedValue=this.value}handleId(){this.idLabel=this.counterid+"-label",this.idText=this.counterid+"-text",this.idAmount=this.counterid+"-count"}async componentWillLoad(){this.handleId(),this.language||await a(this.hostElement)}setVal(e){const{valueAsNumber:t}=e.target;isNaN(t)||(this.interactType="input",this.value=t)}setMin(){this.hasMin()&&(this.value=this.min)}setMax(){this.hasMax()&&(this.value=this.max)}hasMin(){return"number"==typeof this.min}hasMax(){return"number"==typeof this.max}decreaseAmount(){this.hasMin()&&this.value<=this.min&&(this.showMinMaxMessage=!0),this.interactType="decrease",this.value=this.value-this.step}increaseAmount(){this.hasMax()&&this.value>=this.max&&(this.showMinMaxMessage=!0),this.interactType="increase",this.value=this.value+this.step}keyBoardInput(e){e.stopImmediatePropagation(),/^(Home|End)$/.test(e.key)&&(e.preventDefault(),this.interactType="input","Home"===e.key&&this.setMin(),"End"===e.key&&this.setMax())}showSrContent(){this.clearAriaTimer&&clearTimeout(this.clearAriaTimer),this.displaySrValue=!0,this.clearAriaTimer=setTimeout((()=>{this.displaySrValue=!1}),4e3)}toggleMinMaxMessage(){const e=this.value===this.max,t=this.translate((e?"MAX":"MIN")+"_VALUE_MESSAGE")+""+(e?this.max:this.min);return e?this.maxMessage||t:this.minMessage||t}getTextMessage(e=!1){return this.showMinMaxMessage?this.toggleMinMaxMessage():e?""+this.value:this.helpertext}describedbyIds(){const e=[];return this.helpertext&&e.push(this.idText),this.displaySrValue&&e.push(this.idAmount),0===e.length?null:e.join(" ")}translate(e){return d?.[e]?.[this.language||c]}noButtons(){return this.disabled||this.readonly}renderLabel(){return o("label",{htmlFor:this.counterid,class:"pn-counter-label",id:this.idLabel,"data-compact":this.compact},o("span",null,this.label))}renderButton(e=!1){const t=e?this.labelIncrease||this.translate("INCREASE"):this.labelDecrease||this.translate("DECREASE");return o("pn-button",{"data-increase":!!e||null,"data-decrease":!e||null,appearance:"light",variant:"outlined","no-tab":this.noButtons(),icon:e?'<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 2a1 1 0 0 1 1 1v8h8a1 1 0 1 1 0 2h-8v8a1 1 0 1 1-2 0v-8H3a1 1 0 1 1 0-2h8V3a1 1 0 0 1 1-1" 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="M2 12a1 1 0 0 1 1-1h18a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1" clip-rule="evenodd"/></svg>',iconOnly:!0,tooltip:t,onPnClick:()=>e?this.increaseAmount():this.decreaseAmount()})}render(){return o(r,{key:"8f8a1d6f9cf41e43a17146796bdbadfabb5421da"},o("div",{key:"1de06de8544eeb0efcdd940da16fd7cb39620897",class:"pn-counter",role:"group","aria-labelledby":this.idLabel,"aria-describedby":this.describedbyIds()},!this.compact&&this.renderLabel(),o("div",{key:"83280bb5e207a2a226e7174f5819ef0f375f06c6",class:"pn-counter-items","data-hidebuttons":this.noButtons()},this.renderButton(),o("div",{key:"6f3cc4e8987d526be974bd561f2e3413e83cc35f",class:"pn-counter-input"},o("input",{key:"f2cb0054546017a768e68503aaf7fd93b55c5885",id:this.counterid,class:"pn-counter-element",type:"number",min:this.min,max:this.max,step:this.step,value:this.value,name:this.name,placeholder:this.compact?" ":null,required:this.required,readonly:this.readonly,disabled:this.disabled,"aria-describedby":this.describedbyIds(),"data-compact":this.compact,onInput:e=>this.setVal(e),onKeyDown:e=>this.keyBoardInput(e)}),this.compact&&this.renderLabel()),this.renderButton(!0)),!!this.getTextMessage()&&o("p",{key:"cb64255f574b4d9fc7ba0098d9f7353c5c639956",id:this.idText,class:"pn-counter-helpertext"},o("span",{key:"76a5d077b53f2a60c1d39f42b34e8312ae250d86"},this.getTextMessage())),o("p",{key:"37d61e40910bb4cd0cc072772c3dd5414fe31574",id:this.idAmount,class:"pn-counter-sr-only","aria-live":"assertive"},this.displaySrValue?this.getTextMessage(!0):"")))}static get watchers(){return{value:[{watchValue:0}],counterid:[{handleId:0}]}}static get style(){return`${e("pn-counter")}{display:inline-block}${e("pn-counter")} .pn-counter{display:flex;flex-direction:column}${e("pn-counter")} .pn-counter-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){${e("pn-counter")} .pn-counter-label{transition-duration:0s;transition-delay:0s}}${e("pn-counter")} .pn-counter-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}${e("pn-counter")} .pn-counter-label[data-compact]>span{font-size:1em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;line-height:1.5em}${e("pn-counter")} .pn-counter-label>span{font-size:0.875em}${e("pn-counter")} .pn-counter-input{position:relative;flex:1 1 auto}${e("pn-counter")} .pn-counter-element{text-align:center;width:100%;appearance:textfield;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}${e("pn-counter")} .pn-counter-element:-webkit-autofill,${e("pn-counter")} .pn-counter-element:-webkit-autofill:hover,${e("pn-counter")} .pn-counter-element:-webkit-autofill:focus,${e("pn-counter")} .pn-counter-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #e0f8ff inset;-webkit-text-fill-color:#2d2013}${e("pn-counter")} .pn-counter-element{outline:0.2rem solid transparent;outline-offset:0.2rem}${e("pn-counter")} .pn-counter-element:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}${e("pn-counter")} .pn-counter-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){${e("pn-counter")} .pn-counter-element{transition-duration:0s;transition-delay:0s}}${e("pn-counter")} .pn-counter-element[data-compact]{text-align:left;padding-top:1.125em;padding-bottom:0.375em;max-width:unset}${e("pn-counter")} .pn-counter-element[data-compact]::placeholder{color:transparent}${e("pn-counter")} .pn-counter-element[data-compact]:focus+.pn-counter-label,${e("pn-counter")} .pn-counter-element[data-compact]:not(:placeholder-shown)+.pn-counter-label{transform:translateY(-85%) scale(0.75);transition-delay:0s}${e("pn-counter")} .pn-counter-element::placeholder{color:#5e554a;font-weight:normal}${e("pn-counter")} .pn-counter-element:hover{border-color:#005d92}${e("pn-counter")} .pn-counter-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}${e("pn-counter")} .pn-counter-element:read-only{border-color:#ffffff}${e("pn-counter")} .pn-counter-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}${e("pn-counter")} .pn-counter-element:out-of-range{border-color:#a70707}${e("pn-counter")} .pn-counter-element:out-of-range:hover{border-color:#500715}${e("pn-counter")} .pn-counter-element:out-of-range:focus-visible{background-color:#ffffff;border-color:#a70707;outline-color:#a70707}${e("pn-counter")} .pn-counter-element:out-of-range:-webkit-autofill,${e("pn-counter")} .pn-counter-element:out-of-range:-webkit-autofill:hover,${e("pn-counter")} .pn-counter-element:out-of-range:-webkit-autofill:focus,${e("pn-counter")} .pn-counter-element:out-of-range:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #fef7f6 inset;-webkit-text-fill-color:#2d2013}${e("pn-counter")} .pn-counter-element::-webkit-inner-spin-button,${e("pn-counter")} .pn-counter-element::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none}${e("pn-counter")} .pn-counter-items{display:inline-flex;flex-direction:row;gap:0.5em;transition-property:gap;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-counter")} .pn-counter-items{transition-duration:0s;transition-delay:0s}}${e("pn-counter")} .pn-counter-items[data-hidebuttons]{gap:0}${e("pn-counter")} .pn-counter-items[data-hidebuttons]>${e("pn-button")}{transform:scale(0) translateZ(0);width:0}${e("pn-counter")} .pn-counter-items>${e("pn-button")}{transform:scale(1) translateZ(0);transform-origin:center center;width:3em;will-change:width, transform;transition-property:transform, width;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-counter")} .pn-counter-items>${e("pn-button")}{transition-duration:0s;transition-delay:0s}}${e("pn-counter")} .pn-counter-helpertext{color:#5e554a;font-size:0.875em;font-weight:400;margin:0.25em 0 0 0;display:flex;flex-direction:column;gap:0.25em}${e("pn-counter")} .pn-counter-sr-only{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);margin:-1px;white-space:nowrap}`}},[512,"pn-counter",{label:[1],helpertext:[1],value:[1538],counterid:[1],compact:[4],language:[1],labelDecrease:[1,"label-decrease"],labelIncrease:[1,"label-increase"],minMessage:[1,"min-message"],maxMessage:[1,"max-message"],name:[1],min:[2],max:[2],step:[2],list:[1],required:[4],readonly:[4],disabled:[4],clearAriaTimer:[32],displaySrValue:[32],showMinMaxMessage:[32],lastDispatchedValue:[32],interactType:[32]},void 0,{value:[{watchValue:0}],counterid:[{handleId:0}]}]),m=h,f=function(){"undefined"!=typeof customElements&&["pn-counter","pn-button","pn-icon","pn-spinner"].forEach((t=>{switch(t){case"pn-counter":customElements.get(e(e(t)))||customElements.define(e(e(t)),h);break;case"pn-button":customElements.get(e(e(t)))||l();break;case"pn-icon":customElements.get(e(e(t)))||u();break;case"pn-spinner":customElements.get(e(e(t)))||p()}}))};export{m as PnCounter,f as defineCustomElement}