mis-crystal-design-system 2.4.7 → 2.5.0

package/fesm2015/mis-crystal-design-system-action-list.js

@@ -0,0 +1,191 @@
+import { ConnectionPositionPair, OverlayConfig, Overlay } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { EventEmitter, Component, ElementRef, ViewContainerRef, Input, Output, ViewChild, HostListener, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { CheckboxModule } from 'mis-crystal-design-system/checkbox';
+
+class ActionListComponent {
+    constructor(eRef, overlay, viewContainerRef) {
+        this.eRef = eRef;
+        this.overlay = overlay;
+        this.viewContainerRef = viewContainerRef;
+        this.isOpen = false;
+        this.subItems = [];
+        this.data = [];
+        this.height = "";
+        this.width = "";
+        this.label = "Select";
+        this.dropdownListHeight = "";
+        this.dropdownListWidth = "";
+        this.dropdownListPosition = "Left";
+        this.searchEnabled = true;
+        this.noDataMessage = "No Data";
+        this.selectedItems = [];
+        this.onChange = new EventEmitter();
+    }
+    ngOnInit() {
+        var _a;
+        this.selectedItems = [];
+        this.data.forEach(q => q.children.forEach(w => {
+            if (w.checked)
+                this.selectedItems.push(w);
+        }));
+        this.label = (_a = this.selectedItems[0]) === null || _a === void 0 ? void 0 : _a.label;
+    }
+    clickout(event) {
+        var _a;
+        const isClickedOutside = !this.eRef.nativeElement.contains(event.target);
+        if (isClickedOutside) {
+            !((_a = this.overlayRef) === null || _a === void 0 ? void 0 : _a.hasAttached()) && this.onCancel();
+        }
+    }
+    filterByValue(array, string) {
+        return array.filter(o => o.label.toLowerCase().includes(string.toLowerCase()));
+    }
+    toggleDropdown() {
+        this.isOpen = !this.isOpen;
+        if (this.isOpen)
+            this.openDropdown(this.popupContainer, this.selectElement.nativeElement, false);
+        else
+            this.onCancel();
+    }
+    openDropdown(template, origin, openRight) {
+        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 positions = [
+            ...(this.dropdownListPosition === "Right" ? positionsBottom.reverse() : positionsBottom),
+            ...(this.dropdownListPosition === "Right" ? positionsTop.reverse() : positionsTop)
+        ];
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(origin)
+            .withPositions(openRight ? [new ConnectionPositionPair({ originX: "end", originY: "top" }, { overlayX: "start", overlayY: "top" }, 8)] : positions)
+            .withPush(true);
+        const configs = new OverlayConfig({
+            hasBackdrop: !openRight,
+            backdropClass: "cdk-overlay-transparent-backdrop",
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            positionStrategy,
+            width: origin.clientWidth || 140
+        });
+        if (openRight) {
+            this.subOverlayRef = this.overlay.create(configs);
+            if (this.dropdownListWidth)
+                this.subOverlayRef.updateSize({ width: this.dropdownListWidth });
+            if (this.dropdownListHeight)
+                this.subOverlayRef.updateSize({ height: this.dropdownListHeight });
+            this.subOverlayRef.attach(new TemplatePortal(template, this.viewContainerRef));
+            this.subOverlayRef.backdropClick().subscribe(() => {
+                this.onCancel();
+            });
+            return;
+        }
+        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(() => {
+            this.onCancel();
+        });
+    }
+    selectItem(item) {
+        var _a, _b;
+        if (this.data.some(q => q.children.some(w => w.value === item.value && w.checked))) {
+            if (item.type === "MULTIPLE")
+                this.selectedItems = this.selectedItems.filter(q => q.value !== item.value);
+            this.data = this.data.map(q => {
+                var _a;
+                return (Object.assign(Object.assign({}, q), { children: (_a = q === null || q === void 0 ? void 0 : q.children) === null || _a === void 0 ? void 0 : _a.map(e => (Object.assign(Object.assign({}, e), { checked: e.checked && e.value !== item.value }))) }));
+            });
+        }
+        else {
+            this.data = this.data.map(q => {
+                var _a;
+                return (Object.assign(Object.assign({}, q), { children: (_a = q === null || q === void 0 ? void 0 : q.children) === null || _a === void 0 ? void 0 : _a.map(e => (Object.assign(Object.assign({}, e), { checked: (e.type === "MULTIPLE" && (e.checked || e.value === item.value)) || (e.type === "SINGLE" && e.value === item.value) }))) }));
+            });
+            if (item.type === "MULTIPLE")
+                this.selectedItems.push(Object.assign(Object.assign({}, item), { checked: true }));
+        }
+        this.label =
+            item.type === "MULTIPLE" ? (this.selectedItems.length > 0 ? (_a = this.selectedItems[0]) === null || _a === void 0 ? void 0 : _a.label : "Select") : item.checked ? "Select" : item.label;
+        this.subItems = ((_b = this.data.find(q => { var _a; return (_a = q.children) === null || _a === void 0 ? void 0 : _a.some(w => w.value === item.value); })) === null || _b === void 0 ? void 0 : _b.children) || [];
+        this.onChange.emit(this.data);
+        if (item.type === "SINGLE")
+            this.toggleDropdown();
+    }
+    onHover(item, isHovered, element) {
+        var _a, _b, _c;
+        if (isHovered) {
+            this.subItems.length > 0 && ((_a = this.subOverlayRef) === null || _a === void 0 ? void 0 : _a.detach());
+            this.subItems = ((_b = this.data.find(q => { var _a; return (_a = q === null || q === void 0 ? void 0 : q.children) === null || _a === void 0 ? void 0 : _a.some(w => (w === null || w === void 0 ? void 0 : w.parentValue) === (item === null || item === void 0 ? void 0 : item.value)); })) === null || _b === void 0 ? void 0 : _b.children) || [];
+            this.subItems.length > 0 && this.openDropdown(this.subPopupContainer, (element === null || element === void 0 ? void 0 : element.nativeElement) || element, true);
+        }
+        else {
+            this.subItems = [];
+            (_c = this.subOverlayRef) === null || _c === void 0 ? void 0 : _c.detach();
+        }
+    }
+    onCancel() {
+        var _a, _b;
+        this.isOpen = false;
+        (_a = this.overlayRef) === null || _a === void 0 ? void 0 : _a.detach();
+        (_b = this.subOverlayRef) === null || _b === void 0 ? void 0 : _b.detach();
+    }
+}
+ActionListComponent.decorators = [
+    { type: Component, args: [{
+                selector: "mis-action-list",
+                template: "<div\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]=\"{ background: isOpen ? '#E6EBF7' : '' }\"\n  >\n    <div class=\"label\">\n      <p class=\"text\">\n        {{ label }}\n      </p>\n      <p *ngIf=\"selectedItems?.length > 1\" class=\"count\">+{{ selectedItems?.length - 1 }}</p>\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\n<ng-template #popupContainer>\n  <div\n    class=\"popup-container\"\n    [ngStyle]=\"{\n      height: dropdownListHeight,\n      width: dropdownListWidth\n    }\"\n  >\n    <div class=\"items\">\n      <div\n        #singleItem\n        class=\"item\"\n        tabindex=\"0\"\n        [ngClass]=\"{ 'item-disabled': item?.disabled }\"\n        (mouseenter)=\"onHover(item, true, singleItem)\"\n        *ngFor=\"let item of data\"\n      >\n        <div class=\"label\" [ngStyle]=\"{ width: item?.icon ? '90%' : '100%' }\">\n          <span>{{ item?.label }}</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      <div class=\"noData\" *ngIf=\"data.length === 0\">\n        {{ noDataMessage || \"No results\" }}\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #subPopupContainer>\n  <div\n    class=\"popup-container\"\n    [ngStyle]=\"{\n      height: dropdownListHeight,\n      width: dropdownListWidth\n    }\"\n  >\n    <div class=\"items\">\n      <div\n        class=\"item\"\n        tabindex=\"0\"\n        [ngClass]=\"{ 'item-disabled': item.disabled }\"\n        (click)=\"!item.disabled && selectItem(item)\"\n        *ngFor=\"let item of subItems\"\n      >\n        <div class=\"checkbox-container\" *ngIf=\"item.type === 'MULTIPLE'\">\n          <mis-checkbox [disabled]=\"item.disabled\" [checked]=\"item.checked\"></mis-checkbox>\n        </div>\n        <div class=\"label\" [ngStyle]=\"{ width: item.icon ? '90%' : '100%' }\">\n          <span>{{ item.label }}</span>\n        </div>\n        <div class=\"icon-container\" *ngIf=\"item.icon || item.checked\">\n          <img *ngIf=\"!item.checked\" class=\"icon\" [src]=\"item.icon\" alt=\"no img\" />\n          <ng-container *ngIf=\"item.type === 'SINGLE' && item.checked\">\n            <ng-container *ngTemplateOutlet=\"tickIcon\"></ng-container>\n          </ng-container>\n        </div>\n      </div>\n      <div class=\"noData\" *ngIf=\"data.length === 0\">\n        {{ noDataMessage || \"No results\" }}\n      </div>\n    </div>\n  </div>\n</ng-template>\n<ng-template #tickIcon>\n  <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      fill-rule=\"evenodd\"\n      clip-rule=\"evenodd\"\n      d=\"M7.47697 14.8237L3.49922 10.5519C3.2776 10.3169 3.2776 9.93437 3.49922 9.69684L4.30273 8.84298C4.52434 8.60795 4.88462 8.60795 5.10623 8.84298L7.87929 11.8334L14.0607 5.17627C14.2823 4.94124 14.6426 4.94124 14.8642 5.17627L15.6677 6.03138C15.8894 6.26641 15.8894 6.65021 15.6677 6.88399L8.28048 14.8237C8.05886 15.0588 7.69859 15.0588 7.47697 14.8237Z\"\n      fill=\"#181F33\"\n    />\n  </svg>\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:4px 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:16px;line-height:20px;letter-spacing:.2px;color:#181f33}.main-container .dropdown .label .text{margin:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.main-container .dropdown .label .count{width:24px;height:24px;background-color:#e0e0e0;border-radius:50%;padding:2px 4px;margin:0 0 0 8px;font-style:normal;font-weight:400;box-sizing:border-box;font-size:14px;line-height:20px;text-align:center;letter-spacing:.2px;color:#181f33}.main-container .dropdown .handle{width:24px;height:24px;transition:.3s;position:absolute;right:12px;border-radius:50%;overflow:hidden}.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{justify-content:center;font-style:normal;font-weight:400;font-size:16px;line-height:20px}.popup-container .items .item,.popup-container .items .noData{display:flex;align-items:center;letter-spacing:.2px;color:#181f33}.popup-container .items .item{cursor:pointer;justify-content:flex-start;gap:10px;padding:8px 12px;border-radius:6px;height:auto}.popup-container .items .item:focus-visible,.popup-container .items .item:hover{background-color:#f5f7fc;outline:none}.popup-container .items .item .label{width:100%;line-height:20px;font-size:16px;font-style:normal;font-weight:400;text-overflow:ellipsis;overflow:hidden}.popup-container .items .item .icon-container{width:10%;display:flex;justify-content:flex-end}.popup-container .items .item .icon-container .icon{width:20px;height:20px}.popup-container .items .item-disabled{cursor:not-allowed}.popup-container .items .item-disabled:focus-visible,.popup-container .items .item-disabled:hover{background-color:transparent;outline:none}.popup-container .items .item-disabled .label{color:#929dab;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}"]
+            },] }
+];
+ActionListComponent.ctorParameters = () => [
+    { type: ElementRef },
+    { type: Overlay },
+    { type: ViewContainerRef }
+];
+ActionListComponent.propDecorators = {
+    data: [{ type: Input }],
+    height: [{ type: Input }],
+    width: [{ type: Input }],
+    label: [{ type: Input }],
+    dropdownListHeight: [{ type: Input }],
+    dropdownListWidth: [{ type: Input }],
+    dropdownListPosition: [{ type: Input }],
+    searchEnabled: [{ type: Input }],
+    noDataMessage: [{ type: Input }],
+    onChange: [{ type: Output }],
+    selectElement: [{ type: ViewChild, args: ["select", { static: false },] }],
+    popupContainer: [{ type: ViewChild, args: ["popupContainer", { static: false },] }],
+    subPopupContainer: [{ type: ViewChild, args: ["subPopupContainer", { static: false },] }],
+    clickout: [{ type: HostListener, args: ["document:click", ["$event"],] }]
+};
+
+class ActionListModule {
+    static forRoot() {
+        return { ngModule: ActionListModule, providers: [] };
+    }
+}
+ActionListModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [ActionListComponent],
+                imports: [CommonModule, FormsModule, CheckboxModule],
+                exports: [ActionListComponent]
+            },] }
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ActionListComponent, ActionListModule };
+//# sourceMappingURL=mis-crystal-design-system-action-list.js.map

package/fesm2015/mis-crystal-design-system-action-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mis-crystal-design-system-action-list.js","sources":["../../../projects/mis-components/action-list/action-list.component.ts","../../../projects/mis-components/action-list/action-list.module.ts","../../../projects/mis-components/action-list/mis-crystal-design-system-action-list.ts"],"sourcesContent":["import { ConnectionPositionPair, Overlay, OverlayConfig, OverlayRef } from \"@angular/cdk/overlay\";\nimport { TemplatePortal } from \"@angular/cdk/portal\";\nimport { Component, ElementRef, EventEmitter, HostListener, Input, OnInit, Output, TemplateRef, ViewChild, ViewContainerRef } from \"@angular/core\";\n\n@Component({\n  selector: \"mis-action-list\",\n  templateUrl: \"./action-list.component.html\",\n  styleUrls: [\"./action-list.component.scss\"]\n})\nexport class ActionListComponent implements OnInit {\n  isOpen = false;\n\n  subItems: ActionItem[] = [];\n\n  @Input() data: ActionItems[] = [];\n  @Input() height: string = \"\";\n  @Input() width: string = \"\";\n  @Input() label: string = \"Select\";\n\n  @Input() dropdownListHeight: string = \"\";\n  @Input() dropdownListWidth: string = \"\";\n  @Input() dropdownListPosition: \"Left\" | \"Right\" = \"Left\";\n\n  @Input() searchEnabled: boolean = true;\n  @Input() noDataMessage: string = \"No Data\";\n  selectedItems: ActionItem[] = [];\n\n  @Output() onChange: EventEmitter<any> = new EventEmitter();\n\n  @ViewChild(\"select\", { static: false }) selectElement: ElementRef;\n  @ViewChild(\"popupContainer\", { static: false }) popupContainer: TemplateRef<Element>;\n  @ViewChild(\"subPopupContainer\", { static: false }) subPopupContainer: TemplateRef<Element>;\n  private overlayRef: OverlayRef;\n  private subOverlayRef: OverlayRef;\n\n  constructor(private eRef: ElementRef, private overlay: Overlay, private viewContainerRef: ViewContainerRef) {}\n  ngOnInit() {\n    this.selectedItems = [];\n    this.data.forEach(q =>\n      q.children.forEach(w => {\n        if (w.checked) this.selectedItems.push(w);\n      })\n    );\n    this.label = this.selectedItems[0]?.label;\n  }\n\n  @HostListener(\"document:click\", [\"$event\"])\n  clickout(event) {\n    const isClickedOutside = !this.eRef.nativeElement.contains(event.target);\n    if (isClickedOutside) {\n      !this.overlayRef?.hasAttached() && this.onCancel();\n    }\n  }\n  filterByValue(array: ActionItem[], string: string) {\n    return array.filter(o => o.label.toLowerCase().includes(string.toLowerCase()));\n  }\n  toggleDropdown() {\n    this.isOpen = !this.isOpen;\n    if (this.isOpen) this.openDropdown(this.popupContainer, this.selectElement.nativeElement, false);\n    else this.onCancel();\n  }\n  private openDropdown(template: TemplateRef<Element>, origin: HTMLElement, openRight: boolean): 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 positions = [\n      ...(this.dropdownListPosition === \"Right\" ? positionsBottom.reverse() : positionsBottom),\n      ...(this.dropdownListPosition === \"Right\" ? positionsTop.reverse() : positionsTop)\n    ];\n    const positionStrategy = this.overlay\n      .position()\n      .flexibleConnectedTo(origin)\n      .withPositions(\n        openRight ? [new ConnectionPositionPair({ originX: \"end\", originY: \"top\" }, { overlayX: \"start\", overlayY: \"top\" }, 8)] : positions\n      )\n      .withPush(true);\n    const configs = new OverlayConfig({\n      hasBackdrop: !openRight,\n      backdropClass: \"cdk-overlay-transparent-backdrop\",\n      scrollStrategy: this.overlay.scrollStrategies.reposition(),\n      positionStrategy,\n      width: origin.clientWidth || 140\n    });\n    if (openRight) {\n      this.subOverlayRef = this.overlay.create(configs);\n      if (this.dropdownListWidth) this.subOverlayRef.updateSize({ width: this.dropdownListWidth });\n      if (this.dropdownListHeight) this.subOverlayRef.updateSize({ height: this.dropdownListHeight });\n      this.subOverlayRef.attach(new TemplatePortal(template, this.viewContainerRef));\n      this.subOverlayRef.backdropClick().subscribe(() => {\n        this.onCancel();\n      });\n      return;\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(() => {\n      this.onCancel();\n    });\n  }\n  selectItem(item: ActionItem) {\n    if (this.data.some(q => q.children.some(w => w.value === item.value && w.checked))) {\n      if (item.type === \"MULTIPLE\") this.selectedItems = this.selectedItems.filter(q => q.value !== item.value);\n      this.data = this.data.map(q => ({\n        ...q,\n        children: q?.children?.map(e => ({\n          ...e,\n          checked: e.checked && e.value !== item.value\n        }))\n      }));\n    } else {\n      this.data = this.data.map(q => ({\n        ...q,\n        children: q?.children?.map(e => ({\n          ...e,\n          checked: (e.type === \"MULTIPLE\" && (e.checked || e.value === item.value)) || (e.type === \"SINGLE\" && e.value === item.value)\n        }))\n      }));\n      if (item.type === \"MULTIPLE\") this.selectedItems.push({ ...item, checked: true });\n    }\n    this.label =\n      item.type === \"MULTIPLE\" ? (this.selectedItems.length > 0 ? this.selectedItems[0]?.label : \"Select\") : item.checked ? \"Select\" : item.label;\n    this.subItems = this.data.find(q => q.children?.some(w => w.value === item.value))?.children || [];\n    this.onChange.emit(this.data);\n    if (item.type === \"SINGLE\") this.toggleDropdown();\n  }\n  onHover(item: ActionItem, isHovered, element?: any) {\n    if (isHovered) {\n      this.subItems.length > 0 && this.subOverlayRef?.detach();\n      this.subItems = this.data.find(q => q?.children?.some(w => w?.parentValue === item?.value))?.children || [];\n      this.subItems.length > 0 && this.openDropdown(this.subPopupContainer, element?.nativeElement || element, true);\n    } else {\n      this.subItems = [];\n      this.subOverlayRef?.detach();\n    }\n  }\n  onCancel() {\n    this.isOpen = false;\n    this.overlayRef?.detach();\n    this.subOverlayRef?.detach();\n  }\n}\n\nexport interface ActionItems {\n  label: string;\n  value: string;\n  icon?: string;\n  disabled?: boolean;\n  children?: ActionItem[];\n}\n\nexport interface ActionItem {\n  type: \"SINGLE\" | \"MULTIPLE\";\n  label: string;\n  value: string;\n  parentValue: string;\n  icon?: string;\n  checked: boolean;\n  disabled?: boolean;\n}\n","import { CommonModule } from \"@angular/common\";\nimport { FormsModule } from \"@angular/forms\";\nimport { NgModule, ModuleWithProviders } from \"@angular/core\";\nimport { ActionListComponent } from \"./action-list.component\";\nimport { CheckboxModule } from \"mis-crystal-design-system/checkbox\";\n\n@NgModule({\n  declarations: [ActionListComponent],\n  imports: [CommonModule, FormsModule, CheckboxModule],\n  exports: [ActionListComponent]\n})\nexport class ActionListModule {\n  static forRoot(): ModuleWithProviders<ActionListModule> {\n    return { ngModule: ActionListModule, providers: [] };\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -64,7 +64,7 @@ class CheckboxComponent {
 CheckboxComponent.decorators = [
     { type: Component, args: [{
                 selector: 'mis-checkbox',
-                template: "<div\n  class=\"checkbox-container\"\n  (click)=\"!formControl.disabled && toggleState()\"\n>\n    <input\n        hidden\n        type=\"checkbox\"\n        [formControl]=\"formControl\"\n        (click)=\"$event.stopPropagation()\"\n    >\n    <span\n      class=\"checkmark\"\n      tabindex=\"0\"\n      *ngIf=\"!isIndeterminate\"\n      [ngClass]=\"{\n        'disabled-checkbox': formControl.disabled,\n        'error': isError && !formControl.disabled\n      }\"\n    ></span>\n    <span\n      class=\"checkmark indeterminate\"\n      tabindex=\"0\"\n      *ngIf=\"isIndeterminate\"\n      [ngClass]=\"{\n      'disabled-checkbox': formControl.disabled,\n      'error': isError && !formControl.disabled\n      }\"\n    ></span>\n</div>\n",
+                template: "<div\n  class=\"checkbox-container\"\n  [ngStyle]=\"{ cursor: formControl.disabled ? 'not-allowed' : 'pointer' }\"\n  (click)=\"!formControl.disabled && toggleState()\"\n>\n  <input hidden type=\"checkbox\" [formControl]=\"formControl\" (click)=\"$event.stopPropagation()\" />\n  <span\n    class=\"checkmark\"\n    tabindex=\"0\"\n    *ngIf=\"!isIndeterminate\"\n    [ngClass]=\"{\n      'disabled-checkbox': formControl.disabled,\n      error: isError && !formControl.disabled\n    }\"\n  ></span>\n  <span\n    class=\"checkmark indeterminate\"\n    tabindex=\"0\"\n    *ngIf=\"isIndeterminate\"\n    [ngClass]=\"{\n      'disabled-checkbox': formControl.disabled,\n      error: isError && !formControl.disabled\n    }\"\n  ></span>\n</div>\n",
                 styles: [".checkbox-container{height:20px;width:20px;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:sub}.checkbox-container input{opacity:0;cursor:pointer}.checkbox-container input,.checkmark{position:absolute;height:20px;width:20px}.checkmark{display:flex;justify-content:center;align-items:center;top:0;left:0;border-radius:4px;background-color:#fff;border:2px solid #6a737d;box-sizing:border-box}.checkmark:hover{border-color:#929dab}.checkmark:focus,.checkmark:focus-within{box-shadow:0 0 0 .09em #fff,0 0 .01em .2em #0937b2;outline:none}.checkbox-container input:checked~.checkmark{background-color:#0937b2;border-color:#0937b2}.checkbox-container input:checked~.checkmark.disabled-checkbox{background-color:#c8cdd3;border-color:#c8cdd3}.checkmark:after{content:\"\";position:absolute;display:none}.checkbox-container input:checked~.checkmark:after{display:block}.checkbox-container .checkmark:after{top:1px;width:4px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.checkbox-container .checkmark.indeterminate:after{top:2px;width:2px;height:0;border:solid #fff;border-width:0 0 12px;border-radius:14px;transform:rotate(90deg);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg)}.disabled-checkbox{pointer-events:none;border-color:#c8cdd3}.error{border-color:#b00020}.checkbox-container input:checked~.error.checkmark{border:#b00020!important;background:#b00020!important}.checkbox-container .error.checkmark:after{top:3px;width:4px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.checkbox-container .error.checkmark.indeterminate:after{top:4px;width:2px;height:0;border:solid #fff;border-width:0 0 12px;border-radius:14px;transform:rotate(90deg);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg)}.error:focus,.error:focus-within{box-shadow:none!important;outline:none}"]
             },] }
 ];

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

@@ -2,7 +2,7 @@ import { InjectionToken, Component, Inject, EventEmitter, Injector, Directive, S
 import { CommonModule } from '@angular/common';
 import { parseZone, tz } from 'moment-timezone';
 import { ToastService, ToastModule } from 'mis-crystal-design-system/toast';
-import { OverlayConfig, ConnectionPositionPair, Overlay } from '@angular/cdk/overlay';
+import { OverlayConfig, Overlay } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { NgControl } from '@angular/forms';
 import { take } from 'rxjs/operators';
@@ -285,17 +285,6 @@ class TzDatepickerDirective {
         this.overlayRef.detach();
         this.overlayRef.dispose();
     }
-    genPositionPairs() {
-        return [
-            new ConnectionPositionPair({ originX: this.positionX, originY: this.positionY }, { overlayX: this.positionX, overlayY: this.positionY === "bottom" ? "top" : "bottom" }, this.offsetX, this.offsetY),
-            new ConnectionPositionPair({ originX: "center", originY: "bottom" }, { overlayX: "center", overlayY: "top" }),
-            new ConnectionPositionPair({ originX: "center", originY: "top" }, { overlayX: "center", overlayY: "bottom" }),
-            new ConnectionPositionPair({ originX: "start", originY: "bottom" }, { overlayX: "start", overlayY: "top" }),
-            new ConnectionPositionPair({ originX: "start", originY: "top" }, { overlayX: "start", overlayY: "bottom" }),
-            new ConnectionPositionPair({ originX: "end", originY: "bottom" }, { overlayX: "end", overlayY: "top" }),
-            new ConnectionPositionPair({ originX: "end", originY: "top" }, { overlayX: "end", overlayY: "bottom" })
-        ];
-    }
 }
 TzDatepickerDirective.decorators = [
     { type: Directive, args: [{

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

@@ -1 +1 @@
-{"version":3,"file":"mis-crystal-design-system-datepicker_v2.js","sources":["../../../projects/mis-components/datepicker_v2/datepicker-constants.ts","../../../projects/mis-components/datepicker_v2/utils/index.ts","../../../projects/mis-components/datepicker_v2/tz-dp-container/tz-dp-container.component.ts","../../../projects/mis-components/datepicker_v2/tz-datepicker.directive.ts","../../../projects/mis-components/datepicker_v2/datepicker.module.ts","../../../projects/mis-components/datepicker_v2/mis-crystal-design-system-datepicker_v2.ts"],"sourcesContent":["/** @format */\n\nimport { InjectionToken } from \"@angular/core\";\n\nexport const CONTAINER_DATA = new InjectionToken<{}>('CONTAINER_DATA');\nexport const DATE_FORMAT = \"DD-MM-YYYY\";","import { ICurrentMonth } from \"../models/dp-config.model\";\n\nexport const getMonth = (index: number): ICurrentMonth => {\n    let month;\n    switch (index) {\n        case 0:\n            month = 'January'\n            break;\n        case 1:\n            month = 'February'\n            break;\n        case 2:\n            month = 'March'\n            break;\n        case 3:\n            month = 'April'\n            break;\n        case 4:\n            month = 'May'\n            break;\n        case 5:\n            month = 'June'\n            break;\n        case 6:\n            month = 'July'\n            break;\n        case 7:\n            month = 'August'\n            break;\n        case 8:\n            month = 'September'\n            break;\n        case 9:\n            month = 'October'\n            break;\n        case 10:\n            month = 'November'\n            break;\n        case 11:\n            month = 'December'\n            break;\n        default:\n            break;\n    }\n    return month;\n}","import { Component, Inject, OnInit } from \"@angular/core\";\nimport { CONTAINER_DATA, DATE_FORMAT } from \"../datepicker-constants\";\nimport { ICurrentMonth, ICurrentMonthDates, IDatePickerData, IWeekDay } from \"../models/dp-config.model\";\nimport { parseZone, Moment, tz } from \"moment-timezone\";\nimport { getMonth } from \"../utils\";\nimport { ToastService } from \"mis-crystal-design-system/toast\";\n\n@Component({\n  selector: \"mis-tz-dp\",\n  templateUrl: \"./tz-dp-container.component.html\",\n  styleUrls: [\"./tz-dp-container.component.scss\"],\n})\nexport class TzDpContainerComponent implements OnInit {\n  data: IDatePickerData;\n  private parseZoneInstance = (...args) => {\n    return parseZone(...args);\n  };\n  private rawWeekDays: string[] = [\"SUN\", \"MON\", \"TUE\", \"WED\", \"THU\", \"FRI\", \"SAT\"];\n  weekDays: IWeekDay[] = [];\n  currentMonthNumber: number;\n  currentMonth: ICurrentMonth;\n  currentYearNumber: number;\n  currentMonthDates: ICurrentMonthDates[] = [];\n  isPreviousMonthDisabled: boolean = false;\n  isNextMonthDisabled: boolean = false;\n  localSelectedDate: ICurrentMonthDates;\n\n  constructor(@Inject(CONTAINER_DATA) data: IDatePickerData, private toast: ToastService) {\n    this.data = data;\n    if (this.data?.dpConfig?.timezone) {\n      this.parseZoneInstance = (...args) => {\n        return tz(args[0], args[1], this.data.dpConfig.timezone);\n      };\n    }\n    this.currentMonthNumber = this.parseZoneInstance().month();\n    this.currentMonth = getMonth(this.currentMonthNumber);\n    this.currentYearNumber = this.parseZoneInstance().year();\n    this.weekDays = this.rawWeekDays.map((day, index) => ({\n      label: `${day[0]}${day.slice(1).toLowerCase()}`,\n      isCurrentDay: this.parseZoneInstance().day() === index,\n    }));\n    if (!this.data?.dpConfig?.format) {\n      this.data.dpConfig = {\n        ...this.data.dpConfig,\n        format: DATE_FORMAT,\n      };\n    }\n  }\n\n  ngOnInit(): void {\n    this.currentDateInstance();\n    this.calculateMinMaxDays();\n  }\n\n  private currentDateInstance(): void {\n    const selectedDate = parseZone(this.data.date, this.data.dpConfig.format);\n    if (selectedDate.isValid()) {\n      this.currentYearNumber = selectedDate.year();\n      this.currentMonthNumber = selectedDate.month();\n      this.currentMonth = getMonth(this.currentMonthNumber);\n    }\n    this.currentMonthDates = this.generateDates(this.currentMonthNumber, this.currentYearNumber);\n  }\n\n  private calculateMinMaxDays() {\n    const currentInstance = this.parseZoneInstance().year(this.currentYearNumber).month(this.currentMonthNumber);\n    const minDate = this.parseZoneInstance(this.data.dpConfig.minDate, this.data.dpConfig.format);\n    if (minDate.isValid()) {\n      this.isPreviousMonthDisabled = minDate.isSameOrAfter(currentInstance, \"month\");\n    }\n    const maxDate = this.parseZoneInstance(this.data.dpConfig.maxDate, this.data.dpConfig.format);\n    if (maxDate.isValid()) {\n      this.isNextMonthDisabled = maxDate.isSameOrBefore(currentInstance, \"month\");\n    }\n  }\n\n  navigateMonth(direction: \"NEXT\" | \"PREVIOUS\"): void {\n    let thisMonth: Moment = parseZone().year(this.currentYearNumber).month(this.currentMonthNumber);\n    if (direction === \"NEXT\") {\n      thisMonth = thisMonth.add(1, \"month\");\n    } else if (direction === \"PREVIOUS\") {\n      thisMonth = thisMonth.subtract(1, \"month\");\n    }\n    this.currentMonthNumber = thisMonth.month();\n    this.currentMonth = getMonth(this.currentMonthNumber);\n    this.currentYearNumber = thisMonth.year();\n    this.currentMonthDates = this.generateDates(this.currentMonthNumber, this.currentYearNumber);\n    this.calculateMinMaxDays();\n  }\n\n  private generateDates(month: number, currentYearNumber: number): ICurrentMonthDates[] {\n    let dates: ICurrentMonthDates[] = [];\n    const daysInMonth = parseZone().year(currentYearNumber).month(month).daysInMonth();\n    for (let currentDate = 1; currentDate <= daysInMonth; currentDate++) {\n      const date = this.parseZoneInstance().year(currentYearNumber).month(month).date(currentDate);\n      const dateString = date.format(this.data.dpConfig.format);\n      let isDisabledDay = this.data.datesDisabled.some((d) => d === dateString);\n      const minDate = this.parseZoneInstance(this.data.dpConfig.minDate, this.data.dpConfig.format);\n      if (!isDisabledDay && minDate.isValid()) {\n        isDisabledDay = minDate.isAfter(date, \"day\");\n      }\n      const maxDate = this.parseZoneInstance(this.data.dpConfig.maxDate, this.data.dpConfig.format);\n      if (!isDisabledDay && maxDate.isValid()) {\n        isDisabledDay = maxDate.isBefore(date, \"day\");\n      }\n      dates.push({\n        date: currentDate,\n        weekDay: date.day(),\n        isCurrentDay:\n          this.parseZoneInstance().year(currentYearNumber).month(month).date(currentDate).format(this.data.dpConfig.format) ===\n          this.parseZoneInstance().format(this.data.dpConfig.format),\n        isSelectedDay: !isDisabledDay && date.format(this.data.dpConfig.format) === this.data.date,\n        toastMessage: this.data.messages.find((q) => date.format(this.data.dpConfig.format) === q.date)?.message || \"\",\n        isDisabledDay,\n      });\n    }\n    for (let i = dates[0].weekDay; i > 0; i--) {\n      dates.unshift({ date: 0, weekDay: i - 1 });\n    }\n    return dates;\n  }\n\n  selectDay(day: ICurrentMonthDates) {\n    if (day.date <= 0) return;\n    if (!day.isDisabledDay) {\n      this.localSelectedDate = day;\n      if(!this.data.dpConfig.showApplyButton) { this.applyDate(day) }\n    }\n    if (day.toastMessage) {\n      this.toast.displayMsg(day.toastMessage, 4000);\n    }\n  }\n\n  applyDate(day?: ICurrentMonthDates) {\n    if(day || this.localSelectedDate) {\n      this.data.dateChange(\n        parseZone().year(this.currentYearNumber).month(this.currentMonthNumber)\n          .date(day ? day.date : this.localSelectedDate.date).format(this.data.dpConfig.format)\n      );\n    } else {\n      this.cancelDatePicker();\n    }\n  }\n\n  cancelDatePicker() {\n    this.data.dateChange('')\n  }\n}\n","import { ConnectionPositionPair, Overlay, OverlayConfig, OverlayRef, PositionStrategy } from \"@angular/cdk/overlay\";\nimport { ComponentPortal } from \"@angular/cdk/portal\";\nimport { Directive, ElementRef, EventEmitter, HostListener, Injector, Input, OnInit, Optional, Output, Self, ViewContainerRef } from \"@angular/core\";\nimport { NgControl } from \"@angular/forms\";\nimport { take } from \"rxjs/operators\";\nimport { genPositionPairs } from \"mis-crystal-design-system/utils\";\nimport { CONTAINER_DATA, DATE_FORMAT } from \"./datepicker-constants\";\nimport { IDatePickerConfig, IDatePickerToastText } from \"./models/dp-config.model\";\nimport { TzDpContainerComponent } from \"./tz-dp-container/tz-dp-container.component\";\n\n@Directive({\n  selector: \"input[misTzDp]\"\n})\nexport class TzDatepickerDirective implements OnInit {\n  @Input() dpConfig: Partial<IDatePickerConfig>;\n  // dd-mm-yyyy 01-12-2022\n  @Input() set selectedDate(date: string) {\n    this.date = date;\n  }\n  @Input() set datesDisabled(dates: string[]) {\n    this.dpDisabledDates = dates;\n  }\n  @Input() dateMessages: IDatePickerToastText[] = [];\n  @Input() positionX: \"start\" | \"center\" | \"end\" = \"center\";\n  @Input() positionY: \"top\" | \"center\" | \"bottom\" = \"bottom\";\n  @Input() offsetX: number = 0;\n  @Input() offsetY: number = 0;\n  private overlayRef: OverlayRef;\n  @Output() dateChange = new EventEmitter<string>(true);\n  private isOpen = false;\n  date: string;\n\n  private dpDisabledDates: string[] = [];\n\n  constructor(\n    @Self() @Optional() private control: NgControl,\n    private element: ElementRef,\n    private overlay: Overlay,\n    private viewContainerRef: ViewContainerRef\n  ) {}\n  ngOnInit(): void {\n    this.dpConfig = {\n      format: DATE_FORMAT,\n      minDate: \"\",\n      maxDate: \"\",\n      showApplyButton: false,\n      ...this.dpConfig\n    };\n  }\n\n  @HostListener(\"click\")\n  toggleDatePicker() {\n    if (this.isOpen) {\n      this.close();\n    } else {\n      this.open();\n    }\n  }\n\n  private open() {\n    this.isOpen = true;\n    const positionStrategy = this.overlay\n      .position()\n      .flexibleConnectedTo(this.element)\n      .withPositions(\n        genPositionPairs(\n          {\n            positionX: this.positionX,\n            positionY: this.positionY,\n            offsetX: this.offsetX,\n            offsetY: this.offsetY\n          },\n          true\n        )\n      )\n      .withPush(true);\n    const config = new OverlayConfig({\n      hasBackdrop: true,\n      positionStrategy,\n      scrollStrategy: this.overlay.scrollStrategies.reposition(),\n      backdropClass: \"cdk-overlay-transparent-backdrop\"\n    });\n    this.overlayRef = this.overlay.create(config);\n    const tempRef = new ComponentPortal(\n      TzDpContainerComponent,\n      this.viewContainerRef,\n      Injector.create({\n        providers: [\n          {\n            provide: CONTAINER_DATA,\n            useValue: {\n              messages: this.dateMessages,\n              date: this.control?.control.value || this.date,\n              dpConfig: this.dpConfig,\n              datesDisabled: this.dpDisabledDates,\n              dateChange: this.applyDate.bind(this)\n            }\n          }\n        ]\n      })\n    );\n    this.overlayRef.attach(tempRef);\n    this.overlayRef\n      .backdropClick()\n      .pipe(take(1))\n      .subscribe(() => {\n        this.close();\n      });\n  }\n\n  applyDate(date: string = \"\") {\n    if (!date) {\n      this.close();\n      return;\n    }\n    this.dateChange.emit(date);\n    this.control?.control.patchValue(date);\n    this.date = date;\n    this.close();\n  }\n\n  private close() {\n    this.isOpen = false;\n    this.overlayRef.detach();\n    this.overlayRef.dispose();\n  }\n\n  private genPositionPairs(): ConnectionPositionPair[] {\n    return [\n      new ConnectionPositionPair(\n        { originX: this.positionX, originY: this.positionY },\n        { overlayX: this.positionX, overlayY: this.positionY === \"bottom\" ? \"top\" : \"bottom\" },\n        this.offsetX,\n        this.offsetY\n      ),\n      new ConnectionPositionPair({ originX: \"center\", originY: \"bottom\" }, { overlayX: \"center\", overlayY: \"top\" }),\n      new ConnectionPositionPair({ originX: \"center\", originY: \"top\" }, { overlayX: \"center\", overlayY: \"bottom\" }),\n      new ConnectionPositionPair({ originX: \"start\", originY: \"bottom\" }, { overlayX: \"start\", overlayY: \"top\" }),\n      new ConnectionPositionPair({ originX: \"start\", originY: \"top\" }, { overlayX: \"start\", overlayY: \"bottom\" }),\n      new ConnectionPositionPair({ originX: \"end\", originY: \"bottom\" }, { overlayX: \"end\", overlayY: \"top\" }),\n      new ConnectionPositionPair({ originX: \"end\", originY: \"top\" }, { overlayX: \"end\", overlayY: \"bottom\" })\n    ];\n  }\n}\n","import { NgModule } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\nimport { TzDpContainerComponent } from \"./tz-dp-container/tz-dp-container.component\";\nimport { TzDatepickerDirective } from \"./tz-datepicker.directive\";\nimport { ToastModule } from 'mis-crystal-design-system/toast';\nimport { ButtonModule } from 'mis-crystal-design-system/button';\n@NgModule({\n  declarations: [TzDpContainerComponent, TzDatepickerDirective],\n  imports: [CommonModule, ToastModule.forRoot(), ButtonModule],\n  exports: [TzDpContainerComponent, TzDatepickerDirective],\n  entryComponents: [TzDpContainerComponent]\n})\nexport class DatepickerModuleV2 {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n\nexport {CONTAINER_DATA as ɵc} from './datepicker-constants';\nexport {IDatePickerData as ɵa} from './models/dp-config.model';\nexport {TzDpContainerComponent as ɵb} from './tz-dp-container/tz-dp-container.component';"],"names":[],"mappings":"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"}
+{"version":3,"file":"mis-crystal-design-system-datepicker_v2.js","sources":["../../../projects/mis-components/datepicker_v2/datepicker-constants.ts","../../../projects/mis-components/datepicker_v2/utils/index.ts","../../../projects/mis-components/datepicker_v2/tz-dp-container/tz-dp-container.component.ts","../../../projects/mis-components/datepicker_v2/tz-datepicker.directive.ts","../../../projects/mis-components/datepicker_v2/datepicker.module.ts","../../../projects/mis-components/datepicker_v2/mis-crystal-design-system-datepicker_v2.ts"],"sourcesContent":["/** @format */\n\nimport { InjectionToken } from \"@angular/core\";\n\nexport const CONTAINER_DATA = new InjectionToken<{}>('CONTAINER_DATA');\nexport const DATE_FORMAT = \"DD-MM-YYYY\";","import { ICurrentMonth } from \"../models/dp-config.model\";\n\nexport const getMonth = (index: number): ICurrentMonth => {\n    let month;\n    switch (index) {\n        case 0:\n            month = 'January'\n            break;\n        case 1:\n            month = 'February'\n            break;\n        case 2:\n            month = 'March'\n            break;\n        case 3:\n            month = 'April'\n            break;\n        case 4:\n            month = 'May'\n            break;\n        case 5:\n            month = 'June'\n            break;\n        case 6:\n            month = 'July'\n            break;\n        case 7:\n            month = 'August'\n            break;\n        case 8:\n            month = 'September'\n            break;\n        case 9:\n            month = 'October'\n            break;\n        case 10:\n            month = 'November'\n            break;\n        case 11:\n            month = 'December'\n            break;\n        default:\n            break;\n    }\n    return month;\n}","import { Component, Inject, OnInit } from \"@angular/core\";\nimport { CONTAINER_DATA, DATE_FORMAT } from \"../datepicker-constants\";\nimport { ICurrentMonth, ICurrentMonthDates, IDatePickerData, IWeekDay } from \"../models/dp-config.model\";\nimport { parseZone, Moment, tz } from \"moment-timezone\";\nimport { getMonth } from \"../utils\";\nimport { ToastService } from \"mis-crystal-design-system/toast\";\n\n@Component({\n  selector: \"mis-tz-dp\",\n  templateUrl: \"./tz-dp-container.component.html\",\n  styleUrls: [\"./tz-dp-container.component.scss\"],\n})\nexport class TzDpContainerComponent implements OnInit {\n  data: IDatePickerData;\n  private parseZoneInstance = (...args) => {\n    return parseZone(...args);\n  };\n  private rawWeekDays: string[] = [\"SUN\", \"MON\", \"TUE\", \"WED\", \"THU\", \"FRI\", \"SAT\"];\n  weekDays: IWeekDay[] = [];\n  currentMonthNumber: number;\n  currentMonth: ICurrentMonth;\n  currentYearNumber: number;\n  currentMonthDates: ICurrentMonthDates[] = [];\n  isPreviousMonthDisabled: boolean = false;\n  isNextMonthDisabled: boolean = false;\n  localSelectedDate: ICurrentMonthDates;\n\n  constructor(@Inject(CONTAINER_DATA) data: IDatePickerData, private toast: ToastService) {\n    this.data = data;\n    if (this.data?.dpConfig?.timezone) {\n      this.parseZoneInstance = (...args) => {\n        return tz(args[0], args[1], this.data.dpConfig.timezone);\n      };\n    }\n    this.currentMonthNumber = this.parseZoneInstance().month();\n    this.currentMonth = getMonth(this.currentMonthNumber);\n    this.currentYearNumber = this.parseZoneInstance().year();\n    this.weekDays = this.rawWeekDays.map((day, index) => ({\n      label: `${day[0]}${day.slice(1).toLowerCase()}`,\n      isCurrentDay: this.parseZoneInstance().day() === index,\n    }));\n    if (!this.data?.dpConfig?.format) {\n      this.data.dpConfig = {\n        ...this.data.dpConfig,\n        format: DATE_FORMAT,\n      };\n    }\n  }\n\n  ngOnInit(): void {\n    this.currentDateInstance();\n    this.calculateMinMaxDays();\n  }\n\n  private currentDateInstance(): void {\n    const selectedDate = parseZone(this.data.date, this.data.dpConfig.format);\n    if (selectedDate.isValid()) {\n      this.currentYearNumber = selectedDate.year();\n      this.currentMonthNumber = selectedDate.month();\n      this.currentMonth = getMonth(this.currentMonthNumber);\n    }\n    this.currentMonthDates = this.generateDates(this.currentMonthNumber, this.currentYearNumber);\n  }\n\n  private calculateMinMaxDays() {\n    const currentInstance = this.parseZoneInstance().year(this.currentYearNumber).month(this.currentMonthNumber);\n    const minDate = this.parseZoneInstance(this.data.dpConfig.minDate, this.data.dpConfig.format);\n    if (minDate.isValid()) {\n      this.isPreviousMonthDisabled = minDate.isSameOrAfter(currentInstance, \"month\");\n    }\n    const maxDate = this.parseZoneInstance(this.data.dpConfig.maxDate, this.data.dpConfig.format);\n    if (maxDate.isValid()) {\n      this.isNextMonthDisabled = maxDate.isSameOrBefore(currentInstance, \"month\");\n    }\n  }\n\n  navigateMonth(direction: \"NEXT\" | \"PREVIOUS\"): void {\n    let thisMonth: Moment = parseZone().year(this.currentYearNumber).month(this.currentMonthNumber);\n    if (direction === \"NEXT\") {\n      thisMonth = thisMonth.add(1, \"month\");\n    } else if (direction === \"PREVIOUS\") {\n      thisMonth = thisMonth.subtract(1, \"month\");\n    }\n    this.currentMonthNumber = thisMonth.month();\n    this.currentMonth = getMonth(this.currentMonthNumber);\n    this.currentYearNumber = thisMonth.year();\n    this.currentMonthDates = this.generateDates(this.currentMonthNumber, this.currentYearNumber);\n    this.calculateMinMaxDays();\n  }\n\n  private generateDates(month: number, currentYearNumber: number): ICurrentMonthDates[] {\n    let dates: ICurrentMonthDates[] = [];\n    const daysInMonth = parseZone().year(currentYearNumber).month(month).daysInMonth();\n    for (let currentDate = 1; currentDate <= daysInMonth; currentDate++) {\n      const date = this.parseZoneInstance().year(currentYearNumber).month(month).date(currentDate);\n      const dateString = date.format(this.data.dpConfig.format);\n      let isDisabledDay = this.data.datesDisabled.some((d) => d === dateString);\n      const minDate = this.parseZoneInstance(this.data.dpConfig.minDate, this.data.dpConfig.format);\n      if (!isDisabledDay && minDate.isValid()) {\n        isDisabledDay = minDate.isAfter(date, \"day\");\n      }\n      const maxDate = this.parseZoneInstance(this.data.dpConfig.maxDate, this.data.dpConfig.format);\n      if (!isDisabledDay && maxDate.isValid()) {\n        isDisabledDay = maxDate.isBefore(date, \"day\");\n      }\n      dates.push({\n        date: currentDate,\n        weekDay: date.day(),\n        isCurrentDay:\n          this.parseZoneInstance().year(currentYearNumber).month(month).date(currentDate).format(this.data.dpConfig.format) ===\n          this.parseZoneInstance().format(this.data.dpConfig.format),\n        isSelectedDay: !isDisabledDay && date.format(this.data.dpConfig.format) === this.data.date,\n        toastMessage: this.data.messages.find((q) => date.format(this.data.dpConfig.format) === q.date)?.message || \"\",\n        isDisabledDay,\n      });\n    }\n    for (let i = dates[0].weekDay; i > 0; i--) {\n      dates.unshift({ date: 0, weekDay: i - 1 });\n    }\n    return dates;\n  }\n\n  selectDay(day: ICurrentMonthDates) {\n    if (day.date <= 0) return;\n    if (!day.isDisabledDay) {\n      this.localSelectedDate = day;\n      if(!this.data.dpConfig.showApplyButton) { this.applyDate(day) }\n    }\n    if (day.toastMessage) {\n      this.toast.displayMsg(day.toastMessage, 4000);\n    }\n  }\n\n  applyDate(day?: ICurrentMonthDates) {\n    if(day || this.localSelectedDate) {\n      this.data.dateChange(\n        parseZone().year(this.currentYearNumber).month(this.currentMonthNumber)\n          .date(day ? day.date : this.localSelectedDate.date).format(this.data.dpConfig.format)\n      );\n    } else {\n      this.cancelDatePicker();\n    }\n  }\n\n  cancelDatePicker() {\n    this.data.dateChange('')\n  }\n}\n","import { ConnectionPositionPair, Overlay, OverlayConfig, OverlayRef, PositionStrategy } from \"@angular/cdk/overlay\";\nimport { ComponentPortal } from \"@angular/cdk/portal\";\nimport { Directive, ElementRef, EventEmitter, HostListener, Injector, Input, OnInit, Optional, Output, Self, ViewContainerRef } from \"@angular/core\";\nimport { NgControl } from \"@angular/forms\";\nimport { take } from \"rxjs/operators\";\nimport { genPositionPairs } from \"mis-crystal-design-system/utils\";\nimport { CONTAINER_DATA, DATE_FORMAT } from \"./datepicker-constants\";\nimport { IDatePickerConfig, IDatePickerToastText } from \"./models/dp-config.model\";\nimport { TzDpContainerComponent } from \"./tz-dp-container/tz-dp-container.component\";\n\n@Directive({\n  selector: \"input[misTzDp]\"\n})\nexport class TzDatepickerDirective implements OnInit {\n  @Input() dpConfig: Partial<IDatePickerConfig>;\n  // dd-mm-yyyy 01-12-2022\n  @Input() set selectedDate(date: string) {\n    this.date = date;\n  }\n  @Input() set datesDisabled(dates: string[]) {\n    this.dpDisabledDates = dates;\n  }\n  @Input() dateMessages: IDatePickerToastText[] = [];\n  @Input() positionX: \"start\" | \"center\" | \"end\" = \"center\";\n  @Input() positionY: \"top\" | \"center\" | \"bottom\" = \"bottom\";\n  @Input() offsetX: number = 0;\n  @Input() offsetY: number = 0;\n  private overlayRef: OverlayRef;\n  @Output() dateChange = new EventEmitter<string>(true);\n  private isOpen = false;\n  date: string;\n\n  private dpDisabledDates: string[] = [];\n\n  constructor(\n    @Self() @Optional() private control: NgControl,\n    private element: ElementRef,\n    private overlay: Overlay,\n    private viewContainerRef: ViewContainerRef\n  ) {}\n  ngOnInit(): void {\n    this.dpConfig = {\n      format: DATE_FORMAT,\n      minDate: \"\",\n      maxDate: \"\",\n      showApplyButton: false,\n      ...this.dpConfig\n    };\n  }\n\n  @HostListener(\"click\")\n  toggleDatePicker() {\n    if (this.isOpen) {\n      this.close();\n    } else {\n      this.open();\n    }\n  }\n\n  private open() {\n    this.isOpen = true;\n    const positionStrategy = this.overlay\n      .position()\n      .flexibleConnectedTo(this.element)\n      .withPositions(\n        genPositionPairs(\n          {\n            positionX: this.positionX,\n            positionY: this.positionY,\n            offsetX: this.offsetX,\n            offsetY: this.offsetY\n          },\n          true\n        )\n      )\n      .withPush(true);\n    const config = new OverlayConfig({\n      hasBackdrop: true,\n      positionStrategy,\n      scrollStrategy: this.overlay.scrollStrategies.reposition(),\n      backdropClass: \"cdk-overlay-transparent-backdrop\"\n    });\n    this.overlayRef = this.overlay.create(config);\n    const tempRef = new ComponentPortal(\n      TzDpContainerComponent,\n      this.viewContainerRef,\n      Injector.create({\n        providers: [\n          {\n            provide: CONTAINER_DATA,\n            useValue: {\n              messages: this.dateMessages,\n              date: this.control?.control.value || this.date,\n              dpConfig: this.dpConfig,\n              datesDisabled: this.dpDisabledDates,\n              dateChange: this.applyDate.bind(this)\n            }\n          }\n        ]\n      })\n    );\n    this.overlayRef.attach(tempRef);\n    this.overlayRef\n      .backdropClick()\n      .pipe(take(1))\n      .subscribe(() => {\n        this.close();\n      });\n  }\n\n  applyDate(date: string = \"\") {\n    if (!date) {\n      this.close();\n      return;\n    }\n    this.dateChange.emit(date);\n    this.control?.control.patchValue(date);\n    this.date = date;\n    this.close();\n  }\n\n  private close() {\n    this.isOpen = false;\n    this.overlayRef.detach();\n    this.overlayRef.dispose();\n  }\n}\n","import { NgModule } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\nimport { TzDpContainerComponent } from \"./tz-dp-container/tz-dp-container.component\";\nimport { TzDatepickerDirective } from \"./tz-datepicker.directive\";\nimport { ToastModule } from 'mis-crystal-design-system/toast';\nimport { ButtonModule } from 'mis-crystal-design-system/button';\n@NgModule({\n  declarations: [TzDpContainerComponent, TzDatepickerDirective],\n  imports: [CommonModule, ToastModule.forRoot(), ButtonModule],\n  exports: [TzDpContainerComponent, TzDatepickerDirective],\n  entryComponents: [TzDpContainerComponent]\n})\nexport class DatepickerModuleV2 {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n\nexport {CONTAINER_DATA as ɵc} from './datepicker-constants';\nexport {IDatePickerData as ɵa} from './models/dp-config.model';\nexport {TzDpContainerComponent as ɵb} from './tz-dp-container/tz-dp-container.component';"],"names":[],"mappings":"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"}

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

@@ -1,24 +1,28 @@
-import { EventEmitter, Component, ElementRef, Input, Output, HostListener, NgModule } from '@angular/core';
+import { ConnectionPositionPair, OverlayConfig, Overlay } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { EventEmitter, Component, ElementRef, ViewContainerRef, Input, Output, ViewChild, HostListener, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 
 class DropdownComponent {
-    constructor(eRef) {
+    constructor(eRef, overlay, viewContainerRef) {
         this.eRef = eRef;
+        this.overlay = overlay;
+        this.viewContainerRef = viewContainerRef;
         this.isOpen = false;
         this.isSearchInputFocused = false;
-        this.searchInput = '';
+        this.searchInput = "";
         this.searchData = [];
         this.data = [];
-        this.height = '';
-        this.width = '';
-        this.label = 'Select';
-        this.dropdownListHeight = '';
-        this.dropdownListWidth = '';
-        this.dropdownListPosition = 'Left';
+        this.height = "";
+        this.width = "";
+        this.label = "Select";
+        this.dropdownListHeight = "";
+        this.dropdownListWidth = "";
+        this.dropdownListPosition = "Left";
         this.searchEnabled = true;
-        this.selectedItem = { value: '', label: '' };
-        this.noDataMessage = 'No Data';
+        this.selectedItem = { value: "", label: "" };
+        this.noDataMessage = "No Data";
         this.onChange = new EventEmitter();
     }
     ngOnInit() { }
@@ -38,7 +42,7 @@ class DropdownComponent {
         }
         else {
             this.searchData = [];
-            this.searchInput = '';
+            this.searchInput = "";
         }
     }
     searchInputFocused(isFocused) {
@@ -46,31 +50,73 @@ class DropdownComponent {
     }
     searchInputCanceled(event) {
         event.stopPropagation();
-        this.searchInput = '';
+        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;
-        this.searchInput = '';
+        (_a = this.overlayRef) === null || _a === void 0 ? void 0 : _a.detach();
+        this.searchInput = "";
     }
 }
 DropdownComponent.decorators = [
     { type: Component, args: [{
-                selector: 'mis-dropdown',
-                template: "<div class=\"main-container\"\n     [ngStyle]=\"{\n        'height': height.length > 0? height: '',\n        'width': width.length > 0? width: ''\n     }\"\n>\n    <div class=\"dropdown\" (click)=\"toggleDropdown()\" [ngStyle]=\"{'background': isOpen ? '#E6EBF7': ''}\">\n        <div class=\"label\">\n            <p class=\"text\">\n                {{ selectedItem.label || label }}\n            </p>\n        </div>\n        <svg class=\"handle\" [ngStyle]=\"{ transform: isOpen ? 'rotate(180deg)': 'rotate(0deg)' }\" width=\"20\" height=\"20\"\n             viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                  d=\"M13.825 7.15845L10 10.9751L6.175 7.15845L5 8.33345L10 13.3334L15 8.33345L13.825 7.15845Z\" fill=\"#181F33\" />\n        </svg>\n    </div>\n    <div style=\"flex-basis: 0;\"></div>\n    <div style=\"width: 100%; position: relative;\">\n        <div *ngIf=\"isOpen\" class=\"popup-container\"\n             [ngStyle]=\"{\n                'height': dropdownListHeight,\n                'width': dropdownListWidth\n                }\"\n             [ngClass]=\"{\n                'position-left': dropdownListPosition === 'Left',\n                'position-right': dropdownListPosition === 'Right'\n             }\"\n        >\n            <div *ngIf=\"searchEnabled\" class=\"search-container\">\n                <svg *ngIf=\"!isSearchInputFocused\" class=\"search-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n                     xmlns=\"http://www.w3.org/2000/svg\">\n                    <path fill-rule=\"evenodd\" 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                </svg>\n                <input\n                        [ngModel]=\"searchInput\"\n                        [ngStyle]=\"{ paddingLeft: isSearchInputFocused ? '12px' : '45px', border:isSearchInputFocused? '1px solid #0937B2':'1px solid #e0e0e0', paddingRight: isSearchInputFocused ? '45px' : '10px' }\"\n                        (ngModelChange)=\"searchInputOnChange($event)\"\n                        [placeholder]=\"isSearchInputFocused ? '' : 'Search Keyword'\"\n                        (focus)=\"searchInputFocused(true)\"\n                        class=\"search-input\"\n                />\n                <svg *ngIf=\"isSearchInputFocused\" class=\"cancel-icon\" (click)=\"searchInputCanceled($event)\" width=\"24\" height=\"24\"\n                     viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path fill-rule=\"evenodd\" 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                </svg>\n            </div>\n            <div class=\"items\">\n                <div class=\"item\" [ngClass]=\"{'item-disabled': item.disabled}\" (click)=\"item.disabled ? null : selectItem(item)\" *ngFor=\"let item of searchInput ? searchData : data\">\n                    <div class=\"label\" [ngStyle]=\"{'width': item.icon? '90%': '100%'}\">\n                        {{ item.label }}\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                <div  class=\"noData\" *ngIf=\"(searchInput ? searchData : data).length === 0\">\n                    {{ searchInput === '' ? noDataMessage : 'No results' }}\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\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:hover{background-color:#f5f7fc}.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 .popup-container{position:absolute;top:4px;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);overflow:scroll;overflow-x:hidden;display:flex;flex-direction:column;justify-content:space-between;z-index:100}.main-container .popup-container::-webkit-scrollbar{width:0;height:0}.main-container .popup-container .search-container{position:relative;box-sizing:border-box;padding:8px}.main-container .popup-container .search-container .search-icon{position:absolute;width:24px;height:24px;top:50%;transform:translateY(-50%);left:18px;z-index:1}.main-container .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}.main-container .popup-container .search-container .cancel-icon{position:absolute;cursor:pointer;width:24px;height:24px;top:50%;transform:translateY(-50%);right:18px;z-index:1}.main-container .popup-container .items{padding:8px 0 8px 8px;overflow-y:scroll;height:100%}.main-container .popup-container .items::-webkit-scrollbar{width:5px;height:0}.main-container .popup-container .items::-webkit-scrollbar-thumb{background:#9aa7b4;border-radius:10px}.main-container .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}.main-container .popup-container .items .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}.main-container .popup-container .items .item:hover{background-color:#f5f7fc}.main-container .popup-container .items .item .label{width:100%;line-height:20px;font-size:14px;font-style:normal;font-weight:400}.main-container .popup-container .items .item .icon-container{width:10%;display:flex;justify-content:flex-end}.main-container .popup-container .items .item .icon-container .icon{width:20px;height:20px}.main-container .popup-container .items .item-disabled{cursor:not-allowed}.main-container .popup-container .items .item-disabled:hover{background-color:transparent}.main-container .popup-container .items .item-disabled .label{color:#929dab;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.position-left{right:0}.position-right{left:0}"]
+                selector: "mis-dropdown",
+                template: "<div\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]=\"{ background: isOpen ? '#E6EBF7' : '' }\"\n  >\n    <div class=\"label\">\n      <p class=\"text\">\n        {{ selectedItem.label || label }}\n      </p>\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 ? '' : 'Search Keyword'\"\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=\"items\">\n      <div\n        class=\"item\"\n        tabindex=\"0\"\n        [ngClass]=\"{ 'item-disabled': item.disabled }\"\n        (click)=\"item.disabled ? null : selectItem(item)\"\n        (keyup.enter)=\"item.disabled ? null : selectItem(item)\"\n        *ngFor=\"let item of searchInput ? searchData : data\"\n      >\n        <div class=\"label\" [ngStyle]=\"{ width: item.icon ? '90%' : '100%' }\">\n          <span>{{ item.label }}</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      <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}.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{justify-content:center;font-style:normal;font-weight:400;font-size:14px;line-height:20px}.popup-container .items .item,.popup-container .items .noData{display:flex;align-items:center;letter-spacing:.2px;color:#181f33}.popup-container .items .item{cursor:pointer;justify-content:flex-start;gap:10px;padding:8px 12px;border-radius:6px;height:auto}.popup-container .items .item:focus-visible,.popup-container .items .item:hover{background-color:#f5f7fc;outline:none}.popup-container .items .item .label{width:100%;line-height:20px;font-size:14px;font-style:normal;font-weight:400;text-overflow:ellipsis;overflow:hidden}.popup-container .items .item .icon-container{width:10%;display:flex;justify-content:flex-end}.popup-container .items .item .icon-container .icon{width:20px;height:20px}.popup-container .items .item-disabled{cursor:not-allowed}.popup-container .items .item-disabled:focus-visible,.popup-container .items .item-disabled:hover{background-color:transparent;outline:none}.popup-container .items .item-disabled .label{color:#929dab;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}"]
             },] }
 ];
 DropdownComponent.ctorParameters = () => [
-    { type: ElementRef }
+    { type: ElementRef },
+    { type: Overlay },
+    { type: ViewContainerRef }
 ];
 DropdownComponent.propDecorators = {
     data: [{ type: Input }],
@@ -84,7 +130,9 @@ DropdownComponent.propDecorators = {
     selectedItem: [{ type: Input }],
     noDataMessage: [{ type: Input }],
     onChange: [{ type: Output }],
-    clickout: [{ type: HostListener, args: ['document:click', ['$event'],] }]
+    selectElement: [{ type: ViewChild, args: ["select", { static: false },] }],
+    popupContainer: [{ type: ViewChild, args: ["popupContainer", { static: false },] }],
+    clickout: [{ type: HostListener, args: ["document:click", ["$event"],] }]
 };
 
 class DropdownModule {