@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.
Files changed (13) hide show
  1. package/components.json +1 -1
  2. package/dist/cjs/swirl-avatar-group.cjs.entry.js +5 -5
  3. package/dist/collection/components/swirl-avatar-group/swirl-avatar-group.css +4 -4
  4. package/dist/collection/components/swirl-avatar-group/swirl-avatar-group.js +4 -4
  5. package/dist/collection/components/swirl-avatar-group/swirl-avatar-group.stories.js +3 -1
  6. package/dist/components/assets/pdfjs/pdf.worker.min.mjs +1 -1
  7. package/dist/components/swirl-avatar-group.js +5 -5
  8. package/dist/esm/swirl-avatar-group.entry.js +5 -5
  9. package/dist/swirl-components/p-f7310735.entry.js +1 -0
  10. package/dist/swirl-components/swirl-components.esm.js +1 -1
  11. package/dist/types/components/swirl-avatar-group/swirl-avatar-group.d.ts +1 -1
  12. package/package.json +1 -1
  13. package/dist/swirl-components/p-e27b3585.entry.js +0 -1
package/components.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": "2025-08-22T09:12:51",
2
+ "timestamp": "2025-08-22T10:38:49",
3
3
  "compiler": {
4
4
  "name": "@stencil/core",
5
5
  "version": "4.35.0",
package/dist/cjs/swirl-avatar-group.cjs.entry.js 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-of-type){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-of-type(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-of-type(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-of-type)){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)}";
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: '2edd03b924ba16f132c055efda042ed7b0beb38a' }, index.h("div", { key: '5b5cc714269ec9ea1b603ce1b1991278b6b22eb4', "aria-label": this.label, class: className, role: "group" }, index.h("slot", { key: '6bc20021c1ed36e17fbff8ad7f027c631cc15abe', onSlotchange: this.onSlotChange }), this.badge && (index.h("span", { key: '7980eb5e7a5d7febf1bcb3b6f92582d302237f00', class: badgeClassName, innerHTML: this.badge, ref: (el) => (this.badgeEl = el) })))));
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;
package/dist/collection/components/swirl-avatar-group/swirl-avatar-group.css CHANGED
@@ -16,7 +16,7 @@
16
16
  grid-template-columns: repeat(9, 1fr);
17
17
  }
18
18
 
19
- .avatar-group--diagonal-stack ::slotted(*:first-of-type) {
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-of-type(2)) {
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-of-type(n + 3)) {
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-of-type)) {
65
+ .avatar-group--horizontal-stack ::slotted(*:not(:first-child)) {
66
66
  margin-left: calc(-1 * var(--s-space-4));
67
67
  }
68
68
 
package/dist/collection/components/swirl-avatar-group/swirl-avatar-group.js CHANGED
@@ -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: '2edd03b924ba16f132c055efda042ed7b0beb38a' }, h("div", { key: '5b5cc714269ec9ea1b603ce1b1991278b6b22eb4', "aria-label": this.label, class: className, role: "group" }, h("slot", { key: '6bc20021c1ed36e17fbff8ad7f027c631cc15abe', onSlotchange: this.onSlotChange }), this.badge && (h("span", { key: '7980eb5e7a5d7febf1bcb3b6f92582d302237f00', class: badgeClassName, innerHTML: this.badge, ref: (el) => (this.badgeEl = el) })))));
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"; }
package/dist/collection/components/swirl-avatar-group/swirl-avatar-group.stories.js CHANGED
@@ -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-avatar label="John Doe" src="https://api.dicebear.com/7.x/bottts-neutral/svg?size=144&seed=b" size="3xs"></swirl-avatar>
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;