@getflip/swirl-components 0.487.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 +66 -4
- 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/cjs/swirl-progress-indicator.cjs.entry.js +8 -4
- 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/collection/components/swirl-progress-indicator/swirl-progress-indicator.css +10 -4
- package/dist/collection/components/swirl-progress-indicator/swirl-progress-indicator.js +8 -4
- package/dist/components/swirl-file-chip.js +1 -1
- package/dist/components/swirl-progress-indicator2.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/esm/swirl-progress-indicator.entry.js +8 -4
- package/dist/swirl-components/p-29a012de.entry.js +1 -0
- 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/swirl-progress-indicator/swirl-progress-indicator.d.ts +1 -1
- package/dist/types/components.d.ts +12 -0
- package/package.json +1 -1
- package/vscode-data.json +11 -0
- package/dist/swirl-components/p-2d73cfee.entry.js +0 -1
- package/dist/swirl-components/p-3e997f70.entry.js +0 -1
|
@@ -3,7 +3,7 @@ import { c as classnames } from './index-orsBiyT_.js';
|
|
|
3
3
|
import { F as FileSaver_minExports } from './FileSaver.min-DISpcNDq.js';
|
|
4
4
|
import { a as isSupportedImageMimeType, b as isVideoMimeType, c as isAudioMimeType, e as isPdfMimeType, f as isCompressedArchiveMimeType, h as isDocumentMimeType } from './utils-CCck-DTo.js';
|
|
5
5
|
|
|
6
|
-
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}`;
|
|
6
|
+
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)}`;
|
|
7
7
|
|
|
8
8
|
const SwirlFileChip = class {
|
|
9
9
|
constructor(hostRef) {
|
|
@@ -13,6 +13,7 @@ const SwirlFileChip = class {
|
|
|
13
13
|
this.preview = createEvent(this, "preview", 7);
|
|
14
14
|
this.deleteButtonLabel = "Delete";
|
|
15
15
|
this.downloadButtonLabel = "Download";
|
|
16
|
+
this.errorLabel = "Error";
|
|
16
17
|
this.loadingLabel = "Loading …";
|
|
17
18
|
this.previewButtonLabel = "Preview";
|
|
18
19
|
this.fileType = "unknown";
|
|
@@ -66,6 +67,9 @@ const SwirlFileChip = class {
|
|
|
66
67
|
this.setFileType();
|
|
67
68
|
}
|
|
68
69
|
getFileIcon() {
|
|
70
|
+
if (this.hasError) {
|
|
71
|
+
return h("swirl-icon-error", { color: "critical", size: 20 });
|
|
72
|
+
}
|
|
69
73
|
if (this.loading) {
|
|
70
74
|
return h("swirl-spinner", { size: "s", label: this.loadingLabel });
|
|
71
75
|
}
|
|
@@ -102,16 +106,21 @@ const SwirlFileChip = class {
|
|
|
102
106
|
!this.showPreviewButton &&
|
|
103
107
|
!this.showDownloadButton &&
|
|
104
108
|
!this.showDeleteButton;
|
|
105
|
-
const hasDescription = this.description || this.loading;
|
|
109
|
+
const hasDescription = this.description || this.loading || this.hasError;
|
|
106
110
|
const className = classnames("file-chip", `file-chip--type-${this.fileType}`, {
|
|
107
111
|
"file-chip--loading": this.loading,
|
|
112
|
+
"file-chip--has-error": this.hasError,
|
|
108
113
|
"file-chip--has-description": hasDescription,
|
|
109
114
|
"file-chip--has-download-action": this.showDownloadButton,
|
|
110
115
|
"file-chip--has-preview-action": this.showPreviewButton,
|
|
111
116
|
"file-chip--no-actions": !hasAction,
|
|
112
117
|
"file-chip--no-suffix": noSuffix,
|
|
113
118
|
});
|
|
114
|
-
return (h(Host, { key: '
|
|
119
|
+
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
|
|
120
|
+
? this.errorLabel
|
|
121
|
+
: this.loading
|
|
122
|
+
? this.loadingLabel
|
|
123
|
+
: 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" })))))))));
|
|
115
124
|
}
|
|
116
125
|
static get watchers() { return {
|
|
117
126
|
"type": [{
|
|
@@ -1,8 +1,13 @@
|
|
|
1
1
|
import { r as registerInstance, h, a as Host } from './index-N0O_JBVJ.js';
|
|
2
2
|
import { c as classnames } from './index-orsBiyT_.js';
|
|
3
3
|
|
|
4
|
-
const swirlProgressIndicatorCss = () => `:host{display:block;width:100%}:host *{box-sizing:border-box}:host(.circle){display:inline-flex;width:auto}.progress-indicator--variant-bar{display:block;width:100%;height:0.25rem;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.progress-indicator--variant-bar::-webkit-progress-bar{border-radius:0.125rem;background-color:var(--s-surface-sunken-pressed)}.progress-indicator--variant-bar::-webkit-progress-value{border-radius:0.125rem;background-color:var(--s-border-highlight);-webkit-transition:width 0.25s;transition:width 0.25s}.progress-indicator--variant-bar::-moz-progress-bar{height:0.25rem;border-radius:0.125rem;background-color:var(--s-border-highlight);-moz-transition:width 0.25s;transition:width 0.25s}@media (prefers-reduced-motion){.progress-indicator--variant-bar::-moz-progress-bar{-moz-transition:none;transition:none}}.progress-indicator--variant-bar.progress-indicator--size-s{height:0.125rem}.progress-indicator--variant-bar.progress-indicator--size-s::-webkit-progress-bar{border-radius:0.0625rem}.progress-indicator--variant-bar.progress-indicator--size-s::-webkit-progress-value{border-radius:0.0625rem}.progress-indicator--variant-bar.progress-indicator--size-s::-moz-progress-bar{height:0.125rem;border-radius:0.0625rem}.progress-indicator--variant-circle{position:relative;display:inline-flex;overflow:hidden;width:3rem;height:3rem}.progress-indicator--variant-circle.progress-indicator--size-s{width:1.5rem;height:1.5rem}.progress-indicator__circle{position:absolute;width:100%;height:100%;transform:rotate(-90deg);inset:0}.progress-indicator__circle-background{stroke:var(--s-surface-sunken-pressed);stroke-linecap:round}.progress-indicator__circle-value{transition:stroke-dashoffset 0.25s;stroke:var(--s-interactive-primary-default);stroke-linecap:round}@media (prefers-reduced-motion){.progress-indicator__circle-value{transition:none}}`;
|
|
4
|
+
const swirlProgressIndicatorCss = () => `:host{display:block;width:100%}:host *{box-sizing:border-box}:host(.circle){display:inline-flex;width:auto}.progress-indicator--variant-bar{display:block;width:100%;height:0.25rem;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.progress-indicator--variant-bar::-webkit-progress-bar{border-radius:0.125rem;background-color:var(--s-surface-sunken-pressed)}.progress-indicator--variant-bar::-webkit-progress-value{border-radius:0.125rem;background-color:var(--s-border-highlight);-webkit-transition:width 0.25s;transition:width 0.25s}.progress-indicator--variant-bar::-moz-progress-bar{height:0.25rem;border-radius:0.125rem;background-color:var(--s-border-highlight);-moz-transition:width 0.25s;transition:width 0.25s}@media (prefers-reduced-motion){.progress-indicator--variant-bar::-moz-progress-bar{-moz-transition:none;transition:none}}.progress-indicator--variant-bar.progress-indicator--size-xs,.progress-indicator--variant-bar.progress-indicator--size-s{height:0.125rem}.progress-indicator--variant-bar.progress-indicator--size-xs::-webkit-progress-bar,.progress-indicator--variant-bar.progress-indicator--size-s::-webkit-progress-bar{border-radius:0.0625rem}.progress-indicator--variant-bar.progress-indicator--size-xs::-webkit-progress-value,.progress-indicator--variant-bar.progress-indicator--size-s::-webkit-progress-value{border-radius:0.0625rem}.progress-indicator--variant-bar.progress-indicator--size-xs::-moz-progress-bar,.progress-indicator--variant-bar.progress-indicator--size-s::-moz-progress-bar{height:0.125rem;border-radius:0.0625rem}.progress-indicator--variant-circle{position:relative;display:inline-flex;overflow:hidden;width:3rem;height:3rem}.progress-indicator--variant-circle.progress-indicator--size-xs{width:1.25rem;height:1.25rem}.progress-indicator--variant-circle.progress-indicator--size-s{width:1.5rem;height:1.5rem}.progress-indicator__circle{position:absolute;width:100%;height:100%;transform:rotate(-90deg);inset:0}.progress-indicator__circle-background{stroke:var(--s-surface-sunken-pressed);stroke-linecap:round}.progress-indicator__circle-value{transition:stroke-dashoffset 0.25s;stroke:var(--s-interactive-primary-default);stroke-linecap:round}@media (prefers-reduced-motion){.progress-indicator__circle-value{transition:none}}`;
|
|
5
5
|
|
|
6
|
+
const circleSizeConfig = {
|
|
7
|
+
xs: { radius: 8, strokeWidth: 2 },
|
|
8
|
+
s: { radius: 10, strokeWidth: 2 },
|
|
9
|
+
m: { radius: 20, strokeWidth: 4 },
|
|
10
|
+
};
|
|
6
11
|
const SwirlProgressIndicator = class {
|
|
7
12
|
constructor(hostRef) {
|
|
8
13
|
registerInstance(this, hostRef);
|
|
@@ -12,11 +17,10 @@ const SwirlProgressIndicator = class {
|
|
|
12
17
|
}
|
|
13
18
|
render() {
|
|
14
19
|
const className = classnames("progress-indicator", `progress-indicator--size-${this.size}`, `progress-indicator--variant-${this.variant}`);
|
|
15
|
-
const strokeWidth = this.size
|
|
16
|
-
const radius = this.size === "m" ? 20 : 10;
|
|
20
|
+
const { radius, strokeWidth } = circleSizeConfig[this.size];
|
|
17
21
|
const circumference = Math.round(radius * 2 * Math.PI);
|
|
18
22
|
const dashOffset = Math.round(circumference * ((100 - this.value) / 100));
|
|
19
|
-
return (h(Host, { key: '
|
|
23
|
+
return (h(Host, { key: 'b3966ffacbbf84e0e39f1d2831bb0210e2a2c69b', class: this.variant }, this.variant === "bar" && (h("progress", { key: 'c6270e22a26078deae4d69b77d8cf05bf4ad80bd', "aria-label": this.label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": this.value, class: className, max: 100, value: this.value })), this.variant === "circle" && (h("span", { key: '551279b3aa31161691811cfc0ca7730abee281fe', role: "progressbar", "aria-label": this.label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": this.value, class: className }, h("svg", { key: 'de6416fe984c8c95fe8eaf51d743f1ddbfb5378f', class: "progress-indicator__circle", focusable: "false", viewBox: `0 0 ${(radius + strokeWidth) * 2} ${(radius + strokeWidth) * 2}` }, h("circle", { key: '296bf634184734621255dba0569d4d15c81e9049', class: "progress-indicator__circle-background", cx: radius + strokeWidth, cy: radius + strokeWidth, r: radius, fill: "none", "stroke-width": strokeWidth }), h("circle", { key: '177c36b6061a1b92c75930771fe285aecaa11acb', class: "progress-indicator__circle-value", cx: radius + strokeWidth, cy: radius + strokeWidth, r: radius, fill: "none", "stroke-width": strokeWidth, "stroke-dasharray": circumference, "stroke-dashoffset": dashOffset }))))));
|
|
20
24
|
}
|
|
21
25
|
};
|
|
22
26
|
SwirlProgressIndicator.style = swirlProgressIndicatorCss();
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r,h as i,a as s}from"./p-N0O_JBVJ.js";import{c as e}from"./p-orsBiyT_.js";const a={xs:{radius:8,strokeWidth:2},s:{radius:10,strokeWidth:2},m:{radius:20,strokeWidth:4}},o=class{constructor(i){r(this,i),this.size="m",this.value=0,this.variant="bar"}render(){const r=e("progress-indicator",`progress-indicator--size-${this.size}`,`progress-indicator--variant-${this.variant}`),{radius:o,strokeWidth:t}=a[this.size],n=Math.round(2*o*Math.PI),c=Math.round(n*((100-this.value)/100));return i(s,{key:"b3966ffacbbf84e0e39f1d2831bb0210e2a2c69b",class:this.variant},"bar"===this.variant&&i("progress",{key:"c6270e22a26078deae4d69b77d8cf05bf4ad80bd","aria-label":this.label,"aria-valuemax":100,"aria-valuemin":0,"aria-valuenow":this.value,class:r,max:100,value:this.value}),"circle"===this.variant&&i("span",{key:"551279b3aa31161691811cfc0ca7730abee281fe",role:"progressbar","aria-label":this.label,"aria-valuemax":100,"aria-valuemin":0,"aria-valuenow":this.value,class:r},i("svg",{key:"de6416fe984c8c95fe8eaf51d743f1ddbfb5378f",class:"progress-indicator__circle",focusable:"false",viewBox:`0 0 ${2*(o+t)} ${2*(o+t)}`},i("circle",{key:"296bf634184734621255dba0569d4d15c81e9049",class:"progress-indicator__circle-background",cx:o+t,cy:o+t,r:o,fill:"none","stroke-width":t}),i("circle",{key:"177c36b6061a1b92c75930771fe285aecaa11acb",class:"progress-indicator__circle-value",cx:o+t,cy:o+t,r:o,fill:"none","stroke-width":t,"stroke-dasharray":n,"stroke-dashoffset":c}))))}};o.style=":host{display:block;width:100%}:host *{box-sizing:border-box}:host(.circle){display:inline-flex;width:auto}.progress-indicator--variant-bar{display:block;width:100%;height:0.25rem;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.progress-indicator--variant-bar::-webkit-progress-bar{border-radius:0.125rem;background-color:var(--s-surface-sunken-pressed)}.progress-indicator--variant-bar::-webkit-progress-value{border-radius:0.125rem;background-color:var(--s-border-highlight);-webkit-transition:width 0.25s;transition:width 0.25s}.progress-indicator--variant-bar::-moz-progress-bar{height:0.25rem;border-radius:0.125rem;background-color:var(--s-border-highlight);-moz-transition:width 0.25s;transition:width 0.25s}@media (prefers-reduced-motion){.progress-indicator--variant-bar::-moz-progress-bar{-moz-transition:none;transition:none}}.progress-indicator--variant-bar.progress-indicator--size-xs,.progress-indicator--variant-bar.progress-indicator--size-s{height:0.125rem}.progress-indicator--variant-bar.progress-indicator--size-xs::-webkit-progress-bar,.progress-indicator--variant-bar.progress-indicator--size-s::-webkit-progress-bar{border-radius:0.0625rem}.progress-indicator--variant-bar.progress-indicator--size-xs::-webkit-progress-value,.progress-indicator--variant-bar.progress-indicator--size-s::-webkit-progress-value{border-radius:0.0625rem}.progress-indicator--variant-bar.progress-indicator--size-xs::-moz-progress-bar,.progress-indicator--variant-bar.progress-indicator--size-s::-moz-progress-bar{height:0.125rem;border-radius:0.0625rem}.progress-indicator--variant-circle{position:relative;display:inline-flex;overflow:hidden;width:3rem;height:3rem}.progress-indicator--variant-circle.progress-indicator--size-xs{width:1.25rem;height:1.25rem}.progress-indicator--variant-circle.progress-indicator--size-s{width:1.5rem;height:1.5rem}.progress-indicator__circle{position:absolute;width:100%;height:100%;transform:rotate(-90deg);inset:0}.progress-indicator__circle-background{stroke:var(--s-surface-sunken-pressed);stroke-linecap:round}.progress-indicator__circle-value{transition:stroke-dashoffset 0.25s;stroke:var(--s-interactive-primary-default);stroke-linecap:round}@media (prefers-reduced-motion){.progress-indicator__circle-value{transition:none}}";export{o as swirl_progress_indicator}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
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 r,c as n,e as l,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.errorLabel="Error",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.hasError?s("swirl-icon-error",{color:"critical",size:20}):this.loading?s("swirl-spinner",{size:"s",label:this.loadingLabel}):this.fileIconMap[this.fileType]}setFileType(){this.fileType=a(this.type)?"image":r(this.type)?"video":n(this.type)?"audio":l(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-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 s(o,{key:"7ffd07e38c155e7f70258088b5c3f593fb957d04"},s("span",{key:"f4ca6b7e58890d0dc1a9006c8c28eda86e64dbfd","aria-label":this.name,class:e,onClick:this.handleClick,role:"group"},s("span",{key:"dda7f1612e92a45f54aac0ae5fb19a49113e84fa",class:"file-chip__icon"},this.getFileIcon()),s("span",{key:"7f016dbb7414ab330afa6053b640aa1843ceb2cc",class:"file-chip__info"},s("span",{key:"3aecd4189d19e31474fba1214658007cd45a5d99",class:"file-chip__name",title:this.name},this.name),s("span",{key:"bd1aeff1a43fda9bb5f17d99141fff90c843ae03",class:"file-chip__suffix"},(this.description||this.loading||this.hasError)&&s("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&&s("span",{key:"fb4e7efb492cb7e0a405d8cfcb6e806240619f59",class:"file-chip__actions"},this.showPreviewButton&&s("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&&s("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&&s("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}]}}};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}.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)}";export{f as swirl_file_chip}
|