npm - @dso-toolkit/core - Versions diffs - 54.2.1 → 55.0.0 - Mend

@dso-toolkit/core 54.2.1 → 55.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 (834) hide show

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

@@ -46,6 +46,7 @@ export class TreeView {
       }
       event.preventDefault();
     };
+    // eslint-disable-next-line @stencil-community/own-props-must-be-private -- Omdat this als TreeView instance aan Functionele Components wordt gegeven
     this.itemClick = (event, ancestors, item) => {
       if (!(event.target instanceof HTMLElement)) {
         return;
@@ -54,7 +55,7 @@ export class TreeView {
       if (contentElement) {
         const tree = event
           .composedPath()
-          .find((item) => (item instanceof HTMLElement ? item.className === "dso-tree" : false));
+          .find((eventTarget) => (eventTarget instanceof HTMLElement ? eventTarget.className === "dso-tree" : false));
         if (!(contentElement instanceof HTMLParagraphElement) || !(tree instanceof HTMLElement)) {
           return;
         }
@@ -312,3 +313,4 @@ export class TreeView {
     };
   }
 }
+//# sourceMappingURL=tree-view.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"tree-view.js","sourceRoot":"","sources":["../../../src/components/tree-view/tree-view.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h, Component, ComponentInterface, Event, EventEmitter, Prop, Method } from \"@stencil/core\";\r\n\r\nimport { TreeViewPointerEvent, TreeViewItem } from \"./tree-view.interfaces\";\r\nimport { DsoTreeItem } from \"./tree-item\";\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-filterpanel-buttons.js CHANGED Viewed

@@ -1,2 +1,3 @@
 import { h } from "@stencil/core";
 export const ViewerGridFilterpanelButtons = ({ onApply, onCancel, }) => (h("div", { class: "filterpanel-buttons" }, h("button", { type: "button", class: "cancel-button", onClick: onCancel }, h("span", null, "Annuleren")), h("button", { type: "button", class: "apply-button", onClick: onApply }, h("span", null, "Toepassen"), h("dso-icon", { icon: "chevron-right" }))));
+//# sourceMappingURL=viewer-grid-filterpanel-buttons.js.map

package/dist/collection/components/viewer-grid/viewer-grid-filterpanel-buttons.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"viewer-grid-filterpanel-buttons.js","sourceRoot":"","sources":["../../../src/components/viewer-grid/viewer-grid-filterpanel-buttons.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AAOvD,MAAM,CAAC,MAAM,4BAA4B,GAAoD,CAAC,EAC5F,OAAO,EACP,QAAQ,GACT,EAAE,EAAE,CAAC,CACJ,WAAK,KAAK,EAAC,qBAAqB;EAC9B,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,QAAQ;IAC3D,4BAAsB,CACf;EACT,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,cAAc,EAAC,OAAO,EAAE,OAAO;IACzD,4BAAsB;IACtB,gBAAU,IAAI,EAAC,eAAe,GAAY,CACnC,CACL,CACP,CAAC","sourcesContent":["import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nexport interface ViewerGridFilterpanelProps {\r\n onApply: (mouseEvent: MouseEvent) => void;\r\n onCancel: (mouseEvent: MouseEvent) => void;\r\n}\r\n\r\nexport const ViewerGridFilterpanelButtons: FunctionalComponent<ViewerGridFilterpanelProps> = ({\r\n onApply,\r\n onCancel,\r\n}) => (\r\n <div class=\"filterpanel-buttons\">\r\n <button type=\"button\" class=\"cancel-button\" onClick={onCancel}>\r\n <span>Annuleren</span>\r\n </button>\r\n <button type=\"button\" class=\"apply-button\" onClick={onApply}>\r\n <span>Toepassen</span>\r\n <dso-icon icon=\"chevron-right\"></dso-icon>\r\n </button>\r\n </div>\r\n);\r\n"]}

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

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

package/dist/collection/components/viewer-grid/viewer-grid.interfaces.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"viewer-grid.interfaces.js","sourceRoot":"","sources":["../../../src/components/viewer-grid/viewer-grid.interfaces.ts"],"names":[],"mappings":"","sourcesContent":["export interface ViewerGridChangeSizeEvent {\r\n /**\r\n * Indicates whether it's before or after the animation\r\n */\r\n stage: \"start\" | \"end\";\r\n previousSize: MainSize;\r\n currentSize: MainSize;\r\n}\r\n\r\nexport interface FilterpanelEvent {\r\n originalEvent: MouseEvent;\r\n}\r\n\r\nexport type MainSize = \"small\" | \"medium\" | \"large\";\r\n\r\nexport type LabelSizeMap = { [key in MainSize]: string };\r\n"]}

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

@@ -144,7 +144,7 @@ export class ViewerGrid {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Set to true when filterpanel should show."
         },
         "attribute": "filterpanel-open",
         "reflect": true,
@@ -162,7 +162,7 @@ export class ViewerGrid {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Set to true when overlay should show."
         },
         "attribute": "overlay-open",
         "reflect": true,
@@ -206,7 +206,7 @@ export class ViewerGrid {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Emitted when user wants to close the overlay."
         },
         "complexType": {
           "original": "MouseEvent | KeyboardEvent",
@@ -228,7 +228,7 @@ export class ViewerGrid {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Emitted when user cancels filterpanel."
         },
         "complexType": {
           "original": "FilterpanelEvent",
@@ -248,7 +248,7 @@ export class ViewerGrid {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Emitted when user applies filterpanel options."
         },
         "complexType": {
           "original": "FilterpanelEvent",
@@ -268,7 +268,7 @@ export class ViewerGrid {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Emitted before and after main size animation. Inspect `detail` property for more information."
         },
         "complexType": {
           "original": "ViewerGridChangeSizeEvent",
@@ -290,3 +290,4 @@ export class ViewerGrid {
       }];
   }
 }
+//# sourceMappingURL=viewer-grid.js.map

package/dist/collection/components/viewer-grid/viewer-grid.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"viewer-grid.js","sourceRoot":"","sources":["../../../src/components/viewer-grid/viewer-grid.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h, Component, Prop, State, Host, Element, Event, EventEmitter, Watch } from \"@stencil/core\";\r\nimport { FocusTrap, createFocusTrap } from \"focus-trap\";\r\nimport { ViewerGridFilterpanelButtons } from \"./viewer-grid-filterpanel-buttons\";\r\nimport { FilterpanelEvent, LabelSizeMap, MainSize, ViewerGridChangeSizeEvent } from \"./viewer-grid.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-viewer-grid\",\r\n styleUrl: \"viewer-grid.scss\",\r\n shadow: true,\r\n})\r\nexport class ViewerGrid {\r\n private sizeLabelMap: LabelSizeMap = {\r\n small: \"smal\",\r\n medium: \"middel\",\r\n large: \"breed\",\r\n };\r\n\r\n private mapPanel?: HTMLDivElement;\r\n\r\n /**\r\n * Set to true when filterpanel should show.\r\n */\r\n @Prop({ reflect: true })\r\n filterpanelOpen = false;\r\n\r\n /**\r\n * Set to true when overlay should show.\r\n */\r\n @Prop({ reflect: true })\r\n overlayOpen = false;\r\n\r\n /**\r\n * Size of the main content panel when component loads. Changing this attribute afterwards has no effect.\r\n *\r\n * Default size is `large`.\r\n */\r\n @Prop()\r\n initialMainSize?: MainSize;\r\n\r\n @State()\r\n mainSize: MainSize = \"large\";\r\n\r\n /**\r\n * Emitted when user wants to close the overlay.\r\n */\r\n @Event()\r\n dsoCloseOverlay!: EventEmitter<MouseEvent | KeyboardEvent>;\r\n\r\n /**\r\n * Emitted when user cancels filterpanel.\r\n */\r\n @Event()\r\n dsoFilterpanelCancel!: EventEmitter<FilterpanelEvent>;\r\n\r\n /**\r\n * Emitted when user applies filterpanel options.\r\n */\r\n @Event()\r\n dsoFilterpanelApply!: EventEmitter<FilterpanelEvent>;\r\n\r\n /**\r\n * Emitted before and after main size animation. Inspect `detail` property for more information.\r\n */\r\n @Event()\r\n dsoMainSizeChange!: EventEmitter<ViewerGridChangeSizeEvent>;\r\n\r\n @Element()\r\n host!: HTMLDsoViewerGridElement;\r\n\r\n private filterpanel: HTMLElement | undefined;\r\n\r\n private filterpanelSlot: HTMLElement | null = null;\r\n\r\n private filterpanelFocustrap: FocusTrap | undefined;\r\n\r\n private overlay: HTMLDivElement | undefined;\r\n\r\n private overlaySlot: HTMLDivElement | null = null;\r\n\r\n private overlayFocustrap: FocusTrap | undefined;\r\n\r\n @Watch(\"mainSize\")\r\n mainSizeWatcher(currentSize: MainSize, previousSize: MainSize) {\r\n this.dsoMainSizeChange.emit({\r\n stage: \"start\",\r\n previousSize,\r\n currentSize,\r\n });\r\n\r\n this.mapPanel?.addEventListener(\r\n \"transitionend\",\r\n (e) => {\r\n if (e.propertyName === \"flex-basis\") {\r\n this.dsoMainSizeChange.emit({\r\n stage: \"end\",\r\n previousSize,\r\n currentSize,\r\n });\r\n }\r\n },\r\n { once: true }\r\n );\r\n }\r\n\r\n private shrinkMain = () => {\r\n this.mainSize = this.mainSize === \"large\" ? \"medium\" : \"small\";\r\n };\r\n\r\n private expandMain = () => {\r\n this.mainSize = this.mainSize === \"small\" ? \"medium\" : \"large\";\r\n };\r\n\r\n private updateFocusTrap() {\r\n if (this.filterpanelOpen && this.overlayOpen) {\r\n return;\r\n }\r\n\r\n if (this.filterpanelFocustrap) {\r\n if (this.filterpanelOpen && !this.filterpanel?.hidden) {\r\n this.filterpanelFocustrap.activate();\r\n this.host.addEventListener(\"keydown\", this.keyDownListener);\r\n } else {\r\n this.filterpanelFocustrap.deactivate();\r\n this.host.removeEventListener(\"keydown\", this.keyDownListener);\r\n }\r\n }\r\n\r\n if (this.overlayFocustrap) {\r\n if (this.overlayOpen && !this.overlay?.hidden) {\r\n this.overlayFocustrap.activate();\r\n this.host.addEventListener(\"keydown\", this.keyDownListener);\r\n } else {\r\n this.overlayFocustrap.deactivate();\r\n this.host.removeEventListener(\"keydown\", this.keyDownListener);\r\n }\r\n }\r\n }\r\n\r\n private keyDownListener = (event: KeyboardEvent) => {\r\n if (event.key !== \"Escape\") {\r\n return;\r\n }\r\n\r\n this.dsoCloseOverlay.emit(event);\r\n };\r\n\r\n connectedCallback() {\r\n this.filterpanelSlot = this.host.querySelector<HTMLDivElement>(\"div[slot='filterpanel']\");\r\n\r\n this.overlaySlot = this.host.querySelector<HTMLDivElement>(\"div[slot='overlay']\");\r\n }\r\n\r\n componentDidLoad() {\r\n if (this.filterpanel && this.filterpanelSlot) {\r\n this.filterpanelFocustrap = createFocusTrap([this.filterpanel, this.filterpanelSlot], {\r\n escapeDeactivates: false,\r\n allowOutsideClick: true,\r\n tabbableOptions: {\r\n getShadowRoot: true,\r\n },\r\n });\r\n }\r\n\r\n if (this.overlay && this.overlaySlot) {\r\n this.overlayFocustrap = createFocusTrap([this.overlay, this.overlaySlot], {\r\n escapeDeactivates: false,\r\n allowOutsideClick: true,\r\n tabbableOptions: {\r\n getShadowRoot: true,\r\n },\r\n });\r\n }\r\n\r\n this.updateFocusTrap();\r\n }\r\n\r\n componentWillLoad() {\r\n if (this.initialMainSize) {\r\n this.mainSize = this.initialMainSize;\r\n }\r\n }\r\n\r\n componentDidUpdate() {\r\n this.updateFocusTrap();\r\n }\r\n\r\n disconnectedCallback() {\r\n this.overlayFocustrap?.deactivate();\r\n this.filterpanelFocustrap?.deactivate();\r\n\r\n this.host.removeEventListener(\"keydown\", this.keyDownListener);\r\n }\r\n\r\n private handleFilterpanelApply(mouseEvent: MouseEvent) {\r\n this.dsoFilterpanelApply.emit({ originalEvent: mouseEvent });\r\n }\r\n\r\n private handleFilterpanelCancel(mouseEvent: MouseEvent) {\r\n this.dsoFilterpanelCancel.emit({ originalEvent: mouseEvent });\r\n }\r\n\r\n render() {\r\n return (\r\n <Host {...{ [this.mainSize]: true }}>\r\n <div class=\"dso-map-panel\" ref={(element) => (this.mapPanel = element)}>\r\n <div class=\"sizing-buttons\">\r\n <span class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\r\n breedte tekstpaneel: {this.sizeLabelMap[this.mainSize]}\r\n </span>\r\n <button type=\"button\" class=\"shrink\" disabled={this.mainSize === \"small\"} onClick={this.shrinkMain}>\r\n <span class=\"sr-only\">Kaartpaneel smaller maken</span>\r\n <dso-icon icon=\"chevron-left\"></dso-icon>\r\n </button>\r\n <button type=\"button\" class=\"expand\" disabled={this.mainSize === \"large\"} onClick={this.expandMain}>\r\n <span class=\"sr-only\">Kaartpaneel breder maken</span>\r\n <dso-icon icon=\"chevron-right\"></dso-icon>\r\n </button>\r\n </div>\r\n <div class=\"main\">\r\n <slot name=\"main\" />\r\n </div>\r\n </div>\r\n <div\r\n id=\"filterpanel\"\r\n class=\"filterpanel\"\r\n hidden={!this.filterpanelOpen || !this.filterpanelSlot}\r\n ref={(element) => (this.filterpanel = element)}\r\n >\r\n <h1>Uw keuzes</h1>\r\n <ViewerGridFilterpanelButtons\r\n onApply={(e) => this.handleFilterpanelApply(e)}\r\n onCancel={(e) => this.handleFilterpanelCancel(e)}\r\n />\r\n <slot name=\"filterpanel\" />\r\n <ViewerGridFilterpanelButtons\r\n onApply={(e) => this.handleFilterpanelApply(e)}\r\n onCancel={(e) => this.handleFilterpanelCancel(e)}\r\n />\r\n </div>\r\n <div class=\"map\">\r\n <slot name=\"map\" />\r\n </div>\r\n <div hidden={!this.overlayOpen || !this.overlaySlot} class=\"dimscreen\"></div>\r\n <div\r\n class=\"overlay\"\r\n hidden={!this.overlayOpen || !this.overlaySlot}\r\n ref={(element) => (this.overlay = element)}\r\n >\r\n <button type=\"button\" class=\"overlay-close-button\" onClick={(e) => this.dsoCloseOverlay.emit(e)}>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n <span class=\"sr-only\">sluiten</span>\r\n </button>\r\n <slot name=\"overlay\" />\r\n {/* This button is needed for the `focus-trap` library to function correctly. It is never focused. */}\r\n <button aria-hidden=\"true\" type=\"button\" class=\"overlay-close-button\" style={{ zIndex: \"-100\" }}>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n <span class=\"sr-only\">sluiten</span>\r\n </button>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}

package/dist/collection/index.js CHANGED Viewed

@@ -1,23 +1,3 @@
-export * from "./components/accordion/accordion.interfaces";
-export * from "./components/annotation-output/annotation-output.interfaces";
-export * from "./components/autosuggest/autosuggest.interfaces";
-export * from "./components/card/card.interfaces";
-export * from "./components/date-picker/date-picker.interfaces";
-export * from "./components/expandable/expandable.interfaces";
-export * from "./components/expandable-heading/expandable-heading.interfaces";
-export * from "./components/header/header.interfaces";
-export * from "./components/info-button/info-button.interfaces";
-export * from "./components/list-button/list-button.interfaces";
-export * from "./components/map-base-layers/map-base-layers.interfaces";
-export * from "./components/map-controls/map-controls.interfaces";
-export * from "./components/map-overlays/map-overlays.interfaces";
-export * from "./components/modal/modal.interfaces";
-export * from "./components/ozon-content/ozon-content.interfaces";
-export * from "./components/pagination/pagination.interfaces";
-export * from "./components/responsive-element/responsive-element.interfaces";
-export * from "./components/scrollable/scrollable.interfaces";
-export * from "./components/selectable/selectable.interfaces";
-export * from "./components/slide-toggle/slide-toggle.interfaces";
-export * from "./components/tree-view/tree-view.interfaces";
-export * from "./components/viewer-grid/viewer-grid.interfaces";
+export * from "./components";
 export * from "./components/modal/modal.controller";
+//# sourceMappingURL=index.js.map

package/dist/collection/index.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAE7B,cAAc,qCAAqC,CAAC","sourcesContent":["export * from \"./components\";\r\n\r\nexport * from \"./components/modal/modal.controller\";\r\n"]}

package/dist/collection/services/annotation.service.js CHANGED Viewed

@@ -14,3 +14,4 @@ export class AnnotationService {
     AnnotationService._state = state;
   }
 }
+//# sourceMappingURL=annotation.service.js.map

package/dist/collection/services/annotation.service.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"annotation.service.js","sourceRoot":"","sources":["../../src/services/annotation.service.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAM7C,MAAM,OAAgB,iBAAiB;EAGrC,MAAM,KAAK,KAAK;IACd,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;MAChB,iBAAiB,CAAC,eAAe,EAAE,CAAC;KACrC;IAED,OAAO,IAAI,CAAC,MAAM,CAAC;EACrB,CAAC;EAED,MAAM,CAAC,MAAM,CAAC,EAAU;IACtB,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;EACrC,CAAC;EAEO,MAAM,CAAC,eAAe;IAC5B,MAAM,EAAE,KAAK,EAAE,GAAG,WAAW,CAAkB,EAAE,CAAC,CAAC;IAEnD,iBAAiB,CAAC,MAAM,GAAG,KAAK,CAAC;EACnC,CAAC;CACF","sourcesContent":["import { createStore } from \"@stencil/store\";\r\n\r\ninterface AnnotationState {\r\n [key: string]: boolean;\r\n}\r\n\r\nexport abstract class AnnotationService {\r\n private static _state: AnnotationState;\r\n\r\n static get state(): AnnotationState {\r\n if (!this._state) {\r\n AnnotationService.initializeStore();\r\n }\r\n\r\n return this._state;\r\n }\r\n\r\n static toggle(id: string): void {\r\n this._state[id] = !this._state[id];\r\n }\r\n\r\n private static initializeStore(): void {\r\n const { state } = createStore<AnnotationState>({});\r\n\r\n AnnotationService._state = state;\r\n }\r\n}\r\n"]}

package/dist/collection/utils/create-identifier.js CHANGED Viewed

@@ -11,3 +11,4 @@ export function chr4() {
 export function createIdentifier(prefix) {
   return `${prefix}-${chr4()}${chr4()}-${chr4()}-${chr4()}-${chr4()}-${chr4()}${chr4()}${chr4()}`;
 }
+//# sourceMappingURL=create-identifier.js.map

package/dist/collection/utils/create-identifier.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"create-identifier.js","sourceRoot":"","sources":["../../src/utils/create-identifier.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,UAAU,IAAI;EAClB,OAAO,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;AAC9C,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,gBAAgB,CAAC,MAAc;EAC7C,OAAO,GAAG,MAAM,IAAI,IAAI,EAAE,GAAG,IAAI,EAAE,IAAI,IAAI,EAAE,IAAI,IAAI,EAAE,IAAI,IAAI,EAAE,IAAI,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,IAAI,EAAE,EAAE,CAAC;AAClG,CAAC","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"]}

package/dist/collection/utils/has-overflow.js CHANGED Viewed

@@ -5,3 +5,4 @@ export function hasOverflow(el) {
   const overflowValues = ["hidden", "clip"];
   return overflowValues.indexOf(overflowX) !== -1 || overflowValues.indexOf(overflowY) !== -1;
 }
+//# sourceMappingURL=has-overflow.js.map

package/dist/collection/utils/has-overflow.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"has-overflow.js","sourceRoot":"","sources":["../../src/utils/has-overflow.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,WAAW,CAAC,EAAW;EACrC,MAAM,KAAK,GAAG,MAAM,CAAC,gBAAgB,CAAC,EAAE,CAAC,CAAC;EAC1C,MAAM,SAAS,GAAG,KAAK,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC;EACvD,MAAM,SAAS,GAAG,KAAK,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC;EACvD,MAAM,cAAc,GAAG,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;EAC1C,OAAO,cAAc,CAAC,OAAO,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,IAAI,cAAc,CAAC,OAAO,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;AAC9F,CAAC","sourcesContent":["export function hasOverflow(el: Element): boolean {\r\n const style = window.getComputedStyle(el);\r\n const overflowX = style.getPropertyValue(\"overflow-x\");\r\n const overflowY = style.getPropertyValue(\"overflow-y\");\r\n const overflowValues = [\"hidden\", \"clip\"];\r\n return overflowValues.indexOf(overflowX) !== -1 || overflowValues.indexOf(overflowY) !== -1;\r\n}\r\n"]}

package/dist/collection/utils/is-interactive-element.js CHANGED Viewed

@@ -4,3 +4,4 @@ export const isInteractiveElement = (element) => {
     element instanceof HTMLInputElement ||
     element.tagName.startsWith("DSO-TOGGLETIP"));
 };
+//# sourceMappingURL=is-interactive-element.js.map

package/dist/collection/utils/is-interactive-element.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"is-interactive-element.js","sourceRoot":"","sources":["../../src/utils/is-interactive-element.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,OAAoB,EAAW,EAAE;EACpE,OAAO,CACL,OAAO,YAAY,iBAAiB;IACpC,OAAO,YAAY,iBAAiB;IACpC,OAAO,YAAY,gBAAgB;IACnC,OAAO,CAAC,OAAO,CAAC,UAAU,CAAC,eAAe,CAAC,CAC5C,CAAC;AACJ,CAAC,CAAC","sourcesContent":["export const isInteractiveElement = (element: HTMLElement): boolean => {\r\n return (\r\n element instanceof HTMLButtonElement ||\r\n element instanceof HTMLAnchorElement ||\r\n element instanceof HTMLInputElement ||\r\n element.tagName.startsWith(\"DSO-TOGGLETIP\")\r\n );\r\n};\r\n"]}

package/dist/collection/utils/is-modified-event.js CHANGED Viewed

@@ -1,2 +1,3 @@
 /** returns `true` when the event is triggered while holding Ctrl, Alt or other modifiers, or on right-click. Can be used to determine navigation. */
 export const isModifiedEvent = (e) => e.button !== 0 || e.ctrlKey || e.shiftKey || e.altKey || e.metaKey;
+//# sourceMappingURL=is-modified-event.js.map

package/dist/collection/utils/is-modified-event.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"is-modified-event.js","sourceRoot":"","sources":["../../src/utils/is-modified-event.ts"],"names":[],"mappings":"AAAA,qJAAqJ;AACrJ,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,CAAa,EAAW,EAAE,CACxD,CAAC,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,MAAM,IAAI,CAAC,CAAC,OAAO,CAAC","sourcesContent":["/** returns `true` when the event is triggered while holding Ctrl, Alt or other modifiers, or on right-click. Can be used to determine navigation. */\r\nexport const isModifiedEvent = (e: MouseEvent): boolean =>\r\n e.button !== 0 || e.ctrlKey || e.shiftKey || e.altKey || e.metaKey;\r\n"]}

package/dist/components/annotation.service.js CHANGED Viewed

@@ -17,3 +17,5 @@ class AnnotationService {
 }
 export { AnnotationService as A };
+//# sourceMappingURL=annotation.service.js.map

package/dist/components/annotation.service.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"annotation.service.js","mappings":";;MAMsB,iBAAiB;EAGrC,WAAW,KAAK;IACd,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;MAChB,iBAAiB,CAAC,eAAe,EAAE,CAAC;KACrC;IAED,OAAO,IAAI,CAAC,MAAM,CAAC;GACpB;EAED,OAAO,MAAM,CAAC,EAAU;IACtB,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;GACpC;EAEO,OAAO,eAAe;IAC5B,MAAM,EAAE,KAAK,EAAE,GAAG,WAAW,CAAkB,EAAE,CAAC,CAAC;IAEnD,iBAAiB,CAAC,MAAM,GAAG,KAAK,CAAC;GAClC;;;;;","names":[],"sources":["./src/services/annotation.service.ts"],"sourcesContent":["import { createStore } from \"@stencil/store\";\r\n\r\ninterface AnnotationState {\r\n [key: string]: boolean;\r\n}\r\n\r\nexport abstract class AnnotationService {\r\n private static _state: AnnotationState;\r\n\r\n static get state(): AnnotationState {\r\n if (!this._state) {\r\n AnnotationService.initializeStore();\r\n }\r\n\r\n return this._state;\r\n }\r\n\r\n static toggle(id: string): void {\r\n this._state[id] = !this._state[id];\r\n }\r\n\r\n private static initializeStore(): void {\r\n const { state } = createStore<AnnotationState>({});\r\n\r\n AnnotationService._state = state;\r\n }\r\n}\r\n"],"version":3}

package/dist/components/clsx.m.js CHANGED Viewed

@@ -1,3 +1,5 @@
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 export { clsx as c };
+//# sourceMappingURL=clsx.m.js.map

package/dist/components/clsx.m.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"clsx.m.js","mappings":"AAAA,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,QAAQ,EAAE,OAAO,CAAC,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,GAAG,QAAQ,EAAE,OAAO,CAAC,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAQ,SAAS,IAAI,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;;;;","names":[],"sources":["../../node_modules/clsx/dist/clsx.m.js"],"sourcesContent":["function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=\" \"),n+=f);else for(t in e)e[t]&&(n&&(n+=\" \"),n+=t);return n}export function clsx(){for(var e,t,f=0,n=\"\";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=\" \"),n+=t);return n}export default clsx;"],"version":3}

package/dist/components/create-identifier.js CHANGED Viewed

@@ -13,3 +13,5 @@ function createIdentifier(prefix) {
 }
 export { createIdentifier as c };
+//# sourceMappingURL=create-identifier.js.map

package/dist/components/create-identifier.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"create-identifier.js","mappings":"AAAA;;;SAGgB,IAAI;EAClB,OAAO,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;AAC9C,CAAC;AAED;;;;SAIgB,gBAAgB,CAAC,MAAc;EAC7C,OAAO,GAAG,MAAM,IAAI,IAAI,EAAE,GAAG,IAAI,EAAE,IAAI,IAAI,EAAE,IAAI,IAAI,EAAE,IAAI,IAAI,EAAE,IAAI,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,IAAI,EAAE,EAAE,CAAC;AAClG;;;;","names":[],"sources":["./src/utils/create-identifier.ts"],"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"],"version":3}

package/dist/components/custom-elements.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from "./index.js";
2	+ export * from "../types";

package/dist/components/dropdown-menu.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { v as v4 } from './v4.js';
 const dropdownMenuCss = ":host(:focus){outline:none}:host{display:inline-block}";
-const DropdownMenu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const DropdownMenu = /*@__PURE__*/ proxyCustomElement(class DropdownMenu extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -175,10 +175,10 @@ const DropdownMenu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     if (this.open) {
       this.host.addEventListener("keydown", this.keyDownListener);
     }
-    this.tabbables.forEach((tabbable) => {
-      tabbable.removeEventListener("click", this.escape);
+    this.tabbables.forEach((focusableElement) => {
+      focusableElement.removeEventListener("click", this.escape);
       if (this.open) {
-        tabbable.addEventListener("click", this.escape);
+        focusableElement.addEventListener("click", this.escape);
       }
     });
   }
@@ -242,3 +242,5 @@ function defineCustomElement() {
 }
 export { DropdownMenu as D, defineCustomElement as d };
+//# sourceMappingURL=dropdown-menu.js.map

package/dist/components/dropdown-menu.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"dropdown-menu.js","mappings":"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","names":["uuidv4"],"sources":["./src/components/dropdown-menu/dropdown-menu.scss?tag=dso-dropdown-menu&encapsulation=shadow","./src/components/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/components/dropdown-menu\";\r\n\r\n:host(:focus) {\r\n outline: none;\r\n}\r\n\r\n:host {\r\n @include dropdown-menu.root();\r\n}\r\n","import { createPopper, Instance as PopperInstance } from \"@popperjs/core\";\r\nimport { h, Component, Element, Host, Prop, Watch } from \"@stencil/core\";\r\nimport { FocusableElement, tabbable } from \"tabbable\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { hasOverflow } from \"../../utils/has-overflow\";\r\n\r\n@Component({\r\n tag: \"dso-dropdown-menu\",\r\n styleUrl: \"dropdown-menu.scss\",\r\n shadow: true,\r\n})\r\nexport class DropdownMenu {\r\n /**\r\n * Whether the menu is open or closed.\r\n * This attribute is reflected and mutable.\r\n */\r\n @Prop({ reflect: true, mutable: true })\r\n open = false;\r\n\r\n /**\r\n * Alignment of the dropdown\r\n */\r\n @Prop()\r\n dropdownAlign: \"left\" | \"right\" = \"left\";\r\n\r\n /**\r\n * Space between button and dropdown options\r\n */\r\n @Prop()\r\n dropdownOptionsOffset = 2;\r\n\r\n /**\r\n * Whether the menu is checkable.\r\n */\r\n @Prop()\r\n checkable = false;\r\n\r\n /**\r\n * Selector for the element the dropdown options should not be overflowing.\r\n */\r\n @Prop()\r\n boundary?: string;\r\n\r\n /**\r\n * Set position strategy of dropdown options\r\n */\r\n @Prop()\r\n strategy: \"auto\" | \"absolute\" | \"fixed\" = \"auto\";\r\n\r\n @Watch(\"dropdownAlign\")\r\n watchPosition() {\r\n if (!this.popper) {\r\n return;\r\n }\r\n\r\n this.popper.setOptions({\r\n placement: this.dropdownAlign === \"right\" ? \"bottom-end\" : \"bottom-start\",\r\n });\r\n }\r\n\r\n @Watch(\"dropdownOptionsOffset\")\r\n watchOptionsOffset() {\r\n this.popper?.setOptions({\r\n modifiers: [\r\n {\r\n name: \"offset\",\r\n options: {\r\n offset: [0, this.dropdownOptionsOffset],\r\n },\r\n },\r\n ],\r\n });\r\n }\r\n\r\n @Watch(\"strategy\")\r\n watchStrategy() {\r\n this.setStrategy();\r\n }\r\n\r\n private setStrategy() {\r\n if (!this.popper) {\r\n return;\r\n }\r\n\r\n if (this.strategy === \"absolute\" || this.strategy === \"fixed\") {\r\n this.popper.setOptions({\r\n strategy: this.strategy,\r\n });\r\n\r\n return;\r\n }\r\n\r\n let element: Element | null = this.host;\r\n\r\n const boundary = this.boundary || document;\r\n\r\n while (element && element.parentNode !== boundary) {\r\n element = element.parentNode instanceof ShadowRoot ? element.parentNode.host : element.parentElement;\r\n if (element !== null && hasOverflow(element)) {\r\n this.popper.setOptions({\r\n strategy: \"fixed\",\r\n });\r\n\r\n return;\r\n }\r\n }\r\n\r\n this.popper.setOptions({\r\n strategy: \"absolute\",\r\n });\r\n }\r\n\r\n @Element()\r\n host!: HTMLDsoDropdownMenuElement;\r\n\r\n private popper: PopperInstance | undefined;\r\n\r\n get button(): HTMLButtonElement {\r\n const button = this.host.querySelector('button[slot=\"toggle\"]');\r\n\r\n if (!(button instanceof HTMLButtonElement)) {\r\n throw new ReferenceError(\"Mandatory toggle button not found\");\r\n }\r\n\r\n return button;\r\n }\r\n\r\n get tabbables(): FocusableElement[] {\r\n return tabbable(this.host).filter((e) => e !== this.button);\r\n }\r\n\r\n componentDidLoad() {\r\n this.button.setAttribute(\"aria-haspopup\", \"menu\");\r\n this.button.setAttribute(\"aria-expanded\", \"false\");\r\n if (!this.button.id) {\r\n this.button.id = uuidv4();\r\n }\r\n\r\n this.button.addEventListener(\"click\", () => {\r\n this.open = !this.open;\r\n });\r\n\r\n const options = this.host.querySelector(\".dso-dropdown-options\");\r\n if (!options) {\r\n throw new ReferenceError(\"Dropdown options not found\");\r\n }\r\n\r\n options.setAttribute(\"role\", \"menu\");\r\n options.setAttribute(\"aria-labelledby\", this.button.id);\r\n\r\n for (const ul of Array.from(this.host.getElementsByTagName(\"ul\"))) {\r\n ul.setAttribute(\"role\", \"group\");\r\n for (const li of Array.from(ul.getElementsByTagName(\"li\"))) {\r\n li.setAttribute(\"role\", \"none\");\r\n }\r\n }\r\n\r\n if (this.popper) {\r\n return;\r\n }\r\n\r\n const dropdownOptionsElement = this.host.querySelector(\".dso-dropdown-options\");\r\n\r\n if (!(dropdownOptionsElement instanceof HTMLElement)) {\r\n throw new Error(\"dropdown options element is not instanceof HTMLElement\");\r\n }\r\n\r\n this.popper = createPopper(this.button, dropdownOptionsElement, {\r\n placement: this.dropdownAlign === \"right\" ? \"bottom-end\" : \"bottom-start\",\r\n modifiers: [\r\n {\r\n name: \"offset\",\r\n options: {\r\n offset: [0, this.dropdownOptionsOffset],\r\n },\r\n },\r\n {\r\n name: \"preventOverflow\",\r\n options: {\r\n boundary: this.boundary ? document.querySelector(this.boundary) : null,\r\n },\r\n enabled: this.boundary !== undefined,\r\n },\r\n ],\r\n });\r\n }\r\n\r\n componentDidRender() {\r\n this.setStrategy();\r\n if (this.open) {\r\n this.popper?.update();\r\n }\r\n\r\n for (const li of Array.from(this.host.getElementsByTagName(\"li\"))) {\r\n for (const tab of tabbable(li)) {\r\n tab.setAttribute(\"role\", this.checkable ? \"menuitemradio\" : \"menuitem\");\r\n\r\n if (this.checkable) {\r\n tab.setAttribute(\"aria-checked\", li.classList.contains(\"dso-checked\").toString());\r\n }\r\n }\r\n }\r\n\r\n this.host.removeEventListener(\"keydown\", this.keyDownListener);\r\n this.button.setAttribute(\"aria-expanded\", this.open ? \"true\" : \"false\");\r\n if (this.open) {\r\n this.host.addEventListener(\"keydown\", this.keyDownListener);\r\n }\r\n\r\n this.tabbables.forEach((focusableElement) => {\r\n focusableElement.removeEventListener(\"click\", this.escape);\r\n if (this.open) {\r\n focusableElement.addEventListener(\"click\", this.escape);\r\n }\r\n });\r\n }\r\n\r\n disconnectedCallback() {\r\n this.popper?.destroy();\r\n }\r\n\r\n private focusOutListener = (event: FocusEvent) => {\r\n if (!this.tabbables.includes(event.relatedTarget as FocusableElement)) {\r\n this.open = false;\r\n }\r\n };\r\n\r\n private keyDownListener = (event: KeyboardEvent) => {\r\n if (event.defaultPrevented) {\r\n return;\r\n }\r\n\r\n switch (event.key) {\r\n case \"ArrowDown\":\r\n this.tabInPopup(1);\r\n break;\r\n\r\n case \"ArrowUp\":\r\n this.tabInPopup(-1);\r\n break;\r\n\r\n case \"Escape\":\r\n this.escape();\r\n break;\r\n\r\n case \" \":\r\n if (event.target instanceof HTMLElement) {\r\n event.target.click();\r\n }\r\n\r\n break;\r\n\r\n default:\r\n return;\r\n }\r\n\r\n event.preventDefault();\r\n };\r\n\r\n private getActiveElement(root: Document | ShadowRoot = document): Element | null {\r\n const activeEl = root.activeElement;\r\n\r\n if (!activeEl) {\r\n return null;\r\n }\r\n\r\n if (activeEl.shadowRoot) {\r\n return this.getActiveElement(activeEl.shadowRoot);\r\n }\r\n\r\n return activeEl;\r\n }\r\n\r\n private tabInPopup(direction: number) {\r\n const tabs = this.tabbables;\r\n const currentIndex = tabs.findIndex((e) => e === this.getActiveElement());\r\n\r\n let nextIndex = currentIndex + direction;\r\n if (nextIndex >= tabs.length) {\r\n nextIndex = 0;\r\n } else if (nextIndex < 0) {\r\n nextIndex = tabs.length - 1;\r\n }\r\n\r\n tabs[nextIndex]?.focus();\r\n }\r\n\r\n private escape = () => {\r\n this.button.focus();\r\n this.open = false;\r\n };\r\n\r\n render() {\r\n return (\r\n <Host onFocusout={this.focusOutListener} tabindex={this.open ? \"-1\" : undefined}>\r\n <slot name=\"toggle\" />\r\n <div hidden={!this.open}>\r\n <slot />\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/dso-accordion-section.js CHANGED Viewed

@@ -1,9 +1,9 @@
-import { h, proxyCustomElement, HTMLElement as HTMLElement$1, forceUpdate, Host, Fragment } from '@stencil/core/internal/client';
+import { h, proxyCustomElement, HTMLElement, forceUpdate, Host, Fragment } from '@stencil/core/internal/client';
 import { d as defineCustomElement$3 } from './expandable.js';
 import { d as defineCustomElement$2 } from './icon.js';
 function isExpandable(element) {
-  return element instanceof HTMLElement && "getAnimeInstance" in element;
+  return element instanceof Element && element.tagName === "DSO-EXPANDABLE";
 }
 const stateMap = {
@@ -67,7 +67,7 @@ const HandleIcon = ({ state, icon, attachmentCount }) => {
 const accordionSectionCss = "*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}:host{display:block}:host .dso-section-handle{font-size:1em;font-weight:600;line-height:1.375em;margin:0;position:relative}:host .dso-section-handle>a:active{text-decoration:none}:host .dso-section-handle a{text-decoration:none}:host .dso-section-handle a:hover,:host .dso-section-handle a:focus{text-decoration:none}:host .dso-section-handle a:active{text-decoration:underline}:host .dso-section-handle .dso-status{font-weight:400;text-decoration:underline}:host .dso-section-handle>button,:host .dso-section-handle>a{align-items:flex-start;background-color:transparent;border:0;cursor:pointer;display:flex;font-family:Asap, sans-serif;font-size:1em;font-weight:600;line-height:1.375em;margin:0;padding:12px 16px 12px;text-align:start;width:100%;word-break:break-word}:host .dso-section-handle>button dso-icon,:host .dso-section-handle>a dso-icon{flex-shrink:0}:host .dso-section-handle>button dso-icon.dso-section-handle-chevron,:host .dso-section-handle>a dso-icon.dso-section-handle-chevron{transition:transform 260ms cubic-bezier(0.4, 0, 0.2, 1);transform:rotate(0)}:host .dso-section-handle>button>.dso-section-handle-addons:first-child,:host .dso-section-handle>button>dso-icon:first-child,:host .dso-section-handle>a>.dso-section-handle-addons:first-child,:host .dso-section-handle>a>dso-icon:first-child{margin-right:8px}:host .dso-section-handle>button>dso-icon:last-child,:host .dso-section-handle>a>dso-icon:last-child{margin-left:auto}:host .dso-section-handle>button>.dso-section-handle-addons:last-child,:host .dso-section-handle>a>.dso-section-handle-addons:last-child{margin-left:auto}:host .dso-section-handle>button>.dso-section-handle-addons:last-child dso-attachments-counter,:host .dso-section-handle>button>.dso-section-handle-addons:last-child dso-icon,:host .dso-section-handle>a>.dso-section-handle-addons:last-child dso-attachments-counter,:host .dso-section-handle>a>.dso-section-handle-addons:last-child dso-icon{margin-left:16px}:host([open]) .dso-section-handle>button .dso-section-handle-chevron:first-child,:host([open]) .dso-section-handle>a .dso-section-handle-chevron:first-child{transform:rotate(90deg)}:host([open]) .dso-section-handle>button .dso-section-handle-chevron:last-child,:host([open]) .dso-section-handle>a .dso-section-handle-chevron:last-child{transform:rotate(-180deg)}.dso-section-body{background-color:#fff;border-top:0;margin-top:-4px}.dso-section-body .dso-section-body-content{padding:20px 16px 16px}:host(.dso-accordion-default) .dso-section-handle{background-color:#fff;border:1px solid #8b4a6a;border-radius:4px}:host(.dso-accordion-default) .dso-section-handle a,:host(.dso-accordion-default) .dso-section-handle button{color:#8b4a6a}:host(.dso-accordion-default) .dso-section-handle a:hover,:host(.dso-accordion-default) .dso-section-handle a:active,:host(.dso-accordion-default) .dso-section-handle a.active,:host(.dso-accordion-default) .dso-section-handle button:hover,:host(.dso-accordion-default) .dso-section-handle button:active,:host(.dso-accordion-default) .dso-section-handle button.active{color:#8b4a6a}:host(.dso-accordion-default) .dso-section-body{border:1px solid #8b4a6a;border-radius:0 0 4px 4px}:host(.dso-accordion-default[open])>.dso-section-handle{background-color:#8b4a6a;border-radius:0;border-top-left-radius:4px;border-top-right-radius:4px}:host(.dso-accordion-default[open])>.dso-section-handle a,:host(.dso-accordion-default[open])>.dso-section-handle button{color:#fff}:host(.dso-accordion-default[open])>.dso-section-handle a dso-attachments-counter,:host(.dso-accordion-default[open])>.dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#fff;--dso-icon:var(--di-paperclip-wit)}:host(.dso-accordion-default.dso-nested-accordion[open]) .dso-section-body{background-color:#e5e5e5}:host(.dso-accordion-compact) .dso-section-handle{border-bottom:1px solid transparent;border-top:1px solid #ccc}:host(.dso-accordion-compact) .dso-section-handle a,:host(.dso-accordion-compact) .dso-section-handle button{color:#39870c;padding-bottom:11px;padding-left:0;padding-top:11px}:host(.dso-accordion-compact) .dso-section-handle a:hover,:host(.dso-accordion-compact) .dso-section-handle a:active,:host(.dso-accordion-compact) .dso-section-handle a.active,:host(.dso-accordion-compact) .dso-section-handle button:hover,:host(.dso-accordion-compact) .dso-section-handle button:active,:host(.dso-accordion-compact) .dso-section-handle button.active{color:#39870c}:host(.dso-accordion-compact) .dso-section-body .dso-section-body-content{padding-left:32px;padding-top:0;padding-right:0}:host(.dso-accordion-compact.dso-accordion-reverse-align) .dso-section-handle a,:host(.dso-accordion-compact.dso-accordion-reverse-align) .dso-section-handle button{padding-left:16px}:host(.dso-accordion-compact.dso-accordion-reverse-align) .dso-section-body .dso-section-body-content{padding-left:16px;padding-right:0}:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle{background-color:transparent}:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle a,:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle button{color:#39870c}:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle a:hover,:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle a:active,:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle a.active,:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle button:hover,:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle button:active,:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle button.active{color:#39870c}:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle a dso-attachments-counter,:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#666;--dso-icon:var(--di-paperclip-grijs)}:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-body{border-top:0}:host(.dso-accordion-compact.dso-nested-accordion[open])>.dso-section-body{padding-bottom:0}:host(.dso-accordion-compact.dso-nested-accordion[open])>.dso-section-body dso-accordion-section:last-child{border-bottom:0}:host(.dso-accordion-conclusion) .dso-section-handle{background-color:#f2f2f2;border:1px solid #f2f2f2}:host(.dso-accordion-conclusion) .dso-section-handle a,:host(.dso-accordion-conclusion) .dso-section-handle button{color:#000}:host(.dso-accordion-conclusion) .dso-section-handle a:hover,:host(.dso-accordion-conclusion) .dso-section-handle a:active,:host(.dso-accordion-conclusion) .dso-section-handle a.active,:host(.dso-accordion-conclusion) .dso-section-handle button:hover,:host(.dso-accordion-conclusion) .dso-section-handle button:active,:host(.dso-accordion-conclusion) .dso-section-handle button.active{background-color:#e5e5e5}:host(.dso-accordion-conclusion) .dso-section-handle a dso-attachments-counter,:host(.dso-accordion-conclusion) .dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#000;--dso-icon:var(--di-paperclip-zwart)}:host(.dso-accordion-conclusion) .dso-section-body{border:2px solid #f2f2f2}:host(.dso-accordion-conclusion[open]:not(.dso-nested-accordion))>.dso-section-handle{background-color:#f2f2f2}:host(.dso-accordion-conclusion.dso-nested-accordion[open]){background-color:#fff}:host(.dso-accordion-neutral) .dso-section-handle{background-color:transparent;border:none;border-radius:4px;margin-block-end:2px}:host(.dso-accordion-neutral) .dso-section-handle a,:host(.dso-accordion-neutral) .dso-section-handle button{color:#000;padding:5px 16px 5px 0}:host(.dso-accordion-neutral) .dso-section-handle a:hover,:host(.dso-accordion-neutral) .dso-section-handle a:active,:host(.dso-accordion-neutral) .dso-section-handle a.active,:host(.dso-accordion-neutral) .dso-section-handle button:hover,:host(.dso-accordion-neutral) .dso-section-handle button:active,:host(.dso-accordion-neutral) .dso-section-handle button.active{color:#000}:host(.dso-accordion-neutral) .dso-section-handle a .info-icon,:host(.dso-accordion-neutral) .dso-section-handle button .info-icon{color:#39870c;margin-inline-start:8px}:host(.dso-accordion-neutral) .dso-section-body{background-color:transparent;border:1px solid #275937;box-shadow:1px 3px 4px rgba(0, 0, 0, 0.5);margin-block:0}:host(.dso-accordion-neutral) .dso-section-body.dso-animate-ready{transition:margin-block 260ms cubic-bezier(0.4, 0, 0.2, 1)}:host(.dso-accordion-neutral) .dso-section-body .dso-section-body-content{padding:16px 32px 24px 32px}:host(.dso-accordion-neutral[open])>.dso-section-handle{background-color:transparant;border-radius:0;border-top-left-radius:4px;border-top-right-radius:4px}:host(.dso-accordion-neutral[open])>.dso-section-handle a,:host(.dso-accordion-neutral[open])>.dso-section-handle button{color:#000}:host(.dso-accordion-neutral[open])>.dso-section-handle a dso-attachments-counter,:host(.dso-accordion-neutral[open])>.dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#fff;--dso-icon:var(--di-paperclip-wit)}:host(.dso-accordion-neutral[open]) .dso-section-body{margin-block-end:16px;margin-block-start:2px}:host(.dso-accordion-neutral.dso-nested-accordion[open]) .dso-section-body{background-color:#e5e5e5}";
-const AccordionSection = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
+const AccordionSection = /*@__PURE__*/ proxyCustomElement(class AccordionSection extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -86,15 +86,16 @@ const AccordionSection = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
   componentWillLoad() {
     const accordion = this.host.parentElement;
     this.hasNestedSection = this.host.querySelector("dso-accordion") !== null;
-    if (isAccordion(accordion)) {
+    if (accordion && isAccordion(accordion)) {
       this.accordion = accordion;
-      accordion.getState().then((state) => {
+      accordion._getState().then((state) => {
         this.accordionState = state;
         forceUpdate(this.host);
       });
     }
   }
-  /** Toggle this section.
+  /**
+   * Toggle this section.
    * @param scrollIntoView boolean - defaults to true
    */
   async toggleSection(scrollIntoView = true) {
@@ -105,7 +106,9 @@ const AccordionSection = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
       }
     }));
   }
-  /** Scroll this section into view when needed. */
+  /**
+   * Scroll this section into view when needed.
+   */
   async scrollSectionIntoView() {
     await this.scrollIntoViewWhenNeeded(false);
   }
@@ -123,7 +126,7 @@ const AccordionSection = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     }
     const waitForAnimationBeforeScrolling = async (state) => {
       var _a, _b;
-      this.bodyHeight = await ((_a = this.expandable) === null || _a === void 0 ? void 0 : _a.getBodyHeight());
+      this.bodyHeight = await ((_a = this.expandable) === null || _a === void 0 ? void 0 : _a._getBodyHeight());
       const sectionBottomOffsetTop = this.host.offsetTop + headingClientRect.height + (this.open ? (_b = this.bodyHeight) !== null && _b !== void 0 ? _b : 0 : 0);
       return (sectionToggled && (sectionBottomOffsetTop > document.documentElement.scrollHeight || state.allowMultipleOpen));
     };
@@ -152,19 +155,19 @@ const AccordionSection = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
   }
   setAnimationBehaviour(event, section) {
     const expandableElement = event.target;
-    if (!(expandableElement instanceof HTMLElement$1)) {
+    if (!(expandableElement instanceof HTMLElement)) {
       return;
     }
     if (isExpandable(expandableElement)) {
       this.expandable = expandableElement;
-      this.expandable.getAnimeInstance().then((animeInstance) => {
+      this.expandable._getAnimeInstance().then((animeInstance) => {
         if (animeInstance) {
           animeInstance.changeComplete = async () => {
             if (!section) {
               return;
             }
             const accordion = section.parentElement;
-            if (isAccordion(accordion)) {
+            if (accordion && isAccordion(accordion)) {
               accordion === null || accordion === void 0 ? void 0 : accordion.animationEnd(section);
             }
             if (AccordionSection.scrollCandidate === this.host) {
@@ -194,7 +197,7 @@ const AccordionSection = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
         ["dso-accordion-" + variant]: true,
         "dso-nested-accordion": this.hasNestedSection,
         "dso-accordion-reverse-align": reverseAlign !== null && reverseAlign !== void 0 ? reverseAlign : false,
-      }, hidden: !variant, onMouseenter: () => (this.hover = true), onMouseleave: () => (this.hover = false) }, h(Handle, { heading: this.heading, ref: (element) => (this.sectionHeading = element) }, h(HandleElement, { handleUrl: this.handleUrl, onClick: async (event) => await this.toggle(event), open: this.open }, reverseAlign ? (h(Fragment, null, hasAddons && (h("div", { class: "dso-section-handle-addons" }, h(HandleIcon, { icon: this.icon }))), h("span", null, this.handleTitle), h("dso-icon", { class: "dso-section-handle-chevron", icon: "chevron-down" }))) : (h(Fragment, null, h("dso-icon", { class: "dso-section-handle-chevron", icon: "chevron-right" }), this.state && h("span", { class: "sr-only" }, stateMap[this.state]), h("span", null, this.handleTitle, this.isNeutral && (h("dso-icon", { class: "info-icon", icon: this.open || this.hover ? "info-active" : "info" }))), hasAddons && (h("div", { class: "dso-section-handle-addons" }, this.status && h("span", { class: "dso-status" }, this.status), h(HandleIcon, { state: this.state, icon: this.icon, attachmentCount: this.attachmentCount }))))))), h("dso-expandable", { class: "dso-section-body", open: this.open, enableAnimation: true, minimumHeight: this.isNeutral ? 0 : 4, onAnimationInstantiated: (e) => this.setAnimationBehaviour(e, this.host) }, h("div", { slot: "expandable-content", class: "dso-section-body-content", ref: (element) => (this.sectionBody = element) }, h("slot", null)))));
+      }, hidden: !variant, onMouseenter: () => (this.hover = true), onMouseleave: () => (this.hover = false) }, h(Handle, { heading: this.heading, ref: (element) => (this.sectionHeading = element) }, h(HandleElement, { handleUrl: this.handleUrl, onClick: async (event) => await this.toggle(event), open: this.open }, reverseAlign ? (h(Fragment, null, hasAddons && (h("div", { class: "dso-section-handle-addons" }, h(HandleIcon, { icon: this.icon }))), h("span", null, this.handleTitle), h("dso-icon", { class: "dso-section-handle-chevron", icon: "chevron-down" }))) : (h(Fragment, null, h("dso-icon", { class: "dso-section-handle-chevron", icon: "chevron-right" }), this.state && h("span", { class: "sr-only" }, stateMap[this.state]), h("span", null, this.handleTitle, this.isNeutral && (h("dso-icon", { class: "info-icon", icon: this.open || this.hover ? "info-active" : "info" }))), hasAddons && (h("div", { class: "dso-section-handle-addons" }, this.status && h("span", { class: "dso-status" }, this.status), h(HandleIcon, { state: this.state, icon: this.icon, attachmentCount: this.attachmentCount }))))))), h("dso-expandable", { class: "dso-section-body", open: this.open, enableAnimation: true, minimumHeight: this.isNeutral ? 0 : 4, on_animationInstantiated: (e) => this.setAnimationBehaviour(e, this.host) }, h("div", { slot: "expandable-content", class: "dso-section-body-content", ref: (element) => (this.sectionBody = element) }, h("slot", null)))));
   }
   get host() { return this; }
   static get style() { return accordionSectionCss; }
@@ -206,14 +209,14 @@ const AccordionSection = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     "attachmentCount": [2, "attachment-count"],
     "icon": [1],
     "status": [1],
-    "open": [1540],
+    "open": [516],
     "hasNestedSection": [32],
     "hover": [32],
     "toggleSection": [64],
     "scrollSectionIntoView": [64]
   }]);
 function isAccordion(element) {
-  return element instanceof HTMLElement$1 && "getState" in element;
+  return element.tagName === "DSO-ACCORDION";
 }
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
@@ -242,4 +245,6 @@ function defineCustomElement$1() {
 const DsoAccordionSection = AccordionSection;
 const defineCustomElement = defineCustomElement$1;
-export { DsoAccordionSection, defineCustomElement, isExpandable as i };
+export { DsoAccordionSection, defineCustomElement };
+//# sourceMappingURL=dso-accordion-section.js.map

package/dist/components/dso-accordion-section.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"dso-accordion-section.js","mappings":";;;;SAAgB,YAAY,CAAC,OAAuB;EAClD,OAAO,OAAO,YAAY,OAAO,IAAI,OAAO,CAAC,OAAO,KAAK,gBAAgB,CAAC;AAC5E;;ACEO,MAAM,QAAQ,GAA0C;EAC7D,OAAO,EAAE,SAAS;EAClB,IAAI,EAAE,OAAO;EACb,OAAO,EAAE,eAAe;EACxB,MAAM,EAAE,OAAO;EACf,KAAK,EAAE,OAAO;CACf;;ACRM,MAAM,aAAa,GAIrB,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,QAAQ;EAC1C,IAAI,SAAS,EAAE;IACb,QACE,SAAG,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,mBAAiB,IAAI,GAAG,MAAM,GAAG,OAAO,IACzE,QAAQ,CACP,EACJ;GACH;EAED,QACE,cAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,OAAO,mBAAiB,IAAI,GAAG,MAAM,GAAG,OAAO,IAC3E,QAAQ,CACF,EACT;AACJ,CAAC;;AChBM,MAAM,MAAM,GAGd,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,EAAE,QAAQ;EAC9B,QAAQ,OAAO;IACb,QAAQ;IACR,KAAK,IAAI;MACP,QACE,UAAI,GAAG,EAAE,GAAG,EAAE,KAAK,EAAC,oBAAoB,IACrC,QAAQ,CACN,EACL;IACJ,KAAK,IAAI;MACP,QACE,UAAI,GAAG,EAAE,GAAG,EAAE,KAAK,EAAC,oBAAoB,IACrC,QAAQ,CACN,EACL;IACJ,KAAK,IAAI;MACP,QACE,UAAI,GAAG,EAAE,GAAG,EAAE,KAAK,EAAC,oBAAoB,IACrC,QAAQ,CACN,EACL;IACJ,KAAK,IAAI;MACP,QACE,UAAI,GAAG,EAAE,GAAG,EAAE,KAAK,EAAC,oBAAoB,IACrC,QAAQ,CACN,EACL;GACL;AACH,CAAC;;AC/BM,MAAM,eAAe,GAA0D,CAAC,EAAE,KAAK,EAAE;EAC9F,IAAI,KAAK,KAAK,OAAO,EAAE;IACrB,OAAO,gBAAU,IAAI,EAAC,cAAc,GAAY,CAAC;GAClD;EAED,IAAI,KAAK,KAAK,QAAQ,EAAE;IACtB,OAAO,gBAAU,IAAI,EAAC,eAAe,GAAY,CAAC;GACnD;EAED,IAAI,KAAK,KAAK,SAAS,EAAE;IACvB,OAAO,gBAAU,IAAI,EAAC,gBAAgB,GAAY,CAAC;GACpD;EAED,IAAI,KAAK,KAAK,MAAM,EAAE;IACpB,OAAO,gBAAU,IAAI,EAAC,aAAa,GAAY,CAAC;GACjD;EAED,IAAI,KAAK,KAAK,SAAS,EAAE;IACvB,OAAO,gBAAU,IAAI,EAAC,gBAAgB,GAAY,CAAC;GACpD;AACH,CAAC;;ACnBM,MAAM,UAAU,GAIlB,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,eAAe,EAAE;EACpC,IAAI,KAAK,EAAE;IACT,OAAO,EAAC,eAAe,IAAC,KAAK,EAAE,KAAK,GAAI,CAAC;GAC1C;EAED,IAAI,eAAe,EAAE;IACnB,OAAO,+BAAyB,KAAK,EAAE,eAAe,GAA4B,CAAC;GACpF;EAED,IAAI,IAAI,EAAE;IACR,OAAO,gBAAU,IAAI,EAAE,IAAI,GAAa,CAAC;GAC1C;AACH,CAAC;;ACrBD,MAAM,mBAAmB,GAAG,q6SAAq6S;;MCuBp7S,gBAAgB;;;;;;mBA4BC,IAAI;;;;;;gBAoCzB,KAAK;4BAGO,KAAK;iBAGhB,KAAK;;EAEb,iBAAiB;IACf,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;IAE1C,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;IAE1E,IAAI,SAAS,IAAI,WAAW,CAAC,SAAS,CAAC,EAAE;MACvC,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;MAE3B,SAAS,CAAC,SAAS,EAAE,CAAC,IAAI,CAAC,CAAC,KAAK;QAC/B,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;QAC5B,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;OACxB,CAAC,CAAC;KACJ;GACF;;;;;EAOD,MAAM,aAAa,CAAC,cAAc,GAAG,IAAI;;IACvC,OAAM,MAAA,IAAI,CAAC,SAAS,0CAAE,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC;MAClD,IAAI,cAAc,EAAE;QAClB,MAAM,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,CAAC;OAC3C;KACF,CAAC,CAAA,CAAC;GACJ;;;;EAMD,MAAM,qBAAqB;IACzB,MAAM,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC;GAC5C;EAED,IAAI,SAAS;;IACX,OAAO,CAAA,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,MAAK,SAAS,CAAC;GACnD;EAEO,MAAM,wBAAwB,CAAC,cAAuB;;IAC5D,gBAAgB,CAAC,eAAe,GAAG,SAAS,CAAC;IAE7C,MAAM,cAAc,GAAG,MAAA,IAAI,CAAC,WAAW,0CAAE,qBAAqB,EAAE,CAAC;IACjE,MAAM,iBAAiB,GAAG,MAAA,IAAI,CAAC,cAAc,0CAAE,qBAAqB,EAAE,CAAC;IAEvE,IAAI,CAAC,cAAc,IAAI,CAAC,iBAAiB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;MACjE,OAAO;KACR;IAED,MAAM,+BAA+B,GAAG,OAAO,KAA6B;;MAC1E,IAAI,CAAC,UAAU,GAAG,OAAM,MAAA,IAAI,CAAC,UAAU,0CAAE,cAAc,EAAE,CAAA,CAAC;MAE1D,MAAM,sBAAsB,GAC1B,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,iBAAiB,CAAC,MAAM,IAAI,IAAI,CAAC,IAAI,GAAG,MAAA,IAAI,CAAC,UAAU,mCAAI,CAAC,GAAG,CAAC,CAAC,CAAC;MAE1F,QACE,cAAc,KAAK,sBAAsB,GAAG,QAAQ,CAAC,eAAe,CAAC,YAAY,IAAI,KAAK,CAAC,iBAAiB,CAAC,EAC7G;KACH,CAAC;IAEF,IAAI,MAAM,+BAA+B,CAAC,IAAI,CAAC,cAAc,CAAC,EAAE;MAC9D,gBAAgB,CAAC,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC;MAC7C,OAAO;KACR;;IAGD,MAAM,cAAc,GAAG,iBAAiB,CAAC,GAAG,GAAG,iBAAiB,CAAC,MAAM,IAAI,IAAI,CAAC,IAAI,GAAG,MAAA,IAAI,CAAC,UAAU,mCAAI,CAAC,GAAG,CAAC,CAAC,CAAC;IACjH,IAAI,cAAc,GAAG,MAAM,CAAC,WAAW,EAAE;MACvC,MAAM,uBAAuB,GAAG,cAAc,GAAG,iBAAiB,CAAC,GAAG,CAAC;MACvE,MAAM,0BAA0B,GAAG,uBAAuB,GAAG,MAAM,CAAC,WAAW,CAAC;MAEhF,MAAM,CAAC,QAAQ,CAAC;QACd,GAAG,EAAE,0BAA0B;YAC3B,IAAI,CAAC,IAAI,CAAC,SAAS;YACnB,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,MAAM,CAAC,WAAW,GAAG,uBAAuB,CAAC;QACxE,QAAQ,EAAE,QAAQ;OACnB,CAAC,CAAC;KACJ;SAAM,IAAI,iBAAiB,CAAC,GAAG,GAAG,CAAC,EAAE;MACpC,MAAM,CAAC,QAAQ,CAAC;QACd,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS;QACxB,QAAQ,EAAE,QAAQ;OACnB,CAAC,CAAC;KACJ;GACF;EAEO,qBAAqB,CAAC,KAAY,EAAE,OAAqB;IAC/D,MAAM,iBAAiB,GAAG,KAAK,CAAC,MAAM,CAAC;IAEvC,IAAI,EAAE,iBAAiB,YAAY,WAAW,CAAC,EAAE;MAC/C,OAAO;KACR;IAED,IAAI,YAAY,CAAC,iBAAiB,CAAC,EAAE;MACnC,IAAI,CAAC,UAAU,GAAG,iBAAiB,CAAC;MACpC,IAAI,CAAC,UAAU,CAAC,iBAAiB,EAAE,CAAC,IAAI,CAAC,CAAC,aAAa;QACrD,IAAI,aAAa,EAAE;UACjB,aAAa,CAAC,cAAc,GAAG;YAC7B,IAAI,CAAC,OAAO,EAAE;cACZ,OAAO;aACR;YAED,MAAM,SAAS,GAAG,OAAO,CAAC,aAAa,CAAC;YAExC,IAAI,SAAS,IAAI,WAAW,CAAC,SAAS,CAAC,EAAE;cACvC,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,YAAY,CAAC,OAAO,CAAC,CAAC;aAClC;YAED,IAAI,gBAAgB,CAAC,eAAe,KAAK,IAAI,CAAC,IAAI,EAAE;cAClD,gBAAgB,CAAC,eAAe,GAAG,SAAS,CAAC;cAC7C,MAAM,IAAI,CAAC,qBAAqB,EAAE,CAAC;aACpC;WACF,CAAC;SACH;OACF,CAAC,CAAC;KACJ;GACF;EAEO,MAAM,MAAM,CAAC,CAAc;;IACjC,CAAC,aAAD,CAAC,uBAAD,CAAC,CAAE,cAAc,EAAE,CAAC;IAEpB,MAAA,IAAI,CAAC,SAAS,0CAAE,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI,CAAC,OAAO,MAAM;MAC5D,IAAI,MAAM,EAAE;QACV,MAAM,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,CAAC;OAC3C;KACF,CAAC,CAAC;GACJ;EAED,MAAM;;IACJ,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,GAAG,MAAA,IAAI,CAAC,cAAc,mCAAI,EAAE,CAAC;IAC5D,MAAM,SAAS,GAAG,CAAC,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC;IAEzF,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,uBAAuB,EAAE,IAAI;QAC7B,CAAC,gBAAgB,GAAG,OAAO,GAAG,IAAI;QAClC,sBAAsB,EAAE,IAAI,CAAC,gBAAgB;QAC7C,6BAA6B,EAAE,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,KAAK;OACrD,EACD,MAAM,EAAE,CAAC,OAAO,EAChB,YAAY,EAAE,OAAO,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,EACvC,YAAY,EAAE,OAAO,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IAExC,EAAC,MAAM,IAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC,IAC9E,EAAC,aAAa,IACZ,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,OAAO,KAAK,KAAK,MAAM,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,EAClD,IAAI,EAAE,IAAI,CAAC,IAAI,IAEd,YAAY,IACX,EAAC,QAAQ,QACN,SAAS,KACR,WAAK,KAAK,EAAC,2BAA2B,IACpC,EAAC,UAAU,IAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CAC3B,CACP,EAED,gBAAO,IAAI,CAAC,WAAW,CAAQ,EAE/B,gBAAU,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,cAAc,GAAY,CACnE,KAEX,EAAC,QAAQ,QACP,gBAAU,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,eAAe,GAAY,EAE5E,IAAI,CAAC,KAAK,IAAI,YAAM,KAAK,EAAC,SAAS,IAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAQ,EAElE,gBACG,IAAI,CAAC,WAAW,EAChB,IAAI,CAAC,SAAS,KACb,gBAAU,KAAK,EAAC,WAAW,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,GAAG,aAAa,GAAG,MAAM,GAAI,CACvF,CACI,EAEN,SAAS,KACR,WAAK,KAAK,EAAC,2BAA2B,IACnC,IAAI,CAAC,MAAM,IAAI,YAAM,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,MAAM,CAAQ,EAC7D,EAAC,UAAU,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,eAAe,EAAE,IAAI,CAAC,eAAe,GAAI,CACrF,CACP,CACQ,CACZ,CACa,CACT,EACT,sBACE,KAAK,EAAC,kBAAkB,EACxB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,eAAe,QACf,aAAa,EAAE,IAAI,CAAC,SAAS,GAAG,CAAC,GAAG,CAAC,EACrC,wBAAwB,EAAE,CAAC,CAAQ,KAAK,IAAI,CAAC,qBAAqB,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,IAEhF,WACE,IAAI,EAAC,oBAAoB,EACzB,KAAK,EAAC,0BAA0B,EAChC,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC,IAE9C,eAAQ,CACJ,CACS,CACZ,EACP;GACH;;;;;;;;;;;;;;;;;AAGH,SAAS,WAAW,CAAC,OAAgB;EACnC,OAAO,OAAO,CAAC,OAAO,KAAK,eAAe,CAAC;AAC7C,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/expandable/expandable.functions.ts","./src/components/accordion/components/accordion-section.interfaces.ts","./src/components/accordion/components/handles/element.handle.tsx","./src/components/accordion/components/handles/heading.handle.tsx","./src/components/accordion/components/handles/state-icon.handle.tsx","./src/components/accordion/components/handles/icon.handle.tsx","./src/components/accordion/components/accordion-section.scss?tag=dso-accordion-section&encapsulation=shadow","./src/components/accordion/components/accordion-section.tsx"],"sourcesContent":["export function isExpandable(element: Element | null): element is HTMLDsoExpandableElement {\r\n return element instanceof Element && element.tagName === \"DSO-EXPANDABLE\";\r\n}\r\n","export type AccordionSectionState = \"success\" | \"info\" | \"warning\" | \"danger\" | \"error\";\r\n\r\nexport type AccordionHeading = \"h2\" | \"h3\" | \"h4\" | \"h5\";\r\n\r\nexport const stateMap: Record<AccordionSectionState, string> = {\r\n success: \"succes:\",\r\n info: \"info:\",\r\n warning: \"waarschuwing:\",\r\n danger: \"fout:\",\r\n error: \"fout:\",\r\n};\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nexport const HandleElement: FunctionalComponent<{\r\n handleUrl: string | undefined;\r\n open: boolean;\r\n onClick: (e: MouseEvent) => void;\r\n}> = ({ handleUrl, onClick, open }, children) => {\r\n if (handleUrl) {\r\n return (\r\n <a href={handleUrl} onClick={onClick} aria-expanded={open ? \"true\" : \"false\"}>\r\n {children}\r\n </a>\r\n );\r\n }\r\n\r\n return (\r\n <button type=\"button\" onClick={onClick} aria-expanded={open ? \"true\" : \"false\"}>\r\n {children}\r\n </button>\r\n );\r\n};\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { AccordionHeading } from \"../accordion-section.interfaces\";\r\n\r\nexport const Handle: FunctionalComponent<{\r\n heading: AccordionHeading;\r\n ref: (element: HTMLHeadingElement | undefined) => void;\r\n}> = ({ heading, ref }, children) => {\r\n switch (heading) {\r\n default:\r\n case \"h2\":\r\n return (\r\n <h2 ref={ref} class=\"dso-section-handle\">\r\n {children}\r\n </h2>\r\n );\r\n case \"h3\":\r\n return (\r\n <h3 ref={ref} class=\"dso-section-handle\">\r\n {children}\r\n </h3>\r\n );\r\n case \"h4\":\r\n return (\r\n <h4 ref={ref} class=\"dso-section-handle\">\r\n {children}\r\n </h4>\r\n );\r\n case \"h5\":\r\n return (\r\n <h5 ref={ref} class=\"dso-section-handle\">\r\n {children}\r\n </h5>\r\n );\r\n }\r\n};\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { AccordionSectionState } from \"../accordion-section.interfaces\";\r\n\r\nexport const HandleStateIcon: FunctionalComponent<{ state: AccordionSectionState }> = ({ state }) => {\r\n if (state === \"error\") {\r\n return <dso-icon icon=\"status-error\"></dso-icon>;\r\n }\r\n\r\n if (state === \"danger\") {\r\n return <dso-icon icon=\"status-danger\"></dso-icon>;\r\n }\r\n\r\n if (state === \"success\") {\r\n return <dso-icon icon=\"status-success\"></dso-icon>;\r\n }\r\n\r\n if (state === \"info\") {\r\n return <dso-icon icon=\"status-info\"></dso-icon>;\r\n }\r\n\r\n if (state === \"warning\") {\r\n return <dso-icon icon=\"status-warning\"></dso-icon>;\r\n }\r\n};\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { AccordionSectionState } from \"../accordion-section.interfaces\";\r\nimport { HandleStateIcon } from \"./state-icon.handle\";\r\n\r\nexport const HandleIcon: FunctionalComponent<{\r\n state?: AccordionSectionState;\r\n icon?: string;\r\n attachmentCount?: number;\r\n}> = ({ state, icon, attachmentCount }) => {\r\n if (state) {\r\n return <HandleStateIcon state={state} />;\r\n }\r\n\r\n if (attachmentCount) {\r\n return <dso-attachments-counter count={attachmentCount}></dso-attachments-counter>;\r\n }\r\n\r\n if (icon) {\r\n return <dso-icon icon={icon}></dso-icon>;\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/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n\r\n@use \"~dso-toolkit/src/components/accordion\";\r\n@use \"~dso-toolkit/src/components/anchor\";\r\n\r\n@use \"accordion-section-theme-compact\";\r\n@use \"accordion-section-theme-conclusion\";\r\n@use \"accordion-section-theme-default\";\r\n@use \"accordion-section-theme-neutral\";\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:host {\r\n display: block;\r\n\r\n .dso-section-handle {\r\n font-size: 1em;\r\n font-weight: 600;\r\n line-height: accordion.$handle-line-height;\r\n margin: 0;\r\n position: relative;\r\n\r\n > a:active {\r\n text-decoration: none;\r\n }\r\n\r\n a {\r\n @include anchor.clean();\r\n }\r\n\r\n .dso-status {\r\n font-weight: 400;\r\n text-decoration: underline;\r\n }\r\n }\r\n\r\n .dso-section-handle > button,\r\n .dso-section-handle > a {\r\n align-items: flex-start;\r\n background-color: transparent;\r\n border: 0;\r\n cursor: pointer;\r\n display: flex;\r\n font-family: typography.$font-family-base;\r\n font-size: 1em;\r\n font-weight: 600;\r\n line-height: accordion.$handle-line-height;\r\n margin: 0;\r\n padding: accordion.$vertical-padding accordion.$horizontal-padding accordion.$vertical-padding;\r\n text-align: start;\r\n width: 100%;\r\n word-break: break-word;\r\n\r\n dso-icon {\r\n flex-shrink: 0;\r\n\r\n &.dso-section-handle-chevron {\r\n @include utilities.transition(transform);\r\n\r\n transform: rotate(0);\r\n }\r\n }\r\n\r\n > .dso-section-handle-addons:first-child,\r\n > dso-icon:first-child {\r\n margin-right: units.$u1;\r\n }\r\n\r\n > dso-icon:last-child {\r\n margin-left: auto;\r\n }\r\n\r\n > .dso-section-handle-addons:last-child {\r\n margin-left: auto;\r\n\r\n dso-attachments-counter,\r\n dso-icon {\r\n margin-left: 16px;\r\n }\r\n }\r\n }\r\n}\r\n\r\n:host([open]) {\r\n .dso-section-handle {\r\n > button,\r\n > a {\r\n .dso-section-handle-chevron {\r\n &:first-child {\r\n transform: rotate(90deg);\r\n }\r\n\r\n &:last-child {\r\n transform: rotate(-180deg);\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n.dso-section-body {\r\n background-color: colors.$wit;\r\n border-top: 0;\r\n margin-top: accordion.$border-radius * -1;\r\n\r\n .dso-section-body-content {\r\n padding: units.$u2 + accordion.$border-radius units.$u2 units.$u2;\r\n }\r\n}\r\n\r\n// Default\r\n:host(.dso-accordion-default) {\r\n @include accordion-section-theme-default.dso-web-component-accordion-default();\r\n}\r\n\r\n:host(.dso-accordion-default[open]) {\r\n @include accordion-section-theme-default.dso-web-component-accordion-default-open();\r\n}\r\n\r\n:host(.dso-accordion-default.dso-nested-accordion[open]) {\r\n @include accordion-section-theme-default.dso-web-component-accordion-default-open-nested();\r\n}\r\n\r\n// Compact\r\n:host(.dso-accordion-compact) {\r\n @include accordion-section-theme-compact.dso-web-component-accordion-compact();\r\n}\r\n\r\n:host(.dso-accordion-compact.dso-accordion-reverse-align) {\r\n @include accordion-section-theme-compact.dso-web-component-accordion-compact-reverse();\r\n}\r\n\r\n:host(.dso-accordion-compact[open]:not(.dso-nested-accordion)) {\r\n @include accordion-section-theme-compact.dso-web-component-accordion-compact-open();\r\n}\r\n\r\n:host(.dso-accordion-compact.dso-nested-accordion[open]) {\r\n @include accordion-section-theme-compact.dso-web-component-accordion-compact-open-nested();\r\n}\r\n\r\n// Conclusion\r\n:host(.dso-accordion-conclusion) {\r\n @include accordion-section-theme-conclusion.dso-web-component-accordion-conclusion();\r\n}\r\n\r\n:host(.dso-accordion-conclusion[open]:not(.dso-nested-accordion)) {\r\n @include accordion-section-theme-conclusion.dso-web-component-accordion-conclusion-open();\r\n}\r\n\r\n:host(.dso-accordion-conclusion.dso-nested-accordion[open]) {\r\n @include accordion-section-theme-conclusion.dso-web-component-accordion-conclusion-open-nested();\r\n}\r\n\r\n// Neutral\r\n:host(.dso-accordion-neutral) {\r\n @include accordion-section-theme-neutral.dso-web-component-accordion-neutral();\r\n}\r\n\r\n:host(.dso-accordion-neutral[open]) {\r\n @include accordion-section-theme-neutral.dso-web-component-accordion-neutral-open();\r\n}\r\n\r\n:host(.dso-accordion-neutral.dso-nested-accordion[open]) {\r\n @include accordion-section-theme-neutral.dso-web-component-accordion-neutral-open-nested();\r\n}\r\n","import {\r\n h,\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n forceUpdate,\r\n Fragment,\r\n Host,\r\n Method,\r\n Prop,\r\n State,\r\n} from \"@stencil/core\";\r\nimport { isExpandable } from \"../../expandable/expandable.functions\";\r\n\r\nimport { AccordionInternalState } from \"../accordion.interfaces\";\r\nimport { AccordionHeading, AccordionSectionState, stateMap } from \"./accordion-section.interfaces\";\r\nimport { Handle, HandleElement, HandleIcon } from \"./handles\";\r\n\r\n@Component({\r\n tag: \"dso-accordion-section\",\r\n styleUrl: \"accordion-section.scss\",\r\n shadow: true,\r\n})\r\nexport class AccordionSection implements ComponentInterface {\r\n private static scrollCandidate?: HTMLElement;\r\n\r\n private accordion?: HTMLDsoAccordionElement;\r\n\r\n private accordionState?: AccordionInternalState;\r\n\r\n private sectionBody?: HTMLDivElement;\r\n\r\n private sectionHeading?: HTMLHeadingElement;\r\n\r\n private bodyHeight?: number;\r\n\r\n private expandable?: HTMLDsoExpandableElement;\r\n\r\n @Element()\r\n host!: HTMLDsoAccordionSectionElement;\r\n\r\n /**\r\n * The title of the handle\r\n */\r\n @Prop()\r\n handleTitle?: string;\r\n\r\n /**\r\n * Which heading element to use.\r\n */\r\n @Prop()\r\n heading: AccordionHeading = \"h2\";\r\n\r\n /**\r\n * When set the handle will render as a `<a>`. When undefined it renders as a `<button>`\r\n */\r\n @Prop()\r\n handleUrl?: string;\r\n\r\n /**\r\n * `state` takes precedence over `attachmentCount` and `icon`\r\n */\r\n @Prop()\r\n state?: AccordionSectionState;\r\n\r\n /**\r\n * `attachmentCount` takes precedence over `icon`\r\n */\r\n @Prop()\r\n attachmentCount?: number;\r\n\r\n /**\r\n * To set an icon in the heading handle.\r\n */\r\n @Prop()\r\n icon?: string;\r\n\r\n /**\r\n * The status of the section.\r\n */\r\n @Prop()\r\n status?: string;\r\n\r\n /**\r\n * To open the Accordion Section.\r\n */\r\n @Prop({ reflect: true })\r\n open = false;\r\n\r\n @State()\r\n hasNestedSection = false;\r\n\r\n @State()\r\n hover = false;\r\n\r\n componentWillLoad() {\r\n const accordion = this.host.parentElement;\r\n\r\n this.hasNestedSection = this.host.querySelector(\"dso-accordion\") !== null;\r\n\r\n if (accordion && isAccordion(accordion)) {\r\n this.accordion = accordion;\r\n\r\n accordion._getState().then((state) => {\r\n this.accordionState = state;\r\n forceUpdate(this.host);\r\n });\r\n }\r\n }\r\n\r\n /**\r\n * Toggle this section.\r\n * @param scrollIntoView boolean - defaults to true\r\n */\r\n @Method()\r\n async toggleSection(scrollIntoView = true): Promise<void> {\r\n await this.accordion?.toggleSection(this.host).then(async () => {\r\n if (scrollIntoView) {\r\n await this.scrollIntoViewWhenNeeded(true);\r\n }\r\n });\r\n }\r\n\r\n /**\r\n * Scroll this section into view when needed.\r\n */\r\n @Method()\r\n async scrollSectionIntoView(): Promise<void> {\r\n await this.scrollIntoViewWhenNeeded(false);\r\n }\r\n\r\n get isNeutral() {\r\n return this.accordionState?.variant === \"neutral\";\r\n }\r\n\r\n private async scrollIntoViewWhenNeeded(sectionToggled: boolean): Promise<void> {\r\n AccordionSection.scrollCandidate = undefined;\r\n\r\n const bodyClientRect = this.sectionBody?.getBoundingClientRect();\r\n const headingClientRect = this.sectionHeading?.getBoundingClientRect();\r\n\r\n if (!bodyClientRect || !headingClientRect || !this.accordionState) {\r\n return;\r\n }\r\n\r\n const waitForAnimationBeforeScrolling = async (state: AccordionInternalState) => {\r\n this.bodyHeight = await this.expandable?._getBodyHeight();\r\n\r\n const sectionBottomOffsetTop =\r\n this.host.offsetTop + headingClientRect.height + (this.open ? this.bodyHeight ?? 0 : 0);\r\n\r\n return (\r\n sectionToggled && (sectionBottomOffsetTop > document.documentElement.scrollHeight || state.allowMultipleOpen)\r\n );\r\n };\r\n\r\n if (await waitForAnimationBeforeScrolling(this.accordionState)) {\r\n AccordionSection.scrollCandidate = this.host;\r\n return;\r\n }\r\n\r\n // this y is relative to the top of the viewport.\r\n const sectionBottomY = headingClientRect.top + headingClientRect.height + (this.open ? this.bodyHeight ?? 0 : 0);\r\n if (sectionBottomY > window.innerHeight) {\r\n const expandedAccordionHeight = sectionBottomY - headingClientRect.top;\r\n const shouldScrollToTopOfSection = expandedAccordionHeight > window.innerHeight;\r\n\r\n window.scrollTo({\r\n top: shouldScrollToTopOfSection\r\n ? this.host.offsetTop\r\n : this.host.offsetTop - (window.innerHeight - expandedAccordionHeight),\r\n behavior: \"smooth\",\r\n });\r\n } else if (headingClientRect.top < 0) {\r\n window.scrollTo({\r\n top: this.host.offsetTop,\r\n behavior: \"smooth\",\r\n });\r\n }\r\n }\r\n\r\n private setAnimationBehaviour(event: Event, section?: HTMLElement): void {\r\n const expandableElement = event.target;\r\n\r\n if (!(expandableElement instanceof HTMLElement)) {\r\n return;\r\n }\r\n\r\n if (isExpandable(expandableElement)) {\r\n this.expandable = expandableElement;\r\n this.expandable._getAnimeInstance().then((animeInstance) => {\r\n if (animeInstance) {\r\n animeInstance.changeComplete = async () => {\r\n if (!section) {\r\n return;\r\n }\r\n\r\n const accordion = section.parentElement;\r\n\r\n if (accordion && isAccordion(accordion)) {\r\n accordion?.animationEnd(section);\r\n }\r\n\r\n if (AccordionSection.scrollCandidate === this.host) {\r\n AccordionSection.scrollCandidate = undefined;\r\n await this.scrollSectionIntoView();\r\n }\r\n };\r\n }\r\n });\r\n }\r\n }\r\n\r\n private async toggle(e?: MouseEvent): Promise<void> {\r\n e?.preventDefault();\r\n\r\n this.accordion?.toggleSection(this.host, e).then(async (isOpen) => {\r\n if (isOpen) {\r\n await this.scrollIntoViewWhenNeeded(true);\r\n }\r\n });\r\n }\r\n\r\n render() {\r\n const { variant, reverseAlign } = this.accordionState ?? {};\r\n const hasAddons = !!this.status || !!this.state || !!this.icon || !!this.attachmentCount;\r\n\r\n return (\r\n <Host\r\n class={{\r\n \"dso-accordion-section\": true,\r\n [\"dso-accordion-\" + variant]: true,\r\n \"dso-nested-accordion\": this.hasNestedSection,\r\n \"dso-accordion-reverse-align\": reverseAlign ?? false,\r\n }}\r\n hidden={!variant}\r\n onMouseenter={() => (this.hover = true)}\r\n onMouseleave={() => (this.hover = false)}\r\n >\r\n <Handle heading={this.heading} ref={(element) => (this.sectionHeading = element)}>\r\n <HandleElement\r\n handleUrl={this.handleUrl}\r\n onClick={async (event) => await this.toggle(event)}\r\n open={this.open}\r\n >\r\n {reverseAlign ? (\r\n <Fragment>\r\n {hasAddons && (\r\n <div class=\"dso-section-handle-addons\">\r\n <HandleIcon icon={this.icon} />\r\n </div>\r\n )}\r\n\r\n <span>{this.handleTitle}</span>\r\n\r\n <dso-icon class=\"dso-section-handle-chevron\" icon=\"chevron-down\"></dso-icon>\r\n </Fragment>\r\n ) : (\r\n <Fragment>\r\n <dso-icon class=\"dso-section-handle-chevron\" icon=\"chevron-right\"></dso-icon>\r\n\r\n {this.state && <span class=\"sr-only\">{stateMap[this.state]}</span>}\r\n\r\n <span>\r\n {this.handleTitle}\r\n {this.isNeutral && (\r\n <dso-icon class=\"info-icon\" icon={this.open || this.hover ? \"info-active\" : \"info\"} />\r\n )}\r\n </span>\r\n\r\n {hasAddons && (\r\n <div class=\"dso-section-handle-addons\">\r\n {this.status && <span class=\"dso-status\">{this.status}</span>}\r\n <HandleIcon state={this.state} icon={this.icon} attachmentCount={this.attachmentCount} />\r\n </div>\r\n )}\r\n </Fragment>\r\n )}\r\n </HandleElement>\r\n </Handle>\r\n <dso-expandable\r\n class=\"dso-section-body\"\r\n open={this.open}\r\n enableAnimation\r\n minimumHeight={this.isNeutral ? 0 : 4}\r\n on_animationInstantiated={(e: Event) => this.setAnimationBehaviour(e, this.host)}\r\n >\r\n <div\r\n slot=\"expandable-content\"\r\n class=\"dso-section-body-content\"\r\n ref={(element) => (this.sectionBody = element)}\r\n >\r\n <slot />\r\n </div>\r\n </dso-expandable>\r\n </Host>\r\n );\r\n }\r\n}\r\n\r\nfunction isAccordion(element: Element): element is HTMLDsoAccordionElement {\r\n return element.tagName === \"DSO-ACCORDION\";\r\n}\r\n"],"version":3}