@honuware/ui 0.1.0

package/fesm2022/honuware-ui-controls.mjs

@@ -0,0 +1,624 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Output, Input, Component, Inject } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
+import * as i2 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i3 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i2$1 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i3$1 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import { MatNativeDateModule } from '@angular/material/core';
+import * as i4 from '@angular/material/datepicker';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import * as i5 from '@angular/material/timepicker';
+import { MatTimepickerModule } from '@angular/material/timepicker';
+import { isMicrosecondTimestamp, microsToDate, dateToMicros } from '@honuware/ui/foundation';
+import * as i4$1 from '@angular/material/autocomplete';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { Subject } from 'rxjs';
+import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
+import { HONUWARE_CRUD_ACCESS } from '@honuware/ui/access';
+
+class SimpleTextComponent {
+    dataInfo;
+    value;
+    readOnly = false;
+    valueChanged = new EventEmitter();
+    textInput = new FormControl();
+    isLoading = true;
+    skipValueChanges = false;
+    get displayLabel() {
+        return this.dataInfo?.label || this.dataInfo?.column_friendly_name || this.dataInfo?.column_name || '';
+    }
+    ngOnInit() {
+        const initialValue = this.value ?? this.dataInfo?.default_value ?? '';
+        this.textInput.setValue(initialValue, { emitEvent: false });
+        this.textInput.setValidators(this.getValidators());
+        this.textInput.updateValueAndValidity();
+        if (this.readOnly) {
+            this.textInput.disable();
+        }
+        this.textInput.valueChanges.subscribe((value) => {
+            if (!this.skipValueChanges) {
+                this.valueChanged.emit(value);
+            }
+        });
+        this.isLoading = false;
+    }
+    ngOnChanges(changes) {
+        if (changes['dataInfo'] && !changes['dataInfo'].firstChange) {
+            this.skipValueChanges = true;
+            const newValue = this.value ?? this.dataInfo?.default_value ?? '';
+            this.textInput.setValue(newValue, { emitEvent: false });
+            this.textInput.setValidators(this.getValidators());
+            this.textInput.updateValueAndValidity();
+            this.skipValueChanges = false;
+        }
+        if (changes['value'] && !changes['value'].firstChange) {
+            this.skipValueChanges = true;
+            this.textInput.setValue(this.value ?? '', { emitEvent: false });
+            this.textInput.setValidators(this.getValidators());
+            this.textInput.updateValueAndValidity();
+            this.skipValueChanges = false;
+        }
+    }
+    getValidators() {
+        const validators = [];
+        if (this.dataInfo?.required) {
+            validators.push(Validators.required);
+        }
+        if (this.dataInfo?.max_length) {
+            validators.push(Validators.maxLength(this.dataInfo.max_length));
+        }
+        if (this.dataInfo?.regex) {
+            validators.push(Validators.pattern(this.dataInfo.regex));
+        }
+        return validators;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SimpleTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: SimpleTextComponent, isStandalone: true, selector: "hw-simple-text", inputs: { dataInfo: "dataInfo", value: "value", readOnly: "readOnly" }, outputs: { valueChanged: "valueChanged" }, usesOnChanges: true, ngImport: i0, template: "@if (isLoading) {\n<div class=\"loading\">Loading...</div>\n}\n\n@if (!isLoading) {\n<div class=\"form-fields\">\n  <mat-form-field>\n    <mat-label>{{ displayLabel }}</mat-label>\n    <input matInput\n           [id]=\"dataInfo?.column_name ?? ''\"\n           [type]=\"dataInfo?.html_input_type || 'text'\"\n           [placeholder]=\"dataInfo?.place_holder ?? ''\"\n           [formControl]=\"textInput\" />\n\n    @if (dataInfo?.hint) {\n    <mat-hint>{{ dataInfo?.hint }}</mat-hint>\n    }\n\n  </mat-form-field>\n\n  @if (textInput.touched && textInput.hasError('required')) {\n  <mat-error>This field is required.</mat-error>\n  }\n\n  @if (textInput.touched && textInput.hasError('maxlength')) {\n  <mat-error>Max {{ dataInfo?.max_length }} characters allowed.</mat-error>\n  }\n\n  @if (textInput.touched && textInput.hasError('pattern')) {\n  <mat-error>Invalid format.</mat-error>\n  }\n\n</div>\n}\n", styles: [".form-fields{width:100%;display:flex;flex-direction:row;gap:.5rem}mat-form-field{width:100%}.loading{color:#0009;padding:8px 0}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SimpleTextComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hw-simple-text', imports: [ReactiveFormsModule, MatFormFieldModule, MatInputModule], template: "@if (isLoading) {\n<div class=\"loading\">Loading...</div>\n}\n\n@if (!isLoading) {\n<div class=\"form-fields\">\n  <mat-form-field>\n    <mat-label>{{ displayLabel }}</mat-label>\n    <input matInput\n           [id]=\"dataInfo?.column_name ?? ''\"\n           [type]=\"dataInfo?.html_input_type || 'text'\"\n           [placeholder]=\"dataInfo?.place_holder ?? ''\"\n           [formControl]=\"textInput\" />\n\n    @if (dataInfo?.hint) {\n    <mat-hint>{{ dataInfo?.hint }}</mat-hint>\n    }\n\n  </mat-form-field>\n\n  @if (textInput.touched && textInput.hasError('required')) {\n  <mat-error>This field is required.</mat-error>\n  }\n\n  @if (textInput.touched && textInput.hasError('maxlength')) {\n  <mat-error>Max {{ dataInfo?.max_length }} characters allowed.</mat-error>\n  }\n\n  @if (textInput.touched && textInput.hasError('pattern')) {\n  <mat-error>Invalid format.</mat-error>\n  }\n\n</div>\n}\n", styles: [".form-fields{width:100%;display:flex;flex-direction:row;gap:.5rem}mat-form-field{width:100%}.loading{color:#0009;padding:8px 0}\n"] }]
+        }], propDecorators: { dataInfo: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], readOnly: [{
+                type: Input
+            }], valueChanged: [{
+                type: Output
+            }] } });
+
+class LongTextComponent {
+    dataInfo;
+    value;
+    readOnly = false;
+    valueChanged = new EventEmitter();
+    textInput = new FormControl('');
+    isLoading = true;
+    skipValueChanges = false;
+    get displayLabel() {
+        return this.dataInfo?.label || this.dataInfo?.column_friendly_name || this.dataInfo?.column_name || '';
+    }
+    ngOnInit() {
+        const initialValue = this.value ?? this.dataInfo?.default_value ?? '';
+        this.textInput.setValue(initialValue, { emitEvent: false });
+        this.textInput.setValidators(this.getValidators());
+        if (this.readOnly) {
+            this.textInput.disable();
+        }
+        this.textInput.valueChanges.subscribe((value) => {
+            if (!this.skipValueChanges) {
+                this.valueChanged.emit(value);
+            }
+        });
+        this.isLoading = false;
+    }
+    ngOnChanges(changes) {
+        if (changes['dataInfo'] && !changes['dataInfo'].firstChange) {
+            this.skipValueChanges = true;
+            const newValue = this.value ?? this.dataInfo?.default_value ?? '';
+            this.textInput.setValue(newValue, { emitEvent: false });
+            this.textInput.setValidators(this.getValidators());
+            this.textInput.updateValueAndValidity();
+            this.skipValueChanges = false;
+        }
+        if (changes['value'] && !changes['value'].firstChange) {
+            this.skipValueChanges = true;
+            this.textInput.setValue(this.value ?? '', { emitEvent: false });
+            this.textInput.setValidators(this.getValidators());
+            this.textInput.updateValueAndValidity();
+            this.skipValueChanges = false;
+        }
+    }
+    getValidators() {
+        const validators = [];
+        if (this.dataInfo?.required) {
+            validators.push(Validators.required);
+        }
+        if (this.dataInfo?.max_length) {
+            validators.push(Validators.maxLength(this.dataInfo.max_length));
+        }
+        if (this.dataInfo?.regex) {
+            validators.push(Validators.pattern(this.dataInfo.regex));
+        }
+        return validators;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: LongTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: LongTextComponent, isStandalone: true, selector: "hw-long-text", inputs: { dataInfo: "dataInfo", value: "value", readOnly: "readOnly" }, outputs: { valueChanged: "valueChanged" }, usesOnChanges: true, ngImport: i0, template: "@if (isLoading) {\n<div id=\"loading\">\n  Loading...\n</div>\n}\n\n@if (!isLoading) {\n<div class=\"form-fields\">\n  <mat-form-field>\n    <mat-label>{{ displayLabel }}</mat-label>\n    <textarea matInput\n              [id]=\"dataInfo?.column_name ?? ''\"\n              [formControl]=\"textInput\"\n              [placeholder]=\"dataInfo?.place_holder ?? ''\"\n              [rows]=\"dataInfo?.rows || 3\"></textarea>\n\n    @if (dataInfo?.hint) {\n    <mat-hint>{{ dataInfo?.hint }}</mat-hint>\n    }\n\n  </mat-form-field>\n\n  @if (textInput.touched && textInput.hasError('required')) {\n  <mat-error>This field is required.</mat-error>\n  }\n\n  @if (textInput.touched && textInput.hasError('maxlength')) {\n  <mat-error>Max {{ dataInfo?.max_length }} characters allowed.</mat-error>\n  }\n\n  @if (textInput.touched && textInput.hasError('pattern')) {\n  <mat-error class=\"error\">Invalid format.</mat-error>\n  }\n\n</div>\n }\n", styles: [".form-fields{width:100%;display:flex;flex-direction:row;gap:.5rem}mat-form-field{width:100%}.loading{color:#0009;padding:8px 0}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: LongTextComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hw-long-text', standalone: true, imports: [ReactiveFormsModule, MatFormFieldModule, MatInputModule], template: "@if (isLoading) {\n<div id=\"loading\">\n  Loading...\n</div>\n}\n\n@if (!isLoading) {\n<div class=\"form-fields\">\n  <mat-form-field>\n    <mat-label>{{ displayLabel }}</mat-label>\n    <textarea matInput\n              [id]=\"dataInfo?.column_name ?? ''\"\n              [formControl]=\"textInput\"\n              [placeholder]=\"dataInfo?.place_holder ?? ''\"\n              [rows]=\"dataInfo?.rows || 3\"></textarea>\n\n    @if (dataInfo?.hint) {\n    <mat-hint>{{ dataInfo?.hint }}</mat-hint>\n    }\n\n  </mat-form-field>\n\n  @if (textInput.touched && textInput.hasError('required')) {\n  <mat-error>This field is required.</mat-error>\n  }\n\n  @if (textInput.touched && textInput.hasError('maxlength')) {\n  <mat-error>Max {{ dataInfo?.max_length }} characters allowed.</mat-error>\n  }\n\n  @if (textInput.touched && textInput.hasError('pattern')) {\n  <mat-error class=\"error\">Invalid format.</mat-error>\n  }\n\n</div>\n }\n", styles: [".form-fields{width:100%;display:flex;flex-direction:row;gap:.5rem}mat-form-field{width:100%}.loading{color:#0009;padding:8px 0}\n"] }]
+        }], propDecorators: { dataInfo: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], readOnly: [{
+                type: Input
+            }], valueChanged: [{
+                type: Output
+            }] } });
+
+class SimpleBoolComponent {
+    dataInfo;
+    value;
+    readOnly = false;
+    checkboxValueChange = new EventEmitter();
+    checkboxControl = new FormControl(false);
+    isLoading = true;
+    skipValueChanges = false;
+    isTrueValue(value) {
+        return value === 'true' || value === 't';
+    }
+    ngOnInit() {
+        const initialValue = this.value !== undefined
+            ? this.isTrueValue(this.value)
+            : this.isTrueValue(this.dataInfo?.default_value);
+        this.checkboxControl.setValue(initialValue, { emitEvent: false });
+        this.checkboxControl.updateValueAndValidity();
+        if (this.readOnly) {
+            this.checkboxControl.disable();
+        }
+        this.checkboxControl.valueChanges.subscribe((value) => {
+            if (!this.skipValueChanges) {
+                this.emitCheckboxValue(value);
+            }
+        });
+        this.isLoading = false;
+    }
+    ngOnChanges(changes) {
+        if (changes['dataInfo'] && this.dataInfo) {
+            this.skipValueChanges = true;
+            const newValue = this.value !== undefined
+                ? this.isTrueValue(this.value)
+                : this.isTrueValue(this.dataInfo.default_value);
+            this.checkboxControl.setValue(newValue, { emitEvent: false });
+            this.checkboxControl.updateValueAndValidity();
+            this.skipValueChanges = false;
+        }
+        if (changes['value'] && !changes['value'].firstChange) {
+            this.skipValueChanges = true;
+            const newValue = this.isTrueValue(this.value);
+            this.checkboxControl.setValue(newValue, { emitEvent: false });
+            this.checkboxControl.updateValueAndValidity();
+            this.skipValueChanges = false;
+        }
+        if (changes['readOnly'] && !changes['readOnly'].firstChange) {
+            if (this.readOnly) {
+                this.checkboxControl.disable();
+            }
+            else {
+                this.checkboxControl.enable();
+            }
+        }
+    }
+    emitCheckboxValue(value) {
+        const emittedValue = value ? 'true' : 'false';
+        this.checkboxValueChange.emit(emittedValue);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SimpleBoolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: SimpleBoolComponent, isStandalone: true, selector: "hw-simple-bool", inputs: { dataInfo: "dataInfo", value: "value", readOnly: "readOnly" }, outputs: { checkboxValueChange: "checkboxValueChange" }, usesOnChanges: true, ngImport: i0, template: "@if (isLoading) {\n<div class=\"loading\">Loading...</div>\n}\n\n@if (!isLoading) {\n<div class=\"form-fields\">\n  @if (readOnly) {\n    <span class=\"readonly-bool\">{{ checkboxControl.value ? 'Yes' : 'No' }}</span>\n  } @else {\n    <mat-checkbox [formControl]=\"checkboxControl\">\n      {{ dataInfo?.label }}\n    </mat-checkbox>\n  }\n</div>\n}\n", styles: [".form-fields{display:flex;flex-direction:row;gap:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SimpleBoolComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'hw-simple-bool', imports: [ReactiveFormsModule, MatCheckboxModule], template: "@if (isLoading) {\n<div class=\"loading\">Loading...</div>\n}\n\n@if (!isLoading) {\n<div class=\"form-fields\">\n  @if (readOnly) {\n    <span class=\"readonly-bool\">{{ checkboxControl.value ? 'Yes' : 'No' }}</span>\n  } @else {\n    <mat-checkbox [formControl]=\"checkboxControl\">\n      {{ dataInfo?.label }}\n    </mat-checkbox>\n  }\n</div>\n}\n", styles: [".form-fields{display:flex;flex-direction:row;gap:.5rem}\n"] }]
+        }], propDecorators: { dataInfo: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], readOnly: [{
+                type: Input
+            }], checkboxValueChange: [{
+                type: Output
+            }] } });
+
+class SimpleEnumComponent {
+    dataInfo;
+    value;
+    readOnly = false;
+    enumValueChange = new EventEmitter();
+    selectControl = new FormControl('');
+    isLoading = true;
+    skipValueChanges = false;
+    ngOnInit() {
+        const initialValue = this.value !== undefined
+            ? this.value
+            : (this.dataInfo?.default_value ?? '');
+        this.selectControl.setValue(initialValue, { emitEvent: false });
+        if (this.readOnly) {
+            this.selectControl.disable();
+        }
+        this.selectControl.valueChanges.subscribe((value) => {
+            if (!this.skipValueChanges) {
+                this.enumValueChange.emit(value);
+            }
+        });
+        this.isLoading = false;
+    }
+    ngOnChanges(changes) {
+        if (changes['dataInfo'] && this.dataInfo) {
+            this.skipValueChanges = true;
+            const newValue = this.value !== undefined
+                ? this.value
+                : (this.dataInfo.default_value ?? '');
+            this.selectControl.setValue(newValue, { emitEvent: false });
+            this.skipValueChanges = false;
+        }
+        if (changes['value'] && !changes['value'].firstChange) {
+            this.skipValueChanges = true;
+            this.selectControl.setValue(this.value ?? '', { emitEvent: false });
+            this.skipValueChanges = false;
+        }
+        if (changes['readOnly'] && !changes['readOnly'].firstChange) {
+            if (this.readOnly) {
+                this.selectControl.disable();
+            }
+            else {
+                this.selectControl.enable();
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SimpleEnumComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: SimpleEnumComponent, isStandalone: true, selector: "hw-simple-enum", inputs: { dataInfo: "dataInfo", value: "value", readOnly: "readOnly" }, outputs: { enumValueChange: "enumValueChange" }, usesOnChanges: true, ngImport: i0, template: "@if (isLoading) {\n<div class=\"loading\">Loading...</div>\n}\n\n@if (!isLoading) {\n<div class=\"form-fields\">\n  @if (readOnly) {\n    <span class=\"readonly-enum\">{{ selectControl.value }}</span>\n  } @else {\n    <mat-form-field>\n      <mat-label>{{ dataInfo?.label }}</mat-label>\n      <mat-select [formControl]=\"selectControl\">\n        @for (option of dataInfo?.enum_values; track option) {\n          <mat-option [value]=\"option\">{{ option }}</mat-option>\n        }\n      </mat-select>\n    </mat-form-field>\n  }\n</div>\n}\n", styles: [".form-fields{display:flex;flex-direction:row;gap:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatSelectModule }, { 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: "component", type: i3$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatFormFieldModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SimpleEnumComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'hw-simple-enum', imports: [ReactiveFormsModule, MatSelectModule, MatFormFieldModule], template: "@if (isLoading) {\n<div class=\"loading\">Loading...</div>\n}\n\n@if (!isLoading) {\n<div class=\"form-fields\">\n  @if (readOnly) {\n    <span class=\"readonly-enum\">{{ selectControl.value }}</span>\n  } @else {\n    <mat-form-field>\n      <mat-label>{{ dataInfo?.label }}</mat-label>\n      <mat-select [formControl]=\"selectControl\">\n        @for (option of dataInfo?.enum_values; track option) {\n          <mat-option [value]=\"option\">{{ option }}</mat-option>\n        }\n      </mat-select>\n    </mat-form-field>\n  }\n</div>\n}\n", styles: [".form-fields{display:flex;flex-direction:row;gap:.5rem}\n"] }]
+        }], propDecorators: { dataInfo: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], readOnly: [{
+                type: Input
+            }], enumValueChange: [{
+                type: Output
+            }] } });
+
+class SimpleDateComponent {
+    dataInfo;
+    value;
+    loading = true;
+    readOnly = false;
+    type = 'datetime';
+    // Minutes between selectable timepicker options. Default 20 matches the
+    // calendar's old TIME_SEGMENT_INCREMENT_MIN — callers that need a different
+    // granularity pass it in, so the control no longer depends on @pages/calendar.
+    timeIncrementMinutes = 20;
+    valueChange = new EventEmitter();
+    dateControl = new FormControl();
+    isMicrosecondInput = false;
+    isBigIntColumn() {
+        return this.dataInfo?.type === 'BIGINT';
+    }
+    parseInputValue(value) {
+        if (!value)
+            return null;
+        if (isMicrosecondTimestamp(value)) {
+            this.isMicrosecondInput = true;
+            return microsToDate(value);
+        }
+        this.isMicrosecondInput = false;
+        const parsed = new Date(value);
+        return isNaN(parsed.getTime()) ? null : parsed;
+    }
+    ngOnInit() {
+        // BIGINT date columns always use microseconds, even for new items
+        // where there's no existing value to detect the format from.
+        if (this.isBigIntColumn()) {
+            this.isMicrosecondInput = true;
+        }
+        const initialValue = this.value ?? this.dataInfo?.default_value ?? '';
+        const initialDate = this.parseInputValue(initialValue);
+        this.dateControl = new FormControl(initialDate, {
+            validators: this.dataInfo?.required ? [Validators.required] : [],
+        });
+        if (this.readOnly) {
+            this.dateControl.disable();
+        }
+        this.dateControl.valueChanges.subscribe((value) => {
+            if (value && this.dateControl.valid && Date.parse(String(value))) {
+                const date = new Date(Date.parse(String(value)));
+                if (this.isMicrosecondInput) {
+                    this.valueChange.emit(dateToMicros(date));
+                }
+                else {
+                    this.valueChange.emit(date.toISOString());
+                }
+            }
+        });
+        this.loading = false;
+    }
+    ngOnChanges(changes) {
+        if (changes['dataInfo'] && !changes['dataInfo'].firstChange) {
+            const newValue = this.value ?? this.dataInfo?.default_value ?? '';
+            const newDate = this.parseInputValue(newValue);
+            this.dateControl.setValue(newDate, { emitEvent: false });
+            this.dateControl.updateValueAndValidity();
+        }
+        if (changes['value'] && !changes['value'].firstChange) {
+            const newDate = this.parseInputValue(this.value ?? '');
+            this.dateControl.setValue(newDate, { emitEvent: false });
+            this.dateControl.updateValueAndValidity();
+        }
+        if (changes['readOnly'] && !changes['readOnly'].firstChange) {
+            if (this.readOnly) {
+                this.dateControl.disable();
+            }
+            else {
+                this.dateControl.enable();
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SimpleDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: SimpleDateComponent, isStandalone: true, selector: "hw-simple-date", inputs: { dataInfo: "dataInfo", value: "value", loading: "loading", readOnly: "readOnly", type: "type", timeIncrementMinutes: "timeIncrementMinutes" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "@if (loading) {\n<p class=\"loading\">Loading...</p>\n}\n\n@if (!loading) {\n<div class=\"form-fields\">\n  @if (type.includes('date')) {\n  <mat-form-field>\n    <mat-label>{{dataInfo?.label}} date</mat-label>\n    <input matInput [formControl]=\"dateControl\" [matDatepicker]=\"datepicker\" />\n    <mat-datepicker-toggle [for]=\"datepicker\" matIconSuffix />\n    <mat-datepicker #datepicker />\n\n    @if (dateControl.getError('required') && !dateControl.hasError('matDatepickerParse')) {\n    <mat-error>This value is required.</mat-error>\n    }\n\n    @if (dateControl.hasError('matDatepickerParse')) {\n    <mat-error>\n      '{{dateControl.getError('matDatepickerParse')?.text}}' is invalid\n    </mat-error>\n    }\n  </mat-form-field>\n  }\n\n  @if (type.includes('time')) {\n  <mat-form-field>\n    <mat-label>{{dataInfo?.label}} time</mat-label>\n    <input matInput [formControl]=\"dateControl\" [matTimepicker]=\"timePicker\" />\n    <mat-timepicker-toggle matIconSuffix [for]=\"timePicker\" />\n    <mat-timepicker #timePicker interval=\"{{timeIncrementMinutes}}m\" />\n\n    @if (dateControl.getError('required') && !dateControl.hasError('matTimepickerParse')) {\n    <mat-error>This value is required.</mat-error>\n    }\n\n    @if (dateControl.hasError('matTimepickerParse')) {\n    <mat-error>\n      '{{dateControl.getError('matTimepickerParse')?.text}}' is invalid\n    </mat-error>\n    }\n  </mat-form-field>\n  }\n</div>\n}\n", styles: [".form-fields{display:flex;flex-direction:row;gap:.5rem}.mat-form-field .mat-error{white-space:normal;line-height:1.5;max-height:none;padding:0}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: MatNativeDateModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatTimepickerModule }, { kind: "component", type: i5.MatTimepicker, selector: "mat-timepicker", inputs: ["interval", "options", "disableRipple", "aria-label", "aria-labelledby", "panelClass"], outputs: ["selected", "opened", "closed"], exportAs: ["matTimepicker"] }, { kind: "directive", type: i5.MatTimepickerInput, selector: "input[matTimepicker]", inputs: ["value", "matTimepicker", "matTimepickerMin", "matTimepickerMax", "matTimepickerOpenOnClick", "disabled"], outputs: ["valueChange"], exportAs: ["matTimepickerInput"] }, { kind: "component", type: i5.MatTimepickerToggle, selector: "mat-timepicker-toggle", inputs: ["for", "aria-label", "aria-labelledby", "disabled", "tabIndex", "disableRipple"], exportAs: ["matTimepickerToggle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SimpleDateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hw-simple-date', standalone: true, imports: [
+                        ReactiveFormsModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatNativeDateModule,
+                        MatDatepickerModule,
+                        MatTimepickerModule,
+                    ], template: "@if (loading) {\n<p class=\"loading\">Loading...</p>\n}\n\n@if (!loading) {\n<div class=\"form-fields\">\n  @if (type.includes('date')) {\n  <mat-form-field>\n    <mat-label>{{dataInfo?.label}} date</mat-label>\n    <input matInput [formControl]=\"dateControl\" [matDatepicker]=\"datepicker\" />\n    <mat-datepicker-toggle [for]=\"datepicker\" matIconSuffix />\n    <mat-datepicker #datepicker />\n\n    @if (dateControl.getError('required') && !dateControl.hasError('matDatepickerParse')) {\n    <mat-error>This value is required.</mat-error>\n    }\n\n    @if (dateControl.hasError('matDatepickerParse')) {\n    <mat-error>\n      '{{dateControl.getError('matDatepickerParse')?.text}}' is invalid\n    </mat-error>\n    }\n  </mat-form-field>\n  }\n\n  @if (type.includes('time')) {\n  <mat-form-field>\n    <mat-label>{{dataInfo?.label}} time</mat-label>\n    <input matInput [formControl]=\"dateControl\" [matTimepicker]=\"timePicker\" />\n    <mat-timepicker-toggle matIconSuffix [for]=\"timePicker\" />\n    <mat-timepicker #timePicker interval=\"{{timeIncrementMinutes}}m\" />\n\n    @if (dateControl.getError('required') && !dateControl.hasError('matTimepickerParse')) {\n    <mat-error>This value is required.</mat-error>\n    }\n\n    @if (dateControl.hasError('matTimepickerParse')) {\n    <mat-error>\n      '{{dateControl.getError('matTimepickerParse')?.text}}' is invalid\n    </mat-error>\n    }\n  </mat-form-field>\n  }\n</div>\n}\n", styles: [".form-fields{display:flex;flex-direction:row;gap:.5rem}.mat-form-field .mat-error{white-space:normal;line-height:1.5;max-height:none;padding:0}\n"] }]
+        }], propDecorators: { dataInfo: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], readOnly: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], timeIncrementMinutes: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+class FkPickerComponent {
+    serverAccess;
+    dataInfo;
+    value;
+    readOnly = false;
+    foreignKeyInfo;
+    preloadThreshold = 50;
+    valueChanged = new EventEmitter();
+    searchControl = new FormControl('');
+    filteredOptions = [];
+    isLoading = true;
+    resolvedDisplayText = '';
+    selectedValue = '';
+    skipValueChanges = false;
+    searchSubject = new Subject();
+    subscriptions = [];
+    constructor(serverAccess) {
+        this.serverAccess = serverAccess;
+    }
+    get displayLabel() {
+        return this.dataInfo?.label || this.dataInfo?.column_friendly_name || this.dataInfo?.column_name || '';
+    }
+    ngOnInit() {
+        this.selectedValue = this.value ?? '';
+        if (this.readOnly) {
+            this.searchControl.disable();
+            this.resolveDisplayText();
+        }
+        else {
+            this.setupSearch();
+            this.loadInitialOptions();
+        }
+        this.isLoading = false;
+    }
+    ngOnChanges(changes) {
+        if (changes['value'] && !changes['value'].firstChange) {
+            this.skipValueChanges = true;
+            this.selectedValue = this.value ?? '';
+            if (this.readOnly) {
+                this.resolveDisplayText();
+            }
+            else {
+                this.updateSearchControlFromValue();
+            }
+            this.skipValueChanges = false;
+        }
+    }
+    ngOnDestroy() {
+        this.subscriptions.forEach(sub => sub.unsubscribe());
+        this.searchSubject.complete();
+    }
+    displayFn = (option) => {
+        if (typeof option === 'string')
+            return option;
+        return option?.display ?? '';
+    };
+    onOptionSelected(event) {
+        const selected = event.option.value;
+        this.selectedValue = selected.value;
+        this.valueChanged.emit(selected.value);
+    }
+    setupSearch() {
+        const searchSub = this.searchSubject.pipe(debounceTime(300), distinctUntilChanged(), switchMap(searchText => {
+            const tableName = this.foreignKeyInfo?.parent_table_name ?? '';
+            return this.serverAccess.getFkOptions(tableName, searchText, 50);
+        })).subscribe(response => {
+            this.filteredOptions = response.options;
+        });
+        this.subscriptions.push(searchSub);
+        const valueChangesSub = this.searchControl.valueChanges.subscribe(value => {
+            if (this.skipValueChanges)
+                return;
+            // If the user is typing (not selecting), trigger search
+            if (typeof value === 'string') {
+                this.searchSubject.next(value);
+            }
+        });
+        this.subscriptions.push(valueChangesSub);
+    }
+    loadInitialOptions() {
+        const tableName = this.foreignKeyInfo?.parent_table_name ?? '';
+        if (!tableName)
+            return;
+        this.serverAccess.getFkOptions(tableName, '', this.preloadThreshold).subscribe(response => {
+            this.filteredOptions = response.options;
+            this.updateSearchControlFromValue();
+        });
+    }
+    updateSearchControlFromValue() {
+        if (!this.selectedValue)
+            return;
+        const match = this.filteredOptions.find(o => o.value === this.selectedValue);
+        if (match) {
+            this.searchControl.setValue(match, { emitEvent: false });
+        }
+        else {
+            // Value not in loaded options; resolve display text
+            const tableName = this.foreignKeyInfo?.parent_table_name ?? '';
+            if (tableName) {
+                this.serverAccess.resolveFkDisplay(tableName, [this.selectedValue]).subscribe(response => {
+                    const displayText = response.resolved[this.selectedValue] ?? this.selectedValue;
+                    const syntheticOption = { value: this.selectedValue, display: displayText };
+                    this.searchControl.setValue(syntheticOption, { emitEvent: false });
+                });
+            }
+        }
+    }
+    resolveDisplayText() {
+        if (!this.selectedValue || !this.foreignKeyInfo?.parent_table_name) {
+            this.resolvedDisplayText = this.selectedValue;
+            return;
+        }
+        this.serverAccess.resolveFkDisplay(this.foreignKeyInfo.parent_table_name, [this.selectedValue]).subscribe(response => {
+            this.resolvedDisplayText = response.resolved[this.selectedValue] ?? this.selectedValue;
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FkPickerComponent, deps: [{ token: HONUWARE_CRUD_ACCESS }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: FkPickerComponent, isStandalone: true, selector: "hw-fk-picker", inputs: { dataInfo: "dataInfo", value: "value", readOnly: "readOnly", foreignKeyInfo: "foreignKeyInfo", preloadThreshold: "preloadThreshold" }, outputs: { valueChanged: "valueChanged" }, usesOnChanges: true, ngImport: i0, template: "@if (isLoading) {\n<div class=\"loading\">Loading...</div>\n}\n\n@if (!isLoading) {\n<div class=\"form-fields\">\n  @if (readOnly) {\n    <mat-form-field>\n      <mat-label>{{ displayLabel }}</mat-label>\n      <input matInput [value]=\"resolvedDisplayText\" disabled>\n    </mat-form-field>\n  } @else {\n    <mat-form-field>\n      <mat-label>{{ displayLabel }}</mat-label>\n      <input matInput\n             [formControl]=\"searchControl\"\n             [matAutocomplete]=\"auto\"\n             [placeholder]=\"dataInfo?.place_holder ?? ''\">\n      <mat-autocomplete #auto=\"matAutocomplete\"\n                        panelWidth=\"auto\"\n                        [displayWith]=\"displayFn\"\n                        (optionSelected)=\"onOptionSelected($event)\">\n        @for (option of filteredOptions; track option.value) {\n          <mat-option [value]=\"option\">{{ option.display }}</mat-option>\n        }\n      </mat-autocomplete>\n    </mat-form-field>\n  }\n</div>\n}\n", styles: [".form-fields{width:100%;display:flex;flex-direction:row;gap:.5rem}mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: MatAutocompleteModule }, { kind: "component", type: i4$1.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: i3$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: FkPickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hw-fk-picker', standalone: true, imports: [
+                        ReactiveFormsModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatAutocompleteModule
+                    ], template: "@if (isLoading) {\n<div class=\"loading\">Loading...</div>\n}\n\n@if (!isLoading) {\n<div class=\"form-fields\">\n  @if (readOnly) {\n    <mat-form-field>\n      <mat-label>{{ displayLabel }}</mat-label>\n      <input matInput [value]=\"resolvedDisplayText\" disabled>\n    </mat-form-field>\n  } @else {\n    <mat-form-field>\n      <mat-label>{{ displayLabel }}</mat-label>\n      <input matInput\n             [formControl]=\"searchControl\"\n             [matAutocomplete]=\"auto\"\n             [placeholder]=\"dataInfo?.place_holder ?? ''\">\n      <mat-autocomplete #auto=\"matAutocomplete\"\n                        panelWidth=\"auto\"\n                        [displayWith]=\"displayFn\"\n                        (optionSelected)=\"onOptionSelected($event)\">\n        @for (option of filteredOptions; track option.value) {\n          <mat-option [value]=\"option\">{{ option.display }}</mat-option>\n        }\n      </mat-autocomplete>\n    </mat-form-field>\n  }\n</div>\n}\n", styles: [".form-fields{width:100%;display:flex;flex-direction:row;gap:.5rem}mat-form-field{width:100%}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [HONUWARE_CRUD_ACCESS]
+                }] }], propDecorators: { dataInfo: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], readOnly: [{
+                type: Input
+            }], foreignKeyInfo: [{
+                type: Input
+            }], preloadThreshold: [{
+                type: Input
+            }], valueChanged: [{
+                type: Output
+            }] } });
+
+class CompositeControlComponent {
+    dataInfo;
+    value;
+    readOnly = false;
+    foreignKeyInfo;
+    valueChanged = new EventEmitter();
+    isLoading = true;
+    activeComponent = null;
+    ngOnChanges(changes) {
+        if (changes['dataInfo'] || changes['foreignKeyInfo']) {
+            this.isLoading = !this.dataInfo;
+            this.activeComponent = this.determineActiveComponent();
+        }
+    }
+    determineActiveComponent() {
+        // FK columns take priority when foreignKeyInfo is provided
+        if (this.foreignKeyInfo) {
+            return 'fk';
+        }
+        // Auto-detect bool columns even without explicit html_input_type
+        if (!this.dataInfo?.html_input_type && this.dataInfo?.type === 'bool') {
+            return 'bool';
+        }
+        switch (this.dataInfo?.html_input_type) {
+            case 'enum':
+                return 'enum';
+            case 'long-text':
+                return 'long-text';
+            case 'bool':
+            case 'checkbox':
+                return 'bool';
+            case 'date':
+            case 'time':
+                return 'date';
+            case 'text':
+            default:
+                // Default to text for unknown or unspecified types
+                return 'text';
+        }
+    }
+    onValueChanged(value) {
+        this.valueChanged.emit(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: CompositeControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: CompositeControlComponent, isStandalone: true, selector: "hw-composite-control", inputs: { dataInfo: "dataInfo", value: "value", readOnly: "readOnly", foreignKeyInfo: "foreignKeyInfo" }, outputs: { valueChanged: "valueChanged" }, usesOnChanges: true, ngImport: i0, template: "@if (isLoading)\n{\n<div>Loading...</div>\n}\n\n@if (!isLoading)\n{\n  @switch (activeComponent)\n  {\n    @case ('text')\n    {\n<hw-simple-text [dataInfo]=\"dataInfo\"\n                 [value]=\"value\"\n                 [readOnly]=\"readOnly\"\n                 (valueChanged)=\"onValueChanged($event)\">\n</hw-simple-text>\n    }\n\n    @case ('long-text')\n    {\n<hw-long-text [dataInfo]=\"dataInfo\"\n               [value]=\"value\"\n               [readOnly]=\"readOnly\"\n               (valueChanged)=\"onValueChanged($event)\">\n</hw-long-text>\n    }\n\n    @case ('enum')\n    {\n<hw-simple-enum [dataInfo]=\"dataInfo\"\n                 [value]=\"value\"\n                 [readOnly]=\"readOnly\"\n                 (enumValueChange)=\"onValueChanged($event)\">\n</hw-simple-enum>\n    }\n\n    @case ('bool')\n    {\n<hw-simple-bool [dataInfo]=\"dataInfo\"\n                 [value]=\"value\"\n                 [readOnly]=\"readOnly\"\n                 (checkboxValueChange)=\"onValueChanged($event)\">\n</hw-simple-bool>\n    }\n\n    @case ('date')\n    {\n<hw-simple-date [dataInfo]=\"dataInfo\"\n                 [value]=\"value\"\n                 [readOnly]=\"readOnly\"\n                 (valueChange)=\"onValueChanged($event)\">\n</hw-simple-date>\n    }\n\n    @case ('fk')\n    {\n<hw-fk-picker [dataInfo]=\"dataInfo\"\n               [value]=\"value\"\n               [readOnly]=\"readOnly\"\n               [foreignKeyInfo]=\"foreignKeyInfo\"\n               (valueChanged)=\"onValueChanged($event)\">\n</hw-fk-picker>\n    }\n\n    @default\n    {\n<div>\n  Unsupported component type.\n</div>\n    }\n  }\n}\n", styles: [""], dependencies: [{ kind: "component", type: SimpleTextComponent, selector: "hw-simple-text", inputs: ["dataInfo", "value", "readOnly"], outputs: ["valueChanged"] }, { kind: "component", type: LongTextComponent, selector: "hw-long-text", inputs: ["dataInfo", "value", "readOnly"], outputs: ["valueChanged"] }, { kind: "component", type: SimpleBoolComponent, selector: "hw-simple-bool", inputs: ["dataInfo", "value", "readOnly"], outputs: ["checkboxValueChange"] }, { kind: "component", type: SimpleDateComponent, selector: "hw-simple-date", inputs: ["dataInfo", "value", "loading", "readOnly", "type", "timeIncrementMinutes"], outputs: ["valueChange"] }, { kind: "component", type: SimpleEnumComponent, selector: "hw-simple-enum", inputs: ["dataInfo", "value", "readOnly"], outputs: ["enumValueChange"] }, { kind: "component", type: FkPickerComponent, selector: "hw-fk-picker", inputs: ["dataInfo", "value", "readOnly", "foreignKeyInfo", "preloadThreshold"], outputs: ["valueChanged"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: CompositeControlComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hw-composite-control', standalone: true, imports: [SimpleTextComponent, LongTextComponent, SimpleBoolComponent, SimpleDateComponent, SimpleEnumComponent, FkPickerComponent], template: "@if (isLoading)\n{\n<div>Loading...</div>\n}\n\n@if (!isLoading)\n{\n  @switch (activeComponent)\n  {\n    @case ('text')\n    {\n<hw-simple-text [dataInfo]=\"dataInfo\"\n                 [value]=\"value\"\n                 [readOnly]=\"readOnly\"\n                 (valueChanged)=\"onValueChanged($event)\">\n</hw-simple-text>\n    }\n\n    @case ('long-text')\n    {\n<hw-long-text [dataInfo]=\"dataInfo\"\n               [value]=\"value\"\n               [readOnly]=\"readOnly\"\n               (valueChanged)=\"onValueChanged($event)\">\n</hw-long-text>\n    }\n\n    @case ('enum')\n    {\n<hw-simple-enum [dataInfo]=\"dataInfo\"\n                 [value]=\"value\"\n                 [readOnly]=\"readOnly\"\n                 (enumValueChange)=\"onValueChanged($event)\">\n</hw-simple-enum>\n    }\n\n    @case ('bool')\n    {\n<hw-simple-bool [dataInfo]=\"dataInfo\"\n                 [value]=\"value\"\n                 [readOnly]=\"readOnly\"\n                 (checkboxValueChange)=\"onValueChanged($event)\">\n</hw-simple-bool>\n    }\n\n    @case ('date')\n    {\n<hw-simple-date [dataInfo]=\"dataInfo\"\n                 [value]=\"value\"\n                 [readOnly]=\"readOnly\"\n                 (valueChange)=\"onValueChanged($event)\">\n</hw-simple-date>\n    }\n\n    @case ('fk')\n    {\n<hw-fk-picker [dataInfo]=\"dataInfo\"\n               [value]=\"value\"\n               [readOnly]=\"readOnly\"\n               [foreignKeyInfo]=\"foreignKeyInfo\"\n               (valueChanged)=\"onValueChanged($event)\">\n</hw-fk-picker>\n    }\n\n    @default\n    {\n<div>\n  Unsupported component type.\n</div>\n    }\n  }\n}\n" }]
+        }], propDecorators: { dataInfo: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], readOnly: [{
+                type: Input
+            }], foreignKeyInfo: [{
+                type: Input
+            }], valueChanged: [{
+                type: Output
+            }] } });
+
+/*
+ * @honuware/ui/controls — schema-driven field controls (depends on foundation +
+ * access). The leaf fields (simple-text, long-text, simple-bool, simple-enum,
+ * simple-date), the composite-control type dispatcher, and the fk-picker
+ * autocomplete. Selectors use the `hw-` prefix.
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CompositeControlComponent, FkPickerComponent, LongTextComponent, SimpleBoolComponent, SimpleDateComponent, SimpleEnumComponent, SimpleTextComponent };
+//# sourceMappingURL=honuware-ui-controls.mjs.map