@haiilo/catalyst 14.0.2 → 14.0.4
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/catalyst/catalyst.esm.js +1 -1
- package/dist/catalyst/p-fae91392.entry.js +10 -0
- package/dist/catalyst/{p-1717f55e.entry.js.map → p-fae91392.entry.js.map} +1 -1
- package/dist/catalyst/scss/index.shadow.scss +2 -2
- package/dist/cjs/cat-alert_30.cjs.entry.js +21 -15
- package/dist/collection/components/cat-dropdown/cat-dropdown.js +9 -7
- package/dist/collection/components/cat-dropdown/cat-dropdown.js.map +1 -1
- package/dist/collection/components/cat-select/cat-select.js +9 -7
- package/dist/collection/components/cat-select/cat-select.js.map +1 -1
- package/dist/collection/components/cat-tabs/cat-tabs.js +3 -1
- package/dist/collection/components/cat-tabs/cat-tabs.js.map +1 -1
- package/dist/collection/scss/index.shadow.scss +2 -2
- package/dist/components/cat-dropdown2.js +9 -7
- package/dist/components/cat-dropdown2.js.map +1 -1
- package/dist/components/cat-select2.js +9 -7
- package/dist/components/cat-select2.js.map +1 -1
- package/dist/components/cat-tabs.js +3 -1
- package/dist/components/cat-tabs.js.map +1 -1
- package/dist/esm/cat-alert_30.entry.js +21 -15
- package/dist/types/components/cat-dropdown/cat-dropdown.d.ts +1 -0
- package/dist/types/components/cat-select/cat-select.d.ts +1 -0
- package/package.json +2 -2
- package/dist/catalyst/p-1717f55e.entry.js +0 -10
|
@@ -7720,6 +7720,10 @@ const CatDropdown = class {
|
|
|
7720
7720
|
this._isOpen = null;
|
|
7721
7721
|
this.content.style.display = 'block';
|
|
7722
7722
|
this.hasInitialFocus = isFocusVisible ?? this.hasInitialFocus;
|
|
7723
|
+
const trigger = this.anchor || this.trigger;
|
|
7724
|
+
if (trigger) {
|
|
7725
|
+
this.cleanupFloatingUi = autoUpdate(trigger, this.content, () => this.update(trigger));
|
|
7726
|
+
}
|
|
7723
7727
|
// give CSS transition time to apply
|
|
7724
7728
|
setTimeout(() => {
|
|
7725
7729
|
this._isOpen = true;
|
|
@@ -7780,6 +7784,8 @@ const CatDropdown = class {
|
|
|
7780
7784
|
this.content.classList.remove('show');
|
|
7781
7785
|
this.content.style.display = '';
|
|
7782
7786
|
this.trigger?.setAttribute('aria-expanded', 'false');
|
|
7787
|
+
this.cleanupFloatingUi?.();
|
|
7788
|
+
this.cleanupFloatingUi = undefined;
|
|
7783
7789
|
this.catClose.emit();
|
|
7784
7790
|
}, timeTransitionS);
|
|
7785
7791
|
}
|
|
@@ -7792,9 +7798,11 @@ const CatDropdown = class {
|
|
|
7792
7798
|
disconnectedCallback() {
|
|
7793
7799
|
this.trap?.deactivate();
|
|
7794
7800
|
this.trap = undefined;
|
|
7801
|
+
this.cleanupFloatingUi?.();
|
|
7802
|
+
this.cleanupFloatingUi = undefined;
|
|
7795
7803
|
}
|
|
7796
7804
|
render() {
|
|
7797
|
-
return (index.h(index.Host, { key: '
|
|
7805
|
+
return (index.h(index.Host, { key: '0b02719eae82077fd11262620f260c86f6ef5854' }, index.h("slot", { key: '809f803bad06e9b9dfab850809709191f8a3bc2e', name: "anchor", ref: el => (this.anchorSlot = el) }), index.h("slot", { key: 'b6e32999e3cb4e4e4e9a4c534a22a17ae7708486', name: "trigger", ref: el => (this.triggerSlot = el) }), index.h("div", { key: '47592ef2faeb4a5ba26185a98952c56c3b0804f6', id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow, justified: this.justify, aligned: !this.justify }, ref: el => (this.content = el) }, index.h("slot", { key: '8b6ba45f55abf7983a66550f161652e5a40205d7', name: "content" }))));
|
|
7798
7806
|
}
|
|
7799
7807
|
get contentId() {
|
|
7800
7808
|
return `cat-dropdown-${this.id}`;
|
|
@@ -7809,18 +7817,12 @@ const CatDropdown = class {
|
|
|
7809
7817
|
this.hasInitialFocus = this.isEventOriginFromKeyboard(event);
|
|
7810
7818
|
this.toggle();
|
|
7811
7819
|
});
|
|
7812
|
-
if (!this.anchor) {
|
|
7813
|
-
autoUpdate(this.trigger, this.content, () => this.update(this.trigger));
|
|
7814
|
-
}
|
|
7815
7820
|
}
|
|
7816
7821
|
isEventOriginFromKeyboard(event) {
|
|
7817
7822
|
return event.detail === 0;
|
|
7818
7823
|
}
|
|
7819
7824
|
initAnchor() {
|
|
7820
7825
|
this.anchor = (this.anchorSlot?.assignedElements?.() || [])[0];
|
|
7821
|
-
if (this.anchor) {
|
|
7822
|
-
autoUpdate(this.anchor, this.content, () => this.update(this.anchor));
|
|
7823
|
-
}
|
|
7824
7826
|
}
|
|
7825
7827
|
findTrigger() {
|
|
7826
7828
|
let trigger;
|
|
@@ -9184,9 +9186,6 @@ const CatSelect = class {
|
|
|
9184
9186
|
if (this.input) {
|
|
9185
9187
|
autosizeInput(this.input, { minWidth: true });
|
|
9186
9188
|
}
|
|
9187
|
-
if (this.trigger && this.dropdown) {
|
|
9188
|
-
autoUpdate(this.trigger, this.dropdown, () => this.update());
|
|
9189
|
-
}
|
|
9190
9189
|
}
|
|
9191
9190
|
componentWillLoad() {
|
|
9192
9191
|
this.onErrorsChanged(this.errors, undefined, false);
|
|
@@ -9377,18 +9376,18 @@ const CatSelect = class {
|
|
|
9377
9376
|
}
|
|
9378
9377
|
render() {
|
|
9379
9378
|
this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
|
|
9380
|
-
return (index.h(index.Host, { key: '
|
|
9379
|
+
return (index.h(index.Host, { key: '044a13b28c3c3d3fcb5b06efa53d489783ae9698' }, index.h("div", { key: 'b540d0b58849b8b401c611dfa08da42f45a7953c', class: {
|
|
9381
9380
|
'select-field': true,
|
|
9382
9381
|
'select-horizontal': this.horizontal ?? this.fallbackHorizontal ?? false,
|
|
9383
9382
|
'select-multiple': this.multiple
|
|
9384
|
-
} }, index.h("div", { key: '
|
|
9383
|
+
} }, index.h("div", { key: '3864749c06c0aa54df1912f90636094dcdd4a229', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { key: 'b2e64f375a8d2e9430007b548f468055a1a83b9b', htmlFor: `select-${this.id}-input`, part: "label" }, index.h("span", { key: '1d09f458ed23045ecbd3ca3b9bb2fa5740f6c4e1', class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { key: '7c569d0f97e2c48d6515e051dd8098003b0dc2c2', name: "label" })) || this.label, index.h("div", { key: 'f3c8709ea17c26d65e41ceb505af51dac81dda37', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: 'f2cc0d4a5fd0d815a1087b7f2b1c55c73ca36e93', class: "label-optional", "aria-hidden": "true" }, "(", index$1.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: 'beb3aaaf8261978be7895a1580a42f25f65ef5e7', class: "label-optional", "aria-hidden": "true" }, "(", index$1.catI18nRegistry.t('input.required'), ")"))))))), index.h("div", { key: '23a30b437dca6aea6d6f01156dc6c56faae3912f', class: "select-container" }, index.h("div", { key: '146509fd8146b3afa9c5157c7a37198c810330d7', class: { 'select-wrapper': true, 'select-disabled': this.disabled, 'select-invalid': this.invalid }, ref: el => (this.trigger = el), id: this.id, role: "combobox", "aria-expanded": this.state.isOpen || this.isPillboxActive(), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-required": this.required ? 'true' : false, "aria-activedescendant": this.activeDescendant, onClick: e => this.onClick(e) }, index.h("div", { key: 'f9f8b2cc0914ba4a7151c580f9e9eda332aad35e', class: "select-wrapper-inner" }, this.multiple && this.state.selection.length ? (index.h("div", { id: `select-pillbox-${this.id}`, role: "listbox", "aria-orientation": "horizontal", class: "select-pills" }, this.state.selection.map((item, i) => (index.h("span", { class: {
|
|
9385
9384
|
pill: true,
|
|
9386
9385
|
'select-no-open': true,
|
|
9387
9386
|
'select-option-active': this.state.activeSelectionIndex === i
|
|
9388
|
-
}, role: "option", "aria-selected": "true", id: `select-${this.id}-selection-${i}` }, item.render.avatar ? (index.h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, icon: item.render.avatar.icon, initials: item.render.avatar.initials ?? '' })) : null, index.h("span", null, item.render.label), !this.disabled && (index.h("cat-button", { size: "xs", variant: "text", icon: "$cat:select-clear", iconOnly: true, a11yLabel: index$1.catI18nRegistry.t('select.deselect'), onClick: () => this.deselect(item.item.id), tabIndex: -1, "data-dropdown-no-close": true }))))))) : this.state.selection.length && this.state.selection[0].render.avatar ? (index.h("cat-avatar", { label: this.state.selection[0].render.label, round: this.state.selection[0].render.avatar.round, src: this.state.selection[0].render.avatar.src, icon: this.state.selection[0].render.avatar.icon, initials: this.state.selection[0].render.avatar.initials ?? '' })) : null, index.h("input", { key: '
|
|
9387
|
+
}, role: "option", "aria-selected": "true", id: `select-${this.id}-selection-${i}` }, item.render.avatar ? (index.h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, icon: item.render.avatar.icon, initials: item.render.avatar.initials ?? '' })) : null, index.h("span", null, item.render.label), !this.disabled && (index.h("cat-button", { size: "xs", variant: "text", icon: "$cat:select-clear", iconOnly: true, a11yLabel: index$1.catI18nRegistry.t('select.deselect'), onClick: () => this.deselect(item.item.id), tabIndex: -1, "data-dropdown-no-close": true }))))))) : this.state.selection.length && this.state.selection[0].render.avatar ? (index.h("cat-avatar", { label: this.state.selection[0].render.label, round: this.state.selection[0].render.avatar.round, src: this.state.selection[0].render.avatar.src, icon: this.state.selection[0].render.avatar.icon, initials: this.state.selection[0].render.avatar.initials ?? '' })) : null, index.h("input", { key: 'ccf158ead3c32c1376744366ccae13d32762e150', "data-test": this.testId, ...this.nativeAttributes, part: "input", id: `select-${this.id}-input`, class: "select-input", role: "combobox", ref: el => (this.input = el), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-activedescendant": this.activeDescendant, "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined, "aria-autocomplete": "list", onInput: this.onInput.bind(this), value: !this.multiple ? this.state.term : undefined, placeholder: this.placeholder, disabled: this.disabled || this.state.isResolving })), this.state.isResolving && index.h("cat-spinner", { key: '8af750f50e620a73f9a35c66708293e758a2786e' }), this.invalid && (index.h("cat-icon", { key: '114ead7c9b473945a1fb2f5774e74d75c57819f5', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), (this.state.selection.length || this.state.term.length) &&
|
|
9389
9388
|
!this.disabled &&
|
|
9390
9389
|
!this.state.isResolving &&
|
|
9391
|
-
this.clearable ? (index.h("cat-button", { id: `select-clear-btn-${this.id}`, iconOnly: true, icon: "$cat:input-close", variant: "text", size: "s", a11yLabel: index$1.catI18nRegistry.t('input.clear'), onCatClick: () => this.clearInput(), "data-dropdown-no-close": true })) : null, !this.state.isResolving && (index.h("cat-button", { key: '
|
|
9390
|
+
this.clearable ? (index.h("cat-button", { id: `select-clear-btn-${this.id}`, iconOnly: true, icon: "$cat:input-close", variant: "text", size: "s", a11yLabel: index$1.catI18nRegistry.t('input.clear'), onCatClick: () => this.clearInput(), "data-dropdown-no-close": true })) : null, !this.state.isResolving && (index.h("cat-button", { key: 'ece4331f89cbb9c37d9f9693800bca1320ff7f37', iconOnly: true, icon: "$cat:select-open", class: { 'select-btn': true, 'select-btn-open': this.state.isOpen }, variant: "text", size: "s", a11yLabel: this.state.isOpen ? index$1.catI18nRegistry.t('select.close') : index$1.catI18nRegistry.t('select.open'), "aria-controls": `select-listbox-${this.id}`, "aria-expanded": this.state.isOpen, tabIndex: -1, disabled: this.disabled || this.state.isResolving, "data-dropdown-no-close": true }))), this.hasHint && (index.h(CatFormHint, { key: 'd25455be1db5404a698b35d088ba0a303215a321', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }), errorMap: this.errorMap })))), index.h("div", { key: 'c58c1914f90b0fb9a7b40c4c37e2fe7d92877ab8', class: "select-dropdown", ref: el => (this.dropdown = el), style: { display: this.state.isOpen ? 'block' : undefined } }, this.state.isOpen && (index.h("cat-scrollable", { key: '73a6a048ba31d8f5944d4a1aa6c8c4fb96e56df2', class: "select-options-wrapper", scrolledBuffer: 56, noOverflowX: true, noOverscroll: true, noScrolledInit: true, onScrolledBottom: () => this.more$.next() }, index.h("ul", { key: '4b86961480022fd7dd0e1641fdaed8116e320090', class: "select-options", role: "listbox", "aria-multiselectable": this.multiple, "aria-setsize": this.state.totalElements, id: `select-listbox-${this.id}` }, this.optionsList, this.state.isFirstLoading
|
|
9392
9391
|
? Array.from(Array(CatSelect.SKELETON_COUNT)).map(() => (index.h("li", { class: "select-option-loading" }, index.h("cat-skeleton", { variant: "body", lines: 1 }), index.h("cat-skeleton", { variant: "body", lines: 1 }))))
|
|
9393
9392
|
: !this.state.options.length &&
|
|
9394
9393
|
!this.tags && (index.h("li", { class: "select-option-empty" }, this.noItems ? this.noItems : index$1.catI18nRegistry.t('select.empty')))))))));
|
|
@@ -9455,6 +9454,9 @@ const CatSelect = class {
|
|
|
9455
9454
|
}
|
|
9456
9455
|
show() {
|
|
9457
9456
|
if (!this.state.isOpen && this.connector) {
|
|
9457
|
+
if (this.trigger && this.dropdown) {
|
|
9458
|
+
this.cleanupFloatingUi = autoUpdate(this.trigger, this.dropdown, () => this.update());
|
|
9459
|
+
}
|
|
9458
9460
|
// reconnect to reset the connection, i.e. the pagination
|
|
9459
9461
|
this.connect(this.connector);
|
|
9460
9462
|
this.patchState({ isOpen: true, isFirstLoading: true, options: [] });
|
|
@@ -9466,6 +9468,8 @@ const CatSelect = class {
|
|
|
9466
9468
|
hide() {
|
|
9467
9469
|
if (this.state.isOpen) {
|
|
9468
9470
|
this.patchState({ isOpen: false, activeOptionIndex: -1 });
|
|
9471
|
+
this.cleanupFloatingUi?.();
|
|
9472
|
+
this.cleanupFloatingUi = undefined;
|
|
9469
9473
|
this.catClose.emit();
|
|
9470
9474
|
return true;
|
|
9471
9475
|
}
|
|
@@ -11443,7 +11447,9 @@ const CatTabs = class {
|
|
|
11443
11447
|
this.tabs = Array.from(this.hostElement.querySelectorAll('cat-tab'));
|
|
11444
11448
|
this.activeTab = this.activeTab || this.tabs.filter(tab => this.canActivate(tab) && !tab.noActive)[0]?.id;
|
|
11445
11449
|
if (this.adaptive) {
|
|
11446
|
-
|
|
11450
|
+
requestAnimationFrame(() => {
|
|
11451
|
+
this.adjustAdaptiveTabs();
|
|
11452
|
+
});
|
|
11447
11453
|
}
|
|
11448
11454
|
}
|
|
11449
11455
|
click(tab) {
|
|
@@ -110,6 +110,10 @@ export class CatDropdown {
|
|
|
110
110
|
this._isOpen = null;
|
|
111
111
|
this.content.style.display = 'block';
|
|
112
112
|
this.hasInitialFocus = isFocusVisible ?? this.hasInitialFocus;
|
|
113
|
+
const trigger = this.anchor || this.trigger;
|
|
114
|
+
if (trigger) {
|
|
115
|
+
this.cleanupFloatingUi = autoUpdate(trigger, this.content, () => this.update(trigger));
|
|
116
|
+
}
|
|
113
117
|
// give CSS transition time to apply
|
|
114
118
|
setTimeout(() => {
|
|
115
119
|
this._isOpen = true;
|
|
@@ -170,6 +174,8 @@ export class CatDropdown {
|
|
|
170
174
|
this.content.classList.remove('show');
|
|
171
175
|
this.content.style.display = '';
|
|
172
176
|
this.trigger?.setAttribute('aria-expanded', 'false');
|
|
177
|
+
this.cleanupFloatingUi?.();
|
|
178
|
+
this.cleanupFloatingUi = undefined;
|
|
173
179
|
this.catClose.emit();
|
|
174
180
|
}, timeTransitionS);
|
|
175
181
|
}
|
|
@@ -182,9 +188,11 @@ export class CatDropdown {
|
|
|
182
188
|
disconnectedCallback() {
|
|
183
189
|
this.trap?.deactivate();
|
|
184
190
|
this.trap = undefined;
|
|
191
|
+
this.cleanupFloatingUi?.();
|
|
192
|
+
this.cleanupFloatingUi = undefined;
|
|
185
193
|
}
|
|
186
194
|
render() {
|
|
187
|
-
return (h(Host, { key: '
|
|
195
|
+
return (h(Host, { key: '0b02719eae82077fd11262620f260c86f6ef5854' }, h("slot", { key: '809f803bad06e9b9dfab850809709191f8a3bc2e', name: "anchor", ref: el => (this.anchorSlot = el) }), h("slot", { key: 'b6e32999e3cb4e4e4e9a4c534a22a17ae7708486', name: "trigger", ref: el => (this.triggerSlot = el) }), h("div", { key: '47592ef2faeb4a5ba26185a98952c56c3b0804f6', id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow, justified: this.justify, aligned: !this.justify }, ref: el => (this.content = el) }, h("slot", { key: '8b6ba45f55abf7983a66550f161652e5a40205d7', name: "content" }))));
|
|
188
196
|
}
|
|
189
197
|
get contentId() {
|
|
190
198
|
return `cat-dropdown-${this.id}`;
|
|
@@ -199,18 +207,12 @@ export class CatDropdown {
|
|
|
199
207
|
this.hasInitialFocus = this.isEventOriginFromKeyboard(event);
|
|
200
208
|
this.toggle();
|
|
201
209
|
});
|
|
202
|
-
if (!this.anchor) {
|
|
203
|
-
autoUpdate(this.trigger, this.content, () => this.update(this.trigger));
|
|
204
|
-
}
|
|
205
210
|
}
|
|
206
211
|
isEventOriginFromKeyboard(event) {
|
|
207
212
|
return event.detail === 0;
|
|
208
213
|
}
|
|
209
214
|
initAnchor() {
|
|
210
215
|
this.anchor = (this.anchorSlot?.assignedElements?.() || [])[0];
|
|
211
|
-
if (this.anchor) {
|
|
212
|
-
autoUpdate(this.anchor, this.content, () => this.update(this.anchor));
|
|
213
|
-
}
|
|
214
216
|
}
|
|
215
217
|
findTrigger() {
|
|
216
218
|
let trigger;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cat-dropdown.js","sourceRoot":"","sources":["../../../src/components/cat-dropdown/cat-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { autoUpdate, computePosition, flip, offset, Placement, ReferenceElement, shift, size } from '@floating-ui/dom';\nimport { timeTransitionS } from '@haiilo/catalyst-tokens';\nimport { Component, Event, EventEmitter, h, Host, Listen, Method, Prop } from '@stencil/core';\nimport * as focusTrap from 'focus-trap';\nimport type { FocusableElement } from 'tabbable';\nimport firstTabbable from '../../utils/first-tabbable';\nimport findFirstTabbableIncludeHidden from '../../utils/first-tabbable-with-visibility-hidden';\n\nlet nextUniqueId = 0;\n\n/**\n * A dropdown component to display a list of actions in a dropdown menu or to\n * show additional content on demand.\n */\n@Component({\n tag: 'cat-dropdown',\n styleUrl: 'cat-dropdown.scss',\n shadow: true\n})\nexport class CatDropdown {\n private static readonly OFFSET = 4;\n private readonly id = nextUniqueId++;\n private triggerSlot!: HTMLSlotElement;\n private trigger?: FocusableElement;\n private anchorSlot!: HTMLSlotElement;\n private anchor?: Element;\n private content!: HTMLElement;\n private trap?: focusTrap.FocusTrap;\n private _isOpen: boolean | null = false;\n /**\n * Tracking the origin of opening the dropdown and specify if initial focus should be set.\n * Currently we set it only when the origin is keyboard.\n * We might not need to track this in future when focus-visible support is improved across browsers\n */\n private hasInitialFocus = false;\n\n /**\n * The placement of the dropdown.\n */\n @Prop() placement: Placement = 'bottom-start';\n\n /**\n * Make the dropdown match the width of the reference regardless of its\n * contents. Note that this only applies to the minimum width of the\n * dropdown. The maximum width is still limited by the viewport.\n */\n @Prop() justify = false;\n\n /**\n * Do not close the dropdown on outside clicks.\n */\n @Prop() noAutoClose = false;\n\n /**\n * Do not navigate focus inside the dropdown via vertical arrow keys.\n */\n @Prop() arrowNavigation: 'horizontal' | 'vertical' | 'none' = 'vertical';\n\n /**\n * Do not change the size of the dropdown to ensure it isn’t too big to fit\n * in the viewport (or more specifically, its clipping context).\n */\n @Prop() noResize = false;\n\n /**\n * Allow overflow when dropdown is open.\n */\n @Prop() overflow = false;\n\n /**\n * No element in dropdown will receive focus when dropdown is open.\n * By default, the first element in tab order will receive a focus.\n * @deprecated\n * Using noInitialFocus property would be a bad practice from a11y perspective.\n * We always want visible focus to jump inside the dropdown when user uses keyboard and noInitialFocus allows to turn it off which might introduce a bug.\n * hasInitialFocus should resolve the cause of the original problem instead.\n */\n @Prop() noInitialFocus = false;\n\n /**\n * Whether the dropdown is open.\n * @readonly\n */\n @Prop() get isOpen(): boolean {\n return this._isOpen ?? false;\n }\n\n /**\n * Trigger element will not receive focus when dropdown is closed.\n */\n @Prop() noReturnFocus = false;\n\n /**\n * Whether the dropdown trigger should be initialized only before first opening.\n * Can be useful when trigger is rendered dynamically.\n */\n @Prop() delayedTriggerInit = false;\n\n /**\n * Emitted when the dropdown is opened.\n */\n @Event() catOpen!: EventEmitter<FocusEvent>;\n\n /**\n * Emitted when the dropdown is closed.\n */\n @Event() catClose!: EventEmitter<FocusEvent>;\n\n @Listen('catClick')\n clickHandler(event: CustomEvent<MouseEvent>) {\n if (!this.trigger && this.delayedTriggerInit) {\n this.hasInitialFocus = this.isEventOriginFromKeyboard(event.detail);\n this.initTrigger();\n this.toggle();\n }\n\n // hide dropdown on button clicks inside the dropdown content\n const path = event.composedPath();\n if (\n !this.noAutoClose &&\n // check if click was inside of the dropdown content\n path.includes(this.content) &&\n // check if click was not on a trigger for a sub-dropdown\n (event.target as Element)?.slot !== 'trigger' &&\n // check if click was not an element marked with data-dropdown-no-close\n !path.slice(0, path.indexOf(this.content)).find(el => this.hasAttribute(el, 'data-dropdown-no-close'))\n ) {\n this.close();\n }\n }\n\n /**\n * Toggles the dropdown.\n */\n @Method()\n async toggle(): Promise<void> {\n this._isOpen ? this.close() : this.open();\n }\n\n /**\n * Opens the dropdown.\n * @param isFocusVisible is dropdown should receive visible focus when it's opened.\n */\n @Method()\n async open(isFocusVisible?: boolean): Promise<void> {\n if (!this.trigger && this.delayedTriggerInit) {\n this.initTrigger();\n }\n\n if (this.isOpen === null || this.isOpen) {\n return; // busy or open\n }\n\n this._isOpen = null;\n this.content.style.display = 'block';\n this.hasInitialFocus = isFocusVisible ?? this.hasInitialFocus;\n // give CSS transition time to apply\n setTimeout(() => {\n this._isOpen = true;\n this.content.classList.add('show');\n this.trigger?.setAttribute('aria-expanded', 'true');\n this.trap = this.trap\n ? this.trap.updateContainerElements(this.content)\n : focusTrap.createFocusTrap(this.content, {\n tabbableOptions: {\n getShadowRoot: true\n },\n allowOutsideClick: true,\n clickOutsideDeactivates: event =>\n !this.noAutoClose &&\n // check if click was outside of the dropdown content\n !event.composedPath().includes(this.content) &&\n // check if click was not on an element marked with data-dropdown-no-close\n !event.composedPath().find(el => this.hasAttribute(el, 'data-dropdown-no-close')),\n onPostDeactivate: () => this.close(),\n onPostActivate: () => this.catOpen.emit(),\n setReturnFocus: elem => (this.noReturnFocus ? false : this.trigger || elem),\n isKeyForward: event => {\n if (\n (this.arrowNavigation === 'horizontal' && event.key === 'ArrowRight') ||\n (this.arrowNavigation === 'vertical' && event.key === 'ArrowDown')\n ) {\n event.preventDefault();\n return true;\n }\n return event.key === 'Tab';\n },\n isKeyBackward: event => {\n if (\n (this.arrowNavigation === 'horizontal' && event.key === 'ArrowLeft') ||\n (this.arrowNavigation === 'vertical' && event.key === 'ArrowUp')\n ) {\n event.preventDefault();\n return true;\n }\n return event.key === 'Tab' && event.shiftKey;\n },\n initialFocus: () => {\n return this.hasInitialFocus && !this.noInitialFocus ? undefined : false;\n }\n });\n this.trap.activate();\n });\n }\n\n /**\n * Closes the dropdown.\n */\n @Method()\n async close(): Promise<void> {\n if (!this._isOpen) {\n return; // busy or closed\n }\n\n this._isOpen = null;\n this.trap?.deactivate();\n this.trap = undefined;\n this.content.classList.remove('show');\n // give CSS transition time to apply\n setTimeout(() => {\n this._isOpen = false;\n this.content.classList.remove('show');\n this.content.style.display = '';\n this.trigger?.setAttribute('aria-expanded', 'false');\n this.catClose.emit();\n }, timeTransitionS);\n }\n\n componentDidLoad() {\n this.initAnchor();\n if (!this.delayedTriggerInit) {\n this.initTrigger();\n }\n }\n\n disconnectedCallback() {\n this.trap?.deactivate();\n this.trap = undefined;\n }\n\n render() {\n return (\n <Host>\n <slot name=\"anchor\" ref={el => (this.anchorSlot = el as HTMLSlotElement)}></slot>\n <slot name=\"trigger\" ref={el => (this.triggerSlot = el as HTMLSlotElement)}></slot>\n <div\n id={this.contentId}\n class={{ content: true, 'overflow-auto': !this.overflow, justified: this.justify, aligned: !this.justify }}\n ref={el => (this.content = el as HTMLElement)}\n >\n <slot name=\"content\"></slot>\n </div>\n </Host>\n );\n }\n\n private get contentId() {\n return `cat-dropdown-${this.id}`;\n }\n\n private initTrigger() {\n this.trigger = this.findTrigger();\n const ariaHaspopup = this.trigger.getAttribute('aria-haspopup');\n this.trigger.setAttribute('aria-haspopup', ariaHaspopup ?? 'true');\n this.trigger.setAttribute('aria-expanded', 'false');\n this.trigger.setAttribute('aria-controls', this.contentId);\n this.trigger.addEventListener('click', (event: Event) => {\n this.hasInitialFocus = this.isEventOriginFromKeyboard(event as UIEvent);\n this.toggle();\n });\n if (!this.anchor) {\n autoUpdate(this.trigger, this.content, () => this.update(this.trigger));\n }\n }\n\n private isEventOriginFromKeyboard(event: UIEvent): boolean {\n return event.detail === 0;\n }\n\n private initAnchor() {\n this.anchor = (this.anchorSlot?.assignedElements?.() || [])[0];\n if (this.anchor) {\n autoUpdate(this.anchor, this.content, () => this.update(this.anchor));\n }\n }\n\n private findTrigger() {\n let trigger: FocusableElement | undefined;\n let elems = this.triggerSlot?.assignedElements?.() || [];\n while (!trigger && elems.length) {\n const elem = elems.shift();\n trigger = elem?.hasAttribute('data-trigger')\n ? (elem as HTMLElement)\n : (elem?.querySelector('[data-trigger]') ?? undefined);\n }\n if (!trigger) {\n trigger = firstTabbable(this.triggerSlot);\n }\n // if no tabbable element is still found let's attempt to search through elements with visibility:hidden styles\n // which stencil assigns to component in prehydration state\n if (!trigger) {\n elems = this.triggerSlot?.assignedElements?.() || [];\n while (!trigger && elems.length) {\n const elem = elems.shift();\n trigger = findFirstTabbableIncludeHidden(elem as HTMLElement);\n }\n }\n if (!trigger) {\n throw new Error('Cannot find tabbable element. Use [data-trigger] to set the trigger.');\n }\n return trigger;\n }\n\n private update(anchorElement: ReferenceElement | undefined, justify = this.justify) {\n if (anchorElement) {\n const resize = this.noResize\n ? []\n : [\n size({\n padding: CatDropdown.OFFSET,\n apply({ rects, availableWidth, availableHeight, elements }) {\n if (justify) {\n Object.assign(elements.floating.style, {\n minWidth: `${rects.reference.width}px`,\n maxWidth: `${rects.reference.width}px`,\n maxHeight: `${availableHeight}px`\n });\n } else {\n Object.assign(elements.floating.style, {\n maxWidth: `${availableWidth}px`,\n maxHeight: `${availableHeight}px`\n });\n }\n }\n })\n ];\n computePosition(anchorElement, this.content, {\n strategy: 'fixed',\n placement: this.placement,\n middleware: [offset(CatDropdown.OFFSET), flip(), shift(), ...resize]\n }).then(({ x, y, placement }) => {\n this.content.dataset.placement = placement;\n Object.assign(this.content.style, {\n left: `${x}px`,\n top: `${y}px`\n });\n });\n }\n }\n\n private hasAttribute(elem: EventTarget, attr: string) {\n return elem instanceof HTMLElement && elem.hasAttribute(attr);\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"cat-dropdown.js","sourceRoot":"","sources":["../../../src/components/cat-dropdown/cat-dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,IAAI,EAAE,MAAM,EAA+B,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACvH,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC9F,OAAO,KAAK,SAAS,MAAM,YAAY,CAAC;AAExC,OAAO,aAAa,MAAM,4BAA4B,CAAC;AACvD,OAAO,8BAA8B,MAAM,mDAAmD,CAAC;AAE/F,IAAI,YAAY,GAAG,CAAC,CAAC;AAErB;;;GAGG;AAMH,MAAM,OAAO,WAAW;IALxB;QAOmB,OAAE,GAAG,YAAY,EAAE,CAAC;QAO7B,YAAO,GAAmB,KAAK,CAAC;QAExC;;;;WAIG;QACK,oBAAe,GAAG,KAAK,CAAC;QAEhC;;WAEG;QACK,cAAS,GAAc,cAAc,CAAC;QAE9C;;;;WAIG;QACK,YAAO,GAAG,KAAK,CAAC;QAExB;;WAEG;QACK,gBAAW,GAAG,KAAK,CAAC;QAE5B;;WAEG;QACK,oBAAe,GAAuC,UAAU,CAAC;QAEzE;;;WAGG;QACK,aAAQ,GAAG,KAAK,CAAC;QAEzB;;WAEG;QACK,aAAQ,GAAG,KAAK,CAAC;QAEzB;;;;;;;WAOG;QACK,mBAAc,GAAG,KAAK,CAAC;QAU/B;;WAEG;QACK,kBAAa,GAAG,KAAK,CAAC;QAE9B;;;WAGG;QACK,uBAAkB,GAAG,KAAK,CAAC;KAoQpC;IArRC;;;OAGG;IACH,IAAY,MAAM;QAChB,OAAO,IAAI,CAAC,OAAO,IAAI,KAAK,CAAC;IAC/B,CAAC;IAwBD,YAAY,CAAC,KAA8B;QACzC,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAC7C,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,yBAAyB,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;YACpE,IAAI,CAAC,WAAW,EAAE,CAAC;YACnB,IAAI,CAAC,MAAM,EAAE,CAAC;QAChB,CAAC;QAED,6DAA6D;QAC7D,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;QAClC,IACE,CAAC,IAAI,CAAC,WAAW;YACjB,oDAAoD;YACpD,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC;YAC3B,yDAAyD;YACxD,KAAK,CAAC,MAAkB,EAAE,IAAI,KAAK,SAAS;YAC7C,uEAAuE;YACvE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,EAAE,wBAAwB,CAAC,CAAC,EACtG,CAAC;YACD,IAAI,CAAC,KAAK,EAAE,CAAC;QACf,CAAC;IACH,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,MAAM;QACV,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;IAC5C,CAAC;IAED;;;OAGG;IAEH,KAAK,CAAC,IAAI,CAAC,cAAwB;QACjC,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAC7C,IAAI,CAAC,WAAW,EAAE,CAAC;QACrB,CAAC;QAED,IAAI,IAAI,CAAC,MAAM,KAAK,IAAI,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YACxC,OAAO,CAAC,eAAe;QACzB,CAAC;QAED,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACpB,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;QACrC,IAAI,CAAC,eAAe,GAAG,cAAc,IAAI,IAAI,CAAC,eAAe,CAAC;QAE9D,MAAM,OAAO,GAAG,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,OAAO,CAAC;QAC5C,IAAI,OAAO,EAAE,CAAC;YACZ,IAAI,CAAC,iBAAiB,GAAG,UAAU,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;QACzF,CAAC;QACD,oCAAoC;QACpC,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;YACnC,IAAI,CAAC,OAAO,EAAE,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;YACpD,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI;gBACnB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,OAAO,CAAC;gBACjD,CAAC,CAAC,SAAS,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,EAAE;oBACtC,eAAe,EAAE;wBACf,aAAa,EAAE,IAAI;qBACpB;oBACD,iBAAiB,EAAE,IAAI;oBACvB,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAC/B,CAAC,IAAI,CAAC,WAAW;wBACjB,qDAAqD;wBACrD,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC;wBAC5C,0EAA0E;wBAC1E,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,EAAE,wBAAwB,CAAC,CAAC;oBACnF,gBAAgB,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE;oBACpC,cAAc,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;oBACzC,cAAc,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC;oBAC3E,YAAY,EAAE,KAAK,CAAC,EAAE;wBACpB,IACE,CAAC,IAAI,CAAC,eAAe,KAAK,YAAY,IAAI,KAAK,CAAC,GAAG,KAAK,YAAY,CAAC;4BACrE,CAAC,IAAI,CAAC,eAAe,KAAK,UAAU,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,CAAC,EAClE,CAAC;4BACD,KAAK,CAAC,cAAc,EAAE,CAAC;4BACvB,OAAO,IAAI,CAAC;wBACd,CAAC;wBACD,OAAO,KAAK,CAAC,GAAG,KAAK,KAAK,CAAC;oBAC7B,CAAC;oBACD,aAAa,EAAE,KAAK,CAAC,EAAE;wBACrB,IACE,CAAC,IAAI,CAAC,eAAe,KAAK,YAAY,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,CAAC;4BACpE,CAAC,IAAI,CAAC,eAAe,KAAK,UAAU,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,CAAC,EAChE,CAAC;4BACD,KAAK,CAAC,cAAc,EAAE,CAAC;4BACvB,OAAO,IAAI,CAAC;wBACd,CAAC;wBACD,OAAO,KAAK,CAAC,GAAG,KAAK,KAAK,IAAI,KAAK,CAAC,QAAQ,CAAC;oBAC/C,CAAC;oBACD,YAAY,EAAE,GAAG,EAAE;wBACjB,OAAO,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC;oBAC1E,CAAC;iBACF,CAAC,CAAC;YACP,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;QACvB,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,KAAK;QACT,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,OAAO,CAAC,iBAAiB;QAC3B,CAAC;QAED,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACpB,IAAI,CAAC,IAAI,EAAE,UAAU,EAAE,CAAC;QACxB,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC;QACtB,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;QACtC,oCAAoC;QACpC,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;YACrB,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;YACtC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC;YAChC,IAAI,CAAC,OAAO,EAAE,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;YACrD,IAAI,CAAC,iBAAiB,EAAE,EAAE,CAAC;YAC3B,IAAI,CAAC,iBAAiB,GAAG,SAAS,CAAC;YACnC,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;QACvB,CAAC,EAAE,eAAe,CAAC,CAAC;IACtB,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,UAAU,EAAE,CAAC;QAClB,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAC7B,IAAI,CAAC,WAAW,EAAE,CAAC;QACrB,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,IAAI,EAAE,UAAU,EAAE,CAAC;QACxB,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC;QACtB,IAAI,CAAC,iBAAiB,EAAE,EAAE,CAAC;QAC3B,IAAI,CAAC,iBAAiB,GAAG,SAAS,CAAC;IACrC,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,6DAAM,IAAI,EAAC,QAAQ,EAAC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,EAAqB,CAAC,GAAS;YACjF,6DAAM,IAAI,EAAC,SAAS,EAAC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,EAAqB,CAAC,GAAS;YACnF,4DACE,EAAE,EAAE,IAAI,CAAC,SAAS,EAClB,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,SAAS,EAAE,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,EAC1G,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,EAAiB,CAAC;gBAE7C,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACD,CACR,CAAC;IACJ,CAAC;IAED,IAAY,SAAS;QACnB,OAAO,gBAAgB,IAAI,CAAC,EAAE,EAAE,CAAC;IACnC,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAClC,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC;QAChE,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,eAAe,EAAE,YAAY,IAAI,MAAM,CAAC,CAAC;QACnE,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;QACpD,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,eAAe,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;QAC3D,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,KAAY,EAAE,EAAE;YACtD,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,yBAAyB,CAAC,KAAgB,CAAC,CAAC;YACxE,IAAI,CAAC,MAAM,EAAE,CAAC;QAChB,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,yBAAyB,CAAC,KAAc;QAC9C,OAAO,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC;IAC5B,CAAC;IAEO,UAAU;QAChB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,UAAU,EAAE,gBAAgB,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;IACjE,CAAC;IAEO,WAAW;QACjB,IAAI,OAAqC,CAAC;QAC1C,IAAI,KAAK,GAAG,IAAI,CAAC,WAAW,EAAE,gBAAgB,EAAE,EAAE,IAAI,EAAE,CAAC;QACzD,OAAO,CAAC,OAAO,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;YAChC,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,EAAE,CAAC;YAC3B,OAAO,GAAG,IAAI,EAAE,YAAY,CAAC,cAAc,CAAC;gBAC1C,CAAC,CAAE,IAAoB;gBACvB,CAAC,CAAC,CAAC,IAAI,EAAE,aAAa,CAAC,gBAAgB,CAAC,IAAI,SAAS,CAAC,CAAC;QAC3D,CAAC;QACD,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,OAAO,GAAG,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC5C,CAAC;QACD,+GAA+G;QAC/G,2DAA2D;QAC3D,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,KAAK,GAAG,IAAI,CAAC,WAAW,EAAE,gBAAgB,EAAE,EAAE,IAAI,EAAE,CAAC;YACrD,OAAO,CAAC,OAAO,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;gBAChC,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,EAAE,CAAC;gBAC3B,OAAO,GAAG,8BAA8B,CAAC,IAAmB,CAAC,CAAC;YAChE,CAAC;QACH,CAAC;QACD,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,MAAM,IAAI,KAAK,CAAC,sEAAsE,CAAC,CAAC;QAC1F,CAAC;QACD,OAAO,OAAO,CAAC;IACjB,CAAC;IAEO,MAAM,CAAC,aAA2C,EAAE,OAAO,GAAG,IAAI,CAAC,OAAO;QAChF,IAAI,aAAa,EAAE,CAAC;YAClB,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ;gBAC1B,CAAC,CAAC,EAAE;gBACJ,CAAC,CAAC;oBACE,IAAI,CAAC;wBACH,OAAO,EAAE,WAAW,CAAC,MAAM;wBAC3B,KAAK,CAAC,EAAE,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,QAAQ,EAAE;4BACxD,IAAI,OAAO,EAAE,CAAC;gCACZ,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK,EAAE;oCACrC,QAAQ,EAAE,GAAG,KAAK,CAAC,SAAS,CAAC,KAAK,IAAI;oCACtC,QAAQ,EAAE,GAAG,KAAK,CAAC,SAAS,CAAC,KAAK,IAAI;oCACtC,SAAS,EAAE,GAAG,eAAe,IAAI;iCAClC,CAAC,CAAC;4BACL,CAAC;iCAAM,CAAC;gCACN,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK,EAAE;oCACrC,QAAQ,EAAE,GAAG,cAAc,IAAI;oCAC/B,SAAS,EAAE,GAAG,eAAe,IAAI;iCAClC,CAAC,CAAC;4BACL,CAAC;wBACH,CAAC;qBACF,CAAC;iBACH,CAAC;YACN,eAAe,CAAC,aAAa,EAAE,IAAI,CAAC,OAAO,EAAE;gBAC3C,QAAQ,EAAE,OAAO;gBACjB,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,UAAU,EAAE,CAAC,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE,GAAG,MAAM,CAAC;aACrE,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE;gBAC9B,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,SAAS,GAAG,SAAS,CAAC;gBAC3C,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE;oBAChC,IAAI,EAAE,GAAG,CAAC,IAAI;oBACd,GAAG,EAAE,GAAG,CAAC,IAAI;iBACd,CAAC,CAAC;YACL,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAEO,YAAY,CAAC,IAAiB,EAAE,IAAY;QAClD,OAAO,IAAI,YAAY,WAAW,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;IAChE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAhVuB,kBAAM,GAAG,CAAC,AAAJ,CAAK","sourcesContent":["import { autoUpdate, computePosition, flip, offset, Placement, ReferenceElement, shift, size } from '@floating-ui/dom';\nimport { timeTransitionS } from '@haiilo/catalyst-tokens';\nimport { Component, Event, EventEmitter, h, Host, Listen, Method, Prop } from '@stencil/core';\nimport * as focusTrap from 'focus-trap';\nimport type { FocusableElement } from 'tabbable';\nimport firstTabbable from '../../utils/first-tabbable';\nimport findFirstTabbableIncludeHidden from '../../utils/first-tabbable-with-visibility-hidden';\n\nlet nextUniqueId = 0;\n\n/**\n * A dropdown component to display a list of actions in a dropdown menu or to\n * show additional content on demand.\n */\n@Component({\n tag: 'cat-dropdown',\n styleUrl: 'cat-dropdown.scss',\n shadow: true\n})\nexport class CatDropdown {\n private static readonly OFFSET = 4;\n private readonly id = nextUniqueId++;\n private triggerSlot!: HTMLSlotElement;\n private trigger?: FocusableElement;\n private anchorSlot!: HTMLSlotElement;\n private anchor?: Element;\n private content!: HTMLElement;\n private trap?: focusTrap.FocusTrap;\n private _isOpen: boolean | null = false;\n private cleanupFloatingUi?: () => void;\n /**\n * Tracking the origin of opening the dropdown and specify if initial focus should be set.\n * Currently we set it only when the origin is keyboard.\n * We might not need to track this in future when focus-visible support is improved across browsers\n */\n private hasInitialFocus = false;\n\n /**\n * The placement of the dropdown.\n */\n @Prop() placement: Placement = 'bottom-start';\n\n /**\n * Make the dropdown match the width of the reference regardless of its\n * contents. Note that this only applies to the minimum width of the\n * dropdown. The maximum width is still limited by the viewport.\n */\n @Prop() justify = false;\n\n /**\n * Do not close the dropdown on outside clicks.\n */\n @Prop() noAutoClose = false;\n\n /**\n * Do not navigate focus inside the dropdown via vertical arrow keys.\n */\n @Prop() arrowNavigation: 'horizontal' | 'vertical' | 'none' = 'vertical';\n\n /**\n * Do not change the size of the dropdown to ensure it isn’t too big to fit\n * in the viewport (or more specifically, its clipping context).\n */\n @Prop() noResize = false;\n\n /**\n * Allow overflow when dropdown is open.\n */\n @Prop() overflow = false;\n\n /**\n * No element in dropdown will receive focus when dropdown is open.\n * By default, the first element in tab order will receive a focus.\n * @deprecated\n * Using noInitialFocus property would be a bad practice from a11y perspective.\n * We always want visible focus to jump inside the dropdown when user uses keyboard and noInitialFocus allows to turn it off which might introduce a bug.\n * hasInitialFocus should resolve the cause of the original problem instead.\n */\n @Prop() noInitialFocus = false;\n\n /**\n * Whether the dropdown is open.\n * @readonly\n */\n @Prop() get isOpen(): boolean {\n return this._isOpen ?? false;\n }\n\n /**\n * Trigger element will not receive focus when dropdown is closed.\n */\n @Prop() noReturnFocus = false;\n\n /**\n * Whether the dropdown trigger should be initialized only before first opening.\n * Can be useful when trigger is rendered dynamically.\n */\n @Prop() delayedTriggerInit = false;\n\n /**\n * Emitted when the dropdown is opened.\n */\n @Event() catOpen!: EventEmitter<FocusEvent>;\n\n /**\n * Emitted when the dropdown is closed.\n */\n @Event() catClose!: EventEmitter<FocusEvent>;\n\n @Listen('catClick')\n clickHandler(event: CustomEvent<MouseEvent>) {\n if (!this.trigger && this.delayedTriggerInit) {\n this.hasInitialFocus = this.isEventOriginFromKeyboard(event.detail);\n this.initTrigger();\n this.toggle();\n }\n\n // hide dropdown on button clicks inside the dropdown content\n const path = event.composedPath();\n if (\n !this.noAutoClose &&\n // check if click was inside of the dropdown content\n path.includes(this.content) &&\n // check if click was not on a trigger for a sub-dropdown\n (event.target as Element)?.slot !== 'trigger' &&\n // check if click was not an element marked with data-dropdown-no-close\n !path.slice(0, path.indexOf(this.content)).find(el => this.hasAttribute(el, 'data-dropdown-no-close'))\n ) {\n this.close();\n }\n }\n\n /**\n * Toggles the dropdown.\n */\n @Method()\n async toggle(): Promise<void> {\n this._isOpen ? this.close() : this.open();\n }\n\n /**\n * Opens the dropdown.\n * @param isFocusVisible is dropdown should receive visible focus when it's opened.\n */\n @Method()\n async open(isFocusVisible?: boolean): Promise<void> {\n if (!this.trigger && this.delayedTriggerInit) {\n this.initTrigger();\n }\n\n if (this.isOpen === null || this.isOpen) {\n return; // busy or open\n }\n\n this._isOpen = null;\n this.content.style.display = 'block';\n this.hasInitialFocus = isFocusVisible ?? this.hasInitialFocus;\n\n const trigger = this.anchor || this.trigger;\n if (trigger) {\n this.cleanupFloatingUi = autoUpdate(trigger, this.content, () => this.update(trigger));\n }\n // give CSS transition time to apply\n setTimeout(() => {\n this._isOpen = true;\n this.content.classList.add('show');\n this.trigger?.setAttribute('aria-expanded', 'true');\n this.trap = this.trap\n ? this.trap.updateContainerElements(this.content)\n : focusTrap.createFocusTrap(this.content, {\n tabbableOptions: {\n getShadowRoot: true\n },\n allowOutsideClick: true,\n clickOutsideDeactivates: event =>\n !this.noAutoClose &&\n // check if click was outside of the dropdown content\n !event.composedPath().includes(this.content) &&\n // check if click was not on an element marked with data-dropdown-no-close\n !event.composedPath().find(el => this.hasAttribute(el, 'data-dropdown-no-close')),\n onPostDeactivate: () => this.close(),\n onPostActivate: () => this.catOpen.emit(),\n setReturnFocus: elem => (this.noReturnFocus ? false : this.trigger || elem),\n isKeyForward: event => {\n if (\n (this.arrowNavigation === 'horizontal' && event.key === 'ArrowRight') ||\n (this.arrowNavigation === 'vertical' && event.key === 'ArrowDown')\n ) {\n event.preventDefault();\n return true;\n }\n return event.key === 'Tab';\n },\n isKeyBackward: event => {\n if (\n (this.arrowNavigation === 'horizontal' && event.key === 'ArrowLeft') ||\n (this.arrowNavigation === 'vertical' && event.key === 'ArrowUp')\n ) {\n event.preventDefault();\n return true;\n }\n return event.key === 'Tab' && event.shiftKey;\n },\n initialFocus: () => {\n return this.hasInitialFocus && !this.noInitialFocus ? undefined : false;\n }\n });\n this.trap.activate();\n });\n }\n\n /**\n * Closes the dropdown.\n */\n @Method()\n async close(): Promise<void> {\n if (!this._isOpen) {\n return; // busy or closed\n }\n\n this._isOpen = null;\n this.trap?.deactivate();\n this.trap = undefined;\n this.content.classList.remove('show');\n // give CSS transition time to apply\n setTimeout(() => {\n this._isOpen = false;\n this.content.classList.remove('show');\n this.content.style.display = '';\n this.trigger?.setAttribute('aria-expanded', 'false');\n this.cleanupFloatingUi?.();\n this.cleanupFloatingUi = undefined;\n this.catClose.emit();\n }, timeTransitionS);\n }\n\n componentDidLoad() {\n this.initAnchor();\n if (!this.delayedTriggerInit) {\n this.initTrigger();\n }\n }\n\n disconnectedCallback() {\n this.trap?.deactivate();\n this.trap = undefined;\n this.cleanupFloatingUi?.();\n this.cleanupFloatingUi = undefined;\n }\n\n render() {\n return (\n <Host>\n <slot name=\"anchor\" ref={el => (this.anchorSlot = el as HTMLSlotElement)}></slot>\n <slot name=\"trigger\" ref={el => (this.triggerSlot = el as HTMLSlotElement)}></slot>\n <div\n id={this.contentId}\n class={{ content: true, 'overflow-auto': !this.overflow, justified: this.justify, aligned: !this.justify }}\n ref={el => (this.content = el as HTMLElement)}\n >\n <slot name=\"content\"></slot>\n </div>\n </Host>\n );\n }\n\n private get contentId() {\n return `cat-dropdown-${this.id}`;\n }\n\n private initTrigger() {\n this.trigger = this.findTrigger();\n const ariaHaspopup = this.trigger.getAttribute('aria-haspopup');\n this.trigger.setAttribute('aria-haspopup', ariaHaspopup ?? 'true');\n this.trigger.setAttribute('aria-expanded', 'false');\n this.trigger.setAttribute('aria-controls', this.contentId);\n this.trigger.addEventListener('click', (event: Event) => {\n this.hasInitialFocus = this.isEventOriginFromKeyboard(event as UIEvent);\n this.toggle();\n });\n }\n\n private isEventOriginFromKeyboard(event: UIEvent): boolean {\n return event.detail === 0;\n }\n\n private initAnchor() {\n this.anchor = (this.anchorSlot?.assignedElements?.() || [])[0];\n }\n\n private findTrigger() {\n let trigger: FocusableElement | undefined;\n let elems = this.triggerSlot?.assignedElements?.() || [];\n while (!trigger && elems.length) {\n const elem = elems.shift();\n trigger = elem?.hasAttribute('data-trigger')\n ? (elem as HTMLElement)\n : (elem?.querySelector('[data-trigger]') ?? undefined);\n }\n if (!trigger) {\n trigger = firstTabbable(this.triggerSlot);\n }\n // if no tabbable element is still found let's attempt to search through elements with visibility:hidden styles\n // which stencil assigns to component in prehydration state\n if (!trigger) {\n elems = this.triggerSlot?.assignedElements?.() || [];\n while (!trigger && elems.length) {\n const elem = elems.shift();\n trigger = findFirstTabbableIncludeHidden(elem as HTMLElement);\n }\n }\n if (!trigger) {\n throw new Error('Cannot find tabbable element. Use [data-trigger] to set the trigger.');\n }\n return trigger;\n }\n\n private update(anchorElement: ReferenceElement | undefined, justify = this.justify) {\n if (anchorElement) {\n const resize = this.noResize\n ? []\n : [\n size({\n padding: CatDropdown.OFFSET,\n apply({ rects, availableWidth, availableHeight, elements }) {\n if (justify) {\n Object.assign(elements.floating.style, {\n minWidth: `${rects.reference.width}px`,\n maxWidth: `${rects.reference.width}px`,\n maxHeight: `${availableHeight}px`\n });\n } else {\n Object.assign(elements.floating.style, {\n maxWidth: `${availableWidth}px`,\n maxHeight: `${availableHeight}px`\n });\n }\n }\n })\n ];\n computePosition(anchorElement, this.content, {\n strategy: 'fixed',\n placement: this.placement,\n middleware: [offset(CatDropdown.OFFSET), flip(), shift(), ...resize]\n }).then(({ x, y, placement }) => {\n this.content.dataset.placement = placement;\n Object.assign(this.content.style, {\n left: `${x}px`,\n top: `${y}px`\n });\n });\n }\n }\n\n private hasAttribute(elem: EventTarget, attr: string) {\n return elem instanceof HTMLElement && elem.hasAttribute(attr);\n }\n}\n"]}
|
|
@@ -156,9 +156,6 @@ export class CatSelect {
|
|
|
156
156
|
if (this.input) {
|
|
157
157
|
autosizeInput(this.input, { minWidth: true });
|
|
158
158
|
}
|
|
159
|
-
if (this.trigger && this.dropdown) {
|
|
160
|
-
autoUpdate(this.trigger, this.dropdown, () => this.update());
|
|
161
|
-
}
|
|
162
159
|
}
|
|
163
160
|
componentWillLoad() {
|
|
164
161
|
this.onErrorsChanged(this.errors, undefined, false);
|
|
@@ -349,18 +346,18 @@ export class CatSelect {
|
|
|
349
346
|
}
|
|
350
347
|
render() {
|
|
351
348
|
this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
|
|
352
|
-
return (h(Host, { key: '
|
|
349
|
+
return (h(Host, { key: '044a13b28c3c3d3fcb5b06efa53d489783ae9698' }, h("div", { key: 'b540d0b58849b8b401c611dfa08da42f45a7953c', class: {
|
|
353
350
|
'select-field': true,
|
|
354
351
|
'select-horizontal': this.horizontal ?? this.fallbackHorizontal ?? false,
|
|
355
352
|
'select-multiple': this.multiple
|
|
356
|
-
} }, h("div", { key: '
|
|
353
|
+
} }, h("div", { key: '3864749c06c0aa54df1912f90636094dcdd4a229', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: 'b2e64f375a8d2e9430007b548f468055a1a83b9b', htmlFor: `select-${this.id}-input`, part: "label" }, h("span", { key: '1d09f458ed23045ecbd3ca3b9bb2fa5740f6c4e1', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: '7c569d0f97e2c48d6515e051dd8098003b0dc2c2', name: "label" })) || this.label, h("div", { key: 'f3c8709ea17c26d65e41ceb505af51dac81dda37', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: 'f2cc0d4a5fd0d815a1087b7f2b1c55c73ca36e93', class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: 'beb3aaaf8261978be7895a1580a42f25f65ef5e7', class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.required'), ")"))))))), h("div", { key: '23a30b437dca6aea6d6f01156dc6c56faae3912f', class: "select-container" }, h("div", { key: '146509fd8146b3afa9c5157c7a37198c810330d7', class: { 'select-wrapper': true, 'select-disabled': this.disabled, 'select-invalid': this.invalid }, ref: el => (this.trigger = el), id: this.id, role: "combobox", "aria-expanded": this.state.isOpen || this.isPillboxActive(), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-required": this.required ? 'true' : false, "aria-activedescendant": this.activeDescendant, onClick: e => this.onClick(e) }, h("div", { key: 'f9f8b2cc0914ba4a7151c580f9e9eda332aad35e', class: "select-wrapper-inner" }, this.multiple && this.state.selection.length ? (h("div", { id: `select-pillbox-${this.id}`, role: "listbox", "aria-orientation": "horizontal", class: "select-pills" }, this.state.selection.map((item, i) => (h("span", { class: {
|
|
357
354
|
pill: true,
|
|
358
355
|
'select-no-open': true,
|
|
359
356
|
'select-option-active': this.state.activeSelectionIndex === i
|
|
360
|
-
}, role: "option", "aria-selected": "true", id: `select-${this.id}-selection-${i}` }, item.render.avatar ? (h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, icon: item.render.avatar.icon, initials: item.render.avatar.initials ?? '' })) : null, h("span", null, item.render.label), !this.disabled && (h("cat-button", { size: "xs", variant: "text", icon: "$cat:select-clear", iconOnly: true, a11yLabel: i18n.t('select.deselect'), onClick: () => this.deselect(item.item.id), tabIndex: -1, "data-dropdown-no-close": true }))))))) : this.state.selection.length && this.state.selection[0].render.avatar ? (h("cat-avatar", { label: this.state.selection[0].render.label, round: this.state.selection[0].render.avatar.round, src: this.state.selection[0].render.avatar.src, icon: this.state.selection[0].render.avatar.icon, initials: this.state.selection[0].render.avatar.initials ?? '' })) : null, h("input", { key: '
|
|
357
|
+
}, role: "option", "aria-selected": "true", id: `select-${this.id}-selection-${i}` }, item.render.avatar ? (h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, icon: item.render.avatar.icon, initials: item.render.avatar.initials ?? '' })) : null, h("span", null, item.render.label), !this.disabled && (h("cat-button", { size: "xs", variant: "text", icon: "$cat:select-clear", iconOnly: true, a11yLabel: i18n.t('select.deselect'), onClick: () => this.deselect(item.item.id), tabIndex: -1, "data-dropdown-no-close": true }))))))) : this.state.selection.length && this.state.selection[0].render.avatar ? (h("cat-avatar", { label: this.state.selection[0].render.label, round: this.state.selection[0].render.avatar.round, src: this.state.selection[0].render.avatar.src, icon: this.state.selection[0].render.avatar.icon, initials: this.state.selection[0].render.avatar.initials ?? '' })) : null, h("input", { key: 'ccf158ead3c32c1376744366ccae13d32762e150', "data-test": this.testId, ...this.nativeAttributes, part: "input", id: `select-${this.id}-input`, class: "select-input", role: "combobox", ref: el => (this.input = el), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-activedescendant": this.activeDescendant, "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined, "aria-autocomplete": "list", onInput: this.onInput.bind(this), value: !this.multiple ? this.state.term : undefined, placeholder: this.placeholder, disabled: this.disabled || this.state.isResolving })), this.state.isResolving && h("cat-spinner", { key: '8af750f50e620a73f9a35c66708293e758a2786e' }), this.invalid && (h("cat-icon", { key: '114ead7c9b473945a1fb2f5774e74d75c57819f5', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), (this.state.selection.length || this.state.term.length) &&
|
|
361
358
|
!this.disabled &&
|
|
362
359
|
!this.state.isResolving &&
|
|
363
|
-
this.clearable ? (h("cat-button", { id: `select-clear-btn-${this.id}`, iconOnly: true, icon: "$cat:input-close", variant: "text", size: "s", a11yLabel: i18n.t('input.clear'), onCatClick: () => this.clearInput(), "data-dropdown-no-close": true })) : null, !this.state.isResolving && (h("cat-button", { key: '
|
|
360
|
+
this.clearable ? (h("cat-button", { id: `select-clear-btn-${this.id}`, iconOnly: true, icon: "$cat:input-close", variant: "text", size: "s", a11yLabel: i18n.t('input.clear'), onCatClick: () => this.clearInput(), "data-dropdown-no-close": true })) : null, !this.state.isResolving && (h("cat-button", { key: 'ece4331f89cbb9c37d9f9693800bca1320ff7f37', iconOnly: true, icon: "$cat:select-open", class: { 'select-btn': true, 'select-btn-open': this.state.isOpen }, variant: "text", size: "s", a11yLabel: this.state.isOpen ? i18n.t('select.close') : i18n.t('select.open'), "aria-controls": `select-listbox-${this.id}`, "aria-expanded": this.state.isOpen, tabIndex: -1, disabled: this.disabled || this.state.isResolving, "data-dropdown-no-close": true }))), this.hasHint && (h(CatFormHint, { key: 'd25455be1db5404a698b35d088ba0a303215a321', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap })))), h("div", { key: 'c58c1914f90b0fb9a7b40c4c37e2fe7d92877ab8', class: "select-dropdown", ref: el => (this.dropdown = el), style: { display: this.state.isOpen ? 'block' : undefined } }, this.state.isOpen && (h("cat-scrollable", { key: '73a6a048ba31d8f5944d4a1aa6c8c4fb96e56df2', class: "select-options-wrapper", scrolledBuffer: 56, noOverflowX: true, noOverscroll: true, noScrolledInit: true, onScrolledBottom: () => this.more$.next() }, h("ul", { key: '4b86961480022fd7dd0e1641fdaed8116e320090', class: "select-options", role: "listbox", "aria-multiselectable": this.multiple, "aria-setsize": this.state.totalElements, id: `select-listbox-${this.id}` }, this.optionsList, this.state.isFirstLoading
|
|
364
361
|
? Array.from(Array(CatSelect.SKELETON_COUNT)).map(() => (h("li", { class: "select-option-loading" }, h("cat-skeleton", { variant: "body", lines: 1 }), h("cat-skeleton", { variant: "body", lines: 1 }))))
|
|
365
362
|
: !this.state.options.length &&
|
|
366
363
|
!this.tags && (h("li", { class: "select-option-empty" }, this.noItems ? this.noItems : i18n.t('select.empty')))))))));
|
|
@@ -427,6 +424,9 @@ export class CatSelect {
|
|
|
427
424
|
}
|
|
428
425
|
show() {
|
|
429
426
|
if (!this.state.isOpen && this.connector) {
|
|
427
|
+
if (this.trigger && this.dropdown) {
|
|
428
|
+
this.cleanupFloatingUi = autoUpdate(this.trigger, this.dropdown, () => this.update());
|
|
429
|
+
}
|
|
430
430
|
// reconnect to reset the connection, i.e. the pagination
|
|
431
431
|
this.connect(this.connector);
|
|
432
432
|
this.patchState({ isOpen: true, isFirstLoading: true, options: [] });
|
|
@@ -438,6 +438,8 @@ export class CatSelect {
|
|
|
438
438
|
hide() {
|
|
439
439
|
if (this.state.isOpen) {
|
|
440
440
|
this.patchState({ isOpen: false, activeOptionIndex: -1 });
|
|
441
|
+
this.cleanupFloatingUi?.();
|
|
442
|
+
this.cleanupFloatingUi = undefined;
|
|
441
443
|
this.catClose.emit();
|
|
442
444
|
return true;
|
|
443
445
|
}
|