@getflip/swirl-components 0.488.0 → 0.489.0

package/dist/types/components.d.ts

@@ -1050,6 +1050,11 @@ export namespace Components {
           * @default "Download"
          */
         "downloadButtonLabel"?: string;
+        /**
+          * @default "Error"
+         */
+        "errorLabel"?: string;
+        "hasError"?: boolean;
         "loading"?: boolean;
         /**
           * @default "Loading …"
@@ -10843,6 +10848,11 @@ declare namespace LocalJSX {
           * @default "Download"
          */
         "downloadButtonLabel"?: string;
+        /**
+          * @default "Error"
+         */
+        "errorLabel"?: string;
+        "hasError"?: boolean;
         "loading"?: boolean;
         /**
           * @default "Loading …"
@@ -15661,6 +15671,8 @@ declare namespace LocalJSX {
         "deleteButtonLabel": string;
         "description": string;
         "downloadButtonLabel": string;
+        "hasError": boolean;
+        "errorLabel": string;
         "loading": boolean;
         "loadingLabel": string;
         "name": string;

package/package.json

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

package/vscode-data.json

@@ -3043,6 +3043,14 @@
           "name": "download-button-label",
           "description": ""
         },
+        {
+          "name": "error-label",
+          "description": ""
+        },
+        {
+          "name": "has-error",
+          "description": ""
+        },
         {
           "name": "loading",
           "description": ""

package/dist/swirl-components/p-3e997f70.entry.js

@@ -1 +0,0 @@
-import{r as i,c as e,h as s,a as o}from"./p-N0O_JBVJ.js";import{c}from"./p-orsBiyT_.js";import{F as t}from"./p-Bp6322JD.js";import{a,b as n,c as l,e as r,f as h,h as p}from"./p-CCck-DTo.js";const f=class{constructor(o){i(this,o),this.delete=e(this,"delete",7),this.download=e(this,"download",7),this.preview=e(this,"preview",7),this.deleteButtonLabel="Delete",this.downloadButtonLabel="Download",this.loadingLabel="Loading …",this.previewButtonLabel="Preview",this.fileType="unknown",this.isHovered=!1,this.fileIconMap={image:s("swirl-icon-image",{size:20}),video:s("swirl-icon-video-player",{size:20}),audio:s("swirl-icon-audio-file",{size:20}),pdf:s("swirl-icon-picture-as-pdf",{size:20}),compressed:s("swirl-icon-folder",{size:20}),document:s("swirl-icon-file",{size:20}),unknown:s("swirl-icon-attachment",{size:20})},this.handleClick=()=>{this.loading||(this.showPreviewButton?this.handlePreviewClick():this.showDownloadButton&&this.handleDownloadClick())},this.handleDownloadClick=i=>{if(i?.stopPropagation(),this.download.emit(),this.skipNativeDownload)return;const e=this.name||this.url.split("/").pop();fetch(this.url).then((i=>i.blob())).then((i=>{t.saveAs(i,e)}))},this.handlePreviewClick=i=>{i?.stopPropagation(),this.preview.emit()},this.handleDeleteClick=i=>{i?.stopPropagation(),this.delete.emit()}}componentWillLoad(){this.setFileType()}watchType(){this.setFileType()}getFileIcon(){return this.loading?s("swirl-spinner",{size:"s",label:this.loadingLabel}):this.fileIconMap[this.fileType]}setFileType(){this.fileType=a(this.type)?"image":n(this.type)?"video":l(this.type)?"audio":r(this.type)?"pdf":h(this.type)?"compressed":p(this.type)?"document":"unknown"}render(){const i=this.showPreviewButton||this.showDownloadButton||this.showDeleteButton,e=c("file-chip",`file-chip--type-${this.fileType}`,{"file-chip--loading":this.loading,"file-chip--has-description":this.description||this.loading,"file-chip--has-download-action":this.showDownloadButton,"file-chip--has-preview-action":this.showPreviewButton,"file-chip--no-actions":!i,"file-chip--no-suffix":!(this.description||this.showPreviewButton||this.showDownloadButton||this.showDeleteButton)});return s(o,{key:"6a3351ad90e6ebbab0e46b1b10e3f3d69fb9a775"},s("span",{key:"774678fbb4e000fc6ced058198473b01fd4cea72","aria-label":this.name,class:e,onClick:this.handleClick,role:"group"},s("span",{key:"5ae123dd154322c28eeecce1f1d021c7fe38a327",class:"file-chip__icon"},this.getFileIcon()),s("span",{key:"df3471cbfa87de7662702a8ac9134e28461be4f9",class:"file-chip__info"},s("span",{key:"23ca5a33bf127923fa625c91a82bc946466c4b6f",class:"file-chip__name",title:this.name},this.name),s("span",{key:"05815291c345976fb6e598a4e5a15334b6b07b10",class:"file-chip__suffix"},(this.description||this.loading)&&s("span",{key:"b3271eabf403d1b956c97f90b17d778351ee0783",class:"file-chip__description"},this.loading?this.loadingLabel:this.description),i&&!this.loading&&s("span",{key:"91e6d3b86c67a35336c369e88c3a5c795c7a2f41",class:"file-chip__actions"},this.showPreviewButton&&s("swirl-button",{key:"ef8f3d5ed69b6a108f133d2d634599682c5c2a21",hideLabel:!0,icon:"<swirl-icon-preview></swirl-icon-preview>",label:this.previewButtonLabel,onClick:this.handlePreviewClick,part:"file-chip__preview",variant:"plain"}),this.showDownloadButton&&s("swirl-button",{key:"efd22a35ef0e7988bc178494a26f2573e87fd350",hideLabel:!0,icon:"<swirl-icon-download></swirl-icon-download>",label:this.downloadButtonLabel,onClick:this.handleDownloadClick,part:"file-chip__download",variant:"plain"}),this.showDeleteButton&&s("swirl-button",{key:"1637ae6ccf7d657d45fe2635ee16c874d163310b",hideLabel:!0,icon:"<swirl-icon-close></swirl-icon-close>",label:this.deleteButtonLabel,onClick:this.handleDeleteClick,part:"file-chip__delete",variant:"plain"}))))))}static get watchers(){return{type:[{watchType:0}]}}};f.style=":host{display:inline-block;max-width:100%;overflow:hidden;background-color:var(--s-background-default);border-radius:var(--s-border-radius-sm);outline:1px solid var(--s-border-strong);outline-offset:-1px}.file-chip{display:flex;position:relative;align-items:center;max-width:100%;font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);background-color:transparent;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-8);gap:var(--s-space-12)}@media (hover: hover){.file-chip:hover:not(.file-chip--no-actions):not(.file-chip--loading).file-chip--has-preview-action,.file-chip:hover:not(.file-chip--no-actions):not(.file-chip--loading).file-chip--has-download-action,.file-chip:focus-within:not(.file-chip--no-actions):not(.file-chip--loading).file-chip--has-preview-action,.file-chip:focus-within:not(.file-chip--no-actions):not(.file-chip--loading).file-chip--has-download-action{background-color:var(--s-state-hovered);cursor:pointer}.file-chip:hover:not(.file-chip--no-actions):not(.file-chip--loading) .file-chip__description,.file-chip:focus-within:not(.file-chip--no-actions):not(.file-chip--loading) .file-chip__description{opacity:0;pointer-events:none}.file-chip:hover:not(.file-chip--no-actions):not(.file-chip--loading) .file-chip__actions,.file-chip:focus-within:not(.file-chip--no-actions):not(.file-chip--loading) .file-chip__actions{opacity:1;pointer-events:auto}}.file-chip__icon{display:flex;flex-shrink:0;padding:var(--s-space-4);background-color:var(--s-decorative-blueberry-surface-subdued);border-radius:50%;color:var(--s-decorative-blueberry-text)}.file-chip__info{display:flex;align-items:center;gap:var(--s-space-12);flex-grow:1;min-width:0}.file-chip__name{color:var(--s-text-default);font-weight:var(--s-font-weight-semibold)}.file-chip__suffix{display:inline-flex;align-items:center;justify-content:flex-end;gap:var(--s-space-12);flex-grow:1;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}@media (hover: hover){.file-chip__suffix{display:inline-grid;justify-items:end;gap:0}}.file-chip__suffix swirl-button{display:inline-flex}@media (hover: hover){.file-chip__description,.file-chip__actions{grid-area:1 / 1}}.file-chip__description{color:var(--s-text-subdued);font-size:var(--s-font-size-xs)}.file-chip__name,.file-chip__description{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.file-chip__actions{display:flex;align-items:center;gap:var(--s-space-8)}@media (hover: hover){.file-chip__actions{opacity:0;pointer-events:none}}.file-chip--no-suffix .file-chip__suffix{display:none}.file-chip--has-description .file-chip__info{align-items:baseline}.file-chip--type-image .file-chip__icon{color:var(--s-decorative-kiwi-text);background-color:var(--s-decorative-kiwi-surface-subdued)}.file-chip--type-video .file-chip__icon{color:var(--s-decorative-radish-text);background-color:var(--s-decorative-radish-surface-subdued)}.file-chip--type-audio .file-chip__icon{color:var(--s-decorative-grape-text);background-color:var(--s-decorative-grape-surface-subdued)}.file-chip--type-pdf .file-chip__icon{color:var(--s-decorative-chilli-text);background-color:var(--s-decorative-chilli-surface-subdued)}.file-chip--type-compressed .file-chip__icon{color:var(--s-decorative-pumpkin-text);background-color:var(--s-decorative-pumpkin-surface-subdued)}.file-chip--type-document .file-chip__icon{color:var(--s-decorative-blueberry-text);background-color:var(--s-decorative-blueberry-surface-subdued)}.file-chip--type-unknown .file-chip__icon{color:var(--s-decorative-banana-text);background-color:var(--s-decorative-banana-surface-subdued)}.file-chip--loading .file-chip__icon{padding:var(--s-space-2)}.file-chip--loading .file-chip__icon{background-color:transparent}";export{f as swirl_file_chip}