@dso-toolkit/core 88.1.1 → 90.0.0

package/dist/components/dso-map-layer-object.js

@@ -1,56 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host, transformTag } from '@stencil/core/internal/client';
-import { d as defineCustomElement$2 } from './slide-toggle.js';
-
-const mapLayerObjectCss = () => `:host{display:block}*,*::after,*::before{box-sizing:border-box}::slotted(span[slot=symbol]){background-color:#fff;display:block;float:inline-start;block-size:26px;margin-block-start:0;margin-inline-end:8px;inline-size:30px;overflow:hidden;position:relative}.map-layer-object{display:flex;justify-content:space-between;min-block-size:32px}.slide-toggle-container{margin-inline-start:auto}.slide-toggle-container dso-slide-toggle{display:flex;padding-block-start:0}`;
-
-const MapLayerObject = /*@__PURE__*/ proxyCustomElement(class MapLayerObject extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.dsoActiveChange = createEvent(this, "dsoActiveChange", 7);
-        this.dsoMouseEnter = createEvent(this, "dsoMouseEnter", 7);
-        this.dsoMouseLeave = createEvent(this, "dsoMouseLeave", 7);
-        this.handleActiveChange = (event) => {
-            this.dsoActiveChange.emit({
-                current: Boolean(this.active),
-                next: !this.active,
-                originalEvent: event,
-            });
-        };
-    }
-    render() {
-        return (h(Host, { key: 'abbab8b3e9cb63d0041ebd6cd55853e8f2336db5', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: 'd9d9593bdb8b5f92c21ca71282a146d99b9e96ed', class: "map-layer-object" }, h("div", { key: '24dad3d78d29f548a248e6ebe1a3082bb4d26890' }, h("slot", { key: '68c1ba383c8d62e5ba00eeb22f29c0955bab3411', name: "symbol" })), h("div", { key: '85810dcbd6771202fb7615bb550a862321f1a408' }, h("slot", { key: 'e00fd66d88a87d2451f1f53c9fc36c67e16fc1b0' })), h("div", { key: '5a37b2b10e6c954df2cc586a349b34ebff58af63', class: "slide-toggle-container" }, h("dso-slide-toggle", { key: 'b03e87e9317e7b0e90853621cd6b8a538d430fe3', accessibleLabel: "Toon op kaart", checked: this.active, onDsoActiveChange: this.handleActiveChange })))));
-    }
-    static get style() { return mapLayerObjectCss(); }
-}, [257, "dso-map-layer-object", {
-        "active": [516]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["dso-map-layer-object", "dso-slide-toggle"];
-    components.forEach(tagName => { switch (tagName) {
-        case "dso-map-layer-object":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), MapLayerObject);
-            }
-            break;
-        case "dso-slide-toggle":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const DsoMapLayerObject = MapLayerObject;
-const defineCustomElement = defineCustomElement$1;
-
-export { DsoMapLayerObject, defineCustomElement };
-//# sourceMappingURL=dso-map-layer-object.js.map
-
-//# sourceMappingURL=dso-map-layer-object.js.map
+import{proxyCustomElement as e,HTMLElement as t,createEvent as s,h as o,Host as i,transformTag as a}from"@stencil/core/internal/client";import{d as c}from"./slide-toggle.js";const d=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.dsoActiveChange=s(this,"dsoActiveChange",7),this.dsoMouseEnter=s(this,"dsoMouseEnter",7),this.dsoMouseLeave=s(this,"dsoMouseLeave",7),this.handleActiveChange=e=>{this.dsoActiveChange.emit({current:!!this.active,next:!this.active,originalEvent:e})}}render(){return o(i,{key:"d812f5ba8708110c9d986f123f478a5d63cc0271",onMouseEnter:()=>this.dsoMouseEnter.emit(),onMouseLeave:()=>this.dsoMouseLeave.emit()},o("div",{key:"ff9db71019f91053ebf1b1d785510de5454d2297",class:"map-layer-object"},o("div",{key:"e15f4daf6fef5078740599a41b62b036d4af8370"},o("slot",{key:"bfef26c39d1abf70861d7a0c29fb330cca3ccbba",name:"symbol"})),o("div",{key:"444fde34bd30da4bc409d1c2927cb02a40b0105e"},o("slot",{key:"c8439da5b433f0fd19c5273375ff15703db13b59"})),o("div",{key:"34bd256becd63973780d995a5c93d3c2cd64a571",class:"slide-toggle-container"},o("dso-slide-toggle",{key:"9d6bf04f9c76ff69ce4c6f09b502de1f2e61fb35",accessibleLabel:"Toon op kaart",checked:this.active,onDsoActiveChange:this.handleActiveChange}))))}static get style(){return":host{display:block}*,*::after,*::before{box-sizing:border-box}::slotted(span[slot=symbol]){background-color:#fff;display:block;float:inline-start;block-size:26px;margin-block-start:0;margin-inline-end:8px;inline-size:30px;overflow:hidden;position:relative}.map-layer-object{display:flex;justify-content:space-between;min-block-size:32px}.slide-toggle-container{margin-inline-start:auto}.slide-toggle-container dso-slide-toggle{display:flex;padding-block-start:0}"}},[257,"dso-map-layer-object",{active:[516]}]),l=d,n=function(){"undefined"!=typeof customElements&&["dso-map-layer-object","dso-slide-toggle"].forEach((e=>{switch(e){case"dso-map-layer-object":customElements.get(a(e))||customElements.define(a(e),d);break;case"dso-slide-toggle":customElements.get(a(e))||c()}}))};export{l as DsoMapLayerObject,n as defineCustomElement}

package/dist/components/dso-map-layer.js

@@ -1,61 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Fragment, transformTag } from '@stencil/core/internal/client';
-import { d as defineCustomElement$2 } from './slide-toggle.js';
-
-const mapLayerCss = () => `:host{display:block}*,*::after,*::before{box-sizing:border-box}.map-layer{display:flex;justify-content:space-between;min-block-size:32px}.map-layer-label{font-weight:600;line-height:1.375em;margin:0;position:relative}.slide-toggle-container dso-slide-toggle{display:flex;padding-block-start:0}`;
-
-const MapLayer = /*@__PURE__*/ proxyCustomElement(class MapLayer extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.dsoActiveChange = createEvent(this, "dsoActiveChange", 7);
-        /**
-         * A boolean to indicate if the Map Layer is capable of being activated. When `true` a Slide Toggle displays
-         * on the right.
-         */
-        this.activatable = false;
-        this.handleActiveChange = (event) => {
-            this.dsoActiveChange.emit({
-                current: Boolean(this.active),
-                next: !this.active,
-                originalEvent: event,
-            });
-        };
-    }
-    render() {
-        return (h(Fragment, { key: 'ed6e45673c12d5eaa514e127d2e34515ab6bb701' }, h("div", { key: 'a1da54462631982faf426df2099e2a411b42a588', class: "map-layer" }, h("span", { key: '0c39e1c825b41a9deed3c19b06c128f44f7e0bd9', class: "map-layer-label" }, this.label), this.activatable && (h("div", { key: '4640edadd61211dd0d2f5af36962fb46ae03a743', class: "slide-toggle-container" }, h("dso-slide-toggle", { key: '4d15f98adc1fc862d021bb2ead9cc4faf5058c1c', accessibleLabel: "Toon op kaart", checked: this.active, onDsoActiveChange: this.handleActiveChange })))), h("slot", { key: 'b1e8e126d7e71198e44101f4957638ce9855b470' })));
-    }
-    static get style() { return mapLayerCss(); }
-}, [257, "dso-map-layer", {
-        "label": [513],
-        "activatable": [516],
-        "active": [516]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["dso-map-layer", "dso-slide-toggle"];
-    components.forEach(tagName => { switch (tagName) {
-        case "dso-map-layer":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), MapLayer);
-            }
-            break;
-        case "dso-slide-toggle":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const DsoMapLayer = MapLayer;
-const defineCustomElement = defineCustomElement$1;
-
-export { DsoMapLayer, defineCustomElement };
-//# sourceMappingURL=dso-map-layer.js.map
-
-//# sourceMappingURL=dso-map-layer.js.map
+import{proxyCustomElement as e,HTMLElement as t,createEvent as s,h as a,Fragment as i,transformTag as l}from"@stencil/core/internal/client";import{d as c}from"./slide-toggle.js";const o=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.dsoActiveChange=s(this,"dsoActiveChange",7),this.activatable=!1,this.handleActiveChange=e=>{this.dsoActiveChange.emit({current:!!this.active,next:!this.active,originalEvent:e})}}render(){return a(i,{key:"8e434d14e63f2be25d7d5fb550b2f3771cc5588b"},a("div",{key:"9273b1af907bcef6a7ea79df2500dfecc9c3e68d",class:"map-layer"},a("span",{key:"c69991fd320f5c550cf76d667bf39a1d38c540e0",class:"map-layer-label"},this.label),this.activatable&&a("div",{key:"355e2e7c976951b61266efca342d68d78f8c545b",class:"slide-toggle-container"},a("dso-slide-toggle",{key:"bf454dc6e04968053b367b58cf41051949c26a84",accessibleLabel:"Toon op kaart",checked:this.active,onDsoActiveChange:this.handleActiveChange}))),a("slot",{key:"2b8a023f22f182501e52c9fb8ff0ab7e08c169d0"}))}static get style(){return":host{display:block}*,*::after,*::before{box-sizing:border-box}.map-layer{display:flex;justify-content:space-between;min-block-size:32px}.map-layer-label{font-weight:600;line-height:1.375em;margin:0;position:relative}.slide-toggle-container dso-slide-toggle{display:flex;padding-block-start:0}"}},[257,"dso-map-layer",{label:[513],activatable:[516],active:[516]}]),d=o,n=function(){"undefined"!=typeof customElements&&["dso-map-layer","dso-slide-toggle"].forEach((e=>{switch(e){case"dso-map-layer":customElements.get(l(e))||customElements.define(l(e),o);break;case"dso-slide-toggle":customElements.get(l(e))||c()}}))};export{d as DsoMapLayer,n as defineCustomElement}

package/dist/components/dso-map-overlays.js

@@ -1,116 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, transformTag } from '@stencil/core/internal/client';
-import { i as i18n } from './i18n.js';
-import { d as defineCustomElement$7 } from './icon.js';
-import { d as defineCustomElement$6 } from './icon-button.js';
-import { d as defineCustomElement$5 } from './info.js';
-import { d as defineCustomElement$4 } from './info-button.js';
-import { d as defineCustomElement$3 } from './scrollable.js';
-import { d as defineCustomElement$2 } from './selectable.js';
-import { v as v4 } from './v4.js';
-
-const translations = {
-    en: {
-        "dso-map-overlays": {
-            title: "Maplayers",
-        },
-    },
-    nl: {
-        "dso-map-overlays": {
-            title: "Kaartlagen",
-        },
-    },
-};
-
-const mapOverlaysCss = () => `:host{display:block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:rect(0 0 0 0)}fieldset{border:0;margin:0;min-inline-size:0;padding:0}fieldset .control-label{display:inline-block;font-weight:bold;margin-block-end:8px;max-inline-size:100%;text-align:start}p[slot=info]{margin:0}`;
-
-const MapOverlays = /*@__PURE__*/ proxyCustomElement(class MapOverlays extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.dsoToggleOverlay = createEvent(this, "dsoToggleOverlay", 7);
-        this.selectableRefs = {};
-        /**
-         * To group the overlays together. Generally the default value suffices.
-         */
-        this.group = v4();
-        this.text = i18n(() => this.host, translations);
-    }
-    overlayChangeHandler(overlay, e) {
-        const { checked } = e.detail;
-        this.dsoToggleOverlay.emit({ overlay, checked });
-    }
-    componentDidRender() {
-        this.overlays
-            .filter((o) => { var _a, _b; return !o.disabled && ((_b = (_a = this.previousOverlays) === null || _a === void 0 ? void 0 : _a.find((p) => p.id === o.id)) === null || _b === void 0 ? void 0 : _b.disabled) === true; })
-            .forEach((o) => {
-            var _a;
-            (_a = this.selectableRefs[o.id]) === null || _a === void 0 ? void 0 : _a.toggleInfo(false);
-        });
-        this.previousOverlays = this.overlays;
-    }
-    render() {
-        for (const ref in this.selectableRefs) {
-            delete this.selectableRefs[ref];
-        }
-        return (h("fieldset", { key: '1d387606665b5f613e03213baa6f9cedccc255f7', class: "form-group dso-checkboxes" }, h("legend", { key: 'c6b0d884800bce02659dd7c59363e5b342523674', class: "sr-only" }, "Kaartlagen"), h("div", { key: '36c824ed776f75c715be5498837ab62b3d17f143', class: "dso-label-container" }, h("span", { key: '4c1e9360d0debbfc13fac06d6063a88d4790449f', class: "control-label", "aria-hidden": "true" }, this.text("title"))), h("div", { key: '1742c9e431ffa4c92f81a5df1ac37a80600fae5c', class: "dso-field-container" }, this.overlays.map((overlay) => (h("dso-selectable", { key: overlay.id, type: "checkbox", value: overlay.name, checked: overlay.checked, disabled: overlay.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[overlay.id] = ref), onDsoChange: (e) => this.overlayChangeHandler(overlay, e) }, overlay.name, overlay.info ? h("p", { slot: "info" }, overlay.info) : null))))));
-    }
-    get host() { return this; }
-    static get style() { return mapOverlaysCss(); }
-}, [257, "dso-map-overlays", {
-        "group": [1],
-        "overlays": [16]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["dso-map-overlays", "dso-icon", "dso-icon-button", "dso-info", "dso-info-button", "dso-scrollable", "dso-selectable"];
-    components.forEach(tagName => { switch (tagName) {
-        case "dso-map-overlays":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), MapOverlays);
-            }
-            break;
-        case "dso-icon":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$7();
-            }
-            break;
-        case "dso-icon-button":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$6();
-            }
-            break;
-        case "dso-info":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$5();
-            }
-            break;
-        case "dso-info-button":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$4();
-            }
-            break;
-        case "dso-scrollable":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$3();
-            }
-            break;
-        case "dso-selectable":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const DsoMapOverlays = MapOverlays;
-const defineCustomElement = defineCustomElement$1;
-
-export { DsoMapOverlays, defineCustomElement };
-//# sourceMappingURL=dso-map-overlays.js.map
-
-//# sourceMappingURL=dso-map-overlays.js.map
+import{proxyCustomElement as e,HTMLElement as s,createEvent as o,h as t,transformTag as i}from"@stencil/core/internal/client";import{i as a}from"./i18n.js";import{d as n}from"./icon.js";import{d as l}from"./icon-button.js";import{d as r}from"./info.js";import{d}from"./info-button.js";import{d as c}from"./scrollable.js";import{d as m}from"./selectable.js";import{v as b}from"./v4.js";const f={en:{"dso-map-overlays":{title:"Maplayers"}},nl:{"dso-map-overlays":{title:"Kaartlagen"}}},h=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.dsoToggleOverlay=o(this,"dsoToggleOverlay",7),this.selectableRefs={},this.group=b(),this.text=a((()=>this.host),f)}overlayChangeHandler(e,s){const{checked:o}=s.detail;this.dsoToggleOverlay.emit({overlay:e,checked:o})}componentDidRender(){this.overlays.filter((e=>!e.disabled&&!0===this.previousOverlays?.find((s=>s.id===e.id))?.disabled)).forEach((e=>{this.selectableRefs[e.id]?.toggleInfo(!1)})),this.previousOverlays=this.overlays}render(){for(const e in this.selectableRefs)delete this.selectableRefs[e];return t("fieldset",{key:"bb7844b7351e6563b9629728d5b8539940a53170",class:"form-group dso-checkboxes"},t("legend",{key:"13449624313a5067587666ced786396c5af1a1a2",class:"sr-only"},"Kaartlagen"),t("div",{key:"8eaa6f4f70660ede7f3c32f790882d46d3e61185",class:"dso-label-container"},t("span",{key:"addb11d20ad0516a654fd70732298f5edbbfb2e6",class:"control-label","aria-hidden":"true"},this.text("title"))),t("div",{key:"3e0b4fe1816d8c6620f206bc8802728d66c73d95",class:"dso-field-container"},this.overlays.map((e=>t("dso-selectable",{key:e.id,type:"checkbox",value:e.name,checked:e.checked,disabled:e.disabled,name:this.group,ref:s=>s&&(this.selectableRefs[e.id]=s),onDsoChange:s=>this.overlayChangeHandler(e,s)},e.name,e.info?t("p",{slot:"info"},e.info):null)))))}get host(){return this}static get style(){return":host{display:block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:rect(0 0 0 0)}fieldset{border:0;margin:0;min-inline-size:0;padding:0}fieldset .control-label{display:inline-block;font-weight:bold;margin-block-end:8px;max-inline-size:100%;text-align:start}p[slot=info]{margin:0}"}},[1,"dso-map-overlays",{group:[1],overlays:[16]}]),p=h,u=function(){"undefined"!=typeof customElements&&["dso-map-overlays","dso-icon","dso-icon-button","dso-info","dso-info-button","dso-scrollable","dso-selectable"].forEach((e=>{switch(e){case"dso-map-overlays":customElements.get(i(e))||customElements.define(i(e),h);break;case"dso-icon":customElements.get(i(e))||n();break;case"dso-icon-button":customElements.get(i(e))||l();break;case"dso-info":customElements.get(i(e))||r();break;case"dso-info-button":customElements.get(i(e))||d();break;case"dso-scrollable":customElements.get(i(e))||c();break;case"dso-selectable":customElements.get(i(e))||m()}}))};export{p as DsoMapOverlays,u as defineCustomElement}

package/dist/components/dso-mark-bar.js

@@ -1,99 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, transformTag } from '@stencil/core/internal/client';
-import { d as defineCustomElement$3 } from './icon.js';
-import { d as defineCustomElement$2 } from './icon-button.js';
-
-const markBarCss = () => `*,*::after,*::before{box-sizing:border-box}:host{display:block;background-color:#fff}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:rect(0 0 0 0)}.dso-mark-bar{display:flex;flex-grow:1}.dso-mark-bar .dso-mark-bar-input{display:flex;position:relative;inline-size:100%}.dso-mark-bar .dso-mark-bar-input input{background-color:transparent;background-image:none;border:1px solid #275937;border-radius:4px;box-shadow:none;display:block;font-size:1rem;block-size:2.5rem;line-height:2.5rem;padding-inline:2.5rem;padding-block:6px;transition:border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;inline-size:100%;border-start-end-radius:0;border-end-end-radius:0;border-inline-end:0}.dso-mark-bar .dso-mark-bar-input input:focus{border-color:#275937;box-shadow:inset 0 0 0 1px #275937;outline:0}.dso-mark-bar .dso-mark-bar-input input::-ms-clear{display:none}.dso-mark-bar .dso-mark-bar-input input:not(:placeholder-shown)+label{inline-size:2.5rem;padding-inline-end:8px}.dso-mark-bar .dso-mark-bar-input input:not(:placeholder-shown)+label .label-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:rect(0 0 0 0)}.dso-mark-bar .dso-mark-bar-input label{inset-block-end:8px;block-size:2.5rem;inset-inline-start:0;inset-inline-end:40px;padding-block:8px;padding-inline-start:8px;cursor:text;position:absolute;inset-block-start:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.dso-mark-bar .dso-mark-bar-input label dso-icon{color:#39870c;cursor:default;margin:-8px;padding:8px;inline-size:2.5rem;block-size:2.5rem}.dso-mark-bar .dso-mark-bar-input label .label-text{margin-inline-start:8px;color:#666}.dso-mark-bar .dso-mark-bar-input dso-icon-button{position:absolute;inset-inline-end:8px;inset-block-start:8px}.dso-button-container{position:relative;display:flex;align-items:center;gap:8px;flex-shrink:0;padding-inline:8px;border:1px solid #275937;border-inline-start:0;border-start-end-radius:4px;border-end-end-radius:4px}.dso-button-container dso-icon-button{--dso-icon-button-tertiary-border:0;cursor:pointer}.dso-button-container dso-icon-button:disabled{color:#ccc;cursor:default}.dso-button-container .divider{position:absolute;inset-inline-start:0;inset-block-start:8px;inset-block-end:8px;inline-size:1px;background-color:#ccc}`;
-
-const MarkBar = /*@__PURE__*/ proxyCustomElement(class MarkBar extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.dsoInput = createEvent(this, "dsoInput", 3);
-        this.dsoNext = createEvent(this, "dsoNext", 3);
-        this.dsoPrevious = createEvent(this, "dsoPrevious", 3);
-        this.dsoClear = createEvent(this, "dsoClear", 3);
-        /**
-         * The label for the input field.
-         */
-        this.label = "Zoeken in document";
-        this.handleInput = (e) => {
-            if (!(e.target instanceof HTMLInputElement)) {
-                return;
-            }
-            this.dsoInput.emit({
-                originalEvent: e,
-                value: e.target.value,
-            });
-        };
-        this.handleNext = (originalEvent) => {
-            this.dsoNext.emit({ originalEvent });
-        };
-        this.handlePrevious = (originalEvent) => {
-            this.dsoPrevious.emit({ originalEvent });
-        };
-        this.handleClear = (originalEvent) => {
-            this.dsoClear.emit({ originalEvent });
-        };
-        this.handleKeyDown = (e) => {
-            if (e.key === "Enter") {
-                this.handleNext(e);
-            }
-        };
-    }
-    /**
-     * Focuses the input field.
-     */
-    async dsoFocus(options = {}) {
-        var _a, _b;
-        (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus();
-        if (options.select) {
-            (_b = this.inputElement) === null || _b === void 0 ? void 0 : _b.select();
-        }
-    }
-    render() {
-        const current = this.current || 0;
-        const totalCount = this.totalCount || 0;
-        return (h("div", { key: '6355f83f24135af1b661720078f56bd2f994c492', class: "dso-mark-bar" }, h("div", { key: '2f53185bbb4d85112fc802776af57579c3ffd058', class: "dso-mark-bar-input" }, h("input", { key: '087bc8407629628122fdc25365d0cf71eedcbc20', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: '18b2f104a66fbe30011509269dd16942572593a0', htmlFor: "search-input" }, h("dso-icon", { key: '8016f522e25f135811374f3ecceb5d02d4b33759', class: "dso-search-icon", icon: "search" }), h("span", { key: '14f044b9d6e5f601eaa1168ed7c2af4573339542', class: "label-text" }, this.label)), h("dso-icon-button", { key: 'e211e04b48ecd461a8a292f6f391c52c7e5d2ce2', icon: "times", variant: "tertiary", label: "Zoekopdracht legen", onDsoClick: (e) => this.handleClear(e.detail.originalEvent) })), h("div", { key: '3712d7f4eca1fa881d8c14f5ba92a5744ef9df65', class: "dso-button-container" }, h("span", { key: '4178d20c62601ebac4965693cfb11ad0c3023d4c', class: "divider" }), h("dso-icon-button", { key: '707467f4b526da1e26c47171c129332541ac5eec', icon: "chevron-up", variant: "tertiary", label: "Vorig zoekresultaat", onDsoClick: (e) => this.handlePrevious(e.detail.originalEvent), disabled: current <= 1 }), h("span", { key: 'f95e03b543ed91d349aa4bb2008feec68bbc857e' }, current, "/", totalCount), h("dso-icon-button", { key: '5ef4b0333e5098ce8b8d6b197c03d4bfc4467a2c', icon: "chevron-down", variant: "tertiary", label: "Volgend zoekresultaat", onDsoClick: (e) => this.handleNext(e.detail.originalEvent), disabled: current >= totalCount }))));
-    }
-    static get style() { return markBarCss(); }
-}, [257, "dso-mark-bar", {
-        "value": [1],
-        "label": [1],
-        "current": [2],
-        "totalCount": [2, "total-count"],
-        "dsoFocus": [64]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["dso-mark-bar", "dso-icon", "dso-icon-button"];
-    components.forEach(tagName => { switch (tagName) {
-        case "dso-mark-bar":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), MarkBar);
-            }
-            break;
-        case "dso-icon":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$3();
-            }
-            break;
-        case "dso-icon-button":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const DsoMarkBar = MarkBar;
-const defineCustomElement = defineCustomElement$1;
-
-export { DsoMarkBar, defineCustomElement };
-//# sourceMappingURL=dso-mark-bar.js.map
-
-//# sourceMappingURL=dso-mark-bar.js.map
+import{proxyCustomElement as e,HTMLElement as o,createEvent as i,h as n,transformTag as t}from"@stencil/core/internal/client";import{d as s}from"./icon.js";import{d as a}from"./icon-button.js";const r=e(class extends o{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.dsoInput=i(this,"dsoInput",3),this.dsoNext=i(this,"dsoNext",3),this.dsoPrevious=i(this,"dsoPrevious",3),this.dsoClear=i(this,"dsoClear",3),this.label="Zoeken in document",this.handleInput=e=>{e.target instanceof HTMLInputElement&&this.dsoInput.emit({originalEvent:e,value:e.target.value})},this.handleNext=e=>{this.dsoNext.emit({originalEvent:e})},this.handlePrevious=e=>{this.dsoPrevious.emit({originalEvent:e})},this.handleClear=e=>{this.dsoClear.emit({originalEvent:e})},this.handleKeyDown=e=>{"Enter"===e.key&&this.handleNext(e)}}async dsoFocus(e={}){this.inputElement?.focus(),e.select&&this.inputElement?.select()}render(){const e=this.current||0,o=this.totalCount||0;return n("div",{key:"cfffd6bc7883c53ce3fb065abce6508b068d2dfc",class:"dso-mark-bar"},n("div",{key:"f6bf98da9d7f2a33f205c7d0943e0302384fb691",class:"dso-mark-bar-input"},n("input",{key:"c434fd1466670d749b7d80e3a025668a8d9cfbb1",type:"text",id:"search-input",value:this.value,onInput:this.handleInput,onKeyDown:this.handleKeyDown,placeholder:" ",ref:e=>this.inputElement=e}),n("label",{key:"23acca82e1d3a1db946db5037f589bb01d96bde6",htmlFor:"search-input"},n("dso-icon",{key:"9b75f757f7887adc075d918fb2817cc1f0918573",class:"dso-search-icon",icon:"search"}),n("span",{key:"18e6f09ca7b218e9f583870649a75827b1e07106",class:"label-text"},this.label)),n("dso-icon-button",{key:"426b6a00e385cd4ea1cd453647db8beaea6e3a43",icon:"cross",variant:"tertiary",label:"Zoekopdracht legen",onDsoClick:e=>this.handleClear(e.detail.originalEvent)})),n("div",{key:"3f972856bedc23484617c25e197640cd04b98f8d",class:"dso-button-container"},n("span",{key:"e7aacd63164c0fc9c44e4e4d0ddc9ccc0f6abab1",class:"divider"}),n("dso-icon-button",{key:"7a0c02f8392c1475311c7f595ed3e9c965990e00",icon:"chevron-up",variant:"tertiary",label:"Vorig zoekresultaat",onDsoClick:e=>this.handlePrevious(e.detail.originalEvent),disabled:e<=1}),n("span",{key:"d6eed5e2cae8f60a0ccaccee5881bd8b07200ba8"},e,"/",o),n("dso-icon-button",{key:"9edf1d0a5dbfcee4795213ab9dd5493c94a11159",icon:"chevron-down",variant:"tertiary",label:"Volgend zoekresultaat",onDsoClick:e=>this.handleNext(e.detail.originalEvent),disabled:e>=o})))}static get style(){return"*,*::after,*::before{box-sizing:border-box}:host{display:block;background-color:#fff}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:rect(0 0 0 0)}.dso-mark-bar{display:flex;flex-grow:1}.dso-mark-bar .dso-mark-bar-input{display:flex;position:relative;inline-size:100%}.dso-mark-bar .dso-mark-bar-input input{background-color:transparent;background-image:none;border:1px solid #275937;border-radius:4px;box-shadow:none;display:block;font-size:1rem;block-size:2.5rem;line-height:2.5rem;padding-inline:2.5rem;padding-block:6px;transition:border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;inline-size:100%;border-start-end-radius:0;border-end-end-radius:0;border-inline-end:0}.dso-mark-bar .dso-mark-bar-input input:focus{border-color:#275937;box-shadow:inset 0 0 0 1px #275937;outline:0}.dso-mark-bar .dso-mark-bar-input input::-ms-clear{display:none}.dso-mark-bar .dso-mark-bar-input input:not(:placeholder-shown)+label{inline-size:2.5rem;padding-inline-end:8px}.dso-mark-bar .dso-mark-bar-input input:not(:placeholder-shown)+label .label-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:rect(0 0 0 0)}.dso-mark-bar .dso-mark-bar-input label{inset-block-end:8px;block-size:2.5rem;inset-inline-start:0;inset-inline-end:40px;padding-block:8px;padding-inline-start:8px;cursor:text;position:absolute;inset-block-start:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.dso-mark-bar .dso-mark-bar-input label dso-icon{color:#39870c;cursor:default;margin:-8px;padding:8px;inline-size:2.5rem;block-size:2.5rem}.dso-mark-bar .dso-mark-bar-input label .label-text{margin-inline-start:8px;color:#666}.dso-mark-bar .dso-mark-bar-input dso-icon-button{position:absolute;inset-inline-end:8px;inset-block-start:8px}.dso-button-container{position:relative;display:flex;align-items:center;gap:8px;flex-shrink:0;padding-inline:8px;border:1px solid #275937;border-inline-start:0;border-start-end-radius:4px;border-end-end-radius:4px}.dso-button-container dso-icon-button{--dso-icon-button-tertiary-border:0;cursor:pointer}.dso-button-container dso-icon-button:disabled{color:#ccc;cursor:default}.dso-button-container .divider{position:absolute;inset-inline-start:0;inset-block-start:8px;inset-block-end:8px;inline-size:1px;background-color:#ccc}"}},[1,"dso-mark-bar",{value:[1],label:[1],current:[2],totalCount:[2,"total-count"],dsoFocus:[64]}]),d=r,c=function(){"undefined"!=typeof customElements&&["dso-mark-bar","dso-icon","dso-icon-button"].forEach((e=>{switch(e){case"dso-mark-bar":customElements.get(t(e))||customElements.define(t(e),r);break;case"dso-icon":customElements.get(t(e))||s();break;case"dso-icon-button":customElements.get(t(e))||a()}}))};export{d as DsoMarkBar,c as defineCustomElement}

package/dist/components/dso-modal.js

@@ -1,141 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, transformTag } from '@stencil/core/internal/client';
-import { g as getActiveElement } from './get-active-element.js';
-import { i as i18n } from './i18n.js';
-import { d as defineCustomElement$4 } from './icon.js';
-import { d as defineCustomElement$3 } from './icon-button.js';
-import { d as defineCustomElement$2 } from './scrollable.js';
-import { v as v4 } from './v4.js';
-
-const translations = {
-    en: {
-        "dso-modal": {
-            close: "Close",
-            dialog: "Dialog",
-        },
-    },
-    nl: {
-        "dso-modal": {
-            close: "Sluiten",
-            dialog: "Dialoog",
-        },
-    },
-};
-
-const modalCss = () => `@keyframes ModalFadeIn{0%{opacity:0}100%{opacity:1}}*,*::after,*::before{box-sizing:border-box}:host{display:block}:host([fullscreen]) dialog{inline-size:100dvi;block-size:100dvb}:host([fullscreen]) dialog .dso-dialog{display:flex;flex-direction:column;inline-size:100%;block-size:100%}:host([fullscreen]) dialog .dso-dialog>dso-scrollable{flex-grow:1;max-block-size:unset}:host([fullscreen]) dialog .dso-footer{flex-shrink:0}@media screen and (max-width: 480px){:host dialog{inline-size:100dvi;block-size:100dvb}:host dialog .dso-dialog{display:flex;flex-direction:column;inline-size:100%;block-size:100%}:host dialog .dso-dialog>dso-scrollable{flex-grow:1;max-block-size:unset}:host dialog .dso-footer{flex-shrink:0}}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:rect(0 0 0 0)}button{-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}button[disabled]{cursor:default}button::-moz-focus-inner{border:0;padding:0}.dso-modal{overflow:visible;padding:0;border:0}.dso-modal::backdrop{background-color:rgba(255, 255, 255, 0.8)}.dso-modal .dso-dialog{inline-size:640px;background-color:#fff;opacity:1;box-shadow:0 8px 24px 0 rgba(25, 25, 25, 0.4);animation:200ms ease-out 0s 1 ModalFadeIn}.dso-modal .dso-header{position:relative;padding:16px;border-block-end:1px solid #ccc}.dso-modal .dso-header h2{max-inline-size:calc(100% - 24px);margin:0;color:#275937}.dso-modal .dso-header .dso-close{position:absolute;inset-block-start:16px;inset-inline-end:13px;block-size:32px;inline-size:32px;padding:0;background-color:transparent;border:0;text-align:center}.dso-modal>.dso-dialog>.dso-body p{margin-block:0 var(--_dt-rich-content-margin-block, 16px);margin-inline:0}.dso-modal>.dso-dialog>.dso-body ul,.dso-modal>.dso-dialog>.dso-body ol{margin-block-end:16px}.dso-modal>.dso-dialog>.dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal>.dso-dialog>.dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal>.dso-dialog>.dso-body ul ul,.dso-modal>.dso-dialog>.dso-body ul ol,.dso-modal>.dso-dialog>.dso-body ol ul,.dso-modal>.dso-dialog>.dso-body ol ol{margin-block-end:0}.dso-modal>.dso-dialog>.dso-body pre{margin-block:0 16px;margin-inline:0}.dso-modal>.dso-dialog>.dso-body blockquote{padding-block:16px;padding-inline:24px}.dso-modal>.dso-dialog>.dso-body dso-highlight-box,.dso-modal>.dso-dialog>.dso-body .dso-highlight-box{margin-block-end:24px}.dso-modal>.dso-dialog>.dso-body img{block-size:auto;max-inline-size:100%}.dso-modal>.dso-dialog>.dso-body{block-size:calc(100% - 96px - 1.5rem);max-block-size:calc(70vh - 144px - 1.5em);min-block-size:1.5rem;overflow-x:auto;padding:32px}.dso-modal>.dso-dialog>dso-scrollable{block-size:calc(100% - 96px - 1.5rem);max-block-size:calc(70vh - 144px - 1.5em);min-block-size:6.5rem}.dso-modal>.dso-dialog>dso-scrollable .dso-body p{margin-block:0 var(--_dt-rich-content-margin-block, 16px);margin-inline:0}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul,.dso-modal>.dso-dialog>dso-scrollable .dso-body ol{margin-block-end:16px}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal>.dso-dialog>dso-scrollable .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul ul,.dso-modal>.dso-dialog>dso-scrollable .dso-body ul ol,.dso-modal>.dso-dialog>dso-scrollable .dso-body ol ul,.dso-modal>.dso-dialog>dso-scrollable .dso-body ol ol{margin-block-end:0}.dso-modal>.dso-dialog>dso-scrollable .dso-body pre{margin-block:0 16px;margin-inline:0}.dso-modal>.dso-dialog>dso-scrollable .dso-body blockquote{padding-block:16px;padding-inline:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body dso-highlight-box,.dso-modal>.dso-dialog>dso-scrollable .dso-body .dso-highlight-box{margin-block-end:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body img{block-size:auto;max-inline-size:100%}.dso-modal>.dso-dialog>dso-scrollable .dso-body{padding:32px}.dso-modal .dso-body:focus-visible{outline:none}@media screen and (max-width: 767px){.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}.dso-modal .dso-footer button{inline-size:100%;text-align:center}.dso-modal .dso-footer button+button{margin-block-start:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span{float:none}}.dso-modal .dso-footer{min-block-size:80px;padding-block:16px;padding-inline:32px;text-align:end}@media screen and (min-width: 768px){.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary{margin-inline-start:16px}.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}}@media screen and (max-width: 767px){.dso-modal .dso-dialog{max-inline-size:100%;margin-block-start:0}.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}.dso-modal .dso-footer button{inline-size:100%;text-align:center}.dso-modal .dso-footer button+button{margin-block-start:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span{float:none}}@media screen and (max-height: 380px){.dso-modal .dso-dialog{min-block-size:216px;margin-block-start:8px;margin-block-end:8px}.dso-modal .dso-header{padding-block:8px;padding-inline:16px}.dso-modal .dso-header .dso-close{inset-block-start:8px}.dso-modal .dso-body{padding-block:16px;padding-inline:24px}.dso-modal .dso-footer{min-block-size:auto;overflow:auto;padding-block:8px;padding-inline:32px}}.dso-modal .dso-header dso-icon-button{position:absolute;inset-block-start:22px;inset-inline-end:17px}`;
-
-const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.dsoClose = createEvent(this, "dsoClose", 7);
-        this.ariaId = v4();
-        /**
-         * the role for the modal `dialog` | `alert` | `alertdialog`.
-         */
-        this.dialogRole = "dialog";
-        /**
-         * The element to return focus to after the modal is closed.
-         *
-         * * `undefined` will return focus to the previously focused element (default).
-         * * `false` will not return focus to any element.
-         * * or, provide your own `HTMLElement` that will receive focus upon closing.
-         */
-        this.returnFocus = undefined;
-        /**
-         * when `false` the close button in the header will not be rendered.
-         *
-         * Needs `modalTitle` to be set.
-         */
-        this.closable = false;
-        this.text = i18n(() => this.host, translations);
-        this.blockEscapeKey = (e) => {
-            if (e.key === "Escape") {
-                e.preventDefault();
-                if (this.closable) {
-                    this.dsoClose.emit({ originalEvent: e });
-                }
-            }
-        };
-    }
-    get hasFooter() {
-        return this.host.querySelector("[slot='footer']") !== null;
-    }
-    componentDidLoad() {
-        var _a;
-        if ((_a = this.htmlDialogElement) === null || _a === void 0 ? void 0 : _a.isConnected) {
-            const activeElement = getActiveElement();
-            if (activeElement instanceof HTMLElement) {
-                this.returnFocusElement = activeElement;
-            }
-            this.htmlDialogElement.showModal();
-        }
-    }
-    disconnectedCallback() {
-        var _a, _b, _c;
-        (_a = this.htmlDialogElement) === null || _a === void 0 ? void 0 : _a.close();
-        if (this.returnFocus === false) {
-            return;
-        }
-        (_c = ((_b = this.returnFocus) !== null && _b !== void 0 ? _b : this.returnFocusElement)) === null || _c === void 0 ? void 0 : _c.focus();
-    }
-    handleDialogClick(e) {
-        if (!this.closable) {
-            return;
-        }
-        if (e.target === this.htmlDialogElement) {
-            this.dsoClose.emit({ originalEvent: e });
-        }
-    }
-    render() {
-        var _a;
-        return (h("dialog", { key: 'ef5d2276a32e11a109e4f670227077beff131794', class: "dso-modal", role: (_a = this.dialogRole) !== null && _a !== void 0 ? _a : undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.htmlDialogElement = element), onClick: (e) => this.handleDialogClick(e), onKeyDown: (e) => this.blockEscapeKey(e) }, h("div", { key: '1bc94ba3090333b0980475d9337f87d9e44e867a', class: "dso-dialog", role: "document" }, this.modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: this.ariaId }, this.modalTitle), this.closable && (h("dso-icon-button", { id: "close-modal", icon: "times", variant: "tertiary", label: this.text("close"), onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) })))) : (h("span", { class: "sr-only", id: this.ariaId }, this.text("dialog"))), h("dso-scrollable", { key: '7a1871b25a08170d03797054de351a464592723e' }, h("div", { key: '102f26f00123a6f8e58dd544bdcba29911352c9b', class: "dso-body", tabIndex: 0 }, h("slot", { key: '98a5d7680046d9e46b993d6f9c3f208d86224e1c', name: "body" }))), this.hasFooter && (h("div", { key: 'e9d1dab7323fff12723f06c418b155bbe3542f60', class: "dso-footer" }, h("slot", { key: '6182ecd6fd4bbaad51c8594d9542a06d1813c7b3', name: "footer" }))))));
-    }
-    get host() { return this; }
-    static get style() { return modalCss(); }
-}, [257, "dso-modal", {
-        "fullscreen": [516],
-        "modalTitle": [1, "modal-title"],
-        "dialogRole": [1, "dialog-role"],
-        "returnFocus": [4, "return-focus"],
-        "closable": [4],
-        "ariaId": [32]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["dso-modal", "dso-icon", "dso-icon-button", "dso-scrollable"];
-    components.forEach(tagName => { switch (tagName) {
-        case "dso-modal":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), Modal);
-            }
-            break;
-        case "dso-icon":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$4();
-            }
-            break;
-        case "dso-icon-button":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$3();
-            }
-            break;
-        case "dso-scrollable":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const DsoModal = Modal;
-const defineCustomElement = defineCustomElement$1;
-
-export { DsoModal, defineCustomElement };
-//# sourceMappingURL=dso-modal.js.map
-
-//# sourceMappingURL=dso-modal.js.map
+import{proxyCustomElement as o,HTMLElement as d,createEvent as s,h as l,transformTag as a}from"@stencil/core/internal/client";import{g as i}from"./get-active-element.js";import{i as e}from"./i18n.js";import{d as t}from"./icon.js";import{d as r}from"./icon-button.js";import{d as n}from"./scrollable.js";import{v as c}from"./v4.js";const m={en:{"dso-modal":{close:"Close",dialog:"Dialog"}},nl:{"dso-modal":{close:"Sluiten",dialog:"Dialoog"}}},b=o(class extends d{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.dsoClose=s(this,"dsoClose",7),this.ariaId=c(),this.dialogRole="dialog",this.returnFocus=void 0,this.closable=!1,this.text=e((()=>this.host),m),this.blockEscapeKey=o=>{"Escape"===o.key&&(o.preventDefault(),this.closable&&this.dsoClose.emit({originalEvent:o}))}}get hasFooter(){return null!==this.host.querySelector("[slot='footer']")}componentDidLoad(){if(this.htmlDialogElement?.isConnected){const o=i();o instanceof d&&(this.returnFocusElement=o),this.htmlDialogElement.showModal()}}disconnectedCallback(){this.htmlDialogElement?.close(),!1!==this.returnFocus&&(this.returnFocus??this.returnFocusElement)?.focus()}handleDialogClick(o){this.closable&&o.target===this.htmlDialogElement&&this.dsoClose.emit({originalEvent:o})}render(){return l("dialog",{key:"ca65d36b4cad14a8be28a2b80c3e4adfd6f04b8b",class:"dso-modal",role:this.dialogRole??void 0,"aria-modal":"true","aria-labelledby":this.ariaId,ref:o=>this.htmlDialogElement=o,onClick:o=>this.handleDialogClick(o),onKeyDown:o=>this.blockEscapeKey(o)},l("div",{key:"25e259f6c951ebba5bdebe46c5400b0678a438fb",class:"dso-dialog",role:"document"},this.modalTitle?l("div",{class:"dso-header"},l("h2",{id:this.ariaId},this.modalTitle),this.closable&&l("dso-icon-button",{id:"close-modal",icon:"cross",variant:"tertiary",label:this.text("close"),onDsoClick:o=>this.dsoClose.emit({originalEvent:o})})):l("span",{class:"sr-only",id:this.ariaId},this.text("dialog")),l("dso-scrollable",{key:"1f4da352eda8e827ba63a1f7fa3ea90c983a2e81"},l("div",{key:"4320cefc274fadee304e24b21799b797b6bdf201",class:"dso-body",tabIndex:0},l("slot",{key:"4bf3772a1a9b993b3a71987b332d84218a7bd1fc",name:"body"}))),this.hasFooter&&l("div",{key:"8121eab70c72f57d9913b82a90d3b06b6cac4b43",class:"dso-footer"},l("slot",{key:"9a164d445fe34a302b62b53ee9227c2cad3029e6",name:"footer"}))))}get host(){return this}static get style(){return"@keyframes ModalFadeIn{0%{opacity:0}100%{opacity:1}}*,*::after,*::before{box-sizing:border-box}:host{display:block}:host([fullscreen]) dialog{inline-size:100dvi;block-size:100dvb}:host([fullscreen]) dialog .dso-dialog{display:flex;flex-direction:column;inline-size:100%;block-size:100%}:host([fullscreen]) dialog .dso-dialog>dso-scrollable{flex-grow:1;max-block-size:unset}:host([fullscreen]) dialog .dso-footer{flex-shrink:0}@media screen and (max-width: 480px){:host dialog{inline-size:100dvi;block-size:100dvb}:host dialog .dso-dialog{display:flex;flex-direction:column;inline-size:100%;block-size:100%}:host dialog .dso-dialog>dso-scrollable{flex-grow:1;max-block-size:unset}:host dialog .dso-footer{flex-shrink:0}}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:rect(0 0 0 0)}button{-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}button[disabled]{cursor:default}button::-moz-focus-inner{border:0;padding:0}.dso-modal{overflow:visible;padding:0;border:0}.dso-modal::backdrop{background-color:rgba(255, 255, 255, 0.8)}.dso-modal .dso-dialog{inline-size:640px;background-color:#fff;opacity:1;box-shadow:0 8px 24px 0 rgba(25, 25, 25, 0.4);animation:200ms ease-out 0s 1 ModalFadeIn}.dso-modal .dso-header{position:relative;padding:16px;border-block-end:1px solid #ccc}.dso-modal .dso-header h2{max-inline-size:calc(100% - 24px);margin:0;color:#275937}.dso-modal .dso-header .dso-close{position:absolute;inset-block-start:16px;inset-inline-end:13px;block-size:32px;inline-size:32px;padding:0;background-color:transparent;border:0;text-align:center}.dso-modal>.dso-dialog>.dso-body p{margin-block:0 var(--_dt-rich-content-margin-block, 16px);margin-inline:0}.dso-modal>.dso-dialog>.dso-body ul,.dso-modal>.dso-dialog>.dso-body ol{margin-block-end:16px}.dso-modal>.dso-dialog>.dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal>.dso-dialog>.dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal>.dso-dialog>.dso-body ul ul,.dso-modal>.dso-dialog>.dso-body ul ol,.dso-modal>.dso-dialog>.dso-body ol ul,.dso-modal>.dso-dialog>.dso-body ol ol{margin-block-end:0}.dso-modal>.dso-dialog>.dso-body pre{margin-block:0 16px;margin-inline:0}.dso-modal>.dso-dialog>.dso-body blockquote{padding-block:16px;padding-inline:24px}.dso-modal>.dso-dialog>.dso-body dso-highlight-box,.dso-modal>.dso-dialog>.dso-body .dso-highlight-box{margin-block-end:24px}.dso-modal>.dso-dialog>.dso-body img{block-size:auto;max-inline-size:100%}.dso-modal>.dso-dialog>.dso-body{block-size:calc(100% - 96px - 1.5rem);max-block-size:calc(70vh - 144px - 1.5em);min-block-size:1.5rem;overflow-x:auto;padding:32px}.dso-modal>.dso-dialog>dso-scrollable{block-size:calc(100% - 96px - 1.5rem);max-block-size:calc(70vh - 144px - 1.5em);min-block-size:6.5rem}.dso-modal>.dso-dialog>dso-scrollable .dso-body p{margin-block:0 var(--_dt-rich-content-margin-block, 16px);margin-inline:0}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul,.dso-modal>.dso-dialog>dso-scrollable .dso-body ol{margin-block-end:16px}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal>.dso-dialog>dso-scrollable .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul ul,.dso-modal>.dso-dialog>dso-scrollable .dso-body ul ol,.dso-modal>.dso-dialog>dso-scrollable .dso-body ol ul,.dso-modal>.dso-dialog>dso-scrollable .dso-body ol ol{margin-block-end:0}.dso-modal>.dso-dialog>dso-scrollable .dso-body pre{margin-block:0 16px;margin-inline:0}.dso-modal>.dso-dialog>dso-scrollable .dso-body blockquote{padding-block:16px;padding-inline:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body dso-highlight-box,.dso-modal>.dso-dialog>dso-scrollable .dso-body .dso-highlight-box{margin-block-end:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body img{block-size:auto;max-inline-size:100%}.dso-modal>.dso-dialog>dso-scrollable .dso-body{padding:32px}.dso-modal .dso-body:focus-visible{outline:none}@media screen and (max-width: 767px){.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}.dso-modal .dso-footer button{inline-size:100%;text-align:center}.dso-modal .dso-footer button+button{margin-block-start:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span{float:none}}.dso-modal .dso-footer{min-block-size:80px;padding-block:16px;padding-inline:32px;text-align:end}@media screen and (min-width: 768px){.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary{margin-inline-start:16px}.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}}@media screen and (max-width: 767px){.dso-modal .dso-dialog{max-inline-size:100%;margin-block-start:0}.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}.dso-modal .dso-footer button{inline-size:100%;text-align:center}.dso-modal .dso-footer button+button{margin-block-start:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span{float:none}}@media screen and (max-height: 380px){.dso-modal .dso-dialog{min-block-size:216px;margin-block-start:8px;margin-block-end:8px}.dso-modal .dso-header{padding-block:8px;padding-inline:16px}.dso-modal .dso-header .dso-close{inset-block-start:8px}.dso-modal .dso-body{padding-block:16px;padding-inline:24px}.dso-modal .dso-footer{min-block-size:auto;overflow:auto;padding-block:8px;padding-inline:32px}}.dso-modal .dso-header dso-icon-button{position:absolute;inset-block-start:22px;inset-inline-end:17px}"}},[257,"dso-modal",{fullscreen:[516],modalTitle:[1,"modal-title"],dialogRole:[1,"dialog-role"],returnFocus:[4,"return-focus"],closable:[4],ariaId:[32]}]),g=b,p=function(){"undefined"!=typeof customElements&&["dso-modal","dso-icon","dso-icon-button","dso-scrollable"].forEach((o=>{switch(o){case"dso-modal":customElements.get(a(o))||customElements.define(a(o),b);break;case"dso-icon":customElements.get(a(o))||t();break;case"dso-icon-button":customElements.get(a(o))||r();break;case"dso-scrollable":customElements.get(a(o))||n()}}))};export{g as DsoModal,p as defineCustomElement}