@dso-toolkit/core 54.3.0 → 56.0.0

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":";;;;AAIO,MAAM,QAAQ,GAA0C;EAC7D,OAAO,EAAE,SAAS;EAClB,IAAI,EAAE,OAAO;EACb,OAAO,EAAE,eAAe;EACxB,MAAM,EAAE,OAAO;EACf,KAAK,EAAE,OAAO;CACf;;ACRM,MAAM,aAAa,GAIrB,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,QAAQ;EAC1C,IAAI,SAAS,EAAE;IACb,QACE,SAAG,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,mBAAiB,IAAI,GAAG,MAAM,GAAG,OAAO,IACzE,QAAQ,CACP,EACJ;GACH;EAED,QACE,cAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,OAAO,mBAAiB,IAAI,GAAG,MAAM,GAAG,OAAO,IAC3E,QAAQ,CACF,EACT;AACJ,CAAC;;AChBM,MAAM,MAAM,GAGd,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,EAAE,QAAQ;EAC9B,QAAQ,OAAO;IACb,QAAQ;IACR,KAAK,IAAI;MACP,QACE,UAAI,GAAG,EAAE,GAAG,EAAE,KAAK,EAAC,oBAAoB,IACrC,QAAQ,CACN,EACL;IACJ,KAAK,IAAI;MACP,QACE,UAAI,GAAG,EAAE,GAAG,EAAE,KAAK,EAAC,oBAAoB,IACrC,QAAQ,CACN,EACL;IACJ,KAAK,IAAI;MACP,QACE,UAAI,GAAG,EAAE,GAAG,EAAE,KAAK,EAAC,oBAAoB,IACrC,QAAQ,CACN,EACL;IACJ,KAAK,IAAI;MACP,QACE,UAAI,GAAG,EAAE,GAAG,EAAE,KAAK,EAAC,oBAAoB,IACrC,QAAQ,CACN,EACL;GACL;AACH,CAAC;;AC/BM,MAAM,eAAe,GAA0D,CAAC,EAAE,KAAK,EAAE;EAC9F,IAAI,KAAK,KAAK,OAAO,EAAE;IACrB,OAAO,gBAAU,IAAI,EAAC,cAAc,GAAY,CAAC;GAClD;EAED,IAAI,KAAK,KAAK,QAAQ,EAAE;IACtB,OAAO,gBAAU,IAAI,EAAC,eAAe,GAAY,CAAC;GACnD;EAED,IAAI,KAAK,KAAK,SAAS,EAAE;IACvB,OAAO,gBAAU,IAAI,EAAC,gBAAgB,GAAY,CAAC;GACpD;EAED,IAAI,KAAK,KAAK,MAAM,EAAE;IACpB,OAAO,gBAAU,IAAI,EAAC,aAAa,GAAY,CAAC;GACjD;EAED,IAAI,KAAK,KAAK,SAAS,EAAE;IACvB,OAAO,gBAAU,IAAI,EAAC,gBAAgB,GAAY,CAAC;GACpD;AACH,CAAC;;ACnBM,MAAM,UAAU,GAIlB,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,eAAe,EAAE;EACpC,IAAI,KAAK,EAAE;IACT,OAAO,EAAC,eAAe,IAAC,KAAK,EAAE,KAAK,GAAI,CAAC;GAC1C;EAED,IAAI,eAAe,EAAE;IACnB,OAAO,+BAAyB,KAAK,EAAE,eAAe,GAA4B,CAAC;GACpF;EAED,IAAI,IAAI,EAAE;IACR,OAAO,gBAAU,IAAI,EAAE,IAAI,GAAa,CAAC;GAC1C;AACH,CAAC;;ACrBD,MAAM,mBAAmB,GAAG,q6SAAq6S;;MC4Bp7S,gBAAgB;;;;;;;IA8GnB,gBAAW,GAAG,CAAC,KAAiB;MACtC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;QACvB,aAAa,EAAE,KAAK;QACpB,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI;OACjB,CAAC,CAAC;KACJ,CAAC;IAEM,iCAA4B,GAAG,CAAC,CAA2C;MACjF,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;QACxB,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,cAAc,EAAE,MAAM,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC;OAC/D,CAAC,CAAC;KACJ,CAAC;;mBAtG0B,IAAI;;;;;;gBAoCzB,KAAK;8BAGS,KAAK;iBAGlB,KAAK;;EAEb,iBAAiB;;IACf,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;IAE5E,MAAA,IAAI,CAAC,SAAS,0CAAE,SAAS,GAAG,IAAI,CAAC,CAAC,KAAK;MACrC,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;MAE5B,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACxB,CAAC,CAAC;GACJ;EAED,IAAI,SAAS;;IACX,OAAO,CAAA,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,MAAK,SAAS,CAAC;GACnD;EAEO,MAAM,cAAc,CAAC,UAA8B;;IACzD,MAAM,cAAc,GAAG,MAAA,IAAI,CAAC,WAAW,0CAAE,qBAAqB,EAAE,CAAC;IACjE,MAAM,iBAAiB,GAAG,MAAA,IAAI,CAAC,cAAc,0CAAE,qBAAqB,EAAE,CAAC;IAEvE,IAAI,CAAC,cAAc,IAAI,CAAC,iBAAiB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;MACjE,OAAO;KACR;;IAGD,MAAM,cAAc,GAAG,iBAAiB,CAAC,GAAG,GAAG,iBAAiB,CAAC,MAAM,IAAI,IAAI,CAAC,IAAI,GAAG,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,CAAC,GAAG,CAAC,CAAC,CAAC;IAC5G,IAAI,cAAc,GAAG,MAAM,CAAC,WAAW,EAAE;MACvC,MAAM,uBAAuB,GAAG,cAAc,GAAG,iBAAiB,CAAC,GAAG,CAAC;MACvE,MAAM,0BAA0B,GAAG,uBAAuB,GAAG,MAAM,CAAC,WAAW,CAAC;MAEhF,MAAM,CAAC,QAAQ,CAAC;QACd,GAAG,EAAE,0BAA0B;YAC3B,IAAI,CAAC,IAAI,CAAC,SAAS;YACnB,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,MAAM,CAAC,WAAW,GAAG,uBAAuB,CAAC;QACxE,QAAQ,EAAE,QAAQ;OACnB,CAAC,CAAC;KACJ;SAAM,IAAI,iBAAiB,CAAC,GAAG,GAAG,CAAC,EAAE;MACpC,MAAM,CAAC,QAAQ,CAAC;QACd,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS;QACxB,QAAQ,EAAE,QAAQ;OACnB,CAAC,CAAC;KACJ;GACF;EAED,IAAY,SAAS;IACnB,OAAO,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;GAC3C;EA4BD,MAAM;;IACJ,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,GAAG,MAAA,IAAI,CAAC,cAAc,mCAAI,EAAE,CAAC;IAC5D,MAAM,SAAS,GAAG,CAAC,CAAC,IAAI,CAAC,iBAAiB,IAAI,CAAC,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC;IAErG,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,uBAAuB,EAAE,IAAI;QAC7B,CAAC,gBAAgB,GAAG,OAAO,GAAG,IAAI;QAClC,sBAAsB,EAAE,IAAI,CAAC,kBAAkB;QAC/C,6BAA6B,EAAE,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,KAAK;OACrD,EACD,MAAM,EAAE,CAAC,OAAO,EAChB,YAAY,EAAE,OAAO,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,EACvC,YAAY,EAAE,OAAO,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IAExC,EAAC,MAAM,IAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC,IAC9E,EAAC,aAAa,IAAC,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,IACjF,YAAY,IACX,EAAC,QAAQ,QACN,SAAS,KACR,WAAK,KAAK,EAAC,2BAA2B,IACpC,EAAC,UAAU,IAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CAC3B,CACP,EAED,gBAAO,IAAI,CAAC,WAAW,CAAQ,EAE/B,gBAAU,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,cAAc,GAAY,CACnE,KAEX,EAAC,QAAQ,QACP,gBAAU,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,eAAe,GAAY,EAE5E,IAAI,CAAC,MAAM,IAAI,YAAM,KAAK,EAAC,SAAS,IAAE,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,CAAQ,EAEpE,gBACG,IAAI,CAAC,WAAW,EAChB,IAAI,CAAC,SAAS,KACb,gBAAU,KAAK,EAAC,WAAW,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,GAAG,aAAa,GAAG,MAAM,GAAI,CACvF,CACI,EAEN,SAAS,KACR,WAAK,KAAK,EAAC,2BAA2B,IACnC,IAAI,CAAC,iBAAiB,IAAI,YAAM,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,iBAAiB,CAAQ,EACnF,EAAC,UAAU,IAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,eAAe,EAAE,IAAI,CAAC,eAAe,GAAI,CACtF,CACP,CACQ,CACZ,CACa,CACT,EACT,sBACE,KAAK,EAAC,kBAAkB,EACxB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,eAAe,QACf,aAAa,EAAE,IAAI,CAAC,SAAS,GAAG,CAAC,GAAG,CAAC,EACrC,2BAA2B,EAAE,IAAI,CAAC,4BAA4B,IAE9D,WAAK,KAAK,EAAC,0BAA0B,EAAC,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC,IAClF,eAAQ,CACJ,CACS,CACZ,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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}

package/dist/components/dso-accordion.js

@@ -1,151 +1,237 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as createStore } from './index2.js';
+import { getRenderingRef, forceUpdate, proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const appendToMap = (map, propName, value) => {
+    const items = map.get(propName);
+    if (!items) {
+        map.set(propName, [value]);
+    }
+    else if (!items.includes(value)) {
+        items.push(value);
+    }
+};
+const debounce = (fn, ms) => {
+    let timeoutId;
+    return (...args) => {
+        if (timeoutId) {
+            clearTimeout(timeoutId);
+        }
+        timeoutId = setTimeout(() => {
+            timeoutId = 0;
+            fn(...args);
+        }, ms);
+    };
+};
+
+/**
+ * Check if a possible element isConnected.
+ * The property might not be there, so we check for it.
+ *
+ * We want it to return true if isConnected is not a property,
+ * otherwise we would remove these elements and would not update.
+ *
+ * Better leak in Edge than to be useless.
+ */
+const isConnected = (maybeElement) => !('isConnected' in maybeElement) || maybeElement.isConnected;
+const cleanupElements = debounce((map) => {
+    for (let key of map.keys()) {
+        map.set(key, map.get(key).filter(isConnected));
+    }
+}, 2000);
+const stencilSubscription = () => {
+    if (typeof getRenderingRef !== 'function') {
+        // If we are not in a stencil project, we do nothing.
+        // This function is not really exported by @stencil/core.
+        return {};
+    }
+    const elmsToUpdate = new Map();
+    return {
+        dispose: () => elmsToUpdate.clear(),
+        get: (propName) => {
+            const elm = getRenderingRef();
+            if (elm) {
+                appendToMap(elmsToUpdate, propName, elm);
+            }
+        },
+        set: (propName) => {
+            const elements = elmsToUpdate.get(propName);
+            if (elements) {
+                elmsToUpdate.set(propName, elements.filter(forceUpdate));
+            }
+            cleanupElements(elmsToUpdate);
+        },
+        reset: () => {
+            elmsToUpdate.forEach((elms) => elms.forEach(forceUpdate));
+            cleanupElements(elmsToUpdate);
+        },
+    };
+};
+
+const unwrap = (val) => (typeof val === 'function' ? val() : val);
+const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) => {
+    const unwrappedState = unwrap(defaultState);
+    let states = new Map(Object.entries(unwrappedState !== null && unwrappedState !== void 0 ? unwrappedState : {}));
+    const handlers = {
+        dispose: [],
+        get: [],
+        set: [],
+        reset: [],
+    };
+    const reset = () => {
+        var _a;
+        // When resetting the state, the default state may be a function - unwrap it to invoke it.
+        // otherwise, the state won't be properly reset
+        states = new Map(Object.entries((_a = unwrap(defaultState)) !== null && _a !== void 0 ? _a : {}));
+        handlers.reset.forEach((cb) => cb());
+    };
+    const dispose = () => {
+        // Call first dispose as resetting the state would
+        // cause less updates ;)
+        handlers.dispose.forEach((cb) => cb());
+        reset();
+    };
+    const get = (propName) => {
+        handlers.get.forEach((cb) => cb(propName));
+        return states.get(propName);
+    };
+    const set = (propName, value) => {
+        const oldValue = states.get(propName);
+        if (shouldUpdate(value, oldValue, propName)) {
+            states.set(propName, value);
+            handlers.set.forEach((cb) => cb(propName, value, oldValue));
+        }
+    };
+    const state = (typeof Proxy === 'undefined'
+        ? {}
+        : new Proxy(unwrappedState, {
+            get(_, propName) {
+                return get(propName);
+            },
+            ownKeys(_) {
+                return Array.from(states.keys());
+            },
+            getOwnPropertyDescriptor() {
+                return {
+                    enumerable: true,
+                    configurable: true,
+                };
+            },
+            has(_, propName) {
+                return states.has(propName);
+            },
+            set(_, propName, value) {
+                set(propName, value);
+                return true;
+            },
+        }));
+    const on = (eventName, callback) => {
+        handlers[eventName].push(callback);
+        return () => {
+            removeFromArray(handlers[eventName], callback);
+        };
+    };
+    const onChange = (propName, cb) => {
+        const unSet = on('set', (key, newValue) => {
+            if (key === propName) {
+                cb(newValue);
+            }
+        });
+        // We need to unwrap the defaultState because it might be a function.
+        // Otherwise we might not be sending the right reset value.
+        const unReset = on('reset', () => cb(unwrap(defaultState)[propName]));
+        return () => {
+            unSet();
+            unReset();
+        };
+    };
+    const use = (...subscriptions) => {
+        const unsubs = subscriptions.reduce((unsubs, subscription) => {
+            if (subscription.set) {
+                unsubs.push(on('set', subscription.set));
+            }
+            if (subscription.get) {
+                unsubs.push(on('get', subscription.get));
+            }
+            if (subscription.reset) {
+                unsubs.push(on('reset', subscription.reset));
+            }
+            if (subscription.dispose) {
+                unsubs.push(on('dispose', subscription.dispose));
+            }
+            return unsubs;
+        }, []);
+        return () => unsubs.forEach((unsub) => unsub());
+    };
+    const forceUpdate = (key) => {
+        const oldValue = states.get(key);
+        handlers.set.forEach((cb) => cb(key, oldValue, oldValue));
+    };
+    return {
+        state,
+        get,
+        set,
+        on,
+        onChange,
+        use,
+        dispose,
+        reset,
+        forceUpdate,
+    };
+};
+const removeFromArray = (array, item) => {
+    const index = array.indexOf(item);
+    if (index >= 0) {
+        array[index] = array[array.length - 1];
+        array.length--;
+    }
+};
+
+const createStore = (defaultState, shouldUpdate) => {
+    const map = createObservableMap(defaultState, shouldUpdate);
+    map.use(stencilSubscription());
+    return map;
+};
 
 const accordionCss = ":host{display:block}*,*::after,*::before{box-sizing:border-box}";
 
 const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLElement {
   updateVariant(variant = "default") {
-    this.accordionState.variant = variant || "default";
+    this.accordionState.variant = variant;
   }
   updateReverseAlign(reverseAlign) {
     this.accordionState.reverseAlign = reverseAlign;
   }
-  updateAllowMultipleOpen(allowMultipleOpen) {
-    this.accordionState.allowMultipleOpen = allowMultipleOpen;
-    if (!allowMultipleOpen) {
-      const openSections = Array.from(this.host.querySelectorAll(":scope > dso-accordion-section[open]"));
-      // By removing the first section, it is kept open;
-      openSections.shift();
-      openSections.forEach((section) => this.controlOpenAttribute(section, false));
-    }
-  }
   /**
    * @internal
    */
   async _getState() {
     return this.accordionState;
   }
-  /**
-   * Toggle a section. Pass the `<dso-accordion-section>` element or the index of the section.
-   * @param sectionElement The section element that needs to toggle
-   * @param event The event that the user triggered
-   * @returns The state of the section
-   */
-  async toggleSection(sectionElement, event) {
-    const sections = Array.from(this.host.querySelectorAll(":scope > dso-accordion-section"));
-    if (typeof sectionElement === "number") {
-      const section = sections[sectionElement];
-      if (section instanceof HTMLElement) {
-        sectionElement = section;
-      }
-    }
-    if (!(sectionElement instanceof HTMLElement) || !sections.includes(sectionElement)) {
-      return;
-    }
-    const sectionIsOpen = this.isSectionOpen(sectionElement);
-    if (this.allowMultipleOpen) {
-      this.controlOpenAttribute(sectionElement, !sectionIsOpen);
-      this.emitToggleEvent(sectionElement, sections, event);
-      return !sectionIsOpen;
-    }
-    if (sectionIsOpen) {
-      this.controlOpenAttribute(sectionElement, false);
-      this.emitToggleEvent(sectionElement, sections, event);
-      return false;
-    }
-    await this.closeOpenSections();
-    this.controlOpenAttribute(sectionElement, true);
-    this.emitToggleEvent(sectionElement, sections, event);
-    return true;
-  }
-  /**
-   * Emitted when the animation of opening or closing ends.
-   */
-  async animationEnd(sectionElement) {
-    this.dsoToggleSectionAnimationEnd.emit({
-      section: {
-        element: sectionElement,
-        open: this.isSectionOpen(sectionElement),
-      },
-    });
-  }
-  /**
-   * Closes all sections belonging to this accordion.
-   */
-  async closeOpenSections() {
-    const sections = Array.from(this.host.querySelectorAll(":scope > dso-accordion-section"));
-    const openSections = sections.filter((s) => this.isSectionOpen(s));
-    openSections.forEach((section) => this.controlOpenAttribute(section, false));
-  }
-  // These checks are needed for a React timing issue.
   componentWillLoad() {
-    if (this.accordionState.variant !== this.variant) {
-      this.accordionState.variant = this.variant || "default";
-    }
-    if (this.accordionState.reverseAlign !== this.reverseAlign) {
-      this.accordionState.reverseAlign = this.reverseAlign;
-    }
-    if (this.accordionState.allowMultipleOpen !== this.allowMultipleOpen) {
-      this.accordionState.allowMultipleOpen = this.allowMultipleOpen;
-    }
+    this.accordionState.variant = this.variant;
+    this.accordionState.reverseAlign = this.reverseAlign;
   }
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.dsoToggleSection = createEvent(this, "dsoToggleSection", 7);
-    this.dsoToggleSectionAnimationEnd = createEvent(this, "dsoToggleSectionAnimationEnd", 7);
     this.variant = "default";
     this.reverseAlign = false;
-    this.allowMultipleOpen = false;
-    const { state } = createStore({
-      variant: this.variant || "default",
-      reverseAlign: this.reverseAlign,
-      allowMultipleOpen: this.allowMultipleOpen,
-    });
+    const { state } = createStore({});
     this.accordionState = state;
   }
   render() {
-    return (h(Host, { class: {
-        "dso-accordion": true,
-      } }, h("slot", null)));
-  }
-  emitToggleEvent(sectionElement, sections, e) {
-    this.dsoToggleSection.emit({
-      originalEvent: e,
-      section: {
-        element: sectionElement,
-        open: this.isSectionOpen(sectionElement),
-      },
-      sections,
-    });
-  }
-  isSectionOpen(sectionElement) {
-    return typeof sectionElement.getAttribute("open") === "string";
-  }
-  controlOpenAttribute(sectionElement, setAttribute) {
-    if (setAttribute) {
-      sectionElement.setAttribute("open", "");
-    }
-    else {
-      sectionElement.removeAttribute("open");
-    }
+    return (h(Host, { class: "dso-accordion" }, h("slot", null)));
   }
   get host() { return this; }
   static get watchers() { return {
     "variant": ["updateVariant"],
-    "reverseAlign": ["updateReverseAlign"],
-    "allowMultipleOpen": ["updateAllowMultipleOpen"]
+    "reverseAlign": ["updateReverseAlign"]
   }; }
   static get style() { return accordionCss; }
 }, [1, "dso-accordion", {
     "variant": [513],
     "reverseAlign": [516, "reverse-align"],
-    "allowMultipleOpen": [516, "allow-multiple-open"],
-    "_getState": [64],
-    "toggleSection": [64],
-    "animationEnd": [64],
-    "closeOpenSections": [64]
+    "_getState": [64]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

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

@@ -1 +1 @@
-{"file":"dso-accordion.js","mappings":"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","names":[],"sources":["./src/components/accordion/accordion.scss?tag=dso-accordion&encapsulation=shadow","./src/components/accordion/accordion.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n","import {\r\n  h,\r\n  Component,\r\n  ComponentInterface,\r\n  Prop,\r\n  Host,\r\n  Method,\r\n  Watch,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n} from \"@stencil/core\";\r\n\r\nimport {\r\n  AccordionInternalState,\r\n  AccordionSectionToggleAnimationEndEvent,\r\n  AccordionSectionToggleEvent,\r\n  AccordionVariant,\r\n} from \"./accordion.interfaces\";\r\n\r\nimport { createStore } from \"@stencil/store\";\r\n\r\n@Component({\r\n  tag: \"dso-accordion\",\r\n  styleUrl: \"accordion.scss\",\r\n  shadow: true,\r\n})\r\nexport class Accordion implements ComponentInterface {\r\n  private accordionState: AccordionInternalState;\r\n\r\n  @Element()\r\n  host!: HTMLDsoAccordionElement;\r\n\r\n  /**\r\n   * The variant of the Accordion.\r\n   */\r\n  @Prop({ reflect: true })\r\n  variant?: AccordionVariant = \"default\";\r\n\r\n  /**\r\n   * Places the chevron at the opposite side. Note: this mode does not display `state`, `attachmentCount` or `status` props on child `<dso-accordion-section>` elements\r\n   */\r\n  @Prop({ reflect: true })\r\n  reverseAlign = false;\r\n\r\n  /**\r\n   * Allows multiple sections to be open at the same time.\r\n   */\r\n  @Prop({ reflect: true })\r\n  allowMultipleOpen = false;\r\n\r\n  /**\r\n   * Emitted when a section is toggled.\r\n   *\r\n   * `event.detail.originalEvent` contains the original `MouseEvent` when the section is toggled by clicking on the header\r\n   * `event.detail.section` contains the toggled section and its new opened value.\\\r\n   * `event.detail.sections` contains all `<dso-accordion-section>` elements belonging to this accordion.\r\n   */\r\n  @Event()\r\n  dsoToggleSection!: EventEmitter<AccordionSectionToggleEvent>;\r\n\r\n  /**\r\n   * Event emitted when the accordion section completes its toggle animation.\r\n   */\r\n  @Event()\r\n  dsoToggleSectionAnimationEnd!: EventEmitter<AccordionSectionToggleAnimationEndEvent>;\r\n\r\n  @Watch(\"variant\")\r\n  updateVariant(variant: AccordionVariant = \"default\") {\r\n    this.accordionState.variant = variant || \"default\";\r\n  }\r\n\r\n  @Watch(\"reverseAlign\")\r\n  updateReverseAlign(reverseAlign: boolean) {\r\n    this.accordionState.reverseAlign = reverseAlign;\r\n  }\r\n\r\n  @Watch(\"allowMultipleOpen\")\r\n  updateAllowMultipleOpen(allowMultipleOpen: boolean) {\r\n    this.accordionState.allowMultipleOpen = allowMultipleOpen;\r\n\r\n    if (!allowMultipleOpen) {\r\n      const openSections = Array.from(this.host.querySelectorAll<HTMLElement>(\":scope > dso-accordion-section[open]\"));\r\n\r\n      // By removing the first section, it is kept open;\r\n      openSections.shift();\r\n\r\n      openSections.forEach((section) => this.controlOpenAttribute(section, false));\r\n    }\r\n  }\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  @Method()\r\n  async _getState(): Promise<AccordionInternalState> {\r\n    return this.accordionState;\r\n  }\r\n\r\n  /**\r\n   * Toggle a section. Pass the `<dso-accordion-section>` element or the index of the section.\r\n   * @param sectionElement The section element that needs to toggle\r\n   * @param event The event that the user triggered\r\n   * @returns The state of the section\r\n   */\r\n  @Method()\r\n  async toggleSection(sectionElement: HTMLElement | number, event?: MouseEvent): Promise<undefined | boolean> {\r\n    const sections = Array.from(this.host.querySelectorAll<HTMLElement>(\":scope > dso-accordion-section\"));\r\n\r\n    if (typeof sectionElement === \"number\") {\r\n      const section = sections[sectionElement];\r\n      if (section instanceof HTMLElement) {\r\n        sectionElement = section;\r\n      }\r\n    }\r\n\r\n    if (!(sectionElement instanceof HTMLElement) || !sections.includes(sectionElement)) {\r\n      return;\r\n    }\r\n\r\n    const sectionIsOpen = this.isSectionOpen(sectionElement);\r\n\r\n    if (this.allowMultipleOpen) {\r\n      this.controlOpenAttribute(sectionElement, !sectionIsOpen);\r\n      this.emitToggleEvent(sectionElement, sections, event);\r\n      return !sectionIsOpen;\r\n    }\r\n\r\n    if (sectionIsOpen) {\r\n      this.controlOpenAttribute(sectionElement, false);\r\n      this.emitToggleEvent(sectionElement, sections, event);\r\n\r\n      return false;\r\n    }\r\n\r\n    await this.closeOpenSections();\r\n\r\n    this.controlOpenAttribute(sectionElement, true);\r\n    this.emitToggleEvent(sectionElement, sections, event);\r\n\r\n    return true;\r\n  }\r\n\r\n  /**\r\n   * Emitted when the animation of opening or closing ends.\r\n   */\r\n  @Method()\r\n  async animationEnd(sectionElement: HTMLElement): Promise<void> {\r\n    this.dsoToggleSectionAnimationEnd.emit({\r\n      section: {\r\n        element: sectionElement,\r\n        open: this.isSectionOpen(sectionElement),\r\n      },\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Closes all sections belonging to this accordion.\r\n   */\r\n  @Method()\r\n  async closeOpenSections(): Promise<void> {\r\n    const sections = Array.from(this.host.querySelectorAll<HTMLElement>(\":scope > dso-accordion-section\"));\r\n\r\n    const openSections = sections.filter((s) => this.isSectionOpen(s));\r\n    openSections.forEach((section) => this.controlOpenAttribute(section, false));\r\n  }\r\n\r\n  // These checks are needed for a React timing issue.\r\n  componentWillLoad() {\r\n    if (this.accordionState.variant !== this.variant) {\r\n      this.accordionState.variant = this.variant || \"default\";\r\n    }\r\n\r\n    if (this.accordionState.reverseAlign !== this.reverseAlign) {\r\n      this.accordionState.reverseAlign = this.reverseAlign;\r\n    }\r\n\r\n    if (this.accordionState.allowMultipleOpen !== this.allowMultipleOpen) {\r\n      this.accordionState.allowMultipleOpen = this.allowMultipleOpen;\r\n    }\r\n  }\r\n\r\n  constructor() {\r\n    const { state } = createStore<AccordionInternalState>({\r\n      variant: this.variant || \"default\",\r\n      reverseAlign: this.reverseAlign,\r\n      allowMultipleOpen: this.allowMultipleOpen,\r\n    });\r\n\r\n    this.accordionState = state;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host\r\n        class={{\r\n          \"dso-accordion\": true,\r\n        }}\r\n      >\r\n        <slot></slot>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  private emitToggleEvent(sectionElement: HTMLElement, sections: HTMLElement[], e?: MouseEvent): void {\r\n    this.dsoToggleSection.emit({\r\n      originalEvent: e,\r\n      section: {\r\n        element: sectionElement,\r\n        open: this.isSectionOpen(sectionElement),\r\n      },\r\n      sections,\r\n    });\r\n  }\r\n\r\n  private isSectionOpen(sectionElement: HTMLElement): boolean {\r\n    return typeof sectionElement.getAttribute(\"open\") === \"string\";\r\n  }\r\n\r\n  private controlOpenAttribute(sectionElement: HTMLElement, setAttribute: boolean): void {\r\n    if (setAttribute) {\r\n      sectionElement.setAttribute(\"open\", \"\");\r\n    } else {\r\n      sectionElement.removeAttribute(\"open\");\r\n    }\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-accordion.js","mappings":"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","names":[],"sources":["../../node_modules/@stencil/store/dist/index.mjs","./src/components/accordion/accordion.scss?tag=dso-accordion&encapsulation=shadow","./src/components/accordion/accordion.tsx"],"sourcesContent":["import { getRenderingRef, forceUpdate } from '@stencil/core';\n\nconst appendToMap = (map, propName, value) => {\n    const items = map.get(propName);\n    if (!items) {\n        map.set(propName, [value]);\n    }\n    else if (!items.includes(value)) {\n        items.push(value);\n    }\n};\nconst debounce = (fn, ms) => {\n    let timeoutId;\n    return (...args) => {\n        if (timeoutId) {\n            clearTimeout(timeoutId);\n        }\n        timeoutId = setTimeout(() => {\n            timeoutId = 0;\n            fn(...args);\n        }, ms);\n    };\n};\n\n/**\n * Check if a possible element isConnected.\n * The property might not be there, so we check for it.\n *\n * We want it to return true if isConnected is not a property,\n * otherwise we would remove these elements and would not update.\n *\n * Better leak in Edge than to be useless.\n */\nconst isConnected = (maybeElement) => !('isConnected' in maybeElement) || maybeElement.isConnected;\nconst cleanupElements = debounce((map) => {\n    for (let key of map.keys()) {\n        map.set(key, map.get(key).filter(isConnected));\n    }\n}, 2000);\nconst stencilSubscription = () => {\n    if (typeof getRenderingRef !== 'function') {\n        // If we are not in a stencil project, we do nothing.\n        // This function is not really exported by @stencil/core.\n        return {};\n    }\n    const elmsToUpdate = new Map();\n    return {\n        dispose: () => elmsToUpdate.clear(),\n        get: (propName) => {\n            const elm = getRenderingRef();\n            if (elm) {\n                appendToMap(elmsToUpdate, propName, elm);\n            }\n        },\n        set: (propName) => {\n            const elements = elmsToUpdate.get(propName);\n            if (elements) {\n                elmsToUpdate.set(propName, elements.filter(forceUpdate));\n            }\n            cleanupElements(elmsToUpdate);\n        },\n        reset: () => {\n            elmsToUpdate.forEach((elms) => elms.forEach(forceUpdate));\n            cleanupElements(elmsToUpdate);\n        },\n    };\n};\n\nconst unwrap = (val) => (typeof val === 'function' ? val() : val);\nconst createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) => {\n    const unwrappedState = unwrap(defaultState);\n    let states = new Map(Object.entries(unwrappedState !== null && unwrappedState !== void 0 ? unwrappedState : {}));\n    const handlers = {\n        dispose: [],\n        get: [],\n        set: [],\n        reset: [],\n    };\n    const reset = () => {\n        var _a;\n        // When resetting the state, the default state may be a function - unwrap it to invoke it.\n        // otherwise, the state won't be properly reset\n        states = new Map(Object.entries((_a = unwrap(defaultState)) !== null && _a !== void 0 ? _a : {}));\n        handlers.reset.forEach((cb) => cb());\n    };\n    const dispose = () => {\n        // Call first dispose as resetting the state would\n        // cause less updates ;)\n        handlers.dispose.forEach((cb) => cb());\n        reset();\n    };\n    const get = (propName) => {\n        handlers.get.forEach((cb) => cb(propName));\n        return states.get(propName);\n    };\n    const set = (propName, value) => {\n        const oldValue = states.get(propName);\n        if (shouldUpdate(value, oldValue, propName)) {\n            states.set(propName, value);\n            handlers.set.forEach((cb) => cb(propName, value, oldValue));\n        }\n    };\n    const state = (typeof Proxy === 'undefined'\n        ? {}\n        : new Proxy(unwrappedState, {\n            get(_, propName) {\n                return get(propName);\n            },\n            ownKeys(_) {\n                return Array.from(states.keys());\n            },\n            getOwnPropertyDescriptor() {\n                return {\n                    enumerable: true,\n                    configurable: true,\n                };\n            },\n            has(_, propName) {\n                return states.has(propName);\n            },\n            set(_, propName, value) {\n                set(propName, value);\n                return true;\n            },\n        }));\n    const on = (eventName, callback) => {\n        handlers[eventName].push(callback);\n        return () => {\n            removeFromArray(handlers[eventName], callback);\n        };\n    };\n    const onChange = (propName, cb) => {\n        const unSet = on('set', (key, newValue) => {\n            if (key === propName) {\n                cb(newValue);\n            }\n        });\n        // We need to unwrap the defaultState because it might be a function.\n        // Otherwise we might not be sending the right reset value.\n        const unReset = on('reset', () => cb(unwrap(defaultState)[propName]));\n        return () => {\n            unSet();\n            unReset();\n        };\n    };\n    const use = (...subscriptions) => {\n        const unsubs = subscriptions.reduce((unsubs, subscription) => {\n            if (subscription.set) {\n                unsubs.push(on('set', subscription.set));\n            }\n            if (subscription.get) {\n                unsubs.push(on('get', subscription.get));\n            }\n            if (subscription.reset) {\n                unsubs.push(on('reset', subscription.reset));\n            }\n            if (subscription.dispose) {\n                unsubs.push(on('dispose', subscription.dispose));\n            }\n            return unsubs;\n        }, []);\n        return () => unsubs.forEach((unsub) => unsub());\n    };\n    const forceUpdate = (key) => {\n        const oldValue = states.get(key);\n        handlers.set.forEach((cb) => cb(key, oldValue, oldValue));\n    };\n    return {\n        state,\n        get,\n        set,\n        on,\n        onChange,\n        use,\n        dispose,\n        reset,\n        forceUpdate,\n    };\n};\nconst removeFromArray = (array, item) => {\n    const index = array.indexOf(item);\n    if (index >= 0) {\n        array[index] = array[array.length - 1];\n        array.length--;\n    }\n};\n\nconst createStore = (defaultState, shouldUpdate) => {\n    const map = createObservableMap(defaultState, shouldUpdate);\n    map.use(stencilSubscription());\n    return map;\n};\n\nexport { createObservableMap, createStore };\n","@use \"~dso-toolkit/src/utilities\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n","import { h, Component, ComponentInterface, Prop, Host, Method, Watch, Element } from \"@stencil/core\";\r\n\r\nimport { AccordionInternalState, AccordionVariant } from \"./accordion.interfaces\";\r\n\r\nimport { createStore } from \"@stencil/store\";\r\n\r\n@Component({\r\n  tag: \"dso-accordion\",\r\n  styleUrl: \"accordion.scss\",\r\n  shadow: true,\r\n})\r\nexport class Accordion implements ComponentInterface {\r\n  private accordionState: AccordionInternalState;\r\n\r\n  @Element()\r\n  host!: HTMLDsoAccordionElement;\r\n\r\n  /**\r\n   * The variant of the Accordion.\r\n   */\r\n  @Prop({ reflect: true })\r\n  variant: AccordionVariant = \"default\";\r\n\r\n  /**\r\n   * Places the chevron at the opposite side.\r\n   *\r\n   * Note: this mode does not display `state`, `attachmentCount` or `status` props on Accordion Sections\r\n   */\r\n  @Prop({ reflect: true })\r\n  reverseAlign = false;\r\n\r\n  @Watch(\"variant\")\r\n  updateVariant(variant: AccordionVariant = \"default\") {\r\n    this.accordionState.variant = variant;\r\n  }\r\n\r\n  @Watch(\"reverseAlign\")\r\n  updateReverseAlign(reverseAlign: boolean) {\r\n    this.accordionState.reverseAlign = reverseAlign;\r\n  }\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  @Method()\r\n  async _getState(): Promise<AccordionInternalState> {\r\n    return this.accordionState;\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.accordionState.variant = this.variant;\r\n    this.accordionState.reverseAlign = this.reverseAlign;\r\n  }\r\n\r\n  constructor() {\r\n    const { state } = createStore<AccordionInternalState>({});\r\n\r\n    this.accordionState = state;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host class=\"dso-accordion\">\r\n        <slot></slot>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/dso-alert.js

@@ -1,53 +1,4 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { c as clsx } from './clsx.m.js';
-import { d as defineCustomElement$2 } from './icon.js';
-
-const alertCss = ":host{display:block}:host(:not(:first-child)){margin-top:24px}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.alert{border:1px solid transparent;line-height:1.5;margin-bottom:24px;min-height:64px;position:relative}@media screen and (min-width: 481px){.alert{padding:19px 16px 19px 63px}}@media screen and (max-width: 480px){.alert{padding:63px 16px 16px}}.alert:not(:first-child){margin-top:24px}.alert.alert-success{color:#000;background-color:#e4f1d4;border-color:#e4f1d4}.alert.alert-error{color:#000;background-color:#f5d8dc;border-color:#f5d8dc}.alert.alert-warning{color:#000;background-color:#f8f6cc;border-color:#f8f6cc}.alert.alert-info{color:#000;background-color:#e1ecf7;border-color:#e1ecf7}.alert dso-icon{left:15px;position:absolute;top:15px;height:32px;width:32px}";
-
-const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.status = undefined;
-    this.roleAlert = undefined;
-  }
-  render() {
-    const status = Alert.statusMap.get(this.status);
-    if (!status) {
-      throw new Error(`Invalid status ${this.status}`);
-    }
-    return (h("div", { class: clsx("alert", `alert-${this.status}`), role: this.roleAlert ? "alert" : undefined }, h("dso-icon", { icon: "status-" + this.status }), h("span", { class: "sr-only" }, status, ":"), h("slot", null)));
-  }
-  static get style() { return alertCss; }
-}, [1, "dso-alert", {
-    "status": [1],
-    "roleAlert": [4, "role-alert"]
-  }]);
-Alert.statusMap = new Map([
-  ["success", "Gelukt"],
-  ["info", "Opmerking"],
-  ["warning", "Waarschuwing"],
-  ["error", "Fout"],
-]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["dso-alert", "dso-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "dso-alert":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, Alert);
-      }
-      break;
-    case "dso-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
+import { A as Alert, d as defineCustomElement$1 } from './alert.js';
 
 const DsoAlert = Alert;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/dso-alert.js.map

@@ -1 +1 @@
-{"file":"dso-alert.js","mappings":";;;;AAAA,MAAM,QAAQ,GAAG,83BAA83B;;MCQl4B,KAAK;;;;;;;;EAoBhB,MAAM;IACJ,MAAM,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAChD,IAAI,CAAC,MAAM,EAAE;MACX,MAAM,IAAI,KAAK,CAAC,kBAAkB,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;KAClD;IAED,QACE,WAAK,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE,SAAS,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,SAAS,GAAG,OAAO,GAAG,SAAS,IAC3F,gBAAU,IAAI,EAAE,SAAS,GAAG,IAAI,CAAC,MAAM,GAAa,EACpD,YAAM,KAAK,EAAC,SAAS,IAAE,MAAM,MAAS,EACtC,eAAa,CACT,EACN;GACH;;;;;;AApBc,eAAS,GAAG,IAAI,GAAG,CAAiB;EACjD,CAAC,SAAS,EAAE,QAAQ,CAAC;EACrB,CAAC,MAAM,EAAE,WAAW,CAAC;EACrB,CAAC,SAAS,EAAE,cAAc,CAAC;EAC3B,CAAC,OAAO,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/alert/alert.scss?tag=dso-alert&encapsulation=shadow","./src/components/alert/alert.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/alert\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n:host(:not(:first-child)) {\r\n  margin-top: units.$u3;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.alert {\r\n  @include alert.root();\r\n\r\n  dso-icon {\r\n    @include alert.icon-position();\r\n\r\n    height: units.$u4;\r\n    width: units.$u4;\r\n  }\r\n}\r\n","import { Component, h, Prop } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\n@Component({\r\n  tag: \"dso-alert\",\r\n  styleUrl: \"alert.scss\",\r\n  shadow: true,\r\n})\r\nexport class Alert {\r\n  /**\r\n   * Set status of alert\r\n   */\r\n  @Prop()\r\n  status!: \"success\" | \"info\" | \"warning\" | \"error\";\r\n\r\n  /**\r\n   * Whether or not to show the role attribute with value \"alert\". To control the tooltip add the `role-alert` attribute.\r\n   */\r\n  @Prop()\r\n  roleAlert?: boolean;\r\n\r\n  private static statusMap = new Map<string, string>([\r\n    [\"success\", \"Gelukt\"],\r\n    [\"info\", \"Opmerking\"],\r\n    [\"warning\", \"Waarschuwing\"],\r\n    [\"error\", \"Fout\"],\r\n  ]);\r\n\r\n  render() {\r\n    const status = Alert.statusMap.get(this.status);\r\n    if (!status) {\r\n      throw new Error(`Invalid status ${this.status}`);\r\n    }\r\n\r\n    return (\r\n      <div class={clsx(\"alert\", `alert-${this.status}`)} role={this.roleAlert ? \"alert\" : undefined}>\r\n        <dso-icon icon={\"status-\" + this.status}></dso-icon>\r\n        <span class=\"sr-only\">{status}:</span>\r\n        <slot></slot>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-alert.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/dso-annotation-button.js

@@ -1,43 +1,4 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { A as AnnotationService } from './annotation.service.js';
-import { d as defineCustomElement$2 } from './icon.js';
-
-const annotationButtonCss = "dso-annotation-button{display:block}";
-
-const AnnotationButton = /*@__PURE__*/ proxyCustomElement(class AnnotationButton extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.identifier = undefined;
-  }
-  componentDidLoad() {
-    this.annotationOutput = document.querySelector(`dso-annotation-output[identifier='${this.identifier}']`);
-  }
-  render() {
-    return (h("button", { type: "button", class: "dso-tertiary", "aria-controls": this.identifier, "aria-expanded": AnnotationService.state[this.identifier] ? "true" : "false", onClick: (e) => { var _a; return (_a = this.annotationOutput) === null || _a === void 0 ? void 0 : _a._toggleAnnotation(e, this.identifier); } }, h("dso-icon", { icon: "label" }), h("span", { class: "sr-only" }, "Toelichting bekijken")));
-  }
-  static get style() { return annotationButtonCss; }
-}, [0, "dso-annotation-button", {
-    "identifier": [1]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["dso-annotation-button", "dso-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "dso-annotation-button":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, AnnotationButton);
-      }
-      break;
-    case "dso-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
+import { A as AnnotationButton, d as defineCustomElement$1 } from './annotation-button.js';
 
 const DsoAnnotationButton = AnnotationButton;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/dso-annotation-button.js.map

@@ -1 +1 @@
-{"file":"dso-annotation-button.js","mappings":";;;;AAAA,MAAM,mBAAmB,GAAG,sCAAsC;;MCSrD,gBAAgB;;;;;;EAS3B,gBAAgB;IACd,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC,aAAa,CAAC,qCAAqC,IAAI,CAAC,UAAU,IAAI,CAAC,CAAC;GAC1G;EAED,MAAM;IACJ,QACE,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,cAAc,mBACL,IAAI,CAAC,UAAU,mBACf,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,MAAM,GAAG,OAAO,EAC1E,OAAO,EAAE,CAAC,CAAC,eAAK,OAAA,MAAA,IAAI,CAAC,gBAAgB,0CAAE,iBAAiB,CAAC,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,CAAA,EAAA,IAE5E,gBAAU,IAAI,EAAC,OAAO,GAAY,EAClC,YAAM,KAAK,EAAC,SAAS,2BAA4B,CAC1C,EACT;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/annotation-button/annotation-button.scss?tag=dso-annotation-button","./src/components/annotation-button/annotation-button.tsx"],"sourcesContent":["dso-annotation-button {\r\n  display: block;\r\n}\r\n","import { Component, ComponentInterface, h, Prop } from \"@stencil/core\";\r\nimport { AnnotationService } from \"../../services/annotation.service\";\r\n\r\n@Component({\r\n  tag: \"dso-annotation-button\",\r\n  styleUrl: \"annotation-button.scss\",\r\n  // We disable shadowdom for a11y reasons (aria-controls pointing to element inside another component)\r\n  shadow: false,\r\n})\r\nexport class AnnotationButton implements ComponentInterface {\r\n  /**\r\n   * To link the Annotation Button with `aria-controls` to a different element, most likely an Annotation Output.\r\n   */\r\n  @Prop()\r\n  identifier!: string;\r\n\r\n  private annotationOutput!: HTMLDsoAnnotationOutputElement | null;\r\n\r\n  componentDidLoad() {\r\n    this.annotationOutput = document.querySelector(`dso-annotation-output[identifier='${this.identifier}']`);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <button\r\n        type=\"button\"\r\n        class=\"dso-tertiary\"\r\n        aria-controls={this.identifier}\r\n        aria-expanded={AnnotationService.state[this.identifier] ? \"true\" : \"false\"}\r\n        onClick={(e) => this.annotationOutput?._toggleAnnotation(e, this.identifier)}\r\n      >\r\n        <dso-icon icon=\"label\"></dso-icon>\r\n        <span class=\"sr-only\">Toelichting bekijken</span>\r\n      </button>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-annotation-button.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}