@postnord/pn-marketweb-components 4.1.1 → 4.2.0

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

@@ -301,7 +301,7 @@ export class PnRange {
         this.setValue(numberValue, this.pressControl === 'end');
     }
     render() {
-        return (h(Host, { key: '3fb29dad425cdec9cf63a5c47d8b5a894fe31077' }, h("div", { key: 'd43cf9db9b5859e81bba494fbffd9831e6a0cab5', class: "pn-range", "data-markers": !!this.markers?.length, "data-input": this.input }, h("div", { key: '01a90e9f422c24c1def8032653b5d91190eb09d2', class: "pn-range-header", "data-input": this.input }, h("label", { key: '2d17dd42e062345a82d8a80aa6730acf18d12a03', htmlFor: this.pnId, class: "pn-range-label" }, h("span", { key: '9edc3ef4d5306daa9c818fe11550119301c71411' }, this.label)), this.multiple && (h("label", { key: 'ccbf685eace815dd0f93e381d3f344e2c3ec7225', htmlFor: this.pnIdEnd, class: "pn-range-label" }, h("span", { key: 'fa03f509c3ca1becaf0e156f8e66a0801cafbfea' }, this.labelEnd)))), this.renderPrefix(), h("div", { key: '0da637b2c62b397006f768d54e84e69589fb0809', class: "pn-range-group", "data-pressing": this.isPressing }, this.renderRangeInput(), this.multiple && (h(Fragment, { key: '892251abffc5b5ada620c989485438e8c6b8e05a' }, this.renderRangeInput(true), h("input", { key: '530640c98705e13bf8b33bdc6185500501736479', id: this.idInputHidden, type: "range", class: "pn-range-overlay-input", ...this.commonAttrs(), "aria-invalid": this.hasError().toString(), hidden: true, tabIndex: -1, ...this.setListeners(true) }))), h("div", { key: '303070d848910e18c00b807bfc3c860c462a7a81', class: "pn-range-track", "data-multiple": this.multiple, "aria-hidden": "true" }), this.renderTooltip(), this.multiple && this.renderTooltip(true), !!this.markers?.length && (h("ul", { key: '1df390f7454d1bff788870ab1f22787357041f38', "aria-hidden": "true", class: "pn-range-markers" }, this.markers.map(({ label, value }) => (h("li", { class: "pn-range-markers-item", "data-min": this.calcPercentage(value) === this.min, "data-max": this.calcPercentage(value) === this.max, style: { '--pn-range-marker-position': `${this.calcPercentage(value)}%` } }, h("span", { class: "pn-range-markers-label", "data-active": this.isActiveMarker(value) }, this.getMarkerLabel({ value, label })))))))), this.renderSuffix(), !!this.markers?.length && (h("datalist", { key: '068f03a5c753db20cae5dc05cd2a9e6f75933e80', id: this.idDatalist }, this.markers.map(({ label, value }) => (h("option", { value: value, label: label === null ? null : label }))))), h("p", { key: 'f75f04fb920645f40434bda7039a2fed64453187', id: this.idHelpertext, class: "pn-range-message", hidden: !this.hasHelperText() || this.hasError() }, h("span", { key: '94fa7a8d8fc243a8633424e4bf3b0e1deb0580e9' }, this.helpertext), h("slot", { key: '2ca0738617bb4e157c139eefe2fcad3b314a4206', name: "helpertext" })), h("p", { key: '59d078f5a58f1e5ce9e055747387ab4e0eca1ea2', id: this.idError, class: "pn-range-message pn-range-error", role: "alert", hidden: !this.hasErrorMessage() }, h("span", { key: '569ae4a5b75336a3f787ca723938e48ad653659a' }, this.error), h("slot", { key: '5cb3f9fa5a3483b4c7100c86e230da837ce3aa12', name: "error" })))));
+        return (h(Host, { key: '0a79e6606d509d701b83da4a2c3d3636c7d73979' }, h("div", { key: 'f56834025691e3c67544e4ddb2b54630bfa46095', class: "pn-range", "data-markers": !!this.markers?.length, "data-input": this.input }, h("div", { key: 'e39b5994468fc6f50ad479c5b3875732a29a4761', class: "pn-range-header", "data-input": this.input }, h("label", { key: '724a16a534343838e392480163517afc7bd15b6f', htmlFor: this.pnId, class: "pn-range-label" }, h("span", { key: 'ebd27275aeb63e79df5f2f0f5f4d1f5d118cd137' }, this.label)), this.multiple && (h("label", { key: 'aebe4d8b124cc5a905b61624566dc4db52f1f4a0', htmlFor: this.pnIdEnd, class: "pn-range-label" }, h("span", { key: '7a90745fadc39d81bac3083d562c9d7fe47c1d00' }, this.labelEnd)))), this.renderPrefix(), h("div", { key: '28fcae728841f246bfac7ae488710459d468e4f2', class: "pn-range-group", "data-pressing": this.isPressing }, this.renderRangeInput(), this.multiple && (h(Fragment, { key: '87dae83eea2f5e4eb5318759767dfabc74a0f128' }, this.renderRangeInput(true), h("input", { key: 'aa461034dfe94c78310409f87c1efaa0a4fb0a4d', id: this.idInputHidden, type: "range", class: "pn-range-overlay-input", ...this.commonAttrs(), "aria-invalid": this.hasError().toString(), hidden: true, tabIndex: -1, ...this.setListeners(true) }))), h("div", { key: '3282ce9652ff135db9e5bfa533af1c7fd1d29adb', class: "pn-range-track", "data-multiple": this.multiple, "aria-hidden": "true" }), this.renderTooltip(), this.multiple && this.renderTooltip(true), !!this.markers?.length && (h("ul", { key: '1692843e137439b5bdedb5728104a3312d26ffc2', "aria-hidden": "true", class: "pn-range-markers" }, this.markers.map(({ label, value }) => (h("li", { class: "pn-range-markers-item", "data-min": this.calcPercentage(value) === this.min, "data-max": this.calcPercentage(value) === this.max, style: { '--pn-range-marker-position': `${this.calcPercentage(value)}%` } }, h("span", { class: "pn-range-markers-label", "data-active": this.isActiveMarker(value) }, this.getMarkerLabel({ value, label })))))))), this.renderSuffix(), !!this.markers?.length && (h("datalist", { key: 'ed0ea3e4e284366f3e4eaf94245a1a71ccf20a17', id: this.idDatalist }, this.markers.map(({ label, value }) => (h("option", { value: value, label: label === null ? null : label }))))), h("p", { key: '3dd6afe5a2f142b1df60fdd87c0c23f942d83a71', id: this.idHelpertext, class: "pn-range-message", hidden: !this.hasHelperText() || this.hasError() }, h("span", { key: '048797709bcb778a9c1f2d71ae1ee1b1eef665f0' }, this.helpertext), h("slot", { key: '2fabbbc425b643917415653f831126e9d7319efd', name: "helpertext" })), h("p", { key: '65061b23a86338d7490bbfc2759308c1326f5d4e', id: this.idError, class: "pn-range-message pn-range-error", role: "alert", hidden: !this.hasErrorMessage() }, h("span", { key: 'a0be85a1e70ac6b07bb1447b6c8e9a04c72aade0' }, this.error), h("slot", { key: 'c13f70e99ec137373be96fa9d5a06b0266808fcf', name: "error" })))));
     }
     static get is() { return "pn-range"; }
     static get originalStyleUrls() {

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

@@ -112,7 +112,7 @@ export class PnSearchField {
         return this.searchSimple() ? 'outlined' : null;
     }
     render() {
-        return (h(Host, { key: '3d9715e863efb490e9eb678ebd962c5329d14643' }, h("div", { key: '94ee1a17ef5c624f63d8861d010b4b95223f17f4', class: "pn-search-field", "data-inline": this.searchAuto(), "data-loading": this.loading, "data-searching": !!this.value, "data-jumbo": this.searchJumbo() }, h("div", { key: '838a5a89e1652dab1212f07772bd4c2323de6675', class: "pn-search-field-container" }, h("input", { key: 'be1c7951cb8cb4ed028a41cca5bbd220e65b48d7', class: "pn-search-field-input", type: "search", value: this.value, id: this.searchid, name: this.name, "aria-label": this.label, placeholder: this.placeholder, disabled: this.disabled, required: this.required, autocomplete: this.autocomplete, list: this.list, ref: el => (this.searchElement = el), onKeyDown: e => this.emitSearch({ button: e }), onInput: e => this.setVal(e) }), h("div", { key: 'fe7812bf0c25af09d60e72486431df2592a0b84c', class: "pn-search-field-inline" }, this.searchAuto() && (h("pn-button", { key: '869834cba8ed95d20930e88d54dc7155209841bd', class: "pn-search-field-button", type: "button", appearance: "light", small: true, icon: search, iconOnly: true, arialabel: this.getButtonLabel(), noTab: this.loading, onPnClick: e => this.emitSearch({ click: e.detail }) })), !this.disabled && (h("pn-button", { key: 'babac4d74b2434617080c44003efd52115306bcd', small: true, class: "pn-search-field-clear", type: "button", appearance: "light", icon: close_small, iconOnly: true, arialabel: this.translate('CLEAR'), noTab: !this.value || this.loading, onPnClick: () => this.clearInput() })), this.searchAuto() && h("pn-spinner", { key: '00bdaedf9aee5cac814418f57f46cfdedc26a8db', class: "pn-search-field-spinner" }))), !this.searchAuto() && (h("pn-button", { key: 'f3776eb201013f2a23995e6677800e3c3a69b5b4', class: "pn-search-field-submit", label: this.getButtonLabel(), tooltip: this.buttonTooltip, appearance: this.searchButtonAppearance(), variant: this.searchButtonVariant(), icon: search, iconOnly: this.searchSimple() || this.searchJumbo(), arialabel: this.searchSimple() || this.searchJumbo() ? this.getButtonLabel() : null, loading: this.loading, onPnClick: e => this.emitSearch({ click: e.detail }) })))));
+        return (h(Host, { key: 'd6e76c457e99f83b3d47a4b0c951168c6b5fc086' }, h("div", { key: '203055449e80dfd9bf19d94f340e4081d358a7b5', class: "pn-search-field", "data-inline": this.searchAuto(), "data-loading": this.loading, "data-searching": !!this.value, "data-jumbo": this.searchJumbo() }, h("div", { key: 'bb86197c5f7e88c162eac8c899557bb5941ed6c6', class: "pn-search-field-container" }, h("input", { key: 'ba497f96d2afd9554e842010edf8cef656a994fc', class: "pn-search-field-input", type: "search", value: this.value, id: this.searchid, name: this.name, "aria-label": this.label, placeholder: this.placeholder, disabled: this.disabled, required: this.required, autocomplete: this.autocomplete, list: this.list, ref: el => (this.searchElement = el), onKeyDown: e => this.emitSearch({ button: e }), onInput: e => this.setVal(e) }), h("div", { key: 'bd11b1ec64b10dbc3b93fd0bcc163d5d120766cf', class: "pn-search-field-inline" }, this.searchAuto() && (h("pn-button", { key: 'c8961cb53609cc7d290b528af7e23a363a348833', class: "pn-search-field-button", type: "button", appearance: "light", small: true, icon: search, iconOnly: true, arialabel: this.getButtonLabel(), noTab: this.loading, onPnClick: e => this.emitSearch({ click: e.detail }) })), !this.disabled && (h("pn-button", { key: '45197b884106304f5e3a4dc66b58333d8b79d4cb', small: true, class: "pn-search-field-clear", type: "button", appearance: "light", icon: close_small, iconOnly: true, arialabel: this.translate('CLEAR'), noTab: !this.value || this.loading, onPnClick: () => this.clearInput() })), this.searchAuto() && h("pn-spinner", { key: 'f681e4d08d66c9658f09b9cd947b70e4cd0f0837', class: "pn-search-field-spinner" }))), !this.searchAuto() && (h("pn-button", { key: '8498355d5d49c64755c58ce4d599938e3e25c84b', class: "pn-search-field-submit", label: this.getButtonLabel(), tooltip: this.buttonTooltip, appearance: this.searchButtonAppearance(), variant: this.searchButtonVariant(), icon: search, iconOnly: this.searchSimple() || this.searchJumbo(), arialabel: this.searchSimple() || this.searchJumbo() ? this.getButtonLabel() : null, loading: this.loading, onPnClick: e => this.emitSearch({ click: e.detail }) })))));
     }
     static get is() { return "pn-search-field"; }
     static get originalStyleUrls() {

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

@@ -124,7 +124,7 @@ export class PnSegmentedControl {
     }
     /*---------------------------------------/SCROLL ARROW LOGIC-------------------------------------------*/
     render() {
-        return (h(Host, { key: 'a43ed5a11b854e8f7d0ec9fa4f134480a510de63' }, h("div", { key: 'd838f7a86ab63e80874eda6ca12885657127ed33', class: "pn-segmented-control", ref: el => (this.segmentContainer = el) }, h("slot", { key: 'edc2ab83406cf25a6f3854f3e6886e3ab658af63' }), h("div", { key: 'e56e19761edf88813a423a986e8f82c56c8b252c', class: "pn-sc-bg", "data-active": true, ref: el => (this.activeBg = el) }), h("div", { key: 'c7ffc7f04d456d72418684715015ead88f65bc72', class: "pn-sc-bg", "data-hover": true, ref: el => (this.hoverBg = el) })), h("div", { key: '4c5eecbd2f70a2ee159a465265071d5705370232', class: this.scrollArrowClasses(), hidden: !this.showScrollArrows }, h("button", { key: '4f987e124f74b1a24871f81fa07eeb0d8cebe913', "aria-label": "Left", class: "pn-sc-arrow pn-sc-arrow-left", onClick: () => this.scroll(-120), tabindex: "-1" }, h("pn-icon", { key: 'a1e6cc5963fb758e5ba74668856e5addeb22052c', icon: arrow_left })), h("button", { key: '3eb57c028b2d547b14cd700cf162708ff3a4b1ab', "aria-label": "Right", class: "pn-sc-arrow pn-sc-arrow-right", onClick: () => this.scroll(120), tabindex: "-1" }, h("pn-icon", { key: 'aefbe98d26875fbff30c4001468730dcb9d777e7', icon: arrow_right })))));
+        return (h(Host, { key: '4ff48c9a0556397894d55f7d3dc0a266349ef8fc' }, h("div", { key: '82ef8456eda4724b55705f9a662577eb172df89d', class: "pn-segmented-control", ref: el => (this.segmentContainer = el) }, h("slot", { key: '9b2949cf6e7976795543f6f8a67c126bee02e59d' }), h("div", { key: '42ab10791de502f48aac3a16766425b435c1c52e', class: "pn-sc-bg", "data-active": true, ref: el => (this.activeBg = el) }), h("div", { key: '24060bf183aabe485b7ff66bbad9b44a7704df12', class: "pn-sc-bg", "data-hover": true, ref: el => (this.hoverBg = el) })), h("div", { key: '31790d3f9fccd0c4242b5584ba2ff6ee32df4297', class: this.scrollArrowClasses(), hidden: !this.showScrollArrows }, h("button", { key: '8ffa7498550bc0f052b77f5297b349b84efbccb8', "aria-label": "Left", class: "pn-sc-arrow pn-sc-arrow-left", onClick: () => this.scroll(-120), tabindex: "-1" }, h("pn-icon", { key: '89d4ee843ade39e7264e08c31ad83c2dd32f7931', icon: arrow_left })), h("button", { key: '8f1707b0e2debb84451210d03187b51eba3f2897', "aria-label": "Right", class: "pn-sc-arrow pn-sc-arrow-right", onClick: () => this.scroll(120), tabindex: "-1" }, h("pn-icon", { key: '4fa0fcd57eb268e3c9cd9e42f5d4e84b433fafee', icon: arrow_right })))));
     }
     static get is() { return "pn-segmented-control"; }
     static get originalStyleUrls() {

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

@@ -31,7 +31,7 @@ export class PnSegment {
         this.segmentHover.emit(mouse);
     }
     render() {
-        return (h(Host, { key: 'ac169c10456f5cadd62bdebbe97f416f81a7633b', onMouseEnter: (event) => this.handleHover(event) }, h("input", { key: 'b58b8ba98292e44516f23a8f78da408ab4ed6eed', class: "pn-segment", id: this.segmentid, name: this.name, checked: this.selected, type: "radio", value: this.value, disabled: this.disabled }), h("label", { key: '60bdaff95de6dabd3fbc435c1f2ed6e732866057', htmlFor: this.segmentid, class: "pn-segment-label" }, this.icon && h("pn-icon", { key: 'aba84b5c75e1245a92f37f89e9bfd79c7406092e', icon: this.icon, color: "blue700" }), h("span", { key: 'a8bb1c78d27c62ebd1ba11a60721781cfb1ecfeb', class: "pn-segment-text" }, this.label, h("slot", { key: '2bc3e624fa41960578f685b785b457c2953b562c' })))));
+        return (h(Host, { key: 'b98bb414de20d14fc2ee9d087be192d5f17bf1f9', onMouseEnter: (event) => this.handleHover(event) }, h("input", { key: '0b6117d85bb547c249a402cc26494355f3dc3e95', class: "pn-segment", id: this.segmentid, name: this.name, checked: this.selected, type: "radio", value: this.value, disabled: this.disabled }), h("label", { key: '8570c7c62ccfcfdd5dca9d8e1a6e016ca9c6a304', htmlFor: this.segmentid, class: "pn-segment-label" }, this.icon && h("pn-icon", { key: 'e10a1ea4ca26f71e6caadbeeda6bf5d68cfc266f', icon: this.icon, color: "blue700" }), h("span", { key: '8ec12157e0ca6f62772743e06beefc677f9f9f87', class: "pn-segment-text" }, this.label, h("slot", { key: '6342dfb17f71cae05318a3c19a19fdb6e46bb157' })))));
     }
     static get is() { return "pn-segment"; }
     static get originalStyleUrls() {

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

@@ -15,7 +15,7 @@ pn-select .pn-select-label {
   margin: 0 0 0.25em 0;
   gap: 0.5em;
   -webkit-tap-highlight-color: transparent;
-  transition-property: color;
+  transition-property: color, transform;
   transition-duration: 0.2s;
   transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
 }
@@ -25,9 +25,32 @@ pn-select .pn-select-label {
     transition-delay: 0s;
   }
 }
+pn-select .pn-select-label[data-compact] {
+  position: absolute;
+  top: 1.5625em;
+  left: calc(var(--pn-input-offset-left, 0px) + 0.75em + 0.0625em);
+  margin: 0;
+  pointer-events: none;
+  align-items: center;
+  height: 1.5em;
+  max-width: calc(100% - (var(--pn-input-offset-left, 0px) + 0.75em) - (var(--pn-input-offset-right, 0px) + 0.75em));
+  transform: translateY(-50%) scale(1) translateZ(0);
+  transform-origin: 0 0;
+  transition-delay: 0.2s;
+}
+pn-select .pn-select-label[data-compact] > span {
+  font-size: 1em;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  line-height: 1.5em;
+}
 pn-select .pn-select-label > span {
   font-size: 0.875em;
 }
+pn-select .pn-select-label[data-compact][data-icon] {
+  --pn-input-offset-left: calc(2em);
+}
 pn-select .pn-select-input {
   position: relative;
 }
@@ -42,19 +65,19 @@ pn-select .pn-select-icon {
   background-color: transparent;
 }
 pn-select .pn-select-icon[data-default] {
-  right: 0.75em;
+  right: 1em;
 }
 pn-select .pn-select-icon[data-custom] {
   left: 0.75em;
 }
 pn-select .pn-select-icon[data-custom] ~ .pn-select-element {
-  padding-left: 3em;
+  padding-left: 2.75em;
 }
 pn-select .pn-select-icon[data-error] {
-  right: 3em;
+  right: 3.5em;
 }
 pn-select .pn-select-icon[data-error] ~ .pn-select-element {
-  padding-right: 5em;
+  padding-right: 5.5em;
 }
 pn-select .pn-select-icon > .pn-icon-svg {
   transition-property: transform;
@@ -69,11 +92,17 @@ pn-select .pn-select-icon > .pn-icon-svg {
 }
 pn-select .pn-select-element {
   cursor: pointer;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  width: 100%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   color: #2d2013;
   background-color: #ffffff;
   border: 0.0625em solid #969087;
   border-radius: 0.5em;
-  padding: 0.75em;
+  padding: 0.75em 3em 0.75em 0.75em;
   font-family: inherit;
   font-size: 1em;
   font-weight: 500;
@@ -105,6 +134,19 @@ pn-select .pn-select-element {
     transition-delay: 0s;
   }
 }
+pn-select .pn-select-element[data-compact] {
+  text-align: left;
+  padding-top: 1.125em;
+  padding-bottom: 0.375em;
+  max-width: unset;
+}
+pn-select .pn-select-element[data-compact]::placeholder {
+  color: transparent;
+}
+pn-select .pn-select-element[data-compact]:focus + .pn-select-label, pn-select .pn-select-element[data-compact]:not(:placeholder-shown) + .pn-select-label {
+  transform: translateY(-85%) scale(0.75);
+  transition-delay: 0s;
+}
 pn-select .pn-select-element::placeholder {
   color: #5e554a;
   font-weight: normal;
@@ -117,14 +159,7 @@ pn-select .pn-select-element:disabled {
   background-color: #f3f2f2;
   border-color: #f3f2f2;
 }
-pn-select .pn-select-element {
-  width: 100%;
-  padding-right: 3em;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-}
-pn-select .pn-select-element:open + pn-icon .pn-icon-svg {
+pn-select .pn-select-element:open ~ .pn-select-icon .pn-icon-svg {
   transform: rotate(180deg);
 }
 pn-select .pn-select-element:disabled {
@@ -170,6 +205,10 @@ pn-select .pn-select[data-error] > .pn-select-input > .pn-select-element:focus-v
   border-color: #a70707;
   outline-color: #a70707;
 }
+pn-select .pn-select[data-error] > .pn-select-input > .pn-select-element:-webkit-autofill, pn-select .pn-select[data-error] > .pn-select-input > .pn-select-element:-webkit-autofill:hover, pn-select .pn-select[data-error] > .pn-select-input > .pn-select-element:-webkit-autofill:focus, pn-select .pn-select[data-error] > .pn-select-input > .pn-select-element:-webkit-autofill:active {
+  -webkit-box-shadow: 0 0 0 10em #fef7f6 inset;
+  -webkit-text-fill-color: #2d2013;
+}
 pn-select .pn-select[data-error] > .pn-select-input > .pn-select-element:hover {
   background-color: #fdefee;
 }

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

@@ -29,6 +29,8 @@ export class PnSelect {
     selectId = this.id;
     /** Display an icon to the left of the select input. */
     icon;
+    /** Use the compact label variant. @since v7.21.0 */
+    compact = false;
     /** HTML select name. @category HTML */
     name;
     /** HTML form name. @category HTML */
@@ -67,8 +69,13 @@ export class PnSelect {
     hasMessage() {
         return !!this.helpertext || !!this.error;
     }
+    renderLabel() {
+        if (!this.label)
+            return null;
+        return (h("label", { htmlFor: this.selectId, class: "pn-select-label", "data-compact": this.compact, "data-icon": !!this.icon }, h("span", null, this.label)));
+    }
     render() {
-        return (h(Host, { key: 'bace0ffbe4d9bb8bfe73ed8d55a9d95cc5d8fe35' }, h("div", { key: '8d6c5e7c9271c0f9a9350c4c6daa31bf21e6bc9a', class: "pn-select", "data-error": this.hasError() }, this.label && (h("label", { key: 'ce8ef956e612931988c880bc852675cf2e8a1359', htmlFor: this.selectId, class: "pn-select-label" }, h("span", { key: '512d5e9a84249de9bd673a612e272497e5555121' }, this.label))), h("div", { key: 'b124744c213b35fb95b3acdcf148c2956125273b', class: "pn-select-input" }, this.icon && h("pn-icon", { key: '2eb0536a37b49f6ff54cf469f435d2fc0f35585a', class: "pn-select-icon", icon: this.icon, "data-custom": true, "aria-hidden": "true" }), this.hasError() && (h("pn-icon", { key: '8ed4eb8ea34b1e235da8b674c9e0398dc76ce112', class: "pn-select-icon", icon: alert_exclamation_circle, color: "warning", "data-error": true, "aria-hidden": "true" })), h("select", { key: '1f1c8e999880212f089281ecf0758ec358221856', id: this.selectId, class: "pn-select-element", name: this.name, form: this.form, autocomplete: this.autocomplete, "aria-describedby": this.hasMessage() && this.idHelpertext, "aria-invalid": this.hasError().toString(), disabled: this.disabled, "data-placeholder": this.select?.value === '', ref: el => (this.select = el) }, h("slot", { key: 'd13553a20c6117e102da282ec5b8a4112180a958' })), h("pn-icon", { key: 'c44848a4a579f536b3b6cc05eef0a9823b5b82af', class: "pn-select-icon", icon: chevron_down, color: "blue700", "data-default": true, "aria-hidden": "true" })), this.hasMessage() && (h("p", { key: '841cd7f201d4e241da35501eae265dd440028472', id: this.idHelpertext, class: "pn-select-helper", role: !!this.error ? 'alert' : null }, h("span", { key: '307f5c9193f94cdf172f9d0a4bea34f96c8051e2' }, this.error || this.helpertext))))));
+        return (h(Host, { key: '59c8dba79bf97e55cdf0bb63242bab619729e182' }, h("div", { key: '08ee599ef117480e98506e6594bb798931dade58', class: "pn-select", "data-error": this.hasError() }, !this.compact && this.renderLabel(), h("div", { key: '4416853996ab6849ef128f3abd7d53861e3d6bbe', class: "pn-select-input" }, this.icon && h("pn-icon", { key: '8af79d8f23f6e7b9853130ca77d2ac00f264afe7', class: "pn-select-icon", icon: this.icon, "data-custom": true, "aria-hidden": "true" }), this.hasError() && (h("pn-icon", { key: 'ad674903cc8cefb0864b425a4f6bd6540b5164f3', class: "pn-select-icon", icon: alert_exclamation_circle, color: "warning", "data-error": true, "aria-hidden": "true" })), h("select", { key: 'fc84d7571dc544030770dd8ea88c87e3a1d58bc5', id: this.selectId, class: "pn-select-element", name: this.name, form: this.form, autocomplete: this.autocomplete, "aria-describedby": this.hasMessage() && this.idHelpertext, "aria-invalid": this.hasError().toString(), disabled: this.disabled, "data-placeholder": this.select?.value === '', "data-compact": this.compact, ref: el => (this.select = el) }, h("slot", { key: '1cca39bd8954649b1a558876d31509c3be0f4763' })), this.compact && this.renderLabel(), h("pn-icon", { key: 'a5efd954143ce705d806a1a7a1b37b09714d1657', class: "pn-select-icon", icon: chevron_down, color: "blue700", "data-default": true, "aria-hidden": "true" })), this.hasMessage() && (h("p", { key: '54e7855163fc3c91cb2bdac99aaa7ed9bfd14fc9', id: this.idHelpertext, class: "pn-select-helper", role: !!this.error ? 'alert' : null }, h("span", { key: '21397e124292c51dfe3113b526626059dc9b513d' }, this.error || this.helpertext))))));
     }
     static get is() { return "pn-select"; }
     static get originalStyleUrls() {
@@ -160,6 +167,29 @@ export class PnSelect {
                 "reflect": false,
                 "attribute": "icon"
             },
+            "compact": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "v7.21.0"
+                        }],
+                    "text": "Use the compact label variant."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "compact",
+                "defaultValue": "false"
+            },
             "name": {
                 "type": "string",
                 "mutable": false,

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

@@ -6,6 +6,9 @@ pn-textarea {
   flex-direction: column;
 }
 
+pn-textarea .pn-textarea {
+  position: relative;
+}
 pn-textarea .pn-textarea-label {
   cursor: pointer;
   display: flex;
@@ -16,7 +19,7 @@ pn-textarea .pn-textarea-label {
   margin: 0 0 0.25em 0;
   gap: 0.5em;
   -webkit-tap-highlight-color: transparent;
-  transition-property: color;
+  transition-property: color, transform;
   transition-duration: 0.2s;
   transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
 }
@@ -26,9 +29,33 @@ pn-textarea .pn-textarea-label {
     transition-delay: 0s;
   }
 }
+pn-textarea .pn-textarea-label[data-compact] {
+  position: absolute;
+  top: 1.5625em;
+  left: calc(var(--pn-input-offset-left, 0px) + 0.75em + 0.0625em);
+  margin: 0;
+  pointer-events: none;
+  align-items: center;
+  height: 1.5em;
+  max-width: calc(100% - (var(--pn-input-offset-left, 0px) + 0.75em) - (var(--pn-input-offset-right, 0px) + 0.75em));
+  transform: translateY(-50%) scale(1) translateZ(0);
+  transform-origin: 0 0;
+  transition-delay: 0.2s;
+}
+pn-textarea .pn-textarea-label[data-compact] > span {
+  font-size: 1em;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  line-height: 1.5em;
+}
 pn-textarea .pn-textarea-label > span {
   font-size: 0.875em;
 }
+pn-textarea .pn-textarea-label[data-compact] > span {
+  background-color: #ffffff;
+  color: #2d2013;
+}
 pn-textarea .pn-textarea-text {
   color: #5e554a;
   font-size: 0.875em;
@@ -42,6 +69,8 @@ pn-textarea .pn-textarea-text > pn-icon {
   margin-right: 0.25em;
 }
 pn-textarea .pn-textarea-element {
+  width: 100%;
+  resize: none;
   color: #2d2013;
   background-color: #ffffff;
   border: 0.0625em solid #969087;
@@ -78,6 +107,19 @@ pn-textarea .pn-textarea-element {
     transition-delay: 0s;
   }
 }
+pn-textarea .pn-textarea-element[data-compact] {
+  text-align: left;
+  padding-top: 1.125em;
+  padding-bottom: 0.375em;
+  max-width: unset;
+}
+pn-textarea .pn-textarea-element[data-compact]::placeholder {
+  color: transparent;
+}
+pn-textarea .pn-textarea-element[data-compact]:focus + .pn-textarea-label, pn-textarea .pn-textarea-element[data-compact]:not(:placeholder-shown) + .pn-textarea-label {
+  transform: translateY(-85%) scale(0.75);
+  transition-delay: 0s;
+}
 pn-textarea .pn-textarea-element::placeholder {
   color: #5e554a;
   font-weight: normal;
@@ -111,13 +153,12 @@ pn-textarea .pn-textarea-element::-webkit-scrollbar-thumb:hover {
 pn-textarea .pn-textarea-element::-webkit-scrollbar-corner, pn-textarea .pn-textarea-element::-webkit-scrollbar-button {
   display: none;
 }
-pn-textarea .pn-textarea-element {
-  width: 100%;
-  resize: none;
-}
 pn-textarea .pn-textarea-element:read-only {
   border-color: #ffffff;
 }
+pn-textarea .pn-textarea-element:disabled + .pn-textarea-label > span {
+  background-color: #f3f2f2;
+}
 pn-textarea .pn-textarea-element::-webkit-resizer {
   background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%0A%20%20%3Cpath%20d%3D%22M7%2017L17%207M12%2017L17%2012%22%20stroke%3D%22%23005D92%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%0A%3C%2Fsvg%3E");
   background-repeat: no-repeat;
@@ -137,6 +178,10 @@ pn-textarea .pn-textarea[data-valid] > .pn-textarea-element:focus-visible {
   border-color: #005e41;
   outline-color: #005e41;
 }
+pn-textarea .pn-textarea[data-valid] > .pn-textarea-element:-webkit-autofill, pn-textarea .pn-textarea[data-valid] > .pn-textarea-element:-webkit-autofill:hover, pn-textarea .pn-textarea[data-valid] > .pn-textarea-element:-webkit-autofill:focus, pn-textarea .pn-textarea[data-valid] > .pn-textarea-element:-webkit-autofill:active {
+  -webkit-box-shadow: 0 0 0 10em #edfbf3 inset;
+  -webkit-text-fill-color: #2d2013;
+}
 pn-textarea .pn-textarea[data-error] > .pn-textarea-label {
   color: #a70707;
 }
@@ -151,6 +196,10 @@ pn-textarea .pn-textarea[data-error] > .pn-textarea-element:focus-visible {
   border-color: #a70707;
   outline-color: #a70707;
 }
+pn-textarea .pn-textarea[data-error] > .pn-textarea-element:-webkit-autofill, pn-textarea .pn-textarea[data-error] > .pn-textarea-element:-webkit-autofill:hover, pn-textarea .pn-textarea[data-error] > .pn-textarea-element:-webkit-autofill:focus, pn-textarea .pn-textarea[data-error] > .pn-textarea-element:-webkit-autofill:active {
+  -webkit-box-shadow: 0 0 0 10em #fef7f6 inset;
+  -webkit-text-fill-color: #2d2013;
+}
 pn-textarea .pn-textarea[data-error] > .pn-textarea-text[role=alert] {
   color: #a70707;
 }

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

@@ -14,14 +14,14 @@ export class PnTextarea {
     id = `pn-textarea-${uuidv4()}`;
     idHelper = `${this.id}-text`;
     hostElement;
-    /** The textarea content */
-    content;
     /** The label describing the textarea. */
     label;
     /** The textarea content, do not provide slotted content. */
     value = '';
     /** Helper text that will appear underneath the textarea. Will be overwritten if you set an `error` string */
     helpertext;
+    /** Use the compact label variant. @since v7.21.0 */
+    compact = false;
     /** A unique ID connecting the element to the label. @category HTML Textarea */
     textareaid = this.id;
     /** HTML name. @category HTML Textarea */
@@ -56,10 +56,9 @@ export class PnTextarea {
     disabled = false;
     /** Make the textarea readonly. @category State */
     readonly = false;
-    componentWillLoad() {
-        if (this.textareaid !== this.id) {
-            this.idHelper = `${this.textareaid}-helper`;
-        }
+    handleId() {
+        if (this.textareaid !== this.id)
+            this.idHelper = `${this.getId()}-helper`;
     }
     setVal(event) {
         const value = event.target.value;
@@ -71,8 +70,14 @@ export class PnTextarea {
     hasMessage() {
         return !!(this.helpertext?.length || this.error?.length);
     }
+    getId() {
+        return this.textareaid || this.id;
+    }
+    renderLabel() {
+        return (h("label", { class: "pn-textarea-label", htmlFor: this.getId(), "data-compact": this.compact }, h("span", null, this.label), this.maxlength >= 1 && h("span", null, `${this.value?.length || 0}/${this.maxlength}`)));
+    }
     render() {
-        return (h(Host, { key: 'c568c2ad0a3b3afe84f455684c747d9fcc152ea5' }, h("div", { key: '08708e20ab42d72385744f877d0d9a7e2e9a7725', class: "pn-textarea", "data-valid": this.valid, "data-error": this.hasError(), "data-resize": this.resize }, h("label", { key: '01a8257a0bc3bab14d08c167f833a4aa1d8077bd', class: "pn-textarea-label", htmlFor: this.textareaid }, h("span", { key: '627d6e4b22a344372a834e79382146b127c3a495' }, this.label), this.maxlength >= 1 && h("span", { key: 'a33a760b4e1491922fc6a333cdd98fabace1ca1c' }, `${this.value?.length || 0}/${this.maxlength}`)), h("textarea", { key: '4ea874aac0a2e3a3cfd6850e3fbd8415fbd659d8', class: "pn-textarea-element", id: this.textareaid, name: this.name, rows: this.rows, cols: this.cols, wrap: this.wrap, autocomplete: this.autocomplete, spellcheck: this.spellcheck, placeholder: this.placeholder, maxlength: this.maxlength, required: this.required, disabled: this.disabled, readonly: this.readonly, "aria-describedby": this.hasMessage() ? this.idHelper : null, "aria-invalid": this.hasError().toString(), onInput: e => this.setVal(e), value: this.value }), this.hasMessage() && (h("p", { key: 'de47982ee3125cfdb5651ebb50715d03df9459e1', id: this.idHelper, class: "pn-textarea-text", role: this.error?.length ? 'alert' : null }, h("span", { key: 'dc885dee87a3e715f26fa950dfce7d68131edeae' }, this.error || this.helpertext))))));
+        return (h(Host, { key: '890e6c29daa489bdf44588c91457e71172e40dae' }, h("div", { key: 'c35d279a237c2411faebd0823d3a03f8212c54d0', class: "pn-textarea", "data-valid": this.valid, "data-error": this.hasError(), "data-resize": this.resize }, !this.compact && this.renderLabel(), h("textarea", { key: 'f2358babec0d5eb02e1d3ba5c21c33998e9582b3', class: "pn-textarea-element", id: this.getId(), name: this.name, rows: this.rows, cols: this.cols, wrap: this.wrap, autocomplete: this.autocomplete, spellcheck: this.spellcheck, placeholder: this.compact ? this.placeholder || ' ' : this.placeholder, maxlength: this.maxlength, value: this.value, required: this.required, disabled: this.disabled, readonly: this.readonly, "aria-describedby": this.hasMessage() ? this.idHelper : null, "aria-invalid": this.hasError().toString(), "data-compact": this.compact, onInput: e => this.setVal(e) }), this.compact && this.renderLabel(), this.hasMessage() && (h("p", { key: 'ccdaed7f958b1ef07da159973690ddd86be791f3', id: this.idHelper, class: "pn-textarea-text", role: this.error?.length ? 'alert' : null }, h("span", { key: '62d9b78ed5370629548e67001689b3d14d40deaa' }, this.error || this.helpertext))))));
     }
     static get is() { return "pn-textarea"; }
     static get originalStyleUrls() {
@@ -108,7 +113,7 @@ export class PnTextarea {
             },
             "value": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -145,6 +150,29 @@ export class PnTextarea {
                 "reflect": false,
                 "attribute": "helpertext"
             },
+            "compact": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "v7.21.0"
+                        }],
+                    "text": "Use the compact label variant."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "compact",
+                "defaultValue": "false"
+            },
             "textareaid": {
                 "type": "string",
                 "mutable": false,
@@ -533,10 +561,14 @@ export class PnTextarea {
             }
         };
     }
-    static get states() {
-        return {
-            "content": {}
-        };
-    }
     static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "textareaid",
+                "methodName": "handleId",
+                "handlerOptions": {
+                    "immediate": true
+                }
+            }];
+    }
 }

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

@@ -23,7 +23,7 @@ pn-toggle-switch .pn-toggle-label {
   margin: 0;
   gap: 0.5em;
   -webkit-tap-highlight-color: transparent;
-  transition-property: color;
+  transition-property: color, transform;
   transition-duration: 0.2s;
   transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
 }

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

@@ -57,7 +57,7 @@ export class PnToggleSwitch {
         return this.showHelpertext() ? this.idHelper : null;
     }
     render() {
-        return (h(Host, { key: 'a3d4252dea3e506eb98d685b39ffdba2d6676d91' }, h("div", { key: '1c6ef822b6bc2781fe2d8e276b0b8576764a64bf', class: "pn-toggle" }, this.label && (h("div", { key: '91f304e138532ddb6cb233c04eca8fb08fcc09ec', class: "pn-toggle-content" }, h("label", { key: 'a53f25b57622de9b23097abb7307798bdfa8e85f', htmlFor: this.toggleid, class: "pn-toggle-label" }, h("span", { key: '15f39c3b8baaae269f8c25f0ca13519070a924fd' }, this.label)), h("p", { key: '2b6698735c1e0930538836787a778c6d7633ede0', id: this.idHelper, class: "pn-toggle-helper", hidden: !this.showHelpertext() }, this.hasHelpertextProp() && h("span", { key: 'e6c655fc891757ddffbe5fbd17f20b699da47365' }, this.helpertext), h("slot", { key: 'e8975a979351fb64079b242ac4f8c41f63c4075a', name: "helpertext" })))), h("div", { key: 'e5d7c8a8afdfd96b50bcac1cca95acd65bd7d077', class: "pn-toggle-button", "data-small": this.small, "data-large": this.large, "data-loading": this.loading }, h("input", { key: '1f5373143d9572a61a0d3b863b16590c31adc53e', id: this.toggleid, class: "pn-toggle-element", type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, "aria-describedby": this.describedBy() }), h("div", { key: 'dd6d3e606d74ed0a62130c6a0f79fc7e8c6ea2b9', class: "pn-toggle-bg" }), h("div", { key: 'e4d1598960dc57ffa2235c18eb0ea8923914d694', class: "pn-toggle-circle" }, h("svg", { key: 'cb11a8413934ed3b31dd69cd9715c07844fb3b35', class: "pn-toggle-check", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, h("polyline", { key: '57ef9347f6db33745babe13a9ceb7c0a7fb2b0fd', points: "4,12 9,17 20,6", "stroke-width": "3" })), h("pn-spinner", { key: '9c9ee4253c0bbfaa561fe5b1fd729cc2a8f2b9b9', size: 1.125 }))))));
+        return (h(Host, { key: 'b88bbc2385be79dd584ecee5e53dc89832de49c3' }, h("div", { key: '4a413f2b2acf8551dc2852ba0d3a45f4cbf17a4d', class: "pn-toggle" }, this.label && (h("div", { key: '944a36f2018335a283092c909af2f37846850eb8', class: "pn-toggle-content" }, h("label", { key: '2536eaf65117b1c70d1ec31f17faa41f2a6fced4', htmlFor: this.toggleid, class: "pn-toggle-label" }, h("span", { key: 'eae8a38d31f6bc05faa9d56c08517f9302be9a3e' }, this.label)), h("p", { key: '6173ba384459c406eb98fe4318e080b6cd36031a', id: this.idHelper, class: "pn-toggle-helper", hidden: !this.showHelpertext() }, this.hasHelpertextProp() && h("span", { key: 'd4a52d7786e7a63ca3f201c3ad7cb8793e377c12' }, this.helpertext), h("slot", { key: '06406382d523b70b8acb094a82794652a4481528', name: "helpertext" })))), h("div", { key: '4676dd88652c903f94d3f887e97841e00bbe09e2', class: "pn-toggle-button", "data-small": this.small, "data-large": this.large, "data-loading": this.loading }, h("input", { key: 'd2656b2f8ff8e74bd4d4c2f1c4791e984ec3e50b', id: this.toggleid, class: "pn-toggle-element", type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, "aria-describedby": this.describedBy() }), h("div", { key: '93caefd228460120aae22ba48e6c93d6df676fcf', class: "pn-toggle-bg" }), h("div", { key: '03299104835602d126960ad67ab51f94d27cf3c5', class: "pn-toggle-circle" }, h("svg", { key: '5f61f589797b3ca97a66cd42deab3065543679d2', class: "pn-toggle-check", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, h("polyline", { key: 'd974e5cc198d19cf17e42e0b35097f87d11404a0', points: "4,12 9,17 20,6", "stroke-width": "3" })), h("pn-spinner", { key: '6f5c5fb05e0c9fd95b16d45833f50167af22e358', size: 1.125 }))))));
     }
     static get is() { return "pn-toggle-switch"; }
     static get originalStyleUrls() {

package/umd/modules/@postnord/web-components/collection/components/layout/pn-header/pn-header.js

@@ -69,7 +69,7 @@ export class PnHeader {
         return this.goBackText || translations[this.language || en];
     }
     render() {
-        return (h(Host, { key: '1ee027d9ec1a7d440bad15e7a3e21d7a1bea82d7' }, h("header", { key: '94f8a61e7e4499b43e84e184ce068141d1eda7a4', class: "pn-header" }, h("div", { key: '2faf70a3e269d616761a1a64e0a06373a80ccd38', class: "pn-header-container" }, h("div", { key: 'b802a380cb0c6f5917ac5a009ae12eb8b0eebd7d', class: "pn-header-breadcrumbs", hidden: !this.showBreadcrumb() }, this.goBackHref && (h("pn-text-link", { key: '3264b691fbca455627ee57a52bd75a1d3e346deb', label: this.getButtonText(), href: this.goBackHref, icon: arrow_left, leftIcon: true })), h("slot", { key: '1b23c5b3a3b8659e1d3cbf9d2243b82c5dc44b16', name: "breadcrumb" })), h("div", { key: '7be900c2d2569bfa16b360ac5f1707ef8c8ea9e3', class: "pn-header-content" }, this.heading && h("h1", { key: 'a6cfd61f1f89f47ffbfc9f9b6457d1d4bee6d18b' }, this.heading), h("slot", { key: '2ad205fcdce972fac8c276dfbc68ea81369dce43' })), h("div", { key: '52ca88b82d1672a4784f1a478d9ca620cca27e90', class: "pn-header-buttons", hidden: !this.hasButtons }, h("slot", { key: 'f873dab64a32aee3afe2a445d55385125d62272d', name: "buttons" })), h("slot", { key: 'b9fa83ad5ebcff6478eed5bb8c02cdb9234e6449', name: "menu" })))));
+        return (h(Host, { key: 'f19310a092999791304499d72c1b8e566949c0d3' }, h("header", { key: 'c6b50a1d93bf18f2050b37a9bdf69d3706b8aea4', class: "pn-header" }, h("div", { key: '7bfa1bd37978daf85d266b7306a71705bdc8cac5', class: "pn-header-container" }, h("div", { key: '09ed187b0f201d435c99b3c6e0f245ca48857d47', class: "pn-header-breadcrumbs", hidden: !this.showBreadcrumb() }, this.goBackHref && (h("pn-text-link", { key: 'ba657cb77da06d42009738c64d815a23d8dae527', label: this.getButtonText(), href: this.goBackHref, icon: arrow_left, leftIcon: true })), h("slot", { key: '278bf254489dbd76f53e047cd16c247bcfd696eb', name: "breadcrumb" })), h("div", { key: 'e9b2e873fb9ed01fabbd669aa7cace973a55cbfa', class: "pn-header-content" }, this.heading && h("h1", { key: 'baec009bf6807009ea53d184be9a8c15ea0253a0' }, this.heading), h("slot", { key: '7a777967b19a19077486d88d775b4a1c4f9d3134' })), h("div", { key: '46fa0cc4120b341e4a03c60bb865e077c6231986', class: "pn-header-buttons", hidden: !this.hasButtons }, h("slot", { key: '8932d6bbb5e1647be6b666d1879b163575dfd760', name: "buttons" })), h("slot", { key: 'afc6e39f45ef72ba762772f84a66cc24fdbcf368', name: "menu" })))));
     }
     static get is() { return "pn-header"; }
     static get originalStyleUrls() {

package/umd/modules/@postnord/web-components/collection/components/navigation/pn-card/pn-card.js

@@ -101,7 +101,7 @@ export class PnCard {
     }
     render() {
         const TitleTag = this.getHeadingTag();
-        return (h(Host, { key: '97c18e82a21d7d8d3da77f73bf62ef66b55bea87' }, h("article", { key: '08fc69f592ff68e15f4669e0b08a6fd284c0a573', id: this.cardId, class: "pn-card", "data-link": !!this.href, "data-horizontal": this.horizontal, "data-reverse": this.reverse, "data-focus": this.visibleOutline }, h("div", { key: '066c3b5d8366af4b417eeec172cc5ead5d10b7f1', class: "pn-card-image" }, h("picture", { key: 'df49e44e26053aa95f0b41e2a9621b7abb3097bf', class: "pn-card-picture", style: { '--pn-card-aspect-ratio': this.aspectRatio || 'unset' } }, h("slot", { key: '9531af2407a9d1cf69919eaca8a1ac0f3a1cbad0', name: "image" }))), h("div", { key: '84bbcec0516487109369019258310ddcf395cb54', class: "pn-card-content" }, h("header", { key: '617f9eca2399489bb9ce2deb815e4c5355c0cac8', class: "pn-card-header" }, h("div", { key: 'e1dbc5f1492177c2d17561e7a85ca82fc6372601', class: "pn-card-tags" }, h("slot", { key: 'd888c457e7346296e3e49df65fdfdb6bf9f3d685', name: "tags" })), !!this.overline && h("p", { key: 'aeb949c5a5af48c3168c3fdd670c2d8de035612b', class: "pn-card-label-overline" }, this.overline), !!this.label && (h(TitleTag, { key: 'b02a20ab6f2b645f15f6a25113454035d90f3c65', id: this.getTitleId(), class: "pn-card-label" }, this.label)), h("slot", { key: '35d80dd4f0e64161e9c45f2ccb0ba96f5f41e37d', name: "header" })), h("section", { key: 'f03c442bbf4ee687df8b8e764148ebe56fe4cdcd', class: "pn-card-section" }, !!this.text && h("p", { key: 'f4575e15bf1e6e17bae4f9eb89aff2dfe0fc1c09', class: "pn-card-section-paragraph" }, this.text), h("slot", { key: 'e88afda695046683330391c2755e0ec203f6ff29' })), h("nav", { key: 'dab934db3167ccda858ae17013d1676a95899037', class: "pn-card-navigation" }, this.showHref() && (h("a", { key: '8ff2fad5ebda6a4f7df86c715a7ab90133db2547', class: "pn-card-link", href: this.href, target: this.target, rel: this.rel, "aria-labelledby": this.getLabelledby(), onClick: event => this.handleClick(event), onFocus: event => this.handleFocus(event), onBlur: event => this.handleFocus(event) }, this.hrefLabel, h("pn-icon", { key: '7009cd31df1251cf6ad5053f4ce993a8f2c578d5', color: "blue700", icon: this.getIcon() }))), h("slot", { key: 'ff9d176f9fd1c59605031e518cf100c8f7ae6ac2', name: "navigation" }))))));
+        return (h(Host, { key: '66bfbab30790857e909606b687989d845eef9c42' }, h("article", { key: 'eb3d30790de5f65da87dc40731b81fb9120c88db', id: this.cardId, class: "pn-card", "data-link": !!this.href, "data-horizontal": this.horizontal, "data-reverse": this.reverse, "data-focus": this.visibleOutline }, h("div", { key: '626daade06dd8b45c47e58cd5fbcef0322e3398f', class: "pn-card-image" }, h("picture", { key: '5f0539bf93afe3a8070c4e31bcabcd6e09f6cd5b', class: "pn-card-picture", style: { '--pn-card-aspect-ratio': this.aspectRatio || 'unset' } }, h("slot", { key: 'ead1ab12ad886e48daf022a26afc0deb29998d9e', name: "image" }))), h("div", { key: '79b1e1dcf658daf770ef2038770ad36d827d61fb', class: "pn-card-content" }, h("header", { key: '9b122547f47bace150f3dd17ccbe0ffe17a499b7', class: "pn-card-header" }, h("div", { key: 'eff03ae597d4d47ec6ef78634b9f1e3b3c65d420', class: "pn-card-tags" }, h("slot", { key: 'bce8ed2e135c2f7575923678477c278c82b26664', name: "tags" })), !!this.overline && h("p", { key: '4c5012ffa0d5e4054be3dc99fea4fd3d2d2e4383', class: "pn-card-label-overline" }, this.overline), !!this.label && (h(TitleTag, { key: 'a1a2a9ce01834943f3909a95dd4ac9c12c62fcc5', id: this.getTitleId(), class: "pn-card-label" }, this.label)), h("slot", { key: '7e231155db5155d5d4a5a272f845c6822235bb54', name: "header" })), h("section", { key: '118b273cd31a00de1fd16ee297bb206a33e7f977', class: "pn-card-section" }, !!this.text && h("p", { key: '66addec056571f3b511718cc8a4a60f64c3ac62b', class: "pn-card-section-paragraph" }, this.text), h("slot", { key: 'f9ec7149a4e48f59143b81470677be0b24791c8e' })), h("nav", { key: 'bb0ea19f4db135fd1b32496e167b67358df6ada8', class: "pn-card-navigation" }, this.showHref() && (h("a", { key: '182c9afcbb00b56c16b53ad15f12449e5feaf11a', class: "pn-card-link", href: this.href, target: this.target, rel: this.rel, "aria-labelledby": this.getLabelledby(), onClick: event => this.handleClick(event), onFocus: event => this.handleFocus(event), onBlur: event => this.handleFocus(event) }, this.hrefLabel, h("pn-icon", { key: '50ed52dbc3fd815c9d7b37542ad566a607e43da3', color: "blue700", icon: this.getIcon() }))), h("slot", { key: '6204a8a4944a85d522b4522352f67e73bc52792a', name: "navigation" }))))));
     }
     static get is() { return "pn-card"; }
     static get originalStyleUrls() {

package/umd/modules/@postnord/web-components/collection/components/navigation/pn-footer/pn-footer.js

@@ -43,7 +43,7 @@ export class PnFooter {
         }
     }
     render() {
-        return (h(Host, { key: 'cd42b1837b00386532e130fa79d0265746ad37cd' }, h("div", { key: 'd55038fafcccf752f7ac479ffb66127077f7ddc2', class: "pn-footer-row" }, h("p", { key: '3f90862fda949d3be7905f257806f367e25756bb' }, this.getText('questions')), this.renderLink('contact')), h("div", { key: '87285a48ed5a82822bff8b28d657be62720ca0f9', class: "pn-footer-row" }, this.market !== NO && this.renderLink('terms'), this.renderLink('privacy'), this.renderLink('cookies')), h("div", { key: '83fdad97337a671248f921dc7889a94bcff9a12e', class: "pn-footer-row" }, h("p", { key: 'bf0cdf1f3d4409922fea94aca5290ca5ad33b872' }, this.getText('info')), this.renderLink('domain'))));
+        return (h(Host, { key: '5ba1e53dd0dc631bf8bbe878a622ec577224a9f3' }, h("div", { key: '530b0e803506fed3cae180d1289535538f64e1bb', class: "pn-footer-row" }, h("p", { key: '47e19b88eb7c6860f0921fdacc79686aff3d2b61' }, this.getText('questions')), this.renderLink('contact')), h("div", { key: '2986a92cb2183d53c871030db72ef34aa08e847b', class: "pn-footer-row" }, this.market !== NO && this.renderLink('terms'), this.renderLink('privacy'), this.renderLink('cookies')), h("div", { key: '550a23c5b872b6dc9c69b4e231ce7634d5f12994', class: "pn-footer-row" }, h("p", { key: '52871c90b92a2a64fc247ac83fdc62215e54a574' }, this.getText('info')), this.renderLink('domain'))));
     }
     static get is() { return "pn-footer"; }
     static get originalStyleUrls() {

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

@@ -40,7 +40,7 @@ export class PnPageNavDropdownItem {
     }
     render() {
         const TagName = this.getTagName();
-        return (h("li", { key: 'eac53de4645bd987bc4c1e71c5f7d0982eb4456a' }, h(TagName, { key: '4e4e99717a8906306b2cb952a18868daa2c3a0da', href: this.href || '#', class: this.setClassnames(), type: this.getType(), onClick: e => this.select(e), tabindex: "-1" }, h("slot", { key: 'ee51c12b308c7613651886bc7b421a4ab0247990' }), h("pn-icon", { key: 'ddc418c5af2edb805a40ebaec120f5c06662bc64', icon: arrow_right, color: "white" })), h("hr", { key: 'e49722253acc408df179e4498dd64bb00bf1fa96' })));
+        return (h("li", { key: 'a4ca23ac5a53d78c87f2c955c3da18372a7d572d' }, h(TagName, { key: '20639a9f58133cf65d8719943d9d11630166b8d4', href: this.href || '#', class: this.setClassnames(), type: this.getType(), onClick: e => this.select(e), tabindex: "-1" }, h("slot", { key: '5440c1e919238f6aaa55ca9df2dec18ebbce2f83' }), h("pn-icon", { key: 'ff16474c7bc9fc6664c64c5b4567e88a88bd29fb', icon: arrow_right, color: "white" })), h("hr", { key: '5201ae642f54f3ad7b157762dedfddb08d865486' })));
     }
     static get is() { return "pn-page-nav-dropdown-item"; }
     static get originalStyleUrls() {

package/umd/modules/@postnord/web-components/collection/components/navigation/pn-page-nav/item/pn-page-nav-item.js

@@ -23,7 +23,7 @@ export class PnPageNavItem {
         this.itemselection.emit(this.value);
     }
     render() {
-        return (h(Host, { key: 'e9e53b320719e625aaeced3b3cd9171577561139' }, h("li", { key: 'e3bad7efc9e26a73ca105ff16501be34b7b5c869' }, h("a", { key: 'b8bfdb79752254ceb115583be0c11ba7bec3f4b6', href: this.href || '#', class: "pn-page-nav-item", onClick: e => this.select(e) }, this.icon && h("pn-icon", { key: '6d2c432d0ef078fc236fef9211765fd634b538b5', icon: this.icon, color: "white" }), h("slot", { key: 'e8e9c6e72af559047c0b074854c9b371d6e0c9a0' })))));
+        return (h(Host, { key: '43346d6ed6211b3e6c4ee7c6dfd261112028445f' }, h("li", { key: '8a191825d21ae79f3c8bf69381151b8d258a7c64' }, h("a", { key: '3dab24d14cb027916343ae3b1f86ded224907ab6', href: this.href || '#', class: "pn-page-nav-item", onClick: e => this.select(e) }, this.icon && h("pn-icon", { key: 'fa382f49cb1602908dd53af48044826f934679cd', icon: this.icon, color: "white" }), h("slot", { key: '576b22e87a530ac0a8a19eaf8a094937ab227b67' })))));
     }
     static get is() { return "pn-page-nav-item"; }
     static get originalStyleUrls() {

package/umd/modules/@postnord/web-components/collection/components/navigation/pn-page-nav/menu/pn-page-nav.js

@@ -294,7 +294,7 @@ export class PnPageNav {
     }
     /* ---------------------------------------/DROPDOWN LOGIC--------------------------------------- */
     render() {
-        return (h(Host, { key: '09d2c23a89225de385e48e65d485b7a0492479dc' }, h("div", { key: 'adc135fa9e678fe1ceab2a629ccf1a9906775328', class: "pn-page-nav-wrapper" }, h("nav", { key: '1aa5d748ee904f6d96d2a7d5dd17c09c96bf7230', class: "pn-page-nav" }, this.dropdownActive && (h("button", { key: 'cf8a7aac890fac108cf88a30df5623f6b66dc9c2', type: "button", class: this.dropdownButtonClasses(), onClick: () => this.toggleDropdown(), "aria-controls": "page-nav-dropdown", "aria-expanded": `${this.dropdownOpen}` }, this.dropdown, h("pn-icon", { key: '927edae4c71a918b0725c5c319ce4a802a35e2f8', icon: chevron_down, color: "white", small: true }), h("div", { key: 'd91a6109aa142c292ca2074b15e0cfa7dd70f0df', class: "pn-page-nav-divider" }))), h("ul", { key: 'd8921bbf3cd3144c5ac472ec113d234e30ec2f1f', class: "pn-page-nav-items" }, h("slot", { key: '87ac7a2dd90ebf2a863fe3cca54150def6b44be6' }), h("li", { key: 'f9504aaf7d253b406d14a3aa512e75c50433fc96', class: "pn-pn-bg pn-pn-active", role: "presentation" }), h("li", { key: 'c553c1f2a35984754b442f1f086f8f89f154d1d2', class: "pn-pn-bg pn-pn-hover", role: "presentation" }))), this.showScrollArrows && (h("div", { key: '26c694779045a66bacdb2c258b2b658457ae2851', class: this.scrollArrowClasses() }, h("button", { key: '9fc9a3511d158df8ad2e5ac67ca2c5995cd0d105', class: "pn-pn-arrow-left", onClick: () => this.scroll(-120), tabindex: "-1" }, h("pn-icon", { key: 'ef5214f47905c67549b8d35047ff8631d60ce0d5', icon: arrow_left, color: "white" })), h("button", { key: 'b74fdf8c3f49f0f3bba23a2e49ca848278114300', class: "pn-pn-arrow-right", onClick: () => this.scroll(120), tabindex: "-1" }, h("pn-icon", { key: '09a947d7ed38b3460590aafb106c77c6836f7164', icon: arrow_right, color: "blue700" }))))), this.dropdownActive && (h("ul", { key: 'ca675a52568b9ba2719a0dba5e6b5cfd10c4713d', id: this.navid, class: this.dropdownClasses() }, h("slot", { key: '2f8a0062c2aa836d88ada88254342918a694e00f', name: "dropdown-item" })))));
+        return (h(Host, { key: 'f76a115ccea11e238d2aee5288b06675abc80b8a' }, h("div", { key: '453102a432daf9b567be4f5dc415bab34b48bc84', class: "pn-page-nav-wrapper" }, h("nav", { key: '9207ade4b4d6cea4c22622c91988eef2b3c812bc', class: "pn-page-nav" }, this.dropdownActive && (h("button", { key: '3365178312cfe2b9d48fccbc794d2a8a857ed6f0', type: "button", class: this.dropdownButtonClasses(), onClick: () => this.toggleDropdown(), "aria-controls": "page-nav-dropdown", "aria-expanded": `${this.dropdownOpen}` }, this.dropdown, h("pn-icon", { key: '460172b12b334e96920d185dcbc868acafc0cdcc', icon: chevron_down, color: "white", small: true }), h("div", { key: 'f16219e3070e00ebd1ab143b8803a94c44e242bc', class: "pn-page-nav-divider" }))), h("ul", { key: '560ef88c95269f29b1f76ee65e3a2541fc2482ce', class: "pn-page-nav-items" }, h("slot", { key: '7b1cfc89976421963cc19f958f21e29bfc796621' }), h("li", { key: '7df00d0a42fc3f48f82afdb0bbbf943229604293', class: "pn-pn-bg pn-pn-active", role: "presentation" }), h("li", { key: '68fd6cc6f9dfcb834c62105f81ff2e21b332be94', class: "pn-pn-bg pn-pn-hover", role: "presentation" }))), this.showScrollArrows && (h("div", { key: 'ba26546a6fa3f750a5314dd80f80e1487b4962ec', class: this.scrollArrowClasses() }, h("button", { key: '57b43598cb3288b068c3583c822be35418b28e91', class: "pn-pn-arrow-left", onClick: () => this.scroll(-120), tabindex: "-1" }, h("pn-icon", { key: 'b812b5b471ba0982be6cb3bcacc84bb2f52fa0e3', icon: arrow_left, color: "white" })), h("button", { key: '70d5bffed71999aaf154f88590378496d79e7f55', class: "pn-pn-arrow-right", onClick: () => this.scroll(120), tabindex: "-1" }, h("pn-icon", { key: 'a2d4319bab3a80b092321873ff66e4b421f14743', icon: arrow_right, color: "blue700" }))))), this.dropdownActive && (h("ul", { key: '1e2a73e7b4d523f3feba0dc18ccc14871b551862', id: this.navid, class: this.dropdownClasses() }, h("slot", { key: '20f647483c10a84de4bf2f40126b83b65b61b99f', name: "dropdown-item" })))));
     }
     static get is() { return "pn-page-nav"; }
     static get originalStyleUrls() {

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

@@ -188,7 +188,7 @@ export class PnPagination {
         return (h("pn-button", { arialabel: label, ariacurrent: current ? 'page' : null, href: this.getUrl(page), rel: current ? null : rel, appearance: "light", small: true, icon: icon, iconOnly: true, onPnClick: ({ detail }) => this.navigate({ page, event: detail }) }));
     }
     render() {
-        return (h(Host, { key: '9c803b80520ec25c53d3e7e96771e8bdba352946' }, h("nav", { key: '1829b73b38273b421d012c73c7f1d43ba855fdca', id: this.paginationId, class: "pn-pagination", "aria-label": this.label || this.translate('PAGINATION') }, this.useRowList() && (h("pn-select", { key: '95e4cc8df8a96309e9417ba4a02889e100d06fbb', class: "pn-pagination-rows", label: this.rowsLabel || this.translate('ROWS_PAGE'), onChange: event => this.setRows(event) }, this.getRowList().map(item => (h("option", { value: item, selected: this.rows === Number(item), innerHTML: `${item}` }))))), h("div", { key: 'b28d4c46195f783905b9d5b4d20d53b9dc7c7aff', class: "pn-pagination-container", "data-right": this.useRowList() }, this.renderJumpButton(), this.renderButton({ page: 1, dataAttr: 'first' }), this.renderDivider(), h("ol", { key: 'dc1ef8dd87e9446001a6d4adf49f83ce6a53c066', class: "pn-pagination-list", ref: el => (this.listElement = el) }, this.getPagination().map(item => this.renderItem(item))), this.renderDivider(true), this.renderButton({ page: this.pages, dataAttr: 'last' }), this.renderJumpButton(true)))));
+        return (h(Host, { key: '4b78edcca36adfd17035e9bed30ae5af6918d6e8' }, h("nav", { key: '600dd0a880e03b9b5e98de4ee2d55134a0a90b8e', id: this.paginationId, class: "pn-pagination", "aria-label": this.label || this.translate('PAGINATION') }, this.useRowList() && (h("pn-select", { key: '8cca49bb36c9b10fa05e7637acec36e28b25fb8e', class: "pn-pagination-rows", label: this.rowsLabel || this.translate('ROWS_PAGE'), onChange: event => this.setRows(event) }, this.getRowList().map(item => (h("option", { value: item, selected: this.rows === Number(item), innerHTML: `${item}` }))))), h("div", { key: 'd3fc1f233ab4d62c868a8a0a2076d7666d5dd53a', class: "pn-pagination-container", "data-right": this.useRowList() }, this.renderJumpButton(), this.renderButton({ page: 1, dataAttr: 'first' }), this.renderDivider(), h("ol", { key: '17be56bca6cd83e7f7dc3174e2e92d91a05930dd', class: "pn-pagination-list", ref: el => (this.listElement = el) }, this.getPagination().map(item => this.renderItem(item))), this.renderDivider(true), this.renderButton({ page: this.pages, dataAttr: 'last' }), this.renderJumpButton(true)))));
     }
     static get is() { return "pn-pagination"; }
     static get originalStyleUrls() {