ngx-edu-sharing-ui 10.0.16 → 10.0.17
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/esm2022/lib/mds-viewer/mds-viewer.component.mjs +9 -8
- package/esm2022/lib/mds-viewer/widget/mds-widget.component.mjs +20 -20
- package/esm2022/lib/pipes/node-title.pipe.mjs +2 -2
- package/esm2022/lib/util/helper.mjs +2 -2
- package/fesm2022/ngx-edu-sharing-ui.mjs +27 -26
- package/fesm2022/ngx-edu-sharing-ui.mjs.map +1 -1
- package/lib/mds-viewer/mds-viewer.component.d.ts +2 -2
- package/lib/mds-viewer/widget/mds-widget.component.d.ts +4 -4
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Pipe, Injectable, ViewChildren, InjectionToken, Optional, Inject, Directive, Input, Component, ViewChild, EventEmitter, Output, HostListener, HostBinding, NgModule, CUSTOM_ELEMENTS_SCHEMA, ContentChild,
|
|
2
|
+
import { Pipe, Injectable, ViewChildren, InjectionToken, Optional, Inject, Directive, Input, signal, computed, Component, ChangeDetectionStrategy, ViewChild, EventEmitter, Output, HostListener, HostBinding, NgModule, CUSTOM_ELEMENTS_SCHEMA, ContentChild, effect, ElementRef, SkipSelf } from '@angular/core';
|
|
3
3
|
import * as i3 from '@angular/common';
|
|
4
4
|
import { DatePipe, CommonModule } from '@angular/common';
|
|
5
5
|
import * as i7 from '@angular/material/core';
|
|
@@ -21,7 +21,7 @@ import * as i3$1 from '@angular/platform-browser';
|
|
|
21
21
|
import * as i1$2 from '@angular/material/progress-spinner';
|
|
22
22
|
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
|
23
23
|
import { transition, style, animate, state, trigger } from '@angular/animations';
|
|
24
|
-
import { isArray as isArray$1, isString } from 'lodash';
|
|
24
|
+
import { isArray as isArray$1, isString } from 'lodash-es';
|
|
25
25
|
import * as i3$2 from '@angular/material/menu';
|
|
26
26
|
import { MatMenuModule } from '@angular/material/menu';
|
|
27
27
|
import * as i5$1 from '@angular/material/button';
|
|
@@ -1959,23 +1959,30 @@ class MdsWidgetComponent {
|
|
|
1959
1959
|
* allow inline editing
|
|
1960
1960
|
*/
|
|
1961
1961
|
this.inlineEditing = 'auto';
|
|
1962
|
+
this.basicType = signal(null);
|
|
1963
|
+
this.isEmpty = computed(() => {
|
|
1964
|
+
if (this.basicType() === 'license') {
|
|
1965
|
+
return false;
|
|
1966
|
+
}
|
|
1967
|
+
return this.value()?.every((v) => !v) || this.value()?.length === 0 || !this.value();
|
|
1968
|
+
});
|
|
1962
1969
|
this.license$ = new BehaviorSubject(null);
|
|
1963
|
-
this.value = undefined;
|
|
1970
|
+
this.value = signal(undefined);
|
|
1964
1971
|
this.temporaryValue = undefined;
|
|
1965
1972
|
// super(toast, null, translate);
|
|
1966
1973
|
}
|
|
1967
1974
|
async ngOnChanges(changes) {
|
|
1968
|
-
this.value
|
|
1975
|
+
this.value.set(await this.getNodeValue());
|
|
1969
1976
|
}
|
|
1970
1977
|
async ngOnInit() {
|
|
1971
|
-
this.value
|
|
1978
|
+
this.value.set(await this.getNodeValue());
|
|
1972
1979
|
this.widget
|
|
1973
1980
|
.getInitialDisplayValues()
|
|
1974
1981
|
.pipe(filter((v) => !!v))
|
|
1975
1982
|
.subscribe(async (value) => {
|
|
1976
|
-
this.value
|
|
1983
|
+
this.value.set(value.values.map((v) => v.displayString));
|
|
1977
1984
|
});
|
|
1978
|
-
this.basicType
|
|
1985
|
+
this.basicType.set(this.getBasicType());
|
|
1979
1986
|
this.rawValue = await this.getRawValue().toPromise();
|
|
1980
1987
|
}
|
|
1981
1988
|
getDefinition() {
|
|
@@ -2020,7 +2027,6 @@ class MdsWidgetComponent {
|
|
|
2020
2027
|
return MdsWidgetComponent.inlineEditing.includes(this.widget?.definition.type);
|
|
2021
2028
|
}
|
|
2022
2029
|
getNodeValues() {
|
|
2023
|
-
console.log(this.mdsViewerService);
|
|
2024
2030
|
if (this.mdsEditorInstance) {
|
|
2025
2031
|
return (this.mdsEditorInstance.values$.value ||
|
|
2026
2032
|
this.mdsEditorInstance.nodes$.value.map((n) => n.properties));
|
|
@@ -2086,14 +2092,8 @@ class MdsWidgetComponent {
|
|
|
2086
2092
|
console.warn('Unsupported link type ' + this.getDefinition().link);
|
|
2087
2093
|
}
|
|
2088
2094
|
}
|
|
2089
|
-
isEmpty() {
|
|
2090
|
-
if (this.basicType === 'license') {
|
|
2091
|
-
return false;
|
|
2092
|
-
}
|
|
2093
|
-
return this.value?.every((v) => !v) || this.value?.length === 0 || !this.value;
|
|
2094
|
-
}
|
|
2095
2095
|
formatDate() {
|
|
2096
|
-
return this.value.map((v) => {
|
|
2096
|
+
return this.value().map((v) => {
|
|
2097
2097
|
if (this.getDefinition().format) {
|
|
2098
2098
|
try {
|
|
2099
2099
|
return new DatePipe('en').transform(v, this.getDefinition().format);
|
|
@@ -2113,7 +2113,7 @@ class MdsWidgetComponent {
|
|
|
2113
2113
|
});
|
|
2114
2114
|
}
|
|
2115
2115
|
formatNumber() {
|
|
2116
|
-
return this.value.map((v) => {
|
|
2116
|
+
return this.value().map((v) => {
|
|
2117
2117
|
if (this.widget.definition.format === 'bytes') {
|
|
2118
2118
|
return new FormatSizePipe(this.translate).transform(v);
|
|
2119
2119
|
}
|
|
@@ -2121,7 +2121,7 @@ class MdsWidgetComponent {
|
|
|
2121
2121
|
});
|
|
2122
2122
|
}
|
|
2123
2123
|
formatText() {
|
|
2124
|
-
return this.value.map((v) => {
|
|
2124
|
+
return this.value().map((v) => {
|
|
2125
2125
|
if (this.widget.definition.format) {
|
|
2126
2126
|
return this.widget.definition.format.replace('${value}', v);
|
|
2127
2127
|
}
|
|
@@ -2134,7 +2134,7 @@ class MdsWidgetComponent {
|
|
|
2134
2134
|
await this.mdsEditorInstance.saveWidgetValue(instance.widget);
|
|
2135
2135
|
}
|
|
2136
2136
|
this.temporaryValue = instance.widget.getValue();
|
|
2137
|
-
this.value
|
|
2137
|
+
this.value.set(await this.getNodeValue());
|
|
2138
2138
|
this.editWrapper.nativeElement.children[0].innerHTML = null;
|
|
2139
2139
|
await this.mdsEditorInstance.fetchDisplayValues(this.widget);
|
|
2140
2140
|
}
|
|
@@ -2212,11 +2212,11 @@ class MdsWidgetComponent {
|
|
|
2212
2212
|
void this.view.injectEditField(this, this.editWrapper.nativeElement.children[0]);
|
|
2213
2213
|
}
|
|
2214
2214
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: MdsWidgetComponent, deps: [{ token: i1.TranslateService }, { token: UIService }, { token: ViewInstanceService }, { token: MdsViewerService }, { token: NodeHelperService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2215
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: MdsWidgetComponent, selector: "es-mds-widget", inputs: { widget: "widget", showCaption: "showCaption", inlineEditing: "inlineEditing", definition: "definition", view: "view" }, viewQueries: [{ propertyName: "editWrapper", first: true, predicate: ["editWrapper"], descendants: true }, { propertyName: "matRipple", first: true, predicate: MatRipple, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<es-mds-editor-widget-container\n *ngIf=\"!editWrapper.innerText.trim()\"\n [injectedView]=\"this\"\n [widget]=\"widget\"\n [label]=\"false\"\n [wrapInFormField]=\"false\"\n [wrapInGroup]=\"false\"\n [valueType]=\"valueType\"\n matRipple\n [matRippleDisabled]=\"true\"\n>\n <div class=\"edit-wrapper\">\n <div\n *ngIf=\"!isEmpty() || !widget.definition.hideIfEmpty || isEditable()\"\n class=\"widget-wrapper\"\n >\n <div\n class=\"widget-label\"\n [attr.role]=\"headingLevel ? 'heading' : null\"\n [attr.aria-level]=\"headingLevel\"\n *ngIf=\"widget.definition.caption && showCaption\"\n >\n {{ widget.definition.caption\n }}<span *ngIf=\"!headingLevel\" class=\"cdk-visually-hidden\">: </span>\n </div>\n <div\n class=\"value-wrapper\"\n [class.value-wrapper-edit]=\"isEditable()\"\n (click)=\"isEditable() ? startEdit($event) : null\"\n >\n <div *ngIf=\"isEmpty()\" class=\"widget-data widget-no-data widget-type-{{ basicType }}\">\n -\n </div>\n <div\n *ngIf=\"!isEmpty()\"\n class=\"widget-data widget-type-{{ basicType }} {{\n widget.definition.link ? 'widget-link' : ''\n }}\"\n (click)=\"click()\"\n >\n <div *ngIf=\"basicType === 'text'\">{{ formatText() }}</div>\n <div *ngIf=\"basicType === 'number'\">{{ formatNumber() }}</div>\n <div *ngIf=\"basicType === 'date'\">{{ formatDate() }}</div>\n <div *ngIf=\"basicType === 'license' && (license$ | async) as license\">\n <img alt=\"\" [src]=\"license.icon\" /> {{ license.name }}\n </div>\n <div *ngIf=\"basicType === 'array'\">\n <div class=\"array-entry\" *ngFor=\"let v of value\">{{ v }}</div>\n </div>\n <div *ngIf=\"basicType === 'tree'\">\n <div class=\"tree-entry\" *ngFor=\"let v of rawValue\">\n <ng-container *ngTemplateOutlet=\"treeEntry; context: { path: v.path }\"></ng-container>\n </div>\n </div>\n <div *ngIf=\"basicType === 'vcard'\">\n <div class=\"array-entry\" *ngFor=\"let v of value\">{{ v | vcardName }}</div>\n </div>\n <div *ngIf=\"basicType === 'slider'\">\n <span class=\"slider-value\">{{ value }}</span\n ><span> / </span><span class=\"slider-max\">{{ widget.definition.max }}</span>\n </div>\n <div *ngIf=\"basicType === 'duration'\">\n <span class=\"duration-value\">{{ value[0] | appMdsDuration }}</span>\n </div>\n <div *ngIf=\"basicType === 'range'\">\n <span class=\"slider-value\">{{ value[0] }}</span\n >-<span class=\"slider-value\">{{ value[1] }}</span>\n </div>\n <div *ngIf=\"basicType === 'unknown'\">\n The widget type {{ widget.definition.type }} is currently not supported via angular\n rendering\n </div>\n </div>\n </div>\n </div>\n <!--<button mat-icon-button\n *ngIf=\"mdsEditorInstance.editorMode === 'inline' && widget.definition.interactionType === 'Input'\"\n (click)=\"view.injectEditField(this, edit)\"\n class=\"btn-edit\">\n <i esIcon=\"edit\"></i>\n </button>-->\n </div>\n</es-mds-editor-widget-container>\n<div class=\"edit-wrapper\">\n <div #editWrapper><div #edit></div></div>\n <!--<button *ngIf=\"!!editWrapper.innerText.trim()\" mat-icon-button><i esIcon=\"save\"></i></button>-->\n</div>\n<ng-template #treeEntry let-path=\"path\">\n <ng-container *ngFor=\"let t of path; let first = first\">\n <ng-container *ngIf=\"!first\">\n <span class=\"cdk-visually-hidden\">{{ 'SUB_CATEGORY_ARIA' | translate }}</span>\n <i esIcon=\"keyboard_arrow_right\" [aria]=\"false\"></i>\n </ng-container>\n <a\n [routerLink]=\"'/' + ROUTER_PREFIX + 'search'\"\n [queryParams]=\"getSearchParams(t)\"\n *ngIf=\"widget.definition.isSearchable\"\n >{{ t.caption }}</a\n >\n <span *ngIf=\"!widget.definition.isSearchable\">{{ t.caption }}</span>\n </ng-container>\n</ng-template>\n", styles: [".widget-label{font-size:90%;opacity:.8}.edit-wrapper{display:flex;align-items:center;transition:var(--transitionNormal) all}.edit-wrapper>div:first-child{flex-grow:1}.edit-wrapper>button{margin-left:10px}.edit-wrapper .widget-wrapper{padding:2px 5px}.edit-wrapper .value-wrapper-edit:hover{outline:1px solid #ccc;cursor:text}.widget-data{padding:4px 0 10px;word-break:break-word}.widget-data.widget-type-slider{opacity:.8}.widget-data.widget-type-slider .slider-value{opacity:.9;font-weight:700}.widget-data.widget-type-array .array-entry,.widget-data.widget-type-vcard .array-entry{display:inline}.widget-data.widget-type-array .array-entry:not(:last-child):after,.widget-data.widget-type-vcard .array-entry:not(:last-child):after{content:\", \";padding-right:.3em;display:inline;align-items:flex-end}.widget-data.widget-type-tree>div{display:flex;flex-wrap:wrap;gap:10px}.widget-data.widget-type-tree .tree-entry{display:inline-block;border-radius:5px;padding:5px 10px;background-color:#f9f9f9}.widget-data.widget-type-tree .tree-entry>a{color:var(--palette-primary-800);text-decoration:none}.widget-data.widget-type-tree .tree-entry>*{vertical-align:middle}.widget-data.widget-type-tree .tree-entry>i{font-size:18px}.widget-data.widget-link{text-decoration:underline;cursor:pointer}.widget-type-text>div{white-space:pre-line}:host ::ng-deep .edit-wrapper .widget-container mat-form-field{margin-top:.5em}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i7.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: IconDirective, selector: "i[esIcon], i.material-icons", inputs: ["altText", "aria", "esIcon"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: MdsDurationPipe, name: "appMdsDuration" }, { kind: "pipe", type: VCardNamePipe, name: "vcardName" }] }); }
|
|
2215
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: MdsWidgetComponent, selector: "es-mds-widget", inputs: { widget: "widget", showCaption: "showCaption", inlineEditing: "inlineEditing", definition: "definition", view: "view" }, viewQueries: [{ propertyName: "editWrapper", first: true, predicate: ["editWrapper"], descendants: true }, { propertyName: "matRipple", first: true, predicate: MatRipple, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<es-mds-editor-widget-container\n *ngIf=\"!editWrapper.innerText.trim()\"\n [injectedView]=\"this\"\n [widget]=\"widget\"\n [label]=\"false\"\n [wrapInFormField]=\"false\"\n [wrapInGroup]=\"false\"\n [valueType]=\"valueType\"\n matRipple\n [matRippleDisabled]=\"true\"\n>\n <div class=\"edit-wrapper\">\n <div\n *ngIf=\"!isEmpty() || !widget.definition.hideIfEmpty || isEditable()\"\n class=\"widget-wrapper\"\n >\n <div\n class=\"widget-label\"\n [attr.role]=\"headingLevel ? 'heading' : null\"\n [attr.aria-level]=\"headingLevel\"\n *ngIf=\"widget.definition.caption && showCaption\"\n >\n {{ widget.definition.caption\n }}<span *ngIf=\"!headingLevel\" class=\"cdk-visually-hidden\">: </span>\n </div>\n <div\n class=\"value-wrapper\"\n [class.value-wrapper-edit]=\"isEditable()\"\n (click)=\"isEditable() ? startEdit($event) : null\"\n >\n <div *ngIf=\"isEmpty()\" class=\"widget-data widget-no-data widget-type-{{ basicType() }}\">\n -\n </div>\n <div\n *ngIf=\"!isEmpty()\"\n class=\"widget-data widget-type-{{ basicType() }} {{\n widget.definition.link ? 'widget-link' : ''\n }}\"\n (click)=\"click()\"\n >\n <div *ngIf=\"basicType() === 'text'\">{{ formatText() }}</div>\n <div *ngIf=\"basicType() === 'number'\">{{ formatNumber() }}</div>\n <div *ngIf=\"basicType() === 'date'\">{{ formatDate() }}</div>\n <div *ngIf=\"basicType() === 'license' && (license$ | async) as license\">\n <img alt=\"\" [src]=\"license.icon\" /> {{ license.name }}\n </div>\n <div *ngIf=\"basicType() === 'array'\">\n <div class=\"array-entry\" *ngFor=\"let v of value()\">{{ v }}</div>\n </div>\n <div *ngIf=\"basicType() === 'tree'\">\n <div class=\"tree-entry\" *ngFor=\"let v of rawValue\">\n <ng-container *ngTemplateOutlet=\"treeEntry; context: { path: v.path }\"></ng-container>\n </div>\n </div>\n <div *ngIf=\"basicType() === 'vcard'\">\n <div class=\"array-entry\" *ngFor=\"let v of value()\">{{ v | vcardName }}</div>\n </div>\n <div *ngIf=\"basicType() === 'slider'\">\n <span class=\"slider-value\">{{ value }}</span\n ><span> / </span><span class=\"slider-max\">{{ widget.definition.max }}</span>\n </div>\n <div *ngIf=\"basicType() === 'duration'\">\n <span class=\"duration-value\">{{ value()[0] | appMdsDuration }}</span>\n </div>\n <div *ngIf=\"basicType() === 'range'\">\n <span class=\"slider-value\">{{ value()[0] }}</span\n >-<span class=\"slider-value\">{{ value()[1] }}</span>\n </div>\n <div *ngIf=\"basicType() === 'unknown'\">\n The widget type {{ widget.definition.type }} is currently not supported via angular\n rendering\n </div>\n </div>\n </div>\n </div>\n <!--<button mat-icon-button\n *ngIf=\"mdsEditorInstance.editorMode === 'inline' && widget.definition.interactionType === 'Input'\"\n (click)=\"view.injectEditField(this, edit)\"\n class=\"btn-edit\">\n <i esIcon=\"edit\"></i>\n </button>-->\n </div>\n</es-mds-editor-widget-container>\n<div class=\"edit-wrapper\">\n <div #editWrapper><div #edit></div></div>\n <!--<button *ngIf=\"!!editWrapper.innerText.trim()\" mat-icon-button><i esIcon=\"save\"></i></button>-->\n</div>\n<ng-template #treeEntry let-path=\"path\">\n <ng-container *ngFor=\"let t of path; let first = first\">\n <ng-container *ngIf=\"!first\">\n <span class=\"cdk-visually-hidden\">{{ 'SUB_CATEGORY_ARIA' | translate }}</span>\n <i esIcon=\"keyboard_arrow_right\" [aria]=\"false\"></i>\n </ng-container>\n <a\n [routerLink]=\"'/' + ROUTER_PREFIX + 'search'\"\n [queryParams]=\"getSearchParams(t)\"\n *ngIf=\"widget.definition.isSearchable\"\n >{{ t.caption }}</a\n >\n <span *ngIf=\"!widget.definition.isSearchable\">{{ t.caption }}</span>\n </ng-container>\n</ng-template>\n", styles: [".widget-label{font-size:90%;opacity:.8}.edit-wrapper{display:flex;align-items:center;transition:var(--transitionNormal) all}.edit-wrapper>div:first-child{flex-grow:1}.edit-wrapper>button{margin-left:10px}.edit-wrapper .widget-wrapper{padding:2px 5px}.edit-wrapper .value-wrapper-edit:hover{outline:1px solid #ccc;cursor:text}.widget-data{padding:4px 0 10px;word-break:break-word}.widget-data.widget-type-slider{opacity:.8}.widget-data.widget-type-slider .slider-value{opacity:.9;font-weight:700}.widget-data.widget-type-array .array-entry,.widget-data.widget-type-vcard .array-entry{display:inline}.widget-data.widget-type-array .array-entry:not(:last-child):after,.widget-data.widget-type-vcard .array-entry:not(:last-child):after{content:\", \";padding-right:.3em;display:inline;align-items:flex-end}.widget-data.widget-type-tree>div{display:flex;flex-wrap:wrap;gap:10px}.widget-data.widget-type-tree .tree-entry{display:inline-block;border-radius:5px;padding:5px 10px;background-color:#f9f9f9}.widget-data.widget-type-tree .tree-entry>a{color:var(--palette-primary-800);text-decoration:none}.widget-data.widget-type-tree .tree-entry>*{vertical-align:middle}.widget-data.widget-type-tree .tree-entry>i{font-size:18px}.widget-data.widget-link{text-decoration:underline;cursor:pointer}.widget-type-text>div{white-space:pre-line}:host ::ng-deep .edit-wrapper .widget-container mat-form-field{margin-top:.5em}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i7.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: IconDirective, selector: "i[esIcon], i.material-icons", inputs: ["altText", "aria", "esIcon"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: MdsDurationPipe, name: "appMdsDuration" }, { kind: "pipe", type: VCardNamePipe, name: "vcardName" }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
|
|
2216
2216
|
}
|
|
2217
2217
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: MdsWidgetComponent, decorators: [{
|
|
2218
2218
|
type: Component,
|
|
2219
|
-
args: [{ selector: 'es-mds-widget', template: "<es-mds-editor-widget-container\n *ngIf=\"!editWrapper.innerText.trim()\"\n [injectedView]=\"this\"\n [widget]=\"widget\"\n [label]=\"false\"\n [wrapInFormField]=\"false\"\n [wrapInGroup]=\"false\"\n [valueType]=\"valueType\"\n matRipple\n [matRippleDisabled]=\"true\"\n>\n <div class=\"edit-wrapper\">\n <div\n *ngIf=\"!isEmpty() || !widget.definition.hideIfEmpty || isEditable()\"\n class=\"widget-wrapper\"\n >\n <div\n class=\"widget-label\"\n [attr.role]=\"headingLevel ? 'heading' : null\"\n [attr.aria-level]=\"headingLevel\"\n *ngIf=\"widget.definition.caption && showCaption\"\n >\n {{ widget.definition.caption\n }}<span *ngIf=\"!headingLevel\" class=\"cdk-visually-hidden\">: </span>\n </div>\n <div\n class=\"value-wrapper\"\n [class.value-wrapper-edit]=\"isEditable()\"\n (click)=\"isEditable() ? startEdit($event) : null\"\n >\n <div *ngIf=\"isEmpty()\" class=\"widget-data widget-no-data widget-type-{{ basicType }}\">\n -\n </div>\n <div\n *ngIf=\"!isEmpty()\"\n class=\"widget-data widget-type-{{ basicType }} {{\n widget.definition.link ? 'widget-link' : ''\n }}\"\n (click)=\"click()\"\n >\n <div *ngIf=\"basicType === 'text'\">{{ formatText() }}</div>\n <div *ngIf=\"basicType === 'number'\">{{ formatNumber() }}</div>\n <div *ngIf=\"basicType === 'date'\">{{ formatDate() }}</div>\n <div *ngIf=\"basicType === 'license' && (license$ | async) as license\">\n <img alt=\"\" [src]=\"license.icon\" /> {{ license.name }}\n </div>\n <div *ngIf=\"basicType === 'array'\">\n <div class=\"array-entry\" *ngFor=\"let v of value\">{{ v }}</div>\n </div>\n <div *ngIf=\"basicType === 'tree'\">\n <div class=\"tree-entry\" *ngFor=\"let v of rawValue\">\n <ng-container *ngTemplateOutlet=\"treeEntry; context: { path: v.path }\"></ng-container>\n </div>\n </div>\n <div *ngIf=\"basicType === 'vcard'\">\n <div class=\"array-entry\" *ngFor=\"let v of value\">{{ v | vcardName }}</div>\n </div>\n <div *ngIf=\"basicType === 'slider'\">\n <span class=\"slider-value\">{{ value }}</span\n ><span> / </span><span class=\"slider-max\">{{ widget.definition.max }}</span>\n </div>\n <div *ngIf=\"basicType === 'duration'\">\n <span class=\"duration-value\">{{ value[0] | appMdsDuration }}</span>\n </div>\n <div *ngIf=\"basicType === 'range'\">\n <span class=\"slider-value\">{{ value[0] }}</span\n >-<span class=\"slider-value\">{{ value[1] }}</span>\n </div>\n <div *ngIf=\"basicType === 'unknown'\">\n The widget type {{ widget.definition.type }} is currently not supported via angular\n rendering\n </div>\n </div>\n </div>\n </div>\n <!--<button mat-icon-button\n *ngIf=\"mdsEditorInstance.editorMode === 'inline' && widget.definition.interactionType === 'Input'\"\n (click)=\"view.injectEditField(this, edit)\"\n class=\"btn-edit\">\n <i esIcon=\"edit\"></i>\n </button>-->\n </div>\n</es-mds-editor-widget-container>\n<div class=\"edit-wrapper\">\n <div #editWrapper><div #edit></div></div>\n <!--<button *ngIf=\"!!editWrapper.innerText.trim()\" mat-icon-button><i esIcon=\"save\"></i></button>-->\n</div>\n<ng-template #treeEntry let-path=\"path\">\n <ng-container *ngFor=\"let t of path; let first = first\">\n <ng-container *ngIf=\"!first\">\n <span class=\"cdk-visually-hidden\">{{ 'SUB_CATEGORY_ARIA' | translate }}</span>\n <i esIcon=\"keyboard_arrow_right\" [aria]=\"false\"></i>\n </ng-container>\n <a\n [routerLink]=\"'/' + ROUTER_PREFIX + 'search'\"\n [queryParams]=\"getSearchParams(t)\"\n *ngIf=\"widget.definition.isSearchable\"\n >{{ t.caption }}</a\n >\n <span *ngIf=\"!widget.definition.isSearchable\">{{ t.caption }}</span>\n </ng-container>\n</ng-template>\n", styles: [".widget-label{font-size:90%;opacity:.8}.edit-wrapper{display:flex;align-items:center;transition:var(--transitionNormal) all}.edit-wrapper>div:first-child{flex-grow:1}.edit-wrapper>button{margin-left:10px}.edit-wrapper .widget-wrapper{padding:2px 5px}.edit-wrapper .value-wrapper-edit:hover{outline:1px solid #ccc;cursor:text}.widget-data{padding:4px 0 10px;word-break:break-word}.widget-data.widget-type-slider{opacity:.8}.widget-data.widget-type-slider .slider-value{opacity:.9;font-weight:700}.widget-data.widget-type-array .array-entry,.widget-data.widget-type-vcard .array-entry{display:inline}.widget-data.widget-type-array .array-entry:not(:last-child):after,.widget-data.widget-type-vcard .array-entry:not(:last-child):after{content:\", \";padding-right:.3em;display:inline;align-items:flex-end}.widget-data.widget-type-tree>div{display:flex;flex-wrap:wrap;gap:10px}.widget-data.widget-type-tree .tree-entry{display:inline-block;border-radius:5px;padding:5px 10px;background-color:#f9f9f9}.widget-data.widget-type-tree .tree-entry>a{color:var(--palette-primary-800);text-decoration:none}.widget-data.widget-type-tree .tree-entry>*{vertical-align:middle}.widget-data.widget-type-tree .tree-entry>i{font-size:18px}.widget-data.widget-link{text-decoration:underline;cursor:pointer}.widget-type-text>div{white-space:pre-line}:host ::ng-deep .edit-wrapper .widget-container mat-form-field{margin-top:.5em}\n"] }]
|
|
2219
|
+
args: [{ selector: 'es-mds-widget', changeDetection: ChangeDetectionStrategy.Default, template: "<es-mds-editor-widget-container\n *ngIf=\"!editWrapper.innerText.trim()\"\n [injectedView]=\"this\"\n [widget]=\"widget\"\n [label]=\"false\"\n [wrapInFormField]=\"false\"\n [wrapInGroup]=\"false\"\n [valueType]=\"valueType\"\n matRipple\n [matRippleDisabled]=\"true\"\n>\n <div class=\"edit-wrapper\">\n <div\n *ngIf=\"!isEmpty() || !widget.definition.hideIfEmpty || isEditable()\"\n class=\"widget-wrapper\"\n >\n <div\n class=\"widget-label\"\n [attr.role]=\"headingLevel ? 'heading' : null\"\n [attr.aria-level]=\"headingLevel\"\n *ngIf=\"widget.definition.caption && showCaption\"\n >\n {{ widget.definition.caption\n }}<span *ngIf=\"!headingLevel\" class=\"cdk-visually-hidden\">: </span>\n </div>\n <div\n class=\"value-wrapper\"\n [class.value-wrapper-edit]=\"isEditable()\"\n (click)=\"isEditable() ? startEdit($event) : null\"\n >\n <div *ngIf=\"isEmpty()\" class=\"widget-data widget-no-data widget-type-{{ basicType() }}\">\n -\n </div>\n <div\n *ngIf=\"!isEmpty()\"\n class=\"widget-data widget-type-{{ basicType() }} {{\n widget.definition.link ? 'widget-link' : ''\n }}\"\n (click)=\"click()\"\n >\n <div *ngIf=\"basicType() === 'text'\">{{ formatText() }}</div>\n <div *ngIf=\"basicType() === 'number'\">{{ formatNumber() }}</div>\n <div *ngIf=\"basicType() === 'date'\">{{ formatDate() }}</div>\n <div *ngIf=\"basicType() === 'license' && (license$ | async) as license\">\n <img alt=\"\" [src]=\"license.icon\" /> {{ license.name }}\n </div>\n <div *ngIf=\"basicType() === 'array'\">\n <div class=\"array-entry\" *ngFor=\"let v of value()\">{{ v }}</div>\n </div>\n <div *ngIf=\"basicType() === 'tree'\">\n <div class=\"tree-entry\" *ngFor=\"let v of rawValue\">\n <ng-container *ngTemplateOutlet=\"treeEntry; context: { path: v.path }\"></ng-container>\n </div>\n </div>\n <div *ngIf=\"basicType() === 'vcard'\">\n <div class=\"array-entry\" *ngFor=\"let v of value()\">{{ v | vcardName }}</div>\n </div>\n <div *ngIf=\"basicType() === 'slider'\">\n <span class=\"slider-value\">{{ value }}</span\n ><span> / </span><span class=\"slider-max\">{{ widget.definition.max }}</span>\n </div>\n <div *ngIf=\"basicType() === 'duration'\">\n <span class=\"duration-value\">{{ value()[0] | appMdsDuration }}</span>\n </div>\n <div *ngIf=\"basicType() === 'range'\">\n <span class=\"slider-value\">{{ value()[0] }}</span\n >-<span class=\"slider-value\">{{ value()[1] }}</span>\n </div>\n <div *ngIf=\"basicType() === 'unknown'\">\n The widget type {{ widget.definition.type }} is currently not supported via angular\n rendering\n </div>\n </div>\n </div>\n </div>\n <!--<button mat-icon-button\n *ngIf=\"mdsEditorInstance.editorMode === 'inline' && widget.definition.interactionType === 'Input'\"\n (click)=\"view.injectEditField(this, edit)\"\n class=\"btn-edit\">\n <i esIcon=\"edit\"></i>\n </button>-->\n </div>\n</es-mds-editor-widget-container>\n<div class=\"edit-wrapper\">\n <div #editWrapper><div #edit></div></div>\n <!--<button *ngIf=\"!!editWrapper.innerText.trim()\" mat-icon-button><i esIcon=\"save\"></i></button>-->\n</div>\n<ng-template #treeEntry let-path=\"path\">\n <ng-container *ngFor=\"let t of path; let first = first\">\n <ng-container *ngIf=\"!first\">\n <span class=\"cdk-visually-hidden\">{{ 'SUB_CATEGORY_ARIA' | translate }}</span>\n <i esIcon=\"keyboard_arrow_right\" [aria]=\"false\"></i>\n </ng-container>\n <a\n [routerLink]=\"'/' + ROUTER_PREFIX + 'search'\"\n [queryParams]=\"getSearchParams(t)\"\n *ngIf=\"widget.definition.isSearchable\"\n >{{ t.caption }}</a\n >\n <span *ngIf=\"!widget.definition.isSearchable\">{{ t.caption }}</span>\n </ng-container>\n</ng-template>\n", styles: [".widget-label{font-size:90%;opacity:.8}.edit-wrapper{display:flex;align-items:center;transition:var(--transitionNormal) all}.edit-wrapper>div:first-child{flex-grow:1}.edit-wrapper>button{margin-left:10px}.edit-wrapper .widget-wrapper{padding:2px 5px}.edit-wrapper .value-wrapper-edit:hover{outline:1px solid #ccc;cursor:text}.widget-data{padding:4px 0 10px;word-break:break-word}.widget-data.widget-type-slider{opacity:.8}.widget-data.widget-type-slider .slider-value{opacity:.9;font-weight:700}.widget-data.widget-type-array .array-entry,.widget-data.widget-type-vcard .array-entry{display:inline}.widget-data.widget-type-array .array-entry:not(:last-child):after,.widget-data.widget-type-vcard .array-entry:not(:last-child):after{content:\", \";padding-right:.3em;display:inline;align-items:flex-end}.widget-data.widget-type-tree>div{display:flex;flex-wrap:wrap;gap:10px}.widget-data.widget-type-tree .tree-entry{display:inline-block;border-radius:5px;padding:5px 10px;background-color:#f9f9f9}.widget-data.widget-type-tree .tree-entry>a{color:var(--palette-primary-800);text-decoration:none}.widget-data.widget-type-tree .tree-entry>*{vertical-align:middle}.widget-data.widget-type-tree .tree-entry>i{font-size:18px}.widget-data.widget-link{text-decoration:underline;cursor:pointer}.widget-type-text>div{white-space:pre-line}:host ::ng-deep .edit-wrapper .widget-container mat-form-field{margin-top:.5em}\n"] }]
|
|
2220
2220
|
}], ctorParameters: () => [{ type: i1.TranslateService }, { type: UIService }, { type: ViewInstanceService }, { type: MdsViewerService }, { type: NodeHelperService }], propDecorators: { widget: [{
|
|
2221
2221
|
type: Input
|
|
2222
2222
|
}], showCaption: [{
|
|
@@ -2317,6 +2317,7 @@ class MdsViewerComponent {
|
|
|
2317
2317
|
this.containerRef = containerRef;
|
|
2318
2318
|
this.sanitizer = sanitizer;
|
|
2319
2319
|
this.viewInstance = viewInstance;
|
|
2320
|
+
this.templates = signal(null);
|
|
2320
2321
|
/**
|
|
2321
2322
|
* show group headings (+ icons) for the individual templates
|
|
2322
2323
|
*/
|
|
@@ -2348,14 +2349,15 @@ class MdsViewerComponent {
|
|
|
2348
2349
|
catch (e) {
|
|
2349
2350
|
return;
|
|
2350
2351
|
}
|
|
2351
|
-
|
|
2352
|
+
const templates = [];
|
|
2352
2353
|
for (const view of this.getGroup().views) {
|
|
2353
2354
|
const v = this.getView(view);
|
|
2354
|
-
|
|
2355
|
+
templates.push({
|
|
2355
2356
|
view: v,
|
|
2356
2357
|
html: this.sanitizer.bypassSecurityTrustHtml(this.prepareHTML(v.html)),
|
|
2357
2358
|
});
|
|
2358
2359
|
}
|
|
2360
|
+
this.templates.set(templates);
|
|
2359
2361
|
// wait for angular to inflate the new binding
|
|
2360
2362
|
setTimeout(() => {
|
|
2361
2363
|
for (const widget of (this.mdsEditorInstanceService?.widgets.value ||
|
|
@@ -2364,13 +2366,12 @@ class MdsViewerComponent {
|
|
|
2364
2366
|
definition,
|
|
2365
2367
|
getInitalValuesAsync: async () => {
|
|
2366
2368
|
return {
|
|
2367
|
-
|
|
2369
|
+
jointValues: this.data[definition.id],
|
|
2368
2370
|
};
|
|
2369
2371
|
},
|
|
2370
2372
|
getInitialDisplayValues: () => new BehaviorSubject(null),
|
|
2371
2373
|
};
|
|
2372
2374
|
}))) {
|
|
2373
|
-
// @TODO: it would be better to filter by widgets based on template and condition, should be implemented in 5.1
|
|
2374
2375
|
this.container.toArray().forEach((c) => {
|
|
2375
2376
|
let element = c.nativeElement.getElementsByTagName(widget.definition.id)?.[0];
|
|
2376
2377
|
if (element) {
|
|
@@ -2427,11 +2428,11 @@ class MdsViewerComponent {
|
|
|
2427
2428
|
}
|
|
2428
2429
|
}
|
|
2429
2430
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: MdsViewerComponent, deps: [{ token: i2.MdsService }, { token: MdsViewerService }, { token: i0.ComponentFactoryResolver }, { token: i0.Injector }, { token: i0.ViewContainerRef }, { token: i3$1.DomSanitizer }, { token: ViewInstanceService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2430
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: MdsViewerComponent, selector: "es-mds-viewer", inputs: { mdsEditorInstanceService: "mdsEditorInstanceService", groupId: "groupId", setId: "setId", data: "data", showGroupHeadings: "showGroupHeadings", headingLevel: "headingLevel" }, providers: [MdsViewerService, ViewInstanceService], viewQueries: [{ propertyName: "container", predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<es-spinner-small *ngIf=\"!templates\"></es-spinner-small>\n<div *ngFor=\"let t of templates\" #container class=\"mds-viewer\">\n <div *ngIf=\"showGroupHeadings && t.view.caption\" class=\"card-title-element group-heading\">\n <i [esIcon]=\"t.view.icon\" *ngIf=\"t.view.icon\"></i><span>{{ t.view.caption }}</span>\n </div>\n <div class=\"template\" [innerHTML]=\"t.html\"></div>\n</div>\n", styles: [":host ::ng-deep es-mds-editor-widget-container{margin-bottom:0}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SpinnerSmallComponent, selector: "es-spinner-small", inputs: ["diameter"] }, { kind: "directive", type: IconDirective, selector: "i[esIcon], i.material-icons", inputs: ["altText", "aria", "esIcon"] }] }); }
|
|
2431
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: MdsViewerComponent, selector: "es-mds-viewer", inputs: { mdsEditorInstanceService: "mdsEditorInstanceService", groupId: "groupId", setId: "setId", data: "data", showGroupHeadings: "showGroupHeadings", headingLevel: "headingLevel" }, providers: [MdsViewerService, ViewInstanceService], viewQueries: [{ propertyName: "container", predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<es-spinner-small *ngIf=\"!templates()\"></es-spinner-small>\n<div *ngFor=\"let t of templates()\" #container class=\"mds-viewer\">\n <div *ngIf=\"showGroupHeadings && t.view.caption\" class=\"card-title-element group-heading\">\n <i [esIcon]=\"t.view.icon\" *ngIf=\"t.view.icon\"></i><span>{{ t.view.caption }}</span>\n </div>\n <div class=\"template\" [innerHTML]=\"t.html\"></div>\n</div>\n", styles: [":host ::ng-deep es-mds-editor-widget-container{margin-bottom:0}es-spinner-small{display:flex;justify-content:center;align-items:center;width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SpinnerSmallComponent, selector: "es-spinner-small", inputs: ["diameter"] }, { kind: "directive", type: IconDirective, selector: "i[esIcon], i.material-icons", inputs: ["altText", "aria", "esIcon"] }] }); }
|
|
2431
2432
|
}
|
|
2432
2433
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: MdsViewerComponent, decorators: [{
|
|
2433
2434
|
type: Component,
|
|
2434
|
-
args: [{ selector: 'es-mds-viewer', providers: [MdsViewerService, ViewInstanceService], template: "<es-spinner-small *ngIf=\"!templates\"></es-spinner-small>\n<div *ngFor=\"let t of templates\" #container class=\"mds-viewer\">\n <div *ngIf=\"showGroupHeadings && t.view.caption\" class=\"card-title-element group-heading\">\n <i [esIcon]=\"t.view.icon\" *ngIf=\"t.view.icon\"></i><span>{{ t.view.caption }}</span>\n </div>\n <div class=\"template\" [innerHTML]=\"t.html\"></div>\n</div>\n", styles: [":host ::ng-deep es-mds-editor-widget-container{margin-bottom:0}\n"] }]
|
|
2435
|
+
args: [{ selector: 'es-mds-viewer', providers: [MdsViewerService, ViewInstanceService], template: "<es-spinner-small *ngIf=\"!templates()\"></es-spinner-small>\n<div *ngFor=\"let t of templates()\" #container class=\"mds-viewer\">\n <div *ngIf=\"showGroupHeadings && t.view.caption\" class=\"card-title-element group-heading\">\n <i [esIcon]=\"t.view.icon\" *ngIf=\"t.view.icon\"></i><span>{{ t.view.caption }}</span>\n </div>\n <div class=\"template\" [innerHTML]=\"t.html\"></div>\n</div>\n", styles: [":host ::ng-deep es-mds-editor-widget-container{margin-bottom:0}es-spinner-small{display:flex;justify-content:center;align-items:center;width:100%;height:100%}\n"] }]
|
|
2435
2436
|
}], ctorParameters: () => [{ type: i2.MdsService }, { type: MdsViewerService }, { type: i0.ComponentFactoryResolver }, { type: i0.Injector }, { type: i0.ViewContainerRef }, { type: i3$1.DomSanitizer }, { type: ViewInstanceService }], propDecorators: { container: [{
|
|
2436
2437
|
type: ViewChildren,
|
|
2437
2438
|
args: ['container']
|