@getflip/swirl-components 0.164.0 → 0.165.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 +6 -2
- package/dist/cjs/swirl-avatar.cjs.entry.js +26 -4
- package/dist/collection/assets/pdfjs/pdf.worker.min.js +1 -1
- package/dist/collection/components/swirl-avatar/swirl-avatar.css +3 -3
- package/dist/collection/components/swirl-avatar/swirl-avatar.js +26 -4
- package/dist/collection/components/swirl-avatar/swirl-avatar.stories.js +1 -0
- package/dist/components/assets/pdfjs/pdf.worker.min.js +1 -1
- package/dist/components/swirl-avatar.js +26 -4
- package/dist/esm/swirl-avatar.entry.js +26 -4
- package/dist/swirl-components/{p-d43c4a4b.entry.js → p-21c1a36c.entry.js} +1 -1
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-avatar/swirl-avatar.d.ts +6 -1
- package/package.json +1 -1
- package/vscode-data.json +3 -0
package/components.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"timestamp": "2024-02-
|
|
2
|
+
"timestamp": "2024-02-28T11:18:56",
|
|
3
3
|
"compiler": {
|
|
4
4
|
"name": "@stencil/core",
|
|
5
5
|
"version": "3.3.1",
|
|
@@ -1859,7 +1859,7 @@
|
|
|
1859
1859
|
},
|
|
1860
1860
|
{
|
|
1861
1861
|
"name": "loading",
|
|
1862
|
-
"type": "\"auto\" | \"eager\" | \"lazy\"",
|
|
1862
|
+
"type": "\"auto\" | \"eager\" | \"intersecting\" | \"lazy\"",
|
|
1863
1863
|
"mutable": false,
|
|
1864
1864
|
"attr": "loading",
|
|
1865
1865
|
"reflectToAttr": false,
|
|
@@ -1874,6 +1874,10 @@
|
|
|
1874
1874
|
"value": "eager",
|
|
1875
1875
|
"type": "string"
|
|
1876
1876
|
},
|
|
1877
|
+
{
|
|
1878
|
+
"value": "intersecting",
|
|
1879
|
+
"type": "string"
|
|
1880
|
+
},
|
|
1877
1881
|
{
|
|
1878
1882
|
"value": "lazy",
|
|
1879
1883
|
"type": "string"
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
const index = require('./index-1de6abbd.js');
|
|
6
6
|
const index$1 = require('./index-2ddd0598.js');
|
|
7
7
|
|
|
8
|
-
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;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;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;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;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;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;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;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;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:2.25rem}.avatar--size-2xl .avatar__tool{transform:none}.avatar--size-2xl .avatar__tool--position-top{transform:none}.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{display:inline-flex;
|
|
8
|
+
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;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;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;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;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;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;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;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;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:2.25rem}.avatar--size-2xl .avatar__tool{transform:none}.avatar--size-2xl .avatar__tool--position-top{transform:none}.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)}";
|
|
9
9
|
|
|
10
10
|
const swirlAvatarSizeMappings = {
|
|
11
11
|
"3xs": 20,
|
|
@@ -71,13 +71,35 @@ const SwirlAvatar = class {
|
|
|
71
71
|
this.imageAvailable = undefined;
|
|
72
72
|
this.inViewport = false;
|
|
73
73
|
}
|
|
74
|
+
componentDidLoad() {
|
|
75
|
+
this.setupIntersectionObserver();
|
|
76
|
+
}
|
|
77
|
+
disconnectedCallback() {
|
|
78
|
+
this.intersectionObserver?.disconnect();
|
|
79
|
+
}
|
|
74
80
|
watchSrcProp() {
|
|
75
81
|
this.imageAvailable = undefined;
|
|
76
82
|
}
|
|
83
|
+
setupIntersectionObserver() {
|
|
84
|
+
if (this.loading !== "intersecting") {
|
|
85
|
+
return;
|
|
86
|
+
}
|
|
87
|
+
this.intersectionObserver = new IntersectionObserver(this.onVisibilityChange.bind(this), {
|
|
88
|
+
threshold: 0,
|
|
89
|
+
});
|
|
90
|
+
this.intersectionObserver.observe(this.element);
|
|
91
|
+
}
|
|
92
|
+
onVisibilityChange(entries) {
|
|
93
|
+
if (entries[0].isIntersecting) {
|
|
94
|
+
this.inViewport = true;
|
|
95
|
+
}
|
|
96
|
+
}
|
|
77
97
|
render() {
|
|
78
98
|
const showImage = Boolean(this.src) &&
|
|
79
|
-
(this.imageAvailable || this.imageAvailable === undefined)
|
|
80
|
-
|
|
99
|
+
(this.imageAvailable || this.imageAvailable === undefined) &&
|
|
100
|
+
(this.loading !== "intersecting" || this.inViewport);
|
|
101
|
+
const showInitials = (!showImage || (!this.loaded && !this.loadingError)) &&
|
|
102
|
+
Boolean(this.initials);
|
|
81
103
|
const showIcon = !showImage && !showInitials && Boolean(this.icon);
|
|
82
104
|
const showFallbackIcon = !showImage && !showInitials && !showIcon;
|
|
83
105
|
const showBadge = Boolean(this.badge) && this.size === "m";
|
|
@@ -89,7 +111,7 @@ const SwirlAvatar = class {
|
|
|
89
111
|
});
|
|
90
112
|
const badgeClassName = index$1.classnames("avatar__badge", `avatar__badge--position-${this.badgePosition}`);
|
|
91
113
|
const toolClassName = index$1.classnames("avatar__tool", `avatar__tool--position-${this.toolPosition}`);
|
|
92
|
-
return (index.h(index.Host, { "aria-label": this.label, onKeydown: this.interactive ? this.onKeydown : undefined, onKeyup: this.interactive ? this.onKeyup : undefined, role: role, tabIndex: this.interactive ? 0 : undefined }, index.h("span", { class: className, part: "avatar" }, showImage && (index.h("span", { class: "avatar__image" }, index.h("img", { alt: "", height: swirlAvatarSizeMappings[this.size], loading: this.loading, onError: this.setImageUnavailable, onLoad: this.setImageAvailable, src: this.src, width: swirlAvatarSizeMappings[this.size] }))), showInitials && (index.h("span", { class: "avatar__initials" }, index.h("span", null, this.initials))), showIcon && index.h("span", { class: "avatar__icon", innerHTML: this.icon }), showFallbackIcon && (index.h("span", { class: "avatar__icon" }, index.h("swirl-icon-person", null))), showBadge && (index.h("span", { class: badgeClassName, innerHTML: this.badge })), index.h("span", { class: toolClassName }, index.h("slot", { name: "tool" }))), this.showLabel && (index.h("span", { "aria-hidden": true, class: "avatar__label" }, this.label))));
|
|
114
|
+
return (index.h(index.Host, { "aria-label": this.label, onKeydown: this.interactive ? this.onKeydown : undefined, onKeyup: this.interactive ? this.onKeyup : undefined, role: role, tabIndex: this.interactive ? 0 : undefined }, index.h("span", { class: className, part: "avatar" }, showImage && (index.h("span", { class: "avatar__image" }, index.h("img", { alt: "", height: swirlAvatarSizeMappings[this.size], loading: this.loading !== "intersecting" ? this.loading : undefined, onError: this.setImageUnavailable, onLoad: this.setImageAvailable, src: this.src, width: swirlAvatarSizeMappings[this.size] }))), showInitials && (index.h("span", { class: "avatar__initials" }, index.h("span", null, this.initials))), showIcon && index.h("span", { class: "avatar__icon", innerHTML: this.icon }), showFallbackIcon && (index.h("span", { class: "avatar__icon" }, index.h("swirl-icon-person", null))), showBadge && (index.h("span", { class: badgeClassName, innerHTML: this.badge })), index.h("span", { class: toolClassName }, index.h("slot", { name: "tool" }))), this.showLabel && (index.h("span", { "aria-hidden": true, class: "avatar__label" }, this.label))));
|
|
93
115
|
}
|
|
94
116
|
get element() { return index.getElement(this); }
|
|
95
117
|
static get watchers() { return {
|