@dso-toolkit/core 83.1.0 → 84.1.0

package/dist/collection/components/legend/legend.js

@@ -0,0 +1,154 @@
+import { Host, h } from "@stencil/core";
+import { clsx } from "clsx";
+import { isModifiedEvent } from "../../utils/is-modified-event";
+export class Legend {
+    constructor() {
+        /**
+         * TabItems in the legend topbar
+         */
+        this.tabItems = [];
+        this.keyUpHandler = (e) => {
+            if (!(e.target instanceof HTMLElement)) {
+                return;
+            }
+            switch (e.key) {
+                case "ArrowRight":
+                case "ArrowDown":
+                    this.moveFocusToNextTab(e.target);
+                    break;
+                case "ArrowLeft":
+                case "ArrowUp":
+                    this.moveFocusToPreviousTab(e.target);
+                    break;
+                default:
+                    return;
+            }
+        };
+        // A button handles an "enter" and a "space" keypress as a normal click."
+        this.clickHandler = (e) => {
+            const index = this.tabs.findIndex((tab) => tab === e.currentTarget);
+            const tabItem = this.tabItems[index];
+            if (!tabItem || tabItem.active) {
+                return;
+            }
+            this.dsoContentSwitch.emit({
+                originalEvent: e,
+                isModifiedEvent: isModifiedEvent(e),
+            });
+        };
+    }
+    get tabs() {
+        return Array.from(this.host.shadowRoot.querySelectorAll('[role="tab"]'));
+    }
+    get firstTab() {
+        return this.tabs[0];
+    }
+    get lastTab() {
+        return this.tabs[this.tabs.length - 1];
+    }
+    moveFocusToTab(tab) {
+        tab === null || tab === void 0 ? void 0 : tab.focus();
+    }
+    moveFocusToPreviousTab(focussedTab) {
+        var _a;
+        const index = this.tabs.findIndex((tab) => tab === focussedTab);
+        const next = (_a = this.tabs[index - 1]) !== null && _a !== void 0 ? _a : this.lastTab;
+        this.moveFocusToTab(next);
+    }
+    moveFocusToNextTab(focussedTab) {
+        var _a;
+        const index = this.tabs.findIndex((tab) => tab === focussedTab);
+        const next = (_a = this.tabs[index + 1]) !== null && _a !== void 0 ? _a : this.firstTab;
+        this.moveFocusToTab(next);
+    }
+    render() {
+        return (h(Host, { key: '4f1295cd75af42eeaf438cc7b92604054993bdeb' }, h("div", { key: 'f1473d16ec2b6b5035c9aa88dbad40a4233a1529', class: "topbar" }, h("div", { key: 'f33777d4ab012cecb17105abb8299426995c86d2', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, this.tabItems.map((tabItem) => (h("button", Object.assign({ class: clsx("tab", { active: tabItem.active }), role: "tab", "aria-selected": tabItem.active ? "true" : "false" }, (!tabItem.active ? { tabIndex: -1 } : {}), { onClick: this.clickHandler }), tabItem.label)))), h("dso-icon-button", { key: '8fc17eeefc63ca51e296212eeeadbfc8ab731d18', icon: "times", variant: "tertiary", label: "Sluit legenda", class: "close-button", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) })), h("dso-scrollable", { key: '553566be6236dde866e739364e7a19aa918d32a8', class: "content" }, h("div", { key: '9348aad31e38e42f208301773d58fa784d71c751', role: "tabpanel", tabIndex: 0 }, h("slot", { key: '55fd88c643f65474bb691e4100e493c28b22a358' })))));
+    }
+    static get is() { return "dso-legend"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["legend.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["legend.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "tabItems": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "LegendTabItem[]",
+                    "resolved": "LegendTabItem[]",
+                    "references": {
+                        "LegendTabItem": {
+                            "location": "import",
+                            "path": "./legend.interfaces",
+                            "id": "src/components/legend/legend.interfaces.ts::LegendTabItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "TabItems in the legend topbar"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsoContentSwitch",
+                "name": "dsoContentSwitch",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a tabItem is pressed."
+                },
+                "complexType": {
+                    "original": "LegendContentSwitchEvent",
+                    "resolved": "LegendContentSwitchEvent",
+                    "references": {
+                        "LegendContentSwitchEvent": {
+                            "location": "import",
+                            "path": "./legend.interfaces",
+                            "id": "src/components/legend/legend.interfaces.ts::LegendContentSwitchEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsoClose",
+                "name": "dsoClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user closes the Legend."
+                },
+                "complexType": {
+                    "original": "LegendCloseEvent",
+                    "resolved": "LegendCloseEvent",
+                    "references": {
+                        "LegendCloseEvent": {
+                            "location": "import",
+                            "path": "./legend.interfaces",
+                            "id": "src/components/legend/legend.interfaces.ts::LegendCloseEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=legend.js.map

package/dist/collection/components/legend/legend.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"legend.js","sourceRoot":"","sources":["../../../../src/components/legend/legend.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, h } from \"@stencil/core\";\r\nimport { clsx } from \"clsx\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { LegendCloseEvent, LegendContentSwitchEvent, LegendTabItem } from \"./legend.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-legend\",\r\n  styleUrl: \"legend.scss\",\r\n  shadow: true,\r\n})\r\nexport class Legend implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoLegendElement;\r\n\r\n  /**\r\n   * TabItems in the legend topbar\r\n   */\r\n  @Prop()\r\n  tabItems: LegendTabItem[] = [];\r\n\r\n  /**\r\n   * Emitted when a tabItem is pressed.\r\n   */\r\n  @Event()\r\n  dsoContentSwitch!: EventEmitter<LegendContentSwitchEvent>;\r\n\r\n  /**\r\n   * Emitted when the user closes the Legend.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<LegendCloseEvent>;\r\n\r\n  private get tabs() {\r\n    return Array.from(this.host.shadowRoot!.querySelectorAll<HTMLButtonElement>('[role=\"tab\"]'));\r\n  }\r\n\r\n  private get firstTab() {\r\n    return this.tabs[0];\r\n  }\r\n\r\n  private get lastTab() {\r\n    return this.tabs[this.tabs.length - 1];\r\n  }\r\n\r\n  private moveFocusToTab(tab: HTMLButtonElement | undefined) {\r\n    tab?.focus();\r\n  }\r\n\r\n  private moveFocusToPreviousTab(focussedTab: HTMLElement) {\r\n    const index = this.tabs.findIndex((tab) => tab === focussedTab);\r\n    const next = this.tabs[index - 1] ?? this.lastTab;\r\n\r\n    this.moveFocusToTab(next);\r\n  }\r\n\r\n  private moveFocusToNextTab(focussedTab: HTMLElement) {\r\n    const index = this.tabs.findIndex((tab) => tab === focussedTab);\r\n    const next = this.tabs[index + 1] ?? this.firstTab;\r\n\r\n    this.moveFocusToTab(next);\r\n  }\r\n\r\n  private keyUpHandler = (e: KeyboardEvent) => {\r\n    if (!(e.target instanceof HTMLElement)) {\r\n      return;\r\n    }\r\n\r\n    switch (e.key) {\r\n      case \"ArrowRight\":\r\n      case \"ArrowDown\":\r\n        this.moveFocusToNextTab(e.target);\r\n        break;\r\n\r\n      case \"ArrowLeft\":\r\n      case \"ArrowUp\":\r\n        this.moveFocusToPreviousTab(e.target);\r\n        break;\r\n\r\n      default:\r\n        return;\r\n    }\r\n  };\r\n\r\n  // A button handles an \"enter\" and a \"space\" keypress as a normal click.\"\r\n  private clickHandler = (e: MouseEvent) => {\r\n    const index = this.tabs.findIndex((tab) => tab === e.currentTarget);\r\n    const tabItem = this.tabItems[index];\r\n\r\n    if (!tabItem || tabItem.active) {\r\n      return;\r\n    }\r\n\r\n    this.dsoContentSwitch.emit({\r\n      originalEvent: e,\r\n      isModifiedEvent: isModifiedEvent(e),\r\n    });\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class=\"topbar\">\r\n          <div class=\"tabs\" role=\"tablist\" onKeyUp={this.keyUpHandler}>\r\n            {this.tabItems.map((tabItem) => (\r\n              <button\r\n                class={clsx(\"tab\", { active: tabItem.active })}\r\n                role=\"tab\"\r\n                aria-selected={tabItem.active ? \"true\" : \"false\"}\r\n                {...(!tabItem.active ? { tabIndex: -1 } : {})}\r\n                onClick={this.clickHandler}\r\n              >\r\n                {tabItem.label}\r\n              </button>\r\n            ))}\r\n          </div>\r\n\r\n          <dso-icon-button\r\n            icon=\"times\"\r\n            variant=\"tertiary\"\r\n            label=\"Sluit legenda\"\r\n            class=\"close-button\"\r\n            onClick={(e) => this.dsoClose.emit({ originalEvent: e })}\r\n          />\r\n        </div>\r\n\r\n        <dso-scrollable class=\"content\">\r\n          <div role=\"tabpanel\" tabIndex={0}>\r\n            <slot />\r\n          </div>\r\n        </dso-scrollable>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/legend-item/legend-item.css

@@ -1,7 +1,6 @@
 :host {
   display: block;
   padding-block: 4px;
-  padding-inline: 4px;
 }
 
 *,
@@ -22,6 +21,14 @@
   position: relative;
 }
 
+::slotted(h3) {
+  margin: 0 !important;
+}
+
+::slotted([slot=options]) {
+  margin-block-start: 8px;
+}
+
 .legend-item {
   display: flex;
   position: relative;

package/dist/collection/components/legend-item/legend-item.js

@@ -31,7 +31,7 @@ export class LegendItem {
     render() {
         const hasSymbol = this.symbolSlottedElement !== null;
         const hasOptions = this.optionsSlottedElement !== null;
-        return (h(Host, { key: 'd4e2f6d842f7ca0157c262d6f4512e1decf04a9d', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: 'cfd02f4df6aa26b14fdbee59b466f90f8d8cbee2', class: clsx("legend-item", { "legend-item-symbol": hasSymbol }) }, hasSymbol && (h("div", { key: '0d2c32702db90dbe44583a44c50055aba1958cf4' }, h("slot", { key: 'bebec9612d2ddbb73f930b6d7fd6826e8f30e8af', name: "symbol" }))), h("div", { key: 'b4badff0166ace15d3e1fc0be215705801af1067' }, h("slot", { key: '23ca6f63fd79d869ee906a3a857b3c56a837364c' })), this.disabled && this.disabledMessage && (h("dso-toggletip", { key: '648ce50e21c68c7f400c8a08a7e5df6704d19a43', position: "bottom" }, this.disabledMessage)), h("div", { key: 'b296b98e92f779c77020ec235c2d4cbfe061c4f0', class: "legend-item-right-content" }, hasOptions && !this.disabled && (h("dso-icon-button", { key: '865c48d41bd29c744940bfd71f48cd66d488b526', label: "Opties", icon: "more", variant: "tertiary", class: { active: this.showOptions }, id: "edit-button", onDsoClick: () => (this.showOptions = !this.showOptions) })), this.activatable && (h("dso-slide-toggle", { key: '4130979dbe5871e51a58f656fbb910fb3e713de2', accessibleLabel: "Maak actief", checked: this.active, disabled: this.disabled, onDsoActiveChange: (e) => this.dsoActiveChange.emit({ current: Boolean(this.active), next: !this.active, originalEvent: e }) })))), hasOptions && (h("div", { key: '87667bd6400a0bc4adb212e7f38bc7ee50052f3e', hidden: this.disabled || !this.showOptions, class: "options" }, h("slot", { key: '0d875c2b0d2a41441766255041b397c66b4cfe69', name: "options" })))));
+        return (h(Host, { key: 'f753caaecc4aeab79b89a20e1557a655b04cb260', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: 'a75c1d97fbbe89266574689c01f7a32df686d69b', class: clsx("legend-item", { "legend-item-symbol": hasSymbol }) }, hasSymbol && (h("div", { key: 'a7f6cc12d291a5cd177a2d32c7ad3630ab389ea2' }, h("slot", { key: 'ba092f9b9282783c791b9a866aa553d5de0dff7f', name: "symbol" }))), h("div", { key: '89ba0029501e16008fc591447abf5da85064a247' }, h("slot", { key: 'ea1eddba325f2ee5dc3d993a796bcd08035ca3c1' })), this.disabled && this.disabledMessage && (h("dso-toggletip", { key: '7ae2b598a535263de28dcaa2cb285f21a25ca29e', position: "bottom" }, this.disabledMessage)), h("div", { key: '8b5ea6746505207e4aec98ef9ea794b2263f8a3a', class: "legend-item-right-content" }, this.active && hasOptions && !this.disabled && (h("dso-icon-button", { key: 'f1cbd32b832722464e312efb7fed5b73e5985952', label: "Opties", icon: "more", variant: "tertiary", class: { active: this.showOptions }, id: "edit-button", onDsoClick: () => (this.showOptions = !this.showOptions) })), this.activatable && (h("dso-slide-toggle", { key: '99a2ff880a4de5fc5167fc1ca3fadf467e83f70d', accessibleLabel: "Maak actief", checked: this.active, disabled: this.disabled, onDsoActiveChange: (e) => this.dsoActiveChange.emit({ current: Boolean(this.active), next: !this.active, originalEvent: e }) })))), hasOptions && (h("div", { key: 'e38b48835e20002548cc8c5bdf14543a077983f0', hidden: this.disabled || !this.showOptions, class: "options" }, h("slot", { key: '216cf4002d7666e9ae8452efa219dd8f8eed250d', name: "options" })))));
     }
     static get is() { return "dso-legend-item"; }
     static get encapsulation() { return "shadow"; }
@@ -49,7 +49,6 @@ export class LegendItem {
         return {
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -65,11 +64,11 @@ export class LegendItem {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "disabledMessage": {
                 "type": "string",
-                "attribute": "disabled-message",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -84,11 +83,11 @@ export class LegendItem {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "disabled-message"
             },
             "activatable": {
                 "type": "boolean",
-                "attribute": "activatable",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -103,11 +102,11 @@ export class LegendItem {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "activatable"
             },
             "active": {
                 "type": "boolean",
-                "attribute": "active",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -122,7 +121,8 @@ export class LegendItem {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "active"
             }
         };
     }

package/dist/collection/components/legend-item/legend-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"legend-item.js","sourceRoot":"","sources":["../../../../src/components/legend-item/legend-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAET,OAAO,EACP,KAAK,EAEL,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,WAAW,EACX,CAAC,GACF,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;AAI5B;;;;GAIG;AAMH,MAAM,OAAO,UAAU;IALvB;QASE;;WAEG;QAEH,aAAQ,GAAG,KAAK,CAAC;QAuCjB,gBAAW,GAAG,KAAK,CAAC;KA0ErB;IAtEC,iBAAiB;QACf,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAE3E,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IAClF,CAAC;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,gBAAgB,0CAAE,UAAU,EAAE,CAAC;QAEpC,OAAO,IAAI,CAAC,gBAAgB,CAAC;IAC/B,CAAC;IAED,IAAI,oBAAoB;QACtB,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IACpD,CAAC;IAED,IAAI,qBAAqB;QACvB,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;IACrD,CAAC;IAED,MAAM;QACJ,MAAM,SAAS,GAAG,IAAI,CAAC,oBAAoB,KAAK,IAAI,CAAC;QACrD,MAAM,UAAU,GAAG,IAAI,CAAC,qBAAqB,KAAK,IAAI,CAAC;QAEvD,OAAO,CACL,EAAC,IAAI,qDAAC,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,EAAE,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE;YAChG,4DAAK,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,EAAE,oBAAoB,EAAE,SAAS,EAAE,CAAC;gBACjE,SAAS,IAAI,CACZ;oBACE,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACP;gBACD;oBACE,8DAAQ,CACJ;gBACL,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,eAAe,IAAI,CACxC,sEAAe,QAAQ,EAAC,QAAQ,IAAE,IAAI,CAAC,eAAe,CAAiB,CACxE;gBAED,4DAAK,KAAK,EAAC,2BAA2B;oBACnC,UAAU,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAC/B,wEACE,KAAK,EAAC,QAAQ,EACd,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,UAAU,EAClB,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,WAAW,EAAE,EACnC,EAAE,EAAC,aAAa,EAChB,UAAU,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,GACxD,CACH;oBACA,IAAI,CAAC,WAAW,IAAI,CACnB,yEACE,eAAe,EAAC,aAAa,EAC7B,OAAO,EAAE,IAAI,CAAC,MAAM,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,iBAAiB,EAAE,CAAC,CAAC,EAAE,EAAE,CACvB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,GAEpG,CACH,CACG,CACF;YACL,UAAU,IAAI,CACb,4DAAK,MAAM,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,KAAK,EAAC,SAAS;gBAC9D,6DAAM,IAAI,EAAC,SAAS,GAAG,CACnB,CACP,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Host,\r\n  Prop,\r\n  State,\r\n  forceUpdate,\r\n  h,\r\n} from \"@stencil/core\";\r\nimport { clsx } from \"clsx\";\r\n\r\nimport { LegendItemActiveChangeEvent } from \"./legend-item.interfaces\";\r\n\r\n/**\r\n * @slot The label for this Legend Item\r\n * @slot symbol - A span where the symbol is styled upon\r\n * @slot options - The slot to place controls in (i.e. `dso-input-range`). If present, this will cause the appearance of an edit-button (three dots) to show the controls. Will not be displayed if property `disabled` is set to true.\r\n */\r\n@Component({\r\n  tag: \"dso-legend-item\",\r\n  styleUrl: \"legend-item.scss\",\r\n  shadow: true,\r\n})\r\nexport class LegendItem implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoLegendItemElement;\r\n\r\n  /**\r\n   * To disable the Legend Item\r\n   */\r\n  @Prop({ reflect: true })\r\n  disabled = false;\r\n\r\n  /**\r\n   * Message to be shown behind a toggletip when the Legend Item is disabled\r\n   */\r\n  @Prop()\r\n  disabledMessage?: string;\r\n\r\n  /**\r\n   * Controls whether this Legend Item can be active or not\r\n   */\r\n  @Prop({ reflect: true })\r\n  activatable?: boolean;\r\n\r\n  /**\r\n   * Controls whether this Legend Item is active or not\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Emitted when user checks or unchecks the Slide Toggle.\r\n   */\r\n  @Event()\r\n  dsoActiveChange!: EventEmitter<LegendItemActiveChangeEvent>;\r\n\r\n  /**\r\n   * Emitted when the mouse enters the Legend Item\r\n   */\r\n  @Event()\r\n  dsoMouseEnter!: EventEmitter;\r\n\r\n  /**\r\n   * Emitted when the mouse leaves the Legend Item\r\n   */\r\n  @Event()\r\n  dsoMouseLeave!: EventEmitter;\r\n\r\n  @State()\r\n  showOptions = false;\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  connectedCallback(): void {\r\n    this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n    this.mutationObserver.observe(this.host, { attributes: true, childList: true });\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.mutationObserver?.disconnect();\r\n\r\n    delete this.mutationObserver;\r\n  }\r\n\r\n  get symbolSlottedElement() {\r\n    return this.host.querySelector(\"[slot='symbol']\");\r\n  }\r\n\r\n  get optionsSlottedElement() {\r\n    return this.host.querySelector(\"[slot='options']\");\r\n  }\r\n\r\n  render() {\r\n    const hasSymbol = this.symbolSlottedElement !== null;\r\n    const hasOptions = this.optionsSlottedElement !== null;\r\n\r\n    return (\r\n      <Host onMouseEnter={() => this.dsoMouseEnter.emit()} onMouseLeave={() => this.dsoMouseLeave.emit()}>\r\n        <div class={clsx(\"legend-item\", { \"legend-item-symbol\": hasSymbol })}>\r\n          {hasSymbol && (\r\n            <div>\r\n              <slot name=\"symbol\" />\r\n            </div>\r\n          )}\r\n          <div>\r\n            <slot />\r\n          </div>\r\n          {this.disabled && this.disabledMessage && (\r\n            <dso-toggletip position=\"bottom\">{this.disabledMessage}</dso-toggletip>\r\n          )}\r\n\r\n          <div class=\"legend-item-right-content\">\r\n            {hasOptions && !this.disabled && (\r\n              <dso-icon-button\r\n                label=\"Opties\"\r\n                icon=\"more\"\r\n                variant=\"tertiary\"\r\n                class={{ active: this.showOptions }}\r\n                id=\"edit-button\"\r\n                onDsoClick={() => (this.showOptions = !this.showOptions)}\r\n              />\r\n            )}\r\n            {this.activatable && (\r\n              <dso-slide-toggle\r\n                accessibleLabel=\"Maak actief\"\r\n                checked={this.active}\r\n                disabled={this.disabled}\r\n                onDsoActiveChange={(e) =>\r\n                  this.dsoActiveChange.emit({ current: Boolean(this.active), next: !this.active, originalEvent: e })\r\n                }\r\n              />\r\n            )}\r\n          </div>\r\n        </div>\r\n        {hasOptions && (\r\n          <div hidden={this.disabled || !this.showOptions} class=\"options\">\r\n            <slot name=\"options\" />\r\n          </div>\r\n        )}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"legend-item.js","sourceRoot":"","sources":["../../../../src/components/legend-item/legend-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Host,\r\n  Prop,\r\n  State,\r\n  forceUpdate,\r\n  h,\r\n} from \"@stencil/core\";\r\nimport { clsx } from \"clsx\";\r\n\r\nimport { LegendItemActiveChangeEvent } from \"./legend-item.interfaces\";\r\n\r\n/**\r\n * @slot The label for this Legend Item\r\n * @slot symbol - A span where the symbol is styled upon\r\n * @slot options - The slot to place controls in (i.e. `dso-input-range`). If present, this will cause the appearance of an edit-button (three dots) to show the controls. Will not be displayed if property `disabled` is set to true.\r\n */\r\n@Component({\r\n  tag: \"dso-legend-item\",\r\n  styleUrl: \"legend-item.scss\",\r\n  shadow: true,\r\n})\r\nexport class LegendItem implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoLegendItemElement;\r\n\r\n  /**\r\n   * To disable the Legend Item\r\n   */\r\n  @Prop({ reflect: true })\r\n  disabled = false;\r\n\r\n  /**\r\n   * Message to be shown behind a toggletip when the Legend Item is disabled\r\n   */\r\n  @Prop()\r\n  disabledMessage?: string;\r\n\r\n  /**\r\n   * Controls whether this Legend Item can be active or not\r\n   */\r\n  @Prop({ reflect: true })\r\n  activatable?: boolean;\r\n\r\n  /**\r\n   * Controls whether this Legend Item is active or not\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Emitted when user checks or unchecks the Slide Toggle.\r\n   */\r\n  @Event()\r\n  dsoActiveChange!: EventEmitter<LegendItemActiveChangeEvent>;\r\n\r\n  /**\r\n   * Emitted when the mouse enters the Legend Item\r\n   */\r\n  @Event()\r\n  dsoMouseEnter!: EventEmitter;\r\n\r\n  /**\r\n   * Emitted when the mouse leaves the Legend Item\r\n   */\r\n  @Event()\r\n  dsoMouseLeave!: EventEmitter;\r\n\r\n  @State()\r\n  showOptions = false;\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  connectedCallback(): void {\r\n    this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n    this.mutationObserver.observe(this.host, { attributes: true, childList: true });\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.mutationObserver?.disconnect();\r\n\r\n    delete this.mutationObserver;\r\n  }\r\n\r\n  get symbolSlottedElement() {\r\n    return this.host.querySelector(\"[slot='symbol']\");\r\n  }\r\n\r\n  get optionsSlottedElement() {\r\n    return this.host.querySelector(\"[slot='options']\");\r\n  }\r\n\r\n  render() {\r\n    const hasSymbol = this.symbolSlottedElement !== null;\r\n    const hasOptions = this.optionsSlottedElement !== null;\r\n\r\n    return (\r\n      <Host onMouseEnter={() => this.dsoMouseEnter.emit()} onMouseLeave={() => this.dsoMouseLeave.emit()}>\r\n        <div class={clsx(\"legend-item\", { \"legend-item-symbol\": hasSymbol })}>\r\n          {hasSymbol && (\r\n            <div>\r\n              <slot name=\"symbol\" />\r\n            </div>\r\n          )}\r\n          <div>\r\n            <slot />\r\n          </div>\r\n          {this.disabled && this.disabledMessage && (\r\n            <dso-toggletip position=\"bottom\">{this.disabledMessage}</dso-toggletip>\r\n          )}\r\n\r\n          <div class=\"legend-item-right-content\">\r\n            {this.active && hasOptions && !this.disabled && (\r\n              <dso-icon-button\r\n                label=\"Opties\"\r\n                icon=\"more\"\r\n                variant=\"tertiary\"\r\n                class={{ active: this.showOptions }}\r\n                id=\"edit-button\"\r\n                onDsoClick={() => (this.showOptions = !this.showOptions)}\r\n              />\r\n            )}\r\n            {this.activatable && (\r\n              <dso-slide-toggle\r\n                accessibleLabel=\"Maak actief\"\r\n                checked={this.active}\r\n                disabled={this.disabled}\r\n                onDsoActiveChange={(e) =>\r\n                  this.dsoActiveChange.emit({ current: Boolean(this.active), next: !this.active, originalEvent: e })\r\n                }\r\n              />\r\n            )}\r\n          </div>\r\n        </div>\r\n        {hasOptions && (\r\n          <div hidden={this.disabled || !this.showOptions} class=\"options\">\r\n            <slot name=\"options\" />\r\n          </div>\r\n        )}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/list-button/list-button.css

@@ -16,7 +16,7 @@
   margin: -1px;
   border: 0;
   overflow: hidden;
-  clip-path: inset(0);
+  clip-path: rect(0 0 0 0);
 }
 
 .dso-tertiary {

package/dist/collection/components/list-button/list-button.js

@@ -67,7 +67,7 @@ export class ListButton {
     }
     render() {
         const selected = this.checked || (this.count !== undefined && this.count > 0);
-        return (h("div", { key: 'c27cab802da7b149c54da89e044000879b35a1ea', class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { key: 'bdb5da45f124bad1335734fc0670bdc63b0b3e0a', class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("dso-selectable", { key: 'f6a6593be437c4bddaad0342061e27f64fce08ee', type: "checkbox", value: "list-button", name: "naam", checked: selected, disabled: this.disabled }, this.label, this.sublabel && h("span", { key: '14ff0ccfe9c54f1a133264435fcdc9fda42a2c97', class: "sr-only" }, " ", this.sublabel), this.subcontentSlot && (h("span", { key: '68b35d92a01ad90522ee630bdc8836e89cb5f134', class: "sr-only" }, this.subcontentPrefix && this.subcontentPrefix + ":", " ", h("span", { key: '9ddaf40939b76068574b42857667c6acf8c1235f', innerHTML: this.subcontentSlot.innerHTML })))), this.sublabel && h("span", { key: 'f1a64f125d1e69d9105093b7fda37d596b4e59c1', class: "dso-sublabel" }, this.sublabel), this.subcontentSlot && (h("div", { key: '6e48a9e6a9911c0a1e6bd8c47ccb54a07bb63ea9', class: "subcontent" }, h("slot", { key: 'dc3e3eb22ee6cf0a165929ea205777f5d2275412', name: "subcontent" })))), this.count !== undefined && this.count > 0 && (h("div", { key: 'c83d39740d933691268167f6bf8c1caf03427320', class: "dso-input-number" }, this.count > 1 && (h(Fragment, { key: '70b5184ffed37bd800054eee6cd075e5e87a3e6d' }, h("dso-icon-button", { key: '9916a89644c6dbef589cc6576ed227100b99c734', label: "Aantal verlagen", variant: "tertiary", icon: "minus-circle", disabled: this.count === Number(this.min) || this.disabled, onDsoClick: (e) => this.stepValue(e, "decrement") }), h("span", { key: 'edf865339b29c1cbd0092e9fbc3f4ee8bb69223a', class: "dso-input-step-counter", "aria-label": "Aantal", "aria-live": "polite" }, this.count))), h("dso-icon-button", { key: '847465aa1ce444b5c158075539931d244d0efdaa', label: "Aantal verhogen", variant: "tertiary", icon: "plus-circle", disabled: this.count === Number(this.max) || this.disabled, onDsoClick: (e) => this.stepValue(e, "increment") })))));
+        return (h("div", { key: 'a155334345712bda3dd58924d60ccd467923f6fc', class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { key: '1ac7dbc69f1e7b00fa8cd71b03ae0bbc7c3f98ee', class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("dso-selectable", { key: '5f1430413821bc31c793b2ccaed2a00509a3cfc6', type: "checkbox", value: "list-button", name: "naam", checked: selected, disabled: this.disabled }, this.label, this.sublabel && h("span", { key: '97302b35983f8659e51b7993619c5d007b9eadc5', class: "sr-only" }, " ", this.sublabel), this.subcontentSlot && (h("span", { key: '8324e5ebf88187d5042e4074a7b5a12cd8eb1fb5', class: "sr-only" }, this.subcontentPrefix && this.subcontentPrefix + ":", " ", h("span", { key: '6e0fe1caffbfdfa878b904f558b695def1c18f6f', innerHTML: this.subcontentSlot.innerHTML })))), this.sublabel && h("span", { key: '9bfec93907458641755c109304a453ebf728b4ad', class: "dso-sublabel" }, this.sublabel), this.subcontentSlot && (h("div", { key: 'e3feb6e6f3aa1f42efa2e632180459b61a22a7a0', class: "subcontent" }, h("slot", { key: '2971bc8037dabb734ecaf3faf1c338a3537fcac6', name: "subcontent" })))), this.count !== undefined && this.count > 0 && (h("div", { key: '46543874c528b6db91fed7dd19249dc7547bb86b', class: "dso-input-number" }, this.count > 1 && (h(Fragment, { key: 'cf2305047c3bf6f8384829c694ef57642bdd9bbf' }, h("dso-icon-button", { key: '6170297a6ce2a60762ba4bf96e59f49097e80d38', label: "Aantal verlagen", variant: "tertiary", icon: "minus-circle", disabled: this.count === Number(this.min) || this.disabled, onDsoClick: (e) => this.stepValue(e, "decrement") }), h("span", { key: 'e5c419497219f628e34bfdb997fe3b357a9331bd', class: "dso-input-step-counter", "aria-label": "Aantal", "aria-live": "polite" }, this.count))), h("dso-icon-button", { key: '225eed4514828a7f1afa06f2c6de8af19ada8b8d', label: "Aantal verhogen", variant: "tertiary", icon: "plus-circle", disabled: this.count === Number(this.max) || this.disabled, onDsoClick: (e) => this.stepValue(e, "increment") })))));
     }
     static get is() { return "dso-list-button"; }
     static get encapsulation() { return "shadow"; }
@@ -85,7 +85,6 @@ export class ListButton {
         return {
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -100,11 +99,11 @@ export class ListButton {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "label"
             },
             "sublabel": {
                 "type": "string",
-                "attribute": "sublabel",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -119,11 +118,11 @@ export class ListButton {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "sublabel"
             },
             "count": {
                 "type": "number",
-                "attribute": "count",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -138,11 +137,11 @@ export class ListButton {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "count"
             },
             "min": {
                 "type": "any",
-                "attribute": "min",
                 "mutable": false,
                 "complexType": {
                     "original": "string | number",
@@ -157,11 +156,11 @@ export class ListButton {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "min"
             },
             "max": {
                 "type": "any",
-                "attribute": "max",
                 "mutable": false,
                 "complexType": {
                     "original": "string | number",
@@ -176,11 +175,11 @@ export class ListButton {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "max"
             },
             "checked": {
                 "type": "boolean",
-                "attribute": "checked",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -196,11 +195,11 @@ export class ListButton {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "checked",
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -216,11 +215,11 @@ export class ListButton {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "subcontentPrefix": {
                 "type": "string",
-                "attribute": "subcontent-prefix",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -235,7 +234,8 @@ export class ListButton {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "subcontent-prefix"
             }
         };
     }

package/dist/collection/components/logo/logo.js

@@ -23,7 +23,7 @@ export class Logo {
     }
     render() {
         return (h(Fragment, null, this.logoUrl ? (h("a", { class: "logo-url", href: this.logoUrl, onClick: this.handleLogoClick }, h(DsoLogo, { name: this.name }))) : (h(DsoLogo, { name: this.name })), this.label &&
-            (!this.labelUrl ? (h("span", { class: "logo-label" }, this.label)) : (h("a", { class: "logo-label-url", href: this.labelUrl, onClick: this.handleLabelClick }, h("span", { class: "logo-label" }, this.label)))), this.ribbon && h("div", { key: '25100f9a1520b25402d3606e13d50d72e4b42147', class: "logo-ribbon" }, this.ribbon)));
+            (!this.labelUrl ? (h("span", { class: "logo-label" }, this.label)) : (h("a", { class: "logo-label-url", href: this.labelUrl, onClick: this.handleLabelClick }, h("span", { class: "logo-label" }, this.label)))), this.ribbon && h("div", { key: 'e3dc493316f373195f1f8cf1c5e190282486796e', class: "logo-ribbon" }, this.ribbon)));
     }
     static get is() { return "dso-logo"; }
     static get encapsulation() { return "shadow"; }
@@ -41,7 +41,6 @@ export class Logo {
         return {
             "name": {
                 "type": "string",
-                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -57,11 +56,11 @@ export class Logo {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "name",
                 "defaultValue": "\"Omgevings|loket\""
             },
             "logoUrl": {
                 "type": "string",
-                "attribute": "logo-url",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -76,11 +75,11 @@ export class Logo {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "logo-url"
             },
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -95,11 +94,11 @@ export class Logo {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "label"
             },
             "labelUrl": {
                 "type": "string",
-                "attribute": "label-url",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -114,11 +113,11 @@ export class Logo {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "label-url"
             },
             "ribbon": {
                 "type": "string",
-                "attribute": "ribbon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -133,7 +132,8 @@ export class Logo {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "ribbon"
             }
         };
     }

package/dist/collection/components/map-base-layers/map-base-layers.css

@@ -16,7 +16,7 @@
   margin: -1px;
   border: 0;
   overflow: hidden;
-  clip-path: inset(0);
+  clip-path: rect(0 0 0 0);
 }
 
 fieldset {

package/dist/collection/components/map-base-layers/map-base-layers.js

@@ -27,7 +27,7 @@ export class MapBaseLayers {
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (h("fieldset", { key: '7a2f2b49ef2ccabe6ebc3e0e5c7ed76c5b72a746', class: "form-group dso-radios" }, h("legend", { key: 'a19b169cc43a70f2e38ceba818bf450952339ff8', class: "sr-only" }, "Achtergrond"), h("div", { key: '64c795570bab8cb5b3992edc2dac4dd6569a5f11', class: "dso-label-container" }, h("span", { key: '1824e0e617af0ef91df2bdf978bbf16645038a62', class: "control-label", "aria-hidden": "true" }, this.text("background"))), h("div", { key: 'f5d41837ed502d2adea72f7ddaebf01f499ef251', class: "dso-field-container" }, this.baseLayers.map((baseLayer) => (h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, disabled: baseLayer.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[baseLayer.id] = ref), onDsoChange: () => this.baseLayerChangeHandler(baseLayer) }, baseLayer.name, baseLayer.info ? h("p", { slot: "info" }, baseLayer.info) : null))))));
+        return (h("fieldset", { key: 'b4e11afffa1cfeda374e2298e0a127c51733fb9d', class: "form-group dso-radios" }, h("legend", { key: '5d5d9deaa63fd457eca1503f460925ca4e51ba25', class: "sr-only" }, "Achtergrond"), h("div", { key: 'd804f723a44d4085a7e983d2587da5bde72b4fec', class: "dso-label-container" }, h("span", { key: 'da3e550984bbe1b3a055d09100cf3d37cab9fe25', class: "control-label", "aria-hidden": "true" }, this.text("background"))), h("div", { key: '419aebdce0570fba7d194c285858c2ced4e416ed', class: "dso-field-container" }, this.baseLayers.map((baseLayer) => (h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, disabled: baseLayer.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[baseLayer.id] = ref), onDsoChange: () => this.baseLayerChangeHandler(baseLayer) }, baseLayer.name, baseLayer.info ? h("p", { slot: "info" }, baseLayer.info) : null))))));
     }
     static get is() { return "dso-map-base-layers"; }
     static get encapsulation() { return "shadow"; }
@@ -45,7 +45,6 @@ export class MapBaseLayers {
         return {
             "group": {
                 "type": "string",
-                "attribute": "group",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -61,11 +60,11 @@ export class MapBaseLayers {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "group",
                 "defaultValue": "uuidv4()"
             },
             "baseLayers": {
                 "type": "unknown",
-                "attribute": "base-layers",
                 "mutable": false,
                 "complexType": {
                     "original": "BaseLayer[]",

package/dist/collection/components/map-base-layers/map-base-layers.js.map

@@ -1 +1 @@
-{"version":3,"file":"map-base-layers.js","sourceRoot":"","sources":["../../../../src/components/map-base-layers/map-base-layers.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACrG,OAAO,EAAE,EAAE,IAAI,MAAM,EAAE,MAAM,MAAM,CAAC;AAEpC,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAQtD,MAAM,OAAO,aAAa;IAL1B;QAOU,mBAAc,GAA+C,EAAE,CAAC;QAWxE;;WAEG;QAEH,UAAK,GAAG,MAAM,EAAE,CAAC;QAYT,SAAI,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;KA6CpD;IAjDS,sBAAsB,CAAC,SAAoB;QACjD,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,eAAe,EAAE,SAAS,EAAE,CAAC,CAAC;IAC/D,CAAC;IAID,kBAAkB;QAChB,IAAI,CAAC,UAAU;aACZ,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,eAAC,OAAA,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAA,MAAA,MAAA,IAAI,CAAC,kBAAkB,0CAAE,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,0CAAE,QAAQ,MAAK,IAAI,CAAA,EAAA,CAAC;aACpG,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE;;YACb,MAAA,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,0CAAE,UAAU,CAAC,KAAK,CAAC,CAAC;QAC/C,CAAC,CAAC,CAAC;QAEL,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,UAAU,CAAC;IAC5C,CAAC;IAED,MAAM;QACJ,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACtC,OAAO,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;QAClC,CAAC;QAED,OAAO,CACL,iEAAU,KAAK,EAAC,uBAAuB;YACrC,+DAAQ,KAAK,EAAC,SAAS,kBAAqB;YAC5C,4DAAK,KAAK,EAAC,qBAAqB;gBAC9B,6DAAM,KAAK,EAAC,eAAe,iBAAa,MAAM,IAC3C,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CACnB,CACH;YACN,4DAAK,KAAK,EAAC,qBAAqB,IAC7B,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CAClC,sBACE,GAAG,EAAE,SAAS,CAAC,EAAE,EACjB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,SAAS,CAAC,IAAI,EACrB,OAAO,EAAE,SAAS,CAAC,OAAO,EAC1B,QAAQ,EAAE,SAAS,CAAC,QAAQ,EAC5B,IAAI,EAAE,IAAI,CAAC,KAAK,EAChB,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,EAC9D,WAAW,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,sBAAsB,CAAC,SAAS,CAAC;gBAExD,SAAS,CAAC,IAAI;gBACd,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,SAAG,IAAI,EAAC,MAAM,IAAE,SAAS,CAAC,IAAI,CAAK,CAAC,CAAC,CAAC,IAAI,CAC7C,CAClB,CAAC,CACE,CACG,CACZ,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, h } from \"@stencil/core\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { translations } from \"./map-base-layers.i18n\";\r\nimport { BaseLayer, BaseLayerChangeEvent } from \"./map-base-layers.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-map-base-layers\",\r\n  styleUrl: \"./map-base-layers.scss\",\r\n  shadow: true,\r\n})\r\nexport class MapBaseLayers implements ComponentInterface {\r\n  private previousBaselayers: BaseLayer[] | undefined;\r\n  private selectableRefs: { [id: number]: HTMLDsoSelectableElement } = {};\r\n\r\n  @Element()\r\n  host!: HTMLDsoMapBaseLayersElement;\r\n\r\n  /**\r\n   * Emitted when the user checks or unchecks a base layer.\r\n   */\r\n  @Event()\r\n  dsoBaseLayerChange!: EventEmitter<BaseLayerChangeEvent>;\r\n\r\n  /**\r\n   * To group the overlays together. Generally the default value suffices.\r\n   */\r\n  @Prop()\r\n  group = uuidv4();\r\n\r\n  /**\r\n   * The base layers.\r\n   */\r\n  @Prop()\r\n  baseLayers!: BaseLayer[];\r\n\r\n  private baseLayerChangeHandler(baseLayer: BaseLayer): void {\r\n    this.dsoBaseLayerChange.emit({ activeBaseLayer: baseLayer });\r\n  }\r\n\r\n  private text = i18n(() => this.host, translations);\r\n\r\n  componentDidRender() {\r\n    this.baseLayers\r\n      .filter((l) => !l.disabled && this.previousBaselayers?.find((p) => p.id === l.id)?.disabled === true)\r\n      .forEach((o) => {\r\n        this.selectableRefs[o.id]?.toggleInfo(false);\r\n      });\r\n\r\n    this.previousBaselayers = this.baseLayers;\r\n  }\r\n\r\n  render() {\r\n    for (const ref in this.selectableRefs) {\r\n      delete this.selectableRefs[ref];\r\n    }\r\n\r\n    return (\r\n      <fieldset class=\"form-group dso-radios\">\r\n        <legend class=\"sr-only\">Achtergrond</legend>\r\n        <div class=\"dso-label-container\">\r\n          <span class=\"control-label\" aria-hidden=\"true\">\r\n            {this.text(\"background\")}\r\n          </span>\r\n        </div>\r\n        <div class=\"dso-field-container\">\r\n          {this.baseLayers.map((baseLayer) => (\r\n            <dso-selectable\r\n              key={baseLayer.id}\r\n              type=\"radio\"\r\n              value={baseLayer.name}\r\n              checked={baseLayer.checked}\r\n              disabled={baseLayer.disabled}\r\n              name={this.group}\r\n              ref={(ref) => ref && (this.selectableRefs[baseLayer.id] = ref)}\r\n              onDsoChange={() => this.baseLayerChangeHandler(baseLayer)}\r\n            >\r\n              {baseLayer.name}\r\n              {baseLayer.info ? <p slot=\"info\">{baseLayer.info}</p> : null}\r\n            </dso-selectable>\r\n          ))}\r\n        </div>\r\n      </fieldset>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"map-base-layers.js","sourceRoot":"","sources":["../../../../src/components/map-base-layers/map-base-layers.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACrG,OAAO,EAAE,EAAE,IAAI,MAAM,EAAE,MAAM,MAAM,CAAC;AAEpC,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAQtD,MAAM,OAAO,aAAa;IAL1B;QAOU,mBAAc,GAA+C,EAAE,CAAC;QAWxE;;WAEG;QAEH,UAAK,GAAG,MAAM,EAAE,CAAC;QAYT,SAAI,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;KA6CpD;IAjDS,sBAAsB,CAAC,SAAoB;QACjD,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,eAAe,EAAE,SAAS,EAAE,CAAC,CAAC;IAC/D,CAAC;IAID,kBAAkB;QAChB,IAAI,CAAC,UAAU;aACZ,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,eAAC,OAAA,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAA,MAAA,MAAA,IAAI,CAAC,kBAAkB,0CAAE,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,0CAAE,QAAQ,MAAK,IAAI,CAAA,EAAA,CAAC;aACpG,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE;;YACb,MAAA,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,0CAAE,UAAU,CAAC,KAAK,CAAC,CAAC;QAC/C,CAAC,CAAC,CAAC;QAEL,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,UAAU,CAAC;IAC5C,CAAC;IAED,MAAM;QACJ,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACtC,OAAO,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;QAClC,CAAC;QAED,OAAO,CACL,iEAAU,KAAK,EAAC,uBAAuB;YACrC,+DAAQ,KAAK,EAAC,SAAS,kBAAqB;YAC5C,4DAAK,KAAK,EAAC,qBAAqB;gBAC9B,6DAAM,KAAK,EAAC,eAAe,iBAAa,MAAM,IAC3C,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CACnB,CACH;YACN,4DAAK,KAAK,EAAC,qBAAqB,IAC7B,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CAClC,sBACE,GAAG,EAAE,SAAS,CAAC,EAAE,EACjB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,SAAS,CAAC,IAAI,EACrB,OAAO,EAAE,SAAS,CAAC,OAAO,EAC1B,QAAQ,EAAE,SAAS,CAAC,QAAQ,EAC5B,IAAI,EAAE,IAAI,CAAC,KAAK,EAChB,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,EAC9D,WAAW,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,sBAAsB,CAAC,SAAS,CAAC;gBAExD,SAAS,CAAC,IAAI;gBACd,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,SAAG,IAAI,EAAC,MAAM,IAAE,SAAS,CAAC,IAAI,CAAK,CAAC,CAAC,CAAC,IAAI,CAC7C,CAClB,CAAC,CACE,CACG,CACZ,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, h } from \"@stencil/core\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { translations } from \"./map-base-layers.i18n\";\r\nimport { BaseLayer, BaseLayerChangeEvent } from \"./map-base-layers.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-map-base-layers\",\r\n  styleUrl: \"./map-base-layers.scss\",\r\n  shadow: true,\r\n})\r\nexport class MapBaseLayers implements ComponentInterface {\r\n  private previousBaselayers: BaseLayer[] | undefined;\r\n  private selectableRefs: { [id: number]: HTMLDsoSelectableElement } = {};\r\n\r\n  @Element()\r\n  host!: HTMLDsoMapBaseLayersElement;\r\n\r\n  /**\r\n   * Emitted when the user checks or unchecks a base layer.\r\n   */\r\n  @Event()\r\n  dsoBaseLayerChange!: EventEmitter<BaseLayerChangeEvent>;\r\n\r\n  /**\r\n   * To group the overlays together. Generally the default value suffices.\r\n   */\r\n  @Prop()\r\n  group = uuidv4();\r\n\r\n  /**\r\n   * The base layers.\r\n   */\r\n  @Prop()\r\n  baseLayers!: BaseLayer[];\r\n\r\n  private baseLayerChangeHandler(baseLayer: BaseLayer): void {\r\n    this.dsoBaseLayerChange.emit({ activeBaseLayer: baseLayer });\r\n  }\r\n\r\n  private text = i18n(() => this.host, translations);\r\n\r\n  componentDidRender() {\r\n    this.baseLayers\r\n      .filter((l) => !l.disabled && this.previousBaselayers?.find((p) => p.id === l.id)?.disabled === true)\r\n      .forEach((o) => {\r\n        this.selectableRefs[o.id]?.toggleInfo(false);\r\n      });\r\n\r\n    this.previousBaselayers = this.baseLayers;\r\n  }\r\n\r\n  render() {\r\n    for (const ref in this.selectableRefs) {\r\n      delete this.selectableRefs[ref];\r\n    }\r\n\r\n    return (\r\n      <fieldset class=\"form-group dso-radios\">\r\n        <legend class=\"sr-only\">Achtergrond</legend>\r\n        <div class=\"dso-label-container\">\r\n          <span class=\"control-label\" aria-hidden=\"true\">\r\n            {this.text(\"background\")}\r\n          </span>\r\n        </div>\r\n        <div class=\"dso-field-container\">\r\n          {this.baseLayers.map((baseLayer) => (\r\n            <dso-selectable\r\n              key={baseLayer.id}\r\n              type=\"radio\"\r\n              value={baseLayer.name}\r\n              checked={baseLayer.checked}\r\n              disabled={baseLayer.disabled}\r\n              name={this.group}\r\n              ref={(ref) => ref && (this.selectableRefs[baseLayer.id] = ref)}\r\n              onDsoChange={() => this.baseLayerChangeHandler(baseLayer)}\r\n            >\r\n              {baseLayer.name}\r\n              {baseLayer.info ? <p slot=\"info\">{baseLayer.info}</p> : null}\r\n            </dso-selectable>\r\n          ))}\r\n        </div>\r\n      </fieldset>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/map-controls/map-controls.css

@@ -973,7 +973,7 @@ a.dso-tertiary, a.dso-tertiary:visited {
   margin: -1px;
   border: 0;
   overflow: hidden;
-  clip-path: inset(0);
+  clip-path: rect(0 0 0 0);
 }
 
 :host([open]) {
@@ -1048,7 +1048,7 @@ header h2 {
     margin: -1px;
     border: 0;
     overflow: hidden;
-    clip-path: inset(0);
+    clip-path: rect(0 0 0 0);
   }
   .zoom-buttons {
     inset-block-start: 72px;