npm - @dso-toolkit/core - Versions diffs - 83.0.0 → 84.0.0 - Mend

@dso-toolkit/core 83.0.0 → 84.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 (1140) hide show

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -158,7 +158,7 @@ export class ViewerGrid {
         }
     }
     render() {
-        return (h(Fragment, { key: 'a48a36d4ac0af81689454c72d95083c96bf1f93c' }, h("slot", { key: '5a21af9c400be63c727edc49a8fc474ae7f834df', name: "top-bar" }), h("div", { key: '0b023e20278d58a1d304f639ed6f9c0297b9b36a', class: "viewer-grid-columns" }, this.tabView && (h("nav", { key: 'a90a9c21eef330a791b743052bb8a801901a9203', class: "dso-navbar" }, h("ul", { key: 'bf0bd1e258e060d826c65d9216d406a66edac293', class: "dso-nav dso-nav-sub" }, viewerGridTabs.map((tab) => (h("li", { key: tab, class: clsx({ "dso-active": this.activeTab === tab }) }, h("button", { type: "button", class: "dso-tertiary", onClick: () => this.switchActiveTab(tab) }, viewerGridTabLabelMap[tab]))))))), (!this.tabView || (this.tabView && this.activeTab === "search")) && (h(MainPanel, { key: '72d1d08f4e4b0a21616a32c0c140e72d86347324', tabView: this.tabView, mainSize: this.mainSize, documentPanelOpen: this.documentPanelOpen, mainPanelExpanded: this.mainPanelExpanded, mainPanelHidden: this.mainPanelHidden, toggleMainPanel: this.toggleMainPanel, dsoMainSizeChangeAnimationEnd: this.dsoMainSizeChangeAnimationEnd })), (!this.tabView || (this.tabView && this.activeTab === "search")) && (h(FilterPanel, { key: 'c08b343416d10416fb758d46cd7be5eb556f5bd9', open: this.filterPanelOpen, title: this.filterPanelTitle, ref: (element) => (this.filterPanel = element), dsoCloseFilterPanel: (e) => this.dsoCloseFilterPanel.emit({ originalEvent: e }) })), (!this.tabView || (this.tabView && this.activeTab === "map")) && (h("div", { key: '2f74ea4fb5fa62d2e8630bb28995fb70bb76f4e9', class: "map", ref: (element) => (this.mapElement = element) }, h("slot", { key: '9eea3ac2333b32d5e38c7d85458f54dfb0728503', name: "map" }))), ((!this.tabView && this.documentPanelOpen) || (this.tabView && this.activeTab === "document")) && (h(DocumentPanel, { key: '9cb838005d169bb21a4b2ea3ac5176a2d03db7c5', tabView: this.tabView, panelSize: this.documentPanelSize, shrinkDocumentPanel: this.shrinkDocumentPanel, expandDocumentPanel: this.expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd: this.dsoDocumentPanelSizeChangeAnimationEnd })), h(Overlay, { key: '3c4295d9aced9e9ee53a01d4410133e729b08242', ref: (element) => (this.overlay = element), dsoCloseOverlay: (e) => this.dsoCloseOverlay.emit({ originalEvent: e }) }))));
+        return (h(Fragment, { key: 'f26948c9fb34150cb83653bfaf5d7e5fc6c4efef' }, h("slot", { key: '55285a50520f0c0357d56dc010fea37964db11dd', name: "top-bar" }), h("div", { key: '87da07cf41beb1549292629836c9b0484eba7862', class: "viewer-grid-columns" }, this.tabView && (h("nav", { key: '4313446e6e0a436f58a1eb3a4141404a1056ee3a', class: "dso-navbar" }, h("ul", { key: '6056f1273a55a45875dafefd6cfa9db6c85e587c', class: "dso-nav dso-nav-sub" }, viewerGridTabs.map((tab) => (h("li", { key: tab, class: clsx({ "dso-active": this.activeTab === tab }) }, h("button", { type: "button", class: "dso-tertiary", onClick: () => this.switchActiveTab(tab) }, viewerGridTabLabelMap[tab]))))))), (!this.tabView || (this.tabView && this.activeTab === "search")) && (h(MainPanel, { key: '7fe8580f6d34172669db9dde4b70ea4a99a26261', tabView: this.tabView, mainSize: this.mainSize, documentPanelOpen: this.documentPanelOpen, mainPanelExpanded: this.mainPanelExpanded, mainPanelHidden: this.mainPanelHidden, toggleMainPanel: this.toggleMainPanel, dsoMainSizeChangeAnimationEnd: this.dsoMainSizeChangeAnimationEnd })), (!this.tabView || (this.tabView && this.activeTab === "search")) && (h(FilterPanel, { key: 'aa536d1c0f5df00bfcf2d98d6c55ca5f8db99043', open: this.filterPanelOpen, title: this.filterPanelTitle, ref: (element) => (this.filterPanel = element), dsoCloseFilterPanel: (e) => this.dsoCloseFilterPanel.emit({ originalEvent: e }) })), (!this.tabView || (this.tabView && this.activeTab === "map")) && (h("div", { key: 'dedb4410a56de0f2ca50b2f4cc51de72aefc27ef', class: "map", ref: (element) => (this.mapElement = element) }, h("slot", { key: '7408a9a762723f7f3e272965d5cb81bc811e8c0a', name: "map" }))), ((!this.tabView && this.documentPanelOpen) || (this.tabView && this.activeTab === "document")) && (h(DocumentPanel, { key: 'a0742d7b4f47517f5d661a0318bb738a46904cec', tabView: this.tabView, panelSize: this.documentPanelSize, shrinkDocumentPanel: this.shrinkDocumentPanel, expandDocumentPanel: this.expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd: this.dsoDocumentPanelSizeChangeAnimationEnd })), h(Overlay, { key: '04de20f4685c3993ffbf25fc5966b4fb2d96586c', ref: (element) => (this.overlay = element), dsoCloseOverlay: (e) => this.dsoCloseOverlay.emit({ originalEvent: e }) }))));
     }
     static get is() { return "dso-viewer-grid"; }
     static get encapsulation() { return "shadow"; }
@@ -176,7 +176,6 @@ export class ViewerGrid {
         return {
             "filterPanelTitle": {
                 "type": "string",
-                "attribute": "filter-panel-title",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -191,11 +190,11 @@ export class ViewerGrid {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "filter-panel-title"
             },
             "filterPanelOpen": {
                 "type": "boolean",
-                "attribute": "filter-panel-open",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -211,11 +210,11 @@ export class ViewerGrid {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "filter-panel-open",
                 "defaultValue": "false"
             },
             "overlayOpen": {
                 "type": "boolean",
-                "attribute": "overlay-open",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -231,11 +230,11 @@ export class ViewerGrid {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "overlay-open",
                 "defaultValue": "false"
             },
             "documentPanelOpen": {
                 "type": "boolean",
-                "attribute": "document-panel-open",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -251,11 +250,11 @@ export class ViewerGrid {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "document-panel-open",
                 "defaultValue": "false"
             },
             "mainSize": {
                 "type": "string",
-                "attribute": "main-size",
                 "mutable": false,
                 "complexType": {
                     "original": "ViewerGridPanelSize",
@@ -277,11 +276,11 @@ export class ViewerGrid {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "main-size",
                 "defaultValue": "\"large\""
             },
             "activeTab": {
                 "type": "string",
-                "attribute": "active-tab",
                 "mutable": false,
                 "complexType": {
                     "original": "ViewerGridTab",
@@ -302,11 +301,11 @@ export class ViewerGrid {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "active-tab"
             },
             "documentPanelSize": {
                 "type": "string",
-                "attribute": "document-panel-size",
                 "mutable": false,
                 "complexType": {
                     "original": "ViewerGridPanelSize",
@@ -328,11 +327,11 @@ export class ViewerGrid {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "document-panel-size",
                 "defaultValue": "\"large\""
             },
             "mainPanelExpanded": {
                 "type": "boolean",
-                "attribute": "main-panel-expanded",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -348,11 +347,11 @@ export class ViewerGrid {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "main-panel-expanded",
                 "defaultValue": "false"
             },
             "mainPanelHidden": {
                 "type": "boolean",
-                "attribute": "main-panel-hidden",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -368,6 +367,7 @@ export class ViewerGrid {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "main-panel-hidden",
                 "defaultValue": "false"
             }
         };

package/dist/components/alert.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, transformTag } from '@stencil/core/internal/client';
 import { c as clsx } from './clsx.js';
 import { i as i18n } from './i18n.js';
 import { d as defineCustomElement$2 } from './icon.js';
@@ -25,12 +25,14 @@ const translations = {
     },
 };
-const alertCss = ":host{display:block}:host(:not(:first-child)){margin-block-start:24px}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:inset(0)}.alert{line-height:1.5;margin-block-end:var(--_dso-alert-margin-block-end, 24px);min-block-size:56px;position:relative;border:1px solid transparent}@media screen and (min-width: 481px){.alert{padding-block:15px;padding-inline:54px 39px}.alert.dso-compact{padding-block:7px;padding-inline:15px 39px}}@media screen and (max-width: 480px){.alert{padding-block:54px 15px;padding-inline:15px}.alert.dso-compact{padding-block:7px;padding-inline:15px}}.alert:not(:first-child){margin-block-start:24px}.alert .icon-status{inset-block-start:15px;inset-inline-start:15px;position:absolute}.alert.dso-compact{border-end-end-radius:8px;border-start-end-radius:8px;margin-inline-start:8px}.alert.dso-compact::before{content:\"\";position:absolute;inset-block-start:-1px;inset-block-end:-1px;inset-inline-start:-9px;border-start-start-radius:8px;border-end-start-radius:8px;inline-size:8px}.alert.dso-compact{min-block-size:16px}.alert.alert-success{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.alert.alert-success a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"))}.alert.alert-success a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"))}.alert.alert-success a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"))}.alert.alert-success a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"))}.alert.alert-success{--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#e4f1d4;color:#191919}.alert.alert-success{border-color:var(--_dso-alert-success-border-color, #e4f1d4)}.alert.alert-success.dso-compact::before{background-color:#39870c}.alert.alert-error{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.alert.alert-error a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"))}.alert.alert-error a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"))}.alert.alert-error a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"))}.alert.alert-error a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"))}.alert.alert-error{--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#f5d8dc;color:#191919}.alert.alert-error{border-color:var(--_dso-alert-error-border-color, #f5d8dc)}.alert.alert-error.dso-compact::before{background-color:#ce3f51}.alert.alert-warning{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.alert.alert-warning a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"))}.alert.alert-warning a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"))}.alert.alert-warning a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"))}.alert.alert-warning a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"))}.alert.alert-warning{--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#f8f6cc;color:#191919}.alert.alert-warning{border-color:var(--_dso-alert-warning-border-color, #f8f6cc)}.alert.alert-warning.dso-compact::before{background-color:#dcd400}.alert.alert-info{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.alert.alert-info a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"))}.alert.alert-info a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"))}.alert.alert-info a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"))}.alert.alert-info a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"))}.alert.alert-info{--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#e1ecf7;color:#191919}.alert.alert-info{border-color:var(--_dso-alert-info-border-color, #e1ecf7)}.alert.alert-info.dso-compact::before{background-color:#6ca4d9}.alert dso-icon-button{position:absolute;inset-block-start:7px;inset-inline-end:7px}.alert.dso-compact{min-block-size:16px}";
+const alertCss = () => `:host{display:block}:host(:not(:first-child)){margin-block-start:24px}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:rect(0 0 0 0)}.alert{line-height:1.5;margin-block-end:var(--_dso-alert-margin-block-end, 24px);min-block-size:56px;position:relative;border:1px solid transparent}@media screen and (min-width: 481px){.alert{padding-block:15px;padding-inline:54px 39px}.alert.dso-compact{padding-block:7px;padding-inline:15px 39px}}@media screen and (max-width: 480px){.alert{padding-block:54px 15px;padding-inline:15px}.alert.dso-compact{padding-block:7px;padding-inline:15px}}.alert:not(:first-child){margin-block-start:24px}.alert .icon-status{inset-block-start:15px;inset-inline-start:15px;position:absolute}.alert.dso-compact{border-end-end-radius:8px;border-start-end-radius:8px;margin-inline-start:8px}.alert.dso-compact::before{content:"";position:absolute;inset-block-start:-1px;inset-block-end:-1px;inset-inline-start:-9px;border-start-start-radius:8px;border-end-start-radius:8px;inline-size:8px}.alert.dso-compact{min-block-size:16px}.alert.alert-success{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.alert.alert-success a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}.alert.alert-success a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}.alert.alert-success a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}.alert.alert-success a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-zwart"))}.alert.alert-success{--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#e4f1d4;color:#191919}.alert.alert-success{border-color:var(--_dso-alert-success-border-color, #e4f1d4)}.alert.alert-success.dso-compact::before{background-color:#39870c}.alert.alert-error{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.alert.alert-error a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}.alert.alert-error a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}.alert.alert-error a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}.alert.alert-error a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-zwart"))}.alert.alert-error{--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#f5d8dc;color:#191919}.alert.alert-error{border-color:var(--_dso-alert-error-border-color, #f5d8dc)}.alert.alert-error.dso-compact::before{background-color:#ce3f51}.alert.alert-warning{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.alert.alert-warning a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}.alert.alert-warning a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}.alert.alert-warning a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}.alert.alert-warning a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-zwart"))}.alert.alert-warning{--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#f8f6cc;color:#191919}.alert.alert-warning{border-color:var(--_dso-alert-warning-border-color, #f8f6cc)}.alert.alert-warning.dso-compact::before{background-color:#dcd400}.alert.alert-info{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.alert.alert-info a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}.alert.alert-info a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}.alert.alert-info a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}.alert.alert-info a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-zwart"))}.alert.alert-info{--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#e1ecf7;color:#191919}.alert.alert-info{border-color:var(--_dso-alert-info-border-color, #e1ecf7)}.alert.alert-info.dso-compact::before{background-color:#6ca4d9}.alert dso-icon-button{position:absolute;inset-block-start:7px;inset-inline-end:7px}.alert.dso-compact{min-block-size:16px}`;
 const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.dsoClose = createEvent(this, "dsoClose", 7);
         /**
@@ -47,7 +49,7 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
         return (h("div", { key: 'eeea4a67248e5fdc7e2c7d32b042c9efd31adaa4', class: clsx("alert", `alert-${this.status}`, { "dso-compact": this.compact }), role: this.roleAlert ? "alert" : undefined }, !this.compact && h("dso-icon", { key: '612cbefcdb765a9cd89ff685511c3bad873f351f', class: "icon-status", icon: "status-" + this.status }), h("span", { key: 'df7fe6801059b92da19617cdc016ca63c6511c10', class: "sr-only" }, status, ":"), h("slot", { key: '7cf677407b4873800de0829ee5bf09c489dace0e' }), this.closable && (h("dso-icon-button", { key: '7203acfb2ec0d89b940f7d9676f968ffce0b436a', label: this.text("close"), variant: "tertiary", icon: "times", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) }))));
     }
     get host() { return this; }
-    static get style() { return alertCss; }
+    static get style() { return alertCss(); }
 }, [257, "dso-alert", {
         "status": [513],
         "roleAlert": [4, "role-alert"],
@@ -61,17 +63,17 @@ function defineCustomElement() {
     const components = ["dso-alert", "dso-icon", "dso-icon-button"];
     components.forEach(tagName => { switch (tagName) {
         case "dso-alert":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, Alert);
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), Alert);
             }
             break;
         case "dso-icon":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$2();
             }
             break;
         case "dso-icon-button":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$1();
             }
             break;

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

	@@ -1 +1 @@
1	- {"file":"alert.js","mappings":";;;;;;AAEO,MAAM,YAAY,GAAa;AACpC,IAAA,EAAE,EAAE;AACF,QAAA,WAAW,EAAE;AACX,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,IAAI,EAAE,QAAQ;AACd,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,KAAK,EAAE,OAAO;AACf,SAAA;AACF,KAAA;AACD,IAAA,EAAE,EAAE;AACF,QAAA,WAAW,EAAE;AACX,YAAA,KAAK,EAAE,SAAS;AAChB,YAAA,OAAO,EAAE,QAAQ;AACjB,YAAA,IAAI,EAAE,WAAW;AACjB,YAAA,OAAO,EAAE,cAAc;AACvB,YAAA,KAAK,EAAE,MAAM;AACd,SAAA;AACF,KAAA;CACF;;ACrBD,MAAM,QAAQ,GAAG,~~4lNAA4lN~~;;~~MCahmN~~,KAAK,iBAAAA,kBAAA,CAAA,MAAA,KAAA,SAAA,WAAA,CAAA;AALlB,IAAA,WAAA,~~GAAA;;;;;~~AA2BE;;AAEG;AAEH,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAQR,QAAA,IAAA,CAAA,IAAI,GAAG,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC;AA4BnD;IA1BC,MAAM,GAAA;QACJ,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;QACrC,IAAI,CAAC,MAAM,EAAE;YACX,MAAM,IAAI,KAAK,CAAC,CAAA,eAAA,EAAkB,IAAI,CAAC,MAAM,CAAE,CAAA,CAAC;;AAGlD,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE,CAAS,MAAA,EAAA,IAAI,CAAC,MAAM,EAAE,EAAE,EAAE,aAAa,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,EAC7E,IAAI,EAAE,IAAI,CAAC,SAAS,GAAG,OAAO,GAAG,SAAS,EAAA,EAEzC,CAAC,IAAI,CAAC,OAAO,IAAI,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,KAAK,EAAC,aAAa,EAAC,IAAI,EAAE,SAAS,GAAG,IAAI,CAAC,MAAM,EAAI,CAAA,EACjF,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EAAE,MAAM,EAAS,GAAA,CAAA,EACtC,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EAEZ,IAAI,CAAC,QAAQ,KACZ,wEACE,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,EACzB,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,OAAO,EACZ,UAAU,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,EAC3D,CAAA,CACH,CACG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/alert/alert.i18n.ts","src/components/alert/alert.scss?tag=dso-alert&encapsulation=shadow","src/components/alert/alert.tsx"],"sourcesContent":["import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n en: {\r\n \"dso-alert\": {\r\n close: \"Close\",\r\n success: \"Success\",\r\n info: \"Notice\",\r\n warning: \"Warning\",\r\n error: \"Error\",\r\n },\r\n },\r\n nl: {\r\n \"dso-alert\": {\r\n close: \"Sluiten\",\r\n success: \"Gelukt\",\r\n info: \"Opmerking\",\r\n warning: \"Waarschuwing\",\r\n error: \"Fout\",\r\n },\r\n },\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/alert\";\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n:host(:not(:first-child)) {\r\n margin-block-start: units.$u3;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n.alert {\r\n @include alert.root();\r\n\r\n dso-icon-button {\r\n position: absolute;\r\n inset-block-start: units.$u1 - alert.$border-size;\r\n inset-inline-end: units.$u1 - alert.$border-size;\r\n }\r\n\r\n &.dso-compact {\r\n min-block-size: alert.$inline-padding;\r\n }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Prop, h } from \"@stencil/core\";\r\nimport { clsx } from \"clsx\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { translations } from \"./alert.i18n\";\r\nimport { AlertCloseEvent } from \"./alert.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-alert\",\r\n styleUrl: \"alert.scss\",\r\n shadow: true,\r\n})\r\nexport class Alert {\r\n @Element()\r\n host!: HTMLDsoAlertElement;\r\n\r\n /*\r\n Set status of alert\r\n /\r\n @Prop({ reflect: true })\r\n status!: \"success\" \| \"info\" \| \"warning\" \| \"error\";\r\n\r\n /\r\n Whether or not to show the role attribute with value \"alert\". To control the tooltip add the `role-alert` attribute.\r\n /\r\n @Prop()\r\n roleAlert?: boolean;\r\n\r\n /\r\n Show alert as compact variant (without icon)\r\n /\r\n @Prop({ reflect: true })\r\n compact?: boolean;\r\n\r\n /\r\n When `false` the close button in the alert will not be rendered.\r\n /\r\n @Prop()\r\n closable = false;\r\n\r\n /\r\n Emitted when the user closes the Alert.\r\n */\r\n @Event()\r\n dsoClose!: EventEmitter<AlertCloseEvent>;\r\n\r\n private text = i18n(() => this.host, translations);\r\n\r\n render() {\r\n const status = this.text(this.status);\r\n if (!status) {\r\n throw new Error(`Invalid status ${this.status}`);\r\n }\r\n\r\n return (\r\n <div\r\n class={clsx(\"alert\", `alert-${this.status}`, { \"dso-compact\": this.compact })}\r\n role={this.roleAlert ? \"alert\" : undefined}\r\n >\r\n {!this.compact && <dso-icon class=\"icon-status\" icon={\"status-\" + this.status} />}\r\n <span class=\"sr-only\">{status}:</span>\r\n <slot></slot>\r\n\r\n {this.closable && (\r\n <dso-icon-button\r\n label={this.text(\"close\")}\r\n variant=\"tertiary\"\r\n icon=\"times\"\r\n onDsoClick={(e) => this.dsoClose.emit({ originalEvent: e })}\r\n />\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"alert.js","mappings":";;;;;;AAEO,MAAM,YAAY,GAAa;AACpC,IAAA,EAAE,EAAE;AACF,QAAA,WAAW,EAAE;AACX,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,IAAI,EAAE,QAAQ;AACd,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,KAAK,EAAE,OAAO;AACf,SAAA;AACF,KAAA;AACD,IAAA,EAAE,EAAE;AACF,QAAA,WAAW,EAAE;AACX,YAAA,KAAK,EAAE,SAAS;AAChB,YAAA,OAAO,EAAE,QAAQ;AACjB,YAAA,IAAI,EAAE,WAAW;AACjB,YAAA,OAAO,EAAE,cAAc;AACvB,YAAA,KAAK,EAAE,MAAM;AACd,SAAA;AACF,KAAA;CACF;;ACrBD,MAAM,QAAQ,GAAG,MAAM,CAAC,6gNAA6gN,CAAC;;MCazhN,KAAK,iBAAAA,kBAAA,CAAA,MAAA,KAAA,SAAA,WAAA,CAAA;AALlB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AA2BE;;AAEG;AAEH,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAQR,QAAA,IAAA,CAAA,IAAI,GAAG,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC;AA4BnD;IA1BC,MAAM,GAAA;QACJ,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;QACrC,IAAI,CAAC,MAAM,EAAE;YACX,MAAM,IAAI,KAAK,CAAC,CAAA,eAAA,EAAkB,IAAI,CAAC,MAAM,CAAE,CAAA,CAAC;;AAGlD,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE,CAAS,MAAA,EAAA,IAAI,CAAC,MAAM,EAAE,EAAE,EAAE,aAAa,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,EAC7E,IAAI,EAAE,IAAI,CAAC,SAAS,GAAG,OAAO,GAAG,SAAS,EAAA,EAEzC,CAAC,IAAI,CAAC,OAAO,IAAI,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,KAAK,EAAC,aAAa,EAAC,IAAI,EAAE,SAAS,GAAG,IAAI,CAAC,MAAM,EAAI,CAAA,EACjF,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EAAE,MAAM,EAAS,GAAA,CAAA,EACtC,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EAEZ,IAAI,CAAC,QAAQ,KACZ,wEACE,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,EACzB,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,OAAO,EACZ,UAAU,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,EAC3D,CAAA,CACH,CACG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/alert/alert.i18n.ts","src/components/alert/alert.scss?tag=dso-alert&encapsulation=shadow","src/components/alert/alert.tsx"],"sourcesContent":["import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n en: {\r\n \"dso-alert\": {\r\n close: \"Close\",\r\n success: \"Success\",\r\n info: \"Notice\",\r\n warning: \"Warning\",\r\n error: \"Error\",\r\n },\r\n },\r\n nl: {\r\n \"dso-alert\": {\r\n close: \"Sluiten\",\r\n success: \"Gelukt\",\r\n info: \"Opmerking\",\r\n warning: \"Waarschuwing\",\r\n error: \"Fout\",\r\n },\r\n },\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/alert\";\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n:host(:not(:first-child)) {\r\n margin-block-start: units.$u3;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n.alert {\r\n @include alert.root();\r\n\r\n dso-icon-button {\r\n position: absolute;\r\n inset-block-start: units.$u1 - alert.$border-size;\r\n inset-inline-end: units.$u1 - alert.$border-size;\r\n }\r\n\r\n &.dso-compact {\r\n min-block-size: alert.$inline-padding;\r\n }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Prop, h } from \"@stencil/core\";\r\nimport { clsx } from \"clsx\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { translations } from \"./alert.i18n\";\r\nimport { AlertCloseEvent } from \"./alert.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-alert\",\r\n styleUrl: \"alert.scss\",\r\n shadow: true,\r\n})\r\nexport class Alert {\r\n @Element()\r\n host!: HTMLDsoAlertElement;\r\n\r\n /*\r\n Set status of alert\r\n /\r\n @Prop({ reflect: true })\r\n status!: \"success\" \| \"info\" \| \"warning\" \| \"error\";\r\n\r\n /\r\n Whether or not to show the role attribute with value \"alert\". To control the tooltip add the `role-alert` attribute.\r\n /\r\n @Prop()\r\n roleAlert?: boolean;\r\n\r\n /\r\n Show alert as compact variant (without icon)\r\n /\r\n @Prop({ reflect: true })\r\n compact?: boolean;\r\n\r\n /\r\n When `false` the close button in the alert will not be rendered.\r\n /\r\n @Prop()\r\n closable = false;\r\n\r\n /\r\n Emitted when the user closes the Alert.\r\n */\r\n @Event()\r\n dsoClose!: EventEmitter<AlertCloseEvent>;\r\n\r\n private text = i18n(() => this.host, translations);\r\n\r\n render() {\r\n const status = this.text(this.status);\r\n if (!status) {\r\n throw new Error(`Invalid status ${this.status}`);\r\n }\r\n\r\n return (\r\n <div\r\n class={clsx(\"alert\", `alert-${this.status}`, { \"dso-compact\": this.compact })}\r\n role={this.roleAlert ? \"alert\" : undefined}\r\n >\r\n {!this.compact && <dso-icon class=\"icon-status\" icon={\"status-\" + this.status} />}\r\n <span class=\"sr-only\">{status}:</span>\r\n <slot></slot>\r\n\r\n {this.closable && (\r\n <dso-icon-button\r\n label={this.text(\"close\")}\r\n variant=\"tertiary\"\r\n icon=\"times\"\r\n onDsoClick={(e) => this.dsoClose.emit({ originalEvent: e })}\r\n />\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/annotation-body.js CHANGED Viewed

@@ -1,12 +1,6 @@
 import { h } from '@stencil/core/internal/client';
-const AnnotationBody = ({ symbol, title, data, active, dsoActiveChange, }) => (h("div", { class: "annotation-body" },
-    symbol && h("div", { class: "annotation-symbol" }, symbol),
-    h("div", { class: "annotation-info" },
-        h("p", { class: "annotation-title" }, title),
-        data && h("p", { class: "annotation-data" }, data)),
-    dsoActiveChange && (h("div", { class: "annotation-control" },
-        h("dso-slide-toggle", { accessibleLabel: "Toon op kaart", checked: active, onDsoActiveChange: (e) => dsoActiveChange.emit({ current: Boolean(active), next: !active, originalEvent: e }) })))));
+const AnnotationBody = ({ symbol, title, data, active, dsoActiveChange, }) => (h("div", { class: "annotation-body" }, symbol && h("div", { class: "annotation-symbol" }, symbol), h("div", { class: "annotation-info" }, h("p", { class: "annotation-title" }, title), data && h("p", { class: "annotation-data" }, data)), dsoActiveChange && (h("div", { class: "annotation-control" }, h("dso-slide-toggle", { accessibleLabel: "Toon op kaart", checked: active, onDsoActiveChange: (e) => dsoActiveChange.emit({ current: Boolean(active), next: !active, originalEvent: e }) })))));
 export { AnnotationBody as A };
 //# sourceMappingURL=annotation-body.js.map

package/dist/components/annotation-body.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"annotation-body.js","mappings":";;~~MAYa~~,cAAc,GAA6C,CAAC,EACvE,MAAM,EACN,KAAK,EACL,IAAI,EACJ,MAAM,EACN,eAAe,GAChB,MACC,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,iBAAiB,EAAA~~;AACzB~~,~~IAAA~~,MAAM,IAAI,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,mBAAmB,EAAA,EAAE,MAAM,CAAO~~;IACxD~~,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA~~;AAC1B~~,~~QAAA~~,CAAA,CAAA,GAAA,EAAA,EAAG,KAAK,EAAC,kBAAkB,EAAA,EAAE,KAAK,CAAK~~;QACtC~~,IAAI,IAAI,SAAG,KAAK,EAAC,iBAAiB,EAAE,EAAA,IAAI,CAAK,CAC1C~~;AACL~~,~~IAAA~~,eAAe,KACd,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA~~;AAC7B~~,~~QAAA~~,CAAA,CAAA,kBAAA,EAAA,EACE,eAAe,EAAC,eAAe,EAC/B,OAAO,EAAE,MAAM,EACf,iBAAiB,EAAE,CAAC,CAAC,KAAK,eAAe,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,CAAC,MAAM,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,EAAA,CAC7G,CACE,CACP,CACG;;;;","names":[],"sources":["src/components/annotation/annotation-body.tsx"],"sourcesContent":["import { EventEmitter, FunctionalComponent, JSX, h } from \"@stencil/core\";\r\n\r\nimport { AnnotationActiveChangeEvent } from \"./annotation.interfaces\";\r\n\r\ninterface AnnotationBodyProps {\r\n title: JSX.Element;\r\n data?: JSX.Element;\r\n active?: boolean;\r\n dsoActiveChange?: EventEmitter<AnnotationActiveChangeEvent>;\r\n symbol?: JSX.Element;\r\n}\r\n\r\nexport const AnnotationBody: FunctionalComponent<AnnotationBodyProps> = ({\r\n symbol,\r\n title,\r\n data,\r\n active,\r\n dsoActiveChange,\r\n}) => (\r\n <div class=\"annotation-body\">\r\n {symbol && <div class=\"annotation-symbol\">{symbol}</div>}\r\n <div class=\"annotation-info\">\r\n <p class=\"annotation-title\">{title}</p>\r\n {data && <p class=\"annotation-data\">{data}</p>}\r\n </div>\r\n {dsoActiveChange && (\r\n <div class=\"annotation-control\">\r\n <dso-slide-toggle\r\n accessibleLabel=\"Toon op kaart\"\r\n checked={active}\r\n onDsoActiveChange={(e) => dsoActiveChange.emit({ current: Boolean(active), next: !active, originalEvent: e })}\r\n />\r\n </div>\r\n )}\r\n </div>\r\n);\r\n"],"version":3}
1	+ {"file":"annotation-body.js","mappings":";;AAYO,MAAM,cAAc,GAA6C,CAAC,EACvE,MAAM,EACN,KAAK,EACL,IAAI,EACJ,MAAM,EACN,eAAe,GAChB,MACC,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,iBAAiB,EAAA,EACzB,MAAM,IAAI,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,mBAAmB,EAAA,EAAE,MAAM,CAAO,EACxD,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAA,CAAA,GAAA,EAAA,EAAG,KAAK,EAAC,kBAAkB,EAAA,EAAE,KAAK,CAAK,EACtC,IAAI,IAAI,SAAG,KAAK,EAAC,iBAAiB,EAAE,EAAA,IAAI,CAAK,CAC1C,EACL,eAAe,KACd,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAC7B,CAAA,CAAA,kBAAA,EAAA,EACE,eAAe,EAAC,eAAe,EAC/B,OAAO,EAAE,MAAM,EACf,iBAAiB,EAAE,CAAC,CAAC,KAAK,eAAe,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,CAAC,MAAM,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,EAAA,CAC7G,CACE,CACP,CACG;;;;","names":[],"sources":["src/components/annotation/annotation-body.tsx"],"sourcesContent":["import { EventEmitter, FunctionalComponent, JSX, h } from \"@stencil/core\";\r\n\r\nimport { AnnotationActiveChangeEvent } from \"./annotation.interfaces\";\r\n\r\ninterface AnnotationBodyProps {\r\n title: JSX.Element;\r\n data?: JSX.Element;\r\n active?: boolean;\r\n dsoActiveChange?: EventEmitter<AnnotationActiveChangeEvent>;\r\n symbol?: JSX.Element;\r\n}\r\n\r\nexport const AnnotationBody: FunctionalComponent<AnnotationBodyProps> = ({\r\n symbol,\r\n title,\r\n data,\r\n active,\r\n dsoActiveChange,\r\n}) => (\r\n <div class=\"annotation-body\">\r\n {symbol && <div class=\"annotation-symbol\">{symbol}</div>}\r\n <div class=\"annotation-info\">\r\n <p class=\"annotation-title\">{title}</p>\r\n {data && <p class=\"annotation-data\">{data}</p>}\r\n </div>\r\n {dsoActiveChange && (\r\n <div class=\"annotation-control\">\r\n <dso-slide-toggle\r\n accessibleLabel=\"Toon op kaart\"\r\n checked={active}\r\n onDsoActiveChange={(e) => dsoActiveChange.emit({ current: Boolean(active), next: !active, originalEvent: e })}\r\n />\r\n </div>\r\n )}\r\n </div>\r\n);\r\n"],"version":3}

package/dist/components/annotation-list-renvooi-values.js CHANGED Viewed

@@ -1,9 +1,7 @@
 import { h, Fragment } from '@stencil/core/internal/client';
 const AnnotationListRenvooiValues = ({ values }) => {
-    return (h(Fragment, null, values === null || values === void 0 ? void 0 : values.map((v, i) => (h(Fragment, null,
-        i > 0 && ", ",
-        h("dso-renvooi", { value: v }))))));
+    return (h(Fragment, null, values === null || values === void 0 ? void 0 : values.map((v, i) => (h(Fragment, null, i > 0 && ", ", h("dso-renvooi", { value: v }))))));
 };
 export { AnnotationListRenvooiValues as A };

package/dist/components/annotation-list-renvooi-values.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"annotation-list-renvooi-values.js","mappings":";;MAQa,2BAA2B,GAAqD,CAAC,EAAE,MAAM,EAAE,KAAI;AAC1G,IAAA,QACE,CACG,CAAA,QAAA,EAAA,IAAA,EAAA,MAAM,KAAN,IAAA,IAAA,MAAM,uBAAN,MAAM,CAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,MAChB,CAAA,CAAA,QAAA,EAAA,IAAA~~;QACG~~,CAAC,GAAG,CAAC,IAAI,IAAI~~;QACd~~,CAAa,CAAA,aAAA,EAAA,EAAA,KAAK,EAAE,CAAC,EAAA,CAAI,CACxB,CACJ,CAAC,CACD;AAEP;;;;","names":[],"sources":["src/components/annotation/annotation-list-renvooi-values.tsx"],"sourcesContent":["import { Fragment, FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { RenvooiValue } from \"../renvooi/renvooi.interfaces\";\r\n\r\ninterface AnnotationListRenvooiValues {\r\n values: RenvooiValue[] \| undefined;\r\n}\r\n\r\nexport const AnnotationListRenvooiValues: FunctionalComponent<AnnotationListRenvooiValues> = ({ values }) => {\r\n return (\r\n <>\r\n {values?.map((v, i) => (\r\n <>\r\n {i > 0 && \", \"}\r\n <dso-renvooi value={v} />\r\n </>\r\n ))}\r\n </>\r\n );\r\n};\r\n"],"version":3}
1	+ {"file":"annotation-list-renvooi-values.js","mappings":";;MAQa,2BAA2B,GAAqD,CAAC,EAAE,MAAM,EAAE,KAAI;AAC1G,IAAA,QACE,CACG,CAAA,QAAA,EAAA,IAAA,EAAA,MAAM,KAAN,IAAA,IAAA,MAAM,uBAAN,MAAM,CAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,MAChB,CAAA,CAAA,QAAA,EAAA,IAAA,EACG,CAAC,GAAG,CAAC,IAAI,IAAI,EACd,CAAa,CAAA,aAAA,EAAA,EAAA,KAAK,EAAE,CAAC,EAAA,CAAI,CACxB,CACJ,CAAC,CACD;AAEP;;;;","names":[],"sources":["src/components/annotation/annotation-list-renvooi-values.tsx"],"sourcesContent":["import { Fragment, FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { RenvooiValue } from \"../renvooi/renvooi.interfaces\";\r\n\r\ninterface AnnotationListRenvooiValues {\r\n values: RenvooiValue[] \| undefined;\r\n}\r\n\r\nexport const AnnotationListRenvooiValues: FunctionalComponent<AnnotationListRenvooiValues> = ({ values }) => {\r\n return (\r\n <>\r\n {values?.map((v, i) => (\r\n <>\r\n {i > 0 && \", \"}\r\n <dso-renvooi value={v} />\r\n </>\r\n ))}\r\n </>\r\n );\r\n};\r\n"],"version":3}