@postnord/pn-marketweb-components 4.1.1 → 4.2.0

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

@@ -76,6 +76,8 @@ export class PnDatePicker extends Mixin(animateHeightFactory) {
      * @see {@link https://day.js.org/docs/en/display/format Day.js format documentation.}
      */
     format = 'YYYY-MM-DD';
+    /** Set the date picker label as compact. If used, the `placeholder` will no longer be displayed. @since v7.21.0 */
+    compact = false;
     /** Manually set language; this will be inherited from the topbar. */
     language = null;
     /** Set a custom ID for the calendar. @since v7.6.0 @category HTML attributes */
@@ -698,10 +700,14 @@ export class PnDatePicker extends Mixin(animateHeightFactory) {
     renderYearGrid() {
         return (h("ul", { class: "pn-date-picker-list" }, this.getYearGrid()?.map(year => (h("li", { key: year, class: "pn-date-picker-item", "data-item": "year" }, h("button", { type: "button", class: "pn-date-picker-button", ...this.getDayAttributes({ year }, false) }, h("span", null, year)))))));
     }
+    renderLabel(to = false) {
+        const id = to ? this.idTo : this.idFrom;
+        const label = to ? this.labelTo : this.labelFrom;
+        return (h("label", { class: "pn-date-picker-label", htmlFor: id, "data-compact": this.compact }, h("span", null, label)));
+    }
     renderInput({ to = false } = {}) {
         const id = to ? this.idTo : this.idFrom;
         const idButton = to ? this.idToButton : this.idFromButton;
-        const label = to ? this.labelTo : this.labelFrom;
         const value = to ? this.end : this.start;
         const placeholder = to ? this.endPlaceholder : this.placeholder;
         const list = to ? this.listEnd : this.list;
@@ -714,10 +720,10 @@ export class PnDatePicker extends Mixin(animateHeightFactory) {
             textButton += `, ${dateText.replace('{date}', value)}`;
         }
         const showButton = !(this.disabled || this.readonly);
-        return (h("div", { class: "pn-date-picker-container", "data-error": this.hasError() }, h("label", { class: "pn-date-picker-label", htmlFor: id }, h("span", null, label)), h("div", { class: "pn-date-picker-field" }, h("input", { type: "text", id: id, class: "pn-date-picker-input", name: this.name, placeholder: placeholder, autocomplete: this.autocomplete, maxlength: this.disableMaxLength ? null : this.format.length, list: list, pattern: this.pattern, value: value, disabled: this.disabled, required: this.required, readonly: this.readonly, "aria-describedby": this.ariaDescribedby(), "aria-invalid": this.hasError()?.toString(), onInput: e => this.inputHandler(e, to), "data-active": editing }), showButton && (h("pn-button", { class: "pn-date-picker-toggle", buttonId: idButton, icon: calendar, iconOnly: true, appearance: "light", arialabel: textButton, ariaexpanded: this.open.toString(), ariacontrols: this.idCalendar, "data-active": this.open, "data-input": true, small: true, onPnClick: () => this.toggleGrid(null, to), onKeyDown: e => this.handleButtonBlur(e) })))));
+        return (h("div", { class: "pn-date-picker-container", "data-error": this.hasError() }, !this.compact && this.renderLabel(to), h("div", { class: "pn-date-picker-field" }, h("input", { type: "text", id: id, class: "pn-date-picker-input", name: this.name, placeholder: this.compact ? ' ' : placeholder, autocomplete: this.autocomplete, maxlength: this.disableMaxLength ? null : this.format.length, list: list, pattern: this.pattern, value: value, disabled: this.disabled, required: this.required, readonly: this.readonly, "aria-describedby": this.ariaDescribedby(), "aria-invalid": this.hasError()?.toString(), "data-active": editing, "data-compact": this.compact, onInput: e => this.inputHandler(e, to) }), this.compact && this.renderLabel(to), showButton && (h("pn-button", { class: "pn-date-picker-toggle", buttonId: idButton, icon: calendar, iconOnly: true, appearance: "light", arialabel: textButton, ariaexpanded: this.open.toString(), ariacontrols: this.idCalendar, "data-active": this.open, "data-input": true, small: true, onPnClick: () => this.toggleGrid(null, to), onKeyDown: e => this.handleButtonBlur(e) })))));
     }
     render() {
-        return (h(Host, { key: '4d85525aaba22979d1bfffbfc9822ec4aa81a8b5' }, h("div", { key: '84a6553fca26f0f1732a4e4f9586a4712e100f56', class: "pn-date-picker" }, this.renderInput(), this.range && (h("div", { key: '58f8f08063eba3bea6ab2ca011a5b967e0b3c8c0', class: "pn-date-picker-range-icon test" }, h("pn-icon", { key: 'a5d25d2567004851dd00a80b5f7f38844074d837', icon: arrow_right }))), this.range && this.renderInput({ to: this.range })), h("div", { key: 'bba85a8e66ab8e7291cb3c42e557ddd3df5bd083', id: this.idCalendar, class: "pn-date-picker-calendar", role: "dialog", "aria-label": this.translate('CALENDAR_NAVIGATION'), "data-open": this.open, "data-direction": this.openUp ? 'top' : 'bottom', "data-range": this.range, style: { height: '0px' }, ref: el => (this.calendarElement = el), onKeyDown: e => this.handleCalendarTabEsc(e) }, h("div", { key: 'c5a4fe5d251ba8c516d7d0e1ee1f399bb3b612bc', class: "pn-date-picker-wrapper" }, h("nav", { key: '66c4b5edec33b5f5f00e8ac11bec5c7972fb4fc7', class: "pn-date-picker-nav", "aria-labelledby": this.idCalendar }, h("pn-button", { key: '824460845e4d85d08fa15cb94fc8ad1bde3c0cc9', hidden: this.viewingMonth(), small: true, appearance: "light", arialabel: this.translate(`PREVIOUS_${this.viewType().toUpperCase()}`), icon: arrow_left, iconOnly: true, onPnClick: () => this.setNavView({ minus: true }) }), h("pn-button", { key: '57891f7b9b7b2f07fc82be0c675984a10bbb85ea', hidden: !this.viewingCalendar(), small: true, appearance: "light", onPnClick: () => this.setView(MONTHS) }, h("span", { key: '55427549f9bcdf57549f519d238bc38b7ee61a1c', class: "pn-date-picker-month", "data-full": true }, this.translateDateText({ date: 1 }, 'MMMM')), h("span", { key: '2d83a043d900d764f1db394257d7b4662c77d7af', class: "pn-date-picker-month", "data-abbr": true }, this.translateDateText({ date: 1 }, 'MMM'))), h("h2", { key: '3373b6fa956909e3b856ba79586a964e5a420d8a', hidden: this.viewingCalendar(), class: "pn-date-picker-title" }, this.translate(`SELECT_${this.viewType().toUpperCase()}`)), h("pn-button", { key: '8a4e80b9045a9793636833651dbaf4eb813a0129', hidden: !this.viewingCalendar(), small: true, appearance: "light", onPnClick: () => this.setView(YEARS) }, h("span", { key: '4e2888e1c0f762ca85285cabbfc3adfa1a13a5bc' }, this.dateViewYear)), h("pn-button", { key: '4b78b5b1f7722a656a6a38676337cce45dc9c8f0', hidden: this.viewingMonth(), small: true, appearance: "light", arialabel: this.translate(`NEXT_${this.viewType().toUpperCase()}`), icon: arrow_right, iconOnly: true, onPnClick: () => this.setNavView({ plus: true }) })), this.viewingYears() && this.renderYearGrid(), this.viewingMonth() && this.renderMonthGrid(), this.viewingCalendar() && this.renderDateGrid(), h("aside", { key: '7a3153edc880f5a9fe5a3ca6a1d26aa3c8bd8633', class: "pn-date-picker-chips" }, h("slot", { key: '5679b936f9e976c11eee8b5a907e9213ebe43cfe', name: "chips" })), h("nav", { key: '6a534aeb468dda5595cb28accc10cdcd1d0a0d5e', class: "pn-date-picker-bottom", hidden: this.viewingCalendar() }, h("pn-button", { key: '1ced26f417ce40b78a3c666f33d82c2f5f5b4021', appearance: "light", variant: "outlined", small: true, icon: pn_return, onPnClick: () => this.setView(CALENDAR) }, h("span", { key: '3f32c7c48865204d3ec238f636cfa4b606fd731c' }, this.translate('GO_CALENDAR')))))), h("p", { key: 'd25bc2c176f6a91acf29858b539889e86252e0b7', id: this.idHelper, class: "pn-date-picker-helpertext", hidden: !this.hasHelperText() || this.hasError() }, h("span", { key: '133f0e416acdc69416aa5a4caf19cfe966fe16e3' }, this.helpertext), h("slot", { key: 'f3475514df86b1098d8a452d1bc8170e200c8134', name: "helpertext" })), h("p", { key: '7538f6b51c50a8276a453f7255b38201c4ccabf4', id: this.idError, class: "pn-date-picker-error", role: "alert", hidden: !this.hasErrorMessage() }, h("span", { key: '3b0b2798b8bf329a889f33886b3ffa40ed7d0686' }, this.error), h("slot", { key: '201d08ca9eeb41656aac9aab42687d303b97276a', name: "error" }))));
+        return (h(Host, { key: '0485d508d1df7d71009ab2c22096384928750697' }, h("div", { key: '31514c4b9c216ca227ac91c90e82846992df283c', class: "pn-date-picker" }, this.renderInput(), this.range && (h("div", { key: '2d924b59e6f7e41364413935b08640db0aa1622e', class: "pn-date-picker-range-icon test" }, h("pn-icon", { key: '51ec54178bbf69c66fe17228017aeb8985e551fc', icon: arrow_right }))), this.range && this.renderInput({ to: this.range })), h("div", { key: '16d60d86b8d9c01b7732a3c7b773d1157eedbd2b', id: this.idCalendar, class: "pn-date-picker-calendar", role: "dialog", "aria-label": this.translate('CALENDAR_NAVIGATION'), "data-open": this.open, "data-direction": this.openUp ? 'top' : 'bottom', "data-range": this.range, style: { height: '0px' }, ref: el => (this.calendarElement = el), onKeyDown: e => this.handleCalendarTabEsc(e) }, h("div", { key: '703d253840d5e9943750469c9495c3151b85f08c', class: "pn-date-picker-wrapper" }, h("nav", { key: 'e25723946681d630dffeeddbf814b3a720c9685c', class: "pn-date-picker-nav", "aria-labelledby": this.idCalendar }, h("pn-button", { key: '9dec68c96c3ab4f8ca0c29783cd1e693e43281e1', hidden: this.viewingMonth(), small: true, appearance: "light", arialabel: this.translate(`PREVIOUS_${this.viewType().toUpperCase()}`), icon: arrow_left, iconOnly: true, onPnClick: () => this.setNavView({ minus: true }) }), h("pn-button", { key: '33dfc7f288f489eb814f27f61869793bf718fb6a', hidden: !this.viewingCalendar(), small: true, appearance: "light", onPnClick: () => this.setView(MONTHS) }, h("span", { key: '67b029ff5dae525732dc78d1be4a3c706848078c', class: "pn-date-picker-month", "data-full": true }, this.translateDateText({ date: 1 }, 'MMMM')), h("span", { key: '82b2346a120e52d3f55d40eae85d191673c4e906', class: "pn-date-picker-month", "data-abbr": true }, this.translateDateText({ date: 1 }, 'MMM'))), h("h2", { key: '64c4b74c742c62370e8fe74b7ffd0c8e10c8c8d7', hidden: this.viewingCalendar(), class: "pn-date-picker-title" }, this.translate(`SELECT_${this.viewType().toUpperCase()}`)), h("pn-button", { key: '065dcdbccfaf4f4b3eeae1bba9772a8bce804b66', hidden: !this.viewingCalendar(), small: true, appearance: "light", onPnClick: () => this.setView(YEARS) }, h("span", { key: '2c0b032610650aa43701a3f52052defad495569d' }, this.dateViewYear)), h("pn-button", { key: 'feb54d3c95595a39aa93eb2c74c7582a82b3031a', hidden: this.viewingMonth(), small: true, appearance: "light", arialabel: this.translate(`NEXT_${this.viewType().toUpperCase()}`), icon: arrow_right, iconOnly: true, onPnClick: () => this.setNavView({ plus: true }) })), this.viewingYears() && this.renderYearGrid(), this.viewingMonth() && this.renderMonthGrid(), this.viewingCalendar() && this.renderDateGrid(), h("aside", { key: '1d1aa223f4314d714db6e994a7f87f3f0004f472', class: "pn-date-picker-chips" }, h("slot", { key: '1239efd56b8aa01558c9671e3a1c198af8cdec28', name: "chips" })), h("nav", { key: '0410b4a1a92b1ccb56dee901be8df49933301142', class: "pn-date-picker-bottom", hidden: this.viewingCalendar() }, h("pn-button", { key: 'ec803a3af2c22f05f1416e0f62424b3341256d0f', appearance: "light", variant: "outlined", small: true, icon: pn_return, onPnClick: () => this.setView(CALENDAR) }, h("span", { key: '76b1889719347c417b5366bc511f48604aad35e1' }, this.translate('GO_CALENDAR')))))), h("p", { key: 'efb966a5373f0a1b0e300999af60a1f8b9194429', id: this.idHelper, class: "pn-date-picker-helpertext", hidden: !this.hasHelperText() || this.hasError() }, h("span", { key: 'cf169a86e1a4c9ca46d835a536971306dba5224f' }, this.helpertext), h("slot", { key: '858470af2c9febb68a7beffa3014485d91297893', name: "helpertext" })), h("p", { key: '219d57d13eebcb6d6621fe8e1a717fedcc39e641', id: this.idError, class: "pn-date-picker-error", role: "alert", hidden: !this.hasErrorMessage() }, h("span", { key: '92b84f913d27642f9487f6316040f95478a75373' }, this.error), h("slot", { key: '31a3de009f3b54f775f558ae6a9aa17ebb2bbc88', name: "error" }))));
     }
     static get is() { return "pn-date-picker"; }
     static get originalStyleUrls() {
@@ -867,6 +873,29 @@ export class PnDatePicker extends Mixin(animateHeightFactory) {
                 "attribute": "format",
                 "defaultValue": "'YYYY-MM-DD'"
             },
+            "compact": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "v7.21.0"
+                        }],
+                    "text": "Set the date picker label as compact. If used, the `placeholder` will no longer be displayed."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "compact",
+                "defaultValue": "false"
+            },
             "language": {
                 "type": "string",
                 "mutable": false,

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

@@ -67,7 +67,7 @@ export class PnFieldset {
         return alert_exclamation_circle;
     }
     render() {
-        return (h(Host, { key: 'b7ec45925ea5371173faf440a530c7ba3f03b0f4' }, h("fieldset", { key: '2caaf0877158f2aa059c1d4e6ece96650ec29bf7', id: this.fieldsetId, class: "pn-fieldset", disabled: this.disabled, "aria-describedby": this.helpertext && this.idHelpertext, "aria-invalid": this.hasError().toString() }, h("legend", { key: 'b9f6768922473c764ac40bca471d976286941b9a', class: "pn-fieldset-legend" }, this.legend), this.helpertext && (h("p", { key: '2f189ecd40ae974f4471722e7c2fc17fbc65a1ab', id: this.idHelpertext, class: "pn-fieldset-helpertext" }, this.helpertext)), h("div", { key: '760907f09aeca87ddf98941faf84f908da154e28', class: "pn-fieldset-items" }, h("slot", { key: '58e258065ab6344207c9b56526fdcdf42de9aa42' })), h("div", { key: '122ebee3ba24bb5bb66d7eaf828ac573540fdf5c', class: "pn-fieldset-message-wrapper", role: "alert", hidden: !this.error }, h("pn-icon", { key: '48e77425756edf11dbc8dfe811b18041919bf6d8', icon: this.getSymbol() }), h("p", { key: 'c5e8933004a643ef3ed87b20f54d384535ccb054', class: "pn-fieldset-message" }, this.error)))));
+        return (h(Host, { key: '4eac26b9a4c9095888cbe548f30eddcbed3efcdf' }, h("fieldset", { key: '341684c752c43382f37d0d95f9ea8c0d2d170ef1', id: this.fieldsetId, class: "pn-fieldset", disabled: this.disabled, "aria-describedby": this.helpertext && this.idHelpertext, "aria-invalid": this.hasError().toString() }, h("legend", { key: '3f98ab3a56288cebb07cce9c49b6e1bebd2096f2', class: "pn-fieldset-legend" }, this.legend), this.helpertext && (h("p", { key: '979b9b47ae0baa2f84bf19de877149773bfd63b9', id: this.idHelpertext, class: "pn-fieldset-helpertext" }, this.helpertext)), h("div", { key: 'a67905a01003d767e26061ff8fa3af86a0900c27', class: "pn-fieldset-items" }, h("slot", { key: 'a2a02e54157e39e43cf03839c8bb2a561533eb39' })), h("div", { key: '4c618709e6a3cbaa20761368acc70b6d2e964930', class: "pn-fieldset-message-wrapper", role: "alert", hidden: !this.error }, h("pn-icon", { key: 'db1b62bccada153943c62195242e66b62d9cc2c3', icon: this.getSymbol() }), h("p", { key: '9b94853b5064d9563e39c20491d7139eead83f56', class: "pn-fieldset-message" }, this.error)))));
     }
     static get is() { return "pn-fieldset"; }
     static get originalStyleUrls() {

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

@@ -391,7 +391,7 @@ export class PnFileUpload {
         return list.join(',');
     }
     render() {
-        return (h(Host, { key: '1c7df13d284805a69618cac9130a3599dac09afa' }, h("div", { key: 'e6f37c7ac6e0283c06049562b3e20b11cf89f1c3', class: "pn-file-upload-container" }, h("div", { key: '7647d0f6afdccef876e8c86b084b7b1106715764', class: "pn-dropzone-container" }, h("input", { key: 'a5cc41ce25c13ef1d4046b0fb9c45372da932b86', id: this.idFileUpload, class: "pn-file-upload-input", type: "file", name: this.name, multiple: this.multiple, accept: this.accept, capture: this.capture, disabled: this.disabled, required: this.required, "aria-describedby": this.describedBy(), "aria-invalid": this.invalid?.toString(), onClick: e => ripple(e, this.hostElement, '.pn-dropzone-inner'), onChange: () => this._onAddFile(), onDragOver: e => this._onDragOverFile(e), onDragLeave: e => this._onDragLeaveFile(e), onDrop: e => this._onDropFile(e), ref: el => (this.fileInputElement = el) }), h("div", { key: 'ccd799f14663e8d645fcea967e526a4be89324dd', class: "pn-dropzone-inner", "data-hover": this.isHovering, "data-invalid": this.invalid }, h("pn-icon", { key: '42c98b09e804d9fa8747c16cfe20773dfecd286c', class: "pn-file-upload-icon-element", icon: upload, color: "blue700" }), h("label", { key: 'd4c0d0d127830a82cc6c05e6b2bdb7007b87384c', htmlFor: this.idFileUpload, class: "pn-file-upload-title" }, this.label || this.translate('CLICKORDRAG')), this.helpertext && (h("p", { key: '7dc83f69dd408af25194e644075ab7d852da4564', id: this.idHelpertext, class: "pn-file-upload-subtitle" }, this.helpertext)), this.accept && (h("p", { key: '64ba6ca78c6b2c9b626e7c4d4ca45074bbd0a6c7', id: this.idAccepttext, class: "pn-file-upload-subtitle" }, this.translate('ACCEPTEDFORMATS'), ": ", this.accept, this.maxSize && (h("span", { key: '1bf59a1291145d6adc7e9c6c2516f98e4b1522b2' }, ' ', "(", this.translate('MAXFILESIZE'), ": ", this.maxSize, ")")))))), !!this.files.length && (h("ul", { key: '06a0f4c327edee2c192e8b8fb38eb9ce5ab7e51a', class: "files-list" }, this.files.map((file) => (h("li", { class: "files-list-item-container", key: file.uuid }, h("div", { class: this.getFileItemClass(file) }, h("div", { class: "file-list-item-title" }, h("pn-icon", { icon: this.getFileIcon(file), color: this.getFileColor(file) }), this.hideProgress || file.progress === 0 ? (h("div", { class: "filename" }, file.filename)) : (h("pn-progress-bar", { label: file.filename, progress: file.progress, error: file.error && file.errorMessage }))), h("pn-button", { small: true, variant: "borderless", arialabel: `${this.translate('REMOVE_FILE')} ${file.filename}`, appearance: file.error ? 'warning' : 'light', icon: trash_can, iconOnly: true, tooltip: this.translate('REMOVE_FILE'), loading: this.isLoading(file), onClick: () => this.removeFile(file) })), file.error ? (h("div", { class: "files-list-item-text-error" }, file.errorMessage || file.error.message)) : null))))), h("slot", { key: '38c1a1703b7d2c418ecc76823f32248c5d8b1ec7' }))));
+        return (h(Host, { key: 'bce5d5c3684f31a2841ecf631155ab384f318879' }, h("div", { key: '07abc549d0ad86fb818f446e4fa223e3b4ea6c84', class: "pn-file-upload-container" }, h("div", { key: '1a9d09dd8cf39db11dc741732a7c04276e10a6a9', class: "pn-dropzone-container" }, h("input", { key: '387071f47d9aa658929448b041285c01d5187da4', id: this.idFileUpload, class: "pn-file-upload-input", type: "file", name: this.name, multiple: this.multiple, accept: this.accept, capture: this.capture, disabled: this.disabled, required: this.required, "aria-describedby": this.describedBy(), "aria-invalid": this.invalid?.toString(), onClick: e => ripple(e, this.hostElement, '.pn-dropzone-inner'), onChange: () => this._onAddFile(), onDragOver: e => this._onDragOverFile(e), onDragLeave: e => this._onDragLeaveFile(e), onDrop: e => this._onDropFile(e), ref: el => (this.fileInputElement = el) }), h("div", { key: '71c627aa6044908835b0f6e2227d7744da76680e', class: "pn-dropzone-inner", "data-hover": this.isHovering, "data-invalid": this.invalid }, h("pn-icon", { key: 'a621fd0abb16c8c7b2efcb67932a0e50e12942dd', class: "pn-file-upload-icon-element", icon: upload, color: "blue700" }), h("label", { key: 'cc90d1af83fe3814b8ea9991bcdf85c40f48f874', htmlFor: this.idFileUpload, class: "pn-file-upload-title" }, this.label || this.translate('CLICKORDRAG')), this.helpertext && (h("p", { key: '8d4032bcd909516779d07f042be878105f3479a1', id: this.idHelpertext, class: "pn-file-upload-subtitle" }, this.helpertext)), this.accept && (h("p", { key: '715cc9ed4c8878068182a30affa8649c904f041d', id: this.idAccepttext, class: "pn-file-upload-subtitle" }, this.translate('ACCEPTEDFORMATS'), ": ", this.accept, this.maxSize && (h("span", { key: 'a217dcfd8528d86deb9aee37b7750eb574936a56' }, ' ', "(", this.translate('MAXFILESIZE'), ": ", this.maxSize, ")")))))), !!this.files.length && (h("ul", { key: 'c1a1cd0c816992c6f524eaf82296ad4fd3300a6b', class: "files-list" }, this.files.map((file) => (h("li", { class: "files-list-item-container", key: file.uuid }, h("div", { class: this.getFileItemClass(file) }, h("div", { class: "file-list-item-title" }, h("pn-icon", { icon: this.getFileIcon(file), color: this.getFileColor(file) }), this.hideProgress || file.progress === 0 ? (h("div", { class: "filename" }, file.filename)) : (h("pn-progress-bar", { label: file.filename, progress: file.progress, error: file.error && file.errorMessage }))), h("pn-button", { small: true, variant: "borderless", arialabel: `${this.translate('REMOVE_FILE')} ${file.filename}`, appearance: file.error ? 'warning' : 'light', icon: trash_can, iconOnly: true, tooltip: this.translate('REMOVE_FILE'), loading: this.isLoading(file), onClick: () => this.removeFile(file) })), file.error ? (h("div", { class: "files-list-item-text-error" }, file.errorMessage || file.error.message)) : null))))), h("slot", { key: '2690ccdc2c5e97a41c99a3b385e68739bb69cecb' }))));
     }
     static get is() { return "pn-file-upload"; }
     static get originalStyleUrls() {

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

@@ -6,6 +6,10 @@ pn-input {
   flex-direction: column;
 }
 
+pn-input .pn-input {
+  --pn-input-offset-left: 0em;
+  --pn-input-offset-right: 0em;
+}
 pn-input .pn-input-label {
   cursor: pointer;
   display: flex;
@@ -16,7 +20,7 @@ pn-input .pn-input-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,6 +30,26 @@ pn-input .pn-input-label {
     transition-delay: 0s;
   }
 }
+pn-input .pn-input-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-input .pn-input-label[data-compact] > span {
+  font-size: 1em;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  line-height: 1.5em;
+}
 pn-input .pn-input-label > span {
   font-size: 0.875em;
 }
@@ -33,13 +57,12 @@ pn-input .pn-input-group {
   position: relative;
 }
 pn-input .pn-input-element {
-  --pn-input-offset-left: 0em;
-  --pn-input-offset-right: 0em;
+  width: 100%;
   color: #2d2013;
   background-color: #ffffff;
   border: 0.0625em solid #969087;
   border-radius: 0.5em;
-  padding: 0.75em;
+  padding: 0.75em calc(0.75em + var(--pn-input-offset-right)) 0.75em calc(0.75em + var(--pn-input-offset-left));
   font-family: inherit;
   font-size: 1em;
   font-weight: 500;
@@ -71,6 +94,19 @@ pn-input .pn-input-element {
     transition-delay: 0s;
   }
 }
+pn-input .pn-input-element[data-compact] {
+  text-align: left;
+  padding-top: 1.125em;
+  padding-bottom: 0.375em;
+  max-width: unset;
+}
+pn-input .pn-input-element[data-compact]::placeholder {
+  color: transparent;
+}
+pn-input .pn-input-element[data-compact]:focus + .pn-input-label, pn-input .pn-input-element[data-compact]:not(:placeholder-shown) + .pn-input-label {
+  transform: translateY(-85%) scale(0.75);
+  transition-delay: 0s;
+}
 pn-input .pn-input-element::placeholder {
   color: #5e554a;
   font-weight: normal;
@@ -83,11 +119,6 @@ pn-input .pn-input-element:disabled {
   background-color: #f3f2f2;
   border-color: #f3f2f2;
 }
-pn-input .pn-input-element {
-  width: 100%;
-  padding-left: calc(var(--pn-input-offset-left) + 0.75em);
-  padding-right: calc(var(--pn-input-offset-right) + 0.75em);
-}
 pn-input .pn-input-element:read-only {
   border-color: #ffffff;
 }
@@ -153,6 +184,10 @@ pn-input .pn-input[data-error] > .pn-input-group > .pn-input-element:focus-visib
   border-color: #a70707;
   outline-color: #a70707;
 }
+pn-input .pn-input[data-error] > .pn-input-group > .pn-input-element:-webkit-autofill, pn-input .pn-input[data-error] > .pn-input-group > .pn-input-element:-webkit-autofill:hover, pn-input .pn-input[data-error] > .pn-input-group > .pn-input-element:-webkit-autofill:focus, pn-input .pn-input[data-error] > .pn-input-group > .pn-input-element:-webkit-autofill:active {
+  -webkit-box-shadow: 0 0 0 10em #fef7f6 inset;
+  -webkit-text-fill-color: #2d2013;
+}
 pn-input .pn-input[data-error] > .pn-input-message[role=alert] {
   color: #a70707;
 }
@@ -169,4 +204,8 @@ pn-input .pn-input[data-valid] > .pn-input-group > .pn-input-element:focus-visib
   background-color: #ffffff;
   border-color: #005e41;
   outline-color: #005e41;
+}
+pn-input .pn-input[data-valid] > .pn-input-group > .pn-input-element:-webkit-autofill, pn-input .pn-input[data-valid] > .pn-input-group > .pn-input-element:-webkit-autofill:hover, pn-input .pn-input[data-valid] > .pn-input-group > .pn-input-element:-webkit-autofill:focus, pn-input .pn-input[data-valid] > .pn-input-group > .pn-input-element:-webkit-autofill:active {
+  -webkit-box-shadow: 0 0 0 10em #edfbf3 inset;
+  -webkit-text-fill-color: #2d2013;
 }

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

@@ -2,7 +2,7 @@
  * Built with Stencil
  * By PostNord.
  */
-import { h, Host } from "@stencil/core";
+import { h, Host, forceUpdate } from "@stencil/core";
 import { uuidv4, en, awaitTopbar } from "../../../index";
 import { alert_exclamation_circle, check, close, preview_on, preview_off } from "pn-design-assets/pn-assets/icons.js";
 import { translations } from "./translations";
@@ -49,6 +49,8 @@ export class PnInput {
      * Not needed if you have the pntopbar on the page.
      **/
     language = null;
+    /** Use the compact label variant. The `placeholder` you provide will not be visible if used at the same time. @since v7.21.0 */
+    compact = false;
     /**
      * Select an icon to display before the input field value.
      * `icon` takes precedence over the `text-prefix` prop.
@@ -147,17 +149,29 @@ export class PnInput {
      **/
     error;
     handleOffset() {
-        requestAnimationFrame(() => requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
             const left = this.prefix?.clientWidth ? this.prefix.clientWidth + 8 : 0;
             const right = this.suffix?.clientWidth ? this.suffix.clientWidth + 8 : 0;
             this.offsetLeft = left;
             this.offsetRight = right;
-        }));
+        });
     }
     handleMessage() {
         this.checkSlottedHelper();
         this.checkSlottedError();
     }
+    connectedCallback() {
+        this.mo = new MutationObserver(() => {
+            forceUpdate(this.hostElement);
+            this.handleOffset();
+            this.handleMessage();
+        });
+        this.mo.observe(this.hostElement, { childList: true, subtree: true });
+    }
+    disconnectedCallback() {
+        if (this.mo)
+            this.mo.disconnect();
+    }
     async componentWillLoad() {
         this.handleMessage();
         if (this.inputid !== this.id)
@@ -167,16 +181,6 @@ export class PnInput {
     }
     componentDidLoad() {
         this.handleOffset();
-        if (this.mo)
-            this.mo.disconnect();
-        this.mo = new MutationObserver(() => {
-            this.handleOffset();
-            this.handleMessage();
-        });
-        this.mo.observe(this.hostElement, {
-            subtree: true,
-            childList: true,
-        });
     }
     setVal(event) {
         const target = event.composedPath?.()[0];
@@ -261,11 +265,24 @@ export class PnInput {
             return false;
         return this.type === 'search' && !!this.value?.length;
     }
+    validLabel() {
+        return this.label?.length > 0 || this.maxlength >= 1;
+    }
+    useLabel() {
+        return this.validLabel() && !this.compact;
+    }
+    /** Compact label must be positioned after the input element in order to work. */
+    useCompactLabel() {
+        return this.validLabel() && this.compact;
+    }
+    renderLabel() {
+        return (h("label", { htmlFor: this.inputid, class: "pn-input-label", "data-compact": this.compact }, this.label && h("span", null, this.label), this.maxlength >= 0 && h("span", null, `${this.value.length}/${this.maxlength}`)));
+    }
     render() {
-        return (h(Host, { key: 'f6553d466069c8e7558eb98dfd6deba21905d888' }, h("div", { key: 'e4eb511c59f571eccf70570cff7b44145ee64a70', class: "pn-input", "data-valid": this.valid, "data-error": this.hasError() }, (this.label || this.maxlength >= 1) && (h("label", { key: 'fc2a2516335378e1b6dabdb39b5da538c4cca995', htmlFor: this.inputid, class: "pn-input-label" }, this.label && h("span", { key: '63571398139a931d8a5dd59698f7ec26e0bc6ba9' }, this.label), this.maxlength >= 0 && h("span", { key: 'eb08d059863c41a86ff77102f837565d9eafe3ce' }, `${this.value.length}/${this.maxlength}`))), h("div", { key: '56ab6a577a2712b5430749515b22e776ec9b56a8', class: "pn-input-group" }, h("input", { key: 'ace87466651b4ef525d739f9499b4fa8b10a36e1', type: this.getInputType(), id: this.inputid, class: "pn-input-element", name: this.name, placeholder: this.placeholder, autocomplete: this.autocomplete, maxlength: this.maxlength, list: this.list, pattern: this.pattern, min: this.min, max: this.max, step: this.step, value: this.value, inputmode: this.inputmode, disabled: this.disabled, required: this.required, readonly: this.readonly, "aria-label": this.arialabel, "aria-describedby": this.hasMessage() ? this.idMessage : null, "aria-controls": this.ariacontrols, "aria-invalid": this.hasError()?.toString(), style: {
+        return (h(Host, { key: '3250630450288d09811b7c78bca5091ba93ec7ab' }, h("div", { key: 'db673ba19f300966eaf5c38136fe7d6143aa661d', class: "pn-input", "data-valid": this.valid, "data-error": this.hasError(), style: {
                 '--pn-input-offset-left': `${this.offsetLeft}px`,
                 '--pn-input-offset-right': `${this.offsetRight}px`,
-            }, onInput: e => this.setVal(e) }), h("div", { key: '334cb0b553144a1271e1a2e094ef3d19776f308d', class: "pn-input-eyecandy", "data-prefix": true, ref: el => (this.prefix = el) }, !!this.icon && h("pn-icon", { key: 'ac827d5f752445b4a5d0e94ae44646513deeb84f', icon: this.icon, "aria-hidden": "true" }), this.showPrefix() && h("span", { key: 'd0d4e2ad948ca3c9155e7b405ea2f4cd4f064f71', class: "pn-input-text" }, this.textPrefix)), h("div", { key: 'e972870933dfb2d8cf294facf51dceb7c64d8bf6', class: "pn-input-eyecandy", "data-suffix": true, ref: el => (this.suffix = el) }, this.showSuffix() && h("span", { key: 'd37da7ccf870f54455731417ac6afbe573589e8a', class: "pn-input-text" }, this.textSuffix), this.displayState() && h("pn-icon", { key: '5432e13d6a53b1e8d143498d0c068b035b89da21', "aria-hidden": "true", icon: this.stateIcon(), color: this.stateColor() }), this.isPassword() && (h("pn-button", { key: '7a04e3189a7ed5d3b29e93d0ac1031c22ffb14e0', icon: this.showPassword ? preview_on : preview_off, iconOnly: true, arialabel: this.passwordText(), small: true, appearance: "light", variant: "borderless", onClick: () => this.togglePassword() })), this.showClear() && (h("pn-button", { key: 'b9941892bb3cf8d64b810be56d3525b4fe7aa394', icon: close, iconOnly: true, arialabel: this.translate('CLEAR'), small: true, appearance: "light", variant: "borderless", onClick: () => this.clearVal() })))), h("p", { key: '466cf477bb1a8fd5f69c24cf9769a53b77a84167', class: "pn-input-message", id: this.idMessage, role: this.hasErrorMessage() ? 'alert' : null, hidden: !this.hasMessage() }, this.hasHelperText() && !this.hasError() && h("span", { key: '760f744cdc4cd0f35399b3e5e5dfb563a6e326a2', class: "pn-input-helper" }, this.helpertext), h("span", { key: '853ecf5094683f8ea69acd81ffa454c2ad7da383', class: "pn-input-helper-slot", hidden: !this.showHelperSlot || this.hasError() }, h("slot", { key: '634e73d6d3b93a1d5f0429de708fd3901968ec31', name: "helpertext" })), this.hasErrorMessage() && h("span", { key: 'f150a81d23c50bf2b705f7082d31bf748aaf91e7', class: "pn-input-error" }, this.error), h("span", { key: '2cd93c90d13a0ef9f153d051f3ee99ff9e25d025', class: "pn-input-error-slot", hidden: !this.showErrorSlot }, h("slot", { key: 'c1d461b5a82d635c57af689f29bf485e82117303', name: "error" }))))));
+            } }, this.useLabel() && this.renderLabel(), h("div", { key: 'b216b7f951be237aed6e46f1ccbcfd29b2a3cad1', class: "pn-input-group" }, h("input", { key: '4ee129c35c6a74a359df9d611b236132d7afac38', type: this.getInputType(), id: this.inputid, class: "pn-input-element", name: this.name, placeholder: this.compact ? this.placeholder || ' ' : this.placeholder, autocomplete: this.autocomplete, maxlength: this.maxlength, list: this.list, pattern: this.pattern, min: this.min, max: this.max, step: this.step, value: this.value, inputmode: this.inputmode, disabled: this.disabled, required: this.required, readonly: this.readonly, "aria-label": this.arialabel, "aria-describedby": this.hasMessage() ? this.idMessage : null, "aria-controls": this.ariacontrols, "aria-invalid": this.hasError()?.toString(), "data-compact": this.compact, "data-value": this.value?.length > 0, onInput: e => this.setVal(e) }), this.useCompactLabel() && this.renderLabel(), h("div", { key: '753a9abeaf5bfa5ffb3be10042a76aa7863bce9c', class: "pn-input-eyecandy", "data-prefix": true, ref: el => (this.prefix = el) }, !!this.icon && h("pn-icon", { key: 'acf1a6e42c9d37cab6f6a0453d8ea674df1cd0c3', icon: this.icon, "aria-hidden": "true" }), this.showPrefix() && h("span", { key: '70d2eb7e94e790d665a57557595c2bce4855b827', class: "pn-input-text" }, this.textPrefix)), h("div", { key: '1dcae3fb8489d2dc6aa7325baea693591acef31c', class: "pn-input-eyecandy", "data-suffix": true, ref: el => (this.suffix = el) }, this.showSuffix() && h("span", { key: '05044f3fbea582d507de30a0ff751abaf1da3206', class: "pn-input-text" }, this.textSuffix), this.displayState() && h("pn-icon", { key: '727650c9e6c9b9da2ef43e933fab95b6adc8a6bb', "aria-hidden": "true", icon: this.stateIcon(), color: this.stateColor() }), this.isPassword() && (h("pn-button", { key: '4e28eddff11c9aea670a6764aeb0316bccba1c1c', icon: this.showPassword ? preview_on : preview_off, iconOnly: true, arialabel: this.passwordText(), small: true, appearance: "light", variant: "borderless", onClick: () => this.togglePassword() })), this.showClear() && (h("pn-button", { key: '2181adb68c152d837ef03bf9b7e0eb66eb3ea6d2', icon: close, iconOnly: true, arialabel: this.translate('CLEAR'), small: true, appearance: "light", variant: "borderless", onClick: () => this.clearVal() })))), h("p", { key: 'b8b1039a61a23efd24ebd71285b15cce7bfc5ec0', class: "pn-input-message", id: this.idMessage, role: this.hasErrorMessage() ? 'alert' : null, hidden: !this.hasMessage() }, this.hasHelperText() && !this.hasError() && h("span", { key: '4433df6b700cc40ce2ae698d2474f57163b398a1', class: "pn-input-helper" }, this.helpertext), h("span", { key: '41c8fb1cbbc17b7c349922cac2ff42244a017e0c', class: "pn-input-helper-slot", hidden: !this.showHelperSlot || this.hasError() }, h("slot", { key: '5628bbc8db75161d18ad3e75c259bf3eb5fc9052', name: "helpertext" })), this.hasErrorMessage() && h("span", { key: 'e41145d7fab9f3ae35dd428971c79673d0531301', class: "pn-input-error" }, this.error), h("span", { key: 'ae85a9420fcb449cc874eadc7a066dd772f097a9', class: "pn-input-error-slot", hidden: !this.showErrorSlot }, h("slot", { key: 'bdd31ab2f706cac6e243562d035361a381ecfa43', name: "error" }))))));
     }
     static get is() { return "pn-input"; }
     static get originalStyleUrls() {
@@ -385,6 +402,29 @@ export class PnInput {
                 "attribute": "language",
                 "defaultValue": "null"
             },
+            "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. The `placeholder` you provide will not be visible if used at the same time."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "compact",
+                "defaultValue": "false"
+            },
             "icon": {
                 "type": "string",
                 "mutable": false,

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

@@ -6,12 +6,22 @@ pn-multiselect {
 }
 
 pn-multiselect .pn-multiselect {
+  position: relative;
   border: 0;
   margin: 0;
   padding: 0;
 }
+pn-multiselect .pn-multiselect[data-icon] {
+  --pn-input-offset-left: 2em;
+}
 pn-multiselect .pn-multiselect[data-icon] .pn-multiselect-element {
-  padding-left: 3em;
+  padding-left: 2.75em;
+}
+pn-multiselect .pn-multiselect[data-error] .pn-multiselect-label {
+  color: #a70707;
+}
+pn-multiselect .pn-multiselect[data-error] .pn-multiselect-label[data-compact] {
+  color: #2d2013;
 }
 pn-multiselect .pn-multiselect[data-error] .pn-multiselect-element {
   padding-right: 5.5em;
@@ -25,7 +35,12 @@ pn-multiselect .pn-multiselect[data-error] .pn-multiselect-element:focus-visible
   border-color: #a70707;
   outline-color: #a70707;
 }
+pn-multiselect .pn-multiselect[data-error] .pn-multiselect-element:-webkit-autofill, pn-multiselect .pn-multiselect[data-error] .pn-multiselect-element:-webkit-autofill:hover, pn-multiselect .pn-multiselect[data-error] .pn-multiselect-element:-webkit-autofill:focus, pn-multiselect .pn-multiselect[data-error] .pn-multiselect-element:-webkit-autofill:active {
+  -webkit-box-shadow: 0 0 0 10em #fef7f6 inset;
+  -webkit-text-fill-color: #2d2013;
+}
 pn-multiselect .pn-multiselect-label {
+  width: 100%;
   cursor: pointer;
   display: flex;
   justify-content: space-between;
@@ -35,7 +50,7 @@ pn-multiselect .pn-multiselect-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);
 }
@@ -45,11 +60,31 @@ pn-multiselect .pn-multiselect-label {
     transition-delay: 0s;
   }
 }
+pn-multiselect .pn-multiselect-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-multiselect .pn-multiselect-label[data-compact] > span {
+  font-size: 1em;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  line-height: 1.5em;
+}
 pn-multiselect .pn-multiselect-label > span {
   font-size: 0.875em;
 }
-pn-multiselect .pn-multiselect-label {
-  width: 100%;
+pn-multiselect .pn-multiselect-label[data-compact] {
+  justify-content: start;
 }
 pn-multiselect .pn-multiselect-sr-only {
   position: absolute;
@@ -139,11 +174,21 @@ pn-multiselect .pn-multiselect-button[aria-expanded=true] > pn-icon > svg > path
   transition-delay: 0s;
 }
 pn-multiselect .pn-multiselect-element {
+  cursor: text;
+  text-align: left;
+  transition-delay: 0.1s, 0.1s, 0s;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5em;
+  overflow: hidden;
+  text-overflow: ellipsis;
   color: #2d2013;
   background-color: #ffffff;
   border: 0.0625em solid #969087;
   border-radius: 0.5em;
-  padding: 0.75em;
+  padding: 0.75em 3.5em 0.75em 0.75em;
   font-family: inherit;
   font-size: 1em;
   font-weight: 500;
@@ -175,6 +220,19 @@ pn-multiselect .pn-multiselect-element {
     transition-delay: 0s;
   }
 }
+pn-multiselect .pn-multiselect-element[data-compact] {
+  text-align: left;
+  padding-top: 1.125em;
+  padding-bottom: 0.375em;
+  max-width: unset;
+}
+pn-multiselect .pn-multiselect-element[data-compact]::placeholder {
+  color: transparent;
+}
+pn-multiselect .pn-multiselect-element[data-compact]:focus + .pn-multiselect-label, pn-multiselect .pn-multiselect-element[data-compact]:not(:placeholder-shown) + .pn-multiselect-label {
+  transform: translateY(-85%) scale(0.75);
+  transition-delay: 0s;
+}
 pn-multiselect .pn-multiselect-element::placeholder {
   color: #5e554a;
   font-weight: normal;
@@ -187,19 +245,6 @@ pn-multiselect .pn-multiselect-element:disabled {
   background-color: #f3f2f2;
   border-color: #f3f2f2;
 }
-pn-multiselect .pn-multiselect-element {
-  cursor: text;
-  text-align: left;
-  transition-delay: 0.1s, 0.1s, 0s;
-  width: 100%;
-  padding-right: 3.5em;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.5em;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
 pn-multiselect .pn-multiselect-element:disabled {
   color: #5e554a;
   background-color: #f3f2f2;
@@ -570,10 +615,6 @@ pn-multiselect .pn-multiselect-option-text {
   text-overflow: ellipsis;
   overflow: hidden;
 }
-pn-multiselect .pn-multiselect-option-label {
-  color: #2d2013;
-  font-weight: 400;
-}
 pn-multiselect .pn-multiselect-option-helper {
   color: #5e554a;
   margin: 0;

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

@@ -57,6 +57,8 @@ export class PnMultiselect extends Mixin(animateHeightFactory) {
     selectName;
     /** Display an icon to the left of the select input */
     icon;
+    /** Set the date picker label as compact. If used, the `placeholder` will no longer be displayed. @since v7.21.0 */
+    compact = false;
     /** Manually set the language, not needed if you have the pnTopbar available */
     language = null;
     /**
@@ -264,7 +266,8 @@ export class PnMultiselect extends Mixin(animateHeightFactory) {
     optionsCheckedLabels() {
         return this.optionsChecked()
             ?.map(({ label }) => label)
-            ?.join(', ');
+            ?.join(', ')
+            ?.trim();
     }
     optionsSearch() {
         const list = this.options?.reduce((sum, item) => {
@@ -550,8 +553,16 @@ export class PnMultiselect extends Mixin(animateHeightFactory) {
     renderChips() {
         return (h("ul", { id: this.idChips, class: "pn-multiselect-chips", "aria-label": this.translate('SELECTED_OPTIONS'), ref: el => (this.elChips = el) }, this.optionsCheckedPreview()?.map(({ label, value }, index) => (h("li", { class: "pn-multiselect-chip", "aria-setsize": this.optionsCheckedTotal(), "aria-posinset": index + 1, key: `${label}-${value}` }, h("span", { class: "pn-multiselect-chip-label" }, label), h("button", { type: "button", class: "pn-multiselect-chip-button", "aria-label": `${this.translate('REMOVE')} ${label}`, onClick: () => this.optionSelect({ val: value, checked: false, chip: index }) }, h("pn-icon", { icon: close, small: true, color: "blue700" }))))), this.optionsCheckedTotal() > this.itemCount && (h("li", { class: "pn-multiselect-chip", "data-count": true }, h("span", { class: "pn-multiselect-chip-label" }, "+ ", this.additonalOptions())))));
     }
+    renderLabel(compactLabel = false) {
+        if (!this.label)
+            return null;
+        const Tag = compactLabel ? 'div' : 'legend';
+        const id = compactLabel ? null : this.idLegend;
+        const attrs = compactLabel ? { inert: true } : { onClick: () => this.handleLabel() };
+        return (h(Tag, { id: id, class: { 'pn-multiselect-label': true, 'pn-multiselect-sr-only': this.compact && !compactLabel }, "data-compact": this.compact, ...attrs }, h("span", null, this.label), !!this.optionsChecked()?.length && (h("span", null, this.optionsCheckedTotal(), "/", this.optionsTotal()))));
+    }
     render() {
-        return (h(Host, { key: '9b25af2f368c47c8820ae000ed1389215cd952a2' }, h("fieldset", { key: '3aa70d5b8d62ee84616afe853c2ea746c991fc67', class: "pn-multiselect", "data-icon": !!this.icon, "data-error": this.hasError(), disabled: this.disabled }, this.label && (h("legend", { key: '2e1bd83a8c6cb64bc9da287c70abcffccb334cbb', id: this.idLegend, class: "pn-multiselect-label", onClick: () => this.handleLabel() }, h("span", { key: '1d3073c63643320b9b9fde625832d89e41edaa35' }, this.label), !!this.optionsChecked()?.length && (h("span", { key: '316c9d892808df273840dcac243971e5fb5d2b62' }, this.optionsCheckedTotal(), "/", this.optionsTotal())))), h("div", { key: 'f79e79c0406ca659a6380902a6c8296df89bde97', class: "pn-multiselect-group", ref: el => (this.elGroup = el) }, h("div", { key: '73bc49a104f3846a41fa65f4e6e2623dba0806c2', class: "pn-multiselect-input" }, !!this.icon && h("pn-icon", { key: 'a68a06de67861057dd6d853ab53b7a34d76ca7ee', class: "pn-multiselect-icon", "data-custom": true, icon: this.icon }), h("input", { key: '5df7e2ededf6e196ae47053ce650628391bc282d', tabindex: this.search ? null : '-1', type: this.search ? 'search' : 'input', id: this.selectId, class: "pn-multiselect-element", value: this.search ? this.searchQuery : this.optionsCheckedLabels(), name: this.selectName, placeholder: this.getPlaceholder(), required: this.search ? null : this.required, "aria-labelledby": this.idLegend, "aria-describedby": this.describedBy(), "aria-controls": `${this.idOptions} ${this.search ? this.idChips : ''}`, "aria-invalid": this.hasError()?.toString(), disabled: this.disabled, readonly: !this.search, onClick: () => (this.search && this.open ? null : this.toggleOpen()), onKeyDown: e => this.handleInputKeyboard(e), onBlur: e => this.handleBlur(e), onInput: e => this.search && this.setSearchQuery(e.target.value), ref: el => (this.elInput = el) }), this.hasError() && (h("pn-icon", { key: '5204a96efe2e88fee5d762a89b0623b1f8a163ce', class: "pn-multiselect-icon", "data-error": true, icon: alert_exclamation_circle, color: "warning" })), h("button", { key: '78a487b3afc8c91e588d7922f3a2b490e9173d2f', id: this.idButton, type: "button", class: "pn-multiselect-button", "aria-label": this.translate(`BUTTON_${this.open ? 'CLOSE' : 'OPEN'}`), "aria-describedby": this.search ? null : this.selectId, "aria-controls": this.idOptions, "aria-expanded": this.open.toString(), onClick: () => this.toggleOpen(), ref: el => (this.elButton = el) }, h("pn-icon", { key: '061e6c886b21d559c439d2e689cfc02b328d87c9', class: "pn-multiselect-icon", icon: chevron_down, color: "blue700" }))), this.renderOptions()), this.hasMessage() && (h("p", { key: 'a1c3cdabb02dfc2403dbe55cc4ce2fb38f71578c', id: this.idHelper, class: "pn-multiselect-description", role: !!this.error ? 'alert' : null }, h("span", { key: '3f9428b50a5d440866462e52181e13aa3b894e6a' }, this.error || this.helpertext))), this.search && this.renderChips(), h("slot", { key: '74dc717f4f662fbc53b0e73f0690a10a13feeb22' }), this.search && (h("p", { key: '85126ac7f1b59b4f2fd988bff08b5b2bcb561cbb', id: this.idSr, class: "pn-multiselect-sr-only", role: "alert", "aria-live": "assertive" }, this.srMessage && h("span", { key: '45615fbfb30b133134d06c6fbee20a75a1dd61bd' }, this.srMessage))))));
+        return (h(Host, { key: '55af777ec6dd7165b4d16bdad6ec784fe81b8f20' }, h("fieldset", { key: '41a5e9a45b3460a96676d606c458a062efe6ab80', class: "pn-multiselect", "data-icon": !!this.icon, "data-error": this.hasError(), disabled: this.disabled }, this.renderLabel(), h("div", { key: 'fb6874e8d17a70ec0e1e21bf3474575b01c3e669', class: "pn-multiselect-group", ref: el => (this.elGroup = el) }, h("div", { key: 'ab6aa995337f5a80e2026d98fe69399571249c24', class: "pn-multiselect-input" }, !!this.icon && h("pn-icon", { key: '0d9495e8864e266a6ababc752781b6e9c75595c3', class: "pn-multiselect-icon", "data-custom": true, icon: this.icon }), h("input", { key: '6b5adbc27ab64b9cdb7f53a99d2f4cd9a2185e47', tabindex: this.search ? null : '-1', type: this.search ? 'search' : 'input', id: this.selectId, class: "pn-multiselect-element", value: this.search ? this.searchQuery : this.optionsCheckedLabels(), name: this.selectName, placeholder: this.getPlaceholder(), required: this.search ? null : this.required, "aria-labelledby": this.idLegend, "aria-describedby": this.describedBy(), "aria-controls": `${this.idOptions} ${this.search ? this.idChips : ''}`, "aria-invalid": this.hasError()?.toString(), disabled: this.disabled, readonly: !this.search, "data-compact": this.compact, onClick: () => (this.search && this.open ? null : this.toggleOpen()), onKeyDown: e => this.handleInputKeyboard(e), onBlur: e => this.handleBlur(e), onInput: e => this.search && this.setSearchQuery(e.target.value), ref: el => (this.elInput = el) }), this.compact && this.renderLabel(true), this.hasError() && (h("pn-icon", { key: '36e6f1e307758cdec5f9eda59413b8a0c28af78c', class: "pn-multiselect-icon", "data-error": true, icon: alert_exclamation_circle, color: "warning" })), h("button", { key: '6197b7545b8646fecbd5a12e540e3011303f660c', id: this.idButton, type: "button", class: "pn-multiselect-button", "aria-label": this.translate(`BUTTON_${this.open ? 'CLOSE' : 'OPEN'}`), "aria-describedby": this.search ? null : this.selectId, "aria-controls": this.idOptions, "aria-expanded": this.open.toString(), onClick: () => this.toggleOpen(), ref: el => (this.elButton = el) }, h("pn-icon", { key: 'f9ddba2705b7782606897f6374f5963833bde76e', class: "pn-multiselect-icon", icon: chevron_down, color: "blue700" }))), this.renderOptions()), this.hasMessage() && (h("p", { key: 'd9fb544f999b9d779362f13090e9653bbd22fd4e', id: this.idHelper, class: "pn-multiselect-description", role: !!this.error ? 'alert' : null }, h("span", { key: 'ed1426909307379ba22c06a6870ad867f5a7cdad' }, this.error || this.helpertext))), this.search && this.renderChips(), h("slot", { key: 'd0bc44a9160fa4151e6f74c05fa3102189710454' }), this.search && (h("p", { key: '0d8c04c19227c1461a18ccc21a9fd7412a2f6ee1', id: this.idSr, class: "pn-multiselect-sr-only", role: "alert", "aria-live": "assertive" }, this.srMessage && h("span", { key: '610fc47f9a032c6e8931745e6b6d0b418eadd5ee' }, this.srMessage))))));
     }
     static get is() { return "pn-multiselect"; }
     static get originalStyleUrls() {
@@ -700,6 +711,29 @@ export class PnMultiselect extends Mixin(animateHeightFactory) {
                 "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": "Set the date picker label as compact. If used, the `placeholder` will no longer be displayed."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "compact",
+                "defaultValue": "false"
+            },
             "language": {
                 "type": "string",
                 "mutable": false,

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

@@ -129,7 +129,7 @@ export class PnRadioButton extends Mixin(animateHeightFactory) {
         return this.tile && this.expand;
     }
     render() {
-        return (h(Host, { key: 'd9dbe33df6c0844b6c747285996a6a2886ef4fbd' }, h("input", { key: '131acc3ca2b53a29e32243ad4910d57847d35a76', type: "radio", id: this.radioid, class: "pn-radio-input", value: this.value, name: this.name, disabled: this.disabled, checked: this.checked, required: this.required, "aria-invalid": this.isInvalid()?.toString(), "aria-describedby": this.displayHelpertext() ? this.idHelpertext : null, "data-tile": this.tile, "data-expand": this.expand, ref: el => (this.radioInput = el) }), h("div", { key: 'e63874e20e8cd6e3ba25314e2777723fc1d09a9b', class: "pn-radio", "data-tile": this.tile, "data-expand": this.expand, "data-invalid": this.isInvalid() }, h("div", { key: '6af4d9f83ecae41248fd142d8a1dfdbee1e86fd3', class: "pn-radio-button" }, h("div", { key: '8ea822e3b27a36c79795ad51231f306c9feeb439', class: "pn-radio-outer" }, h("div", { key: 'ea69cef2c0276512a0917852681ee07b696e0e69', class: "pn-radio-inner" }))), h("p", { key: 'ac0e72d695546b716c061b57ca246f2304ebc29c', class: "pn-radio-content", hidden: !this.displayText() }, h("label", { key: 'af6e10051b6df5eb25a4c705e7934fb7efd0927a', htmlFor: this.radioid, class: "pn-radio-label", hidden: !this.displayLabel() }, this.label), h("span", { key: '3daec2ddd84dbc6ffb0ab22c2d8dcaa29c7dbfc5', id: this.idHelpertext, class: "pn-radio-helpertext", hidden: !this.displayHelpertext() }, this.helpertext, h("slot", { key: '09037832097ae5ad1f5d02e71e179d990d7cf3c0', name: "helpertext" })), h("slot", { key: 'd77fefcc1fed9e5386360501d666ff7f4adc7204' })), this.displayIcon() && h("pn-icon", { key: 'b8c8294fb100ad921278b378e317c95d2702806b', icon: this.icon, color: "gray900" }), h("div", { key: '8eac1b2c621bb8fad7cb89bd226ae0ce13842fc6', class: "pn-radio-container", "data-open": this.checked, hidden: !this.displayContent(), style: { height: '0px' }, ref: el => (this.contentArea = el) }, h("div", { key: 'f12c0a60214a8d0adf93e587e909994ad06800e9', class: "pn-radio-area" }, h("slot", { key: 'a67c2b5bee945a044aa5910544fa77f1034985ca', name: "content" }))))));
+        return (h(Host, { key: 'f386b0de0377d3dbe6891a2396d32b91a808d53c' }, h("input", { key: '189e352a198275f4dbd733425166e9cb2ed417ef', type: "radio", id: this.radioid, class: "pn-radio-input", value: this.value, name: this.name, disabled: this.disabled, checked: this.checked, required: this.required, "aria-invalid": this.isInvalid()?.toString(), "aria-describedby": this.displayHelpertext() ? this.idHelpertext : null, "data-tile": this.tile, "data-expand": this.expand, ref: el => (this.radioInput = el) }), h("div", { key: '710dcfe5b1660d25a9d98eb2c3739eb092f2ab4e', class: "pn-radio", "data-tile": this.tile, "data-expand": this.expand, "data-invalid": this.isInvalid() }, h("div", { key: '2d6bd1b03ee6565b88773c60a529ae2c5be89ffd', class: "pn-radio-button" }, h("div", { key: '8b15488acb65132b2498d361d320bb804af793de', class: "pn-radio-outer" }, h("div", { key: '64ebbe9b4d18f158a43bb5d82116ef4b19325ca1', class: "pn-radio-inner" }))), h("p", { key: '3b5ed02eeae60cff45b3b4999055c6d853a6c22f', class: "pn-radio-content", hidden: !this.displayText() }, h("label", { key: 'd5f3c5f59630407a45cc48fcb26e60fe7419c73c', htmlFor: this.radioid, class: "pn-radio-label", hidden: !this.displayLabel() }, this.label), h("span", { key: 'd4329417f178f6e7bcff365a1c051ebaa51b0447', id: this.idHelpertext, class: "pn-radio-helpertext", hidden: !this.displayHelpertext() }, this.helpertext, h("slot", { key: 'defddc5970a0ea4c94c4f7b07e2cec3e7616d8c2', name: "helpertext" })), h("slot", { key: 'edaaf37351bb5d05bdc92696ac9ee2c8bc8e13f7' })), this.displayIcon() && h("pn-icon", { key: 'b9cd0ab07c691020efe39e8bb6ec39d02d5be826', icon: this.icon, color: "gray900" }), h("div", { key: '89655e67304498950e11c0388fddbbde350239a1', class: "pn-radio-container", "data-open": this.checked, hidden: !this.displayContent(), style: { height: '0px' }, ref: el => (this.contentArea = el) }, h("div", { key: 'eeebaf7c0b1fe8327810faec62877888cb6ff95d', class: "pn-radio-area" }, h("slot", { key: 'c997ee7e8ef719ff4b830df30a414cea637a54ff', name: "content" }))))));
     }
     static get is() { return "pn-radio-button"; }
     static get originalStyleUrls() {

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

@@ -59,7 +59,7 @@ pn-range .pn-range-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);
 }