@getflip/swirl-components 0.525.0 → 0.527.0
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 +144 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/swirl-avatar-group.cjs.entry.js +4 -7
- package/dist/cjs/swirl-components.cjs.js +1 -1
- package/dist/cjs/swirl-data-cell-stack.cjs.entry.js +1 -1
- package/dist/cjs/swirl-data-cell.cjs.entry.js +15 -5
- package/dist/cjs/swirl-modal.cjs.entry.js +11 -8
- package/dist/collection/components/swirl-avatar-group/swirl-avatar-group.css +22 -22
- package/dist/collection/components/swirl-avatar-group/swirl-avatar-group.js +3 -6
- package/dist/collection/components/swirl-avatar-group/swirl-avatar-group.stories.js +14 -9
- package/dist/collection/components/swirl-data-cell/swirl-data-cell.css +60 -0
- package/dist/collection/components/swirl-data-cell/swirl-data-cell.js +98 -4
- package/dist/collection/components/swirl-data-cell/swirl-data-cell.stories.js +21 -0
- package/dist/collection/components/swirl-data-cell-stack/swirl-data-cell-stack.css +24 -0
- package/dist/collection/components/swirl-modal/swirl-modal.js +30 -8
- package/dist/collection/components/swirl-modal/swirl-modal.stories.js +3 -0
- package/dist/components/swirl-avatar-group.js +1 -1
- package/dist/components/swirl-data-cell-stack.js +1 -1
- package/dist/components/swirl-data-cell.js +1 -1
- package/dist/components/swirl-modal.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/swirl-avatar-group.entry.js +4 -7
- package/dist/esm/swirl-components.js +1 -1
- package/dist/esm/swirl-data-cell-stack.entry.js +1 -1
- package/dist/esm/swirl-data-cell.entry.js +15 -5
- package/dist/esm/swirl-modal.entry.js +11 -8
- package/dist/swirl-components/p-222adad0.entry.js +1 -0
- package/dist/swirl-components/p-9d0a7cfc.entry.js +1 -0
- package/dist/swirl-components/p-c451c3fe.entry.js +1 -0
- package/dist/swirl-components/p-e80f6555.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-avatar-group/swirl-avatar-group.stories.d.ts +1 -0
- package/dist/types/components/swirl-data-cell/swirl-data-cell.d.ts +5 -0
- package/dist/types/components/swirl-data-cell/swirl-data-cell.stories.d.ts +1 -0
- package/dist/types/components/swirl-modal/swirl-modal.d.ts +1 -0
- package/dist/types/components/swirl-modal/swirl-modal.stories.d.ts +3 -0
- package/dist/types/components.d.ts +29 -2
- package/package.json +1 -1
- package/vscode-data.json +28 -0
- package/dist/swirl-components/p-0f092b29.entry.js +0 -1
- package/dist/swirl-components/p-25323c77.entry.js +0 -1
- package/dist/swirl-components/p-2b5d5d76.entry.js +0 -1
- package/dist/swirl-components/p-c24c27fd.entry.js +0 -1
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, a as Host, d as getElement } from './index-BdGaOt5L.js';
|
|
2
2
|
import { c as classnames } from './index-orsBiyT_.js';
|
|
3
3
|
|
|
4
|
-
const swirlDataCellCss = () => `:host{display:block;width:100%}:host *{box-sizing:border-box}.data-cell{display:flex;align-items:center;gap:var(--s-space-8);width:100%;padding:var(--s-space-12) var(--s-space-16);border-radius:var(--swirl-data-cell-border-radius, var(--s-border-radius-l))}.data-cell--interactive{cursor:pointer}.data-cell--intent-default{background-color:var(--s-surface-raised-50-default)}.data-cell--intent-info{background-color:var(--s-surface-info-subdued)}.data-cell--intent-critical{background-color:var(--s-surface-critical-subdued)}.data-cell--intent-warning{background-color:var(--s-surface-warning-subdued)}.data-cell--intent-success{background-color:var(--s-surface-success-subdued)}.data-cell--intent-special{background-color:var(--s-decorative-grape-surface-subdued)}.data-cell--intent-translucent{background-color:var(--s-surface-on-image-default)}.data-cell--intent-subdued{background-color:var(--s-surface-raised-default)}.data-cell--vertical{align-items:center}.data-cell__media{flex-shrink:0;display:flex;align-items:center}.data-cell__media ::slotted(swirl-avatar){--swirl-avatar-background-color:var(--s-surface-default)}.data-cell__content{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:var(--s-space-24)}.data-cell--no-label .data-cell__content,.data-cell--no-label .data-cell__value-wrapper,.data-cell--no-label .data-cell__input{width:100%}.data-cell--vertical .data-cell__content{flex-direction:column;align-items:flex-start;gap:var(--s-space-4)}.data-cell__label-wrapper{flex-shrink:0;min-width:0}.data-cell:not(.data-cell--vertical) .data-cell__label-wrapper{width:calc(160px + var(--s-space-4) + 16px)}.data-cell__label{display:block;font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);color:var(--s-text-subdued);font-weight:var(--s-font-weight-normal)}.data-cell:not(.data-cell--vertical) .data-cell__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px}.data-cell__tooltip swirl-icon-info{flex-shrink:0;color:var(--s-text-subdued)}.data-cell__value-wrapper{display:flex;align-items:center;gap:var(--s-space-4);flex-shrink:1;min-width:0}.data-cell--vertical .data-cell__value-wrapper{flex-direction:column;align-items:flex-start}.data-cell__value{flex:1;min-width:0;font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);color:var(--s-text-default);font-weight:var(--s-font-weight-semibold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.data-cell--vertical .data-cell__value{white-space:normal;overflow:visible;text-overflow:clip}.data-cell__suffix{flex-shrink:0}.data-cell__input{width:100%;--swirl-form-control-label-background-color:var( --swirl-data-cell-input-background, var(--s-surface-default) )}.data-cell__input ::slotted(swirl-checkbox),.data-cell__input ::slotted(swirl-radio){width:100%}@media (max-width: 767px){.data-cell:not(.data-cell--vertical) .data-cell__content{flex-direction:column;align-items:flex-start;gap:var(--s-space-4)}.data-cell:not(.data-cell--vertical) .data-cell__value-wrapper{flex-direction:column;align-items:flex-start}}`;
|
|
4
|
+
const swirlDataCellCss = () => `:host{display:block;width:100%}:host *{box-sizing:border-box}.data-cell{display:flex;align-items:center;gap:var(--s-space-8);width:100%;padding:var(--s-space-12) var(--s-space-16);border:0;border-radius:var(--swirl-data-cell-border-radius, var(--s-border-radius-l));color:inherit;font:inherit;text-align:left;text-decoration:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.data-cell--interactive{position:relative;cursor:pointer}.data-cell--interactive::after{position:absolute;inset:0;border-radius:inherit;content:"";pointer-events:none}.data-cell--interactive:hover::after{background-color:var(--s-state-hovered)}.data-cell--interactive:active::after{background-color:var(--s-state-pressed)}.data-cell--interactive:focus:not(:focus-visible){outline:none}.data-cell--interactive:focus-visible{outline-color:var(--s-focus-default)}.data-cell--interactive.data-cell--intent-default:hover{background-color:var(--s-surface-raised-50-hovered)}.data-cell--interactive.data-cell--intent-default:active{background-color:var(--s-surface-raised-50-pressed)}.data-cell--interactive.data-cell--intent-default:hover::after,.data-cell--interactive.data-cell--intent-default:active::after{background-color:transparent}.data-cell--intent-default{background-color:var(--s-surface-raised-50-default)}.data-cell--intent-info{background-color:var(--s-surface-info-subdued)}.data-cell--intent-critical{background-color:var(--s-surface-critical-subdued)}.data-cell--intent-warning{background-color:var(--s-surface-warning-subdued)}.data-cell--intent-success{background-color:var(--s-surface-success-subdued)}.data-cell--intent-special{background-color:var(--s-decorative-grape-surface-subdued)}.data-cell--intent-translucent{background-color:var(--s-surface-on-image-default)}.data-cell--intent-subdued{background-color:var(--s-surface-raised-default)}.data-cell--size-s{gap:var(--s-space-4);padding:var(--s-space-8);border-radius:var(--swirl-data-cell-border-radius, var(--s-border-radius-s))}.data-cell--size-s .data-cell__content{gap:var(--s-space-8)}.data-cell--size-s .data-cell__value{font-weight:var(--s-font-weight-medium)}.data-cell--vertical{align-items:center}.data-cell__media{flex-shrink:0;display:flex;align-items:center}.data-cell__media ::slotted(swirl-avatar){--swirl-avatar-background-color:var(--s-surface-default)}.data-cell__content{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:var(--s-space-24)}.data-cell--no-label .data-cell__content,.data-cell--no-label .data-cell__value-wrapper,.data-cell--no-label .data-cell__input{width:100%}.data-cell--vertical .data-cell__content{flex-direction:column;align-items:flex-start;gap:var(--s-space-4)}.data-cell__label-wrapper{flex-shrink:0;min-width:0}.data-cell:not(.data-cell--vertical) .data-cell__label-wrapper{width:calc(160px + var(--s-space-4) + 16px)}.data-cell__label{display:block;font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);color:var(--s-text-subdued);font-weight:var(--s-font-weight-normal)}.data-cell:not(.data-cell--vertical) .data-cell__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px}.data-cell__tooltip swirl-icon-info{flex-shrink:0;color:var(--s-text-subdued)}.data-cell__value-wrapper{display:flex;align-items:center;gap:var(--s-space-4);flex-shrink:1;min-width:0}.data-cell--vertical .data-cell__value-wrapper{flex-direction:column;align-items:flex-start}.data-cell__value{flex:1;min-width:0;font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);color:var(--s-text-default);font-weight:var(--s-font-weight-semibold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.data-cell--vertical .data-cell__value{white-space:normal;overflow:visible;text-overflow:clip}.data-cell__suffix{flex-shrink:0}.data-cell__input{width:100%;--swirl-form-control-label-background-color:var( --swirl-data-cell-input-background, var(--s-surface-default) )}.data-cell__input ::slotted(swirl-checkbox),.data-cell__input ::slotted(swirl-radio){width:100%}@media (max-width: 767px){.data-cell:not(.data-cell--vertical) .data-cell__content{flex-direction:column;align-items:flex-start;gap:var(--s-space-4)}.data-cell:not(.data-cell--vertical) .data-cell__value-wrapper{flex-direction:column;align-items:flex-start}}`;
|
|
5
5
|
|
|
6
6
|
const SwirlDataCell = class {
|
|
7
7
|
constructor(hostRef) {
|
|
8
8
|
registerInstance(this, hostRef);
|
|
9
9
|
this.valueChange = createEvent(this, "valueChange", 7);
|
|
10
10
|
this.intent = "default";
|
|
11
|
+
this.interactive = false;
|
|
12
|
+
this.size = "m";
|
|
11
13
|
this.vertical = false;
|
|
12
14
|
this.elementId = `data-cell-${crypto.randomUUID()}`;
|
|
13
15
|
this.handleRadioClick = (event) => {
|
|
@@ -34,13 +36,14 @@ const SwirlDataCell = class {
|
|
|
34
36
|
"SWIRL-DATA-CELL");
|
|
35
37
|
const hasCheckbox = Boolean(this.el.querySelector('swirl-checkbox[slot="content"]'));
|
|
36
38
|
const hasRadio = Boolean(this.el.querySelector('swirl-radio[slot="content"]'));
|
|
37
|
-
const
|
|
39
|
+
const isInteractive = this.interactive || Boolean(this.href);
|
|
40
|
+
const className = classnames("data-cell", `data-cell--size-${this.size}`, {
|
|
38
41
|
"data-cell--vertical": this.vertical,
|
|
39
42
|
"data-cell--has-media": hasMedia,
|
|
40
43
|
"data-cell--has-suffix": hasSuffix,
|
|
41
44
|
"data-cell--has-content": hasContent,
|
|
42
45
|
"data-cell--no-label": !hasLabel,
|
|
43
|
-
"data-cell--interactive": hasCheckbox || hasRadio,
|
|
46
|
+
"data-cell--interactive": isInteractive || hasCheckbox || hasRadio,
|
|
44
47
|
[`data-cell--intent-${this.intent}`]: this.intent,
|
|
45
48
|
});
|
|
46
49
|
const labelId = `${this.elementId}-label`;
|
|
@@ -49,8 +52,15 @@ const SwirlDataCell = class {
|
|
|
49
52
|
const hostRole = isInDataCellStack ? "listitem" : "group";
|
|
50
53
|
const contentRole = hasCheckbox || hasRadio ? "button" : undefined;
|
|
51
54
|
const wrapperRole = isInDataCellStack && !contentRole ? "group" : contentRole;
|
|
52
|
-
const
|
|
53
|
-
|
|
55
|
+
const Tag = Boolean(this.href) ? "a" : this.interactive ? "button" : "div";
|
|
56
|
+
const labelContent = (h("swirl-stack", { key: '02d9b33111b38a7e01c215ab22316e4702273d2f', orientation: "horizontal", align: "center", spacing: "4" }, h("span", { key: '7c214d31b78bc9ed73bef749144fb090845be335', class: "data-cell__label", id: labelId, role: isInteractive ? undefined : "term" }, this.label), this.tooltip && (h("swirl-tooltip", { key: '5507dcf689141cf6492a0e0ebbac7f6d30bb9571', class: "data-cell__tooltip", content: this.tooltip, position: "right" }, h("swirl-icon-info", { key: 'ffd009f55337721081dd67811178625da5296395', size: 16, tabIndex: 0 })))));
|
|
57
|
+
return (h(Host, { key: '3938b80ef59b8499ca122057cb2a601215fe63ca', role: hostRole }, h(Tag, { key: 'd5e938b1e20cbd8ae35b3010e69655f04f31c4b3', class: className, href: this.href, onClick: hasCheckbox || hasRadio ? this.handleClick : undefined, part: "data-cell", rel: Boolean(this.href) && this.linkTarget === "_blank"
|
|
58
|
+
? "noreferrer"
|
|
59
|
+
: undefined, role: isInteractive ? undefined : wrapperRole, tabIndex: isInteractive ? undefined : hasCheckbox || hasRadio ? 0 : undefined, target: this.linkTarget, type: Boolean(this.href)
|
|
60
|
+
? undefined
|
|
61
|
+
: this.interactive
|
|
62
|
+
? "button"
|
|
63
|
+
: undefined }, hasMedia && (h("div", { key: '11698c07d07a15d3e1402d5e7f06549ce12fec19', class: "data-cell__media", "aria-hidden": "true" }, h("slot", { key: '6c98bbb53fae7915300beafb9dbecc35aff6287c', name: "media" }))), h("div", { key: '9370d31ac4d2d23dc0f40bb3ece90a608e182b83', class: "data-cell__content" }, hasLabel && (h("div", { key: 'a5ce98e4af9f182a159e15ca5b967a506f5771e3', class: "data-cell__label-wrapper" }, labelContent)), (hasContent || this.value || hasSuffix) && (h("div", { key: '2360d1c1af966919370d00c44217314b7d91eece', class: "data-cell__value-wrapper", role: isInteractive ? undefined : "definition", "aria-labelledby": hasLabel && !isInteractive ? labelId : undefined, id: valueId }, hasContent ? (h("div", { class: "data-cell__input" }, h("slot", { name: "content" }))) : (this.value && h("div", { class: "data-cell__value" }, this.value))))), hasSuffix && (h("div", { key: '85482b447cb0d16b3c738a78f943ae8fd26281d8', class: "data-cell__suffix" }, h("slot", { key: '0568683b289f22aed8aa6e0fc621c36d50b4d177', name: "suffix" }))))));
|
|
54
64
|
}
|
|
55
65
|
get el() { return getElement(this); }
|
|
56
66
|
};
|
|
@@ -66,6 +66,9 @@ const SwirlModal = class {
|
|
|
66
66
|
}
|
|
67
67
|
};
|
|
68
68
|
this.onBackdropClick = () => {
|
|
69
|
+
if (this.disableBackdropClose) {
|
|
70
|
+
return;
|
|
71
|
+
}
|
|
69
72
|
this.close();
|
|
70
73
|
};
|
|
71
74
|
this.onCloseButtonClick = () => {
|
|
@@ -293,29 +296,29 @@ const SwirlModal = class {
|
|
|
293
296
|
"modal--show-backdrop": this.showBackdrop === true,
|
|
294
297
|
"modal--hide-backdrop": this.showBackdrop === false,
|
|
295
298
|
});
|
|
296
|
-
return (h(Host, { key: '
|
|
299
|
+
return (h(Host, { key: '23fc47450954cdec1465b6cacc87665b74392b40' }, h("dialog", { key: 'bdee3e6f0b8903e63341b93e73525387d4878229', "aria-label": this.label, class: className, onClose: this.onClose, onKeyDown: this.onKeyDown, onToggle: this.onToggle, ref: (el) => (this.modalEl = el) }, h("div", { key: '3b880ae4075a3249f2a56a424db3269183cc160d', class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { key: 'df55123f4afffde7862c80f99166d4dcc28c227e', class: "modal__body", part: "modal__body", style: !this.isFullscreen
|
|
297
300
|
? {
|
|
298
301
|
"--swirl-modal-max-height": this.maxHeight,
|
|
299
302
|
"--swirl-modal-height": this.height,
|
|
300
303
|
minHeight: this.minHeight,
|
|
301
304
|
maxWidth: this.maxWidth,
|
|
302
305
|
}
|
|
303
|
-
: {} }, h("aside", { key: '
|
|
306
|
+
: {} }, h("aside", { key: 'f3b77cc6ef02ffe087f7e6701deb79c6edc0d45e', class: "modal__sidebar" }, this.sidebarLabel && (h("header", { key: 'ed35b62a6ec6d77a9360ffa80b9effab505c4f4e', class: classnames("modal__sidebar-header", {
|
|
304
307
|
"modal__sidebar-header--has-close-button": this.hasSidebarCloseButton,
|
|
305
|
-
}) }, this.hasSidebarCloseButton && (h("swirl-button", { key: '
|
|
308
|
+
}) }, this.hasSidebarCloseButton && (h("swirl-button", { key: 'd73cb3f8b8d032245a4efbb4fba158bde22e19d2', hideLabel: true, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick })), h("swirl-heading", { key: '9529520318f4ee7ace2adb71927f2587c22c01b4', as: "h3", class: "modal__sidebar-heading", level: 5, text: this.sidebarLabel }))), h("div", { key: 'b9893e1d9193c99c53a33c02773e96d4611b3040', class: "modal__sidebar-content", onScroll: this.determineSidebarScrollStatus, ref: (el) => (this.sidebarScrollContainer = el) }, h("slot", { key: '6086f942484525006d1de352ced3693f2afac73c', name: "sidebar-content", onSlotchange: this.updateSidebarContentStatus })), h("div", { key: '7911c4c01757dc9157a611558d7830997891032a', class: "modal__sidebar-footer", part: "modal__sidebar-footer" }, h("slot", { key: '4154270c217c274954ae83060fc31069e2696c2e', name: "sidebar-footer", onSlotchange: this.updateSidebarFooterStatus }))), h("div", { key: '5e78d1d3053ff0f54331ec072878084720b31110', class: "modal__main-content" }, h("header", { key: '84bf917f205c56a871e13fbcb749690bba1cbb06', class: "modal__custom-header", part: "modal__custom-header" }, h("slot", { key: '5fd2bb6788938d18f9e40cfe42eaa8b36379e6ad', name: "custom-header", onSlotchange: this.updateCustomHeaderStatus })), (!this.hideLabel || !this.hideCloseButton) && (h("header", { key: 'c6c03d149d8e1c15e491e1ed7071821348b76c1f', class: "modal__header" }, h("div", { key: '45235c736ee6686599513f1f80bff3b68c0a100e', class: "modal__header-bar" }, !this.hideCloseButton && (h("swirl-button", { key: '2c6edcc7f1bcd33fcf880fa48567f6eddc067afd', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
|
|
306
309
|
? "<swirl-icon-close></swirl-icon-close>"
|
|
307
|
-
: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showFullscreenButton && (h("swirl-button", { key: '
|
|
310
|
+
: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showFullscreenButton && (h("swirl-button", { key: '673043a824362619f11c54f31a15fa9477117883', class: "modal__fullscreen-button", hideLabel: true, icon: this.isFullscreen
|
|
308
311
|
? "<swirl-icon-close-fullscreen></swirl-icon-close-fullscreen>"
|
|
309
312
|
: "<swirl-icon-open-in-full></swirl-icon-open-in-full>", label: this.isFullscreen
|
|
310
313
|
? this.fullscreenDisableButtonLabel
|
|
311
|
-
: this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (h("swirl-heading", { key: '
|
|
314
|
+
: this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (h("swirl-heading", { key: '1719c5b97263cf10c305770607eb1ea7145acb51', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), h("div", { key: 'c32ad1be58ce0bfd733a059fabc88411a810de30', class: "modal__content-container", style: {
|
|
312
315
|
gap: this.contentGap
|
|
313
316
|
? `var(--s-space-${this.contentGap})`
|
|
314
317
|
: undefined,
|
|
315
|
-
} }, h("div", { key: '
|
|
318
|
+
} }, h("div", { key: '8d7a796fc546b0b7bebfa213f831c628393f9dfe', class: "modal__primary-content", style: {
|
|
316
319
|
maxWidth: this.primaryContentMaxWidth,
|
|
317
320
|
flex: this.primaryContentFlex,
|
|
318
|
-
} }, h("div", { key: '
|
|
321
|
+
} }, h("div", { key: '7299870c633ed4456d08d22dc1eb750e4898b41c', class: "modal__header-tools", part: "modal__header-tools" }, h("slot", { key: '27b39b1bbceb3890fd3f2dea32642a901c87c076', name: "header-tools", onSlotchange: this.updateHeaderToolsStatus })), h("div", { key: 'f8336f9a3638c1e9285d94900764f09293aa6c30', class: "modal__content", onScroll: this.determineMainScrollStatus, part: "modal__content", ref: (el) => (this.scrollContainer = el) }, h("slot", { key: '57fad6f717f5256c938b0142b88c42d59dc968e3' }))), h("div", { key: '05ab11a1b5ff7804a6b56041fdfcf4230f414ba4', class: "modal__secondary-content", style: {
|
|
319
322
|
maxWidth: this.secondaryContentMaxWidth,
|
|
320
323
|
flex: this.secondaryContentFlex,
|
|
321
324
|
padding: Boolean(this.secondaryContentPadding)
|
|
@@ -333,7 +336,7 @@ const SwirlModal = class {
|
|
|
333
336
|
paddingInlineStart: Boolean(this.secondaryContentPaddingInlineStart)
|
|
334
337
|
? `var(--s-space-${this.secondaryContentPaddingInlineStart})`
|
|
335
338
|
: undefined,
|
|
336
|
-
} }, h("slot", { key: '
|
|
339
|
+
} }, h("slot", { key: '6602b580cc959944932c42bfe74f838fa7dc37a4', name: "secondary-content", onSlotchange: this.updateSecondaryContentStatus }))), h("div", { key: '17afe035cebb37925f6cf912448a29db22359ee6', class: "modal__custom-footer" }, h("slot", { key: '44c6d8340fc1b9c32521cc61ed0b5b4cee37ec50', name: "custom-footer", onSlotchange: this.updateCustomFooterStatus })), showControls && (h("footer", { key: '6e7732616ce97db76e752bdd8c3e540d380c3fe7', class: "modal__controls" }, h("swirl-button-group", { key: '146060354a8cd62c236d025b576ef48a357be7f2', wrap: true }, this.secondaryActionLabel && (h("swirl-button", { key: 'eabd37aa403ab8b87fc6edb76821f3ccb25e8f7d', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: '6988e29d8e1caf2faa8dfbbce0ef454e4552fdee', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))))));
|
|
337
340
|
}
|
|
338
341
|
get el() { return getElement(this); }
|
|
339
342
|
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as a,c as e,h as t,a as l,d as i}from"./p-BdGaOt5L.js";import{c}from"./p-orsBiyT_.js";const s=class{constructor(t){a(this,t),this.valueChange=e(this,"valueChange",7),this.intent="default",this.interactive=!1,this.size="m",this.vertical=!1,this.elementId=`data-cell-${crypto.randomUUID()}`,this.handleRadioClick=a=>{const e=a.target,t=this.el.querySelector('swirl-radio[slot="content"]');if(e.contains(t)){const a=t?.querySelector('input[type="radio"]');a.click()}},this.handleClick=a=>{this.handleRadioClick(a),this.valueChange.emit(a)}}render(){const a=Boolean("SWIRL-DATA-CELL"===this.el.querySelector('[slot="media"]')?.parentElement.tagName),e=Boolean("SWIRL-DATA-CELL"===this.el.querySelector('[slot="suffix"]')?.parentElement.tagName),i=Boolean(this.label),s=Boolean("SWIRL-DATA-CELL"===this.el.querySelector('[slot="content"]')?.parentElement.tagName),r=Boolean(this.el.querySelector('swirl-checkbox[slot="content"]')),d=Boolean(this.el.querySelector('swirl-radio[slot="content"]')),o=this.interactive||Boolean(this.href),n=c("data-cell",`data-cell--size-${this.size}`,{"data-cell--vertical":this.vertical,"data-cell--has-media":a,"data-cell--has-suffix":e,"data-cell--has-content":s,"data-cell--no-label":!i,"data-cell--interactive":o||r||d,[`data-cell--intent-${this.intent}`]:this.intent}),f=`${this.elementId}-label`,u=`${this.elementId}-value`,v="SWIRL-DATA-CELL-STACK"===this.el.parentElement?.tagName,b=v?"listitem":"group",h=r||d?"button":void 0,p=v&&!h?"group":h,_=Boolean(this.href)?"a":this.interactive?"button":"div",g=t("swirl-stack",{key:"02d9b33111b38a7e01c215ab22316e4702273d2f",orientation:"horizontal",align:"center",spacing:"4"},t("span",{key:"7c214d31b78bc9ed73bef749144fb090845be335",class:"data-cell__label",id:f,role:o?void 0:"term"},this.label),this.tooltip&&t("swirl-tooltip",{key:"5507dcf689141cf6492a0e0ebbac7f6d30bb9571",class:"data-cell__tooltip",content:this.tooltip,position:"right"},t("swirl-icon-info",{key:"ffd009f55337721081dd67811178625da5296395",size:16,tabIndex:0})));return t(l,{key:"3938b80ef59b8499ca122057cb2a601215fe63ca",role:b},t(_,{key:"d5e938b1e20cbd8ae35b3010e69655f04f31c4b3",class:n,href:this.href,onClick:r||d?this.handleClick:void 0,part:"data-cell",rel:Boolean(this.href)&&"_blank"===this.linkTarget?"noreferrer":void 0,role:o?void 0:p,tabIndex:o?void 0:r||d?0:void 0,target:this.linkTarget,type:Boolean(this.href)?void 0:this.interactive?"button":void 0},a&&t("div",{key:"11698c07d07a15d3e1402d5e7f06549ce12fec19",class:"data-cell__media","aria-hidden":"true"},t("slot",{key:"6c98bbb53fae7915300beafb9dbecc35aff6287c",name:"media"})),t("div",{key:"9370d31ac4d2d23dc0f40bb3ece90a608e182b83",class:"data-cell__content"},i&&t("div",{key:"a5ce98e4af9f182a159e15ca5b967a506f5771e3",class:"data-cell__label-wrapper"},g),(s||this.value||e)&&t("div",{key:"2360d1c1af966919370d00c44217314b7d91eece",class:"data-cell__value-wrapper",role:o?void 0:"definition","aria-labelledby":i&&!o?f:void 0,id:u},s?t("div",{class:"data-cell__input"},t("slot",{name:"content"})):this.value&&t("div",{class:"data-cell__value"},this.value))),e&&t("div",{key:"85482b447cb0d16b3c738a78f943ae8fd26281d8",class:"data-cell__suffix"},t("slot",{key:"0568683b289f22aed8aa6e0fc621c36d50b4d177",name:"suffix"}))))}get el(){return i(this)}};s.style=':host{display:block;width:100%}:host *{box-sizing:border-box}.data-cell{display:flex;align-items:center;gap:var(--s-space-8);width:100%;padding:var(--s-space-12) var(--s-space-16);border:0;border-radius:var(--swirl-data-cell-border-radius, var(--s-border-radius-l));color:inherit;font:inherit;text-align:left;text-decoration:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.data-cell--interactive{position:relative;cursor:pointer}.data-cell--interactive::after{position:absolute;inset:0;border-radius:inherit;content:"";pointer-events:none}.data-cell--interactive:hover::after{background-color:var(--s-state-hovered)}.data-cell--interactive:active::after{background-color:var(--s-state-pressed)}.data-cell--interactive:focus:not(:focus-visible){outline:none}.data-cell--interactive:focus-visible{outline-color:var(--s-focus-default)}.data-cell--interactive.data-cell--intent-default:hover{background-color:var(--s-surface-raised-50-hovered)}.data-cell--interactive.data-cell--intent-default:active{background-color:var(--s-surface-raised-50-pressed)}.data-cell--interactive.data-cell--intent-default:hover::after,.data-cell--interactive.data-cell--intent-default:active::after{background-color:transparent}.data-cell--intent-default{background-color:var(--s-surface-raised-50-default)}.data-cell--intent-info{background-color:var(--s-surface-info-subdued)}.data-cell--intent-critical{background-color:var(--s-surface-critical-subdued)}.data-cell--intent-warning{background-color:var(--s-surface-warning-subdued)}.data-cell--intent-success{background-color:var(--s-surface-success-subdued)}.data-cell--intent-special{background-color:var(--s-decorative-grape-surface-subdued)}.data-cell--intent-translucent{background-color:var(--s-surface-on-image-default)}.data-cell--intent-subdued{background-color:var(--s-surface-raised-default)}.data-cell--size-s{gap:var(--s-space-4);padding:var(--s-space-8);border-radius:var(--swirl-data-cell-border-radius, var(--s-border-radius-s))}.data-cell--size-s .data-cell__content{gap:var(--s-space-8)}.data-cell--size-s .data-cell__value{font-weight:var(--s-font-weight-medium)}.data-cell--vertical{align-items:center}.data-cell__media{flex-shrink:0;display:flex;align-items:center}.data-cell__media ::slotted(swirl-avatar){--swirl-avatar-background-color:var(--s-surface-default)}.data-cell__content{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:var(--s-space-24)}.data-cell--no-label .data-cell__content,.data-cell--no-label .data-cell__value-wrapper,.data-cell--no-label .data-cell__input{width:100%}.data-cell--vertical .data-cell__content{flex-direction:column;align-items:flex-start;gap:var(--s-space-4)}.data-cell__label-wrapper{flex-shrink:0;min-width:0}.data-cell:not(.data-cell--vertical) .data-cell__label-wrapper{width:calc(160px + var(--s-space-4) + 16px)}.data-cell__label{display:block;font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);color:var(--s-text-subdued);font-weight:var(--s-font-weight-normal)}.data-cell:not(.data-cell--vertical) .data-cell__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px}.data-cell__tooltip swirl-icon-info{flex-shrink:0;color:var(--s-text-subdued)}.data-cell__value-wrapper{display:flex;align-items:center;gap:var(--s-space-4);flex-shrink:1;min-width:0}.data-cell--vertical .data-cell__value-wrapper{flex-direction:column;align-items:flex-start}.data-cell__value{flex:1;min-width:0;font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);color:var(--s-text-default);font-weight:var(--s-font-weight-semibold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.data-cell--vertical .data-cell__value{white-space:normal;overflow:visible;text-overflow:clip}.data-cell__suffix{flex-shrink:0}.data-cell__input{width:100%;--swirl-form-control-label-background-color:var( --swirl-data-cell-input-background, var(--s-surface-default) )}.data-cell__input ::slotted(swirl-checkbox),.data-cell__input ::slotted(swirl-radio){width:100%}@media (max-width: 767px){.data-cell:not(.data-cell--vertical) .data-cell__content{flex-direction:column;align-items:flex-start;gap:var(--s-space-4)}.data-cell:not(.data-cell--vertical) .data-cell__value-wrapper{flex-direction:column;align-items:flex-start}}';export{s as swirl_data_cell}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as a,h as s,a as e,d as l}from"./p-BdGaOt5L.js";import{c as t}from"./p-orsBiyT_.js";const r=class{constructor(s){a(this,s),this.hideLabel=!1,this.headerId=`data-cell-stack-header-${crypto.randomUUID()}`,this.onSlotChange=a=>{a.target.assignedElements().filter((a=>"SWIRL-DATA-CELL"!==a.tagName)).length>0&&console.warn("[SwirlDataCellStack] Only swirl-data-cell elements are allowed as direct children.")}}render(){const a=Boolean(this.el.querySelector('[slot="cta"]')),l=Boolean(this.label)&&!this.hideLabel,r=t("data-cell-stack",{"data-cell-stack--has-cta":a}),d=l?`${this.headerId}-label`:void 0,i=this.description?`${this.headerId}-description`:void 0;return s(e,{key:"14d6213f21bb5e162342389d3e89501d529e490b"},s("div",{key:"515c84a9eda22a77b9f9b5985412d56dfb6a8e07",class:r,part:"data-cell-stack",role:"group"},(l||this.description||a)&&s("header",{key:"3da984d135c10750099a3d11e79563033da059b9",class:"data-cell-stack__header",id:this.headerId},s("div",{key:"db3b9a71276d0340dd1d1c58755b1d38cef35ab4",class:"data-cell-stack__header-content"},l&&s("h3",{key:"30da89e037e37a7fa17b66b1e435651de49a0690",class:"data-cell-stack__label",id:d},this.label),this.description&&s("p",{key:"11fb9329d4a82dbb03e145d7ac8c476eec72dfba",class:"data-cell-stack__description",id:i},this.description)),a&&s("div",{key:"6279ad312fea30a67c6b4994ca6e1affba407216",class:"data-cell-stack__cta"},s("slot",{key:"e438aa0e938642b99510734ff7aa3a5186fab10c",name:"cta"}))),s("div",{key:"5cc83894daa410486ad4b3a9b264dfb8d5599829",class:"data-cell-stack__cells",role:"list","aria-labelledby":d||void 0,"aria-describedby":i||void 0},s("slot",{key:"782785d26eeb69614af9d2c9af8a7dbd896361b7",onSlotchange:this.onSlotChange}))))}get el(){return l(this)}};r.style=':host{display:block;width:100%}:host *{box-sizing:border-box}.data-cell-stack{display:flex;flex-direction:column;width:100%;gap:var(--s-space-16)}.data-cell-stack__header{display:flex;align-items:flex-start;gap:var(--s-space-8);width:100%;justify-content:space-between}.data-cell-stack__header-content{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-space-4)}.data-cell-stack__label{font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);color:var(--s-text-default);font-weight:var(--s-font-weight-semibold);margin:0}.data-cell-stack__description{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);color:var(--s-text-subdued);margin:0}.data-cell-stack__cells{display:flex;flex-direction:column;gap:var(--s-space-2)}.data-cell-stack__cells ::slotted(swirl-data-cell:first-of-type:not(:last-of-type)){--swirl-data-cell-border-radius:var(--s-border-radius-l) var(--s-border-radius-l) var(--s-border-radius-s) var(--s-border-radius-s)}.data-cell-stack__cells ::slotted(swirl-data-cell:last-of-type:not(:first-of-type)){--swirl-data-cell-border-radius:var(--s-border-radius-s) var(--s-border-radius-s) var(--s-border-radius-l) var(--s-border-radius-l)}.data-cell-stack__cells ::slotted(swirl-data-cell:not(:first-of-type):not(:last-of-type)){--swirl-data-cell-border-radius:var(--s-border-radius-s)}.data-cell-stack__cells ::slotted(swirl-data-cell:first-of-type:last-of-type){--swirl-data-cell-border-radius:var(--s-border-radius-l)}.data-cell-stack__cells ::slotted(swirl-data-cell[size="s"]:first-of-type:not(:last-of-type)){--swirl-data-cell-border-radius:var(--s-border-radius-base) var(--s-border-radius-base) var(--s-border-radius-s) var(--s-border-radius-s)}.data-cell-stack__cells ::slotted(swirl-data-cell[size="s"]:last-of-type:not(:first-of-type)){--swirl-data-cell-border-radius:var(--s-border-radius-s) var(--s-border-radius-s) var(--s-border-radius-base) var(--s-border-radius-base)}.data-cell-stack__cells ::slotted(swirl-data-cell[size="s"]:not(:first-of-type):not(:last-of-type)){--swirl-data-cell-border-radius:var(--s-border-radius-s)}.data-cell-stack__cells ::slotted(swirl-data-cell[size="s"]:first-of-type:last-of-type){--swirl-data-cell-border-radius:var(--s-border-radius-base)}.data-cell-stack__cta{display:flex;align-items:center;flex-shrink:0}';export{r as swirl_data_cell_stack}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as a,c as o,h as e,a as d,d as t}from"./p-BdGaOt5L.js";import{c as s}from"./p-orsBiyT_.js";import{t as i}from"./p-DBTxpXCn.js";import{d as r,e as l}from"./p-BkJDOYVb.js";const n=class{constructor(e){a(this,e),this.toggleFullscreen=o(this,"toggleFullscreen",3),this.modalClose=o(this,"modalClose",3),this.modalOpen=o(this,"modalOpen",3),this.primaryAction=o(this,"primaryAction",3),this.requestModalClose=o(this,"requestModalClose",3),this.secondaryAction=o(this,"secondaryAction",3),this.sidebarClose=o(this,"sidebarClose",3),this.toggleDialog=o(this,"toggleDialog",7),this.closable=!0,this.closeButtonLabel="Close modal",this.fullscreenEnableButtonLabel="Full screen",this.fullscreenDisableButtonLabel="Exit full screen",this.padded=!0,this.variant="default",this.sidebarPadded=!0,this.sidebarFooterPadded=!0,this.sidebarCloseButtonLabel="Close sidebar",this.opening=!1,this.isFullscreen=!1,this.isFullscreenTransitioning=!1,this.closing=!1,this.scrollable=!1,this.scrolled=!1,this.scrolledDown=!1,this.sidebarScrolled=!1,this.sidebarScrolledDown=!1,this.sidebarScrollable=!1,this.onKeyDown=a=>{"Escape"===a.code&&(a.stopImmediatePropagation(),a.preventDefault(),this.close())},this.onClose=()=>{this.closing=!1,this.unlockBodyScroll(),this.modalClose.emit()},this.onToggle=a=>{const o={newState:a.newState,dialog:this.modalEl};this.el.isConnected?this.toggleDialog.emit(o):document.dispatchEvent(new CustomEvent("toggleDialog",{bubbles:!0,composed:!0,detail:o}))},this.onBackdropClick=()=>{this.disableBackdropClose||this.close()},this.onCloseButtonClick=()=>{this.close()},this.onFullscreenButtonClick=()=>{this.setFullscreen(!this.isFullscreen)},this.onSidebarCloseButtonClick=()=>{this.hideSidebarContent=!0,this.sidebarClose.emit()},this.onPrimaryAction=a=>{this.primaryAction.emit(a)},this.onSecondaryAction=a=>{this.secondaryAction.emit(a)},this.updateCustomFooterStatus=()=>{this.hasCustomFooter=Boolean(this.el.querySelector(':scope > [slot="custom-footer"]'))},this.updateCustomHeaderStatus=()=>{this.hasCustomHeader=Boolean(this.el.querySelector(':scope > [slot="custom-header"]'))},this.updateHeaderToolsStatus=()=>{this.hasHeaderTools=Boolean(this.el.querySelector(':scope > [slot="header-tools"]'))},this.updateSecondaryContentStatus=()=>{this.hasSecondaryContent=Boolean(this.el.querySelector(':scope > [slot="secondary-content"]'))},this.updateSidebarContentStatus=()=>{this.hasSidebarContent=Boolean(this.el.querySelector(':scope > [slot="sidebar-content"]'))},this.updateSidebarFooterStatus=()=>{this.hasSidebarFooter=Boolean(this.el.querySelector(':scope > [slot="sidebar-footer"]'))},this.determineScrollStatus=()=>{this.determineMainScrollStatus(),this.determineSidebarScrollStatus()},this.determineMainScrollStatus=()=>{const a=this.scrollContainer?.scrollTop>0,o=Math.ceil(this.scrollContainer?.scrollTop+this.scrollContainer?.offsetHeight)>=this.scrollContainer?.scrollHeight,e=this.scrollContainer?.scrollHeight>this.scrollContainer?.offsetHeight;a!==this.scrolled&&(this.scrolled=a),o!==this.scrolledDown&&(this.scrolledDown=o),e!==this.scrollable&&(this.scrollable=e)},this.determineSidebarScrollStatus=()=>{const a=this.sidebarScrollContainer?.scrollTop>0,o=Math.ceil(this.sidebarScrollContainer?.scrollTop+this.sidebarScrollContainer?.offsetHeight)>=this.sidebarScrollContainer?.scrollHeight,e=this.sidebarScrollContainer?.scrollHeight>this.sidebarScrollContainer?.offsetHeight;a!==this.sidebarScrolled&&(this.sidebarScrolled=a),o!==this.sidebarScrolledDown&&(this.sidebarScrolledDown=o),e!==this.sidebarScrollable&&(this.sidebarScrollable=e)}}componentDidLoad(){this.ensureOpening(),this.setDialogCustomProps(),this.determineScrollStatus(),this.updateCustomFooterStatus(),this.updateCustomHeaderStatus(),this.updateHeaderToolsStatus(),this.updateSecondaryContentStatus(),this.updateSidebarContentStatus(),this.updateSidebarFooterStatus()}disconnectedCallback(){this.mutationObserver?.disconnect(),this.modalEl?.open&&this.modalEl.close(),this.unlockBodyScroll()}onWindowResize(){this.determineScrollStatus()}async open(a){this.opening=!0,this.temporaryReturnFocusTo=a,this.modalEl&&(this.setupMutationObserver(),this.modalEl.showModal(),this.modalOpen.emit(),this.mutationObserver.observe(this.modalEl,{subtree:!0,childList:!0}),this.lockBodyScroll(),this.determineScrollStatus(),setTimeout((()=>{this.handleAutoFocus()}),200))}async close(a){this.closing||(a||this.requestModalClose.emit(),(this.closable||a)&&(this.closing=!0,this.unlockBodyScroll(),setTimeout((()=>{this.mutationObserver?.disconnect(),this.modalEl.close(),this.customFocusReturn()}),150)))}async setFullscreen(a){this.isFullscreen!==a&&(this.isFullscreenTransitioning=!0,this.isFullscreen=a,this.toggleFullscreen.emit(this.isFullscreen),setTimeout((()=>this.isFullscreenTransitioning=!1),150))}async getScrollContainer(){return this.scrollContainer}handleAutoFocus(){this.el.querySelector("input[autofocus]")?.focus()}lockBodyScroll(){r(this.scrollContainer),r(this.sidebarScrollContainer)}setupMutationObserver(){this.mutationObserver=new MutationObserver((()=>{this.modalEl?.open&&document.activeElement===document.body&&i(this.modalEl).at(0)?.focus()}))}unlockBodyScroll(){this.scrollContainer&&l(this.scrollContainer),this.sidebarScrollContainer&&l(this.sidebarScrollContainer)}ensureOpening(){this.opening&&!this.modalEl?.open&&this.open()}setDialogCustomProps(){this.modalEl.setAttribute("closedby","none")}customFocusReturn(){const a=this.temporaryReturnFocusTo??this.returnFocusTo;if(!a)return;const o="string"==typeof a?document.querySelector(a):a,e=i(o,{includeContainer:!0,getShadowRoot:!0});e.length>0&&e[0].focus(),this.temporaryReturnFocusTo=void 0}render(){const a=Boolean(this.primaryActionLabel)||Boolean(this.secondaryActionLabel),o=s("modal",`modal--variant-${this.variant}`,{"modal--closing":this.closing,"modal--fullscreen":this.isFullscreen,"modal--fullscreen-transitioning":this.isFullscreenTransitioning,"modal--has-custom-footer":this.hasCustomFooter,"modal--has-custom-header":this.hasCustomHeader,"modal--has-header-tools":this.hasHeaderTools,"modal--has-secondary-content":this.hasSecondaryContent&&!this.hideSecondaryContent,"modal--hide-label":this.hideLabel,"modal--padded":this.padded,"modal--scrollable":this.scrollable,"modal--scrolled":this.scrolled,"modal--hide-scrolled-header-border":this.hideScrolledHeaderBorder,"modal--scrolled-down":this.scrolledDown,"modal--hide-secondary-content-borders":this.hideSecondaryContentBorders,"modal--has-sidebar-content":this.hasSidebarContent&&!this.hideSidebarContent,"modal--sidebar-padded":this.sidebarPadded,"modal--has-sidebar-footer":this.hasSidebarFooter&&this.hasSidebarContent&&!this.hideSidebarContent,"modal--sidebar-footer-padded":this.sidebarFooterPadded,"modal--sidebar-scrolled":this.sidebarScrolled,"modal--sidebar-scrolled-down":this.sidebarScrolledDown,"modal--sidebar-scrollable":this.sidebarScrollable,"modal--show-backdrop":!0===this.showBackdrop,"modal--hide-backdrop":!1===this.showBackdrop});return e(d,{key:"23fc47450954cdec1465b6cacc87665b74392b40"},e("dialog",{key:"bdee3e6f0b8903e63341b93e73525387d4878229","aria-label":this.label,class:o,onClose:this.onClose,onKeyDown:this.onKeyDown,onToggle:this.onToggle,ref:a=>this.modalEl=a},e("div",{key:"3b880ae4075a3249f2a56a424db3269183cc160d",class:"modal__backdrop",onClick:this.onBackdropClick}),e("div",{key:"df55123f4afffde7862c80f99166d4dcc28c227e",class:"modal__body",part:"modal__body",style:this.isFullscreen?{}:{"--swirl-modal-max-height":this.maxHeight,"--swirl-modal-height":this.height,minHeight:this.minHeight,maxWidth:this.maxWidth}},e("aside",{key:"f3b77cc6ef02ffe087f7e6701deb79c6edc0d45e",class:"modal__sidebar"},this.sidebarLabel&&e("header",{key:"ed35b62a6ec6d77a9360ffa80b9effab505c4f4e",class:s("modal__sidebar-header",{"modal__sidebar-header--has-close-button":this.hasSidebarCloseButton})},this.hasSidebarCloseButton&&e("swirl-button",{key:"d73cb3f8b8d032245a4efbb4fba158bde22e19d2",hideLabel:!0,icon:"<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>",label:this.sidebarCloseButtonLabel,onClick:this.onSidebarCloseButtonClick}),e("swirl-heading",{key:"9529520318f4ee7ace2adb71927f2587c22c01b4",as:"h3",class:"modal__sidebar-heading",level:5,text:this.sidebarLabel})),e("div",{key:"b9893e1d9193c99c53a33c02773e96d4611b3040",class:"modal__sidebar-content",onScroll:this.determineSidebarScrollStatus,ref:a=>this.sidebarScrollContainer=a},e("slot",{key:"6086f942484525006d1de352ced3693f2afac73c",name:"sidebar-content",onSlotchange:this.updateSidebarContentStatus})),e("div",{key:"7911c4c01757dc9157a611558d7830997891032a",class:"modal__sidebar-footer",part:"modal__sidebar-footer"},e("slot",{key:"4154270c217c274954ae83060fc31069e2696c2e",name:"sidebar-footer",onSlotchange:this.updateSidebarFooterStatus}))),e("div",{key:"5e78d1d3053ff0f54331ec072878084720b31110",class:"modal__main-content"},e("header",{key:"84bf917f205c56a871e13fbcb749690bba1cbb06",class:"modal__custom-header",part:"modal__custom-header"},e("slot",{key:"5fd2bb6788938d18f9e40cfe42eaa8b36379e6ad",name:"custom-header",onSlotchange:this.updateCustomHeaderStatus})),(!this.hideLabel||!this.hideCloseButton)&&e("header",{key:"c6c03d149d8e1c15e491e1ed7071821348b76c1f",class:"modal__header"},e("div",{key:"45235c736ee6686599513f1f80bff3b68c0a100e",class:"modal__header-bar"},!this.hideCloseButton&&e("swirl-button",{key:"2c6edcc7f1bcd33fcf880fa48567f6eddc067afd",class:"modal__close-button",hideLabel:!0,icon:"default"===this.variant?"<swirl-icon-close></swirl-icon-close>":"<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>",label:this.closeButtonLabel,onClick:this.onCloseButtonClick}),this.showFullscreenButton&&e("swirl-button",{key:"673043a824362619f11c54f31a15fa9477117883",class:"modal__fullscreen-button",hideLabel:!0,icon:this.isFullscreen?"<swirl-icon-close-fullscreen></swirl-icon-close-fullscreen>":"<swirl-icon-open-in-full></swirl-icon-open-in-full>",label:this.isFullscreen?this.fullscreenDisableButtonLabel:this.fullscreenEnableButtonLabel,onClick:this.onFullscreenButtonClick}),!this.hideLabel&&e("swirl-heading",{key:"1719c5b97263cf10c305770607eb1ea7145acb51",as:"h2",class:"modal__heading",level:3,text:this.label}))),e("div",{key:"c32ad1be58ce0bfd733a059fabc88411a810de30",class:"modal__content-container",style:{gap:this.contentGap?`var(--s-space-${this.contentGap})`:void 0}},e("div",{key:"8d7a796fc546b0b7bebfa213f831c628393f9dfe",class:"modal__primary-content",style:{maxWidth:this.primaryContentMaxWidth,flex:this.primaryContentFlex}},e("div",{key:"7299870c633ed4456d08d22dc1eb750e4898b41c",class:"modal__header-tools",part:"modal__header-tools"},e("slot",{key:"27b39b1bbceb3890fd3f2dea32642a901c87c076",name:"header-tools",onSlotchange:this.updateHeaderToolsStatus})),e("div",{key:"f8336f9a3638c1e9285d94900764f09293aa6c30",class:"modal__content",onScroll:this.determineMainScrollStatus,part:"modal__content",ref:a=>this.scrollContainer=a},e("slot",{key:"57fad6f717f5256c938b0142b88c42d59dc968e3"}))),e("div",{key:"05ab11a1b5ff7804a6b56041fdfcf4230f414ba4",class:"modal__secondary-content",style:{maxWidth:this.secondaryContentMaxWidth,flex:this.secondaryContentFlex,padding:Boolean(this.secondaryContentPadding)?`var(--s-space-${this.secondaryContentPadding})`:void 0,paddingBlockEnd:Boolean(this.secondaryContentPaddingBlockEnd)?`var(--s-space-${this.secondaryContentPaddingBlockEnd})`:void 0,paddingBlockStart:Boolean(this.secondaryContentPaddingBlockStart)?`var(--s-space-${this.secondaryContentPaddingBlockStart})`:void 0,paddingInlineEnd:Boolean(this.secondaryContentPaddingInlineEnd)?`var(--s-space-${this.secondaryContentPaddingInlineEnd})`:void 0,paddingInlineStart:Boolean(this.secondaryContentPaddingInlineStart)?`var(--s-space-${this.secondaryContentPaddingInlineStart})`:void 0}},e("slot",{key:"6602b580cc959944932c42bfe74f838fa7dc37a4",name:"secondary-content",onSlotchange:this.updateSecondaryContentStatus}))),e("div",{key:"17afe035cebb37925f6cf912448a29db22359ee6",class:"modal__custom-footer"},e("slot",{key:"44c6d8340fc1b9c32521cc61ed0b5b4cee37ec50",name:"custom-footer",onSlotchange:this.updateCustomFooterStatus})),a&&e("footer",{key:"6e7732616ce97db76e752bdd8c3e540d380c3fe7",class:"modal__controls"},e("swirl-button-group",{key:"146060354a8cd62c236d025b576ef48a357be7f2",wrap:!0},this.secondaryActionLabel&&e("swirl-button",{key:"eabd37aa403ab8b87fc6edb76821f3ccb25e8f7d",label:this.secondaryActionLabel,onClick:this.onSecondaryAction}),this.primaryActionLabel&&e("swirl-button",{key:"6988e29d8e1caf2faa8dfbbce0ef454e4552fdee",intent:"primary",label:this.primaryActionLabel,onClick:this.onPrimaryAction,variant:"flat"})))))))}get el(){return t(this)}};n.style=":host{display:block}:host *{box-sizing:border-box}.modal{--swirl-modal-height:auto;--swirl-modal-max-height:90vh;--swirl-modal-view-height:100vh;--swirl-modal-header-height:3.75rem;--swirl-modal-max-width:40rem;--swirl-modal-sidebar-width:25rem;--swirl-modal-max-secondary-content-width:24rem;--swirl-modal-footer-padding-small:var(--s-space-12) var(--s-space-16) max(env(safe-area-inset-bottom), var(--s-space-12)) var(--s-space-16);--swirl-modal-footer-padding-large:var(--s-space-16) var(--s-space-24) max(env(safe-area-inset-bottom), var(--s-space-16)) var(--s-space-24)}@supports (height: 100dvh){.modal{--swirl-modal-max-height:90dvh;--swirl-modal-view-height:100dvh}}.modal{position:fixed;z-index:var(--s-z-40);display:flex;justify-content:center;align-items:center;height:var(--swirl-modal-view-height);inset:0;border:none;padding:0;width:auto;background:transparent;max-width:none;max-height:none;overflow:visible}.modal::backdrop{display:none}.modal:not([open]){display:none}.modal--variant-default.modal--closing{animation:0.15s modal-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-default.modal--closing{animation:none}}.modal--variant-default:not(.modal--closing) .modal__backdrop{animation:0.15s modal-backdrop-fade-in}@media (prefers-reduced-motion){.modal--variant-default:not(.modal--closing) .modal__backdrop{animation:none}}.modal--variant-default:not(.modal--closing) .modal__body{animation:0.15s modal-scale-in}@media (prefers-reduced-motion){.modal--variant-default:not(.modal--closing) .modal__body{animation:none}}.modal--variant-drawer{justify-content:end;align-items:stretch}.modal--variant-drawer.modal--closing .modal__body{animation:0.15s modal-drawer-slide-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-drawer.modal--closing .modal__body{animation:none}}.modal--variant-drawer.modal--closing .modal__backdrop{animation:0.15s modal-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-drawer.modal--closing .modal__backdrop{animation:none}}@media (min-width: 768px){.modal--variant-drawer.modal--hide-label .modal__header-bar{height:auto;padding-top:var(--s-space-4);padding-bottom:var(--s-space-4)}}.modal--variant-drawer .modal__backdrop{background-color:transparent;animation:none}.modal--variant-drawer .modal__body{height:100%;max-height:none;border-radius:0;animation:0.15s modal-drawer-slide-in;box-shadow:var(--s-shadow-level-3)}@media (prefers-reduced-motion){.modal--variant-drawer .modal__body{animation:none}}.modal--variant-drawer .modal__header-bar{background-color:var(--s-surface-overlay-default)}.modal--variant-drawer .modal__header-bar .modal__close-button{margin-left:calc(-1 * var(--s-space-8))}.modal--variant-drawer .modal__header-bar .modal__fullscreen-button{display:none}@media (min-width: 768px){.modal--variant-drawer .modal__header-bar{flex-direction:row}}@media (min-width: 768px){.modal--variant-drawer.modal--padded .modal__content{padding-top:var(--s-space-8)}}.modal--padded .modal__content{padding-top:var(--s-space-24);padding-right:var(--s-space-16);padding-bottom:var(--s-space-24);padding-left:var(--s-space-16)}@media (min-width: 768px){.modal--padded .modal__content{padding-top:0;padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:var(--s-space-24)}}@media (min-width: 768px){.modal--scrollable .modal__content{padding-bottom:0}}.modal--scrollable:not(.modal--scrolled-down).modal--has-custom-footer .modal__custom-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--scrollable:not(.modal--scrolled-down):not(.modal--has-custom-footer) .modal__controls{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--has-custom-header .modal__custom-header{display:block}.modal--has-custom-header .modal__content{padding-top:var(--s-space-16)}.modal--has-custom-footer .modal__custom-footer{padding:var(--swirl-modal-footer-padding-small)}@media (min-width: 768px){.modal--has-custom-footer .modal__custom-footer{padding:var(--swirl-modal-footer-padding-large)}}.modal--has-header-tools .modal__header{border-bottom-color:transparent}.modal--has-header-tools .modal__header-tools{display:block}.modal--has-secondary-content.modal.modal--variant-default:not(.modal--fullscreen) .modal__body,.modal--has-secondary-content.modal.modal--variant-drawer:not(.modal--fullscreen) .modal__body{max-width:calc( var(--swirl-modal-max-width) + var(--swirl-modal-max-secondary-content-width) )}.modal--has-secondary-content:not(.modal--has-header-tools):not(.modal--hide-secondary-content-borders) .modal__header{border-bottom-color:var(--s-border-default)}.modal--has-secondary-content.modal--has-header-tools:not(.modal--hide-secondary-content-borders) .modal__header-tools{border-bottom-color:var(--s-border-default)}.modal--has-secondary-content.modal--has-custom-footer:not(.modal--hide-secondary-content-borders) .modal__custom-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--has-secondary-content:not(.modal--has-custom-footer):not(.modal--hide-secondary-content-borders) .modal__controls{border-top:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 992px){.modal--has-secondary-content .modal__header-tools,.modal--has-secondary-content .modal__content{padding-right:0}}.modal--has-secondary-content .modal__primary-content{overflow:visible;max-height:60%;flex-basis:auto}@media (min-width: 992px){.modal--has-secondary-content .modal__primary-content{max-width:calc(100% - var(--swirl-modal-max-secondary-content-width));max-height:none;flex-basis:calc(100% - var(--swirl-modal-max-secondary-content-width))}}.modal--has-secondary-content .modal__secondary-content{display:block}.modal__main-content{display:flex;flex-direction:column;overflow-y:auto;flex-grow:1}.modal__sidebar{display:none}.modal.modal--has-sidebar-content.modal.modal--variant-default:not(.modal--fullscreen) .modal__body,.modal.modal--has-sidebar-content.modal.modal--variant-drawer:not(.modal--fullscreen) .modal__body{max-width:calc( var(--swirl-modal-max-width) + var(--swirl-modal-sidebar-width) )}@media (min-width: 768px){.modal.modal--has-sidebar-content .modal__sidebar{display:flex;flex-direction:column;overflow-y:auto;flex-shrink:0;width:var(--swirl-modal-sidebar-width);border-right:var(--s-border-width-default) solid var(--s-border-default)}.modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-header{border-bottom:var(--s-border-width-default) solid transparent;display:flex;align-items:center;gap:var(--s-space-8);padding-right:var(--s-space-24);padding-left:var(--s-space-24)}.modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-header.modal__sidebar-header--has-close-button{padding-left:var(--s-space-16)}.modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-header .modal__sidebar-heading{display:flex;align-items:center;height:var(--swirl-modal-header-height)}.modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-content{display:block;flex-grow:1;overflow-y:auto}}@media (min-width: 992px){.modal.modal--has-sidebar-content .modal__primary-content{flex-basis:calc(100% - 20rem)}}.modal--sidebar-padded .modal__sidebar .modal__sidebar-content{padding-left:var(--s-space-24);padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-top:var(--s-space-16)}@media (min-width: 768px){.modal--scrolled:not(.modal--hide-scrolled-header-border):not(.modal--has-header-tools) .modal__header{border-bottom-color:var(--s-border-default)}.modal--scrolled:not(.modal--hide-scrolled-header-border).modal--has-header-tools .modal__header-tools{border-bottom-color:var(--s-border-default)}.modal--scrolled:not(.modal--hide-scrolled-header-border) .modal__custom-header{border-bottom-color:var(--s-border-default)}}@media (min-width: 768px){.modal--sidebar-scrolled .modal__sidebar .modal__sidebar-header{border-bottom-color:var(--s-border-default)}}.modal--has-sidebar-footer.modal--sidebar-footer-padded .modal__sidebar-footer{padding:var(--swirl-modal-footer-padding-small)}@media (min-width: 768px){.modal--has-sidebar-footer.modal--sidebar-footer-padded .modal__sidebar-footer{padding:var(--swirl-modal-footer-padding-large)}}@media (min-width: 768px){.modal--sidebar-scrollable .modal__sidebar-content{padding-bottom:0 !important}}.modal--sidebar-scrollable:not(.modal--sidebar-scrolled-down).modal--has-sidebar-footer .modal__sidebar-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal__backdrop{position:fixed;background-color:rgba(0, 0, 0, 0.2);inset:0}.modal.modal--show-backdrop .modal__backdrop{background-color:rgba(0, 0, 0, 0.2)}.modal.modal--show-backdrop:not(.modal--closing) .modal__backdrop{animation:0.15s modal-backdrop-fade-in}@media (prefers-reduced-motion){.modal.modal--show-backdrop:not(.modal--closing) .modal__backdrop{animation:none}}.modal.modal--hide-backdrop .modal__backdrop{background-color:transparent;animation:none}.modal__body{--swirl-card-background-default:var(--s-surface-overlay-default);--swirl-card-background-hovered:var(--s-surface-overlay-hovered);--swirl-card-background-pressed:var(--s-surface-overlay-pressed);position:relative;z-index:var(--s-z-40);display:flex;flex-direction:row;overflow:hidden;width:100vw;max-width:100vw;height:var(--swirl-modal-view-height);max-height:var(--swirl-modal-view-height);padding-top:env(safe-area-inset-top, 0);background-color:var(--s-surface-overlay-default)}.modal--fullscreen .modal__body{min-height:var(--swirl-modal-view-height)}.modal--fullscreen-transitioning .modal__body{transition:width 0.15s ease-out, max-width 0.15s ease-out, max-height 0.15s ease-out, min-height 0.15s ease-out}@media (min-width: 768px){.modal.modal--variant-default:not(.modal--fullscreen) .modal__body{width:90vw;max-width:var(--swirl-modal-max-width);max-height:var(--swirl-modal-max-height);min-height:0;border-radius:var(--s-border-radius-base);box-shadow:var(--s-shadow-level-3)}}@media (min-width: 992px){.modal.modal--variant-default:not(.modal--fullscreen) .modal__body{height:var(--swirl-modal-height)}}.modal__header{border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__header{border-bottom:var(--s-border-width-default) solid transparent}}.modal__header-bar{display:flex;height:3.5rem;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-shrink:0;align-items:center;gap:var(--s-space-8)}@media (min-width: 768px){.modal__header-bar{height:var(--swirl-modal-header-height);padding-top:var(--s-space-12);padding-right:var(--s-space-24);padding-bottom:var(--s-space-12);padding-left:var(--s-space-24);flex-direction:row-reverse}}.modal__fullscreen-button{display:none}@media (min-width: 768px){.modal__fullscreen-button{display:block}}.modal__header-tools{display:none;padding-right:var(--s-space-16);padding-left:var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__header-tools{padding-right:var(--s-space-24);padding-left:var(--s-space-24);border-bottom-color:transparent}}.modal__custom-header{display:none;flex-shrink:0;border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__custom-header{border-bottom-color:transparent}}.modal__heading{overflow:hidden}.modal__heading .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.modal__content-container{display:flex;overflow:hidden;flex-grow:1;flex-direction:column;gap:var(--s-space-24)}@media (min-width: 992px){.modal__content-container{flex-direction:row}}.modal__primary-content{display:flex;overflow:hidden;overflow-y:auto;min-width:0;flex-basis:100%;flex-grow:1;flex-direction:column}.modal__content{overflow-x:hidden;overflow-y:auto;height:100%}.modal__content ::slotted(*){margin:0}.modal__secondary-content{display:none;overflow:visible;overflow-x:hidden;overflow-y:auto;min-width:0;max-width:none;max-height:40%;padding-right:var(--s-space-16);padding-left:var(--s-space-16)}@media (min-width: 768px){.modal__secondary-content{padding-left:var(--s-space-24)}}@media (min-width: 992px){.modal__secondary-content{overflow-x:hidden;overflow-y:auto;max-width:var(--swirl-modal-max-secondary-content-width);max-height:none;padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:0;flex-basis:50%;flex-grow:1}}.modal__custom-footer{flex-shrink:0;padding-bottom:env(safe-area-inset-bottom)}.modal__controls{display:flex;padding:var(--swirl-modal-footer-padding-small);flex-shrink:0;justify-content:flex-end}@media (min-width: 768px){.modal__controls{padding:var(--swirl-modal-footer-padding-large)}}.modal--has-secondary-content.modal--has-sidebar-content:not(.modal--fullscreen) .modal__body{max-width:calc( var(--swirl-modal-max-width) + var(--swirl-modal-sidebar-width) + var(--swirl-modal-max-secondary-content-width) )}@keyframes modal-scale-in{from{transform:scale(0)}to{transform:scale(1)}}@keyframes modal-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes modal-fade-out{from{opacity:1}to{opacity:0}}@keyframes modal-drawer-slide-in{from{transform:translate3d(100%, 0, 0)}to{transform:translate3d(0, 0, 0)}}@keyframes modal-drawer-slide-out{from{transform:translate3d(0, 0, 0)}to{transform:translate3d(100%, 0, 0)}}";export{n as swirl_modal}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as a,h as r,a as t}from"./p-BdGaOt5L.js";import{c as e}from"./p-orsBiyT_.js";const o=class{constructor(r){a(this,r),this.layout="diagonal",this.semantics="group",this.avatars=[],this.onSlotChange=a=>{this.avatars=a.target.assignedElements(),this.layOutAvatars()}}componentDidLoad(){this.forceBadgeProps()}forceBadgeProps(){if(!Boolean(this.badge))return;const a=this.badgeEl.querySelector("swirl-badge"),r=a?.getAttribute("size");Boolean(r)||a?.setAttribute("size","s")}layOutAvatars(){this.avatars.forEach("horizontal"===this.layout?(a,r)=>{a.style.position="relative",a.style.zIndex=String(this.avatars.length-r)}:a=>{a.style.position="",a.style.zIndex=""})}getCenteredArrangement(){return Math.min(Math.max(this.avatars.length,1),5)}render(){const a=e("avatar-group",`avatar-group--${this.layout}-stack`,{"avatar-group--has-badge":Boolean(this.badge),[`avatar-group--centered-${this.getCenteredArrangement()}`]:"centered"===this.layout}),o=e("avatar-group__badge");return r(t,{key:"43c20e73e894ae03d53b90d95dcd16db43e50ccd"},r("div",{key:"8b7bdf46aab2a02702bcdbd5b3544b1fa27f7779","aria-label":this.label,class:a,role:this.semantics},r("slot",{key:"e5ace98ce81e1519916e5a79158c48c56b2f19ab",onSlotchange:this.onSlotChange}),this.badge&&r("span",{key:"6f229b7a50e9d02487f662952a168c9202e26c38",class:o,innerHTML:this.badge,ref:a=>this.badgeEl=a})))}};o.style=":host{display:inline-flex}:host *{box-sizing:border-box}.avatar-group{position:relative}.avatar-group--diagonal-stack{display:inline-grid;grid-template-rows:repeat(9, 1fr);grid-template-columns:repeat(9, 1fr)}.avatar-group--diagonal-stack ::slotted(*:first-child){z-index:1;display:inline-flex;border-radius:var(--swirl-avatar-radius, 50%);box-shadow:0 0 0 0.25rem var(--swirl-avatar-group-border-color);background-color:var(--swirl-avatar-group-border-color);grid-column-start:1;grid-column-end:7;grid-row-start:4;grid-row-end:10}.avatar-group--diagonal-stack ::slotted(*:nth-child(2)){z-index:0;display:inline-flex;border-radius:var(--swirl-avatar-radius, 50%);grid-column-start:4;grid-column-end:10;grid-row-start:1;grid-row-end:7}.avatar-group--diagonal-stack ::slotted(*:nth-child(n+3)){display:none}.avatar-group--diagonal-stack .avatar-group__badge{position:absolute;right:calc(-1 * var(--s-space-4));bottom:calc(-1 * var(--s-space-4))}.avatar-group--horizontal-stack{display:inline-flex}.avatar-group--horizontal-stack .avatar-group__badge{display:none}.avatar-group--horizontal-stack ::slotted(*){z-index:1;display:inline-flex;border-radius:var(--swirl-avatar-radius, 50%);box-shadow:0 0 0 0.125rem var(--swirl-avatar-group-border-color);background-color:var(--swirl-avatar-group-border-color)}.avatar-group--horizontal-stack ::slotted(*:not(:first-child)){margin-left:calc(-1 * var(--s-space-4))}.avatar-group--centered-stack{display:inline-flex;align-items:center}.avatar-group--centered-stack .avatar-group__badge{display:none}.avatar-group--centered-stack ::slotted(*){display:inline-flex;border-radius:var(--swirl-avatar-radius);box-shadow:var(--s-shadow-level-1)}.avatar-group--centered-1 ::slotted(:nth-child(1)){box-shadow:var(--s-shadow-level-2)}.avatar-group--centered-1 ::slotted(:nth-child(n+2)){display:none}.avatar-group--centered-2 ::slotted(:nth-child(1)),.avatar-group--centered-3 ::slotted(:nth-child(1)){z-index:2;order:2;margin-left:calc(var(--swirl-avatar-size) * -0.333333);box-shadow:var(--s-shadow-level-2)}.avatar-group--centered-2 ::slotted(:nth-child(2)),.avatar-group--centered-3 ::slotted(:nth-child(2)){z-index:1;order:3;transform:scale(0.833333);margin-right:calc(var(--swirl-avatar-size) * -0.083333);margin-left:calc(var(--swirl-avatar-size) * -0.333333)}.avatar-group--centered-2 ::slotted(:nth-child(1)){margin-left:calc(var(--swirl-avatar-size) * 0.583334)}.avatar-group--centered-2 ::slotted(:nth-child(n+3)){display:none}.avatar-group--centered-3 ::slotted(:nth-child(3)){z-index:1;order:1;transform:scale(0.833333);margin-left:calc(var(--swirl-avatar-size) * -0.083333)}.avatar-group--centered-3 ::slotted(:nth-child(n+4)){display:none}.avatar-group--centered-4 ::slotted(:nth-child(1)),.avatar-group--centered-5 ::slotted(:nth-child(1)){z-index:3;order:3;margin-left:calc(var(--swirl-avatar-size) * -0.333333);box-shadow:var(--s-shadow-level-2)}.avatar-group--centered-4 ::slotted(:nth-child(2)),.avatar-group--centered-5 ::slotted(:nth-child(2)){z-index:2;order:4;transform:scale(0.833333);margin-left:calc(var(--swirl-avatar-size) * -0.333333)}.avatar-group--centered-4 ::slotted(:nth-child(3)),.avatar-group--centered-5 ::slotted(:nth-child(3)){z-index:2;order:2;transform:scale(0.833333);margin-left:calc(var(--swirl-avatar-size) * -0.5)}.avatar-group--centered-4 ::slotted(:nth-child(4)),.avatar-group--centered-5 ::slotted(:nth-child(4)){z-index:1;order:5;transform:scale(0.666667);margin-right:calc(var(--swirl-avatar-size) * -0.166667);margin-left:calc(var(--swirl-avatar-size) * -0.5)}.avatar-group--centered-4 ::slotted(:nth-child(3)){margin-left:calc(var(--swirl-avatar-size) * 0.333333)}.avatar-group--centered-4 ::slotted(:nth-child(n+5)){display:none}.avatar-group--centered-5 ::slotted(:nth-child(5)){z-index:1;order:1;transform:scale(0.666667);margin-left:calc(var(--swirl-avatar-size) * -0.166667)}.avatar-group--centered-5 ::slotted(:nth-child(n+6)){display:none}.avatar-group__badge{z-index:3;display:inline-flex;width:1.5rem;height:1.5rem}.avatar-group__badge ::part(badge){box-shadow:0 0 0 0.25rem var(--swirl-badge-border-color)}";export{o as swirl_avatar_group}
|