@dso-toolkit/core 62.19.0 → 62.20.1

package/dist/cjs/dso-accordion-section.cjs.entry.js

@@ -168,12 +168,12 @@ const AccordionSection = class {
         var _a;
         const { variant, reverseAlign } = (_a = this.accordionState) !== null && _a !== void 0 ? _a : {};
         const hasAddons = !!this.statusDescription || !!this.status || !!this.icon || !!this.attachmentCount;
-        return (index.h(index.Host, { key: 'b2d2f79aa344a6134017dcae3b8d97dc2f057ea6', class: {
+        return (index.h(index.Host, { key: 'e6d935b422454ca54ef161939dbe7ff8707cd336', class: {
                 "dso-accordion-section": true,
                 ["dso-accordion-" + variant]: true,
                 "dso-nested-accordion": this.hasNestedAccordion || this.containsNestedAccordion,
                 "dso-accordion-reverse-align": reverseAlign !== null && reverseAlign !== void 0 ? reverseAlign : false,
-            }, hidden: !variant, onMouseenter: () => (this.hover = true), onMouseleave: () => (this.hover = false) }, index.h(Handle, { key: 'd3b1f3a364a4a2a534a0fdc74f2b49fb7bc4d840', heading: this.heading, ref: (element) => (this.sectionHeading = element) }, index.h(HandleElement, { key: 'fba29abcbda2824b5df104498decab1530e16366', handleUrl: this.handleUrl, onClick: this.handleClick, open: this.open, handleElementRef: (e) => (this.handleElementRef = e) }, reverseAlign ? (index.h(index.Fragment, null, hasAddons && (index.h("div", { class: "dso-section-handle-addons" }, index.h(HandleIcon, { icon: this.icon }))), index.h("span", null, this.handleTitle), index.h("dso-icon", { class: "dso-section-handle-chevron", icon: "chevron-down" }))) : (index.h(index.Fragment, null, index.h("dso-icon", { class: "dso-section-handle-chevron", icon: "chevron-right" }), this.status && index.h("span", { class: "sr-only" }, stateMap[this.status]), index.h("span", null, this.handleTitle, this.isNeutral && (index.h("dso-icon", { class: "info-icon", icon: this.open || this.hover ? "info-active" : "info" }))), hasAddons && (index.h("div", { class: "dso-section-handle-addons" }, this.statusDescription && index.h("span", { class: "dso-status" }, this.statusDescription), index.h(HandleIcon, { state: this.status, icon: this.icon, attachmentCount: this.attachmentCount }))))))), index.h("dso-expandable", { key: 'ecfc718a37a6606669b80530ecacd0373dd290e3', class: "dso-section-body", open: this.open, enableAnimation: true, minimumHeight: this.isNeutral ? 0 : 4, onDsoExpandableAnimationStart: this.handleExpandableAnimationStart, onDsoExpandableAnimationEnd: this.handleExpandableAnimationEnd }, index.h("div", { key: 'ea10c7688a91c4886b63418d3ec4a25c79a86ee0', class: "dso-section-body-content", ref: (element) => (this.sectionBody = element) }, index.h("slot", { key: 'a0113e3a08f3254b8268628aea529797c318e700' })))));
+            }, hidden: !variant, onMouseenter: () => (this.hover = true), onMouseleave: () => (this.hover = false) }, index.h(Handle, { key: 'df0aade07259ea950aa2d5af7fc78d318607f99f', heading: this.heading, ref: (element) => (this.sectionHeading = element) }, index.h(HandleElement, { key: 'c3113baab09dcb2429f2755558f47bd5cd0f81f2', handleUrl: this.handleUrl, onClick: this.handleClick, open: this.open, handleElementRef: (e) => (this.handleElementRef = e) }, reverseAlign ? (index.h(index.Fragment, null, hasAddons && (index.h("div", { class: "dso-section-handle-addons" }, index.h(HandleIcon, { icon: this.icon }))), index.h("span", null, this.handleTitle), index.h("dso-icon", { class: "dso-section-handle-chevron", icon: "chevron-down" }))) : (index.h(index.Fragment, null, index.h("dso-icon", { class: "dso-section-handle-chevron", icon: "chevron-right" }), this.status && index.h("span", { class: "sr-only" }, stateMap[this.status]), index.h("span", null, this.handleTitle, this.isNeutral && (index.h("dso-icon", { class: "info-icon", icon: this.open || this.hover ? "info-active" : "info" }))), hasAddons && (index.h("div", { class: "dso-section-handle-addons" }, this.statusDescription && index.h("span", { class: "dso-status" }, this.statusDescription), index.h(HandleIcon, { state: this.status, icon: this.icon, attachmentCount: this.attachmentCount }))))))), index.h("dso-expandable", { key: 'fc46969992194a44e6118eae4d1ad7c52c4d5105', class: "dso-section-body", open: this.open, enableAnimation: true, minimumHeight: this.isNeutral ? 0 : 4, onDsoExpandableAnimationStart: this.handleExpandableAnimationStart, onDsoExpandableAnimationEnd: this.handleExpandableAnimationEnd }, index.h("div", { key: '72b09c8a6e9121e3454b796cfcc4b248cae2733f', class: "dso-section-body-content", ref: (element) => (this.sectionBody = element) }, index.h("slot", { key: 'a45f7c226d70d44f86e58c960c486960586fd62f' })))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/dso-accordion.cjs.entry.js

@@ -223,7 +223,7 @@ const Accordion = class {
         this.accordionState = state;
     }
     render() {
-        return (index.h(index.Host, { key: 'd6667475866e0ec08b2241adace595dfcf726bb4', class: "dso-accordion" }, index.h("slot", { key: '033c929ab22a1ceac2c22d4bc04451f275acb2a1' })));
+        return (index.h(index.Host, { key: 'ff5ce15d5c8f250a00fd32179023c5640fcdaa60', class: "dso-accordion" }, index.h("slot", { key: '4d8471b5d095ccfb38184cba1c1dab7f958638aa' })));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -17,10 +17,10 @@ const ActionListItem = class {
         this.divider = false;
     }
     render() {
-        return (index.h(index.Host, { key: '6001eb96200e375b5dfbee1967208ada369e7881', class: {
+        return (index.h(index.Host, { key: 'e8990e05c76ad77722c3077377a14b8595359cf1', class: {
                 divider: this.divider,
                 "flow-line": this.flowLine,
-            } }, index.h("div", { key: '76894291897f03dbcef8d0f453b46860ae6f1516', class: "dso-action-list-item" }, this.warning ? index.h("dso-icon", { icon: "status-warning" }) : index.h("div", { class: "dso-step-counter" }, this.step), index.h("div", { key: '4b36fe4e8ed574373ea8e40f5d67b2a206c08896', class: "action-list-item-content" }, this.itemTitle && index.h("h3", null, this.itemTitle), index.h("slot", { key: '5b80bfdc9281d12b19f8f6532dda740600b85ff8' })))));
+            } }, index.h("div", { key: 'f1f9bc9160d015bec044d56f6f9d4bdc8cfcb6c0', class: "dso-action-list-item" }, this.warning ? index.h("dso-icon", { icon: "status-warning" }) : index.h("div", { class: "dso-step-counter" }, this.step), index.h("div", { key: '4fccf3d1ae0fc47154ee934ed6e5fb067b5ff059', class: "action-list-item-content" }, this.itemTitle && index.h("h3", { key: '284707c09c1452c332353c2ac04f519ccc8fc409' }, this.itemTitle), index.h("slot", { key: 'd90f788cdbde8734a8130731808a2cb04495faa2' })))));
     }
 };
 ActionListItem.style = DsoActionListItemStyle0;

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,6zCAA6zC,CAAC;AACx1C,gCAAe,iBAAiB;;MCMnB,cAAc;;;;;wBAiBd,KAAK;uBAMN,KAAK;uBAML,KAAK;;IAEf,MAAM;QACJ,QACEA,QAACC,UAAI,qDACH,KAAK,EAAE;gBACL,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,WAAW,EAAE,IAAI,CAAC,QAAQ;aAC3B,IAEDD,kEAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,OAAO,GAAGA,sBAAU,IAAI,EAAC,gBAAgB,GAAY,GAAGA,iBAAK,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,IAAI,CAAO,EAC7GA,kEAAK,KAAK,EAAC,0BAA0B,IAClC,IAAI,CAAC,SAAS,IAAIA,oBAAK,IAAI,CAAC,SAAS,CAAM,EAC5CA,oEAAQ,CACJ,CACF,CACD,EACP;KACH;;;;;;","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/headings\";\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-vertical;\r\n  position: relative;\r\n}\r\n\r\n:host(.divider) {\r\n  .dso-action-list-item {\r\n    &::after {\r\n      border-bottom: 0.25rem dashed colors.$lichtblauw;\r\n      bottom: 0;\r\n      content: \"\";\r\n      display: block;\r\n      height: units.$u3;\r\n      position: absolute;\r\n      left: calc(action-list-variables.$content-indent - action-list-item-variables.$step-counter-margin);\r\n      width: calc(100% - (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        left: action-list-variables.$content-indent;\r\n        width: calc(100% - action-list-variables.$content-indent);\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\nh3 {\r\n  @include headings.base();\r\n  @include headings.h3();\r\n\r\n  margin-block-end: units.$u2;\r\n  margin-block-start: 0;\r\n  min-height: units.$u6;\r\n  padding-block-start: 9px;\r\n}\r\n\r\n.dso-action-list-item {\r\n  display: grid;\r\n  grid-template-columns: calc(action-list-variables.$content-indent - action-list-item-variables.$step-counter-margin) 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  height: units.$u6;\r\n  width: 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,6zCAA6zC,CAAC;AACx1C,gCAAe,iBAAiB;;MCMnB,cAAc;;;;;wBAiBd,KAAK;uBAMN,KAAK;uBAML,KAAK;;IAEf,MAAM;QACJ,QACEA,QAACC,UAAI,qDACH,KAAK,EAAE;gBACL,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,WAAW,EAAE,IAAI,CAAC,QAAQ;aAC3B,IAEDD,kEAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,OAAO,GAAGA,sBAAU,IAAI,EAAC,gBAAgB,GAAY,GAAGA,iBAAK,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,IAAI,CAAO,EAC7GA,kEAAK,KAAK,EAAC,0BAA0B,IAClC,IAAI,CAAC,SAAS,IAAIA,mEAAK,IAAI,CAAC,SAAS,CAAM,EAC5CA,oEAAQ,CACJ,CACF,CACD,EACP;KACH;;;;;;","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/headings\";\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-vertical;\r\n  position: relative;\r\n}\r\n\r\n:host(.divider) {\r\n  .dso-action-list-item {\r\n    &::after {\r\n      border-bottom: 0.25rem dashed colors.$lichtblauw;\r\n      bottom: 0;\r\n      content: \"\";\r\n      display: block;\r\n      height: units.$u3;\r\n      position: absolute;\r\n      left: calc(action-list-variables.$content-indent - action-list-item-variables.$step-counter-margin);\r\n      width: calc(100% - (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        left: action-list-variables.$content-indent;\r\n        width: calc(100% - action-list-variables.$content-indent);\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\nh3 {\r\n  @include headings.base();\r\n  @include headings.h3();\r\n\r\n  margin-block-end: units.$u2;\r\n  margin-block-start: 0;\r\n  min-height: units.$u6;\r\n  padding-block-start: 9px;\r\n}\r\n\r\n.dso-action-list-item {\r\n  display: grid;\r\n  grid-template-columns: calc(action-list-variables.$content-indent - action-list-item-variables.$step-counter-margin) 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  height: units.$u6;\r\n  width: 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}

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

@@ -13,7 +13,7 @@ const ActionList = class {
         this.listTitle = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: '8952d80fc976ad0c509269df1f24c4f28efed240' }, index.h("h2", { key: '0515ec8bfc9fbea6d7711df407b9c5d2dfcb7ab6' }, this.listTitle), index.h("div", { key: '5f31d7420ce404dffd0409fb06e7154d573323c2', class: "dso-action-list-content" }, index.h("slot", { key: 'aefb5cb158154da87f5e08371cad2a5f771ad015' }))));
+        return (index.h(index.Host, { key: 'ccfbfad51860c767b58f0d1c5f8c41beac645353' }, index.h("h2", { key: 'dee9b4b9b262637e1c4a944df6f26ec984d6d4ae' }, this.listTitle), index.h("div", { key: '2d725e445a201bf47ccb837e4251aae65bfc0ba2', class: "dso-action-list-content" }, index.h("slot", { key: '9947aab99743404054b4c5f678da57813462f9e0' }))));
     }
 };
 ActionList.style = DsoActionListStyle0;

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

@@ -83,12 +83,12 @@ const AdvancedSelect = class {
     }
     render() {
         var _a, _b;
-        return (index.h(index.Fragment, null, index.h("button", { key: '072b5a2364ecc6c09f0acfe6b6d02693b02a647d', "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("span", { key: 'c71ed7e63e245a074220af6942665c416f99e8aa', 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: 'f1bf83fd32e79863dda67160d3045277d500658c', class: "active-option-aside" }, this.options.some((optionOrGroup) => "summaryCounter" in optionOrGroup && (optionOrGroup === null || optionOrGroup === void 0 ? void 0 : optionOrGroup.summaryCounter)) && (index.h("span", { class: "badges" }, this.options
+        return (index.h(index.Fragment, null, index.h("button", { key: 'faa2a464654b5588270e5167fd6fcbd02bcb2e4c', "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("span", { key: 'f6ac64547bde1524cb7d3b58c58bf869dc726f65', 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: '5aa6fbc03ef2b9452cbe9c6af20ce402bf5d0a3f', class: "active-option-aside" }, this.options.some((optionOrGroup) => "summaryCounter" in optionOrGroup && (optionOrGroup === null || optionOrGroup === void 0 ? void 0 : optionOrGroup.summaryCounter)) && (index.h("span", { key: '44fe615ffd6638471c4d8022a654296405b9311a', 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: '2e99c6bb67badeb7f7e6620c6d9aa35f0e591931', icon: "caret-down" }))), this.open && (index.h("div", { class: "groups-container" }, index.h("ul", { 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(OptionElement, { option: option, active: this.active, activeHint: this.activeHint, callback: this.handleOptionClick }))))), optionOrGroup.redirect && (index.h(RedirectElement, { redirect: optionOrGroup.redirect, callback: this.handleRedirectClick }))))) ||
+        }))), index.h("dso-icon", { key: 'b0a5459c6c17c7d109b88a923054c85cc2a9c75f', icon: "caret-down" }))), this.open && (index.h("div", { key: 'f1490ff92e27d6b970558c83ccab35efec989597', class: "groups-container" }, index.h("ul", { key: 'a10ee50e10d87e7437cb9a51bc349207f82725fc', 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(OptionElement, { option: option, active: this.active, activeHint: this.activeHint, callback: this.handleOptionClick }))))), optionOrGroup.redirect && (index.h(RedirectElement, { redirect: optionOrGroup.redirect, callback: this.handleRedirectClick }))))) ||
             ("placeholder" in optionOrGroup && (index.h("li", { class: "group" }, index.h("p", { class: "group-label" }, optionOrGroup.label), index.h(PlaceholderElement, { placeholder: optionOrGroup.placeholder }), optionOrGroup.redirect && (index.h(RedirectElement, { redirect: optionOrGroup.redirect, callback: this.handleRedirectClick }))))) || (index.h("li", null, index.h(OptionElement, { 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":";;;;;;;;;;AAAA,MAAM,iBAAiB,GAAG,2uFAA2uF,CAAC;AACtwF,gCAAe,iBAAiB;;MC8BnB,cAAc;;;;;QA+DjB,eAAU,GAAG;YACnB,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;SACxB,CAAC;QAmCM,sBAAiB,GAAG,CAAC,KAAiB,EAAE,MAAmC;YACjF,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC;YACtD,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;SACnB,CAAC;QAEM,wBAAmB,GAAG,CAAC,KAAiB,EAAE,QAAqC;YACrF,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE,eAAe,EAAEA,+BAAe,CAAC,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC;YACnG,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;SACnB,CAAC;uBAlG8C,EAAE;;;oBAkBlC,KAAK;;IAiBrB,eAAe,CAAC,KAAoB;QAClC,IAAI,IAAI,CAAC,IAAI,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,EAAE;YACxC,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;SACpB;aAAM,IAAI,IAAI,CAAC,IAAI,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE;YACjD,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;SACnB;KACF;IAED,kBAAkB;QAChB,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YAC3B,IAAI,CAAC,UAAU,EAAE,CAAC;SACnB;aAAM,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,EAAE;YAClC,IAAI,CAAC,UAAU,EAAE,CAAC;SACnB;KACF;IAMO,UAAU;QAChB,IAAI,CAAC,IAAI,GAAGC,6BAAe,CAAC,IAAI,CAAC,IAAI,EAAE;YACrC,uBAAuB,EAAE,IAAI;YAC7B,iBAAiB,EAAE,IAAI;YACvB,cAAc,EAAE,IAAI,CAAC,sBAAsB;YAC3C,eAAe,EAAE;gBACf,aAAa,EAAE,IAAI;aACpB;YACD,YAAY,EAAE;gBACZ,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;aACnB;SACF,CAAC,CAAC,QAAQ,EAAE,CAAC;KACf;IAEO,UAAU;;QAChB,MAAA,IAAI,CAAC,IAAI,0CAAE,UAAU,EAAE,CAAC;QACxB,OAAO,IAAI,CAAC,IAAI,CAAC;KAClB;IAEO,SAAS,CAAC,SAAiB;;QACjC,MAAM,QAAQ,GAAGC,kBAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;QAC9D,MAAM,YAAY,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC,eAAK,OAAA,CAAC,MAAK,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAA,CAAA,EAAA,CAAC,CAAC;QAE1F,IAAI,SAAS,GAAG,YAAY,GAAG,SAAS,CAAC;QACzC,IAAI,SAAS,IAAI,QAAQ,CAAC,MAAM,EAAE;YAChC,SAAS,GAAG,CAAC,CAAC;SACf;aAAM,IAAI,SAAS,GAAG,CAAC,EAAE;YACxB,SAAS,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;SACjC;QAED,MAAA,QAAQ,CAAC,SAAS,CAAC,0CAAE,KAAK,EAAE,CAAC;KAC9B;IAYD,MAAM;;QACJ,QACEC,8BACEA,sFACiB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,EACnC,KAAK,EAAEC,SAAI,CAAC,CAAC,eAAe,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,EACnD,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,UAAU,EACxB,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,sBAAsB,GAAG,OAAO,CAAC,IAEzDD,mEAAM,KAAK,EAAC,qBAAqB,IAAE,MAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,KAAK,mCAAI,qBAAqB,CAAQ,EACtFA,mEAAM,KAAK,EAAC,qBAAqB,IAC9B,IAAI,CAAC,OAAO,CAAC,IAAI,CAChB,CAAC,aAAa,KAAK,gBAAgB,IAAI,aAAa,KAAI,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,cAAc,CAAA,CACtF,KACCA,kBAAM,KAAK,EAAC,QAAQ,IACjB,IAAI,CAAC,OAAO;aACV,MAAM,CACL,CAAC,MAAM,KACL,SAAS,IAAI,MAAM,IAAI,gBAAgB,IAAI,MAAM,IAAI,CAAC,EAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,cAAc,CAAA,CAChF;aACA,GAAG,CAAC,CAAC,KAAK;;YAAK,QACdA,uBAAW,MAAM,EAAE,MAAA,KAAK,CAAC,OAAO,mCAAI,SAAS,IAAG,KAAK,CAAC,OAAO,CAAC,MAAM,CAAa,EAClF;SAAA,CAAC,CACC,CACR,EACDA,uEAAU,IAAI,EAAC,YAAY,GAAY,CAClC,CACA,EACR,IAAI,CAAC,IAAI,KACRA,iBAAK,KAAK,EAAC,kBAAkB,IAC3BA,gBAAI,KAAK,EAAC,QAAQ,IACf,IAAI,CAAC,OAAO,CAAC,GAAG,CACf,CAAC,aAAa,KACZ,CAAC,SAAS,IAAI,aAAa,KACzBA,gBAAI,KAAK,EAAEC,SAAI,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,SAAS,aAAa,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC,CAAC,IACzFD,eAAG,KAAK,EAAC,aAAa,IAAE,aAAa,CAAC,KAAK,CAAK,EAChDA,gBAAI,KAAK,EAAC,SAAS,IAChB,aAAa,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MAChCA,oBACEA,QAAC,aAAa,IACZ,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,QAAQ,EAAE,IAAI,CAAC,iBAAiB,GAChC,CACC,CACN,CAAC,CACC,EACJ,aAAa,CAAC,QAAQ,KACrBA,QAAC,eAAe,IACd,QAAQ,EAAE,aAAa,CAAC,QAAQ,EAChC,QAAQ,EAAE,IAAI,CAAC,mBAAmB,GACjB,CACpB,CACE,CACN;aACA,aAAa,IAAI,aAAa,KAC7BA,gBAAI,KAAK,EAAC,OAAO,IACfA,eAAG,KAAK,EAAC,aAAa,IAAE,aAAa,CAAC,KAAK,CAAK,EAChDA,QAAC,kBAAkB,IAAC,WAAW,EAAE,aAAa,CAAC,WAAW,GAAuB,EAChF,aAAa,CAAC,QAAQ,KACrBA,QAAC,eAAe,IACd,QAAQ,EAAE,aAAa,CAAC,QAAQ,EAChC,QAAQ,EAAE,IAAI,CAAC,mBAAmB,GACjB,CACpB,CACE,CACN,CAAC,KACAA,oBACEA,QAAC,aAAa,IACZ,MAAM,EAAE,aAAa,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,QAAQ,EAAE,IAAI,CAAC,iBAAiB,GAChC,CACC,CACN,CACJ,CACE,CACD,CACP,CACA,EACH;KACH;;;AAGH,MAAM,kBAAkB,GAEnB,CAAC,EAAE,WAAW,EAAE,KAAKA,eAAG,KAAK,EAAC,aAAa,IAAE,WAAW,CAAK,CAAC;AAEnE,MAAM,aAAa,GAKd,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,MAC5CA,oBACE,KAAK,EAAEC,SAAI,CAAC,CAAC,QAAQ,EAAE,EAAE,eAAe,EAAE,MAAM,KAAK,MAAM,EAAE,CAAC,CAAC,EAC/D,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,CAAC,CAAC,KAAK,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC,IAEnCD,kBAAM,KAAK,EAAC,cAAc,IAAE,MAAM,CAAC,KAAK,CAAQ,EAC/C,CAAC,CAAC,UAAU,IAAI,MAAM,KAAK,MAAM,IAAIA,kBAAM,KAAK,EAAC,aAAa,SAAG,UAAU,MAAS,CAC9E,CACV,CAAC;AAEF,MAAM,eAAe,GAGhB,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAC1BA,eAAG,KAAK,EAAC,YAAY,EAAC,IAAI,EAAE,QAAQ,CAAC,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC,KAAK,QAAQ,CAAC,CAAC,EAAE,QAAQ,CAAC,IAC7E,QAAQ,CAAC,KAAK,EACfA,sBAAU,IAAI,EAAC,eAAe,GAAY,CACxC,CACL,CAAC;;;;;","names":["isModifiedEvent","createFocusTrap","tabbable","h","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\r\n:host {\r\n  display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.active-option {\r\n  display: flex;\r\n  inline-size: 100%;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  padding: 0;\r\n  border: 1px solid advanced-select.$border-color;\r\n  border-radius: advanced-select.$border-radius;\r\n  cursor: pointer;\r\n  background-color: advanced-select.$bg-color;\r\n  line-height: inherit;\r\n  font-family: inherit;\r\n  font-size: inherit;\r\n\r\n  &.open {\r\n    border-radius: advanced-select.$border-radius advanced-select.$border-radius 0 0;\r\n  }\r\n\r\n  dso-icon {\r\n    color: advanced-select.$icon-color;\r\n  }\r\n}\r\n\r\n.active-option-label {\r\n  padding: advanced-select.$vertical-padding advanced-select.$horizontal-padding;\r\n  overflow: hidden;\r\n  /* stylelint-disable-next-line declaration-property-value-disallowed-list -- Nodig om lange titels op de zelfde regel te houden */\r\n  white-space: nowrap;\r\n  /* stylelint-disable-next-line declaration-property-value-disallowed-list -- Nodig om lange titels op de zelfde regel te houden */\r\n  text-overflow: ellipsis;\r\n}\r\n\r\n.active-option-aside {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: advanced-select.$horizontal-padding * 0.5;\r\n  padding: 0 advanced-select.$horizontal-padding * 0.5;\r\n}\r\n\r\n.badges {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  gap: advanced-select.$vertical-padding;\r\n}\r\n\r\n.groups-container {\r\n  position: relative;\r\n}\r\n\r\n.groups {\r\n  position: absolute;\r\n  inset-block-start: -1px;\r\n  inset-inline-start: 0;\r\n  inline-size: 100%;\r\n  max-block-size: 500px;\r\n  margin: 0;\r\n  padding: 0;\r\n  overflow-y: auto;\r\n  background-color: advanced-select.$bg-color;\r\n  border: 1px solid advanced-select.$border-color;\r\n  border-radius: 0 0 advanced-select.$border-radius advanced-select.$border-radius;\r\n\r\n  li {\r\n    &::marker {\r\n      display: none;\r\n    }\r\n  }\r\n}\r\n\r\n.group {\r\n  border-bottom: 1px solid advanced-select.$hr-color;\r\n\r\n  &:last-child {\r\n    border-bottom: none;\r\n  }\r\n\r\n  .option {\r\n    padding-left: advanced-select.$horizontal-padding * 2 + advanced-select.$option-dot-size * 0.5;\r\n  }\r\n\r\n  .option-label::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    display: block;\r\n    block-size: advanced-select.$option-dot-size;\r\n    inline-size: advanced-select.$option-dot-size;\r\n    inset: advanced-select.$vertical-padding auto auto -#{advanced-select.$option-dot-size * 2};\r\n    border-radius: 50%;\r\n    @include set-colors.apply(advanced-select.$default-variant-color, $icons: false, $links: false);\r\n  }\r\n}\r\n\r\n.group-label {\r\n  margin: 0;\r\n  padding: advanced-select.$vertical-padding advanced-select.$horizontal-padding;\r\n  color: advanced-select.$group-label-color;\r\n  font-size: advanced-select.$group-label-font-size;\r\n  font-weight: advanced-select.$group-label-font-weight;\r\n  border-bottom: 1px solid advanced-select.$hr-color;\r\n}\r\n\r\n.group-link {\r\n  display: block;\r\n  padding: advanced-select.$group-link-horizontal-padding advanced-select.$group-link-vertical-padding;\r\n  text-align: end;\r\n  color: advanced-select.$group-link-color;\r\n  text-decoration: none;\r\n\r\n  &:hover {\r\n    text-decoration: underline;\r\n  }\r\n\r\n  dso-icon {\r\n    color: advanced-select.$redirect-icon-color;\r\n  }\r\n}\r\n\r\n.group-info .option-label::before {\r\n  @include set-colors.apply(advanced-select.$info-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-primary .option-label::before {\r\n  @include set-colors.apply(advanced-select.$primary-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-success .option-label::before {\r\n  @include set-colors.apply(advanced-select.$success-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-warning .option-label::before {\r\n  @include set-colors.apply(advanced-select.$warning-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-danger .option-label::before {\r\n  @include set-colors.apply(advanced-select.$danger-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-error .option-label::before {\r\n  @include set-colors.apply(advanced-select.$error-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-attention .option-label::before {\r\n  @include set-colors.apply(advanced-select.$attention-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.options {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\n.option {\r\n  display: block;\r\n  inline-size: 100%;\r\n  padding: advanced-select.$vertical-padding * 2 advanced-select.$horizontal-padding;\r\n  cursor: pointer;\r\n  line-height: inherit;\r\n  font-family: inherit;\r\n  font-size: inherit;\r\n  border: none;\r\n  text-align: left;\r\n  background-color: advanced-select.$bg-color;\r\n\r\n  &:hover {\r\n    background-color: advanced-select.$option-hover-bg-color;\r\n\r\n    .option-label {\r\n      color: advanced-select.$option-hover-color;\r\n      font-weight: advanced-select.$option-hover-font-weight;\r\n    }\r\n  }\r\n}\r\n\r\n.option.option-active .option-label {\r\n  color: advanced-select.$option-active-color;\r\n  font-weight: advanced-select.$option-active-font-weight;\r\n  text-decoration: underline;\r\n}\r\n\r\n.option-label {\r\n  position: relative;\r\n  color: advanced-select.$option-color;\r\n  font-size: advanced-select.$option-font-size;\r\n  font-weight: advanced-select.$option-font-weight;\r\n}\r\n\r\n.option-hint {\r\n  padding-left: 5px;\r\n  color: advanced-select.$option-active-color;\r\n  font-size: advanced-select.$option-font-size;\r\n  font-weight: advanced-select.$option-active-font-weight;\r\n}\r\n\r\n.placeholder {\r\n  margin: 0;\r\n  padding: advanced-select.$vertical-padding * 2 advanced-select.$horizontal-padding;\r\n  color: advanced-select.$option-placeholder-color;\r\n}\r\n","import {\r\n  Component,\r\n  ComponentInterface,\r\n  Prop,\r\n  h,\r\n  FunctionalComponent,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  State,\r\n  Fragment,\r\n  Listen,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport {\r\n  AdvancedSelectGroup,\r\n  AdvancedSelectGroupRedirect,\r\n  AdvancedSelectOption,\r\n  AdvancedSelectChangeEvent,\r\n  AdvancedSelectOptionOrGroup,\r\n  AdvancedSelectRedirectEvent,\r\n} from \"./advanced-select.models\";\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\nimport { tabbable } from \"tabbable\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\n@Component({\r\n  tag: \"dso-advanced-select\",\r\n  styleUrl: \"advanced-select.scss\",\r\n  shadow: true,\r\n})\r\nexport class AdvancedSelect implements ComponentInterface {\r\n  private trap?: FocusTrap;\r\n\r\n  @Element()\r\n  host!: HTMLDsoAdvancedSelectElement;\r\n\r\n  /**\r\n   * The options to display in the select.\r\n   */\r\n  @Prop()\r\n  options: AdvancedSelectOptionOrGroup<never>[] = [];\r\n\r\n  /**\r\n   * The active option. By object reference.\r\n   */\r\n  @Prop()\r\n  active?: AdvancedSelectOption<never>;\r\n\r\n  /**\r\n   * An extra text for the active option. Only visible in the list of options.\r\n   */\r\n  @Prop()\r\n  activeHint?: string;\r\n\r\n  /**\r\n   * The open state of the options list.\r\n   */\r\n  @State()\r\n  open: boolean = false;\r\n\r\n  /**\r\n   * Emitted when user selects an option\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoChange!: EventEmitter<AdvancedSelectChangeEvent<never>>;\r\n\r\n  /**\r\n   * Emitted when user activates a group redirect link.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoRedirect!: EventEmitter<AdvancedSelectRedirectEvent>;\r\n\r\n  private toggleButtonElementRef: HTMLButtonElement | undefined;\r\n\r\n  @Listen(\"keydown\", { target: \"window\" })\r\n  keyDownListener(event: KeyboardEvent) {\r\n    if (this.open && event.key === \"ArrowUp\") {\r\n      event.preventDefault();\r\n      this.handleTab(-1);\r\n    } else if (this.open && event.key === \"ArrowDown\") {\r\n      event.preventDefault();\r\n      this.handleTab(1);\r\n    }\r\n  }\r\n\r\n  componentDidRender() {\r\n    if (this.open && !this.trap) {\r\n      this.createTrap();\r\n    } else if (!this.open && this.trap) {\r\n      this.removeTrap();\r\n    }\r\n  }\r\n\r\n  private toggleOpen = () => {\r\n    this.open = !this.open;\r\n  };\r\n\r\n  private createTrap() {\r\n    this.trap = createFocusTrap(this.host, {\r\n      clickOutsideDeactivates: true,\r\n      escapeDeactivates: true,\r\n      setReturnFocus: this.toggleButtonElementRef,\r\n      tabbableOptions: {\r\n        getShadowRoot: true,\r\n      },\r\n      onDeactivate: () => {\r\n        this.open = false;\r\n      },\r\n    }).activate();\r\n  }\r\n\r\n  private removeTrap() {\r\n    this.trap?.deactivate();\r\n    delete this.trap;\r\n  }\r\n\r\n  private handleTab(direction: number) {\r\n    const elements = tabbable(this.host, { getShadowRoot: true });\r\n    const currentIndex = elements.findIndex((e) => e === this.host.shadowRoot?.activeElement);\r\n\r\n    let nextIndex = currentIndex + direction;\r\n    if (nextIndex >= elements.length) {\r\n      nextIndex = 0;\r\n    } else if (nextIndex < 0) {\r\n      nextIndex = elements.length - 1;\r\n    }\r\n\r\n    elements[nextIndex]?.focus();\r\n  }\r\n\r\n  private handleOptionClick = (event: MouseEvent, option: AdvancedSelectOption<never>) => {\r\n    this.dsoChange.emit({ originalEvent: event, option });\r\n    this.open = false;\r\n  };\r\n\r\n  private handleRedirectClick = (event: MouseEvent, redirect: AdvancedSelectGroupRedirect) => {\r\n    this.dsoRedirect.emit({ originalEvent: event, isModifiedEvent: isModifiedEvent(event), redirect });\r\n    this.open = false;\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <button\r\n          aria-expanded={this.open.toString()}\r\n          class={clsx([\"active-option\", { open: this.open }])}\r\n          type=\"button\"\r\n          onClick={this.toggleOpen}\r\n          ref={(element) => (this.toggleButtonElementRef = element)}\r\n        >\r\n          <span class=\"active-option-label\">{this.active?.label ?? \"Selecteer een optie\"}</span>\r\n          <span class=\"active-option-aside\">\r\n            {this.options.some(\r\n              (optionOrGroup) => \"summaryCounter\" in optionOrGroup && optionOrGroup?.summaryCounter,\r\n            ) && (\r\n              <span class=\"badges\">\r\n                {this.options\r\n                  .filter(\r\n                    (option): option is AdvancedSelectGroup<never> =>\r\n                      \"options\" in option && \"summaryCounter\" in option && !!option?.summaryCounter,\r\n                  )\r\n                  .map((group) => (\r\n                    <dso-badge status={group.variant ?? \"outline\"}>{group.options.length}</dso-badge>\r\n                  ))}\r\n              </span>\r\n            )}\r\n            <dso-icon icon=\"caret-down\"></dso-icon>\r\n          </span>\r\n        </button>\r\n        {this.open && (\r\n          <div class=\"groups-container\">\r\n            <ul class=\"groups\">\r\n              {this.options.map(\r\n                (optionOrGroup) =>\r\n                  (\"options\" in optionOrGroup && (\r\n                    <li class={clsx([\"group\", { [`group-${optionOrGroup.variant}`]: !!optionOrGroup.variant }])}>\r\n                      <p class=\"group-label\">{optionOrGroup.label}</p>\r\n                      <ul class=\"options\">\r\n                        {optionOrGroup.options.map((option) => (\r\n                          <li>\r\n                            <OptionElement\r\n                              option={option}\r\n                              active={this.active}\r\n                              activeHint={this.activeHint}\r\n                              callback={this.handleOptionClick}\r\n                            />\r\n                          </li>\r\n                        ))}\r\n                      </ul>\r\n                      {optionOrGroup.redirect && (\r\n                        <RedirectElement\r\n                          redirect={optionOrGroup.redirect}\r\n                          callback={this.handleRedirectClick}\r\n                        ></RedirectElement>\r\n                      )}\r\n                    </li>\r\n                  )) ||\r\n                  (\"placeholder\" in optionOrGroup && (\r\n                    <li class=\"group\">\r\n                      <p class=\"group-label\">{optionOrGroup.label}</p>\r\n                      <PlaceholderElement placeholder={optionOrGroup.placeholder}></PlaceholderElement>\r\n                      {optionOrGroup.redirect && (\r\n                        <RedirectElement\r\n                          redirect={optionOrGroup.redirect}\r\n                          callback={this.handleRedirectClick}\r\n                        ></RedirectElement>\r\n                      )}\r\n                    </li>\r\n                  )) || (\r\n                    <li>\r\n                      <OptionElement\r\n                        option={optionOrGroup}\r\n                        active={this.active}\r\n                        activeHint={this.activeHint}\r\n                        callback={this.handleOptionClick}\r\n                      />\r\n                    </li>\r\n                  ),\r\n              )}\r\n            </ul>\r\n          </div>\r\n        )}\r\n      </>\r\n    );\r\n  }\r\n}\r\n\r\nconst PlaceholderElement: FunctionalComponent<{\r\n  placeholder: string;\r\n}> = ({ placeholder }) => <p class=\"placeholder\">{placeholder}</p>;\r\n\r\nconst OptionElement: FunctionalComponent<{\r\n  option: AdvancedSelectOption<never>;\r\n  active: AdvancedSelectOption<never> | undefined;\r\n  activeHint: string | undefined;\r\n  callback: (event: MouseEvent, value: AdvancedSelectOption<never>) => void;\r\n}> = ({ option, active, activeHint, callback }) => (\r\n  <button\r\n    class={clsx([\"option\", { \"option-active\": active === option }])}\r\n    type=\"button\"\r\n    onClick={(e) => callback(e, option)}\r\n  >\r\n    <span class=\"option-label\">{option.label}</span>\r\n    {!!activeHint && active === option && <span class=\"option-hint\">({activeHint})</span>}\r\n  </button>\r\n);\r\n\r\nconst RedirectElement: FunctionalComponent<{\r\n  redirect: AdvancedSelectGroupRedirect;\r\n  callback: (event: MouseEvent, value: AdvancedSelectGroupRedirect) => void;\r\n}> = ({ redirect, callback }) => (\r\n  <a class=\"group-link\" href={redirect.href} onClick={(e) => callback(e, redirect)}>\r\n    {redirect.label}\r\n    <dso-icon icon=\"chevron-right\"></dso-icon>\r\n  </a>\r\n);\r\n"],"version":3}
+{"file":"dso-advanced-select.entry.cjs.js","mappings":"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","names":["isModifiedEvent","createFocusTrap","tabbable","h","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\r\n:host {\r\n  display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.active-option {\r\n  display: flex;\r\n  inline-size: 100%;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  padding: 0;\r\n  border: 1px solid advanced-select.$border-color;\r\n  border-radius: advanced-select.$border-radius;\r\n  cursor: pointer;\r\n  background-color: advanced-select.$bg-color;\r\n  line-height: inherit;\r\n  font-family: inherit;\r\n  font-size: inherit;\r\n\r\n  &.open {\r\n    border-radius: advanced-select.$border-radius advanced-select.$border-radius 0 0;\r\n  }\r\n\r\n  dso-icon {\r\n    color: advanced-select.$icon-color;\r\n  }\r\n}\r\n\r\n.active-option-label {\r\n  padding: advanced-select.$vertical-padding advanced-select.$horizontal-padding;\r\n  overflow: hidden;\r\n  /* stylelint-disable-next-line declaration-property-value-disallowed-list -- Nodig om lange titels op de zelfde regel te houden */\r\n  white-space: nowrap;\r\n  /* stylelint-disable-next-line declaration-property-value-disallowed-list -- Nodig om lange titels op de zelfde regel te houden */\r\n  text-overflow: ellipsis;\r\n}\r\n\r\n.active-option-aside {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: advanced-select.$horizontal-padding * 0.5;\r\n  padding: 0 advanced-select.$horizontal-padding * 0.5;\r\n}\r\n\r\n.badges {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  gap: advanced-select.$vertical-padding;\r\n}\r\n\r\n.groups-container {\r\n  position: relative;\r\n}\r\n\r\n.groups {\r\n  position: absolute;\r\n  inset-block-start: -1px;\r\n  inset-inline-start: 0;\r\n  inline-size: 100%;\r\n  max-block-size: 500px;\r\n  margin: 0;\r\n  padding: 0;\r\n  overflow-y: auto;\r\n  background-color: advanced-select.$bg-color;\r\n  border: 1px solid advanced-select.$border-color;\r\n  border-radius: 0 0 advanced-select.$border-radius advanced-select.$border-radius;\r\n\r\n  li {\r\n    &::marker {\r\n      display: none;\r\n    }\r\n  }\r\n}\r\n\r\n.group {\r\n  border-bottom: 1px solid advanced-select.$hr-color;\r\n\r\n  &:last-child {\r\n    border-bottom: none;\r\n  }\r\n\r\n  .option {\r\n    padding-left: advanced-select.$horizontal-padding * 2 + advanced-select.$option-dot-size * 0.5;\r\n  }\r\n\r\n  .option-label::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    display: block;\r\n    block-size: advanced-select.$option-dot-size;\r\n    inline-size: advanced-select.$option-dot-size;\r\n    inset: advanced-select.$vertical-padding auto auto -#{advanced-select.$option-dot-size * 2};\r\n    border-radius: 50%;\r\n    @include set-colors.apply(advanced-select.$default-variant-color, $icons: false, $links: false);\r\n  }\r\n}\r\n\r\n.group-label {\r\n  margin: 0;\r\n  padding: advanced-select.$vertical-padding advanced-select.$horizontal-padding;\r\n  color: advanced-select.$group-label-color;\r\n  font-size: advanced-select.$group-label-font-size;\r\n  font-weight: advanced-select.$group-label-font-weight;\r\n  border-bottom: 1px solid advanced-select.$hr-color;\r\n}\r\n\r\n.group-link {\r\n  display: block;\r\n  padding: advanced-select.$group-link-horizontal-padding advanced-select.$group-link-vertical-padding;\r\n  text-align: end;\r\n  color: advanced-select.$group-link-color;\r\n  text-decoration: none;\r\n\r\n  &:hover {\r\n    text-decoration: underline;\r\n  }\r\n\r\n  dso-icon {\r\n    color: advanced-select.$redirect-icon-color;\r\n  }\r\n}\r\n\r\n.group-info .option-label::before {\r\n  @include set-colors.apply(advanced-select.$info-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-primary .option-label::before {\r\n  @include set-colors.apply(advanced-select.$primary-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-success .option-label::before {\r\n  @include set-colors.apply(advanced-select.$success-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-warning .option-label::before {\r\n  @include set-colors.apply(advanced-select.$warning-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-danger .option-label::before {\r\n  @include set-colors.apply(advanced-select.$danger-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-error .option-label::before {\r\n  @include set-colors.apply(advanced-select.$error-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-attention .option-label::before {\r\n  @include set-colors.apply(advanced-select.$attention-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.options {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\n.option {\r\n  display: block;\r\n  inline-size: 100%;\r\n  padding: advanced-select.$vertical-padding * 2 advanced-select.$horizontal-padding;\r\n  cursor: pointer;\r\n  line-height: inherit;\r\n  font-family: inherit;\r\n  font-size: inherit;\r\n  border: none;\r\n  text-align: left;\r\n  background-color: advanced-select.$bg-color;\r\n\r\n  &:hover {\r\n    background-color: advanced-select.$option-hover-bg-color;\r\n\r\n    .option-label {\r\n      color: advanced-select.$option-hover-color;\r\n      font-weight: advanced-select.$option-hover-font-weight;\r\n    }\r\n  }\r\n}\r\n\r\n.option.option-active .option-label {\r\n  color: advanced-select.$option-active-color;\r\n  font-weight: advanced-select.$option-active-font-weight;\r\n  text-decoration: underline;\r\n}\r\n\r\n.option-label {\r\n  position: relative;\r\n  color: advanced-select.$option-color;\r\n  font-size: advanced-select.$option-font-size;\r\n  font-weight: advanced-select.$option-font-weight;\r\n}\r\n\r\n.option-hint {\r\n  padding-left: 5px;\r\n  color: advanced-select.$option-active-color;\r\n  font-size: advanced-select.$option-font-size;\r\n  font-weight: advanced-select.$option-active-font-weight;\r\n}\r\n\r\n.placeholder {\r\n  margin: 0;\r\n  padding: advanced-select.$vertical-padding * 2 advanced-select.$horizontal-padding;\r\n  color: advanced-select.$option-placeholder-color;\r\n}\r\n","import {\r\n  Component,\r\n  ComponentInterface,\r\n  Prop,\r\n  h,\r\n  FunctionalComponent,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  State,\r\n  Fragment,\r\n  Listen,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport {\r\n  AdvancedSelectGroup,\r\n  AdvancedSelectGroupRedirect,\r\n  AdvancedSelectOption,\r\n  AdvancedSelectChangeEvent,\r\n  AdvancedSelectOptionOrGroup,\r\n  AdvancedSelectRedirectEvent,\r\n} from \"./advanced-select.models\";\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\nimport { tabbable } from \"tabbable\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\n@Component({\r\n  tag: \"dso-advanced-select\",\r\n  styleUrl: \"advanced-select.scss\",\r\n  shadow: true,\r\n})\r\nexport class AdvancedSelect implements ComponentInterface {\r\n  private trap?: FocusTrap;\r\n\r\n  @Element()\r\n  host!: HTMLDsoAdvancedSelectElement;\r\n\r\n  /**\r\n   * The options to display in the select.\r\n   */\r\n  @Prop()\r\n  options: AdvancedSelectOptionOrGroup<never>[] = [];\r\n\r\n  /**\r\n   * The active option. By object reference.\r\n   */\r\n  @Prop()\r\n  active?: AdvancedSelectOption<never>;\r\n\r\n  /**\r\n   * An extra text for the active option. Only visible in the list of options.\r\n   */\r\n  @Prop()\r\n  activeHint?: string;\r\n\r\n  /**\r\n   * The open state of the options list.\r\n   */\r\n  @State()\r\n  open: boolean = false;\r\n\r\n  /**\r\n   * Emitted when user selects an option\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoChange!: EventEmitter<AdvancedSelectChangeEvent<never>>;\r\n\r\n  /**\r\n   * Emitted when user activates a group redirect link.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoRedirect!: EventEmitter<AdvancedSelectRedirectEvent>;\r\n\r\n  private toggleButtonElementRef: HTMLButtonElement | undefined;\r\n\r\n  @Listen(\"keydown\", { target: \"window\" })\r\n  keyDownListener(event: KeyboardEvent) {\r\n    if (this.open && event.key === \"ArrowUp\") {\r\n      event.preventDefault();\r\n      this.handleTab(-1);\r\n    } else if (this.open && event.key === \"ArrowDown\") {\r\n      event.preventDefault();\r\n      this.handleTab(1);\r\n    }\r\n  }\r\n\r\n  componentDidRender() {\r\n    if (this.open && !this.trap) {\r\n      this.createTrap();\r\n    } else if (!this.open && this.trap) {\r\n      this.removeTrap();\r\n    }\r\n  }\r\n\r\n  private toggleOpen = () => {\r\n    this.open = !this.open;\r\n  };\r\n\r\n  private createTrap() {\r\n    this.trap = createFocusTrap(this.host, {\r\n      clickOutsideDeactivates: true,\r\n      escapeDeactivates: true,\r\n      setReturnFocus: this.toggleButtonElementRef,\r\n      tabbableOptions: {\r\n        getShadowRoot: true,\r\n      },\r\n      onDeactivate: () => {\r\n        this.open = false;\r\n      },\r\n    }).activate();\r\n  }\r\n\r\n  private removeTrap() {\r\n    this.trap?.deactivate();\r\n    delete this.trap;\r\n  }\r\n\r\n  private handleTab(direction: number) {\r\n    const elements = tabbable(this.host, { getShadowRoot: true });\r\n    const currentIndex = elements.findIndex((e) => e === this.host.shadowRoot?.activeElement);\r\n\r\n    let nextIndex = currentIndex + direction;\r\n    if (nextIndex >= elements.length) {\r\n      nextIndex = 0;\r\n    } else if (nextIndex < 0) {\r\n      nextIndex = elements.length - 1;\r\n    }\r\n\r\n    elements[nextIndex]?.focus();\r\n  }\r\n\r\n  private handleOptionClick = (event: MouseEvent, option: AdvancedSelectOption<never>) => {\r\n    this.dsoChange.emit({ originalEvent: event, option });\r\n    this.open = false;\r\n  };\r\n\r\n  private handleRedirectClick = (event: MouseEvent, redirect: AdvancedSelectGroupRedirect) => {\r\n    this.dsoRedirect.emit({ originalEvent: event, isModifiedEvent: isModifiedEvent(event), redirect });\r\n    this.open = false;\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <button\r\n          aria-expanded={this.open.toString()}\r\n          class={clsx([\"active-option\", { open: this.open }])}\r\n          type=\"button\"\r\n          onClick={this.toggleOpen}\r\n          ref={(element) => (this.toggleButtonElementRef = element)}\r\n        >\r\n          <span class=\"active-option-label\">{this.active?.label ?? \"Selecteer een optie\"}</span>\r\n          <span class=\"active-option-aside\">\r\n            {this.options.some(\r\n              (optionOrGroup) => \"summaryCounter\" in optionOrGroup && optionOrGroup?.summaryCounter,\r\n            ) && (\r\n              <span class=\"badges\">\r\n                {this.options\r\n                  .filter(\r\n                    (option): option is AdvancedSelectGroup<never> =>\r\n                      \"options\" in option && \"summaryCounter\" in option && !!option?.summaryCounter,\r\n                  )\r\n                  .map((group) => (\r\n                    <dso-badge status={group.variant ?? \"outline\"}>{group.options.length}</dso-badge>\r\n                  ))}\r\n              </span>\r\n            )}\r\n            <dso-icon icon=\"caret-down\"></dso-icon>\r\n          </span>\r\n        </button>\r\n        {this.open && (\r\n          <div class=\"groups-container\">\r\n            <ul class=\"groups\">\r\n              {this.options.map(\r\n                (optionOrGroup) =>\r\n                  (\"options\" in optionOrGroup && (\r\n                    <li class={clsx([\"group\", { [`group-${optionOrGroup.variant}`]: !!optionOrGroup.variant }])}>\r\n                      <p class=\"group-label\">{optionOrGroup.label}</p>\r\n                      <ul class=\"options\">\r\n                        {optionOrGroup.options.map((option) => (\r\n                          <li>\r\n                            <OptionElement\r\n                              option={option}\r\n                              active={this.active}\r\n                              activeHint={this.activeHint}\r\n                              callback={this.handleOptionClick}\r\n                            />\r\n                          </li>\r\n                        ))}\r\n                      </ul>\r\n                      {optionOrGroup.redirect && (\r\n                        <RedirectElement\r\n                          redirect={optionOrGroup.redirect}\r\n                          callback={this.handleRedirectClick}\r\n                        ></RedirectElement>\r\n                      )}\r\n                    </li>\r\n                  )) ||\r\n                  (\"placeholder\" in optionOrGroup && (\r\n                    <li class=\"group\">\r\n                      <p class=\"group-label\">{optionOrGroup.label}</p>\r\n                      <PlaceholderElement placeholder={optionOrGroup.placeholder}></PlaceholderElement>\r\n                      {optionOrGroup.redirect && (\r\n                        <RedirectElement\r\n                          redirect={optionOrGroup.redirect}\r\n                          callback={this.handleRedirectClick}\r\n                        ></RedirectElement>\r\n                      )}\r\n                    </li>\r\n                  )) || (\r\n                    <li>\r\n                      <OptionElement\r\n                        option={optionOrGroup}\r\n                        active={this.active}\r\n                        activeHint={this.activeHint}\r\n                        callback={this.handleOptionClick}\r\n                      />\r\n                    </li>\r\n                  ),\r\n              )}\r\n            </ul>\r\n          </div>\r\n        )}\r\n      </>\r\n    );\r\n  }\r\n}\r\n\r\nconst PlaceholderElement: FunctionalComponent<{\r\n  placeholder: string;\r\n}> = ({ placeholder }) => <p class=\"placeholder\">{placeholder}</p>;\r\n\r\nconst OptionElement: FunctionalComponent<{\r\n  option: AdvancedSelectOption<never>;\r\n  active: AdvancedSelectOption<never> | undefined;\r\n  activeHint: string | undefined;\r\n  callback: (event: MouseEvent, value: AdvancedSelectOption<never>) => void;\r\n}> = ({ option, active, activeHint, callback }) => (\r\n  <button\r\n    class={clsx([\"option\", { \"option-active\": active === option }])}\r\n    type=\"button\"\r\n    onClick={(e) => callback(e, option)}\r\n  >\r\n    <span class=\"option-label\">{option.label}</span>\r\n    {!!activeHint && active === option && <span class=\"option-hint\">({activeHint})</span>}\r\n  </button>\r\n);\r\n\r\nconst RedirectElement: FunctionalComponent<{\r\n  redirect: AdvancedSelectGroupRedirect;\r\n  callback: (event: MouseEvent, value: AdvancedSelectGroupRedirect) => void;\r\n}> = ({ redirect, callback }) => (\r\n  <a class=\"group-link\" href={redirect.href} onClick={(e) => callback(e, redirect)}>\r\n    {redirect.label}\r\n    <dso-icon icon=\"chevron-right\"></dso-icon>\r\n  </a>\r\n);\r\n"],"version":3}