@dso-toolkit/core 83.1.0 → 84.1.0

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

@@ -58,7 +58,7 @@ export class MapControls {
         });
     }
     render() {
-        return (h(Fragment, { key: '722122cab93d6027100d73c0a062808c211fa86f' }, h("button", { key: '9c2494d749d43f2027010f9bed93f61d8255fdc1', type: "button", id: "toggle-visibility-button", class: "dso-map toggle-visibility-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: 'b4e4c503dfa2b35f2a1567c95e90d1f8622f9b11', icon: "layers" }), h("span", { key: '0e43af8aa45adba0719a4cfdc35189014fc1c60a' }, this.text("layersButton"))), h("dso-button-group", { key: '08fdb4c7547322a9bd300303f8e0a8658c793218', class: "zoom-buttons", direction: "column" }, h("button", { key: 'ca9932bcaf47796eac7bceb314f5455c8accd40c', type: "button", class: "dso-map", onClick: (e) => this.dsoZoomIn.emit(e), disabled: this.disableZoom === "in" || this.disableZoom === "both" }, h("span", { key: '878448cf48eac59999e72d7fc6e5b54ac62cf518', class: "sr-only" }, this.text("zoomIn")), h("dso-icon", { key: 'e121e3eb29330509e3fe7fb56e9514b7a8ddd39b', icon: "plus" })), h("button", { key: '21f4a250c6f32ee8a9848e270cd01fcadab646ac', type: "button", class: "dso-map", onClick: (e) => this.dsoZoomOut.emit(e), disabled: this.disableZoom === "out" || this.disableZoom === "both" }, h("span", { key: '076869983f44e00f1cfc0a9a8f2ace5c8fb5cc28', class: "sr-only" }, this.text("zoomOut")), h("dso-icon", { key: 'c3b9436f36f15a2da4928f1ce315afbdd2ecbb2b', icon: "minus" }))), h("section", { key: '0d5fbd3b1a98ae9bd18acf92e33032b10e5f7033', hidden: this.hideContent }, h("header", { key: 'f1975ef9f36394fa6f6dee8b10a23f8c743a20ae' }, h("h2", { key: 'af03b33a9505f1bcb2dfce82316c7c977773ea06' }, this.text("title")), h("button", { key: 'c711ae9d9cd0de0958b10fa1bfbb9cca327b11c3', type: "button", class: "dso-tertiary close-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, h("span", { key: '5cd14d3d0ae393c28e2cff37208d51391a1fb355', class: "sr-only" }, this.text("hidePanel", { title: this.text("title") })), h("dso-icon", { key: '21d1c28b34ae17a3f5429c0179e3fd2159e98591', icon: "times" }))), h("dso-scrollable", { key: '15bc3d4ee0d7060b10ce197780829c7ab9c0838a' }, h("div", { key: '7cdf7b9433a9b5ce96d4bf28823858bcf1f8b578', class: "content" }, h("slot", { key: 'b89f849740d209313f059e08893825031f3828ef' }))))));
+        return (h(Fragment, { key: '524335d692fdfbaaf7060919b018350cfb02227a' }, h("button", { key: '73236dc19d7a737a433c63c12bc78c74429346c4', type: "button", id: "toggle-visibility-button", class: "dso-map toggle-visibility-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: '13048c13b65e68b8c9b4f06720997d5464a93c08', icon: "layers" }), h("span", { key: '5b530075e4c3424ab712ebf3eb2676e8529282f8' }, this.text("layersButton"))), h("dso-button-group", { key: '6410b36883686d32a44257e49aa0335371513c14', class: "zoom-buttons", direction: "column" }, h("button", { key: '555763ec8a3f18e25f154e96cd2f0e798e5cf9fd', type: "button", class: "dso-map", onClick: (e) => this.dsoZoomIn.emit(e), disabled: this.disableZoom === "in" || this.disableZoom === "both" }, h("span", { key: 'c64e310a910b8152a5db1380931663efe14e0f40', class: "sr-only" }, this.text("zoomIn")), h("dso-icon", { key: 'bd16af8e69a17ea43c99acc806ec5849334c6fdf', icon: "plus" })), h("button", { key: '8b7250ddd0dda081989ac4ee999482cd53fc472f', type: "button", class: "dso-map", onClick: (e) => this.dsoZoomOut.emit(e), disabled: this.disableZoom === "out" || this.disableZoom === "both" }, h("span", { key: 'c3eb515a6ceee241639e7d4be170d7a624ad7cdc', class: "sr-only" }, this.text("zoomOut")), h("dso-icon", { key: '2c9b0796853d8acdf69037bcc0f27c1a6553cdbc', icon: "minus" }))), h("section", { key: '1b673eb2e40686c4760cbb8a71327e8e52151478', hidden: this.hideContent }, h("header", { key: '6419f5fe83c202e1110fae27339b8c1fbd31b116' }, h("h2", { key: 'cd7186cae05c68a8ef4340ef10ac0ef4010039d4' }, this.text("title")), h("button", { key: '422c6d0b671b8b9618d5a44b144a16bedf243d8f', type: "button", class: "dso-tertiary close-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, h("span", { key: '5ad7d9a46c1b6e92c518a6579c256b3bf5bc500a', class: "sr-only" }, this.text("hidePanel", { title: this.text("title") })), h("dso-icon", { key: '690f0dff0598dad4a293a789fc1a0169467c8c43', icon: "times" }))), h("dso-scrollable", { key: '47eaf3c3a078bd6a986a760674ec436450f9737f' }, h("div", { key: '41b06e6b50c1e8f09c6ac3ae322c709bf2f8dc10', class: "content" }, h("slot", { key: 'ed5514912e3aea637b67a2caf4b96d955dc75ab9' }))))));
     }
     static get is() { return "dso-map-controls"; }
     static get encapsulation() { return "shadow"; }
@@ -76,7 +76,6 @@ export class MapControls {
         return {
             "open": {
                 "type": "boolean",
-                "attribute": "open",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -92,11 +91,11 @@ export class MapControls {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "open",
                 "defaultValue": "false"
             },
             "disableZoom": {
                 "type": "string",
-                "attribute": "disable-zoom",
                 "mutable": false,
                 "complexType": {
                     "original": "\"in\" | \"out\" | \"both\"",
@@ -111,7 +110,8 @@ export class MapControls {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "disable-zoom"
             }
         };
     }

package/dist/collection/components/map-layer/components/map-layer-object.css

@@ -0,0 +1,35 @@
+: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;
+}

package/dist/collection/components/map-layer/components/map-layer-object.interfaces.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=map-layer-object.interfaces.js.map

package/dist/collection/components/map-layer/components/map-layer-object.interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"map-layer-object.interfaces.js","sourceRoot":"","sources":["../../../../../src/components/map-layer/components/map-layer-object.interfaces.ts"],"names":[],"mappings":"","sourcesContent":["export interface MapLayerObjectActiveChangeEvent {\r\n  /**\r\n   * The current status of the Map Layer.\r\n   */\r\n  current: boolean;\r\n\r\n  /**\r\n   * The next status of the Map Layer.\r\n   */\r\n  next: boolean;\r\n\r\n  originalEvent: Event;\r\n}\r\n"]}

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

@@ -0,0 +1,109 @@
+import { Host, h } from "@stencil/core";
+/**
+ * @slot - The label for this Map Layer Object
+ * @slot symbol - An optional slot to place a symbol in, representing the Map Layer Object.
+ */
+export class MapLayerObject {
+    constructor() {
+        this.handleActiveChange = (event) => {
+            this.dsoActiveChange.emit({
+                current: Boolean(this.active),
+                next: !this.active,
+                originalEvent: event,
+            });
+        };
+    }
+    render() {
+        return (h(Host, { key: '30bafb9fba2e324b90973e201b777ed1e4c2edb7', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: 'e16b36b39faa9eef52d42ae4e2ea10ef6e447b85', class: "map-layer-object" }, h("div", { key: 'd1b45348875bc6168c49c1dcb0c0a9586b2a854c' }, h("slot", { key: 'aa1363f10e2755e130866834cb2d90ce40247f28', name: "symbol" })), h("div", { key: '159fa97b818465cf269654ccaf420621bae2ef65' }, h("slot", { key: 'd0aba82b3df09e78a2fdb8a90f11eb128651dd10' })), h("div", { key: '703dc4b02c42de955850fd473b0e72db7b6df84e', class: "slide-toggle-container" }, h("dso-slide-toggle", { key: 'c957e6475e55e583ab609c44c8850043f5cc99e6', accessibleLabel: "Toon op kaart", checked: this.active, onDsoActiveChange: this.handleActiveChange })))));
+    }
+    static get is() { return "dso-map-layer-object"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["map-layer-object.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["map-layer-object.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "An optional boolean indicating whether the Map Layer Object is active."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "active"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsoActiveChange",
+                "name": "dsoActiveChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when user activates or deactivates the Map Layer Object."
+                },
+                "complexType": {
+                    "original": "MapLayerObjectActiveChangeEvent",
+                    "resolved": "MapLayerObjectActiveChangeEvent",
+                    "references": {
+                        "MapLayerObjectActiveChangeEvent": {
+                            "location": "import",
+                            "path": "./map-layer-object.interfaces",
+                            "id": "src/components/map-layer/components/map-layer-object.interfaces.ts::MapLayerObjectActiveChangeEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsoMouseEnter",
+                "name": "dsoMouseEnter",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the mouse enters the Map Layer Object."
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "dsoMouseLeave",
+                "name": "dsoMouseLeave",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the mouse leaves the Map Layer Object."
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=map-layer-object.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"map-layer-object.js","sourceRoot":"","sources":["../../../../../src/components/map-layer/components/map-layer-object.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,KAAK,EAAgB,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOlG;;;GAGG;AAMH,MAAM,OAAO,cAAc;IAL3B;QA8BU,uBAAkB,GAAG,CAAC,KAAwD,EAAE,EAAE;YACxF,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;gBACxB,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC;gBAC7B,IAAI,EAAE,CAAC,IAAI,CAAC,MAAM;gBAClB,aAAa,EAAE,KAAK;aACrB,CAAC,CAAC;QACL,CAAC,CAAC;KAuBH;IArBC,MAAM;QACJ,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,EAAC,kBAAkB;gBAC3B;oBACE,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAClB;gBACN;oBACE,8DAAQ,CACJ;gBACN,4DAAK,KAAK,EAAC,wBAAwB;oBACjC,yEACE,eAAe,EAAC,eAAe,EAC/B,OAAO,EAAE,IAAI,CAAC,MAAM,EACpB,iBAAiB,EAAE,IAAI,CAAC,kBAAkB,GAC1C,CACE,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, ComponentInterface, Event, EventEmitter, Host, Prop, h } from \"@stencil/core\";\r\n\r\nimport { DsoSlideToggleCustomEvent } from \"../../../components\";\r\nimport { SlideToggleActiveEvent } from \"../../slide-toggle/slide-toggle.interfaces\";\r\n\r\nimport { MapLayerObjectActiveChangeEvent } from \"./map-layer-object.interfaces\";\r\n\r\n/**\r\n * @slot - The label for this Map Layer Object\r\n * @slot symbol - An optional slot to place a symbol in, representing the Map Layer Object.\r\n */\r\n@Component({\r\n  tag: \"dso-map-layer-object\",\r\n  styleUrl: \"map-layer-object.scss\",\r\n  shadow: true,\r\n})\r\nexport class MapLayerObject implements ComponentInterface {\r\n  /**\r\n   * An optional boolean indicating whether the Map Layer Object is active.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Emitted when user activates or deactivates the Map Layer Object.\r\n   */\r\n  @Event()\r\n  dsoActiveChange!: EventEmitter<MapLayerObjectActiveChangeEvent>;\r\n\r\n  /**\r\n   * Emitted when the mouse enters the Map Layer Object.\r\n   */\r\n  @Event()\r\n  dsoMouseEnter!: EventEmitter;\r\n\r\n  /**\r\n   * Emitted when the mouse leaves the Map Layer Object.\r\n   */\r\n  @Event()\r\n  dsoMouseLeave!: EventEmitter;\r\n\r\n  private handleActiveChange = (event: DsoSlideToggleCustomEvent<SlideToggleActiveEvent>) => {\r\n    this.dsoActiveChange.emit({\r\n      current: Boolean(this.active),\r\n      next: !this.active,\r\n      originalEvent: event,\r\n    });\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host onMouseEnter={() => this.dsoMouseEnter.emit()} onMouseLeave={() => this.dsoMouseLeave.emit()}>\r\n        <div class=\"map-layer-object\">\r\n          <div>\r\n            <slot name=\"symbol\" />\r\n          </div>\r\n          <div>\r\n            <slot />\r\n          </div>\r\n          <div class=\"slide-toggle-container\">\r\n            <dso-slide-toggle\r\n              accessibleLabel=\"Toon op kaart\"\r\n              checked={this.active}\r\n              onDsoActiveChange={this.handleActiveChange}\r\n            />\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -0,0 +1,27 @@
+: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;
+}

package/dist/collection/components/map-layer/map-layer.interfaces.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=map-layer.interfaces.js.map

package/dist/collection/components/map-layer/map-layer.interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"map-layer.interfaces.js","sourceRoot":"","sources":["../../../../src/components/map-layer/map-layer.interfaces.ts"],"names":[],"mappings":"","sourcesContent":["export interface MapLayerActiveChangeEvent {\r\n  /**\r\n   * The current status of the Map Layer.\r\n   */\r\n  current: boolean;\r\n\r\n  /**\r\n   * The next status of the Map Layer.\r\n   */\r\n  next: boolean;\r\n\r\n  originalEvent: Event;\r\n}\r\n"]}

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

@@ -0,0 +1,122 @@
+import { Fragment, h } from "@stencil/core";
+/**
+ * @slot - The dso-map-layer-object elements. These should be direct children of the dso-map-layer element.
+ */
+export class MapLayer {
+    constructor() {
+        /**
+         * 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: '4355e5b07cda338b718214642054803ac24daf84' }, h("div", { key: '4a21ae78c755bf65d33a441a847cb1fe38e714a2', class: "map-layer" }, h("span", { key: '074f5708e406e28a7b8223c15c11e292ec56cefe', class: "map-layer-label" }, this.label), this.activatable && (h("div", { key: 'cb3b8004e02c452e76f71e667e9a34dcee2c9f86', class: "slide-toggle-container" }, h("dso-slide-toggle", { key: '158a228b06dd32f5f7097aec8b3e5a1403f299b7', accessibleLabel: "Toon op kaart", checked: this.active, onDsoActiveChange: this.handleActiveChange })))), h("slot", { key: 'b265537514ffd9feaed3edd18f5864bd4a7f4c64' })));
+    }
+    static get is() { return "dso-map-layer"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["map-layer.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["map-layer.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label of the Map Layer."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "label"
+            },
+            "activatable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A boolean to indicate if the Map Layer is capable of being activated. When `true` a Slide Toggle displays\r\non the right."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "activatable",
+                "defaultValue": "false"
+            },
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "An optional boolean indicating whether the Map Layer is active."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "active"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsoActiveChange",
+                "name": "dsoActiveChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when user activates or deactivates the Map Layer."
+                },
+                "complexType": {
+                    "original": "MapLayerActiveChangeEvent",
+                    "resolved": "MapLayerActiveChangeEvent",
+                    "references": {
+                        "MapLayerActiveChangeEvent": {
+                            "location": "import",
+                            "path": "./map-layer.interfaces",
+                            "id": "src/components/map-layer/map-layer.interfaces.ts::MapLayerActiveChangeEvent"
+                        }
+                    }
+                }
+            }];
+    }
+}
+//# sourceMappingURL=map-layer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"map-layer.js","sourceRoot":"","sources":["../../../../src/components/map-layer/map-layer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,KAAK,EAAgB,QAAQ,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOtG;;GAEG;AAMH,MAAM,OAAO,QAAQ;IALrB;QAYE;;;WAGG;QAEH,gBAAW,GAAG,KAAK,CAAC;QAcZ,uBAAkB,GAAG,CAAC,KAAwD,EAAE,EAAE;YACxF,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;gBACxB,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC;gBAC7B,IAAI,EAAE,CAAC,IAAI,CAAC,MAAM;gBAClB,aAAa,EAAE,KAAK;aACrB,CAAC,CAAC;QACL,CAAC,CAAC;KAqBH;IAnBC,MAAM;QACJ,OAAO,CACL,EAAC,QAAQ;YACP,4DAAK,KAAK,EAAC,WAAW;gBACpB,6DAAM,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,KAAK,CAAQ;gBAChD,IAAI,CAAC,WAAW,IAAI,CACnB,4DAAK,KAAK,EAAC,wBAAwB;oBACjC,yEACE,eAAe,EAAC,eAAe,EAC/B,OAAO,EAAE,IAAI,CAAC,MAAM,EACpB,iBAAiB,EAAE,IAAI,CAAC,kBAAkB,GAC1C,CACE,CACP,CACG;YACN,8DAAQ,CACC,CACZ,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, ComponentInterface, Event, EventEmitter, Fragment, Prop, h } from \"@stencil/core\";\r\n\r\nimport { DsoSlideToggleCustomEvent } from \"../../components\";\r\nimport { SlideToggleActiveEvent } from \"../slide-toggle/slide-toggle.interfaces\";\r\n\r\nimport { MapLayerActiveChangeEvent } from \"./map-layer.interfaces\";\r\n\r\n/**\r\n * @slot - The dso-map-layer-object elements. These should be direct children of the dso-map-layer element.\r\n */\r\n@Component({\r\n  tag: \"dso-map-layer\",\r\n  styleUrl: \"map-layer.scss\",\r\n  shadow: true,\r\n})\r\nexport class MapLayer implements ComponentInterface {\r\n  /**\r\n   * The label of the Map Layer.\r\n   */\r\n  @Prop({ reflect: true })\r\n  label!: string | undefined;\r\n\r\n  /**\r\n   * A boolean to indicate if the Map Layer is capable of being activated. When `true` a Slide Toggle displays\r\n   * on the right.\r\n   */\r\n  @Prop({ reflect: true })\r\n  activatable = false;\r\n\r\n  /**\r\n   * An optional boolean indicating whether the Map Layer is active.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Emitted when user activates or deactivates the Map Layer.\r\n   */\r\n  @Event()\r\n  dsoActiveChange!: EventEmitter<MapLayerActiveChangeEvent>;\r\n\r\n  private handleActiveChange = (event: DsoSlideToggleCustomEvent<SlideToggleActiveEvent>) => {\r\n    this.dsoActiveChange.emit({\r\n      current: Boolean(this.active),\r\n      next: !this.active,\r\n      originalEvent: event,\r\n    });\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Fragment>\r\n        <div class=\"map-layer\">\r\n          <span class=\"map-layer-label\">{this.label}</span>\r\n          {this.activatable && (\r\n            <div class=\"slide-toggle-container\">\r\n              <dso-slide-toggle\r\n                accessibleLabel=\"Toon op kaart\"\r\n                checked={this.active}\r\n                onDsoActiveChange={this.handleActiveChange}\r\n              />\r\n            </div>\r\n          )}\r\n        </div>\r\n        <slot />\r\n      </Fragment>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/map-overlays/map-overlays.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-overlays/map-overlays.js

@@ -28,7 +28,7 @@ export class MapOverlays {
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (h("fieldset", { key: '8a08f042f96168ef4299b10e7f5e0738281cdb17', class: "form-group dso-checkboxes" }, h("legend", { key: '6a40638cdfc66cc24a38e92487581af7ee4f38d1', class: "sr-only" }, "Kaartlagen"), h("div", { key: '779b43f44377a171483840e5ad6bdbed4d5b7987', class: "dso-label-container" }, h("span", { key: 'd09e4b0911ad531549ac3c4b77583db3721b32c3', class: "control-label", "aria-hidden": "true" }, this.text("title"))), h("div", { key: 'b186721b9519ab64b9672f5bf6232848fbdf57e3', 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))))));
+        return (h("fieldset", { key: '5677296e800c2c88ea5a6673303561405112ae8c', class: "form-group dso-checkboxes" }, h("legend", { key: '79422ea4c05439d17589479b04ed8e006f1ca6c2', class: "sr-only" }, "Kaartlagen"), h("div", { key: 'a06f69b1ffe8a3708a2cf464329db67e4a6ae271', class: "dso-label-container" }, h("span", { key: '700705da846f5cdbf271a5ee350e3ce28b51d60b', class: "control-label", "aria-hidden": "true" }, this.text("title"))), h("div", { key: '24ca7eacbf9efe9bd89b721c611f2081e05aa2c5', 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))))));
     }
     static get is() { return "dso-map-overlays"; }
     static get encapsulation() { return "shadow"; }
@@ -46,7 +46,6 @@ export class MapOverlays {
         return {
             "group": {
                 "type": "string",
-                "attribute": "group",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -62,11 +61,11 @@ export class MapOverlays {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "group",
                 "defaultValue": "uuidv4()"
             },
             "overlays": {
                 "type": "unknown",
-                "attribute": "overlays",
                 "mutable": false,
                 "complexType": {
                     "original": "Overlay[]",

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

@@ -1 +1 @@
-{"version":3,"file":"map-overlays.js","sourceRoot":"","sources":["../../../../src/components/map-overlays/map-overlays.tsx"],"names":[],"mappings":"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","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\nimport { SelectableChangeEvent } from \"../selectable/selectable.interfaces\";\r\n\r\nimport { translations } from \"./map-overlays.i18n\";\r\nimport { Overlay, OverlayChangeEvent } from \"./map-overlays.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-map-overlays\",\r\n  styleUrl: \"./map-overlays.scss\",\r\n  shadow: true,\r\n})\r\nexport class MapOverlays implements ComponentInterface {\r\n  private previousOverlays: Overlay[] | undefined;\r\n  private selectableRefs: { [id: number]: HTMLDsoSelectableElement } = {};\r\n\r\n  @Element()\r\n  host!: HTMLDsoMapOverlaysElement;\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 overlays.\r\n   */\r\n  @Prop()\r\n  overlays!: Overlay[];\r\n\r\n  /**\r\n   * Emitted when the user selects a different overlay.\r\n   */\r\n  @Event()\r\n  dsoToggleOverlay!: EventEmitter<OverlayChangeEvent>;\r\n\r\n  private overlayChangeHandler(overlay: Overlay, e: CustomEvent<SelectableChangeEvent>) {\r\n    const { checked } = e.detail;\r\n\r\n    this.dsoToggleOverlay.emit({ overlay, checked });\r\n  }\r\n\r\n  private text = i18n(() => this.host, translations);\r\n\r\n  componentDidRender() {\r\n    this.overlays\r\n      .filter((o) => !o.disabled && this.previousOverlays?.find((p) => p.id === o.id)?.disabled === true)\r\n      .forEach((o) => {\r\n        this.selectableRefs[o.id]?.toggleInfo(false);\r\n      });\r\n\r\n    this.previousOverlays = this.overlays;\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-checkboxes\">\r\n        <legend class=\"sr-only\">Kaartlagen</legend>\r\n        <div class=\"dso-label-container\">\r\n          <span class=\"control-label\" aria-hidden=\"true\">\r\n            {this.text(\"title\")}\r\n          </span>\r\n        </div>\r\n        <div class=\"dso-field-container\">\r\n          {this.overlays.map((overlay) => (\r\n            <dso-selectable\r\n              key={overlay.id}\r\n              type=\"checkbox\"\r\n              value={overlay.name}\r\n              checked={overlay.checked}\r\n              disabled={overlay.disabled}\r\n              name={this.group}\r\n              ref={(ref) => ref && (this.selectableRefs[overlay.id] = ref)}\r\n              onDsoChange={(e) => this.overlayChangeHandler(overlay, e)}\r\n            >\r\n              {overlay.name}\r\n              {overlay.info ? <p slot=\"info\">{overlay.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-overlays.js","sourceRoot":"","sources":["../../../../src/components/map-overlays/map-overlays.tsx"],"names":[],"mappings":"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","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\nimport { SelectableChangeEvent } from \"../selectable/selectable.interfaces\";\r\n\r\nimport { translations } from \"./map-overlays.i18n\";\r\nimport { Overlay, OverlayChangeEvent } from \"./map-overlays.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-map-overlays\",\r\n  styleUrl: \"./map-overlays.scss\",\r\n  shadow: true,\r\n})\r\nexport class MapOverlays implements ComponentInterface {\r\n  private previousOverlays: Overlay[] | undefined;\r\n  private selectableRefs: { [id: number]: HTMLDsoSelectableElement } = {};\r\n\r\n  @Element()\r\n  host!: HTMLDsoMapOverlaysElement;\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 overlays.\r\n   */\r\n  @Prop()\r\n  overlays!: Overlay[];\r\n\r\n  /**\r\n   * Emitted when the user selects a different overlay.\r\n   */\r\n  @Event()\r\n  dsoToggleOverlay!: EventEmitter<OverlayChangeEvent>;\r\n\r\n  private overlayChangeHandler(overlay: Overlay, e: CustomEvent<SelectableChangeEvent>) {\r\n    const { checked } = e.detail;\r\n\r\n    this.dsoToggleOverlay.emit({ overlay, checked });\r\n  }\r\n\r\n  private text = i18n(() => this.host, translations);\r\n\r\n  componentDidRender() {\r\n    this.overlays\r\n      .filter((o) => !o.disabled && this.previousOverlays?.find((p) => p.id === o.id)?.disabled === true)\r\n      .forEach((o) => {\r\n        this.selectableRefs[o.id]?.toggleInfo(false);\r\n      });\r\n\r\n    this.previousOverlays = this.overlays;\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-checkboxes\">\r\n        <legend class=\"sr-only\">Kaartlagen</legend>\r\n        <div class=\"dso-label-container\">\r\n          <span class=\"control-label\" aria-hidden=\"true\">\r\n            {this.text(\"title\")}\r\n          </span>\r\n        </div>\r\n        <div class=\"dso-field-container\">\r\n          {this.overlays.map((overlay) => (\r\n            <dso-selectable\r\n              key={overlay.id}\r\n              type=\"checkbox\"\r\n              value={overlay.name}\r\n              checked={overlay.checked}\r\n              disabled={overlay.disabled}\r\n              name={this.group}\r\n              ref={(ref) => ref && (this.selectableRefs[overlay.id] = ref)}\r\n              onDsoChange={(e) => this.overlayChangeHandler(overlay, e)}\r\n            >\r\n              {overlay.name}\r\n              {overlay.info ? <p slot=\"info\">{overlay.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/mark-bar/mark-bar.css

@@ -17,7 +17,7 @@
   margin: -1px;
   border: 0;
   overflow: hidden;
-  clip-path: inset(0);
+  clip-path: rect(0 0 0 0);
 }
 
 .dso-mark-bar {
@@ -67,7 +67,7 @@
   margin: -1px;
   border: 0;
   overflow: hidden;
-  clip-path: inset(0);
+  clip-path: rect(0 0 0 0);
 }
 .dso-mark-bar .dso-mark-bar-input label {
   inset-block-end: 8px;

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

@@ -42,7 +42,7 @@ export class MarkBar {
     render() {
         const current = this.current || 0;
         const totalCount = this.totalCount || 0;
-        return (h("div", { key: 'd5e2327030abc6cc96b1829a9687e9fcec0c7bb9', class: "dso-mark-bar" }, h("div", { key: 'd90729467d62f6fe096ecc7d585b10ab42940fbf', class: "dso-mark-bar-input" }, h("input", { key: 'bd685d9cda91afa21e9a7f212b9994d3872ba83b', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: '6ca1b9086e01796fdde041bade7f4792a6502a08', htmlFor: "search-input" }, h("dso-icon", { key: 'f68e89178b6c730e0f1c2e7a6f792d060784db2a', class: "dso-search-icon", icon: "search" }), h("span", { key: '0d49a83269da7544f81cddefd811c30ebee7e499', class: "label-text" }, this.label)), h("dso-icon-button", { key: 'bba9d197de332f45208cd3045fea137338978987', icon: "times", variant: "tertiary", label: "Zoekopdracht legen", onDsoClick: (e) => this.handleClear(e.detail.originalEvent) })), h("div", { key: '52a475ef26728e93baf0d8cd2e4762a499562311', class: "dso-button-container" }, h("span", { key: 'abdc161fa8123eeedcc23ac2a1f2561dfbc15c86', class: "divider" }), h("dso-icon-button", { key: 'f1094e6eeff6ae20aff2ffd14517c1a7f1a46f54', icon: "chevron-up", variant: "tertiary", label: "Vorig zoekresultaat", onDsoClick: (e) => this.handlePrevious(e.detail.originalEvent), disabled: current <= 1 }), h("span", { key: '7b5753e9915e964b39fa8b6f233bffa0ef53e46c' }, current, "/", totalCount), h("dso-icon-button", { key: 'c32b08612a6d6337f516448fee5142718457ae0d', icon: "chevron-down", variant: "tertiary", label: "Volgend zoekresultaat", onDsoClick: (e) => this.handleNext(e.detail.originalEvent), disabled: current >= totalCount }))));
+        return (h("div", { key: '479f935010eaa312fb947a2bc86f4120156f72b7', class: "dso-mark-bar" }, h("div", { key: '6f800ec39af642b5947ea302440756826c32468e', class: "dso-mark-bar-input" }, h("input", { key: '39a5a73bab3522acdbe6e8d18727c453bb1ffb73', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: 'de1aa601a7d49e90a707002c6554ef12970d354c', htmlFor: "search-input" }, h("dso-icon", { key: 'ed3c5a20769c9cb5137300b6c7bf83bd02e33bb0', class: "dso-search-icon", icon: "search" }), h("span", { key: '6cbbfbfece06520c7f7ca7148f92227d76489c6e', class: "label-text" }, this.label)), h("dso-icon-button", { key: '0e2b0f00578e857ee292e2c276516efcebcbba98', icon: "times", variant: "tertiary", label: "Zoekopdracht legen", onDsoClick: (e) => this.handleClear(e.detail.originalEvent) })), h("div", { key: '753c2a3ae343240ba4234631b8ea93318e22632e', class: "dso-button-container" }, h("span", { key: '9ec607afe4347550280631389368f2847bb53fe6', class: "divider" }), h("dso-icon-button", { key: 'ea6c03677bfd7a89b34d0a4416e8d5f38dab2124', icon: "chevron-up", variant: "tertiary", label: "Vorig zoekresultaat", onDsoClick: (e) => this.handlePrevious(e.detail.originalEvent), disabled: current <= 1 }), h("span", { key: 'b5fbeba0936fd222057f7ec38fc90e2c0c4c0cbe' }, current, "/", totalCount), h("dso-icon-button", { key: '01ee5a34b52a660705b451ecf9b72ba738c7fe1d', icon: "chevron-down", variant: "tertiary", label: "Volgend zoekresultaat", onDsoClick: (e) => this.handleNext(e.detail.originalEvent), disabled: current >= totalCount }))));
     }
     static get is() { return "dso-mark-bar"; }
     static get encapsulation() { return "shadow"; }
@@ -60,7 +60,6 @@ export class MarkBar {
         return {
             "value": {
                 "type": "string",
-                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -75,11 +74,11 @@ export class MarkBar {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "value"
             },
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -95,11 +94,11 @@ export class MarkBar {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "label",
                 "defaultValue": "\"Zoeken in document\""
             },
             "current": {
                 "type": "number",
-                "attribute": "current",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -114,11 +113,11 @@ export class MarkBar {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "current"
             },
             "totalCount": {
                 "type": "number",
-                "attribute": "total-count",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -133,7 +132,8 @@ export class MarkBar {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "total-count"
             }
         };
     }

package/dist/collection/components/modal/modal.css

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

package/dist/collection/components/modal/modal.js

@@ -65,7 +65,7 @@ export class Modal {
     }
     render() {
         var _a;
-        return (h("dialog", { key: 'c12355cbebd111aa1eb139c7835cf5d58a9965f5', 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: 'aa9ea8331afae635b2334b51c9a1b4524f9c33e7', 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: '456259576a4b6e00c3eacc7a0eee3b17fb043d74' }, h("div", { key: 'b9ada3fd589e3d4c10fbf6a74eda361748be17ee', class: "dso-body", tabIndex: 0 }, h("slot", { key: '80e7bbdae07fc35ba35d3e77e9a9e0f1dbe619a4', name: "body" }))), this.hasFooter && (h("div", { key: '2d67a2a59ad7f992de69ab78d3361e08e8089b95', class: "dso-footer" }, h("slot", { key: '8576675edf59081281ed570e10d69c6752178060', name: "footer" }))))));
+        return (h("dialog", { key: '8160801bfd3f476ae7d62fd6b0473a50eb98b83d', 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: '05ce0361e4a8d0dd3f382990650beef517b1efc5', 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: '2078683c54e36bfdcbf519cdb735c1c311ffbd9e' }, h("div", { key: '155f55ed093e9dfbe3fba7866bfa3da07ef2fe06', class: "dso-body", tabIndex: 0 }, h("slot", { key: 'ef2d5cce45c436c08a982b26a79810f0f542d3ba', name: "body" }))), this.hasFooter && (h("div", { key: 'f7c67dcc310923290d1589601c472c365c359a48', class: "dso-footer" }, h("slot", { key: 'ad642cfe380238b4a7266e5a0029216576901efc', name: "footer" }))))));
     }
     static get is() { return "dso-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -83,7 +83,6 @@ export class Modal {
         return {
             "fullscreen": {
                 "type": "boolean",
-                "attribute": "fullscreen",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -98,11 +97,11 @@ export class Modal {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "fullscreen"
             },
             "modalTitle": {
                 "type": "string",
-                "attribute": "modal-title",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -117,11 +116,11 @@ export class Modal {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "modal-title"
             },
             "dialogRole": {
                 "type": "string",
-                "attribute": "dialog-role",
                 "mutable": false,
                 "complexType": {
                     "original": "string | null",
@@ -137,11 +136,11 @@ export class Modal {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "dialog-role",
                 "defaultValue": "\"dialog\""
             },
             "returnFocus": {
                 "type": "boolean",
-                "attribute": "return-focus",
                 "mutable": false,
                 "complexType": {
                     "original": "false | HTMLElement | undefined",
@@ -162,11 +161,11 @@ export class Modal {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "return-focus",
                 "defaultValue": "undefined"
             },
             "closable": {
                 "type": "boolean",
-                "attribute": "closable",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -182,6 +181,7 @@ export class Modal {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "closable",
                 "defaultValue": "false"
             }
         };