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

@dso-toolkit/core 87.0.0 → 88.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 (589) hide show

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

	@@ -1 +1 @@
1	- {"file":"scrollable.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/scrollable/scrollable.scss?tag=dso-scrollable&encapsulation=shadow","src/components/scrollable/scrollable.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n:host {\r\n display: block;\r\n block-size: 100%;\r\n overflow-y: hidden;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.dso-shadow-container {\r\n block-size: 100%;\r\n max-block-size: inherit;\r\n min-block-size: inherit;\r\n position: relative;\r\n\r\n .dso-scroll-container {\r\n block-size: 100%;\r\n max-block-size: inherit;\r\n min-block-size: inherit;\r\n overflow-y: auto;\r\n padding-inline: var(--_dso-scrollable-container-padding-inline, 0);\r\n\r\n &::before,\r\n &::after {\r\n background-repeat: no-repeat;\r\n background-size: 100% units.$u3;\r\n content: \"\";\r\n display: block;\r\n block-size: units.$u3;\r\n inset-inline-start: 0;\r\n opacity: 0;\r\n overflow: visible;\r\n position: absolute;\r\n transition: opacity 150ms ease-in-out;\r\n inline-size: 100%;\r\n pointer-events: none;\r\n z-index: 1;\r\n }\r\n\r\n &::before {\r\n background-image: linear-gradient(to top, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));\r\n inset-block-start: 0;\r\n }\r\n\r\n &::after {\r\n background-image: linear-gradient(to bottom, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));\r\n inset-block-end: 0;\r\n }\r\n\r\n &.dso-scroll-bottom {\r\n &::before {\r\n opacity: 1;\r\n }\r\n }\r\n\r\n &.dso-scroll-top {\r\n &::after {\r\n opacity: 1;\r\n }\r\n }\r\n\r\n &.dso-scroll-middle {\r\n &::before,\r\n &::after {\r\n opacity: 1;\r\n }\r\n }\r\n }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Method, State, h } from \"@stencil/core\";\r\nimport { clsx } from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nimport { DsoScrollEndEvent, ScrollPosition } from \"./scrollable.interfaces\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n debounce(\r\n (entries: ResizeObserverEntry[]) =>\r\n entries.forEach((entry) => getScrollableComponentFromResizeObserverEntry(entry)?._setScrollState()),\r\n 50,\r\n ),\r\n);\r\n\r\nfunction getScrollableComponentFromResizeObserverEntry({\r\n target,\r\n}: ResizeObserverEntry): HTMLDsoScrollableElement \| undefined {\r\n if (target.parentNode instanceof ShadowRoot && isDsoScrollableComponent(target.parentNode.host)) {\r\n return target.parentNode.host;\r\n }\r\n\r\n if (target.parentElement && isDsoScrollableComponent(target.parentElement)) {\r\n return target.parentElement;\r\n }\r\n\r\n return undefined;\r\n}\r\n\r\nfunction isDsoScrollableComponent(element: Element): element is HTMLDsoScrollableElement {\r\n return element.tagName === \"DSO-SCROLLABLE\";\r\n}\r\n\r\n@Component({\r\n tag: \"dso-scrollable\",\r\n styleUrl: \"scrollable.scss\",\r\n shadow: true,\r\n})\r\nexport class Scrollable {\r\n // One MutationObserver per instance because of https://github.com/whatwg/dom/issues/126\r\n private mutationObserver = new MutationObserver((entries) =>\r\n entries.forEach(({ target }) => {\r\n const element = target.parentElement?.closest(\"dso-scrollable\");\r\n if (element !== this.host) {\r\n return;\r\n }\r\n\r\n this._setScrollState();\r\n }),\r\n );\r\n\r\n private scrollContainerDiv?: HTMLDivElement;\r\n\r\n private shadowContainerDiv?: HTMLDivElement;\r\n\r\n @Element()\r\n host!: HTMLDsoScrollableElement;\r\n\r\n /*\r\n Event emitted when the scrollbar has reached top or bottom.\r\n /\r\n @Event()\r\n dsoScrollEnd!: EventEmitter<DsoScrollEndEvent>;\r\n\r\n @State()\r\n scrollPosition: ScrollPosition = \"noScroll\";\r\n\r\n /\r\n @internal\r\n */\r\n @Method()\r\n async _setScrollState() {\r\n if (!this.host.isConnected) {\r\n return;\r\n }\r\n\r\n const scrollPosition = this.getScrollPosition();\r\n if (this.scrollPosition !== scrollPosition) {\r\n this.scrollPosition = scrollPosition;\r\n\r\n if (this.scrollPosition === \"top\" \|\| this.scrollPosition === \"bottom\") {\r\n this.dsoScrollEnd.emit({ scrollEnd: this.scrollPosition });\r\n }\r\n }\r\n }\r\n\r\n private get slottedElements() {\r\n return Array.from(this.host.children);\r\n }\r\n\r\n private getScrollPosition(): ScrollPosition {\r\n if (!this.scrollContainerDiv) {\r\n return \"noScroll\";\r\n }\r\n\r\n const { scrollHeight, clientHeight, scrollTop } = this.scrollContainerDiv;\r\n\r\n if (scrollHeight <= clientHeight) {\r\n return \"noScroll\";\r\n }\r\n\r\n if (scrollTop === 0) {\r\n return \"top\";\r\n }\r\n\r\n if (scrollHeight - scrollTop - clientHeight < 1) {\r\n return \"bottom\";\r\n }\r\n\r\n if (scrollTop > 0) {\r\n return \"middle\";\r\n }\r\n\r\n return \"noScroll\";\r\n }\r\n\r\n componentDidLoad(): void {\r\n this.mutationObserver.observe(this.host, {\r\n characterData: true,\r\n attributes: false,\r\n childList: false,\r\n subtree: true,\r\n });\r\n\r\n if (this.shadowContainerDiv instanceof HTMLDivElement) {\r\n resizeObserver.observe(this.shadowContainerDiv);\r\n }\r\n\r\n this.slottedElements.forEach((element) => resizeObserver.observe(element));\r\n }\r\n\r\n disconnectedCallback(): void {\r\n if (this.shadowContainerDiv instanceof HTMLDivElement) {\r\n resizeObserver.unobserve(this.shadowContainerDiv);\r\n }\r\n\r\n this.mutationObserver.disconnect();\r\n\r\n this.slottedElements.forEach((element) => resizeObserver.unobserve(element));\r\n }\r\n\r\n render() {\r\n return (\r\n <div ref={(el) => (this.shadowContainerDiv = el)} class=\"dso-shadow-container\">\r\n <div\r\n ref={(el) => (this.scrollContainerDiv = el)}\r\n class={clsx(\"dso-scroll-container\", {\r\n [`dso-scroll-${this.scrollPosition}`]: this.scrollPosition !== \"noScroll\",\r\n })}\r\n onScroll={() => this._setScrollState()}\r\n >\r\n <slot></slot>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"scrollable.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/scrollable/scrollable.scss?tag=dso-scrollable&encapsulation=shadow","src/components/scrollable/scrollable.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n:host {\r\n display: block;\r\n block-size: 100%;\r\n overflow-y: hidden;\r\n border-radius: var(--_dt-scrollable-border-radius, 0);\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.dso-shadow-container {\r\n block-size: 100%;\r\n max-block-size: inherit;\r\n min-block-size: inherit;\r\n position: relative;\r\n\r\n .dso-scroll-container {\r\n block-size: 100%;\r\n max-block-size: inherit;\r\n min-block-size: inherit;\r\n overflow-y: auto;\r\n padding-inline: var(--_dt-scrollable-container-padding-inline, 0);\r\n padding-block: var(--_dt-scrollable-container-padding-block, 0);\r\n border-end-start-radius: var(--_dt-scrollable-container-border-end-start-radius, 0);\r\n border-end-end-radius: var(--_dt-scrollable-container-border-end-end-radius, 0);\r\n\r\n &::before,\r\n &::after {\r\n background-repeat: no-repeat;\r\n background-size: 100% units.$u3;\r\n content: \"\";\r\n display: block;\r\n block-size: units.$u3;\r\n inset-inline-start: 0;\r\n opacity: 0;\r\n overflow: visible;\r\n position: absolute;\r\n transition: opacity 150ms ease-in-out;\r\n inline-size: 100%;\r\n pointer-events: none;\r\n z-index: 1;\r\n border-end-start-radius: var(--_dt-scrollable-container-border-end-start-radius, 0);\r\n border-end-end-radius: var(--_dt-scrollable-container-border-end-end-radius, 0);\r\n }\r\n\r\n &::before {\r\n background-image: linear-gradient(to top, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));\r\n inset-block-start: 0;\r\n }\r\n\r\n &::after {\r\n background-image: linear-gradient(to bottom, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));\r\n inset-block-end: 0;\r\n }\r\n\r\n &.dso-scroll-bottom {\r\n &::before {\r\n opacity: 1;\r\n }\r\n }\r\n\r\n &.dso-scroll-top {\r\n &::after {\r\n opacity: 1;\r\n }\r\n }\r\n\r\n &.dso-scroll-middle {\r\n &::before,\r\n &::after {\r\n opacity: 1;\r\n }\r\n }\r\n }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Method, State, h } from \"@stencil/core\";\r\nimport { clsx } from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nimport { DsoScrollEndEvent, ScrollPosition } from \"./scrollable.interfaces\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n debounce(\r\n (entries: ResizeObserverEntry[]) =>\r\n entries.forEach((entry) => getScrollableComponentFromResizeObserverEntry(entry)?._setScrollState()),\r\n 50,\r\n ),\r\n);\r\n\r\nfunction getScrollableComponentFromResizeObserverEntry({\r\n target,\r\n}: ResizeObserverEntry): HTMLDsoScrollableElement \| undefined {\r\n if (target.parentNode instanceof ShadowRoot && isDsoScrollableComponent(target.parentNode.host)) {\r\n return target.parentNode.host;\r\n }\r\n\r\n if (target.parentElement && isDsoScrollableComponent(target.parentElement)) {\r\n return target.parentElement;\r\n }\r\n\r\n return undefined;\r\n}\r\n\r\nfunction isDsoScrollableComponent(element: Element): element is HTMLDsoScrollableElement {\r\n return element.tagName === \"DSO-SCROLLABLE\";\r\n}\r\n\r\n@Component({\r\n tag: \"dso-scrollable\",\r\n styleUrl: \"scrollable.scss\",\r\n shadow: true,\r\n})\r\nexport class Scrollable {\r\n // One MutationObserver per instance because of https://github.com/whatwg/dom/issues/126\r\n private mutationObserver = new MutationObserver((entries) =>\r\n entries.forEach(({ target }) => {\r\n const element = target.parentElement?.closest(\"dso-scrollable\");\r\n if (element !== this.host) {\r\n return;\r\n }\r\n\r\n this._setScrollState();\r\n }),\r\n );\r\n\r\n private scrollContainerDiv?: HTMLDivElement;\r\n\r\n private shadowContainerDiv?: HTMLDivElement;\r\n\r\n @Element()\r\n host!: HTMLDsoScrollableElement;\r\n\r\n /*\r\n Event emitted when the scrollbar has reached top or bottom.\r\n /\r\n @Event()\r\n dsoScrollEnd!: EventEmitter<DsoScrollEndEvent>;\r\n\r\n @State()\r\n scrollPosition: ScrollPosition = \"noScroll\";\r\n\r\n /\r\n @internal\r\n */\r\n @Method()\r\n async _setScrollState() {\r\n if (!this.host.isConnected) {\r\n return;\r\n }\r\n\r\n const scrollPosition = this.getScrollPosition();\r\n if (this.scrollPosition !== scrollPosition) {\r\n this.scrollPosition = scrollPosition;\r\n\r\n if (this.scrollPosition === \"top\" \|\| this.scrollPosition === \"bottom\") {\r\n this.dsoScrollEnd.emit({ scrollEnd: this.scrollPosition });\r\n }\r\n }\r\n }\r\n\r\n private get slottedElements() {\r\n return Array.from(this.host.children);\r\n }\r\n\r\n private getScrollPosition(): ScrollPosition {\r\n if (!this.scrollContainerDiv) {\r\n return \"noScroll\";\r\n }\r\n\r\n const { scrollHeight, clientHeight, scrollTop } = this.scrollContainerDiv;\r\n\r\n if (scrollHeight <= clientHeight) {\r\n return \"noScroll\";\r\n }\r\n\r\n if (scrollTop === 0) {\r\n return \"top\";\r\n }\r\n\r\n if (scrollHeight - scrollTop - clientHeight < 1) {\r\n return \"bottom\";\r\n }\r\n\r\n if (scrollTop > 0) {\r\n return \"middle\";\r\n }\r\n\r\n return \"noScroll\";\r\n }\r\n\r\n componentDidLoad(): void {\r\n this.mutationObserver.observe(this.host, {\r\n characterData: true,\r\n attributes: false,\r\n childList: false,\r\n subtree: true,\r\n });\r\n\r\n if (this.shadowContainerDiv instanceof HTMLDivElement) {\r\n resizeObserver.observe(this.shadowContainerDiv);\r\n }\r\n\r\n this.slottedElements.forEach((element) => resizeObserver.observe(element));\r\n }\r\n\r\n disconnectedCallback(): void {\r\n if (this.shadowContainerDiv instanceof HTMLDivElement) {\r\n resizeObserver.unobserve(this.shadowContainerDiv);\r\n }\r\n\r\n this.mutationObserver.disconnect();\r\n\r\n this.slottedElements.forEach((element) => resizeObserver.unobserve(element));\r\n }\r\n\r\n render() {\r\n return (\r\n <div ref={(el) => (this.shadowContainerDiv = el)} class=\"dso-shadow-container\">\r\n <div\r\n ref={(el) => (this.scrollContainerDiv = el)}\r\n class={clsx(\"dso-scroll-container\", {\r\n [`dso-scroll-${this.scrollPosition}`]: this.scrollPosition !== \"noScroll\",\r\n })}\r\n onScroll={() => this._setScrollState()}\r\n >\r\n <slot></slot>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/selectable.js CHANGED Viewed

@@ -1,8 +1,9 @@
 import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Fragment, transformTag } from '@stencil/core/internal/client';
-import { d as defineCustomElement$4 } from './icon.js';
-import { d as defineCustomElement$3 } from './icon-button.js';
-import { d as defineCustomElement$2 } from './info.js';
-import { d as defineCustomElement$1 } from './info-button.js';
+import { d as defineCustomElement$5 } from './icon.js';
+import { d as defineCustomElement$4 } from './icon-button.js';
+import { d as defineCustomElement$3 } from './info.js';
+import { d as defineCustomElement$2 } from './info-button.js';
+import { d as defineCustomElement$1 } from './scrollable.js';
 /**
  * Form random hash
@@ -69,7 +70,7 @@ const Selectable = /*@__PURE__*/ proxyCustomElement(class Selectable extends HTM
     render() {
         var _a;
         const hasInfo = !!this.host.querySelector('[slot="info"]');
-        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" })));
+        return (h(Fragment, { key: '8a4ee13b4d34c210f5d4c4e9151b5d7d53802d37' }, h("div", { key: 'f67278b4fde95cd251323b97e79f93fb04c9b9e2', class: "dso-selectable-container" }, h("div", { key: 'e2359fe5b5d34b2f538d1a2d5f15f27eca3d329e', class: "dso-selectable-input-wrapper" }, h("input", { key: '09172958d3854b939b4d29d922ef5aabee8f2eb8', 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: '861f5e947c5e185e1e44f98fb2b9f5f8f1de0a90', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { key: 'b342d8fe01db69e44a8f4c14b435de26e4267fbe', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", { key: '58cf179b6ff01f2162ae3dbc5f90efbc32ae21bb' }, h("slot", { key: '5dbec26a759ae19daad1907b895a70b7d947bd07', name: "info" })))), h("slot", { key: 'f015ceda5af6134a7812cad315f28751a8b3c57a', name: "options" })));
     }
     componentDidRender() {
         if (this.input && typeof this.checked === "boolean" && this.input.checked !== this.checked) {
@@ -107,7 +108,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["dso-selectable", "dso-icon", "dso-icon-button", "dso-info", "dso-info-button"];
+    const components = ["dso-selectable", "dso-icon", "dso-icon-button", "dso-info", "dso-info-button", "dso-scrollable"];
     components.forEach(tagName => { switch (tagName) {
         case "dso-selectable":
             if (!customElements.get(transformTag(tagName))) {
@@ -116,20 +117,25 @@ function defineCustomElement() {
             break;
         case "dso-icon":
             if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$4();
+                defineCustomElement$5();
             }
             break;
         case "dso-icon-button":
             if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$3();
+                defineCustomElement$4();
             }
             break;
         case "dso-info":
             if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$2();
+                defineCustomElement$3();
             }
             break;
         case "dso-info-button":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$2();
+            }
+            break;
+        case "dso-scrollable":
             if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$1();
             }

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

	@@ -1 +1 @@
1	- {"file":"selectable.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/utils/create-identifier.ts","src/components/selectable/selectable.scss?tag=dso-selectable&encapsulation=scoped","src/components/selectable/selectable.tsx"],"sourcesContent":["/*\r\n Form random hash\r\n /\r\nexport function chr4() {\r\n return Math.random().toString(16).slice(-4);\r\n}\r\n\r\n/\r\n Create random identifier with a prefix\r\n * @param prefix\r\n /\r\nexport function createIdentifier(prefix: string): string {\r\n return `${prefix}-${chr4()}${chr4()}-${chr4()}-${chr4()}-${chr4()}-${chr4()}${chr4()}${chr4()}`;\r\n}\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n@use \"selectable.variables\" as selectable-variables;\r\n\r\n:host {\r\n padding-inline-start: var(--_dt-selectable-padding-inline-start, selectable-variables.$symbol-indent);\r\n position: relative;\r\n display: var(--dso-selectable-display, block);\r\n\r\n label {\r\n font-weight: 400;\r\n line-height: selectable-variables.$size;\r\n margin: 0;\r\n }\r\n\r\n input[type=\"checkbox\"][disabled],\r\n input[type=\"radio\"][disabled] {\r\n &,\r\n &:active,\r\n &:focus {\r\n + label {\r\n &::before {\r\n background-color: colors.$wit;\r\n box-shadow: 0 0 0 selectable-variables.$border-width selectable-variables.$disabled-color;\r\n }\r\n }\r\n }\r\n }\r\n\r\n input[type=\"checkbox\"],\r\n input[type=\"radio\"] {\r\n block-size: 100%;\r\n inset-inline-start: 0;\r\n margin: 0;\r\n appearance: none;\r\n position: absolute;\r\n inset-block-start: 0;\r\n inline-size: 100%;\r\n z-index: zindex.$selectable;\r\n zoom: 1;\r\n\r\n @media (prefers-contrast: more) {\r\n opacity: 1;\r\n }\r\n\r\n &:not([disabled]) {\r\n cursor: pointer;\r\n }\r\n\r\n + label {\r\n display: inline;\r\n font-style: normal;\r\n padding-inline-start: 0;\r\n\r\n &::before {\r\n background: colors.$wit;\r\n border: 0;\r\n box-shadow: 0 0 0 selectable-variables.$border-width\r\n var(--_dso-selectable-color, selectable-variables.$valid-color);\r\n content: \"\";\r\n block-size: selectable-variables.$size - 2 selectable-variables.$border-width;\r\n inset-inline-start: selectable-variables.$border-width;\r\n position: absolute;\r\n inset-block-start: selectable-variables.$border-width;\r\n inline-size: selectable-variables.$size - 2 * selectable-variables.$border-width;\r\n }\r\n }\r\n\r\n &:active,\r\n &.active {\r\n + label::before {\r\n background-color: selectable-variables.$active-background-color;\r\n box-shadow: 0 0 0 1px selectable-variables.$valid-color;\r\n block-size: selectable-variables.$size - 2px;\r\n inset-inline-start: 1px;\r\n inset-block-start: 1px;\r\n inline-size: selectable-variables.$size - 2px;\r\n }\r\n }\r\n }\r\n\r\n input[type=\"checkbox\"] {\r\n + label {\r\n &::before {\r\n border-radius: 4px;\r\n }\r\n\r\n &::after {\r\n background: transparent;\r\n content: \"\";\r\n inset-inline-start: 6px;\r\n opacity: 0;\r\n position: absolute;\r\n inset-block-start: 6px;\r\n zoom: 1;\r\n }\r\n }\r\n\r\n &:checked,\r\n &:indeterminate {\r\n + label {\r\n &::after {\r\n opacity: 1;\r\n }\r\n }\r\n }\r\n\r\n &:checked {\r\n + label {\r\n &::after {\r\n border: solid;\r\n border-color: var(--_dso-selectable-color, selectable-variables.$valid-marker-color);\r\n border-block-start-color: transparent;\r\n border-width: 0 0 3px 3px;\r\n block-size: 8px;\r\n transform: rotate(-45deg);\r\n inline-size: 13px;\r\n }\r\n }\r\n }\r\n\r\n &:indeterminate {\r\n + label {\r\n &::after {\r\n background-color: var(--_dso-selectable-color, selectable-variables.$valid-marker-color);\r\n block-size: selectable-variables.$indeterminate-size;\r\n inline-size: selectable-variables.$indeterminate-size;\r\n }\r\n }\r\n }\r\n }\r\n\r\n input[type=\"radio\"] {\r\n + label {\r\n &::before {\r\n border-radius: 50%;\r\n }\r\n\r\n &::after {\r\n background-color: transparent;\r\n border-radius: 50%;\r\n content: \"\";\r\n block-size: 12px;\r\n inset-inline-start: 6px;\r\n opacity: 0;\r\n position: absolute;\r\n inset-block-start: 6px;\r\n inline-size: 12px;\r\n zoom: 1;\r\n }\r\n }\r\n\r\n &:checked {\r\n + label {\r\n &::after {\r\n background-color: var(--_dso-selectable-color, selectable-variables.$valid-marker-color);\r\n opacity: 1;\r\n }\r\n }\r\n }\r\n }\r\n\r\n &[invalid]:not([invalid=\"false\"]) {\r\n --_dso-selectable-color: #{selectable-variables.$invalid-color};\r\n }\r\n\r\n > dso-info {\r\n float: none;\r\n margin-block: units.$u1 0;\r\n margin-inline: 0 units.$u2;\r\n inline-size: 100%;\r\n }\r\n\r\n .dso-selectable-options {\r\n list-style: none;\r\n margin-block-start: units.$u1;\r\n padding-inline-start: 0;\r\n\r\n li + li {\r\n margin-block-start: units.$u1;\r\n }\r\n }\r\n}\r\n\r\n:host(:not(:last-child)) {\r\n margin-block-end: units.$u1;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.dso-selectable-container {\r\n display: inline-block;\r\n\r\n .dso-selectable-input-wrapper {\r\n display: inline-block;\r\n min-block-size: units.$u3;\r\n position: relative;\r\n margin-inline-start: var(\r\n --_dt-selectable-input-wrapper-margin-inline-start,\r\n -(selectable-variables.$symbol-indent)\r\n );\r\n padding-inline-start: var(--_dt-selectable-input-wrapper-padding-inline-start, selectable-variables.$symbol-indent);\r\n\r\n input[type=\"radio\"],\r\n input[type=\"checkbox\"] {\r\n &:focus + label::before {\r\n box-shadow: 0 0 0 selectable-variables.$border-width\r\n var(--_dso-selectable-color, selectable-variables.$valid-color);\r\n block-size: selectable-variables.$size - 2 * selectable-variables.$border-width;\r\n inset-inline-start: selectable-variables.$border-width;\r\n inset-block-start: selectable-variables.$border-width;\r\n inline-size: selectable-variables.$size - 2 * selectable-variables.$border-width;\r\n }\r\n }\r\n }\r\n}\r\n\r\n::slotted([slot=\"info\"]) {\r\n float: none;\r\n margin-block: units.$u1 0;\r\n margin-inline: 0 units.$u2;\r\n inline-size: 100%;\r\n}\r\n\r\n::slotted([slot=\"options\"]) {\r\n list-style: none;\r\n margin-block-start: units.$u1;\r\n padding-inline-start: 0;\r\n\r\n li + li {\r\n margin-block-start: units.$u1;\r\n }\r\n}\r\n","import {\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n Fragment,\r\n Method,\r\n Prop,\r\n State,\r\n Watch,\r\n forceUpdate,\r\n h,\r\n} from \"@stencil/core\";\r\n\r\nimport { createIdentifier } from \"../../utils/create-identifier\";\r\n\r\nimport { SelectableChangeEvent } from \"./selectable.interfaces\";\r\n\r\n/*\r\n @slot - The label for this control\r\n * @slot info - Rich Content to be slotted in Info.\r\n * @slot options - for further nested selectable options: `<ul class=\"dso-selectable-options\" slot=\"options\">` and wrap each Selectable in a `<li>`.\r\n /\r\n@Component({\r\n tag: \"dso-selectable\",\r\n styleUrl: \"selectable.scss\",\r\n scoped: true,\r\n})\r\nexport class Selectable implements ComponentInterface {\r\n /\r\n Type of Selectable.\r\n \r\n `checkbox`: Multiple options\r\n * `radio`: Single option.\r\n /\r\n @Prop()\r\n type!: \"checkbox\" \| \"radio\";\r\n\r\n /\r\n To set `<input id>` attribute for external references.\r\n /\r\n @Prop()\r\n identifier?: string;\r\n\r\n /\r\n Name of the Selectable. Can be used to group Selectables.\r\n /\r\n @Prop()\r\n name?: string;\r\n\r\n /\r\n The value of the Selectable.\r\n /\r\n @Prop()\r\n value!: string;\r\n\r\n /\r\n Set to true of the current value is not valid.\r\n /\r\n @Prop()\r\n invalid?: boolean;\r\n\r\n /\r\n To link this control to an element that describes it.\r\n /\r\n @Prop()\r\n describedById?: string;\r\n\r\n /\r\n To link this control to an element that labels it.\r\n /\r\n @Prop()\r\n labelledById?: string;\r\n\r\n /\r\n To disable the Selectable.\r\n /\r\n @Prop()\r\n disabled?: boolean;\r\n\r\n /\r\n To mark the Selectable as required.\r\n /\r\n @Prop()\r\n required?: boolean;\r\n\r\n /\r\n Mark the Selectable as checked\r\n /\r\n @Prop({ reflect: true })\r\n checked?: boolean;\r\n\r\n /\r\n An indeterminate state is neither true or false. It means the answer is somewhere in between.\r\n \r\n Can be used to indicate child Selectables that are a mix of checked and unchecked.\r\n /\r\n @Prop()\r\n indeterminate?: boolean;\r\n\r\n /\r\n Set to true if the Info should not be toggled and always visible.\r\n /\r\n @Prop()\r\n infoFixed?: boolean;\r\n\r\n /\r\n Emitted when the user checks or unchecks the Selectable.\r\n /\r\n @Event()\r\n dsoChange!: EventEmitter<SelectableChangeEvent>;\r\n\r\n @Element()\r\n host!: HTMLDsoSelectableElement;\r\n\r\n @State()\r\n infoActive = false;\r\n\r\n /\r\n Method to toggle the Info. Is set to `active` when passed.\r\n \r\n If `active` is not passed, Info is toggled to opposite value.\r\n * @param active\r\n */\r\n @Method()\r\n async toggleInfo(active?: boolean) {\r\n this.infoActive = active ?? !this.infoActive;\r\n }\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n private fallbackIdentifier = createIdentifier(\"DsoSelectable\");\r\n\r\n private input: HTMLInputElement \| undefined;\r\n\r\n private handleOnChange = (e: Event) => {\r\n const { target } = e;\r\n\r\n this.dsoChange.emit({\r\n originalEvent: e,\r\n checked: target instanceof HTMLInputElement && target.checked,\r\n });\r\n\r\n forceUpdate(this.host);\r\n };\r\n\r\n componentDidLoad() {\r\n this.mutationObserver?.disconnect();\r\n\r\n this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n this.mutationObserver.observe(this.host, {\r\n childList: true,\r\n });\r\n\r\n this.setIndeterminate();\r\n }\r\n\r\n disconnectedCallback() {\r\n this.mutationObserver?.disconnect();\r\n }\r\n\r\n @Watch(\"indeterminate\")\r\n setIndeterminate() {\r\n if (!(this.input instanceof HTMLInputElement) \|\| this.type !== \"checkbox\") {\r\n return;\r\n }\r\n\r\n this.input.indeterminate = !!this.indeterminate;\r\n }\r\n\r\n render() {\r\n const hasInfo = !!this.host.querySelector('[slot=\"info\"]');\r\n\r\n return (\r\n <Fragment>\r\n <div class=\"dso-selectable-container\">\r\n <div class=\"dso-selectable-input-wrapper\">\r\n <input\r\n type={this.type}\r\n id={this.getIdentifier()}\r\n value={this.value}\r\n name={this.name}\r\n aria-invalid={this.invalid?.toString()}\r\n aria-describedby={hasInfo && this.infoFixed ? this.describedById : undefined}\r\n aria-labelledBy={this.labelledById}\r\n disabled={this.disabled}\r\n required={this.required}\r\n checked={this.checked}\r\n onChange={this.handleOnChange}\r\n ref={(el) => (this.input = el)}\r\n />\r\n {!this.labelledById ? (\r\n <label htmlFor={this.getIdentifier()}>\r\n <slot />\r\n </label>\r\n ) : (\r\n <label>\r\n <slot />\r\n </label>\r\n )}\r\n </div>\r\n {hasInfo && !this.infoFixed && (\r\n <dso-info-button\r\n active={this.infoActive}\r\n onDsoToggle={(e) => (this.infoActive = e.detail.active)}\r\n ></dso-info-button>\r\n )}\r\n </div>\r\n {hasInfo && (\r\n <dso-info\r\n id={hasInfo && this.infoFixed ? this.describedById : undefined}\r\n fixed={this.infoFixed}\r\n active={this.infoActive}\r\n onDsoClose={() => (this.infoActive = false)}\r\n >\r\n <div>\r\n <slot name=\"info\"></slot>\r\n </div>\r\n </dso-info>\r\n )}\r\n <slot name=\"options\" />\r\n </Fragment>\r\n );\r\n }\r\n\r\n componentDidRender(): void {\r\n if (this.input && typeof this.checked === \"boolean\" && this.input.checked !== this.checked) {\r\n this.input.checked = this.checked;\r\n }\r\n }\r\n\r\n private getIdentifier(): string {\r\n return this.identifier ?? this.fallbackIdentifier;\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"selectable.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/utils/create-identifier.ts","src/components/selectable/selectable.scss?tag=dso-selectable&encapsulation=scoped","src/components/selectable/selectable.tsx"],"sourcesContent":["/*\r\n Form random hash\r\n /\r\nexport function chr4() {\r\n return Math.random().toString(16).slice(-4);\r\n}\r\n\r\n/\r\n Create random identifier with a prefix\r\n * @param prefix\r\n /\r\nexport function createIdentifier(prefix: string): string {\r\n return `${prefix}-${chr4()}${chr4()}-${chr4()}-${chr4()}-${chr4()}-${chr4()}${chr4()}${chr4()}`;\r\n}\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n@use \"selectable.variables\" as selectable-variables;\r\n\r\n:host {\r\n padding-inline-start: var(--_dt-selectable-padding-inline-start, selectable-variables.$symbol-indent);\r\n position: relative;\r\n display: var(--dso-selectable-display, block);\r\n\r\n label {\r\n font-weight: 400;\r\n line-height: selectable-variables.$size;\r\n margin: 0;\r\n }\r\n\r\n input[type=\"checkbox\"][disabled],\r\n input[type=\"radio\"][disabled] {\r\n &,\r\n &:active,\r\n &:focus {\r\n + label {\r\n &::before {\r\n background-color: colors.$wit;\r\n box-shadow: 0 0 0 selectable-variables.$border-width selectable-variables.$disabled-color;\r\n }\r\n }\r\n }\r\n }\r\n\r\n input[type=\"checkbox\"],\r\n input[type=\"radio\"] {\r\n block-size: 100%;\r\n inset-inline-start: 0;\r\n margin: 0;\r\n appearance: none;\r\n position: absolute;\r\n inset-block-start: 0;\r\n inline-size: 100%;\r\n z-index: zindex.$selectable;\r\n zoom: 1;\r\n\r\n @media (prefers-contrast: more) {\r\n opacity: 1;\r\n }\r\n\r\n &:not([disabled]) {\r\n cursor: pointer;\r\n }\r\n\r\n + label {\r\n display: inline;\r\n font-style: normal;\r\n padding-inline-start: 0;\r\n\r\n &::before {\r\n background: colors.$wit;\r\n border: 0;\r\n box-shadow: 0 0 0 selectable-variables.$border-width\r\n var(--_dso-selectable-color, selectable-variables.$valid-color);\r\n content: \"\";\r\n block-size: selectable-variables.$size - 2 selectable-variables.$border-width;\r\n inset-inline-start: selectable-variables.$border-width;\r\n position: absolute;\r\n inset-block-start: selectable-variables.$border-width;\r\n inline-size: selectable-variables.$size - 2 * selectable-variables.$border-width;\r\n }\r\n }\r\n\r\n &:active,\r\n &.active {\r\n + label::before {\r\n background-color: selectable-variables.$active-background-color;\r\n box-shadow: 0 0 0 1px selectable-variables.$valid-color;\r\n block-size: selectable-variables.$size - 2px;\r\n inset-inline-start: 1px;\r\n inset-block-start: 1px;\r\n inline-size: selectable-variables.$size - 2px;\r\n }\r\n }\r\n }\r\n\r\n input[type=\"checkbox\"] {\r\n + label {\r\n &::before {\r\n border-radius: 4px;\r\n }\r\n\r\n &::after {\r\n background: transparent;\r\n content: \"\";\r\n inset-inline-start: 6px;\r\n opacity: 0;\r\n position: absolute;\r\n inset-block-start: 6px;\r\n zoom: 1;\r\n }\r\n }\r\n\r\n &:checked,\r\n &:indeterminate {\r\n + label {\r\n &::after {\r\n opacity: 1;\r\n }\r\n }\r\n }\r\n\r\n &:checked {\r\n + label {\r\n &::after {\r\n border: solid;\r\n border-color: var(--_dso-selectable-color, selectable-variables.$valid-marker-color);\r\n border-block-start-color: transparent;\r\n border-width: 0 0 3px 3px;\r\n block-size: 8px;\r\n transform: rotate(-45deg);\r\n inline-size: 13px;\r\n }\r\n }\r\n }\r\n\r\n &:indeterminate {\r\n + label {\r\n &::after {\r\n background-color: var(--_dso-selectable-color, selectable-variables.$valid-marker-color);\r\n block-size: selectable-variables.$indeterminate-size;\r\n inline-size: selectable-variables.$indeterminate-size;\r\n }\r\n }\r\n }\r\n }\r\n\r\n input[type=\"radio\"] {\r\n + label {\r\n &::before {\r\n border-radius: 50%;\r\n }\r\n\r\n &::after {\r\n background-color: transparent;\r\n border-radius: 50%;\r\n content: \"\";\r\n block-size: 12px;\r\n inset-inline-start: 6px;\r\n opacity: 0;\r\n position: absolute;\r\n inset-block-start: 6px;\r\n inline-size: 12px;\r\n zoom: 1;\r\n }\r\n }\r\n\r\n &:checked {\r\n + label {\r\n &::after {\r\n background-color: var(--_dso-selectable-color, selectable-variables.$valid-marker-color);\r\n opacity: 1;\r\n }\r\n }\r\n }\r\n }\r\n\r\n &[invalid]:not([invalid=\"false\"]) {\r\n --_dso-selectable-color: #{selectable-variables.$invalid-color};\r\n }\r\n\r\n > dso-info {\r\n float: none;\r\n margin-block: units.$u1 0;\r\n margin-inline: 0 units.$u2;\r\n inline-size: 100%;\r\n }\r\n\r\n .dso-selectable-options {\r\n list-style: none;\r\n margin-block-start: units.$u1;\r\n padding-inline-start: 0;\r\n\r\n li + li {\r\n margin-block-start: units.$u1;\r\n }\r\n }\r\n}\r\n\r\n:host(:not(:last-child)) {\r\n margin-block-end: units.$u1;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.dso-selectable-container {\r\n display: inline-block;\r\n\r\n .dso-selectable-input-wrapper {\r\n display: inline-block;\r\n min-block-size: units.$u3;\r\n position: relative;\r\n margin-inline-start: var(\r\n --_dt-selectable-input-wrapper-margin-inline-start,\r\n -(selectable-variables.$symbol-indent)\r\n );\r\n padding-inline-start: var(--_dt-selectable-input-wrapper-padding-inline-start, selectable-variables.$symbol-indent);\r\n\r\n input[type=\"radio\"],\r\n input[type=\"checkbox\"] {\r\n &:focus + label::before {\r\n box-shadow: 0 0 0 selectable-variables.$border-width\r\n var(--_dso-selectable-color, selectable-variables.$valid-color);\r\n block-size: selectable-variables.$size - 2 * selectable-variables.$border-width;\r\n inset-inline-start: selectable-variables.$border-width;\r\n inset-block-start: selectable-variables.$border-width;\r\n inline-size: selectable-variables.$size - 2 * selectable-variables.$border-width;\r\n }\r\n }\r\n }\r\n}\r\n\r\n::slotted([slot=\"info\"]) {\r\n float: none;\r\n margin-block: units.$u1 0;\r\n margin-inline: 0 units.$u2;\r\n inline-size: 100%;\r\n}\r\n\r\n::slotted([slot=\"options\"]) {\r\n list-style: none;\r\n margin-block-start: units.$u1;\r\n padding-inline-start: 0;\r\n\r\n li + li {\r\n margin-block-start: units.$u1;\r\n }\r\n}\r\n","import {\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n Fragment,\r\n Method,\r\n Prop,\r\n State,\r\n Watch,\r\n forceUpdate,\r\n h,\r\n} from \"@stencil/core\";\r\n\r\nimport { createIdentifier } from \"../../utils/create-identifier\";\r\n\r\nimport { SelectableChangeEvent } from \"./selectable.interfaces\";\r\n\r\n/*\r\n @slot - The label for this control\r\n * @slot info - Rich Content to be slotted in Info.\r\n * @slot options - for further nested selectable options: `<ul class=\"dso-selectable-options\" slot=\"options\">` and wrap each Selectable in a `<li>`.\r\n /\r\n@Component({\r\n tag: \"dso-selectable\",\r\n styleUrl: \"selectable.scss\",\r\n scoped: true,\r\n})\r\nexport class Selectable implements ComponentInterface {\r\n /\r\n Type of Selectable.\r\n \r\n `checkbox`: Multiple options\r\n * `radio`: Single option.\r\n /\r\n @Prop()\r\n type!: \"checkbox\" \| \"radio\";\r\n\r\n /\r\n To set `<input id>` attribute for external references.\r\n /\r\n @Prop()\r\n identifier?: string;\r\n\r\n /\r\n Name of the Selectable. Can be used to group Selectables.\r\n /\r\n @Prop()\r\n name?: string;\r\n\r\n /\r\n The value of the Selectable.\r\n /\r\n @Prop()\r\n value!: string;\r\n\r\n /\r\n Set to true of the current value is not valid.\r\n /\r\n @Prop()\r\n invalid?: boolean;\r\n\r\n /\r\n To link this control to an element that describes it.\r\n /\r\n @Prop()\r\n describedById?: string;\r\n\r\n /\r\n To link this control to an element that labels it.\r\n /\r\n @Prop()\r\n labelledById?: string;\r\n\r\n /\r\n To disable the Selectable.\r\n /\r\n @Prop()\r\n disabled?: boolean;\r\n\r\n /\r\n To mark the Selectable as required.\r\n /\r\n @Prop()\r\n required?: boolean;\r\n\r\n /\r\n Mark the Selectable as checked\r\n /\r\n @Prop({ reflect: true })\r\n checked?: boolean;\r\n\r\n /\r\n An indeterminate state is neither true or false. It means the answer is somewhere in between.\r\n \r\n Can be used to indicate child Selectables that are a mix of checked and unchecked.\r\n /\r\n @Prop()\r\n indeterminate?: boolean;\r\n\r\n /\r\n Set to true if the Info should not be toggled and always visible.\r\n /\r\n @Prop()\r\n infoFixed?: boolean;\r\n\r\n /\r\n Emitted when the user checks or unchecks the Selectable.\r\n /\r\n @Event()\r\n dsoChange!: EventEmitter<SelectableChangeEvent>;\r\n\r\n @Element()\r\n host!: HTMLDsoSelectableElement;\r\n\r\n @State()\r\n infoActive = false;\r\n\r\n /\r\n Method to toggle the Info. Is set to `active` when passed.\r\n \r\n If `active` is not passed, Info is toggled to opposite value.\r\n * @param active\r\n */\r\n @Method()\r\n async toggleInfo(active?: boolean) {\r\n this.infoActive = active ?? !this.infoActive;\r\n }\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n private fallbackIdentifier = createIdentifier(\"DsoSelectable\");\r\n\r\n private input: HTMLInputElement \| undefined;\r\n\r\n private handleOnChange = (e: Event) => {\r\n const { target } = e;\r\n\r\n this.dsoChange.emit({\r\n originalEvent: e,\r\n checked: target instanceof HTMLInputElement && target.checked,\r\n });\r\n\r\n forceUpdate(this.host);\r\n };\r\n\r\n componentDidLoad() {\r\n this.mutationObserver?.disconnect();\r\n\r\n this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n this.mutationObserver.observe(this.host, {\r\n childList: true,\r\n });\r\n\r\n this.setIndeterminate();\r\n }\r\n\r\n disconnectedCallback() {\r\n this.mutationObserver?.disconnect();\r\n }\r\n\r\n @Watch(\"indeterminate\")\r\n setIndeterminate() {\r\n if (!(this.input instanceof HTMLInputElement) \|\| this.type !== \"checkbox\") {\r\n return;\r\n }\r\n\r\n this.input.indeterminate = !!this.indeterminate;\r\n }\r\n\r\n render() {\r\n const hasInfo = !!this.host.querySelector('[slot=\"info\"]');\r\n\r\n return (\r\n <Fragment>\r\n <div class=\"dso-selectable-container\">\r\n <div class=\"dso-selectable-input-wrapper\">\r\n <input\r\n type={this.type}\r\n id={this.getIdentifier()}\r\n value={this.value}\r\n name={this.name}\r\n aria-invalid={this.invalid?.toString()}\r\n aria-describedby={hasInfo && this.infoFixed ? this.describedById : undefined}\r\n aria-labelledBy={this.labelledById}\r\n disabled={this.disabled}\r\n required={this.required}\r\n checked={this.checked}\r\n onChange={this.handleOnChange}\r\n ref={(el) => (this.input = el)}\r\n />\r\n {!this.labelledById ? (\r\n <label htmlFor={this.getIdentifier()}>\r\n <slot />\r\n </label>\r\n ) : (\r\n <label>\r\n <slot />\r\n </label>\r\n )}\r\n </div>\r\n {hasInfo && !this.infoFixed && (\r\n <dso-info-button\r\n active={this.infoActive}\r\n onDsoToggle={(e) => (this.infoActive = e.detail.active)}\r\n ></dso-info-button>\r\n )}\r\n </div>\r\n {hasInfo && (\r\n <dso-info\r\n id={hasInfo && this.infoFixed ? this.describedById : undefined}\r\n fixed={this.infoFixed}\r\n active={this.infoActive}\r\n onDsoClose={() => (this.infoActive = false)}\r\n >\r\n <div>\r\n <slot name=\"info\"></slot>\r\n </div>\r\n </dso-info>\r\n )}\r\n <slot name=\"options\" />\r\n </Fragment>\r\n );\r\n }\r\n\r\n componentDidRender(): void {\r\n if (this.input && typeof this.checked === \"boolean\" && this.input.checked !== this.checked) {\r\n this.input.checked = this.checked;\r\n }\r\n }\r\n\r\n private getIdentifier(): string {\r\n return this.identifier ?? this.fallbackIdentifier;\r\n }\r\n}\r\n"],"version":3}

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

@@ -33,7 +33,7 @@ const SlideToggle = /*@__PURE__*/ proxyCustomElement(class SlideToggle extends H
         this.hasVisibleLabel = this.host.querySelector("*") !== null;
     }
     render() {
-        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' })))));
+        return (h(Fragment, { key: 'f88a3ab9f40fa65dfc40766e0ba4e4986f41b4d5' }, h("button", Object.assign({ key: '40634c33c236dc5b0c4e8466cc0a5e66f7fda49f', 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: 'fe409ecd9202a635179d92b135e659df10ee6dc9', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: '75fb86fbba230bd789395a6d0545c74eade702f9', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: '0d976634e2d3a8993678b933e06d845909b9314a', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: 'ddcb8c875e8d6c8163f82f71ef11ebef6ce80fe0', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: '8b33599fc06c16697dff6b89feeecb4176f4d4f5', htmlFor: this.identifier }, h("slot", { key: '306ed9a90810c5d11d813b59168f231017f5c3a4' })))));
     }
     get host() { return this; }
     static get style() { return slideToggleCss(); }

package/dist/components/table.js CHANGED Viewed

@@ -1270,7 +1270,7 @@ const Table = /*@__PURE__*/ proxyCustomElement(class Table extends HTMLElement {
     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: '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))))));
+        return (h(Host, { key: '95fda5af5dda45cb55f0b37efee38bcaa99d84ac', "is-responsive": (_c = this.isResponsive) === null || _c === void 0 ? void 0 : _c.toString() }, this.modalActive && this.placeholderHeight && (h("div", { key: '388222068c1ed781740424faabce63a39764ff1c', 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/components/toggletip.js CHANGED Viewed

@@ -1,7 +1,8 @@
 import { proxyCustomElement, HTMLElement, h, Fragment, transformTag } from '@stencil/core/internal/client';
-import { d as defineCustomElement$4 } from './icon.js';
-import { d as defineCustomElement$3 } from './icon-button.js';
-import { d as defineCustomElement$2 } from './info-button.js';
+import { d as defineCustomElement$5 } from './icon.js';
+import { d as defineCustomElement$4 } from './icon-button.js';
+import { d as defineCustomElement$3 } from './info-button.js';
+import { d as defineCustomElement$2 } from './scrollable.js';
 import { d as defineCustomElement$1 } from './tooltip.js';
 const toggletipCss = () => `*,*::after,*::before{box-sizing:border-box}:host{display:inline-block;--tooltip-margin-block-start:0;--tooltip-margin-inline-start:3px;--tooltip-margin-inline-end:units.$u1 * -1 !important}:host(:focus){outline:none;z-index:410}`;
@@ -56,7 +57,7 @@ const Toggletip = /*@__PURE__*/ proxyCustomElement(class Toggletip extends HTMLE
         };
     }
     render() {
-        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' }))));
+        return (h(Fragment, { key: 'e4df77108aca160620fea4790bf975eeb57d7043' }, h("dso-info-button", { key: '0b86a3272e62ed4adbe2afa973c610ba54947f10', "aria-describedby": "toggle", onClick: this.click, label: this.label, active: this.active, secondary: this.secondary, ref: (element) => (this.infoButton = element) }), h("dso-tooltip", { key: '1f1adb0eb1098d2d5d60402005d6fb67b595d167', stateless: true, descriptive: true, id: "toggle", strategy: "absolute", active: this.active, position: this.position, small: this.small }, h("slot", { key: 'd49b58fa8b6ddeeeee2d6954e0df07b07669adf8' }))));
     }
     get host() { return this; }
     static get style() { return toggletipCss(); }
@@ -71,7 +72,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["dso-toggletip", "dso-icon", "dso-icon-button", "dso-info-button", "dso-tooltip"];
+    const components = ["dso-toggletip", "dso-icon", "dso-icon-button", "dso-info-button", "dso-scrollable", "dso-tooltip"];
     components.forEach(tagName => { switch (tagName) {
         case "dso-toggletip":
             if (!customElements.get(transformTag(tagName))) {
@@ -80,15 +81,20 @@ function defineCustomElement() {
             break;
         case "dso-icon":
             if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$4();
+                defineCustomElement$5();
             }
             break;
         case "dso-icon-button":
             if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$3();
+                defineCustomElement$4();
             }
             break;
         case "dso-info-button":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$3();
+            }
+            break;
+        case "dso-scrollable":
             if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$2();
             }

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

	@@ -1 +1 @@
1	- {"file":"toggletip.js","mappings":"~~;;;;;;~~AAAA,MAAM,YAAY,GAAG,MAAM,CAAC,oOAAoO,CAAC;;MCQpP,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAA,WAAA,CAAA;AALtB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAUE,QAAA,IAAM,CAAA,MAAA,GAAG,KAAK;AAEd;;AAEG;AAEH,QAAA,IAAK,CAAA,KAAA,GAAG,aAAa;AAErB;;AAEG;AAEH,QAAA,IAAQ,CAAA,QAAA,GAAc,OAAO;AAgBrB,QAAA,IAAK,CAAA,KAAA,GAAG,MAAK;AACnB,YAAA,IAAI,IAAI,CAAC,MAAM,EAAE;gBACf,IAAI,CAAC,KAAK,EAAE;;iBACP;gBACL,IAAI,CAAC,IAAI,EAAE;;AAEf,SAAC;AAEO,QAAA,IAAI,CAAA,IAAA,GAAG,MAAK;AAClB,YAAA,IAAI,CAAC,MAAM,GAAG,IAAI;YAClB,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,eAAe,CAAC;YAC3D,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,gBAAgB,CAAC;AAC/D,SAAC;AAEO,QAAA,IAAK,CAAA,KAAA,GAAG,MAAK;YACnB,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,gBAAgB,CAAC;YAChE,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,eAAe,CAAC;AAC9D,YAAA,IAAI,CAAC,MAAM,GAAG,KAAK;AACrB,SAAC;AAEO,QAAA,IAAA,CAAA,gBAAgB,GAAG,CAAC,KAAiB,KAAI;AAC/C,YAAA,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,aAAqB,CAAC,EAAE;gBACpD,IAAI,CAAC,KAAK,EAAE;;AAEhB,SAAC;AAEO,QAAA,IAAA,CAAA,eAAe,GAAG,CAAC,KAAoB,KAAI;;YACjD,IAAI,CAAC,KAAK,CAAC,gBAAgB,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;gBACrD,IAAI,CAAC,KAAK,EAAE;gBACZ,CAAA,EAAA,GAAA,IAAI,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,QAAQ,EAAE;gBAC3B,KAAK,CAAC,cAAc,EAAE;;YAGxB;AACF,SAAC;AA2BF;IAzBC,MAAM,GAAA;QACJ,QACE,EAAC,QAAQ,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACP,CAAA,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,kBAAA,EACmB,QAAQ,EACzB,OAAO,EAAE,IAAI,CAAC,KAAK,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC,EAC7C,CAAA,EACF,CAAA,CAAA,aAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,SAAS,EAAA,IAAA,EACT,WAAW,EAAA,IAAA,EACX,EAAE,EAAC,QAAQ,EACX,QAAQ,EAAC,UAAU,EACnB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EAAA,EAEjB,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACI,CACL~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["__stencil_proxyCustomElement"],"sources":["src/components/toggletip/toggletip.scss?tag=dso-toggletip&encapsulation=shadow","src/components/toggletip/toggletip.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n display: inline-block;\r\n\r\n // tooltip arrow placement exceptions\r\n --tooltip-margin-block-start: 0;\r\n --tooltip-margin-inline-start: 3px;\r\n --tooltip-margin-inline-end: units.$u1 * -1 !important;\r\n}\r\n\r\n:host(:focus) {\r\n outline: none;\r\n z-index: zindex.$tooltip;\r\n}\r\n","import { Placement } from \"@popperjs/core\";\r\nimport { Component, Element, Fragment, Prop, State, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"dso-toggletip\",\r\n styleUrl: \"toggletip.scss\",\r\n shadow: true,\r\n})\r\nexport class Toggletip {\r\n @Element()\r\n host!: HTMLDsoToggletipElement;\r\n\r\n @State()\r\n active = false;\r\n\r\n /*\r\n Toggletip label.\r\n /\r\n @Prop()\r\n label = \"Toelichting\";\r\n\r\n /\r\n Toggletip position.\r\n /\r\n @Prop()\r\n position: Placement = \"right\";\r\n\r\n /\r\n Set to true for small Toggletip.\r\n /\r\n @Prop()\r\n small?: boolean;\r\n\r\n /\r\n Set to true for secondary Toggletip.\r\n */\r\n @Prop()\r\n secondary?: boolean;\r\n\r\n private infoButton?: HTMLDsoInfoButtonElement;\r\n\r\n private click = () => {\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 this.host.addEventListener(\"keydown\", this.keyDownListener);\r\n this.host.addEventListener(\"focusout\", this.focusOutListener);\r\n };\r\n\r\n private close = () => {\r\n this.host.removeEventListener(\"focusout\", this.focusOutListener);\r\n this.host.removeEventListener(\"keydown\", this.keyDownListener);\r\n this.active = false;\r\n };\r\n\r\n private focusOutListener = (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 keyDownListener = (event: KeyboardEvent) => {\r\n if (!event.defaultPrevented && event.key === \"Escape\") {\r\n this.close();\r\n this.infoButton?.setFocus();\r\n event.preventDefault();\r\n }\r\n\r\n return;\r\n };\r\n\r\n render() {\r\n return (\r\n <Fragment>\r\n <dso-info-button\r\n aria-describedby=\"toggle\"\r\n onClick={this.click}\r\n label={this.label}\r\n active={this.active}\r\n secondary={this.secondary}\r\n ref={(element) => (this.infoButton = element)}\r\n />\r\n <dso-tooltip\r\n stateless\r\n descriptive\r\n id=\"toggle\"\r\n strategy=\"absolute\"\r\n active={this.active}\r\n position={this.position}\r\n small={this.small}\r\n >\r\n <slot />\r\n </dso-tooltip>\r\n </Fragment>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"toggletip.js","mappings":";;;;;;;AAAA,MAAM,YAAY,GAAG,MAAM,CAAC,oOAAoO,CAAC;;MCQpP,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAA,WAAA,CAAA;AALtB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAUE,QAAA,IAAM,CAAA,MAAA,GAAG,KAAK;AAEd;;AAEG;AAEH,QAAA,IAAK,CAAA,KAAA,GAAG,aAAa;AAErB;;AAEG;AAEH,QAAA,IAAQ,CAAA,QAAA,GAAc,OAAO;AAgBrB,QAAA,IAAK,CAAA,KAAA,GAAG,MAAK;AACnB,YAAA,IAAI,IAAI,CAAC,MAAM,EAAE;gBACf,IAAI,CAAC,KAAK,EAAE;;iBACP;gBACL,IAAI,CAAC,IAAI,EAAE;;AAEf,SAAC;AAEO,QAAA,IAAI,CAAA,IAAA,GAAG,MAAK;AAClB,YAAA,IAAI,CAAC,MAAM,GAAG,IAAI;YAClB,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,eAAe,CAAC;YAC3D,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,gBAAgB,CAAC;AAC/D,SAAC;AAEO,QAAA,IAAK,CAAA,KAAA,GAAG,MAAK;YACnB,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,gBAAgB,CAAC;YAChE,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,eAAe,CAAC;AAC9D,YAAA,IAAI,CAAC,MAAM,GAAG,KAAK;AACrB,SAAC;AAEO,QAAA,IAAA,CAAA,gBAAgB,GAAG,CAAC,KAAiB,KAAI;AAC/C,YAAA,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,aAAqB,CAAC,EAAE;gBACpD,IAAI,CAAC,KAAK,EAAE;;AAEhB,SAAC;AAEO,QAAA,IAAA,CAAA,eAAe,GAAG,CAAC,KAAoB,KAAI;;YACjD,IAAI,CAAC,KAAK,CAAC,gBAAgB,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;gBACrD,IAAI,CAAC,KAAK,EAAE;gBACZ,CAAA,EAAA,GAAA,IAAI,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,QAAQ,EAAE;gBAC3B,KAAK,CAAC,cAAc,EAAE;;YAGxB;AACF,SAAC;AA2BF;IAzBC,MAAM,GAAA;QACJ,QACE,EAAC,QAAQ,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACP,CAAA,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,kBAAA,EACmB,QAAQ,EACzB,OAAO,EAAE,IAAI,CAAC,KAAK,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC,EAC7C,CAAA,EACF,CAAA,CAAA,aAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,SAAS,EAAA,IAAA,EACT,WAAW,EAAA,IAAA,EACX,EAAE,EAAC,QAAQ,EACX,QAAQ,EAAC,UAAU,EACnB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EAAA,EAEjB,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACI,CACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/toggletip/toggletip.scss?tag=dso-toggletip&encapsulation=shadow","src/components/toggletip/toggletip.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n display: inline-block;\r\n\r\n // tooltip arrow placement exceptions\r\n --tooltip-margin-block-start: 0;\r\n --tooltip-margin-inline-start: 3px;\r\n --tooltip-margin-inline-end: units.$u1 * -1 !important;\r\n}\r\n\r\n:host(:focus) {\r\n outline: none;\r\n z-index: zindex.$tooltip;\r\n}\r\n","import { Placement } from \"@popperjs/core\";\r\nimport { Component, Element, Fragment, Prop, State, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"dso-toggletip\",\r\n styleUrl: \"toggletip.scss\",\r\n shadow: true,\r\n})\r\nexport class Toggletip {\r\n @Element()\r\n host!: HTMLDsoToggletipElement;\r\n\r\n @State()\r\n active = false;\r\n\r\n /*\r\n Toggletip label.\r\n /\r\n @Prop()\r\n label = \"Toelichting\";\r\n\r\n /\r\n Toggletip position.\r\n /\r\n @Prop()\r\n position: Placement = \"right\";\r\n\r\n /\r\n Set to true for small Toggletip.\r\n /\r\n @Prop()\r\n small?: boolean;\r\n\r\n /\r\n Set to true for secondary Toggletip.\r\n */\r\n @Prop()\r\n secondary?: boolean;\r\n\r\n private infoButton?: HTMLDsoInfoButtonElement;\r\n\r\n private click = () => {\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 this.host.addEventListener(\"keydown\", this.keyDownListener);\r\n this.host.addEventListener(\"focusout\", this.focusOutListener);\r\n };\r\n\r\n private close = () => {\r\n this.host.removeEventListener(\"focusout\", this.focusOutListener);\r\n this.host.removeEventListener(\"keydown\", this.keyDownListener);\r\n this.active = false;\r\n };\r\n\r\n private focusOutListener = (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 keyDownListener = (event: KeyboardEvent) => {\r\n if (!event.defaultPrevented && event.key === \"Escape\") {\r\n this.close();\r\n this.infoButton?.setFocus();\r\n event.preventDefault();\r\n }\r\n\r\n return;\r\n };\r\n\r\n render() {\r\n return (\r\n <Fragment>\r\n <dso-info-button\r\n aria-describedby=\"toggle\"\r\n onClick={this.click}\r\n label={this.label}\r\n active={this.active}\r\n secondary={this.secondary}\r\n ref={(element) => (this.infoButton = element)}\r\n />\r\n <dso-tooltip\r\n stateless\r\n descriptive\r\n id=\"toggle\"\r\n strategy=\"absolute\"\r\n active={this.active}\r\n position={this.position}\r\n small={this.small}\r\n >\r\n <slot />\r\n </dso-tooltip>\r\n </Fragment>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/tooltip.functional-component.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { a as autoUpdate, c as computePosition, o as offset, f as flip, s as shift, b as arrow, h as hide } from './floating-ui.dom.js';
+import { a as autoUpdate, c as computePosition, o as offset, f as flip, s as shift, b as arrow, h as hide, d as size } from './floating-ui.dom.js';
 import { h } from '@stencil/core/internal/client';
 import { c as clsx } from './clsx.js';
@@ -9,13 +9,13 @@ import { c as clsx } from './clsx.js';
  * provided arguments 'placementTip', 'topPositionSmallViewPort' and 'halfMainAxisOffset'.
  */
 function positionTooltip(options) {
-    const { referenceElement, tipRef, tipArrowRef, placementTip, topPositionSmallViewPort, halfMainAxisOffset, forceVisible = false, } = options;
+    const { referenceElement, tipRef, tipArrowRef, placementTip, topPositionSmallViewPort, halfMainAxisOffset, forceVisible, restrictContentElement, } = options;
     return autoUpdate(referenceElement, tipRef, () => {
         const padding = 5;
-        const arrowLength = tipArrowRef.offsetWidth;
-        const axisOffsetCalc = Math.sqrt(2 * arrowLength ** 2);
+        const arrowOffsetWidth = tipArrowRef.offsetWidth;
+        const axisOffsetCalc = Math.sqrt(2 * arrowOffsetWidth ** 2);
         const mainAxisOffset = halfMainAxisOffset ? axisOffsetCalc / 2 : axisOffsetCalc;
-        const arrowPadding = arrowLength * Math.sqrt(2) * 1.5;
+        const arrowPadding = arrowOffsetWidth * Math.sqrt(2) * 1.5;
         const smallViewport = topPositionSmallViewPort && document.body.clientWidth < 992;
         // Set placement to top if viewport is small and topPositionSmallViewPort is set to true
         const placement = smallViewport ? "top" : placementTip;
@@ -33,12 +33,21 @@ function positionTooltip(options) {
                     padding,
                 }),
                 arrow({
-                    padding: arrowPadding,
+                    padding: arrowOffsetWidth,
                     element: tipArrowRef,
                 }),
                 hide({
-                    padding: arrowPadding + arrowLength + padding,
+                    padding: arrowOffsetWidth + padding,
                 }),
+                restrictContentElement &&
+                    size({
+                        apply({ availableHeight, availableWidth }) {
+                            Object.assign(restrictContentElement.style, {
+                                maxHeight: `${availableHeight - padding}px`,
+                                maxWidth: `${availableWidth - padding * 2}px`,
+                            });
+                        },
+                    }),
             ],
             placement,
         }).then(({ x, y, middlewareData, placement: computedPlacement, strategy }) => {
@@ -88,7 +97,7 @@ function positionTooltip(options) {
                     bottom: "",
                     left: arrowX ? `${arrowX}px` : "",
                     top: arrowY ? `${arrowY}px` : "",
-                    [staticSide]: `${-arrowLength / 2}px`,
+                    [staticSide]: `${-arrowOffsetWidth / 2}px`,
                     transform: `rotate(${angle}deg)`,
                 });
             }
@@ -99,7 +108,7 @@ function positionTooltip(options) {
 const Tooltip = ({ visible, onAfterHidden, tipElementRef, tipArrowElementRef }, children) => (h("div", { popover: "manual", id: "tooltip", class: clsx(["dso-tooltip", { visible }]), ref: tipElementRef, onTransitionEnd: (e) => {
         e.stopPropagation();
         if (e.propertyName === "opacity" && !visible) {
-            onAfterHidden();
+            onAfterHidden === null || onAfterHidden === void 0 ? void 0 : onAfterHidden();
         }
     } }, h("span", { class: "tooltip-arrow", ref: tipArrowElementRef }), h("div", { class: "tooltip-inner" }, children)));

package/dist/components/tooltip.functional-component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"tooltip.functional-component.js","mappings":";;;;AAIA;;;;;AAKG;AACG,SAAU,eAAe,CAAC,OAAuB,EAAA;AACrD,IAAA,MAAM,EACJ,gBAAgB,EAChB,MAAM,EACN,WAAW,EACX,YAAY,EACZ,wBAAwB,EACxB,kBAAkB,EAClB,YAAY,~~GAAG~~,~~KAAK~~,~~GACrB~~,GAAG,OAAO;AAEX,IAAA,OAAO,UAAU,CAAC,gBAAgB,EAAE,MAAM,EAAE,MAAK;QAC/C,MAAM,OAAO,GAAG,CAAC;AACjB,QAAA,MAAM,~~WAAW~~,GAAG,WAAW,CAAC,WAAW;~~AAC3C~~,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,~~WAAW~~,IAAI,CAAC,CAAC;~~AACtD~~,QAAA,MAAM,cAAc,GAAG,kBAAkB,GAAG,cAAc,GAAG,CAAC,GAAG,cAAc;AAC/E,QAAA,MAAM,YAAY,GAAG,~~WAAW~~,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,GAAG;~~QACrD~~,MAAM,aAAa,GAAG,wBAAwB,IAAI,QAAQ,CAAC,IAAI,CAAC,WAAW,GAAG,GAAG;;QAGjF,MAAM,SAAS,GAAc,aAAa,GAAG,KAAK,GAAG,YAAY;AAEjE,QAAA,eAAe,CAAC,gBAAgB,EAAE,MAAM,EAAE;AACxC,YAAA,QAAQ,EAAE,OAAO;AACjB,YAAA,UAAU,EAAE;AACV,gBAAA,MAAM,CAAC;AACL,oBAAA,QAAQ,EAAE,cAAc;oBACxB,aAAa,EAAE,CAAC,YAAY;iBAC7B,CAAC;AACF,gBAAA,IAAI,CAAC;oBACH,OAAO;iBACR,CAAC;AACF,gBAAA,KAAK,CAAC;oBACJ,OAAO;iBACR,CAAC;AACF,gBAAA,KAAK,CAAC;AACJ,oBAAA,OAAO,EAAE,~~YAAY~~;~~AACrB~~,oBAAA,OAAO,EAAE,WAAW;iBACrB,CAAC;AACF,gBAAA,IAAI,CAAC;~~AACH~~,oBAAA,OAAO,EAAE,~~YAAY~~,GAAG,~~WAAW~~,GAAG,~~OAAO~~;~~iBAC9C~~,CAAC;~~AACH~~,aAAA;YACD,SAAS;AACV,SAAA,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,cAAc,EAAE,SAAS,EAAE,iBAAiB,EAAE,QAAQ,EAAE,KAAI;AAC3E,YAAA,IAAI,cAAc,CAAC,IAAI,EAAE;;AAEvB,gBAAA,MAAM,SAAS,GAAG,CAAC,aAAa,IAAI,CAAC,YAAY,IAAI,cAAc,CAAC,IAAI,CAAC,eAAe;AAExF,gBAAA,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE;;oBAE1B,UAAU,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS;oBAC5C,OAAO,EAAE,SAAS,GAAG,CAAC,GAAG,CAAC;AAC3B,iBAAA,CAAC;;AAGJ,YAAA,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE;gBAC1B,IAAI,EAAE,CAAG,EAAA,CAAC,CAAI,EAAA,CAAA;gBACd,GAAG,EAAE,CAAG,EAAA,CAAC,CAAI,EAAA,CAAA;gBACb,QAAQ;AACT,aAAA,CAAC;YAEF,MAAM,IAAI,GAAG,iBAAiB,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;YAE5C,MAAM,UAAU,GAAG;AACjB,kBAAE;AACE,oBAAA,GAAG,EAAE,QAAQ;AACb,oBAAA,KAAK,EAAE,MAAM;AACb,oBAAA,MAAM,EAAE,KAAK;AACb,oBAAA,IAAI,EAAE,OAAO;AACd,iBAAA,CAAC,IAAI;kBACN,KAAK;AAET,YAAA,IAAI,KAAK;YACT,QAAQ,UAAU;gBAChB;AACA,gBAAA,KAAK,KAAK;oBACR,KAAK,GAAG,EAAE;oBACV;AACF,gBAAA,KAAK,OAAO;oBACV,KAAK,GAAG,GAAG;oBACX;AACF,gBAAA,KAAK,QAAQ;oBACX,KAAK,GAAG,GAAG;oBACX;AACF,gBAAA,KAAK,MAAM;oBACT,KAAK,GAAG,GAAG;oBACX;;AAGJ,YAAA,IAAI,cAAc,CAAC,KAAK,IAAI,UAAU,EAAE;AACtC,gBAAA,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,cAAc,CAAC,KAAK;AAErD,gBAAA,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,KAAK,EAAE;AAC/B,oBAAA,KAAK,EAAE,EAAE;AACT,oBAAA,MAAM,EAAE,EAAE;oBACV,IAAI,EAAE,MAAM,GAAG,CAAG,EAAA,MAAM,CAAI,EAAA,CAAA,GAAG,EAAE;oBACjC,GAAG,EAAE,MAAM,GAAG,CAAG,EAAA,MAAM,CAAI,EAAA,CAAA,GAAG,EAAE;oBAChC,CAAC,UAAU,GAAG,CAAA,EAAG,CAAC,~~WAAW~~,GAAG,CAAC,CAAI,EAAA,CAAA;~~oBACrC~~,SAAS,EAAE,CAAU,OAAA,EAAA,KAAK,CAAM,IAAA,CAAA;AACjC,iBAAA,CAAC;;AAEN,SAAC,CAAC;AACJ,KAAC,CAAC;AACJ;;~~ACxGa~~,MAAA,OAAO,GAAsC,CACxD,EAAE,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,kBAAkB,EAAE,EAC7D,QAAQ,MAER,CAAA,CAAA,KAAA,EAAA,EACE,OAAO,EAAC,QAAQ,EAChB,EAAE,EAAC,SAAS,EACZ,KAAK,EAAE,IAAI,CAAC,CAAC,aAAa,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,EACzC,GAAG,EAAE,aAAa,EAClB,eAAe,EAAE,CAAC,CAAC,KAAI;QACrB,CAAC,CAAC,eAAe,EAAE;QAEnB,IAAI,CAAC,CAAC,YAAY,KAAK,SAAS,IAAI,CAAC,OAAO,EAAE;AAC5C,YAAA,aAAa,~~EAAE~~;;~~AAEnB~~,KAAC,EAAA,EAED,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,eAAe,EAAC,GAAG,EAAE,kBAAkB,EAAS,CAAA,EAC5D,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EAAE,QAAQ,CAAO,CACvC;;;;","names":[],"sources":["src/functional-components/tooltip/position-tooltip.function.ts","src/functional-components/tooltip/tooltip.functional-component.tsx"],"sourcesContent":["import { Placement, arrow, autoUpdate, computePosition, flip, hide, offset, shift } from \"@floating-ui/dom\";\r\n\r\nimport { TooltipOptions } from \"./tooltip.interfaces\";\r\n\r\n/*\r\n Positions the Tooltip relative to its reference element.\r\n * The position is recalculated automatically on scroll, resize, or\r\n * element changes via `autoUpdate`, but is otherwise based only on the\r\n * provided arguments 'placementTip', 'topPositionSmallViewPort' and 'halfMainAxisOffset'.\r\n /\r\nexport function positionTooltip(options: TooltipOptions) {\r\n const {\r\n referenceElement,\r\n tipRef,\r\n tipArrowRef,\r\n placementTip,\r\n topPositionSmallViewPort,\r\n halfMainAxisOffset,\r\n forceVisible ~~= false~~,\r\n } = options;\r\n\r\n return autoUpdate(referenceElement, tipRef, () => {\r\n const padding = 5;\r\n const ~~arrowLength~~ = tipArrowRef.offsetWidth;\r\n const axisOffsetCalc = Math.sqrt(2 ~~arrowLength~~ ** 2);\r\n const mainAxisOffset = halfMainAxisOffset ? axisOffsetCalc / 2 : axisOffsetCalc;\r\n const arrowPadding = ~~arrowLength~~ * Math.sqrt(2) * 1.5;\r\n const smallViewport = topPositionSmallViewPort && document.body.clientWidth < 992;\r\n\r\n // Set placement to top if viewport is small and topPositionSmallViewPort is set to true\r\n const placement: Placement = smallViewport ? \"top\" : placementTip;\r\n\r\n computePosition(referenceElement, tipRef, {\r\n strategy: \"fixed\",\r\n middleware: [\r\n offset({\r\n mainAxis: mainAxisOffset,\r\n alignmentAxis: -arrowPadding,\r\n }),\r\n flip({\r\n padding,\r\n }),\r\n shift({\r\n padding,\r\n }),\r\n arrow({\r\n padding: ~~arrowPadding~~,\r\n element: tipArrowRef,\r\n }),\r\n hide({\r\n padding: ~~arrowPadding~~ + ~~arrowLength~~ + padding,\r\n }),\r\n ],\r\n placement,\r\n }).then(({ x, y, middlewareData, placement: computedPlacement, strategy }) => {\r\n if (middlewareData.hide) {\r\n // Tooltip needs to be visible at all times on small viewports or when forceVisible is true\r\n const disappear = !smallViewport && !forceVisible && middlewareData.hide.referenceHidden;\r\n\r\n Object.assign(tipRef.style, {\r\n // Both of these properties have a CSS transition\r\n visibility: disappear ? \"hidden\" : \"visible\",\r\n opacity: disappear ? 0 : 1,\r\n });\r\n }\r\n\r\n Object.assign(tipRef.style, {\r\n left: `${x}px`,\r\n top: `${y}px`,\r\n strategy,\r\n });\r\n\r\n const side = computedPlacement.split(\"-\")[0];\r\n\r\n const staticSide = side\r\n ? {\r\n top: \"bottom\",\r\n right: \"left\",\r\n bottom: \"top\",\r\n left: \"right\",\r\n }[side]\r\n : \"top\";\r\n\r\n let angle;\r\n switch (staticSide) {\r\n default:\r\n case \"top\":\r\n angle = 45;\r\n break;\r\n case \"right\":\r\n angle = 135;\r\n break;\r\n case \"bottom\":\r\n angle = 225;\r\n break;\r\n case \"left\":\r\n angle = 315;\r\n break;\r\n }\r\n\r\n if (middlewareData.arrow && staticSide) {\r\n const { x: arrowX, y: arrowY } = middlewareData.arrow;\r\n\r\n Object.assign(tipArrowRef.style, {\r\n right: \"\",\r\n bottom: \"\",\r\n left: arrowX ? `${arrowX}px` : \"\",\r\n top: arrowY ? `${arrowY}px` : \"\",\r\n [staticSide]: `${-~~arrowLength~~ / 2}px`,\r\n transform: `rotate(${angle}deg)`,\r\n });\r\n }\r\n });\r\n });\r\n}\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\nimport { clsx } from \"clsx\";\r\n\r\ninterface TooltipProps {\r\n visible: boolean;\r\n onAfterHidden: () => void;\r\n tipElementRef: (ref: HTMLDivElement \| undefined) => void;\r\n tipArrowElementRef: (ref: HTMLSpanElement \| undefined) => void;\r\n}\r\n\r\nexport const Tooltip: FunctionalComponent<TooltipProps> = (\r\n { visible, onAfterHidden, tipElementRef, tipArrowElementRef },\r\n children,\r\n) => (\r\n <div\r\n popover=\"manual\"\r\n id=\"tooltip\"\r\n class={clsx([\"dso-tooltip\", { visible }])}\r\n ref={tipElementRef}\r\n onTransitionEnd={(e) => {\r\n e.stopPropagation();\r\n\r\n if (e.propertyName === \"opacity\" && !visible) {\r\n onAfterHidden();\r\n }\r\n }}\r\n >\r\n <span class=\"tooltip-arrow\" ref={tipArrowElementRef}></span>\r\n <div class=\"tooltip-inner\">{children}</div>\r\n </div>\r\n);\r\n"],"version":3}
1	+ {"file":"tooltip.functional-component.js","mappings":";;;;AAIA;;;;;AAKG;AACG,SAAU,eAAe,CAAC,OAAuB,EAAA;AACrD,IAAA,MAAM,EACJ,gBAAgB,EAChB,MAAM,EACN,WAAW,EACX,YAAY,EACZ,wBAAwB,EACxB,kBAAkB,EAClB,YAAY,EACZ,sBAAsB,GACvB,GAAG,OAAO;AAEX,IAAA,OAAO,UAAU,CAAC,gBAAgB,EAAE,MAAM,EAAE,MAAK;QAC/C,MAAM,OAAO,GAAG,CAAC;AACjB,QAAA,MAAM,gBAAgB,GAAG,WAAW,CAAC,WAAW;AAChD,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,gBAAgB,IAAI,CAAC,CAAC;AAC3D,QAAA,MAAM,cAAc,GAAG,kBAAkB,GAAG,cAAc,GAAG,CAAC,GAAG,cAAc;AAC/E,QAAA,MAAM,YAAY,GAAG,gBAAgB,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,GAAG;QAC1D,MAAM,aAAa,GAAG,wBAAwB,IAAI,QAAQ,CAAC,IAAI,CAAC,WAAW,GAAG,GAAG;;QAGjF,MAAM,SAAS,GAAc,aAAa,GAAG,KAAK,GAAG,YAAY;AAEjE,QAAA,eAAe,CAAC,gBAAgB,EAAE,MAAM,EAAE;AACxC,YAAA,QAAQ,EAAE,OAAO;AACjB,YAAA,UAAU,EAAE;AACV,gBAAA,MAAM,CAAC;AACL,oBAAA,QAAQ,EAAE,cAAc;oBACxB,aAAa,EAAE,CAAC,YAAY;iBAC7B,CAAC;AACF,gBAAA,IAAI,CAAC;oBACH,OAAO;iBACR,CAAC;AACF,gBAAA,KAAK,CAAC;oBACJ,OAAO;iBACR,CAAC;AACF,gBAAA,KAAK,CAAC;AACJ,oBAAA,OAAO,EAAE,gBAAgB;AACzB,oBAAA,OAAO,EAAE,WAAW;iBACrB,CAAC;AACF,gBAAA,IAAI,CAAC;oBACH,OAAO,EAAE,gBAAgB,GAAG,OAAO;iBACpC,CAAC;gBACF,sBAAsB;AACpB,oBAAA,IAAI,CAAC;AACH,wBAAA,KAAK,CAAC,EAAE,eAAe,EAAE,cAAc,EAAE,EAAA;AACvC,4BAAA,MAAM,CAAC,MAAM,CAAC,sBAAsB,CAAC,KAAK,EAAE;AAC1C,gCAAA,SAAS,EAAE,CAAA,EAAG,eAAe,GAAG,OAAO,CAAI,EAAA,CAAA;AAC3C,gCAAA,QAAQ,EAAE,CAAG,EAAA,cAAc,GAAG,OAAO,GAAG,CAAC,CAAI,EAAA,CAAA;AAC9C,6BAAA,CAAC;yBACH;qBACF,CAAC;AACL,aAAA;YACD,SAAS;AACV,SAAA,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,cAAc,EAAE,SAAS,EAAE,iBAAiB,EAAE,QAAQ,EAAE,KAAI;AAC3E,YAAA,IAAI,cAAc,CAAC,IAAI,EAAE;;AAEvB,gBAAA,MAAM,SAAS,GAAG,CAAC,aAAa,IAAI,CAAC,YAAY,IAAI,cAAc,CAAC,IAAI,CAAC,eAAe;AAExF,gBAAA,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE;;oBAE1B,UAAU,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS;oBAC5C,OAAO,EAAE,SAAS,GAAG,CAAC,GAAG,CAAC;AAC3B,iBAAA,CAAC;;AAGJ,YAAA,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE;gBAC1B,IAAI,EAAE,CAAG,EAAA,CAAC,CAAI,EAAA,CAAA;gBACd,GAAG,EAAE,CAAG,EAAA,CAAC,CAAI,EAAA,CAAA;gBACb,QAAQ;AACT,aAAA,CAAC;YAEF,MAAM,IAAI,GAAG,iBAAiB,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;YAE5C,MAAM,UAAU,GAAG;AACjB,kBAAE;AACE,oBAAA,GAAG,EAAE,QAAQ;AACb,oBAAA,KAAK,EAAE,MAAM;AACb,oBAAA,MAAM,EAAE,KAAK;AACb,oBAAA,IAAI,EAAE,OAAO;AACd,iBAAA,CAAC,IAAI;kBACN,KAAK;AAET,YAAA,IAAI,KAAK;YACT,QAAQ,UAAU;gBAChB;AACA,gBAAA,KAAK,KAAK;oBACR,KAAK,GAAG,EAAE;oBACV;AACF,gBAAA,KAAK,OAAO;oBACV,KAAK,GAAG,GAAG;oBACX;AACF,gBAAA,KAAK,QAAQ;oBACX,KAAK,GAAG,GAAG;oBACX;AACF,gBAAA,KAAK,MAAM;oBACT,KAAK,GAAG,GAAG;oBACX;;AAGJ,YAAA,IAAI,cAAc,CAAC,KAAK,IAAI,UAAU,EAAE;AACtC,gBAAA,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,cAAc,CAAC,KAAK;AAErD,gBAAA,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,KAAK,EAAE;AAC/B,oBAAA,KAAK,EAAE,EAAE;AACT,oBAAA,MAAM,EAAE,EAAE;oBACV,IAAI,EAAE,MAAM,GAAG,CAAG,EAAA,MAAM,CAAI,EAAA,CAAA,GAAG,EAAE;oBACjC,GAAG,EAAE,MAAM,GAAG,CAAG,EAAA,MAAM,CAAI,EAAA,CAAA,GAAG,EAAE;oBAChC,CAAC,UAAU,GAAG,CAAA,EAAG,CAAC,gBAAgB,GAAG,CAAC,CAAI,EAAA,CAAA;oBAC1C,SAAS,EAAE,CAAU,OAAA,EAAA,KAAK,CAAM,IAAA,CAAA;AACjC,iBAAA,CAAC;;AAEN,SAAC,CAAC;AACJ,KAAC,CAAC;AACJ;;AClHa,MAAA,OAAO,GAAsC,CACxD,EAAE,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,kBAAkB,EAAE,EAC7D,QAAQ,MAER,CAAA,CAAA,KAAA,EAAA,EACE,OAAO,EAAC,QAAQ,EAChB,EAAE,EAAC,SAAS,EACZ,KAAK,EAAE,IAAI,CAAC,CAAC,aAAa,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,EACzC,GAAG,EAAE,aAAa,EAClB,eAAe,EAAE,CAAC,CAAC,KAAI;QACrB,CAAC,CAAC,eAAe,EAAE;QAEnB,IAAI,CAAC,CAAC,YAAY,KAAK,SAAS,IAAI,CAAC,OAAO,EAAE;AAC5C,YAAA,aAAa,KAAb,IAAA,IAAA,aAAa,KAAb,MAAA,GAAA,MAAA,GAAA,aAAa,EAAI;;AAErB,KAAC,EAAA,EAED,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,eAAe,EAAC,GAAG,EAAE,kBAAkB,EAAS,CAAA,EAC5D,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EAAE,QAAQ,CAAO,CACvC;;;;","names":[],"sources":["src/functional-components/tooltip/position-tooltip.function.ts","src/functional-components/tooltip/tooltip.functional-component.tsx"],"sourcesContent":["import { Placement, arrow, autoUpdate, computePosition, flip, hide, offset, shift, size } from \"@floating-ui/dom\";\r\n\r\nimport { TooltipOptions } from \"./tooltip.interfaces\";\r\n\r\n/*\r\n Positions the Tooltip relative to its reference element.\r\n * The position is recalculated automatically on scroll, resize, or\r\n * element changes via `autoUpdate`, but is otherwise based only on the\r\n * provided arguments 'placementTip', 'topPositionSmallViewPort' and 'halfMainAxisOffset'.\r\n /\r\nexport function positionTooltip(options: TooltipOptions) {\r\n const {\r\n referenceElement,\r\n tipRef,\r\n tipArrowRef,\r\n placementTip,\r\n topPositionSmallViewPort,\r\n halfMainAxisOffset,\r\n forceVisible,\r\n restrictContentElement,\r\n } = options;\r\n\r\n return autoUpdate(referenceElement, tipRef, () => {\r\n const padding = 5;\r\n const arrowOffsetWidth = tipArrowRef.offsetWidth;\r\n const axisOffsetCalc = Math.sqrt(2 arrowOffsetWidth ** 2);\r\n const mainAxisOffset = halfMainAxisOffset ? axisOffsetCalc / 2 : axisOffsetCalc;\r\n const arrowPadding = arrowOffsetWidth * Math.sqrt(2) * 1.5;\r\n const smallViewport = topPositionSmallViewPort && document.body.clientWidth < 992;\r\n\r\n // Set placement to top if viewport is small and topPositionSmallViewPort is set to true\r\n const placement: Placement = smallViewport ? \"top\" : placementTip;\r\n\r\n computePosition(referenceElement, tipRef, {\r\n strategy: \"fixed\",\r\n middleware: [\r\n offset({\r\n mainAxis: mainAxisOffset,\r\n alignmentAxis: -arrowPadding,\r\n }),\r\n flip({\r\n padding,\r\n }),\r\n shift({\r\n padding,\r\n }),\r\n arrow({\r\n padding: arrowOffsetWidth,\r\n element: tipArrowRef,\r\n }),\r\n hide({\r\n padding: arrowOffsetWidth + padding,\r\n }),\r\n restrictContentElement &&\r\n size({\r\n apply({ availableHeight, availableWidth }) {\r\n Object.assign(restrictContentElement.style, {\r\n maxHeight: `${availableHeight - padding}px`,\r\n maxWidth: `${availableWidth - padding * 2}px`,\r\n });\r\n },\r\n }),\r\n ],\r\n placement,\r\n }).then(({ x, y, middlewareData, placement: computedPlacement, strategy }) => {\r\n if (middlewareData.hide) {\r\n // Tooltip needs to be visible at all times on small viewports or when forceVisible is true\r\n const disappear = !smallViewport && !forceVisible && middlewareData.hide.referenceHidden;\r\n\r\n Object.assign(tipRef.style, {\r\n // Both of these properties have a CSS transition\r\n visibility: disappear ? \"hidden\" : \"visible\",\r\n opacity: disappear ? 0 : 1,\r\n });\r\n }\r\n\r\n Object.assign(tipRef.style, {\r\n left: `${x}px`,\r\n top: `${y}px`,\r\n strategy,\r\n });\r\n\r\n const side = computedPlacement.split(\"-\")[0];\r\n\r\n const staticSide = side\r\n ? {\r\n top: \"bottom\",\r\n right: \"left\",\r\n bottom: \"top\",\r\n left: \"right\",\r\n }[side]\r\n : \"top\";\r\n\r\n let angle;\r\n switch (staticSide) {\r\n default:\r\n case \"top\":\r\n angle = 45;\r\n break;\r\n case \"right\":\r\n angle = 135;\r\n break;\r\n case \"bottom\":\r\n angle = 225;\r\n break;\r\n case \"left\":\r\n angle = 315;\r\n break;\r\n }\r\n\r\n if (middlewareData.arrow && staticSide) {\r\n const { x: arrowX, y: arrowY } = middlewareData.arrow;\r\n\r\n Object.assign(tipArrowRef.style, {\r\n right: \"\",\r\n bottom: \"\",\r\n left: arrowX ? `${arrowX}px` : \"\",\r\n top: arrowY ? `${arrowY}px` : \"\",\r\n [staticSide]: `${-arrowOffsetWidth / 2}px`,\r\n transform: `rotate(${angle}deg)`,\r\n });\r\n }\r\n });\r\n });\r\n}\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\nimport { clsx } from \"clsx\";\r\n\r\ninterface TooltipProps {\r\n visible: boolean;\r\n onAfterHidden?: () => void;\r\n tipElementRef: (ref: HTMLDivElement \| undefined) => void;\r\n tipArrowElementRef: (ref: HTMLSpanElement \| undefined) => void;\r\n}\r\n\r\nexport const Tooltip: FunctionalComponent<TooltipProps> = (\r\n { visible, onAfterHidden, tipElementRef, tipArrowElementRef },\r\n children,\r\n) => (\r\n <div\r\n popover=\"manual\"\r\n id=\"tooltip\"\r\n class={clsx([\"dso-tooltip\", { visible }])}\r\n ref={tipElementRef}\r\n onTransitionEnd={(e) => {\r\n e.stopPropagation();\r\n\r\n if (e.propertyName === \"opacity\" && !visible) {\r\n onAfterHidden?.();\r\n }\r\n }}\r\n >\r\n <span class=\"tooltip-arrow\" ref={tipArrowElementRef}></span>\r\n <div class=\"tooltip-inner\">{children}</div>\r\n </div>\r\n);\r\n"],"version":3}

package/dist/components/tooltip.js CHANGED Viewed

@@ -2025,7 +2025,7 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends HTMLEleme
         }
     }
     render() {
-        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' })))));
+        return (h(Host, { key: '6186fdcbf9e8bae5e3e4ee74c0d8b50e6fcb700b', class: { hidden: this.hidden }, role: "tooltip", onClick: this.listenClick }, h("div", { key: '7021fed0ee65f1ce5ec74383b4cd1b2a5ccab1b3', class: clsx("tooltip", { in: this.active }) }, !this.noArrow && h("div", { key: '87a3097f75676fee2ea94899b94065af958fa49e', "data-popper-arrow": true, class: "tooltip-arrow" }), h("div", { key: '4c4d10446ce05f816ce32fdfd4eb103cb0e58394', "aria-hidden": !this.descriptive || undefined, class: clsx("tooltip-inner", { "dso-small": this.small }) }, h("slot", { key: 'a520b11e7a7d930df5c4466e2f3583c71616a811' })))));
     }
     activatePopper() {
         var _a;

package/dist/dso-toolkit/dso-toolkit.esm.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{p as e,B as o,c as t,w as a,N as i,H as n,b as l}from"./p-Dx5skKSq.js";export{s as setNonce}from"./p-Dx5skKSq.js";import{g as d}from"./p-DQuL1Twl.js";var c=()=>{if(o.isDev&&!o.isTesting){t("Running in development mode.")}if(o.cloneNodeFix){r(n.prototype)}const l=o.scriptDataOpts?a.document&&Array.from(a.document.querySelectorAll("script")).find((e=>new RegExp(`/${i}(\\.esm)?\\.js($|\\?|#)`).test(e.src)||e.getAttribute("data-stencil-namespace")===i)):null;const s=import.meta.url;const d=o.scriptDataOpts?(l||{})["data-opts"]||{}:{};if(s!==""){d.resourcesUrl=new URL(".",s).href}return e(d)};var r=e=>{const o=e.cloneNode;e.cloneNode=function(e){if(this.nodeName==="TEMPLATE"){return o.call(this,e)}const t=o.call(this,false);const a=this.childNodes;if(e){for(let e=0;e<a.length;e++){if(a[e].nodeType!==2){t.appendChild(a[e].cloneNode(true))}}}return t}};c().then((async e=>{await d();return l(JSON.parse('[["p-34067df5",[[258,"dsot-document-component-demo",{"showCanvas":[516,"show-canvas"],"showBesluitversie":[4,"show-besluitversie"],"jsonFile":[1,"json-file"],"openDefault":[4,"open-default"],"mode":[513],"ozonContentUrlResolver":[16],"ozonContentBegripResolver":[16],"response":[32],"document":[32],"openOrClosed":[32],"openedAnnotation":[32],"filtered":[32],"notApplicable":[32],"activeAnnotationSelectables":[32]},null,{"jsonFile":["jsonFileWatcher"],"openDefault":["openDefaultWatcher"]}]]],["p-44cf59a0",[[257,"dso-accordion-section",{"handleTitle":[1,"handle-title"],"wijzigactie":[1],"heading":[1],"handleUrl":[1,"handle-url"],"status":[1],"attachmentCount":[2,"attachment-count"],"icon":[1],"statusDescription":[1,"status-description"],"open":[516],"hasNestedAccordion":[516,"has-nested-accordion"],"label":[1],"labelStatus":[1,"label-status"],"activatable":[516],"active":[516],"hover":[32],"focusHandle":[64]}]]],["p-98388a2c",[[257,"dso-annotation-activiteit",{"wijzigactie":[513],"active":[516],"gewijzigdeLocatie":[516,"gewijzigde-locatie"],"naam":[1],"regelKwalificatie":[1,"regel-kwalificatie"],"locatieNoemers":[16],"regelKwalificatieVoorzetsel":[1,"regel-kwalificatie-voorzetsel"]}]]],["p-0f43d69b",[[257,"dso-annotation-gebiedsaanwijzing",{"wijzigactie":[513],"active":[516],"gewijzigdeLocatie":[516,"gewijzigde-locatie"],"naam":[1]}]]],["p-aa870cd3",[[257,"dso-annotation-omgevingsnormwaarde",{"wijzigactie":[513],"active":[516],"gewijzigdeLocatie":[516,"gewijzigde-locatie"],"naam":[1],"toelichting":[1],"waardes":[16],"eenheid":[1]}]]],["p-c663dca1",[[257,"dso-legend-item",{"disabled":[516],"disabledMessage":[1,"disabled-message"],"activatable":[516],"active":[516],"showOptions":[32]}]]],["p-d067d245",[[257,"dso-advanced-select",{"options":[16],"active":[16],"activeHint":[1,"active-hint"],"open":[32]},[[8,"keydown","keyDownListener"]]]]],["p-e428ceb2",[[257,"dso-list-button",{"label":[1],"sublabel":[1],"count":[2],"min":[8],"max":[8],"checked":[516],"disabled":[516],"subcontentPrefix":[1,"subcontent-prefix"]}]]],["p-2bb43f8c",[[257,"dso-map-base-layers",{"group":[1],"baseLayers":[16]}]]],["p-14977305",[[257,"dso-map-overlays",{"group":[1],"overlays":[16]}]]],["p-5d355433",[[257,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32],"toggleVisibility":[64]},null,{"open":["watchOpen"]}]]],["p-8e1375aa",[[257,"dso-project-item",{"label":[1]}]]],["p-9246d33d",[[257,"dso-annotation-kaart",{"wijzigactie":[513],"naam":[1],"href":[513]}]]],["p-8c8120b8",[[262,"dso-autosuggest",{"suggestions":[16],"loading":[4],"loadingLabel":[1,"loading-label"],"loadingDelayed":[2,"loading-delayed"],"notFoundLabel":[1,"not-found-label"],"mark":[16],"showSuggestions":[32],"selectedSuggestion":[32],"selectedSuggestionGroup":[32],"notFound":[32],"showLoading":[32]},[[4,"click","onDocumentClick"]],{"suggestions":["suggestionsWatcher"]}]]],["p-256c7374",[[257,"dso-legend",{"tabItems":[16]}]]],["p-9b8ae629",[[257,"dso-modal",{"fullscreen":[516],"modalTitle":[1,"modal-title"],"dialogRole":[1,"dialog-role"],"returnFocus":[4,"return-focus"],"closable":[4],"ariaId":[32]}]]],["p-f0a193d9",[[257,"dso-survey-rating"]]],["p-4173cee0",[[257,"dso-header",{"mainMenu":[16],"compact":[1],"authStatus":[1,"auth-status"],"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"showHelp":[4,"show-help"],"helpUrl":[1,"help-url"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"userHomeActive":[4,"user-home-active"],"visibleMenuItemsCount":[32],"dropdownOptionsOffset":[32]},null,{"mainMenu":["mainMenuChanged"]}]]],["p-dfb7761c",[[257,"dso-mark-bar",{"value":[1],"label":[1],"current":[2],"totalCount":[2,"total-count"],"dsoFocus":[64]}]]],["p-b6810347",[[257,"dso-onboarding-tip",{"placement":[1],"ready":[32],"popoverOpen":[32]}]]],["p-3a7e5965",[[257,"dso-pagination",{"totalPages":[2,"total-pages"],"currentPage":[2,"current-page"],"formatHref":[16],"availablePositions":[32]},[[0,"dsoSizeChange","sizeChangeHandler"]]]]],["p-8ecc3fdc",[[257,"dso-tree-view",{"collection":[16],"focusItem":[64]}]]],["p-88e44092",[[257,"dso-action-list-item",{"step":[2],"itemTitle":[1,"item-title"],"flowLine":[4,"flow-line"],"warning":[4],"divider":[4]}]]],["p-6327e736",[[257,"dso-card",{"href":[513],"mode":[513],"active":[516]}]]],["p-377907dc",[[257,"dso-document-card",{"href":[513],"active":[516]}]]],["p-d85a9815",[[257,"dso-history-item",{"type":[513],"href":[513]}]]],["p-dee9a99c",[[257,"dso-renvooi",{"value":[1],"mark":[16]}],[257,"dso-label",{"compact":[516],"removable":[516],"status":[513],"truncate":[516],"removeHover":[32],"removeFocus":[32],"textHover":[32],"textFocus":[32],"isTruncated":[32],"labelText":[32],"_truncateLabel":[64]},[[4,"keydown","keyDownListener"]],{"removable":["watchRemovable"],"truncate":["watchTruncate"]}],[262,"dso-slide-toggle",{"checked":[4],"disabled":[4],"accessibleLabel":[1,"accessible-label"],"labelledbyId":[1,"labelledby-id"],"identifier":[1],"hasVisibleLabel":[32]}]]],["p-2f50c3b1",[[257,"dso-map-layer",{"label":[513],"activatable":[516],"active":[516]}]]],["p-b3c6443c",[[257,"dso-map-layer-object",{"active":[516]}]]],["p-e558cec2",[[257,"dso-plekinfo-card",{"wijzigactie":[513],"href":[513],"targetBlank":[4,"target-blank"],"active":[516]}]]],["p-459162c4",[[257,"dso-skiplink",{"to":[513],"label":[513]}]]],["p-cf4a7ebc",[[257,"dso-tijdreis-banner"]]],["p-88bc0eb2",[[257,"dso-accordion",{"variant":[6145],"reverseAlign":[6148,"reverse-align"],"_getState":[64]}]]],["p-9dcafbea",[[257,"dso-action-list",{"listTitle":[1,"list-title"]}]]],["p-b90301b9",[[257,"dso-banner",{"status":[513],"compact":[4],"icon":[516]}]]],["p-ee1fabc8",[[257,"dso-card-container",{"mode":[513]}]]],["p-ec0175ad",[[257,"dso-contact-information"]]],["p-2b7b0379",[[257,"dso-cursor-tooltip"]]],["p-eda3240b",[[258,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"required":[516],"invalid":[516],"describedBy":[1,"described-by"],"dsoAutofocus":[4,"dso-autofocus"],"value":[513],"min":[1],"max":[1]}]]],["p-2c421433",[[257,"dso-highlight-box",{"yellow":[516],"border":[516],"white":[516],"green":[516],"dropShadow":[516,"drop-shadow"],"step":[514]}]]],["p-37fbf639",[[257,"dso-input-range",{"min":[2],"max":[2],"value":[2],"step":[2],"label":[1],"unit":[1],"description":[1]}]]],["p-df643547",[[257,"dso-logo",{"name":[513],"logoUrl":[513,"logo-url"],"label":[513],"labelUrl":[513,"label-url"],"ribbon":[513]}]]],["p-efc6ec01",[[257,"dso-tab",{"active":[516],"disabled":[516],"href":[1],"_dsoFocus":[64]}]]],["p-cc1f3843",[[257,"dso-tabs"]]],["p-efd35288",[[257,"dso-viewer-grid",{"filterPanelTitle":[513,"filter-panel-title"],"filterPanelOpen":[516,"filter-panel-open"],"overlayOpen":[516,"overlay-open"],"documentPanelOpen":[516,"document-panel-open"],"mainSize":[513,"main-size"],"activeTab":[1,"active-tab"],"documentPanelSize":[513,"document-panel-size"],"mainPanelExpanded":[4,"main-panel-expanded"],"mainPanelHidden":[4,"main-panel-hidden"],"tabView":[32],"_checkMainPanelVisibility":[64]},null,{"documentPanelOpen":["documentPanelOpenWatcher"],"filterPanelOpen":["filterPanelOpenWatcher"],"overlayOpen":["overlayOpenWatcher"]}]]],["p-297e3c05",[[257,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["p-788d29c5",[[257,"dso-button-group",{"direction":[513]}]]],["p-5a913c4f",[[257,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"dropdownOptionsOffset":[2,"dropdown-options-offset"],"checkable":[4]},[[8,"click","onClick"]]]]],["p-3287a371",[[257,"dso-tooltip",{"descriptive":[516],"position":[1],"strategy":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]},null,{"position":["watchPosition"],"strategy":["watchStrategy"],"active":["watchActive"]}]]],["p-e3e272a2",[[257,"dso-icon-button",{"icon":[513],"label":[513],"variant":[513],"tooltipPlacement":[513,"tooltip-placement"],"disabled":[516],"showTooltip":[32],"setFocus":[64]}],[257,"dso-icon",{"icon":[1]}]]],["p-504ea700",[[257,"dso-ozon-content",{"content":[1],"inline":[516],"mark":[16],"urlResolver":[16],"begripResolver":[16],"annotated":[516],"state":[32]},null,{"content":["contentWatcher"]}],[257,"dso-alert",{"status":[513],"roleAlert":[4,"role-alert"],"compact":[516],"closable":[4]}],[257,"dso-image-overlay",{"wijzigactie":[1],"active":[32],"zoomable":[32]},[[2,"load","loadListener"]]],[257,"dso-panel",{"closeButtonLabel":[1,"close-button-label"],"emphasized":[4]}],[257,"dso-table",{"noModal":[516,"no-modal"],"isResponsive":[32],"modalActive":[32],"placeholderHeight":[32]}],[257,"dso-ozon-content-toggletip",{"icon":[513],"active":[32],"showToggletip":[32]}],[257,"dso-badge",{"status":[1]}]]],["p-0c7f6ca8",[[257,"dso-document-component",{"heading":[1],"kop":[6145],"inhoud":[6145],"open":[516],"filtered":[516],"notApplicable":[516,"not-applicable"],"badge":[1],"badgeStatus":[1,"badge-status"],"badgeTooltip":[1,"badge-tooltip"],"label":[1],"labelStatus":[1,"label-status"],"annotated":[516],"gereserveerd":[6145],"vervallen":[6145],"openAnnotation":[516,"open-annotation"],"alternativeTitle":[513,"alternative-title"],"type":[513],"wijzigactie":[513],"annotationsWijzigactie":[513,"annotations-wijzigactie"],"mark":[16],"recursiveToggle":[8,"recursive-toggle"],"ozonContentUrlResolver":[16],"ozonContentBegripResolver":[16],"mode":[513],"href":[513]}],[257,"dso-annotation-locatie",{"wijzigactie":[513],"active":[516],"gewijzigdeLocatie":[516,"gewijzigde-locatie"],"locatieNoemer":[1,"locatie-noemer"]}]]],["p-8fccf830",[[257,"dso-attachments-counter",{"count":[2]}],[257,"dso-expandable",{"open":[516],"enableAnimation":[516,"enable-animation"],"minimumHeight":[2,"minimum-height"],"isClosed":[32]},[[0,"transitionstart","transitionstartHandler"],[0,"transitionend","transitionendHandler"]],{"open":["toggleOpen"]}]]],["p-25cdd9a9",[[257,"dso-progress-indicator",{"label":[1],"size":[513],"block":[516]}]]],["p-fd8985ec",[[257,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32],"getSize":[64]}]]],["p-c5f75bc1",[[257,"dso-scrollable",{"scrollPosition":[32],"_setScrollState":[64]}]]],["p-5a289b2b",[[257,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1],"hover":[32],"setFocus":[64]}]]],["p-ef77c735",[[262,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"labelledById":[1,"labelled-by-id"],"disabled":[4],"required":[4],"checked":[516],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32],"toggleInfo":[64]},null,{"indeterminate":["setIndeterminate"]}],[257,"dso-info",{"fixed":[516],"active":[516]}]]]]'),e)}));
+import{p as e,B as t,c as o,w as a,N as i,H as n,b as l}from"./p-Dx5skKSq.js";export{s as setNonce}from"./p-Dx5skKSq.js";import{g as d}from"./p-DQuL1Twl.js";var c=()=>{if(t.isDev&&!t.isTesting){o("Running in development mode.")}if(t.cloneNodeFix){r(n.prototype)}const l=t.scriptDataOpts?a.document&&Array.from(a.document.querySelectorAll("script")).find((e=>new RegExp(`/${i}(\\.esm)?\\.js($|\\?|#)`).test(e.src)||e.getAttribute("data-stencil-namespace")===i)):null;const s=import.meta.url;const d=t.scriptDataOpts?(l||{})["data-opts"]||{}:{};if(s!==""){d.resourcesUrl=new URL(".",s).href}return e(d)};var r=e=>{const t=e.cloneNode;e.cloneNode=function(e){if(this.nodeName==="TEMPLATE"){return t.call(this,e)}const o=t.call(this,false);const a=this.childNodes;if(e){for(let e=0;e<a.length;e++){if(a[e].nodeType!==2){o.appendChild(a[e].cloneNode(true))}}}return o}};c().then((async e=>{await d();return l(JSON.parse('[["p-7285f1f0",[[258,"dsot-document-component-demo",{"showCanvas":[516,"show-canvas"],"showBesluitversie":[4,"show-besluitversie"],"jsonFile":[1,"json-file"],"openDefault":[4,"open-default"],"mode":[513],"ozonContentUrlResolver":[16],"ozonContentBegripResolver":[16],"response":[32],"document":[32],"openOrClosed":[32],"openedAnnotation":[32],"filtered":[32],"notApplicable":[32],"activeAnnotationSelectables":[32]},null,{"jsonFile":["jsonFileWatcher"],"openDefault":["openDefaultWatcher"]}]]],["p-8e33fc54",[[257,"dso-accordion-section",{"handleTitle":[1,"handle-title"],"wijzigactie":[1],"heading":[1],"handleUrl":[1,"handle-url"],"status":[1],"attachmentCount":[2,"attachment-count"],"icon":[1],"statusDescription":[1,"status-description"],"open":[516],"hasNestedAccordion":[516,"has-nested-accordion"],"label":[1],"labelStatus":[1,"label-status"],"activatable":[516],"active":[516],"hover":[32],"focusHandle":[64]}]]],["p-8ba1805d",[[257,"dso-legend-item",{"disabled":[516],"disabledMessage":[1,"disabled-message"],"activatable":[516],"active":[516],"showOptions":[32]}]]],["p-659b373c",[[257,"dso-annotation-activiteit",{"wijzigactie":[513],"active":[516],"gewijzigdeLocatie":[516,"gewijzigde-locatie"],"naam":[1],"regelKwalificatie":[1,"regel-kwalificatie"],"locatieNoemers":[16],"regelKwalificatieVoorzetsel":[1,"regel-kwalificatie-voorzetsel"]}]]],["p-c8946358",[[257,"dso-annotation-gebiedsaanwijzing",{"wijzigactie":[513],"active":[516],"gewijzigdeLocatie":[516,"gewijzigde-locatie"],"naam":[1]}]]],["p-ca501487",[[257,"dso-annotation-omgevingsnormwaarde",{"wijzigactie":[513],"active":[516],"gewijzigdeLocatie":[516,"gewijzigde-locatie"],"naam":[1],"toelichting":[1],"waardes":[16],"eenheid":[1]}]]],["p-0ed7cc17",[[257,"dso-list-button",{"label":[1],"sublabel":[1],"count":[2],"min":[8],"max":[8],"checked":[516],"disabled":[516],"subcontentPrefix":[1,"subcontent-prefix"]}]]],["p-5f69ed68",[[257,"dso-map-base-layers",{"group":[1],"baseLayers":[16]}]]],["p-8be7df7f",[[257,"dso-map-overlays",{"group":[1],"overlays":[16]}]]],["p-ed33ea10",[[257,"dso-advanced-select",{"options":[16],"active":[16],"activeHint":[1,"active-hint"],"open":[32]},[[8,"keydown","keyDownListener"]]]]],["p-226f8f96",[[257,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32],"toggleVisibility":[64]},null,{"open":["watchOpen"]}]]],["p-0abaf49f",[[257,"dso-project-item",{"label":[1]}]]],["p-a558b0d3",[[257,"dso-annotation-kaart",{"wijzigactie":[513],"naam":[1],"href":[513]}]]],["p-2a3314e5",[[262,"dso-autosuggest",{"suggestions":[16],"loading":[4],"loadingLabel":[1,"loading-label"],"loadingDelayed":[2,"loading-delayed"],"notFoundLabel":[1,"not-found-label"],"mark":[16],"showSuggestions":[32],"selectedSuggestion":[32],"selectedSuggestionGroup":[32],"notFound":[32],"showLoading":[32]},[[4,"click","onDocumentClick"]],{"suggestions":["suggestionsWatcher"]}]]],["p-8c187590",[[257,"dso-legend",{"tabItems":[16]}]]],["p-c4499b88",[[257,"dso-modal",{"fullscreen":[516],"modalTitle":[1,"modal-title"],"dialogRole":[1,"dialog-role"],"returnFocus":[4,"return-focus"],"closable":[4],"ariaId":[32]}]]],["p-78b1eca4",[[257,"dso-survey-rating"]]],["p-f488bdce",[[257,"dso-header",{"mainMenu":[16],"compact":[1],"authStatus":[1,"auth-status"],"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"showHelp":[4,"show-help"],"helpUrl":[1,"help-url"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"userHomeActive":[4,"user-home-active"],"visibleMenuItemsCount":[32],"dropdownOptionsOffset":[32]},null,{"mainMenu":["mainMenuChanged"]}]]],["p-924ef127",[[257,"dso-mark-bar",{"value":[1],"label":[1],"current":[2],"totalCount":[2,"total-count"],"dsoFocus":[64]}]]],["p-48e44b35",[[257,"dso-onboarding-tip",{"placement":[1],"ready":[32],"popoverOpen":[32]}]]],["p-3a7e5965",[[257,"dso-pagination",{"totalPages":[2,"total-pages"],"currentPage":[2,"current-page"],"formatHref":[16],"availablePositions":[32]},[[0,"dsoSizeChange","sizeChangeHandler"]]]]],["p-4aee1b2e",[[257,"dso-tree-view",{"collection":[16],"focusItem":[64]}]]],["p-fcc4186a",[[257,"dso-action-list-item",{"step":[2],"itemTitle":[1,"item-title"],"flowLine":[4,"flow-line"],"warning":[4],"divider":[4]}]]],["p-25aad37b",[[257,"dso-card",{"href":[513],"mode":[513],"active":[516]}]]],["p-f333aebd",[[257,"dso-document-card",{"href":[513],"active":[516]}]]],["p-6e0ba75b",[[257,"dso-history-item",{"type":[513],"href":[513]}]]],["p-88e7db50",[[257,"dso-renvooi",{"value":[1],"mark":[16]}],[257,"dso-label",{"compact":[516],"removable":[516],"status":[513],"truncate":[516],"removeHover":[32],"removeFocus":[32],"textHover":[32],"textFocus":[32],"isTruncated":[32],"labelText":[32],"_truncateLabel":[64]},[[4,"keydown","keyDownListener"]],{"removable":["watchRemovable"],"truncate":["watchTruncate"]}],[262,"dso-slide-toggle",{"checked":[4],"disabled":[4],"accessibleLabel":[1,"accessible-label"],"labelledbyId":[1,"labelledby-id"],"identifier":[1],"hasVisibleLabel":[32]}]]],["p-97700c36",[[257,"dso-map-layer",{"label":[513],"activatable":[516],"active":[516]}]]],["p-eb280c98",[[257,"dso-map-layer-object",{"active":[516]}]]],["p-53436a6b",[[257,"dso-plekinfo-card",{"wijzigactie":[513],"href":[513],"targetBlank":[4,"target-blank"],"active":[516]}]]],["p-b1a385c9",[[257,"dso-skiplink",{"to":[513],"label":[513]}]]],["p-93dac7e8",[[257,"dso-tijdreis-banner"]]],["p-50ea7ead",[[257,"dso-accordion",{"variant":[6145],"reverseAlign":[6148,"reverse-align"],"_getState":[64]}]]],["p-19c22a92",[[257,"dso-action-list",{"listTitle":[1,"list-title"]}]]],["p-72fd4bfe",[[257,"dso-banner",{"status":[513],"compact":[4],"icon":[516]}]]],["p-80e385b3",[[257,"dso-card-container",{"mode":[513]}]]],["p-6995bf7c",[[257,"dso-contact-information"]]],["p-9ef9c6c8",[[257,"dso-cursor-tooltip"]]],["p-2748519c",[[258,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"required":[516],"invalid":[516],"describedBy":[1,"described-by"],"dsoAutofocus":[4,"dso-autofocus"],"value":[513],"min":[1],"max":[1]}]]],["p-f4c12ec1",[[257,"dso-highlight-box",{"yellow":[516],"border":[516],"white":[516],"green":[516],"dropShadow":[516,"drop-shadow"],"step":[514]}]]],["p-8fb2ba3e",[[257,"dso-input-range",{"min":[2],"max":[2],"value":[2],"step":[2],"label":[1],"unit":[1],"description":[1]}]]],["p-c86138aa",[[257,"dso-logo",{"name":[513],"logoUrl":[513,"logo-url"],"label":[513],"labelUrl":[513,"label-url"],"ribbon":[513]}]]],["p-efc6ec01",[[257,"dso-tab",{"active":[516],"disabled":[516],"href":[1],"_dsoFocus":[64]}]]],["p-6ae428d5",[[257,"dso-tabs"]]],["p-4568c8c1",[[257,"dso-viewer-grid",{"filterPanelTitle":[513,"filter-panel-title"],"filterPanelOpen":[516,"filter-panel-open"],"overlayOpen":[516,"overlay-open"],"documentPanelOpen":[516,"document-panel-open"],"mainSize":[513,"main-size"],"activeTab":[1,"active-tab"],"documentPanelSize":[513,"document-panel-size"],"mainPanelExpanded":[4,"main-panel-expanded"],"mainPanelHidden":[4,"main-panel-hidden"],"tabView":[32],"_checkMainPanelVisibility":[64]},null,{"documentPanelOpen":["documentPanelOpenWatcher"],"filterPanelOpen":["filterPanelOpenWatcher"],"overlayOpen":["overlayOpenWatcher"]}]]],["p-5375627e",[[257,"dso-icon-button",{"icon":[513],"label":[513],"variant":[513],"tooltipPlacement":[513,"tooltip-placement"],"disabled":[516],"showTooltip":[32],"setFocus":[64]}],[257,"dso-icon",{"icon":[1]}]]],["p-3b2e6ecb",[[257,"dso-document-component",{"heading":[1],"kop":[6145],"inhoud":[6145],"open":[516],"filtered":[516],"notApplicable":[516,"not-applicable"],"badge":[1],"badgeStatus":[1,"badge-status"],"badgeTooltip":[1,"badge-tooltip"],"label":[1],"labelStatus":[1,"label-status"],"annotated":[516],"gereserveerd":[6145],"vervallen":[6145],"openAnnotation":[516,"open-annotation"],"alternativeTitle":[513,"alternative-title"],"type":[513],"wijzigactie":[513],"annotationsWijzigactie":[513,"annotations-wijzigactie"],"mark":[16],"recursiveToggle":[8,"recursive-toggle"],"ozonContentUrlResolver":[16],"ozonContentBegripResolver":[16],"mode":[513],"href":[513]}],[257,"dso-annotation-locatie",{"wijzigactie":[513],"active":[516],"gewijzigdeLocatie":[516,"gewijzigde-locatie"],"locatieNoemer":[1,"locatie-noemer"]}]]],["p-f87553d9",[[257,"dso-attachments-counter",{"count":[2]}],[257,"dso-expandable",{"open":[516],"enableAnimation":[516,"enable-animation"],"minimumHeight":[2,"minimum-height"],"isClosed":[32]},[[0,"transitionstart","transitionstartHandler"],[0,"transitionend","transitionendHandler"]],{"open":["toggleOpen"]}]]],["p-1c6192d7",[[257,"dso-progress-indicator",{"label":[1],"size":[513],"block":[516]}]]],["p-526ebea7",[[257,"dso-scrollable",{"scrollPosition":[32],"_setScrollState":[64]}]]],["p-112ba754",[[257,"dso-info-button",{"active":[516],"secondary":[4],"label":[1],"toggletipPlacement":[1,"toggletip-placement"],"hover":[32],"toggletipActive":[32],"setFocus":[64]}]]],["p-8c303909",[[257,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["p-b0d6f317",[[257,"dso-button-group",{"direction":[513]}]]],["p-b78d1e0e",[[257,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"dropdownOptionsOffset":[2,"dropdown-options-offset"],"checkable":[4]},[[8,"click","onClick"]]]]],["p-d10abd51",[[257,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32],"getSize":[64]}]]],["p-2ddcf297",[[262,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"labelledById":[1,"labelled-by-id"],"disabled":[4],"required":[4],"checked":[516],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32],"toggleInfo":[64]},null,{"indeterminate":["setIndeterminate"]}],[257,"dso-info",{"fixed":[516],"active":[516]}]]],["p-3217e47b",[[257,"dso-tooltip",{"descriptive":[516],"position":[1],"strategy":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]},null,{"position":["watchPosition"],"strategy":["watchStrategy"],"active":["watchActive"]}]]],["p-4c01626d",[[257,"dso-ozon-content",{"content":[1],"inline":[516],"mark":[16],"urlResolver":[16],"begripResolver":[16],"annotated":[516],"state":[32]},null,{"content":["contentWatcher"]}],[257,"dso-alert",{"status":[513],"roleAlert":[4,"role-alert"],"compact":[516],"closable":[4]}],[257,"dso-image-overlay",{"wijzigactie":[1],"active":[32],"zoomable":[32]},[[2,"load","loadListener"]]],[257,"dso-panel",{"closeButtonLabel":[1,"close-button-label"],"emphasized":[4]}],[257,"dso-table",{"noModal":[516,"no-modal"],"isResponsive":[32],"modalActive":[32],"placeholderHeight":[32]}],[257,"dso-ozon-content-toggletip",{"icon":[513],"active":[32],"showToggletip":[32]}],[257,"dso-badge",{"status":[1]}]]]]'),e)}));
 //# sourceMappingURL=dso-toolkit.esm.js.map

package/dist/dso-toolkit/{p-8e1375aa.entry.js → p-0abaf49f.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{r as e,h as t,F as a}from"./p-Dx5skKSq.js";const d=()=>`:host{display:block;padding:16px;border:1px solid #ccc;border-radius:4px}*,*::after,*::before{box-sizing:border-box}::slotted(dl[slot=progress]),::slotted(dl[slot=status]){--_dt-dl-margin-block-end:0;--_dt-dl-before-display:none;--_dt-dl-dt-font-weight:normal;--_dt-dl-dd-margin-block-start:0;--_dt-dl-dd-margin-inline-start:units.$u1;--_dt-dl-dd-padding-inline-start:0;--_dt-dl-dt-inline-size:auto;--_dt-dl-dd-last-margin-block-end:0;--_dt-mark-bg-color:none;--_dt-mark-padding-block:0;--_dt-mark-color:inherit;--_dt-mark-font-weight:600;display:flex !important;flex-wrap:wrap;column-gap:16px}::slotted([slot=status]){--_dt-dl-font-size:0.875rem}::slotted([slot=title]){margin-block:0 !important;font-size:1.25rem !important}::slotted([slot=actions]){display:flex}.project-item-header{display:flex;gap:16px;flex-wrap:nowrap;align-items:flex-start;margin-block-end:16px}.project-item-title{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;flex-grow:1}.project-item-actions{display:flex;flex-shrink:0;flex-wrap:nowrap}.project-item-info{display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap;align-items:flex-end}`;const s=class{constructor(t){e(this,t)}render(){return t(a,{key:"5a2c55592ab3870a507dd446e79d7fc2838e9149"},t("div",{key:"b86031f78d01b13fb759a79e39c30da0aa931f0f",class:"project-item-header"},t("div",{key:"f68fd88967309b9189b13c0a3f1736fd394631fc",class:"project-item-title"},t("slot",{key:"25e4b0a4c6cc550589a950829acace708785ff57",name:"title"}),this.label&&t("dso-label",{key:"06bdc374c402d17d5a9e34ecf1ecf57cd8d2cffe",status:"error",compact:true},this.label)),t("div",{key:"63be92e046d5bb4be46085d6387016478115baaa",class:"project-item-actions"},t("slot",{key:"7afac46f6298a71415265b6f7e975185faf38d09",name:"actions"}))),t("div",{key:"7189099642140643709d909944e76721f190ea3d",class:"project-item-info"},t("div",{key:"5923a8e73b320ab673990a1cb97104ad87b9574e",class:"project-item-progress"},t("slot",{key:"bd32ddfc776326324dd6c9835a89d5e0a1fbc8ee",name:"progress"})),t("div",{key:"5a243e2c04bf9175fe4405e384f746bff9893da2",class:"project-item-status"},t("slot",{key:"8244dd9f5321862eb4780f6e1c731455ae328685",name:"status"}))))}};s.style=d();export{s as dso_project_item};
-//# sourceMappingURL=p-8e1375aa.entry.js.map
+import{r as e,h as t,F as a}from"./p-Dx5skKSq.js";const d=()=>`:host{display:block;padding:16px;border:1px solid #ccc;border-radius:4px}*,*::after,*::before{box-sizing:border-box}::slotted(dl[slot=progress]),::slotted(dl[slot=status]){--_dt-dl-margin-block-end:0;--_dt-dl-before-display:none;--_dt-dl-dt-font-weight:normal;--_dt-dl-dd-margin-block-start:0;--_dt-dl-dd-margin-inline-start:units.$u1;--_dt-dl-dd-padding-inline-start:0;--_dt-dl-dt-inline-size:auto;--_dt-dl-dd-last-margin-block-end:0;--_dt-mark-bg-color:none;--_dt-mark-padding-block:0;--_dt-mark-color:inherit;--_dt-mark-font-weight:600;display:flex !important;flex-wrap:wrap;column-gap:16px}::slotted([slot=status]){--_dt-dl-font-size:0.875rem}::slotted([slot=title]){margin-block:0 !important;font-size:1.25rem !important}::slotted([slot=actions]){display:flex}.project-item-header{display:flex;gap:16px;flex-wrap:nowrap;align-items:flex-start;margin-block-end:16px}.project-item-title{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;flex-grow:1}.project-item-actions{display:flex;flex-shrink:0;flex-wrap:nowrap}.project-item-info{display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap;align-items:flex-end}`;const s=class{constructor(t){e(this,t)}render(){return t(a,{key:"12935f64b5c0cac32850e92ec594eac15fda660e"},t("div",{key:"1125f19e534e74c3b50519b66b0117063e16ea9c",class:"project-item-header"},t("div",{key:"262432d19146db36ef8dca100191299a1b991af1",class:"project-item-title"},t("slot",{key:"e84d0c1bc18e5f7c7a88ee21d522d5dfa8b2558a",name:"title"}),this.label&&t("dso-label",{key:"cfe1a7b9d673c7e3513607cf86d745441df63ff7",status:"error",compact:true},this.label)),t("div",{key:"05f7192b693cb027360cd10f081e09c767964f6b",class:"project-item-actions"},t("slot",{key:"3e6aba40efd02de33a71a6288a9aab9845d124af",name:"actions"}))),t("div",{key:"3dc045a2481645f91906c2452ec7b64a1c009986",class:"project-item-info"},t("div",{key:"7ab685ce1d25cca777f2239143b390ff630dc27a",class:"project-item-progress"},t("slot",{key:"830643aa3b99b44dbcd6a8a5eab01a6ef0f8999e",name:"progress"})),t("div",{key:"d87d23373afa3019b7f18668b13eabdec8a41cf4",class:"project-item-status"},t("slot",{key:"7a52a02dca7d72cf356884333a3151e4c707c521",name:"status"}))))}};s.style=d();export{s as dso_project_item};
+//# sourceMappingURL=p-0abaf49f.entry.js.map