@postnord/pn-marketweb-components 2.0.73 → 2.0.75

package/umd/modules/@postnord/web-components/collection/components/feedback/pn-toast/pn-toast.css

@@ -2,12 +2,12 @@ pn-toast.pn-toast {
   /* -----------------DEFAULT AND COMMONS----------------- */
   color: #000;
   padding: 1em;
-  border: 0.1rem solid #005D92;
+  border: 0.1rem solid #005d92;
   border-radius: 0.8rem;
   outline: none;
   font-size: 1em;
   font-weight: 400;
-  background: #E0F8FF;
+  background: #e0f8ff;
   display: inline-flex;
   align-items: flex-start;
   opacity: 1;
@@ -30,7 +30,7 @@ pn-toast.pn-toast[data-hidden] {
   transition: visibility 0s linear 0.35s, opacity 0.35s, box-shadow 0.2s;
 }
 pn-toast.pn-toast pn-icon svg path {
-  fill: #005D92;
+  fill: #005d92;
   transition: fill 0.3s;
 }
 pn-toast.pn-toast > .content {
@@ -55,40 +55,40 @@ pn-toast.pn-toast button {
   justify-content: center;
 }
 pn-toast.pn-toast button:hover {
-  background: #8EDDF9;
+  background: #8eddf9;
 }
 pn-toast.pn-toast button:focus {
-  background: #8EDDF9;
-  box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.4rem #005D92;
+  background: #8eddf9;
+  box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.4rem #005d92;
 }
 pn-toast.pn-toast.pn-toast-warning {
-  border: 0.1rem solid #A70707;
-  background: #FDEFEE;
+  border: 0.1rem solid #a70707;
+  background: #fdefee;
 }
 pn-toast.pn-toast.pn-toast-warning button:hover {
-  background: #FBC2C1;
+  background: #fbc2c1;
 }
 pn-toast.pn-toast.pn-toast-warning button:focus {
-  background: #FBC2C1;
-  box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.4rem #A70707;
+  background: #fbc2c1;
+  box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.4rem #a70707;
 }
 pn-toast.pn-toast.pn-toast-warning pn-icon svg path {
-  fill: #A70707;
+  fill: #a70707;
   transition: fill 0.3s;
 }
 pn-toast.pn-toast.pn-toast-success {
-  border: 0.1rem solid #005E41;
-  background: #DCF6E7;
+  border: 0.1rem solid #005e41;
+  background: #dcf6e7;
 }
 pn-toast.pn-toast.pn-toast-success button:focus {
-  background: #ABE3BB;
-  box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.4rem #005E41;
+  background: #abe3bb;
+  box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.4rem #005e41;
 }
 pn-toast.pn-toast.pn-toast-success button:hover {
-  background: #ABE3BB;
+  background: #abe3bb;
 }
 pn-toast.pn-toast.pn-toast-success pn-icon svg path {
-  fill: #005E41;
+  fill: #005e41;
   transition: fill 0.3s;
 }
 pn-toast.pn-toast.pn-toast-temporary {

package/umd/modules/@postnord/web-components/collection/components/feedback/pn-tooltip/pn-tooltip.css

@@ -15,21 +15,21 @@ button.pn-tooltip {
   font-size: inherit;
 }
 button.pn-tooltip:focus {
-  box-shadow: 0 0 0 0.1rem #FFFFFF, 0 0 0 0.3rem #005D92;
-  background: #E0F8FF;
+  box-shadow: 0 0 0 0.1rem #ffffff, 0 0 0 0.3rem #005d92;
+  background: #e0f8ff;
 }
 button.pn-tooltip:hover {
-  background: #E0F8FF;
+  background: #e0f8ff;
 }
 button.pn-tooltip.tooltip-white:focus, button.pn-tooltip.tooltip-white:hover {
-  background: #0D234B;
+  background: #0d234b;
 }
 
 button.pn-tooltip > .pn-tooltip-content {
   position: absolute;
   bottom: calc(100% + 0.75em);
   left: 50%;
-  background: #FFFFFF;
+  background: #ffffff;
   padding: 1em;
   border-radius: 0.8rem;
   box-shadow: 0 1.2px 3.6px rgba(0, 0, 0, 0.1), 0 6.4px 14.4px rgba(0, 0, 0, 0.13);
@@ -53,7 +53,7 @@ button.pn-tooltip > pn-icon:before {
   height: 0;
   border-left: 0.75em solid transparent;
   border-right: 0.75em solid transparent;
-  border-top: 0.75em solid #FFFFFF;
+  border-top: 0.75em solid #ffffff;
   filter: drop-shadow(0 0.3rem 0.1rem rgba(0, 0, 0, 0.075));
   transform: scale(0) translateX(-50%);
   bottom: 102%;
@@ -77,7 +77,7 @@ button.pn-tooltip.pn-tooltip-downwards pn-icon:before {
   transform-origin: top left;
   filter: drop-shadow(0 -0.3rem 0.1rem rgba(0, 0, 0, 0.02));
   border-top: none;
-  border-bottom: 0.75em solid #FFFFFF;
+  border-bottom: 0.75em solid #ffffff;
 }
 
 /*---------------------------------------/DOWNWARDS-------------------------------------------*/

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

@@ -32,10 +32,10 @@ pn-calendar .pn-calendar-container .pn-calendar-nav .nav-next {
 }
 pn-calendar .pn-calendar-container .pn-calendar-nav .pn-calendar-month {
   padding: 1em;
-  border: 0.1rem solid #5E554A;
+  border: 0.1rem solid #5e554a;
   border-radius: 0.8rem;
   font-size: 1.2rem;
-  color: #5E554A;
+  color: #5e554a;
   font-weight: 500;
   text-align: center;
 }
@@ -60,7 +60,7 @@ pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-day-names {
 }
 pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days,
 pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months {
-  color: #5E554A;
+  color: #5e554a;
   padding: 0.8rem 0;
 }
 pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days:last-child,
@@ -79,7 +79,7 @@ pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-m
 pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-day.disable-day,
 pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-month.disable-day {
   cursor: default;
-  color: #D3CECB;
+  color: #d3cecb;
 }
 pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-day.disable-day:hover,
 pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-month.disable-day:hover,
@@ -91,13 +91,13 @@ pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-d
 pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-month.today,
 pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-day.today,
 pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-month.today {
-  outline: 0.1rem solid #D3CECB;
+  outline: 0.1rem solid #d3cecb;
 }
 pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-day:hover,
 pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-month:hover,
 pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-day:hover,
 pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-month:hover {
-  border-bottom-color: #00A0D6;
+  border-bottom-color: #00a0d6;
 }
 pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-day:active, pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-day.selected,
 pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-month:active,
@@ -106,5 +106,5 @@ pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar
 pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-day.selected,
 pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-month:active,
 pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-month.selected {
-  border-bottom-color: #005D92;
+  border-bottom-color: #005d92;
 }

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

@@ -15,16 +15,16 @@ pn-check-tile > label {
   position: relative;
   overflow: hidden;
   cursor: pointer;
-  background: #FFFFFF;
+  background: #ffffff;
   padding: 0.5em 1em;
   border-radius: 0.5em;
   display: flex;
   align-items: center;
   justify-content: 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;
   user-select: none;
@@ -50,17 +50,17 @@ pn-check-tile > label > .pn-check-tile-content > svg {
   width: 1.5em;
   height: 1.5em;
   border-radius: 0.25em;
-  border: #D3CECB 0.1em solid;
+  border: #d3cecb 0.1em solid;
   padding: 0.15em;
   transition: border 0.15s, background 0.15s;
 }
 pn-check-tile > label > .pn-check-tile-content > svg .checkmark-path {
-  stroke: #D3CECB;
+  stroke: #d3cecb;
   stroke-dasharray: 23;
   stroke-dashoffset: 0;
 }
 pn-check-tile > label > .pn-check-tile-content > svg .checkmark-path-checked {
-  stroke: #005D92;
+  stroke: #005d92;
 }
 pn-check-tile > label > .pn-check-tile-content > svg polyline {
   stroke-linecap: round;
@@ -70,36 +70,36 @@ pn-check-tile > label > .pn-check-tile-content > svg polyline {
   stroke-dasharray: 23;
 }
 pn-check-tile > label:hover {
-  border: 0.1em solid #00A0D6;
+  border: 0.1em solid #00a0d6;
   box-shadow: 0px 3.2000000477px 7.1999998093px 0px #00000021, 0px 0.6000000238px 1.7999999523px 0px #0000001a;
 }
 pn-check-tile > label:hover > .pn-check-tile-content > svg {
-  border: 0.1em solid #00A0D6;
+  border: 0.1em solid #00a0d6;
 }
 
 /* -----------------FOCUS------------------ */
 pn-check-tile input[type=checkbox]:focus + label {
-  box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.2rem #005D92;
+  box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.2rem #005d92;
 }
 
 pn-check-tile input[type=checkbox]: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;
 }
 
 /* -----------------/FOCUS------------------ */
 /* -----------------CHECKED------------------ */
 pn-check-tile input[type=checkbox]: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;
 }
 pn-check-tile input[type=checkbox]:checked + label > .pn-check-tile-content > svg {
-  background: #005D92;
-  border: 0.1em solid #005D92;
+  background: #005d92;
+  border: 0.1em solid #005d92;
 }
 pn-check-tile input[type=checkbox]:checked + label > .pn-check-tile-content > svg polyline.checkmark-path-checked {
   stroke-dashoffset: 0;
-  stroke: #FFFFFF;
+  stroke: #ffffff;
 }
 
 /* -----------------/CHECKED------------------ */

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

@@ -38,12 +38,12 @@ pn-checkbox input[type=checkbox] + label.pn-checkbox svg polyline {
   transition: stroke-dashoffset 180ms cubic-bezier(0.79, 0.14, 0.15, 0.86);
 }
 pn-checkbox input[type=checkbox]:hover + label.pn-checkbox {
-  border: 0.1rem solid #005D92;
-  background: #E0F8FF;
+  border: 0.1rem solid #005d92;
+  background: #e0f8ff;
 }
 pn-checkbox input[type=checkbox]:checked + label.pn-checkbox, pn-checkbox input[type=checkbox]:indeterminate + label.pn-checkbox {
-  background: #005D92;
-  border: 0.1rem solid #005D92;
+  background: #005d92;
+  border: 0.1rem solid #005d92;
 }
 pn-checkbox input[type=checkbox]:checked + label.pn-checkbox svg polyline, pn-checkbox input[type=checkbox]:indeterminate + label.pn-checkbox svg polyline {
   transition-delay: 220ms;
@@ -58,10 +58,10 @@ pn-checkbox input[type=checkbox]:indeterminate + label.pn-checkbox svg polyline.
   stroke-dashoffset: 0;
 }
 pn-checkbox input[type=checkbox]:focus + label.pn-checkbox, pn-checkbox input[type=checkbox]:active + label.pn-checkbox {
-  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-checkbox input[type=checkbox]:disabled + label.pn-checkbox {
-  background-color: #D3CECB;
+  background-color: #d3cecb;
   border: 0.1rem solid #969087;
   cursor: not-allowed;
 }

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

@@ -4,6 +4,8 @@ export class PnCheckbox {
     this.disabled = false;
     this.checked = false;
     this.indeterminate = false;
+    this.ariaLabel = null;
+    this.ariaDescribedby = null;
   }
   handlechange() {
     this.indeterminate = false;
@@ -22,7 +24,7 @@ export class PnCheckbox {
   }
   render() {
     return (h(Host, null,
-      h("input", { type: "checkbox", id: this.checkboxid, value: this.value, name: this.name || this.checkboxid, disabled: this.disabled, checked: this.checked }),
+      h("input", { type: "checkbox", id: this.checkboxid, value: this.value, name: this.name || this.checkboxid, disabled: this.disabled, checked: this.checked, "aria-describedby": this.ariaDescribedby }),
       h("label", { htmlFor: this.checkboxid, class: "pn-checkbox" },
         h("svg", { 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" }),
@@ -140,6 +142,42 @@ export class PnCheckbox {
       "attribute": "indeterminate",
       "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"
+    },
+    "ariaDescribedby": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "aria-describedby",
+      "reflect": false,
+      "defaultValue": "null"
     }
   }; }
   static get elementRef() { return "hostElement"; }

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

@@ -18,8 +18,8 @@ pn-choice-chip input {
 pn-choice-chip label {
   display: block;
   padding: 0.4rem 0.8rem;
-  border: 0.1rem solid #005D92;
-  color: #005D92;
+  border: 0.1rem solid #005d92;
+  color: #005d92;
   border-radius: 0.8rem;
   text-align: center;
   cursor: pointer;
@@ -27,27 +27,27 @@ pn-choice-chip label {
 }
 
 pn-choice-chip input[type=checkbox]:checked + label.pn-choice-chip, pn-choice-chip input[type=checkbox]:indeterminate + label.pn-choice-chip {
-  background: #005D92;
+  background: #005d92;
   color: #fff;
 }
 pn-choice-chip input[type=checkbox]:hover + label.pn-choice-chip {
-  background: #E0F8FF;
+  background: #e0f8ff;
 }
 pn-choice-chip input[type=checkbox]:focus + label.pn-choice-chip, pn-choice-chip input[type=checkbox]:active + label.pn-choice-chip {
-  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-choice-chip input[type=checkbox]:active + label.pn-choice-chip {
-  background: #8EDDF9;
+  background: #8eddf9;
 }
 pn-choice-chip input[type=checkbox]:disabled + label.pn-choice-chip {
-  background-color: #D3CECB;
+  background-color: #d3cecb;
 }
 pn-choice-chip input[type=checkbox]:checked + label.pn-choice-chip:hover {
-  background: #0D234B;
+  background: #0d234b;
   color: #fff;
 }
 pn-choice-chip input[type=checkbox]:checked + label.pn-choice-chip:active {
-  background: #00A0D6;
-  border: 0.1rem solid #00A0D6;
+  background: #00a0d6;
+  border: 0.1rem solid #00a0d6;
   color: #fff;
 }

package/umd/modules/@postnord/web-components/collection/components/input/pn-date-picker/date-picker.stories.js

@@ -10,7 +10,9 @@ export default {
     disableWeekends: false,
     minDate: '2021-01-01',
     maxDate: '2023-12-31',
-    language: 'en'
+    language: 'en',
+    placeholder: 'YYYY-MM-DD',
+    endPlaceholder: 'YYYY-MM-DD'
   },
   argTypes: {
     disableWeekends: {
@@ -33,6 +35,9 @@ export default {
     },
     end: {
       control: 'text'
+    },
+    endPlaceholder: {
+      name: 'end placeholder'
     }
   }
 };

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

@@ -1,18 +1,18 @@
 pn-date-picker {
   position: relative;
-  display: block;
+  display: inline-block;
 }
 pn-date-picker .weekday {
-  color: #5E554A;
+  color: #5e554a;
   font-weight: 500;
 }
 pn-date-picker .calendar-wrapper {
-  background: #FFFFFF;
+  background: #ffffff;
   border-radius: 0.5em;
   position: absolute;
+  max-width: 22em;
   top: 115%;
   width: 100%;
-  max-width: 22em;
   left: 0;
   overflow: hidden;
   z-index: 5;
@@ -29,7 +29,7 @@ pn-date-picker .calendar-wrapper[data-open] {
   transition-delay: 0s;
 }
 pn-date-picker .calendar-wrapper[data-open] .calendar {
-  max-height: 80vh;
+  max-height: min(30em, 80vh);
   transition-delay: 0s;
 }
 pn-date-picker .calendar {
@@ -50,12 +50,12 @@ pn-date-picker .calendar::-webkit-scrollbar-track {
   background-color: #fff;
 }
 pn-date-picker .calendar::-webkit-scrollbar-thumb {
-  background-color: #005D92;
+  background-color: #005d92;
   border-radius: 1em;
   border: 0.25em solid #fff;
 }
 pn-date-picker .calendar::-webkit-scrollbar-thumb:hover {
-  background-color: #0D234B;
+  background-color: #0d234b;
 }
 pn-date-picker .calendar::-webkit-scrollbar-button {
   display: none;
@@ -110,14 +110,14 @@ pn-date-picker .day[data-today]::after {
   left: 50%;
   transform: translateX(-50%);
   border-radius: 50%;
-  background: #005D92;
+  background: #005d92;
 }
 pn-date-picker .day[data-selected=start][data-today]::after, pn-date-picker .day[data-selected=end][data-today]::after, pn-date-picker .day[data-selected=single][data-today]::after {
-  background: #E0F8FF;
+  background: #e0f8ff;
 }
 pn-date-picker .day[data-selected=start]::before, pn-date-picker .day[data-selected=end]::before, pn-date-picker .day[data-selected=single]::before {
   border-radius: 50%;
-  background-color: #005D92;
+  background-color: #005d92;
 }
 pn-date-picker .day[data-selected=start]::before {
   border-top-right-radius: 0;
@@ -127,7 +127,7 @@ pn-date-picker .day[data-selected=start], pn-date-picker .day[data-selected=end]
   color: white;
 }
 pn-date-picker .day[data-selected=between]::before {
-  background-color: #E0F8FF;
+  background-color: #e0f8ff;
   border-radius: 0;
 }
 pn-date-picker .day[data-selected=end][data-selected=end]::before {
@@ -135,30 +135,29 @@ pn-date-picker .day[data-selected=end][data-selected=end]::before {
   border-bottom-left-radius: 0;
 }
 pn-date-picker .day:focus, pn-date-picker .day:hover {
-  background-color: #EFFBFF;
+  background-color: #effbff;
 }
 
 /* -----------------INPUT FIELDS------------------ */
 pn-date-picker .pn-date-input-container {
-  background: #FFFFFF;
+  background: #ffffff;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 1em;
   width: 100%;
-  max-width: 22em;
   padding: 0.5em 0.5em 0.5em 0.75em;
   border-radius: 0.5em;
   border: 0.1rem solid #969087;
   transition: box-shadow 0.15s;
 }
 pn-date-picker .pn-date-input-container:focus-within {
-  box-shadow: 0 0 0 0.1em #fff, 0 0 0 0.2em #005D92;
+  box-shadow: 0 0 0 0.1em #fff, 0 0 0 0.2em #005d92;
 }
 pn-date-picker .pn-date-input-container .divider {
   width: 0.15em;
   height: 1.15em;
-  background: #005D92;
+  background: #005d92;
   border-radius: 1em;
   flex: 0 0 auto;
 }
@@ -194,11 +193,11 @@ pn-date-picker .pn-date-input-container button.pn-date-calendar {
   padding: 0.2em;
 }
 pn-date-picker .pn-date-input-container button.pn-date-calendar:hover {
-  background: #E0F8FF;
+  background: #e0f8ff;
 }
 pn-date-picker .pn-date-input-container button.pn-date-calendar:focus {
-  box-shadow: 0 0 0 0.1em #fff, 0 0 0 0.2em #005D92;
-  background: #E0F8FF;
+  box-shadow: 0 0 0 0.1em #fff, 0 0 0 0.2em #005d92;
+  background: #e0f8ff;
 }
 
 /* -----------------/INPUT FIELDS------------------ */

package/umd/modules/@postnord/web-components/collection/components/input/pn-date-picker/pn-date-picker.js

@@ -16,9 +16,9 @@ export class PnDatePicker {
     this.range = false;
     this.disableWeekends = false;
     /** Placeholder for the input field (this will be start date if you have a ranged date picker) */
-    this.placeholder = 'YYYY-MM-DD';
+    this.placeholder = '';
     /** Placeholder for end date */
-    this.endPlaceholder = 'YYYY-MM-DD';
+    this.endPlaceholder = '';
     this.currentState = 'idle';
     this.week = [];
     this.months = [];
@@ -28,6 +28,7 @@ export class PnDatePicker {
     this.selectionMade = false;
     this.years = [];
     this.today = new Date();
+    this.shouldScroll = true;
     /* -----------------STATE MACHINE LOGIC------------------ */
     this.machine = {
       initial: 'idle',
@@ -85,15 +86,15 @@ export class PnDatePicker {
     this.setLanguage();
     this.setYears();
   }
-  componentDidLoad() {
-    requestAnimationFrame(() => {
-      const date = this.startDate && this.startDate.getTime() ? this.startDate : new Date();
-      const year = date.getFullYear();
-      const month = this.months[date.getMonth()];
-      const monthEl = document.querySelector(`[data-year="${year}"] [data-month="${month}"]`);
-      monthEl.scrollIntoView();
-    });
-  }
+  // componentDidLoad() {
+  //   requestAnimationFrame(() => {
+  //     const date = this.startDate && this.startDate.getTime() ? this.startDate : new Date();
+  //     const year = date.getFullYear();
+  //     const month = this.months[date.getMonth()];
+  //     const monthEl = this.hostElement.querySelector(`[data-year="${year}"] [data-month="${month}"]`);
+  //     monthEl.scrollIntoView();
+  //   });
+  // }
   /* -----------------/LIFE CYCLE HOOKS------------------ */
   /* -----------------UTILS------------------ */
   makeSelection() {
@@ -115,6 +116,8 @@ export class PnDatePicker {
     this.setDateFromOutside();
   }
   openHandler() {
+    if (this.shouldScroll)
+      this.scrollToMonth();
     if (this.open) {
       document.addEventListener('click', this.handleGlobalClick);
       return;
@@ -123,6 +126,14 @@ export class PnDatePicker {
       this.endDate = null;
     document.removeEventListener('click', this.handleGlobalClick);
   }
+  scrollToMonth() {
+    this.shouldScroll = false;
+    const date = this.startDate && this.startDate.getTime() ? this.startDate : new Date();
+    const year = date.getFullYear();
+    const month = this.months[date.getMonth()];
+    const monthEl = this.hostElement.querySelector(`[data-year="${year}"] [data-month="${month}"]`);
+    monthEl.scrollIntoView();
+  }
   clickHandler(e) {
     var _a;
     const target = (_a = e.composedPath) === null || _a === void 0 ? void 0 : _a.call(e)[0];
@@ -450,7 +461,7 @@ export class PnDatePicker {
       },
       "attribute": "placeholder",
       "reflect": false,
-      "defaultValue": "'YYYY-MM-DD'"
+      "defaultValue": "''"
     },
     "endPlaceholder": {
       "type": "string",
@@ -468,7 +479,7 @@ export class PnDatePicker {
       },
       "attribute": "end-placeholder",
       "reflect": false,
-      "defaultValue": "'YYYY-MM-DD'"
+      "defaultValue": "''"
     }
   }; }
   static get states() { return {

package/umd/modules/@postnord/web-components/collection/components/input/pn-date-picker/translations.js

@@ -72,10 +72,10 @@ export const translations = {
     ],
   },
   WEEK: {
-    en: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
-    sv: ['Sön', 'Mån', 'Tis', 'Ons', 'Tor', 'Fre', 'Lör'],
-    da: ['Søn', 'Man', 'Tir', 'Ons', 'Tor', 'Fre', 'Lør'],
-    fi: ['Su', 'Ma', 'Ti', 'Ke', 'To', 'Pe', 'La'],
-    no: ['Sø.', 'Ma.', 'Ti.', 'On.', 'To.', 'Fr.', 'Lø.'],
+    en: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+    sv: ['Mån', 'Tis', 'Ons', 'Tor', 'Fre', 'Lör', 'Sön'],
+    da: ['Man', 'Tir', 'Ons', 'Tor', 'Fre', 'Lør', 'Søn'],
+    fi: ['Ma', 'Ti', 'Ke', 'To', 'Pe', 'La', 'Su'],
+    no: ['Ma.', 'Ti.', 'On.', 'To.', 'Fr.', 'Lø.', 'Sø'],
   },
 };