@yuuvis/client-framework 0.6.5

package/fesm2022/yuuvis-client-framework-object-summary.mjs

@@ -0,0 +1,397 @@
+import * as i0 from '@angular/core';
+import { NgModule, inject, ChangeDetectorRef, viewChild, signal, input, effect, untracked, Component, ChangeDetectionStrategy } from '@angular/core';
+import { CommonModule, NgClass } from '@angular/common';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { EventService, DmsService, TranslateService, SystemService, ObjectConfigService, SearchService, YuvEventType, ContentStreamField, BaseObjectTypeField, Operator, TranslateModule } from '@yuuvis/client-core';
+import * as i1 from '@yuuvis/client-framework/common';
+import { BusyOverlayDirective } from '@yuuvis/client-framework/common';
+import { YUV_ICONS } from '@yuuvis/client-framework/icons';
+import { ObjectFlavorComponent } from '@yuuvis/client-framework/object-flavor';
+import { RendererDirective } from '@yuuvis/client-framework/renderer';
+import * as i2 from '@yuuvis/components/icon';
+import { YvcIconModule } from '@yuuvis/components/icon';
+import { YvcOverflowMenuComponent } from '@yuuvis/components/overflow-menu';
+import { YvcOverlayModule } from '@yuuvis/components/overlay';
+import { ShellService } from '@yuuvis/client-shell-core';
+
+class ObjectSummaryModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ObjectSummaryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ObjectSummaryModule, imports: [CommonModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ObjectSummaryModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ObjectSummaryModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule]
+                }]
+        }] });
+
+/**
+ * Component showing a summary of the given dms object.
+ */
+class ObjectSummaryComponent {
+    #eventService;
+    #dmsService;
+    #systemService;
+    #objectConfigService;
+    #searchService;
+    #cd;
+    #oc;
+    #dmsObjectInputEffect;
+    #objectIdEffect;
+    constructor() {
+        this.#eventService = inject(EventService);
+        this.#dmsService = inject(DmsService);
+        this.translate = inject(TranslateService);
+        this.#systemService = inject(SystemService);
+        this.#objectConfigService = inject(ObjectConfigService);
+        this.#searchService = inject(SearchService);
+        this.#cd = inject(ChangeDetectorRef);
+        this.flavorCmp = viewChild(ObjectFlavorComponent);
+        this.slide = signal({
+            loading: false
+        });
+        this.busy = true;
+        this.headerData = signal(undefined);
+        this.baseData = [];
+        this.icons = {
+            folder: YUV_ICONS.folder
+        };
+        this.actions = input([]);
+        /**
+         * DmsObject to show the details for.
+         */
+        this.dmsObject = signal(undefined);
+        this.dmsObjectInput = input(undefined, { alias: 'dmsObject' });
+        this.#dmsObjectInputEffect = effect(() => {
+            const dmsObject = this.dmsObjectInput();
+            const contentChanged = this.dmsObject()?.content?.contentStreamId !== dmsObject?.content?.contentStreamId;
+            untracked(() => {
+                this.dmsObject.set(dmsObject);
+                contentChanged && this.slide.update((slide) => ({ ...slide, uri: undefined, icon: undefined, iconSvg: undefined }));
+                if (dmsObject) {
+                    this.#getHeaderData();
+                    this.#getBaseData();
+                    (contentChanged || dmsObject.isFolder) && this.#setupSlide();
+                    this.folderInfo = undefined;
+                    if (dmsObject.isFolder)
+                        this.#fetchFolderInfo(dmsObject.id);
+                    // if a flavor has been selected and a new object comes in, we'll check if
+                    // the new object has the same flavor and update the flavor data
+                    if (this.flavorData && dmsObject.sots.includes(this.flavorData.flavor.sot)) {
+                        this.#getFlavorData(this.flavorData.flavor);
+                    }
+                    else
+                        this.flavorData = undefined;
+                    //   this.retentionEndDate = this._dmsObject.data[RetentionField.RETENTION_END]
+                    //     ? new Date(this._dmsObject.data[RetentionField.RETENTION_END] as string)
+                    //     : undefined;
+                    //   const today = new Date();
+                    //   this.retentionEnded = this.retentionEndDate && today > this.retentionEndDate;
+                }
+                else {
+                    this.flavorData = undefined;
+                }
+            });
+        });
+        /**
+         * ID of a DmsObject. The object will be fetched from the backend upfront.
+         */
+        this.objectId = input(null);
+        this.#objectIdEffect = effect(() => {
+            const id = this.objectId();
+            untracked(() => {
+                id && this.#getDmsObject(id);
+            });
+        });
+        // virtual object type to be used for header data
+        this.configType = input();
+        this.#objectConfigService
+            .getObjectConfigs$(undefined, true)
+            .pipe(takeUntilDestroyed())
+            .subscribe((res) => {
+            this.#oc = res;
+            const dmsObject = this.dmsObject();
+            if (dmsObject)
+                this.#getHeaderData();
+        });
+        this.#eventService
+            .on(YuvEventType.DMS_OBJECT_UPDATED)
+            .pipe(takeUntilDestroyed())
+            .subscribe((e) => {
+            const o = e.data;
+            const dmsObject = this.dmsObject();
+            if (dmsObject?.id === o.id) {
+                this.dmsObject.set(o);
+            }
+        });
+    }
+    #setupSlide() {
+        const dmsObject = this.dmsObject();
+        if (dmsObject) {
+            if (dmsObject.content) {
+                const slideUri = this.#dmsService.getSlideURI(dmsObject.id, dmsObject.content?.mimeType);
+                if (slideUri) {
+                    this.slide.update((slide) => ({ ...slide, loading: true }));
+                    const img = new Image();
+                    img.onload = () => {
+                        this.slide.update((slide) => ({
+                            ...slide,
+                            orientation: img.width > img.height ? 'landscape' : 'portrait',
+                            uri: `${slideUri}?${new Date().getTime()}`, // add Timestamp to force image reload
+                            loading: false
+                        }));
+                        this.#cd.markForCheck();
+                    };
+                    img.onerror = () => {
+                        const headerData = this.headerData();
+                        this.slide.update((slide) => ({ ...slide, icon: headerData?.icon, loading: false }));
+                        this.#cd.markForCheck();
+                    };
+                    img.src = slideUri;
+                }
+            }
+            else {
+                const headerData = this.headerData();
+                this.slide.update((slide) => ({ ...slide, icon: headerData?.icon }));
+            }
+        }
+    }
+    onFlavorClick(flavor) {
+        this.#getFlavorData(flavor);
+    }
+    #fetchFolderInfo(id) {
+        const q = {
+            fields: [`SUM(${ContentStreamField.LENGTH})`],
+            aggs: [BaseObjectTypeField.BASE_TYPE_ID],
+            filters: [{
+                    f: BaseObjectTypeField.PARENT_ID,
+                    o: Operator.EQUAL,
+                    v1: id
+                }]
+        };
+        this.#searchService.aggregate(q, [BaseObjectTypeField.BASE_TYPE_ID]).subscribe((res) => {
+            const entries = res.aggregations[0].entries;
+            this.folderInfo = {
+                size: entries.reduce((s, v) => s + v.count, 0),
+                entries
+            };
+        });
+    }
+    #getDmsObject(id) {
+        this.busy = true;
+        this.#dmsService.getDmsObject(id).subscribe({
+            next: (dmsObject) => this.dmsObject.set(dmsObject),
+            error: () => {
+                this.dmsObject.set(undefined);
+                this.contextError = this.translate.instant('yuv.object-summary.load.error');
+            },
+            complete: () => {
+                this.busy = false;
+            }
+        });
+    }
+    #getObjectConfig(type, bucket) {
+        const dmsObject = this.dmsObject();
+        return dmsObject
+            ? this.#objectConfigService.getResolvedObjectConfig(dmsObject.data, type || {
+                id: dmsObject.objectTypeId,
+                objectType: dmsObject.objectTypeId
+            }, bucket, true)
+            : undefined;
+    }
+    #getFlavorData(flavor) {
+        if (!flavor) {
+            this.flavorData = undefined;
+            return;
+        }
+        const sot = this.#systemService.getSecondaryObjectType(flavor.sot, true);
+        const dmsObject = this.dmsObject();
+        if (dmsObject && sot) {
+            this.flavorData = {
+                flavor,
+                label: this.translate.instant(flavor.id),
+                properties: sot.fields.map((f) => ({
+                    label: this.#systemService.getLocalizedLabel(f.id) || f.id,
+                    value: {
+                        propertyName: f.id,
+                        value: dmsObject.data[f.id]
+                    }
+                }))
+            };
+        }
+        else
+            this.flavorData = undefined;
+    }
+    #getHeaderData() {
+        const oc = this.#getObjectConfig(this.configType()?.type, this.configType()?.bucket);
+        const dmsObject = this.dmsObject();
+        if (oc && dmsObject) {
+            this.headerData.update((data) => ({
+                ...data,
+                title: oc.title.value,
+                description: oc.description?.value,
+                icon: {
+                    title: oc.title.value,
+                    ...(oc.icon ? { svg: oc.icon.value } : { src: this.#systemService.getObjectTypeIconUri(dmsObject.objectTypeId) })
+                }
+            }));
+            // this.headerData.icon =;
+        }
+        else
+            this.headerData.set(undefined);
+    }
+    #getBaseData() {
+        this.baseData = [];
+        const fields = [
+            BaseObjectTypeField.CREATION_DATE,
+            `${BaseObjectTypeField.CREATED_BY}_title`,
+            BaseObjectTypeField.MODIFICATION_DATE,
+            `${BaseObjectTypeField.MODIFIED_BY}_title`
+        ];
+        const contentFields = [ContentStreamField.FILENAME, ContentStreamField.LENGTH, ContentStreamField.MIME_TYPE];
+        const dmsObject = this.dmsObject();
+        if (dmsObject) {
+            (dmsObject.content ? [...fields, ...contentFields] : fields).forEach((f) => {
+                this.baseData.push({
+                    label: this.#systemService.getLocalizedLabel(f.replace('_title', '')) || f,
+                    value: {
+                        propertyName: f,
+                        value: dmsObject.data[f]
+                    }
+                });
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ObjectSummaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ObjectSummaryComponent, isStandalone: true, selector: "yuv-object-summary", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, dmsObjectInput: { classPropertyName: "dmsObjectInput", publicName: "dmsObject", isSignal: true, isRequired: false, transformFunction: null }, objectId: { classPropertyName: "objectId", publicName: "objectId", isSignal: true, isRequired: false, transformFunction: null }, configType: { classPropertyName: "configType", publicName: "configType", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "flavorCmp", first: true, predicate: ObjectFlavorComponent, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.BusyOverlayDirective, inputs: ["yuvBusyOverlay", "busy"] }], ngImport: i0, template: "@let imageSlide = slide();\n<section class=\"slide\" [yuvBusyOverlay]=\"imageSlide.loading\">\n  @if (imageSlide.uri || imageSlide.loading) {\n    <img draggable=\"false\" [ngClass]=\"{ loading: imageSlide.loading }\" [attr.data-orientation]=\"imageSlide.orientation\" [src]=\"imageSlide.uri\" />\n  } @else if (imageSlide.icon?.svg) {\n    <yvc-icon draggable=\"false\" [svg]=\"imageSlide.icon?.svg!\"></yvc-icon>\n  } @else if (imageSlide.icon?.src) {\n    <yvc-icon draggable=\"false\" [svgSrc]=\"imageSlide.icon?.src!\"></yvc-icon>\n  }\n  @if (folderInfo) {\n    <div class=\"badge\">{{ folderInfo.size }}</div>\n  }\n</section>\n\n@let o = dmsObject();\n@if (o && !o.isFolder) {\n  <yuv-object-flavor [dmsObject]=\"o\" (flavorClick)=\"onFlavorClick($event)\"></yuv-object-flavor>\n}\n\n<div class=\"content\">\n  @let header = headerData();\n  <section class=\"title\">\n    <h1>{{ header?.title }}</h1>\n\n    <div class=\"actions\">\n      <yvc-overflow-menu [hideLabels]=\"true\" [menuItems]=\"actions()\"></yvc-overflow-menu>\n    </div>\n  </section>\n\n  @if (flavorData) {\n    <section class=\"flavor properties\">\n      <!-- <h2>{{ flavorData.label }}</h2> -->\n      @for (p of flavorData.properties; track $index) {\n        <div class=\"row\">\n          <div class=\"label\">{{ p.label }}</div>\n          <div class=\"value\">\n            <ng-container *yuvRenderer=\"p.value\"></ng-container>\n          </div>\n        </div>\n      }\n    </section>\n  }\n\n  <section class=\"properties\">\n    @for (p of baseData; track $index) {\n      <div class=\"row\">\n        <div class=\"label\">{{ p.label }}</div>\n        <div class=\"value\">\n          <ng-container *yuvRenderer=\"p.value\"></ng-container>\n        </div>\n      </div>\n    }\n  </section>\n</div>\n", styles: ["section.title{padding:var(--app-pane-padding);display:flex;justify-content:space-between;align-items:center;gap:var(--app-pane-padding)}section.title h1{margin:0;padding:0;font-size:var(--font-title);font-weight:400;text-overflow:ellipsis;overflow:hidden}section.title .actions yvc-icon{--icon-size: 18px}section.title .actions button.quickAccess.isFavorite{color:var(--color-accent)}section.slide{display:flex;flex-flow:column;align-items:center;justify-content:center;border-block-end:1px solid var(--panel-divider-color);background-color:var(--panel-background-grey);position:relative;height:25%;overflow:hidden}section.slide .badge{position:absolute;inset-inline-end:calc(var(--app-pane-padding) / 2);inset-block-start:calc(var(--app-pane-padding) / 2);font-size:3rem;color:var(--text-color-hint)}section.slide yvc-icon{max-height:var(--max-slide-size);max-width:var(--max-slide-size);width:50%;height:50%;opacity:.3}section.slide img{object-fit:cover;object-position:top;opacity:0;transition:opacity .3s;margin:auto;max-height:100%;max-width:100%;outline:4px solid var(--panel-background);outline-offset:-4px;box-shadow:0 0 0 1px var(--panel-divider-color)}section.slide img:not(.loading){opacity:1}:host{--max-slide-size: 150px;display:flex;flex-flow:column;height:100%}:host section{padding:var(--app-pane-padding)}:host section h2{font-size:var(--font-subhead);font-weight:400}:host yuv-object-flavor{border-block-end:1px solid var(--panel-divider-color);min-height:30px}:host .content{flex:1;overflow-y:auto}:host section.properties .row{display:flex;flex-flow:row wrap;align-items:start;column-gap:1rem;margin-block-end:calc(var(--app-pane-padding) / 2)}:host section.properties .row .label{font-weight:700;font-size:var(--font-caption)}:host section.properties .row .value{word-break:break-all}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: RendererDirective, selector: "[yuvRenderer]", inputs: ["yuvRenderer"] }, { kind: "component", type: ObjectFlavorComponent, selector: "yuv-object-flavor", inputs: ["dmsObject"], outputs: ["flavorClick"] }, { kind: "ngmodule", type: YvcOverlayModule }, { kind: "ngmodule", type: YvcIconModule }, { kind: "component", type: i2.Icon, selector: "yvc-icon", inputs: ["label", "svg", "svgSrc"] }, { kind: "component", type: YvcOverflowMenuComponent, selector: "yvc-overflow-menu", inputs: ["overflowIcon", "groupLabels", "menuItems", "hideLabels"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ObjectSummaryComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-object-summary', standalone: true, imports: [
+                        NgClass,
+                        BusyOverlayDirective,
+                        TranslateModule,
+                        RendererDirective,
+                        ObjectFlavorComponent,
+                        YvcOverlayModule,
+                        YvcIconModule,
+                        YvcOverflowMenuComponent
+                    ], hostDirectives: [
+                        {
+                            directive: BusyOverlayDirective,
+                            inputs: ['yuvBusyOverlay: busy']
+                        }
+                    ], template: "@let imageSlide = slide();\n<section class=\"slide\" [yuvBusyOverlay]=\"imageSlide.loading\">\n  @if (imageSlide.uri || imageSlide.loading) {\n    <img draggable=\"false\" [ngClass]=\"{ loading: imageSlide.loading }\" [attr.data-orientation]=\"imageSlide.orientation\" [src]=\"imageSlide.uri\" />\n  } @else if (imageSlide.icon?.svg) {\n    <yvc-icon draggable=\"false\" [svg]=\"imageSlide.icon?.svg!\"></yvc-icon>\n  } @else if (imageSlide.icon?.src) {\n    <yvc-icon draggable=\"false\" [svgSrc]=\"imageSlide.icon?.src!\"></yvc-icon>\n  }\n  @if (folderInfo) {\n    <div class=\"badge\">{{ folderInfo.size }}</div>\n  }\n</section>\n\n@let o = dmsObject();\n@if (o && !o.isFolder) {\n  <yuv-object-flavor [dmsObject]=\"o\" (flavorClick)=\"onFlavorClick($event)\"></yuv-object-flavor>\n}\n\n<div class=\"content\">\n  @let header = headerData();\n  <section class=\"title\">\n    <h1>{{ header?.title }}</h1>\n\n    <div class=\"actions\">\n      <yvc-overflow-menu [hideLabels]=\"true\" [menuItems]=\"actions()\"></yvc-overflow-menu>\n    </div>\n  </section>\n\n  @if (flavorData) {\n    <section class=\"flavor properties\">\n      <!-- <h2>{{ flavorData.label }}</h2> -->\n      @for (p of flavorData.properties; track $index) {\n        <div class=\"row\">\n          <div class=\"label\">{{ p.label }}</div>\n          <div class=\"value\">\n            <ng-container *yuvRenderer=\"p.value\"></ng-container>\n          </div>\n        </div>\n      }\n    </section>\n  }\n\n  <section class=\"properties\">\n    @for (p of baseData; track $index) {\n      <div class=\"row\">\n        <div class=\"label\">{{ p.label }}</div>\n        <div class=\"value\">\n          <ng-container *yuvRenderer=\"p.value\"></ng-container>\n        </div>\n      </div>\n    }\n  </section>\n</div>\n", styles: ["section.title{padding:var(--app-pane-padding);display:flex;justify-content:space-between;align-items:center;gap:var(--app-pane-padding)}section.title h1{margin:0;padding:0;font-size:var(--font-title);font-weight:400;text-overflow:ellipsis;overflow:hidden}section.title .actions yvc-icon{--icon-size: 18px}section.title .actions button.quickAccess.isFavorite{color:var(--color-accent)}section.slide{display:flex;flex-flow:column;align-items:center;justify-content:center;border-block-end:1px solid var(--panel-divider-color);background-color:var(--panel-background-grey);position:relative;height:25%;overflow:hidden}section.slide .badge{position:absolute;inset-inline-end:calc(var(--app-pane-padding) / 2);inset-block-start:calc(var(--app-pane-padding) / 2);font-size:3rem;color:var(--text-color-hint)}section.slide yvc-icon{max-height:var(--max-slide-size);max-width:var(--max-slide-size);width:50%;height:50%;opacity:.3}section.slide img{object-fit:cover;object-position:top;opacity:0;transition:opacity .3s;margin:auto;max-height:100%;max-width:100%;outline:4px solid var(--panel-background);outline-offset:-4px;box-shadow:0 0 0 1px var(--panel-divider-color)}section.slide img:not(.loading){opacity:1}:host{--max-slide-size: 150px;display:flex;flex-flow:column;height:100%}:host section{padding:var(--app-pane-padding)}:host section h2{font-size:var(--font-subhead);font-weight:400}:host yuv-object-flavor{border-block-end:1px solid var(--panel-divider-color);min-height:30px}:host .content{flex:1;overflow-y:auto}:host section.properties .row{display:flex;flex-flow:row wrap;align-items:start;column-gap:1rem;margin-block-end:calc(var(--app-pane-padding) / 2)}:host section.properties .row .label{font-weight:700;font-size:var(--font-caption)}:host section.properties .row .value{word-break:break-all}\n"] }]
+        }], ctorParameters: () => [] });
+
+class MultiObjectSummaryComponent {
+    constructor() {
+        this.icon = signal('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#5f6368" viewBox="0 -960 960 960"><path d="m200-120-80-480h720l-80 480H200Zm67-80h426l51-320H216l51 320Zm133-160h160q17 0 28.5-11.5T600-400q0-17-11.5-28.5T560-440H400q-17 0-28.5 11.5T360-400q0 17 11.5 28.5T400-360ZM240-640q-17 0-28.5-11.5T200-680q0-17 11.5-28.5T240-720h480q17 0 28.5 11.5T760-680q0 17-11.5 28.5T720-640H240Zm80-120q-17 0-28.5-11.5T280-800q0-17 11.5-28.5T320-840h320q17 0 28.5 11.5T680-800q0 17-11.5 28.5T640-760H320Zm-53 560h426-426Z"/></svg>');
+        this.headline = input('this could be your headline');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MultiObjectSummaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: MultiObjectSummaryComponent, isStandalone: true, selector: "yuv-multi-object-summary", inputs: { headline: { classPropertyName: "headline", publicName: "headline", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <section class="slide">
+      <yvc-icon [svg]="icon()"></yvc-icon>
+    </section>
+
+    <section class="title">
+      <h1>{{ headline() }}</h1>
+    </section>
+  `, isInline: true, styles: ["section.title{padding:var(--app-pane-padding);display:flex;justify-content:space-between;align-items:center;gap:var(--app-pane-padding)}section.title h1{margin:0;padding:0;font-size:var(--font-title);font-weight:400;text-overflow:ellipsis;overflow:hidden}section.title .actions yvc-icon{--icon-size: 18px}section.title .actions button.quickAccess.isFavorite{color:var(--color-accent)}section.slide{display:flex;flex-flow:column;align-items:center;justify-content:center;border-block-end:1px solid var(--panel-divider-color);background-color:var(--panel-background-grey);position:relative;height:25%;overflow:hidden}section.slide .badge{position:absolute;inset-inline-end:calc(var(--app-pane-padding) / 2);inset-block-start:calc(var(--app-pane-padding) / 2);font-size:3rem;color:var(--text-color-hint)}section.slide yvc-icon{max-height:var(--max-slide-size);max-width:var(--max-slide-size);width:50%;height:50%;opacity:.3}section.slide img{object-fit:cover;object-position:top;opacity:0;transition:opacity .3s;margin:auto;max-height:100%;max-width:100%;outline:4px solid var(--panel-background);outline-offset:-4px;box-shadow:0 0 0 1px var(--panel-divider-color)}section.slide img:not(.loading){opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: YvcIconModule }, { kind: "component", type: i2.Icon, selector: "yvc-icon", inputs: ["label", "svg", "svgSrc"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MultiObjectSummaryComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-multi-object-summary', standalone: true, imports: [YvcIconModule], template: `
+    <section class="slide">
+      <yvc-icon [svg]="icon()"></yvc-icon>
+    </section>
+
+    <section class="title">
+      <h1>{{ headline() }}</h1>
+    </section>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["section.title{padding:var(--app-pane-padding);display:flex;justify-content:space-between;align-items:center;gap:var(--app-pane-padding)}section.title h1{margin:0;padding:0;font-size:var(--font-title);font-weight:400;text-overflow:ellipsis;overflow:hidden}section.title .actions yvc-icon{--icon-size: 18px}section.title .actions button.quickAccess.isFavorite{color:var(--color-accent)}section.slide{display:flex;flex-flow:column;align-items:center;justify-content:center;border-block-end:1px solid var(--panel-divider-color);background-color:var(--panel-background-grey);position:relative;height:25%;overflow:hidden}section.slide .badge{position:absolute;inset-inline-end:calc(var(--app-pane-padding) / 2);inset-block-start:calc(var(--app-pane-padding) / 2);font-size:3rem;color:var(--text-color-hint)}section.slide yvc-icon{max-height:var(--max-slide-size);max-width:var(--max-slide-size);width:50%;height:50%;opacity:.3}section.slide img{object-fit:cover;object-position:top;opacity:0;transition:opacity .3s;margin:auto;max-height:100%;max-width:100%;outline:4px solid var(--panel-background);outline-offset:-4px;box-shadow:0 0 0 1px var(--panel-divider-color)}section.slide img:not(.loading){opacity:1}\n"] }]
+        }] });
+
+class ObjectSummaryDataComponent {
+    constructor() {
+        this.#shell = inject(ShellService);
+        this.#systemService = inject(SystemService);
+        this.translate = inject(TranslateService);
+        this.dmsObject = input.required();
+        this.baseData = signal([]);
+        this.flavorData = signal([]);
+        this.#dmsObjectEffect = effect(() => {
+            const dmsObject = this.dmsObject();
+            if (dmsObject) {
+                untracked(() => {
+                    this.#getBaseData();
+                    this.#getAppliedFlavors(dmsObject);
+                });
+            }
+        });
+    }
+    #shell;
+    #systemService;
+    #dmsObjectEffect;
+    #getBaseData() {
+        this.baseData.set([]);
+        const fields = [
+            BaseObjectTypeField.CREATION_DATE,
+            `${BaseObjectTypeField.CREATED_BY}_title`,
+            BaseObjectTypeField.MODIFICATION_DATE,
+            `${BaseObjectTypeField.MODIFIED_BY}_title`
+        ];
+        const contentFields = [ContentStreamField.FILENAME, ContentStreamField.LENGTH, ContentStreamField.MIME_TYPE];
+        const dmsObject = this.dmsObject();
+        if (dmsObject) {
+            (dmsObject.content ? [...fields, ...contentFields] : fields).forEach((f) => {
+                this.baseData.update((data) => [
+                    ...data,
+                    {
+                        label: this.#systemService.getLocalizedLabel(f.replace('_title', '')) || f,
+                        value: {
+                            propertyName: f,
+                            value: dmsObject.data[f]
+                        }
+                    }
+                ]);
+            });
+        }
+        console.log('baseData', this.baseData());
+    }
+    #getAppliedFlavors(dmsObject) {
+        this.flavorData.set([]);
+        const appliedFlavors = this.#shell.getAppliedObjectFlavors(dmsObject).applied;
+        for (const flavor of appliedFlavors) {
+            this.flavorData.update((data) => [
+                ...data,
+                {
+                    flavor,
+                    label: this.translate.instant(flavor.id),
+                    properties: this.#systemService.getSecondaryObjectType(flavor.sot, true)?.fields.map((f) => ({
+                        label: this.#systemService.getLocalizedLabel(f.id) || f.id,
+                        value: {
+                            propertyName: f.id,
+                            value: dmsObject.data[f.id]
+                        }
+                    }))
+                }
+            ]);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ObjectSummaryDataComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ObjectSummaryDataComponent, isStandalone: true, selector: "yuv-object-summary-data", inputs: { dmsObject: { classPropertyName: "dmsObject", publicName: "dmsObject", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@let flavors = flavorData();\n\n<div class=\"content\">\n  @if (flavors.length > 0) {\n    <section class=\"flavor properties\">\n      @for (flavor of flavors; track $index) {\n        <div class=\"flavour-groups\">\n          <h2>{{ flavor.label }}</h2>\n          @for (property of flavor.properties; track $index) {\n            <div class=\"row\">\n              <div class=\"label\">{{ property.label }}</div>\n              <div class=\"value\">\n                <ng-container *yuvRenderer=\"property.value\"></ng-container>\n              </div>\n            </div>\n          }\n        </div>\n      }\n    </section>\n  }\n\n  @let base = baseData();\n  @if (base) {\n    <section class=\"base properties\">\n      <h2>BASE</h2>\n      @for (p of base; track $index) {\n        <div class=\"row\">\n          <div class=\"label\">{{ p.label }}</div>\n          <div class=\"value\">\n            <ng-container *yuvRenderer=\"p.value\"></ng-container>\n          </div>\n        </div>\n      }\n    </section>\n  }\n</div>\n", styles: ["section.title{padding:var(--app-pane-padding);display:flex;justify-content:space-between;align-items:center;gap:var(--app-pane-padding)}section.title h1{margin:0;padding:0;font-size:var(--font-title);font-weight:400;text-overflow:ellipsis;overflow:hidden}section.title .actions yvc-icon{--icon-size: 18px}section.title .actions button.quickAccess.isFavorite{color:var(--color-accent)}section.slide{display:flex;flex-flow:column;align-items:center;justify-content:center;border-block-end:1px solid var(--panel-divider-color);background-color:var(--panel-background-grey);position:relative;height:25%;overflow:hidden}section.slide .badge{position:absolute;inset-inline-end:calc(var(--app-pane-padding) / 2);inset-block-start:calc(var(--app-pane-padding) / 2);font-size:3rem;color:var(--text-color-hint)}section.slide yvc-icon{max-height:var(--max-slide-size);max-width:var(--max-slide-size);width:50%;height:50%;opacity:.3}section.slide img{object-fit:cover;object-position:top;opacity:0;transition:opacity .3s;margin:auto;max-height:100%;max-width:100%;outline:4px solid var(--panel-background);outline-offset:-4px;box-shadow:0 0 0 1px var(--panel-divider-color)}section.slide img:not(.loading){opacity:1}:host{--max-slide-size: 150px;display:flex;flex-flow:column;height:100%}:host section h2{font-size:var(--font-title);font-weight:var(--font-weight-normal);margin:0;margin-bottom:var(--app-pane-padding);padding:calc(var(--app-pane-padding) / 2) var(--app-pane-padding);border-bottom:1px solid var(--panel-divider-color)}:host .content{padding-top:var(--app-pane-padding);flex:1;overflow-y:auto;width:100%;display:flex;flex-flow:column;align-items:center}:host .content>*:not(:first-child){margin:var(--app-pane-padding) 0}:host section.properties{gap:1rem;border:1px solid var(--panel-divider-color);width:80%;background-color:var(--panel-background-lightgrey)}:host section.properties .flavour-groups{display:flex;flex-flow:column}:host section.properties .row{display:flex;flex-flow:row wrap;align-items:start;column-gap:1rem;margin-block-end:calc(var(--app-pane-padding) / 2);padding:0 var(--app-pane-padding)}:host section.properties .row .label{font-weight:700;font-size:var(--font-caption)}:host section.properties .row .value{word-break:break-all}:host section.flavor.properties>*:not(:first-child){padding:var(--app-pane-padding) 0}:host section.flavor.properties>*:not(:first-child) h2{border-top:1px solid var(--panel-divider-color)}\n"], dependencies: [{ kind: "directive", type: RendererDirective, selector: "[yuvRenderer]", inputs: ["yuvRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ObjectSummaryDataComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-object-summary-data', standalone: true, imports: [RendererDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let flavors = flavorData();\n\n<div class=\"content\">\n  @if (flavors.length > 0) {\n    <section class=\"flavor properties\">\n      @for (flavor of flavors; track $index) {\n        <div class=\"flavour-groups\">\n          <h2>{{ flavor.label }}</h2>\n          @for (property of flavor.properties; track $index) {\n            <div class=\"row\">\n              <div class=\"label\">{{ property.label }}</div>\n              <div class=\"value\">\n                <ng-container *yuvRenderer=\"property.value\"></ng-container>\n              </div>\n            </div>\n          }\n        </div>\n      }\n    </section>\n  }\n\n  @let base = baseData();\n  @if (base) {\n    <section class=\"base properties\">\n      <h2>BASE</h2>\n      @for (p of base; track $index) {\n        <div class=\"row\">\n          <div class=\"label\">{{ p.label }}</div>\n          <div class=\"value\">\n            <ng-container *yuvRenderer=\"p.value\"></ng-container>\n          </div>\n        </div>\n      }\n    </section>\n  }\n</div>\n", styles: ["section.title{padding:var(--app-pane-padding);display:flex;justify-content:space-between;align-items:center;gap:var(--app-pane-padding)}section.title h1{margin:0;padding:0;font-size:var(--font-title);font-weight:400;text-overflow:ellipsis;overflow:hidden}section.title .actions yvc-icon{--icon-size: 18px}section.title .actions button.quickAccess.isFavorite{color:var(--color-accent)}section.slide{display:flex;flex-flow:column;align-items:center;justify-content:center;border-block-end:1px solid var(--panel-divider-color);background-color:var(--panel-background-grey);position:relative;height:25%;overflow:hidden}section.slide .badge{position:absolute;inset-inline-end:calc(var(--app-pane-padding) / 2);inset-block-start:calc(var(--app-pane-padding) / 2);font-size:3rem;color:var(--text-color-hint)}section.slide yvc-icon{max-height:var(--max-slide-size);max-width:var(--max-slide-size);width:50%;height:50%;opacity:.3}section.slide img{object-fit:cover;object-position:top;opacity:0;transition:opacity .3s;margin:auto;max-height:100%;max-width:100%;outline:4px solid var(--panel-background);outline-offset:-4px;box-shadow:0 0 0 1px var(--panel-divider-color)}section.slide img:not(.loading){opacity:1}:host{--max-slide-size: 150px;display:flex;flex-flow:column;height:100%}:host section h2{font-size:var(--font-title);font-weight:var(--font-weight-normal);margin:0;margin-bottom:var(--app-pane-padding);padding:calc(var(--app-pane-padding) / 2) var(--app-pane-padding);border-bottom:1px solid var(--panel-divider-color)}:host .content{padding-top:var(--app-pane-padding);flex:1;overflow-y:auto;width:100%;display:flex;flex-flow:column;align-items:center}:host .content>*:not(:first-child){margin:var(--app-pane-padding) 0}:host section.properties{gap:1rem;border:1px solid var(--panel-divider-color);width:80%;background-color:var(--panel-background-lightgrey)}:host section.properties .flavour-groups{display:flex;flex-flow:column}:host section.properties .row{display:flex;flex-flow:row wrap;align-items:start;column-gap:1rem;margin-block-end:calc(var(--app-pane-padding) / 2);padding:0 var(--app-pane-padding)}:host section.properties .row .label{font-weight:700;font-size:var(--font-caption)}:host section.properties .row .value{word-break:break-all}:host section.flavor.properties>*:not(:first-child){padding:var(--app-pane-padding) 0}:host section.flavor.properties>*:not(:first-child) h2{border-top:1px solid var(--panel-divider-color)}\n"] }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MultiObjectSummaryComponent, ObjectSummaryComponent, ObjectSummaryDataComponent, ObjectSummaryModule };
+//# sourceMappingURL=yuuvis-client-framework-object-summary.mjs.map

package/fesm2022/yuuvis-client-framework-object-summary.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"yuuvis-client-framework-object-summary.mjs","sources":["../../../../../libs/yuuvis/client-framework/object-summary/src/lib/object-summary.module.ts","../../../../../libs/yuuvis/client-framework/object-summary/src/lib/object-summary/object-summary.component.ts","../../../../../libs/yuuvis/client-framework/object-summary/src/lib/object-summary/object-summary.component.html","../../../../../libs/yuuvis/client-framework/object-summary/src/lib/multi-object-summary/multi-object-summary.component.ts","../../../../../libs/yuuvis/client-framework/object-summary/src/lib/object-summary-data/object-summary-data.component.ts","../../../../../libs/yuuvis/client-framework/object-summary/src/lib/object-summary-data/object-summary-data.component.html","../../../../../libs/yuuvis/client-framework/object-summary/src/yuuvis-client-framework-object-summary.ts"],"sourcesContent":["import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\n@NgModule({\n  imports: [CommonModule]\n})\nexport class ObjectSummaryModule {}\n","import { NgClass } from '@angular/common';\nimport { ChangeDetectorRef, Component, effect, inject, input, signal, untracked, viewChild } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport {\n  BaseObjectTypeField,\n  ConfigTypeOption,\n  ContentStreamField,\n  DmsObject,\n  DmsService,\n  EventService,\n  ObjectConfigRecord,\n  ObjectConfigService,\n  Operator,\n  ResolvedObjectConfig,\n  SearchQuery,\n  SearchService,\n  SystemService,\n  TranslateModule,\n  TranslateService,\n  VirtualObjectType,\n  YuvEvent,\n  YuvEventType\n} from '@yuuvis/client-core';\nimport { BusyOverlayDirective } from '@yuuvis/client-framework/common';\nimport { YUV_ICONS } from '@yuuvis/client-framework/icons';\nimport { ObjectFlavorComponent } from '@yuuvis/client-framework/object-flavor';\nimport { RendererDirective, RendererDirectiveInput } from '@yuuvis/client-framework/renderer';\nimport { ObjectFlavor } from '@yuuvis/client-shell-core';\nimport { YvcIconModule } from '@yuuvis/components/icon';\nimport { MenuItem, YvcOverflowMenuComponent } from '@yuuvis/components/overflow-menu';\nimport { YvcOverlayModule } from '@yuuvis/components/overlay';\n\n/**\n * Component showing a summary of the given dms object.\n */\n@Component({\n  selector: 'yuv-object-summary',\n  standalone: true,\n  imports: [\n    NgClass,\n    BusyOverlayDirective,\n    TranslateModule,\n    RendererDirective,\n    ObjectFlavorComponent,\n    YvcOverlayModule,\n    YvcIconModule,\n    YvcOverflowMenuComponent\n  ],\n  templateUrl: './object-summary.component.html',\n  styleUrl: './object-summary.component.scss',\n  hostDirectives: [\n    {\n      directive: BusyOverlayDirective,\n      inputs: ['yuvBusyOverlay: busy']\n    }\n  ]\n})\nexport class ObjectSummaryComponent {\n  readonly #eventService = inject(EventService);\n  readonly #dmsService = inject(DmsService);\n  private readonly translate = inject(TranslateService);\n  readonly #systemService = inject(SystemService);\n  readonly #objectConfigService = inject(ObjectConfigService);\n  readonly #searchService = inject(SearchService);\n  readonly #cd = inject(ChangeDetectorRef);\n\n  flavorCmp = viewChild(ObjectFlavorComponent);\n\n  #oc?: ObjectConfigRecord;\n\n  slide = signal<{\n    icon?: {\n      src?: string;\n      svg?: string;\n      title?: string;\n    };\n    uri?: string;\n    loading: boolean;\n    orientation?: 'portrait' | 'landscape';\n  }>({\n    loading: false\n  });\n  busy = true;\n\n  contextError?: string;\n  headerData = signal<\n    | {\n        icon?: {\n          src?: string;\n          svg?: string;\n          title?: string;\n        };\n        title?: string;\n        description?: string;\n      }\n    | undefined\n  >(undefined);\n\n  baseData: {\n    label: string;\n    value: RendererDirectiveInput;\n  }[] = [];\n\n  flavorData?: {\n    flavor: ObjectFlavor;\n    label: string;\n    properties: {\n      label: string;\n      value: RendererDirectiveInput;\n    }[];\n  };\n\n  icons = {\n    folder: YUV_ICONS.folder\n  };\n\n  actions = input<MenuItem[]>([]);\n  folderInfo?: {\n    size: number;\n    entries: {\n      key: string;\n      count: number;\n    }[];\n  };\n\n  /**\n   * DmsObject to show the details for.\n   */\n\n  dmsObject = signal<DmsObject | undefined>(undefined);\n\n  dmsObjectInput = input<DmsObject | undefined>(undefined, { alias: 'dmsObject' });\n  #dmsObjectInputEffect = effect(() => {\n    const dmsObject = this.dmsObjectInput();\n    const contentChanged = this.dmsObject()?.content?.contentStreamId !== dmsObject?.content?.contentStreamId;\n\n    untracked(() => {\n      this.dmsObject.set(dmsObject);\n      contentChanged && this.slide.update((slide) => ({ ...slide, uri: undefined, icon: undefined, iconSvg: undefined }));\n      if (dmsObject) {\n        this.#getHeaderData();\n        this.#getBaseData();\n        (contentChanged || dmsObject.isFolder) && this.#setupSlide();\n        this.folderInfo = undefined;\n\n        if (dmsObject.isFolder) this.#fetchFolderInfo(dmsObject.id);\n\n        // if a flavor has been selected and a new object comes in, we'll check if\n        // the new object has the same flavor and update the flavor data\n        if (this.flavorData && dmsObject.sots.includes(this.flavorData.flavor.sot)) {\n          this.#getFlavorData(this.flavorData.flavor);\n        } else this.flavorData = undefined;\n\n        //   this.retentionEndDate = this._dmsObject.data[RetentionField.RETENTION_END]\n        //     ? new Date(this._dmsObject.data[RetentionField.RETENTION_END] as string)\n        //     : undefined;\n        //   const today = new Date();\n        //   this.retentionEnded = this.retentionEndDate && today > this.retentionEndDate;\n      } else {\n        this.flavorData = undefined;\n      }\n    });\n  });\n\n  /**\n   * ID of a DmsObject. The object will be fetched from the backend upfront.\n   */\n  objectId = input<string | undefined | null>(null);\n  #objectIdEffect = effect(() => {\n    const id = this.objectId();\n    untracked(() => {\n      id && this.#getDmsObject(id);\n    });\n  });\n\n  // virtual object type to be used for header data\n  configType = input<ConfigTypeOption>();\n\n  constructor() {\n    this.#objectConfigService\n      .getObjectConfigs$(undefined, true)\n      .pipe(takeUntilDestroyed())\n      .subscribe((res: ObjectConfigRecord) => {\n        this.#oc = res;\n        const dmsObject = this.dmsObject();\n        if (dmsObject) this.#getHeaderData();\n      });\n    this.#eventService\n      .on(YuvEventType.DMS_OBJECT_UPDATED)\n      .pipe(takeUntilDestroyed())\n      .subscribe((e: YuvEvent) => {\n        const o = e.data as DmsObject;\n        const dmsObject = this.dmsObject();\n        if (dmsObject?.id === o.id) {\n          this.dmsObject.set(o);\n        }\n      });\n  }\n\n  #setupSlide() {\n    const dmsObject = this.dmsObject();\n    if (dmsObject) {\n      if (dmsObject.content) {\n        const slideUri = this.#dmsService.getSlideURI(dmsObject.id, dmsObject.content?.mimeType);\n        if (slideUri) {\n          this.slide.update((slide) => ({ ...slide, loading: true }));\n          const img = new Image();\n          img.onload = () => {\n            this.slide.update((slide) => ({\n              ...slide,\n              orientation: img.width > img.height ? 'landscape' : 'portrait',\n              uri: `${slideUri}?${new Date().getTime()}`, // add Timestamp to force image reload\n              loading: false\n            }));\n            this.#cd.markForCheck();\n          };\n          img.onerror = () => {\n            const headerData = this.headerData();\n            this.slide.update((slide) => ({ ...slide, icon: headerData?.icon, loading: false }));\n            this.#cd.markForCheck();\n          };\n          img.src = slideUri;\n        }\n      } else {\n        const headerData = this.headerData();\n        this.slide.update((slide) => ({ ...slide, icon: headerData?.icon }));\n      }\n    }\n  }\n\n  onFlavorClick(flavor: ObjectFlavor) {\n    this.#getFlavorData(flavor);\n  }\n\n  #fetchFolderInfo(id: string) {\n    const q: SearchQuery = {\n      fields: [`SUM(${ContentStreamField.LENGTH})`],\n      aggs: [BaseObjectTypeField.BASE_TYPE_ID],\n      filters: [{\n        f: BaseObjectTypeField.PARENT_ID,\n        o: Operator.EQUAL,\n        v1: id\n      }]\n    };\n    this.#searchService.aggregate(q, [BaseObjectTypeField.BASE_TYPE_ID]).subscribe((res) => {\n      const entries = res.aggregations[0].entries;\n      this.folderInfo = {\n        size: entries.reduce((s, v) => s + v.count, 0),\n        entries\n      };\n    });\n  }\n\n  #getDmsObject(id: string) {\n    this.busy = true;\n    this.#dmsService.getDmsObject(id).subscribe({\n      next: (dmsObject) => this.dmsObject.set(dmsObject),\n      error: () => {\n        this.dmsObject.set(undefined);\n        this.contextError = this.translate.instant('yuv.object-summary.load.error');\n      },\n      complete: () => {\n        this.busy = false;\n      }\n    });\n  }\n\n  #getObjectConfig(type?: VirtualObjectType, bucket?: string): ResolvedObjectConfig | undefined {\n    const dmsObject = this.dmsObject();\n    return dmsObject\n      ? this.#objectConfigService.getResolvedObjectConfig(\n          dmsObject.data,\n          type || {\n            id: dmsObject.objectTypeId,\n            objectType: dmsObject.objectTypeId\n          },\n          bucket,\n          true\n        )\n      : undefined;\n  }\n\n  #getFlavorData(flavor: ObjectFlavor) {\n    if (!flavor) {\n      this.flavorData = undefined;\n      return;\n    }\n    const sot = this.#systemService.getSecondaryObjectType(flavor.sot, true);\n    const dmsObject = this.dmsObject();\n    if (dmsObject && sot) {\n      this.flavorData = {\n        flavor,\n        label: this.translate.instant(flavor.id),\n        properties: sot.fields.map((f) => ({\n          label: this.#systemService.getLocalizedLabel(f.id) || f.id,\n          value: {\n            propertyName: f.id,\n            value: dmsObject.data[f.id]\n          }\n        }))\n      };\n    } else this.flavorData = undefined;\n  }\n\n  #getHeaderData() {\n    const oc = this.#getObjectConfig(this.configType()?.type, this.configType()?.bucket);\n    const dmsObject = this.dmsObject();\n    if (oc && dmsObject) {\n      this.headerData.update((data) => ({\n        ...data,\n        title: oc.title.value,\n        description: oc.description?.value,\n        icon: {\n          title: oc.title.value,\n          ...(oc.icon ? { svg: oc.icon.value } : { src: this.#systemService.getObjectTypeIconUri(dmsObject.objectTypeId) })\n        }\n      }));\n\n      // this.headerData.icon =;\n    } else this.headerData.set(undefined);\n  }\n\n  #getBaseData() {\n    this.baseData = [];\n\n    const fields = [\n      BaseObjectTypeField.CREATION_DATE,\n      `${BaseObjectTypeField.CREATED_BY}_title`,\n      BaseObjectTypeField.MODIFICATION_DATE,\n      `${BaseObjectTypeField.MODIFIED_BY}_title`\n    ];\n    const contentFields = [ContentStreamField.FILENAME, ContentStreamField.LENGTH, ContentStreamField.MIME_TYPE];\n    const dmsObject = this.dmsObject();\n    if (dmsObject) {\n      (dmsObject.content ? [...fields, ...contentFields] : fields).forEach((f) => {\n        this.baseData.push({\n          label: this.#systemService.getLocalizedLabel(f.replace('_title', '')) || f,\n          value: {\n            propertyName: f,\n            value: dmsObject.data[f]\n          }\n        });\n      });\n    }\n  }\n}\n","@let imageSlide = slide();\n<section class=\"slide\" [yuvBusyOverlay]=\"imageSlide.loading\">\n  @if (imageSlide.uri || imageSlide.loading) {\n    <img draggable=\"false\" [ngClass]=\"{ loading: imageSlide.loading }\" [attr.data-orientation]=\"imageSlide.orientation\" [src]=\"imageSlide.uri\" />\n  } @else if (imageSlide.icon?.svg) {\n    <yvc-icon draggable=\"false\" [svg]=\"imageSlide.icon?.svg!\"></yvc-icon>\n  } @else if (imageSlide.icon?.src) {\n    <yvc-icon draggable=\"false\" [svgSrc]=\"imageSlide.icon?.src!\"></yvc-icon>\n  }\n  @if (folderInfo) {\n    <div class=\"badge\">{{ folderInfo.size }}</div>\n  }\n</section>\n\n@let o = dmsObject();\n@if (o && !o.isFolder) {\n  <yuv-object-flavor [dmsObject]=\"o\" (flavorClick)=\"onFlavorClick($event)\"></yuv-object-flavor>\n}\n\n<div class=\"content\">\n  @let header = headerData();\n  <section class=\"title\">\n    <h1>{{ header?.title }}</h1>\n\n    <div class=\"actions\">\n      <yvc-overflow-menu [hideLabels]=\"true\" [menuItems]=\"actions()\"></yvc-overflow-menu>\n    </div>\n  </section>\n\n  @if (flavorData) {\n    <section class=\"flavor properties\">\n      <!-- <h2>{{ flavorData.label }}</h2> -->\n      @for (p of flavorData.properties; track $index) {\n        <div class=\"row\">\n          <div class=\"label\">{{ p.label }}</div>\n          <div class=\"value\">\n            <ng-container *yuvRenderer=\"p.value\"></ng-container>\n          </div>\n        </div>\n      }\n    </section>\n  }\n\n  <section class=\"properties\">\n    @for (p of baseData; track $index) {\n      <div class=\"row\">\n        <div class=\"label\">{{ p.label }}</div>\n        <div class=\"value\">\n          <ng-container *yuvRenderer=\"p.value\"></ng-container>\n        </div>\n      </div>\n    }\n  </section>\n</div>\n","import { ChangeDetectionStrategy, Component, input, signal } from '@angular/core';\nimport { YvcIconModule } from '@yuuvis/components/icon';\n\n@Component({\n  selector: 'yuv-multi-object-summary',\n  standalone: true,\n  imports: [YvcIconModule],\n  template: `\n    <section class=\"slide\">\n      <yvc-icon [svg]=\"icon()\"></yvc-icon>\n    </section>\n\n    <section class=\"title\">\n      <h1>{{ headline() }}</h1>\n    </section>\n  `,\n  styleUrl: './multi-object-summary.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class MultiObjectSummaryComponent {\n  icon = signal(\n    '<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"#5f6368\" viewBox=\"0 -960 960 960\"><path d=\"m200-120-80-480h720l-80 480H200Zm67-80h426l51-320H216l51 320Zm133-160h160q17 0 28.5-11.5T600-400q0-17-11.5-28.5T560-440H400q-17 0-28.5 11.5T360-400q0 17 11.5 28.5T400-360ZM240-640q-17 0-28.5-11.5T200-680q0-17 11.5-28.5T240-720h480q17 0 28.5 11.5T760-680q0 17-11.5 28.5T720-640H240Zm80-120q-17 0-28.5-11.5T280-800q0-17 11.5-28.5T320-840h320q17 0 28.5 11.5T680-800q0 17-11.5 28.5T640-760H320Zm-53 560h426-426Z\"/></svg>'\n  );\n\n  headline = input<string>('this could be your headline');\n}\n","import { ChangeDetectionStrategy, Component, effect, inject, input, signal, untracked } from '@angular/core';\nimport { BaseObjectTypeField, ContentStreamField, DmsObject, SystemService, TranslateService } from '@yuuvis/client-core';\nimport { RendererDirective } from '@yuuvis/client-framework/renderer';\nimport { ShellService } from '@yuuvis/client-shell-core';\n\n@Component({\n  selector: 'yuv-object-summary-data',\n  standalone: true,\n  imports: [RendererDirective],\n  templateUrl: './object-summary-data.component.html',\n  styleUrl: './object-summary-data.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class ObjectSummaryDataComponent {\n  readonly #shell = inject(ShellService);\n  readonly #systemService = inject(SystemService);\n  readonly translate = inject(TranslateService);\n\n  dmsObject = input.required<DmsObject>();\n\n  baseData = signal<any[]>([]);\n  flavorData = signal<any[]>([]);\n\n  #dmsObjectEffect = effect(() => {\n    const dmsObject = this.dmsObject();\n    if (dmsObject) {\n      untracked(() => {\n        this.#getBaseData();\n        this.#getAppliedFlavors(dmsObject);\n      });\n    }\n  });\n\n  #getBaseData() {\n    this.baseData.set([]);\n\n    const fields = [\n      BaseObjectTypeField.CREATION_DATE,\n      `${BaseObjectTypeField.CREATED_BY}_title`,\n      BaseObjectTypeField.MODIFICATION_DATE,\n      `${BaseObjectTypeField.MODIFIED_BY}_title`\n    ];\n    const contentFields = [ContentStreamField.FILENAME, ContentStreamField.LENGTH, ContentStreamField.MIME_TYPE];\n    const dmsObject = this.dmsObject();\n    if (dmsObject) {\n      (dmsObject.content ? [...fields, ...contentFields] : fields).forEach((f) => {\n        this.baseData.update((data) => [\n          ...data,\n          {\n            label: this.#systemService.getLocalizedLabel(f.replace('_title', '')) || f,\n            value: {\n              propertyName: f,\n              value: dmsObject.data[f]\n            }\n          }\n        ]);\n      });\n    }\n    console.log('baseData', this.baseData());\n  }\n\n  #getAppliedFlavors(dmsObject: DmsObject) {\n    this.flavorData.set([]);\n    const appliedFlavors = this.#shell.getAppliedObjectFlavors(dmsObject).applied;\n    for (const flavor of appliedFlavors) {\n      this.flavorData.update((data) => [\n        ...data,\n        {\n          flavor,\n          label: this.translate.instant(flavor.id),\n          properties: this.#systemService.getSecondaryObjectType(flavor.sot, true)?.fields.map((f) => ({\n            label: this.#systemService.getLocalizedLabel(f.id) || f.id,\n            value: {\n              propertyName: f.id,\n              value: dmsObject.data[f.id]\n            }\n          }))\n        }\n      ]);\n    }\n  }\n}\n","@let flavors = flavorData();\n\n<div class=\"content\">\n  @if (flavors.length > 0) {\n    <section class=\"flavor properties\">\n      @for (flavor of flavors; track $index) {\n        <div class=\"flavour-groups\">\n          <h2>{{ flavor.label }}</h2>\n          @for (property of flavor.properties; track $index) {\n            <div class=\"row\">\n              <div class=\"label\">{{ property.label }}</div>\n              <div class=\"value\">\n                <ng-container *yuvRenderer=\"property.value\"></ng-container>\n              </div>\n            </div>\n          }\n        </div>\n      }\n    </section>\n  }\n\n  @let base = baseData();\n  @if (base) {\n    <section class=\"base properties\">\n      <h2>BASE</h2>\n      @for (p of base; track $index) {\n        <div class=\"row\">\n          <div class=\"label\">{{ p.label }}</div>\n          <div class=\"value\">\n            <ng-container *yuvRenderer=\"p.value\"></ng-container>\n          </div>\n        </div>\n      }\n    </section>\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1"],"mappings":"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"}

package/fesm2022/yuuvis-client-framework-pagination.mjs

@@ -0,0 +1,55 @@
+import * as i0 from '@angular/core';
+import { inject, input, effect, output, Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import * as i1 from '@yuuvis/components/icon';
+import { YvcIconModule } from '@yuuvis/components/icon';
+import { YUV_ICONS } from '@yuuvis/client-framework/icons';
+import * as i2 from '@angular/forms';
+import { FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
+
+class PaginationComponent {
+    constructor() {
+        this.#fb = inject(FormBuilder);
+        this.pagination = input.required();
+        this.#paginationEffect = effect(() => {
+            const pageCtrl = this.pagingForm.get('page');
+            if (pageCtrl) {
+                pageCtrl.setValue(`${this.pagination().page}`);
+                pageCtrl.setValidators([Validators.required, Validators.pattern('[0-9]+'), Validators.min(1), Validators.max(this.pagination().pages)]);
+            }
+        });
+        this.pageChange = output();
+        this.pagingForm = this.#fb.group({ page: [''] });
+        this.icons = {
+            arrowNext: YUV_ICONS.arrowNext,
+            arrowLast: YUV_ICONS.arrowLast
+        };
+    }
+    #fb;
+    #paginationEffect;
+    onPagingFormSubmit() {
+        if (this.pagingForm.valid && this.pagingForm.value.page) {
+            this.pageChange.emit(parseInt(this.pagingForm.value.page));
+        }
+    }
+    onInputBlur() {
+        if (this.pagingForm.invalid) {
+            this.pagingForm.patchValue({
+                page: `${this.pagination().page}`
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: PaginationComponent, isStandalone: true, selector: "yuv-pagination", inputs: { pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<div class=\"total\">{{ pagination().total }}</div>\n<div class=\"controls\">\n  <button [disabled]=\"pagination().page === 1\" (click)=\"pageChange.emit(1)\">\n    <yvc-icon class=\"first\" [svg]=\"icons.arrowLast\"></yvc-icon>\n  </button>\n  <button [disabled]=\"pagination().page <= 1\" (click)=\"pageChange.emit(pagination().page - 1)\">\n    <yvc-icon class=\"prev\" [svg]=\"icons.arrowNext\"></yvc-icon>\n  </button>\n\n  <form (ngSubmit)=\"onPagingFormSubmit()\" [formGroup]=\"pagingForm\">\n    <input (blur)=\"onInputBlur()\" type=\"number\" formControlName=\"page\" />\n    <div>{{ pagination().pages }}</div>\n  </form>\n\n  <button [disabled]=\"pagination().page >= pagination().pages\" (click)=\"pageChange.emit(pagination().page + 1)\">\n    <yvc-icon class=\"next\" [svg]=\"icons.arrowNext\"></yvc-icon>\n  </button>\n  <button [disabled]=\"pagination().page === pagination().pages\" (click)=\"pageChange.emit(pagination().pages)\">\n    <yvc-icon class=\"last\" [svg]=\"icons.arrowLast\"></yvc-icon>\n  </button>\n</div>\n", styles: [":host{--_paging-button-size: var(--paging-button-size, 18px);--_paging-margin: var(--paging-margin, calc(var(--app-pane-padding) / 2));--_paging-padding: var(--paging-padding, calc(var(--app-pane-padding) / 4));--_paging-border: var(--paging-border-radius, 4px);--_paging-background: var(--paging-background, var(--panel-background));display:flex;justify-content:space-between;align-items:center;padding:var(--_paging-padding);background-color:var(--_paging-background);border-radius:var(--_paging-border-radius)}:host .controls{display:flex;justify-content:space-between;align-items:center}:host .total{font-size:var(--font-caption);color:var(--text-color-caption);padding-inline:.25em;line-height:1em}:host button{padding:0;display:flex;--icon-size: var(--_paging-button-size)}:host button .first,:host button .prev{transform:rotate(180deg)}:host form{display:flex;border:1px solid var(--panel-divider-color);margin:0 4px;align-items:baseline}:host form>*{font-size:var(--font-caption);color:var(--text-color-caption);padding-inline:.25em}:host form>div{-webkit-user-select:none;user-select:none}:host form input{width:3em;line-height:1em;text-align:right;border:0;background-color:transparent;border-inline-end:1px solid var(--panel-divider-color)}:host form input.ng-invalid{color:var(--color-error)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: YvcIconModule }, { kind: "component", type: i1.Icon, selector: "yvc-icon", inputs: ["label", "svg", "svgSrc"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PaginationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-pagination', standalone: true, imports: [CommonModule, YvcIconModule, ReactiveFormsModule], template: "<div class=\"total\">{{ pagination().total }}</div>\n<div class=\"controls\">\n  <button [disabled]=\"pagination().page === 1\" (click)=\"pageChange.emit(1)\">\n    <yvc-icon class=\"first\" [svg]=\"icons.arrowLast\"></yvc-icon>\n  </button>\n  <button [disabled]=\"pagination().page <= 1\" (click)=\"pageChange.emit(pagination().page - 1)\">\n    <yvc-icon class=\"prev\" [svg]=\"icons.arrowNext\"></yvc-icon>\n  </button>\n\n  <form (ngSubmit)=\"onPagingFormSubmit()\" [formGroup]=\"pagingForm\">\n    <input (blur)=\"onInputBlur()\" type=\"number\" formControlName=\"page\" />\n    <div>{{ pagination().pages }}</div>\n  </form>\n\n  <button [disabled]=\"pagination().page >= pagination().pages\" (click)=\"pageChange.emit(pagination().page + 1)\">\n    <yvc-icon class=\"next\" [svg]=\"icons.arrowNext\"></yvc-icon>\n  </button>\n  <button [disabled]=\"pagination().page === pagination().pages\" (click)=\"pageChange.emit(pagination().pages)\">\n    <yvc-icon class=\"last\" [svg]=\"icons.arrowLast\"></yvc-icon>\n  </button>\n</div>\n", styles: [":host{--_paging-button-size: var(--paging-button-size, 18px);--_paging-margin: var(--paging-margin, calc(var(--app-pane-padding) / 2));--_paging-padding: var(--paging-padding, calc(var(--app-pane-padding) / 4));--_paging-border: var(--paging-border-radius, 4px);--_paging-background: var(--paging-background, var(--panel-background));display:flex;justify-content:space-between;align-items:center;padding:var(--_paging-padding);background-color:var(--_paging-background);border-radius:var(--_paging-border-radius)}:host .controls{display:flex;justify-content:space-between;align-items:center}:host .total{font-size:var(--font-caption);color:var(--text-color-caption);padding-inline:.25em;line-height:1em}:host button{padding:0;display:flex;--icon-size: var(--_paging-button-size)}:host button .first,:host button .prev{transform:rotate(180deg)}:host form{display:flex;border:1px solid var(--panel-divider-color);margin:0 4px;align-items:baseline}:host form>*{font-size:var(--font-caption);color:var(--text-color-caption);padding-inline:.25em}:host form>div{-webkit-user-select:none;user-select:none}:host form input{width:3em;line-height:1em;text-align:right;border:0;background-color:transparent;border-inline-end:1px solid var(--panel-divider-color)}:host form input.ng-invalid{color:var(--color-error)}\n"] }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { PaginationComponent };
+//# sourceMappingURL=yuuvis-client-framework-pagination.mjs.map

package/fesm2022/yuuvis-client-framework-pagination.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"yuuvis-client-framework-pagination.mjs","sources":["../../../../../libs/yuuvis/client-framework/pagination/src/lib/pagination.component.ts","../../../../../libs/yuuvis/client-framework/pagination/src/lib/pagination.component.html","../../../../../libs/yuuvis/client-framework/pagination/src/yuuvis-client-framework-pagination.ts"],"sourcesContent":["import { Component, effect, inject, input, output } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { Pagination } from './pagination.interface';\nimport { YvcIconModule } from '@yuuvis/components/icon';\nimport { YUV_ICONS } from '@yuuvis/client-framework/icons';\nimport { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';\n\n@Component({\n  selector: 'yuv-pagination',\n  standalone: true,\n  imports: [CommonModule, YvcIconModule, ReactiveFormsModule],\n  templateUrl: './pagination.component.html',\n  styleUrl: './pagination.component.scss'\n})\nexport class PaginationComponent {\n  #fb = inject(FormBuilder);\n  pagination = input.required<Pagination>();\n  #paginationEffect = effect(() => {\n    const pageCtrl = this.pagingForm.get('page');\n    if (pageCtrl) {\n      pageCtrl.setValue(`${this.pagination().page}`);\n      pageCtrl.setValidators([Validators.required, Validators.pattern('[0-9]+'), Validators.min(1), Validators.max(this.pagination().pages)]);\n    }\n  });\n\n  pageChange = output<number>();\n  pagingForm = this.#fb.group({ page: [''] });\n  readonly icons = {\n    arrowNext: YUV_ICONS.arrowNext,\n    arrowLast: YUV_ICONS.arrowLast\n  };\n\n  onPagingFormSubmit() {\n    if (this.pagingForm.valid && this.pagingForm.value.page) {\n      this.pageChange.emit(parseInt(this.pagingForm.value.page));\n    }\n  }\n\n  onInputBlur() {\n    if (this.pagingForm.invalid) {\n      this.pagingForm.patchValue({\n        page: `${this.pagination().page}`\n      });\n    }\n  }\n}\n","<div class=\"total\">{{ pagination().total }}</div>\n<div class=\"controls\">\n  <button [disabled]=\"pagination().page === 1\" (click)=\"pageChange.emit(1)\">\n    <yvc-icon class=\"first\" [svg]=\"icons.arrowLast\"></yvc-icon>\n  </button>\n  <button [disabled]=\"pagination().page <= 1\" (click)=\"pageChange.emit(pagination().page - 1)\">\n    <yvc-icon class=\"prev\" [svg]=\"icons.arrowNext\"></yvc-icon>\n  </button>\n\n  <form (ngSubmit)=\"onPagingFormSubmit()\" [formGroup]=\"pagingForm\">\n    <input (blur)=\"onInputBlur()\" type=\"number\" formControlName=\"page\" />\n    <div>{{ pagination().pages }}</div>\n  </form>\n\n  <button [disabled]=\"pagination().page >= pagination().pages\" (click)=\"pageChange.emit(pagination().page + 1)\">\n    <yvc-icon class=\"next\" [svg]=\"icons.arrowNext\"></yvc-icon>\n  </button>\n  <button [disabled]=\"pagination().page === pagination().pages\" (click)=\"pageChange.emit(pagination().pages)\">\n    <yvc-icon class=\"last\" [svg]=\"icons.arrowLast\"></yvc-icon>\n  </button>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}