@postnord/pn-marketweb-components 4.1.1 → 4.2.0

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

@@ -2,4 +2,4 @@
  * Built with Stencil
  * By PostNord.
  */
-import{transformTag as t,proxyCustomElement as e,HTMLElement as i,createEvent as a,h as n,Host as s}from"@stencil/core/internal/client";import{a as r}from"./arrow_left.js";import{a as p}from"./arrow_right.js";import{k as o,e as l}from"./helpers.js";import{d as g}from"./pn-button2.js";import{d as h}from"./pn-icon2.js";import{d}from"./pn-select2.js";import{d as c}from"./pn-spinner2.js";const u={PAGINATION:{sv:"Paginering",en:"Pagination",da:"Paginering",fi:"Sivunumerointi",no:"Paginering"},PAGE:{sv:"Sida",en:"Page",da:"Side",fi:"Sivu",no:"Side"},PREVIOUS_PAGE:{sv:"Föregående sida",en:"Previous page",da:"Forrige side",fi:"Edellinen sivu",no:"Forrige side"},NEXT_PAGE:{sv:"Nästa sida",en:"Next page",da:"Næste side",fi:"Seuraava sivu",no:"Neste side"},ROWS_PAGE:{sv:"Object per sida",en:"Items per page",da:"Varer pr. side",fi:"Kohteita per sivu",no:"Elementer per side"}},m=e(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.pageSelected=a(this,"pageSelected",7),this.rowsSelected=a(this,"rowsSelected",7)}listElement;get hostElement(){return this}list;label;urlTemplate="?page={page}";paginationId=null;language=null;page=1;pages;pagesVisible=5;rows=null;rowsList="10,25,50";rowsLabel=null;handlePage(){this.page>this.pages?this.page=this.pages:this.page<1&&(this.page=1)}handlePages(){const t=[];this.pages>1e4&&(console.error(`${this.hostElement.localName}: Invalid page count ${this.pages}. Maximum is 10000.`),this.pages=1e4);for(let e=0;this.pages>e;e++)t.push({index:e,page:e+1});this.list=t,this.handlePage()}handlePagesVisible(){5>this.pagesVisible&&(this.pagesVisible=5),this.pagesVisible%2==0&&(this.pagesVisible=Math.round(this.pagesVisible)-1)}pageSelected;rowsSelected;async componentWillLoad(){this.handlePagesVisible(),this.handlePages(),null===this.language&&await o(this.hostElement)}translate(t){return u[t][this.language||l]}isActivePage(t){return t===this.page}navigate({page:t,event:e,focus:i}){"number"==typeof t&&t>=1&&this.pages>=t&&(this.page=t),this.pageSelected.emit({page:this.page,mouse:e}),i&&requestAnimationFrame((()=>{const t=this.listElement.querySelector('a[aria-current="page"]');t?.focus({preventScroll:!0})}))}useRowList(){return!!this.rows&&!!this.rowsList}setRows(t){this.rows=Number(t.target.value),this.rowsSelected.emit({rows:this.rows,change:t})}getRowList(){return this.rowsList.split(",").map((t=>Number(t.trim())))}getPaginationIndex(){const t=this.page;let e=t-Math.ceil(this.pagesVisible/2),i=t+Math.floor(this.pagesVisible/2);for(let t=0;this.pagesVisible>t;t++)e<0?(i++,e++):i>this.pages&&(i--,e--);const a=0>e?0:e,n=a>=1,s=this.pages>i;return{low:s&&n?a+1:a,high:s&&n?i-1:i,leftIndent:n,rightIndent:s}}getPagination(){const{low:t,high:e}=this.getPaginationIndex();return this.list.slice(t,e)}getUrl(t){return this.setPageText(this.urlTemplate,t)}setPageText(t,e){return t.replace("{page}",""+e)}getPrevPage(){let t=this.page;return t>1?t-=1:1}getNextPage(){let t=this.page;return this.pages>t?t+=1:this.pages}showIntendation(t=!1){const{leftIndent:e,rightIndent:i}=this.getPaginationIndex();return t?i:e}renderDivider(t=!1){return n("span",{class:"pn-pagination-dot","data-show":this.showIntendation(t)},"...")}renderButton({page:t,dataAttr:e}){const i=this.isActivePage(t);return n("pn-button",{label:""+t,arialabel:`${this.translate("PAGE")} ${t}`,ariacurrent:i?"page":null,href:this.getUrl(t),variant:i?"outlined":"",appearance:"light",small:!0,"data-arrow":e,"data-show":e&&this.showIntendation("last"===e),onPnClick:({detail:e})=>this.navigate({page:t,event:e,focus:!0})})}renderItem({page:t}){return n("li",{class:"pn-pagination-list-item","aria-setsize":this.pages,"aria-posinset":t},this.renderButton({page:t}))}renderJumpButton(t=!1){const e=t?"next":"prev",i=t?p:r,a=t?this.getNextPage():this.getPrevPage(),s=t?this.pages===this.page:1===this.page,o=s?"":` (${a})`,l=`${this.translate(t?"NEXT_PAGE":"PREVIOUS_PAGE")}${o}`;return n("pn-button",{arialabel:l,ariacurrent:s?"page":null,href:this.getUrl(a),rel:s?null:e,appearance:"light",small:!0,icon:i,iconOnly:!0,onPnClick:({detail:t})=>this.navigate({page:a,event:t})})}render(){return n(s,{key:"9c803b80520ec25c53d3e7e96771e8bdba352946"},n("nav",{key:"1829b73b38273b421d012c73c7f1d43ba855fdca",id:this.paginationId,class:"pn-pagination","aria-label":this.label||this.translate("PAGINATION")},this.useRowList()&&n("pn-select",{key:"95e4cc8df8a96309e9417ba4a02889e100d06fbb",class:"pn-pagination-rows",label:this.rowsLabel||this.translate("ROWS_PAGE"),onChange:t=>this.setRows(t)},this.getRowList().map((t=>n("option",{value:t,selected:this.rows===Number(t),innerHTML:""+t})))),n("div",{key:"b28d4c46195f783905b9d5b4d20d53b9dc7c7aff",class:"pn-pagination-container","data-right":this.useRowList()},this.renderJumpButton(),this.renderButton({page:1,dataAttr:"first"}),this.renderDivider(),n("ol",{key:"dc1ef8dd87e9446001a6d4adf49f83ce6a53c066",class:"pn-pagination-list",ref:t=>this.listElement=t},this.getPagination().map((t=>this.renderItem(t)))),this.renderDivider(!0),this.renderButton({page:this.pages,dataAttr:"last"}),this.renderJumpButton(!0))))}static get watchers(){return{page:[{handlePage:0}],pages:[{handlePages:0}],pagesVisible:[{handlePagesVisible:0}]}}static get style(){return`${t("pn-pagination")}{display:block;margin-top:1.5em}${t("pn-pagination")} .pn-pagination{display:flex;gap:1em;flex-wrap:wrap;padding-top:1em;border-top:0.0625em solid #e9e6e5}${t("pn-pagination")} .pn-pagination-container{display:flex;align-items:center;flex-wrap:wrap;gap:0.5em;margin:0 auto}${t("pn-pagination")} .pn-pagination-container[data-right]{margin-right:0}${t("pn-pagination")} .pn-pagination-container>[data-arrow]{display:none}${t("pn-pagination")} .pn-pagination-container>[data-arrow][data-show]{display:inline-block}${t("pn-pagination")} .pn-pagination-rows{flex:0 0 auto;margin-right:auto}${t("pn-pagination")} .pn-pagination-pages{flex:0 0 auto;margin-left:auto}${t("pn-pagination")} .pn-pagination-list{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:0.5em}${t("pn-pagination")} .pn-pagination-list ${t("pn-button")}>.pn-button{padding:0.375em 0.75em}${t("pn-pagination")} .pn-pagination-dot{display:none;padding:0.375em 0.5em;height:2em;width:2.5em;text-align:center}${t("pn-pagination")} .pn-pagination-dot[data-show]{display:inline-block}`}},[512,"pn-pagination",{label:[1],urlTemplate:[1,"url-template"],paginationId:[1,"pagination-id"],language:[1],page:[1538],pages:[1026],pagesVisible:[1026,"pages-visible"],rows:[1026],rowsList:[1,"rows-list"],rowsLabel:[1,"rows-label"],list:[32]},void 0,{page:[{handlePage:0}],pages:[{handlePages:0}],pagesVisible:[{handlePagesVisible:0}]}]),b=m,f=function(){"undefined"!=typeof customElements&&["pn-pagination","pn-button","pn-icon","pn-select","pn-spinner"].forEach((e=>{switch(e){case"pn-pagination":customElements.get(t(t(e)))||customElements.define(t(t(e)),m);break;case"pn-button":customElements.get(t(t(e)))||g();break;case"pn-icon":customElements.get(t(t(e)))||h();break;case"pn-select":customElements.get(t(t(e)))||d();break;case"pn-spinner":customElements.get(t(t(e)))||c()}}))};export{b as PnPagination,f as defineCustomElement}
+import{transformTag as e,proxyCustomElement as t,HTMLElement as i,createEvent as a,h as n,Host as s}from"@stencil/core/internal/client";import{a as r}from"./arrow_left.js";import{a as p}from"./arrow_right.js";import{k as o,e as l}from"./helpers.js";import{d as g}from"./pn-button2.js";import{d as h}from"./pn-icon2.js";import{d}from"./pn-select2.js";import{d as c}from"./pn-spinner2.js";const u={PAGINATION:{sv:"Paginering",en:"Pagination",da:"Paginering",fi:"Sivunumerointi",no:"Paginering"},PAGE:{sv:"Sida",en:"Page",da:"Side",fi:"Sivu",no:"Side"},PREVIOUS_PAGE:{sv:"Föregående sida",en:"Previous page",da:"Forrige side",fi:"Edellinen sivu",no:"Forrige side"},NEXT_PAGE:{sv:"Nästa sida",en:"Next page",da:"Næste side",fi:"Seuraava sivu",no:"Neste side"},ROWS_PAGE:{sv:"Object per sida",en:"Items per page",da:"Varer pr. side",fi:"Kohteita per sivu",no:"Elementer per side"}},m=t(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.pageSelected=a(this,"pageSelected",7),this.rowsSelected=a(this,"rowsSelected",7)}listElement;get hostElement(){return this}list;label;urlTemplate="?page={page}";paginationId=null;language=null;page=1;pages;pagesVisible=5;rows=null;rowsList="10,25,50";rowsLabel=null;handlePage(){this.page>this.pages?this.page=this.pages:this.page<1&&(this.page=1)}handlePages(){const e=[];this.pages>1e4&&(console.error(`${this.hostElement.localName}: Invalid page count ${this.pages}. Maximum is 10000.`),this.pages=1e4);for(let t=0;this.pages>t;t++)e.push({index:t,page:t+1});this.list=e,this.handlePage()}handlePagesVisible(){5>this.pagesVisible&&(this.pagesVisible=5),this.pagesVisible%2==0&&(this.pagesVisible=Math.round(this.pagesVisible)-1)}pageSelected;rowsSelected;async componentWillLoad(){this.handlePagesVisible(),this.handlePages(),null===this.language&&await o(this.hostElement)}translate(e){return u[e][this.language||l]}isActivePage(e){return e===this.page}navigate({page:e,event:t,focus:i}){"number"==typeof e&&e>=1&&this.pages>=e&&(this.page=e),this.pageSelected.emit({page:this.page,mouse:t}),i&&requestAnimationFrame((()=>{const e=this.listElement.querySelector('a[aria-current="page"]');e?.focus({preventScroll:!0})}))}useRowList(){return!!this.rows&&!!this.rowsList}setRows(e){this.rows=Number(e.target.value),this.rowsSelected.emit({rows:this.rows,change:e})}getRowList(){return this.rowsList.split(",").map((e=>Number(e.trim())))}getPaginationIndex(){const e=this.page;let t=e-Math.ceil(this.pagesVisible/2),i=e+Math.floor(this.pagesVisible/2);for(let e=0;this.pagesVisible>e;e++)t<0?(i++,t++):i>this.pages&&(i--,t--);const a=0>t?0:t,n=a>=1,s=this.pages>i;return{low:s&&n?a+1:a,high:s&&n?i-1:i,leftIndent:n,rightIndent:s}}getPagination(){const{low:e,high:t}=this.getPaginationIndex();return this.list.slice(e,t)}getUrl(e){return this.setPageText(this.urlTemplate,e)}setPageText(e,t){return e.replace("{page}",""+t)}getPrevPage(){let e=this.page;return e>1?e-=1:1}getNextPage(){let e=this.page;return this.pages>e?e+=1:this.pages}showIntendation(e=!1){const{leftIndent:t,rightIndent:i}=this.getPaginationIndex();return e?i:t}renderDivider(e=!1){return n("span",{class:"pn-pagination-dot","data-show":this.showIntendation(e)},"...")}renderButton({page:e,dataAttr:t}){const i=this.isActivePage(e);return n("pn-button",{label:""+e,arialabel:`${this.translate("PAGE")} ${e}`,ariacurrent:i?"page":null,href:this.getUrl(e),variant:i?"outlined":"",appearance:"light",small:!0,"data-arrow":t,"data-show":t&&this.showIntendation("last"===t),onPnClick:({detail:t})=>this.navigate({page:e,event:t,focus:!0})})}renderItem({page:e}){return n("li",{class:"pn-pagination-list-item","aria-setsize":this.pages,"aria-posinset":e},this.renderButton({page:e}))}renderJumpButton(e=!1){const t=e?"next":"prev",i=e?p:r,a=e?this.getNextPage():this.getPrevPage(),s=e?this.pages===this.page:1===this.page,o=s?"":` (${a})`,l=`${this.translate(e?"NEXT_PAGE":"PREVIOUS_PAGE")}${o}`;return n("pn-button",{arialabel:l,ariacurrent:s?"page":null,href:this.getUrl(a),rel:s?null:t,appearance:"light",small:!0,icon:i,iconOnly:!0,onPnClick:({detail:e})=>this.navigate({page:a,event:e})})}render(){return n(s,{key:"4b78edcca36adfd17035e9bed30ae5af6918d6e8"},n("nav",{key:"600dd0a880e03b9b5e98de4ee2d55134a0a90b8e",id:this.paginationId,class:"pn-pagination","aria-label":this.label||this.translate("PAGINATION")},this.useRowList()&&n("pn-select",{key:"8cca49bb36c9b10fa05e7637acec36e28b25fb8e",class:"pn-pagination-rows",label:this.rowsLabel||this.translate("ROWS_PAGE"),onChange:e=>this.setRows(e)},this.getRowList().map((e=>n("option",{value:e,selected:this.rows===Number(e),innerHTML:""+e})))),n("div",{key:"d3fc1f233ab4d62c868a8a0a2076d7666d5dd53a",class:"pn-pagination-container","data-right":this.useRowList()},this.renderJumpButton(),this.renderButton({page:1,dataAttr:"first"}),this.renderDivider(),n("ol",{key:"17be56bca6cd83e7f7dc3174e2e92d91a05930dd",class:"pn-pagination-list",ref:e=>this.listElement=e},this.getPagination().map((e=>this.renderItem(e)))),this.renderDivider(!0),this.renderButton({page:this.pages,dataAttr:"last"}),this.renderJumpButton(!0))))}static get watchers(){return{page:[{handlePage:0}],pages:[{handlePages:0}],pagesVisible:[{handlePagesVisible:0}]}}static get style(){return`${e("pn-pagination")}{display:block;margin-top:1.5em}${e("pn-pagination")} .pn-pagination{display:flex;gap:1em;flex-wrap:wrap;padding-top:1em;border-top:0.0625em solid #e9e6e5}${e("pn-pagination")} .pn-pagination-container{display:flex;align-items:center;flex-wrap:wrap;gap:0.5em;margin:0 auto}${e("pn-pagination")} .pn-pagination-container[data-right]{margin-right:0}${e("pn-pagination")} .pn-pagination-container>[data-arrow]{display:none}${e("pn-pagination")} .pn-pagination-container>[data-arrow][data-show]{display:inline-block}${e("pn-pagination")} .pn-pagination-rows{flex:0 0 auto;margin-right:auto}${e("pn-pagination")} .pn-pagination-pages{flex:0 0 auto;margin-left:auto}${e("pn-pagination")} .pn-pagination-list{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:0.5em}${e("pn-pagination")} .pn-pagination-list ${e("pn-button")}>.pn-button{padding:0.375em 0.75em}${e("pn-pagination")} .pn-pagination-dot{display:none;padding:0.375em 0.5em;height:2em;width:2.5em;text-align:center}${e("pn-pagination")} .pn-pagination-dot[data-show]{display:inline-block}`}},[512,"pn-pagination",{label:[1],urlTemplate:[1,"url-template"],paginationId:[1,"pagination-id"],language:[1],page:[1538],pages:[1026],pagesVisible:[1026,"pages-visible"],rows:[1026],rowsList:[1,"rows-list"],rowsLabel:[1,"rows-label"],list:[32]},void 0,{page:[{handlePage:0}],pages:[{handlePages:0}],pagesVisible:[{handlePagesVisible:0}]}]),b=m,f=function(){"undefined"!=typeof customElements&&["pn-pagination","pn-button","pn-icon","pn-select","pn-spinner"].forEach((t=>{switch(t){case"pn-pagination":customElements.get(e(e(t)))||customElements.define(e(e(t)),m);break;case"pn-button":customElements.get(e(e(t)))||g();break;case"pn-icon":customElements.get(e(e(t)))||h();break;case"pn-select":customElements.get(e(e(t)))||d();break;case"pn-spinner":customElements.get(e(e(t)))||c()}}))};export{b as PnPagination,f as defineCustomElement}

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

@@ -2,4 +2,4 @@
  * Built with Stencil
  * By PostNord.
  */
-import{transformTag as i,proxyCustomElement as o,Mixin as t,h as e,Host as n}from"@stencil/core/internal/client";import{u as a}from"./helpers.js";import{a as r}from"./index2.js";import{d}from"./pn-icon2.js";const p=o(class extends(t(r)){constructor(i){super(!1),!1!==i&&this.__registerHost()}id="pn-radio-"+a();idHelpertext=this.id+"-helpertext";contentArea;radioInput;get hostElement(){return this}label;helpertext;value;name;checked=!1;radioid=this.id;required=!1;disabled=!1;invalid=!1;tile=!1;expand=!1;icon=null;handleId(){this.idHelpertext=this.radioid+"-helpertext"}handleChecked(i){this.checked=i??this.radioInput.checked,this.displayContent()&&(this.checked?(this.openDropdown(this.contentArea),this.uncheckOtherRadios()):this.closeDropdown(this.contentArea))}handleChange(i){const o=i.target,{name:t}=o;t===this.name&&(this.checked=o===this.radioInput&&o.checked)}componentWillLoad(){this.handleId()}componentDidLoad(){requestAnimationFrame((()=>this.displayContent()&&this.checked&&this.openDropdown(this.contentArea)))}uncheckOtherRadios(){if(!this.name)return;const i=document.querySelectorAll(`pn-radio-button[name="${this.name}"]`);Array.from(i).forEach((i=>i!==this.hostElement&&(i.checked=!1)))}isInvalid(){return this.invalid&&!this.disabled}displayText(){return this.displayLabel()||this.displayHelpertext()}displayLabel(){return!!this.label}displayHelpertext(){return!(!this.helpertext&&!this.hostElement.querySelector('[slot="helpertext"]')?.textContent)}displayIcon(){return this.tile&&!!this.icon}displayContent(){return this.tile&&this.expand}render(){return e(n,{key:"d9dbe33df6c0844b6c747285996a6a2886ef4fbd"},e("input",{key:"131acc3ca2b53a29e32243ad4910d57847d35a76",type:"radio",id:this.radioid,class:"pn-radio-input",value:this.value,name:this.name,disabled:this.disabled,checked:this.checked,required:this.required,"aria-invalid":this.isInvalid()?.toString(),"aria-describedby":this.displayHelpertext()?this.idHelpertext:null,"data-tile":this.tile,"data-expand":this.expand,ref:i=>this.radioInput=i}),e("div",{key:"e63874e20e8cd6e3ba25314e2777723fc1d09a9b",class:"pn-radio","data-tile":this.tile,"data-expand":this.expand,"data-invalid":this.isInvalid()},e("div",{key:"6af4d9f83ecae41248fd142d8a1dfdbee1e86fd3",class:"pn-radio-button"},e("div",{key:"8ea822e3b27a36c79795ad51231f306c9feeb439",class:"pn-radio-outer"},e("div",{key:"ea69cef2c0276512a0917852681ee07b696e0e69",class:"pn-radio-inner"}))),e("p",{key:"ac0e72d695546b716c061b57ca246f2304ebc29c",class:"pn-radio-content",hidden:!this.displayText()},e("label",{key:"af6e10051b6df5eb25a4c705e7934fb7efd0927a",htmlFor:this.radioid,class:"pn-radio-label",hidden:!this.displayLabel()},this.label),e("span",{key:"3daec2ddd84dbc6ffb0ab22c2d8dcaa29c7dbfc5",id:this.idHelpertext,class:"pn-radio-helpertext",hidden:!this.displayHelpertext()},this.helpertext,e("slot",{key:"09037832097ae5ad1f5d02e71e179d990d7cf3c0",name:"helpertext"})),e("slot",{key:"d77fefcc1fed9e5386360501d666ff7f4adc7204"})),this.displayIcon()&&e("pn-icon",{key:"b8c8294fb100ad921278b378e317c95d2702806b",icon:this.icon,color:"gray900"}),e("div",{key:"8eac1b2c621bb8fad7cb89bd226ae0ce13842fc6",class:"pn-radio-container","data-open":this.checked,hidden:!this.displayContent(),style:{height:"0px"},ref:i=>this.contentArea=i},e("div",{key:"f12c0a60214a8d0adf93e587e909994ad06800e9",class:"pn-radio-area"},e("slot",{key:"a67c2b5bee945a044aa5910544fa77f1034985ca",name:"content"})))))}static get watchers(){return{radioid:[{handleId:0}],checked:[{handleChecked:0}]}}static get style(){return`${i("pn-radio-button")}{position:relative;display:inline-block}${i("pn-radio-button")} .pn-radio{position:relative;display:flex;flex-wrap:wrap;flex-direction:row}${i("pn-radio-button")} .pn-radio-label{cursor:pointer;color:#2d2013;-webkit-tap-highlight-color:transparent}${i("pn-radio-button")} .pn-radio-helpertext{color:#5e554a;margin:0 0 0.5em 0}${i("pn-radio-button")} .pn-radio-helpertext:last-child{margin:0}${i("pn-radio-button")} .pn-radio-content{display:flex;flex-direction:column;align-items:flex-start;font-weight:400;line-height:1.5;flex:1;margin:0 0 0 0.75em}${i("pn-radio-button")} .pn-radio-button{display:flex;gap:0.75em;padding:0}${i("pn-radio-button")} .pn-radio-outer{background-color:#ffffff;border:0.0625em solid #969087;border-radius:50%;height:1.5em;width:1.5em;display:flex;justify-content:center;align-items:center;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:border-color, background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${i("pn-radio-button")} .pn-radio-outer{transition-duration:0s;transition-delay:0s}}${i("pn-radio-button")} .pn-radio-inner{height:0.75em;width:0.75em;background-color:#005d92;border-radius:50%;transform:scale(0);transform-origin:center center;transition-property:background-color, transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${i("pn-radio-button")} .pn-radio-inner{transition-duration:0s;transition-delay:0s}}${i("pn-radio-button")} .pn-radio[data-tile]{padding:1em;border:0.0625em solid #969087;border-radius:0.5em;background-color:#ffffff;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:border-color, background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${i("pn-radio-button")} .pn-radio[data-tile]{transition-duration:0s;transition-delay:0s}}${i("pn-radio-button")} .pn-radio[data-tile] .pn-radio-outer{outline:none}${i("pn-radio-button")} .pn-radio[data-invalid]{border-color:#a70707}${i("pn-radio-button")} .pn-radio[data-invalid] .pn-radio-outer{border-color:#a70707}${i("pn-radio-button")} .pn-radio[data-invalid] .pn-radio-inner{background-color:#a70707}${i("pn-radio-button")} .pn-radio-container{flex:1 1 100%;overflow:hidden;visibility:hidden}${i("pn-radio-button")} .pn-radio-container[data-open]{visibility:visible;overflow:unset}${i("pn-radio-button")} .pn-radio-container[data-moving]{visibility:visible;overflow:hidden}${i("pn-radio-button")} .pn-radio-area{padding:0.75em 0 0 2.25em;display:flex;flex-direction:column;flex-wrap:nowrap;gap:1em}${i("pn-radio-button")} .pn-radio>${i("pn-icon")}{margin-left:0.75em}${i("pn-radio-button")}>input[type=radio]{cursor:pointer;opacity:0;position:absolute;margin:0;z-index:1;top:0;left:0;font-size:1em;width:1.5em;height:1.5em;-webkit-tap-highlight-color:transparent}${i("pn-radio-button")}>input[type=radio][data-tile]:not([data-expand]){width:100%;height:100%}${i("pn-radio-button")}>input[type=radio][data-expand]{top:1em;left:1em}${i("pn-radio-button")}>input[type=radio][aria-describedby]+.pn-radio[data-tile] .pn-radio-label{font-weight:500}${i("pn-radio-button")}>input[type=radio]:hover+.pn-radio[data-tile]{border-color:#005d92;background-color:#e0f8ff}${i("pn-radio-button")}>input[type=radio]:hover+.pn-radio[data-tile] .pn-radio-outer{background-color:#e0f8ff}${i("pn-radio-button")}>input[type=radio]:hover+.pn-radio[data-tile][data-invalid]{border-color:#a70707;background-color:#fdefee}${i("pn-radio-button")}>input[type=radio]:hover+.pn-radio[data-tile][data-invalid] .pn-radio-outer{background-color:#fdefee}${i("pn-radio-button")}>input[type=radio]:hover+.pn-radio[data-invalid] .pn-radio-outer{border-color:#a70707;background-color:#fdefee}${i("pn-radio-button")}>input[type=radio]:hover+.pn-radio .pn-radio-outer{border-color:#005d92;background-color:#e0f8ff}${i("pn-radio-button")}>input[type=radio]:checked:hover+.pn-radio[data-tile][data-invalid]{border-color:#500715}${i("pn-radio-button")}>input[type=radio]:checked:hover+.pn-radio[data-invalid]>.pn-radio-button>.pn-radio-outer{border-color:#500715}${i("pn-radio-button")}>input[type=radio]:focus-visible+.pn-radio .pn-radio-outer{outline-color:#005d92}${i("pn-radio-button")}>input[type=radio]:focus-visible+.pn-radio[data-invalid] .pn-radio-outer{outline-color:#a70707}${i("pn-radio-button")}>input[type=radio]:focus-visible+.pn-radio[data-tile]{outline-color:#005d92;border-color:#005d92}${i("pn-radio-button")}>input[type=radio]:focus-visible+.pn-radio[data-tile][data-invalid]{outline-color:#a70707;border-color:#a70707}${i("pn-radio-button")}>input[type=radio]:focus-visible+.pn-radio[data-tile]>.pn-radio-button>.pn-radio-outer{outline:none}${i("pn-radio-button")}>input[type=radio]:checked+.pn-radio[data-tile]{border-color:#005d92;background-color:#e0f8ff}${i("pn-radio-button")}>input[type=radio]:checked+.pn-radio[data-tile][data-invalid]{border-color:#a70707;background-color:#fdefee}${i("pn-radio-button")}>input[type=radio]:checked+.pn-radio>.pn-radio-button>.pn-radio-outer{border-color:#005d92}${i("pn-radio-button")}>input[type=radio]:checked+.pn-radio>.pn-radio-button>.pn-radio-outer>.pn-radio-inner{transform:scale(1);background-color:#005d92}${i("pn-radio-button")}>input[type=radio]:checked+.pn-radio[data-invalid]>.pn-radio-button>.pn-radio-outer{border-color:#a70707}${i("pn-radio-button")}>input[type=radio]:checked+.pn-radio[data-invalid]>.pn-radio-button>.pn-radio-outer>.pn-radio-inner{background-color:#a70707}${i("pn-radio-button")}>input[type=radio]:disabled{pointer-events:none}${i("pn-radio-button")}>input[type=radio]:disabled+.pn-radio .pn-radio-label{pointer-events:none}${i("pn-radio-button")}>input[type=radio]:disabled+.pn-radio[data-tile]{background-color:#f3f2f2;border-color:#f3f2f2}${i("pn-radio-button")}>input[type=radio]:disabled+.pn-radio[data-tile]>${i("pn-icon")}>.pn-icon-svg path{fill:#5e554a}${i("pn-radio-button")}>input[type=radio]:disabled+.pn-radio[data-tile]>.pn-radio-content>.pn-radio-label{color:#5e554a}${i("pn-radio-button")}>input[type=radio]:disabled+.pn-radio>.pn-radio-button>.pn-radio-outer{background-color:#f3f2f2;border-color:#969087;outline:none}${i("pn-radio-button")}>input[type=radio]:disabled+.pn-radio>.pn-radio-button>.pn-radio-outer>.pn-radio-inner{background-color:#969087}`}},[772,"pn-radio-button",{label:[1],helpertext:[1],value:[513],name:[1],checked:[1028],radioid:[1],required:[4],disabled:[4],invalid:[4],tile:[4],expand:[4],icon:[1],isClosing:[32],isExpanding:[32]},[[8,"change","handleChange"]],{radioid:[{handleId:0}],checked:[{handleChecked:0}]}]),l=p,c=function(){"undefined"!=typeof customElements&&["pn-radio-button","pn-icon"].forEach((o=>{switch(o){case"pn-radio-button":customElements.get(i(i(o)))||customElements.define(i(i(o)),p);break;case"pn-icon":customElements.get(i(i(o)))||d()}}))};export{l as PnRadioButton,c as defineCustomElement}
+import{transformTag as i,proxyCustomElement as o,Mixin as t,h as e,Host as n}from"@stencil/core/internal/client";import{u as a}from"./helpers.js";import{a as r}from"./index2.js";import{d}from"./pn-icon2.js";const p=o(class extends(t(r)){constructor(i){super(!1),!1!==i&&this.__registerHost()}id="pn-radio-"+a();idHelpertext=this.id+"-helpertext";contentArea;radioInput;get hostElement(){return this}label;helpertext;value;name;checked=!1;radioid=this.id;required=!1;disabled=!1;invalid=!1;tile=!1;expand=!1;icon=null;handleId(){this.idHelpertext=this.radioid+"-helpertext"}handleChecked(i){this.checked=i??this.radioInput.checked,this.displayContent()&&(this.checked?(this.openDropdown(this.contentArea),this.uncheckOtherRadios()):this.closeDropdown(this.contentArea))}handleChange(i){const o=i.target,{name:t}=o;t===this.name&&(this.checked=o===this.radioInput&&o.checked)}componentWillLoad(){this.handleId()}componentDidLoad(){requestAnimationFrame((()=>this.displayContent()&&this.checked&&this.openDropdown(this.contentArea)))}uncheckOtherRadios(){if(!this.name)return;const i=document.querySelectorAll(`pn-radio-button[name="${this.name}"]`);Array.from(i).forEach((i=>i!==this.hostElement&&(i.checked=!1)))}isInvalid(){return this.invalid&&!this.disabled}displayText(){return this.displayLabel()||this.displayHelpertext()}displayLabel(){return!!this.label}displayHelpertext(){return!(!this.helpertext&&!this.hostElement.querySelector('[slot="helpertext"]')?.textContent)}displayIcon(){return this.tile&&!!this.icon}displayContent(){return this.tile&&this.expand}render(){return e(n,{key:"f386b0de0377d3dbe6891a2396d32b91a808d53c"},e("input",{key:"189e352a198275f4dbd733425166e9cb2ed417ef",type:"radio",id:this.radioid,class:"pn-radio-input",value:this.value,name:this.name,disabled:this.disabled,checked:this.checked,required:this.required,"aria-invalid":this.isInvalid()?.toString(),"aria-describedby":this.displayHelpertext()?this.idHelpertext:null,"data-tile":this.tile,"data-expand":this.expand,ref:i=>this.radioInput=i}),e("div",{key:"710dcfe5b1660d25a9d98eb2c3739eb092f2ab4e",class:"pn-radio","data-tile":this.tile,"data-expand":this.expand,"data-invalid":this.isInvalid()},e("div",{key:"2d6bd1b03ee6565b88773c60a529ae2c5be89ffd",class:"pn-radio-button"},e("div",{key:"8b15488acb65132b2498d361d320bb804af793de",class:"pn-radio-outer"},e("div",{key:"64ebbe9b4d18f158a43bb5d82116ef4b19325ca1",class:"pn-radio-inner"}))),e("p",{key:"3b5ed02eeae60cff45b3b4999055c6d853a6c22f",class:"pn-radio-content",hidden:!this.displayText()},e("label",{key:"d5f3c5f59630407a45cc48fcb26e60fe7419c73c",htmlFor:this.radioid,class:"pn-radio-label",hidden:!this.displayLabel()},this.label),e("span",{key:"d4329417f178f6e7bcff365a1c051ebaa51b0447",id:this.idHelpertext,class:"pn-radio-helpertext",hidden:!this.displayHelpertext()},this.helpertext,e("slot",{key:"defddc5970a0ea4c94c4f7b07e2cec3e7616d8c2",name:"helpertext"})),e("slot",{key:"edaaf37351bb5d05bdc92696ac9ee2c8bc8e13f7"})),this.displayIcon()&&e("pn-icon",{key:"b9cd0ab07c691020efe39e8bb6ec39d02d5be826",icon:this.icon,color:"gray900"}),e("div",{key:"89655e67304498950e11c0388fddbbde350239a1",class:"pn-radio-container","data-open":this.checked,hidden:!this.displayContent(),style:{height:"0px"},ref:i=>this.contentArea=i},e("div",{key:"eeebaf7c0b1fe8327810faec62877888cb6ff95d",class:"pn-radio-area"},e("slot",{key:"c997ee7e8ef719ff4b830df30a414cea637a54ff",name:"content"})))))}static get watchers(){return{radioid:[{handleId:0}],checked:[{handleChecked:0}]}}static get style(){return`${i("pn-radio-button")}{position:relative;display:inline-block}${i("pn-radio-button")} .pn-radio{position:relative;display:flex;flex-wrap:wrap;flex-direction:row}${i("pn-radio-button")} .pn-radio-label{cursor:pointer;color:#2d2013;-webkit-tap-highlight-color:transparent}${i("pn-radio-button")} .pn-radio-helpertext{color:#5e554a;margin:0 0 0.5em 0}${i("pn-radio-button")} .pn-radio-helpertext:last-child{margin:0}${i("pn-radio-button")} .pn-radio-content{display:flex;flex-direction:column;align-items:flex-start;font-weight:400;line-height:1.5;flex:1;margin:0 0 0 0.75em}${i("pn-radio-button")} .pn-radio-button{display:flex;gap:0.75em;padding:0}${i("pn-radio-button")} .pn-radio-outer{background-color:#ffffff;border:0.0625em solid #969087;border-radius:50%;height:1.5em;width:1.5em;display:flex;justify-content:center;align-items:center;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:border-color, background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${i("pn-radio-button")} .pn-radio-outer{transition-duration:0s;transition-delay:0s}}${i("pn-radio-button")} .pn-radio-inner{height:0.75em;width:0.75em;background-color:#005d92;border-radius:50%;transform:scale(0);transform-origin:center center;transition-property:background-color, transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${i("pn-radio-button")} .pn-radio-inner{transition-duration:0s;transition-delay:0s}}${i("pn-radio-button")} .pn-radio[data-tile]{padding:1em;border:0.0625em solid #969087;border-radius:0.5em;background-color:#ffffff;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:border-color, background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${i("pn-radio-button")} .pn-radio[data-tile]{transition-duration:0s;transition-delay:0s}}${i("pn-radio-button")} .pn-radio[data-tile] .pn-radio-outer{outline:none}${i("pn-radio-button")} .pn-radio[data-invalid]{border-color:#a70707}${i("pn-radio-button")} .pn-radio[data-invalid] .pn-radio-outer{border-color:#a70707}${i("pn-radio-button")} .pn-radio[data-invalid] .pn-radio-inner{background-color:#a70707}${i("pn-radio-button")} .pn-radio-container{flex:1 1 100%;overflow:hidden;visibility:hidden}${i("pn-radio-button")} .pn-radio-container[data-open]{visibility:visible;overflow:unset}${i("pn-radio-button")} .pn-radio-container[data-moving]{visibility:visible;overflow:hidden}${i("pn-radio-button")} .pn-radio-area{padding:0.75em 0 0 2.25em;display:flex;flex-direction:column;flex-wrap:nowrap;gap:1em}${i("pn-radio-button")} .pn-radio>${i("pn-icon")}{margin-left:0.75em}${i("pn-radio-button")}>input[type=radio]{cursor:pointer;opacity:0;position:absolute;margin:0;z-index:1;top:0;left:0;font-size:1em;width:1.5em;height:1.5em;-webkit-tap-highlight-color:transparent}${i("pn-radio-button")}>input[type=radio][data-tile]:not([data-expand]){width:100%;height:100%}${i("pn-radio-button")}>input[type=radio][data-expand]{top:1em;left:1em}${i("pn-radio-button")}>input[type=radio][aria-describedby]+.pn-radio[data-tile] .pn-radio-label{font-weight:500}${i("pn-radio-button")}>input[type=radio]:hover+.pn-radio[data-tile]{border-color:#005d92;background-color:#e0f8ff}${i("pn-radio-button")}>input[type=radio]:hover+.pn-radio[data-tile] .pn-radio-outer{background-color:#e0f8ff}${i("pn-radio-button")}>input[type=radio]:hover+.pn-radio[data-tile][data-invalid]{border-color:#a70707;background-color:#fdefee}${i("pn-radio-button")}>input[type=radio]:hover+.pn-radio[data-tile][data-invalid] .pn-radio-outer{background-color:#fdefee}${i("pn-radio-button")}>input[type=radio]:hover+.pn-radio[data-invalid] .pn-radio-outer{border-color:#a70707;background-color:#fdefee}${i("pn-radio-button")}>input[type=radio]:hover+.pn-radio .pn-radio-outer{border-color:#005d92;background-color:#e0f8ff}${i("pn-radio-button")}>input[type=radio]:checked:hover+.pn-radio[data-tile][data-invalid]{border-color:#500715}${i("pn-radio-button")}>input[type=radio]:checked:hover+.pn-radio[data-invalid]>.pn-radio-button>.pn-radio-outer{border-color:#500715}${i("pn-radio-button")}>input[type=radio]:focus-visible+.pn-radio .pn-radio-outer{outline-color:#005d92}${i("pn-radio-button")}>input[type=radio]:focus-visible+.pn-radio[data-invalid] .pn-radio-outer{outline-color:#a70707}${i("pn-radio-button")}>input[type=radio]:focus-visible+.pn-radio[data-tile]{outline-color:#005d92;border-color:#005d92}${i("pn-radio-button")}>input[type=radio]:focus-visible+.pn-radio[data-tile][data-invalid]{outline-color:#a70707;border-color:#a70707}${i("pn-radio-button")}>input[type=radio]:focus-visible+.pn-radio[data-tile]>.pn-radio-button>.pn-radio-outer{outline:none}${i("pn-radio-button")}>input[type=radio]:checked+.pn-radio[data-tile]{border-color:#005d92;background-color:#e0f8ff}${i("pn-radio-button")}>input[type=radio]:checked+.pn-radio[data-tile][data-invalid]{border-color:#a70707;background-color:#fdefee}${i("pn-radio-button")}>input[type=radio]:checked+.pn-radio>.pn-radio-button>.pn-radio-outer{border-color:#005d92}${i("pn-radio-button")}>input[type=radio]:checked+.pn-radio>.pn-radio-button>.pn-radio-outer>.pn-radio-inner{transform:scale(1);background-color:#005d92}${i("pn-radio-button")}>input[type=radio]:checked+.pn-radio[data-invalid]>.pn-radio-button>.pn-radio-outer{border-color:#a70707}${i("pn-radio-button")}>input[type=radio]:checked+.pn-radio[data-invalid]>.pn-radio-button>.pn-radio-outer>.pn-radio-inner{background-color:#a70707}${i("pn-radio-button")}>input[type=radio]:disabled{pointer-events:none}${i("pn-radio-button")}>input[type=radio]:disabled+.pn-radio .pn-radio-label{pointer-events:none}${i("pn-radio-button")}>input[type=radio]:disabled+.pn-radio[data-tile]{background-color:#f3f2f2;border-color:#f3f2f2}${i("pn-radio-button")}>input[type=radio]:disabled+.pn-radio[data-tile]>${i("pn-icon")}>.pn-icon-svg path{fill:#5e554a}${i("pn-radio-button")}>input[type=radio]:disabled+.pn-radio[data-tile]>.pn-radio-content>.pn-radio-label{color:#5e554a}${i("pn-radio-button")}>input[type=radio]:disabled+.pn-radio>.pn-radio-button>.pn-radio-outer{background-color:#f3f2f2;border-color:#969087;outline:none}${i("pn-radio-button")}>input[type=radio]:disabled+.pn-radio>.pn-radio-button>.pn-radio-outer>.pn-radio-inner{background-color:#969087}`}},[772,"pn-radio-button",{label:[1],helpertext:[1],value:[513],name:[1],checked:[1028],radioid:[1],required:[4],disabled:[4],invalid:[4],tile:[4],expand:[4],icon:[1],isClosing:[32],isExpanding:[32]},[[8,"change","handleChange"]],{radioid:[{handleId:0}],checked:[{handleChecked:0}]}]),l=p,c=function(){"undefined"!=typeof customElements&&["pn-radio-button","pn-icon"].forEach((o=>{switch(o){case"pn-radio-button":customElements.get(i(i(o)))||customElements.define(i(i(o)),p);break;case"pn-icon":customElements.get(i(i(o)))||d()}}))};export{l as PnRadioButton,c as defineCustomElement}

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

@@ -2,4 +2,4 @@
  * Built with Stencil
  * By PostNord.
  */
-import{transformTag as e,proxyCustomElement as n,HTMLElement as t,createEvent as a,forceUpdate as r,h as i,Host as s,Fragment as o}from"@stencil/core/internal/client";import{u as p}from"./helpers.js";import{d as l}from"./pn-button2.js";import{d}from"./pn-icon2.js";import{d as g}from"./pn-input2.js";import{d as h}from"./pn-spinner2.js";const u=n(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.rangeSelected=a(this,"rangeSelected",7)}id="pn-range-"+p();idEnd=this.id+"-end";idInput=this.id+"-input";idInputEnd=this.idEnd+"-input";idInputHidden=this.id+"-hidden";idHelpertext=this.id+"-helpertext";idError=this.id+"-error";idDatalist=this.id+"-data";mo;rangeTimeout;tooltipDefault="{value}";get hostElement(){return this}showHelperSlot=!1;showErrorSlot=!1;isPressing=!1;pressControl=null;label;labelEnd;helpertext=null;markers=[];textPrefix=null;textSuffix=null;icon=null;iconEnd=null;pnId=this.id;pnIdEnd=this.idEnd;name;nameEnd;min=0;max=100;value=0;valueEnd=0;step="";multiple=!1;input=!1;tooltipHide=!1;tooltipTemplate=this.tooltipDefault;disabled=!1;error=null;invalid=!1;handleValue(){this.multiple&&this.value>this.valueEnd&&(this.valueEnd=this.value);const e=this.calcPercentage(this.value);requestAnimationFrame((()=>this.hostElement.style.setProperty("--pn-range-progress",e+"%")))}handleValueEnd(){if(!this.multiple)return;this.value>this.valueEnd&&(this.value=this.valueEnd);const e=this.calcPercentage(this.valueEnd);requestAnimationFrame((()=>this.hostElement.style.setProperty("--pn-range-progress-end",e+"%")))}handleId(){this.idHelpertext=this.pnId+"-helpertext",this.idError=this.pnId+"-error",this.idDatalist=this.pnId+"-data"}handleMessage(){this.checkSlottedHelper(),this.checkSlottedError()}handleMultiple(){this.isPressing=!0,requestAnimationFrame((()=>this.isPressing=!1))}rangeSelected;connectedCallback(){this.mo=new MutationObserver((()=>r(this.hostElement))),this.mo.observe(this.hostElement,{childList:!0,subtree:!0})}disconnectedCallback(){this.mo&&this.mo.disconnect()}tooltipDirection(e=!1){if(this.multiple){const n=this.hostElement.offsetWidth<384,t=this.calcPercentage(this.value),a=this.calcPercentage(this.valueEnd);if(Math.abs(a-t)<(n?30:20))return e?"left":"right";if(!e&&this.value<=this.min+(this.max-this.min)*(n?.3:.2))return"left";if(e&&this.valueEnd>this.max*(n?.75:.8))return"right"}return"center"}isActiveMarker(e){const n=this.value===e;return this.multiple?n||this.valueEnd===e:n}hasHelperText(){return this.helpertext?.length>0||this.showHelperSlot}hasErrorMessage(){return this.error?.length>0||this.showErrorSlot}hasError(){return this.hasErrorMessage()||this.invalid||this.showErrorSlot}checkSlottedHelper(){const e=this.hostElement.querySelector("[slot=helpertext]")?.textContent;this.showHelperSlot=!!e?.length}checkSlottedError(){const e=this.hostElement.querySelector("[slot=error]")?.textContent;this.showErrorSlot=!!e?.length}calcPercentage(e){return(e-this.min)/(this.max-this.min)*100}setValue(e,n=!1){if(!(e>=this.min&&e<=this.max))return;n?this.valueEnd=e:this.value=e;const t=Number((this.valueEnd-this.value).toPrecision(4)),a=this.calcPercentage(this.value),r=this.calcPercentage(this.valueEnd),i=Number((this.multiple?r-a:a).toPrecision(4));this.rangeSelected.emit({value:this.value,percentage:i,...this.multiple?{valueEnd:this.valueEnd,difference:t}:{}})}getTooltipLabel(e=!1){return this.tooltipTemplate?.replace(this.tooltipDefault,(e?this.valueEnd:this.value)?.toString())}getMarkerLabel({value:e,label:n}){return null===n||""===n?"":""+(n||e)}ariaDescribedby(){const e=[];return this.hasErrorMessage()?e.push(this.idError):this.hasHelperText()&&e.push(this.idHelpertext),e.length?e.join(" "):null}handleChange(e){const n=e.target,{id:t,valueAsNumber:a,type:r}=n;this.setValue(isNaN(a)?0:a,"range"===r?t===this.pnIdEnd:t===this.idInputEnd)}setListeners(e=!1){return{onInput:n=>e?this.handleOverlayInput(n):this.handleChange(n),onTouchStart:e=>this.handlePress(e),onTouchEnd:()=>this.handleRelease(),onMouseDown:e=>this.handlePress(e),onMouseUp:()=>this.handleRelease()}}handlePress(e){this.rangeTimeout=setTimeout((()=>{this.isPressing=!0}),"touchstart"===e.type?200:100)}handleRelease(){clearTimeout(this.rangeTimeout),this.isPressing=!1,this.pressControl=null}commonAttrs(){return{step:this.step,min:this.min,max:this.max,list:this.markers?.length?this.idDatalist:null,disabled:this.disabled}}renderPrefix(){return this.input?this.renderNumberInput():this.icon?i("pn-icon",{class:"pn-range-icon",icon:this.icon}):this.textPrefix&&!this.input?i("span",{class:"pn-range-text"},this.textPrefix):null}renderSuffix(){return this.input&&this.multiple?this.renderNumberInput(!0):this.iconEnd?i("pn-icon",{class:"pn-range-icon",icon:this.iconEnd}):this.textSuffix&&!this.input?i("span",{class:"pn-range-text"},this.textSuffix):null}renderNumberInput(e=!1){const n=e?this.valueEnd:this.value,t=e?this.idInputEnd:this.idInput;return i("pn-input",{class:"pn-range-field",label:e?this.labelEnd:this.label,type:"number",name:(e?this.nameEnd:this.name)+"-input",...this.commonAttrs(),icon:e?this.iconEnd:this.icon,textPrefix:this.textPrefix,textSuffix:this.textSuffix,value:n?.toString(),inputid:t,invalid:this.hasError(),"data-single":!this.multiple,...this.setListeners()})}renderRangeInput(e=!1){const n=e?this.valueEnd:this.value,t=this.tooltipDefault!==this.tooltipTemplate;return i("input",{id:e?this.pnIdEnd:this.pnId,class:"pn-range-input",type:"range",name:e?this.nameEnd:this.name,...this.commonAttrs(),value:n,"aria-valuetext":t?this.getTooltipLabel(e):null,"aria-describedby":this.ariaDescribedby(),"aria-invalid":""+this.hasError(),"data-start":!e||null,"data-end":!!e||null,...this.setListeners()})}renderTooltip(e=!1){return i("div",{class:"pn-range-thumb","data-start":!e||null,"data-end":!!e||null,"data-align":this.tooltipDirection(e),"aria-hidden":"true"},!this.tooltipHide&&i("div",{class:"pn-range-tooltip"},i("span",{class:"pn-range-tooltip-label"},this.getTooltipLabel(e))))}handleOverlayInput(e){const n=e.target,{valueAsNumber:t}=n,a=isNaN(t)?0:t;this.pressControl||(this.pressControl=Math.abs(a-this.value)<=Math.abs(a-this.valueEnd)?"start":"end"),this.setValue(a,"end"===this.pressControl)}render(){return i(s,{key:"3fb29dad425cdec9cf63a5c47d8b5a894fe31077"},i("div",{key:"d43cf9db9b5859e81bba494fbffd9831e6a0cab5",class:"pn-range","data-markers":!!this.markers?.length,"data-input":this.input},i("div",{key:"01a90e9f422c24c1def8032653b5d91190eb09d2",class:"pn-range-header","data-input":this.input},i("label",{key:"2d17dd42e062345a82d8a80aa6730acf18d12a03",htmlFor:this.pnId,class:"pn-range-label"},i("span",{key:"9edc3ef4d5306daa9c818fe11550119301c71411"},this.label)),this.multiple&&i("label",{key:"ccbf685eace815dd0f93e381d3f344e2c3ec7225",htmlFor:this.pnIdEnd,class:"pn-range-label"},i("span",{key:"fa03f509c3ca1becaf0e156f8e66a0801cafbfea"},this.labelEnd))),this.renderPrefix(),i("div",{key:"0da637b2c62b397006f768d54e84e69589fb0809",class:"pn-range-group","data-pressing":this.isPressing},this.renderRangeInput(),this.multiple&&i(o,{key:"892251abffc5b5ada620c989485438e8c6b8e05a"},this.renderRangeInput(!0),i("input",{key:"530640c98705e13bf8b33bdc6185500501736479",id:this.idInputHidden,type:"range",class:"pn-range-overlay-input",...this.commonAttrs(),"aria-invalid":""+this.hasError(),hidden:!0,tabIndex:-1,...this.setListeners(!0)})),i("div",{key:"303070d848910e18c00b807bfc3c860c462a7a81",class:"pn-range-track","data-multiple":this.multiple,"aria-hidden":"true"}),this.renderTooltip(),this.multiple&&this.renderTooltip(!0),!!this.markers?.length&&i("ul",{key:"1df390f7454d1bff788870ab1f22787357041f38","aria-hidden":"true",class:"pn-range-markers"},this.markers.map((({label:e,value:n})=>i("li",{class:"pn-range-markers-item","data-min":this.calcPercentage(n)===this.min,"data-max":this.calcPercentage(n)===this.max,style:{"--pn-range-marker-position":this.calcPercentage(n)+"%"}},i("span",{class:"pn-range-markers-label","data-active":this.isActiveMarker(n)},this.getMarkerLabel({value:n,label:e}))))))),this.renderSuffix(),!!this.markers?.length&&i("datalist",{key:"068f03a5c753db20cae5dc05cd2a9e6f75933e80",id:this.idDatalist},this.markers.map((({label:e,value:n})=>i("option",{value:n,label:null===e?null:e})))),i("p",{key:"f75f04fb920645f40434bda7039a2fed64453187",id:this.idHelpertext,class:"pn-range-message",hidden:!this.hasHelperText()||this.hasError()},i("span",{key:"94fa7a8d8fc243a8633424e4bf3b0e1deb0580e9"},this.helpertext),i("slot",{key:"2ca0738617bb4e157c139eefe2fcad3b314a4206",name:"helpertext"})),i("p",{key:"59d078f5a58f1e5ce9e055747387ab4e0eca1ea2",id:this.idError,class:"pn-range-message pn-range-error",role:"alert",hidden:!this.hasErrorMessage()},i("span",{key:"569ae4a5b75336a3f787ca723938e48ad653659a"},this.error),i("slot",{key:"5cb3f9fa5a3483b4c7100c86e230da837ce3aa12",name:"error"}))))}static get watchers(){return{value:[{handleValue:1}],valueEnd:[{handleValueEnd:1}],pnId:[{handleId:1}],helpertext:[{handleMessage:1}],error:[{handleMessage:0}],multiple:[{handleMultiple:0}]}}static get style(){return`${e("pn-range")}{display:block}${e("pn-range")} .pn-range{color:#2d2013;display:flex;flex-direction:row;flex-wrap:wrap;gap:clamp(0.25em, 5vw, 0.75em);align-items:center;container-type:inline-size}@container (max-width: 24em){${e("pn-range")} .pn-range .pn-range-header[data-input]{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);margin:-1px;white-space:nowrap}${e("pn-range")} .pn-range>${e("pn-input")}{flex:1 1 100%}${e("pn-range")} .pn-range>${e("pn-input")} .pn-input-label{position:unset;height:unset;width:unset;overflow:unset;clip:unset;margin:0 0 0.25em 0;white-space:unset}}${e("pn-range")} .pn-range[data-markers]{margin-bottom:1em}${e("pn-range")} .pn-range[data-markers][data-input]{margin-bottom:0.5em}${e("pn-range")} .pn-range-header{display:flex;justify-content:space-between;flex:1 1 100%;width:100%}${e("pn-range")} .pn-range-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){${e("pn-range")} .pn-range-label{transition-duration:0s;transition-delay:0s}}${e("pn-range")} .pn-range-label>span{font-size:0.875em}${e("pn-range")} .pn-range-message{color:#5e554a;font-size:0.875em;font-weight:400;margin:0.25em 0 0 0;display:flex;flex-direction:column;gap:0.25em;text-align:left;flex:1 1 100%;width:100%}${e("pn-range")} .pn-range-message[hidden],${e("pn-range")} .pn-range-message>span[hidden]{display:none}${e("pn-range")} .pn-range-error{color:#a70707}${e("pn-range")} .pn-range-field{flex:0 0 auto}${e("pn-range")} .pn-range-field .pn-input-label{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);margin:-1px;white-space:nowrap}${e("pn-range")} .pn-range-group{position:relative;min-height:0.75em;padding:0.75em 0;flex:1 1 auto}${e("pn-range")} .pn-range-group[data-pressing] *,${e("pn-range")} .pn-range-group[data-pressing] *:before,${e("pn-range")} .pn-range-group[data-pressing] *:after{transition-duration:0s}${e("pn-range")} .pn-range-text{font-weight:400;font-size:0.875em;color:#2d2013}${e("pn-range")} .pn-range-input{z-index:1;position:absolute;top:0;left:0;height:100%;width:100%;margin:0;opacity:0;cursor:pointer;-webkit-tap-highlight-color:transparent}${e("pn-range")} .pn-range-input:focus~.pn-range-thumb:before,${e("pn-range")} .pn-range-input:hover~.pn-range-thumb:before{background-color:#0d234b}${e("pn-range")} .pn-range-input:focus~.pn-range-thumb .pn-range-tooltip,${e("pn-range")} .pn-range-input:hover~.pn-range-thumb .pn-range-tooltip{opacity:1;transform:translateX(50%) translateY(0%);transition-delay:0s}${e("pn-range")} .pn-range-input:focus-visible[data-single]~.pn-range-thumb:before{outline-color:#005d92}${e("pn-range")} .pn-range-input:focus-visible[data-start]~.pn-range-thumb[data-start]:before,${e("pn-range")} .pn-range-input:focus-visible[data-end]~.pn-range-thumb[data-end]:before{outline-color:#005d92}${e("pn-range")} .pn-range-input[aria-invalid=true]~.pn-range-thumb:before{background-color:#a70707}${e("pn-range")} .pn-range-input[aria-invalid=true]~.pn-range-thumb .pn-range-tooltip{background-color:#500715}${e("pn-range")} .pn-range-input[aria-invalid=true]~.pn-range-track:before{background-color:#a70707}${e("pn-range")} .pn-range-input[aria-invalid=true]:focus-visible[data-start]~.pn-range-thumb[data-start]:before,${e("pn-range")} .pn-range-input[aria-invalid=true]:focus-visible[data-end]~.pn-range-thumb[data-end]:before{outline-color:#a70707}${e("pn-range")} .pn-range-input[aria-invalid=true]:hover~.pn-range-thumb:before{background-color:#500715}${e("pn-range")} .pn-range-input:disabled{cursor:not-allowed}${e("pn-range")} .pn-range-input:disabled+.pn-range-track:before{background-color:#969087}${e("pn-range")} .pn-range-input:disabled~.pn-range-thumb:before{background-color:#5e554a}${e("pn-range")} .pn-range-input:disabled~.pn-range-thumb .pn-range-tooltip{background-color:#2d2013}${e("pn-range")} .pn-range-overlay-input{z-index:5;cursor:pointer;position:absolute;appearance:none;top:0;left:0;height:100%;width:100%;margin:0;padding:0;border:0;outline:0;opacity:0;display:block;-webkit-tap-highlight-color:transparent}${e("pn-range")} .pn-range-overlay-input:focus~.pn-range-thumb:before,${e("pn-range")} .pn-range-overlay-input:focus-visible~.pn-range-thumb:before,${e("pn-range")} .pn-range-overlay-input:hover~.pn-range-thumb:before{background-color:#0d234b}${e("pn-range")} .pn-range-overlay-input:focus~.pn-range-thumb[data-align=right] .pn-range-tooltip,${e("pn-range")} .pn-range-overlay-input:focus-visible~.pn-range-thumb[data-align=right] .pn-range-tooltip,${e("pn-range")} .pn-range-overlay-input:hover~.pn-range-thumb[data-align=right] .pn-range-tooltip{transform:translateX(0%) translateY(0%);border-bottom-right-radius:0em}${e("pn-range")} .pn-range-overlay-input:focus~.pn-range-thumb[data-align=left] .pn-range-tooltip,${e("pn-range")} .pn-range-overlay-input:focus-visible~.pn-range-thumb[data-align=left] .pn-range-tooltip,${e("pn-range")} .pn-range-overlay-input:hover~.pn-range-thumb[data-align=left] .pn-range-tooltip{transform:translateX(100%) translateY(0%);border-bottom-left-radius:0em}${e("pn-range")} .pn-range-overlay-input:focus~.pn-range-thumb .pn-range-tooltip,${e("pn-range")} .pn-range-overlay-input:focus-visible~.pn-range-thumb .pn-range-tooltip,${e("pn-range")} .pn-range-overlay-input:hover~.pn-range-thumb .pn-range-tooltip{opacity:1;transform:translateX(50%) translateY(0%);transition-delay:0s}${e("pn-range")} .pn-range-overlay-input[aria-invalid=true]:focus~.pn-range-thumb:before,${e("pn-range")} .pn-range-overlay-input[aria-invalid=true]:focus-visible~.pn-range-thumb:before,${e("pn-range")} .pn-range-overlay-input[aria-invalid=true]:hover~.pn-range-thumb:before{background-color:#500715}${e("pn-range")} .pn-range-track{pointer-events:none;position:relative;min-height:inherit;display:block;background-color:#d3cecb;border-radius:2em;overflow:hidden}${e("pn-range")} .pn-range-track:before,${e("pn-range")} .pn-range-track:after{content:"";z-index:0;position:absolute;right:100%;pointer-events:none;height:100%;width:100%;background-color:#005d92;transform:translateX(var(--pn-range-progress));transition-property:transform, background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-range")} .pn-range-track:before,${e("pn-range")} .pn-range-track:after{transition-duration:0s;transition-delay:0s}}${e("pn-range")} .pn-range-track:after{display:none}${e("pn-range")} .pn-range-track:before{background-color:#005d92;transform:translateX(var(--pn-range-progress))}${e("pn-range")} .pn-range-track[data-multiple]:before{transform:translateX(var(--pn-range-progress-end))}${e("pn-range")} .pn-range-track[data-multiple]:after{display:unset;background-color:#d3cecb;transform:translateX(var(--pn-range-progress))}${e("pn-range")} .pn-range-thumb{pointer-events:none;position:absolute;height:100%;width:calc(100% - 1em);top:0;right:calc(100% - 0.5em);transform:translateX(var(--pn-range-progress));transition-property:transform, border-radius;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-range")} .pn-range-thumb{transition-duration:0s;transition-delay:0s}}${e("pn-range")} .pn-range-thumb[data-end]{transform:translateX(var(--pn-range-progress-end))}${e("pn-range")} .pn-range-thumb[data-align=right] .pn-range-tooltip{transform:translateX(0%) translateY(10%)}${e("pn-range")} .pn-range-thumb[data-align=right] .pn-range-tooltip:before{transform:translateX(50%) translateY(-50%) rotate(0deg)}${e("pn-range")} .pn-range-thumb[data-align=left] .pn-range-tooltip{transform:translateX(100%) translateY(10%)}${e("pn-range")} .pn-range-thumb[data-align=left] .pn-range-tooltip:before{transform:translateX(50%) translateY(-50%) rotate(0deg)}${e("pn-range")} .pn-range-thumb:before{content:"";position:absolute;top:0.5em;right:-0.65625em;height:1.3125em;width:1.3125em;background-color:#005d92;border-radius:5em;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-range")} .pn-range-thumb:before{transition-duration:0s;transition-delay:0s}}${e("pn-range")} .pn-range-tooltip{position:absolute;z-index:10;top:-85%;right:0;text-align:center;line-height:1.25em;white-space:nowrap;height:1.75em;min-width:2em;padding:0.25em 0.5em;border-radius:0.5em;background-color:#0d234b;color:#ffffff;transform:translateX(50%) translateY(10%);opacity:0;transition-property:opacity, transform, border-radius, background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-range")} .pn-range-tooltip{transition-duration:0s;transition-delay:0s}}${e("pn-range")} .pn-range-tooltip{transition-delay:0.4s}${e("pn-range")} .pn-range-tooltip-label{font-size:0.875em;font-weight:400}${e("pn-range")} .pn-range-tooltip:before{content:"";z-index:-1;position:absolute;left:50%;bottom:-0.25em;height:0.5em;width:0.5em;background-color:inherit;transform:translateX(-50%) translateY(0%) rotate(45deg);transition-property:left, transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-range")} .pn-range-tooltip:before{transition-duration:0s;transition-delay:0s}}${e("pn-range")} .pn-range-markers{position:absolute;top:100%;left:0.5em;min-height:1em;width:calc(100% - 1em);padding:0;margin:0;list-style:none;display:flex;flex-direction:row;flex-wrap:nowrap}${e("pn-range")} .pn-range-markers-item{position:relative;left:var(--pn-range-marker-position)}${e("pn-range")} .pn-range-markers-item[data-min] .pn-range-markers-label{left:-0.0625em;transform:translateX(0%)}${e("pn-range")} .pn-range-markers-item[data-max] .pn-range-markers-label{left:unset;right:0;transform:translateX(0%)}${e("pn-range")} .pn-range-markers-item:before{content:"";position:absolute;left:0;top:-100%;border-left:0.0625em solid #d3cecb;height:1em;z-index:-1}${e("pn-range")} .pn-range-markers-label{position:absolute;top:0;left:50%;transform:translateX(-50%);font-weight:400;font-size:0.875em;color:#5e554a;transition-property:color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-range")} .pn-range-markers-label{transition-duration:0s;transition-delay:0s}}${e("pn-range")} .pn-range-markers-label[data-active]{color:#2d2013}`}},[772,"pn-range",{label:[1],labelEnd:[1,"label-end"],helpertext:[1],markers:[16],textPrefix:[1,"text-prefix"],textSuffix:[1,"text-suffix"],icon:[1],iconEnd:[1,"icon-end"],pnId:[1,"pn-id"],pnIdEnd:[1,"pn-id-end"],name:[1],nameEnd:[1,"name-end"],min:[2],max:[2],value:[1538],valueEnd:[1538,"value-end"],step:[1],multiple:[4],input:[4],tooltipHide:[4,"tooltip-hide"],tooltipTemplate:[1,"tooltip-template"],disabled:[4],error:[1],invalid:[4],showHelperSlot:[32],showErrorSlot:[32],isPressing:[32],pressControl:[32]},void 0,{value:[{handleValue:1}],valueEnd:[{handleValueEnd:1}],pnId:[{handleId:1}],helpertext:[{handleMessage:1}],error:[{handleMessage:0}],multiple:[{handleMultiple:0}]}]),c=u,m=function(){"undefined"!=typeof customElements&&["pn-range","pn-button","pn-icon","pn-input","pn-spinner"].forEach((n=>{switch(n){case"pn-range":customElements.get(e(e(n)))||customElements.define(e(e(n)),u);break;case"pn-button":customElements.get(e(e(n)))||l();break;case"pn-icon":customElements.get(e(e(n)))||d();break;case"pn-input":customElements.get(e(e(n)))||g();break;case"pn-spinner":customElements.get(e(e(n)))||h()}}))};export{c as PnRange,m as defineCustomElement}
+import{transformTag as e,proxyCustomElement as n,HTMLElement as t,createEvent as a,forceUpdate as r,h as i,Host as s,Fragment as o}from"@stencil/core/internal/client";import{u as p}from"./helpers.js";import{d as l}from"./pn-button2.js";import{d}from"./pn-icon2.js";import{d as g}from"./pn-input2.js";import{d as h}from"./pn-spinner2.js";const u=n(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.rangeSelected=a(this,"rangeSelected",7)}id="pn-range-"+p();idEnd=this.id+"-end";idInput=this.id+"-input";idInputEnd=this.idEnd+"-input";idInputHidden=this.id+"-hidden";idHelpertext=this.id+"-helpertext";idError=this.id+"-error";idDatalist=this.id+"-data";mo;rangeTimeout;tooltipDefault="{value}";get hostElement(){return this}showHelperSlot=!1;showErrorSlot=!1;isPressing=!1;pressControl=null;label;labelEnd;helpertext=null;markers=[];textPrefix=null;textSuffix=null;icon=null;iconEnd=null;pnId=this.id;pnIdEnd=this.idEnd;name;nameEnd;min=0;max=100;value=0;valueEnd=0;step="";multiple=!1;input=!1;tooltipHide=!1;tooltipTemplate=this.tooltipDefault;disabled=!1;error=null;invalid=!1;handleValue(){this.multiple&&this.value>this.valueEnd&&(this.valueEnd=this.value);const e=this.calcPercentage(this.value);requestAnimationFrame((()=>this.hostElement.style.setProperty("--pn-range-progress",e+"%")))}handleValueEnd(){if(!this.multiple)return;this.value>this.valueEnd&&(this.value=this.valueEnd);const e=this.calcPercentage(this.valueEnd);requestAnimationFrame((()=>this.hostElement.style.setProperty("--pn-range-progress-end",e+"%")))}handleId(){this.idHelpertext=this.pnId+"-helpertext",this.idError=this.pnId+"-error",this.idDatalist=this.pnId+"-data"}handleMessage(){this.checkSlottedHelper(),this.checkSlottedError()}handleMultiple(){this.isPressing=!0,requestAnimationFrame((()=>this.isPressing=!1))}rangeSelected;connectedCallback(){this.mo=new MutationObserver((()=>r(this.hostElement))),this.mo.observe(this.hostElement,{childList:!0,subtree:!0})}disconnectedCallback(){this.mo&&this.mo.disconnect()}tooltipDirection(e=!1){if(this.multiple){const n=this.hostElement.offsetWidth<384,t=this.calcPercentage(this.value),a=this.calcPercentage(this.valueEnd);if(Math.abs(a-t)<(n?30:20))return e?"left":"right";if(!e&&this.value<=this.min+(this.max-this.min)*(n?.3:.2))return"left";if(e&&this.valueEnd>this.max*(n?.75:.8))return"right"}return"center"}isActiveMarker(e){const n=this.value===e;return this.multiple?n||this.valueEnd===e:n}hasHelperText(){return this.helpertext?.length>0||this.showHelperSlot}hasErrorMessage(){return this.error?.length>0||this.showErrorSlot}hasError(){return this.hasErrorMessage()||this.invalid||this.showErrorSlot}checkSlottedHelper(){const e=this.hostElement.querySelector("[slot=helpertext]")?.textContent;this.showHelperSlot=!!e?.length}checkSlottedError(){const e=this.hostElement.querySelector("[slot=error]")?.textContent;this.showErrorSlot=!!e?.length}calcPercentage(e){return(e-this.min)/(this.max-this.min)*100}setValue(e,n=!1){if(!(e>=this.min&&e<=this.max))return;n?this.valueEnd=e:this.value=e;const t=Number((this.valueEnd-this.value).toPrecision(4)),a=this.calcPercentage(this.value),r=this.calcPercentage(this.valueEnd),i=Number((this.multiple?r-a:a).toPrecision(4));this.rangeSelected.emit({value:this.value,percentage:i,...this.multiple?{valueEnd:this.valueEnd,difference:t}:{}})}getTooltipLabel(e=!1){return this.tooltipTemplate?.replace(this.tooltipDefault,(e?this.valueEnd:this.value)?.toString())}getMarkerLabel({value:e,label:n}){return null===n||""===n?"":""+(n||e)}ariaDescribedby(){const e=[];return this.hasErrorMessage()?e.push(this.idError):this.hasHelperText()&&e.push(this.idHelpertext),e.length?e.join(" "):null}handleChange(e){const n=e.target,{id:t,valueAsNumber:a,type:r}=n;this.setValue(isNaN(a)?0:a,"range"===r?t===this.pnIdEnd:t===this.idInputEnd)}setListeners(e=!1){return{onInput:n=>e?this.handleOverlayInput(n):this.handleChange(n),onTouchStart:e=>this.handlePress(e),onTouchEnd:()=>this.handleRelease(),onMouseDown:e=>this.handlePress(e),onMouseUp:()=>this.handleRelease()}}handlePress(e){this.rangeTimeout=setTimeout((()=>{this.isPressing=!0}),"touchstart"===e.type?200:100)}handleRelease(){clearTimeout(this.rangeTimeout),this.isPressing=!1,this.pressControl=null}commonAttrs(){return{step:this.step,min:this.min,max:this.max,list:this.markers?.length?this.idDatalist:null,disabled:this.disabled}}renderPrefix(){return this.input?this.renderNumberInput():this.icon?i("pn-icon",{class:"pn-range-icon",icon:this.icon}):this.textPrefix&&!this.input?i("span",{class:"pn-range-text"},this.textPrefix):null}renderSuffix(){return this.input&&this.multiple?this.renderNumberInput(!0):this.iconEnd?i("pn-icon",{class:"pn-range-icon",icon:this.iconEnd}):this.textSuffix&&!this.input?i("span",{class:"pn-range-text"},this.textSuffix):null}renderNumberInput(e=!1){const n=e?this.valueEnd:this.value,t=e?this.idInputEnd:this.idInput;return i("pn-input",{class:"pn-range-field",label:e?this.labelEnd:this.label,type:"number",name:(e?this.nameEnd:this.name)+"-input",...this.commonAttrs(),icon:e?this.iconEnd:this.icon,textPrefix:this.textPrefix,textSuffix:this.textSuffix,value:n?.toString(),inputid:t,invalid:this.hasError(),"data-single":!this.multiple,...this.setListeners()})}renderRangeInput(e=!1){const n=e?this.valueEnd:this.value,t=this.tooltipDefault!==this.tooltipTemplate;return i("input",{id:e?this.pnIdEnd:this.pnId,class:"pn-range-input",type:"range",name:e?this.nameEnd:this.name,...this.commonAttrs(),value:n,"aria-valuetext":t?this.getTooltipLabel(e):null,"aria-describedby":this.ariaDescribedby(),"aria-invalid":""+this.hasError(),"data-start":!e||null,"data-end":!!e||null,...this.setListeners()})}renderTooltip(e=!1){return i("div",{class:"pn-range-thumb","data-start":!e||null,"data-end":!!e||null,"data-align":this.tooltipDirection(e),"aria-hidden":"true"},!this.tooltipHide&&i("div",{class:"pn-range-tooltip"},i("span",{class:"pn-range-tooltip-label"},this.getTooltipLabel(e))))}handleOverlayInput(e){const n=e.target,{valueAsNumber:t}=n,a=isNaN(t)?0:t;this.pressControl||(this.pressControl=Math.abs(a-this.value)<=Math.abs(a-this.valueEnd)?"start":"end"),this.setValue(a,"end"===this.pressControl)}render(){return i(s,{key:"0a79e6606d509d701b83da4a2c3d3636c7d73979"},i("div",{key:"f56834025691e3c67544e4ddb2b54630bfa46095",class:"pn-range","data-markers":!!this.markers?.length,"data-input":this.input},i("div",{key:"e39b5994468fc6f50ad479c5b3875732a29a4761",class:"pn-range-header","data-input":this.input},i("label",{key:"724a16a534343838e392480163517afc7bd15b6f",htmlFor:this.pnId,class:"pn-range-label"},i("span",{key:"ebd27275aeb63e79df5f2f0f5f4d1f5d118cd137"},this.label)),this.multiple&&i("label",{key:"aebe4d8b124cc5a905b61624566dc4db52f1f4a0",htmlFor:this.pnIdEnd,class:"pn-range-label"},i("span",{key:"7a90745fadc39d81bac3083d562c9d7fe47c1d00"},this.labelEnd))),this.renderPrefix(),i("div",{key:"28fcae728841f246bfac7ae488710459d468e4f2",class:"pn-range-group","data-pressing":this.isPressing},this.renderRangeInput(),this.multiple&&i(o,{key:"87dae83eea2f5e4eb5318759767dfabc74a0f128"},this.renderRangeInput(!0),i("input",{key:"aa461034dfe94c78310409f87c1efaa0a4fb0a4d",id:this.idInputHidden,type:"range",class:"pn-range-overlay-input",...this.commonAttrs(),"aria-invalid":""+this.hasError(),hidden:!0,tabIndex:-1,...this.setListeners(!0)})),i("div",{key:"3282ce9652ff135db9e5bfa533af1c7fd1d29adb",class:"pn-range-track","data-multiple":this.multiple,"aria-hidden":"true"}),this.renderTooltip(),this.multiple&&this.renderTooltip(!0),!!this.markers?.length&&i("ul",{key:"1692843e137439b5bdedb5728104a3312d26ffc2","aria-hidden":"true",class:"pn-range-markers"},this.markers.map((({label:e,value:n})=>i("li",{class:"pn-range-markers-item","data-min":this.calcPercentage(n)===this.min,"data-max":this.calcPercentage(n)===this.max,style:{"--pn-range-marker-position":this.calcPercentage(n)+"%"}},i("span",{class:"pn-range-markers-label","data-active":this.isActiveMarker(n)},this.getMarkerLabel({value:n,label:e}))))))),this.renderSuffix(),!!this.markers?.length&&i("datalist",{key:"ed0ea3e4e284366f3e4eaf94245a1a71ccf20a17",id:this.idDatalist},this.markers.map((({label:e,value:n})=>i("option",{value:n,label:null===e?null:e})))),i("p",{key:"3dd6afe5a2f142b1df60fdd87c0c23f942d83a71",id:this.idHelpertext,class:"pn-range-message",hidden:!this.hasHelperText()||this.hasError()},i("span",{key:"048797709bcb778a9c1f2d71ae1ee1b1eef665f0"},this.helpertext),i("slot",{key:"2fabbbc425b643917415653f831126e9d7319efd",name:"helpertext"})),i("p",{key:"65061b23a86338d7490bbfc2759308c1326f5d4e",id:this.idError,class:"pn-range-message pn-range-error",role:"alert",hidden:!this.hasErrorMessage()},i("span",{key:"a0be85a1e70ac6b07bb1447b6c8e9a04c72aade0"},this.error),i("slot",{key:"c13f70e99ec137373be96fa9d5a06b0266808fcf",name:"error"}))))}static get watchers(){return{value:[{handleValue:1}],valueEnd:[{handleValueEnd:1}],pnId:[{handleId:1}],helpertext:[{handleMessage:1}],error:[{handleMessage:0}],multiple:[{handleMultiple:0}]}}static get style(){return`${e("pn-range")}{display:block}${e("pn-range")} .pn-range{color:#2d2013;display:flex;flex-direction:row;flex-wrap:wrap;gap:clamp(0.25em, 5vw, 0.75em);align-items:center;container-type:inline-size}@container (max-width: 24em){${e("pn-range")} .pn-range .pn-range-header[data-input]{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);margin:-1px;white-space:nowrap}${e("pn-range")} .pn-range>${e("pn-input")}{flex:1 1 100%}${e("pn-range")} .pn-range>${e("pn-input")} .pn-input-label{position:unset;height:unset;width:unset;overflow:unset;clip:unset;margin:0 0 0.25em 0;white-space:unset}}${e("pn-range")} .pn-range[data-markers]{margin-bottom:1em}${e("pn-range")} .pn-range[data-markers][data-input]{margin-bottom:0.5em}${e("pn-range")} .pn-range-header{display:flex;justify-content:space-between;flex:1 1 100%;width:100%}${e("pn-range")} .pn-range-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-range")} .pn-range-label{transition-duration:0s;transition-delay:0s}}${e("pn-range")} .pn-range-label>span{font-size:0.875em}${e("pn-range")} .pn-range-message{color:#5e554a;font-size:0.875em;font-weight:400;margin:0.25em 0 0 0;display:flex;flex-direction:column;gap:0.25em;text-align:left;flex:1 1 100%;width:100%}${e("pn-range")} .pn-range-message[hidden],${e("pn-range")} .pn-range-message>span[hidden]{display:none}${e("pn-range")} .pn-range-error{color:#a70707}${e("pn-range")} .pn-range-field{flex:0 0 auto}${e("pn-range")} .pn-range-field .pn-input-label{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);margin:-1px;white-space:nowrap}${e("pn-range")} .pn-range-group{position:relative;min-height:0.75em;padding:0.75em 0;flex:1 1 auto}${e("pn-range")} .pn-range-group[data-pressing] *,${e("pn-range")} .pn-range-group[data-pressing] *:before,${e("pn-range")} .pn-range-group[data-pressing] *:after{transition-duration:0s}${e("pn-range")} .pn-range-text{font-weight:400;font-size:0.875em;color:#2d2013}${e("pn-range")} .pn-range-input{z-index:1;position:absolute;top:0;left:0;height:100%;width:100%;margin:0;opacity:0;cursor:pointer;-webkit-tap-highlight-color:transparent}${e("pn-range")} .pn-range-input:focus~.pn-range-thumb:before,${e("pn-range")} .pn-range-input:hover~.pn-range-thumb:before{background-color:#0d234b}${e("pn-range")} .pn-range-input:focus~.pn-range-thumb .pn-range-tooltip,${e("pn-range")} .pn-range-input:hover~.pn-range-thumb .pn-range-tooltip{opacity:1;transform:translateX(50%) translateY(0%);transition-delay:0s}${e("pn-range")} .pn-range-input:focus-visible[data-single]~.pn-range-thumb:before{outline-color:#005d92}${e("pn-range")} .pn-range-input:focus-visible[data-start]~.pn-range-thumb[data-start]:before,${e("pn-range")} .pn-range-input:focus-visible[data-end]~.pn-range-thumb[data-end]:before{outline-color:#005d92}${e("pn-range")} .pn-range-input[aria-invalid=true]~.pn-range-thumb:before{background-color:#a70707}${e("pn-range")} .pn-range-input[aria-invalid=true]~.pn-range-thumb .pn-range-tooltip{background-color:#500715}${e("pn-range")} .pn-range-input[aria-invalid=true]~.pn-range-track:before{background-color:#a70707}${e("pn-range")} .pn-range-input[aria-invalid=true]:focus-visible[data-start]~.pn-range-thumb[data-start]:before,${e("pn-range")} .pn-range-input[aria-invalid=true]:focus-visible[data-end]~.pn-range-thumb[data-end]:before{outline-color:#a70707}${e("pn-range")} .pn-range-input[aria-invalid=true]:hover~.pn-range-thumb:before{background-color:#500715}${e("pn-range")} .pn-range-input:disabled{cursor:not-allowed}${e("pn-range")} .pn-range-input:disabled+.pn-range-track:before{background-color:#969087}${e("pn-range")} .pn-range-input:disabled~.pn-range-thumb:before{background-color:#5e554a}${e("pn-range")} .pn-range-input:disabled~.pn-range-thumb .pn-range-tooltip{background-color:#2d2013}${e("pn-range")} .pn-range-overlay-input{z-index:5;cursor:pointer;position:absolute;appearance:none;top:0;left:0;height:100%;width:100%;margin:0;padding:0;border:0;outline:0;opacity:0;display:block;-webkit-tap-highlight-color:transparent}${e("pn-range")} .pn-range-overlay-input:focus~.pn-range-thumb:before,${e("pn-range")} .pn-range-overlay-input:focus-visible~.pn-range-thumb:before,${e("pn-range")} .pn-range-overlay-input:hover~.pn-range-thumb:before{background-color:#0d234b}${e("pn-range")} .pn-range-overlay-input:focus~.pn-range-thumb[data-align=right] .pn-range-tooltip,${e("pn-range")} .pn-range-overlay-input:focus-visible~.pn-range-thumb[data-align=right] .pn-range-tooltip,${e("pn-range")} .pn-range-overlay-input:hover~.pn-range-thumb[data-align=right] .pn-range-tooltip{transform:translateX(0%) translateY(0%);border-bottom-right-radius:0em}${e("pn-range")} .pn-range-overlay-input:focus~.pn-range-thumb[data-align=left] .pn-range-tooltip,${e("pn-range")} .pn-range-overlay-input:focus-visible~.pn-range-thumb[data-align=left] .pn-range-tooltip,${e("pn-range")} .pn-range-overlay-input:hover~.pn-range-thumb[data-align=left] .pn-range-tooltip{transform:translateX(100%) translateY(0%);border-bottom-left-radius:0em}${e("pn-range")} .pn-range-overlay-input:focus~.pn-range-thumb .pn-range-tooltip,${e("pn-range")} .pn-range-overlay-input:focus-visible~.pn-range-thumb .pn-range-tooltip,${e("pn-range")} .pn-range-overlay-input:hover~.pn-range-thumb .pn-range-tooltip{opacity:1;transform:translateX(50%) translateY(0%);transition-delay:0s}${e("pn-range")} .pn-range-overlay-input[aria-invalid=true]:focus~.pn-range-thumb:before,${e("pn-range")} .pn-range-overlay-input[aria-invalid=true]:focus-visible~.pn-range-thumb:before,${e("pn-range")} .pn-range-overlay-input[aria-invalid=true]:hover~.pn-range-thumb:before{background-color:#500715}${e("pn-range")} .pn-range-track{pointer-events:none;position:relative;min-height:inherit;display:block;background-color:#d3cecb;border-radius:2em;overflow:hidden}${e("pn-range")} .pn-range-track:before,${e("pn-range")} .pn-range-track:after{content:"";z-index:0;position:absolute;right:100%;pointer-events:none;height:100%;width:100%;background-color:#005d92;transform:translateX(var(--pn-range-progress));transition-property:transform, background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-range")} .pn-range-track:before,${e("pn-range")} .pn-range-track:after{transition-duration:0s;transition-delay:0s}}${e("pn-range")} .pn-range-track:after{display:none}${e("pn-range")} .pn-range-track:before{background-color:#005d92;transform:translateX(var(--pn-range-progress))}${e("pn-range")} .pn-range-track[data-multiple]:before{transform:translateX(var(--pn-range-progress-end))}${e("pn-range")} .pn-range-track[data-multiple]:after{display:unset;background-color:#d3cecb;transform:translateX(var(--pn-range-progress))}${e("pn-range")} .pn-range-thumb{pointer-events:none;position:absolute;height:100%;width:calc(100% - 1em);top:0;right:calc(100% - 0.5em);transform:translateX(var(--pn-range-progress));transition-property:transform, border-radius;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-range")} .pn-range-thumb{transition-duration:0s;transition-delay:0s}}${e("pn-range")} .pn-range-thumb[data-end]{transform:translateX(var(--pn-range-progress-end))}${e("pn-range")} .pn-range-thumb[data-align=right] .pn-range-tooltip{transform:translateX(0%) translateY(10%)}${e("pn-range")} .pn-range-thumb[data-align=right] .pn-range-tooltip:before{transform:translateX(50%) translateY(-50%) rotate(0deg)}${e("pn-range")} .pn-range-thumb[data-align=left] .pn-range-tooltip{transform:translateX(100%) translateY(10%)}${e("pn-range")} .pn-range-thumb[data-align=left] .pn-range-tooltip:before{transform:translateX(50%) translateY(-50%) rotate(0deg)}${e("pn-range")} .pn-range-thumb:before{content:"";position:absolute;top:0.5em;right:-0.65625em;height:1.3125em;width:1.3125em;background-color:#005d92;border-radius:5em;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-range")} .pn-range-thumb:before{transition-duration:0s;transition-delay:0s}}${e("pn-range")} .pn-range-tooltip{position:absolute;z-index:10;top:-85%;right:0;text-align:center;line-height:1.25em;white-space:nowrap;height:1.75em;min-width:2em;padding:0.25em 0.5em;border-radius:0.5em;background-color:#0d234b;color:#ffffff;transform:translateX(50%) translateY(10%);opacity:0;transition-property:opacity, transform, border-radius, background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-range")} .pn-range-tooltip{transition-duration:0s;transition-delay:0s}}${e("pn-range")} .pn-range-tooltip{transition-delay:0.4s}${e("pn-range")} .pn-range-tooltip-label{font-size:0.875em;font-weight:400}${e("pn-range")} .pn-range-tooltip:before{content:"";z-index:-1;position:absolute;left:50%;bottom:-0.25em;height:0.5em;width:0.5em;background-color:inherit;transform:translateX(-50%) translateY(0%) rotate(45deg);transition-property:left, transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-range")} .pn-range-tooltip:before{transition-duration:0s;transition-delay:0s}}${e("pn-range")} .pn-range-markers{position:absolute;top:100%;left:0.5em;min-height:1em;width:calc(100% - 1em);padding:0;margin:0;list-style:none;display:flex;flex-direction:row;flex-wrap:nowrap}${e("pn-range")} .pn-range-markers-item{position:relative;left:var(--pn-range-marker-position)}${e("pn-range")} .pn-range-markers-item[data-min] .pn-range-markers-label{left:-0.0625em;transform:translateX(0%)}${e("pn-range")} .pn-range-markers-item[data-max] .pn-range-markers-label{left:unset;right:0;transform:translateX(0%)}${e("pn-range")} .pn-range-markers-item:before{content:"";position:absolute;left:0;top:-100%;border-left:0.0625em solid #d3cecb;height:1em;z-index:-1}${e("pn-range")} .pn-range-markers-label{position:absolute;top:0;left:50%;transform:translateX(-50%);font-weight:400;font-size:0.875em;color:#5e554a;transition-property:color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-range")} .pn-range-markers-label{transition-duration:0s;transition-delay:0s}}${e("pn-range")} .pn-range-markers-label[data-active]{color:#2d2013}`}},[772,"pn-range",{label:[1],labelEnd:[1,"label-end"],helpertext:[1],markers:[16],textPrefix:[1,"text-prefix"],textSuffix:[1,"text-suffix"],icon:[1],iconEnd:[1,"icon-end"],pnId:[1,"pn-id"],pnIdEnd:[1,"pn-id-end"],name:[1],nameEnd:[1,"name-end"],min:[2],max:[2],value:[1538],valueEnd:[1538,"value-end"],step:[1],multiple:[4],input:[4],tooltipHide:[4,"tooltip-hide"],tooltipTemplate:[1,"tooltip-template"],disabled:[4],error:[1],invalid:[4],showHelperSlot:[32],showErrorSlot:[32],isPressing:[32],pressControl:[32]},void 0,{value:[{handleValue:1}],valueEnd:[{handleValueEnd:1}],pnId:[{handleId:1}],helpertext:[{handleMessage:1}],error:[{handleMessage:0}],multiple:[{handleMultiple:0}]}]),c=u,m=function(){"undefined"!=typeof customElements&&["pn-range","pn-button","pn-icon","pn-input","pn-spinner"].forEach((n=>{switch(n){case"pn-range":customElements.get(e(e(n)))||customElements.define(e(e(n)),u);break;case"pn-button":customElements.get(e(e(n)))||l();break;case"pn-icon":customElements.get(e(e(n)))||d();break;case"pn-input":customElements.get(e(e(n)))||g();break;case"pn-spinner":customElements.get(e(e(n)))||h()}}))};export{c as PnRange,m as defineCustomElement}

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

@@ -2,4 +2,4 @@
  * Built with Stencil
  * By PostNord.
  */
-import{transformTag as e,proxyCustomElement as n,HTMLElement as i,createEvent as t,h as a,Host as s}from"@stencil/core/internal/client";import{u as l,k as r,e as o}from"./helpers.js";import{d as c}from"./pn-button2.js";import{d}from"./pn-icon2.js";import{d as h}from"./pn-spinner2.js";const p='<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="M4 11.442A7.44 7.44 0 0 1 11.44 4c6.24 0 9.617 7.154 5.923 11.949l2.844 2.844a1 1 0 0 1-1.414 1.414l-2.837-2.837C11.21 21.045 4 17.73 4 11.441m11.277 3.867C11.846 18.714 6 16.284 6 11.442A5.44 5.44 0 0 1 11.44 6c4.724 0 7.204 5.605 4.026 9.1z" clip-rule="evenodd"/></svg>',f={SEARCH:{en:"Search",sv:"Sök",da:"Søg",fi:"Hae",no:"Søk"},CLEAR:{en:"Clear search field",sv:"Rensa sökfältet",da:"Ryd søgefeltet",fi:"Tyhjennä hakukenttä",no:"Tøm søkefeltet"}},u=n(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.search=t(this,"search",7),this.update=t(this,"update",7)}id=`pn-search-field-${l()}`;searchElement;get hostElement(){return this}label;value="";placeholder;searchid=this.id;name;autocomplete;list;language=null;disabled=!1;required=!1;loading=!1;button="";buttonLabel;buttonTooltip;buttonLight=!1;search;update;inputHandler(){this.update.emit(this.value)}async componentWillLoad(){null===this.language&&await r(this.hostElement)}translate(e){return f?.[e]?.[this.language||o]}emitSearch({click:e,button:n}){("click"===e?.type||"keydown"===n?.type&&"Enter"===n?.key)&&((e||n).preventDefault(),this.search.emit(this.value))}setVal(e){this.value=e.target.value}clearInput(){this.value="",this.update.emit(this.value),this.hostElement.querySelector("input").focus()}getButtonLabel(){return this.buttonLabel||this.translate("SEARCH")}searchSimple(){return"icon"===this.button||"simple"===this.button}searchAuto(){return"icon-inline"===this.button||"none"===this.button||"auto"===this.button}searchJumbo(){return"jumbo"===this.button}searchButtonAppearance(){return this.searchSimple()?"light":null}searchButtonVariant(){return this.searchSimple()?"outlined":null}render(){return a(s,{key:"3d9715e863efb490e9eb678ebd962c5329d14643"},a("div",{key:"94ee1a17ef5c624f63d8861d010b4b95223f17f4",class:"pn-search-field","data-inline":this.searchAuto(),"data-loading":this.loading,"data-searching":!!this.value,"data-jumbo":this.searchJumbo()},a("div",{key:"838a5a89e1652dab1212f07772bd4c2323de6675",class:"pn-search-field-container"},a("input",{key:"be1c7951cb8cb4ed028a41cca5bbd220e65b48d7",class:"pn-search-field-input",type:"search",value:this.value,id:this.searchid,name:this.name,"aria-label":this.label,placeholder:this.placeholder,disabled:this.disabled,required:this.required,autocomplete:this.autocomplete,list:this.list,ref:e=>this.searchElement=e,onKeyDown:e=>this.emitSearch({button:e}),onInput:e=>this.setVal(e)}),a("div",{key:"fe7812bf0c25af09d60e72486431df2592a0b84c",class:"pn-search-field-inline"},this.searchAuto()&&a("pn-button",{key:"869834cba8ed95d20930e88d54dc7155209841bd",class:"pn-search-field-button",type:"button",appearance:"light",small:!0,icon:p,iconOnly:!0,arialabel:this.getButtonLabel(),noTab:this.loading,onPnClick:e=>this.emitSearch({click:e.detail})}),!this.disabled&&a("pn-button",{key:"babac4d74b2434617080c44003efd52115306bcd",small:!0,class:"pn-search-field-clear",type:"button",appearance:"light",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="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414" clip-rule="evenodd"/></svg>',iconOnly:!0,arialabel:this.translate("CLEAR"),noTab:!this.value||this.loading,onPnClick:()=>this.clearInput()}),this.searchAuto()&&a("pn-spinner",{key:"00bdaedf9aee5cac814418f57f46cfdedc26a8db",class:"pn-search-field-spinner"}))),!this.searchAuto()&&a("pn-button",{key:"f3776eb201013f2a23995e6677800e3c3a69b5b4",class:"pn-search-field-submit",label:this.getButtonLabel(),tooltip:this.buttonTooltip,appearance:this.searchButtonAppearance(),variant:this.searchButtonVariant(),icon:p,iconOnly:this.searchSimple()||this.searchJumbo(),arialabel:this.searchSimple()||this.searchJumbo()?this.getButtonLabel():null,loading:this.loading,onPnClick:e=>this.emitSearch({click:e.detail})})))}static get style(){return`${e("pn-search-field")}{display:inline-block}${e("pn-search-field")} .pn-search-field{display:flex;gap:0.5em}${e("pn-search-field")} .pn-search-field-container{width:100%;flex:1 1 100%;position:relative}${e("pn-search-field")} .pn-search-field-input{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-search-field")} .pn-search-field-input:-webkit-autofill,${e("pn-search-field")} .pn-search-field-input:-webkit-autofill:hover,${e("pn-search-field")} .pn-search-field-input:-webkit-autofill:focus,${e("pn-search-field")} .pn-search-field-input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #e0f8ff inset;-webkit-text-fill-color:#2d2013}${e("pn-search-field")} .pn-search-field-input{outline:0.2rem solid transparent;outline-offset:0.2rem}${e("pn-search-field")} .pn-search-field-input:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}${e("pn-search-field")} .pn-search-field-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){${e("pn-search-field")} .pn-search-field-input{transition-duration:0s;transition-delay:0s}}${e("pn-search-field")} .pn-search-field-input::placeholder{color:#5e554a;font-weight:normal}${e("pn-search-field")} .pn-search-field-input:hover{border-color:#005d92}${e("pn-search-field")} .pn-search-field-input:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}${e("pn-search-field")} .pn-search-field-input{min-height:3em;height:100%;width:100%;border-radius:3em}${e("pn-search-field")} .pn-search-field-input::-webkit-search-cancel-button{display:none}${e("pn-search-field")} .pn-search-field-inline{pointer-events:none;position:absolute;top:0;right:0;background:transparent;width:3em;height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center}${e("pn-search-field")} .pn-search-field-inline ${e("pn-button")}{position:absolute;left:50%;top:50%;transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-search-field")} .pn-search-field-inline ${e("pn-button")}{transition-duration:0s;transition-delay:0s}}${e("pn-search-field")} .pn-search-field-inline ${e("pn-button")}{transition-delay:0.2s;transform:translate(100%, -50%)}${e("pn-search-field")} .pn-search-field-submit{white-space:nowrap}${e("pn-search-field")} .pn-search-field-spinner{position:absolute;left:50%;top:50%;transition:transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s;transform:translate(100%, -50%)}${e("pn-search-field")} .pn-search-field[data-inline] .pn-search-field-inline{pointer-events:unset}${e("pn-search-field")} .pn-search-field[data-inline] .pn-search-field-button{transform:translate(-50%, -50%)}${e("pn-search-field")} .pn-search-field[data-inline][data-loading] ${e("pn-button")}{transform:translate(100%, -50%)}${e("pn-search-field")} .pn-search-field[data-inline][data-loading] .pn-search-field-spinner{transform:translate(-50%, -50%)}${e("pn-search-field")} .pn-search-field[data-inline][data-searching] .pn-search-field-button{transform:translate(150%, -50%)}${e("pn-search-field")} .pn-search-field[data-jumbo] .pn-search-field-input{min-height:4em;padding-left:1.25em}${e("pn-search-field")} .pn-search-field[data-jumbo] .pn-search-field-submit .pn-button[data-icon-only]{width:4em;height:4em}${e("pn-search-field")} .pn-search-field[data-jumbo] .pn-search-field-submit .pn-button[data-icon-only][data-loading] .pn-button-bg{width:4em;height:4em}${e("pn-search-field")} .pn-search-field[data-searching] .pn-search-field-inline{pointer-events:unset}${e("pn-search-field")} .pn-search-field[data-searching] .pn-search-field-clear{transform:translate(-50%, -50%)}`}},[512,"pn-search-field",{label:[1],value:[1025],placeholder:[1],searchid:[1],name:[1],autocomplete:[1],list:[1],language:[1],disabled:[4],required:[4],loading:[4],button:[1],buttonLabel:[1,"button-label"],buttonTooltip:[1,"button-tooltip"],buttonLight:[4,"button-light"]},[[0,"input","inputHandler"]]]);function b(){"undefined"!=typeof customElements&&["pn-search-field","pn-button","pn-icon","pn-spinner"].forEach((n=>{switch(n){case"pn-search-field":customElements.get(e(e(n)))||customElements.define(e(e(n)),u);break;case"pn-button":customElements.get(e(e(n)))||c();break;case"pn-icon":customElements.get(e(e(n)))||d();break;case"pn-spinner":customElements.get(e(e(n)))||h()}}))}export{u as P,b as d}
+import{transformTag as e,proxyCustomElement as n,HTMLElement as i,createEvent as t,h as a,Host as s}from"@stencil/core/internal/client";import{u as l,k as r,e as o}from"./helpers.js";import{d as c}from"./pn-button2.js";import{d}from"./pn-icon2.js";import{d as h}from"./pn-spinner2.js";const p='<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="M4 11.442A7.44 7.44 0 0 1 11.44 4c6.24 0 9.617 7.154 5.923 11.949l2.844 2.844a1 1 0 0 1-1.414 1.414l-2.837-2.837C11.21 21.045 4 17.73 4 11.441m11.277 3.867C11.846 18.714 6 16.284 6 11.442A5.44 5.44 0 0 1 11.44 6c4.724 0 7.204 5.605 4.026 9.1z" clip-rule="evenodd"/></svg>',f={SEARCH:{en:"Search",sv:"Sök",da:"Søg",fi:"Hae",no:"Søk"},CLEAR:{en:"Clear search field",sv:"Rensa sökfältet",da:"Ryd søgefeltet",fi:"Tyhjennä hakukenttä",no:"Tøm søkefeltet"}},u=n(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.search=t(this,"search",7),this.update=t(this,"update",7)}id=`pn-search-field-${l()}`;searchElement;get hostElement(){return this}label;value="";placeholder;searchid=this.id;name;autocomplete;list;language=null;disabled=!1;required=!1;loading=!1;button="";buttonLabel;buttonTooltip;buttonLight=!1;search;update;inputHandler(){this.update.emit(this.value)}async componentWillLoad(){null===this.language&&await r(this.hostElement)}translate(e){return f?.[e]?.[this.language||o]}emitSearch({click:e,button:n}){("click"===e?.type||"keydown"===n?.type&&"Enter"===n?.key)&&((e||n).preventDefault(),this.search.emit(this.value))}setVal(e){this.value=e.target.value}clearInput(){this.value="",this.update.emit(this.value),this.hostElement.querySelector("input").focus()}getButtonLabel(){return this.buttonLabel||this.translate("SEARCH")}searchSimple(){return"icon"===this.button||"simple"===this.button}searchAuto(){return"icon-inline"===this.button||"none"===this.button||"auto"===this.button}searchJumbo(){return"jumbo"===this.button}searchButtonAppearance(){return this.searchSimple()?"light":null}searchButtonVariant(){return this.searchSimple()?"outlined":null}render(){return a(s,{key:"d6e76c457e99f83b3d47a4b0c951168c6b5fc086"},a("div",{key:"203055449e80dfd9bf19d94f340e4081d358a7b5",class:"pn-search-field","data-inline":this.searchAuto(),"data-loading":this.loading,"data-searching":!!this.value,"data-jumbo":this.searchJumbo()},a("div",{key:"bb86197c5f7e88c162eac8c899557bb5941ed6c6",class:"pn-search-field-container"},a("input",{key:"ba497f96d2afd9554e842010edf8cef656a994fc",class:"pn-search-field-input",type:"search",value:this.value,id:this.searchid,name:this.name,"aria-label":this.label,placeholder:this.placeholder,disabled:this.disabled,required:this.required,autocomplete:this.autocomplete,list:this.list,ref:e=>this.searchElement=e,onKeyDown:e=>this.emitSearch({button:e}),onInput:e=>this.setVal(e)}),a("div",{key:"bd11b1ec64b10dbc3b93fd0bcc163d5d120766cf",class:"pn-search-field-inline"},this.searchAuto()&&a("pn-button",{key:"c8961cb53609cc7d290b528af7e23a363a348833",class:"pn-search-field-button",type:"button",appearance:"light",small:!0,icon:p,iconOnly:!0,arialabel:this.getButtonLabel(),noTab:this.loading,onPnClick:e=>this.emitSearch({click:e.detail})}),!this.disabled&&a("pn-button",{key:"45197b884106304f5e3a4dc66b58333d8b79d4cb",small:!0,class:"pn-search-field-clear",type:"button",appearance:"light",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="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414" clip-rule="evenodd"/></svg>',iconOnly:!0,arialabel:this.translate("CLEAR"),noTab:!this.value||this.loading,onPnClick:()=>this.clearInput()}),this.searchAuto()&&a("pn-spinner",{key:"f681e4d08d66c9658f09b9cd947b70e4cd0f0837",class:"pn-search-field-spinner"}))),!this.searchAuto()&&a("pn-button",{key:"8498355d5d49c64755c58ce4d599938e3e25c84b",class:"pn-search-field-submit",label:this.getButtonLabel(),tooltip:this.buttonTooltip,appearance:this.searchButtonAppearance(),variant:this.searchButtonVariant(),icon:p,iconOnly:this.searchSimple()||this.searchJumbo(),arialabel:this.searchSimple()||this.searchJumbo()?this.getButtonLabel():null,loading:this.loading,onPnClick:e=>this.emitSearch({click:e.detail})})))}static get style(){return`${e("pn-search-field")}{display:inline-block}${e("pn-search-field")} .pn-search-field{display:flex;gap:0.5em}${e("pn-search-field")} .pn-search-field-container{width:100%;flex:1 1 100%;position:relative}${e("pn-search-field")} .pn-search-field-input{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-search-field")} .pn-search-field-input:-webkit-autofill,${e("pn-search-field")} .pn-search-field-input:-webkit-autofill:hover,${e("pn-search-field")} .pn-search-field-input:-webkit-autofill:focus,${e("pn-search-field")} .pn-search-field-input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #e0f8ff inset;-webkit-text-fill-color:#2d2013}${e("pn-search-field")} .pn-search-field-input{outline:0.2rem solid transparent;outline-offset:0.2rem}${e("pn-search-field")} .pn-search-field-input:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}${e("pn-search-field")} .pn-search-field-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){${e("pn-search-field")} .pn-search-field-input{transition-duration:0s;transition-delay:0s}}${e("pn-search-field")} .pn-search-field-input::placeholder{color:#5e554a;font-weight:normal}${e("pn-search-field")} .pn-search-field-input:hover{border-color:#005d92}${e("pn-search-field")} .pn-search-field-input:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}${e("pn-search-field")} .pn-search-field-input{min-height:3em;height:100%;width:100%;border-radius:3em}${e("pn-search-field")} .pn-search-field-input::-webkit-search-cancel-button{display:none}${e("pn-search-field")} .pn-search-field-inline{pointer-events:none;position:absolute;top:0;right:0;background:transparent;width:3em;height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center}${e("pn-search-field")} .pn-search-field-inline ${e("pn-button")}{position:absolute;left:50%;top:50%;transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-search-field")} .pn-search-field-inline ${e("pn-button")}{transition-duration:0s;transition-delay:0s}}${e("pn-search-field")} .pn-search-field-inline ${e("pn-button")}{transition-delay:0.2s;transform:translate(100%, -50%)}${e("pn-search-field")} .pn-search-field-submit{white-space:nowrap}${e("pn-search-field")} .pn-search-field-spinner{position:absolute;left:50%;top:50%;transition:transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s;transform:translate(100%, -50%)}${e("pn-search-field")} .pn-search-field[data-inline] .pn-search-field-inline{pointer-events:unset}${e("pn-search-field")} .pn-search-field[data-inline] .pn-search-field-button{transform:translate(-50%, -50%)}${e("pn-search-field")} .pn-search-field[data-inline][data-loading] ${e("pn-button")}{transform:translate(100%, -50%)}${e("pn-search-field")} .pn-search-field[data-inline][data-loading] .pn-search-field-spinner{transform:translate(-50%, -50%)}${e("pn-search-field")} .pn-search-field[data-inline][data-searching] .pn-search-field-button{transform:translate(150%, -50%)}${e("pn-search-field")} .pn-search-field[data-jumbo] .pn-search-field-input{min-height:4em;padding-left:1.25em}${e("pn-search-field")} .pn-search-field[data-jumbo] .pn-search-field-submit .pn-button[data-icon-only]{width:4em;height:4em}${e("pn-search-field")} .pn-search-field[data-jumbo] .pn-search-field-submit .pn-button[data-icon-only][data-loading] .pn-button-bg{width:4em;height:4em}${e("pn-search-field")} .pn-search-field[data-searching] .pn-search-field-inline{pointer-events:unset}${e("pn-search-field")} .pn-search-field[data-searching] .pn-search-field-clear{transform:translate(-50%, -50%)}`}},[512,"pn-search-field",{label:[1],value:[1025],placeholder:[1],searchid:[1],name:[1],autocomplete:[1],list:[1],language:[1],disabled:[4],required:[4],loading:[4],button:[1],buttonLabel:[1,"button-label"],buttonTooltip:[1,"button-tooltip"],buttonLight:[4,"button-light"]},[[0,"input","inputHandler"]]]);function b(){"undefined"!=typeof customElements&&["pn-search-field","pn-button","pn-icon","pn-spinner"].forEach((n=>{switch(n){case"pn-search-field":customElements.get(e(e(n)))||customElements.define(e(e(n)),u);break;case"pn-button":customElements.get(e(e(n)))||c();break;case"pn-icon":customElements.get(e(e(n)))||d();break;case"pn-spinner":customElements.get(e(e(n)))||h()}}))}export{u as P,b as d}

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

@@ -2,4 +2,4 @@
  * Built with Stencil
  * By PostNord.
  */
-import{transformTag as e,proxyCustomElement as t,HTMLElement as n,createEvent as s,h as i,Host as a}from"@stencil/core/internal/client";import{u as l}from"./helpers.js";import{d as o}from"./pn-icon2.js";const r=t(class extends n{constructor(e){super(),!1!==e&&this.__registerHost(),this.segmentHover=s(this,"segmentHover",7)}id="pn-segment-"+l();get hostElement(){return this}label;name;value;selected=!1;segmentid=this.id;icon;disabled=!1;segmentHover;handleHover(e){this.segmentHover.emit(e)}render(){return i(a,{key:"ac169c10456f5cadd62bdebbe97f416f81a7633b",onMouseEnter:e=>this.handleHover(e)},i("input",{key:"b58b8ba98292e44516f23a8f78da408ab4ed6eed",class:"pn-segment",id:this.segmentid,name:this.name,checked:this.selected,type:"radio",value:this.value,disabled:this.disabled}),i("label",{key:"60bdaff95de6dabd3fbc435c1f2ed6e732866057",htmlFor:this.segmentid,class:"pn-segment-label"},this.icon&&i("pn-icon",{key:"aba84b5c75e1245a92f37f89e9bfd79c7406092e",icon:this.icon,color:"blue700"}),i("span",{key:"a8bb1c78d27c62ebd1ba11a60721781cfb1ecfeb",class:"pn-segment-text"},this.label,i("slot",{key:"2bc3e624fa41960578f685b785b457c2953b562c"}))))}static get style(){return`${e("pn-segment")}{position:relative;color:#005d92;margin-right:0.5em;z-index:2;white-space:nowrap;scroll-snap-align:center;outline:none;-webkit-tap-highlight-color:transparent;transform:translateZ(0)}${e("pn-segment")}:last-of-type{margin-right:0}${e("pn-segment")} .pn-segment{cursor:pointer;margin:0;padding:0;opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;-webkit-tap-highlight-color:transparent}${e("pn-segment")} .pn-segment:disabled{cursor:not-allowed}${e("pn-segment")} .pn-segment:disabled~.pn-segment-label{color:#5e554a}${e("pn-segment")} .pn-segment:disabled~.pn-segment-label ${e("pn-icon")} .pn-icon-svg path{fill:#5e554a}${e("pn-segment")} .pn-segment-label{height:100%;width:100%;padding:0.5em;border-radius:3em;font-weight:500;border:0.0625em solid transparent;display:inline-flex;gap:0.5em;align-items:center;-webkit-tap-highlight-color:transparent}`}},[772,"pn-segment",{label:[1],name:[1],value:[1],selected:[4],segmentid:[1],icon:[1],disabled:[4]}]),c=r,p=function(){"undefined"!=typeof customElements&&["pn-segment","pn-icon"].forEach((t=>{switch(t){case"pn-segment":customElements.get(e(e(t)))||customElements.define(e(e(t)),r);break;case"pn-icon":customElements.get(e(e(t)))||o()}}))};export{c as PnSegment,p as defineCustomElement}
+import{transformTag as e,proxyCustomElement as t,HTMLElement as n,createEvent as s,h as i,Host as a}from"@stencil/core/internal/client";import{u as l}from"./helpers.js";import{d as o}from"./pn-icon2.js";const c=t(class extends n{constructor(e){super(),!1!==e&&this.__registerHost(),this.segmentHover=s(this,"segmentHover",7)}id="pn-segment-"+l();get hostElement(){return this}label;name;value;selected=!1;segmentid=this.id;icon;disabled=!1;segmentHover;handleHover(e){this.segmentHover.emit(e)}render(){return i(a,{key:"b98bb414de20d14fc2ee9d087be192d5f17bf1f9",onMouseEnter:e=>this.handleHover(e)},i("input",{key:"0b6117d85bb547c249a402cc26494355f3dc3e95",class:"pn-segment",id:this.segmentid,name:this.name,checked:this.selected,type:"radio",value:this.value,disabled:this.disabled}),i("label",{key:"8570c7c62ccfcfdd5dca9d8e1a6e016ca9c6a304",htmlFor:this.segmentid,class:"pn-segment-label"},this.icon&&i("pn-icon",{key:"e10a1ea4ca26f71e6caadbeeda6bf5d68cfc266f",icon:this.icon,color:"blue700"}),i("span",{key:"8ec12157e0ca6f62772743e06beefc677f9f9f87",class:"pn-segment-text"},this.label,i("slot",{key:"6342dfb17f71cae05318a3c19a19fdb6e46bb157"}))))}static get style(){return`${e("pn-segment")}{position:relative;color:#005d92;margin-right:0.5em;z-index:2;white-space:nowrap;scroll-snap-align:center;outline:none;-webkit-tap-highlight-color:transparent;transform:translateZ(0)}${e("pn-segment")}:last-of-type{margin-right:0}${e("pn-segment")} .pn-segment{cursor:pointer;margin:0;padding:0;opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;-webkit-tap-highlight-color:transparent}${e("pn-segment")} .pn-segment:disabled{cursor:not-allowed}${e("pn-segment")} .pn-segment:disabled~.pn-segment-label{color:#5e554a}${e("pn-segment")} .pn-segment:disabled~.pn-segment-label ${e("pn-icon")} .pn-icon-svg path{fill:#5e554a}${e("pn-segment")} .pn-segment-label{height:100%;width:100%;padding:0.5em;border-radius:3em;font-weight:500;border:0.0625em solid transparent;display:inline-flex;gap:0.5em;align-items:center;-webkit-tap-highlight-color:transparent}`}},[772,"pn-segment",{label:[1],name:[1],value:[1],selected:[4],segmentid:[1],icon:[1],disabled:[4]}]),r=c,p=function(){"undefined"!=typeof customElements&&["pn-segment","pn-icon"].forEach((t=>{switch(t){case"pn-segment":customElements.get(e(e(t)))||customElements.define(e(e(t)),c);break;case"pn-icon":customElements.get(e(e(t)))||o()}}))};export{r as PnSegment,p as defineCustomElement}

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

@@ -2,4 +2,4 @@
  * Built with Stencil
  * By PostNord.
  */
-import{transformTag as e,proxyCustomElement as t,HTMLElement as n,forceUpdate as r,h as o,Host as s}from"@stencil/core/internal/client";import{a as i}from"./arrow_left.js";import{a}from"./arrow_right.js";import{d as c}from"./pn-icon2.js";const d=t(class extends n{constructor(e){super(),!1!==e&&this.__registerHost()}mo;segmentContainer;segments=[];activeBg;hoverBg;scrollRegistered=!1;get hostElement(){return this}showScrollArrows=!1;showLeftArrow=!1;showRightArrow=!1;name;value;valueHandler(){this.setActiveSegment()}changeHandler(e){this.value=e.target.value,this.setActiveSegment()}handleResize(){this.rerender()}handleHover(e){const{target:t}=e.detail;this.calcHighlight(t,!0)}componentDidLoad(){this.mo&&this.mo.disconnect(),this.mo=new MutationObserver((()=>{r(this.hostElement),this.setSegments()})),this.mo.observe(this.hostElement,{childList:!0}),this.setSegments()}setSegments(){this.segments=Array.from(this.hostElement.querySelectorAll(""+e("pn-segment"))),this.setActiveSegment()}setActiveSegment(){this.segments.forEach((e=>{this.value===e.value?e.setAttribute("selected","true"):e.removeAttribute("selected")})),this.rerender()}rerender(){requestAnimationFrame((()=>{this.calcHighlight(),this.scrollArrowRender()}))}calcHighlight(t,n){const r=n?this.hoverBg:this.activeBg;requestAnimationFrame((()=>{const n=t||this.segments.find((({value:e})=>e===this.value)),o=n?.closest(""+e("pn-segment"));if(!o)return;const s=o.getBoundingClientRect(),{left:i}=this.segmentContainer.getBoundingClientRect(),{left:a,height:c,width:d}=s;r.style.setProperty("transform",`translate(${a-i+this.segmentContainer.scrollLeft}px, -50%`),r.style.setProperty("width",d+"px"),r.style.setProperty("height",c+"px"),n.disabled?r.dataset.disabled="":delete r.dataset.disabled}))}scrollArrowRender(){if(this.segmentContainer.scrollWidth>this.segmentContainer.clientWidth){this.showScrollArrows=!0,this.scrollRegistered||(this.segmentContainer.addEventListener("scroll",this.scrollArrowRender.bind(this)),this.scrollRegistered=!0);const e=Math.round(this.segmentContainer.scrollWidth-this.segmentContainer.scrollLeft)-this.segmentContainer.clientWidth;return this.showLeftArrow=this.segmentContainer.scrollLeft>0,void(this.showRightArrow=e>0)}this.showLeftArrow=!1,this.showRightArrow=!1,this.showScrollArrows=!1}scroll(e){this.segmentContainer.scroll({left:this.segmentContainer.scrollLeft+e,behavior:"smooth"})}scrollArrowClasses(){const e=["pn-sc-arrows"];return this.showLeftArrow&&e.push("pn-sc-left-visible"),this.showRightArrow&&e.push("pn-sc-right-visible"),e.join(" ")}render(){return o(s,{key:"a43ed5a11b854e8f7d0ec9fa4f134480a510de63"},o("div",{key:"d838f7a86ab63e80874eda6ca12885657127ed33",class:"pn-segmented-control",ref:e=>this.segmentContainer=e},o("slot",{key:"edc2ab83406cf25a6f3854f3e6886e3ab658af63"}),o("div",{key:"e56e19761edf88813a423a986e8f82c56c8b252c",class:"pn-sc-bg","data-active":!0,ref:e=>this.activeBg=e}),o("div",{key:"c7ffc7f04d456d72418684715015ead88f65bc72",class:"pn-sc-bg","data-hover":!0,ref:e=>this.hoverBg=e})),o("div",{key:"4c5eecbd2f70a2ee159a465265071d5705370232",class:this.scrollArrowClasses(),hidden:!this.showScrollArrows},o("button",{key:"4f987e124f74b1a24871f81fa07eeb0d8cebe913","aria-label":"Left",class:"pn-sc-arrow pn-sc-arrow-left",onClick:()=>this.scroll(-120),tabindex:"-1"},o("pn-icon",{key:"a1e6cc5963fb758e5ba74668856e5addeb22052c",icon:i})),o("button",{key:"3eb57c028b2d547b14cd700cf162708ff3a4b1ab","aria-label":"Right",class:"pn-sc-arrow pn-sc-arrow-right",onClick:()=>this.scroll(120),tabindex:"-1"},o("pn-icon",{key:"aefbe98d26875fbff30c4001468730dcb9d777e7",icon:a}))))}static get watchers(){return{value:[{valueHandler:0}]}}static get style(){return`${e("pn-segmented-control")}{position:relative;display:inline-block;max-width:100%;overflow:hidden;border-radius:3em;transform:translateZ(0);transition-property:outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-segmented-control")}{transition-duration:0s;transition-delay:0s}}${e("pn-segmented-control")}{outline:0.2rem solid transparent;outline-offset:0.2rem}${e("pn-segmented-control")}:focus-within,${e("pn-segmented-control")}:active{outline-color:#005d92}${e("pn-segmented-control")} .pn-segmented-control{display:flex;align-items:center;border-radius:3em;min-height:3em;padding:0.25em;background:#f3f2f2;position:relative;overflow-x:auto;scroll-snap-type:x mandatory}${e("pn-segmented-control")} .pn-segmented-control:hover .pn-sc-bg[data-hover]{opacity:1}${e("pn-segmented-control")} .pn-segmented-control::-webkit-scrollbar{display:none}${e("pn-segmented-control")} .pn-segmented-control .pn-sc-bg{position:absolute;top:50%;transform:translateY(-50%);will-change:transform;left:0;border-radius:inherit;transition-property:width, transform, background-color, opacity, box-shadow;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-segmented-control")} .pn-segmented-control .pn-sc-bg{transition-duration:0s;transition-delay:0s}}${e("pn-segmented-control")} .pn-segmented-control .pn-sc-bg[data-active]{box-shadow:0px 0.3px 0.9px rgba(0, 0, 0, 0.1), 0px 1.6px 3.6px rgba(0, 0, 0, 0.13);border:0.0625em solid #005d92;background-color:#ffffff;z-index:1}${e("pn-segmented-control")} .pn-segmented-control .pn-sc-bg[data-hover]{background-color:#e0f8ff;opacity:0;border:0.25em solid transparent;z-index:0}${e("pn-segmented-control")} .pn-segmented-control .pn-sc-bg[data-hover][data-disabled]{border-color:#e9e6e5;background-color:#e9e6e5}${e("pn-segmented-control")} .pn-segmented-control .pn-sc-bg[data-disabled]{border-color:#e9e6e5;background-color:#e9e6e5}${e("pn-segmented-control")} .pn-sc-arrows{position:absolute;top:50%;transform:translateY(-50%);left:0;height:100%;width:100%;z-index:3;display:flex;justify-content:space-between;align-items:center;pointer-events:none}${e("pn-segmented-control")} .pn-sc-arrows svg{width:1.5em}${e("pn-segmented-control")} .pn-sc-arrows svg.pn-icon-svg path{fill:#005d92}${e("pn-segmented-control")} .pn-sc-arrows>.pn-sc-arrow{cursor:pointer;pointer-events:all;width:2.5em;height:2.5em;background:#ffffff;border:none;outline:none;display:flex;align-items:center;justify-content:center;opacity:0;will-change:transform;-webkit-tap-highlight-color:transparent;transition-property:transform, opacity, background-color, box-shadow;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-segmented-control")} .pn-sc-arrows>.pn-sc-arrow{transition-duration:0s;transition-delay:0s}}${e("pn-segmented-control")} .pn-sc-arrows>.pn-sc-arrow.pn-sc-arrow-left{transform:translateX(-100%);border-radius:0 50% 50% 0;padding:0 0.3em 0 0;box-shadow:0.2rem 0.3rem 0.2rem rgba(0, 0, 0, 0.4)}${e("pn-segmented-control")} .pn-sc-arrows>.pn-sc-arrow.pn-sc-arrow-right{transform:translateX(100%);border-radius:50% 0 0 50%;box-shadow:-0.2rem 0.3rem 0.2rem rgba(0, 0, 0, 0.4)}${e("pn-segmented-control")} .pn-sc-arrows.pn-sc-left-visible .pn-sc-arrow-left,${e("pn-segmented-control")} .pn-sc-arrows.pn-sc-right-visible .pn-sc-arrow-right{opacity:1;transform:translateX(0)}`}},[772,"pn-segmented-control",{name:[1],value:[1025],showScrollArrows:[32],showLeftArrow:[32],showRightArrow:[32]},[[0,"change","changeHandler"],[9,"resize","handleResize"],[0,"segmentHover","handleHover"]],{value:[{valueHandler:0}]}]),l=d,p=function(){"undefined"!=typeof customElements&&["pn-segmented-control","pn-icon"].forEach((t=>{switch(t){case"pn-segmented-control":customElements.get(e(e(t)))||customElements.define(e(e(t)),d);break;case"pn-icon":customElements.get(e(e(t)))||c()}}))};export{l as PnSegmentedControl,p as defineCustomElement}
+import{transformTag as e,proxyCustomElement as t,HTMLElement as n,forceUpdate as r,h as o,Host as s}from"@stencil/core/internal/client";import{a as i}from"./arrow_left.js";import{a}from"./arrow_right.js";import{d as c}from"./pn-icon2.js";const d=t(class extends n{constructor(e){super(),!1!==e&&this.__registerHost()}mo;segmentContainer;segments=[];activeBg;hoverBg;scrollRegistered=!1;get hostElement(){return this}showScrollArrows=!1;showLeftArrow=!1;showRightArrow=!1;name;value;valueHandler(){this.setActiveSegment()}changeHandler(e){this.value=e.target.value,this.setActiveSegment()}handleResize(){this.rerender()}handleHover(e){const{target:t}=e.detail;this.calcHighlight(t,!0)}componentDidLoad(){this.mo&&this.mo.disconnect(),this.mo=new MutationObserver((()=>{r(this.hostElement),this.setSegments()})),this.mo.observe(this.hostElement,{childList:!0}),this.setSegments()}setSegments(){this.segments=Array.from(this.hostElement.querySelectorAll(""+e("pn-segment"))),this.setActiveSegment()}setActiveSegment(){this.segments.forEach((e=>{this.value===e.value?e.setAttribute("selected","true"):e.removeAttribute("selected")})),this.rerender()}rerender(){requestAnimationFrame((()=>{this.calcHighlight(),this.scrollArrowRender()}))}calcHighlight(t,n){const r=n?this.hoverBg:this.activeBg;requestAnimationFrame((()=>{const n=t||this.segments.find((({value:e})=>e===this.value)),o=n?.closest(""+e("pn-segment"));if(!o)return;const s=o.getBoundingClientRect(),{left:i}=this.segmentContainer.getBoundingClientRect(),{left:a,height:c,width:d}=s;r.style.setProperty("transform",`translate(${a-i+this.segmentContainer.scrollLeft}px, -50%`),r.style.setProperty("width",d+"px"),r.style.setProperty("height",c+"px"),n.disabled?r.dataset.disabled="":delete r.dataset.disabled}))}scrollArrowRender(){if(this.segmentContainer.scrollWidth>this.segmentContainer.clientWidth){this.showScrollArrows=!0,this.scrollRegistered||(this.segmentContainer.addEventListener("scroll",this.scrollArrowRender.bind(this)),this.scrollRegistered=!0);const e=Math.round(this.segmentContainer.scrollWidth-this.segmentContainer.scrollLeft)-this.segmentContainer.clientWidth;return this.showLeftArrow=this.segmentContainer.scrollLeft>0,void(this.showRightArrow=e>0)}this.showLeftArrow=!1,this.showRightArrow=!1,this.showScrollArrows=!1}scroll(e){this.segmentContainer.scroll({left:this.segmentContainer.scrollLeft+e,behavior:"smooth"})}scrollArrowClasses(){const e=["pn-sc-arrows"];return this.showLeftArrow&&e.push("pn-sc-left-visible"),this.showRightArrow&&e.push("pn-sc-right-visible"),e.join(" ")}render(){return o(s,{key:"4ff48c9a0556397894d55f7d3dc0a266349ef8fc"},o("div",{key:"82ef8456eda4724b55705f9a662577eb172df89d",class:"pn-segmented-control",ref:e=>this.segmentContainer=e},o("slot",{key:"9b2949cf6e7976795543f6f8a67c126bee02e59d"}),o("div",{key:"42ab10791de502f48aac3a16766425b435c1c52e",class:"pn-sc-bg","data-active":!0,ref:e=>this.activeBg=e}),o("div",{key:"24060bf183aabe485b7ff66bbad9b44a7704df12",class:"pn-sc-bg","data-hover":!0,ref:e=>this.hoverBg=e})),o("div",{key:"31790d3f9fccd0c4242b5584ba2ff6ee32df4297",class:this.scrollArrowClasses(),hidden:!this.showScrollArrows},o("button",{key:"8ffa7498550bc0f052b77f5297b349b84efbccb8","aria-label":"Left",class:"pn-sc-arrow pn-sc-arrow-left",onClick:()=>this.scroll(-120),tabindex:"-1"},o("pn-icon",{key:"89d4ee843ade39e7264e08c31ad83c2dd32f7931",icon:i})),o("button",{key:"8f1707b0e2debb84451210d03187b51eba3f2897","aria-label":"Right",class:"pn-sc-arrow pn-sc-arrow-right",onClick:()=>this.scroll(120),tabindex:"-1"},o("pn-icon",{key:"4fa0fcd57eb268e3c9cd9e42f5d4e84b433fafee",icon:a}))))}static get watchers(){return{value:[{valueHandler:0}]}}static get style(){return`${e("pn-segmented-control")}{position:relative;display:inline-block;max-width:100%;overflow:hidden;border-radius:3em;transform:translateZ(0);transition-property:outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-segmented-control")}{transition-duration:0s;transition-delay:0s}}${e("pn-segmented-control")}{outline:0.2rem solid transparent;outline-offset:0.2rem}${e("pn-segmented-control")}:focus-within,${e("pn-segmented-control")}:active{outline-color:#005d92}${e("pn-segmented-control")} .pn-segmented-control{display:flex;align-items:center;border-radius:3em;min-height:3em;padding:0.25em;background:#f3f2f2;position:relative;overflow-x:auto;scroll-snap-type:x mandatory}${e("pn-segmented-control")} .pn-segmented-control:hover .pn-sc-bg[data-hover]{opacity:1}${e("pn-segmented-control")} .pn-segmented-control::-webkit-scrollbar{display:none}${e("pn-segmented-control")} .pn-segmented-control .pn-sc-bg{position:absolute;top:50%;transform:translateY(-50%);will-change:transform;left:0;border-radius:inherit;transition-property:width, transform, background-color, opacity, box-shadow;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-segmented-control")} .pn-segmented-control .pn-sc-bg{transition-duration:0s;transition-delay:0s}}${e("pn-segmented-control")} .pn-segmented-control .pn-sc-bg[data-active]{box-shadow:0px 0.3px 0.9px rgba(0, 0, 0, 0.1), 0px 1.6px 3.6px rgba(0, 0, 0, 0.13);border:0.0625em solid #005d92;background-color:#ffffff;z-index:1}${e("pn-segmented-control")} .pn-segmented-control .pn-sc-bg[data-hover]{background-color:#e0f8ff;opacity:0;border:0.25em solid transparent;z-index:0}${e("pn-segmented-control")} .pn-segmented-control .pn-sc-bg[data-hover][data-disabled]{border-color:#e9e6e5;background-color:#e9e6e5}${e("pn-segmented-control")} .pn-segmented-control .pn-sc-bg[data-disabled]{border-color:#e9e6e5;background-color:#e9e6e5}${e("pn-segmented-control")} .pn-sc-arrows{position:absolute;top:50%;transform:translateY(-50%);left:0;height:100%;width:100%;z-index:3;display:flex;justify-content:space-between;align-items:center;pointer-events:none}${e("pn-segmented-control")} .pn-sc-arrows svg{width:1.5em}${e("pn-segmented-control")} .pn-sc-arrows svg.pn-icon-svg path{fill:#005d92}${e("pn-segmented-control")} .pn-sc-arrows>.pn-sc-arrow{cursor:pointer;pointer-events:all;width:2.5em;height:2.5em;background:#ffffff;border:none;outline:none;display:flex;align-items:center;justify-content:center;opacity:0;will-change:transform;-webkit-tap-highlight-color:transparent;transition-property:transform, opacity, background-color, box-shadow;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-segmented-control")} .pn-sc-arrows>.pn-sc-arrow{transition-duration:0s;transition-delay:0s}}${e("pn-segmented-control")} .pn-sc-arrows>.pn-sc-arrow.pn-sc-arrow-left{transform:translateX(-100%);border-radius:0 50% 50% 0;padding:0 0.3em 0 0;box-shadow:0.2rem 0.3rem 0.2rem rgba(0, 0, 0, 0.4)}${e("pn-segmented-control")} .pn-sc-arrows>.pn-sc-arrow.pn-sc-arrow-right{transform:translateX(100%);border-radius:50% 0 0 50%;box-shadow:-0.2rem 0.3rem 0.2rem rgba(0, 0, 0, 0.4)}${e("pn-segmented-control")} .pn-sc-arrows.pn-sc-left-visible .pn-sc-arrow-left,${e("pn-segmented-control")} .pn-sc-arrows.pn-sc-right-visible .pn-sc-arrow-right{opacity:1;transform:translateX(0)}`}},[772,"pn-segmented-control",{name:[1],value:[1025],showScrollArrows:[32],showLeftArrow:[32],showRightArrow:[32]},[[0,"change","changeHandler"],[9,"resize","handleResize"],[0,"segmentHover","handleHover"]],{value:[{valueHandler:0}]}]),l=d,p=function(){"undefined"!=typeof customElements&&["pn-segmented-control","pn-icon"].forEach((t=>{switch(t){case"pn-segmented-control":customElements.get(e(e(t)))||customElements.define(e(e(t)),d);break;case"pn-icon":customElements.get(e(e(t)))||c()}}))};export{l as PnSegmentedControl,p as defineCustomElement}

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

@@ -2,4 +2,4 @@
  * Built with Stencil
  * By PostNord.
  */
-import{transformTag as e,proxyCustomElement as t,HTMLElement as n,forceUpdate as l,h as c,Host as o}from"@stencil/core/internal/client";import{a as s}from"./alert_exclamation_circle.js";import{c as r}from"./chevron_down.js";import{u as i}from"./helpers.js";import{d as a}from"./pn-icon2.js";const p=t(class extends n{constructor(e){super(),!1!==e&&this.__registerHost()}id=`pn-select-${i()}`;idHelpertext=`${this.id}-text`;select;mo;get hostElement(){return this}label;helpertext;selectId=this.id;icon;name;form;autocomplete;required=!1;disabled=!1;invalid=!1;error;componentDidLoad(){this.mo&&this.mo.disconnect(),this.mo=new MutationObserver((()=>l(this.hostElement))),this.mo.observe(this.hostElement,{childList:!0,subtree:!0})}hasError(){return this.invalid||!!this.error}hasMessage(){return!!this.helpertext||!!this.error}render(){return c(o,{key:"bace0ffbe4d9bb8bfe73ed8d55a9d95cc5d8fe35"},c("div",{key:"8d6c5e7c9271c0f9a9350c4c6daa31bf21e6bc9a",class:"pn-select","data-error":this.hasError()},this.label&&c("label",{key:"ce8ef956e612931988c880bc852675cf2e8a1359",htmlFor:this.selectId,class:"pn-select-label"},c("span",{key:"512d5e9a84249de9bd673a612e272497e5555121"},this.label)),c("div",{key:"b124744c213b35fb95b3acdcf148c2956125273b",class:"pn-select-input"},this.icon&&c("pn-icon",{key:"2eb0536a37b49f6ff54cf469f435d2fc0f35585a",class:"pn-select-icon",icon:this.icon,"data-custom":!0,"aria-hidden":"true"}),this.hasError()&&c("pn-icon",{key:"8ed4eb8ea34b1e235da8b674c9e0398dc76ce112",class:"pn-select-icon",icon:s,color:"warning","data-error":!0,"aria-hidden":"true"}),c("select",{key:"1f1c8e999880212f089281ecf0758ec358221856",id:this.selectId,class:"pn-select-element",name:this.name,form:this.form,autocomplete:this.autocomplete,"aria-describedby":this.hasMessage()&&this.idHelpertext,"aria-invalid":this.hasError().toString(),disabled:this.disabled,"data-placeholder":""===this.select?.value,ref:e=>this.select=e},c("slot",{key:"d13553a20c6117e102da282ec5b8a4112180a958"})),c("pn-icon",{key:"c44848a4a579f536b3b6cc05eef0a9823b5b82af",class:"pn-select-icon",icon:r,color:"blue700","data-default":!0,"aria-hidden":"true"})),this.hasMessage()&&c("p",{key:"841cd7f201d4e241da35501eae265dd440028472",id:this.idHelpertext,class:"pn-select-helper",role:this.error?"alert":null},c("span",{key:"307f5c9193f94cdf172f9d0a4bea34f96c8051e2"},this.error||this.helpertext))))}static get style(){return`${e("pn-select")}{display:inline-block}${e("pn-select")} .pn-select-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){${e("pn-select")} .pn-select-label{transition-duration:0s;transition-delay:0s}}${e("pn-select")} .pn-select-label>span{font-size:0.875em}${e("pn-select")} .pn-select-input{position:relative}${e("pn-select")} .pn-select-icon{pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);width:1.5em;height:1.5em;border-radius:50%;background-color:transparent}${e("pn-select")} .pn-select-icon[data-default]{right:0.75em}${e("pn-select")} .pn-select-icon[data-custom]{left:0.75em}${e("pn-select")} .pn-select-icon[data-custom]~.pn-select-element{padding-left:3em}${e("pn-select")} .pn-select-icon[data-error]{right:3em}${e("pn-select")} .pn-select-icon[data-error]~.pn-select-element{padding-right:5em}${e("pn-select")} .pn-select-icon>.pn-icon-svg{transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-select")} .pn-select-icon>.pn-icon-svg{transition-duration:0s;transition-delay:0s}}${e("pn-select")} .pn-select-element{cursor:pointer;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-select")} .pn-select-element:-webkit-autofill,${e("pn-select")} .pn-select-element:-webkit-autofill:hover,${e("pn-select")} .pn-select-element:-webkit-autofill:focus,${e("pn-select")} .pn-select-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #e0f8ff inset;-webkit-text-fill-color:#2d2013}${e("pn-select")} .pn-select-element{outline:0.2rem solid transparent;outline-offset:0.2rem}${e("pn-select")} .pn-select-element:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}${e("pn-select")} .pn-select-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-select")} .pn-select-element{transition-duration:0s;transition-delay:0s}}${e("pn-select")} .pn-select-element::placeholder{color:#5e554a;font-weight:normal}${e("pn-select")} .pn-select-element:hover{border-color:#005d92}${e("pn-select")} .pn-select-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}${e("pn-select")} .pn-select-element{width:100%;padding-right:3em;-webkit-appearance:none;-moz-appearance:none;appearance:none}${e("pn-select")} .pn-select-element:open+${e("pn-icon")} .pn-icon-svg{transform:rotate(180deg)}${e("pn-select")} .pn-select-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}${e("pn-select")} .pn-select-element[data-placeholder]{color:#5e554a;font-weight:normal}${e("pn-select")} .pn-select-element:hover{color:#2d2013;background-color:#effbff}${e("pn-select")} .pn-select-no-results{margin:0;padding:0.75em}${e("pn-select")} .pn-select-helper{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-select")} .pn-select-helper[role=alert]{color:#a70707}${e("pn-select")} .pn-select[data-error]>.pn-select-label{color:#a70707}${e("pn-select")} .pn-select[data-error]>.pn-select-input>.pn-select-element{border-color:#a70707}${e("pn-select")} .pn-select[data-error]>.pn-select-input>.pn-select-element:hover{border-color:#500715}${e("pn-select")} .pn-select[data-error]>.pn-select-input>.pn-select-element:focus-visible{background-color:#ffffff;border-color:#a70707;outline-color:#a70707}${e("pn-select")} .pn-select[data-error]>.pn-select-input>.pn-select-element:hover{background-color:#fdefee}`}},[772,"pn-select",{label:[1],helpertext:[1],selectId:[1,"select-id"],icon:[1],name:[1],form:[1],autocomplete:[1],required:[4],disabled:[4],invalid:[4],error:[1]}]);function d(){"undefined"!=typeof customElements&&["pn-select","pn-icon"].forEach((t=>{switch(t){case"pn-select":customElements.get(e(e(t)))||customElements.define(e(e(t)),p);break;case"pn-icon":customElements.get(e(e(t)))||a()}}))}export{p as P,d}
+import{transformTag as e,proxyCustomElement as t,HTMLElement as n,forceUpdate as l,h as s,Host as c}from"@stencil/core/internal/client";import{a as o}from"./alert_exclamation_circle.js";import{c as a}from"./chevron_down.js";import{u as i}from"./helpers.js";import{d as r}from"./pn-icon2.js";const p=t(class extends n{constructor(e){super(),!1!==e&&this.__registerHost()}id=`pn-select-${i()}`;idHelpertext=`${this.id}-text`;select;mo;get hostElement(){return this}label;helpertext;selectId=this.id;icon;compact=!1;name;form;autocomplete;required=!1;disabled=!1;invalid=!1;error;componentDidLoad(){this.mo&&this.mo.disconnect(),this.mo=new MutationObserver((()=>l(this.hostElement))),this.mo.observe(this.hostElement,{childList:!0,subtree:!0})}hasError(){return this.invalid||!!this.error}hasMessage(){return!!this.helpertext||!!this.error}renderLabel(){return this.label?s("label",{htmlFor:this.selectId,class:"pn-select-label","data-compact":this.compact,"data-icon":!!this.icon},s("span",null,this.label)):null}render(){return s(c,{key:"59c8dba79bf97e55cdf0bb63242bab619729e182"},s("div",{key:"08ee599ef117480e98506e6594bb798931dade58",class:"pn-select","data-error":this.hasError()},!this.compact&&this.renderLabel(),s("div",{key:"4416853996ab6849ef128f3abd7d53861e3d6bbe",class:"pn-select-input"},this.icon&&s("pn-icon",{key:"8af79d8f23f6e7b9853130ca77d2ac00f264afe7",class:"pn-select-icon",icon:this.icon,"data-custom":!0,"aria-hidden":"true"}),this.hasError()&&s("pn-icon",{key:"ad674903cc8cefb0864b425a4f6bd6540b5164f3",class:"pn-select-icon",icon:o,color:"warning","data-error":!0,"aria-hidden":"true"}),s("select",{key:"fc84d7571dc544030770dd8ea88c87e3a1d58bc5",id:this.selectId,class:"pn-select-element",name:this.name,form:this.form,autocomplete:this.autocomplete,"aria-describedby":this.hasMessage()&&this.idHelpertext,"aria-invalid":this.hasError().toString(),disabled:this.disabled,"data-placeholder":""===this.select?.value,"data-compact":this.compact,ref:e=>this.select=e},s("slot",{key:"1cca39bd8954649b1a558876d31509c3be0f4763"})),this.compact&&this.renderLabel(),s("pn-icon",{key:"a5efd954143ce705d806a1a7a1b37b09714d1657",class:"pn-select-icon",icon:a,color:"blue700","data-default":!0,"aria-hidden":"true"})),this.hasMessage()&&s("p",{key:"54e7855163fc3c91cb2bdac99aaa7ed9bfd14fc9",id:this.idHelpertext,class:"pn-select-helper",role:this.error?"alert":null},s("span",{key:"21397e124292c51dfe3113b526626059dc9b513d"},this.error||this.helpertext))))}static get style(){return`${e("pn-select")}{display:inline-block}${e("pn-select")} .pn-select-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-select")} .pn-select-label{transition-duration:0s;transition-delay:0s}}${e("pn-select")} .pn-select-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-select")} .pn-select-label[data-compact]>span{font-size:1em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;line-height:1.5em}${e("pn-select")} .pn-select-label>span{font-size:0.875em}${e("pn-select")} .pn-select-label[data-compact][data-icon]{--pn-input-offset-left:calc(2em)}${e("pn-select")} .pn-select-input{position:relative}${e("pn-select")} .pn-select-icon{pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);width:1.5em;height:1.5em;border-radius:50%;background-color:transparent}${e("pn-select")} .pn-select-icon[data-default]{right:1em}${e("pn-select")} .pn-select-icon[data-custom]{left:0.75em}${e("pn-select")} .pn-select-icon[data-custom]~.pn-select-element{padding-left:2.75em}${e("pn-select")} .pn-select-icon[data-error]{right:3.5em}${e("pn-select")} .pn-select-icon[data-error]~.pn-select-element{padding-right:5.5em}${e("pn-select")} .pn-select-icon>.pn-icon-svg{transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-select")} .pn-select-icon>.pn-icon-svg{transition-duration:0s;transition-delay:0s}}${e("pn-select")} .pn-select-element{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;text-overflow:ellipsis;white-space:nowrap;color:#2d2013;background-color:#ffffff;border:0.0625em solid #969087;border-radius:0.5em;padding:0.75em 3em 0.75em 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-select")} .pn-select-element:-webkit-autofill,${e("pn-select")} .pn-select-element:-webkit-autofill:hover,${e("pn-select")} .pn-select-element:-webkit-autofill:focus,${e("pn-select")} .pn-select-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #e0f8ff inset;-webkit-text-fill-color:#2d2013}${e("pn-select")} .pn-select-element{outline:0.2rem solid transparent;outline-offset:0.2rem}${e("pn-select")} .pn-select-element:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}${e("pn-select")} .pn-select-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-select")} .pn-select-element{transition-duration:0s;transition-delay:0s}}${e("pn-select")} .pn-select-element[data-compact]{text-align:left;padding-top:1.125em;padding-bottom:0.375em;max-width:unset}${e("pn-select")} .pn-select-element[data-compact]::placeholder{color:transparent}${e("pn-select")} .pn-select-element[data-compact]:focus+.pn-select-label,${e("pn-select")} .pn-select-element[data-compact]:not(:placeholder-shown)+.pn-select-label{transform:translateY(-85%) scale(0.75);transition-delay:0s}${e("pn-select")} .pn-select-element::placeholder{color:#5e554a;font-weight:normal}${e("pn-select")} .pn-select-element:hover{border-color:#005d92}${e("pn-select")} .pn-select-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}${e("pn-select")} .pn-select-element:open~.pn-select-icon .pn-icon-svg{transform:rotate(180deg)}${e("pn-select")} .pn-select-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}${e("pn-select")} .pn-select-element[data-placeholder]{color:#5e554a;font-weight:normal}${e("pn-select")} .pn-select-element:hover{color:#2d2013;background-color:#effbff}${e("pn-select")} .pn-select-no-results{margin:0;padding:0.75em}${e("pn-select")} .pn-select-helper{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-select")} .pn-select-helper[role=alert]{color:#a70707}${e("pn-select")} .pn-select[data-error]>.pn-select-label{color:#a70707}${e("pn-select")} .pn-select[data-error]>.pn-select-input>.pn-select-element{border-color:#a70707}${e("pn-select")} .pn-select[data-error]>.pn-select-input>.pn-select-element:hover{border-color:#500715}${e("pn-select")} .pn-select[data-error]>.pn-select-input>.pn-select-element:focus-visible{background-color:#ffffff;border-color:#a70707;outline-color:#a70707}${e("pn-select")} .pn-select[data-error]>.pn-select-input>.pn-select-element:-webkit-autofill,${e("pn-select")} .pn-select[data-error]>.pn-select-input>.pn-select-element:-webkit-autofill:hover,${e("pn-select")} .pn-select[data-error]>.pn-select-input>.pn-select-element:-webkit-autofill:focus,${e("pn-select")} .pn-select[data-error]>.pn-select-input>.pn-select-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #fef7f6 inset;-webkit-text-fill-color:#2d2013}${e("pn-select")} .pn-select[data-error]>.pn-select-input>.pn-select-element:hover{background-color:#fdefee}`}},[772,"pn-select",{label:[1],helpertext:[1],selectId:[1,"select-id"],icon:[1],compact:[4],name:[1],form:[1],autocomplete:[1],required:[4],disabled:[4],invalid:[4],error:[1]}]);function d(){"undefined"!=typeof customElements&&["pn-select","pn-icon"].forEach((t=>{switch(t){case"pn-select":customElements.get(e(e(t)))||customElements.define(e(e(t)),p);break;case"pn-icon":customElements.get(e(e(t)))||r()}}))}export{p as P,d}

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

@@ -2,4 +2,4 @@
  * Built with Stencil
  * By PostNord.
  */
-import{transformTag as t,proxyCustomElement as e,HTMLElement as n,createEvent as i,forceUpdate as a,h as o,Host as r}from"@stencil/core/internal/client";import{o as s}from"./helpers.js";import{d as c}from"./pn-icon2.js";const l=e(class extends n{constructor(t){super(),!1!==t&&this.__registerHost(),this.setActiveTab=i(this,"setActiveTab",7),this.tabEnter=i(this,"tabEnter",7),this.tabLeave=i(this,"tabLeave",7)}mo;tag="button";get hostElement(){return this}label;value;href;icon;ariacontrols;tabid;activeTab;setActiveTab;setActiveTabHandler({click:t=!1,element:e}={}){(t||this.isActive())&&this.setActiveTab.emit({val:e?.value||this.value,el:e?.value&&e||this.hostElement})}tabEnter;triggerEnter(t){this.tabEnter.emit(t)}tabLeave;triggerLeave(t){this.tabLeave.emit(t)}connectedCallback(){this.mo=new MutationObserver((()=>a(this.hostElement))),this.mo.observe(this.hostElement,{subtree:!0,childList:!0})}disconnectedCallback(){this.mo?.disconnect()}componentWillLoad(){this.tabTag()}componentDidUpdate(){this.setActiveTabHandler()}componentDidLoad(){this.setActiveTabHandler()}arrowKeyNav(e){if(!/^(ArrowRight|ArrowLeft|Home|End)$/.test(e.key))return;e.preventDefault();const n=e.target.closest(""+t("pn-tablist")),i=Array.from(n.querySelectorAll(""+t("pn-tab"))),a=i[0],o=i[i.length-1],r=this.hostElement.nextElementSibling,s=this.hostElement.previousElementSibling;"Home"===e.key&&this.setActiveTabHandler({element:a}),"End"===e.key&&this.setActiveTabHandler({element:o}),"ArrowRight"===e.key&&this.setActiveTabHandler({element:r?.value?r:a}),"ArrowLeft"===e.key&&this.setActiveTabHandler({element:s?.value?s:o})}isActive(){return this.activeTab===this.value}tabTag(){const e=this.hostElement.closest(""+t("pn-tablist"));this.tag="menu"===e.slot?"a":"button"}renderProperties(){return"a"===this.tag?{href:this.href,"aria-current":this.isActive()?"page":"false"}:{tabindex:this.isActive()?0:-1,type:"button",role:"tab","aria-selected":""+this.isActive(),"aria-controls":this.ariacontrols}}iconColor(){return this.isActive()?"blue700":"gray900"}handleClick(t){this.setActiveTabHandler({click:!0}),s(t,this.hostElement,".pn-tab")}render(){return o(r,{key:"6018f7f4ba6a860a4f8e176b115a586d1968aa14"},o(this.tag,{key:"484708ad0b9007f3183d42000ccf18b34693fe7a",id:this.tabid,class:"pn-tab",...this.renderProperties(),onClick:t=>this.handleClick(t),onMouseEnter:t=>this.triggerEnter(t),onFocus:t=>this.triggerEnter(t),onMouseLeave:t=>this.triggerLeave(t),onBlur:t=>this.triggerLeave(t),onKeyDown:t=>this.arrowKeyNav(t)},!!this.icon&&o("pn-icon",{key:"d40438f0c464d2549faa141edb9ff9768eacc502",icon:this.icon,color:this.iconColor()}),o("slot",{key:"998d73d40785109b36dbcb515addf5bd2f4505b3"}),o("span",{key:"f2a01837ccf6dd0f28c63741361f05e3d875dae4",class:"pn-tab-label"},this.label)))}static get style(){return`${t("pn-tab")}{position:relative;overflow:hidden;flex-shrink:0;scroll-snap-align:center;display:inline-block;border-radius:0.5em}${t("pn-tab")} .pn-tab{position:relative;cursor:pointer;margin:1em 0.25em;padding:0 0.25em;border:none;border-radius:0.5em;color:#2d2013;background-color:transparent;font-family:inherit;font-size:1em;font-weight:500;text-decoration:none;display:flex;gap:0.5em;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}${t("pn-tab")} .pn-tab .pn-ripple{animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);position:absolute;border-radius:50%;background-color:#005d92;transform:translate(-50%, -50%) scale(0);opacity:0.1;pointer-events:none;z-index:3}@keyframes ripple{to{transform:translate(-50%, -50%) scale(1);opacity:0}}${t("pn-tab")} .pn-tab{transition-property:color, outline-color, background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${t("pn-tab")} .pn-tab{transition-duration:0s;transition-delay:0s}}${t("pn-tab")} .pn-tab{outline:0.2rem solid transparent;outline-offset:0.2rem}${t("pn-tab")} .pn-tab-label{line-height:1.5em}${t("pn-tab")} .pn-tab:focus-visible{overflow:hidden;outline-color:#005d92;background-color:#ffffff}${t("pn-tab")} .pn-tab[aria-selected=true],${t("pn-tab")} .pn-tab[aria-current=page]{color:#005d92}${t("pn-tab")} .pn-tab[aria-selected=true]:focus,${t("pn-tab")} .pn-tab[aria-current=page]:focus{color:#0d234b}${t("pn-tab")} .pn-tab[aria-selected=true]:focus ${t("pn-icon")}>.pn-icon-svg path,${t("pn-tab")} .pn-tab[aria-selected=true]:focus ${t("pn-icon")}>.pn-icon-svg polygon,${t("pn-tab")} .pn-tab[aria-current=page]:focus ${t("pn-icon")}>.pn-icon-svg path,${t("pn-tab")} .pn-tab[aria-current=page]:focus ${t("pn-icon")}>.pn-icon-svg polygon{fill:#0d234b}`}},[772,"pn-tab",{label:[1],value:[1],href:[1],icon:[1],ariacontrols:[1],tabid:[1],activeTab:[1,"active-tab"]}]),p=l,b=function(){"undefined"!=typeof customElements&&["pn-tab","pn-icon"].forEach((e=>{switch(e){case"pn-tab":customElements.get(t(t(e)))||customElements.define(t(t(e)),l);break;case"pn-icon":customElements.get(t(t(e)))||c()}}))};export{p as PnTab,b as defineCustomElement}
+import{transformTag as t,proxyCustomElement as e,HTMLElement as n,createEvent as i,forceUpdate as a,h as o,Host as r}from"@stencil/core/internal/client";import{o as s}from"./helpers.js";import{d as c}from"./pn-icon2.js";const l=e(class extends n{constructor(t){super(),!1!==t&&this.__registerHost(),this.setActiveTab=i(this,"setActiveTab",7),this.tabEnter=i(this,"tabEnter",7),this.tabLeave=i(this,"tabLeave",7)}mo;tag="button";get hostElement(){return this}label;value;href;icon;ariacontrols;tabid;activeTab;setActiveTab;setActiveTabHandler({click:t=!1,element:e}={}){(t||this.isActive())&&this.setActiveTab.emit({val:e?.value||this.value,el:e?.value&&e||this.hostElement})}tabEnter;triggerEnter(t){this.tabEnter.emit(t)}tabLeave;triggerLeave(t){this.tabLeave.emit(t)}connectedCallback(){this.mo=new MutationObserver((()=>a(this.hostElement))),this.mo.observe(this.hostElement,{subtree:!0,childList:!0})}disconnectedCallback(){this.mo?.disconnect()}componentWillLoad(){this.tabTag()}componentDidUpdate(){this.setActiveTabHandler()}componentDidLoad(){this.setActiveTabHandler()}arrowKeyNav(e){if(!/^(ArrowRight|ArrowLeft|Home|End)$/.test(e.key))return;e.preventDefault();const n=e.target.closest(""+t("pn-tablist")),i=Array.from(n.querySelectorAll(""+t("pn-tab"))),a=i[0],o=i[i.length-1],r=this.hostElement.nextElementSibling,s=this.hostElement.previousElementSibling;"Home"===e.key&&this.setActiveTabHandler({element:a}),"End"===e.key&&this.setActiveTabHandler({element:o}),"ArrowRight"===e.key&&this.setActiveTabHandler({element:r?.value?r:a}),"ArrowLeft"===e.key&&this.setActiveTabHandler({element:s?.value?s:o})}isActive(){return this.activeTab===this.value}tabTag(){const e=this.hostElement.closest(""+t("pn-tablist"));this.tag="menu"===e.slot?"a":"button"}renderProperties(){return"a"===this.tag?{href:this.href,"aria-current":this.isActive()?"page":"false"}:{tabindex:this.isActive()?0:-1,type:"button",role:"tab","aria-selected":""+this.isActive(),"aria-controls":this.ariacontrols}}iconColor(){return this.isActive()?"blue700":"gray900"}handleClick(t){this.setActiveTabHandler({click:!0}),s(t,this.hostElement,".pn-tab")}render(){return o(r,{key:"a3d1810848574a33819d13fa281d85eb08f1ce80"},o(this.tag,{key:"08548598375643778185f9ea3900b6b16e079c23",id:this.tabid,class:"pn-tab",...this.renderProperties(),onClick:t=>this.handleClick(t),onMouseEnter:t=>this.triggerEnter(t),onFocus:t=>this.triggerEnter(t),onMouseLeave:t=>this.triggerLeave(t),onBlur:t=>this.triggerLeave(t),onKeyDown:t=>this.arrowKeyNav(t)},!!this.icon&&o("pn-icon",{key:"ed1076eaf2ea4fc6f56ae86e2947b656808d1c02",icon:this.icon,color:this.iconColor()}),o("slot",{key:"48a7a902e8e2712b0595ac88f3b906149703f92c"}),o("span",{key:"cde1646f13a5fe4f553dcfa919268f62286d3f5c",class:"pn-tab-label"},this.label)))}static get style(){return`${t("pn-tab")}{position:relative;overflow:hidden;flex-shrink:0;scroll-snap-align:center;display:inline-block;border-radius:0.5em}${t("pn-tab")} .pn-tab{position:relative;cursor:pointer;margin:1em 0.25em;padding:0 0.25em;border:none;border-radius:0.5em;color:#2d2013;background-color:transparent;font-family:inherit;font-size:1em;font-weight:500;text-decoration:none;display:flex;gap:0.5em;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}${t("pn-tab")} .pn-tab .pn-ripple{animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);position:absolute;border-radius:50%;background-color:#005d92;transform:translate(-50%, -50%) scale(0);opacity:0.1;pointer-events:none;z-index:3}@keyframes ripple{to{transform:translate(-50%, -50%) scale(1);opacity:0}}${t("pn-tab")} .pn-tab{transition-property:color, outline-color, background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${t("pn-tab")} .pn-tab{transition-duration:0s;transition-delay:0s}}${t("pn-tab")} .pn-tab{outline:0.2rem solid transparent;outline-offset:0.2rem}${t("pn-tab")} .pn-tab-label{line-height:1.5em}${t("pn-tab")} .pn-tab:focus-visible{overflow:hidden;outline-color:#005d92;background-color:#ffffff}${t("pn-tab")} .pn-tab[aria-selected=true],${t("pn-tab")} .pn-tab[aria-current=page]{color:#005d92}${t("pn-tab")} .pn-tab[aria-selected=true]:focus,${t("pn-tab")} .pn-tab[aria-current=page]:focus{color:#0d234b}${t("pn-tab")} .pn-tab[aria-selected=true]:focus ${t("pn-icon")}>.pn-icon-svg path,${t("pn-tab")} .pn-tab[aria-selected=true]:focus ${t("pn-icon")}>.pn-icon-svg polygon,${t("pn-tab")} .pn-tab[aria-current=page]:focus ${t("pn-icon")}>.pn-icon-svg path,${t("pn-tab")} .pn-tab[aria-current=page]:focus ${t("pn-icon")}>.pn-icon-svg polygon{fill:#0d234b}`}},[772,"pn-tab",{label:[1],value:[1],href:[1],icon:[1],ariacontrols:[1],tabid:[1],activeTab:[1,"active-tab"]}]),p=l,b=function(){"undefined"!=typeof customElements&&["pn-tab","pn-icon"].forEach((e=>{switch(e){case"pn-tab":customElements.get(t(t(e)))||customElements.define(t(t(e)),l);break;case"pn-icon":customElements.get(t(t(e)))||c()}}))};export{p as PnTab,b as defineCustomElement}

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

@@ -2,4 +2,4 @@
  * Built with Stencil
  * By PostNord.
  */
-import{transformTag as t,proxyCustomElement as i,HTMLElement as a,createEvent as e,forceUpdate as s,h as n,Host as l}from"@stencil/core/internal/client";import{a as r,c as o}from"./chevron_right.js";import{k as c,e as p}from"./helpers.js";import{d as b}from"./pn-button2.js";import{d}from"./pn-icon2.js";import{d as h}from"./pn-spinner2.js";var m={LEFT:{sv:"Bläddra åt vänster",en:"Scroll to the left",da:"Rul til venstre",fi:"Vieritä vasemmalle",no:"Rull til venstre"},RIGHT:{sv:"Bläddra åt höger",en:"Scroll to the right",da:"Rul til højre",fi:"Vieritä oikealle",no:"Rull til høyre"}};const u=i(class extends a{constructor(t){super(),!1!==t&&this.__registerHost(),this.tabchange=e(this,"tabchange",7)}mo;isMenu=!1;isTabHovered=!1;tabListEl;lineActive;lineHovered;tabElement;get hostElement(){return this}showScrollArrows=!1;arrowLeft=!1;arrowRight=!1;label;value;small;stackedicons=!1;language=null;tabchange;setValue(){Array.from(this.hostElement.querySelectorAll(""+t("pn-tab"))).forEach((t=>{t.activeTab=this.value}))}scrollHandler(){this.showScrollArrows?this.tabListEl.addEventListener("scroll",this.scrollIndicators.bind(this)):this.tabListEl.removeEventListener("scroll",this.scrollIndicators)}setActiveTabHandler({detail:t}){this.tabElement=t.el,requestAnimationFrame((()=>this.activateTab(t.el))),this.value!==t.val&&(this.value=t.val,this.tabchange.emit(this.value),this.tabElement.querySelector(".pn-tab").focus())}rerender(){requestAnimationFrame((()=>{this.scrollIndicators(),this.isTabHovered=!1}))}handleEnter(t){this.isTabHovered=!0,this.styleLines(t.target)}handleLeave(){this.isTabHovered=!1,setTimeout((()=>{this.isTabHovered||this.lineHovered.style.setProperty("--pn-hover-opacity","0")}),500)}connectedCallback(){this.mo=new MutationObserver((()=>{s(this.hostElement),this.setValue(),this.rerender()})),this.mo.observe(this.hostElement,{subtree:!0,childList:!0})}disconnectedCallback(){this.mo?.disconnect()}async componentWillLoad(){this.isMenu="menu"===this.hostElement.slot,null===this.language&&await c(this.hostElement)}componentDidRender(){this.setValue(),this.rerender()}getRect(t){return t.getBoundingClientRect()}activateTab(t){this.styleLines(t,!0),this.styleLines(t,!1)}styleLines(t,i=!1){const a=this.getRect(this.tabListEl),e=this.tabListEl.scrollLeft,s=this.getRect(t),n=s.left+e-a.left,l=i?"active":"hover",r=i?"lineActive":"lineHovered";this[r].style.setProperty(`--pn-${l}-width`,s.width+"px"),this[r].style.setProperty(`--pn-${l}-offset`,n+"px"),this[r].style.setProperty(`--pn-${l}-opacity`,"1")}scrollIndicators(){const{scrollWidth:t,scrollLeft:i}=this.tabListEl,{clientWidth:a}=this.hostElement;this.showScrollArrows=t>a,this.arrowLeft=this.showScrollArrows&&i>0,this.arrowRight=this.showScrollArrows&&a+16+i<t}scroll({right:t=!1}={}){const i=this.tabListEl,{scrollLeft:a,clientWidth:e}=i;let s=a;const n=e-64;t?s+=n:s-=n,i.scrollTo({left:s,behavior:"smooth"})}translate(t){return m?.[t]?.[this.language||p]}render(){return n(l,{key:"bc119de172511f2da49a2df192fb06d6f7b7171a"},n("nav",{key:"880447004ce6e8f7237ef0ae755c2cad527a052e",class:"pn-tablist",role:this.isMenu?null:"tablist","aria-label":this.label,"data-stacked":this.stackedicons,"data-small":!this.isMenu&&this.small,"data-large":this.isMenu,"data-scroll":this.showScrollArrows,ref:t=>this.tabListEl=t},n("slot",{key:"be53ccbed2437e17a334417e58fb1a2f1bf003ab"}),n("div",{key:"75733634baf8b061f49d6bd9a6822f18b7121d35",class:"pn-tablist-line"},n("div",{key:"0fa638a667340a7874244b20610e4bf0749009b2",ref:t=>this.lineActive=t,class:"pn-tablist-line-item pn-tablist-line-active"}),n("div",{key:"7b3f29534401e92073c3cc0188b4596607cab0f6",ref:t=>this.lineHovered=t,class:"pn-tablist-line-item pn-tablist-line-hovered"}))),n("div",{key:"616ef6611240501413db88b85930811566bdc25d",class:"pn-tablist-scroll"},n("pn-button",{key:"f1ca64f112d82684ae81836747f4e77c9064cced",class:"pn-tablist-arrow","data-show":this.arrowLeft,onClick:()=>this.scroll(),noTab:!0,appearance:"light",variant:"outlined",icon:r,iconOnly:!0,arialabel:this.translate("LEFT"),small:!0}),n("pn-button",{key:"92312e5c7dac9cd7bf5d516d7d1088f5db6a557d",class:"pn-tablist-arrow","data-show":this.arrowRight,onClick:()=>this.scroll({right:!0}),noTab:!0,appearance:"light",variant:"outlined",icon:o,iconOnly:!0,arialabel:this.translate("RIGHT"),small:!0})))}static get watchers(){return{value:[{setValue:0}],showScrollArrows:[{scrollHandler:0}]}}static get style(){return`${t("pn-tablist")}{width:100%;min-width:0;position:relative;border-bottom:0.0625em solid #d3cecb;display:block}${t("pn-tablist")} .pn-tablist,${t("pn-tablist")} ol,${t("pn-tablist")} ul{display:flex;width:100%;flex-direction:row;gap:1em;position:relative;list-style:none;padding:0;margin:0}${t("pn-tablist")} .pn-tablist[data-stacked] .pn-tab,${t("pn-tablist")} ol[data-stacked] .pn-tab,${t("pn-tablist")} ul[data-stacked] .pn-tab{margin:0.5em 0.25em 0.75em;gap:0.25em;flex-direction:column}${t("pn-tablist")} .pn-tablist[data-small] .pn-tab,${t("pn-tablist")} ol[data-small] .pn-tab,${t("pn-tablist")} ul[data-small] .pn-tab{margin:0.25em 0.25em 0.75em}${t("pn-tablist")} .pn-tablist[data-small] .pn-tab>*:not(${t("pn-icon")}),${t("pn-tablist")} ol[data-small] .pn-tab>*:not(${t("pn-icon")}),${t("pn-tablist")} ul[data-small] .pn-tab>*:not(${t("pn-icon")}){font-size:0.875em}${t("pn-tablist")} .pn-tablist[data-large] .pn-tab>*:not(${t("pn-icon")}),${t("pn-tablist")} ol[data-large] .pn-tab>*:not(${t("pn-icon")}),${t("pn-tablist")} ul[data-large] .pn-tab>*:not(${t("pn-icon")}){font-size:1.25em}${t("pn-tablist")} .pn-tablist[data-scroll],${t("pn-tablist")} ol[data-scroll],${t("pn-tablist")} ul[data-scroll]{overflow-y:hidden;overflow-x:auto;scroll-snap-type:x mandatory}${t("pn-tablist")} .pn-tablist::-webkit-scrollbar,${t("pn-tablist")} ol::-webkit-scrollbar,${t("pn-tablist")} ul::-webkit-scrollbar{display:none}${t("pn-tablist")} .pn-tablist-line{height:0.25em;position:absolute;bottom:0}${t("pn-tablist")} .pn-tablist-line-item{position:absolute;width:100%;height:inherit;border-radius:0.25em 0.25em 0 0;transform-origin:left center;opacity:0;transition-property:transform, opacity, width;transition-duration:0.4s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${t("pn-tablist")} .pn-tablist-line-item{transition-duration:0s;transition-delay:0s}}${t("pn-tablist")} .pn-tablist-line-active{z-index:1;background-color:#005d92;width:var(--pn-active-width);transform:translateX(var(--pn-active-offset));opacity:var(--pn-active-opacity)}${t("pn-tablist")} .pn-tablist-line-hovered{background-color:#00a0d6;width:var(--pn-hover-width);transform:translateX(var(--pn-hover-offset));opacity:var(--pn-hover-opacity)}${t("pn-tablist")} .pn-tablist-scroll{position:absolute;top:50%;left:0;right:0;pointer-events:none;transform:translateY(-50%);display:flex;justify-content:space-between;align-items:center;z-index:1;height:100%}${t("pn-tablist")} .pn-tablist-arrow{pointer-events:all;transform:scaleY(0);opacity:0;visibility:hidden;transition-property:transform, opacity, visibility;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${t("pn-tablist")} .pn-tablist-arrow{transition-duration:0s;transition-delay:0s}}${t("pn-tablist")} .pn-tablist-arrow[data-show]{opacity:1;visibility:visible;transform:scaleY(1)}`}},[772,"pn-tablist",{label:[1],value:[1537],small:[4],stackedicons:[4],language:[1],showScrollArrows:[32],arrowLeft:[32],arrowRight:[32]},[[0,"setActiveTab","setActiveTabHandler"],[9,"resize","rerender"],[0,"tabEnter","handleEnter"],[0,"tabLeave","handleLeave"]],{value:[{setValue:0}],showScrollArrows:[{scrollHandler:0}]}]),f=u,v=function(){"undefined"!=typeof customElements&&["pn-tablist","pn-button","pn-icon","pn-spinner"].forEach((i=>{switch(i){case"pn-tablist":customElements.get(t(t(i)))||customElements.define(t(t(i)),u);break;case"pn-button":customElements.get(t(t(i)))||b();break;case"pn-icon":customElements.get(t(t(i)))||d();break;case"pn-spinner":customElements.get(t(t(i)))||h()}}))};export{f as PnTablist,v as defineCustomElement}
+import{transformTag as t,proxyCustomElement as i,HTMLElement as a,createEvent as e,forceUpdate as s,h as n,Host as l}from"@stencil/core/internal/client";import{a as r,c as o}from"./chevron_right.js";import{k as c,e as p}from"./helpers.js";import{d as b}from"./pn-button2.js";import{d}from"./pn-icon2.js";import{d as h}from"./pn-spinner2.js";var m={LEFT:{sv:"Bläddra åt vänster",en:"Scroll to the left",da:"Rul til venstre",fi:"Vieritä vasemmalle",no:"Rull til venstre"},RIGHT:{sv:"Bläddra åt höger",en:"Scroll to the right",da:"Rul til højre",fi:"Vieritä oikealle",no:"Rull til høyre"}};const u=i(class extends a{constructor(t){super(),!1!==t&&this.__registerHost(),this.tabchange=e(this,"tabchange",7)}mo;isMenu=!1;isTabHovered=!1;tabListEl;lineActive;lineHovered;tabElement;get hostElement(){return this}showScrollArrows=!1;arrowLeft=!1;arrowRight=!1;label;value;small;stackedicons=!1;language=null;tabchange;setValue(){Array.from(this.hostElement.querySelectorAll(""+t("pn-tab"))).forEach((t=>{t.activeTab=this.value}))}scrollHandler(){this.showScrollArrows?this.tabListEl.addEventListener("scroll",this.scrollIndicators.bind(this)):this.tabListEl.removeEventListener("scroll",this.scrollIndicators)}setActiveTabHandler({detail:t}){this.tabElement=t.el,requestAnimationFrame((()=>this.activateTab(t.el))),this.value!==t.val&&(this.value=t.val,this.tabchange.emit(this.value),this.tabElement.querySelector(".pn-tab").focus())}rerender(){requestAnimationFrame((()=>{this.scrollIndicators(),this.isTabHovered=!1}))}handleEnter(t){this.isTabHovered=!0,this.styleLines(t.target)}handleLeave(){this.isTabHovered=!1,setTimeout((()=>{this.isTabHovered||this.lineHovered.style.setProperty("--pn-hover-opacity","0")}),500)}connectedCallback(){this.mo=new MutationObserver((()=>{s(this.hostElement),this.setValue(),this.rerender()})),this.mo.observe(this.hostElement,{subtree:!0,childList:!0})}disconnectedCallback(){this.mo?.disconnect()}async componentWillLoad(){this.isMenu="menu"===this.hostElement.slot,null===this.language&&await c(this.hostElement)}componentDidRender(){this.setValue(),this.rerender()}getRect(t){return t.getBoundingClientRect()}activateTab(t){this.styleLines(t,!0),this.styleLines(t,!1)}styleLines(t,i=!1){const a=this.getRect(this.tabListEl),e=this.tabListEl.scrollLeft,s=this.getRect(t),n=s.left+e-a.left,l=i?"active":"hover",r=i?"lineActive":"lineHovered";this[r].style.setProperty(`--pn-${l}-width`,s.width+"px"),this[r].style.setProperty(`--pn-${l}-offset`,n+"px"),this[r].style.setProperty(`--pn-${l}-opacity`,"1")}scrollIndicators(){const{scrollWidth:t,scrollLeft:i}=this.tabListEl,{clientWidth:a}=this.hostElement;this.showScrollArrows=t>a,this.arrowLeft=this.showScrollArrows&&i>0,this.arrowRight=this.showScrollArrows&&a+16+i<t}scroll({right:t=!1}={}){const i=this.tabListEl,{scrollLeft:a,clientWidth:e}=i;let s=a;const n=e-64;t?s+=n:s-=n,i.scrollTo({left:s,behavior:"smooth"})}translate(t){return m?.[t]?.[this.language||p]}render(){return n(l,{key:"41730f7c2c9bf8dcd0094e3485daaef03d32077d"},n("nav",{key:"671968d8fc09799313c5cc84182c0f574c4c32c2",class:"pn-tablist",role:this.isMenu?null:"tablist","aria-label":this.label,"data-stacked":this.stackedicons,"data-small":!this.isMenu&&this.small,"data-large":this.isMenu,"data-scroll":this.showScrollArrows,ref:t=>this.tabListEl=t},n("slot",{key:"9a29c7b0b2be65f13f0c54782f95381b44184928"}),n("div",{key:"5c7d7811e65c236592cbc86ccb36a1f4b9c2d83f",class:"pn-tablist-line"},n("div",{key:"fa070fd0ad1bd2baaaaedcd83d3a184f9acd8775",ref:t=>this.lineActive=t,class:"pn-tablist-line-item pn-tablist-line-active"}),n("div",{key:"f1d81e3ba4363412d5f35cae105766fbb77ba31e",ref:t=>this.lineHovered=t,class:"pn-tablist-line-item pn-tablist-line-hovered"}))),n("div",{key:"14d644cb2ae344966b8056422ce52966fb06058b",class:"pn-tablist-scroll"},n("pn-button",{key:"f8c8f0f36459b6415208679196ed15fb9cd482d2",class:"pn-tablist-arrow","data-show":this.arrowLeft,onClick:()=>this.scroll(),noTab:!0,appearance:"light",variant:"outlined",icon:r,iconOnly:!0,arialabel:this.translate("LEFT"),small:!0}),n("pn-button",{key:"588b9a9619087bd05a9d359b139240d054431848",class:"pn-tablist-arrow","data-show":this.arrowRight,onClick:()=>this.scroll({right:!0}),noTab:!0,appearance:"light",variant:"outlined",icon:o,iconOnly:!0,arialabel:this.translate("RIGHT"),small:!0})))}static get watchers(){return{value:[{setValue:0}],showScrollArrows:[{scrollHandler:0}]}}static get style(){return`${t("pn-tablist")}{width:100%;min-width:0;position:relative;border-bottom:0.0625em solid #d3cecb;display:block}${t("pn-tablist")} .pn-tablist,${t("pn-tablist")} ol,${t("pn-tablist")} ul{display:flex;width:100%;flex-direction:row;gap:1em;position:relative;list-style:none;padding:0;margin:0}${t("pn-tablist")} .pn-tablist[data-stacked] .pn-tab,${t("pn-tablist")} ol[data-stacked] .pn-tab,${t("pn-tablist")} ul[data-stacked] .pn-tab{margin:0.5em 0.25em 0.75em;gap:0.25em;flex-direction:column}${t("pn-tablist")} .pn-tablist[data-small] .pn-tab,${t("pn-tablist")} ol[data-small] .pn-tab,${t("pn-tablist")} ul[data-small] .pn-tab{margin:0.25em 0.25em 0.75em}${t("pn-tablist")} .pn-tablist[data-small] .pn-tab>*:not(${t("pn-icon")}),${t("pn-tablist")} ol[data-small] .pn-tab>*:not(${t("pn-icon")}),${t("pn-tablist")} ul[data-small] .pn-tab>*:not(${t("pn-icon")}){font-size:0.875em}${t("pn-tablist")} .pn-tablist[data-large] .pn-tab>*:not(${t("pn-icon")}),${t("pn-tablist")} ol[data-large] .pn-tab>*:not(${t("pn-icon")}),${t("pn-tablist")} ul[data-large] .pn-tab>*:not(${t("pn-icon")}){font-size:1.25em}${t("pn-tablist")} .pn-tablist[data-scroll],${t("pn-tablist")} ol[data-scroll],${t("pn-tablist")} ul[data-scroll]{overflow-y:hidden;overflow-x:auto;scroll-snap-type:x mandatory}${t("pn-tablist")} .pn-tablist::-webkit-scrollbar,${t("pn-tablist")} ol::-webkit-scrollbar,${t("pn-tablist")} ul::-webkit-scrollbar{display:none}${t("pn-tablist")} .pn-tablist-line{height:0.25em;position:absolute;bottom:0}${t("pn-tablist")} .pn-tablist-line-item{position:absolute;width:100%;height:inherit;border-radius:0.25em 0.25em 0 0;transform-origin:left center;opacity:0;transition-property:transform, opacity, width;transition-duration:0.4s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${t("pn-tablist")} .pn-tablist-line-item{transition-duration:0s;transition-delay:0s}}${t("pn-tablist")} .pn-tablist-line-active{z-index:1;background-color:#005d92;width:var(--pn-active-width);transform:translateX(var(--pn-active-offset));opacity:var(--pn-active-opacity)}${t("pn-tablist")} .pn-tablist-line-hovered{background-color:#00a0d6;width:var(--pn-hover-width);transform:translateX(var(--pn-hover-offset));opacity:var(--pn-hover-opacity)}${t("pn-tablist")} .pn-tablist-scroll{position:absolute;top:50%;left:0;right:0;pointer-events:none;transform:translateY(-50%);display:flex;justify-content:space-between;align-items:center;z-index:1;height:100%}${t("pn-tablist")} .pn-tablist-arrow{pointer-events:all;transform:scaleY(0);opacity:0;visibility:hidden;transition-property:transform, opacity, visibility;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${t("pn-tablist")} .pn-tablist-arrow{transition-duration:0s;transition-delay:0s}}${t("pn-tablist")} .pn-tablist-arrow[data-show]{opacity:1;visibility:visible;transform:scaleY(1)}`}},[772,"pn-tablist",{label:[1],value:[1537],small:[4],stackedicons:[4],language:[1],showScrollArrows:[32],arrowLeft:[32],arrowRight:[32]},[[0,"setActiveTab","setActiveTabHandler"],[9,"resize","rerender"],[0,"tabEnter","handleEnter"],[0,"tabLeave","handleLeave"]],{value:[{setValue:0}],showScrollArrows:[{scrollHandler:0}]}]),f=u,v=function(){"undefined"!=typeof customElements&&["pn-tablist","pn-button","pn-icon","pn-spinner"].forEach((i=>{switch(i){case"pn-tablist":customElements.get(t(t(i)))||customElements.define(t(t(i)),u);break;case"pn-button":customElements.get(t(t(i)))||b();break;case"pn-icon":customElements.get(t(t(i)))||d();break;case"pn-spinner":customElements.get(t(t(i)))||h()}}))};export{f as PnTablist,v as defineCustomElement}

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

@@ -2,4 +2,4 @@
  * Built with Stencil
  * By PostNord.
  */
-import{transformTag as t,proxyCustomElement as n,HTMLElement as e,h as i}from"@stencil/core/internal/client";import{d as o}from"./pn-icon2.js";const l=n(class extends e{constructor(t){super(),!1!==t&&this.__registerHost()}get hostElement(){return this}label;href;light=!1;icon;leftIcon=!1;download;hreflang;media;referrerpolicy;rel="noopener noreferrer";target;linkid;render(){return i("a",{key:"45ffa4f385410150ee09a1fa407a5175ed4d2eda",id:this.linkid,class:"pn-text-link",href:this.href,rel:this.rel,target:this.target,download:this.download,hreflang:this.hreflang,media:this.media,referrerPolicy:this.referrerpolicy,"data-icon":!!this.icon,"data-icon-left":this.leftIcon,"data-light":this.light},this.label,i("slot",{key:"da5845a86101c644bd7c4d2c33fe797def182b4d"}),this.icon&&i("pn-icon",{key:"ae094ce720af851254a5a40d5c370b128525bc49",icon:this.icon}))}static get style(){return`${t("pn-text-link")}{display:inline}${t("pn-text-link")} .pn-text-link{border-radius:0.25em;color:#005d92;font-weight:500;text-decoration:underline;font-size:1em;transition-property:color, outline-color, text-decoration-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${t("pn-text-link")} .pn-text-link{transition-duration:0s;transition-delay:0s}}${t("pn-text-link")} .pn-text-link{outline:0.2rem solid transparent;outline-offset:0.2rem}${t("pn-text-link")} .pn-text-link:focus-visible{outline-color:#005d92}${t("pn-text-link")} .pn-text-link:hover{color:#0d234b;text-decoration-color:#0d234b}${t("pn-text-link")} .pn-text-link[data-icon]{display:inline-flex;gap:0.25em;align-items:center;text-decoration-color:transparent;padding:0.1em;border-radius:0.5em}${t("pn-text-link")} .pn-text-link[data-icon] .pn-icon-svg path{fill:#005d92}${t("pn-text-link")} .pn-text-link[data-icon]:hover{text-decoration-color:#0d234b}${t("pn-text-link")} .pn-text-link[data-icon]:hover .pn-icon-svg path,${t("pn-text-link")} .pn-text-link[data-icon]:focus-visible .pn-icon-svg path{fill:#0d234b}${t("pn-text-link")} .pn-text-link[data-icon][data-icon-left]{flex-direction:row-reverse}${t("pn-text-link")} .pn-text-link[data-light]{color:#ffffff}${t("pn-text-link")} .pn-text-link[data-light]:focus-visible{outline-color:#ffffff}${t("pn-text-link")} .pn-text-link[data-light]:hover{text-decoration-color:#ffffff}${t("pn-text-link")} .pn-text-link[data-light][data-icon] ${t("pn-icon")} .pn-icon-svg path{fill:#ffffff}`}},[772,"pn-text-link",{label:[1],href:[1],light:[4],icon:[1],leftIcon:[4,"left-icon"],download:[1],hreflang:[1],media:[1],referrerpolicy:[1],rel:[1],target:[1],linkid:[1]}]);function r(){"undefined"!=typeof customElements&&["pn-text-link","pn-icon"].forEach((n=>{switch(n){case"pn-text-link":customElements.get(t(t(n)))||customElements.define(t(t(n)),l);break;case"pn-icon":customElements.get(t(t(n)))||o()}}))}export{l as P,r as d}
+import{transformTag as t,proxyCustomElement as n,HTMLElement as e,h as i}from"@stencil/core/internal/client";import{d as o}from"./pn-icon2.js";const l=n(class extends e{constructor(t){super(),!1!==t&&this.__registerHost()}get hostElement(){return this}label;href;light=!1;icon;leftIcon=!1;download;hreflang;media;referrerpolicy;rel="noopener noreferrer";target;linkid;render(){return i("a",{key:"9b582d89de39e3465ec6a1675f60f46d39b3c558",id:this.linkid,class:"pn-text-link",href:this.href,rel:this.rel,target:this.target,download:this.download,hreflang:this.hreflang,media:this.media,referrerPolicy:this.referrerpolicy,"data-icon":!!this.icon,"data-icon-left":this.leftIcon,"data-light":this.light},this.label,i("slot",{key:"106155241d1f15bdaf19a74c8dc440372849a6f4"}),this.icon&&i("pn-icon",{key:"d6d197a8632a13b6a1e385504b6727cfb9c418fd",icon:this.icon}))}static get style(){return`${t("pn-text-link")}{display:inline}${t("pn-text-link")} .pn-text-link{border-radius:0.25em;color:#005d92;font-weight:500;text-decoration:underline;font-size:1em;transition-property:color, outline-color, text-decoration-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${t("pn-text-link")} .pn-text-link{transition-duration:0s;transition-delay:0s}}${t("pn-text-link")} .pn-text-link{outline:0.2rem solid transparent;outline-offset:0.2rem}${t("pn-text-link")} .pn-text-link:focus-visible{outline-color:#005d92}${t("pn-text-link")} .pn-text-link:hover{color:#0d234b;text-decoration-color:#0d234b}${t("pn-text-link")} .pn-text-link[data-icon]{display:inline-flex;gap:0.25em;align-items:center;text-decoration-color:transparent;padding:0.1em;border-radius:0.5em}${t("pn-text-link")} .pn-text-link[data-icon] .pn-icon-svg path{fill:#005d92}${t("pn-text-link")} .pn-text-link[data-icon]:hover{text-decoration-color:#0d234b}${t("pn-text-link")} .pn-text-link[data-icon]:hover .pn-icon-svg path,${t("pn-text-link")} .pn-text-link[data-icon]:focus-visible .pn-icon-svg path{fill:#0d234b}${t("pn-text-link")} .pn-text-link[data-icon][data-icon-left]{flex-direction:row-reverse}${t("pn-text-link")} .pn-text-link[data-light]{color:#ffffff}${t("pn-text-link")} .pn-text-link[data-light]:focus-visible{outline-color:#ffffff}${t("pn-text-link")} .pn-text-link[data-light]:hover{text-decoration-color:#ffffff}${t("pn-text-link")} .pn-text-link[data-light][data-icon] ${t("pn-icon")} .pn-icon-svg path{fill:#ffffff}`}},[772,"pn-text-link",{label:[1],href:[1],light:[4],icon:[1],leftIcon:[4,"left-icon"],download:[1],hreflang:[1],media:[1],referrerpolicy:[1],rel:[1],target:[1],linkid:[1]}]);function r(){"undefined"!=typeof customElements&&["pn-text-link","pn-icon"].forEach((n=>{switch(n){case"pn-text-link":customElements.get(t(t(n)))||customElements.define(t(t(n)),l);break;case"pn-icon":customElements.get(t(t(n)))||o()}}))}export{l as P,r as d}

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

@@ -2,4 +2,4 @@
  * Built with Stencil
  * By PostNord.
  */
-import{transformTag as e,proxyCustomElement as t,HTMLElement as a,h as r,Host as n}from"@stencil/core/internal/client";import{u as o}from"./helpers.js";const i=t(class extends a{constructor(e){super(),!1!==e&&this.__registerHost()}id="pn-textarea-"+o();idHelper=this.id+"-text";get hostElement(){return this}content;label;value="";helpertext;textareaid=this.id;name;form;rows=2;cols=20;wrap="soft";maxlength;autocomplete="off";spellcheck=!1;placeholder;resize=!1;required=!1;valid=!1;invalid=!1;error;disabled=!1;readonly=!1;componentWillLoad(){this.textareaid!==this.id&&(this.idHelper=this.textareaid+"-helper")}setVal(e){this.value=e.target.value}hasError(){return this.invalid||!!this.error}hasMessage(){return!(!this.helpertext?.length&&!this.error?.length)}render(){return r(n,{key:"c568c2ad0a3b3afe84f455684c747d9fcc152ea5"},r("div",{key:"08708e20ab42d72385744f877d0d9a7e2e9a7725",class:"pn-textarea","data-valid":this.valid,"data-error":this.hasError(),"data-resize":this.resize},r("label",{key:"01a8257a0bc3bab14d08c167f833a4aa1d8077bd",class:"pn-textarea-label",htmlFor:this.textareaid},r("span",{key:"627d6e4b22a344372a834e79382146b127c3a495"},this.label),this.maxlength>=1&&r("span",{key:"a33a760b4e1491922fc6a333cdd98fabace1ca1c"},`${this.value?.length||0}/${this.maxlength}`)),r("textarea",{key:"4ea874aac0a2e3a3cfd6850e3fbd8415fbd659d8",class:"pn-textarea-element",id:this.textareaid,name:this.name,rows:this.rows,cols:this.cols,wrap:this.wrap,autocomplete:this.autocomplete,spellcheck:this.spellcheck,placeholder:this.placeholder,maxlength:this.maxlength,required:this.required,disabled:this.disabled,readonly:this.readonly,"aria-describedby":this.hasMessage()?this.idHelper:null,"aria-invalid":""+this.hasError(),onInput:e=>this.setVal(e),value:this.value}),this.hasMessage()&&r("p",{key:"de47982ee3125cfdb5651ebb50715d03df9459e1",id:this.idHelper,class:"pn-textarea-text",role:this.error?.length?"alert":null},r("span",{key:"dc885dee87a3e715f26fa950dfce7d68131edeae"},this.error||this.helpertext))))}static get style(){return`${e("pn-textarea")}{display:inline-flex;flex-direction:column}${e("pn-textarea")} .pn-textarea-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){${e("pn-textarea")} .pn-textarea-label{transition-duration:0s;transition-delay:0s}}${e("pn-textarea")} .pn-textarea-label>span{font-size:0.875em}${e("pn-textarea")} .pn-textarea-text{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-textarea")} .pn-textarea-text>${e("pn-icon")}{margin-right:0.25em}${e("pn-textarea")} .pn-textarea-element{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-textarea")} .pn-textarea-element:-webkit-autofill,${e("pn-textarea")} .pn-textarea-element:-webkit-autofill:hover,${e("pn-textarea")} .pn-textarea-element:-webkit-autofill:focus,${e("pn-textarea")} .pn-textarea-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #e0f8ff inset;-webkit-text-fill-color:#2d2013}${e("pn-textarea")} .pn-textarea-element{outline:0.2rem solid transparent;outline-offset:0.2rem}${e("pn-textarea")} .pn-textarea-element:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}${e("pn-textarea")} .pn-textarea-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-textarea")} .pn-textarea-element{transition-duration:0s;transition-delay:0s}}${e("pn-textarea")} .pn-textarea-element::placeholder{color:#5e554a;font-weight:normal}${e("pn-textarea")} .pn-textarea-element:hover{border-color:#005d92}${e("pn-textarea")} .pn-textarea-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}${e("pn-textarea")} .pn-textarea-element::-webkit-scrollbar{background-color:#ffffff;width:0.875em;border-radius:0.5em}${e("pn-textarea")} .pn-textarea-element::-webkit-scrollbar-track{background-color:#ffffff;border-radius:0.5em}${e("pn-textarea")} .pn-textarea-element::-webkit-scrollbar-thumb{cursor:pointer;background-color:#969087;border-radius:1em;border:0.25em solid #ffffff}${e("pn-textarea")} .pn-textarea-element::-webkit-scrollbar-thumb:hover{background-color:#5e554a}${e("pn-textarea")} .pn-textarea-element::-webkit-scrollbar-corner,${e("pn-textarea")} .pn-textarea-element::-webkit-scrollbar-button{display:none}${e("pn-textarea")} .pn-textarea-element{width:100%;resize:none}${e("pn-textarea")} .pn-textarea-element:read-only{border-color:#ffffff}${e("pn-textarea")} .pn-textarea-element::-webkit-resizer{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%0A%20%20%3Cpath%20d%3D%22M7%2017L17%207M12%2017L17%2012%22%20stroke%3D%22%23005D92%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%0A%3C%2Fsvg%3E");background-repeat:no-repeat;background-position:center}${e("pn-textarea")} .pn-textarea[data-valid]>.pn-textarea-label{color:#005e41}${e("pn-textarea")} .pn-textarea[data-valid]>.pn-textarea-element{border-color:#005e41}${e("pn-textarea")} .pn-textarea[data-valid]>.pn-textarea-element:hover{border-color:#002f24}${e("pn-textarea")} .pn-textarea[data-valid]>.pn-textarea-element:focus-visible{background-color:#ffffff;border-color:#005e41;outline-color:#005e41}${e("pn-textarea")} .pn-textarea[data-error]>.pn-textarea-label{color:#a70707}${e("pn-textarea")} .pn-textarea[data-error]>.pn-textarea-element{border-color:#a70707}${e("pn-textarea")} .pn-textarea[data-error]>.pn-textarea-element:hover{border-color:#500715}${e("pn-textarea")} .pn-textarea[data-error]>.pn-textarea-element:focus-visible{background-color:#ffffff;border-color:#a70707;outline-color:#a70707}${e("pn-textarea")} .pn-textarea[data-error]>.pn-textarea-text[role=alert]{color:#a70707}${e("pn-textarea")} .pn-textarea[data-resize]>.pn-textarea-element{resize:vertical}`}},[512,"pn-textarea",{label:[1],value:[1],helpertext:[1],textareaid:[1],name:[1],form:[1],rows:[2],cols:[2],wrap:[1],maxlength:[2],autocomplete:[1],spellcheck:[4],placeholder:[1],resize:[4],required:[4],valid:[4],invalid:[4],error:[1],disabled:[4],readonly:[4],content:[32]}]),l=i,s=function(){"undefined"!=typeof customElements&&["pn-textarea"].forEach((t=>{"pn-textarea"===t&&(customElements.get(e(e(t)))||customElements.define(e(e(t)),i))}))};export{l as PnTextarea,s as defineCustomElement}
+import{transformTag as e,proxyCustomElement as t,HTMLElement as a,h as r,Host as n}from"@stencil/core/internal/client";import{u as o}from"./helpers.js";const l=t(class extends a{constructor(e){super(),!1!==e&&this.__registerHost()}id="pn-textarea-"+o();idHelper=this.id+"-text";get hostElement(){return this}label;value="";helpertext;compact=!1;textareaid=this.id;name;form;rows=2;cols=20;wrap="soft";maxlength;autocomplete="off";spellcheck=!1;placeholder;resize=!1;required=!1;valid=!1;invalid=!1;error;disabled=!1;readonly=!1;handleId(){this.textareaid!==this.id&&(this.idHelper=this.getId()+"-helper")}setVal(e){this.value=e.target.value}hasError(){return this.invalid||!!this.error}hasMessage(){return!(!this.helpertext?.length&&!this.error?.length)}getId(){return this.textareaid||this.id}renderLabel(){return r("label",{class:"pn-textarea-label",htmlFor:this.getId(),"data-compact":this.compact},r("span",null,this.label),this.maxlength>=1&&r("span",null,`${this.value?.length||0}/${this.maxlength}`))}render(){return r(n,{key:"890e6c29daa489bdf44588c91457e71172e40dae"},r("div",{key:"c35d279a237c2411faebd0823d3a03f8212c54d0",class:"pn-textarea","data-valid":this.valid,"data-error":this.hasError(),"data-resize":this.resize},!this.compact&&this.renderLabel(),r("textarea",{key:"f2358babec0d5eb02e1d3ba5c21c33998e9582b3",class:"pn-textarea-element",id:this.getId(),name:this.name,rows:this.rows,cols:this.cols,wrap:this.wrap,autocomplete:this.autocomplete,spellcheck:this.spellcheck,placeholder:this.compact?this.placeholder||" ":this.placeholder,maxlength:this.maxlength,value:this.value,required:this.required,disabled:this.disabled,readonly:this.readonly,"aria-describedby":this.hasMessage()?this.idHelper:null,"aria-invalid":""+this.hasError(),"data-compact":this.compact,onInput:e=>this.setVal(e)}),this.compact&&this.renderLabel(),this.hasMessage()&&r("p",{key:"ccdaed7f958b1ef07da159973690ddd86be791f3",id:this.idHelper,class:"pn-textarea-text",role:this.error?.length?"alert":null},r("span",{key:"62d9b78ed5370629548e67001689b3d14d40deaa"},this.error||this.helpertext))))}static get watchers(){return{textareaid:[{handleId:1}]}}static get style(){return`${e("pn-textarea")}{display:inline-flex;flex-direction:column}${e("pn-textarea")} .pn-textarea{position:relative}${e("pn-textarea")} .pn-textarea-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-textarea")} .pn-textarea-label{transition-duration:0s;transition-delay:0s}}${e("pn-textarea")} .pn-textarea-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-textarea")} .pn-textarea-label[data-compact]>span{font-size:1em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;line-height:1.5em}${e("pn-textarea")} .pn-textarea-label>span{font-size:0.875em}${e("pn-textarea")} .pn-textarea-label[data-compact]>span{background-color:#ffffff;color:#2d2013}${e("pn-textarea")} .pn-textarea-text{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-textarea")} .pn-textarea-text>${e("pn-icon")}{margin-right:0.25em}${e("pn-textarea")} .pn-textarea-element{width:100%;resize:none;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-textarea")} .pn-textarea-element:-webkit-autofill,${e("pn-textarea")} .pn-textarea-element:-webkit-autofill:hover,${e("pn-textarea")} .pn-textarea-element:-webkit-autofill:focus,${e("pn-textarea")} .pn-textarea-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #e0f8ff inset;-webkit-text-fill-color:#2d2013}${e("pn-textarea")} .pn-textarea-element{outline:0.2rem solid transparent;outline-offset:0.2rem}${e("pn-textarea")} .pn-textarea-element:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}${e("pn-textarea")} .pn-textarea-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-textarea")} .pn-textarea-element{transition-duration:0s;transition-delay:0s}}${e("pn-textarea")} .pn-textarea-element[data-compact]{text-align:left;padding-top:1.125em;padding-bottom:0.375em;max-width:unset}${e("pn-textarea")} .pn-textarea-element[data-compact]::placeholder{color:transparent}${e("pn-textarea")} .pn-textarea-element[data-compact]:focus+.pn-textarea-label,${e("pn-textarea")} .pn-textarea-element[data-compact]:not(:placeholder-shown)+.pn-textarea-label{transform:translateY(-85%) scale(0.75);transition-delay:0s}${e("pn-textarea")} .pn-textarea-element::placeholder{color:#5e554a;font-weight:normal}${e("pn-textarea")} .pn-textarea-element:hover{border-color:#005d92}${e("pn-textarea")} .pn-textarea-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}${e("pn-textarea")} .pn-textarea-element::-webkit-scrollbar{background-color:#ffffff;width:0.875em;border-radius:0.5em}${e("pn-textarea")} .pn-textarea-element::-webkit-scrollbar-track{background-color:#ffffff;border-radius:0.5em}${e("pn-textarea")} .pn-textarea-element::-webkit-scrollbar-thumb{cursor:pointer;background-color:#969087;border-radius:1em;border:0.25em solid #ffffff}${e("pn-textarea")} .pn-textarea-element::-webkit-scrollbar-thumb:hover{background-color:#5e554a}${e("pn-textarea")} .pn-textarea-element::-webkit-scrollbar-corner,${e("pn-textarea")} .pn-textarea-element::-webkit-scrollbar-button{display:none}${e("pn-textarea")} .pn-textarea-element:read-only{border-color:#ffffff}${e("pn-textarea")} .pn-textarea-element:disabled+.pn-textarea-label>span{background-color:#f3f2f2}${e("pn-textarea")} .pn-textarea-element::-webkit-resizer{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%0A%20%20%3Cpath%20d%3D%22M7%2017L17%207M12%2017L17%2012%22%20stroke%3D%22%23005D92%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%0A%3C%2Fsvg%3E");background-repeat:no-repeat;background-position:center}${e("pn-textarea")} .pn-textarea[data-valid]>.pn-textarea-label{color:#005e41}${e("pn-textarea")} .pn-textarea[data-valid]>.pn-textarea-element{border-color:#005e41}${e("pn-textarea")} .pn-textarea[data-valid]>.pn-textarea-element:hover{border-color:#002f24}${e("pn-textarea")} .pn-textarea[data-valid]>.pn-textarea-element:focus-visible{background-color:#ffffff;border-color:#005e41;outline-color:#005e41}${e("pn-textarea")} .pn-textarea[data-valid]>.pn-textarea-element:-webkit-autofill,${e("pn-textarea")} .pn-textarea[data-valid]>.pn-textarea-element:-webkit-autofill:hover,${e("pn-textarea")} .pn-textarea[data-valid]>.pn-textarea-element:-webkit-autofill:focus,${e("pn-textarea")} .pn-textarea[data-valid]>.pn-textarea-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #edfbf3 inset;-webkit-text-fill-color:#2d2013}${e("pn-textarea")} .pn-textarea[data-error]>.pn-textarea-label{color:#a70707}${e("pn-textarea")} .pn-textarea[data-error]>.pn-textarea-element{border-color:#a70707}${e("pn-textarea")} .pn-textarea[data-error]>.pn-textarea-element:hover{border-color:#500715}${e("pn-textarea")} .pn-textarea[data-error]>.pn-textarea-element:focus-visible{background-color:#ffffff;border-color:#a70707;outline-color:#a70707}${e("pn-textarea")} .pn-textarea[data-error]>.pn-textarea-element:-webkit-autofill,${e("pn-textarea")} .pn-textarea[data-error]>.pn-textarea-element:-webkit-autofill:hover,${e("pn-textarea")} .pn-textarea[data-error]>.pn-textarea-element:-webkit-autofill:focus,${e("pn-textarea")} .pn-textarea[data-error]>.pn-textarea-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #fef7f6 inset;-webkit-text-fill-color:#2d2013}${e("pn-textarea")} .pn-textarea[data-error]>.pn-textarea-text[role=alert]{color:#a70707}${e("pn-textarea")} .pn-textarea[data-resize]>.pn-textarea-element{resize:vertical}`}},[512,"pn-textarea",{label:[1],value:[1025],helpertext:[1],compact:[4],textareaid:[1],name:[1],form:[1],rows:[2],cols:[2],wrap:[1],maxlength:[2],autocomplete:[1],spellcheck:[4],placeholder:[1],resize:[4],required:[4],valid:[4],invalid:[4],error:[1],disabled:[4],readonly:[4]},void 0,{textareaid:[{handleId:1}]}]),i=l,p=function(){"undefined"!=typeof customElements&&["pn-textarea"].forEach((t=>{"pn-textarea"===t&&(customElements.get(e(e(t)))||customElements.define(e(e(t)),l))}))};export{i as PnTextarea,p as defineCustomElement}