@dso-toolkit/core 73.1.0 → 73.2.1

package/dist/cjs/dso-action-list-item.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"dso-action-list-item.entry.cjs.js","mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,y6CAAy6C;;MCOt7C,cAAc,GAAA,MAAA;AAL3B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAkBE;;AAEG;AAEH,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAEhB;;AAEG;AAEH,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;AAEf;;AAEG;AAEH,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;AAoBhB;IAlBC,MAAM,GAAA;QACJ,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;gBACL,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,WAAW,EAAE,IAAI,CAAC,QAAQ;aAC3B,EAAA,EAEDD,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAC9B,IAAI,CAAC,OAAO,GAAGA,OAAU,CAAA,UAAA,EAAA,EAAA,IAAI,EAAC,gBAAgB,EAAA,CAAY,GAAGA,iBAAK,KAAK,EAAC,kBAAkB,EAAE,EAAA,IAAI,CAAC,IAAI,CAAO,EAC7GA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EAClC,IAAI,CAAC,SAAS,IAAIA,mEAAK,IAAI,CAAC,SAAS,CAAM,EAC5CA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,CACF,CACD;;;;;;;","names":["h","Host"],"sources":["src/components/action-list/components/action-list-item.scss?tag=dso-action-list-item&encapsulation=shadow","src/components/action-list/components/action-list-item.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/components/heading\";\r\n@use \"~dso-toolkit/src/components/step-counter\";\r\n@use \"~dso-toolkit/src/components/action-list/action-list.variables\" as action-list-variables;\r\n@use \"~dso-toolkit/src/components/action-list/components/action-list-item.variables\" as action-list-item-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  @include step-counter.step-counter();\r\n\r\n  display: block;\r\n  padding-block: action-list-item-variables.$padding-block;\r\n  position: relative;\r\n}\r\n\r\n:host(.divider) {\r\n  .dso-action-list-item {\r\n    &::after {\r\n      border-block-end: 0.25rem dashed colors.$lichtblauw;\r\n      inset-block-end: 0;\r\n      content: \"\";\r\n      display: block;\r\n      block-size: units.$u3;\r\n      position: absolute;\r\n      inset-inline-start: calc(action-list-variables.$content-indent - action-list-item-variables.$step-counter-margin);\r\n      inline-size: calc(\r\n        100% - (action-list-variables.$content-indent - action-list-item-variables.$step-counter-margin)\r\n      );\r\n\r\n      @media screen and (min-width: media-query-breakpoints.$screen-xs-min) {\r\n        inset-inline-start: action-list-variables.$content-indent;\r\n        inline-size: calc(100% - action-list-variables.$content-indent);\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\nh3 {\r\n  margin-block-end: units.$u2;\r\n  margin-block-start: 0;\r\n  min-block-size: units.$u6;\r\n  padding-block-start: 9px;\r\n\r\n  @include heading.base();\r\n  @include heading.h3();\r\n}\r\n\r\n.dso-action-list-item {\r\n  display: grid;\r\n  grid-template-columns:\r\n    calc(action-list-variables.$content-indent - action-list-item-variables.$step-counter-margin)\r\n    1fr;\r\n\r\n  @media screen and (min-width: media-query-breakpoints.$screen-xs-min) {\r\n    grid-template-columns: action-list-variables.$content-indent 1fr;\r\n  }\r\n\r\n  .dso-step-counter {\r\n    position: unset;\r\n  }\r\n\r\n  .action-list-item-content {\r\n    grid-column: 2 / 2;\r\n  }\r\n}\r\n\r\ndso-icon {\r\n  block-size: units.$u6;\r\n  inline-size: units.$u6;\r\n}\r\n","import { h, Component, ComponentInterface, Host, Prop } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-action-list-item\",\r\n  styleUrl: \"action-list-item.scss\",\r\n  shadow: true,\r\n})\r\nexport class ActionListItem implements ComponentInterface {\r\n  /**\r\n   * The step of the Action List Item.\r\n   */\r\n  @Prop()\r\n  step!: number;\r\n\r\n  /**\r\n   * The title of the item.\r\n   */\r\n  @Prop()\r\n  itemTitle?: string;\r\n\r\n  /**\r\n   * Show flow line to next step\r\n   */\r\n  @Prop()\r\n  flowLine = false;\r\n\r\n  /**\r\n   * When there is a warning.\r\n   */\r\n  @Prop()\r\n  warning = false;\r\n\r\n  /**\r\n   * Places a dashed line at the bottom of the item.\r\n   */\r\n  @Prop()\r\n  divider = false;\r\n\r\n  render() {\r\n    return (\r\n      <Host\r\n        class={{\r\n          divider: this.divider,\r\n          \"flow-line\": this.flowLine,\r\n        }}\r\n      >\r\n        <div class=\"dso-action-list-item\">\r\n          {this.warning ? <dso-icon icon=\"status-warning\"></dso-icon> : <div class=\"dso-step-counter\">{this.step}</div>}\r\n          <div class=\"action-list-item-content\">\r\n            {this.itemTitle && <h3>{this.itemTitle}</h3>}\r\n            <slot />\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-action-list-item.entry.cjs.js","mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,y6CAAy6C;;MCOt7C,cAAc,GAAA,MAAA;AAL3B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAkBE;;AAEG;AAEH,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAEhB;;AAEG;AAEH,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;AAEf;;AAEG;AAEH,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;AAoBhB;IAlBC,MAAM,GAAA;QACJ,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;gBACL,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,WAAW,EAAE,IAAI,CAAC,QAAQ;aAC3B,EAAA,EAEDD,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAC9B,IAAI,CAAC,OAAO,GAAGA,OAAU,CAAA,UAAA,EAAA,EAAA,IAAI,EAAC,gBAAgB,EAAA,CAAY,GAAGA,iBAAK,KAAK,EAAC,kBAAkB,EAAE,EAAA,IAAI,CAAC,IAAI,CAAO,EAC7GA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EAClC,IAAI,CAAC,SAAS,IAAIA,mEAAK,IAAI,CAAC,SAAS,CAAM,EAC5CA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,CACF,CACD;;;;;;;","names":["h","Host"],"sources":["src/components/action-list/components/action-list-item.scss?tag=dso-action-list-item&encapsulation=shadow","src/components/action-list/components/action-list-item.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/components/heading\";\r\n@use \"~dso-toolkit/src/components/step-counter\";\r\n@use \"~dso-toolkit/src/components/action-list/action-list.variables\" as action-list-variables;\r\n@use \"~dso-toolkit/src/components/action-list/components/action-list-item.variables\" as action-list-item-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  @include step-counter.step-counter();\r\n\r\n  display: block;\r\n  padding-block: action-list-item-variables.$padding-block;\r\n  position: relative;\r\n}\r\n\r\n:host(.divider) {\r\n  .dso-action-list-item {\r\n    &::after {\r\n      border-block-end: 0.25rem dashed colors.$lichtblauw;\r\n      inset-block-end: 0;\r\n      content: \"\";\r\n      display: block;\r\n      block-size: units.$u3;\r\n      position: absolute;\r\n      inset-inline-start: calc(action-list-variables.$content-indent - action-list-item-variables.$step-counter-margin);\r\n      inline-size: calc(\r\n        100% - (action-list-variables.$content-indent - action-list-item-variables.$step-counter-margin)\r\n      );\r\n\r\n      @media screen and (min-width: media-query-breakpoints.$screen-xs-min) {\r\n        inset-inline-start: action-list-variables.$content-indent;\r\n        inline-size: calc(100% - action-list-variables.$content-indent);\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\nh3 {\r\n  margin-block-end: units.$u2;\r\n  margin-block-start: 0;\r\n  min-block-size: units.$u6;\r\n  padding-block-start: 9px;\r\n\r\n  @include heading.base();\r\n  @include heading.h3();\r\n}\r\n\r\n.dso-action-list-item {\r\n  display: grid;\r\n  grid-template-columns:\r\n    calc(action-list-variables.$content-indent - action-list-item-variables.$step-counter-margin)\r\n    1fr;\r\n\r\n  @media screen and (min-width: media-query-breakpoints.$screen-xs-min) {\r\n    grid-template-columns: action-list-variables.$content-indent 1fr;\r\n  }\r\n\r\n  .dso-step-counter {\r\n    position: unset;\r\n  }\r\n\r\n  .action-list-item-content {\r\n    grid-column: 2 / 2;\r\n  }\r\n}\r\n\r\ndso-icon {\r\n  block-size: units.$u6;\r\n  inline-size: units.$u6;\r\n}\r\n","import { Component, ComponentInterface, Host, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-action-list-item\",\r\n  styleUrl: \"action-list-item.scss\",\r\n  shadow: true,\r\n})\r\nexport class ActionListItem implements ComponentInterface {\r\n  /**\r\n   * The step of the Action List Item.\r\n   */\r\n  @Prop()\r\n  step!: number;\r\n\r\n  /**\r\n   * The title of the item.\r\n   */\r\n  @Prop()\r\n  itemTitle?: string;\r\n\r\n  /**\r\n   * Show flow line to next step\r\n   */\r\n  @Prop()\r\n  flowLine = false;\r\n\r\n  /**\r\n   * When there is a warning.\r\n   */\r\n  @Prop()\r\n  warning = false;\r\n\r\n  /**\r\n   * Places a dashed line at the bottom of the item.\r\n   */\r\n  @Prop()\r\n  divider = false;\r\n\r\n  render() {\r\n    return (\r\n      <Host\r\n        class={{\r\n          divider: this.divider,\r\n          \"flow-line\": this.flowLine,\r\n        }}\r\n      >\r\n        <div class=\"dso-action-list-item\">\r\n          {this.warning ? <dso-icon icon=\"status-warning\"></dso-icon> : <div class=\"dso-step-counter\">{this.step}</div>}\r\n          <div class=\"action-list-item-content\">\r\n            {this.itemTitle && <h3>{this.itemTitle}</h3>}\r\n            <slot />\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/cjs/dso-action-list-item.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"dso-action-list-item.entry.cjs.js","sources":["src/components/action-list/components/action-list-item.scss?tag=dso-action-list-item&encapsulation=shadow","src/components/action-list/components/action-list-item.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/components/heading\";\r\n@use \"~dso-toolkit/src/components/step-counter\";\r\n@use \"~dso-toolkit/src/components/action-list/action-list.variables\" as action-list-variables;\r\n@use \"~dso-toolkit/src/components/action-list/components/action-list-item.variables\" as action-list-item-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  @include step-counter.step-counter();\r\n\r\n  display: block;\r\n  padding-block: action-list-item-variables.$padding-block;\r\n  position: relative;\r\n}\r\n\r\n:host(.divider) {\r\n  .dso-action-list-item {\r\n    &::after {\r\n      border-block-end: 0.25rem dashed colors.$lichtblauw;\r\n      inset-block-end: 0;\r\n      content: \"\";\r\n      display: block;\r\n      block-size: units.$u3;\r\n      position: absolute;\r\n      inset-inline-start: calc(action-list-variables.$content-indent - action-list-item-variables.$step-counter-margin);\r\n      inline-size: calc(\r\n        100% - (action-list-variables.$content-indent - action-list-item-variables.$step-counter-margin)\r\n      );\r\n\r\n      @media screen and (min-width: media-query-breakpoints.$screen-xs-min) {\r\n        inset-inline-start: action-list-variables.$content-indent;\r\n        inline-size: calc(100% - action-list-variables.$content-indent);\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\nh3 {\r\n  margin-block-end: units.$u2;\r\n  margin-block-start: 0;\r\n  min-block-size: units.$u6;\r\n  padding-block-start: 9px;\r\n\r\n  @include heading.base();\r\n  @include heading.h3();\r\n}\r\n\r\n.dso-action-list-item {\r\n  display: grid;\r\n  grid-template-columns:\r\n    calc(action-list-variables.$content-indent - action-list-item-variables.$step-counter-margin)\r\n    1fr;\r\n\r\n  @media screen and (min-width: media-query-breakpoints.$screen-xs-min) {\r\n    grid-template-columns: action-list-variables.$content-indent 1fr;\r\n  }\r\n\r\n  .dso-step-counter {\r\n    position: unset;\r\n  }\r\n\r\n  .action-list-item-content {\r\n    grid-column: 2 / 2;\r\n  }\r\n}\r\n\r\ndso-icon {\r\n  block-size: units.$u6;\r\n  inline-size: units.$u6;\r\n}\r\n","import { h, Component, ComponentInterface, Host, Prop } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-action-list-item\",\r\n  styleUrl: \"action-list-item.scss\",\r\n  shadow: true,\r\n})\r\nexport class ActionListItem implements ComponentInterface {\r\n  /**\r\n   * The step of the Action List Item.\r\n   */\r\n  @Prop()\r\n  step!: number;\r\n\r\n  /**\r\n   * The title of the item.\r\n   */\r\n  @Prop()\r\n  itemTitle?: string;\r\n\r\n  /**\r\n   * Show flow line to next step\r\n   */\r\n  @Prop()\r\n  flowLine = false;\r\n\r\n  /**\r\n   * When there is a warning.\r\n   */\r\n  @Prop()\r\n  warning = false;\r\n\r\n  /**\r\n   * Places a dashed line at the bottom of the item.\r\n   */\r\n  @Prop()\r\n  divider = false;\r\n\r\n  render() {\r\n    return (\r\n      <Host\r\n        class={{\r\n          divider: this.divider,\r\n          \"flow-line\": this.flowLine,\r\n        }}\r\n      >\r\n        <div class=\"dso-action-list-item\">\r\n          {this.warning ? <dso-icon icon=\"status-warning\"></dso-icon> : <div class=\"dso-step-counter\">{this.step}</div>}\r\n          <div class=\"action-list-item-content\">\r\n            {this.itemTitle && <h3>{this.itemTitle}</h3>}\r\n            <slot />\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,y6CAAy6C;;MCOt7C,cAAc,GAAA,MAAA;AAL3B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAkBE;;AAEG;AAEH,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAEhB;;AAEG;AAEH,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;AAEf;;AAEG;AAEH,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;AAoBhB;IAlBC,MAAM,GAAA;QACJ,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;gBACL,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,WAAW,EAAE,IAAI,CAAC,QAAQ;aAC3B,EAAA,EAEDD,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAC9B,IAAI,CAAC,OAAO,GAAGA,OAAU,CAAA,UAAA,EAAA,EAAA,IAAI,EAAC,gBAAgB,EAAA,CAAY,GAAGA,iBAAK,KAAK,EAAC,kBAAkB,EAAE,EAAA,IAAI,CAAC,IAAI,CAAO,EAC7GA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EAClC,IAAI,CAAC,SAAS,IAAIA,mEAAK,IAAI,CAAC,SAAS,CAAM,EAC5CA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,CACF,CACD;;;;;;;"}
+{"version":3,"file":"dso-action-list-item.entry.cjs.js","sources":["src/components/action-list/components/action-list-item.scss?tag=dso-action-list-item&encapsulation=shadow","src/components/action-list/components/action-list-item.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/components/heading\";\r\n@use \"~dso-toolkit/src/components/step-counter\";\r\n@use \"~dso-toolkit/src/components/action-list/action-list.variables\" as action-list-variables;\r\n@use \"~dso-toolkit/src/components/action-list/components/action-list-item.variables\" as action-list-item-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  @include step-counter.step-counter();\r\n\r\n  display: block;\r\n  padding-block: action-list-item-variables.$padding-block;\r\n  position: relative;\r\n}\r\n\r\n:host(.divider) {\r\n  .dso-action-list-item {\r\n    &::after {\r\n      border-block-end: 0.25rem dashed colors.$lichtblauw;\r\n      inset-block-end: 0;\r\n      content: \"\";\r\n      display: block;\r\n      block-size: units.$u3;\r\n      position: absolute;\r\n      inset-inline-start: calc(action-list-variables.$content-indent - action-list-item-variables.$step-counter-margin);\r\n      inline-size: calc(\r\n        100% - (action-list-variables.$content-indent - action-list-item-variables.$step-counter-margin)\r\n      );\r\n\r\n      @media screen and (min-width: media-query-breakpoints.$screen-xs-min) {\r\n        inset-inline-start: action-list-variables.$content-indent;\r\n        inline-size: calc(100% - action-list-variables.$content-indent);\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\nh3 {\r\n  margin-block-end: units.$u2;\r\n  margin-block-start: 0;\r\n  min-block-size: units.$u6;\r\n  padding-block-start: 9px;\r\n\r\n  @include heading.base();\r\n  @include heading.h3();\r\n}\r\n\r\n.dso-action-list-item {\r\n  display: grid;\r\n  grid-template-columns:\r\n    calc(action-list-variables.$content-indent - action-list-item-variables.$step-counter-margin)\r\n    1fr;\r\n\r\n  @media screen and (min-width: media-query-breakpoints.$screen-xs-min) {\r\n    grid-template-columns: action-list-variables.$content-indent 1fr;\r\n  }\r\n\r\n  .dso-step-counter {\r\n    position: unset;\r\n  }\r\n\r\n  .action-list-item-content {\r\n    grid-column: 2 / 2;\r\n  }\r\n}\r\n\r\ndso-icon {\r\n  block-size: units.$u6;\r\n  inline-size: units.$u6;\r\n}\r\n","import { Component, ComponentInterface, Host, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-action-list-item\",\r\n  styleUrl: \"action-list-item.scss\",\r\n  shadow: true,\r\n})\r\nexport class ActionListItem implements ComponentInterface {\r\n  /**\r\n   * The step of the Action List Item.\r\n   */\r\n  @Prop()\r\n  step!: number;\r\n\r\n  /**\r\n   * The title of the item.\r\n   */\r\n  @Prop()\r\n  itemTitle?: string;\r\n\r\n  /**\r\n   * Show flow line to next step\r\n   */\r\n  @Prop()\r\n  flowLine = false;\r\n\r\n  /**\r\n   * When there is a warning.\r\n   */\r\n  @Prop()\r\n  warning = false;\r\n\r\n  /**\r\n   * Places a dashed line at the bottom of the item.\r\n   */\r\n  @Prop()\r\n  divider = false;\r\n\r\n  render() {\r\n    return (\r\n      <Host\r\n        class={{\r\n          divider: this.divider,\r\n          \"flow-line\": this.flowLine,\r\n        }}\r\n      >\r\n        <div class=\"dso-action-list-item\">\r\n          {this.warning ? <dso-icon icon=\"status-warning\"></dso-icon> : <div class=\"dso-step-counter\">{this.step}</div>}\r\n          <div class=\"action-list-item-content\">\r\n            {this.itemTitle && <h3>{this.itemTitle}</h3>}\r\n            <slot />\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,y6CAAy6C;;MCOt7C,cAAc,GAAA,MAAA;AAL3B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAkBE;;AAEG;AAEH,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAEhB;;AAEG;AAEH,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;AAEf;;AAEG;AAEH,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;AAoBhB;IAlBC,MAAM,GAAA;QACJ,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;gBACL,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,WAAW,EAAE,IAAI,CAAC,QAAQ;aAC3B,EAAA,EAEDD,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAC9B,IAAI,CAAC,OAAO,GAAGA,OAAU,CAAA,UAAA,EAAA,EAAA,IAAI,EAAC,gBAAgB,EAAA,CAAY,GAAGA,iBAAK,KAAK,EAAC,kBAAkB,EAAE,EAAA,IAAI,CAAC,IAAI,CAAO,EAC7GA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EAClC,IAAI,CAAC,SAAS,IAAIA,mEAAK,IAAI,CAAC,SAAS,CAAM,EAC5CA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,CACF,CACD;;;;;;;"}

package/dist/cjs/dso-action-list.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"dso-action-list.entry.cjs.js","mappings":";;;;AAAA,MAAM,aAAa,GAAG,08CAA08C;;MCOn9C,UAAU,GAAA,MAAA;;;;IAOrB,MAAM,GAAA;QACJ,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAK,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,IAAI,CAAC,SAAS,CAAM,EACzBA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,yBAAyB,EAAA,EAClCA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ,CACD;;;;;;;","names":["h","Host"],"sources":["src/components/action-list/action-list.scss?tag=dso-action-list&encapsulation=shadow","src/components/action-list/action-list.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/components/heading\";\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\r\n\r\n@use \"~dso-toolkit/src/components/action-list/action-list.variables\" as action-list-variables;\r\n@use \"~dso-toolkit/src/components/action-list/components/action-list-item.variables\" as action-list-item-variables;\r\n\r\n:host {\r\n  display: block;\r\n  padding-block: action-list-variables.$padding-block;\r\n  padding-inline: units.$u2;\r\n\r\n  @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n    padding-inline-end: units.$u12;\r\n  }\r\n\r\n  @include set-colors.apply(colors.$lichtblauw-20);\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\nh2 {\r\n  margin-block: 0 units.$u2;\r\n\r\n  @include heading.base();\r\n  @include heading.h2();\r\n}\r\n\r\n.dso-action-list-content {\r\n  padding-inline-start: calc(action-list-variables.$content-indent - action-list-item-variables.$step-counter-margin);\r\n\r\n  @media screen and (min-width: media-query-breakpoints.$screen-xs-min) {\r\n    padding-inline-start: action-list-variables.$content-indent;\r\n  }\r\n}\r\n","import { h, Component, Host, ComponentInterface, Prop } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-action-list\",\r\n  styleUrl: \"action-list.scss\",\r\n  shadow: true,\r\n})\r\nexport class ActionList implements ComponentInterface {\r\n  /**\r\n   * The title.\r\n   */\r\n  @Prop()\r\n  listTitle!: string;\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <h2>{this.listTitle}</h2>\r\n        <div class=\"dso-action-list-content\">\r\n          <slot />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-action-list.entry.cjs.js","mappings":";;;;AAAA,MAAM,aAAa,GAAG,08CAA08C;;MCOn9C,UAAU,GAAA,MAAA;;;;IAOrB,MAAM,GAAA;QACJ,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAK,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,IAAI,CAAC,SAAS,CAAM,EACzBA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,yBAAyB,EAAA,EAClCA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ,CACD;;;;;;;","names":["h","Host"],"sources":["src/components/action-list/action-list.scss?tag=dso-action-list&encapsulation=shadow","src/components/action-list/action-list.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/components/heading\";\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\r\n\r\n@use \"~dso-toolkit/src/components/action-list/action-list.variables\" as action-list-variables;\r\n@use \"~dso-toolkit/src/components/action-list/components/action-list-item.variables\" as action-list-item-variables;\r\n\r\n:host {\r\n  display: block;\r\n  padding-block: action-list-variables.$padding-block;\r\n  padding-inline: units.$u2;\r\n\r\n  @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n    padding-inline-end: units.$u12;\r\n  }\r\n\r\n  @include set-colors.apply(colors.$lichtblauw-20);\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\nh2 {\r\n  margin-block: 0 units.$u2;\r\n\r\n  @include heading.base();\r\n  @include heading.h2();\r\n}\r\n\r\n.dso-action-list-content {\r\n  padding-inline-start: calc(action-list-variables.$content-indent - action-list-item-variables.$step-counter-margin);\r\n\r\n  @media screen and (min-width: media-query-breakpoints.$screen-xs-min) {\r\n    padding-inline-start: action-list-variables.$content-indent;\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Host, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-action-list\",\r\n  styleUrl: \"action-list.scss\",\r\n  shadow: true,\r\n})\r\nexport class ActionList implements ComponentInterface {\r\n  /**\r\n   * The title.\r\n   */\r\n  @Prop()\r\n  listTitle!: string;\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <h2>{this.listTitle}</h2>\r\n        <div class=\"dso-action-list-content\">\r\n          <slot />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/cjs/dso-action-list.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"dso-action-list.entry.cjs.js","sources":["src/components/action-list/action-list.scss?tag=dso-action-list&encapsulation=shadow","src/components/action-list/action-list.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/components/heading\";\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\r\n\r\n@use \"~dso-toolkit/src/components/action-list/action-list.variables\" as action-list-variables;\r\n@use \"~dso-toolkit/src/components/action-list/components/action-list-item.variables\" as action-list-item-variables;\r\n\r\n:host {\r\n  display: block;\r\n  padding-block: action-list-variables.$padding-block;\r\n  padding-inline: units.$u2;\r\n\r\n  @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n    padding-inline-end: units.$u12;\r\n  }\r\n\r\n  @include set-colors.apply(colors.$lichtblauw-20);\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\nh2 {\r\n  margin-block: 0 units.$u2;\r\n\r\n  @include heading.base();\r\n  @include heading.h2();\r\n}\r\n\r\n.dso-action-list-content {\r\n  padding-inline-start: calc(action-list-variables.$content-indent - action-list-item-variables.$step-counter-margin);\r\n\r\n  @media screen and (min-width: media-query-breakpoints.$screen-xs-min) {\r\n    padding-inline-start: action-list-variables.$content-indent;\r\n  }\r\n}\r\n","import { h, Component, Host, ComponentInterface, Prop } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-action-list\",\r\n  styleUrl: \"action-list.scss\",\r\n  shadow: true,\r\n})\r\nexport class ActionList implements ComponentInterface {\r\n  /**\r\n   * The title.\r\n   */\r\n  @Prop()\r\n  listTitle!: string;\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <h2>{this.listTitle}</h2>\r\n        <div class=\"dso-action-list-content\">\r\n          <slot />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,aAAa,GAAG,08CAA08C;;MCOn9C,UAAU,GAAA,MAAA;;;;IAOrB,MAAM,GAAA;QACJ,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAK,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,IAAI,CAAC,SAAS,CAAM,EACzBA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,yBAAyB,EAAA,EAClCA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ,CACD;;;;;;;"}
+{"version":3,"file":"dso-action-list.entry.cjs.js","sources":["src/components/action-list/action-list.scss?tag=dso-action-list&encapsulation=shadow","src/components/action-list/action-list.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/components/heading\";\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\r\n\r\n@use \"~dso-toolkit/src/components/action-list/action-list.variables\" as action-list-variables;\r\n@use \"~dso-toolkit/src/components/action-list/components/action-list-item.variables\" as action-list-item-variables;\r\n\r\n:host {\r\n  display: block;\r\n  padding-block: action-list-variables.$padding-block;\r\n  padding-inline: units.$u2;\r\n\r\n  @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n    padding-inline-end: units.$u12;\r\n  }\r\n\r\n  @include set-colors.apply(colors.$lichtblauw-20);\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\nh2 {\r\n  margin-block: 0 units.$u2;\r\n\r\n  @include heading.base();\r\n  @include heading.h2();\r\n}\r\n\r\n.dso-action-list-content {\r\n  padding-inline-start: calc(action-list-variables.$content-indent - action-list-item-variables.$step-counter-margin);\r\n\r\n  @media screen and (min-width: media-query-breakpoints.$screen-xs-min) {\r\n    padding-inline-start: action-list-variables.$content-indent;\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Host, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-action-list\",\r\n  styleUrl: \"action-list.scss\",\r\n  shadow: true,\r\n})\r\nexport class ActionList implements ComponentInterface {\r\n  /**\r\n   * The title.\r\n   */\r\n  @Prop()\r\n  listTitle!: string;\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <h2>{this.listTitle}</h2>\r\n        <div class=\"dso-action-list-content\">\r\n          <slot />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,aAAa,GAAG,08CAA08C;;MCOn9C,UAAU,GAAA,MAAA;;;;IAOrB,MAAM,GAAA;QACJ,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAK,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,IAAI,CAAC,SAAS,CAAM,EACzBA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,yBAAyB,EAAA,EAClCA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ,CACD;;;;;;;"}

package/dist/cjs/dso-advanced-select.cjs.entry.js

@@ -84,12 +84,12 @@ const AdvancedSelect = class {
     }
     render() {
         var _a, _b;
-        return (index.h(index.Fragment, null, index.h("button", { key: '443309104a25a8fabd949377c74383027450f404', "aria-expanded": this.open.toString(), class: clsx.clsx(["active-option", { open: this.open }]), type: "button", onClick: this.toggleOpen, ref: (element) => (this.toggleButtonElementRef = element) }, index.h(ActiveGroupLabel, { key: 'e0f34941cabe1232ecf224d35f951f2fcb7affc7', active: this.active, options: this.options }), index.h("span", { key: 'b1d4dfadfb02c8beaa6e8553be863abf6fa50c4f', class: "active-option-label" }, (_b = (_a = this.active) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : "Selecteer een optie"), index.h("span", { key: '29dc80cc20ebc9393119bd2e0251420099d8ac88', class: "active-option-aside" }, this.options.some((optionOrGroup) => "summaryCounter" in optionOrGroup && (optionOrGroup === null || optionOrGroup === void 0 ? void 0 : optionOrGroup.summaryCounter)) && (index.h("span", { key: '08a59c09ec06900c761e44ce223c317414e401bf', class: "badges" }, this.options
+        return (index.h(index.Fragment, null, index.h("button", { key: '57d5cbcc817c119c470a08d43b92832bed397a2a', "aria-expanded": this.open.toString(), class: clsx.clsx(["active-option", { open: this.open }]), type: "button", onClick: this.toggleOpen, ref: (element) => (this.toggleButtonElementRef = element) }, index.h(ActiveGroupLabel, { key: 'b91590eabccc667dcaf3e331522dfe90c8b137e6', active: this.active, options: this.options }), index.h("span", { key: 'ef0cff05fac02406b2e4df6b762a917044554a16', class: "active-option-label" }, (_b = (_a = this.active) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : "Selecteer een optie"), index.h("span", { key: '61b2dda775ac610cc3c36e2e8795e58efaafb3fd', class: "active-option-aside" }, this.options.some((optionOrGroup) => "summaryCounter" in optionOrGroup && (optionOrGroup === null || optionOrGroup === void 0 ? void 0 : optionOrGroup.summaryCounter)) && (index.h("span", { key: 'e264d64ad86adf4a8daa5fe3be4d20815f4468c3', class: "badges" }, this.options
             .filter((option) => "options" in option && "summaryCounter" in option && !!(option === null || option === void 0 ? void 0 : option.summaryCounter))
             .map((group) => {
             var _a;
             return (index.h("dso-badge", { status: (_a = group.variant) !== null && _a !== void 0 ? _a : "outline" }, group.options.length));
-        }))), index.h("dso-icon", { key: '06549ae93243ab2a9b0a36e397ef0808e90973f5', icon: "caret-down" }))), this.open && (index.h("div", { key: '9f7e0cb989feb1167d8b0bce0f2c3a9c371811b8', class: "groups-container" }, index.h("ul", { key: 'bd98ccdbe135d9145f8d1c41c3bf362030e37e26', class: "groups" }, this.options.map((optionOrGroup) => ("options" in optionOrGroup && (index.h("li", { class: clsx.clsx(["group", { [`group-${optionOrGroup.variant}`]: !!optionOrGroup.variant }]) }, index.h("p", { class: "group-label" }, optionOrGroup.label), index.h("ul", { class: "options" }, optionOrGroup.options.map((option) => (index.h("li", null, index.h(OptionButton, { option: option, active: this.active, activeHint: this.activeHint, callback: this.handleOptionClick }))))), optionOrGroup.redirect && (index.h(RedirectAnchor, { redirect: optionOrGroup.redirect, callback: this.handleRedirectClick }))))) ||
+        }))), index.h("dso-icon", { key: 'cb475802c2552024418f1911d442ac05b9cf4791', icon: "caret-down" }))), this.open && (index.h("div", { key: '19b91e26c714cdcd810f7be9cde41da1e1b8598f', class: "groups-container" }, index.h("ul", { key: 'ca00d61058824d3f3eb29f15b77d52ecf9d7e605', class: "groups" }, this.options.map((optionOrGroup) => ("options" in optionOrGroup && (index.h("li", { class: clsx.clsx(["group", { [`group-${optionOrGroup.variant}`]: !!optionOrGroup.variant }]) }, index.h("p", { class: "group-label" }, optionOrGroup.label), index.h("ul", { class: "options" }, optionOrGroup.options.map((option) => (index.h("li", null, index.h(OptionButton, { option: option, active: this.active, activeHint: this.activeHint, callback: this.handleOptionClick }))))), optionOrGroup.redirect && (index.h(RedirectAnchor, { redirect: optionOrGroup.redirect, callback: this.handleRedirectClick }))))) ||
             ("placeholder" in optionOrGroup && (index.h("li", { class: "group" }, index.h("p", { class: "group-label" }, optionOrGroup.label), index.h("p", { class: "placeholder" }, optionOrGroup.placeholder), optionOrGroup.redirect && (index.h(RedirectAnchor, { redirect: optionOrGroup.redirect, callback: this.handleRedirectClick }))))) || (index.h("li", null, index.h(OptionButton, { option: optionOrGroup, active: this.active, activeHint: this.activeHint, callback: this.handleOptionClick })))))))));
     }
     get host() { return index.getElement(this); }

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

@@ -1 +1 @@
-{"file":"dso-advanced-select.entry.cjs.js","mappings":"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","names":["isModifiedEvent","createFocusTrap","tabbable","h","Fragment","clsx"],"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@use \"~dso-toolkit/src/variables/zindex\";\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  z-index: zindex.$advanced-select-group;\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 = this.host.isConnected ? 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}
+{"file":"dso-advanced-select.entry.cjs.js","mappings":"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","names":["isModifiedEvent","createFocusTrap","tabbable","h","Fragment","clsx"],"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@use \"~dso-toolkit/src/variables/zindex\";\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  z-index: zindex.$advanced-select-group;\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  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  FunctionalComponent,\r\n  Listen,\r\n  Prop,\r\n  State,\r\n  h,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { FocusTrap, createFocusTrap } from \"focus-trap\";\r\nimport { tabbable } from \"tabbable\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport {\r\n  AdvancedSelectChangeEvent,\r\n  AdvancedSelectGroup,\r\n  AdvancedSelectGroupRedirect,\r\n  AdvancedSelectOption,\r\n  AdvancedSelectOptionOrGroup,\r\n  AdvancedSelectRedirectEvent,\r\n} from \"./advanced-select.interfaces\";\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 = this.host.isConnected ? 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}

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

@@ -1 +1 @@
-{"version":3,"file":"dso-advanced-select.entry.cjs.js","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@use \"~dso-toolkit/src/variables/zindex\";\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  z-index: zindex.$advanced-select-group;\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 = this.host.isConnected ? 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"],"names":["isModifiedEvent","createFocusTrap","tabbable","h","Fragment","clsx"],"mappings":"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"}
+{"version":3,"file":"dso-advanced-select.entry.cjs.js","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@use \"~dso-toolkit/src/variables/zindex\";\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  z-index: zindex.$advanced-select-group;\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  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  FunctionalComponent,\r\n  Listen,\r\n  Prop,\r\n  State,\r\n  h,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { FocusTrap, createFocusTrap } from \"focus-trap\";\r\nimport { tabbable } from \"tabbable\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport {\r\n  AdvancedSelectChangeEvent,\r\n  AdvancedSelectGroup,\r\n  AdvancedSelectGroupRedirect,\r\n  AdvancedSelectOption,\r\n  AdvancedSelectOptionOrGroup,\r\n  AdvancedSelectRedirectEvent,\r\n} from \"./advanced-select.interfaces\";\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 = this.host.isConnected ? 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"],"names":["isModifiedEvent","createFocusTrap","tabbable","h","Fragment","clsx"],"mappings":"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"}