mis-crystal-design-system 4.0.51 → 14.0.0

package/fesm2020/mis-crystal-design-system-dropdown.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mis-crystal-design-system-dropdown.mjs","sources":["../../../projects/mis-components/dropdown/calculate-container-height.directive.ts","../../../projects/mis-components/dropdown/dropdown.component.ts","../../../projects/mis-components/dropdown/dropdown.component.html","../../../projects/mis-components/dropdown/dropdown.module.ts","../../../projects/mis-components/dropdown/mis-crystal-design-system-dropdown.ts"],"sourcesContent":["import { AfterViewInit, Directive, ElementRef, Input } from '@angular/core';\n\n@Directive({\n  selector: '[calculateContainerHeight]'\n})\nexport class CalculateContainerHeightDirective implements AfterViewInit{\n  @Input() items: any[];\n  @Input() visibleItems: number;\n\n  constructor(private el: ElementRef) {\n  }\n\n  ngAfterViewInit() {\n    setTimeout(() => {\n      this.setContainerHeight();\n    },200);\n  }\n\n  private setContainerHeight() {\n    const firstItemElement = this.el.nativeElement.querySelector('.item');\n    const firstItemHeight = firstItemElement ? firstItemElement.getBoundingClientRect().height :0;\n    const numberOfItems = this.items ? this.items.length : 0;\n              \n    let containerHeight = 0;\n    if (firstItemHeight * numberOfItems > 200) {\n      containerHeight = 200;\n    } else if (numberOfItems <= this.visibleItems) {\n      containerHeight = firstItemHeight * numberOfItems;\n    } else {\n      containerHeight = firstItemHeight * this.visibleItems;\n    }\n\n    this.el.nativeElement.style.height = `${containerHeight}px`;\n  }\n\n}\n","import { ConnectionPositionPair, Overlay, OverlayConfig, OverlayRef } from \"@angular/cdk/overlay\";\nimport { TemplatePortal } from \"@angular/cdk/portal\";\nimport { Component, ElementRef, EventEmitter, Input, OnInit, Output, TemplateRef, ViewChild, ViewContainerRef } from \"@angular/core\";\nimport { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';\n\n@Component({\n  selector: \"mis-dropdown\",\n  templateUrl: \"./dropdown.component.html\",\n  styleUrls: [\"./dropdown.component.scss\"],\n  \n})\nexport class DropdownComponent implements OnInit {\n  isOpen = false;\n  loading: boolean = false;\n  isSearchInputFocused: boolean = false;\n  searchInput: string = \"\";\n  searchData: DropdownItem[] = [];\n  visibleItems = 10;\n  @Input() data: DropdownItem[]  = [];\n  @Input() height: string = \"\";\n  @Input() width: string = \"\";\n  @Input() label: string = \"Select\";\n  @Input() itemSizeForCdk: number;\n  @Input() showOnlyIcon: boolean = false;\n  @Input() higlightSelectedValue: boolean = false;\n  @Input() dropdownListHeight: string = \"\";\n  @Input() dropdownListWidth: string = \"\";\n  @Input() dropdownListPosition: \"Left\" | \"Right\" = \"Left\";\n  @Input() config\n  @Input() searchEnabled: boolean = true;\n  @Input() selectedItem: DropdownItem = { value: \"\", label: \"\" };\n  @Input() noDataMessage: string = \"No Data\";\n  @Input() multiLine: boolean = false;\n  @Input() additionalInfoMessage : string;\n  @Input() scrollIntoView: boolean = false;\n  @Input() searchLabel:string = \"Search Keyword\";\n  @Input() customStyles:  { [key: string]: string };\n  @Input() activeItem: boolean = false;\n  @Output() onChange: EventEmitter<any> = new EventEmitter();\n  @ViewChild(\"select\", { static: false }) selectElement: ElementRef;\n  @ViewChild(\"popupContainer\", { static: false }) popupContainer: TemplateRef<Element>;\n  @ViewChild(CdkVirtualScrollViewport) viewPort: CdkVirtualScrollViewport;\n  private overlayRef: OverlayRef;\n  constructor(private eRef: ElementRef, private overlay: Overlay, private viewContainerRef: ViewContainerRef) {}\n  ngOnInit() {\n  }\n\n  getIconStyles(item: any, activeItem: boolean): { [key: string]: string } {\n    return {\n      'color': item && activeItem ? '#0937B2' : '',\n      'font-weight': item && activeItem ? '700' : ''\n    };\n  }\n\nsetUpAsyncDataSearch()\n{\n  if(this.config)\n  {\n      this.loading = true;\n      this.config.dataStream().pipe().subscribe(res=> {\n          this.data = res\n          this.loading = false\n      })\n  }\n  const index = this.data.findIndex((dataItem) => dataItem.value === this.selectedItem.value);\n  if (this.scrollIntoView)\n    this.viewPort.scrollToIndex(index, 'smooth');\n}\n  filterByValue(array, string: string) {\n    return array.filter(o => o.label.toLowerCase().includes(string.toLowerCase().trim()));\n  }\n\n  filterByPrimaryText(array, string: string) {\n    return array.filter(o => o.label.primaryText.toLowerCase().includes(string.toLowerCase().trim()));\n  }\n  searchInputOnChange(newValue) {\n    this.searchInput = newValue;\n    if (newValue) {\n      this.searchData = this.multiLine ? this.filterByPrimaryText(this.data, newValue) : this.filterByValue(this.data, newValue);\n    } else {\n      this.searchData = [];\n      this.searchInput = \"\";\n    }\n  }\n  searchInputFocused(isFocused: boolean) {\n    this.isSearchInputFocused = isFocused;\n  }\n  searchInputCanceled(event) {\n    event.stopPropagation();\n    this.searchInput = \"\";\n    this.isSearchInputFocused = false;\n  }\n  toggleDropdown() {\n    this.isOpen = !this.isOpen;\n    if (this.isOpen) this.openDropdown(this.popupContainer, this.selectElement.nativeElement);\n    else this.onCancel();\n  }\n  private openDropdown(template: TemplateRef<Element>, origin: HTMLElement): void {\n    const positionsBottom = [\n      new ConnectionPositionPair({ originX: \"start\", originY: \"bottom\" }, { overlayX: \"start\", overlayY: \"top\" }, 0, 4),\n      new ConnectionPositionPair({ originX: \"end\", originY: \"bottom\" }, { overlayX: \"end\", overlayY: \"top\" }, 0, 4)\n    ];\n    const positionsTop = [\n      new ConnectionPositionPair({ originX: \"start\", originY: \"top\" }, { overlayX: \"start\", overlayY: \"bottom\" }, 0, -4),\n      new ConnectionPositionPair({ originX: \"end\", originY: \"top\" }, { overlayX: \"end\", overlayY: \"bottom\" }, 0, -4)\n    ];\n    const positionStrategy = this.overlay\n      .position()\n      .flexibleConnectedTo(origin)\n      .withPositions([\n        ...(this.dropdownListPosition === \"Right\" ? positionsBottom.reverse() : positionsBottom),\n        ...(this.dropdownListPosition === \"Right\" ? positionsTop.reverse() : positionsTop)\n      ])\n      .withPush(true);\n    const configs = new OverlayConfig({\n      hasBackdrop: true,\n      backdropClass: \"cdk-overlay-transparent-backdrop\",\n      scrollStrategy: this.overlay.scrollStrategies.reposition(),\n      positionStrategy,\n      width: origin.clientWidth\n    });\n    this.overlayRef = this.overlay.create(configs);\n    if (this.dropdownListWidth) this.overlayRef.updateSize({ width: this.dropdownListWidth });\n    if (this.dropdownListHeight) this.overlayRef.updateSize({ height: this.dropdownListHeight });\n    this.overlayRef.attach(new TemplatePortal(template, this.viewContainerRef));\n    this.overlayRef.backdropClick().subscribe(res => {\n      this.onCancel();\n    });\n  }\n  selectItem(item) {\n    this.onChange.emit(item);  \n    this.toggleDropdown();\n  }\n  onCancel() {\n    this.isSearchInputFocused = false;\n    this.isOpen = false;\n    this.overlayRef?.detach();\n    this.searchInput = \"\";\n  }\n}\nexport interface DropdownItem {\n  label: any ;\n  value: string;\n  icon?: string;\n  disabled?: boolean;\n  customIcon?: string\n}\nexport interface ActionItemLabel {\n  primaryText ?: string;\n  secondaryText ?: string;\n}\n","<div (click)=\"setUpAsyncDataSearch()\"\n  class=\"main-container\"\n  [ngStyle]=\"{\n    height: height.length > 0 ? height : '',\n    width: width.length > 0 ? width : ''\n  }\"\n>\n  <div\n    class=\"dropdown\"\n    #select\n    tabindex=\"0\"\n    (keyup.enter)=\"toggleDropdown()\"\n    (click)=\"toggleDropdown()\"\n    [ngStyle]=\"customStyles\"\n    [ngClass]=\"isOpen ? 'dropdown-port': ''\"\n  >\n    <img class=\"img-container\" [src]=\"selectedItem.customIcon\" *ngIf=\"selectedItem.customIcon\">\n    <div class=\"label\">\n      <p class=\"text\" *ngIf=\"!showOnlyIcon; else showIcon\">\n        {{ multiLine ? selectedItem.label?.primaryText : selectedItem.label || label }}\n      </p>\n      <ng-template #showIcon>\n        <p class=\"text\" *ngIf=\"!selectedItem.icon\">\n          {{ label }}\n        </p>\n        <img class=\"icon\" *ngIf=\"!!selectedItem.icon\" [src]=\"selectedItem.icon\" alt=\"no img\" />\n      </ng-template>\n    </div>\n    <svg\n      class=\"handle\"\n      [ngStyle]=\"{ transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)' }\"\n      width=\"20\"\n      height=\"20\"\n      viewBox=\"0 0 20 20\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M13.825 7.15845L10 10.9751L6.175 7.15845L5 8.33345L10 13.3334L15 8.33345L13.825 7.15845Z\"\n        fill=\"#181F33\"\n      />\n    </svg>\n  </div>\n</div>\n<ng-template #popupContainer>\n  <div\n    class=\"popup-container\"\n    [ngStyle]=\"{\n      height: dropdownListHeight,\n      width: dropdownListWidth\n    }\"\n  >\n    <div *ngIf=\"searchEnabled\" class=\"search-container\">\n      <svg\n        *ngIf=\"!isSearchInputFocused\"\n        class=\"search-icon\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M4.21508 11.1456C4.21508 7.3179 7.33722 4.21165 11.1926 4.21165C15.048 4.21165 18.1702 7.3179 18.1702 11.1456C18.1702 12.6931 17.6599 14.1226 16.7972 15.2767L15.3685 16.7013C14.2044 17.5668 12.759 18.0796 11.1926 18.0796C7.33722 18.0796 4.21508 14.9734 4.21508 11.1456ZM15.9421 17.7835C14.6021 18.7329 12.9627 19.2913 11.1926 19.2913C6.66977 19.2913 3 15.6461 3 11.1456C3 6.64512 6.66977 3 11.1926 3C15.7155 3 19.3852 6.64512 19.3852 11.1456C19.3852 12.9371 18.8037 14.5931 17.8184 15.9375L19.8361 17.4048C20.6705 17.912 21.7554 18.6543 20.2454 20.215C18.7353 21.7756 18.0099 20.6663 17.4991 19.8364L15.9421 17.7835Z\"\n          fill=\"#6A737D\"\n        />\n      </svg>\n      <input\n        [ngModel]=\"searchInput\"\n        [ngStyle]=\"{\n          paddingLeft: isSearchInputFocused ? '12px' : '45px',\n          border: isSearchInputFocused ? '1px solid #0937B2' : '1px solid #e0e0e0',\n          paddingRight: isSearchInputFocused ? '45px' : '10px'\n        }\"\n        (ngModelChange)=\"searchInputOnChange($event)\"\n        [placeholder]=\"isSearchInputFocused ? '' : searchLabel\"\n        (focus)=\"searchInputFocused(true)\"\n        class=\"search-input\"\n      />\n      <svg\n        *ngIf=\"isSearchInputFocused\"\n        class=\"cancel-icon\"\n        (click)=\"searchInputCanceled($event)\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M8.87446 7.32144C8.44588 6.89285 7.751 6.89285 7.32242 7.32144C6.89383 7.75002 6.89383 8.4449 7.32242 8.87349L10.4488 11.9999L7.32357 15.1252C6.89498 15.5538 6.89498 16.2486 7.32357 16.6772C7.75215 17.1058 8.44703 17.1058 8.87561 16.6772L12.0009 13.552L15.1261 16.6772C15.5547 17.1058 16.2496 17.1058 16.6781 16.6772C17.1067 16.2486 17.1067 15.5537 16.6781 15.1251L13.5529 11.9999L16.6793 8.87354C17.1079 8.44496 17.1079 7.75008 16.6793 7.3215C16.2507 6.89291 15.5558 6.89291 15.1273 7.3215L12.0009 10.4479L8.87446 7.32144Z\"\n          fill=\"#6A737D\"\n        />\n      </svg>\n    </div>\n    <div class=\"status-container\" *ngIf=\"loading\">\n      <mis-loader [mobileView]=\"true\"></mis-loader>\n    </div>\n    <div class=\"items\" *ngIf=\"!loading\">    \n      <cdk-virtual-scroll-viewport [itemSize]=\"itemSizeForCdk\" class=\"dropdown-viewport\" [items]=\"data\" [visibleItems]=\"visibleItems\" calculateContainerHeight>\n        <div\n        class=\"item\"\n        tabindex=\"0\"\n        [ngClass]=\"{ 'item-disabled': item.disabled, 'item-selected': (higlightSelectedValue && item.value === selectedItem.value), 'icon-only' : showOnlyIcon }\"\n        (click)=\"item.disabled ? null : selectItem(item)\"\n        (keyup.enter)=\"item.disabled ? null : selectItem(item)\"\n        *cdkVirtualFor=\"let item of searchInput ? searchData : data;\"\n        >\n        <div class=\"label\" *ngIf=\"!showOnlyIcon\" [ngStyle]=\"{ width: item.icon ? '90%' : '100%', 'display': multiLine ? 'flex': 'inherit', 'flex-direction': multiLine ? 'column': 'inherit' }\">\n          <span class=\"primaryText\" [ngStyle]=\"getIconStyles(item.icon, activeItem)\">{{ multiLine ? item.label?.primaryText : item.label }}</span>\n          <span class=\"secondaryText\" *ngIf=\"multiLine\" [ngStyle]=\"getIconStyles(item.icon, activeItem)\"> {{ item.label?.secondaryText ? item.label?.secondaryText : additionalInfoMessage  }} </span>\n        </div>\n        <div class=\"icon-container\" *ngIf=\"item.icon\">\n          <img class=\"icon\" [src]=\"item.icon\" alt=\"no img\" />\n        </div>\n      </div>\n    </cdk-virtual-scroll-viewport>\n      <div class=\"noData\" *ngIf=\"(searchInput ? searchData : data).length === 0\">\n        {{ searchInput === \"\" ? noDataMessage : \"No results\" }}\n      </div>\n    </div>\n  </div>\n</ng-template>\n","import { CommonModule } from \"@angular/common\";\nimport { FormsModule } from \"@angular/forms\";\nimport { NgModule, ModuleWithProviders } from \"@angular/core\";\nimport { DropdownComponent } from \"./dropdown.component\";\nimport { OverlayModule } from \"@angular/cdk/overlay\";\nimport { ScrollingModule } from \"@angular/cdk-experimental/scrolling\";\nimport { LoaderModule } from \"mis-crystal-design-system/loader\";\nimport { CalculateContainerHeightDirective } from './calculate-container-height.directive';\n\n@NgModule({\n  declarations: [DropdownComponent, CalculateContainerHeightDirective],\n  imports: [CommonModule, FormsModule, OverlayModule, ScrollingModule,LoaderModule],\n  exports: [DropdownComponent]\n})\nexport class DropdownModule {\n  static forRoot(): ModuleWithProviders<DropdownModule> {\n    return { ngModule: DropdownModule, providers: [] };\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i6.CalculateContainerHeightDirective"],"mappings":";;;;;;;;;;;;;;;MAKa,iCAAiC,CAAA;AAI5C,IAAA,WAAA,CAAoB,EAAc,EAAA;QAAd,IAAE,CAAA,EAAA,GAAF,EAAE,CAAY;KACjC;IAED,eAAe,GAAA;QACb,UAAU,CAAC,MAAK;YACd,IAAI,CAAC,kBAAkB,EAAE,CAAC;SAC3B,EAAC,GAAG,CAAC,CAAC;KACR;IAEO,kBAAkB,GAAA;AACxB,QAAA,MAAM,gBAAgB,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AACtE,QAAA,MAAM,eAAe,GAAG,gBAAgB,GAAG,gBAAgB,CAAC,qBAAqB,EAAE,CAAC,MAAM,GAAE,CAAC,CAAC;AAC9F,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;QAEzD,IAAI,eAAe,GAAG,CAAC,CAAC;AACxB,QAAA,IAAI,eAAe,GAAG,aAAa,GAAG,GAAG,EAAE;YACzC,eAAe,GAAG,GAAG,CAAC;AACvB,SAAA;AAAM,aAAA,IAAI,aAAa,IAAI,IAAI,CAAC,YAAY,EAAE;AAC7C,YAAA,eAAe,GAAG,eAAe,GAAG,aAAa,CAAC;AACnD,SAAA;AAAM,aAAA;AACL,YAAA,eAAe,GAAG,eAAe,GAAG,IAAI,CAAC,YAAY,CAAC;AACvD,SAAA;AAED,QAAA,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,MAAM,GAAG,CAAA,EAAG,eAAe,CAAA,EAAA,CAAI,CAAC;KAC7D;;8HA5BU,iCAAiC,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kHAAjC,iCAAiC,EAAA,QAAA,EAAA,4BAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,YAAA,EAAA,cAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;2FAAjC,iCAAiC,EAAA,UAAA,EAAA,CAAA;kBAH7C,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,4BAA4B;AACvC,iBAAA,CAAA;iGAEU,KAAK,EAAA,CAAA;sBAAb,KAAK;gBACG,YAAY,EAAA,CAAA;sBAApB,KAAK;;;MCIK,iBAAiB,CAAA;AAgC5B,IAAA,WAAA,CAAoB,IAAgB,EAAU,OAAgB,EAAU,gBAAkC,EAAA;QAAtF,IAAI,CAAA,IAAA,GAAJ,IAAI,CAAY;QAAU,IAAO,CAAA,OAAA,GAAP,OAAO,CAAS;QAAU,IAAgB,CAAA,gBAAA,GAAhB,gBAAgB,CAAkB;QA/B1G,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;QACf,IAAO,CAAA,OAAA,GAAY,KAAK,CAAC;QACzB,IAAoB,CAAA,oBAAA,GAAY,KAAK,CAAC;QACtC,IAAW,CAAA,WAAA,GAAW,EAAE,CAAC;QACzB,IAAU,CAAA,UAAA,GAAmB,EAAE,CAAC;QAChC,IAAY,CAAA,YAAA,GAAG,EAAE,CAAC;QACT,IAAI,CAAA,IAAA,GAAoB,EAAE,CAAC;QAC3B,IAAM,CAAA,MAAA,GAAW,EAAE,CAAC;QACpB,IAAK,CAAA,KAAA,GAAW,EAAE,CAAC;QACnB,IAAK,CAAA,KAAA,GAAW,QAAQ,CAAC;QAEzB,IAAY,CAAA,YAAA,GAAY,KAAK,CAAC;QAC9B,IAAqB,CAAA,qBAAA,GAAY,KAAK,CAAC;QACvC,IAAkB,CAAA,kBAAA,GAAW,EAAE,CAAC;QAChC,IAAiB,CAAA,iBAAA,GAAW,EAAE,CAAC;QAC/B,IAAoB,CAAA,oBAAA,GAAqB,MAAM,CAAC;QAEhD,IAAa,CAAA,aAAA,GAAY,IAAI,CAAC;QAC9B,IAAY,CAAA,YAAA,GAAiB,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC;QACtD,IAAa,CAAA,aAAA,GAAW,SAAS,CAAC;QAClC,IAAS,CAAA,SAAA,GAAY,KAAK,CAAC;QAE3B,IAAc,CAAA,cAAA,GAAY,KAAK,CAAC;QAChC,IAAW,CAAA,WAAA,GAAU,gBAAgB,CAAC;QAEtC,IAAU,CAAA,UAAA,GAAY,KAAK,CAAC;AAC3B,QAAA,IAAA,CAAA,QAAQ,GAAsB,IAAI,YAAY,EAAE,CAAC;KAKmD;IAC9G,QAAQ,GAAA;KACP;IAED,aAAa,CAAC,IAAS,EAAE,UAAmB,EAAA;QAC1C,OAAO;YACL,OAAO,EAAE,IAAI,IAAI,UAAU,GAAG,SAAS,GAAG,EAAE;YAC5C,aAAa,EAAE,IAAI,IAAI,UAAU,GAAG,KAAK,GAAG,EAAE;SAC/C,CAAC;KACH;IAEH,oBAAoB,GAAA;QAElB,IAAG,IAAI,CAAC,MAAM,EACd;AACI,YAAA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;AACpB,YAAA,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,SAAS,CAAC,GAAG,IAAE;AAC3C,gBAAA,IAAI,CAAC,IAAI,GAAG,GAAG,CAAA;AACf,gBAAA,IAAI,CAAC,OAAO,GAAG,KAAK,CAAA;AACxB,aAAC,CAAC,CAAA;AACL,SAAA;QACD,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,QAAQ,KAAK,QAAQ,CAAC,KAAK,KAAK,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QAC5F,IAAI,IAAI,CAAC,cAAc;YACrB,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;KAChD;IACC,aAAa,CAAC,KAAK,EAAE,MAAc,EAAA;QACjC,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;KACvF;IAED,mBAAmB,CAAC,KAAK,EAAE,MAAc,EAAA;AACvC,QAAA,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;KACnG;AACD,IAAA,mBAAmB,CAAC,QAAQ,EAAA;AAC1B,QAAA,IAAI,CAAC,WAAW,GAAG,QAAQ,CAAC;AAC5B,QAAA,IAAI,QAAQ,EAAE;AACZ,YAAA,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,EAAE,QAAQ,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;AAC5H,SAAA;AAAM,aAAA;AACL,YAAA,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;AACrB,YAAA,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;AACvB,SAAA;KACF;AACD,IAAA,kBAAkB,CAAC,SAAkB,EAAA;AACnC,QAAA,IAAI,CAAC,oBAAoB,GAAG,SAAS,CAAC;KACvC;AACD,IAAA,mBAAmB,CAAC,KAAK,EAAA;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;AACxB,QAAA,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;AACtB,QAAA,IAAI,CAAC,oBAAoB,GAAG,KAAK,CAAC;KACnC;IACD,cAAc,GAAA;AACZ,QAAA,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;QAC3B,IAAI,IAAI,CAAC,MAAM;AAAE,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;;YACrF,IAAI,CAAC,QAAQ,EAAE,CAAC;KACtB;IACO,YAAY,CAAC,QAA8B,EAAE,MAAmB,EAAA;AACtE,QAAA,MAAM,eAAe,GAAG;YACtB,IAAI,sBAAsB,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC;YACjH,IAAI,sBAAsB,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC;SAC9G,CAAC;AACF,QAAA,MAAM,YAAY,GAAG;YACnB,IAAI,sBAAsB,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;YAClH,IAAI,sBAAsB,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;SAC/G,CAAC;AACF,QAAA,MAAM,gBAAgB,GAAG,IAAI,CAAC,OAAO;AAClC,aAAA,QAAQ,EAAE;aACV,mBAAmB,CAAC,MAAM,CAAC;AAC3B,aAAA,aAAa,CAAC;AACb,YAAA,IAAI,IAAI,CAAC,oBAAoB,KAAK,OAAO,GAAG,eAAe,CAAC,OAAO,EAAE,GAAG,eAAe,CAAC;AACxF,YAAA,IAAI,IAAI,CAAC,oBAAoB,KAAK,OAAO,GAAG,YAAY,CAAC,OAAO,EAAE,GAAG,YAAY,CAAC;SACnF,CAAC;aACD,QAAQ,CAAC,IAAI,CAAC,CAAC;AAClB,QAAA,MAAM,OAAO,GAAG,IAAI,aAAa,CAAC;AAChC,YAAA,WAAW,EAAE,IAAI;AACjB,YAAA,aAAa,EAAE,kCAAkC;YACjD,cAAc,EAAE,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,UAAU,EAAE;YAC1D,gBAAgB;YAChB,KAAK,EAAE,MAAM,CAAC,WAAW;AAC1B,SAAA,CAAC,CAAC;QACH,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QAC/C,IAAI,IAAI,CAAC,iBAAiB;AAAE,YAAA,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC;QAC1F,IAAI,IAAI,CAAC,kBAAkB;AAAE,YAAA,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,kBAAkB,EAAE,CAAC,CAAC;AAC7F,QAAA,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,cAAc,CAAC,QAAQ,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC;QAC5E,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,CAAC,SAAS,CAAC,GAAG,IAAG;YAC9C,IAAI,CAAC,QAAQ,EAAE,CAAC;AAClB,SAAC,CAAC,CAAC;KACJ;AACD,IAAA,UAAU,CAAC,IAAI,EAAA;AACb,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACzB,IAAI,CAAC,cAAc,EAAE,CAAC;KACvB;IACD,QAAQ,GAAA;AACN,QAAA,IAAI,CAAC,oBAAoB,GAAG,KAAK,CAAC;AAClC,QAAA,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;AACpB,QAAA,IAAI,CAAC,UAAU,EAAE,MAAM,EAAE,CAAC;AAC1B,QAAA,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;KACvB;;8GA/HU,iBAAiB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,OAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAjB,iBAAiB,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,QAAA,EAAA,KAAA,EAAA,OAAA,EAAA,KAAA,EAAA,OAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,YAAA,EAAA,cAAA,EAAA,qBAAA,EAAA,uBAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,oBAAA,EAAA,sBAAA,EAAA,MAAA,EAAA,QAAA,EAAA,aAAA,EAAA,eAAA,EAAA,YAAA,EAAA,cAAA,EAAA,aAAA,EAAA,eAAA,EAAA,SAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,uBAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,YAAA,EAAA,cAAA,EAAA,UAAA,EAAA,YAAA,EAAA,EAAA,OAAA,EAAA,EAAA,QAAA,EAAA,UAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,eAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,QAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,gBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,gBAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,UAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EA8BjB,wBAAwB,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECzCrC,+zLAiIA,EAAA,MAAA,EAAA,CAAA,khJAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,8MAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,qDAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,SAAA,EAAA,gBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,yBAAA,EAAA,QAAA,EAAA,uCAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,aAAA,EAAA,aAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,kCAAA,EAAA,MAAA,EAAA,CAAA,iBAAA,EAAA,sBAAA,EAAA,uBAAA,EAAA,gCAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,wBAAA,EAAA,QAAA,EAAA,6BAAA,EAAA,MAAA,EAAA,CAAA,aAAA,EAAA,YAAA,CAAA,EAAA,OAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,iCAAA,EAAA,QAAA,EAAA,4BAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,cAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;2FDtHa,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAN7B,SAAS;+BACE,cAAc,EAAA,QAAA,EAAA,+zLAAA,EAAA,MAAA,EAAA,CAAA,khJAAA,CAAA,EAAA,CAAA;sJAYf,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBACG,MAAM,EAAA,CAAA;sBAAd,KAAK;gBACG,KAAK,EAAA,CAAA;sBAAb,KAAK;gBACG,KAAK,EAAA,CAAA;sBAAb,KAAK;gBACG,cAAc,EAAA,CAAA;sBAAtB,KAAK;gBACG,YAAY,EAAA,CAAA;sBAApB,KAAK;gBACG,qBAAqB,EAAA,CAAA;sBAA7B,KAAK;gBACG,kBAAkB,EAAA,CAAA;sBAA1B,KAAK;gBACG,iBAAiB,EAAA,CAAA;sBAAzB,KAAK;gBACG,oBAAoB,EAAA,CAAA;sBAA5B,KAAK;gBACG,MAAM,EAAA,CAAA;sBAAd,KAAK;gBACG,aAAa,EAAA,CAAA;sBAArB,KAAK;gBACG,YAAY,EAAA,CAAA;sBAApB,KAAK;gBACG,aAAa,EAAA,CAAA;sBAArB,KAAK;gBACG,SAAS,EAAA,CAAA;sBAAjB,KAAK;gBACG,qBAAqB,EAAA,CAAA;sBAA7B,KAAK;gBACG,cAAc,EAAA,CAAA;sBAAtB,KAAK;gBACG,WAAW,EAAA,CAAA;sBAAnB,KAAK;gBACG,YAAY,EAAA,CAAA;sBAApB,KAAK;gBACG,UAAU,EAAA,CAAA;sBAAlB,KAAK;gBACI,QAAQ,EAAA,CAAA;sBAAjB,MAAM;gBACiC,aAAa,EAAA,CAAA;sBAApD,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,QAAQ,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,CAAA;gBACU,cAAc,EAAA,CAAA;sBAA7D,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,gBAAgB,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,CAAA;gBACT,QAAQ,EAAA,CAAA;sBAA5C,SAAS;uBAAC,wBAAwB,CAAA;;;ME3BxB,cAAc,CAAA;AACzB,IAAA,OAAO,OAAO,GAAA;QACZ,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC;KACpD;;2GAHU,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAd,cAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,cAAc,EAJV,YAAA,EAAA,CAAA,iBAAiB,EAAE,iCAAiC,aACzD,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,eAAe,EAAC,YAAY,aACtE,iBAAiB,CAAA,EAAA,CAAA,CAAA;4GAEhB,cAAc,EAAA,OAAA,EAAA,CAHf,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,eAAe,EAAC,YAAY,CAAA,EAAA,CAAA,CAAA;2FAGrE,cAAc,EAAA,UAAA,EAAA,CAAA;kBAL1B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,YAAY,EAAE,CAAC,iBAAiB,EAAE,iCAAiC,CAAC;oBACpE,OAAO,EAAE,CAAC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,eAAe,EAAC,YAAY,CAAC;oBACjF,OAAO,EAAE,CAAC,iBAAiB,CAAC;AAC7B,iBAAA,CAAA;;;ACbD;;AAEG;;;;"}

package/fesm2020/mis-crystal-design-system-dynamic-form.mjs

@@ -0,0 +1,368 @@
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2 from '@angular/forms';
+import { UntypedFormArray, UntypedFormGroup, UntypedFormControl, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, Input, Output, NgModule } from '@angular/core';
+import { OverlayModule } from '@angular/cdk/overlay';
+import { ScrollingModule } from '@angular/cdk-experimental/scrolling';
+import * as i3 from 'mis-crystal-design-system/dropdown';
+import { DropdownModule } from 'mis-crystal-design-system/dropdown';
+import * as moment from 'moment';
+import 'moment-timezone';
+import * as i4 from 'mis-crystal-design-system/switch';
+import { SwitchModule } from 'mis-crystal-design-system/switch';
+import * as i5 from 'mis-crystal-design-system/multi-select-dropdown';
+import { MultiSelectDropdownModule } from 'mis-crystal-design-system/multi-select-dropdown';
+import * as i6 from 'mis-crystal-design-system/datepicker_v2';
+import { DatepickerModuleV2 } from 'mis-crystal-design-system/datepicker_v2';
+
+class DynamicFormComponent {
+    constructor() {
+        /**
+         * formFields:  Dynamic fields recieved from the API metadata to build a dynamic form
+         * formValues:  Holds the value of the dynamic form with "key" being dynamic field "title"
+         *              and value being the user input.
+         */
+        this.formFields = [];
+        this.formValues = {};
+        // Need to deprecate these inputs and use constants.
+        this.activeBtnIconUrl = "";
+        this.calendarIconUrl = "";
+        /**
+         * formUpdated: Emits formValues Object whenever there is a change in the dynamic form.
+         */
+        this.formUpdated = new EventEmitter();
+        /**
+         * formValid: Emits boolean depending on validity of the form
+         */
+        this.formValid = new EventEmitter();
+        /**
+         * formInitialized: Emits dynamic form API on form initilization
+         */
+        this.formInitialized = new EventEmitter();
+    }
+    ngOnInit() {
+        // Building the form
+        this.dynamicForm = this.generateDynamicForm(this.formFields, this.formValues);
+        // Subscribing to form changes and emiting values.
+        this.valueChangesSubscription$ = this.dynamicForm.valueChanges.subscribe(formValue => {
+            this.onFormValueChanges();
+        });
+        //api to expose functions
+        this.dynamicFormAPI = {
+            defaultFormValues: () => {
+                return this.generateDynamicFieldsValueObject(this.dynamicForm.value.dynamicFields);
+            }
+        };
+        this.formInitialized.emit(this.dynamicFormAPI);
+        this.formValid.emit(this.dynamicForm.valid);
+    }
+    ngOnDestroy() {
+        this.valueChangesSubscription$?.unsubscribe();
+    }
+    onFormValueChanges() {
+        let formValues = this.generateDynamicFieldsValueObject(this.dynamicForm.value.dynamicFields);
+        this.formValid.emit(this.dynamicForm.valid);
+        this.formUpdated.emit(formValues);
+        console.log(formValues);
+    }
+    generateDynamicFieldsValueObject(formValues) {
+        let dynamicFieldsValue = {};
+        formValues.forEach((fieldValue, index) => {
+            let formattedValue = this.mapFormFieldToFormValue(this.formFields[index], fieldValue.value);
+            if (fieldValue.subFields?.length > 0) {
+                let formattedSubFieldsValues = {};
+                fieldValue.subFields.forEach((subFieldValue, subIndex) => {
+                    let subFormField = this.formFields[index].subFields[subIndex];
+                    formattedSubFieldsValues[subFormField.configName] = this.mapFormFieldToFormValue(subFormField, subFieldValue);
+                });
+                dynamicFieldsValue[this.formFields[index].configName] = {
+                    value: formattedValue,
+                    subFields: formattedSubFieldsValues
+                };
+            }
+            else {
+                dynamicFieldsValue[this.formFields[index].configName] = formattedValue;
+            }
+        });
+        return dynamicFieldsValue;
+    }
+    generateDynamicForm(formFields, formValues) {
+        let formArray = new UntypedFormArray([]);
+        for (let field of formFields) {
+            let fieldValue = formValues[field.configName]?.value ? formValues[field.configName].value : formValues[field.configName];
+            let fieldControl = this.mapFormValueToFormField(field, fieldValue);
+            let subFieldsControls = this.generateSubDynamicFields(formValues, field, fieldControl.value);
+            formArray.push(new UntypedFormGroup({
+                value: fieldControl,
+                subFields: subFieldsControls
+            }));
+        }
+        return new UntypedFormGroup({
+            dynamicFields: formArray
+        });
+    }
+    getDynamicFieldsControls() {
+        return this.dynamicForm.get("dynamicFields");
+    }
+    updateSubDynamicFields(field, formGroup, value) {
+        if (field.subFields?.length > 0) {
+            let subFieldsControls = this.generateSubDynamicFields(this.formValues, field, value);
+            formGroup.removeControl('subFields');
+            formGroup.addControl('subFields', subFieldsControls);
+        }
+    }
+    updateSelectedValueForSingleSelect(field, control, formGroup, value) {
+        if (control.value?.value !== value.value) {
+            control.setValue(value);
+        }
+        else
+            control.setValue('');
+        this.updateSubDynamicFields(field, formGroup, value);
+        control.markAsTouched();
+    }
+    updateSelectedValueForMultiSelect(field, control, formGroup, values) {
+        let selectedValues = control.value;
+        for (let value of values) {
+            let itemIndex = selectedValues.findIndex(item => item.label === value.label);
+            if (itemIndex > -1) {
+                selectedValues.splice(itemIndex, 1);
+            }
+            else {
+                selectedValues.push({ ...value });
+            }
+        }
+        control.setValue(selectedValues);
+        this.updateSubDynamicFields(field, formGroup, values);
+        control.markAsTouched();
+    }
+    isCheckBoxSelected(value, selectedValues) {
+        return selectedValues.findIndex(item => item.label === value) > -1;
+    }
+    findSelectedIndex(subfields, value) {
+        const selectedIndex = subfields.findIndex(item => item.parentConfigValue === value);
+        return selectedIndex !== -1 ? selectedIndex : 0;
+    }
+    matchParentConfig(subfields, value) {
+        if (!subfields || subfields.length === 0) {
+            return false;
+        }
+        return subfields.some(item => item.parentConfigValue === value);
+    }
+    generateSubDynamicFields(formValues, parentField, parentValue) {
+        let controls = new UntypedFormArray([]);
+        let subFields = parentField.subFields;
+        let subFieldsValues = formValues[parentField.configName]?.subFields ? formValues[parentField.configName].subFields : {};
+        if (!subFields)
+            return controls;
+        if (parentField.fieldType === 'singleSelect') {
+            subFields = subFields.filter((subField) => subField.parentConfigValue === parentValue?.value);
+        }
+        else if (parentField.fieldType === 'multiSelect') {
+            let parentValues = new Set(parentValue.map((value) => value.value));
+            subFields = subFields.filter((subField) => parentValues.has(subField.parentConfigValue));
+        }
+        if (subFields?.length > 0) {
+            for (let subField of subFields) {
+                controls.push(this.mapFormValueToFormField(subField, subFieldsValues[subField.configName]));
+            }
+        }
+        return controls;
+    }
+    mapFormValueToFormField(formField, formValue) {
+        let validators = formField.validators ? [dynamicFieldValidator(formField.validators)] : [];
+        let control = new UntypedFormControl(null, validators);
+        if (formField.fieldType === "input") {
+            if (formField.fieldInputType === "text" || formField.fieldInputType === "textarea")
+                control.setValue(formValue ? formValue : "");
+            else if (formField.fieldInputType === "number")
+                control.setValue(formValue ? formValue : 0);
+            else if (formField.fieldInputType === "date") {
+                if (formValue && typeof formValue === "number") {
+                    control.setValue(moment(formValue).tz(formField.fieldConfig.timezone).format(formField.fieldConfig.format));
+                }
+                else {
+                    control.setValue(moment().tz(formField.fieldConfig.timezone).format(formField.fieldConfig.format));
+                }
+            }
+        }
+        else if (formField.fieldType === "singleSelect") {
+            const findSelectedValue = () => {
+                let index = formField.itemsList.findIndex(item => item.value === formValue);
+                return index >= 0 ? formField.itemsList[index] : "";
+            };
+            if (formField.fieldInputType === "dropdown") {
+                if (!formValue)
+                    control.setValue(formField.itemsList[0]);
+                else
+                    control.setValue(findSelectedValue());
+            }
+            else if (formField.fieldInputType === "radio") {
+                control.setValue(findSelectedValue());
+            }
+        }
+        else if (formField.fieldType === "multiSelect") {
+            if (formValue && Array.isArray(formValue)) {
+                let selectedValues = [];
+                for (let value of formValue) {
+                    let index = formField.itemsList.findIndex(item => item.value === value);
+                    if (index > -1)
+                        selectedValues.push({ ...formField.itemsList[index] });
+                }
+                control.setValue(selectedValues);
+            }
+            else {
+                control.setValue([]);
+            }
+        }
+        else if (formField.fieldType === "boolean") {
+            control.setValue(!!formValue);
+        }
+        else
+            control.setValue(null);
+        return control;
+    }
+    mapFormFieldToFormValue(formField, formValue) {
+        if (formField.fieldType === "input") {
+            if (formField.fieldInputType === "text" || formField.fieldInputType === "textarea")
+                return formValue;
+            else if (formField.fieldInputType === "number")
+                return +formValue;
+            else if (formField.fieldInputType === "date") {
+                return moment.tz(formValue, formField.fieldConfig.format, formField.fieldConfig.timezone).valueOf();
+            }
+        }
+        else if (formField.fieldType === "singleSelect") {
+            return formValue?.value ?? '';
+        }
+        else if (formField.fieldType === "multiSelect") {
+            return formValue?.map(item => item.value);
+        }
+        else if (formField.fieldType === "boolean") {
+            return formValue;
+        }
+        else
+            return formValue;
+    }
+}
+DynamicFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DynamicFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DynamicFormComponent, selector: "mis-dynamic-form", inputs: { formFields: "formFields", formValues: "formValues", activeBtnIconUrl: "activeBtnIconUrl", calendarIconUrl: "calendarIconUrl" }, outputs: { formUpdated: "formUpdated", formValid: "formValid", formInitialized: "formInitialized" }, ngImport: i0, template: "<form [formGroup]=\"dynamicForm\">\n  <ng-container formArrayName=\"dynamicFields\">\n    <ng-container [formGroupName]=\"i\" *ngFor=\"let fieldControl of getDynamicFieldsControls().controls; let i = index\">\n        <ng-container\n        [ngTemplateOutlet]=\"dynamicField\"\n        [ngTemplateOutletContext]=\"{\n          $implicit: formFields[i],\n          formGroup: fieldControl,\n          control: fieldControl.controls.value\n        }\"\n      >\n      </ng-container>\n      <div class=\"sub-dynamic-form\" *ngIf=\"fieldControl.value && (!!formFields[i]?.subFields && formFields[i]?.subFields?.length > 0 && matchParentConfig(formFields[i]?.subFields, fieldControl.controls.value.value.value))\">\n        <ng-container *ngFor=\"let subFieldControl of fieldControl.controls.subFields.controls;\">\n          <ng-container\n            [ngTemplateOutlet]=\"dynamicField\"\n            [ngTemplateOutletContext]=\"{\n              $implicit: formFields[i].subFields[findSelectedIndex(formFields[i]?.subFields, fieldControl.controls.value.value.value)],\n              control: subFieldControl\n            }\">\n          </ng-container>\n        </ng-container>\n      </div>\n    </ng-container>\n  </ng-container>\n</form>\n\n\n<ng-template #dynamicField let-field let-control=\"control\" let-formgroup=\"formGroup\">\n\n  <!-- fieldType: 'input' fieldInputType: 'text' | 'number' -->\n  <div class=\"dynamic-field multi-line-field-container\"\n    *ngIf=\"field.fieldType === 'input' && (field.fieldInputType === 'text' || field.fieldInputType === 'number')\">\n    <p class=\"h7 field-title-sm\">\n      {{ field.title }}\n    </p>\n    <div style=\"flex-basis: 100%\"></div>\n    <input class=\"input-field ip-text\" [type]=\"field.fieldInputType\" [formControl]=\"control\"\n      (ngModelChange)=\"updateSubDynamicFields(field, formgroup, $event)\" \n      [ngStyle]=\"{'border': control.touched && control.errors ? '1px solid #B00020': ''}\"\n      [placeholder]=\"field.placeholderText ? field.placeholderText : 'Input Text'\" \n      [min]=\"field.fieldInputType === 'number' ? 0 : '' \"/>\n    <ng-container *ngIf=\"control.touched && control.errors\"\n      [ngTemplateOutlet]=\"dynamicFieldErrors\" \n      [ngTemplateOutletContext]=\"{ $implicit: control.errors }\"\n    >\n    </ng-container>\n  </div>\n\n  <!-- fieldType: 'input' fieldInputType: 'textarea' -->\n  <div class=\"dynamic-field multi-line-field-container\"\n    *ngIf=\"field.fieldType === 'input' && field.fieldInputType === 'textarea'\">\n    <p class=\"h7 field-title-sm\">\n      {{ field.title }}\n    </p>\n    <div style=\"flex-basis: 100%\"></div>\n    <textarea class=\"input-field ip-textarea\" type=\"text\"\n      [ngStyle]=\"{'border': control.touched && control.errors ? '1px solid #B00020': ''}\"\n      [placeholder]=\"field.placeholderText ? field.placeholderText : 'Input Text'\" [formControl]=\"control\" (ngModelChange)=\"updateSubDynamicFields(field, formgroup, $event)\"></textarea>\n      <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n        [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n      </ng-container>\n  </div>\n\n  <!-- fieldType: 'input' fieldInputType: 'date' -->\n  <div class=\"dynamic-field single-line-field-container\"\n    *ngIf=\"field.fieldType === 'input' && field.fieldInputType === 'date'\">\n    <p class=\"h6\">\n      {{ field.title }}\n    </p>\n    <div class=\"date-picker-container\">\n      <input class=\"date-picker\" readonly misTzDp [dpConfig]=\"field.fieldConfig\"\n        (dateChange)=\"control.setValue($event)\" [selectedDate]=\"control.value\" [offsetY]=\"0\"\n        [value]=\"control.value\" #dp />\n      <img alt=\"data-picker\" *ngIf=\"calendarIconUrl\" class=\"date-picker-icon\" [src]=\"calendarIconUrl\"\n        (click)=\"dp.click()\" />\n    </div>\n    <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n      [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n    </ng-container>\n  </div>\n\n  <!-- fieldType: 'boolean' fieldInputType: 'toggle' -->\n  <div class=\"dynamic-field single-line-field-container\"\n    *ngIf=\"field.fieldType === 'boolean' && field.fieldInputType === 'toggle'\">\n    <p class=\"h6\">\n      {{ field.title }}\n    </p>\n    <mis-switch [control]=\"control\" (valueChanged)=\"updateSubDynamicFields(field, formgroup, $event)\"></mis-switch>\n    <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n      [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n    </ng-container>\n  </div>\n\n  <!-- fieldType: 'singleSelect' fieldInputType: 'dropdown' -->\n  <div class=\"dynamic-field single-line-field-container\"\n    *ngIf=\"field.fieldType === 'singleSelect' && field.fieldInputType === 'dropdown'\">\n    <p class=\"h6\">\n      {{ field.title }}\n    </p>\n    <mis-dropdown [searchEnabled]=\"false\" [width]=\"'140px'\" [data]=\"field.itemsList\" [selectedItem]=\"control.value\"\n      (onChange)=\"updateSelectedValueForSingleSelect(field, control, formgroup, $event);\">\n    </mis-dropdown>\n    <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n      [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n    </ng-container>\n  </div>\n\n  <!-- fieldType: 'singleSelect' fieldInputType: 'radio' -->\n  <div class=\"dynamic-field multi-line-field-container\"\n    *ngIf=\"field.fieldType === 'singleSelect' && field.fieldInputType === 'radio'\">\n    <p class=\"h7 field-title-sm\">\n      {{ field.title }}\n    </p>\n    <div style=\"flex-basis: 100%\"></div>\n    <div id=\"checkboxes-container\">\n      <div class=\"radio-checkbox-common\" *ngFor=\"let item of field.itemsList\"\n        [ngClass]=\"{ 'checkbox-active': item.label === control.value?.label }\"\n        (click)=\"updateSelectedValueForSingleSelect(field, control, formgroup, item);\">\n        <img *ngIf=\"(item.label === control.value?.label) && activeBtnIconUrl\" [src]=\"activeBtnIconUrl\" alt=\"\" />\n        <p class=\"h6\">{{ item.label }}</p>\n      </div>\n    </div>\n    <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n      [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n    </ng-container>\n  </div>\n\n  <!-- fieldType: 'multiSelect' fieldInputType: 'checkbox' -->\n  <div class=\"dynamic-field multi-line-field-container\"\n    *ngIf=\"field.fieldType === 'multiSelect' && field.fieldInputType === 'checkbox'\">\n    <p class=\"h7 field-title-sm\">\n      {{ field.title }}\n    </p>\n    <div style=\"flex-basis: 100%\"></div>\n    <div id=\"checkboxes-container\">\n      <div class=\"radio-checkbox-common\" *ngFor=\"let item of field.itemsList\"\n        [ngClass]=\"{ 'checkbox-active': isCheckBoxSelected(item.label, control.value) }\"\n        (click)=\"updateSelectedValueForMultiSelect(field, control, formgroup, [item])\">\n        <img *ngIf=\"isCheckBoxSelected(item.label, control.value) && activeBtnIconUrl\" [src]=\"activeBtnIconUrl\"\n          alt=\"\" />\n        <p class=\"h6\">{{ item.label }}</p>\n      </div>\n    </div>\n    <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n      [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n    </ng-container>\n  </div>\n\n  <!-- fieldType: 'multiSelect' fieldInputType: 'dropdown' -->\n  <div class=\"dynamic-field single-line-field-container\"\n    *ngIf=\"field.fieldType === 'multiSelect' && field.fieldInputType === 'dropdown'\">\n    <p class=\"h6\">\n      {{ field.title }}\n    </p>\n    <mis-multi-select-dropdown [width]=\"'140px'\" [showSelectedCount]=\"true\" [dropdownListWidth]=\"'256px'\"\n      [searchEnabled]=\"false\" [hideApplyButton]=\"true\" [data]=\"field.itemsList\"\n      [selectedItems]=\"control.value\" (onChange)=\"updateSelectedValueForMultiSelect(field, control, formgroup, $event);\"></mis-multi-select-dropdown>\n    <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n      [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n    </ng-container>\n  </div>\n\n</ng-template>\n\n<ng-template #dynamicFieldErrors let-errors>\n  <div id=\"error-messages-container\">\n    <ng-container *ngFor=\"let error of errors | keyvalue\">\n      <p class=\"h8\">\n        {{\" \u2022 &nbsp;\" + error.value}}\n      </p>\n      <div style=\"flex-basis: 100%; height: 0\"></div>\n    </ng-container>\n  </div>\n</ng-template>", styles: ["p{margin:0;cursor:default}::ng-deep .main-container{margin:0;max-width:100%}.sub-dynamic-form{padding-left:24px}.dynamic-field ::ng-deep .container{height:32px!important}.single-line-field-container{display:flex;justify-content:space-between;align-items:center;padding:28px 16px;border-bottom:1px solid var(--grey-seperators)}.multi-line-field-container{display:flex;justify-content:flex-start;align-items:flex-start;padding:28px 16px;flex-wrap:wrap;border-bottom:1px solid var(--grey-seperators)}.field-title-sm{margin-bottom:8px;cursor:default}.input-field{width:100%;background-color:var(--grey-bg-1);border:1px solid var(--grey-seperators);border-radius:6px}.ip-text{height:44px;padding:8px 12px}.ip-textarea{max-height:94px;padding:8px}input:focus{outline:none}input::placeholder{color:var(--grey-seperators)}textarea:focus{outline:none}.date-picker-container{position:relative;width:140px}.date-picker-container .date-picker{cursor:pointer;height:32px;width:100%;font-size:14px;border-radius:6px;padding:0 12px;border:1px solid var(--grey-seperators);inset:10px auto auto 80px;background-color:var(--text-white)}.date-picker-container .date-picker:hover{background-color:var(--grey-hover)}.date-picker-container .date-picker-icon{position:absolute;top:50%;right:12px;transform:translateY(-50%);cursor:pointer}form .dynamic-field:last-child{border-bottom:none!important}#checkboxes-container{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}.radio-checkbox-common{display:flex;justify-content:center;align-items:center;cursor:pointer;margin-right:8px;margin-bottom:8px;background-color:var(--text-white);padding:12px 16px;border:1px solid var(--text-muted);border-radius:8px}.radio-checkbox-common p{color:var(--text-muted);cursor:pointer}.radio-checkbox-common img{margin-right:8px}.checkbox-active{background-color:var(--pmry-500)}.checkbox-active p{color:var(--text-white)}#error-messages-container{margin-top:4px;width:100%;display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}#error-messages-container p{color:var(--sem-error)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i3.DropdownComponent, selector: "mis-dropdown", inputs: ["data", "height", "width", "label", "itemSizeForCdk", "showOnlyIcon", "higlightSelectedValue", "dropdownListHeight", "dropdownListWidth", "dropdownListPosition", "config", "searchEnabled", "selectedItem", "noDataMessage", "multiLine", "additionalInfoMessage", "scrollIntoView", "searchLabel", "customStyles", "activeItem"], outputs: ["onChange"] }, { kind: "component", type: i4.SwitchComponent, selector: "mis-switch", inputs: ["mobileView", "checked", "disabled", "control"], outputs: ["valueChanged"] }, { kind: "component", type: i5.MultiSelectDropdownComponent, selector: "mis-multi-select-dropdown", inputs: ["data", "label", "height", "width", "dropdownListHeight", "dropdownListWidth", "dropdownListPosition", "enableSelectAll", "searchEnabled", "showSelectedCount", "noDataMessage", "options", "selectedItems", "hideApplyButton", "customLabelTemplate"], outputs: ["onChange"] }, { kind: "directive", type: i6.TzDatepickerDirective, selector: "input[misTzDp]", inputs: ["dpConfig", "selectedDate", "datesDisabled", "dateMessages", "positionX", "positionY", "offsetX", "offsetY", "allowBookingOnDisabledDay", "disableBoxShadow", "disableOverLay", "openElement"], outputs: ["dateChange"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DynamicFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mis-dynamic-form", template: "<form [formGroup]=\"dynamicForm\">\n  <ng-container formArrayName=\"dynamicFields\">\n    <ng-container [formGroupName]=\"i\" *ngFor=\"let fieldControl of getDynamicFieldsControls().controls; let i = index\">\n        <ng-container\n        [ngTemplateOutlet]=\"dynamicField\"\n        [ngTemplateOutletContext]=\"{\n          $implicit: formFields[i],\n          formGroup: fieldControl,\n          control: fieldControl.controls.value\n        }\"\n      >\n      </ng-container>\n      <div class=\"sub-dynamic-form\" *ngIf=\"fieldControl.value && (!!formFields[i]?.subFields && formFields[i]?.subFields?.length > 0 && matchParentConfig(formFields[i]?.subFields, fieldControl.controls.value.value.value))\">\n        <ng-container *ngFor=\"let subFieldControl of fieldControl.controls.subFields.controls;\">\n          <ng-container\n            [ngTemplateOutlet]=\"dynamicField\"\n            [ngTemplateOutletContext]=\"{\n              $implicit: formFields[i].subFields[findSelectedIndex(formFields[i]?.subFields, fieldControl.controls.value.value.value)],\n              control: subFieldControl\n            }\">\n          </ng-container>\n        </ng-container>\n      </div>\n    </ng-container>\n  </ng-container>\n</form>\n\n\n<ng-template #dynamicField let-field let-control=\"control\" let-formgroup=\"formGroup\">\n\n  <!-- fieldType: 'input' fieldInputType: 'text' | 'number' -->\n  <div class=\"dynamic-field multi-line-field-container\"\n    *ngIf=\"field.fieldType === 'input' && (field.fieldInputType === 'text' || field.fieldInputType === 'number')\">\n    <p class=\"h7 field-title-sm\">\n      {{ field.title }}\n    </p>\n    <div style=\"flex-basis: 100%\"></div>\n    <input class=\"input-field ip-text\" [type]=\"field.fieldInputType\" [formControl]=\"control\"\n      (ngModelChange)=\"updateSubDynamicFields(field, formgroup, $event)\" \n      [ngStyle]=\"{'border': control.touched && control.errors ? '1px solid #B00020': ''}\"\n      [placeholder]=\"field.placeholderText ? field.placeholderText : 'Input Text'\" \n      [min]=\"field.fieldInputType === 'number' ? 0 : '' \"/>\n    <ng-container *ngIf=\"control.touched && control.errors\"\n      [ngTemplateOutlet]=\"dynamicFieldErrors\" \n      [ngTemplateOutletContext]=\"{ $implicit: control.errors }\"\n    >\n    </ng-container>\n  </div>\n\n  <!-- fieldType: 'input' fieldInputType: 'textarea' -->\n  <div class=\"dynamic-field multi-line-field-container\"\n    *ngIf=\"field.fieldType === 'input' && field.fieldInputType === 'textarea'\">\n    <p class=\"h7 field-title-sm\">\n      {{ field.title }}\n    </p>\n    <div style=\"flex-basis: 100%\"></div>\n    <textarea class=\"input-field ip-textarea\" type=\"text\"\n      [ngStyle]=\"{'border': control.touched && control.errors ? '1px solid #B00020': ''}\"\n      [placeholder]=\"field.placeholderText ? field.placeholderText : 'Input Text'\" [formControl]=\"control\" (ngModelChange)=\"updateSubDynamicFields(field, formgroup, $event)\"></textarea>\n      <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n        [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n      </ng-container>\n  </div>\n\n  <!-- fieldType: 'input' fieldInputType: 'date' -->\n  <div class=\"dynamic-field single-line-field-container\"\n    *ngIf=\"field.fieldType === 'input' && field.fieldInputType === 'date'\">\n    <p class=\"h6\">\n      {{ field.title }}\n    </p>\n    <div class=\"date-picker-container\">\n      <input class=\"date-picker\" readonly misTzDp [dpConfig]=\"field.fieldConfig\"\n        (dateChange)=\"control.setValue($event)\" [selectedDate]=\"control.value\" [offsetY]=\"0\"\n        [value]=\"control.value\" #dp />\n      <img alt=\"data-picker\" *ngIf=\"calendarIconUrl\" class=\"date-picker-icon\" [src]=\"calendarIconUrl\"\n        (click)=\"dp.click()\" />\n    </div>\n    <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n      [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n    </ng-container>\n  </div>\n\n  <!-- fieldType: 'boolean' fieldInputType: 'toggle' -->\n  <div class=\"dynamic-field single-line-field-container\"\n    *ngIf=\"field.fieldType === 'boolean' && field.fieldInputType === 'toggle'\">\n    <p class=\"h6\">\n      {{ field.title }}\n    </p>\n    <mis-switch [control]=\"control\" (valueChanged)=\"updateSubDynamicFields(field, formgroup, $event)\"></mis-switch>\n    <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n      [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n    </ng-container>\n  </div>\n\n  <!-- fieldType: 'singleSelect' fieldInputType: 'dropdown' -->\n  <div class=\"dynamic-field single-line-field-container\"\n    *ngIf=\"field.fieldType === 'singleSelect' && field.fieldInputType === 'dropdown'\">\n    <p class=\"h6\">\n      {{ field.title }}\n    </p>\n    <mis-dropdown [searchEnabled]=\"false\" [width]=\"'140px'\" [data]=\"field.itemsList\" [selectedItem]=\"control.value\"\n      (onChange)=\"updateSelectedValueForSingleSelect(field, control, formgroup, $event);\">\n    </mis-dropdown>\n    <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n      [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n    </ng-container>\n  </div>\n\n  <!-- fieldType: 'singleSelect' fieldInputType: 'radio' -->\n  <div class=\"dynamic-field multi-line-field-container\"\n    *ngIf=\"field.fieldType === 'singleSelect' && field.fieldInputType === 'radio'\">\n    <p class=\"h7 field-title-sm\">\n      {{ field.title }}\n    </p>\n    <div style=\"flex-basis: 100%\"></div>\n    <div id=\"checkboxes-container\">\n      <div class=\"radio-checkbox-common\" *ngFor=\"let item of field.itemsList\"\n        [ngClass]=\"{ 'checkbox-active': item.label === control.value?.label }\"\n        (click)=\"updateSelectedValueForSingleSelect(field, control, formgroup, item);\">\n        <img *ngIf=\"(item.label === control.value?.label) && activeBtnIconUrl\" [src]=\"activeBtnIconUrl\" alt=\"\" />\n        <p class=\"h6\">{{ item.label }}</p>\n      </div>\n    </div>\n    <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n      [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n    </ng-container>\n  </div>\n\n  <!-- fieldType: 'multiSelect' fieldInputType: 'checkbox' -->\n  <div class=\"dynamic-field multi-line-field-container\"\n    *ngIf=\"field.fieldType === 'multiSelect' && field.fieldInputType === 'checkbox'\">\n    <p class=\"h7 field-title-sm\">\n      {{ field.title }}\n    </p>\n    <div style=\"flex-basis: 100%\"></div>\n    <div id=\"checkboxes-container\">\n      <div class=\"radio-checkbox-common\" *ngFor=\"let item of field.itemsList\"\n        [ngClass]=\"{ 'checkbox-active': isCheckBoxSelected(item.label, control.value) }\"\n        (click)=\"updateSelectedValueForMultiSelect(field, control, formgroup, [item])\">\n        <img *ngIf=\"isCheckBoxSelected(item.label, control.value) && activeBtnIconUrl\" [src]=\"activeBtnIconUrl\"\n          alt=\"\" />\n        <p class=\"h6\">{{ item.label }}</p>\n      </div>\n    </div>\n    <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n      [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n    </ng-container>\n  </div>\n\n  <!-- fieldType: 'multiSelect' fieldInputType: 'dropdown' -->\n  <div class=\"dynamic-field single-line-field-container\"\n    *ngIf=\"field.fieldType === 'multiSelect' && field.fieldInputType === 'dropdown'\">\n    <p class=\"h6\">\n      {{ field.title }}\n    </p>\n    <mis-multi-select-dropdown [width]=\"'140px'\" [showSelectedCount]=\"true\" [dropdownListWidth]=\"'256px'\"\n      [searchEnabled]=\"false\" [hideApplyButton]=\"true\" [data]=\"field.itemsList\"\n      [selectedItems]=\"control.value\" (onChange)=\"updateSelectedValueForMultiSelect(field, control, formgroup, $event);\"></mis-multi-select-dropdown>\n    <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n      [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n    </ng-container>\n  </div>\n\n</ng-template>\n\n<ng-template #dynamicFieldErrors let-errors>\n  <div id=\"error-messages-container\">\n    <ng-container *ngFor=\"let error of errors | keyvalue\">\n      <p class=\"h8\">\n        {{\" \u2022 &nbsp;\" + error.value}}\n      </p>\n      <div style=\"flex-basis: 100%; height: 0\"></div>\n    </ng-container>\n  </div>\n</ng-template>", styles: ["p{margin:0;cursor:default}::ng-deep .main-container{margin:0;max-width:100%}.sub-dynamic-form{padding-left:24px}.dynamic-field ::ng-deep .container{height:32px!important}.single-line-field-container{display:flex;justify-content:space-between;align-items:center;padding:28px 16px;border-bottom:1px solid var(--grey-seperators)}.multi-line-field-container{display:flex;justify-content:flex-start;align-items:flex-start;padding:28px 16px;flex-wrap:wrap;border-bottom:1px solid var(--grey-seperators)}.field-title-sm{margin-bottom:8px;cursor:default}.input-field{width:100%;background-color:var(--grey-bg-1);border:1px solid var(--grey-seperators);border-radius:6px}.ip-text{height:44px;padding:8px 12px}.ip-textarea{max-height:94px;padding:8px}input:focus{outline:none}input::placeholder{color:var(--grey-seperators)}textarea:focus{outline:none}.date-picker-container{position:relative;width:140px}.date-picker-container .date-picker{cursor:pointer;height:32px;width:100%;font-size:14px;border-radius:6px;padding:0 12px;border:1px solid var(--grey-seperators);inset:10px auto auto 80px;background-color:var(--text-white)}.date-picker-container .date-picker:hover{background-color:var(--grey-hover)}.date-picker-container .date-picker-icon{position:absolute;top:50%;right:12px;transform:translateY(-50%);cursor:pointer}form .dynamic-field:last-child{border-bottom:none!important}#checkboxes-container{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}.radio-checkbox-common{display:flex;justify-content:center;align-items:center;cursor:pointer;margin-right:8px;margin-bottom:8px;background-color:var(--text-white);padding:12px 16px;border:1px solid var(--text-muted);border-radius:8px}.radio-checkbox-common p{color:var(--text-muted);cursor:pointer}.radio-checkbox-common img{margin-right:8px}.checkbox-active{background-color:var(--pmry-500)}.checkbox-active p{color:var(--text-white)}#error-messages-container{margin-top:4px;width:100%;display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}#error-messages-container p{color:var(--sem-error)}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { formFields: [{
+                type: Input
+            }], formValues: [{
+                type: Input
+            }], activeBtnIconUrl: [{
+                type: Input
+            }], calendarIconUrl: [{
+                type: Input
+            }], formUpdated: [{
+                type: Output
+            }], formValid: [{
+                type: Output
+            }], formInitialized: [{
+                type: Output
+            }] } });
+const dynamicFieldValidator = (validators) => {
+    return (control) => {
+        let value = control.value;
+        if (Array.isArray(value)) {
+            return null;
+        }
+        else if (typeof value === 'object') {
+            value = value?.value ? value.value : '';
+        }
+        let errors = null;
+        validators.forEach((validator) => {
+            let error = null;
+            let message = validator.message;
+            switch (validator.type) {
+                case "Required":
+                    error = Validators.required(control);
+                    if (error)
+                        error = { Required: message };
+                    break;
+                case "MinLength":
+                    error = Validators.minLength(+validator.value)(control);
+                    message = message.replace('${0}', error?.minlength.requiredLength);
+                    if (error)
+                        error = { MinLength: message };
+                    break;
+                case "MaxLength":
+                    error = Validators.maxLength(+validator.value)(control);
+                    message = message.replace('${0}', error?.actualLength);
+                    if (error)
+                        error = { MaxLength: message };
+                    break;
+                case "Email":
+                    error = Validators.email(control);
+                    if (error)
+                        error = { Email: message };
+                    break;
+                case "Custom":
+                    error = Validators.pattern(`${validator.value}`)(control);
+                    if (error)
+                        error = { Custom: message };
+                    break;
+                default:
+                    break;
+            }
+            if (error)
+                errors = { ...errors, ...error };
+        });
+        return errors;
+    };
+};
+
+class DynamicFormModule {
+    static forRoot() {
+        return { ngModule: DynamicFormModule, providers: [] };
+    }
+}
+DynamicFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DynamicFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DynamicFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: DynamicFormModule, declarations: [DynamicFormComponent], imports: [CommonModule,
+        ReactiveFormsModule,
+        FormsModule,
+        OverlayModule,
+        ScrollingModule,
+        DropdownModule,
+        SwitchModule,
+        MultiSelectDropdownModule,
+        DatepickerModuleV2], exports: [DynamicFormComponent] });
+DynamicFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DynamicFormModule, imports: [CommonModule,
+        ReactiveFormsModule,
+        FormsModule,
+        OverlayModule,
+        ScrollingModule,
+        DropdownModule,
+        SwitchModule,
+        MultiSelectDropdownModule,
+        DatepickerModuleV2] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DynamicFormModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [DynamicFormComponent],
+                    imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        FormsModule,
+                        OverlayModule,
+                        ScrollingModule,
+                        DropdownModule,
+                        SwitchModule,
+                        MultiSelectDropdownModule,
+                        DatepickerModuleV2
+                    ],
+                    exports: [DynamicFormComponent]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DynamicFormComponent, DynamicFormModule };
+//# sourceMappingURL=mis-crystal-design-system-dynamic-form.mjs.map

package/fesm2020/mis-crystal-design-system-dynamic-form.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mis-crystal-design-system-dynamic-form.mjs","sources":["../../../projects/mis-components/dynamic-form/dynamic-form.component.ts","../../../projects/mis-components/dynamic-form/dynamic-form.component.html","../../../projects/mis-components/dynamic-form/dynamic-form.module.ts","../../../projects/mis-components/dynamic-form/mis-crystal-design-system-dynamic-form.ts"],"sourcesContent":["import { Component, EventEmitter, HostListener, Input, OnDestroy, OnInit, Output } from \"@angular/core\";\nimport { NsDynamicForm } from \"./dynamic-form.namespace\";\nimport { AbstractControl, UntypedFormArray, UntypedFormControl, UntypedFormGroup, ValidationErrors, ValidatorFn, Validators } from \"@angular/forms\";\n\nimport * as moment from \"moment\";\nimport \"moment-timezone\";\nimport { Subscription } from \"rxjs\";\n\n@Component({\n  selector: \"mis-dynamic-form\",\n  templateUrl: \"./dynamic-form.component.html\",\n  styleUrls: [\"./dynamic-form.component.scss\"]\n})\nexport class DynamicFormComponent implements OnInit, OnDestroy {\n  /**\n   * formFields:  Dynamic fields recieved from the API metadata to build a dynamic form\n   * formValues:  Holds the value of the dynamic form with \"key\" being dynamic field \"title\"\n   *              and value being the user input.\n   */\n  @Input() formFields: Array<NsDynamicForm.IDynamicField> = [];\n  @Input() formValues: { [key: string]: any } = {};\n  // Need to deprecate these inputs and use constants.\n  @Input() activeBtnIconUrl = \"\";\n  @Input() calendarIconUrl = \"\";\n  /**\n   * dynamicForm: Constructed using formFields and formValues(in case of edit)\n   */\n  dynamicForm: UntypedFormGroup;\n\n  /**\n   * formUpdated: Emits formValues Object whenever there is a change in the dynamic form.\n   */\n  @Output() formUpdated = new EventEmitter<{ [key: string]: any }>();\n  /**\n   * formValid: Emits boolean depending on validity of the form\n   */\n  @Output() formValid = new EventEmitter<boolean>();\n  /**\n   * formInitialized: Emits dynamic form API on form initilization\n   */\n  @Output() formInitialized = new EventEmitter<any>();\n\n  dynamicFormAPI: NsDynamicForm.IDynamicFormAPI;\n  valueChangesSubscription$: Subscription;\n\n  constructor() {}\n\n  ngOnInit(): void {\n    // Building the form\n    this.dynamicForm = this.generateDynamicForm(this.formFields, this.formValues);\n\n    // Subscribing to form changes and emiting values.\n    this.valueChangesSubscription$ = this.dynamicForm.valueChanges.subscribe(formValue => {\n      this.onFormValueChanges();\n    });\n\n    //api to expose functions\n    this.dynamicFormAPI = {\n      defaultFormValues: () => {\n        return this.generateDynamicFieldsValueObject(this.dynamicForm.value.dynamicFields);\n      }\n    };\n    this.formInitialized.emit(this.dynamicFormAPI);\n    this.formValid.emit(this.dynamicForm.valid);\n  }\n  ngOnDestroy(): void {\n    this.valueChangesSubscription$?.unsubscribe();\n  }\n  onFormValueChanges(): void {\n    let formValues = this.generateDynamicFieldsValueObject(this.dynamicForm.value.dynamicFields);\n    this.formValid.emit(this.dynamicForm.valid);\n    this.formUpdated.emit(formValues);\n    console.log(formValues)\n  }\n  generateDynamicFieldsValueObject(formValues: Array<any>): { [key: string]: any } {\n    let dynamicFieldsValue = {};\n    formValues.forEach((fieldValue, index) => {\n      let formattedValue = this.mapFormFieldToFormValue(this.formFields[index], fieldValue.value);\n      if (fieldValue.subFields?.length > 0) {\n        let formattedSubFieldsValues = {}\n        fieldValue.subFields.forEach((subFieldValue, subIndex) => {\n          let subFormField = this.formFields[index].subFields[subIndex]\n          formattedSubFieldsValues[subFormField.configName] = this.mapFormFieldToFormValue(subFormField, subFieldValue)\n        })\n        dynamicFieldsValue[this.formFields[index].configName] = {\n          value: formattedValue,\n          subFields: formattedSubFieldsValues\n        }\n      }\n      else {\n        dynamicFieldsValue[this.formFields[index].configName] = formattedValue;\n      }\n    });\n    return dynamicFieldsValue;\n  }\n  generateDynamicForm(\n    formFields: Array<NsDynamicForm.IDynamicField>,\n    formValues: { [key: string]: any }\n  ): UntypedFormGroup {\n    let formArray = new UntypedFormArray([])\n\n    for (let field of formFields) {\n      let fieldValue = formValues[field.configName]?.value ? formValues[field.configName].value : formValues[field.configName]\n      let fieldControl = this.mapFormValueToFormField(field, fieldValue);\n      let subFieldsControls = this.generateSubDynamicFields(formValues, field, fieldControl.value);\n      formArray.push(new UntypedFormGroup({\n        value: fieldControl,\n        subFields: subFieldsControls\n      }))\n    }  \n    return new UntypedFormGroup({\n      dynamicFields: formArray\n    })\n  }\n  \n  getDynamicFieldsControls(): UntypedFormArray {\n    return this.dynamicForm.get(\"dynamicFields\") as UntypedFormArray;\n  }\n  updateSubDynamicFields(\n    field: NsDynamicForm.IDynamicField,\n    formGroup: UntypedFormGroup,\n    value: any\n  ): void {\n    if (field.subFields?.length > 0) {\n      let subFieldsControls = this.generateSubDynamicFields(this.formValues, field, value);\n      formGroup.removeControl('subFields')\n      formGroup.addControl('subFields', subFieldsControls)\n    }\n  }\n  updateSelectedValueForSingleSelect(\n    field: NsDynamicForm.IDynamicField,\n    control: UntypedFormControl,\n    formGroup: UntypedFormGroup,\n    value: any\n  ): void {\n    if (control.value?.value !== value.value) {\n      control.setValue(value);\n    }\n    else control.setValue('');\n    this.updateSubDynamicFields(field, formGroup, value);\n    control.markAsTouched();\n  }\n  updateSelectedValueForMultiSelect(\n    field: NsDynamicForm.IDynamicField,\n    control: UntypedFormControl,\n    formGroup: UntypedFormGroup,\n    values: Array<any>\n  ): void {\n    let selectedValues: Array<{ label: string; value: any }> = control.value;\n    for (let value of values) {\n      let itemIndex = selectedValues.findIndex(item => item.label === value.label);\n      if (itemIndex > -1) {\n        selectedValues.splice(itemIndex, 1);\n      } else {\n        selectedValues.push({ ...value });\n      }\n    }\n    control.setValue(selectedValues);\n    this.updateSubDynamicFields(field, formGroup, values);\n    control.markAsTouched();\n  }\n  isCheckBoxSelected(value: string, selectedValues: Array<{ label: string; value: string }>): boolean {\n    return selectedValues.findIndex(item => item.label === value) > -1;\n  }\n\n  findSelectedIndex(subfields, value) {\n    const selectedIndex = subfields.findIndex(item => item.parentConfigValue === value);\n    return selectedIndex !== -1 ? selectedIndex : 0;\n  }\n\n  matchParentConfig(subfields, value) {\n    if (!subfields || subfields.length === 0) {\n      return false;\n    }\n    return subfields.some(item => item.parentConfigValue === value);\n  }\n\n  generateSubDynamicFields(\n    formValues: any,\n    parentField: NsDynamicForm.IDynamicField,\n    parentValue: Array<{ label: string, value: string | number }> | {label: string, value: string } | string | number | boolean\n  ): UntypedFormArray {\n    let controls = new UntypedFormArray([])\n    let subFields = parentField.subFields\n    let subFieldsValues = formValues[parentField.configName]?.subFields ? formValues[parentField.configName].subFields : {}\n    if(!subFields) return controls;\n    if (parentField.fieldType === 'singleSelect') {\n      subFields = subFields.filter((subField) => subField.parentConfigValue === (<{label: string, value: string }>parentValue)?.value);\n    }\n    else if (parentField.fieldType === 'multiSelect') {\n      let parentValues = new Set((<Array<{ label: string, value: string | number }>>parentValue).map((value) => value.value));\n      subFields = subFields.filter((subField) => parentValues.has(subField.parentConfigValue));\n    }\n\n    if (subFields?.length > 0) {\n        for (let subField of subFields) {\n          controls.push(this.mapFormValueToFormField(subField, subFieldsValues[subField.configName]))\n        }\n      }\n    return controls;\n  }\n  mapFormValueToFormField(formField: NsDynamicForm.IDynamicField, formValue: any): any {\n    let validators = formField.validators ? [dynamicFieldValidator(formField.validators)]: []\n    let control = new UntypedFormControl(null, validators);\n\n    if (formField.fieldType === \"input\") {\n      if (formField.fieldInputType === \"text\" || formField.fieldInputType === \"textarea\") control.setValue(formValue ? formValue : \"\");\n      else if (formField.fieldInputType === \"number\") control.setValue(formValue ? formValue : 0);\n      else if (formField.fieldInputType === \"date\") {\n        if (formValue && typeof formValue === \"number\") {\n          control.setValue(moment(formValue).tz(formField.fieldConfig.timezone).format(formField.fieldConfig.format));\n        } else {\n          control.setValue(moment().tz(formField.fieldConfig.timezone).format(formField.fieldConfig.format));\n        }\n      }\n    } else if (formField.fieldType === \"singleSelect\") {\n      const findSelectedValue = () => {\n        let index = formField.itemsList.findIndex(item => item.value === formValue)\n        return index >= 0 ? formField.itemsList[index]: \"\";\n      }\n      if (formField.fieldInputType === \"dropdown\") {\n        if (!formValue) control.setValue(formField.itemsList[0]);\n        else control.setValue(findSelectedValue())\n      }\n      else if (formField.fieldInputType === \"radio\") {\n        control.setValue(findSelectedValue())\n      }\n    } else if (formField.fieldType === \"multiSelect\") {\n      if (formValue && Array.isArray(formValue)) {\n        let selectedValues = [];\n        for (let value of formValue) {\n          let index = formField.itemsList.findIndex(item => item.value === value);\n          if (index > -1) selectedValues.push({ ...formField.itemsList[index] });\n        }\n        control.setValue(selectedValues);\n      } else {\n        control.setValue([]);\n      }\n    } else if (formField.fieldType === \"boolean\") {\n      control.setValue(!!formValue);\n    } else control.setValue(null);\n    return control;\n  }\n  mapFormFieldToFormValue(formField: NsDynamicForm.IDynamicField, formValue: any): any {\n    if (formField.fieldType === \"input\") {\n      if (formField.fieldInputType === \"text\" || formField.fieldInputType === \"textarea\") return formValue;\n      else if (formField.fieldInputType === \"number\") return +formValue;\n      else if (formField.fieldInputType === \"date\") {\n        return moment.tz(formValue, formField.fieldConfig.format, formField.fieldConfig.timezone).valueOf();\n      }\n    } else if (formField.fieldType === \"singleSelect\") {\n      return formValue?.value ?? '';\n    } else if (formField.fieldType === \"multiSelect\") {\n      return formValue?.map(item => item.value);\n    } else if (formField.fieldType === \"boolean\") {\n      return formValue;\n    } else return formValue;\n  }\n}\n\nexport const dynamicFieldValidator = (validators: Array<NsDynamicForm.IDynamicFieldValidator>): ValidatorFn => {\n  return (control: AbstractControl): ValidationErrors | null => {\n    let value = control.value\n    if (Array.isArray(value)) {\n      return null;\n    }\n    else if (typeof value === 'object') {\n      value = value?.value ? value.value : ''\n    }\n    let errors = null\n\n    validators.forEach((validator) => {\n      let error = null\n      let message = validator.message\n      switch (validator.type) {\n        case \"Required\":\n          error = Validators.required(control)\n          if(error) error = {Required: message}\n          break;\n        case \"MinLength\":\n          error = Validators.minLength(+validator.value)(control)\n          message = message.replace('${0}', error?.minlength.requiredLength)\n          if(error) error = { MinLength: message }\n          break;\n        case \"MaxLength\":\n          error = Validators.maxLength(+validator.value)(control)\n          message = message.replace('${0}', error?.actualLength)\n          if(error) error = { MaxLength: message }\n          break;\n        case \"Email\":\n          error = Validators.email(control)\n          if(error) error = {Email: message}\n          break;\n        case \"Custom\":\n          error = Validators.pattern(`${validator.value}`)(control)\n          if(error) error = {Custom: message}\n          break;\n        default:\n          break;\n      }\n      if (error) errors = { ...errors, ...error }\n    })\n    return errors\n  }\n}","<form [formGroup]=\"dynamicForm\">\n  <ng-container formArrayName=\"dynamicFields\">\n    <ng-container [formGroupName]=\"i\" *ngFor=\"let fieldControl of getDynamicFieldsControls().controls; let i = index\">\n        <ng-container\n        [ngTemplateOutlet]=\"dynamicField\"\n        [ngTemplateOutletContext]=\"{\n          $implicit: formFields[i],\n          formGroup: fieldControl,\n          control: fieldControl.controls.value\n        }\"\n      >\n      </ng-container>\n      <div class=\"sub-dynamic-form\" *ngIf=\"fieldControl.value && (!!formFields[i]?.subFields && formFields[i]?.subFields?.length > 0 && matchParentConfig(formFields[i]?.subFields, fieldControl.controls.value.value.value))\">\n        <ng-container *ngFor=\"let subFieldControl of fieldControl.controls.subFields.controls;\">\n          <ng-container\n            [ngTemplateOutlet]=\"dynamicField\"\n            [ngTemplateOutletContext]=\"{\n              $implicit: formFields[i].subFields[findSelectedIndex(formFields[i]?.subFields, fieldControl.controls.value.value.value)],\n              control: subFieldControl\n            }\">\n          </ng-container>\n        </ng-container>\n      </div>\n    </ng-container>\n  </ng-container>\n</form>\n\n\n<ng-template #dynamicField let-field let-control=\"control\" let-formgroup=\"formGroup\">\n\n  <!-- fieldType: 'input' fieldInputType: 'text' | 'number' -->\n  <div class=\"dynamic-field multi-line-field-container\"\n    *ngIf=\"field.fieldType === 'input' && (field.fieldInputType === 'text' || field.fieldInputType === 'number')\">\n    <p class=\"h7 field-title-sm\">\n      {{ field.title }}\n    </p>\n    <div style=\"flex-basis: 100%\"></div>\n    <input class=\"input-field ip-text\" [type]=\"field.fieldInputType\" [formControl]=\"control\"\n      (ngModelChange)=\"updateSubDynamicFields(field, formgroup, $event)\" \n      [ngStyle]=\"{'border': control.touched && control.errors ? '1px solid #B00020': ''}\"\n      [placeholder]=\"field.placeholderText ? field.placeholderText : 'Input Text'\" \n      [min]=\"field.fieldInputType === 'number' ? 0 : '' \"/>\n    <ng-container *ngIf=\"control.touched && control.errors\"\n      [ngTemplateOutlet]=\"dynamicFieldErrors\" \n      [ngTemplateOutletContext]=\"{ $implicit: control.errors }\"\n    >\n    </ng-container>\n  </div>\n\n  <!-- fieldType: 'input' fieldInputType: 'textarea' -->\n  <div class=\"dynamic-field multi-line-field-container\"\n    *ngIf=\"field.fieldType === 'input' && field.fieldInputType === 'textarea'\">\n    <p class=\"h7 field-title-sm\">\n      {{ field.title }}\n    </p>\n    <div style=\"flex-basis: 100%\"></div>\n    <textarea class=\"input-field ip-textarea\" type=\"text\"\n      [ngStyle]=\"{'border': control.touched && control.errors ? '1px solid #B00020': ''}\"\n      [placeholder]=\"field.placeholderText ? field.placeholderText : 'Input Text'\" [formControl]=\"control\" (ngModelChange)=\"updateSubDynamicFields(field, formgroup, $event)\"></textarea>\n      <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n        [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n      </ng-container>\n  </div>\n\n  <!-- fieldType: 'input' fieldInputType: 'date' -->\n  <div class=\"dynamic-field single-line-field-container\"\n    *ngIf=\"field.fieldType === 'input' && field.fieldInputType === 'date'\">\n    <p class=\"h6\">\n      {{ field.title }}\n    </p>\n    <div class=\"date-picker-container\">\n      <input class=\"date-picker\" readonly misTzDp [dpConfig]=\"field.fieldConfig\"\n        (dateChange)=\"control.setValue($event)\" [selectedDate]=\"control.value\" [offsetY]=\"0\"\n        [value]=\"control.value\" #dp />\n      <img alt=\"data-picker\" *ngIf=\"calendarIconUrl\" class=\"date-picker-icon\" [src]=\"calendarIconUrl\"\n        (click)=\"dp.click()\" />\n    </div>\n    <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n      [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n    </ng-container>\n  </div>\n\n  <!-- fieldType: 'boolean' fieldInputType: 'toggle' -->\n  <div class=\"dynamic-field single-line-field-container\"\n    *ngIf=\"field.fieldType === 'boolean' && field.fieldInputType === 'toggle'\">\n    <p class=\"h6\">\n      {{ field.title }}\n    </p>\n    <mis-switch [control]=\"control\" (valueChanged)=\"updateSubDynamicFields(field, formgroup, $event)\"></mis-switch>\n    <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n      [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n    </ng-container>\n  </div>\n\n  <!-- fieldType: 'singleSelect' fieldInputType: 'dropdown' -->\n  <div class=\"dynamic-field single-line-field-container\"\n    *ngIf=\"field.fieldType === 'singleSelect' && field.fieldInputType === 'dropdown'\">\n    <p class=\"h6\">\n      {{ field.title }}\n    </p>\n    <mis-dropdown [searchEnabled]=\"false\" [width]=\"'140px'\" [data]=\"field.itemsList\" [selectedItem]=\"control.value\"\n      (onChange)=\"updateSelectedValueForSingleSelect(field, control, formgroup, $event);\">\n    </mis-dropdown>\n    <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n      [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n    </ng-container>\n  </div>\n\n  <!-- fieldType: 'singleSelect' fieldInputType: 'radio' -->\n  <div class=\"dynamic-field multi-line-field-container\"\n    *ngIf=\"field.fieldType === 'singleSelect' && field.fieldInputType === 'radio'\">\n    <p class=\"h7 field-title-sm\">\n      {{ field.title }}\n    </p>\n    <div style=\"flex-basis: 100%\"></div>\n    <div id=\"checkboxes-container\">\n      <div class=\"radio-checkbox-common\" *ngFor=\"let item of field.itemsList\"\n        [ngClass]=\"{ 'checkbox-active': item.label === control.value?.label }\"\n        (click)=\"updateSelectedValueForSingleSelect(field, control, formgroup, item);\">\n        <img *ngIf=\"(item.label === control.value?.label) && activeBtnIconUrl\" [src]=\"activeBtnIconUrl\" alt=\"\" />\n        <p class=\"h6\">{{ item.label }}</p>\n      </div>\n    </div>\n    <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n      [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n    </ng-container>\n  </div>\n\n  <!-- fieldType: 'multiSelect' fieldInputType: 'checkbox' -->\n  <div class=\"dynamic-field multi-line-field-container\"\n    *ngIf=\"field.fieldType === 'multiSelect' && field.fieldInputType === 'checkbox'\">\n    <p class=\"h7 field-title-sm\">\n      {{ field.title }}\n    </p>\n    <div style=\"flex-basis: 100%\"></div>\n    <div id=\"checkboxes-container\">\n      <div class=\"radio-checkbox-common\" *ngFor=\"let item of field.itemsList\"\n        [ngClass]=\"{ 'checkbox-active': isCheckBoxSelected(item.label, control.value) }\"\n        (click)=\"updateSelectedValueForMultiSelect(field, control, formgroup, [item])\">\n        <img *ngIf=\"isCheckBoxSelected(item.label, control.value) && activeBtnIconUrl\" [src]=\"activeBtnIconUrl\"\n          alt=\"\" />\n        <p class=\"h6\">{{ item.label }}</p>\n      </div>\n    </div>\n    <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n      [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n    </ng-container>\n  </div>\n\n  <!-- fieldType: 'multiSelect' fieldInputType: 'dropdown' -->\n  <div class=\"dynamic-field single-line-field-container\"\n    *ngIf=\"field.fieldType === 'multiSelect' && field.fieldInputType === 'dropdown'\">\n    <p class=\"h6\">\n      {{ field.title }}\n    </p>\n    <mis-multi-select-dropdown [width]=\"'140px'\" [showSelectedCount]=\"true\" [dropdownListWidth]=\"'256px'\"\n      [searchEnabled]=\"false\" [hideApplyButton]=\"true\" [data]=\"field.itemsList\"\n      [selectedItems]=\"control.value\" (onChange)=\"updateSelectedValueForMultiSelect(field, control, formgroup, $event);\"></mis-multi-select-dropdown>\n    <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n      [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n    </ng-container>\n  </div>\n\n</ng-template>\n\n<ng-template #dynamicFieldErrors let-errors>\n  <div id=\"error-messages-container\">\n    <ng-container *ngFor=\"let error of errors | keyvalue\">\n      <p class=\"h8\">\n        {{\" • &nbsp;\" + error.value}}\n      </p>\n      <div style=\"flex-basis: 100%; height: 0\"></div>\n    </ng-container>\n  </div>\n</ng-template>","import { CommonModule } from \"@angular/common\";\nimport { FormsModule } from \"@angular/forms\";\nimport { NgModule, ModuleWithProviders } from \"@angular/core\";\nimport { OverlayModule } from \"@angular/cdk/overlay\";\nimport { ScrollingModule } from \"@angular/cdk-experimental/scrolling\";\nimport { DropdownModule } from \"mis-crystal-design-system/dropdown\";\nimport { ReactiveFormsModule } from \"@angular/forms\";\nimport { DynamicFormComponent } from \"./dynamic-form.component\";\nimport { SwitchModule } from \"mis-crystal-design-system/switch\";\nimport { MultiSelectDropdownModule } from \"mis-crystal-design-system/multi-select-dropdown\";\nimport { DatepickerModuleV2 } from \"mis-crystal-design-system/datepicker_v2\";\n\n@NgModule({\n  declarations: [DynamicFormComponent],\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    FormsModule,\n    OverlayModule,\n    ScrollingModule,\n    DropdownModule,\n    SwitchModule,\n    MultiSelectDropdownModule,\n    DatepickerModuleV2\n  ],\n  exports: [DynamicFormComponent]\n})\nexport class DynamicFormModule {\n  static forRoot(): ModuleWithProviders<DynamicFormModule> {\n    return { ngModule: DynamicFormModule, providers: [] };\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}