@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,9 +1,9 @@
|
|
|
1
1
|
import { r as registerInstance, h, a as Host } from './index-BdGaOt5L.js';
|
|
2
2
|
import { c as classnames } from './index-orsBiyT_.js';
|
|
3
3
|
|
|
4
|
-
const swirlAvatarGroupCss = () => `: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))
|
|
4
|
+
const swirlAvatarGroupCss = () => `: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)}`;
|
|
5
5
|
|
|
6
|
-
const
|
|
6
|
+
const maxCenteredLayoutAvatars = 5;
|
|
7
7
|
const SwirlAvatarGroup = class {
|
|
8
8
|
constructor(hostRef) {
|
|
9
9
|
registerInstance(this, hostRef);
|
|
@@ -43,10 +43,7 @@ const SwirlAvatarGroup = class {
|
|
|
43
43
|
}
|
|
44
44
|
}
|
|
45
45
|
getCenteredArrangement() {
|
|
46
|
-
|
|
47
|
-
return fittingArrangements.length > 0
|
|
48
|
-
? fittingArrangements[fittingArrangements.length - 1]
|
|
49
|
-
: centeredLayoutArrangements[0];
|
|
46
|
+
return Math.min(Math.max(this.avatars.length, 1), maxCenteredLayoutAvatars);
|
|
50
47
|
}
|
|
51
48
|
render() {
|
|
52
49
|
const className = classnames("avatar-group", `avatar-group--${this.layout}-stack`, {
|
|
@@ -54,7 +51,7 @@ const SwirlAvatarGroup = class {
|
|
|
54
51
|
[`avatar-group--centered-${this.getCenteredArrangement()}`]: this.layout === "centered",
|
|
55
52
|
});
|
|
56
53
|
const badgeClassName = classnames("avatar-group__badge");
|
|
57
|
-
return (h(Host, { key: '
|
|
54
|
+
return (h(Host, { key: '43c20e73e894ae03d53b90d95dcd16db43e50ccd' }, h("div", { key: '8b7bdf46aab2a02702bcdbd5b3544b1fa27f7779', "aria-label": this.label, class: className, role: this.semantics }, h("slot", { key: 'e5ace98ce81e1519916e5a79158c48c56b2f19ab', onSlotchange: this.onSlotChange }), this.badge && (h("span", { key: '6f229b7a50e9d02487f662952a168c9202e26c38', class: badgeClassName, innerHTML: this.badge, ref: (el) => (this.badgeEl = el) })))));
|
|
58
55
|
}
|
|
59
56
|
};
|
|
60
57
|
SwirlAvatarGroup.style = swirlAvatarGroupCss();
|