@dso-toolkit/core 83.1.0 → 84.1.0

package/dist/collection/components/table/table.js

@@ -1,6 +1,5 @@
-import { Host, h } from "@stencil/core";
+import { Fragment, Host, h } from "@stencil/core";
 import debounce from "debounce";
-import { createFocusTrap } from "focus-trap";
 import { v4 } from "uuid";
 export class Table {
     constructor() {
@@ -10,6 +9,9 @@ export class Table {
          */
         this.noModal = false;
         this.modalActive = false;
+        this.dialogCloseEventListener = () => {
+            this.closeModal();
+        };
     }
     startResponsiveBehavior() {
         var _a;
@@ -22,7 +24,10 @@ export class Table {
         this.startResponsiveBehavior();
     }
     componentDidRender() {
-        this.setFocusTrap();
+        var _a;
+        if (this.modalActive) {
+            (_a = this.dialogElement) === null || _a === void 0 ? void 0 : _a.showModal();
+        }
     }
     disconnectedCallback() {
         var _a;
@@ -31,40 +36,18 @@ export class Table {
     render() {
         var _a, _b, _c;
         const caption = (_b = (_a = this.host.querySelector(":scope > table > caption")) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim();
-        return (h(Host, { key: 'ea375689058b7804f18228a012529d425ceb8f56', "is-responsive": (_c = this.isResponsive) === null || _c === void 0 ? void 0 : _c.toString() }, this.modalActive && this.placeholderHeight && (h("div", { key: 'd70365f25bc7017d4f82981ad3577363bca3fb00', class: "dso-table-placeholder", style: { height: `${this.placeholderHeight}px` } })), this.modalActive && h("div", { key: '853a522a7eb545b4fee7890e00e918c95add74bc', class: "dso-modal-overlay" }), h("div", { key: '71a88b033bbbabfccc96db1924c4dd9d74d8294f', class: { "dso-modal": this.modalActive } }, h("div", Object.assign({ key: '0cbca2f956e849b88a98c1ba28323f77200b062b', class: { "dso-dialog": this.modalActive, "dso-table-dialog": true }, ref: (element) => (this.focusTrapElement = element) }, (this.modalActive ? { ["aria-labelledby"]: this.labelledbyId, role: "dialog" } : {})), (this.isResponsive || !this.noModal) && (h("div", { key: 'af7abdd49c0e31dfc74990f779b4a7012e5c890e', class: "dso-table-utilities", style: this.modalActive ? { display: "none" } : undefined }, this.isResponsive && (h("div", { key: '3c7f74c620398986d8a38bbd77873f8fc6ad4029', class: "dso-responsive-message" }, h("span", { key: '6b8c4788d68f2defd5b695f3e3b7092f9a215ab2' }, "beweeg de tabel van links naar rechts"))), !this.noModal && (h("button", { key: 'b28ead4c5e4b2fb68d347bdfaceb013f001dc6a3', type: "button", class: "dso-tertiary open-modal-button", ref: (element) => (this.buttonElement = element), onClick: () => this.openModal() }, h("span", { key: 'a6214255bdffc1c6182974799840e74cd31d2669', class: "sr-only" }, "tabel ", caption !== null && caption !== void 0 ? caption : "", " "), h("span", { key: '9f2ed158d1bedbc884461af02070f668413f51ad' }, "vergroten"), h("dso-icon", { key: 'c9923b77c21608665833339825a61fc374339292', icon: "external-link" }))))), this.modalActive && (h("div", { key: '027c8c6a0006b13dde23fa6b117f29fb55cc19e3', class: "dso-header" }, h("h2", { key: 'fc44a14a9f50241d49a09a8392c4bc4f23357ccf', id: this.labelledbyId, class: { "sr-only": !caption } }, caption || "Uitvergrote tabel dialoog"), h("button", { key: 'fa7f079951e00a2c01321611af9c08824f654bf8', type: "button", class: "dso-close", onClick: () => this.closeModal() }, h("dso-icon", { key: '10b9e20d0ce2bec4c2eb63591490d793462bcd18', icon: "times" }), h("span", { key: '48880e4431b46167a4d786bf32f8872f5f78d6ce', class: "sr-only" }, "Sluiten")))), h("div", { key: 'a9db26203b042bebbdd6faa3191e283179d253a3', class: { "dso-body": this.modalActive, "dso-table-body": true } }, h("slot", { key: 'd1ad407fc8680d4bb16d35f1b4305ce9352b88bc' }))))));
+        return (h(Host, { key: '274318251014797e66d4161b7724aab3bdfb888d', "is-responsive": (_c = this.isResponsive) === null || _c === void 0 ? void 0 : _c.toString() }, this.modalActive && this.placeholderHeight && (h("div", { key: '3c1f1ea056f3a440fee1e9ee191810046fa2e780', class: "dso-table-placeholder", style: { height: `${this.placeholderHeight}px` } })), this.modalActive ? (h("dialog", { class: "dso-modal", ref: (element) => (this.dialogElement = element), onClose: this.dialogCloseEventListener }, h("div", { class: "dso-dialog dso-table-dialog", "aria-labelledby": this.labelledbyId }, h("div", { class: "dso-header" }, h("h2", { id: this.labelledbyId, class: { "sr-only": !caption } }, caption || "Uitvergrote tabel dialoog"), h("button", { type: "button", class: "dso-close", onClick: () => this.closeModal() }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, "Sluiten"))), h("div", { class: "dso-body dso-table-body" }, h("slot", null))))) : (h(Fragment, null, h("div", { class: "dso-table-utilities", hidden: !this.isResponsive && this.noModal }, this.isResponsive && (h("div", { class: "dso-responsive-message" }, h("span", null, "beweeg de tabel van links naar rechts"))), !this.noModal && (h("button", { type: "button", class: "dso-tertiary open-modal-button", onClick: () => this.openModal() }, h("span", { class: "sr-only" }, "tabel ", caption !== null && caption !== void 0 ? caption : "", " "), h("span", null, "vergroten"), h("dso-icon", { icon: "external-link" })))), h("div", { class: "dso-table-body" }, h("slot", null))))));
     }
     openModal() {
         this.placeholderHeight = this.host.clientHeight;
         this.modalActive = true;
     }
     closeModal() {
+        var _a;
         this.placeholderHeight = undefined;
+        (_a = this.dialogElement) === null || _a === void 0 ? void 0 : _a.close();
         this.modalActive = false;
     }
-    setFocusTrap() {
-        var _a, _b;
-        if (this.modalActive && this.focusTrapElement && !this.trap) {
-            this.trap = createFocusTrap([this.host, this.focusTrapElement], {
-                escapeDeactivates: true,
-                clickOutsideDeactivates: (e) => {
-                    if (e instanceof MouseEvent && e.composedPath()[0] === this.focusTrapElement) {
-                        this.closeModal();
-                        return false;
-                    }
-                    return true;
-                },
-                setReturnFocus: (_a = this.buttonElement) !== null && _a !== void 0 ? _a : false,
-                onDeactivate: () => this.closeModal(),
-                tabbableOptions: {
-                    getShadowRoot: true,
-                },
-            }).activate();
-        }
-        else if (!this.modalActive && this.trap) {
-            (_b = this.trap) === null || _b === void 0 ? void 0 : _b.deactivate();
-            delete this.trap;
-        }
-    }
     setResponsiveTable([dsoTable]) {
         if (!dsoTable) {
             throw new Error("No dsoTable found");
@@ -91,7 +74,6 @@ export class Table {
         return {
             "noModal": {
                 "type": "boolean",
-                "attribute": "no-modal",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -107,6 +89,7 @@ export class Table {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "no-modal",
                 "defaultValue": "false"
             }
         };

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

@@ -1 +1 @@
-{"version":3,"file":"table.js","sourceRoot":"","sources":["../../../../src/components/table/table.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Element, Host, Prop, State, h } from \"@stencil/core\";\r\nimport debounce from \"debounce\";\r\nimport { FocusTrap, createFocusTrap } from \"focus-trap\";\r\nimport { v4 } from \"uuid\";\r\n\r\n@Component({\r\n  tag: \"dso-table\",\r\n  styleUrl: \"table.scss\",\r\n  shadow: true,\r\n})\r\nexport class Table implements ComponentInterface {\r\n  private resizeObserver?: ResizeObserver;\r\n\r\n  private focusTrapElement?: HTMLDivElement;\r\n\r\n  private buttonElement?: HTMLButtonElement;\r\n\r\n  private trap?: FocusTrap;\r\n\r\n  private labelledbyId = v4();\r\n\r\n  @Element()\r\n  host!: HTMLDsoTableElement;\r\n\r\n  /**\r\n   * Prevents the table being opened in a modal.\r\n   */\r\n  @Prop({ reflect: true })\r\n  noModal = false;\r\n\r\n  @State()\r\n  isResponsive?: boolean;\r\n\r\n  @State()\r\n  modalActive = false;\r\n\r\n  @State()\r\n  placeholderHeight?: number;\r\n\r\n  private startResponsiveBehavior(): void {\r\n    this.resizeObserver?.observe(this.host);\r\n  }\r\n\r\n  componentWillLoad(): void {\r\n    this.resizeObserver = new ResizeObserver(debounce((entries) => this.setResponsiveTable(entries), 200));\r\n  }\r\n\r\n  componentDidLoad(): void {\r\n    this.startResponsiveBehavior();\r\n  }\r\n\r\n  componentDidRender() {\r\n    this.setFocusTrap();\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.resizeObserver?.disconnect();\r\n  }\r\n\r\n  render() {\r\n    const caption = this.host.querySelector(\":scope > table > caption\")?.textContent?.trim();\r\n\r\n    return (\r\n      <Host is-responsive={this.isResponsive?.toString()}>\r\n        {this.modalActive && this.placeholderHeight && (\r\n          <div class=\"dso-table-placeholder\" style={{ height: `${this.placeholderHeight}px` }} />\r\n        )}\r\n\r\n        {this.modalActive && <div class=\"dso-modal-overlay\"></div>}\r\n\r\n        <div class={{ \"dso-modal\": this.modalActive }}>\r\n          <div\r\n            class={{ \"dso-dialog\": this.modalActive, \"dso-table-dialog\": true }}\r\n            ref={(element) => (this.focusTrapElement = element)}\r\n            {...(this.modalActive ? { [\"aria-labelledby\"]: this.labelledbyId, role: \"dialog\" } : {})}\r\n          >\r\n            {(this.isResponsive || !this.noModal) && (\r\n              <div class=\"dso-table-utilities\" style={this.modalActive ? { display: \"none\" } : undefined}>\r\n                {this.isResponsive && (\r\n                  <div class=\"dso-responsive-message\">\r\n                    <span>beweeg de tabel van links naar rechts</span>\r\n                  </div>\r\n                )}\r\n\r\n                {!this.noModal && (\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"dso-tertiary open-modal-button\"\r\n                    ref={(element) => (this.buttonElement = element)}\r\n                    onClick={() => this.openModal()}\r\n                  >\r\n                    <span class=\"sr-only\">tabel {caption ?? \"\"} </span>\r\n                    <span>vergroten</span>\r\n                    <dso-icon icon=\"external-link\"></dso-icon>\r\n                  </button>\r\n                )}\r\n              </div>\r\n            )}\r\n\r\n            {this.modalActive && (\r\n              <div class=\"dso-header\">\r\n                <h2 id={this.labelledbyId} class={{ \"sr-only\": !caption }}>\r\n                  {caption || \"Uitvergrote tabel dialoog\"}\r\n                </h2>\r\n                <button type=\"button\" class=\"dso-close\" onClick={() => this.closeModal()}>\r\n                  <dso-icon icon=\"times\"></dso-icon>\r\n                  <span class=\"sr-only\">Sluiten</span>\r\n                </button>\r\n              </div>\r\n            )}\r\n\r\n            <div class={{ \"dso-body\": this.modalActive, \"dso-table-body\": true }}>\r\n              <slot></slot>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  private openModal() {\r\n    this.placeholderHeight = this.host.clientHeight;\r\n    this.modalActive = true;\r\n  }\r\n\r\n  private closeModal() {\r\n    this.placeholderHeight = undefined;\r\n    this.modalActive = false;\r\n  }\r\n\r\n  private setFocusTrap() {\r\n    if (this.modalActive && this.focusTrapElement && !this.trap) {\r\n      this.trap = createFocusTrap([this.host, this.focusTrapElement], {\r\n        escapeDeactivates: true,\r\n        clickOutsideDeactivates: (e) => {\r\n          if (e instanceof MouseEvent && e.composedPath()[0] === this.focusTrapElement) {\r\n            this.closeModal();\r\n\r\n            return false;\r\n          }\r\n\r\n          return true;\r\n        },\r\n        setReturnFocus: this.buttonElement ?? false,\r\n        onDeactivate: () => this.closeModal(),\r\n        tabbableOptions: {\r\n          getShadowRoot: true,\r\n        },\r\n      }).activate();\r\n    } else if (!this.modalActive && this.trap) {\r\n      this.trap?.deactivate();\r\n\r\n      delete this.trap;\r\n    }\r\n  }\r\n\r\n  private setResponsiveTable([dsoTable]: ResizeObserverEntry[]): void {\r\n    if (!dsoTable) {\r\n      throw new Error(\"No dsoTable found\");\r\n    }\r\n\r\n    const tableElement = dsoTable.target.querySelector(\"table\");\r\n\r\n    if (dsoTable && tableElement instanceof HTMLTableElement) {\r\n      this.isResponsive =\r\n        Math.floor(tableElement.getBoundingClientRect().width) > Math.floor(dsoTable.contentRect.width);\r\n    }\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"table.js","sourceRoot":"","sources":["../../../../src/components/table/table.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Element, Fragment, Host, Prop, State, h } from \"@stencil/core\";\r\nimport debounce from \"debounce\";\r\nimport { v4 } from \"uuid\";\r\n\r\n@Component({\r\n  tag: \"dso-table\",\r\n  styleUrl: \"table.scss\",\r\n  shadow: true,\r\n})\r\nexport class Table implements ComponentInterface {\r\n  private resizeObserver?: ResizeObserver;\r\n\r\n  private dialogElement?: HTMLDialogElement;\r\n\r\n  private labelledbyId = v4();\r\n\r\n  @Element()\r\n  host!: HTMLDsoTableElement;\r\n\r\n  /**\r\n   * Prevents the table being opened in a modal.\r\n   */\r\n  @Prop({ reflect: true })\r\n  noModal = false;\r\n\r\n  @State()\r\n  isResponsive?: boolean;\r\n\r\n  @State()\r\n  modalActive = false;\r\n\r\n  @State()\r\n  placeholderHeight?: number;\r\n\r\n  private startResponsiveBehavior(): void {\r\n    this.resizeObserver?.observe(this.host);\r\n  }\r\n\r\n  private dialogCloseEventListener = () => {\r\n    this.closeModal();\r\n  };\r\n\r\n  componentWillLoad(): void {\r\n    this.resizeObserver = new ResizeObserver(debounce((entries) => this.setResponsiveTable(entries), 200));\r\n  }\r\n\r\n  componentDidLoad(): void {\r\n    this.startResponsiveBehavior();\r\n  }\r\n\r\n  componentDidRender() {\r\n    if (this.modalActive) {\r\n      this.dialogElement?.showModal();\r\n    }\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.resizeObserver?.disconnect();\r\n  }\r\n\r\n  render() {\r\n    const caption = this.host.querySelector(\":scope > table > caption\")?.textContent?.trim();\r\n\r\n    return (\r\n      <Host is-responsive={this.isResponsive?.toString()}>\r\n        {this.modalActive && this.placeholderHeight && (\r\n          <div class=\"dso-table-placeholder\" style={{ height: `${this.placeholderHeight}px` }} />\r\n        )}\r\n\r\n        {this.modalActive ? (\r\n          <dialog\r\n            class=\"dso-modal\"\r\n            ref={(element) => (this.dialogElement = element)}\r\n            onClose={this.dialogCloseEventListener}\r\n          >\r\n            <div class=\"dso-dialog dso-table-dialog\" aria-labelledby={this.labelledbyId}>\r\n              <div class=\"dso-header\">\r\n                <h2 id={this.labelledbyId} class={{ \"sr-only\": !caption }}>\r\n                  {caption || \"Uitvergrote tabel dialoog\"}\r\n                </h2>\r\n                <button type=\"button\" class=\"dso-close\" onClick={() => this.closeModal()}>\r\n                  <dso-icon icon=\"times\"></dso-icon>\r\n                  <span class=\"sr-only\">Sluiten</span>\r\n                </button>\r\n              </div>\r\n\r\n              <div class=\"dso-body dso-table-body\">\r\n                <slot />\r\n              </div>\r\n            </div>\r\n          </dialog>\r\n        ) : (\r\n          <Fragment>\r\n            <div class=\"dso-table-utilities\" hidden={!this.isResponsive && this.noModal}>\r\n              {this.isResponsive && (\r\n                <div class=\"dso-responsive-message\">\r\n                  <span>beweeg de tabel van links naar rechts</span>\r\n                </div>\r\n              )}\r\n\r\n              {!this.noModal && (\r\n                <button type=\"button\" class=\"dso-tertiary open-modal-button\" onClick={() => this.openModal()}>\r\n                  <span class=\"sr-only\">tabel {caption ?? \"\"} </span>\r\n                  <span>vergroten</span>\r\n                  <dso-icon icon=\"external-link\"></dso-icon>\r\n                </button>\r\n              )}\r\n            </div>\r\n\r\n            <div class=\"dso-table-body\">\r\n              <slot />\r\n            </div>\r\n          </Fragment>\r\n        )}\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  private openModal() {\r\n    this.placeholderHeight = this.host.clientHeight;\r\n    this.modalActive = true;\r\n  }\r\n\r\n  private closeModal() {\r\n    this.placeholderHeight = undefined;\r\n    this.dialogElement?.close();\r\n    this.modalActive = false;\r\n  }\r\n\r\n  private setResponsiveTable([dsoTable]: ResizeObserverEntry[]): void {\r\n    if (!dsoTable) {\r\n      throw new Error(\"No dsoTable found\");\r\n    }\r\n\r\n    const tableElement = dsoTable.target.querySelector(\"table\");\r\n\r\n    if (dsoTable && tableElement instanceof HTMLTableElement) {\r\n      this.isResponsive =\r\n        Math.floor(tableElement.getBoundingClientRect().width) > Math.floor(dsoTable.contentRect.width);\r\n    }\r\n  }\r\n}\r\n"]}

package/dist/collection/components/tabs/components/tab.js

@@ -51,7 +51,6 @@ export class Tab {
         return {
             "active": {
                 "type": "boolean",
-                "attribute": "active",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -66,11 +65,11 @@ export class Tab {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "active"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -85,11 +84,11 @@ export class Tab {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "disabled"
             },
             "href": {
                 "type": "string",
-                "attribute": "href",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -104,7 +103,8 @@ export class Tab {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "href"
             }
         };
     }

package/dist/collection/components/tabs/tabs.js

@@ -64,7 +64,7 @@ export class Tabs {
         (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (h(Host, { key: '7f50c4cabce9f19a9708a5f357bf127d993fd273' }, h("div", { key: 'd08f63a0e4af86ec0e28cdeb3204a352b736365a', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, h("slot", { key: '2aad0a3f00f8a836ff64f3a579e988c609a9a892' })), h("div", { key: '16f208eb54582aa4d8f05bafe73c8172c378ac11', role: "tabpanel", tabindex: "0" }, h("slot", { key: '6b8cb70153160f82c616d2ebd2b519a10a4d317c', name: "panel" }))));
+        return (h(Host, { key: '6cac5b5aadaee63469ae51fe3edca2127e37a4c6' }, h("div", { key: 'b176afce53f463b5b7c53fb5d14e415506c40194', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, h("slot", { key: '0db1ce93d3bb4b6ff38b90b5a0fd620573680aa9' })), h("div", { key: '33cd57a51cb22a03565b1a805c6839ed3eea6a5b', role: "tabpanel", tabindex: "0" }, h("slot", { key: '3c3ea0615970882bed8cbc785118fa01cf489ef7', name: "panel" }))));
     }
     static get is() { return "dso-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tijdreis-banner/tijdreis-banner.js

@@ -1,7 +1,7 @@
 import { Fragment, h } from "@stencil/core";
 export class TijdreisBanner {
     render() {
-        return (h(Fragment, { key: 'c60839046508ee01ec7e36746358a823f57431a5' }, h("dso-icon", { key: '9a7b68dc81d3bcf9573f93b4fc1a07315b90da70', icon: "clock" }), h("slot", { key: '31f22464c27b57cd29d077ba9d9232c05f3d24c9' }), h("slot", { key: 'b60530565182602ea5c828cd55763e0e17808c33', name: "button" })));
+        return (h(Fragment, { key: 'cb57567ddfb405ed5580f3056824df6f3125e57d' }, h("dso-icon", { key: 'e4a8892dabbd44bc9ca7f1548c065473537aaa45', icon: "clock" }), h("slot", { key: 'facdf989c45f44e10336ca5d3b7319e48929ca82' }), h("slot", { key: '0bc0625232374f0df07b23186e3f51a26632a76b', name: "button" })));
     }
     static get is() { return "dso-tijdreis-banner"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/toggletip/toggletip.js

@@ -44,7 +44,7 @@ export class Toggletip {
         };
     }
     render() {
-        return (h(Fragment, { key: '798565df2cd855ffe6018ad49dea374db1898196' }, h("dso-info-button", { key: 'c8be822ae6871fa19e97c4e83cc6be3f030b57f9', "aria-describedby": "toggle", onClick: this.click, label: this.label, active: this.active, secondary: this.secondary, ref: (element) => (this.infoButton = element) }), h("dso-tooltip", { key: '737d95706df31ef8fdc5f098d8a354a6c2abf42a', stateless: true, descriptive: true, id: "toggle", strategy: "absolute", active: this.active, position: this.position, small: this.small }, h("slot", { key: '3f95e812cd4d4c53d584055c75fe2171ffbe52f7' }))));
+        return (h(Fragment, { key: '5d0c70968e78501d56ee3d10cd72bf5d8cb72a7a' }, h("dso-info-button", { key: 'a420816c0fa911415ffced3f8e5ef07876710009', "aria-describedby": "toggle", onClick: this.click, label: this.label, active: this.active, secondary: this.secondary, ref: (element) => (this.infoButton = element) }), h("dso-tooltip", { key: '943c676aaa520c950f25c37fd85fff50fd1fa692', stateless: true, descriptive: true, id: "toggle", strategy: "absolute", active: this.active, position: this.position, small: this.small }, h("slot", { key: 'a08af99744cf49d69fa3b153afe71730a7bcbb00' }))));
     }
     static get is() { return "dso-toggletip"; }
     static get encapsulation() { return "shadow"; }
@@ -62,7 +62,6 @@ export class Toggletip {
         return {
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -78,11 +77,11 @@ export class Toggletip {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "label",
                 "defaultValue": "\"Toelichting\""
             },
             "position": {
                 "type": "string",
-                "attribute": "position",
                 "mutable": false,
                 "complexType": {
                     "original": "Placement",
@@ -104,11 +103,11 @@ export class Toggletip {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "position",
                 "defaultValue": "\"right\""
             },
             "small": {
                 "type": "boolean",
-                "attribute": "small",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -123,11 +122,11 @@ export class Toggletip {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "small"
             },
             "secondary": {
                 "type": "boolean",
-                "attribute": "secondary",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -142,7 +141,8 @@ export class Toggletip {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "secondary"
             }
         };
     }

package/dist/collection/components/tooltip/tooltip.js

@@ -189,7 +189,7 @@ export class Tooltip {
         }
     }
     render() {
-        return (h(Host, { key: '86f938d14b357cb83b9e4921a518d536a2ae463e', class: { hidden: this.hidden }, role: "tooltip", onClick: this.listenClick }, h("div", { key: '450fd1ea4ae035a8522e40d51bd4a2d417c3e7ea', class: clsx("tooltip", { in: this.active }) }, !this.noArrow && h("div", { key: '710d61935e51fa51daad9b05d84873b99312cbb3', "data-popper-arrow": true, class: "tooltip-arrow" }), h("div", { key: '508e6ed37bdece8ffbdf463ed5f2566b77235c84', "aria-hidden": !this.descriptive || undefined, class: clsx("tooltip-inner", { "dso-small": this.small }) }, h("slot", { key: '640501feb2b726e4cb128b5fe4def81f6ad811ec' })))));
+        return (h(Host, { key: '658a353a1fda2f9b9ae4df45cb29e926936fc223', class: { hidden: this.hidden }, role: "tooltip", onClick: this.listenClick }, h("div", { key: '4db68ba328d735039de5baac038133d881aaf9b8', class: clsx("tooltip", { in: this.active }) }, !this.noArrow && h("div", { key: 'a6a45f375b60fb7e069e9512f03fa8e4e80ec829', "data-popper-arrow": true, class: "tooltip-arrow" }), h("div", { key: '9a30fa50784c44a8ac066fb7da3b3c25b3489fbd', "aria-hidden": !this.descriptive || undefined, class: clsx("tooltip-inner", { "dso-small": this.small }) }, h("slot", { key: '0d9bc6e77521493e665e77d05c67eec69d758ca9' })))));
     }
     activatePopper() {
         var _a;
@@ -248,7 +248,6 @@ export class Tooltip {
         return {
             "descriptive": {
                 "type": "boolean",
-                "attribute": "descriptive",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -264,11 +263,11 @@ export class Tooltip {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "descriptive",
                 "defaultValue": "false"
             },
             "position": {
                 "type": "string",
-                "attribute": "position",
                 "mutable": false,
                 "complexType": {
                     "original": "Placement",
@@ -290,11 +289,11 @@ export class Tooltip {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "position",
                 "defaultValue": "\"top\""
             },
             "strategy": {
                 "type": "string",
-                "attribute": "strategy",
                 "mutable": false,
                 "complexType": {
                     "original": "\"auto\" | \"absolute\" | \"fixed\"",
@@ -310,11 +309,11 @@ export class Tooltip {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "strategy",
                 "defaultValue": "\"auto\""
             },
             "noArrow": {
                 "type": "boolean",
-                "attribute": "no-arrow",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -330,11 +329,11 @@ export class Tooltip {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "no-arrow",
                 "defaultValue": "false"
             },
             "stateless": {
                 "type": "boolean",
-                "attribute": "stateless",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -349,11 +348,11 @@ export class Tooltip {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "stateless"
             },
             "small": {
                 "type": "boolean",
-                "attribute": "small",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -368,11 +367,11 @@ export class Tooltip {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "small"
             },
             "active": {
                 "type": "boolean",
-                "attribute": "active",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -388,6 +387,7 @@ export class Tooltip {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "active",
                 "defaultValue": "false"
             }
         };

package/dist/collection/components/tree-view/tree-view.css

@@ -140,5 +140,5 @@
   margin: -1px;
   border: 0;
   overflow: hidden;
-  clip-path: inset(0);
+  clip-path: rect(0 0 0 0);
 }

package/dist/collection/components/tree-view/tree-view.js

@@ -174,7 +174,7 @@ export class TreeView {
     }
     render() {
         var _a;
-        return (h("div", { key: 'd24bd4e931e11e6495a51faef9bdee75a7eb0e49', id: "tree", class: "dso-tree", onKeyDown: (e) => this.keyDownListener(e), ref: (element) => (this.tree = element) }, h("ul", { key: '9128a33f3e85620f530266deb7753b2c64d76eb7', role: "tree", "aria-label": "Objectenboom" }, (_a = this.collection) === null || _a === void 0 ? void 0 : _a.map((item, index) => (h(DsoTreeItem, { owner: this, ancestors: [], item: item, index: index, level: 1, setSize: this.collection.length }))))));
+        return (h("div", { key: 'c9d82896a208dea70197ce9927c5402a5763259a', id: "tree", class: "dso-tree", onKeyDown: (e) => this.keyDownListener(e), ref: (element) => (this.tree = element) }, h("ul", { key: '10a57e188cf106ca9ef9a0d7d6c4a7e8a3a1df6f', role: "tree", "aria-label": "Objectenboom" }, (_a = this.collection) === null || _a === void 0 ? void 0 : _a.map((item, index) => (h(DsoTreeItem, { owner: this, ancestors: [], item: item, index: index, level: 1, setSize: this.collection.length }))))));
     }
     static get is() { return "dso-tree-view"; }
     static get encapsulation() { return "shadow"; }
@@ -192,7 +192,6 @@ export class TreeView {
         return {
             "collection": {
                 "type": "unknown",
-                "attribute": "collection",
                 "mutable": false,
                 "complexType": {
                     "original": "TreeViewItem[]",

package/dist/collection/components/tree-view/tree-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree-view.js","sourceRoot":"","sources":["../../../../src/components/tree-view/tree-view.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Event, EventEmitter, Method, Prop, h } from \"@stencil/core\";\r\n\r\nimport { DsoTreeItem } from \"./tree-item\";\r\nimport { TreeViewItem, TreeViewPointerEvent } from \"./tree-view.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-tree-view\",\r\n  styleUrl: \"./tree-view.scss\",\r\n  shadow: true,\r\n})\r\nexport class TreeView implements ComponentInterface {\r\n  private tree?: HTMLElement;\r\n\r\n  /**\r\n   * The collection of TreeViewItems\r\n   */\r\n  @Prop()\r\n  collection!: TreeViewItem[];\r\n\r\n  /**\r\n   * Emitted when a tree view item is opened.\r\n   * The `detail` property of the `CustomEvent` will contain the complete path of TreeViewItems from the\r\n   * root to the item that is emitting the open event. The consumer of the event is responsible for updating\r\n   * the TreeView's collection (usually set the open state on the last TreeViewItem in path).\r\n   */\r\n  @Event()\r\n  dsoOpenItem!: EventEmitter<TreeViewItem[]>;\r\n\r\n  /**\r\n   * Emitted when a tree view item is closed.\r\n   * The `detail` property of the `CustomEvent` will contain the complete path of TreeViewItems from the\r\n   * root to the item that is emitting the close event. The consumer of the event is responsible for updating\r\n   * the TreeView's collection (usually set the closed state on the last TreeViewItem in path).\r\n   */\r\n  @Event()\r\n  dsoCloseItem!: EventEmitter<TreeViewItem[]>;\r\n\r\n  /**\r\n   * Emitted when a tree view item is clicked.\r\n   * The `detail` property of the `CustomEvent` will contain an object with:\r\n   * `path` = the complete path of TreeViewItems from the root to the item that is emitting the clicked event.\r\n   * `originalEvent` = the original click event.\r\n   * The consumer of the event is responsible for updating the TreeView's collection (usually set the active\r\n   * state on the last TreeViewItem in path and clear all other active item states).\r\n   */\r\n  @Event()\r\n  dsoClickItem!: EventEmitter<TreeViewPointerEvent>;\r\n\r\n  /**\r\n   * Set focus on the last item in the specified path.\r\n   * The consumer is responsible for providing a TreeView collection where the last item is visible.\r\n   * @async\r\n   * @returns Whether the item was found.\r\n   */\r\n  @Method()\r\n  async focusItem(path: TreeViewItem[]): Promise<boolean> {\r\n    const tree = this.tree;\r\n\r\n    if (!tree || path.length === 0) {\r\n      return false;\r\n    }\r\n\r\n    const itemToFocus = path[path.length - 1];\r\n    if (!itemToFocus) {\r\n      throw new Error(\"No itemToFocus found\");\r\n    }\r\n\r\n    const elementToFocus = (Array.from(tree.querySelectorAll(\"p\") ?? []) as HTMLElement[])\r\n      .filter((item) => item.offsetWidth > 0 && item.offsetHeight > 0)\r\n      .find((item) => item.dataset[\"itemId\"] === itemToFocus.id);\r\n\r\n    if (!elementToFocus) {\r\n      return false;\r\n    }\r\n\r\n    TreeView.setFocus(tree, elementToFocus);\r\n\r\n    return true;\r\n  }\r\n\r\n  private keyDownListener = (event: KeyboardEvent) => {\r\n    if (event.defaultPrevented) {\r\n      return;\r\n    }\r\n\r\n    const isIndexLetter = (str: string) => str.length === 1 && str.match(/\\S/);\r\n\r\n    const tree = event\r\n      .composedPath()\r\n      .find((item) => (item instanceof HTMLElement ? item.className === \"dso-tree\" : false));\r\n\r\n    if (!(event.target instanceof HTMLParagraphElement) || !(tree instanceof HTMLElement)) {\r\n      return;\r\n    }\r\n\r\n    switch (event.key) {\r\n      case \"ArrowDown\":\r\n        TreeView.moveFocus(tree, event.target, \"next\");\r\n        break;\r\n      case \"ArrowUp\":\r\n        TreeView.moveFocus(tree, event.target, \"previous\");\r\n        break;\r\n      case \"ArrowRight\":\r\n        TreeView.expandItemOrFocusChild(tree, event.target);\r\n        break;\r\n      case \"ArrowLeft\":\r\n        TreeView.collapseItemOrFocusParent(tree, event.target);\r\n        break;\r\n      case \"End\":\r\n        TreeView.moveFocus(tree, event.target, \"last\");\r\n        break;\r\n      case \"Home\":\r\n        TreeView.moveFocus(tree, event.target, \"first\");\r\n        break;\r\n      case \"Enter\":\r\n      case \" \":\r\n        event.target.click();\r\n        break;\r\n      default:\r\n        if (isIndexLetter(event.key)) {\r\n          if (TreeView.setFocusByFirstCharacter(tree, event.target, event.key, event.shiftKey)) {\r\n            break;\r\n          }\r\n        }\r\n\r\n        return;\r\n    }\r\n\r\n    event.preventDefault();\r\n  };\r\n\r\n  // eslint-disable-next-line @stencil-community/own-props-must-be-private -- Omdat this als TreeView instance aan Functionele Components wordt gegeven\r\n  itemClick = (event: MouseEvent, ancestors: TreeViewItem[], item: TreeViewItem) => {\r\n    if (!(event.target instanceof HTMLElement)) {\r\n      return;\r\n    }\r\n\r\n    const contentElement = event.target.closest(\".tree-content\");\r\n\r\n    if (contentElement) {\r\n      const tree = event\r\n        .composedPath()\r\n        .find((eventTarget) => (eventTarget instanceof HTMLElement ? eventTarget.className === \"dso-tree\" : false));\r\n      if (!(contentElement instanceof HTMLParagraphElement) || !(tree instanceof HTMLElement)) {\r\n        return;\r\n      }\r\n\r\n      TreeView.setFocus(tree, contentElement);\r\n      this.dsoClickItem.emit({ path: [...ancestors, item], originalEvent: event });\r\n\r\n      return;\r\n    }\r\n\r\n    if (item.open) {\r\n      this.dsoCloseItem.emit([...ancestors, item]);\r\n    } else {\r\n      this.dsoOpenItem.emit([...ancestors, item]);\r\n    }\r\n  };\r\n\r\n  private static setFocus(tree: HTMLElement, target: HTMLElement) {\r\n    if (target) {\r\n      (Array.from(tree.querySelectorAll(\"p\")) as HTMLElement[])\r\n        .filter((item) => item.tabIndex === 0)\r\n        .forEach((item) => (item.tabIndex = -1));\r\n\r\n      target.tabIndex = 0;\r\n      target.focus();\r\n    }\r\n  }\r\n\r\n  private static moveFocus(tree: HTMLElement, el: HTMLElement, moveTo: \"first\" | \"previous\" | \"next\" | \"last\"): void {\r\n    const focusableItems = (Array.from(tree.querySelectorAll(\"p\")) as HTMLElement[]).filter(\r\n      (item) => item.offsetWidth > 0 && item.offsetHeight > 0,\r\n    );\r\n\r\n    let index = 0;\r\n    switch (moveTo) {\r\n      case \"first\":\r\n        index = 0;\r\n        break;\r\n      case \"previous\":\r\n        index = focusableItems.indexOf(el) - 1;\r\n        break;\r\n      case \"next\":\r\n        index = focusableItems.indexOf(el) + 1;\r\n        break;\r\n      case \"last\":\r\n        index = focusableItems.length - 1;\r\n        break;\r\n    }\r\n\r\n    const focusableItem = focusableItems[index];\r\n    if (!focusableItem) {\r\n      throw new Error(\"No focusableItem found\");\r\n    }\r\n\r\n    TreeView.setFocus(tree, focusableItem);\r\n  }\r\n\r\n  private static expandItemOrFocusChild(tree: HTMLElement, target: HTMLElement): void {\r\n    if (target?.getAttribute(\"aria-expanded\") === \"true\") {\r\n      TreeView.moveFocus(tree, target, \"next\");\r\n    } else {\r\n      const controlElement = target.previousElementSibling?.firstElementChild;\r\n      if (controlElement instanceof HTMLElement) {\r\n        controlElement.click();\r\n      }\r\n    }\r\n  }\r\n\r\n  private static collapseItemOrFocusParent(tree: HTMLElement, target: HTMLElement): void {\r\n    if (target?.getAttribute(\"aria-expanded\") === \"true\") {\r\n      const controlElement = target.previousElementSibling?.firstElementChild;\r\n      if (controlElement instanceof HTMLElement) {\r\n        controlElement.click();\r\n      }\r\n    } else {\r\n      const parentTarget = target?.parentElement?.parentElement?.previousElementSibling;\r\n      if (parentTarget instanceof HTMLElement) {\r\n        TreeView.setFocus(tree, parentTarget);\r\n      }\r\n    }\r\n  }\r\n\r\n  private static setFocusByFirstCharacter(\r\n    tree: HTMLElement,\r\n    el: HTMLElement,\r\n    char: string,\r\n    backwards: boolean,\r\n  ): boolean {\r\n    const focusableItems = (Array.from(tree.querySelectorAll(\"p\")) as HTMLElement[]).filter(\r\n      (item) => item.offsetWidth > 0 && item.offsetHeight > 0,\r\n    );\r\n\r\n    if (backwards) {\r\n      focusableItems.reverse();\r\n    }\r\n\r\n    const current = focusableItems.indexOf(el);\r\n\r\n    char = char.toLowerCase();\r\n    let nextItem = focusableItems.find(\r\n      (item, index) => index > current && item.textContent?.toLowerCase().startsWith(char),\r\n    );\r\n    if (!nextItem) {\r\n      nextItem = focusableItems.find(\r\n        (item, index) => index < current && item.textContent?.toLowerCase().startsWith(char),\r\n      );\r\n    }\r\n\r\n    if (nextItem) {\r\n      TreeView.setFocus(tree, nextItem);\r\n      return true;\r\n    }\r\n\r\n    return false;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div\r\n        id=\"tree\"\r\n        class=\"dso-tree\"\r\n        onKeyDown={(e) => this.keyDownListener(e)}\r\n        ref={(element) => (this.tree = element)}\r\n      >\r\n        <ul role=\"tree\" aria-label=\"Objectenboom\">\r\n          {this.collection?.map((item, index) => (\r\n            <DsoTreeItem\r\n              owner={this}\r\n              ancestors={[]}\r\n              item={item}\r\n              index={index}\r\n              level={1}\r\n              setSize={this.collection.length}\r\n            ></DsoTreeItem>\r\n          ))}\r\n        </ul>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"tree-view.js","sourceRoot":"","sources":["../../../../src/components/tree-view/tree-view.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Event, EventEmitter, Method, Prop, h } from \"@stencil/core\";\r\n\r\nimport { DsoTreeItem } from \"./tree-item\";\r\nimport { TreeViewItem, TreeViewPointerEvent } from \"./tree-view.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-tree-view\",\r\n  styleUrl: \"./tree-view.scss\",\r\n  shadow: true,\r\n})\r\nexport class TreeView implements ComponentInterface {\r\n  private tree?: HTMLElement;\r\n\r\n  /**\r\n   * The collection of TreeViewItems\r\n   */\r\n  @Prop()\r\n  collection!: TreeViewItem[];\r\n\r\n  /**\r\n   * Emitted when a tree view item is opened.\r\n   * The `detail` property of the `CustomEvent` will contain the complete path of TreeViewItems from the\r\n   * root to the item that is emitting the open event. The consumer of the event is responsible for updating\r\n   * the TreeView's collection (usually set the open state on the last TreeViewItem in path).\r\n   */\r\n  @Event()\r\n  dsoOpenItem!: EventEmitter<TreeViewItem[]>;\r\n\r\n  /**\r\n   * Emitted when a tree view item is closed.\r\n   * The `detail` property of the `CustomEvent` will contain the complete path of TreeViewItems from the\r\n   * root to the item that is emitting the close event. The consumer of the event is responsible for updating\r\n   * the TreeView's collection (usually set the closed state on the last TreeViewItem in path).\r\n   */\r\n  @Event()\r\n  dsoCloseItem!: EventEmitter<TreeViewItem[]>;\r\n\r\n  /**\r\n   * Emitted when a tree view item is clicked.\r\n   * The `detail` property of the `CustomEvent` will contain an object with:\r\n   * `path` = the complete path of TreeViewItems from the root to the item that is emitting the clicked event.\r\n   * `originalEvent` = the original click event.\r\n   * The consumer of the event is responsible for updating the TreeView's collection (usually set the active\r\n   * state on the last TreeViewItem in path and clear all other active item states).\r\n   */\r\n  @Event()\r\n  dsoClickItem!: EventEmitter<TreeViewPointerEvent>;\r\n\r\n  /**\r\n   * Set focus on the last item in the specified path.\r\n   * The consumer is responsible for providing a TreeView collection where the last item is visible.\r\n   * @async\r\n   * @returns Whether the item was found.\r\n   */\r\n  @Method()\r\n  async focusItem(path: TreeViewItem[]): Promise<boolean> {\r\n    const tree = this.tree;\r\n\r\n    if (!tree || path.length === 0) {\r\n      return false;\r\n    }\r\n\r\n    const itemToFocus = path[path.length - 1];\r\n    if (!itemToFocus) {\r\n      throw new Error(\"No itemToFocus found\");\r\n    }\r\n\r\n    const elementToFocus = (Array.from(tree.querySelectorAll(\"p\") ?? []) as HTMLElement[])\r\n      .filter((item) => item.offsetWidth > 0 && item.offsetHeight > 0)\r\n      .find((item) => item.dataset[\"itemId\"] === itemToFocus.id);\r\n\r\n    if (!elementToFocus) {\r\n      return false;\r\n    }\r\n\r\n    TreeView.setFocus(tree, elementToFocus);\r\n\r\n    return true;\r\n  }\r\n\r\n  private keyDownListener = (event: KeyboardEvent) => {\r\n    if (event.defaultPrevented) {\r\n      return;\r\n    }\r\n\r\n    const isIndexLetter = (str: string) => str.length === 1 && str.match(/\\S/);\r\n\r\n    const tree = event\r\n      .composedPath()\r\n      .find((item) => (item instanceof HTMLElement ? item.className === \"dso-tree\" : false));\r\n\r\n    if (!(event.target instanceof HTMLParagraphElement) || !(tree instanceof HTMLElement)) {\r\n      return;\r\n    }\r\n\r\n    switch (event.key) {\r\n      case \"ArrowDown\":\r\n        TreeView.moveFocus(tree, event.target, \"next\");\r\n        break;\r\n      case \"ArrowUp\":\r\n        TreeView.moveFocus(tree, event.target, \"previous\");\r\n        break;\r\n      case \"ArrowRight\":\r\n        TreeView.expandItemOrFocusChild(tree, event.target);\r\n        break;\r\n      case \"ArrowLeft\":\r\n        TreeView.collapseItemOrFocusParent(tree, event.target);\r\n        break;\r\n      case \"End\":\r\n        TreeView.moveFocus(tree, event.target, \"last\");\r\n        break;\r\n      case \"Home\":\r\n        TreeView.moveFocus(tree, event.target, \"first\");\r\n        break;\r\n      case \"Enter\":\r\n      case \" \":\r\n        event.target.click();\r\n        break;\r\n      default:\r\n        if (isIndexLetter(event.key)) {\r\n          if (TreeView.setFocusByFirstCharacter(tree, event.target, event.key, event.shiftKey)) {\r\n            break;\r\n          }\r\n        }\r\n\r\n        return;\r\n    }\r\n\r\n    event.preventDefault();\r\n  };\r\n\r\n  // eslint-disable-next-line @stencil-community/own-props-must-be-private -- Omdat this als TreeView instance aan Functionele Components wordt gegeven\r\n  itemClick = (event: MouseEvent, ancestors: TreeViewItem[], item: TreeViewItem) => {\r\n    if (!(event.target instanceof HTMLElement)) {\r\n      return;\r\n    }\r\n\r\n    const contentElement = event.target.closest(\".tree-content\");\r\n\r\n    if (contentElement) {\r\n      const tree = event\r\n        .composedPath()\r\n        .find((eventTarget) => (eventTarget instanceof HTMLElement ? eventTarget.className === \"dso-tree\" : false));\r\n      if (!(contentElement instanceof HTMLParagraphElement) || !(tree instanceof HTMLElement)) {\r\n        return;\r\n      }\r\n\r\n      TreeView.setFocus(tree, contentElement);\r\n      this.dsoClickItem.emit({ path: [...ancestors, item], originalEvent: event });\r\n\r\n      return;\r\n    }\r\n\r\n    if (item.open) {\r\n      this.dsoCloseItem.emit([...ancestors, item]);\r\n    } else {\r\n      this.dsoOpenItem.emit([...ancestors, item]);\r\n    }\r\n  };\r\n\r\n  private static setFocus(tree: HTMLElement, target: HTMLElement) {\r\n    if (target) {\r\n      (Array.from(tree.querySelectorAll(\"p\")) as HTMLElement[])\r\n        .filter((item) => item.tabIndex === 0)\r\n        .forEach((item) => (item.tabIndex = -1));\r\n\r\n      target.tabIndex = 0;\r\n      target.focus();\r\n    }\r\n  }\r\n\r\n  private static moveFocus(tree: HTMLElement, el: HTMLElement, moveTo: \"first\" | \"previous\" | \"next\" | \"last\"): void {\r\n    const focusableItems = (Array.from(tree.querySelectorAll(\"p\")) as HTMLElement[]).filter(\r\n      (item) => item.offsetWidth > 0 && item.offsetHeight > 0,\r\n    );\r\n\r\n    let index = 0;\r\n    switch (moveTo) {\r\n      case \"first\":\r\n        index = 0;\r\n        break;\r\n      case \"previous\":\r\n        index = focusableItems.indexOf(el) - 1;\r\n        break;\r\n      case \"next\":\r\n        index = focusableItems.indexOf(el) + 1;\r\n        break;\r\n      case \"last\":\r\n        index = focusableItems.length - 1;\r\n        break;\r\n    }\r\n\r\n    const focusableItem = focusableItems[index];\r\n    if (!focusableItem) {\r\n      throw new Error(\"No focusableItem found\");\r\n    }\r\n\r\n    TreeView.setFocus(tree, focusableItem);\r\n  }\r\n\r\n  private static expandItemOrFocusChild(tree: HTMLElement, target: HTMLElement): void {\r\n    if (target?.getAttribute(\"aria-expanded\") === \"true\") {\r\n      TreeView.moveFocus(tree, target, \"next\");\r\n    } else {\r\n      const controlElement = target.previousElementSibling?.firstElementChild;\r\n      if (controlElement instanceof HTMLElement) {\r\n        controlElement.click();\r\n      }\r\n    }\r\n  }\r\n\r\n  private static collapseItemOrFocusParent(tree: HTMLElement, target: HTMLElement): void {\r\n    if (target?.getAttribute(\"aria-expanded\") === \"true\") {\r\n      const controlElement = target.previousElementSibling?.firstElementChild;\r\n      if (controlElement instanceof HTMLElement) {\r\n        controlElement.click();\r\n      }\r\n    } else {\r\n      const parentTarget = target?.parentElement?.parentElement?.previousElementSibling;\r\n      if (parentTarget instanceof HTMLElement) {\r\n        TreeView.setFocus(tree, parentTarget);\r\n      }\r\n    }\r\n  }\r\n\r\n  private static setFocusByFirstCharacter(\r\n    tree: HTMLElement,\r\n    el: HTMLElement,\r\n    char: string,\r\n    backwards: boolean,\r\n  ): boolean {\r\n    const focusableItems = (Array.from(tree.querySelectorAll(\"p\")) as HTMLElement[]).filter(\r\n      (item) => item.offsetWidth > 0 && item.offsetHeight > 0,\r\n    );\r\n\r\n    if (backwards) {\r\n      focusableItems.reverse();\r\n    }\r\n\r\n    const current = focusableItems.indexOf(el);\r\n\r\n    char = char.toLowerCase();\r\n    let nextItem = focusableItems.find(\r\n      (item, index) => index > current && item.textContent?.toLowerCase().startsWith(char),\r\n    );\r\n    if (!nextItem) {\r\n      nextItem = focusableItems.find(\r\n        (item, index) => index < current && item.textContent?.toLowerCase().startsWith(char),\r\n      );\r\n    }\r\n\r\n    if (nextItem) {\r\n      TreeView.setFocus(tree, nextItem);\r\n      return true;\r\n    }\r\n\r\n    return false;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div\r\n        id=\"tree\"\r\n        class=\"dso-tree\"\r\n        onKeyDown={(e) => this.keyDownListener(e)}\r\n        ref={(element) => (this.tree = element)}\r\n      >\r\n        <ul role=\"tree\" aria-label=\"Objectenboom\">\r\n          {this.collection?.map((item, index) => (\r\n            <DsoTreeItem\r\n              owner={this}\r\n              ancestors={[]}\r\n              item={item}\r\n              index={index}\r\n              level={1}\r\n              setSize={this.collection.length}\r\n            ></DsoTreeItem>\r\n          ))}\r\n        </ul>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/viewer-grid/viewer-grid.css

@@ -41,7 +41,7 @@ button::-moz-focus-inner {
   margin: -1px;
   border: 0;
   overflow: hidden;
-  clip-path: inset(0);
+  clip-path: rect(0 0 0 0);
 }
 
 .overlay-close-button {