npm - @postnord/pn-marketweb-components - Versions diffs - 3.5.2 → 3.5.3 - Mend

@postnord/pn-marketweb-components 3.5.2 → 3.5.3

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

Files changed (400) hide show

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

@@ -59,7 +59,7 @@ const PnFieldset$1 = /*@__PURE__*/ proxyCustomElement(class PnFieldset extends H
         return alert_exclamation_circle;
     }
     render() {
-        return (h(Host, { key: 'e22e77e7d49f4dd10607f1fc2cb500d3b63ee4f2' }, h("fieldset", { key: 'c6cb9c43620b223e69c5814446e26678c83d0fa3', id: this.fieldsetId, class: "pn-fieldset", disabled: this.disabled, "aria-describedby": this.helpertext && this.idHelpertext, "aria-invalid": this.hasError().toString() }, h("legend", { key: 'ec669e86d003bd11db387c0e6e9619b792175c72', class: "pn-fieldset-legend" }, this.legend), this.helpertext && (h("p", { key: '60cf8252ec833d0db9620cab9e57a5dbd2212a5e', id: this.idHelpertext, class: "pn-fieldset-helpertext" }, this.helpertext)), h("div", { key: '38191db1e9344469e37132c4b90c6197e1ba59d9', class: "pn-fieldset-items" }, h("slot", { key: '8c4048eaea924b96d9fd4d95e64d96ef6b42e058' })), h("div", { key: 'f2b627b8155e94cdeb681f9405601b480a8d7a1f', class: "pn-fieldset-message-wrapper", role: "alert", hidden: !this.error }, h("pn-icon", { key: 'fcd13f423dcd055821c7d0854b34b4babad17ad8', icon: this.getSymbol() }), h("p", { key: 'e620363bcdca770ebc01d3190a9588f4f0a1f21e', class: "pn-fieldset-message" }, this.error)))));
+        return (h(Host, { key: 'f02790151992e43958982c27b08b91a2f625dc69' }, h("fieldset", { key: '72f7ce4fa8c06a0d7a5cd628578e99df4af6feaa', id: this.fieldsetId, class: "pn-fieldset", disabled: this.disabled, "aria-describedby": this.helpertext && this.idHelpertext, "aria-invalid": this.hasError().toString() }, h("legend", { key: 'd1e8927af562fac146d0d3d6bb8999cfed227251', class: "pn-fieldset-legend" }, this.legend), this.helpertext && (h("p", { key: '565e38f11324a2999649a1507bdca869963d40fc', id: this.idHelpertext, class: "pn-fieldset-helpertext" }, this.helpertext)), h("div", { key: '41f24d04a919cc469265a909f4038a313450e5c1', class: "pn-fieldset-items" }, h("slot", { key: 'a69ed2d87fa287f72217608a394da2e28d16b012' })), h("div", { key: 'a35cbee15cb692542331fe879f14ffca6bbd5954', class: "pn-fieldset-message-wrapper", role: "alert", hidden: !this.error }, h("pn-icon", { key: 'f2391c0f07ccd87f676fd3105f405826fe7f60c4', icon: this.getSymbol() }), h("p", { key: '44e30e61d9455c6fdf415658d760d86b6bba3af7', class: "pn-fieldset-message" }, this.error)))));
     }
     static get watchers() { return {
         "fieldsetId": ["handleId"]

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

@@ -425,7 +425,7 @@ const PnFileUpload$1 = /*@__PURE__*/ proxyCustomElement(class PnFileUpload exten
         return list.join(',');
     }
     render() {
-        return (h(Host, { key: 'e0e7b9b63230a961dd1c890f91ef94de3c606c82' }, h("div", { key: '596aa72b9ba07f46eb6f77a49dcdb15f3bc8c58b', class: "pn-file-upload-container" }, h("div", { key: 'b839bd6e9a1c3086e9aa02381609dbee7d41fea3', class: "pn-dropzone-container" }, h("input", { key: '0b3fb4a525536397a2ca5e9846d6e3b7cf19d9e7', 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: '75c8ce662c9a47234a177c511362612921e6c9dc', class: "pn-dropzone-inner", "data-hover": this.isHovering, "data-invalid": this.invalid }, h("pn-icon", { key: '7c70500c47945c71ad723b9138d94e2117649685', class: "pn-file-upload-icon-element", icon: upload, color: "blue700" }), h("label", { key: 'cc29b7e2122f5630c2807b2347f792b4887b63c2', htmlFor: this.idFileUpload, class: "pn-file-upload-title" }, this.label || this.translate('CLICKORDRAG')), this.helpertext && (h("p", { key: '45d28882a24add96290ff6a731b8c1cd2c0042e8', id: this.idHelpertext, class: "pn-file-upload-subtitle" }, this.helpertext)), this.accept && (h("p", { key: 'ab1a30e5402d234d16d8d9af14d38cd76597400d', id: this.idAccepttext, class: "pn-file-upload-subtitle" }, this.translate('ACCEPTEDFORMATS'), ": ", this.accept, this.maxSize && (h("span", { key: '7f32da6aa40127d1c886d38e38ff8c46ed361e30' }, ' ', "(", this.translate('MAXFILESIZE'), ": ", this.maxSize, ")")))))), !!this.files.length && (h("ul", { key: 'e8f72fce52bfc8e7e2d12aa8e314330990cdc490', 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: 'd727bfefbb6d0404f655578d1225b84d678932d0' }))));
+        return (h(Host, { key: '30d80fef46dd4ec1a35ebed92cdd3a5799e8a274' }, h("div", { key: '74424e1a3f093f5b39efff46be24b6e501c5967c', class: "pn-file-upload-container" }, h("div", { key: '8575f8345855437ce1ab132931a6db83daedab63', class: "pn-dropzone-container" }, h("input", { key: 'e1f64e842cc835fc3b999a40125acc06aeca9d49', 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: '9d1a9a487c267a0b5a0d26469245490bf45113db', class: "pn-dropzone-inner", "data-hover": this.isHovering, "data-invalid": this.invalid }, h("pn-icon", { key: 'c0625796810d3187b54060841dab300d0a3f88d2', class: "pn-file-upload-icon-element", icon: upload, color: "blue700" }), h("label", { key: '15fa438f664fd63153153b70132f1577be6699ab', htmlFor: this.idFileUpload, class: "pn-file-upload-title" }, this.label || this.translate('CLICKORDRAG')), this.helpertext && (h("p", { key: '2bdeea0f1cee2cdb77c0f5454a9a51977ceb2100', id: this.idHelpertext, class: "pn-file-upload-subtitle" }, this.helpertext)), this.accept && (h("p", { key: '2981fc00ff552d608db0f7ca9dee6551463c18cf', id: this.idAccepttext, class: "pn-file-upload-subtitle" }, this.translate('ACCEPTEDFORMATS'), ": ", this.accept, this.maxSize && (h("span", { key: 'b9a481a9e54df2d25c104395259aac0c642db78a' }, ' ', "(", this.translate('MAXFILESIZE'), ": ", this.maxSize, ")")))))), !!this.files.length && (h("ul", { key: '4c2205aa04c293d9e3757ddb1606596147dd0d46', 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: 'c2838dd4eb5d553deab6c198f3f203ddf3612706' }))));
     }
     static get watchers() { return {
         "limit": ["handleLimit"],

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

@@ -178,7 +178,7 @@ const PnFooter$1 = /*@__PURE__*/ proxyCustomElement(class PnFooter extends HTMLE
         }
     }
     render() {
-        return (h(Host, { key: '058cc2657df17548123ef669430f182ca5938fb3' }, h("div", { key: '342b9994cd820a210c6a2340a7f380cd413dd445', class: "pn-footer-row" }, h("p", { key: '32fc92b37a3a30cc713ad95f3e76089fcd5555c2' }, this.getText('questions')), this.renderLink('contact')), h("div", { key: 'dbe0d3496fb83b2a437ea52a6c7785c30fbd7a2c', class: "pn-footer-row" }, this.market !== NO && this.renderLink('terms'), this.renderLink('privacy'), this.renderLink('cookies')), h("div", { key: '41bccfb8d19a869f15622be57e7b03beccc43d90', class: "pn-footer-row" }, h("p", { key: 'b9d133af8a47f8a97925200994a91a174595dea1' }, this.getText('info')), this.renderLink('domain'))));
+        return (h(Host, { key: 'eb51a2359d790d67d2a655fe98b1315e57558cb9' }, h("div", { key: 'e5c3ca2d99668b56a51f4cff35512c87a649fc8e', class: "pn-footer-row" }, h("p", { key: 'e0e95967f2f2a58875109acf64682ab6c34df81d' }, this.getText('questions')), this.renderLink('contact')), h("div", { key: 'c8c8770491f39445575f0770a2d52bb392d7095e', class: "pn-footer-row" }, this.market !== NO && this.renderLink('terms'), this.renderLink('privacy'), this.renderLink('cookies')), h("div", { key: '944d4f4f3a3baa245da8a6ba25837314d385b4f8', class: "pn-footer-row" }, h("p", { key: '3e35f3e9f882c07ba3b074a02c7752dc021d31b3' }, this.getText('info')), this.renderLink('domain'))));
     }
     static get style() { return PnFooterStyle0; }
 }, [0, "pn-footer", {

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

@@ -66,7 +66,7 @@ const PnHeader$1 = /*@__PURE__*/ proxyCustomElement(class PnHeader extends HTMLE
         return this.hasBreadcrumb || !!this.goBackHref?.length;
     }
     render() {
-        return (h(Host, { key: '8493b17c1f553672941e7bddf7382e3e80377c71' }, h("header", { key: '2026f9c75dde59abda45a0e376c24907657fe8e7', class: "pn-header" }, h("div", { key: 'dbf01bc588ed38cccb0f951fed4047c9e8192354', class: "pn-header-container" }, h("div", { key: '115a52c44b0e5addf49e4807b21adeb84a531de9', class: "pn-header-breadcrumbs", hidden: !this.showBreadcrumb() }, this.goBackHref && (h("pn-text-link", { key: 'b2cce5ed46b6dcdb10a72bb806c5a406b6ff5e15', label: this.goBackTextTranslated, href: this.goBackHref, icon: arrow_left, leftIcon: true })), h("slot", { key: '27a3d3c38b30cba6d51c79a2c0bd18c6afa13a4c', name: "breadcrumb" })), h("div", { key: '8134ae8b844e9db548cb3db6bf995479c404fff1', class: "pn-header-content" }, this.heading && h("h1", { key: '3bf46740c66ca137adbc50fe6cdde178e82bfdbc' }, this.heading), h("slot", { key: '94ee53b3dee5a388ef84ae91c54a5b96c14a2661' })), h("div", { key: 'd44728888d295fd84285b28102b348da90ba5d80', class: "pn-header-buttons", hidden: !this.hasButtons }, h("slot", { key: '7af9da3f81bedb69639f7f723c24d93caebaba24', name: "buttons" })), h("slot", { key: '6c55a22b94293e59c8fdb33906c2d4612d067cc4', name: "menu" })))));
+        return (h(Host, { key: '0c5653c92c6502f2f3ee2db0595be669a5588dd7' }, h("header", { key: 'fdc4a48ee31a83e86cbba171677d09d5845c6e0f', class: "pn-header" }, h("div", { key: 'dca702aad4ca3c0b658bf16ecd2621094db8e893', class: "pn-header-container" }, h("div", { key: '6da162eb32c0a76e9cd631559d522c82b8e682b9', class: "pn-header-breadcrumbs", hidden: !this.showBreadcrumb() }, this.goBackHref && (h("pn-text-link", { key: '02e7658941132a034bd058b0e3e716f32cba7f98', label: this.goBackTextTranslated, href: this.goBackHref, icon: arrow_left, leftIcon: true })), h("slot", { key: '1f358d45875bc7e7382e34eb00d845f34c3ae33f', name: "breadcrumb" })), h("div", { key: '402dcd759dc7e200899a61ac5f198105e28c8202', class: "pn-header-content" }, this.heading && h("h1", { key: '6b5755ad86d300f4e070b5444a04399fa497ac6f' }, this.heading), h("slot", { key: 'c51eb23c6e206762395cf40f86fe870ae8eb8afb' })), h("div", { key: '5beec993b7da17304cdeb31cafb5850adb878611', class: "pn-header-buttons", hidden: !this.hasButtons }, h("slot", { key: 'd38cec8bea8f49c85a1ed504f197aad06c8fee6d', name: "buttons" })), h("slot", { key: '31c06cf9cfbcf4b0b76bb0356db4b736aa8a9a81', name: "menu" })))));
     }
     static get watchers() { return {
         "maxWidth": ["setMaxWidth"],

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

@@ -206,10 +206,10 @@ const PnInput$1 = /*@__PURE__*/ proxyCustomElement(class PnInput extends HTMLEle
         return !this.showPrefix() && !!this.textSuffix?.length && !this.isPassword() && this.type !== 'search';
     }
     render() {
-        return (h(Host, { key: '6b2db20d9aa3c3d300814a71022a6fe314fa6d03' }, h("div", { key: '419fa861a5748d0c95e9e69b9defd48f50975683', class: "pn-input", "data-valid": this.valid, "data-error": this.hasError() }, (this.label || this.maxlength >= 1) && (h("label", { key: '06576cf8fe7613382cb7aa64d00ece94556a1304', htmlFor: this.inputid, class: "pn-input-label" }, this.label && h("span", { key: '2c534cf97da3005b773e57ea6623240afea8186d' }, this.label), this.maxlength >= 0 && h("span", { key: 'ab2626d9046b75f372a4e01a7234969017837f2f' }, `${this.value.length}/${this.maxlength}`))), h("div", { key: 'e236d0a4dc4c7c719ea2f4be51cd81def68ca53b', class: "pn-input-group" }, h("input", { key: '8aeb20eaa6fe21732c813bb5f9a8028cc0dcbc76', 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: '7f8348da79171fdb3f3b48733a746d6bd531adee' }, h("div", { key: '4867fbb2418edcab774c6cd8c7d98c2431243ac1', class: "pn-input", "data-valid": this.valid, "data-error": this.hasError() }, (this.label || this.maxlength >= 1) && (h("label", { key: 'b8978f74d228ab484d3eb4abcba54f693781f4cf', htmlFor: this.inputid, class: "pn-input-label" }, this.label && h("span", { key: '1d28ce32a353c180a8cb4c2e0011362c9911a1f3' }, this.label), this.maxlength >= 0 && h("span", { key: 'aa862bff99623ec29fa4252c6b2a352900726bef' }, `${this.value.length}/${this.maxlength}`))), h("div", { key: '595c30428744da15ef835ced9a9d2eec8d866fda', class: "pn-input-group" }, h("input", { key: '343c997a23eb23b28daad30e19e26e7685eda62e', 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: {
                 '--pn-input-offset-left': `${this.offsetLeft}px`,
                 '--pn-input-offset-right': `${this.offsetRight}px`,
-            }, onInput: e => this.setVal(e) }), h("div", { key: '409947a09fe6960778458060590c47ee204ea534', class: "pn-input-eyecandy", "data-prefix": true, ref: el => (this.prefix = el) }, !!this.icon && h("pn-icon", { key: '0e914746aecea9a37c4f66304e89a82197defd7a', icon: this.icon, "aria-hidden": "true" }), this.showPrefix() && h("span", { key: 'e6a7eb7f10ac9d5cf5de4f2064e3922038dfc9e0', class: "pn-input-text" }, this.textPrefix)), h("div", { key: 'f97005264aca3330f9b7c4eb0489c36f7bd31842', class: "pn-input-eyecandy", "data-suffix": true, ref: el => (this.suffix = el) }, this.showSuffix() && h("span", { key: '769efb326ce6d4058ee4d8d6c5d2f3b781c65c11', class: "pn-input-text" }, this.textSuffix), this.stateDisplay() && h("pn-icon", { key: 'fe18921f222fd14d91edc799da3f50c6d1c7dff8', "aria-hidden": "true", icon: this.stateIcon(), color: this.stateColor() }), this.isPassword() && (h("pn-button", { key: '7e10d1c4502d9abc9fd8156652718e04cdfa9955', icon: this.showPassword ? preview_on : preview_off, iconOnly: true, arialabel: this.passwordText(), small: true, appearance: "light", variant: "borderless", onClick: () => this.togglePassword() })), this.isSearch() && (h("pn-button", { key: '841edb1592c21de8315a0b1c4a8a7c9815c61e01', icon: close, iconOnly: true, arialabel: this.translate('CLEAR'), small: true, appearance: "light", variant: "borderless", onClick: () => this.clearVal() })))), h("p", { key: 'fb41bb4f2559b05cae5b80d214c218429493b5ba', class: "pn-input-message", id: this.idMessage, role: this.hasErrorMessage() ? 'alert' : null, hidden: !this.hasMessage() }, this.hasHelperText() && !this.hasError() && h("span", { key: 'a4b226408274dc3fc6788af3932edd5b05f398f3', class: "pn-input-helper" }, this.helpertext), h("span", { key: '488b39c606ca027df73153a9e6e83b4d59360814', class: "pn-input-helper-slot", hidden: !this.showHelperSlot || this.hasError() }, h("slot", { key: '3cf5c96a8ee99d1d1954a3075862119512ef589c', name: "helpertext" })), this.hasErrorMessage() && h("span", { key: 'b6907bee94961eeb0f4c8c3c59d4f8cc30080754', class: "pn-input-error" }, this.error), h("span", { key: '0193a2c21c1d248f762207351b7bba336368cd6c', class: "pn-input-error-slot", hidden: !this.showErrorSlot }, h("slot", { key: '9e7b771c38bbdd7b3fd75bdc0587c21dcfef2857', name: "error" }))))));
+            }, onInput: e => this.setVal(e) }), h("div", { key: 'b6442450590e1a5e26322e7c2e5664dc645a2338', class: "pn-input-eyecandy", "data-prefix": true, ref: el => (this.prefix = el) }, !!this.icon && h("pn-icon", { key: '9e832e7d92c500a8b999570334386567da7bdfb2', icon: this.icon, "aria-hidden": "true" }), this.showPrefix() && h("span", { key: '06d7d276a732e8506524fd4e04389e6d7a779724', class: "pn-input-text" }, this.textPrefix)), h("div", { key: '4fddb9d6b0112af9f194d548cfa45013d55d5345', class: "pn-input-eyecandy", "data-suffix": true, ref: el => (this.suffix = el) }, this.showSuffix() && h("span", { key: 'a1979b08de663081b527cff264b44da4bc4eed9c', class: "pn-input-text" }, this.textSuffix), this.stateDisplay() && h("pn-icon", { key: '4439c0e48081e602e632438948bd4aad7df271dd', "aria-hidden": "true", icon: this.stateIcon(), color: this.stateColor() }), this.isPassword() && (h("pn-button", { key: '263f37a02ef2774ced61547355fd1646b42ca465', icon: this.showPassword ? preview_on : preview_off, iconOnly: true, arialabel: this.passwordText(), small: true, appearance: "light", variant: "borderless", onClick: () => this.togglePassword() })), this.isSearch() && (h("pn-button", { key: 'd623852137ec384fb10144253f2e8fc48a2cc0b2', icon: close, iconOnly: true, arialabel: this.translate('CLEAR'), small: true, appearance: "light", variant: "borderless", onClick: () => this.clearVal() })))), h("p", { key: 'f88d31f6be9ca8bc1bf96eb58020dcf34c657730', class: "pn-input-message", id: this.idMessage, role: this.hasErrorMessage() ? 'alert' : null, hidden: !this.hasMessage() }, this.hasHelperText() && !this.hasError() && h("span", { key: '2e255d5201e9485e9f594ad9c4c68cfc123d36fa', class: "pn-input-helper" }, this.helpertext), h("span", { key: 'a7e6b9cb46357227d0b1c318522b43e866383aea', class: "pn-input-helper-slot", hidden: !this.showHelperSlot || this.hasError() }, h("slot", { key: '6e614ea8cf861d78cb63ffb6d3eaa54053b45017', name: "helpertext" })), this.hasErrorMessage() && h("span", { key: '545331e7c33cbbbb8f9d1952228dcf1819a48a66', class: "pn-input-error" }, this.error), h("span", { key: 'e446082015c2a97a3317f0b251e52b64d114de59', class: "pn-input-error-slot", hidden: !this.showErrorSlot }, h("slot", { key: '7827f003bf9eb49991776dabd9567d603562bec2', name: "error" }))))));
     }
     static get watchers() { return {
         "textPrefix": ["handleOffset"],

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

@@ -3,7 +3,7 @@
  * By PostNord.
  */
 import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host } from '@stencil/core/internal/client';
-import { r as reduceMotion, k as awaitTopbar, e as en } from './helpers.js';
+import { r as reduceMotion, k as awaitTopbar, e as en, i as isSmallScreen } from './helpers.js';
 import { c as close } from './close.js';
 import { d as defineCustomElement$4 } from './pn-button2.js';
 import { d as defineCustomElement$3 } from './pn-icon2.js';
@@ -19,7 +19,7 @@ const translations = {
     },
 };
-const pnModalCss = "/* Global utility variables */\n/* Input styles */\n/* Transition variables */\npn-modal .pn-modal {\n  --pn-modal-max-width: 45em;\n  --pn-modal-overflow: hidden auto;\n  z-index: 10000;\n  position: fixed;\n  top: 0;\n  inset-block-start: 0;\n  inset-block-end: 0;\n  margin: auto;\n  overflow: var(--pn-modal-overflow);\n  max-width: var(--pn-modal-max-width);\n  max-height: 85vh;\n  padding: clamp(1em, 5vw, 1.5em) 0;\n  border: 0.0625em solid #f3f2f2;\n  border-radius: 0.5em;\n  flex-direction: column;\n  align-items: stretch;\n  gap: 0.75em;\n  box-shadow: 0 0.25em 0.875em rgba(0, 0, 0, 0.18), 0 1.625em 3.5em rgba(0, 0, 0, 0.22);\n  background-color: #ffffff;\n  display: none;\n  opacity: 0;\n  transform: translate(0%, 20%);\n  outline: 0.2rem solid transparent;\n  outline-offset: 0.2rem;\n  transition-property: opacity, overlay, display, transform, outline-color;\n  transition-duration: 0.4s;\n  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);\n  transition-behavior: allow-discrete;\n}\npn-modal .pn-modal:focus-visible {\n  outline-color: #ffffff;\n}\npn-modal .pn-modal::-webkit-scrollbar {\n  background-color: #ffffff;\n  width: 0.875em;\n  border-radius: 0.5em;\n}\npn-modal .pn-modal::-webkit-scrollbar-track {\n  background-color: #ffffff;\n  border-radius: 0.5em;\n}\npn-modal .pn-modal::-webkit-scrollbar-thumb {\n  cursor: pointer;\n  background-color: #969087;\n  border-radius: 1em;\n  border: 0.25em solid #ffffff;\n}\npn-modal .pn-modal::-webkit-scrollbar-thumb:hover {\n  background-color: #5e554a;\n}\npn-modal .pn-modal::-webkit-scrollbar-corner, pn-modal .pn-modal::-webkit-scrollbar-button {\n  display: none;\n}\n@media (prefers-reduced-motion: reduce) {\n  pn-modal .pn-modal {\n    transition-duration: 0s;\n    transition-delay: 0s;\n  }\n}\npn-modal .pn-modal[data-sheet] {\n  margin: 0 0 0 auto;\n  height: 100%;\n  max-height: unset;\n  border-radius: 0.5em 0 0 0.5em;\n  transform: translate(20%, 0%);\n}\npn-modal .pn-modal[open] {\n  display: flex;\n  opacity: 1;\n  transform: translate(0%, 0%);\n}\n@starting-style {\n  pn-modal .pn-modal[open] {\n    display: flex;\n    opacity: 0;\n    transform: translate(0%, 20%);\n  }\n}\npn-modal .pn-modal[open][data-sheet] {\n  transform: translate(0%, 0%);\n}\n@starting-style {\n  pn-modal .pn-modal[open][data-sheet] {\n    transform: translate(20%, 0%);\n  }\n}\npn-modal .pn-modal::backdrop {\n  background-color: rgba(0, 0, 0, 0);\n  transition-property: opacity, background-color, overlay, display;\n  transition-duration: 0.4s;\n  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);\n  transition-behavior: allow-discrete;\n}\n@media (prefers-reduced-motion: reduce) {\n  pn-modal .pn-modal::backdrop {\n    transition-duration: 0s;\n    transition-delay: 0s;\n  }\n}\npn-modal .pn-modal[open]::backdrop {\n  background-color: rgba(0, 0, 0, 0.55);\n}\n@starting-style {\n  pn-modal .pn-modal[open]::backdrop {\n    background-color: rgba(0, 0, 0, 0);\n  }\n}\npn-modal .pn-modal-close-button {\n  position: absolute;\n  right: 0.5em;\n  top: 0.5em;\n}\npn-modal .pn-modal-header {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5em;\n  padding: 0 clamp(1em, 5vw, 1.5em);\n}\npn-modal .pn-modal-label {\n  line-height: 1.5;\n  padding-right: 1.5em;\n  margin: 0;\n}\npn-modal .pn-modal-text {\n  margin: 0;\n}\npn-modal .pn-modal-content {\n  padding: 0 clamp(1em, 5vw, 1.5em);\n}\npn-modal .pn-modal-buttons {\n  background-color: #ffffff;\n  border-top: 0.0625em solid #d3cecb;\n  padding: clamp(1em, 5vw, 1.5em) clamp(1em, 5vw, 1.5em) 0;\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.5em;\n}\npn-modal .pn-modal-buttons [slot=buttons]:not(pn-button) {\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.5em;\n}\npn-modal .pn-modal-buttons:empty {\n  display: none;\n}\n\n@media (max-width: 30em) {\n  pn-modal .pn-modal {\n    width: 100%;\n    max-height: 95vh;\n    margin-bottom: 0;\n    bottom: 0;\n    transform: translate(0%, 20%);\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n}";
+const pnModalCss = "/* Global utility variables */\n/* Input styles */\n/* Transition variables */\npn-modal .pn-modal {\n  --pn-modal-max-width: 45em;\n  z-index: 10000;\n  position: fixed;\n  top: 0;\n  inset-block-start: 0;\n  inset-block-end: 0;\n  margin: auto;\n  padding: 0;\n  max-width: var(--pn-modal-max-width);\n  overflow: hidden;\n  border: 0;\n  border-radius: 1.5em;\n  box-shadow: 0 0.25em 0.875em rgba(0, 0, 0, 0.18), 0 1.625em 3.5em rgba(0, 0, 0, 0.22);\n  background-color: #ffffff;\n  display: none;\n  opacity: 0;\n  transform: translate(0%, 20%);\n  outline: 0.2rem solid transparent;\n  outline-offset: 0.2rem;\n  transition-property: opacity, overlay, display, transform, outline-color, border-radius;\n  transition-duration: 0.4s;\n  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);\n  transition-behavior: allow-discrete;\n}\npn-modal .pn-modal:focus-visible {\n  outline-color: #ffffff;\n}\n@media (prefers-reduced-motion: reduce) {\n  pn-modal .pn-modal {\n    transition-duration: 0s;\n    transition-delay: 0s;\n  }\n}\npn-modal .pn-modal[data-allow-overflow] {\n  overflow: unset;\n}\npn-modal .pn-modal[data-allow-overflow] .pn-modal-container {\n  overflow: unset;\n}\npn-modal .pn-modal[data-allow-overflow] .pn-modal-picture {\n  border-top-right-radius: 1.5em;\n}\npn-modal .pn-modal[data-image] {\n  padding-top: 0;\n}\npn-modal .pn-modal[data-sheet] {\n  margin: 0 0 0 auto;\n  height: 100%;\n  max-height: unset;\n  border-radius: 1.5em 0 0 1.5em;\n  transform: translate(20%, 0%);\n}\npn-modal .pn-modal[data-sheet] .pn-modal-container {\n  max-height: unset;\n}\npn-modal .pn-modal[open] {\n  display: flex;\n  opacity: 1;\n  transform: translate(0%, 0%);\n}\n@starting-style {\n  pn-modal .pn-modal[open] {\n    display: flex;\n    opacity: 0;\n    transform: translate(0%, 20%);\n  }\n}\npn-modal .pn-modal[open][data-sheet] {\n  transform: translate(0%, 0%);\n}\n@starting-style {\n  pn-modal .pn-modal[open][data-sheet] {\n    transform: translate(20%, 0%);\n  }\n}\npn-modal .pn-modal::backdrop {\n  background-color: rgba(0, 0, 0, 0);\n  transition-property: opacity, background-color, overlay, display;\n  transition-duration: 0.4s;\n  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);\n  transition-behavior: allow-discrete;\n}\n@media (prefers-reduced-motion: reduce) {\n  pn-modal .pn-modal::backdrop {\n    transition-duration: 0s;\n    transition-delay: 0s;\n  }\n}\npn-modal .pn-modal[open]::backdrop {\n  background-color: rgba(0, 0, 0, 0.55);\n}\n@starting-style {\n  pn-modal .pn-modal[open]::backdrop {\n    background-color: rgba(0, 0, 0, 0);\n  }\n}\npn-modal .pn-modal-container {\n  max-height: 85vh;\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  height: 100%;\n  overflow: hidden auto;\n}\npn-modal .pn-modal-container::-webkit-scrollbar {\n  background-color: #ffffff;\n  width: 0.875em;\n  border-radius: 0.5em;\n}\npn-modal .pn-modal-container::-webkit-scrollbar-track {\n  background-color: #ffffff;\n  border-radius: 0.5em;\n}\npn-modal .pn-modal-container::-webkit-scrollbar-thumb {\n  cursor: pointer;\n  background-color: #969087;\n  border-radius: 1em;\n  border: 0.25em solid #ffffff;\n}\npn-modal .pn-modal-container::-webkit-scrollbar-thumb:hover {\n  background-color: #5e554a;\n}\npn-modal .pn-modal-container::-webkit-scrollbar-corner, pn-modal .pn-modal-container::-webkit-scrollbar-button {\n  display: none;\n}\npn-modal .pn-modal-close-button {\n  position: absolute;\n  z-index: 10;\n  right: 0.75em;\n  top: 0.75em;\n}\npn-modal .pn-modal-header {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5em;\n  padding: clamp(1em, 5vw, 1.5em);\n}\npn-modal .pn-modal-header[hidden] {\n  display: none;\n}\npn-modal .pn-modal-header:not([hidden]) + .pn-modal-content:not([hidden]) {\n  padding-top: 0;\n}\npn-modal .pn-modal-label {\n  line-height: 1.5;\n  padding-right: 1.5em;\n  margin: 0;\n}\npn-modal .pn-modal-text {\n  margin: 0;\n}\npn-modal .pn-modal-content {\n  padding: clamp(1em, 5vw, 1.5em);\n}\npn-modal .pn-modal-image {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n}\npn-modal .pn-modal-image[hidden] {\n  display: none;\n}\npn-modal .pn-modal-picture {\n  margin: 0;\n  padding: 0;\n  display: block;\n  overflow: hidden;\n  border-radius: 1.5em 0 0 0;\n}\npn-modal .pn-modal-picture > *[slot=image] {\n  display: block;\n  height: 100%;\n  width: 100%;\n  object-fit: cover;\n}\npn-modal .pn-modal-buttons {\n  background-color: #ffffff;\n  border-top: 0.0625em solid #d3cecb;\n  padding: clamp(1em, 5vw, 1.5em);\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.5em;\n  border-radius: 0 0 1.5em 1.5em;\n}\npn-modal .pn-modal-buttons > [slot=buttons]:not(pn-button) {\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.5em;\n}\npn-modal .pn-modal-buttons > [slot=buttons]:not(pn-button) > [data-left] {\n  margin-right: auto;\n}\npn-modal .pn-modal-buttons > [data-left] {\n  margin-right: auto;\n}\npn-modal .pn-modal-buttons:empty {\n  display: none;\n}\n\n@media (max-width: 55em) {\n  pn-modal .pn-modal {\n    max-height: 95vh;\n    margin-bottom: 0;\n    bottom: 0;\n    transform: translate(0%, 20%);\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n}";
 const PnModalStyle0 = pnModalCss;
 const PnModal$1 = /*@__PURE__*/ proxyCustomElement(class PnModal extends HTMLElement {
@@ -31,6 +31,7 @@ const PnModal$1 = /*@__PURE__*/ proxyCustomElement(class PnModal extends HTMLEle
         this.close = createEvent(this, "close", 7);
         this.isClosing = false;
         this.isOpening = false;
+        this.removeOverflow = false;
         this.label = undefined;
         this.helpertext = undefined;
         this.language = null;
@@ -46,6 +47,8 @@ const PnModal$1 = /*@__PURE__*/ proxyCustomElement(class PnModal extends HTMLEle
     animationDuration = this.standardAnimationDuration;
     modalTimeout;
     modalElement;
+    modalContainer;
+    modalPicture;
     get hostElement() { return this; }
     handleOpen() {
         if (this.open)
@@ -71,6 +74,10 @@ const PnModal$1 = /*@__PURE__*/ proxyCustomElement(class PnModal extends HTMLEle
         const width = this.maxWidth || '45em';
         this.modalElement.style.setProperty('--pn-modal-max-width', width);
     }
+    handleOverflow() {
+        if (this.allowOverflow)
+            this.setOverflow();
+    }
     /** This event is fired when the modal is toggled. */
     modalToggle;
     /** This event is dispatched after the opening/closing animation has finished playing. */
@@ -100,11 +107,18 @@ const PnModal$1 = /*@__PURE__*/ proxyCustomElement(class PnModal extends HTMLEle
     translate(prop) {
         return translations?.[prop]?.[this.language || en] || prop;
     }
-    handleOverflow() {
-        if (!this.allowOverflow)
-            return;
-        const overflow = this.modalElement.scrollHeight > innerHeight * 0.85 ? 'hidden auto' : 'unset';
-        this.modalElement.style.setProperty('--pn-modal-overflow', overflow);
+    showImage() {
+        return !!this.modalPicture?.innerHTML;
+    }
+    showHeader() {
+        return !!(this.label || this.helpertext || this.hostElement.querySelector('[slot="header"]')?.textContent);
+    }
+    setOverflow() {
+        this.removeOverflow = !this.hasOverflow();
+    }
+    hasOverflow() {
+        const multiplyWith = isSmallScreen() ? 0.95 : 0.85;
+        return this.modalContainer?.scrollHeight > innerHeight * multiplyWith;
     }
     isSameModal(target) {
         return this.modalElement.isSameNode(target);
@@ -141,7 +155,7 @@ const PnModal$1 = /*@__PURE__*/ proxyCustomElement(class PnModal extends HTMLEle
         this.open = state ?? !this.open;
     }
     render() {
-        return (h(Host, { key: '6bf631cc88584b24782904a9918091736e27c3d6' }, h("dialog", { key: '543806f18626bd7f8f6983a5c3769f8bf0422544', class: "pn-modal", "data-closing": this.isClosing, "data-sheet": this.sheet, onClose: () => this.setModalClose(), onCancel: () => this.setModalClose(), onToggle: () => this.modalToggle.emit({ open: this.open }), onKeyDown: event => this.handleKeyboard(event), onClick: event => this.clickModalBackground(event), ref: el => (this.modalElement = el) }, !this.hideClose && (h("pn-button", { key: '60350dfcac19aa570b78e4fb82ca2a0a288de1b7', small: true, class: "pn-modal-close-button", icon: close, iconOnly: true, arialabel: this.translate('CLOSE_MODAL'), appearance: "light", variant: "borderless", type: "button", onPnClick: () => this.setModalClose() })), h("header", { key: 'ba3d857e5f0b57c9567b045843f3b3a1aee9f06d', class: "pn-modal-header" }, this.label && h("h2", { key: '524b36cbeb3f1e0274fb29a3656638c4c221cec9', class: "pn-modal-label" }, this.label), this.helpertext && h("p", { key: '330777c3c194177f7fc811eb45f2ee3a585894fc', class: "pn-modal-text" }, this.helpertext), h("slot", { key: '62dbf64100d4e62974a18752423a781db737333f', name: "header" })), h("section", { key: '57618a994095a9f24c7a142d86fa788cca531062', class: "pn-modal-content" }, h("slot", { key: '14f533135af35a88d1fb03b8e57cd133d3981629' })), h("nav", { key: 'd355d6c0024893a26b1e17bf187a7d0e3142b766', class: "pn-modal-buttons" }, h("slot", { key: '20020f7fd89b706bfaf5825090d6a0470e91b577', name: "buttons" })))));
+        return (h(Host, { key: 'd24c1b43f9eebc2d2759e4b6b15982889c559c08' }, h("dialog", { key: '4111d8ae6c9eb198cb74744dce15b37ec1a4157c', class: "pn-modal", "data-closing": this.isClosing, "data-sheet": this.sheet, "data-image": this.showImage(), "data-allow-overflow": this.removeOverflow, onClose: () => this.setModalClose(), onCancel: () => this.setModalClose(), onToggle: () => this.modalToggle.emit({ open: this.open }), onKeyDown: event => this.handleKeyboard(event), onClick: event => this.clickModalBackground(event), ref: el => (this.modalElement = el) }, !this.hideClose && (h("pn-button", { key: '9411bdbf12899d1913f5094981d08e8161277408', small: true, class: "pn-modal-close-button", icon: close, iconOnly: true, arialabel: this.translate('CLOSE_MODAL'), appearance: "light", variant: "borderless", type: "button", onPnClick: () => this.setModalClose() })), h("div", { key: '917803e1f7847c4b4609fd121391fc33919ea5d3', class: "pn-modal-container", ref: el => (this.modalContainer = el) }, h("div", { key: '3241e14d8647278032ecb4274c39ab6e3615cf6b', class: "pn-modal-image", hidden: !this.showImage() }, h("picture", { key: '6a830c0e51a4c1a9870dd06509a3eaa5a06ce048', class: "pn-modal-picture", ref: el => (this.modalPicture = el) }, h("slot", { key: '098e962a7cc8ac57309ba74951e4a8b0c0aebf08', name: "image" }))), h("header", { key: '41697c436ba9431fe4fa2ae11ca270852f7db309', class: "pn-modal-header", hidden: !this.showHeader() }, this.label && h("h2", { key: '1fcb37a181cfcb6315f2e470eef006842b1ccf53', class: "pn-modal-label" }, this.label), this.helpertext && h("p", { key: '7907955b0d34a729eb142985be24a85fcf5b0c73', class: "pn-modal-text" }, this.helpertext), h("slot", { key: 'c4c8d17830001c3e8df504de9006bcc3cd448549', name: "header" })), h("section", { key: '266f424be0a181433d50cb08904133c9f2aaa67e', class: "pn-modal-content" }, h("slot", { key: '030bb328e6fc00a14305b4134861b38a8fc8f426' })), h("nav", { key: '05d67c40c30af133a7037c3ed57a72b5e5b9de2f', class: "pn-modal-buttons" }, h("slot", { key: 'a12fd530166c6d08aa1a50f0393c4ca2b22b1fc0', name: "buttons" }))))));
     }
     static get watchers() { return {
         "open": ["handleOpen"],
@@ -159,8 +173,9 @@ const PnModal$1 = /*@__PURE__*/ proxyCustomElement(class PnModal extends HTMLEle
         "sheet": [4],
         "maxWidth": [1, "max-width"],
         "isClosing": [32],
-        "isOpening": [32]
-    }, undefined, {
+        "isOpening": [32],
+        "removeOverflow": [32]
+    }, [[9, "resize", "handleOverflow"]], {
         "open": ["handleOpen"],
         "maxWidth": ["handleMaxWidth"]
     }]);

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

	@@ -1 +1 @@
1	- {"file":"pn-modal.js","mappings":"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","names":["PnModal","closeIcon"],"sources":["src/components/feedback/pn-modal/translation.ts","src/components/feedback/pn-modal/pn-modal.scss?tag=pn-modal","src/components/feedback/pn-modal/pn-modal.tsx"],"sourcesContent":["export const translations = {\n CLOSE_MODAL: {\n en: 'Close dialog',\n sv: 'Stäng dialogrutan',\n da: 'Luk dialogboks',\n fi: 'Sulje valintaikkuna',\n no: 'Lukk dialogboksen',\n },\n};\n\nexport type PnTranslations = keyof typeof translations;\n","@use 'sass:string';\n@use 'src/globals/main';\n\npn-modal .pn-modal {\n --pn-modal-max-width: 45em;\n --pn-modal-overflow: hidden auto;\n\n z-index: 10000;\n position: fixed;\n top: 0;\n inset-block-start: 0;\n inset-block-end: 0;\n margin: auto;\n\n overflow: var(--pn-modal-overflow);\n\n max-width: var(--pn-modal-max-width);\n max-height: 85vh;\n padding: clamp(1em, 5vw, 1.5em) 0;\n\n border: 0.0625em solid main.$gray50;\n border-radius: 0.5em;\n\n flex-direction: column;\n align-items: stretch;\n gap: 0.75em;\n\n box-shadow:\n 0 0.25em 0.875em rgba(0, 0, 0, 0.18),\n 0 1.625em 3.5em rgba(0, 0, 0, 0.22);\n background-color: main.$white;\n\n display: none;\n opacity: 0;\n transform: translate(0%, 20%);\n\n @include main.pn-focus(main.$white);\n @include main.pn-scrollbar;\n\n @include main.pn-transition('opacity, overlay, display, transform, outline-color', main.$timing-layout);\n transition-behavior: allow-discrete;\n\n &[data-sheet] {\n margin: 0 0 0 auto;\n height: 100%;\n max-height: unset;\n border-radius: 0.5em 0 0 0.5em;\n transform: translate(20%, 0%);\n }\n\n &[open] {\n display: flex;\n opacity: 1;\n transform: translate(0%, 0%);\n\n @starting-style {\n display: flex;\n opacity: 0;\n transform: translate(0%, 20%);\n }\n\n &[data-sheet] {\n transform: translate(0%, 0%);\n @starting-style {\n transform: translate(20%, 0%);\n }\n }\n }\n\n &::backdrop {\n background-color: rgba(main.$black, 0);\n\n @include main.pn-transition('opacity, background-color, overlay, display', main.$timing-layout);\n transition-behavior: allow-discrete;\n }\n\n &[open]::backdrop {\n background-color: rgba(main.$black, 0.55);\n @starting-style {\n background-color: rgba(main.$black, 0);\n }\n }\n\n &-close-button {\n position: absolute;\n right: 0.5em;\n top: 0.5em;\n }\n\n &-header {\n display: flex;\n flex-direction: column;\n gap: 0.5em;\n padding: 0 clamp(1em, 5vw, 1.5em);\n }\n\n &-label {\n line-height: 1.5;\n padding-right: 1.5em;\n margin: 0;\n }\n\n &-text {\n margin: 0;\n }\n\n &-content {\n padding: 0 clamp(1em, 5vw, 1.5em);\n }\n\n &-buttons {\n background-color: main.$white;\n border-top: 0.0625em solid main.$gray200;\n padding: clamp(1em, 5vw, 1.5em) clamp(1em, 5vw, 1.5em) 0;\n display: flex;\n justify-content: flex-end;\n gap: 0.5em;\n [slot='buttons']:not(pn-button) {\n display: flex;\n justify-content: flex-end;\n gap: 0.5em;\n }\n &:empty {\n display: none;\n }\n }\n}\n\n@media (max-width: 30em) {\n pn-modal .pn-modal {\n width: 100%;\n max-height: 95vh;\n margin-bottom: 0;\n bottom: 0;\n transform: translate(0%, 20%);\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n}\n","import { Component, Element, h, Host, Prop, Watch, Event, EventEmitter, forceUpdate, State } from '@stencil/core';\nimport { awaitTopbar, en, reduceMotion } from '@/index';\nimport type { PnLanguages } from '@/index';\n\nimport { close as closeIcon } from 'pn-design-assets/pn-assets/icons.js';\nimport { PnTranslations, translations } from './translation';\n\n/*\n Present content in a modal that overlays everything on the current page.\n * Use the prop `open` to toggle the visiblity.\n * Use the event `modalToggle` to determine when the modal is being closed/opened by the user.\n \n @slot - The default slot, will be placed in the middle content area.\n * @slot header - Place the title + lead text in the header.\n * @slot buttons - Place buttons inside the modal at the bottom.\n /\n@Component({\n tag: 'pn-modal',\n styleUrl: 'pn-modal.scss',\n})\nexport class PnModal {\n private mo: MutationObserver;\n\n private readonly standardAnimationDuration = 400;\n private animationDuration: number = this.standardAnimationDuration;\n\n modalTimeout: NodeJS.Timeout;\n\n private modalElement: HTMLDialogElement;\n\n @Element() hostElement: HTMLElement;\n\n @State() isClosing: boolean = false;\n @State() isOpening: boolean = false;\n\n /* Set a label for the modal. /\n @Prop() label?: string;\n /* Set a descriptive text for the modal. /\n @Prop() helpertext?: string;\n /* Set the language. /\n @Prop() language?: PnLanguages = null;\n\n /* Bind to this property if you want to control the visibility of the modal from your own data. @category Features /\n @Prop({ mutable: true, reflect: true }) open?: boolean = false;\n /* Prevent users from closing the modal by clicking on the backdrop or the `ESC` key. @category Features /\n @Prop() persistent?: boolean = false;\n /* Hide the close button. If you disable this, make sure you build your own cancel button. @category Features /\n @Prop() hideClose?: boolean = false;\n /\n Allow overflow if possible. When the modal opens, it will check scrollHeight > offsetHeight.\n * Do not use if you have a lot of conditional rendering inside the modal.\n /\n @Prop() allowOverflow?: boolean = false;\n\n /* Use the `sheet` visual. Aligns the modal to the right. @category Visual /\n @Prop() sheet?: boolean = false;\n /* Define your own max width of the modal. Default is `45em`. @category Visual /\n @Prop() maxWidth?: string = null;\n\n @Watch('open')\n handleOpen() {\n if (this.open) this.openModal();\n else {\n this.closeModal();\n /* In the next update, we can remove this one so you can finally stack modals. /\n this.close.emit(true);\n }\n\n this.handleOverflow();\n\n clearTimeout(this.modalTimeout);\n this.isClosing = !this.open && true;\n\n if (reduceMotion()) this.animationDuration = 0;\n else this.animationDuration = this.standardAnimationDuration;\n\n this.modalTimeout = setTimeout(() => {\n this.isClosing = false;\n this.modalVisiblity.emit({ visible: this.open });\n }, this.animationDuration);\n }\n\n @Watch('maxWidth')\n handleMaxWidth() {\n const width = this.maxWidth \|\| '45em';\n this.modalElement.style.setProperty('--pn-modal-max-width', width);\n }\n\n /* This event is fired when the modal is toggled. /\n @Event() modalToggle: EventEmitter<{ open: boolean }>;\n /* This event is dispatched after the opening/closing animation has finished playing. /\n @Event() modalVisiblity: EventEmitter<{ visible: boolean }>;\n /\n Event fired when the modal is closed, either by clicking on the dark background or by clicking on the close button.\n * @deprecated Use the new `modalToggle` event instead.\n /\n @Event() close: EventEmitter<boolean>;\n\n connectedCallback() {\n this.mo = new MutationObserver(() => forceUpdate(this.hostElement));\n this.mo.observe(this.hostElement, { childList: true, subtree: true });\n }\n\n disconnectedCallback() {\n if (this.mo) this.mo.disconnect();\n }\n\n async componentWillLoad() {\n if (this.language === null) await awaitTopbar(this.hostElement);\n }\n\n componentDidLoad() {\n this.handleMaxWidth();\n if (this.open) this.openModal();\n }\n\n private translate(prop: PnTranslations) {\n return translations?.[prop]?.[this.language \|\| en] \|\| prop;\n }\n\n private handleOverflow() {\n if (!this.allowOverflow) return;\n const overflow = this.modalElement.scrollHeight > innerHeight 0.85 ? 'hidden auto' : 'unset';\n this.modalElement.style.setProperty('--pn-modal-overflow', overflow);\n }\n\n private isSameModal(target: HTMLElement) {\n return this.modalElement.isSameNode(target);\n }\n\n private handleKeyboard(event: KeyboardEvent) {\n if (event.key !== 'Escape') return;\n\n event.preventDefault();\n event.stopImmediatePropagation();\n\n if (!this.persistent) this.setModalClose();\n }\n\n private clickModalBackground(event: MouseEvent) {\n const { clientY, clientX } = event;\n\n const notInsideAnyModal = (event.target as HTMLDialogElement).localName !== this.modalElement.localName;\n const notThisModal = !this.isSameModal(event.target as HTMLElement);\n\n if (notInsideAnyModal \|\| notThisModal) return;\n\n const { top, left, height, width } = this.modalElement.getBoundingClientRect();\n const isInModal = top <= clientY && clientY <= top + height && left <= clientX && clientX <= left + width;\n\n if (!isInModal && !this.persistent) this.toggleOpen(false);\n }\n\n private setModalClose() {\n this.toggleOpen(false);\n }\n\n private closeModal() {\n this.modalElement.close();\n }\n\n private openModal() {\n this.modalElement.showModal();\n }\n\n private toggleOpen(state?: boolean) {\n this.open = state ?? !this.open;\n }\n\n render() {\n return (\n <Host>\n <dialog\n class=\"pn-modal\"\n data-closing={this.isClosing}\n data-sheet={this.sheet}\n onClose={() => this.setModalClose()}\n onCancel={() => this.setModalClose()}\n onToggle={() => this.modalToggle.emit({ open: this.open })}\n onKeyDown={event => this.handleKeyboard(event)}\n onClick={event => this.clickModalBackground(event)}\n ref={el => (this.modalElement = el)}\n >\n {!this.hideClose && (\n <pn-button\n small\n class=\"pn-modal-close-button\"\n icon={closeIcon}\n iconOnly={true}\n arialabel={this.translate('CLOSE_MODAL')}\n appearance=\"light\"\n variant=\"borderless\"\n type=\"button\"\n onPnClick={() => this.setModalClose()}\n />\n )}\n\n <header class=\"pn-modal-header\">\n {this.label && <h2 class=\"pn-modal-label\">{this.label}</h2>}\n {this.helpertext && <p class=\"pn-modal-text\">{this.helpertext}</p>}\n\n <slot name=\"header\"></slot>\n </header>\n\n <section class=\"pn-modal-content\">\n <slot></slot>\n </section>\n\n <nav class=\"pn-modal-buttons\">\n <slot name=\"buttons\"></slot>\n </nav>\n </dialog>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pn-modal.js","mappings":"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","names":["PnModal","closeIcon"],"sources":["src/components/feedback/pn-modal/translation.ts","src/components/feedback/pn-modal/pn-modal.scss?tag=pn-modal","src/components/feedback/pn-modal/pn-modal.tsx"],"sourcesContent":["export const translations = {\n CLOSE_MODAL: {\n en: 'Close dialog',\n sv: 'Stäng dialogrutan',\n da: 'Luk dialogboks',\n fi: 'Sulje valintaikkuna',\n no: 'Lukk dialogboksen',\n },\n};\n\nexport type PnTranslations = keyof typeof translations;\n","@use 'sass:string';\n@use 'src/globals/main';\n\npn-modal .pn-modal {\n --pn-modal-max-width: 45em;\n\n z-index: 10000;\n position: fixed;\n top: 0;\n\n inset-block-start: 0;\n inset-block-end: 0;\n\n margin: auto;\n padding: 0;\n\n max-width: var(--pn-modal-max-width);\n\n overflow: hidden;\n border: 0;\n border-radius: 1.5em;\n\n box-shadow:\n 0 0.25em 0.875em rgba(0, 0, 0, 0.18),\n 0 1.625em 3.5em rgba(0, 0, 0, 0.22);\n background-color: main.$white;\n\n display: none;\n opacity: 0;\n transform: translate(0%, 20%);\n\n @include main.pn-focus(main.$white);\n\n @include main.pn-transition(\n 'opacity, overlay, display, transform, outline-color, border-radius',\n main.$timing-layout\n );\n transition-behavior: allow-discrete;\n\n &[data-allow-overflow] {\n overflow: unset;\n .pn-modal-container {\n overflow: unset;\n }\n .pn-modal-picture {\n border-top-right-radius: 1.5em;\n }\n }\n\n &[data-image] {\n padding-top: 0;\n }\n\n &[data-sheet] {\n margin: 0 0 0 auto;\n height: 100%;\n max-height: unset;\n border-radius: 1.5em 0 0 1.5em;\n transform: translate(20%, 0%);\n .pn-modal-container {\n max-height: unset;\n }\n }\n\n &[open] {\n display: flex;\n opacity: 1;\n transform: translate(0%, 0%);\n\n @starting-style {\n display: flex;\n opacity: 0;\n transform: translate(0%, 20%);\n }\n\n &[data-sheet] {\n transform: translate(0%, 0%);\n @starting-style {\n transform: translate(20%, 0%);\n }\n }\n }\n\n &::backdrop {\n background-color: rgba(main.$black, 0);\n\n @include main.pn-transition('opacity, background-color, overlay, display', main.$timing-layout);\n transition-behavior: allow-discrete;\n }\n\n &[open]::backdrop {\n background-color: rgba(main.$black, 0.55);\n @starting-style {\n background-color: rgba(main.$black, 0);\n }\n }\n\n &-container {\n max-height: 85vh;\n\n display: flex;\n flex-direction: column;\n align-items: stretch;\n\n height: 100%;\n overflow: hidden auto;\n @include main.pn-scrollbar;\n }\n\n &-close-button {\n position: absolute;\n z-index: 10;\n right: 0.75em;\n top: 0.75em;\n }\n\n &-header {\n display: flex;\n flex-direction: column;\n gap: 0.5em;\n padding: clamp(1em, 5vw, 1.5em);\n &[hidden] {\n display: none;\n }\n &:not([hidden]) + .pn-modal-content:not([hidden]) {\n padding-top: 0;\n }\n }\n\n &-label {\n line-height: 1.5;\n padding-right: 1.5em;\n margin: 0;\n }\n\n &-text {\n margin: 0;\n }\n\n &-content {\n padding: clamp(1em, 5vw, 1.5em);\n }\n\n &-image {\n position: relative;\n display: flex;\n flex-direction: column;\n &[hidden] {\n display: none;\n }\n }\n\n &-picture {\n margin: 0;\n padding: 0;\n display: block;\n overflow: hidden;\n border-radius: 1.5em 0 0 0;\n > [slot='image'] {\n display: block;\n height: 100%;\n width: 100%;\n object-fit: cover;\n }\n }\n\n &-buttons {\n background-color: main.$white;\n border-top: 0.0625em solid main.$gray200;\n padding: clamp(1em, 5vw, 1.5em);\n display: flex;\n justify-content: flex-end;\n gap: 0.5em;\n border-radius: 0 0 1.5em 1.5em;\n\n > [slot='buttons']:not(pn-button) {\n display: flex;\n justify-content: flex-end;\n gap: 0.5em;\n > [data-left] {\n margin-right: auto;\n }\n }\n\n > [data-left] {\n margin-right: auto;\n }\n\n &:empty {\n display: none;\n }\n }\n}\n\n@media (max-width: 55em) {\n pn-modal .pn-modal {\n max-height: 95vh;\n margin-bottom: 0;\n bottom: 0;\n transform: translate(0%, 20%);\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n}\n","import {\n Component,\n Element,\n h,\n Host,\n Prop,\n Watch,\n Event,\n EventEmitter,\n forceUpdate,\n State,\n Listen,\n} from '@stencil/core';\nimport { awaitTopbar, en, isSmallScreen, reduceMotion } from '@/index';\nimport type { PnLanguages } from '@/index';\n\nimport { close as closeIcon } from 'pn-design-assets/pn-assets/icons.js';\nimport { PnTranslations, translations } from './translation';\n\n/\n Present content in a modal that overlays everything on the current page.\n * Use the prop `open` to toggle the visiblity.\n * Use the event `modalToggle` to determine when the modal is being closed/opened by the user.\n \n @slot - The default slot, will be placed in the middle content area.\n * @slot image - Place an image or illustration at the top of the modal.\n * @slot header - Place the title + lead text in the header.\n * @slot buttons - Place buttons inside the modal at the bottom.\n * pn-buttons aligns automatically to the right, set the data-left attribute on the button you want to align to the left.\n /\n@Component({\n tag: 'pn-modal',\n styleUrl: 'pn-modal.scss',\n})\nexport class PnModal {\n private mo: MutationObserver;\n\n private readonly standardAnimationDuration = 400;\n private animationDuration: number = this.standardAnimationDuration;\n\n private modalTimeout: NodeJS.Timeout;\n\n private modalElement: HTMLDialogElement;\n private modalContainer: HTMLDivElement;\n private modalPicture: HTMLPictureElement;\n\n @Element() hostElement: HTMLElement;\n\n @State() isClosing: boolean = false;\n @State() isOpening: boolean = false;\n\n /* If true, the modal content will remove overflow CSS property. /\n @State() removeOverflow: boolean = false;\n\n /* Set a label for the modal. /\n @Prop() label?: string;\n /* Set a descriptive text for the modal. /\n @Prop() helpertext?: string;\n /* Set the language. /\n @Prop() language?: PnLanguages = null;\n\n /* Bind to this property if you want to control the visibility of the modal from your own data. @category Features /\n @Prop({ mutable: true, reflect: true }) open?: boolean = false;\n /* Prevent users from closing the modal by clicking on the backdrop or the `ESC` key. @category Features /\n @Prop() persistent?: boolean = false;\n /* Hide the close button. If you disable this, make sure you build your own cancel button. @category Features /\n @Prop() hideClose?: boolean = false;\n /\n Allow overflow if possible. When the modal opens, it will check scrollHeight > offsetHeight.\n * Do not use if you have a lot of conditional rendering inside the modal.\n /\n @Prop() allowOverflow?: boolean = false;\n\n /* Use the `sheet` visual. Aligns the modal to the right. @category Visual /\n @Prop() sheet?: boolean = false;\n /* Define your own max width of the modal. Default is `45em`. @category Visual /\n @Prop() maxWidth?: string = null;\n\n @Watch('open')\n handleOpen() {\n if (this.open) this.openModal();\n else {\n this.closeModal();\n /* In the next update, we can remove this one so you can finally stack modals. /\n this.close.emit(true);\n }\n\n this.handleOverflow();\n\n clearTimeout(this.modalTimeout);\n this.isClosing = !this.open && true;\n\n if (reduceMotion()) this.animationDuration = 0;\n else this.animationDuration = this.standardAnimationDuration;\n\n this.modalTimeout = setTimeout(() => {\n this.isClosing = false;\n this.modalVisiblity.emit({ visible: this.open });\n }, this.animationDuration);\n }\n\n @Watch('maxWidth')\n handleMaxWidth() {\n const width = this.maxWidth \|\| '45em';\n this.modalElement.style.setProperty('--pn-modal-max-width', width);\n }\n\n @Listen('resize', { target: 'window' })\n handleOverflow() {\n if (this.allowOverflow) this.setOverflow();\n }\n\n /* This event is fired when the modal is toggled. /\n @Event() modalToggle: EventEmitter<{ open: boolean }>;\n /* This event is dispatched after the opening/closing animation has finished playing. /\n @Event() modalVisiblity: EventEmitter<{ visible: boolean }>;\n /\n Event fired when the modal is closed, either by clicking on the dark background or by clicking on the close button.\n * @deprecated Use the new `modalToggle` event instead.\n /\n @Event() close: EventEmitter<boolean>;\n\n connectedCallback() {\n this.mo = new MutationObserver(() => forceUpdate(this.hostElement));\n this.mo.observe(this.hostElement, { childList: true, subtree: true });\n }\n\n disconnectedCallback() {\n if (this.mo) this.mo.disconnect();\n }\n\n async componentWillLoad() {\n if (this.language === null) await awaitTopbar(this.hostElement);\n }\n\n componentDidLoad() {\n this.handleMaxWidth();\n if (this.open) this.openModal();\n }\n\n private translate(prop: PnTranslations) {\n return translations?.[prop]?.[this.language \|\| en] \|\| prop;\n }\n\n private showImage() {\n return !!this.modalPicture?.innerHTML;\n }\n\n private showHeader() {\n return !!(this.label \|\| this.helpertext \|\| this.hostElement.querySelector('[slot=\"header\"]')?.textContent);\n }\n\n private setOverflow() {\n this.removeOverflow = !this.hasOverflow();\n }\n\n private hasOverflow(): boolean {\n const multiplyWith = isSmallScreen() ? 0.95 : 0.85;\n return this.modalContainer?.scrollHeight > innerHeight multiplyWith;\n }\n\n private isSameModal(target: HTMLElement): boolean {\n return this.modalElement.isSameNode(target);\n }\n\n private handleKeyboard(event: KeyboardEvent) {\n if (event.key !== 'Escape') return;\n\n event.preventDefault();\n event.stopImmediatePropagation();\n\n if (!this.persistent) this.setModalClose();\n }\n\n private clickModalBackground(event: MouseEvent) {\n const { clientY, clientX } = event;\n\n const notInsideAnyModal = (event.target as HTMLDialogElement).localName !== this.modalElement.localName;\n const notThisModal = !this.isSameModal(event.target as HTMLElement);\n\n if (notInsideAnyModal \|\| notThisModal) return;\n\n const { top, left, height, width } = this.modalElement.getBoundingClientRect();\n const isInModal = top <= clientY && clientY <= top + height && left <= clientX && clientX <= left + width;\n\n if (!isInModal && !this.persistent) this.toggleOpen(false);\n }\n\n private setModalClose() {\n this.toggleOpen(false);\n }\n\n private closeModal() {\n this.modalElement.close();\n }\n\n private openModal() {\n this.modalElement.showModal();\n }\n\n private toggleOpen(state?: boolean) {\n this.open = state ?? !this.open;\n }\n\n render() {\n return (\n <Host>\n <dialog\n class=\"pn-modal\"\n data-closing={this.isClosing}\n data-sheet={this.sheet}\n data-image={this.showImage()}\n data-allow-overflow={this.removeOverflow}\n onClose={() => this.setModalClose()}\n onCancel={() => this.setModalClose()}\n onToggle={() => this.modalToggle.emit({ open: this.open })}\n onKeyDown={event => this.handleKeyboard(event)}\n onClick={event => this.clickModalBackground(event)}\n ref={el => (this.modalElement = el)}\n >\n {!this.hideClose && (\n <pn-button\n small\n class=\"pn-modal-close-button\"\n icon={closeIcon}\n iconOnly={true}\n arialabel={this.translate('CLOSE_MODAL')}\n appearance=\"light\"\n variant=\"borderless\"\n type=\"button\"\n onPnClick={() => this.setModalClose()}\n />\n )}\n <div class=\"pn-modal-container\" ref={el => (this.modalContainer = el)}>\n <div class=\"pn-modal-image\" hidden={!this.showImage()}>\n <picture class=\"pn-modal-picture\" ref={el => (this.modalPicture = el)}>\n <slot name=\"image\"></slot>\n </picture>\n </div>\n <header class=\"pn-modal-header\" hidden={!this.showHeader()}>\n {this.label && <h2 class=\"pn-modal-label\">{this.label}</h2>}\n {this.helpertext && <p class=\"pn-modal-text\">{this.helpertext}</p>}\n\n <slot name=\"header\"></slot>\n </header>\n <section class=\"pn-modal-content\">\n <slot></slot>\n </section>\n <nav class=\"pn-modal-buttons\">\n <slot name=\"buttons\"></slot>\n </nav>\n </div>\n </dialog>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -4,7 +4,7 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { a as alert_exclamation_circle } from './alert_exclamation_circle.js';
-import { a as angle_down } from './angle_down.js';
+import { c as chevron_down } from './chevron_down.js';
 import { c as close } from './close.js';
 import { u as uuidv4, k as awaitTopbar, r as reduceMotion, o as ripple, j as getTotalHeightOffset, e as en } from './helpers.js';
 import { d as defineCustomElement$2 } from './pn-icon2.js';
@@ -631,7 +631,7 @@ const PnMultiselect$1 = /*@__PURE__*/ proxyCustomElement(class PnMultiselect ext
         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())))));
     }
     render() {
-        return (h(Host, { key: '1cf81d38c41d906748ea6fd930ef0a3ffaa7f5d6' }, h("fieldset", { key: '21265396b14535f99dba3e7fd2d093ccb2a380af', class: "pn-multiselect", "data-icon": !!this.icon, "data-error": this.hasError(), disabled: this.disabled }, this.label && (h("legend", { key: '7b9df3db2b214ddced59dd3cbc5d6b7e474f5c1b', id: this.idLegend, class: "pn-multiselect-label", onClick: () => this.handleLabel() }, h("span", { key: 'de1e49c84b9c8a90e1f2e27b1757b9d7b80269f9' }, this.label), !!this.optionsChecked()?.length && (h("span", { key: '4d7a4718ff5564a8bd9824191674a536e674db00' }, this.optionsCheckedTotal(), "/", this.optionsTotal())))), h("div", { key: '1133f2b71d626942cc1aedfcdb99c35c0cc19e6b', class: "pn-multiselect-group", ref: el => (this.elGroup = el) }, h("div", { key: 'd48cbaecab417ef48f67be0a17255e2f17bef233', class: "pn-multiselect-input" }, !!this.icon && h("pn-icon", { key: '053f2dea56dc17880890780f4cb0dbe36973ce72', class: "pn-multiselect-icon", "data-custom": true, icon: this.icon }), h("input", { key: '0e1ac1adee922ff2123aa8e8277288f661f40a48', 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: '0112d6d05e23edbd392b27df3bc29cb1e2909331', class: "pn-multiselect-icon", "data-error": true, icon: alert_exclamation_circle, color: "warning" })), h("button", { key: 'e363e1f51469f973300db4543622de3da2dc1176', 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: '4945c172b4913430a1d24e4e363b778734b19be4', class: "pn-multiselect-icon", icon: angle_down, color: "blue700" }))), this.renderOptions()), this.hasMessage() && (h("p", { key: '318cf667b58984da1ba7eea2655cd87079efaf13', id: this.idHelper, class: "pn-multiselect-description", role: !!this.error ? 'alert' : null }, h("span", { key: 'eca71fe8b54c115bfef10c96408a832e1ffb3e15' }, this.error || this.helpertext))), this.search && this.renderChips(), h("slot", { key: '7fb51af2932ef92ca98bddcb1831f586bba1a7dd' }), this.search && (h("p", { key: '4e7a2527cd6068ff1b17e23b775bc46b858f3256', id: this.idSr, class: "pn-multiselect-sr-only", role: "alert", "aria-live": "assertive" }, this.srMessage && h("span", { key: 'bc6de5cae5fc36189390c56af59f06671cbeabe0' }, this.srMessage))))));
+        return (h(Host, { key: '8dcab6f8526d10167d647733ebeba91c6cc4a891' }, h("fieldset", { key: 'b60a7513bb1481686d0353911fe946a8a0534416', class: "pn-multiselect", "data-icon": !!this.icon, "data-error": this.hasError(), disabled: this.disabled }, this.label && (h("legend", { key: '51f1dc3597171f431ec55d6960f5c22a1af86ea0', id: this.idLegend, class: "pn-multiselect-label", onClick: () => this.handleLabel() }, h("span", { key: '95c5a289c2489059fb076ed82fa40b57965b40fa' }, this.label), !!this.optionsChecked()?.length && (h("span", { key: 'bb1a5f52c8b05612c31325e9237292ad6cdd83ac' }, this.optionsCheckedTotal(), "/", this.optionsTotal())))), h("div", { key: '05bcb2bc08fe7495db84681072c83cef9aa1c00e', class: "pn-multiselect-group", ref: el => (this.elGroup = el) }, h("div", { key: '7da7473b15c01f1233dc0441571495743c7e8c91', class: "pn-multiselect-input" }, !!this.icon && h("pn-icon", { key: '2ac559c573d8fd0f1e6f39b94c7ba54e8f82530b', class: "pn-multiselect-icon", "data-custom": true, icon: this.icon }), h("input", { key: '0839cb250ceab31a45d643c89451cedb02d9e7bb', 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: 'bbe2ed7c5f861b6972ea3937c1aad7fa53269878', class: "pn-multiselect-icon", "data-error": true, icon: alert_exclamation_circle, color: "warning" })), h("button", { key: '4e2871a96160b3416dce289c8716665a04113b44', 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: '71c79e52bcca84ae16b225dc6c58332b95788234', class: "pn-multiselect-icon", icon: chevron_down, color: "blue700" }))), this.renderOptions()), this.hasMessage() && (h("p", { key: 'a27a65d1fba955a5b1bab1c7b79c5e78b5c0040a', id: this.idHelper, class: "pn-multiselect-description", role: !!this.error ? 'alert' : null }, h("span", { key: 'c00904641ae7ba9a9fb482fbf215d6a7f2643872' }, this.error || this.helpertext))), this.search && this.renderChips(), h("slot", { key: '02c6ced4675438a0b29505a2c20948b1345ec1e0' }), this.search && (h("p", { key: 'c8ce14a5d9d28e235de857c2264bed4f5507e389', id: this.idSr, class: "pn-multiselect-sr-only", role: "alert", "aria-live": "assertive" }, this.srMessage && h("span", { key: 'a365ee9816a1e3e732649857c4cf73c0470a85bf' }, this.srMessage))))));
     }
     static get watchers() { return {
         "open": ["handleOpen"],