npm - @postnord/pn-marketweb-components - Versions diffs - 2.0.74 → 2.0.76 - Mend

@postnord/pn-marketweb-components 2.0.74 → 2.0.76

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (411) hide show

package/umd/modules/@postnord/web-components/components/pn-icon-grid.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
 import { a as allIcons, d as defineCustomElement$2 } from './pn-icon2.js';
 import { c as colors } from './colors.js';
-const pnIconGridCss = "#sb-addon-centered-wrapper{background-color:#f2f2f2}.sb-show-main{background-color:#f2f2f2}.icon-grid{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:5rem auto;width:100%;display:grid;grid-template-columns:repeat(auto-fill, 17rem);grid-gap:5rem;max-width:120rem}.icon-grid .icon{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border-radius:2.5rem;background-color:#f2f2f2;-webkit-box-shadow:0px -6px 10px white, 0px 4px 15px rgba(0, 0, 0, 0.15);box-shadow:0px -6px 10px white, 0px 4px 15px rgba(0, 0, 0, 0.15);height:14rem;position:relative;cursor:pointer;overflow:hidden}.icon-grid .icon:after{content:\"\";position:absolute;left:0;top:0;width:100%;height:100%;z-index:2;-webkit-transition:all 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92);transition:all 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92)}.icon-grid .icon.active{-webkit-box-shadow:0 15px 20px rgba(0, 0, 0, 0.02);box-shadow:0 15px 20px rgba(0, 0, 0, 0.02)}.icon-grid .icon.active:after{-webkit-box-shadow:inset 0px -2px 5px white, inset 0px 2px 5px rgba(0, 0, 0, 0.15);box-shadow:inset 0px -2px 5px white, inset 0px 2px 5px rgba(0, 0, 0, 0.15)}.icon-grid .icon span{position:absolute;top:1.5rem;right:1.5rem;color:#5E554A;font-size:0.9em}.icon-grid .icon p{position:absolute;padding:0 0.5rem 1rem;text-align:center;bottom:0.5rem;font-size:0.9em;color:#5E554A;-webkit-transition:opacity 0.2s ease, -webkit-transform 0.3s ease-in-out;transition:opacity 0.2s ease, -webkit-transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out, opacity 0.2s ease;transition:transform 0.3s ease-in-out, opacity 0.2s ease, -webkit-transform 0.3s ease-in-out}.icon-grid .icon p.copy{-webkit-transform:translateY(3.5rem);transform:translateY(3.5rem);opacity:0}.icon-grid .icon:hover p.symbol-name{-webkit-transform:translateY(3.5rem);transform:translateY(3.5rem);opacity:0}.icon-grid .icon:hover p.copy{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}";
+const pnIconGridCss = "#sb-addon-centered-wrapper{background-color:#f2f2f2}.sb-show-main{background-color:#f2f2f2}.icon-grid{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:5rem auto;width:100%;display:grid;grid-template-columns:repeat(auto-fill, 17rem);grid-gap:5rem;max-width:120rem}.icon-grid .icon{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border-radius:2.5rem;background-color:#f2f2f2;-webkit-box-shadow:0px -6px 10px white, 0px 4px 15px rgba(0, 0, 0, 0.15);box-shadow:0px -6px 10px white, 0px 4px 15px rgba(0, 0, 0, 0.15);height:14rem;position:relative;cursor:pointer;overflow:hidden}.icon-grid .icon:after{content:\"\";position:absolute;left:0;top:0;width:100%;height:100%;z-index:2;-webkit-transition:all 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92);transition:all 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92)}.icon-grid .icon.active{-webkit-box-shadow:0 15px 20px rgba(0, 0, 0, 0.02);box-shadow:0 15px 20px rgba(0, 0, 0, 0.02)}.icon-grid .icon.active:after{-webkit-box-shadow:inset 0px -2px 5px white, inset 0px 2px 5px rgba(0, 0, 0, 0.15);box-shadow:inset 0px -2px 5px white, inset 0px 2px 5px rgba(0, 0, 0, 0.15)}.icon-grid .icon span{position:absolute;top:1.5rem;right:1.5rem;color:#5e554a;font-size:0.9em}.icon-grid .icon p{position:absolute;padding:0 0.5rem 1rem;text-align:center;bottom:0.5rem;font-size:0.9em;color:#5e554a;-webkit-transition:opacity 0.2s ease, -webkit-transform 0.3s ease-in-out;transition:opacity 0.2s ease, -webkit-transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out, opacity 0.2s ease;transition:transform 0.3s ease-in-out, opacity 0.2s ease, -webkit-transform 0.3s ease-in-out}.icon-grid .icon p.copy{-webkit-transform:translateY(3.5rem);transform:translateY(3.5rem);opacity:0}.icon-grid .icon:hover p.symbol-name{-webkit-transform:translateY(3.5rem);transform:translateY(3.5rem);opacity:0}.icon-grid .icon:hover p.copy{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}";
 const PnIconGrid$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/umd/modules/@postnord/web-components/components/pn-icon2.js CHANGED Viewed

@@ -181,6 +181,7 @@ const allIcons = {
   "print": "<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M7 4.5C7 3.11929 8.11929 2 9.5 2H16.5C17.8809 2 19 3.11976 19 4.50025V4.99929C19 5.55158 18.5523 6 18 6H17V8H18C19.6569 8 21 9.34315 21 11V16C21 17.6569 19.6569 19 18 19H17V21C17 21.5523 16.5523 22 16 22H8C7.44772 22 7 21.5523 7 21V19H6C4.34315 19 3 17.6569 3 16V11C3 9.34315 4.34315 8 6 8H7V4.5ZM9 8H15V4H9.5C9.22386 4 9 4.22386 9 4.5V8ZM7 17V16C6.44772 16 6 15.5523 6 15C6 14.4477 6.44772 14 7 14H17C17.5523 14 18 14.4477 18 15C18 15.5523 17.5523 16 17 16V17H18C18.5523 17 19 16.5523 19 16V11C19 10.4477 18.5523 10 18 10H6C5.44772 10 5 10.4477 5 11V16C5 16.5523 5.44772 17 6 17H7ZM15 16H9V20H15V16ZM6 12C6 11.4477 6.44772 11 7 11H9C9.55228 11 10 11.4477 10 12C10 12.5523 9.55228 13 9 13H7C6.44772 13 6 12.5523 6 12Z\" fill=\"black\"/></svg>",
   "qr-code": "<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M5 3C3.89543 3 3 3.89543 3 5V7C3 8.10457 3.89543 9 5 9H7C8.10457 9 9 8.10457 9 7V5C9 3.89543 8.10457 3 7 3H5ZM5 5H7V7H5V5ZM5 15C3.89543 15 3 15.8954 3 17V19C3 20.1046 3.89543 21 5 21H7C8.10457 21 9 20.1046 9 19V17C9 15.8954 8.10457 15 7 15H5ZM7 17V19H5V17H7ZM20 14C20.5523 14 21 14.4477 21 15V19C21 20.1046 20.1046 21 19 21H17C15.8954 21 15 20.1046 15 19V16.9612C15 16.4089 15.4477 15.9612 16 15.9612C16.5523 15.9612 17 16.4089 17 16.9612V19H19V15C19 14.4477 19.4477 14 20 14ZM17 3C15.8954 3 15 3.89543 15 5V7.27355C15 8.37812 15.8954 9.27355 17 9.27355H19.1793C20.2839 9.27355 21.1793 8.37812 21.1793 7.27355V5C21.1793 3.89543 20.2839 3 19.1793 3H17ZM17 5L19.1793 5V7.27355L17 7.27355V5ZM3 12C3 11.4477 3.44772 11 4 11H5C5.55228 11 6 11.4477 6 12C6 12.5523 5.55228 13 5 13H4C3.44772 13 3 12.5523 3 12ZM14.5 11C13.9477 11 13.5 11.4477 13.5 12C13.5 12.5523 13.9477 13 14.5 13H16C16.5523 13 17 12.5523 17 12C17 11.4477 16.5523 11 16 11H14.5ZM10 18C10 17.4477 10.4477 17 11 17H13C13.5523 17 14 17.4477 14 18C14 18.5523 13.5523 19 13 19H11C10.4477 19 10 18.5523 10 18ZM8 11C7.44772 11 7 11.4477 7 12C7 12.5523 7.44772 13 8 13H10C10.5523 13 11 13.4477 11 14V15C11 15.5523 11.4477 16 12 16C12.5523 16 13 15.5523 13 15V14C13 12.3431 11.6569 11 10 11H8ZM12 3C12.5523 3 13 3.44772 13 4V8C13 8.55229 12.5523 9 12 9C11.4477 9 11 8.55229 11 8V4C11 3.44772 11.4477 3 12 3ZM18.5 11C17.9477 11 17.5 11.4477 17.5 12C17.5 12.5523 17.9477 13 18.5 13H20C20.5523 13 21 12.5523 21 12C21 11.4477 20.5523 11 20 11H18.5Z\" fill=\"black\"/></svg>",
   "receipt": "<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M7.61523 4C5.95838 4 4.61523 5.34315 4.61523 7V18.399L4.8308 18.2239C5.1982 17.9254 5.72458 17.9254 6.09198 18.2239L7.30754 19.2115L8.5231 18.2239C8.89051 17.9254 9.41689 17.9254 9.78429 18.2239L10.9998 19.2115L12.2154 18.2239C12.5828 17.9254 13.1092 17.9254 13.4766 18.2239L13.6922 18.399V5.76923C13.6922 5.1298 13.8514 4.52757 14.1323 4H7.61523ZM17.4614 2H7.61523C4.85381 2 2.61523 4.23858 2.61523 7V20.5C2.61523 20.8858 2.83713 21.2371 3.18546 21.4029C3.53379 21.5687 3.94642 21.5194 4.24583 21.2761L5.46139 20.2885L6.67695 21.2761C7.04435 21.5746 7.57073 21.5746 7.93813 21.2761L9.1537 20.2885L10.3693 21.2761C10.7367 21.5746 11.263 21.5746 11.6304 21.2761L12.846 20.2885L14.0616 21.2761C14.361 21.5194 14.7736 21.5687 15.1219 21.4029C15.4703 21.2371 15.6922 20.8858 15.6922 20.5V10H19.2306C20.3352 10 21.2306 9.10457 21.2306 8V5.76923C21.2306 3.68754 19.5431 2 17.4614 2ZM17.4614 4C16.4843 4 15.6922 4.79211 15.6922 5.76923V8H19.2306V5.76923C19.2306 4.79211 18.4385 4 17.4614 4ZM5.846 9C5.846 8.44772 6.29372 8 6.846 8H11.4614C12.0137 8 12.4614 8.44772 12.4614 9C12.4614 9.55228 12.0137 10 11.4614 10H6.846C6.29372 10 5.846 9.55228 5.846 9ZM5.846 12C5.846 11.4477 6.29372 11 6.846 11H11.4614C12.0137 11 12.4614 11.4477 12.4614 12C12.4614 12.5523 12.0137 13 11.4614 13H6.846C6.29372 13 5.846 12.5523 5.846 12ZM5.846 15C5.846 14.4477 6.29372 14 6.846 14H8.23062C8.7829 14 9.23062 14.4477 9.23062 15C9.23062 15.5523 8.7829 16 8.23062 16H6.846C6.29372 16 5.846 15.5523 5.846 15ZM9.52908 15C9.52908 14.4477 9.9768 14 10.5291 14H10.5383C11.0906 14 11.5383 14.4477 11.5383 15C11.5383 15.5523 11.0906 16 10.5383 16H10.5291C9.9768 16 9.52908 15.5523 9.52908 15Z\" fill=\"black\"/></svg>",
+  "recipient": "<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15.1287 11.2083C15.0909 11.7001 14.7001 12.0908 14.2083 12.1287L9.61215 12.4822C9.0615 12.5246 8.58076 12.1125 8.5384 11.5619C8.49605 11.0112 8.9081 10.5305 9.45876 10.4881L11.8871 10.3013L7.76769 6.18188C7.37717 5.79135 7.37717 5.15819 7.76769 4.76766C8.15822 4.37714 8.79138 4.37714 9.1819 4.76766L13.3014 8.88711L13.4882 6.45873C13.5305 5.90808 14.0112 5.49602 14.5619 5.53838C15.1126 5.58073 15.5246 6.06147 15.4823 6.61213L15.1287 11.2083Z\" fill=\"#2D2013\"/><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M20.7071 12.2928C21.0976 12.6833 21.0976 13.3164 20.7071 13.707L15.5355 18.8786C13.5829 20.8312 10.4171 20.8312 8.46444 18.8786L2.79289 13.207C2.40237 12.8165 2.40237 12.1833 2.79289 11.7928C3.18342 11.4023 3.81658 11.4023 4.20711 11.7928L9.87865 17.4644C11.0502 18.6359 12.9497 18.6359 14.1213 17.4644L19.2929 12.2928C19.6834 11.9022 20.3165 11.9022 20.7071 12.2928Z\" fill=\"#2D2013\"/></svg>",
   "return": "<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M11.7071 21.7071C12.0976 21.3166 12.0976 20.6834 11.7071 20.2929L8.41421 17H11.5C15.6421 17 19 13.6421 19 9.5C19 5.35786 15.6421 2 11.5 2H11C10.4477 2 10 2.44772 10 3C10 3.55228 10.4477 4 11 4H11.5C14.5376 4 17 6.46243 17 9.5C17 12.5376 14.5376 15 11.5 15H8.41421L11.7071 11.7071C12.0976 11.3166 12.0976 10.6834 11.7071 10.2929C11.3166 9.90237 10.6834 9.90237 10.2929 10.2929L5.29289 15.2929C4.90237 15.6834 4.90237 16.3166 5.29289 16.7071L10.2929 21.7071C10.6834 22.0976 11.3166 22.0976 11.7071 21.7071ZM7 3C7 3.55228 7.44772 4 8 4H8.01C8.56228 4 9.01 3.55228 9.01 3C9.01 2.44772 8.56228 2 8.01 2H8C7.44772 2 7 2.44772 7 3Z\" fill=\"black\"/></svg>",
   "roll": "<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M3.13403 6.96416C4.51474 4.5727 7.5727 3.75332 9.96416 5.13403L19.0574 10.384C21.4489 11.7647 22.2683 14.8227 20.8876 17.2142C19.5068 19.6056 16.4489 20.425 14.0574 19.0443L4.96416 13.7943C2.5727 12.4136 1.75332 9.35562 3.13403 6.96416ZM11.593 15.3121L5.96416 12.0622C4.52928 11.2338 4.03766 9.39904 4.86608 7.96416C5.69451 6.52928 7.52928 6.03766 8.96416 6.86608L14.593 10.1159C13.6316 10.5258 12.7901 11.2394 12.2273 12.2142C11.6645 13.189 11.4672 14.2745 11.593 15.3121ZM18.0574 12.1161C16.6225 11.2877 14.7878 11.7793 13.9594 13.2142C13.1309 14.649 13.6225 16.4838 15.0574 17.3122C16.4923 18.1407 18.3271 17.649 19.1555 16.2142C19.9839 14.7793 19.4923 12.9445 18.0574 12.1161Z\" fill=\"black\"/></svg>",
   "rotate-2": "<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M6.60178 0.270459C6.99091 -0.0943454 7.59786 -0.0895267 7.98115 0.281411L10.1954 2.42429C10.5922 2.80837 10.6026 3.44145 10.2185 3.83832C9.83446 4.23518 9.20138 4.24555 8.80451 3.86147L8.28571 3.35939V15.2857C8.28571 15.838 8.73343 16.2857 9.28571 16.2857H21.8571C22.4094 16.2857 22.8571 16.7334 22.8571 17.2857C22.8571 17.838 22.4094 18.2857 21.8571 18.2857H18.5713V20.6918L19.1731 20.1276C19.576 19.7498 20.2089 19.7703 20.5866 20.1732C20.9643 20.5761 20.9439 21.2089 20.541 21.5867L18.2552 23.7295C17.8661 24.0943 17.2591 24.0895 16.8759 23.7186L14.6616 21.5757C14.2648 21.1916 14.2544 20.5585 14.6385 20.1617C15.0225 19.7648 15.6556 19.7544 16.0525 20.1385L16.5713 20.6406V18.2857H9.28571C7.62886 18.2857 6.28571 16.9426 6.28571 15.2857V8L3 8C2.44772 8 2 7.55228 2 7C2 6.44772 2.44772 6 3 6L6.28571 6V3.30822L5.68388 3.87242C5.28097 4.25015 4.64813 4.22973 4.27041 3.82682C3.89268 3.42391 3.9131 2.79107 4.31601 2.41334L6.60178 0.270459ZM11.3 6C10.7477 6 10.3 6.44772 10.3 7C10.3 7.55228 10.7477 8 11.3 8H15.5714C16.1237 8 16.5714 8.44772 16.5714 9V13.1429C16.5714 13.6952 17.0191 14.1429 17.5714 14.1429C18.1237 14.1429 18.5714 13.6952 18.5714 13.1429V9C18.5714 7.34314 17.2283 6 15.5714 6H11.3Z\" fill=\"black\"/></svg>",
@@ -192,6 +193,8 @@ const allIcons = {
   "scanner": "<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M3 6C3 4.34315 4.34315 3 6 3H8C8.55228 3 9 3.44772 9 4C9 4.55228 8.55228 5 8 5H6C5.44772 5 5 5.44772 5 6V7C5 7.55228 4.55228 8 4 8C3.44772 8 3 7.55228 3 7V6ZM15 4C15 3.44772 15.4477 3 16 3H18C19.6569 3 21 4.34315 21 6V7C21 7.55228 20.5523 8 20 8C19.4477 8 19 7.55228 19 7V6C19 5.44772 18.5523 5 18 5H16C15.4477 5 15 4.55228 15 4ZM0 12C0 11.4477 0.447715 11 1 11H23C23.5523 11 24 11.4477 24 12C24 12.5523 23.5523 13 23 13H1C0.447715 13 0 12.5523 0 12ZM4 16C4.55228 16 5 16.4477 5 17V18C5 18.5523 5.44772 19 6 19H8C8.55228 19 9 19.4477 9 20C9 20.5523 8.55228 21 8 21H6C4.34315 21 3 19.6569 3 18V17C3 16.4477 3.44772 16 4 16ZM20 16C20.5523 16 21 16.4477 21 17V18C21 19.6569 19.6569 21 18 21H16C15.4477 21 15 20.5523 15 20C15 19.4477 15.4477 19 16 19H18C18.5523 19 19 18.5523 19 18V17C19 16.4477 19.4477 16 20 16Z\" fill=\"black\"/></svg>",
   "search": "<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4 11.4415C4 7.33235 7.3311 4 11.4406 4C17.6805 4 21.0572 11.1536 17.3628 15.9486L20.2071 18.7929C20.5976 19.1834 20.5976 19.8166 20.2071 20.2071C19.8166 20.5976 19.1834 20.5976 18.7929 20.2071L15.9558 17.37C11.211 21.0448 4 17.7301 4 11.4415ZM15.2767 15.309C11.8456 18.714 6 16.2844 6 11.4415C6 8.43656 8.43603 6 11.4406 6C16.1639 6 18.6436 11.6055 15.4664 15.1004L15.2767 15.309Z\" fill=\"black\"/></svg>",
   "secure-transfer": "<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M7.5 2C6.94772 2 6.5 2.44772 6.5 3C6.5 3.8022 6.27325 4.2345 5.97422 4.49083C5.64569 4.77244 5.04705 5.00009 4 5.00009C3.73478 5.00009 3.48043 5.10545 3.29289 5.29299C3.10536 5.48053 3 5.73488 3 6.0001C3.00001 9.32491 3.42422 12.4098 4.72318 15.1197C6.03331 17.853 8.19639 20.1281 11.5343 21.8849C11.8367 22.0441 12.1994 22.0378 12.4961 21.8682C15.5491 20.1237 17.7013 17.9932 19.0759 15.3342C20.444 12.6877 21 9.59804 21 6.00009C21 5.44781 20.5523 5.00009 20 5.00009C18.9529 5.00009 18.3543 4.77244 18.0258 4.49083C17.7267 4.2345 17.5 3.8022 17.5 3C17.5 2.44772 17.0523 2 16.5 2H7.5ZM7.27584 6.00931C7.89304 5.48026 8.25161 4.78721 8.40718 4H15.5928C15.7484 4.78721 16.107 5.48026 16.7242 6.00931C17.3348 6.53276 18.1118 6.81941 18.9861 6.93645C18.8958 9.91054 18.3631 12.3577 17.2992 14.4158C16.2003 16.5417 14.4977 18.3234 11.981 19.8508C9.26985 18.3198 7.5722 16.4364 6.52669 14.2552C5.52042 12.1559 5.08857 9.71883 5.01249 6.93663C5.88737 6.81972 6.66484 6.53305 7.27584 6.00931ZM10.5005 8C10.5005 7.44772 10.9482 7 11.5005 7C12.0526 7 12.5005 7.4478 12.5005 8.00024C12.5005 8.55242 12.0528 9 11.501 9C10.9484 9 10.5005 8.55197 10.5005 8ZM11.5005 5C9.84363 5 8.50049 6.34315 8.50049 8C8.50049 9.30644 9.33576 10.4175 10.501 10.8293L10.5005 17.4997C10.5003 18.052 10.9479 18.4998 11.5002 18.5C12.0524 18.5002 12.5003 18.0526 12.5005 17.5003L12.5007 17H13.501C14.0533 17 14.501 16.5523 14.501 16C14.501 15.4477 14.0533 15 13.501 15H12.501V14H13C13.5523 14 14 13.5523 14 13C14 12.4477 13.5523 12 13 12H12.501V10.8292C13.666 10.4173 14.5005 9.30609 14.5005 8.00024C14.5005 6.34355 13.1575 5 11.5005 5Z\" fill=\"black\"/></svg>",
+  "select-service": "<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2 1C1.44772 1 1 1.44772 1 2C1 2.55228 1.44772 3 2 3H9C9.55229 3 10 2.55228 10 2C10 1.44772 9.55229 1 9 1H2ZM11 7.5C11 7.22386 11.2238 7 11.5 7C11.7761 7 12 7.22386 12 7.5V11C12 11.5523 12.4477 12 13 12C13.5409 12 13.9815 11.5705 13.9994 11.034C14.0367 11.0254 14.0861 11.0172 14.1495 11.0111C14.2599 11.0006 14.3714 11 14.5 11C16.578 11 18.0943 11.5779 19.0022 12.376C19.8838 13.151 20.2462 14.1699 20.0194 15.3039C19.6692 17.0548 19.2162 18.2544 18.6976 19.3652C18.2334 20.3597 17.1851 21 16.0285 21H13.2442C12.41 21 11.6135 20.6527 11.0459 20.0414L6.72092 15.3837C6.53536 15.1839 6.54112 14.8731 6.73395 14.6802C6.91937 14.4948 7.21558 14.4814 7.41702 14.6493L9.35979 16.2682C9.65787 16.5166 10.0727 16.5702 10.4241 16.4056C10.7755 16.241 11 15.888 11 15.5V7.5ZM14 7.5V9.0164C14.1954 8.99929 14.3613 8.99969 14.4668 8.99994L14.5 9C16.9219 9 18.9556 9.67209 20.3227 10.874C21.7162 12.099 22.3538 13.8301 21.9806 15.6961C21.5948 17.6248 21.0863 18.9765 20.5099 20.2112C19.6924 21.9625 17.9021 23 16.0285 23H13.2442C11.8538 23 10.5263 22.4211 9.58028 21.4023L5.25534 16.7446C4.33777 15.7565 4.36622 14.2195 5.31973 13.266C6.23659 12.3492 7.70129 12.2827 8.69739 13.1128L8.99997 13.365V7.5C8.99997 6.11929 10.1193 5 11.5 5C12.8807 5 14 6.11929 14 7.5ZM1 5C1 4.44772 1.44772 4 2 4H7C7.55228 4 8 4.44772 8 5C8 5.55228 7.55228 6 7 6H2C1.44772 6 1 5.55228 1 5ZM2 7C1.44772 7 1 7.44772 1 8C1 8.55228 1.44772 9 2 9H6C6.55228 9 7 8.55228 7 8C7 7.44772 6.55228 7 6 7H2Z\" fill=\"black\"/></svg>",
+  "sender": "<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15.2084 4.47774C15.7002 4.51557 16.091 4.90632 16.1288 5.3981L16.4824 9.99429C16.5247 10.5449 16.1127 11.0257 15.562 11.068C15.0113 11.1104 14.5306 10.6983 14.4882 10.1477L14.3014 7.71931L10.182 11.8388C9.79147 12.2293 9.15831 12.2293 8.76779 11.8388C8.37726 11.4482 8.37726 10.8151 8.76779 10.4245L12.8872 6.30509L10.4589 6.11829C9.9082 6.07594 9.49614 5.5952 9.5385 5.04454C9.58086 4.49389 10.0616 4.08183 10.6122 4.12419L15.2084 4.47774Z\" fill=\"#2D2013\"/><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M20.7071 12.2928C21.0976 12.6833 21.0976 13.3164 20.7071 13.707L15.5355 18.8786C13.5829 20.8312 10.4171 20.8312 8.46444 18.8786L2.79289 13.207C2.40237 12.8165 2.40237 12.1833 2.79289 11.7928C3.18342 11.4023 3.81658 11.4023 4.20711 11.7928L9.87865 17.4644C11.0502 18.6359 12.9497 18.6359 14.1213 17.4644L19.2929 12.2928C19.6834 11.9022 20.3165 11.9022 20.7071 12.2928Z\" fill=\"#2D2013\"/></svg>",
   "settings": "<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M9.68351 3.51622C10.0857 2.59526 10.9952 2 12.0001 2C13.0051 2 13.9146 2.59526 14.3168 3.51622L14.5996 4.16374C14.6752 4.33691 14.853 4.51736 15.1406 4.64023C15.374 4.73994 15.5764 4.75559 15.7331 4.71852L17.1497 4.3835C17.8414 4.21989 18.5686 4.42629 19.0712 4.92893C19.5739 5.43157 19.7803 6.15871 19.6166 6.85047L19.2816 8.26697C19.2446 8.42371 19.2602 8.62611 19.3599 8.85955C19.4828 9.1472 19.6633 9.32503 19.8364 9.40067L20.4838 9.6834C21.4048 10.0856 22 10.9951 22 12C22 13.005 21.4048 13.9145 20.4838 14.3167L19.8364 14.5994C19.6632 14.6751 19.4828 14.8529 19.3599 15.1405C19.2602 15.3739 19.2446 15.5763 19.2816 15.733L19.6166 17.1495C19.7803 17.8413 19.5739 18.5684 19.0712 19.0711C18.5686 19.5737 17.8414 19.7801 17.1497 19.6165L15.7331 19.2815C15.5764 19.2444 15.374 19.2601 15.1406 19.3598C14.853 19.4826 14.6752 19.6631 14.5996 19.8363L14.3168 20.4838C13.9146 21.4047 13.0051 22 12.0001 22C10.9952 22 10.0857 21.4047 9.68351 20.4838L9.40074 19.8363C9.32511 19.6631 9.1473 19.4826 8.85967 19.3598C8.62625 19.2601 8.42386 19.2444 8.26714 19.2815L6.85062 19.6165C6.15886 19.7801 5.43172 19.5737 4.92908 19.0711C4.42644 18.5684 4.22004 17.8413 4.38364 17.1495L4.71867 15.733C4.75574 15.5763 4.7401 15.3739 4.64039 15.1405C4.51752 14.8529 4.33708 14.6751 4.16392 14.5995L3.51625 14.3167C2.59528 13.9145 2 13.005 2 12C2 10.9951 2.59528 10.0856 3.51624 9.68342L4.16385 9.40063C4.33704 9.325 4.5175 9.14718 4.64037 8.85953C4.74009 8.62611 4.75573 8.42372 4.71867 8.26699L4.38364 6.85047C4.22004 6.15872 4.42644 5.43157 4.92908 4.92893C5.43172 4.42629 6.15886 4.21989 6.85062 4.3835L8.26714 4.71852C8.42386 4.75559 8.62625 4.73994 8.85967 4.64023C9.1473 4.51736 9.32511 4.33691 9.40074 4.16374L9.68351 3.51622ZM12.0001 4C11.7903 4 11.6004 4.12431 11.5164 4.31663L11.2336 4.96415C10.9072 5.71164 10.2816 6.20765 9.64536 6.47944C9.10834 6.70885 8.46541 6.82059 7.80682 6.66483L6.3903 6.3298C6.37337 6.3258 6.35559 6.33085 6.34329 6.34315C6.331 6.35544 6.32595 6.37323 6.32995 6.39015L6.66497 7.80667C6.82073 8.46526 6.70899 9.1082 6.47958 9.64522C6.20778 10.2815 5.71175 10.9071 4.96422 11.2335L4.31662 11.5163C4.1243 11.6003 4 11.7902 4 12C4 12.2099 4.12431 12.3998 4.31662 12.4838L4.96429 12.7666C5.71179 13.093 6.2078 13.7186 6.47959 14.3548C6.709 14.8918 6.82074 15.5347 6.66498 16.1933L6.32995 17.6098C6.32595 17.6268 6.331 17.6446 6.34329 17.6569C6.35559 17.6691 6.37337 17.6742 6.3903 17.6702L7.80682 17.3352C8.46541 17.1794 9.10834 17.2912 9.64536 17.5206C10.2816 17.7924 10.9072 18.2884 11.2336 19.0359L11.5164 19.6834C11.6004 19.8757 11.7903 20 12.0001 20C12.21 20 12.3999 19.8757 12.4839 19.6834L12.7667 19.0358C13.0931 18.2884 13.7187 17.7924 14.3549 17.5206C14.892 17.2912 15.5349 17.1794 16.1935 17.3352L17.61 17.6702C17.6269 17.6742 17.6447 17.6692 17.657 17.6569C17.6693 17.6446 17.6743 17.6268 17.6703 17.6099L17.3353 16.1933C17.1796 15.5347 17.2913 14.8918 17.5207 14.3548C17.7925 13.7186 18.2885 13.093 19.0359 12.7666L19.6834 12.4839C19.8757 12.3999 20 12.2099 20 12C20 11.7902 19.8757 11.6002 19.6834 11.5162L19.036 11.2335C18.2885 10.907 17.7925 10.2815 17.5207 9.64524C17.2913 9.1082 17.1796 8.46525 17.3353 7.80665L17.6703 6.39015C17.6743 6.37323 17.6693 6.35544 17.657 6.34314C17.6447 6.33085 17.6269 6.3258 17.61 6.3298L16.1935 6.66483C15.5349 6.82059 14.892 6.70885 14.3549 6.47944C13.7187 6.20765 13.0931 5.71164 12.7667 4.96415L12.4839 4.31663C12.3999 4.12431 12.21 4 12.0001 4ZM7.00015 12C7.00015 9.23862 9.23872 7.00004 12.0001 7.00004C14.7616 7.00004 17.0001 9.23862 17.0001 12C17.0001 14.7615 14.7616 17 12.0001 17C9.23872 17 7.00015 14.7615 7.00015 12ZM12.0001 9.00004C10.3433 9.00004 9.00015 10.3432 9.00015 12C9.00015 13.6569 10.3433 15 12.0001 15C13.657 15 15.0001 13.6569 15.0001 12C15.0001 10.3432 13.657 9.00004 12.0001 9.00004Z\" fill=\"black\"/></svg>",
   "share-android": "<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M14 4.5C14 2.567 15.567 1 17.5 1C19.433 1 21 2.567 21 4.5C21 6.433 19.433 8 17.5 8H15.4142L11.4142 12L15.4142 16H17.5C19.433 16 21 17.567 21 19.5C21 21.433 19.433 23 17.5 23C15.567 23 14 21.433 14 19.5V17.4142L10 13.4142L8.94975 14.4645C6.75415 16.6601 3 15.1051 3 12C3 8.89494 6.75415 7.33994 8.94975 9.53554L10 10.5858L14 6.58579V4.5ZM16 6H17.5C18.3284 6 19 5.32843 19 4.5C19 3.67157 18.3284 3 17.5 3C16.6716 3 16 3.67157 16 4.5V6ZM8.58579 12L7.53554 10.9498C6.59986 10.0141 5 10.6768 5 12C5 13.3232 6.59986 13.9859 7.53554 13.0502L8.58579 12ZM16 18V19.5C16 20.3284 16.6716 21 17.5 21C18.3284 21 19 20.3284 19 19.5C19 18.6716 18.3284 18 17.5 18H16Z\" fill=\"black\"/></svg>",
   "share": "<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M11.3753 2.21913C11.7405 1.92696 12.2595 1.92696 12.6247 2.21913L17.6247 6.21913C18.056 6.56414 18.1259 7.19343 17.7809 7.62469C17.4359 8.05596 16.8066 8.12588 16.3753 7.78087L13 5.08062V17C13 17.5523 12.5523 18 12 18C11.4477 18 11 17.5523 11 17V5.08062L7.62469 7.78087C7.19343 8.12588 6.56414 8.05596 6.21913 7.62469C5.87412 7.19343 5.94404 6.56414 6.3753 6.21913L11.3753 2.21913ZM3 13C3 11.3431 4.34315 10 6 10H8C8.55228 10 9 10.4477 9 11C9 11.5523 8.55228 12 8 12H6C5.44772 12 5 12.4477 5 13V19C5 19.5523 5.44771 20 6 20H18C18.5523 20 19 19.5523 19 19V13C19 12.4477 18.5523 12 18 12H16C15.4477 12 15 11.5523 15 11C15 10.4477 15.4477 10 16 10H18C19.6569 10 21 11.3431 21 13V19C21 20.6569 19.6569 22 18 22H6C4.34315 22 3 20.6569 3 19V13Z\" fill=\"black\"/></svg>",

package/umd/modules/@postnord/web-components/components/pn-illustration-grid.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { a as allIllustrations } from './illustrations.js';
 import { c as colors } from './colors.js';
 import { d as defineCustomElement$2 } from './pn-illustration2.js';
-const pnIllustrationGridCss = "#sb-addon-centered-wrapper{background-color:#f2f2f2}.sb-show-main{background-color:#f2f2f2}.illustration-grid{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:5rem auto;width:100%;display:grid;grid-template-columns:repeat(auto-fill, 19rem);grid-gap:5rem;max-width:120rem}.illustration-grid .illustration{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border-radius:2.5rem;background-color:#f2f2f2;-webkit-box-shadow:0px -6px 10px white, 0px 4px 15px rgba(0, 0, 0, 0.15);box-shadow:0px -6px 10px white, 0px 4px 15px rgba(0, 0, 0, 0.15);height:16rem;position:relative;cursor:pointer;overflow:hidden}.illustration-grid .illustration svg{height:8rem}.illustration-grid .illustration:after{content:\"\";position:absolute;left:0;top:0;width:100%;height:100%;z-index:2;-webkit-transition:all 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92);transition:all 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92)}.illustration-grid .illustration.active{-webkit-box-shadow:0 15px 20px rgba(0, 0, 0, 0.02);box-shadow:0 15px 20px rgba(0, 0, 0, 0.02)}.illustration-grid .illustration.active:after{-webkit-box-shadow:inset 0px -2px 5px white, inset 0px 2px 5px rgba(0, 0, 0, 0.15);box-shadow:inset 0px -2px 5px white, inset 0px 2px 5px rgba(0, 0, 0, 0.15)}.illustration-grid .illustration span{position:absolute;top:1.5rem;right:1.5rem;color:#5E554A;font-size:0.9em}.illustration-grid .illustration p{position:absolute;padding:0 0.5rem 1rem;text-align:center;bottom:0.5rem;font-size:0.9em;color:#5E554A;-webkit-transition:opacity 0.2s ease, -webkit-transform 0.3s ease-in-out;transition:opacity 0.2s ease, -webkit-transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out, opacity 0.2s ease;transition:transform 0.3s ease-in-out, opacity 0.2s ease, -webkit-transform 0.3s ease-in-out}.illustration-grid .illustration p.copy{-webkit-transform:translateY(3.5rem);transform:translateY(3.5rem);opacity:0}.illustration-grid .illustration:hover p.illustration-name{-webkit-transform:translateY(3.5rem);transform:translateY(3.5rem);opacity:0}.illustration-grid .illustration:hover p.copy{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}";
+const pnIllustrationGridCss = "#sb-addon-centered-wrapper{background-color:#f2f2f2}.sb-show-main{background-color:#f2f2f2}.illustration-grid{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:5rem auto;width:100%;display:grid;grid-template-columns:repeat(auto-fill, 19rem);grid-gap:5rem;max-width:120rem}.illustration-grid .illustration{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border-radius:2.5rem;background-color:#f2f2f2;-webkit-box-shadow:0px -6px 10px white, 0px 4px 15px rgba(0, 0, 0, 0.15);box-shadow:0px -6px 10px white, 0px 4px 15px rgba(0, 0, 0, 0.15);height:16rem;position:relative;cursor:pointer;overflow:hidden}.illustration-grid .illustration svg{height:8rem}.illustration-grid .illustration:after{content:\"\";position:absolute;left:0;top:0;width:100%;height:100%;z-index:2;-webkit-transition:all 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92);transition:all 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92)}.illustration-grid .illustration.active{-webkit-box-shadow:0 15px 20px rgba(0, 0, 0, 0.02);box-shadow:0 15px 20px rgba(0, 0, 0, 0.02)}.illustration-grid .illustration.active:after{-webkit-box-shadow:inset 0px -2px 5px white, inset 0px 2px 5px rgba(0, 0, 0, 0.15);box-shadow:inset 0px -2px 5px white, inset 0px 2px 5px rgba(0, 0, 0, 0.15)}.illustration-grid .illustration span{position:absolute;top:1.5rem;right:1.5rem;color:#5e554a;font-size:0.9em}.illustration-grid .illustration p{position:absolute;padding:0 0.5rem 1rem;text-align:center;bottom:0.5rem;font-size:0.9em;color:#5e554a;-webkit-transition:opacity 0.2s ease, -webkit-transform 0.3s ease-in-out;transition:opacity 0.2s ease, -webkit-transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out, opacity 0.2s ease;transition:transform 0.3s ease-in-out, opacity 0.2s ease, -webkit-transform 0.3s ease-in-out}.illustration-grid .illustration p.copy{-webkit-transform:translateY(3.5rem);transform:translateY(3.5rem);opacity:0}.illustration-grid .illustration:hover p.illustration-name{-webkit-transform:translateY(3.5rem);transform:translateY(3.5rem);opacity:0}.illustration-grid .illustration:hover p.copy{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}";
 const PnIllustrationGrid$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/umd/modules/@postnord/web-components/components/pn-input.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './pn-icon2.js';
-const pnInputCss = "pn-input{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column}pn-input input{padding:0.75em;font-size:1em;font-weight:500;-webkit-font-smoothing:antialiased;outline:none;border-radius:0.8rem;border:0.1rem solid #5E554A;-webkit-transition:border 0.15s, -webkit-box-shadow 0.15s;transition:border 0.15s, -webkit-box-shadow 0.15s;transition:box-shadow 0.15s, border 0.15s;transition:box-shadow 0.15s, border 0.15s, -webkit-box-shadow 0.15s;color:#000000;width:100%}pn-input input::-webkit-input-placeholder{color:#969087;font-weight:normal}pn-input input::-moz-placeholder{color:#969087;font-weight:normal}pn-input input:-ms-input-placeholder{color:#969087;font-weight:normal}pn-input input::-ms-input-placeholder{color:#969087;font-weight:normal}pn-input input::placeholder{color:#969087;font-weight:normal}pn-input input:focus{border:0.1rem solid #005D92;-webkit-box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005D92;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005D92}pn-input input:hover{border:0.1rem solid #00A0D6}pn-input input:disabled{background:#F3F2F2;border:none}pn-input>.input-container{position:relative}pn-input>.input-container>button{position:absolute;right:1.2rem;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);background:none;border:none;cursor:pointer;color:#005D92;padding:0.6rem;border-radius:0.8rem;outline:none;-webkit-transition:border 0.1s, background 0.2s, color 0.1s;transition:border 0.1s, background 0.2s, color 0.1s;border:0.1rem solid transparent}pn-input>.input-container>button:focus{border:0.1rem solid #005D92}pn-input>.input-container>button:hover{background:#E0F8FF}pn-input>.input-container>button:active{background:#005D92;color:white}pn-input>.input-container>svg{position:absolute;right:0.75em;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);height:1.5em;width:1.5em;pointer-events:none}pn-input>.input-container>svg polyline{stroke-linecap:round;-webkit-transition:stroke-dashoffset 0.2s cubic-bezier(0.79, 0.14, 0.15, 0.86);transition:stroke-dashoffset 0.2s cubic-bezier(0.79, 0.14, 0.15, 0.86)}pn-input>.input-container>svg.pn-input-checkmark polyline{stroke:#005E41;stroke-dashoffset:23;stroke-dasharray:23}pn-input .label-container{margin-bottom:0.4rem;color:#5E554A;font-size:0.875em;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:end;align-items:flex-end}pn-input .label-container label{cursor:pointer;-webkit-transition:color 0.2s;transition:color 0.2s}.label-container label.char-count{-ms-flex-negative:0;flex-shrink:0;padding-left:0.5em}pn-input small{font-size:0.75em;font-size:max(.6em, 1.2rem);-webkit-transition:-webkit-transform 0.2s cubic-bezier(0.79, 0.14, 0.15, 0.86);transition:-webkit-transform 0.2s cubic-bezier(0.79, 0.14, 0.15, 0.86);transition:transform 0.2s cubic-bezier(0.79, 0.14, 0.15, 0.86);transition:transform 0.2s cubic-bezier(0.79, 0.14, 0.15, 0.86), -webkit-transform 0.2s cubic-bezier(0.79, 0.14, 0.15, 0.86);margin-top:0.5em;color:#5E554A}pn-input.error{color:#A70707}pn-input.error label{color:#A70707}pn-input.error small{color:#A70707}pn-input.error small>pn-icon{margin-right:0.25em}pn-input.error input{border:0.1rem solid #A70707}pn-input.error input:focus{border:0.1rem solid #A70707;-webkit-box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #A70707;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #A70707}pn-input.error input:hover{border:0.1rem solid #F06365}pn-input.valid{color:#005E41}pn-input.valid .input-container>svg.pn-input-checkmark polyline{stroke-dashoffset:0}pn-input.valid label{color:#005E41}pn-input.valid input{border:0.1rem solid #005E41}pn-input.valid input:focus{border:0.1rem solid #005E41;-webkit-box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005E41;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005E41}pn-input.valid input:hover{border:0.1rem solid #5EC584}pn-input.password input{padding-right:4em}pn-input.icon input{padding-right:2.3em}";
+const pnInputCss = "pn-input{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column}pn-input input{padding:0.75em;font-size:1em;font-weight:500;-webkit-font-smoothing:antialiased;outline:none;border-radius:0.8rem;border:0.1rem solid #5e554a;-webkit-transition:border 0.15s, -webkit-box-shadow 0.15s;transition:border 0.15s, -webkit-box-shadow 0.15s;transition:box-shadow 0.15s, border 0.15s;transition:box-shadow 0.15s, border 0.15s, -webkit-box-shadow 0.15s;color:#000000;width:100%}pn-input input::-webkit-input-placeholder{color:#969087;font-weight:normal}pn-input input::-moz-placeholder{color:#969087;font-weight:normal}pn-input input:-ms-input-placeholder{color:#969087;font-weight:normal}pn-input input::-ms-input-placeholder{color:#969087;font-weight:normal}pn-input input::placeholder{color:#969087;font-weight:normal}pn-input input:focus{border:0.1rem solid #005d92;-webkit-box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005d92;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005d92}pn-input input:hover{border:0.1rem solid #00a0d6}pn-input input:disabled{background:#f3f2f2;border:none}pn-input>.input-container{position:relative}pn-input>.input-container>button{position:absolute;right:1.2rem;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);background:none;border:none;cursor:pointer;color:#005d92;padding:0.6rem;border-radius:0.8rem;outline:none;-webkit-transition:border 0.1s, background 0.2s, color 0.1s;transition:border 0.1s, background 0.2s, color 0.1s;border:0.1rem solid transparent}pn-input>.input-container>button:focus{border:0.1rem solid #005d92}pn-input>.input-container>button:hover{background:#e0f8ff}pn-input>.input-container>button:active{background:#005d92;color:white}pn-input>.input-container>svg{position:absolute;right:0.75em;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);height:1.5em;width:1.5em;pointer-events:none}pn-input>.input-container>svg polyline{stroke-linecap:round;-webkit-transition:stroke-dashoffset 0.2s cubic-bezier(0.79, 0.14, 0.15, 0.86);transition:stroke-dashoffset 0.2s cubic-bezier(0.79, 0.14, 0.15, 0.86)}pn-input>.input-container>svg.pn-input-checkmark polyline{stroke:#005e41;stroke-dashoffset:23;stroke-dasharray:23}pn-input .label-container{margin-bottom:0.4rem;color:#5e554a;font-size:0.875em;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:end;align-items:flex-end}pn-input .label-container label{cursor:pointer;-webkit-transition:color 0.2s;transition:color 0.2s}.label-container label.char-count{-ms-flex-negative:0;flex-shrink:0;padding-left:0.5em}pn-input small{font-size:0.75em;font-size:max(.6em, 1.2rem);-webkit-transition:-webkit-transform 0.2s cubic-bezier(0.79, 0.14, 0.15, 0.86);transition:-webkit-transform 0.2s cubic-bezier(0.79, 0.14, 0.15, 0.86);transition:transform 0.2s cubic-bezier(0.79, 0.14, 0.15, 0.86);transition:transform 0.2s cubic-bezier(0.79, 0.14, 0.15, 0.86), -webkit-transform 0.2s cubic-bezier(0.79, 0.14, 0.15, 0.86);margin-top:0.5em;color:#5e554a}pn-input.error{color:#a70707}pn-input.error label{color:#a70707}pn-input.error small{color:#a70707}pn-input.error small>pn-icon{margin-right:0.25em}pn-input.error input{border:0.1rem solid #a70707}pn-input.error input:focus{border:0.1rem solid #a70707;-webkit-box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #a70707;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #a70707}pn-input.error input:hover{border:0.1rem solid #f06365}pn-input.valid{color:#005e41}pn-input.valid .input-container>svg.pn-input-checkmark polyline{stroke-dashoffset:0}pn-input.valid label{color:#005e41}pn-input.valid input{border:0.1rem solid #005e41}pn-input.valid input:focus{border:0.1rem solid #005e41;-webkit-box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005e41;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005e41}pn-input.valid input:hover{border:0.1rem solid #5ec584}pn-input.password input{padding-right:4em}pn-input.icon input{padding-right:2.3em}";
 const Pninput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -28,6 +28,7 @@ const Pninput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.maxlength = '';
     this.min = null;
     this.max = null;
+    this.ariaLabel = null;
     this.showText = false;
   }
   getTextMessage() {
@@ -62,7 +63,7 @@ const Pninput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return classNames;
   }
   render() {
-    return (h(Host, { class: this.getClassNames() }, (this.label || this.maxlength) && (h("div", { class: "label-container" }, this.label && h("label", { htmlFor: this.inputid }, this.label), parseInt(this.maxlength) > 0 && (h("label", { class: "char-count", htmlFor: this.inputid }, `${this.value.length}/${this.maxlength}`)))), h("div", { class: "input-container" }, h("input", { type: this.getInputType(), value: this.value, id: this.inputid, name: this.name, placeholder: this.placeholder, disabled: this.disabled, autocomplete: this.autocomplete, onInput: (e) => this.setVal(e), maxlength: this.maxlength, min: this.min, max: this.max }), h("svg", { class: "pn-input-checkmark", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, h("polyline", { class: "checkmark-path", points: "4,12 9,17 20,6", "stroke-width": "3" })), this.type === 'password' && !this.disabled && (h("button", { onClick: () => this.toggleTextVisibility() }, "Show"))), this.getTextMessage() && (h("small", null, this.error && h("pn-icon", { symbol: "alert-exclamation-circle", small: true, color: "warning" }), this.getTextMessage()))));
+    return (h(Host, { class: this.getClassNames() }, (this.label || this.maxlength) && (h("div", { class: "label-container" }, this.label && h("label", { htmlFor: this.inputid }, this.label), parseInt(this.maxlength) > 0 && (h("label", { class: "char-count", htmlFor: this.inputid }, `${this.value.length}/${this.maxlength}`)))), h("div", { class: "input-container" }, h("input", { type: this.getInputType(), value: this.value, id: this.inputid, name: this.name, placeholder: this.placeholder, disabled: this.disabled, autocomplete: this.autocomplete, onInput: e => this.setVal(e), maxlength: this.maxlength, min: this.min, max: this.max, "aria-lavel": this.ariaLabel }), h("svg", { class: "pn-input-checkmark", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, h("polyline", { class: "checkmark-path", points: "4,12 9,17 20,6", "stroke-width": "3" })), this.type === 'password' && !this.disabled && (h("button", { onClick: () => this.toggleTextVisibility() }, "Show"))), this.getTextMessage() && (h("small", null, this.error && h("pn-icon", { symbol: "alert-exclamation-circle", small: true, color: "warning" }), this.getTextMessage()))));
   }
   static get style() { return pnInputCss; }
 }, [0, "pn-input", {
@@ -82,6 +83,7 @@ const Pninput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "maxlength": [1],
     "min": [2],
     "max": [2],
+    "ariaLabel": [1, "aria-label"],
     "showText": [32]
   }]);
 function defineCustomElement$1() {

package/umd/modules/@postnord/web-components/components/pn-modal.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './pn-icon2.js';
-const pnModalCss = "pn-modal .pn-modal{position:fixed;bottom:50%;left:50%;width:95%;max-width:45em;max-height:85vh;border:0.1rem solid #F3F2F2;border-radius:0.8rem;-webkit-transform:translate(-50%, 60%);transform:translate(-50%, 60%);-webkit-box-shadow:0px 4.8px 14.4px rgba(0, 0, 0, 0.18), 0px 25.6px 57.6px rgba(0, 0, 0, 0.22);box-shadow:0px 4.8px 14.4px rgba(0, 0, 0, 0.18), 0px 25.6px 57.6px rgba(0, 0, 0, 0.22);background:#FFFFFF;z-index:999;-webkit-transition:none;transition:none;pointer-events:none;opacity:0;visibility:hidden;overflow-y:auto;-webkit-transition:visibility 0s linear 0.55s, opacity 0.25s 0.15s, -webkit-transform 0.55s cubic-bezier(0.7, 0, 0.3, 1);transition:visibility 0s linear 0.55s, opacity 0.25s 0.15s, -webkit-transform 0.55s cubic-bezier(0.7, 0, 0.3, 1);transition:visibility 0s linear 0.55s, opacity 0.25s 0.15s, transform 0.55s cubic-bezier(0.7, 0, 0.3, 1);transition:visibility 0s linear 0.55s, opacity 0.25s 0.15s, transform 0.55s cubic-bezier(0.7, 0, 0.3, 1), -webkit-transform 0.55s cubic-bezier(0.7, 0, 0.3, 1)}pn-modal[data-open] .pn-modal{visibility:visible;opacity:1;pointer-events:auto;-webkit-transition:visibility 0s linear 0s, opacity 0.55s, -webkit-transform 0.55s cubic-bezier(0.7, 0, 0.3, 1);transition:visibility 0s linear 0s, opacity 0.55s, -webkit-transform 0.55s cubic-bezier(0.7, 0, 0.3, 1);transition:visibility 0s linear 0s, opacity 0.55s, transform 0.55s cubic-bezier(0.7, 0, 0.3, 1);transition:visibility 0s linear 0s, opacity 0.55s, transform 0.55s cubic-bezier(0.7, 0, 0.3, 1), -webkit-transform 0.55s cubic-bezier(0.7, 0, 0.3, 1);-webkit-transform:translate(-50%, 50%);transform:translate(-50%, 50%)}.pn-modal>.pn-modal-content{width:100%;padding:1.5em}.pn-modal>.pn-modal-close-button{position:absolute;right:1em;top:1em;outline:none;border:none;border-radius:50%;padding:0.3em;-webkit-transition:background 0.15s, -webkit-box-shadow 0.15s;transition:background 0.15s, -webkit-box-shadow 0.15s;transition:box-shadow 0.15s, background 0.15s;transition:box-shadow 0.15s, background 0.15s, -webkit-box-shadow 0.15s;cursor:pointer;background:#FFFFFF}.pn-modal>.pn-modal-close-button svg path{-webkit-transition:fill 0.15s;transition:fill 0.15s;pointer-events:none}.pn-modal>.pn-modal-close-button:hover,.pn-modal>.pn-modal-close-button:focus{background:#E0F8FF}.pn-modal>.pn-modal-close-button:focus{-webkit-box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005D92;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005D92}.pn-modal>.pn-modal-close-button:active{background:#0D234B}.pn-modal>.pn-modal-close-button:active svg path{fill:#FFFFFF}pn-modal .pn-modal>[slot=buttons]{position:static;width:100%;background:white;border-top:0.1rem solid #D3CECB;padding:0.5em 1em;display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-wrap:wrap-reverse;flex-wrap:wrap-reverse}pn-modal .pn-modal>[slot=buttons]>*{margin:0.5em}pn-modal>.pn-modal-backdrop{position:fixed;width:120vw;height:120vh;top:-10vh;left:-10vw;background:#2D2013;opacity:0;z-index:9;visibility:hidden;-webkit-transition:visibility 0s linear 0.3s, opacity 0.3s;transition:visibility 0s linear 0.3s, opacity 0.3s}pn-modal[data-open] .pn-modal-backdrop{opacity:0.65;visibility:visible;-webkit-transition:visibility 0s linear 0s, opacity 0.3s;transition:visibility 0s linear 0s, opacity 0.3s}@media screen and (max-width: 30em){pn-modal .pn-modal{width:100%;max-height:95vh;bottom:0;-webkit-transform:translate(-50%, 10%);transform:translate(-50%, 10%);border-radius:0.8rem 0.8rem 0 0}pn-modal[data-open] .pn-modal{-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0)}pn-modal .pn-modal>[slot=buttons]{-ms-flex-pack:center;justify-content:center}pn-modal .pn-modal>[slot=buttons]>*{-ms-flex:1 0 auto;flex:1 0 auto}}@supports ((position: -webkit-sticky) or (position: sticky)){pn-modal .pn-modal>[slot=buttons]{position:-webkit-sticky;position:sticky;bottom:0;left:0;z-index:2}pn-modal .pn-modal>.pn-modal-close-button{position:-webkit-sticky;position:sticky;display:block;left:100%;margin:1em 1em 0 0;z-index:10}pn-modal .pn-modal>.pn-modal-content{margin-top:-3em}}";
+const pnModalCss = "pn-modal .pn-modal{position:fixed;bottom:50%;left:50%;width:95%;max-width:45em;max-height:85vh;border:0.1rem solid #f3f2f2;border-radius:0.8rem;-webkit-transform:translate(-50%, 60%);transform:translate(-50%, 60%);-webkit-box-shadow:0px 4.8px 14.4px rgba(0, 0, 0, 0.18), 0px 25.6px 57.6px rgba(0, 0, 0, 0.22);box-shadow:0px 4.8px 14.4px rgba(0, 0, 0, 0.18), 0px 25.6px 57.6px rgba(0, 0, 0, 0.22);background:#ffffff;z-index:999;-webkit-transition:none;transition:none;pointer-events:none;opacity:0;visibility:hidden;overflow-y:auto;-webkit-transition:visibility 0s linear 0.55s, opacity 0.25s 0.15s, -webkit-transform 0.55s cubic-bezier(0.7, 0, 0.3, 1);transition:visibility 0s linear 0.55s, opacity 0.25s 0.15s, -webkit-transform 0.55s cubic-bezier(0.7, 0, 0.3, 1);transition:visibility 0s linear 0.55s, opacity 0.25s 0.15s, transform 0.55s cubic-bezier(0.7, 0, 0.3, 1);transition:visibility 0s linear 0.55s, opacity 0.25s 0.15s, transform 0.55s cubic-bezier(0.7, 0, 0.3, 1), -webkit-transform 0.55s cubic-bezier(0.7, 0, 0.3, 1)}pn-modal[data-open] .pn-modal{visibility:visible;opacity:1;pointer-events:auto;-webkit-transition:visibility 0s linear 0s, opacity 0.55s, -webkit-transform 0.55s cubic-bezier(0.7, 0, 0.3, 1);transition:visibility 0s linear 0s, opacity 0.55s, -webkit-transform 0.55s cubic-bezier(0.7, 0, 0.3, 1);transition:visibility 0s linear 0s, opacity 0.55s, transform 0.55s cubic-bezier(0.7, 0, 0.3, 1);transition:visibility 0s linear 0s, opacity 0.55s, transform 0.55s cubic-bezier(0.7, 0, 0.3, 1), -webkit-transform 0.55s cubic-bezier(0.7, 0, 0.3, 1);-webkit-transform:translate(-50%, 50%);transform:translate(-50%, 50%)}.pn-modal>.pn-modal-content{width:100%;padding:1.5em}.pn-modal>.pn-modal-close-button{position:absolute;right:1em;top:1em;outline:none;border:none;border-radius:50%;padding:0.3em;-webkit-transition:background 0.15s, -webkit-box-shadow 0.15s;transition:background 0.15s, -webkit-box-shadow 0.15s;transition:box-shadow 0.15s, background 0.15s;transition:box-shadow 0.15s, background 0.15s, -webkit-box-shadow 0.15s;cursor:pointer;background:#ffffff}.pn-modal>.pn-modal-close-button svg path{-webkit-transition:fill 0.15s;transition:fill 0.15s;pointer-events:none}.pn-modal>.pn-modal-close-button:hover,.pn-modal>.pn-modal-close-button:focus{background:#e0f8ff}.pn-modal>.pn-modal-close-button:focus{-webkit-box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005d92;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005d92}.pn-modal>.pn-modal-close-button:active{background:#0d234b}.pn-modal>.pn-modal-close-button:active svg path{fill:#ffffff}pn-modal .pn-modal>[slot=buttons]{position:static;width:100%;background:white;border-top:0.1rem solid #d3cecb;padding:0.5em 1em;display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-wrap:wrap-reverse;flex-wrap:wrap-reverse}pn-modal .pn-modal>[slot=buttons]>*{margin:0.5em}pn-modal>.pn-modal-backdrop{position:fixed;width:120vw;height:120vh;top:-10vh;left:-10vw;background:#2d2013;opacity:0;z-index:9;visibility:hidden;-webkit-transition:visibility 0s linear 0.3s, opacity 0.3s;transition:visibility 0s linear 0.3s, opacity 0.3s}pn-modal[data-open] .pn-modal-backdrop{opacity:0.65;visibility:visible;-webkit-transition:visibility 0s linear 0s, opacity 0.3s;transition:visibility 0s linear 0s, opacity 0.3s}@media screen and (max-width: 30em){pn-modal .pn-modal{width:100%;max-height:95vh;bottom:0;-webkit-transform:translate(-50%, 10%);transform:translate(-50%, 10%);border-radius:0.8rem 0.8rem 0 0}pn-modal[data-open] .pn-modal{-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0)}pn-modal .pn-modal>[slot=buttons]{-ms-flex-pack:center;justify-content:center}pn-modal .pn-modal>[slot=buttons]>*{-ms-flex:1 0 auto;flex:1 0 auto}}@supports ((position: -webkit-sticky) or (position: sticky)){pn-modal .pn-modal>[slot=buttons]{position:-webkit-sticky;position:sticky;bottom:0;left:0;z-index:2}pn-modal .pn-modal>.pn-modal-close-button{position:-webkit-sticky;position:sticky;display:block;left:100%;margin:1em 1em 0 0;z-index:10}pn-modal .pn-modal>.pn-modal-content{margin-top:-3em}}";
 const PnModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/umd/modules/@postnord/web-components/components/pn-nav-dropdown.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './pn-icon2.js';
-const pnNavDropdownCss = "pn-nav-dropdown{display:inline-block;position:relative}pn-nav-dropdown>button{background:none;outline:none;border-radius:0.8rem;border:none;cursor:pointer;padding:0.25em;font-size:1em;-webkit-transition:background 0.15s, -webkit-box-shadow 0.15s;transition:background 0.15s, -webkit-box-shadow 0.15s;transition:box-shadow 0.15s, background 0.15s;transition:box-shadow 0.15s, background 0.15s, -webkit-box-shadow 0.15s;position:relative;overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;color:#005D92;font-weight:normal}pn-nav-dropdown>button:focus{-webkit-box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005D92;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005D92}pn-nav-dropdown>button:hover,pn-nav-dropdown>button:focus{background:#EFFBFF}.pn-nav-dropdown-label>pn-icon{margin-left:0.4em}.nav-dropdown-content-container{position:absolute;top:130%;left:0;border-radius:1em;-webkit-box-shadow:0 0.2rem 1.6rem rgba(0, 0, 0, 0.2);box-shadow:0 0.2rem 1.6rem rgba(0, 0, 0, 0.2);-webkit-transform-origin:top left;transform-origin:top left;-webkit-transition:-webkit-transform 0.2s cubic-bezier(0.6, 0, 0.4, 1) 0.15s;transition:-webkit-transform 0.2s cubic-bezier(0.6, 0, 0.4, 1) 0.15s;transition:transform 0.2s cubic-bezier(0.6, 0, 0.4, 1) 0.15s;transition:transform 0.2s cubic-bezier(0.6, 0, 0.4, 1) 0.15s, -webkit-transform 0.2s cubic-bezier(0.6, 0, 0.4, 1) 0.15s;-webkit-transform:scale(0);transform:scale(0);overflow-y:auto;max-width:95vw;max-width:min(95vw, 40em);max-height:80vh;z-index:10;background:#FFFFFF}pn-nav-dropdown.nav-dropdown-right .nav-dropdown-content-container{left:unset;right:0;-webkit-transform-origin:top right;transform-origin:top right}.nav-dropdown-content{padding:1em;opacity:0;-webkit-transition:opacity 0.1s cubic-bezier(0.6, 0, 0.4, 1);transition:opacity 0.1s cubic-bezier(0.6, 0, 0.4, 1);-webkit-transition-delay:0s;transition-delay:0s;position:relative;width:-webkit-max-content;width:-moz-max-content;width:max-content;max-width:100%}pn-nav-dropdown[data-open=true] .nav-dropdown-content-container{-webkit-transition-delay:0s;transition-delay:0s}pn-nav-dropdown[data-open=true] .nav-dropdown-content{-webkit-transition-delay:0.3s;transition-delay:0.3s;-webkit-transition-duration:0.18s;transition-duration:0.18s;opacity:1}pn-nav-dropdown .pn-ripple{-webkit-animation:ripple 0.4s cubic-bezier(0.6, 0, 0.4, 1);animation:ripple 0.4s cubic-bezier(0.6, 0, 0.4, 1);position:absolute;border-radius:50%;background:#005D92;-webkit-transform:translate(-50%, -50%) scale(0);transform:translate(-50%, -50%) scale(0);opacity:0.1;pointer-events:none;z-index:3}@-webkit-keyframes ripple{to{-webkit-transform:translate(-50%, -50%) scale(1);transform:translate(-50%, -50%) scale(1);opacity:0}}@keyframes ripple{to{-webkit-transform:translate(-50%, -50%) scale(1);transform:translate(-50%, -50%) scale(1);opacity:0}}";
+const pnNavDropdownCss = "pn-nav-dropdown{display:inline-block;position:relative}pn-nav-dropdown>button{background:none;outline:none;border-radius:0.8rem;border:none;cursor:pointer;padding:0.25em;font-size:1em;-webkit-transition:background 0.15s, -webkit-box-shadow 0.15s;transition:background 0.15s, -webkit-box-shadow 0.15s;transition:box-shadow 0.15s, background 0.15s;transition:box-shadow 0.15s, background 0.15s, -webkit-box-shadow 0.15s;position:relative;overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;color:#005d92;font-weight:normal}pn-nav-dropdown>button:focus{-webkit-box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005d92;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005d92}pn-nav-dropdown>button:hover,pn-nav-dropdown>button:focus{background:#effbff}.pn-nav-dropdown-label>pn-icon{margin-left:0.4em}.nav-dropdown-content-container{position:absolute;top:130%;left:0;border-radius:1em;-webkit-box-shadow:0 0.2rem 1.6rem rgba(0, 0, 0, 0.2);box-shadow:0 0.2rem 1.6rem rgba(0, 0, 0, 0.2);-webkit-transform-origin:top left;transform-origin:top left;-webkit-transition:-webkit-transform 0.2s cubic-bezier(0.6, 0, 0.4, 1) 0.15s;transition:-webkit-transform 0.2s cubic-bezier(0.6, 0, 0.4, 1) 0.15s;transition:transform 0.2s cubic-bezier(0.6, 0, 0.4, 1) 0.15s;transition:transform 0.2s cubic-bezier(0.6, 0, 0.4, 1) 0.15s, -webkit-transform 0.2s cubic-bezier(0.6, 0, 0.4, 1) 0.15s;-webkit-transform:scale(0);transform:scale(0);overflow-y:auto;max-width:95vw;max-width:min(95vw, 40em);max-height:80vh;z-index:10;background:#ffffff}pn-nav-dropdown.nav-dropdown-right .nav-dropdown-content-container{left:unset;right:0;-webkit-transform-origin:top right;transform-origin:top right}.nav-dropdown-content{padding:1em;opacity:0;-webkit-transition:opacity 0.1s cubic-bezier(0.6, 0, 0.4, 1);transition:opacity 0.1s cubic-bezier(0.6, 0, 0.4, 1);-webkit-transition-delay:0s;transition-delay:0s;position:relative;width:-webkit-max-content;width:-moz-max-content;width:max-content;max-width:100%}pn-nav-dropdown[data-open=true] .nav-dropdown-content-container{-webkit-transition-delay:0s;transition-delay:0s}pn-nav-dropdown[data-open=true] .nav-dropdown-content{-webkit-transition-delay:0.3s;transition-delay:0.3s;-webkit-transition-duration:0.18s;transition-duration:0.18s;opacity:1}pn-nav-dropdown .pn-ripple{-webkit-animation:ripple 0.4s cubic-bezier(0.6, 0, 0.4, 1);animation:ripple 0.4s cubic-bezier(0.6, 0, 0.4, 1);position:absolute;border-radius:50%;background:#005d92;-webkit-transform:translate(-50%, -50%) scale(0);transform:translate(-50%, -50%) scale(0);opacity:0.1;pointer-events:none;z-index:3}@-webkit-keyframes ripple{to{-webkit-transform:translate(-50%, -50%) scale(1);transform:translate(-50%, -50%) scale(1);opacity:0}}@keyframes ripple{to{-webkit-transform:translate(-50%, -50%) scale(1);transform:translate(-50%, -50%) scale(1);opacity:0}}";
 const PnnavDropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/umd/modules/@postnord/web-components/components/pn-ocr-search.js CHANGED Viewed

@@ -63,7 +63,7 @@ const translations = {
   },
 };
-const pnOcrSearchCss = "pn-ocr-search .bold{font-weight:700}pn-ocr-search .search-results,pn-ocr-search .error-text-container{padding:1em 0.5em}pn-ocr-search .invalid-text-container{padding:0.5em 1em}pn-ocr-search .invalid-text-container .invalid-ocr{color:#A70707}";
+const pnOcrSearchCss = "pn-ocr-search .bold{font-weight:700}pn-ocr-search .search-results,pn-ocr-search .error-text-container{padding:1em 0.5em}pn-ocr-search .invalid-text-container{padding:0.5em 1em}pn-ocr-search .invalid-text-container .invalid-ocr{color:#a70707}";
 const PnOcrSearch$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/umd/modules/@postnord/web-components/components/pn-option2.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$1 } from './pn-checkbox2.js';
-const pnOptionCss = "pn-option{outline:none;background:#fff;color:black;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;overflow-wrap:break-word}pn-option .pn-option-content{max-width:100%}pn-option pn-checkbox{margin-right:0.5em}pn-option:hover,pn-option:focus{background-color:#E0F8FF}pn-option:focus{-webkit-box-shadow:0 0.1rem 0 0 #005D92, 0 -0.1rem 0 0 #005D92;box-shadow:0 0.1rem 0 0 #005D92, 0 -0.1rem 0 0 #005D92}";
+const pnOptionCss = "pn-option{outline:none;background:#fff;color:black;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;overflow-wrap:break-word}pn-option .pn-option-content{max-width:100%}pn-option pn-checkbox{margin-right:0.5em}pn-option:hover,pn-option:focus{background-color:#e0f8ff}pn-option:focus{-webkit-box-shadow:0 0.1rem 0 0 #005d92, 0 -0.1rem 0 0 #005d92;box-shadow:0 0.1rem 0 0 #005d92, 0 -0.1rem 0 0 #005d92}";
 const PnOption = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/umd/modules/@postnord/web-components/components/pn-page-nav-dropdown-item.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './pn-icon2.js';
-const pnPageNavDropdownItemCss = "pn-page-nav-dropdown-item:first-of-type li>a,pn-page-nav-dropdown-item:first-of-type li>button{border-radius:0.5em 0.5em 0 0}pn-page-nav-dropdown-item:last-of-type li>a,pn-page-nav-dropdown-item:last-of-type li>button{border-radius:0 0 0.5em 0.5em}pn-page-nav-dropdown-item:last-of-type li>hr{display:none}pn-page-nav-dropdown-item li{font-size:inherit}pn-page-nav-dropdown-item li>*{color:#FFFFFF;font-size:inherit;border:none;padding:1em;margin:0;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;cursor:pointer;-webkit-transition:background 0.15s;transition:background 0.15s;outline:none;width:100%;font-weight:500}pn-page-nav-dropdown-item li>*>pn-icon{margin-left:1em}pn-page-nav-dropdown-item li>*.pn-page-nav-dropdown-item-active{background:#005D92}pn-page-nav-dropdown-item li>*.pn-page-nav-dropdown-item-active:hover,pn-page-nav-dropdown-item li>*.pn-page-nav-dropdown-item-active:focus{background:#0068a6}pn-page-nav-dropdown-item li>*:hover,pn-page-nav-dropdown-item li>*:focus{background:#263d64}pn-page-nav-dropdown-item li>*:focus{-webkit-box-shadow:inset 0 0 0 0.1em #005D92, inset 0 0 0 0.2em #D3CECB;box-shadow:inset 0 0 0 0.1em #005D92, inset 0 0 0 0.2em #D3CECB}pn-page-nav-dropdown-item li>a{text-decoration:none}pn-page-nav-dropdown-item li>button{background:none}pn-page-nav-dropdown-item li>hr{bottom:0;padding:0;margin:0 auto;border-top:0.1em solid #D3CECB;opacity:0.6;width:85%}";
+const pnPageNavDropdownItemCss = "pn-page-nav-dropdown-item:first-of-type li>a,pn-page-nav-dropdown-item:first-of-type li>button{border-radius:0.5em 0.5em 0 0}pn-page-nav-dropdown-item:last-of-type li>a,pn-page-nav-dropdown-item:last-of-type li>button{border-radius:0 0 0.5em 0.5em}pn-page-nav-dropdown-item:last-of-type li>hr{display:none}pn-page-nav-dropdown-item li{font-size:inherit}pn-page-nav-dropdown-item li>*{color:#ffffff;font-size:inherit;border:none;padding:1em;margin:0;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;cursor:pointer;-webkit-transition:background 0.15s;transition:background 0.15s;outline:none;width:100%;font-weight:500}pn-page-nav-dropdown-item li>*>pn-icon{margin-left:1em}pn-page-nav-dropdown-item li>*.pn-page-nav-dropdown-item-active{background:#005d92}pn-page-nav-dropdown-item li>*.pn-page-nav-dropdown-item-active:hover,pn-page-nav-dropdown-item li>*.pn-page-nav-dropdown-item-active:focus{background:#0068a6}pn-page-nav-dropdown-item li>*:hover,pn-page-nav-dropdown-item li>*:focus{background:#263d64}pn-page-nav-dropdown-item li>*:focus{-webkit-box-shadow:inset 0 0 0 0.1em #005d92, inset 0 0 0 0.2em #d3cecb;box-shadow:inset 0 0 0 0.1em #005d92, inset 0 0 0 0.2em #d3cecb}pn-page-nav-dropdown-item li>a{text-decoration:none}pn-page-nav-dropdown-item li>button{background:none}pn-page-nav-dropdown-item li>hr{bottom:0;padding:0;margin:0 auto;border-top:0.1em solid #d3cecb;opacity:0.6;width:85%}";
 const PnPageNavDropdownItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/umd/modules/@postnord/web-components/components/pn-page-nav-item.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './pn-icon2.js';
-const pnPageNavItemCss = "pn-page-nav-item{position:relative;color:#FFFFFF;margin-right:0.5em;z-index:2;white-space:nowrap;scroll-snap-align:center;outline:none;-webkit-tap-highlight-color:transparent;-webkit-transform:translateZ(0);transform:translateZ(0)}pn-page-nav-item:last-of-type{margin-right:0}pn-page-nav-item a{text-decoration:none;color:white;height:100%;width:100%;padding:0.5em;font-weight:500;border-radius:3em;border:0.1rem solid transparent;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;cursor:pointer;outline:none;-webkit-transition:-webkit-box-shadow 0.15s;transition:-webkit-box-shadow 0.15s;transition:box-shadow 0.15s;transition:box-shadow 0.15s, -webkit-box-shadow 0.15s}pn-page-nav-item a:focus{-webkit-box-shadow:0 0 0 0.1em #D3CECB;box-shadow:0 0 0 0.1em #D3CECB}pn-page-nav-item a>pn-icon{margin-right:0.5em}";
+const pnPageNavItemCss = "pn-page-nav-item{position:relative;color:#ffffff;margin-right:0.5em;z-index:2;white-space:nowrap;scroll-snap-align:center;outline:none;-webkit-tap-highlight-color:transparent;-webkit-transform:translateZ(0);transform:translateZ(0)}pn-page-nav-item:last-of-type{margin-right:0}pn-page-nav-item a{text-decoration:none;color:white;height:100%;width:100%;padding:0.5em;font-weight:500;border-radius:3em;border:0.1rem solid transparent;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;cursor:pointer;outline:none;-webkit-transition:-webkit-box-shadow 0.15s;transition:-webkit-box-shadow 0.15s;transition:box-shadow 0.15s;transition:box-shadow 0.15s, -webkit-box-shadow 0.15s}pn-page-nav-item a:focus{-webkit-box-shadow:0 0 0 0.1em #d3cecb;box-shadow:0 0 0 0.1em #d3cecb}pn-page-nav-item a>pn-icon{margin-right:0.5em}";
 const PnPageNavItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/umd/modules/@postnord/web-components/components/pn-page-nav.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './pn-icon2.js';
-const pnPageNavCss = "pn-page-nav{display:block;position:relative;font-size:clamp(0.8em, 2vw, 1em)}.pn-page-nav-wrapper{-webkit-transform:translateZ(0);transform:translateZ(0);font-size:inherit;max-width:100%;overflow:hidden;position:relative;display:-ms-inline-flexbox;display:inline-flex;border-radius:3em}.pn-page-nav{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;border-radius:3em;min-height:3em;background:#0D234B;border:0.1em solid #D3CECB;position:relative;overflow-x:auto;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory}.pn-page-nav::-webkit-scrollbar{display:none}.pn-page-nav ul.pn-page-nav-items{display:-ms-flexbox;display:flex;list-style-type:none;padding:0.25em;margin:0;position:relative}.pn-page-nav-items>.pn-pn-bg{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);will-change:transform;left:0;border-radius:3em;-webkit-transition:width 0.25s cubic-bezier(0.29, 0.15, 0.24, 0.97), background 0.15s, opacity 0.15s, -webkit-transform 0.25s cubic-bezier(0.29, 0.15, 0.24, 0.97), -webkit-box-shadow 0.15s;transition:width 0.25s cubic-bezier(0.29, 0.15, 0.24, 0.97), background 0.15s, opacity 0.15s, -webkit-transform 0.25s cubic-bezier(0.29, 0.15, 0.24, 0.97), -webkit-box-shadow 0.15s;transition:width 0.25s cubic-bezier(0.29, 0.15, 0.24, 0.97), transform 0.25s cubic-bezier(0.29, 0.15, 0.24, 0.97), background 0.15s, opacity 0.15s, box-shadow 0.15s;transition:width 0.25s cubic-bezier(0.29, 0.15, 0.24, 0.97), transform 0.25s cubic-bezier(0.29, 0.15, 0.24, 0.97), background 0.15s, opacity 0.15s, box-shadow 0.15s, -webkit-transform 0.25s cubic-bezier(0.29, 0.15, 0.24, 0.97), -webkit-box-shadow 0.15s}.pn-page-nav-items>.pn-pn-bg.pn-pn-active{-webkit-box-shadow:0px 0.3px 0.9px rgba(0, 0, 0, 0.1), 0px 1.6px 3.6px rgba(0, 0, 0, 0.13);box-shadow:0px 0.3px 0.9px rgba(0, 0, 0, 0.1), 0px 1.6px 3.6px rgba(0, 0, 0, 0.13);background:#005D92;z-index:1}.pn-page-nav-items>.pn-pn-bg.pn-pn-hover{background:#FFFFFF;opacity:0;border:0.5rem solid transparent;z-index:0}.pn-page-nav-items>.pn-pn-bg.hidden{opacity:0}@media (hover: hover){ul.pn-page-nav-items:focus-within .pn-pn-hover,ul.pn-page-nav-items:hover .pn-pn-hover{opacity:0.12}}pn-page-nav .pn-pn-arrows{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);left:0;height:100%;width:100%;z-index:3;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;pointer-events:none;padding:0.125em 0.1em}pn-page-nav .pn-pn-arrows svg{width:1.5em}pn-page-nav .pn-pn-arrows svg path{fill:#005D92}pn-page-nav .pn-pn-arrows>*{-webkit-transition:opacity 0.2s, background 0.1s, -webkit-transform 0.2s, -webkit-box-shadow 0.1s;transition:opacity 0.2s, background 0.1s, -webkit-transform 0.2s, -webkit-box-shadow 0.1s;transition:transform 0.2s, opacity 0.2s, background 0.1s, box-shadow 0.1s;transition:transform 0.2s, opacity 0.2s, background 0.1s, box-shadow 0.1s, -webkit-transform 0.2s, -webkit-box-shadow 0.1s;pointer-events:all;height:100%;aspect-ratio:1;background:white;border:none;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;cursor:pointer;opacity:0;will-change:transform;-webkit-tap-highlight-color:transparent;border-radius:50%;border:0.2em solid #0D234B}pn-page-nav .pn-pn-arrows>*.pn-pn-arrow-left{-webkit-transform:translateX(-100%);transform:translateX(-100%)}pn-page-nav .pn-pn-arrows>*.pn-pn-arrow-right{-webkit-transform:translateX(100%);transform:translateX(100%)}@media screen and (max-width: 30em){pn-page-nav .pn-pn-arrows>*{border:none}pn-page-nav .pn-pn-arrows>* pn-icon svg{width:100%;height:2em;-webkit-animation:arrow 0.6s ease-in-out alternate infinite;animation:arrow 0.6s ease-in-out alternate infinite}pn-page-nav .pn-pn-arrows>* pn-icon svg path{fill:#FFFFFF}pn-page-nav .pn-pn-arrows>*.pn-pn-arrow-left{background:-webkit-gradient(linear, right top, left top, from(transparent), color-stop(60%, #0D234B));background:linear-gradient(to left, transparent, #0D234B 60%);border-radius:50% 0 0 50%}pn-page-nav .pn-pn-arrows>*.pn-pn-arrow-right{background:-webkit-gradient(linear, left top, right top, from(transparent), color-stop(40%, #0D234B));background:linear-gradient(to right, transparent, #0D234B 40%);border-radius:0 50% 50% 0}}pn-page-nav .pn-pn-arrows.pn-pn-left-visible .pn-pn-arrow-left,pn-page-nav .pn-pn-arrows.pn-pn-right-visible .pn-pn-arrow-right{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}@-webkit-keyframes arrow{to{-webkit-transform:translateX(10%);transform:translateX(10%)}}@keyframes arrow{to{-webkit-transform:translateX(10%);transform:translateX(10%)}}button.pn-page-nav-dropdown-button{font-size:1em;border-radius:3em 0 0 3em;background:#0D234B;color:#FFFFFF;padding:0.5em 1em 0.5em 1.5em;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;border:none;-webkit-transition:background 0.15s;transition:background 0.15s;position:relative;outline:none;height:100%;position:relative;margin:0 0.5em 0 0;font-weight:500}button.pn-page-nav-dropdown-button pn-icon{margin-left:0.5em}button.pn-page-nav-dropdown-button:hover,button.pn-page-nav-dropdown-button:focus{background:#263655}button.pn-page-nav-dropdown-button:focus{-webkit-box-shadow:inset 0 0 0 0.1em #005D92, inset 0 0 0 0.2em #D3CECB;box-shadow:inset 0 0 0 0.1em #005D92, inset 0 0 0 0.2em #D3CECB}button.pn-page-nav-dropdown-button.pn-page-nav-dropdown-active{background:#005D92}button.pn-page-nav-dropdown-button.pn-page-nav-dropdown-active:hover,button.pn-page-nav-dropdown-button.pn-page-nav-dropdown-active:focus{background:#0068a6}.pn-page-nav-divider{height:60%;background:#D3CECB;width:0.1em;position:absolute;right:0;-webkit-transform:translateX(50%);transform:translateX(50%)}ul.pn-page-nav-dropdown{position:absolute;left:0;top:110%;background:#0D234B;border-radius:0.5em;margin:0;padding:0;list-style-type:none;-webkit-box-shadow:0px 6.4000000954px 14.3999996185px 0px #00000021, 0px 1.2000000477px 3.5999999046px 0px #0000001a;box-shadow:0px 6.4000000954px 14.3999996185px 0px #00000021, 0px 1.2000000477px 3.5999999046px 0px #0000001a;font-size:inherit;display:none}ul.pn-page-nav-dropdown.pn-page-nav-dropdown-open{display:block}";
+const pnPageNavCss = "pn-page-nav{display:block;position:relative;font-size:clamp(0.8em, 2vw, 1em);z-index:5}.pn-page-nav-wrapper{-webkit-transform:translateZ(0);transform:translateZ(0);font-size:inherit;max-width:100%;overflow:hidden;position:relative;display:-ms-inline-flexbox;display:inline-flex;border-radius:3em}.pn-page-nav{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;border-radius:3em;min-height:3em;background:#0d234b;border:0.1em solid #d3cecb;position:relative;overflow-x:auto;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory}.pn-page-nav::-webkit-scrollbar{display:none}.pn-page-nav ul.pn-page-nav-items{display:-ms-flexbox;display:flex;list-style-type:none;padding:0.25em;margin:0;position:relative}.pn-page-nav-items>.pn-pn-bg{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);will-change:transform;left:0;border-radius:3em;-webkit-transition:width 0.25s cubic-bezier(0.29, 0.15, 0.24, 0.97), background 0.15s, opacity 0.15s, -webkit-transform 0.25s cubic-bezier(0.29, 0.15, 0.24, 0.97), -webkit-box-shadow 0.15s;transition:width 0.25s cubic-bezier(0.29, 0.15, 0.24, 0.97), background 0.15s, opacity 0.15s, -webkit-transform 0.25s cubic-bezier(0.29, 0.15, 0.24, 0.97), -webkit-box-shadow 0.15s;transition:width 0.25s cubic-bezier(0.29, 0.15, 0.24, 0.97), transform 0.25s cubic-bezier(0.29, 0.15, 0.24, 0.97), background 0.15s, opacity 0.15s, box-shadow 0.15s;transition:width 0.25s cubic-bezier(0.29, 0.15, 0.24, 0.97), transform 0.25s cubic-bezier(0.29, 0.15, 0.24, 0.97), background 0.15s, opacity 0.15s, box-shadow 0.15s, -webkit-transform 0.25s cubic-bezier(0.29, 0.15, 0.24, 0.97), -webkit-box-shadow 0.15s}.pn-page-nav-items>.pn-pn-bg.pn-pn-active{-webkit-box-shadow:0px 0.3px 0.9px rgba(0, 0, 0, 0.1), 0px 1.6px 3.6px rgba(0, 0, 0, 0.13);box-shadow:0px 0.3px 0.9px rgba(0, 0, 0, 0.1), 0px 1.6px 3.6px rgba(0, 0, 0, 0.13);background:#005d92;z-index:1}.pn-page-nav-items>.pn-pn-bg.pn-pn-hover{background:#ffffff;opacity:0;border:0.5rem solid transparent;z-index:0}.pn-page-nav-items>.pn-pn-bg.hidden{opacity:0}@media (hover: hover){ul.pn-page-nav-items:focus-within .pn-pn-hover,ul.pn-page-nav-items:hover .pn-pn-hover{opacity:0.12}}pn-page-nav .pn-pn-arrows{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);left:0;height:100%;width:100%;z-index:3;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;pointer-events:none;padding:0.125em 0.1em}pn-page-nav .pn-pn-arrows svg{width:1.5em}pn-page-nav .pn-pn-arrows svg path{fill:#005d92}pn-page-nav .pn-pn-arrows>*{-webkit-transition:opacity 0.2s, background 0.1s, -webkit-transform 0.2s, -webkit-box-shadow 0.1s;transition:opacity 0.2s, background 0.1s, -webkit-transform 0.2s, -webkit-box-shadow 0.1s;transition:transform 0.2s, opacity 0.2s, background 0.1s, box-shadow 0.1s;transition:transform 0.2s, opacity 0.2s, background 0.1s, box-shadow 0.1s, -webkit-transform 0.2s, -webkit-box-shadow 0.1s;pointer-events:all;height:100%;aspect-ratio:1;background:white;border:none;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;cursor:pointer;opacity:0;will-change:transform;-webkit-tap-highlight-color:transparent;border-radius:50%;border:0.2em solid #0d234b}pn-page-nav .pn-pn-arrows>*.pn-pn-arrow-left{-webkit-transform:translateX(-100%);transform:translateX(-100%)}pn-page-nav .pn-pn-arrows>*.pn-pn-arrow-right{-webkit-transform:translateX(100%);transform:translateX(100%)}@media screen and (max-width: 30em){pn-page-nav .pn-pn-arrows>*{border:none}pn-page-nav .pn-pn-arrows>* pn-icon svg{width:100%;height:2em;-webkit-animation:arrow 0.6s ease-in-out alternate infinite;animation:arrow 0.6s ease-in-out alternate infinite}pn-page-nav .pn-pn-arrows>* pn-icon svg path{fill:#ffffff}pn-page-nav .pn-pn-arrows>*.pn-pn-arrow-left{background:-webkit-gradient(linear, right top, left top, from(transparent), color-stop(60%, #0d234b));background:linear-gradient(to left, transparent, #0d234b 60%);border-radius:50% 0 0 50%}pn-page-nav .pn-pn-arrows>*.pn-pn-arrow-right{background:-webkit-gradient(linear, left top, right top, from(transparent), color-stop(40%, #0d234b));background:linear-gradient(to right, transparent, #0d234b 40%);border-radius:0 50% 50% 0}}pn-page-nav .pn-pn-arrows.pn-pn-left-visible .pn-pn-arrow-left,pn-page-nav .pn-pn-arrows.pn-pn-right-visible .pn-pn-arrow-right{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}@-webkit-keyframes arrow{to{-webkit-transform:translateX(10%);transform:translateX(10%)}}@keyframes arrow{to{-webkit-transform:translateX(10%);transform:translateX(10%)}}button.pn-page-nav-dropdown-button{font-size:1em;border-radius:3em 0 0 3em;background:#0d234b;color:#ffffff;padding:0.5em 1em 0.5em 1.5em;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;border:none;-webkit-transition:background 0.15s;transition:background 0.15s;position:relative;outline:none;height:100%;position:relative;margin:0 0.5em 0 0;font-weight:500}button.pn-page-nav-dropdown-button pn-icon{margin-left:0.5em}button.pn-page-nav-dropdown-button:hover,button.pn-page-nav-dropdown-button:focus{background:#263655}button.pn-page-nav-dropdown-button:focus{-webkit-box-shadow:inset 0 0 0 0.1em #005d92, inset 0 0 0 0.2em #d3cecb;box-shadow:inset 0 0 0 0.1em #005d92, inset 0 0 0 0.2em #d3cecb}button.pn-page-nav-dropdown-button.pn-page-nav-dropdown-active{background:#005d92}button.pn-page-nav-dropdown-button.pn-page-nav-dropdown-active:hover,button.pn-page-nav-dropdown-button.pn-page-nav-dropdown-active:focus{background:#0068a6}.pn-page-nav-divider{height:60%;background:#d3cecb;width:0.1em;position:absolute;right:0;-webkit-transform:translateX(50%);transform:translateX(50%)}ul.pn-page-nav-dropdown{position:absolute;left:0;top:110%;background:#0d234b;border-radius:0.5em;margin:0;padding:0;list-style-type:none;-webkit-box-shadow:0px 6.4000000954px 14.3999996185px 0px #00000021, 0px 1.2000000477px 3.5999999046px 0px #0000001a;box-shadow:0px 6.4000000954px 14.3999996185px 0px #00000021, 0px 1.2000000477px 3.5999999046px 0px #0000001a;font-size:inherit;display:none}ul.pn-page-nav-dropdown.pn-page-nav-dropdown-open{display:block}";
 const PnPageNav$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/umd/modules/@postnord/web-components/components/pn-progress-bar2.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { d as defineCustomElement$1 } from './pn-spinner2.js';
-const pnProgressBarCss = "pn-progress-bar{display:inline;overflow:hidden}pn-progress-bar .pn-progress-container{margin:16px 16px 8px 0;display:inline-block;min-width:380px}pn-progress-bar .pn-progress-container .pn-progress-label{height:20px;color:#1e1e1e;font-size:14px;font-weight:bold;line-height:20px;margin-bottom:8px;overflow:hidden;text-overflow:ellipsis}pn-progress-bar .pn-progress-container .pn-progress-label>pn-spinner{vertical-align:middle;margin-left:5px}pn-progress-bar .pn-progress-container .pn-progress-bar{position:relative;padding-top:1px}pn-progress-bar .pn-progress-container .pn-progress-bar .pn-progress-bar-line{width:0;position:absolute;top:0;-webkit-transition:all 0.3s ease-out;transition:all 0.3s ease-out}pn-progress-bar .pn-progress-container .pn-progress-bar .pn-progress-bar-line .pn-progress-bar-line1,pn-progress-bar .pn-progress-container .pn-progress-bar .pn-progress-bar-line .pn-progress-bar-line2{width:100%;height:7px}pn-progress-bar .pn-progress-container .pn-progress-bar .pn-progress-bar-line .pn-progress-bar-line1{background-color:#8EDDF9}pn-progress-bar .pn-progress-container .pn-progress-bar .pn-progress-bar-line .pn-progress-bar-line2{background-color:#00A0D6}pn-progress-bar .pn-progress-container .pn-progress-bar .pn-progress-bar-bg{height:12px;background-color:#D3CECB}pn-progress-bar .pn-progress-container .pn-progress-percentage{margin-top:5px;text-align:right;font-size:12px;line-height:16px;color:#00A0D6}pn-progress-bar.pn-progress-size-small .pn-progress-container .pn-progress-bar .pn-progress-bar-line1,pn-progress-bar.pn-progress-size-small .pn-progress-container .pn-progress-bar .pn-progress-bar-line2{height:4px}pn-progress-bar.pn-progress-size-small .pn-progress-container .pn-progress-bar .pn-progress-bar-bg{height:6px}pn-progress-bar.pn-progress-color-success .pn-progress-container .pn-progress-bar .pn-progress-bar-line .pn-progress-bar-line1{background-color:#5EC584}pn-progress-bar.pn-progress-color-success .pn-progress-container .pn-progress-bar .pn-progress-bar-line .pn-progress-bar-line2{background-color:#005E41}pn-progress-bar.pn-progress-color-error .pn-progress-container .pn-progress-bar .pn-progress-bar-line .pn-progress-bar-line1{background-color:#A70707}pn-progress-bar.pn-progress-color-error .pn-progress-container .pn-progress-bar .pn-progress-bar-line .pn-progress-bar-line2{background-color:#A70707}";
+const pnProgressBarCss = "pn-progress-bar{display:inline;overflow:hidden}pn-progress-bar .pn-progress-container{margin:16px 16px 8px 0;display:inline-block;min-width:380px}pn-progress-bar .pn-progress-container .pn-progress-label{height:20px;color:#1e1e1e;font-size:14px;font-weight:bold;line-height:20px;margin-bottom:8px;overflow:hidden;text-overflow:ellipsis}pn-progress-bar .pn-progress-container .pn-progress-label>pn-spinner{vertical-align:middle;margin-left:5px}pn-progress-bar .pn-progress-container .pn-progress-bar{position:relative;padding-top:1px}pn-progress-bar .pn-progress-container .pn-progress-bar .pn-progress-bar-line{width:0;position:absolute;top:0;-webkit-transition:all 0.3s ease-out;transition:all 0.3s ease-out}pn-progress-bar .pn-progress-container .pn-progress-bar .pn-progress-bar-line .pn-progress-bar-line1,pn-progress-bar .pn-progress-container .pn-progress-bar .pn-progress-bar-line .pn-progress-bar-line2{width:100%;height:7px}pn-progress-bar .pn-progress-container .pn-progress-bar .pn-progress-bar-line .pn-progress-bar-line1{background-color:#8eddf9}pn-progress-bar .pn-progress-container .pn-progress-bar .pn-progress-bar-line .pn-progress-bar-line2{background-color:#00a0d6}pn-progress-bar .pn-progress-container .pn-progress-bar .pn-progress-bar-bg{height:12px;background-color:#d3cecb}pn-progress-bar .pn-progress-container .pn-progress-percentage{margin-top:5px;text-align:right;font-size:12px;line-height:16px;color:#00a0d6}pn-progress-bar.pn-progress-size-small .pn-progress-container .pn-progress-bar .pn-progress-bar-line1,pn-progress-bar.pn-progress-size-small .pn-progress-container .pn-progress-bar .pn-progress-bar-line2{height:4px}pn-progress-bar.pn-progress-size-small .pn-progress-container .pn-progress-bar .pn-progress-bar-bg{height:6px}pn-progress-bar.pn-progress-color-success .pn-progress-container .pn-progress-bar .pn-progress-bar-line .pn-progress-bar-line1{background-color:#5ec584}pn-progress-bar.pn-progress-color-success .pn-progress-container .pn-progress-bar .pn-progress-bar-line .pn-progress-bar-line2{background-color:#005e41}pn-progress-bar.pn-progress-color-error .pn-progress-container .pn-progress-bar .pn-progress-bar-line .pn-progress-bar-line1{background-color:#a70707}pn-progress-bar.pn-progress-color-error .pn-progress-container .pn-progress-bar .pn-progress-bar-line .pn-progress-bar-line2{background-color:#a70707}";
 const PnSpinner = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/umd/modules/@postnord/web-components/components/pn-progress-indicator-step.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-const pnProgressIndicatorStepCss = "pn-progress-indicator-step{display:-ms-flexbox;display:flex;-ms-flex:1 0 4em;flex:1 0 4em}pn-progress-indicator-step:first-child{-ms-flex:0 0 auto;flex:0 0 auto}pn-progress-indicator-step:first-child .progress-line{display:none}pn-progress-indicator-step:first-child .info-container{-webkit-transform:translateX(-50%);transform:translateX(-50%);left:50%}.pn-progress-indicator-step{position:relative;display:-ms-flexbox;display:flex;-ms-flex:1 0 4em;flex:1 0 4em;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-webkit-tap-highlight-color:transparent}.pn-progress-indicator-step .circle{width:1.5em;height:1.5em;padding:0.3rem;border-radius:50%;background-color:#F3F2F2;-webkit-transition:background-color 0.3s ease-in-out;transition:background-color 0.3s ease-in-out}.pn-progress-indicator-step .info-container{position:absolute;bottom:-2.5em;right:0;-webkit-transform:translateX(50%) translateX(-1.2rem);transform:translateX(50%) translateX(-1.2rem);white-space:nowrap;color:#F3F2F2;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;-webkit-transition:color 0.3s ease-in-out;transition:color 0.3s ease-in-out;font-size:1em;font-weight:normal}.pn-progress-indicator-step .info-container svg{height:1.7em;width:1.7em;margin-bottom:0.1em}.pn-progress-indicator-step .info-container svg path,.pn-progress-indicator-step .info-container svg polygon{fill:#F3F2F2;-webkit-transition:fill 0.3s ease-in-out;transition:fill 0.3s ease-in-out}.pn-progress-indicator-step .progress-line{-ms-flex:1 1 auto;flex:1 1 auto;margin:auto 4px;height:0.8rem;background-color:#F3F2F2;position:relative;overflow:hidden;pointer-events:none;border-radius:10rem}.pn-progress-indicator-step .progress-line:after{content:\"\";position:absolute;top:0;left:0;height:0.8rem;width:100%;background-color:#005D92;-webkit-transition:-webkit-transform 0.4s cubic-bezier(0.55, 0, 0.1, 1) 0.3s;transition:-webkit-transform 0.4s cubic-bezier(0.55, 0, 0.1, 1) 0.3s;transition:transform 0.4s cubic-bezier(0.55, 0, 0.1, 1) 0.3s;transition:transform 0.4s cubic-bezier(0.55, 0, 0.1, 1) 0.3s, -webkit-transform 0.4s cubic-bezier(0.55, 0, 0.1, 1) 0.3s;-webkit-transform:translateX(-100%);transform:translateX(-100%)}.pn-progress-indicator-step.active .info-container{color:black}.pn-progress-indicator-step.active .info-container svg path{fill:#000}.pn-progress-indicator-step.active .info-container svg polygon{fill:#000}.pn-progress-indicator-step.activated{cursor:pointer}.pn-progress-indicator-step.done .progress-line:after,.pn-progress-indicator-step.active .progress-line:after{-webkit-transform:translateX(0);transform:translateX(0)}.pn-progress-indicator-step.done .circle,.pn-progress-indicator-step.active .circle{background-color:#005D92}.pn-progress-indicator-step.done .checkmark-path{stroke-linecap:round;stroke-dasharray:27;stroke-dashoffset:-23;-webkit-animation:dash 0.3s cubic-bezier(0.55, 0, 0.1, 1) both;animation:dash 0.3s cubic-bezier(0.55, 0, 0.1, 1) both}@-webkit-keyframes dash{to{stroke-dashoffset:0}}@keyframes dash{to{stroke-dashoffset:0}}";
+const pnProgressIndicatorStepCss = "pn-progress-indicator-step{display:-ms-flexbox;display:flex;-ms-flex:1 0 4em;flex:1 0 4em}pn-progress-indicator-step:first-child{-ms-flex:0 0 auto;flex:0 0 auto}pn-progress-indicator-step:first-child .progress-line{display:none}pn-progress-indicator-step:first-child .info-container{-webkit-transform:translateX(-50%);transform:translateX(-50%);left:50%}.pn-progress-indicator-step{position:relative;display:-ms-flexbox;display:flex;-ms-flex:1 0 4em;flex:1 0 4em;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-webkit-tap-highlight-color:transparent}.pn-progress-indicator-step .circle{width:1.5em;height:1.5em;padding:0.3rem;border-radius:50%;background-color:#f3f2f2;-webkit-transition:background-color 0.3s ease-in-out;transition:background-color 0.3s ease-in-out}.pn-progress-indicator-step .info-container{position:absolute;bottom:-2.5em;right:0;-webkit-transform:translateX(50%) translateX(-1.2rem);transform:translateX(50%) translateX(-1.2rem);white-space:nowrap;color:#f3f2f2;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;-webkit-transition:color 0.3s ease-in-out;transition:color 0.3s ease-in-out;font-size:1em;font-weight:normal}.pn-progress-indicator-step .info-container svg{height:1.7em;width:1.7em;margin-bottom:0.1em}.pn-progress-indicator-step .info-container svg path,.pn-progress-indicator-step .info-container svg polygon{fill:#f3f2f2;-webkit-transition:fill 0.3s ease-in-out;transition:fill 0.3s ease-in-out}.pn-progress-indicator-step .progress-line{-ms-flex:1 1 auto;flex:1 1 auto;margin:auto 4px;height:0.8rem;background-color:#f3f2f2;position:relative;overflow:hidden;pointer-events:none;border-radius:10rem}.pn-progress-indicator-step .progress-line:after{content:\"\";position:absolute;top:0;left:0;height:0.8rem;width:100%;background-color:#005d92;-webkit-transition:-webkit-transform 0.4s cubic-bezier(0.55, 0, 0.1, 1) 0.3s;transition:-webkit-transform 0.4s cubic-bezier(0.55, 0, 0.1, 1) 0.3s;transition:transform 0.4s cubic-bezier(0.55, 0, 0.1, 1) 0.3s;transition:transform 0.4s cubic-bezier(0.55, 0, 0.1, 1) 0.3s, -webkit-transform 0.4s cubic-bezier(0.55, 0, 0.1, 1) 0.3s;-webkit-transform:translateX(-100%);transform:translateX(-100%)}.pn-progress-indicator-step.active .info-container{color:black}.pn-progress-indicator-step.active .info-container svg path{fill:#000}.pn-progress-indicator-step.active .info-container svg polygon{fill:#000}.pn-progress-indicator-step.activated{cursor:pointer}.pn-progress-indicator-step.done .progress-line:after,.pn-progress-indicator-step.active .progress-line:after{-webkit-transform:translateX(0);transform:translateX(0)}.pn-progress-indicator-step.done .circle,.pn-progress-indicator-step.active .circle{background-color:#005d92}.pn-progress-indicator-step.done .checkmark-path{stroke-linecap:round;stroke-dasharray:27;stroke-dashoffset:-23;-webkit-animation:dash 0.3s cubic-bezier(0.55, 0, 0.1, 1) both;animation:dash 0.3s cubic-bezier(0.55, 0, 0.1, 1) both}@-webkit-keyframes dash{to{stroke-dashoffset:0}}@keyframes dash{to{stroke-dashoffset:0}}";
 const PnProgressIndicatorStep$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

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

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-const pnRadioButtonCss = "pn-radio-button{}pn-radio-button input[type=radio]{opacity:0;position:absolute;white-space:nowrap;pointer-events:none}pn-radio-button input[type=radio]+label{display:inline-block;cursor:pointer;}pn-radio-button input[type=radio]+label .pn-radio-outer{background:#fff;border:0.1em solid #D3CECB;border-radius:50%;height:1.5em;width:1.5em;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-transition:border 0.2s ease-in-out, background-color 0.2s ease-in-out, -webkit-box-shadow 0.1s;transition:border 0.2s ease-in-out, background-color 0.2s ease-in-out, -webkit-box-shadow 0.1s;transition:border 0.2s ease-in-out, background-color 0.2s ease-in-out, box-shadow 0.1s;transition:border 0.2s ease-in-out, background-color 0.2s ease-in-out, box-shadow 0.1s, -webkit-box-shadow 0.1s;cursor:pointer}pn-radio-button input[type=radio]+label .pn-radio-inner{-webkit-transform:scale(0);transform:scale(0);height:1em;width:1em;background-color:#005D92;border-radius:50%;-webkit-transform-origin:center center;transform-origin:center center;-webkit-transition:-webkit-transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92);transition:-webkit-transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92);transition:transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92);transition:transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92), -webkit-transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92)}pn-radio-button input[type=radio]:checked+label .pn-radio-inner{-webkit-transform:scale(1);transform:scale(1)}pn-radio-button input[type=radio]:checked+label .pn-radio-outer{border:0.1rem solid #005D92}pn-radio-button input[type=radio]:focus+label .pn-radio-outer,pn-radio-button input[type=radio]:active+label .pn-radio-outer{-webkit-box-shadow:0 0 0 0.1rem white, 0 0 0 0.3rem #005D92;box-shadow:0 0 0 0.1rem white, 0 0 0 0.3rem #005D92}pn-radio-button input[type=radio]:hover+label .pn-radio-outer{border:0.1rem solid #005D92;background:#E0F8FF}pn-radio-button input[type=radio]:disabled+label{cursor:not-allowed}pn-radio-button input[type=radio]:disabled+label .pn-radio-outer{cursor:not-allowed;border:0.1rem solid #969087;background-color:#D3CECB}pn-radio-button input[type=radio]:disabled+label .pn-radio-inner{cursor:not-allowed;background-color:#969087}pn-radio-button input[type=radio]:active:disabled+label .pn-radio-outer{-webkit-box-shadow:none;box-shadow:none}";
+const pnRadioButtonCss = "pn-radio-button{}pn-radio-button input[type=radio]{opacity:0;position:absolute;white-space:nowrap;pointer-events:none}pn-radio-button input[type=radio]+label{display:inline-block;cursor:pointer;}pn-radio-button input[type=radio]+label .pn-radio-outer{background:#fff;border:0.1em solid #d3cecb;border-radius:50%;height:1.5em;width:1.5em;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-transition:border 0.2s ease-in-out, background-color 0.2s ease-in-out, -webkit-box-shadow 0.1s;transition:border 0.2s ease-in-out, background-color 0.2s ease-in-out, -webkit-box-shadow 0.1s;transition:border 0.2s ease-in-out, background-color 0.2s ease-in-out, box-shadow 0.1s;transition:border 0.2s ease-in-out, background-color 0.2s ease-in-out, box-shadow 0.1s, -webkit-box-shadow 0.1s;cursor:pointer}pn-radio-button input[type=radio]+label .pn-radio-inner{-webkit-transform:scale(0);transform:scale(0);height:1em;width:1em;background-color:#005d92;border-radius:50%;-webkit-transform-origin:center center;transform-origin:center center;-webkit-transition:-webkit-transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92);transition:-webkit-transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92);transition:transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92);transition:transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92), -webkit-transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92)}pn-radio-button input[type=radio]:checked+label .pn-radio-inner{-webkit-transform:scale(1);transform:scale(1)}pn-radio-button input[type=radio]:checked+label .pn-radio-outer{border:0.1rem solid #005d92}pn-radio-button input[type=radio]:focus+label .pn-radio-outer,pn-radio-button input[type=radio]:active+label .pn-radio-outer{-webkit-box-shadow:0 0 0 0.1rem white, 0 0 0 0.3rem #005d92;box-shadow:0 0 0 0.1rem white, 0 0 0 0.3rem #005d92}pn-radio-button input[type=radio]:hover+label .pn-radio-outer{border:0.1rem solid #005d92;background:#e0f8ff}pn-radio-button input[type=radio]:disabled+label{cursor:not-allowed}pn-radio-button input[type=radio]:disabled+label .pn-radio-outer{cursor:not-allowed;border:0.1rem solid #969087;background-color:#d3cecb}pn-radio-button input[type=radio]:disabled+label .pn-radio-inner{cursor:not-allowed;background-color:#969087}pn-radio-button input[type=radio]:active:disabled+label .pn-radio-outer{-webkit-box-shadow:none;box-shadow:none}";
 const PnradioButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/umd/modules/@postnord/web-components/components/pn-radio-tile.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './pn-illustration2.js';
-const pnRadioTileCss = "pn-radio-tile{position:relative;display:inline-block}pn-radio-tile input[type=radio]{opacity:0;position:absolute;width:100%;height:100%;white-space:nowrap;pointer-events:none}pn-radio-tile>label{cursor:pointer;overflow:hidden;position:relative;background:#FFFFFF;padding:0.5em 1em;border-radius:0.5em;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:0.5em;color:#005D92;font-weight:500;border:0.1em solid #D3CECB;-webkit-transition-property:background, border, -webkit-box-shadow;transition-property:background, border, -webkit-box-shadow;transition-property:box-shadow, background, border;transition-property:box-shadow, background, border, -webkit-box-shadow;-webkit-transition-duration:0.15s;transition-duration:0.15s}pn-radio-tile>label>pn-illustration,pn-radio-tile>label>[slot=illustration]{min-width:2.5em;max-height:2.5em}pn-radio-tile>label:hover{background:#EFFBFF;border:0.1em solid #00A0D6}pn-radio-tile input[type=radio]:focus:checked+label{-webkit-box-shadow:0 0 0 0.1rem #fff, 0 0 0 0.2rem #005D92, 0px 3.2000000477px 7.1999998093px 0px #00000021, 0px 0.6000000238px 1.7999999523px 0px #0000001a;box-shadow:0 0 0 0.1rem #fff, 0 0 0 0.2rem #005D92, 0px 3.2000000477px 7.1999998093px 0px #00000021, 0px 0.6000000238px 1.7999999523px 0px #0000001a}pn-radio-tile input[type=radio]:checked+label{border:0.1em solid #005D92;background:#EFFBFF;-webkit-box-shadow:0px 3.2000000477px 7.1999998093px 0px #00000021, 0px 0.6000000238px 1.7999999523px 0px #0000001a;box-shadow:0px 3.2000000477px 7.1999998093px 0px #00000021, 0px 0.6000000238px 1.7999999523px 0px #0000001a}";
+const pnRadioTileCss = "pn-radio-tile{position:relative;display:inline-block}pn-radio-tile input[type=radio]{opacity:0;position:absolute;width:100%;height:100%;white-space:nowrap;pointer-events:none}pn-radio-tile>label{cursor:pointer;overflow:hidden;position:relative;background:#ffffff;padding:0.5em 1em;border-radius:0.5em;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:0.5em;color:#005d92;font-weight:500;border:0.1em solid #d3cecb;-webkit-transition-property:background, border, -webkit-box-shadow;transition-property:background, border, -webkit-box-shadow;transition-property:box-shadow, background, border;transition-property:box-shadow, background, border, -webkit-box-shadow;-webkit-transition-duration:0.15s;transition-duration:0.15s}pn-radio-tile>label>pn-illustration,pn-radio-tile>label>[slot=illustration]{min-width:2.5em;max-height:2.5em}pn-radio-tile>label:hover{background:#effbff;border:0.1em solid #00a0d6}pn-radio-tile input[type=radio]:focus:checked+label{-webkit-box-shadow:0 0 0 0.1rem #fff, 0 0 0 0.2rem #005d92, 0px 3.2000000477px 7.1999998093px 0px #00000021, 0px 0.6000000238px 1.7999999523px 0px #0000001a;box-shadow:0 0 0 0.1rem #fff, 0 0 0 0.2rem #005d92, 0px 3.2000000477px 7.1999998093px 0px #00000021, 0px 0.6000000238px 1.7999999523px 0px #0000001a}pn-radio-tile input[type=radio]:checked+label{border:0.1em solid #005d92;background:#effbff;-webkit-box-shadow:0px 3.2000000477px 7.1999998093px 0px #00000021, 0px 0.6000000238px 1.7999999523px 0px #0000001a;box-shadow:0px 3.2000000477px 7.1999998093px 0px #00000021, 0px 0.6000000238px 1.7999999523px 0px #0000001a}";
 const PnRadioTile$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

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

@@ -3,7 +3,7 @@ import { d as defineCustomElement$3 } from './pn-button2.js';
 import { d as defineCustomElement$2 } from './pn-icon2.js';
 import { d as defineCustomElement$1 } from './pn-spinner2.js';
-const pnSearchFieldCss = "pn-search-field{display:-ms-inline-flexbox;display:inline-flex}pn-search-field>pn-button{margin-left:0.35em}pn-search-field>pn-button button .pn-button-bg{-webkit-transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, left 0.2s, -webkit-box-shadow 0.1s, -webkit-transform 0.2s;transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, left 0.2s, -webkit-box-shadow 0.1s, -webkit-transform 0.2s;transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, box-shadow 0.1s, left 0.2s, transform 0.2s;transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, box-shadow 0.1s, left 0.2s, transform 0.2s, -webkit-box-shadow 0.1s, -webkit-transform 0.2s}pn-search-field>pn-button[data-loading=true] .pn-button-bg{left:0;-webkit-transform:translateX(0);transform:translateX(0);-webkit-transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, -webkit-box-shadow 0.1s;transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, -webkit-box-shadow 0.1s;transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, box-shadow 0.1s;transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, box-shadow 0.1s, -webkit-box-shadow 0.1s}pn-search-field>pn-button[data-loading=true] pn-spinner{left:0.75em}pn-search-field input{padding:0.75em;min-height:3em;font-size:1em;height:100%;font-weight:500;-webkit-font-smoothing:antialiased;outline:none;border-radius:3em;border:0.1rem solid #5E554A;-webkit-transition:border 0.15s, -webkit-box-shadow 0.15s;transition:border 0.15s, -webkit-box-shadow 0.15s;transition:box-shadow 0.15s, border 0.15s;transition:box-shadow 0.15s, border 0.15s, -webkit-box-shadow 0.15s;color:#000000;width:100%}pn-search-field input::-webkit-search-cancel-button{display:none}pn-search-field input::-webkit-input-placeholder{color:#969087;font-weight:normal}pn-search-field input::-moz-placeholder{color:#969087;font-weight:normal}pn-search-field input:-ms-input-placeholder{color:#969087;font-weight:normal}pn-search-field input::-ms-input-placeholder{color:#969087;font-weight:normal}pn-search-field input::placeholder{color:#969087;font-weight:normal}pn-search-field input:focus{border:0.1rem solid #005D92;-webkit-box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005D92;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005D92}pn-search-field input:hover{border:0.1rem solid #00A0D6}pn-search-field input:disabled{background:#F3F2F2;border:none}pn-search-field>.input-container{width:100%;position:relative}pn-search-field>.input-container .button-container{position:absolute;top:0;right:0;background:transparent;width:3em;height:100%;overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}pn-search-field>.input-container button{position:absolute;left:50%;top:50%;-webkit-transform:translate(100%, -50%);transform:translate(100%, -50%);background:none;border:none;color:#005D92;padding:0.3rem;margin:0;font-size:0.875em;border-radius:50%;outline:none;-webkit-transition:border 0.1s, background 0.2s, opacity 0.2s, -webkit-box-shadow 0.1s, -webkit-transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s;transition:border 0.1s, background 0.2s, opacity 0.2s, -webkit-box-shadow 0.1s, -webkit-transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s;transition:border 0.1s, background 0.2s, box-shadow 0.1s, transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s, opacity 0.2s;transition:border 0.1s, background 0.2s, box-shadow 0.1s, transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s, opacity 0.2s, -webkit-box-shadow 0.1s, -webkit-transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s;border:0.1rem solid transparent;-webkit-tap-highlight-color:transparent}pn-search-field>.input-container button.clear,pn-search-field>.input-container button.search{cursor:pointer}pn-search-field>.input-container button:focus{-webkit-box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005D92;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005D92}pn-search-field>.input-container button:hover,pn-search-field>.input-container button:focus{background:#E0F8FF}pn-search-field>.input-container button:active{background:#005D92}pn-search-field>.input-container button:active pn-icon svg,pn-search-field>.input-container button:active pn-icon svg path{fill:white}pn-search-field.searching button.search{-webkit-transform:translate(150%, -50%);transform:translate(150%, -50%)}pn-search-field.searching button.clear{-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}pn-search-field.button-none input,pn-search-field.button-icon-inline input{padding-right:3.3em}pn-search-field.button-none pn-spinner,pn-search-field.button-icon-inline pn-spinner{position:absolute;left:50%;top:50%;-webkit-transform:translate(100%, -50%);transform:translate(100%, -50%);-webkit-transition:-webkit-transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s;transition:-webkit-transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s;transition:transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s;transition:transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s, -webkit-transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s}pn-search-field.button-none button.search,pn-search-field.button-icon-inline button.search{-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}pn-search-field.button-none.loading button,pn-search-field.button-icon-inline.loading button{-webkit-transform:translate(100%, -50%);transform:translate(100%, -50%)}pn-search-field.button-none.loading pn-spinner,pn-search-field.button-icon-inline.loading pn-spinner{-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}pn-search-field.button-none.searching button.search{-webkit-transform:translate(100%, -50%);transform:translate(100%, -50%)}pn-search-field.button-icon>pn-button[data-loading=true] .pn-button-bg{left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}";
+const pnSearchFieldCss = "pn-search-field{display:-ms-inline-flexbox;display:inline-flex}pn-search-field>pn-button{margin-left:0.35em}pn-search-field>pn-button button .pn-button-bg{-webkit-transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, left 0.2s, -webkit-box-shadow 0.1s, -webkit-transform 0.2s;transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, left 0.2s, -webkit-box-shadow 0.1s, -webkit-transform 0.2s;transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, box-shadow 0.1s, left 0.2s, transform 0.2s;transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, box-shadow 0.1s, left 0.2s, transform 0.2s, -webkit-box-shadow 0.1s, -webkit-transform 0.2s}pn-search-field>pn-button[data-loading=true] .pn-button-bg{left:0;-webkit-transform:translateX(0);transform:translateX(0);-webkit-transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, -webkit-box-shadow 0.1s;transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, -webkit-box-shadow 0.1s;transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, box-shadow 0.1s;transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, box-shadow 0.1s, -webkit-box-shadow 0.1s}pn-search-field>pn-button[data-loading=true] pn-spinner{left:0.75em}pn-search-field input{padding:0.75em;min-height:3em;font-size:1em;height:100%;font-weight:500;-webkit-font-smoothing:antialiased;outline:none;border-radius:3em;border:0.1rem solid #5e554a;-webkit-transition:border 0.15s, -webkit-box-shadow 0.15s;transition:border 0.15s, -webkit-box-shadow 0.15s;transition:box-shadow 0.15s, border 0.15s;transition:box-shadow 0.15s, border 0.15s, -webkit-box-shadow 0.15s;color:#000000;width:100%}pn-search-field input::-webkit-search-cancel-button{display:none}pn-search-field input::-webkit-input-placeholder{color:#969087;font-weight:normal}pn-search-field input::-moz-placeholder{color:#969087;font-weight:normal}pn-search-field input:-ms-input-placeholder{color:#969087;font-weight:normal}pn-search-field input::-ms-input-placeholder{color:#969087;font-weight:normal}pn-search-field input::placeholder{color:#969087;font-weight:normal}pn-search-field input:focus{border:0.1rem solid #005d92;-webkit-box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005d92;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005d92}pn-search-field input:hover{border:0.1rem solid #00a0d6}pn-search-field input:disabled{background:#f3f2f2;border:none}pn-search-field>.input-container{width:100%;position:relative}pn-search-field>.input-container .button-container{position:absolute;top:0;right:0;background:transparent;width:3em;height:100%;overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}pn-search-field>.input-container button{position:absolute;left:50%;top:50%;-webkit-transform:translate(100%, -50%);transform:translate(100%, -50%);background:none;border:none;color:#005d92;padding:0.3rem;margin:0;font-size:0.875em;border-radius:50%;outline:none;-webkit-transition:border 0.1s, background 0.2s, opacity 0.2s, -webkit-box-shadow 0.1s, -webkit-transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s;transition:border 0.1s, background 0.2s, opacity 0.2s, -webkit-box-shadow 0.1s, -webkit-transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s;transition:border 0.1s, background 0.2s, box-shadow 0.1s, transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s, opacity 0.2s;transition:border 0.1s, background 0.2s, box-shadow 0.1s, transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s, opacity 0.2s, -webkit-box-shadow 0.1s, -webkit-transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s;border:0.1rem solid transparent;-webkit-tap-highlight-color:transparent}pn-search-field>.input-container button.clear,pn-search-field>.input-container button.search{cursor:pointer}pn-search-field>.input-container button:focus{-webkit-box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005d92;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005d92}pn-search-field>.input-container button:hover,pn-search-field>.input-container button:focus{background:#e0f8ff}pn-search-field>.input-container button:active{background:#005d92}pn-search-field>.input-container button:active pn-icon svg,pn-search-field>.input-container button:active pn-icon svg path{fill:white}pn-search-field.searching button.search{-webkit-transform:translate(150%, -50%);transform:translate(150%, -50%)}pn-search-field.searching button.clear{-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}pn-search-field.button-none input,pn-search-field.button-icon-inline input{padding-right:3.3em}pn-search-field.button-none pn-spinner,pn-search-field.button-icon-inline pn-spinner{position:absolute;left:50%;top:50%;-webkit-transform:translate(100%, -50%);transform:translate(100%, -50%);-webkit-transition:-webkit-transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s;transition:-webkit-transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s;transition:transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s;transition:transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s, -webkit-transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s}pn-search-field.button-none button.search,pn-search-field.button-icon-inline button.search{-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}pn-search-field.button-none.loading button,pn-search-field.button-icon-inline.loading button{-webkit-transform:translate(100%, -50%);transform:translate(100%, -50%)}pn-search-field.button-none.loading pn-spinner,pn-search-field.button-icon-inline.loading pn-spinner{-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}pn-search-field.button-none.searching button.search{-webkit-transform:translate(100%, -50%);transform:translate(100%, -50%)}pn-search-field.button-icon>pn-button[data-loading=true] .pn-button-bg{left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}";
 const PnSearchField = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -26,6 +26,7 @@ const PnSearchField = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.button = '';
     /** Light instead of dark search button */
     this.light = false;
+    this.ariaLabel = null;
   }
   inputHandler() {
     this.update.emit(this.value);
@@ -57,7 +58,7 @@ const PnSearchField = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     return classNames;
   }
   render() {
-    return (h(Host, { class: this.getClassNames() }, h("div", { class: "input-container" }, h("input", { type: "search", value: this.value, id: this.inputid, name: this.name, placeholder: this.placeholder, disabled: this.disabled, autocomplete: this.autocomplete, list: this.list, onKeyDown: (e) => this.emitSearch(e), onInput: (e) => this.setVal(e) }), h("div", { class: "button-container" }, (this.button === 'none' || this.button === 'icon-inline') && (h("button", { class: "search", tabindex: this.button === 'icon-inline' ? '0' : '-1', onClick: (e) => this.emitSearch(e), "aria-label": "search", title: "search" }, h("pn-icon", { symbol: "search", color: "blue700" }))), this.button !== 'icon-inline' && (h("button", { class: "clear", "aria-label": "clear", title: "clear search field", tabindex: this.value && (!this.loading || this.button !== 'none') ? '0' : '-1', onClick: () => this.clearInput() }, h("pn-icon", { symbol: "close-small", color: "blue700" }))), this.button === 'none' || (this.button === 'icon-inline' && h("pn-spinner", null)))), this.button !== 'none' && this.button !== 'icon-inline' && (h("pn-button", { onClick: (e) => this.emitSearch(e), loading: this.loading, icon: "search", appearance: this.light ? 'light' : 'dark', "icon-only": this.button === 'icon' }, this.label))));
+    return (h(Host, { class: this.getClassNames() }, h("div", { class: "input-container" }, h("input", { type: "search", value: this.value, id: this.inputid, name: this.name, placeholder: this.placeholder, disabled: this.disabled, autocomplete: this.autocomplete, list: this.list, onKeyDown: e => this.emitSearch(e), onInput: e => this.setVal(e), "aria-label": this.ariaLabel }), h("div", { class: "button-container" }, (this.button === 'none' || this.button === 'icon-inline') && (h("button", { class: "search", tabindex: this.button === 'icon-inline' ? '0' : '-1', onClick: e => this.emitSearch(e), "aria-label": "search", title: "search", type: "button" }, h("pn-icon", { symbol: "search", color: "blue700" }))), this.button !== 'icon-inline' && (h("button", { class: "clear", "aria-label": "clear", title: "clear search field", tabindex: this.value && (!this.loading || this.button !== 'none') ? '0' : '-1', onClick: () => this.clearInput(), type: "button" }, h("pn-icon", { symbol: "close-small", color: "blue700" }))), this.button === 'none' || (this.button === 'icon-inline' && h("pn-spinner", null)))), this.button !== 'none' && this.button !== 'icon-inline' && (h("pn-button", { onClick: e => this.emitSearch(e), loading: this.loading, icon: "search", appearance: this.light ? 'light' : 'dark', "icon-only": this.button === 'icon' }, this.label))));
   }
   get hostElement() { return this; }
   static get style() { return pnSearchFieldCss; }
@@ -72,7 +73,8 @@ const PnSearchField = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "label": [1],
     "loading": [4],
     "button": [1],
-    "light": [4]
+    "light": [4],
+    "ariaLabel": [1, "aria-label"]
   }, [[0, "input", "inputHandler"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

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

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './pn-icon2.js';
-const pnSegmentCss = "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;-webkit-transform:translateZ(0);transform:translateZ(0)}pn-segment:last-of-type{margin-right:0}pn-segment input{margin:0;padding:0;opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}pn-segment label{height:100%;width:100%;padding:0.5em;border-radius:3em;font-weight:500;border:0.1rem solid transparent;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;cursor:pointer;-webkit-transition:background 0.15s, border 0.15s, color 0.15s, -webkit-box-shadow 0.15s 0.2s;transition:background 0.15s, border 0.15s, color 0.15s, -webkit-box-shadow 0.15s 0.2s;transition:background 0.15s, border 0.15s, box-shadow 0.15s 0.2s, color 0.15s;transition:background 0.15s, border 0.15s, box-shadow 0.15s 0.2s, color 0.15s, -webkit-box-shadow 0.15s 0.2s}pn-segment label>pn-icon{margin-right:0.5em}pn-segment label pn-icon svg path{-webkit-transition:fill 0.15s;transition:fill 0.15s}";
+const pnSegmentCss = "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;-webkit-transform:translateZ(0);transform:translateZ(0)}pn-segment:last-of-type{margin-right:0}pn-segment input{margin:0;padding:0;opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}pn-segment label{height:100%;width:100%;padding:0.5em;border-radius:3em;font-weight:500;border:0.1rem solid transparent;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;cursor:pointer;-webkit-transition:background 0.15s, border 0.15s, color 0.15s, -webkit-box-shadow 0.15s 0.2s;transition:background 0.15s, border 0.15s, color 0.15s, -webkit-box-shadow 0.15s 0.2s;transition:background 0.15s, border 0.15s, box-shadow 0.15s 0.2s, color 0.15s;transition:background 0.15s, border 0.15s, box-shadow 0.15s 0.2s, color 0.15s, -webkit-box-shadow 0.15s 0.2s}pn-segment label>pn-icon{margin-right:0.5em}pn-segment label pn-icon svg path{-webkit-transition:fill 0.15s;transition:fill 0.15s}";
 const PnSegment$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

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

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, forceUpdate, h, Host } from '@stencil/core/internal/client';
-const pnSegmentedControlCss = "pn-segmented-control{position:relative;display:inline-block;max-width:100%;overflow:hidden;border-radius:3em;-webkit-transition:-webkit-box-shadow 0.15s;transition:-webkit-box-shadow 0.15s;transition:box-shadow 0.15s;transition:box-shadow 0.15s, -webkit-box-shadow 0.15s;-webkit-transform:translateZ(0);transform:translateZ(0)}.pn-segmented-control{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;border-radius:3em;min-height:3em;padding:0.25em;background:#F3F2F2;position:relative;overflow-x:auto;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory}.pn-segmented-control::-webkit-scrollbar{display:none}.pn-segmented-control>.pn-sc-bg{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);will-change:transform;left:0;border-radius:inherit;-webkit-transition:width 0.25s cubic-bezier(0.29, 0.15, 0.24, 0.97), background 0.15s, opacity 0.15s, -webkit-transform 0.25s cubic-bezier(0.29, 0.15, 0.24, 0.97), -webkit-box-shadow 0.15s;transition:width 0.25s cubic-bezier(0.29, 0.15, 0.24, 0.97), background 0.15s, opacity 0.15s, -webkit-transform 0.25s cubic-bezier(0.29, 0.15, 0.24, 0.97), -webkit-box-shadow 0.15s;transition:width 0.25s cubic-bezier(0.29, 0.15, 0.24, 0.97), transform 0.25s cubic-bezier(0.29, 0.15, 0.24, 0.97), background 0.15s, opacity 0.15s, box-shadow 0.15s;transition:width 0.25s cubic-bezier(0.29, 0.15, 0.24, 0.97), transform 0.25s cubic-bezier(0.29, 0.15, 0.24, 0.97), background 0.15s, opacity 0.15s, box-shadow 0.15s, -webkit-transform 0.25s cubic-bezier(0.29, 0.15, 0.24, 0.97), -webkit-box-shadow 0.15s}.pn-segmented-control>.pn-sc-bg.pn-sc-active{-webkit-box-shadow:0px 0.3px 0.9px rgba(0, 0, 0, 0.1), 0px 1.6px 3.6px rgba(0, 0, 0, 0.13);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.1rem solid #005D92;background:#FFFFFF;z-index:1}.pn-segmented-control>.pn-sc-bg.pn-sc-hover{background:#E0F8FF;opacity:0;border:0.5rem solid transparent;z-index:0}@media (hover: hover){.pn-segmented-control:hover .pn-sc-hover{opacity:1}}pn-segmented-control:focus-within,pn-segmented-control:active{-webkit-box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005D92;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005D92}pn-segmented-control .pn-sc-arrows{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);left:0;height:100%;width:100%;z-index:3;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;pointer-events:none}pn-segmented-control .pn-sc-arrows svg{width:1.5em}pn-segmented-control .pn-sc-arrows svg path{fill:#005D92}pn-segmented-control .pn-sc-arrows>*{-webkit-transition:opacity 0.2s, background 0.1s, -webkit-transform 0.2s, -webkit-box-shadow 0.1s;transition:opacity 0.2s, background 0.1s, -webkit-transform 0.2s, -webkit-box-shadow 0.1s;transition:transform 0.2s, opacity 0.2s, background 0.1s, box-shadow 0.1s;transition:transform 0.2s, opacity 0.2s, background 0.1s, box-shadow 0.1s, -webkit-transform 0.2s, -webkit-box-shadow 0.1s;pointer-events:all;width:2.5em;height:2.5em;background:white;border:none;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;cursor:pointer;opacity:0;will-change:transform;-webkit-tap-highlight-color:transparent}pn-segmented-control .pn-sc-arrows>*.pn-sc-arrow-left{-webkit-transform:translateX(-100%);transform:translateX(-100%);border-radius:0 50% 50% 0;padding:0 0.3em 0 0;-webkit-box-shadow:0.2rem 0.3rem 0.2rem rgba(0, 0, 0, 0.4);box-shadow:0.2rem 0.3rem 0.2rem rgba(0, 0, 0, 0.4)}pn-segmented-control .pn-sc-arrows>*.pn-sc-arrow-right{-webkit-transform:translateX(100%);transform:translateX(100%);border-radius:50% 0 0 50%;padding:0 0 0 0.3em;-webkit-box-shadow:-0.2rem 0.3rem 0.2rem rgba(0, 0, 0, 0.4);box-shadow:-0.2rem 0.3rem 0.2rem rgba(0, 0, 0, 0.4)}pn-segmented-control .pn-sc-arrows.pn-sc-left-visible .pn-sc-arrow-left,pn-segmented-control .pn-sc-arrows.pn-sc-right-visible .pn-sc-arrow-right{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}";
+const pnSegmentedControlCss = "pn-segmented-control{position:relative;display:inline-block;max-width:100%;overflow:hidden;border-radius:3em;-webkit-transition:-webkit-box-shadow 0.15s;transition:-webkit-box-shadow 0.15s;transition:box-shadow 0.15s;transition:box-shadow 0.15s, -webkit-box-shadow 0.15s;-webkit-transform:translateZ(0);transform:translateZ(0)}.pn-segmented-control{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;border-radius:3em;min-height:3em;padding:0.25em;background:#f3f2f2;position:relative;overflow-x:auto;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory}.pn-segmented-control::-webkit-scrollbar{display:none}.pn-segmented-control>.pn-sc-bg{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);will-change:transform;left:0;border-radius:inherit;-webkit-transition:width 0.25s cubic-bezier(0.29, 0.15, 0.24, 0.97), background 0.15s, opacity 0.15s, -webkit-transform 0.25s cubic-bezier(0.29, 0.15, 0.24, 0.97), -webkit-box-shadow 0.15s;transition:width 0.25s cubic-bezier(0.29, 0.15, 0.24, 0.97), background 0.15s, opacity 0.15s, -webkit-transform 0.25s cubic-bezier(0.29, 0.15, 0.24, 0.97), -webkit-box-shadow 0.15s;transition:width 0.25s cubic-bezier(0.29, 0.15, 0.24, 0.97), transform 0.25s cubic-bezier(0.29, 0.15, 0.24, 0.97), background 0.15s, opacity 0.15s, box-shadow 0.15s;transition:width 0.25s cubic-bezier(0.29, 0.15, 0.24, 0.97), transform 0.25s cubic-bezier(0.29, 0.15, 0.24, 0.97), background 0.15s, opacity 0.15s, box-shadow 0.15s, -webkit-transform 0.25s cubic-bezier(0.29, 0.15, 0.24, 0.97), -webkit-box-shadow 0.15s}.pn-segmented-control>.pn-sc-bg.pn-sc-active{-webkit-box-shadow:0px 0.3px 0.9px rgba(0, 0, 0, 0.1), 0px 1.6px 3.6px rgba(0, 0, 0, 0.13);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.1rem solid #005d92;background:#ffffff;z-index:1}.pn-segmented-control>.pn-sc-bg.pn-sc-hover{background:#e0f8ff;opacity:0;border:0.5rem solid transparent;z-index:0}@media (hover: hover){.pn-segmented-control:hover .pn-sc-hover{opacity:1}}pn-segmented-control:focus-within,pn-segmented-control:active{-webkit-box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005d92;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005d92}pn-segmented-control .pn-sc-arrows{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);left:0;height:100%;width:100%;z-index:3;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;pointer-events:none}pn-segmented-control .pn-sc-arrows svg{width:1.5em}pn-segmented-control .pn-sc-arrows svg path{fill:#005d92}pn-segmented-control .pn-sc-arrows>*{-webkit-transition:opacity 0.2s, background 0.1s, -webkit-transform 0.2s, -webkit-box-shadow 0.1s;transition:opacity 0.2s, background 0.1s, -webkit-transform 0.2s, -webkit-box-shadow 0.1s;transition:transform 0.2s, opacity 0.2s, background 0.1s, box-shadow 0.1s;transition:transform 0.2s, opacity 0.2s, background 0.1s, box-shadow 0.1s, -webkit-transform 0.2s, -webkit-box-shadow 0.1s;pointer-events:all;width:2.5em;height:2.5em;background:white;border:none;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;cursor:pointer;opacity:0;will-change:transform;-webkit-tap-highlight-color:transparent}pn-segmented-control .pn-sc-arrows>*.pn-sc-arrow-left{-webkit-transform:translateX(-100%);transform:translateX(-100%);border-radius:0 50% 50% 0;padding:0 0.3em 0 0;-webkit-box-shadow:0.2rem 0.3rem 0.2rem rgba(0, 0, 0, 0.4);box-shadow:0.2rem 0.3rem 0.2rem rgba(0, 0, 0, 0.4)}pn-segmented-control .pn-sc-arrows>*.pn-sc-arrow-right{-webkit-transform:translateX(100%);transform:translateX(100%);border-radius:50% 0 0 50%;padding:0 0 0 0.3em;-webkit-box-shadow:-0.2rem 0.3rem 0.2rem rgba(0, 0, 0, 0.4);box-shadow:-0.2rem 0.3rem 0.2rem rgba(0, 0, 0, 0.4)}pn-segmented-control .pn-sc-arrows.pn-sc-left-visible .pn-sc-arrow-left,pn-segmented-control .pn-sc-arrows.pn-sc-right-visible .pn-sc-arrow-right{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}";
 const PnSegmentedControl$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -16,12 +16,29 @@ const PnSegmentedControl$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
   }
   changeHandler({ target }) {
     this.value = target.value;
-    this.currentSelection = target.closest('pn-segment');
+    this.selectSegment(target.closest('pn-segment'));
   }
   handleResize() {
     this.rerender();
   }
-  selectionHandler() {
+  valueHandler() {
+    this.selectSegment(false);
+  }
+  selectSegment(el) {
+    if (el) {
+      this.currentSelection = el;
+      this.rerender();
+      return;
+    }
+    this.segments.forEach(segmentEl => {
+      if (this.value === segmentEl.value) {
+        this.currentSelection = segmentEl;
+        segmentEl.setAttribute('selected', 'true');
+      }
+      else {
+        segmentEl.removeAttribute('selected');
+      }
+    });
     this.rerender();
   }
   componentDidLoad() {
@@ -38,6 +55,7 @@ const PnSegmentedControl$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
     this.hoverBg = this.hostElement.querySelector('.pn-sc-hover');
     this.hostElement.addEventListener('mouseover', ({ target }) => this.calcHighlight(target, this.hoverBg));
     this.setActiveSegment();
+    this.rerender();
   }
   setActiveSegment() {
     this.segments = Array.from(this.hostElement.querySelectorAll('pn-segment'));
@@ -57,15 +75,17 @@ const PnSegmentedControl$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
   }
   /*---------------------------------------HIGHLIGHT LOGIC-------------------------------------------*/
   calcHighlight(el, bgEl) {
-    if (!(el === null || el === void 0 ? void 0 : el.closest('pn-segment')))
-      return;
-    const elRect = el.closest('pn-segment').getBoundingClientRect();
-    const { left: hostLeft } = this.segmentContainer.getBoundingClientRect();
-    const { left: segmentLeft, height: segmentHeight, width: segmentWidth } = elRect;
-    const offset = segmentLeft - hostLeft + this.segmentContainer.scrollLeft;
-    bgEl.style.setProperty('transform', `translate(${offset}px, -50%`);
-    bgEl.style.setProperty('width', `${segmentWidth}px`);
-    bgEl.style.setProperty('height', `${segmentHeight}px`);
+    requestAnimationFrame(() => {
+      if (!(el === null || el === void 0 ? void 0 : el.closest('pn-segment')))
+        return;
+      const elRect = el.closest('pn-segment').getBoundingClientRect();
+      const { left: hostLeft } = this.segmentContainer.getBoundingClientRect();
+      const { left: segmentLeft, height: segmentHeight, width: segmentWidth } = elRect;
+      const offset = segmentLeft - hostLeft + this.segmentContainer.scrollLeft;
+      bgEl.style.setProperty('transform', `translate(${offset}px, -50%`);
+      bgEl.style.setProperty('width', `${segmentWidth}px`);
+      bgEl.style.setProperty('height', `${segmentHeight}px`);
+    });
   }
   /*---------------------------------------/HIGHLIGHT LOGIC-------------------------------------------*/
   /*---------------------------------------SCROLL ARROW LOGIC-------------------------------------------*/
@@ -110,7 +130,7 @@ const PnSegmentedControl$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
   }
   get hostElement() { return this; }
   static get watchers() { return {
-    "currentSelection": ["selectionHandler"]
+    "value": ["valueHandler"]
   }; }
   static get style() { return pnSegmentedControlCss; }
 }, [4, "pn-segmented-control", {