@dso-toolkit/core 67.3.2 → 68.0.0

package/dist/cjs/dso-alert_6.cjs.entry.js

@@ -14,6 +14,7 @@ require('./index.esm-970bc106.js');
 const translations$1 = {
     en: {
         "dso-alert": {
+            close: "Close",
             success: "Success",
             info: "Notice",
             warning: "Warning",
@@ -22,6 +23,7 @@ const translations$1 = {
     },
     nl: {
         "dso-alert": {
+            close: "Sluiten",
             success: "Gelukt",
             info: "Opmerking",
             warning: "Waarschuwing",
@@ -30,12 +32,17 @@ const translations$1 = {
     },
 };
 
-const alertCss = ":host{display:block}:host(:not(:first-child)){margin-block-start:24px}:host([compact]:not([compact=false])){position:relative;border-end-end-radius:8px;border-start-end-radius:8px;margin-inline-start:8px}:host([compact]:not([compact=false]))::before{border-end-start-radius:8px;border-start-start-radius:8px;inset-block-end:0;content:\"\";inset-inline-start:-8px;position:absolute;inset-block-start:0;inline-size:8px}:host([status=success]){--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#e4f1d4;border-color:#e4f1d4;color:#191919}:host([status=success]) a:is(.download,.download:hover,.download:focus-visible){background-image:url(\"./di.svg#download-zwart\")}:host([status=success]) a:is(.extern,.extern:hover,.extern:focus-visible){background-image:url(\"./di.svg#external-link-zwart\")}:host([status=success]) a:is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:url(\"./di.svg#call-zwart\")}:host([status=success]) a:is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:url(\"./di.svg#email-zwart\")}:host([status=success][compact]:not([compact=false]))::before{background-color:#39870c}:host([status=error]){--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#f5d8dc;border-color:#f5d8dc;color:#191919}:host([status=error]) a:is(.download,.download:hover,.download:focus-visible){background-image:url(\"./di.svg#download-zwart\")}:host([status=error]) a:is(.extern,.extern:hover,.extern:focus-visible){background-image:url(\"./di.svg#external-link-zwart\")}:host([status=error]) a:is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:url(\"./di.svg#call-zwart\")}:host([status=error]) a:is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:url(\"./di.svg#email-zwart\")}:host([status=error][compact]:not([compact=false]))::before{background-color:#ce3f51}:host([status=warning]){--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#f8f6cc;border-color:#f8f6cc;color:#191919}:host([status=warning]) a:is(.download,.download:hover,.download:focus-visible){background-image:url(\"./di.svg#download-zwart\")}:host([status=warning]) a:is(.extern,.extern:hover,.extern:focus-visible){background-image:url(\"./di.svg#external-link-zwart\")}:host([status=warning]) a:is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:url(\"./di.svg#call-zwart\")}:host([status=warning]) a:is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:url(\"./di.svg#email-zwart\")}:host([status=warning][compact]:not([compact=false]))::before{background-color:#dcd400}:host([status=info]){--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#e1ecf7;border-color:#e1ecf7;color:#191919}:host([status=info]) a:is(.download,.download:hover,.download:focus-visible){background-image:url(\"./di.svg#download-zwart\")}:host([status=info]) a:is(.extern,.extern:hover,.extern:focus-visible){background-image:url(\"./di.svg#external-link-zwart\")}:host([status=info]) a:is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:url(\"./di.svg#call-zwart\")}:host([status=info]) a:is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:url(\"./di.svg#email-zwart\")}:host([status=info][compact]:not([compact=false]))::before{background-color:#6ca4d9}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.alert{line-height:1.5;margin-block-end:24px;min-block-size:64px;position:relative}@media screen and (min-width: 481px){.alert{padding-block:19px;padding-inline:63px 16px}.alert.dso-compact{padding-block:9.5px;padding-inline:16px}}@media screen and (max-width: 480px){.alert{padding-block:63px 16px;padding-inline:16px}.alert.dso-compact{padding-block:9.5px;padding-inline:16px}}.alert:not(:first-child){margin-block-start:24px}.alert dso-icon{inset-block-start:16px;inset-inline-start:16px;position:absolute;block-size:32px;inline-size:32px}.alert.dso-compact{min-block-size:16px}";
+const alertCss = ":host{display:block}:host(:not(:first-child)){margin-block-start:24px}:host([compact]:not([compact=false])){position:relative;border-end-end-radius:8px;border-start-end-radius:8px;margin-inline-start:8px}:host([compact]:not([compact=false]))::before{border-end-start-radius:8px;border-start-start-radius:8px;inset-block-end:0;content:\"\";inset-inline-start:-8px;position:absolute;inset-block-start:0;inline-size:8px}:host([status=success]){--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#e4f1d4;border-color:#e4f1d4;color:#191919}:host([status=success]) a:is(.download,.download:hover,.download:focus-visible){background-image:url(\"./di.svg#download-zwart\")}:host([status=success]) a:is(.extern,.extern:hover,.extern:focus-visible){background-image:url(\"./di.svg#external-link-zwart\")}:host([status=success]) a:is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:url(\"./di.svg#call-zwart\")}:host([status=success]) a:is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:url(\"./di.svg#email-zwart\")}:host([status=success][compact]:not([compact=false]))::before{background-color:#39870c}:host([status=error]){--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#f5d8dc;border-color:#f5d8dc;color:#191919}:host([status=error]) a:is(.download,.download:hover,.download:focus-visible){background-image:url(\"./di.svg#download-zwart\")}:host([status=error]) a:is(.extern,.extern:hover,.extern:focus-visible){background-image:url(\"./di.svg#external-link-zwart\")}:host([status=error]) a:is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:url(\"./di.svg#call-zwart\")}:host([status=error]) a:is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:url(\"./di.svg#email-zwart\")}:host([status=error][compact]:not([compact=false]))::before{background-color:#ce3f51}:host([status=warning]){--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#f8f6cc;border-color:#f8f6cc;color:#191919}:host([status=warning]) a:is(.download,.download:hover,.download:focus-visible){background-image:url(\"./di.svg#download-zwart\")}:host([status=warning]) a:is(.extern,.extern:hover,.extern:focus-visible){background-image:url(\"./di.svg#external-link-zwart\")}:host([status=warning]) a:is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:url(\"./di.svg#call-zwart\")}:host([status=warning]) a:is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:url(\"./di.svg#email-zwart\")}:host([status=warning][compact]:not([compact=false]))::before{background-color:#dcd400}:host([status=info]){--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#e1ecf7;border-color:#e1ecf7;color:#191919}:host([status=info]) a:is(.download,.download:hover,.download:focus-visible){background-image:url(\"./di.svg#download-zwart\")}:host([status=info]) a:is(.extern,.extern:hover,.extern:focus-visible){background-image:url(\"./di.svg#external-link-zwart\")}:host([status=info]) a:is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:url(\"./di.svg#call-zwart\")}:host([status=info]) a:is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:url(\"./di.svg#email-zwart\")}:host([status=info][compact]:not([compact=false]))::before{background-color:#6ca4d9}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.alert{line-height:1.5;margin-block-end:24px;min-block-size:64px;position:relative}@media screen and (min-width: 481px){.alert{padding-block:19px;padding-inline:63px 40px}.alert.dso-compact{padding-block:9.5px;padding-inline:16px 40px}}@media screen and (max-width: 480px){.alert{padding-block:63px 16px;padding-inline:16px}.alert.dso-compact{padding-block:9.5px;padding-inline:16px}}.alert:not(:first-child){margin-block-start:24px}.alert .icon-status{inset-block-start:16px;inset-inline-start:16px;position:absolute;block-size:32px;inline-size:32px}.alert .dso-close{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none;position:absolute;inset-block-start:4px;inset-inline-end:4px;block-size:32px;inline-size:32px;padding:0;background-color:transparent;border:0;text-align:center}.alert .dso-close[disabled]{cursor:default}.alert .dso-close::-moz-focus-inner{border:0;padding:0}.alert.dso-compact{min-block-size:16px}";
 const DsoAlertStyle0 = alertCss;
 
 const Alert = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.dsoClose = index.createEvent(this, "dsoClose", 7);
+        /**
+         * When `false` the close button in the alert will not be rendered.
+         */
+        this.closable = false;
         this.text = i18n.i18n(() => this.host, translations$1);
     }
     render() {
@@ -43,7 +50,7 @@ const Alert = class {
         if (!status) {
             throw new Error(`Invalid status ${this.status}`);
         }
-        return (index.h("div", { key: '9844156e479a6ecef5bbddb530ffdfeff06c2ddf', class: clsx.clsx("alert", `alert-${this.status}`, { "dso-compact": this.compact }), role: this.roleAlert ? "alert" : undefined }, !this.compact && index.h("dso-icon", { key: 'fb3d1420f40e5a8c1757c69be1700318465510ce', icon: "status-" + this.status }), index.h("span", { key: 'd3a8bc0671598269a848bc667ada8325c632c8b8', class: "sr-only" }, status, ":"), index.h("slot", { key: '40504cb29cdf7dd5af60e570cf9d69a5940dac46' })));
+        return (index.h("div", { key: 'b07c3ac60ceebb4669e203df68855ec1bda1979d', class: clsx.clsx("alert", `alert-${this.status}`, { "dso-compact": this.compact }), role: this.roleAlert ? "alert" : undefined }, !this.compact && index.h("dso-icon", { key: '4ec39cc6a1a6dba8e44e483118bce9aeb4abc820', class: "icon-status", icon: "status-" + this.status }), index.h("span", { key: '7974a804de6c67add9027906527002a40ff2be6a', class: "sr-only" }, status, ":"), index.h("slot", { key: 'cb8b72c9dfff4d56ef223f63fa8c51393ca7fc68' }), this.closable && (index.h("button", { key: '1848fbb6c4d938bef21ca5d0ef0d3af8079a23ea', type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, index.h("dso-icon", { key: 'e24b4ac973b76498fd56f6f4abc3f7efaee9cf1d', icon: "times" }), index.h("span", { key: '4951a2525bba4947ddeb9c79780b9c63fafea2fc', class: "sr-only" }, this.text("close"))))));
     }
     get host() { return index.getElement(this); }
 };
@@ -57,7 +64,7 @@ const Badge = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("span", { key: 'bc09970a78c6dd95bb114d9fdb0a5b112ef4f64a', class: clsx.clsx("dso-badge", { [`badge-${this.status}`]: this.status }) }, index.h("slot", { key: 'ae55685d1706abc5a00556208a6f2173ea1c9fbc' })));
+        return (index.h("span", { key: 'ff267eb954bb8bb4a2aac75a8a71854bb707975c', class: clsx.clsx("dso-badge", { [`badge-${this.status}`]: this.status }) }, index.h("slot", { key: '43595a69b2cf8e3e7d7b2c7cd8b95b7d472082dd' })));
     }
 };
 Badge.style = DsoBadgeStyle0;
@@ -1225,7 +1232,7 @@ const OzonContent = class {
             emitAnchorClick: this.dsoAnchorClick.emit,
         };
         const transformed = mapper.transform(this.content, context);
-        return index.h(index.Fragment, { key: '04d4b101ea397405cce6dc6626fcf76a2e9eb5c0' }, transformed);
+        return index.h(index.Fragment, { key: 'b92775a87afc27cff81462dc3778a5cbf41f4ee5' }, transformed);
     }
     static get watchers() { return {
         "content": ["contentWatcher"]
@@ -1299,7 +1306,7 @@ const Table = class {
     render() {
         var _a, _b;
         const caption = (_b = (_a = this.host.querySelector(":scope > table > caption")) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim();
-        return (index.h(index.Host, { key: 'fc92288fe7d379ec8b56dbb49931b023a1aa669c' }, this.modalActive && this.placeholderHeight && (index.h("div", { key: '651f19822424b8385f4854840100fceb3b6819ca', class: "dso-table-placeholder", style: { height: `${this.placeholderHeight}px` } })), this.modalActive && index.h("div", { key: '80c8515444552216f26e5733d2c928cc4c7b3822', class: "dso-modal-overlay" }), index.h("div", { key: '82f023fb532ebbe9b8192229d5db55e555ec5f93', class: { "dso-modal": this.modalActive } }, index.h("div", Object.assign({ key: 'b150734ceb13ddfa0ff8412961917869273c7c34', class: { "dso-dialog": this.modalActive, "dso-table-dialog": true }, ref: (element) => (this.focusTrapElement = element) }, (this.modalActive ? { ["aria-labelledby"]: this.labelledbyId, role: "dialog" } : {})), (this.isResponsive || !this.noModal) && (index.h("div", { key: '35c156e2e76ebee21a56700e0265bb2e0270b69c', class: "dso-table-utilities", style: this.modalActive ? { display: "none" } : undefined }, this.isResponsive && (index.h("div", { key: '49984412ae1616077b9934babd0e2b3bc518d151', class: "dso-responsive-message" }, index.h("span", { key: '6ed229941d728f12a068b489534e41b60e2b4ff9' }, "beweeg de tabel van links naar rechts"))), !this.noModal && (index.h("button", { key: '2f412f2795b0410883f975721e51ebebf1dddcc5', type: "button", class: "dso-tertiary open-modal-button", ref: (element) => (this.buttonElement = element), onClick: () => this.openModal() }, index.h("span", { key: '2332690378cead455b420576bf9cd5f68d993278', class: "sr-only" }, "tabel ", caption !== null && caption !== void 0 ? caption : "", " "), index.h("span", { key: '90351eded6efd138705cf08bfadc6ee9109a0e69' }, "vergroten"), index.h("dso-icon", { key: 'd314dfede218f9258a3ca2e109c6e93dfde97b81', icon: "external-link" }))))), this.modalActive && (index.h("div", { key: '05890549bb56488890bc886989b524bdeed073d4', class: "dso-header" }, index.h("h2", { key: '271ad27174b676b41cb20de4c1f579e999b61ce0', id: this.labelledbyId, class: { "sr-only": !caption } }, caption || "Uitvergrote tabel dialoog"), index.h("button", { key: 'd42b834be57bb606eeb52f68ef8a5f23bf4b2668', type: "button", class: "dso-close", onClick: () => this.closeModal() }, index.h("dso-icon", { key: '947a77978e4b53e615a1f785721b4bb7e615d120', icon: "times" }), index.h("span", { key: 'e19dd743a47fc7df5ab9a6b3fd9bf8ba5cb0cff8', class: "sr-only" }, "Sluiten")))), index.h("div", { key: '30f4d60debabc4919fbd4350ad3fa750da006936', class: { "dso-body": this.modalActive, "dso-table-body": true } }, index.h("slot", { key: '084aec8bb7315257e20414361124419ef555201c' }))))));
+        return (index.h(index.Host, { key: '938a684ea916f6b2bfb741ad8ea1a07ee2b800a1' }, this.modalActive && this.placeholderHeight && (index.h("div", { key: 'b4215b34413a54a9715810c71400cebbd262c72f', class: "dso-table-placeholder", style: { height: `${this.placeholderHeight}px` } })), this.modalActive && index.h("div", { key: 'f7b9e6d0d60b7395dea511fbfff066ea78d0ac2d', class: "dso-modal-overlay" }), index.h("div", { key: 'ee15e6948a5c45cec6ebcc20b96886690568b846', class: { "dso-modal": this.modalActive } }, index.h("div", Object.assign({ key: 'bbd957170c048e6511659370abb231733de3b304', class: { "dso-dialog": this.modalActive, "dso-table-dialog": true }, ref: (element) => (this.focusTrapElement = element) }, (this.modalActive ? { ["aria-labelledby"]: this.labelledbyId, role: "dialog" } : {})), (this.isResponsive || !this.noModal) && (index.h("div", { key: 'ef992251b2c61f5d39c07671a505b261778cd802', class: "dso-table-utilities", style: this.modalActive ? { display: "none" } : undefined }, this.isResponsive && (index.h("div", { key: '7353c51b91d45764a2c1554e11b88554562622f7', class: "dso-responsive-message" }, index.h("span", { key: 'fa2859739ccfd5d2feade45fb6b146589422176b' }, "beweeg de tabel van links naar rechts"))), !this.noModal && (index.h("button", { key: '6238fab58ee5d1ca1544704baa799ec87f2759a4', type: "button", class: "dso-tertiary open-modal-button", ref: (element) => (this.buttonElement = element), onClick: () => this.openModal() }, index.h("span", { key: '0a65833cee370dd7b74453758963070d29c315bb', class: "sr-only" }, "tabel ", caption !== null && caption !== void 0 ? caption : "", " "), index.h("span", { key: '7de772f54616cc4723e92eb98933f4d55937bcd6' }, "vergroten"), index.h("dso-icon", { key: 'bc085946ea5591a3b9c6ee5cd8cb9bd352182283', icon: "external-link" }))))), this.modalActive && (index.h("div", { key: '2d2505608302cda259d9e51ef5f98d8ceebf292f', class: "dso-header" }, index.h("h2", { key: '2e7269709c803dc248300ca87555f3589ada73b8', id: this.labelledbyId, class: { "sr-only": !caption } }, caption || "Uitvergrote tabel dialoog"), index.h("button", { key: 'bc26e2181aaaa38b9d200aeb044250717cc78880', type: "button", class: "dso-close", onClick: () => this.closeModal() }, index.h("dso-icon", { key: '79707874e61cb4f5cd0bfe800946e70719efcd9b', icon: "times" }), index.h("span", { key: '3a552318df143dd8d91342d767417d05ce27d95b', class: "sr-only" }, "Sluiten")))), index.h("div", { key: 'e05e8573d30faf5102f3593ee0d32416f2212d65', class: { "dso-body": this.modalActive, "dso-table-body": true } }, index.h("slot", { key: '9d31d8f0dc6567feba03c67c4397935d2a853367' }))))));
     }
     openModal() {
         this.placeholderHeight = this.host.clientHeight;