ngx-t-forms 2.0.29 → 2.0.31

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

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-t-forms-selection-options-editor.component-Dhln81DL.mjs","sources":["../../../projects/ngx-t-forms/src/lib/components/t-dynamic-data-edit/elements/selection-options-editor/selection-options-editor.component.ts","../../../projects/ngx-t-forms/src/lib/components/t-dynamic-data-edit/elements/selection-options-editor/selection-options-editor.component.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  PLATFORM_ID,\n  ViewEncapsulation,\n  computed,\n  inject,\n  input,\n  output,\n  signal,\n} from '@angular/core';\nimport { DOCUMENT, isPlatformBrowser } from '@angular/common';\nimport {\n  FormControl,\n  FormGroup,\n  NonNullableFormBuilder,\n  ReactiveFormsModule,\n  Validators,\n} from '@angular/forms';\n\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatCardModule } from '@angular/material/card';\nimport { MatChipsModule } from '@angular/material/chips';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatToolbarModule } from '@angular/material/toolbar';\nimport { MatTooltipModule } from '@angular/material/tooltip';\n\nimport { v4 as uuidv4 } from 'uuid';\n\nimport type { IConfigElementError } from '../../t-dynamic-data-edit.component';\nimport { EmptyStateComponent } from '../_shared/empty-state/empty-state.component';\n\n/** A single selectable option managed by the editor. */\ninterface Option {\n  /** Stable identifier, generated once per option and never reassigned. */\n  id: string;\n  /** Display text the end user sees in the rendered form. */\n  label: string;\n  /** Stored value persisted when the option is chosen. */\n  value: string;\n}\n\n/** Reactive form shape backing the add/edit card. */\ntype OptionForm = FormGroup<{\n  label: FormControl<string>;\n  value: FormControl<string>;\n}>;\n\nlet nextUniqueId = 0;\n\n/**\n * Editor for a list of selectable `{ id, label, value }` options. Renders inside\n * `t-dynamic-data-edit`, which supplies the field label, hint, and validation\n * errors — so this component owns only the chip list plus the add/edit card.\n *\n * @example\n *   <lib-selection-options-editor\n *     [options]=\"options()\"\n *     [disabled]=\"disabled()\"\n *     (valueChanged)=\"onOptions($event)\" />\n */\n@Component({\n  selector: 'lib-selection-options-editor',\n  templateUrl: './selection-options-editor.component.html',\n  styleUrl: './selection-options-editor.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.Emulated,\n  host: {\n    'class': 'lib-selection-options-editor',\n    '[attr.id]': 'hostId',\n  },\n  imports: [\n    ReactiveFormsModule,\n    MatButtonModule,\n    MatCardModule,\n    MatChipsModule,\n    MatFormFieldModule,\n    MatIconModule,\n    MatInputModule,\n    MatToolbarModule,\n    MatTooltipModule,\n    EmptyStateComponent,\n  ],\n})\nexport class SelectionOptionsEditorComponent {\n  /** Validation errors surfaced by the parent (kept for contract parity). */\n  readonly errors = input<IConfigElementError[] | undefined>([]);\n\n  /** Disables interaction with the chip list and the add control. */\n  readonly disabled = input<boolean>(false);\n\n  /** Current set of options to edit. */\n  readonly options = input<readonly Option[]>([]);\n\n  /** Fires the full option list whenever it is added to, edited, or pruned. */\n  readonly valueChanged = output<Option[]>();\n\n  /** Stable host id used by the parent's `[attr.id]` binding. */\n  readonly hostId = `app-selection-options-editor-${nextUniqueId++}`;\n\n  readonly #platformId = inject(PLATFORM_ID);\n  readonly #document = inject(DOCUMENT);\n  readonly #fb = inject(NonNullableFormBuilder);\n\n  /** Option being edited (existing) or added (no id yet); `null` when closed. */\n  protected readonly inEdit = signal<Option | null>(null);\n\n  /** Whether the editor is in \"add new\" mode (open card, no existing id). */\n  protected readonly isAdding = signal<boolean>(false);\n\n  /** When true, an empty value auto-fills from the camelCased label on blur. */\n  protected readonly isAutoCamelCase = signal<boolean>(true);\n\n  /** Live snapshot of the upstream options, defensively normalised to an array. */\n  protected readonly optionList = computed<readonly Option[]>(() => this.options() ?? []);\n\n  /** Whether the add/edit card is currently open. */\n  protected readonly isEditing = computed<boolean>(\n    () => this.isAdding() || this.inEdit() !== null,\n  );\n\n  /** Reactive form for the open add/edit card. */\n  protected readonly form: OptionForm = this.#fb.group({\n    label: this.#fb.control('', Validators.required),\n    value: this.#fb.control('', Validators.required),\n  });\n\n  /** Opens the card to add a new option. */\n  protected add(): void {\n    this.inEdit.set(null);\n    this.isAdding.set(true);\n    this.#resetForm('', '');\n  }\n\n  /** Opens the card to edit an existing option. */\n  protected startEdit(option: Option): void {\n    this.isAdding.set(false);\n    this.inEdit.set(option);\n    this.#resetForm(option.label, option.value);\n  }\n\n  /** Closes the card without persisting changes. */\n  protected closeEdit(): void {\n    this.inEdit.set(null);\n    this.isAdding.set(false);\n  }\n\n  /** Removes an option after browser confirmation, then emits the new list. */\n  protected remove(option: Option): void {\n    if (!isPlatformBrowser(this.#platformId)) return;\n    const win = this.#document.defaultView;\n    if (!win) return;\n    if (!win.confirm(`Are you sure you want to delete the option \"${option.label}\"?`)) return;\n\n    this.valueChanged.emit(this.optionList().filter((o) => o.id !== option.id));\n    if (this.inEdit()?.id === option.id) this.closeEdit();\n  }\n\n  /** Persists the open card as a new or updated option, then emits the list. */\n  protected save(): void {\n    if (this.form.invalid) return;\n\n    const { label, value } = this.form.getRawValue();\n    const editing = this.inEdit();\n    const next = editing\n      ? this.optionList().map((o) => (o.id === editing.id ? { ...o, label, value } : o))\n      : [...this.optionList(), { id: uuidv4(), label, value }];\n\n    this.valueChanged.emit(next);\n    this.closeEdit();\n  }\n\n  /** Toggles auto-camelCase generation of an empty value from the label. */\n  protected toggleAutoCamelCase(): void {\n    this.isAutoCamelCase.update((on) => !on);\n  }\n\n  /**\n   * Fills an empty `value` with the camelCased `label` on label blur. A value\n   * the user already set is never overwritten.\n   */\n  protected autoFillValueFromLabel(): void {\n    if (!this.isAutoCamelCase()) return;\n    const label = this.form.controls.label.value.trim();\n    if (label && !this.form.controls.value.value) {\n      this.form.controls.value.setValue(this.#camelCase(label));\n    }\n  }\n\n  /** Resets the form to the supplied label/value pair. */\n  #resetForm(label: string, value: string): void {\n    this.form.reset({ label, value });\n  }\n\n  /** Native camelCase: identical output to the previous lodash dependency. */\n  #camelCase(input: string): string {\n    const words = input\n      .replace(/[^A-Za-z0-9]+/g, ' ')\n      .replace(/([a-z0-9])([A-Z])/g, '$1 $2')\n      .trim()\n      .toLowerCase()\n      .split(/\\s+/)\n      .filter((w) => w.length > 0);\n    return words\n      .map((word, i) => (i === 0 ? word : word.charAt(0).toUpperCase() + word.slice(1)))\n      .join('');\n  }\n}\n","@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"],"names":["uuidv4","i2","i5","i6","i8","i9"],"mappings":"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"}

package/fesm2022/ngx-t-forms-t-workflow-picker.component-leBokXvM.mjs

@@ -0,0 +1,204 @@
+import * as i0 from '@angular/core';
+import { output, inject, ElementRef, DestroyRef, Input, Optional, Self, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i3$3 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { MatFormFieldControl } from '@angular/material/form-field';
+import { Subject, take, tap, catchError } from 'rxjs';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import * as i5 from '@angular/material/toolbar';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import * as i1$1 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i3 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i3$1 from '@angular/material/card';
+import { MatCardModule } from '@angular/material/card';
+import * as i4 from '@angular/material/list';
+import { MatListModule } from '@angular/material/list';
+import * as i1$2 from '@angular/material/chips';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatDividerModule } from '@angular/material/divider';
+import * as i3$2 from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import * as i1 from '@angular/forms';
+
+class TWorkflowPickerComponent {
+    static { this.nextId = 0; }
+    get required() {
+        return this._required;
+    }
+    set required(value) {
+        this._required = coerceBooleanProperty(value);
+        this.stateChanges.next();
+    }
+    get value() {
+        return this._value;
+    }
+    set value(val) {
+        this._value = val;
+        this.onChange(val);
+        this.stateChanges.next();
+    }
+    get placeholder() {
+        return this._placeholder;
+    }
+    set placeholder(value) {
+        this._placeholder = value;
+        this.stateChanges.next();
+    }
+    get shouldLabelFloat() {
+        return this.focused || !this.empty;
+    }
+    get empty() {
+        return !this.value || this.value.length === 0;
+    }
+    get errorState() {
+        return ((!this.value && this.required && this.touched) ||
+            !!this.ngControl?.errors ||
+            (this.errors || []).length > 0);
+    }
+    #elementRef;
+    #destroyRef;
+    constructor(ngControl) {
+        this.ngControl = ngControl;
+        this.stateChanges = new Subject();
+        this.focused = false;
+        this.touched = false;
+        this.disabled = false;
+        this.controlType = 'lib-t-workflow-picker';
+        this.autofilled = false;
+        this.errors = [];
+        this.valueChange = output();
+        this._required = false;
+        this._value = undefined;
+        this._placeholder = '';
+        this.id = `lib-t-workflow-picker-${TWorkflowPickerComponent.nextId++}`;
+        this.describedBy = '';
+        this.#elementRef = inject(ElementRef);
+        this.#destroyRef = inject(DestroyRef);
+        // ControlValueAccessor methods — Angular's CVA contract accepts any callback signature.
+        // TODO(Phase-4): revisit once Angular tightens CVA generics upstream.
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.onChange = () => { };
+        this.onTouched = () => { };
+        this.valueChanged = output();
+        this.workflowNameChanged = output();
+        this.error = undefined;
+        this.loading = false;
+        if (this.ngControl != null) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    ngOnInit() {
+        this.loadWorkflows();
+    }
+    writeValue(value) {
+        this._value = value;
+        this.stateChanges.next();
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this.stateChanges.next();
+    }
+    // MatFormFieldControl methods
+    setDescribedByIds(ids) {
+        const element = this.#elementRef?.nativeElement;
+        if (element) {
+            element.setAttribute('aria-describedby', ids.join(' '));
+        }
+    }
+    onContainerClick(_event) {
+        if (!this.focused) {
+            this.focused = true;
+            this.stateChanges.next();
+        }
+    }
+    markAsTouched() {
+        if (!this.touched) {
+            this.touched = true;
+            this.onTouched();
+            this.stateChanges.next();
+        }
+    }
+    set getWorkflowOptions(value) {
+        this._getWorkflowOptions = value;
+    }
+    get workflowOptions() {
+        return this._workflowOptions || [];
+    }
+    unbindInput() {
+        this.value = undefined;
+        this.valueChanged.emit(this.value);
+        this.workflowNameChanged.emit(undefined);
+    }
+    bindInput(workflow) {
+        this.valueChanged.emit(workflow.id);
+        this.workflowNameChanged.emit(workflow.name);
+    }
+    get selectedWorkflow() {
+        return this._workflowOptions?.find((workflow) => workflow.id === this.value);
+    }
+    loadWorkflows() {
+        if (!this._getWorkflowOptions)
+            return;
+        this.loading = true;
+        this._getWorkflowOptions
+            ?.pipe(take(1), tap((workflows) => {
+            this.error = undefined;
+            this._workflowOptions = workflows;
+            this.loading = false;
+        }, catchError((error) => {
+            this.loading = false;
+            this.error = error;
+            return error;
+        })), takeUntilDestroyed(this.#destroyRef))
+            .subscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TWorkflowPickerComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TWorkflowPickerComponent, isStandalone: true, selector: "lib-t-workflow-picker", inputs: { disabled: "disabled", errors: "errors", required: "required", value: "value", placeholder: "placeholder", getWorkflowOptions: "getWorkflowOptions" }, outputs: { valueChange: "valueChange", valueChanged: "valueChanged", workflowNameChanged: "workflowNameChanged" }, host: { properties: { "attr.id": "id", "attr.aria-describedby": "describedBy", "class.floating": "shouldLabelFloat" } }, providers: [{ provide: MatFormFieldControl, useExisting: TWorkflowPickerComponent }], ngImport: i0, template: "@if (error) {\r\n<mat-toolbar>\r\n    <span>\r\n        Failed to load workflow list\r\n    </span>\r\n    <span class=\"spacer\"></span>\r\n    <button color=\"primary\" mat-raised-button>\r\n        Retry\r\n\r\n    </button>\r\n</mat-toolbar>\r\n}@else {\r\n    <mat-toolbar>\r\n        <span style=\"font-size: x-small;\">\r\n            Reload Worlkflows\r\n        </span>\r\n        <span class=\"spacer\">\r\n\r\n        </span>\r\n        <button (click)=\"loadWorkflows()\" mat-stroked-button>\r\n            Reload \r\n            <mat-icon>\r\n                refresh\r\n            </mat-icon>\r\n        </button>\r\n    </mat-toolbar>\r\n}\r\n@if(loading){\r\n<div class=\"loadingContainer\">\r\n    <mat-spinner></mat-spinner>\r\n</div>\r\n}\r\n@if(!loading&& !error){\r\n<mat-card>\r\n    <mat-nav-list style=\"padding: 0px;\">\r\n        @if(!value){\r\n        @for (option of workflowOptions; track option.id) {\r\n        <mat-list-item (click)=\"bindInput(option)\">\r\n\r\n            <mat-chip class=\"docType\" \r\n            \r\n            [style.background]=\"!option.isCheckInCheckOut && option['isDocument'] ? 'lightskyblue' :option.isCheckInCheckOut?'antiquewhite':'' \"\r\n            \r\n            matListItemIcon>\r\n                <span style=\"font-size: 0.625em;\">\r\n                    @if (option.isCheckInCheckOut) {\r\n                        IN/OUT\r\n                    }@else {\r\n                    {{ option[\"isDocument\"] ? \"DOC\" : \"FLOW\" }}\r\n                    }\r\n\r\n                </span>\r\n            </mat-chip>\r\n\r\n\r\n            <div matListItemTitle>\r\n                <div>\r\n                    {{ option.name }}\r\n                </div>\r\n\r\n                <div style=\"font-size: 0.8125em; opacity: 0.6;line-height:normal\">\r\n                    {{ option[\"createdAt\"] | date: \"medium\" }} &nbsp;\r\n                    {{ option.numberOfSteps }}\r\n                </div>\r\n            </div>\r\n            <button matListItemMeta mat-icon-button>\r\n                <mat-icon>\r\n                    radio_button_unchecked\r\n                </mat-icon>\r\n            </button>\r\n\r\n        </mat-list-item>\r\n        <mat-divider></mat-divider>\r\n        }\r\n        }\r\n        @if(value){\r\n        <mat-list-item (click)=\" unbindInput() \">\r\n\r\n            <mat-chip class=\"docType\" \r\n            \r\n                    [style.background]=\"!selectedWorkflow?.isCheckInCheckOut && selectedWorkflow?.['isDocument'] ? 'lightskyblue' :selectedWorkflow?.isCheckInCheckOut?'antiquewhite':'' \"\r\n                matListItemIcon>\r\n                <span style=\"font-size: 0.625em;\">\r\n               @if (selectedWorkflow?.isCheckInCheckOut) {\r\n                        IN/OUT\r\n                    }@else {\r\n                    {{ selectedWorkflow?.[\"isDocument\"] ? \"DOC\" : \"FLOW\" }}\r\n                    }\r\n                </span>\r\n            </mat-chip>\r\n\r\n\r\n            <div matListItemTitle>\r\n                <div>\r\n                    {{ selectedWorkflow?.name }}\r\n                </div>\r\n\r\n                <div style=\"font-size: 0.8125em; opacity: 0.6;line-height:normal\">\r\n                    {{selectedWorkflow?.[\"createdAt\"] | date: \"medium\" }} &nbsp;\r\n                    {{ selectedWorkflow?.numberOfSteps }}\r\n                </div>\r\n            </div>\r\n            <button matListItemMeta mat-icon-button>\r\n                <mat-icon color=\"primary\">\r\n                    check_circle\r\n                </mat-icon>\r\n            </button>\r\n\r\n        </mat-list-item>\r\n        }\r\n\r\n\r\n    </mat-nav-list>\r\n    \r\n</mat-card>\r\n\r\n}", styles: [".suggestion-container{display:flex;width:100%;gap:14px}.docType{width:min-content;margin-top:auto!important;margin-bottom:auto!important}mat-card{margin-bottom:8px;background:var(--mat-sys-surface-container, var(--mat-app-surface))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i5.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { 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: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i4.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { 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.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "component", type: i4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i4.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i4.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i1$2.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: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i3$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: i3$3.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TWorkflowPickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-t-workflow-picker', imports: [
+                        CommonModule,
+                        MatToolbarModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatCardModule,
+                        MatListModule,
+                        MatChipsModule,
+                        MatDividerModule,
+                        MatProgressSpinnerModule,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, providers: [{ provide: MatFormFieldControl, useExisting: TWorkflowPickerComponent }], host: {
+                        '[attr.id]': 'id',
+                        '[attr.aria-describedby]': 'describedBy',
+                        '[class.floating]': 'shouldLabelFloat',
+                    }, template: "@if (error) {\r\n<mat-toolbar>\r\n    <span>\r\n        Failed to load workflow list\r\n    </span>\r\n    <span class=\"spacer\"></span>\r\n    <button color=\"primary\" mat-raised-button>\r\n        Retry\r\n\r\n    </button>\r\n</mat-toolbar>\r\n}@else {\r\n    <mat-toolbar>\r\n        <span style=\"font-size: x-small;\">\r\n            Reload Worlkflows\r\n        </span>\r\n        <span class=\"spacer\">\r\n\r\n        </span>\r\n        <button (click)=\"loadWorkflows()\" mat-stroked-button>\r\n            Reload \r\n            <mat-icon>\r\n                refresh\r\n            </mat-icon>\r\n        </button>\r\n    </mat-toolbar>\r\n}\r\n@if(loading){\r\n<div class=\"loadingContainer\">\r\n    <mat-spinner></mat-spinner>\r\n</div>\r\n}\r\n@if(!loading&& !error){\r\n<mat-card>\r\n    <mat-nav-list style=\"padding: 0px;\">\r\n        @if(!value){\r\n        @for (option of workflowOptions; track option.id) {\r\n        <mat-list-item (click)=\"bindInput(option)\">\r\n\r\n            <mat-chip class=\"docType\" \r\n            \r\n            [style.background]=\"!option.isCheckInCheckOut && option['isDocument'] ? 'lightskyblue' :option.isCheckInCheckOut?'antiquewhite':'' \"\r\n            \r\n            matListItemIcon>\r\n                <span style=\"font-size: 0.625em;\">\r\n                    @if (option.isCheckInCheckOut) {\r\n                        IN/OUT\r\n                    }@else {\r\n                    {{ option[\"isDocument\"] ? \"DOC\" : \"FLOW\" }}\r\n                    }\r\n\r\n                </span>\r\n            </mat-chip>\r\n\r\n\r\n            <div matListItemTitle>\r\n                <div>\r\n                    {{ option.name }}\r\n                </div>\r\n\r\n                <div style=\"font-size: 0.8125em; opacity: 0.6;line-height:normal\">\r\n                    {{ option[\"createdAt\"] | date: \"medium\" }} &nbsp;\r\n                    {{ option.numberOfSteps }}\r\n                </div>\r\n            </div>\r\n            <button matListItemMeta mat-icon-button>\r\n                <mat-icon>\r\n                    radio_button_unchecked\r\n                </mat-icon>\r\n            </button>\r\n\r\n        </mat-list-item>\r\n        <mat-divider></mat-divider>\r\n        }\r\n        }\r\n        @if(value){\r\n        <mat-list-item (click)=\" unbindInput() \">\r\n\r\n            <mat-chip class=\"docType\" \r\n            \r\n                    [style.background]=\"!selectedWorkflow?.isCheckInCheckOut && selectedWorkflow?.['isDocument'] ? 'lightskyblue' :selectedWorkflow?.isCheckInCheckOut?'antiquewhite':'' \"\r\n                matListItemIcon>\r\n                <span style=\"font-size: 0.625em;\">\r\n               @if (selectedWorkflow?.isCheckInCheckOut) {\r\n                        IN/OUT\r\n                    }@else {\r\n                    {{ selectedWorkflow?.[\"isDocument\"] ? \"DOC\" : \"FLOW\" }}\r\n                    }\r\n                </span>\r\n            </mat-chip>\r\n\r\n\r\n            <div matListItemTitle>\r\n                <div>\r\n                    {{ selectedWorkflow?.name }}\r\n                </div>\r\n\r\n                <div style=\"font-size: 0.8125em; opacity: 0.6;line-height:normal\">\r\n                    {{selectedWorkflow?.[\"createdAt\"] | date: \"medium\" }} &nbsp;\r\n                    {{ selectedWorkflow?.numberOfSteps }}\r\n                </div>\r\n            </div>\r\n            <button matListItemMeta mat-icon-button>\r\n                <mat-icon color=\"primary\">\r\n                    check_circle\r\n                </mat-icon>\r\n            </button>\r\n\r\n        </mat-list-item>\r\n        }\r\n\r\n\r\n    </mat-nav-list>\r\n    \r\n</mat-card>\r\n\r\n}", styles: [".suggestion-container{display:flex;width:100%;gap:14px}.docType{width:min-content;margin-top:auto!important;margin-bottom:auto!important}mat-card{margin-bottom:8px;background:var(--mat-sys-surface-container, var(--mat-app-surface))}\n"] }]
+        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }], propDecorators: { disabled: [{
+                type: Input
+            }], errors: [{
+                type: Input
+            }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], required: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], getWorkflowOptions: [{
+                type: Input
+            }], valueChanged: [{ type: i0.Output, args: ["valueChanged"] }], workflowNameChanged: [{ type: i0.Output, args: ["workflowNameChanged"] }] } });
+
+export { TWorkflowPickerComponent };
+//# sourceMappingURL=ngx-t-forms-t-workflow-picker.component-leBokXvM.mjs.map

package/fesm2022/ngx-t-forms-t-workflow-picker.component-leBokXvM.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-t-forms-t-workflow-picker.component-leBokXvM.mjs","sources":["../../../projects/ngx-t-forms/src/lib/components/t-dynamic-data-edit/elements/t-workflow-picker/t-workflow-picker.component.ts","../../../projects/ngx-t-forms/src/lib/components/t-dynamic-data-edit/elements/t-workflow-picker/t-workflow-picker.component.html"],"sourcesContent":["import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  DestroyRef,\r\n  ElementRef,\r\n  Input,\r\n  OnInit,\r\n  Optional,\r\n  Self,\r\n  ViewEncapsulation,\r\n  inject,\r\n  output,\r\n} from '@angular/core';\r\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\r\n\r\nimport { IWorkflowOption } from 'ngx-t-forms-types';\r\nimport { CommonModule } from '@angular/common';\r\nimport { MatFormFieldControl } from '@angular/material/form-field';\r\nimport { IConfigElementError } from '../../t-dynamic-data-edit.component';\r\nimport { catchError, Observable, Subject, take, tap } from 'rxjs';\r\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\r\nimport { NgControl } from '@angular/forms';\r\nimport { MatToolbarModule } from '@angular/material/toolbar';\r\nimport { MatButtonModule } from '@angular/material/button';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { MatCardModule } from '@angular/material/card';\r\nimport { MatListModule } from '@angular/material/list';\r\nimport { MatChipsModule } from '@angular/material/chips';\r\nimport { MatDividerModule } from '@angular/material/divider';\r\nimport { MatProgressSpinnerModule } from '@angular/material/progress-spinner';\r\n\r\n@Component({\r\n  selector: 'lib-t-workflow-picker',\r\n  imports: [\r\n    CommonModule,\r\n    MatToolbarModule,\r\n    MatButtonModule,\r\n    MatIconModule,\r\n    MatCardModule,\r\n    MatListModule,\r\n    MatChipsModule,\r\n    MatDividerModule,\r\n    MatProgressSpinnerModule,\r\n  ],\r\n  templateUrl: './t-workflow-picker.component.html',\r\n  styleUrl: './t-workflow-picker.component.css',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  encapsulation: ViewEncapsulation.Emulated,\r\n  providers: [{ provide: MatFormFieldControl, useExisting: TWorkflowPickerComponent }],\r\n  host: {\r\n    '[attr.id]': 'id',\r\n    '[attr.aria-describedby]': 'describedBy',\r\n    '[class.floating]': 'shouldLabelFloat',\r\n  },\r\n})\r\nexport class TWorkflowPickerComponent\r\n  implements MatFormFieldControl<string | undefined>, OnInit\r\n{\r\n  static nextId = 0;\r\n\r\n  readonly stateChanges = new Subject<void>();\r\n  focused = false;\r\n  touched = false;\r\n  @Input() disabled = false;\r\n  readonly controlType = 'lib-t-workflow-picker';\r\n  readonly autofilled = false;\r\n\r\n  @Input() errors: IConfigElementError[] | undefined = [];\r\n  readonly valueChange = output<string[] | undefined>();\r\n\r\n  private _required = false;\r\n  @Input()\r\n  get required(): boolean {\r\n    return this._required;\r\n  }\r\n  set required(value: boolean) {\r\n    this._required = coerceBooleanProperty(value);\r\n    this.stateChanges.next();\r\n  }\r\n\r\n  private _value: string | undefined = undefined;\r\n  @Input()\r\n  get value(): string | undefined {\r\n    return this._value;\r\n  }\r\n  set value(val: string | undefined) {\r\n    this._value = val;\r\n    this.onChange(val);\r\n    this.stateChanges.next();\r\n  }\r\n\r\n  @Input()\r\n  get placeholder(): string {\r\n    return this._placeholder;\r\n  }\r\n  set placeholder(value: string) {\r\n    this._placeholder = value;\r\n    this.stateChanges.next();\r\n  }\r\n  private _placeholder: string = '';\r\n\r\n  readonly id = `lib-t-workflow-picker-${TWorkflowPickerComponent.nextId++}`;\r\n  describedBy = '';\r\n  get shouldLabelFloat(): boolean {\r\n    return this.focused || !this.empty;\r\n  }\r\n\r\n  get empty(): boolean {\r\n    return !this.value || this.value.length === 0;\r\n  }\r\n\r\n  get errorState(): boolean {\r\n    return (\r\n      (!this.value && this.required && this.touched) ||\r\n      !!this.ngControl?.errors ||\r\n      (this.errors || []).length > 0\r\n    );\r\n  }\r\n\r\n  readonly #elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\r\n  readonly #destroyRef = inject(DestroyRef);\r\n\r\n  constructor(@Optional() @Self() public ngControl: NgControl) {\r\n    if (this.ngControl != null) {\r\n      this.ngControl.valueAccessor = this;\r\n    }\r\n  }\r\n\r\n  ngOnInit(): void {\r\n    this.loadWorkflows();\r\n  }\r\n\r\n  // ControlValueAccessor methods — Angular's CVA contract accepts any callback signature.\r\n  // TODO(Phase-4): revisit once Angular tightens CVA generics upstream.\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  onChange: (val: any) => void = () => {};\r\n  onTouched: () => void = () => {};\r\n\r\n  writeValue(value: string | undefined): void {\r\n    this._value = value;\r\n    this.stateChanges.next();\r\n  }\r\n\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  registerOnChange(fn: (val: any) => void): void {\r\n    this.onChange = fn;\r\n  }\r\n\r\n  registerOnTouched(fn: () => void): void {\r\n    this.onTouched = fn;\r\n  }\r\n\r\n  setDisabledState(isDisabled: boolean): void {\r\n    this.disabled = isDisabled;\r\n    this.stateChanges.next();\r\n  }\r\n\r\n  // MatFormFieldControl methods\r\n  setDescribedByIds(ids: string[]): void {\r\n    const element = this.#elementRef?.nativeElement;\r\n    if (element) {\r\n      element.setAttribute('aria-describedby', ids.join(' '));\r\n    }\r\n  }\r\n\r\n  onContainerClick(_event: MouseEvent): void {\r\n    if (!this.focused) {\r\n      this.focused = true;\r\n      this.stateChanges.next();\r\n    }\r\n  }\r\n\r\n  markAsTouched(): void {\r\n    if (!this.touched) {\r\n      this.touched = true;\r\n      this.onTouched();\r\n      this.stateChanges.next();\r\n    }\r\n  }\r\n\r\n  private _workflowOptions: IWorkflowOption[] | undefined;\r\n  protected _getWorkflowOptions: Observable<IWorkflowOption[] | undefined> | undefined;\r\n  @Input() set getWorkflowOptions(\r\n    value: Observable<IWorkflowOption[] | undefined> | undefined\r\n  ) {\r\n    this._getWorkflowOptions = value;\r\n  }\r\n\r\n  readonly valueChanged = output<string | undefined>();\r\n  readonly workflowNameChanged = output<string | undefined>();\r\n\r\n  protected error: unknown = undefined;\r\n  protected loading: boolean = false;\r\n\r\n  protected get workflowOptions(): IWorkflowOption[] {\r\n    return this._workflowOptions || [];\r\n  }\r\n\r\n  protected unbindInput(): void {\r\n    this.value = undefined;\r\n    this.valueChanged.emit(this.value);\r\n    this.workflowNameChanged.emit(undefined);\r\n  }\r\n\r\n  protected bindInput(workflow: IWorkflowOption): void {\r\n    this.valueChanged.emit(workflow.id);\r\n    this.workflowNameChanged.emit(workflow.name);\r\n  }\r\n\r\n  protected get selectedWorkflow(): IWorkflowOption | undefined {\r\n    return this._workflowOptions?.find((workflow) => workflow.id === this.value);\r\n  }\r\n\r\n  protected loadWorkflows(): void {\r\n    if (!this._getWorkflowOptions) return;\r\n    this.loading = true;\r\n    this._getWorkflowOptions\r\n      ?.pipe(\r\n        take(1),\r\n        tap(\r\n          (workflows) => {\r\n            this.error = undefined;\r\n            this._workflowOptions = workflows;\r\n            this.loading = false;\r\n          },\r\n          catchError((error) => {\r\n            this.loading = false;\r\n            this.error = error;\r\n            return error;\r\n          })\r\n        ),\r\n        takeUntilDestroyed(this.#destroyRef)\r\n      )\r\n      .subscribe();\r\n  }\r\n}\r\n","@if (error) {\r\n<mat-toolbar>\r\n    <span>\r\n        Failed to load workflow list\r\n    </span>\r\n    <span class=\"spacer\"></span>\r\n    <button color=\"primary\" mat-raised-button>\r\n        Retry\r\n\r\n    </button>\r\n</mat-toolbar>\r\n}@else {\r\n    <mat-toolbar>\r\n        <span style=\"font-size: x-small;\">\r\n            Reload Worlkflows\r\n        </span>\r\n        <span class=\"spacer\">\r\n\r\n        </span>\r\n        <button (click)=\"loadWorkflows()\" mat-stroked-button>\r\n            Reload \r\n            <mat-icon>\r\n                refresh\r\n            </mat-icon>\r\n        </button>\r\n    </mat-toolbar>\r\n}\r\n@if(loading){\r\n<div class=\"loadingContainer\">\r\n    <mat-spinner></mat-spinner>\r\n</div>\r\n}\r\n@if(!loading&& !error){\r\n<mat-card>\r\n    <mat-nav-list style=\"padding: 0px;\">\r\n        @if(!value){\r\n        @for (option of workflowOptions; track option.id) {\r\n        <mat-list-item (click)=\"bindInput(option)\">\r\n\r\n            <mat-chip class=\"docType\" \r\n            \r\n            [style.background]=\"!option.isCheckInCheckOut && option['isDocument'] ? 'lightskyblue' :option.isCheckInCheckOut?'antiquewhite':'' \"\r\n            \r\n            matListItemIcon>\r\n                <span style=\"font-size: 0.625em;\">\r\n                    @if (option.isCheckInCheckOut) {\r\n                        IN/OUT\r\n                    }@else {\r\n                    {{ option[\"isDocument\"] ? \"DOC\" : \"FLOW\" }}\r\n                    }\r\n\r\n                </span>\r\n            </mat-chip>\r\n\r\n\r\n            <div matListItemTitle>\r\n                <div>\r\n                    {{ option.name }}\r\n                </div>\r\n\r\n                <div style=\"font-size: 0.8125em; opacity: 0.6;line-height:normal\">\r\n                    {{ option[\"createdAt\"] | date: \"medium\" }} &nbsp;\r\n                    {{ option.numberOfSteps }}\r\n                </div>\r\n            </div>\r\n            <button matListItemMeta mat-icon-button>\r\n                <mat-icon>\r\n                    radio_button_unchecked\r\n                </mat-icon>\r\n            </button>\r\n\r\n        </mat-list-item>\r\n        <mat-divider></mat-divider>\r\n        }\r\n        }\r\n        @if(value){\r\n        <mat-list-item (click)=\" unbindInput() \">\r\n\r\n            <mat-chip class=\"docType\" \r\n            \r\n                    [style.background]=\"!selectedWorkflow?.isCheckInCheckOut && selectedWorkflow?.['isDocument'] ? 'lightskyblue' :selectedWorkflow?.isCheckInCheckOut?'antiquewhite':'' \"\r\n                matListItemIcon>\r\n                <span style=\"font-size: 0.625em;\">\r\n               @if (selectedWorkflow?.isCheckInCheckOut) {\r\n                        IN/OUT\r\n                    }@else {\r\n                    {{ selectedWorkflow?.[\"isDocument\"] ? \"DOC\" : \"FLOW\" }}\r\n                    }\r\n                </span>\r\n            </mat-chip>\r\n\r\n\r\n            <div matListItemTitle>\r\n                <div>\r\n                    {{ selectedWorkflow?.name }}\r\n                </div>\r\n\r\n                <div style=\"font-size: 0.8125em; opacity: 0.6;line-height:normal\">\r\n                    {{selectedWorkflow?.[\"createdAt\"] | date: \"medium\" }} &nbsp;\r\n                    {{ selectedWorkflow?.numberOfSteps }}\r\n                </div>\r\n            </div>\r\n            <button matListItemMeta mat-icon-button>\r\n                <mat-icon color=\"primary\">\r\n                    check_circle\r\n                </mat-icon>\r\n            </button>\r\n\r\n        </mat-list-item>\r\n        }\r\n\r\n\r\n    </mat-nav-list>\r\n    \r\n</mat-card>\r\n\r\n}"],"names":["i2","i3","i4","i5","i6","i7","i8","i9"],"mappings":"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"}

package/fesm2022/ngx-t-forms-textarea-input-element.component-BEbXJjFA.mjs

@@ -0,0 +1,95 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, input, DestroyRef, ViewEncapsulation, ChangeDetectionStrategy, Component, output, computed } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { NgControl, ReactiveFormsModule } from '@angular/forms';
+import * as i2$1 from '@angular/material/form-field';
+import { MatFormFieldControl, MatFormFieldModule } from '@angular/material/form-field';
+import * as i3 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i1$1 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 { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i2 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import { Subject, debounceTime } from 'rxjs';
+
+const customInputConfig = {
+    controlType: 'lib-text-area-reactive-input',
+    nextId: 0,
+};
+class TextAreaReactiveInputComponent extends BaseCustomInput {
+    get empty() {
+        const n = this.value;
+        // Check for null, undefined, or empty string, but allow 0
+        return n === null || n === undefined || n === '';
+    }
+    get shouldLabelFloat() {
+        return true;
+    }
+    #destroyRef;
+    #debounceTime;
+    #valueSubject;
+    constructor() {
+        super(inject(NgControl, { self: true, optional: true }), inject(ElementRef), customInputConfig);
+        this.auto = input(undefined, ...(ngDevMode ? [{ debugName: "auto" }] : /* istanbul ignore next */ []));
+        this.inputConfig = input.required(...(ngDevMode ? [{ debugName: "inputConfig" }] : /* istanbul ignore next */ []));
+        this.#destroyRef = inject(DestroyRef);
+        this.#debounceTime = 300;
+        this.#valueSubject = new Subject();
+    }
+    ngOnInit() {
+        this.#valueSubject
+            .pipe(debounceTime(this.#debounceTime), takeUntilDestroyed(this.#destroyRef))
+            .subscribe(event => {
+            const target = event.target;
+            this.value = target.value;
+            this.stateChanges.next();
+            this.onChange(this.value);
+        });
+    }
+    onInputChange($event) {
+        this.#valueSubject.next($event);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TextAreaReactiveInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: TextAreaReactiveInputComponent, isStandalone: true, selector: "lib-text-area-reactive-input", inputs: { auto: { classPropertyName: "auto", publicName: "auto", isSignal: true, isRequired: false, transformFunction: null }, inputConfig: { classPropertyName: "inputConfig", publicName: "inputConfig", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.floating": "shouldLabelFloat", "id": "id" } }, providers: [{ provide: MatFormFieldControl, useExisting: TextAreaReactiveInputComponent }], usesInheritance: true, ngImport: i0, template: "\r\n<textarea\r\n    [readonly]=\"inputConfig().readonly\"\r\n      [required]=\"inputConfig().required\"\r\n      [attr.maxlength]=\"inputConfig().maxLength\" [attr.minlength]=\"inputConfig().minLength\"\r\n      [rows]=\"inputConfig().rows\" [spellcheck]=\"inputConfig().spellcheck\"\r\n      [value]=\"value\"\r\n      [autocapitalize]=\"inputConfig().autocapitalize\" [autocomplete]=\"inputConfig().autocomplete\"\r\n      (input)=\"onInputChange($event)\"\r\n      [placeholder]=\"inputConfig().placeholder||''\" [wrap]=\"inputConfig().wrap\" matInput></textarea>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TextAreaReactiveInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-text-area-reactive-input', imports: [
+                        ReactiveFormsModule,
+                        MatInputModule,
+                    ], host: {
+                        '[class.floating]': 'shouldLabelFloat',
+                        '[id]': 'id',
+                    }, providers: [{ provide: MatFormFieldControl, useExisting: TextAreaReactiveInputComponent }], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, template: "\r\n<textarea\r\n    [readonly]=\"inputConfig().readonly\"\r\n      [required]=\"inputConfig().required\"\r\n      [attr.maxlength]=\"inputConfig().maxLength\" [attr.minlength]=\"inputConfig().minLength\"\r\n      [rows]=\"inputConfig().rows\" [spellcheck]=\"inputConfig().spellcheck\"\r\n      [value]=\"value\"\r\n      [autocapitalize]=\"inputConfig().autocapitalize\" [autocomplete]=\"inputConfig().autocomplete\"\r\n      (input)=\"onInputChange($event)\"\r\n      [placeholder]=\"inputConfig().placeholder||''\" [wrap]=\"inputConfig().wrap\" matInput></textarea>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { auto: [{ type: i0.Input, args: [{ isSignal: true, alias: "auto", required: false }] }], inputConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputConfig", required: true }] }] } });
+
+/** Wraps a reactive textarea control inside a `mat-form-field`. */
+class TextareaInputElementComponent {
+    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 */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TextareaInputElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TextareaInputElementComponent, isStandalone: true, selector: "lib-textarea-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: "<form [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-text-area-reactive-input\r\n        [inputConfig]=\"inputConfig\"\r\n        [required]=\"inputConfig.required\"\r\n        [formControlName]=\"inputConfig.id\"\r\n      ></lib-text-area-reactive-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      @if (!!errorMessage()) {\r\n        <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{ errorMessage() }}</mat-error>\r\n      }\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</form>\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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { 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: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: TFormInputStatusComponent, selector: "lib-t-form-input-status", inputs: ["inputConfig"] }, { kind: "component", type: TextAreaReactiveInputComponent, selector: "lib-text-area-reactive-input", inputs: ["auto", "inputConfig"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TextareaInputElementComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-textarea-input-element', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        ReactiveFormsModule,
+                        MatFormFieldModule,
+                        MatIconModule,
+                        MatButtonModule,
+                        MatTooltipModule,
+                        TFormInputStatusComponent,
+                        TextAreaReactiveInputComponent,
+                    ], template: "<form [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-text-area-reactive-input\r\n        [inputConfig]=\"inputConfig\"\r\n        [required]=\"inputConfig.required\"\r\n        [formControlName]=\"inputConfig.id\"\r\n      ></lib-text-area-reactive-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      @if (!!errorMessage()) {\r\n        <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{ errorMessage() }}</mat-error>\r\n      }\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</form>\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 { TextareaInputElementComponent };
+//# sourceMappingURL=ngx-t-forms-textarea-input-element.component-BEbXJjFA.mjs.map

package/fesm2022/ngx-t-forms-textarea-input-element.component-BEbXJjFA.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-t-forms-textarea-input-element.component-BEbXJjFA.mjs","sources":["../../../projects/ngx-t-forms/src/lib/components/t-form-input/elements/textarea-input-element/core/text-area-reactive-input/text-area-reactive-input.component.ts","../../../projects/ngx-t-forms/src/lib/components/t-form-input/elements/textarea-input-element/core/text-area-reactive-input/text-area-reactive-input.component.html","../../../projects/ngx-t-forms/src/lib/components/t-form-input/elements/textarea-input-element/textarea-input-element.component.ts","../../../projects/ngx-t-forms/src/lib/components/t-form-input/elements/textarea-input-element/textarea-input-element.component.html"],"sourcesContent":["import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  DestroyRef,\r\n  ElementRef,\r\n  OnInit,\r\n  ViewEncapsulation,\r\n  inject,\r\n  input,\r\n} from '@angular/core';\r\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\r\nimport { NgControl, ReactiveFormsModule } from '@angular/forms';\r\nimport { BaseCustomInput, BaseCustomInputConfig } from '../../../../../../services/core/t-input-controller/functions/baseCustomInput';\r\nimport { MatFormFieldControl } from '@angular/material/form-field';\r\nimport { MatAutocomplete } from '@angular/material/autocomplete';\r\nimport { MatInputModule } from '@angular/material/input';\r\nimport { ITowerStepColumn } from 'ngx-t-forms-types';\r\nimport { Subject, debounceTime } from 'rxjs';\r\n\r\nconst customInputConfig: BaseCustomInputConfig = {\r\n  controlType: 'lib-text-area-reactive-input',\r\n  nextId: 0,\r\n};\r\n\r\n@Component({\r\n  selector: 'lib-text-area-reactive-input',\r\n  imports: [\r\n    ReactiveFormsModule,\r\n    MatInputModule,\r\n  ],\r\n  host: {\r\n    '[class.floating]': 'shouldLabelFloat',\r\n    '[id]': 'id',\r\n  },\r\n  providers: [{ provide: MatFormFieldControl, useExisting: TextAreaReactiveInputComponent }],\r\n  templateUrl: './text-area-reactive-input.component.html',\r\n  styleUrl: './text-area-reactive-input.component.css',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  encapsulation: ViewEncapsulation.Emulated,\r\n})\r\nexport class TextAreaReactiveInputComponent extends BaseCustomInput<string | number | Date> implements OnInit {\r\n  override get empty(): boolean {\r\n    const n = this.value;\r\n    // Check for null, undefined, or empty string, but allow 0\r\n    return n === null || n === undefined || (n as unknown) === '';\r\n  }\r\n\r\n  override get shouldLabelFloat(): boolean {\r\n    return true;\r\n  }\r\n\r\n  readonly auto = input<MatAutocomplete | undefined>(undefined);\r\n  readonly inputConfig = input.required<ITowerStepColumn>();\r\n\r\n  readonly #destroyRef = inject(DestroyRef);\r\n  readonly #debounceTime = 300;\r\n  readonly #valueSubject = new Subject<Event>();\r\n\r\n  constructor() {\r\n    super(\r\n      inject(NgControl, { self: true, optional: true }) as NgControl,\r\n      inject<ElementRef<HTMLElement>>(ElementRef),\r\n      customInputConfig,\r\n    );\r\n  }\r\n\r\n  ngOnInit(): void {\r\n    this.#valueSubject\r\n      .pipe(\r\n        debounceTime(this.#debounceTime),\r\n        takeUntilDestroyed(this.#destroyRef),\r\n      )\r\n      .subscribe(event => {\r\n        const target = event.target as HTMLTextAreaElement;\r\n        this.value = target.value;\r\n        this.stateChanges.next();\r\n        this.onChange(this.value);\r\n      });\r\n  }\r\n\r\n  protected onInputChange($event: Event): void {\r\n    this.#valueSubject.next($event);\r\n  }\r\n}\r\n","\r\n<textarea\r\n    [readonly]=\"inputConfig().readonly\"\r\n      [required]=\"inputConfig().required\"\r\n      [attr.maxlength]=\"inputConfig().maxLength\" [attr.minlength]=\"inputConfig().minLength\"\r\n      [rows]=\"inputConfig().rows\" [spellcheck]=\"inputConfig().spellcheck\"\r\n      [value]=\"value\"\r\n      [autocapitalize]=\"inputConfig().autocapitalize\" [autocomplete]=\"inputConfig().autocomplete\"\r\n      (input)=\"onInputChange($event)\"\r\n      [placeholder]=\"inputConfig().placeholder||''\" [wrap]=\"inputConfig().wrap\" matInput></textarea>\r\n","import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';\r\nimport { FormGroup, ReactiveFormsModule } from '@angular/forms';\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 { TextAreaReactiveInputComponent } from './core/text-area-reactive-input/text-area-reactive-input.component';\r\nimport { getInputErrorMessage } from '../../../../services/core/t-input-controller/functions/inputErrorMessage';\r\n\r\n/** Wraps a reactive textarea control inside a `mat-form-field`. */\r\n@Component({\r\n  selector: 'lib-textarea-input-element',\r\n  templateUrl: './textarea-input-element.component.html',\r\n  styleUrl: './textarea-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    TFormInputStatusComponent,\r\n    TextAreaReactiveInputComponent,\r\n  ],\r\n})\r\nexport class TextareaInputElementComponent {\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 readonly errorMessage = computed(() =>\r\n    getInputErrorMessage(this.inputConfig(), this.formGroup()),\r\n  );\r\n}\r\n","<form [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-text-area-reactive-input\r\n        [inputConfig]=\"inputConfig\"\r\n        [required]=\"inputConfig.required\"\r\n        [formControlName]=\"inputConfig.id\"\r\n      ></lib-text-area-reactive-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      @if (!!errorMessage()) {\r\n        <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{ errorMessage() }}</mat-error>\r\n      }\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</form>\r\n"],"names":["i1","i2","i4"],"mappings":"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"}

package/fesm2022/ngx-t-forms-toggle-input-element.component-DDErRUJd.mjs

@@ -0,0 +1,82 @@
+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$1 from '@angular/material/form-field';
+import { MatFormFieldControl, MatFormFieldModule } from '@angular/material/form-field';
+import * as i3 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 * as i1 from '@angular/material/slide-toggle';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import * as i2 from '@angular/cdk/overlay';
+import { OverlayModule } from '@angular/cdk/overlay';
+import { TitleCasePipe } from '@angular/common';
+
+const customInputConfig = {
+    controlType: 'lib-toggle',
+    nextId: 0
+};
+class ToggleComponent extends BaseCustomInput {
+    constructor() {
+        super(inject(NgControl, { optional: true, self: true }), inject(ElementRef), customInputConfig);
+        this.inputConfig = input.required(...(ngDevMode ? [{ debugName: "inputConfig" }] : /* istanbul ignore next */ []));
+    }
+    get empty() {
+        return !this.value;
+    }
+    get shouldLabelFloat() {
+        return this.focused || !this.empty;
+    }
+    changed(event) {
+        this.value = event.checked;
+        this.onChange(event.checked);
+        this.stateChanges.next();
+    }
+    get isChecked() {
+        return Boolean(this.value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: ToggleComponent, isStandalone: true, selector: "lib-toggle", inputs: { inputConfig: { classPropertyName: "inputConfig", publicName: "inputConfig", isSignal: true, isRequired: true, transformFunction: null } }, providers: [{ provide: MatFormFieldControl, useExisting: ToggleComponent }], usesInheritance: true, ngImport: i0, template: "<ng-template\r\n  cdkConnectedOverlay\r\n  [cdkConnectedOverlayOpen]=\"!!(inputConfig().disabled || inputConfig().readonly)\"\r\n>\r\n  <div style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.1);\">\r\n  </div>\r\n</ng-template>\r\n\r\n<mat-slide-toggle\r\n  style=\"display: block\"\r\n  [disabledInteractive]=\"inputConfig().disabled || inputConfig().readonly\"\r\n  [required]=\"inputConfig().required\"\r\n  [labelPosition]=\"inputConfig().labelPosition || 'after'\"\r\n  (change)=\"changed($event)\"\r\n  [checked]=\"isChecked\"\r\n  [ariaReadOnly]=\"inputConfig().disabled\"\r\n  [disabled]=\"inputConfig().disabled\"\r\n>\r\n  @if (inputConfig().falseLabel || inputConfig().trueLabel) {\r\n    @if (inputConfig().labelPosition !== 'after') {\r\n      {{ inputConfig().label | titlecase }}\r\n      <span class=\"spacer\"></span>\r\n      @if (isChecked) {\r\n        <span class=\"true-label\">{{ inputConfig().trueLabel || 'Yes' }}</span>\r\n      } @else {\r\n        <span class=\"false-label\">{{ inputConfig().falseLabel || 'No' }}</span>\r\n      }\r\n    } @else {\r\n      @if (isChecked) {\r\n        <span class=\"true-label\">{{ inputConfig().trueLabel || 'Yes' }}</span>\r\n      } @else {\r\n        <span class=\"false-label\">{{ inputConfig().falseLabel || 'No' }}</span>\r\n      }\r\n      <span class=\"spacer\"></span>\r\n      {{ inputConfig().label | titlecase }}\r\n    }\r\n  }\r\n</mat-slide-toggle>\r\n", styles: [".false-label{font-weight:500;color:var(--mat-sys-error)!important}.true-label{font-weight:500;color:var(--mat-sys-primary)!important}.spacer{width:16px;display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-toggle', imports: [MatSlideToggleModule, OverlayModule, TitleCasePipe], providers: [{ provide: MatFormFieldControl, useExisting: ToggleComponent }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template\r\n  cdkConnectedOverlay\r\n  [cdkConnectedOverlayOpen]=\"!!(inputConfig().disabled || inputConfig().readonly)\"\r\n>\r\n  <div style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.1);\">\r\n  </div>\r\n</ng-template>\r\n\r\n<mat-slide-toggle\r\n  style=\"display: block\"\r\n  [disabledInteractive]=\"inputConfig().disabled || inputConfig().readonly\"\r\n  [required]=\"inputConfig().required\"\r\n  [labelPosition]=\"inputConfig().labelPosition || 'after'\"\r\n  (change)=\"changed($event)\"\r\n  [checked]=\"isChecked\"\r\n  [ariaReadOnly]=\"inputConfig().disabled\"\r\n  [disabled]=\"inputConfig().disabled\"\r\n>\r\n  @if (inputConfig().falseLabel || inputConfig().trueLabel) {\r\n    @if (inputConfig().labelPosition !== 'after') {\r\n      {{ inputConfig().label | titlecase }}\r\n      <span class=\"spacer\"></span>\r\n      @if (isChecked) {\r\n        <span class=\"true-label\">{{ inputConfig().trueLabel || 'Yes' }}</span>\r\n      } @else {\r\n        <span class=\"false-label\">{{ inputConfig().falseLabel || 'No' }}</span>\r\n      }\r\n    } @else {\r\n      @if (isChecked) {\r\n        <span class=\"true-label\">{{ inputConfig().trueLabel || 'Yes' }}</span>\r\n      } @else {\r\n        <span class=\"false-label\">{{ inputConfig().falseLabel || 'No' }}</span>\r\n      }\r\n      <span class=\"spacer\"></span>\r\n      {{ inputConfig().label | titlecase }}\r\n    }\r\n  }\r\n</mat-slide-toggle>\r\n", styles: [".false-label{font-weight:500;color:var(--mat-sys-error)!important}.true-label{font-weight:500;color:var(--mat-sys-primary)!important}.spacer{width:16px;display:inline-block}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { inputConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputConfig", required: true }] }] } });
+
+/**
+ * Wraps `lib-toggle` in a `mat-form-field` and surfaces the configured
+ * label / hint / error / suffix / prefix metadata for the column.
+ */
+class ToggleInputElementComponent {
+    constructor() {
+        /** Form-input column definition. */
+        this.inputConfig = input.required(...(ngDevMode ? [{ debugName: "inputConfig" }] : /* istanbul ignore next */ []));
+        /** Reactive form group hosting the control identified by `inputConfig.id`. */
+        this.formGroup = input.required(...(ngDevMode ? [{ debugName: "formGroup" }] : /* istanbul ignore next */ []));
+        /** Emitted when the consumer requests a reload of this input. */
+        this.reload = output();
+        this.errorMessage = computed(() => getInputErrorMessage(this.inputConfig(), this.formGroup()), ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ToggleInputElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: ToggleInputElementComponent, isStandalone: true, selector: "lib-toggle-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: "<form [formGroup]=\"formGroup()\">\r\n  @if (inputConfig(); as inputConfig) {\r\n    <mat-form-field\r\n      [appearance]=\"inputConfig.appearance || 'fill'\"\r\n      floatLabel=\"always\"\r\n      subscriptSizing=\"dynamic\"\r\n    >\r\n      @if (!(inputConfig.disabled || errorMessage())) {\r\n        <mat-label>\r\n          toggle to select\r\n          <lib-t-form-input-status [inputConfig]=\"inputConfig\"></lib-t-form-input-status>\r\n        </mat-label>\r\n      }\r\n\r\n      <lib-toggle\r\n        [inputConfig]=\"inputConfig\"\r\n        [required]=\"inputConfig.required\"\r\n        [formControlName]=\"inputConfig.id\"\r\n      ></lib-toggle>\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      @if (!!errorMessage()) {\r\n        <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{ errorMessage() }}</mat-error>\r\n      }\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</form>\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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.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: TFormInputStatusComponent, selector: "lib-t-form-input-status", inputs: ["inputConfig"] }, { kind: "component", type: ToggleComponent, selector: "lib-toggle", inputs: ["inputConfig"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ToggleInputElementComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-toggle-input-element', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        ReactiveFormsModule,
+                        MatFormFieldModule,
+                        MatIconModule,
+                        MatButtonModule,
+                        MatTooltipModule,
+                        TFormInputStatusComponent,
+                        ToggleComponent,
+                    ], template: "<form [formGroup]=\"formGroup()\">\r\n  @if (inputConfig(); as inputConfig) {\r\n    <mat-form-field\r\n      [appearance]=\"inputConfig.appearance || 'fill'\"\r\n      floatLabel=\"always\"\r\n      subscriptSizing=\"dynamic\"\r\n    >\r\n      @if (!(inputConfig.disabled || errorMessage())) {\r\n        <mat-label>\r\n          toggle to select\r\n          <lib-t-form-input-status [inputConfig]=\"inputConfig\"></lib-t-form-input-status>\r\n        </mat-label>\r\n      }\r\n\r\n      <lib-toggle\r\n        [inputConfig]=\"inputConfig\"\r\n        [required]=\"inputConfig.required\"\r\n        [formControlName]=\"inputConfig.id\"\r\n      ></lib-toggle>\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      @if (!!errorMessage()) {\r\n        <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{ errorMessage() }}</mat-error>\r\n      }\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</form>\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 { ToggleInputElementComponent };
+//# sourceMappingURL=ngx-t-forms-toggle-input-element.component-DDErRUJd.mjs.map