@wolkabout/commons 0.3.0 → 0.3.1
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 +110 -101
- package/fesm2022/wolkabout-commons.mjs.map +1 -1
- package/package.json +1 -1
- package/types/wolkabout-commons.d.ts +3 -2
|
@@ -710,6 +710,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
710
710
|
args: [{ providedIn: 'root' }]
|
|
711
711
|
}], ctorParameters: () => [{ type: i1.MatSnackBar }, { type: i1$1.TranslateService }] });
|
|
712
712
|
|
|
713
|
+
function getDecimalPlaces(value) {
|
|
714
|
+
return value.split('.')[1]?.length ?? 0;
|
|
715
|
+
}
|
|
713
716
|
class Locale {
|
|
714
717
|
name;
|
|
715
718
|
language;
|
|
@@ -3084,7 +3087,7 @@ class LocalizedNumberPipe {
|
|
|
3084
3087
|
constructor(tenantPropertiesService) {
|
|
3085
3088
|
this.tenantPropertiesService = tenantPropertiesService;
|
|
3086
3089
|
}
|
|
3087
|
-
transform(value, decimals =
|
|
3090
|
+
transform(value, decimals = null, locale) {
|
|
3088
3091
|
if (value == null) {
|
|
3089
3092
|
return '';
|
|
3090
3093
|
}
|
|
@@ -3092,10 +3095,16 @@ class LocalizedNumberPipe {
|
|
|
3092
3095
|
value = Number(value);
|
|
3093
3096
|
}
|
|
3094
3097
|
const defaultedLocale = locale ?? this.tenantPropertiesService.locale.code;
|
|
3095
|
-
|
|
3096
|
-
|
|
3097
|
-
|
|
3098
|
-
}
|
|
3098
|
+
const strValue = String(value);
|
|
3099
|
+
if (decimals == null && strValue.includes('e')) {
|
|
3100
|
+
return new Intl.NumberFormat(defaultedLocale, { notation: 'scientific', maximumSignificantDigits: 15 }).format(value);
|
|
3101
|
+
}
|
|
3102
|
+
const precision = getDecimalPlaces(strValue);
|
|
3103
|
+
const options = {
|
|
3104
|
+
minimumFractionDigits: decimals ?? Math.min(precision, 15),
|
|
3105
|
+
maximumFractionDigits: decimals ?? Math.min(precision, 15)
|
|
3106
|
+
};
|
|
3107
|
+
return new Intl.NumberFormat(defaultedLocale, options).format(value);
|
|
3099
3108
|
}
|
|
3100
3109
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LocalizedNumberPipe, deps: [{ token: TenantPropertiesService }], target: i0.ɵɵFactoryTarget.Pipe });
|
|
3101
3110
|
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: LocalizedNumberPipe, isStandalone: true, name: "localizedNumber" });
|
|
@@ -4299,11 +4308,11 @@ class AutocompleteComponent {
|
|
|
4299
4308
|
document.removeEventListener('touchmove', this.scrollEvent, true);
|
|
4300
4309
|
}
|
|
4301
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 });
|
|
4302
|
-
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" }] });
|
|
4303
4312
|
}
|
|
4304
4313
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AutocompleteComponent, decorators: [{
|
|
4305
4314
|
type: Component,
|
|
4306
|
-
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"] }]
|
|
4307
4316
|
}], ctorParameters: () => [{ type: i5.NgControl, decorators: [{
|
|
4308
4317
|
type: Optional
|
|
4309
4318
|
}, {
|
|
@@ -4415,11 +4424,11 @@ class AutocompleteChipsComponent {
|
|
|
4415
4424
|
document.removeEventListener('touchmove', this.scrollEvent, true);
|
|
4416
4425
|
}
|
|
4417
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 });
|
|
4418
|
-
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" }] });
|
|
4419
4428
|
}
|
|
4420
4429
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AutocompleteChipsComponent, decorators: [{
|
|
4421
4430
|
type: Component,
|
|
4422
|
-
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"] }]
|
|
4423
4432
|
}], ctorParameters: () => [{ type: i5.NgControl, decorators: [{
|
|
4424
4433
|
type: Optional
|
|
4425
4434
|
}, {
|
|
@@ -4473,14 +4482,14 @@ class BasicTimeSeriesGraphComponent {
|
|
|
4473
4482
|
trigger: 'axis',
|
|
4474
4483
|
formatter: (params) => {
|
|
4475
4484
|
const [timestamp, data] = params[0].data;
|
|
4476
|
-
return `
|
|
4477
|
-
<div class="flex flex-col gap-y-2">
|
|
4478
|
-
<div>${this.timeFormatter.transform(timestamp)}</div>
|
|
4479
|
-
<div class="flex flex-row gap-x-2 items-center">
|
|
4480
|
-
<div class="h-2 w-2 bg-mat-sys-primary rounded-3xl"> </div>
|
|
4481
|
-
<div>${timeSeries.name}:</div>
|
|
4482
|
-
<div><span class="font-bold">${data}</span><span>${timeSeries.unitSymbol ?? ''}</span></div>
|
|
4483
|
-
</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>
|
|
4484
4493
|
</div>`;
|
|
4485
4494
|
},
|
|
4486
4495
|
axisPointer: {
|
|
@@ -4516,11 +4525,11 @@ class BasicTimeSeriesGraphComponent {
|
|
|
4516
4525
|
});
|
|
4517
4526
|
}
|
|
4518
4527
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BasicTimeSeriesGraphComponent, deps: [{ token: SimpleDateTimePipe }], target: i0.ɵɵFactoryTarget.Component });
|
|
4519
|
-
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"] }] });
|
|
4520
4529
|
}
|
|
4521
4530
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BasicTimeSeriesGraphComponent, decorators: [{
|
|
4522
4531
|
type: Component,
|
|
4523
|
-
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" }]
|
|
4524
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 }] }] } });
|
|
4525
4534
|
|
|
4526
4535
|
class CardLabeledValueComponent {
|
|
@@ -4542,11 +4551,11 @@ class CardLabeledValueComponent {
|
|
|
4542
4551
|
}, ...(ngDevMode ? [{ debugName: "permissionFunction" }] : []));
|
|
4543
4552
|
hasPermission = toSignal(toObservable(this.permissionFunction).pipe(switchMap(obs => obs)), { initialValue: false });
|
|
4544
4553
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CardLabeledValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4545
|
-
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" }] });
|
|
4546
4555
|
}
|
|
4547
4556
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CardLabeledValueComponent, decorators: [{
|
|
4548
4557
|
type: Component,
|
|
4549
|
-
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"] }]
|
|
4550
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 }] }] } });
|
|
4551
4560
|
|
|
4552
4561
|
class ConfirmationDialogComponent {
|
|
@@ -4560,11 +4569,11 @@ class ConfirmationDialogComponent {
|
|
|
4560
4569
|
this.dialog.close(true);
|
|
4561
4570
|
}
|
|
4562
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 });
|
|
4563
|
-
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" }] });
|
|
4564
4573
|
}
|
|
4565
4574
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
|
|
4566
4575
|
type: Component,
|
|
4567
|
-
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"] }]
|
|
4568
4577
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
4569
4578
|
type: Inject,
|
|
4570
4579
|
args: [MAT_DIALOG_DATA]
|
|
@@ -4725,7 +4734,7 @@ class DateRangeInputComponent {
|
|
|
4725
4734
|
useExisting: forwardRef(() => DateRangeInputComponent),
|
|
4726
4735
|
multi: true,
|
|
4727
4736
|
}
|
|
4728
|
-
], 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" }] });
|
|
4729
4738
|
}
|
|
4730
4739
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DateRangeInputComponent, decorators: [{
|
|
4731
4740
|
type: Component,
|
|
@@ -4740,7 +4749,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
4740
4749
|
useExisting: forwardRef(() => DateRangeInputComponent),
|
|
4741
4750
|
multi: true,
|
|
4742
4751
|
}
|
|
4743
|
-
], 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"] }]
|
|
4744
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 }] }] } });
|
|
4745
4754
|
|
|
4746
4755
|
class DateTimeFormFieldComponent {
|
|
@@ -4856,7 +4865,7 @@ class DateTimeFormFieldComponent {
|
|
|
4856
4865
|
useExisting: forwardRef(() => DateTimeFormFieldComponent),
|
|
4857
4866
|
multi: true,
|
|
4858
4867
|
}
|
|
4859
|
-
], 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" }] });
|
|
4860
4869
|
}
|
|
4861
4870
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DateTimeFormFieldComponent, decorators: [{
|
|
4862
4871
|
type: Component,
|
|
@@ -4871,7 +4880,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
4871
4880
|
useExisting: forwardRef(() => DateTimeFormFieldComponent),
|
|
4872
4881
|
multi: true,
|
|
4873
4882
|
}
|
|
4874
|
-
], 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" }]
|
|
4875
4884
|
}], ctorParameters: () => [{ type: i1$1.TranslateService }], propDecorators: { dateLabel: [{
|
|
4876
4885
|
type: Input
|
|
4877
4886
|
}], timeLabel: [{
|
|
@@ -5000,11 +5009,11 @@ class DragDropFileUploadComponent {
|
|
|
5000
5009
|
this.destroy$.complete();
|
|
5001
5010
|
}
|
|
5002
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 });
|
|
5003
|
-
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" }] });
|
|
5004
5013
|
}
|
|
5005
5014
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DragDropFileUploadComponent, decorators: [{
|
|
5006
5015
|
type: Component,
|
|
5007
|
-
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"] }]
|
|
5008
5017
|
}], ctorParameters: () => [{ type: i5.NgControl, decorators: [{
|
|
5009
5018
|
type: Optional
|
|
5010
5019
|
}, {
|
|
@@ -5031,11 +5040,11 @@ class ZoomControlsComponent {
|
|
|
5031
5040
|
zoomOut = output();
|
|
5032
5041
|
reset = output();
|
|
5033
5042
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ZoomControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5034
|
-
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" }] });
|
|
5035
5044
|
}
|
|
5036
5045
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ZoomControlsComponent, decorators: [{
|
|
5037
5046
|
type: Component,
|
|
5038
|
-
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"] }]
|
|
5039
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"] }] } });
|
|
5040
5049
|
|
|
5041
5050
|
class GoogleMapComponent {
|
|
@@ -5150,13 +5159,13 @@ class GoogleMapComponent {
|
|
|
5150
5159
|
const isOffset = mapItem.trueLat !== undefined && mapItem.trueLng !== undefined;
|
|
5151
5160
|
const lastReading = isOffset ? mapItem.trueLat + ',' + mapItem.trueLng : mapItem.lat + ',' + mapItem.lng;
|
|
5152
5161
|
const offsetNotification = isOffset ? `<span>${this.translateService.instant('DASHBOARDS.MAP_WIDGET_OFFSET_NOTIFICATION')}</span>` : '';
|
|
5153
|
-
const infoWindowContent = `
|
|
5154
|
-
<div class="text-black flex flex-col gap-y-2 mt-4 !w-fit !h-fit select-none">
|
|
5155
|
-
<span class="font-bold">${mapItem.path}</span>
|
|
5156
|
-
<span>${lastReadingTime ? this.simpleDateTimePipe.transform(lastReadingTime) : ''}</span>
|
|
5157
|
-
<span class="font-bold mt-4">${lastReading}</span>
|
|
5158
|
-
${offsetNotification}
|
|
5159
|
-
</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>
|
|
5160
5169
|
`;
|
|
5161
5170
|
const infoWindow = new google.maps.InfoWindow({
|
|
5162
5171
|
content: infoWindowContent,
|
|
@@ -5164,10 +5173,10 @@ class GoogleMapComponent {
|
|
|
5164
5173
|
pixelOffset: new google.maps.Size(0, -4)
|
|
5165
5174
|
});
|
|
5166
5175
|
const pin = document.createElement('div');
|
|
5167
|
-
pin.innerHTML = `
|
|
5168
|
-
<svg width="48" height="48" viewBox="0 0 24 24" fill="${mapItem.color}">
|
|
5169
|
-
<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>
|
|
5170
|
-
</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>
|
|
5171
5180
|
`;
|
|
5172
5181
|
const marker = new google.maps.marker.AdvancedMarkerElement({
|
|
5173
5182
|
position: { lat: +mapItem.lat, lng: +mapItem.lng },
|
|
@@ -5229,11 +5238,11 @@ class GoogleMapComponent {
|
|
|
5229
5238
|
return result;
|
|
5230
5239
|
}
|
|
5231
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 });
|
|
5232
|
-
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"] }] });
|
|
5233
5242
|
}
|
|
5234
5243
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GoogleMapComponent, decorators: [{
|
|
5235
5244
|
type: Component,
|
|
5236
|
-
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"] }]
|
|
5237
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"] }] } });
|
|
5238
5247
|
|
|
5239
5248
|
class ImagePreviewComponent {
|
|
@@ -5272,11 +5281,11 @@ class ImagePreviewComponent {
|
|
|
5272
5281
|
return image !== null && image.constructor.name === 'SafeHtmlImpl';
|
|
5273
5282
|
}
|
|
5274
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 });
|
|
5275
|
-
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"] }] });
|
|
5276
5285
|
}
|
|
5277
5286
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ImagePreviewComponent, decorators: [{
|
|
5278
5287
|
type: Component,
|
|
5279
|
-
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"] }]
|
|
5280
5289
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
5281
5290
|
type: Inject,
|
|
5282
5291
|
args: [MAT_DIALOG_DATA]
|
|
@@ -5311,21 +5320,21 @@ class ImageDisplayComponent {
|
|
|
5311
5320
|
});
|
|
5312
5321
|
}
|
|
5313
5322
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ImageDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5314
|
-
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: [""] });
|
|
5315
5324
|
}
|
|
5316
5325
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ImageDisplayComponent, decorators: [{
|
|
5317
5326
|
type: Component,
|
|
5318
|
-
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" }]
|
|
5319
5328
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }] } });
|
|
5320
5329
|
|
|
5321
5330
|
class LabeledValueComponent {
|
|
5322
5331
|
name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
|
|
5323
5332
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LabeledValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5324
|
-
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" }] });
|
|
5325
5334
|
}
|
|
5326
5335
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LabeledValueComponent, decorators: [{
|
|
5327
5336
|
type: Component,
|
|
5328
|
-
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" }]
|
|
5329
5338
|
}], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }] } });
|
|
5330
5339
|
|
|
5331
5340
|
class LoadedIconComponent {
|
|
@@ -5359,11 +5368,11 @@ class LoadedIconComponent {
|
|
|
5359
5368
|
this.sanitizer = sanitizer;
|
|
5360
5369
|
}
|
|
5361
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 });
|
|
5362
|
-
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" }] });
|
|
5363
5372
|
}
|
|
5364
5373
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LoadedIconComponent, decorators: [{
|
|
5365
5374
|
type: Component,
|
|
5366
|
-
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" }]
|
|
5367
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 }] }] } });
|
|
5368
5377
|
|
|
5369
5378
|
class IconComponent {
|
|
@@ -5377,13 +5386,13 @@ class IconComponent {
|
|
|
5377
5386
|
return !!icon && typeof icon === 'object' && Object.hasOwn(icon, 'id') ? icon : null;
|
|
5378
5387
|
}
|
|
5379
5388
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5380
|
-
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"] }] });
|
|
5381
5390
|
}
|
|
5382
5391
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: IconComponent, decorators: [{
|
|
5383
5392
|
type: Component,
|
|
5384
5393
|
args: [{ selector: 'app-icon', imports: [
|
|
5385
5394
|
SharedModule, LoadedIconComponent, MatIcon
|
|
5386
|
-
], 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" }]
|
|
5387
5396
|
}], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }] } });
|
|
5388
5397
|
|
|
5389
5398
|
class LocalSortTableComponent {
|
|
@@ -5443,7 +5452,7 @@ class LocalSortTableComponent {
|
|
|
5443
5452
|
}
|
|
5444
5453
|
}
|
|
5445
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 });
|
|
5446
|
-
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" }] });
|
|
5447
5456
|
}
|
|
5448
5457
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LocalSortTableComponent, decorators: [{
|
|
5449
5458
|
type: Component,
|
|
@@ -5453,7 +5462,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
5453
5462
|
CdkVirtualScrollViewport,
|
|
5454
5463
|
SharedModule,
|
|
5455
5464
|
TranslatePipe
|
|
5456
|
-
], 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"] }]
|
|
5457
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"] }] } });
|
|
5458
5467
|
|
|
5459
5468
|
class MasterDetailsViewComponent {
|
|
@@ -5475,11 +5484,11 @@ class MasterDetailsViewComponent {
|
|
|
5475
5484
|
}
|
|
5476
5485
|
}, ...(ngDevMode ? [{ debugName: "width" }] : []));
|
|
5477
5486
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MasterDetailsViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5478
|
-
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"] }] });
|
|
5479
5488
|
}
|
|
5480
5489
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MasterDetailsViewComponent, decorators: [{
|
|
5481
5490
|
type: Component,
|
|
5482
|
-
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"] }]
|
|
5483
5492
|
}], propDecorators: { displayRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayRatio", required: false }] }] } });
|
|
5484
5493
|
|
|
5485
5494
|
class NestedListViewComponent {
|
|
@@ -5818,11 +5827,11 @@ class NestedListViewComponent {
|
|
|
5818
5827
|
this.children.update(items => items.map(item => item.id === guid ? { ...item, rightNumber } : item));
|
|
5819
5828
|
}
|
|
5820
5829
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NestedListViewComponent, deps: [{ token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
5821
|
-
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.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" }] });
|
|
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\">\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.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" }] });
|
|
5822
5831
|
}
|
|
5823
5832
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NestedListViewComponent, decorators: [{
|
|
5824
5833
|
type: Component,
|
|
5825
|
-
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.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"] }]
|
|
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\">\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.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"] }]
|
|
5826
5835
|
}], ctorParameters: () => [{ type: i0.DestroyRef }], propDecorators: { onKeyDown: [{
|
|
5827
5836
|
type: HostListener,
|
|
5828
5837
|
args: ['window:keydown', ['$event']]
|
|
@@ -5937,11 +5946,11 @@ class PdfViewerComponent {
|
|
|
5937
5946
|
this.sanitizer = sanitizer;
|
|
5938
5947
|
}
|
|
5939
5948
|
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 });
|
|
5940
|
-
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()) {\
|
|
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()) {\n <iframe [src]=\"safeSrc()\" frameborder=\"0\" class=\"w-full h-full\"></iframe>\n}", styles: [""] });
|
|
5941
5950
|
}
|
|
5942
5951
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PdfViewerComponent, decorators: [{
|
|
5943
5952
|
type: Component,
|
|
5944
|
-
args: [{ selector: 'app-pdf-viewer', imports: [], template: "@if (safeSrc()) {\
|
|
5953
|
+
args: [{ selector: 'app-pdf-viewer', imports: [], template: "@if (safeSrc()) {\n <iframe [src]=\"safeSrc()\" frameborder=\"0\" class=\"w-full h-full\"></iframe>\n}" }]
|
|
5945
5954
|
}], ctorParameters: () => [{ type: i1$6.DomSanitizer }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }] } });
|
|
5946
5955
|
|
|
5947
5956
|
class StandardListViewComponent {
|
|
@@ -6168,11 +6177,11 @@ class StandardListViewComponent {
|
|
|
6168
6177
|
});
|
|
6169
6178
|
}
|
|
6170
6179
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StandardListViewComponent, deps: [{ token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
6171
|
-
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\" [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" }] });
|
|
6180
|
+
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\" [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" }] });
|
|
6172
6181
|
}
|
|
6173
6182
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StandardListViewComponent, decorators: [{
|
|
6174
6183
|
type: Component,
|
|
6175
|
-
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'}}\">\
|
|
6184
|
+
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\" [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"] }]
|
|
6176
6185
|
}], ctorParameters: () => [{ type: i0.DestroyRef }], propDecorators: { onKeyDown: [{
|
|
6177
6186
|
type: HostListener,
|
|
6178
6187
|
args: ['window:keydown', ['$event']]
|
|
@@ -6286,11 +6295,11 @@ class TabulatedChipViewComponent {
|
|
|
6286
6295
|
}
|
|
6287
6296
|
}
|
|
6288
6297
|
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 });
|
|
6289
|
-
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\">\
|
|
6298
|
+
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" }] });
|
|
6290
6299
|
}
|
|
6291
6300
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TabulatedChipViewComponent, decorators: [{
|
|
6292
6301
|
type: Component,
|
|
6293
|
-
args: [{ selector: 'app-tabulated-chip-view', imports: [SharedModule], template: "<div class=\"flex flex-auto flex-col overflow-hidden tabulated-view-container\">\
|
|
6302
|
+
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"] }]
|
|
6294
6303
|
}], 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 }] }] } });
|
|
6295
6304
|
|
|
6296
6305
|
class TabulatedViewComponent {
|
|
@@ -6317,11 +6326,11 @@ class TabulatedViewComponent {
|
|
|
6317
6326
|
}
|
|
6318
6327
|
}
|
|
6319
6328
|
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 });
|
|
6320
|
-
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\">\
|
|
6329
|
+
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" }] });
|
|
6321
6330
|
}
|
|
6322
6331
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TabulatedViewComponent, decorators: [{
|
|
6323
6332
|
type: Component,
|
|
6324
|
-
args: [{ selector: 'app-tabulated-view', imports: [SharedModule], template: "<div class=\"flex flex-auto flex-col overflow-hidden\">\
|
|
6333
|
+
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"] }]
|
|
6325
6334
|
}], ctorParameters: () => [{ type: i1$2.Router }, { type: i1$2.ActivatedRoute }, { type: NavigationPersistenceService }], propDecorators: { tabs: [{
|
|
6326
6335
|
type: Input,
|
|
6327
6336
|
args: [{ required: true }]
|
|
@@ -6341,11 +6350,11 @@ class TreeNodeComponent {
|
|
|
6341
6350
|
this.nodeSelected.emit(node);
|
|
6342
6351
|
}
|
|
6343
6352
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6344
|
-
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\">\
|
|
6353
|
+
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" }] });
|
|
6345
6354
|
}
|
|
6346
6355
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TreeNodeComponent, decorators: [{
|
|
6347
6356
|
type: Component,
|
|
6348
|
-
args: [{ selector: 'app-tree-node', imports: [SharedModule], template: "<div class=\"w-full flex flex-col\">\
|
|
6357
|
+
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" }]
|
|
6349
6358
|
}], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }], nodeSelected: [{ type: i0.Output, args: ["nodeSelected"] }] } });
|
|
6350
6359
|
|
|
6351
6360
|
class TreeComponent {
|
|
@@ -6395,11 +6404,11 @@ class TreeComponent {
|
|
|
6395
6404
|
this.selectedNode.selected = true;
|
|
6396
6405
|
}
|
|
6397
6406
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6398
|
-
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\">\
|
|
6407
|
+
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"] }] });
|
|
6399
6408
|
}
|
|
6400
6409
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TreeComponent, decorators: [{
|
|
6401
6410
|
type: Component,
|
|
6402
|
-
args: [{ selector: 'app-tree', imports: [TreeNodeComponent], template: "<div class=\"h-full w-full flex flex-col\">\
|
|
6411
|
+
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" }]
|
|
6403
6412
|
}], 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"] }] } });
|
|
6404
6413
|
|
|
6405
6414
|
class ValueDisplayComponent {
|
|
@@ -6416,11 +6425,11 @@ class ValueDisplayComponent {
|
|
|
6416
6425
|
return vector.replaceAll(',', ', ');
|
|
6417
6426
|
}
|
|
6418
6427
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6419
|
-
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) {\
|
|
6428
|
+
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" }] });
|
|
6420
6429
|
}
|
|
6421
6430
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueDisplayComponent, decorators: [{
|
|
6422
6431
|
type: Component,
|
|
6423
|
-
args: [{ selector: 'app-value-display', imports: [SharedModule, DurationPipe, SimpleDateTimePipe, LocalizedNumberPipe], template: "@if (value(); as value) {\
|
|
6432
|
+
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"] }]
|
|
6424
6433
|
}], 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 }] }] } });
|
|
6425
6434
|
|
|
6426
6435
|
class ValueInputBooleanComponent {
|
|
@@ -6488,7 +6497,7 @@ class ValueInputBooleanComponent {
|
|
|
6488
6497
|
useExisting: forwardRef(() => ValueInputBooleanComponent),
|
|
6489
6498
|
multi: true,
|
|
6490
6499
|
}
|
|
6491
|
-
], ngImport: i0, template: "<mat-slide-toggle [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\
|
|
6500
|
+
], 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" }] });
|
|
6492
6501
|
}
|
|
6493
6502
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputBooleanComponent, decorators: [{
|
|
6494
6503
|
type: Component,
|
|
@@ -6503,7 +6512,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
6503
6512
|
useExisting: forwardRef(() => ValueInputBooleanComponent),
|
|
6504
6513
|
multi: true,
|
|
6505
6514
|
}
|
|
6506
|
-
], template: "<mat-slide-toggle [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\
|
|
6515
|
+
], 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" }]
|
|
6507
6516
|
}], 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 }] }] } });
|
|
6508
6517
|
|
|
6509
6518
|
class ValueInputColorComponent {
|
|
@@ -6596,7 +6605,7 @@ class ValueInputColorComponent {
|
|
|
6596
6605
|
useExisting: forwardRef(() => ValueInputColorComponent),
|
|
6597
6606
|
multi: true,
|
|
6598
6607
|
}
|
|
6599
|
-
], 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()\">\
|
|
6608
|
+
], 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" }] });
|
|
6600
6609
|
}
|
|
6601
6610
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputColorComponent, decorators: [{
|
|
6602
6611
|
type: Component,
|
|
@@ -6611,7 +6620,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
6611
6620
|
useExisting: forwardRef(() => ValueInputColorComponent),
|
|
6612
6621
|
multi: true,
|
|
6613
6622
|
}
|
|
6614
|
-
], template: "<mat-form-field class=\"w-full relative\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\
|
|
6623
|
+
], 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"] }]
|
|
6615
6624
|
}], 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 }] }] } });
|
|
6616
6625
|
|
|
6617
6626
|
class ValueInputDateComponent {
|
|
@@ -6679,7 +6688,7 @@ class ValueInputDateComponent {
|
|
|
6679
6688
|
useExisting: forwardRef(() => ValueInputDateComponent),
|
|
6680
6689
|
multi: true,
|
|
6681
6690
|
}
|
|
6682
|
-
], ngImport: i0, template: "<app-date-time-form-field [formControl]=\"formControl\" [validators]=\"validators()\" [showErrorInTooltip]=\"showErrorInTooltip()\" class=\"w-full\"></app-date-time-form-field>\
|
|
6691
|
+
], 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"] }] });
|
|
6683
6692
|
}
|
|
6684
6693
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputDateComponent, decorators: [{
|
|
6685
6694
|
type: Component,
|
|
@@ -6694,7 +6703,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
6694
6703
|
useExisting: forwardRef(() => ValueInputDateComponent),
|
|
6695
6704
|
multi: true,
|
|
6696
6705
|
}
|
|
6697
|
-
], template: "<app-date-time-form-field [formControl]=\"formControl\" [validators]=\"validators()\" [showErrorInTooltip]=\"showErrorInTooltip()\" class=\"w-full\"></app-date-time-form-field>\
|
|
6706
|
+
], template: "<app-date-time-form-field [formControl]=\"formControl\" [validators]=\"validators()\" [showErrorInTooltip]=\"showErrorInTooltip()\" class=\"w-full\"></app-date-time-form-field>\n" }]
|
|
6698
6707
|
}], ctorParameters: () => [], propDecorators: { validators: [{ type: i0.Input, args: [{ isSignal: true, alias: "validators", required: false }] }], showErrorInTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrorInTooltip", required: false }] }] } });
|
|
6699
6708
|
|
|
6700
6709
|
class ValueInputEnumComponent {
|
|
@@ -6769,7 +6778,7 @@ class ValueInputEnumComponent {
|
|
|
6769
6778
|
useExisting: forwardRef(() => ValueInputEnumComponent),
|
|
6770
6779
|
multi: true,
|
|
6771
6780
|
}
|
|
6772
|
-
], ngImport: i0, template: "<div class=\"w-full flex flex-col gap-y-2\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\
|
|
6781
|
+
], 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" }] });
|
|
6773
6782
|
}
|
|
6774
6783
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputEnumComponent, decorators: [{
|
|
6775
6784
|
type: Component,
|
|
@@ -6784,7 +6793,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
6784
6793
|
useExisting: forwardRef(() => ValueInputEnumComponent),
|
|
6785
6794
|
multi: true,
|
|
6786
6795
|
}
|
|
6787
|
-
], template: "<div class=\"w-full flex flex-col gap-y-2\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\
|
|
6796
|
+
], 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" }]
|
|
6788
6797
|
}], 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 }] }] } });
|
|
6789
6798
|
|
|
6790
6799
|
class ValueInputHexadecimalComponent {
|
|
@@ -6862,7 +6871,7 @@ class ValueInputHexadecimalComponent {
|
|
|
6862
6871
|
useExisting: forwardRef(() => ValueInputHexadecimalComponent),
|
|
6863
6872
|
multi: true,
|
|
6864
6873
|
}
|
|
6865
|
-
], ngImport: i0, template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\
|
|
6874
|
+
], 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" }] });
|
|
6866
6875
|
}
|
|
6867
6876
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputHexadecimalComponent, decorators: [{
|
|
6868
6877
|
type: Component,
|
|
@@ -6877,7 +6886,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
6877
6886
|
useExisting: forwardRef(() => ValueInputHexadecimalComponent),
|
|
6878
6887
|
multi: true,
|
|
6879
6888
|
}
|
|
6880
|
-
], template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\
|
|
6889
|
+
], 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" }]
|
|
6881
6890
|
}], 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 }] }] } });
|
|
6882
6891
|
|
|
6883
6892
|
class ValueInputLinkComponent {
|
|
@@ -6956,7 +6965,7 @@ class ValueInputLinkComponent {
|
|
|
6956
6965
|
useExisting: forwardRef(() => ValueInputLinkComponent),
|
|
6957
6966
|
multi: true,
|
|
6958
6967
|
}
|
|
6959
|
-
], ngImport: i0, template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\
|
|
6968
|
+
], 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" }] });
|
|
6960
6969
|
}
|
|
6961
6970
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputLinkComponent, decorators: [{
|
|
6962
6971
|
type: Component,
|
|
@@ -6971,7 +6980,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
6971
6980
|
useExisting: forwardRef(() => ValueInputLinkComponent),
|
|
6972
6981
|
multi: true,
|
|
6973
6982
|
}
|
|
6974
|
-
], template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\
|
|
6983
|
+
], 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" }]
|
|
6975
6984
|
}], 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 }] }] } });
|
|
6976
6985
|
|
|
6977
6986
|
class ValueInputLocationComponent {
|
|
@@ -7066,7 +7075,7 @@ class ValueInputLocationComponent {
|
|
|
7066
7075
|
useExisting: forwardRef(() => ValueInputLocationComponent),
|
|
7067
7076
|
multi: true,
|
|
7068
7077
|
}
|
|
7069
|
-
], ngImport: i0, template: "<form [formGroup]=\"formGroup\">\
|
|
7078
|
+
], 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" }] });
|
|
7070
7079
|
}
|
|
7071
7080
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputLocationComponent, decorators: [{
|
|
7072
7081
|
type: Component,
|
|
@@ -7081,7 +7090,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
7081
7090
|
useExisting: forwardRef(() => ValueInputLocationComponent),
|
|
7082
7091
|
multi: true,
|
|
7083
7092
|
}
|
|
7084
|
-
], template: "<form [formGroup]=\"formGroup\">\
|
|
7093
|
+
], 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" }]
|
|
7085
7094
|
}], 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 }] }] } });
|
|
7086
7095
|
|
|
7087
7096
|
class ValueInputNumericComponent {
|
|
@@ -7163,7 +7172,7 @@ class ValueInputNumericComponent {
|
|
|
7163
7172
|
useExisting: forwardRef(() => ValueInputNumericComponent),
|
|
7164
7173
|
multi: true,
|
|
7165
7174
|
}
|
|
7166
|
-
], ngImport: i0, template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\
|
|
7175
|
+
], 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" }] });
|
|
7167
7176
|
}
|
|
7168
7177
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputNumericComponent, decorators: [{
|
|
7169
7178
|
type: Component,
|
|
@@ -7178,7 +7187,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
7178
7187
|
useExisting: forwardRef(() => ValueInputNumericComponent),
|
|
7179
7188
|
multi: true,
|
|
7180
7189
|
}
|
|
7181
|
-
], template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\
|
|
7190
|
+
], 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" }]
|
|
7182
7191
|
}], 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 }] }] } });
|
|
7183
7192
|
|
|
7184
7193
|
class ValueInputStringComponent {
|
|
@@ -7252,7 +7261,7 @@ class ValueInputStringComponent {
|
|
|
7252
7261
|
useExisting: forwardRef(() => ValueInputStringComponent),
|
|
7253
7262
|
multi: true,
|
|
7254
7263
|
}
|
|
7255
|
-
], ngImport: i0, template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\
|
|
7264
|
+
], 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" }] });
|
|
7256
7265
|
}
|
|
7257
7266
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputStringComponent, decorators: [{
|
|
7258
7267
|
type: Component,
|
|
@@ -7267,7 +7276,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
7267
7276
|
useExisting: forwardRef(() => ValueInputStringComponent),
|
|
7268
7277
|
multi: true,
|
|
7269
7278
|
}
|
|
7270
|
-
], template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\
|
|
7279
|
+
], 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" }]
|
|
7271
7280
|
}], 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 }] }] } });
|
|
7272
7281
|
|
|
7273
7282
|
class ValueInputVectorComponent {
|
|
@@ -7361,7 +7370,7 @@ class ValueInputVectorComponent {
|
|
|
7361
7370
|
useExisting: forwardRef(() => ValueInputVectorComponent),
|
|
7362
7371
|
multi: true,
|
|
7363
7372
|
}
|
|
7364
|
-
], ngImport: i0, template: "<div class=\"w-full flex flex-col gap-y-2\">\
|
|
7373
|
+
], 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" }] });
|
|
7365
7374
|
}
|
|
7366
7375
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputVectorComponent, decorators: [{
|
|
7367
7376
|
type: Component,
|
|
@@ -7376,7 +7385,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
7376
7385
|
useExisting: forwardRef(() => ValueInputVectorComponent),
|
|
7377
7386
|
multi: true,
|
|
7378
7387
|
}
|
|
7379
|
-
], template: "<div class=\"w-full flex flex-col gap-y-2\">\
|
|
7388
|
+
], 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" }]
|
|
7380
7389
|
}], 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 }] }] } });
|
|
7381
7390
|
|
|
7382
7391
|
class ValueInputDurationComponent {
|
|
@@ -7477,7 +7486,7 @@ class ValueInputDurationComponent {
|
|
|
7477
7486
|
useExisting: forwardRef(() => ValueInputDurationComponent),
|
|
7478
7487
|
multi: true,
|
|
7479
7488
|
}
|
|
7480
|
-
], ngImport: i0, template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\
|
|
7489
|
+
], 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" }] });
|
|
7481
7490
|
}
|
|
7482
7491
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputDurationComponent, decorators: [{
|
|
7483
7492
|
type: Component,
|
|
@@ -7492,7 +7501,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
7492
7501
|
useExisting: forwardRef(() => ValueInputDurationComponent),
|
|
7493
7502
|
multi: true,
|
|
7494
7503
|
}
|
|
7495
|
-
], template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\
|
|
7504
|
+
], 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" }]
|
|
7496
7505
|
}], 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 }] }] } });
|
|
7497
7506
|
|
|
7498
7507
|
class ValueInputComponent {
|
|
@@ -7573,7 +7582,7 @@ class ValueInputComponent {
|
|
|
7573
7582
|
useExisting: forwardRef(() => ValueInputComponent),
|
|
7574
7583
|
multi: true,
|
|
7575
7584
|
}
|
|
7576
|
-
], ngImport: i0, template: "@switch (dataType()) {\
|
|
7585
|
+
], 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"] }] });
|
|
7577
7586
|
}
|
|
7578
7587
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputComponent, decorators: [{
|
|
7579
7588
|
type: Component,
|
|
@@ -7588,7 +7597,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
7588
7597
|
useExisting: forwardRef(() => ValueInputComponent),
|
|
7589
7598
|
multi: true,
|
|
7590
7599
|
}
|
|
7591
|
-
], template: "@switch (dataType()) {\
|
|
7600
|
+
], 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" }]
|
|
7592
7601
|
}], 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 }] }] } });
|
|
7593
7602
|
|
|
7594
7603
|
class DoubleDrawerLayoutComponent {
|
|
@@ -7681,13 +7690,13 @@ class DoubleDrawerLayoutComponent {
|
|
|
7681
7690
|
}
|
|
7682
7691
|
}
|
|
7683
7692
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DoubleDrawerLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7684
|
-
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\">\
|
|
7693
|
+
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" }] });
|
|
7685
7694
|
}
|
|
7686
7695
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DoubleDrawerLayoutComponent, decorators: [{
|
|
7687
7696
|
type: Component,
|
|
7688
7697
|
args: [{ selector: 'app-double-drawer-layout', imports: [
|
|
7689
7698
|
SharedModule
|
|
7690
|
-
], template: "<div class=\"w-full h-full relative\">\
|
|
7699
|
+
], 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"] }]
|
|
7691
7700
|
}], ctorParameters: () => [], propDecorators: { onMouseMove: [{
|
|
7692
7701
|
type: HostListener,
|
|
7693
7702
|
args: ['window:mousemove']
|
|
@@ -7702,5 +7711,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
7702
7711
|
* Generated bundle index. Do not edit.
|
|
7703
7712
|
*/
|
|
7704
7713
|
|
|
7705
|
-
export { AUTHENTICATION_CLIENT, AssetManager, AuthenticationService, AutocompleteChipsComponent, AutocompleteComponent, BasicTimeSeriesGraphComponent, COLORS, CUSTOM_PERIOD, CardLabeledValueComponent, ConfirmationDialogComponent, DEFAULT_LOCALE, DEFAULT_TIMEZONES, DEFAULT_TIME_ZONE, DataType, DateRangeInputComponent, DateTimeFormFieldComponent, DoubleDrawerLayoutComponent, DragDropFileUploadComponent, DurationPipe, FeatureRegistry, FullscreenService, GoogleMapComponent, IconComponent, IconRegistryService, ImageDisplayComponent, ImagePreviewComponent, LAST_ACTIVE_TAB_KEY, LOCALES, LabeledValueComponent, LoadedIconComponent, LoadingIndicatorDirective, LocalSortTableComponent, Locale, LocalizedNumberPipe, LocalizedNumericInputDirective, MILLISECONDS_IN_DAY, MapsLoaderService, MasterDetailsViewComponent, MessageTooltipDirective, MissingTranslationHelper, NavigationPersistenceService, NestedListDataControl, NestedListDataSource, NestedListViewComponent, NotificationService, OverflowClassDirective, PdfViewerComponent, PeriodErrorStateMatcher, PermissionsService, RELATIVE_TIME_PERIODS, RelativeTimePeriod, RequiresAllGlobalOrAssetPermissionsDirective, RequiresAllPermissionDirective, RequiresGlobalOrAsserPermissionDirective, RequiresPermissionDirective, ScrollIntoViewDirective, SharedModule, SimpleDatePipe, SimpleDateTimePipe, SimpleTimePipe, SortPipe, StandardListDataControl, StandardListDataSource, StandardListViewComponent, TIMEZONES, TabulatedChipViewComponent, TabulatedViewComponent, TenantPropertiesService, ThemeService, TreeComponent, TreeNodeComponent, USERS_TIME_ZONE, ValueDisplayComponent, ValueInputBooleanComponent, ValueInputColorComponent, ValueInputComponent, ValueInputDateComponent, ValueInputDurationComponent, ValueInputEnumComponent, ValueInputHexadecimalComponent, ValueInputLinkComponent, ValueInputLocationComponent, ValueInputNumericComponent, ValueInputStringComponent, ValueInputVectorComponent, ZoomControlsComponent, arrayToObject, chartThemeDark, chartThemeLight, daysAway, determineMagnitude, determineMinMaxValues, endOfPeriod, equalsByValue, externalUrlFormatValidator, fileOrExternalUrlRequired, fileSizeValidator, flatMap, flatten, format, formatDuration, generateRandomString, globalPermissionGuard, groupBy, hoursAway, isContextAccessible, lookUpPathPart, lookUpQueryParam, parseDateRangeInputPeriod, parseTimeInput, saveFile, scale, startOfMonth, startOfPeriod, startOfTheDay, startOfWeek, startOfYear, tenantHostUrlValidator, toDate, toEndOfMonth, toEndOfYear, toJsDate, toOffset, toStartOfMonth, toStartOfTheDay, toStartOfWeek, toStartOfYear, toTime, uniqueBy, uniqueFrom, validateAssetName, validateTypeAssetName };
|
|
7714
|
+
export { AUTHENTICATION_CLIENT, AssetManager, AuthenticationService, AutocompleteChipsComponent, AutocompleteComponent, BasicTimeSeriesGraphComponent, COLORS, CUSTOM_PERIOD, CardLabeledValueComponent, ConfirmationDialogComponent, DEFAULT_LOCALE, DEFAULT_TIMEZONES, DEFAULT_TIME_ZONE, DataType, DateRangeInputComponent, DateTimeFormFieldComponent, DoubleDrawerLayoutComponent, DragDropFileUploadComponent, DurationPipe, FeatureRegistry, FullscreenService, GoogleMapComponent, IconComponent, IconRegistryService, ImageDisplayComponent, ImagePreviewComponent, LAST_ACTIVE_TAB_KEY, LOCALES, LabeledValueComponent, LoadedIconComponent, LoadingIndicatorDirective, LocalSortTableComponent, Locale, LocalizedNumberPipe, LocalizedNumericInputDirective, MILLISECONDS_IN_DAY, MapsLoaderService, MasterDetailsViewComponent, MessageTooltipDirective, MissingTranslationHelper, NavigationPersistenceService, NestedListDataControl, NestedListDataSource, NestedListViewComponent, NotificationService, OverflowClassDirective, PdfViewerComponent, PeriodErrorStateMatcher, PermissionsService, RELATIVE_TIME_PERIODS, RelativeTimePeriod, RequiresAllGlobalOrAssetPermissionsDirective, RequiresAllPermissionDirective, RequiresGlobalOrAsserPermissionDirective, RequiresPermissionDirective, ScrollIntoViewDirective, SharedModule, SimpleDatePipe, SimpleDateTimePipe, SimpleTimePipe, SortPipe, StandardListDataControl, StandardListDataSource, StandardListViewComponent, TIMEZONES, TabulatedChipViewComponent, TabulatedViewComponent, TenantPropertiesService, ThemeService, TreeComponent, TreeNodeComponent, USERS_TIME_ZONE, ValueDisplayComponent, ValueInputBooleanComponent, ValueInputColorComponent, ValueInputComponent, ValueInputDateComponent, ValueInputDurationComponent, ValueInputEnumComponent, ValueInputHexadecimalComponent, ValueInputLinkComponent, ValueInputLocationComponent, ValueInputNumericComponent, ValueInputStringComponent, ValueInputVectorComponent, ZoomControlsComponent, arrayToObject, chartThemeDark, chartThemeLight, daysAway, determineMagnitude, determineMinMaxValues, endOfPeriod, equalsByValue, externalUrlFormatValidator, fileOrExternalUrlRequired, fileSizeValidator, flatMap, flatten, format, formatDuration, generateRandomString, getDecimalPlaces, globalPermissionGuard, groupBy, hoursAway, isContextAccessible, lookUpPathPart, lookUpQueryParam, parseDateRangeInputPeriod, parseTimeInput, saveFile, scale, startOfMonth, startOfPeriod, startOfTheDay, startOfWeek, startOfYear, tenantHostUrlValidator, toDate, toEndOfMonth, toEndOfYear, toJsDate, toOffset, toStartOfMonth, toStartOfTheDay, toStartOfWeek, toStartOfYear, toTime, uniqueBy, uniqueFrom, validateAssetName, validateTypeAssetName };
|
|
7706
7715
|
//# sourceMappingURL=wolkabout-commons.mjs.map
|