@getflip/swirl-components 0.459.1 → 0.459.2-beta-20260316111103
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/components.json +1 -1
- package/dist/cjs/swirl-accordion.cjs.entry.js +8 -1
- package/dist/cjs/swirl-form-control.cjs.entry.js +8 -1
- package/dist/cjs/swirl-lightbox.cjs.entry.js +8 -1
- package/dist/cjs/swirl-option-list.cjs.entry.js +10 -1
- package/dist/cjs/swirl-popover_2.cjs.entry.js +34 -15
- package/dist/cjs/swirl-radio-group.cjs.entry.js +8 -1
- package/dist/cjs/swirl-resource-list.cjs.entry.js +12 -1
- package/dist/collection/components/swirl-accordion/swirl-accordion.js +8 -1
- package/dist/collection/components/swirl-form-control/swirl-form-control.js +8 -1
- package/dist/collection/components/swirl-lightbox/swirl-lightbox.js +8 -1
- package/dist/collection/components/swirl-option-list/swirl-option-list.js +10 -1
- package/dist/collection/components/swirl-popover/swirl-popover.js +10 -3
- package/dist/collection/components/swirl-popover-trigger/swirl-popover-trigger.js +24 -12
- package/dist/collection/components/swirl-radio-group/swirl-radio-group.js +8 -1
- package/dist/collection/components/swirl-resource-list/swirl-resource-list.js +12 -1
- package/dist/components/swirl-accordion.js +1 -1
- package/dist/components/swirl-form-control.js +1 -1
- package/dist/components/swirl-lightbox.js +1 -1
- package/dist/components/swirl-option-list2.js +1 -1
- package/dist/components/swirl-popover-trigger2.js +1 -1
- package/dist/components/swirl-popover2.js +1 -1
- package/dist/components/swirl-radio-group.js +1 -1
- package/dist/components/swirl-resource-list.js +1 -1
- package/dist/esm/swirl-accordion.entry.js +8 -1
- package/dist/esm/swirl-form-control.entry.js +8 -1
- package/dist/esm/swirl-lightbox.entry.js +8 -1
- package/dist/esm/swirl-option-list.entry.js +10 -1
- package/dist/esm/swirl-popover_2.entry.js +34 -15
- package/dist/esm/swirl-radio-group.entry.js +8 -1
- package/dist/esm/swirl-resource-list.entry.js +12 -1
- package/dist/swirl-components/p-3d525597.entry.js +1 -0
- package/dist/swirl-components/p-76902a28.entry.js +1 -0
- package/dist/swirl-components/p-885ff021.entry.js +1 -0
- package/dist/swirl-components/p-b336e11a.entry.js +1 -0
- package/dist/swirl-components/p-c997cd1d.entry.js +1 -0
- package/dist/swirl-components/p-ceaf919e.entry.js +1 -0
- package/dist/swirl-components/p-dc2c6925.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-accordion/swirl-accordion.d.ts +2 -0
- package/dist/types/components/swirl-form-control/swirl-form-control.d.ts +2 -0
- package/dist/types/components/swirl-lightbox/swirl-lightbox.d.ts +2 -0
- package/dist/types/components/swirl-option-list/swirl-option-list.d.ts +2 -0
- package/dist/types/components/swirl-popover/swirl-popover.d.ts +2 -0
- package/dist/types/components/swirl-popover-trigger/swirl-popover-trigger.d.ts +3 -0
- package/dist/types/components/swirl-radio-group/swirl-radio-group.d.ts +2 -0
- package/dist/types/components/swirl-resource-list/swirl-resource-list.d.ts +2 -0
- package/package.json +1 -1
- package/dist/swirl-components/p-12a3b660.entry.js +0 -1
- package/dist/swirl-components/p-3e1f2e7d.entry.js +0 -1
- package/dist/swirl-components/p-43781b60.entry.js +0 -1
- package/dist/swirl-components/p-536a5865.entry.js +0 -1
- package/dist/swirl-components/p-55e7c739.entry.js +0 -1
- package/dist/swirl-components/p-7285071d.entry.js +0 -1
- package/dist/swirl-components/p-ef3b0d2f.entry.js +0 -1
package/components.json
CHANGED
|
@@ -9,6 +9,7 @@ const SwirlAccordion = class {
|
|
|
9
9
|
index.registerInstance(this, hostRef);
|
|
10
10
|
this.expandedItemChange = index.createEvent(this, "expandedItemChange", 7);
|
|
11
11
|
this.multiExpand = false;
|
|
12
|
+
this.componentLoaded = false;
|
|
12
13
|
this.onExpansionChange = (event) => {
|
|
13
14
|
if (event.detail) {
|
|
14
15
|
this.expandedItemChange.emit(event.target.itemId);
|
|
@@ -16,8 +17,14 @@ const SwirlAccordion = class {
|
|
|
16
17
|
}
|
|
17
18
|
};
|
|
18
19
|
}
|
|
20
|
+
connectedCallback() {
|
|
21
|
+
if (this.componentLoaded) {
|
|
22
|
+
this.el.addEventListener("expansionChange", this.onExpansionChange);
|
|
23
|
+
}
|
|
24
|
+
}
|
|
19
25
|
componentDidLoad() {
|
|
20
26
|
this.el.addEventListener("expansionChange", this.onExpansionChange);
|
|
27
|
+
this.componentLoaded = true;
|
|
21
28
|
}
|
|
22
29
|
disconnectedCallback() {
|
|
23
30
|
this.el.removeEventListener("expansionChange", this.onExpansionChange);
|
|
@@ -53,7 +60,7 @@ const SwirlAccordion = class {
|
|
|
53
60
|
});
|
|
54
61
|
}
|
|
55
62
|
render() {
|
|
56
|
-
return (index.h(index.Host, { key: '
|
|
63
|
+
return (index.h(index.Host, { key: '380395f009a7fa44a47494bf0fa6aa4b36c24b74' }, index.h("slot", { key: '0ce853754c9ec49e121cc3d07edfa860944f0909' })));
|
|
57
64
|
}
|
|
58
65
|
get el() { return index.getElement(this); }
|
|
59
66
|
};
|
|
@@ -13,6 +13,7 @@ const SwirlFormControl = class {
|
|
|
13
13
|
this.labelPosition = "inside";
|
|
14
14
|
this.descriptionId = `form-control-description-${Math.round(Math.random() * 100000)}`;
|
|
15
15
|
this.labelId = `form-control-label-${Math.round(Math.random() * 100000)}`;
|
|
16
|
+
this.componentLoaded = false;
|
|
16
17
|
this.listenToInputValueChanges = () => {
|
|
17
18
|
this.inputEl.addEventListener("valueChange", this.checkInputValue);
|
|
18
19
|
};
|
|
@@ -40,6 +41,11 @@ const SwirlFormControl = class {
|
|
|
40
41
|
}
|
|
41
42
|
};
|
|
42
43
|
}
|
|
44
|
+
connectedCallback() {
|
|
45
|
+
if (this.componentLoaded) {
|
|
46
|
+
this.listenToInputValueChanges();
|
|
47
|
+
}
|
|
48
|
+
}
|
|
43
49
|
componentWillLoad() {
|
|
44
50
|
this.inputEl = this.el.firstElementChild;
|
|
45
51
|
this.associateDescriptionWithInputElement();
|
|
@@ -51,6 +57,7 @@ const SwirlFormControl = class {
|
|
|
51
57
|
this.setInputElementLabel();
|
|
52
58
|
this.checkInputValue();
|
|
53
59
|
this.listenToInputValueChanges();
|
|
60
|
+
this.componentLoaded = true;
|
|
54
61
|
}
|
|
55
62
|
componentDidRender() {
|
|
56
63
|
this.checkInputValue();
|
|
@@ -184,7 +191,7 @@ const SwirlFormControl = class {
|
|
|
184
191
|
"form-control--is-select": isSelect,
|
|
185
192
|
});
|
|
186
193
|
const LabelTag = hasContenteditableControl ? "div" : "label";
|
|
187
|
-
return (index.h(index.Host, { key: '
|
|
194
|
+
return (index.h(index.Host, { key: 'f43e98d038be729dd3e6be730f9204163ebef5dd', onFocusin: this.onFocusIn, onFocusout: this.onFocusOut, onKeyDown: this.onKeyDown }, index.h("div", { key: '963a2e8f29c5d56577155c75f4c80caa77897a77', class: className, role: "group" }, index.h("span", { key: '638b8f29f74dac1c2a0602ff5f36517d877a4d5a', class: "form-control__controls" }, index.h("span", { key: '3f9a2e88e84663208a762398d22c523b3064d900', class: "form-control__prefix" }, index.h("slot", { key: '94438ce228b65ba4f5351eecc3c5020a0c0e4284', name: "prefix" })), index.h(LabelTag, { key: 'fa9cc92355684b5c9f59a6e3776b62b420bec0fa', class: "form-control__label", onClick: this.onLabelClick }, hasIcon && (index.h("span", { key: '09db7210b9cb7e456d346ba085493037ea09acbb', class: "form-control__icon" }, index.h("swirl-icon", { key: '42ee4127ea8828188ec6fee0f98a8bd0be297fdf', glyph: this.icon, size: 20 }))), index.h("span", { key: 'f82d6e8fd93e28d05552f571494ce7a8ddda19ce', class: "form-control__label-text", id: this.labelId }, this.label, this.secondaryLabel && this.labelPosition === "outside" && (index.h("span", { key: '748f57106c33ca2fc22b4636137de4d34fe35745', class: "form-control__secondary-label" }, this.secondaryLabel)), this.tooltip && (index.h("span", { key: '72198938bc0a2f8e487acceb2dc1d31eb04810bc', class: "form-control__tooltip" }, index.h("swirl-tooltip", { key: '15d49636d45a6cb07c863d678bf245d1d9a06234', content: this.tooltip, position: "top" }, index.h("swirl-icon-help", { key: '2ba840d0c6c7073e6d469ec4311ac8cfa13d0302', size: 16, tabindex: "0" }))))), index.h("span", { key: 'fb26179e0b57ba439eb81d8f6944c02275abe7f2', class: "form-control__input" }, index.h("slot", { key: '73c4f60077bc75b845d2e83dd3744f579408fee3' }), index.h("span", { key: '5ffd0a08725835845d404e836f0c5dc04397fac8', class: "form-control__bottom" }, index.h("slot", { key: '8ddd0bd3eeb7128d377bed339f3fcc0d1fdbcaf4', name: "bottom" }))))), showDescription && (index.h("span", { key: '4d2dbc2e6cbf740860f2e7b0dce75ec176e03653', class: "form-control__description", id: this.descriptionId }, this.description)), index.h("span", { key: 'c2857d86f9663e1c21f69f3a10ddc0a569cb10c7', "aria-live": "polite" }, showErrorMessage && (index.h("span", { key: '73e6a3a94e1afe7100d820d4df3e5fa078015884', class: "form-control__error-message", id: this.descriptionId }, index.h("swirl-inline-error", { key: '43d268475c382a779df9f45a8c5fb344c83509de', message: this.errorMessage, size: "s" })))))));
|
|
188
195
|
}
|
|
189
196
|
get el() { return index.getElement(this); }
|
|
190
197
|
static get watchers() { return {
|
|
@@ -21,6 +21,7 @@ const SwirlLightbox = class {
|
|
|
21
21
|
this.activeSlideIndex = 0;
|
|
22
22
|
this.closing = false;
|
|
23
23
|
this.opening = false;
|
|
24
|
+
this.componentLoaded = false;
|
|
24
25
|
this.dragging = false;
|
|
25
26
|
this.onKeyDown = (event) => {
|
|
26
27
|
if (event.code === "Escape") {
|
|
@@ -140,6 +141,11 @@ const SwirlLightbox = class {
|
|
|
140
141
|
}
|
|
141
142
|
};
|
|
142
143
|
}
|
|
144
|
+
connectedCallback() {
|
|
145
|
+
if (this.componentLoaded) {
|
|
146
|
+
this.registerSlides();
|
|
147
|
+
}
|
|
148
|
+
}
|
|
143
149
|
componentWillLoad() {
|
|
144
150
|
this.registerSlides();
|
|
145
151
|
}
|
|
@@ -147,6 +153,7 @@ const SwirlLightbox = class {
|
|
|
147
153
|
this.ensureOpening();
|
|
148
154
|
this.setDialogCustomProps();
|
|
149
155
|
this.activateSlide(0);
|
|
156
|
+
this.componentLoaded = true;
|
|
150
157
|
}
|
|
151
158
|
disconnectedCallback() {
|
|
152
159
|
this.unlockBodyScroll();
|
|
@@ -289,7 +296,7 @@ const SwirlLightbox = class {
|
|
|
289
296
|
const className = index$1.classnames("lightbox", {
|
|
290
297
|
"lightbox--closing": this.closing,
|
|
291
298
|
});
|
|
292
|
-
return (index.h(index.Host, { key: '
|
|
299
|
+
return (index.h(index.Host, { key: '2761607664e9327f84d4849f27f0080f4d173a78' }, index.h("dialog", { key: '2f97e9590cb52df078c5bdb36e4795e6f2472742', "aria-label": this.label, class: className, id: "lightbox", onKeyDown: this.onKeyDown, onMouseDown: this.onPointerDown, onMouseMove: this.onPointerMove, onMouseOut: this.onPointerUp, onMouseUp: this.onPointerUp, onTouchEnd: this.onPointerUp, onTouchMove: this.onPointerMove, onTouchStart: this.onPointerDown, ref: (el) => (this.modalEl = el) }, index.h("div", { key: '753683fcfc3f3a70d20945a13dfa8fc4223f622e', class: "lightbox__body", role: "document" }, index.h("header", { key: 'd2c622edac357e3b1e3e9027b90a8b407b9769bd', class: "lightbox__header" }, index.h("div", { key: '5bf93cd0d94b3d4a9ecc970cf7400e24f54baa23', class: "lightbox__toolbar" }, index.h("slot", { key: '1731b0c6a2f480e2bd8991597cf13f2f87b8f120', name: "toolbar" }), this.downloadButtonEnabled && (index.h("button", { key: '79db53ff9697a21b621290542a6c1bb5699fbe4a', "aria-label": this.downloadButtonLabel, class: "lightbox__download-button", onClick: this.onDownloadButtonClick, type: "button" }, index.h("swirl-icon-download", { key: '5e86ee7e4dc7aeff39df018d43895a34376dd894' })))), index.h("button", { key: 'b96e88782fd79ee921bac022d8b0958f220728c7', "aria-label": this.closeButtonLabel, class: "lightbox__close-button", onClick: this.onCloseButtonClick, type: "button" }, index.h("swirl-icon-close", { key: '5dd686b68463982dc6f153485d43acdf86f552a2' }))), index.h("div", { key: '6a327bca9160add207018cd354b9de400c310480', "aria-roledescription": "carousel", class: "lightbox__content", role: "group" }, index.h("div", { key: '59460244cd1bd113062df2b1f8c82d6b3eb953db', "aria-atomic": "false", "aria-live": "polite", class: "lightbox__slides", onClick: this.onBackdropClick, onContextMenu: this.onContextMenu, ref: (el) => (this.slidesContainer = el) }, index.h("slot", { key: '89658ffa21c6ccf8f3364f31269a1d4b86941ca5', onSlotchange: this.registerSlides }))), index.h("div", { key: '8d9c41b3f82d52b5525389d1b9daf17cc5ae1b80', class: "lightbox__controls" }, index.h("button", { key: '6f877d0191f8cf09c062fc776c9ef21e686cea54', "aria-label": this.previousSlideButtonLabel, class: "lightbox__previous-slide-button", disabled: this.activeSlideIndex === 0, onClick: this.onPreviousSlideClick, ref: (el) => (this.previousSlideButton = el) }, index.h("swirl-icon-arrow-left", { key: '8110376c5e5f98268d50bb0afb430845ddfd0f76' })), index.h("button", { key: '26dbc003352bdc94ff77a27f12fac737904bd62a', "aria-label": this.nextSlideButtonLabel, class: "lightbox__next-slide-button", disabled: this.activeSlideIndex === this.slides.length - 1, onClick: this.onNextSlideClick, ref: (el) => (this.nextSlideButton = el) }, index.h("swirl-icon-arrow-right", { key: 'e32e509020e85cb89612f0bec77fb7df35763b3d' }))), showPagination && (index.h("span", { key: 'c54954ff3e6ad11ab45964e340c1301c4cb4c618', class: "lightbox__pagination" }, index.h("span", { key: '1cd9dcea7c92e7691c8a353a9ae7f9c39dde093d', "aria-current": "page" }, this.activeSlideIndex + 1), " /", " ", this.slides.length))))));
|
|
293
300
|
}
|
|
294
301
|
get el() { return index.getElement(this); }
|
|
295
302
|
static get watchers() { return {
|
|
@@ -19,6 +19,7 @@ const SwirlOptionList = class {
|
|
|
19
19
|
this.selectAllLabel = "Select all";
|
|
20
20
|
this.value = [];
|
|
21
21
|
this.selectAllState = false;
|
|
22
|
+
this.componentLoaded = false;
|
|
22
23
|
this.selectAllValue = v4.v4();
|
|
23
24
|
this.onClick = (event) => {
|
|
24
25
|
event.preventDefault();
|
|
@@ -155,6 +156,13 @@ const SwirlOptionList = class {
|
|
|
155
156
|
this.focusItem(newIndex);
|
|
156
157
|
};
|
|
157
158
|
}
|
|
159
|
+
connectedCallback() {
|
|
160
|
+
if (this.componentLoaded) {
|
|
161
|
+
this.observeSlotChanges();
|
|
162
|
+
this.subscribeToSwirlPopover();
|
|
163
|
+
this.setItemAllowDragState();
|
|
164
|
+
}
|
|
165
|
+
}
|
|
158
166
|
componentDidLoad() {
|
|
159
167
|
this.updateItems();
|
|
160
168
|
this.observeSlotChanges();
|
|
@@ -166,6 +174,7 @@ const SwirlOptionList = class {
|
|
|
166
174
|
this.setSectionSeparator();
|
|
167
175
|
this.setSelectAllState();
|
|
168
176
|
this.subscribeToSwirlPopover();
|
|
177
|
+
this.componentLoaded = true;
|
|
169
178
|
}
|
|
170
179
|
componentDidRender() {
|
|
171
180
|
this.setupDragDrop();
|
|
@@ -442,7 +451,7 @@ const SwirlOptionList = class {
|
|
|
442
451
|
const ariaMultiselectable = this.multiSelect ? "true" : undefined;
|
|
443
452
|
const tabIndex = Boolean(this.dragging) ? 0 : undefined;
|
|
444
453
|
const showSelectAll = this.multiSelect && this.showSelectAll;
|
|
445
|
-
return (index.h(index.Host, { key: '
|
|
454
|
+
return (index.h(index.Host, { key: 'ccde136da1bd0cc0217da24507a6c59954533bbd' }, index.h("swirl-visually-hidden", { key: 'c34905445208114685344f415572858ac91e7cc1', role: "alert" }, this.assistiveText), index.h("div", { key: '22d3f09f10f9bbdfce4455ad00383ceaa6bd2378', "aria-label": this.label, "aria-multiselectable": ariaMultiselectable, class: "option-list", id: this.optionListId, onClick: this.onClick, onKeyDown: this.onKeyDown, ref: (el) => (this.listboxEl = el), role: "listbox", tabIndex: tabIndex }, showSelectAll && (index.h("swirl-option-list-item", { key: 'd7890cd65febc6249561f12be58e128965a5f246', ref: (el) => (this.selectAllEl = el), label: this.selectAllLabel, disabled: this.disabled, context: "multi-select", selected: this.selectAllState === true, indeterminate: this.selectAllState === "indeterminate", value: this.selectAllValue })), index.h("slot", { key: '4d334f92999da727c34dc4d09d803698e6a3df20', onSlotchange: this.setSectionSeparator }))));
|
|
446
455
|
}
|
|
447
456
|
get el() { return index.getElement(this); }
|
|
448
457
|
static get watchers() { return {
|
|
@@ -25,6 +25,7 @@ const SwirlPopover = class {
|
|
|
25
25
|
this.borderRadius = "base";
|
|
26
26
|
this.active = false;
|
|
27
27
|
this.closing = false;
|
|
28
|
+
this.componentLoaded = false;
|
|
28
29
|
this.togglePopover = (event) => {
|
|
29
30
|
event.stopPropagation();
|
|
30
31
|
if (this.active) {
|
|
@@ -73,12 +74,18 @@ const SwirlPopover = class {
|
|
|
73
74
|
this.close();
|
|
74
75
|
};
|
|
75
76
|
}
|
|
77
|
+
connectedCallback() {
|
|
78
|
+
if (this.componentLoaded) {
|
|
79
|
+
this.connectTrigger();
|
|
80
|
+
}
|
|
81
|
+
}
|
|
76
82
|
componentDidLoad() {
|
|
77
83
|
this.connectTrigger();
|
|
78
84
|
this.updateTriggerAttributes();
|
|
79
85
|
if (Boolean(this.trigger)) {
|
|
80
86
|
console.warn('[Swirl] The "trigger" prop of swirl-popover is deprecated and will be removed with the next major release. Please use the swirl-popover-trigger component instead. https://swirl-storybook.flip-app.dev/?path=/docs/components-swirlpopovertrigger--docs');
|
|
81
87
|
}
|
|
88
|
+
this.componentLoaded = true;
|
|
82
89
|
}
|
|
83
90
|
disconnectedCallback() {
|
|
84
91
|
this.unlockBodyScroll();
|
|
@@ -308,16 +315,16 @@ const SwirlPopover = class {
|
|
|
308
315
|
"popover--transparent": this.transparent,
|
|
309
316
|
"popover--padded": this.padded,
|
|
310
317
|
});
|
|
311
|
-
return (index.h(index.Host, { key: '
|
|
318
|
+
return (index.h(index.Host, { key: 'a66de7fe923589a7437f4a230279dd160d0e7c09' }, index.h("div", { key: '0b329aba288a963452e8b0ddf36db431ddd47630', popover: "manual", class: className, onKeyDown: this.onKeydown, ref: (el) => (this.popoverEl = el) }, index.h("div", { key: '7b5561e39367586c8718b29120c2d4250fded5ae', "aria-hidden": !this.active ? "true" : "false", "aria-label": this.label, class: "popover__content", id: this.popoverId, part: "popover__content", role: "dialog", ref: (el) => (this.contentContainer = el), style: {
|
|
312
319
|
top: Boolean(this.position) ? `${this.position?.y}px` : "",
|
|
313
320
|
left: Boolean(this.position) ? `${this.position?.x}px` : "",
|
|
314
321
|
visibility: this.active && !this.position && !mobile ? "hidden" : undefined,
|
|
315
322
|
"--swirl-popover-border-radius": borderRadius,
|
|
316
|
-
}, tabindex: "-1" }, index.h("span", { key: '
|
|
323
|
+
}, tabindex: "-1" }, index.h("span", { key: '863790e32b28bd549a196a6abeaf7908417d5d1e', class: "popover__handle" }), index.h("div", { key: '578ddcdeba1d696b71141c0cfe9b0bb582615ca8', class: "popover__scroll-container", part: "popover__scroll-container", ref: (el) => (this.scrollContainer = el), style: {
|
|
317
324
|
maxHeight: !mobile && Boolean(this.maxHeight)
|
|
318
325
|
? this.maxHeight
|
|
319
326
|
: undefined,
|
|
320
|
-
} }, index.h("slot", { key: '
|
|
327
|
+
} }, index.h("slot", { key: '4f4e2dd79c4839bde788a50e488aae20210d6536' }))), this.active && (index.h("div", { key: '6afad234e3b1b7efaabb72613400cdd12a82a517', class: "popover__backdrop", onClick: this.onCloseButtonClick })))));
|
|
321
328
|
}
|
|
322
329
|
get el() { return index.getElement(this); }
|
|
323
330
|
};
|
|
@@ -332,6 +339,7 @@ const SwirlPopoverTrigger = class {
|
|
|
332
339
|
this.setAriaAttributes = true;
|
|
333
340
|
this.triggerOnClick = true;
|
|
334
341
|
this.triggerOnHover = false;
|
|
342
|
+
this.componentLoaded = false;
|
|
335
343
|
this.triggerIsActive = false;
|
|
336
344
|
this.popoverMouseEnter = () => {
|
|
337
345
|
this.stopHoverLingerTimer();
|
|
@@ -419,20 +427,17 @@ const SwirlPopoverTrigger = class {
|
|
|
419
427
|
}
|
|
420
428
|
};
|
|
421
429
|
}
|
|
430
|
+
connectedCallback() {
|
|
431
|
+
if (this.componentLoaded) {
|
|
432
|
+
this.setupHoverListeners();
|
|
433
|
+
this.setupIntersectionObserver();
|
|
434
|
+
}
|
|
435
|
+
}
|
|
422
436
|
componentDidLoad() {
|
|
423
437
|
this.updateTriggerElAriaAttributes();
|
|
424
438
|
this.setupHoverListeners();
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
root: this.parentScrollContainer,
|
|
428
|
-
threshold: 1,
|
|
429
|
-
});
|
|
430
|
-
const firstChild = this.el.querySelector("*");
|
|
431
|
-
if (!Boolean(firstChild)) {
|
|
432
|
-
return;
|
|
433
|
-
}
|
|
434
|
-
this.intersectionObserver.observe(firstChild);
|
|
435
|
-
}
|
|
439
|
+
this.setupIntersectionObserver();
|
|
440
|
+
this.componentLoaded = true;
|
|
436
441
|
}
|
|
437
442
|
disconnectedCallback() {
|
|
438
443
|
this.intersectionObserver?.disconnect();
|
|
@@ -460,6 +465,20 @@ const SwirlPopoverTrigger = class {
|
|
|
460
465
|
}
|
|
461
466
|
return this.el.children[0];
|
|
462
467
|
}
|
|
468
|
+
setupIntersectionObserver() {
|
|
469
|
+
this.intersectionObserver?.disconnect();
|
|
470
|
+
if (this.hidePopoverWhenInvisible) {
|
|
471
|
+
this.intersectionObserver = new IntersectionObserver(this.onVisibilityChange.bind(this), {
|
|
472
|
+
root: this.parentScrollContainer,
|
|
473
|
+
threshold: 1,
|
|
474
|
+
});
|
|
475
|
+
const firstChild = this.el.querySelector("*");
|
|
476
|
+
if (!Boolean(firstChild)) {
|
|
477
|
+
return;
|
|
478
|
+
}
|
|
479
|
+
this.intersectionObserver.observe(firstChild);
|
|
480
|
+
}
|
|
481
|
+
}
|
|
463
482
|
onVisibilityChange(entries) {
|
|
464
483
|
const triggerIsVisible = entries[0].isIntersecting;
|
|
465
484
|
if (!triggerIsVisible && this.isPopoverOpen()) {
|
|
@@ -497,7 +516,7 @@ const SwirlPopoverTrigger = class {
|
|
|
497
516
|
return isActive;
|
|
498
517
|
}
|
|
499
518
|
render() {
|
|
500
|
-
return (index.h(index.Host, { key: '
|
|
519
|
+
return (index.h(index.Host, { key: 'eee610851b4847d532d25cc702a6cddb64a24763', onClick: this.onClick, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseleave }, index.h("slot", { key: '8879657270adaee1e208e3c9ca4da65d8bdd8358' })));
|
|
501
520
|
}
|
|
502
521
|
get el() { return index.getElement(this); }
|
|
503
522
|
static get watchers() { return {
|
|
@@ -8,6 +8,7 @@ const SwirlRadioGroup = class {
|
|
|
8
8
|
constructor(hostRef) {
|
|
9
9
|
index.registerInstance(this, hostRef);
|
|
10
10
|
this.valueChange = index.createEvent(this, "valueChange", 7);
|
|
11
|
+
this.componentLoaded = false;
|
|
11
12
|
this.onRadioValueChange = (event) => {
|
|
12
13
|
event.stopPropagation();
|
|
13
14
|
const radio = event.target;
|
|
@@ -22,10 +23,16 @@ const SwirlRadioGroup = class {
|
|
|
22
23
|
}
|
|
23
24
|
};
|
|
24
25
|
}
|
|
26
|
+
connectedCallback() {
|
|
27
|
+
if (this.componentLoaded) {
|
|
28
|
+
this.addValueChangeListeners();
|
|
29
|
+
}
|
|
30
|
+
}
|
|
25
31
|
componentDidLoad() {
|
|
26
32
|
this.radioButtons = Array.from(this.el.querySelectorAll("swirl-radio"));
|
|
27
33
|
this.initValue();
|
|
28
34
|
this.addValueChangeListeners();
|
|
35
|
+
this.componentLoaded = true;
|
|
29
36
|
}
|
|
30
37
|
disconnectedCallback() {
|
|
31
38
|
this.removeValueChangeListeners();
|
|
@@ -51,7 +58,7 @@ const SwirlRadioGroup = class {
|
|
|
51
58
|
});
|
|
52
59
|
}
|
|
53
60
|
render() {
|
|
54
|
-
return (index.h(index.Host, { key: '
|
|
61
|
+
return (index.h(index.Host, { key: '03c7db51b6f367fcdd582920fe30e3075abc897d', "aria-describedby": this.swirlAriaDescribedby, role: "radiogroup" }, index.h("div", { key: 'ae70549e3d945d246ff53153e2aeb49acd535ff3', class: "radio-group" }, index.h("slot", { key: '39e31a331fe205db7fc90d579b4ba85dedac8b3e' }))));
|
|
55
62
|
}
|
|
56
63
|
get el() { return index.getElement(this); }
|
|
57
64
|
};
|
|
@@ -17,6 +17,7 @@ const SwirlResourceList = class {
|
|
|
17
17
|
this.spacing = "0";
|
|
18
18
|
this.listId = v4.v4();
|
|
19
19
|
this.focusedIndex = 0;
|
|
20
|
+
this.componentLoaded = false;
|
|
20
21
|
this.toggleDrag = (event) => {
|
|
21
22
|
const item = event.detail;
|
|
22
23
|
if (Boolean(this.dragging)) {
|
|
@@ -92,6 +93,14 @@ const SwirlResourceList = class {
|
|
|
92
93
|
}
|
|
93
94
|
};
|
|
94
95
|
}
|
|
96
|
+
connectedCallback() {
|
|
97
|
+
if (this.componentLoaded) {
|
|
98
|
+
this.observeSlotChanges();
|
|
99
|
+
this.collectItems();
|
|
100
|
+
this.setupControllingElement();
|
|
101
|
+
this.setItemAllowDragState();
|
|
102
|
+
}
|
|
103
|
+
}
|
|
95
104
|
componentDidLoad() {
|
|
96
105
|
this.observeSlotChanges();
|
|
97
106
|
this.collectItems();
|
|
@@ -99,6 +108,7 @@ const SwirlResourceList = class {
|
|
|
99
108
|
this.setItemAllowDragState();
|
|
100
109
|
this.setupDragDrop();
|
|
101
110
|
this.setSectionSpacingAndSeparator();
|
|
111
|
+
this.componentLoaded = true;
|
|
102
112
|
}
|
|
103
113
|
componentDidRender() {
|
|
104
114
|
this.setupDragDrop();
|
|
@@ -110,6 +120,7 @@ const SwirlResourceList = class {
|
|
|
110
120
|
this.removeToggleDragListeners();
|
|
111
121
|
}
|
|
112
122
|
observeSlotChanges() {
|
|
123
|
+
this.observer?.disconnect();
|
|
113
124
|
this.observer = new MutationObserver(() => {
|
|
114
125
|
this.collectItems();
|
|
115
126
|
this.setItemAllowDragState();
|
|
@@ -273,7 +284,7 @@ const SwirlResourceList = class {
|
|
|
273
284
|
});
|
|
274
285
|
}
|
|
275
286
|
render() {
|
|
276
|
-
return (index.h(index.Host, { key: '
|
|
287
|
+
return (index.h(index.Host, { key: 'cfe29e9445d922b69f2716643cbcade00fab8204', onKeyDown: this.onKeyDown }, index.h("swirl-visually-hidden", { key: '114a7ea84cc2fa760ed5c3cd966896ae1a567f2c', role: "alert" }, this.assistiveText), index.h("swirl-box", { key: '9472159c74cf552f9de9b33f4e03f3cd7cff5262', paddingBlockEnd: this.paddingBlockEnd ?? this.padding, paddingBlockStart: this.paddingBlockStart ?? this.padding, paddingInlineEnd: this.paddingInlineEnd ?? this.padding ?? "8", paddingInlineStart: this.paddingInlineStart ?? this.padding ?? "8" }, index.h("swirl-stack", { key: '6c8e8bc9c753b20be4ecb3fa87b2bd8fe73cbeb6', "aria-label": this.label, class: "resource-list", id: this.listId, ref: (el) => (this.gridEl = el), role: this.semantics, spacing: this.spacing }, index.h("slot", { key: '6036dd9cfe944f9290084d634b45172ae4e9b23f' })))));
|
|
277
288
|
}
|
|
278
289
|
get el() { return index.getElement(this); }
|
|
279
290
|
static get watchers() { return {
|
|
@@ -5,6 +5,7 @@ import { h, Host, } from "@stencil/core";
|
|
|
5
5
|
export class SwirlAccordion {
|
|
6
6
|
constructor() {
|
|
7
7
|
this.multiExpand = false;
|
|
8
|
+
this.componentLoaded = false;
|
|
8
9
|
this.onExpansionChange = (event) => {
|
|
9
10
|
if (event.detail) {
|
|
10
11
|
this.expandedItemChange.emit(event.target.itemId);
|
|
@@ -12,8 +13,14 @@ export class SwirlAccordion {
|
|
|
12
13
|
}
|
|
13
14
|
};
|
|
14
15
|
}
|
|
16
|
+
connectedCallback() {
|
|
17
|
+
if (this.componentLoaded) {
|
|
18
|
+
this.el.addEventListener("expansionChange", this.onExpansionChange);
|
|
19
|
+
}
|
|
20
|
+
}
|
|
15
21
|
componentDidLoad() {
|
|
16
22
|
this.el.addEventListener("expansionChange", this.onExpansionChange);
|
|
23
|
+
this.componentLoaded = true;
|
|
17
24
|
}
|
|
18
25
|
disconnectedCallback() {
|
|
19
26
|
this.el.removeEventListener("expansionChange", this.onExpansionChange);
|
|
@@ -49,7 +56,7 @@ export class SwirlAccordion {
|
|
|
49
56
|
});
|
|
50
57
|
}
|
|
51
58
|
render() {
|
|
52
|
-
return (h(Host, { key: '
|
|
59
|
+
return (h(Host, { key: '380395f009a7fa44a47494bf0fa6aa4b36c24b74' }, h("slot", { key: '0ce853754c9ec49e121cc3d07edfa860944f0909' })));
|
|
53
60
|
}
|
|
54
61
|
static get is() { return "swirl-accordion"; }
|
|
55
62
|
static get encapsulation() { return "shadow"; }
|
|
@@ -12,6 +12,7 @@ export class SwirlFormControl {
|
|
|
12
12
|
this.labelPosition = "inside";
|
|
13
13
|
this.descriptionId = `form-control-description-${Math.round(Math.random() * 100000)}`;
|
|
14
14
|
this.labelId = `form-control-label-${Math.round(Math.random() * 100000)}`;
|
|
15
|
+
this.componentLoaded = false;
|
|
15
16
|
this.listenToInputValueChanges = () => {
|
|
16
17
|
this.inputEl.addEventListener("valueChange", this.checkInputValue);
|
|
17
18
|
};
|
|
@@ -39,6 +40,11 @@ export class SwirlFormControl {
|
|
|
39
40
|
}
|
|
40
41
|
};
|
|
41
42
|
}
|
|
43
|
+
connectedCallback() {
|
|
44
|
+
if (this.componentLoaded) {
|
|
45
|
+
this.listenToInputValueChanges();
|
|
46
|
+
}
|
|
47
|
+
}
|
|
42
48
|
componentWillLoad() {
|
|
43
49
|
this.inputEl = this.el.firstElementChild;
|
|
44
50
|
this.associateDescriptionWithInputElement();
|
|
@@ -50,6 +56,7 @@ export class SwirlFormControl {
|
|
|
50
56
|
this.setInputElementLabel();
|
|
51
57
|
this.checkInputValue();
|
|
52
58
|
this.listenToInputValueChanges();
|
|
59
|
+
this.componentLoaded = true;
|
|
53
60
|
}
|
|
54
61
|
componentDidRender() {
|
|
55
62
|
this.checkInputValue();
|
|
@@ -183,7 +190,7 @@ export class SwirlFormControl {
|
|
|
183
190
|
"form-control--is-select": isSelect,
|
|
184
191
|
});
|
|
185
192
|
const LabelTag = hasContenteditableControl ? "div" : "label";
|
|
186
|
-
return (h(Host, { key: '
|
|
193
|
+
return (h(Host, { key: 'f43e98d038be729dd3e6be730f9204163ebef5dd', onFocusin: this.onFocusIn, onFocusout: this.onFocusOut, onKeyDown: this.onKeyDown }, h("div", { key: '963a2e8f29c5d56577155c75f4c80caa77897a77', class: className, role: "group" }, h("span", { key: '638b8f29f74dac1c2a0602ff5f36517d877a4d5a', class: "form-control__controls" }, h("span", { key: '3f9a2e88e84663208a762398d22c523b3064d900', class: "form-control__prefix" }, h("slot", { key: '94438ce228b65ba4f5351eecc3c5020a0c0e4284', name: "prefix" })), h(LabelTag, { key: 'fa9cc92355684b5c9f59a6e3776b62b420bec0fa', class: "form-control__label", onClick: this.onLabelClick }, hasIcon && (h("span", { key: '09db7210b9cb7e456d346ba085493037ea09acbb', class: "form-control__icon" }, h("swirl-icon", { key: '42ee4127ea8828188ec6fee0f98a8bd0be297fdf', glyph: this.icon, size: 20 }))), h("span", { key: 'f82d6e8fd93e28d05552f571494ce7a8ddda19ce', class: "form-control__label-text", id: this.labelId }, this.label, this.secondaryLabel && this.labelPosition === "outside" && (h("span", { key: '748f57106c33ca2fc22b4636137de4d34fe35745', class: "form-control__secondary-label" }, this.secondaryLabel)), this.tooltip && (h("span", { key: '72198938bc0a2f8e487acceb2dc1d31eb04810bc', class: "form-control__tooltip" }, h("swirl-tooltip", { key: '15d49636d45a6cb07c863d678bf245d1d9a06234', content: this.tooltip, position: "top" }, h("swirl-icon-help", { key: '2ba840d0c6c7073e6d469ec4311ac8cfa13d0302', size: 16, tabindex: "0" }))))), h("span", { key: 'fb26179e0b57ba439eb81d8f6944c02275abe7f2', class: "form-control__input" }, h("slot", { key: '73c4f60077bc75b845d2e83dd3744f579408fee3' }), h("span", { key: '5ffd0a08725835845d404e836f0c5dc04397fac8', class: "form-control__bottom" }, h("slot", { key: '8ddd0bd3eeb7128d377bed339f3fcc0d1fdbcaf4', name: "bottom" }))))), showDescription && (h("span", { key: '4d2dbc2e6cbf740860f2e7b0dce75ec176e03653', class: "form-control__description", id: this.descriptionId }, this.description)), h("span", { key: 'c2857d86f9663e1c21f69f3a10ddc0a569cb10c7', "aria-live": "polite" }, showErrorMessage && (h("span", { key: '73e6a3a94e1afe7100d820d4df3e5fa078015884', class: "form-control__error-message", id: this.descriptionId }, h("swirl-inline-error", { key: '43d268475c382a779df9f45a8c5fb344c83509de', message: this.errorMessage, size: "s" })))))));
|
|
187
194
|
}
|
|
188
195
|
static get is() { return "swirl-form-control"; }
|
|
189
196
|
static get encapsulation() { return "scoped"; }
|
|
@@ -17,6 +17,7 @@ export class SwirlLightbox {
|
|
|
17
17
|
this.activeSlideIndex = 0;
|
|
18
18
|
this.closing = false;
|
|
19
19
|
this.opening = false;
|
|
20
|
+
this.componentLoaded = false;
|
|
20
21
|
this.dragging = false;
|
|
21
22
|
this.onKeyDown = (event) => {
|
|
22
23
|
if (event.code === "Escape") {
|
|
@@ -136,6 +137,11 @@ export class SwirlLightbox {
|
|
|
136
137
|
}
|
|
137
138
|
};
|
|
138
139
|
}
|
|
140
|
+
connectedCallback() {
|
|
141
|
+
if (this.componentLoaded) {
|
|
142
|
+
this.registerSlides();
|
|
143
|
+
}
|
|
144
|
+
}
|
|
139
145
|
componentWillLoad() {
|
|
140
146
|
this.registerSlides();
|
|
141
147
|
}
|
|
@@ -143,6 +149,7 @@ export class SwirlLightbox {
|
|
|
143
149
|
this.ensureOpening();
|
|
144
150
|
this.setDialogCustomProps();
|
|
145
151
|
this.activateSlide(0);
|
|
152
|
+
this.componentLoaded = true;
|
|
146
153
|
}
|
|
147
154
|
disconnectedCallback() {
|
|
148
155
|
this.unlockBodyScroll();
|
|
@@ -285,7 +292,7 @@ export class SwirlLightbox {
|
|
|
285
292
|
const className = classnames("lightbox", {
|
|
286
293
|
"lightbox--closing": this.closing,
|
|
287
294
|
});
|
|
288
|
-
return (h(Host, { key: '
|
|
295
|
+
return (h(Host, { key: '2761607664e9327f84d4849f27f0080f4d173a78' }, h("dialog", { key: '2f97e9590cb52df078c5bdb36e4795e6f2472742', "aria-label": this.label, class: className, id: "lightbox", onKeyDown: this.onKeyDown, onMouseDown: this.onPointerDown, onMouseMove: this.onPointerMove, onMouseOut: this.onPointerUp, onMouseUp: this.onPointerUp, onTouchEnd: this.onPointerUp, onTouchMove: this.onPointerMove, onTouchStart: this.onPointerDown, ref: (el) => (this.modalEl = el) }, h("div", { key: '753683fcfc3f3a70d20945a13dfa8fc4223f622e', class: "lightbox__body", role: "document" }, h("header", { key: 'd2c622edac357e3b1e3e9027b90a8b407b9769bd', class: "lightbox__header" }, h("div", { key: '5bf93cd0d94b3d4a9ecc970cf7400e24f54baa23', class: "lightbox__toolbar" }, h("slot", { key: '1731b0c6a2f480e2bd8991597cf13f2f87b8f120', name: "toolbar" }), this.downloadButtonEnabled && (h("button", { key: '79db53ff9697a21b621290542a6c1bb5699fbe4a', "aria-label": this.downloadButtonLabel, class: "lightbox__download-button", onClick: this.onDownloadButtonClick, type: "button" }, h("swirl-icon-download", { key: '5e86ee7e4dc7aeff39df018d43895a34376dd894' })))), h("button", { key: 'b96e88782fd79ee921bac022d8b0958f220728c7', "aria-label": this.closeButtonLabel, class: "lightbox__close-button", onClick: this.onCloseButtonClick, type: "button" }, h("swirl-icon-close", { key: '5dd686b68463982dc6f153485d43acdf86f552a2' }))), h("div", { key: '6a327bca9160add207018cd354b9de400c310480', "aria-roledescription": "carousel", class: "lightbox__content", role: "group" }, h("div", { key: '59460244cd1bd113062df2b1f8c82d6b3eb953db', "aria-atomic": "false", "aria-live": "polite", class: "lightbox__slides", onClick: this.onBackdropClick, onContextMenu: this.onContextMenu, ref: (el) => (this.slidesContainer = el) }, h("slot", { key: '89658ffa21c6ccf8f3364f31269a1d4b86941ca5', onSlotchange: this.registerSlides }))), h("div", { key: '8d9c41b3f82d52b5525389d1b9daf17cc5ae1b80', class: "lightbox__controls" }, h("button", { key: '6f877d0191f8cf09c062fc776c9ef21e686cea54', "aria-label": this.previousSlideButtonLabel, class: "lightbox__previous-slide-button", disabled: this.activeSlideIndex === 0, onClick: this.onPreviousSlideClick, ref: (el) => (this.previousSlideButton = el) }, h("swirl-icon-arrow-left", { key: '8110376c5e5f98268d50bb0afb430845ddfd0f76' })), h("button", { key: '26dbc003352bdc94ff77a27f12fac737904bd62a', "aria-label": this.nextSlideButtonLabel, class: "lightbox__next-slide-button", disabled: this.activeSlideIndex === this.slides.length - 1, onClick: this.onNextSlideClick, ref: (el) => (this.nextSlideButton = el) }, h("swirl-icon-arrow-right", { key: 'e32e509020e85cb89612f0bec77fb7df35763b3d' }))), showPagination && (h("span", { key: 'c54954ff3e6ad11ab45964e340c1301c4cb4c618', class: "lightbox__pagination" }, h("span", { key: '1cd9dcea7c92e7691c8a353a9ae7f9c39dde093d', "aria-current": "page" }, this.activeSlideIndex + 1), " /", " ", this.slides.length))))));
|
|
289
296
|
}
|
|
290
297
|
static get is() { return "swirl-lightbox"; }
|
|
291
298
|
static get encapsulation() { return "shadow"; }
|
|
@@ -14,6 +14,7 @@ export class SwirlOptionList {
|
|
|
14
14
|
this.selectAllLabel = "Select all";
|
|
15
15
|
this.value = [];
|
|
16
16
|
this.selectAllState = false;
|
|
17
|
+
this.componentLoaded = false;
|
|
17
18
|
this.selectAllValue = uuid();
|
|
18
19
|
this.onClick = (event) => {
|
|
19
20
|
event.preventDefault();
|
|
@@ -150,6 +151,13 @@ export class SwirlOptionList {
|
|
|
150
151
|
this.focusItem(newIndex);
|
|
151
152
|
};
|
|
152
153
|
}
|
|
154
|
+
connectedCallback() {
|
|
155
|
+
if (this.componentLoaded) {
|
|
156
|
+
this.observeSlotChanges();
|
|
157
|
+
this.subscribeToSwirlPopover();
|
|
158
|
+
this.setItemAllowDragState();
|
|
159
|
+
}
|
|
160
|
+
}
|
|
153
161
|
componentDidLoad() {
|
|
154
162
|
this.updateItems();
|
|
155
163
|
this.observeSlotChanges();
|
|
@@ -161,6 +169,7 @@ export class SwirlOptionList {
|
|
|
161
169
|
this.setSectionSeparator();
|
|
162
170
|
this.setSelectAllState();
|
|
163
171
|
this.subscribeToSwirlPopover();
|
|
172
|
+
this.componentLoaded = true;
|
|
164
173
|
}
|
|
165
174
|
componentDidRender() {
|
|
166
175
|
this.setupDragDrop();
|
|
@@ -437,7 +446,7 @@ export class SwirlOptionList {
|
|
|
437
446
|
const ariaMultiselectable = this.multiSelect ? "true" : undefined;
|
|
438
447
|
const tabIndex = Boolean(this.dragging) ? 0 : undefined;
|
|
439
448
|
const showSelectAll = this.multiSelect && this.showSelectAll;
|
|
440
|
-
return (h(Host, { key: '
|
|
449
|
+
return (h(Host, { key: 'ccde136da1bd0cc0217da24507a6c59954533bbd' }, h("swirl-visually-hidden", { key: 'c34905445208114685344f415572858ac91e7cc1', role: "alert" }, this.assistiveText), h("div", { key: '22d3f09f10f9bbdfce4455ad00383ceaa6bd2378', "aria-label": this.label, "aria-multiselectable": ariaMultiselectable, class: "option-list", id: this.optionListId, onClick: this.onClick, onKeyDown: this.onKeyDown, ref: (el) => (this.listboxEl = el), role: "listbox", tabIndex: tabIndex }, showSelectAll && (h("swirl-option-list-item", { key: 'd7890cd65febc6249561f12be58e128965a5f246', ref: (el) => (this.selectAllEl = el), label: this.selectAllLabel, disabled: this.disabled, context: "multi-select", selected: this.selectAllState === true, indeterminate: this.selectAllState === "indeterminate", value: this.selectAllValue })), h("slot", { key: '4d334f92999da727c34dc4d09d803698e6a3df20', onSlotchange: this.setSectionSeparator }))));
|
|
441
450
|
}
|
|
442
451
|
static get is() { return "swirl-option-list"; }
|
|
443
452
|
static get encapsulation() { return "scoped"; }
|
|
@@ -20,6 +20,7 @@ export class SwirlPopover {
|
|
|
20
20
|
this.borderRadius = "base";
|
|
21
21
|
this.active = false;
|
|
22
22
|
this.closing = false;
|
|
23
|
+
this.componentLoaded = false;
|
|
23
24
|
this.togglePopover = (event) => {
|
|
24
25
|
event.stopPropagation();
|
|
25
26
|
if (this.active) {
|
|
@@ -68,12 +69,18 @@ export class SwirlPopover {
|
|
|
68
69
|
this.close();
|
|
69
70
|
};
|
|
70
71
|
}
|
|
72
|
+
connectedCallback() {
|
|
73
|
+
if (this.componentLoaded) {
|
|
74
|
+
this.connectTrigger();
|
|
75
|
+
}
|
|
76
|
+
}
|
|
71
77
|
componentDidLoad() {
|
|
72
78
|
this.connectTrigger();
|
|
73
79
|
this.updateTriggerAttributes();
|
|
74
80
|
if (Boolean(this.trigger)) {
|
|
75
81
|
console.warn('[Swirl] The "trigger" prop of swirl-popover is deprecated and will be removed with the next major release. Please use the swirl-popover-trigger component instead. https://swirl-storybook.flip-app.dev/?path=/docs/components-swirlpopovertrigger--docs');
|
|
76
82
|
}
|
|
83
|
+
this.componentLoaded = true;
|
|
77
84
|
}
|
|
78
85
|
disconnectedCallback() {
|
|
79
86
|
this.unlockBodyScroll();
|
|
@@ -303,16 +310,16 @@ export class SwirlPopover {
|
|
|
303
310
|
"popover--transparent": this.transparent,
|
|
304
311
|
"popover--padded": this.padded,
|
|
305
312
|
});
|
|
306
|
-
return (h(Host, { key: '
|
|
313
|
+
return (h(Host, { key: 'a66de7fe923589a7437f4a230279dd160d0e7c09' }, h("div", { key: '0b329aba288a963452e8b0ddf36db431ddd47630', popover: "manual", class: className, onKeyDown: this.onKeydown, ref: (el) => (this.popoverEl = el) }, h("div", { key: '7b5561e39367586c8718b29120c2d4250fded5ae', "aria-hidden": !this.active ? "true" : "false", "aria-label": this.label, class: "popover__content", id: this.popoverId, part: "popover__content", role: "dialog", ref: (el) => (this.contentContainer = el), style: {
|
|
307
314
|
top: Boolean(this.position) ? `${this.position?.y}px` : "",
|
|
308
315
|
left: Boolean(this.position) ? `${this.position?.x}px` : "",
|
|
309
316
|
visibility: this.active && !this.position && !mobile ? "hidden" : undefined,
|
|
310
317
|
"--swirl-popover-border-radius": borderRadius,
|
|
311
|
-
}, tabindex: "-1" }, h("span", { key: '
|
|
318
|
+
}, tabindex: "-1" }, h("span", { key: '863790e32b28bd549a196a6abeaf7908417d5d1e', class: "popover__handle" }), h("div", { key: '578ddcdeba1d696b71141c0cfe9b0bb582615ca8', class: "popover__scroll-container", part: "popover__scroll-container", ref: (el) => (this.scrollContainer = el), style: {
|
|
312
319
|
maxHeight: !mobile && Boolean(this.maxHeight)
|
|
313
320
|
? this.maxHeight
|
|
314
321
|
: undefined,
|
|
315
|
-
} }, h("slot", { key: '
|
|
322
|
+
} }, h("slot", { key: '4f4e2dd79c4839bde788a50e488aae20210d6536' }))), this.active && (h("div", { key: '6afad234e3b1b7efaabb72613400cdd12a82a517', class: "popover__backdrop", onClick: this.onCloseButtonClick })))));
|
|
316
323
|
}
|
|
317
324
|
static get is() { return "swirl-popover"; }
|
|
318
325
|
static get encapsulation() { return "shadow"; }
|