ngx-t-forms 2.0.25 → 2.0.27

package/fesm2022/ngx-t-forms-form-section-stepper.component-Bg9eGmgN.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"ngx-t-forms-form-section-stepper.component-Bg9eGmgN.mjs","sources":["../../../projects/ngx-t-forms/src/lib/components/form-builder/elements/form-section-stepper/form-section-stepper.component.ts","../../../projects/ngx-t-forms/src/lib/components/form-builder/elements/form-section-stepper/form-section-stepper.component.html"],"sourcesContent":["import { CommonModule } from '@angular/common';\r\nimport { ChangeDetectorRef, Component, inject, OnInit, ViewChild } from '@angular/core';\r\nimport { MatModulesModule } from '../../../../shared/modules/mat-modules.module';\r\nimport { filter, map, Observable, Subject, take, takeUntil, tap, timer } from 'rxjs';\r\nimport { ReactiveFormsModule, FormsModule } from '@angular/forms';\r\nimport { StepperSelectionEvent, StepState } from '@angular/cdk/stepper';;\r\nimport { MatStepper } from '@angular/material/stepper';\r\n\r\nimport { FormsStoreService } from '../../../forms/store/forms-store.service';\r\nimport { TFormInputComponent } from '../../..';\r\n\r\nimport { FormTowerControllerService } from '../../../../services/core/t-form-tower-controller/form-tower-controller.service';\r\nimport { FormBuilderFunctions, FormColumnInputs, IMultipleInputCal, ITowerFormSteps, validateFormColumnInputs } from 'ngx-t-forms-types';\r\nimport { _isEqual } from '../../../../shared/functions/isEqual';\r\nimport { TourMatMenuModule } from 'ngx-ui-tour-md-menu';\r\nimport { getSubmissionStatusFn } from '../../../../services/core/t-form-tower-controller/functions/getSubmissionStatus';\r\nimport { CdkDragDrop } from '@angular/cdk/drag-drop';\r\nimport { SectionReportComponent } from '../section-report/section-report.component';\r\nimport { TourManagerService } from '../../../../services/core/tour/tour-manager.service';\r\n\r\n\r\n@Component({\r\n  selector: 'app-form-section-stepper',\r\n  standalone: true,\r\n  imports: [\r\n    CommonModule,\r\n    MatModulesModule,\r\n    TFormInputComponent,\r\n    TourMatMenuModule,\r\n    ReactiveFormsModule,\r\n    FormsModule,\r\n    SectionReportComponent\r\n  ],\r\n  templateUrl: './form-section-stepper.component.html',\r\n  styleUrl: './form-section-stepper.component.scss',\r\n\r\n})\r\nexport class FormSectionStepperComponent extends FormTowerControllerService implements OnInit {\r\n\r\n\r\n  /**\r\n   * Handles the key down event and opens the application log if the key combination is pressed.\r\n   * @param event The keyboard event object.\r\n   */\r\n  onKeyDown(event: KeyboardEvent) {\r\n    if (event.ctrlKey && event.key === 'z') {\r\n      // Handle the key press combination here\r\n      this.revertBackHistory()\r\n    }\r\n  }\r\n\r\n\r\n  ngOnInit(): void {\r\n    this.store.registerFormChangeFn(this.initialize)\r\n    this.store.selectors.selectFormInEdit$.pipe(\r\n      take(1),\r\n      filter(form => form !== null && form !== undefined),\r\n      tap(form => this.initialize(form.form))\r\n    ).subscribe()\r\n  }\r\n\r\n  private store: FormsStoreService = inject(FormsStoreService)\r\n  loadingForm$ = this.store.selectors.selectLoadingForm$\r\n  selectInputInEditId$ = this.store.selectors.selectInputInEditId$\r\n  isEditable = true\r\n  @ViewChild('stepper') stepper: MatStepper | undefined;\r\n\r\n\r\n\r\n  get formBuilderFunctions() {\r\n    return {\r\n      getLatestAccountTree: () => this.NGX_T_FORMS_CONFIG.formBuilder.getScoaTree(),\r\n      getSCOAAccount: (SCOAAccount: string) => this.NGX_T_FORMS_CONFIG.formBuilder.getSCOAAccount(SCOAAccount),\r\n      multipleInputToggleForm: this.toggleMultipleInput.bind(this),\r\n      multipleInputSaveForm: this.saveMultipleInputForm.bind(this),\r\n      editInput: this.editInput.bind(this),\r\n      deleteInput: this.formDeleteInput.bind(this),\r\n      addFunction: this.addMultipleInputValueCalculationFunction.bind(this),\r\n      reorderItems: this.reorderMultipleInputItems.bind(this),\r\n      multipleInputToggleLabel: this.multipleInputToggleLabel.bind(this),\r\n      multipleInputEditRow: this.multipleInputEditRow.bind(this),\r\n      multipleInputDuplicateRow: this.multipleInputDuplicateRow.bind(this),\r\n\r\n    } as unknown as FormBuilderFunctions\r\n  }\r\n  getPreviousStepLabel(): string | undefined {\r\n\r\n    if (this.stepper === undefined) return ''\r\n    const currentIndex = this.stepper?.selectedIndex;\r\n    if (currentIndex > 0) {\r\n      return this.selectFormSteps()?.[currentIndex - 1]?.label;\r\n    }\r\n    return '';\r\n  }\r\n\r\n  getNextStepLabel(): string | undefined {\r\n    if (this.stepper === undefined) return ''\r\n    const currentIndex = this.stepper?.selectedIndex;\r\n    const steps = this.selectFormSteps();\r\n    if (!steps) return ''\r\n    if (currentIndex < steps.length - 1) {\r\n      return steps[currentIndex + 1]?.label;\r\n    }\r\n    return '';\r\n  }\r\n  getStepState(step: any, index: number): StepState {\r\n    const activeStep = this.stepper?.selectedIndex === index;\r\n    if (activeStep) return 'edit';\r\n    if (step.sectionForm?.touched && !step.sectionForm?.valid) return 'error'; // Show error state for invalid touched forms\r\n    if (step.sectionForm?.valid) return 'done'; // Show done state for valid forms\r\n\r\n    return 'number';\r\n  }\r\n  activeInput: string | undefined\r\n  get getSubmissionStatus$(): Observable<string> {\r\n    const progress = this.formProgress() || 0;\r\n    const steps = this.selectFormSteps();\r\n    return this.loadingForm$.pipe(\r\n      map(loading =>\r\n        getSubmissionStatusFn(this.stepper, this.mainForm, progress, steps, loading)\r\n      )\r\n    )\r\n  }\r\n  dragging: boolean = false\r\n\r\n  drop = (event: any) => this.store.actionsFormBuilder.handleSectionDragDrop(event)\r\n  dropItems = (event: any, sectionId: string) => this.store.actionsFormBuilder.handleInputDragDrop(event, sectionId)\r\n  formDeleteSection = (sectionId: string) => this.store.actionsFormBuilder.formDeleteSection(sectionId)\r\n  formDeleteSectionInputs = (sectionId: string) => this.store.actionsFormBuilder.formDeleteSectionInputs(sectionId)\r\n  addMultipleFormInput = (sectionId: string, multipleInputId: string) => this.store.actionsFormBuilder.addMultipleFormInput(sectionId, multipleInputId)\r\n  moveInputToSection = (inputId: string, targetSectionId: string) => this.store.actionsFormBuilder.moveInputToSection(inputId, targetSectionId)\r\n  reorderMultipleInputItems = (event: CdkDragDrop<FormColumnInputs[], any, any>, multipleInputId: string) => this.store.actionsFormBuilder.reorderMultipleInputItems(event, multipleInputId)\r\n  cloneCopyFormInput = (inputId: string) => this.store.actionsFormBuilder.cloneCopyFormInput(inputId)\r\n\r\n  multipleInputToggleLabel = (item: FormColumnInputs) => this.store.actionsFormBuilder.multipleInputToggleLabel(item)\r\n  editInput = (item: FormColumnInputs) => this.store.actionsFormBuilder.editInput(item)\r\n  addMultipleInputValueCalculationFunction = (item: IMultipleInputCal, multipleInputId: string | undefined) => this.store.actionsFormBuilder.addMultipleInputValueCalculationFunction(item, multipleInputId)\r\n  setActiveSection = ($event: StepperSelectionEvent) => this.setMatActiveStepper($event.selectedIndex)\r\n  addInputToScoaSelection = (sectionId: string, scoaInputId: string) => this.store.actionsFormBuilder.addInputToScoaSelection(sectionId, scoaInputId)\r\n  addNewInput = (sectionId: string) => this.store.actionsFormBuilder.saveInput(sectionId);\r\n\r\n  addSection = (): void => this.store.actionsFormBuilder.handleAddSection()\r\n  setMatActiveStepper = (index: number) => setTimeout(() => {\r\n    if (this.stepper === undefined) return;\r\n    this.stepper.selectedIndex = index\r\n  }, 0);\r\n  mouseOverSection: string | null = null\r\n  handleInput = (event: Event, sectionId: string) => {\r\n    // Cast the event target to HTMLInputElement to access the value property\r\n    console.error('handleInput', event, sectionId)\r\n    const inputValue = (event.target as HTMLInputElement).value;\r\n\r\n    // Pass the input value to the store action\r\n    this.store.actionsFormBuilder?.stepTitleChangeStep(sectionId, inputValue);\r\n    event.stopPropagation();\r\n    event.preventDefault();\r\n\r\n  }\r\n  get selectFormStepsComputed(): ITowerFormSteps[] {\r\n    const steps = this.selectFormSteps().map(\r\n      (step) => (\r\n        {\r\n          ...step,\r\n          columns: step.columns.map(\r\n            (col) => {\r\n              return ({\r\n                ...col,\r\n\r\n                inputConfigErrors: validateFormColumnInputs(col)\r\n\r\n              })\r\n            }\r\n          )\r\n\r\n        }\r\n      )\r\n    )\r\n\r\n    return steps\r\n  }\r\n  overId: string | null = null\r\n\r\n  countdownSeconds: {\r\n    [key: string]:\r\n    {\r\n      count: number | null,\r\n      stop$: Subject<void>,\r\n      deleteInputs: boolean\r\n\r\n\r\n    }\r\n  } = {}\r\n  stopDeletion(id: string) {\r\n    if (this.countdownSeconds[id]) {\r\n      this.countdownSeconds[id]?.stop$.next();\r\n      delete this.countdownSeconds[id];\r\n    }\r\n  }\r\n  inputWillBeRemovedIn = (id: string) => this.countdownSeconds[id]?.count\r\n  removeInput(item: FormColumnInputs) {\r\n    if (this.countdownSeconds[item.id]) {\r\n      this.stopDeletion(item.id);\r\n      return;\r\n    }\r\n\r\n    this.countdownSeconds[item.id] = {\r\n      count: 5,\r\n      stop$: new Subject<void>(),\r\n      deleteInputs: false\r\n    };\r\n\r\n    const countdown$ = timer(0, 1000).pipe(\r\n      tap((secondsElapsed) => {\r\n        const data = this.countdownSeconds[item.id];\r\n        if (!data) {\r\n          return;\r\n        }\r\n\r\n        const remainingTime = 5 - secondsElapsed;\r\n        if (remainingTime <= 0) {\r\n          this.formDeleteInput(item)\r\n          this.stopDeletion(item.id);\r\n          // Stop and remove timer\r\n          // Actual deletion logic here, e.g., remove the element by id\r\n          // document.getElementById(id)?.remove();\r\n        } else {\r\n          data.count = remainingTime;\r\n        }\r\n      }),\r\n      takeUntil(this.countdownSeconds[item.id]?.stop$!)\r\n    );\r\n\r\n    countdown$?.subscribe({\r\n      complete: () => {\r\n        console.log('Deletion stopped or completed');\r\n      }\r\n    });\r\n  }\r\n  deleteSection(sectionId: string | null,deleteInputs:boolean=false) {\r\n    if (!sectionId) {\r\n      return;\r\n    }\r\n    if (this.countdownSeconds[sectionId]) {\r\n      this.stopDeletion(sectionId);\r\n      return;\r\n    }\r\n\r\n    this.countdownSeconds[sectionId] = {\r\n      count: 5,\r\n      stop$: new Subject<void>(),\r\n      deleteInputs: deleteInputs\r\n    };\r\n\r\n    const countdown$ = timer(0, 1000).pipe(\r\n      tap((secondsElapsed) => {\r\n        const data = this.countdownSeconds[sectionId];\r\n        if (!data) {\r\n          return;\r\n        }\r\n\r\n        const remainingTime = 5 - secondsElapsed;\r\n        if (remainingTime <= 0) {\r\n          if(data.deleteInputs) {\r\n            this.formDeleteSectionInputs(sectionId)\r\n          }else {\r\n            this.formDeleteSection(sectionId)\r\n          }\r\n      \r\n          this.stopDeletion(sectionId);\r\n          // Stop and remove timer\r\n          // Actual deletion logic here, e.g., remove the element by id\r\n          // document.getElementById(id)?.remove();\r\n        } else {\r\n          data.count = remainingTime;\r\n        }\r\n      }),\r\n      takeUntil(this.countdownSeconds[sectionId]?.stop$!)\r\n    );\r\n\r\n    countdown$?.subscribe({\r\n      complete: () => {\r\n        console.log('Deletion stopped or completed');\r\n      }\r\n    });\r\n  }\r\n  \r\n  getPlaceHolerForSection = (sectionId: string): any => this.store.sectionPlaceholder[sectionId]\r\n  formDeleteInput = (item: FormColumnInputs) => this.store.actionsFormBuilder.formDeleteInput(item)\r\n  openSectionReports: Record<string, boolean> = {}\r\n  toggleSectionReports = (sectionId: string) => this.openSectionReports[sectionId] = !this.openSectionReports[sectionId]\r\n  ref = inject(ChangeDetectorRef)\r\n  refresh() {\r\n    // trigger angular a change detection cycle manually\r\n    this.ref.markForCheck();\r\n    this.ref.detectChanges();\r\n\r\n  }\r\n  sectionIncludesDefault(columns: FormColumnInputs[]): boolean {\r\n    return columns.some((col) => col.systemDefault);\r\n  }\r\n  tourManagerService = inject(TourManagerService)\r\n  startTour(sectionId: string): void {\r\n    const tourOptions = this.selectAllFormTours().filter((step) => step.sectionId === sectionId)\r\n\r\n    this.tourManagerService.startTourByOption(tourOptions)\r\n  }\r\n\r\n  onSpaceKey(event: Event, sectionId: string) {\r\n    const inputValue = (event.target as HTMLInputElement).value;\r\n    this.store.actionsFormBuilder?.stepTitleChangeStep(sectionId, inputValue + ' ');\r\n    event.stopPropagation();\r\n    event.preventDefault();\r\n  }\r\n\r\n\r\n}\r\n","<mat-card class=\"mainCard\" appearance=\"raised\">\r\n\r\n  @if (loadingForm$|async) {\r\n  <div class=\"loading-container\">\r\n    <mat-spinner diameter=\"48\" aria-label=\"Loading form\" />\r\n  </div>\r\n  }\r\n  <mat-stepper [style.display]=\"(loadingForm$|async)?'none':'block'\" #stepper class=\"form-stepper\"\r\n    orientation=\"vertical\" [linear]=\"!isEditable\" aria-label=\"Form sections stepper\" [animationDuration]=\"'300'\"\r\n    cdkDropList #formSections=\"cdkDropList\" [cdkDropListData]=\"selectFormStepsComputed\"\r\n    (cdkDropListDropped)=\"drop($event)\" (selectionChange)=\"handleStepChange($event)\">\r\n\r\n    @for (step of selectFormStepsComputed; track step.sectionId) {\r\n    @if(step.sectionForm || getPlaceHolerForSection(step.sectionId)){\r\n    <mat-step [stepControl]=\"step.sectionForm || getPlaceHolerForSection(step.sectionId) \"\r\n      [completed]=\"step.sectionIsSeen && !step.sectionIsInvalid\" [editable]=\"isEditable\"\r\n      [errorMessage]=\"step.sectionFormErrorMessage||''\" [state]=\"getStepState(step,$index)\"\r\n      [hasError]=\"!step.sectionForm?.valid && !!step.sectionForm?.touched\">\r\n      <ng-template matStepLabel>\r\n        <div cdkDrag class=\"step-label-container \" [attr.aria-label]=\"'Section ' + step.label\">\r\n          <span class=\"step-label-text\">\r\n\r\n            <input (input)=\"handleInput($event,step.sectionId)\" class=\"section-title-input\" matInput\r\n              (keydown.space)=\"onSpaceKey($event,step.sectionId)\" placeholder=\"Enter section title\"\r\n              [value]=\"step.label \">\r\n          </span>\r\n          @if (step.sectionIsSeen) {\r\n          <mat-icon [class.error]=\"step.sectionIsInvalid\"\r\n            [attr.aria-label]=\"step.sectionIsInvalid ? 'Section has errors' : 'Section completed'\">\r\n            {{step.sectionIsSeen}}\r\n          </mat-icon>\r\n          }\r\n          <span class=\"tour-trigger \" *ngIf=\"(step)?.activeSectionHasTour&&!!step.isActive \">\r\n            <button tourAnchor=\"Form-Tour-trigger\" (click)=\"startTour(step.sectionId)\" matTooltip=\"Start section tour\"\r\n              mat-flat-button>\r\n              <mat-icon>tour</mat-icon>\r\n            </button>\r\n          </span>\r\n          <span class=\"spacer\"></span>\r\n\r\n          @if(!!inputWillBeRemovedIn(step.sectionId) ){\r\n          <button (mouseover)=\"overId = step.sectionId\" (mouseout)=\"overId = null\"\r\n            (click)=\"deleteSection(step.sectionId)\" color=\"warn\" mat-stroked-button>\r\n            <div style=\"display: flex; align-items: center;gap:4px;padding:8px;\">\r\n              <mat-progress-spinner style=\"margin-right: 5px;\" color=\"primary\" class=\"cancelProgress\"\r\n                [value]=\"((inputWillBeRemovedIn(step.sectionId)||0)/5)*100\">\r\n              </mat-progress-spinner>\r\n              {{overId === step.sectionId ? 'Click to cancel':'Deleting in'}}\r\n              {{inputWillBeRemovedIn(step.sectionId)}}\r\n            </div>\r\n          </button>\r\n          }\r\n        \r\n          <button (click)=\"$event.stopPropagation();\"\r\n            [matMenuTriggerData]=\"{sectionId:step.sectionId,columns: step.columns}\" [matMenuTriggerFor]=\"sectionMenu\"\r\n            color=\"primary\" mat-icon-button>\r\n            <mat-icon>\r\n              <!-- {{section.sectionId === ( activeSectionId())? 'expand_circle_down':'more_horiz'}} -->\r\n              more_horiz\r\n            </mat-icon>\r\n          </button>\r\n        </div>\r\n      </ng-template>\r\n\r\n      @defer (on viewport; prefetch on idle) {\r\n      <div class=\"step-content\">\r\n        @if(!openSectionReports[step.sectionId]){\r\n        <div (cdkDropListDropped)=\"dropItems($event,step.sectionId)\" [cdkDropListData]=\"step.columns\" cdkDropList\r\n          #InputList=\"cdkDropList\" class=\"row form-section\">\r\n          @for (col of step.columns; track col.id) {\r\n          <mat-card cdkDrag (cdkDragStarted)=\"dragging =true\" (cdkDragReleased)=\"dragging =false\"\r\n            [class.inEditCol]=\"(selectInputInEditId$|async) === col.id\"\r\n            [class]=\"'box inputCard col-md-'+(dragging?'12':col.colSize)\" (mouseover)=\"activeInput =col.id\">\r\n            <div class=\"custom-placeholder\" *cdkDragPlaceholder></div>\r\n            @if(step.sectionForm){\r\n            <lib-t-form-input [editorMode]=\"true\" [tourAnchor]=\"col.id\" (valueChange)=\"updateValue(col.id,$event)\"\r\n              [formBuilderFunctions]=\"formBuilderFunctions\" [inputConfig]=\"col\" [formGroup]=\"step.sectionForm\"\r\n              [attr.aria-label]=\"col?.label || ''\">\r\n            </lib-t-form-input>\r\n            }\r\n\r\n\r\n\r\n            @if (col.inputConfigErrors.length > 0) {\r\n            <div class=\"error\">\r\n\r\n              <ul style=\"\r\n          padding-left: 28px;\">\r\n                @for(error of col.inputConfigErrors;track error.key+error.message){\r\n                <li style=\"color:var(--mat-sys-error)\">{{error.message}}</li>\r\n                }\r\n              </ul>\r\n\r\n            </div>\r\n            }\r\n            <mat-card-actions *ngIf=\"activeInput === col.id\">\r\n\r\n              <button color=\"primary\" [matTooltip]=\"'Edit ' + col.label +' input'\" (click)=\"editInput(col)\"\r\n                mat-icon-button>\r\n                <mat-icon>\r\n                  edit\r\n                </mat-icon>\r\n\r\n              </button>\r\n\r\n              <button [matTooltip]=\"'Move this input to another section'\" moveInput [matMenuTriggerFor]=\"moveInput\"\r\n                [matMenuTriggerData]=\"col\" mat-icon-button>\r\n\r\n                <mat-icon>\r\n                  drive_file_move\r\n                </mat-icon>\r\n              </button>\r\n\r\n              <button [matTooltip]=\"'Clone/ copy form input'\" (click)=\"cloneCopyFormInput(col.id)\" moveInput\r\n                mat-icon-button>\r\n\r\n                <mat-icon>\r\n                  file_copy\r\n                </mat-icon>\r\n              </button>\r\n\r\n              <span class=\"spacer\"></span>\r\n\r\n\r\n\r\n              @if(!!inputWillBeRemovedIn(col.id) ){\r\n              <button (mouseover)=\"overId = col.id\" (mouseout)=\"overId = null\" (click)=\"removeInput(col)\" color=\"warn\"\r\n                mat-stroked-button>\r\n                <div style=\"display: flex; align-items: center;\">\r\n                  <mat-progress-spinner style=\"margin-right: 5px;\" color=\"primary\" class=\"cancelProgress\"\r\n                    [value]=\"((inputWillBeRemovedIn(col.id)||0)/5)*100\">\r\n                  </mat-progress-spinner>\r\n\r\n                  {{overId === col.id ? 'Click to cancel':'Deleting in'}} {{inputWillBeRemovedIn(col.id)}}\r\n                </div>\r\n\r\n              </button>\r\n\r\n              }@else if (col.systemDefault !==true) { <button color=\"warn\"\r\n                [matTooltip]=\"'Delete '+ col.label + ' input'\" (click)=\"removeInput(col)\" mat-icon-button>\r\n\r\n                <mat-icon>\r\n                  delete\r\n                </mat-icon>\r\n              </button>}\r\n\r\n\r\n              @if (activeInput === col.id && col.element ==='multipleInput') {\r\n\r\n              <button matTooltip=\"Add input to list control form\" (click)=\"addMultipleFormInput(col.sectionId,col.id)\"\r\n                color=\"accent\" mat-flat-button>\r\n                <mat-icon>add</mat-icon>\r\n                Add Form Input\r\n              </button>\r\n              }\r\n              @if (activeInput === col.id && col.element ==='mscoaSelection') {\r\n\r\n              <button matTooltip=\"Extend SCOA Segments with additional inputs\"\r\n                (click)=\"addInputToScoaSelection(col.sectionId,col.id)\" color=\"accent\" mat-flat-button>\r\n                <mat-icon>add</mat-icon>\r\n                Add Form Input\r\n              </button>\r\n              }\r\n\r\n            </mat-card-actions>\r\n          </mat-card>\r\n          }\r\n        </div>\r\n        <section style=\"text-align: center;\">\r\n          <br>\r\n          Add form fields to this section to collect information.\r\n          <br>\r\n          Click the <strong>\"Add Input\"</strong> button below to create a new form field.\r\n          <div>\r\n            <button matTooltip=\"Add an input to this section\" (click)=\"addNewInput(step.sectionId)\" color=\"accent\"\r\n              mat-flat-button>\r\n              <mat-icon>add</mat-icon>\r\n              Add Input\r\n            </button>\r\n          </div>\r\n        </section>\r\n\r\n\r\n        }@else {\r\n        <app-section-report [sectionId]=\"step.sectionId \"></app-section-report>\r\n        }\r\n        <div class=\"step-actions\">\r\n          @if(!$first) {\r\n          <button mat-button matStepperPrevious type=\"button\" class=\"navigation-button\"\r\n            [attr.aria-label]=\"'Go back to ' + getPreviousStepLabel()\">\r\n\r\n            Back\r\n          </button>\r\n          }\r\n          @if (!$last) {\r\n          <button mat-flat-button matStepperNext color=\"primary\" type=\"button\" class=\"navigation-button\"\r\n            matTooltip=\"Continue to next section\" [attr.aria-label]=\"'Continue to ' + getNextStepLabel()\">\r\n            Next\r\n          </button>\r\n          }\r\n          @if (!!$last) {\r\n          <button mat-button (click)=\"stepper.reset()\">Reset</button>\r\n          }\r\n\r\n        </div>\r\n      </div>\r\n      } @placeholder {\r\n      <div style=\"padding: 50px;display:flex;justify-content:center;align-items:center; text-align: center;\">\r\n        <mat-spinner diameter=\"24\" />\r\n      </div>\r\n      }\r\n\r\n    </mat-step>\r\n    }\r\n    }\r\n  </mat-stepper>\r\n  <section style=\"text-align: center;\">\r\n    <br>\r\n    A form section helps organize related input fields together.\r\n    <br>\r\n    Click the <strong>\"Add Section\"</strong> button below to create a new section.\r\n  </section>\r\n  <mat-card-actions style=\"position: sticky;bottom: 0;\">\r\n    <span class=\"spacer\"></span>\r\n    <button (click)=\"addSection()\" color=\"accent\" mat-flat-button>\r\n      <mat-icon>add</mat-icon>\r\n      Add Section\r\n    </button>\r\n    <span class=\"spacer\"></span>\r\n  </mat-card-actions>\r\n  <!-- Defer the footer toolbar until after the main form is loaded -->\r\n  @defer (on idle; prefetch on viewport) {\r\n  <footer><mat-toolbar class=\"submission-toolbar\" role=\"toolbar\" aria-label=\"Form submission actions\">\r\n      <span class=\"submission-status\" role=\"status\">\r\n        {{getSubmissionStatus$|async}}\r\n      </span>\r\n      <button mat-raised-button color=\"primary\" [disabled]=\"true\" aria-label=\"Submit form\">\r\n        <span>\r\n          {{ formSubmissionMessage()}}\r\n        </span>\r\n        @if(submittingForm){\r\n        <mat-spinner diameter=\"10\"></mat-spinner>\r\n        }\r\n\r\n      </button>\r\n    </mat-toolbar>\r\n  </footer>\r\n  } @placeholder {\r\n  <!-- Simple placeholder for the footer that maintains layout -->\r\n  <footer>\r\n    <div class=\"submission-toolbar-placeholder\"></div>\r\n  </footer>\r\n  }\r\n\r\n</mat-card>\r\n<mat-menu #sectionMenu=\"matMenu\">\r\n  <ng-template matMenuContent let-sectionId=\"sectionId\" let-columns=\"columns\">\r\n    <!-- <button mat-menu-item [matMenuTriggerFor]=\"sectionType\">\r\n    <mat-icon> disabled_visible</mat-icon>\r\n    Set visibility type</button> -->\r\n    @if (sectionIncludesDefault(columns) === false) {\r\n    <button (click)=\"deleteSection(sectionId,false)\" matTooltip=\"Deletes this section and all its inputs\"\r\n      matTooltipPosition=\"right\" mat-menu-item>\r\n      <mat-icon style=\"color: var(--mat-sys-error);\">delete</mat-icon>\r\n      <span style=\"color: var(--mat-sys-error);\"> Delete section</span>\r\n\r\n    </button>\r\n    <button (click)=\"deleteSection(sectionId,true)\" matTooltip=\"Deletes all inputs in this section\"\r\n      matTooltipPosition=\"right\" mat-menu-item>\r\n      <mat-icon style=\"color: var(--mat-sys-error);\">delete_sweep</mat-icon>\r\n      <span style=\"color: var(--mat-sys-error);\">\r\n        Delete section inputs\r\n      </span>\r\n\r\n    </button>\r\n    }\r\n\r\n    <button (click)=\"toggleSectionReports(sectionId)\" mat-menu-item>\r\n      <mat-icon>leaderboard</mat-icon>\r\n      {{openSectionReports[sectionId]?'Close report': 'Section report'}}</button>\r\n  </ng-template>\r\n</mat-menu>\r\n<mat-menu #sectionType=\"matMenu\">\r\n  <button mat-menu-item>\r\n    <mat-icon>visibility</mat-icon>\r\n    view only</button>\r\n  <button mat-menu-item>\r\n    <mat-icon>visibility_off</mat-icon>\r\n    system</button>\r\n  <button mat-menu-item>\r\n    <mat-icon>edit</mat-icon>\r\n    user edit</button>\r\n</mat-menu>\r\n<mat-menu #moveInput=\"matMenu\">\r\n  <ng-template matMenuContent let-id=\"id\" let-sectionId=\"sectionId\">\r\n    @for (section of ( selectFormStepsComputed); track section.sectionId) {\r\n    <button [disabled]=\"section.sectionId === sectionId\" (click)=\"moveInputToSection(id,section.sectionId)\"\r\n      mat-menu-item>\r\n      <mat-icon>folder</mat-icon>\r\n      {{section.label || 'Untitled section'}}\r\n    </button>\r\n    }\r\n\r\n  </ng-template>\r\n</mat-menu>\r\n\r\n\r\n<pre>\r\n  <sub>\r\n    {{ this.mainForm?.value | json}}\r\n  </sub>\r\n \r\n</pre>"],"names":["i1","i2","i3","i4","i5","i6","i7","i8","i9","i10","i11","i12","i13"],"mappings":"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"}

package/fesm2022/ngx-t-forms-forms-builder-menu.component-jn9-yVbI.mjs

@@ -1,348 +0,0 @@
-import * as i2$2 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i0 from '@angular/core';
-import { inject, Component, computed } from '@angular/core';
-import { g as getAvatar, F as FormsStoreService, M as MatModulesModule, D as DaysAgoPipe, N as NGX_T_FORMS_CONFIG_TOKEN, t as testAgainstItem, a as assignDeepPropertyToObject, T as TDynamicDataEditComponent } from './ngx-t-forms-ngx-t-forms-A9_4GxP6.mjs';
-import { map, combineLatest, take } from 'rxjs';
-import * as i1 from '@angular/material/dialog';
-import { MatDialogRef, MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
-import { MatSnackBar } from '@angular/material/snack-bar';
-import * as i2 from '@angular/material/button';
-import * as i4 from '@angular/material/divider';
-import * as i2$1 from '@angular/material/icon';
-import * as i6 from '@angular/material/list';
-import * as i3 from '@angular/material/progress-spinner';
-import * as i8 from '@angular/material/tooltip';
-import { ElementEditorTypes, SpecialElementKeys, validateApiDataFetchingConfiguration } from 'ngx-t-forms-types';
-import { toSignal } from '@angular/core/rxjs-interop';
-import * as i5 from '@angular/material/expansion';
-import * as i2$3 from '@angular/material/select';
-import * as i10 from '@angular/material/toolbar';
-import * as i3$2 from '@angular/material/badge';
-import * as i2$5 from '@angular/material/menu';
-import * as i12 from '@angular/cdk/clipboard';
-import * as i2$4 from '@angular/cdk/drag-drop';
-import * as i3$1 from '@angular/material/card';
-
-class SelectFormTemplateComponent {
-    constructor(store) {
-        this.store = store;
-        this.selectForms$ = this.store.selectors.selectForms$;
-        this.selectLoadingForms$ = this.store.selectors.selectLoadingForms$;
-        this.dialogRef = inject((MatDialogRef));
-        this.data = inject(MAT_DIALOG_DATA);
-        this.dialog = inject(MatDialog);
-        this.snackBar = inject(MatSnackBar);
-    }
-    ngOnInit() {
-        this.store.effects.loadForms$();
-    }
-    close() {
-        this.dialogRef.close();
-    }
-    selectForm(form) {
-        this.store.actionsFormBuilder.applyFormTemplate(form);
-        this.dialogRef.close(form);
-    }
-    getFormAvatar(formTitle) {
-        return getAvatar(formTitle);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SelectFormTemplateComponent, deps: [{ token: FormsStoreService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SelectFormTemplateComponent, isStandalone: true, selector: "lib-select-form-template", ngImport: i0, template: "<h2 mat-dialog-title>\r\n    Choose a Form Template\r\n</h2>\r\n\r\n    <p>\r\n        Select a pre-built form template to start with. You can customize and save it as your own form after copying \r\n        it to the editor.\r\n    </p>\r\n\r\n    <mat-dialog-content>\r\n        \r\n    @if(selectLoadingForms$ |async){\r\n        <div style=\"display: flex; flex-direction: column; height: calc(100% - 150px); justify-content: center; align-items: center; padding:24px\">\r\n            <mat-spinner style=\"margin-bottom: 16px;\"></mat-spinner>\r\n            <span>\r\n                Loading form templates...\r\n            </span>\r\n        </div>\r\n    }@else {\r\n        <mat-nav-list class=\"form-template-list\">\r\n            @for (form of selectForms$|async; track form._id) {\r\n                     \r\n        <mat-list-item \r\n   (click)=\"selectForm(form)\"\r\n        [matTooltip]=\"'Click to select this template'\"\r\n\r\n         \r\n          [class.mat-elevation-z1]=\"true\"\r\n  \r\n        class=\"form-list-item\">\r\n        <img  [class.error]=\"form.errors.length > 0\" \r\n        matListItemAvatar [src]=\"getFormAvatar(form.formTitle)\" [alt]=\"'form image ' + form.formTitle\">\r\n        <div matListItemTitle class=\"form-item-content\">\r\n          <div class=\"form-title\">{{ form.formTitle | titlecase }}</div>\r\n          <div class=\"form-metadata\">\r\n          \r\n              @if(form.errors.length > 0) {\r\n                <span><mat-icon color=\"warn\">error</mat-icon>   <small>{{ form.errors.length}}</small></span>\r\n                <span class=\"metadata-divider\">\u2022</span>\r\n              }\r\n              <span><mat-icon>add_circle_outline</mat-icon> <small>{{ form.createdAt | daysAgo }}</small> </span>\r\n              <span class=\"metadata-divider\">\u2022</span>\r\n              <span><mat-icon>update</mat-icon><small> {{ form.updatedAt | daysAgo }}</small></span>\r\n             \r\n       \r\n           \r\n          </div>\r\n        </div>\r\n\r\n      </mat-list-item>\r\n      \r\n         \r\n            }\r\n        </mat-nav-list>\r\n        @if((selectForms$|async)?.length === 0){\r\n            <p>\r\n                No form templates available.\r\n            </p>\r\n        }\r\n       \r\n    }\r\n    \r\n    </mat-dialog-content>\r\n\r\n    <mat-divider></mat-divider>\r\n<mat-dialog-actions [align]=\"'end'\">\r\n    <button style=\"width: 100%;\" mat-stroked-button (click)=\"close()\">\r\n        Close\r\n    </button>\r\n  </mat-dialog-actions>", styles: ["p{max-width:368px;padding-right:28px;padding-left:28px}h2{margin-bottom:0}.form-list-item{margin:0;border-radius:8px!important;transition:background-color .2s ease;background:var(--mdc-elevated-card-container-color, var(--mat-app-surface-container-low));height:fit-content!important;min-width:280px;max-width:none;padding-top:8px;padding-bottom:8px}.form-metadata{color:#0009;font-size:.875em;line-height:normal;display:flex;.metadata-divider{margin:0 8px}span{display:inline-flex;gap:4px;mat-icon{font-size:.875em;height:14px;width:14px}}}\n"], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i6.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i6.MatListItemAvatar, selector: "[matListItemAvatar]" }, { kind: "directive", type: i6.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: DaysAgoPipe, name: "daysAgo" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SelectFormTemplateComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-select-form-template', standalone: true, imports: [MatModulesModule, CommonModule, DaysAgoPipe], template: "<h2 mat-dialog-title>\r\n    Choose a Form Template\r\n</h2>\r\n\r\n    <p>\r\n        Select a pre-built form template to start with. You can customize and save it as your own form after copying \r\n        it to the editor.\r\n    </p>\r\n\r\n    <mat-dialog-content>\r\n        \r\n    @if(selectLoadingForms$ |async){\r\n        <div style=\"display: flex; flex-direction: column; height: calc(100% - 150px); justify-content: center; align-items: center; padding:24px\">\r\n            <mat-spinner style=\"margin-bottom: 16px;\"></mat-spinner>\r\n            <span>\r\n                Loading form templates...\r\n            </span>\r\n        </div>\r\n    }@else {\r\n        <mat-nav-list class=\"form-template-list\">\r\n            @for (form of selectForms$|async; track form._id) {\r\n                     \r\n        <mat-list-item \r\n   (click)=\"selectForm(form)\"\r\n        [matTooltip]=\"'Click to select this template'\"\r\n\r\n         \r\n          [class.mat-elevation-z1]=\"true\"\r\n  \r\n        class=\"form-list-item\">\r\n        <img  [class.error]=\"form.errors.length > 0\" \r\n        matListItemAvatar [src]=\"getFormAvatar(form.formTitle)\" [alt]=\"'form image ' + form.formTitle\">\r\n        <div matListItemTitle class=\"form-item-content\">\r\n          <div class=\"form-title\">{{ form.formTitle | titlecase }}</div>\r\n          <div class=\"form-metadata\">\r\n          \r\n              @if(form.errors.length > 0) {\r\n                <span><mat-icon color=\"warn\">error</mat-icon>   <small>{{ form.errors.length}}</small></span>\r\n                <span class=\"metadata-divider\">\u2022</span>\r\n              }\r\n              <span><mat-icon>add_circle_outline</mat-icon> <small>{{ form.createdAt | daysAgo }}</small> </span>\r\n              <span class=\"metadata-divider\">\u2022</span>\r\n              <span><mat-icon>update</mat-icon><small> {{ form.updatedAt | daysAgo }}</small></span>\r\n             \r\n       \r\n           \r\n          </div>\r\n        </div>\r\n\r\n      </mat-list-item>\r\n      \r\n         \r\n            }\r\n        </mat-nav-list>\r\n        @if((selectForms$|async)?.length === 0){\r\n            <p>\r\n                No form templates available.\r\n            </p>\r\n        }\r\n       \r\n    }\r\n    \r\n    </mat-dialog-content>\r\n\r\n    <mat-divider></mat-divider>\r\n<mat-dialog-actions [align]=\"'end'\">\r\n    <button style=\"width: 100%;\" mat-stroked-button (click)=\"close()\">\r\n        Close\r\n    </button>\r\n  </mat-dialog-actions>", styles: ["p{max-width:368px;padding-right:28px;padding-left:28px}h2{margin-bottom:0}.form-list-item{margin:0;border-radius:8px!important;transition:background-color .2s ease;background:var(--mdc-elevated-card-container-color, var(--mat-app-surface-container-low));height:fit-content!important;min-width:280px;max-width:none;padding-top:8px;padding-bottom:8px}.form-metadata{color:#0009;font-size:.875em;line-height:normal;display:flex;.metadata-divider{margin:0 8px}span{display:inline-flex;gap:4px;mat-icon{font-size:.875em;height:14px;width:14px}}}\n"] }]
-        }], ctorParameters: () => [{ type: FormsStoreService }] });
-
-function SubmissionAPIListItemConfig(environment) {
-    return [
-        {
-            id: '16140923-0542-4d5d-9b63-186c1e91b1a7',
-            name: SpecialElementKeys.MatOptionsApiCall,
-            editType: ElementEditorTypes.ApiCall,
-            required: true,
-            postmanCollectionConfig: {
-                collectionUrl: environment['POSTMAN_COLLECTION_URL'],
-                collectionKey: environment['POSTMAN_COLLECTION_KEY']
-            },
-            hint: `APIs are loaded from Postman collection. Configure required headers, payload format, and response mapping before use. Ensure API is documented in Postman.`,
-            deepBind: ['data'],
-            label: 'Select form submission api',
-        },
-        {
-            name: SpecialElementKeys.Default,
-            deepBind: [
-                'data',
-                'backEndConfig',
-                'minimumInputRequired',
-            ],
-            additionalTest: [
-                {
-                    testType: 'exists',
-                    deepBind: [
-                        'data',
-                        'backEndConfig',
-                        'minimumInputRequired',
-                    ],
-                }
-            ],
-            hint: `These are payload fields that are required to be filled in order to fetch data from the selected source`,
-            editType: ElementEditorTypes.RequiredInputs,
-            label: 'Set up required inputs',
-            id: "2d0f1e18-897b-4c28-97bc-3078be09f8ee"
-        },
-        {
-            name: SpecialElementKeys.Default,
-            deepBind: ['data', 'projectFormData'],
-            editType: ElementEditorTypes.Input,
-            label: 'Project form data',
-            hint: `example data:{$formValue}`,
-            id: "$2d0f1e18-897b-4c28-97bc-3078be09f8ee"
-        },
-    ];
-}
-const SubmissionAPIOtherConfig = [
-    {
-        id: "7acaa5d1-fb37-4dc0-9f1a-53b6f36534e0",
-        name: SpecialElementKeys.Default,
-        deepBind: ['submissionHandle', 'submissionMessage'],
-        editType: ElementEditorTypes.Input,
-        label: "Submission Message",
-    },
-    {
-        id: "5636c16c-be58-48d9-b701-81fe05573a39",
-        name: SpecialElementKeys.Default,
-        deepBind: ['submissionHandle', 'innerComponentShowSubmitButton'],
-        editType: ElementEditorTypes.Toggle,
-        label: "Show submit button in inner component form",
-    },
-    {
-        id: "c9103faa-eeba-4cf3-b3d0-f25fd05ccb3c",
-        name: SpecialElementKeys.Default,
-        deepBind: ['systemDefault'],
-        editType: ElementEditorTypes.Toggle,
-        label: "Is system default",
-    }
-];
-const SubmissionDialogConfig = [
-    {
-        titleIcon: 'send',
-        id: '44023662-7343-4c93-999d-fc03c54438c3',
-        title: 'Form Submission Endpoint',
-        description: `Choose where to send your form data after submission. Connect to your database, data pipeline, or
-            third-party service.`,
-        primaryKey: 'submissionAPI',
-        elements: SubmissionAPIOtherConfig
-    },
-    {
-        titleIcon: 'rule',
-        title: 'Data Validationb Rules',
-        description: `Define validation rules to ensure data quality before form submission.
-            <br>
-            <strong>Note:</strong> All validation endpoints must return a boolean value -
-            <code>true</code> indicates valid data that will be submitted.`,
-        primaryKey: 'canSubmitAPI',
-        id: 'acac6045-5b13-4c8d-a7ee-da194ebbad41',
-    }
-];
-
-class FormSubmissionsConfigComponent {
-    getPanelError(panel) {
-        return computed(() => {
-            const form = this.form();
-            if (panel.primaryKey === 'submissionAPI') {
-                return (form?.submissionHandle?.submissionAPI || []).length === 0 ? 'At least one submission API is required' : undefined;
-            }
-            return undefined;
-        });
-    }
-    getFormApis(key) {
-        return computed(() => {
-            const form = this.form();
-            return form?.submissionHandle?.[key] || [];
-        });
-    }
-    // private dialogRef: MatDialogRef<FormSubmissionsConfigComponent>,
-    constructor() {
-        this.NGX_T_FORMS_CONFIG = inject(NGX_T_FORMS_CONFIG_TOKEN);
-        this.panels = computed(() => {
-            return SubmissionDialogConfig.map((panel) => {
-                const error = this.getPanelError(panel)();
-                return ({
-                    ...panel,
-                    error
-                });
-            });
-        });
-        this._data = inject(MAT_DIALOG_DATA);
-        this.store = this._data.store;
-        this.form = toSignal(this.store.selectors.selectFormInEdit$.pipe(map((form) => form?.form)), {
-            initialValue: undefined
-        });
-        this.formInputs = toSignal(this.store.formBuilderSelectors.getAllFormInputs$, {
-            initialValue: []
-        });
-        this.keyInEdit = undefined;
-        this.formValidationError = toSignal(this.store.formBuilderSelectors.formErrors$, {
-            initialValue: []
-        });
-        this.computedErrors = (element) => {
-            return computed(() => {
-                const allErrors = this.formValidationError();
-                const errors = allErrors?.filter(error => error.key === element.deepBind?.join('.')) || [];
-                return [...[], ...errors];
-            });
-        };
-        this.formInputChange = (value, ele) => this.store.actionsFormBuilder.formInputChange(ele, value);
-        this.matDialog = inject(MatDialog);
-    }
-    get submissionApiListItemConfigElements() {
-        return SubmissionAPIListItemConfig(this.NGX_T_FORMS_CONFIG).filter((el) => {
-            if (!el.additionalTest) {
-                return true;
-            }
-            return el.additionalTest.every((test) => {
-                return testAgainstItem(test, this.dataPlaceholder || { data: {} });
-            });
-        });
-    }
-    validationErrors(element) {
-        const val = validateApiDataFetchingConfiguration((this.dataPlaceholder || {})).map((error) => ({
-            message: error.message,
-            key: 'data.' + error.key
-        }));
-        const errors = val?.filter(error => error.key === element.deepBind?.join('.')) || [];
-        return errors;
-    }
-    elementBlur(event, element) {
-        console.info("[Admin Panel Input Element Editor] element blur", event);
-    }
-    inputChange(event, element) {
-        console.info("[Admin Panel Input Element Editor] input changed", event);
-        this.elementConfigurationChanged(event, element);
-        // this.elementConfigurationChanged(event?.target?.value, element)
-    }
-    passFormChanges(event, element) {
-        console.error("[Admin Panel Input Element Editor] pass form changes", event);
-        this.formInputChange(event, element);
-    }
-    elementConfigurationChanged(value, ele) {
-        const applyTo = { ...this.dataPlaceholder };
-        if (ele.clearOnChange) {
-            ele.clearOnChange.forEach((clear) => {
-                assignDeepPropertyToObject(applyTo, clear, undefined);
-            });
-        }
-        if (ele.deepBind) {
-            assignDeepPropertyToObject(applyTo, ele.deepBind, value);
-        }
-        this.dataPlaceholder = {
-            ...applyTo
-        };
-        // const formClass= this.formBuilder$$.value
-        // const form = formClass?.form
-        // if (form) {
-        //   formClass?.refreshController(form)
-        // }
-        // this.formBuilder$$.value?.syncInputController();
-        // this.appStatesService.TFormBuilderService$.next(formClass)
-    }
-    addNewSubmitApi(submision) {
-        this.dataPlaceholder = {
-            data: {}
-        };
-        this.keyInEdit = submision;
-    }
-    saveSubmitApi() {
-        this.store.actionsFormBuilder.saveSubmitApi(this.dataPlaceholder, this.keyInEdit);
-        this.dataPlaceholder = undefined;
-        this.keyInEdit = undefined;
-    }
-    removeSubmissionApi(api) {
-        this.store.actionsFormBuilder.removeSubmissionApi(api, this.keyInEdit);
-        this.dataPlaceholder = undefined;
-        this.keyInEdit = undefined;
-    }
-    cancelSubmitApi() {
-        this.dataPlaceholder = undefined;
-        this.keyInEdit = undefined;
-    }
-    close() {
-        //close mat dialog
-        this.matDialog.closeAll();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FormSubmissionsConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: FormSubmissionsConfigComponent, isStandalone: true, selector: "app-form-submissions-config", ngImport: i0, template: "<div class=\"container\">\r\n  <mat-toolbar>\r\n    <span style=\"font-size:0.875em\">\r\n          Form Submission Configuration\r\n    </span>\r\n\r\n    <span class=\"spacer\"></span>\r\n    <button mat-icon-button mat-dialog-close>\r\n      <mat-icon>\r\n        close\r\n      </mat-icon>\r\n    </button>\r\n  </mat-toolbar>\r\n\r\n  <section style=\"padding: 0px 8px 8px 8px;\">\r\n    <mat-accordion multi>\r\n      @for (panel of panels() ; track panel.id) {\r\n      <mat-expansion-panel [expanded]=\"true\">\r\n        <mat-expansion-panel-header>\r\n          <mat-panel-title> <mat-icon [color]=\"'primary'\" style=\"margin-right: 8px;\">\r\n              {{panel.titleIcon}}\r\n            </mat-icon>\r\n            {{panel.title}}\r\n          </mat-panel-title>\r\n          <mat-divider style=\"    position: absolute;\r\n      bottom: 0px;\r\n      width: 100%;\r\n      left: 0;\"></mat-divider>\r\n        </mat-expansion-panel-header>\r\n        <div class=\"content\">\r\n          <p class=\"description\" [innerHTML]=\"panel.description\"\r\n            style=\"color: var(--mat-text-secondary-color); margin-bottom: 16px;\">\r\n          </p>\r\n          @if ((panel?.elements||[]).length>0) {\r\n          @for (edit of (panel?.elements||[]); track edit.id) {\r\n          <div style=\"background:azure;padding: 8px;\">\r\n            <lib-t-dynamic-data-edit [editorConfig]=\"edit\" [data]=\"form()\"\r\n              [validationErrors]=\"(computedErrors(edit)())||[]\" (valueChange)=\"passFormChanges($event,edit)\"\r\n              [formInputs]=\"(formInputs())||[]\" (blur)=\"elementBlur($event,edit)\">\r\n            </lib-t-dynamic-data-edit>\r\n          </div>\r\n          }\r\n          }\r\n          <div style=\"background:azure;padding: 8px;\">\r\n\r\n            <mat-nav-list>\r\n              <h5 matSubheader [style.color]=\"(panel.error)?'var(--mat-form-field-error-text-color)':''\"\r\n                class=\"api-list-header\">\r\n\r\n                API Endpoints\r\n              </h5>\r\n              @if((getFormApis(panel.primaryKey)()).length === 0){\r\n              <p [style.color]=\"(panel.error)?'var(--mat-form-field-error-text-color)':''\" class=\"no-api-list\">\r\n                No submission endpoints configured. Add one to get started.\r\n              </p>\r\n              }\r\n              @for (api of getFormApis(panel.primaryKey)(); track api._id) {\r\n\r\n              <mat-list-item class=\"api-list-item\">\r\n                <span matListItemIcon class=\"tag\" [style.color]=\"api.httpMethod === 'POST' ? 'green' : 'blue'\">\r\n\r\n                  {{api.httpMethod}}\r\n\r\n                </span>\r\n\r\n                <div matListItemTitle>\r\n                  <div style=\"line-height: normal;\">\r\n                    <small>\r\n                      <strong>\r\n                        {{api.name}}\r\n                      </strong>\r\n                    </small>\r\n\r\n                  </div>\r\n                  <div style=\"line-height: normal;opacity: 0.6;\">\r\n                    <small>\r\n                      {{api.httpEndPoint}}\r\n                    </small>\r\n                  </div>\r\n                </div>\r\n                <span matListItemMeta>\r\n                  <button (click)=\"removeSubmissionApi(api)\" mat-icon-button>\r\n                    <mat-icon>delete</mat-icon>\r\n                  </button>\r\n                </span>\r\n              </mat-list-item>\r\n              <mat-divider>\r\n              </mat-divider>\r\n\r\n\r\n\r\n              }\r\n\r\n\r\n            </mat-nav-list>\r\n\r\n            @if( keyInEdit !== panel.primaryKey ){\r\n            <mat-toolbar style=\"background:none\">\r\n              <button (click)=\"addNewSubmitApi(panel.primaryKey)\" style=\"width:100% ;\" color=\"primary\"\r\n                mat-stroked-button>Add new\r\n                endpoint</button>\r\n            </mat-toolbar>\r\n            }\r\n            @if ((panel.error)) {\r\n\r\n            <mat-error>\r\n              {{panel.error}}\r\n            </mat-error>\r\n\r\n            }\r\n\r\n          </div>\r\n\r\n\r\n\r\n          @if( keyInEdit === panel.primaryKey ){\r\n          <div style=\"background:azure;padding: 8px;\">\r\n            @for (element of submissionApiListItemConfigElements; track element.id) {\r\n\r\n\r\n            <lib-t-dynamic-data-edit [editorConfig]=\"element\" [data]=\"dataPlaceholder\"\r\n              [validationErrors]=\"validationErrors(element)\" (valueChange)=\"inputChange($event,element)\"\r\n              [formInputs]=\"(formInputs())||[]\" (blur)=\"elementBlur($event,element)\"></lib-t-dynamic-data-edit>\r\n            }\r\n            <mat-divider></mat-divider>\r\n            <mat-toolbar>\r\n              <button mat-flat-button (click)=\"saveSubmitApi()\" color=\"primary\">Save</button>\r\n              <span class=\"spacer\"></span>\r\n              <button mat-button (click)=\"cancelSubmitApi()\" color=\"warn\">Cancel</button>\r\n            </mat-toolbar>\r\n          </div>\r\n\r\n          }\r\n\r\n\r\n\r\n        </div>\r\n      </mat-expansion-panel>\r\n      }\r\n\r\n\r\n\r\n    </mat-accordion>\r\n  </section>\r\n\r\n\r\n</div>", styles: [".api-list-item{background:var(--mat-sys-surface-container, var(--mat-app-surface))}.tag{width:fit-content;font-size:small;text-align:center}.api-list-header{padding-left:16px}.no-api-list{padding-left:16px;padding-right:16px;text-align:center;font-style:italic;font-size:small}.container{max-width:500px;max-height:calc(100vh - 24px);background:var(--mat-sys-surface-container, var(--mat-app-surface));margin:0;border:solid 1px var(--mat-divider-color, var(--mat-app-outline))}.description{margin-top:16px;opacity:.6px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: i4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i5.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i5.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i6.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i6.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i6.MatListSubheaderCssMatStyler, selector: "[mat-subheader], [matSubheader]" }, { kind: "directive", type: i6.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i6.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "directive", type: i2$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i10.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: TDynamicDataEditComponent, selector: "lib-t-dynamic-data-edit", inputs: ["editorConfig", "formInputs", "data", "validationErrors"], outputs: ["valueChange", "blur"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FormSubmissionsConfigComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-form-submissions-config', standalone: true, imports: [CommonModule, MatModulesModule, TDynamicDataEditComponent], template: "<div class=\"container\">\r\n  <mat-toolbar>\r\n    <span style=\"font-size:0.875em\">\r\n          Form Submission Configuration\r\n    </span>\r\n\r\n    <span class=\"spacer\"></span>\r\n    <button mat-icon-button mat-dialog-close>\r\n      <mat-icon>\r\n        close\r\n      </mat-icon>\r\n    </button>\r\n  </mat-toolbar>\r\n\r\n  <section style=\"padding: 0px 8px 8px 8px;\">\r\n    <mat-accordion multi>\r\n      @for (panel of panels() ; track panel.id) {\r\n      <mat-expansion-panel [expanded]=\"true\">\r\n        <mat-expansion-panel-header>\r\n          <mat-panel-title> <mat-icon [color]=\"'primary'\" style=\"margin-right: 8px;\">\r\n              {{panel.titleIcon}}\r\n            </mat-icon>\r\n            {{panel.title}}\r\n          </mat-panel-title>\r\n          <mat-divider style=\"    position: absolute;\r\n      bottom: 0px;\r\n      width: 100%;\r\n      left: 0;\"></mat-divider>\r\n        </mat-expansion-panel-header>\r\n        <div class=\"content\">\r\n          <p class=\"description\" [innerHTML]=\"panel.description\"\r\n            style=\"color: var(--mat-text-secondary-color); margin-bottom: 16px;\">\r\n          </p>\r\n          @if ((panel?.elements||[]).length>0) {\r\n          @for (edit of (panel?.elements||[]); track edit.id) {\r\n          <div style=\"background:azure;padding: 8px;\">\r\n            <lib-t-dynamic-data-edit [editorConfig]=\"edit\" [data]=\"form()\"\r\n              [validationErrors]=\"(computedErrors(edit)())||[]\" (valueChange)=\"passFormChanges($event,edit)\"\r\n              [formInputs]=\"(formInputs())||[]\" (blur)=\"elementBlur($event,edit)\">\r\n            </lib-t-dynamic-data-edit>\r\n          </div>\r\n          }\r\n          }\r\n          <div style=\"background:azure;padding: 8px;\">\r\n\r\n            <mat-nav-list>\r\n              <h5 matSubheader [style.color]=\"(panel.error)?'var(--mat-form-field-error-text-color)':''\"\r\n                class=\"api-list-header\">\r\n\r\n                API Endpoints\r\n              </h5>\r\n              @if((getFormApis(panel.primaryKey)()).length === 0){\r\n              <p [style.color]=\"(panel.error)?'var(--mat-form-field-error-text-color)':''\" class=\"no-api-list\">\r\n                No submission endpoints configured. Add one to get started.\r\n              </p>\r\n              }\r\n              @for (api of getFormApis(panel.primaryKey)(); track api._id) {\r\n\r\n              <mat-list-item class=\"api-list-item\">\r\n                <span matListItemIcon class=\"tag\" [style.color]=\"api.httpMethod === 'POST' ? 'green' : 'blue'\">\r\n\r\n                  {{api.httpMethod}}\r\n\r\n                </span>\r\n\r\n                <div matListItemTitle>\r\n                  <div style=\"line-height: normal;\">\r\n                    <small>\r\n                      <strong>\r\n                        {{api.name}}\r\n                      </strong>\r\n                    </small>\r\n\r\n                  </div>\r\n                  <div style=\"line-height: normal;opacity: 0.6;\">\r\n                    <small>\r\n                      {{api.httpEndPoint}}\r\n                    </small>\r\n                  </div>\r\n                </div>\r\n                <span matListItemMeta>\r\n                  <button (click)=\"removeSubmissionApi(api)\" mat-icon-button>\r\n                    <mat-icon>delete</mat-icon>\r\n                  </button>\r\n                </span>\r\n              </mat-list-item>\r\n              <mat-divider>\r\n              </mat-divider>\r\n\r\n\r\n\r\n              }\r\n\r\n\r\n            </mat-nav-list>\r\n\r\n            @if( keyInEdit !== panel.primaryKey ){\r\n            <mat-toolbar style=\"background:none\">\r\n              <button (click)=\"addNewSubmitApi(panel.primaryKey)\" style=\"width:100% ;\" color=\"primary\"\r\n                mat-stroked-button>Add new\r\n                endpoint</button>\r\n            </mat-toolbar>\r\n            }\r\n            @if ((panel.error)) {\r\n\r\n            <mat-error>\r\n              {{panel.error}}\r\n            </mat-error>\r\n\r\n            }\r\n\r\n          </div>\r\n\r\n\r\n\r\n          @if( keyInEdit === panel.primaryKey ){\r\n          <div style=\"background:azure;padding: 8px;\">\r\n            @for (element of submissionApiListItemConfigElements; track element.id) {\r\n\r\n\r\n            <lib-t-dynamic-data-edit [editorConfig]=\"element\" [data]=\"dataPlaceholder\"\r\n              [validationErrors]=\"validationErrors(element)\" (valueChange)=\"inputChange($event,element)\"\r\n              [formInputs]=\"(formInputs())||[]\" (blur)=\"elementBlur($event,element)\"></lib-t-dynamic-data-edit>\r\n            }\r\n            <mat-divider></mat-divider>\r\n            <mat-toolbar>\r\n              <button mat-flat-button (click)=\"saveSubmitApi()\" color=\"primary\">Save</button>\r\n              <span class=\"spacer\"></span>\r\n              <button mat-button (click)=\"cancelSubmitApi()\" color=\"warn\">Cancel</button>\r\n            </mat-toolbar>\r\n          </div>\r\n\r\n          }\r\n\r\n\r\n\r\n        </div>\r\n      </mat-expansion-panel>\r\n      }\r\n\r\n\r\n\r\n    </mat-accordion>\r\n  </section>\r\n\r\n\r\n</div>", styles: [".api-list-item{background:var(--mat-sys-surface-container, var(--mat-app-surface))}.tag{width:fit-content;font-size:small;text-align:center}.api-list-header{padding-left:16px}.no-api-list{padding-left:16px;padding-right:16px;text-align:center;font-style:italic;font-size:small}.container{max-width:500px;max-height:calc(100vh - 24px);background:var(--mat-sys-surface-container, var(--mat-app-surface));margin:0;border:solid 1px var(--mat-divider-color, var(--mat-app-outline))}.description{margin-top:16px;opacity:.6px}\n"] }]
-        }], ctorParameters: () => [] });
-
-class FormsBuilderMenuComponent {
-    constructor(store) {
-        this.store = store;
-        this.form$ = this.store.selectors.selectFormInEdit$.pipe(map((form) => form?.form));
-        this.showJson = false;
-        this.snackBar = inject(MatSnackBar);
-        this.formCopy$ = this.form$.pipe(map((form) => JSON.stringify(form || {})));
-        this.dialog = inject(MatDialog);
-        this.applyFormTemplate = (form) => this.store.actionsFormBuilder.applyFormTemplate(form);
-        this.errors$ = this.store.formBuilderSelectors.formErrors$;
-        this.configHasErrors$ = this.errors$.pipe(map(errors => errors?.some(error => error.key.split('.')?.[0] === 'submissionHandle')));
-        this.items$ = this.configHasErrors$.pipe(map(configHasErrors => {
-            return [
-                {
-                    label: "Templates",
-                    icon: "content_copy",
-                    hint: "Select a form to apply as a template",
-                    action: () => this.openDialog()
-                },
-                {
-                    label: "Submission Config",
-                    hint: "Setup form submission api and other configurations",
-                    icon: "api",
-                    errors: configHasErrors,
-                    action: () => this.openFormSubmissionDialog()
-                },
-            ];
-        }));
-        this.vm$ = combineLatest([
-            this.items$,
-            this.form$,
-            this.formCopy$,
-            this
-                .configHasErrors$
-        ]).pipe(map(([items, form, formCopy, configHasErrors]) => ({ items, form, formCopy, configHasErrors })));
-    }
-    openDialog() {
-        const dialogRef = this.dialog.open(SelectFormTemplateComponent);
-        dialogRef.afterClosed().pipe(take(1)).subscribe(form => {
-            if (form) {
-                this.applyFormTemplate(form);
-            }
-        });
-    }
-    openFormSubmissionDialog() {
-        const dialogRef = this.dialog.open(FormSubmissionsConfigComponent, {
-            data: {
-                store: this.store
-            }
-        });
-        dialogRef.afterClosed().pipe(take(1)).subscribe(data => {
-            if (data) {
-                console.log(data);
-            }
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FormsBuilderMenuComponent, deps: [{ token: FormsStoreService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: FormsBuilderMenuComponent, isStandalone: true, selector: "app-forms-builder-menu", ngImport: i0, template: "\r\n<ng-container *ngIf=\"(  vm$|async) as vm\">\r\n\r\n    <button [matBadge]=\"'!'\" matBadgeColor=\"warn\" [matTooltip]=\"vm.configHasErrors === false?'\r\n    Click to view form configuration \r\n    ':'Click to fix or add missing form configurations'\" [matBadgeHidden]=\"!!(vm.configHasErrors) === false\"\r\n        [matMenuTriggerFor]=\"configMenu\" mat-flat-button>\r\n        Config\r\n        <mat-icon>\r\n            settings_suggest\r\n        </mat-icon>\r\n    </button>\r\n    \r\n    <mat-menu #configMenu=\"matMenu\">\r\n    \r\n    \r\n        <div mat-subheader style=\"padding-left: 16px;\">Form edit options</div>\r\n        @for(item of vm.items;track item){\r\n        <button [matTooltip]=\"item.hint\" matTooltipPosition=\"right\" style=\"padding-top:4px;padding-bottom:4px\"\r\n            (click)=\"item?.action()\" mat-menu-item>\r\n            <mat-icon>{{item.icon}}</mat-icon>\r\n    \r\n            <span>\r\n                @if (item.errors) {\r\n                <div style=\"line-height: normal;\"ks>\r\n                    {{item.label}}\r\n                </div>\r\n                <div style=\"line-height: normal;\">\r\n    \r\n                    <mat-error>\r\n                        <small>\r\n                            Invalid configurations\r\n                        </small>\r\n    \r\n                    </mat-error>\r\n                </div>\r\n                }@else {\r\n    \r\n                {{item.label}}\r\n    \r\n                }\r\n    \r\n    \r\n            </span>\r\n    \r\n        </button>\r\n        <mat-divider></mat-divider>\r\n        }\r\n        <button [matTooltip]=\"showJson?'Hide json':'Show json'\" (click)=\"showJson= !showJson\" mat-menu-item>\r\n            <mat-icon>data_object</mat-icon>\r\n    \r\n            <span>\r\n                <div>\r\n                    Show json\r\n                </div>\r\n    \r\n    \r\n    \r\n            </span>\r\n        </button>\r\n        \r\n    </mat-menu>\r\n    \r\n    <div *ngIf=\"showJson\" class=\"DragBoundary\">\r\n        @defer (on viewport) {\r\n        <mat-card cdkDragBoundary=\"DragBoundary\" cdkDrag class=\"menuCard\">\r\n            <mat-toolbar\r\n                style=\"background: var(--mat-sidenav-content-background-color);color:var(--mdc-filled-button-label-text-color, var(--mat-app-on-primary))\">\r\n                <span>\r\n                    Json Form Value\r\n                </span>\r\n                <span class=\"spacer\"></span>\r\n    \r\n                <mat-icon cdkDragHandle style=\"\r\n                margin:8px;\r\n                color:var(--mat-divider-color, var(--mat-app-outline))\">\r\n                    drag_indicator\r\n                </mat-icon>\r\n            </mat-toolbar>\r\n            <mat-divider style=\"margin-bottom: 12px;\"></mat-divider>\r\n    \r\n    \r\n            <mat-card-content style=\" overflow-y: auto;\r\n        max-height: calc(100vh - 150px);\">\r\n                <app-form-json-view></app-form-json-view>\r\n            </mat-card-content>\r\n            <mat-card-actions>\r\n                <span class=\"spacer\"></span>\r\n                <button (click)=\"showJson = false\" mat-flat-button>\r\n                    Close\r\n                </button>\r\n                <button color=\"primary\" [cdkCopyToClipboard]=\"(vm.formCopy)||''\" matTooltip=\"Copy json to clipboard\"\r\n                    mat-flat-button>\r\n                    Copy\r\n                </button>\r\n    \r\n            </mat-card-actions>\r\n    \r\n    \r\n        </mat-card>\r\n       }@placeholder {\r\n        <div style=\"padding: 50px;display:flex;justify-content:center;align-items:center; text-align: center;\">\r\n            <mat-spinner diameter=\"20\" />\r\n          </div>\r\n      \r\n        }\r\n    </div>\r\n</ng-container>\r\n", styles: [".menuCard{width:fit-content;margin:0;resize:horizontal;z-index:2}.DragBoundary{position:absolute;left:0;top:74px;width:100%;height:calc(100% - 74px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatModulesModule }, { kind: "directive", type: i3$2.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.MatListSubheaderCssMatStyler, selector: "[mat-subheader], [matSubheader]" }, { kind: "component", type: i2$5.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2$5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2$5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i2$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], deferBlockDependencies: [() => [i12.CdkCopyToClipboard, import('@angular/cdk/drag-drop').then(m => m.CdkDrag), i2$4.CdkDragHandle, i2.MatButton, i3$1.MatCard, i3$1.MatCardActions, i3$1.MatCardContent, i4.MatDivider, i2$1.MatIcon, i10.MatToolbar, i8.MatTooltip, import('./ngx-t-forms-form-json-view.component-B01nOklu.mjs').then(m => m.FormJsonViewComponent)]] }); }
-}
-i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.2.17", ngImport: i0, type: FormsBuilderMenuComponent, resolveDeferredDeps: () => [import('@angular/cdk/drag-drop').then(m => m.CdkDrag), import('./ngx-t-forms-form-json-view.component-B01nOklu.mjs').then(m => m.FormJsonViewComponent)], resolveMetadata: (CdkDrag, FormJsonViewComponent) => ({ decorators: [{
-                type: Component,
-                args: [{ selector: 'app-forms-builder-menu', standalone: true, imports: [CommonModule, MatModulesModule, FormJsonViewComponent, CdkDrag], template: "\r\n<ng-container *ngIf=\"(  vm$|async) as vm\">\r\n\r\n    <button [matBadge]=\"'!'\" matBadgeColor=\"warn\" [matTooltip]=\"vm.configHasErrors === false?'\r\n    Click to view form configuration \r\n    ':'Click to fix or add missing form configurations'\" [matBadgeHidden]=\"!!(vm.configHasErrors) === false\"\r\n        [matMenuTriggerFor]=\"configMenu\" mat-flat-button>\r\n        Config\r\n        <mat-icon>\r\n            settings_suggest\r\n        </mat-icon>\r\n    </button>\r\n    \r\n    <mat-menu #configMenu=\"matMenu\">\r\n    \r\n    \r\n        <div mat-subheader style=\"padding-left: 16px;\">Form edit options</div>\r\n        @for(item of vm.items;track item){\r\n        <button [matTooltip]=\"item.hint\" matTooltipPosition=\"right\" style=\"padding-top:4px;padding-bottom:4px\"\r\n            (click)=\"item?.action()\" mat-menu-item>\r\n            <mat-icon>{{item.icon}}</mat-icon>\r\n    \r\n            <span>\r\n                @if (item.errors) {\r\n                <div style=\"line-height: normal;\"ks>\r\n                    {{item.label}}\r\n                </div>\r\n                <div style=\"line-height: normal;\">\r\n    \r\n                    <mat-error>\r\n                        <small>\r\n                            Invalid configurations\r\n                        </small>\r\n    \r\n                    </mat-error>\r\n                </div>\r\n                }@else {\r\n    \r\n                {{item.label}}\r\n    \r\n                }\r\n    \r\n    \r\n            </span>\r\n    \r\n        </button>\r\n        <mat-divider></mat-divider>\r\n        }\r\n        <button [matTooltip]=\"showJson?'Hide json':'Show json'\" (click)=\"showJson= !showJson\" mat-menu-item>\r\n            <mat-icon>data_object</mat-icon>\r\n    \r\n            <span>\r\n                <div>\r\n                    Show json\r\n                </div>\r\n    \r\n    \r\n    \r\n            </span>\r\n        </button>\r\n        \r\n    </mat-menu>\r\n    \r\n    <div *ngIf=\"showJson\" class=\"DragBoundary\">\r\n        @defer (on viewport) {\r\n        <mat-card cdkDragBoundary=\"DragBoundary\" cdkDrag class=\"menuCard\">\r\n            <mat-toolbar\r\n                style=\"background: var(--mat-sidenav-content-background-color);color:var(--mdc-filled-button-label-text-color, var(--mat-app-on-primary))\">\r\n                <span>\r\n                    Json Form Value\r\n                </span>\r\n                <span class=\"spacer\"></span>\r\n    \r\n                <mat-icon cdkDragHandle style=\"\r\n                margin:8px;\r\n                color:var(--mat-divider-color, var(--mat-app-outline))\">\r\n                    drag_indicator\r\n                </mat-icon>\r\n            </mat-toolbar>\r\n            <mat-divider style=\"margin-bottom: 12px;\"></mat-divider>\r\n    \r\n    \r\n            <mat-card-content style=\" overflow-y: auto;\r\n        max-height: calc(100vh - 150px);\">\r\n                <app-form-json-view></app-form-json-view>\r\n            </mat-card-content>\r\n            <mat-card-actions>\r\n                <span class=\"spacer\"></span>\r\n                <button (click)=\"showJson = false\" mat-flat-button>\r\n                    Close\r\n                </button>\r\n                <button color=\"primary\" [cdkCopyToClipboard]=\"(vm.formCopy)||''\" matTooltip=\"Copy json to clipboard\"\r\n                    mat-flat-button>\r\n                    Copy\r\n                </button>\r\n    \r\n            </mat-card-actions>\r\n    \r\n    \r\n        </mat-card>\r\n       }@placeholder {\r\n        <div style=\"padding: 50px;display:flex;justify-content:center;align-items:center; text-align: center;\">\r\n            <mat-spinner diameter=\"20\" />\r\n          </div>\r\n      \r\n        }\r\n    </div>\r\n</ng-container>\r\n", styles: [".menuCard{width:fit-content;margin:0;resize:horizontal;z-index:2}.DragBoundary{position:absolute;left:0;top:74px;width:100%;height:calc(100% - 74px)}\n"] }]
-            }], ctorParameters: () => [{ type: FormsStoreService }], propDecorators: null }) });
-
-export { FormsBuilderMenuComponent };
-//# sourceMappingURL=ngx-t-forms-forms-builder-menu.component-jn9-yVbI.mjs.map