ngx-t-forms 2.0.30 → 2.0.31

package/fesm2022/ngx-t-forms-section-report.component-BxOhR6C0.mjs

@@ -0,0 +1,98 @@
+import * as i0 from '@angular/core';
+import { input, inject, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from '@angular/material/chips';
+import { MatChipsModule } from '@angular/material/chips';
+import * as i3 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i10 from '@angular/material/sort';
+import { MatSortModule } from '@angular/material/sort';
+import * as i5 from '@angular/material/table';
+import { MatTableModule } from '@angular/material/table';
+import * as i5$1 from '@angular/material/toolbar';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { F as FormsStoreService } from './ngx-t-forms-ngx-t-forms-u_kigDid.mjs';
+import { ElementTypes, validateFormSlide } from 'ngx-t-forms-types';
+
+class SectionReportComponent {
+    constructor() {
+        this.sectionId = input.required(...(ngDevMode ? [{ debugName: "sectionId" }] : /* istanbul ignore next */ []));
+        this.displayedColumns = ['icon', 'name', 'description', 'value'];
+        this.#store = inject(FormsStoreService);
+        this.selectFormInEdit = this.#store.signalSelectors.selectFormInEdit;
+        this.section = computed(() => {
+            const form = this.selectFormInEdit();
+            return (form?.form.slides.find((slide) => slide.sectionId === this.sectionId()) ||
+                null);
+        }, ...(ngDevMode ? [{ debugName: "section" }] : /* istanbul ignore next */ []));
+        this.sectionData = computed(() => this.#buildMetrics(this.section()), ...(ngDevMode ? [{ debugName: "sectionData" }] : /* istanbul ignore next */ []));
+    }
+    #store;
+    #buildMetrics(data) {
+        if (!data)
+            return [];
+        const sectionId = this.sectionId();
+        const allInputs = data.columns
+            .flatMap((column) => column.element === ElementTypes.MultipleInput
+            ? [...(column?.formInputs || []), column]
+            : [column])
+            .filter((input) => input.sectionId === sectionId);
+        const calculatedInputs = allInputs.filter((input) => input.calculatedFieldRules?.formula && input.calculatedFieldRules?.formula !== '');
+        const inputsWithManualValidations = allInputs.filter((input) => input.validators?.some((validator) => Object.keys(validator).length > 0));
+        const allSectionInputConfigErrors = validateFormSlide(data);
+        return [
+            {
+                icon: 'input',
+                name: 'Total Inputs',
+                value: Object.keys(allInputs || {}).length,
+                color: '#2196f3',
+                description: 'Total number of form inputs in section',
+                trend: 'stable',
+                category: 'inputs',
+            },
+            {
+                icon: 'calculate',
+                name: 'Calculated Fields',
+                value: calculatedInputs.length,
+                details: calculatedInputs,
+                color: '#4caf50',
+                description: 'Fields with calculation formulas',
+                trend: 'monitoring',
+                category: 'calculations',
+            },
+            {
+                icon: 'rule',
+                name: 'Manual Validations',
+                value: inputsWithManualValidations.length,
+                details: inputsWithManualValidations,
+                color: '#ff9800',
+                description: 'Fields with custom validation rules',
+                trend: 'warning',
+                category: 'validation',
+            },
+            {
+                icon: 'bug_report',
+                name: 'Config Errors',
+                value: allSectionInputConfigErrors.length,
+                color: '#f44336',
+                description: 'Configuration errors detected',
+                trend: 'critical',
+                category: 'errors',
+            },
+        ];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: SectionReportComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: SectionReportComponent, isStandalone: true, selector: "lib-section-report", inputs: { sectionId: { classPropertyName: "sectionId", publicName: "sectionId", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (section()) {\r\n  <div class=\"report-container\">\r\n    <mat-toolbar style=\"padding: 0px;\">\r\n      <mat-icon class=\"section-icon\">analytics</mat-icon>\r\n      <small>\r\n        Form Section Diagnostic Report\r\n      </small>\r\n\r\n      <span class=\"spacer\"></span>\r\n      <div class=\"status-chips\">\r\n        <div class=\"status-chip\">\r\n          <mat-icon>check_circle</mat-icon>\r\n        </div>\r\n        @if (section()?.sectionIsSeen) {\r\n          <div class=\"status-chip initialized\">\r\n            <mat-icon>task_alt</mat-icon>\r\n            Initialized\r\n          </div>\r\n        }\r\n      </div>\r\n    </mat-toolbar>\r\n\r\n    <table mat-table [dataSource]=\"(sectionData()) || []\" matSort class=\"w-full\">\r\n      <!-- Icon Column -->\r\n      <ng-container matColumnDef=\"icon\">\r\n        <th mat-header-cell *matHeaderCellDef></th>\r\n        <td mat-cell *matCellDef=\"let row\">\r\n          <mat-icon [style.color]=\"row.color\">{{ row.icon }}</mat-icon>\r\n        </td>\r\n      </ng-container>\r\n\r\n      <!-- description Column -->\r\n      <ng-container matColumnDef=\"description\">\r\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>description</th>\r\n        <td mat-cell *matCellDef=\"let row\">{{ row.description }}</td>\r\n      </ng-container>\r\n\r\n      <!-- Name Column -->\r\n      <ng-container matColumnDef=\"name\">\r\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Type</th>\r\n        <td mat-cell *matCellDef=\"let row\">{{ row.name }}</td>\r\n      </ng-container>\r\n\r\n      <!-- Value Column -->\r\n      <ng-container matColumnDef=\"value\">\r\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Value</th>\r\n        <td mat-cell *matCellDef=\"let row\">{{ row.value }}</td>\r\n      </ng-container>\r\n\r\n      <!-- Details Column -->\r\n      <ng-container matColumnDef=\"details\">\r\n        <th mat-header-cell *matHeaderCellDef>Details</th>\r\n        <td mat-cell *matCellDef=\"let row\">\r\n          @if (row.details?.length) {\r\n            <mat-chip-set>\r\n              @for (detail of row.details; track $index) {\r\n                <mat-chip class=\"detail-chip\">{{ detail }}</mat-chip>\r\n              }\r\n            </mat-chip-set>\r\n          }\r\n        </td>\r\n      </ng-container>\r\n\r\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n    </table>\r\n  </div>\r\n}\r\n", styles: [".report-container{padding:20px;display:flex;flex-direction:column;gap:20px;background:var(--mat-sys-surface-container, var(--mat-app-surface))}.header-card{background:var(--lib-forms-surface)}.title-section{display:flex;align-items:center;gap:12px}.section-icon{color:var(--sem-info);font-size:1.75em;width:28px;height:28px;margin-right:8px}h1{margin:0;font-size:1.25em;font-weight:500}.subtitle{margin:4px 0 0;color:var(--lib-forms-on-surface-variant);font-size:.875em}.status-chips{display:flex;gap:8px;margin-left:auto}.status-chip{display:flex;align-items:center;gap:4px;padding:4px 12px;border-radius:16px;background:var(--sem-success);color:var(--lib-forms-on-primary);font-size:.875em}.status-chip.invalid{background:var(--sem-error)}.status-chip.initialized{background:var(--sem-info)}.status-chip mat-icon{font-size:1.125em;width:18px;height:18px}.filter-field{width:100%;margin-bottom:16px}.detail-chip{font-size:.75em;height:24px}mat-card-content{padding:16px}\n"], dependencies: [{ kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i1.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i10.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i10.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i5$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: SectionReportComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-section-report', imports: [
+                        MatChipsModule,
+                        MatIconModule,
+                        MatSortModule,
+                        MatTableModule,
+                        MatToolbarModule,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (section()) {\r\n  <div class=\"report-container\">\r\n    <mat-toolbar style=\"padding: 0px;\">\r\n      <mat-icon class=\"section-icon\">analytics</mat-icon>\r\n      <small>\r\n        Form Section Diagnostic Report\r\n      </small>\r\n\r\n      <span class=\"spacer\"></span>\r\n      <div class=\"status-chips\">\r\n        <div class=\"status-chip\">\r\n          <mat-icon>check_circle</mat-icon>\r\n        </div>\r\n        @if (section()?.sectionIsSeen) {\r\n          <div class=\"status-chip initialized\">\r\n            <mat-icon>task_alt</mat-icon>\r\n            Initialized\r\n          </div>\r\n        }\r\n      </div>\r\n    </mat-toolbar>\r\n\r\n    <table mat-table [dataSource]=\"(sectionData()) || []\" matSort class=\"w-full\">\r\n      <!-- Icon Column -->\r\n      <ng-container matColumnDef=\"icon\">\r\n        <th mat-header-cell *matHeaderCellDef></th>\r\n        <td mat-cell *matCellDef=\"let row\">\r\n          <mat-icon [style.color]=\"row.color\">{{ row.icon }}</mat-icon>\r\n        </td>\r\n      </ng-container>\r\n\r\n      <!-- description Column -->\r\n      <ng-container matColumnDef=\"description\">\r\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>description</th>\r\n        <td mat-cell *matCellDef=\"let row\">{{ row.description }}</td>\r\n      </ng-container>\r\n\r\n      <!-- Name Column -->\r\n      <ng-container matColumnDef=\"name\">\r\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Type</th>\r\n        <td mat-cell *matCellDef=\"let row\">{{ row.name }}</td>\r\n      </ng-container>\r\n\r\n      <!-- Value Column -->\r\n      <ng-container matColumnDef=\"value\">\r\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Value</th>\r\n        <td mat-cell *matCellDef=\"let row\">{{ row.value }}</td>\r\n      </ng-container>\r\n\r\n      <!-- Details Column -->\r\n      <ng-container matColumnDef=\"details\">\r\n        <th mat-header-cell *matHeaderCellDef>Details</th>\r\n        <td mat-cell *matCellDef=\"let row\">\r\n          @if (row.details?.length) {\r\n            <mat-chip-set>\r\n              @for (detail of row.details; track $index) {\r\n                <mat-chip class=\"detail-chip\">{{ detail }}</mat-chip>\r\n              }\r\n            </mat-chip-set>\r\n          }\r\n        </td>\r\n      </ng-container>\r\n\r\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n    </table>\r\n  </div>\r\n}\r\n", styles: [".report-container{padding:20px;display:flex;flex-direction:column;gap:20px;background:var(--mat-sys-surface-container, var(--mat-app-surface))}.header-card{background:var(--lib-forms-surface)}.title-section{display:flex;align-items:center;gap:12px}.section-icon{color:var(--sem-info);font-size:1.75em;width:28px;height:28px;margin-right:8px}h1{margin:0;font-size:1.25em;font-weight:500}.subtitle{margin:4px 0 0;color:var(--lib-forms-on-surface-variant);font-size:.875em}.status-chips{display:flex;gap:8px;margin-left:auto}.status-chip{display:flex;align-items:center;gap:4px;padding:4px 12px;border-radius:16px;background:var(--sem-success);color:var(--lib-forms-on-primary);font-size:.875em}.status-chip.invalid{background:var(--sem-error)}.status-chip.initialized{background:var(--sem-info)}.status-chip mat-icon{font-size:1.125em;width:18px;height:18px}.filter-field{width:100%;margin-bottom:16px}.detail-chip{font-size:.75em;height:24px}mat-card-content{padding:16px}\n"] }]
+        }], propDecorators: { sectionId: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionId", required: true }] }] } });
+
+export { SectionReportComponent };
+//# sourceMappingURL=ngx-t-forms-section-report.component-BxOhR6C0.mjs.map

package/fesm2022/ngx-t-forms-section-report.component-BxOhR6C0.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-t-forms-section-report.component-BxOhR6C0.mjs","sources":["../../../projects/ngx-t-forms/src/lib/components/form-builder/elements/section-report/section-report.component.ts","../../../projects/ngx-t-forms/src/lib/components/form-builder/elements/section-report/section-report.component.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Signal, computed, inject, input } from '@angular/core';\r\n\r\nimport { MatChipsModule } from '@angular/material/chips';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { MatSortModule } from '@angular/material/sort';\r\nimport { MatTableModule } from '@angular/material/table';\r\nimport { MatToolbarModule } from '@angular/material/toolbar';\r\n\r\nimport { FormsStoreService } from '../../../forms/store/forms-store.service';\r\n\r\nimport { ElementTypes, FormSlideInterface, validateFormSlide } from 'ngx-t-forms-types';\r\n\r\ninterface SectionReportMetric {\r\n  icon: string;\r\n  name: string;\r\n  value: number;\r\n  color: string;\r\n  description: string;\r\n  trend: string;\r\n  category: string;\r\n  details?: unknown[];\r\n}\r\n\r\n@Component({\r\n  selector: 'lib-section-report',\r\n  imports: [\r\n    MatChipsModule,\r\n    MatIconModule,\r\n    MatSortModule,\r\n    MatTableModule,\r\n    MatToolbarModule,\r\n  ],\r\n  templateUrl: './section-report.component.html',\r\n  styleUrl: './section-report.component.scss',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class SectionReportComponent {\r\n  readonly sectionId = input.required<string>();\r\n\r\n  protected readonly displayedColumns: readonly string[] = ['icon', 'name', 'description', 'value'];\r\n\r\n  readonly #store: FormsStoreService = inject(FormsStoreService);\r\n  protected readonly selectFormInEdit = this.#store.signalSelectors.selectFormInEdit;\r\n\r\n  protected readonly section: Signal<FormSlideInterface | null> = computed<FormSlideInterface | null>(() => {\r\n    const form = this.selectFormInEdit();\r\n    return (\r\n      form?.form.slides.find((slide: FormSlideInterface) => slide.sectionId === this.sectionId()) ||\r\n      null\r\n    );\r\n  });\r\n\r\n  protected readonly sectionData: Signal<SectionReportMetric[]> = computed<SectionReportMetric[]>(\r\n    () => this.#buildMetrics(this.section()),\r\n  );\r\n\r\n  #buildMetrics(data: FormSlideInterface | null): SectionReportMetric[] {\r\n    if (!data) return [];\r\n    const sectionId = this.sectionId();\r\n    const allInputs = data.columns\r\n      .flatMap((column) =>\r\n        column.element === ElementTypes.MultipleInput\r\n          ? [...(column?.formInputs || []), column]\r\n          : [column],\r\n      )\r\n      .filter((input) => input.sectionId === sectionId);\r\n\r\n    const calculatedInputs = allInputs.filter(\r\n      (input) =>\r\n        input.calculatedFieldRules?.formula && input.calculatedFieldRules?.formula !== '',\r\n    );\r\n    const inputsWithManualValidations = allInputs.filter((input) =>\r\n      input.validators?.some((validator) => Object.keys(validator).length > 0),\r\n    );\r\n    const allSectionInputConfigErrors = validateFormSlide(data);\r\n\r\n    return [\r\n      {\r\n        icon: 'input',\r\n        name: 'Total Inputs',\r\n        value: Object.keys(allInputs || {}).length,\r\n        color: '#2196f3',\r\n        description: 'Total number of form inputs in section',\r\n        trend: 'stable',\r\n        category: 'inputs',\r\n      },\r\n      {\r\n        icon: 'calculate',\r\n        name: 'Calculated Fields',\r\n        value: calculatedInputs.length,\r\n        details: calculatedInputs,\r\n        color: '#4caf50',\r\n        description: 'Fields with calculation formulas',\r\n        trend: 'monitoring',\r\n        category: 'calculations',\r\n      },\r\n      {\r\n        icon: 'rule',\r\n        name: 'Manual Validations',\r\n        value: inputsWithManualValidations.length,\r\n        details: inputsWithManualValidations,\r\n        color: '#ff9800',\r\n        description: 'Fields with custom validation rules',\r\n        trend: 'warning',\r\n        category: 'validation',\r\n      },\r\n      {\r\n        icon: 'bug_report',\r\n        name: 'Config Errors',\r\n        value: allSectionInputConfigErrors.length,\r\n        color: '#f44336',\r\n        description: 'Configuration errors detected',\r\n        trend: 'critical',\r\n        category: 'errors',\r\n      },\r\n    ];\r\n  }\r\n}\r\n","@if (section()) {\r\n  <div class=\"report-container\">\r\n    <mat-toolbar style=\"padding: 0px;\">\r\n      <mat-icon class=\"section-icon\">analytics</mat-icon>\r\n      <small>\r\n        Form Section Diagnostic Report\r\n      </small>\r\n\r\n      <span class=\"spacer\"></span>\r\n      <div class=\"status-chips\">\r\n        <div class=\"status-chip\">\r\n          <mat-icon>check_circle</mat-icon>\r\n        </div>\r\n        @if (section()?.sectionIsSeen) {\r\n          <div class=\"status-chip initialized\">\r\n            <mat-icon>task_alt</mat-icon>\r\n            Initialized\r\n          </div>\r\n        }\r\n      </div>\r\n    </mat-toolbar>\r\n\r\n    <table mat-table [dataSource]=\"(sectionData()) || []\" matSort class=\"w-full\">\r\n      <!-- Icon Column -->\r\n      <ng-container matColumnDef=\"icon\">\r\n        <th mat-header-cell *matHeaderCellDef></th>\r\n        <td mat-cell *matCellDef=\"let row\">\r\n          <mat-icon [style.color]=\"row.color\">{{ row.icon }}</mat-icon>\r\n        </td>\r\n      </ng-container>\r\n\r\n      <!-- description Column -->\r\n      <ng-container matColumnDef=\"description\">\r\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>description</th>\r\n        <td mat-cell *matCellDef=\"let row\">{{ row.description }}</td>\r\n      </ng-container>\r\n\r\n      <!-- Name Column -->\r\n      <ng-container matColumnDef=\"name\">\r\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Type</th>\r\n        <td mat-cell *matCellDef=\"let row\">{{ row.name }}</td>\r\n      </ng-container>\r\n\r\n      <!-- Value Column -->\r\n      <ng-container matColumnDef=\"value\">\r\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Value</th>\r\n        <td mat-cell *matCellDef=\"let row\">{{ row.value }}</td>\r\n      </ng-container>\r\n\r\n      <!-- Details Column -->\r\n      <ng-container matColumnDef=\"details\">\r\n        <th mat-header-cell *matHeaderCellDef>Details</th>\r\n        <td mat-cell *matCellDef=\"let row\">\r\n          @if (row.details?.length) {\r\n            <mat-chip-set>\r\n              @for (detail of row.details; track $index) {\r\n                <mat-chip class=\"detail-chip\">{{ detail }}</mat-chip>\r\n              }\r\n            </mat-chip-set>\r\n          }\r\n        </td>\r\n      </ng-container>\r\n\r\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n    </table>\r\n  </div>\r\n}\r\n"],"names":["i2","i3","i4","i5"],"mappings":"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"}

package/fesm2022/ngx-t-forms-select-input-element.component-DbgZdNoe.mjs

@@ -0,0 +1,150 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, input, ChangeDetectionStrategy, Component, output, computed } from '@angular/core';
+import * as i1$1 from '@angular/forms';
+import { NgControl, ReactiveFormsModule } from '@angular/forms';
+import * as i2 from '@angular/material/form-field';
+import { MatFormFieldControl, MatFormFieldModule } from '@angular/material/form-field';
+import * as i3$1 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i1$2 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i5 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { B as BaseCustomInput, m as getInputErrorMessage, n as TFormInputStatusComponent } from './ngx-t-forms-ngx-t-forms-u_kigDid.mjs';
+import { Subject } from 'rxjs';
+import * as i8 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import { OptionSelectTypes } from 'ngx-t-forms-types';
+import * as i1 from '@angular/material/chips';
+import { MatChipsModule } from '@angular/material/chips';
+import * as i13 from '@angular/material/radio';
+import { MatRadioModule } from '@angular/material/radio';
+import * as i3 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i4 from '@angular/material/list';
+import { MatListModule } from '@angular/material/list';
+import { TitleCasePipe } from '@angular/common';
+
+const customInputConfig = {
+    controlType: 'lib-select-input',
+    nextId: 0,
+};
+class SelectInputComponent extends BaseCustomInput {
+    constructor() {
+        super(inject(NgControl, { optional: true, self: true }), inject(ElementRef), customInputConfig);
+        this.inputConfig = input.required(...(ngDevMode ? [{ debugName: "inputConfig" }] : /* istanbul ignore next */ []));
+        this.optionSelectTypes = OptionSelectTypes;
+        this.#valueSubject = new Subject();
+    }
+    get empty() {
+        return !this.value;
+    }
+    get shouldLabelFloat() {
+        return true;
+    }
+    #valueSubject;
+    onInputChange($event) {
+        this.#valueSubject.next($event);
+    }
+    onSelectionChange(event) {
+        this.value = event.value;
+        this.stateChanges.next();
+        this.onChange(this.value);
+    }
+    checkBoxChanged(event, value) {
+        const current = Array.isArray(this.value) ? this.value : [];
+        if (event.checked) {
+            this.value = [...current, value];
+        }
+        else {
+            this.value = current.filter((v) => v !== value);
+        }
+        this.stateChanges.next();
+        this.onChange(this.value);
+    }
+    isSelected(value) {
+        if (!this.value || !Array.isArray(this.value))
+            return false;
+        return this.value.includes(value);
+    }
+    // NOTE(phase-4): `matOptions.options` is `(FormInputBasicOptionInterface | DynamicObjectInterface)[]`
+    // but templates access `.value`, `.label`, `.username`, `.email` directly. Until the template
+    // is split per `optionType`, the return shape stays `any[]` to keep strictTemplates passing.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- TODO(phase-4): split template per matOptions.optionType, then narrow.
+    getSelectOptions() {
+        const cfg = this.inputConfig();
+        if (!cfg?.matOptions)
+            return [];
+        if (Array.isArray(cfg.matOptions?.options)) {
+            return cfg.matOptions?.options || [];
+        }
+        return [];
+    }
+    getAvatar(userName) {
+        return `https://ui-avatars.com/api/?color=EADDFF&font-size=0.36&bold=true&background=random&name=${userName}`;
+    }
+    get inputControl() {
+        return this.ngControl?.control ?? null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: SelectInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: SelectInputComponent, isStandalone: true, selector: "lib-select-input", inputs: { inputConfig: { classPropertyName: "inputConfig", publicName: "inputConfig", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.floating": "shouldLabelFloat", "id": "id" } }, providers: [{ provide: MatFormFieldControl, useExisting: SelectInputComponent }], usesInheritance: true, ngImport: i0, template: "@switch (inputConfig().optionSelectType) {\r\n@case (optionSelectTypes.ChipSelect) {\r\n<mat-chip-listbox [multiple]=\"!!inputConfig().allowMultipleSelection\" [value]=\"value\" [disabled]=\"disabled\"\r\n  (change)=\"onSelectionChange($event)\" aria-l abel=\"Chip select options\">\r\n  @for (option of getSelectOptions(); 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}\r\n@case (optionSelectTypes.RadioButton) {\r\n@if (!!inputConfig().allowMultipleSelection) {\r\n@for (option of getSelectOptions(); track option.value) {\r\n<mat-checkbox\r\n  [value]=\"option.value\"\r\n  [checked]=\"isSelected(option.value)\"\r\n  (change)=\"checkBoxChanged($event, option.value)\" class=\"example-margin\">\r\n  {{option.label}}\r\n</mat-checkbox>\r\n}\r\n} @else {\r\n<mat-radio-group aria-labelledby=\"example-radio-group-label\" class=\"example-radio-group\"\r\n  (change)=\"onSelectionChange($event)\" [value]=\"value\">\r\n  @for (option of getSelectOptions(); track option.value) {\r\n  <mat-radio-button class=\"example-radio-button\" [value]=\"option.value\">{{option.label}}</mat-radio-button>\r\n  }\r\n</mat-radio-group>\r\n}\r\n\r\n}\r\n@default {\r\n\r\n<mat-select [multiple]=\"!!inputConfig().allowMultipleSelection\" #sele (selectionChange)=\"onSelectionChange($event)\"\r\n  [value]=\"value\">\r\n\r\n\r\n\r\n  @for (option of getSelectOptions(); track option.value) {\r\n  <mat-option [value]=\"option.value\" [disabled]=\"inputConfig().readonly\">\r\n    @switch (inputConfig().matOptions?.optionType) {\r\n    @case ('user') {\r\n    <mat-list-item style=\"padding: 0px;\">\r\n      <img matListItemAvatar [src]=\"getAvatar(option.username)\" />\r\n      <div matListItemTitle>{{ option.username | titlecase }}</div>\r\n      <div matListItemLine> {{ option.email }}</div>\r\n    </mat-list-item>\r\n\r\n    }\r\n    @default {\r\n    {{ option.label }}\r\n    }\r\n    }\r\n\r\n  </mat-option>\r\n  }\r\n\r\n</mat-select>\r\n\r\n}\r\n}\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i8.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i1.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i1.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i13.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i13.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i4.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i4.MatListItemAvatar, selector: "[matListItemAvatar]" }, { kind: "directive", type: i4.MatListItemLine, selector: "[matListItemLine]" }, { kind: "directive", type: i4.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: SelectInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-select-input', imports: [
+                        ReactiveFormsModule,
+                        MatSelectModule,
+                        MatChipsModule,
+                        MatRadioModule,
+                        MatCheckboxModule,
+                        MatListModule,
+                        TitleCasePipe,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class.floating]': 'shouldLabelFloat',
+                        '[id]': 'id',
+                    }, providers: [{ provide: MatFormFieldControl, useExisting: SelectInputComponent }], template: "@switch (inputConfig().optionSelectType) {\r\n@case (optionSelectTypes.ChipSelect) {\r\n<mat-chip-listbox [multiple]=\"!!inputConfig().allowMultipleSelection\" [value]=\"value\" [disabled]=\"disabled\"\r\n  (change)=\"onSelectionChange($event)\" aria-l abel=\"Chip select options\">\r\n  @for (option of getSelectOptions(); 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}\r\n@case (optionSelectTypes.RadioButton) {\r\n@if (!!inputConfig().allowMultipleSelection) {\r\n@for (option of getSelectOptions(); track option.value) {\r\n<mat-checkbox\r\n  [value]=\"option.value\"\r\n  [checked]=\"isSelected(option.value)\"\r\n  (change)=\"checkBoxChanged($event, option.value)\" class=\"example-margin\">\r\n  {{option.label}}\r\n</mat-checkbox>\r\n}\r\n} @else {\r\n<mat-radio-group aria-labelledby=\"example-radio-group-label\" class=\"example-radio-group\"\r\n  (change)=\"onSelectionChange($event)\" [value]=\"value\">\r\n  @for (option of getSelectOptions(); track option.value) {\r\n  <mat-radio-button class=\"example-radio-button\" [value]=\"option.value\">{{option.label}}</mat-radio-button>\r\n  }\r\n</mat-radio-group>\r\n}\r\n\r\n}\r\n@default {\r\n\r\n<mat-select [multiple]=\"!!inputConfig().allowMultipleSelection\" #sele (selectionChange)=\"onSelectionChange($event)\"\r\n  [value]=\"value\">\r\n\r\n\r\n\r\n  @for (option of getSelectOptions(); track option.value) {\r\n  <mat-option [value]=\"option.value\" [disabled]=\"inputConfig().readonly\">\r\n    @switch (inputConfig().matOptions?.optionType) {\r\n    @case ('user') {\r\n    <mat-list-item style=\"padding: 0px;\">\r\n      <img matListItemAvatar [src]=\"getAvatar(option.username)\" />\r\n      <div matListItemTitle>{{ option.username | titlecase }}</div>\r\n      <div matListItemLine> {{ option.email }}</div>\r\n    </mat-list-item>\r\n\r\n    }\r\n    @default {\r\n    {{ option.label }}\r\n    }\r\n    }\r\n\r\n  </mat-option>\r\n  }\r\n\r\n</mat-select>\r\n\r\n}\r\n}\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { inputConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputConfig", required: true }] }] } });
+
+/** Wraps a reactive select control inside a `mat-form-field`. */
+class SelectInputElementComponent {
+    constructor() {
+        this.inputConfig = input.required(...(ngDevMode ? [{ debugName: "inputConfig" }] : /* istanbul ignore next */ []));
+        this.formGroup = input.required(...(ngDevMode ? [{ debugName: "formGroup" }] : /* istanbul ignore next */ []));
+        this.reload = output();
+        this.errorMessage = computed(() => getInputErrorMessage(this.inputConfig(), this.formGroup()), ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+        this.errorStateMatcher = {
+            isErrorState(control, _form) {
+                return !!(control && control.invalid && (control.dirty || control.touched));
+            },
+        };
+    }
+    getSelectOptions() {
+        const cfg = this.inputConfig();
+        if (!cfg.matOptions)
+            return [];
+        if (Array.isArray(cfg.matOptions?.options)) {
+            return cfg.matOptions.options ?? [];
+        }
+        return [];
+    }
+    selectInputSearchWord(event) {
+        this.optionsSearchWordKeyWord = event.detail.value.toUpperCase();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: SelectInputElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: SelectInputElementComponent, isStandalone: true, selector: "lib-select-input-element", inputs: { inputConfig: { classPropertyName: "inputConfig", publicName: "inputConfig", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { reload: "reload" }, ngImport: i0, template: "<ng-container [formGroup]=\"formGroup()\">\r\n  @if (inputConfig(); as inputConfig) {\r\n    <mat-form-field [appearance]=\"inputConfig.appearance || 'fill'\" subscriptSizing=\"dynamic\">\r\n      <mat-label>\r\n        {{ inputConfig.label }}\r\n        <lib-t-form-input-status [inputConfig]=\"inputConfig\"></lib-t-form-input-status>\r\n      </mat-label>\r\n\r\n      <lib-select-input\r\n        [inputConfig]=\"inputConfig\"\r\n        [required]=\"inputConfig.required\"\r\n        [formControlName]=\"inputConfig.id\"\r\n      ></lib-select-input>\r\n\r\n      @if (inputConfig.hintLabel || inputConfig.temporaryHint) {\r\n        <mat-hint class=\"inputHint\">\r\n          {{ inputConfig.temporaryHint || inputConfig.hintLabel }}\r\n        </mat-hint>\r\n      }\r\n\r\n      <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{ errorMessage() }}</mat-error>\r\n\r\n      @if (inputConfig.canReload?.canReload) {\r\n        <button\r\n          mat-icon-button\r\n          style=\"margin-right: 4px;\"\r\n          matTooltip=\"Click to refresh this field.\"\r\n          class=\"input-sync-button\"\r\n          (click)=\"inputConfig.canReload.emit()\"\r\n          matSuffix\r\n        >\r\n          <mat-icon style=\"color: var(--mat-sys-primary)\">sync</mat-icon>\r\n        </button>\r\n      }\r\n\r\n      @if (inputConfig.prefixIcon) {\r\n        <mat-icon matPrefix>{{ inputConfig.prefixIcon }}</mat-icon>\r\n      }\r\n\r\n      @if (inputConfig.suffixIcon && inputConfig.id !== 'password') {\r\n        <mat-icon matSuffix>{{ inputConfig.suffixIcon }}</mat-icon>\r\n      }\r\n\r\n      @if (inputConfig.prefixText) {\r\n        <span matPrefix style=\"top: 0\">{{ inputConfig.prefixText }}</span>\r\n      }\r\n      @if (inputConfig.suffixText) {\r\n        <span matSuffix style=\"padding-left: 5px\">{{ inputConfig.suffixText }}</span>\r\n      }\r\n\r\n      @if (inputConfig.maxLength && formGroup()) {\r\n        <mat-hint align=\"end\">\r\n          {{ (formGroup().controls[inputConfig.id]?.value?.length || 0) + '/' + inputConfig.maxLength }}\r\n        </mat-hint>\r\n      }\r\n    </mat-form-field>\r\n  }\r\n</ng-container>\r\n", styles: ["mat-form-field{width:100%!important}mat-form-field .input-sync-button{display:none}mat-form-field:hover .input-sync-button{display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: SelectInputComponent, selector: "lib-select-input", inputs: ["inputConfig"] }, { kind: "component", type: TFormInputStatusComponent, selector: "lib-t-form-input-status", inputs: ["inputConfig"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: SelectInputElementComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-select-input-element', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        ReactiveFormsModule,
+                        MatFormFieldModule,
+                        MatIconModule,
+                        MatButtonModule,
+                        MatTooltipModule,
+                        SelectInputComponent,
+                        TFormInputStatusComponent,
+                    ], template: "<ng-container [formGroup]=\"formGroup()\">\r\n  @if (inputConfig(); as inputConfig) {\r\n    <mat-form-field [appearance]=\"inputConfig.appearance || 'fill'\" subscriptSizing=\"dynamic\">\r\n      <mat-label>\r\n        {{ inputConfig.label }}\r\n        <lib-t-form-input-status [inputConfig]=\"inputConfig\"></lib-t-form-input-status>\r\n      </mat-label>\r\n\r\n      <lib-select-input\r\n        [inputConfig]=\"inputConfig\"\r\n        [required]=\"inputConfig.required\"\r\n        [formControlName]=\"inputConfig.id\"\r\n      ></lib-select-input>\r\n\r\n      @if (inputConfig.hintLabel || inputConfig.temporaryHint) {\r\n        <mat-hint class=\"inputHint\">\r\n          {{ inputConfig.temporaryHint || inputConfig.hintLabel }}\r\n        </mat-hint>\r\n      }\r\n\r\n      <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{ errorMessage() }}</mat-error>\r\n\r\n      @if (inputConfig.canReload?.canReload) {\r\n        <button\r\n          mat-icon-button\r\n          style=\"margin-right: 4px;\"\r\n          matTooltip=\"Click to refresh this field.\"\r\n          class=\"input-sync-button\"\r\n          (click)=\"inputConfig.canReload.emit()\"\r\n          matSuffix\r\n        >\r\n          <mat-icon style=\"color: var(--mat-sys-primary)\">sync</mat-icon>\r\n        </button>\r\n      }\r\n\r\n      @if (inputConfig.prefixIcon) {\r\n        <mat-icon matPrefix>{{ inputConfig.prefixIcon }}</mat-icon>\r\n      }\r\n\r\n      @if (inputConfig.suffixIcon && inputConfig.id !== 'password') {\r\n        <mat-icon matSuffix>{{ inputConfig.suffixIcon }}</mat-icon>\r\n      }\r\n\r\n      @if (inputConfig.prefixText) {\r\n        <span matPrefix style=\"top: 0\">{{ inputConfig.prefixText }}</span>\r\n      }\r\n      @if (inputConfig.suffixText) {\r\n        <span matSuffix style=\"padding-left: 5px\">{{ inputConfig.suffixText }}</span>\r\n      }\r\n\r\n      @if (inputConfig.maxLength && formGroup()) {\r\n        <mat-hint align=\"end\">\r\n          {{ (formGroup().controls[inputConfig.id]?.value?.length || 0) + '/' + inputConfig.maxLength }}\r\n        </mat-hint>\r\n      }\r\n    </mat-form-field>\r\n  }\r\n</ng-container>\r\n", styles: ["mat-form-field{width:100%!important}mat-form-field .input-sync-button{display:none}mat-form-field:hover .input-sync-button{display:inline-block}\n"] }]
+        }], propDecorators: { inputConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputConfig", required: true }] }], formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: true }] }], reload: [{ type: i0.Output, args: ["reload"] }] } });
+
+export { SelectInputElementComponent };
+//# sourceMappingURL=ngx-t-forms-select-input-element.component-DbgZdNoe.mjs.map

package/fesm2022/ngx-t-forms-select-input-element.component-DbgZdNoe.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-t-forms-select-input-element.component-DbgZdNoe.mjs","sources":["../../../projects/ngx-t-forms/src/lib/components/t-form-input/elements/select-input-element/elements/select-input/select-input.component.ts","../../../projects/ngx-t-forms/src/lib/components/t-form-input/elements/select-input-element/elements/select-input/select-input.component.html","../../../projects/ngx-t-forms/src/lib/components/t-form-input/elements/select-input-element/select-input-element.component.ts","../../../projects/ngx-t-forms/src/lib/components/t-form-input/elements/select-input-element/select-input-element.component.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, ElementRef, inject, input } from '@angular/core';\r\nimport { MatFormFieldControl } from '@angular/material/form-field';\r\nimport { BaseCustomInput, BaseCustomInputConfig } from '../../../../../../services/core/t-input-controller/functions/baseCustomInput';\r\n\r\nimport { AbstractControl, NgControl, ReactiveFormsModule } from '@angular/forms';\r\nimport { Subject } from 'rxjs';\r\nimport { MatSelectChange, MatSelectModule } from '@angular/material/select';\r\nimport { ITowerStepColumn, OptionSelectTypes } from 'ngx-t-forms-types';\r\nimport { MatChipListboxChange, MatChipsModule } from '@angular/material/chips';\r\nimport { MatRadioChange, MatRadioModule } from '@angular/material/radio';\r\nimport { MatCheckboxChange, MatCheckboxModule } from '@angular/material/checkbox';\r\nimport { MatListModule } from '@angular/material/list';\r\nimport { TitleCasePipe } from '@angular/common';\r\n\r\nconst customInputConfig: BaseCustomInputConfig = {\r\n  controlType: 'lib-select-input',\r\n  nextId: 0,\r\n};\r\n\r\n@Component({\r\n  selector: 'lib-select-input',\r\n  imports: [\r\n    ReactiveFormsModule,\r\n    MatSelectModule,\r\n    MatChipsModule,\r\n    MatRadioModule,\r\n    MatCheckboxModule,\r\n    MatListModule,\r\n    TitleCasePipe,\r\n  ],\r\n  templateUrl: './select-input.component.html',\r\n  styleUrl: './select-input.component.css',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  host: {\r\n    '[class.floating]': 'shouldLabelFloat',\r\n    '[id]': 'id',\r\n  },\r\n  providers: [{ provide: MatFormFieldControl, useExisting: SelectInputComponent }],\r\n})\r\nexport class SelectInputComponent extends BaseCustomInput<string | number | Date | string[]> {\r\n  readonly inputConfig = input.required<ITowerStepColumn>();\r\n\r\n  constructor() {\r\n    super(\r\n      inject(NgControl, { optional: true, self: true }) as NgControl,\r\n      inject<ElementRef<HTMLElement>>(ElementRef),\r\n      customInputConfig,\r\n    );\r\n  }\r\n\r\n  protected readonly optionSelectTypes = OptionSelectTypes;\r\n\r\n  override get empty(): boolean {\r\n    return !this.value;\r\n  }\r\n\r\n  override get shouldLabelFloat(): boolean {\r\n    return true;\r\n  }\r\n\r\n  readonly #valueSubject = new Subject<unknown>();\r\n\r\n  protected onInputChange($event: unknown): void {\r\n    this.#valueSubject.next($event);\r\n  }\r\n\r\n  protected onSelectionChange(event: MatSelectChange | MatChipListboxChange | MatRadioChange): void {\r\n    this.value = event.value;\r\n    this.stateChanges.next();\r\n    this.onChange(this.value);\r\n  }\r\n\r\n  protected checkBoxChanged(event: MatCheckboxChange, value: string): void {\r\n    const current = Array.isArray(this.value) ? (this.value as string[]) : [];\r\n    if (event.checked) {\r\n      this.value = [...current, value];\r\n    } else {\r\n      this.value = current.filter((v) => v !== value);\r\n    }\r\n    this.stateChanges.next();\r\n    this.onChange(this.value);\r\n  }\r\n\r\n  protected isSelected(value: string): boolean {\r\n    if (!this.value || !Array.isArray(this.value)) return false;\r\n    return (this.value as string[]).includes(value);\r\n  }\r\n\r\n  // NOTE(phase-4): `matOptions.options` is `(FormInputBasicOptionInterface | DynamicObjectInterface)[]`\r\n  // but templates access `.value`, `.label`, `.username`, `.email` directly. Until the template\r\n  // is split per `optionType`, the return shape stays `any[]` to keep strictTemplates passing.\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- TODO(phase-4): split template per matOptions.optionType, then narrow.\r\n  protected getSelectOptions(): any[] {\r\n    const cfg = this.inputConfig();\r\n    if (!cfg?.matOptions) return [];\r\n    if (Array.isArray(cfg.matOptions?.options)) {\r\n      return cfg.matOptions?.options || [];\r\n    }\r\n    return [];\r\n  }\r\n\r\n  protected getAvatar(userName: unknown): string {\r\n    return `https://ui-avatars.com/api/?color=EADDFF&font-size=0.36&bold=true&background=random&name=${userName}`;\r\n  }\r\n\r\n  protected get inputControl(): AbstractControl | null {\r\n    return this.ngControl?.control ?? null;\r\n  }\r\n}\r\n","@switch (inputConfig().optionSelectType) {\r\n@case (optionSelectTypes.ChipSelect) {\r\n<mat-chip-listbox [multiple]=\"!!inputConfig().allowMultipleSelection\" [value]=\"value\" [disabled]=\"disabled\"\r\n  (change)=\"onSelectionChange($event)\" aria-l abel=\"Chip select options\">\r\n  @for (option of getSelectOptions(); 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}\r\n@case (optionSelectTypes.RadioButton) {\r\n@if (!!inputConfig().allowMultipleSelection) {\r\n@for (option of getSelectOptions(); track option.value) {\r\n<mat-checkbox\r\n  [value]=\"option.value\"\r\n  [checked]=\"isSelected(option.value)\"\r\n  (change)=\"checkBoxChanged($event, option.value)\" class=\"example-margin\">\r\n  {{option.label}}\r\n</mat-checkbox>\r\n}\r\n} @else {\r\n<mat-radio-group aria-labelledby=\"example-radio-group-label\" class=\"example-radio-group\"\r\n  (change)=\"onSelectionChange($event)\" [value]=\"value\">\r\n  @for (option of getSelectOptions(); track option.value) {\r\n  <mat-radio-button class=\"example-radio-button\" [value]=\"option.value\">{{option.label}}</mat-radio-button>\r\n  }\r\n</mat-radio-group>\r\n}\r\n\r\n}\r\n@default {\r\n\r\n<mat-select [multiple]=\"!!inputConfig().allowMultipleSelection\" #sele (selectionChange)=\"onSelectionChange($event)\"\r\n  [value]=\"value\">\r\n\r\n\r\n\r\n  @for (option of getSelectOptions(); track option.value) {\r\n  <mat-option [value]=\"option.value\" [disabled]=\"inputConfig().readonly\">\r\n    @switch (inputConfig().matOptions?.optionType) {\r\n    @case ('user') {\r\n    <mat-list-item style=\"padding: 0px;\">\r\n      <img matListItemAvatar [src]=\"getAvatar(option.username)\" />\r\n      <div matListItemTitle>{{ option.username | titlecase }}</div>\r\n      <div matListItemLine> {{ option.email }}</div>\r\n    </mat-list-item>\r\n\r\n    }\r\n    @default {\r\n    {{ option.label }}\r\n    }\r\n    }\r\n\r\n  </mat-option>\r\n  }\r\n\r\n</mat-select>\r\n\r\n}\r\n}\r\n","import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';\r\nimport { FormControl, FormGroup, FormGroupDirective, NgForm, ReactiveFormsModule } from '@angular/forms';\r\nimport { ErrorStateMatcher } from '@angular/material/core';\r\nimport { MatFormFieldModule } from '@angular/material/form-field';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { MatButtonModule } from '@angular/material/button';\r\nimport { MatTooltipModule } from '@angular/material/tooltip';\r\nimport type { ITowerStepColumn } from 'ngx-t-forms-types';\r\nimport { TFormInputStatusComponent } from '../../../t-form-input-status/t-form-input-status.component';\r\nimport { SelectInputComponent } from './elements/select-input/select-input.component';\r\nimport { getInputErrorMessage } from '../../../../services/core/t-input-controller/functions/inputErrorMessage';\r\n\r\n/** Wraps a reactive select control inside a `mat-form-field`. */\r\n@Component({\r\n  selector: 'lib-select-input-element',\r\n  templateUrl: './select-input-element.component.html',\r\n  styleUrl: './select-input-element.component.css',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  imports: [\r\n    ReactiveFormsModule,\r\n    MatFormFieldModule,\r\n    MatIconModule,\r\n    MatButtonModule,\r\n    MatTooltipModule,\r\n    SelectInputComponent,\r\n    TFormInputStatusComponent,\r\n  ],\r\n})\r\nexport class SelectInputElementComponent {\r\n  readonly inputConfig = input.required<ITowerStepColumn>();\r\n  readonly formGroup = input.required<FormGroup>();\r\n  readonly reload = output<void>();\r\n\r\n  protected optionsSearchWordKeyWord!: string;\r\n\r\n  protected readonly errorMessage = computed(() =>\r\n    getInputErrorMessage(this.inputConfig(), this.formGroup()),\r\n  );\r\n\r\n  protected readonly errorStateMatcher: ErrorStateMatcher = {\r\n    isErrorState(control: FormControl | null, _form: FormGroupDirective | NgForm | null): boolean {\r\n      return !!(control && control.invalid && (control.dirty || control.touched));\r\n    },\r\n  };\r\n\r\n  protected getSelectOptions(): unknown[] {\r\n    const cfg = this.inputConfig();\r\n    if (!cfg.matOptions) return [];\r\n    if (Array.isArray(cfg.matOptions?.options)) {\r\n      return cfg.matOptions.options ?? [];\r\n    }\r\n    return [];\r\n  }\r\n\r\n  protected selectInputSearchWord(event: { detail: { value: string } }): void {\r\n    this.optionsSearchWordKeyWord = event.detail.value.toUpperCase();\r\n  }\r\n}\r\n","<ng-container [formGroup]=\"formGroup()\">\r\n  @if (inputConfig(); as inputConfig) {\r\n    <mat-form-field [appearance]=\"inputConfig.appearance || 'fill'\" subscriptSizing=\"dynamic\">\r\n      <mat-label>\r\n        {{ inputConfig.label }}\r\n        <lib-t-form-input-status [inputConfig]=\"inputConfig\"></lib-t-form-input-status>\r\n      </mat-label>\r\n\r\n      <lib-select-input\r\n        [inputConfig]=\"inputConfig\"\r\n        [required]=\"inputConfig.required\"\r\n        [formControlName]=\"inputConfig.id\"\r\n      ></lib-select-input>\r\n\r\n      @if (inputConfig.hintLabel || inputConfig.temporaryHint) {\r\n        <mat-hint class=\"inputHint\">\r\n          {{ inputConfig.temporaryHint || inputConfig.hintLabel }}\r\n        </mat-hint>\r\n      }\r\n\r\n      <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{ errorMessage() }}</mat-error>\r\n\r\n      @if (inputConfig.canReload?.canReload) {\r\n        <button\r\n          mat-icon-button\r\n          style=\"margin-right: 4px;\"\r\n          matTooltip=\"Click to refresh this field.\"\r\n          class=\"input-sync-button\"\r\n          (click)=\"inputConfig.canReload.emit()\"\r\n          matSuffix\r\n        >\r\n          <mat-icon style=\"color: var(--mat-sys-primary)\">sync</mat-icon>\r\n        </button>\r\n      }\r\n\r\n      @if (inputConfig.prefixIcon) {\r\n        <mat-icon matPrefix>{{ inputConfig.prefixIcon }}</mat-icon>\r\n      }\r\n\r\n      @if (inputConfig.suffixIcon && inputConfig.id !== 'password') {\r\n        <mat-icon matSuffix>{{ inputConfig.suffixIcon }}</mat-icon>\r\n      }\r\n\r\n      @if (inputConfig.prefixText) {\r\n        <span matPrefix style=\"top: 0\">{{ inputConfig.prefixText }}</span>\r\n      }\r\n      @if (inputConfig.suffixText) {\r\n        <span matSuffix style=\"padding-left: 5px\">{{ inputConfig.suffixText }}</span>\r\n      }\r\n\r\n      @if (inputConfig.maxLength && formGroup()) {\r\n        <mat-hint align=\"end\">\r\n          {{ (formGroup().controls[inputConfig.id]?.value?.length || 0) + '/' + inputConfig.maxLength }}\r\n        </mat-hint>\r\n      }\r\n    </mat-form-field>\r\n  }\r\n</ng-container>\r\n"],"names":["i1","i2","i3","i4","i5"],"mappings":"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"}

package/fesm2022/ngx-t-forms-selection-options-editor.component-Dhln81DL.mjs

@@ -0,0 +1,169 @@
+import * as i0 from '@angular/core';
+import { input, output, inject, PLATFORM_ID, signal, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { DOCUMENT, isPlatformBrowser } from '@angular/common';
+import * as i1 from '@angular/forms';
+import { NonNullableFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
+import * as i1$1 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i3 from '@angular/material/card';
+import { MatCardModule } from '@angular/material/card';
+import * as i1$2 from '@angular/material/chips';
+import { MatChipsModule } from '@angular/material/chips';
+import * as i2 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i3$1 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i2$1 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i5 from '@angular/material/toolbar';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import * as i5$1 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { v4 } from 'uuid';
+import { E as EmptyStateComponent } from './ngx-t-forms-ngx-t-forms-u_kigDid.mjs';
+
+let nextUniqueId = 0;
+/**
+ * Editor for a list of selectable `{ id, label, value }` options. Renders inside
+ * `t-dynamic-data-edit`, which supplies the field label, hint, and validation
+ * errors — so this component owns only the chip list plus the add/edit card.
+ *
+ * @example
+ *   <lib-selection-options-editor
+ *     [options]="options()"
+ *     [disabled]="disabled()"
+ *     (valueChanged)="onOptions($event)" />
+ */
+class SelectionOptionsEditorComponent {
+    constructor() {
+        /** Validation errors surfaced by the parent (kept for contract parity). */
+        this.errors = input([], ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+        /** Disables interaction with the chip list and the add control. */
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /** Current set of options to edit. */
+        this.options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+        /** Fires the full option list whenever it is added to, edited, or pruned. */
+        this.valueChanged = output();
+        /** Stable host id used by the parent's `[attr.id]` binding. */
+        this.hostId = `app-selection-options-editor-${nextUniqueId++}`;
+        this.#platformId = inject(PLATFORM_ID);
+        this.#document = inject(DOCUMENT);
+        this.#fb = inject(NonNullableFormBuilder);
+        /** Option being edited (existing) or added (no id yet); `null` when closed. */
+        this.inEdit = signal(null, ...(ngDevMode ? [{ debugName: "inEdit" }] : /* istanbul ignore next */ []));
+        /** Whether the editor is in "add new" mode (open card, no existing id). */
+        this.isAdding = signal(false, ...(ngDevMode ? [{ debugName: "isAdding" }] : /* istanbul ignore next */ []));
+        /** When true, an empty value auto-fills from the camelCased label on blur. */
+        this.isAutoCamelCase = signal(true, ...(ngDevMode ? [{ debugName: "isAutoCamelCase" }] : /* istanbul ignore next */ []));
+        /** Live snapshot of the upstream options, defensively normalised to an array. */
+        this.optionList = computed(() => this.options() ?? [], ...(ngDevMode ? [{ debugName: "optionList" }] : /* istanbul ignore next */ []));
+        /** Whether the add/edit card is currently open. */
+        this.isEditing = computed(() => this.isAdding() || this.inEdit() !== null, ...(ngDevMode ? [{ debugName: "isEditing" }] : /* istanbul ignore next */ []));
+        /** Reactive form for the open add/edit card. */
+        this.form = this.#fb.group({
+            label: this.#fb.control('', Validators.required),
+            value: this.#fb.control('', Validators.required),
+        });
+    }
+    #platformId;
+    #document;
+    #fb;
+    /** Opens the card to add a new option. */
+    add() {
+        this.inEdit.set(null);
+        this.isAdding.set(true);
+        this.#resetForm('', '');
+    }
+    /** Opens the card to edit an existing option. */
+    startEdit(option) {
+        this.isAdding.set(false);
+        this.inEdit.set(option);
+        this.#resetForm(option.label, option.value);
+    }
+    /** Closes the card without persisting changes. */
+    closeEdit() {
+        this.inEdit.set(null);
+        this.isAdding.set(false);
+    }
+    /** Removes an option after browser confirmation, then emits the new list. */
+    remove(option) {
+        if (!isPlatformBrowser(this.#platformId))
+            return;
+        const win = this.#document.defaultView;
+        if (!win)
+            return;
+        if (!win.confirm(`Are you sure you want to delete the option "${option.label}"?`))
+            return;
+        this.valueChanged.emit(this.optionList().filter((o) => o.id !== option.id));
+        if (this.inEdit()?.id === option.id)
+            this.closeEdit();
+    }
+    /** Persists the open card as a new or updated option, then emits the list. */
+    save() {
+        if (this.form.invalid)
+            return;
+        const { label, value } = this.form.getRawValue();
+        const editing = this.inEdit();
+        const next = editing
+            ? this.optionList().map((o) => (o.id === editing.id ? { ...o, label, value } : o))
+            : [...this.optionList(), { id: v4(), label, value }];
+        this.valueChanged.emit(next);
+        this.closeEdit();
+    }
+    /** Toggles auto-camelCase generation of an empty value from the label. */
+    toggleAutoCamelCase() {
+        this.isAutoCamelCase.update((on) => !on);
+    }
+    /**
+     * Fills an empty `value` with the camelCased `label` on label blur. A value
+     * the user already set is never overwritten.
+     */
+    autoFillValueFromLabel() {
+        if (!this.isAutoCamelCase())
+            return;
+        const label = this.form.controls.label.value.trim();
+        if (label && !this.form.controls.value.value) {
+            this.form.controls.value.setValue(this.#camelCase(label));
+        }
+    }
+    /** Resets the form to the supplied label/value pair. */
+    #resetForm(label, value) {
+        this.form.reset({ label, value });
+    }
+    /** Native camelCase: identical output to the previous lodash dependency. */
+    #camelCase(input) {
+        const words = input
+            .replace(/[^A-Za-z0-9]+/g, ' ')
+            .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+            .trim()
+            .toLowerCase()
+            .split(/\s+/)
+            .filter((w) => w.length > 0);
+        return words
+            .map((word, i) => (i === 0 ? word : word.charAt(0).toUpperCase() + word.slice(1)))
+            .join('');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: SelectionOptionsEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: SelectionOptionsEditorComponent, isStandalone: true, selector: "lib-selection-options-editor", inputs: { errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChanged: "valueChanged" }, host: { properties: { "attr.id": "hostId" }, classAttribute: "lib-selection-options-editor" }, ngImport: i0, template: "@if (optionList().length) {\n  <mat-chip-listbox\n    class=\"lib-selection-options-editor__listbox\"\n    aria-label=\"Option selection\"\n    [disabled]=\"disabled()\">\n    @for (option of optionList(); track option.id) {\n      <mat-chip-option\n        class=\"lib-selection-options-editor__chip\"\n        color=\"accent\"\n        [value]=\"option.value\"\n        [selected]=\"inEdit()?.id === option.id\"\n        (click)=\"startEdit(option)\">\n        {{ option.label }}\n        <button\n          matChipRemove\n          [attr.aria-label]=\"'Remove ' + option.label\"\n          (click)=\"$event.stopPropagation(); remove(option)\">\n          <mat-icon>cancel</mat-icon>\n        </button>\n      </mat-chip-option>\n    }\n  </mat-chip-listbox>\n} @else if (!isEditing()) {\n  <lib-empty-state icon=\"list_alt\" message=\"No options yet\" />\n}\n\n@if (!isEditing()) {\n  <mat-toolbar class=\"lib-selection-options-editor__toolbar\">\n    <button\n      class=\"lib-selection-options-editor__add\"\n      mat-stroked-button\n      [disabled]=\"disabled()\"\n      (click)=\"add()\">\n      Add an option <mat-icon>add</mat-icon>\n    </button>\n  </mat-toolbar>\n} @else {\n  <mat-card class=\"lib-selection-options-editor__card\" appearance=\"outlined\">\n    <mat-card-header>\n      <mat-card-subtitle>{{ inEdit() ? 'Edit Option' : 'Add New Option' }}</mat-card-subtitle>\n    </mat-card-header>\n\n    <mat-card-content>\n      <form [formGroup]=\"form\">\n        <mat-form-field\n          class=\"lib-selection-options-editor__field\"\n          subscriptSizing=\"dynamic\"\n          floatLabel=\"always\"\n          appearance=\"outline\">\n          <mat-label>Display Text</mat-label>\n          <input\n            type=\"text\"\n            matInput\n            formControlName=\"label\"\n            placeholder=\"Enter option text\"\n            (blur)=\"autoFillValueFromLabel()\" />\n          <mat-hint>The text users will see and select from the list.</mat-hint>\n        </mat-form-field>\n\n        <mat-form-field\n          class=\"lib-selection-options-editor__field\"\n          subscriptSizing=\"dynamic\"\n          floatLabel=\"always\"\n          appearance=\"outline\">\n          <mat-label>Stored Value</mat-label>\n          <input type=\"text\" matInput formControlName=\"value\" placeholder=\"Enter data value\" />\n          <button\n            matSuffix\n            mat-icon-button\n            matTooltip=\"Toggle auto-creation of value from display text\"\n            [color]=\"isAutoCamelCase() ? 'primary' : ''\"\n            (click)=\"toggleAutoCamelCase()\">\n            <mat-icon>{{ isAutoCamelCase() ? 'drive_file_rename_outline' : 'edit_off' }}</mat-icon>\n          </button>\n          <mat-hint>The value saved when this option is chosen. (Often an ID or code)</mat-hint>\n        </mat-form-field>\n      </form>\n    </mat-card-content>\n\n    <mat-card-actions>\n      <button mat-button (click)=\"closeEdit()\">Cancel</button>\n      <button mat-flat-button [disabled]=\"form.invalid\" (click)=\"save()\">\n        {{ inEdit() ? 'Save Changes' : 'Add Option' }}\n      </button>\n    </mat-card-actions>\n  </mat-card>\n}\n", styles: [":host{display:flex;flex-direction:column;gap:1.5rem}.lib-selection-options-editor__listbox{display:flex;overflow-x:auto}.lib-selection-options-editor__chip{min-width:fit-content}.lib-selection-options-editor__toolbar{padding:0;background:transparent}.lib-selection-options-editor__add{width:100%}.lib-selection-options-editor__card{background:var(--lib-forms-surface);border:1px solid color-mix(in srgb,var(--lib-forms-outline) 15%,transparent);border-radius:var(--lib-forms-radius-lg, 12px);box-shadow:var(--lib-forms-shadow-resting)}.lib-selection-options-editor__field{width:100%;background:var(--lib-forms-surface)}.lib-selection-options-editor__field+.lib-selection-options-editor__field{margin-top:1.5rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$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: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { 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: "directive", type: i3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i1$2.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i1$2.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: i1$2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.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: MatToolbarModule }, { kind: "component", type: i5.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: EmptyStateComponent, selector: "lib-empty-state", inputs: ["icon", "message"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: SelectionOptionsEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-selection-options-editor', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: {
+                        'class': 'lib-selection-options-editor',
+                        '[attr.id]': 'hostId',
+                    }, imports: [
+                        ReactiveFormsModule,
+                        MatButtonModule,
+                        MatCardModule,
+                        MatChipsModule,
+                        MatFormFieldModule,
+                        MatIconModule,
+                        MatInputModule,
+                        MatToolbarModule,
+                        MatTooltipModule,
+                        EmptyStateComponent,
+                    ], template: "@if (optionList().length) {\n  <mat-chip-listbox\n    class=\"lib-selection-options-editor__listbox\"\n    aria-label=\"Option selection\"\n    [disabled]=\"disabled()\">\n    @for (option of optionList(); track option.id) {\n      <mat-chip-option\n        class=\"lib-selection-options-editor__chip\"\n        color=\"accent\"\n        [value]=\"option.value\"\n        [selected]=\"inEdit()?.id === option.id\"\n        (click)=\"startEdit(option)\">\n        {{ option.label }}\n        <button\n          matChipRemove\n          [attr.aria-label]=\"'Remove ' + option.label\"\n          (click)=\"$event.stopPropagation(); remove(option)\">\n          <mat-icon>cancel</mat-icon>\n        </button>\n      </mat-chip-option>\n    }\n  </mat-chip-listbox>\n} @else if (!isEditing()) {\n  <lib-empty-state icon=\"list_alt\" message=\"No options yet\" />\n}\n\n@if (!isEditing()) {\n  <mat-toolbar class=\"lib-selection-options-editor__toolbar\">\n    <button\n      class=\"lib-selection-options-editor__add\"\n      mat-stroked-button\n      [disabled]=\"disabled()\"\n      (click)=\"add()\">\n      Add an option <mat-icon>add</mat-icon>\n    </button>\n  </mat-toolbar>\n} @else {\n  <mat-card class=\"lib-selection-options-editor__card\" appearance=\"outlined\">\n    <mat-card-header>\n      <mat-card-subtitle>{{ inEdit() ? 'Edit Option' : 'Add New Option' }}</mat-card-subtitle>\n    </mat-card-header>\n\n    <mat-card-content>\n      <form [formGroup]=\"form\">\n        <mat-form-field\n          class=\"lib-selection-options-editor__field\"\n          subscriptSizing=\"dynamic\"\n          floatLabel=\"always\"\n          appearance=\"outline\">\n          <mat-label>Display Text</mat-label>\n          <input\n            type=\"text\"\n            matInput\n            formControlName=\"label\"\n            placeholder=\"Enter option text\"\n            (blur)=\"autoFillValueFromLabel()\" />\n          <mat-hint>The text users will see and select from the list.</mat-hint>\n        </mat-form-field>\n\n        <mat-form-field\n          class=\"lib-selection-options-editor__field\"\n          subscriptSizing=\"dynamic\"\n          floatLabel=\"always\"\n          appearance=\"outline\">\n          <mat-label>Stored Value</mat-label>\n          <input type=\"text\" matInput formControlName=\"value\" placeholder=\"Enter data value\" />\n          <button\n            matSuffix\n            mat-icon-button\n            matTooltip=\"Toggle auto-creation of value from display text\"\n            [color]=\"isAutoCamelCase() ? 'primary' : ''\"\n            (click)=\"toggleAutoCamelCase()\">\n            <mat-icon>{{ isAutoCamelCase() ? 'drive_file_rename_outline' : 'edit_off' }}</mat-icon>\n          </button>\n          <mat-hint>The value saved when this option is chosen. (Often an ID or code)</mat-hint>\n        </mat-form-field>\n      </form>\n    </mat-card-content>\n\n    <mat-card-actions>\n      <button mat-button (click)=\"closeEdit()\">Cancel</button>\n      <button mat-flat-button [disabled]=\"form.invalid\" (click)=\"save()\">\n        {{ inEdit() ? 'Save Changes' : 'Add Option' }}\n      </button>\n    </mat-card-actions>\n  </mat-card>\n}\n", styles: [":host{display:flex;flex-direction:column;gap:1.5rem}.lib-selection-options-editor__listbox{display:flex;overflow-x:auto}.lib-selection-options-editor__chip{min-width:fit-content}.lib-selection-options-editor__toolbar{padding:0;background:transparent}.lib-selection-options-editor__add{width:100%}.lib-selection-options-editor__card{background:var(--lib-forms-surface);border:1px solid color-mix(in srgb,var(--lib-forms-outline) 15%,transparent);border-radius:var(--lib-forms-radius-lg, 12px);box-shadow:var(--lib-forms-shadow-resting)}.lib-selection-options-editor__field{width:100%;background:var(--lib-forms-surface)}.lib-selection-options-editor__field+.lib-selection-options-editor__field{margin-top:1.5rem}\n"] }]
+        }], propDecorators: { errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], valueChanged: [{ type: i0.Output, args: ["valueChanged"] }] } });
+
+export { SelectionOptionsEditorComponent };
+//# sourceMappingURL=ngx-t-forms-selection-options-editor.component-Dhln81DL.mjs.map