@dso-toolkit/core 62.30.0 → 62.30.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/dso-advanced-select.cjs.entry.js +3 -3
- package/dist/cjs/dso-advanced-select.cjs.entry.js.map +1 -1
- package/dist/cjs/dso-dropdown-menu.cjs.entry.js +3 -3
- package/dist/cjs/dso-dropdown-menu.cjs.entry.js.map +1 -1
- package/dist/collection/components/advanced-select/advanced-select.js +3 -3
- package/dist/collection/components/advanced-select/advanced-select.js.map +1 -1
- package/dist/collection/components/dropdown-menu/dropdown-menu.js +3 -3
- package/dist/collection/components/dropdown-menu/dropdown-menu.js.map +1 -1
- package/dist/components/dropdown-menu.js +3 -3
- package/dist/components/dropdown-menu.js.map +1 -1
- package/dist/components/dso-advanced-select.js +3 -3
- package/dist/components/dso-advanced-select.js.map +1 -1
- package/dist/dso-toolkit/dso-toolkit.esm.js +1 -1
- package/dist/dso-toolkit/{p-e881b305.entry.js → p-03aa7fad.entry.js} +2 -2
- package/dist/dso-toolkit/p-03aa7fad.entry.js.map +1 -0
- package/dist/dso-toolkit/p-d2e528b1.entry.js +2 -0
- package/dist/dso-toolkit/p-d2e528b1.entry.js.map +1 -0
- package/dist/esm/dso-advanced-select.entry.js +3 -3
- package/dist/esm/dso-advanced-select.entry.js.map +1 -1
- package/dist/esm/dso-dropdown-menu.entry.js +3 -3
- package/dist/esm/dso-dropdown-menu.entry.js.map +1 -1
- package/package.json +2 -2
- package/dist/dso-toolkit/p-a94bf203.entry.js +0 -2
- package/dist/dso-toolkit/p-a94bf203.entry.js.map +0 -1
- package/dist/dso-toolkit/p-e881b305.entry.js.map +0 -1
|
@@ -72,7 +72,7 @@ const AdvancedSelect = /*@__PURE__*/ proxyCustomElement(class AdvancedSelect ext
|
|
|
72
72
|
}
|
|
73
73
|
handleTab(direction) {
|
|
74
74
|
var _a;
|
|
75
|
-
const elements = tabbable(this.host, { getShadowRoot: true });
|
|
75
|
+
const elements = this.host.isConnected ? tabbable(this.host, { getShadowRoot: true }) : [];
|
|
76
76
|
const currentIndex = elements.findIndex((e) => { var _a; return e === ((_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement); });
|
|
77
77
|
let nextIndex = currentIndex + direction;
|
|
78
78
|
if (nextIndex >= elements.length) {
|
|
@@ -85,12 +85,12 @@ const AdvancedSelect = /*@__PURE__*/ proxyCustomElement(class AdvancedSelect ext
|
|
|
85
85
|
}
|
|
86
86
|
render() {
|
|
87
87
|
var _a, _b;
|
|
88
|
-
return (h(Fragment, null, h("button", { key: '
|
|
88
|
+
return (h(Fragment, null, h("button", { key: '863c76d960af3d1c91e2920f9e7640acf1fcb8de', "aria-expanded": this.open.toString(), class: clsx(["active-option", { open: this.open }]), type: "button", onClick: this.toggleOpen, ref: (element) => (this.toggleButtonElementRef = element) }, h(ActiveGroupLabel, { key: '0165cc3fc03367aedda4e9a6e49ed76818bc9d7c', active: this.active, options: this.options }), h("span", { key: '624790ab9fefdfff15247e6e0964afa22580b8da', class: "active-option-label" }, (_b = (_a = this.active) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : "Selecteer een optie"), h("span", { key: '1ecb6f4ed7ebea267fa0cf99b649c7ff4ae480d8', class: "active-option-aside" }, this.options.some((optionOrGroup) => "summaryCounter" in optionOrGroup && (optionOrGroup === null || optionOrGroup === void 0 ? void 0 : optionOrGroup.summaryCounter)) && (h("span", { key: 'dbc4278fd89412fb098d9e7c360a2f4ac58cafd6', class: "badges" }, this.options
|
|
89
89
|
.filter((option) => "options" in option && "summaryCounter" in option && !!(option === null || option === void 0 ? void 0 : option.summaryCounter))
|
|
90
90
|
.map((group) => {
|
|
91
91
|
var _a;
|
|
92
92
|
return (h("dso-badge", { status: (_a = group.variant) !== null && _a !== void 0 ? _a : "outline" }, group.options.length));
|
|
93
|
-
}))), h("dso-icon", { key: '
|
|
93
|
+
}))), h("dso-icon", { key: '892afcf018935d842562288b5219902044bf0b3f', icon: "caret-down" }))), this.open && (h("div", { key: '81651c248319f8fa5281d30cb90ff228d2b6c8cd', class: "groups-container" }, h("ul", { key: '9776c7284681eee6ad5128c4558872db7eda894a', class: "groups" }, this.options.map((optionOrGroup) => ("options" in optionOrGroup && (h("li", { class: clsx(["group", { [`group-${optionOrGroup.variant}`]: !!optionOrGroup.variant }]) }, h("p", { class: "group-label" }, optionOrGroup.label), h("ul", { class: "options" }, optionOrGroup.options.map((option) => (h("li", null, h(OptionButton, { option: option, active: this.active, activeHint: this.activeHint, callback: this.handleOptionClick }))))), optionOrGroup.redirect && (h(RedirectAnchor, { redirect: optionOrGroup.redirect, callback: this.handleRedirectClick }))))) ||
|
|
94
94
|
("placeholder" in optionOrGroup && (h("li", { class: "group" }, h("p", { class: "group-label" }, optionOrGroup.label), h("p", { class: "placeholder" }, optionOrGroup.placeholder), optionOrGroup.redirect && (h(RedirectAnchor, { redirect: optionOrGroup.redirect, callback: this.handleRedirectClick }))))) || (h("li", null, h(OptionButton, { option: optionOrGroup, active: this.active, activeHint: this.activeHint, callback: this.handleOptionClick })))))))));
|
|
95
95
|
}
|
|
96
96
|
get host() { return this; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"dso-advanced-select.js","mappings":"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","names":[],"sources":["src/components/advanced-select/advanced-select.scss?tag=dso-advanced-select&encapsulation=shadow","src/components/advanced-select/advanced-select.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\r\n@use \"~dso-toolkit/src/components/advanced-select\";\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.active-option {\r\n display: flex;\r\n inline-size: 100%;\r\n justify-content: flex-start;\r\n align-items: center;\r\n padding: 0;\r\n border: 1px solid advanced-select.$border-color;\r\n border-radius: advanced-select.$border-radius;\r\n cursor: pointer;\r\n background-color: advanced-select.$bg-color;\r\n line-height: inherit;\r\n font-family: inherit;\r\n font-size: inherit;\r\n\r\n &.open {\r\n border-radius: advanced-select.$border-radius advanced-select.$border-radius 0 0;\r\n }\r\n\r\n dso-icon {\r\n color: advanced-select.$icon-color;\r\n }\r\n\r\n dso-label {\r\n margin-inline-start: advanced-select.$inline-padding * 0.5;\r\n }\r\n}\r\n\r\n.active-option-label {\r\n padding-block: advanced-select.$block-padding;\r\n padding-inline: advanced-select.$inline-padding;\r\n overflow: hidden;\r\n /* stylelint-disable-next-line declaration-property-value-disallowed-list -- Nodig om lange titels op de zelfde regel te houden */\r\n white-space: nowrap;\r\n /* stylelint-disable-next-line declaration-property-value-disallowed-list -- Nodig om lange titels op de zelfde regel te houden */\r\n text-overflow: ellipsis;\r\n}\r\n\r\n.active-option-aside {\r\n display: flex;\r\n align-items: center;\r\n gap: advanced-select.$inline-padding * 0.5;\r\n padding-block: 0;\r\n padding-inline: advanced-select.$inline-padding * 0.5;\r\n margin-inline-start: auto;\r\n}\r\n\r\n.badges {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n gap: advanced-select.$block-padding;\r\n}\r\n\r\n.groups-container {\r\n position: relative;\r\n}\r\n\r\n.groups {\r\n position: absolute;\r\n inset-block-start: -1px;\r\n inset-inline-start: 0;\r\n inline-size: 100%;\r\n max-block-size: 500px;\r\n margin: 0;\r\n padding: 0;\r\n overflow-y: auto;\r\n background-color: advanced-select.$bg-color;\r\n border: 1px solid advanced-select.$border-color;\r\n border-radius: 0 0 advanced-select.$border-radius advanced-select.$border-radius;\r\n\r\n li {\r\n &::marker {\r\n display: none;\r\n }\r\n }\r\n}\r\n\r\n.group {\r\n border-block-end: 1px solid advanced-select.$hr-color;\r\n\r\n &:last-child {\r\n border-block-end: none;\r\n }\r\n\r\n .option {\r\n padding-inline-start: advanced-select.$inline-padding * 2 + advanced-select.$option-dot-size * 0.5;\r\n }\r\n\r\n .option-label::before {\r\n content: \"\";\r\n position: absolute;\r\n display: block;\r\n block-size: advanced-select.$option-dot-size;\r\n inline-size: advanced-select.$option-dot-size;\r\n inset-block: advanced-select.$block-padding auto;\r\n inset-inline: -#{advanced-select.$option-dot-size * 2} auto;\r\n border-radius: 50%;\r\n @include set-colors.apply(advanced-select.$default-variant-color, $icons: false, $links: false);\r\n }\r\n}\r\n\r\n.group-label {\r\n margin: 0;\r\n padding-block: advanced-select.$block-padding;\r\n padding-inline: advanced-select.$inline-padding;\r\n color: advanced-select.$group-label-color;\r\n font-size: advanced-select.$group-label-font-size;\r\n font-weight: advanced-select.$group-label-font-weight;\r\n border-block-end: 1px solid advanced-select.$hr-color;\r\n}\r\n\r\n.group-link {\r\n display: block;\r\n padding-block: advanced-select.$group-link-block-padding;\r\n padding-inline: advanced-select.$group-link-inline-padding;\r\n text-align: end;\r\n color: advanced-select.$group-link-color;\r\n text-decoration: none;\r\n\r\n &:hover {\r\n text-decoration: underline;\r\n }\r\n\r\n dso-icon {\r\n color: advanced-select.$redirect-icon-color;\r\n }\r\n}\r\n\r\n.group-info .option-label::before {\r\n @include set-colors.apply(advanced-select.$info-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-primary .option-label::before {\r\n @include set-colors.apply(advanced-select.$primary-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-success .option-label::before {\r\n @include set-colors.apply(advanced-select.$success-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-warning .option-label::before {\r\n @include set-colors.apply(advanced-select.$warning-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-danger .option-label::before {\r\n @include set-colors.apply(advanced-select.$danger-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-error .option-label::before {\r\n @include set-colors.apply(advanced-select.$error-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-attention .option-label::before {\r\n @include set-colors.apply(advanced-select.$attention-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.options {\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\n.option {\r\n display: block;\r\n inline-size: 100%;\r\n padding-block: advanced-select.$block-padding * 2;\r\n padding-inline: advanced-select.$inline-padding;\r\n cursor: pointer;\r\n line-height: inherit;\r\n font-family: inherit;\r\n font-size: inherit;\r\n border: none;\r\n text-align: start;\r\n background-color: advanced-select.$bg-color;\r\n\r\n &:hover {\r\n background-color: advanced-select.$option-hover-bg-color;\r\n\r\n .option-label {\r\n color: advanced-select.$option-hover-color;\r\n font-weight: advanced-select.$option-hover-font-weight;\r\n }\r\n }\r\n}\r\n\r\n.option.option-active .option-label {\r\n color: advanced-select.$option-active-color;\r\n font-weight: advanced-select.$option-active-font-weight;\r\n text-decoration: underline;\r\n}\r\n\r\n.option-label {\r\n position: relative;\r\n color: advanced-select.$option-color;\r\n font-size: advanced-select.$option-font-size;\r\n font-weight: advanced-select.$option-font-weight;\r\n}\r\n\r\n.option-hint {\r\n padding-inline-start: 5px;\r\n color: advanced-select.$option-active-color;\r\n font-size: advanced-select.$option-font-size;\r\n font-weight: advanced-select.$option-active-font-weight;\r\n}\r\n\r\n.placeholder {\r\n margin: 0;\r\n padding-block: advanced-select.$block-padding * 2;\r\n padding-inline: advanced-select.$inline-padding;\r\n color: advanced-select.$option-placeholder-color;\r\n}\r\n","import {\r\n Component,\r\n ComponentInterface,\r\n Prop,\r\n h,\r\n FunctionalComponent,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n State,\r\n Fragment,\r\n Listen,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport {\r\n AdvancedSelectGroup,\r\n AdvancedSelectGroupRedirect,\r\n AdvancedSelectOption,\r\n AdvancedSelectChangeEvent,\r\n AdvancedSelectOptionOrGroup,\r\n AdvancedSelectRedirectEvent,\r\n} from \"./advanced-select.interfaces\";\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\nimport { tabbable } from \"tabbable\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\n@Component({\r\n tag: \"dso-advanced-select\",\r\n styleUrl: \"advanced-select.scss\",\r\n shadow: true,\r\n})\r\nexport class AdvancedSelect implements ComponentInterface {\r\n private trap?: FocusTrap;\r\n\r\n @Element()\r\n host!: HTMLDsoAdvancedSelectElement;\r\n\r\n /**\r\n * The options to display in the select.\r\n */\r\n @Prop()\r\n options: AdvancedSelectOptionOrGroup<never>[] = [];\r\n\r\n /**\r\n * The active option. By object reference.\r\n */\r\n @Prop()\r\n active?: AdvancedSelectOption<never>;\r\n\r\n /**\r\n * An extra text for the active option. Only visible in the list of options.\r\n */\r\n @Prop()\r\n activeHint?: string;\r\n\r\n /**\r\n * The open state of the options list.\r\n */\r\n @State()\r\n open: boolean = false;\r\n\r\n /**\r\n * Emitted when user selects an option\r\n */\r\n @Event({ bubbles: false })\r\n dsoChange!: EventEmitter<AdvancedSelectChangeEvent<never>>;\r\n\r\n /**\r\n * Emitted when user activates a group redirect link.\r\n */\r\n @Event({ bubbles: false })\r\n dsoRedirect!: EventEmitter<AdvancedSelectRedirectEvent>;\r\n\r\n private toggleButtonElementRef: HTMLButtonElement | undefined;\r\n\r\n @Listen(\"keydown\", { target: \"window\" })\r\n keyDownListener(event: KeyboardEvent) {\r\n if (this.open && event.key === \"ArrowUp\") {\r\n event.preventDefault();\r\n this.handleTab(-1);\r\n } else if (this.open && event.key === \"ArrowDown\") {\r\n event.preventDefault();\r\n this.handleTab(1);\r\n }\r\n }\r\n\r\n componentDidRender() {\r\n if (this.open && !this.trap) {\r\n this.createTrap();\r\n } else if (!this.open && this.trap) {\r\n this.removeTrap();\r\n }\r\n }\r\n\r\n private toggleOpen = () => {\r\n this.open = !this.open;\r\n };\r\n\r\n private createTrap() {\r\n this.trap = createFocusTrap(this.host, {\r\n clickOutsideDeactivates: true,\r\n escapeDeactivates: true,\r\n setReturnFocus: this.toggleButtonElementRef,\r\n tabbableOptions: {\r\n getShadowRoot: true,\r\n },\r\n onDeactivate: () => {\r\n this.open = false;\r\n },\r\n }).activate();\r\n }\r\n\r\n private removeTrap() {\r\n this.trap?.deactivate();\r\n delete this.trap;\r\n }\r\n\r\n private handleTab(direction: number) {\r\n const elements = tabbable(this.host, { getShadowRoot: true });\r\n const currentIndex = elements.findIndex((e) => e === this.host.shadowRoot?.activeElement);\r\n\r\n let nextIndex = currentIndex + direction;\r\n if (nextIndex >= elements.length) {\r\n nextIndex = 0;\r\n } else if (nextIndex < 0) {\r\n nextIndex = elements.length - 1;\r\n }\r\n\r\n elements[nextIndex]?.focus();\r\n }\r\n\r\n private handleOptionClick = (event: MouseEvent, option: AdvancedSelectOption<never>) => {\r\n this.dsoChange.emit({ originalEvent: event, option });\r\n this.open = false;\r\n };\r\n\r\n private handleRedirectClick = (event: MouseEvent, redirect: AdvancedSelectGroupRedirect) => {\r\n this.dsoRedirect.emit({ originalEvent: event, isModifiedEvent: isModifiedEvent(event), redirect });\r\n this.open = false;\r\n };\r\n\r\n render() {\r\n return (\r\n <>\r\n <button\r\n aria-expanded={this.open.toString()}\r\n class={clsx([\"active-option\", { open: this.open }])}\r\n type=\"button\"\r\n onClick={this.toggleOpen}\r\n ref={(element) => (this.toggleButtonElementRef = element)}\r\n >\r\n <ActiveGroupLabel active={this.active} options={this.options} />\r\n <span class=\"active-option-label\">{this.active?.label ?? \"Selecteer een optie\"}</span>\r\n <span class=\"active-option-aside\">\r\n {this.options.some(\r\n (optionOrGroup) => \"summaryCounter\" in optionOrGroup && optionOrGroup?.summaryCounter,\r\n ) && (\r\n <span class=\"badges\">\r\n {this.options\r\n .filter(\r\n (option): option is AdvancedSelectGroup<never> =>\r\n \"options\" in option && \"summaryCounter\" in option && !!option?.summaryCounter,\r\n )\r\n .map((group) => (\r\n <dso-badge status={group.variant ?? \"outline\"}>{group.options.length}</dso-badge>\r\n ))}\r\n </span>\r\n )}\r\n <dso-icon icon=\"caret-down\"></dso-icon>\r\n </span>\r\n </button>\r\n {this.open && (\r\n <div class=\"groups-container\">\r\n <ul class=\"groups\">\r\n {this.options.map(\r\n (optionOrGroup) =>\r\n (\"options\" in optionOrGroup && (\r\n <li class={clsx([\"group\", { [`group-${optionOrGroup.variant}`]: !!optionOrGroup.variant }])}>\r\n <p class=\"group-label\">{optionOrGroup.label}</p>\r\n <ul class=\"options\">\r\n {optionOrGroup.options.map((option) => (\r\n <li>\r\n <OptionButton\r\n option={option}\r\n active={this.active}\r\n activeHint={this.activeHint}\r\n callback={this.handleOptionClick}\r\n />\r\n </li>\r\n ))}\r\n </ul>\r\n {optionOrGroup.redirect && (\r\n <RedirectAnchor\r\n redirect={optionOrGroup.redirect}\r\n callback={this.handleRedirectClick}\r\n ></RedirectAnchor>\r\n )}\r\n </li>\r\n )) ||\r\n (\"placeholder\" in optionOrGroup && (\r\n <li class=\"group\">\r\n <p class=\"group-label\">{optionOrGroup.label}</p>\r\n <p class=\"placeholder\">{optionOrGroup.placeholder}</p>\r\n {optionOrGroup.redirect && (\r\n <RedirectAnchor\r\n redirect={optionOrGroup.redirect}\r\n callback={this.handleRedirectClick}\r\n ></RedirectAnchor>\r\n )}\r\n </li>\r\n )) || (\r\n <li>\r\n <OptionButton\r\n option={optionOrGroup}\r\n active={this.active}\r\n activeHint={this.activeHint}\r\n callback={this.handleOptionClick}\r\n />\r\n </li>\r\n ),\r\n )}\r\n </ul>\r\n </div>\r\n )}\r\n </>\r\n );\r\n }\r\n}\r\n\r\ninterface OptionButtonProps {\r\n option: AdvancedSelectOption<never>;\r\n active: AdvancedSelectOption<never> | undefined;\r\n activeHint: string | undefined;\r\n callback: (event: MouseEvent, value: AdvancedSelectOption<never>) => void;\r\n}\r\n\r\nconst OptionButton: FunctionalComponent<OptionButtonProps> = ({ option, active, activeHint, callback }) => (\r\n <button\r\n class={clsx([\"option\", { \"option-active\": active === option }])}\r\n type=\"button\"\r\n onClick={(e) => callback(e, option)}\r\n >\r\n <span class=\"option-label\">{option.label}</span>\r\n {!!activeHint && active === option && <span class=\"option-hint\">({activeHint})</span>}\r\n </button>\r\n);\r\n\r\ninterface RedirectAnchorProps {\r\n redirect: AdvancedSelectGroupRedirect;\r\n callback: (event: MouseEvent, value: AdvancedSelectGroupRedirect) => void;\r\n}\r\n\r\nconst RedirectAnchor: FunctionalComponent<RedirectAnchorProps> = ({ redirect, callback }) => (\r\n <a class=\"group-link\" href={redirect.href} onClick={(e) => callback(e, redirect)}>\r\n {redirect.label}\r\n <dso-icon icon=\"chevron-right\"></dso-icon>\r\n </a>\r\n);\r\n\r\ninterface ActiveGroupLabelProps {\r\n active: AdvancedSelectOption<never> | undefined;\r\n options: AdvancedSelectOptionOrGroup<never>[];\r\n}\r\n\r\nconst ActiveGroupLabel: FunctionalComponent<ActiveGroupLabelProps> = ({ active, options }) => {\r\n const group = options.find(\r\n (optionOrGroup): optionOrGroup is AdvancedSelectGroup<never> =>\r\n \"options\" in optionOrGroup &&\r\n !!optionOrGroup.options.find((option) => option === active) &&\r\n !!optionOrGroup.activeLabel,\r\n );\r\n\r\n return group ? (\r\n <dso-label compact status={group.variant}>\r\n {group.activeLabel}\r\n </dso-label>\r\n ) : undefined;\r\n};\r\n"],"version":3}
|
|
1
|
+
{"file":"dso-advanced-select.js","mappings":"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","names":[],"sources":["src/components/advanced-select/advanced-select.scss?tag=dso-advanced-select&encapsulation=shadow","src/components/advanced-select/advanced-select.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\r\n@use \"~dso-toolkit/src/components/advanced-select\";\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.active-option {\r\n display: flex;\r\n inline-size: 100%;\r\n justify-content: flex-start;\r\n align-items: center;\r\n padding: 0;\r\n border: 1px solid advanced-select.$border-color;\r\n border-radius: advanced-select.$border-radius;\r\n cursor: pointer;\r\n background-color: advanced-select.$bg-color;\r\n line-height: inherit;\r\n font-family: inherit;\r\n font-size: inherit;\r\n\r\n &.open {\r\n border-radius: advanced-select.$border-radius advanced-select.$border-radius 0 0;\r\n }\r\n\r\n dso-icon {\r\n color: advanced-select.$icon-color;\r\n }\r\n\r\n dso-label {\r\n margin-inline-start: advanced-select.$inline-padding * 0.5;\r\n }\r\n}\r\n\r\n.active-option-label {\r\n padding-block: advanced-select.$block-padding;\r\n padding-inline: advanced-select.$inline-padding;\r\n overflow: hidden;\r\n /* stylelint-disable-next-line declaration-property-value-disallowed-list -- Nodig om lange titels op de zelfde regel te houden */\r\n white-space: nowrap;\r\n /* stylelint-disable-next-line declaration-property-value-disallowed-list -- Nodig om lange titels op de zelfde regel te houden */\r\n text-overflow: ellipsis;\r\n}\r\n\r\n.active-option-aside {\r\n display: flex;\r\n align-items: center;\r\n gap: advanced-select.$inline-padding * 0.5;\r\n padding-block: 0;\r\n padding-inline: advanced-select.$inline-padding * 0.5;\r\n margin-inline-start: auto;\r\n}\r\n\r\n.badges {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n gap: advanced-select.$block-padding;\r\n}\r\n\r\n.groups-container {\r\n position: relative;\r\n}\r\n\r\n.groups {\r\n position: absolute;\r\n inset-block-start: -1px;\r\n inset-inline-start: 0;\r\n inline-size: 100%;\r\n max-block-size: 500px;\r\n margin: 0;\r\n padding: 0;\r\n overflow-y: auto;\r\n background-color: advanced-select.$bg-color;\r\n border: 1px solid advanced-select.$border-color;\r\n border-radius: 0 0 advanced-select.$border-radius advanced-select.$border-radius;\r\n\r\n li {\r\n &::marker {\r\n display: none;\r\n }\r\n }\r\n}\r\n\r\n.group {\r\n border-block-end: 1px solid advanced-select.$hr-color;\r\n\r\n &:last-child {\r\n border-block-end: none;\r\n }\r\n\r\n .option {\r\n padding-inline-start: advanced-select.$inline-padding * 2 + advanced-select.$option-dot-size * 0.5;\r\n }\r\n\r\n .option-label::before {\r\n content: \"\";\r\n position: absolute;\r\n display: block;\r\n block-size: advanced-select.$option-dot-size;\r\n inline-size: advanced-select.$option-dot-size;\r\n inset-block: advanced-select.$block-padding auto;\r\n inset-inline: -#{advanced-select.$option-dot-size * 2} auto;\r\n border-radius: 50%;\r\n @include set-colors.apply(advanced-select.$default-variant-color, $icons: false, $links: false);\r\n }\r\n}\r\n\r\n.group-label {\r\n margin: 0;\r\n padding-block: advanced-select.$block-padding;\r\n padding-inline: advanced-select.$inline-padding;\r\n color: advanced-select.$group-label-color;\r\n font-size: advanced-select.$group-label-font-size;\r\n font-weight: advanced-select.$group-label-font-weight;\r\n border-block-end: 1px solid advanced-select.$hr-color;\r\n}\r\n\r\n.group-link {\r\n display: block;\r\n padding-block: advanced-select.$group-link-block-padding;\r\n padding-inline: advanced-select.$group-link-inline-padding;\r\n text-align: end;\r\n color: advanced-select.$group-link-color;\r\n text-decoration: none;\r\n\r\n &:hover {\r\n text-decoration: underline;\r\n }\r\n\r\n dso-icon {\r\n color: advanced-select.$redirect-icon-color;\r\n }\r\n}\r\n\r\n.group-info .option-label::before {\r\n @include set-colors.apply(advanced-select.$info-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-primary .option-label::before {\r\n @include set-colors.apply(advanced-select.$primary-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-success .option-label::before {\r\n @include set-colors.apply(advanced-select.$success-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-warning .option-label::before {\r\n @include set-colors.apply(advanced-select.$warning-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-danger .option-label::before {\r\n @include set-colors.apply(advanced-select.$danger-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-error .option-label::before {\r\n @include set-colors.apply(advanced-select.$error-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-attention .option-label::before {\r\n @include set-colors.apply(advanced-select.$attention-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.options {\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\n.option {\r\n display: block;\r\n inline-size: 100%;\r\n padding-block: advanced-select.$block-padding * 2;\r\n padding-inline: advanced-select.$inline-padding;\r\n cursor: pointer;\r\n line-height: inherit;\r\n font-family: inherit;\r\n font-size: inherit;\r\n border: none;\r\n text-align: start;\r\n background-color: advanced-select.$bg-color;\r\n\r\n &:hover {\r\n background-color: advanced-select.$option-hover-bg-color;\r\n\r\n .option-label {\r\n color: advanced-select.$option-hover-color;\r\n font-weight: advanced-select.$option-hover-font-weight;\r\n }\r\n }\r\n}\r\n\r\n.option.option-active .option-label {\r\n color: advanced-select.$option-active-color;\r\n font-weight: advanced-select.$option-active-font-weight;\r\n text-decoration: underline;\r\n}\r\n\r\n.option-label {\r\n position: relative;\r\n color: advanced-select.$option-color;\r\n font-size: advanced-select.$option-font-size;\r\n font-weight: advanced-select.$option-font-weight;\r\n}\r\n\r\n.option-hint {\r\n padding-inline-start: 5px;\r\n color: advanced-select.$option-active-color;\r\n font-size: advanced-select.$option-font-size;\r\n font-weight: advanced-select.$option-active-font-weight;\r\n}\r\n\r\n.placeholder {\r\n margin: 0;\r\n padding-block: advanced-select.$block-padding * 2;\r\n padding-inline: advanced-select.$inline-padding;\r\n color: advanced-select.$option-placeholder-color;\r\n}\r\n","import {\r\n Component,\r\n ComponentInterface,\r\n Prop,\r\n h,\r\n FunctionalComponent,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n State,\r\n Fragment,\r\n Listen,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport {\r\n AdvancedSelectGroup,\r\n AdvancedSelectGroupRedirect,\r\n AdvancedSelectOption,\r\n AdvancedSelectChangeEvent,\r\n AdvancedSelectOptionOrGroup,\r\n AdvancedSelectRedirectEvent,\r\n} from \"./advanced-select.interfaces\";\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\nimport { tabbable } from \"tabbable\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\n@Component({\r\n tag: \"dso-advanced-select\",\r\n styleUrl: \"advanced-select.scss\",\r\n shadow: true,\r\n})\r\nexport class AdvancedSelect implements ComponentInterface {\r\n private trap?: FocusTrap;\r\n\r\n @Element()\r\n host!: HTMLDsoAdvancedSelectElement;\r\n\r\n /**\r\n * The options to display in the select.\r\n */\r\n @Prop()\r\n options: AdvancedSelectOptionOrGroup<never>[] = [];\r\n\r\n /**\r\n * The active option. By object reference.\r\n */\r\n @Prop()\r\n active?: AdvancedSelectOption<never>;\r\n\r\n /**\r\n * An extra text for the active option. Only visible in the list of options.\r\n */\r\n @Prop()\r\n activeHint?: string;\r\n\r\n /**\r\n * The open state of the options list.\r\n */\r\n @State()\r\n open: boolean = false;\r\n\r\n /**\r\n * Emitted when user selects an option\r\n */\r\n @Event({ bubbles: false })\r\n dsoChange!: EventEmitter<AdvancedSelectChangeEvent<never>>;\r\n\r\n /**\r\n * Emitted when user activates a group redirect link.\r\n */\r\n @Event({ bubbles: false })\r\n dsoRedirect!: EventEmitter<AdvancedSelectRedirectEvent>;\r\n\r\n private toggleButtonElementRef: HTMLButtonElement | undefined;\r\n\r\n @Listen(\"keydown\", { target: \"window\" })\r\n keyDownListener(event: KeyboardEvent) {\r\n if (this.open && event.key === \"ArrowUp\") {\r\n event.preventDefault();\r\n this.handleTab(-1);\r\n } else if (this.open && event.key === \"ArrowDown\") {\r\n event.preventDefault();\r\n this.handleTab(1);\r\n }\r\n }\r\n\r\n componentDidRender() {\r\n if (this.open && !this.trap) {\r\n this.createTrap();\r\n } else if (!this.open && this.trap) {\r\n this.removeTrap();\r\n }\r\n }\r\n\r\n private toggleOpen = () => {\r\n this.open = !this.open;\r\n };\r\n\r\n private createTrap() {\r\n this.trap = createFocusTrap(this.host, {\r\n clickOutsideDeactivates: true,\r\n escapeDeactivates: true,\r\n setReturnFocus: this.toggleButtonElementRef,\r\n tabbableOptions: {\r\n getShadowRoot: true,\r\n },\r\n onDeactivate: () => {\r\n this.open = false;\r\n },\r\n }).activate();\r\n }\r\n\r\n private removeTrap() {\r\n this.trap?.deactivate();\r\n delete this.trap;\r\n }\r\n\r\n private handleTab(direction: number) {\r\n const elements = 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}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,b as o}from"./p-d638c2b0.js";export{s as setNonce}from"./p-d638c2b0.js";import{g as a}from"./p-e1255160.js";var t=()=>{const o=import.meta.url;const a={};if(o!==""){a.resourcesUrl=new URL(".",o).href}return e(a)};t().then((async e=>{await a();return o(JSON.parse('[["p-0eedf36a",[[2,"dsot-document-component-demo",{"showCanvas":[516,"show-canvas"],"jsonFile":[1,"json-file"],"openDefault":[4,"open-default"],"response":[32],"document":[32],"openOrClosed":[32],"openedAnnotation":[32],"filtered":[32],"notApplicable":[32],"activeAnnotationSelectables":[32]},null,{"jsonFile":["jsonFileWatcher"],"openDefault":["openDefaultWatcher"]}]]],["p-2d1f870c",[[1,"dso-annotation-activiteit",{"wijzigactie":[513],"active":[516],"gewijzigdeLocatie":[516,"gewijzigde-locatie"],"naam":[1],"regelKwalificatie":[1,"regel-kwalificatie"],"locatieNoemers":[16],"regelKwalificatieVoorzetsel":[1,"regel-kwalificatie-voorzetsel"]}]]],["p-30dbca1b",[[1,"dso-annotation-gebiedsaanwijzing",{"wijzigactie":[513],"active":[516],"gewijzigdeLocatie":[516,"gewijzigde-locatie"],"naam":[1]}]]],["p-38b3f31e",[[1,"dso-annotation-locatie",{"wijzigactie":[513],"active":[516],"gewijzigdeLocatie":[516,"gewijzigde-locatie"],"locatieNoemer":[1,"locatie-noemer"]}]]],["p-38d518f9",[[1,"dso-annotation-omgevingsnormwaarde",{"wijzigactie":[513],"active":[516],"gewijzigdeLocatie":[516,"gewijzigde-locatie"],"naam":[1],"toelichting":[1],"waardes":[16],"eenheid":[1]}]]],["p-b51c8bd1",[[1,"dso-accordion-section",{"handleTitle":[1,"handle-title"],"heading":[1],"handleUrl":[1,"handle-url"],"status":[1],"attachmentCount":[2,"attachment-count"],"icon":[1],"statusDescription":[1,"status-description"],"open":[516],"hasNestedAccordion":[516,"has-nested-accordion"],"badgeMessage":[1,"badge-message"],"badgeStatus":[1,"badge-status"],"hover":[32],"focusHandle":[64]}]]],["p-e881b305",[[1,"dso-advanced-select",{"options":[16],"active":[16],"activeHint":[1,"active-hint"],"open":[32]},[[8,"keydown","keyDownListener"]]]]],["p-3b4a3e37",[[1,"dso-legend-item",{"disabled":[516],"disabledMessage":[1,"disabled-message"],"removable":[4],"showBody":[32]}]]],["p-bc0e3147",[[1,"dso-map-base-layers",{"group":[1],"baseLayers":[16]}]]],["p-7e4c553d",[[1,"dso-map-overlays",{"group":[1],"overlays":[16]}]]],["p-07bdda5e",[[1,"dso-annotation-kaart",{"wijzigactie":[513],"naam":[1],"href":[513]}]]],["p-b53c6fb6",[[6,"dso-autosuggest",{"suggestions":[16],"loading":[4],"loadingLabel":[1,"loading-label"],"loadingDelayed":[2,"loading-delayed"],"notFoundLabel":[1,"not-found-label"],"suggestOnFocus":[4,"suggest-on-focus"],"mark":[16],"showSuggestions":[32],"selectedSuggestion":[32],"notFound":[32],"showLoading":[32],"listItemBlockSize":[32],"listboxContainerMaxBlockSize":[32]},[[4,"click","onDocumentClick"]],{"suggestions":["suggestionsWatcher"]}]]],["p-a092b873",[[6,"dso-header",{"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"authStatus":[1,"auth-status"],"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"showHelp":[4,"show-help"],"helpUrl":[1,"help-url"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"userHomeActive":[4,"user-home-active"],"showDropDown":[32],"overflowMenuItems":[32],"dropdownOptionsOffset":[32]},null,{"useDropDownMenu":["setShowDropDown"]}]]],["p-a2e9f65d",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32],"toggleVisibility":[64]},null,{"open":["watchOpen"]}]]],["p-b48845c9",[[1,"dso-modal",{"fullscreen":[516],"modalTitle":[1,"modal-title"],"role":[1],"returnFocus":[4,"return-focus"],"showCloseButton":[4,"show-close-button"],"ariaId":[32]}]]],["p-f0637435",[[1,"dso-pagination",{"totalPages":[2,"total-pages"],"currentPage":[2,"current-page"],"formatHref":[16],"availablePositions":[32]},[[0,"dsoSizeChange","sizeChangeHandler"]]]]],["p-96370f12",[[1,"dso-tree-view",{"collection":[16],"focusItem":[64]}]]],["p-3c8f0a89",[[1,"dso-action-list-item",{"step":[2],"itemTitle":[1,"item-title"],"flowLine":[4,"flow-line"],"warning":[4],"divider":[4]}]]],["p-cf0a95cf",[[1,"dso-card",{"clickable":[516],"imageShape":[513,"image-shape"],"href":[513],"mode":[513]}]]],["p-ab3fca8d",[[2,"dso-date-picker-legacy",{"name":[1],"identifier":[1],"disabled":[516],"role":[1],"direction":[1],"required":[4],"invalid":[516],"describedBy":[1,"described-by"],"dsoAutofocus":[4,"dso-autofocus"],"value":[1537],"min":[1],"max":[1],"activeFocus":[32],"focusedDay":[32],"open":[32],"visible":[32],"setFocus":[64],"show":[64],"hide":[64]},[[6,"click","handleDocumentClick"]]]]],["p-421d223d",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]},[[8,"keydown","keyDownListener"]],{"url":["watchUrl"],"isOpen":["watchIsOpen"]}]]],["p-224469db",[[1,"dso-list-button",{"label":[1],"sublabel":[1],"count":[2],"min":[8],"max":[8],"checked":[516],"disabled":[516],"subcontentPrefix":[1,"subcontent-prefix"],"manual":[4],"manualInputWrapperElement":[32],"manualCount":[32]},null,{"manual":["watchManualCallback"]}]]],["p-e15b7ce7",[[1,"dso-mark-bar",{"value":[1],"label":[1],"current":[2],"totalCount":[2,"total-count"],"dsoFocus":[64]}]]],["p-ff29c841",[[1,"dso-panel"]]],["p-df30c56c",[[1,"dso-accordion",{"variant":[513],"reverseAlign":[516,"reverse-align"],"_getState":[64]},null,{"variant":["updateVariant"],"reverseAlign":["updateReverseAlign"]}]]],["p-7fa33a0c",[[1,"dso-action-list",{"listTitle":[1,"list-title"]}]]],["p-28622002",[[1,"dso-banner",{"status":[513],"compact":[4],"noIcon":[4,"no-icon"]}]]],["p-12bea4ab",[[1,"dso-card-container",{"mode":[513]}]]],["p-7470bb47",[[2,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"required":[516],"invalid":[516],"describedBy":[1,"described-by"],"dsoAutofocus":[4,"dso-autofocus"],"value":[513],"min":[1],"max":[1]}]]],["p-be05632e",[[1,"dso-highlight-box",{"yellow":[516],"border":[516],"white":[516],"dropShadow":[516,"drop-shadow"],"step":[514]}]]],["p-f1089571",[[1,"dso-input-range",{"min":[2],"max":[2],"value":[2],"step":[2],"label":[1],"unit":[1],"description":[1]}]]],["p-9ee33188",[[1,"dso-logo",{"logoUrl":[513,"logo-url"],"label":[513],"labelUrl":[513,"label-url"],"ribbon":[513]}]]],["p-5cf23978",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["p-fc72f21c",[[1,"dso-viewer-grid",{"mode":[513],"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"documentPanelOpen":[516,"document-panel-open"],"mainSize":[513,"main-size"],"activeTab":[1,"active-tab"],"documentPanelSize":[513,"document-panel-size"],"mainPanelExpanded":[4,"main-panel-expanded"],"mainPanelHidden":[4,"main-panel-hidden"],"tabView":[32],"_checkMainPanelVisibility":[64]},null,{"documentPanelOpen":["documentPanelOpenWatcher"],"filterpanelOpen":["filterpanelOpenWatcher"],"overlayOpen":["overlayOpenWatcher"]}]]],["p-76e2a14e",[[1,"dso-icon",{"icon":[1]}]]],["p-8914f72a",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1],"hover":[32],"setFocus":[64]}]]],["p-cc9bf183",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"truncate":[4],"removeHover":[32],"removeFocus":[32],"textHover":[32],"textFocus":[32],"isTruncated":[32],"labelText":[32],"_truncateLabel":[64]},[[4,"keydown","keyDownListener"]],{"removable":["watchRemovable"],"truncate":["watchTruncate"]}],[1,"dso-tooltip",{"descriptive":[516],"position":[1],"strategy":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]},null,{"position":["watchPosition"],"strategy":["watchStrategy"],"active":["watchActive"]}]]],["p-4a59df70",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["p-dac60705",[[1,"dso-attachments-counter",{"count":[2]}]]],["p-a94bf203",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"dropdownOptionsOffset":[2,"dropdown-options-offset"],"checkable":[4],"boundary":[1],"placement":[1],"strategy":[1]},[[8,"click","onClick"],[8,"keydown","keyDownListener"]],{"placement":["watchPosition"],"dropdownAlign":["watchPosition"],"dropdownOptionsOffset":["watchOptionsOffset"],"strategy":["watchStrategy"]}]]],["p-a325b5b5",[[1,"dso-progress-indicator",{"label":[1],"size":[513],"block":[4]}]]],["p-d7048b9e",[[1,"dso-expandable",{"open":[516],"enableAnimation":[516,"enable-animation"],"minimumHeight":[2,"minimum-height"],"isClosed":[32]},[[0,"transitionstart","transitionstartHandler"],[0,"transitionend","transitionendHandler"]],{"open":["toggleOpen"]}]]],["p-c8bbb012",[[1,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32],"getSize":[64]}]]],["p-2e3bc902",[[1,"dso-scrollable",{"scrollPosition":[32],"_setScrollState":[64]}]]],["p-5c69d9c7",[[1,"dso-badge",{"status":[1]}]]],["p-8939c14f",[[6,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"labelledById":[1,"labelled-by-id"],"disabled":[4],"required":[4],"checked":[516],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32],"keyboardFocus":[32],"toggleInfo":[64]},null,{"indeterminate":["setIndeterminate"]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]],["p-0ea714fa",[[1,"dso-ozon-content",{"content":[1],"inline":[516],"mark":[16],"state":[32]},null,{"content":["contentWatcher"]}],[1,"dso-alert",{"status":[513],"roleAlert":[4,"role-alert"],"compact":[516]}],[0,"dso-annotation-button",{"identifier":[1],"open":[4]}],[1,"dso-image-overlay",{"wijzigactie":[1],"active":[32],"zoomable":[32]},[[2,"load","loadListener"]]],[1,"dso-table",{"noModal":[516,"no-modal"],"isResponsive":[516,"is-responsive"],"modalActive":[32],"placeholderHeight":[32]}]]],["p-e13733dc",[[1,"dso-document-component",{"heading":[1],"label":[1],"nummer":[1],"opschrift":[1],"inhoud":[1],"open":[516],"filtered":[516],"notApplicable":[516,"not-applicable"],"genesteOntwerpInformatie":[516,"geneste-ontwerp-informatie"],"bevatOntwerpInformatie":[516,"bevat-ontwerp-informatie"],"annotated":[516],"gereserveerd":[4],"vervallen":[4],"openAnnotation":[4,"open-annotation"],"alternativeTitle":[1,"alternative-title"],"type":[513],"wijzigactie":[513],"mark":[16],"recursiveToggle":[8,"recursive-toggle"]}],[4,"dso-annotation-output",{"identifier":[513],"annotationPrefix":[513,"annotation-prefix"],"open":[516]}]]],["p-f68abdad",[[1,"dso-renvooi",{"value":[1]}],[4,"dso-slide-toggle",{"checked":[4],"disabled":[4],"accessibleLabel":[1,"accessible-label"],"labelledbyId":[1,"labelledby-id"],"identifier":[1],"hasVisibleLabel":[32]}]]]]'),e)}));
|
|
1
|
+
import{p as e,b as o}from"./p-d638c2b0.js";export{s as setNonce}from"./p-d638c2b0.js";import{g as a}from"./p-e1255160.js";var t=()=>{const o=import.meta.url;const a={};if(o!==""){a.resourcesUrl=new URL(".",o).href}return e(a)};t().then((async e=>{await a();return o(JSON.parse('[["p-0eedf36a",[[2,"dsot-document-component-demo",{"showCanvas":[516,"show-canvas"],"jsonFile":[1,"json-file"],"openDefault":[4,"open-default"],"response":[32],"document":[32],"openOrClosed":[32],"openedAnnotation":[32],"filtered":[32],"notApplicable":[32],"activeAnnotationSelectables":[32]},null,{"jsonFile":["jsonFileWatcher"],"openDefault":["openDefaultWatcher"]}]]],["p-2d1f870c",[[1,"dso-annotation-activiteit",{"wijzigactie":[513],"active":[516],"gewijzigdeLocatie":[516,"gewijzigde-locatie"],"naam":[1],"regelKwalificatie":[1,"regel-kwalificatie"],"locatieNoemers":[16],"regelKwalificatieVoorzetsel":[1,"regel-kwalificatie-voorzetsel"]}]]],["p-30dbca1b",[[1,"dso-annotation-gebiedsaanwijzing",{"wijzigactie":[513],"active":[516],"gewijzigdeLocatie":[516,"gewijzigde-locatie"],"naam":[1]}]]],["p-38b3f31e",[[1,"dso-annotation-locatie",{"wijzigactie":[513],"active":[516],"gewijzigdeLocatie":[516,"gewijzigde-locatie"],"locatieNoemer":[1,"locatie-noemer"]}]]],["p-38d518f9",[[1,"dso-annotation-omgevingsnormwaarde",{"wijzigactie":[513],"active":[516],"gewijzigdeLocatie":[516,"gewijzigde-locatie"],"naam":[1],"toelichting":[1],"waardes":[16],"eenheid":[1]}]]],["p-b51c8bd1",[[1,"dso-accordion-section",{"handleTitle":[1,"handle-title"],"heading":[1],"handleUrl":[1,"handle-url"],"status":[1],"attachmentCount":[2,"attachment-count"],"icon":[1],"statusDescription":[1,"status-description"],"open":[516],"hasNestedAccordion":[516,"has-nested-accordion"],"badgeMessage":[1,"badge-message"],"badgeStatus":[1,"badge-status"],"hover":[32],"focusHandle":[64]}]]],["p-03aa7fad",[[1,"dso-advanced-select",{"options":[16],"active":[16],"activeHint":[1,"active-hint"],"open":[32]},[[8,"keydown","keyDownListener"]]]]],["p-3b4a3e37",[[1,"dso-legend-item",{"disabled":[516],"disabledMessage":[1,"disabled-message"],"removable":[4],"showBody":[32]}]]],["p-bc0e3147",[[1,"dso-map-base-layers",{"group":[1],"baseLayers":[16]}]]],["p-7e4c553d",[[1,"dso-map-overlays",{"group":[1],"overlays":[16]}]]],["p-07bdda5e",[[1,"dso-annotation-kaart",{"wijzigactie":[513],"naam":[1],"href":[513]}]]],["p-b53c6fb6",[[6,"dso-autosuggest",{"suggestions":[16],"loading":[4],"loadingLabel":[1,"loading-label"],"loadingDelayed":[2,"loading-delayed"],"notFoundLabel":[1,"not-found-label"],"suggestOnFocus":[4,"suggest-on-focus"],"mark":[16],"showSuggestions":[32],"selectedSuggestion":[32],"notFound":[32],"showLoading":[32],"listItemBlockSize":[32],"listboxContainerMaxBlockSize":[32]},[[4,"click","onDocumentClick"]],{"suggestions":["suggestionsWatcher"]}]]],["p-a092b873",[[6,"dso-header",{"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"authStatus":[1,"auth-status"],"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"showHelp":[4,"show-help"],"helpUrl":[1,"help-url"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"userHomeActive":[4,"user-home-active"],"showDropDown":[32],"overflowMenuItems":[32],"dropdownOptionsOffset":[32]},null,{"useDropDownMenu":["setShowDropDown"]}]]],["p-a2e9f65d",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32],"toggleVisibility":[64]},null,{"open":["watchOpen"]}]]],["p-b48845c9",[[1,"dso-modal",{"fullscreen":[516],"modalTitle":[1,"modal-title"],"role":[1],"returnFocus":[4,"return-focus"],"showCloseButton":[4,"show-close-button"],"ariaId":[32]}]]],["p-f0637435",[[1,"dso-pagination",{"totalPages":[2,"total-pages"],"currentPage":[2,"current-page"],"formatHref":[16],"availablePositions":[32]},[[0,"dsoSizeChange","sizeChangeHandler"]]]]],["p-96370f12",[[1,"dso-tree-view",{"collection":[16],"focusItem":[64]}]]],["p-3c8f0a89",[[1,"dso-action-list-item",{"step":[2],"itemTitle":[1,"item-title"],"flowLine":[4,"flow-line"],"warning":[4],"divider":[4]}]]],["p-cf0a95cf",[[1,"dso-card",{"clickable":[516],"imageShape":[513,"image-shape"],"href":[513],"mode":[513]}]]],["p-ab3fca8d",[[2,"dso-date-picker-legacy",{"name":[1],"identifier":[1],"disabled":[516],"role":[1],"direction":[1],"required":[4],"invalid":[516],"describedBy":[1,"described-by"],"dsoAutofocus":[4,"dso-autofocus"],"value":[1537],"min":[1],"max":[1],"activeFocus":[32],"focusedDay":[32],"open":[32],"visible":[32],"setFocus":[64],"show":[64],"hide":[64]},[[6,"click","handleDocumentClick"]]]]],["p-421d223d",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]},[[8,"keydown","keyDownListener"]],{"url":["watchUrl"],"isOpen":["watchIsOpen"]}]]],["p-224469db",[[1,"dso-list-button",{"label":[1],"sublabel":[1],"count":[2],"min":[8],"max":[8],"checked":[516],"disabled":[516],"subcontentPrefix":[1,"subcontent-prefix"],"manual":[4],"manualInputWrapperElement":[32],"manualCount":[32]},null,{"manual":["watchManualCallback"]}]]],["p-e15b7ce7",[[1,"dso-mark-bar",{"value":[1],"label":[1],"current":[2],"totalCount":[2,"total-count"],"dsoFocus":[64]}]]],["p-ff29c841",[[1,"dso-panel"]]],["p-df30c56c",[[1,"dso-accordion",{"variant":[513],"reverseAlign":[516,"reverse-align"],"_getState":[64]},null,{"variant":["updateVariant"],"reverseAlign":["updateReverseAlign"]}]]],["p-7fa33a0c",[[1,"dso-action-list",{"listTitle":[1,"list-title"]}]]],["p-28622002",[[1,"dso-banner",{"status":[513],"compact":[4],"noIcon":[4,"no-icon"]}]]],["p-12bea4ab",[[1,"dso-card-container",{"mode":[513]}]]],["p-7470bb47",[[2,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"required":[516],"invalid":[516],"describedBy":[1,"described-by"],"dsoAutofocus":[4,"dso-autofocus"],"value":[513],"min":[1],"max":[1]}]]],["p-be05632e",[[1,"dso-highlight-box",{"yellow":[516],"border":[516],"white":[516],"dropShadow":[516,"drop-shadow"],"step":[514]}]]],["p-f1089571",[[1,"dso-input-range",{"min":[2],"max":[2],"value":[2],"step":[2],"label":[1],"unit":[1],"description":[1]}]]],["p-9ee33188",[[1,"dso-logo",{"logoUrl":[513,"logo-url"],"label":[513],"labelUrl":[513,"label-url"],"ribbon":[513]}]]],["p-5cf23978",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["p-fc72f21c",[[1,"dso-viewer-grid",{"mode":[513],"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"documentPanelOpen":[516,"document-panel-open"],"mainSize":[513,"main-size"],"activeTab":[1,"active-tab"],"documentPanelSize":[513,"document-panel-size"],"mainPanelExpanded":[4,"main-panel-expanded"],"mainPanelHidden":[4,"main-panel-hidden"],"tabView":[32],"_checkMainPanelVisibility":[64]},null,{"documentPanelOpen":["documentPanelOpenWatcher"],"filterpanelOpen":["filterpanelOpenWatcher"],"overlayOpen":["overlayOpenWatcher"]}]]],["p-76e2a14e",[[1,"dso-icon",{"icon":[1]}]]],["p-8914f72a",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1],"hover":[32],"setFocus":[64]}]]],["p-cc9bf183",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"truncate":[4],"removeHover":[32],"removeFocus":[32],"textHover":[32],"textFocus":[32],"isTruncated":[32],"labelText":[32],"_truncateLabel":[64]},[[4,"keydown","keyDownListener"]],{"removable":["watchRemovable"],"truncate":["watchTruncate"]}],[1,"dso-tooltip",{"descriptive":[516],"position":[1],"strategy":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]},null,{"position":["watchPosition"],"strategy":["watchStrategy"],"active":["watchActive"]}]]],["p-4a59df70",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["p-dac60705",[[1,"dso-attachments-counter",{"count":[2]}]]],["p-d2e528b1",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"dropdownOptionsOffset":[2,"dropdown-options-offset"],"checkable":[4],"boundary":[1],"placement":[1],"strategy":[1]},[[8,"click","onClick"],[8,"keydown","keyDownListener"]],{"placement":["watchPosition"],"dropdownAlign":["watchPosition"],"dropdownOptionsOffset":["watchOptionsOffset"],"strategy":["watchStrategy"]}]]],["p-a325b5b5",[[1,"dso-progress-indicator",{"label":[1],"size":[513],"block":[4]}]]],["p-d7048b9e",[[1,"dso-expandable",{"open":[516],"enableAnimation":[516,"enable-animation"],"minimumHeight":[2,"minimum-height"],"isClosed":[32]},[[0,"transitionstart","transitionstartHandler"],[0,"transitionend","transitionendHandler"]],{"open":["toggleOpen"]}]]],["p-c8bbb012",[[1,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32],"getSize":[64]}]]],["p-2e3bc902",[[1,"dso-scrollable",{"scrollPosition":[32],"_setScrollState":[64]}]]],["p-5c69d9c7",[[1,"dso-badge",{"status":[1]}]]],["p-8939c14f",[[6,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"labelledById":[1,"labelled-by-id"],"disabled":[4],"required":[4],"checked":[516],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32],"keyboardFocus":[32],"toggleInfo":[64]},null,{"indeterminate":["setIndeterminate"]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]],["p-0ea714fa",[[1,"dso-ozon-content",{"content":[1],"inline":[516],"mark":[16],"state":[32]},null,{"content":["contentWatcher"]}],[1,"dso-alert",{"status":[513],"roleAlert":[4,"role-alert"],"compact":[516]}],[0,"dso-annotation-button",{"identifier":[1],"open":[4]}],[1,"dso-image-overlay",{"wijzigactie":[1],"active":[32],"zoomable":[32]},[[2,"load","loadListener"]]],[1,"dso-table",{"noModal":[516,"no-modal"],"isResponsive":[516,"is-responsive"],"modalActive":[32],"placeholderHeight":[32]}]]],["p-e13733dc",[[1,"dso-document-component",{"heading":[1],"label":[1],"nummer":[1],"opschrift":[1],"inhoud":[1],"open":[516],"filtered":[516],"notApplicable":[516,"not-applicable"],"genesteOntwerpInformatie":[516,"geneste-ontwerp-informatie"],"bevatOntwerpInformatie":[516,"bevat-ontwerp-informatie"],"annotated":[516],"gereserveerd":[4],"vervallen":[4],"openAnnotation":[4,"open-annotation"],"alternativeTitle":[1,"alternative-title"],"type":[513],"wijzigactie":[513],"mark":[16],"recursiveToggle":[8,"recursive-toggle"]}],[4,"dso-annotation-output",{"identifier":[513],"annotationPrefix":[513,"annotation-prefix"],"open":[516]}]]],["p-f68abdad",[[1,"dso-renvooi",{"value":[1]}],[4,"dso-slide-toggle",{"checked":[4],"disabled":[4],"accessibleLabel":[1,"accessible-label"],"labelledbyId":[1,"labelledby-id"],"identifier":[1],"hasVisibleLabel":[32]}]]]]'),e)}));
|
|
2
2
|
//# sourceMappingURL=dso-toolkit.esm.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as o,c as i,h as e,F as t,a as n}from"./p-d638c2b0.js";import{c as r}from"./p-8a1a6e56.js";import{c as a}from"./p-808a98bc.js";import{t as s}from"./p-1dbcaeef.js";import{i as l}from"./p-2d694112.js";const c=':host{display:block}*,*::after,*::before{box-sizing:border-box}.active-option{display:flex;inline-size:100%;justify-content:flex-start;align-items:center;padding:0;border:1px solid #275937;border-radius:4px;cursor:pointer;background-color:#fff;line-height:inherit;font-family:inherit;font-size:inherit}.active-option.open{border-radius:4px 4px 0 0}.active-option dso-icon{color:#275937}.active-option dso-label{margin-inline-start:8px}.active-option-label{padding-block:4px;padding-inline:16px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.active-option-aside{display:flex;align-items:center;gap:8px;padding-block:0;padding-inline:8px;margin-inline-start:auto}.badges{display:flex;justify-content:space-between;align-items:center;gap:4px}.groups-container{position:relative}.groups{position:absolute;inset-block-start:-1px;inset-inline-start:0;inline-size:100%;max-block-size:500px;margin:0;padding:0;overflow-y:auto;background-color:#fff;border:1px solid #275937;border-radius:0 0 4px 4px}.groups li::marker{display:none}.group{border-block-end:1px solid #ccc}.group:last-child{border-block-end:none}.group .option{padding-inline-start:37px}.group .option-label::before{content:"";position:absolute;display:block;block-size:10px;inline-size:10px;inset-block:4px auto;inset-inline:-20px auto;border-radius:50%;background-color:#ccc;border-color:#ccc;color:#191919}.group-label{margin:0;padding-block:4px;padding-inline:16px;color:#666;font-size:14px;font-weight:500;border-block-end:1px solid #ccc}.group-link{display:block;padding-block:8px;padding-inline:4px;text-align:end;color:#000;text-decoration:none}.group-link:hover{text-decoration:underline}.group-link dso-icon{color:#39870c}.group-info .option-label::before{background-color:#6ca4d9;border-color:#6ca4d9;color:#191919}.group-primary .option-label::before{background-color:#275937;border-color:#275937;color:#fff}.group-success .option-label::before{background-color:#39870c;border-color:#39870c;color:#fff}.group-warning .option-label::before{background-color:#dcd400;border-color:#dcd400;color:#191919}.group-danger .option-label::before{background-color:#ce3f51;border-color:#ce3f51;color:#fff}.group-error .option-label::before{background-color:#ce3f51;border-color:#ce3f51;color:#fff}.group-attention .option-label::before{background-color:#8b4a6a;border-color:#8b4a6a;color:#fff}.options{margin:0;padding:0}.option{display:block;inline-size:100%;padding-block:8px;padding-inline:16px;cursor:pointer;line-height:inherit;font-family:inherit;font-size:inherit;border:none;text-align:start;background-color:#fff}.option:hover{background-color:#ebf3e6}.option:hover .option-label{color:#39870c;font-weight:bold}.option.option-active .option-label{color:#39870c;font-weight:bold;text-decoration:underline}.option-label{position:relative;color:#000;font-size:Asap, sans-serif;font-weight:400}.option-hint{padding-inline-start:5px;color:#39870c;font-size:Asap, sans-serif;font-weight:bold}.placeholder{margin:0;padding-block:8px;padding-inline:16px;color:#666}';const d=c;const p=class{constructor(e){o(this,e);this.dsoChange=i(this,"dsoChange",3);this.dsoRedirect=i(this,"dsoRedirect",3);this.toggleOpen=()=>{this.open=!this.open};this.handleOptionClick=(o,i)=>{this.dsoChange.emit({originalEvent:o,option:i});this.open=false};this.handleRedirectClick=(o,i)=>{this.dsoRedirect.emit({originalEvent:o,isModifiedEvent:l(o),redirect:i});this.open=false};this.options=[];this.active=undefined;this.activeHint=undefined;this.open=false}keyDownListener(o){if(this.open&&o.key==="ArrowUp"){o.preventDefault();this.handleTab(-1)}else if(this.open&&o.key==="ArrowDown"){o.preventDefault();this.handleTab(1)}}componentDidRender(){if(this.open&&!this.trap){this.createTrap()}else if(!this.open&&this.trap){this.removeTrap()}}createTrap(){this.trap=a(this.host,{clickOutsideDeactivates:true,escapeDeactivates:true,setReturnFocus:this.toggleButtonElementRef,tabbableOptions:{getShadowRoot:true},onDeactivate:()=>{this.open=false}}).activate()}removeTrap(){var o;(o=this.trap)===null||o===void 0?void 0:o.deactivate();delete this.trap}handleTab(o){var i;const e=s(this.host,{getShadowRoot:true});const t=e.findIndex((o=>{var i;return o===((i=this.host.shadowRoot)===null||i===void 0?void 0:i.activeElement)}));let n=t+o;if(n>=e.length){n=0}else if(n<0){n=e.length-1}(i=e[n])===null||i===void 0?void 0:i.focus()}render(){var o,i;return e(t,null,e("button",{key:"
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as o,c as i,h as e,F as t,a as n}from"./p-d638c2b0.js";import{c as r}from"./p-8a1a6e56.js";import{c as a}from"./p-808a98bc.js";import{t as s}from"./p-1dbcaeef.js";import{i as l}from"./p-2d694112.js";const c=':host{display:block}*,*::after,*::before{box-sizing:border-box}.active-option{display:flex;inline-size:100%;justify-content:flex-start;align-items:center;padding:0;border:1px solid #275937;border-radius:4px;cursor:pointer;background-color:#fff;line-height:inherit;font-family:inherit;font-size:inherit}.active-option.open{border-radius:4px 4px 0 0}.active-option dso-icon{color:#275937}.active-option dso-label{margin-inline-start:8px}.active-option-label{padding-block:4px;padding-inline:16px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.active-option-aside{display:flex;align-items:center;gap:8px;padding-block:0;padding-inline:8px;margin-inline-start:auto}.badges{display:flex;justify-content:space-between;align-items:center;gap:4px}.groups-container{position:relative}.groups{position:absolute;inset-block-start:-1px;inset-inline-start:0;inline-size:100%;max-block-size:500px;margin:0;padding:0;overflow-y:auto;background-color:#fff;border:1px solid #275937;border-radius:0 0 4px 4px}.groups li::marker{display:none}.group{border-block-end:1px solid #ccc}.group:last-child{border-block-end:none}.group .option{padding-inline-start:37px}.group .option-label::before{content:"";position:absolute;display:block;block-size:10px;inline-size:10px;inset-block:4px auto;inset-inline:-20px auto;border-radius:50%;background-color:#ccc;border-color:#ccc;color:#191919}.group-label{margin:0;padding-block:4px;padding-inline:16px;color:#666;font-size:14px;font-weight:500;border-block-end:1px solid #ccc}.group-link{display:block;padding-block:8px;padding-inline:4px;text-align:end;color:#000;text-decoration:none}.group-link:hover{text-decoration:underline}.group-link dso-icon{color:#39870c}.group-info .option-label::before{background-color:#6ca4d9;border-color:#6ca4d9;color:#191919}.group-primary .option-label::before{background-color:#275937;border-color:#275937;color:#fff}.group-success .option-label::before{background-color:#39870c;border-color:#39870c;color:#fff}.group-warning .option-label::before{background-color:#dcd400;border-color:#dcd400;color:#191919}.group-danger .option-label::before{background-color:#ce3f51;border-color:#ce3f51;color:#fff}.group-error .option-label::before{background-color:#ce3f51;border-color:#ce3f51;color:#fff}.group-attention .option-label::before{background-color:#8b4a6a;border-color:#8b4a6a;color:#fff}.options{margin:0;padding:0}.option{display:block;inline-size:100%;padding-block:8px;padding-inline:16px;cursor:pointer;line-height:inherit;font-family:inherit;font-size:inherit;border:none;text-align:start;background-color:#fff}.option:hover{background-color:#ebf3e6}.option:hover .option-label{color:#39870c;font-weight:bold}.option.option-active .option-label{color:#39870c;font-weight:bold;text-decoration:underline}.option-label{position:relative;color:#000;font-size:Asap, sans-serif;font-weight:400}.option-hint{padding-inline-start:5px;color:#39870c;font-size:Asap, sans-serif;font-weight:bold}.placeholder{margin:0;padding-block:8px;padding-inline:16px;color:#666}';const d=c;const p=class{constructor(e){o(this,e);this.dsoChange=i(this,"dsoChange",3);this.dsoRedirect=i(this,"dsoRedirect",3);this.toggleOpen=()=>{this.open=!this.open};this.handleOptionClick=(o,i)=>{this.dsoChange.emit({originalEvent:o,option:i});this.open=false};this.handleRedirectClick=(o,i)=>{this.dsoRedirect.emit({originalEvent:o,isModifiedEvent:l(o),redirect:i});this.open=false};this.options=[];this.active=undefined;this.activeHint=undefined;this.open=false}keyDownListener(o){if(this.open&&o.key==="ArrowUp"){o.preventDefault();this.handleTab(-1)}else if(this.open&&o.key==="ArrowDown"){o.preventDefault();this.handleTab(1)}}componentDidRender(){if(this.open&&!this.trap){this.createTrap()}else if(!this.open&&this.trap){this.removeTrap()}}createTrap(){this.trap=a(this.host,{clickOutsideDeactivates:true,escapeDeactivates:true,setReturnFocus:this.toggleButtonElementRef,tabbableOptions:{getShadowRoot:true},onDeactivate:()=>{this.open=false}}).activate()}removeTrap(){var o;(o=this.trap)===null||o===void 0?void 0:o.deactivate();delete this.trap}handleTab(o){var i;const e=this.host.isConnected?s(this.host,{getShadowRoot:true}):[];const t=e.findIndex((o=>{var i;return o===((i=this.host.shadowRoot)===null||i===void 0?void 0:i.activeElement)}));let n=t+o;if(n>=e.length){n=0}else if(n<0){n=e.length-1}(i=e[n])===null||i===void 0?void 0:i.focus()}render(){var o,i;return e(t,null,e("button",{key:"863c76d960af3d1c91e2920f9e7640acf1fcb8de","aria-expanded":this.open.toString(),class:r(["active-option",{open:this.open}]),type:"button",onClick:this.toggleOpen,ref:o=>this.toggleButtonElementRef=o},e(u,{key:"0165cc3fc03367aedda4e9a6e49ed76818bc9d7c",active:this.active,options:this.options}),e("span",{key:"624790ab9fefdfff15247e6e0964afa22580b8da",class:"active-option-label"},(i=(o=this.active)===null||o===void 0?void 0:o.label)!==null&&i!==void 0?i:"Selecteer een optie"),e("span",{key:"1ecb6f4ed7ebea267fa0cf99b649c7ff4ae480d8",class:"active-option-aside"},this.options.some((o=>"summaryCounter"in o&&(o===null||o===void 0?void 0:o.summaryCounter)))&&e("span",{key:"dbc4278fd89412fb098d9e7c360a2f4ac58cafd6",class:"badges"},this.options.filter((o=>"options"in o&&"summaryCounter"in o&&!!(o===null||o===void 0?void 0:o.summaryCounter))).map((o=>{var i;return e("dso-badge",{status:(i=o.variant)!==null&&i!==void 0?i:"outline"},o.options.length)}))),e("dso-icon",{key:"892afcf018935d842562288b5219902044bf0b3f",icon:"caret-down"}))),this.open&&e("div",{key:"81651c248319f8fa5281d30cb90ff228d2b6c8cd",class:"groups-container"},e("ul",{key:"9776c7284681eee6ad5128c4558872db7eda894a",class:"groups"},this.options.map((o=>"options"in o&&e("li",{class:r(["group",{[`group-${o.variant}`]:!!o.variant}])},e("p",{class:"group-label"},o.label),e("ul",{class:"options"},o.options.map((o=>e("li",null,e(b,{option:o,active:this.active,activeHint:this.activeHint,callback:this.handleOptionClick}))))),o.redirect&&e(f,{redirect:o.redirect,callback:this.handleRedirectClick}))||"placeholder"in o&&e("li",{class:"group"},e("p",{class:"group-label"},o.label),e("p",{class:"placeholder"},o.placeholder),o.redirect&&e(f,{redirect:o.redirect,callback:this.handleRedirectClick}))||e("li",null,e(b,{option:o,active:this.active,activeHint:this.activeHint,callback:this.handleOptionClick})))))))}get host(){return n(this)}};const b=({option:o,active:i,activeHint:t,callback:n})=>e("button",{class:r(["option",{"option-active":i===o}]),type:"button",onClick:i=>n(i,o)},e("span",{class:"option-label"},o.label),!!t&&i===o&&e("span",{class:"option-hint"},"(",t,")"));const f=({redirect:o,callback:i})=>e("a",{class:"group-link",href:o.href,onClick:e=>i(e,o)},o.label,e("dso-icon",{icon:"chevron-right"}));const u=({active:o,options:i})=>{const t=i.find((i=>"options"in i&&!!i.options.find((i=>i===o))&&!!i.activeLabel));return t?e("dso-label",{compact:true,status:t.variant},t.activeLabel):undefined};p.style=d;export{p as dso_advanced_select};
|
|
2
|
+
//# sourceMappingURL=p-03aa7fad.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["advancedSelectCss","DsoAdvancedSelectStyle0","AdvancedSelect","this","toggleOpen","open","handleOptionClick","event","option","dsoChange","emit","originalEvent","handleRedirectClick","redirect","dsoRedirect","isModifiedEvent","keyDownListener","key","preventDefault","handleTab","componentDidRender","trap","createTrap","removeTrap","createFocusTrap","host","clickOutsideDeactivates","escapeDeactivates","setReturnFocus","toggleButtonElementRef","tabbableOptions","getShadowRoot","onDeactivate","activate","_a","deactivate","direction","elements","isConnected","tabbable","currentIndex","findIndex","e","shadowRoot","activeElement","nextIndex","length","focus","render","h","Fragment","toString","class","clsx","type","onClick","ref","element","ActiveGroupLabel","active","options","_b","label","some","optionOrGroup","summaryCounter","filter","map","group","status","variant","icon","OptionButton","activeHint","callback","RedirectAnchor","placeholder","href","find","activeLabel","compact","undefined"],"sources":["src/components/advanced-select/advanced-select.scss?tag=dso-advanced-select&encapsulation=shadow","src/components/advanced-select/advanced-select.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\r\n@use \"~dso-toolkit/src/components/advanced-select\";\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.active-option {\r\n display: flex;\r\n inline-size: 100%;\r\n justify-content: flex-start;\r\n align-items: center;\r\n padding: 0;\r\n border: 1px solid advanced-select.$border-color;\r\n border-radius: advanced-select.$border-radius;\r\n cursor: pointer;\r\n background-color: advanced-select.$bg-color;\r\n line-height: inherit;\r\n font-family: inherit;\r\n font-size: inherit;\r\n\r\n &.open {\r\n border-radius: advanced-select.$border-radius advanced-select.$border-radius 0 0;\r\n }\r\n\r\n dso-icon {\r\n color: advanced-select.$icon-color;\r\n }\r\n\r\n dso-label {\r\n margin-inline-start: advanced-select.$inline-padding * 0.5;\r\n }\r\n}\r\n\r\n.active-option-label {\r\n padding-block: advanced-select.$block-padding;\r\n padding-inline: advanced-select.$inline-padding;\r\n overflow: hidden;\r\n /* stylelint-disable-next-line declaration-property-value-disallowed-list -- Nodig om lange titels op de zelfde regel te houden */\r\n white-space: nowrap;\r\n /* stylelint-disable-next-line declaration-property-value-disallowed-list -- Nodig om lange titels op de zelfde regel te houden */\r\n text-overflow: ellipsis;\r\n}\r\n\r\n.active-option-aside {\r\n display: flex;\r\n align-items: center;\r\n gap: advanced-select.$inline-padding * 0.5;\r\n padding-block: 0;\r\n padding-inline: advanced-select.$inline-padding * 0.5;\r\n margin-inline-start: auto;\r\n}\r\n\r\n.badges {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n gap: advanced-select.$block-padding;\r\n}\r\n\r\n.groups-container {\r\n position: relative;\r\n}\r\n\r\n.groups {\r\n position: absolute;\r\n inset-block-start: -1px;\r\n inset-inline-start: 0;\r\n inline-size: 100%;\r\n max-block-size: 500px;\r\n margin: 0;\r\n padding: 0;\r\n overflow-y: auto;\r\n background-color: advanced-select.$bg-color;\r\n border: 1px solid advanced-select.$border-color;\r\n border-radius: 0 0 advanced-select.$border-radius advanced-select.$border-radius;\r\n\r\n li {\r\n &::marker {\r\n display: none;\r\n }\r\n }\r\n}\r\n\r\n.group {\r\n border-block-end: 1px solid advanced-select.$hr-color;\r\n\r\n &:last-child {\r\n border-block-end: none;\r\n }\r\n\r\n .option {\r\n padding-inline-start: advanced-select.$inline-padding * 2 + advanced-select.$option-dot-size * 0.5;\r\n }\r\n\r\n .option-label::before {\r\n content: \"\";\r\n position: absolute;\r\n display: block;\r\n block-size: advanced-select.$option-dot-size;\r\n inline-size: advanced-select.$option-dot-size;\r\n inset-block: advanced-select.$block-padding auto;\r\n inset-inline: -#{advanced-select.$option-dot-size * 2} auto;\r\n border-radius: 50%;\r\n @include set-colors.apply(advanced-select.$default-variant-color, $icons: false, $links: false);\r\n }\r\n}\r\n\r\n.group-label {\r\n margin: 0;\r\n padding-block: advanced-select.$block-padding;\r\n padding-inline: advanced-select.$inline-padding;\r\n color: advanced-select.$group-label-color;\r\n font-size: advanced-select.$group-label-font-size;\r\n font-weight: advanced-select.$group-label-font-weight;\r\n border-block-end: 1px solid advanced-select.$hr-color;\r\n}\r\n\r\n.group-link {\r\n display: block;\r\n padding-block: advanced-select.$group-link-block-padding;\r\n padding-inline: advanced-select.$group-link-inline-padding;\r\n text-align: end;\r\n color: advanced-select.$group-link-color;\r\n text-decoration: none;\r\n\r\n &:hover {\r\n text-decoration: underline;\r\n }\r\n\r\n dso-icon {\r\n color: advanced-select.$redirect-icon-color;\r\n }\r\n}\r\n\r\n.group-info .option-label::before {\r\n @include set-colors.apply(advanced-select.$info-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-primary .option-label::before {\r\n @include set-colors.apply(advanced-select.$primary-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-success .option-label::before {\r\n @include set-colors.apply(advanced-select.$success-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-warning .option-label::before {\r\n @include set-colors.apply(advanced-select.$warning-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-danger .option-label::before {\r\n @include set-colors.apply(advanced-select.$danger-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-error .option-label::before {\r\n @include set-colors.apply(advanced-select.$error-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-attention .option-label::before {\r\n @include set-colors.apply(advanced-select.$attention-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.options {\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\n.option {\r\n display: block;\r\n inline-size: 100%;\r\n padding-block: advanced-select.$block-padding * 2;\r\n padding-inline: advanced-select.$inline-padding;\r\n cursor: pointer;\r\n line-height: inherit;\r\n font-family: inherit;\r\n font-size: inherit;\r\n border: none;\r\n text-align: start;\r\n background-color: advanced-select.$bg-color;\r\n\r\n &:hover {\r\n background-color: advanced-select.$option-hover-bg-color;\r\n\r\n .option-label {\r\n color: advanced-select.$option-hover-color;\r\n font-weight: advanced-select.$option-hover-font-weight;\r\n }\r\n }\r\n}\r\n\r\n.option.option-active .option-label {\r\n color: advanced-select.$option-active-color;\r\n font-weight: advanced-select.$option-active-font-weight;\r\n text-decoration: underline;\r\n}\r\n\r\n.option-label {\r\n position: relative;\r\n color: advanced-select.$option-color;\r\n font-size: advanced-select.$option-font-size;\r\n font-weight: advanced-select.$option-font-weight;\r\n}\r\n\r\n.option-hint {\r\n padding-inline-start: 5px;\r\n color: advanced-select.$option-active-color;\r\n font-size: advanced-select.$option-font-size;\r\n font-weight: advanced-select.$option-active-font-weight;\r\n}\r\n\r\n.placeholder {\r\n margin: 0;\r\n padding-block: advanced-select.$block-padding * 2;\r\n padding-inline: advanced-select.$inline-padding;\r\n color: advanced-select.$option-placeholder-color;\r\n}\r\n","import {\r\n Component,\r\n ComponentInterface,\r\n Prop,\r\n h,\r\n FunctionalComponent,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n State,\r\n Fragment,\r\n Listen,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport {\r\n AdvancedSelectGroup,\r\n AdvancedSelectGroupRedirect,\r\n AdvancedSelectOption,\r\n AdvancedSelectChangeEvent,\r\n AdvancedSelectOptionOrGroup,\r\n AdvancedSelectRedirectEvent,\r\n} from \"./advanced-select.interfaces\";\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\nimport { tabbable } from \"tabbable\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\n@Component({\r\n tag: \"dso-advanced-select\",\r\n styleUrl: \"advanced-select.scss\",\r\n shadow: true,\r\n})\r\nexport class AdvancedSelect implements ComponentInterface {\r\n private trap?: FocusTrap;\r\n\r\n @Element()\r\n host!: HTMLDsoAdvancedSelectElement;\r\n\r\n /**\r\n * The options to display in the select.\r\n */\r\n @Prop()\r\n options: AdvancedSelectOptionOrGroup<never>[] = [];\r\n\r\n /**\r\n * The active option. By object reference.\r\n */\r\n @Prop()\r\n active?: AdvancedSelectOption<never>;\r\n\r\n /**\r\n * An extra text for the active option. Only visible in the list of options.\r\n */\r\n @Prop()\r\n activeHint?: string;\r\n\r\n /**\r\n * The open state of the options list.\r\n */\r\n @State()\r\n open: boolean = false;\r\n\r\n /**\r\n * Emitted when user selects an option\r\n */\r\n @Event({ bubbles: false })\r\n dsoChange!: EventEmitter<AdvancedSelectChangeEvent<never>>;\r\n\r\n /**\r\n * Emitted when user activates a group redirect link.\r\n */\r\n @Event({ bubbles: false })\r\n dsoRedirect!: EventEmitter<AdvancedSelectRedirectEvent>;\r\n\r\n private toggleButtonElementRef: HTMLButtonElement | undefined;\r\n\r\n @Listen(\"keydown\", { target: \"window\" })\r\n keyDownListener(event: KeyboardEvent) {\r\n if (this.open && event.key === \"ArrowUp\") {\r\n event.preventDefault();\r\n this.handleTab(-1);\r\n } else if (this.open && event.key === \"ArrowDown\") {\r\n event.preventDefault();\r\n this.handleTab(1);\r\n }\r\n }\r\n\r\n componentDidRender() {\r\n if (this.open && !this.trap) {\r\n this.createTrap();\r\n } else if (!this.open && this.trap) {\r\n this.removeTrap();\r\n }\r\n }\r\n\r\n private toggleOpen = () => {\r\n this.open = !this.open;\r\n };\r\n\r\n private createTrap() {\r\n this.trap = createFocusTrap(this.host, {\r\n clickOutsideDeactivates: true,\r\n escapeDeactivates: true,\r\n setReturnFocus: this.toggleButtonElementRef,\r\n tabbableOptions: {\r\n getShadowRoot: true,\r\n },\r\n onDeactivate: () => {\r\n this.open = false;\r\n },\r\n }).activate();\r\n }\r\n\r\n private removeTrap() {\r\n this.trap?.deactivate();\r\n delete this.trap;\r\n }\r\n\r\n private handleTab(direction: number) {\r\n const elements = 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"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as t,h as s,H as e,a as i}from"./p-d638c2b0.js";import{t as o}from"./p-1dbcaeef.js";import{h as n,c as r}from"./p-202d2cdf.js";import{g as a}from"./p-c8f6f8d9.js";import{v as h}from"./p-f5ff676c.js";const f=":host(:focus){outline:none}:host{display:inline-block}";const d=f;const c=class{constructor(s){t(this,s);this.focusOutListener=t=>{if(this.open&&(!(t.relatedTarget instanceof HTMLElement)||!this.tabbables(true).includes(t.relatedTarget))){this.open=false}};this.escape=()=>{this.button.focus();this.open=false};this.open=false;this.dropdownAlign="left";this.dropdownOptionsOffset=2;this.checkable=false;this.boundary=undefined;this.placement=undefined;this.strategy="auto"}watchPosition(){if(!this.popper){return}this.popper.setOptions({placement:this.placement||(this.dropdownAlign==="right"?"bottom-end":"bottom-start")})}watchOptionsOffset(){var t;(t=this.popper)===null||t===void 0?void 0:t.setOptions({modifiers:[{name:"offset",options:{offset:[0,this.dropdownOptionsOffset]}}]})}watchStrategy(){this.setStrategy()}setStrategy(){if(!this.popper){return}if(this.strategy==="absolute"||this.strategy==="fixed"){this.popper.setOptions({strategy:this.strategy});return}let t=this.host;const s=this.boundary||document;while(t&&t.parentNode!==s){t=t.parentNode instanceof ShadowRoot?t.parentNode.host:t.parentElement;if(t!==null&&n(t)){this.popper.setOptions({strategy:"fixed"});return}}this.popper.setOptions({strategy:"absolute"})}get button(){const t=this.host.querySelector('button[slot="toggle"]');if(!(t instanceof HTMLButtonElement)){throw new ReferenceError("Mandatory toggle button not found")}return t}tabbables(t){const s=this.host.isConnected?o(this.host):[];return t?s:s.filter((t=>t!==this.button))}componentDidLoad(){this.button.setAttribute("aria-haspopup","menu");this.button.setAttribute("aria-expanded","false");if(!this.button.id){this.button.id=h()}const t=this.host.querySelector(".dso-dropdown-options");if(!t){throw new ReferenceError("Dropdown options not found")}t.setAttribute("role","menu");t.setAttribute("aria-labelledby",this.button.id);for(const t of Array.from(this.host.getElementsByTagName("ul"))){t.setAttribute("role","group");for(const s of Array.from(t.getElementsByTagName("li"))){s.setAttribute("role","none")}}if(this.popper){return}const s=this.host.querySelector(".dso-dropdown-options");if(!(s instanceof HTMLElement)){throw new Error("dropdown options element is not instanceof HTMLElement")}this.popper=r(this.button,s,{placement:this.placement||(this.dropdownAlign==="right"?"bottom-end":"bottom-start"),modifiers:[{name:"offset",options:{offset:[0,this.dropdownOptionsOffset]}},{name:"preventOverflow",options:{boundary:this.boundary?document.querySelector(this.boundary):null},enabled:this.boundary!==undefined}]})}componentDidRender(){var t;this.setStrategy();if(this.open){(t=this.popper)===null||t===void 0?void 0:t.update()}for(const t of Array.from(this.host.getElementsByTagName("li"))){for(const s of this.host.isConnected?o(t):[]){s.setAttribute("role",this.checkable?"menuitemradio":"menuitem");if(this.checkable){s.setAttribute("aria-checked",t.classList.contains("dso-checked").toString())}}}this.button.setAttribute("aria-expanded",this.open?"true":"false")}onClick(t){const s=t.composedPath();if(this.isToggleButtonEvent(s)){this.open=!this.open}else if(this.open&&this.isMenuItemEvent(s)){this.open=false}}isToggleButtonEvent(t){return t.includes(this.button)}isMenuItemEvent(t){return t.includes(this.host)&&!this.isToggleButtonEvent(t)}disconnectedCallback(){var t;(t=this.popper)===null||t===void 0?void 0:t.destroy()}keyDownListener(t){if(t.defaultPrevented||!this.open){return}switch(t.key){case"Tab":if(t.shiftKey){this.tabInPopup(this.tabbables(true),-1)}else{this.tabInPopup(this.tabbables(true),1)}break;case"ArrowDown":this.tabInPopup(this.tabbables(false),1);break;case"ArrowUp":this.tabInPopup(this.tabbables(false),-1);break;case"Escape":this.escape();break;case" ":if(t.target instanceof HTMLElement){t.target.click()}break;default:return}t.preventDefault()}tabInPopup(t,s){var e;const i=t.findIndex((t=>t===a()));let o=i+s;if(o>=t.length){o=0}else if(o<0){o=t.length-1}(e=t[o])===null||e===void 0?void 0:e.focus()}render(){return s(e,{key:"976b334e90ff2b8d23d25cebbe02008ab924b046",onFocusout:this.focusOutListener},s("slot",{key:"84811cd273de19adbeb9d4157506dc3df7c96ec4",name:"toggle"}),s("div",{key:"a76e4162196a14f92c02f5bfab37e32f990fd45b",hidden:!this.open},s("slot",{key:"c3762cda1ccf72e176d496e44d7fcc6f9b32756c"})))}get host(){return i(this)}static get watchers(){return{placement:["watchPosition"],dropdownAlign:["watchPosition"],dropdownOptionsOffset:["watchOptionsOffset"],strategy:["watchStrategy"]}}};c.style=d;export{c as dso_dropdown_menu};
|
|
2
|
+
//# sourceMappingURL=p-d2e528b1.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["dropdownMenuCss","DsoDropdownMenuStyle0","DropdownMenu","this","focusOutListener","event","open","relatedTarget","HTMLElement","tabbables","includes","escape","button","focus","watchPosition","popper","setOptions","placement","dropdownAlign","watchOptionsOffset","_a","modifiers","name","options","offset","dropdownOptionsOffset","watchStrategy","setStrategy","strategy","element","host","boundary","document","parentNode","ShadowRoot","parentElement","hasOverflow","querySelector","HTMLButtonElement","ReferenceError","withButton","isConnected","tabbable","filter","componentDidLoad","setAttribute","id","uuidv4","ul","Array","from","getElementsByTagName","li","dropdownOptionsElement","Error","createPopper","enabled","undefined","componentDidRender","update","tab","checkable","classList","contains","toString","onClick","composedPath","isToggleButtonEvent","isMenuItemEvent","disconnectedCallback","destroy","keyDownListener","defaultPrevented","key","shiftKey","tabInPopup","target","click","preventDefault","direction","currentIndex","findIndex","e","getActiveElement","nextIndex","length","render","h","Host","onFocusout","hidden"],"sources":["src/components/dropdown-menu/dropdown-menu.scss?tag=dso-dropdown-menu&encapsulation=shadow","src/components/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/components/dropdown-menu\";\r\n\r\n:host(:focus) {\r\n outline: none;\r\n}\r\n\r\n:host {\r\n @include dropdown-menu.root();\r\n}\r\n","import { createPopper, Placement, Instance as PopperInstance } from \"@popperjs/core\";\r\nimport { h, Component, Element, Host, Prop, Watch, Listen } from \"@stencil/core\";\r\nimport { FocusableElement, tabbable } from \"tabbable\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { hasOverflow } from \"../../utils/has-overflow\";\r\nimport { getActiveElement } from \"../../utils/get-active-element\";\r\n\r\n@Component({\r\n tag: \"dso-dropdown-menu\",\r\n styleUrl: \"dropdown-menu.scss\",\r\n shadow: true,\r\n})\r\nexport class DropdownMenu {\r\n /**\r\n * Whether the menu is open or closed.\r\n * This attribute is reflected and mutable.\r\n */\r\n @Prop({ reflect: true, mutable: true })\r\n open = false;\r\n\r\n /**\r\n * Alignment of the dropdown\r\n */\r\n @Prop()\r\n dropdownAlign: \"left\" | \"right\" = \"left\";\r\n\r\n /**\r\n * Space between button and dropdown options\r\n */\r\n @Prop()\r\n dropdownOptionsOffset = 2;\r\n\r\n /**\r\n * Whether the menu is checkable.\r\n */\r\n @Prop()\r\n checkable = false;\r\n\r\n /**\r\n * Selector for the element the dropdown options should not be overflowing.\r\n */\r\n @Prop()\r\n boundary?: string;\r\n\r\n /**\r\n * Force placement of dropdown.\r\n *\r\n * This property overrides `dropdownAlign`.\r\n */\r\n @Prop()\r\n placement?: Placement;\r\n\r\n /**\r\n * Set position strategy of dropdown options\r\n */\r\n @Prop()\r\n strategy: \"auto\" | \"absolute\" | \"fixed\" = \"auto\";\r\n\r\n @Watch(\"placement\")\r\n @Watch(\"dropdownAlign\")\r\n watchPosition() {\r\n if (!this.popper) {\r\n return;\r\n }\r\n\r\n this.popper.setOptions({\r\n placement: this.placement || (this.dropdownAlign === \"right\" ? \"bottom-end\" : \"bottom-start\"),\r\n });\r\n }\r\n\r\n @Watch(\"dropdownOptionsOffset\")\r\n watchOptionsOffset() {\r\n this.popper?.setOptions({\r\n modifiers: [\r\n {\r\n name: \"offset\",\r\n options: {\r\n offset: [0, this.dropdownOptionsOffset],\r\n },\r\n },\r\n ],\r\n });\r\n }\r\n\r\n @Watch(\"strategy\")\r\n watchStrategy() {\r\n this.setStrategy();\r\n }\r\n\r\n private setStrategy() {\r\n if (!this.popper) {\r\n return;\r\n }\r\n\r\n if (this.strategy === \"absolute\" || this.strategy === \"fixed\") {\r\n this.popper.setOptions({\r\n strategy: this.strategy,\r\n });\r\n\r\n return;\r\n }\r\n\r\n let element: Element | null = this.host;\r\n\r\n const boundary = this.boundary || document;\r\n\r\n while (element && element.parentNode !== boundary) {\r\n element = element.parentNode instanceof ShadowRoot ? element.parentNode.host : element.parentElement;\r\n if (element !== null && hasOverflow(element)) {\r\n this.popper.setOptions({\r\n strategy: \"fixed\",\r\n });\r\n\r\n return;\r\n }\r\n }\r\n\r\n this.popper.setOptions({\r\n strategy: \"absolute\",\r\n });\r\n }\r\n\r\n @Element()\r\n host!: HTMLDsoDropdownMenuElement;\r\n\r\n private popper: PopperInstance | undefined;\r\n\r\n get button(): HTMLButtonElement {\r\n const button = this.host.querySelector('button[slot=\"toggle\"]');\r\n\r\n if (!(button instanceof HTMLButtonElement)) {\r\n throw new ReferenceError(\"Mandatory toggle button not found\");\r\n }\r\n\r\n return button;\r\n }\r\n\r\n private tabbables(withButton: boolean): FocusableElement[] {\r\n const tabbables = this.host.isConnected ? tabbable(this.host) : [];\r\n\r\n return withButton ? tabbables : tabbables.filter((element) => element !== this.button);\r\n }\r\n\r\n componentDidLoad() {\r\n this.button.setAttribute(\"aria-haspopup\", \"menu\");\r\n this.button.setAttribute(\"aria-expanded\", \"false\");\r\n if (!this.button.id) {\r\n this.button.id = uuidv4();\r\n }\r\n\r\n const options = this.host.querySelector(\".dso-dropdown-options\");\r\n if (!options) {\r\n throw new ReferenceError(\"Dropdown options not found\");\r\n }\r\n\r\n options.setAttribute(\"role\", \"menu\");\r\n options.setAttribute(\"aria-labelledby\", this.button.id);\r\n\r\n for (const ul of Array.from(this.host.getElementsByTagName(\"ul\"))) {\r\n ul.setAttribute(\"role\", \"group\");\r\n for (const li of Array.from(ul.getElementsByTagName(\"li\"))) {\r\n li.setAttribute(\"role\", \"none\");\r\n }\r\n }\r\n\r\n if (this.popper) {\r\n return;\r\n }\r\n\r\n const dropdownOptionsElement = this.host.querySelector(\".dso-dropdown-options\");\r\n\r\n if (!(dropdownOptionsElement instanceof HTMLElement)) {\r\n throw new Error(\"dropdown options element is not instanceof HTMLElement\");\r\n }\r\n\r\n this.popper = createPopper(this.button, dropdownOptionsElement, {\r\n placement: this.placement || (this.dropdownAlign === \"right\" ? \"bottom-end\" : \"bottom-start\"),\r\n modifiers: [\r\n {\r\n name: \"offset\",\r\n options: {\r\n offset: [0, this.dropdownOptionsOffset],\r\n },\r\n },\r\n {\r\n name: \"preventOverflow\",\r\n options: {\r\n boundary: this.boundary ? document.querySelector(this.boundary) : null,\r\n },\r\n enabled: this.boundary !== undefined,\r\n },\r\n ],\r\n });\r\n }\r\n\r\n componentDidRender() {\r\n this.setStrategy();\r\n if (this.open) {\r\n this.popper?.update();\r\n }\r\n\r\n for (const li of Array.from(this.host.getElementsByTagName(\"li\"))) {\r\n for (const tab of this.host.isConnected ? tabbable(li) : []) {\r\n tab.setAttribute(\"role\", this.checkable ? \"menuitemradio\" : \"menuitem\");\r\n\r\n if (this.checkable) {\r\n tab.setAttribute(\"aria-checked\", li.classList.contains(\"dso-checked\").toString());\r\n }\r\n }\r\n }\r\n\r\n this.button.setAttribute(\"aria-expanded\", this.open ? \"true\" : \"false\");\r\n }\r\n\r\n @Listen(\"click\", { target: \"window\" })\r\n onClick(event: MouseEvent) {\r\n const composedPath = event.composedPath();\r\n\r\n if (this.isToggleButtonEvent(composedPath)) {\r\n this.open = !this.open;\r\n } else if (this.open && this.isMenuItemEvent(composedPath)) {\r\n this.open = false;\r\n }\r\n }\r\n\r\n private isToggleButtonEvent(composedPath: EventTarget[]) {\r\n return composedPath.includes(this.button);\r\n }\r\n\r\n private isMenuItemEvent(composedPath: EventTarget[]) {\r\n return composedPath.includes(this.host) && !this.isToggleButtonEvent(composedPath);\r\n }\r\n\r\n disconnectedCallback() {\r\n this.popper?.destroy();\r\n }\r\n\r\n private focusOutListener = (event: FocusEvent) => {\r\n if (\r\n this.open &&\r\n (!(event.relatedTarget instanceof HTMLElement) || !this.tabbables(true).includes(event.relatedTarget))\r\n ) {\r\n this.open = false;\r\n }\r\n };\r\n\r\n @Listen(\"keydown\", { target: \"window\" })\r\n keyDownListener(event: KeyboardEvent) {\r\n if (event.defaultPrevented || !this.open) {\r\n return;\r\n }\r\n\r\n switch (event.key) {\r\n case \"Tab\":\r\n if (event.shiftKey) {\r\n this.tabInPopup(this.tabbables(true), -1);\r\n } else {\r\n this.tabInPopup(this.tabbables(true), 1);\r\n }\r\n\r\n break;\r\n case \"ArrowDown\":\r\n this.tabInPopup(this.tabbables(false), 1);\r\n break;\r\n\r\n case \"ArrowUp\":\r\n this.tabInPopup(this.tabbables(false), -1);\r\n break;\r\n\r\n case \"Escape\":\r\n this.escape();\r\n break;\r\n\r\n case \" \":\r\n if (event.target instanceof HTMLElement) {\r\n event.target.click();\r\n }\r\n\r\n break;\r\n\r\n default:\r\n return;\r\n }\r\n\r\n event.preventDefault();\r\n }\r\n\r\n private tabInPopup(tabbables: FocusableElement[], direction: number) {\r\n const currentIndex = tabbables.findIndex((e) => e === getActiveElement());\r\n\r\n let nextIndex = currentIndex + direction;\r\n if (nextIndex >= tabbables.length) {\r\n nextIndex = 0;\r\n } else if (nextIndex < 0) {\r\n nextIndex = tabbables.length - 1;\r\n }\r\n\r\n tabbables[nextIndex]?.focus();\r\n }\r\n\r\n private escape = () => {\r\n this.button.focus();\r\n this.open = false;\r\n };\r\n\r\n render() {\r\n return (\r\n <Host onFocusout={this.focusOutListener}>\r\n <slot name=\"toggle\" />\r\n <div hidden={!this.open}>\r\n <slot />\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -66,7 +66,7 @@ const AdvancedSelect = class {
|
|
|
66
66
|
}
|
|
67
67
|
handleTab(direction) {
|
|
68
68
|
var _a;
|
|
69
|
-
const elements = tabbable(this.host, { getShadowRoot: true });
|
|
69
|
+
const elements = this.host.isConnected ? tabbable(this.host, { getShadowRoot: true }) : [];
|
|
70
70
|
const currentIndex = elements.findIndex((e) => { var _a; return e === ((_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement); });
|
|
71
71
|
let nextIndex = currentIndex + direction;
|
|
72
72
|
if (nextIndex >= elements.length) {
|
|
@@ -79,12 +79,12 @@ const AdvancedSelect = class {
|
|
|
79
79
|
}
|
|
80
80
|
render() {
|
|
81
81
|
var _a, _b;
|
|
82
|
-
return (h(Fragment, null, h("button", { key: '
|
|
82
|
+
return (h(Fragment, null, h("button", { key: '863c76d960af3d1c91e2920f9e7640acf1fcb8de', "aria-expanded": this.open.toString(), class: clsx(["active-option", { open: this.open }]), type: "button", onClick: this.toggleOpen, ref: (element) => (this.toggleButtonElementRef = element) }, h(ActiveGroupLabel, { key: '0165cc3fc03367aedda4e9a6e49ed76818bc9d7c', active: this.active, options: this.options }), h("span", { key: '624790ab9fefdfff15247e6e0964afa22580b8da', class: "active-option-label" }, (_b = (_a = this.active) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : "Selecteer een optie"), h("span", { key: '1ecb6f4ed7ebea267fa0cf99b649c7ff4ae480d8', class: "active-option-aside" }, this.options.some((optionOrGroup) => "summaryCounter" in optionOrGroup && (optionOrGroup === null || optionOrGroup === void 0 ? void 0 : optionOrGroup.summaryCounter)) && (h("span", { key: 'dbc4278fd89412fb098d9e7c360a2f4ac58cafd6', class: "badges" }, this.options
|
|
83
83
|
.filter((option) => "options" in option && "summaryCounter" in option && !!(option === null || option === void 0 ? void 0 : option.summaryCounter))
|
|
84
84
|
.map((group) => {
|
|
85
85
|
var _a;
|
|
86
86
|
return (h("dso-badge", { status: (_a = group.variant) !== null && _a !== void 0 ? _a : "outline" }, group.options.length));
|
|
87
|
-
}))), h("dso-icon", { key: '
|
|
87
|
+
}))), h("dso-icon", { key: '892afcf018935d842562288b5219902044bf0b3f', icon: "caret-down" }))), this.open && (h("div", { key: '81651c248319f8fa5281d30cb90ff228d2b6c8cd', class: "groups-container" }, h("ul", { key: '9776c7284681eee6ad5128c4558872db7eda894a', class: "groups" }, this.options.map((optionOrGroup) => ("options" in optionOrGroup && (h("li", { class: clsx(["group", { [`group-${optionOrGroup.variant}`]: !!optionOrGroup.variant }]) }, h("p", { class: "group-label" }, optionOrGroup.label), h("ul", { class: "options" }, optionOrGroup.options.map((option) => (h("li", null, h(OptionButton, { option: option, active: this.active, activeHint: this.activeHint, callback: this.handleOptionClick }))))), optionOrGroup.redirect && (h(RedirectAnchor, { redirect: optionOrGroup.redirect, callback: this.handleRedirectClick }))))) ||
|
|
88
88
|
("placeholder" in optionOrGroup && (h("li", { class: "group" }, h("p", { class: "group-label" }, optionOrGroup.label), h("p", { class: "placeholder" }, optionOrGroup.placeholder), optionOrGroup.redirect && (h(RedirectAnchor, { redirect: optionOrGroup.redirect, callback: this.handleRedirectClick }))))) || (h("li", null, h(OptionButton, { option: optionOrGroup, active: this.active, activeHint: this.activeHint, callback: this.handleOptionClick })))))))));
|
|
89
89
|
}
|
|
90
90
|
get host() { return getElement(this); }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"dso-advanced-select.entry.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,69FAA69F,CAAC;AACx/F,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,EAAE,eAAe,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,GAAG,eAAe,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,GAAG,QAAQ,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,QACE,kBACE,gFACiB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,EACnC,KAAK,EAAE,IAAI,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,IAEzD,EAAC,gBAAgB,qDAAC,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,GAAI,EAChE,6DAAM,KAAK,EAAC,qBAAqB,IAAE,MAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,KAAK,mCAAI,qBAAqB,CAAQ,EACtF,6DAAM,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,KACC,6DAAM,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,QACd,iBAAW,MAAM,EAAE,MAAA,KAAK,CAAC,OAAO,mCAAI,SAAS,IAAG,KAAK,CAAC,OAAO,CAAC,MAAM,CAAa,EAClF;SAAA,CAAC,CACC,CACR,EACD,iEAAU,IAAI,EAAC,YAAY,GAAY,CAClC,CACA,EACR,IAAI,CAAC,IAAI,KACR,4DAAK,KAAK,EAAC,kBAAkB,IAC3B,2DAAI,KAAK,EAAC,QAAQ,IACf,IAAI,CAAC,OAAO,CAAC,GAAG,CACf,CAAC,aAAa,KACZ,CAAC,SAAS,IAAI,aAAa,KACzB,UAAI,KAAK,EAAE,IAAI,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,SAAS,aAAa,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC,CAAC,IACzF,SAAG,KAAK,EAAC,aAAa,IAAE,aAAa,CAAC,KAAK,CAAK,EAChD,UAAI,KAAK,EAAC,SAAS,IAChB,aAAa,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MAChC,cACE,EAAC,YAAY,IACX,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,KACrB,EAAC,cAAc,IACb,QAAQ,EAAE,aAAa,CAAC,QAAQ,EAChC,QAAQ,EAAE,IAAI,CAAC,mBAAmB,GAClB,CACnB,CACE,CACN;aACA,aAAa,IAAI,aAAa,KAC7B,UAAI,KAAK,EAAC,OAAO,IACf,SAAG,KAAK,EAAC,aAAa,IAAE,aAAa,CAAC,KAAK,CAAK,EAChD,SAAG,KAAK,EAAC,aAAa,IAAE,aAAa,CAAC,WAAW,CAAK,EACrD,aAAa,CAAC,QAAQ,KACrB,EAAC,cAAc,IACb,QAAQ,EAAE,aAAa,CAAC,QAAQ,EAChC,QAAQ,EAAE,IAAI,CAAC,mBAAmB,GAClB,CACnB,CACE,CACN,CAAC,KACA,cACE,EAAC,YAAY,IACX,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;;;AAUH,MAAM,YAAY,GAA2C,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,MACpG,cACE,KAAK,EAAE,IAAI,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,IAEnC,YAAM,KAAK,EAAC,cAAc,IAAE,MAAM,CAAC,KAAK,CAAQ,EAC/C,CAAC,CAAC,UAAU,IAAI,MAAM,KAAK,MAAM,IAAI,YAAM,KAAK,EAAC,aAAa,SAAG,UAAU,MAAS,CAC9E,CACV,CAAC;AAOF,MAAM,cAAc,GAA6C,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,MACtF,SAAG,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,EACf,gBAAU,IAAI,EAAC,eAAe,GAAY,CACxC,CACL,CAAC;AAOF,MAAM,gBAAgB,GAA+C,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE;IACvF,MAAM,KAAK,GAAG,OAAO,CAAC,IAAI,CACxB,CAAC,aAAa,KACZ,SAAS,IAAI,aAAa;QAC1B,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,KAAK,MAAM,KAAK,MAAM,CAAC;QAC3D,CAAC,CAAC,aAAa,CAAC,WAAW,CAC9B,CAAC;IAEF,OAAO,KAAK,IACV,iBAAW,OAAO,QAAC,MAAM,EAAE,KAAK,CAAC,OAAO,IACrC,KAAK,CAAC,WAAW,CACR,IACV,SAAS,CAAC;AAChB,CAAC,CAAC;;;;;","names":[],"sources":["src/components/advanced-select/advanced-select.scss?tag=dso-advanced-select&encapsulation=shadow","src/components/advanced-select/advanced-select.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\r\n@use \"~dso-toolkit/src/components/advanced-select\";\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.active-option {\r\n display: flex;\r\n inline-size: 100%;\r\n justify-content: flex-start;\r\n align-items: center;\r\n padding: 0;\r\n border: 1px solid advanced-select.$border-color;\r\n border-radius: advanced-select.$border-radius;\r\n cursor: pointer;\r\n background-color: advanced-select.$bg-color;\r\n line-height: inherit;\r\n font-family: inherit;\r\n font-size: inherit;\r\n\r\n &.open {\r\n border-radius: advanced-select.$border-radius advanced-select.$border-radius 0 0;\r\n }\r\n\r\n dso-icon {\r\n color: advanced-select.$icon-color;\r\n }\r\n\r\n dso-label {\r\n margin-inline-start: advanced-select.$inline-padding * 0.5;\r\n }\r\n}\r\n\r\n.active-option-label {\r\n padding-block: advanced-select.$block-padding;\r\n padding-inline: advanced-select.$inline-padding;\r\n overflow: hidden;\r\n /* stylelint-disable-next-line declaration-property-value-disallowed-list -- Nodig om lange titels op de zelfde regel te houden */\r\n white-space: nowrap;\r\n /* stylelint-disable-next-line declaration-property-value-disallowed-list -- Nodig om lange titels op de zelfde regel te houden */\r\n text-overflow: ellipsis;\r\n}\r\n\r\n.active-option-aside {\r\n display: flex;\r\n align-items: center;\r\n gap: advanced-select.$inline-padding * 0.5;\r\n padding-block: 0;\r\n padding-inline: advanced-select.$inline-padding * 0.5;\r\n margin-inline-start: auto;\r\n}\r\n\r\n.badges {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n gap: advanced-select.$block-padding;\r\n}\r\n\r\n.groups-container {\r\n position: relative;\r\n}\r\n\r\n.groups {\r\n position: absolute;\r\n inset-block-start: -1px;\r\n inset-inline-start: 0;\r\n inline-size: 100%;\r\n max-block-size: 500px;\r\n margin: 0;\r\n padding: 0;\r\n overflow-y: auto;\r\n background-color: advanced-select.$bg-color;\r\n border: 1px solid advanced-select.$border-color;\r\n border-radius: 0 0 advanced-select.$border-radius advanced-select.$border-radius;\r\n\r\n li {\r\n &::marker {\r\n display: none;\r\n }\r\n }\r\n}\r\n\r\n.group {\r\n border-block-end: 1px solid advanced-select.$hr-color;\r\n\r\n &:last-child {\r\n border-block-end: none;\r\n }\r\n\r\n .option {\r\n padding-inline-start: advanced-select.$inline-padding * 2 + advanced-select.$option-dot-size * 0.5;\r\n }\r\n\r\n .option-label::before {\r\n content: \"\";\r\n position: absolute;\r\n display: block;\r\n block-size: advanced-select.$option-dot-size;\r\n inline-size: advanced-select.$option-dot-size;\r\n inset-block: advanced-select.$block-padding auto;\r\n inset-inline: -#{advanced-select.$option-dot-size * 2} auto;\r\n border-radius: 50%;\r\n @include set-colors.apply(advanced-select.$default-variant-color, $icons: false, $links: false);\r\n }\r\n}\r\n\r\n.group-label {\r\n margin: 0;\r\n padding-block: advanced-select.$block-padding;\r\n padding-inline: advanced-select.$inline-padding;\r\n color: advanced-select.$group-label-color;\r\n font-size: advanced-select.$group-label-font-size;\r\n font-weight: advanced-select.$group-label-font-weight;\r\n border-block-end: 1px solid advanced-select.$hr-color;\r\n}\r\n\r\n.group-link {\r\n display: block;\r\n padding-block: advanced-select.$group-link-block-padding;\r\n padding-inline: advanced-select.$group-link-inline-padding;\r\n text-align: end;\r\n color: advanced-select.$group-link-color;\r\n text-decoration: none;\r\n\r\n &:hover {\r\n text-decoration: underline;\r\n }\r\n\r\n dso-icon {\r\n color: advanced-select.$redirect-icon-color;\r\n }\r\n}\r\n\r\n.group-info .option-label::before {\r\n @include set-colors.apply(advanced-select.$info-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-primary .option-label::before {\r\n @include set-colors.apply(advanced-select.$primary-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-success .option-label::before {\r\n @include set-colors.apply(advanced-select.$success-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-warning .option-label::before {\r\n @include set-colors.apply(advanced-select.$warning-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-danger .option-label::before {\r\n @include set-colors.apply(advanced-select.$danger-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-error .option-label::before {\r\n @include set-colors.apply(advanced-select.$error-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-attention .option-label::before {\r\n @include set-colors.apply(advanced-select.$attention-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.options {\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\n.option {\r\n display: block;\r\n inline-size: 100%;\r\n padding-block: advanced-select.$block-padding * 2;\r\n padding-inline: advanced-select.$inline-padding;\r\n cursor: pointer;\r\n line-height: inherit;\r\n font-family: inherit;\r\n font-size: inherit;\r\n border: none;\r\n text-align: start;\r\n background-color: advanced-select.$bg-color;\r\n\r\n &:hover {\r\n background-color: advanced-select.$option-hover-bg-color;\r\n\r\n .option-label {\r\n color: advanced-select.$option-hover-color;\r\n font-weight: advanced-select.$option-hover-font-weight;\r\n }\r\n }\r\n}\r\n\r\n.option.option-active .option-label {\r\n color: advanced-select.$option-active-color;\r\n font-weight: advanced-select.$option-active-font-weight;\r\n text-decoration: underline;\r\n}\r\n\r\n.option-label {\r\n position: relative;\r\n color: advanced-select.$option-color;\r\n font-size: advanced-select.$option-font-size;\r\n font-weight: advanced-select.$option-font-weight;\r\n}\r\n\r\n.option-hint {\r\n padding-inline-start: 5px;\r\n color: advanced-select.$option-active-color;\r\n font-size: advanced-select.$option-font-size;\r\n font-weight: advanced-select.$option-active-font-weight;\r\n}\r\n\r\n.placeholder {\r\n margin: 0;\r\n padding-block: advanced-select.$block-padding * 2;\r\n padding-inline: advanced-select.$inline-padding;\r\n color: advanced-select.$option-placeholder-color;\r\n}\r\n","import {\r\n Component,\r\n ComponentInterface,\r\n Prop,\r\n h,\r\n FunctionalComponent,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n State,\r\n Fragment,\r\n Listen,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport {\r\n AdvancedSelectGroup,\r\n AdvancedSelectGroupRedirect,\r\n AdvancedSelectOption,\r\n AdvancedSelectChangeEvent,\r\n AdvancedSelectOptionOrGroup,\r\n AdvancedSelectRedirectEvent,\r\n} from \"./advanced-select.interfaces\";\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\nimport { tabbable } from \"tabbable\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\n@Component({\r\n tag: \"dso-advanced-select\",\r\n styleUrl: \"advanced-select.scss\",\r\n shadow: true,\r\n})\r\nexport class AdvancedSelect implements ComponentInterface {\r\n private trap?: FocusTrap;\r\n\r\n @Element()\r\n host!: HTMLDsoAdvancedSelectElement;\r\n\r\n /**\r\n * The options to display in the select.\r\n */\r\n @Prop()\r\n options: AdvancedSelectOptionOrGroup<never>[] = [];\r\n\r\n /**\r\n * The active option. By object reference.\r\n */\r\n @Prop()\r\n active?: AdvancedSelectOption<never>;\r\n\r\n /**\r\n * An extra text for the active option. Only visible in the list of options.\r\n */\r\n @Prop()\r\n activeHint?: string;\r\n\r\n /**\r\n * The open state of the options list.\r\n */\r\n @State()\r\n open: boolean = false;\r\n\r\n /**\r\n * Emitted when user selects an option\r\n */\r\n @Event({ bubbles: false })\r\n dsoChange!: EventEmitter<AdvancedSelectChangeEvent<never>>;\r\n\r\n /**\r\n * Emitted when user activates a group redirect link.\r\n */\r\n @Event({ bubbles: false })\r\n dsoRedirect!: EventEmitter<AdvancedSelectRedirectEvent>;\r\n\r\n private toggleButtonElementRef: HTMLButtonElement | undefined;\r\n\r\n @Listen(\"keydown\", { target: \"window\" })\r\n keyDownListener(event: KeyboardEvent) {\r\n if (this.open && event.key === \"ArrowUp\") {\r\n event.preventDefault();\r\n this.handleTab(-1);\r\n } else if (this.open && event.key === \"ArrowDown\") {\r\n event.preventDefault();\r\n this.handleTab(1);\r\n }\r\n }\r\n\r\n componentDidRender() {\r\n if (this.open && !this.trap) {\r\n this.createTrap();\r\n } else if (!this.open && this.trap) {\r\n this.removeTrap();\r\n }\r\n }\r\n\r\n private toggleOpen = () => {\r\n this.open = !this.open;\r\n };\r\n\r\n private createTrap() {\r\n this.trap = createFocusTrap(this.host, {\r\n clickOutsideDeactivates: true,\r\n escapeDeactivates: true,\r\n setReturnFocus: this.toggleButtonElementRef,\r\n tabbableOptions: {\r\n getShadowRoot: true,\r\n },\r\n onDeactivate: () => {\r\n this.open = false;\r\n },\r\n }).activate();\r\n }\r\n\r\n private removeTrap() {\r\n this.trap?.deactivate();\r\n delete this.trap;\r\n }\r\n\r\n private handleTab(direction: number) {\r\n const elements = tabbable(this.host, { getShadowRoot: true });\r\n const currentIndex = elements.findIndex((e) => e === this.host.shadowRoot?.activeElement);\r\n\r\n let nextIndex = currentIndex + direction;\r\n if (nextIndex >= elements.length) {\r\n nextIndex = 0;\r\n } else if (nextIndex < 0) {\r\n nextIndex = elements.length - 1;\r\n }\r\n\r\n elements[nextIndex]?.focus();\r\n }\r\n\r\n private handleOptionClick = (event: MouseEvent, option: AdvancedSelectOption<never>) => {\r\n this.dsoChange.emit({ originalEvent: event, option });\r\n this.open = false;\r\n };\r\n\r\n private handleRedirectClick = (event: MouseEvent, redirect: AdvancedSelectGroupRedirect) => {\r\n this.dsoRedirect.emit({ originalEvent: event, isModifiedEvent: isModifiedEvent(event), redirect });\r\n this.open = false;\r\n };\r\n\r\n render() {\r\n return (\r\n <>\r\n <button\r\n aria-expanded={this.open.toString()}\r\n class={clsx([\"active-option\", { open: this.open }])}\r\n type=\"button\"\r\n onClick={this.toggleOpen}\r\n ref={(element) => (this.toggleButtonElementRef = element)}\r\n >\r\n <ActiveGroupLabel active={this.active} options={this.options} />\r\n <span class=\"active-option-label\">{this.active?.label ?? \"Selecteer een optie\"}</span>\r\n <span class=\"active-option-aside\">\r\n {this.options.some(\r\n (optionOrGroup) => \"summaryCounter\" in optionOrGroup && optionOrGroup?.summaryCounter,\r\n ) && (\r\n <span class=\"badges\">\r\n {this.options\r\n .filter(\r\n (option): option is AdvancedSelectGroup<never> =>\r\n \"options\" in option && \"summaryCounter\" in option && !!option?.summaryCounter,\r\n )\r\n .map((group) => (\r\n <dso-badge status={group.variant ?? \"outline\"}>{group.options.length}</dso-badge>\r\n ))}\r\n </span>\r\n )}\r\n <dso-icon icon=\"caret-down\"></dso-icon>\r\n </span>\r\n </button>\r\n {this.open && (\r\n <div class=\"groups-container\">\r\n <ul class=\"groups\">\r\n {this.options.map(\r\n (optionOrGroup) =>\r\n (\"options\" in optionOrGroup && (\r\n <li class={clsx([\"group\", { [`group-${optionOrGroup.variant}`]: !!optionOrGroup.variant }])}>\r\n <p class=\"group-label\">{optionOrGroup.label}</p>\r\n <ul class=\"options\">\r\n {optionOrGroup.options.map((option) => (\r\n <li>\r\n <OptionButton\r\n option={option}\r\n active={this.active}\r\n activeHint={this.activeHint}\r\n callback={this.handleOptionClick}\r\n />\r\n </li>\r\n ))}\r\n </ul>\r\n {optionOrGroup.redirect && (\r\n <RedirectAnchor\r\n redirect={optionOrGroup.redirect}\r\n callback={this.handleRedirectClick}\r\n ></RedirectAnchor>\r\n )}\r\n </li>\r\n )) ||\r\n (\"placeholder\" in optionOrGroup && (\r\n <li class=\"group\">\r\n <p class=\"group-label\">{optionOrGroup.label}</p>\r\n <p class=\"placeholder\">{optionOrGroup.placeholder}</p>\r\n {optionOrGroup.redirect && (\r\n <RedirectAnchor\r\n redirect={optionOrGroup.redirect}\r\n callback={this.handleRedirectClick}\r\n ></RedirectAnchor>\r\n )}\r\n </li>\r\n )) || (\r\n <li>\r\n <OptionButton\r\n option={optionOrGroup}\r\n active={this.active}\r\n activeHint={this.activeHint}\r\n callback={this.handleOptionClick}\r\n />\r\n </li>\r\n ),\r\n )}\r\n </ul>\r\n </div>\r\n )}\r\n </>\r\n );\r\n }\r\n}\r\n\r\ninterface OptionButtonProps {\r\n option: AdvancedSelectOption<never>;\r\n active: AdvancedSelectOption<never> | undefined;\r\n activeHint: string | undefined;\r\n callback: (event: MouseEvent, value: AdvancedSelectOption<never>) => void;\r\n}\r\n\r\nconst OptionButton: FunctionalComponent<OptionButtonProps> = ({ option, active, activeHint, callback }) => (\r\n <button\r\n class={clsx([\"option\", { \"option-active\": active === option }])}\r\n type=\"button\"\r\n onClick={(e) => callback(e, option)}\r\n >\r\n <span class=\"option-label\">{option.label}</span>\r\n {!!activeHint && active === option && <span class=\"option-hint\">({activeHint})</span>}\r\n </button>\r\n);\r\n\r\ninterface RedirectAnchorProps {\r\n redirect: AdvancedSelectGroupRedirect;\r\n callback: (event: MouseEvent, value: AdvancedSelectGroupRedirect) => void;\r\n}\r\n\r\nconst RedirectAnchor: FunctionalComponent<RedirectAnchorProps> = ({ redirect, callback }) => (\r\n <a class=\"group-link\" href={redirect.href} onClick={(e) => callback(e, redirect)}>\r\n {redirect.label}\r\n <dso-icon icon=\"chevron-right\"></dso-icon>\r\n </a>\r\n);\r\n\r\ninterface ActiveGroupLabelProps {\r\n active: AdvancedSelectOption<never> | undefined;\r\n options: AdvancedSelectOptionOrGroup<never>[];\r\n}\r\n\r\nconst ActiveGroupLabel: FunctionalComponent<ActiveGroupLabelProps> = ({ active, options }) => {\r\n const group = options.find(\r\n (optionOrGroup): optionOrGroup is AdvancedSelectGroup<never> =>\r\n \"options\" in optionOrGroup &&\r\n !!optionOrGroup.options.find((option) => option === active) &&\r\n !!optionOrGroup.activeLabel,\r\n );\r\n\r\n return group ? (\r\n <dso-label compact status={group.variant}>\r\n {group.activeLabel}\r\n </dso-label>\r\n ) : undefined;\r\n};\r\n"],"version":3}
|
|
1
|
+
{"file":"dso-advanced-select.entry.js","mappings":"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","names":[],"sources":["src/components/advanced-select/advanced-select.scss?tag=dso-advanced-select&encapsulation=shadow","src/components/advanced-select/advanced-select.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\r\n@use \"~dso-toolkit/src/components/advanced-select\";\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.active-option {\r\n display: flex;\r\n inline-size: 100%;\r\n justify-content: flex-start;\r\n align-items: center;\r\n padding: 0;\r\n border: 1px solid advanced-select.$border-color;\r\n border-radius: advanced-select.$border-radius;\r\n cursor: pointer;\r\n background-color: advanced-select.$bg-color;\r\n line-height: inherit;\r\n font-family: inherit;\r\n font-size: inherit;\r\n\r\n &.open {\r\n border-radius: advanced-select.$border-radius advanced-select.$border-radius 0 0;\r\n }\r\n\r\n dso-icon {\r\n color: advanced-select.$icon-color;\r\n }\r\n\r\n dso-label {\r\n margin-inline-start: advanced-select.$inline-padding * 0.5;\r\n }\r\n}\r\n\r\n.active-option-label {\r\n padding-block: advanced-select.$block-padding;\r\n padding-inline: advanced-select.$inline-padding;\r\n overflow: hidden;\r\n /* stylelint-disable-next-line declaration-property-value-disallowed-list -- Nodig om lange titels op de zelfde regel te houden */\r\n white-space: nowrap;\r\n /* stylelint-disable-next-line declaration-property-value-disallowed-list -- Nodig om lange titels op de zelfde regel te houden */\r\n text-overflow: ellipsis;\r\n}\r\n\r\n.active-option-aside {\r\n display: flex;\r\n align-items: center;\r\n gap: advanced-select.$inline-padding * 0.5;\r\n padding-block: 0;\r\n padding-inline: advanced-select.$inline-padding * 0.5;\r\n margin-inline-start: auto;\r\n}\r\n\r\n.badges {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n gap: advanced-select.$block-padding;\r\n}\r\n\r\n.groups-container {\r\n position: relative;\r\n}\r\n\r\n.groups {\r\n position: absolute;\r\n inset-block-start: -1px;\r\n inset-inline-start: 0;\r\n inline-size: 100%;\r\n max-block-size: 500px;\r\n margin: 0;\r\n padding: 0;\r\n overflow-y: auto;\r\n background-color: advanced-select.$bg-color;\r\n border: 1px solid advanced-select.$border-color;\r\n border-radius: 0 0 advanced-select.$border-radius advanced-select.$border-radius;\r\n\r\n li {\r\n &::marker {\r\n display: none;\r\n }\r\n }\r\n}\r\n\r\n.group {\r\n border-block-end: 1px solid advanced-select.$hr-color;\r\n\r\n &:last-child {\r\n border-block-end: none;\r\n }\r\n\r\n .option {\r\n padding-inline-start: advanced-select.$inline-padding * 2 + advanced-select.$option-dot-size * 0.5;\r\n }\r\n\r\n .option-label::before {\r\n content: \"\";\r\n position: absolute;\r\n display: block;\r\n block-size: advanced-select.$option-dot-size;\r\n inline-size: advanced-select.$option-dot-size;\r\n inset-block: advanced-select.$block-padding auto;\r\n inset-inline: -#{advanced-select.$option-dot-size * 2} auto;\r\n border-radius: 50%;\r\n @include set-colors.apply(advanced-select.$default-variant-color, $icons: false, $links: false);\r\n }\r\n}\r\n\r\n.group-label {\r\n margin: 0;\r\n padding-block: advanced-select.$block-padding;\r\n padding-inline: advanced-select.$inline-padding;\r\n color: advanced-select.$group-label-color;\r\n font-size: advanced-select.$group-label-font-size;\r\n font-weight: advanced-select.$group-label-font-weight;\r\n border-block-end: 1px solid advanced-select.$hr-color;\r\n}\r\n\r\n.group-link {\r\n display: block;\r\n padding-block: advanced-select.$group-link-block-padding;\r\n padding-inline: advanced-select.$group-link-inline-padding;\r\n text-align: end;\r\n color: advanced-select.$group-link-color;\r\n text-decoration: none;\r\n\r\n &:hover {\r\n text-decoration: underline;\r\n }\r\n\r\n dso-icon {\r\n color: advanced-select.$redirect-icon-color;\r\n }\r\n}\r\n\r\n.group-info .option-label::before {\r\n @include set-colors.apply(advanced-select.$info-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-primary .option-label::before {\r\n @include set-colors.apply(advanced-select.$primary-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-success .option-label::before {\r\n @include set-colors.apply(advanced-select.$success-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-warning .option-label::before {\r\n @include set-colors.apply(advanced-select.$warning-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-danger .option-label::before {\r\n @include set-colors.apply(advanced-select.$danger-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-error .option-label::before {\r\n @include set-colors.apply(advanced-select.$error-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-attention .option-label::before {\r\n @include set-colors.apply(advanced-select.$attention-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.options {\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\n.option {\r\n display: block;\r\n inline-size: 100%;\r\n padding-block: advanced-select.$block-padding * 2;\r\n padding-inline: advanced-select.$inline-padding;\r\n cursor: pointer;\r\n line-height: inherit;\r\n font-family: inherit;\r\n font-size: inherit;\r\n border: none;\r\n text-align: start;\r\n background-color: advanced-select.$bg-color;\r\n\r\n &:hover {\r\n background-color: advanced-select.$option-hover-bg-color;\r\n\r\n .option-label {\r\n color: advanced-select.$option-hover-color;\r\n font-weight: advanced-select.$option-hover-font-weight;\r\n }\r\n }\r\n}\r\n\r\n.option.option-active .option-label {\r\n color: advanced-select.$option-active-color;\r\n font-weight: advanced-select.$option-active-font-weight;\r\n text-decoration: underline;\r\n}\r\n\r\n.option-label {\r\n position: relative;\r\n color: advanced-select.$option-color;\r\n font-size: advanced-select.$option-font-size;\r\n font-weight: advanced-select.$option-font-weight;\r\n}\r\n\r\n.option-hint {\r\n padding-inline-start: 5px;\r\n color: advanced-select.$option-active-color;\r\n font-size: advanced-select.$option-font-size;\r\n font-weight: advanced-select.$option-active-font-weight;\r\n}\r\n\r\n.placeholder {\r\n margin: 0;\r\n padding-block: advanced-select.$block-padding * 2;\r\n padding-inline: advanced-select.$inline-padding;\r\n color: advanced-select.$option-placeholder-color;\r\n}\r\n","import {\r\n Component,\r\n ComponentInterface,\r\n Prop,\r\n h,\r\n FunctionalComponent,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n State,\r\n Fragment,\r\n Listen,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport {\r\n AdvancedSelectGroup,\r\n AdvancedSelectGroupRedirect,\r\n AdvancedSelectOption,\r\n AdvancedSelectChangeEvent,\r\n AdvancedSelectOptionOrGroup,\r\n AdvancedSelectRedirectEvent,\r\n} from \"./advanced-select.interfaces\";\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\nimport { tabbable } from \"tabbable\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\n@Component({\r\n tag: \"dso-advanced-select\",\r\n styleUrl: \"advanced-select.scss\",\r\n shadow: true,\r\n})\r\nexport class AdvancedSelect implements ComponentInterface {\r\n private trap?: FocusTrap;\r\n\r\n @Element()\r\n host!: HTMLDsoAdvancedSelectElement;\r\n\r\n /**\r\n * The options to display in the select.\r\n */\r\n @Prop()\r\n options: AdvancedSelectOptionOrGroup<never>[] = [];\r\n\r\n /**\r\n * The active option. By object reference.\r\n */\r\n @Prop()\r\n active?: AdvancedSelectOption<never>;\r\n\r\n /**\r\n * An extra text for the active option. Only visible in the list of options.\r\n */\r\n @Prop()\r\n activeHint?: string;\r\n\r\n /**\r\n * The open state of the options list.\r\n */\r\n @State()\r\n open: boolean = false;\r\n\r\n /**\r\n * Emitted when user selects an option\r\n */\r\n @Event({ bubbles: false })\r\n dsoChange!: EventEmitter<AdvancedSelectChangeEvent<never>>;\r\n\r\n /**\r\n * Emitted when user activates a group redirect link.\r\n */\r\n @Event({ bubbles: false })\r\n dsoRedirect!: EventEmitter<AdvancedSelectRedirectEvent>;\r\n\r\n private toggleButtonElementRef: HTMLButtonElement | undefined;\r\n\r\n @Listen(\"keydown\", { target: \"window\" })\r\n keyDownListener(event: KeyboardEvent) {\r\n if (this.open && event.key === \"ArrowUp\") {\r\n event.preventDefault();\r\n this.handleTab(-1);\r\n } else if (this.open && event.key === \"ArrowDown\") {\r\n event.preventDefault();\r\n this.handleTab(1);\r\n }\r\n }\r\n\r\n componentDidRender() {\r\n if (this.open && !this.trap) {\r\n this.createTrap();\r\n } else if (!this.open && this.trap) {\r\n this.removeTrap();\r\n }\r\n }\r\n\r\n private toggleOpen = () => {\r\n this.open = !this.open;\r\n };\r\n\r\n private createTrap() {\r\n this.trap = createFocusTrap(this.host, {\r\n clickOutsideDeactivates: true,\r\n escapeDeactivates: true,\r\n setReturnFocus: this.toggleButtonElementRef,\r\n tabbableOptions: {\r\n getShadowRoot: true,\r\n },\r\n onDeactivate: () => {\r\n this.open = false;\r\n },\r\n }).activate();\r\n }\r\n\r\n private removeTrap() {\r\n this.trap?.deactivate();\r\n delete this.trap;\r\n }\r\n\r\n private handleTab(direction: number) {\r\n const elements = 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}
|
|
@@ -85,7 +85,7 @@ const DropdownMenu = class {
|
|
|
85
85
|
return button;
|
|
86
86
|
}
|
|
87
87
|
tabbables(withButton) {
|
|
88
|
-
const tabbables = tabbable(this.host);
|
|
88
|
+
const tabbables = this.host.isConnected ? tabbable(this.host) : [];
|
|
89
89
|
return withButton ? tabbables : tabbables.filter((element) => element !== this.button);
|
|
90
90
|
}
|
|
91
91
|
componentDidLoad() {
|
|
@@ -139,7 +139,7 @@ const DropdownMenu = class {
|
|
|
139
139
|
(_a = this.popper) === null || _a === void 0 ? void 0 : _a.update();
|
|
140
140
|
}
|
|
141
141
|
for (const li of Array.from(this.host.getElementsByTagName("li"))) {
|
|
142
|
-
for (const tab of tabbable(li)) {
|
|
142
|
+
for (const tab of this.host.isConnected ? tabbable(li) : []) {
|
|
143
143
|
tab.setAttribute("role", this.checkable ? "menuitemradio" : "menuitem");
|
|
144
144
|
if (this.checkable) {
|
|
145
145
|
tab.setAttribute("aria-checked", li.classList.contains("dso-checked").toString());
|
|
@@ -212,7 +212,7 @@ const DropdownMenu = class {
|
|
|
212
212
|
(_a = tabbables[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
|
|
213
213
|
}
|
|
214
214
|
render() {
|
|
215
|
-
return (h(Host, { key: '
|
|
215
|
+
return (h(Host, { key: '976b334e90ff2b8d23d25cebbe02008ab924b046', onFocusout: this.focusOutListener }, h("slot", { key: '84811cd273de19adbeb9d4157506dc3df7c96ec4', name: "toggle" }), h("div", { key: 'a76e4162196a14f92c02f5bfab37e32f990fd45b', hidden: !this.open }, h("slot", { key: 'c3762cda1ccf72e176d496e44d7fcc6f9b32756c' }))));
|
|
216
216
|
}
|
|
217
217
|
get host() { return getElement(this); }
|
|
218
218
|
static get watchers() { return {
|