@dso-toolkit/core 55.0.0 → 56.0.0

package/dist/components/document-component.js

@@ -0,0 +1,163 @@
+import { h, proxyCustomElement, HTMLElement, createEvent, Fragment } from '@stencil/core/internal/client';
+import { d as defineCustomElement$7 } from './alert.js';
+import { d as defineCustomElement$6 } from './annotation-button.js';
+import { d as defineCustomElement$5 } from './badge.js';
+import { d as defineCustomElement$4 } from './icon.js';
+import { d as defineCustomElement$3 } from './label.js';
+import { d as defineCustomElement$2 } from './ozon-content.js';
+import { d as defineCustomElement$1 } from './tooltip.js';
+
+var __rest = (undefined && undefined.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+    t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+const Heading = (_a, children) => {
+  var { heading } = _a, props = __rest(_a, ["heading"]);
+  switch (heading) {
+    default:
+    case "h2":
+      return h("h2", Object.assign({}, props), children);
+    case "h3":
+      return h("h3", Object.assign({}, props), children);
+    case "h4":
+      return h("h4", Object.assign({}, props), children);
+    case "h5":
+      return h("h5", Object.assign({}, props), children);
+    case "h6":
+      return h("h6", Object.assign({}, props), children);
+  }
+};
+
+const documentComponentCss = "ins{background-color:#e4f1d4;box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.25);color:#000;text-decoration:none}.not-applicable{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}:host{display:block}:host-context(dso-responsive-element:not([small])) .content{padding-left:24px}:host([type=LID]:where([wijzigactie=verwijder],[wijzigactie=voegtoe])){padding-left:8px;margin-right:8px}:host(:where([wijzigactie=verwijder],[wijzigactie=voegtoe])),:host(:where([wijzigactie=nieuweContainer],[wijzigactie=verwijderContainer])) .heading-container{padding-top:4px;padding-bottom:4px}:host([wijzigactie=verwijderContainer]) .heading-container,:host(:where([wijzigactie=verwijder])){background-color:#f5d8dc;color:#000;text-decoration:line-through}:host([wijzigactie=nieuweContainer]) .heading-container,:host([wijzigactie=voegtoe]){background-color:#e4f1d4;box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.25);color:#000}:host([filtered]){position:relative}:host([filtered])::before{content:\"\";position:absolute;display:block;width:3px;top:0;bottom:0;background-color:#6ca4d9}:host([open]) .heading-container{margin-bottom:8px}.toggle-button{border:0;padding:0;background:0;color:#275937;cursor:pointer}.heading-element{align-items:start;display:flex;font-size:1rem;color:#275937;margin:0}.heading-element>*{vertical-align:middle}:host([type=LID]) .heading-container{margin-bottom:0}:host([type=LID]) .wijzigactie-label{margin-left:0}:host([type=LID]) .heading-element{color:#000}:host([type=LID]) .content{padding-left:0 !important}:host(:not([type=LID])) .heading-element{cursor:pointer}:host(:not([type=LID])) .heading-element:hover,:host(:not([type=LID])) .heading-element:focus{color:#676cb0;text-decoration:underline}:host(:not([type=LID])) .heading-element:active{text-decoration:none}.addons{margin-inline-start:auto;display:flex;gap:8px}.heading{display:flex;gap:8px}:host([type=ARTIKEL]) .heading-element,:host([type=ARTIKEL]) .toggle-button{color:#000}.wijzigactie-label{font-style:italic;margin-left:24px}.heading-container{padding-right:8px}";
+
+const wijzigActieLabels = {
+  nieuweContainer: "Toegevoegd",
+  verwijder: "Verwijderd",
+  verwijderContainer: "Verwijderd",
+  voegtoe: "Toegevoegd",
+};
+const DocumentComponent = /*@__PURE__*/ proxyCustomElement(class DocumentComponent extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.dsoOpenToggle = createEvent(this, "dsoOpenToggle", 3);
+    this.dsoAnnotationToggle = createEvent(this, "dsoAnnotationToggle", 3);
+    this.handleHeadingClick = (e) => {
+      if (this.type !== "LID") {
+        this.dsoOpenToggle.emit({ originalEvent: e, open: !this.open });
+      }
+    };
+    this.heading = "h2";
+    this.label = undefined;
+    this.nummer = undefined;
+    this.opschrift = undefined;
+    this.inhoud = undefined;
+    this.open = false;
+    this.filtered = false;
+    this.notApplicable = false;
+    this.genesteOntwerpInformatie = false;
+    this.bevatOntwerpInformatie = false;
+    this.annotated = false;
+    this.gereserveerd = false;
+    this.vervallen = false;
+    this.openAnnotation = false;
+    this.alternativeTitle = undefined;
+    this.type = undefined;
+    this.wijzigactie = undefined;
+  }
+  get wijzigactieLabel() {
+    return this.wijzigactie && wijzigActieLabels[this.wijzigactie];
+  }
+  suffix() {
+    if (this.vervallen) {
+      return "vervallen";
+    }
+    if (this.gereserveerd) {
+      return "gereserveerd";
+    }
+    return undefined;
+  }
+  render() {
+    const suffix = this.suffix();
+    return (h(Fragment, null, h("div", { class: "heading-container" }, this.wijzigactie && h("span", { class: "wijzigactie-label" }, this.wijzigactieLabel, ":"), h("div", { class: "heading" }, h(Heading, { heading: this.heading, class: "heading-element", onClick: this.handleHeadingClick }, this.type !== "LID" && (h("button", { type: "button", class: "toggle-button" }, h("dso-icon", { icon: this.open ? "chevron-down" : "chevron-right" }))), h("div", { class: "title" }, this.notApplicable && h("span", { class: "not-applicable" }, "Niet van toepassing:"), this.label || this.nummer || this.opschrift ? (h(Fragment, null, this.label && (h(Fragment, null, " ", h("dso-ozon-content", { content: this.label, inline: true }))), this.nummer && (h(Fragment, null, " ", h("dso-ozon-content", { content: this.nummer, inline: true }))), this.opschrift && (h(Fragment, null, " ", h("dso-ozon-content", { content: this.opschrift, inline: true }))))) : (this.alternativeTitle), suffix && h("span", null, " - [", suffix, "]"))), this.genesteOntwerpInformatie && !this.open && !this.bevatOntwerpInformatie && (h(Fragment, null, h("dso-badge", { status: "warning", "aria-describedby": "nested-draft-description" }, "!"), h("dso-tooltip", { id: "nested-draft-description" }, "Er is een ontwerp beschikbaar."))), (this.bevatOntwerpInformatie || this.annotated) && (h("div", { class: "addons" }, this.bevatOntwerpInformatie && (h("dso-label", { status: "warning", compact: true }, "Ontwerp")), this.annotated && (h("dso-annotation-button", { identifier: "expandable", open: this.openAnnotation, onDsoClick: (e) => this.dsoAnnotationToggle.emit({ originalEvent: e }) })))))), h("slot", { name: "annotation" }), this.open && (this.inhoud || this.gereserveerd) && (h("div", { class: "content" }, this.gereserveerd && (h("dso-alert", { status: "info" }, "Dit onderdeel is gereserveerd voor toekomstige toevoeging.")), h("dso-ozon-content", { content: this.inhoud }))), h("slot", null)));
+  }
+  static get style() { return documentComponentCss; }
+}, [1, "dso-document-component", {
+    "heading": [1],
+    "label": [1],
+    "nummer": [1],
+    "opschrift": [1],
+    "inhoud": [1],
+    "open": [516],
+    "filtered": [516],
+    "notApplicable": [516, "not-applicable"],
+    "genesteOntwerpInformatie": [516, "geneste-ontwerp-informatie"],
+    "bevatOntwerpInformatie": [516, "bevat-ontwerp-informatie"],
+    "annotated": [516],
+    "gereserveerd": [4],
+    "vervallen": [4],
+    "openAnnotation": [4, "open-annotation"],
+    "alternativeTitle": [1, "alternative-title"],
+    "type": [513],
+    "wijzigactie": [513]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["dso-document-component", "dso-alert", "dso-annotation-button", "dso-badge", "dso-icon", "dso-label", "dso-ozon-content", "dso-tooltip"];
+  components.forEach(tagName => { switch (tagName) {
+    case "dso-document-component":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DocumentComponent);
+      }
+      break;
+    case "dso-alert":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "dso-annotation-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "dso-badge":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "dso-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "dso-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "dso-ozon-content":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "dso-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { DocumentComponent as D, defineCustomElement as d };
+
+//# sourceMappingURL=document-component.js.map

package/dist/components/document-component.js.map

@@ -0,0 +1 @@
+{"file":"document-component.js","mappings":"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","names":[],"sources":["./src/components/document-component/document-component-heading.tsx","./src/components/document-component/document-component.scss?tag=dso-document-component&encapsulation=shadow","./src/components/document-component/document-component.tsx"],"sourcesContent":["import { h, FunctionalComponent } from \"@stencil/core\";\r\nimport { JSXBase } from \"@stencil/core/internal\";\r\n\r\ninterface DocumentComponentHeadingProps {\r\n  heading: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\r\n}\r\n\r\nexport const Heading: FunctionalComponent<\r\n  DocumentComponentHeadingProps & JSXBase.HTMLAttributes<HTMLHeadingElement>\r\n> = ({ heading, ...props }, children) => {\r\n  switch (heading) {\r\n    default:\r\n    case \"h2\":\r\n      return <h2 {...props}>{children}</h2>;\r\n    case \"h3\":\r\n      return <h3 {...props}>{children}</h3>;\r\n    case \"h4\":\r\n      return <h4 {...props}>{children}</h4>;\r\n    case \"h5\":\r\n      return <h5 {...props}>{children}</h5>;\r\n    case \"h6\":\r\n      return <h6 {...props}>{children}</h6>;\r\n  }\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/components/anchor\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/document-component\";\r\n@use \"~dso-toolkit/src/components/insert/insert\";\r\n\r\n.not-applicable {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n:host-context(dso-responsive-element:not([small])) {\r\n  .content {\r\n    padding-left: document-component.$indent;\r\n  }\r\n}\r\n\r\n:host([type=\"LID\"]:where([wijzigactie=\"verwijder\"], [wijzigactie=\"voegtoe\"])) {\r\n  padding-left: units.$u1;\r\n  margin-right: units.$u1;\r\n}\r\n\r\n:host(:where([wijzigactie=\"verwijder\"], [wijzigactie=\"voegtoe\"])),\r\n:host(:where([wijzigactie=\"nieuweContainer\"], [wijzigactie=\"verwijderContainer\"])) .heading-container {\r\n  padding-top: units.$u1 * 0.5;\r\n  padding-bottom: units.$u1 * 0.5;\r\n}\r\n\r\n:host([wijzigactie=\"verwijderContainer\"]) .heading-container,\r\n:host(:where([wijzigactie=\"verwijder\"])) {\r\n  background-color: colors.$danger-bg-color;\r\n  color: colors.$zwart;\r\n  text-decoration: line-through;\r\n}\r\n\r\n:host([wijzigactie=\"nieuweContainer\"]) .heading-container,\r\n:host([wijzigactie=\"voegtoe\"]) {\r\n  background-color: colors.$success-bg-color;\r\n  box-shadow: insert.$insert-box-shadow;\r\n  color: colors.$zwart;\r\n}\r\n\r\n:host([filtered]) {\r\n  position: relative;\r\n\r\n  &::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    display: block;\r\n    width: 3px;\r\n    top: 0;\r\n    bottom: 0;\r\n    background-color: colors.$lichtblauw;\r\n  }\r\n}\r\n\r\n:host([open]) {\r\n  .heading-container {\r\n    margin-bottom: units.$u1;\r\n  }\r\n}\r\n\r\n.toggle-button {\r\n  border: 0;\r\n  padding: 0;\r\n  background: 0;\r\n  color: colors.$bosgroen;\r\n  cursor: pointer;\r\n}\r\n\r\n.heading-element {\r\n  align-items: start;\r\n  display: flex;\r\n  font-size: 1rem;\r\n  color: colors.$bosgroen;\r\n  margin: 0;\r\n\r\n  > * {\r\n    vertical-align: middle;\r\n  }\r\n}\r\n\r\n:host([type=\"LID\"]) {\r\n  .heading-container {\r\n    margin-bottom: 0;\r\n  }\r\n\r\n  .wijzigactie-label {\r\n    margin-left: 0;\r\n  }\r\n\r\n  .heading-element {\r\n    color: colors.$zwart;\r\n  }\r\n\r\n  .content {\r\n    padding-left: 0 !important;\r\n  }\r\n}\r\n\r\n:host(:not([type=\"LID\"])) {\r\n  .heading-element {\r\n    cursor: pointer;\r\n\r\n    @include anchor.pseudo();\r\n  }\r\n}\r\n\r\n.addons {\r\n  margin-inline-start: auto;\r\n  display: flex;\r\n  gap: units.$u1;\r\n}\r\n\r\n.heading {\r\n  display: flex;\r\n  gap: units.$u1;\r\n}\r\n\r\n:host([type=\"ARTIKEL\"]) {\r\n  .heading-element,\r\n  .toggle-button {\r\n    color: colors.$zwart;\r\n  }\r\n}\r\n\r\n.wijzigactie-label {\r\n  font-style: italic;\r\n  margin-left: document-component.$indent;\r\n}\r\n\r\n.heading-container {\r\n  padding-right: units.$u1;\r\n}\r\n","import { h, Component, ComponentInterface, Event, EventEmitter, Fragment, Prop } from \"@stencil/core\";\r\nimport {\r\n  DocumentComponentOpenToggleEvent,\r\n  DocumentComponentToggleAnnotationEvent,\r\n  DocumentComponentWijzigactie,\r\n} from \"./document-component.types\";\r\nimport { Heading } from \"./document-component-heading\";\r\n\r\nconst wijzigActieLabels: { [wijzigActie in DocumentComponentWijzigactie]: string } = {\r\n  nieuweContainer: \"Toegevoegd\",\r\n  verwijder: \"Verwijderd\",\r\n  verwijderContainer: \"Verwijderd\",\r\n  voegtoe: \"Toegevoegd\",\r\n};\r\n\r\n@Component({\r\n  tag: \"dso-document-component\",\r\n  styleUrl: \"document-component.scss\",\r\n  shadow: true,\r\n})\r\nexport class DocumentComponent implements ComponentInterface {\r\n  /**\r\n   * The heading element to use.\r\n   */\r\n  @Prop()\r\n  heading: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" = \"h2\";\r\n\r\n  /**\r\n   * The Label XML.\r\n   */\r\n  @Prop()\r\n  label?: string;\r\n\r\n  /**\r\n   * The Nummer XML.\r\n   */\r\n  @Prop()\r\n  nummer?: string;\r\n\r\n  /**\r\n   * The Opschrift XML.\r\n   */\r\n  @Prop()\r\n  opschrift?: string;\r\n\r\n  /**\r\n   * The Inhoud XML.\r\n   */\r\n  @Prop()\r\n  inhoud?: string;\r\n\r\n  /**\r\n   * This boolean attribute indicates whether the children are visible.\r\n   */\r\n  @Prop({ reflect: true })\r\n  open = false;\r\n\r\n  /**\r\n   * Marks this Document Component as belonging to an active filter.\r\n   */\r\n  @Prop({ reflect: true })\r\n  filtered = false;\r\n\r\n  /**\r\n   * Marks this Document Component as not-applicable.\r\n   */\r\n  @Prop({ reflect: true })\r\n  notApplicable = false;\r\n\r\n  /**\r\n   * When a child Document Component has a status \"Draft\".\r\n   */\r\n  @Prop({ reflect: true })\r\n  genesteOntwerpInformatie = false;\r\n\r\n  /**\r\n   * Marks as draft.\r\n   */\r\n  @Prop({ reflect: true })\r\n  bevatOntwerpInformatie = false;\r\n\r\n  /**\r\n   * Enables annotations.\r\n   */\r\n  @Prop({ reflect: true })\r\n  annotated = false;\r\n\r\n  /**\r\n   * Marks Document Component as reserved.\r\n   */\r\n  @Prop()\r\n  gereserveerd = false;\r\n\r\n  /**\r\n   * Marks the Document Component as expired.\r\n   */\r\n  @Prop()\r\n  vervallen = false;\r\n\r\n  /**\r\n   * When the Annotation Output is opened, set this to true.\r\n   */\r\n  @Prop()\r\n  openAnnotation = false;\r\n\r\n  /**\r\n   * An alternative title to show when there is nothing to create a title.\r\n   */\r\n  @Prop()\r\n  alternativeTitle?: string;\r\n\r\n  /**\r\n   * Type of Document Component.\r\n   */\r\n  @Prop({ reflect: true })\r\n  type?: string;\r\n\r\n  /**\r\n   * The wijzigactie as in STOP.\r\n   */\r\n  @Prop({ reflect: true })\r\n  wijzigactie?: DocumentComponentWijzigactie;\r\n\r\n  /**\r\n   * Emitted when the user activates the toggle.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoOpenToggle!: EventEmitter<DocumentComponentOpenToggleEvent>;\r\n\r\n  /**\r\n   * Emitted when the user activates the annotation button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoAnnotationToggle!: EventEmitter<DocumentComponentToggleAnnotationEvent>;\r\n\r\n  private get wijzigactieLabel(): string | undefined {\r\n    return this.wijzigactie && wijzigActieLabels[this.wijzigactie];\r\n  }\r\n\r\n  private handleHeadingClick = (e: MouseEvent) => {\r\n    if (this.type !== \"LID\") {\r\n      this.dsoOpenToggle.emit({ originalEvent: e, open: !this.open });\r\n    }\r\n  };\r\n\r\n  private suffix(): string | undefined {\r\n    if (this.vervallen) {\r\n      return \"vervallen\";\r\n    }\r\n\r\n    if (this.gereserveerd) {\r\n      return \"gereserveerd\";\r\n    }\r\n\r\n    return undefined;\r\n  }\r\n\r\n  render() {\r\n    const suffix = this.suffix();\r\n\r\n    return (\r\n      <>\r\n        <div class=\"heading-container\">\r\n          {this.wijzigactie && <span class=\"wijzigactie-label\">{this.wijzigactieLabel}:</span>}\r\n          <div class=\"heading\">\r\n            <Heading heading={this.heading} class=\"heading-element\" onClick={this.handleHeadingClick}>\r\n              {this.type !== \"LID\" && (\r\n                <button type=\"button\" class=\"toggle-button\">\r\n                  <dso-icon icon={this.open ? \"chevron-down\" : \"chevron-right\"}></dso-icon>\r\n                </button>\r\n              )}\r\n              <div class=\"title\">\r\n                {this.notApplicable && <span class=\"not-applicable\">Niet van toepassing:</span>}\r\n                {this.label || this.nummer || this.opschrift ? (\r\n                  <>\r\n                    {this.label && (\r\n                      <>\r\n                        {\" \"}\r\n                        <dso-ozon-content content={this.label} inline></dso-ozon-content>\r\n                      </>\r\n                    )}\r\n                    {this.nummer && (\r\n                      <>\r\n                        {\" \"}\r\n                        <dso-ozon-content content={this.nummer} inline></dso-ozon-content>\r\n                      </>\r\n                    )}\r\n                    {this.opschrift && (\r\n                      <>\r\n                        {\" \"}\r\n                        <dso-ozon-content content={this.opschrift} inline></dso-ozon-content>\r\n                      </>\r\n                    )}\r\n                  </>\r\n                ) : (\r\n                  this.alternativeTitle\r\n                )}\r\n                {suffix && <span> - [{suffix}]</span>}\r\n              </div>\r\n            </Heading>\r\n            {this.genesteOntwerpInformatie && !this.open && !this.bevatOntwerpInformatie && (\r\n              <>\r\n                <dso-badge status=\"warning\" aria-describedby=\"nested-draft-description\">\r\n                  !\r\n                </dso-badge>\r\n                <dso-tooltip id=\"nested-draft-description\">Er is een ontwerp beschikbaar.</dso-tooltip>\r\n              </>\r\n            )}\r\n            {(this.bevatOntwerpInformatie || this.annotated) && (\r\n              <div class=\"addons\">\r\n                {this.bevatOntwerpInformatie && (\r\n                  <dso-label status=\"warning\" compact>\r\n                    Ontwerp\r\n                  </dso-label>\r\n                )}\r\n                {this.annotated && (\r\n                  <dso-annotation-button\r\n                    identifier=\"expandable\"\r\n                    open={this.openAnnotation}\r\n                    onDsoClick={(e) => this.dsoAnnotationToggle.emit({ originalEvent: e })}\r\n                  ></dso-annotation-button>\r\n                )}\r\n              </div>\r\n            )}\r\n          </div>\r\n        </div>\r\n        <slot name=\"annotation\" />\r\n        {this.open && (this.inhoud || this.gereserveerd) && (\r\n          <div class=\"content\">\r\n            {this.gereserveerd && (\r\n              <dso-alert status=\"info\">Dit onderdeel is gereserveerd voor toekomstige toevoeging.</dso-alert>\r\n            )}\r\n            <dso-ozon-content content={this.inhoud}></dso-ozon-content>\r\n          </div>\r\n        )}\r\n        <slot />\r\n      </>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

@@ -1,11 +1,7 @@
-import { h, proxyCustomElement, HTMLElement, forceUpdate, Host, Fragment } from '@stencil/core/internal/client';
+import { h, proxyCustomElement, HTMLElement, createEvent, 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 Element && element.tagName === "DSO-EXPANDABLE";
-}
-
 const stateMap = {
   success: "succes:",
   info: "info:",
@@ -72,70 +68,52 @@ const AccordionSection = /*@__PURE__*/ proxyCustomElement(class AccordionSection
     super();
     this.__registerHost();
     this.__attachShadow();
+    this.dsoToggleClick = createEvent(this, "dsoToggleClick", 3);
+    this.dsoAnimationEnd = createEvent(this, "dsoAnimationEnd", 3);
+    this.handleClick = (event) => {
+      this.dsoToggleClick.emit({
+        originalEvent: event,
+        open: !this.open,
+      });
+    };
+    this.handleExpandableAnimationEnd = (e) => {
+      this.dsoAnimationEnd.emit({
+        open: this.open,
+        scrollIntoView: () => this.scrollIntoView(e.detail.bodyHeight),
+      });
+    };
     this.handleTitle = undefined;
     this.heading = "h2";
     this.handleUrl = undefined;
-    this.state = undefined;
+    this.status = undefined;
     this.attachmentCount = undefined;
     this.icon = undefined;
-    this.status = undefined;
+    this.statusDescription = undefined;
     this.open = false;
-    this.hasNestedSection = false;
+    this.hasNestedAccordion = false;
     this.hover = false;
   }
   componentWillLoad() {
-    const accordion = this.host.parentElement;
-    this.hasNestedSection = this.host.querySelector("dso-accordion") !== null;
-    if (accordion && isAccordion(accordion)) {
-      this.accordion = accordion;
-      accordion._getState().then((state) => {
-        this.accordionState = state;
-        forceUpdate(this.host);
-      });
-    }
-  }
-  /**
-   * Toggle this section.
-   * @param scrollIntoView boolean - defaults to true
-   */
-  async toggleSection(scrollIntoView = true) {
     var _a;
-    await ((_a = this.accordion) === null || _a === void 0 ? void 0 : _a.toggleSection(this.host).then(async () => {
-      if (scrollIntoView) {
-        await this.scrollIntoViewWhenNeeded(true);
-      }
-    }));
-  }
-  /**
-   * Scroll this section into view when needed.
-   */
-  async scrollSectionIntoView() {
-    await this.scrollIntoViewWhenNeeded(false);
+    this.hasNestedAccordion = this.host.querySelector("dso-accordion") !== null;
+    (_a = this.accordion) === null || _a === void 0 ? void 0 : _a._getState().then((state) => {
+      this.accordionState = state;
+      forceUpdate(this.host);
+    });
   }
   get isNeutral() {
     var _a;
     return ((_a = this.accordionState) === null || _a === void 0 ? void 0 : _a.variant) === "neutral";
   }
-  async scrollIntoViewWhenNeeded(sectionToggled) {
-    var _a, _b, _c;
-    AccordionSection.scrollCandidate = undefined;
+  async scrollIntoView(bodyHeight) {
+    var _a, _b;
     const bodyClientRect = (_a = this.sectionBody) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
     const headingClientRect = (_b = this.sectionHeading) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
     if (!bodyClientRect || !headingClientRect || !this.accordionState) {
       return;
     }
-    const waitForAnimationBeforeScrolling = async (state) => {
-      var _a, _b;
-      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));
-    };
-    if (await waitForAnimationBeforeScrolling(this.accordionState)) {
-      AccordionSection.scrollCandidate = this.host;
-      return;
-    }
     // this y is relative to the top of the viewport.
-    const sectionBottomY = headingClientRect.top + headingClientRect.height + (this.open ? (_c = this.bodyHeight) !== null && _c !== void 0 ? _c : 0 : 0);
+    const sectionBottomY = headingClientRect.top + headingClientRect.height + (this.open ? bodyHeight !== null && bodyHeight !== void 0 ? bodyHeight : 0 : 0);
     if (sectionBottomY > window.innerHeight) {
       const expandedAccordionHeight = sectionBottomY - headingClientRect.top;
       const shouldScrollToTopOfSection = expandedAccordionHeight > window.innerHeight;
@@ -153,51 +131,19 @@ const AccordionSection = /*@__PURE__*/ proxyCustomElement(class AccordionSection
       });
     }
   }
-  setAnimationBehaviour(event, section) {
-    const expandableElement = event.target;
-    if (!(expandableElement instanceof HTMLElement)) {
-      return;
-    }
-    if (isExpandable(expandableElement)) {
-      this.expandable = expandableElement;
-      this.expandable._getAnimeInstance().then((animeInstance) => {
-        if (animeInstance) {
-          animeInstance.changeComplete = async () => {
-            if (!section) {
-              return;
-            }
-            const accordion = section.parentElement;
-            if (accordion && isAccordion(accordion)) {
-              accordion === null || accordion === void 0 ? void 0 : accordion.animationEnd(section);
-            }
-            if (AccordionSection.scrollCandidate === this.host) {
-              AccordionSection.scrollCandidate = undefined;
-              await this.scrollSectionIntoView();
-            }
-          };
-        }
-      });
-    }
-  }
-  async toggle(e) {
-    var _a;
-    e === null || e === void 0 ? void 0 : e.preventDefault();
-    (_a = this.accordion) === null || _a === void 0 ? void 0 : _a.toggleSection(this.host, e).then(async (isOpen) => {
-      if (isOpen) {
-        await this.scrollIntoViewWhenNeeded(true);
-      }
-    });
+  get accordion() {
+    return this.host.closest("dso-accordion");
   }
   render() {
     var _a;
     const { variant, reverseAlign } = (_a = this.accordionState) !== null && _a !== void 0 ? _a : {};
-    const hasAddons = !!this.status || !!this.state || !!this.icon || !!this.attachmentCount;
+    const hasAddons = !!this.statusDescription || !!this.status || !!this.icon || !!this.attachmentCount;
     return (h(Host, { class: {
         "dso-accordion-section": true,
         ["dso-accordion-" + variant]: true,
-        "dso-nested-accordion": this.hasNestedSection,
+        "dso-nested-accordion": this.hasNestedAccordion,
         "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, 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)))));
+      }, 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: this.handleClick, 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.status && h("span", { class: "sr-only" }, stateMap[this.status]), 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.statusDescription && h("span", { class: "dso-status" }, this.statusDescription), h(HandleIcon, { state: this.status, icon: this.icon, attachmentCount: this.attachmentCount }))))))), h("dso-expandable", { class: "dso-section-body", open: this.open, enableAnimation: true, minimumHeight: this.isNeutral ? 0 : 4, onDsoExpandableAnimationEnd: this.handleExpandableAnimationEnd }, h("div", { class: "dso-section-body-content", ref: (element) => (this.sectionBody = element) }, h("slot", null)))));
   }
   get host() { return this; }
   static get style() { return accordionSectionCss; }
@@ -205,19 +151,14 @@ const AccordionSection = /*@__PURE__*/ proxyCustomElement(class AccordionSection
     "handleTitle": [1, "handle-title"],
     "heading": [1],
     "handleUrl": [1, "handle-url"],
-    "state": [1],
+    "status": [1],
     "attachmentCount": [2, "attachment-count"],
     "icon": [1],
-    "status": [1],
+    "statusDescription": [1, "status-description"],
     "open": [516],
-    "hasNestedSection": [32],
-    "hover": [32],
-    "toggleSection": [64],
-    "scrollSectionIntoView": [64]
+    "hasNestedAccordion": [32],
+    "hover": [32]
   }]);
-function isAccordion(element) {
-  return element.tagName === "DSO-ACCORDION";
-}
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;

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

@@ -1 +1 @@
-{"file":"dso-accordion-section.js","mappings":"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","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}
+{"file":"dso-accordion-section.js","mappings":"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","names":[],"sources":["./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 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  Event,\r\n  forceUpdate,\r\n  Fragment,\r\n  Host,\r\n  Prop,\r\n  State,\r\n  EventEmitter,\r\n} from \"@stencil/core\";\r\n\r\nimport {\r\n  AccordionInternalState,\r\n  AccordionSectionAnimationEndEvent,\r\n  AccordionSectionToggleClickEvent,\r\n} from \"../accordion.interfaces\";\r\nimport { AccordionHeading, AccordionSectionState, stateMap } from \"./accordion-section.interfaces\";\r\nimport { Handle, HandleElement, HandleIcon } from \"./handles\";\r\nimport { ExpandableAnimationEndEvent } from \"../../expandable/expandable\";\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?: 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  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  @State()\r\n  hasNestedAccordion = false;\r\n\r\n  @State()\r\n  hover = false;\r\n\r\n  componentWillLoad() {\r\n    this.hasNestedAccordion = this.host.querySelector(\"dso-accordion\") !== null;\r\n\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): Promise<void> {\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    // 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    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 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 handleExpandableAnimationEnd = (e: CustomEvent<ExpandableAnimationEndEvent>) => {\r\n    this.dsoAnimationEnd.emit({\r\n      open: this.open,\r\n      scrollIntoView: () => this.scrollIntoView(e.detail.bodyHeight),\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 completes its toggle animation.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoAnimationEnd!: EventEmitter<AccordionSectionAnimationEndEvent>;\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\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,\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 handleUrl={this.handleUrl} onClick={this.handleClick} open={this.open}>\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.status && <span class=\"sr-only\">{stateMap[this.status]}</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.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          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}