@getflip/swirl-components 0.367.0 → 0.368.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 +1 -1
- package/dist/cjs/swirl-avatar-group.cjs.entry.js +5 -5
- package/dist/collection/components/swirl-avatar-group/swirl-avatar-group.css +4 -4
- package/dist/collection/components/swirl-avatar-group/swirl-avatar-group.js +4 -4
- package/dist/collection/components/swirl-avatar-group/swirl-avatar-group.stories.js +3 -1
- package/dist/components/assets/pdfjs/pdf.worker.min.mjs +1 -1
- package/dist/components/swirl-avatar-group.js +5 -5
- package/dist/esm/swirl-avatar-group.entry.js +5 -5
- package/dist/swirl-components/p-f7310735.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-avatar-group/swirl-avatar-group.d.ts +1 -1
- package/package.json +1 -1
- package/dist/swirl-components/p-e27b3585.entry.js +0 -1
package/components.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
var index = require('./index-DM-IG6w2.js');
|
|
4
4
|
var index$1 = require('./index-DcAhLZUH.js');
|
|
5
5
|
|
|
6
|
-
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-
|
|
6
|
+
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:50%;box-shadow:0 0 0 0.25rem 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: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:50%;box-shadow:0 0 0 0.125rem var(--swirl-avatar-group-border-color)}.avatar-group--horizontal-stack ::slotted(*:not(:first-child)){margin-left:calc(-1 * var(--s-space-4))}.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)}";
|
|
7
7
|
|
|
8
8
|
const SwirlAvatarGroup = class {
|
|
9
9
|
constructor(hostRef) {
|
|
@@ -11,9 +11,7 @@ const SwirlAvatarGroup = class {
|
|
|
11
11
|
this.layout = "diagonal";
|
|
12
12
|
this.avatars = [];
|
|
13
13
|
this.onSlotChange = (event) => {
|
|
14
|
-
this.avatars = event.target
|
|
15
|
-
.assignedElements()
|
|
16
|
-
.filter((el) => el.tagName.toLowerCase() === "swirl-avatar");
|
|
14
|
+
this.avatars = event.target.assignedElements();
|
|
17
15
|
this.layOutAvatars();
|
|
18
16
|
};
|
|
19
17
|
}
|
|
@@ -33,11 +31,13 @@ const SwirlAvatarGroup = class {
|
|
|
33
31
|
layOutAvatars() {
|
|
34
32
|
if (this.avatars.length <= 2) {
|
|
35
33
|
this.avatars.forEach((avatar) => {
|
|
34
|
+
avatar.style.position = "";
|
|
36
35
|
avatar.style.zIndex = "";
|
|
37
36
|
});
|
|
38
37
|
}
|
|
39
38
|
else {
|
|
40
39
|
this.avatars.forEach((avatar, index) => {
|
|
40
|
+
avatar.style.position = "relative";
|
|
41
41
|
avatar.style.zIndex = String(this.avatars.length - index);
|
|
42
42
|
});
|
|
43
43
|
}
|
|
@@ -47,7 +47,7 @@ const SwirlAvatarGroup = class {
|
|
|
47
47
|
"avatar-group--has-badge": Boolean(this.badge),
|
|
48
48
|
});
|
|
49
49
|
const badgeClassName = index$1.classnames("avatar-group__badge");
|
|
50
|
-
return (index.h(index.Host, { key: '
|
|
50
|
+
return (index.h(index.Host, { key: '10cfd8f5071556314f3a60f5ca93fc50f9d8c492' }, index.h("div", { key: 'f5261f19df2d21b5b27fdf32ac38073ef29313d1', "aria-label": this.label, class: className, role: "group" }, index.h("slot", { key: '52da1166c1cd18be81874dfc2e08697bc193fc2d', onSlotchange: this.onSlotChange }), this.badge && (index.h("span", { key: '86709ecd1531e087c2a8b8a6053c687db6ea2bd4', class: badgeClassName, innerHTML: this.badge, ref: (el) => (this.badgeEl = el) })))));
|
|
51
51
|
}
|
|
52
52
|
};
|
|
53
53
|
SwirlAvatarGroup.style = swirlAvatarGroupCss;
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
grid-template-columns: repeat(9, 1fr);
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
-
.avatar-group--diagonal-stack ::slotted(*:first-
|
|
19
|
+
.avatar-group--diagonal-stack ::slotted(*:first-child) {
|
|
20
20
|
z-index: 1;
|
|
21
21
|
display: inline-flex;
|
|
22
22
|
border-radius: 50%;
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
grid-row-end: 10;
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
-
.avatar-group--diagonal-stack ::slotted(*:nth-
|
|
30
|
+
.avatar-group--diagonal-stack ::slotted(*:nth-child(2)) {
|
|
31
31
|
z-index: 0;
|
|
32
32
|
display: inline-flex;
|
|
33
33
|
border-radius: 50%;
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
grid-row-end: 7;
|
|
38
38
|
}
|
|
39
39
|
|
|
40
|
-
.avatar-group--diagonal-stack ::slotted(*:nth-
|
|
40
|
+
.avatar-group--diagonal-stack ::slotted(*:nth-child(n + 3)) {
|
|
41
41
|
display: none;
|
|
42
42
|
}
|
|
43
43
|
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
box-shadow: 0 0 0 0.125rem var(--swirl-avatar-group-border-color);
|
|
63
63
|
}
|
|
64
64
|
|
|
65
|
-
.avatar-group--horizontal-stack ::slotted(*:not(:first-
|
|
65
|
+
.avatar-group--horizontal-stack ::slotted(*:not(:first-child)) {
|
|
66
66
|
margin-left: calc(-1 * var(--s-space-4));
|
|
67
67
|
}
|
|
68
68
|
|
|
@@ -8,9 +8,7 @@ export class SwirlAvatarGroup {
|
|
|
8
8
|
this.layout = "diagonal";
|
|
9
9
|
this.avatars = [];
|
|
10
10
|
this.onSlotChange = (event) => {
|
|
11
|
-
this.avatars = event.target
|
|
12
|
-
.assignedElements()
|
|
13
|
-
.filter((el) => el.tagName.toLowerCase() === "swirl-avatar");
|
|
11
|
+
this.avatars = event.target.assignedElements();
|
|
14
12
|
this.layOutAvatars();
|
|
15
13
|
};
|
|
16
14
|
}
|
|
@@ -30,11 +28,13 @@ export class SwirlAvatarGroup {
|
|
|
30
28
|
layOutAvatars() {
|
|
31
29
|
if (this.avatars.length <= 2) {
|
|
32
30
|
this.avatars.forEach((avatar) => {
|
|
31
|
+
avatar.style.position = "";
|
|
33
32
|
avatar.style.zIndex = "";
|
|
34
33
|
});
|
|
35
34
|
}
|
|
36
35
|
else {
|
|
37
36
|
this.avatars.forEach((avatar, index) => {
|
|
37
|
+
avatar.style.position = "relative";
|
|
38
38
|
avatar.style.zIndex = String(this.avatars.length - index);
|
|
39
39
|
});
|
|
40
40
|
}
|
|
@@ -44,7 +44,7 @@ export class SwirlAvatarGroup {
|
|
|
44
44
|
"avatar-group--has-badge": Boolean(this.badge),
|
|
45
45
|
});
|
|
46
46
|
const badgeClassName = classnames("avatar-group__badge");
|
|
47
|
-
return (h(Host, { key: '
|
|
47
|
+
return (h(Host, { key: '10cfd8f5071556314f3a60f5ca93fc50f9d8c492' }, h("div", { key: 'f5261f19df2d21b5b27fdf32ac38073ef29313d1', "aria-label": this.label, class: className, role: "group" }, h("slot", { key: '52da1166c1cd18be81874dfc2e08697bc193fc2d', onSlotchange: this.onSlotChange }), this.badge && (h("span", { key: '86709ecd1531e087c2a8b8a6053c687db6ea2bd4', class: badgeClassName, innerHTML: this.badge, ref: (el) => (this.badgeEl = el) })))));
|
|
48
48
|
}
|
|
49
49
|
static get is() { return "swirl-avatar-group"; }
|
|
50
50
|
static get encapsulation() { return "shadow"; }
|
|
@@ -36,7 +36,9 @@ const TemplateWithHorizontalLayout = (args) => {
|
|
|
36
36
|
const element = generateStoryElement("swirl-avatar-group", args);
|
|
37
37
|
element.innerHTML = `
|
|
38
38
|
<swirl-avatar label="Jane Doe" src="https://api.dicebear.com/7.x/bottts-neutral/svg?size=144&seed=a" size="3xs"></swirl-avatar>
|
|
39
|
-
<swirl-
|
|
39
|
+
<swirl-tooltip content="Test">
|
|
40
|
+
<swirl-avatar label="John Doe" src="https://api.dicebear.com/7.x/bottts-neutral/svg?size=144&seed=b" size="3xs"></swirl-avatar>
|
|
41
|
+
</swirl-tooltip>
|
|
40
42
|
<swirl-avatar label="John Doe" src="https://api.dicebear.com/7.x/bottts-neutral/svg?size=144&seed=c" size="3xs"></swirl-avatar>
|
|
41
43
|
`;
|
|
42
44
|
return element;
|