@dso-toolkit/core 62.24.0 → 62.26.0

package/dist/esm/dso-advanced-select.entry.js.map

@@ -1 +1 @@
-{"file":"dso-advanced-select.entry.js","mappings":"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","names":[],"sources":["src/components/advanced-select/advanced-select.scss?tag=dso-advanced-select&encapsulation=shadow","src/components/advanced-select/advanced-select.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\r\n@use \"~dso-toolkit/src/components/advanced-select\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.active-option {\r\n  display: flex;\r\n  inline-size: 100%;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  padding: 0;\r\n  border: 1px solid advanced-select.$border-color;\r\n  border-radius: advanced-select.$border-radius;\r\n  cursor: pointer;\r\n  background-color: advanced-select.$bg-color;\r\n  line-height: inherit;\r\n  font-family: inherit;\r\n  font-size: inherit;\r\n\r\n  &.open {\r\n    border-radius: advanced-select.$border-radius advanced-select.$border-radius 0 0;\r\n  }\r\n\r\n  dso-icon {\r\n    color: advanced-select.$icon-color;\r\n  }\r\n}\r\n\r\n.active-option-label {\r\n  padding: advanced-select.$vertical-padding advanced-select.$horizontal-padding;\r\n  overflow: hidden;\r\n  /* stylelint-disable-next-line declaration-property-value-disallowed-list -- Nodig om lange titels op de zelfde regel te houden */\r\n  white-space: nowrap;\r\n  /* stylelint-disable-next-line declaration-property-value-disallowed-list -- Nodig om lange titels op de zelfde regel te houden */\r\n  text-overflow: ellipsis;\r\n}\r\n\r\n.active-option-aside {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: advanced-select.$horizontal-padding * 0.5;\r\n  padding: 0 advanced-select.$horizontal-padding * 0.5;\r\n}\r\n\r\n.badges {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  gap: advanced-select.$vertical-padding;\r\n}\r\n\r\n.groups-container {\r\n  position: relative;\r\n}\r\n\r\n.groups {\r\n  position: absolute;\r\n  inset-block-start: -1px;\r\n  inset-inline-start: 0;\r\n  inline-size: 100%;\r\n  max-block-size: 500px;\r\n  margin: 0;\r\n  padding: 0;\r\n  overflow-y: auto;\r\n  background-color: advanced-select.$bg-color;\r\n  border: 1px solid advanced-select.$border-color;\r\n  border-radius: 0 0 advanced-select.$border-radius advanced-select.$border-radius;\r\n\r\n  li {\r\n    &::marker {\r\n      display: none;\r\n    }\r\n  }\r\n}\r\n\r\n.group {\r\n  border-bottom: 1px solid advanced-select.$hr-color;\r\n\r\n  &:last-child {\r\n    border-bottom: none;\r\n  }\r\n\r\n  .option {\r\n    padding-left: advanced-select.$horizontal-padding * 2 + advanced-select.$option-dot-size * 0.5;\r\n  }\r\n\r\n  .option-label::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    display: block;\r\n    block-size: advanced-select.$option-dot-size;\r\n    inline-size: advanced-select.$option-dot-size;\r\n    inset: advanced-select.$vertical-padding auto auto -#{advanced-select.$option-dot-size * 2};\r\n    border-radius: 50%;\r\n    @include set-colors.apply(advanced-select.$default-variant-color, $icons: false, $links: false);\r\n  }\r\n}\r\n\r\n.group-label {\r\n  margin: 0;\r\n  padding: advanced-select.$vertical-padding advanced-select.$horizontal-padding;\r\n  color: advanced-select.$group-label-color;\r\n  font-size: advanced-select.$group-label-font-size;\r\n  font-weight: advanced-select.$group-label-font-weight;\r\n  border-bottom: 1px solid advanced-select.$hr-color;\r\n}\r\n\r\n.group-link {\r\n  display: block;\r\n  padding: advanced-select.$group-link-horizontal-padding advanced-select.$group-link-vertical-padding;\r\n  text-align: end;\r\n  color: advanced-select.$group-link-color;\r\n  text-decoration: none;\r\n\r\n  &:hover {\r\n    text-decoration: underline;\r\n  }\r\n\r\n  dso-icon {\r\n    color: advanced-select.$redirect-icon-color;\r\n  }\r\n}\r\n\r\n.group-info .option-label::before {\r\n  @include set-colors.apply(advanced-select.$info-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-primary .option-label::before {\r\n  @include set-colors.apply(advanced-select.$primary-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-success .option-label::before {\r\n  @include set-colors.apply(advanced-select.$success-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-warning .option-label::before {\r\n  @include set-colors.apply(advanced-select.$warning-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-danger .option-label::before {\r\n  @include set-colors.apply(advanced-select.$danger-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-error .option-label::before {\r\n  @include set-colors.apply(advanced-select.$error-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-attention .option-label::before {\r\n  @include set-colors.apply(advanced-select.$attention-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.options {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\n.option {\r\n  display: block;\r\n  inline-size: 100%;\r\n  padding: advanced-select.$vertical-padding * 2 advanced-select.$horizontal-padding;\r\n  cursor: pointer;\r\n  line-height: inherit;\r\n  font-family: inherit;\r\n  font-size: inherit;\r\n  border: none;\r\n  text-align: left;\r\n  background-color: advanced-select.$bg-color;\r\n\r\n  &:hover {\r\n    background-color: advanced-select.$option-hover-bg-color;\r\n\r\n    .option-label {\r\n      color: advanced-select.$option-hover-color;\r\n      font-weight: advanced-select.$option-hover-font-weight;\r\n    }\r\n  }\r\n}\r\n\r\n.option.option-active .option-label {\r\n  color: advanced-select.$option-active-color;\r\n  font-weight: advanced-select.$option-active-font-weight;\r\n  text-decoration: underline;\r\n}\r\n\r\n.option-label {\r\n  position: relative;\r\n  color: advanced-select.$option-color;\r\n  font-size: advanced-select.$option-font-size;\r\n  font-weight: advanced-select.$option-font-weight;\r\n}\r\n\r\n.option-hint {\r\n  padding-left: 5px;\r\n  color: advanced-select.$option-active-color;\r\n  font-size: advanced-select.$option-font-size;\r\n  font-weight: advanced-select.$option-active-font-weight;\r\n}\r\n\r\n.placeholder {\r\n  margin: 0;\r\n  padding: advanced-select.$vertical-padding * 2 advanced-select.$horizontal-padding;\r\n  color: advanced-select.$option-placeholder-color;\r\n}\r\n","import {\r\n  Component,\r\n  ComponentInterface,\r\n  Prop,\r\n  h,\r\n  FunctionalComponent,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  State,\r\n  Fragment,\r\n  Listen,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport {\r\n  AdvancedSelectGroup,\r\n  AdvancedSelectGroupRedirect,\r\n  AdvancedSelectOption,\r\n  AdvancedSelectChangeEvent,\r\n  AdvancedSelectOptionOrGroup,\r\n  AdvancedSelectRedirectEvent,\r\n} from \"./advanced-select.models\";\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\nimport { tabbable } from \"tabbable\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\n@Component({\r\n  tag: \"dso-advanced-select\",\r\n  styleUrl: \"advanced-select.scss\",\r\n  shadow: true,\r\n})\r\nexport class AdvancedSelect implements ComponentInterface {\r\n  private trap?: FocusTrap;\r\n\r\n  @Element()\r\n  host!: HTMLDsoAdvancedSelectElement;\r\n\r\n  /**\r\n   * The options to display in the select.\r\n   */\r\n  @Prop()\r\n  options: AdvancedSelectOptionOrGroup<never>[] = [];\r\n\r\n  /**\r\n   * The active option. By object reference.\r\n   */\r\n  @Prop()\r\n  active?: AdvancedSelectOption<never>;\r\n\r\n  /**\r\n   * An extra text for the active option. Only visible in the list of options.\r\n   */\r\n  @Prop()\r\n  activeHint?: string;\r\n\r\n  /**\r\n   * The open state of the options list.\r\n   */\r\n  @State()\r\n  open: boolean = false;\r\n\r\n  /**\r\n   * Emitted when user selects an option\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoChange!: EventEmitter<AdvancedSelectChangeEvent<never>>;\r\n\r\n  /**\r\n   * Emitted when user activates a group redirect link.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoRedirect!: EventEmitter<AdvancedSelectRedirectEvent>;\r\n\r\n  private toggleButtonElementRef: HTMLButtonElement | undefined;\r\n\r\n  @Listen(\"keydown\", { target: \"window\" })\r\n  keyDownListener(event: KeyboardEvent) {\r\n    if (this.open && event.key === \"ArrowUp\") {\r\n      event.preventDefault();\r\n      this.handleTab(-1);\r\n    } else if (this.open && event.key === \"ArrowDown\") {\r\n      event.preventDefault();\r\n      this.handleTab(1);\r\n    }\r\n  }\r\n\r\n  componentDidRender() {\r\n    if (this.open && !this.trap) {\r\n      this.createTrap();\r\n    } else if (!this.open && this.trap) {\r\n      this.removeTrap();\r\n    }\r\n  }\r\n\r\n  private toggleOpen = () => {\r\n    this.open = !this.open;\r\n  };\r\n\r\n  private createTrap() {\r\n    this.trap = createFocusTrap(this.host, {\r\n      clickOutsideDeactivates: true,\r\n      escapeDeactivates: true,\r\n      setReturnFocus: this.toggleButtonElementRef,\r\n      tabbableOptions: {\r\n        getShadowRoot: true,\r\n      },\r\n      onDeactivate: () => {\r\n        this.open = false;\r\n      },\r\n    }).activate();\r\n  }\r\n\r\n  private removeTrap() {\r\n    this.trap?.deactivate();\r\n    delete this.trap;\r\n  }\r\n\r\n  private handleTab(direction: number) {\r\n    const elements = tabbable(this.host, { getShadowRoot: true });\r\n    const currentIndex = elements.findIndex((e) => e === this.host.shadowRoot?.activeElement);\r\n\r\n    let nextIndex = currentIndex + direction;\r\n    if (nextIndex >= elements.length) {\r\n      nextIndex = 0;\r\n    } else if (nextIndex < 0) {\r\n      nextIndex = elements.length - 1;\r\n    }\r\n\r\n    elements[nextIndex]?.focus();\r\n  }\r\n\r\n  private handleOptionClick = (event: MouseEvent, option: AdvancedSelectOption<never>) => {\r\n    this.dsoChange.emit({ originalEvent: event, option });\r\n    this.open = false;\r\n  };\r\n\r\n  private handleRedirectClick = (event: MouseEvent, redirect: AdvancedSelectGroupRedirect) => {\r\n    this.dsoRedirect.emit({ originalEvent: event, isModifiedEvent: isModifiedEvent(event), redirect });\r\n    this.open = false;\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <button\r\n          aria-expanded={this.open.toString()}\r\n          class={clsx([\"active-option\", { open: this.open }])}\r\n          type=\"button\"\r\n          onClick={this.toggleOpen}\r\n          ref={(element) => (this.toggleButtonElementRef = element)}\r\n        >\r\n          <span class=\"active-option-label\">{this.active?.label ?? \"Selecteer een optie\"}</span>\r\n          <span class=\"active-option-aside\">\r\n            {this.options.some(\r\n              (optionOrGroup) => \"summaryCounter\" in optionOrGroup && optionOrGroup?.summaryCounter,\r\n            ) && (\r\n              <span class=\"badges\">\r\n                {this.options\r\n                  .filter(\r\n                    (option): option is AdvancedSelectGroup<never> =>\r\n                      \"options\" in option && \"summaryCounter\" in option && !!option?.summaryCounter,\r\n                  )\r\n                  .map((group) => (\r\n                    <dso-badge status={group.variant ?? \"outline\"}>{group.options.length}</dso-badge>\r\n                  ))}\r\n              </span>\r\n            )}\r\n            <dso-icon icon=\"caret-down\"></dso-icon>\r\n          </span>\r\n        </button>\r\n        {this.open && (\r\n          <div class=\"groups-container\">\r\n            <ul class=\"groups\">\r\n              {this.options.map(\r\n                (optionOrGroup) =>\r\n                  (\"options\" in optionOrGroup && (\r\n                    <li class={clsx([\"group\", { [`group-${optionOrGroup.variant}`]: !!optionOrGroup.variant }])}>\r\n                      <p class=\"group-label\">{optionOrGroup.label}</p>\r\n                      <ul class=\"options\">\r\n                        {optionOrGroup.options.map((option) => (\r\n                          <li>\r\n                            <OptionElement\r\n                              option={option}\r\n                              active={this.active}\r\n                              activeHint={this.activeHint}\r\n                              callback={this.handleOptionClick}\r\n                            />\r\n                          </li>\r\n                        ))}\r\n                      </ul>\r\n                      {optionOrGroup.redirect && (\r\n                        <RedirectElement\r\n                          redirect={optionOrGroup.redirect}\r\n                          callback={this.handleRedirectClick}\r\n                        ></RedirectElement>\r\n                      )}\r\n                    </li>\r\n                  )) ||\r\n                  (\"placeholder\" in optionOrGroup && (\r\n                    <li class=\"group\">\r\n                      <p class=\"group-label\">{optionOrGroup.label}</p>\r\n                      <PlaceholderElement placeholder={optionOrGroup.placeholder}></PlaceholderElement>\r\n                      {optionOrGroup.redirect && (\r\n                        <RedirectElement\r\n                          redirect={optionOrGroup.redirect}\r\n                          callback={this.handleRedirectClick}\r\n                        ></RedirectElement>\r\n                      )}\r\n                    </li>\r\n                  )) || (\r\n                    <li>\r\n                      <OptionElement\r\n                        option={optionOrGroup}\r\n                        active={this.active}\r\n                        activeHint={this.activeHint}\r\n                        callback={this.handleOptionClick}\r\n                      />\r\n                    </li>\r\n                  ),\r\n              )}\r\n            </ul>\r\n          </div>\r\n        )}\r\n      </>\r\n    );\r\n  }\r\n}\r\n\r\nconst PlaceholderElement: FunctionalComponent<{\r\n  placeholder: string;\r\n}> = ({ placeholder }) => <p class=\"placeholder\">{placeholder}</p>;\r\n\r\nconst OptionElement: FunctionalComponent<{\r\n  option: AdvancedSelectOption<never>;\r\n  active: AdvancedSelectOption<never> | undefined;\r\n  activeHint: string | undefined;\r\n  callback: (event: MouseEvent, value: AdvancedSelectOption<never>) => void;\r\n}> = ({ option, active, activeHint, callback }) => (\r\n  <button\r\n    class={clsx([\"option\", { \"option-active\": active === option }])}\r\n    type=\"button\"\r\n    onClick={(e) => callback(e, option)}\r\n  >\r\n    <span class=\"option-label\">{option.label}</span>\r\n    {!!activeHint && active === option && <span class=\"option-hint\">({activeHint})</span>}\r\n  </button>\r\n);\r\n\r\nconst RedirectElement: FunctionalComponent<{\r\n  redirect: AdvancedSelectGroupRedirect;\r\n  callback: (event: MouseEvent, value: AdvancedSelectGroupRedirect) => void;\r\n}> = ({ redirect, callback }) => (\r\n  <a class=\"group-link\" href={redirect.href} onClick={(e) => callback(e, redirect)}>\r\n    {redirect.label}\r\n    <dso-icon icon=\"chevron-right\"></dso-icon>\r\n  </a>\r\n);\r\n"],"version":3}
+{"file":"dso-advanced-select.entry.js","mappings":"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","names":[],"sources":["src/components/advanced-select/advanced-select.scss?tag=dso-advanced-select&encapsulation=shadow","src/components/advanced-select/advanced-select.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\r\n@use \"~dso-toolkit/src/components/advanced-select\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.active-option {\r\n  display: flex;\r\n  inline-size: 100%;\r\n  justify-content: flex-start;\r\n  align-items: center;\r\n  padding: 0;\r\n  border: 1px solid advanced-select.$border-color;\r\n  border-radius: advanced-select.$border-radius;\r\n  cursor: pointer;\r\n  background-color: advanced-select.$bg-color;\r\n  line-height: inherit;\r\n  font-family: inherit;\r\n  font-size: inherit;\r\n\r\n  &.open {\r\n    border-radius: advanced-select.$border-radius advanced-select.$border-radius 0 0;\r\n  }\r\n\r\n  dso-icon {\r\n    color: advanced-select.$icon-color;\r\n  }\r\n\r\n  dso-label {\r\n    margin-inline-start: advanced-select.$inline-padding * 0.5;\r\n  }\r\n}\r\n\r\n.active-option-label {\r\n  padding-block: advanced-select.$block-padding;\r\n  padding-inline: advanced-select.$inline-padding;\r\n  overflow: hidden;\r\n  /* stylelint-disable-next-line declaration-property-value-disallowed-list -- Nodig om lange titels op de zelfde regel te houden */\r\n  white-space: nowrap;\r\n  /* stylelint-disable-next-line declaration-property-value-disallowed-list -- Nodig om lange titels op de zelfde regel te houden */\r\n  text-overflow: ellipsis;\r\n}\r\n\r\n.active-option-aside {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: advanced-select.$inline-padding * 0.5;\r\n  padding-block: 0;\r\n  padding-inline: advanced-select.$inline-padding * 0.5;\r\n  margin-inline-start: auto;\r\n}\r\n\r\n.badges {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  gap: advanced-select.$block-padding;\r\n}\r\n\r\n.groups-container {\r\n  position: relative;\r\n}\r\n\r\n.groups {\r\n  position: absolute;\r\n  inset-block-start: -1px;\r\n  inset-inline-start: 0;\r\n  inline-size: 100%;\r\n  max-block-size: 500px;\r\n  margin: 0;\r\n  padding: 0;\r\n  overflow-y: auto;\r\n  background-color: advanced-select.$bg-color;\r\n  border: 1px solid advanced-select.$border-color;\r\n  border-radius: 0 0 advanced-select.$border-radius advanced-select.$border-radius;\r\n\r\n  li {\r\n    &::marker {\r\n      display: none;\r\n    }\r\n  }\r\n}\r\n\r\n.group {\r\n  border-block-end: 1px solid advanced-select.$hr-color;\r\n\r\n  &:last-child {\r\n    border-block-end: none;\r\n  }\r\n\r\n  .option {\r\n    padding-inline-start: advanced-select.$inline-padding * 2 + advanced-select.$option-dot-size * 0.5;\r\n  }\r\n\r\n  .option-label::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    display: block;\r\n    block-size: advanced-select.$option-dot-size;\r\n    inline-size: advanced-select.$option-dot-size;\r\n    inset-block: advanced-select.$block-padding auto;\r\n    inset-inline: -#{advanced-select.$option-dot-size * 2} auto;\r\n    border-radius: 50%;\r\n    @include set-colors.apply(advanced-select.$default-variant-color, $icons: false, $links: false);\r\n  }\r\n}\r\n\r\n.group-label {\r\n  margin: 0;\r\n  padding-block: advanced-select.$block-padding;\r\n  padding-inline: advanced-select.$inline-padding;\r\n  color: advanced-select.$group-label-color;\r\n  font-size: advanced-select.$group-label-font-size;\r\n  font-weight: advanced-select.$group-label-font-weight;\r\n  border-block-end: 1px solid advanced-select.$hr-color;\r\n}\r\n\r\n.group-link {\r\n  display: block;\r\n  padding-block: advanced-select.$group-link-block-padding;\r\n  padding-inline: advanced-select.$group-link-inline-padding;\r\n  text-align: end;\r\n  color: advanced-select.$group-link-color;\r\n  text-decoration: none;\r\n\r\n  &:hover {\r\n    text-decoration: underline;\r\n  }\r\n\r\n  dso-icon {\r\n    color: advanced-select.$redirect-icon-color;\r\n  }\r\n}\r\n\r\n.group-info .option-label::before {\r\n  @include set-colors.apply(advanced-select.$info-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-primary .option-label::before {\r\n  @include set-colors.apply(advanced-select.$primary-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-success .option-label::before {\r\n  @include set-colors.apply(advanced-select.$success-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-warning .option-label::before {\r\n  @include set-colors.apply(advanced-select.$warning-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-danger .option-label::before {\r\n  @include set-colors.apply(advanced-select.$danger-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-error .option-label::before {\r\n  @include set-colors.apply(advanced-select.$error-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-attention .option-label::before {\r\n  @include set-colors.apply(advanced-select.$attention-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.options {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\n.option {\r\n  display: block;\r\n  inline-size: 100%;\r\n  padding-block: advanced-select.$block-padding * 2;\r\n  padding-inline: advanced-select.$inline-padding;\r\n  cursor: pointer;\r\n  line-height: inherit;\r\n  font-family: inherit;\r\n  font-size: inherit;\r\n  border: none;\r\n  text-align: start;\r\n  background-color: advanced-select.$bg-color;\r\n\r\n  &:hover {\r\n    background-color: advanced-select.$option-hover-bg-color;\r\n\r\n    .option-label {\r\n      color: advanced-select.$option-hover-color;\r\n      font-weight: advanced-select.$option-hover-font-weight;\r\n    }\r\n  }\r\n}\r\n\r\n.option.option-active .option-label {\r\n  color: advanced-select.$option-active-color;\r\n  font-weight: advanced-select.$option-active-font-weight;\r\n  text-decoration: underline;\r\n}\r\n\r\n.option-label {\r\n  position: relative;\r\n  color: advanced-select.$option-color;\r\n  font-size: advanced-select.$option-font-size;\r\n  font-weight: advanced-select.$option-font-weight;\r\n}\r\n\r\n.option-hint {\r\n  padding-inline-start: 5px;\r\n  color: advanced-select.$option-active-color;\r\n  font-size: advanced-select.$option-font-size;\r\n  font-weight: advanced-select.$option-active-font-weight;\r\n}\r\n\r\n.placeholder {\r\n  margin: 0;\r\n  padding-block: advanced-select.$block-padding * 2;\r\n  padding-inline: advanced-select.$inline-padding;\r\n  color: advanced-select.$option-placeholder-color;\r\n}\r\n","import {\r\n  Component,\r\n  ComponentInterface,\r\n  Prop,\r\n  h,\r\n  FunctionalComponent,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  State,\r\n  Fragment,\r\n  Listen,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport {\r\n  AdvancedSelectGroup,\r\n  AdvancedSelectGroupRedirect,\r\n  AdvancedSelectOption,\r\n  AdvancedSelectChangeEvent,\r\n  AdvancedSelectOptionOrGroup,\r\n  AdvancedSelectRedirectEvent,\r\n} from \"./advanced-select.interfaces\";\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\nimport { tabbable } from \"tabbable\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\n@Component({\r\n  tag: \"dso-advanced-select\",\r\n  styleUrl: \"advanced-select.scss\",\r\n  shadow: true,\r\n})\r\nexport class AdvancedSelect implements ComponentInterface {\r\n  private trap?: FocusTrap;\r\n\r\n  @Element()\r\n  host!: HTMLDsoAdvancedSelectElement;\r\n\r\n  /**\r\n   * The options to display in the select.\r\n   */\r\n  @Prop()\r\n  options: AdvancedSelectOptionOrGroup<never>[] = [];\r\n\r\n  /**\r\n   * The active option. By object reference.\r\n   */\r\n  @Prop()\r\n  active?: AdvancedSelectOption<never>;\r\n\r\n  /**\r\n   * An extra text for the active option. Only visible in the list of options.\r\n   */\r\n  @Prop()\r\n  activeHint?: string;\r\n\r\n  /**\r\n   * The open state of the options list.\r\n   */\r\n  @State()\r\n  open: boolean = false;\r\n\r\n  /**\r\n   * Emitted when user selects an option\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoChange!: EventEmitter<AdvancedSelectChangeEvent<never>>;\r\n\r\n  /**\r\n   * Emitted when user activates a group redirect link.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoRedirect!: EventEmitter<AdvancedSelectRedirectEvent>;\r\n\r\n  private toggleButtonElementRef: HTMLButtonElement | undefined;\r\n\r\n  @Listen(\"keydown\", { target: \"window\" })\r\n  keyDownListener(event: KeyboardEvent) {\r\n    if (this.open && event.key === \"ArrowUp\") {\r\n      event.preventDefault();\r\n      this.handleTab(-1);\r\n    } else if (this.open && event.key === \"ArrowDown\") {\r\n      event.preventDefault();\r\n      this.handleTab(1);\r\n    }\r\n  }\r\n\r\n  componentDidRender() {\r\n    if (this.open && !this.trap) {\r\n      this.createTrap();\r\n    } else if (!this.open && this.trap) {\r\n      this.removeTrap();\r\n    }\r\n  }\r\n\r\n  private toggleOpen = () => {\r\n    this.open = !this.open;\r\n  };\r\n\r\n  private createTrap() {\r\n    this.trap = createFocusTrap(this.host, {\r\n      clickOutsideDeactivates: true,\r\n      escapeDeactivates: true,\r\n      setReturnFocus: this.toggleButtonElementRef,\r\n      tabbableOptions: {\r\n        getShadowRoot: true,\r\n      },\r\n      onDeactivate: () => {\r\n        this.open = false;\r\n      },\r\n    }).activate();\r\n  }\r\n\r\n  private removeTrap() {\r\n    this.trap?.deactivate();\r\n    delete this.trap;\r\n  }\r\n\r\n  private handleTab(direction: number) {\r\n    const elements = tabbable(this.host, { getShadowRoot: true });\r\n    const currentIndex = elements.findIndex((e) => e === this.host.shadowRoot?.activeElement);\r\n\r\n    let nextIndex = currentIndex + direction;\r\n    if (nextIndex >= elements.length) {\r\n      nextIndex = 0;\r\n    } else if (nextIndex < 0) {\r\n      nextIndex = elements.length - 1;\r\n    }\r\n\r\n    elements[nextIndex]?.focus();\r\n  }\r\n\r\n  private handleOptionClick = (event: MouseEvent, option: AdvancedSelectOption<never>) => {\r\n    this.dsoChange.emit({ originalEvent: event, option });\r\n    this.open = false;\r\n  };\r\n\r\n  private handleRedirectClick = (event: MouseEvent, redirect: AdvancedSelectGroupRedirect) => {\r\n    this.dsoRedirect.emit({ originalEvent: event, isModifiedEvent: isModifiedEvent(event), redirect });\r\n    this.open = false;\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <button\r\n          aria-expanded={this.open.toString()}\r\n          class={clsx([\"active-option\", { open: this.open }])}\r\n          type=\"button\"\r\n          onClick={this.toggleOpen}\r\n          ref={(element) => (this.toggleButtonElementRef = element)}\r\n        >\r\n          <ActiveGroupLabel active={this.active} options={this.options} />\r\n          <span class=\"active-option-label\">{this.active?.label ?? \"Selecteer een optie\"}</span>\r\n          <span class=\"active-option-aside\">\r\n            {this.options.some(\r\n              (optionOrGroup) => \"summaryCounter\" in optionOrGroup && optionOrGroup?.summaryCounter,\r\n            ) && (\r\n              <span class=\"badges\">\r\n                {this.options\r\n                  .filter(\r\n                    (option): option is AdvancedSelectGroup<never> =>\r\n                      \"options\" in option && \"summaryCounter\" in option && !!option?.summaryCounter,\r\n                  )\r\n                  .map((group) => (\r\n                    <dso-badge status={group.variant ?? \"outline\"}>{group.options.length}</dso-badge>\r\n                  ))}\r\n              </span>\r\n            )}\r\n            <dso-icon icon=\"caret-down\"></dso-icon>\r\n          </span>\r\n        </button>\r\n        {this.open && (\r\n          <div class=\"groups-container\">\r\n            <ul class=\"groups\">\r\n              {this.options.map(\r\n                (optionOrGroup) =>\r\n                  (\"options\" in optionOrGroup && (\r\n                    <li class={clsx([\"group\", { [`group-${optionOrGroup.variant}`]: !!optionOrGroup.variant }])}>\r\n                      <p class=\"group-label\">{optionOrGroup.label}</p>\r\n                      <ul class=\"options\">\r\n                        {optionOrGroup.options.map((option) => (\r\n                          <li>\r\n                            <OptionButton\r\n                              option={option}\r\n                              active={this.active}\r\n                              activeHint={this.activeHint}\r\n                              callback={this.handleOptionClick}\r\n                            />\r\n                          </li>\r\n                        ))}\r\n                      </ul>\r\n                      {optionOrGroup.redirect && (\r\n                        <RedirectAnchor\r\n                          redirect={optionOrGroup.redirect}\r\n                          callback={this.handleRedirectClick}\r\n                        ></RedirectAnchor>\r\n                      )}\r\n                    </li>\r\n                  )) ||\r\n                  (\"placeholder\" in optionOrGroup && (\r\n                    <li class=\"group\">\r\n                      <p class=\"group-label\">{optionOrGroup.label}</p>\r\n                      <p class=\"placeholder\">{optionOrGroup.placeholder}</p>\r\n                      {optionOrGroup.redirect && (\r\n                        <RedirectAnchor\r\n                          redirect={optionOrGroup.redirect}\r\n                          callback={this.handleRedirectClick}\r\n                        ></RedirectAnchor>\r\n                      )}\r\n                    </li>\r\n                  )) || (\r\n                    <li>\r\n                      <OptionButton\r\n                        option={optionOrGroup}\r\n                        active={this.active}\r\n                        activeHint={this.activeHint}\r\n                        callback={this.handleOptionClick}\r\n                      />\r\n                    </li>\r\n                  ),\r\n              )}\r\n            </ul>\r\n          </div>\r\n        )}\r\n      </>\r\n    );\r\n  }\r\n}\r\n\r\ninterface OptionButtonProps {\r\n  option: AdvancedSelectOption<never>;\r\n  active: AdvancedSelectOption<never> | undefined;\r\n  activeHint: string | undefined;\r\n  callback: (event: MouseEvent, value: AdvancedSelectOption<never>) => void;\r\n}\r\n\r\nconst OptionButton: FunctionalComponent<OptionButtonProps> = ({ option, active, activeHint, callback }) => (\r\n  <button\r\n    class={clsx([\"option\", { \"option-active\": active === option }])}\r\n    type=\"button\"\r\n    onClick={(e) => callback(e, option)}\r\n  >\r\n    <span class=\"option-label\">{option.label}</span>\r\n    {!!activeHint && active === option && <span class=\"option-hint\">({activeHint})</span>}\r\n  </button>\r\n);\r\n\r\ninterface RedirectAnchorProps {\r\n  redirect: AdvancedSelectGroupRedirect;\r\n  callback: (event: MouseEvent, value: AdvancedSelectGroupRedirect) => void;\r\n}\r\n\r\nconst RedirectAnchor: FunctionalComponent<RedirectAnchorProps> = ({ redirect, callback }) => (\r\n  <a class=\"group-link\" href={redirect.href} onClick={(e) => callback(e, redirect)}>\r\n    {redirect.label}\r\n    <dso-icon icon=\"chevron-right\"></dso-icon>\r\n  </a>\r\n);\r\n\r\ninterface ActiveGroupLabelProps {\r\n  active: AdvancedSelectOption<never> | undefined;\r\n  options: AdvancedSelectOptionOrGroup<never>[];\r\n}\r\n\r\nconst ActiveGroupLabel: FunctionalComponent<ActiveGroupLabelProps> = ({ active, options }) => {\r\n  const group = options.find(\r\n    (optionOrGroup): optionOrGroup is AdvancedSelectGroup<never> =>\r\n      \"options\" in optionOrGroup &&\r\n      !!optionOrGroup.options.find((option) => option === active) &&\r\n      !!optionOrGroup.activeLabel,\r\n  );\r\n\r\n  return group ? (\r\n    <dso-label compact status={group.variant}>\r\n      {group.activeLabel}\r\n    </dso-label>\r\n  ) : undefined;\r\n};\r\n"],"version":3}