ngx-t-forms 2.0.3 → 2.0.5

package/fesm2022/ngx-t-forms-input-editor.component-Bh-Dz5yu.mjs

@@ -1,148 +0,0 @@
-import * as i2 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i0 from '@angular/core';
-import { inject, Component } from '@angular/core';
-import { F as FormsStoreService, M as MatModulesModule, T as TDynamicDataEditComponent, b as TDynamicDataViewComponent } from './ngx-t-forms-ngx-t-forms-DeOqfmLd.mjs';
-import { DefaultInputConfig } from 'ngx-t-forms-types';
-import { take, tap, combineLatest, map } from 'rxjs';
-import * as i6 from '@angular/material/list';
-import * as i4 from '@angular/material/divider';
-import * as i2$1 from '@angular/material/button';
-import * as i3 from '@angular/material/card';
-import * as i5 from '@angular/material/expansion';
-import * as i5$1 from '@angular/material/icon';
-import * as i7 from '@angular/material/progress-spinner';
-import * as i4$1 from '@angular/material/form-field';
-import * as i9 from '@angular/material/toolbar';
-import * as i8 from '@angular/material/tooltip';
-import * as i2$2 from '@angular/cdk/drag-drop';
-
-class DefaultElementComponent {
-    constructor() {
-        this.inputs = DefaultInputConfig;
-        this.store = inject(FormsStoreService);
-    }
-    getDefaultInputs() {
-        const i = JSON.parse(JSON.stringify(DefaultInputConfig));
-        return Object.keys(i);
-    }
-    selectInputTemplate(input) {
-        this.store.selectors.selectInputInEditId$.pipe(take(1)).subscribe((id) => {
-            if (!id)
-                return;
-            this.store.actionsFormBuilder.selectInputTemplate(id, input);
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: DefaultElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: DefaultElementComponent, isStandalone: true, selector: "app-default-element", ngImport: i0, template: "<br>\r\n<mat-nav-list style=\"margin: 5px;\">\r\n\r\n\r\n  @defer () {\r\n    @for (input of getDefaultInputs(); track input) {\r\n      @if (inputs[input].disabled === false) {\r\n      <mat-list-item style=\"background: var(--mdc-elevated-card-container-color, var(--mat-app-surface-container-low));\"\r\n        (click)=\"selectInputTemplate(input)\">\r\n        <img matListItemAvatar [src]=\"inputs[input].illustration\" alt=\"\">\r\n        <span matListItemTitle href=\"...\">{{ inputs[input].label}}</span>\r\n      </mat-list-item>\r\n      <mat-divider></mat-divider>\r\n      }\r\n      }\r\n    \r\n  }\r\n\r\n\r\n</mat-nav-list>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i6.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }], deferBlockDependencies: [() => [i4.MatDivider, i6.MatListItem, i6.MatListItemAvatar, i6.MatListItemTitle]] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: DefaultElementComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-default-element', standalone: true, imports: [CommonModule, MatModulesModule], template: "<br>\r\n<mat-nav-list style=\"margin: 5px;\">\r\n\r\n\r\n  @defer () {\r\n    @for (input of getDefaultInputs(); track input) {\r\n      @if (inputs[input].disabled === false) {\r\n      <mat-list-item style=\"background: var(--mdc-elevated-card-container-color, var(--mat-app-surface-container-low));\"\r\n        (click)=\"selectInputTemplate(input)\">\r\n        <img matListItemAvatar [src]=\"inputs[input].illustration\" alt=\"\">\r\n        <span matListItemTitle href=\"...\">{{ inputs[input].label}}</span>\r\n      </mat-list-item>\r\n      <mat-divider></mat-divider>\r\n      }\r\n      }\r\n    \r\n  }\r\n\r\n\r\n</mat-nav-list>" }]
-        }], ctorParameters: () => [] });
-
-class InputElementEditorComponent {
-    constructor() {
-        this.store = inject(FormsStoreService);
-        this.inputElementEditorConfigs$ = this.store.formBuilderSelectors.inputElementEditorConfigs$;
-        this.inputInEdit$ = this.store.formBuilderSelectors.inputInEdit$;
-        this.defaultInputInEdit$ = this.store.formBuilderSelectors.defaultInputInEdit$;
-        this.formInputs$ = this.store.formBuilderSelectors.getAllFormInputs$;
-        this.elementConfigurationChanged = (value, ele) => {
-            console.error('elementConfigurationChanged-------------', value, ele);
-            this.inputInEdit$.pipe(take(1), tap((input) => {
-                if (!input)
-                    return;
-                this.store.actionsFormBuilder.elementConfigurationChanged(input.id, value, ele);
-            })).subscribe();
-        };
-        // Event handlers
-        this.clearInputInEdit = () => {
-            this.inputInEdit$.pipe(take(1), tap((input) => {
-                if (!input)
-                    return;
-                this.store.actionsFormBuilder.clearInputInEdit(input.id);
-            })).subscribe();
-        };
-        this.elementBlur = (event, element) => {
-            this.inputInEdit$.pipe(take(1), tap((input) => {
-                if (!input)
-                    return;
-                this.store.actionsFormBuilder.elementBlur(input.id, event, element);
-            })).subscribe();
-        };
-        this.inputInEditValidationErrors$ = this.store.formBuilderSelectors.inputInEditValidationErrors$;
-        this.vm$ = combineLatest([
-            this.defaultInputInEdit$,
-            this.inputInEdit$,
-            this.inputElementEditorConfigs$,
-            this.inputInEditValidationErrors$,
-            this.formInputs$,
-        ]).pipe(map(([defaultInputInEdit, inputInEdit, inputElementEditorConfigs, inputInEditValidationErrors, formInputs]) => {
-            return {
-                defaultInputInEdit,
-                inputInEdit,
-                inputElementEditorConfigs,
-                inputInEditValidationErrors,
-                formInputs
-            };
-        }));
-    }
-    showDebugData() {
-        this.vm$.pipe(take(1)).subscribe((vm) => {
-            const jsonData = JSON.stringify(vm, null, 2);
-            const blob = new Blob([jsonData], { type: 'application/json' });
-            const url = window.URL.createObjectURL(blob);
-            const link = document.createElement('a');
-            link.href = url;
-            link.download = 'debug-data.json';
-            link.click();
-            window.URL.revokeObjectURL(url);
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: InputElementEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: InputElementEditorComponent, isStandalone: true, selector: "app-input-element-editor", ngImport: i0, template: "<mat-toolbar class=\"section-header\">\r\n    <span class=\"header\">Element configuration</span>\r\n    <span class=\"spacer\"></span>\r\n</mat-toolbar>\r\n<mat-divider></mat-divider>\r\n<ng-container *ngIf=\"(vm$ |async) as vm\">\r\n    @defer (on viewport) {\r\n    \r\n        <mat-accordion togglePosition=\"before\">\r\n            @for(section of vm.inputElementEditorConfigs.editorSections; track section.id) {\r\n            <mat-expansion-panel>\r\n                <mat-expansion-panel-header>\r\n                    <mat-panel-title>\r\n                        {{section.label}}\r\n                        <span class=\"spacer\"></span>\r\n                        @if (section.hasErrors) {\r\n                        <mat-icon color=\"warn\">error</mat-icon>\r\n                        }\r\n                        <span class=\"showItemValue\" *ngIf=\"section.showItemValue && !!(vm.inputInEdit)\">\r\n                            {{ vm.inputInEdit[section.showItemValue]}}\r\n                        </span>\r\n                        <mat-divider style=\"position: absolute; left:0px; width:100%; bottom:0px;\"></mat-divider>\r\n                    </mat-panel-title>\r\n                </mat-expansion-panel-header>\r\n        \r\n                <div style=\"margin-top: 16px;\"></div>\r\n        \r\n                <!-- Element type selector (only in first section) -->\r\n                @if($index === 0) {\r\n                <mat-nav-list>\r\n                    <mat-list-item matTooltip=\"Change input element\" (click)=\"clearInputInEdit()\">\r\n                        <img matListItemAvatar [src]=\"(vm.defaultInputInEdit)?.illustration\"\r\n                            [alt]=\"(vm.defaultInputInEdit)?.label\">\r\n                        <span matListItemTitle>{{ (vm.defaultInputInEdit)?.label}}</span>\r\n                        <span matListItemMeta>\r\n                            <mat-icon>arrow_forward_ios</mat-icon>\r\n                        </span>\r\n                    </mat-list-item>\r\n                    <mat-divider></mat-divider>\r\n                </mat-nav-list>\r\n                }\r\n        \r\n                <!-- Section elements -->\r\n                @for(element of section.elements; track element.id) {\r\n                <p style=\"margin-bottom: 16px; margin-top: 8px;\">\r\n                    @defer (on viewport) {\r\n                    <lib-t-dynamic-data-edit [editorConfig]=\"element\" [data]=\"(vm.inputInEdit)\"\r\n                        [validationErrors]=\"element.computedErrors||[]\"\r\n                        (valueChange)=\"elementConfigurationChanged($event, element)\" [formInputs]=\"(vm.formInputs)||[]\"\r\n                        (blur)=\"elementBlur($event, element)\">\r\n                    </lib-t-dynamic-data-edit>\r\n                    } @placeholder {\r\n                <div style=\"padding: 50px; display:flex; justify-content:center; align-items:center; text-align: center;\">\r\n                    <mat-spinner diameter=\"18\"></mat-spinner>\r\n                </div>\r\n                }\r\n                </p>\r\n                }\r\n            </mat-expansion-panel>\r\n            }\r\n        </mat-accordion>\r\n        } @placeholder {\r\n        <div style=\"padding: 50px; display:flex; justify-content:center; align-items:center; text-align: center;\">\r\n            <mat-spinner diameter=\"50\" />\r\n        </div>\r\n        } @error {\r\n        <mat-error>\r\n            <h1>Error loading element editor</h1>\r\n            <p>An error occurred while loading the element editor. Please try again later.</p>\r\n        </mat-error>\r\n        }\r\n\r\n\r\n\r\n\r\n\r\n<!-- Diagnostic section -->\r\n<mat-toolbar class=\"section-header\">\r\n    <span class=\"header\">Diagnostic data</span>\r\n    <span class=\"spacer\"></span>\r\n</mat-toolbar>\r\n<mat-divider></mat-divider>\r\n\r\n<mat-accordion togglePosition=\"before\">\r\n    <mat-expansion-panel>\r\n        <mat-expansion-panel-header>\r\n            <mat-panel-title>\r\n                Input json data\r\n                <span class=\"spacer\"></span>\r\n                <mat-divider style=\"position: absolute; left:0px; width:100%; bottom:0px;\"></mat-divider>\r\n            </mat-panel-title>\r\n        </mat-expansion-panel-header>\r\n        <div style=\"margin-top: 16px;\"></div>\r\n        <mat-card style=\"padding: 16px;\">\r\n            <lib-t-dynamic-data-view [data]=\"vm.inputInEdit\"></lib-t-dynamic-data-view>\r\n        </mat-card>\r\n    </mat-expansion-panel>\r\n\r\n    @if(((vm.inputInEditValidationErrors)||[]).length > 0) {\r\n    <mat-expansion-panel>\r\n        <mat-expansion-panel-header>\r\n            <mat-panel-title>\r\n                Validation Errors\r\n                <span class=\"spacer\"></span>\r\n                <mat-error>\r\n                    {{(vm.inputInEditValidationErrors).length||''}}\r\n                </mat-error>\r\n                <mat-divider style=\"position: absolute; left:0px; width:100%; bottom:0px;\"></mat-divider>\r\n            </mat-panel-title>\r\n        </mat-expansion-panel-header>\r\n        <div style=\"margin-top: 16px;\"></div>\r\n        <mat-error style=\"border: solid 1px; border-radius: 8px; padding: 16px;\">\r\n            <h1>All configuration errors:</h1>\r\n            <p>\r\n                {{(vm.inputInEditValidationErrors).length||''}} errors found. When an error is found, the input will not\r\n                be saved.\r\n            </p>\r\n            <ul>\r\n                @for(error of (vm.inputInEditValidationErrors); track error.key) {\r\n                <li>\r\n                    <strong>{{error.key}}</strong> {{error.message}}\r\n                </li>\r\n                }\r\n            </ul>\r\n        </mat-error>\r\n    </mat-expansion-panel>\r\n    }\r\n    <mat-expansion-panel>\r\n        <mat-expansion-panel-header style=\"    padding-right: 0px;\">\r\n            <mat-panel-title>\r\n                Complete Virtual Model \r\n                <span class=\"spacer\"></span>\r\n                <button mat-icon-button (click)=\"showDebugData()\">\r\n                    <mat-icon>\r\n                        troubleshoot\r\n                    </mat-icon>\r\n                </button>\r\n                <mat-divider style=\"position: absolute; left:0px; width:100%; bottom:0px;\"></mat-divider>\r\n            </mat-panel-title>\r\n        </mat-expansion-panel-header>\r\n        <div style=\"margin-top: 16px;\"></div>\r\n        <mat-card style=\"padding: 16px;\">\r\n    \r\n            <lib-t-dynamic-data-view [data]=\"({\r\n            'Default Input Template InEdit': vm.defaultInputInEdit,\r\n            'Input In Edit': vm.inputInEdit,\r\n            'Input Editor Sections': vm.inputElementEditorConfigs.editorSections,\r\n            })\"></lib-t-dynamic-data-view>\r\n       \r\n        </mat-card>\r\n    </mat-expansion-panel>\r\n\r\n</mat-accordion>\r\n</ng-container>", styles: [".showItemValue{opacity:.6}mat-form-field{width:100%}mat-slider{width:100%}.header{margin-bottom:0;font-size:small;opacity:.6}.section-header{height:38px;margin-top:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i5.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i5.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i4$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i9.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: TDynamicDataViewComponent, selector: "lib-t-dynamic-data-view", inputs: ["data"] }], deferBlockDependencies: [() => [i2.NgIf, i4.MatDivider, i5.MatAccordion, i5.MatExpansionPanel, i5.MatExpansionPanelHeader, i5.MatExpansionPanelTitle, i5$1.MatIcon, i6.MatNavList, i6.MatListItem, i6.MatListItemAvatar, i6.MatListItemTitle, i6.MatListItemMeta, i7.MatProgressSpinner, i8.MatTooltip], () => [TDynamicDataEditComponent]] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: InputElementEditorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-input-element-editor', standalone: true, imports: [
-                        CommonModule,
-                        MatModulesModule,
-                        TDynamicDataEditComponent,
-                        TDynamicDataViewComponent
-                    ], template: "<mat-toolbar class=\"section-header\">\r\n    <span class=\"header\">Element configuration</span>\r\n    <span class=\"spacer\"></span>\r\n</mat-toolbar>\r\n<mat-divider></mat-divider>\r\n<ng-container *ngIf=\"(vm$ |async) as vm\">\r\n    @defer (on viewport) {\r\n    \r\n        <mat-accordion togglePosition=\"before\">\r\n            @for(section of vm.inputElementEditorConfigs.editorSections; track section.id) {\r\n            <mat-expansion-panel>\r\n                <mat-expansion-panel-header>\r\n                    <mat-panel-title>\r\n                        {{section.label}}\r\n                        <span class=\"spacer\"></span>\r\n                        @if (section.hasErrors) {\r\n                        <mat-icon color=\"warn\">error</mat-icon>\r\n                        }\r\n                        <span class=\"showItemValue\" *ngIf=\"section.showItemValue && !!(vm.inputInEdit)\">\r\n                            {{ vm.inputInEdit[section.showItemValue]}}\r\n                        </span>\r\n                        <mat-divider style=\"position: absolute; left:0px; width:100%; bottom:0px;\"></mat-divider>\r\n                    </mat-panel-title>\r\n                </mat-expansion-panel-header>\r\n        \r\n                <div style=\"margin-top: 16px;\"></div>\r\n        \r\n                <!-- Element type selector (only in first section) -->\r\n                @if($index === 0) {\r\n                <mat-nav-list>\r\n                    <mat-list-item matTooltip=\"Change input element\" (click)=\"clearInputInEdit()\">\r\n                        <img matListItemAvatar [src]=\"(vm.defaultInputInEdit)?.illustration\"\r\n                            [alt]=\"(vm.defaultInputInEdit)?.label\">\r\n                        <span matListItemTitle>{{ (vm.defaultInputInEdit)?.label}}</span>\r\n                        <span matListItemMeta>\r\n                            <mat-icon>arrow_forward_ios</mat-icon>\r\n                        </span>\r\n                    </mat-list-item>\r\n                    <mat-divider></mat-divider>\r\n                </mat-nav-list>\r\n                }\r\n        \r\n                <!-- Section elements -->\r\n                @for(element of section.elements; track element.id) {\r\n                <p style=\"margin-bottom: 16px; margin-top: 8px;\">\r\n                    @defer (on viewport) {\r\n                    <lib-t-dynamic-data-edit [editorConfig]=\"element\" [data]=\"(vm.inputInEdit)\"\r\n                        [validationErrors]=\"element.computedErrors||[]\"\r\n                        (valueChange)=\"elementConfigurationChanged($event, element)\" [formInputs]=\"(vm.formInputs)||[]\"\r\n                        (blur)=\"elementBlur($event, element)\">\r\n                    </lib-t-dynamic-data-edit>\r\n                    } @placeholder {\r\n                <div style=\"padding: 50px; display:flex; justify-content:center; align-items:center; text-align: center;\">\r\n                    <mat-spinner diameter=\"18\"></mat-spinner>\r\n                </div>\r\n                }\r\n                </p>\r\n                }\r\n            </mat-expansion-panel>\r\n            }\r\n        </mat-accordion>\r\n        } @placeholder {\r\n        <div style=\"padding: 50px; display:flex; justify-content:center; align-items:center; text-align: center;\">\r\n            <mat-spinner diameter=\"50\" />\r\n        </div>\r\n        } @error {\r\n        <mat-error>\r\n            <h1>Error loading element editor</h1>\r\n            <p>An error occurred while loading the element editor. Please try again later.</p>\r\n        </mat-error>\r\n        }\r\n\r\n\r\n\r\n\r\n\r\n<!-- Diagnostic section -->\r\n<mat-toolbar class=\"section-header\">\r\n    <span class=\"header\">Diagnostic data</span>\r\n    <span class=\"spacer\"></span>\r\n</mat-toolbar>\r\n<mat-divider></mat-divider>\r\n\r\n<mat-accordion togglePosition=\"before\">\r\n    <mat-expansion-panel>\r\n        <mat-expansion-panel-header>\r\n            <mat-panel-title>\r\n                Input json data\r\n                <span class=\"spacer\"></span>\r\n                <mat-divider style=\"position: absolute; left:0px; width:100%; bottom:0px;\"></mat-divider>\r\n            </mat-panel-title>\r\n        </mat-expansion-panel-header>\r\n        <div style=\"margin-top: 16px;\"></div>\r\n        <mat-card style=\"padding: 16px;\">\r\n            <lib-t-dynamic-data-view [data]=\"vm.inputInEdit\"></lib-t-dynamic-data-view>\r\n        </mat-card>\r\n    </mat-expansion-panel>\r\n\r\n    @if(((vm.inputInEditValidationErrors)||[]).length > 0) {\r\n    <mat-expansion-panel>\r\n        <mat-expansion-panel-header>\r\n            <mat-panel-title>\r\n                Validation Errors\r\n                <span class=\"spacer\"></span>\r\n                <mat-error>\r\n                    {{(vm.inputInEditValidationErrors).length||''}}\r\n                </mat-error>\r\n                <mat-divider style=\"position: absolute; left:0px; width:100%; bottom:0px;\"></mat-divider>\r\n            </mat-panel-title>\r\n        </mat-expansion-panel-header>\r\n        <div style=\"margin-top: 16px;\"></div>\r\n        <mat-error style=\"border: solid 1px; border-radius: 8px; padding: 16px;\">\r\n            <h1>All configuration errors:</h1>\r\n            <p>\r\n                {{(vm.inputInEditValidationErrors).length||''}} errors found. When an error is found, the input will not\r\n                be saved.\r\n            </p>\r\n            <ul>\r\n                @for(error of (vm.inputInEditValidationErrors); track error.key) {\r\n                <li>\r\n                    <strong>{{error.key}}</strong> {{error.message}}\r\n                </li>\r\n                }\r\n            </ul>\r\n        </mat-error>\r\n    </mat-expansion-panel>\r\n    }\r\n    <mat-expansion-panel>\r\n        <mat-expansion-panel-header style=\"    padding-right: 0px;\">\r\n            <mat-panel-title>\r\n                Complete Virtual Model \r\n                <span class=\"spacer\"></span>\r\n                <button mat-icon-button (click)=\"showDebugData()\">\r\n                    <mat-icon>\r\n                        troubleshoot\r\n                    </mat-icon>\r\n                </button>\r\n                <mat-divider style=\"position: absolute; left:0px; width:100%; bottom:0px;\"></mat-divider>\r\n            </mat-panel-title>\r\n        </mat-expansion-panel-header>\r\n        <div style=\"margin-top: 16px;\"></div>\r\n        <mat-card style=\"padding: 16px;\">\r\n    \r\n            <lib-t-dynamic-data-view [data]=\"({\r\n            'Default Input Template InEdit': vm.defaultInputInEdit,\r\n            'Input In Edit': vm.inputInEdit,\r\n            'Input Editor Sections': vm.inputElementEditorConfigs.editorSections,\r\n            })\"></lib-t-dynamic-data-view>\r\n       \r\n        </mat-card>\r\n    </mat-expansion-panel>\r\n\r\n</mat-accordion>\r\n</ng-container>", styles: [".showItemValue{opacity:.6}mat-form-field{width:100%}mat-slider{width:100%}.header{margin-bottom:0;font-size:small;opacity:.6}.section-header{height:38px;margin-top:12px}\n"] }]
-        }] });
-
-class InputEditorComponent {
-    constructor(store) {
-        this.store = store;
-        this.defaultInputs = DefaultInputConfig;
-        this.inputInEdit$ = this.store.formBuilderSelectors.inputInEdit$;
-        this.defaultInputInEdit$ = this.store.formBuilderSelectors.defaultInputInEdit$;
-        this.saveInput = () => {
-            this.inputInEdit$.pipe(take(1), tap((input) => {
-                if (!input)
-                    return;
-                this.store.actionsFormBuilder.saveInput(input.id);
-            })).subscribe();
-        };
-        this.closeEditor = () => this.store.actions.setInputInEditId({
-            inputInEdit: null
-        });
-    }
-    get validationErrors$() {
-        return this.store.formBuilderSelectors.inputInEditValidationErrors$;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: InputEditorComponent, deps: [{ token: FormsStoreService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: InputEditorComponent, isStandalone: true, selector: "app-input-editor", ngImport: i0, template: "<mat-card \r\n\r\nstyle=\"\r\n\r\nbackground: var(--mat-toolbar-container-background-color, var(--mat-app-surface));\r\nmargin:0px;\r\nborder:solid 1px var(--mat-divider-color, var(--mat-app-outline))\">\r\n \r\n    <mat-card-header >\r\n        <mat-card-title>\r\n            {{\r\n                !!(inputInEdit$|async)?.element\r\n                  ? \"Edit \" +      (inputInEdit$|async)?.label + \" element\"\r\n                  : \"Setup Form Element\"\r\n              }}\r\n        </mat-card-title>\r\n        <mat-card-subtitle>   {{\r\n            !!(inputInEdit$|async)?.element? \"Configure the element below\": \"Form element are components making up a form section. Types of form elements are defined by their behaviour and use case, for example a date range picker is well suited to determine duration.\"\r\n          }}</mat-card-subtitle>\r\n          <button style=\"position: absolute;right:4px\" mat-icon-button cdkDragHandle >\r\n            <mat-icon>drag_indicator</mat-icon>\r\n          </button>\r\n      </mat-card-header>\r\n    \r\n\r\n\r\n        @if(!!((inputInEdit$|async))?.element){\r\n            <app-input-element-editor \r\n            style=\"background: var(--mat-toolbar-container-background-color, var(--mat-app-surface))\">\r\n          </app-input-element-editor>\r\n        }@else{\r\n            <app-default-element  style=\"background: var(--mat-toolbar-container-background-color, var(--mat-app-surface))\"></app-default-element>\r\n        }\r\n        <br>\r\n\r\n      <br>\r\n      <mat-divider></mat-divider>\r\n     \r\n      <mat-card-actions >\r\n            <button (click)=\"closeEditor()\" class=\"\" mat-flat-button>close</button>\r\n            <span class=\"spacer\"></span>\r\n            <button *ngIf=\"!((inputInEdit$|async))?.id\" mat-flat-button \r\n            (click)=\"saveInput()\"\r\n            [disabled]=\"((validationErrors$|async)||[]).length>0\"\r\n            color=\"primary\">save new input</button>\r\n        \r\n    </mat-card-actions>\r\n</mat-card>\r\n", styles: ["mat-card{margin:16px}mat-card-content{overflow-y:auto;max-height:calc(100vh - 190px)}mat-card-actions{position:sticky;bottom:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatModulesModule }, { kind: "directive", type: i2$2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "component", type: i3.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i3.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: DefaultElementComponent, selector: "app-default-element" }, { kind: "component", type: InputElementEditorComponent, selector: "app-input-element-editor" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: InputEditorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-input-editor', standalone: true, imports: [CommonModule,
-                        MatModulesModule,
-                        DefaultElementComponent,
-                        InputElementEditorComponent], template: "<mat-card \r\n\r\nstyle=\"\r\n\r\nbackground: var(--mat-toolbar-container-background-color, var(--mat-app-surface));\r\nmargin:0px;\r\nborder:solid 1px var(--mat-divider-color, var(--mat-app-outline))\">\r\n \r\n    <mat-card-header >\r\n        <mat-card-title>\r\n            {{\r\n                !!(inputInEdit$|async)?.element\r\n                  ? \"Edit \" +      (inputInEdit$|async)?.label + \" element\"\r\n                  : \"Setup Form Element\"\r\n              }}\r\n        </mat-card-title>\r\n        <mat-card-subtitle>   {{\r\n            !!(inputInEdit$|async)?.element? \"Configure the element below\": \"Form element are components making up a form section. Types of form elements are defined by their behaviour and use case, for example a date range picker is well suited to determine duration.\"\r\n          }}</mat-card-subtitle>\r\n          <button style=\"position: absolute;right:4px\" mat-icon-button cdkDragHandle >\r\n            <mat-icon>drag_indicator</mat-icon>\r\n          </button>\r\n      </mat-card-header>\r\n    \r\n\r\n\r\n        @if(!!((inputInEdit$|async))?.element){\r\n            <app-input-element-editor \r\n            style=\"background: var(--mat-toolbar-container-background-color, var(--mat-app-surface))\">\r\n          </app-input-element-editor>\r\n        }@else{\r\n            <app-default-element  style=\"background: var(--mat-toolbar-container-background-color, var(--mat-app-surface))\"></app-default-element>\r\n        }\r\n        <br>\r\n\r\n      <br>\r\n      <mat-divider></mat-divider>\r\n     \r\n      <mat-card-actions >\r\n            <button (click)=\"closeEditor()\" class=\"\" mat-flat-button>close</button>\r\n            <span class=\"spacer\"></span>\r\n            <button *ngIf=\"!((inputInEdit$|async))?.id\" mat-flat-button \r\n            (click)=\"saveInput()\"\r\n            [disabled]=\"((validationErrors$|async)||[]).length>0\"\r\n            color=\"primary\">save new input</button>\r\n        \r\n    </mat-card-actions>\r\n</mat-card>\r\n", styles: ["mat-card{margin:16px}mat-card-content{overflow-y:auto;max-height:calc(100vh - 190px)}mat-card-actions{position:sticky;bottom:0}\n"] }]
-        }], ctorParameters: () => [{ type: FormsStoreService }] });
-
-export { InputEditorComponent };
-//# sourceMappingURL=ngx-t-forms-input-editor.component-Bh-Dz5yu.mjs.map

package/fesm2022/ngx-t-forms-input-editor.component-Bh-Dz5yu.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"ngx-t-forms-input-editor.component-Bh-Dz5yu.mjs","sources":["../../../projects/ngx-t-forms/src/lib/components/form-builder/elements/default-element/default-element.component.ts","../../../projects/ngx-t-forms/src/lib/components/form-builder/elements/default-element/default-element.component.html","../../../projects/ngx-t-forms/src/lib/components/form-builder/elements/input-element-editor/input-element-editor.component.ts","../../../projects/ngx-t-forms/src/lib/components/form-builder/elements/input-element-editor/input-element-editor.component.html","../../../projects/ngx-t-forms/src/lib/components/form-builder/elements/input-editor/input-editor.component.ts","../../../projects/ngx-t-forms/src/lib/components/form-builder/elements/input-editor/input-editor.component.html"],"sourcesContent":["import { CommonModule } from '@angular/common';\r\nimport {  Component, inject } from '@angular/core';\r\nimport { MatModulesModule } from '../../../../shared/modules/mat-modules.module';\r\n\r\nimport { FormsStoreService } from '../../../forms/store/forms-store.service';\r\nimport { DefaultInputConfig, ElementTypes } from 'ngx-t-forms-types';\r\nimport { take } from 'rxjs';\r\n\r\n\r\n\r\n@Component({\r\n  selector: 'app-default-element',\r\n  standalone: true,\r\n  imports: [CommonModule,MatModulesModule],\r\n  templateUrl: './default-element.component.html',\r\n  styleUrl: './default-element.component.scss',\r\n})\r\nexport class DefaultElementComponent {\r\n\r\n  inputs = DefaultInputConfig\r\n  store = inject(FormsStoreService)\r\n\r\n  constructor(){\r\n\r\n  }\r\n    \r\n\r\n  getDefaultInputs():ElementTypes[]{\r\n    const i = JSON.parse(JSON.stringify(DefaultInputConfig))\r\n    return Object.keys(i) as any\r\n  }\r\n  selectInputTemplate (input: ElementTypes) {\r\n    this.store.selectors.selectInputInEditId$.pipe(\r\n      take(1)\r\n    ).subscribe((id)=>{\r\n      if(!id) return\r\n      this.store.actionsFormBuilder.selectInputTemplate(id,input)\r\n    }\r\n    )\r\n    \r\n  }\r\n\r\n}\r\n","<br>\r\n<mat-nav-list style=\"margin: 5px;\">\r\n\r\n\r\n  @defer () {\r\n    @for (input of getDefaultInputs(); track input) {\r\n      @if (inputs[input].disabled === false) {\r\n      <mat-list-item style=\"background: var(--mdc-elevated-card-container-color, var(--mat-app-surface-container-low));\"\r\n        (click)=\"selectInputTemplate(input)\">\r\n        <img matListItemAvatar [src]=\"inputs[input].illustration\" alt=\"\">\r\n        <span matListItemTitle href=\"...\">{{ inputs[input].label}}</span>\r\n      </mat-list-item>\r\n      <mat-divider></mat-divider>\r\n      }\r\n      }\r\n    \r\n  }\r\n\r\n\r\n</mat-nav-list>","import { CommonModule } from '@angular/common';\r\nimport {   Component, inject, } from '@angular/core';\r\nimport { MatModulesModule } from '../../../../shared/modules/mat-modules.module';\r\n\r\n\r\nimport { FormsStoreService } from '../../../forms/store/forms-store.service';\r\n\r\n\r\nimport { TDynamicDataEditComponent, TDynamicDataViewComponent } from '../../..';\r\n\r\n\r\nimport { ElementEditorInnerSectionElementInterface } from 'ngx-t-forms-types';\r\nimport { combineLatest, map, take, tap } from 'rxjs';\r\n\r\n@Component({\r\n  selector: 'app-input-element-editor',\r\n  standalone: true,\r\n  imports: [\r\n    CommonModule,\r\n    MatModulesModule,\r\n    TDynamicDataEditComponent,\r\n    TDynamicDataViewComponent \r\n  ],\r\n  templateUrl: './input-element-editor.component.html',\r\n  styleUrl: './input-element-editor.component.scss',\r\n})\r\n\r\nexport class InputElementEditorComponent {\r\n\r\n  private store = inject(FormsStoreService);\r\n  inputElementEditorConfigs$ = this.store.formBuilderSelectors.inputElementEditorConfigs$ \r\n\r\n  inputInEdit$ = this.store.formBuilderSelectors.inputInEdit$\r\n\r\n  defaultInputInEdit$ = this.store.formBuilderSelectors.defaultInputInEdit$\r\n\r\n  formInputs$ = this.store.formBuilderSelectors.getAllFormInputs$\r\n\r\n  elementConfigurationChanged = (value: any, ele: ElementEditorInnerSectionElementInterface) => {\r\n    console.error('elementConfigurationChanged-------------', value, ele);\r\n    this.inputInEdit$.pipe(\r\n      take(1),\r\n      tap((input) => {\r\n        if (!input) return;\r\n      \r\n        this.store.actionsFormBuilder.elementConfigurationChanged(input.id,value, ele);\r\n      })\r\n    ).subscribe();\r\n\r\n  };\r\n  // Event handlers\r\n  clearInputInEdit = () => {\r\n    this.inputInEdit$.pipe(\r\n      take(1),\r\n      tap((input) => {\r\n        if (!input) return;\r\n        this.store.actionsFormBuilder.clearInputInEdit(\r\n        input.id\r\n        );\r\n      })\r\n    ).subscribe();\r\n  }\r\n  elementBlur = (event: any, element: ElementEditorInnerSectionElementInterface) => {\r\n    this.inputInEdit$.pipe(\r\n      take(1),\r\n      tap((input) => {\r\n        if (!input) return;\r\n        this.store.actionsFormBuilder.elementBlur(input.id, event, element);\r\n      })\r\n    ).subscribe();\r\n  }\r\n  \r\n  inputInEditValidationErrors$ = this.store.formBuilderSelectors.inputInEditValidationErrors$\r\n\r\n\r\nvm$ = combineLatest([\r\n  this.defaultInputInEdit$,\r\n  this.inputInEdit$,\r\n  this.inputElementEditorConfigs$,\r\n  this.inputInEditValidationErrors$,\r\n  this.formInputs$,\r\n  \r\n]\r\n\r\n).pipe(\r\n  map(([defaultInputInEdit, inputInEdit, inputElementEditorConfigs,\r\n\r\n    inputInEditValidationErrors,\r\n    formInputs\r\n  ]) => {\r\n    return {\r\n      defaultInputInEdit,\r\n      inputInEdit,\r\n      inputElementEditorConfigs,\r\n      inputInEditValidationErrors,\r\n      formInputs\r\n    }\r\n  })\r\n\r\n)\r\n\r\nshowDebugData() {\r\n  this.vm$.pipe(take(1)).subscribe((vm) => {\r\n    const jsonData = JSON.stringify(vm, null, 2);\r\n    const blob = new Blob([jsonData], { type: 'application/json' });\r\n    const url = window.URL.createObjectURL(blob);\r\n    const link = document.createElement('a');\r\n    link.href = url;\r\n    link.download = 'debug-data.json';\r\n    link.click();\r\n    window.URL.revokeObjectURL(url);\r\n  });\r\n}\r\n}","<mat-toolbar class=\"section-header\">\r\n    <span class=\"header\">Element configuration</span>\r\n    <span class=\"spacer\"></span>\r\n</mat-toolbar>\r\n<mat-divider></mat-divider>\r\n<ng-container *ngIf=\"(vm$ |async) as vm\">\r\n    @defer (on viewport) {\r\n    \r\n        <mat-accordion togglePosition=\"before\">\r\n            @for(section of vm.inputElementEditorConfigs.editorSections; track section.id) {\r\n            <mat-expansion-panel>\r\n                <mat-expansion-panel-header>\r\n                    <mat-panel-title>\r\n                        {{section.label}}\r\n                        <span class=\"spacer\"></span>\r\n                        @if (section.hasErrors) {\r\n                        <mat-icon color=\"warn\">error</mat-icon>\r\n                        }\r\n                        <span class=\"showItemValue\" *ngIf=\"section.showItemValue && !!(vm.inputInEdit)\">\r\n                            {{ vm.inputInEdit[section.showItemValue]}}\r\n                        </span>\r\n                        <mat-divider style=\"position: absolute; left:0px; width:100%; bottom:0px;\"></mat-divider>\r\n                    </mat-panel-title>\r\n                </mat-expansion-panel-header>\r\n        \r\n                <div style=\"margin-top: 16px;\"></div>\r\n        \r\n                <!-- Element type selector (only in first section) -->\r\n                @if($index === 0) {\r\n                <mat-nav-list>\r\n                    <mat-list-item matTooltip=\"Change input element\" (click)=\"clearInputInEdit()\">\r\n                        <img matListItemAvatar [src]=\"(vm.defaultInputInEdit)?.illustration\"\r\n                            [alt]=\"(vm.defaultInputInEdit)?.label\">\r\n                        <span matListItemTitle>{{ (vm.defaultInputInEdit)?.label}}</span>\r\n                        <span matListItemMeta>\r\n                            <mat-icon>arrow_forward_ios</mat-icon>\r\n                        </span>\r\n                    </mat-list-item>\r\n                    <mat-divider></mat-divider>\r\n                </mat-nav-list>\r\n                }\r\n        \r\n                <!-- Section elements -->\r\n                @for(element of section.elements; track element.id) {\r\n                <p style=\"margin-bottom: 16px; margin-top: 8px;\">\r\n                    @defer (on viewport) {\r\n                    <lib-t-dynamic-data-edit [editorConfig]=\"element\" [data]=\"(vm.inputInEdit)\"\r\n                        [validationErrors]=\"element.computedErrors||[]\"\r\n                        (valueChange)=\"elementConfigurationChanged($event, element)\" [formInputs]=\"(vm.formInputs)||[]\"\r\n                        (blur)=\"elementBlur($event, element)\">\r\n                    </lib-t-dynamic-data-edit>\r\n                    } @placeholder {\r\n                <div style=\"padding: 50px; display:flex; justify-content:center; align-items:center; text-align: center;\">\r\n                    <mat-spinner diameter=\"18\"></mat-spinner>\r\n                </div>\r\n                }\r\n                </p>\r\n                }\r\n            </mat-expansion-panel>\r\n            }\r\n        </mat-accordion>\r\n        } @placeholder {\r\n        <div style=\"padding: 50px; display:flex; justify-content:center; align-items:center; text-align: center;\">\r\n            <mat-spinner diameter=\"50\" />\r\n        </div>\r\n        } @error {\r\n        <mat-error>\r\n            <h1>Error loading element editor</h1>\r\n            <p>An error occurred while loading the element editor. Please try again later.</p>\r\n        </mat-error>\r\n        }\r\n\r\n\r\n\r\n\r\n\r\n<!-- Diagnostic section -->\r\n<mat-toolbar class=\"section-header\">\r\n    <span class=\"header\">Diagnostic data</span>\r\n    <span class=\"spacer\"></span>\r\n</mat-toolbar>\r\n<mat-divider></mat-divider>\r\n\r\n<mat-accordion togglePosition=\"before\">\r\n    <mat-expansion-panel>\r\n        <mat-expansion-panel-header>\r\n            <mat-panel-title>\r\n                Input json data\r\n                <span class=\"spacer\"></span>\r\n                <mat-divider style=\"position: absolute; left:0px; width:100%; bottom:0px;\"></mat-divider>\r\n            </mat-panel-title>\r\n        </mat-expansion-panel-header>\r\n        <div style=\"margin-top: 16px;\"></div>\r\n        <mat-card style=\"padding: 16px;\">\r\n            <lib-t-dynamic-data-view [data]=\"vm.inputInEdit\"></lib-t-dynamic-data-view>\r\n        </mat-card>\r\n    </mat-expansion-panel>\r\n\r\n    @if(((vm.inputInEditValidationErrors)||[]).length > 0) {\r\n    <mat-expansion-panel>\r\n        <mat-expansion-panel-header>\r\n            <mat-panel-title>\r\n                Validation Errors\r\n                <span class=\"spacer\"></span>\r\n                <mat-error>\r\n                    {{(vm.inputInEditValidationErrors).length||''}}\r\n                </mat-error>\r\n                <mat-divider style=\"position: absolute; left:0px; width:100%; bottom:0px;\"></mat-divider>\r\n            </mat-panel-title>\r\n        </mat-expansion-panel-header>\r\n        <div style=\"margin-top: 16px;\"></div>\r\n        <mat-error style=\"border: solid 1px; border-radius: 8px; padding: 16px;\">\r\n            <h1>All configuration errors:</h1>\r\n            <p>\r\n                {{(vm.inputInEditValidationErrors).length||''}} errors found. When an error is found, the input will not\r\n                be saved.\r\n            </p>\r\n            <ul>\r\n                @for(error of (vm.inputInEditValidationErrors); track error.key) {\r\n                <li>\r\n                    <strong>{{error.key}}</strong> {{error.message}}\r\n                </li>\r\n                }\r\n            </ul>\r\n        </mat-error>\r\n    </mat-expansion-panel>\r\n    }\r\n    <mat-expansion-panel>\r\n        <mat-expansion-panel-header style=\"    padding-right: 0px;\">\r\n            <mat-panel-title>\r\n                Complete Virtual Model \r\n                <span class=\"spacer\"></span>\r\n                <button mat-icon-button (click)=\"showDebugData()\">\r\n                    <mat-icon>\r\n                        troubleshoot\r\n                    </mat-icon>\r\n                </button>\r\n                <mat-divider style=\"position: absolute; left:0px; width:100%; bottom:0px;\"></mat-divider>\r\n            </mat-panel-title>\r\n        </mat-expansion-panel-header>\r\n        <div style=\"margin-top: 16px;\"></div>\r\n        <mat-card style=\"padding: 16px;\">\r\n    \r\n            <lib-t-dynamic-data-view [data]=\"({\r\n            'Default Input Template InEdit': vm.defaultInputInEdit,\r\n            'Input In Edit': vm.inputInEdit,\r\n            'Input Editor Sections': vm.inputElementEditorConfigs.editorSections,\r\n            })\"></lib-t-dynamic-data-view>\r\n       \r\n        </mat-card>\r\n    </mat-expansion-panel>\r\n\r\n</mat-accordion>\r\n</ng-container>","import { CommonModule } from '@angular/common';\r\nimport {  Component } from '@angular/core';\r\nimport { MatModulesModule } from '../../../../shared/modules/mat-modules.module';\r\n\r\nimport { DefaultElementComponent } from '../default-element/default-element.component';\r\nimport { InputElementEditorComponent } from '../input-element-editor/input-element-editor.component';\r\nimport { FormsStoreService } from '../../../forms/store/forms-store.service';\r\n\r\nimport {  Observable, take, tap} from 'rxjs';\r\nimport { DefaultInputConfig } from 'ngx-t-forms-types';\r\n\r\n@Component({\r\n  selector: 'app-input-editor',\r\n  standalone: true,\r\n  imports: [CommonModule, \r\n    MatModulesModule,\r\n     DefaultElementComponent, \r\n     InputElementEditorComponent],\r\n  templateUrl: './input-editor.component.html',\r\n  styleUrl: './input-editor.component.scss'\r\n})\r\nexport class InputEditorComponent {\r\n  defaultInputs = DefaultInputConfig\r\n\r\n  inputInEdit$ = this.store.formBuilderSelectors.inputInEdit$\r\n  \r\n  defaultInputInEdit$ =  this.store.formBuilderSelectors.defaultInputInEdit$\r\n\r\n  constructor(private store:FormsStoreService) {\r\n  }\r\n\r\n  saveInput =()=>{\r\n    this.inputInEdit$.pipe(\r\n      take(1),\r\n      tap((input)=>{\r\n        if(!input) return\r\n        this.store.actionsFormBuilder.saveInput(input.id)\r\n      })\r\n    ).subscribe()\r\n  }\r\n  closeEditor=()=> this.store.actions.setInputInEditId({\r\n    inputInEdit:null\r\n  })\r\n  get validationErrors$(): Observable<{\r\n    key: string;\r\n    message: string;\r\n  }[] | null>{\r\n   return this.store.formBuilderSelectors.inputInEditValidationErrors$\r\n  }\r\n}\r\n","<mat-card \r\n\r\nstyle=\"\r\n\r\nbackground: var(--mat-toolbar-container-background-color, var(--mat-app-surface));\r\nmargin:0px;\r\nborder:solid 1px var(--mat-divider-color, var(--mat-app-outline))\">\r\n \r\n    <mat-card-header >\r\n        <mat-card-title>\r\n            {{\r\n                !!(inputInEdit$|async)?.element\r\n                  ? \"Edit \" +      (inputInEdit$|async)?.label + \" element\"\r\n                  : \"Setup Form Element\"\r\n              }}\r\n        </mat-card-title>\r\n        <mat-card-subtitle>   {{\r\n            !!(inputInEdit$|async)?.element? \"Configure the element below\": \"Form element are components making up a form section. Types of form elements are defined by their behaviour and use case, for example a date range picker is well suited to determine duration.\"\r\n          }}</mat-card-subtitle>\r\n          <button style=\"position: absolute;right:4px\" mat-icon-button cdkDragHandle >\r\n            <mat-icon>drag_indicator</mat-icon>\r\n          </button>\r\n      </mat-card-header>\r\n    \r\n\r\n\r\n        @if(!!((inputInEdit$|async))?.element){\r\n            <app-input-element-editor \r\n            style=\"background: var(--mat-toolbar-container-background-color, var(--mat-app-surface))\">\r\n          </app-input-element-editor>\r\n        }@else{\r\n            <app-default-element  style=\"background: var(--mat-toolbar-container-background-color, var(--mat-app-surface))\"></app-default-element>\r\n        }\r\n        <br>\r\n\r\n      <br>\r\n      <mat-divider></mat-divider>\r\n     \r\n      <mat-card-actions >\r\n            <button (click)=\"closeEditor()\" class=\"\" mat-flat-button>close</button>\r\n            <span class=\"spacer\"></span>\r\n            <button *ngIf=\"!((inputInEdit$|async))?.id\" mat-flat-button \r\n            (click)=\"saveInput()\"\r\n            [disabled]=\"((validationErrors$|async)||[]).length>0\"\r\n            color=\"primary\">save new input</button>\r\n        \r\n    </mat-card-actions>\r\n</mat-card>\r\n"],"names":["i1","i2","i6","i8","i10","i11","i1.FormsStoreService","i3","i4","i5","i7"],"mappings":"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"}