ngx-t-forms 2.0.27 → 2.0.29

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

@@ -0,0 +1,147 @@
+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, _ as _isEqual, T as TDynamicDataEditComponent, b as TDynamicDataViewComponent } from './ngx-t-forms-ngx-t-forms-D9qmig6g.mjs';
+import { DefaultInputConfig } from 'ngx-t-forms-types';
+import { take, distinctUntilChanged, tap, combineLatest, map } from 'rxjs';
+import * as i7 from '@angular/material/list';
+import * as i4 from '@angular/material/divider';
+import * as i2$1 from '@angular/material/button';
+import * as i3$1 from '@angular/material/card';
+import * as i5 from '@angular/material/expansion';
+import * as i3 from '@angular/material/icon';
+import * as i7$1 from '@angular/material/progress-spinner';
+import * as i3$2 from '@angular/material/select';
+import * as i5$1 from '@angular/material/toolbar';
+import * as i4$1 from '@angular/material/tooltip';
+import * as i1 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: "21.1.5", ngImport: i0, type: DefaultElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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: i7.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }], deferBlockDependencies: [() => [i4.MatDivider, i7.MatListItem, i7.MatListItemAvatar, i7.MatListItemTitle]] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", 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$.pipe(distinctUntilChanged((a, b) => _isEqual(a, b)));
+        this.inputInEdit$ = this.store.formBuilderSelectors.inputInEdit$;
+        this.defaultInputInEdit$ = this.store.formBuilderSelectors.defaultInputInEdit$;
+        this.formInputs$ = this.store.formBuilderSelectors.getAllFormInputs$;
+        this.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: "21.1.5", ngImport: i0, type: InputElementEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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 [disabled]=\"vm.inputInEdit?.systemDefault\" matTooltip=\"Change input element\"\r\n                    (click)=\"vm.inputInEdit?.systemDefault? '':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 \r\n                [editorConfig]=\"element\" \r\n                [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    <div style=\"padding: 16px;\">\r\n        <mat-error>\r\n            <h3>Error loading element editor</h3>\r\n            <p>An error occurred while loading the element editor. Please try again later.</p>\r\n        </mat-error>\r\n    </div>\r\n\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\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\r\n                    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: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3$1.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: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i3$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i5$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: TDynamicDataViewComponent, selector: "lib-t-dynamic-data-view", inputs: ["data"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], deferBlockDependencies: [() => [i2.NgIf, i4.MatDivider, i5.MatAccordion, i5.MatExpansionPanel, i5.MatExpansionPanelHeader, i5.MatExpansionPanelTitle, i3.MatIcon, i7.MatNavList, i7.MatListItem, i7.MatListItemAvatar, i7.MatListItemTitle, i7.MatListItemMeta, i7$1.MatProgressSpinner, i4$1.MatTooltip], () => [TDynamicDataEditComponent]] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", 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 [disabled]=\"vm.inputInEdit?.systemDefault\" matTooltip=\"Change input element\"\r\n                    (click)=\"vm.inputInEdit?.systemDefault? '':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 \r\n                [editorConfig]=\"element\" \r\n                [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    <div style=\"padding: 16px;\">\r\n        <mat-error>\r\n            <h3>Error loading element editor</h3>\r\n            <p>An error occurred while loading the element editor. Please try again later.</p>\r\n        </mat-error>\r\n    </div>\r\n\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\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\r\n                    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: "21.1.5", ngImport: i0, type: InputEditorComponent, deps: [{ token: FormsStoreService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: InputEditorComponent, isStandalone: true, selector: "app-input-editor", ngImport: i0, template: "<mat-card \r\n\r\nstyle=\"\r\n\r\nbackground: var(--mat-sys-surface-container, 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-sys-surface-container, var(--mat-app-surface))\">\r\n          </app-input-element-editor>\r\n        }@else{\r\n            <app-default-element  style=\"background: var(--mat-sys-surface-container, var(--mat-app-surface))\"></app-default-element>\r\n        }\r\n        <br>\r\n\r\n      <br>\r\n      <mat-divider style=\"position: sticky;bottom: 53px;\"></mat-divider>\r\n     <mat-toolbar style=\"position: sticky;bottom: 0;\">\r\n      <span class=\"spacer\"></span>\r\n            <button (click)=\"closeEditor()\" class=\"\" mat-button>close</button>\r\n   \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     </mat-toolbar>\r\n\r\n     \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: "ngmodule", type: MatModulesModule }, { kind: "directive", type: i1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i2$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i3$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$1.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i3$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: DefaultElementComponent, selector: "app-default-element" }, { kind: "component", type: InputElementEditorComponent, selector: "app-input-element-editor" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", 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-sys-surface-container, 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-sys-surface-container, var(--mat-app-surface))\">\r\n          </app-input-element-editor>\r\n        }@else{\r\n            <app-default-element  style=\"background: var(--mat-sys-surface-container, var(--mat-app-surface))\"></app-default-element>\r\n        }\r\n        <br>\r\n\r\n      <br>\r\n      <mat-divider style=\"position: sticky;bottom: 53px;\"></mat-divider>\r\n     <mat-toolbar style=\"position: sticky;bottom: 0;\">\r\n      <span class=\"spacer\"></span>\r\n            <button (click)=\"closeEditor()\" class=\"\" mat-button>close</button>\r\n   \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     </mat-toolbar>\r\n\r\n     \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-D4xHO76K.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-t-forms-input-editor.component-D4xHO76K.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, distinctUntilChanged, map, take, tap } from 'rxjs';\r\nimport { _isEqual } from '../../../../shared/functions/isEqual';\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\r\n  inputElementEditorConfigs$ = this.store.formBuilderSelectors.inputElementEditorConfigs$.pipe(\r\n    distinctUntilChanged((a, b) => _isEqual(a, b))\r\n    \r\n  )\r\n\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 \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 [disabled]=\"vm.inputInEdit?.systemDefault\" matTooltip=\"Change input element\"\r\n                    (click)=\"vm.inputInEdit?.systemDefault? '':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 \r\n                [editorConfig]=\"element\" \r\n                [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    <div style=\"padding: 16px;\">\r\n        <mat-error>\r\n            <h3>Error loading element editor</h3>\r\n            <p>An error occurred while loading the element editor. Please try again later.</p>\r\n        </mat-error>\r\n    </div>\r\n\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\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\r\n                    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  inputInEdit$ = this.store.formBuilderSelectors.inputInEdit$\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-sys-surface-container, 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-sys-surface-container, var(--mat-app-surface))\">\r\n          </app-input-element-editor>\r\n        }@else{\r\n            <app-default-element  style=\"background: var(--mat-sys-surface-container, var(--mat-app-surface))\"></app-default-element>\r\n        }\r\n        <br>\r\n\r\n      <br>\r\n      <mat-divider style=\"position: sticky;bottom: 53px;\"></mat-divider>\r\n     <mat-toolbar style=\"position: sticky;bottom: 0;\">\r\n      <span class=\"spacer\"></span>\r\n            <button (click)=\"closeEditor()\" class=\"\" mat-button>close</button>\r\n   \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     </mat-toolbar>\r\n\r\n     \r\n</mat-card>\r\n"],"names":["i1","i2","i3","i6","i7","i8","i9","i10","i11","i1.FormsStoreService","i4","i5"],"mappings":"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"}

package/fesm2022/ngx-t-forms-map-mat-options-keys-CbdW82su.mjs

@@ -0,0 +1,124 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Output, Input, HostBinding, Optional, Self, Component } from '@angular/core';
+import { MatFormFieldControl } from '@angular/material/form-field';
+import { Subject } from 'rxjs';
+import { j as DataTreeComponent } from './ngx-t-forms-ngx-t-forms-D9qmig6g.mjs';
+import { CommonModule } from '@angular/common';
+import * as i1 from '@angular/forms';
+
+class MapMatOptionsKeys {
+    static { this.nextId = 0; }
+    set mapToData(value) {
+        this._mapToData = value;
+        console.error('mapToData changed', value);
+    }
+    ;
+    get mapToData() {
+        return this._mapToData;
+    }
+    constructor(ngControl, _elementRef) {
+        this.ngControl = ngControl;
+        this._elementRef = _elementRef;
+        // -- MatFormFieldControl Boilerplate --
+        this.stateChanges = new Subject();
+        this.id = `lib-map-mat-options-keys-${MapMatOptionsKeys.nextId++}`;
+        this.placeholder = '';
+        this.focused = false;
+        this.touched = false;
+        this.required = false;
+        // -- Inputs --
+        this.disabled = false;
+        this.errors = [];
+        this.value = null;
+        this.formInputs = [];
+        // -- Outputs --
+        this.valueChanged = new EventEmitter();
+        this.onTouched = () => { };
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    ngOnDestroy() {
+        this.stateChanges.complete();
+    }
+    // -- Getters for Template --
+    get empty() {
+        if (this.value == null)
+            return true;
+        if (typeof this.value === 'string')
+            return this.value === '';
+        return Array.isArray(this.value) && this.value.length === 0;
+    }
+    get shouldLabelFloat() {
+        return this.focused || !this.empty;
+    }
+    get errorState() {
+        const hasError = !!this.ngControl?.control?.errors ||
+            ((this.errors?.length ?? 0) > 0 && this.touched);
+        return (!this.value && !!this.required) || hasError;
+    }
+    // -- MatFormFieldControl Methods --
+    setDescribedByIds(ids) {
+        if (this._elementRef?.nativeElement) {
+            const controlElement = this._elementRef.nativeElement.querySelector('.lib-map-mat-options-keys');
+            if (controlElement) {
+                controlElement.setAttribute('aria-describedby', ids.join(' '));
+            }
+        }
+    }
+    onContainerClick(_event) {
+        this.markAsTouched();
+        this.stateChanges.next();
+    }
+    markAsTouched() {
+        if (!this.touched) {
+            this.onTouched();
+            this.touched = true;
+        }
+    }
+    // -- ControlValueAccessor --
+    writeValue(value) {
+        this.value = value;
+        this.stateChanges.next();
+    }
+    registerOnChange(_fn) {
+        // Handled by parent or ngControl usually, but good practice to have stub
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    pathChanged(path) {
+        if (!Array.isArray(path) && typeof path !== 'string')
+            return;
+        this.value = path;
+        this.valueChanged.emit(path);
+        this.stateChanges.next();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: MapMatOptionsKeys, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: MapMatOptionsKeys, isStandalone: true, selector: "lib-map-mat-options-keys", inputs: { disabled: "disabled", errors: "errors", value: "value", formInputs: "formInputs", mapToData: "mapToData" }, outputs: { valueChanged: "valueChanged" }, host: { properties: { "id": "this.id" } }, providers: [{ provide: MatFormFieldControl, useExisting: MapMatOptionsKeys }], ngImport: i0, template: "<div class=\"lib-map-mat-options-keys\">\r\n  <app-data-tree\r\n    [data]=\"mapToData\"\r\n    [value]=\"value || ''\"\r\n    [formInputs]=\"formInputs\"\r\n    (pathChanged)=\"pathChanged($event)\">\r\n  </app-data-tree>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "component", type: DataTreeComponent, selector: "app-data-tree", inputs: ["data", "value", "formInputs"], outputs: ["pathChanged"] }, { kind: "ngmodule", type: CommonModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: MapMatOptionsKeys, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-map-mat-options-keys', imports: [DataTreeComponent, CommonModule], providers: [{ provide: MatFormFieldControl, useExisting: MapMatOptionsKeys }], standalone: true, template: "<div class=\"lib-map-mat-options-keys\">\r\n  <app-data-tree\r\n    [data]=\"mapToData\"\r\n    [value]=\"value || ''\"\r\n    [formInputs]=\"formInputs\"\r\n    (pathChanged)=\"pathChanged($event)\">\r\n  </app-data-tree>\r\n</div>\r\n" }]
+        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }, { type: i0.ElementRef }], propDecorators: { id: [{
+                type: HostBinding
+            }], disabled: [{
+                type: Input
+            }], errors: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], formInputs: [{
+                type: Input
+            }], mapToData: [{
+                type: Input
+            }], valueChanged: [{
+                type: Output
+            }] } });
+
+export { MapMatOptionsKeys };
+//# sourceMappingURL=ngx-t-forms-map-mat-options-keys-CbdW82su.mjs.map

package/fesm2022/ngx-t-forms-map-mat-options-keys-CbdW82su.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-t-forms-map-mat-options-keys-CbdW82su.mjs","sources":["../../../projects/ngx-t-forms/src/lib/components/t-dynamic-data-edit/elements/map-mat-options-keys/map-mat-options-keys.ts","../../../projects/ngx-t-forms/src/lib/components/t-dynamic-data-edit/elements/map-mat-options-keys/map-mat-options-keys.html"],"sourcesContent":["import {\r\n  Component,\r\n  ElementRef,\r\n  EventEmitter,\r\n  HostBinding,\r\n  Input,\r\n  OnDestroy,\r\n  Optional,\r\n  Output,\r\n  Self,\r\n} from '@angular/core';\r\nimport { NgControl } from '@angular/forms';\r\nimport { MatFormFieldControl } from '@angular/material/form-field';\r\nimport { Subject } from 'rxjs';\r\nimport { IConfigElementError } from '../../t-dynamic-data-edit.component';\r\nimport { FormColumnInputs, TreeNode } from 'ngx-t-forms-types';\r\nimport { DataTreeComponent } from '../api-value-access-rules/elements/data-tree/data-tree.component';\r\nimport { CommonModule } from '@angular/common';\r\n\r\n@Component({\r\n  selector: 'lib-map-mat-options-keys',\r\n  imports: [DataTreeComponent,CommonModule],\r\n  providers: [{ provide: MatFormFieldControl, useExisting: MapMatOptionsKeys }],\r\n  standalone: true,\r\n  templateUrl: './map-mat-options-keys.html',\r\n  styleUrl: './map-mat-options-keys.css',\r\n})\r\nexport class MapMatOptionsKeys implements MatFormFieldControl<TreeNode[] | string | null>, OnDestroy {\r\n  static nextId = 0;\r\n  private _mapToData: unknown;\r\n  // -- MatFormFieldControl Boilerplate --\r\n  stateChanges = new Subject<void>();\r\n  @HostBinding() id = `lib-map-mat-options-keys-${MapMatOptionsKeys.nextId++}`;\r\n  placeholder = '';\r\n  focused = false;\r\n  touched = false;\r\n  controlType?: string | undefined;\r\n  autofilled?: boolean | undefined;\r\n  userAriaDescribedBy?: string | undefined;\r\n  disableAutomaticLabeling?: boolean | undefined;\r\n  required = false;\r\n\r\n  // -- Inputs --\r\n  @Input() disabled = false;\r\n  @Input() errors: IConfigElementError[] | undefined = [];\r\n  @Input() value: TreeNode[] | string | null = null;\r\n  @Input() formInputs: FormColumnInputs[] = [];\r\n  @Input() set mapToData(value: unknown){\r\n    this._mapToData = value;\r\n    console.error('mapToData changed', value);\r\n  };\r\n  get mapToData(): unknown {\r\n    return this._mapToData;\r\n  }\r\n\r\n  // -- Outputs --\r\n  @Output() valueChanged = new EventEmitter<TreeNode[] | string | null>();\r\n\r\n  constructor(\r\n    @Optional() @Self() public ngControl: NgControl,\r\n    private _elementRef: ElementRef<HTMLElement>\r\n  ) {\r\n    if (this.ngControl) {\r\n      this.ngControl.valueAccessor = this;\r\n    }\r\n  }\r\n\r\n  ngOnDestroy(): void {\r\n    this.stateChanges.complete();\r\n  }\r\n\r\n  // -- Getters for Template --\r\n  get empty(): boolean {\r\n    if (this.value == null) return true;\r\n    if (typeof this.value === 'string') return this.value === '';\r\n    return Array.isArray(this.value) && this.value.length === 0;\r\n  }\r\n\r\n  get shouldLabelFloat(): boolean {\r\n    return this.focused || !this.empty;\r\n  }\r\n\r\n  get errorState(): boolean {\r\n    const hasError =\r\n      !!this.ngControl?.control?.errors ||\r\n      ((this.errors?.length ?? 0) > 0 && this.touched);\r\n    return (!this.value && !!this.required) || hasError;\r\n  }\r\n\r\n  // -- MatFormFieldControl Methods --\r\n  setDescribedByIds(ids: string[]) {\r\n    if (this._elementRef?.nativeElement) {\r\n      const controlElement = this._elementRef.nativeElement.querySelector(\r\n        '.lib-map-mat-options-keys'\r\n      );\r\n      if (controlElement) {\r\n        controlElement.setAttribute('aria-describedby', ids.join(' '));\r\n      }\r\n    }\r\n  }\r\n\r\n  onContainerClick(_event: MouseEvent): void {\r\n    this.markAsTouched();\r\n    this.stateChanges.next();\r\n  }\r\n\r\n  onTouched = () => { };\r\n\r\n  markAsTouched() {\r\n    if (!this.touched) {\r\n      this.onTouched();\r\n      this.touched = true;\r\n    }\r\n  }\r\n\r\n  // -- ControlValueAccessor --\r\n  writeValue(value: TreeNode[] | string | null): void {\r\n    this.value = value;\r\n    this.stateChanges.next();\r\n  }\r\n\r\n  registerOnChange(_fn: (value: TreeNode[] | string | null) => void): void {\r\n    // Handled by parent or ngControl usually, but good practice to have stub\r\n  }\r\n\r\n  registerOnTouched(fn: () => void): void {\r\n    this.onTouched = fn;\r\n  }\r\n\r\n  pathChanged(path: TreeNode[] | string): void {\r\n    if (!Array.isArray(path) && typeof path !== 'string') return;\r\n    this.value = path;\r\n    this.valueChanged.emit(path);\r\n    this.stateChanges.next();\r\n  }\r\n\r\n \r\n}\r\n","<div class=\"lib-map-mat-options-keys\">\r\n  <app-data-tree\r\n    [data]=\"mapToData\"\r\n    [value]=\"value || ''\"\r\n    [formInputs]=\"formInputs\"\r\n    (pathChanged)=\"pathChanged($event)\">\r\n  </app-data-tree>\r\n</div>\r\n"],"names":[],"mappings":";;;;;;;;MA2Ba,iBAAiB,CAAA;aACrB,IAAA,CAAA,MAAM,GAAG,CAAH,CAAK;IAmBlB,IAAa,SAAS,CAAC,KAAc,EAAA;AACnC,QAAA,IAAI,CAAC,UAAU,GAAG,KAAK;AACvB,QAAA,OAAO,CAAC,KAAK,CAAC,mBAAmB,EAAE,KAAK,CAAC;IAC3C;;AACA,IAAA,IAAI,SAAS,GAAA;QACX,OAAO,IAAI,CAAC,UAAU;IACxB;IAKA,WAAA,CAC6B,SAAoB,EACvC,WAAoC,EAAA;QADjB,IAAA,CAAA,SAAS,GAAT,SAAS;QAC5B,IAAA,CAAA,WAAW,GAAX,WAAW;;AA7BrB,QAAA,IAAA,CAAA,YAAY,GAAG,IAAI,OAAO,EAAQ;AACnB,QAAA,IAAA,CAAA,EAAE,GAAG,CAAA,yBAAA,EAA4B,iBAAiB,CAAC,MAAM,EAAE,EAAE;QAC5E,IAAA,CAAA,WAAW,GAAG,EAAE;QAChB,IAAA,CAAA,OAAO,GAAG,KAAK;QACf,IAAA,CAAA,OAAO,GAAG,KAAK;QAKf,IAAA,CAAA,QAAQ,GAAG,KAAK;;QAGP,IAAA,CAAA,QAAQ,GAAG,KAAK;QAChB,IAAA,CAAA,MAAM,GAAsC,EAAE;QAC9C,IAAA,CAAA,KAAK,GAA+B,IAAI;QACxC,IAAA,CAAA,UAAU,GAAuB,EAAE;;AAUlC,QAAA,IAAA,CAAA,YAAY,GAAG,IAAI,YAAY,EAA8B;AAkDvE,QAAA,IAAA,CAAA,SAAS,GAAG,MAAK,EAAG,CAAC;AA5CnB,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;AAClB,YAAA,IAAI,CAAC,SAAS,CAAC,aAAa,GAAG,IAAI;QACrC;IACF;IAEA,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE;IAC9B;;AAGA,IAAA,IAAI,KAAK,GAAA;AACP,QAAA,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI;AAAE,YAAA,OAAO,IAAI;AACnC,QAAA,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ;AAAE,YAAA,OAAO,IAAI,CAAC,KAAK,KAAK,EAAE;AAC5D,QAAA,OAAO,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC;IAC7D;AAEA,IAAA,IAAI,gBAAgB,GAAA;QAClB,OAAO,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,KAAK;IACpC;AAEA,IAAA,IAAI,UAAU,GAAA;QACZ,MAAM,QAAQ,GACZ,CAAC,CAAC,IAAI,CAAC,SAAS,EAAE,OAAO,EAAE,MAAM;AACjC,aAAC,CAAC,IAAI,CAAC,MAAM,EAAE,MAAM,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC;AAClD,QAAA,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,IAAI,CAAC,QAAQ,KAAK,QAAQ;IACrD;;AAGA,IAAA,iBAAiB,CAAC,GAAa,EAAA;AAC7B,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE,aAAa,EAAE;AACnC,YAAA,MAAM,cAAc,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,aAAa,CACjE,2BAA2B,CAC5B;YACD,IAAI,cAAc,EAAE;AAClB,gBAAA,cAAc,CAAC,YAAY,CAAC,kBAAkB,EAAE,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAChE;QACF;IACF;AAEA,IAAA,gBAAgB,CAAC,MAAkB,EAAA;QACjC,IAAI,CAAC,aAAa,EAAE;AACpB,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE;IAC1B;IAIA,aAAa,GAAA;AACX,QAAA,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;YACjB,IAAI,CAAC,SAAS,EAAE;AAChB,YAAA,IAAI,CAAC,OAAO,GAAG,IAAI;QACrB;IACF;;AAGA,IAAA,UAAU,CAAC,KAAiC,EAAA;AAC1C,QAAA,IAAI,CAAC,KAAK,GAAG,KAAK;AAClB,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE;IAC1B;AAEA,IAAA,gBAAgB,CAAC,GAAgD,EAAA;;IAEjE;AAEA,IAAA,iBAAiB,CAAC,EAAc,EAAA;AAC9B,QAAA,IAAI,CAAC,SAAS,GAAG,EAAE;IACrB;AAEA,IAAA,WAAW,CAAC,IAAyB,EAAA;QACnC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,OAAO,IAAI,KAAK,QAAQ;YAAE;AACtD,QAAA,IAAI,CAAC,KAAK,GAAG,IAAI;AACjB,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;AAC5B,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE;IAC1B;8GA3GW,iBAAiB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,IAAA,EAAA,IAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAjB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,mRALjB,CAAC,EAAE,OAAO,EAAE,mBAAmB,EAAE,WAAW,EAAE,iBAAiB,EAAE,CAAC,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECtB/E,8OAQA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDaY,iBAAiB,4HAAC,YAAY,EAAA,CAAA,EAAA,CAAA,CAAA;;2FAM7B,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAR7B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,0BAA0B,WAC3B,CAAC,iBAAiB,EAAC,YAAY,CAAC,aAC9B,CAAC,EAAE,OAAO,EAAE,mBAAmB,EAAE,WAAW,mBAAmB,EAAE,CAAC,cACjE,IAAI,EAAA,QAAA,EAAA,8OAAA,EAAA;;0BAoCb;;0BAAY;;sBA3Bd;;sBAWA;;sBACA;;sBACA;;sBACA;;sBACA;;sBASA;;;;;"}

package/fesm2022/{ngx-t-forms-mat-chip-list-editor.component-dIY3BX1u.mjs → ngx-t-forms-mat-chip-list-editor.component-DmTyO9Wi.mjs}

@@ -1,15 +1,15 @@
 import * as i0 from '@angular/core';
 import { EventEmitter, Output, Input, HostBinding, Optional, Self, Component } from '@angular/core';
-import { M as MatModulesModule, S as SearchListPipe } from './ngx-t-forms-ngx-t-forms-CD9InaXz.mjs';
+import { M as MatModulesModule, S as SearchListPipe } from './ngx-t-forms-ngx-t-forms-D9qmig6g.mjs';
 import { CommonModule } from '@angular/common';
 import { MatFormFieldControl } from '@angular/material/form-field';
 import { Subject } from 'rxjs';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i2 from '@angular/material/autocomplete';
-import * as i5 from '@angular/material/chips';
-import * as i2$1 from '@angular/material/icon';
-import * as i2$2 from '@angular/material/select';
+import * as i4 from '@angular/material/chips';
+import * as i3 from '@angular/material/icon';
+import * as i3$1 from '@angular/material/select';
 import * as i13 from '@angular/material/input';
 
 class MatChipListEditorComponent {
@@ -56,7 +56,6 @@ class MatChipListEditorComponent {
         this.stateChanges.next();
     }
     markAsTouched() {
-        console.log('markAsTouched');
         if (!this.touched) {
             this.onTouched();
             this.touched = true;
@@ -68,13 +67,13 @@ class MatChipListEditorComponent {
     get optionGroups() {
         return [...new Set((this.options || []).map(op => op.group))].filter(g => !!g && g.trim() !== '');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MatChipListEditorComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: MatChipListEditorComponent, isStandalone: true, selector: "lib-mat-chip-list-editor", inputs: { disabled: "disabled", multiple: "multiple", errors: "errors", value: "value", required: "required", options: "options" }, outputs: { valueChange: "valueChange" }, host: { properties: { "id": "this.id" } }, providers: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: MatChipListEditorComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: MatChipListEditorComponent, isStandalone: true, selector: "lib-mat-chip-list-editor", inputs: { disabled: "disabled", multiple: "multiple", errors: "errors", value: "value", required: "required", options: "options" }, outputs: { valueChange: "valueChange" }, host: { properties: { "id": "this.id" } }, providers: [{
                 provide: MatFormFieldControl,
                 useExisting: MatChipListEditorComponent
-            }], ngImport: i0, template: "<!-- add search -->\r\n<div style=\"display: flex;    flex-direction: column;\" >\r\n    <div>\r\n        <mat-form-field subscriptSizing=\"dynamic\" class=\"search-field\">\r\n            <mat-icon matSuffix>search</mat-icon>\r\n            <input matInput [(ngModel)]=\"listSearchKey\"\r\n            required=\"false\"\r\n            [matAutocomplete]=\"auto\" placeholder=\"Search options\">\r\n            <mat-autocomplete \r\n             autoActiveFirstOption\r\n                #auto=\"matAutocomplete\">\r\n                @for (option of optionGroups ; track option) {\r\n                <mat-option \r\n                (click)=\"listSearchKey = option\"\r\n                [value]=\"option\">{{option}}</mat-option>\r\n                }\r\n            </mat-autocomplete>\r\n        </mat-form-field>\r\n    </div>\r\n    <div>\r\n        <mat-chip-listbox \r\n        [multiple]=\"multiple\"\r\n        [value]=\"value\" [disabled]=\"disabled\" (change)=\"valueListChanged($event)\" aria-l\r\n            abel=\"Chip select options\">\r\n            @for(option of (options||[])|searchList:listSearchKey;track option.value){\r\n            <mat-chip-option [value]=\"option.value\">{{option.label}}</mat-chip-option>\r\n            }\r\n        </mat-chip-listbox>\r\n    </div>\r\n</div>", styles: ["mat-chip-listbox{max-height:500px;overflow-y:auto}.search-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i5.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i5.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i13.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: SearchListPipe, name: "searchList" }] }); }
+            }], ngImport: i0, template: "<!-- add search -->\r\n<div style=\"display: flex;    flex-direction: column;\" >\r\n    <div>\r\n        <mat-form-field subscriptSizing=\"dynamic\" class=\"search-field\">\r\n            <mat-icon matSuffix>search</mat-icon>\r\n            <input matInput [(ngModel)]=\"listSearchKey\"\r\n            required=\"false\"\r\n            [matAutocomplete]=\"auto\" placeholder=\"Search options\">\r\n            <mat-autocomplete \r\n             autoActiveFirstOption\r\n                #auto=\"matAutocomplete\">\r\n                @for (option of optionGroups ; track option) {\r\n                <mat-option \r\n                (click)=\"listSearchKey = option\"\r\n                [value]=\"option\">{{option}}</mat-option>\r\n                }\r\n            </mat-autocomplete>\r\n        </mat-form-field>\r\n    </div>\r\n    <div>\r\n        <mat-chip-listbox \r\n        [multiple]=\"multiple\"\r\n        [value]=\"value\" [disabled]=\"disabled\" (change)=\"valueListChanged($event)\" aria-l\r\n            abel=\"Chip select options\">\r\n            @for(option of (options||[])|searchList:listSearchKey;track option.value){\r\n            <mat-chip-option [value]=\"option.value\">{{option.label}}</mat-chip-option>\r\n            }\r\n        </mat-chip-listbox>\r\n    </div>\r\n</div>", styles: ["mat-chip-listbox{max-height:500px;overflow-y:auto}.search-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i4.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i4.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i13.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: SearchListPipe, name: "searchList" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MatChipListEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: MatChipListEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-mat-chip-list-editor', standalone: true, imports: [MatModulesModule, CommonModule, FormsModule, SearchListPipe], providers: [{
                             provide: MatFormFieldControl,
@@ -103,4 +102,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
             }] } });
 
 export { MatChipListEditorComponent };
-//# sourceMappingURL=ngx-t-forms-mat-chip-list-editor.component-dIY3BX1u.mjs.map
+//# sourceMappingURL=ngx-t-forms-mat-chip-list-editor.component-DmTyO9Wi.mjs.map

package/fesm2022/ngx-t-forms-mat-chip-list-editor.component-DmTyO9Wi.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-t-forms-mat-chip-list-editor.component-DmTyO9Wi.mjs","sources":["../../../projects/ngx-t-forms/src/lib/components/t-dynamic-data-edit/elements/mat-chip-list-editor/mat-chip-list-editor.component.ts","../../../projects/ngx-t-forms/src/lib/components/t-dynamic-data-edit/elements/mat-chip-list-editor/mat-chip-list-editor.component.html"],"sourcesContent":["import { Component, ElementRef, EventEmitter, HostBinding, Input, Optional, Output, Self } from '@angular/core';\r\nimport { MatModulesModule } from '../../../../shared/modules/mat-modules.module';\r\nimport { CommonModule } from '@angular/common';\r\nimport { MatFormFieldControl } from '@angular/material/form-field';\r\nimport { Subject } from 'rxjs';\r\nimport { FormsModule, NgControl } from '@angular/forms';\r\nimport { IConfigElementError } from '../../t-dynamic-data-edit.component';\r\nimport { MatChipListboxChange } from '@angular/material/chips';\r\nimport { SearchListPipe } from '../../../../shared/pipes/list-search.pipe';\r\n\r\n@Component({\r\n  selector: 'lib-mat-chip-list-editor',\r\n  standalone: true,\r\n  imports: [MatModulesModule, CommonModule, FormsModule, SearchListPipe],\r\n  templateUrl: './mat-chip-list-editor.component.html',\r\n  styleUrl: './mat-chip-list-editor.component.css',\r\n  providers: [{\r\n    provide: MatFormFieldControl,\r\n    useExisting: MatChipListEditorComponent\r\n  }],\r\n})\r\nexport class MatChipListEditorComponent implements MatFormFieldControl<{\r\n  label: string,\r\n  value: any,\r\n  group?: string\r\n}[]> {\r\n\r\n  listSearchKey: string = '';\r\n  static nextId = 0;\r\n  stateChanges = new Subject<void>();\r\n\r\n  @HostBinding() id = `lib-mat-chip-list-editor-${MatChipListEditorComponent.nextId++}`;\r\n\r\n  placeholder: string = ''\r\n  constructor(@Optional() @Self() public ngControl: NgControl, private _elementRef: ElementRef<HTMLElement>,) { }\r\n  focused: boolean = false;\r\n  get empty() {\r\n    return !this.value\r\n  }\r\n  get shouldLabelFloat() {\r\n    return this.focused || !this.empty;\r\n  }\r\n\r\n  @Input() disabled: boolean = false;\r\n  @Input() multiple:boolean = false\r\n  get errorState(): boolean {\r\n    const hasError = !!this.ngControl?.control?.errors || (this.errors || []).length > 0 && this.touched\r\n    return !this.value && !!this.required || hasError\r\n  }\r\n\r\n  controlType?: string | undefined;\r\n  autofilled?: boolean | undefined;\r\n  userAriaDescribedBy?: string | undefined;\r\n  disableAutomaticLabeling?: boolean | undefined;\r\n  setDescribedByIds(ids: string[]) {\r\n    // Ensure the component view is initialized\r\n    if (this._elementRef && this._elementRef.nativeElement) {\r\n      const controlElement = this._elementRef.nativeElement.querySelector('.lib-mat-chip-list-editor');\r\n      // Check if the controlElement exists before attempting to set its attribute\r\n      if (controlElement) {\r\n        controlElement.setAttribute('aria-describedby', ids.join(' '));\r\n      }\r\n    }\r\n  }\r\n  onContainerClick(event: MouseEvent): void {\r\n    this.markAsTouched();\r\n    this.stateChanges.next();\r\n  }\r\n\r\n  touched: boolean = false;\r\n  onTouched = () => { };\r\n  markAsTouched() {\r\n    if (!this.touched) {\r\n      this.onTouched();\r\n      this.touched = true;\r\n    }\r\n  }\r\n\r\n\r\n\r\n\r\n  @Input() errors: IConfigElementError[] | undefined = [];\r\n  @Input() value: any;\r\n  @Input() required: boolean = false;\r\n  @Input() options: {\r\n    label: string,\r\n    value: any,\r\n    group?: string\r\n  }[] | undefined = []\r\n  @Output() valueChange = new EventEmitter<any>();\r\n\r\n  valueListChanged($event: MatChipListboxChange) {\r\n    this.valueChange.emit($event.value);\r\n  }\r\n\r\n  get optionGroups():string[] {\r\n    return [... new Set((this.options || []).map(op => op.group))].filter(g => !!g && g.trim() !== '') as string[];\r\n  }\r\n\r\n\r\n}\r\n","<!-- add search -->\r\n<div style=\"display: flex;    flex-direction: column;\" >\r\n    <div>\r\n        <mat-form-field subscriptSizing=\"dynamic\" class=\"search-field\">\r\n            <mat-icon matSuffix>search</mat-icon>\r\n            <input matInput [(ngModel)]=\"listSearchKey\"\r\n            required=\"false\"\r\n            [matAutocomplete]=\"auto\" placeholder=\"Search options\">\r\n            <mat-autocomplete \r\n             autoActiveFirstOption\r\n                #auto=\"matAutocomplete\">\r\n                @for (option of optionGroups ; track option) {\r\n                <mat-option \r\n                (click)=\"listSearchKey = option\"\r\n                [value]=\"option\">{{option}}</mat-option>\r\n                }\r\n            </mat-autocomplete>\r\n        </mat-form-field>\r\n    </div>\r\n    <div>\r\n        <mat-chip-listbox \r\n        [multiple]=\"multiple\"\r\n        [value]=\"value\" [disabled]=\"disabled\" (change)=\"valueListChanged($event)\" aria-l\r\n            abel=\"Chip select options\">\r\n            @for(option of (options||[])|searchList:listSearchKey;track option.value){\r\n            <mat-chip-option [value]=\"option.value\">{{option.label}}</mat-chip-option>\r\n            }\r\n        </mat-chip-listbox>\r\n    </div>\r\n</div>"],"names":[],"mappings":"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"}

package/fesm2022/{ngx-t-forms-mat-slider-editor.component-yMRCg8fo.mjs → ngx-t-forms-mat-slider-editor.component-DZ4TenrI.mjs}

@@ -3,7 +3,7 @@ import { EventEmitter, Output, Input, HostBinding, Optional, Self, Component } f
 import { CommonModule } from '@angular/common';
 import { MatFormFieldControl } from '@angular/material/form-field';
 import { Subject } from 'rxjs';
-import { M as MatModulesModule } from './ngx-t-forms-ngx-t-forms-CD9InaXz.mjs';
+import { M as MatModulesModule } from './ngx-t-forms-ngx-t-forms-D9qmig6g.mjs';
 import * as i1 from '@angular/forms';
 import * as i2 from '@angular/material/slider';
 
@@ -55,7 +55,6 @@ class MatSliderEditorComponent {
         this.stateChanges.next();
     }
     markAsTouched() {
-        console.log('markAsTouched');
         if (!this.touched) {
             this.onTouched();
             this.touched = true;
@@ -70,10 +69,10 @@ class MatSliderEditorComponent {
     valueChangedSlider(event) {
         this.valueChange.emit(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MatSliderEditorComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: MatSliderEditorComponent, isStandalone: true, selector: "lib-mat-slider-editor", inputs: { disabled: "disabled", required: "required", errors: "errors", label: "label", min: "min", max: "max", step: "step", value: "value", format: "format", formatLabel: "formatLabel" }, outputs: { valueChange: "valueChange" }, host: { properties: { "id": "this.id" } }, providers: [{ provide: MatFormFieldControl, useExisting: MatSliderEditorComponent }], ngImport: i0, template: "\r\n<section class=\"range\">\r\n    <span> {{min || 0 }}</span>\r\n<mat-slider   \r\n[disabled]=\"disabled\"    \r\nstyle=\"width: 100%;\" \r\n showTickMarks discrete [displayWith]=\"format || formatLabel\"\r\n[max]=\"max || 100\" min=\"min || 0\"\r\n[step]=\"step || 1\" tickInterval=\"step || 1\">\r\n<input (input)=\"valueChangedSlider($event)\" [value]=\"value\" matSliderThumb>\r\n</mat-slider>\r\n\r\n<span> {{ max || 100 }}</span>\r\n</section>\r\n", styles: [".range{display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i2.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "ngmodule", type: CommonModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: MatSliderEditorComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: MatSliderEditorComponent, isStandalone: true, selector: "lib-mat-slider-editor", inputs: { disabled: "disabled", required: "required", errors: "errors", label: "label", min: "min", max: "max", step: "step", value: "value", format: "format", formatLabel: "formatLabel" }, outputs: { valueChange: "valueChange" }, host: { properties: { "id": "this.id" } }, providers: [{ provide: MatFormFieldControl, useExisting: MatSliderEditorComponent }], ngImport: i0, template: "\r\n<section class=\"range\">\r\n    <span> {{min || 0 }}</span>\r\n<mat-slider   \r\n[disabled]=\"disabled\"    \r\nstyle=\"width: 100%;\" \r\n showTickMarks discrete [displayWith]=\"format || formatLabel\"\r\n[max]=\"max || 100\" min=\"min || 0\"\r\n[step]=\"step || 1\" tickInterval=\"step || 1\">\r\n<input (input)=\"valueChangedSlider($event)\" [value]=\"value\" matSliderThumb>\r\n</mat-slider>\r\n\r\n<span> {{ max || 100 }}</span>\r\n</section>\r\n", styles: [".range{display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i2.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MatSliderEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: MatSliderEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-mat-slider-editor', standalone: true, providers: [{ provide: MatFormFieldControl, useExisting: MatSliderEditorComponent }], imports: [MatModulesModule, CommonModule], template: "\r\n<section class=\"range\">\r\n    <span> {{min || 0 }}</span>\r\n<mat-slider   \r\n[disabled]=\"disabled\"    \r\nstyle=\"width: 100%;\" \r\n showTickMarks discrete [displayWith]=\"format || formatLabel\"\r\n[max]=\"max || 100\" min=\"min || 0\"\r\n[step]=\"step || 1\" tickInterval=\"step || 1\">\r\n<input (input)=\"valueChangedSlider($event)\" [value]=\"value\" matSliderThumb>\r\n</mat-slider>\r\n\r\n<span> {{ max || 100 }}</span>\r\n</section>\r\n", styles: [".range{display:flex;align-items:center}\n"] }]
         }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
@@ -107,4 +106,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
             }] } });
 
 export { MatSliderEditorComponent };
-//# sourceMappingURL=ngx-t-forms-mat-slider-editor.component-yMRCg8fo.mjs.map
+//# sourceMappingURL=ngx-t-forms-mat-slider-editor.component-DZ4TenrI.mjs.map

package/fesm2022/ngx-t-forms-mat-slider-editor.component-DZ4TenrI.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-t-forms-mat-slider-editor.component-DZ4TenrI.mjs","sources":["../../../projects/ngx-t-forms/src/lib/components/t-dynamic-data-edit/elements/mat-slider-editor/mat-slider-editor.component.ts","../../../projects/ngx-t-forms/src/lib/components/t-dynamic-data-edit/elements/mat-slider-editor/mat-slider-editor.component.html"],"sourcesContent":["import { Component, ElementRef, EventEmitter, HostBinding, Input, Optional, Output, Self } from '@angular/core';\r\n\r\nimport { CommonModule } from '@angular/common';\r\nimport { MatFormFieldControl } from '@angular/material/form-field';\r\nimport { Subject } from 'rxjs';\r\nimport { NgControl } from '@angular/forms';\r\nimport { MatModulesModule } from '../../../../shared/modules/mat-modules.module';\r\nimport { IConfigElementError } from '../../t-dynamic-data-edit.component';\r\n\r\n@Component({\r\n  selector: 'lib-mat-slider-editor',\r\n  standalone: true,\r\n  providers: [{ provide: MatFormFieldControl, useExisting: MatSliderEditorComponent }],\r\n  imports: [MatModulesModule, CommonModule],\r\n  templateUrl: './mat-slider-editor.component.html',\r\n  styleUrl: './mat-slider-editor.component.css'\r\n})\r\nexport class MatSliderEditorComponent implements MatFormFieldControl<number> {\r\n\r\n  static nextId = 0;\r\n  stateChanges = new Subject<void>();\r\n\r\n  @HostBinding() id = `lib-mat-slider-editor-${MatSliderEditorComponent.nextId++}`;\r\n\r\n  placeholder: string = ''\r\n  constructor(@Optional() @Self() public ngControl: NgControl, private _elementRef: ElementRef<HTMLElement>,) { }\r\n  focused: boolean = false;\r\n  get empty() {\r\n    return !this.value\r\n  }\r\n  get shouldLabelFloat() {\r\n    return this.focused || !this.empty;\r\n  }\r\n\r\n  @Input() disabled: boolean = false;\r\n  get errorState(): boolean {\r\n    const hasError = !!this.ngControl?.control?.errors || (this.errors||[]).length > 0 && this.touched\r\n    \r\n    return !this.value && !!this.required || hasError\r\n  }\r\n\r\n  controlType?: string | undefined;\r\n  autofilled?: boolean | undefined;\r\n  userAriaDescribedBy?: string | undefined;\r\n  disableAutomaticLabeling?: boolean | undefined;\r\n  setDescribedByIds(ids: string[]) {\r\n    // Ensure the component view is initialized\r\n    if (this._elementRef && this._elementRef.nativeElement) {\r\n      const controlElement = this._elementRef.nativeElement.querySelector('.lib-mat-slider-editor');\r\n      // Check if the controlElement exists before attempting to set its attribute\r\n      if (controlElement) {\r\n        controlElement.setAttribute('aria-describedby', ids.join(' '));\r\n      }\r\n    }\r\n  }\r\n  onContainerClick(event: MouseEvent): void {\r\n    this.markAsTouched();\r\n    this.stateChanges.next();\r\n  }\r\n\r\n  touched: boolean = false;\r\n  onTouched = () => { };\r\n  markAsTouched() {\r\n    if (!this.touched) {\r\n      this.onTouched();\r\n      this.touched = true;\r\n    }\r\n  }\r\n\r\n\r\n  _required: boolean = false;\r\n  @Input() set required(value: boolean) {\r\n    this._required = value;\r\n  }\r\n  get required(): boolean {\r\n    return this._required;\r\n  }\r\n  @Input() errors:IConfigElementError[] |undefined = [];\r\n  @Input() label: string = '';\r\n  @Input() min: number = 0;\r\n  @Input() max: number = 100;\r\n  @Input() step: number = 1;\r\n  @Input() value: number = 0;\r\n  @Input() format?: (value: any) => any = (value: any) => value;\r\n  @Input() formatLabel: (value: any) => any = (value: any) => value;\r\n  @Output() valueChange = new EventEmitter<number>();\r\n  valueChangedSlider(event: any) {\r\n    this.valueChange.emit(event);\r\n  }\r\n\r\n}\r\n","\r\n<section class=\"range\">\r\n    <span> {{min || 0 }}</span>\r\n<mat-slider   \r\n[disabled]=\"disabled\"    \r\nstyle=\"width: 100%;\" \r\n showTickMarks discrete [displayWith]=\"format || formatLabel\"\r\n[max]=\"max || 100\" min=\"min || 0\"\r\n[step]=\"step || 1\" tickInterval=\"step || 1\">\r\n<input (input)=\"valueChangedSlider($event)\" [value]=\"value\" matSliderThumb>\r\n</mat-slider>\r\n\r\n<span> {{ max || 100 }}</span>\r\n</section>\r\n"],"names":[],"mappings":"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"}