@getflip/swirl-components 0.348.0 → 0.349.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 +3 -3
- 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 +32 -10
- package/dist/cjs/swirl-option-list_2.cjs.entry.js +1 -1
- package/dist/collection/components/swirl-file-chip/swirl-file-chip.css +35 -0
- package/dist/collection/components/swirl-file-chip/swirl-file-chip.js +36 -10
- package/dist/collection/components/swirl-tag/swirl-tag.css +10 -10
- package/dist/components/assets/pdfjs/pdf.worker.min.mjs +0 -28
- package/dist/components/swirl-file-chip.js +36 -11
- package/dist/components/swirl-tag2.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 +32 -10
- package/dist/esm/swirl-option-list_2.entry.js +1 -1
- package/dist/swirl-components/p-3a676730.entry.js +1 -0
- package/dist/swirl-components/p-5833ee73.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 +7 -0
- package/package.json +1 -1
- package/dist/swirl-components/p-13c538de.entry.js +0 -1
- package/dist/swirl-components/p-b09f4e59.entry.js +0 -1
|
@@ -75,3 +75,38 @@
|
|
|
75
75
|
bottom: 0;
|
|
76
76
|
opacity: 0;
|
|
77
77
|
}
|
|
78
|
+
|
|
79
|
+
.file-chip--type-image .file-chip__icon {
|
|
80
|
+
color: var(--s-decorative-kiwi-text);
|
|
81
|
+
background-color: var(--s-decorative-kiwi-surface-subdued);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.file-chip--type-video .file-chip__icon {
|
|
85
|
+
color: var(--s-decorative-radish-text);
|
|
86
|
+
background-color: var(--s-decorative-radish-surface-subdued);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.file-chip--type-audio .file-chip__icon {
|
|
90
|
+
color: var(--s-decorative-grape-text);
|
|
91
|
+
background-color: var(--s-decorative-grape-surface-subdued);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.file-chip--type-pdf .file-chip__icon {
|
|
95
|
+
color: var(--s-decorative-chilli-text);
|
|
96
|
+
background-color: var(--s-decorative-chilli-surface-subdued);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.file-chip--type-compressed .file-chip__icon {
|
|
100
|
+
color: var(--s-decorative-pumpkin-text);
|
|
101
|
+
background-color: var(--s-decorative-pumpkin-surface-subdued);
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.file-chip--type-document .file-chip__icon {
|
|
105
|
+
color: var(--s-decorative-blueberry-text);
|
|
106
|
+
background-color: var(--s-decorative-blueberry-surface-subdued);
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.file-chip--type-unknown .file-chip__icon {
|
|
110
|
+
color: var(--s-decorative-banana-text);
|
|
111
|
+
background-color: var(--s-decorative-banana-surface-subdued);
|
|
112
|
+
}
|
|
@@ -8,6 +8,16 @@ export class SwirlFileChip {
|
|
|
8
8
|
this.downloadButtonLabel = "Download";
|
|
9
9
|
this.previewButtonLabel = "Preview";
|
|
10
10
|
this.isHovered = false;
|
|
11
|
+
this.fileType = "unknown";
|
|
12
|
+
this.fileIconMap = {
|
|
13
|
+
image: h("swirl-icon-image", null),
|
|
14
|
+
video: h("swirl-icon-video-player", null),
|
|
15
|
+
audio: h("swirl-icon-audio-file", null),
|
|
16
|
+
pdf: h("swirl-icon-picture-as-pdf", null),
|
|
17
|
+
compressed: h("swirl-icon-folder", null),
|
|
18
|
+
document: h("swirl-icon-file", null),
|
|
19
|
+
unknown: h("swirl-icon-attachment", null),
|
|
20
|
+
};
|
|
11
21
|
this.handleDownloadClick = () => {
|
|
12
22
|
this.download.emit();
|
|
13
23
|
if (this.skipNativeDownload) {
|
|
@@ -24,40 +34,49 @@ export class SwirlFileChip {
|
|
|
24
34
|
this.preview.emit();
|
|
25
35
|
};
|
|
26
36
|
}
|
|
37
|
+
componentWillLoad() {
|
|
38
|
+
this.setFileType();
|
|
39
|
+
}
|
|
40
|
+
watchType() {
|
|
41
|
+
this.setFileType();
|
|
42
|
+
}
|
|
27
43
|
getFileIcon() {
|
|
28
44
|
if (this.loading) {
|
|
29
45
|
return h("swirl-spinner", { size: "s", label: this.loadingLabel });
|
|
30
46
|
}
|
|
47
|
+
return this.fileIconMap[this.fileType];
|
|
48
|
+
}
|
|
49
|
+
setFileType() {
|
|
31
50
|
if (isImageMimeType(this.type)) {
|
|
32
|
-
|
|
51
|
+
this.fileType = "image";
|
|
33
52
|
}
|
|
34
53
|
else if (isVideoMimeType(this.type)) {
|
|
35
|
-
|
|
54
|
+
this.fileType = "video";
|
|
36
55
|
}
|
|
37
56
|
else if (isAudioMimeType(this.type)) {
|
|
38
|
-
|
|
57
|
+
this.fileType = "audio";
|
|
39
58
|
}
|
|
40
59
|
else if (isPdfMimeType(this.type)) {
|
|
41
|
-
|
|
60
|
+
this.fileType = "pdf";
|
|
42
61
|
}
|
|
43
62
|
else if (isCompressedArchiveMimeType(this.type)) {
|
|
44
|
-
|
|
63
|
+
this.fileType = "compressed";
|
|
45
64
|
}
|
|
46
65
|
else if (isDocumentMimeType(this.type)) {
|
|
47
|
-
|
|
66
|
+
this.fileType = "document";
|
|
48
67
|
}
|
|
49
68
|
else {
|
|
50
|
-
|
|
69
|
+
this.fileType = "unknown";
|
|
51
70
|
}
|
|
52
71
|
}
|
|
53
72
|
render() {
|
|
54
73
|
const actionCount = +this.showPreviewButton + +this.showDownloadButton;
|
|
55
|
-
const className = classnames("file-chip", {
|
|
74
|
+
const className = classnames("file-chip", `file-chip--type-${this.fileType}`, {
|
|
56
75
|
"file-chip--loading": this.loading,
|
|
57
76
|
"file-chip--one-action": actionCount === 1,
|
|
58
77
|
"file-chip--two-actions": actionCount === 2,
|
|
59
78
|
});
|
|
60
|
-
return (h(Host, { key: '
|
|
79
|
+
return (h(Host, { key: 'bad5b12da5f316338ad188b90cec107a9bd31e1a' }, h("span", { key: 'ca2761999829fc848f7b22ffbbc49d8fb5d50bcb', role: "group", class: className }, h("span", { key: '91f42a95a89294dcd269994e152599af9b8c6fc9', class: "file-chip__icon" }, this.getFileIcon()), h("span", { key: 'ab18c9b4714e0a918c9cc7d46b1f49203b318af2', class: "file-chip__info" }, h("span", { key: 'f0b4850881e0e68ac81ecb515618ee905be36aa0', class: "file-chip__name", title: this.name }, this.name), this.description && (h("span", { key: 'a445b2fc6a1bacac3e219e6870a1fe9b07ab5ab4', class: "file-chip__description" }, this.description))), h("swirl-button-group", { key: '37b77ae3c8ba34015189da4e0c935d6f85dc52bd', class: "file-chip__actions" }, this.showPreviewButton && (h("swirl-button", { key: 'a9ee556a3fa270fd0f8b983bb63f63fa8f2f46bf', variant: "flat", icon: "<swirl-icon-preview></swirl-icon-preview>", onClick: this.handlePreviewClick, label: this.previewButtonLabel, hideLabel: true, part: "file-chip__preview" })), this.showDownloadButton && (h("swirl-button", { key: '3158fd84ba35efd77d3dcc4f50a429af1ef41dbf', variant: "flat", icon: "<swirl-icon-download></swirl-icon-download>", onClick: this.handleDownloadClick, label: this.downloadButtonLabel, hideLabel: true, part: "file-chip__download" }))))));
|
|
61
80
|
}
|
|
62
81
|
static get is() { return "swirl-file-chip"; }
|
|
63
82
|
static get encapsulation() { return "shadow"; }
|
|
@@ -289,7 +308,8 @@ export class SwirlFileChip {
|
|
|
289
308
|
}
|
|
290
309
|
static get states() {
|
|
291
310
|
return {
|
|
292
|
-
"isHovered": {}
|
|
311
|
+
"isHovered": {},
|
|
312
|
+
"fileType": {}
|
|
293
313
|
};
|
|
294
314
|
}
|
|
295
315
|
static get events() {
|
|
@@ -325,4 +345,10 @@ export class SwirlFileChip {
|
|
|
325
345
|
}
|
|
326
346
|
}];
|
|
327
347
|
}
|
|
348
|
+
static get watchers() {
|
|
349
|
+
return [{
|
|
350
|
+
"propName": "type",
|
|
351
|
+
"methodName": "watchType"
|
|
352
|
+
}];
|
|
353
|
+
}
|
|
328
354
|
}
|
|
@@ -36,12 +36,12 @@
|
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
.tag--variant-strong {
|
|
39
|
-
color: var(--s-text-on-
|
|
39
|
+
color: var(--s-text-on-status);
|
|
40
40
|
background-color: var(--s-surface-neutral-default);
|
|
41
41
|
}
|
|
42
42
|
|
|
43
43
|
.tag--variant-strong .tag__removal-button {
|
|
44
|
-
color: var(--s-icon-on-
|
|
44
|
+
color: var(--s-icon-on-status);
|
|
45
45
|
}
|
|
46
46
|
|
|
47
47
|
.tag--intent-info {
|
|
@@ -58,12 +58,12 @@
|
|
|
58
58
|
}
|
|
59
59
|
|
|
60
60
|
.tag--intent-info.tag--variant-strong {
|
|
61
|
-
color: var(--s-text-on-
|
|
61
|
+
color: var(--s-text-on-status);
|
|
62
62
|
background-color: var(--s-surface-info-default);
|
|
63
63
|
}
|
|
64
64
|
|
|
65
65
|
.tag--intent-info.tag--variant-strong .tag__removal-button {
|
|
66
|
-
color: var(--s-icon-on-
|
|
66
|
+
color: var(--s-icon-on-status);
|
|
67
67
|
}
|
|
68
68
|
|
|
69
69
|
.tag--intent-critical {
|
|
@@ -80,12 +80,12 @@
|
|
|
80
80
|
}
|
|
81
81
|
|
|
82
82
|
.tag--intent-critical.tag--variant-strong {
|
|
83
|
-
color: var(--s-text-on-
|
|
83
|
+
color: var(--s-text-on-status);
|
|
84
84
|
background-color: var(--s-surface-critical-default);
|
|
85
85
|
}
|
|
86
86
|
|
|
87
87
|
.tag--intent-critical.tag--variant-strong .tag__removal-button {
|
|
88
|
-
color: var(--s-icon-on-
|
|
88
|
+
color: var(--s-icon-on-status);
|
|
89
89
|
}
|
|
90
90
|
|
|
91
91
|
.tag--intent-warning {
|
|
@@ -124,12 +124,12 @@
|
|
|
124
124
|
}
|
|
125
125
|
|
|
126
126
|
.tag--intent-success.tag--variant-strong {
|
|
127
|
-
color: var(--s-text-on-
|
|
127
|
+
color: var(--s-text-on-status);
|
|
128
128
|
background-color: var(--s-surface-success-default);
|
|
129
129
|
}
|
|
130
130
|
|
|
131
131
|
.tag--intent-success.tag--variant-strong .tag__removal-button {
|
|
132
|
-
color: var(--s-icon-on-
|
|
132
|
+
color: var(--s-icon-on-status);
|
|
133
133
|
}
|
|
134
134
|
|
|
135
135
|
.tag--intent-special {
|
|
@@ -146,12 +146,12 @@
|
|
|
146
146
|
}
|
|
147
147
|
|
|
148
148
|
.tag--intent-special.tag--variant-strong {
|
|
149
|
-
color: var(--s-text-on-
|
|
149
|
+
color: var(--s-text-on-status);
|
|
150
150
|
background-color: var(--s-decorative-grape-surface);
|
|
151
151
|
}
|
|
152
152
|
|
|
153
153
|
.tag--intent-special.tag--variant-strong .tag__removal-button {
|
|
154
|
-
color: var(--s-icon-on-
|
|
154
|
+
color: var(--s-icon-on-status);
|
|
155
155
|
}
|
|
156
156
|
|
|
157
157
|
.tag--intent-translucent {
|