mis-crystal-design-system 4.0.51 → 14.0.1

package/fesm2015/mis-crystal-design-system-dropdown.js

@@ -1,232 +0,0 @@
-import { ConnectionPositionPair, OverlayConfig, Overlay, OverlayModule } from '@angular/cdk/overlay';
-import { TemplatePortal } from '@angular/cdk/portal';
-import { EventEmitter, Component, ElementRef, ViewContainerRef, Input, Output, ViewChild, Directive, NgModule } from '@angular/core';
-import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { ScrollingModule } from '@angular/cdk-experimental/scrolling';
-import { LoaderModule } from 'mis-crystal-design-system/loader';
-
-class DropdownComponent {
-    constructor(eRef, overlay, viewContainerRef) {
-        this.eRef = eRef;
-        this.overlay = overlay;
-        this.viewContainerRef = viewContainerRef;
-        this.isOpen = false;
-        this.loading = false;
-        this.isSearchInputFocused = false;
-        this.searchInput = "";
-        this.searchData = [];
-        this.visibleItems = 10;
-        this.data = [];
-        this.height = "";
-        this.width = "";
-        this.label = "Select";
-        this.showOnlyIcon = false;
-        this.higlightSelectedValue = false;
-        this.dropdownListHeight = "";
-        this.dropdownListWidth = "";
-        this.dropdownListPosition = "Left";
-        this.searchEnabled = true;
-        this.selectedItem = { value: "", label: "" };
-        this.noDataMessage = "No Data";
-        this.multiLine = false;
-        this.scrollIntoView = false;
-        this.searchLabel = "Search Keyword";
-        this.activeItem = false;
-        this.onChange = new EventEmitter();
-    }
-    ngOnInit() {
-    }
-    getIconStyles(item, activeItem) {
-        return {
-            'color': item && activeItem ? '#0937B2' : '',
-            'font-weight': item && activeItem ? '700' : ''
-        };
-    }
-    setUpAsyncDataSearch() {
-        if (this.config) {
-            this.loading = true;
-            this.config.dataStream().pipe().subscribe(res => {
-                this.data = res;
-                this.loading = false;
-            });
-        }
-        const index = this.data.findIndex((dataItem) => dataItem.value === this.selectedItem.value);
-        if (this.scrollIntoView)
-            this.viewPort.scrollToIndex(index, 'smooth');
-    }
-    filterByValue(array, string) {
-        return array.filter(o => o.label.toLowerCase().includes(string.toLowerCase().trim()));
-    }
-    filterByPrimaryText(array, string) {
-        return array.filter(o => o.label.primaryText.toLowerCase().includes(string.toLowerCase().trim()));
-    }
-    searchInputOnChange(newValue) {
-        this.searchInput = newValue;
-        if (newValue) {
-            this.searchData = this.multiLine ? this.filterByPrimaryText(this.data, newValue) : this.filterByValue(this.data, newValue);
-        }
-        else {
-            this.searchData = [];
-            this.searchInput = "";
-        }
-    }
-    searchInputFocused(isFocused) {
-        this.isSearchInputFocused = isFocused;
-    }
-    searchInputCanceled(event) {
-        event.stopPropagation();
-        this.searchInput = "";
-        this.isSearchInputFocused = false;
-    }
-    toggleDropdown() {
-        this.isOpen = !this.isOpen;
-        if (this.isOpen)
-            this.openDropdown(this.popupContainer, this.selectElement.nativeElement);
-        else
-            this.onCancel();
-    }
-    openDropdown(template, origin) {
-        const positionsBottom = [
-            new ConnectionPositionPair({ originX: "start", originY: "bottom" }, { overlayX: "start", overlayY: "top" }, 0, 4),
-            new ConnectionPositionPair({ originX: "end", originY: "bottom" }, { overlayX: "end", overlayY: "top" }, 0, 4)
-        ];
-        const positionsTop = [
-            new ConnectionPositionPair({ originX: "start", originY: "top" }, { overlayX: "start", overlayY: "bottom" }, 0, -4),
-            new ConnectionPositionPair({ originX: "end", originY: "top" }, { overlayX: "end", overlayY: "bottom" }, 0, -4)
-        ];
-        const positionStrategy = this.overlay
-            .position()
-            .flexibleConnectedTo(origin)
-            .withPositions([
-            ...(this.dropdownListPosition === "Right" ? positionsBottom.reverse() : positionsBottom),
-            ...(this.dropdownListPosition === "Right" ? positionsTop.reverse() : positionsTop)
-        ])
-            .withPush(true);
-        const configs = new OverlayConfig({
-            hasBackdrop: true,
-            backdropClass: "cdk-overlay-transparent-backdrop",
-            scrollStrategy: this.overlay.scrollStrategies.reposition(),
-            positionStrategy,
-            width: origin.clientWidth
-        });
-        this.overlayRef = this.overlay.create(configs);
-        if (this.dropdownListWidth)
-            this.overlayRef.updateSize({ width: this.dropdownListWidth });
-        if (this.dropdownListHeight)
-            this.overlayRef.updateSize({ height: this.dropdownListHeight });
-        this.overlayRef.attach(new TemplatePortal(template, this.viewContainerRef));
-        this.overlayRef.backdropClick().subscribe(res => {
-            this.onCancel();
-        });
-    }
-    selectItem(item) {
-        this.onChange.emit(item);
-        this.toggleDropdown();
-    }
-    onCancel() {
-        var _a;
-        this.isSearchInputFocused = false;
-        this.isOpen = false;
-        (_a = this.overlayRef) === null || _a === void 0 ? void 0 : _a.detach();
-        this.searchInput = "";
-    }
-}
-DropdownComponent.decorators = [
-    { type: Component, args: [{
-                selector: "mis-dropdown",
-                template: "<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\">\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",
-                styles: [".main-container{position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;height:32px;width:256px;font-family:Lato,sans-serif!important}.main-container .dropdown{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;height:inherit;border:1px solid #e0e0e0;border-radius:6px;background-color:#fff;cursor:pointer;display:flex;justify-content:space-between;align-items:center;width:100%;box-sizing:border-box;padding:0 12px}.main-container .dropdown:focus-visible,.main-container .dropdown:hover{background-color:#f5f7fc;outline:none}.main-container .dropdown .label{box-sizing:border-box;display:flex;justify-content:flex-start;align-items:center;width:calc(100% - 32px)}.main-container .dropdown .label,.main-container .dropdown .label .text{font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.main-container .dropdown .label .text{margin:0!important;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.main-container .dropdown .label .count{background-color:#e0e0e0;border-radius:50%;padding:2px 7px;margin:0}.main-container .dropdown .handle{width:24px;height:24px;transition:.3s;position:absolute;right:12px;border-radius:50%;overflow:hidden}.main-container .dropdown .img-container{width:20px;height:20px}.main-container .dropdown-port{background:#e6ebf7}.popup-container{width:100%;max-height:340px;padding-bottom:0;border:1px solid #e0e0e0;border-radius:8px;background-color:#fff;box-shadow:0 12px 24px 0 rgba(0,0,0,.12);display:flex;flex-direction:column;overflow:hidden;justify-content:space-between}.popup-container::-webkit-scrollbar{width:0;height:0}.popup-container .search-container{position:relative;box-sizing:border-box;padding:8px}.popup-container .search-container .search-icon{position:absolute;width:24px;height:24px;top:50%;transform:translateY(-50%);left:18px;z-index:1}.popup-container .search-container .search-input{height:40px;width:100%;padding:12px;border:1px solid #e0e0e0;box-sizing:border-box;border-radius:8px;outline:none;caret-color:#0937b2;font-style:normal;font-weight:400;font-size:12px;line-height:18px;display:flex;align-items:center;letter-spacing:.2px;color:#181f33}.popup-container .search-container .cancel-icon{position:absolute;cursor:pointer;width:24px;height:24px;top:50%;transform:translateY(-50%);right:18px;z-index:1}.popup-container .items{padding:8px 0 8px 8px;overflow-y:scroll}.popup-container .items::-webkit-scrollbar{width:5px;height:0}.popup-container .items::-webkit-scrollbar-thumb{background:#9aa7b4;border-radius:10px}.popup-container .items .noData{display:flex;justify-content:center;align-items:center;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.popup-container .items .dropdown-viewport{height:200px}.popup-container .items .dropdown-viewport .item{cursor:pointer;display:flex;justify-content:flex-start;align-items:center;gap:10px;padding:8px 12px;border-radius:6px;height:auto;letter-spacing:.2px;color:#181f33}.popup-container .items .dropdown-viewport .item:focus-visible,.popup-container .items .dropdown-viewport .item:hover{background-color:#f5f7fc;outline:none}.popup-container .items .dropdown-viewport .item .label{width:100%;line-height:20px;font-size:14px;font-style:normal;font-weight:400;text-overflow:ellipsis;overflow:hidden}.popup-container .items .dropdown-viewport .item .label .primaryText{color:#181f33;font-family:Lato;font-size:14px;line-height:20px;letter-spacing:.2px}.popup-container .items .dropdown-viewport .item .label .secondaryText{color:#6a737d;font-family:Lato;font-size:14px;line-height:20px;letter-spacing:.2px}.popup-container .items .dropdown-viewport .item .icon-container{width:10%;display:flex;justify-content:flex-end}.popup-container .items .dropdown-viewport .item .icon-container .icon{width:20px;height:20px}.popup-container .items .item-disabled{cursor:not-allowed!important}.popup-container .items .item-disabled:focus-visible,.popup-container .items .item-disabled:hover{background-color:transparent!important;outline:none!important}.popup-container .items .item-disabled .label>span{color:#929dab!important;-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.popup-container .items .item-selected{background-color:#e0e6f6;outline:none}.popup-container .items .icon-only{justify-content:center!important}::-webkit-scrollbar{height:8px;width:8px;background:#fff;border-radius:13px}::-webkit-scrollbar-thumb{background:#c8cdd3;border-radius:13px;cursor:pointer}.status-container{display:flex;justify-content:center;align-items:center;height:128px}.status-container p{text-align:center}"]
-            },] }
-];
-DropdownComponent.ctorParameters = () => [
-    { type: ElementRef },
-    { type: Overlay },
-    { type: ViewContainerRef }
-];
-DropdownComponent.propDecorators = {
-    data: [{ type: Input }],
-    height: [{ type: Input }],
-    width: [{ type: Input }],
-    label: [{ type: Input }],
-    itemSizeForCdk: [{ type: Input }],
-    showOnlyIcon: [{ type: Input }],
-    higlightSelectedValue: [{ type: Input }],
-    dropdownListHeight: [{ type: Input }],
-    dropdownListWidth: [{ type: Input }],
-    dropdownListPosition: [{ type: Input }],
-    config: [{ type: Input }],
-    searchEnabled: [{ type: Input }],
-    selectedItem: [{ type: Input }],
-    noDataMessage: [{ type: Input }],
-    multiLine: [{ type: Input }],
-    additionalInfoMessage: [{ type: Input }],
-    scrollIntoView: [{ type: Input }],
-    searchLabel: [{ type: Input }],
-    customStyles: [{ type: Input }],
-    activeItem: [{ type: Input }],
-    onChange: [{ type: Output }],
-    selectElement: [{ type: ViewChild, args: ["select", { static: false },] }],
-    popupContainer: [{ type: ViewChild, args: ["popupContainer", { static: false },] }],
-    viewPort: [{ type: ViewChild, args: [CdkVirtualScrollViewport,] }]
-};
-
-class CalculateContainerHeightDirective {
-    constructor(el) {
-        this.el = el;
-    }
-    ngAfterViewInit() {
-        setTimeout(() => {
-            this.setContainerHeight();
-        });
-    }
-    setContainerHeight() {
-        const firstItemElement = this.el.nativeElement.querySelector('.item');
-        const firstItemHeight = firstItemElement ? firstItemElement.getBoundingClientRect().height : 0;
-        const numberOfItems = this.items.length;
-        let containerHeight = 0;
-        if (firstItemHeight * numberOfItems > 200) {
-            containerHeight = 200;
-        }
-        else if (numberOfItems <= this.visibleItems) {
-            containerHeight = firstItemHeight * numberOfItems;
-        }
-        else {
-            containerHeight = firstItemHeight * this.visibleItems;
-        }
-        this.el.nativeElement.style.height = `${containerHeight}px`;
-    }
-}
-CalculateContainerHeightDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[appcalculateContainerHeight]'
-            },] }
-];
-CalculateContainerHeightDirective.ctorParameters = () => [
-    { type: ElementRef }
-];
-CalculateContainerHeightDirective.propDecorators = {
-    items: [{ type: Input }],
-    visibleItems: [{ type: Input }]
-};
-
-class DropdownModule {
-    static forRoot() {
-        return { ngModule: DropdownModule, providers: [] };
-    }
-}
-DropdownModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [DropdownComponent, CalculateContainerHeightDirective],
-                imports: [CommonModule, FormsModule, OverlayModule, ScrollingModule, LoaderModule],
-                exports: [DropdownComponent]
-            },] }
-];
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { DropdownComponent, DropdownModule, CalculateContainerHeightDirective as ɵa };
-//# sourceMappingURL=mis-crystal-design-system-dropdown.js.map

package/fesm2015/mis-crystal-design-system-dropdown.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"mis-crystal-design-system-dropdown.js","sources":["../../../projects/mis-components/dropdown/dropdown.component.ts","../../../projects/mis-components/dropdown/calculate-container-height.directive.ts","../../../projects/mis-components/dropdown/dropdown.module.ts","../../../projects/mis-components/dropdown/mis-crystal-design-system-dropdown.ts"],"sourcesContent":["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","import { AfterViewInit, Directive, ElementRef, Input } from '@angular/core';\n\n@Directive({\n  selector: '[appcalculateContainerHeight]'\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    });\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.length;\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 { 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\nexport {CalculateContainerHeightDirective as ɵa} from './calculate-container-height.directive';"],"names":[],"mappings":"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"}

package/fesm2015/mis-crystal-design-system-dynamic-form.js

@@ -1,346 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { FormArray, FormGroup, Validators, FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
-import { EventEmitter, Component, Input, Output, NgModule } from '@angular/core';
-import { OverlayModule } from '@angular/cdk/overlay';
-import { ScrollingModule } from '@angular/cdk-experimental/scrolling';
-import { DropdownModule } from 'mis-crystal-design-system/dropdown';
-import * as moment from 'moment';
-import { tz } from 'moment';
-import 'moment-timezone';
-import { SwitchModule } from 'mis-crystal-design-system/switch';
-import { MultiSelectDropdownModule } from 'mis-crystal-design-system/multi-select-dropdown';
-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() {
-        var _a;
-        (_a = this.valueChangesSubscription$) === null || _a === void 0 ? void 0 : _a.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) => {
-            var _a;
-            let formattedValue = this.mapFormFieldToFormValue(this.formFields[index], fieldValue.value);
-            if (((_a = fieldValue.subFields) === null || _a === void 0 ? void 0 : _a.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) {
-        var _a;
-        let formArray = new FormArray([]);
-        for (let field of formFields) {
-            let fieldValue = ((_a = formValues[field.configName]) === null || _a === void 0 ? void 0 : _a.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 FormGroup({
-                value: fieldControl,
-                subFields: subFieldsControls
-            }));
-        }
-        return new FormGroup({
-            dynamicFields: formArray
-        });
-    }
-    getDynamicFieldsControls() {
-        return this.dynamicForm.get("dynamicFields");
-    }
-    updateSubDynamicFields(field, formGroup, value) {
-        var _a;
-        if (((_a = field.subFields) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-            let subFieldsControls = this.generateSubDynamicFields(this.formValues, field, value);
-            formGroup.removeControl('subFields');
-            formGroup.addControl('subFields', subFieldsControls);
-        }
-    }
-    updateSelectedValueForSingleSelect(field, control, formGroup, value) {
-        var _a;
-        if (((_a = control.value) === null || _a === void 0 ? void 0 : _a.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(Object.assign({}, 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) {
-        var _a;
-        let controls = new FormArray([]);
-        let subFields = parentField.subFields;
-        let subFieldsValues = ((_a = formValues[parentField.configName]) === null || _a === void 0 ? void 0 : _a.subFields) ? formValues[parentField.configName].subFields : {};
-        if (!subFields)
-            return controls;
-        if (parentField.fieldType === 'singleSelect') {
-            subFields = subFields.filter((subField) => { var _a; return subField.parentConfigValue === ((_a = parentValue) === null || _a === void 0 ? void 0 : _a.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 === null || subFields === void 0 ? void 0 : 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 FormControl(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(Object.assign({}, 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) {
-        var _a;
-        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 tz(formValue, formField.fieldConfig.format, formField.fieldConfig.timezone).valueOf();
-            }
-        }
-        else if (formField.fieldType === "singleSelect") {
-            return (_a = formValue === null || formValue === void 0 ? void 0 : formValue.value) !== null && _a !== void 0 ? _a : '';
-        }
-        else if (formField.fieldType === "multiSelect") {
-            return formValue === null || formValue === void 0 ? void 0 : formValue.map(item => item.value);
-        }
-        else if (formField.fieldType === "boolean") {
-            return formValue;
-        }
-        else
-            return formValue;
-    }
-}
-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{justify-content:space-between;align-items:center}.multi-line-field-container,.single-line-field-container{display:flex;padding:28px 16px;border-bottom:1px solid var(--grey-seperators)}.multi-line-field-container{justify-content:flex-start;align-items:flex-start;flex-wrap:wrap}.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::-moz-placeholder{color:var(--grey-seperators)}input:-ms-input-placeholder{color:var(--grey-seperators)}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)}"]
-            },] }
-];
-DynamicFormComponent.ctorParameters = () => [];
-DynamicFormComponent.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 === null || value === void 0 ? void 0 : 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 === null || error === void 0 ? void 0 : error.minlength.requiredLength);
-                    if (error)
-                        error = { MinLength: message };
-                    break;
-                case "MaxLength":
-                    error = Validators.maxLength(+validator.value)(control);
-                    message = message.replace('${0}', error === null || error === void 0 ? void 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 = Object.assign(Object.assign({}, errors), error);
-        });
-        return errors;
-    };
-};
-
-class DynamicFormModule {
-    static forRoot() {
-        return { ngModule: DynamicFormModule, providers: [] };
-    }
-}
-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.js.map