@getflip/swirl-components 0.167.2 → 0.168.0

package/dist/types/components/swirl-app-layout/swirl-app-layout.d.ts

@@ -21,6 +21,7 @@ export declare class SwirlAppLayout {
   backToNavigationViewButtonLabel?: string;
   ctaIcon?: string;
   ctaLabel?: string;
+  hasNavigation: boolean;
   hideAppBar?: boolean;
   navigationBackButtonLabel?: string;
   navigationLabel?: string;
@@ -29,7 +30,6 @@ export declare class SwirlAppLayout {
   sidebarHeading?: string;
   transitionStyle?: string;
   hasCustomAppBarBackButton: boolean;
-  hasNavigation: boolean;
   hasSidebar: boolean;
   mobileView: SwirlAppLayoutMobileView;
   sidebarActive: boolean;

package/dist/types/components.d.ts

@@ -203,6 +203,7 @@ export namespace Components {
         "changeMobileView": (mobileView: SwirlAppLayoutMobileView, transition?: boolean) => Promise<void>;
         "ctaIcon"?: string;
         "ctaLabel"?: string;
+        "hasNavigation": boolean;
         "hideAppBar"?: boolean;
         /**
           * Hide the sidebar
@@ -4576,6 +4577,7 @@ declare namespace LocalJSX {
         "backToNavigationViewButtonLabel"?: string;
         "ctaIcon"?: string;
         "ctaLabel"?: string;
+        "hasNavigation"?: boolean;
         "hideAppBar"?: boolean;
         "navigationBackButtonLabel"?: string;
         "navigationLabel"?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getflip/swirl-components",
-  "version": "0.167.2",
+  "version": "0.168.0",
   "description": "Swirl Design System Web Component Library",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

package/vscode-data.json

@@ -217,6 +217,10 @@
           "name": "cta-label",
           "description": ""
         },
+        {
+          "name": "has-navigation",
+          "description": ""
+        },
         {
           "name": "hide-app-bar",
           "description": ""

package/dist/swirl-components/p-21c1a36c.entry.js

@@ -1 +0,0 @@
-import{r as a,c as t,h as i,H as r,g as s}from"./p-e5528e8a.js";import{c as e}from"./p-b7898321.js";const o={"3xs":20,"2xs":24,xs:28,s:32,m:40,l:48,xl:64,"2xl":144},n=class{constructor(i){a(this,i),this.imageError=t(this,"imageError",7),this.imageLoad=t(this,"imageLoad",7),this.setImageAvailable=()=>{this.imageAvailable=!0,this.loadingError=!1,this.loaded=!0,this.imageLoad.emit()},this.setImageUnavailable=()=>{this.imageAvailable=!1,this.loaded=!0,this.loadingError=!0,this.imageError.emit()},this.onKeydown=a=>{"Space"===a.code?a.preventDefault():"Enter"===a.code&&(a.preventDefault(),this.element.click())},this.onKeyup=a=>{"Space"===a.code&&(a.preventDefault(),this.element.click())},this.badge=void 0,this.badgePosition="bottom",this.color="kiwi",this.icon=void 0,this.initials=void 0,this.interactive=!1,this.label=void 0,this.loading=void 0,this.showLabel=!1,this.size="m",this.src=void 0,this.toolPosition="bottom",this.variant="round",this.loadingError=!1,this.loaded=!1,this.imageAvailable=void 0,this.inViewport=!1}componentDidLoad(){this.setupIntersectionObserver()}disconnectedCallback(){this.intersectionObserver?.disconnect()}watchSrcProp(){this.imageAvailable=void 0}setupIntersectionObserver(){"intersecting"===this.loading&&(this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange.bind(this),{threshold:0}),this.intersectionObserver.observe(this.element))}onVisibilityChange(a){a[0].isIntersecting&&(this.inViewport=!0)}render(){const a=Boolean(this.src)&&(this.imageAvailable||void 0===this.imageAvailable)&&("intersecting"!==this.loading||this.inViewport),t=(!a||!this.loaded&&!this.loadingError)&&Boolean(this.initials),s=!a&&!t&&Boolean(this.icon),n=!a&&!t&&!s,v=Boolean(this.badge)&&"m"===this.size,l=this.interactive?"button":"img",h=e("avatar",`avatar--color-${this.color}`,`avatar--size-${this.size}`,`avatar--variant-${this.variant}`,{"avatar--has-icon":s||n,"avatar--has-initials":t,"avatar--interactive":this.interactive}),d=e("avatar__badge",`avatar__badge--position-${this.badgePosition}`),c=e("avatar__tool",`avatar__tool--position-${this.toolPosition}`);return i(r,{"aria-label":this.label,onKeydown:this.interactive?this.onKeydown:void 0,onKeyup:this.interactive?this.onKeyup:void 0,role:l,tabIndex:this.interactive?0:void 0},i("span",{class:h,part:"avatar"},a&&i("span",{class:"avatar__image"},i("img",{alt:"",height:o[this.size],loading:"intersecting"!==this.loading?this.loading:void 0,onError:this.setImageUnavailable,onLoad:this.setImageAvailable,src:this.src,width:o[this.size]})),t&&i("span",{class:"avatar__initials"},i("span",null,this.initials)),s&&i("span",{class:"avatar__icon",innerHTML:this.icon}),n&&i("span",{class:"avatar__icon"},i("swirl-icon-person",null)),v&&i("span",{class:d,innerHTML:this.badge}),i("span",{class:c},i("slot",{name:"tool"}))),this.showLabel&&i("span",{"aria-hidden":!0,class:"avatar__label"},this.label))}get element(){return s(this)}static get watchers(){return{src:["watchSrcProp"]}}};n.style=":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)}";export{n as swirl_avatar}