ngx-t-forms 2.0.31 → 2.0.32

package/fesm2022/ngx-t-forms-mscoa-segment-config.component-Bo0aDEMy.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-t-forms-mscoa-segment-config.component-Bo0aDEMy.mjs","sources":["../../../projects/ngx-t-forms/src/lib/components/t-dynamic-data-edit/elements/mscoa-segment-config/mscoa-segment-config.component.ts","../../../projects/ngx-t-forms/src/lib/components/t-dynamic-data-edit/elements/mscoa-segment-config/mscoa-segment-config.component.html"],"sourcesContent":["import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  DestroyRef,\r\n  ViewEncapsulation,\r\n  computed,\r\n  effect,\r\n  inject,\r\n  input,\r\n  output,\r\n  signal,\r\n} from '@angular/core';\r\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\r\nimport {\r\n  FormBuilder,\r\n  FormGroup,\r\n  ReactiveFormsModule,\r\n  Validators,\r\n} from '@angular/forms';\r\nimport { Observable, catchError, of, take, tap } from 'rxjs';\r\n\r\nimport { MatButtonModule } from '@angular/material/button';\r\nimport { MatCardModule } from '@angular/material/card';\r\nimport { MatChipsModule } from '@angular/material/chips';\r\nimport { MatFormFieldModule } from '@angular/material/form-field';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { MatInputModule } from '@angular/material/input';\r\nimport { MatSelectChange, MatSelectModule } from '@angular/material/select';\r\nimport { MatSlideToggleChange, MatSlideToggleModule } from '@angular/material/slide-toggle';\r\nimport { MatTooltipModule } from '@angular/material/tooltip';\r\n\r\nimport type {\r\n  FormColumnInputs,\r\n  IGetTreeResponse,\r\n  IIncludedSegmentConfig,\r\n  IScoaInput,\r\n  ScoaInnerInput,\r\n} from 'ngx-t-forms-types';\r\nimport { ElementTypes } from 'ngx-t-forms-types';\r\nimport { v4 as uuidv4 } from 'uuid';\r\n\r\nimport { _isEqual } from '../../../../shared/functions/isEqual';\r\nimport type { IConfigElementError } from '../../t-dynamic-data-edit.component';\r\nimport { EmptyStateComponent } from '../_shared/empty-state/empty-state.component';\r\n\r\nlet nextUniqueId = 0;\r\n\r\n/** Discriminated edit-panel state: idle, adding a new segment, or editing an existing one. */\r\ntype EditState =\r\n  | { readonly mode: 'idle' }\r\n  | { readonly mode: 'add' }\r\n  | { readonly mode: 'edit'; readonly index: number };\r\n\r\nconst IDLE: EditState = { mode: 'idle' };\r\n\r\n/**\r\n * Internal editor element for configuring an MSCOA input's included account\r\n * segments. Child of `t-dynamic-data-edit`, which supplies the field label,\r\n * hint, and validation errors - so this component owns only the segment chip\r\n * row and the add/edit panel.\r\n *\r\n * The segment list is seeded from the MSCOA tree (`getMscoaTree`); each segment\r\n * carries flags such as single-select, read-only, VAT-selection and\r\n * inherit-from-accrual. In cash-segment mode (`isCashSegmentConfig`) every\r\n * non-`item` segment defaults to inherit-from-accrual + read-only.\r\n */\r\n@Component({\r\n  selector: 'lib-mscoa-segment-config',\r\n  templateUrl: './mscoa-segment-config.component.html',\r\n  styleUrl: './mscoa-segment-config.component.scss',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  encapsulation: ViewEncapsulation.Emulated,\r\n  host: {\r\n    'class': 'lib-mscoa-segment-config',\r\n    '[attr.id]': 'hostId',\r\n  },\r\n  imports: [\r\n    ReactiveFormsModule,\r\n    MatButtonModule,\r\n    MatCardModule,\r\n    MatChipsModule,\r\n    MatFormFieldModule,\r\n    MatIconModule,\r\n    MatInputModule,\r\n    MatSelectModule,\r\n    MatSlideToggleModule,\r\n    MatTooltipModule,\r\n    EmptyStateComponent,\r\n  ],\r\n})\r\nexport class MscoaSegmentConfigComponent {\r\n  /**\r\n   * Validation errors passed down by the parent editor. Retained on the contract\r\n   * but not rendered here - `t-dynamic-data-edit` owns error display.\r\n   */\r\n  readonly errors = input<IConfigElementError[] | undefined>([]);\r\n\r\n  /** The full MSCOA input config; supplies the extension-account options. */\r\n  readonly dataValue = input<IScoaInput | undefined>(undefined);\r\n\r\n  /** Disable user interaction. */\r\n  readonly disabled = input<boolean>(false);\r\n\r\n  /** Cash-segment mode: non-`item` segments default to inherit + read-only. */\r\n  readonly isCashSegmentConfig = input<boolean>(false);\r\n\r\n  /** Currently configured segments. */\r\n  readonly value = input<IIncludedSegmentConfig[] | undefined>(undefined);\r\n\r\n  /** When true, render every tree segment read-only (no add/remove). */\r\n  readonly showAllSegments = input<boolean>(false);\r\n\r\n  /**\r\n   * Stream that resolves the MSCOA account tree. Heterogeneous wrapper binding -\r\n   * the parent feeds whatever the editor config holds; narrowing here would force\r\n   * wrapper changes.\r\n   */\r\n  readonly getMscoaTree = input<Observable<IGetTreeResponse | undefined> | undefined>(undefined);\r\n\r\n  /**\r\n   * Creates or updates an account-level custom input (a peer of the segments) from\r\n   * the quick editor. Threaded through `t-dynamic-data-edit`; absent outside the\r\n   * builder, which hides the affordance.\r\n   */\r\n  readonly saveCustomInput = input<((sectionId: string, scoaInputId: string, config: Pick<ScoaInnerInput, 'element' | 'label' | 'formControlName' | 'singleSelect' | 'readonly'> & { id?: string }) => void) | undefined>(undefined);\r\n\r\n  /** Opens a custom input in the form-builder's input editor for advanced configuration. */\r\n  readonly editSegmentInput = input<((input: FormColumnInputs) => void) | undefined>(undefined);\r\n\r\n  /** Removes a custom input from the MSCOA config. */\r\n  readonly deleteSegmentInput = input<((input: FormColumnInputs) => void) | undefined>(undefined);\r\n\r\n  /** Emits the mutated segment list whenever the user adds, edits, or removes one. */\r\n  readonly valueChanged = output<IIncludedSegmentConfig[]>();\r\n\r\n  /** Host id attribute - stable, unique per instance. */\r\n  readonly hostId = `app-mscoa-segment-config-${nextUniqueId++}`;\r\n\r\n  readonly #fb = inject(FormBuilder);\r\n  readonly #destroyRef = inject(DestroyRef);\r\n\r\n  /** Tree-derived segment templates (drives the segment `mat-select`). */\r\n  readonly #treeSegments = signal<readonly IIncludedSegmentConfig[]>([]);\r\n\r\n  /** Error raised while fetching the tree (`null` until/unless the fetch fails). */\r\n  readonly #fetchError = signal<string | null>(null);\r\n\r\n  /** True while the tree stream is in flight. */\r\n  protected readonly loading = signal<boolean>(false);\r\n\r\n  /** Add/edit panel state. */\r\n  readonly #editState = signal<EditState>(IDLE);\r\n\r\n  /** Reactive form for the segment currently being added/edited. */\r\n  protected segmentForm: FormGroup = this.#createSegmentForm();\r\n\r\n  /** Add/edit panel state for account-level custom inputs. */\r\n  readonly #customInputState = signal<{ mode: 'idle' } | { mode: 'add' } | { mode: 'edit'; id: string }>({ mode: 'idle' });\r\n\r\n  /** Reactive form for the custom input currently being added/edited. */\r\n  protected customInputForm: FormGroup = this.#createCustomInputForm();\r\n\r\n  /** Curated input-type options for the custom-input quick editor. */\r\n  protected readonly customInputTypes: ReadonlyArray<{ value: ElementTypes; label: string }> = [\r\n    { value: ElementTypes.Input, label: 'Text / number' },\r\n    { value: ElementTypes.Select, label: 'Select' },\r\n    { value: ElementTypes.DatePicker, label: 'Date' },\r\n    { value: ElementTypes.Toggle, label: 'Toggle' },\r\n  ];\r\n\r\n  /** Guards single-shot tree load (mirrors the original take(1) one-time fetch). */\r\n  #treeRequested = false;\r\n\r\n  /**\r\n   * The configured segments, always a real array. The editor descriptor seeds\r\n   * an unconfigured segments value as `false` (its `defaultValue`), so guard\r\n   * against any non-array input — `?? []` alone would let `false`/objects\r\n   * through and break `.some` / `.map` / `@for` downstream.\r\n   */\r\n  protected readonly resolvedValue = computed<readonly IIncludedSegmentConfig[]>(\r\n    () => {\r\n      const value = this.value();\r\n      return Array.isArray(value) ? value : [];\r\n    },\r\n  );\r\n\r\n  /** Tree-derived segment templates for the picker. */\r\n  protected readonly treeSegments = this.#treeSegments.asReadonly();\r\n\r\n  /**\r\n   * Loader/tree error message; `null` when none. A fetch error takes priority,\r\n   * otherwise a missing loader surfaces the \"No loader provided\" notice.\r\n   */\r\n  protected readonly treeError = computed<string | null>(() => {\r\n    const fetchError = this.#fetchError();\r\n    if (fetchError) {\r\n      return fetchError;\r\n    }\r\n    return this.getMscoaTree() ? null : 'No loader provided';\r\n  });\r\n\r\n  /** Whether the add/edit panel is open. */\r\n  protected readonly isEditing = computed<boolean>(() => this.#editState().mode !== 'idle');\r\n\r\n  /** Whether the open panel is adding a brand-new segment. */\r\n  protected readonly isAddingNew = computed<boolean>(() => this.#editState().mode === 'add');\r\n\r\n  /** Whether the \"Add new segment\" toolbar button should show. */\r\n  protected readonly canAddNew = computed<boolean>(\r\n    () => !this.isEditing() && !this.showAllSegments(),\r\n  );\r\n\r\n  constructor() {\r\n    // One-time tree load. Mirrors the original `take(1)` fetch. The signal\r\n    // writes happen off the reactive tick (microtask) so the effect itself\r\n    // performs no synchronous signal mutation.\r\n    effect(() => {\r\n      const tree$ = this.getMscoaTree();\r\n      if (!tree$ || this.#treeRequested) {\r\n        return;\r\n      }\r\n      this.#treeRequested = true;\r\n      queueMicrotask(() => this.#loadMscoa(tree$));\r\n    });\r\n\r\n    // Reflect the full tree as read-only segments when `showAllSegments` is on.\r\n    effect(() => {\r\n      if (this.showAllSegments()) {\r\n        this.#syncAllSegments();\r\n      }\r\n    });\r\n  }\r\n\r\n  /** Fetch the tree once, build the segment templates, surface any error. */\r\n  #loadMscoa(tree$: Observable<IGetTreeResponse | undefined>): void {\r\n    this.#fetchError.set(null);\r\n    this.loading.set(true);\r\n    tree$\r\n      .pipe(\r\n        take(1),\r\n        tap((response) => {\r\n          this.#treeSegments.set(this.#buildTreeSegments(response));\r\n          this.loading.set(false);\r\n        }),\r\n        catchError(() => {\r\n          this.#fetchError.set('Failed to fetch mscoa tree');\r\n          this.loading.set(false);\r\n          return of(undefined);\r\n        }),\r\n        takeUntilDestroyed(this.#destroyRef),\r\n      )\r\n      .subscribe();\r\n  }\r\n\r\n  /** Map the tree account keys into seedable segment templates. */\r\n  #buildTreeSegments(response: IGetTreeResponse | undefined): readonly IIncludedSegmentConfig[] {\r\n    const isCash = this.isCashSegmentConfig();\r\n    const current = this.resolvedValue();\r\n    return (response?.accountTreeKeys ?? []).map((treeKey) => {\r\n      const isItem = treeKey.toLocaleLowerCase() === 'item';\r\n      return {\r\n        id: uuidv4(),\r\n        segment: treeKey,\r\n        singleSelect: true,\r\n        additionalAccounts: [],\r\n        inheritValueFromAccrual: isCash ? !isItem : undefined,\r\n        vatSelectonActive: isCash ? false : isItem,\r\n        segmentExtension: false,\r\n        label: this.#toTitleCase(treeKey),\r\n        readOnly:\r\n          current.find((v) => v.segment === treeKey)?.readOnly ||\r\n          (isCash && !isItem) ||\r\n          false,\r\n      };\r\n    });\r\n  }\r\n\r\n  /** Build the per-segment reactive form. */\r\n  #createSegmentForm(\r\n    segment: IIncludedSegmentConfig = {\r\n      segment: '',\r\n      label: '',\r\n      id: uuidv4(),\r\n      singleSelect: true,\r\n      segmentExtension: false,\r\n      additionalAccounts: [],\r\n      readOnly: false,\r\n    },\r\n  ): FormGroup {\r\n    const isItem = segment.segment?.toLocaleLowerCase() === 'item';\r\n    return this.#fb.group({\r\n      id: [segment.id],\r\n      segment: [segment.segment, Validators.required],\r\n      segmentExtension: [segment.segmentExtension, Validators.required],\r\n      readOnly: [segment.readOnly, Validators.required],\r\n      // Default to a concrete `false` in cash mode: `Validators.required` rejects\r\n      // `undefined` (but accepts `false`), so a brand-new segment whose toggle was\r\n      // never touched would otherwise keep the form invalid and the Save button\r\n      // permanently disabled. Existing values (true/false) pass through unchanged.\r\n      inheritValueFromAccrual: this.isCashSegmentConfig()\r\n        ? [segment.inheritValueFromAccrual ?? false, Validators.required]\r\n        : [segment.inheritValueFromAccrual],\r\n      vatSelectonActive: isItem\r\n        ? [Boolean(segment.vatSelectonActive), Validators.required]\r\n        : [Boolean(segment.vatSelectonActive)],\r\n      additionalAccounts: [segment.additionalAccounts ?? []],\r\n      label: [segment.label, Validators.required],\r\n      singleSelect: [segment.singleSelect, Validators.required],\r\n    });\r\n  }\r\n\r\n  protected startAddNew(): void {\r\n    this.segmentForm = this.#createSegmentForm();\r\n    this.#editState.set({ mode: 'add' });\r\n  }\r\n\r\n  protected startEdit(index: number): void {\r\n    const segment = this.resolvedValue().at(index);\r\n    if (!segment) {\r\n      return;\r\n    }\r\n    this.segmentForm = this.#createSegmentForm(segment);\r\n    this.#editState.set({ mode: 'edit', index });\r\n  }\r\n\r\n  protected cancelEdit(): void {\r\n    this.segmentForm.reset();\r\n    this.#editState.set(IDLE);\r\n  }\r\n\r\n  protected saveSegment(): void {\r\n    if (!this.segmentForm.valid) {\r\n      return;\r\n    }\r\n    const raw = this.segmentForm.getRawValue();\r\n    const label = this.#toTitleCase(String(raw.label ?? ''));\r\n    const newSegment: IIncludedSegmentConfig = {\r\n      id: typeof raw.id === 'string' && raw.id ? raw.id : uuidv4(),\r\n      segment: raw.segment,\r\n      // Multi-level segments derive their key from the (upper-cased) label.\r\n      customSegment: raw.segmentExtension ? label.toLocaleUpperCase() : undefined,\r\n      segmentExtension: Boolean(raw.segmentExtension),\r\n      inheritValueFromAccrual: Boolean(raw.inheritValueFromAccrual),\r\n      vatSelectonActive: Boolean(raw.vatSelectonActive),\r\n      additionalAccounts: Array.isArray(raw.additionalAccounts) ? raw.additionalAccounts : [],\r\n      label,\r\n      singleSelect: Boolean(raw.singleSelect),\r\n      readOnly: Boolean(raw.readOnly),\r\n    };\r\n\r\n    const state = this.#editState();\r\n    const updated = [...this.resolvedValue()];\r\n    if (state.mode === 'add') {\r\n      updated.push(newSegment);\r\n    } else if (state.mode === 'edit') {\r\n      updated[state.index] = newSegment;\r\n    } else {\r\n      return;\r\n    }\r\n\r\n    this.valueChanged.emit(updated);\r\n    this.cancelEdit();\r\n  }\r\n\r\n  protected readOnlyChanged(event: MatSlideToggleChange): void {\r\n    this.segmentForm.patchValue({ readOnly: event.checked });\r\n  }\r\n\r\n  protected singleSelectChange(event: MatSlideToggleChange): void {\r\n    this.segmentForm.patchValue({ singleSelect: event.checked });\r\n  }\r\n\r\n  protected setVatSelectionActive(event: MatSlideToggleChange): void {\r\n    this.segmentForm.patchValue({ vatSelectonActive: event.checked });\r\n  }\r\n\r\n  /** Inherit-from-accrual implies read-only (quirk: toggling on forces read-only). */\r\n  protected setInheritFromAccrual(event: MatSlideToggleChange): void {\r\n    this.segmentForm.patchValue({ inheritValueFromAccrual: event.checked });\r\n    if (event.checked) {\r\n      this.segmentForm.patchValue({ readOnly: true });\r\n    }\r\n  }\r\n\r\n  protected multiLevelSelectChange(event: MatSlideToggleChange): void {\r\n    this.segmentForm.patchValue({ segmentExtension: event.checked });\r\n  }\r\n\r\n  /** Pick a segment; auto-fill the label from it unless this is a multi-level extension. */\r\n  protected selectSegment(event: MatSelectChange): void {\r\n    this.segmentForm.patchValue({ segment: event.value });\r\n    if (!this.segmentForm.value.segmentExtension) {\r\n      this.segmentForm.patchValue({ label: this.#toTitleCase(String(event.value ?? '')) });\r\n    }\r\n  }\r\n\r\n  protected additionalAccountsChanged(event: MatSelectChange): void {\r\n    this.segmentForm.patchValue(\r\n      { additionalAccounts: [...event.value] },\r\n      { emitEvent: true },\r\n    );\r\n  }\r\n\r\n  protected removeSegment(index: number): void {\r\n    const updated = this.resolvedValue().filter((_, i) => i !== index);\r\n    this.valueChanged.emit(updated);\r\n  }\r\n\r\n  /** All account-level custom inputs (peers of the segments — not segment-linked). */\r\n  protected customInputs(): ScoaInnerInput[] {\r\n    return (this.dataValue()?.mscoaConfig?.inputs ?? []).filter((input) => !input.linkedSegmentId);\r\n  }\r\n\r\n  /** Whether custom inputs can be managed (builder callbacks present). */\r\n  protected get canManageInputs(): boolean {\r\n    return !!this.saveCustomInput() && !!this.dataValue()?.id;\r\n  }\r\n\r\n  /** Whether the custom-input add/edit panel is open. */\r\n  protected readonly isCustomInputPanelOpen = computed<boolean>(\r\n    () => this.#customInputState().mode !== 'idle',\r\n  );\r\n\r\n  /** Open the panel to add a new custom input. */\r\n  protected startAddCustomInput(): void {\r\n    this.cancelEdit();\r\n    this.customInputForm = this.#createCustomInputForm();\r\n    this.#customInputState.set({ mode: 'add' });\r\n  }\r\n\r\n  /** Open the panel to edit an existing custom input's basics. */\r\n  protected startEditCustomInput(input: ScoaInnerInput): void {\r\n    this.cancelEdit();\r\n    this.customInputForm = this.#createCustomInputForm(input);\r\n    this.#customInputState.set({ mode: 'edit', id: input.id });\r\n  }\r\n\r\n  /** Close the custom-input panel without saving. */\r\n  protected cancelCustomInput(): void {\r\n    this.customInputForm.reset();\r\n    this.#customInputState.set({ mode: 'idle' });\r\n  }\r\n\r\n  /** Persist the custom-input panel through the builder save callback. */\r\n  protected saveCustomInputPanel(): void {\r\n    const data = this.dataValue();\r\n    if (!this.customInputForm.valid || !data?.id) {\r\n      return;\r\n    }\r\n    const raw = this.customInputForm.getRawValue();\r\n    const label = String(raw.label ?? '').trim();\r\n    this.saveCustomInput()?.(data.sectionId, data.id, {\r\n      id: typeof raw.id === 'string' && raw.id ? raw.id : undefined,\r\n      element: raw.element,\r\n      label,\r\n      formControlName: this.#toControlName(label),\r\n      singleSelect: Boolean(raw.singleSelect),\r\n      readonly: Boolean(raw.readonly),\r\n    });\r\n    this.cancelCustomInput();\r\n  }\r\n\r\n  /** Open a custom input in the builder's input editor for advanced configuration. */\r\n  protected onEditAdvanced(input: ScoaInnerInput): void {\r\n    this.editSegmentInput()?.(input);\r\n  }\r\n\r\n  /** Remove a custom input from the MSCOA config. */\r\n  protected onDeleteInput(input: ScoaInnerInput): void {\r\n    this.deleteSegmentInput()?.(input);\r\n  }\r\n\r\n  /** Build the per-custom-input reactive form (type, label, single-value-selection, read-only). */\r\n  #createCustomInputForm(input?: ScoaInnerInput): FormGroup {\r\n    return this.#fb.group({\r\n      id: [input?.id ?? null],\r\n      element: [input?.element ?? ElementTypes.Input, Validators.required],\r\n      label: [input?.label ?? '', Validators.required],\r\n      singleSelect: [input?.singleSelect ?? true],\r\n      readonly: [input?.readonly ?? false],\r\n    });\r\n  }\r\n\r\n  /** camelCase control name derived from a label (e.g. \"Budget Value\" -> \"budgetValue\"). */\r\n  #toControlName(label: string): string {\r\n    const words = label.match(/[a-z0-9]+/gi) ?? [];\r\n    return words\r\n      .map((word, index) =>\r\n        index === 0\r\n          ? word.toLowerCase()\r\n          : word.charAt(0).toUpperCase() + word.slice(1).toLowerCase(),\r\n      )\r\n      .join('');\r\n  }\r\n\r\n  /**\r\n   * A tree template is \"already used\" (and so disabled in the picker) when a\r\n   * segment with the same key is already configured - except for multi-level\r\n   * extensions, which may reuse a key.\r\n   */\r\n  protected alreadyExists(segment: IIncludedSegmentConfig): boolean {\r\n    if (this.segmentForm.value.segmentExtension) {\r\n      return false;\r\n    }\r\n    return this.resolvedValue().some((v) => v.segment === segment.segment);\r\n  }\r\n\r\n  /** Extension-account options drawn from the MSCOA config. */\r\n  protected get extensionAccountsForSegments(): string[] {\r\n    return this.dataValue()?.mscoaConfig?.extensionAccountsForSegments ?? [];\r\n  }\r\n\r\n  /**\r\n   * When `showAllSegments` is on, reconcile the configured value against the full\r\n   * tree. Preserves the deliberate double-emit sync: emit a reset sentinel first,\r\n   * then the merged list on the next microtask so the parent re-renders cleanly.\r\n   */\r\n  #syncAllSegments(): void {\r\n    const templates = this.#treeSegments();\r\n    if (!this.#treeRequested || templates.length === 0) {\r\n      return;\r\n    }\r\n    const current = this.resolvedValue();\r\n    const merged = templates.map((segment) => ({\r\n      ...segment,\r\n      ...(current.find((v) => v.segment === segment.segment) ?? {}),\r\n    }));\r\n\r\n    if (!_isEqual(merged, current)) {\r\n      // Reset sentinel, then the real value, to force downstream re-binding.\r\n      this.valueChanged.emit([{} as IIncludedSegmentConfig]);\r\n      queueMicrotask(() => this.valueChanged.emit(merged));\r\n    }\r\n  }\r\n\r\n  #toTitleCase(str: string): string {\r\n    return str.replace(\r\n      /\\w\\S*/g,\r\n      (txt) => txt.charAt(0).toUpperCase() + txt.slice(1).toLowerCase(),\r\n    );\r\n  }\r\n}\r\n","@if (loading()) {\n  <div class=\"mscoa-segment-config__notice\">\n    <mat-icon class=\"mscoa-segment-config__notice-icon\">hourglass_top</mat-icon>\n    <span>Loading account segments…</span>\n  </div>\n}\n\n@if (treeError(); as error) {\n  <div class=\"mscoa-segment-config__notice mscoa-segment-config__notice--error\">\n    <mat-icon class=\"mscoa-segment-config__notice-icon\">error_outline</mat-icon>\n    <span>{{ error }}</span>\n  </div>\n}\n\n@if (resolvedValue().length > 0) {\n  <div class=\"mscoa-segment-config__section\">\n    <p class=\"mscoa-segment-config__section-label\">Configured segments</p>\n    <mat-chip-listbox [disabled]=\"disabled()\" aria-label=\"Configured account segments\">\n      @for (segment of resolvedValue(); track segment.id; let i = $index) {\n        <mat-chip-option\n          (removed)=\"removeSegment(i)\"\n          (click)=\"startEdit(i)\"\n          [value]=\"segment.segment\"\n          [selected]=\"isEditing() && !isAddingNew()\">\n          <span class=\"mscoa-segment-config__chip-content\">\n            <span class=\"mscoa-segment-config__chip-label\">{{ segment.label }}</span>\n            <mat-icon class=\"mscoa-segment-config__chip-icon\">\n              {{ segment.singleSelect ? 'done' : 'done_all' }}\n            </mat-icon>\n            <mat-icon class=\"mscoa-segment-config__chip-icon\">\n              {{ segment.readOnly ? 'edit_off' : 'edit' }}\n            </mat-icon>\n          </span>\n\n          @if (showAllSegments() === false) {\n            <button matChipRemove aria-label=\"Remove segment\" [disabled]=\"disabled()\">\n              <mat-icon>cancel</mat-icon>\n            </button>\n          }\n        </mat-chip-option>\n      }\n    </mat-chip-listbox>\n  </div>\n} @else if (!loading()) {\n  <lib-empty-state\n    icon=\"account_tree\"\n    message=\"No segments configured yet. Add one to begin shaping this MSCOA input.\">\n    @if (canAddNew()) {\n      <button mat-stroked-button [disabled]=\"disabled()\" (click)=\"startAddNew()\">\n        <mat-icon>add</mat-icon>\n        Add segment\n      </button>\n    }\n  </lib-empty-state>\n}\n\n@if (canAddNew() && resolvedValue().length > 0) {\n  <button\n    class=\"mscoa-segment-config__add\"\n    mat-stroked-button\n    [disabled]=\"disabled()\"\n    (click)=\"startAddNew()\">\n    <mat-icon>add</mat-icon>\n    Add new segment\n  </button>\n}\n\n@if (canManageInputs) {\n  <!-- Account-level custom inputs (peers of the segments): list + consolidated add/edit panel. -->\n  <div class=\"mscoa-segment-config__section\">\n    <p class=\"mscoa-segment-config__section-label\">Custom inputs</p>\n    <p class=\"mscoa-segment-config__hint\">\n      Account-level inputs that sit alongside the segments (e.g. budget value,\n      department). Each is a full form input entered per leg; single value\n      selection applies one value across debit and credit.\n    </p>\n\n    @for (input of customInputs(); track input.id) {\n      <div class=\"mscoa-segment-config__custom-input-row\">\n        <mat-icon class=\"mscoa-segment-config__input-icon\">tune</mat-icon>\n        <span class=\"mscoa-segment-config__input-label\">\n          {{ input.label || input.formControlName || 'Untitled input' }}\n        </span>\n        <button\n          mat-icon-button\n          type=\"button\"\n          [disabled]=\"disabled()\"\n          matTooltip=\"Edit\"\n          aria-label=\"Edit input\"\n          (click)=\"startEditCustomInput(input)\">\n          <mat-icon>edit</mat-icon>\n        </button>\n        <button\n          mat-icon-button\n          type=\"button\"\n          [disabled]=\"disabled()\"\n          matTooltip=\"Advanced settings (validators, calculations, API)\"\n          aria-label=\"Advanced settings\"\n          (click)=\"onEditAdvanced(input)\">\n          <mat-icon>tune</mat-icon>\n        </button>\n        <button\n          mat-icon-button\n          type=\"button\"\n          [disabled]=\"disabled()\"\n          matTooltip=\"Remove\"\n          aria-label=\"Remove input\"\n          (click)=\"onDeleteInput(input)\">\n          <mat-icon>delete_outline</mat-icon>\n        </button>\n      </div>\n    } @empty {\n      <p class=\"mscoa-segment-config__hint mscoa-segment-config__hint--muted\">\n        No custom inputs yet.\n      </p>\n    }\n\n    @if (!isCustomInputPanelOpen()) {\n      <button\n        class=\"mscoa-segment-config__add-input\"\n        mat-stroked-button\n        type=\"button\"\n        [disabled]=\"disabled()\"\n        (click)=\"startAddCustomInput()\">\n        <mat-icon>add</mat-icon>\n        Add custom input\n      </button>\n    }\n\n    @if (isCustomInputPanelOpen()) {\n      <mat-card class=\"mscoa-segment-config__panel\" appearance=\"outlined\">\n        <mat-card-header>\n          <mat-card-subtitle>\n            {{ customInputForm.value.id ? 'Update' : 'Add a' }} custom input\n          </mat-card-subtitle>\n        </mat-card-header>\n\n        <mat-card-content>\n          <form [formGroup]=\"customInputForm\" (ngSubmit)=\"saveCustomInputPanel()\">\n            <div class=\"mscoa-segment-config__group\">\n              <mat-form-field subscriptSizing=\"dynamic\" floatLabel=\"always\" appearance=\"outline\">\n                <mat-label>Input type</mat-label>\n                <mat-select formControlName=\"element\" placeholder=\"Select input type\">\n                  @for (type of customInputTypes; track type.value) {\n                    <mat-option [value]=\"type.value\">{{ type.label }}</mat-option>\n                  }\n                </mat-select>\n                <mat-hint>Use Advanced settings for validators, calculations and API.</mat-hint>\n              </mat-form-field>\n            </div>\n\n            <div class=\"mscoa-segment-config__group\">\n              <mat-form-field subscriptSizing=\"dynamic\" floatLabel=\"always\" appearance=\"outline\">\n                <mat-label>Label</mat-label>\n                <input matInput formControlName=\"label\" placeholder=\"Enter label\" />\n                <mat-hint>A descriptive name (e.g. 'Budget value', 'Department').</mat-hint>\n              </mat-form-field>\n            </div>\n\n            <div class=\"mscoa-segment-config__group\">\n              <div class=\"mscoa-segment-config__toggle\">\n                <mat-slide-toggle formControlName=\"singleSelect\">Single value selection</mat-slide-toggle>\n              </div>\n              <p class=\"mscoa-segment-config__hint\">\n                When enabled, one value applies across debit and credit; when disabled, a value is\n                entered per leg.\n              </p>\n            </div>\n\n            <div class=\"mscoa-segment-config__group\">\n              <div class=\"mscoa-segment-config__toggle\">\n                <mat-slide-toggle formControlName=\"readonly\">Read only</mat-slide-toggle>\n              </div>\n              <p class=\"mscoa-segment-config__hint\">\n                Prevents users from changing the value after initial setup.\n              </p>\n            </div>\n\n            <mat-card-actions class=\"mscoa-segment-config__actions\">\n              <button mat-button type=\"button\" (click)=\"cancelCustomInput()\">Cancel</button>\n              <button mat-flat-button color=\"primary\" type=\"submit\" [disabled]=\"!customInputForm.valid\">\n                Save\n              </button>\n            </mat-card-actions>\n          </form>\n        </mat-card-content>\n      </mat-card>\n    }\n  </div>\n}\n\n@if (isEditing()) {\n  <mat-card class=\"mscoa-segment-config__panel\" appearance=\"outlined\">\n    <mat-card-header>\n      <mat-card-subtitle>\n        {{ isAddingNew() ? 'Add a new' : 'Update' }} segment\n      </mat-card-subtitle>\n    </mat-card-header>\n\n    <mat-card-content>\n      <form [formGroup]=\"segmentForm\" (ngSubmit)=\"saveSegment()\">\n        <div class=\"mscoa-segment-config__group\">\n          <div class=\"mscoa-segment-config__toggle\">\n            <mat-slide-toggle\n              (change)=\"multiLevelSelectChange($event)\"\n              [checked]=\"segmentForm.value.segmentExtension\">\n              Enable multi-level segmentation\n            </mat-slide-toggle>\n          </div>\n          <p class=\"mscoa-segment-config__hint\">\n            Allows sub-classifications within this segment for more detailed accounting hierarchies.\n          </p>\n\n          <mat-form-field subscriptSizing=\"dynamic\" floatLabel=\"always\" appearance=\"outline\">\n            <mat-label>Segment</mat-label>\n            <mat-select\n              (selectionChange)=\"selectSegment($event)\"\n              formControlName=\"segment\"\n              placeholder=\"Select segment\">\n              @for (segment of treeSegments(); track segment.id) {\n                <mat-option [disabled]=\"alreadyExists(segment)\" [value]=\"segment.segment\">\n                  {{ segment.label }}\n                </mat-option>\n              }\n            </mat-select>\n            <mat-hint>Select an account segment type from your chart of accounts.</mat-hint>\n          </mat-form-field>\n        </div>\n\n        @if (isCashSegmentConfig()) {\n          <div class=\"mscoa-segment-config__group\">\n            <div class=\"mscoa-segment-config__toggle\">\n              <mat-slide-toggle\n                (change)=\"setInheritFromAccrual($event)\"\n                [checked]=\"segmentForm.value.inheritValueFromAccrual\">\n                Inherit from accrual\n              </mat-slide-toggle>\n            </div>\n            <p class=\"mscoa-segment-config__hint\">\n              When enabled, changes to the accrual value reflect here automatically.\n            </p>\n          </div>\n        }\n\n        <div class=\"mscoa-segment-config__group\">\n          <mat-form-field subscriptSizing=\"dynamic\" floatLabel=\"always\" appearance=\"outline\">\n            <mat-label>Label</mat-label>\n            <input\n              matInput\n              formControlName=\"label\"\n              [readonly]=\"!segmentForm.value.segmentExtension\"\n              placeholder=\"Enter label\" />\n            <mat-hint>\n              A descriptive name for this segment (e.g. 'Department', 'Project', 'Cost Center').\n            </mat-hint>\n          </mat-form-field>\n        </div>\n\n        <div class=\"mscoa-segment-config__group\">\n          <div class=\"mscoa-segment-config__toggle\">\n            <mat-slide-toggle\n              (change)=\"singleSelectChange($event)\"\n              [checked]=\"segmentForm.value.singleSelect\">\n              Single value selection\n            </mat-slide-toggle>\n          </div>\n          <p class=\"mscoa-segment-config__hint\">\n            When enabled, transactions are assigned to one value within this segment; when disabled,\n            they can be split across multiple values.\n          </p>\n        </div>\n\n        @if (segmentForm.value.segment?.toLocaleLowerCase() === 'item') {\n          <div class=\"mscoa-segment-config__group\">\n            <div class=\"mscoa-segment-config__toggle\">\n              <mat-slide-toggle\n                (change)=\"setVatSelectionActive($event)\"\n                [checked]=\"segmentForm.value.vatSelectonActive\">\n                Require VAT account selection\n              </mat-slide-toggle>\n            </div>\n            <p class=\"mscoa-segment-config__hint\">\n              When active, users must specify a VAT account for taxable items.\n            </p>\n          </div>\n        }\n\n        <div class=\"mscoa-segment-config__group\">\n          <div class=\"mscoa-segment-config__toggle\">\n            <mat-slide-toggle\n              (change)=\"readOnlyChanged($event)\"\n              [checked]=\"segmentForm.value.readOnly\">\n              Read-only segment\n            </mat-slide-toggle>\n          </div>\n          <p class=\"mscoa-segment-config__hint\">\n            Prevents users from modifying segment values after initial setup. Use for regulatory or\n            policy-controlled segments.\n          </p>\n        </div>\n\n        <div class=\"mscoa-segment-config__group\">\n          <mat-form-field subscriptSizing=\"dynamic\" floatLabel=\"always\" appearance=\"outline\">\n            <mat-label>Additional accounts</mat-label>\n            <mat-select\n              (selectionChange)=\"additionalAccountsChanged($event)\"\n              formControlName=\"additionalAccounts\"\n              multiple\n              placeholder=\"Select counter accounts\">\n              @for (ext of extensionAccountsForSegments; track ext) {\n                <mat-option [value]=\"ext\">{{ ext }}</mat-option>\n              }\n            </mat-select>\n            <mat-hint>\n              Add supporting accounts for this segment (e.g. VAT or tax accounts).\n            </mat-hint>\n          </mat-form-field>\n        </div>\n\n        <mat-card-actions class=\"mscoa-segment-config__actions\">\n          <button mat-button type=\"button\" (click)=\"cancelEdit()\">Cancel</button>\n          <button mat-flat-button color=\"primary\" type=\"submit\" [disabled]=\"!segmentForm.valid\">\n            Save\n          </button>\n        </mat-card-actions>\n      </form>\n    </mat-card-content>\n  </mat-card>\n}\n"],"names":["uuidv4","i2","i5","i6","i7","i9","i10"],"mappings":"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"}

package/fesm2022/{ngx-t-forms-multiple-input-input-element.component-C7y1OGPx.mjs → ngx-t-forms-multiple-input-input-element.component-C8JP3D6r.mjs}

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { input, output, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, inject, DestroyRef, ElementRef } from '@angular/core';
-import * as i1$4 from '@angular/forms';
+import * as i1$3 from '@angular/forms';
 import { NgControl, ReactiveFormsModule } from '@angular/forms';
 import * as i2 from '@angular/material/form-field';
 import { MatFormFieldControl, MatFormFieldModule } from '@angular/material/form-field';
@@ -10,16 +10,16 @@ import * as i1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i5$1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { b as TDynamicDataViewComponent, r as TFormInputComponent, v as calculateListOveralFunctions, B as BaseCustomInput, _ as _isEqual, m as getInputErrorMessage, n as TFormInputStatusComponent } from './ngx-t-forms-ngx-t-forms-u_kigDid.mjs';
+import { b as TDynamicDataViewComponent, y as TFormInputComponent, A as calculateListOveralFunctions, B as BaseCustomInput, _ as _isEqual, q as getInputErrorMessage, u as TFormInputStatusComponent } from './ngx-t-forms-ngx-t-forms-C2G8_WQk.mjs';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i5 from '@angular/material/table';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { DocumentLitsLabelConfigInterfaceValueType, InputDataTypes, MultipleInputAvailableOperations, CalculationFunctions } from 'ngx-t-forms-types';
-import * as i1$1 from '@angular/material/chips';
+import * as i4 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
 import * as i6 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import * as i1$2 from '@angular/material/progress-bar';
+import * as i1$1 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import * as i3$1 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
@@ -30,11 +30,11 @@ import { CommonModule } from '@angular/common';
 import * as i3$3 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
 import { MatDividerModule } from '@angular/material/divider';
-import * as i1$3 from '@angular/cdk/drag-drop';
+import * as i1$2 from '@angular/cdk/drag-drop';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { Subject, timer, tap, takeUntil } from 'rxjs';
 import { v4 } from 'uuid';
-import * as i4 from '@angular/material/list';
+import * as i4$1 from '@angular/material/list';
 
 class ColorScale {
     constructor(min, max, colorStops, alpha = 1) {
@@ -343,9 +343,9 @@ class MultipleInputTableViewComponent {
             const inputIsGrouped = inputCfg.groupBy;
             const groupKey = inputCfg.groupBy?.[0] || '';
             const dataSet = inputIsGrouped
-                ? ds.data.filter((s) => s[groupKey] === row[groupKey])
-                : new Array(ds.data);
-            const arrayValues = dataSet.map((vr) => Number(vr[colKey]));
+                ? ds?.data.filter((s) => s[groupKey] === row[groupKey])
+                : new Array(ds?.data || []);
+            const arrayValues = dataSet?.map((vr) => Number(vr[colKey])) || [];
             const max = Math.max(...arrayValues);
             const min = Math.min(...arrayValues);
             const hasNun = isNaN(max) || isNaN(min);
@@ -361,7 +361,7 @@ class MultipleInputTableViewComponent {
         const inputCfg = this.inputConfig();
         const inputIsGrouped = inputCfg?.groupBy;
         const ds = this.dataSource();
-        if (inputIsGrouped) {
+        if (inputIsGrouped && ds) {
             const indexOfRow = ds.data.indexOf(row);
             const rowIsFirstInTable = indexOfRow === 0;
             if (!inputCfg.groupBy) {
@@ -427,9 +427,9 @@ class MultipleInputTableViewComponent {
         this.overlayData = null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: MultipleInputTableViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: MultipleInputTableViewComponent, isStandalone: true, selector: "lib-multiple-input-table-view", inputs: { inputConfig: { classPropertyName: "inputConfig", publicName: "inputConfig", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, applyOptionsTo: { classPropertyName: "applyOptionsTo", publicName: "applyOptionsTo", isSignal: true, isRequired: false, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onEditItem: "onEditItem", onDeleteItem: "onDeleteItem", onCopy: "onCopy", onApplyOptionsTo: "onApplyOptionsTo", showItemAsLabel: "showItemAsLabel" }, ngImport: i0, template: "@defer (on viewport) {\n\n  @if (getColConfig.displayedColumnsInOrder.length === 0) {\n    <div class=\"mit-state mit-state--inline\">No columns</div>\n  }\n\n  <div class=\"table-container\">\n\n    <table mat-table [dataSource]=\"(dataSource() || [])\" class=\"mit-table\" matSort matSortActive=\"created\"\n      matSortDisableClear matSortDirection=\"desc\">\n      @for (col of (displayedColumnsInOrder || []); track col) {\n        <ng-container [matColumnDef]=\"col\">\n          <th mat-header-cell *matHeaderCellDef>\n            <span class=\"mit-th-label\">\n              {{ getColConfig.columnsConfig?.[col]?.[\"label\"] }}\n            </span>\n            @if ($last) {\n              <button matTooltip=\"Show other values\" [matMenuTriggerFor]=\"colOptions\" [matMenuTriggerData]=\"{}\"\n                class=\"mit-th-action\" mat-icon-button>\n                <mat-icon>label</mat-icon>\n              </button>\n            }\n          </th>\n          <td [class.functionClass]=\"row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION']\"\n            [style.background]=\"returnBackground(row, getColConfig.columnsConfig?.[col])\"\n            mat-cell *matCellDef=\"let row\">\n            @if (getColConfig.columnsConfig?.[col]?.['type'] === 'removal') {\n              <div class=\"cellClass\">\n\n                @if (!!row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION'] && !row['id'] && !inputConfig()?.multipleInputInEditId ||\n                !!row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION'] && inputConfig()?.multipleInputInEditId &&\n                inputConfig()?.multipleInputInEditId !== row['id']) {\n                  <div class=\"mit-fn-label\">\n                    <strong>{{ getCalculationFunction(row) }}</strong>\n                  </div>\n                }\n                @if (\n                  userCanApplyOptionsTo() &&\n                  !row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION'] &&\n                  row[''] !== 'true' && !inputConfig()?.readonly\n                ) {\n                  <button mat-icon-button [color]=\"t.menuOpen ? 'primary' : 'basic'\" [matMenuTriggerFor]=\"rowOptions\" [matMenuTriggerData]=\"{row:row}\" #t=\"matMenuTrigger\"\n                    (click)=\"applyOptionsToFn(row)\"\n                    class=\"mit-row-trigger\">\n                    @if (rowIsInEdit(row)) {\n                      <mat-icon color=\"primary\">edit</mat-icon>\n                    } @else {\n                      <mat-icon>{{ t.menuOpen ? 'close' : 'more_horiz' }}</mat-icon>\n                    }\n                  </button>\n                }\n\n                @if (row['SYSTEM_KEY_IN_EDIT']) {\n                  <mat-chip>In {{ inputConfig()?.readonly ? 'View' : 'Edit' }}</mat-chip>\n                }\n\n              </div>\n            }\n            @if (getColConfig.columnsConfig && getColConfig.columnsConfig?.[col]?.type !== 'removal') {\n              <div class=\"cellClass\">\n                <span>\n                  @if (getColConfig.columnsConfig?.[col].dataType === 'array' || getColConfig.columnsConfig?.[col].dataType === 'object') {\n                    <button mat-icon-button class=\"mit-data-button\"\n                      matTooltip=\"View data\"\n                      (click)=\"openDataOverlay($event, row[col])\">\n                      <mat-icon class=\"mit-data-icon\">data_object</mat-icon>\n                    </button>\n                  } @else {\n                    {{ row[col] | formatData: getColConfig.columnsConfig?.[col].dataType }}\n                  }\n                </span>\n              </div>\n            }\n          </td>\n        </ng-container>\n      }\n\n\n      <tr mat-header-row *matHeaderRowDef=\"getColConfig.displayedColumnsInOrder\"></tr>\n      <tr [class.mit-group-start]=\"hasTopBorder(row)\" mat-row\n        *matRowDef=\"let row; columns: getColConfig.displayedColumnsInOrder\"></tr>\n    </table>\n\n    @if (!(dataSource().data) || (dataSource().data).length === 0) {\n      <div class=\"mit-empty\">\n        <mat-icon class=\"mit-empty-icon\">list</mat-icon>\n        <strong class=\"mit-empty-title\">No items yet</strong>\n        <p class=\"mit-empty-text\">\n          <strong>Click the add button</strong> to create a new row. You'll fill in details using a form, and each\n          saved entry appears as a row here.\n        </p>\n      </div>\n    }\n  </div>\n} @placeholder {\n  <div class=\"mit-placeholder\">\n    <mat-spinner diameter=\"32\" />\n  </div>\n}\n\n@if (overlayOpen) {\n  <div class=\"data-overlay-backdrop\" (click)=\"closeDataOverlay()\"></div>\n  <div class=\"data-overlay-panel\"\n    [style.top.px]=\"overlayPosition.top\"\n    [style.left.px]=\"overlayPosition.left\"\n    (click)=\"$event.stopPropagation()\">\n    <div class=\"data-overlay-header\">\n      <span class=\"data-overlay-title\">\n        <mat-icon class=\"data-overlay-title-icon\">data_object</mat-icon>\n        Data\n      </span>\n      <button mat-icon-button class=\"mit-data-button\" (click)=\"closeDataOverlay()\">\n        <mat-icon class=\"mit-data-icon\">close</mat-icon>\n      </button>\n    </div>\n    <div class=\"data-overlay-body\">\n      <lib-t-dynamic-data-view [data]=\"overlayData\" />\n    </div>\n  </div>\n}\n\n<mat-menu #colOptions=\"matMenu\">\n  <ng-template matMenuContent>\n    @for (label of allPossibleLabels(); track label.label) {\n      <button mat-menu-item (click)=\"toggleTepLabel($event, label.formControlName);\">\n        <mat-icon>{{ label.selected ? 'check_circle' : 'radio_button_unchecked' }}</mat-icon>\n        {{ label.label }}\n      </button>\n    }\n  </ng-template>\n</mat-menu>\n\n<mat-menu #rowOptions=\"matMenu\">\n  <ng-template matMenuContent let-row=\"row\">\n    @if (!inputConfig()?.readonly) {\n      @if (userCanEdit()) {\n        <button mat-menu-item (click)=\"editItem(row)\">\n          <mat-icon>edit</mat-icon>\n          <div class=\"option-text\">\n            <div class=\"option-main-text\">Edit</div>\n            <div class=\"option-sub-text\">\n              {{ inputConfig()?.readonly ? 'View item properties' : 'Modify item properties' }}\n            </div>\n          </div>\n        </button>\n      }\n      @if (userCanAdd()) {\n        <button mat-menu-item (click)=\"copy(row)\">\n          <mat-icon>content_copy</mat-icon>\n          <div class=\"option-text\">\n            <div class=\"option-main-text\">Duplicate</div>\n            <div class=\"option-sub-text\">Create a copy with same values</div>\n          </div>\n        </button>\n      }\n\n      @if (userCanRemove()) {\n        @if (isAboutToDeleteRow(row)) {\n          <button mat-menu-item (click)=\"multipleInputRemoveItem($event,row)\">\n            <mat-icon color=\"accent\">cancel</mat-icon>\n            <div class=\"option-text\">\n              <div class=\"option-main-text option-main-text--cancel\">Cancel Deletion</div>\n              <div class=\"option-sub-text\">Auto-deleting in {{ secondsCountDown() }} seconds...</div>\n            </div>\n          </button>\n          <div class=\"deletion-progress-container\">\n            <mat-progress-bar color=\"warn\" mode=\"determinate\" [value]=\"getCountdownSeconds()\"></mat-progress-bar>\n            @if (getCountdownSeconds() > 75) {\n              <div class=\"deletion-message\">Deleting soon...</div>\n            }\n          </div>\n        } @else {\n          <button mat-menu-item (click)=\"multipleInputRemoveItem($event,row)\">\n            <mat-icon color=\"warn\">delete_outline</mat-icon>\n            <div class=\"option-text\">\n              <div class=\"option-main-text\">Delete</div>\n              <div class=\"option-sub-text\">Will delete after 3 seconds (click to cancel)</div>\n            </div>\n          </button>\n        }\n      }\n    }\n  </ng-template>\n</mat-menu>\n", styles: [".table-container{max-width:100%!important;overflow:auto!important;border-radius:8px}.mit-table{width:100%;background:transparent}.mit-table .mat-mdc-header-cell,.mit-table .mat-mdc-cell{padding:0 .625rem;font-size:.8125rem}.mit-table .mat-mdc-header-row{min-height:2.25rem}.mit-table .mat-mdc-row{min-height:2.5rem;transition:background .2s cubic-bezier(.16,1,.3,1)}.mit-table .mat-mdc-row:hover{background:color-mix(in srgb,var(--mat-sys-primary, #6750a4) 5%,transparent)}.mit-th-label{text-align:start;line-height:normal;font-size:.6875rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mat-sys-on-surface-variant, #49454f)}.mit-th-action{width:1.75rem;height:1.75rem;line-height:1.75rem;opacity:.55;transition:opacity .2s cubic-bezier(.16,1,.3,1)}.mit-th-action:hover{opacity:1}.cellClass{display:flex;align-items:center;min-height:2.5rem}.mit-group-start .mat-mdc-cell{border-top:2px solid var(--mat-sys-outline-variant, #cac4d0)}.functionClass{background:var(--mat-sys-surface-container, #f3edf7);font-weight:500}.mit-fn-label{width:100%;text-align:right;color:var(--mat-sys-on-surface-variant, #49454f);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase}.mit-row-trigger{margin-left:auto;margin-right:0;display:block}.mit-data-button{width:1.75rem;height:1.75rem;line-height:1.75rem}.mit-data-icon{font-size:1.125rem;width:1.125rem;height:1.125rem;line-height:1.125rem}.mit-state{display:flex;justify-content:center;padding:1rem;font-size:.8125rem;color:var(--mat-sys-on-surface-variant, #49454f);opacity:.7}.mit-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.375rem;padding:1.5rem 1.25rem;color:var(--mat-sys-on-surface-variant, #49454f)}.mit-empty-icon{font-size:1.75rem;width:1.75rem;height:1.75rem;line-height:1.75rem;opacity:.5}.mit-empty-title{font-size:.875rem;color:var(--mat-sys-on-surface, #1c1b1f)}.mit-empty-text{margin:0;max-width:22rem;font-size:.75rem;line-height:1.45;opacity:.85}.mit-placeholder{display:flex;justify-content:center;align-items:center;padding:2rem}.option-text{display:flex;flex-direction:column;margin-left:.5rem}.option-main-text{font-size:.875rem;font-weight:500;margin-bottom:2px;line-height:normal}.option-main-text--cancel{color:var(--mat-sys-primary, #6750a4)}.option-sub-text{font-size:.75rem;color:var(--mat-sys-on-surface-variant, #49454f);font-weight:400;line-height:1.2}.deletion-progress-container{position:relative;padding:0 1rem .5rem}.deletion-message{position:absolute;right:1rem;top:2px;font-size:.6875rem;color:var(--mat-sys-error, #b3261e);font-weight:500;line-height:1.6;animation:pulse 1s infinite}button:has(+.deletion-progress-container){border-bottom:none!important;padding-bottom:4px!important}@keyframes pulse{0%{opacity:.7}50%{opacity:1}to{opacity:.7}}@media(max-width:600px){.option-sub-text{max-width:180px;white-space:normal}}.data-overlay-backdrop{position:fixed;inset:0;z-index:999;background:transparent}.data-overlay-panel{position:fixed;z-index:1000;background:var(--mat-sys-surface, #fef7ff);border:1px solid color-mix(in srgb,var(--mat-sys-outline, #79747e) 15%,transparent);border-radius:12px;box-shadow:0 16px 56px color-mix(in srgb,var(--mat-sys-shadow, #000) 14%,transparent);min-width:280px;max-width:min(380px,calc(100vw - 16px));max-height:60vh;display:flex;flex-direction:column;overflow:hidden}.data-overlay-header{display:flex;align-items:center;justify-content:space-between;padding:.25rem .25rem .25rem .75rem;border-bottom:1px solid color-mix(in srgb,var(--mat-sys-outline, #79747e) 12%,transparent);flex-shrink:0}.data-overlay-title{font-size:.8125rem;font-weight:500;display:flex;align-items:center;color:var(--mat-sys-on-surface, #1c1b1f)}.data-overlay-title-icon{font-size:1rem;width:1rem;height:1rem;line-height:1rem;vertical-align:middle;margin-right:.25rem}.data-overlay-body{overflow:auto;padding:.25rem .5rem .5rem;flex:1}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i1$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i3$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "ngmodule", type: MatTableModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "component", type: TDynamicDataViewComponent, selector: "lib-t-dynamic-data-view", inputs: ["data"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [i1.MatIconButton, i1$1.MatChip, i3.MatIcon, i6.MatMenuTrigger, i10.MatSort, i5.MatTable, i5.MatHeaderCellDef, i5.MatHeaderRowDef, i5.MatColumnDef, i5.MatCellDef, i5.MatRowDef, i5.MatHeaderCell, i5.MatCell, i5.MatHeaderRow, i5.MatRow, i5$1.MatTooltip, import('./ngx-t-forms-ngx-t-forms-u_kigDid.mjs').then(function (n) { return n.an; }).then(m => m.FormatDataPipe)]] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: MultipleInputTableViewComponent, isStandalone: true, selector: "lib-multiple-input-table-view", inputs: { inputConfig: { classPropertyName: "inputConfig", publicName: "inputConfig", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, applyOptionsTo: { classPropertyName: "applyOptionsTo", publicName: "applyOptionsTo", isSignal: true, isRequired: false, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onEditItem: "onEditItem", onDeleteItem: "onDeleteItem", onCopy: "onCopy", onApplyOptionsTo: "onApplyOptionsTo", showItemAsLabel: "showItemAsLabel" }, ngImport: i0, template: "@defer (on viewport) {\n\n  @if (getColConfig.displayedColumnsInOrder.length === 0) {\n    <div class=\"mit-state mit-state--inline\">No columns</div>\n  }\n\n  <div class=\"table-container\">\n\n    <table mat-table [dataSource]=\"(dataSource() || [])\" class=\"mit-table\" matSort matSortActive=\"created\"\n      matSortDisableClear matSortDirection=\"desc\">\n      @for (col of (displayedColumnsInOrder || []); track col) {\n        <ng-container [matColumnDef]=\"col\">\n          <th mat-header-cell *matHeaderCellDef>\n            <span class=\"mit-th-label\">\n              {{ getColConfig.columnsConfig?.[col]?.[\"label\"] }}\n            </span>\n            @if ($last) {\n              <button matTooltip=\"Show other values\" [matMenuTriggerFor]=\"colOptions\" [matMenuTriggerData]=\"{}\"\n                class=\"mit-th-action\" mat-icon-button>\n                <mat-icon>label</mat-icon>\n              </button>\n            }\n          </th>\n          <td [class.functionClass]=\"row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION']\"\n            [style.background]=\"returnBackground(row, getColConfig.columnsConfig?.[col])\"\n            mat-cell *matCellDef=\"let row\">\n            @if (getColConfig.columnsConfig?.[col]?.['type'] === 'removal') {\n              <div class=\"cellClass\">\n\n                @if (!!row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION'] && !row['id'] && !inputConfig()?.multipleInputInEditId ||\n                !!row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION'] && inputConfig()?.multipleInputInEditId &&\n                inputConfig()?.multipleInputInEditId !== row['id']) {\n                  <div class=\"mit-fn-label\">\n                    <strong>{{ getCalculationFunction(row) }}</strong>\n                  </div>\n                }\n                @if (\n                  userCanApplyOptionsTo() &&\n                  !row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION'] &&\n                  row[''] !== 'true' && !inputConfig()?.readonly\n                ) {\n                  <button mat-icon-button [color]=\"t.menuOpen ? 'primary' : 'basic'\" [matMenuTriggerFor]=\"rowOptions\" [matMenuTriggerData]=\"{row:row}\" #t=\"matMenuTrigger\"\n                    (click)=\"applyOptionsToFn(row)\"\n                    class=\"mit-row-trigger\">\n                    @if (rowIsInEdit(row)) {\n                      <mat-icon color=\"primary\">edit</mat-icon>\n                    } @else {\n                      <mat-icon>{{ t.menuOpen ? 'close' : 'more_horiz' }}</mat-icon>\n                    }\n                  </button>\n                }\n\n                @if (row['SYSTEM_KEY_IN_EDIT']) {\n                  <mat-chip>In {{ inputConfig()?.readonly ? 'View' : 'Edit' }}</mat-chip>\n                }\n\n              </div>\n            }\n            @if (getColConfig.columnsConfig && getColConfig.columnsConfig?.[col]?.type !== 'removal') {\n              <div class=\"cellClass\">\n                <span>\n                  @if (getColConfig.columnsConfig?.[col].dataType === 'array' || getColConfig.columnsConfig?.[col].dataType === 'object') {\n                    <button mat-icon-button class=\"mit-data-button\"\n                      matTooltip=\"View data\"\n                      (click)=\"openDataOverlay($event, row[col])\">\n                      <mat-icon class=\"mit-data-icon\">data_object</mat-icon>\n                    </button>\n                  } @else {\n                    {{ row[col] | formatData: getColConfig.columnsConfig?.[col].dataType }}\n                  }\n                </span>\n              </div>\n            }\n          </td>\n        </ng-container>\n      }\n\n\n      <tr mat-header-row *matHeaderRowDef=\"getColConfig.displayedColumnsInOrder\"></tr>\n      <tr [class.mit-group-start]=\"hasTopBorder(row)\" mat-row\n        *matRowDef=\"let row; columns: getColConfig.displayedColumnsInOrder\"></tr>\n    </table>\n\n    @if (!dataSource()?.data?.length) {\n      <div class=\"mit-empty\">\n        <mat-icon class=\"mit-empty-icon\">list</mat-icon>\n        <strong class=\"mit-empty-title\">No items yet</strong>\n        <p class=\"mit-empty-text\">\n          <strong>Click the add button</strong> to create a new row. You'll fill in details using a form, and each\n          saved entry appears as a row here.\n        </p>\n      </div>\n    }\n  </div>\n} @placeholder {\n  <div class=\"mit-placeholder\">\n    <mat-spinner diameter=\"32\" />\n  </div>\n}\n\n@if (overlayOpen) {\n  <div class=\"data-overlay-backdrop\" (click)=\"closeDataOverlay()\"></div>\n  <div class=\"data-overlay-panel\"\n    [style.top.px]=\"overlayPosition.top\"\n    [style.left.px]=\"overlayPosition.left\"\n    (click)=\"$event.stopPropagation()\">\n    <div class=\"data-overlay-header\">\n      <span class=\"data-overlay-title\">\n        <mat-icon class=\"data-overlay-title-icon\">data_object</mat-icon>\n        Data\n      </span>\n      <button mat-icon-button class=\"mit-data-button\" (click)=\"closeDataOverlay()\">\n        <mat-icon class=\"mit-data-icon\">close</mat-icon>\n      </button>\n    </div>\n    <div class=\"data-overlay-body\">\n      <lib-t-dynamic-data-view [data]=\"overlayData\" />\n    </div>\n  </div>\n}\n\n<mat-menu #colOptions=\"matMenu\">\n  <ng-template matMenuContent>\n    @for (label of allPossibleLabels(); track label.label) {\n      <button mat-menu-item (click)=\"toggleTepLabel($event, label.formControlName);\">\n        <mat-icon>{{ label.selected ? 'check_circle' : 'radio_button_unchecked' }}</mat-icon>\n        {{ label.label }}\n      </button>\n    }\n  </ng-template>\n</mat-menu>\n\n<mat-menu #rowOptions=\"matMenu\">\n  <ng-template matMenuContent let-row=\"row\">\n    @if (!inputConfig()?.readonly) {\n      @if (userCanEdit()) {\n        <button mat-menu-item (click)=\"editItem(row)\">\n          <mat-icon>edit</mat-icon>\n          <div class=\"option-text\">\n            <div class=\"option-main-text\">Edit</div>\n            <div class=\"option-sub-text\">\n              {{ inputConfig()?.readonly ? 'View item properties' : 'Modify item properties' }}\n            </div>\n          </div>\n        </button>\n      }\n      @if (userCanAdd()) {\n        <button mat-menu-item (click)=\"copy(row)\">\n          <mat-icon>content_copy</mat-icon>\n          <div class=\"option-text\">\n            <div class=\"option-main-text\">Duplicate</div>\n            <div class=\"option-sub-text\">Create a copy with same values</div>\n          </div>\n        </button>\n      }\n\n      @if (userCanRemove()) {\n        @if (isAboutToDeleteRow(row)) {\n          <button mat-menu-item (click)=\"multipleInputRemoveItem($event,row)\">\n            <mat-icon color=\"accent\">cancel</mat-icon>\n            <div class=\"option-text\">\n              <div class=\"option-main-text option-main-text--cancel\">Cancel Deletion</div>\n              <div class=\"option-sub-text\">Auto-deleting in {{ secondsCountDown() }} seconds...</div>\n            </div>\n          </button>\n          <div class=\"deletion-progress-container\">\n            <mat-progress-bar color=\"warn\" mode=\"determinate\" [value]=\"getCountdownSeconds()\"></mat-progress-bar>\n            @if (getCountdownSeconds() > 75) {\n              <div class=\"deletion-message\">Deleting soon...</div>\n            }\n          </div>\n        } @else {\n          <button mat-menu-item (click)=\"multipleInputRemoveItem($event,row)\">\n            <mat-icon color=\"warn\">delete_outline</mat-icon>\n            <div class=\"option-text\">\n              <div class=\"option-main-text\">Delete</div>\n              <div class=\"option-sub-text\">Will delete after 3 seconds (click to cancel)</div>\n            </div>\n          </button>\n        }\n      }\n    }\n  </ng-template>\n</mat-menu>\n", styles: [".table-container{max-width:100%!important;overflow:auto!important;border-radius:8px}.mit-table{width:100%;background:transparent}.mit-table .mat-mdc-header-cell,.mit-table .mat-mdc-cell{padding:0 .625rem;font-size:.8125rem}.mit-table .mat-mdc-header-row{min-height:2.25rem}.mit-table .mat-mdc-row{min-height:2.5rem;transition:background .2s cubic-bezier(.16,1,.3,1)}.mit-table .mat-mdc-row:hover{background:color-mix(in srgb,var(--mat-sys-primary, #6750a4) 5%,transparent)}.mit-th-label{text-align:start;line-height:normal;font-size:.6875rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mat-sys-on-surface-variant, #49454f)}.mit-th-action{width:1.75rem;height:1.75rem;line-height:1.75rem;opacity:.55;transition:opacity .2s cubic-bezier(.16,1,.3,1)}.mit-th-action:hover{opacity:1}.cellClass{display:flex;align-items:center;min-height:2.5rem}.mit-group-start .mat-mdc-cell{border-top:2px solid var(--mat-sys-outline-variant, #cac4d0)}.functionClass{background:var(--mat-sys-surface-container, #f3edf7);font-weight:500}.mit-fn-label{width:100%;text-align:right;color:var(--mat-sys-on-surface-variant, #49454f);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase}.mit-row-trigger{margin-left:auto;margin-right:0;display:block}.mit-data-button{width:1.75rem;height:1.75rem;line-height:1.75rem}.mit-data-icon{font-size:1.125rem;width:1.125rem;height:1.125rem;line-height:1.125rem}.mit-state{display:flex;justify-content:center;padding:1rem;font-size:.8125rem;color:var(--mat-sys-on-surface-variant, #49454f);opacity:.7}.mit-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.375rem;padding:1.5rem 1.25rem;color:var(--mat-sys-on-surface-variant, #49454f)}.mit-empty-icon{font-size:1.75rem;width:1.75rem;height:1.75rem;line-height:1.75rem;opacity:.5}.mit-empty-title{font-size:.875rem;color:var(--mat-sys-on-surface, #1c1b1f)}.mit-empty-text{margin:0;max-width:22rem;font-size:.75rem;line-height:1.45;opacity:.85}.mit-placeholder{display:flex;justify-content:center;align-items:center;padding:2rem}.option-text{display:flex;flex-direction:column;margin-left:.5rem}.option-main-text{font-size:.875rem;font-weight:500;margin-bottom:2px;line-height:normal}.option-main-text--cancel{color:var(--mat-sys-primary, #6750a4)}.option-sub-text{font-size:.75rem;color:var(--mat-sys-on-surface-variant, #49454f);font-weight:400;line-height:1.2}.deletion-progress-container{position:relative;padding:0 1rem .5rem}.deletion-message{position:absolute;right:1rem;top:2px;font-size:.6875rem;color:var(--mat-sys-error, #b3261e);font-weight:500;line-height:1.6;animation:pulse 1s infinite}button:has(+.deletion-progress-container){border-bottom:none!important;padding-bottom:4px!important}@keyframes pulse{0%{opacity:.7}50%{opacity:1}to{opacity:.7}}@media(max-width:600px){.option-sub-text{max-width:180px;white-space:normal}}.data-overlay-backdrop{position:fixed;inset:0;z-index:999;background:transparent}.data-overlay-panel{position:fixed;z-index:1000;background:var(--mat-sys-surface, #fef7ff);border:1px solid color-mix(in srgb,var(--mat-sys-outline, #79747e) 15%,transparent);border-radius:12px;box-shadow:0 16px 56px color-mix(in srgb,var(--mat-sys-shadow, #000) 14%,transparent);min-width:280px;max-width:min(380px,calc(100vw - 16px));max-height:60vh;display:flex;flex-direction:column;overflow:hidden}.data-overlay-header{display:flex;align-items:center;justify-content:space-between;padding:.25rem .25rem .25rem .75rem;border-bottom:1px solid color-mix(in srgb,var(--mat-sys-outline, #79747e) 12%,transparent);flex-shrink:0}.data-overlay-title{font-size:.8125rem;font-weight:500;display:flex;align-items:center;color:var(--mat-sys-on-surface, #1c1b1f)}.data-overlay-title-icon{font-size:1rem;width:1rem;height:1rem;line-height:1rem;vertical-align:middle;margin-right:.25rem}.data-overlay-body{overflow:auto;padding:.25rem .5rem .5rem;flex:1}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i1$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i3$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "ngmodule", type: MatTableModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "component", type: TDynamicDataViewComponent, selector: "lib-t-dynamic-data-view", inputs: ["data"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [i1.MatIconButton, i4.MatChip, i3.MatIcon, i6.MatMenuTrigger, i10.MatSort, i5.MatTable, i5.MatHeaderCellDef, i5.MatHeaderRowDef, i5.MatColumnDef, i5.MatCellDef, i5.MatRowDef, i5.MatHeaderCell, i5.MatCell, i5.MatHeaderRow, i5.MatRow, i5$1.MatTooltip, import('./ngx-t-forms-ngx-t-forms-C2G8_WQk.mjs').then(function (n) { return n.as; }).then(m => m.FormatDataPipe)]] }); }
 }
-i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.2.12", ngImport: i0, type: MultipleInputTableViewComponent, resolveDeferredDeps: () => [import('./ngx-t-forms-ngx-t-forms-u_kigDid.mjs').then(function (n) { return n.an; }).then(m => m.FormatDataPipe)], resolveMetadata: FormatDataPipe => ({ decorators: [{
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.2.12", ngImport: i0, type: MultipleInputTableViewComponent, resolveDeferredDeps: () => [import('./ngx-t-forms-ngx-t-forms-C2G8_WQk.mjs').then(function (n) { return n.as; }).then(m => m.FormatDataPipe)], resolveMetadata: FormatDataPipe => ({ decorators: [{
                 type: Component,
                 args: [{ selector: 'lib-multiple-input-table-view', imports: [
                             MatButtonModule,
@@ -443,7 +443,7 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.2.12", n
                             MatTooltipModule,
                             FormatDataPipe,
                             TDynamicDataViewComponent,
-                        ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, template: "@defer (on viewport) {\n\n  @if (getColConfig.displayedColumnsInOrder.length === 0) {\n    <div class=\"mit-state mit-state--inline\">No columns</div>\n  }\n\n  <div class=\"table-container\">\n\n    <table mat-table [dataSource]=\"(dataSource() || [])\" class=\"mit-table\" matSort matSortActive=\"created\"\n      matSortDisableClear matSortDirection=\"desc\">\n      @for (col of (displayedColumnsInOrder || []); track col) {\n        <ng-container [matColumnDef]=\"col\">\n          <th mat-header-cell *matHeaderCellDef>\n            <span class=\"mit-th-label\">\n              {{ getColConfig.columnsConfig?.[col]?.[\"label\"] }}\n            </span>\n            @if ($last) {\n              <button matTooltip=\"Show other values\" [matMenuTriggerFor]=\"colOptions\" [matMenuTriggerData]=\"{}\"\n                class=\"mit-th-action\" mat-icon-button>\n                <mat-icon>label</mat-icon>\n              </button>\n            }\n          </th>\n          <td [class.functionClass]=\"row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION']\"\n            [style.background]=\"returnBackground(row, getColConfig.columnsConfig?.[col])\"\n            mat-cell *matCellDef=\"let row\">\n            @if (getColConfig.columnsConfig?.[col]?.['type'] === 'removal') {\n              <div class=\"cellClass\">\n\n                @if (!!row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION'] && !row['id'] && !inputConfig()?.multipleInputInEditId ||\n                !!row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION'] && inputConfig()?.multipleInputInEditId &&\n                inputConfig()?.multipleInputInEditId !== row['id']) {\n                  <div class=\"mit-fn-label\">\n                    <strong>{{ getCalculationFunction(row) }}</strong>\n                  </div>\n                }\n                @if (\n                  userCanApplyOptionsTo() &&\n                  !row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION'] &&\n                  row[''] !== 'true' && !inputConfig()?.readonly\n                ) {\n                  <button mat-icon-button [color]=\"t.menuOpen ? 'primary' : 'basic'\" [matMenuTriggerFor]=\"rowOptions\" [matMenuTriggerData]=\"{row:row}\" #t=\"matMenuTrigger\"\n                    (click)=\"applyOptionsToFn(row)\"\n                    class=\"mit-row-trigger\">\n                    @if (rowIsInEdit(row)) {\n                      <mat-icon color=\"primary\">edit</mat-icon>\n                    } @else {\n                      <mat-icon>{{ t.menuOpen ? 'close' : 'more_horiz' }}</mat-icon>\n                    }\n                  </button>\n                }\n\n                @if (row['SYSTEM_KEY_IN_EDIT']) {\n                  <mat-chip>In {{ inputConfig()?.readonly ? 'View' : 'Edit' }}</mat-chip>\n                }\n\n              </div>\n            }\n            @if (getColConfig.columnsConfig && getColConfig.columnsConfig?.[col]?.type !== 'removal') {\n              <div class=\"cellClass\">\n                <span>\n                  @if (getColConfig.columnsConfig?.[col].dataType === 'array' || getColConfig.columnsConfig?.[col].dataType === 'object') {\n                    <button mat-icon-button class=\"mit-data-button\"\n                      matTooltip=\"View data\"\n                      (click)=\"openDataOverlay($event, row[col])\">\n                      <mat-icon class=\"mit-data-icon\">data_object</mat-icon>\n                    </button>\n                  } @else {\n                    {{ row[col] | formatData: getColConfig.columnsConfig?.[col].dataType }}\n                  }\n                </span>\n              </div>\n            }\n          </td>\n        </ng-container>\n      }\n\n\n      <tr mat-header-row *matHeaderRowDef=\"getColConfig.displayedColumnsInOrder\"></tr>\n      <tr [class.mit-group-start]=\"hasTopBorder(row)\" mat-row\n        *matRowDef=\"let row; columns: getColConfig.displayedColumnsInOrder\"></tr>\n    </table>\n\n    @if (!(dataSource().data) || (dataSource().data).length === 0) {\n      <div class=\"mit-empty\">\n        <mat-icon class=\"mit-empty-icon\">list</mat-icon>\n        <strong class=\"mit-empty-title\">No items yet</strong>\n        <p class=\"mit-empty-text\">\n          <strong>Click the add button</strong> to create a new row. You'll fill in details using a form, and each\n          saved entry appears as a row here.\n        </p>\n      </div>\n    }\n  </div>\n} @placeholder {\n  <div class=\"mit-placeholder\">\n    <mat-spinner diameter=\"32\" />\n  </div>\n}\n\n@if (overlayOpen) {\n  <div class=\"data-overlay-backdrop\" (click)=\"closeDataOverlay()\"></div>\n  <div class=\"data-overlay-panel\"\n    [style.top.px]=\"overlayPosition.top\"\n    [style.left.px]=\"overlayPosition.left\"\n    (click)=\"$event.stopPropagation()\">\n    <div class=\"data-overlay-header\">\n      <span class=\"data-overlay-title\">\n        <mat-icon class=\"data-overlay-title-icon\">data_object</mat-icon>\n        Data\n      </span>\n      <button mat-icon-button class=\"mit-data-button\" (click)=\"closeDataOverlay()\">\n        <mat-icon class=\"mit-data-icon\">close</mat-icon>\n      </button>\n    </div>\n    <div class=\"data-overlay-body\">\n      <lib-t-dynamic-data-view [data]=\"overlayData\" />\n    </div>\n  </div>\n}\n\n<mat-menu #colOptions=\"matMenu\">\n  <ng-template matMenuContent>\n    @for (label of allPossibleLabels(); track label.label) {\n      <button mat-menu-item (click)=\"toggleTepLabel($event, label.formControlName);\">\n        <mat-icon>{{ label.selected ? 'check_circle' : 'radio_button_unchecked' }}</mat-icon>\n        {{ label.label }}\n      </button>\n    }\n  </ng-template>\n</mat-menu>\n\n<mat-menu #rowOptions=\"matMenu\">\n  <ng-template matMenuContent let-row=\"row\">\n    @if (!inputConfig()?.readonly) {\n      @if (userCanEdit()) {\n        <button mat-menu-item (click)=\"editItem(row)\">\n          <mat-icon>edit</mat-icon>\n          <div class=\"option-text\">\n            <div class=\"option-main-text\">Edit</div>\n            <div class=\"option-sub-text\">\n              {{ inputConfig()?.readonly ? 'View item properties' : 'Modify item properties' }}\n            </div>\n          </div>\n        </button>\n      }\n      @if (userCanAdd()) {\n        <button mat-menu-item (click)=\"copy(row)\">\n          <mat-icon>content_copy</mat-icon>\n          <div class=\"option-text\">\n            <div class=\"option-main-text\">Duplicate</div>\n            <div class=\"option-sub-text\">Create a copy with same values</div>\n          </div>\n        </button>\n      }\n\n      @if (userCanRemove()) {\n        @if (isAboutToDeleteRow(row)) {\n          <button mat-menu-item (click)=\"multipleInputRemoveItem($event,row)\">\n            <mat-icon color=\"accent\">cancel</mat-icon>\n            <div class=\"option-text\">\n              <div class=\"option-main-text option-main-text--cancel\">Cancel Deletion</div>\n              <div class=\"option-sub-text\">Auto-deleting in {{ secondsCountDown() }} seconds...</div>\n            </div>\n          </button>\n          <div class=\"deletion-progress-container\">\n            <mat-progress-bar color=\"warn\" mode=\"determinate\" [value]=\"getCountdownSeconds()\"></mat-progress-bar>\n            @if (getCountdownSeconds() > 75) {\n              <div class=\"deletion-message\">Deleting soon...</div>\n            }\n          </div>\n        } @else {\n          <button mat-menu-item (click)=\"multipleInputRemoveItem($event,row)\">\n            <mat-icon color=\"warn\">delete_outline</mat-icon>\n            <div class=\"option-text\">\n              <div class=\"option-main-text\">Delete</div>\n              <div class=\"option-sub-text\">Will delete after 3 seconds (click to cancel)</div>\n            </div>\n          </button>\n        }\n      }\n    }\n  </ng-template>\n</mat-menu>\n", styles: [".table-container{max-width:100%!important;overflow:auto!important;border-radius:8px}.mit-table{width:100%;background:transparent}.mit-table .mat-mdc-header-cell,.mit-table .mat-mdc-cell{padding:0 .625rem;font-size:.8125rem}.mit-table .mat-mdc-header-row{min-height:2.25rem}.mit-table .mat-mdc-row{min-height:2.5rem;transition:background .2s cubic-bezier(.16,1,.3,1)}.mit-table .mat-mdc-row:hover{background:color-mix(in srgb,var(--mat-sys-primary, #6750a4) 5%,transparent)}.mit-th-label{text-align:start;line-height:normal;font-size:.6875rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mat-sys-on-surface-variant, #49454f)}.mit-th-action{width:1.75rem;height:1.75rem;line-height:1.75rem;opacity:.55;transition:opacity .2s cubic-bezier(.16,1,.3,1)}.mit-th-action:hover{opacity:1}.cellClass{display:flex;align-items:center;min-height:2.5rem}.mit-group-start .mat-mdc-cell{border-top:2px solid var(--mat-sys-outline-variant, #cac4d0)}.functionClass{background:var(--mat-sys-surface-container, #f3edf7);font-weight:500}.mit-fn-label{width:100%;text-align:right;color:var(--mat-sys-on-surface-variant, #49454f);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase}.mit-row-trigger{margin-left:auto;margin-right:0;display:block}.mit-data-button{width:1.75rem;height:1.75rem;line-height:1.75rem}.mit-data-icon{font-size:1.125rem;width:1.125rem;height:1.125rem;line-height:1.125rem}.mit-state{display:flex;justify-content:center;padding:1rem;font-size:.8125rem;color:var(--mat-sys-on-surface-variant, #49454f);opacity:.7}.mit-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.375rem;padding:1.5rem 1.25rem;color:var(--mat-sys-on-surface-variant, #49454f)}.mit-empty-icon{font-size:1.75rem;width:1.75rem;height:1.75rem;line-height:1.75rem;opacity:.5}.mit-empty-title{font-size:.875rem;color:var(--mat-sys-on-surface, #1c1b1f)}.mit-empty-text{margin:0;max-width:22rem;font-size:.75rem;line-height:1.45;opacity:.85}.mit-placeholder{display:flex;justify-content:center;align-items:center;padding:2rem}.option-text{display:flex;flex-direction:column;margin-left:.5rem}.option-main-text{font-size:.875rem;font-weight:500;margin-bottom:2px;line-height:normal}.option-main-text--cancel{color:var(--mat-sys-primary, #6750a4)}.option-sub-text{font-size:.75rem;color:var(--mat-sys-on-surface-variant, #49454f);font-weight:400;line-height:1.2}.deletion-progress-container{position:relative;padding:0 1rem .5rem}.deletion-message{position:absolute;right:1rem;top:2px;font-size:.6875rem;color:var(--mat-sys-error, #b3261e);font-weight:500;line-height:1.6;animation:pulse 1s infinite}button:has(+.deletion-progress-container){border-bottom:none!important;padding-bottom:4px!important}@keyframes pulse{0%{opacity:.7}50%{opacity:1}to{opacity:.7}}@media(max-width:600px){.option-sub-text{max-width:180px;white-space:normal}}.data-overlay-backdrop{position:fixed;inset:0;z-index:999;background:transparent}.data-overlay-panel{position:fixed;z-index:1000;background:var(--mat-sys-surface, #fef7ff);border:1px solid color-mix(in srgb,var(--mat-sys-outline, #79747e) 15%,transparent);border-radius:12px;box-shadow:0 16px 56px color-mix(in srgb,var(--mat-sys-shadow, #000) 14%,transparent);min-width:280px;max-width:min(380px,calc(100vw - 16px));max-height:60vh;display:flex;flex-direction:column;overflow:hidden}.data-overlay-header{display:flex;align-items:center;justify-content:space-between;padding:.25rem .25rem .25rem .75rem;border-bottom:1px solid color-mix(in srgb,var(--mat-sys-outline, #79747e) 12%,transparent);flex-shrink:0}.data-overlay-title{font-size:.8125rem;font-weight:500;display:flex;align-items:center;color:var(--mat-sys-on-surface, #1c1b1f)}.data-overlay-title-icon{font-size:1rem;width:1rem;height:1rem;line-height:1rem;vertical-align:middle;margin-right:.25rem}.data-overlay-body{overflow:auto;padding:.25rem .5rem .5rem;flex:1}\n"] }]
+                        ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, template: "@defer (on viewport) {\n\n  @if (getColConfig.displayedColumnsInOrder.length === 0) {\n    <div class=\"mit-state mit-state--inline\">No columns</div>\n  }\n\n  <div class=\"table-container\">\n\n    <table mat-table [dataSource]=\"(dataSource() || [])\" class=\"mit-table\" matSort matSortActive=\"created\"\n      matSortDisableClear matSortDirection=\"desc\">\n      @for (col of (displayedColumnsInOrder || []); track col) {\n        <ng-container [matColumnDef]=\"col\">\n          <th mat-header-cell *matHeaderCellDef>\n            <span class=\"mit-th-label\">\n              {{ getColConfig.columnsConfig?.[col]?.[\"label\"] }}\n            </span>\n            @if ($last) {\n              <button matTooltip=\"Show other values\" [matMenuTriggerFor]=\"colOptions\" [matMenuTriggerData]=\"{}\"\n                class=\"mit-th-action\" mat-icon-button>\n                <mat-icon>label</mat-icon>\n              </button>\n            }\n          </th>\n          <td [class.functionClass]=\"row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION']\"\n            [style.background]=\"returnBackground(row, getColConfig.columnsConfig?.[col])\"\n            mat-cell *matCellDef=\"let row\">\n            @if (getColConfig.columnsConfig?.[col]?.['type'] === 'removal') {\n              <div class=\"cellClass\">\n\n                @if (!!row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION'] && !row['id'] && !inputConfig()?.multipleInputInEditId ||\n                !!row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION'] && inputConfig()?.multipleInputInEditId &&\n                inputConfig()?.multipleInputInEditId !== row['id']) {\n                  <div class=\"mit-fn-label\">\n                    <strong>{{ getCalculationFunction(row) }}</strong>\n                  </div>\n                }\n                @if (\n                  userCanApplyOptionsTo() &&\n                  !row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION'] &&\n                  row[''] !== 'true' && !inputConfig()?.readonly\n                ) {\n                  <button mat-icon-button [color]=\"t.menuOpen ? 'primary' : 'basic'\" [matMenuTriggerFor]=\"rowOptions\" [matMenuTriggerData]=\"{row:row}\" #t=\"matMenuTrigger\"\n                    (click)=\"applyOptionsToFn(row)\"\n                    class=\"mit-row-trigger\">\n                    @if (rowIsInEdit(row)) {\n                      <mat-icon color=\"primary\">edit</mat-icon>\n                    } @else {\n                      <mat-icon>{{ t.menuOpen ? 'close' : 'more_horiz' }}</mat-icon>\n                    }\n                  </button>\n                }\n\n                @if (row['SYSTEM_KEY_IN_EDIT']) {\n                  <mat-chip>In {{ inputConfig()?.readonly ? 'View' : 'Edit' }}</mat-chip>\n                }\n\n              </div>\n            }\n            @if (getColConfig.columnsConfig && getColConfig.columnsConfig?.[col]?.type !== 'removal') {\n              <div class=\"cellClass\">\n                <span>\n                  @if (getColConfig.columnsConfig?.[col].dataType === 'array' || getColConfig.columnsConfig?.[col].dataType === 'object') {\n                    <button mat-icon-button class=\"mit-data-button\"\n                      matTooltip=\"View data\"\n                      (click)=\"openDataOverlay($event, row[col])\">\n                      <mat-icon class=\"mit-data-icon\">data_object</mat-icon>\n                    </button>\n                  } @else {\n                    {{ row[col] | formatData: getColConfig.columnsConfig?.[col].dataType }}\n                  }\n                </span>\n              </div>\n            }\n          </td>\n        </ng-container>\n      }\n\n\n      <tr mat-header-row *matHeaderRowDef=\"getColConfig.displayedColumnsInOrder\"></tr>\n      <tr [class.mit-group-start]=\"hasTopBorder(row)\" mat-row\n        *matRowDef=\"let row; columns: getColConfig.displayedColumnsInOrder\"></tr>\n    </table>\n\n    @if (!dataSource()?.data?.length) {\n      <div class=\"mit-empty\">\n        <mat-icon class=\"mit-empty-icon\">list</mat-icon>\n        <strong class=\"mit-empty-title\">No items yet</strong>\n        <p class=\"mit-empty-text\">\n          <strong>Click the add button</strong> to create a new row. You'll fill in details using a form, and each\n          saved entry appears as a row here.\n        </p>\n      </div>\n    }\n  </div>\n} @placeholder {\n  <div class=\"mit-placeholder\">\n    <mat-spinner diameter=\"32\" />\n  </div>\n}\n\n@if (overlayOpen) {\n  <div class=\"data-overlay-backdrop\" (click)=\"closeDataOverlay()\"></div>\n  <div class=\"data-overlay-panel\"\n    [style.top.px]=\"overlayPosition.top\"\n    [style.left.px]=\"overlayPosition.left\"\n    (click)=\"$event.stopPropagation()\">\n    <div class=\"data-overlay-header\">\n      <span class=\"data-overlay-title\">\n        <mat-icon class=\"data-overlay-title-icon\">data_object</mat-icon>\n        Data\n      </span>\n      <button mat-icon-button class=\"mit-data-button\" (click)=\"closeDataOverlay()\">\n        <mat-icon class=\"mit-data-icon\">close</mat-icon>\n      </button>\n    </div>\n    <div class=\"data-overlay-body\">\n      <lib-t-dynamic-data-view [data]=\"overlayData\" />\n    </div>\n  </div>\n}\n\n<mat-menu #colOptions=\"matMenu\">\n  <ng-template matMenuContent>\n    @for (label of allPossibleLabels(); track label.label) {\n      <button mat-menu-item (click)=\"toggleTepLabel($event, label.formControlName);\">\n        <mat-icon>{{ label.selected ? 'check_circle' : 'radio_button_unchecked' }}</mat-icon>\n        {{ label.label }}\n      </button>\n    }\n  </ng-template>\n</mat-menu>\n\n<mat-menu #rowOptions=\"matMenu\">\n  <ng-template matMenuContent let-row=\"row\">\n    @if (!inputConfig()?.readonly) {\n      @if (userCanEdit()) {\n        <button mat-menu-item (click)=\"editItem(row)\">\n          <mat-icon>edit</mat-icon>\n          <div class=\"option-text\">\n            <div class=\"option-main-text\">Edit</div>\n            <div class=\"option-sub-text\">\n              {{ inputConfig()?.readonly ? 'View item properties' : 'Modify item properties' }}\n            </div>\n          </div>\n        </button>\n      }\n      @if (userCanAdd()) {\n        <button mat-menu-item (click)=\"copy(row)\">\n          <mat-icon>content_copy</mat-icon>\n          <div class=\"option-text\">\n            <div class=\"option-main-text\">Duplicate</div>\n            <div class=\"option-sub-text\">Create a copy with same values</div>\n          </div>\n        </button>\n      }\n\n      @if (userCanRemove()) {\n        @if (isAboutToDeleteRow(row)) {\n          <button mat-menu-item (click)=\"multipleInputRemoveItem($event,row)\">\n            <mat-icon color=\"accent\">cancel</mat-icon>\n            <div class=\"option-text\">\n              <div class=\"option-main-text option-main-text--cancel\">Cancel Deletion</div>\n              <div class=\"option-sub-text\">Auto-deleting in {{ secondsCountDown() }} seconds...</div>\n            </div>\n          </button>\n          <div class=\"deletion-progress-container\">\n            <mat-progress-bar color=\"warn\" mode=\"determinate\" [value]=\"getCountdownSeconds()\"></mat-progress-bar>\n            @if (getCountdownSeconds() > 75) {\n              <div class=\"deletion-message\">Deleting soon...</div>\n            }\n          </div>\n        } @else {\n          <button mat-menu-item (click)=\"multipleInputRemoveItem($event,row)\">\n            <mat-icon color=\"warn\">delete_outline</mat-icon>\n            <div class=\"option-text\">\n              <div class=\"option-main-text\">Delete</div>\n              <div class=\"option-sub-text\">Will delete after 3 seconds (click to cancel)</div>\n            </div>\n          </button>\n        }\n      }\n    }\n  </ng-template>\n</mat-menu>\n", styles: [".table-container{max-width:100%!important;overflow:auto!important;border-radius:8px}.mit-table{width:100%;background:transparent}.mit-table .mat-mdc-header-cell,.mit-table .mat-mdc-cell{padding:0 .625rem;font-size:.8125rem}.mit-table .mat-mdc-header-row{min-height:2.25rem}.mit-table .mat-mdc-row{min-height:2.5rem;transition:background .2s cubic-bezier(.16,1,.3,1)}.mit-table .mat-mdc-row:hover{background:color-mix(in srgb,var(--mat-sys-primary, #6750a4) 5%,transparent)}.mit-th-label{text-align:start;line-height:normal;font-size:.6875rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mat-sys-on-surface-variant, #49454f)}.mit-th-action{width:1.75rem;height:1.75rem;line-height:1.75rem;opacity:.55;transition:opacity .2s cubic-bezier(.16,1,.3,1)}.mit-th-action:hover{opacity:1}.cellClass{display:flex;align-items:center;min-height:2.5rem}.mit-group-start .mat-mdc-cell{border-top:2px solid var(--mat-sys-outline-variant, #cac4d0)}.functionClass{background:var(--mat-sys-surface-container, #f3edf7);font-weight:500}.mit-fn-label{width:100%;text-align:right;color:var(--mat-sys-on-surface-variant, #49454f);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase}.mit-row-trigger{margin-left:auto;margin-right:0;display:block}.mit-data-button{width:1.75rem;height:1.75rem;line-height:1.75rem}.mit-data-icon{font-size:1.125rem;width:1.125rem;height:1.125rem;line-height:1.125rem}.mit-state{display:flex;justify-content:center;padding:1rem;font-size:.8125rem;color:var(--mat-sys-on-surface-variant, #49454f);opacity:.7}.mit-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.375rem;padding:1.5rem 1.25rem;color:var(--mat-sys-on-surface-variant, #49454f)}.mit-empty-icon{font-size:1.75rem;width:1.75rem;height:1.75rem;line-height:1.75rem;opacity:.5}.mit-empty-title{font-size:.875rem;color:var(--mat-sys-on-surface, #1c1b1f)}.mit-empty-text{margin:0;max-width:22rem;font-size:.75rem;line-height:1.45;opacity:.85}.mit-placeholder{display:flex;justify-content:center;align-items:center;padding:2rem}.option-text{display:flex;flex-direction:column;margin-left:.5rem}.option-main-text{font-size:.875rem;font-weight:500;margin-bottom:2px;line-height:normal}.option-main-text--cancel{color:var(--mat-sys-primary, #6750a4)}.option-sub-text{font-size:.75rem;color:var(--mat-sys-on-surface-variant, #49454f);font-weight:400;line-height:1.2}.deletion-progress-container{position:relative;padding:0 1rem .5rem}.deletion-message{position:absolute;right:1rem;top:2px;font-size:.6875rem;color:var(--mat-sys-error, #b3261e);font-weight:500;line-height:1.6;animation:pulse 1s infinite}button:has(+.deletion-progress-container){border-bottom:none!important;padding-bottom:4px!important}@keyframes pulse{0%{opacity:.7}50%{opacity:1}to{opacity:.7}}@media(max-width:600px){.option-sub-text{max-width:180px;white-space:normal}}.data-overlay-backdrop{position:fixed;inset:0;z-index:999;background:transparent}.data-overlay-panel{position:fixed;z-index:1000;background:var(--mat-sys-surface, #fef7ff);border:1px solid color-mix(in srgb,var(--mat-sys-outline, #79747e) 15%,transparent);border-radius:12px;box-shadow:0 16px 56px color-mix(in srgb,var(--mat-sys-shadow, #000) 14%,transparent);min-width:280px;max-width:min(380px,calc(100vw - 16px));max-height:60vh;display:flex;flex-direction:column;overflow:hidden}.data-overlay-header{display:flex;align-items:center;justify-content:space-between;padding:.25rem .25rem .25rem .75rem;border-bottom:1px solid color-mix(in srgb,var(--mat-sys-outline, #79747e) 12%,transparent);flex-shrink:0}.data-overlay-title{font-size:.8125rem;font-weight:500;display:flex;align-items:center;color:var(--mat-sys-on-surface, #1c1b1f)}.data-overlay-title-icon{font-size:1rem;width:1rem;height:1rem;line-height:1rem;vertical-align:middle;margin-right:.25rem}.data-overlay-body{overflow:auto;padding:.25rem .5rem .5rem;flex:1}\n"] }]
             }], ctorParameters: null, propDecorators: { inputConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputConfig", required: false }] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }], applyOptionsTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "applyOptionsTo", required: false }] }], formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: false }] }], onEditItem: [{ type: i0.Output, args: ["onEditItem"] }], onDeleteItem: [{ type: i0.Output, args: ["onDeleteItem"] }], onCopy: [{ type: i0.Output, args: ["onCopy"] }], onApplyOptionsTo: [{ type: i0.Output, args: ["onApplyOptionsTo"] }], showItemAsLabel: [{ type: i0.Output, args: ["showItemAsLabel"] }] } }) });
 
 class MultipleInputTableEditComponent {
@@ -567,7 +567,7 @@ class MultipleInputTableEditComponent {
         this.areYouSure = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: MultipleInputTableEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: MultipleInputTableEditComponent, isStandalone: true, selector: "lib-multiple-input-table-edit", inputs: { inputConfig: { classPropertyName: "inputConfig", publicName: "inputConfig", isSignal: true, isRequired: true, transformFunction: null }, editorMode: { classPropertyName: "editorMode", publicName: "editorMode", isSignal: true, isRequired: false, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: false, transformFunction: null }, formBuilderFunctions: { classPropertyName: "formBuilderFunctions", publicName: "formBuilderFunctions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSaveMultipleInputForm: "onSaveMultipleInputForm", editMultipleInput: "editMultipleInput", deleteInput: "deleteInput", showItemAsLabel: "showItemAsLabel", addFunction: "addFunction", reorderItems: "reorderItems" }, ngImport: i0, template: "<mat-card appearance=\"outlined\" class=\"edit-card mat-elevation-z4\">\n  <mat-card-content>\n    <div class=\"list row\" (cdkDropListDropped)=\"dropItems($event)\"\n      [cdkDropListData]=\"innerInputs()\" cdkDropList #InputList=\"cdkDropList\">\n      @for (innerInput of innerInputs(); track innerInput.id) {\n        <ng-container>\n          @if (editorMode()) {\n            @if (!!formGroup()) {\n              <mat-card (mouseover)=\"activeInput = innerInput.id\" cdkDrag\n                (cdkDragStarted)=\"dragging = true\" (cdkDragReleased)=\"dragging = false\"\n                [class.inputCardElevated]=\"activeInput === innerInput.id\"\n                [class.inputCard]=\"activeInput !== innerInput.id\"\n                [class]=\"'col-md-' + (dragging ? '12' : innerInput.colSize)\" class=\"box\">\n                <ng-container *ngComponentOutlet=\"InputComponent;\n                  inputs: {\n                    inputConfig: innerInput,\n                    formGroup: formGroup(),\n                    formBuilderFunctions: formBuilderFunctions(),\n                  }\">\n                </ng-container>\n                @if (activeInput === innerInput.id) {\n                  <mat-card-actions class=\"input-actions\">\n                    <span class=\"spacer\"></span>\n                    <button [matTooltip]=\"'Edit Input: ' + innerInput.label\"\n                      (click)=\"editInput(innerInput)\" mat-icon-button>\n                      <mat-icon>edit</mat-icon>\n                    </button>\n                    @if (!!inputWillBeRemovedIn(innerInput.id)) {\n                      <button (mouseover)=\"overId = innerInput.id\" (mouseout)=\"overId = null\"\n                        (click)=\"removeInput(innerInput)\" color=\"warn\" mat-stroked-button>\n                        <div class=\"countdown-button\">\n                          <mat-progress-spinner class=\"cancelProgress\" color=\"primary\"\n                            [value]=\"((inputWillBeRemovedIn(innerInput.id) || 0) / 5) * 100\">\n                          </mat-progress-spinner>\n                          {{ overId === innerInput.id ? 'Click to cancel' : 'Deleting in' }}\n                          {{ inputWillBeRemovedIn(innerInput.id) }}\n                        </div>\n                      </button>\n                    } @else if (inputConfig().systemDefault !== true && innerInput.systemDefault !== true) {\n                      <button [matTooltip]=\"'Delete input ' + innerInput.label\"\n                        (click)=\"removeInput(innerInput)\" mat-icon-button>\n                        <mat-icon>delete</mat-icon>\n                      </button>\n                    }\n                    <span class=\"action-divider\"></span>\n                    @if (!!innerInput.showAsLabel && innerInput.dataType === 'number' || !!innerInput.showAsLabel && innerInput.type === 'number') {\n                      <button\n                        [matMenuTriggerFor]=\"calculationMenu\"\n                        [matMenuTriggerData]=\"{inputId:innerInput.originalId || innerInput.id}\"\n                        [matTooltip]=\"'calculate sum,avg,min,max'\"\n                        mat-icon-button>\n                        <mat-icon>calculate</mat-icon>\n                      </button>\n                    }\n                    <button [color]=\"innerInput.showAsLabel ? 'primary' : ''\"\n                      (click)=\"toggleLabel(innerInput)\"\n                      [matTooltip]=\"innerInput.showAsLabel ? 'Hide as label' : 'Show as label'\"\n                      mat-icon-button>\n                      <mat-icon>label</mat-icon>\n                    </button>\n                    <span class=\"spacer\"></span>\n                  </mat-card-actions>\n                }\n              </mat-card>\n            }\n          } @else {\n            <div [class]=\"'col-md-' + (dragging ? '12' : innerInput.colSize)\" class=\"box\">\n              <ng-container *ngComponentOutlet=\"InputComponent;\n                inputs: {\n                  inputConfig: innerInput,\n                  formGroup: formGroup(),\n                  formBuilderFunctions: formBuilderFunctions(),\n                }\">\n              </ng-container>\n            </div>\n          }\n        </ng-container>\n      }\n      @if (!!editorMode() && innerInputs().length === 0) {\n        <div class=\"tree-instructions\">\n          <mat-icon class=\"info-icon\" color=\"primary\">info</mat-icon>\n          <span>\n            <strong>Add Form Input</strong>\n            <br>\n            Manage your list by adding, editing, or removing items. Each item is customizable through a form.\n          </span>\n        </div>\n      }\n    </div>\n  </mat-card-content>\n  @if (innerInputs().length !== 0) {\n    <mat-divider></mat-divider>\n    <mat-card-actions align=\"end\" class=\"edit-card-actions\">\n      <button [color]=\"areYouSure ? 'warn' : ''\"\n        [class.confirm-leave]=\"areYouSure\" mat-button\n        (click)=\"closeMultipleInput()\">\n        {{ areYouSure ? \"leave without saving\" : \"cancel\" }}\n      </button>\n      @if (!inputConfig().readonly) {\n        <button [disabled]=\"!!formInvalid()\" class=\"save-button\" color=\"primary\"\n          (click)=\"saveMultipleInputForm()\" mat-raised-button>\n          {{ rowInUpdate() ? \"Update\" : \"Save\" }}\n        </button>\n      }\n    </mat-card-actions>\n  }\n</mat-card>\n\n\n<mat-menu #calculationMenu=\"matMenu\">\n  <ng-template matMenuContent let-inputId=\"sectionId\">\n    @for (func of calculationFunctions; track func) {\n      <button (click)=\"toggleFunction(func, inputId)\" mat-menu-item>\n        {{ func }}\n        @if (selectedFunction(func)) {\n          <mat-icon color=\"primary\">check_circle</mat-icon>\n        }\n      </button>\n    }\n  </ng-template>\n</mat-menu>\n", styles: [".edit-card{margin-top:.5rem;background:var(--mat-sys-surface-container, #f3edf7);border-radius:12px}.inputCardElevated{background:var(--mat-sys-surface, #fef7ff);box-shadow:var(--mdc-elevated-card-container-elevation);transition:box-shadow .3s cubic-bezier(.16,1,.3,1)}.inputCard{box-shadow:none;transition:box-shadow .3s cubic-bezier(.16,1,.3,1)}.list{min-height:60px}.box{padding:.25rem;cursor:move}.input-actions{display:flex;align-items:center;gap:.125rem}.action-divider{width:1px;align-self:stretch;margin:.25rem;background:color-mix(in srgb,var(--mat-sys-outline, #79747e) 25%,transparent)}.countdown-button{display:flex;align-items:center}.cdk-drag-preview{box-sizing:border-box;border:none;border-radius:8px;box-shadow:0 5px 5px -3px color-mix(in srgb,var(--mat-sys-shadow, #000) 20%,transparent),0 8px 10px 1px color-mix(in srgb,var(--mat-sys-shadow, #000) 14%,transparent),0 3px 14px 2px color-mix(in srgb,var(--mat-sys-shadow, #000) 12%,transparent)}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.box:last-child{border:none}.list.cdk-drop-list-dragging .box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.cancelProgress{height:24px!important;width:24px!important;margin-right:.3125rem}.edit-card-actions{gap:.5rem;padding:.5rem .75rem .75rem}.confirm-leave{text-decoration:underline}.save-button{min-width:10em}.tree-instructions{display:flex;align-items:center;gap:.5rem;padding:.75rem;background:color-mix(in srgb,var(--mat-sys-primary, #6750a4) 6%,transparent);border:1px solid color-mix(in srgb,var(--mat-sys-primary, #6750a4) 14%,transparent);border-radius:8px;margin-bottom:1rem;font-size:.8125rem;color:var(--mat-sys-on-surface-variant, #49454f)}.info-icon{min-width:38px!important;display:block;margin-top:4px;margin-bottom:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.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.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$3.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$3.MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i3$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: MultipleInputTableEditComponent, isStandalone: true, selector: "lib-multiple-input-table-edit", inputs: { inputConfig: { classPropertyName: "inputConfig", publicName: "inputConfig", isSignal: true, isRequired: true, transformFunction: null }, editorMode: { classPropertyName: "editorMode", publicName: "editorMode", isSignal: true, isRequired: false, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: false, transformFunction: null }, formBuilderFunctions: { classPropertyName: "formBuilderFunctions", publicName: "formBuilderFunctions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSaveMultipleInputForm: "onSaveMultipleInputForm", editMultipleInput: "editMultipleInput", deleteInput: "deleteInput", showItemAsLabel: "showItemAsLabel", addFunction: "addFunction", reorderItems: "reorderItems" }, ngImport: i0, template: "<mat-card appearance=\"outlined\" class=\"edit-card mat-elevation-z4\">\n  <mat-card-content>\n    <div class=\"list row\" (cdkDropListDropped)=\"dropItems($event)\"\n      [cdkDropListData]=\"innerInputs()\" cdkDropList #InputList=\"cdkDropList\">\n      @for (innerInput of innerInputs(); track innerInput.id) {\n        <ng-container>\n          @if (editorMode()) {\n            @if (!!formGroup()) {\n              <mat-card (mouseover)=\"activeInput = innerInput.id\" cdkDrag\n                (cdkDragStarted)=\"dragging = true\" (cdkDragReleased)=\"dragging = false\"\n                [class.inputCardElevated]=\"activeInput === innerInput.id\"\n                [class.inputCard]=\"activeInput !== innerInput.id\"\n                [class]=\"'col-md-' + (dragging ? '12' : innerInput.colSize)\" class=\"box\">\n                <ng-container *ngComponentOutlet=\"InputComponent;\n                  inputs: {\n                    inputConfig: innerInput,\n                    formGroup: formGroup(),\n                    formBuilderFunctions: formBuilderFunctions(),\n                  }\">\n                </ng-container>\n                @if (activeInput === innerInput.id) {\n                  <mat-card-actions class=\"input-actions\">\n                    <span class=\"spacer\"></span>\n                    <button [matTooltip]=\"'Edit Input: ' + innerInput.label\"\n                      (click)=\"editInput(innerInput)\" mat-icon-button>\n                      <mat-icon>edit</mat-icon>\n                    </button>\n                    @if (!!inputWillBeRemovedIn(innerInput.id)) {\n                      <button (mouseover)=\"overId = innerInput.id\" (mouseout)=\"overId = null\"\n                        (click)=\"removeInput(innerInput)\" color=\"warn\" mat-stroked-button>\n                        <div class=\"countdown-button\">\n                          <mat-progress-spinner class=\"cancelProgress\" color=\"primary\"\n                            [value]=\"((inputWillBeRemovedIn(innerInput.id) || 0) / 5) * 100\">\n                          </mat-progress-spinner>\n                          {{ overId === innerInput.id ? 'Click to cancel' : 'Deleting in' }}\n                          {{ inputWillBeRemovedIn(innerInput.id) }}\n                        </div>\n                      </button>\n                    } @else if (inputConfig().systemDefault !== true && innerInput.systemDefault !== true) {\n                      <button [matTooltip]=\"'Delete input ' + innerInput.label\"\n                        (click)=\"removeInput(innerInput)\" mat-icon-button>\n                        <mat-icon>delete</mat-icon>\n                      </button>\n                    }\n                    <span class=\"action-divider\"></span>\n                    @if (!!innerInput.showAsLabel && innerInput.dataType === 'number' || !!innerInput.showAsLabel && innerInput.type === 'number') {\n                      <button\n                        [matMenuTriggerFor]=\"calculationMenu\"\n                        [matMenuTriggerData]=\"{inputId:innerInput.originalId || innerInput.id}\"\n                        [matTooltip]=\"'calculate sum,avg,min,max'\"\n                        mat-icon-button>\n                        <mat-icon>calculate</mat-icon>\n                      </button>\n                    }\n                    <button [color]=\"innerInput.showAsLabel ? 'primary' : ''\"\n                      (click)=\"toggleLabel(innerInput)\"\n                      [matTooltip]=\"innerInput.showAsLabel ? 'Hide as label' : 'Show as label'\"\n                      mat-icon-button>\n                      <mat-icon>label</mat-icon>\n                    </button>\n                    <span class=\"spacer\"></span>\n                  </mat-card-actions>\n                }\n              </mat-card>\n            }\n          } @else {\n            <div [class]=\"'col-md-' + (dragging ? '12' : innerInput.colSize)\" class=\"box\">\n              <ng-container *ngComponentOutlet=\"InputComponent;\n                inputs: {\n                  inputConfig: innerInput,\n                  formGroup: formGroup(),\n                  formBuilderFunctions: formBuilderFunctions(),\n                }\">\n              </ng-container>\n            </div>\n          }\n        </ng-container>\n      }\n      @if (!!editorMode() && innerInputs().length === 0) {\n        <div class=\"tree-instructions\">\n          <mat-icon class=\"info-icon\" color=\"primary\">info</mat-icon>\n          <span>\n            <strong>Add Form Input</strong>\n            <br>\n            Manage your list by adding, editing, or removing items. Each item is customizable through a form.\n          </span>\n        </div>\n      }\n    </div>\n  </mat-card-content>\n  @if (innerInputs().length !== 0) {\n    <mat-divider></mat-divider>\n    <mat-card-actions align=\"end\" class=\"edit-card-actions\">\n      <button [color]=\"areYouSure ? 'warn' : ''\"\n        [class.confirm-leave]=\"areYouSure\" mat-button\n        (click)=\"closeMultipleInput()\">\n        {{ areYouSure ? \"leave without saving\" : \"cancel\" }}\n      </button>\n      @if (!inputConfig().readonly) {\n        <button [disabled]=\"!!formInvalid()\" class=\"save-button\" color=\"primary\"\n          (click)=\"saveMultipleInputForm()\" mat-raised-button>\n          {{ rowInUpdate() ? \"Update\" : \"Save\" }}\n        </button>\n      }\n    </mat-card-actions>\n  }\n</mat-card>\n\n\n<mat-menu #calculationMenu=\"matMenu\">\n  <ng-template matMenuContent let-inputId=\"sectionId\">\n    @for (func of calculationFunctions; track func) {\n      <button (click)=\"toggleFunction(func, inputId)\" mat-menu-item>\n        {{ func }}\n        @if (selectedFunction(func)) {\n          <mat-icon color=\"primary\">check_circle</mat-icon>\n        }\n      </button>\n    }\n  </ng-template>\n</mat-menu>\n", styles: [".edit-card{margin-top:.5rem;background:var(--mat-sys-surface-container, #f3edf7);border-radius:12px}.inputCardElevated{background:var(--mat-sys-surface, #fef7ff);box-shadow:var(--mdc-elevated-card-container-elevation);transition:box-shadow .3s cubic-bezier(.16,1,.3,1)}.inputCard{box-shadow:none;transition:box-shadow .3s cubic-bezier(.16,1,.3,1)}.list{min-height:60px}.box{padding:.25rem;cursor:move}.input-actions{display:flex;align-items:center;gap:.125rem}.action-divider{width:1px;align-self:stretch;margin:.25rem;background:color-mix(in srgb,var(--mat-sys-outline, #79747e) 25%,transparent)}.countdown-button{display:flex;align-items:center}.cdk-drag-preview{box-sizing:border-box;border:none;border-radius:8px;box-shadow:0 5px 5px -3px color-mix(in srgb,var(--mat-sys-shadow, #000) 20%,transparent),0 8px 10px 1px color-mix(in srgb,var(--mat-sys-shadow, #000) 14%,transparent),0 3px 14px 2px color-mix(in srgb,var(--mat-sys-shadow, #000) 12%,transparent)}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.box:last-child{border:none}.list.cdk-drop-list-dragging .box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.cancelProgress{height:24px!important;width:24px!important;margin-right:.3125rem}.edit-card-actions{gap:.5rem;padding:.5rem .75rem .75rem}.confirm-leave{text-decoration:underline}.save-button{min-width:10em}.tree-instructions{display:flex;align-items:center;gap:.5rem;padding:.75rem;background:color-mix(in srgb,var(--mat-sys-primary, #6750a4) 6%,transparent);border:1px solid color-mix(in srgb,var(--mat-sys-primary, #6750a4) 14%,transparent);border-radius:8px;margin-bottom:1rem;font-size:.8125rem;color:var(--mat-sys-on-surface-variant, #49454f)}.info-icon{min-width:38px!important;display:block;margin-top:4px;margin-bottom:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.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.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$3.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$3.MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i4$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i3$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: MultipleInputTableEditComponent, decorators: [{
             type: Component,
@@ -886,7 +886,7 @@ class MultipleInputInputElementComponent {
         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: MultipleInputInputElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: MultipleInputInputElementComponent, isStandalone: true, selector: "lib-multiple-input-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 }, editorMode: { classPropertyName: "editorMode", publicName: "editorMode", isSignal: true, isRequired: false, transformFunction: null }, formBuilderFunctions: { classPropertyName: "formBuilderFunctions", publicName: "formBuilderFunctions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { reload: "reload" }, ngImport: i0, template: "<form [formGroup]=\"formGroup()\">\n  @if (inputConfig(); as inputConfig) {\n    <mat-form-field\n      class=\"multiple-input-field\"\n      [appearance]=\"inputConfig.appearance || 'fill'\"\n      subscriptSizing=\"dynamic\"\n      floatLabel=\"always\"\n    >\n      <mat-label>\n        {{ inputConfig.label }}\n        <lib-t-form-input-status [inputConfig]=\"inputConfig\"></lib-t-form-input-status>\n      </mat-label>\n\n      @if (inputConfig.id) {\n        <lib-multiple-input-table\n          [editorMode]=\"editorMode()\"\n          [required]=\"inputConfig.required\"\n          [formGroup]=\"formGroup()\"\n          [formBuilderFunctions]=\"formBuilderFunctions()\"\n          [formControlName]=\"inputConfig.id\"\n          [inputConfig]=\"inputConfig\"\n        ></lib-multiple-input-table>\n      }\n\n      @if (inputConfig.hintLabel || inputConfig.temporaryHint) {\n        <mat-hint class=\"inputHint\">\n          {{ inputConfig.temporaryHint || inputConfig.hintLabel }}\n        </mat-hint>\n      }\n\n      @if (!!errorMessage()) {\n        <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{ errorMessage() }}</mat-error>\n      }\n\n      @if (inputConfig.canReload?.canReload) {\n        <button\n          mat-icon-button\n          matTooltip=\"Click to refresh this field.\"\n          class=\"input-sync-button\"\n          (click)=\"inputConfig.canReload.emit()\"\n          matSuffix\n        >\n          <mat-icon>sync</mat-icon>\n        </button>\n      }\n\n      @if (inputConfig.prefixIcon) {\n        <mat-icon matPrefix>{{ inputConfig.prefixIcon }}</mat-icon>\n      }\n\n      @if (inputConfig.suffixIcon && inputConfig.id !== 'password') {\n        <mat-icon matSuffix>{{ inputConfig.suffixIcon }}</mat-icon>\n      }\n\n      @if (inputConfig.prefixText) {\n        <span class=\"affix-text\" matPrefix>{{ inputConfig.prefixText }}</span>\n      }\n      @if (inputConfig.suffixText) {\n        <span class=\"affix-text affix-text--suffix\" matSuffix>{{ inputConfig.suffixText }}</span>\n      }\n\n      @if (inputConfig.maxLength && formGroup()) {\n        <mat-hint align=\"end\">\n          {{ (formGroup().controls[inputConfig.id]?.value?.length || 0) + '/' + inputConfig.maxLength }}\n        </mat-hint>\n      }\n    </mat-form-field>\n  }\n</form>\n", styles: [":host{display:block}.multiple-input-field{width:100%}.affix-text{top:0;color:var(--mat-sys-on-surface-variant, #49454f);font-size:.8125rem}.affix-text--suffix{padding-left:.3125rem}.input-sync-button{margin-right:.25rem;opacity:0;transform:scale(.85);pointer-events:none;transition:opacity .3s cubic-bezier(.16,1,.3,1),transform .3s cubic-bezier(.16,1,.3,1)}.input-sync-button mat-icon{color:var(--mat-sys-primary, #6750a4)}.multiple-input-field:hover .input-sync-button,.multiple-input-field:focus-within .input-sync-button{opacity:1;transform:scale(1);pointer-events:auto}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.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$1.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: MultipleInputTableComponent, selector: "lib-multiple-input-table", inputs: ["editorMode", "formGroup", "inputConfig", "formBuilderFunctions"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: MultipleInputInputElementComponent, isStandalone: true, selector: "lib-multiple-input-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 }, editorMode: { classPropertyName: "editorMode", publicName: "editorMode", isSignal: true, isRequired: false, transformFunction: null }, formBuilderFunctions: { classPropertyName: "formBuilderFunctions", publicName: "formBuilderFunctions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { reload: "reload" }, ngImport: i0, template: "<form [formGroup]=\"formGroup()\">\n  @if (inputConfig(); as inputConfig) {\n    <mat-form-field\n      class=\"multiple-input-field\"\n      [appearance]=\"inputConfig.appearance || 'fill'\"\n      subscriptSizing=\"dynamic\"\n      floatLabel=\"always\"\n    >\n      <mat-label>\n        {{ inputConfig.label }}\n        <lib-t-form-input-status [inputConfig]=\"inputConfig\"></lib-t-form-input-status>\n      </mat-label>\n\n      @if (inputConfig.id) {\n        <lib-multiple-input-table\n          [editorMode]=\"editorMode()\"\n          [required]=\"inputConfig.required\"\n          [formGroup]=\"formGroup()\"\n          [formBuilderFunctions]=\"formBuilderFunctions()\"\n          [formControlName]=\"inputConfig.id\"\n          [inputConfig]=\"inputConfig\"\n        ></lib-multiple-input-table>\n      }\n\n      @if (inputConfig.hintLabel || inputConfig.temporaryHint) {\n        <mat-hint class=\"inputHint\">\n          {{ inputConfig.temporaryHint || inputConfig.hintLabel }}\n        </mat-hint>\n      }\n\n      @if (!!errorMessage()) {\n        <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{ errorMessage() }}</mat-error>\n      }\n\n      @if (inputConfig.canReload?.canReload) {\n        <button\n          mat-icon-button\n          matTooltip=\"Click to refresh this field.\"\n          class=\"input-sync-button\"\n          (click)=\"inputConfig.canReload.emit()\"\n          matSuffix\n        >\n          <mat-icon>sync</mat-icon>\n        </button>\n      }\n\n      @if (inputConfig.prefixIcon) {\n        <mat-icon matPrefix>{{ inputConfig.prefixIcon }}</mat-icon>\n      }\n\n      @if (inputConfig.suffixIcon && inputConfig.id !== 'password') {\n        <mat-icon matSuffix>{{ inputConfig.suffixIcon }}</mat-icon>\n      }\n\n      @if (inputConfig.prefixText) {\n        <span class=\"affix-text\" matPrefix>{{ inputConfig.prefixText }}</span>\n      }\n      @if (inputConfig.suffixText) {\n        <span class=\"affix-text affix-text--suffix\" matSuffix>{{ inputConfig.suffixText }}</span>\n      }\n\n      @if (inputConfig.maxLength && formGroup()) {\n        <mat-hint align=\"end\">\n          {{ (formGroup().controls[inputConfig.id]?.value?.length || 0) + '/' + inputConfig.maxLength }}\n        </mat-hint>\n      }\n    </mat-form-field>\n  }\n</form>\n", styles: [":host{display:block}.multiple-input-field{width:100%}.affix-text{top:0;color:var(--mat-sys-on-surface-variant, #49454f);font-size:.8125rem}.affix-text--suffix{padding-left:.3125rem}.input-sync-button{margin-right:.25rem;opacity:0;transform:scale(.85);pointer-events:none;transition:opacity .3s cubic-bezier(.16,1,.3,1),transform .3s cubic-bezier(.16,1,.3,1)}.input-sync-button mat-icon{color:var(--mat-sys-primary, #6750a4)}.multiple-input-field:hover .input-sync-button,.multiple-input-field:focus-within .input-sync-button{opacity:1;transform:scale(1);pointer-events:auto}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.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$1.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: MultipleInputTableComponent, selector: "lib-multiple-input-table", inputs: ["editorMode", "formGroup", "inputConfig", "formBuilderFunctions"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: MultipleInputInputElementComponent, decorators: [{
             type: Component,
@@ -902,4 +902,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
         }], propDecorators: { inputConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputConfig", required: true }] }], formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: true }] }], editorMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "editorMode", required: false }] }], formBuilderFunctions: [{ type: i0.Input, args: [{ isSignal: true, alias: "formBuilderFunctions", required: false }] }], reload: [{ type: i0.Output, args: ["reload"] }] } });
 
 export { MultipleInputInputElementComponent };
-//# sourceMappingURL=ngx-t-forms-multiple-input-input-element.component-C7y1OGPx.mjs.map
+//# sourceMappingURL=ngx-t-forms-multiple-input-input-element.component-C8JP3D6r.mjs.map