@getflip/swirl-components 0.488.0 → 0.489.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 +59 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/swirl-components.cjs.js +1 -1
- package/dist/cjs/swirl-file-chip.cjs.entry.js +12 -3
- package/dist/collection/components/swirl-file-chip/swirl-file-chip.css +8 -0
- package/dist/collection/components/swirl-file-chip/swirl-file-chip.js +50 -2
- package/dist/components/swirl-file-chip.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/swirl-components.js +1 -1
- package/dist/esm/swirl-file-chip.entry.js +12 -3
- package/dist/swirl-components/p-30de71e6.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-file-chip/swirl-file-chip.d.ts +2 -0
- package/dist/types/components.d.ts +12 -0
- package/package.json +1 -1
- package/vscode-data.json +8 -0
- package/dist/swirl-components/p-3e997f70.entry.js +0 -1
|
@@ -5,7 +5,7 @@ var index$1 = require('./index-DcAhLZUH.js');
|
|
|
5
5
|
var FileSaver_min = require('./FileSaver.min-B46-_whJ.js');
|
|
6
6
|
var utils = require('./utils-UfZG-xPD.js');
|
|
7
7
|
|
|
8
|
-
const swirlFileChipCss = () => `: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}`;
|
|
8
|
+
const swirlFileChipCss = () => `: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}.file-chip--has-error .file-chip__icon{background-color:var(--s-surface-critical-subdued)}.file-chip--has-error .file-chip__description{color:var(--s-text-critical)}`;
|
|
9
9
|
|
|
10
10
|
const SwirlFileChip = class {
|
|
11
11
|
constructor(hostRef) {
|
|
@@ -15,6 +15,7 @@ const SwirlFileChip = class {
|
|
|
15
15
|
this.preview = index.createEvent(this, "preview", 7);
|
|
16
16
|
this.deleteButtonLabel = "Delete";
|
|
17
17
|
this.downloadButtonLabel = "Download";
|
|
18
|
+
this.errorLabel = "Error";
|
|
18
19
|
this.loadingLabel = "Loading …";
|
|
19
20
|
this.previewButtonLabel = "Preview";
|
|
20
21
|
this.fileType = "unknown";
|
|
@@ -68,6 +69,9 @@ const SwirlFileChip = class {
|
|
|
68
69
|
this.setFileType();
|
|
69
70
|
}
|
|
70
71
|
getFileIcon() {
|
|
72
|
+
if (this.hasError) {
|
|
73
|
+
return index.h("swirl-icon-error", { color: "critical", size: 20 });
|
|
74
|
+
}
|
|
71
75
|
if (this.loading) {
|
|
72
76
|
return index.h("swirl-spinner", { size: "s", label: this.loadingLabel });
|
|
73
77
|
}
|
|
@@ -104,16 +108,21 @@ const SwirlFileChip = class {
|
|
|
104
108
|
!this.showPreviewButton &&
|
|
105
109
|
!this.showDownloadButton &&
|
|
106
110
|
!this.showDeleteButton;
|
|
107
|
-
const hasDescription = this.description || this.loading;
|
|
111
|
+
const hasDescription = this.description || this.loading || this.hasError;
|
|
108
112
|
const className = index$1.classnames("file-chip", `file-chip--type-${this.fileType}`, {
|
|
109
113
|
"file-chip--loading": this.loading,
|
|
114
|
+
"file-chip--has-error": this.hasError,
|
|
110
115
|
"file-chip--has-description": hasDescription,
|
|
111
116
|
"file-chip--has-download-action": this.showDownloadButton,
|
|
112
117
|
"file-chip--has-preview-action": this.showPreviewButton,
|
|
113
118
|
"file-chip--no-actions": !hasAction,
|
|
114
119
|
"file-chip--no-suffix": noSuffix,
|
|
115
120
|
});
|
|
116
|
-
return (index.h(index.Host, { key: '
|
|
121
|
+
return (index.h(index.Host, { key: '7ffd07e38c155e7f70258088b5c3f593fb957d04' }, index.h("span", { key: 'f4ca6b7e58890d0dc1a9006c8c28eda86e64dbfd', "aria-label": this.name, class: className, onClick: this.handleClick, role: "group" }, index.h("span", { key: 'dda7f1612e92a45f54aac0ae5fb19a49113e84fa', class: "file-chip__icon" }, this.getFileIcon()), index.h("span", { key: '7f016dbb7414ab330afa6053b640aa1843ceb2cc', class: "file-chip__info" }, index.h("span", { key: '3aecd4189d19e31474fba1214658007cd45a5d99', class: "file-chip__name", title: this.name }, this.name), index.h("span", { key: 'bd1aeff1a43fda9bb5f17d99141fff90c843ae03', class: "file-chip__suffix" }, (this.description || this.loading || this.hasError) && (index.h("span", { key: 'e1ed1644a3bf7149bb556ac045195a557b6da144', class: "file-chip__description", role: this.hasError ? "status" : undefined }, this.hasError
|
|
122
|
+
? this.errorLabel
|
|
123
|
+
: this.loading
|
|
124
|
+
? this.loadingLabel
|
|
125
|
+
: this.description)), hasAction && !this.loading && (index.h("span", { key: 'fb4e7efb492cb7e0a405d8cfcb6e806240619f59', class: "file-chip__actions" }, this.showPreviewButton && (index.h("swirl-button", { key: '8f81e70e5e589228620bc46142a296dbc7be9ae8', hideLabel: true, icon: "<swirl-icon-preview></swirl-icon-preview>", label: this.previewButtonLabel, onClick: this.handlePreviewClick, part: "file-chip__preview", variant: "plain" })), this.showDownloadButton && (index.h("swirl-button", { key: 'b64f629efd950aca0a1fe8c7201f6e6f0a16c1e7', hideLabel: true, icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.handleDownloadClick, part: "file-chip__download", variant: "plain" })), this.showDeleteButton && (index.h("swirl-button", { key: '4971f424dce6897b830129c01d193bf93939acc6', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.deleteButtonLabel, onClick: this.handleDeleteClick, part: "file-chip__delete", variant: "plain" })))))))));
|
|
117
126
|
}
|
|
118
127
|
static get watchers() { return {
|
|
119
128
|
"type": [{
|
|
@@ -173,3 +173,11 @@
|
|
|
173
173
|
.file-chip--loading .file-chip__icon {
|
|
174
174
|
background-color: transparent;
|
|
175
175
|
}
|
|
176
|
+
|
|
177
|
+
.file-chip--has-error .file-chip__icon {
|
|
178
|
+
background-color: var(--s-surface-critical-subdued);
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.file-chip--has-error .file-chip__description {
|
|
182
|
+
color: var(--s-text-critical);
|
|
183
|
+
}
|
|
@@ -6,6 +6,7 @@ export class SwirlFileChip {
|
|
|
6
6
|
constructor() {
|
|
7
7
|
this.deleteButtonLabel = "Delete";
|
|
8
8
|
this.downloadButtonLabel = "Download";
|
|
9
|
+
this.errorLabel = "Error";
|
|
9
10
|
this.loadingLabel = "Loading …";
|
|
10
11
|
this.previewButtonLabel = "Preview";
|
|
11
12
|
this.fileType = "unknown";
|
|
@@ -59,6 +60,9 @@ export class SwirlFileChip {
|
|
|
59
60
|
this.setFileType();
|
|
60
61
|
}
|
|
61
62
|
getFileIcon() {
|
|
63
|
+
if (this.hasError) {
|
|
64
|
+
return h("swirl-icon-error", { color: "critical", size: 20 });
|
|
65
|
+
}
|
|
62
66
|
if (this.loading) {
|
|
63
67
|
return h("swirl-spinner", { size: "s", label: this.loadingLabel });
|
|
64
68
|
}
|
|
@@ -95,16 +99,21 @@ export class SwirlFileChip {
|
|
|
95
99
|
!this.showPreviewButton &&
|
|
96
100
|
!this.showDownloadButton &&
|
|
97
101
|
!this.showDeleteButton;
|
|
98
|
-
const hasDescription = this.description || this.loading;
|
|
102
|
+
const hasDescription = this.description || this.loading || this.hasError;
|
|
99
103
|
const className = classnames("file-chip", `file-chip--type-${this.fileType}`, {
|
|
100
104
|
"file-chip--loading": this.loading,
|
|
105
|
+
"file-chip--has-error": this.hasError,
|
|
101
106
|
"file-chip--has-description": hasDescription,
|
|
102
107
|
"file-chip--has-download-action": this.showDownloadButton,
|
|
103
108
|
"file-chip--has-preview-action": this.showPreviewButton,
|
|
104
109
|
"file-chip--no-actions": !hasAction,
|
|
105
110
|
"file-chip--no-suffix": noSuffix,
|
|
106
111
|
});
|
|
107
|
-
return (h(Host, { key: '
|
|
112
|
+
return (h(Host, { key: '7ffd07e38c155e7f70258088b5c3f593fb957d04' }, h("span", { key: 'f4ca6b7e58890d0dc1a9006c8c28eda86e64dbfd', "aria-label": this.name, class: className, onClick: this.handleClick, role: "group" }, h("span", { key: 'dda7f1612e92a45f54aac0ae5fb19a49113e84fa', class: "file-chip__icon" }, this.getFileIcon()), h("span", { key: '7f016dbb7414ab330afa6053b640aa1843ceb2cc', class: "file-chip__info" }, h("span", { key: '3aecd4189d19e31474fba1214658007cd45a5d99', class: "file-chip__name", title: this.name }, this.name), h("span", { key: 'bd1aeff1a43fda9bb5f17d99141fff90c843ae03', class: "file-chip__suffix" }, (this.description || this.loading || this.hasError) && (h("span", { key: 'e1ed1644a3bf7149bb556ac045195a557b6da144', class: "file-chip__description", role: this.hasError ? "status" : undefined }, this.hasError
|
|
113
|
+
? this.errorLabel
|
|
114
|
+
: this.loading
|
|
115
|
+
? this.loadingLabel
|
|
116
|
+
: this.description)), hasAction && !this.loading && (h("span", { key: 'fb4e7efb492cb7e0a405d8cfcb6e806240619f59', class: "file-chip__actions" }, this.showPreviewButton && (h("swirl-button", { key: '8f81e70e5e589228620bc46142a296dbc7be9ae8', hideLabel: true, icon: "<swirl-icon-preview></swirl-icon-preview>", label: this.previewButtonLabel, onClick: this.handlePreviewClick, part: "file-chip__preview", variant: "plain" })), this.showDownloadButton && (h("swirl-button", { key: 'b64f629efd950aca0a1fe8c7201f6e6f0a16c1e7', hideLabel: true, icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.handleDownloadClick, part: "file-chip__download", variant: "plain" })), this.showDeleteButton && (h("swirl-button", { key: '4971f424dce6897b830129c01d193bf93939acc6', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.deleteButtonLabel, onClick: this.handleDeleteClick, part: "file-chip__delete", variant: "plain" })))))))));
|
|
108
117
|
}
|
|
109
118
|
static get is() { return "swirl-file-chip"; }
|
|
110
119
|
static get encapsulation() { return "shadow"; }
|
|
@@ -179,6 +188,45 @@ export class SwirlFileChip {
|
|
|
179
188
|
"attribute": "download-button-label",
|
|
180
189
|
"defaultValue": "\"Download\""
|
|
181
190
|
},
|
|
191
|
+
"hasError": {
|
|
192
|
+
"type": "boolean",
|
|
193
|
+
"mutable": false,
|
|
194
|
+
"complexType": {
|
|
195
|
+
"original": "boolean",
|
|
196
|
+
"resolved": "boolean",
|
|
197
|
+
"references": {}
|
|
198
|
+
},
|
|
199
|
+
"required": false,
|
|
200
|
+
"optional": true,
|
|
201
|
+
"docs": {
|
|
202
|
+
"tags": [],
|
|
203
|
+
"text": ""
|
|
204
|
+
},
|
|
205
|
+
"getter": false,
|
|
206
|
+
"setter": false,
|
|
207
|
+
"reflect": false,
|
|
208
|
+
"attribute": "has-error"
|
|
209
|
+
},
|
|
210
|
+
"errorLabel": {
|
|
211
|
+
"type": "string",
|
|
212
|
+
"mutable": false,
|
|
213
|
+
"complexType": {
|
|
214
|
+
"original": "string",
|
|
215
|
+
"resolved": "string",
|
|
216
|
+
"references": {}
|
|
217
|
+
},
|
|
218
|
+
"required": false,
|
|
219
|
+
"optional": true,
|
|
220
|
+
"docs": {
|
|
221
|
+
"tags": [],
|
|
222
|
+
"text": ""
|
|
223
|
+
},
|
|
224
|
+
"getter": false,
|
|
225
|
+
"setter": false,
|
|
226
|
+
"reflect": false,
|
|
227
|
+
"attribute": "error-label",
|
|
228
|
+
"defaultValue": "\"Error\""
|
|
229
|
+
},
|
|
182
230
|
"loading": {
|
|
183
231
|
"type": "boolean",
|
|
184
232
|
"mutable": false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{proxyCustomElement as i,HTMLElement as e,createEvent as s,h as o,Host as t,transformTag as a}from"@stencil/core/internal/client";import{c}from"./index2.js";import{F as l}from"./FileSaver.min.js";import{a as n,b as r,c as h,e as d,f as p,h as f}from"./utils.js";import{d as u}from"./swirl-button2.js";import{d as w}from"./swirl-icon-attachment2.js";import{d as b}from"./swirl-icon-audio-file2.js";import{d as v}from"./swirl-icon-file2.js";import{d as m}from"./swirl-icon-folder2.js";import{d as _}from"./swirl-icon-image2.js";import{d as g}from"./swirl-icon-picture-as-pdf2.js";import{d as y}from"./swirl-icon-video-player2.js";import{d as k}from"./swirl-spinner2.js";import{d as x}from"./swirl-visually-hidden2.js";const j=i(class extends e{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.delete=s(this,"delete",7),this.download=s(this,"download",7),this.preview=s(this,"preview",7),this.deleteButtonLabel="Delete",this.downloadButtonLabel="Download",this.loadingLabel="Loading …",this.previewButtonLabel="Preview",this.fileType="unknown",this.isHovered=!1,this.fileIconMap={image:o("swirl-icon-image",{size:20}),video:o("swirl-icon-video-player",{size:20}),audio:o("swirl-icon-audio-file",{size:20}),pdf:o("swirl-icon-picture-as-pdf",{size:20}),compressed:o("swirl-icon-folder",{size:20}),document:o("swirl-icon-file",{size:20}),unknown:o("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=>{l.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?o("swirl-spinner",{size:"s",label:this.loadingLabel}):this.fileIconMap[this.fileType]}setFileType(){this.fileType=n(this.type)?"image":r(this.type)?"video":h(this.type)?"audio":d(this.type)?"pdf":p(this.type)?"compressed":f(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 o(t,{key:"6a3351ad90e6ebbab0e46b1b10e3f3d69fb9a775"},o("span",{key:"774678fbb4e000fc6ced058198473b01fd4cea72","aria-label":this.name,class:e,onClick:this.handleClick,role:"group"},o("span",{key:"5ae123dd154322c28eeecce1f1d021c7fe38a327",class:"file-chip__icon"},this.getFileIcon()),o("span",{key:"df3471cbfa87de7662702a8ac9134e28461be4f9",class:"file-chip__info"},o("span",{key:"23ca5a33bf127923fa625c91a82bc946466c4b6f",class:"file-chip__name",title:this.name},this.name),o("span",{key:"05815291c345976fb6e598a4e5a15334b6b07b10",class:"file-chip__suffix"},(this.description||this.loading)&&o("span",{key:"b3271eabf403d1b956c97f90b17d778351ee0783",class:"file-chip__description"},this.loading?this.loadingLabel:this.description),i&&!this.loading&&o("span",{key:"91e6d3b86c67a35336c369e88c3a5c795c7a2f41",class:"file-chip__actions"},this.showPreviewButton&&o("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&&o("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&&o("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}]}}static get style(){return":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}"}},[1,"swirl-file-chip",{deleteButtonLabel:[1,"delete-button-label"],description:[1],downloadButtonLabel:[1,"download-button-label"],loading:[4],loadingLabel:[1,"loading-label"],name:[1],previewButtonLabel:[1,"preview-button-label"],showDeleteButton:[4,"show-delete-button"],showDownloadButton:[4,"show-download-button"],showPreviewButton:[4,"show-preview-button"],skipNativeDownload:[4,"skip-native-download"],type:[1],url:[1],fileType:[32],isHovered:[32]},void 0,{type:[{watchType:0}]}]),z=j,E=function(){"undefined"!=typeof customElements&&["swirl-file-chip","swirl-button","swirl-icon-attachment","swirl-icon-audio-file","swirl-icon-file","swirl-icon-folder","swirl-icon-image","swirl-icon-picture-as-pdf","swirl-icon-video-player","swirl-spinner","swirl-visually-hidden"].forEach((i=>{switch(i){case"swirl-file-chip":customElements.get(a(i))||customElements.define(a(i),j);break;case"swirl-button":customElements.get(a(i))||u();break;case"swirl-icon-attachment":customElements.get(a(i))||w();break;case"swirl-icon-audio-file":customElements.get(a(i))||b();break;case"swirl-icon-file":customElements.get(a(i))||v();break;case"swirl-icon-folder":customElements.get(a(i))||m();break;case"swirl-icon-image":customElements.get(a(i))||_();break;case"swirl-icon-picture-as-pdf":customElements.get(a(i))||g();break;case"swirl-icon-video-player":customElements.get(a(i))||y();break;case"swirl-spinner":customElements.get(a(i))||k();break;case"swirl-visually-hidden":customElements.get(a(i))||x()}}))};export{z as SwirlFileChip,E as defineCustomElement}
|
|
1
|
+
import{proxyCustomElement as i,HTMLElement as e,createEvent as s,h as o,Host as t,transformTag as a}from"@stencil/core/internal/client";import{c}from"./index2.js";import{F as r}from"./FileSaver.min.js";import{a as l,b as n,c as h,e as d,f as p,h as f}from"./utils.js";import{d as u}from"./swirl-button2.js";import{d as w}from"./swirl-icon-attachment2.js";import{d as b}from"./swirl-icon-audio-file2.js";import{d as m}from"./swirl-icon-error2.js";import{d as v}from"./swirl-icon-file2.js";import{d as _}from"./swirl-icon-folder2.js";import{d as g}from"./swirl-icon-image2.js";import{d as y}from"./swirl-icon-picture-as-pdf2.js";import{d as k}from"./swirl-icon-video-player2.js";import{d as x}from"./swirl-spinner2.js";import{d as j}from"./swirl-visually-hidden2.js";const E=i(class extends e{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.delete=s(this,"delete",7),this.download=s(this,"download",7),this.preview=s(this,"preview",7),this.deleteButtonLabel="Delete",this.downloadButtonLabel="Download",this.errorLabel="Error",this.loadingLabel="Loading …",this.previewButtonLabel="Preview",this.fileType="unknown",this.isHovered=!1,this.fileIconMap={image:o("swirl-icon-image",{size:20}),video:o("swirl-icon-video-player",{size:20}),audio:o("swirl-icon-audio-file",{size:20}),pdf:o("swirl-icon-picture-as-pdf",{size:20}),compressed:o("swirl-icon-folder",{size:20}),document:o("swirl-icon-file",{size:20}),unknown:o("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=>{r.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.hasError?o("swirl-icon-error",{color:"critical",size:20}):this.loading?o("swirl-spinner",{size:"s",label:this.loadingLabel}):this.fileIconMap[this.fileType]}setFileType(){this.fileType=l(this.type)?"image":n(this.type)?"video":h(this.type)?"audio":d(this.type)?"pdf":p(this.type)?"compressed":f(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-error":this.hasError,"file-chip--has-description":this.description||this.loading||this.hasError,"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 o(t,{key:"7ffd07e38c155e7f70258088b5c3f593fb957d04"},o("span",{key:"f4ca6b7e58890d0dc1a9006c8c28eda86e64dbfd","aria-label":this.name,class:e,onClick:this.handleClick,role:"group"},o("span",{key:"dda7f1612e92a45f54aac0ae5fb19a49113e84fa",class:"file-chip__icon"},this.getFileIcon()),o("span",{key:"7f016dbb7414ab330afa6053b640aa1843ceb2cc",class:"file-chip__info"},o("span",{key:"3aecd4189d19e31474fba1214658007cd45a5d99",class:"file-chip__name",title:this.name},this.name),o("span",{key:"bd1aeff1a43fda9bb5f17d99141fff90c843ae03",class:"file-chip__suffix"},(this.description||this.loading||this.hasError)&&o("span",{key:"e1ed1644a3bf7149bb556ac045195a557b6da144",class:"file-chip__description",role:this.hasError?"status":void 0},this.hasError?this.errorLabel:this.loading?this.loadingLabel:this.description),i&&!this.loading&&o("span",{key:"fb4e7efb492cb7e0a405d8cfcb6e806240619f59",class:"file-chip__actions"},this.showPreviewButton&&o("swirl-button",{key:"8f81e70e5e589228620bc46142a296dbc7be9ae8",hideLabel:!0,icon:"<swirl-icon-preview></swirl-icon-preview>",label:this.previewButtonLabel,onClick:this.handlePreviewClick,part:"file-chip__preview",variant:"plain"}),this.showDownloadButton&&o("swirl-button",{key:"b64f629efd950aca0a1fe8c7201f6e6f0a16c1e7",hideLabel:!0,icon:"<swirl-icon-download></swirl-icon-download>",label:this.downloadButtonLabel,onClick:this.handleDownloadClick,part:"file-chip__download",variant:"plain"}),this.showDeleteButton&&o("swirl-button",{key:"4971f424dce6897b830129c01d193bf93939acc6",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}]}}static get style(){return":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}.file-chip--has-error .file-chip__icon{background-color:var(--s-surface-critical-subdued)}.file-chip--has-error .file-chip__description{color:var(--s-text-critical)}"}},[1,"swirl-file-chip",{deleteButtonLabel:[1,"delete-button-label"],description:[1],downloadButtonLabel:[1,"download-button-label"],hasError:[4,"has-error"],errorLabel:[1,"error-label"],loading:[4],loadingLabel:[1,"loading-label"],name:[1],previewButtonLabel:[1,"preview-button-label"],showDeleteButton:[4,"show-delete-button"],showDownloadButton:[4,"show-download-button"],showPreviewButton:[4,"show-preview-button"],skipNativeDownload:[4,"skip-native-download"],type:[1],url:[1],fileType:[32],isHovered:[32]},void 0,{type:[{watchType:0}]}]),z=E,L=function(){"undefined"!=typeof customElements&&["swirl-file-chip","swirl-button","swirl-icon-attachment","swirl-icon-audio-file","swirl-icon-error","swirl-icon-file","swirl-icon-folder","swirl-icon-image","swirl-icon-picture-as-pdf","swirl-icon-video-player","swirl-spinner","swirl-visually-hidden"].forEach((i=>{switch(i){case"swirl-file-chip":customElements.get(a(i))||customElements.define(a(i),E);break;case"swirl-button":customElements.get(a(i))||u();break;case"swirl-icon-attachment":customElements.get(a(i))||w();break;case"swirl-icon-audio-file":customElements.get(a(i))||b();break;case"swirl-icon-error":customElements.get(a(i))||m();break;case"swirl-icon-file":customElements.get(a(i))||v();break;case"swirl-icon-folder":customElements.get(a(i))||_();break;case"swirl-icon-image":customElements.get(a(i))||g();break;case"swirl-icon-picture-as-pdf":customElements.get(a(i))||y();break;case"swirl-icon-video-player":customElements.get(a(i))||k();break;case"swirl-spinner":customElements.get(a(i))||x();break;case"swirl-visually-hidden":customElements.get(a(i))||j()}}))};export{z as SwirlFileChip,L as defineCustomElement}
|