@getflip/swirl-components 0.426.0 → 0.426.2
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 +40 -5
- package/dist/cjs/swirl-popover_2.cjs.entry.js +39 -18
- package/dist/cjs/swirl-table.cjs.entry.js +1 -1
- package/dist/collection/components/swirl-popover/swirl-popover.js +39 -13
- package/dist/collection/components/swirl-popover-trigger/swirl-popover-trigger.js +20 -7
- package/dist/collection/components/swirl-table/swirl-table.css +11 -4
- package/dist/components/assets/pdfjs/pdf.worker.min.mjs +1 -1
- package/dist/components/swirl-popover-trigger2.js +20 -7
- package/dist/components/swirl-popover2.js +19 -11
- package/dist/components/swirl-table.js +1 -1
- package/dist/esm/swirl-popover_2.entry.js +39 -18
- package/dist/esm/swirl-table.entry.js +1 -1
- package/dist/swirl-components/p-0f84622e.entry.js +1 -0
- package/dist/swirl-components/{p-8c4c52c4.entry.js → p-54d0e3eb.entry.js} +1 -1
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-popover/swirl-popover.d.ts +4 -2
- package/dist/types/components.d.ts +4 -4
- package/package.json +1 -1
- package/dist/swirl-components/p-8949aeeb.entry.js +0 -1
package/components.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"timestamp": "2026-01-
|
|
2
|
+
"timestamp": "2026-01-09T11:50:50",
|
|
3
3
|
"compiler": {
|
|
4
4
|
"name": "@stencil/core",
|
|
5
5
|
"version": "4.35.0",
|
|
@@ -59259,7 +59259,7 @@
|
|
|
59259
59259
|
"docs": ""
|
|
59260
59260
|
},
|
|
59261
59261
|
"complexType": {
|
|
59262
|
-
"signature": "(triggerEl?: HTMLElement, disableFocus?: boolean) => Promise<void>",
|
|
59262
|
+
"signature": "(triggerEl?: HTMLElement, disableFocus?: boolean, via?: SwirlPopoverControlMethod) => Promise<void>",
|
|
59263
59263
|
"parameters": [
|
|
59264
59264
|
{
|
|
59265
59265
|
"name": "triggerEl",
|
|
@@ -59270,6 +59270,11 @@
|
|
|
59270
59270
|
"name": "disableFocus",
|
|
59271
59271
|
"type": "boolean",
|
|
59272
59272
|
"docs": ""
|
|
59273
|
+
},
|
|
59274
|
+
{
|
|
59275
|
+
"name": "via",
|
|
59276
|
+
"type": "\"click\" | \"hover\" | \"programmatic\"",
|
|
59277
|
+
"docs": ""
|
|
59273
59278
|
}
|
|
59274
59279
|
],
|
|
59275
59280
|
"references": {
|
|
@@ -59280,11 +59285,16 @@
|
|
|
59280
59285
|
"HTMLElement": {
|
|
59281
59286
|
"location": "global",
|
|
59282
59287
|
"id": "global::HTMLElement"
|
|
59288
|
+
},
|
|
59289
|
+
"SwirlPopoverControlMethod": {
|
|
59290
|
+
"location": "local",
|
|
59291
|
+
"path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-popover/swirl-popover.tsx",
|
|
59292
|
+
"id": "src/components/swirl-popover/swirl-popover.tsx::SwirlPopoverControlMethod"
|
|
59283
59293
|
}
|
|
59284
59294
|
},
|
|
59285
59295
|
"return": "Promise<void>"
|
|
59286
59296
|
},
|
|
59287
|
-
"signature": "open(triggerEl?: HTMLElement, disableFocus?: boolean) => Promise<void>",
|
|
59297
|
+
"signature": "open(triggerEl?: HTMLElement, disableFocus?: boolean, via?: SwirlPopoverControlMethod) => Promise<void>",
|
|
59288
59298
|
"parameters": [
|
|
59289
59299
|
{
|
|
59290
59300
|
"name": "triggerEl",
|
|
@@ -59295,6 +59305,11 @@
|
|
|
59295
59305
|
"name": "disableFocus",
|
|
59296
59306
|
"type": "boolean",
|
|
59297
59307
|
"docs": ""
|
|
59308
|
+
},
|
|
59309
|
+
{
|
|
59310
|
+
"name": "via",
|
|
59311
|
+
"type": "\"click\" | \"hover\" | \"programmatic\"",
|
|
59312
|
+
"docs": ""
|
|
59298
59313
|
}
|
|
59299
59314
|
],
|
|
59300
59315
|
"docs": "Open the popover.",
|
|
@@ -59311,12 +59326,17 @@
|
|
|
59311
59326
|
"docs": ""
|
|
59312
59327
|
},
|
|
59313
59328
|
"complexType": {
|
|
59314
|
-
"signature": "(triggerEl?: HTMLElement) => Promise<void>",
|
|
59329
|
+
"signature": "(triggerEl?: HTMLElement, via?: SwirlPopoverControlMethod) => Promise<void>",
|
|
59315
59330
|
"parameters": [
|
|
59316
59331
|
{
|
|
59317
59332
|
"name": "triggerEl",
|
|
59318
59333
|
"type": "HTMLElement",
|
|
59319
59334
|
"docs": ""
|
|
59335
|
+
},
|
|
59336
|
+
{
|
|
59337
|
+
"name": "via",
|
|
59338
|
+
"type": "\"click\" | \"hover\" | \"programmatic\"",
|
|
59339
|
+
"docs": ""
|
|
59320
59340
|
}
|
|
59321
59341
|
],
|
|
59322
59342
|
"references": {
|
|
@@ -59327,16 +59347,26 @@
|
|
|
59327
59347
|
"HTMLElement": {
|
|
59328
59348
|
"location": "global",
|
|
59329
59349
|
"id": "global::HTMLElement"
|
|
59350
|
+
},
|
|
59351
|
+
"SwirlPopoverControlMethod": {
|
|
59352
|
+
"location": "local",
|
|
59353
|
+
"path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-popover/swirl-popover.tsx",
|
|
59354
|
+
"id": "src/components/swirl-popover/swirl-popover.tsx::SwirlPopoverControlMethod"
|
|
59330
59355
|
}
|
|
59331
59356
|
},
|
|
59332
59357
|
"return": "Promise<void>"
|
|
59333
59358
|
},
|
|
59334
|
-
"signature": "toggle(triggerEl?: HTMLElement) => Promise<void>",
|
|
59359
|
+
"signature": "toggle(triggerEl?: HTMLElement, via?: SwirlPopoverControlMethod) => Promise<void>",
|
|
59335
59360
|
"parameters": [
|
|
59336
59361
|
{
|
|
59337
59362
|
"name": "triggerEl",
|
|
59338
59363
|
"type": "HTMLElement",
|
|
59339
59364
|
"docs": ""
|
|
59365
|
+
},
|
|
59366
|
+
{
|
|
59367
|
+
"name": "via",
|
|
59368
|
+
"type": "\"click\" | \"hover\" | \"programmatic\"",
|
|
59369
|
+
"docs": ""
|
|
59340
59370
|
}
|
|
59341
59371
|
],
|
|
59342
59372
|
"docs": "Toggles the popover.",
|
|
@@ -83016,6 +83046,11 @@
|
|
|
83016
83046
|
"docstring": "",
|
|
83017
83047
|
"path": "src/components/swirl-popover/swirl-popover.tsx"
|
|
83018
83048
|
},
|
|
83049
|
+
"src/components/swirl-popover/swirl-popover.tsx::SwirlPopoverControlMethod": {
|
|
83050
|
+
"declaration": "export type SwirlPopoverControlMethod = \"click\" | \"hover\" | \"programmatic\";",
|
|
83051
|
+
"docstring": "",
|
|
83052
|
+
"path": "src/components/swirl-popover/swirl-popover.tsx"
|
|
83053
|
+
},
|
|
83019
83054
|
"src/components/swirl-progress-indicator/swirl-progress-indicator.tsx::SwirlProgressIndicatorSize": {
|
|
83020
83055
|
"declaration": "export type SwirlProgressIndicatorSize = \"s\" | \"m\";",
|
|
83021
83056
|
"docstring": "",
|
|
@@ -150,7 +150,8 @@ const SwirlPopover = class {
|
|
|
150
150
|
setTimeout(() => {
|
|
151
151
|
this.active = false;
|
|
152
152
|
this.closing = false;
|
|
153
|
-
this.updateTriggerAttributes();
|
|
153
|
+
this.updateTriggerAttributes(this.openedVia);
|
|
154
|
+
this.openedVia = undefined;
|
|
154
155
|
}, 150);
|
|
155
156
|
this.unlockBodyScroll();
|
|
156
157
|
if (this.returnFocusToTrigger && !disableFocus) {
|
|
@@ -161,14 +162,15 @@ const SwirlPopover = class {
|
|
|
161
162
|
* Open the popover.
|
|
162
163
|
* @returns
|
|
163
164
|
*/
|
|
164
|
-
async open(triggerEl, disableFocus) {
|
|
165
|
+
async open(triggerEl, disableFocus, via) {
|
|
165
166
|
this.triggerEl = triggerEl || this.triggerEl;
|
|
166
167
|
if (this.active || !Boolean(this.triggerEl)) {
|
|
167
168
|
return;
|
|
168
169
|
}
|
|
169
170
|
this.adjustWidth();
|
|
170
171
|
this.active = true;
|
|
171
|
-
this.
|
|
172
|
+
this.openedVia = via;
|
|
173
|
+
this.updateTriggerAttributes(via);
|
|
172
174
|
const focusableChildren = this.getFocusableChildren();
|
|
173
175
|
requestAnimationFrame(async () => {
|
|
174
176
|
await this.reposition();
|
|
@@ -197,12 +199,12 @@ const SwirlPopover = class {
|
|
|
197
199
|
/**
|
|
198
200
|
* Toggles the popover.
|
|
199
201
|
*/
|
|
200
|
-
async toggle(triggerEl) {
|
|
202
|
+
async toggle(triggerEl, via) {
|
|
201
203
|
if (this.active) {
|
|
202
204
|
this.close();
|
|
203
205
|
}
|
|
204
206
|
else {
|
|
205
|
-
this.open(triggerEl);
|
|
207
|
+
this.open(triggerEl, undefined, via);
|
|
206
208
|
}
|
|
207
209
|
}
|
|
208
210
|
connectTrigger() {
|
|
@@ -228,13 +230,19 @@ const SwirlPopover = class {
|
|
|
228
230
|
this.triggerEl)
|
|
229
231
|
: this.triggerEl;
|
|
230
232
|
}
|
|
231
|
-
updateTriggerAttributes() {
|
|
233
|
+
updateTriggerAttributes(controlledVia) {
|
|
232
234
|
if (!Boolean(this.triggerEl)) {
|
|
233
235
|
return;
|
|
234
236
|
}
|
|
235
237
|
const nativeTriggerEl = this.getNativeTriggerElement();
|
|
236
|
-
|
|
237
|
-
|
|
238
|
+
if (controlledVia !== "hover") {
|
|
239
|
+
nativeTriggerEl.setAttribute("aria-controls", this.el.id);
|
|
240
|
+
nativeTriggerEl.setAttribute("aria-expanded", String(this.active));
|
|
241
|
+
}
|
|
242
|
+
else {
|
|
243
|
+
nativeTriggerEl.removeAttribute("aria-controls");
|
|
244
|
+
nativeTriggerEl.removeAttribute("aria-expanded");
|
|
245
|
+
}
|
|
238
246
|
nativeTriggerEl.setAttribute("aria-haspopup", "dialog");
|
|
239
247
|
}
|
|
240
248
|
getFocusableChildren() {
|
|
@@ -286,14 +294,14 @@ const SwirlPopover = class {
|
|
|
286
294
|
"popover--transparent": this.transparent,
|
|
287
295
|
"popover--padded": this.padded,
|
|
288
296
|
});
|
|
289
|
-
return (index.h(index.Host, { key: '
|
|
297
|
+
return (index.h(index.Host, { key: 'cf85cdb6e5d6bd0948b4c80ebc611f5502f37d25', style: { display: this.active ? "inline-flex" : "none" } }, index.h("div", { key: '154ff782097a8e1d90f2a61faaca14bb4871ace5', class: className, onKeyDown: this.onKeydown }, index.h("div", { key: '235a9fca7951e844c8f0a32a02b7235d919574a5', "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: {
|
|
290
298
|
top: Boolean(this.position) ? `${this.position?.y}px` : "",
|
|
291
299
|
left: Boolean(this.position) ? `${this.position?.x}px` : "",
|
|
292
|
-
}, tabindex: "-1" }, index.h("span", { key: '
|
|
300
|
+
}, tabindex: "-1" }, index.h("span", { key: 'd6a84c0e650dea3e490271d7de11eead532602eb', class: "popover__handle" }), index.h("div", { key: '1213a63d107de526f5a91b0a116935f61bba0994', class: "popover__scroll-container", part: "popover__scroll-container", ref: (el) => (this.scrollContainer = el), style: {
|
|
293
301
|
maxHeight: !mobile && Boolean(this.maxHeight)
|
|
294
302
|
? this.maxHeight
|
|
295
303
|
: undefined,
|
|
296
|
-
} }, index.h("slot", { key: '
|
|
304
|
+
} }, index.h("slot", { key: 'c031de0a703d9dff7346cd8cbe40f825c8665f13' }))), this.active && (index.h("div", { key: 'd591f05e7183721ec08188507d8c0a5bb61947dc', class: "popover__backdrop", onClick: this.onCloseButtonClick })))));
|
|
297
305
|
}
|
|
298
306
|
get el() { return index.getElement(this); }
|
|
299
307
|
};
|
|
@@ -332,7 +340,7 @@ const SwirlPopoverTrigger = class {
|
|
|
332
340
|
this.mouseenterHandler = () => {
|
|
333
341
|
const popoverEl = this.getPopoverEl();
|
|
334
342
|
const triggerEl = this.getTriggerEl();
|
|
335
|
-
popoverEl.open(triggerEl, true);
|
|
343
|
+
popoverEl.open(triggerEl, true, "hover");
|
|
336
344
|
popoverEl.addEventListener("popoverOpen", () => {
|
|
337
345
|
this.updateTriggerElAriaAttributes(true);
|
|
338
346
|
}, { once: true });
|
|
@@ -354,7 +362,7 @@ const SwirlPopoverTrigger = class {
|
|
|
354
362
|
return;
|
|
355
363
|
const popoverEl = this.getPopoverEl();
|
|
356
364
|
const triggerEl = this.getTriggerEl();
|
|
357
|
-
popoverEl.toggle(triggerEl);
|
|
365
|
+
popoverEl.toggle(triggerEl, "click");
|
|
358
366
|
popoverEl.addEventListener("popoverOpen", () => {
|
|
359
367
|
this.updateTriggerElAriaAttributes(true);
|
|
360
368
|
}, { once: true });
|
|
@@ -372,13 +380,25 @@ const SwirlPopoverTrigger = class {
|
|
|
372
380
|
}
|
|
373
381
|
const popoverId = this.getPopoverEl()?.id;
|
|
374
382
|
if (triggerEl.tagName.startsWith("SWIRL-")) {
|
|
375
|
-
|
|
376
|
-
|
|
383
|
+
if (!this.triggerOnHover) {
|
|
384
|
+
triggerEl.setAttribute("swirl-aria-controls", popoverId);
|
|
385
|
+
triggerEl.setAttribute("swirl-aria-expanded", String(open || "false"));
|
|
386
|
+
}
|
|
387
|
+
else {
|
|
388
|
+
triggerEl.removeAttribute("swirl-aria-controls");
|
|
389
|
+
triggerEl.removeAttribute("swirl-aria-expanded");
|
|
390
|
+
}
|
|
377
391
|
triggerEl.setAttribute("swirl-aria-haspopup", "dialog");
|
|
378
392
|
}
|
|
379
393
|
else {
|
|
380
|
-
|
|
381
|
-
|
|
394
|
+
if (!this.triggerOnHover) {
|
|
395
|
+
triggerEl.setAttribute("aria-controls", popoverId);
|
|
396
|
+
triggerEl.setAttribute("aria-expanded", String(open || "false"));
|
|
397
|
+
}
|
|
398
|
+
else {
|
|
399
|
+
triggerEl.removeAttribute("aria-controls");
|
|
400
|
+
triggerEl.removeAttribute("aria-expanded");
|
|
401
|
+
}
|
|
382
402
|
triggerEl.setAttribute("aria-haspopup", "dialog");
|
|
383
403
|
}
|
|
384
404
|
};
|
|
@@ -410,6 +430,7 @@ const SwirlPopoverTrigger = class {
|
|
|
410
430
|
this.updateTriggerElAriaAttributes();
|
|
411
431
|
}
|
|
412
432
|
watchHover() {
|
|
433
|
+
this.updateTriggerElAriaAttributes();
|
|
413
434
|
clearTimeout(this.hoverDelayReference);
|
|
414
435
|
clearTimeout(this.hoverLingerReference);
|
|
415
436
|
}
|
|
@@ -456,7 +477,7 @@ const SwirlPopoverTrigger = class {
|
|
|
456
477
|
return isActive;
|
|
457
478
|
}
|
|
458
479
|
render() {
|
|
459
|
-
return (index.h(index.Host, { key: '
|
|
480
|
+
return (index.h(index.Host, { key: 'f47fa501d4706eb541c6d11cc93962339b1d3c59', onClick: this.onClick, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseleave }, index.h("slot", { key: 'e170ef35998bf793fd053dc0c5788c906a4e464b' })));
|
|
460
481
|
}
|
|
461
482
|
get el() { return index.getElement(this); }
|
|
462
483
|
static get watchers() { return {
|
|
@@ -89,7 +89,7 @@ function requireDist () {
|
|
|
89
89
|
var distExports = requireDist();
|
|
90
90
|
var debouncePromise = /*@__PURE__*/index.getDefaultExportFromCjs(distExports);
|
|
91
91
|
|
|
92
|
-
const swirlTableCss = ".sc-swirl-table-h{position:relative;display:block}.sc-swirl-table-h *.sc-swirl-table{box-sizing:border-box}.table--keyboard-move.sc-swirl-table:focus-within{--swirl-table-moving-row-border:var(--s-border-width-default) solid\n var(--s-border-highlight)}.table--show-empty-state.sc-swirl-table .table__empty-row.sc-swirl-table{display:flex}.table__container.sc-swirl-table{position:relative;overflow:auto;width:100%}.table__container--scrolled.sc-swirl-table{--swirl-table-sticky-right-shadow:4px 0 16px -4px rgba
|
|
92
|
+
const swirlTableCss = ".sc-swirl-table-h{--swirl-table-shadow-rgba:rgba(23, 23, 23, 0.2);position:relative;display:block}.sc-swirl-table-h *.sc-swirl-table{box-sizing:border-box}html.theme-dark.sc-swirl-table-h,html.theme-dark .sc-swirl-table-h{--swirl-table-shadow-rgba:rgba(0, 0, 0, 0.2)}.table--keyboard-move.sc-swirl-table:focus-within{--swirl-table-moving-row-border:var(--s-border-width-default) solid\n var(--s-border-highlight)}.table--show-empty-state.sc-swirl-table .table__empty-row.sc-swirl-table{display:flex}.table__container.sc-swirl-table{position:relative;overflow:auto;width:100%}.table__container--scrolled.sc-swirl-table{--swirl-table-sticky-right-shadow:4px 0 16px -4px var(--swirl-table-shadow-rgba),\n 2px 0 4px -2px var(--swirl-table-shadow-rgba)}.table__container--scrollable.sc-swirl-table:not(.table__container--scrolled-to-end){--swirl-table-sticky-left-shadow:0px 4px 16px 0px\n var(--swirl-table-shadow-rgba),\n 0px 1px 4px 0px var(--swirl-table-shadow-rgba)}.table__table.sc-swirl-table{width:-webkit-max-content;width:-moz-max-content;width:max-content;min-width:max(20rem, 100%)}.table__header.sc-swirl-table-s>*,.table__header .sc-swirl-table-s>*{display:flex}.table__empty-row.sc-swirl-table{display:none}.table__empty-row-cell.sc-swirl-table{display:flex;overflow:auto;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);flex-basis:0;flex-grow:1;flex-shrink:1;align-items:center;background-color:var(--s-surface-default)}.table__empty-row-cell.sc-swirl-table>*.sc-swirl-table{flex-grow:1}";
|
|
93
93
|
|
|
94
94
|
const defaultDragDropInstructions = {
|
|
95
95
|
end: "Dropped. Final position in table: {position} of {rowCount}.",
|
|
@@ -145,7 +145,8 @@ export class SwirlPopover {
|
|
|
145
145
|
setTimeout(() => {
|
|
146
146
|
this.active = false;
|
|
147
147
|
this.closing = false;
|
|
148
|
-
this.updateTriggerAttributes();
|
|
148
|
+
this.updateTriggerAttributes(this.openedVia);
|
|
149
|
+
this.openedVia = undefined;
|
|
149
150
|
}, 150);
|
|
150
151
|
this.unlockBodyScroll();
|
|
151
152
|
if (this.returnFocusToTrigger && !disableFocus) {
|
|
@@ -156,14 +157,15 @@ export class SwirlPopover {
|
|
|
156
157
|
* Open the popover.
|
|
157
158
|
* @returns
|
|
158
159
|
*/
|
|
159
|
-
async open(triggerEl, disableFocus) {
|
|
160
|
+
async open(triggerEl, disableFocus, via) {
|
|
160
161
|
this.triggerEl = triggerEl || this.triggerEl;
|
|
161
162
|
if (this.active || !Boolean(this.triggerEl)) {
|
|
162
163
|
return;
|
|
163
164
|
}
|
|
164
165
|
this.adjustWidth();
|
|
165
166
|
this.active = true;
|
|
166
|
-
this.
|
|
167
|
+
this.openedVia = via;
|
|
168
|
+
this.updateTriggerAttributes(via);
|
|
167
169
|
const focusableChildren = this.getFocusableChildren();
|
|
168
170
|
requestAnimationFrame(async () => {
|
|
169
171
|
await this.reposition();
|
|
@@ -192,12 +194,12 @@ export class SwirlPopover {
|
|
|
192
194
|
/**
|
|
193
195
|
* Toggles the popover.
|
|
194
196
|
*/
|
|
195
|
-
async toggle(triggerEl) {
|
|
197
|
+
async toggle(triggerEl, via) {
|
|
196
198
|
if (this.active) {
|
|
197
199
|
this.close();
|
|
198
200
|
}
|
|
199
201
|
else {
|
|
200
|
-
this.open(triggerEl);
|
|
202
|
+
this.open(triggerEl, undefined, via);
|
|
201
203
|
}
|
|
202
204
|
}
|
|
203
205
|
connectTrigger() {
|
|
@@ -223,13 +225,19 @@ export class SwirlPopover {
|
|
|
223
225
|
this.triggerEl)
|
|
224
226
|
: this.triggerEl;
|
|
225
227
|
}
|
|
226
|
-
updateTriggerAttributes() {
|
|
228
|
+
updateTriggerAttributes(controlledVia) {
|
|
227
229
|
if (!Boolean(this.triggerEl)) {
|
|
228
230
|
return;
|
|
229
231
|
}
|
|
230
232
|
const nativeTriggerEl = this.getNativeTriggerElement();
|
|
231
|
-
|
|
232
|
-
|
|
233
|
+
if (controlledVia !== "hover") {
|
|
234
|
+
nativeTriggerEl.setAttribute("aria-controls", this.el.id);
|
|
235
|
+
nativeTriggerEl.setAttribute("aria-expanded", String(this.active));
|
|
236
|
+
}
|
|
237
|
+
else {
|
|
238
|
+
nativeTriggerEl.removeAttribute("aria-controls");
|
|
239
|
+
nativeTriggerEl.removeAttribute("aria-expanded");
|
|
240
|
+
}
|
|
233
241
|
nativeTriggerEl.setAttribute("aria-haspopup", "dialog");
|
|
234
242
|
}
|
|
235
243
|
getFocusableChildren() {
|
|
@@ -281,14 +289,14 @@ export class SwirlPopover {
|
|
|
281
289
|
"popover--transparent": this.transparent,
|
|
282
290
|
"popover--padded": this.padded,
|
|
283
291
|
});
|
|
284
|
-
return (h(Host, { key: '
|
|
292
|
+
return (h(Host, { key: 'cf85cdb6e5d6bd0948b4c80ebc611f5502f37d25', style: { display: this.active ? "inline-flex" : "none" } }, h("div", { key: '154ff782097a8e1d90f2a61faaca14bb4871ace5', class: className, onKeyDown: this.onKeydown }, h("div", { key: '235a9fca7951e844c8f0a32a02b7235d919574a5', "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: {
|
|
285
293
|
top: Boolean(this.position) ? `${this.position?.y}px` : "",
|
|
286
294
|
left: Boolean(this.position) ? `${this.position?.x}px` : "",
|
|
287
|
-
}, tabindex: "-1" }, h("span", { key: '
|
|
295
|
+
}, tabindex: "-1" }, h("span", { key: 'd6a84c0e650dea3e490271d7de11eead532602eb', class: "popover__handle" }), h("div", { key: '1213a63d107de526f5a91b0a116935f61bba0994', class: "popover__scroll-container", part: "popover__scroll-container", ref: (el) => (this.scrollContainer = el), style: {
|
|
288
296
|
maxHeight: !mobile && Boolean(this.maxHeight)
|
|
289
297
|
? this.maxHeight
|
|
290
298
|
: undefined,
|
|
291
|
-
} }, h("slot", { key: '
|
|
299
|
+
} }, h("slot", { key: 'c031de0a703d9dff7346cd8cbe40f825c8665f13' }))), this.active && (h("div", { key: 'd591f05e7183721ec08188507d8c0a5bb61947dc', class: "popover__backdrop", onClick: this.onCloseButtonClick })))));
|
|
292
300
|
}
|
|
293
301
|
static get is() { return "swirl-popover"; }
|
|
294
302
|
static get encapsulation() { return "shadow"; }
|
|
@@ -693,7 +701,7 @@ export class SwirlPopover {
|
|
|
693
701
|
},
|
|
694
702
|
"open": {
|
|
695
703
|
"complexType": {
|
|
696
|
-
"signature": "(triggerEl?: HTMLElement, disableFocus?: boolean) => Promise<void>",
|
|
704
|
+
"signature": "(triggerEl?: HTMLElement, disableFocus?: boolean, via?: SwirlPopoverControlMethod) => Promise<void>",
|
|
697
705
|
"parameters": [{
|
|
698
706
|
"name": "triggerEl",
|
|
699
707
|
"type": "HTMLElement",
|
|
@@ -702,6 +710,10 @@ export class SwirlPopover {
|
|
|
702
710
|
"name": "disableFocus",
|
|
703
711
|
"type": "boolean",
|
|
704
712
|
"docs": ""
|
|
713
|
+
}, {
|
|
714
|
+
"name": "via",
|
|
715
|
+
"type": "\"click\" | \"hover\" | \"programmatic\"",
|
|
716
|
+
"docs": ""
|
|
705
717
|
}],
|
|
706
718
|
"references": {
|
|
707
719
|
"Promise": {
|
|
@@ -711,6 +723,11 @@ export class SwirlPopover {
|
|
|
711
723
|
"HTMLElement": {
|
|
712
724
|
"location": "global",
|
|
713
725
|
"id": "global::HTMLElement"
|
|
726
|
+
},
|
|
727
|
+
"SwirlPopoverControlMethod": {
|
|
728
|
+
"location": "local",
|
|
729
|
+
"path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-popover/swirl-popover.tsx",
|
|
730
|
+
"id": "src/components/swirl-popover/swirl-popover.tsx::SwirlPopoverControlMethod"
|
|
714
731
|
}
|
|
715
732
|
},
|
|
716
733
|
"return": "Promise<void>"
|
|
@@ -745,11 +762,15 @@ export class SwirlPopover {
|
|
|
745
762
|
},
|
|
746
763
|
"toggle": {
|
|
747
764
|
"complexType": {
|
|
748
|
-
"signature": "(triggerEl?: HTMLElement) => Promise<void>",
|
|
765
|
+
"signature": "(triggerEl?: HTMLElement, via?: SwirlPopoverControlMethod) => Promise<void>",
|
|
749
766
|
"parameters": [{
|
|
750
767
|
"name": "triggerEl",
|
|
751
768
|
"type": "HTMLElement",
|
|
752
769
|
"docs": ""
|
|
770
|
+
}, {
|
|
771
|
+
"name": "via",
|
|
772
|
+
"type": "\"click\" | \"hover\" | \"programmatic\"",
|
|
773
|
+
"docs": ""
|
|
753
774
|
}],
|
|
754
775
|
"references": {
|
|
755
776
|
"Promise": {
|
|
@@ -759,6 +780,11 @@ export class SwirlPopover {
|
|
|
759
780
|
"HTMLElement": {
|
|
760
781
|
"location": "global",
|
|
761
782
|
"id": "global::HTMLElement"
|
|
783
|
+
},
|
|
784
|
+
"SwirlPopoverControlMethod": {
|
|
785
|
+
"location": "local",
|
|
786
|
+
"path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-popover/swirl-popover.tsx",
|
|
787
|
+
"id": "src/components/swirl-popover/swirl-popover.tsx::SwirlPopoverControlMethod"
|
|
762
788
|
}
|
|
763
789
|
},
|
|
764
790
|
"return": "Promise<void>"
|
|
@@ -29,7 +29,7 @@ export class SwirlPopoverTrigger {
|
|
|
29
29
|
this.mouseenterHandler = () => {
|
|
30
30
|
const popoverEl = this.getPopoverEl();
|
|
31
31
|
const triggerEl = this.getTriggerEl();
|
|
32
|
-
popoverEl.open(triggerEl, true);
|
|
32
|
+
popoverEl.open(triggerEl, true, "hover");
|
|
33
33
|
popoverEl.addEventListener("popoverOpen", () => {
|
|
34
34
|
this.updateTriggerElAriaAttributes(true);
|
|
35
35
|
}, { once: true });
|
|
@@ -51,7 +51,7 @@ export class SwirlPopoverTrigger {
|
|
|
51
51
|
return;
|
|
52
52
|
const popoverEl = this.getPopoverEl();
|
|
53
53
|
const triggerEl = this.getTriggerEl();
|
|
54
|
-
popoverEl.toggle(triggerEl);
|
|
54
|
+
popoverEl.toggle(triggerEl, "click");
|
|
55
55
|
popoverEl.addEventListener("popoverOpen", () => {
|
|
56
56
|
this.updateTriggerElAriaAttributes(true);
|
|
57
57
|
}, { once: true });
|
|
@@ -69,13 +69,25 @@ export class SwirlPopoverTrigger {
|
|
|
69
69
|
}
|
|
70
70
|
const popoverId = this.getPopoverEl()?.id;
|
|
71
71
|
if (triggerEl.tagName.startsWith("SWIRL-")) {
|
|
72
|
-
|
|
73
|
-
|
|
72
|
+
if (!this.triggerOnHover) {
|
|
73
|
+
triggerEl.setAttribute("swirl-aria-controls", popoverId);
|
|
74
|
+
triggerEl.setAttribute("swirl-aria-expanded", String(open || "false"));
|
|
75
|
+
}
|
|
76
|
+
else {
|
|
77
|
+
triggerEl.removeAttribute("swirl-aria-controls");
|
|
78
|
+
triggerEl.removeAttribute("swirl-aria-expanded");
|
|
79
|
+
}
|
|
74
80
|
triggerEl.setAttribute("swirl-aria-haspopup", "dialog");
|
|
75
81
|
}
|
|
76
82
|
else {
|
|
77
|
-
|
|
78
|
-
|
|
83
|
+
if (!this.triggerOnHover) {
|
|
84
|
+
triggerEl.setAttribute("aria-controls", popoverId);
|
|
85
|
+
triggerEl.setAttribute("aria-expanded", String(open || "false"));
|
|
86
|
+
}
|
|
87
|
+
else {
|
|
88
|
+
triggerEl.removeAttribute("aria-controls");
|
|
89
|
+
triggerEl.removeAttribute("aria-expanded");
|
|
90
|
+
}
|
|
79
91
|
triggerEl.setAttribute("aria-haspopup", "dialog");
|
|
80
92
|
}
|
|
81
93
|
};
|
|
@@ -107,6 +119,7 @@ export class SwirlPopoverTrigger {
|
|
|
107
119
|
this.updateTriggerElAriaAttributes();
|
|
108
120
|
}
|
|
109
121
|
watchHover() {
|
|
122
|
+
this.updateTriggerElAriaAttributes();
|
|
110
123
|
clearTimeout(this.hoverDelayReference);
|
|
111
124
|
clearTimeout(this.hoverLingerReference);
|
|
112
125
|
}
|
|
@@ -153,7 +166,7 @@ export class SwirlPopoverTrigger {
|
|
|
153
166
|
return isActive;
|
|
154
167
|
}
|
|
155
168
|
render() {
|
|
156
|
-
return (h(Host, { key: '
|
|
169
|
+
return (h(Host, { key: 'f47fa501d4706eb541c6d11cc93962339b1d3c59', onClick: this.onClick, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseleave }, h("slot", { key: 'e170ef35998bf793fd053dc0c5788c906a4e464b' })));
|
|
157
170
|
}
|
|
158
171
|
static get is() { return "swirl-popover-trigger"; }
|
|
159
172
|
static get encapsulation() { return "scoped"; }
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
:host {
|
|
2
|
+
--swirl-table-shadow-rgba: rgba(23, 23, 23, 0.2);
|
|
3
|
+
|
|
2
4
|
position: relative;
|
|
3
5
|
display: block;
|
|
4
6
|
}
|
|
@@ -7,6 +9,10 @@
|
|
|
7
9
|
box-sizing: border-box;
|
|
8
10
|
}
|
|
9
11
|
|
|
12
|
+
:host-context(html.theme-dark) {
|
|
13
|
+
--swirl-table-shadow-rgba: rgba(0, 0, 0, 0.2);
|
|
14
|
+
}
|
|
15
|
+
|
|
10
16
|
.table--keyboard-move:focus-within {
|
|
11
17
|
--swirl-table-moving-row-border: var(--s-border-width-default) solid
|
|
12
18
|
var(--s-border-highlight);
|
|
@@ -23,13 +29,14 @@
|
|
|
23
29
|
}
|
|
24
30
|
|
|
25
31
|
.table__container--scrolled {
|
|
26
|
-
--swirl-table-sticky-right-shadow: 4px 0 16px -4px rgba
|
|
27
|
-
2px 0 4px -2px rgba
|
|
32
|
+
--swirl-table-sticky-right-shadow: 4px 0 16px -4px var(--swirl-table-shadow-rgba),
|
|
33
|
+
2px 0 4px -2px var(--swirl-table-shadow-rgba);
|
|
28
34
|
}
|
|
29
35
|
|
|
30
36
|
.table__container--scrollable:not(.table__container--scrolled-to-end) {
|
|
31
|
-
--swirl-table-sticky-left-shadow: 0px 4px 16px 0px
|
|
32
|
-
|
|
37
|
+
--swirl-table-sticky-left-shadow: 0px 4px 16px 0px
|
|
38
|
+
var(--swirl-table-shadow-rgba),
|
|
39
|
+
0px 1px 4px 0px var(--swirl-table-shadow-rgba);
|
|
33
40
|
}
|
|
34
41
|
|
|
35
42
|
.table__table {
|