@dso-toolkit/core 73.2.1 → 73.3.0

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

@@ -9,10 +9,6 @@ export class Table {
          * Prevents the table being opened in a modal.
          */
         this.noModal = false;
-        /**
-         * Indicates whether the table is currently horizontally scrollable.
-         */
-        this.isResponsive = false;
         this.modalActive = false;
     }
     startResponsiveBehavior() {
@@ -33,9 +29,9 @@ export class Table {
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        var _a, _b;
+        var _a, _b, _c;
         const caption = (_b = (_a = this.host.querySelector(":scope > table > caption")) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim();
-        return (h(Host, { key: '597c45b1c1d9daadde1c9bc790b7ac82caf1e3e9' }, this.modalActive && this.placeholderHeight && (h("div", { key: '6528e1257071d1cc882aa6b306e4f237b456043c', class: "dso-table-placeholder", style: { height: `${this.placeholderHeight}px` } })), this.modalActive && h("div", { key: '74223087b6990b7bfad1c13c9fe6505a1cfadd11', class: "dso-modal-overlay" }), h("div", { key: '2002f85851eeb384959030ca56540605333c3048', class: { "dso-modal": this.modalActive } }, h("div", Object.assign({ key: 'b3149d97f99a51a27767111236571e3c62752ddb', class: { "dso-dialog": this.modalActive, "dso-table-dialog": true }, ref: (element) => (this.focusTrapElement = element) }, (this.modalActive ? { ["aria-labelledby"]: this.labelledbyId, role: "dialog" } : {})), (this.isResponsive || !this.noModal) && (h("div", { key: 'f8e00a412b6fcae44e39382efa095c7a1f10c814', class: "dso-table-utilities", style: this.modalActive ? { display: "none" } : undefined }, this.isResponsive && (h("div", { key: 'aa5ac11abd7549558f69f678fa525339432dc451', class: "dso-responsive-message" }, h("span", { key: '58dcb714e2f7cdadc33065b6d7313fb84a2e05cc' }, "beweeg de tabel van links naar rechts"))), !this.noModal && (h("button", { key: '9cfa4c5f22968b729b1c9ed81c8e07cd9d87f71c', type: "button", class: "dso-tertiary open-modal-button", ref: (element) => (this.buttonElement = element), onClick: () => this.openModal() }, h("span", { key: 'f6463df449b32b8ccea6cd9b5458a5773a2b685e', class: "sr-only" }, "tabel ", caption !== null && caption !== void 0 ? caption : "", " "), h("span", { key: 'ec916917ae6428412acb48416067b0f38e46a5cc' }, "vergroten"), h("dso-icon", { key: 'aea959472bcb120dfdbb860499b6c039896e6e87', icon: "external-link" }))))), this.modalActive && (h("div", { key: 'f31f95ea093300c6a567288410912e59bb1ed125', class: "dso-header" }, h("h2", { key: 'd52fa86bc4af3fd58d58860cba019bb7aa3308dc', id: this.labelledbyId, class: { "sr-only": !caption } }, caption || "Uitvergrote tabel dialoog"), h("button", { key: '51f618cedca322f7bd8aa05e8329f9642ef89d89', type: "button", class: "dso-close", onClick: () => this.closeModal() }, h("dso-icon", { key: '5a720c5e9ce84795f48704f3764dd3ec94ead23c', icon: "times" }), h("span", { key: '5f1c813c0d339242181429ebfd8a7d99778f6212', class: "sr-only" }, "Sluiten")))), h("div", { key: '3d25249e219aaec8178a10f3488899ab795325f9', class: { "dso-body": this.modalActive, "dso-table-body": true } }, h("slot", { key: '9249deaef3c3abde5a74b8af340c110a3e905bf4' }))))));
+        return (h(Host, { key: '2e3e36a2af519d04cc704561e1f96f32d8753c4b', "is-responsive": (_c = this.isResponsive) === null || _c === void 0 ? void 0 : _c.toString() }, this.modalActive && this.placeholderHeight && (h("div", { key: 'b91b4b4a9552f2b40dbcfe79cbcca31ea0d51747', class: "dso-table-placeholder", style: { height: `${this.placeholderHeight}px` } })), this.modalActive && h("div", { key: '12034faea5d74ae417241d8029575e93ab4d3d9d', class: "dso-modal-overlay" }), h("div", { key: 'cf5306514dbe5310b8ba0f13343dc78c9931d393', class: { "dso-modal": this.modalActive } }, h("div", Object.assign({ key: '823618582ff57f7469da084b8e4ac0f39c0e5b5f', class: { "dso-dialog": this.modalActive, "dso-table-dialog": true }, ref: (element) => (this.focusTrapElement = element) }, (this.modalActive ? { ["aria-labelledby"]: this.labelledbyId, role: "dialog" } : {})), (this.isResponsive || !this.noModal) && (h("div", { key: 'e39bd37081810df2506b1205c56d44193436c625', class: "dso-table-utilities", style: this.modalActive ? { display: "none" } : undefined }, this.isResponsive && (h("div", { key: '5578938c4e5070051d8bcaceb9327428195e48a7', class: "dso-responsive-message" }, h("span", { key: 'a5c126e5a8b6ccf1b15c6e57b663b1b702ae385e' }, "beweeg de tabel van links naar rechts"))), !this.noModal && (h("button", { key: '55764237e9959086b8e696959602646089616999', type: "button", class: "dso-tertiary open-modal-button", ref: (element) => (this.buttonElement = element), onClick: () => this.openModal() }, h("span", { key: '9d3b6669fbcb8fb2364472a792e662d02096178a', class: "sr-only" }, "tabel ", caption !== null && caption !== void 0 ? caption : "", " "), h("span", { key: '09f023589648b483cecb7de8c1691f1d85a4173a' }, "vergroten"), h("dso-icon", { key: '4474dbbee7d540ac6e68f0058166eab15732ea2c', icon: "external-link" }))))), this.modalActive && (h("div", { key: 'ccbf556d51530bc6d86b3ce66b7dd69b451fff3d', class: "dso-header" }, h("h2", { key: '39fe21305ac8a1df8cfa5ac3a5c56c067ead2a69', id: this.labelledbyId, class: { "sr-only": !caption } }, caption || "Uitvergrote tabel dialoog"), h("button", { key: '496c1135c8820f061642555d026da6f27cca5a9b', type: "button", class: "dso-close", onClick: () => this.closeModal() }, h("dso-icon", { key: '62704273cddf8e2524ce038ca0270010748eac6e', icon: "times" }), h("span", { key: '9e3220f8f696877cd568cfc85f36f39447b074ee', class: "sr-only" }, "Sluiten")))), h("div", { key: '6f0ab07376dffb6ccdb90e15e8aa9c94159207b6', class: { "dso-body": this.modalActive, "dso-table-body": true } }, h("slot", { key: '5471317311645d02906ae73e265ab6185aa3ceb3' }))))));
     }
     openModal() {
         this.placeholderHeight = this.host.clientHeight;
@@ -112,31 +108,12 @@ export class Table {
                 "setter": false,
                 "reflect": true,
                 "defaultValue": "false"
-            },
-            "isResponsive": {
-                "type": "boolean",
-                "attribute": "is-responsive",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Indicates whether the table is currently horizontally scrollable."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "defaultValue": "false"
             }
         };
     }
     static get states() {
         return {
+            "isResponsive": {},
             "modalActive": {},
             "placeholderHeight": {}
         };

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

@@ -1 +1 @@
-{"version":3,"file":"table.js","sourceRoot":"","sources":["../../../../src/components/table/table.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Element, Host, Prop, State, h } from \"@stencil/core\";\r\nimport debounce from \"debounce\";\r\nimport { FocusTrap, createFocusTrap } from \"focus-trap\";\r\nimport { v4 } from \"uuid\";\r\n\r\n@Component({\r\n  tag: \"dso-table\",\r\n  styleUrl: \"table.scss\",\r\n  shadow: true,\r\n})\r\nexport class Table implements ComponentInterface {\r\n  private resizeObserver?: ResizeObserver;\r\n\r\n  private focusTrapElement?: HTMLDivElement;\r\n\r\n  private buttonElement?: HTMLButtonElement;\r\n\r\n  private trap?: FocusTrap;\r\n\r\n  private labelledbyId = v4();\r\n\r\n  @Element()\r\n  host!: HTMLDsoTableElement;\r\n\r\n  /**\r\n   * Prevents the table being opened in a modal.\r\n   */\r\n  @Prop({ reflect: true })\r\n  noModal = false;\r\n\r\n  /**\r\n   * Indicates whether the table is currently horizontally scrollable.\r\n   */\r\n  @Prop({ reflect: true })\r\n  isResponsive = false;\r\n\r\n  @State()\r\n  modalActive = false;\r\n\r\n  @State()\r\n  placeholderHeight?: number;\r\n\r\n  private startResponsiveBehavior(): void {\r\n    this.resizeObserver?.observe(this.host);\r\n  }\r\n\r\n  componentWillLoad(): void {\r\n    this.resizeObserver = new ResizeObserver(debounce((entries) => this.setResponsiveTable(entries), 200));\r\n  }\r\n\r\n  componentDidLoad(): void {\r\n    this.startResponsiveBehavior();\r\n  }\r\n\r\n  componentDidRender() {\r\n    this.setFocusTrap();\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.resizeObserver?.disconnect();\r\n  }\r\n\r\n  render() {\r\n    const caption = this.host.querySelector(\":scope > table > caption\")?.textContent?.trim();\r\n\r\n    return (\r\n      <Host>\r\n        {this.modalActive && this.placeholderHeight && (\r\n          <div class=\"dso-table-placeholder\" style={{ height: `${this.placeholderHeight}px` }} />\r\n        )}\r\n\r\n        {this.modalActive && <div class=\"dso-modal-overlay\"></div>}\r\n\r\n        <div class={{ \"dso-modal\": this.modalActive }}>\r\n          <div\r\n            class={{ \"dso-dialog\": this.modalActive, \"dso-table-dialog\": true }}\r\n            ref={(element) => (this.focusTrapElement = element)}\r\n            {...(this.modalActive ? { [\"aria-labelledby\"]: this.labelledbyId, role: \"dialog\" } : {})}\r\n          >\r\n            {(this.isResponsive || !this.noModal) && (\r\n              <div class=\"dso-table-utilities\" style={this.modalActive ? { display: \"none\" } : undefined}>\r\n                {this.isResponsive && (\r\n                  <div class=\"dso-responsive-message\">\r\n                    <span>beweeg de tabel van links naar rechts</span>\r\n                  </div>\r\n                )}\r\n\r\n                {!this.noModal && (\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"dso-tertiary open-modal-button\"\r\n                    ref={(element) => (this.buttonElement = element)}\r\n                    onClick={() => this.openModal()}\r\n                  >\r\n                    <span class=\"sr-only\">tabel {caption ?? \"\"} </span>\r\n                    <span>vergroten</span>\r\n                    <dso-icon icon=\"external-link\"></dso-icon>\r\n                  </button>\r\n                )}\r\n              </div>\r\n            )}\r\n\r\n            {this.modalActive && (\r\n              <div class=\"dso-header\">\r\n                <h2 id={this.labelledbyId} class={{ \"sr-only\": !caption }}>\r\n                  {caption || \"Uitvergrote tabel dialoog\"}\r\n                </h2>\r\n                <button type=\"button\" class=\"dso-close\" onClick={() => this.closeModal()}>\r\n                  <dso-icon icon=\"times\"></dso-icon>\r\n                  <span class=\"sr-only\">Sluiten</span>\r\n                </button>\r\n              </div>\r\n            )}\r\n\r\n            <div class={{ \"dso-body\": this.modalActive, \"dso-table-body\": true }}>\r\n              <slot></slot>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  private openModal() {\r\n    this.placeholderHeight = this.host.clientHeight;\r\n    this.modalActive = true;\r\n  }\r\n\r\n  private closeModal() {\r\n    this.placeholderHeight = undefined;\r\n    this.modalActive = false;\r\n  }\r\n\r\n  private setFocusTrap() {\r\n    if (this.modalActive && this.focusTrapElement && !this.trap) {\r\n      this.trap = createFocusTrap([this.host, this.focusTrapElement], {\r\n        escapeDeactivates: true,\r\n        clickOutsideDeactivates: (e) => {\r\n          if (e instanceof MouseEvent && e.composedPath()[0] === this.focusTrapElement) {\r\n            this.closeModal();\r\n\r\n            return false;\r\n          }\r\n\r\n          return true;\r\n        },\r\n        setReturnFocus: this.buttonElement ?? false,\r\n        onDeactivate: () => this.closeModal(),\r\n        tabbableOptions: {\r\n          getShadowRoot: true,\r\n        },\r\n      }).activate();\r\n    } else if (!this.modalActive && this.trap) {\r\n      this.trap?.deactivate();\r\n\r\n      delete this.trap;\r\n    }\r\n  }\r\n\r\n  private setResponsiveTable([dsoTable]: ResizeObserverEntry[]): void {\r\n    if (!dsoTable) {\r\n      throw new Error(\"No dsoTable found\");\r\n    }\r\n\r\n    const tableElement = dsoTable.target.querySelector(\"table\");\r\n\r\n    if (dsoTable && tableElement instanceof HTMLTableElement) {\r\n      this.isResponsive =\r\n        Math.floor(tableElement.getBoundingClientRect().width) > Math.floor(dsoTable.contentRect.width);\r\n    }\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"table.js","sourceRoot":"","sources":["../../../../src/components/table/table.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Element, Host, Prop, State, h } from \"@stencil/core\";\r\nimport debounce from \"debounce\";\r\nimport { FocusTrap, createFocusTrap } from \"focus-trap\";\r\nimport { v4 } from \"uuid\";\r\n\r\n@Component({\r\n  tag: \"dso-table\",\r\n  styleUrl: \"table.scss\",\r\n  shadow: true,\r\n})\r\nexport class Table implements ComponentInterface {\r\n  private resizeObserver?: ResizeObserver;\r\n\r\n  private focusTrapElement?: HTMLDivElement;\r\n\r\n  private buttonElement?: HTMLButtonElement;\r\n\r\n  private trap?: FocusTrap;\r\n\r\n  private labelledbyId = v4();\r\n\r\n  @Element()\r\n  host!: HTMLDsoTableElement;\r\n\r\n  /**\r\n   * Prevents the table being opened in a modal.\r\n   */\r\n  @Prop({ reflect: true })\r\n  noModal = false;\r\n\r\n  @State()\r\n  isResponsive?: boolean;\r\n\r\n  @State()\r\n  modalActive = false;\r\n\r\n  @State()\r\n  placeholderHeight?: number;\r\n\r\n  private startResponsiveBehavior(): void {\r\n    this.resizeObserver?.observe(this.host);\r\n  }\r\n\r\n  componentWillLoad(): void {\r\n    this.resizeObserver = new ResizeObserver(debounce((entries) => this.setResponsiveTable(entries), 200));\r\n  }\r\n\r\n  componentDidLoad(): void {\r\n    this.startResponsiveBehavior();\r\n  }\r\n\r\n  componentDidRender() {\r\n    this.setFocusTrap();\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.resizeObserver?.disconnect();\r\n  }\r\n\r\n  render() {\r\n    const caption = this.host.querySelector(\":scope > table > caption\")?.textContent?.trim();\r\n\r\n    return (\r\n      <Host is-responsive={this.isResponsive?.toString()}>\r\n        {this.modalActive && this.placeholderHeight && (\r\n          <div class=\"dso-table-placeholder\" style={{ height: `${this.placeholderHeight}px` }} />\r\n        )}\r\n\r\n        {this.modalActive && <div class=\"dso-modal-overlay\"></div>}\r\n\r\n        <div class={{ \"dso-modal\": this.modalActive }}>\r\n          <div\r\n            class={{ \"dso-dialog\": this.modalActive, \"dso-table-dialog\": true }}\r\n            ref={(element) => (this.focusTrapElement = element)}\r\n            {...(this.modalActive ? { [\"aria-labelledby\"]: this.labelledbyId, role: \"dialog\" } : {})}\r\n          >\r\n            {(this.isResponsive || !this.noModal) && (\r\n              <div class=\"dso-table-utilities\" style={this.modalActive ? { display: \"none\" } : undefined}>\r\n                {this.isResponsive && (\r\n                  <div class=\"dso-responsive-message\">\r\n                    <span>beweeg de tabel van links naar rechts</span>\r\n                  </div>\r\n                )}\r\n\r\n                {!this.noModal && (\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"dso-tertiary open-modal-button\"\r\n                    ref={(element) => (this.buttonElement = element)}\r\n                    onClick={() => this.openModal()}\r\n                  >\r\n                    <span class=\"sr-only\">tabel {caption ?? \"\"} </span>\r\n                    <span>vergroten</span>\r\n                    <dso-icon icon=\"external-link\"></dso-icon>\r\n                  </button>\r\n                )}\r\n              </div>\r\n            )}\r\n\r\n            {this.modalActive && (\r\n              <div class=\"dso-header\">\r\n                <h2 id={this.labelledbyId} class={{ \"sr-only\": !caption }}>\r\n                  {caption || \"Uitvergrote tabel dialoog\"}\r\n                </h2>\r\n                <button type=\"button\" class=\"dso-close\" onClick={() => this.closeModal()}>\r\n                  <dso-icon icon=\"times\"></dso-icon>\r\n                  <span class=\"sr-only\">Sluiten</span>\r\n                </button>\r\n              </div>\r\n            )}\r\n\r\n            <div class={{ \"dso-body\": this.modalActive, \"dso-table-body\": true }}>\r\n              <slot></slot>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  private openModal() {\r\n    this.placeholderHeight = this.host.clientHeight;\r\n    this.modalActive = true;\r\n  }\r\n\r\n  private closeModal() {\r\n    this.placeholderHeight = undefined;\r\n    this.modalActive = false;\r\n  }\r\n\r\n  private setFocusTrap() {\r\n    if (this.modalActive && this.focusTrapElement && !this.trap) {\r\n      this.trap = createFocusTrap([this.host, this.focusTrapElement], {\r\n        escapeDeactivates: true,\r\n        clickOutsideDeactivates: (e) => {\r\n          if (e instanceof MouseEvent && e.composedPath()[0] === this.focusTrapElement) {\r\n            this.closeModal();\r\n\r\n            return false;\r\n          }\r\n\r\n          return true;\r\n        },\r\n        setReturnFocus: this.buttonElement ?? false,\r\n        onDeactivate: () => this.closeModal(),\r\n        tabbableOptions: {\r\n          getShadowRoot: true,\r\n        },\r\n      }).activate();\r\n    } else if (!this.modalActive && this.trap) {\r\n      this.trap?.deactivate();\r\n\r\n      delete this.trap;\r\n    }\r\n  }\r\n\r\n  private setResponsiveTable([dsoTable]: ResizeObserverEntry[]): void {\r\n    if (!dsoTable) {\r\n      throw new Error(\"No dsoTable found\");\r\n    }\r\n\r\n    const tableElement = dsoTable.target.querySelector(\"table\");\r\n\r\n    if (dsoTable && tableElement instanceof HTMLTableElement) {\r\n      this.isResponsive =\r\n        Math.floor(tableElement.getBoundingClientRect().width) > Math.floor(dsoTable.contentRect.width);\r\n    }\r\n  }\r\n}\r\n"]}

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

@@ -194,14 +194,14 @@ const AccordionSection = /*@__PURE__*/ proxyCustomElement(class AccordionSection
         const { variant, reverseAlign } = (_a = this.accordionState) !== null && _a !== void 0 ? _a : {};
         const hasAddons = !!this.statusDescription || !!this.status || !!this.icon || !!this.attachmentCount;
         const showSlideToggle = this.activatable && variant === "compact-black" && !reverseAlign;
-        return (h(Host, { key: '4b8933f4a7224bc4c4faeeb7952b85e0f8abc6b1', class: {
+        return (h(Host, { key: '303ebed8d1cac413142a54fa6eec261f0bd6d993', class: {
                 "dso-accordion-section": true,
-                ["dso-accordion-" + variant]: true,
+                ["dso-accordion-" + variant]: !!variant,
                 "dso-nested-accordion": this.hasNestedAccordion || this.containsNestedAccordion,
                 "dso-accordion-reverse-align": reverseAlign !== null && reverseAlign !== void 0 ? reverseAlign : false,
                 ["dso-accordion-wijzigactie-" + this.wijzigactie]: !!this.wijzigactie,
                 "dso-accordion-section-activate": showSlideToggle,
-            }, hidden: !variant, onMouseenter: () => (this.hover = true), onMouseleave: () => (this.hover = false) }, h(Handle, { key: '790f4fbb2a06e78be36e714becc606771ea6422e', heading: this.heading, ref: (element) => (this.sectionHeading = element) }, h(HandleElement, { key: '9aa838b5a1f7129161f58e7a67aec6b2923ae319', handleUrl: this.handleUrl, onClick: this.handleClick, open: this.open, showSlideToggle: showSlideToggle, active: this.active, onActiveChange: this.handleActiveChange, handleElementRef: (e) => (this.handleElementRef = e) }, reverseAlign ? (h(Fragment, null, this.icon && (h("div", { class: "dso-section-handle-addons" }, h(HandleIcon, { icon: this.icon }))), h("dso-renvooi", { value: this.handleTitle }), this.label && (h("dso-label", { status: this.labelStatus, compact: true }, this.label)), h("div", { class: "dso-section-handle-addons" }, this.statusDescription && h("span", { class: "dso-status" }, this.statusDescription), 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.status && h("span", { class: "sr-only" }, stateMap[this.status]), h("span", null, h("dso-renvooi", { value: this.handleTitle }), this.isNeutral && (h("dso-icon", { class: "info-icon", icon: this.open || this.hover ? "info-active" : "info" }))), this.label && (h("dso-label", { status: this.labelStatus, compact: true }, this.label)), hasAddons && (h("div", { class: "dso-section-handle-addons" }, this.statusDescription && h("span", { class: "dso-status" }, this.statusDescription), h(HandleIcon, { state: this.status, icon: this.icon, attachmentCount: this.attachmentCount }))))))), h("dso-expandable", { key: '816c9ecfcfcea8ecc3c35606fd64111da5b61366', class: "dso-section-body", open: this.open, enableAnimation: true, minimumHeight: this.isNeutral ? 0 : 4, onDsoExpandableAnimationStart: this.handleExpandableAnimationStart, onDsoExpandableAnimationEnd: this.handleExpandableAnimationEnd }, h("div", { key: '54c23da5a0d25bc29fce23ba44fe7277b2b387d7', class: "dso-section-body-content", ref: (element) => (this.sectionBody = element) }, h("slot", { key: 'd9f1d30c186c5f3e0613e1fded58f5ba0f6e70ca' })))));
+            }, hidden: !variant, onMouseenter: () => (this.hover = true), onMouseleave: () => (this.hover = false) }, h(Handle, { key: '9c928e6f05951e7918ef5031f368f91c3da9c83a', heading: this.heading, ref: (element) => (this.sectionHeading = element) }, h(HandleElement, { key: '2655d9059f74522be03ad988ed91785da5ef6ade', handleUrl: this.handleUrl, onClick: this.handleClick, open: this.open, showSlideToggle: showSlideToggle, active: this.active, onActiveChange: this.handleActiveChange, handleElementRef: (e) => (this.handleElementRef = e) }, reverseAlign ? (h(Fragment, null, this.icon && (h("div", { class: "dso-section-handle-addons" }, h(HandleIcon, { icon: this.icon }))), h("dso-renvooi", { value: this.handleTitle }), this.label && (h("dso-label", { status: this.labelStatus, compact: true }, this.label)), h("div", { class: "dso-section-handle-addons" }, this.statusDescription && h("span", { class: "dso-status" }, this.statusDescription), 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.status && h("span", { class: "sr-only" }, stateMap[this.status]), h("span", null, h("dso-renvooi", { value: this.handleTitle }), this.isNeutral && (h("dso-icon", { class: "info-icon", icon: this.open || this.hover ? "info-active" : "info" }))), this.label && (h("dso-label", { status: this.labelStatus, compact: true }, this.label)), hasAddons && (h("div", { class: "dso-section-handle-addons" }, this.statusDescription && h("span", { class: "dso-status" }, this.statusDescription), h(HandleIcon, { state: this.status, icon: this.icon, attachmentCount: this.attachmentCount }))))))), h("dso-expandable", { key: '0033e8900a7f7c2b521f6ec0528d4bb80b98c85f', class: "dso-section-body", open: this.open, enableAnimation: true, minimumHeight: this.isNeutral ? 0 : 4, onDsoExpandableAnimationStart: this.handleExpandableAnimationStart, onDsoExpandableAnimationEnd: this.handleExpandableAnimationEnd }, h("div", { key: '8b87250e1310e61b9e9a344f0b57bb5deea5e18c', class: "dso-section-body-content", ref: (element) => (this.sectionBody = element) }, h("slot", { key: '1c346b660c4a417a81ac1ecb242c2e90f6a1974a' })))));
     }
     get host() { return this; }
     static get style() { return accordionSectionCss; }

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

@@ -1 +1 @@
-{"file":"dso-accordion-section.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/accordion/components/accordion-section.interfaces.ts","src/components/accordion/components/accordion-section.scss?tag=dso-accordion-section&encapsulation=shadow","src/components/accordion/components/accordion-section.tsx"],"sourcesContent":["export type AccordionSectionState = \"success\" | \"info\" | \"warning\" | \"danger\" | \"error\";\r\n\r\nexport type AccordionHeading = \"h2\" | \"h3\" | \"h4\" | \"h5\";\r\n\r\nexport type AccordionSectionWijzigactie = \"voegtoe\" | \"verwijder\";\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\r\nexport interface AccordionSectionToggleClickEvent {\r\n  /**\r\n   * The original MouseEvent that triggered the click.\r\n   *\r\n   * In case the Section Handle is an <a> this event can be used to preventDefault() so the framework router is reponsible for navigating the user.\r\n   */\r\n  originalEvent?: MouseEvent;\r\n\r\n  /**\r\n   * The requested state. If the Accordion Section is closed, `open = true`.\r\n   */\r\n  open: boolean;\r\n}\r\n\r\nexport interface AccordionSectionAnimationStartEvent {\r\n  /**\r\n   * Helper function to scroll the Accordion Section into view.\r\n   */\r\n  scrollIntoView(behavior?: ScrollBehavior): void;\r\n\r\n  /**\r\n   * Whether or not the Accordion opening or closing.\r\n   */\r\n  animation: \"opening\" | \"closing\";\r\n}\r\n\r\nexport interface AccordionSectionAnimationEndEvent {\r\n  /**\r\n   * Helper function to scroll the Accordion Section into view.\r\n   */\r\n  scrollIntoView(behavior?: ScrollBehavior): void;\r\n\r\n  /**\r\n   * The state of the Accordion Section after animation.\r\n   */\r\n  open: boolean;\r\n}\r\n\r\nexport interface AccordionSectionActiveChangeEvent {\r\n  /**\r\n   * De current status van de Accordion Section.\r\n   */\r\n  current: boolean;\r\n\r\n  /**\r\n   * De desired status van de Accordion Section.\r\n   */\r\n  next: boolean;\r\n\r\n  originalEvent: Event;\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/link\";\r\n\r\n@use \"accordion-section-theme-compact\";\r\n@use \"accordion-section-theme-compact-black\";\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 link.clean();\r\n    }\r\n\r\n    .dso-status {\r\n      color: colors.$zwart;\r\n      font-size: typography.$font-size-small;\r\n      font-weight: 400;\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-block: accordion.$block-padding;\r\n    padding-inline: accordion.$inline-padding;\r\n    text-align: start;\r\n    inline-size: 100%;\r\n    overflow-wrap: anywhere;\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-inline-end: units.$u1;\r\n    }\r\n\r\n    > dso-icon:last-child {\r\n      margin-inline-start: auto;\r\n    }\r\n\r\n    > .dso-section-handle-addons:last-child {\r\n      margin-inline-start: auto;\r\n\r\n      dso-attachments-counter,\r\n      dso-icon {\r\n        margin-inline-start: units.$u1;\r\n      }\r\n    }\r\n\r\n    > dso-label {\r\n      margin-inline-start: auto;\r\n      padding-inline-start: units.$u1;\r\n      word-break: normal;\r\n\r\n      & + dso-icon:last-child,\r\n      & + .dso-section-handle-addons:last-child {\r\n        margin-inline-start: units.$u1;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n:host([open]:not([open=\"false\"])) {\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-block-start: 0;\r\n\r\n  .dso-section-body-content {\r\n    padding-block: units.$u2 + accordion.$border-radius units.$u2;\r\n    padding-inline: 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]:not([open=\"false\"])) {\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]:not([open=\"false\"])) {\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([open=\"false\"]):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]:not([open=\"false\"])) {\r\n  @include accordion-section-theme-compact.dso-web-component-accordion-compact-open-nested();\r\n}\r\n\r\n// Compact black\r\n:host(.dso-accordion-compact-black) {\r\n  @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black();\r\n}\r\n\r\n:host(.dso-accordion-compact-black.dso-accordion-section-activate) {\r\n  @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black();\r\n  @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black-activate();\r\n}\r\n\r\n:host(.dso-accordion-compact-black.dso-accordion-wijzigactie-voegtoe) {\r\n  @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black-voegtoe();\r\n}\r\n\r\n:host(.dso-accordion-compact-black.dso-accordion-wijzigactie-verwijder) {\r\n  @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black-verwijder();\r\n}\r\n\r\n:host(.dso-accordion-compact-black.dso-accordion-reverse-align) {\r\n  @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black-reverse();\r\n}\r\n\r\n:host(.dso-accordion-compact-black[open]:not([open=\"false\"])) {\r\n  @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black-open();\r\n}\r\n\r\n:host(.dso-accordion-compact-black.dso-nested-accordion[open]:not([open=\"false\"])) {\r\n  @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black-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([open=\"false\"]):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]:not([open=\"false\"])) {\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]:not([open=\"false\"])) {\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]:not([open=\"false\"])) {\r\n  @include accordion-section-theme-neutral.dso-web-component-accordion-neutral-open-nested();\r\n}\r\n","import {\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  FunctionalComponent,\r\n  Host,\r\n  Method,\r\n  Prop,\r\n  State,\r\n  forceUpdate,\r\n  h,\r\n} from \"@stencil/core\";\r\n\r\nimport { DsoSlideToggleCustomEvent } from \"../../../components\";\r\nimport { ExpandableAnimationEndEvent } from \"../../expandable/expandable\";\r\nimport { LabelStatus } from \"../../label/label.interfaces\";\r\nimport { RenvooiValue } from \"../../renvooi/renvooi.interfaces\";\r\nimport { SlideToggleActiveEvent } from \"../../slide-toggle/slide-toggle.interfaces\";\r\nimport { AccordionInternalState } from \"../accordion.interfaces\";\r\n\r\nimport {\r\n  AccordionHeading,\r\n  AccordionSectionActiveChangeEvent,\r\n  AccordionSectionAnimationEndEvent,\r\n  AccordionSectionAnimationStartEvent,\r\n  AccordionSectionState,\r\n  AccordionSectionToggleClickEvent,\r\n  AccordionSectionWijzigactie,\r\n  stateMap,\r\n} from \"./accordion-section.interfaces\";\r\n\r\n// eslint-disable-next-line no-console\r\nconst log = (window as any)[\"_dsoLog\"] === true ? console.log.bind(console.log) : function () {};\r\n\r\nconst HandleElement: FunctionalComponent<{\r\n  handleUrl: string | undefined;\r\n  open: boolean;\r\n  showSlideToggle: boolean;\r\n  active: boolean;\r\n  onActiveChange: (e: DsoSlideToggleCustomEvent<SlideToggleActiveEvent>) => void;\r\n  handleElementRef: (element: HTMLAnchorElement | HTMLButtonElement | undefined) => void;\r\n  onClick: (e: MouseEvent) => void;\r\n}> = ({ handleUrl, onClick, open, showSlideToggle, active, onActiveChange, handleElementRef }, children) => {\r\n  if (handleUrl) {\r\n    return (\r\n      <>\r\n        <a href={handleUrl} onClick={onClick} aria-expanded={open ? \"true\" : \"false\"} ref={handleElementRef}>\r\n          {children}\r\n        </a>\r\n        {showSlideToggle && (\r\n          <dso-slide-toggle accessibleLabel=\"Toon op kaart\" checked={active} onDsoActiveChange={onActiveChange} />\r\n        )}\r\n      </>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <>\r\n      <button type=\"button\" onClick={onClick} aria-expanded={open ? \"true\" : \"false\"} ref={handleElementRef}>\r\n        {children}\r\n      </button>\r\n      {showSlideToggle && (\r\n        <dso-slide-toggle accessibleLabel=\"Toon op kaart\" checked={active} onDsoActiveChange={onActiveChange} />\r\n      )}\r\n    </>\r\n  );\r\n};\r\n\r\nconst 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\r\nconst 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\r\nconst 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\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 accordionState?: AccordionInternalState;\r\n\r\n  private sectionBody?: HTMLDivElement;\r\n\r\n  private sectionHeading?: HTMLHeadingElement;\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!: RenvooiValue | RenvooiValue[] | undefined;\r\n\r\n  /**\r\n   * An optional 'wijzigactie' that signals if the section is added or removed.\r\n   */\r\n  @Prop()\r\n  wijzigactie?: AccordionSectionWijzigactie;\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  status?: 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  statusDescription?: string;\r\n\r\n  /**\r\n   * Set the Accordion Section open.\r\n   */\r\n  @Prop({ reflect: true })\r\n  open = false;\r\n\r\n  /**\r\n   * Set when this Accordion Section contains or will contain an Accordion.\r\n   */\r\n  @Prop({ reflect: true })\r\n  hasNestedAccordion = false;\r\n\r\n  /**\r\n   * The label to be displayed in the heading handle inside a Label (optional)\r\n   */\r\n  @Prop()\r\n  label?: string;\r\n\r\n  /**\r\n   * The status of the Label in the heading handle (optional)\r\n   */\r\n  @Prop()\r\n  labelStatus?: LabelStatus;\r\n\r\n  /**\r\n   * A boolean to indicate if the Accordion Section is capable of being activated. When `true` a Slide Toggle displays\r\n   * on the right in the heading handle (optional). Works only for `variant` `compact-black` and `reverseAlign` false.\r\n   */\r\n  @Prop({ reflect: true })\r\n  activatable = false;\r\n\r\n  /**\r\n   * A boolean to indicate if the Accordion Section is `active`. Only applicable when the Accordion Section is\r\n   * `activatable`.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active = false;\r\n\r\n  /**\r\n   * An optional event listener for changes on the value of property `active`.\r\n   */\r\n  @Event()\r\n  dsoActiveChange!: EventEmitter<AccordionSectionActiveChangeEvent>;\r\n\r\n  /**\r\n   * Calling this method will set focus to the handle.\r\n   */\r\n  @Method()\r\n  async focusHandle() {\r\n    this.handleElementRef?.focus();\r\n  }\r\n\r\n  @State()\r\n  hover = false;\r\n\r\n  get containsNestedAccordion() {\r\n    return this.host.querySelector(\"dso-accordion\") !== null;\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.accordion?._getState().then((state) => {\r\n      this.accordionState = state;\r\n\r\n      forceUpdate(this.host);\r\n    });\r\n  }\r\n\r\n  get isNeutral() {\r\n    return this.accordionState?.variant === \"neutral\";\r\n  }\r\n\r\n  private async scrollIntoView(bodyHeight: number | undefined, behavior: ScrollBehavior = \"auto\"): Promise<void> {\r\n    log(\r\n      `DSO Toolkit [Accordion Section] scrollIntoView(bodyHeight: ${JSON.stringify(\r\n        bodyHeight,\r\n      )}, behavior: ${JSON.stringify(behavior)})`,\r\n    );\r\n\r\n    const bodyClientRect = this.sectionBody?.getBoundingClientRect();\r\n    const headingClientRect = this.sectionHeading?.getBoundingClientRect();\r\n\r\n    log(`DSO Toolkit [Accordion Section] const bodyClientRect = ${JSON.stringify(bodyClientRect)};`);\r\n    log(`DSO Toolkit [Accordion Section] const headingClientRect = ${JSON.stringify(headingClientRect)};`);\r\n    log(`DSO Toolkit [Accordion Section] this.accordionState = ${JSON.stringify(this.accordionState)};`);\r\n    log(`DSO Toolkit [Accordion Section] this.open = ${JSON.stringify(this.open)};`);\r\n\r\n    if (!bodyClientRect || !headingClientRect || !this.accordionState) {\r\n      log(`DSO Toolkit [Accordion Section] returning`);\r\n\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 ? (bodyHeight ?? 0) : 0);\r\n\r\n    log(`DSO Toolkit [Accordion Section] const sectionBottomY = ${JSON.stringify(sectionBottomY)};`);\r\n    log(`DSO Toolkit [Accordion Section] window.innerHeight = ${JSON.stringify(window.innerHeight)};`);\r\n\r\n    const box = this.host.getBoundingClientRect();\r\n\r\n    const scrollTop = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop;\r\n    const clientTop = document.documentElement.clientTop || document.body.clientTop || 0;\r\n    const top = box.top + scrollTop - clientTop;\r\n\r\n    log(\"DSO Toolkit [Accordion Section] scroll\", { box, scrollTop, clientTop, top });\r\n\r\n    if (sectionBottomY > window.innerHeight) {\r\n      log(\r\n        `DSO Toolkit [Accordion Section] sectionBottomY > window.innerHeight === ${JSON.stringify(\r\n          sectionBottomY > window.innerHeight,\r\n        )};`,\r\n      );\r\n\r\n      const expandedAccordionHeight = sectionBottomY - headingClientRect.top;\r\n      const shouldScrollToTopOfSection = expandedAccordionHeight > window.innerHeight;\r\n\r\n      log(\r\n        `DSO Toolkit [Accordion Section] const expandedAccordionHeight = ${JSON.stringify(expandedAccordionHeight)};`,\r\n      );\r\n      log(\r\n        `DSO Toolkit [Accordion Section] const shouldScrollToTopOfSection = ${JSON.stringify(\r\n          shouldScrollToTopOfSection,\r\n        )};`,\r\n      );\r\n\r\n      window.scrollTo({\r\n        top: shouldScrollToTopOfSection ? top : top - (window.innerHeight - expandedAccordionHeight),\r\n        behavior,\r\n      });\r\n    } else if (headingClientRect.top < 0) {\r\n      log(\r\n        `DSO Toolkit [Accordion Section] headingClientRect.top < 0 === ${JSON.stringify(headingClientRect.top < 0)};`,\r\n      );\r\n\r\n      window.scrollTo({\r\n        top,\r\n        behavior,\r\n      });\r\n    }\r\n  }\r\n\r\n  private get accordion() {\r\n    return this.host.closest(\"dso-accordion\");\r\n  }\r\n\r\n  private handleClick = (event: MouseEvent) => {\r\n    this.dsoToggleClick.emit({\r\n      originalEvent: event,\r\n      open: !this.open,\r\n    });\r\n  };\r\n\r\n  private handleActiveChange = (event: DsoSlideToggleCustomEvent<SlideToggleActiveEvent>) => {\r\n    this.dsoActiveChange.emit({\r\n      current: Boolean(this.active),\r\n      next: !this.active,\r\n      originalEvent: event,\r\n    });\r\n  };\r\n\r\n  private handleExpandableAnimationStart = (e: CustomEvent<any>) => {\r\n    this.dsoAnimationStart.emit({\r\n      animation: this.open ? \"opening\" : \"closing\",\r\n      scrollIntoView: (behavior: ScrollBehavior = \"auto\") => this.scrollIntoView(e.detail.bodyHeight, behavior),\r\n    });\r\n  };\r\n\r\n  private handleExpandableAnimationEnd = (e: CustomEvent<ExpandableAnimationEndEvent>) => {\r\n    this.dsoAnimationEnd.emit({\r\n      open: this.open,\r\n      scrollIntoView: (behavior: ScrollBehavior = \"auto\") => this.scrollIntoView(e.detail.bodyHeight, behavior),\r\n    });\r\n  };\r\n\r\n  /**\r\n   * Emitted when the user activates the toggle button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoToggleClick!: EventEmitter<AccordionSectionToggleClickEvent>;\r\n\r\n  /**\r\n   * Event emitted when the Accordion Section starts its toggle animation.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoAnimationStart!: EventEmitter<AccordionSectionAnimationStartEvent>;\r\n\r\n  /**\r\n   * Event emitted when the Accordion Section completes its toggle animation.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoAnimationEnd!: EventEmitter<AccordionSectionAnimationEndEvent>;\r\n\r\n  private handleElementRef?: HTMLAnchorElement | HTMLButtonElement;\r\n\r\n  render() {\r\n    const { variant, reverseAlign } = this.accordionState ?? {};\r\n    const hasAddons = !!this.statusDescription || !!this.status || !!this.icon || !!this.attachmentCount;\r\n    const showSlideToggle = this.activatable && variant === \"compact-black\" && !reverseAlign;\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.hasNestedAccordion || this.containsNestedAccordion,\r\n          \"dso-accordion-reverse-align\": reverseAlign ?? false,\r\n          [\"dso-accordion-wijzigactie-\" + this.wijzigactie]: !!this.wijzigactie,\r\n          \"dso-accordion-section-activate\": showSlideToggle,\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={this.handleClick}\r\n            open={this.open}\r\n            showSlideToggle={showSlideToggle}\r\n            active={this.active}\r\n            onActiveChange={this.handleActiveChange}\r\n            handleElementRef={(e) => (this.handleElementRef = e)}\r\n          >\r\n            {reverseAlign ? (\r\n              <Fragment>\r\n                {this.icon && (\r\n                  <div class=\"dso-section-handle-addons\">\r\n                    <HandleIcon icon={this.icon} />\r\n                  </div>\r\n                )}\r\n                <dso-renvooi value={this.handleTitle} />\r\n                {this.label && (\r\n                  <dso-label status={this.labelStatus} compact>\r\n                    {this.label}\r\n                  </dso-label>\r\n                )}\r\n                <div class=\"dso-section-handle-addons\">\r\n                  {this.statusDescription && <span class=\"dso-status\">{this.statusDescription}</span>}\r\n                  <dso-icon class=\"dso-section-handle-chevron\" icon=\"chevron-down\"></dso-icon>\r\n                </div>\r\n              </Fragment>\r\n            ) : (\r\n              <Fragment>\r\n                <dso-icon class=\"dso-section-handle-chevron\" icon=\"chevron-right\"></dso-icon>\r\n                {this.status && <span class=\"sr-only\">{stateMap[this.status]}</span>}\r\n                <span>\r\n                  <dso-renvooi value={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                {this.label && (\r\n                  <dso-label status={this.labelStatus} compact>\r\n                    {this.label}\r\n                  </dso-label>\r\n                )}\r\n                {hasAddons && (\r\n                  <div class=\"dso-section-handle-addons\">\r\n                    {this.statusDescription && <span class=\"dso-status\">{this.statusDescription}</span>}\r\n                    <HandleIcon state={this.status} 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          onDsoExpandableAnimationStart={this.handleExpandableAnimationStart}\r\n          onDsoExpandableAnimationEnd={this.handleExpandableAnimationEnd}\r\n        >\r\n          <div class=\"dso-section-body-content\" ref={(element) => (this.sectionBody = element)}>\r\n            <slot />\r\n          </div>\r\n        </dso-expandable>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-accordion-section.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/accordion/components/accordion-section.interfaces.ts","src/components/accordion/components/accordion-section.scss?tag=dso-accordion-section&encapsulation=shadow","src/components/accordion/components/accordion-section.tsx"],"sourcesContent":["export type AccordionSectionState = \"success\" | \"info\" | \"warning\" | \"danger\" | \"error\";\r\n\r\nexport type AccordionHeading = \"h2\" | \"h3\" | \"h4\" | \"h5\";\r\n\r\nexport type AccordionSectionWijzigactie = \"voegtoe\" | \"verwijder\";\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\r\nexport interface AccordionSectionToggleClickEvent {\r\n  /**\r\n   * The original MouseEvent that triggered the click.\r\n   *\r\n   * In case the Section Handle is an <a> this event can be used to preventDefault() so the framework router is reponsible for navigating the user.\r\n   */\r\n  originalEvent?: MouseEvent;\r\n\r\n  /**\r\n   * The requested state. If the Accordion Section is closed, `open = true`.\r\n   */\r\n  open: boolean;\r\n}\r\n\r\nexport interface AccordionSectionAnimationStartEvent {\r\n  /**\r\n   * Helper function to scroll the Accordion Section into view.\r\n   */\r\n  scrollIntoView(behavior?: ScrollBehavior): void;\r\n\r\n  /**\r\n   * Whether or not the Accordion opening or closing.\r\n   */\r\n  animation: \"opening\" | \"closing\";\r\n}\r\n\r\nexport interface AccordionSectionAnimationEndEvent {\r\n  /**\r\n   * Helper function to scroll the Accordion Section into view.\r\n   */\r\n  scrollIntoView(behavior?: ScrollBehavior): void;\r\n\r\n  /**\r\n   * The state of the Accordion Section after animation.\r\n   */\r\n  open: boolean;\r\n}\r\n\r\nexport interface AccordionSectionActiveChangeEvent {\r\n  /**\r\n   * De current status van de Accordion Section.\r\n   */\r\n  current: boolean;\r\n\r\n  /**\r\n   * De desired status van de Accordion Section.\r\n   */\r\n  next: boolean;\r\n\r\n  originalEvent: Event;\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/link\";\r\n\r\n@use \"accordion-section-theme-compact\";\r\n@use \"accordion-section-theme-compact-black\";\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 link.clean();\r\n    }\r\n\r\n    .dso-status {\r\n      color: colors.$zwart;\r\n      font-size: typography.$font-size-small;\r\n      font-weight: 400;\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-block: accordion.$block-padding;\r\n    padding-inline: accordion.$inline-padding;\r\n    text-align: start;\r\n    inline-size: 100%;\r\n    overflow-wrap: anywhere;\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-inline-end: units.$u1;\r\n    }\r\n\r\n    > dso-icon:last-child {\r\n      margin-inline-start: auto;\r\n    }\r\n\r\n    > .dso-section-handle-addons:last-child {\r\n      margin-inline-start: auto;\r\n\r\n      dso-attachments-counter,\r\n      dso-icon {\r\n        margin-inline-start: units.$u1;\r\n      }\r\n    }\r\n\r\n    > dso-label {\r\n      margin-inline-start: auto;\r\n      padding-inline-start: units.$u1;\r\n      word-break: normal;\r\n\r\n      & + dso-icon:last-child,\r\n      & + .dso-section-handle-addons:last-child {\r\n        margin-inline-start: units.$u1;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n:host([open]:not([open=\"false\"])) {\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-block-start: 0;\r\n\r\n  .dso-section-body-content {\r\n    padding-block: units.$u2 + accordion.$border-radius units.$u2;\r\n    padding-inline: 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]:not([open=\"false\"])) {\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]:not([open=\"false\"])) {\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([open=\"false\"]):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]:not([open=\"false\"])) {\r\n  @include accordion-section-theme-compact.dso-web-component-accordion-compact-open-nested();\r\n}\r\n\r\n// Compact black\r\n:host(.dso-accordion-compact-black) {\r\n  @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black();\r\n}\r\n\r\n:host(.dso-accordion-compact-black.dso-accordion-section-activate) {\r\n  @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black();\r\n  @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black-activate();\r\n}\r\n\r\n:host(.dso-accordion-compact-black.dso-accordion-wijzigactie-voegtoe) {\r\n  @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black-voegtoe();\r\n}\r\n\r\n:host(.dso-accordion-compact-black.dso-accordion-wijzigactie-verwijder) {\r\n  @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black-verwijder();\r\n}\r\n\r\n:host(.dso-accordion-compact-black.dso-accordion-reverse-align) {\r\n  @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black-reverse();\r\n}\r\n\r\n:host(.dso-accordion-compact-black[open]:not([open=\"false\"])) {\r\n  @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black-open();\r\n}\r\n\r\n:host(.dso-accordion-compact-black.dso-nested-accordion[open]:not([open=\"false\"])) {\r\n  @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black-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([open=\"false\"]):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]:not([open=\"false\"])) {\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]:not([open=\"false\"])) {\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]:not([open=\"false\"])) {\r\n  @include accordion-section-theme-neutral.dso-web-component-accordion-neutral-open-nested();\r\n}\r\n","import {\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  FunctionalComponent,\r\n  Host,\r\n  Method,\r\n  Prop,\r\n  State,\r\n  forceUpdate,\r\n  h,\r\n} from \"@stencil/core\";\r\n\r\nimport { DsoSlideToggleCustomEvent } from \"../../../components\";\r\nimport { ExpandableAnimationEndEvent } from \"../../expandable/expandable\";\r\nimport { LabelStatus } from \"../../label/label.interfaces\";\r\nimport { RenvooiValue } from \"../../renvooi/renvooi.interfaces\";\r\nimport { SlideToggleActiveEvent } from \"../../slide-toggle/slide-toggle.interfaces\";\r\nimport { AccordionInternalState } from \"../accordion.interfaces\";\r\n\r\nimport {\r\n  AccordionHeading,\r\n  AccordionSectionActiveChangeEvent,\r\n  AccordionSectionAnimationEndEvent,\r\n  AccordionSectionAnimationStartEvent,\r\n  AccordionSectionState,\r\n  AccordionSectionToggleClickEvent,\r\n  AccordionSectionWijzigactie,\r\n  stateMap,\r\n} from \"./accordion-section.interfaces\";\r\n\r\n// eslint-disable-next-line no-console\r\nconst log = (window as any)[\"_dsoLog\"] === true ? console.log.bind(console.log) : function () {};\r\n\r\nconst HandleElement: FunctionalComponent<{\r\n  handleUrl: string | undefined;\r\n  open: boolean;\r\n  showSlideToggle: boolean;\r\n  active: boolean;\r\n  onActiveChange: (e: DsoSlideToggleCustomEvent<SlideToggleActiveEvent>) => void;\r\n  handleElementRef: (element: HTMLAnchorElement | HTMLButtonElement | undefined) => void;\r\n  onClick: (e: MouseEvent) => void;\r\n}> = ({ handleUrl, onClick, open, showSlideToggle, active, onActiveChange, handleElementRef }, children) => {\r\n  if (handleUrl) {\r\n    return (\r\n      <>\r\n        <a href={handleUrl} onClick={onClick} aria-expanded={open ? \"true\" : \"false\"} ref={handleElementRef}>\r\n          {children}\r\n        </a>\r\n        {showSlideToggle && (\r\n          <dso-slide-toggle accessibleLabel=\"Toon op kaart\" checked={active} onDsoActiveChange={onActiveChange} />\r\n        )}\r\n      </>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <>\r\n      <button type=\"button\" onClick={onClick} aria-expanded={open ? \"true\" : \"false\"} ref={handleElementRef}>\r\n        {children}\r\n      </button>\r\n      {showSlideToggle && (\r\n        <dso-slide-toggle accessibleLabel=\"Toon op kaart\" checked={active} onDsoActiveChange={onActiveChange} />\r\n      )}\r\n    </>\r\n  );\r\n};\r\n\r\nconst 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\r\nconst 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\r\nconst 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\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 accordionState?: AccordionInternalState;\r\n\r\n  private sectionBody?: HTMLDivElement;\r\n\r\n  private sectionHeading?: HTMLHeadingElement;\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!: RenvooiValue | RenvooiValue[] | undefined;\r\n\r\n  /**\r\n   * An optional 'wijzigactie' that signals if the section is added or removed.\r\n   */\r\n  @Prop()\r\n  wijzigactie?: AccordionSectionWijzigactie;\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  status?: 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  statusDescription?: string;\r\n\r\n  /**\r\n   * Set the Accordion Section open.\r\n   */\r\n  @Prop({ reflect: true })\r\n  open = false;\r\n\r\n  /**\r\n   * Set when this Accordion Section contains or will contain an Accordion.\r\n   */\r\n  @Prop({ reflect: true })\r\n  hasNestedAccordion = false;\r\n\r\n  /**\r\n   * The label to be displayed in the heading handle inside a Label (optional)\r\n   */\r\n  @Prop()\r\n  label?: string;\r\n\r\n  /**\r\n   * The status of the Label in the heading handle (optional)\r\n   */\r\n  @Prop()\r\n  labelStatus?: LabelStatus;\r\n\r\n  /**\r\n   * A boolean to indicate if the Accordion Section is capable of being activated. When `true` a Slide Toggle displays\r\n   * on the right in the heading handle (optional). Works only for `variant` `compact-black` and `reverseAlign` false.\r\n   */\r\n  @Prop({ reflect: true })\r\n  activatable = false;\r\n\r\n  /**\r\n   * A boolean to indicate if the Accordion Section is `active`. Only applicable when the Accordion Section is\r\n   * `activatable`.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active = false;\r\n\r\n  /**\r\n   * An optional event listener for changes on the value of property `active`.\r\n   */\r\n  @Event()\r\n  dsoActiveChange!: EventEmitter<AccordionSectionActiveChangeEvent>;\r\n\r\n  /**\r\n   * Calling this method will set focus to the handle.\r\n   */\r\n  @Method()\r\n  async focusHandle() {\r\n    this.handleElementRef?.focus();\r\n  }\r\n\r\n  @State()\r\n  hover = false;\r\n\r\n  get containsNestedAccordion() {\r\n    return this.host.querySelector(\"dso-accordion\") !== null;\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.accordion?._getState().then((state) => {\r\n      this.accordionState = state;\r\n\r\n      forceUpdate(this.host);\r\n    });\r\n  }\r\n\r\n  get isNeutral() {\r\n    return this.accordionState?.variant === \"neutral\";\r\n  }\r\n\r\n  private async scrollIntoView(bodyHeight: number | undefined, behavior: ScrollBehavior = \"auto\"): Promise<void> {\r\n    log(\r\n      `DSO Toolkit [Accordion Section] scrollIntoView(bodyHeight: ${JSON.stringify(\r\n        bodyHeight,\r\n      )}, behavior: ${JSON.stringify(behavior)})`,\r\n    );\r\n\r\n    const bodyClientRect = this.sectionBody?.getBoundingClientRect();\r\n    const headingClientRect = this.sectionHeading?.getBoundingClientRect();\r\n\r\n    log(`DSO Toolkit [Accordion Section] const bodyClientRect = ${JSON.stringify(bodyClientRect)};`);\r\n    log(`DSO Toolkit [Accordion Section] const headingClientRect = ${JSON.stringify(headingClientRect)};`);\r\n    log(`DSO Toolkit [Accordion Section] this.accordionState = ${JSON.stringify(this.accordionState)};`);\r\n    log(`DSO Toolkit [Accordion Section] this.open = ${JSON.stringify(this.open)};`);\r\n\r\n    if (!bodyClientRect || !headingClientRect || !this.accordionState) {\r\n      log(`DSO Toolkit [Accordion Section] returning`);\r\n\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 ? (bodyHeight ?? 0) : 0);\r\n\r\n    log(`DSO Toolkit [Accordion Section] const sectionBottomY = ${JSON.stringify(sectionBottomY)};`);\r\n    log(`DSO Toolkit [Accordion Section] window.innerHeight = ${JSON.stringify(window.innerHeight)};`);\r\n\r\n    const box = this.host.getBoundingClientRect();\r\n\r\n    const scrollTop = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop;\r\n    const clientTop = document.documentElement.clientTop || document.body.clientTop || 0;\r\n    const top = box.top + scrollTop - clientTop;\r\n\r\n    log(\"DSO Toolkit [Accordion Section] scroll\", { box, scrollTop, clientTop, top });\r\n\r\n    if (sectionBottomY > window.innerHeight) {\r\n      log(\r\n        `DSO Toolkit [Accordion Section] sectionBottomY > window.innerHeight === ${JSON.stringify(\r\n          sectionBottomY > window.innerHeight,\r\n        )};`,\r\n      );\r\n\r\n      const expandedAccordionHeight = sectionBottomY - headingClientRect.top;\r\n      const shouldScrollToTopOfSection = expandedAccordionHeight > window.innerHeight;\r\n\r\n      log(\r\n        `DSO Toolkit [Accordion Section] const expandedAccordionHeight = ${JSON.stringify(expandedAccordionHeight)};`,\r\n      );\r\n      log(\r\n        `DSO Toolkit [Accordion Section] const shouldScrollToTopOfSection = ${JSON.stringify(\r\n          shouldScrollToTopOfSection,\r\n        )};`,\r\n      );\r\n\r\n      window.scrollTo({\r\n        top: shouldScrollToTopOfSection ? top : top - (window.innerHeight - expandedAccordionHeight),\r\n        behavior,\r\n      });\r\n    } else if (headingClientRect.top < 0) {\r\n      log(\r\n        `DSO Toolkit [Accordion Section] headingClientRect.top < 0 === ${JSON.stringify(headingClientRect.top < 0)};`,\r\n      );\r\n\r\n      window.scrollTo({\r\n        top,\r\n        behavior,\r\n      });\r\n    }\r\n  }\r\n\r\n  private get accordion() {\r\n    return this.host.closest(\"dso-accordion\");\r\n  }\r\n\r\n  private handleClick = (event: MouseEvent) => {\r\n    this.dsoToggleClick.emit({\r\n      originalEvent: event,\r\n      open: !this.open,\r\n    });\r\n  };\r\n\r\n  private handleActiveChange = (event: DsoSlideToggleCustomEvent<SlideToggleActiveEvent>) => {\r\n    this.dsoActiveChange.emit({\r\n      current: Boolean(this.active),\r\n      next: !this.active,\r\n      originalEvent: event,\r\n    });\r\n  };\r\n\r\n  private handleExpandableAnimationStart = (e: CustomEvent<any>) => {\r\n    this.dsoAnimationStart.emit({\r\n      animation: this.open ? \"opening\" : \"closing\",\r\n      scrollIntoView: (behavior: ScrollBehavior = \"auto\") => this.scrollIntoView(e.detail.bodyHeight, behavior),\r\n    });\r\n  };\r\n\r\n  private handleExpandableAnimationEnd = (e: CustomEvent<ExpandableAnimationEndEvent>) => {\r\n    this.dsoAnimationEnd.emit({\r\n      open: this.open,\r\n      scrollIntoView: (behavior: ScrollBehavior = \"auto\") => this.scrollIntoView(e.detail.bodyHeight, behavior),\r\n    });\r\n  };\r\n\r\n  /**\r\n   * Emitted when the user activates the toggle button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoToggleClick!: EventEmitter<AccordionSectionToggleClickEvent>;\r\n\r\n  /**\r\n   * Event emitted when the Accordion Section starts its toggle animation.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoAnimationStart!: EventEmitter<AccordionSectionAnimationStartEvent>;\r\n\r\n  /**\r\n   * Event emitted when the Accordion Section completes its toggle animation.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoAnimationEnd!: EventEmitter<AccordionSectionAnimationEndEvent>;\r\n\r\n  private handleElementRef?: HTMLAnchorElement | HTMLButtonElement;\r\n\r\n  render() {\r\n    const { variant, reverseAlign } = this.accordionState ?? {};\r\n    const hasAddons = !!this.statusDescription || !!this.status || !!this.icon || !!this.attachmentCount;\r\n    const showSlideToggle = this.activatable && variant === \"compact-black\" && !reverseAlign;\r\n\r\n    return (\r\n      <Host\r\n        class={{\r\n          \"dso-accordion-section\": true,\r\n          [\"dso-accordion-\" + variant]: !!variant,\r\n          \"dso-nested-accordion\": this.hasNestedAccordion || this.containsNestedAccordion,\r\n          \"dso-accordion-reverse-align\": reverseAlign ?? false,\r\n          [\"dso-accordion-wijzigactie-\" + this.wijzigactie]: !!this.wijzigactie,\r\n          \"dso-accordion-section-activate\": showSlideToggle,\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={this.handleClick}\r\n            open={this.open}\r\n            showSlideToggle={showSlideToggle}\r\n            active={this.active}\r\n            onActiveChange={this.handleActiveChange}\r\n            handleElementRef={(e) => (this.handleElementRef = e)}\r\n          >\r\n            {reverseAlign ? (\r\n              <Fragment>\r\n                {this.icon && (\r\n                  <div class=\"dso-section-handle-addons\">\r\n                    <HandleIcon icon={this.icon} />\r\n                  </div>\r\n                )}\r\n                <dso-renvooi value={this.handleTitle} />\r\n                {this.label && (\r\n                  <dso-label status={this.labelStatus} compact>\r\n                    {this.label}\r\n                  </dso-label>\r\n                )}\r\n                <div class=\"dso-section-handle-addons\">\r\n                  {this.statusDescription && <span class=\"dso-status\">{this.statusDescription}</span>}\r\n                  <dso-icon class=\"dso-section-handle-chevron\" icon=\"chevron-down\"></dso-icon>\r\n                </div>\r\n              </Fragment>\r\n            ) : (\r\n              <Fragment>\r\n                <dso-icon class=\"dso-section-handle-chevron\" icon=\"chevron-right\"></dso-icon>\r\n                {this.status && <span class=\"sr-only\">{stateMap[this.status]}</span>}\r\n                <span>\r\n                  <dso-renvooi value={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                {this.label && (\r\n                  <dso-label status={this.labelStatus} compact>\r\n                    {this.label}\r\n                  </dso-label>\r\n                )}\r\n                {hasAddons && (\r\n                  <div class=\"dso-section-handle-addons\">\r\n                    {this.statusDescription && <span class=\"dso-status\">{this.statusDescription}</span>}\r\n                    <HandleIcon state={this.status} 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          onDsoExpandableAnimationStart={this.handleExpandableAnimationStart}\r\n          onDsoExpandableAnimationEnd={this.handleExpandableAnimationEnd}\r\n        >\r\n          <div class=\"dso-section-body-content\" ref={(element) => (this.sectionBody = element)}>\r\n            <slot />\r\n          </div>\r\n        </dso-expandable>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/dso-onboarding-tip.js

@@ -1660,7 +1660,7 @@ const computePosition = (reference, floating, options) => {
   });
 };
 
-const onboardingTipCss = "*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}::slotted([slot=heading]){display:flex !important;align-items:center !important;margin-block-end:0 !important;margin-block-start:0 !important;color:#fff !important;line-height:1.375 !important}:host{--_dso-button-primary-background-color:#fff;--_dso-button-primary-border-color:#fff;--_dso-button-primary-color:#000;--_dso-button-primary-hover-background-color:#ccc;--_dso-button-primary-hover-border-color:#ccc;--_dso-button-primary-hover-color:#000;--_dso-button-primary-active-background-color:#999;--_dso-button-primary-active-border-color:#999;--_dso-button-primary-active-color:#000;--_dso-button-primary-disabled-background-color:#fff;--_dso-button-primary-disabled-border-color:#fff;--_dso-button-primary-disabled-color:#b2b2b2;--_dso-button-secondary-background-color:#fff;--_dso-button-secondary-border-color:#fff;--_dso-button-secondary-color:#000;--_dso-button-secondary-hover-background-color:#ccc;--_dso-button-secondary-hover-border-color:#ccc;--_dso-button-secondary-hover-color:#000;--_dso-button-secondary-active-background-color:#999;--_dso-button-secondary-active-border-color:#999;--_dso-button-secondary-active-color:#000;--_dso-button-secondary-disabled-background-color:#fff;--_dso-button-secondary-disabled-border-color:#fff;--_dso-button-secondary-disabled-color:#b2b2b2;display:block;filter:drop-shadow(2px 2px 16px rgba(0, 0, 0, 0.4))}:host([popover]){margin:0 !important;border:0;padding:0;background-color:transparent;overflow:unset}.onboarding-tip{font-family:Asap, sans-serif;font-style:normal;font-weight:400;line-height:1.5;line-break:auto;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;overflow-wrap:anywhere;word-spacing:normal;word-wrap:normal;white-space:normal;font-size:14px;inset-block-start:0;inset-inline-start:0;z-index:410}@media screen and (max-width: 360px){.onboarding-tip{padding-inline-start:8px !important}}.dso-close{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none;position:absolute;inset-block-start:0;inset-inline-end:0;block-size:32px;inline-size:32px;padding:0;background-color:transparent;border:0;text-align:center}.dso-close[disabled]{cursor:default}.dso-close::-moz-focus-inner{border:0;padding:0}.onboarding-tip-inner{--link-color:#fff;--link-hover-color:#b2b2b2;--link-visited-color:#7f7f7f;max-inline-size:min(360px, 100vw - 2 * 8px);max-block-size:40vh;overflow:auto;padding-block:32px 8px;padding-inline:8px;border-radius:4px;display:block;font-size:1rem;position:relative;z-index:2}.onboarding-tip-inner{background-color:#2b5780;border-color:#2b5780;color:#fff}.onboarding-tip-arrow{border-start-start-radius:4px;position:absolute;block-size:20px;inline-size:20px;background:#2b5780;z-index:1;pointer-events:none}.onboarding-tip-content-wrapper{padding-inline:16px;padding-block-end:16px}.onboarding-tip-content-heading{display:flex}.onboarding-tip-content-heading dso-icon{margin-inline-end:8px}";
+const onboardingTipCss = "*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}::slotted([slot=heading]){display:flex !important;align-items:center !important;margin-block-end:0 !important;margin-block-start:0 !important;color:#fff !important;line-height:1.375 !important}:host{--_dso-button-primary-background-color:#fff;--_dso-button-primary-border-color:#fff;--_dso-button-primary-color:#000;--_dso-button-primary-hover-background-color:#ccc;--_dso-button-primary-hover-border-color:#ccc;--_dso-button-primary-hover-color:#000;--_dso-button-primary-active-background-color:#999;--_dso-button-primary-active-border-color:#999;--_dso-button-primary-active-color:#000;--_dso-button-primary-disabled-background-color:#fff;--_dso-button-primary-disabled-border-color:#fff;--_dso-button-primary-disabled-color:#b2b2b2;--_dso-button-secondary-background-color:#fff;--_dso-button-secondary-border-color:#fff;--_dso-button-secondary-color:#000;--_dso-button-secondary-hover-background-color:#ccc;--_dso-button-secondary-hover-border-color:#ccc;--_dso-button-secondary-hover-color:#000;--_dso-button-secondary-active-background-color:#999;--_dso-button-secondary-active-border-color:#999;--_dso-button-secondary-active-color:#000;--_dso-button-secondary-disabled-background-color:#fff;--_dso-button-secondary-disabled-border-color:#fff;--_dso-button-secondary-disabled-color:#b2b2b2;display:block;filter:drop-shadow(2px 2px 16px rgba(0, 0, 0, 0.4));transition:visibility 400ms, opacity 400ms}:host(:not([ready])){opacity:1;animation:400ms ease-in 1 normal both fadeInOpacity}:host([popover]){margin:0 !important;border:0;padding:0;background-color:transparent;overflow:unset}.onboarding-tip{font-family:Asap, sans-serif;font-style:normal;font-weight:400;line-height:1.5;line-break:auto;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;overflow-wrap:anywhere;word-spacing:normal;word-wrap:normal;white-space:normal;font-size:14px;inset-block-start:0;inset-inline-start:0;z-index:410}@media screen and (max-width: 360px){.onboarding-tip{padding-inline-start:8px !important}}.dso-close{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none;position:absolute;inset-block-start:0;inset-inline-end:0;block-size:32px;inline-size:32px;padding:0;background-color:transparent;border:0;text-align:center}.dso-close[disabled]{cursor:default}.dso-close::-moz-focus-inner{border:0;padding:0}.onboarding-tip-inner{--link-color:#fff;--link-hover-color:#b2b2b2;--link-visited-color:#7f7f7f;max-inline-size:min(360px, 100vw - 2 * 8px);max-block-size:calc(100vh - 10px);overflow:auto;padding-block:32px 8px;padding-inline:8px;border-radius:4px;display:block;font-size:1rem;position:relative;z-index:2}.onboarding-tip-inner{background-color:#2b5780;border-color:#2b5780;color:#fff}@media screen and (max-width: 991px){.onboarding-tip-inner{max-block-size:unset}}.onboarding-tip-arrow{border-start-start-radius:4px;position:absolute;block-size:20px;inline-size:20px;background:#2b5780;z-index:1;pointer-events:none}.onboarding-tip-content-wrapper{padding-inline:16px;padding-block-end:16px}.onboarding-tip-content-heading{display:flex}.onboarding-tip-content-heading dso-icon{margin-inline-end:8px}@keyframes fadeInOpacity{0%{opacity:0}100%{opacity:1}}";
 
 const OnboardingTip = /*@__PURE__*/ proxyCustomElement(class OnboardingTip extends HTMLElement$1 {
     constructor() {
@@ -1672,6 +1672,7 @@ const OnboardingTip = /*@__PURE__*/ proxyCustomElement(class OnboardingTip exten
          * Where to place the Onboarding Tip relative to its reference element.
          */
         this.placement = "right";
+        this.ready = false;
     }
     componentDidRender() {
         if (!this.host.matches(":popover-open")) {
@@ -1693,16 +1694,25 @@ const OnboardingTip = /*@__PURE__*/ proxyCustomElement(class OnboardingTip exten
      * This function positions the Onboarding Tip relative to its reference element. It is static so the position is calculated
      * only using the passed arguments.
      */
-    static positionTip(referenceElement, tipRef, tipArrowRef, placement) {
-        // Get half the arrow box's hypotenuse length
-        const arrowLength = tipArrowRef.offsetWidth;
-        const floatingOffset = Math.sqrt(2 * arrowLength ** 2) / 2;
+    static positionTip(referenceElement, tipRef, tipArrowRef, position) {
         const padding = 5;
         return autoUpdate(referenceElement, tipRef, () => {
+            const arrowLength = tipArrowRef.offsetWidth;
+            // Get half the arrow box's hypotenuse length
+            const mainAxisOffset = Math.sqrt(2 * arrowLength ** 2) / 2;
+            // 1.5 times the diagonal of the arrow box
+            const arrowPadding = arrowLength * Math.sqrt(2) * 1.5;
+            // Same as media-query-breakpoints.$screen-md-min
+            const smallViewport = document.body.clientWidth < 992;
+            // Only use top and bottom placement when the viewport is small
+            const placement = smallViewport ? "top" : `${position}-start`;
             computePosition(referenceElement, tipRef, {
                 strategy: "fixed",
                 middleware: [
-                    offset(floatingOffset),
+                    offset({
+                        mainAxis: mainAxisOffset,
+                        alignmentAxis: -arrowPadding,
+                    }),
                     flip({
                         padding,
                     }),
@@ -1710,18 +1720,22 @@ const OnboardingTip = /*@__PURE__*/ proxyCustomElement(class OnboardingTip exten
                         padding,
                     }),
                     arrow({
-                        padding: padding + arrowLength,
+                        padding: arrowPadding,
                         element: tipArrowRef,
                     }),
                     hide({
-                        padding: 42,
+                        padding: arrowPadding + arrowLength + padding,
                     }),
                 ],
                 placement,
             }).then(({ x, y, middlewareData, placement: computedPlacement }) => {
                 if (middlewareData.hide) {
+                    // Tooltip needs to be visible at all times on small viewports
+                    const disappear = !smallViewport && middlewareData.hide.referenceHidden;
                     Object.assign(tipRef.style, {
-                        visibility: middlewareData.hide.referenceHidden ? "hidden" : "visible",
+                        // Both of these properties have a CSS transition
+                        visibility: disappear ? "hidden" : "visible",
+                        opacity: disappear ? 0 : 1,
                     });
                 }
                 Object.assign(tipRef.style, {
@@ -1768,7 +1782,7 @@ const OnboardingTip = /*@__PURE__*/ proxyCustomElement(class OnboardingTip exten
         });
     }
     render() {
-        return (h(Host, { key: '7c5150901a9ecbe69c373333009130db322d2303', popover: "manual" }, h("div", { key: 'ea013d32e5d7b74da14d420ca37a4eaffe377270', class: "onboarding-tip", role: "tooltip" }, h("div", { key: 'adb76bcf17737a81ff9a84e091b95c706261588a', class: "onboarding-tip-inner" }, h("div", { key: '9485bf312830f8788e3768719ced93d589c35de0', class: "onboarding-tip-content-wrapper" }, this.headingSlottedElement !== null && (h("div", { key: '545450463fbf1c144481f5fa0cdf2b80744d3771', class: "onboarding-tip-content-heading" }, h("dso-icon", { key: '9c2ae3b0e5c6f3eb496dbbd46168ad10f417f4ab', icon: "light-bulb" }), h("slot", { key: 'a1db25995416339c41d1d2828a8b9257222a0917', name: "heading" }))), h("button", { key: '0a54cb67e9927602923fbda804f0839b1d995c4f', type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, h("dso-icon", { key: 'e6c5d482f8ec171a6dd2969b66ac92b71d24bf8c', icon: "times" }), h("span", { key: '569fd4ac7d43b90c9c85d245636f34101dd28184', class: "sr-only" }, "Sluiten")), h("slot", { key: '984b8f980fa33e8d82a479c8c2a3b27a6645ee05' }))), h("div", { key: '7d0158f6329dec134ae9e049ce2110cbb4f27adf', class: "onboarding-tip-arrow", ref: (ref) => (this.tipArrowRef = ref) }))));
+        return (h(Host, { key: 'f8cf37b8d7e355da0d6405553d9b711a342ff35b', popover: "manual", ready: this.ready, onAnimationend: () => (this.ready = true) }, h("div", { key: '2c24f70065a1739ac15645a2b95d0d1e7170bd69', class: "onboarding-tip", role: "tooltip" }, h("div", { key: '36ff549f3ee6540d95253aef4d42073f82c4e6ff', class: "onboarding-tip-inner" }, h("div", { key: '1679ac6427bf11e5204bd0558c2e3eb97e79f565', class: "onboarding-tip-content-wrapper" }, this.headingSlottedElement !== null && (h("div", { key: 'cd2ed8f12e580239a9f3b17f0c68e3cc47a354e3', class: "onboarding-tip-content-heading" }, h("dso-icon", { key: '75a04ff5bcf97b13350be0f9b73a1c4a2551469b', icon: "light-bulb" }), h("slot", { key: 'befb042560938e167ce7a4ddded30589cba74837', name: "heading" }))), h("button", { key: 'a39a55d736676f329ae0fb491dd20468c7a8ef90', type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, h("dso-icon", { key: '32bd8339c3df104862246bc984ae590fe9134041', icon: "times" }), h("span", { key: '96e88dded1b34e9acee34a7e5a17416aee068f25', class: "sr-only" }, "Sluiten")), h("slot", { key: 'bdcee07fc2629e1026c8eb3a525d215305dcdb93' }))), h("div", { key: '2ce90e310b4e3b5b09bf155617b7280508551d72', class: "onboarding-tip-arrow", ref: (ref) => (this.tipArrowRef = ref) }))));
     }
     get headingSlottedElement() {
         return this.host.querySelector("[slot='heading']");
@@ -1794,7 +1808,8 @@ const OnboardingTip = /*@__PURE__*/ proxyCustomElement(class OnboardingTip exten
     get host() { return this; }
     static get style() { return onboardingTipCss; }
 }, [1, "dso-onboarding-tip", {
-        "placement": [1]
+        "placement": [1],
+        "ready": [32]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {