@getflip/swirl-components 0.208.0 → 0.208.1
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.cjs.entry.js +1 -1
- package/dist/collection/components/swirl-avatar/swirl-avatar.js +1 -1
- package/dist/collection/components/swirl-avatar/swirl-avatar.spec.js +7 -6
- package/dist/components/assets/pdfjs/pdf.worker.min.js +1 -1
- package/dist/components/swirl-avatar.js +1 -1
- package/dist/esm/swirl-avatar.entry.js +1 -1
- package/dist/swirl-components/p-d0d5ba7d.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/package.json +1 -1
- package/dist/swirl-components/p-c1610c5c.entry.js +0 -1
package/components.json
CHANGED
|
@@ -110,7 +110,7 @@ const SwirlAvatar = class {
|
|
|
110
110
|
});
|
|
111
111
|
const badgeClassName = index$1.classnames("avatar__badge", `avatar__badge--position-${this.badgePosition}`);
|
|
112
112
|
const toolClassName = index$1.classnames("avatar__tool", `avatar__tool--position-${this.toolPosition}`);
|
|
113
|
-
return (index.h(index.Host, { key: '
|
|
113
|
+
return (index.h(index.Host, { key: 'a846927adb4c374f3663f856b05d50603915502d', "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: 'db1b5a6ae753350cb74562ebbcaffdcd1fe9b73a', class: className, part: "avatar" }, showImage && (index.h("span", { key: '92421d372f10ca75f3a4d40b5318ab88073f05ef', class: "avatar__image" }, index.h("img", { key: '7003338128d40de0ed8a97ed92c84d17d2b886f1', 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", { key: '1b9fbbcee47c46c1264dbdefe20b71fe6edc91d7', class: "avatar__initials" }, index.h("span", { key: 'a41ef5f739b738726027bb0ba6cf9f6aca9808c8' }, this.initials))), showIcon && index.h("span", { key: '8b1933c8be2d2072824aeda245a771f84d7a9707', class: "avatar__icon", innerHTML: this.icon }), showFallbackIcon && (index.h("span", { key: 'afc1c2e68873784d757587881cc05cfbb98f848a', class: "avatar__icon" }, index.h("swirl-icon-person", { key: '40a6e6fdc13ae07cb18ab9d0ac1fecfb092217f4' }))), showBadge && (index.h("span", { key: '69dc8a86df183237882c7241b0b73d7babfcf9fe', class: badgeClassName, innerHTML: this.badge })), index.h("span", { key: '822c6123a6984406e709cfc6083070eaf35044e5', class: toolClassName }, index.h("slot", { key: 'd5e8246097832bf808fcb91dc5a822d1923db2a4', name: "tool" }))), this.showLabel && (index.h("span", { key: '10e6e09526bf6f3818ff5e54b270695adaf29e15', "aria-hidden": true, class: "avatar__label" }, this.label))));
|
|
114
114
|
}
|
|
115
115
|
get element() { return index.getElement(this); }
|
|
116
116
|
static get watchers() { return {
|
|
@@ -102,7 +102,7 @@ export class SwirlAvatar {
|
|
|
102
102
|
});
|
|
103
103
|
const badgeClassName = classnames("avatar__badge", `avatar__badge--position-${this.badgePosition}`);
|
|
104
104
|
const toolClassName = classnames("avatar__tool", `avatar__tool--position-${this.toolPosition}`);
|
|
105
|
-
return (h(Host, { key: '
|
|
105
|
+
return (h(Host, { key: 'a846927adb4c374f3663f856b05d50603915502d', "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: 'db1b5a6ae753350cb74562ebbcaffdcd1fe9b73a', class: className, part: "avatar" }, showImage && (h("span", { key: '92421d372f10ca75f3a4d40b5318ab88073f05ef', class: "avatar__image" }, h("img", { key: '7003338128d40de0ed8a97ed92c84d17d2b886f1', 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 && (h("span", { key: '1b9fbbcee47c46c1264dbdefe20b71fe6edc91d7', class: "avatar__initials" }, h("span", { key: 'a41ef5f739b738726027bb0ba6cf9f6aca9808c8' }, this.initials))), showIcon && h("span", { key: '8b1933c8be2d2072824aeda245a771f84d7a9707', class: "avatar__icon", innerHTML: this.icon }), showFallbackIcon && (h("span", { key: 'afc1c2e68873784d757587881cc05cfbb98f848a', class: "avatar__icon" }, h("swirl-icon-person", { key: '40a6e6fdc13ae07cb18ab9d0ac1fecfb092217f4' }))), showBadge && (h("span", { key: '69dc8a86df183237882c7241b0b73d7babfcf9fe', class: badgeClassName, innerHTML: this.badge })), h("span", { key: '822c6123a6984406e709cfc6083070eaf35044e5', class: toolClassName }, h("slot", { key: 'd5e8246097832bf808fcb91dc5a822d1923db2a4', name: "tool" }))), this.showLabel && (h("span", { key: '10e6e09526bf6f3818ff5e54b270695adaf29e15', "aria-hidden": true, class: "avatar__label" }, this.label))));
|
|
106
106
|
}
|
|
107
107
|
static get is() { return "swirl-avatar"; }
|
|
108
108
|
static get encapsulation() { return "shadow"; }
|
|
@@ -7,7 +7,7 @@ describe("swirl-avatar", () => {
|
|
|
7
7
|
html: `<swirl-avatar label="John Doe"></swirl-avatar>`,
|
|
8
8
|
});
|
|
9
9
|
expect(page.root).toEqualHtml(`
|
|
10
|
-
<swirl-avatar
|
|
10
|
+
<swirl-avatar label="John Doe">
|
|
11
11
|
<mock:shadow-root>
|
|
12
12
|
<span class="avatar avatar--color-kiwi avatar--has-icon avatar--size-m avatar--variant-round" part="avatar">
|
|
13
13
|
<span class="avatar__icon">
|
|
@@ -33,7 +33,7 @@ describe("swirl-avatar", () => {
|
|
|
33
33
|
html: `<swirl-avatar label="John Doe" src="https://"></swirl-avatar>`,
|
|
34
34
|
});
|
|
35
35
|
expect(page.root).toEqualHtml(`
|
|
36
|
-
<swirl-avatar
|
|
36
|
+
<swirl-avatar label="John Doe" src="https://">
|
|
37
37
|
<mock:shadow-root>
|
|
38
38
|
<span class="avatar avatar--color-kiwi avatar--size-m avatar--variant-round" part="avatar">
|
|
39
39
|
<span class="avatar__image">
|
|
@@ -53,7 +53,7 @@ describe("swirl-avatar", () => {
|
|
|
53
53
|
html: `<swirl-avatar initials="JD" label="John Doe"></swirl-avatar>`,
|
|
54
54
|
});
|
|
55
55
|
expect(page.root).toEqualHtml(`
|
|
56
|
-
<swirl-avatar
|
|
56
|
+
<swirl-avatar initials="JD" label="John Doe">
|
|
57
57
|
<mock:shadow-root>
|
|
58
58
|
<span class="avatar avatar--color-kiwi avatar--has-initials avatar--size-m avatar--variant-round" part="avatar">
|
|
59
59
|
<span class="avatar__initials">
|
|
@@ -75,7 +75,7 @@ describe("swirl-avatar", () => {
|
|
|
75
75
|
html: `<swirl-avatar icon="<swirl-icon-close></swirl-icon-close>" label="John Doe"></swirl-avatar>`,
|
|
76
76
|
});
|
|
77
77
|
expect(page.root).toEqualHtml(`
|
|
78
|
-
<swirl-avatar
|
|
78
|
+
<swirl-avatar icon="<swirl-icon-close></swirl-icon-close>" label="John Doe">
|
|
79
79
|
<mock:shadow-root>
|
|
80
80
|
<span class="avatar avatar--color-kiwi avatar--has-icon avatar--size-m avatar--variant-round" part="avatar">
|
|
81
81
|
<span class="avatar__icon">
|
|
@@ -118,7 +118,7 @@ describe("swirl-avatar", () => {
|
|
|
118
118
|
html: `<swirl-avatar badge="<swirl-badge aria-label='3 new messages' label='3'></swirl-badge>" badge-position="top" label="John Doe"></swirl-avatar>`,
|
|
119
119
|
});
|
|
120
120
|
expect(page.root).toEqualHtml(`
|
|
121
|
-
<swirl-avatar
|
|
121
|
+
<swirl-avatar badge="<swirl-badge aria-label='3 new messages' label='3'></swirl-badge>" badge-position="top" label="John Doe">
|
|
122
122
|
<mock:shadow-root>
|
|
123
123
|
<span class="avatar avatar--color-kiwi avatar--has-icon avatar--size-m avatar--variant-round" part="avatar">
|
|
124
124
|
<span class="avatar__icon">
|
|
@@ -141,7 +141,7 @@ describe("swirl-avatar", () => {
|
|
|
141
141
|
html: `<swirl-avatar label="John Doe" show-label></swirl-avatar>`,
|
|
142
142
|
});
|
|
143
143
|
expect(page.root).toEqualHtml(`
|
|
144
|
-
<swirl-avatar
|
|
144
|
+
<swirl-avatar label="John Doe" show-label="">
|
|
145
145
|
<mock:shadow-root>
|
|
146
146
|
<span class="avatar avatar--color-kiwi avatar--has-icon avatar--size-m avatar--variant-round" part="avatar">
|
|
147
147
|
<span class="avatar__icon">
|
|
@@ -163,6 +163,7 @@ describe("swirl-avatar", () => {
|
|
|
163
163
|
components: [SwirlAvatar],
|
|
164
164
|
html: `<swirl-avatar interactive="true" label="John Doe"></swirl-avatar>`,
|
|
165
165
|
});
|
|
166
|
+
expect(page.root.getAttribute("aria-label")).toBe("John Doe");
|
|
166
167
|
const buttonSpy = jest.fn();
|
|
167
168
|
page.root.addEventListener("click", buttonSpy);
|
|
168
169
|
page.root.click();
|