@postnord/pn-marketweb-components 2.0.74 → 2.0.76

package/umd/modules/@postnord/web-components/collection/components/input/pn-nav-dropdown/pn-nav-dropdown.css

@@ -16,14 +16,14 @@ pn-nav-dropdown > button {
   overflow: hidden;
   display: flex;
   align-items: center;
-  color: #005D92;
+  color: #005d92;
   font-weight: normal;
 }
 pn-nav-dropdown > button:focus {
-  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;
+  background: #effbff;
 }
 
 .pn-nav-dropdown-label > pn-icon {
@@ -44,7 +44,7 @@ pn-nav-dropdown > button:hover, pn-nav-dropdown > button:focus {
   max-width: min(95vw, 40em);
   max-height: 80vh;
   z-index: 10;
-  background: #FFFFFF;
+  background: #ffffff;
 }
 
 pn-nav-dropdown.nav-dropdown-right .nav-dropdown-content-container {
@@ -76,7 +76,7 @@ pn-nav-dropdown .pn-ripple {
   animation: ripple 0.4s cubic-bezier(0.6, 0, 0.4, 1);
   position: absolute;
   border-radius: 50%;
-  background: #005D92;
+  background: #005d92;
   transform: translate(-50%, -50%) scale(0);
   opacity: 0.1;
   pointer-events: none;

package/umd/modules/@postnord/web-components/collection/components/input/pn-option/pn-option.css

@@ -13,8 +13,8 @@ pn-option pn-checkbox {
   margin-right: 0.5em;
 }
 pn-option:hover, pn-option:focus {
-  background-color: #E0F8FF;
+  background-color: #e0f8ff;
 }
 pn-option:focus {
-  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;
 }

package/umd/modules/@postnord/web-components/collection/components/input/pn-radio-button/pn-radio-button.css

@@ -14,7 +14,7 @@ pn-radio-button input[type=radio] + label {
 }
 pn-radio-button input[type=radio] + label .pn-radio-outer {
   background: #fff;
-  border: 0.1em solid #D3CECB;
+  border: 0.1em solid #d3cecb;
   border-radius: 50%;
   height: 1.5em;
   width: 1.5em;
@@ -28,7 +28,7 @@ pn-radio-button input[type=radio] + label .pn-radio-inner {
   transform: scale(0);
   height: 1em;
   width: 1em;
-  background-color: #005D92;
+  background-color: #005d92;
   border-radius: 50%;
   transform-origin: center center;
   transition: transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92);
@@ -37,14 +37,14 @@ pn-radio-button input[type=radio]:checked + label .pn-radio-inner {
   transform: scale(1);
 }
 pn-radio-button input[type=radio]:checked + label .pn-radio-outer {
-  border: 0.1rem solid #005D92;
+  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 {
-  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;
+  border: 0.1rem solid #005d92;
+  background: #e0f8ff;
 }
 pn-radio-button input[type=radio]:disabled + label {
   cursor: not-allowed;
@@ -52,7 +52,7 @@ pn-radio-button input[type=radio]:disabled + label {
 pn-radio-button input[type=radio]:disabled + label .pn-radio-outer {
   cursor: not-allowed;
   border: 0.1rem solid #969087;
-  background-color: #D3CECB;
+  background-color: #d3cecb;
 }
 pn-radio-button input[type=radio]:disabled + label .pn-radio-inner {
   cursor: not-allowed;

package/umd/modules/@postnord/web-components/collection/components/input/pn-radio-tile/pn-radio-tile.css

@@ -16,15 +16,15 @@ pn-radio-tile > label {
   cursor: pointer;
   overflow: hidden;
   position: relative;
-  background: #FFFFFF;
+  background: #ffffff;
   padding: 0.5em 1em;
   border-radius: 0.5em;
   display: flex;
   align-items: center;
   gap: 0.5em;
-  color: #005D92;
+  color: #005d92;
   font-weight: 500;
-  border: 0.1em solid #D3CECB;
+  border: 0.1em solid #d3cecb;
   transition-property: box-shadow, background, border;
   transition-duration: 0.15s;
 }
@@ -34,16 +34,16 @@ pn-radio-tile > label > [slot=illustration] {
   max-height: 2.5em;
 }
 pn-radio-tile > label:hover {
-  background: #EFFBFF;
-  border: 0.1em solid #00A0D6;
+  background: #effbff;
+  border: 0.1em solid #00a0d6;
 }
 
 pn-radio-tile input[type=radio]:focus:checked + label {
-  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;
+  border: 0.1em solid #005d92;
+  background: #effbff;
   box-shadow: 0px 3.2000000477px 7.1999998093px 0px #00000021, 0px 0.6000000238px 1.7999999523px 0px #0000001a;
 }

package/umd/modules/@postnord/web-components/collection/components/input/pn-search-field/pn-search-field.css

@@ -26,7 +26,7 @@ pn-search-field input {
   -webkit-font-smoothing: antialiased;
   outline: none;
   border-radius: 3em;
-  border: 0.1rem solid #5E554A;
+  border: 0.1rem solid #5e554a;
   transition: box-shadow 0.15s, border 0.15s;
   color: #000000;
   width: 100%;
@@ -39,14 +39,14 @@ pn-search-field input::placeholder {
   font-weight: normal;
 }
 pn-search-field input:focus {
-  border: 0.1rem solid #005D92;
-  box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.4rem #005D92;
+  border: 0.1rem solid #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;
+  border: 0.1rem solid #00a0d6;
 }
 pn-search-field input:disabled {
-  background: #F3F2F2;
+  background: #f3f2f2;
   border: none;
 }
 
@@ -73,7 +73,7 @@ pn-search-field > .input-container button {
   transform: translate(100%, -50%);
   background: none;
   border: none;
-  color: #005D92;
+  color: #005d92;
   padding: 0.3rem;
   margin: 0;
   font-size: 0.875em;
@@ -87,13 +87,13 @@ pn-search-field > .input-container button.clear, pn-search-field > .input-contai
   cursor: pointer;
 }
 pn-search-field > .input-container button:focus {
-  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;
+  background: #e0f8ff;
 }
 pn-search-field > .input-container button:active {
-  background: #005D92;
+  background: #005d92;
 }
 pn-search-field > .input-container button:active pn-icon svg,
 pn-search-field > .input-container button:active pn-icon svg path {

package/umd/modules/@postnord/web-components/collection/components/input/pn-search-field/pn-search-field.js

@@ -16,6 +16,7 @@ export class PnSearchField {
     this.button = '';
     /** Light instead of dark search button */
     this.light = false;
+    this.ariaLabel = null;
   }
   inputHandler() {
     this.update.emit(this.value);
@@ -49,14 +50,14 @@ export class PnSearchField {
   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("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" },
+          (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() },
+          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))));
+      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))));
   }
   static get is() { return "pn-search-field"; }
   static get originalStyleUrls() { return {
@@ -263,6 +264,24 @@ export class PnSearchField {
       "attribute": "light",
       "reflect": false,
       "defaultValue": "false"
+    },
+    "ariaLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "aria-label",
+      "reflect": false,
+      "defaultValue": "null"
     }
   }; }
   static get events() { return [{

package/umd/modules/@postnord/web-components/collection/components/input/pn-segmented-control/controller/pn-segmented-control.css

@@ -14,7 +14,7 @@ pn-segmented-control {
   border-radius: 3em;
   min-height: 3em;
   padding: 0.25em;
-  background: #F3F2F2;
+  background: #f3f2f2;
   position: relative;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
@@ -34,12 +34,12 @@ pn-segmented-control {
 }
 .pn-segmented-control > .pn-sc-bg.pn-sc-active {
   box-shadow: 0px 0.3px 0.9px rgba(0, 0, 0, 0.1), 0px 1.6px 3.6px rgba(0, 0, 0, 0.13);
-  border: 0.1rem solid #005D92;
-  background: #FFFFFF;
+  border: 0.1rem solid #005d92;
+  background: #ffffff;
   z-index: 1;
 }
 .pn-segmented-control > .pn-sc-bg.pn-sc-hover {
-  background: #E0F8FF;
+  background: #e0f8ff;
   opacity: 0;
   border: 0.5rem solid transparent;
   z-index: 0;
@@ -52,7 +52,7 @@ pn-segmented-control {
 }
 pn-segmented-control:focus-within,
 pn-segmented-control:active {
-  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;
 }
 
 /*---------------------------------------ARROWS-------------------------------------------*/
@@ -73,7 +73,7 @@ pn-segmented-control .pn-sc-arrows svg {
   width: 1.5em;
 }
 pn-segmented-control .pn-sc-arrows svg path {
-  fill: #005D92;
+  fill: #005d92;
 }
 pn-segmented-control .pn-sc-arrows > * {
   transition: transform 0.2s, opacity 0.2s, background 0.1s, box-shadow 0.1s;

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

@@ -11,12 +11,29 @@ export class PnSegmentedControl {
   }
   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() {
@@ -33,6 +50,7 @@ export class PnSegmentedControl {
     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'));
@@ -52,15 +70,17 @@ export class PnSegmentedControl {
   }
   /*---------------------------------------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-------------------------------------------*/
@@ -166,8 +186,8 @@ export class PnSegmentedControl {
   }; }
   static get elementRef() { return "hostElement"; }
   static get watchers() { return [{
-      "propName": "currentSelection",
-      "methodName": "selectionHandler"
+      "propName": "value",
+      "methodName": "valueHandler"
     }]; }
   static get listeners() { return [{
       "name": "change",

package/umd/modules/@postnord/web-components/collection/components/input/pn-segmented-control/segment/pn-segment.css

@@ -1,6 +1,6 @@
 pn-segment {
   position: relative;
-  color: #005D92;
+  color: #005d92;
   margin-right: 0.5em;
   z-index: 2;
   white-space: nowrap;

package/umd/modules/@postnord/web-components/collection/components/input/pn-select/pn-select.css

@@ -21,10 +21,10 @@ pn-select.select-label > label {
   left: 0;
   transform: translateY(-100%);
   font-size: 0.875em;
-  color: #5E554A;
+  color: #5e554a;
 }
 pn-select.select-error {
-  color: #A70707;
+  color: #a70707;
 }
 pn-select.select-error.select-error-message {
   padding-bottom: 1.9em;
@@ -33,16 +33,16 @@ pn-select.select-error.select-error-message .select-content {
   margin-bottom: 1.9em;
 }
 pn-select.select-error > label {
-  color: #A70707;
+  color: #a70707;
 }
 pn-select.select-error .current-selection > pn-option {
-  color: #A70707;
+  color: #a70707;
 }
 pn-select.select-error .current-selection > svg.arrow {
-  fill: #A70707;
+  fill: #a70707;
 }
 pn-select.select-error > small {
-  color: #A70707;
+  color: #a70707;
   font-size: 0.75em;
   font-size: max(.6em, 1.2rem);
   position: absolute;
@@ -56,7 +56,7 @@ pn-select.select-error > small > pn-icon {
 pn-select.select-error .select-bg-top,
 pn-select.select-error .select-bg-bottom,
 pn-select.select-error .select-bg {
-  border-color: #A70707;
+  border-color: #a70707;
 }
 pn-select > span {
   min-height: 1.5em;
@@ -69,19 +69,19 @@ pn-select > span {
 pn-select:hover .select-bg,
 pn-select:hover .select-bg-top,
 pn-select:hover .select-bg-bottom {
-  border-color: #00A0D6;
+  border-color: #00a0d6;
 }
 pn-select:focus .select-bg-top, pn-select:focus-within .select-bg-top, pn-select:not(.search):active .select-bg-top {
-  border-color: #005D92;
-  box-shadow: -0.1rem -0.1rem 0 0 #005D92, 0.1rem -0.1rem 0 0 #005D92;
+  border-color: #005d92;
+  box-shadow: -0.1rem -0.1rem 0 0 #005d92, 0.1rem -0.1rem 0 0 #005d92;
 }
 pn-select:focus .select-bg, pn-select:focus-within .select-bg, pn-select:not(.search):active .select-bg {
-  border-color: #005D92;
-  box-shadow: -0.1rem 0 0 0 #005D92, -0.1rem 0 0 0 #005D92, 0.1rem 0 0 0 #005D92, 0.1rem 0 0 0 #005D92;
+  border-color: #005d92;
+  box-shadow: -0.1rem 0 0 0 #005d92, -0.1rem 0 0 0 #005d92, 0.1rem 0 0 0 #005d92, 0.1rem 0 0 0 #005d92;
 }
 pn-select:focus .select-bg-bottom, pn-select:focus-within .select-bg-bottom, pn-select:not(.search):active .select-bg-bottom {
-  border-color: #005D92;
-  box-shadow: 0.1rem 0.1rem 0 0 #005D92, -0.1rem 0.1rem 0 0 #005D92;
+  border-color: #005d92;
+  box-shadow: 0.1rem 0.1rem 0 0 #005d92, -0.1rem 0.1rem 0 0 #005d92;
 }
 
 .current-selection {
@@ -97,7 +97,7 @@ pn-select:focus .select-bg-bottom, pn-select:focus-within .select-bg-bottom, pn-
 }
 .current-selection pn-option {
   pointer-events: none;
-  color: #005D92;
+  color: #005d92;
   font-weight: 500;
   overflow: hidden;
   white-space: nowrap;
@@ -110,7 +110,7 @@ pn-select:focus .select-bg-bottom, pn-select:focus-within .select-bg-bottom, pn-
 }
 .current-selection > svg.arrow {
   transition: transform 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s;
-  fill: #005D92;
+  fill: #005d92;
   flex-shrink: 0;
   margin-left: 0.5em;
 }
@@ -150,14 +150,14 @@ div.select-options > * {
   width: 100%;
 }
 div.select-options > hr {
-  border: 0.1rem solid #005D92;
+  border: 0.1rem solid #005d92;
   border-bottom: 0;
   margin: 0.6em 0 0;
   opacity: 0;
   transition: opacity 0.4s;
 }
 div.select-options input[type=text] {
-  border: 0.1rem solid #5E554A;
+  border: 0.1rem solid #5e554a;
   width: 100%;
   padding: 0.5em;
   border-radius: 0.8rem;
@@ -165,11 +165,11 @@ div.select-options input[type=text] {
   transition: box-shadow 0.1s ease-in-out, border 0.1s;
 }
 div.select-options input[type=text]:hover {
-  border: 0.1rem solid #00A0D6;
+  border: 0.1rem solid #00a0d6;
 }
 div.select-options input[type=text]:focus {
-  box-shadow: 0 0 0 0.1rem #005D92;
-  border: 0.1rem solid #005D92;
+  box-shadow: 0 0 0 0.1rem #005d92;
+  border: 0.1rem solid #005d92;
 }
 div.select-options .select-search,
 div.select-options pn-option {

package/umd/modules/@postnord/web-components/collection/components/input/pn-toggle-switch/pn-toggle-switch.css

@@ -72,13 +72,13 @@ pn-toggle-switch .pn-toggle-switch + .pn-toggle .bg {
   background: #969087;
 }
 pn-toggle-switch .pn-toggle-switch:focus + .pn-toggle .bg, pn-toggle-switch .pn-toggle-switch:active + .pn-toggle .bg {
-  box-shadow: 0 0 0 0.3rem white, 0 0 0 0.6rem #005D92;
+  box-shadow: 0 0 0 0.3rem white, 0 0 0 0.6rem #005d92;
 }
 pn-toggle-switch .pn-toggle-switch:hover + .pn-toggle .bg {
-  background: #5E554A;
+  background: #5e554a;
 }
 pn-toggle-switch .pn-toggle-switch:hover:checked + .pn-toggle .bg {
-  background: #0D234B;
+  background: #0d234b;
   opacity: 1;
 }
 pn-toggle-switch .pn-toggle-switch:indeterminate + .pn-toggle {
@@ -92,7 +92,7 @@ pn-toggle-switch .pn-toggle-switch:indeterminate + .pn-toggle pn-spinner {
   transition-delay: 0.3s;
 }
 pn-toggle-switch .pn-toggle-switch:checked + .pn-toggle .bg {
-  background: #005D92;
+  background: #005d92;
 }
 pn-toggle-switch .pn-toggle-switch:checked + .pn-toggle > .circle {
   transform: translateX(100%);
@@ -109,5 +109,5 @@ pn-toggle-switch .pn-toggle-switch:disabled:hover + .pn-toggle .bg {
   background: #969087;
 }
 pn-toggle-switch .pn-toggle-switch:disabled:hover:checked + .pn-toggle .bg {
-  background: #005D92;
+  background: #005d92;
 }