@getflip/swirl-components 0.518.0 → 0.519.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 +3 -3
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/swirl-avatar-group.cjs.entry.js +1 -1
- package/dist/cjs/swirl-avatar.cjs.entry.js +2 -2
- package/dist/cjs/swirl-components.cjs.js +1 -1
- package/dist/cjs/swirl-resource-list-item.cjs.entry.js +4 -4
- package/dist/collection/components/swirl-avatar/swirl-avatar.css +30 -51
- package/dist/collection/components/swirl-avatar/swirl-avatar.js +3 -3
- package/dist/collection/components/swirl-avatar-group/swirl-avatar-group.css +3 -3
- package/dist/collection/components/swirl-avatar-group/swirl-avatar-group.stories.js +13 -0
- package/dist/collection/components/swirl-resource-list-item/swirl-resource-list-item.css +6 -10
- package/dist/collection/components/swirl-resource-list-item/swirl-resource-list-item.js +3 -3
- package/dist/components/swirl-avatar-group.js +1 -1
- package/dist/components/swirl-avatar.js +1 -1
- package/dist/components/swirl-resource-list-item.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/swirl-avatar-group.entry.js +1 -1
- package/dist/esm/swirl-avatar.entry.js +2 -2
- package/dist/esm/swirl-components.js +1 -1
- package/dist/esm/swirl-resource-list-item.entry.js +4 -4
- package/dist/swirl-components/p-49710fa6.entry.js +1 -0
- package/dist/swirl-components/{p-551338d0.entry.js → p-9b8bf427.entry.js} +1 -1
- package/dist/swirl-components/p-e0208125.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-avatar-group/swirl-avatar-group.stories.d.ts +1 -0
- package/package.json +2 -2
- package/dist/swirl-components/p-2ddb8ae8.entry.js +0 -1
- package/dist/swirl-components/p-50897889.entry.js +0 -1
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
var index = require('./index-DfC2lanl.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-child){z-index:1;display:inline-flex;border-radius:50
|
|
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:var(--swirl-avatar-radius, 50%);box-shadow:0 0 0 0.25rem var(--swirl-avatar-group-border-color);background-color: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:var(--swirl-avatar-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:var(--swirl-avatar-radius, 50%);box-shadow:0 0 0 0.125rem var(--swirl-avatar-group-border-color);background-color: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) {
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
var index = require('./index-DfC2lanl.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:
|
|
6
|
+
const swirlAvatarCss = () => `:host{display:inline-flex;flex-shrink:0;align-items:center;flex-direction:column;--swirl-avatar-radius:50%}:host *{box-sizing:border-box}:host([variant="square"][size="3xs"]),:host([variant="square"][size="2xs"]){--swirl-avatar-radius:0.25rem}:host([variant="square"][size="xs"]),:host([variant="square"][size="s"]){--swirl-avatar-radius:0.5rem}:host([variant="square"][size="m"]){--swirl-avatar-radius:0.625rem}:host([variant="square"][size="l"]){--swirl-avatar-radius:0.75rem}:host([variant="square"][size="xl"]){--swirl-avatar-radius:1rem}:host([variant="square"][size="2xl"]){--swirl-avatar-radius:1.25rem}.avatar{position:relative;display:inline-flex;justify-content:center;align-items:center;border-radius:var(--swirl-avatar-radius);border:var(--swirl-avatar-border-width, 0) solid var(--swirl-avatar-border-color, transparent)}.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-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-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-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-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-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-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-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__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:var(--swirl-avatar-radius)}.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:var(--swirl-avatar-radius);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: '507321c143bd3a7bd96727522250a32a0bddfda9', "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: '41c06e0e9a91b7012a898a19c7d2ff66b93a3584', class: className, part: "avatar" }, showImage && (index.h("span", { key: '4026f68212a7026dfdb236bffacc210a7dfd7b30', class: "avatar__image" }, index.h("img", { key: '4636819fb2a365ed239fe765a4efcb347186ca06', 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: '87a4741931e8a7057764618f4164df8c3286fa15', class: "avatar__initials" }, index.h("span", { key: 'ac5d4393d9bfaa22391e3414e0a02d3831c8c137' }, this.initials))), showIcon && index.h("span", { key: '29690e49b2882761d26dd548bbdd59d3eb458d5d', class: "avatar__icon", innerHTML: this.icon }), showFallbackIcon && (index.h("span", { key: '28cba2cb26c839a0f368bf7312039cfc36cd60ab', class: "avatar__icon" }, index.h("swirl-icon-person", { key: 'e76a5efbecc6a46608d7162a9aeebd7e7acfe8f9' }))), showBadge && (index.h("span", { key: 'd88cc696f910bd1105811d0d07636f7ed686d11b', class: badgeClassName, innerHTML: this.badge })), index.h("span", { key: 'eeb86573ed228297fba743a2327aea481cf05e03', class: toolClassName }, index.h("slot", { key: '121f539afb9e2ef8adac562c05c1f62fba280e87', name: "tool" }))), this.showLabel && (index.h("span", { key: 'b73d9b0e724038fa345e081ec3761fcd964ea95f', "aria-hidden": true, class: "avatar__label" }, this.label))));
|
|
122
122
|
}
|
|
123
123
|
get element() { return index.getElement(this); }
|
|
124
124
|
static get watchers() { return {
|