@wolkabout/commons 0.3.3 → 0.3.4
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/README.md +17 -17
- package/fesm2022/wolkabout-commons.mjs +109 -102
- package/fesm2022/wolkabout-commons.mjs.map +1 -1
- package/package.json +1 -1
- package/types/wolkabout-commons.d.ts +2 -2
|
@@ -4308,11 +4308,11 @@ class AutocompleteComponent {
|
|
|
4308
4308
|
document.removeEventListener('touchmove', this.scrollEvent, true);
|
|
4309
4309
|
}
|
|
4310
4310
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AutocompleteComponent, deps: [{ token: i5.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
4311
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: AutocompleteComponent, isStandalone: true, selector: "app-autocomplete", inputs: { name: "name", dataFunction: "dataFunction", displayFunction: "displayFunction", outlineBackground: "outlineBackground", hideRequiredMarker: "hideRequiredMarker" }, queries: [{ propertyName: "dropdownTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], ngImport: i0, template: "<ng-container>\
|
|
4311
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: AutocompleteComponent, isStandalone: true, selector: "app-autocomplete", inputs: { name: "name", dataFunction: "dataFunction", displayFunction: "displayFunction", outlineBackground: "outlineBackground", hideRequiredMarker: "hideRequiredMarker" }, queries: [{ propertyName: "dropdownTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], ngImport: i0, template: "<ng-container>\n <div class=\"w-full\">\n <mat-form-field [ngClass]=\"{ 'outline-background': outlineBackground }\" class=\"w-full\" [hideRequiredMarker]=\"hideRequiredMarker\">\n <mat-label>\n <span>{{ name | translate }}</span>\n </mat-label>\n <input matInput #autoCompleteInput [ngClass]=\"{'cursor-text' : !hasValue(), 'cursor-default' : hasValue()}\" [formControl]=\"formControl\" [readonly]=\"hasValue()\" [placeholder]=\"name | translate\" autocomplete=\"off\"\n [matAutocomplete]=\"auto\" (blur)=\"onTouched($event)\" [attr.data-test]=\"name + 'SearchInput'\"/>\n @if (!disabled) {\n <button matSuffix mat-icon-button *ngIf=\"formControl.value\" (click)=\"clear()\" type='button'>\n <mat-icon class=\"text-mat-sys-on-error-container\">clear</mat-icon>\n </button>\n }\n @for (error of getErrors(); track error) {\n <mat-error>{{ 'COMMON.ERROR_VALIDATION_' + error | translate }}</mat-error>\n }\n </mat-form-field>\n </div>\n <mat-autocomplete #auto=\"matAutocomplete\" [class]=\"'autocomplete-panel'\" [displayWith]=\"displayFunction\">\n @if (loading$ | async) {\n <mat-option>\n <div>{{ 'Loading...' }}</div>\n <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n </mat-option>\n } @else {\n <mat-option *ngFor=\"let item of data$ | async; let i = index\" [value]=\"item\" class=\"autocomplete-option\" [attr.data-test]=\"name + 'SearchItem' + (i + 1)\">\n <ng-container [ngTemplateOutlet]=\"dropdownTemplate ? dropdownTemplate : defaultTemplate\" [ngTemplateOutletContext]=\"{ item }\"></ng-container>\n <ng-template #defaultTemplate>{{ displayFunction(item) }}</ng-template>\n </mat-option>\n }\n </mat-autocomplete>\n</ng-container>\n", styles: [".mat-option-hidden{display:none}.autocomplete-option{height:fit-content}.autocomplete-option.autocomplete-option__active,.autocomplete-option.autocomplete-option__active:hover{background-color:var(--color-primary-50)}.autocomplete-info{height:30px;font-size:14px}.autocomplete-info.secondary{font-size:12px;height:25px}.autocomplete-info .autocomplete-item{text-overflow:ellipsis;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i8.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i8.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }] });
|
|
4312
4312
|
}
|
|
4313
4313
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AutocompleteComponent, decorators: [{
|
|
4314
4314
|
type: Component,
|
|
4315
|
-
args: [{ selector: 'app-autocomplete', imports: [SharedModule], template: "<ng-container>\
|
|
4315
|
+
args: [{ selector: 'app-autocomplete', imports: [SharedModule], template: "<ng-container>\n <div class=\"w-full\">\n <mat-form-field [ngClass]=\"{ 'outline-background': outlineBackground }\" class=\"w-full\" [hideRequiredMarker]=\"hideRequiredMarker\">\n <mat-label>\n <span>{{ name | translate }}</span>\n </mat-label>\n <input matInput #autoCompleteInput [ngClass]=\"{'cursor-text' : !hasValue(), 'cursor-default' : hasValue()}\" [formControl]=\"formControl\" [readonly]=\"hasValue()\" [placeholder]=\"name | translate\" autocomplete=\"off\"\n [matAutocomplete]=\"auto\" (blur)=\"onTouched($event)\" [attr.data-test]=\"name + 'SearchInput'\"/>\n @if (!disabled) {\n <button matSuffix mat-icon-button *ngIf=\"formControl.value\" (click)=\"clear()\" type='button'>\n <mat-icon class=\"text-mat-sys-on-error-container\">clear</mat-icon>\n </button>\n }\n @for (error of getErrors(); track error) {\n <mat-error>{{ 'COMMON.ERROR_VALIDATION_' + error | translate }}</mat-error>\n }\n </mat-form-field>\n </div>\n <mat-autocomplete #auto=\"matAutocomplete\" [class]=\"'autocomplete-panel'\" [displayWith]=\"displayFunction\">\n @if (loading$ | async) {\n <mat-option>\n <div>{{ 'Loading...' }}</div>\n <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n </mat-option>\n } @else {\n <mat-option *ngFor=\"let item of data$ | async; let i = index\" [value]=\"item\" class=\"autocomplete-option\" [attr.data-test]=\"name + 'SearchItem' + (i + 1)\">\n <ng-container [ngTemplateOutlet]=\"dropdownTemplate ? dropdownTemplate : defaultTemplate\" [ngTemplateOutletContext]=\"{ item }\"></ng-container>\n <ng-template #defaultTemplate>{{ displayFunction(item) }}</ng-template>\n </mat-option>\n }\n </mat-autocomplete>\n</ng-container>\n", styles: [".mat-option-hidden{display:none}.autocomplete-option{height:fit-content}.autocomplete-option.autocomplete-option__active,.autocomplete-option.autocomplete-option__active:hover{background-color:var(--color-primary-50)}.autocomplete-info{height:30px;font-size:14px}.autocomplete-info.secondary{font-size:12px;height:25px}.autocomplete-info .autocomplete-item{text-overflow:ellipsis;overflow:hidden}\n"] }]
|
|
4316
4316
|
}], ctorParameters: () => [{ type: i5.NgControl, decorators: [{
|
|
4317
4317
|
type: Optional
|
|
4318
4318
|
}, {
|
|
@@ -4424,11 +4424,11 @@ class AutocompleteChipsComponent {
|
|
|
4424
4424
|
document.removeEventListener('touchmove', this.scrollEvent, true);
|
|
4425
4425
|
}
|
|
4426
4426
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AutocompleteChipsComponent, deps: [{ token: i5.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
4427
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: AutocompleteChipsComponent, isStandalone: true, selector: "app-autocomplete-chips", inputs: { name: "name", dataFunction: "dataFunction", displayFunction: "displayFunction", outlineBackground: "outlineBackground" }, queries: [{ propertyName: "dropdownTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }, { propertyName: "inputRef", first: true, predicate: ["autoCompleteInput"], descendants: true }], ngImport: i0, template: "<div class=\"w-full\" [ngClass]=\"{'required' : !!getErrors().length && !formControl.untouched && !(items$ | async)?.length}\">\
|
|
4427
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: AutocompleteChipsComponent, isStandalone: true, selector: "app-autocomplete-chips", inputs: { name: "name", dataFunction: "dataFunction", displayFunction: "displayFunction", outlineBackground: "outlineBackground" }, queries: [{ propertyName: "dropdownTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }, { propertyName: "inputRef", first: true, predicate: ["autoCompleteInput"], descendants: true }], ngImport: i0, template: "<div class=\"w-full\" [ngClass]=\"{'required' : !!getErrors().length && !formControl.untouched && !(items$ | async)?.length}\">\n <mat-form-field [ngClass]=\"{ 'outline-background': outlineBackground }\" class=\"w-full\">\n <mat-label>\n <span>{{ name | translate }}</span>\n </mat-label>\n <mat-chip-grid #chipGrid>\n <mat-chip-row *ngFor=\"let item of items$ | async as items; let i = index\"\n [removable]=\"!disabled\"\n (removed)=\"removeItem(i, items)\">\n {{ displayFunction(item) }}\n <mat-icon class=\"text-mat-sys-on-error-container\" matChipRemove *ngIf=\"!disabled\">cancel</mat-icon>\n </mat-chip-row>\n <input matInput\n #autoCompleteInput\n [placeholder]=\"name | translate\"\n autocomplete=\"off\"\n [formControl]=\"formControl\"\n [matAutocomplete]=\"auto\"\n [matChipInputFor]=\"chipGrid\"\n (blur)=\"onTouched($event)\"/>\n </mat-chip-grid>\n </mat-form-field>\n\n @for (error of getErrors(); track error) {\n @if (!formControl.untouched && !(items$ | async)?.length) {\n <mat-error class=\"ml-4 mt-[-2px] text-xs\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate }}</mat-error>\n }\n }\n</div>\n<mat-autocomplete #auto=\"matAutocomplete\" [class]=\"'autocomplete-panel'\" (optionSelected)=\"addItem($event)\">\n @if (loading$ | async) {\n <mat-option>\n <div>{{ 'Loading...' }}</div>\n <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n </mat-option>\n } @else {\n <ng-container *ngFor=\"let item of data$ | async; let i = index\">\n @if (shouldShowOption(item, (items$ | async) ?? [])) {\n <mat-option\n [value]=\"item\"\n class=\"autocomplete-option\"\n [attr.data-test]=\"name + 'SearchItem' + (i + 1)\">\n <ng-container [ngTemplateOutlet]=\"dropdownTemplate ? dropdownTemplate : defaultTemplate\"\n [ngTemplateOutletContext]=\"{ item }\"></ng-container>\n <ng-template #defaultTemplate>{{ displayFunction(item) }}</ng-template>\n </mat-option>\n }\n </ng-container>\n }\n</mat-autocomplete>\n", styles: [".mat-option-hidden{display:none}.autocomplete-option{height:fit-content}.autocomplete-option.autocomplete-option__active,.autocomplete-option.autocomplete-option__active:hover{background-color:var(--color-primary-50)}.autocomplete-info{height:30px;font-size:14px}.autocomplete-info.secondary{font-size:12px;height:25px}.autocomplete-info .autocomplete-item{text-overflow:ellipsis;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i8.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i8.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i8$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i8$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i8$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i8$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }] });
|
|
4428
4428
|
}
|
|
4429
4429
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AutocompleteChipsComponent, decorators: [{
|
|
4430
4430
|
type: Component,
|
|
4431
|
-
args: [{ selector: 'app-autocomplete-chips', imports: [SharedModule], template: "<div class=\"w-full\" [ngClass]=\"{'required' : !!getErrors().length && !formControl.untouched && !(items$ | async)?.length}\">\
|
|
4431
|
+
args: [{ selector: 'app-autocomplete-chips', imports: [SharedModule], template: "<div class=\"w-full\" [ngClass]=\"{'required' : !!getErrors().length && !formControl.untouched && !(items$ | async)?.length}\">\n <mat-form-field [ngClass]=\"{ 'outline-background': outlineBackground }\" class=\"w-full\">\n <mat-label>\n <span>{{ name | translate }}</span>\n </mat-label>\n <mat-chip-grid #chipGrid>\n <mat-chip-row *ngFor=\"let item of items$ | async as items; let i = index\"\n [removable]=\"!disabled\"\n (removed)=\"removeItem(i, items)\">\n {{ displayFunction(item) }}\n <mat-icon class=\"text-mat-sys-on-error-container\" matChipRemove *ngIf=\"!disabled\">cancel</mat-icon>\n </mat-chip-row>\n <input matInput\n #autoCompleteInput\n [placeholder]=\"name | translate\"\n autocomplete=\"off\"\n [formControl]=\"formControl\"\n [matAutocomplete]=\"auto\"\n [matChipInputFor]=\"chipGrid\"\n (blur)=\"onTouched($event)\"/>\n </mat-chip-grid>\n </mat-form-field>\n\n @for (error of getErrors(); track error) {\n @if (!formControl.untouched && !(items$ | async)?.length) {\n <mat-error class=\"ml-4 mt-[-2px] text-xs\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate }}</mat-error>\n }\n }\n</div>\n<mat-autocomplete #auto=\"matAutocomplete\" [class]=\"'autocomplete-panel'\" (optionSelected)=\"addItem($event)\">\n @if (loading$ | async) {\n <mat-option>\n <div>{{ 'Loading...' }}</div>\n <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n </mat-option>\n } @else {\n <ng-container *ngFor=\"let item of data$ | async; let i = index\">\n @if (shouldShowOption(item, (items$ | async) ?? [])) {\n <mat-option\n [value]=\"item\"\n class=\"autocomplete-option\"\n [attr.data-test]=\"name + 'SearchItem' + (i + 1)\">\n <ng-container [ngTemplateOutlet]=\"dropdownTemplate ? dropdownTemplate : defaultTemplate\"\n [ngTemplateOutletContext]=\"{ item }\"></ng-container>\n <ng-template #defaultTemplate>{{ displayFunction(item) }}</ng-template>\n </mat-option>\n }\n </ng-container>\n }\n</mat-autocomplete>\n", styles: [".mat-option-hidden{display:none}.autocomplete-option{height:fit-content}.autocomplete-option.autocomplete-option__active,.autocomplete-option.autocomplete-option__active:hover{background-color:var(--color-primary-50)}.autocomplete-info{height:30px;font-size:14px}.autocomplete-info.secondary{font-size:12px;height:25px}.autocomplete-info .autocomplete-item{text-overflow:ellipsis;overflow:hidden}\n"] }]
|
|
4432
4432
|
}], ctorParameters: () => [{ type: i5.NgControl, decorators: [{
|
|
4433
4433
|
type: Optional
|
|
4434
4434
|
}, {
|
|
@@ -4482,14 +4482,14 @@ class BasicTimeSeriesGraphComponent {
|
|
|
4482
4482
|
trigger: 'axis',
|
|
4483
4483
|
formatter: (params) => {
|
|
4484
4484
|
const [timestamp, data] = params[0].data;
|
|
4485
|
-
return `
|
|
4486
|
-
<div class="flex flex-col gap-y-2">
|
|
4487
|
-
<div>${this.timeFormatter.transform(timestamp)}</div>
|
|
4488
|
-
<div class="flex flex-row gap-x-2 items-center">
|
|
4489
|
-
<div class="h-2 w-2 bg-mat-sys-primary rounded-3xl"> </div>
|
|
4490
|
-
<div>${timeSeries.name}:</div>
|
|
4491
|
-
<div><span class="font-bold">${data}</span><span>${timeSeries.unitSymbol ?? ''}</span></div>
|
|
4492
|
-
</div>
|
|
4485
|
+
return `
|
|
4486
|
+
<div class="flex flex-col gap-y-2">
|
|
4487
|
+
<div>${this.timeFormatter.transform(timestamp)}</div>
|
|
4488
|
+
<div class="flex flex-row gap-x-2 items-center">
|
|
4489
|
+
<div class="h-2 w-2 bg-mat-sys-primary rounded-3xl"> </div>
|
|
4490
|
+
<div>${timeSeries.name}:</div>
|
|
4491
|
+
<div><span class="font-bold">${data}</span><span>${timeSeries.unitSymbol ?? ''}</span></div>
|
|
4492
|
+
</div>
|
|
4493
4493
|
</div>`;
|
|
4494
4494
|
},
|
|
4495
4495
|
axisPointer: {
|
|
@@ -4525,11 +4525,11 @@ class BasicTimeSeriesGraphComponent {
|
|
|
4525
4525
|
});
|
|
4526
4526
|
}
|
|
4527
4527
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BasicTimeSeriesGraphComponent, deps: [{ token: SimpleDateTimePipe }], target: i0.ɵɵFactoryTarget.Component });
|
|
4528
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: BasicTimeSeriesGraphComponent, isStandalone: true, selector: "app-basic-time-series-graph", inputs: { timeSeries: { classPropertyName: "timeSeries", publicName: "timeSeries", isSignal: true, isRequired: true, transformFunction: null }, desiredTimeFrame: { classPropertyName: "desiredTimeFrame", publicName: "desiredTimeFrame", isSignal: true, isRequired: false, transformFunction: null }, primaryColor: { classPropertyName: "primaryColor", publicName: "primaryColor", isSignal: true, isRequired: false, transformFunction: null } }, providers: [SimpleDatePipe, SimpleDateTimePipe], ngImport: i0, template: "<div echarts [options]=\"graphOptions()\" (chartDataZoom)=\"chartZoom($event)\" [theme]=\"chartTheme()!\" class=\"w-full h-full\"></div>\
|
|
4528
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: BasicTimeSeriesGraphComponent, isStandalone: true, selector: "app-basic-time-series-graph", inputs: { timeSeries: { classPropertyName: "timeSeries", publicName: "timeSeries", isSignal: true, isRequired: true, transformFunction: null }, desiredTimeFrame: { classPropertyName: "desiredTimeFrame", publicName: "desiredTimeFrame", isSignal: true, isRequired: false, transformFunction: null }, primaryColor: { classPropertyName: "primaryColor", publicName: "primaryColor", isSignal: true, isRequired: false, transformFunction: null } }, providers: [SimpleDatePipe, SimpleDateTimePipe], ngImport: i0, template: "<div echarts [options]=\"graphOptions()\" (chartDataZoom)=\"chartZoom($event)\" [theme]=\"chartTheme()!\" class=\"w-full h-full\"></div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }] });
|
|
4529
4529
|
}
|
|
4530
4530
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BasicTimeSeriesGraphComponent, decorators: [{
|
|
4531
4531
|
type: Component,
|
|
4532
|
-
args: [{ selector: 'app-basic-time-series-graph', imports: [NgxEchartsDirective], providers: [SimpleDatePipe, SimpleDateTimePipe], template: "<div echarts [options]=\"graphOptions()\" (chartDataZoom)=\"chartZoom($event)\" [theme]=\"chartTheme()!\" class=\"w-full h-full\"></div>\
|
|
4532
|
+
args: [{ selector: 'app-basic-time-series-graph', imports: [NgxEchartsDirective], providers: [SimpleDatePipe, SimpleDateTimePipe], template: "<div echarts [options]=\"graphOptions()\" (chartDataZoom)=\"chartZoom($event)\" [theme]=\"chartTheme()!\" class=\"w-full h-full\"></div>\n" }]
|
|
4533
4533
|
}], ctorParameters: () => [{ type: SimpleDateTimePipe }], propDecorators: { timeSeries: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeSeries", required: true }] }], desiredTimeFrame: [{ type: i0.Input, args: [{ isSignal: true, alias: "desiredTimeFrame", required: false }] }], primaryColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryColor", required: false }] }] } });
|
|
4534
4534
|
|
|
4535
4535
|
class CardLabeledValueComponent {
|
|
@@ -4551,11 +4551,11 @@ class CardLabeledValueComponent {
|
|
|
4551
4551
|
}, ...(ngDevMode ? [{ debugName: "permissionFunction" }] : []));
|
|
4552
4552
|
hasPermission = toSignal(toObservable(this.permissionFunction).pipe(switchMap(obs => obs)), { initialValue: false });
|
|
4553
4553
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CardLabeledValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4554
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: CardLabeledValueComponent, isStandalone: true, selector: "app-card-labeled-value", inputs: { permissions: { classPropertyName: "permissions", publicName: "permissions", isSignal: true, isRequired: false, transformFunction: null }, useAssetPermissions: { classPropertyName: "useAssetPermissions", publicName: "useAssetPermissions", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, editFunction: { classPropertyName: "editFunction", publicName: "editFunction", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mat-card\
|
|
4554
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: CardLabeledValueComponent, isStandalone: true, selector: "app-card-labeled-value", inputs: { permissions: { classPropertyName: "permissions", publicName: "permissions", isSignal: true, isRequired: false, transformFunction: null }, useAssetPermissions: { classPropertyName: "useAssetPermissions", publicName: "useAssetPermissions", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, editFunction: { classPropertyName: "editFunction", publicName: "editFunction", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mat-card\n [ngClass]=\"{'cursor-pointer hover:bg-hover-color': editFunction() && hasPermission() }\"\n [matTooltipDisabled]=\"!hasPermission()\" (click)=\"editFunction() && hasPermission() ? editFunction()!() : null\"\n [matTooltip]=\"tooltip() | translate\"\n matTooltipPosition=\"above\"\n>\n <div class=\"flex items-center justify-between p-4 gap-x-4 h-full\">\n <div class=\"flex flex-col w-full h-full overflow-hidden\">\n <div class=\"font-semibold shrink-0\">{{ label() | translate }}</div>\n <div class=\"text-mat-sys-primary flex items-center grow\">\n <ng-content/>\n </div>\n </div>\n @if (editFunction() && hasPermission()) {\n <button mat-icon-button [ngClass]=\"icon() === 'delete' ? 'text-mat-sys-on-error-container' : 'text-mat-sys-primary'\" (click)=\"editFunction()!(); $event.stopPropagation()\">\n <mat-icon>{{ icon() }}</mat-icon>\n </button>\n }\n </div>\n</mat-card>\n", styles: ["mat-card{height:100%;min-height:5.5rem}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
|
|
4555
4555
|
}
|
|
4556
4556
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CardLabeledValueComponent, decorators: [{
|
|
4557
4557
|
type: Component,
|
|
4558
|
-
args: [{ selector: 'app-card-labeled-value', imports: [SharedModule], template: "<mat-card\
|
|
4558
|
+
args: [{ selector: 'app-card-labeled-value', imports: [SharedModule], template: "<mat-card\n [ngClass]=\"{'cursor-pointer hover:bg-hover-color': editFunction() && hasPermission() }\"\n [matTooltipDisabled]=\"!hasPermission()\" (click)=\"editFunction() && hasPermission() ? editFunction()!() : null\"\n [matTooltip]=\"tooltip() | translate\"\n matTooltipPosition=\"above\"\n>\n <div class=\"flex items-center justify-between p-4 gap-x-4 h-full\">\n <div class=\"flex flex-col w-full h-full overflow-hidden\">\n <div class=\"font-semibold shrink-0\">{{ label() | translate }}</div>\n <div class=\"text-mat-sys-primary flex items-center grow\">\n <ng-content/>\n </div>\n </div>\n @if (editFunction() && hasPermission()) {\n <button mat-icon-button [ngClass]=\"icon() === 'delete' ? 'text-mat-sys-on-error-container' : 'text-mat-sys-primary'\" (click)=\"editFunction()!(); $event.stopPropagation()\">\n <mat-icon>{{ icon() }}</mat-icon>\n </button>\n }\n </div>\n</mat-card>\n", styles: ["mat-card{height:100%;min-height:5.5rem}\n"] }]
|
|
4559
4559
|
}], propDecorators: { permissions: [{ type: i0.Input, args: [{ isSignal: true, alias: "permissions", required: false }] }], useAssetPermissions: [{ type: i0.Input, args: [{ isSignal: true, alias: "useAssetPermissions", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], editFunction: [{ type: i0.Input, args: [{ isSignal: true, alias: "editFunction", required: false }] }] } });
|
|
4560
4560
|
|
|
4561
4561
|
class ConfirmationDialogComponent {
|
|
@@ -4569,11 +4569,11 @@ class ConfirmationDialogComponent {
|
|
|
4569
4569
|
this.dialog.close(true);
|
|
4570
4570
|
}
|
|
4571
4571
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ConfirmationDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$5.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
4572
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: ConfirmationDialogComponent, isStandalone: true, selector: "app-confirmation-dialog", ngImport: i0, template: "<div class=\"flex flex-col flex-auto gap-y-8 p-4 content\">\
|
|
4572
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: ConfirmationDialogComponent, isStandalone: true, selector: "app-confirmation-dialog", ngImport: i0, template: "<div class=\"flex flex-col flex-auto gap-y-8 p-4 content\">\n <div class=\"text-lg\">{{ 'COMMON.CONFIRMATION_DIALOG_TITLE' | translate }}</div>\n <div class=\"flex flex-col flex-auto gap-y-4\">\n <div class=\"flex flex-col flex-auto gap-y-4 max-h-96 overflow-hidden\">\n <div class=\"whitespace-pre-line\">{{ data.message | translate:data.parameters }}</div>\n </div>\n </div>\n <div class=\"flex flex-row flex-auto gap-x-2 justify-end\">\n <button mat-button mat-dialog-close>{{ 'COMMON.CANCEL' | translate }}</button>\n <button [ngClass]=\"{'destructive-flat-button': data.deleteDialog}\" mat-flat-button\n (click)=\"confirm()\">{{ data.actionButtonLabel ? (data.actionButtonLabel! | translate) : (data.deleteDialog ? ('COMMON.DELETE' | translate) : ('COMMON.CONFIRMATION_DIALOG_CONFIRM' | translate)) }}\n </button>\n </div>\n</div>\n", styles: [".content{max-width:var(--medium-dialog-width)}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i1$4.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i1$5.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
|
|
4573
4573
|
}
|
|
4574
4574
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
|
|
4575
4575
|
type: Component,
|
|
4576
|
-
args: [{ selector: 'app-confirmation-dialog', imports: [SharedModule], template: "<div class=\"flex flex-col flex-auto gap-y-8 p-4 content\">\
|
|
4576
|
+
args: [{ selector: 'app-confirmation-dialog', imports: [SharedModule], template: "<div class=\"flex flex-col flex-auto gap-y-8 p-4 content\">\n <div class=\"text-lg\">{{ 'COMMON.CONFIRMATION_DIALOG_TITLE' | translate }}</div>\n <div class=\"flex flex-col flex-auto gap-y-4\">\n <div class=\"flex flex-col flex-auto gap-y-4 max-h-96 overflow-hidden\">\n <div class=\"whitespace-pre-line\">{{ data.message | translate:data.parameters }}</div>\n </div>\n </div>\n <div class=\"flex flex-row flex-auto gap-x-2 justify-end\">\n <button mat-button mat-dialog-close>{{ 'COMMON.CANCEL' | translate }}</button>\n <button [ngClass]=\"{'destructive-flat-button': data.deleteDialog}\" mat-flat-button\n (click)=\"confirm()\">{{ data.actionButtonLabel ? (data.actionButtonLabel! | translate) : (data.deleteDialog ? ('COMMON.DELETE' | translate) : ('COMMON.CONFIRMATION_DIALOG_CONFIRM' | translate)) }}\n </button>\n </div>\n</div>\n", styles: [".content{max-width:var(--medium-dialog-width)}\n"] }]
|
|
4577
4577
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
4578
4578
|
type: Inject,
|
|
4579
4579
|
args: [MAT_DIALOG_DATA]
|
|
@@ -4734,7 +4734,7 @@ class DateRangeInputComponent {
|
|
|
4734
4734
|
useExisting: forwardRef(() => DateRangeInputComponent),
|
|
4735
4735
|
multi: true,
|
|
4736
4736
|
}
|
|
4737
|
-
], viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["picker"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"w-full flex flex-col\" [formGroup]=\"dateRangeForm\">\
|
|
4737
|
+
], viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["picker"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"w-full flex flex-col\" [formGroup]=\"dateRangeForm\">\n @if (isInForm()) {\n <mat-form-field class=\"flex\">\n <mat-label>{{ (translationPrefix() ? translationPrefix() + '_LABEL' : 'COMMON.DATE_RANGE_LABEL') | translate }}</mat-label>\n <mat-select (blur)=\"onTouched($event)\" formControlName=\"periodOption\" (selectionChange)=\"onTimeRangeChanged($event)\" [errorStateMatcher]=\"periodErrorStateMatcher\" panelClass=\"date-range-panel\">\n @for (periodOption of availableDateOptions(); track $index) {\n <mat-option [value]=\"periodOption\">{{ 'COMMON.RELATIVE_TIME_PERIOD_' + periodOption | translate }}</mat-option>\n }\n @if (allowCustomTimespan()) {\n <mat-option [value]=\"CUSTOM_PERIOD\">\n <div class=\"flex flex-row gap-x-4\">\n @if (dateRangeForm.get('from')?.value) {\n <div class=\"flex flex-row\">\n <span class=\"whitespace-nowrap h-fit\">{{ dateRangeForm.get('from')?.value?.toMillis() | simpleDate : undefined: false }}</span>\n <span class=\"whitespace-nowrap h-fit\"> - </span>\n <span class=\"whitespace-nowrap h-fit\">{{ dateRangeForm.get('to')?.value?.toMillis() | simpleDate : undefined: false }}</span>\n </div>\n } @else {\n <div>{{ 'COMMON.RELATIVE_TIME_PERIOD_CUSTOM' | translate }}</div>\n }\n </div>\n </mat-option>\n }\n </mat-select>\n <mat-date-range-input [rangePicker]=\"picker\" style=\"visibility: hidden; width: 0; height: 0;\">\n <input (blur)=\"onTouched($event)\" matStartDate formControlName=\"from\">\n <input (blur)=\"onTouched($event)\" matEndDate formControlName=\"to\"/>\n </mat-date-range-input>\n <mat-date-range-picker #picker (closed)=\"emitValueChange()\"></mat-date-range-picker>\n @if (dateRangeForm.get('periodOption')?.value === CUSTOM_PERIOD) {\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n }\n @if (dateRangeForm.touched && dateRangeForm.hasError('required')) {\n <mat-error>\n {{ 'COMMON.ERROR_VALIDATION_REQUIRED' | translate }}\n </mat-error>\n }\n @if (dateRangeForm.touched && dateRangeForm.hasError('incompletePeriod')) {\n {{ 'COMMON.ERROR_VALIDATION_REQUIRED' | translate }}\n }\n </mat-form-field>\n } @else {\n <div class=\"flex\">\n <mat-select class=\"date-range-flat-picker-select\" (blur)=\"onTouched($event)\" formControlName=\"periodOption\" (selectionChange)=\"onTimeRangeChanged($event)\" [errorStateMatcher]=\"periodErrorStateMatcher\" panelClass=\"date-range-panel\">\n @for (periodOption of availableDateOptions(); track $index) {\n <mat-option [value]=\"periodOption\">{{ 'COMMON.RELATIVE_TIME_PERIOD_' + periodOption | translate }}</mat-option>\n }\n @if (allowCustomTimespan()) {\n <mat-option [value]=\"CUSTOM_PERIOD\">\n <div class=\"flex flex-row gap-x-4\">\n @if (dateRangeForm.get('from')?.value) {\n <div class=\"flex flex-row\">\n <span class=\"whitespace-nowrap h-fit\">{{ dateRangeForm.get('from')?.value?.toMillis() | simpleDate : undefined: false }}</span>\n <span class=\"whitespace-nowrap h-fit\"> - </span>\n <span class=\"whitespace-nowrap h-fit\">{{ dateRangeForm.get('to')?.value?.toMillis() | simpleDate : undefined: false }}</span>\n </div>\n } @else {\n <div>{{ 'COMMON.RELATIVE_TIME_PERIOD_CUSTOM' | translate }}</div>\n }\n </div>\n </mat-option>\n }\n </mat-select>\n <mat-date-range-input [rangePicker]=\"picker\" style=\"visibility: hidden; width: 0; height: 0;\">\n <input (blur)=\"onTouched($event)\" matStartDate formControlName=\"from\">\n <input (blur)=\"onTouched($event)\" matEndDate formControlName=\"to\"/>\n </mat-date-range-input>\n <mat-date-range-picker #picker (closed)=\"emitValueChange()\"></mat-date-range-picker>\n @if (dateRangeForm.get('periodOption')?.value === CUSTOM_PERIOD) {\n <mat-datepicker-toggle matSuffix [for]=\"picker\" class=\"date-range-flat-picker-toggle\"></mat-datepicker-toggle>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i4$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i4$4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i4$4.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i4$4.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i4$4.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i4$4.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: SimpleDatePipe, name: "simpleDate" }] });
|
|
4738
4738
|
}
|
|
4739
4739
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DateRangeInputComponent, decorators: [{
|
|
4740
4740
|
type: Component,
|
|
@@ -4749,7 +4749,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
4749
4749
|
useExisting: forwardRef(() => DateRangeInputComponent),
|
|
4750
4750
|
multi: true,
|
|
4751
4751
|
}
|
|
4752
|
-
], template: "<div class=\"w-full flex flex-col\" [formGroup]=\"dateRangeForm\">\
|
|
4752
|
+
], template: "<div class=\"w-full flex flex-col\" [formGroup]=\"dateRangeForm\">\n @if (isInForm()) {\n <mat-form-field class=\"flex\">\n <mat-label>{{ (translationPrefix() ? translationPrefix() + '_LABEL' : 'COMMON.DATE_RANGE_LABEL') | translate }}</mat-label>\n <mat-select (blur)=\"onTouched($event)\" formControlName=\"periodOption\" (selectionChange)=\"onTimeRangeChanged($event)\" [errorStateMatcher]=\"periodErrorStateMatcher\" panelClass=\"date-range-panel\">\n @for (periodOption of availableDateOptions(); track $index) {\n <mat-option [value]=\"periodOption\">{{ 'COMMON.RELATIVE_TIME_PERIOD_' + periodOption | translate }}</mat-option>\n }\n @if (allowCustomTimespan()) {\n <mat-option [value]=\"CUSTOM_PERIOD\">\n <div class=\"flex flex-row gap-x-4\">\n @if (dateRangeForm.get('from')?.value) {\n <div class=\"flex flex-row\">\n <span class=\"whitespace-nowrap h-fit\">{{ dateRangeForm.get('from')?.value?.toMillis() | simpleDate : undefined: false }}</span>\n <span class=\"whitespace-nowrap h-fit\"> - </span>\n <span class=\"whitespace-nowrap h-fit\">{{ dateRangeForm.get('to')?.value?.toMillis() | simpleDate : undefined: false }}</span>\n </div>\n } @else {\n <div>{{ 'COMMON.RELATIVE_TIME_PERIOD_CUSTOM' | translate }}</div>\n }\n </div>\n </mat-option>\n }\n </mat-select>\n <mat-date-range-input [rangePicker]=\"picker\" style=\"visibility: hidden; width: 0; height: 0;\">\n <input (blur)=\"onTouched($event)\" matStartDate formControlName=\"from\">\n <input (blur)=\"onTouched($event)\" matEndDate formControlName=\"to\"/>\n </mat-date-range-input>\n <mat-date-range-picker #picker (closed)=\"emitValueChange()\"></mat-date-range-picker>\n @if (dateRangeForm.get('periodOption')?.value === CUSTOM_PERIOD) {\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n }\n @if (dateRangeForm.touched && dateRangeForm.hasError('required')) {\n <mat-error>\n {{ 'COMMON.ERROR_VALIDATION_REQUIRED' | translate }}\n </mat-error>\n }\n @if (dateRangeForm.touched && dateRangeForm.hasError('incompletePeriod')) {\n {{ 'COMMON.ERROR_VALIDATION_REQUIRED' | translate }}\n }\n </mat-form-field>\n } @else {\n <div class=\"flex\">\n <mat-select class=\"date-range-flat-picker-select\" (blur)=\"onTouched($event)\" formControlName=\"periodOption\" (selectionChange)=\"onTimeRangeChanged($event)\" [errorStateMatcher]=\"periodErrorStateMatcher\" panelClass=\"date-range-panel\">\n @for (periodOption of availableDateOptions(); track $index) {\n <mat-option [value]=\"periodOption\">{{ 'COMMON.RELATIVE_TIME_PERIOD_' + periodOption | translate }}</mat-option>\n }\n @if (allowCustomTimespan()) {\n <mat-option [value]=\"CUSTOM_PERIOD\">\n <div class=\"flex flex-row gap-x-4\">\n @if (dateRangeForm.get('from')?.value) {\n <div class=\"flex flex-row\">\n <span class=\"whitespace-nowrap h-fit\">{{ dateRangeForm.get('from')?.value?.toMillis() | simpleDate : undefined: false }}</span>\n <span class=\"whitespace-nowrap h-fit\"> - </span>\n <span class=\"whitespace-nowrap h-fit\">{{ dateRangeForm.get('to')?.value?.toMillis() | simpleDate : undefined: false }}</span>\n </div>\n } @else {\n <div>{{ 'COMMON.RELATIVE_TIME_PERIOD_CUSTOM' | translate }}</div>\n }\n </div>\n </mat-option>\n }\n </mat-select>\n <mat-date-range-input [rangePicker]=\"picker\" style=\"visibility: hidden; width: 0; height: 0;\">\n <input (blur)=\"onTouched($event)\" matStartDate formControlName=\"from\">\n <input (blur)=\"onTouched($event)\" matEndDate formControlName=\"to\"/>\n </mat-date-range-input>\n <mat-date-range-picker #picker (closed)=\"emitValueChange()\"></mat-date-range-picker>\n @if (dateRangeForm.get('periodOption')?.value === CUSTOM_PERIOD) {\n <mat-datepicker-toggle matSuffix [for]=\"picker\" class=\"date-range-flat-picker-toggle\"></mat-datepicker-toggle>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block}\n"] }]
|
|
4753
4753
|
}], ctorParameters: () => [{ type: i0.DestroyRef }, { type: TenantPropertiesService }], propDecorators: { availableDateOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableDateOptions", required: false }] }], translationPrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "translationPrefix", required: false }] }], allowCustomTimespan: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowCustomTimespan", required: false }] }], isInForm: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInForm", required: false }] }], datePicker: [{ type: i0.ViewChild, args: ['picker', { isSignal: true }] }], validators: [{ type: i0.Input, args: [{ isSignal: true, alias: "validators", required: false }] }] } });
|
|
4754
4754
|
|
|
4755
4755
|
class DateTimeFormFieldComponent {
|
|
@@ -4865,7 +4865,7 @@ class DateTimeFormFieldComponent {
|
|
|
4865
4865
|
useExisting: forwardRef(() => DateTimeFormFieldComponent),
|
|
4866
4866
|
multi: true,
|
|
4867
4867
|
}
|
|
4868
|
-
], ngImport: i0, template: "<ng-container [formGroup]=\"formGroup\">\
|
|
4868
|
+
], ngImport: i0, template: "<ng-container [formGroup]=\"formGroup\">\n <div class=\"flex flex-col gap-y-4\">\n <mat-form-field [matTooltip]=\"getDateErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n <mat-label>{{ (dateLabel ?? 'COMMON.DATE') | translate }}</mat-label>\n <input [matDatepicker]=\"picker\" formControlName=\"date\" matInput>\n <mat-datepicker-toggle [for]=\"picker\" matIconSuffix></mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n @for (error of getDateErrors(); track error) {\n <mat-error *ngIf=\"!showErrorInTooltip()\" class=\"text-[12px]\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate }}</mat-error>\n }\n </mat-form-field>\n <mat-form-field [matTooltip]=\"getTimeErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n <mat-label>{{ (timeLabel ?? 'COMMON.TIME') | translate }}</mat-label>\n <input [format]=\"24\" [ngxMatTimepicker]=\"pickerA\" formControlName=\"time\" matInput (input)=\"onInputChange($event)\"/>\n <mat-icon (click)=\"pickerA.open()\" matSuffix> watch_later</mat-icon>\n <ngx-mat-timepicker #pickerA></ngx-mat-timepicker>\n @for (error of getTimeErrors(); track error) {\n <mat-error *ngIf=\"!showErrorInTooltip()\" class=\"text-[12px]\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate }}</mat-error>\n }\n </mat-form-field>\n </div>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i4$4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4$4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4$4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgxMatTimepickerDirective, selector: "[ngxMatTimepicker]", inputs: ["format", "max", "min", "ngxMatTimepicker", "value", "disableClick", "disabled"] }, { kind: "component", type: NgxMatTimepickerComponent, selector: "ngx-mat-timepicker", inputs: ["appendToInput", "color", "dottedMinutesInGap", "enableKeyboardInput", "format", "minutesGap", "cancelBtnTmpl", "confirmBtnTmpl", "defaultTime", "disableAnimation", "editableHintTmpl", "hoursOnly", "isEsc", "max", "min", "preventOverlayClick", "timepickerClass"], outputs: ["closed", "hourSelected", "opened", "timeChanged", "timeSet"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
|
|
4869
4869
|
}
|
|
4870
4870
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DateTimeFormFieldComponent, decorators: [{
|
|
4871
4871
|
type: Component,
|
|
@@ -4880,7 +4880,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
4880
4880
|
useExisting: forwardRef(() => DateTimeFormFieldComponent),
|
|
4881
4881
|
multi: true,
|
|
4882
4882
|
}
|
|
4883
|
-
], template: "<ng-container [formGroup]=\"formGroup\">\
|
|
4883
|
+
], template: "<ng-container [formGroup]=\"formGroup\">\n <div class=\"flex flex-col gap-y-4\">\n <mat-form-field [matTooltip]=\"getDateErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n <mat-label>{{ (dateLabel ?? 'COMMON.DATE') | translate }}</mat-label>\n <input [matDatepicker]=\"picker\" formControlName=\"date\" matInput>\n <mat-datepicker-toggle [for]=\"picker\" matIconSuffix></mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n @for (error of getDateErrors(); track error) {\n <mat-error *ngIf=\"!showErrorInTooltip()\" class=\"text-[12px]\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate }}</mat-error>\n }\n </mat-form-field>\n <mat-form-field [matTooltip]=\"getTimeErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n <mat-label>{{ (timeLabel ?? 'COMMON.TIME') | translate }}</mat-label>\n <input [format]=\"24\" [ngxMatTimepicker]=\"pickerA\" formControlName=\"time\" matInput (input)=\"onInputChange($event)\"/>\n <mat-icon (click)=\"pickerA.open()\" matSuffix> watch_later</mat-icon>\n <ngx-mat-timepicker #pickerA></ngx-mat-timepicker>\n @for (error of getTimeErrors(); track error) {\n <mat-error *ngIf=\"!showErrorInTooltip()\" class=\"text-[12px]\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate }}</mat-error>\n }\n </mat-form-field>\n </div>\n</ng-container>\n" }]
|
|
4884
4884
|
}], ctorParameters: () => [{ type: i1$1.TranslateService }], propDecorators: { dateLabel: [{
|
|
4885
4885
|
type: Input
|
|
4886
4886
|
}], timeLabel: [{
|
|
@@ -5009,11 +5009,11 @@ class DragDropFileUploadComponent {
|
|
|
5009
5009
|
this.destroy$.complete();
|
|
5010
5010
|
}
|
|
5011
5011
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DragDropFileUploadComponent, deps: [{ token: i5.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
5012
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DragDropFileUploadComponent, isStandalone: true, selector: "application-drag-drop-file-upload", inputs: { accept: "accept", multiple: "multiple", prompt: "prompt" }, viewQueries: [{ propertyName: "dragDropZone", first: true, predicate: ["dragDropZone"], descendants: true }, { propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div #dragDropZone class=\"drag-drop-zone flex flex-col items-center justify-center\" [ngClass]=\"{ highlight: highlight(), disabled: disabled() }\">\
|
|
5012
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DragDropFileUploadComponent, isStandalone: true, selector: "application-drag-drop-file-upload", inputs: { accept: "accept", multiple: "multiple", prompt: "prompt" }, viewQueries: [{ propertyName: "dragDropZone", first: true, predicate: ["dragDropZone"], descendants: true }, { propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div #dragDropZone class=\"drag-drop-zone flex flex-col items-center justify-center\" [ngClass]=\"{ highlight: highlight(), disabled: disabled() }\">\n @if (files$ | async; as files) {\n @if (files.length > 0) {\n <div class=\"flex flex-col flex-wrap items-center justify-center\">\n @for (file of files; track $index) {\n <div class=\"name-wrapper flex flex-row items-center justify-center gap-2\">\n <mat-icon>description</mat-icon>\n <span [matTooltipDisabled]=\"file.name.length < TRUNCATE_NAME_LIMIT\" [matTooltip]=\"file.name\">{{ getFileName(file.name) }}</span>\n <mat-icon class=\"delete-button text-mat-sys-on-error-container\" (click)=\"deleteFile($event, $index)\">delete</mat-icon>\n </div>\n }\n </div>\n } @else {\n <span>{{ prompt | translate }}</span>\n }\n } @else {\n <span>{{ prompt | translate }}</span>\n }\n @if (controlDir.control?.errors && controlDir.control?.touched) {\n <mat-error>{{ getErrorForTranslation(controlDir.control?.errors).key | translate: getErrorForTranslation(controlDir.control?.errors).params }}</mat-error>\n }\n</div>\n<input #fileInput type=\"file\" [attr.multiple]=\"multiple ? true : null\" [attr.accept]=\"accept === '.*' ? '*' : accept\" (change)=\"onFileAdded($event)\"/>\n", styles: [":host{display:block;position:relative}input[type=file]{display:none}.drag-drop-zone{min-height:100px;min-width:250px;border:1px dashed var(--neutral-variant-color-60);cursor:pointer;border-radius:5px}.drag-drop-zone.highlight{background-color:var(--mat-sys-primary-container);border:1px solid var(--mat-sys-on-primary-container)}.drag-drop-zone.disabled{opacity:.5;pointer-events:none;cursor:no-drop}.drag-drop-zone .name-wrapper{cursor:auto}.drag-drop-zone .delete-button{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }] });
|
|
5013
5013
|
}
|
|
5014
5014
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DragDropFileUploadComponent, decorators: [{
|
|
5015
5015
|
type: Component,
|
|
5016
|
-
args: [{ selector: 'application-drag-drop-file-upload', imports: [SharedModule], template: "<div #dragDropZone class=\"drag-drop-zone flex flex-col items-center justify-center\" [ngClass]=\"{ highlight: highlight(), disabled: disabled() }\">\
|
|
5016
|
+
args: [{ selector: 'application-drag-drop-file-upload', imports: [SharedModule], template: "<div #dragDropZone class=\"drag-drop-zone flex flex-col items-center justify-center\" [ngClass]=\"{ highlight: highlight(), disabled: disabled() }\">\n @if (files$ | async; as files) {\n @if (files.length > 0) {\n <div class=\"flex flex-col flex-wrap items-center justify-center\">\n @for (file of files; track $index) {\n <div class=\"name-wrapper flex flex-row items-center justify-center gap-2\">\n <mat-icon>description</mat-icon>\n <span [matTooltipDisabled]=\"file.name.length < TRUNCATE_NAME_LIMIT\" [matTooltip]=\"file.name\">{{ getFileName(file.name) }}</span>\n <mat-icon class=\"delete-button text-mat-sys-on-error-container\" (click)=\"deleteFile($event, $index)\">delete</mat-icon>\n </div>\n }\n </div>\n } @else {\n <span>{{ prompt | translate }}</span>\n }\n } @else {\n <span>{{ prompt | translate }}</span>\n }\n @if (controlDir.control?.errors && controlDir.control?.touched) {\n <mat-error>{{ getErrorForTranslation(controlDir.control?.errors).key | translate: getErrorForTranslation(controlDir.control?.errors).params }}</mat-error>\n }\n</div>\n<input #fileInput type=\"file\" [attr.multiple]=\"multiple ? true : null\" [attr.accept]=\"accept === '.*' ? '*' : accept\" (change)=\"onFileAdded($event)\"/>\n", styles: [":host{display:block;position:relative}input[type=file]{display:none}.drag-drop-zone{min-height:100px;min-width:250px;border:1px dashed var(--neutral-variant-color-60);cursor:pointer;border-radius:5px}.drag-drop-zone.highlight{background-color:var(--mat-sys-primary-container);border:1px solid var(--mat-sys-on-primary-container)}.drag-drop-zone.disabled{opacity:.5;pointer-events:none;cursor:no-drop}.drag-drop-zone .name-wrapper{cursor:auto}.drag-drop-zone .delete-button{cursor:pointer}\n"] }]
|
|
5017
5017
|
}], ctorParameters: () => [{ type: i5.NgControl, decorators: [{
|
|
5018
5018
|
type: Optional
|
|
5019
5019
|
}, {
|
|
@@ -5040,11 +5040,11 @@ class ZoomControlsComponent {
|
|
|
5040
5040
|
zoomOut = output();
|
|
5041
5041
|
reset = output();
|
|
5042
5042
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ZoomControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5043
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: ZoomControlsComponent, isStandalone: true, selector: "app-zoom-controls", inputs: { zoomPercentage: { classPropertyName: "zoomPercentage", publicName: "zoomPercentage", isSignal: true, isRequired: true, transformFunction: null }, canZoomIn: { classPropertyName: "canZoomIn", publicName: "canZoomIn", isSignal: true, isRequired: true, transformFunction: null }, canZoomOut: { classPropertyName: "canZoomOut", publicName: "canZoomOut", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { zoomIn: "zoomIn", zoomOut: "zoomOut", reset: "reset" }, ngImport: i0, template: "<div class=\"control-group\">\
|
|
5043
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: ZoomControlsComponent, isStandalone: true, selector: "app-zoom-controls", inputs: { zoomPercentage: { classPropertyName: "zoomPercentage", publicName: "zoomPercentage", isSignal: true, isRequired: true, transformFunction: null }, canZoomIn: { classPropertyName: "canZoomIn", publicName: "canZoomIn", isSignal: true, isRequired: true, transformFunction: null }, canZoomOut: { classPropertyName: "canZoomOut", publicName: "canZoomOut", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { zoomIn: "zoomIn", zoomOut: "zoomOut", reset: "reset" }, ngImport: i0, template: "<div class=\"control-group\">\n <button class=\"icon-btn\"\n type=\"button\"\n (click)=\"zoomOut.emit()\"\n [disabled]=\"!canZoomOut()\"\n [class.disabled]=\"!canZoomOut()\"\n [matTooltip]=\"'COMMON.ZOOM_OUT' | translate\">\n <mat-icon>zoom_out</mat-icon>\n </button>\n <span class=\"zoom-level\"\n (click)=\"reset.emit()\"\n [matTooltip]=\"'COMMON.ZOOM_RESET' | translate\">{{ zoomPercentage() }}%</span>\n <button class=\"icon-btn\"\n type=\"button\"\n (click)=\"zoomIn.emit()\"\n [disabled]=\"!canZoomIn()\"\n [class.disabled]=\"!canZoomIn()\"\n [matTooltip]=\"'COMMON.ZOOM_IN' | translate\">\n <mat-icon>zoom_in</mat-icon>\n </button>\n</div>\n<ng-content></ng-content>\n", styles: [":host{display:flex;align-items:center;justify-content:center;gap:12px;background-color:transparent;position:absolute;bottom:0;left:50%;transform:translate(-50%);z-index:1;padding:12px 20px 16px}.control-group{display:flex;align-items:center;gap:4px;background:var(--mat-sys-surface-container);border:1px solid var(--mat-sys-outline-variant);border-radius:10px;padding:4px;box-shadow:0 2px 8px #0000001f}.zoom-level{min-width:44px;text-align:center;color:var(--mat-sys-on-surface);font-size:13px;font-weight:500;cursor:pointer;padding:4px;border-radius:16px;transition:background-color .2s}.zoom-level:hover{background-color:var(--mat-sys-surface-container-high)}.icon-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;border-radius:50%;background-color:transparent;color:var(--mat-sys-on-surface-variant);cursor:pointer;transition:all .2s ease}.icon-btn:hover:not(.disabled){background-color:var(--mat-sys-surface-container-high);color:var(--mat-sys-on-surface)}.icon-btn.disabled{opacity:.4;cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
|
|
5044
5044
|
}
|
|
5045
5045
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ZoomControlsComponent, decorators: [{
|
|
5046
5046
|
type: Component,
|
|
5047
|
-
args: [{ selector: 'app-zoom-controls', imports: [SharedModule], template: "<div class=\"control-group\">\
|
|
5047
|
+
args: [{ selector: 'app-zoom-controls', imports: [SharedModule], template: "<div class=\"control-group\">\n <button class=\"icon-btn\"\n type=\"button\"\n (click)=\"zoomOut.emit()\"\n [disabled]=\"!canZoomOut()\"\n [class.disabled]=\"!canZoomOut()\"\n [matTooltip]=\"'COMMON.ZOOM_OUT' | translate\">\n <mat-icon>zoom_out</mat-icon>\n </button>\n <span class=\"zoom-level\"\n (click)=\"reset.emit()\"\n [matTooltip]=\"'COMMON.ZOOM_RESET' | translate\">{{ zoomPercentage() }}%</span>\n <button class=\"icon-btn\"\n type=\"button\"\n (click)=\"zoomIn.emit()\"\n [disabled]=\"!canZoomIn()\"\n [class.disabled]=\"!canZoomIn()\"\n [matTooltip]=\"'COMMON.ZOOM_IN' | translate\">\n <mat-icon>zoom_in</mat-icon>\n </button>\n</div>\n<ng-content></ng-content>\n", styles: [":host{display:flex;align-items:center;justify-content:center;gap:12px;background-color:transparent;position:absolute;bottom:0;left:50%;transform:translate(-50%);z-index:1;padding:12px 20px 16px}.control-group{display:flex;align-items:center;gap:4px;background:var(--mat-sys-surface-container);border:1px solid var(--mat-sys-outline-variant);border-radius:10px;padding:4px;box-shadow:0 2px 8px #0000001f}.zoom-level{min-width:44px;text-align:center;color:var(--mat-sys-on-surface);font-size:13px;font-weight:500;cursor:pointer;padding:4px;border-radius:16px;transition:background-color .2s}.zoom-level:hover{background-color:var(--mat-sys-surface-container-high)}.icon-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;border-radius:50%;background-color:transparent;color:var(--mat-sys-on-surface-variant);cursor:pointer;transition:all .2s ease}.icon-btn:hover:not(.disabled){background-color:var(--mat-sys-surface-container-high);color:var(--mat-sys-on-surface)}.icon-btn.disabled{opacity:.4;cursor:not-allowed}\n"] }]
|
|
5048
5048
|
}], propDecorators: { zoomPercentage: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomPercentage", required: true }] }], canZoomIn: [{ type: i0.Input, args: [{ isSignal: true, alias: "canZoomIn", required: true }] }], canZoomOut: [{ type: i0.Input, args: [{ isSignal: true, alias: "canZoomOut", required: true }] }], zoomIn: [{ type: i0.Output, args: ["zoomIn"] }], zoomOut: [{ type: i0.Output, args: ["zoomOut"] }], reset: [{ type: i0.Output, args: ["reset"] }] } });
|
|
5049
5049
|
|
|
5050
5050
|
class GoogleMapComponent {
|
|
@@ -5159,13 +5159,13 @@ class GoogleMapComponent {
|
|
|
5159
5159
|
const isOffset = mapItem.trueLat !== undefined && mapItem.trueLng !== undefined;
|
|
5160
5160
|
const lastReading = isOffset ? mapItem.trueLat + ',' + mapItem.trueLng : mapItem.lat + ',' + mapItem.lng;
|
|
5161
5161
|
const offsetNotification = isOffset ? `<span>${this.translateService.instant('DASHBOARDS.MAP_WIDGET_OFFSET_NOTIFICATION')}</span>` : '';
|
|
5162
|
-
const infoWindowContent = `
|
|
5163
|
-
<div class="text-black flex flex-col gap-y-2 mt-4 !w-fit !h-fit select-none">
|
|
5164
|
-
<span class="font-bold">${mapItem.path}</span>
|
|
5165
|
-
<span>${lastReadingTime ? this.simpleDateTimePipe.transform(lastReadingTime) : ''}</span>
|
|
5166
|
-
<span class="font-bold mt-4">${lastReading}</span>
|
|
5167
|
-
${offsetNotification}
|
|
5168
|
-
</div>
|
|
5162
|
+
const infoWindowContent = `
|
|
5163
|
+
<div class="text-black flex flex-col gap-y-2 mt-4 !w-fit !h-fit select-none">
|
|
5164
|
+
<span class="font-bold">${mapItem.path}</span>
|
|
5165
|
+
<span>${lastReadingTime ? this.simpleDateTimePipe.transform(lastReadingTime) : ''}</span>
|
|
5166
|
+
<span class="font-bold mt-4">${lastReading}</span>
|
|
5167
|
+
${offsetNotification}
|
|
5168
|
+
</div>
|
|
5169
5169
|
`;
|
|
5170
5170
|
const infoWindow = new google.maps.InfoWindow({
|
|
5171
5171
|
content: infoWindowContent,
|
|
@@ -5173,10 +5173,10 @@ class GoogleMapComponent {
|
|
|
5173
5173
|
pixelOffset: new google.maps.Size(0, -4)
|
|
5174
5174
|
});
|
|
5175
5175
|
const pin = document.createElement('div');
|
|
5176
|
-
pin.innerHTML = `
|
|
5177
|
-
<svg width="48" height="48" viewBox="0 0 24 24" fill="${mapItem.color}">
|
|
5178
|
-
<path d="M10.453 14.016zM12 2.016q2.906 0 4.945 2.039t2.039 4.945q0 1.453-.727 3.328t-1.758 3.516-2.039 3.07-1.711 2.273l-.75.797q-.281-.328-.75-.867t-1.688-2.156-2.133-3.141-1.664-3.445-.75-3.375q0-2.906 2.039-4.945t4.945-2.039z"></path>
|
|
5179
|
-
</svg>
|
|
5176
|
+
pin.innerHTML = `
|
|
5177
|
+
<svg width="48" height="48" viewBox="0 0 24 24" fill="${mapItem.color}">
|
|
5178
|
+
<path d="M10.453 14.016zM12 2.016q2.906 0 4.945 2.039t2.039 4.945q0 1.453-.727 3.328t-1.758 3.516-2.039 3.07-1.711 2.273l-.75.797q-.281-.328-.75-.867t-1.688-2.156-2.133-3.141-1.664-3.445-.75-3.375q0-2.906 2.039-4.945t4.945-2.039z"></path>
|
|
5179
|
+
</svg>
|
|
5180
5180
|
`;
|
|
5181
5181
|
const marker = new google.maps.marker.AdvancedMarkerElement({
|
|
5182
5182
|
position: { lat: +mapItem.lat, lng: +mapItem.lng },
|
|
@@ -5238,11 +5238,11 @@ class GoogleMapComponent {
|
|
|
5238
5238
|
return result;
|
|
5239
5239
|
}
|
|
5240
5240
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GoogleMapComponent, deps: [{ token: i1$1.TranslateService }, { token: SimpleDateTimePipe }], target: i0.ɵɵFactoryTarget.Component });
|
|
5241
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: GoogleMapComponent, isStandalone: true, selector: "app-google-map", inputs: { googleMapId: { classPropertyName: "googleMapId", publicName: "googleMapId", isSignal: true, isRequired: true, transformFunction: null }, darkTheme: { classPropertyName: "darkTheme", publicName: "darkTheme", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, pinColor: { classPropertyName: "pinColor", publicName: "pinColor", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { markerClicked: "markerClicked" }, providers: [SimpleDateTimePipe], viewQueries: [{ propertyName: "map", first: true, predicate: GoogleMap, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"map-wrapper\">\
|
|
5241
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: GoogleMapComponent, isStandalone: true, selector: "app-google-map", inputs: { googleMapId: { classPropertyName: "googleMapId", publicName: "googleMapId", isSignal: true, isRequired: true, transformFunction: null }, darkTheme: { classPropertyName: "darkTheme", publicName: "darkTheme", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, pinColor: { classPropertyName: "pinColor", publicName: "pinColor", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { markerClicked: "markerClicked" }, providers: [SimpleDateTimePipe], viewQueries: [{ propertyName: "map", first: true, predicate: GoogleMap, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"map-wrapper\">\n <google-map height=\"100%\" width=\"100%\" [options]=\"mapOptions()\" [zoom]=\"zoom()\" (zoomChanged)=\"syncZoom()\" class=\"map-full\"/>\n <app-zoom-controls\n style=\"z-index: 200\"\n [zoomPercentage]=\"zoomPercentage()\"\n [canZoomIn]=\"canZoomIn()\"\n [canZoomOut]=\"canZoomOut()\"\n (zoomIn)=\"changeZoom(+1)\"\n (zoomOut)=\"changeZoom(-1)\"\n (reset)=\"fitToMarkers()\"\n ></app-zoom-controls>\n</div>\n", styles: [".map-wrapper{position:relative;display:flex;width:100%;height:100%}.map-full{width:100%;height:100%}\n"], dependencies: [{ kind: "component", type: GoogleMap, selector: "google-map", inputs: ["height", "width", "mapId", "mapTypeId", "center", "zoom", "options"], outputs: ["mapInitialized", "authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }, { kind: "ngmodule", type: SharedModule }, { kind: "component", type: ZoomControlsComponent, selector: "app-zoom-controls", inputs: ["zoomPercentage", "canZoomIn", "canZoomOut"], outputs: ["zoomIn", "zoomOut", "reset"] }] });
|
|
5242
5242
|
}
|
|
5243
5243
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GoogleMapComponent, decorators: [{
|
|
5244
5244
|
type: Component,
|
|
5245
|
-
args: [{ selector: 'app-google-map', imports: [GoogleMap, SharedModule, ZoomControlsComponent], providers: [SimpleDateTimePipe], template: "<div class=\"map-wrapper\">\
|
|
5245
|
+
args: [{ selector: 'app-google-map', imports: [GoogleMap, SharedModule, ZoomControlsComponent], providers: [SimpleDateTimePipe], template: "<div class=\"map-wrapper\">\n <google-map height=\"100%\" width=\"100%\" [options]=\"mapOptions()\" [zoom]=\"zoom()\" (zoomChanged)=\"syncZoom()\" class=\"map-full\"/>\n <app-zoom-controls\n style=\"z-index: 200\"\n [zoomPercentage]=\"zoomPercentage()\"\n [canZoomIn]=\"canZoomIn()\"\n [canZoomOut]=\"canZoomOut()\"\n (zoomIn)=\"changeZoom(+1)\"\n (zoomOut)=\"changeZoom(-1)\"\n (reset)=\"fitToMarkers()\"\n ></app-zoom-controls>\n</div>\n", styles: [".map-wrapper{position:relative;display:flex;width:100%;height:100%}.map-full{width:100%;height:100%}\n"] }]
|
|
5246
5246
|
}], ctorParameters: () => [{ type: i1$1.TranslateService }, { type: SimpleDateTimePipe }], propDecorators: { map: [{ type: i0.ViewChild, args: [i0.forwardRef(() => GoogleMap), { isSignal: true }] }], googleMapId: [{ type: i0.Input, args: [{ isSignal: true, alias: "googleMapId", required: true }] }], darkTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "darkTheme", required: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], pinColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinColor", required: true }] }], markerClicked: [{ type: i0.Output, args: ["markerClicked"] }] } });
|
|
5247
5247
|
|
|
5248
5248
|
class ImagePreviewComponent {
|
|
@@ -5281,11 +5281,11 @@ class ImagePreviewComponent {
|
|
|
5281
5281
|
return image !== null && image.constructor.name === 'SafeHtmlImpl';
|
|
5282
5282
|
}
|
|
5283
5283
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ImagePreviewComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
|
|
5284
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ImagePreviewComponent, isStandalone: true, selector: "app-image-preview", viewQueries: [{ propertyName: "image", first: true, predicate: ["imageElement"], descendants: true }, { propertyName: "svgElement", first: true, predicate: ["svgElement"], descendants: true }], ngImport: i0, template: "<div class=\"relative overflow-hidden image-wrapper flex flex-col items-center justify-center\" [ngStyle]=\"dimensionStyles() ? dimensionStyles() : {'opacity': '0'}\">\
|
|
5284
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ImagePreviewComponent, isStandalone: true, selector: "app-image-preview", viewQueries: [{ propertyName: "image", first: true, predicate: ["imageElement"], descendants: true }, { propertyName: "svgElement", first: true, predicate: ["svgElement"], descendants: true }], ngImport: i0, template: "<div class=\"relative overflow-hidden image-wrapper flex flex-col items-center justify-center\" [ngStyle]=\"dimensionStyles() ? dimensionStyles() : {'opacity': '0'}\">\n <mat-icon class=\"absolute top-4 right-4 hover:cursor-pointer text-mat-sys-on-error-container\" matDialogClose>close</mat-icon>\n @if (!isHtml(data.image)) {\n <img #imageElement [attr.src]=\"data.image\" alt=\"ImagePreview\"/>\n } @else {\n <div #svgElement class=\"p-4\" [innerHTML]=\"data.image\"></div>\n }\n</div>\n", styles: [".image-wrapper{min-height:124px;min-width:124px}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$5.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
5285
5285
|
}
|
|
5286
5286
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ImagePreviewComponent, decorators: [{
|
|
5287
5287
|
type: Component,
|
|
5288
|
-
args: [{ selector: 'app-image-preview', imports: [SharedModule], template: "<div class=\"relative overflow-hidden image-wrapper flex flex-col items-center justify-center\" [ngStyle]=\"dimensionStyles() ? dimensionStyles() : {'opacity': '0'}\">\
|
|
5288
|
+
args: [{ selector: 'app-image-preview', imports: [SharedModule], template: "<div class=\"relative overflow-hidden image-wrapper flex flex-col items-center justify-center\" [ngStyle]=\"dimensionStyles() ? dimensionStyles() : {'opacity': '0'}\">\n <mat-icon class=\"absolute top-4 right-4 hover:cursor-pointer text-mat-sys-on-error-container\" matDialogClose>close</mat-icon>\n @if (!isHtml(data.image)) {\n <img #imageElement [attr.src]=\"data.image\" alt=\"ImagePreview\"/>\n } @else {\n <div #svgElement class=\"p-4\" [innerHTML]=\"data.image\"></div>\n }\n</div>\n", styles: [".image-wrapper{min-height:124px;min-width:124px}\n"] }]
|
|
5289
5289
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
5290
5290
|
type: Inject,
|
|
5291
5291
|
args: [MAT_DIALOG_DATA]
|
|
@@ -5320,21 +5320,21 @@ class ImageDisplayComponent {
|
|
|
5320
5320
|
});
|
|
5321
5321
|
}
|
|
5322
5322
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ImageDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5323
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ImageDisplayComponent, isStandalone: true, selector: "app-image-display", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (imageUrl(); as image) {\
|
|
5323
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ImageDisplayComponent, isStandalone: true, selector: "app-image-display", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (imageUrl(); as image) {\n @if (isHtml(image)) {\n <div (click)=\"openImage(image)\" [innerHTML]=\"image\" class=\"max-h-full h-full w-full object-contain block mt-1 hover:cursor-pointer\"></div>\n } @else {\n <img (click)=\"openImage(image)\" [attr.src]=\"image\" class=\"max-h-full h-full w-full object-contain block mt-1 hover:cursor-pointer\" alt=\"\"/>\n }\n}\n", styles: [""] });
|
|
5324
5324
|
}
|
|
5325
5325
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ImageDisplayComponent, decorators: [{
|
|
5326
5326
|
type: Component,
|
|
5327
|
-
args: [{ selector: 'app-image-display', imports: [], template: "@if (imageUrl(); as image) {\
|
|
5327
|
+
args: [{ selector: 'app-image-display', imports: [], template: "@if (imageUrl(); as image) {\n @if (isHtml(image)) {\n <div (click)=\"openImage(image)\" [innerHTML]=\"image\" class=\"max-h-full h-full w-full object-contain block mt-1 hover:cursor-pointer\"></div>\n } @else {\n <img (click)=\"openImage(image)\" [attr.src]=\"image\" class=\"max-h-full h-full w-full object-contain block mt-1 hover:cursor-pointer\" alt=\"\"/>\n }\n}\n" }]
|
|
5328
5328
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }] } });
|
|
5329
5329
|
|
|
5330
5330
|
class LabeledValueComponent {
|
|
5331
5331
|
name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
|
|
5332
5332
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LabeledValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5333
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: LabeledValueComponent, isStandalone: true, selector: "app-labeled-value", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-row gap-x-2 items-center\">\
|
|
5333
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: LabeledValueComponent, isStandalone: true, selector: "app-labeled-value", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-row gap-x-2 items-center\">\n <div class=\"font-bold\">{{ name() | translate }}:</div>\n <div class=\"flex flex-row items-center gap-x-2\">\n <ng-content/>\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
|
|
5334
5334
|
}
|
|
5335
5335
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LabeledValueComponent, decorators: [{
|
|
5336
5336
|
type: Component,
|
|
5337
|
-
args: [{ selector: 'app-labeled-value', imports: [TranslateModule], template: "<div class=\"flex flex-row gap-x-2 items-center\">\
|
|
5337
|
+
args: [{ selector: 'app-labeled-value', imports: [TranslateModule], template: "<div class=\"flex flex-row gap-x-2 items-center\">\n <div class=\"font-bold\">{{ name() | translate }}:</div>\n <div class=\"flex flex-row items-center gap-x-2\">\n <ng-content/>\n </div>\n</div>\n" }]
|
|
5338
5338
|
}], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }] } });
|
|
5339
5339
|
|
|
5340
5340
|
class LoadedIconComponent {
|
|
@@ -5368,11 +5368,11 @@ class LoadedIconComponent {
|
|
|
5368
5368
|
this.sanitizer = sanitizer;
|
|
5369
5369
|
}
|
|
5370
5370
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LoadedIconComponent, deps: [{ token: i1$6.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
|
|
5371
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: LoadedIconComponent, isStandalone: true, selector: "app-loaded-icon", inputs: { iconRequest: { classPropertyName: "iconRequest", publicName: "iconRequest", isSignal: true, isRequired: true, transformFunction: null }, defaultIcon: { classPropertyName: "defaultIcon", publicName: "defaultIcon", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div [style.height.px]=\"size()\" [style.width.px]=\"size()\">\
|
|
5371
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: LoadedIconComponent, isStandalone: true, selector: "app-loaded-icon", inputs: { iconRequest: { classPropertyName: "iconRequest", publicName: "iconRequest", isSignal: true, isRequired: true, transformFunction: null }, defaultIcon: { classPropertyName: "defaultIcon", publicName: "defaultIcon", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div [style.height.px]=\"size()\" [style.width.px]=\"size()\">\n @if (icon() | async; as icon) {\n <div [innerHTML]=\"icon\"></div>\n } @else {\n @if (isSvgIcon(); as icon) {\n <mat-icon [svgIcon]=\"icon.id\"></mat-icon>\n } @else {\n <mat-icon>{{ defaultIcon() }}</mat-icon>\n }\n }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }] });
|
|
5372
5372
|
}
|
|
5373
5373
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LoadedIconComponent, decorators: [{
|
|
5374
5374
|
type: Component,
|
|
5375
|
-
args: [{ selector: 'app-loaded-icon', imports: [SharedModule], template: "<div [style.height.px]=\"size()\" [style.width.px]=\"size()\">\
|
|
5375
|
+
args: [{ selector: 'app-loaded-icon', imports: [SharedModule], template: "<div [style.height.px]=\"size()\" [style.width.px]=\"size()\">\n @if (icon() | async; as icon) {\n <div [innerHTML]=\"icon\"></div>\n } @else {\n @if (isSvgIcon(); as icon) {\n <mat-icon [svgIcon]=\"icon.id\"></mat-icon>\n } @else {\n <mat-icon>{{ defaultIcon() }}</mat-icon>\n }\n }\n</div>\n" }]
|
|
5376
5376
|
}], ctorParameters: () => [{ type: i1$6.DomSanitizer }], propDecorators: { iconRequest: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconRequest", required: true }] }], defaultIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultIcon", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: true }] }] } });
|
|
5377
5377
|
|
|
5378
5378
|
class IconComponent {
|
|
@@ -5386,13 +5386,13 @@ class IconComponent {
|
|
|
5386
5386
|
return !!icon && typeof icon === 'object' && Object.hasOwn(icon, 'id') ? icon : null;
|
|
5387
5387
|
}
|
|
5388
5388
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5389
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: IconComponent, isStandalone: true, selector: "app-icon", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"shrink-0 h-6\">\
|
|
5389
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: IconComponent, isStandalone: true, selector: "app-icon", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"shrink-0 h-6\">\n @if (isAsyncIcon(); as loadedIcon) {\n <app-loaded-icon [iconRequest]=\"loadedIcon.data\" [defaultIcon]=\"loadedIcon.defaultIcon\" [size]=\"24\"/>\n }\n @if (isSvgIcon(); as svgIcon) {\n <mat-icon [svgIcon]=\"svgIcon.id\"></mat-icon>\n }\n @if (typeof icon() === 'string') {\n <mat-icon>{{ icon() }}</mat-icon>\n }\n @if (typeof icon() === 'number') {\n <span class=\"flex items-center justify-center shrink-0 min-w-5 h-5 px-1.5 rounded-full text-[11px] bg-mat-sys-primary text-mat-sys-on-primary\">{{ icon() }}</span>\n }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: LoadedIconComponent, selector: "app-loaded-icon", inputs: ["iconRequest", "defaultIcon", "size"] }] });
|
|
5390
5390
|
}
|
|
5391
5391
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: IconComponent, decorators: [{
|
|
5392
5392
|
type: Component,
|
|
5393
5393
|
args: [{ selector: 'app-icon', imports: [
|
|
5394
5394
|
SharedModule, LoadedIconComponent, MatIcon
|
|
5395
|
-
], template: "<div class=\"shrink-0 h-6\">\
|
|
5395
|
+
], template: "<div class=\"shrink-0 h-6\">\n @if (isAsyncIcon(); as loadedIcon) {\n <app-loaded-icon [iconRequest]=\"loadedIcon.data\" [defaultIcon]=\"loadedIcon.defaultIcon\" [size]=\"24\"/>\n }\n @if (isSvgIcon(); as svgIcon) {\n <mat-icon [svgIcon]=\"svgIcon.id\"></mat-icon>\n }\n @if (typeof icon() === 'string') {\n <mat-icon>{{ icon() }}</mat-icon>\n }\n @if (typeof icon() === 'number') {\n <span class=\"flex items-center justify-center shrink-0 min-w-5 h-5 px-1.5 rounded-full text-[11px] bg-mat-sys-primary text-mat-sys-on-primary\">{{ icon() }}</span>\n }\n</div>\n" }]
|
|
5396
5396
|
}], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }] } });
|
|
5397
5397
|
|
|
5398
5398
|
class LocalSortTableComponent {
|
|
@@ -5452,7 +5452,7 @@ class LocalSortTableComponent {
|
|
|
5452
5452
|
}
|
|
5453
5453
|
}
|
|
5454
5454
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LocalSortTableComponent, deps: [{ token: TenantPropertiesService }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
|
|
5455
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: LocalSortTableComponent, isStandalone: true, selector: "app-local-sort-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, translationPrefix: { classPropertyName: "translationPrefix", publicName: "translationPrefix", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, noValuesMessage: { classPropertyName: "noValuesMessage", publicName: "noValuesMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected" }, ngImport: i0, template: "<table>\
|
|
5455
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: LocalSortTableComponent, isStandalone: true, selector: "app-local-sort-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, translationPrefix: { classPropertyName: "translationPrefix", publicName: "translationPrefix", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, noValuesMessage: { classPropertyName: "noValuesMessage", publicName: "noValuesMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected" }, ngImport: i0, template: "<table>\n <thead>\n <tr>\n @for (column of columns(); track column.name) {\n <th class=\"!font-medium truncate\" [ngClass]=\"{'sort-field': column.shouldSort, 'cursor-pointer': column.shouldSort}\" (click)=\"column.shouldSort ? sort(column.name) : undefined\">\n <div class=\"flex flex-row items-center gap-x-2\">\n {{ (translationPrefix().toUpperCase() +column.name.toUpperCase()) | translate }}\n @if (column.shouldSort) {\n <mat-icon>{{ sortDirection === 'asc' ? 'arrow_upward' : 'arrow_downward' }}</mat-icon>\n }\n </div>\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @if (loading()) {\n <div class=\"w-full h-full flex flex-col justify-center items-center\">\n <mat-spinner diameter=\"30\"></mat-spinner>\n </div>\n } @else {\n @if (displayData(); as displayData){\n @if (!noValuesMessage()) {\n @if (!sorting()) {\n <cdk-virtual-scroll-viewport [itemSize]=\"56\" class=\"viewport\">\n <tr *cdkVirtualFor=\"let element of displayData\" (click)=\"itemSelected.emit(element)\">\n @for (column of columns(); track column.name) {\n <td class=\"cursor-pointer truncate\">\n <span [matTooltip]=\"column.shouldTranslateValue ? ((translationPrefix() + element[column.name]) | translate) : element[column.name]\">\n {{ column.shouldTranslateValue ? ((translationPrefix() + element[column.name]) | translate) : element[column.name] }}\n </span>\n }\n </tr>\n </cdk-virtual-scroll-viewport>\n }\n } @else {\n <div class=\"w-full h-full flex flex-col justify-center items-center\">\n <span>{{ noValuesMessage() | translate }}</span>\n </div>\n }\n }\n }\n </tbody>\n</table>\n", styles: [":host{display:block;overflow:hidden;height:100%;width:100%}table{height:100%;width:100%;display:block}table thead{height:56px}table tbody{display:block;height:calc(100% - 56px);width:100%;overflow:hidden}table tbody tr:hover{background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container)}table th,table td{padding-left:1rem;text-align:left;vertical-align:middle;border-bottom:1px solid var(--mat-sys-outline-variant)}tr{height:56px;display:table;table-layout:fixed;width:100%}.viewport{display:block;width:100%;height:100%;overflow:auto}.sort-field mat-icon{font-size:18px;line-height:18px;height:18px;width:18px;opacity:0;transition:all ease-in .2s}.sort-field:hover mat-icon{opacity:1}\n"], dependencies: [{ kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
|
|
5456
5456
|
}
|
|
5457
5457
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LocalSortTableComponent, decorators: [{
|
|
5458
5458
|
type: Component,
|
|
@@ -5462,7 +5462,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
5462
5462
|
CdkVirtualScrollViewport,
|
|
5463
5463
|
SharedModule,
|
|
5464
5464
|
TranslatePipe
|
|
5465
|
-
], template: "<table>\
|
|
5465
|
+
], template: "<table>\n <thead>\n <tr>\n @for (column of columns(); track column.name) {\n <th class=\"!font-medium truncate\" [ngClass]=\"{'sort-field': column.shouldSort, 'cursor-pointer': column.shouldSort}\" (click)=\"column.shouldSort ? sort(column.name) : undefined\">\n <div class=\"flex flex-row items-center gap-x-2\">\n {{ (translationPrefix().toUpperCase() +column.name.toUpperCase()) | translate }}\n @if (column.shouldSort) {\n <mat-icon>{{ sortDirection === 'asc' ? 'arrow_upward' : 'arrow_downward' }}</mat-icon>\n }\n </div>\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @if (loading()) {\n <div class=\"w-full h-full flex flex-col justify-center items-center\">\n <mat-spinner diameter=\"30\"></mat-spinner>\n </div>\n } @else {\n @if (displayData(); as displayData){\n @if (!noValuesMessage()) {\n @if (!sorting()) {\n <cdk-virtual-scroll-viewport [itemSize]=\"56\" class=\"viewport\">\n <tr *cdkVirtualFor=\"let element of displayData\" (click)=\"itemSelected.emit(element)\">\n @for (column of columns(); track column.name) {\n <td class=\"cursor-pointer truncate\">\n <span [matTooltip]=\"column.shouldTranslateValue ? ((translationPrefix() + element[column.name]) | translate) : element[column.name]\">\n {{ column.shouldTranslateValue ? ((translationPrefix() + element[column.name]) | translate) : element[column.name] }}\n </span>\n }\n </tr>\n </cdk-virtual-scroll-viewport>\n }\n } @else {\n <div class=\"w-full h-full flex flex-col justify-center items-center\">\n <span>{{ noValuesMessage() | translate }}</span>\n </div>\n }\n }\n }\n </tbody>\n</table>\n", styles: [":host{display:block;overflow:hidden;height:100%;width:100%}table{height:100%;width:100%;display:block}table thead{height:56px}table tbody{display:block;height:calc(100% - 56px);width:100%;overflow:hidden}table tbody tr:hover{background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container)}table th,table td{padding-left:1rem;text-align:left;vertical-align:middle;border-bottom:1px solid var(--mat-sys-outline-variant)}tr{height:56px;display:table;table-layout:fixed;width:100%}.viewport{display:block;width:100%;height:100%;overflow:auto}.sort-field mat-icon{font-size:18px;line-height:18px;height:18px;width:18px;opacity:0;transition:all ease-in .2s}.sort-field:hover mat-icon{opacity:1}\n"] }]
|
|
5466
5466
|
}], ctorParameters: () => [{ type: TenantPropertiesService }, { type: i1$1.TranslateService }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], translationPrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "translationPrefix", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], noValuesMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noValuesMessage", required: false }] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }] } });
|
|
5467
5467
|
|
|
5468
5468
|
class MasterDetailsViewComponent {
|
|
@@ -5484,11 +5484,11 @@ class MasterDetailsViewComponent {
|
|
|
5484
5484
|
}
|
|
5485
5485
|
}, ...(ngDevMode ? [{ debugName: "width" }] : []));
|
|
5486
5486
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MasterDetailsViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5487
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: MasterDetailsViewComponent, isStandalone: true, selector: "app-master-details-view", inputs: { displayRatio: { classPropertyName: "displayRatio", publicName: "displayRatio", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex h-full w-full min-w-full min-h-full pt-2 overflow-hidden bg-base-color-50\">\
|
|
5487
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: MasterDetailsViewComponent, isStandalone: true, selector: "app-master-details-view", inputs: { displayRatio: { classPropertyName: "displayRatio", publicName: "displayRatio", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex h-full w-full min-w-full min-h-full pt-2 overflow-hidden bg-base-color-50\">\n <div class=\"pr-4 flex shrink-0 grow-0\" [style.width]=\"width()\" [style.max-width]=\"width()\">\n <ng-content select=\"[app-master]\"/>\n </div>\n <mat-divider [vertical]=\"true\"/>\n <div class=\"pl-4 flex shrink grow overflow-hidden\">\n <ng-content select=\"[app-details]\"/>\n </div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i1$7.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] });
|
|
5488
5488
|
}
|
|
5489
5489
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MasterDetailsViewComponent, decorators: [{
|
|
5490
5490
|
type: Component,
|
|
5491
|
-
args: [{ selector: 'app-master-details-view', imports: [SharedModule], template: "<div class=\"flex h-full w-full min-w-full min-h-full pt-2 overflow-hidden bg-base-color-50\">\
|
|
5491
|
+
args: [{ selector: 'app-master-details-view', imports: [SharedModule], template: "<div class=\"flex h-full w-full min-w-full min-h-full pt-2 overflow-hidden bg-base-color-50\">\n <div class=\"pr-4 flex shrink-0 grow-0\" [style.width]=\"width()\" [style.max-width]=\"width()\">\n <ng-content select=\"[app-master]\"/>\n </div>\n <mat-divider [vertical]=\"true\"/>\n <div class=\"pl-4 flex shrink grow overflow-hidden\">\n <ng-content select=\"[app-details]\"/>\n </div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%;overflow:hidden}\n"] }]
|
|
5492
5492
|
}], propDecorators: { displayRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayRatio", required: false }] }] } });
|
|
5493
5493
|
|
|
5494
5494
|
class NestedListViewComponent {
|
|
@@ -5621,13 +5621,20 @@ class NestedListViewComponent {
|
|
|
5621
5621
|
this.children.update(children => [...children, newChild].sort(dataSource.sortingFunction));
|
|
5622
5622
|
this.selectChild(newChild);
|
|
5623
5623
|
});
|
|
5624
|
-
dataControl.itemRemoved$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((
|
|
5624
|
+
dataControl.itemRemoved$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((ids) => {
|
|
5625
5625
|
const breadcrumbs = this.breadcrumbs();
|
|
5626
|
-
const
|
|
5627
|
-
|
|
5628
|
-
|
|
5629
|
-
|
|
5630
|
-
|
|
5626
|
+
const breadcrumbIndex = breadcrumbs.findIndex(breadcrumb => ids.includes(breadcrumb.id));
|
|
5627
|
+
if (breadcrumbIndex !== -1) {
|
|
5628
|
+
this.breadcrumbs.update(breadcrumbs => breadcrumbs.slice(0, breadcrumbIndex));
|
|
5629
|
+
const lastItem = this.breadcrumbs()[this.breadcrumbs().length - 1];
|
|
5630
|
+
this.selectedItem.set(lastItem);
|
|
5631
|
+
this.itemSelected.emit(lastItem.data);
|
|
5632
|
+
}
|
|
5633
|
+
else {
|
|
5634
|
+
this.children.set(this.children().filter(child => !ids.includes(child.id)));
|
|
5635
|
+
}
|
|
5636
|
+
this.selectedItems.set([]);
|
|
5637
|
+
this.itemsSelected.emit([]);
|
|
5631
5638
|
});
|
|
5632
5639
|
dataControl.itemUpdated$.pipe(map((item) => dataSource.prepareItem(item, false, this.countsMap())), takeUntilDestroyed(this.destroyRef)).subscribe((updatedItem) => {
|
|
5633
5640
|
this.breadcrumbs.update(breadcrumbs => breadcrumbs.map(breadcrumb => breadcrumb.id === updatedItem.id ? updatedItem : breadcrumb));
|
|
@@ -5827,11 +5834,11 @@ class NestedListViewComponent {
|
|
|
5827
5834
|
this.children.update(items => items.map(item => item.id === guid ? { ...item, rightNumber } : item));
|
|
5828
5835
|
}
|
|
5829
5836
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NestedListViewComponent, deps: [{ token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
5830
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: NestedListViewComponent, isStandalone: true, selector: "app-nested-list-view", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, dataControl: { classPropertyName: "dataControl", publicName: "dataControl", isSignal: true, isRequired: true, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, disableThresholdId: { classPropertyName: "disableThresholdId", publicName: "disableThresholdId", isSignal: true, isRequired: false, transformFunction: null }, isColoredInput: { classPropertyName: "isColoredInput", publicName: "isColoredInput", isSignal: true, isRequired: false, transformFunction: null }, searchActions: { classPropertyName: "searchActions", publicName: "searchActions", isSignal: true, isRequired: false, transformFunction: null }, enableMultiSelect: { classPropertyName: "enableMultiSelect", publicName: "enableMultiSelect", isSignal: true, isRequired: false, transformFunction: null }, selectionConfirmationAction: { classPropertyName: "selectionConfirmationAction", publicName: "selectionConfirmationAction", isSignal: true, isRequired: false, transformFunction: null }, hideSearch: { classPropertyName: "hideSearch", publicName: "hideSearch", isSignal: true, isRequired: false, transformFunction: null }, rootButtonText: { classPropertyName: "rootButtonText", publicName: "rootButtonText", isSignal: true, isRequired: false, transformFunction: null }, enableDrag: { classPropertyName: "enableDrag", publicName: "enableDrag", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dragging: "dragging", itemSelected: "itemSelected", itemsSelected: "itemsSelected" }, host: { listeners: { "window:keydown": "onKeyDown($event)", "window:keyup": "onKeyUp($event)" } }, ngImport: i0, template: "<div class=\"container flex h-full w-full min-w-full min-h-full relative overflow-hidden\">\r\n <div [ngClass]=\"widthClass()\" class=\"master flex shrink-0 grow-0 min-w-0\">\r\n\r\n <!-- LISTING -->\r\n <div class=\"w-full h-full flex flex-col gap-y-2 relative\" [ngClass]=\"hideSearch() ? 'pt-2' : 'pt-1'\">\r\n\r\n <!-- HEADER -->\r\n <div class=\"flex w-full flex-row gap-x-2\">\r\n\r\n <!-- SEARCH -->\r\n @if (!hideSearch()) {\r\n <div class=\"flex shrink grow flex-row pt-1 gap-x-2 overflow-hidden\">\r\n <mat-form-field class=\"flex grow shrink small-input search-control\" (keydown.shift)=\"$event.stopPropagation()\" (keydown.enter)=\"defaultSearchAction()?.action({parent: this.selectedItem()?.data, control: this.nameSearchControl})\" [ngClass]=\"{'colored-input': isColoredInput()}\">\r\n <mat-label>{{ 'COMMON.SEARCH_IMMEDIATE_CHILDREN' | translate }}</mat-label>\r\n <input matInput type=\"text\" [formControl]=\"nameSearchControl\">\r\n <mat-icon matSuffix>search</mat-icon>\r\n </mat-form-field>\r\n @if (defaultSearchAction(); as defaultAction) {\r\n <div [matTooltip]=\"defaultAction.disabledTooltip ? (defaultAction.disabledTooltip | translate) : ''\" [matTooltipDisabled]=\"defaultAction.disableCondition ? !defaultAction.disableCondition({control: nameSearchControl}) : true\">\r\n <button mat-mini-fab [disabled]=\"defaultAction.disableCondition ? defaultAction.disableCondition({control: nameSearchControl}) : false\" (click)=\"defaultAction.action({parent: this.selectedItem()?.data, control: this.nameSearchControl})\" [matTooltip]=\"defaultAction.name | translate\">\r\n <mat-icon [svgIcon]=\"defaultAction.icon.id\"/>\r\n </button>\r\n </div>\r\n }\r\n @for (action of otherSearchActions(); track $index) {\r\n @if (action.condition() | async) {\r\n <div [matTooltip]=\"action.disabledTooltip ? (action.disabledTooltip | translate) : ''\" [matTooltipDisabled]=\"action.disableCondition ? !action.disableCondition() : true\">\r\n <button mat-mini-fab [disabled]=\"action.disableCondition ? action.disableCondition() : false\" (click)=\"action.action()\" [matTooltip]=\"action.name | translate\">\r\n <mat-icon [svgIcon]=\"action.icon.id\"/>\r\n </button>\r\n </div>\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- LIST -->\r\n <div class=\"flex flex-col w-full h-full relative overflow-hidden\">\r\n\r\n <!-- BREADCRUMBS -->\r\n <div class=\"max-h-[50%] overflow-auto shrink-0\" [overflowClass]=\"'pr-4'\">\r\n @if (!loadingBreadcrumbs()) {\r\n @if (breadcrumbs(); as items) {\r\n <div class=\"flex flex-col w-full overflow-x-hidden\">\r\n @for (item of items; let i = $index; track i) {\r\n @if (selectedItem() && hasMultipleRoots() && i === 0) {\r\n <mat-card (click)=\"resetNavigation()\" class=\"mb-2 cursor-pointer regular-item hover:bg-hover-color\" [ngClass]=\"disableThresholdId() ? 'bg-disabled-color opacity-50 hover:cursor-auto pointer-events-none disabled-item' : ''\">\r\n <div class=\"px-3 flex flex-row items-center gap-x-2 item-card\">\r\n <div class=\"shrink-0 h-6\">\r\n <mat-icon>arrow_upward</mat-icon>\r\n </div>\r\n <span class=\"text-mat-sys-on-surface\">{{ rootButtonText() | translate: {default: rootButtonText()} }}</span>\r\n </div>\r\n </mat-card>\r\n }\r\n <mat-card class=\"mb-2 cursor-pointer\" (click)=\"selectBreadcrumb(item)\"\r\n [dndDraggable]=\"item.data\" [dndDisableDragIf]=\"!enableDrag() || !!shouldDisableBreadcrumbClick(item)\" (dndStart)=\"dragStart($event, item.data)\" (dndEnd)=\"isDragging.set(false)\"\r\n [ngClass]=\"[isBreadcrumbSelected(item) ? 'selected-item' : 'regular-item hover:bg-hover-color', selectedItems().length ? 'opacity-50' : '', shouldDisableBreadcrumbClick(item) ? 'bg-disabled-color opacity-50 hover:cursor-auto pointer-events-none disabled-item' : '']\"\r\n [appScrollIntoView]=\"isBreadcrumbSelected(item)\" [matTooltip]=\"item.name\" matTooltipPosition=\"right\">\r\n <div class=\"px-3 flex flex-row items-center justify-between gap-x-2 item-card\">\r\n <div class=\"flex flex-row grow items-center gap-x-2 overflow-hidden\">\r\n @if (item.icon; as icon) {\r\n <app-icon [icon]=\"icon\"/>\r\n }\r\n <span [ngClass]=\"[isBreadcrumbSelected(item) ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface']\" class=\"truncate\">{{ item.name }}</span>\r\n </div>\r\n @if (item.rightNumber && item.rightNumber > 0) {\r\n <span class=\"flex items-center justify-center shrink-0 min-w-5 h-5 px-1.5 rounded-full text-[11px] font-semibold\" [ngClass]=\"isBreadcrumbSelected(item) ? 'bg-transparent text-mat-sys-surface-container' : 'bg-mat-sys-primary text-mat-sys-on-primary'\">{{ item.rightNumber }}</span>\r\n } @else if (enableDrag() && !shouldDisableBreadcrumbClick(item)) {\r\n <mat-icon>drag_indicator</mat-icon>\r\n }\r\n </div>\r\n </mat-card>\r\n }\r\n </div>\r\n }\r\n }\r\n </div>\r\n\r\n <mat-divider class=\"w-full pb-2\"/>\r\n\r\n <!-- CHILDREN -->\r\n @if (selectedItem()) {\r\n <div class=\"flex-1 overflow-auto min-h-0\" [overflowClass]=\"'pr-4'\">\r\n @if (!loadingChildren()) {\r\n @if (filteredChildren(); as items) {\r\n @if (items.length) {\r\n <div class=\"flex flex-col w-full overflow-y-auto overflow-x-hidden\">\r\n @for (item of items; track $index) {\r\n <mat-card class=\"mb-2 cursor-pointer\" [ngClass]=\"[isChildSelected(item) ? 'selected-item' : 'regular-item hover:bg-hover-color', shiftPressed() ? 'no-select-item' : '', (ctrlPressed() || shiftPressed()) && item.bulkSelectDisabled ? 'bg-disabled-color opacity-50 hover:cursor-auto disabled-item' : '']\" (click)=\"selectChild(item)\" [matTooltip]=\"(ctrlPressed() || shiftPressed()) && item.bulkSelectDisabled && item.bulkSelectDisabledTooltip ? (item.bulkSelectDisabledTooltip | translate) : item.name\" matTooltipPosition=\"right\"\r\n [dndDraggable]=\"item.data\" [dndDisableDragIf]=\"!enableDrag()\" (dndStart)=\"dragStart($event, item.data)\" (dndEnd)=\"isDragging.set(false)\">\r\n <div class=\"px-3 flex flex-row items-center justify-between gap-x-2 item-card\">\r\n <div class=\"flex flex-row grow items-center gap-x-2 overflow-hidden\">\r\n @if (item.icon; as icon) {\r\n <app-icon [icon]=\"icon\"/>\r\n }\r\n <span [ngClass]=\"isChildSelected(item) ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface'\" class=\"truncate\">{{ item.name }}</span>\r\n </div>\r\n @if (item.rightNumber && item.rightNumber > 0) {\r\n <span class=\"flex items-center justify-center shrink-0 min-w-5 h-5 px-1.5 rounded-full text-[11px] font-semibold\" [ngClass]=\"isChildSelected(item) ? 'bg-transparent text-mat-sys-surface-container' : 'bg-mat-sys-primary text-mat-sys-on-primary'\">{{ item.rightNumber }}</span>\r\n } @else if (enableDrag()) {\r\n <mat-icon>drag_indicator</mat-icon>\r\n }\r\n </div>\r\n </mat-card>\r\n }\r\n </div>\r\n } @else {\r\n <div class=\"flex flex-col grow justify-center items-center\">\r\n <ng-content select=\"[app-no-items-message]\"/>\r\n </div>\r\n }\r\n }\r\n } @else {\r\n <div class=\"flex flex-col grow justify-center items-center\">\r\n <mat-spinner diameter=\"30\"></mat-spinner>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- ACTIONS (bottom right of the listing) -->\r\n <div class=\"absolute bottom-0 right-0 z-10\">\r\n <ng-content select=\"[app-actions]\"/>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n @if (width() !== 'full') {\r\n <mat-divider [vertical]=\"true\" class=\"relative top-2\"/>\r\n\r\n <!-- DETAILS -->\r\n <div class=\"details flex shrink grow overflow-hidden pt-2\">\r\n @if (!selectedItems().length) {\r\n <ng-content select=\"[app-details]\"/>\r\n } @else {\r\n <div class=\"h-full w-full flex flex-col items-center justify-center relative\">\r\n <div class=\"flex flex-col items-center justify-center\">\r\n <mat-checkbox class=\"w-full\"\r\n [checked]=\"selectedItems().length === allSelectableItems().length\"\r\n (change)=\"toggleSelectAll()\">\r\n {{ 'COMMON.SELECT_ALL' | translate }}\r\n </mat-checkbox>\r\n <mat-divider class=\"w-full !mb-2 !mt-2\"></mat-divider>\r\n <span>{{ 'COMMON.NUMBER_OF_ITEMS_SELECTED' | translate: {numberOfItems: selectedItems().length} }} </span>\r\n </div>\r\n <div class=\"absolute bottom-0 right-0\">\r\n <ng-content select=\"[app-bulk-actions]\"/>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [":host{display:block;height:100%;width:100%;overflow:hidden}mat-card,.item-card{height:40px!important}.container{background-color:var(--base-color-50)}.container .master{padding-right:16px}.container .details{padding-left:16px}.selected-item{background:var(--mat-sys-primary);fill:var(--mat-sys-on-primary);color:var(--mat-sys-on-primary)}.regular-item{fill:var(--mat-sys-primary);color:var(--mat-sys-primary)}.disabled-item{color:unset}.disabled-item:hover{background-color:var(--neutral-variant-color-60)!important}.disabled-item span{color:unset!important}.no-select-item{user-select:none;-webkit-user-select:none}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i1$4.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i1$7.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: ScrollIntoViewDirective, selector: "[appScrollIntoView]", inputs: ["appScrollIntoView"] }, { kind: "directive", type: OverflowClassDirective, selector: "[overflowClass]", inputs: ["overflowClass"] }, { kind: "directive", type: DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["icon"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }] });
|
|
5837
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: NestedListViewComponent, isStandalone: true, selector: "app-nested-list-view", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, dataControl: { classPropertyName: "dataControl", publicName: "dataControl", isSignal: true, isRequired: true, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, disableThresholdId: { classPropertyName: "disableThresholdId", publicName: "disableThresholdId", isSignal: true, isRequired: false, transformFunction: null }, isColoredInput: { classPropertyName: "isColoredInput", publicName: "isColoredInput", isSignal: true, isRequired: false, transformFunction: null }, searchActions: { classPropertyName: "searchActions", publicName: "searchActions", isSignal: true, isRequired: false, transformFunction: null }, enableMultiSelect: { classPropertyName: "enableMultiSelect", publicName: "enableMultiSelect", isSignal: true, isRequired: false, transformFunction: null }, selectionConfirmationAction: { classPropertyName: "selectionConfirmationAction", publicName: "selectionConfirmationAction", isSignal: true, isRequired: false, transformFunction: null }, hideSearch: { classPropertyName: "hideSearch", publicName: "hideSearch", isSignal: true, isRequired: false, transformFunction: null }, rootButtonText: { classPropertyName: "rootButtonText", publicName: "rootButtonText", isSignal: true, isRequired: false, transformFunction: null }, enableDrag: { classPropertyName: "enableDrag", publicName: "enableDrag", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dragging: "dragging", itemSelected: "itemSelected", itemsSelected: "itemsSelected" }, host: { listeners: { "window:keydown": "onKeyDown($event)", "window:keyup": "onKeyUp($event)" } }, ngImport: i0, template: "<div class=\"container flex h-full w-full min-w-full min-h-full relative overflow-hidden\">\n <div [ngClass]=\"widthClass()\" class=\"master flex shrink-0 grow-0 min-w-0\">\n\n <!-- LISTING -->\n <div class=\"w-full h-full flex flex-col gap-y-2 relative\" [ngClass]=\"hideSearch() ? 'pt-2' : 'pt-1'\">\n\n <!-- HEADER -->\n <div class=\"flex w-full flex-row gap-x-2\">\n\n <!-- SEARCH -->\n @if (!hideSearch()) {\n <div class=\"flex shrink grow flex-row pt-1 gap-x-2 overflow-hidden\">\n <mat-form-field class=\"flex grow shrink small-input search-control\" (keydown.shift)=\"$event.stopPropagation()\" (keydown.enter)=\"defaultSearchAction()?.action({parent: this.selectedItem()?.data, control: this.nameSearchControl})\" [ngClass]=\"{'colored-input': isColoredInput()}\">\n <mat-label>{{ 'COMMON.SEARCH_IMMEDIATE_CHILDREN' | translate }}</mat-label>\n <input matInput type=\"text\" [formControl]=\"nameSearchControl\">\n <mat-icon matSuffix>search</mat-icon>\n </mat-form-field>\n @if (defaultSearchAction(); as defaultAction) {\n <div [matTooltip]=\"defaultAction.disabledTooltip ? (defaultAction.disabledTooltip | translate) : ''\" [matTooltipDisabled]=\"defaultAction.disableCondition ? !defaultAction.disableCondition({control: nameSearchControl}) : true\">\n <button mat-mini-fab [disabled]=\"defaultAction.disableCondition ? defaultAction.disableCondition({control: nameSearchControl}) : false\" (click)=\"defaultAction.action({parent: this.selectedItem()?.data, control: this.nameSearchControl})\" [matTooltip]=\"defaultAction.name | translate\">\n <mat-icon [svgIcon]=\"defaultAction.icon.id\"/>\n </button>\n </div>\n }\n @for (action of otherSearchActions(); track $index) {\n @if (action.condition() | async) {\n <div [matTooltip]=\"action.disabledTooltip ? (action.disabledTooltip | translate) : ''\" [matTooltipDisabled]=\"action.disableCondition ? !action.disableCondition() : true\">\n <button mat-mini-fab [disabled]=\"action.disableCondition ? action.disableCondition() : false\" (click)=\"action.action()\" [matTooltip]=\"action.name | translate\">\n <mat-icon [svgIcon]=\"action.icon.id\"/>\n </button>\n </div>\n }\n }\n </div>\n }\n </div>\n\n <!-- LIST -->\n <div class=\"flex flex-col w-full h-full relative overflow-hidden\">\n\n <!-- BREADCRUMBS -->\n <div class=\"max-h-[50%] overflow-auto shrink-0\" [overflowClass]=\"'pr-4'\">\n @if (!loadingBreadcrumbs()) {\n @if (breadcrumbs(); as items) {\n <div class=\"flex flex-col w-full overflow-x-hidden\">\n @for (item of items; let i = $index; track i) {\n @if (selectedItem() && hasMultipleRoots() && i === 0) {\n <mat-card (click)=\"resetNavigation()\" class=\"mb-2 cursor-pointer regular-item hover:bg-hover-color\" [ngClass]=\"disableThresholdId() ? 'bg-disabled-color opacity-50 hover:cursor-auto pointer-events-none disabled-item' : ''\">\n <div class=\"px-3 flex flex-row items-center gap-x-2 item-card\">\n <div class=\"shrink-0 h-6\">\n <mat-icon>arrow_upward</mat-icon>\n </div>\n <span class=\"text-mat-sys-on-surface\">{{ rootButtonText() | translate: {default: rootButtonText()} }}</span>\n </div>\n </mat-card>\n }\n <mat-card class=\"mb-2 cursor-pointer\" (click)=\"selectBreadcrumb(item)\"\n [dndDraggable]=\"item.data\" [dndDisableDragIf]=\"!enableDrag() || !!shouldDisableBreadcrumbClick(item)\" (dndStart)=\"dragStart($event, item.data)\" (dndEnd)=\"isDragging.set(false)\"\n [ngClass]=\"[isBreadcrumbSelected(item) ? 'selected-item' : 'regular-item hover:bg-hover-color', selectedItems().length ? 'opacity-50' : '', shouldDisableBreadcrumbClick(item) ? 'bg-disabled-color opacity-50 hover:cursor-auto pointer-events-none disabled-item' : '']\"\n [appScrollIntoView]=\"isBreadcrumbSelected(item)\" [matTooltip]=\"item.name\" matTooltipPosition=\"right\">\n <div class=\"px-3 flex flex-row items-center justify-between gap-x-2 item-card\">\n <div class=\"flex flex-row grow items-center gap-x-2 overflow-hidden\">\n @if (item.icon; as icon) {\n <app-icon [icon]=\"icon\"/>\n }\n <span [ngClass]=\"[isBreadcrumbSelected(item) ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface']\" class=\"truncate\">{{ item.name }}</span>\n </div>\n @if (item.rightNumber && item.rightNumber > 0) {\n <span class=\"flex items-center justify-center shrink-0 min-w-5 h-5 px-1.5 rounded-full text-[11px] font-semibold\" [ngClass]=\"isBreadcrumbSelected(item) ? 'bg-transparent text-mat-sys-surface-container' : 'bg-mat-sys-primary text-mat-sys-on-primary'\">{{ item.rightNumber }}</span>\n } @else if (enableDrag() && !shouldDisableBreadcrumbClick(item)) {\n <mat-icon>drag_indicator</mat-icon>\n }\n </div>\n </mat-card>\n }\n </div>\n }\n }\n </div>\n\n <mat-divider class=\"w-full pb-2\"/>\n\n <!-- CHILDREN -->\n @if (selectedItem()) {\n <div class=\"flex-1 overflow-auto min-h-0\" [overflowClass]=\"'pr-4'\">\n @if (!loadingChildren()) {\n @if (filteredChildren(); as items) {\n @if (items.length) {\n <div class=\"flex flex-col w-full overflow-y-auto overflow-x-hidden\">\n @for (item of items; track $index) {\n <mat-card class=\"mb-2 cursor-pointer\" [ngClass]=\"[isChildSelected(item) ? 'selected-item' : 'regular-item hover:bg-hover-color', shiftPressed() ? 'no-select-item' : '', (ctrlPressed() || shiftPressed()) && item.bulkSelectDisabled ? 'bg-disabled-color opacity-50 hover:cursor-auto disabled-item' : '']\" (click)=\"selectChild(item)\" [matTooltip]=\"(ctrlPressed() || shiftPressed()) && item.bulkSelectDisabled && item.bulkSelectDisabledTooltip ? (item.bulkSelectDisabledTooltip | translate) : item.name\" matTooltipPosition=\"right\"\n [dndDraggable]=\"item.data\" [dndDisableDragIf]=\"!enableDrag()\" (dndStart)=\"dragStart($event, item.data)\" (dndEnd)=\"isDragging.set(false)\">\n <div class=\"px-3 flex flex-row items-center justify-between gap-x-2 item-card\">\n <div class=\"flex flex-row grow items-center gap-x-2 overflow-hidden\">\n @if (item.icon; as icon) {\n <app-icon [icon]=\"icon\"/>\n }\n <span [ngClass]=\"isChildSelected(item) ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface'\" class=\"truncate\">{{ item.name }}</span>\n </div>\n @if (item.rightNumber && item.rightNumber > 0) {\n <span class=\"flex items-center justify-center shrink-0 min-w-5 h-5 px-1.5 rounded-full text-[11px] font-semibold\" [ngClass]=\"isChildSelected(item) ? 'bg-transparent text-mat-sys-surface-container' : 'bg-mat-sys-primary text-mat-sys-on-primary'\">{{ item.rightNumber }}</span>\n } @else if (enableDrag()) {\n <mat-icon>drag_indicator</mat-icon>\n }\n </div>\n </mat-card>\n }\n </div>\n } @else {\n <div class=\"flex flex-col grow justify-center items-center\">\n <ng-content select=\"[app-no-items-message]\"/>\n </div>\n }\n }\n } @else {\n <div class=\"flex flex-col grow justify-center items-center\">\n <mat-spinner diameter=\"30\"></mat-spinner>\n </div>\n }\n </div>\n }\n\n <!-- ACTIONS (bottom right of the listing) -->\n <div class=\"absolute bottom-0 right-0 z-10\">\n <ng-content select=\"[app-actions]\"/>\n </div>\n </div>\n </div>\n\n </div>\n\n @if (width() !== 'full') {\n <mat-divider [vertical]=\"true\" class=\"relative top-2\"/>\n\n <!-- DETAILS -->\n <div class=\"details flex shrink grow overflow-hidden pt-2\">\n @if (!selectedItems().length) {\n <ng-content select=\"[app-details]\"/>\n } @else {\n <div class=\"h-full w-full flex flex-col items-center justify-center relative\">\n <div class=\"flex flex-col items-center justify-center\">\n <mat-checkbox class=\"w-full\"\n [checked]=\"selectedItems().length === allSelectableItems().length\"\n (change)=\"toggleSelectAll()\">\n {{ 'COMMON.SELECT_ALL' | translate }}\n </mat-checkbox>\n <mat-divider class=\"w-full !mb-2 !mt-2\"></mat-divider>\n <span>{{ 'COMMON.NUMBER_OF_ITEMS_SELECTED' | translate: {numberOfItems: selectedItems().length} }} </span>\n </div>\n <div class=\"absolute bottom-0 right-0\">\n <ng-content select=\"[app-bulk-actions]\"/>\n </div>\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block;height:100%;width:100%;overflow:hidden}mat-card,.item-card{height:40px!important}.container{background-color:var(--base-color-50)}.container .master{padding-right:16px}.container .details{padding-left:16px}.selected-item{background:var(--mat-sys-primary);fill:var(--mat-sys-on-primary);color:var(--mat-sys-on-primary)}.regular-item{fill:var(--mat-sys-primary);color:var(--mat-sys-primary)}.disabled-item{color:unset}.disabled-item:hover{background-color:var(--neutral-variant-color-60)!important}.disabled-item span{color:unset!important}.no-select-item{user-select:none;-webkit-user-select:none}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i1$4.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i1$7.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: ScrollIntoViewDirective, selector: "[appScrollIntoView]", inputs: ["appScrollIntoView"] }, { kind: "directive", type: OverflowClassDirective, selector: "[overflowClass]", inputs: ["overflowClass"] }, { kind: "directive", type: DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["icon"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }] });
|
|
5831
5838
|
}
|
|
5832
5839
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NestedListViewComponent, decorators: [{
|
|
5833
5840
|
type: Component,
|
|
5834
|
-
args: [{ selector: 'app-nested-list-view', imports: [SharedModule, ScrollIntoViewDirective, OverflowClassDirective, DndDraggableDirective, IconComponent], template: "<div class=\"container flex h-full w-full min-w-full min-h-full relative overflow-hidden\">\r\n <div [ngClass]=\"widthClass()\" class=\"master flex shrink-0 grow-0 min-w-0\">\r\n\r\n <!-- LISTING -->\r\n <div class=\"w-full h-full flex flex-col gap-y-2 relative\" [ngClass]=\"hideSearch() ? 'pt-2' : 'pt-1'\">\r\n\r\n <!-- HEADER -->\r\n <div class=\"flex w-full flex-row gap-x-2\">\r\n\r\n <!-- SEARCH -->\r\n @if (!hideSearch()) {\r\n <div class=\"flex shrink grow flex-row pt-1 gap-x-2 overflow-hidden\">\r\n <mat-form-field class=\"flex grow shrink small-input search-control\" (keydown.shift)=\"$event.stopPropagation()\" (keydown.enter)=\"defaultSearchAction()?.action({parent: this.selectedItem()?.data, control: this.nameSearchControl})\" [ngClass]=\"{'colored-input': isColoredInput()}\">\r\n <mat-label>{{ 'COMMON.SEARCH_IMMEDIATE_CHILDREN' | translate }}</mat-label>\r\n <input matInput type=\"text\" [formControl]=\"nameSearchControl\">\r\n <mat-icon matSuffix>search</mat-icon>\r\n </mat-form-field>\r\n @if (defaultSearchAction(); as defaultAction) {\r\n <div [matTooltip]=\"defaultAction.disabledTooltip ? (defaultAction.disabledTooltip | translate) : ''\" [matTooltipDisabled]=\"defaultAction.disableCondition ? !defaultAction.disableCondition({control: nameSearchControl}) : true\">\r\n <button mat-mini-fab [disabled]=\"defaultAction.disableCondition ? defaultAction.disableCondition({control: nameSearchControl}) : false\" (click)=\"defaultAction.action({parent: this.selectedItem()?.data, control: this.nameSearchControl})\" [matTooltip]=\"defaultAction.name | translate\">\r\n <mat-icon [svgIcon]=\"defaultAction.icon.id\"/>\r\n </button>\r\n </div>\r\n }\r\n @for (action of otherSearchActions(); track $index) {\r\n @if (action.condition() | async) {\r\n <div [matTooltip]=\"action.disabledTooltip ? (action.disabledTooltip | translate) : ''\" [matTooltipDisabled]=\"action.disableCondition ? !action.disableCondition() : true\">\r\n <button mat-mini-fab [disabled]=\"action.disableCondition ? action.disableCondition() : false\" (click)=\"action.action()\" [matTooltip]=\"action.name | translate\">\r\n <mat-icon [svgIcon]=\"action.icon.id\"/>\r\n </button>\r\n </div>\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- LIST -->\r\n <div class=\"flex flex-col w-full h-full relative overflow-hidden\">\r\n\r\n <!-- BREADCRUMBS -->\r\n <div class=\"max-h-[50%] overflow-auto shrink-0\" [overflowClass]=\"'pr-4'\">\r\n @if (!loadingBreadcrumbs()) {\r\n @if (breadcrumbs(); as items) {\r\n <div class=\"flex flex-col w-full overflow-x-hidden\">\r\n @for (item of items; let i = $index; track i) {\r\n @if (selectedItem() && hasMultipleRoots() && i === 0) {\r\n <mat-card (click)=\"resetNavigation()\" class=\"mb-2 cursor-pointer regular-item hover:bg-hover-color\" [ngClass]=\"disableThresholdId() ? 'bg-disabled-color opacity-50 hover:cursor-auto pointer-events-none disabled-item' : ''\">\r\n <div class=\"px-3 flex flex-row items-center gap-x-2 item-card\">\r\n <div class=\"shrink-0 h-6\">\r\n <mat-icon>arrow_upward</mat-icon>\r\n </div>\r\n <span class=\"text-mat-sys-on-surface\">{{ rootButtonText() | translate: {default: rootButtonText()} }}</span>\r\n </div>\r\n </mat-card>\r\n }\r\n <mat-card class=\"mb-2 cursor-pointer\" (click)=\"selectBreadcrumb(item)\"\r\n [dndDraggable]=\"item.data\" [dndDisableDragIf]=\"!enableDrag() || !!shouldDisableBreadcrumbClick(item)\" (dndStart)=\"dragStart($event, item.data)\" (dndEnd)=\"isDragging.set(false)\"\r\n [ngClass]=\"[isBreadcrumbSelected(item) ? 'selected-item' : 'regular-item hover:bg-hover-color', selectedItems().length ? 'opacity-50' : '', shouldDisableBreadcrumbClick(item) ? 'bg-disabled-color opacity-50 hover:cursor-auto pointer-events-none disabled-item' : '']\"\r\n [appScrollIntoView]=\"isBreadcrumbSelected(item)\" [matTooltip]=\"item.name\" matTooltipPosition=\"right\">\r\n <div class=\"px-3 flex flex-row items-center justify-between gap-x-2 item-card\">\r\n <div class=\"flex flex-row grow items-center gap-x-2 overflow-hidden\">\r\n @if (item.icon; as icon) {\r\n <app-icon [icon]=\"icon\"/>\r\n }\r\n <span [ngClass]=\"[isBreadcrumbSelected(item) ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface']\" class=\"truncate\">{{ item.name }}</span>\r\n </div>\r\n @if (item.rightNumber && item.rightNumber > 0) {\r\n <span class=\"flex items-center justify-center shrink-0 min-w-5 h-5 px-1.5 rounded-full text-[11px] font-semibold\" [ngClass]=\"isBreadcrumbSelected(item) ? 'bg-transparent text-mat-sys-surface-container' : 'bg-mat-sys-primary text-mat-sys-on-primary'\">{{ item.rightNumber }}</span>\r\n } @else if (enableDrag() && !shouldDisableBreadcrumbClick(item)) {\r\n <mat-icon>drag_indicator</mat-icon>\r\n }\r\n </div>\r\n </mat-card>\r\n }\r\n </div>\r\n }\r\n }\r\n </div>\r\n\r\n <mat-divider class=\"w-full pb-2\"/>\r\n\r\n <!-- CHILDREN -->\r\n @if (selectedItem()) {\r\n <div class=\"flex-1 overflow-auto min-h-0\" [overflowClass]=\"'pr-4'\">\r\n @if (!loadingChildren()) {\r\n @if (filteredChildren(); as items) {\r\n @if (items.length) {\r\n <div class=\"flex flex-col w-full overflow-y-auto overflow-x-hidden\">\r\n @for (item of items; track $index) {\r\n <mat-card class=\"mb-2 cursor-pointer\" [ngClass]=\"[isChildSelected(item) ? 'selected-item' : 'regular-item hover:bg-hover-color', shiftPressed() ? 'no-select-item' : '', (ctrlPressed() || shiftPressed()) && item.bulkSelectDisabled ? 'bg-disabled-color opacity-50 hover:cursor-auto disabled-item' : '']\" (click)=\"selectChild(item)\" [matTooltip]=\"(ctrlPressed() || shiftPressed()) && item.bulkSelectDisabled && item.bulkSelectDisabledTooltip ? (item.bulkSelectDisabledTooltip | translate) : item.name\" matTooltipPosition=\"right\"\r\n [dndDraggable]=\"item.data\" [dndDisableDragIf]=\"!enableDrag()\" (dndStart)=\"dragStart($event, item.data)\" (dndEnd)=\"isDragging.set(false)\">\r\n <div class=\"px-3 flex flex-row items-center justify-between gap-x-2 item-card\">\r\n <div class=\"flex flex-row grow items-center gap-x-2 overflow-hidden\">\r\n @if (item.icon; as icon) {\r\n <app-icon [icon]=\"icon\"/>\r\n }\r\n <span [ngClass]=\"isChildSelected(item) ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface'\" class=\"truncate\">{{ item.name }}</span>\r\n </div>\r\n @if (item.rightNumber && item.rightNumber > 0) {\r\n <span class=\"flex items-center justify-center shrink-0 min-w-5 h-5 px-1.5 rounded-full text-[11px] font-semibold\" [ngClass]=\"isChildSelected(item) ? 'bg-transparent text-mat-sys-surface-container' : 'bg-mat-sys-primary text-mat-sys-on-primary'\">{{ item.rightNumber }}</span>\r\n } @else if (enableDrag()) {\r\n <mat-icon>drag_indicator</mat-icon>\r\n }\r\n </div>\r\n </mat-card>\r\n }\r\n </div>\r\n } @else {\r\n <div class=\"flex flex-col grow justify-center items-center\">\r\n <ng-content select=\"[app-no-items-message]\"/>\r\n </div>\r\n }\r\n }\r\n } @else {\r\n <div class=\"flex flex-col grow justify-center items-center\">\r\n <mat-spinner diameter=\"30\"></mat-spinner>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- ACTIONS (bottom right of the listing) -->\r\n <div class=\"absolute bottom-0 right-0 z-10\">\r\n <ng-content select=\"[app-actions]\"/>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n @if (width() !== 'full') {\r\n <mat-divider [vertical]=\"true\" class=\"relative top-2\"/>\r\n\r\n <!-- DETAILS -->\r\n <div class=\"details flex shrink grow overflow-hidden pt-2\">\r\n @if (!selectedItems().length) {\r\n <ng-content select=\"[app-details]\"/>\r\n } @else {\r\n <div class=\"h-full w-full flex flex-col items-center justify-center relative\">\r\n <div class=\"flex flex-col items-center justify-center\">\r\n <mat-checkbox class=\"w-full\"\r\n [checked]=\"selectedItems().length === allSelectableItems().length\"\r\n (change)=\"toggleSelectAll()\">\r\n {{ 'COMMON.SELECT_ALL' | translate }}\r\n </mat-checkbox>\r\n <mat-divider class=\"w-full !mb-2 !mt-2\"></mat-divider>\r\n <span>{{ 'COMMON.NUMBER_OF_ITEMS_SELECTED' | translate: {numberOfItems: selectedItems().length} }} </span>\r\n </div>\r\n <div class=\"absolute bottom-0 right-0\">\r\n <ng-content select=\"[app-bulk-actions]\"/>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [":host{display:block;height:100%;width:100%;overflow:hidden}mat-card,.item-card{height:40px!important}.container{background-color:var(--base-color-50)}.container .master{padding-right:16px}.container .details{padding-left:16px}.selected-item{background:var(--mat-sys-primary);fill:var(--mat-sys-on-primary);color:var(--mat-sys-on-primary)}.regular-item{fill:var(--mat-sys-primary);color:var(--mat-sys-primary)}.disabled-item{color:unset}.disabled-item:hover{background-color:var(--neutral-variant-color-60)!important}.disabled-item span{color:unset!important}.no-select-item{user-select:none;-webkit-user-select:none}\n"] }]
|
|
5841
|
+
args: [{ selector: 'app-nested-list-view', imports: [SharedModule, ScrollIntoViewDirective, OverflowClassDirective, DndDraggableDirective, IconComponent], template: "<div class=\"container flex h-full w-full min-w-full min-h-full relative overflow-hidden\">\n <div [ngClass]=\"widthClass()\" class=\"master flex shrink-0 grow-0 min-w-0\">\n\n <!-- LISTING -->\n <div class=\"w-full h-full flex flex-col gap-y-2 relative\" [ngClass]=\"hideSearch() ? 'pt-2' : 'pt-1'\">\n\n <!-- HEADER -->\n <div class=\"flex w-full flex-row gap-x-2\">\n\n <!-- SEARCH -->\n @if (!hideSearch()) {\n <div class=\"flex shrink grow flex-row pt-1 gap-x-2 overflow-hidden\">\n <mat-form-field class=\"flex grow shrink small-input search-control\" (keydown.shift)=\"$event.stopPropagation()\" (keydown.enter)=\"defaultSearchAction()?.action({parent: this.selectedItem()?.data, control: this.nameSearchControl})\" [ngClass]=\"{'colored-input': isColoredInput()}\">\n <mat-label>{{ 'COMMON.SEARCH_IMMEDIATE_CHILDREN' | translate }}</mat-label>\n <input matInput type=\"text\" [formControl]=\"nameSearchControl\">\n <mat-icon matSuffix>search</mat-icon>\n </mat-form-field>\n @if (defaultSearchAction(); as defaultAction) {\n <div [matTooltip]=\"defaultAction.disabledTooltip ? (defaultAction.disabledTooltip | translate) : ''\" [matTooltipDisabled]=\"defaultAction.disableCondition ? !defaultAction.disableCondition({control: nameSearchControl}) : true\">\n <button mat-mini-fab [disabled]=\"defaultAction.disableCondition ? defaultAction.disableCondition({control: nameSearchControl}) : false\" (click)=\"defaultAction.action({parent: this.selectedItem()?.data, control: this.nameSearchControl})\" [matTooltip]=\"defaultAction.name | translate\">\n <mat-icon [svgIcon]=\"defaultAction.icon.id\"/>\n </button>\n </div>\n }\n @for (action of otherSearchActions(); track $index) {\n @if (action.condition() | async) {\n <div [matTooltip]=\"action.disabledTooltip ? (action.disabledTooltip | translate) : ''\" [matTooltipDisabled]=\"action.disableCondition ? !action.disableCondition() : true\">\n <button mat-mini-fab [disabled]=\"action.disableCondition ? action.disableCondition() : false\" (click)=\"action.action()\" [matTooltip]=\"action.name | translate\">\n <mat-icon [svgIcon]=\"action.icon.id\"/>\n </button>\n </div>\n }\n }\n </div>\n }\n </div>\n\n <!-- LIST -->\n <div class=\"flex flex-col w-full h-full relative overflow-hidden\">\n\n <!-- BREADCRUMBS -->\n <div class=\"max-h-[50%] overflow-auto shrink-0\" [overflowClass]=\"'pr-4'\">\n @if (!loadingBreadcrumbs()) {\n @if (breadcrumbs(); as items) {\n <div class=\"flex flex-col w-full overflow-x-hidden\">\n @for (item of items; let i = $index; track i) {\n @if (selectedItem() && hasMultipleRoots() && i === 0) {\n <mat-card (click)=\"resetNavigation()\" class=\"mb-2 cursor-pointer regular-item hover:bg-hover-color\" [ngClass]=\"disableThresholdId() ? 'bg-disabled-color opacity-50 hover:cursor-auto pointer-events-none disabled-item' : ''\">\n <div class=\"px-3 flex flex-row items-center gap-x-2 item-card\">\n <div class=\"shrink-0 h-6\">\n <mat-icon>arrow_upward</mat-icon>\n </div>\n <span class=\"text-mat-sys-on-surface\">{{ rootButtonText() | translate: {default: rootButtonText()} }}</span>\n </div>\n </mat-card>\n }\n <mat-card class=\"mb-2 cursor-pointer\" (click)=\"selectBreadcrumb(item)\"\n [dndDraggable]=\"item.data\" [dndDisableDragIf]=\"!enableDrag() || !!shouldDisableBreadcrumbClick(item)\" (dndStart)=\"dragStart($event, item.data)\" (dndEnd)=\"isDragging.set(false)\"\n [ngClass]=\"[isBreadcrumbSelected(item) ? 'selected-item' : 'regular-item hover:bg-hover-color', selectedItems().length ? 'opacity-50' : '', shouldDisableBreadcrumbClick(item) ? 'bg-disabled-color opacity-50 hover:cursor-auto pointer-events-none disabled-item' : '']\"\n [appScrollIntoView]=\"isBreadcrumbSelected(item)\" [matTooltip]=\"item.name\" matTooltipPosition=\"right\">\n <div class=\"px-3 flex flex-row items-center justify-between gap-x-2 item-card\">\n <div class=\"flex flex-row grow items-center gap-x-2 overflow-hidden\">\n @if (item.icon; as icon) {\n <app-icon [icon]=\"icon\"/>\n }\n <span [ngClass]=\"[isBreadcrumbSelected(item) ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface']\" class=\"truncate\">{{ item.name }}</span>\n </div>\n @if (item.rightNumber && item.rightNumber > 0) {\n <span class=\"flex items-center justify-center shrink-0 min-w-5 h-5 px-1.5 rounded-full text-[11px] font-semibold\" [ngClass]=\"isBreadcrumbSelected(item) ? 'bg-transparent text-mat-sys-surface-container' : 'bg-mat-sys-primary text-mat-sys-on-primary'\">{{ item.rightNumber }}</span>\n } @else if (enableDrag() && !shouldDisableBreadcrumbClick(item)) {\n <mat-icon>drag_indicator</mat-icon>\n }\n </div>\n </mat-card>\n }\n </div>\n }\n }\n </div>\n\n <mat-divider class=\"w-full pb-2\"/>\n\n <!-- CHILDREN -->\n @if (selectedItem()) {\n <div class=\"flex-1 overflow-auto min-h-0\" [overflowClass]=\"'pr-4'\">\n @if (!loadingChildren()) {\n @if (filteredChildren(); as items) {\n @if (items.length) {\n <div class=\"flex flex-col w-full overflow-y-auto overflow-x-hidden\">\n @for (item of items; track $index) {\n <mat-card class=\"mb-2 cursor-pointer\" [ngClass]=\"[isChildSelected(item) ? 'selected-item' : 'regular-item hover:bg-hover-color', shiftPressed() ? 'no-select-item' : '', (ctrlPressed() || shiftPressed()) && item.bulkSelectDisabled ? 'bg-disabled-color opacity-50 hover:cursor-auto disabled-item' : '']\" (click)=\"selectChild(item)\" [matTooltip]=\"(ctrlPressed() || shiftPressed()) && item.bulkSelectDisabled && item.bulkSelectDisabledTooltip ? (item.bulkSelectDisabledTooltip | translate) : item.name\" matTooltipPosition=\"right\"\n [dndDraggable]=\"item.data\" [dndDisableDragIf]=\"!enableDrag()\" (dndStart)=\"dragStart($event, item.data)\" (dndEnd)=\"isDragging.set(false)\">\n <div class=\"px-3 flex flex-row items-center justify-between gap-x-2 item-card\">\n <div class=\"flex flex-row grow items-center gap-x-2 overflow-hidden\">\n @if (item.icon; as icon) {\n <app-icon [icon]=\"icon\"/>\n }\n <span [ngClass]=\"isChildSelected(item) ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface'\" class=\"truncate\">{{ item.name }}</span>\n </div>\n @if (item.rightNumber && item.rightNumber > 0) {\n <span class=\"flex items-center justify-center shrink-0 min-w-5 h-5 px-1.5 rounded-full text-[11px] font-semibold\" [ngClass]=\"isChildSelected(item) ? 'bg-transparent text-mat-sys-surface-container' : 'bg-mat-sys-primary text-mat-sys-on-primary'\">{{ item.rightNumber }}</span>\n } @else if (enableDrag()) {\n <mat-icon>drag_indicator</mat-icon>\n }\n </div>\n </mat-card>\n }\n </div>\n } @else {\n <div class=\"flex flex-col grow justify-center items-center\">\n <ng-content select=\"[app-no-items-message]\"/>\n </div>\n }\n }\n } @else {\n <div class=\"flex flex-col grow justify-center items-center\">\n <mat-spinner diameter=\"30\"></mat-spinner>\n </div>\n }\n </div>\n }\n\n <!-- ACTIONS (bottom right of the listing) -->\n <div class=\"absolute bottom-0 right-0 z-10\">\n <ng-content select=\"[app-actions]\"/>\n </div>\n </div>\n </div>\n\n </div>\n\n @if (width() !== 'full') {\n <mat-divider [vertical]=\"true\" class=\"relative top-2\"/>\n\n <!-- DETAILS -->\n <div class=\"details flex shrink grow overflow-hidden pt-2\">\n @if (!selectedItems().length) {\n <ng-content select=\"[app-details]\"/>\n } @else {\n <div class=\"h-full w-full flex flex-col items-center justify-center relative\">\n <div class=\"flex flex-col items-center justify-center\">\n <mat-checkbox class=\"w-full\"\n [checked]=\"selectedItems().length === allSelectableItems().length\"\n (change)=\"toggleSelectAll()\">\n {{ 'COMMON.SELECT_ALL' | translate }}\n </mat-checkbox>\n <mat-divider class=\"w-full !mb-2 !mt-2\"></mat-divider>\n <span>{{ 'COMMON.NUMBER_OF_ITEMS_SELECTED' | translate: {numberOfItems: selectedItems().length} }} </span>\n </div>\n <div class=\"absolute bottom-0 right-0\">\n <ng-content select=\"[app-bulk-actions]\"/>\n </div>\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block;height:100%;width:100%;overflow:hidden}mat-card,.item-card{height:40px!important}.container{background-color:var(--base-color-50)}.container .master{padding-right:16px}.container .details{padding-left:16px}.selected-item{background:var(--mat-sys-primary);fill:var(--mat-sys-on-primary);color:var(--mat-sys-on-primary)}.regular-item{fill:var(--mat-sys-primary);color:var(--mat-sys-primary)}.disabled-item{color:unset}.disabled-item:hover{background-color:var(--neutral-variant-color-60)!important}.disabled-item span{color:unset!important}.no-select-item{user-select:none;-webkit-user-select:none}\n"] }]
|
|
5835
5842
|
}], ctorParameters: () => [{ type: i0.DestroyRef }], propDecorators: { onKeyDown: [{
|
|
5836
5843
|
type: HostListener,
|
|
5837
5844
|
args: ['window:keydown', ['$event']]
|
|
@@ -5857,7 +5864,7 @@ class NestedListDataControl {
|
|
|
5857
5864
|
deselectItem = () => this._changeSelection$.next(null);
|
|
5858
5865
|
updateItem = (item) => this._itemUpdated$.next(item);
|
|
5859
5866
|
addItem = (item) => this._childAdded.next(item);
|
|
5860
|
-
removeItem = (id) => this._itemRemoved$.next(id);
|
|
5867
|
+
removeItem = (id) => this._itemRemoved$.next(Array.isArray(id) ? id : [id]);
|
|
5861
5868
|
associatedItemAdded = (scopeGuid) => this._associatedItemAdded$.next(scopeGuid);
|
|
5862
5869
|
associatedItemRemoved = (scopeGuid) => this._associatedItemRemoved$.next(scopeGuid);
|
|
5863
5870
|
associatedItemScopeChanged = (fromGuid, toGuid) => this._associatedItemScopeChanged$.next({ from: fromGuid, to: toGuid });
|
|
@@ -5946,11 +5953,11 @@ class PdfViewerComponent {
|
|
|
5946
5953
|
this.sanitizer = sanitizer;
|
|
5947
5954
|
}
|
|
5948
5955
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PdfViewerComponent, deps: [{ token: i1$6.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
|
|
5949
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: PdfViewerComponent, isStandalone: true, selector: "app-pdf-viewer", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (safeSrc()) {\
|
|
5956
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: PdfViewerComponent, isStandalone: true, selector: "app-pdf-viewer", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (safeSrc()) {\n <iframe [src]=\"safeSrc()\" frameborder=\"0\" class=\"w-full h-full\"></iframe>\n}", styles: [""] });
|
|
5950
5957
|
}
|
|
5951
5958
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PdfViewerComponent, decorators: [{
|
|
5952
5959
|
type: Component,
|
|
5953
|
-
args: [{ selector: 'app-pdf-viewer', imports: [], template: "@if (safeSrc()) {\
|
|
5960
|
+
args: [{ selector: 'app-pdf-viewer', imports: [], template: "@if (safeSrc()) {\n <iframe [src]=\"safeSrc()\" frameborder=\"0\" class=\"w-full h-full\"></iframe>\n}" }]
|
|
5954
5961
|
}], ctorParameters: () => [{ type: i1$6.DomSanitizer }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }] } });
|
|
5955
5962
|
|
|
5956
5963
|
class StandardListViewComponent {
|
|
@@ -6180,11 +6187,11 @@ class StandardListViewComponent {
|
|
|
6180
6187
|
});
|
|
6181
6188
|
}
|
|
6182
6189
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StandardListViewComponent, deps: [{ token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
6183
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: StandardListViewComponent, isStandalone: true, selector: "app-standard-list-view", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, dataControl: { classPropertyName: "dataControl", publicName: "dataControl", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, isColoredInput: { classPropertyName: "isColoredInput", publicName: "isColoredInput", isSignal: true, isRequired: false, transformFunction: null }, enableMultiSelect: { classPropertyName: "enableMultiSelect", publicName: "enableMultiSelect", isSignal: true, isRequired: false, transformFunction: null }, hideSearch: { classPropertyName: "hideSearch", publicName: "hideSearch", isSignal: true, isRequired: false, transformFunction: null }, hideDetails: { classPropertyName: "hideDetails", publicName: "hideDetails", isSignal: true, isRequired: false, transformFunction: null }, hidePadding: { classPropertyName: "hidePadding", publicName: "hidePadding", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected", itemsSelected: "itemsSelected" }, host: { listeners: { "window:keydown": "onKeyDown($event)", "window:keyup": "onKeyUp($event)" } }, queries: [{ propertyName: "itemTemplate", first: true, predicate: ["standardListItemTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"container flex h-full w-full min-w-full min-h-full relative overflow-hidden {{hidePadding() ? 'pt-0' : 'pt-2'}}\">\r\n <div [ngClass]=\"width()\" class=\"master flex shrink-0 grow-0 min-w-0\">\r\n\r\n <!-- LISTING -->\r\n <div class=\"w-full h-full flex flex-col gap-y-2 relative\">\r\n\r\n <!-- SEARCH -->\r\n @if (!hideSearch()) {\r\n <mat-form-field class=\"w-full small-input\" (keydown.shift)=\"$event.stopPropagation()\" [ngClass]=\"{'colored-input': isColoredInput()}\">\r\n <mat-label>{{ 'COMMON.SEARCH' | translate }}</mat-label>\r\n <input matInput type=\"text\" [formControl]=\"nameSearchControl\">\r\n <mat-icon matSuffix>search</mat-icon>\r\n </mat-form-field>\r\n }\r\n\r\n <!-- LIST -->\r\n <div class=\"flex flex-col w-full h-full relative overflow-hidden\">\r\n @if (!loadingData()) {\r\n @if (filteredItems(); as items) {\r\n @if (items.length) {\r\n <div class=\"flex flex-col w-full grow shrink overflow-y-auto overflow-x-hidden\" [overflowClass]=\"'pr-4'\">\r\n @for (item of items; track $index) {\r\n <ng-container [ngTemplateOutlet]=\"itemTemplate() || defaultTemplate\" [ngTemplateOutletContext]=\"{$implicit: item, selectedItems: selectedItems(), selectItems: selectItems.bind(this) , isSelected: isSelected.bind(this), ctrlPressed: ctrlPressed(), shiftPressed: shiftPressed()}\"/>\r\n\r\n <!--DEFAULT TEMPLATE-->\r\n <ng-template #defaultTemplate>\r\n <mat-card class=\"mb-2 cursor-pointer\" (click)=\"selectItems(item)\"\r\n [ngClass]=\"[isSelected(item) ? 'selected-item' : 'regular-item hover:bg-hover-color', shiftPressed() ? 'no-select-item' : '', (ctrlPressed() || shiftPressed()) && item.bulkSelectDisabled ? 'bg-disabled-color opacity-50 hover:cursor-auto disabled-item' : '']\"\r\n [appScrollIntoView]=\"selectedItems().length > 1 ? false : isSelected(item)\"\r\n [matTooltip]=\"(ctrlPressed() || shiftPressed()) && item.bulkSelectDisabled && item.bulkSelectDisabledTooltip ? (item.bulkSelectDisabledTooltip | translate) : item.name\" matTooltipPosition=\"right\">\r\n <div class=\"px-3 flex flex-row items-center gap-x-2 item-card\">\r\n @if (item.icon; as icon) {\r\n <app-icon [icon]=\"icon\"/>\r\n }\r\n <span [ngClass]=\"isSelected(item) ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface'\" class=\"truncate flex-1\">{{ item.name }}</span>\r\n @if (item.rightIcon; as icon) {\r\n <app-icon [icon]=\"icon\"/>\r\n }\r\n </div>\r\n </mat-card>\r\n </ng-template>\r\n }\r\n\r\n <!-- Load more -->\r\n @if (this.dataSource().isPaged && !this.dataSource().isLastPage) {\r\n <mat-card class=\"mb-2 cursor-pointer regular-item hover:bg-hover-color\" (click)=\"loadMore()\">\r\n <div class=\"px-3 flex flex-row justify-center items-center gap-x-2 item-card\">\r\n @if (loadingPage()) {\r\n <mat-spinner diameter=\"30\"></mat-spinner>\r\n } @else {\r\n <span class=\"text-mat-sys-on-surface\">{{ 'COMMON.LOAD_MORE' | translate }}</span>\r\n }\r\n </div>\r\n </mat-card>\r\n }\r\n </div>\r\n } @else {\r\n <div class=\"flex flex-col grow justify-center items-center\">\r\n <ng-content select=\"[app-no-items-message]\"></ng-content>\r\n </div>\r\n }\r\n }\r\n } @else {\r\n <div class=\"flex flex-col grow justify-center items-center\">\r\n <mat-spinner diameter=\"30\"></mat-spinner>\r\n </div>\r\n }\r\n\r\n <!-- ACTIONS (bottom right of the listing) -->\r\n <div class=\"absolute bottom-0 right-0 z-10\">\r\n <ng-content select=\"[app-actions]\"/>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n @if (!hideDetails()) {\r\n <mat-divider [vertical]=\"true\"/>\r\n\r\n <!-- DETAILS -->\r\n <div class=\"details flex shrink grow overflow-hidden\">\r\n @if (selectedItems().length <= 1) {\r\n <ng-content select=\"[app-details]\"/>\r\n } @else {\r\n <div class=\"h-full w-full flex flex-col items-center justify-center relative\">\r\n <div class=\"flex flex-col items-center justify-center\">\r\n <mat-checkbox class=\"w-full\"\r\n [checked]=\"selectedItems().length === allSelectableItems().length\"\r\n (change)=\"toggleSelectAll()\">\r\n {{ 'COMMON.SELECT_ALL' | translate }}\r\n </mat-checkbox>\r\n <mat-divider class=\"w-full !mb-2 !mt-2\"></mat-divider>\r\n <span>{{ 'COMMON.NUMBER_OF_ITEMS_SELECTED' | translate: {numberOfItems: selectedItems().length} }} </span>\r\n </div>\r\n <div class=\"absolute bottom-0 right-0\">\r\n <ng-content select=\"[app-bulk-actions]\"/>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [":host{display:block;height:100%;width:100%;overflow:hidden}mat-card,.item-card{height:40px!important}.container{background-color:var(--base-color-50)}.container .master{padding-right:16px}.container .details{padding-left:16px}.selected-item{background:var(--mat-sys-primary);fill:var(--mat-sys-on-primary);color:var(--mat-sys-on-primary)}.regular-item{fill:var(--mat-sys-primary);color:var(--mat-sys-primary)}.disabled-item{color:unset}.disabled-item:hover{background-color:var(--neutral-variant-color-60)!important}.disabled-item span{color:unset!important}.no-select-item{user-select:none;-webkit-user-select:none}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i1$7.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: OverflowClassDirective, selector: "[overflowClass]", inputs: ["overflowClass"] }, { kind: "directive", type: ScrollIntoViewDirective, selector: "[appScrollIntoView]", inputs: ["appScrollIntoView"] }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["icon"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
|
|
6190
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: StandardListViewComponent, isStandalone: true, selector: "app-standard-list-view", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, dataControl: { classPropertyName: "dataControl", publicName: "dataControl", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, isColoredInput: { classPropertyName: "isColoredInput", publicName: "isColoredInput", isSignal: true, isRequired: false, transformFunction: null }, enableMultiSelect: { classPropertyName: "enableMultiSelect", publicName: "enableMultiSelect", isSignal: true, isRequired: false, transformFunction: null }, hideSearch: { classPropertyName: "hideSearch", publicName: "hideSearch", isSignal: true, isRequired: false, transformFunction: null }, hideDetails: { classPropertyName: "hideDetails", publicName: "hideDetails", isSignal: true, isRequired: false, transformFunction: null }, hidePadding: { classPropertyName: "hidePadding", publicName: "hidePadding", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected", itemsSelected: "itemsSelected" }, host: { listeners: { "window:keydown": "onKeyDown($event)", "window:keyup": "onKeyUp($event)" } }, queries: [{ propertyName: "itemTemplate", first: true, predicate: ["standardListItemTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"container flex h-full w-full min-w-full min-h-full relative overflow-hidden {{hidePadding() ? 'pt-0' : 'pt-2'}}\">\n <div [ngClass]=\"width()\" class=\"master flex shrink-0 grow-0 min-w-0\">\n\n <!-- LISTING -->\n <div class=\"w-full h-full flex flex-col gap-y-2 relative\">\n\n <!-- SEARCH -->\n @if (!hideSearch()) {\n <mat-form-field class=\"w-full small-input\" (keydown.shift)=\"$event.stopPropagation()\" [ngClass]=\"{'colored-input': isColoredInput()}\">\n <mat-label>{{ 'COMMON.SEARCH' | translate }}</mat-label>\n <input matInput type=\"text\" [formControl]=\"nameSearchControl\">\n <mat-icon matSuffix>search</mat-icon>\n </mat-form-field>\n }\n\n <!-- LIST -->\n <div class=\"flex flex-col w-full h-full relative overflow-hidden\">\n @if (!loadingData()) {\n @if (filteredItems(); as items) {\n @if (items.length) {\n <div class=\"flex flex-col w-full grow shrink overflow-y-auto overflow-x-hidden\" [overflowClass]=\"'pr-4'\">\n @for (item of items; track $index) {\n <ng-container [ngTemplateOutlet]=\"itemTemplate() || defaultTemplate\" [ngTemplateOutletContext]=\"{$implicit: item, selectedItems: selectedItems(), selectItems: selectItems.bind(this) , isSelected: isSelected.bind(this), ctrlPressed: ctrlPressed(), shiftPressed: shiftPressed()}\"/>\n\n <!--DEFAULT TEMPLATE-->\n <ng-template #defaultTemplate>\n <mat-card class=\"mb-2 cursor-pointer\" (click)=\"selectItems(item)\"\n [ngClass]=\"[isSelected(item) ? 'selected-item' : 'regular-item hover:bg-hover-color', shiftPressed() ? 'no-select-item' : '', (ctrlPressed() || shiftPressed()) && item.bulkSelectDisabled ? 'bg-disabled-color opacity-50 hover:cursor-auto disabled-item' : '']\"\n [appScrollIntoView]=\"selectedItems().length > 1 ? false : isSelected(item)\"\n [matTooltip]=\"(ctrlPressed() || shiftPressed()) && item.bulkSelectDisabled && item.bulkSelectDisabledTooltip ? (item.bulkSelectDisabledTooltip | translate) : item.name\" matTooltipPosition=\"right\">\n <div class=\"px-3 flex flex-row items-center gap-x-2 item-card\">\n @if (item.icon; as icon) {\n <app-icon [icon]=\"icon\"/>\n }\n <span [ngClass]=\"isSelected(item) ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface'\" class=\"truncate flex-1\">{{ item.name }}</span>\n @if (item.rightIcon; as icon) {\n <app-icon [icon]=\"icon\"/>\n }\n </div>\n </mat-card>\n </ng-template>\n }\n\n <!-- Load more -->\n @if (this.dataSource().isPaged && !this.dataSource().isLastPage) {\n <mat-card class=\"mb-2 cursor-pointer regular-item hover:bg-hover-color\" (click)=\"loadMore()\">\n <div class=\"px-3 flex flex-row justify-center items-center gap-x-2 item-card\">\n @if (loadingPage()) {\n <mat-spinner diameter=\"30\"></mat-spinner>\n } @else {\n <span class=\"text-mat-sys-on-surface\">{{ 'COMMON.LOAD_MORE' | translate }}</span>\n }\n </div>\n </mat-card>\n }\n </div>\n } @else {\n <div class=\"flex flex-col grow justify-center items-center\">\n <ng-content select=\"[app-no-items-message]\"></ng-content>\n </div>\n }\n }\n } @else {\n <div class=\"flex flex-col grow justify-center items-center\">\n <mat-spinner diameter=\"30\"></mat-spinner>\n </div>\n }\n\n <!-- ACTIONS (bottom right of the listing) -->\n <div class=\"absolute bottom-0 right-0 z-10\">\n <ng-content select=\"[app-actions]\"/>\n </div>\n </div>\n </div>\n\n </div>\n\n @if (!hideDetails()) {\n <mat-divider [vertical]=\"true\"/>\n\n <!-- DETAILS -->\n <div class=\"details flex shrink grow overflow-hidden\">\n @if (selectedItems().length <= 1) {\n <ng-content select=\"[app-details]\"/>\n } @else {\n <div class=\"h-full w-full flex flex-col items-center justify-center relative\">\n <div class=\"flex flex-col items-center justify-center\">\n <mat-checkbox class=\"w-full\"\n [checked]=\"selectedItems().length === allSelectableItems().length\"\n (change)=\"toggleSelectAll()\">\n {{ 'COMMON.SELECT_ALL' | translate }}\n </mat-checkbox>\n <mat-divider class=\"w-full !mb-2 !mt-2\"></mat-divider>\n <span>{{ 'COMMON.NUMBER_OF_ITEMS_SELECTED' | translate: {numberOfItems: selectedItems().length} }} </span>\n </div>\n <div class=\"absolute bottom-0 right-0\">\n <ng-content select=\"[app-bulk-actions]\"/>\n </div>\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block;height:100%;width:100%;overflow:hidden}mat-card,.item-card{height:40px!important}.container{background-color:var(--base-color-50)}.container .master{padding-right:16px}.container .details{padding-left:16px}.selected-item{background:var(--mat-sys-primary);fill:var(--mat-sys-on-primary);color:var(--mat-sys-on-primary)}.regular-item{fill:var(--mat-sys-primary);color:var(--mat-sys-primary)}.disabled-item{color:unset}.disabled-item:hover{background-color:var(--neutral-variant-color-60)!important}.disabled-item span{color:unset!important}.no-select-item{user-select:none;-webkit-user-select:none}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i1$7.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: OverflowClassDirective, selector: "[overflowClass]", inputs: ["overflowClass"] }, { kind: "directive", type: ScrollIntoViewDirective, selector: "[appScrollIntoView]", inputs: ["appScrollIntoView"] }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["icon"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
|
|
6184
6191
|
}
|
|
6185
6192
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StandardListViewComponent, decorators: [{
|
|
6186
6193
|
type: Component,
|
|
6187
|
-
args: [{ selector: 'app-standard-list-view', imports: [SharedModule, OverflowClassDirective, ScrollIntoViewDirective, IconComponent], template: "<div class=\"container flex h-full w-full min-w-full min-h-full relative overflow-hidden {{hidePadding() ? 'pt-0' : 'pt-2'}}\">\
|
|
6194
|
+
args: [{ selector: 'app-standard-list-view', imports: [SharedModule, OverflowClassDirective, ScrollIntoViewDirective, IconComponent], template: "<div class=\"container flex h-full w-full min-w-full min-h-full relative overflow-hidden {{hidePadding() ? 'pt-0' : 'pt-2'}}\">\n <div [ngClass]=\"width()\" class=\"master flex shrink-0 grow-0 min-w-0\">\n\n <!-- LISTING -->\n <div class=\"w-full h-full flex flex-col gap-y-2 relative\">\n\n <!-- SEARCH -->\n @if (!hideSearch()) {\n <mat-form-field class=\"w-full small-input\" (keydown.shift)=\"$event.stopPropagation()\" [ngClass]=\"{'colored-input': isColoredInput()}\">\n <mat-label>{{ 'COMMON.SEARCH' | translate }}</mat-label>\n <input matInput type=\"text\" [formControl]=\"nameSearchControl\">\n <mat-icon matSuffix>search</mat-icon>\n </mat-form-field>\n }\n\n <!-- LIST -->\n <div class=\"flex flex-col w-full h-full relative overflow-hidden\">\n @if (!loadingData()) {\n @if (filteredItems(); as items) {\n @if (items.length) {\n <div class=\"flex flex-col w-full grow shrink overflow-y-auto overflow-x-hidden\" [overflowClass]=\"'pr-4'\">\n @for (item of items; track $index) {\n <ng-container [ngTemplateOutlet]=\"itemTemplate() || defaultTemplate\" [ngTemplateOutletContext]=\"{$implicit: item, selectedItems: selectedItems(), selectItems: selectItems.bind(this) , isSelected: isSelected.bind(this), ctrlPressed: ctrlPressed(), shiftPressed: shiftPressed()}\"/>\n\n <!--DEFAULT TEMPLATE-->\n <ng-template #defaultTemplate>\n <mat-card class=\"mb-2 cursor-pointer\" (click)=\"selectItems(item)\"\n [ngClass]=\"[isSelected(item) ? 'selected-item' : 'regular-item hover:bg-hover-color', shiftPressed() ? 'no-select-item' : '', (ctrlPressed() || shiftPressed()) && item.bulkSelectDisabled ? 'bg-disabled-color opacity-50 hover:cursor-auto disabled-item' : '']\"\n [appScrollIntoView]=\"selectedItems().length > 1 ? false : isSelected(item)\"\n [matTooltip]=\"(ctrlPressed() || shiftPressed()) && item.bulkSelectDisabled && item.bulkSelectDisabledTooltip ? (item.bulkSelectDisabledTooltip | translate) : item.name\" matTooltipPosition=\"right\">\n <div class=\"px-3 flex flex-row items-center gap-x-2 item-card\">\n @if (item.icon; as icon) {\n <app-icon [icon]=\"icon\"/>\n }\n <span [ngClass]=\"isSelected(item) ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface'\" class=\"truncate flex-1\">{{ item.name }}</span>\n @if (item.rightIcon; as icon) {\n <app-icon [icon]=\"icon\"/>\n }\n </div>\n </mat-card>\n </ng-template>\n }\n\n <!-- Load more -->\n @if (this.dataSource().isPaged && !this.dataSource().isLastPage) {\n <mat-card class=\"mb-2 cursor-pointer regular-item hover:bg-hover-color\" (click)=\"loadMore()\">\n <div class=\"px-3 flex flex-row justify-center items-center gap-x-2 item-card\">\n @if (loadingPage()) {\n <mat-spinner diameter=\"30\"></mat-spinner>\n } @else {\n <span class=\"text-mat-sys-on-surface\">{{ 'COMMON.LOAD_MORE' | translate }}</span>\n }\n </div>\n </mat-card>\n }\n </div>\n } @else {\n <div class=\"flex flex-col grow justify-center items-center\">\n <ng-content select=\"[app-no-items-message]\"></ng-content>\n </div>\n }\n }\n } @else {\n <div class=\"flex flex-col grow justify-center items-center\">\n <mat-spinner diameter=\"30\"></mat-spinner>\n </div>\n }\n\n <!-- ACTIONS (bottom right of the listing) -->\n <div class=\"absolute bottom-0 right-0 z-10\">\n <ng-content select=\"[app-actions]\"/>\n </div>\n </div>\n </div>\n\n </div>\n\n @if (!hideDetails()) {\n <mat-divider [vertical]=\"true\"/>\n\n <!-- DETAILS -->\n <div class=\"details flex shrink grow overflow-hidden\">\n @if (selectedItems().length <= 1) {\n <ng-content select=\"[app-details]\"/>\n } @else {\n <div class=\"h-full w-full flex flex-col items-center justify-center relative\">\n <div class=\"flex flex-col items-center justify-center\">\n <mat-checkbox class=\"w-full\"\n [checked]=\"selectedItems().length === allSelectableItems().length\"\n (change)=\"toggleSelectAll()\">\n {{ 'COMMON.SELECT_ALL' | translate }}\n </mat-checkbox>\n <mat-divider class=\"w-full !mb-2 !mt-2\"></mat-divider>\n <span>{{ 'COMMON.NUMBER_OF_ITEMS_SELECTED' | translate: {numberOfItems: selectedItems().length} }} </span>\n </div>\n <div class=\"absolute bottom-0 right-0\">\n <ng-content select=\"[app-bulk-actions]\"/>\n </div>\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block;height:100%;width:100%;overflow:hidden}mat-card,.item-card{height:40px!important}.container{background-color:var(--base-color-50)}.container .master{padding-right:16px}.container .details{padding-left:16px}.selected-item{background:var(--mat-sys-primary);fill:var(--mat-sys-on-primary);color:var(--mat-sys-on-primary)}.regular-item{fill:var(--mat-sys-primary);color:var(--mat-sys-primary)}.disabled-item{color:unset}.disabled-item:hover{background-color:var(--neutral-variant-color-60)!important}.disabled-item span{color:unset!important}.no-select-item{user-select:none;-webkit-user-select:none}\n"] }]
|
|
6188
6195
|
}], ctorParameters: () => [{ type: i0.DestroyRef }], propDecorators: { onKeyDown: [{
|
|
6189
6196
|
type: HostListener,
|
|
6190
6197
|
args: ['window:keydown', ['$event']]
|
|
@@ -6298,11 +6305,11 @@ class TabulatedChipViewComponent {
|
|
|
6298
6305
|
}
|
|
6299
6306
|
}
|
|
6300
6307
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TabulatedChipViewComponent, deps: [{ token: i1$2.Router }, { token: i1$2.ActivatedRoute }, { token: NavigationPersistenceService }], target: i0.ɵɵFactoryTarget.Component });
|
|
6301
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: TabulatedChipViewComponent, isStandalone: true, selector: "app-tabulated-chip-view", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, queryParamHandling: { classPropertyName: "queryParamHandling", publicName: "queryParamHandling", isSignal: true, isRequired: false, transformFunction: null }, saveLastActiveTab: { classPropertyName: "saveLastActiveTab", publicName: "saveLastActiveTab", isSignal: true, isRequired: false, transformFunction: null }, navBarLayoutClasses: { classPropertyName: "navBarLayoutClasses", publicName: "navBarLayoutClasses", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-auto flex-col overflow-hidden tabulated-view-container\">\
|
|
6308
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: TabulatedChipViewComponent, isStandalone: true, selector: "app-tabulated-chip-view", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, queryParamHandling: { classPropertyName: "queryParamHandling", publicName: "queryParamHandling", isSignal: true, isRequired: false, transformFunction: null }, saveLastActiveTab: { classPropertyName: "saveLastActiveTab", publicName: "saveLastActiveTab", isSignal: true, isRequired: false, transformFunction: null }, navBarLayoutClasses: { classPropertyName: "navBarLayoutClasses", publicName: "navBarLayoutClasses", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-auto flex-col overflow-hidden tabulated-view-container\">\n <nav mat-tab-nav-bar [mat-stretch-tabs]=\"false\" [tabPanel]=\"tabPanel\" class=\"navigation\" [ngClass]=\"navBarLayoutClasses()\">\n @for (tab of tabs(); track $index) {\n @if (!tab.condition || (tab.condition | async)) {\n <div\n mat-tab-link\n [active]=\"isActive(tab.route)\"\n (click)=\"navigate(tab.route)\"\n [matTooltip]=\"tab.tooltip ? (tab.tooltip | translate) : null\"\n [ngClass]=\"{ 'bg-mat-sys-primary': isActive(tab.route), 'active': isActive(tab.route) }\"\n class=\"rounded mr-2 navigation-tab\"\n [attr.data-test]=\"tab.name + '_tab'\"\n >\n @if (tab.icon) {\n <mat-icon>{{ tab.icon }}</mat-icon>\n }\n <span [ngClass]=\"isActive(tab.route) ?'text-mat-sys-surface-container' : 'text-mat-sys-primary'\">{{ tab.name | translate }}</span>\n </div>\n }\n }\n </nav>\n <mat-tab-nav-panel #tabPanel class=\"flex flex-auto flex-col overflow-hidden\">\n <router-outlet/>\n </mat-tab-nav-panel>\n</div>\n", styles: [":host{display:flex;height:100%;width:100%;max-height:100%;max-width:100%;box-sizing:border-box;--mat-tab-active-indicator-color: transparent;--mat-tab-active-focus-indicator-color: transparent;--mat-tab-active-hover-indicator-color: transparent;--mat-tab-active-ripple-color: transparent;--mat-tab-inactive-ripple-color: transparent;--mat-tab-disabled-ripple-color: transparent;--mat-tab-active-indicator-height: 0;--mat-tab-divider-height: 0px;--mat-tab-container-height: 40px}.navigation{max-width:100%}.navigation-tab{border:1px solid var(--mat-sys-outline-variant);border-radius:10px;padding:0 1rem;height:2.5rem;box-sizing:border-box}.navigation-tab.active{border:none}.navigation-tab:hover{box-shadow:inset 0 0 0 200px #fff3}.navigation-tab:hover mat-icon,.navigation-tab:hover span{opacity:.8}:host-context(.alt-theme) .navigation-tab:hover{box-shadow:inset 0 0 0 200px #0003}:host-context(.alt-theme) .navigation-tab:hover mat-icon,:host-context(.alt-theme) .navigation-tab:hover span{opacity:.6}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4$5.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i4$5.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: i4$5.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }] });
|
|
6302
6309
|
}
|
|
6303
6310
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TabulatedChipViewComponent, decorators: [{
|
|
6304
6311
|
type: Component,
|
|
6305
|
-
args: [{ selector: 'app-tabulated-chip-view', imports: [SharedModule], template: "<div class=\"flex flex-auto flex-col overflow-hidden tabulated-view-container\">\
|
|
6312
|
+
args: [{ selector: 'app-tabulated-chip-view', imports: [SharedModule], template: "<div class=\"flex flex-auto flex-col overflow-hidden tabulated-view-container\">\n <nav mat-tab-nav-bar [mat-stretch-tabs]=\"false\" [tabPanel]=\"tabPanel\" class=\"navigation\" [ngClass]=\"navBarLayoutClasses()\">\n @for (tab of tabs(); track $index) {\n @if (!tab.condition || (tab.condition | async)) {\n <div\n mat-tab-link\n [active]=\"isActive(tab.route)\"\n (click)=\"navigate(tab.route)\"\n [matTooltip]=\"tab.tooltip ? (tab.tooltip | translate) : null\"\n [ngClass]=\"{ 'bg-mat-sys-primary': isActive(tab.route), 'active': isActive(tab.route) }\"\n class=\"rounded mr-2 navigation-tab\"\n [attr.data-test]=\"tab.name + '_tab'\"\n >\n @if (tab.icon) {\n <mat-icon>{{ tab.icon }}</mat-icon>\n }\n <span [ngClass]=\"isActive(tab.route) ?'text-mat-sys-surface-container' : 'text-mat-sys-primary'\">{{ tab.name | translate }}</span>\n </div>\n }\n }\n </nav>\n <mat-tab-nav-panel #tabPanel class=\"flex flex-auto flex-col overflow-hidden\">\n <router-outlet/>\n </mat-tab-nav-panel>\n</div>\n", styles: [":host{display:flex;height:100%;width:100%;max-height:100%;max-width:100%;box-sizing:border-box;--mat-tab-active-indicator-color: transparent;--mat-tab-active-focus-indicator-color: transparent;--mat-tab-active-hover-indicator-color: transparent;--mat-tab-active-ripple-color: transparent;--mat-tab-inactive-ripple-color: transparent;--mat-tab-disabled-ripple-color: transparent;--mat-tab-active-indicator-height: 0;--mat-tab-divider-height: 0px;--mat-tab-container-height: 40px}.navigation{max-width:100%}.navigation-tab{border:1px solid var(--mat-sys-outline-variant);border-radius:10px;padding:0 1rem;height:2.5rem;box-sizing:border-box}.navigation-tab.active{border:none}.navigation-tab:hover{box-shadow:inset 0 0 0 200px #fff3}.navigation-tab:hover mat-icon,.navigation-tab:hover span{opacity:.8}:host-context(.alt-theme) .navigation-tab:hover{box-shadow:inset 0 0 0 200px #0003}:host-context(.alt-theme) .navigation-tab:hover mat-icon,:host-context(.alt-theme) .navigation-tab:hover span{opacity:.6}\n"] }]
|
|
6306
6313
|
}], ctorParameters: () => [{ type: i1$2.Router }, { type: i1$2.ActivatedRoute }, { type: NavigationPersistenceService }], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], queryParamHandling: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryParamHandling", required: false }] }], saveLastActiveTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "saveLastActiveTab", required: false }] }], navBarLayoutClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "navBarLayoutClasses", required: false }] }] } });
|
|
6307
6314
|
|
|
6308
6315
|
class TabulatedViewComponent {
|
|
@@ -6329,11 +6336,11 @@ class TabulatedViewComponent {
|
|
|
6329
6336
|
}
|
|
6330
6337
|
}
|
|
6331
6338
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TabulatedViewComponent, deps: [{ token: i1$2.Router }, { token: i1$2.ActivatedRoute }, { token: NavigationPersistenceService }], target: i0.ɵɵFactoryTarget.Component });
|
|
6332
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: TabulatedViewComponent, isStandalone: true, selector: "app-tabulated-view", inputs: { tabs: "tabs", queryParamHandling: "queryParamHandling", saveLastActiveTab: "saveLastActiveTab" }, ngImport: i0, template: "<div class=\"flex flex-auto flex-col overflow-hidden\">\
|
|
6339
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: TabulatedViewComponent, isStandalone: true, selector: "app-tabulated-view", inputs: { tabs: "tabs", queryParamHandling: "queryParamHandling", saveLastActiveTab: "saveLastActiveTab" }, ngImport: i0, template: "<div class=\"flex flex-auto flex-col overflow-hidden\">\n <nav mat-tab-nav-bar [mat-stretch-tabs]=\"false\" [tabPanel]=\"tabPanel\" class=\"navigation\">\n <div\n *ngFor=\"let tab of tabs\"\n mat-tab-link\n [active]=\"isActive(tab.route)\"\n (click)=\"navigate(tab.route)\"\n [matTooltip]=\"tab.tooltip ? (tab.tooltip | translate) : null\"\n [attr.data-test]=\"tab.name + '_tab'\"\n >\n <mat-icon *ngIf=\"tab.icon\">\n {{ tab.icon }}\n </mat-icon>\n {{ tab.name | translate }}\n </div>\n </nav>\n <mat-tab-nav-panel #tabPanel class=\"flex flex-auto flex-col overflow-hidden\">\n <router-outlet></router-outlet>\n </mat-tab-nav-panel>\n</div>\n", styles: [":host{display:flex;height:100%;width:100%;max-height:100%;max-width:100%;box-sizing:border-box}.navigation{border-bottom:1px solid rgba(0,0,0,.12);max-width:100%}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4$5.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i4$5.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: i4$5.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
|
|
6333
6340
|
}
|
|
6334
6341
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TabulatedViewComponent, decorators: [{
|
|
6335
6342
|
type: Component,
|
|
6336
|
-
args: [{ selector: 'app-tabulated-view', imports: [SharedModule], template: "<div class=\"flex flex-auto flex-col overflow-hidden\">\
|
|
6343
|
+
args: [{ selector: 'app-tabulated-view', imports: [SharedModule], template: "<div class=\"flex flex-auto flex-col overflow-hidden\">\n <nav mat-tab-nav-bar [mat-stretch-tabs]=\"false\" [tabPanel]=\"tabPanel\" class=\"navigation\">\n <div\n *ngFor=\"let tab of tabs\"\n mat-tab-link\n [active]=\"isActive(tab.route)\"\n (click)=\"navigate(tab.route)\"\n [matTooltip]=\"tab.tooltip ? (tab.tooltip | translate) : null\"\n [attr.data-test]=\"tab.name + '_tab'\"\n >\n <mat-icon *ngIf=\"tab.icon\">\n {{ tab.icon }}\n </mat-icon>\n {{ tab.name | translate }}\n </div>\n </nav>\n <mat-tab-nav-panel #tabPanel class=\"flex flex-auto flex-col overflow-hidden\">\n <router-outlet></router-outlet>\n </mat-tab-nav-panel>\n</div>\n", styles: [":host{display:flex;height:100%;width:100%;max-height:100%;max-width:100%;box-sizing:border-box}.navigation{border-bottom:1px solid rgba(0,0,0,.12);max-width:100%}\n"] }]
|
|
6337
6344
|
}], ctorParameters: () => [{ type: i1$2.Router }, { type: i1$2.ActivatedRoute }, { type: NavigationPersistenceService }], propDecorators: { tabs: [{
|
|
6338
6345
|
type: Input,
|
|
6339
6346
|
args: [{ required: true }]
|
|
@@ -6353,11 +6360,11 @@ class TreeNodeComponent {
|
|
|
6353
6360
|
this.nodeSelected.emit(node);
|
|
6354
6361
|
}
|
|
6355
6362
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6356
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: TreeNodeComponent, isStandalone: true, selector: "app-tree-node", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { nodeSelected: "nodeSelected" }, ngImport: i0, template: "<div class=\"w-full flex flex-col\">\
|
|
6363
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: TreeNodeComponent, isStandalone: true, selector: "app-tree-node", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { nodeSelected: "nodeSelected" }, ngImport: i0, template: "<div class=\"w-full flex flex-col\">\n <!-- ROW -->\n <div class=\"w-full h-10 flex flex-row items-center\">\n\n <!-- ARROWS -->\n @if (node().canHaveChildren) {\n @if (node().open) {\n <button mat-icon-button class=\"scale-80\" (click)=\"toggle(node())\">\n <mat-icon>keyboard_arrow_down</mat-icon>\n </button>\n } @else {\n <button mat-icon-button class=\"scale-80\" [disabled]=\"!node().hasChildren\" (click)=\"toggle(node())\">\n <mat-icon>keyboard_arrow_right</mat-icon>\n </button>\n }\n } @else {\n <div class=\"w-12 h-12\"> </div>\n }\n\n <!-- ICON AND TEXT -->\n <div class=\"flex flex-row items-center cursor-pointer\" (click)=\"selectNode(node())\">\n <mat-icon [ngClass]=\"node().selected ? 'text-mat-sys-tertiary' : 'text-mat-sys-primary'\">{{ node().icon }}</mat-icon>\n <div class=\"pl-2\" [ngClass]=\"{ 'text-mat-sys-tertiary' : node().selected }\">{{ node().name }}</div>\n </div>\n </div>\n\n <!-- Children -->\n @if (node().open) {\n <div class=\"w-full flex flex-col pl-9\">\n @if (node().children | async; as children) {\n @for (child of children; track $index) {\n <app-tree-node [node]=\"child\" (nodeSelected)=\"selectNode($event)\"/>\n }\n }\n </div>\n }\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: TreeNodeComponent, selector: "app-tree-node", inputs: ["node"], outputs: ["nodeSelected"] }, { kind: "ngmodule", type: SharedModule }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }] });
|
|
6357
6364
|
}
|
|
6358
6365
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TreeNodeComponent, decorators: [{
|
|
6359
6366
|
type: Component,
|
|
6360
|
-
args: [{ selector: 'app-tree-node', imports: [SharedModule], template: "<div class=\"w-full flex flex-col\">\
|
|
6367
|
+
args: [{ selector: 'app-tree-node', imports: [SharedModule], template: "<div class=\"w-full flex flex-col\">\n <!-- ROW -->\n <div class=\"w-full h-10 flex flex-row items-center\">\n\n <!-- ARROWS -->\n @if (node().canHaveChildren) {\n @if (node().open) {\n <button mat-icon-button class=\"scale-80\" (click)=\"toggle(node())\">\n <mat-icon>keyboard_arrow_down</mat-icon>\n </button>\n } @else {\n <button mat-icon-button class=\"scale-80\" [disabled]=\"!node().hasChildren\" (click)=\"toggle(node())\">\n <mat-icon>keyboard_arrow_right</mat-icon>\n </button>\n }\n } @else {\n <div class=\"w-12 h-12\"> </div>\n }\n\n <!-- ICON AND TEXT -->\n <div class=\"flex flex-row items-center cursor-pointer\" (click)=\"selectNode(node())\">\n <mat-icon [ngClass]=\"node().selected ? 'text-mat-sys-tertiary' : 'text-mat-sys-primary'\">{{ node().icon }}</mat-icon>\n <div class=\"pl-2\" [ngClass]=\"{ 'text-mat-sys-tertiary' : node().selected }\">{{ node().name }}</div>\n </div>\n </div>\n\n <!-- Children -->\n @if (node().open) {\n <div class=\"w-full flex flex-col pl-9\">\n @if (node().children | async; as children) {\n @for (child of children; track $index) {\n <app-tree-node [node]=\"child\" (nodeSelected)=\"selectNode($event)\"/>\n }\n }\n </div>\n }\n</div>\n" }]
|
|
6361
6368
|
}], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }], nodeSelected: [{ type: i0.Output, args: ["nodeSelected"] }] } });
|
|
6362
6369
|
|
|
6363
6370
|
class TreeComponent {
|
|
@@ -6407,11 +6414,11 @@ class TreeComponent {
|
|
|
6407
6414
|
this.selectedNode.selected = true;
|
|
6408
6415
|
}
|
|
6409
6416
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6410
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: TreeComponent, isStandalone: true, selector: "app-tree", inputs: { roots: { classPropertyName: "roots", publicName: "roots", isSignal: true, isRequired: true, transformFunction: null }, guidPath: { classPropertyName: "guidPath", publicName: "guidPath", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { nodeSelected: "nodeSelected" }, ngImport: i0, template: "<div class=\"h-full w-full flex flex-col\">\
|
|
6417
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: TreeComponent, isStandalone: true, selector: "app-tree", inputs: { roots: { classPropertyName: "roots", publicName: "roots", isSignal: true, isRequired: true, transformFunction: null }, guidPath: { classPropertyName: "guidPath", publicName: "guidPath", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { nodeSelected: "nodeSelected" }, ngImport: i0, template: "<div class=\"h-full w-full flex flex-col\">\n @for (node of roots(); track $index) {\n <app-tree-node [node]=\"node\" (nodeSelected)=\"selectNode($event)\"/>\n }\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: TreeNodeComponent, selector: "app-tree-node", inputs: ["node"], outputs: ["nodeSelected"] }] });
|
|
6411
6418
|
}
|
|
6412
6419
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TreeComponent, decorators: [{
|
|
6413
6420
|
type: Component,
|
|
6414
|
-
args: [{ selector: 'app-tree', imports: [TreeNodeComponent], template: "<div class=\"h-full w-full flex flex-col\">\
|
|
6421
|
+
args: [{ selector: 'app-tree', imports: [TreeNodeComponent], template: "<div class=\"h-full w-full flex flex-col\">\n @for (node of roots(); track $index) {\n <app-tree-node [node]=\"node\" (nodeSelected)=\"selectNode($event)\"/>\n }\n</div>\n" }]
|
|
6415
6422
|
}], ctorParameters: () => [], propDecorators: { roots: [{ type: i0.Input, args: [{ isSignal: true, alias: "roots", required: true }] }], guidPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "guidPath", required: true }] }], nodeSelected: [{ type: i0.Output, args: ["nodeSelected"] }] } });
|
|
6416
6423
|
|
|
6417
6424
|
class ValueDisplayComponent {
|
|
@@ -6428,11 +6435,11 @@ class ValueDisplayComponent {
|
|
|
6428
6435
|
return vector.replaceAll(',', ', ');
|
|
6429
6436
|
}
|
|
6430
6437
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6431
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ValueDisplayComponent, isStandalone: true, selector: "app-value-display", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (value(); as value) {\
|
|
6438
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ValueDisplayComponent, isStandalone: true, selector: "app-value-display", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (value(); as value) {\n @switch (type()) {\n @case (DataType.BOOLEAN) {\n <mat-icon>{{ value === 'true' ? 'check' : 'close' }}</mat-icon>\n }\n @case (DataType.COLOR) {\n <div class=\"color-circle\" [style.background-color]=\"value\"></div>\n }\n @case (DataType.DATE) {\n <div class=\"truncate\" matTooltip=\"{{ getNumber(value) | simpleDateTime }}\">{{ getNumber(value) | simpleDateTime }}</div>\n }\n @case (DataType.DURATION) {\n {{ getNumber(value) | duration }}\n }\n @case (DataType.LINK) {\n <div class=\"truncate\" matTooltip=\"{{ value }}\">\n <a href=\"{{value}}\" target=\"_blank\" class=\"underline\">{{ value }}</a>\n </div>\n }\n @case (DataType.VECTOR) {\n <div class=\"truncate\" matTooltip=\"{{ getVectorValue(value) }}\">{{ getVectorValue(value) }}</div>\n }\n @case (DataType.NUMERIC){\n <div class=\"truncate\" matTooltip=\"{{ getNumber(value) }} {{ unit() }}\">{{getNumber(value) | localizedNumber}} {{ unit() }}</div>\n }\n @default {\n <div class=\"truncate\" matTooltip=\"{{ value }} {{ unit() }}\">{{ value }} {{ unit() }}</div>\n }\n }\n} @else {\n -\n}\n", styles: [".color-circle{width:1.5rem;height:1.5rem;margin-top:.25rem;border-radius:9999px}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: DurationPipe, name: "duration" }, { kind: "pipe", type: SimpleDateTimePipe, name: "simpleDateTime" }, { kind: "pipe", type: LocalizedNumberPipe, name: "localizedNumber" }] });
|
|
6432
6439
|
}
|
|
6433
6440
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueDisplayComponent, decorators: [{
|
|
6434
6441
|
type: Component,
|
|
6435
|
-
args: [{ selector: 'app-value-display', imports: [SharedModule, DurationPipe, SimpleDateTimePipe, LocalizedNumberPipe], template: "@if (value(); as value) {\
|
|
6442
|
+
args: [{ selector: 'app-value-display', imports: [SharedModule, DurationPipe, SimpleDateTimePipe, LocalizedNumberPipe], template: "@if (value(); as value) {\n @switch (type()) {\n @case (DataType.BOOLEAN) {\n <mat-icon>{{ value === 'true' ? 'check' : 'close' }}</mat-icon>\n }\n @case (DataType.COLOR) {\n <div class=\"color-circle\" [style.background-color]=\"value\"></div>\n }\n @case (DataType.DATE) {\n <div class=\"truncate\" matTooltip=\"{{ getNumber(value) | simpleDateTime }}\">{{ getNumber(value) | simpleDateTime }}</div>\n }\n @case (DataType.DURATION) {\n {{ getNumber(value) | duration }}\n }\n @case (DataType.LINK) {\n <div class=\"truncate\" matTooltip=\"{{ value }}\">\n <a href=\"{{value}}\" target=\"_blank\" class=\"underline\">{{ value }}</a>\n </div>\n }\n @case (DataType.VECTOR) {\n <div class=\"truncate\" matTooltip=\"{{ getVectorValue(value) }}\">{{ getVectorValue(value) }}</div>\n }\n @case (DataType.NUMERIC){\n <div class=\"truncate\" matTooltip=\"{{ getNumber(value) }} {{ unit() }}\">{{getNumber(value) | localizedNumber}} {{ unit() }}</div>\n }\n @default {\n <div class=\"truncate\" matTooltip=\"{{ value }} {{ unit() }}\">{{ value }} {{ unit() }}</div>\n }\n }\n} @else {\n -\n}\n", styles: [".color-circle{width:1.5rem;height:1.5rem;margin-top:.25rem;border-radius:9999px}\n"] }]
|
|
6436
6443
|
}], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: true }] }], unit: [{ type: i0.Input, args: [{ isSignal: true, alias: "unit", required: false }] }] } });
|
|
6437
6444
|
|
|
6438
6445
|
class ValueInputBooleanComponent {
|
|
@@ -6500,7 +6507,7 @@ class ValueInputBooleanComponent {
|
|
|
6500
6507
|
useExisting: forwardRef(() => ValueInputBooleanComponent),
|
|
6501
6508
|
multi: true,
|
|
6502
6509
|
}
|
|
6503
|
-
], ngImport: i0, template: "<mat-slide-toggle [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\
|
|
6510
|
+
], ngImport: i0, template: "<mat-slide-toggle [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n <div class=\"flex flex-col ml-2\">\n <span class=\"text-xs font-light\"> {{ name() }} </span>\n <span>{{ formControl.value ? ('DATA_BROWSER.ATTRIBUTE_VALUE_ENABLED' | translate) : ('DATA_BROWSER.ATTRIBUTE_VALUE_DISABLED' | translate) }}</span>\n </div>\n</mat-slide-toggle>\n@for (error of getErrors(); track error) {\n <mat-error *ngIf=\"!showErrorInTooltip()\" class=\"ml-4 mt-[-8px] text-[12px]\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate }}</mat-error>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
|
|
6504
6511
|
}
|
|
6505
6512
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputBooleanComponent, decorators: [{
|
|
6506
6513
|
type: Component,
|
|
@@ -6515,7 +6522,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
6515
6522
|
useExisting: forwardRef(() => ValueInputBooleanComponent),
|
|
6516
6523
|
multi: true,
|
|
6517
6524
|
}
|
|
6518
|
-
], template: "<mat-slide-toggle [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\
|
|
6525
|
+
], template: "<mat-slide-toggle [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n <div class=\"flex flex-col ml-2\">\n <span class=\"text-xs font-light\"> {{ name() }} </span>\n <span>{{ formControl.value ? ('DATA_BROWSER.ATTRIBUTE_VALUE_ENABLED' | translate) : ('DATA_BROWSER.ATTRIBUTE_VALUE_DISABLED' | translate) }}</span>\n </div>\n</mat-slide-toggle>\n@for (error of getErrors(); track error) {\n <mat-error *ngIf=\"!showErrorInTooltip()\" class=\"ml-4 mt-[-8px] text-[12px]\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate }}</mat-error>\n}\n" }]
|
|
6519
6526
|
}], ctorParameters: () => [{ type: i1$1.TranslateService }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], validators: [{ type: i0.Input, args: [{ isSignal: true, alias: "validators", required: false }] }], showErrorInTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrorInTooltip", required: false }] }] } });
|
|
6520
6527
|
|
|
6521
6528
|
class ValueInputColorComponent {
|
|
@@ -6608,7 +6615,7 @@ class ValueInputColorComponent {
|
|
|
6608
6615
|
useExisting: forwardRef(() => ValueInputColorComponent),
|
|
6609
6616
|
multi: true,
|
|
6610
6617
|
}
|
|
6611
|
-
], viewQueries: [{ propertyName: "colorPicker", first: true, predicate: ["colorPicker"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-form-field class=\"w-full relative\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\
|
|
6618
|
+
], viewQueries: [{ propertyName: "colorPicker", first: true, predicate: ["colorPicker"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-form-field class=\"w-full relative\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n <mat-label>{{ name() }}</mat-label>\n <input matInput type=\"text\" [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" (click)=\"openColorPicker()\">\n <input type=\"color\" #colorPicker [value]=\"formControl.value\" (input)=\"onColorPickerChange($event)\" class=\"absolute opacity-0 right-55 top-full mt-1 z-10\" [class.hidden]=\"!showPicker\">\n <div class=\"w-5 h-5 rounded-full mr-4 cursor-pointer\" [style.background-color]=\"formControl.getRawValue()\" matSuffix (click)=\"openColorPicker()\"> </div>\n\n @for (error of getErrors(); track error) {\n <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\n }\n</mat-form-field>\n", styles: ["mat-form-field input[type=color]{width:auto;height:auto}:host{--color-picker-width: 250px}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
|
|
6612
6619
|
}
|
|
6613
6620
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputColorComponent, decorators: [{
|
|
6614
6621
|
type: Component,
|
|
@@ -6623,7 +6630,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
6623
6630
|
useExisting: forwardRef(() => ValueInputColorComponent),
|
|
6624
6631
|
multi: true,
|
|
6625
6632
|
}
|
|
6626
|
-
], template: "<mat-form-field class=\"w-full relative\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\
|
|
6633
|
+
], template: "<mat-form-field class=\"w-full relative\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n <mat-label>{{ name() }}</mat-label>\n <input matInput type=\"text\" [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" (click)=\"openColorPicker()\">\n <input type=\"color\" #colorPicker [value]=\"formControl.value\" (input)=\"onColorPickerChange($event)\" class=\"absolute opacity-0 right-55 top-full mt-1 z-10\" [class.hidden]=\"!showPicker\">\n <div class=\"w-5 h-5 rounded-full mr-4 cursor-pointer\" [style.background-color]=\"formControl.getRawValue()\" matSuffix (click)=\"openColorPicker()\"> </div>\n\n @for (error of getErrors(); track error) {\n <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\n }\n</mat-form-field>\n", styles: ["mat-form-field input[type=color]{width:auto;height:auto}:host{--color-picker-width: 250px}\n"] }]
|
|
6627
6634
|
}], ctorParameters: () => [{ type: i1$1.TranslateService }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], colorPicker: [{ type: i0.ViewChild, args: ['colorPicker', { isSignal: true }] }], validators: [{ type: i0.Input, args: [{ isSignal: true, alias: "validators", required: false }] }], showErrorInTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrorInTooltip", required: false }] }] } });
|
|
6628
6635
|
|
|
6629
6636
|
class ValueInputDateComponent {
|
|
@@ -6691,7 +6698,7 @@ class ValueInputDateComponent {
|
|
|
6691
6698
|
useExisting: forwardRef(() => ValueInputDateComponent),
|
|
6692
6699
|
multi: true,
|
|
6693
6700
|
}
|
|
6694
|
-
], ngImport: i0, template: "<app-date-time-form-field [formControl]=\"formControl\" [validators]=\"validators()\" [showErrorInTooltip]=\"showErrorInTooltip()\" class=\"w-full\"></app-date-time-form-field>\
|
|
6701
|
+
], ngImport: i0, template: "<app-date-time-form-field [formControl]=\"formControl\" [validators]=\"validators()\" [showErrorInTooltip]=\"showErrorInTooltip()\" class=\"w-full\"></app-date-time-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: DateTimeFormFieldComponent, selector: "app-date-time-form-field", inputs: ["dateLabel", "timeLabel", "validators", "showErrorInTooltip", "timezone"] }] });
|
|
6695
6702
|
}
|
|
6696
6703
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputDateComponent, decorators: [{
|
|
6697
6704
|
type: Component,
|
|
@@ -6706,7 +6713,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
6706
6713
|
useExisting: forwardRef(() => ValueInputDateComponent),
|
|
6707
6714
|
multi: true,
|
|
6708
6715
|
}
|
|
6709
|
-
], template: "<app-date-time-form-field [formControl]=\"formControl\" [validators]=\"validators()\" [showErrorInTooltip]=\"showErrorInTooltip()\" class=\"w-full\"></app-date-time-form-field>\
|
|
6716
|
+
], template: "<app-date-time-form-field [formControl]=\"formControl\" [validators]=\"validators()\" [showErrorInTooltip]=\"showErrorInTooltip()\" class=\"w-full\"></app-date-time-form-field>\n" }]
|
|
6710
6717
|
}], ctorParameters: () => [], propDecorators: { validators: [{ type: i0.Input, args: [{ isSignal: true, alias: "validators", required: false }] }], showErrorInTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrorInTooltip", required: false }] }] } });
|
|
6711
6718
|
|
|
6712
6719
|
class ValueInputEnumComponent {
|
|
@@ -6781,7 +6788,7 @@ class ValueInputEnumComponent {
|
|
|
6781
6788
|
useExisting: forwardRef(() => ValueInputEnumComponent),
|
|
6782
6789
|
multi: true,
|
|
6783
6790
|
}
|
|
6784
|
-
], ngImport: i0, template: "<div class=\"w-full flex flex-col gap-y-2\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\
|
|
6791
|
+
], ngImport: i0, template: "<div class=\"w-full flex flex-col gap-y-2\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <mat-label>{{ name() }}</mat-label>\n <mat-select [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\">\n @for (value of options(); track value) {\n <mat-option [value]=\"value\">{{ value }}</mat-option>\n }\n </mat-select>\n\n @for (error of getErrors(); track error) {\n <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\n }\n </mat-form-field>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
|
|
6785
6792
|
}
|
|
6786
6793
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputEnumComponent, decorators: [{
|
|
6787
6794
|
type: Component,
|
|
@@ -6796,7 +6803,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
6796
6803
|
useExisting: forwardRef(() => ValueInputEnumComponent),
|
|
6797
6804
|
multi: true,
|
|
6798
6805
|
}
|
|
6799
|
-
], template: "<div class=\"w-full flex flex-col gap-y-2\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\
|
|
6806
|
+
], template: "<div class=\"w-full flex flex-col gap-y-2\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <mat-label>{{ name() }}</mat-label>\n <mat-select [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\">\n @for (value of options(); track value) {\n <mat-option [value]=\"value\">{{ value }}</mat-option>\n }\n </mat-select>\n\n @for (error of getErrors(); track error) {\n <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\n }\n </mat-form-field>\n</div>\n" }]
|
|
6800
6807
|
}], ctorParameters: () => [{ type: i1$1.TranslateService }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], validators: [{ type: i0.Input, args: [{ isSignal: true, alias: "validators", required: false }] }], showErrorInTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrorInTooltip", required: false }] }] } });
|
|
6801
6808
|
|
|
6802
6809
|
class ValueInputHexadecimalComponent {
|
|
@@ -6874,7 +6881,7 @@ class ValueInputHexadecimalComponent {
|
|
|
6874
6881
|
useExisting: forwardRef(() => ValueInputHexadecimalComponent),
|
|
6875
6882
|
multi: true,
|
|
6876
6883
|
}
|
|
6877
|
-
], ngImport: i0, template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\
|
|
6884
|
+
], ngImport: i0, template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n <mat-label>{{ 'DATA_BROWSER.ATTRIBUTE_VALUE' | translate }}</mat-label>\n <input matInput type=\"text\" [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" autocomplete=\"off\"/>\n\n @for (error of getErrors(); track error) {\n <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\n }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
|
|
6878
6885
|
}
|
|
6879
6886
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputHexadecimalComponent, decorators: [{
|
|
6880
6887
|
type: Component,
|
|
@@ -6889,7 +6896,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
6889
6896
|
useExisting: forwardRef(() => ValueInputHexadecimalComponent),
|
|
6890
6897
|
multi: true,
|
|
6891
6898
|
}
|
|
6892
|
-
], template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\
|
|
6899
|
+
], template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n <mat-label>{{ 'DATA_BROWSER.ATTRIBUTE_VALUE' | translate }}</mat-label>\n <input matInput type=\"text\" [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" autocomplete=\"off\"/>\n\n @for (error of getErrors(); track error) {\n <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\n }\n</mat-form-field>\n" }]
|
|
6893
6900
|
}], ctorParameters: () => [{ type: i1$1.TranslateService }], propDecorators: { validators: [{ type: i0.Input, args: [{ isSignal: true, alias: "validators", required: false }] }], showErrorInTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrorInTooltip", required: false }] }] } });
|
|
6894
6901
|
|
|
6895
6902
|
class ValueInputLinkComponent {
|
|
@@ -6968,7 +6975,7 @@ class ValueInputLinkComponent {
|
|
|
6968
6975
|
useExisting: forwardRef(() => ValueInputLinkComponent),
|
|
6969
6976
|
multi: true,
|
|
6970
6977
|
}
|
|
6971
|
-
], ngImport: i0, template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\
|
|
6978
|
+
], ngImport: i0, template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n <mat-label>{{ 'DATA_BROWSER.ATTRIBUTE_VALUE' | translate }}</mat-label>\n <input matInput type=\"text\" [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" autocomplete=\"off\"/>\n\n @for (error of getErrors(); track error) {\n <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\n }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
|
|
6972
6979
|
}
|
|
6973
6980
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputLinkComponent, decorators: [{
|
|
6974
6981
|
type: Component,
|
|
@@ -6983,7 +6990,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
6983
6990
|
useExisting: forwardRef(() => ValueInputLinkComponent),
|
|
6984
6991
|
multi: true,
|
|
6985
6992
|
}
|
|
6986
|
-
], template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\
|
|
6993
|
+
], template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n <mat-label>{{ 'DATA_BROWSER.ATTRIBUTE_VALUE' | translate }}</mat-label>\n <input matInput type=\"text\" [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" autocomplete=\"off\"/>\n\n @for (error of getErrors(); track error) {\n <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\n }\n</mat-form-field>\n" }]
|
|
6987
6994
|
}], ctorParameters: () => [{ type: i1$1.TranslateService }], propDecorators: { validators: [{ type: i0.Input, args: [{ isSignal: true, alias: "validators", required: false }] }], showErrorInTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrorInTooltip", required: false }] }] } });
|
|
6988
6995
|
|
|
6989
6996
|
class ValueInputLocationComponent {
|
|
@@ -7078,7 +7085,7 @@ class ValueInputLocationComponent {
|
|
|
7078
7085
|
useExisting: forwardRef(() => ValueInputLocationComponent),
|
|
7079
7086
|
multi: true,
|
|
7080
7087
|
}
|
|
7081
|
-
], ngImport: i0, template: "<form [formGroup]=\"formGroup\">\
|
|
7088
|
+
], ngImport: i0, template: "<form [formGroup]=\"formGroup\">\n <div class=\"flex flex-col gap-y-1\">\n <div class=\"flex gap-4 w-full justify-between items-start\">\n <mat-form-field class=\"flex-1\" [matTooltip]=\"getErrorTooltip('latitude')\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n <mat-label>{{ 'DATA_BROWSER.ATTRIBUTE_LATITUDE' | translate }}</mat-label>\n <input matInput (paste)=\"handleLocationPaste($event, 'latitude')\" (blur)=\"this.formGroup.get('latitude')?.updateValueAndValidity({ emitEvent: false })\" formControlName=\"latitude\" type=\"number\" autocomplete=\"off\">\n\n @for (error of getErrors('latitude'); track error) {\n <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate: {max: 90, min: -90} }}</mat-error>\n }\n </mat-form-field>\n\n <mat-form-field class=\"flex-1\" [matTooltip]=\"getErrorTooltip('longitude')\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n <mat-label>{{ 'DATA_BROWSER.ATTRIBUTE_LONGITUDE' | translate }}</mat-label>\n <input matInput (paste)=\"handleLocationPaste($event, 'longitude')\" (blur)=\"this.formGroup.get('longitude')?.updateValueAndValidity({ emitEvent: false })\" formControlName=\"longitude\" type=\"number\" autocomplete=\"off\">\n\n @for (error of getErrors('longitude'); track error) {\n <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate: {max: 180, min: -180} }}</mat-error>\n }\n </mat-form-field>\n </div>\n </div>\n</form>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.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: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
|
|
7082
7089
|
}
|
|
7083
7090
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputLocationComponent, decorators: [{
|
|
7084
7091
|
type: Component,
|
|
@@ -7093,7 +7100,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
7093
7100
|
useExisting: forwardRef(() => ValueInputLocationComponent),
|
|
7094
7101
|
multi: true,
|
|
7095
7102
|
}
|
|
7096
|
-
], template: "<form [formGroup]=\"formGroup\">\
|
|
7103
|
+
], template: "<form [formGroup]=\"formGroup\">\n <div class=\"flex flex-col gap-y-1\">\n <div class=\"flex gap-4 w-full justify-between items-start\">\n <mat-form-field class=\"flex-1\" [matTooltip]=\"getErrorTooltip('latitude')\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n <mat-label>{{ 'DATA_BROWSER.ATTRIBUTE_LATITUDE' | translate }}</mat-label>\n <input matInput (paste)=\"handleLocationPaste($event, 'latitude')\" (blur)=\"this.formGroup.get('latitude')?.updateValueAndValidity({ emitEvent: false })\" formControlName=\"latitude\" type=\"number\" autocomplete=\"off\">\n\n @for (error of getErrors('latitude'); track error) {\n <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate: {max: 90, min: -90} }}</mat-error>\n }\n </mat-form-field>\n\n <mat-form-field class=\"flex-1\" [matTooltip]=\"getErrorTooltip('longitude')\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n <mat-label>{{ 'DATA_BROWSER.ATTRIBUTE_LONGITUDE' | translate }}</mat-label>\n <input matInput (paste)=\"handleLocationPaste($event, 'longitude')\" (blur)=\"this.formGroup.get('longitude')?.updateValueAndValidity({ emitEvent: false })\" formControlName=\"longitude\" type=\"number\" autocomplete=\"off\">\n\n @for (error of getErrors('longitude'); track error) {\n <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate: {max: 180, min: -180} }}</mat-error>\n }\n </mat-form-field>\n </div>\n </div>\n</form>\n" }]
|
|
7097
7104
|
}], ctorParameters: () => [{ type: i1$1.TranslateService }], propDecorators: { validators: [{ type: i0.Input, args: [{ isSignal: true, alias: "validators", required: false }] }], showErrorInTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrorInTooltip", required: false }] }] } });
|
|
7098
7105
|
|
|
7099
7106
|
class ValueInputNumericComponent {
|
|
@@ -7175,7 +7182,7 @@ class ValueInputNumericComponent {
|
|
|
7175
7182
|
useExisting: forwardRef(() => ValueInputNumericComponent),
|
|
7176
7183
|
multi: true,
|
|
7177
7184
|
}
|
|
7178
|
-
], ngImport: i0, template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\
|
|
7185
|
+
], ngImport: i0, template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n <mat-label>{{ name() }}</mat-label>\n <input matInput type=\"text\" [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" autocomplete=\"off\" wolkaboutLocalizedNumericInput/>\n\n @for (error of getErrors(); track error) {\n <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\n }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: LocalizedNumericInputDirective, selector: "input[wolkaboutLocalizedNumericInput]" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
|
|
7179
7186
|
}
|
|
7180
7187
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputNumericComponent, decorators: [{
|
|
7181
7188
|
type: Component,
|
|
@@ -7190,7 +7197,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
7190
7197
|
useExisting: forwardRef(() => ValueInputNumericComponent),
|
|
7191
7198
|
multi: true,
|
|
7192
7199
|
}
|
|
7193
|
-
], template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\
|
|
7200
|
+
], template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n <mat-label>{{ name() }}</mat-label>\n <input matInput type=\"text\" [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" autocomplete=\"off\" wolkaboutLocalizedNumericInput/>\n\n @for (error of getErrors(); track error) {\n <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\n }\n</mat-form-field>\n" }]
|
|
7194
7201
|
}], ctorParameters: () => [{ type: i1$1.TranslateService }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], validators: [{ type: i0.Input, args: [{ isSignal: true, alias: "validators", required: false }] }], showErrorInTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrorInTooltip", required: false }] }] } });
|
|
7195
7202
|
|
|
7196
7203
|
class ValueInputStringComponent {
|
|
@@ -7264,7 +7271,7 @@ class ValueInputStringComponent {
|
|
|
7264
7271
|
useExisting: forwardRef(() => ValueInputStringComponent),
|
|
7265
7272
|
multi: true,
|
|
7266
7273
|
}
|
|
7267
|
-
], ngImport: i0, template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\
|
|
7274
|
+
], ngImport: i0, template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n <mat-label>{{ name() }}</mat-label>\n <input matInput [type]=\"'text'\" [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" autocomplete=\"off\"/>\n @for (error of getErrors(); track error) {\n <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate : {max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\n }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
|
|
7268
7275
|
}
|
|
7269
7276
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputStringComponent, decorators: [{
|
|
7270
7277
|
type: Component,
|
|
@@ -7279,7 +7286,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
7279
7286
|
useExisting: forwardRef(() => ValueInputStringComponent),
|
|
7280
7287
|
multi: true,
|
|
7281
7288
|
}
|
|
7282
|
-
], template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\
|
|
7289
|
+
], template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n <mat-label>{{ name() }}</mat-label>\n <input matInput [type]=\"'text'\" [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" autocomplete=\"off\"/>\n @for (error of getErrors(); track error) {\n <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate : {max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\n }\n</mat-form-field>\n" }]
|
|
7283
7290
|
}], ctorParameters: () => [{ type: i1$1.TranslateService }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], validators: [{ type: i0.Input, args: [{ isSignal: true, alias: "validators", required: false }] }], showErrorInTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrorInTooltip", required: false }] }] } });
|
|
7284
7291
|
|
|
7285
7292
|
class ValueInputVectorComponent {
|
|
@@ -7373,7 +7380,7 @@ class ValueInputVectorComponent {
|
|
|
7373
7380
|
useExisting: forwardRef(() => ValueInputVectorComponent),
|
|
7374
7381
|
multi: true,
|
|
7375
7382
|
}
|
|
7376
|
-
], ngImport: i0, template: "<div class=\"w-full flex flex-col gap-y-2\">\
|
|
7383
|
+
], ngImport: i0, template: "<div class=\"w-full flex flex-col gap-y-2\">\n <mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n <mat-label>{{ name() }} ({{ options()?.join(',') }})</mat-label>\n <input matInput [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" class=\"w-full\">\n\n @for (error of getErrors(); track error) {\n <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\n }\n </mat-form-field>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
|
|
7377
7384
|
}
|
|
7378
7385
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputVectorComponent, decorators: [{
|
|
7379
7386
|
type: Component,
|
|
@@ -7388,7 +7395,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
7388
7395
|
useExisting: forwardRef(() => ValueInputVectorComponent),
|
|
7389
7396
|
multi: true,
|
|
7390
7397
|
}
|
|
7391
|
-
], template: "<div class=\"w-full flex flex-col gap-y-2\">\
|
|
7398
|
+
], template: "<div class=\"w-full flex flex-col gap-y-2\">\n <mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n <mat-label>{{ name() }} ({{ options()?.join(',') }})</mat-label>\n <input matInput [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" class=\"w-full\">\n\n @for (error of getErrors(); track error) {\n <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\n }\n </mat-form-field>\n</div>\n" }]
|
|
7392
7399
|
}], ctorParameters: () => [{ type: i1$1.TranslateService }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], showErrorInTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrorInTooltip", required: false }] }], validators: [{ type: i0.Input, args: [{ isSignal: true, alias: "validators", required: false }] }] } });
|
|
7393
7400
|
|
|
7394
7401
|
class ValueInputDurationComponent {
|
|
@@ -7489,7 +7496,7 @@ class ValueInputDurationComponent {
|
|
|
7489
7496
|
useExisting: forwardRef(() => ValueInputDurationComponent),
|
|
7490
7497
|
multi: true,
|
|
7491
7498
|
}
|
|
7492
|
-
], ngImport: i0, template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\
|
|
7499
|
+
], ngImport: i0, template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n <mat-label>{{ name() }}</mat-label>\n <input matInput [type]=\"'text'\" [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" autocomplete=\"off\"/>\n\n @for (error of getErrors(); track error) {\n <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\n }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
|
|
7493
7500
|
}
|
|
7494
7501
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputDurationComponent, decorators: [{
|
|
7495
7502
|
type: Component,
|
|
@@ -7504,7 +7511,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
7504
7511
|
useExisting: forwardRef(() => ValueInputDurationComponent),
|
|
7505
7512
|
multi: true,
|
|
7506
7513
|
}
|
|
7507
|
-
], template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\
|
|
7514
|
+
], template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n <mat-label>{{ name() }}</mat-label>\n <input matInput [type]=\"'text'\" [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" autocomplete=\"off\"/>\n\n @for (error of getErrors(); track error) {\n <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\n }\n</mat-form-field>\n" }]
|
|
7508
7515
|
}], ctorParameters: () => [{ type: i0.DestroyRef }, { type: i1$1.TranslateService }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], validators: [{ type: i0.Input, args: [{ isSignal: true, alias: "validators", required: false }] }], showErrorInTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrorInTooltip", required: false }] }] } });
|
|
7509
7516
|
|
|
7510
7517
|
class ValueInputComponent {
|
|
@@ -7585,7 +7592,7 @@ class ValueInputComponent {
|
|
|
7585
7592
|
useExisting: forwardRef(() => ValueInputComponent),
|
|
7586
7593
|
multi: true,
|
|
7587
7594
|
}
|
|
7588
|
-
], ngImport: i0, template: "@switch (dataType()) {\
|
|
7595
|
+
], ngImport: i0, template: "@switch (dataType()) {\n @case (DataType.STRING) {\n <app-value-input-string [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\n }\n @case (DataType.NUMERIC) {\n <app-value-input-numeric [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\n }\n @case (DataType.BOOLEAN) {\n <app-value-input-boolean [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\n }\n @case (DataType.HEXADECIMAL) {\n <app-value-input-hexadecimal [showErrorInTooltip]=\"showErrorInTooltip()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\n }\n @case (DataType.COLOR) {\n <app-value-input-color [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\n }\n @case (DataType.LINK) {\n <app-value-input-link [showErrorInTooltip]=\"showErrorInTooltip()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\n }\n @case (DataType.DATE) {\n <app-value-input-date [showErrorInTooltip]=\"showErrorInTooltip()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\n }\n @case (DataType.DURATION) {\n <app-value-input-duration [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\n }\n @case (DataType.LOCATION) {\n <app-value-input-location [showErrorInTooltip]=\"showErrorInTooltip()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\n }\n @case (DataType.VECTOR) {\n <app-value-input-vector [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\" [options]=\"options()\"/>\n }\n @case (DataType.ENUM) {\n <app-value-input-enum [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\" [options]=\"options()\"/>\n }\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ValueInputBooleanComponent, selector: "app-value-input-boolean", inputs: ["name", "validators", "showErrorInTooltip"] }, { kind: "component", type: ValueInputColorComponent, selector: "app-value-input-color", inputs: ["name", "validators", "showErrorInTooltip"] }, { kind: "component", type: ValueInputDateComponent, selector: "app-value-input-date", inputs: ["validators", "showErrorInTooltip"] }, { kind: "component", type: ValueInputEnumComponent, selector: "app-value-input-enum", inputs: ["options", "name", "validators", "showErrorInTooltip"] }, { kind: "component", type: ValueInputHexadecimalComponent, selector: "app-value-input-hexadecimal", inputs: ["validators", "showErrorInTooltip"] }, { kind: "component", type: ValueInputLinkComponent, selector: "app-value-input-link", inputs: ["validators", "showErrorInTooltip"] }, { kind: "component", type: ValueInputLocationComponent, selector: "app-value-input-location", inputs: ["validators", "showErrorInTooltip"] }, { kind: "component", type: ValueInputNumericComponent, selector: "app-value-input-numeric", inputs: ["name", "validators", "showErrorInTooltip"] }, { kind: "component", type: ValueInputStringComponent, selector: "app-value-input-string", inputs: ["name", "validators", "showErrorInTooltip"] }, { kind: "component", type: ValueInputVectorComponent, selector: "app-value-input-vector", inputs: ["options", "name", "showErrorInTooltip", "validators"] }, { kind: "component", type: ValueInputDurationComponent, selector: "app-value-input-duration", inputs: ["name", "validators", "showErrorInTooltip"] }] });
|
|
7589
7596
|
}
|
|
7590
7597
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputComponent, decorators: [{
|
|
7591
7598
|
type: Component,
|
|
@@ -7600,7 +7607,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
7600
7607
|
useExisting: forwardRef(() => ValueInputComponent),
|
|
7601
7608
|
multi: true,
|
|
7602
7609
|
}
|
|
7603
|
-
], template: "@switch (dataType()) {\
|
|
7610
|
+
], template: "@switch (dataType()) {\n @case (DataType.STRING) {\n <app-value-input-string [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\n }\n @case (DataType.NUMERIC) {\n <app-value-input-numeric [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\n }\n @case (DataType.BOOLEAN) {\n <app-value-input-boolean [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\n }\n @case (DataType.HEXADECIMAL) {\n <app-value-input-hexadecimal [showErrorInTooltip]=\"showErrorInTooltip()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\n }\n @case (DataType.COLOR) {\n <app-value-input-color [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\n }\n @case (DataType.LINK) {\n <app-value-input-link [showErrorInTooltip]=\"showErrorInTooltip()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\n }\n @case (DataType.DATE) {\n <app-value-input-date [showErrorInTooltip]=\"showErrorInTooltip()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\n }\n @case (DataType.DURATION) {\n <app-value-input-duration [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\n }\n @case (DataType.LOCATION) {\n <app-value-input-location [showErrorInTooltip]=\"showErrorInTooltip()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\n }\n @case (DataType.VECTOR) {\n <app-value-input-vector [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\" [options]=\"options()\"/>\n }\n @case (DataType.ENUM) {\n <app-value-input-enum [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\" [options]=\"options()\"/>\n }\n}\n" }]
|
|
7604
7611
|
}], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], dataType: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataType", required: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], validationConditions: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationConditions", required: false }] }], showErrorInTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrorInTooltip", required: false }] }] } });
|
|
7605
7612
|
|
|
7606
7613
|
class DoubleDrawerLayoutComponent {
|
|
@@ -7693,13 +7700,13 @@ class DoubleDrawerLayoutComponent {
|
|
|
7693
7700
|
}
|
|
7694
7701
|
}
|
|
7695
7702
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DoubleDrawerLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7696
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DoubleDrawerLayoutComponent, isStandalone: true, selector: "app-double-drawer-layout", inputs: { leftDrawerConfig: { classPropertyName: "leftDrawerConfig", publicName: "leftDrawerConfig", isSignal: true, isRequired: true, transformFunction: null }, rightDrawerConfig: { classPropertyName: "rightDrawerConfig", publicName: "rightDrawerConfig", isSignal: true, isRequired: false, transformFunction: null }, backdropConfig: { classPropertyName: "backdropConfig", publicName: "backdropConfig", isSignal: true, isRequired: true, transformFunction: null }, dialogConfig: { classPropertyName: "dialogConfig", publicName: "dialogConfig", isSignal: true, isRequired: false, transformFunction: null }, fullScreenConfig: { classPropertyName: "fullScreenConfig", publicName: "fullScreenConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { leftDrawerToggled: "leftDrawerToggled", rightDrawerToggled: "rightDrawerToggled" }, host: { listeners: { "window:mousemove": "onMouseMove()", "window:keydown": "onKeyDown($event)" } }, ngImport: i0, template: "<div class=\"w-full h-full relative\">\
|
|
7703
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DoubleDrawerLayoutComponent, isStandalone: true, selector: "app-double-drawer-layout", inputs: { leftDrawerConfig: { classPropertyName: "leftDrawerConfig", publicName: "leftDrawerConfig", isSignal: true, isRequired: true, transformFunction: null }, rightDrawerConfig: { classPropertyName: "rightDrawerConfig", publicName: "rightDrawerConfig", isSignal: true, isRequired: false, transformFunction: null }, backdropConfig: { classPropertyName: "backdropConfig", publicName: "backdropConfig", isSignal: true, isRequired: true, transformFunction: null }, dialogConfig: { classPropertyName: "dialogConfig", publicName: "dialogConfig", isSignal: true, isRequired: false, transformFunction: null }, fullScreenConfig: { classPropertyName: "fullScreenConfig", publicName: "fullScreenConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { leftDrawerToggled: "leftDrawerToggled", rightDrawerToggled: "rightDrawerToggled" }, host: { listeners: { "window:mousemove": "onMouseMove()", "window:keydown": "onKeyDown($event)" } }, ngImport: i0, template: "<div class=\"w-full h-full relative\">\n <div class=\"absolute h-full drawer\" [ngClass]=\"{open : isLeftDrawerOpen()}\" [ngStyle]=\"{'width': isLeftDrawerOpen() ? leftDrawerConfig().width : '0px'}\">\n <button mat-flat-button class=\"drawer-toggle\"\n (click)=\"isLeftDrawerOpen.set(!isLeftDrawerOpen())\"\n [ngClass]=\"{\n 'destructive-flat-button': isLeftDrawerOpen(),\n 'drawer-toggle-name': leftDrawerConfig().title && !isLeftDrawerOpen()\n }\"\n [matTooltip]=\"isLeftDrawerOpen() ?\n ('COMMON.COLLAPSE_NAVIGATION' | translate) :\n leftDrawerConfig().title ?\n leftDrawerConfig().title :\n ('COMMON.EXPAND_NAVIGATION' | translate)\"\n matTooltipPosition=\"right\">\n @if (leftDrawerConfig().title && !isLeftDrawerOpen()) {\n <span>{{ leftDrawerConfig().title }}</span>\n } @else {\n <span class=\"block\"><mat-icon [ngClass]=\"{'toggle-icon-small': !isLeftDrawerOpen()}\" [svgIcon]=\"isLeftDrawerOpen() ? 'close' : 'arrow_right'\"></mat-icon></span>\n }\n </button>\n <div class=\"h-full w-full\" [ngClass]=\"{'overflow-hidden': !isLeftDrawerOpen()}\">\n <ng-content select=\"[left-drawer]\"></ng-content>\n </div>\n </div>\n <div class=\"h-full w-full content-wrapper\" [ngClass]=\"{'open': (isLeftDrawerOpen() || isRightDrawerOpen()) && backdropConfig().show}\">\n <div class=\"message-wrapper\" [ngClass]=\"{'show': backdropConfig().showMessage}\">\n <span>{{ backdropConfig().message | translate }}</span>\n </div>\n <div class=\"content-backdrop\" [ngClass]=\"{'transparent': backdropConfig().showTransparentBackdrop}\" (click)=\"backdropClick()\">\n </div>\n <div class=\"flex flex-col flex-auto gap-4 h-full w-full overflow-hidden relative\">\n @if (showFullscreenButton()) {\n <button mat-icon-button type=\"button\" class=\"absolute top-2 right-3 !z-10\" [ngClass]=\"!isLeftDrawerOpen() && !isRightDrawerOpen() ? '!block' : '!hidden' \" (mouseover)=\"mouseOver()\" (mouseout)=\"hoverActive.set(false)\"\n [matTooltip]=\"fullScreenEnabled() ? ('COMMON.EXIT_FULLSCREEN' | translate) : ('COMMON.ENTER_FULLSCREEN' | translate)\" (click)=\"fullscreenService.toggleFullScreen(); hoverActive.set(false)\" matTooltipPosition=\"left\">\n @if (fullScreenEnabled()) {\n <mat-icon>fullscreen_exit</mat-icon>\n } @else {\n <mat-icon>fullscreen</mat-icon>\n }\n </button>\n }\n <ng-content select=\"[details]\"></ng-content>\n </div>\n </div>\n <div class=\"absolute h-full drawer right\" [ngClass]=\"{open : isRightDrawerOpen()}\" [ngStyle]=\"{'width': isRightDrawerOpen() ? rightDrawerConfig()?.width : '0px'}\">\n <button mat-flat-button class=\"drawer-toggle\"\n (click)=\"toggleRightDrawer()\"\n [ngClass]=\"{'destructive-flat-button': isRightDrawerOpen()}\"\n [matTooltip]=\"isRightDrawerOpen() ? ('COMMON.COLLAPSE_NAVIGATION' | translate) : ('COMMON.EXPAND_NAVIGATION' | translate)\"\n matTooltipPosition=\"right\">\n <span class=\"block\"><mat-icon [svgIcon]=\"isRightDrawerOpen() ? 'close' : 'arrow_left'\"></mat-icon></span>\n </button>\n <div class=\"h-full w-full\" [ngClass]=\"{'overflow-hidden': !isRightDrawerOpen()}\">\n <ng-content select=\"[right-drawer]\"></ng-content>\n </div>\n </div>\n</div>\n", styles: [":host{display:flex;height:100%;width:100%;max-height:100%;max-width:100%;box-sizing:border-box}.drawer{z-index:10;width:0;max-width:calc(100% - 40px);transition:all .3s cubic-bezier(.4,0,.2,1) 0s;position:relative;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.drawer:after{content:\"\";display:block;width:100%;height:100%;opacity:.6;position:absolute;inset:0;background-color:var(--mat-sys-surface-container);z-index:-1}.drawer .drawer-toggle{position:absolute;bottom:16px;right:0;word-break:keep-all;white-space:nowrap;min-width:fit-content!important;width:fit-content!important;transform:translate(100%);border-radius:0 5px 5px 0!important;padding:0 10px}.drawer .drawer-toggle.drawer-toggle-name{max-width:300px!important;min-width:unset!important;overflow:hidden}.drawer .drawer-toggle.drawer-toggle-name span{display:block;max-width:280px;overflow:hidden;text-overflow:ellipsis}.drawer .drawer-toggle .toggle-icon-small{margin:0 6px;height:10px;width:10px}.drawer.right{right:0;top:0}.drawer.right .drawer-toggle{display:none;position:absolute;bottom:16px;left:0;transform:translate(-100%);border-radius:5px 0 0 5px!important}.drawer.right .drawer-toggle span{line-height:12px}.drawer.right .drawer-toggle span mat-icon{height:24px;width:24px}.drawer.open{border-right:1px solid var(--mat-sys-outline-variant)}.drawer.open.right .drawer-toggle{display:block}.drawer.open.right{border-right:unset;border-left:1px solid var(--mat-sys-outline-variant)}.drawer.open .drawer-toggle span{line-height:12px}.drawer.open .drawer-toggle span mat-icon{height:24px;width:24px}:host-context(.alt-theme) .drawer.after{background-color:var(--mat-sys-surface-container-lowest)}.content-wrapper{position:relative}.content-wrapper .content-backdrop{transition:all .3s cubic-bezier(.4,0,.2,1) 0s;width:100%;height:100%;position:absolute;top:0;left:0;opacity:0;z-index:-1;background-color:transparent}.content-wrapper .message-wrapper{transition:all .5s cubic-bezier(.4,0,.2,1) 0s;position:absolute;right:32px;top:24px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:10px;padding:0 1rem;height:2.5rem;box-sizing:border-box;background-color:var(--mat-sys-primary);color:var(--mat-sys-surface-container);opacity:0;z-index:-1}.content-wrapper .message-wrapper.show{opacity:1;z-index:4}.content-wrapper.open .content-backdrop{background-color:#000;opacity:.5;z-index:3}.content-wrapper.open .content-backdrop.transparent{background-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i1$4.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
|
|
7697
7704
|
}
|
|
7698
7705
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DoubleDrawerLayoutComponent, decorators: [{
|
|
7699
7706
|
type: Component,
|
|
7700
7707
|
args: [{ selector: 'app-double-drawer-layout', imports: [
|
|
7701
7708
|
SharedModule
|
|
7702
|
-
], template: "<div class=\"w-full h-full relative\">\
|
|
7709
|
+
], template: "<div class=\"w-full h-full relative\">\n <div class=\"absolute h-full drawer\" [ngClass]=\"{open : isLeftDrawerOpen()}\" [ngStyle]=\"{'width': isLeftDrawerOpen() ? leftDrawerConfig().width : '0px'}\">\n <button mat-flat-button class=\"drawer-toggle\"\n (click)=\"isLeftDrawerOpen.set(!isLeftDrawerOpen())\"\n [ngClass]=\"{\n 'destructive-flat-button': isLeftDrawerOpen(),\n 'drawer-toggle-name': leftDrawerConfig().title && !isLeftDrawerOpen()\n }\"\n [matTooltip]=\"isLeftDrawerOpen() ?\n ('COMMON.COLLAPSE_NAVIGATION' | translate) :\n leftDrawerConfig().title ?\n leftDrawerConfig().title :\n ('COMMON.EXPAND_NAVIGATION' | translate)\"\n matTooltipPosition=\"right\">\n @if (leftDrawerConfig().title && !isLeftDrawerOpen()) {\n <span>{{ leftDrawerConfig().title }}</span>\n } @else {\n <span class=\"block\"><mat-icon [ngClass]=\"{'toggle-icon-small': !isLeftDrawerOpen()}\" [svgIcon]=\"isLeftDrawerOpen() ? 'close' : 'arrow_right'\"></mat-icon></span>\n }\n </button>\n <div class=\"h-full w-full\" [ngClass]=\"{'overflow-hidden': !isLeftDrawerOpen()}\">\n <ng-content select=\"[left-drawer]\"></ng-content>\n </div>\n </div>\n <div class=\"h-full w-full content-wrapper\" [ngClass]=\"{'open': (isLeftDrawerOpen() || isRightDrawerOpen()) && backdropConfig().show}\">\n <div class=\"message-wrapper\" [ngClass]=\"{'show': backdropConfig().showMessage}\">\n <span>{{ backdropConfig().message | translate }}</span>\n </div>\n <div class=\"content-backdrop\" [ngClass]=\"{'transparent': backdropConfig().showTransparentBackdrop}\" (click)=\"backdropClick()\">\n </div>\n <div class=\"flex flex-col flex-auto gap-4 h-full w-full overflow-hidden relative\">\n @if (showFullscreenButton()) {\n <button mat-icon-button type=\"button\" class=\"absolute top-2 right-3 !z-10\" [ngClass]=\"!isLeftDrawerOpen() && !isRightDrawerOpen() ? '!block' : '!hidden' \" (mouseover)=\"mouseOver()\" (mouseout)=\"hoverActive.set(false)\"\n [matTooltip]=\"fullScreenEnabled() ? ('COMMON.EXIT_FULLSCREEN' | translate) : ('COMMON.ENTER_FULLSCREEN' | translate)\" (click)=\"fullscreenService.toggleFullScreen(); hoverActive.set(false)\" matTooltipPosition=\"left\">\n @if (fullScreenEnabled()) {\n <mat-icon>fullscreen_exit</mat-icon>\n } @else {\n <mat-icon>fullscreen</mat-icon>\n }\n </button>\n }\n <ng-content select=\"[details]\"></ng-content>\n </div>\n </div>\n <div class=\"absolute h-full drawer right\" [ngClass]=\"{open : isRightDrawerOpen()}\" [ngStyle]=\"{'width': isRightDrawerOpen() ? rightDrawerConfig()?.width : '0px'}\">\n <button mat-flat-button class=\"drawer-toggle\"\n (click)=\"toggleRightDrawer()\"\n [ngClass]=\"{'destructive-flat-button': isRightDrawerOpen()}\"\n [matTooltip]=\"isRightDrawerOpen() ? ('COMMON.COLLAPSE_NAVIGATION' | translate) : ('COMMON.EXPAND_NAVIGATION' | translate)\"\n matTooltipPosition=\"right\">\n <span class=\"block\"><mat-icon [svgIcon]=\"isRightDrawerOpen() ? 'close' : 'arrow_left'\"></mat-icon></span>\n </button>\n <div class=\"h-full w-full\" [ngClass]=\"{'overflow-hidden': !isRightDrawerOpen()}\">\n <ng-content select=\"[right-drawer]\"></ng-content>\n </div>\n </div>\n</div>\n", styles: [":host{display:flex;height:100%;width:100%;max-height:100%;max-width:100%;box-sizing:border-box}.drawer{z-index:10;width:0;max-width:calc(100% - 40px);transition:all .3s cubic-bezier(.4,0,.2,1) 0s;position:relative;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.drawer:after{content:\"\";display:block;width:100%;height:100%;opacity:.6;position:absolute;inset:0;background-color:var(--mat-sys-surface-container);z-index:-1}.drawer .drawer-toggle{position:absolute;bottom:16px;right:0;word-break:keep-all;white-space:nowrap;min-width:fit-content!important;width:fit-content!important;transform:translate(100%);border-radius:0 5px 5px 0!important;padding:0 10px}.drawer .drawer-toggle.drawer-toggle-name{max-width:300px!important;min-width:unset!important;overflow:hidden}.drawer .drawer-toggle.drawer-toggle-name span{display:block;max-width:280px;overflow:hidden;text-overflow:ellipsis}.drawer .drawer-toggle .toggle-icon-small{margin:0 6px;height:10px;width:10px}.drawer.right{right:0;top:0}.drawer.right .drawer-toggle{display:none;position:absolute;bottom:16px;left:0;transform:translate(-100%);border-radius:5px 0 0 5px!important}.drawer.right .drawer-toggle span{line-height:12px}.drawer.right .drawer-toggle span mat-icon{height:24px;width:24px}.drawer.open{border-right:1px solid var(--mat-sys-outline-variant)}.drawer.open.right .drawer-toggle{display:block}.drawer.open.right{border-right:unset;border-left:1px solid var(--mat-sys-outline-variant)}.drawer.open .drawer-toggle span{line-height:12px}.drawer.open .drawer-toggle span mat-icon{height:24px;width:24px}:host-context(.alt-theme) .drawer.after{background-color:var(--mat-sys-surface-container-lowest)}.content-wrapper{position:relative}.content-wrapper .content-backdrop{transition:all .3s cubic-bezier(.4,0,.2,1) 0s;width:100%;height:100%;position:absolute;top:0;left:0;opacity:0;z-index:-1;background-color:transparent}.content-wrapper .message-wrapper{transition:all .5s cubic-bezier(.4,0,.2,1) 0s;position:absolute;right:32px;top:24px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:10px;padding:0 1rem;height:2.5rem;box-sizing:border-box;background-color:var(--mat-sys-primary);color:var(--mat-sys-surface-container);opacity:0;z-index:-1}.content-wrapper .message-wrapper.show{opacity:1;z-index:4}.content-wrapper.open .content-backdrop{background-color:#000;opacity:.5;z-index:3}.content-wrapper.open .content-backdrop.transparent{background-color:transparent}\n"] }]
|
|
7703
7710
|
}], ctorParameters: () => [], propDecorators: { onMouseMove: [{
|
|
7704
7711
|
type: HostListener,
|
|
7705
7712
|
args: ['window:mousemove']
|