@postnord/web-components/components/pn-counter.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
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}