@postnord/web-components/postnord-web-components/p-c2bbbcaa.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-43660913.js";import{u as r,k as o,e as a}from"./p-f64d17a6.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 h='<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 d=h;const l={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 p="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;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}@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: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 f=p;const b=class{constructor(n){t(this,n);this.counterInput=e(this,"counterInput",7);this.clearAriaTimer=undefined;this.displaySrValue=false;this.showMinMaxMessage=false;this.lastDispatchedValue=undefined;this.interactType=undefined;this.label=undefined;this.helpertext=undefined;this.value=0;this.counterid=this.id;this.language=null;this.labelDecrease=undefined;this.labelIncrease=undefined;this.minMessage=undefined;this.maxMessage=undefined;this.name=undefined;this.min=undefined;this.max=undefined;this.step=1;this.list=undefined;this.required=false;this.readonly=false;this.disabled=false}id=`pn-counter-${r()}`;idLabel=`${this.id}-label`;idText=`${this.id}-text`;idAmount=`${this.id}-count`;counterElement;get hostElement(){return n(this)}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){t.stopImmediatePropagation();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 l?.[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:"2fe59aa7c06e3005cd3f9c8b633bf3ee3c85833b"},i("div",{key:"206308ce9ff21a303013164a3ec4015074d494b2",class:"pn-counter",role:"group","aria-labelledby":this.idLabel,"aria-describedby":this.describedbyIds()},i("label",{key:"6843e23ed0c46cf33aaa6b83c9c7304775dba549",htmlFor:this.counterid,class:"pn-counter-label",id:this.idLabel},i("span",{key:"cbc609092923ef8806d7b5e77beb26021b490d44"},this.label)),i("div",{key:"df51b364dc11c020d390f3bed823caf7063a9c94",class:"pn-counter-items","data-hidebuttons":this.noButtons()},i("pn-button",{key:"52413b869322b9398eddfb81713609205594d59f","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:"8c9dd73dba29a17df0515758a48be4f4f8798bbf",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:"c10fc2e4f25708ed81dc95b8ea07c0c07803df1f","data-increase":true,appearance:"light",variant:"outlined","no-tab":this.noButtons(),icon:d,iconOnly:true,arialabel:this.labelIncrease||this.translate("INCREASE"),onClick:()=>this.increaseAmount()})),!!this.getTextMessage()&&i("p",{key:"e01ab71ae17a042681b5c3a87766bac914c6be10",id:this.idText,class:"pn-counter-helpertext"},i("span",{key:"d51a1a0e851e7a6afe79a3c384167324c906939a"},this.getTextMessage())),i("p",{key:"c89af26fd950c7166cec80b08feb1651feb54bba",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-c2bbbcaa.entry.js.map