@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
|
@@ -70,7 +70,7 @@ const AdvancedSelect = class {
|
|
|
70
70
|
}
|
|
71
71
|
handleTab(direction) {
|
|
72
72
|
var _a;
|
|
73
|
-
const elements = index_esm.tabbable(this.host, { getShadowRoot: true });
|
|
73
|
+
const elements = this.host.isConnected ? index_esm.tabbable(this.host, { getShadowRoot: true }) : [];
|
|
74
74
|
const currentIndex = elements.findIndex((e) => { var _a; return e === ((_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement); });
|
|
75
75
|
let nextIndex = currentIndex + direction;
|
|
76
76
|
if (nextIndex >= elements.length) {
|
|
@@ -83,12 +83,12 @@ const AdvancedSelect = class {
|
|
|
83
83
|
}
|
|
84
84
|
render() {
|
|
85
85
|
var _a, _b;
|
|
86
|
-
return (index.h(index.Fragment, null, index.h("button", { key: '
|
|
86
|
+
return (index.h(index.Fragment, null, index.h("button", { key: '863c76d960af3d1c91e2920f9e7640acf1fcb8de', "aria-expanded": this.open.toString(), class: clsx.clsx(["active-option", { open: this.open }]), type: "button", onClick: this.toggleOpen, ref: (element) => (this.toggleButtonElementRef = element) }, index.h(ActiveGroupLabel, { key: '0165cc3fc03367aedda4e9a6e49ed76818bc9d7c', active: this.active, options: this.options }), index.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"), index.h("span", { key: '1ecb6f4ed7ebea267fa0cf99b649c7ff4ae480d8', class: "active-option-aside" }, this.options.some((optionOrGroup) => "summaryCounter" in optionOrGroup && (optionOrGroup === null || optionOrGroup === void 0 ? void 0 : optionOrGroup.summaryCounter)) && (index.h("span", { key: 'dbc4278fd89412fb098d9e7c360a2f4ac58cafd6', class: "badges" }, this.options
|
|
87
87
|
.filter((option) => "options" in option && "summaryCounter" in option && !!(option === null || option === void 0 ? void 0 : option.summaryCounter))
|
|
88
88
|
.map((group) => {
|
|
89
89
|
var _a;
|
|
90
90
|
return (index.h("dso-badge", { status: (_a = group.variant) !== null && _a !== void 0 ? _a : "outline" }, group.options.length));
|
|
91
|
-
}))), index.h("dso-icon", { key: '
|
|
91
|
+
}))), index.h("dso-icon", { key: '892afcf018935d842562288b5219902044bf0b3f', icon: "caret-down" }))), this.open && (index.h("div", { key: '81651c248319f8fa5281d30cb90ff228d2b6c8cd', class: "groups-container" }, index.h("ul", { key: '9776c7284681eee6ad5128c4558872db7eda894a', class: "groups" }, this.options.map((optionOrGroup) => ("options" in optionOrGroup && (index.h("li", { class: clsx.clsx(["group", { [`group-${optionOrGroup.variant}`]: !!optionOrGroup.variant }]) }, index.h("p", { class: "group-label" }, optionOrGroup.label), index.h("ul", { class: "options" }, optionOrGroup.options.map((option) => (index.h("li", null, index.h(OptionButton, { option: option, active: this.active, activeHint: this.activeHint, callback: this.handleOptionClick }))))), optionOrGroup.redirect && (index.h(RedirectAnchor, { redirect: optionOrGroup.redirect, callback: this.handleRedirectClick }))))) ||
|
|
92
92
|
("placeholder" in optionOrGroup && (index.h("li", { class: "group" }, index.h("p", { class: "group-label" }, optionOrGroup.label), index.h("p", { class: "placeholder" }, optionOrGroup.placeholder), optionOrGroup.redirect && (index.h(RedirectAnchor, { redirect: optionOrGroup.redirect, callback: this.handleRedirectClick }))))) || (index.h("li", null, index.h(OptionButton, { option: optionOrGroup, active: this.active, activeHint: this.activeHint, callback: this.handleOptionClick })))))))));
|
|
93
93
|
}
|
|
94
94
|
get host() { return index.getElement(this); }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"dso-advanced-select.entry.cjs.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,EAAEA,+BAAe,CAAC,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC;YACnG,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;SACnB,CAAC;uBAlG8C,EAAE;;;oBAkBlC,KAAK;;IAiBrB,eAAe,CAAC,KAAoB;QAClC,IAAI,IAAI,CAAC,IAAI,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,EAAE;YACxC,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;SACpB;aAAM,IAAI,IAAI,CAAC,IAAI,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE;YACjD,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;SACnB;KACF;IAED,kBAAkB;QAChB,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YAC3B,IAAI,CAAC,UAAU,EAAE,CAAC;SACnB;aAAM,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,EAAE;YAClC,IAAI,CAAC,UAAU,EAAE,CAAC;SACnB;KACF;IAMO,UAAU;QAChB,IAAI,CAAC,IAAI,GAAGC,6BAAe,CAAC,IAAI,CAAC,IAAI,EAAE;YACrC,uBAAuB,EAAE,IAAI;YAC7B,iBAAiB,EAAE,IAAI;YACvB,cAAc,EAAE,IAAI,CAAC,sBAAsB;YAC3C,eAAe,EAAE;gBACf,aAAa,EAAE,IAAI;aACpB;YACD,YAAY,EAAE;gBACZ,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;aACnB;SACF,CAAC,CAAC,QAAQ,EAAE,CAAC;KACf;IAEO,UAAU;;QAChB,MAAA,IAAI,CAAC,IAAI,0CAAE,UAAU,EAAE,CAAC;QACxB,OAAO,IAAI,CAAC,IAAI,CAAC;KAClB;IAEO,SAAS,CAAC,SAAiB;;QACjC,MAAM,QAAQ,GAAGC,kBAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;QAC9D,MAAM,YAAY,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC,eAAK,OAAA,CAAC,MAAK,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAA,CAAA,EAAA,CAAC,CAAC;QAE1F,IAAI,SAAS,GAAG,YAAY,GAAG,SAAS,CAAC;QACzC,IAAI,SAAS,IAAI,QAAQ,CAAC,MAAM,EAAE;YAChC,SAAS,GAAG,CAAC,CAAC;SACf;aAAM,IAAI,SAAS,GAAG,CAAC,EAAE;YACxB,SAAS,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;SACjC;QAED,MAAA,QAAQ,CAAC,SAAS,CAAC,0CAAE,KAAK,EAAE,CAAC;KAC9B;IAYD,MAAM;;QACJ,QACEC,8BACEA,sFACiB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,EACnC,KAAK,EAAEC,SAAI,CAAC,CAAC,eAAe,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,EACnD,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,UAAU,EACxB,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,sBAAsB,GAAG,OAAO,CAAC,IAEzDD,QAAC,gBAAgB,qDAAC,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,GAAI,EAChEA,mEAAM,KAAK,EAAC,qBAAqB,IAAE,MAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,KAAK,mCAAI,qBAAqB,CAAQ,EACtFA,mEAAM,KAAK,EAAC,qBAAqB,IAC9B,IAAI,CAAC,OAAO,CAAC,IAAI,CAChB,CAAC,aAAa,KAAK,gBAAgB,IAAI,aAAa,KAAI,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,cAAc,CAAA,CACtF,KACCA,mEAAM,KAAK,EAAC,QAAQ,IACjB,IAAI,CAAC,OAAO;aACV,MAAM,CACL,CAAC,MAAM,KACL,SAAS,IAAI,MAAM,IAAI,gBAAgB,IAAI,MAAM,IAAI,CAAC,EAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,cAAc,CAAA,CAChF;aACA,GAAG,CAAC,CAAC,KAAK;;YAAK,QACdA,uBAAW,MAAM,EAAE,MAAA,KAAK,CAAC,OAAO,mCAAI,SAAS,IAAG,KAAK,CAAC,OAAO,CAAC,MAAM,CAAa,EAClF;SAAA,CAAC,CACC,CACR,EACDA,uEAAU,IAAI,EAAC,YAAY,GAAY,CAClC,CACA,EACR,IAAI,CAAC,IAAI,KACRA,kEAAK,KAAK,EAAC,kBAAkB,IAC3BA,iEAAI,KAAK,EAAC,QAAQ,IACf,IAAI,CAAC,OAAO,CAAC,GAAG,CACf,CAAC,aAAa,KACZ,CAAC,SAAS,IAAI,aAAa,KACzBA,gBAAI,KAAK,EAAEC,SAAI,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,SAAS,aAAa,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC,CAAC,IACzFD,eAAG,KAAK,EAAC,aAAa,IAAE,aAAa,CAAC,KAAK,CAAK,EAChDA,gBAAI,KAAK,EAAC,SAAS,IAChB,aAAa,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MAChCA,oBACEA,QAAC,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,KACrBA,QAAC,cAAc,IACb,QAAQ,EAAE,aAAa,CAAC,QAAQ,EAChC,QAAQ,EAAE,IAAI,CAAC,mBAAmB,GAClB,CACnB,CACE,CACN;aACA,aAAa,IAAI,aAAa,KAC7BA,gBAAI,KAAK,EAAC,OAAO,IACfA,eAAG,KAAK,EAAC,aAAa,IAAE,aAAa,CAAC,KAAK,CAAK,EAChDA,eAAG,KAAK,EAAC,aAAa,IAAE,aAAa,CAAC,WAAW,CAAK,EACrD,aAAa,CAAC,QAAQ,KACrBA,QAAC,cAAc,IACb,QAAQ,EAAE,aAAa,CAAC,QAAQ,EAChC,QAAQ,EAAE,IAAI,CAAC,mBAAmB,GAClB,CACnB,CACE,CACN,CAAC,KACAA,oBACEA,QAAC,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,MACpGA,oBACE,KAAK,EAAEC,SAAI,CAAC,CAAC,QAAQ,EAAE,EAAE,eAAe,EAAE,MAAM,KAAK,MAAM,EAAE,CAAC,CAAC,EAC/D,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,CAAC,CAAC,KAAK,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC,IAEnCD,kBAAM,KAAK,EAAC,cAAc,IAAE,MAAM,CAAC,KAAK,CAAQ,EAC/C,CAAC,CAAC,UAAU,IAAI,MAAM,KAAK,MAAM,IAAIA,kBAAM,KAAK,EAAC,aAAa,SAAG,UAAU,MAAS,CAC9E,CACV,CAAC;AAOF,MAAM,cAAc,GAA6C,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,MACtFA,eAAG,KAAK,EAAC,YAAY,EAAC,IAAI,EAAE,QAAQ,CAAC,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC,KAAK,QAAQ,CAAC,CAAC,EAAE,QAAQ,CAAC,IAC7E,QAAQ,CAAC,KAAK,EACfA,sBAAU,IAAI,EAAC,eAAe,GAAY,CACxC,CACL,CAAC;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,IACVA,uBAAW,OAAO,QAAC,MAAM,EAAE,KAAK,CAAC,OAAO,IACrC,KAAK,CAAC,WAAW,CACR,IACV,SAAS,CAAC;AAChB,CAAC,CAAC;;;;;","names":["isModifiedEvent","createFocusTrap","tabbable","h","clsx"],"sources":["src/components/advanced-select/advanced-select.scss?tag=dso-advanced-select&encapsulation=shadow","src/components/advanced-select/advanced-select.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\r\n@use \"~dso-toolkit/src/components/advanced-select\";\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.active-option {\r\n display: flex;\r\n inline-size: 100%;\r\n justify-content: 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.cjs.js","mappings":"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","names":["isModifiedEvent","createFocusTrap","tabbable","h","clsx"],"sources":["src/components/advanced-select/advanced-select.scss?tag=dso-advanced-select&encapsulation=shadow","src/components/advanced-select/advanced-select.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\r\n@use \"~dso-toolkit/src/components/advanced-select\";\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.active-option {\r\n display: flex;\r\n inline-size: 100%;\r\n justify-content: 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}
|
|
@@ -89,7 +89,7 @@ const DropdownMenu = class {
|
|
|
89
89
|
return button;
|
|
90
90
|
}
|
|
91
91
|
tabbables(withButton) {
|
|
92
|
-
const tabbables = index_esm.tabbable(this.host);
|
|
92
|
+
const tabbables = this.host.isConnected ? index_esm.tabbable(this.host) : [];
|
|
93
93
|
return withButton ? tabbables : tabbables.filter((element) => element !== this.button);
|
|
94
94
|
}
|
|
95
95
|
componentDidLoad() {
|
|
@@ -143,7 +143,7 @@ const DropdownMenu = class {
|
|
|
143
143
|
(_a = this.popper) === null || _a === void 0 ? void 0 : _a.update();
|
|
144
144
|
}
|
|
145
145
|
for (const li of Array.from(this.host.getElementsByTagName("li"))) {
|
|
146
|
-
for (const tab of index_esm.tabbable(li)) {
|
|
146
|
+
for (const tab of this.host.isConnected ? index_esm.tabbable(li) : []) {
|
|
147
147
|
tab.setAttribute("role", this.checkable ? "menuitemradio" : "menuitem");
|
|
148
148
|
if (this.checkable) {
|
|
149
149
|
tab.setAttribute("aria-checked", li.classList.contains("dso-checked").toString());
|
|
@@ -216,7 +216,7 @@ const DropdownMenu = class {
|
|
|
216
216
|
(_a = tabbables[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
|
|
217
217
|
}
|
|
218
218
|
render() {
|
|
219
|
-
return (index.h(index.Host, { key: '
|
|
219
|
+
return (index.h(index.Host, { key: '976b334e90ff2b8d23d25cebbe02008ab924b046', onFocusout: this.focusOutListener }, index.h("slot", { key: '84811cd273de19adbeb9d4157506dc3df7c96ec4', name: "toggle" }), index.h("div", { key: 'a76e4162196a14f92c02f5bfab37e32f990fd45b', hidden: !this.open }, index.h("slot", { key: 'c3762cda1ccf72e176d496e44d7fcc6f9b32756c' }))));
|
|
220
220
|
}
|
|
221
221
|
get host() { return index.getElement(this); }
|
|
222
222
|
static get watchers() { return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"dso-dropdown-menu.entry.cjs.js","mappings":"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","names":["hasOverflow","tabbable","uuidv4","createPopper","getActiveElement","h","Host"],"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 = 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 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"],"version":3}
|
|
1
|
+
{"file":"dso-dropdown-menu.entry.cjs.js","mappings":"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","names":["hasOverflow","tabbable","uuidv4","createPopper","getActiveElement","h","Host"],"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"],"version":3}
|
|
@@ -59,7 +59,7 @@ export class AdvancedSelect {
|
|
|
59
59
|
}
|
|
60
60
|
handleTab(direction) {
|
|
61
61
|
var _a;
|
|
62
|
-
const elements = tabbable(this.host, { getShadowRoot: true });
|
|
62
|
+
const elements = this.host.isConnected ? tabbable(this.host, { getShadowRoot: true }) : [];
|
|
63
63
|
const currentIndex = elements.findIndex((e) => { var _a; return e === ((_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement); });
|
|
64
64
|
let nextIndex = currentIndex + direction;
|
|
65
65
|
if (nextIndex >= elements.length) {
|
|
@@ -72,12 +72,12 @@ export class AdvancedSelect {
|
|
|
72
72
|
}
|
|
73
73
|
render() {
|
|
74
74
|
var _a, _b;
|
|
75
|
-
return (h(Fragment, null, h("button", { key: '
|
|
75
|
+
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
|
|
76
76
|
.filter((option) => "options" in option && "summaryCounter" in option && !!(option === null || option === void 0 ? void 0 : option.summaryCounter))
|
|
77
77
|
.map((group) => {
|
|
78
78
|
var _a;
|
|
79
79
|
return (h("dso-badge", { status: (_a = group.variant) !== null && _a !== void 0 ? _a : "outline" }, group.options.length));
|
|
80
|
-
}))), h("dso-icon", { key: '
|
|
80
|
+
}))), 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 }))))) ||
|
|
81
81
|
("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 })))))))));
|
|
82
82
|
}
|
|
83
83
|
static get is() { return "dso-advanced-select"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"advanced-select.js","sourceRoot":"","sources":["../../../../src/components/advanced-select/advanced-select.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}
|
|
1
|
+
{"version":3,"file":"advanced-select.js","sourceRoot":"","sources":["../../../../src/components/advanced-select/advanced-select.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}
|
|
@@ -81,7 +81,7 @@ export class DropdownMenu {
|
|
|
81
81
|
return button;
|
|
82
82
|
}
|
|
83
83
|
tabbables(withButton) {
|
|
84
|
-
const tabbables = tabbable(this.host);
|
|
84
|
+
const tabbables = this.host.isConnected ? tabbable(this.host) : [];
|
|
85
85
|
return withButton ? tabbables : tabbables.filter((element) => element !== this.button);
|
|
86
86
|
}
|
|
87
87
|
componentDidLoad() {
|
|
@@ -135,7 +135,7 @@ export class DropdownMenu {
|
|
|
135
135
|
(_a = this.popper) === null || _a === void 0 ? void 0 : _a.update();
|
|
136
136
|
}
|
|
137
137
|
for (const li of Array.from(this.host.getElementsByTagName("li"))) {
|
|
138
|
-
for (const tab of tabbable(li)) {
|
|
138
|
+
for (const tab of this.host.isConnected ? tabbable(li) : []) {
|
|
139
139
|
tab.setAttribute("role", this.checkable ? "menuitemradio" : "menuitem");
|
|
140
140
|
if (this.checkable) {
|
|
141
141
|
tab.setAttribute("aria-checked", li.classList.contains("dso-checked").toString());
|
|
@@ -208,7 +208,7 @@ export class DropdownMenu {
|
|
|
208
208
|
(_a = tabbables[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
|
|
209
209
|
}
|
|
210
210
|
render() {
|
|
211
|
-
return (h(Host, { key: '
|
|
211
|
+
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' }))));
|
|
212
212
|
}
|
|
213
213
|
static get is() { return "dso-dropdown-menu"; }
|
|
214
214
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown-menu.js","sourceRoot":"","sources":["../../../../src/components/dropdown-menu/dropdown-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["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 = 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 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"]}
|
|
1
|
+
{"version":3,"file":"dropdown-menu.js","sourceRoot":"","sources":["../../../../src/components/dropdown-menu/dropdown-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}
|
|
@@ -87,7 +87,7 @@ const DropdownMenu = /*@__PURE__*/ proxyCustomElement(class DropdownMenu extends
|
|
|
87
87
|
return button;
|
|
88
88
|
}
|
|
89
89
|
tabbables(withButton) {
|
|
90
|
-
const tabbables = tabbable(this.host);
|
|
90
|
+
const tabbables = this.host.isConnected ? tabbable(this.host) : [];
|
|
91
91
|
return withButton ? tabbables : tabbables.filter((element) => element !== this.button);
|
|
92
92
|
}
|
|
93
93
|
componentDidLoad() {
|
|
@@ -141,7 +141,7 @@ const DropdownMenu = /*@__PURE__*/ proxyCustomElement(class DropdownMenu extends
|
|
|
141
141
|
(_a = this.popper) === null || _a === void 0 ? void 0 : _a.update();
|
|
142
142
|
}
|
|
143
143
|
for (const li of Array.from(this.host.getElementsByTagName("li"))) {
|
|
144
|
-
for (const tab of tabbable(li)) {
|
|
144
|
+
for (const tab of this.host.isConnected ? tabbable(li) : []) {
|
|
145
145
|
tab.setAttribute("role", this.checkable ? "menuitemradio" : "menuitem");
|
|
146
146
|
if (this.checkable) {
|
|
147
147
|
tab.setAttribute("aria-checked", li.classList.contains("dso-checked").toString());
|
|
@@ -214,7 +214,7 @@ const DropdownMenu = /*@__PURE__*/ proxyCustomElement(class DropdownMenu extends
|
|
|
214
214
|
(_a = tabbables[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
|
|
215
215
|
}
|
|
216
216
|
render() {
|
|
217
|
-
return (h(Host, { key: '
|
|
217
|
+
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' }))));
|
|
218
218
|
}
|
|
219
219
|
get host() { return this; }
|
|
220
220
|
static get watchers() { return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"dropdown-menu.js","mappings":"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","names":["uuidv4"],"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 = 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 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"],"version":3}
|
|
1
|
+
{"file":"dropdown-menu.js","mappings":"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","names":["uuidv4"],"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"],"version":3}
|