@yuuvis/client-framework 3.0.0-beta.20.0 → 3.0.0-beta.21.0

package/fesm2022/yuuvis-client-framework-upload-progress.mjs

@@ -14,7 +14,7 @@ class UploadProgressOverlayComponent {
     constructor() {
         this.#uploadService = inject(UploadService);
         this.translate = inject(TranslateService);
-        this.items = input(...(ngDevMode ? [undefined, { debugName: "items" }] : []));
+        this.items = input(...(ngDevMode ? [undefined, { debugName: "items" }] : /* istanbul ignore next */ []));
         this._items = computed(() => {
             const items = this.items() || [];
             items.forEach((item) => {
@@ -23,7 +23,7 @@ class UploadProgressOverlayComponent {
                 }
             });
             return items;
-        }, ...(ngDevMode ? [{ debugName: "_items" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "_items" }] : /* istanbul ignore next */ []));
         this.itemClick = output();
     }
     #uploadService;
@@ -38,12 +38,12 @@ class UploadProgressOverlayComponent {
                 return this.translate.instant('yuv.upload-progress-overlay.error.default');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: UploadProgressOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: UploadProgressOverlayComponent, isStandalone: true, selector: "yuv-upload-progress-overlay", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "<ul>\n  @for (item of _items(); track item.id) {\n    @let progress = item.progress | async;\n    <li [ngClass]=\"{ err: !!item.err, done: !!item.result }\" [style.--progress]=\"progress + '%'\">\n      <button mat-icon-button class=\"remove\" (click)=\"remove(item.id)\">\n        <mat-icon [ngClass]=\"{ err: !!item.err }\">close</mat-icon>\n      </button>\n\n      @if (!item.result) {\n        <div class=\"name\">{{ item.filename }}\n          @if(item.err) {\n            <span class=\"error\">{{item.err.message}}</span>\n          }\n        </div>\n        <div class=\"progress\">\n          @if (progress && progress < 100) {\n            <div class=\"percentage\">{{ progress }}</div>\n          }\n          @else if(item.err) {\n              <mat-icon class=\"error\">warning</mat-icon>\n          }\n          @else {\n            <mat-progress-spinner mode=\"indeterminate\" class=\"ymt-progress-spinner--tiny\"></mat-progress-spinner>\n          }\n        </div>\n      } @else {\n        <div class=\"result-items\">\n          @for (res of item.result; track $index) {\n            <div class=\"result-item\">\n              <div class=\"name\" (click)=\"itemClick.emit(res)\">\n                {{ res.label }}\n              </div>\n            </div>\n          }\n        </div>\n        <mat-icon class=\"done\">check</mat-icon>\n      }\n    </li>\n  }\n</ul>\n", styles: [":host ul{list-style:none;padding:0;margin:var(--ymt-spacing-xs) 0}:host li{--hover-background: transparent;display:grid;grid-template-columns:1fr auto auto;grid-template-rows:auto;cursor:default;grid-template-areas:\"result progress action\";align-items:center;padding:var(--ymt-spacing-2xs) var(--ymt-spacing-2xs) var(--ymt-spacing-2xs) var(--ymt-spacing-xs);gap:.5em;margin-block-end:1px;background:linear-gradient(90deg,rgb(from var(--ymt-primary) r g b/.1) 0%,rgb(from var(--ymt-primary) r g b/.3) var(--progress),var(--hover-background) var(--progress));transition:background-color .3s ease-in-out}:host li.done{background:var(--hover-background)}:host li:hover{--hover-background: var(--ymt-hover-background)}:host li .name{grid-area:result;max-width:35ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host li .name .error{color:var(--ymt-text-color-subtle);display:block;font-style:italic;max-width:35ch}:host li .progress{grid-area:progress}:host li .percentage{font-family:monospace;padding:var(--ymt-spacing-2xs) var(--ymt-spacing-m);font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle);align-self:center}:host li .percentage:after{content:\"%\"}:host li mat-icon.done{--icon-size: 18px;fill:var(--ymt-primary)}:host li .remove{grid-area:action}:host li .remove mat-icon{color:var(--ymt-text-color-subtle)}:host .result-items{grid-area:result}:host .result-items .result-item{cursor:pointer}:host mat-icon{--icon-size: 18px;border-radius:4px}:host mat-icon.done{background-color:var(--ymt-primary);color:var(--ymt-on-primary)}:host mat-icon.error{color:var(--ymt-danger)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: UploadProgressOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: UploadProgressOverlayComponent, isStandalone: true, selector: "yuv-upload-progress-overlay", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "<ul>\n  @for (item of _items(); track item.id) {\n    @let progress = item.progress | async;\n    <li [ngClass]=\"{ err: !!item.err, done: !!item.result }\" [style.--progress]=\"progress + '%'\">\n      <button mat-icon-button class=\"remove\" (click)=\"remove(item.id)\">\n        <mat-icon [ngClass]=\"{ err: !!item.err }\">close</mat-icon>\n      </button>\n\n      @if (!item.result) {\n        <div class=\"name\">{{ item.filename }}\n          @if(item.err) {\n            <span class=\"error\">{{item.err.message}}</span>\n          }\n        </div>\n        <div class=\"progress\">\n          @if (progress && progress < 100) {\n            <div class=\"percentage\">{{ progress }}</div>\n          }\n          @else if(item.err) {\n              <mat-icon class=\"error\">warning</mat-icon>\n          }\n          @else {\n            <mat-progress-spinner mode=\"indeterminate\" class=\"ymt-progress-spinner--tiny\"></mat-progress-spinner>\n          }\n        </div>\n      } @else {\n        <div class=\"result-items\">\n          @for (res of item.result; track $index) {\n            <div class=\"result-item\">\n              <div class=\"name\" (click)=\"itemClick.emit(res)\">\n                {{ res.label }}\n              </div>\n            </div>\n          }\n        </div>\n        <mat-icon class=\"done\">check</mat-icon>\n      }\n    </li>\n  }\n</ul>\n", styles: [":host ul{list-style:none;padding:0;margin:var(--ymt-spacing-xs) 0}:host li{--hover-background: transparent;display:grid;grid-template-columns:1fr auto auto;grid-template-rows:auto;cursor:default;grid-template-areas:\"result progress action\";align-items:center;padding:var(--ymt-spacing-2xs) var(--ymt-spacing-2xs) var(--ymt-spacing-2xs) var(--ymt-spacing-xs);gap:.5em;margin-block-end:1px;background:linear-gradient(90deg,rgb(from var(--ymt-primary) r g b/.1) 0%,rgb(from var(--ymt-primary) r g b/.3) var(--progress),var(--hover-background) var(--progress));transition:background-color .3s ease-in-out}:host li.done{background:var(--hover-background)}:host li:hover{--hover-background: var(--ymt-hover-background)}:host li .name{grid-area:result;max-width:35ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host li .name .error{color:var(--ymt-text-color-subtle);display:block;font-style:italic;max-width:35ch}:host li .progress{grid-area:progress}:host li .percentage{font-family:monospace;padding:var(--ymt-spacing-2xs) var(--ymt-spacing-m);font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle);align-self:center}:host li .percentage:after{content:\"%\"}:host li mat-icon.done{--icon-size: 18px;fill:var(--ymt-primary)}:host li .remove{grid-area:action}:host li .remove mat-icon{color:var(--ymt-text-color-subtle)}:host .result-items{grid-area:result}:host .result-items .result-item{cursor:pointer}:host mat-icon{--icon-size: 18px;border-radius:4px}:host mat-icon.done{background-color:var(--ymt-primary);color:var(--ymt-on-primary)}:host mat-icon.error{color:var(--ymt-danger)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: UploadProgressOverlayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: UploadProgressOverlayComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-upload-progress-overlay', standalone: true, imports: [CommonModule, MatButtonModule, MatIconModule, TranslatePipe, MatProgressSpinner], template: "<ul>\n  @for (item of _items(); track item.id) {\n    @let progress = item.progress | async;\n    <li [ngClass]=\"{ err: !!item.err, done: !!item.result }\" [style.--progress]=\"progress + '%'\">\n      <button mat-icon-button class=\"remove\" (click)=\"remove(item.id)\">\n        <mat-icon [ngClass]=\"{ err: !!item.err }\">close</mat-icon>\n      </button>\n\n      @if (!item.result) {\n        <div class=\"name\">{{ item.filename }}\n          @if(item.err) {\n            <span class=\"error\">{{item.err.message}}</span>\n          }\n        </div>\n        <div class=\"progress\">\n          @if (progress && progress < 100) {\n            <div class=\"percentage\">{{ progress }}</div>\n          }\n          @else if(item.err) {\n              <mat-icon class=\"error\">warning</mat-icon>\n          }\n          @else {\n            <mat-progress-spinner mode=\"indeterminate\" class=\"ymt-progress-spinner--tiny\"></mat-progress-spinner>\n          }\n        </div>\n      } @else {\n        <div class=\"result-items\">\n          @for (res of item.result; track $index) {\n            <div class=\"result-item\">\n              <div class=\"name\" (click)=\"itemClick.emit(res)\">\n                {{ res.label }}\n              </div>\n            </div>\n          }\n        </div>\n        <mat-icon class=\"done\">check</mat-icon>\n      }\n    </li>\n  }\n</ul>\n", styles: [":host ul{list-style:none;padding:0;margin:var(--ymt-spacing-xs) 0}:host li{--hover-background: transparent;display:grid;grid-template-columns:1fr auto auto;grid-template-rows:auto;cursor:default;grid-template-areas:\"result progress action\";align-items:center;padding:var(--ymt-spacing-2xs) var(--ymt-spacing-2xs) var(--ymt-spacing-2xs) var(--ymt-spacing-xs);gap:.5em;margin-block-end:1px;background:linear-gradient(90deg,rgb(from var(--ymt-primary) r g b/.1) 0%,rgb(from var(--ymt-primary) r g b/.3) var(--progress),var(--hover-background) var(--progress));transition:background-color .3s ease-in-out}:host li.done{background:var(--hover-background)}:host li:hover{--hover-background: var(--ymt-hover-background)}:host li .name{grid-area:result;max-width:35ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host li .name .error{color:var(--ymt-text-color-subtle);display:block;font-style:italic;max-width:35ch}:host li .progress{grid-area:progress}:host li .percentage{font-family:monospace;padding:var(--ymt-spacing-2xs) var(--ymt-spacing-m);font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle);align-self:center}:host li .percentage:after{content:\"%\"}:host li mat-icon.done{--icon-size: 18px;fill:var(--ymt-primary)}:host li .remove{grid-area:action}:host li .remove mat-icon{color:var(--ymt-text-color-subtle)}:host .result-items{grid-area:result}:host .result-items .result-item{cursor:pointer}:host mat-icon{--icon-size: 18px;border-radius:4px}:host mat-icon.done{background-color:var(--ymt-primary);color:var(--ymt-on-primary)}:host mat-icon.error{color:var(--ymt-danger)}\n"] }]
+            args: [{ selector: 'yuv-upload-progress-overlay', standalone: true, imports: [CommonModule, MatButtonModule, MatIconModule, MatProgressSpinner], template: "<ul>\n  @for (item of _items(); track item.id) {\n    @let progress = item.progress | async;\n    <li [ngClass]=\"{ err: !!item.err, done: !!item.result }\" [style.--progress]=\"progress + '%'\">\n      <button mat-icon-button class=\"remove\" (click)=\"remove(item.id)\">\n        <mat-icon [ngClass]=\"{ err: !!item.err }\">close</mat-icon>\n      </button>\n\n      @if (!item.result) {\n        <div class=\"name\">{{ item.filename }}\n          @if(item.err) {\n            <span class=\"error\">{{item.err.message}}</span>\n          }\n        </div>\n        <div class=\"progress\">\n          @if (progress && progress < 100) {\n            <div class=\"percentage\">{{ progress }}</div>\n          }\n          @else if(item.err) {\n              <mat-icon class=\"error\">warning</mat-icon>\n          }\n          @else {\n            <mat-progress-spinner mode=\"indeterminate\" class=\"ymt-progress-spinner--tiny\"></mat-progress-spinner>\n          }\n        </div>\n      } @else {\n        <div class=\"result-items\">\n          @for (res of item.result; track $index) {\n            <div class=\"result-item\">\n              <div class=\"name\" (click)=\"itemClick.emit(res)\">\n                {{ res.label }}\n              </div>\n            </div>\n          }\n        </div>\n        <mat-icon class=\"done\">check</mat-icon>\n      }\n    </li>\n  }\n</ul>\n", styles: [":host ul{list-style:none;padding:0;margin:var(--ymt-spacing-xs) 0}:host li{--hover-background: transparent;display:grid;grid-template-columns:1fr auto auto;grid-template-rows:auto;cursor:default;grid-template-areas:\"result progress action\";align-items:center;padding:var(--ymt-spacing-2xs) var(--ymt-spacing-2xs) var(--ymt-spacing-2xs) var(--ymt-spacing-xs);gap:.5em;margin-block-end:1px;background:linear-gradient(90deg,rgb(from var(--ymt-primary) r g b/.1) 0%,rgb(from var(--ymt-primary) r g b/.3) var(--progress),var(--hover-background) var(--progress));transition:background-color .3s ease-in-out}:host li.done{background:var(--hover-background)}:host li:hover{--hover-background: var(--ymt-hover-background)}:host li .name{grid-area:result;max-width:35ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host li .name .error{color:var(--ymt-text-color-subtle);display:block;font-style:italic;max-width:35ch}:host li .progress{grid-area:progress}:host li .percentage{font-family:monospace;padding:var(--ymt-spacing-2xs) var(--ymt-spacing-m);font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle);align-self:center}:host li .percentage:after{content:\"%\"}:host li mat-icon.done{--icon-size: 18px;fill:var(--ymt-primary)}:host li .remove{grid-area:action}:host li .remove mat-icon{color:var(--ymt-text-color-subtle)}:host .result-items{grid-area:result}:host .result-items .result-item{cursor:pointer}:host mat-icon{--icon-size: 18px;border-radius:4px}:host mat-icon.done{background-color:var(--ymt-primary);color:var(--ymt-on-primary)}:host mat-icon.error{color:var(--ymt-danger)}\n"] }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
 
 class UploadProgressComponent {
@@ -74,7 +74,7 @@ class UploadProgressComponent {
          * <yuv-upload-progress />
          * ```
          */
-        this.scopes = input(...(ngDevMode ? [undefined, { debugName: "scopes" }] : []));
+        this.scopes = input(...(ngDevMode ? [undefined, { debugName: "scopes" }] : /* istanbul ignore next */ []));
         //#endregion
         //#region Properties
         this.completedUp$ = this.#uploadService.uploadStatus$;
@@ -83,7 +83,7 @@ class UploadProgressComponent {
             const items = this.#status()?.items ?? [];
             const scopes = this.scopes();
             return scopes?.length ? items.filter((item) => item.scope && scopes.includes(item.scope)) : items;
-        }, ...(ngDevMode ? [{ debugName: "filteredItems" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "filteredItems" }] : /* istanbul ignore next */ []));
     }
     //#region Dependencies
     #uploadService;
@@ -93,10 +93,10 @@ class UploadProgressComponent {
     close() {
         this.filteredItems().forEach((item) => this.#uploadService.cancelItem(item.id));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: UploadProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: UploadProgressComponent, isStandalone: true, selector: "yuv-upload-progress", inputs: { scopes: { classPropertyName: "scopes", publicName: "scopes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { resultItemClick: "resultItemClick" }, host: { properties: { "class.expanded": "expanded" } }, ngImport: i0, template: "@let items = filteredItems();\n@if (items.length) {\n  @let completed = completedUp$ | async;\n\n  <div class=\"upload-progress\">\n    <header>\n      <h4>\n        @if (!completed) {\n          {{ 'yuv.upload-progress.header.uploading' | translate: { count: items.length } }}\n        } @else {\n          {{ 'yuv.upload-progress.header.uploaded' | translate: { count: items.length } }}\n        }\n      </h4>\n      <button mat-icon-button (click)=\"expanded = !expanded\">\n        <mat-icon class=\"toggle\">keyboard_arrow_down</mat-icon>\n      </button>\n      <button mat-icon-button (click)=\"close()\">\n        <mat-icon class=\"toggle\">clear</mat-icon>\n      </button>\n    </header>\n    @if (expanded) {\n      <yuv-upload-progress-overlay [items]=\"items\" (itemClick)=\"resultItemClick.emit($event)\" />\n    }\n  </div>\n}\n", styles: [":host{--upload-progress-background-header: var(--ymt-surface-panel);--upload-progress-background-main: var(--ymt-surface-panel);--upload-progress-border-color: var(--ymt-surface-panel);--upload-progress-outline: 4px solid rgb(from var(--ymt-outline-variant) r g b / .9);--upload-progress-border-radius: var(--ymt-spacing-2xs);position:absolute;inset-block-end:var(--ymt-spacing-m);inset-inline-end:var(--ymt-spacing-m);z-index:1000}:host .upload-progress{display:flex;flex-flow:column;background-color:var(--upload-progress-background-main);border:1px solid var(--upload-progress-border-color);border-radius:var(--upload-progress-border-radius);outline:var(--upload-progress-outline);min-width:250px;max-height:30vh;overflow:hidden;animation:appear .3s ease-in-out}:host .toggle{rotate:180deg}:host.expanded .toggle{rotate:0deg}:host header{display:flex;align-items:center;gap:var(--ymt-spacing-2xs);background-color:var(--upload-progress-background-header);padding:var(--ymt-spacing-2xs)}:host header h4{margin:0;padding:0 var(--ymt-spacing-xs);flex:1}:host yuv-upload-progress-overlay{overflow-y:auto}@keyframes appear{0%{opacity:0;transform:translateY(var(--ymt-spacing-m))}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: UploadProgressOverlayComponent, selector: "yuv-upload-progress-overlay", inputs: ["items"], outputs: ["itemClick"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: UploadProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: UploadProgressComponent, isStandalone: true, selector: "yuv-upload-progress", inputs: { scopes: { classPropertyName: "scopes", publicName: "scopes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { resultItemClick: "resultItemClick" }, host: { properties: { "class.expanded": "expanded" } }, ngImport: i0, template: "@let items = filteredItems();\n@if (items.length) {\n  @let completed = completedUp$ | async;\n\n  <div class=\"upload-progress\">\n    <header>\n      <h4>\n        @if (!completed) {\n          {{ 'yuv.upload-progress.header.uploading' | translate: { count: items.length } }}\n        } @else {\n          {{ 'yuv.upload-progress.header.uploaded' | translate: { count: items.length } }}\n        }\n      </h4>\n      <button mat-icon-button (click)=\"expanded = !expanded\">\n        <mat-icon class=\"toggle\">keyboard_arrow_down</mat-icon>\n      </button>\n      <button mat-icon-button (click)=\"close()\">\n        <mat-icon class=\"toggle\">clear</mat-icon>\n      </button>\n    </header>\n    @if (expanded) {\n      <yuv-upload-progress-overlay [items]=\"items\" (itemClick)=\"resultItemClick.emit($event)\" />\n    }\n  </div>\n}\n", styles: [":host{--upload-progress-background-header: var(--ymt-surface-panel);--upload-progress-background-main: var(--ymt-surface-panel);--upload-progress-border-color: var(--ymt-surface-panel);--upload-progress-outline: 4px solid rgb(from var(--ymt-outline-variant) r g b / .9);--upload-progress-border-radius: var(--ymt-spacing-2xs);position:absolute;inset-block-end:var(--ymt-spacing-m);inset-inline-end:var(--ymt-spacing-m);z-index:1000}:host .upload-progress{display:flex;flex-flow:column;background-color:var(--upload-progress-background-main);border:1px solid var(--upload-progress-border-color);border-radius:var(--upload-progress-border-radius);outline:var(--upload-progress-outline);min-width:250px;max-height:30vh;overflow:hidden;animation:appear .3s ease-in-out}:host .toggle{rotate:180deg}:host.expanded .toggle{rotate:0deg}:host header{display:flex;align-items:center;gap:var(--ymt-spacing-2xs);background-color:var(--upload-progress-background-header);padding:var(--ymt-spacing-2xs)}:host header h4{margin:0;padding:0 var(--ymt-spacing-xs);flex:1}:host yuv-upload-progress-overlay{overflow-y:auto}@keyframes appear{0%{opacity:0;transform:translateY(var(--ymt-spacing-m))}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: UploadProgressOverlayComponent, selector: "yuv-upload-progress-overlay", inputs: ["items"], outputs: ["itemClick"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: UploadProgressComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: UploadProgressComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuv-upload-progress', standalone: true, imports: [CommonModule, MatButtonModule, MatIconModule, TranslatePipe, UploadProgressOverlayComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.expanded]': 'expanded'
@@ -107,11 +107,11 @@ const cmp = [
     UploadProgressComponent
 ];
 class YuvUploadProgressModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: YuvUploadProgressModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: YuvUploadProgressModule, imports: [UploadProgressComponent], exports: [UploadProgressComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: YuvUploadProgressModule, imports: [cmp] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: YuvUploadProgressModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: YuvUploadProgressModule, imports: [UploadProgressComponent], exports: [UploadProgressComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: YuvUploadProgressModule, imports: [cmp] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: YuvUploadProgressModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: YuvUploadProgressModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [cmp],

package/fesm2022/yuuvis-client-framework-upload-progress.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"yuuvis-client-framework-upload-progress.mjs","sources":["../../../../../libs/yuuvis/client-framework/upload-progress/src/lib/upload-progress/upload-progress-overlay/upload-progress-overlay.component.ts","../../../../../libs/yuuvis/client-framework/upload-progress/src/lib/upload-progress/upload-progress-overlay/upload-progress-overlay.component.html","../../../../../libs/yuuvis/client-framework/upload-progress/src/lib/upload-progress/upload-progress.component.ts","../../../../../libs/yuuvis/client-framework/upload-progress/src/lib/upload-progress/upload-progress.component.html","../../../../../libs/yuuvis/client-framework/upload-progress/src/lib/upload-progress/upload-progress.module.ts","../../../../../libs/yuuvis/client-framework/upload-progress/src/yuuvis-client-framework-upload-progress.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { Component, computed, inject, input, output } from '@angular/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatProgressSpinner } from '@angular/material/progress-spinner';\nimport { ProgressStatusItem, TranslatePipe, TranslateService, UploadResult, UploadService } from '@yuuvis/client-core';\n\n@Component({\n  selector: 'yuv-upload-progress-overlay',\n  standalone: true,\n  imports: [CommonModule, MatButtonModule, MatIconModule, TranslatePipe, MatProgressSpinner],\n  templateUrl: './upload-progress-overlay.component.html',\n  styleUrl: './upload-progress-overlay.component.scss'\n})\nexport class UploadProgressOverlayComponent {\n  #uploadService = inject(UploadService);\n  translate = inject(TranslateService);\n\n  items = input<ProgressStatusItem[]>();\n  _items = computed(() => {\n    const items = this.items() || [];\n    items.forEach((item) => {\n      if (item.err) {\n        item.err.message = this.#getErrorMessage(item.err.code);\n      }\n    });\n    return items;\n  });\n  itemClick = output<UploadResult>();\n\n  remove(id?: string) {\n    this.#uploadService.cancelItem(id);\n  }\n\n  #getErrorMessage(status: number): string {\n    switch (status) {\n      case 403:\n        return this.translate.instant('yuv.upload-progress-overlay.error.403');\n      default:\n        return this.translate.instant('yuv.upload-progress-overlay.error.default');\n    }\n  }\n}\n","<ul>\n  @for (item of _items(); track item.id) {\n    @let progress = item.progress | async;\n    <li [ngClass]=\"{ err: !!item.err, done: !!item.result }\" [style.--progress]=\"progress + '%'\">\n      <button mat-icon-button class=\"remove\" (click)=\"remove(item.id)\">\n        <mat-icon [ngClass]=\"{ err: !!item.err }\">close</mat-icon>\n      </button>\n\n      @if (!item.result) {\n        <div class=\"name\">{{ item.filename }}\n          @if(item.err) {\n            <span class=\"error\">{{item.err.message}}</span>\n          }\n        </div>\n        <div class=\"progress\">\n          @if (progress && progress < 100) {\n            <div class=\"percentage\">{{ progress }}</div>\n          }\n          @else if(item.err) {\n              <mat-icon class=\"error\">warning</mat-icon>\n          }\n          @else {\n            <mat-progress-spinner mode=\"indeterminate\" class=\"ymt-progress-spinner--tiny\"></mat-progress-spinner>\n          }\n        </div>\n      } @else {\n        <div class=\"result-items\">\n          @for (res of item.result; track $index) {\n            <div class=\"result-item\">\n              <div class=\"name\" (click)=\"itemClick.emit(res)\">\n                {{ res.label }}\n              </div>\n            </div>\n          }\n        </div>\n        <mat-icon class=\"done\">check</mat-icon>\n      }\n    </li>\n  }\n</ul>\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed, inject, input, output } from '@angular/core';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport { TranslatePipe, UploadResult, UploadService } from '@yuuvis/client-core';\nimport { UploadProgressOverlayComponent } from './upload-progress-overlay/upload-progress-overlay.component';\n\n@Component({\n  selector: 'yuv-upload-progress',\n  standalone: true,\n  imports: [CommonModule, MatButtonModule, MatIconModule, TranslatePipe, UploadProgressOverlayComponent],\n  templateUrl: './upload-progress.component.html',\n  styleUrl: './upload-progress.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class.expanded]': 'expanded'\n  }\n})\nexport class UploadProgressComponent {\n  //#region Dependencies\n\n  #uploadService = inject(UploadService);\n\n  //#endregion\n\n  //#region Angular stuff\n\n  expanded = true;\n  resultItemClick = output<UploadResult>();\n\n  /**\n   * Optional list of scope identifiers this component instance should respond to.\n   *\n   * When provided, the component will display upload progress only for uploads\n   * that were initiated with a matching scope via `UploadService.uploadFile()` or\n   * `UploadService.multipartUpload()`. This allows multiple `UploadProgressComponent`\n   * instances to coexist in different sections of the UI, each showing only the uploads\n   * relevant to its own context.\n   *\n   * If omitted, the component responds to all uploads regardless of scope.\n   *\n   * @example\n   * ```html\n   * <!-- Shows only uploads tagged with scope 'mail-editor' or 'attachments-panel' -->\n   * <yuv-upload-progress [scopes]=\"['mail-editor', 'attachments-panel']\" />\n   *\n   * <!-- Shows all uploads (no scope filter) -->\n   * <yuv-upload-progress />\n   * ```\n   */\n  scopes = input<string[]>();\n  //#endregion\n\n  //#region Properties\n\n  completedUp$ = this.#uploadService.uploadStatus$;\n\n  #status = toSignal(this.#uploadService.status$);\n\n  filteredItems = computed(() => {\n    const items = this.#status()?.items ?? [];\n    const scopes = this.scopes();\n    return scopes?.length ? items.filter((item) => item.scope && scopes.includes(item.scope)) : items;\n  });\n\n  //#endregion\n\n  //#region UI Methods\n\n  close(): void {\n    this.filteredItems().forEach((item) => this.#uploadService.cancelItem(item.id));\n  }\n\n  //#endregion\n}\n","@let items = filteredItems();\n@if (items.length) {\n  @let completed = completedUp$ | async;\n\n  <div class=\"upload-progress\">\n    <header>\n      <h4>\n        @if (!completed) {\n          {{ 'yuv.upload-progress.header.uploading' | translate: { count: items.length } }}\n        } @else {\n          {{ 'yuv.upload-progress.header.uploaded' | translate: { count: items.length } }}\n        }\n      </h4>\n      <button mat-icon-button (click)=\"expanded = !expanded\">\n        <mat-icon class=\"toggle\">keyboard_arrow_down</mat-icon>\n      </button>\n      <button mat-icon-button (click)=\"close()\">\n        <mat-icon class=\"toggle\">clear</mat-icon>\n      </button>\n    </header>\n    @if (expanded) {\n      <yuv-upload-progress-overlay [items]=\"items\" (itemClick)=\"resultItemClick.emit($event)\" />\n    }\n  </div>\n}\n","import { NgModule } from \"@angular/core\";\nimport { UploadProgressComponent } from \"./upload-progress.component\";\n\n\nconst cmp = [\n    UploadProgressComponent\n]\n\n@NgModule({\n    imports: [cmp],\n    exports: [cmp]\n  })\n  export class YuvUploadProgressModule {}","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1","i2","i3"],"mappings":"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"}
+{"version":3,"file":"yuuvis-client-framework-upload-progress.mjs","sources":["../../../../../libs/yuuvis/client-framework/upload-progress/src/lib/upload-progress/upload-progress-overlay/upload-progress-overlay.component.ts","../../../../../libs/yuuvis/client-framework/upload-progress/src/lib/upload-progress/upload-progress-overlay/upload-progress-overlay.component.html","../../../../../libs/yuuvis/client-framework/upload-progress/src/lib/upload-progress/upload-progress.component.ts","../../../../../libs/yuuvis/client-framework/upload-progress/src/lib/upload-progress/upload-progress.component.html","../../../../../libs/yuuvis/client-framework/upload-progress/src/lib/upload-progress/upload-progress.module.ts","../../../../../libs/yuuvis/client-framework/upload-progress/src/yuuvis-client-framework-upload-progress.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { Component, computed, inject, input, output } from '@angular/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatProgressSpinner } from '@angular/material/progress-spinner';\nimport { ProgressStatusItem, TranslateService, UploadResult, UploadService } from '@yuuvis/client-core';\n\n@Component({\n  selector: 'yuv-upload-progress-overlay',\n  standalone: true,\n  imports: [CommonModule, MatButtonModule, MatIconModule, MatProgressSpinner],\n  templateUrl: './upload-progress-overlay.component.html',\n  styleUrl: './upload-progress-overlay.component.scss'\n})\nexport class UploadProgressOverlayComponent {\n  #uploadService = inject(UploadService);\n  translate = inject(TranslateService);\n\n  items = input<ProgressStatusItem[]>();\n  _items = computed(() => {\n    const items = this.items() || [];\n    items.forEach((item) => {\n      if (item.err) {\n        item.err.message = this.#getErrorMessage(item.err.code);\n      }\n    });\n    return items;\n  });\n  itemClick = output<UploadResult>();\n\n  remove(id?: string) {\n    this.#uploadService.cancelItem(id);\n  }\n\n  #getErrorMessage(status: number): string {\n    switch (status) {\n      case 403:\n        return this.translate.instant('yuv.upload-progress-overlay.error.403');\n      default:\n        return this.translate.instant('yuv.upload-progress-overlay.error.default');\n    }\n  }\n}\n","<ul>\n  @for (item of _items(); track item.id) {\n    @let progress = item.progress | async;\n    <li [ngClass]=\"{ err: !!item.err, done: !!item.result }\" [style.--progress]=\"progress + '%'\">\n      <button mat-icon-button class=\"remove\" (click)=\"remove(item.id)\">\n        <mat-icon [ngClass]=\"{ err: !!item.err }\">close</mat-icon>\n      </button>\n\n      @if (!item.result) {\n        <div class=\"name\">{{ item.filename }}\n          @if(item.err) {\n            <span class=\"error\">{{item.err.message}}</span>\n          }\n        </div>\n        <div class=\"progress\">\n          @if (progress && progress < 100) {\n            <div class=\"percentage\">{{ progress }}</div>\n          }\n          @else if(item.err) {\n              <mat-icon class=\"error\">warning</mat-icon>\n          }\n          @else {\n            <mat-progress-spinner mode=\"indeterminate\" class=\"ymt-progress-spinner--tiny\"></mat-progress-spinner>\n          }\n        </div>\n      } @else {\n        <div class=\"result-items\">\n          @for (res of item.result; track $index) {\n            <div class=\"result-item\">\n              <div class=\"name\" (click)=\"itemClick.emit(res)\">\n                {{ res.label }}\n              </div>\n            </div>\n          }\n        </div>\n        <mat-icon class=\"done\">check</mat-icon>\n      }\n    </li>\n  }\n</ul>\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed, inject, input, output } from '@angular/core';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport { TranslatePipe, UploadResult, UploadService } from '@yuuvis/client-core';\nimport { UploadProgressOverlayComponent } from './upload-progress-overlay/upload-progress-overlay.component';\n\n@Component({\n  selector: 'yuv-upload-progress',\n  standalone: true,\n  imports: [CommonModule, MatButtonModule, MatIconModule, TranslatePipe, UploadProgressOverlayComponent],\n  templateUrl: './upload-progress.component.html',\n  styleUrl: './upload-progress.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class.expanded]': 'expanded'\n  }\n})\nexport class UploadProgressComponent {\n  //#region Dependencies\n\n  #uploadService = inject(UploadService);\n\n  //#endregion\n\n  //#region Angular stuff\n\n  expanded = true;\n  resultItemClick = output<UploadResult>();\n\n  /**\n   * Optional list of scope identifiers this component instance should respond to.\n   *\n   * When provided, the component will display upload progress only for uploads\n   * that were initiated with a matching scope via `UploadService.uploadFile()` or\n   * `UploadService.multipartUpload()`. This allows multiple `UploadProgressComponent`\n   * instances to coexist in different sections of the UI, each showing only the uploads\n   * relevant to its own context.\n   *\n   * If omitted, the component responds to all uploads regardless of scope.\n   *\n   * @example\n   * ```html\n   * <!-- Shows only uploads tagged with scope 'mail-editor' or 'attachments-panel' -->\n   * <yuv-upload-progress [scopes]=\"['mail-editor', 'attachments-panel']\" />\n   *\n   * <!-- Shows all uploads (no scope filter) -->\n   * <yuv-upload-progress />\n   * ```\n   */\n  scopes = input<string[]>();\n  //#endregion\n\n  //#region Properties\n\n  completedUp$ = this.#uploadService.uploadStatus$;\n\n  #status = toSignal(this.#uploadService.status$);\n\n  filteredItems = computed(() => {\n    const items = this.#status()?.items ?? [];\n    const scopes = this.scopes();\n    return scopes?.length ? items.filter((item) => item.scope && scopes.includes(item.scope)) : items;\n  });\n\n  //#endregion\n\n  //#region UI Methods\n\n  close(): void {\n    this.filteredItems().forEach((item) => this.#uploadService.cancelItem(item.id));\n  }\n\n  //#endregion\n}\n","@let items = filteredItems();\n@if (items.length) {\n  @let completed = completedUp$ | async;\n\n  <div class=\"upload-progress\">\n    <header>\n      <h4>\n        @if (!completed) {\n          {{ 'yuv.upload-progress.header.uploading' | translate: { count: items.length } }}\n        } @else {\n          {{ 'yuv.upload-progress.header.uploaded' | translate: { count: items.length } }}\n        }\n      </h4>\n      <button mat-icon-button (click)=\"expanded = !expanded\">\n        <mat-icon class=\"toggle\">keyboard_arrow_down</mat-icon>\n      </button>\n      <button mat-icon-button (click)=\"close()\">\n        <mat-icon class=\"toggle\">clear</mat-icon>\n      </button>\n    </header>\n    @if (expanded) {\n      <yuv-upload-progress-overlay [items]=\"items\" (itemClick)=\"resultItemClick.emit($event)\" />\n    }\n  </div>\n}\n","import { NgModule } from \"@angular/core\";\nimport { UploadProgressComponent } from \"./upload-progress.component\";\n\n\nconst cmp = [\n    UploadProgressComponent\n]\n\n@NgModule({\n    imports: [cmp],\n    exports: [cmp]\n  })\n  export class YuvUploadProgressModule {}","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1","i2","i3"],"mappings":"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"}