@dso-toolkit/core 63.0.0 → 65.0.0

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

@@ -0,0 +1,105 @@
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+:host {
+  display: block;
+  border-color: #39870c;
+  margin-block-end: -1px;
+}
+
+@media screen and (max-width: 767px) {
+  :host {
+    margin-block: 10px;
+  }
+  :host(:first-child) {
+    margin-block-start: 0;
+  }
+}
+:host([active]:not([active=false])) [role=tab], :host([active]:not([active=false])) [role=tab]:active, :host([active]:not([active=false])) [role=tab]:focus, :host([active]:not([active=false])) [role=tab]:hover, :host([active]:not([active=false])) [role=tab]:visited {
+  background-color: #fff;
+  border: 1px solid #39870c;
+  border-block-end-color: #fff;
+  color: #39870c;
+  cursor: default;
+}
+@media screen and (max-width: 767px) {
+  :host([active]:not([active=false])) [role=tab], :host([active]:not([active=false])) [role=tab]:active, :host([active]:not([active=false])) [role=tab]:focus, :host([active]:not([active=false])) [role=tab]:hover, :host([active]:not([active=false])) [role=tab]:visited {
+    border-block-end-color: #39870c;
+  }
+}
+
+:host([disabled]:not([disabled=false])) [role=tab] {
+  color: #999;
+}
+:host([disabled]:not([disabled=false])) [role=tab]:hover, :host([disabled]:not([disabled=false])) [role=tab]:focus {
+  color: #999;
+  text-decoration: none;
+  cursor: default;
+  background-color: transparent;
+}
+@media screen and (max-width: 767px) {
+  :host([disabled]:not([disabled=false])) [role=tab]:hover, :host([disabled]:not([disabled=false])) [role=tab]:focus {
+    border-block-end-color: #fff;
+  }
+}
+
+a {
+  text-decoration: none;
+}
+a:hover, a:focus-visible {
+  text-decoration: none;
+}
+a:active {
+  text-decoration: underline;
+}
+a:visited {
+  color: #666;
+}
+
+button {
+  font-family: inherit;
+  font-size: inherit;
+  background-color: transparent;
+}
+
+[role=tab] {
+  font-weight: bold;
+  cursor: pointer;
+  display: block;
+  min-block-size: 56px;
+  border: 1px solid transparent;
+  border-radius: 4px 4px 0 0;
+  color: #666;
+  line-height: 1.5;
+  padding-block: 15px;
+  padding-inline: 23px;
+}
+[role=tab]:hover {
+  border-color: #e5e5e5 #e5e5e5 #e5e5e5;
+}
+[role=tab]:hover, [role=tab]:focus {
+  text-decoration: none;
+  background-color: #e5e5e5;
+}
+[role=tab]:active, [role=tab]:focus, [role=tab]:hover {
+  background-color: #f2f2f2;
+  border: 1px solid transparent;
+  border-block-end-color: #39870c;
+  text-decoration: none;
+}
+@media screen and (max-width: 767px) {
+  [role=tab]:active, [role=tab]:focus, [role=tab]:hover {
+    border-block-end-color: #fff;
+  }
+}
+@media screen and (max-width: 767px) {
+  [role=tab] {
+    border-color: #fff;
+    border-radius: 8px;
+    padding-block: 18px;
+    padding-inline: 20px;
+  }
+}

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

@@ -0,0 +1,158 @@
+import { h } from "@stencil/core";
+import { isModifiedEvent } from "../../../utils/is-modified-event";
+/**
+ * @slot - The label for this tab
+ */
+export class Tab {
+    constructor() {
+        this.emitEvent = (e) => {
+            this.dsoTabSwitch.emit({
+                originalEvent: e,
+                isModifiedEvent: e instanceof MouseEvent ? isModifiedEvent(e) : false,
+            });
+        };
+        this.keyUpHandler = (e) => {
+            if (e.key === " " && !this.disabled && !this.active) {
+                this.emitEvent(e);
+            }
+        };
+        this.clickHandler = (e) => {
+            if ((this.disabled && this.href) || this.active) {
+                e.preventDefault();
+            }
+            else {
+                this.emitEvent(e);
+            }
+        };
+        this.active = undefined;
+        this.disabled = undefined;
+        this.href = undefined;
+    }
+    /**
+     * @internal
+     */
+    async _dsoFocus() {
+        var _a;
+        (_a = this.anchorOrButtonRef) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    render() {
+        return this.href ? (h("a", Object.assign({ role: "tab", href: this.href, onKeyUp: this.keyUpHandler, onClick: this.clickHandler, "aria-selected": this.active ? "true" : "false" }, (!this.active ? { tabIndex: -1 } : {}), { ref: (element) => (this.anchorOrButtonRef = element) }), h("slot", null))) : (h("button", Object.assign({ role: "tab", type: "button", disabled: this.disabled, onClick: this.clickHandler, "aria-selected": this.active ? "true" : "false" }, (!this.active ? { tabIndex: -1 } : {}), { ref: (element) => (this.anchorOrButtonRef = element) }), h("slot", null)));
+    }
+    static get is() { return "dso-tab"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tab.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tab.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes the tab active. The tab for which the tabpanel is visible is the active tab."
+                },
+                "attribute": "active",
+                "reflect": true
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the tab. A disabled tab cannot be activated and it's tabpanel cannot be shown."
+                },
+                "attribute": "disabled",
+                "reflect": true
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The optional href of the tab. Creates an anchor if present. Creates a button if absent."
+                },
+                "attribute": "href",
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsoTabSwitch",
+                "name": "dsoTabSwitch",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user activates tab via click or arrow keys followed by space or enter."
+                },
+                "complexType": {
+                    "original": "TabsSwitchEvent",
+                    "resolved": "TabsSwitchEvent",
+                    "references": {
+                        "TabsSwitchEvent": {
+                            "location": "import",
+                            "path": "../tabs.interfaces",
+                            "id": "src/components/tabs/tabs.interfaces.ts::TabsSwitchEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "_dsoFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=tab.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tab.js","sourceRoot":"","sources":["../../../../../src/components/tabs/components/tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACzF,OAAO,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAGnE;;GAEG;AAMH,MAAM,OAAO,GAAG;;QAsCN,cAAS,GAAG,CAAC,CAA6B,EAAE,EAAE;YACpD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;gBACrB,aAAa,EAAE,CAAC;gBAChB,eAAe,EAAE,CAAC,YAAY,UAAU,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK;aACtE,CAAC,CAAC;QACL,CAAC,CAAC;QAEM,iBAAY,GAAG,CAAC,CAAgB,EAAE,EAAE;YAC1C,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;gBACpD,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;YACpB,CAAC;QACH,CAAC,CAAC;QAEM,iBAAY,GAAG,CAAC,CAAa,EAAE,EAAE;YACvC,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;gBAChD,CAAC,CAAC,cAAc,EAAE,CAAC;YACrB,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;YACpB,CAAC;QACH,CAAC,CAAC;;;;;IA7BF;;OAEG;IAEH,KAAK,CAAC,SAAS;;QACb,MAAA,IAAI,CAAC,iBAAiB,0CAAE,KAAK,EAAE,CAAC;IAClC,CAAC;IAyBD,MAAM;QACJ,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACjB,uBACE,IAAI,EAAC,KAAK,EACV,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,OAAO,EAAE,IAAI,CAAC,YAAY,mBACX,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,IACzC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,IAC1C,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC;YAEpD,eAAQ,CACN,CACL,CAAC,CAAC,CAAC,CACF,4BACE,IAAI,EAAC,KAAK,EACV,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,YAAY,mBACX,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,IACzC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,IAC1C,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC;YAEpD,eAAQ,CACD,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, Prop, h, Method } from \"@stencil/core\";\r\nimport { isModifiedEvent } from \"../../../utils/is-modified-event\";\r\nimport { TabsSwitchEvent } from \"../tabs.interfaces\";\r\n\r\n/**\r\n * @slot - The label for this tab\r\n */\r\n@Component({\r\n  tag: \"dso-tab\",\r\n  styleUrl: \"tab.scss\",\r\n  shadow: true,\r\n})\r\nexport class Tab {\r\n  @Element()\r\n  host!: HTMLDsoTabElement;\r\n\r\n  /**\r\n   * Makes the tab active. The tab for which the tabpanel is visible is the active tab.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Disables the tab. A disabled tab cannot be activated and it's tabpanel cannot be shown.\r\n   */\r\n  @Prop({ reflect: true })\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * The optional href of the tab. Creates an anchor if present. Creates a button if absent.\r\n   */\r\n  @Prop()\r\n  href?: string;\r\n\r\n  /**\r\n   * Emitted when the user activates tab via click or arrow keys followed by space or enter.\r\n   */\r\n  @Event()\r\n  dsoTabSwitch!: EventEmitter<TabsSwitchEvent>;\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  @Method()\r\n  async _dsoFocus() {\r\n    this.anchorOrButtonRef?.focus();\r\n  }\r\n\r\n  private anchorOrButtonRef?: HTMLAnchorElement | HTMLButtonElement;\r\n\r\n  private emitEvent = (e: MouseEvent | KeyboardEvent) => {\r\n    this.dsoTabSwitch.emit({\r\n      originalEvent: e,\r\n      isModifiedEvent: e instanceof MouseEvent ? isModifiedEvent(e) : false,\r\n    });\r\n  };\r\n\r\n  private keyUpHandler = (e: KeyboardEvent) => {\r\n    if (e.key === \" \" && !this.disabled && !this.active) {\r\n      this.emitEvent(e);\r\n    }\r\n  };\r\n\r\n  private clickHandler = (e: MouseEvent) => {\r\n    if ((this.disabled && this.href) || this.active) {\r\n      e.preventDefault();\r\n    } else {\r\n      this.emitEvent(e);\r\n    }\r\n  };\r\n\r\n  render() {\r\n    return this.href ? (\r\n      <a\r\n        role=\"tab\"\r\n        href={this.href}\r\n        onKeyUp={this.keyUpHandler}\r\n        onClick={this.clickHandler}\r\n        aria-selected={this.active ? \"true\" : \"false\"}\r\n        {...(!this.active ? { tabIndex: -1 } : {})}\r\n        ref={(element) => (this.anchorOrButtonRef = element)}\r\n      >\r\n        <slot />\r\n      </a>\r\n    ) : (\r\n      <button\r\n        role=\"tab\"\r\n        type=\"button\"\r\n        disabled={this.disabled}\r\n        onClick={this.clickHandler}\r\n        aria-selected={this.active ? \"true\" : \"false\"}\r\n        {...(!this.active ? { tabIndex: -1 } : {})}\r\n        ref={(element) => (this.anchorOrButtonRef = element)}\r\n      >\r\n        <slot />\r\n      </button>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/tabs/tabs.css

@@ -0,0 +1,20 @@
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+.tabs {
+  border-block-end: 1px solid #39870c;
+  display: flex;
+  gap: 2px;
+  flex-wrap: wrap;
+  margin-block-end: 24px;
+  padding-inline-start: 0;
+}
+@media screen and (max-width: 767px) {
+  .tabs {
+    border: 0;
+    display: block;
+  }
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.interfaces.js","sourceRoot":"","sources":["../../../../src/components/tabs/tabs.interfaces.ts"],"names":[],"mappings":"","sourcesContent":["export interface TabsSwitchEvent {\r\n  originalEvent: MouseEvent | KeyboardEvent;\r\n  isModifiedEvent: boolean;\r\n}\r\n"]}

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

@@ -0,0 +1,83 @@
+import { h, Host, forceUpdate } from "@stencil/core";
+/**
+ * @slot - The dso-tab elements. These should be direct children of the dso-tabs element.
+ * @slot panel - The panel with the content for the active tab
+ */
+export class Tabs {
+    constructor() {
+        // Keep track of tabs to set focus on next or previous enabled (not disabled) tab.
+        this.keyUpHandler = (e) => {
+            if (!(e.target instanceof HTMLElement)) {
+                return;
+            }
+            switch (e.key) {
+                case "ArrowRight":
+                case "ArrowDown":
+                    this.moveFocusToNextTab(e.target);
+                    break;
+                case "ArrowLeft":
+                case "ArrowUp":
+                    this.moveFocusToPreviousTab(e.target);
+                    break;
+                default:
+                    return;
+            }
+        };
+    }
+    get enabledTabs() {
+        // Only enabled tabs (not disabled) are needed for setting focus via ArrowRight and ArrowLeft
+        return Array.from(this.host.querySelectorAll(":scope > dso-tab")).reduce((tabs, tab) => {
+            if (!tab.disabled) {
+                tabs.push(tab);
+            }
+            return tabs;
+        }, []);
+    }
+    get firstTab() {
+        return this.enabledTabs[0];
+    }
+    get lastTab() {
+        return this.enabledTabs[this.enabledTabs.length - 1];
+    }
+    moveFocusToTab(tab) {
+        tab === null || tab === void 0 ? void 0 : tab._dsoFocus();
+    }
+    moveFocusToPreviousTab(focussedTab) {
+        var _a;
+        const index = this.enabledTabs.findIndex((tab) => tab === focussedTab);
+        const next = (_a = this.enabledTabs[index - 1]) !== null && _a !== void 0 ? _a : this.lastTab;
+        this.moveFocusToTab(next);
+    }
+    moveFocusToNextTab(focussedTab) {
+        var _a;
+        const index = this.enabledTabs.findIndex((tab) => tab === focussedTab);
+        const next = (_a = this.enabledTabs[index + 1]) !== null && _a !== void 0 ? _a : this.firstTab;
+        this.moveFocusToTab(next);
+    }
+    connectedCallback() {
+        var _a;
+        (_a = this.mutationObserver) !== null && _a !== void 0 ? _a : (this.mutationObserver = new MutationObserver(() => forceUpdate(this.host)));
+        this.mutationObserver.observe(this.host, { childList: true });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    render() {
+        return (h(Host, { key: 'ce49553d33f63de258e8ff3466fa37d539e4734f' }, h("div", { key: '22a863b05306509b718237a071a072a52c3cfd73', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, h("slot", { key: '75d01af59d70f79e059948d9239c7c9ccdef297b' })), h("div", { key: '2304bbce1b0c27566ae04f7c1c5dd13cd9e588eb', role: "tabpanel", tabindex: "0" }, h("slot", { key: 'bc1a82a606d37dd50beb5f5acd575cc57b41182e', name: "panel" }))));
+    }
+    static get is() { return "dso-tabs"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tabs.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tabs.css"]
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=tabs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Element, Component, h, Host, forceUpdate } from \"@stencil/core\";\r\n\r\n/**\r\n * @slot - The dso-tab elements. These should be direct children of the dso-tabs element.\r\n * @slot panel - The panel with the content for the active tab\r\n */\r\n@Component({\r\n  tag: \"dso-tabs\",\r\n  styleUrl: \"tabs.scss\",\r\n  shadow: true,\r\n})\r\nexport class Tabs {\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  @Element()\r\n  host!: HTMLDsoTabsElement;\r\n\r\n  private get enabledTabs() {\r\n    // Only enabled tabs (not disabled) are needed for setting focus via ArrowRight and ArrowLeft\r\n    return Array.from(this.host.querySelectorAll<HTMLDsoTabElement>(\":scope > dso-tab\")).reduce<HTMLDsoTabElement[]>(\r\n      (tabs, tab) => {\r\n        if (!tab.disabled) {\r\n          tabs.push(tab);\r\n        }\r\n\r\n        return tabs;\r\n      },\r\n      [],\r\n    );\r\n  }\r\n\r\n  private get firstTab() {\r\n    return this.enabledTabs[0];\r\n  }\r\n\r\n  private get lastTab() {\r\n    return this.enabledTabs[this.enabledTabs.length - 1];\r\n  }\r\n\r\n  private moveFocusToTab(tab: HTMLDsoTabElement | undefined) {\r\n    tab?._dsoFocus();\r\n  }\r\n\r\n  private moveFocusToPreviousTab(focussedTab: HTMLElement) {\r\n    const index = this.enabledTabs.findIndex((tab) => tab === focussedTab);\r\n    const next = this.enabledTabs[index - 1] ?? this.lastTab;\r\n\r\n    this.moveFocusToTab(next);\r\n  }\r\n\r\n  private moveFocusToNextTab(focussedTab: HTMLElement) {\r\n    const index = this.enabledTabs.findIndex((tab) => tab === focussedTab);\r\n    const next = this.enabledTabs[index + 1] ?? this.firstTab;\r\n\r\n    this.moveFocusToTab(next);\r\n  }\r\n\r\n  // Keep track of tabs to set focus on next or previous enabled (not disabled) tab.\r\n  private keyUpHandler = (e: KeyboardEvent) => {\r\n    if (!(e.target instanceof HTMLElement)) {\r\n      return;\r\n    }\r\n\r\n    switch (e.key) {\r\n      case \"ArrowRight\":\r\n      case \"ArrowDown\":\r\n        this.moveFocusToNextTab(e.target);\r\n        break;\r\n      case \"ArrowLeft\":\r\n      case \"ArrowUp\":\r\n        this.moveFocusToPreviousTab(e.target);\r\n        break;\r\n      default:\r\n        return;\r\n    }\r\n  };\r\n\r\n  connectedCallback(): void {\r\n    this.mutationObserver ??= new MutationObserver(() => forceUpdate(this.host));\r\n\r\n    this.mutationObserver.observe(this.host, { childList: true });\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.mutationObserver?.disconnect();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class=\"tabs\" role=\"tablist\" onKeyUp={this.keyUpHandler}>\r\n          <slot />\r\n        </div>\r\n        <div role=\"tabpanel\" tabindex=\"0\">\r\n          <slot name=\"panel\" />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -40,7 +40,7 @@ export class Toggletip {
         this.secondary = undefined;
     }
     render() {
-        return (h(Fragment, null, h("dso-info-button", { key: '3304cffaef15d2628de0d345889ba52dbf60514a', "aria-describedby": "toggle", onClick: this.click, label: this.label, active: this.active, secondary: this.secondary, ref: (element) => (this.infoButton = element) }), h("dso-tooltip", { key: '4d120364ab6288ded65ea048f7dd7ec18b4f16e0', stateless: true, descriptive: true, id: "toggle", strategy: "absolute", active: this.active, position: this.position, small: this.small }, h("slot", { key: 'ab233a002b03fa23345df374366d2ba8f08b2b63' }))));
+        return (h(Fragment, null, h("dso-info-button", { key: 'd814dd230c0a2b7dd143f0c461a7c35c5a0e8256', "aria-describedby": "toggle", onClick: this.click, label: this.label, active: this.active, secondary: this.secondary, ref: (element) => (this.infoButton = element) }), h("dso-tooltip", { key: '8335db4a80d8bf7fdec4251caa9a3d4c5520b8f4', stateless: true, descriptive: true, id: "toggle", strategy: "absolute", active: this.active, position: this.position, small: this.small }, h("slot", { key: 'e4f9747977cd810999eb63ee413e63827ce106e3' }))));
     }
     static get is() { return "dso-toggletip"; }
     static get encapsulation() { return "shadow"; }

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

@@ -168,7 +168,7 @@ export class Tooltip {
         }
     }
     render() {
-        return (h(Host, { key: 'b8b24b9fcb5d6de63f40ac2c28aa3cae220935d1', class: { hidden: this.hidden }, role: "tooltip", onClick: this.listenClick }, h("div", { key: '837abccdba48399a6bda370059d7f59ecabf1d4d', class: clsx("tooltip", { in: this.active }) }, !this.noArrow && h("div", { key: '9c6c0250d521e51cfc635a82ddd57d49bb81dd53', "data-popper-arrow": true, class: "tooltip-arrow" }), h("div", { key: 'efd8935a506723d1a1b537896526249f7e89d559', "aria-hidden": !this.descriptive || undefined, class: clsx("tooltip-inner", { "dso-small": this.small }) }, h("slot", { key: '125db28c4ee8f322d6014013c001393267e52829' })))));
+        return (h(Host, { key: '1dd2e74dbeb0555c9ddf87f129fa0c71761a1838', class: { hidden: this.hidden }, role: "tooltip", onClick: this.listenClick }, h("div", { key: 'ee9a42aebfda6d2b72b9ca2843997c543b534ee8', class: clsx("tooltip", { in: this.active }) }, !this.noArrow && h("div", { key: '3f692092ef311ed2c23f24c4c039cd690a1456cd', "data-popper-arrow": true, class: "tooltip-arrow" }), h("div", { key: '1f47431cd04dffd0f6eec3728c140e0e2bbbd2c5', "aria-hidden": !this.descriptive || undefined, class: clsx("tooltip-inner", { "dso-small": this.small }) }, h("slot", { key: 'a1e76e41487efc675edd80608d610e4fbf0f227e' })))));
     }
     activatePopper() {
         var _a;

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

@@ -175,7 +175,7 @@ export class TreeView {
     }
     render() {
         var _a;
-        return (h("div", { key: '2eff02be3c7fa1122bcceb02f49686fa313a03eb', id: "tree", class: "dso-tree", onKeyDown: (e) => this.keyDownListener(e), ref: (element) => (this.tree = element) }, h("ul", { key: 'bd81717040790bb9b97dfc7b06ae3eff1aa0e0f8', 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: '297a05e4f779433dea7c7e297200b5205c9a835e', id: "tree", class: "dso-tree", onKeyDown: (e) => this.keyDownListener(e), ref: (element) => (this.tree = element) }, h("ul", { key: '095ee29e9af3861b29e413e7120e79ca32a46364', 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"; }

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

@@ -53,11 +53,6 @@ button::-moz-focus-inner {
   text-align: start;
   user-select: none;
   vertical-align: middle;
-  border: 0;
-  color: #39870c;
-  line-height: 1;
-  padding: 0;
-  background-color: transparent;
 }
 .shrink:focus, .shrink:focus-visible,
 .expand:focus,
@@ -71,6 +66,15 @@ button::-moz-focus-inner {
 .overlay-close-button:active {
   outline: 0;
 }
+.shrink,
+.expand,
+.overlay-close-button {
+  border: 0;
+  color: #39870c;
+  line-height: 1;
+  padding: 0;
+  background-color: transparent;
+}
 .shrink[disabled],
 .expand[disabled],
 .overlay-close-button[disabled] {
@@ -302,16 +306,6 @@ button::-moz-focus-inner {
   text-align: start;
   user-select: none;
   vertical-align: middle;
-  background-color: #fff;
-  border-color: #39870c;
-  color: #39870c;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 4px;
-  line-height: 1.5;
-  min-inline-size: 56px;
-  padding-block: 11px;
-  padding-inline: 15px;
   border: 0;
   padding: 8px;
   border-radius: 0;
@@ -330,6 +324,22 @@ button::-moz-focus-inner {
 .toggle-button button:active {
   outline: 0;
 }
+.sizing-buttons button,
+.toggle-button button {
+  background-color: #fff;
+  border-color: #39870c;
+  color: #39870c;
+}
+.sizing-buttons button,
+.toggle-button button {
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 4px;
+  line-height: 1.5;
+  min-inline-size: 56px;
+  padding-block: 11px;
+  padding-inline: 15px;
+}
 .sizing-buttons button:hover,
 .toggle-button button:hover {
   background-color: #d7e7ce;
@@ -529,9 +539,20 @@ button::-moz-focus-inner {
   text-align: start;
   user-select: none;
   vertical-align: middle;
+  line-height: 1rem;
+}
+.filterpanel-buttons .cancel-button:focus, .filterpanel-buttons .cancel-button:focus-visible {
+  outline-offset: 2px;
+}
+.filterpanel-buttons .cancel-button:active {
+  outline: 0;
+}
+.filterpanel-buttons .cancel-button {
   background-color: #fff;
   border-color: #39870c;
   color: #39870c;
+}
+.filterpanel-buttons .cancel-button {
   border-width: 1px;
   border-style: solid;
   border-radius: 4px;
@@ -539,13 +560,6 @@ button::-moz-focus-inner {
   min-inline-size: 56px;
   padding-block: 11px;
   padding-inline: 15px;
-  line-height: 1rem;
-}
-.filterpanel-buttons .cancel-button:focus, .filterpanel-buttons .cancel-button:focus-visible {
-  outline-offset: 2px;
-}
-.filterpanel-buttons .cancel-button:active {
-  outline: 0;
 }
 .filterpanel-buttons .cancel-button:hover {
   background-color: #d7e7ce;
@@ -664,9 +678,20 @@ button::-moz-focus-inner {
   text-align: start;
   user-select: none;
   vertical-align: middle;
+  line-height: 1rem;
+}
+.filterpanel-buttons .apply-button:focus, .filterpanel-buttons .apply-button:focus-visible {
+  outline-offset: 2px;
+}
+.filterpanel-buttons .apply-button:active {
+  outline: 0;
+}
+.filterpanel-buttons .apply-button {
   background-color: #39870c;
   border-color: #39870c;
   color: #fff;
+}
+.filterpanel-buttons .apply-button {
   border-width: 1px;
   border-style: solid;
   border-radius: 4px;
@@ -674,13 +699,6 @@ button::-moz-focus-inner {
   min-inline-size: 56px;
   padding-block: 11px;
   padding-inline: 15px;
-  line-height: 1rem;
-}
-.filterpanel-buttons .apply-button:focus, .filterpanel-buttons .apply-button:focus-visible {
-  outline-offset: 2px;
-}
-.filterpanel-buttons .apply-button:active {
-  outline: 0;
 }
 .filterpanel-buttons .apply-button:hover {
   background-color: #275937;
@@ -938,11 +956,6 @@ button::-moz-focus-inner {
   .dso-nav.dso-nav-main > li > a,
   .dso-nav.dso-nav-main > li > button {
     text-decoration: none;
-    font-size: 1.25em;
-    line-height: 1;
-    margin-block-start: 8px;
-    padding-block: 8px 7px;
-    padding-inline: 16px;
   }
   .dso-nav.dso-nav-main > li > a:hover, .dso-nav.dso-nav-main > li > a:focus-visible, .dso-nav.dso-nav-main > li > a:active,
   .dso-nav.dso-nav-main > li > button:hover,
@@ -950,16 +963,20 @@ button::-moz-focus-inner {
   .dso-nav.dso-nav-main > li > button:active {
     text-decoration: underline;
   }
+  .dso-nav.dso-nav-main > li > a,
+  .dso-nav.dso-nav-main > li > button {
+    font-size: 1.25em;
+    line-height: 1;
+    margin-block-start: 8px;
+    padding-block: 8px 7px;
+    padding-inline: 16px;
+  }
   .dso-nav.dso-nav-sub > li {
     display: inline-block;
   }
   .dso-nav.dso-nav-sub > li > a,
   .dso-nav.dso-nav-sub > li > button {
     text-decoration: none;
-    font-size: 1rem;
-    margin-block-start: 4px;
-    padding-block: 4px 3px;
-    padding-inline: 8px;
   }
   .dso-nav.dso-nav-sub > li > a:hover, .dso-nav.dso-nav-sub > li > a:focus-visible, .dso-nav.dso-nav-sub > li > a:active,
   .dso-nav.dso-nav-sub > li > button:hover,
@@ -967,6 +984,13 @@ button::-moz-focus-inner {
   .dso-nav.dso-nav-sub > li > button:active {
     text-decoration: underline;
   }
+  .dso-nav.dso-nav-sub > li > a,
+  .dso-nav.dso-nav-sub > li > button {
+    font-size: 1rem;
+    margin-block-start: 4px;
+    padding-block: 4px 3px;
+    padding-inline: 8px;
+  }
 }
 @media screen and (max-width: 807.99px) {
   .dso-navbar {
@@ -993,11 +1017,6 @@ button::-moz-focus-inner {
     text-align: start;
     user-select: none;
     vertical-align: middle;
-    border: 0;
-    color: #39870c;
-    line-height: 1;
-    padding: 0;
-    background-color: transparent;
     font-weight: 300;
   }
   .dso-tertiary:focus, .dso-tertiary:focus-visible {
@@ -1006,6 +1025,13 @@ button::-moz-focus-inner {
   .dso-tertiary:active {
     outline: 0;
   }
+  .dso-tertiary {
+    border: 0;
+    color: #39870c;
+    line-height: 1;
+    padding: 0;
+    background-color: transparent;
+  }
   .dso-tertiary[disabled] {
     color: #afcf9d;
   }

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

@@ -154,7 +154,7 @@ export class ViewerGrid {
     }
     render() {
         const tabLabels = this.mode === "vdk" ? viewerGridVdkTabs : viewerGridVrkTabs;
-        return (h(Fragment, null, this.tabView && (h("nav", { key: 'bcb65a8fa594201784f5fc536fa1dc51ae238a1f', class: "dso-navbar" }, h("ul", { key: 'e62921b7bf9f979d1bdac44bf3db0bd3c9d82f2b', class: "dso-nav dso-nav-sub" }, tabLabels.map((tab) => (h("li", { key: tab, class: clsx({ "dso-active": this.activeTab === tab }) }, h("button", { type: "button", class: "dso-tertiary", onClick: () => this.switchActiveTab(tab) }, viewerGridTabLabelMap[tab]))))))), (!this.tabView || (this.tabView && (this.activeTab === "main" || this.activeTab === "search"))) && (h(MainPanel, { key: 'c2ba30c5affc612141c56c982f835cfb4fe039c3', mode: this.mode, tabView: this.tabView, mainSize: this.mainSize, documentPanelOpen: this.documentPanelOpen, mainPanelExpanded: this.mainPanelExpanded, mainPanelHidden: this.mainPanelHidden, shrinkMain: this.emitShrinkMain, expandMain: this.emitExpandMain, toggleMainPanel: this.toggleMainPanel, dsoMainSizeChangeAnimationEnd: this.dsoMainSizeChangeAnimationEnd })), h(Filterpanel, { key: '3ad738a4713c918cba274d288ef11d729b2190b1', ref: (element) => (this.filterpanel = element), onApply: this.handleFilterpanelApply, onCancel: this.handleFilterpanelCancel }), (!this.tabView || (this.tabView && this.activeTab === "map")) && (h("div", { key: 'd9feb8fd090c4e097c9f388c628766c8a7a89386', class: "map", ref: (element) => (this.mapElement = element) }, h("slot", { key: 'df77620a663614e4417a022aa3ed5055583d6fc6', name: "map" }))), ((!this.tabView && this.documentPanelOpen) || (this.tabView && this.activeTab === "document")) && (h(DocumentPanel, { key: '9ae25c1ba5377b5c2fc098f482cca838d745f0c1', tabView: this.tabView, panelSize: this.documentPanelSize, shrinkDocumentPanel: this.shrinkDocumentPanel, expandDocumentPanel: this.expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd: this.dsoDocumentPanelSizeChangeAnimationEnd })), h(Overlay, { key: '8fb16e4308769043332bfd4d679950612a3d16bb', ref: (element) => (this.overlay = element), dsoCloseOverlay: (e) => this.dsoCloseOverlay.emit({ originalEvent: e }) })));
+        return (h(Fragment, null, this.tabView && (h("nav", { key: '8ca85b7872476a2afdcb8d41d9d7d3d8fd9d130c', class: "dso-navbar" }, h("ul", { key: '83195a76dbb5770f6a38fe8feec3c1f85a70f102', class: "dso-nav dso-nav-sub" }, tabLabels.map((tab) => (h("li", { key: tab, class: clsx({ "dso-active": this.activeTab === tab }) }, h("button", { type: "button", class: "dso-tertiary", onClick: () => this.switchActiveTab(tab) }, viewerGridTabLabelMap[tab]))))))), (!this.tabView || (this.tabView && (this.activeTab === "main" || this.activeTab === "search"))) && (h(MainPanel, { key: '2b13de9e342ee70f4b6f225742f19f4a48387f49', mode: this.mode, tabView: this.tabView, mainSize: this.mainSize, documentPanelOpen: this.documentPanelOpen, mainPanelExpanded: this.mainPanelExpanded, mainPanelHidden: this.mainPanelHidden, shrinkMain: this.emitShrinkMain, expandMain: this.emitExpandMain, toggleMainPanel: this.toggleMainPanel, dsoMainSizeChangeAnimationEnd: this.dsoMainSizeChangeAnimationEnd })), h(Filterpanel, { key: 'c31ce856aacd1c762e4988187e71533c09a554f6', ref: (element) => (this.filterpanel = element), onApply: this.handleFilterpanelApply, onCancel: this.handleFilterpanelCancel }), (!this.tabView || (this.tabView && this.activeTab === "map")) && (h("div", { key: '31e87407557de7024832b5cc57b8e4d0cd882e6f', class: "map", ref: (element) => (this.mapElement = element) }, h("slot", { key: '6ed2d2a928d67f175293c4b16dffc5f836a1beba', name: "map" }))), ((!this.tabView && this.documentPanelOpen) || (this.tabView && this.activeTab === "document")) && (h(DocumentPanel, { key: '32d6858043486f36421a73ab0431cf49db6d0d8b', tabView: this.tabView, panelSize: this.documentPanelSize, shrinkDocumentPanel: this.shrinkDocumentPanel, expandDocumentPanel: this.expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd: this.dsoDocumentPanelSizeChangeAnimationEnd })), h(Overlay, { key: '3e947e34d6693ecfef90f1606d5e8af37fd28efc', ref: (element) => (this.overlay = element), dsoCloseOverlay: (e) => this.dsoCloseOverlay.emit({ originalEvent: e }) })));
     }
     static get is() { return "dso-viewer-grid"; }
     static get encapsulation() { return "shadow"; }