npm - @dso-toolkit/core - Versions diffs - 85.0.0 → 87.0.0 - Mend

@dso-toolkit/core 85.0.0 → 87.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (459) hide show

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

@@ -42,7 +42,7 @@ export class MarkBar {
     render() {
         const current = this.current || 0;
         const totalCount = this.totalCount || 0;
-        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 }))));
+        return (h("div", { key: 'abaa19f68f897d17ac6b5546048f943240fa85c1', class: "dso-mark-bar" }, h("div", { key: '0fb2cf807fbccfc62aaf1cf8de36343e2ddcf36a', class: "dso-mark-bar-input" }, h("input", { key: 'f2ea1f96a05eb01d841527b33ab1cc3ab33790d8', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: 'ca63f9f65da7e45a83571c7d87667d689d4bf75a', htmlFor: "search-input" }, h("dso-icon", { key: '6c4a328b958bb1418ac184e35c36cfde950af40a', class: "dso-search-icon", icon: "search" }), h("span", { key: 'c8c24cefc7952f31926cf6e99e186fd607c0887e', class: "label-text" }, this.label)), h("dso-icon-button", { key: '68218c845308a70d148e9f26b275f5d59c9f0f77', icon: "times", variant: "tertiary", label: "Zoekopdracht legen", onDsoClick: (e) => this.handleClear(e.detail.originalEvent) })), h("div", { key: '031477b9a6d15c5ace52128a2b649fb338c9b56c', class: "dso-button-container" }, h("span", { key: 'b2d76370cfe3da3be154fd6912a8c83a5aea5ec2', class: "divider" }), h("dso-icon-button", { key: 'ccf286b132f6a6661d216f1bc47dea493753dda9', icon: "chevron-up", variant: "tertiary", label: "Vorig zoekresultaat", onDsoClick: (e) => this.handlePrevious(e.detail.originalEvent), disabled: current <= 1 }), h("span", { key: 'fc5b68f4f33b519b3342cfb39e99cd5e742c3e38' }, current, "/", totalCount), h("dso-icon-button", { key: '89846ff2437eea7130976a60323fc60e4114d83e', 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"; }

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

@@ -65,7 +65,7 @@ export class Modal {
     }
     render() {
         var _a;
-        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" }))))));
+        return (h("dialog", { key: '1758660d9c8a3fdeb44aababbd63abd26cb81e59', 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: 'f19d8dced1bf5e140b361115a8c2fa83dcfc8bd1', 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: '9924a9aa36f6037c1180eb457d9e0abcde3e798d' }, h("div", { key: 'd35270040a9a8cee02bb46bb99930fb6911a18c2', class: "dso-body", tabIndex: 0 }, h("slot", { key: '03bfd550b59fb7f5d549d52ff578ab76564080c5', name: "body" }))), this.hasFooter && (h("div", { key: '282393ce6a7315c04b9e715771ed3d4194b3a662', class: "dso-footer" }, h("slot", { key: '6ccdb4816197e7f41711f795b150f3f13ba4883c', name: "footer" }))))));
     }
     static get is() { return "dso-modal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/onboarding-tip/onboarding-tip.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Host, h } from "@stencil/core";
+import { Host, forceUpdate, h, } from "@stencil/core";
 import { positionTooltip } from "../../functional-components/tooltip/position-tooltip.function";
 export class OnboardingTip {
     constructor() {
@@ -8,14 +8,29 @@ export class OnboardingTip {
         this.placement = "right";
         this.ready = false;
         this.popoverOpen = false;
+        this.blockEscapeKey = (e) => {
+            if (e.key === "Escape") {
+                e.preventDefault();
+                this.dsoClose.emit({ originalEvent: e });
+            }
+        };
+    }
+    connectedCallback() {
+        this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));
+        this.mutationObserver.observe(this.host, { attributes: true, childList: true, subtree: true, characterData: true });
     }
     componentDidRender() {
+        var _a;
         if (!this.host.isConnected) {
             return;
         }
         if (!this.popoverOpen) {
             this.host.showPopover();
             this.popoverOpen = true;
+            const onboardingTipElement = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".onboarding-tip");
+            if (this.hasOnboardingTipElement(onboardingTipElement)) {
+                OnboardingTip.setFocus(onboardingTipElement);
+            }
         }
         if (!this.cleanUp && this.referenceElement && this.tipArrowRef instanceof HTMLElement) {
             this.cleanUp = positionTooltip({
@@ -29,16 +44,31 @@ export class OnboardingTip {
         }
     }
     disconnectedCallback() {
-        var _a;
+        var _a, _b;
+        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        delete this.mutationObserver;
         if (this.popoverOpen) {
             this.host.hidePopover();
             this.popoverOpen = false;
         }
-        (_a = this.cleanUp) === null || _a === void 0 ? void 0 : _a.call(this);
+        (_b = this.cleanUp) === null || _b === void 0 ? void 0 : _b.call(this);
         this.cleanUp = undefined;
     }
+    /**
+     * Set focus on the onboarding tip element and reset tabIndex for accessibility.
+     */
+    static setFocus(target) {
+        if (target) {
+            target.focus();
+        }
+    }
+    hasOnboardingTipElement(element) {
+        return element instanceof HTMLElement;
+    }
     render() {
-        return (h(Host, { key: 'd60e322e9eb46e0271a0172db57e82b1e170e193', popover: "manual", ready: this.ready, onAnimationend: () => (this.ready = true) }, h("div", { key: 'f463fe476aaa88b2e1de6506c97d2a8c32b82e09', class: "onboarding-tip", role: "tooltip" }, h("div", { key: 'b3d99d6b2c7bb5029409fd9d2e131c5aff5cf328', class: "onboarding-tip-inner" }, h("div", { key: '658a012c2e7358c317b76571b8f13270ad5d0960', class: "onboarding-tip-content-wrapper" }, this.headingSlottedElement !== null && (h("div", { key: 'dfa159ff194062122bf9760233ff09a579f79b69', class: "onboarding-tip-content-heading" }, h("dso-icon", { key: '45d18025a2918ffee7defff889b807989157c939', icon: "light-bulb" }), h("slot", { key: '6708d1880a299184800721b43111e695bbd60b21', name: "heading" }))), h("dso-icon-button", { key: 'f946318abace8994e4686ee363765e90c962701a', class: "dso-close", label: "Sluiten", variant: "tertiary", icon: "times", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) }), h("slot", { key: 'b15cbc5b14e9ba3156161e4886708de46ee28a33' }))), h("div", { key: '1d6f4ff0a16e4b50b7cbdec2d42ff558093a8f21', class: "onboarding-tip-arrow", ref: (ref) => (this.tipArrowRef = ref) }))));
+        var _a;
+        const ariaLabel = (_a = this.headingSlottedElement) === null || _a === void 0 ? void 0 : _a.textContent;
+        return (h(Host, { key: 'dcc44e6528b04e949bede8006c9e2065d11113d1', popover: "manual", ready: this.ready, onAnimationend: () => (this.ready = true) }, h("div", { key: '12ba4bce3ea4d07c07a509a8638a8e465ae68bd3', role: "dialog", class: "onboarding-tip", "aria-label": ariaLabel, onKeyDown: this.blockEscapeKey, tabindex: -1 }, h("div", { key: '94360cd1764a59aafa37c8d48b744fc0126ed211', class: "onboarding-tip-inner" }, h("div", { key: '2ce01380af60b03a3eb2604e36da7efd75c0b2be', class: "onboarding-tip-content-wrapper" }, this.headingSlottedElement !== null && (h("div", { key: 'a95d41d11a54a4c765cf3239dbc56ebf547d0c50', class: "onboarding-tip-content-heading" }, h("dso-icon", { key: 'c219b5de3bc334f41f2313d6e109b6722bbcc2f5', icon: "light-bulb" }), h("slot", { key: '3b12de407fa51e791667ef0b90170b74424ed250', name: "heading" }))), h("dso-icon-button", { key: '3a87530597f6fe014242fd73b3546a1fff565aa4', class: "dso-close", label: "Sluiten", variant: "tertiary", icon: "times", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) }), h("slot", { key: '4d7e0a668b5f5b3aee15e6a702a30369c54b6d89' }))), h("div", { key: '577d437c51828240fe2200ccac7fe1404a87d089', class: "onboarding-tip-arrow", ref: (ref) => (this.tipArrowRef = ref) }))));
     }
     get headingSlottedElement() {
         return this.host.querySelector("[slot='heading']");

package/dist/collection/components/onboarding-tip/onboarding-tip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"onboarding-tip.js","sourceRoot":"","sources":["../../../../src/components/onboarding-tip/onboarding-tip.tsx"],"names":[],"mappings":"AAAA,OAAO,~~EAAE~~,SAAS,~~EAAsB~~,OAAO,~~EAAE~~,KAAK,~~EAAgB~~,IAAI,~~EAAE~~,IAAI,~~EAAE~~,KAAK,~~EAAE~~,CAAC,~~EAAE~~,MAAM,eAAe,CAAC;~~AAElH~~,OAAO,EAAE,eAAe,EAAE,MAAM,+DAA+D,CAAC;AAUhG,MAAM,OAAO,aAAa;IAL1B;QASE;;WAEG;QAEH,cAAS,GAAqB,OAAO,CAAC;QAStC,UAAK,GAAG,KAAK,CAAC;QAGd,gBAAW,GAAG,KAAK,CAAC;~~KA8FrB~~;~~IA5FC~~,kBAAkB;QAChB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;YAC3B,OAAO;QACT,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;YACtB,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;YACxB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;~~QAC1B~~,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,WAAW,YAAY,WAAW,EAAE,CAAC;YACtF,IAAI,CAAC,OAAO,GAAG,eAAe,CAAC;gBAC7B,gBAAgB,EAAE,IAAI,CAAC,gBAAgB;gBACvC,MAAM,EAAE,IAAI,CAAC,IAAI;gBACjB,WAAW,EAAE,IAAI,CAAC,WAAW;gBAC7B,YAAY,EAAE,GAAG,IAAI,CAAC,SAAS,QAAQ;gBACvC,wBAAwB,EAAE,IAAI;gBAC9B,kBAAkB,EAAE,IAAI;aACzB,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED,oBAAoB;;QAClB,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;YACxB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;QAC3B,CAAC;QACD,MAAA,IAAI,CAAC,OAAO,oDAAI,CAAC;QACjB,IAAI,CAAC,OAAO,GAAG,SAAS,CAAC;IAC3B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,OAAO,EAAC,QAAQ,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;YACjF,4DAAK,KAAK,EAAC,gBAAgB,~~EAAC~~,IAAI,~~EAAC~~,~~SAAS~~;~~gBACxC~~,4DAAK,KAAK,EAAC,sBAAsB;oBAC/B,4DAAK,KAAK,EAAC,gCAAgC;wBACxC,IAAI,CAAC,qBAAqB,KAAK,IAAI,IAAI,CACtC,4DAAK,KAAK,EAAC,gCAAgC;4BACzC,iEAAU,IAAI,EAAC,YAAY,GAAY;4BACvC,6DAAM,IAAI,EAAC,SAAS,GAAG,CACnB,CACP;wBACD,wEACE,KAAK,EAAC,WAAW,EACjB,KAAK,EAAC,SAAS,EACf,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,OAAO,EACZ,UAAU,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,GAC3D;wBACF,8DAAa,CACT,CACF;gBACN,4DAAK,KAAK,EAAC,sBAAsB,EAAC,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,GAAG,CAAC,GAAQ,CAC5E,CACD,CACR,CAAC;IACJ,CAAC;IAID,IAAY,qBAAqB;QAC/B,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;IACrD,CAAC;IAID,IAAY,gBAAgB;QAC1B,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;QAExB,IAAI,CAAC,EAAE,EAAE,CAAC;YACR,OAAO,CAAC,IAAI,CAAC,iEAAiE,CAAC,CAAC;YAEhF,OAAO;QACT,CAAC;QAED,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;QACzC,IAAI,CAAC,CAAC,QAAQ,YAAY,QAAQ,IAAI,QAAQ,YAAY,UAAU,CAAC,EAAE,CAAC;YACtE,OAAO,CAAC,IAAI,CAAC,oDAAoD,CAAC,CAAC;YAEnE,OAAO;QACT,CAAC;QAED,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAc,sBAAsB,EAAE,IAAI,CAAC,CAAC;QACpF,IAAI,CAAC,SAAS,EAAE,CAAC;YACf,OAAO,CAAC,IAAI,CAAC,0DAA0D,EAAE,EAAE,CAAC,CAAC;YAE7E,OAAO;QACT,CAAC;QAED,OAAO,SAAS,CAAC;IACnB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, State, h } from \"@stencil/core\";\r\n\r\nimport { positionTooltip } from \"../../functional-components/tooltip/position-tooltip.function\";\r\nimport { TooltipClean, TooltipPlacement } from \"../../functional-components/tooltip/tooltip.interfaces\";\r\n\r\nimport { OnboardingTipCloseEvent } from \"./onboarding-tip.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-onboarding-tip\",\r\n styleUrl: \"onboarding-tip.scss\",\r\n shadow: true,\r\n})\r\nexport class OnboardingTip implements ComponentInterface {\r\n @Element()\r\n private host!: HTMLDsoOnboardingTipElement;\r\n\r\n /*\r\n Where to place the Onboarding Tip relative to its reference element.\r\n /\r\n @Prop()\r\n placement: TooltipPlacement = \"right\";\r\n\r\n /\r\n Emitted when the user closes the Onboarding Tip.\r\n */\r\n @Event()\r\n dsoClose!: EventEmitter<OnboardingTipCloseEvent>;\r\n\r\n @State()\r\n ready = false;\r\n\r\n @State()\r\n popoverOpen = false;\r\n\r\n componentDidRender() {\r\n if (!this.host.isConnected) {\r\n return;\r\n }\r\n\r\n if (!this.popoverOpen) {\r\n this.host.showPopover();\r\n this.popoverOpen = true;\r\n }\r\n\r\n if (!this.cleanUp && this.referenceElement && this.tipArrowRef instanceof HTMLElement) {\r\n this.cleanUp = positionTooltip({\r\n referenceElement: this.referenceElement,\r\n tipRef: this.host,\r\n tipArrowRef: this.tipArrowRef,\r\n placementTip: `${this.placement}-start`,\r\n topPositionSmallViewPort: true,\r\n halfMainAxisOffset: true,\r\n });\r\n }\r\n }\r\n\r\n disconnectedCallback(): void {\r\n if (this.popoverOpen) {\r\n this.host.hidePopover();\r\n this.popoverOpen = false;\r\n }\r\n this.cleanUp?.();\r\n this.cleanUp = undefined;\r\n }\r\n\r\n render() {\r\n return (\r\n <Host popover=\"manual\" ready={this.ready} onAnimationend={() => (this.ready = true)}>\r\n <div class=\"onboarding-tip\" ~~role=\"tooltip\"~~>\r\n <div class=\"onboarding-tip-inner\">\r\n <div class=\"onboarding-tip-content-wrapper\">\r\n {this.headingSlottedElement !== null && (\r\n <div class=\"onboarding-tip-content-heading\">\r\n <dso-icon icon=\"light-bulb\"></dso-icon>\r\n <slot name=\"heading\" />\r\n </div>\r\n )}\r\n <dso-icon-button\r\n class=\"dso-close\"\r\n label=\"Sluiten\"\r\n variant=\"tertiary\"\r\n icon=\"times\"\r\n onDsoClick={(e) => this.dsoClose.emit({ originalEvent: e })}\r\n />\r\n <slot></slot>\r\n </div>\r\n </div>\r\n <div class=\"onboarding-tip-arrow\" ref={(ref) => (this.tipArrowRef = ref)}></div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n\r\n private tipArrowRef: HTMLDivElement \| undefined;\r\n\r\n private get headingSlottedElement() {\r\n return this.host.querySelector(\"[slot='heading']\");\r\n }\r\n\r\n private cleanUp: TooltipClean \| undefined;\r\n\r\n private get referenceElement(): HTMLElement \| undefined {\r\n const id = this.host.id;\r\n\r\n if (!id) {\r\n console.warn(\"Unable to find reference. Onboarding Tip has no [id] attribute.\");\r\n\r\n return;\r\n }\r\n\r\n const rootNode = this.host.getRootNode();\r\n if (!(rootNode instanceof Document \|\| rootNode instanceof ShadowRoot)) {\r\n console.warn(`rootNode is not instance of Document or ShadowRoot`);\r\n\r\n return;\r\n }\r\n\r\n const reference = rootNode.querySelector<HTMLElement>(`[aria-describedby=\"${id}\"]`);\r\n if (!reference) {\r\n console.warn(`Unable to find reference element with aria-describedby ${id}`);\r\n\r\n return;\r\n }\r\n\r\n return reference;\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"onboarding-tip.js","sourceRoot":"","sources":["../../../../src/components/onboarding-tip/onboarding-tip.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n Host,\r\n Prop,\r\n State,\r\n forceUpdate,\r\n h,\r\n} from \"@stencil/core\";\r\n\r\nimport { positionTooltip } from \"../../functional-components/tooltip/position-tooltip.function\";\r\nimport { TooltipClean, TooltipPlacement } from \"../../functional-components/tooltip/tooltip.interfaces\";\r\n\r\nimport { OnboardingTipCloseEvent } from \"./onboarding-tip.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-onboarding-tip\",\r\n styleUrl: \"onboarding-tip.scss\",\r\n shadow: true,\r\n})\r\nexport class OnboardingTip implements ComponentInterface {\r\n @Element()\r\n private host!: HTMLDsoOnboardingTipElement;\r\n\r\n /*\r\n Where to place the Onboarding Tip relative to its reference element.\r\n /\r\n @Prop()\r\n placement: TooltipPlacement = \"right\";\r\n\r\n /\r\n Emitted when the user closes the Onboarding Tip.\r\n /\r\n @Event()\r\n dsoClose!: EventEmitter<OnboardingTipCloseEvent>;\r\n\r\n @State()\r\n ready = false;\r\n\r\n @State()\r\n popoverOpen = false;\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n connectedCallback(): void {\r\n this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n this.mutationObserver.observe(this.host, { attributes: true, childList: true, subtree: true, characterData: true });\r\n }\r\n\r\n componentDidRender() {\r\n if (!this.host.isConnected) {\r\n return;\r\n }\r\n\r\n if (!this.popoverOpen) {\r\n this.host.showPopover();\r\n this.popoverOpen = true;\r\n\r\n const onboardingTipElement = this.host.shadowRoot?.querySelector(\".onboarding-tip\");\r\n if (this.hasOnboardingTipElement(onboardingTipElement)) {\r\n OnboardingTip.setFocus(onboardingTipElement);\r\n }\r\n }\r\n\r\n if (!this.cleanUp && this.referenceElement && this.tipArrowRef instanceof HTMLElement) {\r\n this.cleanUp = positionTooltip({\r\n referenceElement: this.referenceElement,\r\n tipRef: this.host,\r\n tipArrowRef: this.tipArrowRef,\r\n placementTip: `${this.placement}-start`,\r\n topPositionSmallViewPort: true,\r\n halfMainAxisOffset: true,\r\n });\r\n }\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.mutationObserver?.disconnect();\r\n delete this.mutationObserver;\r\n if (this.popoverOpen) {\r\n this.host.hidePopover();\r\n this.popoverOpen = false;\r\n }\r\n this.cleanUp?.();\r\n this.cleanUp = undefined;\r\n }\r\n\r\n /\r\n Set focus on the onboarding tip element and reset tabIndex for accessibility.\r\n */\r\n private static setFocus(target: HTMLElement) {\r\n if (target) {\r\n target.focus();\r\n }\r\n }\r\n\r\n private hasOnboardingTipElement(element: Element \| null \| undefined): element is HTMLElement {\r\n return element instanceof HTMLElement;\r\n }\r\n\r\n private blockEscapeKey = (e: KeyboardEvent) => {\r\n if (e.key === \"Escape\") {\r\n e.preventDefault();\r\n\r\n this.dsoClose.emit({ originalEvent: e });\r\n }\r\n };\r\n\r\n render() {\r\n const ariaLabel = this.headingSlottedElement?.textContent;\r\n return (\r\n <Host popover=\"manual\" ready={this.ready} onAnimationend={() => (this.ready = true)}>\r\n <div role=\"dialog\" class=\"onboarding-tip\" aria-label={ariaLabel} onKeyDown={this.blockEscapeKey} tabindex={-1}>\r\n <div class=\"onboarding-tip-inner\">\r\n <div class=\"onboarding-tip-content-wrapper\">\r\n {this.headingSlottedElement !== null && (\r\n <div class=\"onboarding-tip-content-heading\">\r\n <dso-icon icon=\"light-bulb\"></dso-icon>\r\n <slot name=\"heading\" />\r\n </div>\r\n )}\r\n <dso-icon-button\r\n class=\"dso-close\"\r\n label=\"Sluiten\"\r\n variant=\"tertiary\"\r\n icon=\"times\"\r\n onDsoClick={(e) => this.dsoClose.emit({ originalEvent: e })}\r\n />\r\n <slot></slot>\r\n </div>\r\n </div>\r\n <div class=\"onboarding-tip-arrow\" ref={(ref) => (this.tipArrowRef = ref)}></div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n\r\n private tipArrowRef: HTMLDivElement \| undefined;\r\n\r\n private get headingSlottedElement() {\r\n return this.host.querySelector(\"[slot='heading']\");\r\n }\r\n\r\n private cleanUp: TooltipClean \| undefined;\r\n\r\n private get referenceElement(): HTMLElement \| undefined {\r\n const id = this.host.id;\r\n\r\n if (!id) {\r\n console.warn(\"Unable to find reference. Onboarding Tip has no [id] attribute.\");\r\n\r\n return;\r\n }\r\n\r\n const rootNode = this.host.getRootNode();\r\n if (!(rootNode instanceof Document \|\| rootNode instanceof ShadowRoot)) {\r\n console.warn(`rootNode is not instance of Document or ShadowRoot`);\r\n\r\n return;\r\n }\r\n\r\n const reference = rootNode.querySelector<HTMLElement>(`[aria-describedby=\"${id}\"]`);\r\n if (!reference) {\r\n console.warn(`Unable to find reference element with aria-describedby ${id}`);\r\n\r\n return;\r\n }\r\n\r\n return reference;\r\n }\r\n}\r\n"]}

package/dist/collection/components/ozon-content/components/ozon-content-toggletip/ozon-content-toggletip.css CHANGED Viewed

@@ -26,6 +26,7 @@
   visibility: visible;
 }
 .dso-tooltip .tooltip-inner {
+  --_dt-span-role-paragraph-margin-block: 8px;
   --_dso-alert-success-border-color: initial;
   --_dso-alert-error-border-color: initial;
   --_dso-alert-info-border-color: initial;
@@ -92,6 +93,7 @@
   vertical-align: baseline;
   display: inline;
   overflow-wrap: break-word;
+  user-select: text;
 }
 .toggletip-button, .toggletip-button:hover, .toggletip-button:focus-visible, .toggletip-button:active {
   text-decoration-line: var(--_dso-ozon-content-toggletip-text-decoration, underline);

package/dist/collection/components/ozon-content/components/ozon-content-toggletip/ozon-content-toggletip.js CHANGED Viewed

@@ -64,7 +64,7 @@ export class ozonContentToggletip {
         }
     }
     render() {
-        return (h(Fragment, { key: 'ea34c93439597d65072cb7e4cceb45f2775e5403' }, h("span", { key: '3e7dfe0cf9ec29260cedb736a5bf9c37306e9a81', class: "toggletip-button", role: "button", tabindex: 0, onClick: this.toggle, onKeyDown: this.keyUpHandler, onFocusout: this.focusOutHandler, ref: (element) => (this.container = element) }, h("span", { key: '60a75f14d4546603a34f85f993f550f1fb0f1b34', class: "icon-container" }, h("slot", { key: 'cfe50bcc158ad33051c1946ce9599ecaa0f448ce', name: "label" }), h("dso-icon", { key: 'e31aad7d5cd522e324184f380d983ab2b9caf770', icon: this.icon })), h(Tooltip, { key: 'fa3098858227e954e377539761f02d9b4a6820ce', visible: true, onAfterHidden: () => { }, tipElementRef: (element) => (this.tooltip = element), tipArrowElementRef: (element) => (this.tooltipArrow = element) }, h("slot", { key: 'cedc773ae4b66ef0c1bf0b199dafb226072b5093' })))));
+        return (h(Fragment, { key: 'a54415843b624c389127991142ff34f5243440e2' }, h("span", { key: '0abe9014bf5ef7119965edaf6b275d5dba00fb35', class: "toggletip-button", role: "button", tabindex: 0, onClick: this.toggle, onKeyDown: this.keyUpHandler, onFocusout: this.focusOutHandler, ref: (element) => (this.container = element) }, h("span", { key: '15826a1c747256000af00784f1229144a97617ca', class: "icon-container" }, h("slot", { key: '82f68204a52be98c96ea126ea3a21cbe691ac28c', name: "label" }), h("dso-icon", { key: '3e03c69f774ae15e1f8d6becbaee9bdb5dd06cff', icon: this.icon }))), h(Tooltip, { key: '8d0da635d9f6cc8c9f2d8885a34c4a11427c407b', visible: true, onAfterHidden: () => { }, tipElementRef: (element) => (this.tooltip = element), tipArrowElementRef: (element) => (this.tooltipArrow = element) }, h("slot", { key: 'be1c715c0213548b6a625bea5638b793b2bc74df' }))));
     }
     static get is() { return "dso-ozon-content-toggletip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ozon-content/components/ozon-content-toggletip/ozon-content-toggletip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ozon-content-toggletip.js","sourceRoot":"","sources":["../../../../../../src/components/ozon-content/components/ozon-content-toggletip/ozon-content-toggletip.tsx"],"names":[],"mappings":"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~~gBACP~~,EAAC,OAAO,qDACN,OAAO,QACP,aAAa,EAAE,GAAG,EAAE,GAAE,CAAC,EACvB,aAAa,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC,EACpD,kBAAkB,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC;~~oBAE9D~~,8DAAQ,CACA,~~CACL~~,~~CACE,~~CACZ,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, ComponentInterface, Element, Fragment, Prop, State, h } from \"@stencil/core\";\r\n\r\nimport { positionTooltip } from \"../../../../functional-components/tooltip/position-tooltip.function\";\r\nimport { Tooltip } from \"../../../../functional-components/tooltip/tooltip.functional-component\";\r\nimport { TooltipClean } from \"../../../../functional-components/tooltip/tooltip.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-ozon-content-toggletip\",\r\n styleUrl: \"./ozon-content-toggletip.scss\",\r\n shadow: true,\r\n})\r\nexport class ozonContentToggletip implements ComponentInterface {\r\n @Element()\r\n host!: HTMLDsoOzonContentToggletipElement;\r\n\r\n /*\r\n The alias of the icon in the button.\r\n */\r\n @Prop({ reflect: true })\r\n icon?: string;\r\n\r\n @State()\r\n active = false;\r\n\r\n @State()\r\n showToggletip = false;\r\n\r\n private container: HTMLSpanElement \| undefined;\r\n private tooltip: HTMLElement \| undefined;\r\n private tooltipArrow: HTMLElement \| undefined;\r\n\r\n private toggle = () => {\r\n if (this.active) {\r\n this.close();\r\n } else {\r\n this.open();\r\n }\r\n };\r\n\r\n private open = () => {\r\n this.active = true;\r\n };\r\n\r\n private close = () => {\r\n this.active = false;\r\n };\r\n\r\n private focusOutHandler = (event: FocusEvent) => {\r\n if (!this.host.contains(event.relatedTarget as Node)) {\r\n this.close();\r\n }\r\n };\r\n\r\n private keyUpHandler = (event: KeyboardEvent) => {\r\n switch (event.key) {\r\n case \"Escape\":\r\n this.close();\r\n return;\r\n case \" \":\r\n case \"Enter\":\r\n this.toggle();\r\n return;\r\n default:\r\n return;\r\n }\r\n };\r\n\r\n componentDidRender() {\r\n if (this.tooltip) {\r\n if (this.active && !this.showToggletip) {\r\n this.tooltip.showPopover();\r\n this.showToggletip = true;\r\n } else if (!this.active && this.showToggletip) {\r\n this.tooltip?.hidePopover();\r\n this.showToggletip = false;\r\n }\r\n }\r\n\r\n let cleanUp: TooltipClean \| undefined;\r\n\r\n if (this.active && !cleanUp && this.container && this.tooltip && this.tooltipArrow) {\r\n cleanUp = positionTooltip({\r\n referenceElement: this.container,\r\n tipRef: this.tooltip,\r\n tipArrowRef: this.tooltipArrow,\r\n placementTip: \"top\",\r\n });\r\n }\r\n\r\n if (!this.active && cleanUp) {\r\n cleanUp();\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <Fragment>\r\n <span\r\n class=\"toggletip-button\"\r\n role=\"button\"\r\n tabindex={0}\r\n onClick={this.toggle}\r\n onKeyDown={this.keyUpHandler}\r\n onFocusout={this.focusOutHandler}\r\n ref={(element) => (this.container = element)}\r\n >\r\n <span class=\"icon-container\">\r\n <slot name=\"label\" />\r\n <dso-icon icon={this.icon} />\r\n </span>\r\n <Tooltip\r\n visible\r\n onAfterHidden={() => {}}\r\n tipElementRef={(element) => (this.tooltip = element)}\r\n tipArrowElementRef={(element) => (this.tooltipArrow = element)}\r\n >\r\n <slot />\r\n </Tooltip>\r\n ~~</span>\r\n~~ </Fragment>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"ozon-content-toggletip.js","sourceRoot":"","sources":["../../../../../../src/components/ozon-content/components/ozon-content-toggletip/ozon-content-toggletip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Element, Fragment, Prop, State, h } from \"@stencil/core\";\r\n\r\nimport { positionTooltip } from \"../../../../functional-components/tooltip/position-tooltip.function\";\r\nimport { Tooltip } from \"../../../../functional-components/tooltip/tooltip.functional-component\";\r\nimport { TooltipClean } from \"../../../../functional-components/tooltip/tooltip.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-ozon-content-toggletip\",\r\n styleUrl: \"./ozon-content-toggletip.scss\",\r\n shadow: true,\r\n})\r\nexport class ozonContentToggletip implements ComponentInterface {\r\n @Element()\r\n host!: HTMLDsoOzonContentToggletipElement;\r\n\r\n /*\r\n The alias of the icon in the button.\r\n */\r\n @Prop({ reflect: true })\r\n icon?: string;\r\n\r\n @State()\r\n active = false;\r\n\r\n @State()\r\n showToggletip = false;\r\n\r\n private container: HTMLSpanElement \| undefined;\r\n private tooltip: HTMLElement \| undefined;\r\n private tooltipArrow: HTMLElement \| undefined;\r\n\r\n private toggle = () => {\r\n if (this.active) {\r\n this.close();\r\n } else {\r\n this.open();\r\n }\r\n };\r\n\r\n private open = () => {\r\n this.active = true;\r\n };\r\n\r\n private close = () => {\r\n this.active = false;\r\n };\r\n\r\n private focusOutHandler = (event: FocusEvent) => {\r\n if (!this.host.contains(event.relatedTarget as Node)) {\r\n this.close();\r\n }\r\n };\r\n\r\n private keyUpHandler = (event: KeyboardEvent) => {\r\n switch (event.key) {\r\n case \"Escape\":\r\n this.close();\r\n return;\r\n case \" \":\r\n case \"Enter\":\r\n this.toggle();\r\n return;\r\n default:\r\n return;\r\n }\r\n };\r\n\r\n componentDidRender() {\r\n if (this.tooltip) {\r\n if (this.active && !this.showToggletip) {\r\n this.tooltip.showPopover();\r\n this.showToggletip = true;\r\n } else if (!this.active && this.showToggletip) {\r\n this.tooltip?.hidePopover();\r\n this.showToggletip = false;\r\n }\r\n }\r\n\r\n let cleanUp: TooltipClean \| undefined;\r\n\r\n if (this.active && !cleanUp && this.container && this.tooltip && this.tooltipArrow) {\r\n cleanUp = positionTooltip({\r\n referenceElement: this.container,\r\n tipRef: this.tooltip,\r\n tipArrowRef: this.tooltipArrow,\r\n placementTip: \"top\",\r\n });\r\n }\r\n\r\n if (!this.active && cleanUp) {\r\n cleanUp();\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <Fragment>\r\n <span\r\n class=\"toggletip-button\"\r\n role=\"button\"\r\n tabindex={0}\r\n onClick={this.toggle}\r\n onKeyDown={this.keyUpHandler}\r\n onFocusout={this.focusOutHandler}\r\n ref={(element) => (this.container = element)}\r\n >\r\n <span class=\"icon-container\">\r\n <slot name=\"label\" />\r\n <dso-icon icon={this.icon} />\r\n </span>\r\n </span>\r\n <Tooltip\r\n visible\r\n onAfterHidden={() => {}}\r\n tipElementRef={(element) => (this.tooltip = element)}\r\n tipArrowElementRef={(element) => (this.tooltipArrow = element)}\r\n >\r\n <slot />\r\n </Tooltip>\r\n </Fragment>\r\n );\r\n }\r\n}\r\n"]}

package/dist/collection/components/ozon-content/ozon-content.css CHANGED Viewed

@@ -1520,8 +1520,14 @@ span[role=paragraph] {
   display: block;
 }
+span[role=paragraph] {
+  margin-block: var(--_dt-span-role-paragraph-margin-block, 0);
+}
 span[role=paragraph] + span[role=paragraph] {
-  margin-block: 16px 0;
+  margin-block: var(--_dt-span-role-paragraph-margin-block, 16px 0);
+}
+span[role=paragraph] + span[role=paragraph] .dso-tertiary {
+  margin-block-start: -3px;
 }
 :host(:not([inline])) .fallback {

package/dist/collection/components/ozon-content/ozon-content.js CHANGED Viewed

@@ -33,7 +33,7 @@ export class OzonContent {
             annotated: this.annotated,
         };
         const transformed = mapper.transform(this.content, context);
-        return h(Fragment, { key: '71bf1fc9de6ed6e967c1344f904be839d0f7e87d' }, transformed);
+        return h(Fragment, { key: 'aa3def72854fedc1b70c0a0e48c595391e5a34f1' }, transformed);
     }
     static get is() { return "dso-ozon-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/plekinfo-card/plekinfo-card.js CHANGED Viewed

@@ -50,7 +50,7 @@ export class PlekinfoCard {
     }
     render() {
         const hasSymbol = this.symbolSlottedElement !== null;
-        return (h(Host, { key: '8bd09e4be50a57e4ba46a788bf99d1d7e8a81fac', "has-symbol": hasSymbol }, h(WrapWijzigactie, { key: '40547ce417f42c787933405fa1720b815f1ad95d', wijzigactie: this.wijzigactie }, h("div", { key: 'b3e581e1e4db34e378624b8c5994ceab41350abc', class: "dso-plekinfo-card-symbol", hidden: !hasSymbol }, h("slot", { key: '8ddb89d128c5358e1be2c21cc20c2cb5e2201298', name: "symbol" })), h("div", { key: '65357c7899fbb16b4ffbe7c3f079ae2f150e3fd2', class: "dso-plekinfo-card-heading" }, this.href ? (h("a", { href: this.href, target: this.targetBlank ? "_blank" : undefined, rel: this.targetBlank ? "noopener noreferrer" : undefined, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("span", { class: "icon-container" }, this.targetBlank ? (h(Fragment, null, h("dso-icon", { icon: "external-link" }), h("span", { class: "sr-only" }, "(Opent andere website in nieuw tabblad)"))) : (h("dso-icon", { icon: "chevron-right" })), h("slot", { name: "heading" })))) : (h("slot", { name: "heading" })), this.metaSlottedElement !== null && h("slot", { key: '3139231c5a14da2f91a2813be5c638ecae0e5ac6', name: "meta" }), this.interaction !== null && h("slot", { key: 'be68f9b3ecf405353ddd4c8f64a6a7bfeafc4b78', name: "interaction" })), h("div", { key: 'a8d985a44f00c292b7abf1460f4d1efd024ad083', class: "dso-plekinfo-card-content" }, h("slot", { key: 'ad3b50b155a30a63dd9a7f893623f8b31950e753', name: "content" })))));
+        return (h(Host, { key: '6305f493112669000c641d6567e47962236876b3', "has-symbol": hasSymbol }, h(WrapWijzigactie, { key: 'ab713ccf99ead336072b7c30d4870055cab960a5', wijzigactie: this.wijzigactie }, h("div", { key: '2d29efb2de37d0ad66e814e6cfd6a789ec11a984', class: "dso-plekinfo-card-symbol", hidden: !hasSymbol }, h("slot", { key: 'eb419aa55b73b2e59448a354443cf8725af0f469', name: "symbol" })), h("div", { key: 'c3e88e6102fe75fa67e10028a421dc93301015d8', class: "dso-plekinfo-card-heading" }, this.href ? (h("a", { href: this.href, target: this.targetBlank ? "_blank" : undefined, rel: this.targetBlank ? "noopener noreferrer" : undefined, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("span", { class: "icon-container" }, this.targetBlank ? (h(Fragment, null, h("dso-icon", { icon: "external-link" }), h("span", { class: "sr-only" }, "(Opent andere website in nieuw tabblad)"))) : (h("dso-icon", { icon: "chevron-right" })), h("slot", { name: "heading" })))) : (h("slot", { name: "heading" })), this.metaSlottedElement !== null && h("slot", { key: 'b358c83327a3384ff94e0bc389663c13b134d921', name: "meta" }), this.interaction !== null && h("slot", { key: 'ce259bc5874dceb234a08f071cebfc798e01c1c0', name: "interaction" })), h("div", { key: '785f9a8a3c491ea20319ed9c8094afc80ee33f09', class: "dso-plekinfo-card-content" }, h("slot", { key: '8f103b2b559a1e644a6dd71d70b3661423516d9c', name: "content" })))));
     }
     static get is() { return "dso-plekinfo-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/progress-indicator/progress-indicator.js CHANGED Viewed

@@ -6,7 +6,7 @@ export class Progressindicator {
         this.text = i18n(() => this.host, translations);
     }
     render() {
-        return (h(Host, { key: '95e6584eaa29acecfe451a336745944a2980fb4d' }, h("span", { key: 'bab370d7eccad339e382eebfbc973542fa96a409', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("dso-icon", { key: '2591f8e4aff92237d15c758edf43c0dd38b6cb58', icon: "spinner" })), h("span", { key: '259378a3ecf6246b99d72992777e8e92bca12eb9', id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label || this.text("label"))));
+        return (h(Host, { key: '7bacf44f579f035b741b5a23e136cff69c7aa083' }, h("span", { key: 'a83b88a82eb10e12995cd3e0403a75288d6eb57a', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("dso-icon", { key: '950d93d65f958480affdde273e269c60ebfceb80', icon: "spinner" })), h("span", { key: '1fb73fe93305952832896a2325d94cc45b0ec590', id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label || this.text("label"))));
     }
     static get is() { return "dso-progress-indicator"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/project-item/project-item.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { Fragment, h } from "@stencil/core";
 export class ProjectItem {
     render() {
-        return (h(Fragment, { key: 'ea75d643b9a5a0cc4db9f6ab4f901cb97155bedd' }, h("div", { key: 'a44f2390ecc1e3a01bff7669ca74d68acbf13c08', class: "project-item-header" }, h("div", { key: 'ed3472f2e2fe1e30854a22bd8206fc3073d5c882', class: "project-item-title" }, h("slot", { key: '8442772ca4b4f4cb7ddeb88ef3ff14d0bc7edc1f', name: "title" }), this.label && (h("dso-label", { key: '46aaf393385038f8534295322940e1a7252d3cc1', status: "error", compact: true }, this.label))), h("div", { key: '1335f319b2c1d00a0353809e4697cbbb9210c8df', class: "project-item-actions" }, h("slot", { key: '7fc93d4eadb00065d235ba7de3a455248c7d8842', name: "actions" }))), h("div", { key: 'a30e04a5ab828eb615605da1305a30d0e1d80004', class: "project-item-info" }, h("div", { key: 'a457fded49aa0116f71af30e159c2c5d12b70735', class: "project-item-progress" }, h("slot", { key: 'ca4ac2f01408e5256dc2eff77778afe107c0748e', name: "progress" })), h("div", { key: '356482c09f29ec2495c7b6926d09b9031ec08d8f', class: "project-item-status" }, h("slot", { key: 'be4e2cdabce4af0d6caef295414962cc25383560', name: "status" })))));
+        return (h(Fragment, { key: '5a2c55592ab3870a507dd446e79d7fc2838e9149' }, h("div", { key: 'b86031f78d01b13fb759a79e39c30da0aa931f0f', class: "project-item-header" }, h("div", { key: 'f68fd88967309b9189b13c0a3f1736fd394631fc', class: "project-item-title" }, h("slot", { key: '25e4b0a4c6cc550589a950829acace708785ff57', name: "title" }), this.label && (h("dso-label", { key: '06bdc374c402d17d5a9e34ecf1ecf57cd8d2cffe', status: "error", compact: true }, this.label))), h("div", { key: '63be92e046d5bb4be46085d6387016478115baaa', class: "project-item-actions" }, h("slot", { key: '7afac46f6298a71415265b6f7e975185faf38d09', name: "actions" }))), h("div", { key: '7189099642140643709d909944e76721f190ea3d', class: "project-item-info" }, h("div", { key: '5923a8e73b320ab673990a1cb97104ad87b9574e', class: "project-item-progress" }, h("slot", { key: 'bd32ddfc776326324dd6c9835a89d5e0a1fbc8ee', name: "progress" })), h("div", { key: '5a243e2c04bf9175fe4405e384f746bff9893da2', class: "project-item-status" }, h("slot", { key: '8244dd9f5321862eb4780f6e1c731455ae328685', name: "status" })))));
     }
     static get is() { return "dso-project-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/responsive-element/responsive-element.js CHANGED Viewed

@@ -40,7 +40,7 @@ export class ResponsiveElement {
         this.observer.unobserve(this.host);
     }
     render() {
-        return (h(Host, { key: '7d0611bd77c632293da4474e8dbd1c3eecacbd55', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, h("slot", { key: '37f5f78e2bb3978015e9db494164ff532195d55f' })));
+        return (h(Host, { key: '6918ff6309788161c8ba8e81e8ff0101c1de6303', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, h("slot", { key: '13c4f6ba65060340f590fa9c3260d7c68b496435' })));
     }
     static get is() { return "dso-responsive-element"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/scrollable/scrollable.js CHANGED Viewed

@@ -84,9 +84,9 @@ export class Scrollable {
         this.slottedElements.forEach((element) => resizeObserver.unobserve(element));
     }
     render() {
-        return (h("div", { key: '985992c1101f6b920c5bd6d1d16450c64027d488', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, h("div", { key: 'f7ed0c1938cf9b5b06529e6dedc305349bc02c8e', ref: (el) => (this.scrollContainerDiv = el), class: clsx("dso-scroll-container", {
+        return (h("div", { key: '082f41d2a014c7fff9392469a15f9b4df572b443', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, h("div", { key: 'e1f6f3690c9b4cebbfac932e95c1d4930c369a60', ref: (el) => (this.scrollContainerDiv = el), class: clsx("dso-scroll-container", {
                 [`dso-scroll-${this.scrollPosition}`]: this.scrollPosition !== "noScroll",
-            }), onScroll: () => this._setScrollState() }, h("slot", { key: '70e127083a1bb2ea339eee14440b49ed23720771' }))));
+            }), onScroll: () => this._setScrollState() }, h("slot", { key: '5c7cb1480378ade04fb17194c2ba439cfcef63e8' }))));
     }
     static get is() { return "dso-scrollable"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/selectable/selectable.js CHANGED Viewed

@@ -49,7 +49,7 @@ export class Selectable {
     render() {
         var _a;
         const hasInfo = !!this.host.querySelector('[slot="info"]');
-        return (h(Fragment, { key: 'a406bc01d2ece87d87bafc3e83b1011b0eec2853' }, h("div", { key: '9e6b486edc6c7e6ad8db1d1d504d502c9adb2267', class: "dso-selectable-container" }, h("div", { key: 'c654ecf00751275acf93eb53d82d1c02918957ef', class: "dso-selectable-input-wrapper" }, h("input", { key: 'a85b3fb074e5207e34407debd0b04da0524f3955', type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": hasInfo && this.infoFixed ? this.describedById : undefined, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: this.handleOnChange, ref: (el) => (this.input = el) }), !this.labelledById ? (h("label", { htmlFor: this.getIdentifier() }, h("slot", null))) : (h("label", null, h("slot", null)))), hasInfo && !this.infoFixed && (h("dso-info-button", { key: '53993c8ad0b15394901fdb6d67bc83aa89385844', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { key: 'ce3e9bc660c7a5beb36eef42ea1e6089abc9bf96', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", { key: 'b3bf8765cb0d2e616475dfdf0a25998e3d9a637e' }, h("slot", { key: '93121b79a8018d9661e9518855147e79d3d917fc', name: "info" })))), h("slot", { key: '537024a58257ceecb7abba3b0eb69eac7ef5cc1b', name: "options" })));
+        return (h(Fragment, { key: '5f11873e66e481aa5bab33f6306445e2f35545c2' }, h("div", { key: '2b0176b66b0dce43d57a8b41beac0d62f51ca97c', class: "dso-selectable-container" }, h("div", { key: '5fcae509cca4d34d2e0e230a2979bc350d27cc02', class: "dso-selectable-input-wrapper" }, h("input", { key: '5aa5ebb20b52467ce6107cf8aa840edb0ad14055', type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": hasInfo && this.infoFixed ? this.describedById : undefined, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: this.handleOnChange, ref: (el) => (this.input = el) }), !this.labelledById ? (h("label", { htmlFor: this.getIdentifier() }, h("slot", null))) : (h("label", null, h("slot", null)))), hasInfo && !this.infoFixed && (h("dso-info-button", { key: 'ad7d2150640df363f14eefa8a9f843a2962b58e6', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { key: 'ebf5eeafc5d6077cf8403c76cff4aca7336fedf5', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", { key: '729d228a00b1c36e3eb1e9cb6d088b081a8847b9' }, h("slot", { key: '082ba9b15cf8ea5129aacad5c1de40fc896ffbad', name: "info" })))), h("slot", { key: 'c217d7cab8dcc8f34ae0bcc841fdb8d37cde05d6', name: "options" })));
     }
     componentDidRender() {
         if (this.input && typeof this.checked === "boolean" && this.input.checked !== this.checked) {

package/dist/collection/components/skiplink/skiplink.js CHANGED Viewed

@@ -8,7 +8,7 @@ export class Skiplink {
         return this.dsoSkiplinkClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });
     }
     render() {
-        return (h("a", { key: 'fecfeca9270e6e503dc11136912b94393ead130a', href: `#${this.to}`, onClick: (e) => this.clickEventHandler(e) }, this.label, h("dso-icon", { key: '75f9b7ffe88c1b2f9ec97ab9d292d593562008d4', icon: "chevron-right" })));
+        return (h("a", { key: '32abb8e11b774ce18c2cf16c3bc526819bbaade9', href: `#${this.to}`, onClick: (e) => this.clickEventHandler(e) }, this.label, h("dso-icon", { key: '818d701f39b21e7547d0a65db80026eb9887110e', icon: "chevron-right" })));
     }
     static get is() { return "dso-skiplink"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/slide-toggle/slide-toggle.js CHANGED Viewed

@@ -25,7 +25,7 @@ export class SlideToggle {
         this.hasVisibleLabel = this.host.querySelector("*") !== null;
     }
     render() {
-        return (h(Fragment, { key: '0f34c376fadba8a62707d91e84f25677fc5690a3' }, h("button", Object.assign({ key: 'caa9fb16fe1781b355a3f0b9859a07d460c5ec85', id: this.identifier, role: "switch", class: "dso-slider", "aria-checked": "" + this.checked, disabled: this.disabled, onClick: (e) => this.handleSwitch(e) }, (this.accessibleLabel ? { "aria-label": this.accessibleLabel } : {}), (this.labelledbyId ? { "aria-labelledby": this.labelledbyId } : {})), h("svg", { key: '40073a0bd05c1009811be9e892ee4a323a2d9439', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: '9b8ee2e81cd7390998c6e5700a6f7bcb662b876f', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: '5399256e45dc823a7722831e64c7dd5ec0d152f9', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: '2ea153fc376c0889c3c74f8f4440ed1d9dc69659', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: '4bd14e28d33e7af47c386acd8f6e85ad54b6ce84', htmlFor: this.identifier }, h("slot", { key: 'af963203c5fe7fae6f38d518e11be6e69f75b421' })))));
+        return (h(Fragment, { key: '5d9cd03cfa9b00948acd598f149ba1f0ce114cc6' }, h("button", Object.assign({ key: '1e25ca1b3da0d4292c0fe1219924658e7baaff87', id: this.identifier, role: "switch", class: "dso-slider", "aria-checked": "" + this.checked, disabled: this.disabled, onClick: (e) => this.handleSwitch(e) }, (this.accessibleLabel ? { "aria-label": this.accessibleLabel } : {}), (this.labelledbyId ? { "aria-labelledby": this.labelledbyId } : {})), h("svg", { key: '6dd2f4d1634d50e4cf393387ccadaac6d5a4f55b', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: 'b780f9b330d44fdd41d31a9563ab49fc94424d54', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: '326b18d7ab0e104aed97d8c92d221812c174cde9', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: '4cbdc7cd543f4b5497f943392cd210fcc3c4fa5b', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: '21fe8e599aa5d1e266d2fc606b55607e2570d962', htmlFor: this.identifier }, h("slot", { key: '4a89a597d67ff4610e42f0d4b2c96cea056e65a4' })))));
     }
     static get is() { return "dso-slide-toggle"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/survey-rating/survey-rating.js CHANGED Viewed

@@ -18,10 +18,10 @@ export class SurveyRating {
             "Makkelijk",
             "Heel makkelijk",
         ];
-        return (h("dso-panel", { key: '209bab2cef33c37f56b8413bf04047e0556341fe', emphasized: true, onDsoCloseClick: (e) => this.dsoClose.emit({ originalEvent: e }), role: "dialog", "aria-labelledby": "panel-heading" }, h("h2", { key: 'f62928824fa2bbb6ed07430ff30de01c163406bd', id: "panel-heading", slot: "heading" }, "Help ons met een onderzoek"), h("strong", { key: 'cce1261510f10aee5bd9306764a16766a4806101' }, "Hoe moeilijk of makkelijk was deze taak om uit te voeren?"), h("form", { key: '51817673503c19f0c6d0a0c4ab2ad5ed4e9989a8', onSubmit: (e) => this.handleForm(e) }, h("div", { key: '1148f12af5b5685cf782b6ddc9c31e3d3b34f88f', class: "visual-rating-labels", "aria-hidden": "true" }, h("span", { key: '29c772a0b8048494d97efb00bb1790de4dff9480' }, "Heel moeilijk"), h("span", { key: '915f939dc2dbd7c1acebe87715fe7bf8f0d7b0dd' }, "Heel makkelijk")), h("div", { key: '7481cc5e4bd6d7c5d5ffb20a9e0713db1a1c02e2', role: "radiogroup" }, ratings.map((rating, index) => {
+        return (h("dso-panel", { key: '275f1aedb67e7f7d2a3b175b1d854991fa140d1d', emphasized: true, onDsoCloseClick: (e) => this.dsoClose.emit({ originalEvent: e }), role: "dialog", "aria-labelledby": "panel-heading" }, h("h2", { key: '7a140ce9a83b75e66db7b2f12f41c2882809274c', id: "panel-heading", slot: "heading" }, "Help ons met een onderzoek"), h("strong", { key: '9e45d98aaaaf256d9918712b32dfdfea9a8706ec' }, "Hoe moeilijk of makkelijk was deze taak om uit te voeren?"), h("form", { key: '47ff506349a95fed3165177c16b5848ca5bd9daf', onSubmit: (e) => this.handleForm(e) }, h("div", { key: 'b74f351887d2020407a9c6644dabd26e6acc4f4b', class: "visual-rating-labels", "aria-hidden": "true" }, h("span", { key: '6216b30f46b181cdac39adafe6fdf3364e160a55' }, "Heel moeilijk"), h("span", { key: '2c6746373095d09ef5cd19c2015cb240545d4ef9' }, "Heel makkelijk")), h("div", { key: '380e5d754686bb2ecd8be0c56a3efe33f60c010b', role: "radiogroup" }, ratings.map((rating, index) => {
             const ratingNumber = index + 1;
             return (h(Fragment, null, h("label", { class: `survey-rating-${ratingNumber}` }, ratingNumber, h("span", { class: "sr-only" }, rating), h("input", { type: "radio", name: "rating", value: ratingNumber, checked: ratingNumber === this.rating, onChange: (e) => this.handleChange(e) }))));
-        })), h("button", { key: '3acae96b16d24fe066608025560e90dcacc4d878', type: "submit", class: "dso-secondary" }, h("span", { key: 'fb44a653f4215152feb67f25fbd1fa9eda10f702' }, "Antwoord verzenden")))));
+        })), h("button", { key: 'd32cc8c9a15a36021dfa87a1fc24edab0a4020a8', type: "submit", class: "dso-secondary" }, h("span", { key: 'accce3605b3e1df8490c898491aa7318eb4f8874' }, "Antwoord verzenden")))));
     }
     static get is() { return "dso-survey-rating"; }
     static get encapsulation() { return "shadow"; }

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

@@ -36,7 +36,7 @@ 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: 'bcaf2967ab097410366d0b5d37a9c8b6ac42cef8', "is-responsive": (_c = this.isResponsive) === null || _c === void 0 ? void 0 : _c.toString() }, this.modalActive && this.placeholderHeight && (h("div", { key: '2bb16134f324f13653defb6c2651c414cb7b7c6b', 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))))));
+        return (h(Host, { key: '5228dc08b77f9a9a1e1a1a7a1b8ae1bcdbb1c3f2', "is-responsive": (_c = this.isResponsive) === null || _c === void 0 ? void 0 : _c.toString() }, this.modalActive && this.placeholderHeight && (h("div", { key: '513adf4c64ffa560597f976443340595e55c338a', 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("dso-icon-button", { icon: "times", variant: "tertiary", class: "dso-close", label: "Sluiten", onClick: () => this.closeModal() })), 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;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"table.js","sourceRoot":"","sources":["../../../../src/components/table/table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACvG,OAAO,QAAQ,MAAM,UAAU,CAAC;AAChC,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAC;AAO1B,MAAM,OAAO,KAAK;IALlB;QAUU,iBAAY,GAAG,EAAE,EAAE,CAAC;QAK5B;;WAEG;QAEH,YAAO,GAAG,KAAK,CAAC;QAMhB,gBAAW,GAAG,KAAK,CAAC;QASZ,6BAAwB,GAAG,GAAG,EAAE;YACtC,IAAI,CAAC,UAAU,EAAE,CAAC;QACpB,CAAC,CAAC;~~KAqGH~~;~~IA3GS~~,uBAAuB;;QAC7B,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC1C,CAAC;IAMD,iBAAiB;QACf,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,QAAQ,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC;IACzG,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,uBAAuB,EAAE,CAAC;IACjC,CAAC;IAED,kBAAkB;;QAChB,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,MAAA,IAAI,CAAC,aAAa,0CAAE,SAAS,EAAE,CAAC;QAClC,CAAC;IACH,CAAC;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,UAAU,EAAE,CAAC;IACpC,CAAC;IAED,MAAM;;QACJ,MAAM,OAAO,GAAG,MAAA,MAAA,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,0BAA0B,CAAC,0CAAE,WAAW,0CAAE,IAAI,EAAE,CAAC;QAEzF,OAAO,CACL,EAAC,IAAI,sEAAgB,MAAA,IAAI,CAAC,YAAY,0CAAE,QAAQ,EAAE;YAC/C,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,iBAAiB,IAAI,CAC7C,4DAAK,KAAK,EAAC,uBAAuB,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,iBAAiB,IAAI,EAAE,GAAI,CACxF;YAEA,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAClB,cACE,KAAK,EAAC,WAAW,EACjB,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,aAAa,GAAG,OAAO,CAAC,EAChD,OAAO,EAAE,IAAI,CAAC,wBAAwB;gBAEtC,WAAK,KAAK,EAAC,6BAA6B,qBAAkB,IAAI,CAAC,YAAY;oBACzE,WAAK,KAAK,EAAC,YAAY;wBACrB,UAAI,EAAE,EAAE,IAAI,CAAC,YAAY,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,CAAC,OAAO,EAAE,IACtD,OAAO,IAAI,2BAA2B,CACpC;wBACL,~~cAAQ~~,IAAI,EAAC,~~QAAQ~~,EAAC,KAAK,EAAC,WAAW,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE~~;4BACtE~~,~~gBAAU~~,~~IAAI,EAAC,OAAO,GAAY~~;~~4BAClC,YAAM,KAAK,EAAC,SAAS,cAAe,CAC7B,CACL;~~oBAEN,WAAK,KAAK,EAAC,yBAAyB;wBAClC,eAAQ,CACJ,CACF,CACC,CACV,CAAC,CAAC,CAAC,CACF,EAAC,QAAQ;gBACP,WAAK,KAAK,EAAC,qBAAqB,EAAC,MAAM,EAAE,CAAC,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,OAAO;oBACxE,IAAI,CAAC,YAAY,IAAI,CACpB,WAAK,KAAK,EAAC,wBAAwB;wBACjC,wDAAkD,CAC9C,CACP;oBAEA,CAAC,IAAI,CAAC,OAAO,IAAI,CAChB,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,gCAAgC,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE;wBAC1F,YAAM,KAAK,EAAC,SAAS;sCAAQ,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,EAAE;gCAAS;wBACnD,4BAAsB;wBACtB,gBAAU,IAAI,EAAC,eAAe,GAAY,CACnC,CACV,CACG;gBAEN,WAAK,KAAK,EAAC,gBAAgB;oBACzB,eAAQ,CACJ,CACG,CACZ,CACI,CACR,CAAC;IACJ,CAAC;IAEO,SAAS;QACf,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC;QAChD,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;IAC1B,CAAC;IAEO,UAAU;;QAChB,IAAI,CAAC,iBAAiB,GAAG,SAAS,CAAC;QACnC,MAAA,IAAI,CAAC,aAAa,0CAAE,KAAK,EAAE,CAAC;QAC5B,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;IAC3B,CAAC;IAEO,kBAAkB,CAAC,CAAC,QAAQ,CAAwB;QAC1D,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,MAAM,IAAI,KAAK,CAAC,mBAAmB,CAAC,CAAC;QACvC,CAAC;QAED,MAAM,YAAY,GAAG,QAAQ,CAAC,MAAM,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAE5D,IAAI,QAAQ,IAAI,YAAY,YAAY,gBAAgB,EAAE,CAAC;YACzD,IAAI,CAAC,YAAY;gBACf,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QACpG,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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"]}
1	+ {"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 <dso-icon-button\r\n icon=\"times\"\r\n variant=\"tertiary\"\r\n class=\"dso-close\"\r\n label=\"Sluiten\"\r\n onClick={() => this.closeModal()}\r\n />\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/tabs.js CHANGED Viewed

@@ -64,7 +64,7 @@ export class Tabs {
         (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (h(Host, { key: '5b70fabb5d877ca680782d3f01a8a0cfb91b332c' }, h("div", { key: '576db3792a7d533c69c3f0b6c547bdce446998e2', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, h("slot", { key: 'cd1f2dc9007e09095b0fb40e947afe5714dee6c5' })), h("div", { key: '518518b02f68aa78cff82ac7921ece0845a78ea7', role: "tabpanel", tabindex: "0" }, h("slot", { key: '2ed8656a975d9c95a748e6c6be8b66e643c3c72b', name: "panel" }))));
+        return (h(Host, { key: 'ae03ef906dabd5ed64da40b57f818ce447427844' }, h("div", { key: '79c2eeca63a44a81c7d5623b763b52e152f834b8', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, h("slot", { key: 'd3d8396c36601f30b25de572cccf8f02a411abed' })), h("div", { key: '67e6607cc3cc09d2511b38cdb0b218095bfcf2a2', role: "tabpanel", tabindex: "0" }, h("slot", { key: '25164b17aea879289bc7b5f1e43b61ae78e980dd', name: "panel" }))));
     }
     static get is() { return "dso-tabs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,7 @@
 import { Fragment, h } from "@stencil/core";
 export class TijdreisBanner {
     render() {
-        return (h(Fragment, { key: '269e62288db016954b21045658167c3089a0b3b7' }, h("dso-icon", { key: 'f048fe79cd8989af8eab3a33983ec6d66c74c38a', icon: "clock" }), h("slot", { key: '79ad3219eef446a434be6016b2a047c3720ee238' }), h("slot", { key: '8b97af645b9dbb3796ca64bd49d48ccc4cb86f89', name: "button" })));
+        return (h(Fragment, { key: 'd2362057fd3eea7804036862cd899a1d45d6f87b' }, h("dso-icon", { key: 'd52a8f555c066921d32a8ecbfc36a51f2a1ccd1e', icon: "clock" }), h("slot", { key: 'b2722bab4ea3ca7af50fc857abb185f0c8f03280' }), h("slot", { key: '22950f32ed35f10c8bc3df9be90271195abee3dc', name: "button" })));
     }
     static get is() { return "dso-tijdreis-banner"; }
     static get encapsulation() { return "shadow"; }

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

@@ -44,7 +44,7 @@ export class Toggletip {
         };
     }
     render() {
-        return (h(Fragment, { key: '175f1871d9edf972af6dbfb1e9fa31538b2a249f' }, h("dso-info-button", { key: 'b4d1150a9df844042644a1fc2079f70798802401', "aria-describedby": "toggle", onClick: this.click, label: this.label, active: this.active, secondary: this.secondary, ref: (element) => (this.infoButton = element) }), h("dso-tooltip", { key: '3b281dbcd745d515d2ba371d0fe395fb8ddc3dc1', stateless: true, descriptive: true, id: "toggle", strategy: "absolute", active: this.active, position: this.position, small: this.small }, h("slot", { key: '3aaca015bc82ad6c9dc24708b979a6544a8894c6' }))));
+        return (h(Fragment, { key: '6e0399d384bf9b2c8d5fd2f242108c1779540937' }, h("dso-info-button", { key: 'caffd2a1c29b0132d9716193a9b8d5a7be2338f3', "aria-describedby": "toggle", onClick: this.click, label: this.label, active: this.active, secondary: this.secondary, ref: (element) => (this.infoButton = element) }), h("dso-tooltip", { key: '078fa24444c5369fb2f7aa2b130016ac6f1d39aa', stateless: true, descriptive: true, id: "toggle", strategy: "absolute", active: this.active, position: this.position, small: this.small }, h("slot", { key: 'f8c6586d7f0ce98038e8208ff18f7f8ebbdace8a' }))));
     }
     static get is() { return "dso-toggletip"; }
     static get encapsulation() { return "shadow"; }

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

@@ -189,7 +189,7 @@ export class Tooltip {
         }
     }
     render() {
-        return (h(Host, { key: 'f9488965c6aeed8cae6d0fc5bcda53a9f5d7c2ad', class: { hidden: this.hidden }, role: "tooltip", onClick: this.listenClick }, h("div", { key: 'c7f2b3e30c88e59e260dba29b6d6c60f5b1c7c43', class: clsx("tooltip", { in: this.active }) }, !this.noArrow && h("div", { key: 'f684ffa1c9b56578cdbbb87b2c8a5cf911a0dae0', "data-popper-arrow": true, class: "tooltip-arrow" }), h("div", { key: '1b8950838c8820060bfffd6301b29f4bdfaf08b4', "aria-hidden": !this.descriptive || undefined, class: clsx("tooltip-inner", { "dso-small": this.small }) }, h("slot", { key: 'ef96aed9b2ed540448194c2d7e7a1885c0d10b39' })))));
+        return (h(Host, { key: '40393c2c46a62aa1815fd5ae117076bd872b60c1', class: { hidden: this.hidden }, role: "tooltip", onClick: this.listenClick }, h("div", { key: 'e46b816c3fa8662956c23789f04815e4f9acf9d2', class: clsx("tooltip", { in: this.active }) }, !this.noArrow && h("div", { key: 'b2d2455680d0fd4883d3a3b15234cfda84392152', "data-popper-arrow": true, class: "tooltip-arrow" }), h("div", { key: 'ccd2fdff0934bd705539afa2fec476294cb433e3', "aria-hidden": !this.descriptive || undefined, class: clsx("tooltip-inner", { "dso-small": this.small }) }, h("slot", { key: '4f1f21efcb92b8771aa9a2458c5e92883460ea59' })))));
     }
     activatePopper() {
         var _a;

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

@@ -174,7 +174,7 @@ export class TreeView {
     }
     render() {
         var _a;
-        return (h("div", { key: 'eddfc7ef9007d0f6934106feb40af5ee3112b1a9', id: "tree", class: "dso-tree", onKeyDown: (e) => this.keyDownListener(e), ref: (element) => (this.tree = element) }, h("ul", { key: '7720062844882bec31bc8efe0c16685ec5ab3c94', 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: '5735f8e7460d269cdb8a6338b54ee96c28cef98b', id: "tree", class: "dso-tree", onKeyDown: (e) => this.keyDownListener(e), ref: (element) => (this.tree = element) }, h("ul", { key: '2973a236f58916e0246920d437ad7056c0ef7031', 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 CHANGED Viewed

@@ -95,7 +95,8 @@ button::-moz-focus-inner {
   padding-inline: 0 4px;
 }
 .dso-main-panel .toggle-button {
-  --_dso-icon-button-map-border-radius: 0 4px 4px 0;
+  --_dt-icon-button-border-start-start-radius: 0;
+  --_dt-icon-button-border-end-start-radius: 0;
 }
 .dso-document-panel {
@@ -116,8 +117,9 @@ button::-moz-focus-inner {
 }
 .dso-document-panel .sizing-buttons .shrink,
 .dso-document-panel .sizing-buttons .expand {
-  --_dso-icon-button-map-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 4px 0px;
-  --_dso-icon-button-map-border-radius: 4px 0 0 4px;
+  --_dt-icon-button-map-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 4px 0px;
+  --_dt-icon-button-border-start-end-radius: 0;
+  --_dt-icon-button-border-end-end-radius: 0;
 }
 .sizing-buttons,

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

@@ -158,7 +158,7 @@ export class ViewerGrid {
         }
     }
     render() {
-        return (h(Fragment, { key: '43145850b345ebbb2ea909c2118a5e2b322dfad9' }, h("slot", { key: 'ca2494d72755aa1b5b2035f5681766b982da920c', name: "top-bar" }), h("div", { key: 'b985cd4ca9ec0017db1507e918d13a68025e8bfe', class: "viewer-grid-columns" }, this.tabView && (h("nav", { key: 'd1ee4e9c6e279da503971c167e8af10d5b2b2219', class: "dso-navbar" }, h("ul", { key: '9d841fe4e6594050fb472f3818628c380bb4e3c8', class: "dso-nav dso-nav-sub" }, viewerGridTabs.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 === "search")) && (h(MainPanel, { key: 'a2f5e34a950ef4ed3b44ac7e6500b750b151a46d', tabView: this.tabView, mainSize: this.mainSize, documentPanelOpen: this.documentPanelOpen, mainPanelExpanded: this.mainPanelExpanded, mainPanelHidden: this.mainPanelHidden, toggleMainPanel: this.toggleMainPanel, dsoMainSizeChangeAnimationEnd: this.dsoMainSizeChangeAnimationEnd })), (!this.tabView || (this.tabView && this.activeTab === "search")) && (h(FilterPanel, { key: 'ad1bc5a7866901ac7a5dced1607dc13c514c3711', open: this.filterPanelOpen, title: this.filterPanelTitle, ref: (element) => (this.filterPanel = element), dsoCloseFilterPanel: (e) => this.dsoCloseFilterPanel.emit({ originalEvent: e }) })), (!this.tabView || (this.tabView && this.activeTab === "map")) && (h("div", { key: 'a65bc41bad7df50e0f3d184c802b8d81ad83cbe2', class: "map", ref: (element) => (this.mapElement = element) }, h("slot", { key: '60ed646e7ff77e20a579f12d567ac5b7c37e35c9', name: "map" }))), ((!this.tabView && this.documentPanelOpen) || (this.tabView && this.activeTab === "document")) && (h(DocumentPanel, { key: '6820beae879f573e6632ba1f1f82ebd7ac48f2a9', tabView: this.tabView, panelSize: this.documentPanelSize, shrinkDocumentPanel: this.shrinkDocumentPanel, expandDocumentPanel: this.expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd: this.dsoDocumentPanelSizeChangeAnimationEnd })), h(Overlay, { key: 'd0f40b549862f3dfb3ba6347afc6dfd89ff37b9f', ref: (element) => (this.overlay = element), dsoCloseOverlay: (e) => this.dsoCloseOverlay.emit({ originalEvent: e }) }))));
+        return (h(Fragment, { key: '9847a3c1ddb49b69fbf1a51bb07b69ca9ed4ce4c' }, h("slot", { key: '03fbfa717048b5015d61661d2d5433c0faf47565', name: "top-bar" }), h("div", { key: 'f09b17224d46fdab51a389444384040770efe332', class: "viewer-grid-columns" }, this.tabView && (h("nav", { key: '598db232e64fd9040ec6398adc877889fb761e3e', class: "dso-navbar" }, h("ul", { key: '378b508931543448dbc6a5b754a2a4aae7e04aac', class: "dso-nav dso-nav-sub" }, viewerGridTabs.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 === "search")) && (h(MainPanel, { key: '096e23cb054e8c359d9b5f2de4286250f509a79a', tabView: this.tabView, mainSize: this.mainSize, documentPanelOpen: this.documentPanelOpen, mainPanelExpanded: this.mainPanelExpanded, mainPanelHidden: this.mainPanelHidden, toggleMainPanel: this.toggleMainPanel, dsoMainSizeChangeAnimationEnd: this.dsoMainSizeChangeAnimationEnd })), (!this.tabView || (this.tabView && this.activeTab === "search")) && (h(FilterPanel, { key: 'cf3d94936fec7e69ff26a7f80cdc8c9ee3741071', open: this.filterPanelOpen, title: this.filterPanelTitle, ref: (element) => (this.filterPanel = element), dsoCloseFilterPanel: (e) => this.dsoCloseFilterPanel.emit({ originalEvent: e }) })), (!this.tabView || (this.tabView && this.activeTab === "map")) && (h("div", { key: '0b380945565d55094b04572573cce83f986d2fc4', class: "map", ref: (element) => (this.mapElement = element) }, h("slot", { key: 'e9e22c7b6deedb4feed6331ea1178315386fc1b6', name: "map" }))), ((!this.tabView && this.documentPanelOpen) || (this.tabView && this.activeTab === "document")) && (h(DocumentPanel, { key: '9460fa66bd7bb1449a6447b94fb462af18861cc9', tabView: this.tabView, panelSize: this.documentPanelSize, shrinkDocumentPanel: this.shrinkDocumentPanel, expandDocumentPanel: this.expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd: this.dsoDocumentPanelSizeChangeAnimationEnd })), h(Overlay, { key: 'e800a7a3d49dff9cd4eb624114a1135fcb1c5506', ref: (element) => (this.overlay = element), dsoCloseOverlay: (e) => this.dsoCloseOverlay.emit({ originalEvent: e }) }))));
     }
     static get is() { return "dso-viewer-grid"; }
     static get encapsulation() { return "shadow"; }

package/dist/components/button-group.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, forceUpdate, h, transformTag } from '@stencil/core/internal/client';
 import { c as clsx } from './clsx.js';
-const buttonGroupCss = () => `*,*::after,*::before{box-sizing:border-box}:host{display:inline-block}.container{display:inline-flex;border-radius:4px}.container.has-map-buttons{box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.5);background-color:#ccc;gap:1px}::slotted(*){margin:0 !important}:host([direction=row]) ::slotted(:not(:first-child)){border-start-start-radius:0 !important;border-end-start-radius:0 !important}:host([direction=row]) ::slotted(:not(:last-child)){border-start-end-radius:0 !important;border-end-end-radius:0 !important}:host([direction=row]) ::slotted(.dso-secondary){margin-inline-start:-1px !important}:host([direction=column]) .container{flex-direction:column}:host([direction=column]) ::slotted(*){text-align:center !important}:host([direction=column]) ::slotted(:not(:first-child)){border-start-start-radius:0 !important;border-start-end-radius:0 !important}:host([direction=column]) ::slotted(:not(:last-child)){border-end-start-radius:0 !important;border-end-end-radius:0 !important}:host([direction=column]) ::slotted(.dso-secondary){margin-block-start:-1px !important}::slotted(:focus-visible){z-index:1 !important}::slotted(.dso-map){box-shadow:none !important}`;
+const buttonGroupCss = () => `*,*::after,*::before{box-sizing:border-box}:host{display:inline-block}.container{display:inline-flex;border-radius:4px}.container.has-map-buttons{box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.5);background-color:#ccc;gap:1px;--_dt-icon-button-map-box-shadow:0}::slotted(*){margin:0 !important}:host([direction=row]) ::slotted(:not(:first-child)){border-start-start-radius:0 !important;border-end-start-radius:0 !important;--_dt-icon-button-border-start-start-radius:0;--_dt-icon-button-border-end-start-radius:0}:host([direction=row]) ::slotted(:not(:last-child)){border-start-end-radius:0 !important;border-end-end-radius:0 !important;--_dt-icon-button-border-start-end-radius:0;--_dt-icon-button-border-end-end-radius:0;--_dt-icon-button-border-inline-end-width:0}:host([direction=row]) ::slotted(.dso-secondary){margin-inline-start:-1px !important}:host([direction=column]) .container{flex-direction:column}:host([direction=column]) ::slotted(*){text-align:center !important}:host([direction=column]) ::slotted(:not(:first-child)){border-start-start-radius:0 !important;border-start-end-radius:0 !important;--_dt-icon-button-border-start-start-radius:0;--_dt-icon-button-border-start-end-radius:0}:host([direction=column]) ::slotted(:not(:last-child)){border-end-start-radius:0 !important;border-end-end-radius:0 !important;--_dt-icon-button-border-end-start-radius:0;--_dt-icon-button-border-end-end-radius:0;--_dt-icon-button-border-block-end-width:0}:host([direction=column]) ::slotted(.dso-secondary){margin-block-start:-1px !important}::slotted(:focus-visible){z-index:1 !important}::slotted(.dso-map){box-shadow:none !important}`;
 const ButtonGroup = /*@__PURE__*/ proxyCustomElement(class ButtonGroup extends HTMLElement {
     constructor(registerHost) {
@@ -23,17 +23,20 @@ const ButtonGroup = /*@__PURE__*/ proxyCustomElement(class ButtonGroup extends H
         });
         this.mutationObserver.observe(this.host, {
             childList: true,
+            attributes: true,
         });
     }
     disconnectedCallback() {
         var _a;
         (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
-    get hasMapButtons() {
-        return !!this.host.querySelector(":scope > .dso-map");
+    get hasMapButton() {
+        const hasMapIconButton = this.host.querySelector(":scope > dso-icon-button[variant='map']") !== null;
+        const hasMapClass = this.host.querySelector(":scope > .dso-map") !== null;
+        return hasMapIconButton || hasMapClass;
     }
     render() {
-        return (h("div", { key: '19bca6e1fa5b009b83c5ba09d190393b73408438', class: clsx("container", { "has-map-buttons": this.hasMapButtons }), role: "group" }, h("slot", { key: '3aa3142304986e0b3fcf2c204ea7e51ac963926b' })));
+        return (h("div", { key: '0cd0a65e9b4ed512a7f51248628b5729e591e5a9', class: clsx("container", { "has-map-buttons": this.hasMapButton }), role: "group" }, h("slot", { key: '529bd12bf8558e3d8f0a7d76bb49c9c0200714ed' })));
     }
     get host() { return this; }
     static get style() { return buttonGroupCss(); }