@sumaris-net/ngx-components 18.18.3 → 18.18.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -36600,11 +36600,11 @@ class AppPropertiesForm extends AppForm {
|
|
|
36600
36600
|
return isNil(obj?.key) || isNil(obj.value);
|
|
36601
36601
|
}
|
|
36602
36602
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppPropertiesForm, deps: [{ token: i0.Injector }, { token: i1$3.UntypedFormBuilder }, { token: i2.DateAdapter }, { token: i0.ChangeDetectorRef }, { token: PropertyValidator }, { token: i1$3.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
36603
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AppPropertiesForm, selector: "app-properties-form", inputs: { showToolbar: ["showToolbar", "showToolbar", booleanAttribute], formArrayName: "formArrayName", formArray: "formArray", options: "options", chipColor: "chipColor", mobile: ["mobile", "mobile", booleanAttribute], appearance: "appearance", subscriptSizing: "subscriptSizing", showHintKey: ["showHintKey", "showHintKey", booleanAttribute], hintKeyPrefix: "hintKeyPrefix", showMoreButton: ["showMoreButton", "showMoreButton", booleanAttribute], addButtonText: "addButtonText", addButtonTitle: "addButtonTitle", showAddButton: ["showAddButton", "showAddButton", booleanAttribute], panelClass: "panelClass", panelWidth: "panelWidth", canDownload: ["canDownload", "canDownload", booleanAttribute], canImport: ["canImport", "canImport", booleanAttribute], showMoreButtonTitle: "showMoreButtonTitle", definitions: "definitions", importPolicy: "importPolicy" }, providers: [{ provide: PropertyValidator, useClass: PropertyValidator }, RxState], usesInheritance: true, ngImport: i0, template: "@if (showToolbar) {\n <mat-toolbar>\n <div class=\"toolbar-spacer\"></div>\n\n <ion-item lines=\"none\" (click)=\"toggleShowHintKeys()\">\n <ion-label color=\"dark\">{{ 'FILE.PROPERTIES.BTN_SHOW_HINT_KEY' | translate }}</ion-label>\n <ion-toggle color=\"primary\" [checked]=\"showHintKey\"></ion-toggle>\n </ion-item>\n\n <!-- options sub menu -->\n @if (canDownload || canImport) {\n <button slot=\"end\" mat-icon-button [matMenuTriggerFor]=\"optionsMenu\" [title]=\"'COMMON.BTN_OPTIONS' | translate\">\n <mat-icon>more_vert</mat-icon>\n </button>\n }\n\n </mat-toolbar>\n}\n\n<!-- Options menu -->\n<mat-menu #optionsMenu=\"matMenu\">\n <ng-template matMenuContent>\n <!-- Download as CSV -->\n @if (canDownload) {\n <button mat-menu-item [disabled]=\"loading\" [matMenuTriggerFor]=\"downloadMenu\">\n <mat-icon>download</mat-icon>\n <ion-label translate>COMMON.BTN_DOWNLOAD_DOTS</ion-label>\n </button>\n }\n\n <!-- Import from file -->\n @if (canImport) {\n <button mat-menu-item [disabled]=\"loading || disabled\" [matMenuTriggerFor]=\"importMenu\">\n <mat-icon>upload</mat-icon>\n <ion-label translate>COMMON.BTN_IMPORT_FROM_FILE_DOTS</ion-label>\n </button>\n }\n </ng-template>\n</mat-menu>\n\n<!-- Download menu -->\n<mat-menu #downloadMenu=\"matMenu\">\n <button mat-menu-item [disabled]=\"loading\" (click)=\"exportToCsv()\">\n <ion-label translate>FILE.PROPERTIES.BTN_DOWNLOAD_AS_CSV</ion-label>\n </button>\n</mat-menu>\n\n<!-- Import menu -->\n<mat-menu #importMenu=\"matMenu\">\n <!-- import from file -->\n <button mat-menu-item (click)=\"importFromCsv($event)\">\n <ion-label translate>FILE.PROPERTIES.BTN_IMPORT_FROM_CSV</ion-label>\n </button>\n\n <!-- import policy -->\n <mat-divider></mat-divider>\n <button mat-menu-item [matMenuTriggerFor]=\"importPolicyMenu\">\n <ion-label translate>FILE.UPLOAD.BTN_IMPORT_POLICY_DOTS</ion-label>\n </button>\n</mat-menu>\n\n<!-- Import policy menu -->\n<mat-menu #importPolicyMenu=\"matMenu\" class=\"ion-no-padding\">\n <ng-template matMenuContent>\n <!-- header-->\n <ion-row class=\"mat-menu-header ion-no-padding column\">\n <ion-col>\n <ion-label translate>FILE.UPLOAD.IMPORT_POLICY.TITLE</ion-label>\n </ion-col>\n </ion-row>\n @for (policy of _importPolicies; track policy) {\n <button mat-menu-item (click)=\"importPolicy = policy\">\n <mat-icon>{{ importPolicy === policy ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>\n <ion-label>{{ 'FILE.UPLOAD.IMPORT_POLICY.' + policy | uppercase | translate }}</ion-label>\n </button>\n }\n </ng-template>\n</mat-menu>\n\n<!-- Properties -->\n<form [formGroup]=\"form\" class=\"form-container\">\n @if (loadingSubject | async) {\n <ion-list [inset]=\"mobile\">\n <ng-container *ngTemplateOutlet=\"propertyRowSkeleton\"></ng-container>\n <ng-container *ngTemplateOutlet=\"propertyRowSkeleton\"></ng-container>\n <ng-container *ngTemplateOutlet=\"propertyRowSkeleton\"></ng-container>\n </ion-list>\n } @else {\n <ion-list formArrayName=\"properties\" [inset]=\"mobile\">\n <!-- Show more options -->\n @if ((_definitionKeys$ | async | isNotEmptyArray) && formArray?.length === 0) {\n <ion-item lines=\"none\">\n <ion-button color=\"light\" [title]=\"addButtonTitle | translate\" (click)=\"_helper.add()\">\n <ion-label>{{ addButtonText | translate }}</ion-label>\n <mat-icon slot=\"end\">arrow_drop_down</mat-icon>\n </ion-button>\n </ion-item>\n }\n\n @for (fieldForm of fieldForms; track i; let i = $index) {\n <ion-item lines=\"none\" [class.outline]=\"appearance === 'outline'\">\n <ion-grid class=\"ion-no-padding\">\n <ion-row [formGroupName]=\"i\" class=\"ion-no-padding\">\n @let definition = getDefinitionAt(i);\n\n <!-- property key -->\n @if (fieldForm | formGetControl: 'key'; as control) {\n <ion-col\n size=\"12\"\n size-sm=\"6\"\n [title]=\"(definition | propertyGet: 'label' | translate) || ''\"\n class=\"ion-no-padding\"\n >\n <mat-autocomplete-field\n floatLabel=\"auto\"\n [formControl]=\"control\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"showHintKey ? 'fixed' : subscriptSizing\"\n (selectionChange)=\"updateDefinitionAt(i)\"\n [tabindex]=\"tabindex + i * 2\"\n [config]=\"_autocompleteConfig\"\n [placeholder]=\"'SETTINGS.PROPERTY_KEY' | translate\"\n [required]=\"true\"\n (focus)=\"_focusedControlIndex = i\"\n [readonly]=\"definition?.disabled\"\n [mobile]=\"mobile\"\n [panelClass]=\"panelClass\"\n [panelWidth]=\"panelWidth\"\n >\n <mat-hint [class.cdk-visually-hidden]=\"!showHintKey\">\n @let keyValue = control.value;\n {{ hintKeyPrefix || '' }}{{ keyValue?.key || keyValue || '' }}\n </mat-hint>\n </mat-autocomplete-field>\n </ion-col>\n }\n\n <!-- property value -->\n <ion-col size=\"\" size-sm=\"\" class=\"ion-no-padding ion-padding-start-xs\">\n @if (definition) {\n <app-form-field\n floatLabel=\"auto\"\n [label]=\"mobile ? ('SETTINGS.PROPERTY_VALUE' | translate) : ' '\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"subscriptSizing\"\n [definition]=\"definition\"\n [formControl]=\"fieldForm | formGetControl: 'value'\"\n [placeholder]=\"'SETTINGS.PROPERTY_VALUE' | translate\"\n [chipColor]=\"chipColor\"\n [required]=\"true\"\n [hideRequiredMarker]=\"true\"\n [tabindex]=\"tabindex + i * 2 + 1\"\n [readonly]=\"definition?.disabled\"\n [panelClass]=\"panelClass\"\n [panelWidth]=\"panelWidth\"\n ></app-form-field>\n } @else {\n <!-- unknown definition -->\n <mat-form-field [appearance]=\"appearance\" [subscriptSizing]=\"subscriptSizing\">\n @if (mobile) {\n <mat-label>{{ 'SETTINGS.PROPERTY_VALUE' | translate }}</mat-label>\n }\n <input\n type=\"text\"\n matInput\n [formControl]=\"fieldForm | formGetControl: 'value'\"\n [placeholder]=\"mobile ? '' : ('SETTINGS.PROPERTY_VALUE' | translate)\"\n [required]=\"true\"\n [tabindex]=\"20 + i * 2 + 1\"\n />\n </mat-form-field>\n }\n </ion-col>\n\n <ion-col size=\"auto\" class=\"ion-no-padding\">\n @if (_helper.isLast(i)) {\n <button\n type=\"button\"\n mat-icon-button\n color=\"light\"\n [disabled]=\"\n disabled || (fieldForm.value | asBoolean: isEmptyProperty) || (_definitionKeys | isEmptyArray)\n \"\n [title]=\"'SETTINGS.BTN_ADD_PROPERTY' | translate\"\n (click)=\"_helper.add()\"\n [tabindex]=\"20 + i * 2 + 2\"\n >\n <mat-icon>add</mat-icon>\n </button>\n }\n <button\n type=\"button\"\n mat-icon-button\n color=\"light\"\n [disabled]=\"definition?.disabled || disabled\"\n [title]=\"'COMMON.BTN_DELETE' | translate\"\n (click)=\"removeAt(i)\"\n [tabindex]=\"-1\"\n >\n <mat-icon>close</mat-icon>\n </button>\n </ion-col>\n </ion-row>\n </ion-grid>\n </ion-item>\n }\n </ion-list>\n }\n</form>\n\n<ng-template #propertyRowSkeleton>\n <ion-item lines=\"none\">\n <ion-grid class=\"ion-no-padding\">\n <ion-row class=\"ion-no-padding\">\n <!-- property key -->\n <ion-col size=\"6\" class=\"ion-no-padding\">\n <mat-form-field [subscriptSizing]=\"subscriptSizing\">\n <input matInput hidden disabled />\n <ion-skeleton-text [animated]=\"true\" style=\"width: 60%\"></ion-skeleton-text>\n <ion-icon name=\"arrow-dropdown\" matSuffix></ion-icon>\n </mat-form-field>\n </ion-col>\n <!-- value -->\n <ion-col class=\"ion-no-padding\">\n <mat-form-field [subscriptSizing]=\"subscriptSizing\">\n <input matInput hidden disabled />\n <ion-skeleton-text [animated]=\"true\" style=\"width: 60%\"></ion-skeleton-text>\n </mat-form-field>\n </ion-col>\n <!-- buttons -->\n <ion-col size=\"auto\">\n <button type=\"button\" mat-icon-button color=\"light\" disabled>\n <mat-icon>close</mat-icon>\n </button>\n </ion-col>\n </ion-row>\n </ion-grid>\n </ion-item>\n</ng-template>\n", styles: [":host ion-item ion-row ion-col{--ion-padding-start: 0;min-width:48px}:host ion-item.outline{overflow:visible}:host ion-item.outline ion-grid,:host ion-item.outline ion-row,:host ion-item.outline ion-col{overflow:visible}\n"], dependencies: [{ kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$1.IonToggle, selector: "ion-toggle", inputs: ["alignment", "checked", "color", "disabled", "enableOnOffLabels", "justify", "labelPlacement", "legacy", "mode", "name", "value"] }, { kind: "directive", type: i2$1.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.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: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i12.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i12.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i12.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i12.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i9.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "label", "appearance", "subscriptSizing", "placeholder", "suggestFn", "required", "hideRequiredMarker", "mobile", "clearable", "debounceTime", "displaySeparator", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "reloadItemsOnFocus", "clearInvalidValueOnBlur", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "trimSearchText", "splitSearchText", "selectInputContentOnFocus", "selectInputContentOnFocusDelay", "previewImplicitValue", "showFavorites", "toggleFavoriteTitle", "favoriteItems", "colSizes", "class", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keydown.backspace", "keyup.enter", "selectionChange", "openedChange", "toggleFavorite"] }, { kind: "component", type: AppFormField, selector: "app-form-field", inputs: ["definition", "readonly", "disabled", "formControl", "formControlName", "placeholder", "compact", "required", "hideRequiredMarker", "floatLabel", "label", "appearance", "subscriptSizing", "tabindex", "autofocus", "clearable", "chipColor", "class", "debug", "panelClass", "panelWidth"], outputs: ["keyup.enter"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: NotEmptyArrayPipe, name: "isNotEmptyArray" }, { kind: "pipe", type: EmptyArrayPipe, name: "isEmptyArray" }, { kind: "pipe", type: FormGetControlPipe, name: "formGetControl" }, { kind: "pipe", type: AsBooleanPipe, name: "asBoolean" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
36603
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AppPropertiesForm, selector: "app-properties-form", inputs: { showToolbar: ["showToolbar", "showToolbar", booleanAttribute], formArrayName: "formArrayName", formArray: "formArray", options: "options", chipColor: "chipColor", mobile: ["mobile", "mobile", booleanAttribute], appearance: "appearance", subscriptSizing: "subscriptSizing", showHintKey: ["showHintKey", "showHintKey", booleanAttribute], hintKeyPrefix: "hintKeyPrefix", showMoreButton: ["showMoreButton", "showMoreButton", booleanAttribute], addButtonText: "addButtonText", addButtonTitle: "addButtonTitle", showAddButton: ["showAddButton", "showAddButton", booleanAttribute], panelClass: "panelClass", panelWidth: "panelWidth", canDownload: ["canDownload", "canDownload", booleanAttribute], canImport: ["canImport", "canImport", booleanAttribute], showMoreButtonTitle: "showMoreButtonTitle", definitions: "definitions", importPolicy: "importPolicy" }, providers: [{ provide: PropertyValidator, useClass: PropertyValidator }, RxState], usesInheritance: true, ngImport: i0, template: "@if (showToolbar) {\n <mat-toolbar>\n <div class=\"toolbar-spacer\"></div>\n\n <ion-item lines=\"none\" (click)=\"toggleShowHintKeys()\">\n <ion-label color=\"dark\">{{ 'FILE.PROPERTIES.BTN_SHOW_HINT_KEY' | translate }}</ion-label>\n <ion-toggle color=\"primary\" [checked]=\"showHintKey\"></ion-toggle>\n </ion-item>\n\n <!-- options sub menu -->\n @if (canDownload || canImport) {\n <button slot=\"end\" mat-icon-button [matMenuTriggerFor]=\"optionsMenu\" [title]=\"'COMMON.BTN_OPTIONS' | translate\">\n <mat-icon>more_vert</mat-icon>\n </button>\n }\n\n </mat-toolbar>\n}\n\n<!-- Options menu -->\n<mat-menu #optionsMenu=\"matMenu\">\n <!-- Download as CSV -->\n @if (canDownload) {\n <button mat-menu-item [disabled]=\"loading\" [matMenuTriggerFor]=\"downloadMenu\">\n <mat-icon>download</mat-icon>\n <ion-label translate>COMMON.BTN_DOWNLOAD_DOTS</ion-label>\n </button>\n }\n\n <!-- Import from file -->\n @if (canImport) {\n <button mat-menu-item [disabled]=\"loading || disabled\" [matMenuTriggerFor]=\"importMenu\">\n <mat-icon>upload</mat-icon>\n <ion-label translate>COMMON.BTN_IMPORT_FROM_FILE_DOTS</ion-label>\n </button>\n }\n</mat-menu>\n\n<!-- Download menu -->\n<mat-menu #downloadMenu=\"matMenu\">\n <button mat-menu-item [disabled]=\"loading\" (click)=\"exportToCsv()\">\n <ion-label translate>FILE.PROPERTIES.BTN_DOWNLOAD_AS_CSV</ion-label>\n </button>\n</mat-menu>\n\n<!-- Import menu -->\n<mat-menu #importMenu=\"matMenu\">\n <!-- import from file -->\n <button mat-menu-item (click)=\"importFromCsv($event)\">\n <ion-label translate>FILE.PROPERTIES.BTN_IMPORT_FROM_CSV</ion-label>\n </button>\n\n <!-- import policy -->\n <mat-divider></mat-divider>\n <button mat-menu-item [matMenuTriggerFor]=\"importPolicyMenu\">\n <ion-label translate>FILE.UPLOAD.BTN_IMPORT_POLICY_DOTS</ion-label>\n </button>\n</mat-menu>\n\n<!-- Import policy menu -->\n<mat-menu #importPolicyMenu=\"matMenu\" class=\"ion-no-padding\">\n <ng-template matMenuContent>\n <!-- header-->\n <ion-row class=\"mat-menu-header ion-no-padding column\">\n <ion-col>\n <ion-label translate>FILE.UPLOAD.IMPORT_POLICY.TITLE</ion-label>\n </ion-col>\n </ion-row>\n @for (policy of _importPolicies; track policy) {\n <button mat-menu-item (click)=\"importPolicy = policy\">\n <mat-icon>{{ importPolicy === policy ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>\n <ion-label>{{ 'FILE.UPLOAD.IMPORT_POLICY.' + policy | uppercase | translate }}</ion-label>\n </button>\n }\n </ng-template>\n</mat-menu>\n\n<!-- Properties -->\n<form [formGroup]=\"form\" class=\"form-container\">\n @if (loadingSubject | async) {\n <ion-list [inset]=\"mobile\">\n <ng-container *ngTemplateOutlet=\"propertyRowSkeleton\"></ng-container>\n <ng-container *ngTemplateOutlet=\"propertyRowSkeleton\"></ng-container>\n <ng-container *ngTemplateOutlet=\"propertyRowSkeleton\"></ng-container>\n </ion-list>\n } @else {\n <ion-list formArrayName=\"properties\" [inset]=\"mobile\">\n <!-- Show more options -->\n @if ((_definitionKeys$ | async | isNotEmptyArray) && formArray?.length === 0) {\n <ion-item lines=\"none\">\n <ion-button color=\"light\" [title]=\"addButtonTitle | translate\" (click)=\"_helper.add()\">\n <ion-label>{{ addButtonText | translate }}</ion-label>\n <mat-icon slot=\"end\">arrow_drop_down</mat-icon>\n </ion-button>\n </ion-item>\n }\n\n @for (fieldForm of fieldForms; track i; let i = $index) {\n <ion-item lines=\"none\" [class.outline]=\"appearance === 'outline'\">\n <ion-grid class=\"ion-no-padding\">\n <ion-row [formGroupName]=\"i\" class=\"ion-no-padding\">\n @let definition = getDefinitionAt(i);\n\n <!-- property key -->\n @if (fieldForm | formGetControl: 'key'; as control) {\n <ion-col\n size=\"12\"\n size-sm=\"6\"\n [title]=\"(definition | propertyGet: 'label' | translate) || ''\"\n class=\"ion-no-padding\"\n >\n <mat-autocomplete-field\n floatLabel=\"auto\"\n [formControl]=\"control\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"showHintKey ? 'fixed' : subscriptSizing\"\n (selectionChange)=\"updateDefinitionAt(i)\"\n [tabindex]=\"tabindex + i * 2\"\n [config]=\"_autocompleteConfig\"\n [placeholder]=\"'SETTINGS.PROPERTY_KEY' | translate\"\n [required]=\"true\"\n (focus)=\"_focusedControlIndex = i\"\n [readonly]=\"definition?.disabled\"\n [mobile]=\"mobile\"\n [panelClass]=\"panelClass\"\n [panelWidth]=\"panelWidth\"\n >\n <mat-hint [class.cdk-visually-hidden]=\"!showHintKey\">\n @let keyValue = control.value;\n {{ hintKeyPrefix || '' }}{{ keyValue?.key || keyValue || '' }}\n </mat-hint>\n </mat-autocomplete-field>\n </ion-col>\n }\n\n <!-- property value -->\n <ion-col size=\"\" size-sm=\"\" class=\"ion-no-padding ion-padding-start-xs\">\n @if (definition) {\n <app-form-field\n floatLabel=\"auto\"\n [label]=\"mobile ? ('SETTINGS.PROPERTY_VALUE' | translate) : ' '\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"subscriptSizing\"\n [definition]=\"definition\"\n [formControl]=\"fieldForm | formGetControl: 'value'\"\n [placeholder]=\"'SETTINGS.PROPERTY_VALUE' | translate\"\n [chipColor]=\"chipColor\"\n [required]=\"true\"\n [hideRequiredMarker]=\"true\"\n [tabindex]=\"tabindex + i * 2 + 1\"\n [readonly]=\"definition?.disabled\"\n [panelClass]=\"panelClass\"\n [panelWidth]=\"panelWidth\"\n ></app-form-field>\n } @else {\n <!-- unknown definition -->\n <mat-form-field [appearance]=\"appearance\" [subscriptSizing]=\"subscriptSizing\">\n @if (mobile) {\n <mat-label>{{ 'SETTINGS.PROPERTY_VALUE' | translate }}</mat-label>\n }\n <input\n type=\"text\"\n matInput\n [formControl]=\"fieldForm | formGetControl: 'value'\"\n [placeholder]=\"mobile ? '' : ('SETTINGS.PROPERTY_VALUE' | translate)\"\n [required]=\"true\"\n [tabindex]=\"20 + i * 2 + 1\"\n />\n </mat-form-field>\n }\n </ion-col>\n\n <ion-col size=\"auto\" class=\"ion-no-padding\">\n @if (_helper.isLast(i)) {\n <button\n type=\"button\"\n mat-icon-button\n color=\"light\"\n [disabled]=\"\n disabled || (fieldForm.value | asBoolean: isEmptyProperty) || (_definitionKeys | isEmptyArray)\n \"\n [title]=\"'SETTINGS.BTN_ADD_PROPERTY' | translate\"\n (click)=\"_helper.add()\"\n [tabindex]=\"20 + i * 2 + 2\"\n >\n <mat-icon>add</mat-icon>\n </button>\n }\n <button\n type=\"button\"\n mat-icon-button\n color=\"light\"\n [disabled]=\"definition?.disabled || disabled\"\n [title]=\"'COMMON.BTN_DELETE' | translate\"\n (click)=\"removeAt(i)\"\n [tabindex]=\"-1\"\n >\n <mat-icon>close</mat-icon>\n </button>\n </ion-col>\n </ion-row>\n </ion-grid>\n </ion-item>\n }\n </ion-list>\n }\n</form>\n\n<ng-template #propertyRowSkeleton>\n <ion-item lines=\"none\">\n <ion-grid class=\"ion-no-padding\">\n <ion-row class=\"ion-no-padding\">\n <!-- property key -->\n <ion-col size=\"6\" class=\"ion-no-padding\">\n <mat-form-field [subscriptSizing]=\"subscriptSizing\">\n <input matInput hidden disabled />\n <ion-skeleton-text [animated]=\"true\" style=\"width: 60%\"></ion-skeleton-text>\n <ion-icon name=\"arrow-dropdown\" matSuffix></ion-icon>\n </mat-form-field>\n </ion-col>\n <!-- value -->\n <ion-col class=\"ion-no-padding\">\n <mat-form-field [subscriptSizing]=\"subscriptSizing\">\n <input matInput hidden disabled />\n <ion-skeleton-text [animated]=\"true\" style=\"width: 60%\"></ion-skeleton-text>\n </mat-form-field>\n </ion-col>\n <!-- buttons -->\n <ion-col size=\"auto\">\n <button type=\"button\" mat-icon-button color=\"light\" disabled>\n <mat-icon>close</mat-icon>\n </button>\n </ion-col>\n </ion-row>\n </ion-grid>\n </ion-item>\n</ng-template>\n", styles: [":host ion-item ion-row ion-col{--ion-padding-start: 0;min-width:48px}:host ion-item.outline{overflow:visible}:host ion-item.outline ion-grid,:host ion-item.outline ion-row,:host ion-item.outline ion-col{overflow:visible}\n"], dependencies: [{ kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$1.IonToggle, selector: "ion-toggle", inputs: ["alignment", "checked", "color", "disabled", "enableOnOffLabels", "justify", "labelPlacement", "legacy", "mode", "name", "value"] }, { kind: "directive", type: i2$1.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.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: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i12.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i12.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i12.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i12.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i9.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "label", "appearance", "subscriptSizing", "placeholder", "suggestFn", "required", "hideRequiredMarker", "mobile", "clearable", "debounceTime", "displaySeparator", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "reloadItemsOnFocus", "clearInvalidValueOnBlur", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "trimSearchText", "splitSearchText", "selectInputContentOnFocus", "selectInputContentOnFocusDelay", "previewImplicitValue", "showFavorites", "toggleFavoriteTitle", "favoriteItems", "colSizes", "class", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keydown.backspace", "keyup.enter", "selectionChange", "openedChange", "toggleFavorite"] }, { kind: "component", type: AppFormField, selector: "app-form-field", inputs: ["definition", "readonly", "disabled", "formControl", "formControlName", "placeholder", "compact", "required", "hideRequiredMarker", "floatLabel", "label", "appearance", "subscriptSizing", "tabindex", "autofocus", "clearable", "chipColor", "class", "debug", "panelClass", "panelWidth"], outputs: ["keyup.enter"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: NotEmptyArrayPipe, name: "isNotEmptyArray" }, { kind: "pipe", type: EmptyArrayPipe, name: "isEmptyArray" }, { kind: "pipe", type: FormGetControlPipe, name: "formGetControl" }, { kind: "pipe", type: AsBooleanPipe, name: "asBoolean" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
36604
36604
|
}
|
|
36605
36605
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppPropertiesForm, decorators: [{
|
|
36606
36606
|
type: Component,
|
|
36607
|
-
args: [{ selector: 'app-properties-form', providers: [{ provide: PropertyValidator, useClass: PropertyValidator }, RxState], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (showToolbar) {\n <mat-toolbar>\n <div class=\"toolbar-spacer\"></div>\n\n <ion-item lines=\"none\" (click)=\"toggleShowHintKeys()\">\n <ion-label color=\"dark\">{{ 'FILE.PROPERTIES.BTN_SHOW_HINT_KEY' | translate }}</ion-label>\n <ion-toggle color=\"primary\" [checked]=\"showHintKey\"></ion-toggle>\n </ion-item>\n\n <!-- options sub menu -->\n @if (canDownload || canImport) {\n <button slot=\"end\" mat-icon-button [matMenuTriggerFor]=\"optionsMenu\" [title]=\"'COMMON.BTN_OPTIONS' | translate\">\n <mat-icon>more_vert</mat-icon>\n </button>\n }\n\n </mat-toolbar>\n}\n\n<!-- Options menu -->\n<mat-menu #optionsMenu=\"matMenu\">\n <ng-template matMenuContent>\n <!-- Download as CSV -->\n @if (canDownload) {\n <button mat-menu-item [disabled]=\"loading\" [matMenuTriggerFor]=\"downloadMenu\">\n <mat-icon>download</mat-icon>\n <ion-label translate>COMMON.BTN_DOWNLOAD_DOTS</ion-label>\n </button>\n }\n\n <!-- Import from file -->\n @if (canImport) {\n <button mat-menu-item [disabled]=\"loading || disabled\" [matMenuTriggerFor]=\"importMenu\">\n <mat-icon>upload</mat-icon>\n <ion-label translate>COMMON.BTN_IMPORT_FROM_FILE_DOTS</ion-label>\n </button>\n }\n </ng-template>\n</mat-menu>\n\n<!-- Download menu -->\n<mat-menu #downloadMenu=\"matMenu\">\n <button mat-menu-item [disabled]=\"loading\" (click)=\"exportToCsv()\">\n <ion-label translate>FILE.PROPERTIES.BTN_DOWNLOAD_AS_CSV</ion-label>\n </button>\n</mat-menu>\n\n<!-- Import menu -->\n<mat-menu #importMenu=\"matMenu\">\n <!-- import from file -->\n <button mat-menu-item (click)=\"importFromCsv($event)\">\n <ion-label translate>FILE.PROPERTIES.BTN_IMPORT_FROM_CSV</ion-label>\n </button>\n\n <!-- import policy -->\n <mat-divider></mat-divider>\n <button mat-menu-item [matMenuTriggerFor]=\"importPolicyMenu\">\n <ion-label translate>FILE.UPLOAD.BTN_IMPORT_POLICY_DOTS</ion-label>\n </button>\n</mat-menu>\n\n<!-- Import policy menu -->\n<mat-menu #importPolicyMenu=\"matMenu\" class=\"ion-no-padding\">\n <ng-template matMenuContent>\n <!-- header-->\n <ion-row class=\"mat-menu-header ion-no-padding column\">\n <ion-col>\n <ion-label translate>FILE.UPLOAD.IMPORT_POLICY.TITLE</ion-label>\n </ion-col>\n </ion-row>\n @for (policy of _importPolicies; track policy) {\n <button mat-menu-item (click)=\"importPolicy = policy\">\n <mat-icon>{{ importPolicy === policy ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>\n <ion-label>{{ 'FILE.UPLOAD.IMPORT_POLICY.' + policy | uppercase | translate }}</ion-label>\n </button>\n }\n </ng-template>\n</mat-menu>\n\n<!-- Properties -->\n<form [formGroup]=\"form\" class=\"form-container\">\n @if (loadingSubject | async) {\n <ion-list [inset]=\"mobile\">\n <ng-container *ngTemplateOutlet=\"propertyRowSkeleton\"></ng-container>\n <ng-container *ngTemplateOutlet=\"propertyRowSkeleton\"></ng-container>\n <ng-container *ngTemplateOutlet=\"propertyRowSkeleton\"></ng-container>\n </ion-list>\n } @else {\n <ion-list formArrayName=\"properties\" [inset]=\"mobile\">\n <!-- Show more options -->\n @if ((_definitionKeys$ | async | isNotEmptyArray) && formArray?.length === 0) {\n <ion-item lines=\"none\">\n <ion-button color=\"light\" [title]=\"addButtonTitle | translate\" (click)=\"_helper.add()\">\n <ion-label>{{ addButtonText | translate }}</ion-label>\n <mat-icon slot=\"end\">arrow_drop_down</mat-icon>\n </ion-button>\n </ion-item>\n }\n\n @for (fieldForm of fieldForms; track i; let i = $index) {\n <ion-item lines=\"none\" [class.outline]=\"appearance === 'outline'\">\n <ion-grid class=\"ion-no-padding\">\n <ion-row [formGroupName]=\"i\" class=\"ion-no-padding\">\n @let definition = getDefinitionAt(i);\n\n <!-- property key -->\n @if (fieldForm | formGetControl: 'key'; as control) {\n <ion-col\n size=\"12\"\n size-sm=\"6\"\n [title]=\"(definition | propertyGet: 'label' | translate) || ''\"\n class=\"ion-no-padding\"\n >\n <mat-autocomplete-field\n floatLabel=\"auto\"\n [formControl]=\"control\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"showHintKey ? 'fixed' : subscriptSizing\"\n (selectionChange)=\"updateDefinitionAt(i)\"\n [tabindex]=\"tabindex + i * 2\"\n [config]=\"_autocompleteConfig\"\n [placeholder]=\"'SETTINGS.PROPERTY_KEY' | translate\"\n [required]=\"true\"\n (focus)=\"_focusedControlIndex = i\"\n [readonly]=\"definition?.disabled\"\n [mobile]=\"mobile\"\n [panelClass]=\"panelClass\"\n [panelWidth]=\"panelWidth\"\n >\n <mat-hint [class.cdk-visually-hidden]=\"!showHintKey\">\n @let keyValue = control.value;\n {{ hintKeyPrefix || '' }}{{ keyValue?.key || keyValue || '' }}\n </mat-hint>\n </mat-autocomplete-field>\n </ion-col>\n }\n\n <!-- property value -->\n <ion-col size=\"\" size-sm=\"\" class=\"ion-no-padding ion-padding-start-xs\">\n @if (definition) {\n <app-form-field\n floatLabel=\"auto\"\n [label]=\"mobile ? ('SETTINGS.PROPERTY_VALUE' | translate) : ' '\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"subscriptSizing\"\n [definition]=\"definition\"\n [formControl]=\"fieldForm | formGetControl: 'value'\"\n [placeholder]=\"'SETTINGS.PROPERTY_VALUE' | translate\"\n [chipColor]=\"chipColor\"\n [required]=\"true\"\n [hideRequiredMarker]=\"true\"\n [tabindex]=\"tabindex + i * 2 + 1\"\n [readonly]=\"definition?.disabled\"\n [panelClass]=\"panelClass\"\n [panelWidth]=\"panelWidth\"\n ></app-form-field>\n } @else {\n <!-- unknown definition -->\n <mat-form-field [appearance]=\"appearance\" [subscriptSizing]=\"subscriptSizing\">\n @if (mobile) {\n <mat-label>{{ 'SETTINGS.PROPERTY_VALUE' | translate }}</mat-label>\n }\n <input\n type=\"text\"\n matInput\n [formControl]=\"fieldForm | formGetControl: 'value'\"\n [placeholder]=\"mobile ? '' : ('SETTINGS.PROPERTY_VALUE' | translate)\"\n [required]=\"true\"\n [tabindex]=\"20 + i * 2 + 1\"\n />\n </mat-form-field>\n }\n </ion-col>\n\n <ion-col size=\"auto\" class=\"ion-no-padding\">\n @if (_helper.isLast(i)) {\n <button\n type=\"button\"\n mat-icon-button\n color=\"light\"\n [disabled]=\"\n disabled || (fieldForm.value | asBoolean: isEmptyProperty) || (_definitionKeys | isEmptyArray)\n \"\n [title]=\"'SETTINGS.BTN_ADD_PROPERTY' | translate\"\n (click)=\"_helper.add()\"\n [tabindex]=\"20 + i * 2 + 2\"\n >\n <mat-icon>add</mat-icon>\n </button>\n }\n <button\n type=\"button\"\n mat-icon-button\n color=\"light\"\n [disabled]=\"definition?.disabled || disabled\"\n [title]=\"'COMMON.BTN_DELETE' | translate\"\n (click)=\"removeAt(i)\"\n [tabindex]=\"-1\"\n >\n <mat-icon>close</mat-icon>\n </button>\n </ion-col>\n </ion-row>\n </ion-grid>\n </ion-item>\n }\n </ion-list>\n }\n</form>\n\n<ng-template #propertyRowSkeleton>\n <ion-item lines=\"none\">\n <ion-grid class=\"ion-no-padding\">\n <ion-row class=\"ion-no-padding\">\n <!-- property key -->\n <ion-col size=\"6\" class=\"ion-no-padding\">\n <mat-form-field [subscriptSizing]=\"subscriptSizing\">\n <input matInput hidden disabled />\n <ion-skeleton-text [animated]=\"true\" style=\"width: 60%\"></ion-skeleton-text>\n <ion-icon name=\"arrow-dropdown\" matSuffix></ion-icon>\n </mat-form-field>\n </ion-col>\n <!-- value -->\n <ion-col class=\"ion-no-padding\">\n <mat-form-field [subscriptSizing]=\"subscriptSizing\">\n <input matInput hidden disabled />\n <ion-skeleton-text [animated]=\"true\" style=\"width: 60%\"></ion-skeleton-text>\n </mat-form-field>\n </ion-col>\n <!-- buttons -->\n <ion-col size=\"auto\">\n <button type=\"button\" mat-icon-button color=\"light\" disabled>\n <mat-icon>close</mat-icon>\n </button>\n </ion-col>\n </ion-row>\n </ion-grid>\n </ion-item>\n</ng-template>\n", styles: [":host ion-item ion-row ion-col{--ion-padding-start: 0;min-width:48px}:host ion-item.outline{overflow:visible}:host ion-item.outline ion-grid,:host ion-item.outline ion-row,:host ion-item.outline ion-col{overflow:visible}\n"] }]
|
|
36607
|
+
args: [{ selector: 'app-properties-form', providers: [{ provide: PropertyValidator, useClass: PropertyValidator }, RxState], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (showToolbar) {\n <mat-toolbar>\n <div class=\"toolbar-spacer\"></div>\n\n <ion-item lines=\"none\" (click)=\"toggleShowHintKeys()\">\n <ion-label color=\"dark\">{{ 'FILE.PROPERTIES.BTN_SHOW_HINT_KEY' | translate }}</ion-label>\n <ion-toggle color=\"primary\" [checked]=\"showHintKey\"></ion-toggle>\n </ion-item>\n\n <!-- options sub menu -->\n @if (canDownload || canImport) {\n <button slot=\"end\" mat-icon-button [matMenuTriggerFor]=\"optionsMenu\" [title]=\"'COMMON.BTN_OPTIONS' | translate\">\n <mat-icon>more_vert</mat-icon>\n </button>\n }\n\n </mat-toolbar>\n}\n\n<!-- Options menu -->\n<mat-menu #optionsMenu=\"matMenu\">\n <!-- Download as CSV -->\n @if (canDownload) {\n <button mat-menu-item [disabled]=\"loading\" [matMenuTriggerFor]=\"downloadMenu\">\n <mat-icon>download</mat-icon>\n <ion-label translate>COMMON.BTN_DOWNLOAD_DOTS</ion-label>\n </button>\n }\n\n <!-- Import from file -->\n @if (canImport) {\n <button mat-menu-item [disabled]=\"loading || disabled\" [matMenuTriggerFor]=\"importMenu\">\n <mat-icon>upload</mat-icon>\n <ion-label translate>COMMON.BTN_IMPORT_FROM_FILE_DOTS</ion-label>\n </button>\n }\n</mat-menu>\n\n<!-- Download menu -->\n<mat-menu #downloadMenu=\"matMenu\">\n <button mat-menu-item [disabled]=\"loading\" (click)=\"exportToCsv()\">\n <ion-label translate>FILE.PROPERTIES.BTN_DOWNLOAD_AS_CSV</ion-label>\n </button>\n</mat-menu>\n\n<!-- Import menu -->\n<mat-menu #importMenu=\"matMenu\">\n <!-- import from file -->\n <button mat-menu-item (click)=\"importFromCsv($event)\">\n <ion-label translate>FILE.PROPERTIES.BTN_IMPORT_FROM_CSV</ion-label>\n </button>\n\n <!-- import policy -->\n <mat-divider></mat-divider>\n <button mat-menu-item [matMenuTriggerFor]=\"importPolicyMenu\">\n <ion-label translate>FILE.UPLOAD.BTN_IMPORT_POLICY_DOTS</ion-label>\n </button>\n</mat-menu>\n\n<!-- Import policy menu -->\n<mat-menu #importPolicyMenu=\"matMenu\" class=\"ion-no-padding\">\n <ng-template matMenuContent>\n <!-- header-->\n <ion-row class=\"mat-menu-header ion-no-padding column\">\n <ion-col>\n <ion-label translate>FILE.UPLOAD.IMPORT_POLICY.TITLE</ion-label>\n </ion-col>\n </ion-row>\n @for (policy of _importPolicies; track policy) {\n <button mat-menu-item (click)=\"importPolicy = policy\">\n <mat-icon>{{ importPolicy === policy ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>\n <ion-label>{{ 'FILE.UPLOAD.IMPORT_POLICY.' + policy | uppercase | translate }}</ion-label>\n </button>\n }\n </ng-template>\n</mat-menu>\n\n<!-- Properties -->\n<form [formGroup]=\"form\" class=\"form-container\">\n @if (loadingSubject | async) {\n <ion-list [inset]=\"mobile\">\n <ng-container *ngTemplateOutlet=\"propertyRowSkeleton\"></ng-container>\n <ng-container *ngTemplateOutlet=\"propertyRowSkeleton\"></ng-container>\n <ng-container *ngTemplateOutlet=\"propertyRowSkeleton\"></ng-container>\n </ion-list>\n } @else {\n <ion-list formArrayName=\"properties\" [inset]=\"mobile\">\n <!-- Show more options -->\n @if ((_definitionKeys$ | async | isNotEmptyArray) && formArray?.length === 0) {\n <ion-item lines=\"none\">\n <ion-button color=\"light\" [title]=\"addButtonTitle | translate\" (click)=\"_helper.add()\">\n <ion-label>{{ addButtonText | translate }}</ion-label>\n <mat-icon slot=\"end\">arrow_drop_down</mat-icon>\n </ion-button>\n </ion-item>\n }\n\n @for (fieldForm of fieldForms; track i; let i = $index) {\n <ion-item lines=\"none\" [class.outline]=\"appearance === 'outline'\">\n <ion-grid class=\"ion-no-padding\">\n <ion-row [formGroupName]=\"i\" class=\"ion-no-padding\">\n @let definition = getDefinitionAt(i);\n\n <!-- property key -->\n @if (fieldForm | formGetControl: 'key'; as control) {\n <ion-col\n size=\"12\"\n size-sm=\"6\"\n [title]=\"(definition | propertyGet: 'label' | translate) || ''\"\n class=\"ion-no-padding\"\n >\n <mat-autocomplete-field\n floatLabel=\"auto\"\n [formControl]=\"control\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"showHintKey ? 'fixed' : subscriptSizing\"\n (selectionChange)=\"updateDefinitionAt(i)\"\n [tabindex]=\"tabindex + i * 2\"\n [config]=\"_autocompleteConfig\"\n [placeholder]=\"'SETTINGS.PROPERTY_KEY' | translate\"\n [required]=\"true\"\n (focus)=\"_focusedControlIndex = i\"\n [readonly]=\"definition?.disabled\"\n [mobile]=\"mobile\"\n [panelClass]=\"panelClass\"\n [panelWidth]=\"panelWidth\"\n >\n <mat-hint [class.cdk-visually-hidden]=\"!showHintKey\">\n @let keyValue = control.value;\n {{ hintKeyPrefix || '' }}{{ keyValue?.key || keyValue || '' }}\n </mat-hint>\n </mat-autocomplete-field>\n </ion-col>\n }\n\n <!-- property value -->\n <ion-col size=\"\" size-sm=\"\" class=\"ion-no-padding ion-padding-start-xs\">\n @if (definition) {\n <app-form-field\n floatLabel=\"auto\"\n [label]=\"mobile ? ('SETTINGS.PROPERTY_VALUE' | translate) : ' '\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"subscriptSizing\"\n [definition]=\"definition\"\n [formControl]=\"fieldForm | formGetControl: 'value'\"\n [placeholder]=\"'SETTINGS.PROPERTY_VALUE' | translate\"\n [chipColor]=\"chipColor\"\n [required]=\"true\"\n [hideRequiredMarker]=\"true\"\n [tabindex]=\"tabindex + i * 2 + 1\"\n [readonly]=\"definition?.disabled\"\n [panelClass]=\"panelClass\"\n [panelWidth]=\"panelWidth\"\n ></app-form-field>\n } @else {\n <!-- unknown definition -->\n <mat-form-field [appearance]=\"appearance\" [subscriptSizing]=\"subscriptSizing\">\n @if (mobile) {\n <mat-label>{{ 'SETTINGS.PROPERTY_VALUE' | translate }}</mat-label>\n }\n <input\n type=\"text\"\n matInput\n [formControl]=\"fieldForm | formGetControl: 'value'\"\n [placeholder]=\"mobile ? '' : ('SETTINGS.PROPERTY_VALUE' | translate)\"\n [required]=\"true\"\n [tabindex]=\"20 + i * 2 + 1\"\n />\n </mat-form-field>\n }\n </ion-col>\n\n <ion-col size=\"auto\" class=\"ion-no-padding\">\n @if (_helper.isLast(i)) {\n <button\n type=\"button\"\n mat-icon-button\n color=\"light\"\n [disabled]=\"\n disabled || (fieldForm.value | asBoolean: isEmptyProperty) || (_definitionKeys | isEmptyArray)\n \"\n [title]=\"'SETTINGS.BTN_ADD_PROPERTY' | translate\"\n (click)=\"_helper.add()\"\n [tabindex]=\"20 + i * 2 + 2\"\n >\n <mat-icon>add</mat-icon>\n </button>\n }\n <button\n type=\"button\"\n mat-icon-button\n color=\"light\"\n [disabled]=\"definition?.disabled || disabled\"\n [title]=\"'COMMON.BTN_DELETE' | translate\"\n (click)=\"removeAt(i)\"\n [tabindex]=\"-1\"\n >\n <mat-icon>close</mat-icon>\n </button>\n </ion-col>\n </ion-row>\n </ion-grid>\n </ion-item>\n }\n </ion-list>\n }\n</form>\n\n<ng-template #propertyRowSkeleton>\n <ion-item lines=\"none\">\n <ion-grid class=\"ion-no-padding\">\n <ion-row class=\"ion-no-padding\">\n <!-- property key -->\n <ion-col size=\"6\" class=\"ion-no-padding\">\n <mat-form-field [subscriptSizing]=\"subscriptSizing\">\n <input matInput hidden disabled />\n <ion-skeleton-text [animated]=\"true\" style=\"width: 60%\"></ion-skeleton-text>\n <ion-icon name=\"arrow-dropdown\" matSuffix></ion-icon>\n </mat-form-field>\n </ion-col>\n <!-- value -->\n <ion-col class=\"ion-no-padding\">\n <mat-form-field [subscriptSizing]=\"subscriptSizing\">\n <input matInput hidden disabled />\n <ion-skeleton-text [animated]=\"true\" style=\"width: 60%\"></ion-skeleton-text>\n </mat-form-field>\n </ion-col>\n <!-- buttons -->\n <ion-col size=\"auto\">\n <button type=\"button\" mat-icon-button color=\"light\" disabled>\n <mat-icon>close</mat-icon>\n </button>\n </ion-col>\n </ion-row>\n </ion-grid>\n </ion-item>\n</ng-template>\n", styles: [":host ion-item ion-row ion-col{--ion-padding-start: 0;min-width:48px}:host ion-item.outline{overflow:visible}:host ion-item.outline ion-grid,:host ion-item.outline ion-row,:host ion-item.outline ion-col{overflow:visible}\n"] }]
|
|
36608
36608
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: i1$3.UntypedFormBuilder }, { type: i2.DateAdapter }, { type: i0.ChangeDetectorRef }, { type: PropertyValidator }, { type: i1$3.FormGroupDirective, decorators: [{
|
|
36609
36609
|
type: Optional
|
|
36610
36610
|
}] }], propDecorators: { showToolbar: [{
|