@softpak/components 19.18.0 → 19.21.0-beta.1

package/fesm2022/softpak-components-spx-confirm.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"softpak-components-spx-confirm.mjs","sources":["../../../../projects/softpak/components/spx-confirm/spx-confirm.component.ts","../../../../projects/softpak/components/spx-confirm/spx-confirm.component.html","../../../../projects/softpak/components/spx-confirm/spx-confirm-displayer/spx-confirm-displayer.component.ts","../../../../projects/softpak/components/spx-confirm/spx-confirm-displayer/spx-confirm-displayer.component.html","../../../../projects/softpak/components/spx-confirm/store/spx-confirm.actions.ts","../../../../projects/softpak/components/spx-confirm/store/spx-confirm.reducer.ts","../../../../projects/softpak/components/spx-confirm/store/spx-confirm.effects.ts","../../../../projects/softpak/components/spx-confirm/softpak-components-spx-confirm.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';\r\nimport { FaIconComponent } from '@fortawesome/angular-fontawesome';\r\nimport { faTimes } from '@fortawesome/free-solid-svg-icons';\r\nimport { SpxButtonComponent } from '@softpak/components/spx-button';\r\nimport { SpxSeverityEnum } from '@softpak/components/spx-helpers';\r\n\r\n@Component({\r\n    selector: 'spx-confirm',\r\n    templateUrl: './spx-confirm.component.html',\r\n    styleUrls: ['./spx-confirm.component.scss'],\r\n    imports: [SpxButtonComponent, FaIconComponent],\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    standalone: true\r\n})\r\nexport class SpxConfirmComponent {\r\n  id = input.required<string>();\r\n  spxCancel = output<string>();\r\n  spxConfirm = output<string>();\r\n  faTimes = faTimes;\r\n  severityError = SpxSeverityEnum.error;\r\n  severityInfo = SpxSeverityEnum.info;\r\n  severitySuccess = SpxSeverityEnum.success;\r\n\r\n  constructor() { }\r\n\r\n  onCancel() {\r\n    this.spxCancel.emit(this.id());\r\n  }\r\n\r\n  onConfirm() {\r\n    if(this.id()) {}\r\n    this.spxConfirm.emit(this.id());\r\n  }\r\n\r\n}\r\n","<div class=\"block spx-confirm h-full mt-12\">\r\n    <div class=\"bg-amber-400 flex gap-3 items-center px-3 py-1 rounded-t text-black dark:text-white\">\r\n        <div class=\"grow font-bold\">\r\n            <ng-content select=\"[confirm__title]\"></ng-content>\r\n        </div>\r\n        <spx-button (spxClick)=\"onCancel()\" [spxType]=\"'button'\" [spxSeverity]=\"severityInfo\"><fa-icon\r\n                [icon]=\"faTimes\"></fa-icon>\r\n        </spx-button>\r\n    </div>\r\n    <div class=\"flex flex-col gap-3 dark:bg-gray-700 bg-white p-3\">\r\n        <ng-content select=\"[confirm__content]\"></ng-content>\r\n        <div class=\"grid grid-cols-1 grid-rows-2 sm:grid-rows-1 sm:grid-cols-2 gap-3 grid-flow-row\">\r\n            <spx-button (spxClick)=\"onCancel()\" [spxFullWidth]=\"true\" [spxType]=\"'button'\"\r\n                [spxSeverity]=\"severityError\">\r\n                <ng-content select=\"[confirm__btn_cancel]\"></ng-content>\r\n            </spx-button>\r\n            <spx-button #confirm (spxClick)=\"onConfirm()\" [spxFullWidth]=\"true\" [spxType]=\"'submit'\"\r\n                [spxSeverity]=\"severitySuccess\">\r\n                <ng-content select=\"[confirm__btn_confirm]\"></ng-content>\r\n            </spx-button>\r\n        </div>\r\n    </div>\r\n</div>","import { ChangeDetectionStrategy, Component, OnDestroy, OnInit, signal } from '@angular/core';\r\nimport { Store, select } from '@ngrx/store';\r\nimport { Subscription } from 'rxjs';\r\nimport { SpxConfirmComponent } from '../spx-confirm.component';\r\nimport { spxConfirmActions, spxConfirmReducer } from '../public-api';\r\n\r\n@Component({\r\n    selector: 'spx-confirm-displayer',\r\n    templateUrl: './spx-confirm-displayer.component.html',\r\n    styleUrls: ['./spx-confirm-displayer.component.scss'],\r\n    imports: [SpxConfirmComponent],\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    standalone: true\r\n})\r\nexport class SpxConfirmDisplayerComponent implements OnInit, OnDestroy {\r\n  confirms = signal<{\r\n    content: string;\r\n    id: string;\r\n    title: string;\r\n    cancelled?: boolean;\r\n    confirmed?: boolean;\r\n    noYesButton?: boolean;\r\n  }[]>([]);\r\n\r\n  private subscriptions: {\r\n    confirmState?: Subscription;\r\n  } = {};\r\n\r\n  constructor(\r\n    private readonly appStore: Store,\r\n  ) { }\r\n\r\n  ngOnInit() {\r\n    this.subscriptions.confirmState  = this.appStore.select(spxConfirmReducer.default.selectConfirms).subscribe(confirms => {\r\n      if (confirms?.length === 0) {\r\n        this.confirms.set([]);\r\n        return;\r\n      }\r\n\r\n      this.confirms.set(confirms);\r\n    });\r\n  }\r\n\r\n  ngOnDestroy() {\r\n    this.subscriptions?.confirmState?.unsubscribe();\r\n  }\r\n\r\n  onCancel(id: string) {\r\n    this.appStore.dispatch(spxConfirmActions.answer({\r\n      cancel: true,\r\n      id\r\n    }));\r\n  }\r\n\r\n  onConfirm(id: string) {\r\n    this.appStore.dispatch(spxConfirmActions.answer({\r\n      confirm: true,\r\n      id\r\n    }));\r\n  }\r\n\r\n}\r\n","@if (confirms().length > 0) {\r\n  <div class=\"bg-black/75 block relative h-full\" style=\"z-index: 1000\">\r\n    @for (confirm of confirms(); track confirm.id) {\r\n      <spx-confirm [id]=\"confirm.id\" (spxCancel)=\"onCancel($event)\"\r\n        (spxConfirm)=\"onConfirm($event)\">\r\n        <ng-container confirm__title>{{ confirm.title }}</ng-container>\r\n        <ng-container confirm__content>{{ confirm.content }}</ng-container>\r\n        <ng-container confirm__btn_cancel>{{confirm.noYesButton ? 'NO' : 'Cancel'}}</ng-container>\r\n        <ng-container confirm__btn_confirm>{{confirm.noYesButton ? 'YES' : 'OK'}}</ng-container>\r\n      </spx-confirm>\r\n    }\r\n  </div>\r\n}","import { createAction, props, union } from '@ngrx/store';\r\nimport { SpxConfirmI } from './spx-confirm.reducer';\r\n\r\nexport const answer = createAction('[Confirm] Answer', props<{\r\n    cancel?: boolean;\r\n    confirm?: boolean;\r\n    id: string;\r\n}>());\r\nexport const reset = createAction('[Confirm] Reset', props<Record<string, unknown>>());\r\nexport const show = createAction('[Confirm] Show', props<SpxConfirmI>());\r\n\r\nexport const answerConfirm = createAction('[Confirm] Answer Confirm', props<{\r\n  id: string;\r\n}>());\r\n\r\nconst all = union({\r\n    reset,\r\n    show,\r\n    answerConfirm,\r\n});\r\nexport type Actions = typeof all;\r\n","import * as actions from './spx-confirm.actions';\r\nimport { createFeature, createReducer, on } from '@ngrx/store';\r\n\r\nexport interface SpxConfirmI {\r\n  content: string;\r\n  id: string;\r\n  title: string;\r\n  noYesButton?: boolean;\r\n  onOK?: () => void;\r\n  onCancel?: () => void;\r\n}\r\n\r\nexport interface State {\r\n  confirms: SpxConfirmI[];\r\n}\r\n\r\nconst initialState: State = {\r\n  confirms: [],\r\n};\r\n\r\nexport default createFeature({\r\n  name: 'spxConfirm',\r\n  reducer: createReducer(\r\n    initialState,\r\n    on(\r\n      actions.reset,\r\n      (state: State, {}): State => ({\r\n        ...state,\r\n      })\r\n    ),\r\n    on(\r\n      actions.show,\r\n      (state: State, { content, id, title, noYesButton, onCancel, onOK }): State => {\r\n        const confirms =\r\n          state.confirms.filter((c) => c.id).length > 0\r\n            ? state.confirms\r\n            : [\r\n                ...state.confirms,\r\n                {\r\n                  content,\r\n                  id,\r\n                  title,\r\n                  noYesButton,\r\n                  onCancel,\r\n                  onOK,\r\n                },\r\n              ];\r\n        return {\r\n          ...state,\r\n          confirms,\r\n        };\r\n      }\r\n    ),\r\n    on(\r\n      actions.answerConfirm,\r\n      (state: State, { id }): State => ({\r\n        ...state,\r\n        confirms: [\r\n          ...state.confirms.filter((c) => c.id !== id),\r\n        ],\r\n      })\r\n    )\r\n  ),\r\n});\r\n","import { Actions, createEffect, ofType } from '@ngrx/effects';\r\nimport { Observable } from 'rxjs';\r\nimport { mergeMap, withLatestFrom } from 'rxjs/operators';\r\nimport { Injectable } from '@angular/core';\r\nimport * as actions from './spx-confirm.actions';\r\nimport { spxSpinnerActions } from '@softpak/components/spx-spinner';\r\nimport { Store } from '@ngrx/store';\r\nimport spxConfirmReducer from './spx-confirm.reducer';\r\n\r\n@Injectable()\r\nexport class SpxConfirmEffects {\r\n  onAnswer$: Observable<any> = createEffect(() =>\r\n    this.actions$.pipe(\r\n      ofType(actions.answer),\r\n      withLatestFrom(this.appStore.select(spxConfirmReducer.selectConfirms)),\r\n      mergeMap(([action, confirms]) => {\r\n\r\n        if (action.confirm) {\r\n          confirms.find((c) => c.id === action.id)?.onOK?.();\r\n        }\r\n        if (action.cancel) {\r\n          confirms.find((c) => c.id === action.id)?.onCancel?.();\r\n        }\r\n        return [\r\n          actions.answerConfirm({id: action.id}),\r\n          spxSpinnerActions.hide({})\r\n        ];\r\n      })\r\n    )\r\n  );\r\n\r\n  constructor(\r\n    private readonly actions$: Actions,\r\n    private readonly appStore: Store,\r\n  ) {}\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["spxConfirmReducer.default","spxConfirmActions.answer","actions.reset","actions.show","actions.answerConfirm","actions.answer","spxConfirmReducer","i1","i2"],"mappings":"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"}
+{"version":3,"file":"softpak-components-spx-confirm.mjs","sources":["../../../../projects/softpak/components/spx-confirm/spx-confirm.component.ts","../../../../projects/softpak/components/spx-confirm/spx-confirm.component.html","../../../../projects/softpak/components/spx-confirm/spx-confirm-displayer/spx-confirm-displayer.component.ts","../../../../projects/softpak/components/spx-confirm/spx-confirm-displayer/spx-confirm-displayer.component.html","../../../../projects/softpak/components/spx-confirm/store/spx-confirm.actions.ts","../../../../projects/softpak/components/spx-confirm/store/spx-confirm.reducer.ts","../../../../projects/softpak/components/spx-confirm/store/spx-confirm.effects.ts","../../../../projects/softpak/components/spx-confirm/softpak-components-spx-confirm.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';\nimport { FaIconComponent } from '@fortawesome/angular-fontawesome';\nimport { faTimes } from '@fortawesome/free-solid-svg-icons';\nimport { SpxButtonComponent } from '@softpak/components/spx-button';\nimport { SpxSeverityEnum } from '@softpak/components/spx-helpers';\n\n@Component({\n    selector: 'spx-confirm',\n    templateUrl: './spx-confirm.component.html',\n    styleUrls: ['./spx-confirm.component.scss'],\n    imports: [SpxButtonComponent, FaIconComponent],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    standalone: true\n})\nexport class SpxConfirmComponent {\n  id = input.required<string>();\n  spxCancel = output<string>();\n  spxConfirm = output<string>();\n  faTimes = faTimes;\n  severityError = SpxSeverityEnum.error;\n  severityInfo = SpxSeverityEnum.info;\n  severitySuccess = SpxSeverityEnum.success;\n\n  constructor() { }\n\n  onCancel() {\n    this.spxCancel.emit(this.id());\n  }\n\n  onConfirm() {\n    if(this.id()) {}\n    this.spxConfirm.emit(this.id());\n  }\n\n}\n","<div class=\"block spx-confirm h-full mt-12\">\n    <div class=\"bg-amber-400 flex gap-3 items-center px-3 py-1 rounded-t text-black dark:text-white\">\n        <div class=\"grow font-bold\">\n            <ng-content select=\"[confirm__title]\"></ng-content>\n        </div>\n        <spx-button (spxClick)=\"onCancel()\" [spxType]=\"'button'\" [spxSeverity]=\"severityInfo\"><fa-icon\n                [icon]=\"faTimes\"></fa-icon>\n        </spx-button>\n    </div>\n    <div class=\"flex flex-col gap-3 dark:bg-gray-700 bg-white p-3\">\n        <ng-content select=\"[confirm__content]\"></ng-content>\n        <div class=\"grid grid-cols-1 grid-rows-2 sm:grid-rows-1 sm:grid-cols-2 gap-3 grid-flow-row\">\n            <spx-button (spxClick)=\"onCancel()\" [spxFullWidth]=\"true\" [spxType]=\"'button'\"\n                [spxSeverity]=\"severityError\">\n                <ng-content select=\"[confirm__btn_cancel]\"></ng-content>\n            </spx-button>\n            <spx-button #confirm (spxClick)=\"onConfirm()\" [spxFullWidth]=\"true\" [spxType]=\"'submit'\"\n                [spxSeverity]=\"severitySuccess\">\n                <ng-content select=\"[confirm__btn_confirm]\"></ng-content>\n            </spx-button>\n        </div>\n    </div>\n</div>","import { ChangeDetectionStrategy, Component, OnDestroy, OnInit, signal } from '@angular/core';\nimport { Store } from '@ngrx/store';\nimport { Subscription } from 'rxjs';\nimport { SpxConfirmComponent } from '../spx-confirm.component';\nimport { spxConfirmActions, spxConfirmReducer } from '../public-api';\n\n@Component({\n    selector: 'spx-confirm-displayer',\n    templateUrl: './spx-confirm-displayer.component.html',\n    styleUrls: ['./spx-confirm-displayer.component.scss'],\n    imports: [SpxConfirmComponent],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    standalone: true\n})\nexport class SpxConfirmDisplayerComponent implements OnInit, OnDestroy {\n  confirms = signal<{\n    content: string;\n    id: string;\n    title: string;\n    cancelled?: boolean;\n    confirmed?: boolean;\n    noYesButton?: boolean;\n  }[]>([]);\n\n  private subscriptions: {\n    confirmState?: Subscription;\n  } = {};\n\n  constructor(\n    private readonly appStore: Store,\n  ) { }\n\n  ngOnInit() {\n    this.subscriptions.confirmState  = this.appStore.select(spxConfirmReducer.default.selectConfirms).subscribe(confirms => {\n      if (confirms?.length === 0) {\n        this.confirms.set([]);\n        return;\n      }\n\n      this.confirms.set(confirms);\n    });\n  }\n\n  ngOnDestroy() {\n    this.subscriptions?.confirmState?.unsubscribe();\n  }\n\n  onCancel(id: string) {\n    this.appStore.dispatch(spxConfirmActions.answer({\n      cancel: true,\n      id\n    }));\n  }\n\n  onConfirm(id: string) {\n    this.appStore.dispatch(spxConfirmActions.answer({\n      confirm: true,\n      id\n    }));\n  }\n\n}\n","@if (confirms().length > 0) {\n  <div class=\"bg-black/75 block relative h-full\" style=\"z-index: 1000\">\n    @for (confirm of confirms(); track confirm.id) {\n      <spx-confirm [id]=\"confirm.id\" (spxCancel)=\"onCancel($event)\"\n        (spxConfirm)=\"onConfirm($event)\">\n        <ng-container confirm__title>{{ confirm.title }}</ng-container>\n        <ng-container confirm__content>{{ confirm.content }}</ng-container>\n        <ng-container confirm__btn_cancel>{{confirm.noYesButton ? 'NO' : 'Cancel'}}</ng-container>\n        <ng-container confirm__btn_confirm>{{confirm.noYesButton ? 'YES' : 'OK'}}</ng-container>\n      </spx-confirm>\n    }\n  </div>\n}","import { createAction, props, union } from '@ngrx/store';\nimport { SpxConfirmI } from './spx-confirm.reducer';\n\nexport const answer = createAction('[Confirm] Answer', props<{\n    cancel?: boolean;\n    confirm?: boolean;\n    id: string;\n}>());\nexport const reset = createAction('[Confirm] Reset', props<Record<string, unknown>>());\nexport const show = createAction('[Confirm] Show', props<SpxConfirmI>());\n\nexport const answerConfirm = createAction('[Confirm] Answer Confirm', props<{\n  id: string;\n}>());\n\nconst all = union({\n    reset,\n    show,\n    answerConfirm,\n});\nexport type Actions = typeof all;\n","import * as actions from './spx-confirm.actions';\nimport { createFeature, createReducer, on } from '@ngrx/store';\n\nexport interface SpxConfirmI {\n  content: string;\n  id: string;\n  title: string;\n  noYesButton?: boolean;\n  onOK?: () => void;\n  onCancel?: () => void;\n}\n\nexport interface State {\n  confirms: SpxConfirmI[];\n}\n\nconst initialState: State = {\n  confirms: [],\n};\n\nexport default createFeature({\n  name: 'spxConfirm',\n  reducer: createReducer(\n    initialState,\n    on(\n      actions.reset,\n      (state: State, {}): State => ({\n        ...state,\n      })\n    ),\n    on(\n      actions.show,\n      (state: State, { content, id, title, noYesButton, onCancel, onOK }): State => {\n        const confirms =\n          state.confirms.filter((c) => c.id).length > 0\n            ? state.confirms\n            : [\n                ...state.confirms,\n                {\n                  content,\n                  id,\n                  title,\n                  noYesButton,\n                  onCancel,\n                  onOK,\n                },\n              ];\n        return {\n          ...state,\n          confirms,\n        };\n      }\n    ),\n    on(\n      actions.answerConfirm,\n      (state: State, { id }): State => ({\n        ...state,\n        confirms: [\n          ...state.confirms.filter((c) => c.id !== id),\n        ],\n      })\n    )\n  ),\n});\n","import { Actions, createEffect, ofType } from '@ngrx/effects';\nimport { Observable } from 'rxjs';\nimport { mergeMap, withLatestFrom } from 'rxjs/operators';\nimport { Injectable } from '@angular/core';\nimport * as actions from './spx-confirm.actions';\nimport { spxSpinnerActions } from '@softpak/components/spx-spinner';\nimport { Store } from '@ngrx/store';\nimport spxConfirmReducer from './spx-confirm.reducer';\n\n@Injectable()\nexport class SpxConfirmEffects {\n  onAnswer$: Observable<any> = createEffect(() =>\n    this.actions$.pipe(\n      ofType(actions.answer),\n      withLatestFrom(this.appStore.select(spxConfirmReducer.selectConfirms)),\n      mergeMap(([action, confirms]) => {\n\n        if (action.confirm) {\n          confirms.find((c) => c.id === action.id)?.onOK?.();\n        }\n        if (action.cancel) {\n          confirms.find((c) => c.id === action.id)?.onCancel?.();\n        }\n        return [\n          actions.answerConfirm({id: action.id}),\n          spxSpinnerActions.hide({})\n        ];\n      })\n    )\n  );\n\n  constructor(\n    private readonly actions$: Actions,\n    private readonly appStore: Store,\n  ) {}\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["spxConfirmReducer.default","spxConfirmActions.answer","actions.reset","actions.show","actions.answerConfirm","actions.answer","spxConfirmReducer","i1","i2"],"mappings":"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"}

package/fesm2022/softpak-components-spx-form-section.mjs

@@ -1,45 +1,20 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
+import { input, Component, ChangeDetectionStrategy } from '@angular/core';
 
 class SpxFormSectionComponent {
     constructor() {
-        this.spxShowTitle = true;
+        this.spxIndex = input();
+        this.spxIndexSecondary = input();
+        this.spxTitle = input();
+        this.spxShowTitle = input(true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxFormSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SpxFormSectionComponent, isStandalone: true, selector: "spx-form-section", inputs: { spxIndex: "spxIndex", spxIndexSecondary: "spxIndexSecondary", spxTitle: "spxTitle", spxShowTitle: "spxShowTitle" }, ngImport: i0, template: `@if (this.spxShowTitle) {
-  <div class="spx-form-section__title mb-3 flex gap-3 items-center">
-    <div class="spx-form-section__title-index flex content-center text-center text-sm h-[30px] w-[30px] font-bold rounded">{{this.spxIndex}}@if (this.spxIndexSecondary) {
-      {{ this.spxIndexSecondary }}
-    }</div>
-    <div class="spx-form-section__content font-bold grow text-black dark:text-white">{{this.spxTitle}}</div>
-  </div>
-}
-<div class="flex flex-col gap-3">
-  <ng-content></ng-content>
-</div>`, isInline: true, styles: [":host{display:block}.spx-form-section__title-index{background-color:#000;display:inline-block;vertical-align:middle}.spx-form-section__title{color:var(--spx-form-section--color, #FFFFFF)}.spx-form-section__content{color:#000}@media (prefers-color-scheme: dark){.spx-form-section__title-index{background-color:var(--spx-form-section--color, #FFFFFF);color:#000}.spx-form-section__content{color:var(--spx-form-section--color, #FFFFFF)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SpxFormSectionComponent, isStandalone: true, selector: "spx-form-section", inputs: { spxIndex: { classPropertyName: "spxIndex", publicName: "spxIndex", isSignal: true, isRequired: false, transformFunction: null }, spxIndexSecondary: { classPropertyName: "spxIndexSecondary", publicName: "spxIndexSecondary", isSignal: true, isRequired: false, transformFunction: null }, spxTitle: { classPropertyName: "spxTitle", publicName: "spxTitle", isSignal: true, isRequired: false, transformFunction: null }, spxShowTitle: { classPropertyName: "spxShowTitle", publicName: "spxShowTitle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (this.spxShowTitle()) {\n  <div class=\"spx-form-section__title mb-3 flex gap-3 items-center\">\n    <div class=\"spx-form-section__title-index flex content-center text-center text-sm h-[30px] w-[30px] font-bold rounded\">{{this.spxIndex()}}@if (this.spxIndexSecondary()) {\n      {{ this.spxIndexSecondary() }}\n    }</div>\n    <div class=\"spx-form-section__content font-bold grow text-black dark:text-white\">{{this.spxTitle()}}</div>\n  </div>\n}\n<div class=\"flex flex-col gap-3\">\n  <ng-content></ng-content>\n</div>", styles: [":host{display:block}.spx-form-section__title-index{background-color:#000;display:inline-block;vertical-align:middle}.spx-form-section__title{color:var(--spx-form-section--color, #FFFFFF)}.spx-form-section__content{color:#000}@media (prefers-color-scheme: dark){.spx-form-section__title-index{background-color:var(--spx-form-section--color, #FFFFFF);color:#000}.spx-form-section__content{color:var(--spx-form-section--color, #FFFFFF)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxFormSectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spx-form-section', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: `@if (this.spxShowTitle) {
-  <div class="spx-form-section__title mb-3 flex gap-3 items-center">
-    <div class="spx-form-section__title-index flex content-center text-center text-sm h-[30px] w-[30px] font-bold rounded">{{this.spxIndex}}@if (this.spxIndexSecondary) {
-      {{ this.spxIndexSecondary }}
-    }</div>
-    <div class="spx-form-section__content font-bold grow text-black dark:text-white">{{this.spxTitle}}</div>
-  </div>
-}
-<div class="flex flex-col gap-3">
-  <ng-content></ng-content>
-</div>`, styles: [":host{display:block}.spx-form-section__title-index{background-color:#000;display:inline-block;vertical-align:middle}.spx-form-section__title{color:var(--spx-form-section--color, #FFFFFF)}.spx-form-section__content{color:#000}@media (prefers-color-scheme: dark){.spx-form-section__title-index{background-color:var(--spx-form-section--color, #FFFFFF);color:#000}.spx-form-section__content{color:var(--spx-form-section--color, #FFFFFF)}}\n"] }]
-        }], propDecorators: { spxIndex: [{
-                type: Input
-            }], spxIndexSecondary: [{
-                type: Input
-            }], spxTitle: [{
-                type: Input
-            }], spxShowTitle: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'spx-form-section', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "@if (this.spxShowTitle()) {\n  <div class=\"spx-form-section__title mb-3 flex gap-3 items-center\">\n    <div class=\"spx-form-section__title-index flex content-center text-center text-sm h-[30px] w-[30px] font-bold rounded\">{{this.spxIndex()}}@if (this.spxIndexSecondary()) {\n      {{ this.spxIndexSecondary() }}\n    }</div>\n    <div class=\"spx-form-section__content font-bold grow text-black dark:text-white\">{{this.spxTitle()}}</div>\n  </div>\n}\n<div class=\"flex flex-col gap-3\">\n  <ng-content></ng-content>\n</div>", styles: [":host{display:block}.spx-form-section__title-index{background-color:#000;display:inline-block;vertical-align:middle}.spx-form-section__title{color:var(--spx-form-section--color, #FFFFFF)}.spx-form-section__content{color:#000}@media (prefers-color-scheme: dark){.spx-form-section__title-index{background-color:var(--spx-form-section--color, #FFFFFF);color:#000}.spx-form-section__content{color:var(--spx-form-section--color, #FFFFFF)}}\n"] }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/softpak-components-spx-form-section.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"softpak-components-spx-form-section.mjs","sources":["../../../../projects/softpak/components/spx-form-section/spx-form-section.component.ts","../../../../projects/softpak/components/spx-form-section/softpak-components-spx-form-section.ts"],"sourcesContent":["\r\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core';\r\n\r\n@Component({\r\n    selector: 'spx-form-section',\r\n    imports: [],\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    template: `@if (this.spxShowTitle) {\r\n  <div class=\"spx-form-section__title mb-3 flex gap-3 items-center\">\r\n    <div class=\"spx-form-section__title-index flex content-center text-center text-sm h-[30px] w-[30px] font-bold rounded\">{{this.spxIndex}}@if (this.spxIndexSecondary) {\r\n      {{ this.spxIndexSecondary }}\r\n    }</div>\r\n    <div class=\"spx-form-section__content font-bold grow text-black dark:text-white\">{{this.spxTitle}}</div>\r\n  </div>\r\n}\r\n<div class=\"flex flex-col gap-3\">\r\n  <ng-content></ng-content>\r\n</div>`,\r\n    styles: `\r\n  :host {\r\n    display: block;\r\n  }\r\n  \r\n  .spx-form-section__title-index {\r\n    background-color: #000000;\r\n    display: inline-block;\r\n    vertical-align: middle;\r\n  }\r\n\r\n  .spx-form-section__title {\r\n    color: var(--spx-form-section--color, #FFFFFF);\r\n  }\r\n\r\n  .spx-form-section__content {\r\n    color: #000000;\r\n  }\r\n\r\n  @media (prefers-color-scheme: dark) {\r\n    .spx-form-section__title-index {\r\n      background-color: var(--spx-form-section--color, #FFFFFF);\r\n      color: #000000;\r\n    }\r\n    \r\n    .spx-form-section__content {\r\n      color: var(--spx-form-section--color, #FFFFFF);\r\n    }\r\n}\r\n  `\r\n})\r\nexport class SpxFormSectionComponent {\r\n  @Input() spxIndex?: number;\r\n  @Input() spxIndexSecondary?: number;\r\n  @Input() spxTitle?: string;\r\n  @Input() spxShowTitle = true;\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;MAiDa,uBAAuB,CAAA;AA9CpC,IAAA,WAAA,GAAA;QAkDW,IAAY,CAAA,YAAA,GAAG,IAAI;AAC7B;8GALY,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAvB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,uBAAuB,EA1CtB,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,YAAA,EAAA,cAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA;;;;;;;;;;AAUP,MAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,sbAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAgCM,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBA9CnC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,kBAAkB,WACnB,EAAE,EAAA,eAAA,EACM,uBAAuB,CAAC,MAAM,EACrC,QAAA,EAAA,CAAA;;;;;;;;;;AAUP,MAAA,CAAA,EAAA,MAAA,EAAA,CAAA,sbAAA,CAAA,EAAA;8BAiCI,QAAQ,EAAA,CAAA;sBAAhB;gBACQ,iBAAiB,EAAA,CAAA;sBAAzB;gBACQ,QAAQ,EAAA,CAAA;sBAAhB;gBACQ,YAAY,EAAA,CAAA;sBAApB;;;ACrDH;;AAEG;;;;"}
+{"version":3,"file":"softpak-components-spx-form-section.mjs","sources":["../../../../projects/softpak/components/spx-form-section/spx-form-section.component.ts","../../../../projects/softpak/components/spx-form-section/spx-form-section.component.html","../../../../projects/softpak/components/spx-form-section/softpak-components-spx-form-section.ts"],"sourcesContent":["\nimport { ChangeDetectionStrategy, Component, input } from '@angular/core';\n\n@Component({\n    selector: 'spx-form-section',\n    imports: [],\n    templateUrl: './spx-form-section.component.html',\n    styleUrl: './spx-form-section.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    standalone: true,\n})\nexport class SpxFormSectionComponent {\n  readonly spxIndex = input<number>();\n  readonly spxIndexSecondary = input<number>();\n  readonly spxTitle = input<string>();\n  readonly spxShowTitle = input<boolean>(true);\n}\n","@if (this.spxShowTitle()) {\n  <div class=\"spx-form-section__title mb-3 flex gap-3 items-center\">\n    <div class=\"spx-form-section__title-index flex content-center text-center text-sm h-[30px] w-[30px] font-bold rounded\">{{this.spxIndex()}}@if (this.spxIndexSecondary()) {\n      {{ this.spxIndexSecondary() }}\n    }</div>\n    <div class=\"spx-form-section__content font-bold grow text-black dark:text-white\">{{this.spxTitle()}}</div>\n  </div>\n}\n<div class=\"flex flex-col gap-3\">\n  <ng-content></ng-content>\n</div>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;MAWa,uBAAuB,CAAA;AARpC,IAAA,WAAA,GAAA;QASW,IAAQ,CAAA,QAAA,GAAG,KAAK,EAAU;QAC1B,IAAiB,CAAA,iBAAA,GAAG,KAAK,EAAU;QACnC,IAAQ,CAAA,QAAA,GAAG,KAAK,EAAU;AAC1B,QAAA,IAAA,CAAA,YAAY,GAAG,KAAK,CAAU,IAAI,CAAC;AAC7C;8GALY,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAvB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,uBAAuB,moBCXpC,mhBAUM,EAAA,MAAA,EAAA,CAAA,sbAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FDCO,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBARnC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,kBAAkB,WACnB,EAAE,EAAA,eAAA,EAGM,uBAAuB,CAAC,MAAM,cACnC,IAAI,EAAA,QAAA,EAAA,mhBAAA,EAAA,MAAA,EAAA,CAAA,sbAAA,CAAA,EAAA;;;AETpB;;AAEG;;;;"}

package/fesm2022/softpak-components-spx-form-view.mjs

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, input, output, viewChildren, ElementRef, ChangeDetectionStrategy } from '@angular/core';
+import { signal, input, output, computed, Component, ChangeDetectionStrategy, viewChildren, ElementRef } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { debounceTime } from 'rxjs';
 import { SpxButtonComponent } from '@softpak/components/spx-button';
-import { SpxSeverityEnum } from '@softpak/components/spx-helpers';
+import { SpxSeverityEnum, unsubscribeSubscriptions } from '@softpak/components/spx-helpers';
 import { SpxInputTypeEnum, SpxInputComponent } from '@softpak/components/spx-inputs';
 import * as i2 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
@@ -22,14 +22,18 @@ const sectionAutocompleteSearch = 'autocompleteSearch';
 const ctrlQuery = 'query';
 const ctrlOptions = 'options';
 class SpxAutocompleteSearchComponent {
-    get ctrlQuery() { return this.formGroup.get(ctrlQuery); }
-    get ctrlOptions() { return this.formGroup.get(ctrlOptions); }
     constructor(formBuilder) {
         this.formBuilder = formBuilder;
-        this.spxSuggestions = [];
-        this.spxCancel = new EventEmitter();
-        this.spxSearch = new EventEmitter();
-        this.spxSubmit = new EventEmitter();
+        this.formGroup = signal(null);
+        this.spxSuggestions = input([]);
+        this.spxField = input.required();
+        this.txtOptions = input.required();
+        this.txtQuery = input.required();
+        this.txtSubmit = input.required();
+        this.spxValuePair = input.required();
+        this.spxCancel = output();
+        this.spxSearch = output();
+        this.spxSubmit = output();
         this.inputTypeRadio = SpxInputTypeEnum.radio;
         this.inputTypeText = SpxInputTypeEnum.text;
         this.SpxSeverity = SpxSeverityEnum;
@@ -41,38 +45,37 @@ class SpxAutocompleteSearchComponent {
                     {
                         key: ctrlQuery,
                         type: () => SpxInputTypeEnum.text,
-                        label: () => this.txtQuery,
+                        label: () => this.txtQuery(),
                         capitalize: () => true,
                     },
                     {
                         key: ctrlOptions,
                         type: () => SpxInputTypeEnum.radio,
-                        label: () => this.txtOptions,
+                        label: () => this.txtOptions(),
                     },
                 ]
             }
         ];
+        this.ctrlQuery = computed(() => this.formGroup()?.get(ctrlQuery));
+        this.ctrlOptions = computed(() => this.formGroup()?.get(ctrlOptions));
+        this.subscriptions = {};
         this.createForm();
     }
     ngOnInit() {
         this.listenToSelection();
         this.listenToQuery();
-        this.ctrlQuery.setValue(this.spxValuePair, { emitEvent: false });
-        this.spxSearch.emit(this.spxValuePair);
+        const spxValuePair = this.spxValuePair();
+        this.ctrlQuery().setValue(spxValuePair, { emitEvent: false });
+        this.spxSearch.emit(spxValuePair);
     }
     ngOnDestroy() {
-        if (this.subSelection) {
-            this.subSelection.unsubscribe();
-        }
-        if (this.subQuery) {
-            this.subQuery.unsubscribe();
-        }
+        unsubscribeSubscriptions(this.subscriptions);
     }
     createForm() {
-        this.formGroup = this.formBuilder.group({
+        this.formGroup.set(this.formBuilder.group({
             [ctrlQuery]: [null],
             [ctrlOptions]: [null],
-        });
+        }));
     }
     getRawValidators(formControl) {
         return formControl._rawValidators;
@@ -81,20 +84,20 @@ class SpxAutocompleteSearchComponent {
         this.spxCancel.emit();
     }
     onSubmit() {
-        this.spxSubmit.emit(this.ctrlQuery.value);
+        this.spxSubmit.emit(this.ctrlQuery().value);
     }
     listenToQuery() {
-        this.subQuery = this.ctrlQuery.valueChanges.pipe(debounceTime(500)).subscribe(valuePair => {
+        this.subscriptions.subQuery = this.ctrlQuery().valueChanges.pipe(debounceTime(500)).subscribe(valuePair => {
             this.spxSearch.emit(valuePair);
         });
     }
     listenToSelection() {
-        this.subSelection = this.ctrlOptions.valueChanges.subscribe(valuePair => {
-            this.ctrlQuery.setValue(valuePair);
+        this.subscriptions.subSelection = this.ctrlOptions().valueChanges.subscribe(valuePair => {
+            this.ctrlQuery().setValue(valuePair);
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxAutocompleteSearchComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: SpxAutocompleteSearchComponent, isStandalone: true, selector: "spx-autocomplete-search", inputs: { spxSuggestions: "spxSuggestions", spxField: "spxField", txtOptions: "txtOptions", txtQuery: "txtQuery", txtSubmit: "txtSubmit", spxValuePair: "spxValuePair" }, outputs: { spxCancel: "spxCancel", spxSearch: "spxSearch", spxSubmit: "spxSubmit" }, ngImport: i0, template: "<form class=\"bg-black fixed pt-16 z-50 top-0 left-0 right-0 bottom-0\" [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\r\n  <div class=\"h-full w-full px-3 flex flex-col gap-3\">\r\n    <div class=\"grow flex flex-col gap-3 overflow-y-auto\">\r\n      <spx-input [formControl]=\"ctrlQuery\" [spxLabel]=\"txtQuery\" [spxType]=\"inputTypeText\">\r\n      </spx-input>\r\n      <spx-input [formControl]=\"ctrlOptions\" [spxLabel]=\"txtOptions\" [spxSuggestions]=\"spxSuggestions\"\r\n        [spxType]=\"inputTypeRadio\">\r\n      </spx-input>\r\n    </div>\r\n    <div class=\"py-3 flex flex-col gap-3\">\r\n      <spx-button [spxFullWidth]=\"true\" [spxSeverity]=\"SpxSeverity.success\">\r\n        Save\r\n      </spx-button>\r\n      <spx-button [spxFullWidth]=\"true\" [spxSeverity]=\"SpxSeverity.error\" [spxType]=\"'button'\" (spxClick)=\"onCancel()\">\r\n        Cancel\r\n      </spx-button>\r\n    </div>\r\n  </div>\r\n</form>", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType"], outputs: ["spxClick"] }, { kind: "component", type: SpxInputComponent, selector: "spx-input", inputs: ["spxLabel", "spxMax", "spxMin", "spxName", "spxReadonly", "spxAutocomplete", "spxAutofocus", "spxInputMode", "spxPattern", "spxRequired", "spxSelectMonth", "spxSelectDay", "spxShowEdit", "spxShowHelp", "spxShowLabel", "spxCompact", "spxShowClear", "spxShowSearch", "spxAlert", "spxShowValidationMessages", "spxStep", "spxSuggestions", "spxType", "spxValidators", "spxCapitalize"], outputs: ["spxClear", "spxEdit", "spxHelp", "spxSearch", "spxBlur"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SpxAutocompleteSearchComponent, isStandalone: true, selector: "spx-autocomplete-search", inputs: { spxSuggestions: { classPropertyName: "spxSuggestions", publicName: "spxSuggestions", isSignal: true, isRequired: false, transformFunction: null }, spxField: { classPropertyName: "spxField", publicName: "spxField", isSignal: true, isRequired: true, transformFunction: null }, txtOptions: { classPropertyName: "txtOptions", publicName: "txtOptions", isSignal: true, isRequired: true, transformFunction: null }, txtQuery: { classPropertyName: "txtQuery", publicName: "txtQuery", isSignal: true, isRequired: true, transformFunction: null }, txtSubmit: { classPropertyName: "txtSubmit", publicName: "txtSubmit", isSignal: true, isRequired: true, transformFunction: null }, spxValuePair: { classPropertyName: "spxValuePair", publicName: "spxValuePair", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { spxCancel: "spxCancel", spxSearch: "spxSearch", spxSubmit: "spxSubmit" }, ngImport: i0, template: "@if(formGroup()) {\n  <form class=\"bg-black fixed pt-16 z-50 top-0 left-0 right-0 bottom-0\" [formGroup]=\"formGroup()!\" (ngSubmit)=\"onSubmit()\">\n    <div class=\"h-full w-full px-3 flex flex-col gap-3\">\n      <div class=\"grow flex flex-col gap-3 overflow-y-auto\">\n        <spx-input [formControl]=\"ctrlQuery()\" [spxLabel]=\"txtQuery()\" [spxType]=\"inputTypeText\">\n        </spx-input>\n        <spx-input [formControl]=\"ctrlOptions()\" [spxLabel]=\"txtOptions()\" [spxSuggestions]=\"spxSuggestions()\"\n          [spxType]=\"inputTypeRadio\">\n        </spx-input>\n      </div>\n      <div class=\"py-3 flex flex-col gap-3\">\n        <spx-button [spxFullWidth]=\"true\" [spxSeverity]=\"SpxSeverity.success\">\n          Save\n        </spx-button>\n        <spx-button [spxFullWidth]=\"true\" [spxSeverity]=\"SpxSeverity.error\" [spxType]=\"'button'\" (spxClick)=\"onCancel()\">\n          Cancel\n        </spx-button>\n      </div>\n    </div>\n  </form>\n}\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType"], outputs: ["spxClick"] }, { kind: "component", type: SpxInputComponent, selector: "spx-input", inputs: ["spxLabel", "spxMax", "spxMin", "spxName", "spxReadonly", "spxAutocomplete", "spxAutofocus", "spxInputMode", "spxPattern", "spxRequired", "spxSelectMonth", "spxSelectDay", "spxShowEdit", "spxShowHelp", "spxShowLabel", "spxCompact", "spxShowClear", "spxShowSearch", "spxAlert", "spxShowValidationMessages", "spxStep", "spxSuggestions", "spxType", "spxValidators", "spxCapitalize"], outputs: ["spxClear", "spxEdit", "spxHelp", "spxSearch", "spxBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxAutocompleteSearchComponent, decorators: [{
             type: Component,
@@ -103,26 +106,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                         ReactiveFormsModule,
                         SpxButtonComponent,
                         SpxInputComponent,
-                    ], template: "<form class=\"bg-black fixed pt-16 z-50 top-0 left-0 right-0 bottom-0\" [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\r\n  <div class=\"h-full w-full px-3 flex flex-col gap-3\">\r\n    <div class=\"grow flex flex-col gap-3 overflow-y-auto\">\r\n      <spx-input [formControl]=\"ctrlQuery\" [spxLabel]=\"txtQuery\" [spxType]=\"inputTypeText\">\r\n      </spx-input>\r\n      <spx-input [formControl]=\"ctrlOptions\" [spxLabel]=\"txtOptions\" [spxSuggestions]=\"spxSuggestions\"\r\n        [spxType]=\"inputTypeRadio\">\r\n      </spx-input>\r\n    </div>\r\n    <div class=\"py-3 flex flex-col gap-3\">\r\n      <spx-button [spxFullWidth]=\"true\" [spxSeverity]=\"SpxSeverity.success\">\r\n        Save\r\n      </spx-button>\r\n      <spx-button [spxFullWidth]=\"true\" [spxSeverity]=\"SpxSeverity.error\" [spxType]=\"'button'\" (spxClick)=\"onCancel()\">\r\n        Cancel\r\n      </spx-button>\r\n    </div>\r\n  </div>\r\n</form>" }]
-        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { spxSuggestions: [{
-                type: Input
-            }], spxField: [{
-                type: Input
-            }], txtOptions: [{
-                type: Input
-            }], txtQuery: [{
-                type: Input
-            }], txtSubmit: [{
-                type: Input
-            }], spxValuePair: [{
-                type: Input
-            }], spxCancel: [{
-                type: Output
-            }], spxSearch: [{
-                type: Output
-            }], spxSubmit: [{
-                type: Output
-            }] } });
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if(formGroup()) {\n  <form class=\"bg-black fixed pt-16 z-50 top-0 left-0 right-0 bottom-0\" [formGroup]=\"formGroup()!\" (ngSubmit)=\"onSubmit()\">\n    <div class=\"h-full w-full px-3 flex flex-col gap-3\">\n      <div class=\"grow flex flex-col gap-3 overflow-y-auto\">\n        <spx-input [formControl]=\"ctrlQuery()\" [spxLabel]=\"txtQuery()\" [spxType]=\"inputTypeText\">\n        </spx-input>\n        <spx-input [formControl]=\"ctrlOptions()\" [spxLabel]=\"txtOptions()\" [spxSuggestions]=\"spxSuggestions()\"\n          [spxType]=\"inputTypeRadio\">\n        </spx-input>\n      </div>\n      <div class=\"py-3 flex flex-col gap-3\">\n        <spx-button [spxFullWidth]=\"true\" [spxSeverity]=\"SpxSeverity.success\">\n          Save\n        </spx-button>\n        <spx-button [spxFullWidth]=\"true\" [spxSeverity]=\"SpxSeverity.error\" [spxType]=\"'button'\" (spxClick)=\"onCancel()\">\n          Cancel\n        </spx-button>\n      </div>\n    </div>\n  </form>\n}\n" }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }] });
 
 class SpxFormViewComponent {
     setAutofocus(key) {
@@ -143,22 +128,22 @@ class SpxFormViewComponent {
         });
     }
     onAutocompleteCancel() {
-        this.autocompleteField = undefined;
+        this.autoCompleteField.set(null);
     }
     onAutocompleteSearch(valuePair) {
-        if (this.autocompleteField) {
+        if (this.autoCompleteField()) {
             this.spxSearch.emit({
-                field: this.autocompleteField,
+                field: this.autoCompleteField(),
                 valuePair,
             });
         }
     }
     onAutocompleteSave(valuePair) {
-        this.spxFormGroup().get(this.autocompleteField.key)?.setValue(valuePair);
-        this.autocompleteField = undefined;
+        this.spxFormGroup().get(this.autoCompleteField().key)?.setValue(valuePair);
+        this.autoCompleteField.set(null);
     }
     onSearch(field) {
-        this.autocompleteField = field;
+        this.autoCompleteField.set(field);
     }
     getRawValidators(formControl) {
         // eslint-disable-next-line no-underscore-dangle
@@ -203,6 +188,7 @@ class SpxFormViewComponent {
         this.spxClick = output();
         this.spxSearch = output();
         this.spxInputs = viewChildren((ElementRef));
+        this.autoCompleteField = signal(null);
         this.typeAutocomplete = SpxInputTypeEnum.autocomplete;
         this.typeButton = SpxInputTypeEnum.button;
         this.typeFloat = SpxInputTypeEnum.float;
@@ -214,7 +200,7 @@ class SpxFormViewComponent {
         this.typeOverlayNumber = SpxInputTypeEnum.overlayNumber;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxFormViewComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SpxFormViewComponent, isStandalone: true, selector: "spx-form-view", inputs: { spxFormGroup: { classPropertyName: "spxFormGroup", publicName: "spxFormGroup", isSignal: true, isRequired: true, transformFunction: null }, spxForm: { classPropertyName: "spxForm", publicName: "spxForm", isSignal: true, isRequired: true, transformFunction: null }, spxSuggestions: { classPropertyName: "spxSuggestions", publicName: "spxSuggestions", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { spxBlur: "spxBlur", spxClick: "spxClick", spxSearch: "spxSearch" }, viewQueries: [{ propertyName: "spxInputs", predicate: (ElementRef), descendants: true, isSignal: true }], ngImport: i0, template: "@if (autocompleteField) {\r\n  <spx-autocomplete-search\r\n    [spxField]=\"autocompleteField\"\r\n    [spxSuggestions]=\"this.spxSuggestions()[autocompleteField.key]\"\r\n    [spxValuePair]=\"$any(this.spxFormGroup().get(autocompleteField.key)).value\"\r\n    [txtOptions]=\"'Options'\"\r\n    [txtQuery]=\"'Query'\"\r\n    [txtSubmit]=\"'Save'\"\r\n    (spxCancel)=\"onAutocompleteCancel()\"\r\n    (spxSearch)=\"onAutocompleteSearch($event)\"\r\n    (spxSubmit)=\"onAutocompleteSave($event)\">\r\n  </spx-autocomplete-search>\r\n}\r\n<div class=\"flex flex-col gap-3\">\r\n  @for (spxSection of spxForm().sections; track spxSection; let spxSectionIndex = $index) {\r\n    <spx-form-section\r\n      [spxShowTitle]=\"!spxSection.showTitle || spxSection.showTitle()\"\r\n      [spxIndex]=\"spxSectionIndex + 1\"\r\n      [spxTitle]=\"spxSection.title ? (spxSection.title() | translate | capitalize) : undefined\">\r\n      @for (spxField of spxSection.fields; track spxField; let spxFieldIndex = $index) {\r\n        @if (spxField.show === undefined || spxField.show()) {\r\n          @if (spxField.type() === typeButton) {\r\n            <spx-button\r\n              [spxFullWidth]=\"true\"\r\n              [spxSeverity]=\"spxField.severity ? spxField.severity() : undefined\"\r\n              [spxType]=\"'button'\"\r\n              (spxClick)=\"onClick(spxField)\"\r\n            >{{ (spxField.label ? spxField.label() : spxField.key) | translate  | capitalize }}</spx-button>\r\n          }\r\n          @if (spxField.type() === typeOverlay || spxField.type() === typeOverlayNumber || spxField.type() === typeFloat || spxField.type() === typeNumber || spxField.type() === typeText || spxField.type() === typeAutocomplete || spxField.type() === typeNumericKeyboard) {\r\n            <spx-input\r\n              [formControl]=\"$any(this.spxFormGroup().get(spxField.key))\"\r\n              [spxAutofocus]=\"spxField.autofocus ? spxField.autofocus() : false\"\r\n              [spxCapitalize]=\"spxField.capitalize ? spxField.capitalize() : false\"\r\n              [spxLabel]=\"(spxField.label ? spxField.label() : spxField.key) | translate  | capitalize\"\r\n              [spxName]=\"spxField.key\"\r\n              [spxPattern]=\"spxField.type() === typeNumericKeyboard ? '\\\\d*' : undefined\"\r\n              [spxReadonly]=\"spxField.readonly ? spxField.readonly() : false\"\r\n              [spxRequired]=\"hasRequiredField(this.spxFormGroup().get(spxField.key)!)\"\r\n              [spxShowSearch]=\"spxField.type() === typeAutocomplete\"\r\n              [spxShowHelp]=\"false\"\r\n              [spxShowValidationMessages]=\"this.spxFormGroup().get(spxField.key)! && this.spxFormGroup().get(spxField.key)!.errors && this.spxFormGroup().get(spxField.key)!.touched\"\r\n              [spxStep]=\"spxField.step ? spxField.step() : undefined\"\r\n              [spxType]=\"spxField.type()\"\r\n              [spxValidators]=\"getRawValidators(this.spxFormGroup().get(spxField.key)!)\"\r\n              [spxSuggestions]=\"spxField.suggestionsFixed ? spxField.suggestionsFixed() : this.spxSuggestions()[spxField.key]\"\r\n              (spxBlur)=\"onBlur(spxField)\"\r\n              (spxSearch)=\"onSearch(spxField)\">\r\n              <spx-validate-control [control]=\"$any(this.spxFormGroup().get(spxField.key))\" [label]=\"(spxField.label ? spxField.label() : spxField.key)| translate  | capitalize\"></spx-validate-control>\r\n            </spx-input>\r\n          }\r\n          @if (spxField.type() === typeRadio) {\r\n            <spx-input\r\n              [formControl]=\"$any(this.spxFormGroup().get(spxField.key))\"\r\n              [spxLabel]=\"(spxField.label ? spxField.label() : spxField.key) | translate | capitalize\"\r\n              [spxName]=\"spxField.key\"\r\n              [spxReadonly]=\"spxField.readonly ? spxField.readonly() : false\"\r\n              [spxRequired]=\"hasRequiredField(this.spxFormGroup().get(spxField.key)!)\"\r\n              [spxShowHelp]=\"false\"\r\n              [spxShowValidationMessages]=\"this.spxFormGroup().get(spxField.key)! && this.spxFormGroup().get(spxField.key)!.errors && this.spxFormGroup().get(spxField.key)!.touched\"\r\n              [spxSuggestions]=\"spxField.suggestionsFixed ? spxField.suggestionsFixed() : this.spxSuggestions()[spxField.key]\"\r\n              [spxType]=\"typeRadio\"\r\n              [spxValidators]=\"getRawValidators(this.spxFormGroup().get(spxField.key)!)\">\r\n              <spx-validate-control [control]=\"$any(this.spxFormGroup().get(spxField.key))\" [label]=\"(spxField.label ? spxField.label() : spxField.key) | translate | capitalize\"></spx-validate-control>\r\n            </spx-input>\r\n          }\r\n        }\r\n        \r\n      }\r\n    </spx-form-section>\r\n  }\r\n\r\n  @for (spxButton of spxForm().buttons; track spxButton) {\r\n    <spx-button\r\n      [spxFullWidth]=\"true\"\r\n      [spxSeverity]=\"spxButton.severity\"\r\n      [spxType]=\"spxButton.type\"\r\n      (spxClick)=\"spxButton.onClick ? spxButton.onClick() : undefined\">\r\n      {{ ((spxButton && spxButton.label) ? spxButton.label() : '') | translate | capitalize }}\r\n    </spx-button>\r\n  }\r\n</div>", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: SpxAutocompleteSearchComponent, selector: "spx-autocomplete-search", inputs: ["spxSuggestions", "spxField", "txtOptions", "txtQuery", "txtSubmit", "spxValuePair"], outputs: ["spxCancel", "spxSearch", "spxSubmit"] }, { kind: "component", type: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType"], outputs: ["spxClick"] }, { kind: "pipe", type: SpxCapitalizePipe, name: "capitalize" }, { kind: "component", type: SpxFormSectionComponent, selector: "spx-form-section", inputs: ["spxIndex", "spxIndexSecondary", "spxTitle", "spxShowTitle"] }, { kind: "component", type: SpxInputComponent, selector: "spx-input", inputs: ["spxLabel", "spxMax", "spxMin", "spxName", "spxReadonly", "spxAutocomplete", "spxAutofocus", "spxInputMode", "spxPattern", "spxRequired", "spxSelectMonth", "spxSelectDay", "spxShowEdit", "spxShowHelp", "spxShowLabel", "spxCompact", "spxShowClear", "spxShowSearch", "spxAlert", "spxShowValidationMessages", "spxStep", "spxSuggestions", "spxType", "spxValidators", "spxCapitalize"], outputs: ["spxClear", "spxEdit", "spxHelp", "spxSearch", "spxBlur"] }, { kind: "component", type: SpxValidateControlComponent, selector: "spx-validate-control", inputs: ["control", "label", "submitTried"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SpxFormViewComponent, isStandalone: true, selector: "spx-form-view", inputs: { spxFormGroup: { classPropertyName: "spxFormGroup", publicName: "spxFormGroup", isSignal: true, isRequired: true, transformFunction: null }, spxForm: { classPropertyName: "spxForm", publicName: "spxForm", isSignal: true, isRequired: true, transformFunction: null }, spxSuggestions: { classPropertyName: "spxSuggestions", publicName: "spxSuggestions", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { spxBlur: "spxBlur", spxClick: "spxClick", spxSearch: "spxSearch" }, viewQueries: [{ propertyName: "spxInputs", predicate: (ElementRef), descendants: true, isSignal: true }], ngImport: i0, template: "@if (autoCompleteField()) {\n  <spx-autocomplete-search\n    [spxField]=\"autoCompleteField()!\"\n    [spxSuggestions]=\"this.spxSuggestions()[autoCompleteField()!.key]\"\n    [spxValuePair]=\"$any(this.spxFormGroup().get(autoCompleteField()!.key)).value\"\n    [txtOptions]=\"'Options'\"\n    [txtQuery]=\"'Query'\"\n    [txtSubmit]=\"'Save'\"\n    (spxCancel)=\"onAutocompleteCancel()\"\n    (spxSearch)=\"onAutocompleteSearch($event)\"\n    (spxSubmit)=\"onAutocompleteSave($event)\">\n  </spx-autocomplete-search>\n}\n<div class=\"flex flex-col gap-3\">\n  @for (spxSection of spxForm().sections; track spxSection; let spxSectionIndex = $index) {\n    <spx-form-section\n      [spxShowTitle]=\"!spxSection.showTitle || spxSection.showTitle()\"\n      [spxIndex]=\"spxSectionIndex + 1\"\n      [spxTitle]=\"spxSection.title ? (spxSection.title() | translate | capitalize) : undefined\">\n      @for (spxField of spxSection.fields; track spxField; let spxFieldIndex = $index) {\n        @if (spxField.show === undefined || spxField.show()) {\n          @if (spxField.type() === typeButton) {\n            <spx-button\n              [spxFullWidth]=\"true\"\n              [spxSeverity]=\"spxField.severity ? spxField.severity() : undefined\"\n              [spxType]=\"'button'\"\n              (spxClick)=\"onClick(spxField)\"\n            >{{ (spxField.label ? spxField.label() : spxField.key) | translate  | capitalize }}</spx-button>\n          }\n          @if (spxField.type() === typeOverlay || spxField.type() === typeOverlayNumber || spxField.type() === typeFloat || spxField.type() === typeNumber || spxField.type() === typeText || spxField.type() === typeAutocomplete || spxField.type() === typeNumericKeyboard) {\n            <spx-input\n              [formControl]=\"$any(this.spxFormGroup().get(spxField.key))\"\n              [spxAutofocus]=\"spxField.autofocus ? spxField.autofocus() : false\"\n              [spxCapitalize]=\"spxField.capitalize ? spxField.capitalize() : false\"\n              [spxLabel]=\"(spxField.label ? spxField.label() : spxField.key) | translate  | capitalize\"\n              [spxName]=\"spxField.key\"\n              [spxPattern]=\"spxField.type() === typeNumericKeyboard ? '\\\\d*' : undefined\"\n              [spxReadonly]=\"spxField.readonly ? spxField.readonly() : false\"\n              [spxRequired]=\"hasRequiredField(this.spxFormGroup().get(spxField.key)!)\"\n              [spxShowSearch]=\"spxField.type() === typeAutocomplete\"\n              [spxShowHelp]=\"false\"\n              [spxShowValidationMessages]=\"this.spxFormGroup().get(spxField.key)! && this.spxFormGroup().get(spxField.key)!.errors && this.spxFormGroup().get(spxField.key)!.touched\"\n              [spxStep]=\"spxField.step ? spxField.step() : undefined\"\n              [spxType]=\"spxField.type()\"\n              [spxValidators]=\"getRawValidators(this.spxFormGroup().get(spxField.key)!)\"\n              [spxSuggestions]=\"spxField.suggestionsFixed ? spxField.suggestionsFixed() : this.spxSuggestions()[spxField.key]\"\n              (spxBlur)=\"onBlur(spxField)\"\n              (spxSearch)=\"onSearch(spxField)\">\n              <spx-validate-control [errors]=\"$any(this.spxFormGroup().get(spxField.key)).errors\" [touched]=\"$any(this.spxFormGroup().get(spxField.key)).touched\" [control]=\"$any(this.spxFormGroup().get(spxField.key))\" [label]=\"(spxField.label ? spxField.label() : spxField.key)| translate  | capitalize\"></spx-validate-control>\n            </spx-input>\n          }\n          @if (spxField.type() === typeRadio) {\n            <spx-input\n              [formControl]=\"$any(this.spxFormGroup().get(spxField.key))\"\n              [spxLabel]=\"(spxField.label ? spxField.label() : spxField.key) | translate | capitalize\"\n              [spxName]=\"spxField.key\"\n              [spxReadonly]=\"spxField.readonly ? spxField.readonly() : false\"\n              [spxRequired]=\"hasRequiredField(this.spxFormGroup().get(spxField.key)!)\"\n              [spxShowHelp]=\"false\"\n              [spxShowValidationMessages]=\"this.spxFormGroup().get(spxField.key)! && this.spxFormGroup().get(spxField.key)!.errors && this.spxFormGroup().get(spxField.key)!.touched\"\n              [spxSuggestions]=\"spxField.suggestionsFixed ? spxField.suggestionsFixed() : this.spxSuggestions()[spxField.key]\"\n              [spxType]=\"typeRadio\"\n              [spxValidators]=\"getRawValidators(this.spxFormGroup().get(spxField.key)!)\">\n              <spx-validate-control [errors]=\"$any(this.spxFormGroup().get(spxField.key)).errors\" [touched]=\"$any(this.spxFormGroup().get(spxField.key)).touched\" [control]=\"$any(this.spxFormGroup().get(spxField.key))\" [label]=\"(spxField.label ? spxField.label() : spxField.key) | translate | capitalize\"></spx-validate-control>\n            </spx-input>\n          }\n        }\n        \n      }\n    </spx-form-section>\n  }\n\n  @for (spxButton of spxForm().buttons; track spxButton) {\n    <spx-button\n      [spxFullWidth]=\"true\"\n      [spxSeverity]=\"spxButton.severity\"\n      [spxType]=\"spxButton.type\"\n      (spxClick)=\"spxButton.onClick ? spxButton.onClick() : undefined\">\n      {{ ((spxButton && spxButton.label) ? spxButton.label() : '') | translate | capitalize }}\n    </spx-button>\n  }\n</div>", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: SpxAutocompleteSearchComponent, selector: "spx-autocomplete-search", inputs: ["spxSuggestions", "spxField", "txtOptions", "txtQuery", "txtSubmit", "spxValuePair"], outputs: ["spxCancel", "spxSearch", "spxSubmit"] }, { kind: "component", type: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType"], outputs: ["spxClick"] }, { kind: "pipe", type: SpxCapitalizePipe, name: "capitalize" }, { kind: "component", type: SpxFormSectionComponent, selector: "spx-form-section", inputs: ["spxIndex", "spxIndexSecondary", "spxTitle", "spxShowTitle"] }, { kind: "component", type: SpxInputComponent, selector: "spx-input", inputs: ["spxLabel", "spxMax", "spxMin", "spxName", "spxReadonly", "spxAutocomplete", "spxAutofocus", "spxInputMode", "spxPattern", "spxRequired", "spxSelectMonth", "spxSelectDay", "spxShowEdit", "spxShowHelp", "spxShowLabel", "spxCompact", "spxShowClear", "spxShowSearch", "spxAlert", "spxShowValidationMessages", "spxStep", "spxSuggestions", "spxType", "spxValidators", "spxCapitalize"], outputs: ["spxClear", "spxEdit", "spxHelp", "spxSearch", "spxBlur"] }, { kind: "component", type: SpxValidateControlComponent, selector: "spx-validate-control", inputs: ["control", "label", "submitTried", "errors", "touched"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxFormViewComponent, decorators: [{
             type: Component,
@@ -228,7 +214,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                         SpxInputComponent,
                         SpxValidateControlComponent,
                         TranslateModule
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (autocompleteField) {\r\n  <spx-autocomplete-search\r\n    [spxField]=\"autocompleteField\"\r\n    [spxSuggestions]=\"this.spxSuggestions()[autocompleteField.key]\"\r\n    [spxValuePair]=\"$any(this.spxFormGroup().get(autocompleteField.key)).value\"\r\n    [txtOptions]=\"'Options'\"\r\n    [txtQuery]=\"'Query'\"\r\n    [txtSubmit]=\"'Save'\"\r\n    (spxCancel)=\"onAutocompleteCancel()\"\r\n    (spxSearch)=\"onAutocompleteSearch($event)\"\r\n    (spxSubmit)=\"onAutocompleteSave($event)\">\r\n  </spx-autocomplete-search>\r\n}\r\n<div class=\"flex flex-col gap-3\">\r\n  @for (spxSection of spxForm().sections; track spxSection; let spxSectionIndex = $index) {\r\n    <spx-form-section\r\n      [spxShowTitle]=\"!spxSection.showTitle || spxSection.showTitle()\"\r\n      [spxIndex]=\"spxSectionIndex + 1\"\r\n      [spxTitle]=\"spxSection.title ? (spxSection.title() | translate | capitalize) : undefined\">\r\n      @for (spxField of spxSection.fields; track spxField; let spxFieldIndex = $index) {\r\n        @if (spxField.show === undefined || spxField.show()) {\r\n          @if (spxField.type() === typeButton) {\r\n            <spx-button\r\n              [spxFullWidth]=\"true\"\r\n              [spxSeverity]=\"spxField.severity ? spxField.severity() : undefined\"\r\n              [spxType]=\"'button'\"\r\n              (spxClick)=\"onClick(spxField)\"\r\n            >{{ (spxField.label ? spxField.label() : spxField.key) | translate  | capitalize }}</spx-button>\r\n          }\r\n          @if (spxField.type() === typeOverlay || spxField.type() === typeOverlayNumber || spxField.type() === typeFloat || spxField.type() === typeNumber || spxField.type() === typeText || spxField.type() === typeAutocomplete || spxField.type() === typeNumericKeyboard) {\r\n            <spx-input\r\n              [formControl]=\"$any(this.spxFormGroup().get(spxField.key))\"\r\n              [spxAutofocus]=\"spxField.autofocus ? spxField.autofocus() : false\"\r\n              [spxCapitalize]=\"spxField.capitalize ? spxField.capitalize() : false\"\r\n              [spxLabel]=\"(spxField.label ? spxField.label() : spxField.key) | translate  | capitalize\"\r\n              [spxName]=\"spxField.key\"\r\n              [spxPattern]=\"spxField.type() === typeNumericKeyboard ? '\\\\d*' : undefined\"\r\n              [spxReadonly]=\"spxField.readonly ? spxField.readonly() : false\"\r\n              [spxRequired]=\"hasRequiredField(this.spxFormGroup().get(spxField.key)!)\"\r\n              [spxShowSearch]=\"spxField.type() === typeAutocomplete\"\r\n              [spxShowHelp]=\"false\"\r\n              [spxShowValidationMessages]=\"this.spxFormGroup().get(spxField.key)! && this.spxFormGroup().get(spxField.key)!.errors && this.spxFormGroup().get(spxField.key)!.touched\"\r\n              [spxStep]=\"spxField.step ? spxField.step() : undefined\"\r\n              [spxType]=\"spxField.type()\"\r\n              [spxValidators]=\"getRawValidators(this.spxFormGroup().get(spxField.key)!)\"\r\n              [spxSuggestions]=\"spxField.suggestionsFixed ? spxField.suggestionsFixed() : this.spxSuggestions()[spxField.key]\"\r\n              (spxBlur)=\"onBlur(spxField)\"\r\n              (spxSearch)=\"onSearch(spxField)\">\r\n              <spx-validate-control [control]=\"$any(this.spxFormGroup().get(spxField.key))\" [label]=\"(spxField.label ? spxField.label() : spxField.key)| translate  | capitalize\"></spx-validate-control>\r\n            </spx-input>\r\n          }\r\n          @if (spxField.type() === typeRadio) {\r\n            <spx-input\r\n              [formControl]=\"$any(this.spxFormGroup().get(spxField.key))\"\r\n              [spxLabel]=\"(spxField.label ? spxField.label() : spxField.key) | translate | capitalize\"\r\n              [spxName]=\"spxField.key\"\r\n              [spxReadonly]=\"spxField.readonly ? spxField.readonly() : false\"\r\n              [spxRequired]=\"hasRequiredField(this.spxFormGroup().get(spxField.key)!)\"\r\n              [spxShowHelp]=\"false\"\r\n              [spxShowValidationMessages]=\"this.spxFormGroup().get(spxField.key)! && this.spxFormGroup().get(spxField.key)!.errors && this.spxFormGroup().get(spxField.key)!.touched\"\r\n              [spxSuggestions]=\"spxField.suggestionsFixed ? spxField.suggestionsFixed() : this.spxSuggestions()[spxField.key]\"\r\n              [spxType]=\"typeRadio\"\r\n              [spxValidators]=\"getRawValidators(this.spxFormGroup().get(spxField.key)!)\">\r\n              <spx-validate-control [control]=\"$any(this.spxFormGroup().get(spxField.key))\" [label]=\"(spxField.label ? spxField.label() : spxField.key) | translate | capitalize\"></spx-validate-control>\r\n            </spx-input>\r\n          }\r\n        }\r\n        \r\n      }\r\n    </spx-form-section>\r\n  }\r\n\r\n  @for (spxButton of spxForm().buttons; track spxButton) {\r\n    <spx-button\r\n      [spxFullWidth]=\"true\"\r\n      [spxSeverity]=\"spxButton.severity\"\r\n      [spxType]=\"spxButton.type\"\r\n      (spxClick)=\"spxButton.onClick ? spxButton.onClick() : undefined\">\r\n      {{ ((spxButton && spxButton.label) ? spxButton.label() : '') | translate | capitalize }}\r\n    </spx-button>\r\n  }\r\n</div>" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "@if (autoCompleteField()) {\n  <spx-autocomplete-search\n    [spxField]=\"autoCompleteField()!\"\n    [spxSuggestions]=\"this.spxSuggestions()[autoCompleteField()!.key]\"\n    [spxValuePair]=\"$any(this.spxFormGroup().get(autoCompleteField()!.key)).value\"\n    [txtOptions]=\"'Options'\"\n    [txtQuery]=\"'Query'\"\n    [txtSubmit]=\"'Save'\"\n    (spxCancel)=\"onAutocompleteCancel()\"\n    (spxSearch)=\"onAutocompleteSearch($event)\"\n    (spxSubmit)=\"onAutocompleteSave($event)\">\n  </spx-autocomplete-search>\n}\n<div class=\"flex flex-col gap-3\">\n  @for (spxSection of spxForm().sections; track spxSection; let spxSectionIndex = $index) {\n    <spx-form-section\n      [spxShowTitle]=\"!spxSection.showTitle || spxSection.showTitle()\"\n      [spxIndex]=\"spxSectionIndex + 1\"\n      [spxTitle]=\"spxSection.title ? (spxSection.title() | translate | capitalize) : undefined\">\n      @for (spxField of spxSection.fields; track spxField; let spxFieldIndex = $index) {\n        @if (spxField.show === undefined || spxField.show()) {\n          @if (spxField.type() === typeButton) {\n            <spx-button\n              [spxFullWidth]=\"true\"\n              [spxSeverity]=\"spxField.severity ? spxField.severity() : undefined\"\n              [spxType]=\"'button'\"\n              (spxClick)=\"onClick(spxField)\"\n            >{{ (spxField.label ? spxField.label() : spxField.key) | translate  | capitalize }}</spx-button>\n          }\n          @if (spxField.type() === typeOverlay || spxField.type() === typeOverlayNumber || spxField.type() === typeFloat || spxField.type() === typeNumber || spxField.type() === typeText || spxField.type() === typeAutocomplete || spxField.type() === typeNumericKeyboard) {\n            <spx-input\n              [formControl]=\"$any(this.spxFormGroup().get(spxField.key))\"\n              [spxAutofocus]=\"spxField.autofocus ? spxField.autofocus() : false\"\n              [spxCapitalize]=\"spxField.capitalize ? spxField.capitalize() : false\"\n              [spxLabel]=\"(spxField.label ? spxField.label() : spxField.key) | translate  | capitalize\"\n              [spxName]=\"spxField.key\"\n              [spxPattern]=\"spxField.type() === typeNumericKeyboard ? '\\\\d*' : undefined\"\n              [spxReadonly]=\"spxField.readonly ? spxField.readonly() : false\"\n              [spxRequired]=\"hasRequiredField(this.spxFormGroup().get(spxField.key)!)\"\n              [spxShowSearch]=\"spxField.type() === typeAutocomplete\"\n              [spxShowHelp]=\"false\"\n              [spxShowValidationMessages]=\"this.spxFormGroup().get(spxField.key)! && this.spxFormGroup().get(spxField.key)!.errors && this.spxFormGroup().get(spxField.key)!.touched\"\n              [spxStep]=\"spxField.step ? spxField.step() : undefined\"\n              [spxType]=\"spxField.type()\"\n              [spxValidators]=\"getRawValidators(this.spxFormGroup().get(spxField.key)!)\"\n              [spxSuggestions]=\"spxField.suggestionsFixed ? spxField.suggestionsFixed() : this.spxSuggestions()[spxField.key]\"\n              (spxBlur)=\"onBlur(spxField)\"\n              (spxSearch)=\"onSearch(spxField)\">\n              <spx-validate-control [errors]=\"$any(this.spxFormGroup().get(spxField.key)).errors\" [touched]=\"$any(this.spxFormGroup().get(spxField.key)).touched\" [control]=\"$any(this.spxFormGroup().get(spxField.key))\" [label]=\"(spxField.label ? spxField.label() : spxField.key)| translate  | capitalize\"></spx-validate-control>\n            </spx-input>\n          }\n          @if (spxField.type() === typeRadio) {\n            <spx-input\n              [formControl]=\"$any(this.spxFormGroup().get(spxField.key))\"\n              [spxLabel]=\"(spxField.label ? spxField.label() : spxField.key) | translate | capitalize\"\n              [spxName]=\"spxField.key\"\n              [spxReadonly]=\"spxField.readonly ? spxField.readonly() : false\"\n              [spxRequired]=\"hasRequiredField(this.spxFormGroup().get(spxField.key)!)\"\n              [spxShowHelp]=\"false\"\n              [spxShowValidationMessages]=\"this.spxFormGroup().get(spxField.key)! && this.spxFormGroup().get(spxField.key)!.errors && this.spxFormGroup().get(spxField.key)!.touched\"\n              [spxSuggestions]=\"spxField.suggestionsFixed ? spxField.suggestionsFixed() : this.spxSuggestions()[spxField.key]\"\n              [spxType]=\"typeRadio\"\n              [spxValidators]=\"getRawValidators(this.spxFormGroup().get(spxField.key)!)\">\n              <spx-validate-control [errors]=\"$any(this.spxFormGroup().get(spxField.key)).errors\" [touched]=\"$any(this.spxFormGroup().get(spxField.key)).touched\" [control]=\"$any(this.spxFormGroup().get(spxField.key))\" [label]=\"(spxField.label ? spxField.label() : spxField.key) | translate | capitalize\"></spx-validate-control>\n            </spx-input>\n          }\n        }\n        \n      }\n    </spx-form-section>\n  }\n\n  @for (spxButton of spxForm().buttons; track spxButton) {\n    <spx-button\n      [spxFullWidth]=\"true\"\n      [spxSeverity]=\"spxButton.severity\"\n      [spxType]=\"spxButton.type\"\n      (spxClick)=\"spxButton.onClick ? spxButton.onClick() : undefined\">\n      {{ ((spxButton && spxButton.label) ? spxButton.label() : '') | translate | capitalize }}\n    </spx-button>\n  }\n</div>" }]
         }], ctorParameters: () => [{ type: i1.FormBuilder }] });
 
 /**

package/fesm2022/softpak-components-spx-form-view.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"softpak-components-spx-form-view.mjs","sources":["../../../../projects/softpak/components/spx-form-view/spx-form-button-type.enum.ts","../../../../projects/softpak/components/spx-form-view/spx-autocomplete-search.component.ts","../../../../projects/softpak/components/spx-form-view/spx-autocomplete-search.component.html","../../../../projects/softpak/components/spx-form-view/spx-form-view.component.ts","../../../../projects/softpak/components/spx-form-view/spx-form-view.component.html","../../../../projects/softpak/components/spx-form-view/softpak-components-spx-form-view.ts"],"sourcesContent":["export enum SpxFormButtonTypeEnum {\r\n    button = 'button',\r\n    submit = 'submit',\r\n}\r\n","import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';\r\nimport { FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';\r\nimport { Subscription, debounceTime } from 'rxjs';\r\n\r\nimport { SpxFormFieldI } from './spx-form-field.interface';\r\nimport { SpxFormSectionI } from './spx-form-section.interface';\r\nimport { SpxButtonComponent } from '@softpak/components/spx-button';\r\nimport { SpxSeverityEnum } from '@softpak/components/spx-helpers';\r\nimport { SpxInputComponent, SpxValuePair, SpxInputTypeEnum } from '@softpak/components/spx-inputs';\r\n\r\nexport const sectionAutocompleteSearch = 'autocompleteSearch';\r\nexport const ctrlQuery = 'query';\r\nexport const ctrlOptions = 'options';\r\n\r\n@Component({\r\n    selector: 'spx-autocomplete-search',\r\n    templateUrl: './spx-autocomplete-search.component.html',\r\n    imports: [\r\n        FormsModule,\r\n        ReactiveFormsModule,\r\n        SpxButtonComponent,\r\n        SpxInputComponent,\r\n    ]\r\n})\r\nexport class SpxAutocompleteSearchComponent implements OnInit, OnDestroy {\r\n  formGroup!: FormGroup;\r\n  @Input() spxSuggestions: SpxValuePair<any>[] = [];\r\n  @Input() spxField!: SpxFormFieldI;\r\n  @Input() txtOptions!: string;\r\n  @Input() txtQuery!: string;\r\n  @Input() txtSubmit!: string;\r\n  @Input() spxValuePair!: SpxValuePair<any>;\r\n  @Output() spxCancel: EventEmitter<void> = new EventEmitter<void>();\r\n  @Output() spxSearch: EventEmitter<SpxValuePair<any>> = new EventEmitter<SpxValuePair<any>>(); \r\n  @Output() spxSubmit: EventEmitter<SpxValuePair<any>> = new EventEmitter<SpxValuePair<any>>();\r\n  inputTypeRadio = SpxInputTypeEnum.radio;\r\n  inputTypeText = SpxInputTypeEnum.text;\r\n  SpxSeverity = SpxSeverityEnum;\r\n \r\n  sections: SpxFormSectionI[] = [\r\n    {\r\n      key: sectionAutocompleteSearch,\r\n      showTitle: () => false,\r\n      fields: [\r\n        {\r\n          key: ctrlQuery,\r\n          type: () => SpxInputTypeEnum.text,\r\n          label: () => this.txtQuery,\r\n          capitalize: () => true,\r\n        },\r\n        {\r\n          key: ctrlOptions,\r\n          type: () => SpxInputTypeEnum.radio,\r\n          label: () => this.txtOptions,\r\n        },\r\n      ]\r\n    }\r\n  ];\r\n\r\n  get ctrlQuery(): FormControl { return this.formGroup.get(ctrlQuery) as FormControl; }\r\n  get ctrlOptions(): FormControl { return this.formGroup.get(ctrlOptions) as FormControl; }\r\n\r\n  private subSelection?: Subscription;\r\n  private subQuery?: Subscription;\r\n\r\n  constructor(readonly formBuilder: FormBuilder) {\r\n    this.createForm();\r\n  }\r\n\r\n  ngOnInit(): void {\r\n    this.listenToSelection();\r\n    this.listenToQuery();\r\n    this.ctrlQuery.setValue(this.spxValuePair, { emitEvent: false });\r\n    this.spxSearch.emit(this.spxValuePair);\r\n  }\r\n\r\n  ngOnDestroy(): void {\r\n    if (this.subSelection) {\r\n      this.subSelection.unsubscribe();\r\n    }\r\n    if (this.subQuery) {\r\n      this.subQuery.unsubscribe();\r\n    }\r\n  }\r\n\r\n  private createForm(): void {\r\n    this.formGroup = this.formBuilder.group({\r\n      [ctrlQuery]: [null],\r\n      [ctrlOptions]: [null],\r\n    });\r\n  }\r\n\r\n  getRawValidators(formControl: FormControl) {\r\n    return (formControl as any)._rawValidators;\r\n  }\r\n\r\n  onCancel(): void {\r\n    this.spxCancel.emit();\r\n  }\r\n  \r\n  onSubmit(): void {\r\n    this.spxSubmit.emit(this.ctrlQuery.value);\r\n  }\r\n\r\n  private listenToQuery(): void {\r\n    this.subQuery = this.ctrlQuery.valueChanges.pipe(debounceTime(500)).subscribe(valuePair => {\r\n      this.spxSearch.emit(valuePair);\r\n    });\r\n  }\r\n\r\n  private listenToSelection(): void {\r\n    this.subSelection = this.ctrlOptions.valueChanges.subscribe(valuePair => {\r\n      this.ctrlQuery.setValue(valuePair);\r\n    });\r\n  }\r\n}\r\n","<form class=\"bg-black fixed pt-16 z-50 top-0 left-0 right-0 bottom-0\" [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\r\n  <div class=\"h-full w-full px-3 flex flex-col gap-3\">\r\n    <div class=\"grow flex flex-col gap-3 overflow-y-auto\">\r\n      <spx-input [formControl]=\"ctrlQuery\" [spxLabel]=\"txtQuery\" [spxType]=\"inputTypeText\">\r\n      </spx-input>\r\n      <spx-input [formControl]=\"ctrlOptions\" [spxLabel]=\"txtOptions\" [spxSuggestions]=\"spxSuggestions\"\r\n        [spxType]=\"inputTypeRadio\">\r\n      </spx-input>\r\n    </div>\r\n    <div class=\"py-3 flex flex-col gap-3\">\r\n      <spx-button [spxFullWidth]=\"true\" [spxSeverity]=\"SpxSeverity.success\">\r\n        Save\r\n      </spx-button>\r\n      <spx-button [spxFullWidth]=\"true\" [spxSeverity]=\"SpxSeverity.error\" [spxType]=\"'button'\" (spxClick)=\"onCancel()\">\r\n        Cancel\r\n      </spx-button>\r\n    </div>\r\n  </div>\r\n</form>","import { ChangeDetectionStrategy, Component, ElementRef, input, output, viewChildren } from '@angular/core';\r\nimport { SpxFormSectionI } from './spx-form-section.interface';\r\nimport { AbstractControl, FormBuilder, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';\r\nimport { SpxFormFieldI } from './spx-form-field.interface';\r\nimport { SpxAutocompleteSearchComponent } from './spx-autocomplete-search.component';\r\nimport { TranslateModule } from '@ngx-translate/core';\r\nimport { SpxFormI } from './spx-form.interface';\r\nimport { SpxButtonComponent } from '@softpak/components/spx-button';\r\nimport { SpxCapitalizePipe } from '@softpak/components/spx-capitalize';\r\nimport { SpxFormSectionComponent } from '@softpak/components/spx-form-section';\r\nimport { SpxInputComponent, SpxValuePair, SpxInputTypeEnum } from '@softpak/components/spx-inputs';\r\nimport { SpxValidateControlComponent } from '@softpak/components/spx-validation';\r\n\r\n@Component({\r\n    selector: 'spx-form-view',\r\n    imports: [\r\n        FormsModule,\r\n        ReactiveFormsModule,\r\n        SpxAutocompleteSearchComponent,\r\n        SpxButtonComponent,\r\n        SpxCapitalizePipe,\r\n        SpxFormSectionComponent,\r\n        SpxInputComponent,\r\n        SpxValidateControlComponent,\r\n        TranslateModule\r\n    ],\r\n    templateUrl: './spx-form-view.component.html',\r\n    changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class SpxFormViewComponent {\r\n  readonly spxFormGroup = input.required<FormGroup>();\r\n  readonly spxForm = input.required<SpxFormI>();\r\n  readonly spxSuggestions = input.required<any>();\r\n  spxBlur = output<{ field: SpxFormFieldI, valuePair: SpxValuePair<any> }>();\r\n  spxClick = output<{ field: SpxFormFieldI }>();\r\n  spxSearch = output<{ field: SpxFormFieldI, valuePair: SpxValuePair<any> }>();\r\n  spxInputs = viewChildren(ElementRef<SpxInputComponent>);\r\n  autocompleteField?: SpxFormFieldI;\r\n\r\n  typeAutocomplete = SpxInputTypeEnum.autocomplete;\r\n  typeButton = SpxInputTypeEnum.button;\r\n  typeFloat = SpxInputTypeEnum.float;\r\n  typeNumber = SpxInputTypeEnum.number;\r\n  typeRadio = SpxInputTypeEnum.radio;\r\n  typeText = SpxInputTypeEnum.text;\r\n  typeNumericKeyboard = SpxInputTypeEnum.textNumericKeyboard;\r\n  typeOverlay = SpxInputTypeEnum.overlay;\r\n  typeOverlayNumber = SpxInputTypeEnum.overlayNumber;\r\n\r\n  setAutofocus(key: string): void {\r\n    const field = this.spxInputs().find(input => input.nativeElement.spxName() === key);\r\n    if (field) {\r\n      field.nativeElement.setFocusIn();\r\n    }\r\n  }\r\n\r\n  onBlur(field: SpxFormFieldI) {\r\n    this.spxBlur.emit({\r\n      field,\r\n      valuePair: this.spxFormGroup().get(field.key)!.value,\r\n    });\r\n  }\r\n\r\n  onClick(field: SpxFormFieldI) {\r\n    this.spxClick.emit({\r\n      field,\r\n    });\r\n  }\r\n\r\n  onAutocompleteCancel(): void {\r\n    this.autocompleteField = undefined;\r\n  }\r\n\r\n  onAutocompleteSearch(valuePair: SpxValuePair<any>): void {\r\n    if (this.autocompleteField) {\r\n      this.spxSearch.emit({\r\n        field: this.autocompleteField,\r\n        valuePair,\r\n      });\r\n    }\r\n  }\r\n\r\n  onAutocompleteSave(valuePair: SpxValuePair<any>) {\r\n    this.spxFormGroup().get(this.autocompleteField!.key)?.setValue(valuePair);\r\n    this.autocompleteField = undefined;\r\n  }\r\n\r\n  onSearch(field: SpxFormFieldI) {\r\n    this.autocompleteField = field;\r\n  }\r\n\r\n  getRawValidators(formControl: AbstractControl) {\r\n    // eslint-disable-next-line no-underscore-dangle\r\n    return (formControl as any)._rawValidators;\r\n  }\r\n\r\n  hasRequiredField(abstractControl: AbstractControl): boolean {\r\n    if (abstractControl.validator) {\r\n      const validator = abstractControl.validator({} as AbstractControl);\r\n      if (validator && validator['required']) {\r\n        return true;\r\n      }\r\n    }\r\n    if ((abstractControl as any)['controls']) {\r\n      for (const controlName in (abstractControl as any)['controls']) {\r\n        if ((abstractControl as any)['controls'][controlName]) {\r\n          if (this.hasRequiredField((abstractControl as any)['controls'][controlName])) {\r\n            return true;\r\n          }\r\n        }\r\n      }\r\n    }\r\n    return false;\r\n  }\r\n\r\n  static initialFormValue(sections: SpxFormSectionI[]) {\r\n    const formObject: any = {};\r\n    sections.forEach(section => {\r\n      section.fields.forEach(field => {\r\n        formObject[field.key] = [field.defaultValue ? field.defaultValue() : null, field.validators ? [...field.validators()] : []];\r\n      });\r\n    });\r\n    return formObject;\r\n  }\r\n\r\n  static createForm(formBuilder: FormBuilder, sections: SpxFormSectionI[]): FormGroup {\r\n    return formBuilder.group(this.initialFormValue(sections));\r\n  }\r\n\r\n  constructor(readonly formBuilder: FormBuilder) {\r\n  }\r\n}\r\n","@if (autocompleteField) {\r\n  <spx-autocomplete-search\r\n    [spxField]=\"autocompleteField\"\r\n    [spxSuggestions]=\"this.spxSuggestions()[autocompleteField.key]\"\r\n    [spxValuePair]=\"$any(this.spxFormGroup().get(autocompleteField.key)).value\"\r\n    [txtOptions]=\"'Options'\"\r\n    [txtQuery]=\"'Query'\"\r\n    [txtSubmit]=\"'Save'\"\r\n    (spxCancel)=\"onAutocompleteCancel()\"\r\n    (spxSearch)=\"onAutocompleteSearch($event)\"\r\n    (spxSubmit)=\"onAutocompleteSave($event)\">\r\n  </spx-autocomplete-search>\r\n}\r\n<div class=\"flex flex-col gap-3\">\r\n  @for (spxSection of spxForm().sections; track spxSection; let spxSectionIndex = $index) {\r\n    <spx-form-section\r\n      [spxShowTitle]=\"!spxSection.showTitle || spxSection.showTitle()\"\r\n      [spxIndex]=\"spxSectionIndex + 1\"\r\n      [spxTitle]=\"spxSection.title ? (spxSection.title() | translate | capitalize) : undefined\">\r\n      @for (spxField of spxSection.fields; track spxField; let spxFieldIndex = $index) {\r\n        @if (spxField.show === undefined || spxField.show()) {\r\n          @if (spxField.type() === typeButton) {\r\n            <spx-button\r\n              [spxFullWidth]=\"true\"\r\n              [spxSeverity]=\"spxField.severity ? spxField.severity() : undefined\"\r\n              [spxType]=\"'button'\"\r\n              (spxClick)=\"onClick(spxField)\"\r\n            >{{ (spxField.label ? spxField.label() : spxField.key) | translate  | capitalize }}</spx-button>\r\n          }\r\n          @if (spxField.type() === typeOverlay || spxField.type() === typeOverlayNumber || spxField.type() === typeFloat || spxField.type() === typeNumber || spxField.type() === typeText || spxField.type() === typeAutocomplete || spxField.type() === typeNumericKeyboard) {\r\n            <spx-input\r\n              [formControl]=\"$any(this.spxFormGroup().get(spxField.key))\"\r\n              [spxAutofocus]=\"spxField.autofocus ? spxField.autofocus() : false\"\r\n              [spxCapitalize]=\"spxField.capitalize ? spxField.capitalize() : false\"\r\n              [spxLabel]=\"(spxField.label ? spxField.label() : spxField.key) | translate  | capitalize\"\r\n              [spxName]=\"spxField.key\"\r\n              [spxPattern]=\"spxField.type() === typeNumericKeyboard ? '\\\\d*' : undefined\"\r\n              [spxReadonly]=\"spxField.readonly ? spxField.readonly() : false\"\r\n              [spxRequired]=\"hasRequiredField(this.spxFormGroup().get(spxField.key)!)\"\r\n              [spxShowSearch]=\"spxField.type() === typeAutocomplete\"\r\n              [spxShowHelp]=\"false\"\r\n              [spxShowValidationMessages]=\"this.spxFormGroup().get(spxField.key)! && this.spxFormGroup().get(spxField.key)!.errors && this.spxFormGroup().get(spxField.key)!.touched\"\r\n              [spxStep]=\"spxField.step ? spxField.step() : undefined\"\r\n              [spxType]=\"spxField.type()\"\r\n              [spxValidators]=\"getRawValidators(this.spxFormGroup().get(spxField.key)!)\"\r\n              [spxSuggestions]=\"spxField.suggestionsFixed ? spxField.suggestionsFixed() : this.spxSuggestions()[spxField.key]\"\r\n              (spxBlur)=\"onBlur(spxField)\"\r\n              (spxSearch)=\"onSearch(spxField)\">\r\n              <spx-validate-control [control]=\"$any(this.spxFormGroup().get(spxField.key))\" [label]=\"(spxField.label ? spxField.label() : spxField.key)| translate  | capitalize\"></spx-validate-control>\r\n            </spx-input>\r\n          }\r\n          @if (spxField.type() === typeRadio) {\r\n            <spx-input\r\n              [formControl]=\"$any(this.spxFormGroup().get(spxField.key))\"\r\n              [spxLabel]=\"(spxField.label ? spxField.label() : spxField.key) | translate | capitalize\"\r\n              [spxName]=\"spxField.key\"\r\n              [spxReadonly]=\"spxField.readonly ? spxField.readonly() : false\"\r\n              [spxRequired]=\"hasRequiredField(this.spxFormGroup().get(spxField.key)!)\"\r\n              [spxShowHelp]=\"false\"\r\n              [spxShowValidationMessages]=\"this.spxFormGroup().get(spxField.key)! && this.spxFormGroup().get(spxField.key)!.errors && this.spxFormGroup().get(spxField.key)!.touched\"\r\n              [spxSuggestions]=\"spxField.suggestionsFixed ? spxField.suggestionsFixed() : this.spxSuggestions()[spxField.key]\"\r\n              [spxType]=\"typeRadio\"\r\n              [spxValidators]=\"getRawValidators(this.spxFormGroup().get(spxField.key)!)\">\r\n              <spx-validate-control [control]=\"$any(this.spxFormGroup().get(spxField.key))\" [label]=\"(spxField.label ? spxField.label() : spxField.key) | translate | capitalize\"></spx-validate-control>\r\n            </spx-input>\r\n          }\r\n        }\r\n        \r\n      }\r\n    </spx-form-section>\r\n  }\r\n\r\n  @for (spxButton of spxForm().buttons; track spxButton) {\r\n    <spx-button\r\n      [spxFullWidth]=\"true\"\r\n      [spxSeverity]=\"spxButton.severity\"\r\n      [spxType]=\"spxButton.type\"\r\n      (spxClick)=\"spxButton.onClick ? spxButton.onClick() : undefined\">\r\n      {{ ((spxButton && spxButton.label) ? spxButton.label() : '') | translate | capitalize }}\r\n    </spx-button>\r\n  }\r\n</div>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"softpak-components-spx-form-view.mjs","sources":["../../../../projects/softpak/components/spx-form-view/spx-form-button-type.enum.ts","../../../../projects/softpak/components/spx-form-view/spx-autocomplete-search.component.ts","../../../../projects/softpak/components/spx-form-view/spx-autocomplete-search.component.html","../../../../projects/softpak/components/spx-form-view/spx-form-view.component.ts","../../../../projects/softpak/components/spx-form-view/spx-form-view.component.html","../../../../projects/softpak/components/spx-form-view/softpak-components-spx-form-view.ts"],"sourcesContent":["export enum SpxFormButtonTypeEnum {\n    button = 'button',\n    submit = 'submit',\n}\n","import { ChangeDetectionStrategy, Component, OnDestroy, OnInit, computed, input, output, signal } from '@angular/core';\nimport { FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { Subscription, debounceTime } from 'rxjs';\n\nimport { SpxFormFieldI } from './spx-form-field.interface';\nimport { SpxFormSectionI } from './spx-form-section.interface';\nimport { SpxButtonComponent } from '@softpak/components/spx-button';\nimport { SpxSeverityEnum, unsubscribeSubscriptions } from '@softpak/components/spx-helpers';\nimport { SpxInputComponent, SpxValuePair, SpxInputTypeEnum } from '@softpak/components/spx-inputs';\n\nexport const sectionAutocompleteSearch = 'autocompleteSearch';\nexport const ctrlQuery = 'query';\nexport const ctrlOptions = 'options';\n\n@Component({\n    selector: 'spx-autocomplete-search',\n    templateUrl: './spx-autocomplete-search.component.html',\n    imports: [\n        FormsModule,\n        ReactiveFormsModule,\n        SpxButtonComponent,\n        SpxInputComponent,\n    ],\n    standalone: true,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SpxAutocompleteSearchComponent implements OnInit, OnDestroy {\n  formGroup = signal<FormGroup | null>(null);\n  readonly spxSuggestions = input<SpxValuePair<any>[]>([]);\n  readonly spxField = input.required<SpxFormFieldI>();\n  readonly txtOptions = input.required<string>();\n  readonly txtQuery = input.required<string>();\n  readonly txtSubmit = input.required<string>();\n  readonly spxValuePair = input.required<SpxValuePair<any>>();\n  spxCancel = output();\n  spxSearch = output<SpxValuePair<any>>();\n  spxSubmit = output<SpxValuePair<any>>();\n  inputTypeRadio = SpxInputTypeEnum.radio;\n  inputTypeText = SpxInputTypeEnum.text;\n  SpxSeverity = SpxSeverityEnum;\n \n  sections: SpxFormSectionI[] = [\n    {\n      key: sectionAutocompleteSearch,\n      showTitle: () => false,\n      fields: [\n        {\n          key: ctrlQuery,\n          type: () => SpxInputTypeEnum.text,\n          label: () => this.txtQuery(),\n          capitalize: () => true,\n        },\n        {\n          key: ctrlOptions,\n          type: () => SpxInputTypeEnum.radio,\n          label: () => this.txtOptions(),\n        },\n      ]\n    }\n  ];\n\n  readonly ctrlQuery = computed(() => this.formGroup()?.get(ctrlQuery) as FormControl);\n  readonly ctrlOptions = computed(() => this.formGroup()?.get(ctrlOptions) as FormControl);\n\n  private subscriptions: {\n    subSelection?: Subscription;\n    subQuery?: Subscription;\n  } = {};\n\n  constructor(readonly formBuilder: FormBuilder) {\n    this.createForm();\n  }\n\n  ngOnInit(): void {\n    this.listenToSelection();\n    this.listenToQuery();\n    const spxValuePair = this.spxValuePair();\n    this.ctrlQuery().setValue(spxValuePair, { emitEvent: false });\n    this.spxSearch.emit(spxValuePair);\n  }\n\n  ngOnDestroy(): void {\n    unsubscribeSubscriptions(this.subscriptions);\n  }\n\n  private createForm(): void {\n    this.formGroup.set(this.formBuilder.group({\n      [ctrlQuery]: [null],\n      [ctrlOptions]: [null],\n    }));\n  }\n\n  getRawValidators(formControl: FormControl) {\n    return (formControl as any)._rawValidators;\n  }\n\n  onCancel(): void {\n    this.spxCancel.emit();\n  }\n  \n  onSubmit(): void {\n    this.spxSubmit.emit(this.ctrlQuery().value);\n  }\n\n  private listenToQuery(): void {\n    this.subscriptions.subQuery = this.ctrlQuery().valueChanges.pipe(debounceTime(500)).subscribe(valuePair => {\n      this.spxSearch.emit(valuePair);\n    });\n  }\n\n  private listenToSelection(): void {\n    this.subscriptions.subSelection = this.ctrlOptions().valueChanges.subscribe(valuePair => {\n      this.ctrlQuery().setValue(valuePair);\n    });\n  }\n}\n","@if(formGroup()) {\n  <form class=\"bg-black fixed pt-16 z-50 top-0 left-0 right-0 bottom-0\" [formGroup]=\"formGroup()!\" (ngSubmit)=\"onSubmit()\">\n    <div class=\"h-full w-full px-3 flex flex-col gap-3\">\n      <div class=\"grow flex flex-col gap-3 overflow-y-auto\">\n        <spx-input [formControl]=\"ctrlQuery()\" [spxLabel]=\"txtQuery()\" [spxType]=\"inputTypeText\">\n        </spx-input>\n        <spx-input [formControl]=\"ctrlOptions()\" [spxLabel]=\"txtOptions()\" [spxSuggestions]=\"spxSuggestions()\"\n          [spxType]=\"inputTypeRadio\">\n        </spx-input>\n      </div>\n      <div class=\"py-3 flex flex-col gap-3\">\n        <spx-button [spxFullWidth]=\"true\" [spxSeverity]=\"SpxSeverity.success\">\n          Save\n        </spx-button>\n        <spx-button [spxFullWidth]=\"true\" [spxSeverity]=\"SpxSeverity.error\" [spxType]=\"'button'\" (spxClick)=\"onCancel()\">\n          Cancel\n        </spx-button>\n      </div>\n    </div>\n  </form>\n}\n","import { ChangeDetectionStrategy, Component, ElementRef, input, output, signal, viewChildren } from '@angular/core';\nimport { SpxFormSectionI } from './spx-form-section.interface';\nimport { AbstractControl, FormBuilder, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { SpxFormFieldI } from './spx-form-field.interface';\nimport { SpxAutocompleteSearchComponent } from './spx-autocomplete-search.component';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { SpxFormI } from './spx-form.interface';\nimport { SpxButtonComponent } from '@softpak/components/spx-button';\nimport { SpxCapitalizePipe } from '@softpak/components/spx-capitalize';\nimport { SpxFormSectionComponent } from '@softpak/components/spx-form-section';\nimport { SpxInputComponent, SpxValuePair, SpxInputTypeEnum } from '@softpak/components/spx-inputs';\nimport { SpxValidateControlComponent } from '@softpak/components/spx-validation';\n\n@Component({\n    selector: 'spx-form-view',\n    imports: [\n        FormsModule,\n        ReactiveFormsModule,\n        SpxAutocompleteSearchComponent,\n        SpxButtonComponent,\n        SpxCapitalizePipe,\n        SpxFormSectionComponent,\n        SpxInputComponent,\n        SpxValidateControlComponent,\n        TranslateModule\n    ],\n    templateUrl: './spx-form-view.component.html',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    standalone: true,\n})\nexport class SpxFormViewComponent {\n  readonly spxFormGroup = input.required<FormGroup>();\n  readonly spxForm = input.required<SpxFormI>();\n  readonly spxSuggestions = input.required<any>();\n  spxBlur = output<{ field: SpxFormFieldI, valuePair: SpxValuePair<any> }>();\n  spxClick = output<{ field: SpxFormFieldI }>();\n  spxSearch = output<{ field: SpxFormFieldI, valuePair: SpxValuePair<any> }>();\n  spxInputs = viewChildren(ElementRef<SpxInputComponent>);\n  autoCompleteField = signal<SpxFormFieldI | null>(null);\n  typeAutocomplete = SpxInputTypeEnum.autocomplete;\n  typeButton = SpxInputTypeEnum.button;\n  typeFloat = SpxInputTypeEnum.float;\n  typeNumber = SpxInputTypeEnum.number;\n  typeRadio = SpxInputTypeEnum.radio;\n  typeText = SpxInputTypeEnum.text;\n  typeNumericKeyboard = SpxInputTypeEnum.textNumericKeyboard;\n  typeOverlay = SpxInputTypeEnum.overlay;\n  typeOverlayNumber = SpxInputTypeEnum.overlayNumber;\n\n  setAutofocus(key: string): void {\n    const field = this.spxInputs().find(input => input.nativeElement.spxName() === key);\n    if (field) {\n      field.nativeElement.setFocusIn();\n    }\n  }\n\n  onBlur(field: SpxFormFieldI) {\n    this.spxBlur.emit({\n      field,\n      valuePair: this.spxFormGroup().get(field.key)!.value,\n    });\n  }\n\n  onClick(field: SpxFormFieldI) {\n    this.spxClick.emit({\n      field,\n    });\n  }\n\n  onAutocompleteCancel(): void {\n    this.autoCompleteField.set(null);\n  }\n\n  onAutocompleteSearch(valuePair: SpxValuePair<any>): void {\n    if (this.autoCompleteField()) {\n      this.spxSearch.emit({\n        field: this.autoCompleteField()!,\n        valuePair,\n      });\n    }\n  }\n\n  onAutocompleteSave(valuePair: SpxValuePair<any>) {\n    this.spxFormGroup().get(this.autoCompleteField()!.key)?.setValue(valuePair);\n    this.autoCompleteField.set(null);\n  }\n\n  onSearch(field: SpxFormFieldI) {\n    this.autoCompleteField.set(field);\n  }\n\n  getRawValidators(formControl: AbstractControl) {\n    // eslint-disable-next-line no-underscore-dangle\n    return (formControl as any)._rawValidators;\n  }\n\n  hasRequiredField(abstractControl: AbstractControl): boolean {\n    if (abstractControl.validator) {\n      const validator = abstractControl.validator({} as AbstractControl);\n      if (validator && validator['required']) {\n        return true;\n      }\n    }\n    if ((abstractControl as any)['controls']) {\n      for (const controlName in (abstractControl as any)['controls']) {\n        if ((abstractControl as any)['controls'][controlName]) {\n          if (this.hasRequiredField((abstractControl as any)['controls'][controlName])) {\n            return true;\n          }\n        }\n      }\n    }\n    return false;\n  }\n\n  static initialFormValue(sections: SpxFormSectionI[]) {\n    const formObject: any = {};\n    sections.forEach(section => {\n      section.fields.forEach(field => {\n        formObject[field.key] = [field.defaultValue ? field.defaultValue() : null, field.validators ? [...field.validators()] : []];\n      });\n    });\n    return formObject;\n  }\n\n  static createForm(formBuilder: FormBuilder, sections: SpxFormSectionI[]): FormGroup {\n    return formBuilder.group(this.initialFormValue(sections));\n  }\n\n  constructor(readonly formBuilder: FormBuilder) {\n  }\n}\n","@if (autoCompleteField()) {\n  <spx-autocomplete-search\n    [spxField]=\"autoCompleteField()!\"\n    [spxSuggestions]=\"this.spxSuggestions()[autoCompleteField()!.key]\"\n    [spxValuePair]=\"$any(this.spxFormGroup().get(autoCompleteField()!.key)).value\"\n    [txtOptions]=\"'Options'\"\n    [txtQuery]=\"'Query'\"\n    [txtSubmit]=\"'Save'\"\n    (spxCancel)=\"onAutocompleteCancel()\"\n    (spxSearch)=\"onAutocompleteSearch($event)\"\n    (spxSubmit)=\"onAutocompleteSave($event)\">\n  </spx-autocomplete-search>\n}\n<div class=\"flex flex-col gap-3\">\n  @for (spxSection of spxForm().sections; track spxSection; let spxSectionIndex = $index) {\n    <spx-form-section\n      [spxShowTitle]=\"!spxSection.showTitle || spxSection.showTitle()\"\n      [spxIndex]=\"spxSectionIndex + 1\"\n      [spxTitle]=\"spxSection.title ? (spxSection.title() | translate | capitalize) : undefined\">\n      @for (spxField of spxSection.fields; track spxField; let spxFieldIndex = $index) {\n        @if (spxField.show === undefined || spxField.show()) {\n          @if (spxField.type() === typeButton) {\n            <spx-button\n              [spxFullWidth]=\"true\"\n              [spxSeverity]=\"spxField.severity ? spxField.severity() : undefined\"\n              [spxType]=\"'button'\"\n              (spxClick)=\"onClick(spxField)\"\n            >{{ (spxField.label ? spxField.label() : spxField.key) | translate  | capitalize }}</spx-button>\n          }\n          @if (spxField.type() === typeOverlay || spxField.type() === typeOverlayNumber || spxField.type() === typeFloat || spxField.type() === typeNumber || spxField.type() === typeText || spxField.type() === typeAutocomplete || spxField.type() === typeNumericKeyboard) {\n            <spx-input\n              [formControl]=\"$any(this.spxFormGroup().get(spxField.key))\"\n              [spxAutofocus]=\"spxField.autofocus ? spxField.autofocus() : false\"\n              [spxCapitalize]=\"spxField.capitalize ? spxField.capitalize() : false\"\n              [spxLabel]=\"(spxField.label ? spxField.label() : spxField.key) | translate  | capitalize\"\n              [spxName]=\"spxField.key\"\n              [spxPattern]=\"spxField.type() === typeNumericKeyboard ? '\\\\d*' : undefined\"\n              [spxReadonly]=\"spxField.readonly ? spxField.readonly() : false\"\n              [spxRequired]=\"hasRequiredField(this.spxFormGroup().get(spxField.key)!)\"\n              [spxShowSearch]=\"spxField.type() === typeAutocomplete\"\n              [spxShowHelp]=\"false\"\n              [spxShowValidationMessages]=\"this.spxFormGroup().get(spxField.key)! && this.spxFormGroup().get(spxField.key)!.errors && this.spxFormGroup().get(spxField.key)!.touched\"\n              [spxStep]=\"spxField.step ? spxField.step() : undefined\"\n              [spxType]=\"spxField.type()\"\n              [spxValidators]=\"getRawValidators(this.spxFormGroup().get(spxField.key)!)\"\n              [spxSuggestions]=\"spxField.suggestionsFixed ? spxField.suggestionsFixed() : this.spxSuggestions()[spxField.key]\"\n              (spxBlur)=\"onBlur(spxField)\"\n              (spxSearch)=\"onSearch(spxField)\">\n              <spx-validate-control [errors]=\"$any(this.spxFormGroup().get(spxField.key)).errors\" [touched]=\"$any(this.spxFormGroup().get(spxField.key)).touched\" [control]=\"$any(this.spxFormGroup().get(spxField.key))\" [label]=\"(spxField.label ? spxField.label() : spxField.key)| translate  | capitalize\"></spx-validate-control>\n            </spx-input>\n          }\n          @if (spxField.type() === typeRadio) {\n            <spx-input\n              [formControl]=\"$any(this.spxFormGroup().get(spxField.key))\"\n              [spxLabel]=\"(spxField.label ? spxField.label() : spxField.key) | translate | capitalize\"\n              [spxName]=\"spxField.key\"\n              [spxReadonly]=\"spxField.readonly ? spxField.readonly() : false\"\n              [spxRequired]=\"hasRequiredField(this.spxFormGroup().get(spxField.key)!)\"\n              [spxShowHelp]=\"false\"\n              [spxShowValidationMessages]=\"this.spxFormGroup().get(spxField.key)! && this.spxFormGroup().get(spxField.key)!.errors && this.spxFormGroup().get(spxField.key)!.touched\"\n              [spxSuggestions]=\"spxField.suggestionsFixed ? spxField.suggestionsFixed() : this.spxSuggestions()[spxField.key]\"\n              [spxType]=\"typeRadio\"\n              [spxValidators]=\"getRawValidators(this.spxFormGroup().get(spxField.key)!)\">\n              <spx-validate-control [errors]=\"$any(this.spxFormGroup().get(spxField.key)).errors\" [touched]=\"$any(this.spxFormGroup().get(spxField.key)).touched\" [control]=\"$any(this.spxFormGroup().get(spxField.key))\" [label]=\"(spxField.label ? spxField.label() : spxField.key) | translate | capitalize\"></spx-validate-control>\n            </spx-input>\n          }\n        }\n        \n      }\n    </spx-form-section>\n  }\n\n  @for (spxButton of spxForm().buttons; track spxButton) {\n    <spx-button\n      [spxFullWidth]=\"true\"\n      [spxSeverity]=\"spxButton.severity\"\n      [spxType]=\"spxButton.type\"\n      (spxClick)=\"spxButton.onClick ? spxButton.onClick() : undefined\">\n      {{ ((spxButton && spxButton.label) ? spxButton.label() : '') | translate | capitalize }}\n    </spx-button>\n  }\n</div>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}