@yuuvis/client-framework 2.0.0-beta.9 → 2.0.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/fesm2022/yuuvis-client-framework-actions.mjs +16 -16
- package/fesm2022/yuuvis-client-framework-actions.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-app-bar.mjs +3 -3
- package/fesm2022/yuuvis-client-framework-autocomplete.mjs +7 -7
- package/fesm2022/yuuvis-client-framework-clipboard.mjs +6 -6
- package/fesm2022/yuuvis-client-framework-clipboard.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-common.mjs +66 -74
- package/fesm2022/yuuvis-client-framework-common.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-datepicker.mjs +33 -32
- package/fesm2022/yuuvis-client-framework-datepicker.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-forms.mjs +48 -48
- package/fesm2022/yuuvis-client-framework-forms.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-icons.mjs +9 -9
- package/fesm2022/yuuvis-client-framework-list.mjs +31 -27
- package/fesm2022/yuuvis-client-framework-list.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-master-details.mjs +7 -7
- package/fesm2022/yuuvis-client-framework-metadata-form-defaults.mjs +7 -7
- package/fesm2022/yuuvis-client-framework-metadata-form.mjs +15 -15
- package/fesm2022/yuuvis-client-framework-object-details.mjs +26 -26
- package/fesm2022/yuuvis-client-framework-object-details.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-object-flavor.mjs +24 -24
- package/fesm2022/yuuvis-client-framework-object-flavor.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-object-form.mjs +28 -28
- package/fesm2022/yuuvis-client-framework-object-preview.mjs +10 -10
- package/fesm2022/yuuvis-client-framework-object-preview.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-object-summary.mjs +23 -23
- package/fesm2022/yuuvis-client-framework-object-summary.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-overflow-menu.mjs +7 -7
- package/fesm2022/yuuvis-client-framework-pagination.mjs +3 -3
- package/fesm2022/yuuvis-client-framework-panel.mjs +3 -3
- package/fesm2022/yuuvis-client-framework-popout.mjs +7 -7
- package/fesm2022/yuuvis-client-framework-renderer.mjs +34 -34
- package/fesm2022/yuuvis-client-framework-renderer.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-sequence-list.mjs +3 -3
- package/fesm2022/yuuvis-client-framework-simple-search.mjs +3 -3
- package/fesm2022/yuuvis-client-framework-split-view.mjs +10 -10
- package/fesm2022/yuuvis-client-framework-tile-list.mjs +49 -41
- package/fesm2022/yuuvis-client-framework-tile-list.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-tree.mjs +9 -9
- package/fesm2022/yuuvis-client-framework-upload-progress.mjs +6 -6
- package/fesm2022/yuuvis-client-framework.mjs +4 -4
- package/package.json +4 -4
- package/tile-list/lib/tile-list/tile-list.component.d.ts +2 -0
|
@@ -38,10 +38,10 @@ class UploadProgressOverlayComponent {
|
|
|
38
38
|
return this.translate.instant('yuv.upload-progress-overlay.error.default');
|
|
39
39
|
}
|
|
40
40
|
}
|
|
41
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
42
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
41
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: UploadProgressOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
42
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", 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: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
|
|
43
43
|
}
|
|
44
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
44
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: UploadProgressOverlayComponent, decorators: [{
|
|
45
45
|
type: Component,
|
|
46
46
|
args: [{ selector: 'yuv-upload-progress-overlay', standalone: true, imports: [CommonModule,
|
|
47
47
|
MatButtonModule,
|
|
@@ -60,10 +60,10 @@ class UploadProgressComponent {
|
|
|
60
60
|
close() {
|
|
61
61
|
this.#uploadService.cancelItem();
|
|
62
62
|
}
|
|
63
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
64
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
63
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: UploadProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
64
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: UploadProgressComponent, isStandalone: true, selector: "yuv-upload-progress", outputs: { resultItemClick: "resultItemClick" }, host: { properties: { "class.expanded": "this.expanded" } }, ngImport: i0, template: "@let ps = progressStatus$ | async;\n@if (ps && ps.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: ps.items.length } }}\n } @else {\n {{ 'yuv.upload-progress.header.uploaded' | translate: { count: ps.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]=\"ps.items\" (itemClick)=\"resultItemClick.emit($event)\"></yuv-upload-progress-overlay>\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: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "component", type: UploadProgressOverlayComponent, selector: "yuv-upload-progress-overlay", inputs: ["items"], outputs: ["itemClick"] }] }); }
|
|
65
65
|
}
|
|
66
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
66
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: UploadProgressComponent, decorators: [{
|
|
67
67
|
type: Component,
|
|
68
68
|
args: [{ selector: 'yuv-upload-progress', standalone: true, imports: [CommonModule, MatButtonModule, MatIconModule, TranslateModule, UploadProgressOverlayComponent], template: "@let ps = progressStatus$ | async;\n@if (ps && ps.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: ps.items.length } }}\n } @else {\n {{ 'yuv.upload-progress.header.uploaded' | translate: { count: ps.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]=\"ps.items\" (itemClick)=\"resultItemClick.emit($event)\"></yuv-upload-progress-overlay>\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"] }]
|
|
69
69
|
}], propDecorators: { expanded: [{
|
|
@@ -3,11 +3,11 @@ import { NgModule } from '@angular/core';
|
|
|
3
3
|
import { CommonModule } from '@angular/common';
|
|
4
4
|
|
|
5
5
|
class YuuvisClientFrameworkModule {
|
|
6
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
7
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.
|
|
8
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.
|
|
6
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: YuuvisClientFrameworkModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
7
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.12", ngImport: i0, type: YuuvisClientFrameworkModule, imports: [CommonModule] }); }
|
|
8
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: YuuvisClientFrameworkModule, imports: [CommonModule] }); }
|
|
9
9
|
}
|
|
10
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
10
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: YuuvisClientFrameworkModule, decorators: [{
|
|
11
11
|
type: NgModule,
|
|
12
12
|
args: [{
|
|
13
13
|
imports: [CommonModule],
|
package/package.json
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@yuuvis/client-framework",
|
|
3
|
-
"version": "2.0.0
|
|
3
|
+
"version": "2.0.0",
|
|
4
4
|
"author": "OPTIMAL SYSTEMS GmbH <npm@optimal-systems.de>",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"peerDependencies": {
|
|
7
7
|
"@angular/cdk": "^19.2.15",
|
|
8
8
|
"@angular/common": "^19.2.1",
|
|
9
9
|
"@angular/core": "^19.2.1",
|
|
10
|
-
"@yuuvis/client-core": "2.0.0
|
|
10
|
+
"@yuuvis/client-core": "2.0.0",
|
|
11
11
|
"modern-normalize": "^3.0.1"
|
|
12
12
|
},
|
|
13
13
|
"dependencies": {
|
|
14
14
|
"@angular/material": "^19.2.15",
|
|
15
15
|
"@ngrx/signals": "^19.2.0",
|
|
16
|
-
"@yuuvis/client-shell-core": "2.0.0
|
|
17
|
-
"@yuuvis/material": "2.0.0
|
|
16
|
+
"@yuuvis/client-shell-core": "2.0.0",
|
|
17
|
+
"@yuuvis/material": "2.0.0",
|
|
18
18
|
"@yuuvis/media-viewer": "^1.0.0",
|
|
19
19
|
"angular-split": "^19.0.0",
|
|
20
20
|
"tslib": "^2.3.0"
|
|
@@ -6,6 +6,7 @@ import { Pagination } from '@yuuvis/client-framework/pagination';
|
|
|
6
6
|
import { ObjectFlavor } from '@yuuvis/client-shell-core';
|
|
7
7
|
import { Subscription } from 'rxjs';
|
|
8
8
|
import { TileData, TileListConfigOptions, TileListHighlight } from './tile-list.interface';
|
|
9
|
+
import { PageEvent } from '@angular/material/paginator';
|
|
9
10
|
import * as i0 from "@angular/core";
|
|
10
11
|
/**
|
|
11
12
|
* List that renders the result of a search query as object config based tiles. It also contains a component to
|
|
@@ -104,6 +105,7 @@ export declare class TileListComponent implements OnInit, OnDestroy {
|
|
|
104
105
|
clearSelection(silent?: boolean): void;
|
|
105
106
|
selectNext(): void;
|
|
106
107
|
selectPrev(): void;
|
|
108
|
+
changePage($event: PageEvent): void;
|
|
107
109
|
goToPage(page: number): void;
|
|
108
110
|
private _selectionToTileData;
|
|
109
111
|
private _executeQuery;
|