@getflip/swirl-components 0.390.0 → 0.391.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 +8 -4
- package/dist/cjs/swirl-avatar.cjs.entry.js +2 -2
- package/dist/collection/components/swirl-avatar/swirl-avatar.css +5 -0
- package/dist/collection/components/swirl-avatar/swirl-avatar.js +2 -2
- package/dist/components/assets/pdfjs/pdf.worker.min.mjs +1 -4
- package/dist/components/swirl-avatar.js +2 -2
- package/dist/esm/swirl-avatar.entry.js +2 -2
- package/dist/swirl-components/{p-e7744a13.entry.js → p-d1fa14ba.entry.js} +1 -1
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-avatar/swirl-avatar.d.ts +1 -1
- package/package.json +1 -1
- package/vscode-data.json +3 -0
package/components.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"timestamp": "2025-10-
|
|
2
|
+
"timestamp": "2025-10-07T09:11:34",
|
|
3
3
|
"compiler": {
|
|
4
4
|
"name": "@stencil/core",
|
|
5
5
|
"version": "4.35.0",
|
|
@@ -3190,10 +3190,10 @@
|
|
|
3190
3190
|
},
|
|
3191
3191
|
{
|
|
3192
3192
|
"name": "color",
|
|
3193
|
-
"type": "\"banana\" | \"blueberry\" | \"chilli\" | \"grape\" | \"kiwi\" | \"pumpkin\" | \"radish\"",
|
|
3193
|
+
"type": "\"banana\" | \"blueberry\" | \"chilli\" | \"grape\" | \"kiwi\" | \"neutral\" | \"pumpkin\" | \"radish\"",
|
|
3194
3194
|
"complexType": {
|
|
3195
3195
|
"original": "SwirlAvatarColor",
|
|
3196
|
-
"resolved": "\"banana\" | \"blueberry\" | \"chilli\" | \"grape\" | \"kiwi\" | \"pumpkin\" | \"radish\"",
|
|
3196
|
+
"resolved": "\"banana\" | \"blueberry\" | \"chilli\" | \"grape\" | \"kiwi\" | \"neutral\" | \"pumpkin\" | \"radish\"",
|
|
3197
3197
|
"references": {
|
|
3198
3198
|
"SwirlAvatarColor": {
|
|
3199
3199
|
"location": "local",
|
|
@@ -3234,6 +3234,10 @@
|
|
|
3234
3234
|
"value": "kiwi",
|
|
3235
3235
|
"type": "string"
|
|
3236
3236
|
},
|
|
3237
|
+
{
|
|
3238
|
+
"value": "neutral",
|
|
3239
|
+
"type": "string"
|
|
3240
|
+
},
|
|
3237
3241
|
{
|
|
3238
3242
|
"value": "pumpkin",
|
|
3239
3243
|
"type": "string"
|
|
@@ -80783,7 +80787,7 @@
|
|
|
80783
80787
|
"path": "src/components/swirl-avatar/swirl-avatar.tsx"
|
|
80784
80788
|
},
|
|
80785
80789
|
"src/components/swirl-avatar/swirl-avatar.tsx::SwirlAvatarColor": {
|
|
80786
|
-
"declaration": "export type SwirlAvatarColor =\n | \"banana\"\n | \"blueberry\"\n | \"chilli\"\n | \"grape\"\n | \"kiwi\"\n | \"pumpkin\"\n | \"radish\";",
|
|
80790
|
+
"declaration": "export type SwirlAvatarColor =\n | \"banana\"\n | \"blueberry\"\n | \"chilli\"\n | \"grape\"\n | \"kiwi\"\n | \"neutral\"\n | \"pumpkin\"\n | \"radish\";",
|
|
80787
80791
|
"docstring": "",
|
|
80788
80792
|
"path": "src/components/swirl-avatar/swirl-avatar.tsx"
|
|
80789
80793
|
},
|
|
@@ -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 swirlAvatarCss = ":host{display:inline-flex;flex-shrink:0;align-items:center;flex-direction:column}:host *{box-sizing:border-box}.avatar{position:relative;display:inline-flex;justify-content:center;align-items:center;border-radius:50%}.avatar--has-icon{color:var(--s-icon-default);background-color:var(--swirl-avatar-background-color)}.avatar--has-initials{padding-right:0;padding-left:0;color:#fff}.avatar--interactive{cursor:pointer}.avatar--interactive:focus:not(:focus-visible){outline:none}.avatar--interactive:focus-visible{outline-color:var(--s-focus-default)}.avatar--size-3xs{width:1.25rem;height:1.25rem}.avatar--size-3xs .avatar__initials{font-size:0.625rem}.avatar--size-3xs.avatar--has-icon{padding-right:0.125rem;padding-left:0.125rem}.avatar--size-3xs.avatar--variant-square,.avatar--size-3xs.avatar--variant-square .avatar__image,.avatar--size-3xs.avatar--variant-square .avatar__initials{border-radius:0.25rem}.avatar--size-2xs{width:1.5rem;height:1.5rem}.avatar--size-2xs .avatar__initials{font-size:0.625rem}.avatar--size-2xs.avatar--has-icon{padding-right:0.125rem;padding-left:0.125rem}.avatar--size-2xs.avatar--variant-square,.avatar--size-2xs.avatar--variant-square .avatar__image,.avatar--size-2xs.avatar--variant-square .avatar__initials{border-radius:0.25rem}.avatar--size-xs{width:1.75rem;height:1.75rem}.avatar--size-xs .avatar__initials{font-size:0.75rem}.avatar--size-xs.avatar--has-icon{padding-right:0.4375rem;padding-left:0.4375rem}.avatar--size-xs.avatar--variant-square,.avatar--size-xs.avatar--variant-square .avatar__image,.avatar--size-xs.avatar--variant-square .avatar__initials{border-radius:0.5rem}.avatar--size-s{width:2rem;height:2rem}.avatar--size-s .avatar__initials{font-size:0.75rem}.avatar--size-s.avatar--has-icon{padding-right:var(--s-space-8);padding-left:var(--s-space-8)}.avatar--size-s.avatar--variant-square,.avatar--size-s.avatar--variant-square .avatar__image,.avatar--size-s.avatar--variant-square .avatar__initials{border-radius:0.5rem}.avatar--size-m{width:2.5rem;height:2.5rem}.avatar--size-m .avatar__initials{font-size:var(--s-font-size-base)}.avatar--size-m.avatar--has-icon{padding-right:0.625rem;padding-left:0.625rem}.avatar--size-m.avatar--variant-square,.avatar--size-m.avatar--variant-square .avatar__image,.avatar--size-m.avatar--variant-square .avatar__initials{border-radius:0.625rem}.avatar--size-l{width:3rem;height:3rem}.avatar--size-l .avatar__initials{font-size:var(--s-font-size-lg)}.avatar--size-l.avatar--has-icon{padding-right:var(--s-space-12);padding-left:var(--s-space-12)}.avatar--size-l.avatar--variant-square,.avatar--size-l.avatar--variant-square .avatar__image,.avatar--size-l.avatar--variant-square .avatar__initials{border-radius:0.75rem}.avatar--size-xl{width:4rem;height:4rem}.avatar--size-xl .avatar__initials{font-size:var(--s-font-size-xl)}.avatar--size-xl.avatar--has-icon{padding-right:var(--s-space-16);padding-left:var(--s-space-16)}.avatar--size-xl.avatar--variant-square,.avatar--size-xl.avatar--variant-square .avatar__image,.avatar--size-xl.avatar--variant-square .avatar__initials{border-radius:1rem}.avatar--size-2xl{width:9rem;height:9rem}.avatar--size-2xl .avatar__initials{font-size:3.375rem}.avatar--size-2xl.avatar--has-icon{padding-right:var(--s-space-32);padding-left:var(--s-space-32)}.avatar--size-2xl.avatar--variant-square,.avatar--size-2xl.avatar--variant-square .avatar__image,.avatar--size-2xl.avatar--variant-square .avatar__initials{border-radius:1.25rem}.avatar--size-2xl .avatar__tool{transform:translate3d(-25%, -25%, 0px)}.avatar--size-2xl .avatar__tool--position-top{transform:translate3d(-25%, 25%, 0px)}.avatar--color-banana .avatar__initials{color:var(--s-decorative-banana-text);background-color:var(--s-decorative-banana-surface-subdued)}.avatar--color-blueberry .avatar__initials{color:var(--s-decorative-blueberry-text);background-color:var(--s-decorative-blueberry-surface-subdued)}.avatar--color-chilli .avatar__initials{color:var(--s-decorative-chilli-text);background-color:var(--s-decorative-chilli-surface-subdued)}.avatar--color-grape .avatar__initials{color:var(--s-decorative-grape-text);background-color:var(--s-decorative-grape-surface-subdued)}.avatar--color-kiwi .avatar__initials{color:var(--s-decorative-kiwi-text);background-color:var(--s-decorative-kiwi-surface-subdued)}.avatar--color-pumpkin .avatar__initials{color:var(--s-decorative-pumpkin-text);background-color:var(--s-decorative-pumpkin-surface-subdued)}.avatar--color-radish .avatar__initials{color:var(--s-decorative-radish-text);background-color:var(--s-decorative-radish-surface-subdued)}.avatar__image{overflow:hidden;width:100%;height:100%;border-radius:50%}.avatar__image>img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center}.avatar__icon{display:inline-flex}.avatar__icon>*{width:100%;height:100%}.avatar__icon>*::part(icon){width:100%;height:100%}.avatar__initials{position:absolute;display:inline-flex;min-width:0;padding-right:0.0625rem;padding-left:0.0625rem;justify-content:center;align-items:center;border-radius:50%;font-weight:var(--s-font-weight-medium);inset:0}.avatar__initials>span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.avatar__badge{position:absolute;bottom:0;left:55%;display:inline-flex;min-width:1.5rem;height:1.5rem;transform:translate3d(0, 25%, 0)}.avatar__badge--position-top{top:0;bottom:auto;transform:translate3d(0, -25%, 0)}.avatar__label{margin-top:var(--s-space-4);color:var(--s-icon-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);text-align:center}.avatar__tool{position:absolute;right:0;bottom:0;display:inline-flex;transform:translate3d(25%, 25%, 0)}.avatar__tool--position-top{top:0;bottom:auto;transform:translate3d(25%, -25%, 0)}";
|
|
6
|
+
const swirlAvatarCss = ":host{display:inline-flex;flex-shrink:0;align-items:center;flex-direction:column}:host *{box-sizing:border-box}.avatar{position:relative;display:inline-flex;justify-content:center;align-items:center;border-radius:50%}.avatar--has-icon{color:var(--s-icon-default);background-color:var(--swirl-avatar-background-color)}.avatar--has-initials{padding-right:0;padding-left:0;color:#fff}.avatar--interactive{cursor:pointer}.avatar--interactive:focus:not(:focus-visible){outline:none}.avatar--interactive:focus-visible{outline-color:var(--s-focus-default)}.avatar--size-3xs{width:1.25rem;height:1.25rem}.avatar--size-3xs .avatar__initials{font-size:0.625rem}.avatar--size-3xs.avatar--has-icon{padding-right:0.125rem;padding-left:0.125rem}.avatar--size-3xs.avatar--variant-square,.avatar--size-3xs.avatar--variant-square .avatar__image,.avatar--size-3xs.avatar--variant-square .avatar__initials{border-radius:0.25rem}.avatar--size-2xs{width:1.5rem;height:1.5rem}.avatar--size-2xs .avatar__initials{font-size:0.625rem}.avatar--size-2xs.avatar--has-icon{padding-right:0.125rem;padding-left:0.125rem}.avatar--size-2xs.avatar--variant-square,.avatar--size-2xs.avatar--variant-square .avatar__image,.avatar--size-2xs.avatar--variant-square .avatar__initials{border-radius:0.25rem}.avatar--size-xs{width:1.75rem;height:1.75rem}.avatar--size-xs .avatar__initials{font-size:0.75rem}.avatar--size-xs.avatar--has-icon{padding-right:0.4375rem;padding-left:0.4375rem}.avatar--size-xs.avatar--variant-square,.avatar--size-xs.avatar--variant-square .avatar__image,.avatar--size-xs.avatar--variant-square .avatar__initials{border-radius:0.5rem}.avatar--size-s{width:2rem;height:2rem}.avatar--size-s .avatar__initials{font-size:0.75rem}.avatar--size-s.avatar--has-icon{padding-right:var(--s-space-8);padding-left:var(--s-space-8)}.avatar--size-s.avatar--variant-square,.avatar--size-s.avatar--variant-square .avatar__image,.avatar--size-s.avatar--variant-square .avatar__initials{border-radius:0.5rem}.avatar--size-m{width:2.5rem;height:2.5rem}.avatar--size-m .avatar__initials{font-size:var(--s-font-size-base)}.avatar--size-m.avatar--has-icon{padding-right:0.625rem;padding-left:0.625rem}.avatar--size-m.avatar--variant-square,.avatar--size-m.avatar--variant-square .avatar__image,.avatar--size-m.avatar--variant-square .avatar__initials{border-radius:0.625rem}.avatar--size-l{width:3rem;height:3rem}.avatar--size-l .avatar__initials{font-size:var(--s-font-size-lg)}.avatar--size-l.avatar--has-icon{padding-right:var(--s-space-12);padding-left:var(--s-space-12)}.avatar--size-l.avatar--variant-square,.avatar--size-l.avatar--variant-square .avatar__image,.avatar--size-l.avatar--variant-square .avatar__initials{border-radius:0.75rem}.avatar--size-xl{width:4rem;height:4rem}.avatar--size-xl .avatar__initials{font-size:var(--s-font-size-xl)}.avatar--size-xl.avatar--has-icon{padding-right:var(--s-space-16);padding-left:var(--s-space-16)}.avatar--size-xl.avatar--variant-square,.avatar--size-xl.avatar--variant-square .avatar__image,.avatar--size-xl.avatar--variant-square .avatar__initials{border-radius:1rem}.avatar--size-2xl{width:9rem;height:9rem}.avatar--size-2xl .avatar__initials{font-size:3.375rem}.avatar--size-2xl.avatar--has-icon{padding-right:var(--s-space-32);padding-left:var(--s-space-32)}.avatar--size-2xl.avatar--variant-square,.avatar--size-2xl.avatar--variant-square .avatar__image,.avatar--size-2xl.avatar--variant-square .avatar__initials{border-radius:1.25rem}.avatar--size-2xl .avatar__tool{transform:translate3d(-25%, -25%, 0px)}.avatar--size-2xl .avatar__tool--position-top{transform:translate3d(-25%, 25%, 0px)}.avatar--color-banana .avatar__initials{color:var(--s-decorative-banana-text);background-color:var(--s-decorative-banana-surface-subdued)}.avatar--color-blueberry .avatar__initials{color:var(--s-decorative-blueberry-text);background-color:var(--s-decorative-blueberry-surface-subdued)}.avatar--color-chilli .avatar__initials{color:var(--s-decorative-chilli-text);background-color:var(--s-decorative-chilli-surface-subdued)}.avatar--color-grape .avatar__initials{color:var(--s-decorative-grape-text);background-color:var(--s-decorative-grape-surface-subdued)}.avatar--color-kiwi .avatar__initials{color:var(--s-decorative-kiwi-text);background-color:var(--s-decorative-kiwi-surface-subdued)}.avatar--color-pumpkin .avatar__initials{color:var(--s-decorative-pumpkin-text);background-color:var(--s-decorative-pumpkin-surface-subdued)}.avatar--color-radish .avatar__initials{color:var(--s-decorative-radish-text);background-color:var(--s-decorative-radish-surface-subdued)}.avatar--color-neutral .avatar__initials{color:var(--s-text-subdued);background-color:var(--s-surface-neutral-subdued)}.avatar__image{overflow:hidden;width:100%;height:100%;border-radius:50%}.avatar__image>img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center}.avatar__icon{display:inline-flex}.avatar__icon>*{width:100%;height:100%}.avatar__icon>*::part(icon){width:100%;height:100%}.avatar__initials{position:absolute;display:inline-flex;min-width:0;padding-right:0.0625rem;padding-left:0.0625rem;justify-content:center;align-items:center;border-radius:50%;font-weight:var(--s-font-weight-medium);inset:0}.avatar__initials>span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.avatar__badge{position:absolute;bottom:0;left:55%;display:inline-flex;min-width:1.5rem;height:1.5rem;transform:translate3d(0, 25%, 0)}.avatar__badge--position-top{top:0;bottom:auto;transform:translate3d(0, -25%, 0)}.avatar__label{margin-top:var(--s-space-4);color:var(--s-icon-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);text-align:center}.avatar__tool{position:absolute;right:0;bottom:0;display:inline-flex;transform:translate3d(25%, 25%, 0)}.avatar__tool--position-top{top:0;bottom:auto;transform:translate3d(25%, -25%, 0)}";
|
|
7
7
|
|
|
8
8
|
const swirlAvatarSizeMappings = {
|
|
9
9
|
"3xs": 20,
|
|
@@ -118,7 +118,7 @@ const SwirlAvatar = class {
|
|
|
118
118
|
});
|
|
119
119
|
const badgeClassName = index$1.classnames("avatar__badge", `avatar__badge--position-${this.badgePosition}`);
|
|
120
120
|
const toolClassName = index$1.classnames("avatar__tool", `avatar__tool--position-${this.toolPosition}`);
|
|
121
|
-
return (index.h(index.Host, { key: '
|
|
121
|
+
return (index.h(index.Host, { key: '42c11df526248247b9cb2bee6b2d58bc70aafa65', "aria-label": this.interactive ? this.label : undefined, onKeydown: this.interactive ? this.onKeydown : undefined, onKeyup: this.interactive ? this.onKeyup : undefined, role: role, tabIndex: this.interactive ? 0 : undefined }, index.h("span", { key: '96a01925f8c723fca2dbb17263152b1d56d26027', class: className, part: "avatar" }, showImage && (index.h("span", { key: '896d136ab3094a2f583b938c2b91d04e78f0d10f', class: "avatar__image" }, index.h("img", { key: 'fde4999892611a1634223519cbccf76130cdb51c', alt: "", height: swirlAvatarSizeMappings[this.size], loading: this.loading !== "intersecting" ? this.loading : undefined, ref: this.onImageElementUpdate, src: this.src, width: swirlAvatarSizeMappings[this.size] }))), showInitials && (index.h("span", { key: '4e1e6d7539ef10c696292cbb9f8a1a9dd492a97a', class: "avatar__initials" }, index.h("span", { key: '866a9aaaa0b2e2ef114cc992be91b503160aac69' }, this.initials))), showIcon && index.h("span", { key: '1cb19789413ef94288b19c209f80b9ccab454baa', class: "avatar__icon", innerHTML: this.icon }), showFallbackIcon && (index.h("span", { key: '36dee103b6406e226e48183c4376a978a6ecedc9', class: "avatar__icon" }, index.h("swirl-icon-person", { key: 'b992b47b9baa52c05193fff33e9b57211c23a51e' }))), showBadge && (index.h("span", { key: '6134b435fa2572c24dd3d8be7ca3f02b51e6ea3c', class: badgeClassName, innerHTML: this.badge })), index.h("span", { key: '20e4112658cd486eb49d7e2543f13678b4d7a5fd', class: toolClassName }, index.h("slot", { key: 'f03881df79fb42c911c2895cd787f706c9529a9f', name: "tool" }))), this.showLabel && (index.h("span", { key: 'beeb327bbc2a05443d756dea01be85e0a885e507', "aria-hidden": true, class: "avatar__label" }, this.label))));
|
|
122
122
|
}
|
|
123
123
|
get element() { return index.getElement(this); }
|
|
124
124
|
static get watchers() { return {
|
|
@@ -243,6 +243,11 @@
|
|
|
243
243
|
background-color: var(--s-decorative-radish-surface-subdued);
|
|
244
244
|
}
|
|
245
245
|
|
|
246
|
+
.avatar--color-neutral .avatar__initials {
|
|
247
|
+
color: var(--s-text-subdued);
|
|
248
|
+
background-color: var(--s-surface-neutral-subdued);
|
|
249
|
+
}
|
|
250
|
+
|
|
246
251
|
.avatar__image {
|
|
247
252
|
overflow: hidden;
|
|
248
253
|
width: 100%;
|
|
@@ -113,7 +113,7 @@ export class SwirlAvatar {
|
|
|
113
113
|
});
|
|
114
114
|
const badgeClassName = classnames("avatar__badge", `avatar__badge--position-${this.badgePosition}`);
|
|
115
115
|
const toolClassName = classnames("avatar__tool", `avatar__tool--position-${this.toolPosition}`);
|
|
116
|
-
return (h(Host, { key: '
|
|
116
|
+
return (h(Host, { key: '42c11df526248247b9cb2bee6b2d58bc70aafa65', "aria-label": this.interactive ? this.label : undefined, onKeydown: this.interactive ? this.onKeydown : undefined, onKeyup: this.interactive ? this.onKeyup : undefined, role: role, tabIndex: this.interactive ? 0 : undefined }, h("span", { key: '96a01925f8c723fca2dbb17263152b1d56d26027', class: className, part: "avatar" }, showImage && (h("span", { key: '896d136ab3094a2f583b938c2b91d04e78f0d10f', class: "avatar__image" }, h("img", { key: 'fde4999892611a1634223519cbccf76130cdb51c', alt: "", height: swirlAvatarSizeMappings[this.size], loading: this.loading !== "intersecting" ? this.loading : undefined, ref: this.onImageElementUpdate, src: this.src, width: swirlAvatarSizeMappings[this.size] }))), showInitials && (h("span", { key: '4e1e6d7539ef10c696292cbb9f8a1a9dd492a97a', class: "avatar__initials" }, h("span", { key: '866a9aaaa0b2e2ef114cc992be91b503160aac69' }, this.initials))), showIcon && h("span", { key: '1cb19789413ef94288b19c209f80b9ccab454baa', class: "avatar__icon", innerHTML: this.icon }), showFallbackIcon && (h("span", { key: '36dee103b6406e226e48183c4376a978a6ecedc9', class: "avatar__icon" }, h("swirl-icon-person", { key: 'b992b47b9baa52c05193fff33e9b57211c23a51e' }))), showBadge && (h("span", { key: '6134b435fa2572c24dd3d8be7ca3f02b51e6ea3c', class: badgeClassName, innerHTML: this.badge })), h("span", { key: '20e4112658cd486eb49d7e2543f13678b4d7a5fd', class: toolClassName }, h("slot", { key: 'f03881df79fb42c911c2895cd787f706c9529a9f', name: "tool" }))), this.showLabel && (h("span", { key: 'beeb327bbc2a05443d756dea01be85e0a885e507', "aria-hidden": true, class: "avatar__label" }, this.label))));
|
|
117
117
|
}
|
|
118
118
|
static get is() { return "swirl-avatar"; }
|
|
119
119
|
static get encapsulation() { return "shadow"; }
|
|
@@ -180,7 +180,7 @@ export class SwirlAvatar {
|
|
|
180
180
|
"mutable": false,
|
|
181
181
|
"complexType": {
|
|
182
182
|
"original": "SwirlAvatarColor",
|
|
183
|
-
"resolved": "\"banana\" | \"blueberry\" | \"chilli\" | \"grape\" | \"kiwi\" | \"pumpkin\" | \"radish\"",
|
|
183
|
+
"resolved": "\"banana\" | \"blueberry\" | \"chilli\" | \"grape\" | \"kiwi\" | \"neutral\" | \"pumpkin\" | \"radish\"",
|
|
184
184
|
"references": {
|
|
185
185
|
"SwirlAvatarColor": {
|
|
186
186
|
"location": "local",
|