@postnord/web-components/postnord-web-components/p-6e145c7e.entry.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{r as t,c as e,g as n,h as i,a as s}from"./p-c2c6299e.js";import{u as r,j as o,e as a}from"./p-c511b4fb.js";const c='<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 u=c;const l='<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 h=l;const p={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 d="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;transition-property:color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);-webkit-tap-highlight-color:transparent}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;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:outline-color, background-color, border-color, color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);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:-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:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}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: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)}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)}pn-counter .pn-counter-helpertext{color:#5e554a;font-weight:400;display:block;margin:0.25em 0 0 0}pn-counter .pn-counter-helpertext>span{display:block;font-size:0.875em}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 f=d;const b=class{constructor(n){t(this,n);this.counterInput=e(this,"counterInput",7)}id=`pn-counter-${r()}`;idLabel=`${this.id}-label`;idText=`${this.id}-text`;idAmount=`${this.id}-count`;counterElement;get hostElement(){return n(this)}clearAriaTimer;displaySrValue=false;showMinMaxMessage=false;lastDispatchedValue;interactType;label;helpertext;value=0;counterid=this.id;language=null;labelDecrease;labelIncrease;minMessage;maxMessage;name;min;max;step=1;list;required=false;readonly=false;disabled=false;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 o(this.hostElement)}componentDidLoad(){this.counterElement=this.hostElement.querySelector(".pn-counter-input");this.handleInputLength()}setVal(t){const{valueAsNumber:e}=t.target;if(isNaN(e))return;this.interactType="input";this.value=e}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(t){if(!/^(Home|End)$/.test(t.key))return;t.preventDefault();this.interactType="input";if(t.key==="Home")this.setMin();if(t.key==="End")this.setMax()}showSrContent(){if(this.clearAriaTimer){clearTimeout(this.clearAriaTimer)}this.displaySrValue=true;this.clearAriaTimer=setTimeout((()=>{this.displaySrValue=false}),4e3)}toggleMinMaxMessage(){const t=this.value===this.max;const e=`${t?"MAX":"MIN"}_VALUE_MESSAGE`;const n=this.translate(e)+`${t?this.max:this.min}`.toString();return t?this.maxMessage||n:this.minMessage||n}getTextMessage(t=false){if(this.showMinMaxMessage)return this.toggleMinMaxMessage();return t?this.value.toString():this.helpertext}describedbyIds(){const t=[];if(this.helpertext)t.push(this.idText);if(this.displaySrValue)t.push(this.idAmount);if(t.length===0)return null;return t.join(" ")}translate(t){return p?.[t]?.[this.language||a]}noButtons(){return this.disabled||this.readonly}handleInputLength(){const t=this.max?this.max.toString():this.value.toString();if(t.length>3)this.counterElement.style.setProperty("--pn-counter-ch",`${t.length-3}ch`);else this.counterElement.style.setProperty("--pn-counter-ch","0ch")}render(){return i(s,{key:"42278961c0d0656f60971018796b0f1d4e1f8450"},i("div",{key:"c1d68806774beaac97cb57c2a238ef8091291768",class:"pn-counter",role:"group","aria-labelledby":this.idLabel,"aria-describedby":this.describedbyIds()},i("label",{key:"2ca7b47e4ff075dc9c51acf9e35c14a43d77aef7",htmlFor:this.counterid,class:"pn-counter-label",id:this.idLabel},i("span",{key:"a37f9253f39cce2791b9b4e0fea677f80c5be710"},this.label)),i("div",{key:"96e021d653b0f3b370697369dc3486eccb72c6e5",class:"pn-counter-items","data-hidebuttons":this.noButtons()},i("pn-button",{key:"1ee4498010d2858ca9af4c8ef15f25f8e8aeeeca","data-decrease":true,appearance:"light",variant:"outlined","no-tab":this.noButtons(),icon:u,iconOnly:true,arialabel:this.labelDecrease||this.translate("DECREASE"),onClick:()=>this.decreaseAmount()}),i("input",{key:"b66bbcd5fdbac6cf4aee2d47f77b5926cfd7ff09",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:t=>this.setVal(t),onKeyDown:t=>this.keyBoardInput(t)}),i("pn-button",{key:"a54ad20d1ea02a118be222be61a0892e59af4db7","data-increase":true,appearance:"light",variant:"outlined","no-tab":this.noButtons(),icon:h,iconOnly:true,arialabel:this.labelIncrease||this.translate("INCREASE"),onClick:()=>this.increaseAmount()})),!!this.getTextMessage()&&i("p",{key:"457c9380f1302a36f361c6b81a4b4abd530a5e6e",id:this.idText,class:"pn-counter-helpertext"},i("span",{key:"aaff9bc613f72b1f69c24cbcd020fd07246845c6"},this.getTextMessage())),i("p",{key:"5d029126c4b3efef92aa5e542ad103de953d34e3",id:this.idAmount,class:"pn-counter-sr-only","aria-live":"assertive"},this.displaySrValue?this.getTextMessage(true):"")))}static get watchers(){return{value:["watchValue"],counterid:["handleId"]}}};b.style=f;export{b as pn_counter};
//# sourceMappingURL=p-6e145c7e.entry.js.map