mis-crystal-design-system 2.4.8 → 2.5.1

package/bundles/mis-crystal-design-system-menu.umd.js

@@ -0,0 +1,119 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/cdk/overlay'), require('@angular/cdk/portal'), require('@angular/core'), require('rxjs/operators'), require('@angular/common')) :
+    typeof define === 'function' && define.amd ? define('mis-crystal-design-system/menu', ['exports', '@angular/cdk/overlay', '@angular/cdk/portal', '@angular/core', 'rxjs/operators', '@angular/common'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['mis-crystal-design-system'] = global['mis-crystal-design-system'] || {}, global['mis-crystal-design-system'].menu = {}), global.ng.cdk.overlay, global.ng.cdk.portal, global.ng.core, global.rxjs.operators, global.ng.common));
+}(this, (function (exports, overlay, portal, core, operators, common) { 'use strict';
+
+    /** @format */
+    var MenuDirective = /** @class */ (function () {
+        function MenuDirective(overlay, element, viewContainerRef) {
+            this.overlay = overlay;
+            this.element = element;
+            this.viewContainerRef = viewContainerRef;
+            this.positionX = "start";
+            this.positionY = "bottom";
+            this.offsetX = 0;
+            this.offsetY = 0;
+        }
+        MenuDirective.prototype.onClick = function (event) {
+            this.menuShow();
+        };
+        MenuDirective.prototype.menuShow = function () {
+            var _this = this;
+            var positionStrategy = this.overlay
+                .position()
+                .flexibleConnectedTo(this.element)
+                .withPositions([
+                new overlay.ConnectionPositionPair({ originX: this.positionX, originY: this.positionY }, { overlayX: this.positionX, overlayY: this.positionY === "bottom" ? "top" : "bottom" }, this.offsetX, this.offsetY),
+                new overlay.ConnectionPositionPair({ originX: "start", originY: "bottom" }, { overlayX: "start", overlayY: "top" }, this.offsetX, this.offsetY),
+                new overlay.ConnectionPositionPair({ originX: "end", originY: "top" }, { overlayX: "end", overlayY: "bottom" }, this.offsetX, this.offsetY)
+            ])
+                .withPush(true);
+            var config = new overlay.OverlayConfig({
+                hasBackdrop: true,
+                positionStrategy: positionStrategy,
+                scrollStrategy: this.overlay.scrollStrategies.reposition(),
+                backdropClass: "cdk-overlay-transparent-backdrop"
+            });
+            this.overlayRef = this.overlay.create(config);
+            var tempRef = new portal.TemplatePortal(this.menu, this.viewContainerRef);
+            this.overlayRef.attach(tempRef);
+            this.overlayRef
+                .backdropClick()
+                .pipe(operators.take(1))
+                .subscribe(function (res) {
+                _this.close();
+            });
+        };
+        MenuDirective.prototype.close = function () {
+            var _a, _b;
+            (_a = this.overlayRef) === null || _a === void 0 ? void 0 : _a.detach();
+            (_b = this.overlayRef) === null || _b === void 0 ? void 0 : _b.dispose();
+        };
+        return MenuDirective;
+    }());
+    MenuDirective.decorators = [
+        { type: core.Directive, args: [{
+                    selector: "[misMenu]",
+                    exportAs: "misMenu"
+                },] }
+    ];
+    MenuDirective.ctorParameters = function () { return [
+        { type: overlay.Overlay },
+        { type: core.ElementRef },
+        { type: core.ViewContainerRef }
+    ]; };
+    MenuDirective.propDecorators = {
+        menu: [{ type: core.Input, args: ["misMenu",] }],
+        positionX: [{ type: core.Input }],
+        positionY: [{ type: core.Input }],
+        offsetX: [{ type: core.Input }],
+        offsetY: [{ type: core.Input }],
+        onClick: [{ type: core.HostListener, args: ["click", ["$event"],] }]
+    };
+
+    var MenuCloseDirective = /** @class */ (function () {
+        function MenuCloseDirective() {
+        }
+        MenuCloseDirective.prototype.closeMenu = function () {
+            this.menu.close();
+        };
+        return MenuCloseDirective;
+    }());
+    MenuCloseDirective.decorators = [
+        { type: core.Directive, args: [{
+                    selector: "[misMenuClose]"
+                },] }
+    ];
+    MenuCloseDirective.ctorParameters = function () { return []; };
+    MenuCloseDirective.propDecorators = {
+        menu: [{ type: core.Input, args: ["misMenuClose",] }],
+        closeMenu: [{ type: core.HostListener, args: ["click", [],] }]
+    };
+
+    /** @format */
+    var MisMenuModule = /** @class */ (function () {
+        function MisMenuModule() {
+        }
+        return MisMenuModule;
+    }());
+    MisMenuModule.decorators = [
+        { type: core.NgModule, args: [{
+                    declarations: [MenuDirective, MenuCloseDirective],
+                    imports: [common.CommonModule, overlay.OverlayModule, portal.PortalModule],
+                    exports: [MenuDirective, MenuCloseDirective]
+                },] }
+    ];
+
+    /**
+     * Generated bundle index. Do not edit.
+     */
+
+    exports.MenuCloseDirective = MenuCloseDirective;
+    exports.MenuDirective = MenuDirective;
+    exports.MisMenuModule = MisMenuModule;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+})));
+//# sourceMappingURL=mis-crystal-design-system-menu.umd.js.map

package/bundles/mis-crystal-design-system-menu.umd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mis-crystal-design-system-menu.umd.js","sources":["../../../projects/mis-components/menu/menu.directive.ts","../../../projects/mis-components/menu/menu-close.directive.ts","../../../projects/mis-components/menu/menu.module.ts","../../../projects/mis-components/menu/mis-crystal-design-system-menu.ts"],"sourcesContent":["/** @format */\n\nimport { ConnectionPositionPair, Overlay, OverlayConfig, OverlayRef } from \"@angular/cdk/overlay\";\nimport { TemplatePortal } from \"@angular/cdk/portal\";\nimport { Directive, ElementRef, HostListener, Input, TemplateRef, ViewContainerRef } from \"@angular/core\";\nimport { take } from \"rxjs/operators\";\n\n@Directive({\n  selector: \"[misMenu]\",\n  exportAs: \"misMenu\"\n})\nexport class MenuDirective {\n  @Input(\"misMenu\") menu: TemplateRef<ElementRef>;\n  @Input() positionX: \"start\" | \"end\" = \"start\";\n  @Input() positionY: \"top\" | \"bottom\" = \"bottom\";\n  @Input() offsetX = 0;\n  @Input() offsetY = 0;\n  private overlayRef: OverlayRef;\n\n  constructor(private overlay: Overlay, private element: ElementRef, private viewContainerRef: ViewContainerRef) {}\n  @HostListener(\"click\", [\"$event\"]) onClick(event) {\n    this.menuShow();\n  }\n  private menuShow() {\n    const positionStrategy = this.overlay\n      .position()\n      .flexibleConnectedTo(this.element)\n      .withPositions([\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: \"start\", originY: \"bottom\" }, { overlayX: \"start\", overlayY: \"top\" }, this.offsetX, this.offsetY),\n        new ConnectionPositionPair({ originX: \"end\", originY: \"top\" }, { overlayX: \"end\", overlayY: \"bottom\" }, this.offsetX, this.offsetY)\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\n    const tempRef = new TemplatePortal(this.menu, this.viewContainerRef);\n    this.overlayRef.attach(tempRef);\n    this.overlayRef\n      .backdropClick()\n      .pipe(take(1))\n      .subscribe(res => {\n        this.close();\n      });\n  }\n\n  close(): void {\n    this.overlayRef?.detach();\n    this.overlayRef?.dispose();\n  }\n}\n","import { Directive, HostListener, Input } from \"@angular/core\";\nimport { MenuDirective } from \"./menu.directive\";\n\n@Directive({\n  selector: \"[misMenuClose]\"\n})\nexport class MenuCloseDirective {\n  @Input(\"misMenuClose\") menu: MenuDirective;\n  constructor() {}\n\n  @HostListener(\"click\", []) closeMenu() {\n    this.menu.close();\n  }\n}\n","/** @format */\n\nimport { NgModule } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\nimport { MenuDirective } from \"./menu.directive\";\nimport { OverlayModule } from \"@angular/cdk/overlay\";\nimport { PortalModule } from \"@angular/cdk/portal\";\nimport { MenuCloseDirective } from \"./menu-close.directive\";\n\n@NgModule({\n  declarations: [MenuDirective, MenuCloseDirective],\n  imports: [CommonModule, OverlayModule, PortalModule],\n  exports: [MenuDirective, MenuCloseDirective]\n})\nexport class MisMenuModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["ConnectionPositionPair","OverlayConfig","TemplatePortal","take","Directive","Overlay","ElementRef","ViewContainerRef","Input","HostListener","NgModule","CommonModule","OverlayModule","PortalModule"],"mappings":"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"}

package/bundles/mis-crystal-design-system-menu.umd.min.js

@@ -0,0 +1,2 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/cdk/overlay"),require("@angular/cdk/portal"),require("@angular/core"),require("rxjs/operators"),require("@angular/common")):"function"==typeof define&&define.amd?define("mis-crystal-design-system/menu",["exports","@angular/cdk/overlay","@angular/cdk/portal","@angular/core","rxjs/operators","@angular/common"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self)["mis-crystal-design-system"]=e["mis-crystal-design-system"]||{},e["mis-crystal-design-system"].menu={}),e.ng.cdk.overlay,e.ng.cdk.portal,e.ng.core,e.rxjs.operators,e.ng.common)}(this,(function(e,t,o,i,r,s){"use strict";var n=function(){function e(e,t,o){this.overlay=e,this.element=t,this.viewContainerRef=o,this.positionX="start",this.positionY="bottom",this.offsetX=0,this.offsetY=0}return e.prototype.onClick=function(e){this.menuShow()},e.prototype.menuShow=function(){var e=this,i=this.overlay.position().flexibleConnectedTo(this.element).withPositions([new t.ConnectionPositionPair({originX:this.positionX,originY:this.positionY},{overlayX:this.positionX,overlayY:"bottom"===this.positionY?"top":"bottom"},this.offsetX,this.offsetY),new t.ConnectionPositionPair({originX:"start",originY:"bottom"},{overlayX:"start",overlayY:"top"},this.offsetX,this.offsetY),new t.ConnectionPositionPair({originX:"end",originY:"top"},{overlayX:"end",overlayY:"bottom"},this.offsetX,this.offsetY)]).withPush(!0),s=new t.OverlayConfig({hasBackdrop:!0,positionStrategy:i,scrollStrategy:this.overlay.scrollStrategies.reposition(),backdropClass:"cdk-overlay-transparent-backdrop"});this.overlayRef=this.overlay.create(s);var n=new o.TemplatePortal(this.menu,this.viewContainerRef);this.overlayRef.attach(n),this.overlayRef.backdropClick().pipe(r.take(1)).subscribe((function(t){e.close()}))},e.prototype.close=function(){var e,t;null===(e=this.overlayRef)||void 0===e||e.detach(),null===(t=this.overlayRef)||void 0===t||t.dispose()},e}();n.decorators=[{type:i.Directive,args:[{selector:"[misMenu]",exportAs:"misMenu"}]}],n.ctorParameters=function(){return[{type:t.Overlay},{type:i.ElementRef},{type:i.ViewContainerRef}]},n.propDecorators={menu:[{type:i.Input,args:["misMenu"]}],positionX:[{type:i.Input}],positionY:[{type:i.Input}],offsetX:[{type:i.Input}],offsetY:[{type:i.Input}],onClick:[{type:i.HostListener,args:["click",["$event"]]}]};var a=function(){function e(){}return e.prototype.closeMenu=function(){this.menu.close()},e}();a.decorators=[{type:i.Directive,args:[{selector:"[misMenuClose]"}]}],a.ctorParameters=function(){return[]},a.propDecorators={menu:[{type:i.Input,args:["misMenuClose"]}],closeMenu:[{type:i.HostListener,args:["click",[]]}]};var l=function(){};l.decorators=[{type:i.NgModule,args:[{declarations:[n,a],imports:[s.CommonModule,t.OverlayModule,o.PortalModule],exports:[n,a]}]}],e.MenuCloseDirective=a,e.MenuDirective=n,e.MisMenuModule=l,Object.defineProperty(e,"__esModule",{value:!0})}));
+//# sourceMappingURL=mis-crystal-design-system-menu.umd.min.js.map

package/bundles/mis-crystal-design-system-menu.umd.min.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../projects/mis-components/menu/menu.directive.ts","../../../projects/mis-components/menu/menu-close.directive.ts","../../../projects/mis-components/menu/menu.module.ts"],"names":["MenuDirective","overlay","element","viewContainerRef","this","positionX","positionY","offsetX","offsetY","prototype","onClick","event","menuShow","_this","positionStrategy","position","flexibleConnectedTo","withPositions","ConnectionPositionPair","originX","originY","overlayX","overlayY","withPush","config","OverlayConfig","hasBackdrop","scrollStrategy","scrollStrategies","reposition","backdropClass","overlayRef","create","tempRef","TemplatePortal","menu","attach","backdropClick","pipe","take","subscribe","res","close","_a","detach","_b","dispose","Directive","args","selector","exportAs","Overlay","ElementRef","ViewContainerRef","Input","HostListener","MenuCloseDirective","closeMenu","NgModule","declarations","imports","CommonModule","OverlayModule","PortalModule","exports"],"mappings":"8rBAmBE,SAAAA,EAAoBC,EAA0BC,EAA6BC,GAAvDC,KAAAH,QAAAA,EAA0BG,KAAAF,QAAAA,EAA6BE,KAAAD,iBAAAA,EANlEC,KAAAC,UAA6B,QAC7BD,KAAAE,UAA8B,SAC9BF,KAAAG,QAAU,EACVH,KAAAI,QAAU,SAIgBR,EAAAS,UAAAC,QAAA,SAAQC,GACzCP,KAAKQ,YAECZ,EAAAS,UAAAG,SAAA,WAAA,IAAAC,EAAAT,KACAU,EAAmBV,KAAKH,QAC3Bc,WACAC,oBAAoBZ,KAAKF,SACzBe,cAAc,CACb,IAAIC,EAAAA,uBACF,CAAEC,QAASf,KAAKC,UAAWe,QAAShB,KAAKE,WACzC,CAAEe,SAAUjB,KAAKC,UAAWiB,SAA6B,WAAnBlB,KAAKE,UAAyB,MAAQ,UAC5EF,KAAKG,QACLH,KAAKI,SAEP,IAAIU,EAAAA,uBAAuB,CAAEC,QAAS,QAASC,QAAS,UAAY,CAAEC,SAAU,QAASC,SAAU,OAASlB,KAAKG,QAASH,KAAKI,SAC/H,IAAIU,EAAAA,uBAAuB,CAAEC,QAAS,MAAOC,QAAS,OAAS,CAAEC,SAAU,MAAOC,SAAU,UAAYlB,KAAKG,QAASH,KAAKI,WAE5He,UAAS,GACNC,EAAS,IAAIC,EAAAA,cAAc,CAC/BC,aAAa,EACbZ,iBAAgBA,EAChBa,eAAgBvB,KAAKH,QAAQ2B,iBAAiBC,aAC9CC,cAAe,qCAEjB1B,KAAK2B,WAAa3B,KAAKH,QAAQ+B,OAAOR,GAEtC,IAAMS,EAAU,IAAIC,EAAAA,eAAe9B,KAAK+B,KAAM/B,KAAKD,kBACnDC,KAAK2B,WAAWK,OAAOH,GACvB7B,KAAK2B,WACFM,gBACAC,KAAKC,EAAAA,KAAK,IACVC,WAAU,SAAAC,GACT5B,EAAK6B,YAIX1C,EAAAS,UAAAiC,MAAA,mBACiB,QAAfC,EAAAvC,KAAK2B,kBAAU,IAAAY,GAAAA,EAAEC,SACF,QAAfC,EAAAzC,KAAK2B,kBAAU,IAAAc,GAAAA,EAAEC,oCAnDpBC,EAAAA,UAASC,KAAA,CAAC,CACTC,SAAU,YACVC,SAAU,uDAPqBC,EAAAA,eAEbC,EAAAA,kBAA8CC,EAAAA,kDAQ/DC,EAAAA,MAAKN,KAAA,CAAC,8BACNM,EAAAA,yBACAA,EAAAA,uBACAA,EAAAA,uBACAA,EAAAA,uBAIAC,EAAAA,aAAYP,KAAA,CAAC,QAAS,CAAC,+BCZxB,SAAAQ,YAE2BA,EAAA/C,UAAAgD,UAAA,WACzBrD,KAAK+B,KAAKO,kCARbK,EAAAA,UAASC,KAAA,CAAC,CACTC,SAAU,yFAGTK,EAAAA,MAAKN,KAAA,CAAC,mCAGNO,EAAAA,aAAYP,KAAA,CAAC,QAAS,aCIzB,iCALCU,EAAAA,SAAQV,KAAA,CAAC,CACRW,aAAc,CAAC3D,EAAewD,GAC9BI,QAAS,CAACC,EAAAA,aAAcC,EAAAA,cAAeC,EAAAA,cACvCC,QAAS,CAAChE,EAAewD","sourcesContent":["/** @format */\n\nimport { ConnectionPositionPair, Overlay, OverlayConfig, OverlayRef } from \"@angular/cdk/overlay\";\nimport { TemplatePortal } from \"@angular/cdk/portal\";\nimport { Directive, ElementRef, HostListener, Input, TemplateRef, ViewContainerRef } from \"@angular/core\";\nimport { take } from \"rxjs/operators\";\n\n@Directive({\n  selector: \"[misMenu]\",\n  exportAs: \"misMenu\"\n})\nexport class MenuDirective {\n  @Input(\"misMenu\") menu: TemplateRef<ElementRef>;\n  @Input() positionX: \"start\" | \"end\" = \"start\";\n  @Input() positionY: \"top\" | \"bottom\" = \"bottom\";\n  @Input() offsetX = 0;\n  @Input() offsetY = 0;\n  private overlayRef: OverlayRef;\n\n  constructor(private overlay: Overlay, private element: ElementRef, private viewContainerRef: ViewContainerRef) {}\n  @HostListener(\"click\", [\"$event\"]) onClick(event) {\n    this.menuShow();\n  }\n  private menuShow() {\n    const positionStrategy = this.overlay\n      .position()\n      .flexibleConnectedTo(this.element)\n      .withPositions([\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: \"start\", originY: \"bottom\" }, { overlayX: \"start\", overlayY: \"top\" }, this.offsetX, this.offsetY),\n        new ConnectionPositionPair({ originX: \"end\", originY: \"top\" }, { overlayX: \"end\", overlayY: \"bottom\" }, this.offsetX, this.offsetY)\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\n    const tempRef = new TemplatePortal(this.menu, this.viewContainerRef);\n    this.overlayRef.attach(tempRef);\n    this.overlayRef\n      .backdropClick()\n      .pipe(take(1))\n      .subscribe(res => {\n        this.close();\n      });\n  }\n\n  close(): void {\n    this.overlayRef?.detach();\n    this.overlayRef?.dispose();\n  }\n}\n","import { Directive, HostListener, Input } from \"@angular/core\";\nimport { MenuDirective } from \"./menu.directive\";\n\n@Directive({\n  selector: \"[misMenuClose]\"\n})\nexport class MenuCloseDirective {\n  @Input(\"misMenuClose\") menu: MenuDirective;\n  constructor() {}\n\n  @HostListener(\"click\", []) closeMenu() {\n    this.menu.close();\n  }\n}\n","/** @format */\n\nimport { NgModule } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\nimport { MenuDirective } from \"./menu.directive\";\nimport { OverlayModule } from \"@angular/cdk/overlay\";\nimport { PortalModule } from \"@angular/cdk/portal\";\nimport { MenuCloseDirective } from \"./menu-close.directive\";\n\n@NgModule({\n  declarations: [MenuDirective, MenuCloseDirective],\n  imports: [CommonModule, OverlayModule, PortalModule],\n  exports: [MenuDirective, MenuCloseDirective]\n})\nexport class MisMenuModule {}\n"]}

package/bundles/mis-crystal-design-system-modal.umd.js

@@ -42,10 +42,10 @@
                         animations.trigger("slideInOut", [
                             animations.transition(":enter", [
                                 animations.style({ transform: "translateY(-30%)", opacity: 0 }),
-                                animations.animate("200ms ease-out", animations.style({ transform: "translatey(0%)", opacity: 1 })),
+                                animations.animate("200ms ease-out", animations.style({ transform: "translatey(0%)", opacity: 1 }))
                             ]),
-                            animations.transition(":leave", [animations.animate("200ms ease-out", animations.style({ transform: "translatey(-30%)", opacity: 0 }))]),
-                        ]),
+                            animations.transition(":leave", [animations.animate("200ms ease-out", animations.style({ transform: "translatey(-30%)", opacity: 0 }))])
+                        ])
                     ],
                     styles: [".mis-modal-body{display:block;width:100%;height:100%;background-color:transparent;border-radius:12px;box-shadow:0 12px 24px rgba(0,0,0,.12),0 4px 8px rgba(0,0,0,.12);overflow:hidden}"]
                 },] }
@@ -70,7 +70,7 @@
                 width: width,
                 height: height,
                 panelClass: "mis-modal",
-                backdropClass: "mis-modal-overlay",
+                backdropClass: "mis-modal-overlay"
             });
             var overlayRef = this.overlay.create(config);
             var modalRef = new ModalRef(overlayRef);
@@ -112,7 +112,7 @@
     ModalService.ɵprov = i0.ɵɵdefineInjectable({ factory: function ModalService_Factory() { return new ModalService(i0.ɵɵinject(i1.Overlay), i0.ɵɵinject(i0.INJECTOR)); }, token: ModalService, providedIn: "root" });
     ModalService.decorators = [
         { type: i0.Injectable, args: [{
-                    providedIn: "root",
+                    providedIn: "root"
                 },] }
     ];
     ModalService.ctorParameters = function () { return [
@@ -126,13 +126,13 @@
         ModalModule.forRoot = function () {
             return {
                 ngModule: ModalModule,
-                providers: [ModalService],
+                providers: [ModalService]
             };
         };
         ModalModule.forChild = function () {
             return {
                 ngModule: ModalModule,
-                providers: [ModalService],
+                providers: [ModalService]
             };
         };
         return ModalModule;
@@ -140,11 +140,7 @@
     ModalModule.decorators = [
         { type: i0.NgModule, args: [{
                     declarations: [ModuleWrapperComponent],
-                    imports: [
-                        common.CommonModule,
-                        i1.OverlayModule,
-                        portal.PortalModule
-                    ],
+                    imports: [common.CommonModule, i1.OverlayModule, portal.PortalModule],
                     entryComponents: [ModuleWrapperComponent]
                 },] }
     ];

package/bundles/mis-crystal-design-system-modal.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"mis-crystal-design-system-modal.umd.js","sources":["../../../projects/mis-components/modal/modal-constants.ts","../../../projects/mis-components/modal/modal-ref.ts","../../../projects/mis-components/modal/module-wrapper/module-wrapper.component.ts","../../../projects/mis-components/modal/modal.service.ts","../../../projects/mis-components/modal/modal.module.ts","../../../projects/mis-components/modal/mis-crystal-design-system-modal.ts"],"sourcesContent":["/** @format */\n\nimport { InjectionToken } from \"@angular/core\";\n\nexport const MODAL_DATA_VAR = new InjectionToken<any>(\"MISModalDataInjectionToken\");\n","/** @format */\n\nimport { OverlayRef } from \"@angular/cdk/overlay\";\nimport { Injectable } from \"@angular/core\";\nimport { Subject } from \"rxjs\";\n\nexport class ModalRef {\n  private afterClosed$ = new Subject<unknown>();\n  afterClosed = this.afterClosed$.asObservable();\n\n  constructor(public overlay: OverlayRef) {}\n\n  close(data?: unknown): void {\n    this.overlay.detach();\n    this.overlay.dispose();\n    this.afterClosed$.next(data);\n    this.afterClosed$.complete();\n  }\n}\n","import { trigger, transition, style, animate } from \"@angular/animations\";\nimport { ComponentPortal, PortalInjector } from \"@angular/cdk/portal\";\nimport { Component, Injector, OnInit, ViewChild, ViewContainerRef } from \"@angular/core\";\nimport { ModalRef } from \"../modal-ref\";\n\n@Component({\n  selector: \"mis-module-wrapper\",\n  templateUrl: \"./module-wrapper.component.html\",\n  styleUrls: [\"./module-wrapper.component.scss\"],\n  animations: [\n    trigger(\"slideInOut\", [\n      transition(\":enter\", [\n        style({ transform: \"translateY(-30%)\", opacity: 0 }),\n        animate(\"200ms ease-out\", style({ transform: \"translatey(0%)\", opacity: 1 })),\n      ]),\n      transition(\":leave\", [animate(\"200ms ease-out\", style({ transform: \"translatey(-30%)\", opacity: 0 }))]),\n    ]),\n  ],\n})\nexport class ModuleWrapperComponent {\n  modalPortal: ComponentPortal<any>;\n  constructor() {}\n\n  @ViewChild(\"place\", { static: false, read: ViewContainerRef }) place: ViewContainerRef;\n\n  bindComponent(type: any, injector: PortalInjector) {\n    this.initComponent(type, injector);\n  }\n\n  private initComponent(type: any, injector: PortalInjector) {\n    this.modalPortal = new ComponentPortal(type, this.place, injector);\n  }\n}\n","import { ComponentType, Overlay, OverlayConfig } from \"@angular/cdk/overlay\";\nimport { ComponentPortal, PortalInjector } from \"@angular/cdk/portal\";\nimport { ComponentRef, Injectable, Injector } from \"@angular/core\";\nimport { MODAL_DATA_VAR } from \"./modal-constants\";\nimport { ModalRef } from \"./modal-ref\";\nimport { ModuleWrapperComponent } from \"./module-wrapper/module-wrapper.component\";\n\ninterface IModalOptions {\n  width?: string;\n  height?: string;\n  top?: string;\n  right?: string;\n  bottom?: string;\n  left?: string;\n  closeOnBackdropClick?: boolean;\n}\n@Injectable({\n  providedIn: \"root\",\n})\nexport class ModalService {\n  private componentInstance: ComponentRef<ModuleWrapperComponent>;\n\n  constructor(private overlay: Overlay, private injector: Injector) {}\n\n  show<T, D>(component: ComponentType<T>, data?: D, options?: IModalOptions): ModalRef {\n    const positionStrategy = this.calculatePosition(options);\n    const { width, height } = options || {};\n    const config = new OverlayConfig({\n      hasBackdrop: true,\n      positionStrategy,\n      scrollStrategy: this.overlay.scrollStrategies.noop(),\n      width: width,\n      height,\n      panelClass: \"mis-modal\",\n      backdropClass: \"mis-modal-overlay\",\n    });\n    const overlayRef = this.overlay.create(config);\n    const modalRef = new ModalRef(overlayRef);\n    const injector = this.createInjector(modalRef, this.injector, data);\n    const portal = new ComponentPortal(ModuleWrapperComponent, null);\n    this.componentInstance = overlayRef.attach(portal);\n    if (options?.closeOnBackdropClick) {\n      overlayRef.backdropClick().subscribe(() => modalRef.close());\n    }\n    this.componentInstance.instance.bindComponent(component, injector);\n    return modalRef;\n  }\n  private createInjector<D>(ref: ModalRef, inj: Injector, data?: D): PortalInjector {\n    const injectorTokens = new WeakMap();\n    injectorTokens.set(ModalRef, ref);\n    injectorTokens.set(MODAL_DATA_VAR, data);\n    return new PortalInjector(inj, injectorTokens);\n  }\n\n  private calculatePosition(options: IModalOptions) {\n    const position = this.overlay.position().global().centerHorizontally().centerVertically();\n    if (options && screen.width > 600) {\n      if (options.top) {\n        position.top(options.top);\n      }\n      if (options.left) {\n        position.left(options.left);\n      }\n      if (options.right) {\n        position.right(options.right);\n      }\n      if (options.bottom) {\n        position.bottom(options.bottom);\n      }\n    }\n    return position;\n  }\n}\n","import { ModuleWithProviders, NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { OverlayModule } from '@angular/cdk/overlay';\nimport { PortalModule } from '@angular/cdk/portal';\nimport { ModuleWrapperComponent } from './module-wrapper/module-wrapper.component';\nimport { ModalService } from './modal.service';\n\n\n\n@NgModule({\n  declarations: [ModuleWrapperComponent],\n  imports: [\n    CommonModule,\n    OverlayModule, \n    PortalModule\n  ],\n  entryComponents: [ModuleWrapperComponent]\n})\nexport class ModalModule { \n  static forRoot(): ModuleWithProviders<ModalModule> {\n    return {\n      ngModule: ModalModule,\n      providers: [ModalService],\n    };\n  }\n\n  static forChild(): ModuleWithProviders<ModalModule> {\n    return {\n      ngModule: ModalModule,\n      providers: [ModalService],\n    };\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n\nexport {ModuleWrapperComponent as ɵa} from './module-wrapper/module-wrapper.component';"],"names":["InjectionToken","Subject","ComponentPortal","Component","trigger","transition","style","animate","ViewChild","ViewContainerRef","OverlayConfig","portal","PortalInjector","Injectable","Overlay","Injector","NgModule","CommonModule","OverlayModule","PortalModule"],"mappings":"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"}
+{"version":3,"file":"mis-crystal-design-system-modal.umd.js","sources":["../../../projects/mis-components/modal/modal-constants.ts","../../../projects/mis-components/modal/modal-ref.ts","../../../projects/mis-components/modal/module-wrapper/module-wrapper.component.ts","../../../projects/mis-components/modal/modal.service.ts","../../../projects/mis-components/modal/modal.module.ts","../../../projects/mis-components/modal/mis-crystal-design-system-modal.ts"],"sourcesContent":["/** @format */\n\nimport { InjectionToken } from \"@angular/core\";\n\nexport const MODAL_DATA_VAR = new InjectionToken<any>(\"MISModalDataInjectionToken\");\n","/** @format */\n\nimport { OverlayRef } from \"@angular/cdk/overlay\";\nimport { Injectable } from \"@angular/core\";\nimport { Subject } from \"rxjs\";\n\nexport class ModalRef {\n  private afterClosed$ = new Subject<unknown>();\n  afterClosed = this.afterClosed$.asObservable();\n\n  constructor(public overlay: OverlayRef) {}\n\n  close(data?: unknown): void {\n    this.overlay.detach();\n    this.overlay.dispose();\n    this.afterClosed$.next(data);\n    this.afterClosed$.complete();\n  }\n}\n","import { trigger, transition, style, animate } from \"@angular/animations\";\nimport { ComponentPortal, PortalInjector } from \"@angular/cdk/portal\";\nimport { Component, Injector, OnInit, ViewChild, ViewContainerRef } from \"@angular/core\";\nimport { ModalRef } from \"../modal-ref\";\n\n@Component({\n  selector: \"mis-module-wrapper\",\n  templateUrl: \"./module-wrapper.component.html\",\n  styleUrls: [\"./module-wrapper.component.scss\"],\n  animations: [\n    trigger(\"slideInOut\", [\n      transition(\":enter\", [\n        style({ transform: \"translateY(-30%)\", opacity: 0 }),\n        animate(\"200ms ease-out\", style({ transform: \"translatey(0%)\", opacity: 1 }))\n      ]),\n      transition(\":leave\", [animate(\"200ms ease-out\", style({ transform: \"translatey(-30%)\", opacity: 0 }))])\n    ])\n  ]\n})\nexport class ModuleWrapperComponent {\n  modalPortal: ComponentPortal<any>;\n  constructor() {}\n\n  @ViewChild(\"place\", { static: false, read: ViewContainerRef }) place: ViewContainerRef;\n\n  bindComponent(type: any, injector: PortalInjector) {\n    this.initComponent(type, injector);\n  }\n\n  private initComponent(type: any, injector: PortalInjector) {\n    this.modalPortal = new ComponentPortal(type, this.place, injector);\n  }\n}\n","import { ComponentType, Overlay, OverlayConfig } from \"@angular/cdk/overlay\";\nimport { ComponentPortal, PortalInjector } from \"@angular/cdk/portal\";\nimport { ComponentRef, Injectable, Injector } from \"@angular/core\";\nimport { MODAL_DATA_VAR } from \"./modal-constants\";\nimport { ModalRef } from \"./modal-ref\";\nimport { ModuleWrapperComponent } from \"./module-wrapper/module-wrapper.component\";\n\ninterface IModalOptions {\n  width?: string;\n  height?: string;\n  top?: string;\n  right?: string;\n  bottom?: string;\n  left?: string;\n  closeOnBackdropClick?: boolean;\n}\n@Injectable({\n  providedIn: \"root\"\n})\nexport class ModalService {\n  private componentInstance: ComponentRef<ModuleWrapperComponent>;\n\n  constructor(private overlay: Overlay, private injector: Injector) {}\n\n  show<T, D>(component: ComponentType<T>, data?: D, options?: IModalOptions): ModalRef {\n    const positionStrategy = this.calculatePosition(options);\n    const { width, height } = options || {};\n    const config = new OverlayConfig({\n      hasBackdrop: true,\n      positionStrategy,\n      scrollStrategy: this.overlay.scrollStrategies.noop(),\n      width: width,\n      height,\n      panelClass: \"mis-modal\",\n      backdropClass: \"mis-modal-overlay\"\n    });\n    const overlayRef = this.overlay.create(config);\n    const modalRef = new ModalRef(overlayRef);\n    const injector = this.createInjector(modalRef, this.injector, data);\n    const portal = new ComponentPortal(ModuleWrapperComponent, null);\n    this.componentInstance = overlayRef.attach(portal);\n    if (options?.closeOnBackdropClick) {\n      overlayRef.backdropClick().subscribe(() => modalRef.close());\n    }\n    this.componentInstance.instance.bindComponent(component, injector);\n    return modalRef;\n  }\n  private createInjector<D>(ref: ModalRef, inj: Injector, data?: D): PortalInjector {\n    const injectorTokens = new WeakMap();\n    injectorTokens.set(ModalRef, ref);\n    injectorTokens.set(MODAL_DATA_VAR, data);\n    return new PortalInjector(inj, injectorTokens);\n  }\n\n  private calculatePosition(options: IModalOptions) {\n    const position = this.overlay.position().global().centerHorizontally().centerVertically();\n    if (options && screen.width > 600) {\n      if (options.top) {\n        position.top(options.top);\n      }\n      if (options.left) {\n        position.left(options.left);\n      }\n      if (options.right) {\n        position.right(options.right);\n      }\n      if (options.bottom) {\n        position.bottom(options.bottom);\n      }\n    }\n    return position;\n  }\n}\n","import { ModuleWithProviders, NgModule } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\nimport { OverlayModule } from \"@angular/cdk/overlay\";\nimport { PortalModule } from \"@angular/cdk/portal\";\nimport { ModuleWrapperComponent } from \"./module-wrapper/module-wrapper.component\";\nimport { ModalService } from \"./modal.service\";\n\n@NgModule({\n  declarations: [ModuleWrapperComponent],\n  imports: [CommonModule, OverlayModule, PortalModule],\n  entryComponents: [ModuleWrapperComponent]\n})\nexport class ModalModule {\n  static forRoot(): ModuleWithProviders<ModalModule> {\n    return {\n      ngModule: ModalModule,\n      providers: [ModalService]\n    };\n  }\n\n  static forChild(): ModuleWithProviders<ModalModule> {\n    return {\n      ngModule: ModalModule,\n      providers: [ModalService]\n    };\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n\nexport {ModuleWrapperComponent as ɵa} from './module-wrapper/module-wrapper.component';"],"names":["InjectionToken","Subject","ComponentPortal","Component","trigger","transition","style","animate","ViewChild","ViewContainerRef","OverlayConfig","portal","PortalInjector","Injectable","Overlay","Injector","NgModule","CommonModule","OverlayModule","PortalModule"],"mappings":"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"}

package/bundles/mis-crystal-design-system-modal.umd.min.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../projects/mis-components/modal/modal-constants.ts","../../../projects/mis-components/modal/modal-ref.ts","../../../projects/mis-components/modal/module-wrapper/module-wrapper.component.ts","../../../projects/mis-components/modal/modal.service.ts","../../../projects/mis-components/modal/modal.module.ts"],"names":["MODAL_DATA_VAR","InjectionToken","ModalRef","overlay","this","afterClosed$","Subject","afterClosed","asObservable","prototype","close","data","detach","dispose","next","complete","ModuleWrapperComponent","bindComponent","type","injector","initComponent","modalPortal","ComponentPortal","place","Component","args","selector","template","animations","trigger","transition","style","transform","opacity","animate","ViewChild","static","read","ViewContainerRef","ModalService","show","component","options","positionStrategy","calculatePosition","_a","width","height","config","OverlayConfig","hasBackdrop","scrollStrategy","scrollStrategies","noop","panelClass","backdropClass","overlayRef","create","modalRef","createInjector","portal","componentInstance","attach","closeOnBackdropClick","backdropClick","subscribe","instance","ref","inj","injectorTokens","WeakMap","set","PortalInjector","position","global","centerHorizontally","centerVertically","screen","top","left","right","bottom","Injectable","providedIn","Overlay","Injector","ModalModule","forRoot","ngModule","providers","forChild","NgModule","declarations","imports","CommonModule","OverlayModule","PortalModule","entryComponents"],"mappings":"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","sourcesContent":["/** @format */\n\nimport { InjectionToken } from \"@angular/core\";\n\nexport const MODAL_DATA_VAR = new InjectionToken<any>(\"MISModalDataInjectionToken\");\n","/** @format */\n\nimport { OverlayRef } from \"@angular/cdk/overlay\";\nimport { Injectable } from \"@angular/core\";\nimport { Subject } from \"rxjs\";\n\nexport class ModalRef {\n  private afterClosed$ = new Subject<unknown>();\n  afterClosed = this.afterClosed$.asObservable();\n\n  constructor(public overlay: OverlayRef) {}\n\n  close(data?: unknown): void {\n    this.overlay.detach();\n    this.overlay.dispose();\n    this.afterClosed$.next(data);\n    this.afterClosed$.complete();\n  }\n}\n","import { trigger, transition, style, animate } from \"@angular/animations\";\nimport { ComponentPortal, PortalInjector } from \"@angular/cdk/portal\";\nimport { Component, Injector, OnInit, ViewChild, ViewContainerRef } from \"@angular/core\";\nimport { ModalRef } from \"../modal-ref\";\n\n@Component({\n  selector: \"mis-module-wrapper\",\n  templateUrl: \"./module-wrapper.component.html\",\n  styleUrls: [\"./module-wrapper.component.scss\"],\n  animations: [\n    trigger(\"slideInOut\", [\n      transition(\":enter\", [\n        style({ transform: \"translateY(-30%)\", opacity: 0 }),\n        animate(\"200ms ease-out\", style({ transform: \"translatey(0%)\", opacity: 1 })),\n      ]),\n      transition(\":leave\", [animate(\"200ms ease-out\", style({ transform: \"translatey(-30%)\", opacity: 0 }))]),\n    ]),\n  ],\n})\nexport class ModuleWrapperComponent {\n  modalPortal: ComponentPortal<any>;\n  constructor() {}\n\n  @ViewChild(\"place\", { static: false, read: ViewContainerRef }) place: ViewContainerRef;\n\n  bindComponent(type: any, injector: PortalInjector) {\n    this.initComponent(type, injector);\n  }\n\n  private initComponent(type: any, injector: PortalInjector) {\n    this.modalPortal = new ComponentPortal(type, this.place, injector);\n  }\n}\n","import { ComponentType, Overlay, OverlayConfig } from \"@angular/cdk/overlay\";\nimport { ComponentPortal, PortalInjector } from \"@angular/cdk/portal\";\nimport { ComponentRef, Injectable, Injector } from \"@angular/core\";\nimport { MODAL_DATA_VAR } from \"./modal-constants\";\nimport { ModalRef } from \"./modal-ref\";\nimport { ModuleWrapperComponent } from \"./module-wrapper/module-wrapper.component\";\n\ninterface IModalOptions {\n  width?: string;\n  height?: string;\n  top?: string;\n  right?: string;\n  bottom?: string;\n  left?: string;\n  closeOnBackdropClick?: boolean;\n}\n@Injectable({\n  providedIn: \"root\",\n})\nexport class ModalService {\n  private componentInstance: ComponentRef<ModuleWrapperComponent>;\n\n  constructor(private overlay: Overlay, private injector: Injector) {}\n\n  show<T, D>(component: ComponentType<T>, data?: D, options?: IModalOptions): ModalRef {\n    const positionStrategy = this.calculatePosition(options);\n    const { width, height } = options || {};\n    const config = new OverlayConfig({\n      hasBackdrop: true,\n      positionStrategy,\n      scrollStrategy: this.overlay.scrollStrategies.noop(),\n      width: width,\n      height,\n      panelClass: \"mis-modal\",\n      backdropClass: \"mis-modal-overlay\",\n    });\n    const overlayRef = this.overlay.create(config);\n    const modalRef = new ModalRef(overlayRef);\n    const injector = this.createInjector(modalRef, this.injector, data);\n    const portal = new ComponentPortal(ModuleWrapperComponent, null);\n    this.componentInstance = overlayRef.attach(portal);\n    if (options?.closeOnBackdropClick) {\n      overlayRef.backdropClick().subscribe(() => modalRef.close());\n    }\n    this.componentInstance.instance.bindComponent(component, injector);\n    return modalRef;\n  }\n  private createInjector<D>(ref: ModalRef, inj: Injector, data?: D): PortalInjector {\n    const injectorTokens = new WeakMap();\n    injectorTokens.set(ModalRef, ref);\n    injectorTokens.set(MODAL_DATA_VAR, data);\n    return new PortalInjector(inj, injectorTokens);\n  }\n\n  private calculatePosition(options: IModalOptions) {\n    const position = this.overlay.position().global().centerHorizontally().centerVertically();\n    if (options && screen.width > 600) {\n      if (options.top) {\n        position.top(options.top);\n      }\n      if (options.left) {\n        position.left(options.left);\n      }\n      if (options.right) {\n        position.right(options.right);\n      }\n      if (options.bottom) {\n        position.bottom(options.bottom);\n      }\n    }\n    return position;\n  }\n}\n","import { ModuleWithProviders, NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { OverlayModule } from '@angular/cdk/overlay';\nimport { PortalModule } from '@angular/cdk/portal';\nimport { ModuleWrapperComponent } from './module-wrapper/module-wrapper.component';\nimport { ModalService } from './modal.service';\n\n\n\n@NgModule({\n  declarations: [ModuleWrapperComponent],\n  imports: [\n    CommonModule,\n    OverlayModule, \n    PortalModule\n  ],\n  entryComponents: [ModuleWrapperComponent]\n})\nexport class ModalModule { \n  static forRoot(): ModuleWithProviders<ModalModule> {\n    return {\n      ngModule: ModalModule,\n      providers: [ModalService],\n    };\n  }\n\n  static forChild(): ModuleWithProviders<ModalModule> {\n    return {\n      ngModule: ModalModule,\n      providers: [ModalService],\n    };\n  }\n}\n"]}
+{"version":3,"sources":["../../../projects/mis-components/modal/modal-constants.ts","../../../projects/mis-components/modal/modal-ref.ts","../../../projects/mis-components/modal/module-wrapper/module-wrapper.component.ts","../../../projects/mis-components/modal/modal.service.ts","../../../projects/mis-components/modal/modal.module.ts"],"names":["MODAL_DATA_VAR","InjectionToken","ModalRef","overlay","this","afterClosed$","Subject","afterClosed","asObservable","prototype","close","data","detach","dispose","next","complete","ModuleWrapperComponent","bindComponent","type","injector","initComponent","modalPortal","ComponentPortal","place","Component","args","selector","template","animations","trigger","transition","style","transform","opacity","animate","ViewChild","static","read","ViewContainerRef","ModalService","show","component","options","positionStrategy","calculatePosition","_a","width","height","config","OverlayConfig","hasBackdrop","scrollStrategy","scrollStrategies","noop","panelClass","backdropClass","overlayRef","create","modalRef","createInjector","portal","componentInstance","attach","closeOnBackdropClick","backdropClick","subscribe","instance","ref","inj","injectorTokens","WeakMap","set","PortalInjector","position","global","centerHorizontally","centerVertically","screen","top","left","right","bottom","Injectable","providedIn","Overlay","Injector","ModalModule","forRoot","ngModule","providers","forChild","NgModule","declarations","imports","CommonModule","OverlayModule","PortalModule","entryComponents"],"mappings":"4tBAIaA,EAAiB,IAAIC,EAAAA,eAAoB,2CCMpD,SAAAC,EAAmBC,GAAAC,KAAAD,QAAAA,EAHXC,KAAAC,aAAe,IAAIC,EAAAA,QAC3BF,KAAAG,YAAcH,KAAKC,aAAaG,sBAIhCN,EAAAO,UAAAC,MAAA,SAAMC,GACJP,KAAKD,QAAQS,SACbR,KAAKD,QAAQU,UACbT,KAAKC,aAAaS,KAAKH,GACvBP,KAAKC,aAAaU,8BCKpB,SAAAC,YAIAA,EAAAP,UAAAQ,cAAA,SAAcC,EAAWC,GACvBf,KAAKgB,cAAcF,EAAMC,IAGnBH,EAAAP,UAAAW,cAAA,SAAcF,EAAWC,GAC/Bf,KAAKiB,YAAc,IAAIC,EAAAA,gBAAgBJ,EAAMd,KAAKmB,MAAOJ,6BAzB5DK,EAAAA,UAASC,KAAA,CAAC,CACTC,SAAU,qBACVC,SAAA,2HAEAC,WAAY,CACVC,EAAAA,QAAQ,aAAc,CACpBC,EAAAA,WAAW,SAAU,CACnBC,EAAAA,MAAM,CAAEC,UAAW,mBAAoBC,QAAS,IAChDC,EAAAA,QAAQ,iBAAkBH,EAAAA,MAAM,CAAEC,UAAW,iBAAkBC,QAAS,OAE1EH,EAAAA,WAAW,SAAU,CAACI,EAAAA,QAAQ,iBAAkBH,EAAAA,MAAM,CAAEC,UAAW,mBAAoBC,QAAS,qRAQnGE,EAAAA,UAASV,KAAA,CAAC,QAAS,CAAEW,QAAQ,EAAOC,KAAMC,EAAAA,uCCD3C,SAAAC,EAAoBpC,EAA0BgB,GAA1Bf,KAAAD,QAAAA,EAA0BC,KAAAe,SAAAA,SAE9CoB,EAAA9B,UAAA+B,KAAA,SAAWC,EAA6B9B,EAAU+B,GAChD,IAAMC,EAAmBvC,KAAKwC,kBAAkBF,GAC1CG,EAAoBH,GAAW,GAA7BI,EAAKD,EAAAC,MAAEC,EAAMF,EAAAE,OACfC,EAAS,IAAIC,EAAAA,cAAc,CAC/BC,aAAa,EACbP,iBAAgBA,EAChBQ,eAAgB/C,KAAKD,QAAQiD,iBAAiBC,OAC9CP,MAAOA,EACPC,OAAMA,EACNO,WAAY,YACZC,cAAe,sBAEXC,EAAapD,KAAKD,QAAQsD,OAAOT,GACjCU,EAAW,IAAIxD,EAASsD,GACxBrC,EAAWf,KAAKuD,eAAeD,EAAUtD,KAAKe,SAAUR,GACxDiD,EAAS,IAAItC,EAAAA,gBAAgBN,EAAwB,MAM3D,OALAZ,KAAKyD,kBAAoBL,EAAWM,OAAOF,IACvClB,MAAAA,OAAO,EAAPA,EAASqB,uBACXP,EAAWQ,gBAAgBC,WAAU,WAAM,OAAAP,EAAShD,WAEtDN,KAAKyD,kBAAkBK,SAASjD,cAAcwB,EAAWtB,GAClDuC,GAEDnB,EAAA9B,UAAAkD,eAAA,SAAkBQ,EAAeC,EAAezD,GACtD,IAAM0D,EAAiB,IAAIC,QAG3B,OAFAD,EAAeE,IAAIrE,EAAUiE,GAC7BE,EAAeE,IAAIvE,EAAgBW,GAC5B,IAAI6D,EAAAA,eAAeJ,EAAKC,IAGzB9B,EAAA9B,UAAAmC,kBAAA,SAAkBF,GACxB,IAAM+B,EAAWrE,KAAKD,QAAQsE,WAAWC,SAASC,qBAAqBC,mBAevE,OAdIlC,GAAWmC,OAAO/B,MAAQ,MACxBJ,EAAQoC,KACVL,EAASK,IAAIpC,EAAQoC,KAEnBpC,EAAQqC,MACVN,EAASM,KAAKrC,EAAQqC,MAEpBrC,EAAQsC,OACVP,EAASO,MAAMtC,EAAQsC,OAErBtC,EAAQuC,QACVR,EAASQ,OAAOvC,EAAQuC,SAGrBR,qKAtDVS,EAAAA,WAAUzD,KAAA,CAAC,CACV0D,WAAY,oDAjBUC,EAAAA,eAEWC,EAAAA,6BCUnC,SAAAC,YACSA,EAAAC,QAAP,WACE,MAAO,CACLC,SAAUF,EACVG,UAAW,CAAClD,KAIT+C,EAAAI,SAAP,WACE,MAAO,CACLF,SAAUF,EACVG,UAAW,CAAClD,8BAhBjBoD,EAAAA,SAAQlE,KAAA,CAAC,CACRmE,aAAc,CAAC5E,GACf6E,QAAS,CAACC,EAAAA,aAAcC,EAAAA,cAAeC,EAAAA,cACvCC,gBAAiB,CAACjF","sourcesContent":["/** @format */\n\nimport { InjectionToken } from \"@angular/core\";\n\nexport const MODAL_DATA_VAR = new InjectionToken<any>(\"MISModalDataInjectionToken\");\n","/** @format */\n\nimport { OverlayRef } from \"@angular/cdk/overlay\";\nimport { Injectable } from \"@angular/core\";\nimport { Subject } from \"rxjs\";\n\nexport class ModalRef {\n  private afterClosed$ = new Subject<unknown>();\n  afterClosed = this.afterClosed$.asObservable();\n\n  constructor(public overlay: OverlayRef) {}\n\n  close(data?: unknown): void {\n    this.overlay.detach();\n    this.overlay.dispose();\n    this.afterClosed$.next(data);\n    this.afterClosed$.complete();\n  }\n}\n","import { trigger, transition, style, animate } from \"@angular/animations\";\nimport { ComponentPortal, PortalInjector } from \"@angular/cdk/portal\";\nimport { Component, Injector, OnInit, ViewChild, ViewContainerRef } from \"@angular/core\";\nimport { ModalRef } from \"../modal-ref\";\n\n@Component({\n  selector: \"mis-module-wrapper\",\n  templateUrl: \"./module-wrapper.component.html\",\n  styleUrls: [\"./module-wrapper.component.scss\"],\n  animations: [\n    trigger(\"slideInOut\", [\n      transition(\":enter\", [\n        style({ transform: \"translateY(-30%)\", opacity: 0 }),\n        animate(\"200ms ease-out\", style({ transform: \"translatey(0%)\", opacity: 1 }))\n      ]),\n      transition(\":leave\", [animate(\"200ms ease-out\", style({ transform: \"translatey(-30%)\", opacity: 0 }))])\n    ])\n  ]\n})\nexport class ModuleWrapperComponent {\n  modalPortal: ComponentPortal<any>;\n  constructor() {}\n\n  @ViewChild(\"place\", { static: false, read: ViewContainerRef }) place: ViewContainerRef;\n\n  bindComponent(type: any, injector: PortalInjector) {\n    this.initComponent(type, injector);\n  }\n\n  private initComponent(type: any, injector: PortalInjector) {\n    this.modalPortal = new ComponentPortal(type, this.place, injector);\n  }\n}\n","import { ComponentType, Overlay, OverlayConfig } from \"@angular/cdk/overlay\";\nimport { ComponentPortal, PortalInjector } from \"@angular/cdk/portal\";\nimport { ComponentRef, Injectable, Injector } from \"@angular/core\";\nimport { MODAL_DATA_VAR } from \"./modal-constants\";\nimport { ModalRef } from \"./modal-ref\";\nimport { ModuleWrapperComponent } from \"./module-wrapper/module-wrapper.component\";\n\ninterface IModalOptions {\n  width?: string;\n  height?: string;\n  top?: string;\n  right?: string;\n  bottom?: string;\n  left?: string;\n  closeOnBackdropClick?: boolean;\n}\n@Injectable({\n  providedIn: \"root\"\n})\nexport class ModalService {\n  private componentInstance: ComponentRef<ModuleWrapperComponent>;\n\n  constructor(private overlay: Overlay, private injector: Injector) {}\n\n  show<T, D>(component: ComponentType<T>, data?: D, options?: IModalOptions): ModalRef {\n    const positionStrategy = this.calculatePosition(options);\n    const { width, height } = options || {};\n    const config = new OverlayConfig({\n      hasBackdrop: true,\n      positionStrategy,\n      scrollStrategy: this.overlay.scrollStrategies.noop(),\n      width: width,\n      height,\n      panelClass: \"mis-modal\",\n      backdropClass: \"mis-modal-overlay\"\n    });\n    const overlayRef = this.overlay.create(config);\n    const modalRef = new ModalRef(overlayRef);\n    const injector = this.createInjector(modalRef, this.injector, data);\n    const portal = new ComponentPortal(ModuleWrapperComponent, null);\n    this.componentInstance = overlayRef.attach(portal);\n    if (options?.closeOnBackdropClick) {\n      overlayRef.backdropClick().subscribe(() => modalRef.close());\n    }\n    this.componentInstance.instance.bindComponent(component, injector);\n    return modalRef;\n  }\n  private createInjector<D>(ref: ModalRef, inj: Injector, data?: D): PortalInjector {\n    const injectorTokens = new WeakMap();\n    injectorTokens.set(ModalRef, ref);\n    injectorTokens.set(MODAL_DATA_VAR, data);\n    return new PortalInjector(inj, injectorTokens);\n  }\n\n  private calculatePosition(options: IModalOptions) {\n    const position = this.overlay.position().global().centerHorizontally().centerVertically();\n    if (options && screen.width > 600) {\n      if (options.top) {\n        position.top(options.top);\n      }\n      if (options.left) {\n        position.left(options.left);\n      }\n      if (options.right) {\n        position.right(options.right);\n      }\n      if (options.bottom) {\n        position.bottom(options.bottom);\n      }\n    }\n    return position;\n  }\n}\n","import { ModuleWithProviders, NgModule } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\nimport { OverlayModule } from \"@angular/cdk/overlay\";\nimport { PortalModule } from \"@angular/cdk/portal\";\nimport { ModuleWrapperComponent } from \"./module-wrapper/module-wrapper.component\";\nimport { ModalService } from \"./modal.service\";\n\n@NgModule({\n  declarations: [ModuleWrapperComponent],\n  imports: [CommonModule, OverlayModule, PortalModule],\n  entryComponents: [ModuleWrapperComponent]\n})\nexport class ModalModule {\n  static forRoot(): ModuleWithProviders<ModalModule> {\n    return {\n      ngModule: ModalModule,\n      providers: [ModalService]\n    };\n  }\n\n  static forChild(): ModuleWithProviders<ModalModule> {\n    return {\n      ngModule: ModalModule,\n      providers: [ModalService]\n    };\n  }\n}\n"]}

package/bundles/mis-crystal-design-system-multi-select-dropdown.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('mis-crystal-design-system/checkbox'), require('mis-crystal-design-system/button')) :
-    typeof define === 'function' && define.amd ? define('mis-crystal-design-system/multi-select-dropdown', ['exports', '@angular/core', '@angular/common', '@angular/forms', 'mis-crystal-design-system/checkbox', 'mis-crystal-design-system/button'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['mis-crystal-design-system'] = global['mis-crystal-design-system'] || {}, global['mis-crystal-design-system']['multi-select-dropdown'] = {}), global.ng.core, global.ng.common, global.ng.forms, global['mis-crystal-design-system'].checkbox, global['mis-crystal-design-system'].button));
-}(this, (function (exports, core, common, forms, checkbox, button) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/cdk/portal'), require('@angular/cdk/overlay'), require('@angular/common'), require('@angular/forms'), require('mis-crystal-design-system/checkbox'), require('mis-crystal-design-system/button')) :
+    typeof define === 'function' && define.amd ? define('mis-crystal-design-system/multi-select-dropdown', ['exports', '@angular/core', '@angular/cdk/portal', '@angular/cdk/overlay', '@angular/common', '@angular/forms', 'mis-crystal-design-system/checkbox', 'mis-crystal-design-system/button'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['mis-crystal-design-system'] = global['mis-crystal-design-system'] || {}, global['mis-crystal-design-system']['multi-select-dropdown'] = {}), global.ng.core, global.ng.cdk.portal, global.ng.cdk.overlay, global.ng.common, global.ng.forms, global['mis-crystal-design-system'].checkbox, global['mis-crystal-design-system'].button));
+}(this, (function (exports, core, portal, overlay, common, forms, checkbox, button) { 'use strict';
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -323,8 +323,10 @@
     }
 
     var MultiSelectDropdownComponent = /** @class */ (function () {
-        function MultiSelectDropdownComponent(eRef) {
+        function MultiSelectDropdownComponent(eRef, overlay, viewContainerRef) {
             this.eRef = eRef;
+            this.overlay = overlay;
+            this.viewContainerRef = viewContainerRef;
             this.searchInput = "";
             this.isOpen = false;
             this.localSelectedItems = [];
@@ -343,7 +345,7 @@
             this.showSelectedCount = false;
             this.noDataMessage = "No Data";
             this.options = {
-                sortLabels: true,
+                sortLabels: true
             };
             this.hideApplyButton = false;
             this.onChange = new core.EventEmitter();
@@ -364,19 +366,18 @@
             enumerable: false,
             configurable: true
         });
+        MultiSelectDropdownComponent.prototype.ngOnInit = function () { };
         MultiSelectDropdownComponent.prototype.clickout = function (event) {
             var isClickedOutside = !this.eRef.nativeElement.contains(event.target);
             if (isClickedOutside) {
                 this.onCancel();
             }
         };
-        MultiSelectDropdownComponent.prototype.ngOnInit = function () { };
         MultiSelectDropdownComponent.prototype.handlerSetLocalSelectedItems = function (values) {
             var _this = this;
             this.localSelectedItems = values;
             this.localData = this.localData.map(function (item) {
-                if (item.value === _this.SELECT_ALL_ENUM &&
-                    _this.localData.every(function (a) { return a.checked; })) {
+                if (item.value === _this.SELECT_ALL_ENUM && _this.localData.every(function (a) { return a.checked; })) {
                     return Object.assign(Object.assign({}, item), { checked: true });
                 }
                 if (values.some(function (base) { return base.value === item.value; })) {
@@ -402,6 +403,42 @@
                 this.handlerSetLocalSelectedItems(this.localSelectedItems);
                 this.localData = this.formatValues(this.localData);
             }
+            if (this.isOpen)
+                this.openDropdown(this.popupContainer, this.selectElement.nativeElement);
+            else
+                this.onCancel();
+        };
+        MultiSelectDropdownComponent.prototype.openDropdown = function (template, origin) {
+            var _this = this;
+            var positionsBottom = [
+                new overlay.ConnectionPositionPair({ originX: "start", originY: "bottom" }, { overlayX: "start", overlayY: "top" }, 0, 4),
+                new overlay.ConnectionPositionPair({ originX: "end", originY: "bottom" }, { overlayX: "end", overlayY: "top" }, 0, 4)
+            ];
+            var positionsTop = [
+                new overlay.ConnectionPositionPair({ originX: "start", originY: "top" }, { overlayX: "start", overlayY: "bottom" }, 0, -4),
+                new overlay.ConnectionPositionPair({ originX: "end", originY: "top" }, { overlayX: "end", overlayY: "bottom" }, 0, -4)
+            ];
+            var positionStrategy = this.overlay
+                .position()
+                .flexibleConnectedTo(origin)
+                .withPositions(__spread((this.dropdownListPosition === "Right" ? positionsBottom.reverse() : positionsBottom), (this.dropdownListPosition === "Right" ? positionsTop.reverse() : positionsTop)))
+                .withPush(true);
+            var configs = new overlay.OverlayConfig({
+                hasBackdrop: true,
+                backdropClass: "cdk-overlay-transparent-backdrop",
+                scrollStrategy: this.overlay.scrollStrategies.reposition(),
+                positionStrategy: 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 portal.TemplatePortal(template, this.viewContainerRef));
+            this.overlayRef.backdropClick().subscribe(function (res) {
+                _this.onCancel();
+            });
         };
         MultiSelectDropdownComponent.prototype.filterByValue = function (array, string) {
             return array.filter(function (o) { return o.label.toLowerCase().includes(string.toLowerCase()); });
@@ -422,19 +459,17 @@
             if (this.options.sortLabels) {
                 var checkedValues = array
                     .filter(function (a) { return a.checked; })
-                    .sort(function (a, b) { return a.label > b.label ? 1 : b.label > a.label ? -1 : 0; });
+                    .sort(function (a, b) { return (a.label > b.label ? 1 : b.label > a.label ? -1 : 0); });
                 var unCheckedValues = array
                     .filter(function (a) { return !a.checked; })
-                    .sort(function (a, b) { return a.label > b.label ? 1 : b.label > a.label ? -1 : 0; });
+                    .sort(function (a, b) { return (a.label > b.label ? 1 : b.label > a.label ? -1 : 0); });
                 sortedArray = __spread(checkedValues, unCheckedValues).filter(function (t) { return t.value !== _this.SELECT_ALL_ENUM; });
             }
-            if (!sortedArray.some(function (option) { return option.value === _this.SELECT_ALL_ENUM; }) &&
-                this.enableSelectAll &&
-                sortedArray.length > 0) {
+            if (!sortedArray.some(function (option) { return option.value === _this.SELECT_ALL_ENUM; }) && this.enableSelectAll && sortedArray.length > 0) {
                 sortedArray.unshift({
                     label: "Select all",
                     value: this.SELECT_ALL_ENUM,
-                    checked: sortedArray.every(function (y) { return y.checked; }),
+                    checked: sortedArray.every(function (y) { return y.checked; })
                 });
             }
             return sortedArray;
@@ -464,10 +499,7 @@
                     }
                     return a;
                 }));
-                if (this.enableSelectAll &&
-                    this.localData
-                        .filter(function (r) { return r.value !== _this.SELECT_ALL_ENUM; })
-                        .every(function (t) { return t.checked; })) {
+                if (this.enableSelectAll && this.localData.filter(function (r) { return r.value !== _this.SELECT_ALL_ENUM; }).every(function (t) { return t.checked; })) {
                     this.localData = __spread(this.localData.map(function (a) {
                         if (a.value === _this.SELECT_ALL_ENUM) {
                             return Object.assign(Object.assign({}, a), { checked: true });
@@ -505,6 +537,7 @@
         };
         MultiSelectDropdownComponent.prototype.onCancel = function () {
             var _this = this;
+            var _a;
             this.isSearchInputFocused = false;
             this.localData = this.localData.map(function (a) {
                 if (_this.localSelectedItems.some(function (b) { return b.value === a.value && String(b.checked) !== String(a.checked); })) {
@@ -516,18 +549,22 @@
             });
             this.isOpen = false;
             this.searchInput = "";
+            (_a = this.overlayRef) === null || _a === void 0 ? void 0 : _a.detach();
+            this.searchInput = "";
         };
         return MultiSelectDropdownComponent;
     }());
     MultiSelectDropdownComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "mis-multi-select-dropdown",
-                    template: "<div class=\"container\" [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\">{{ label }}</p>\n            <p *ngIf=\"showSelectedCount && localSelectedItems?.length > 0\" class=\"count\">\n                {{ localSelectedItems?.length }}\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\" (click)=\"toggleSelectedItems($event, item)\" *ngFor=\"let item of searchInput ? searchData : localData\">\n                    <div class=\"checkbox-container-wrapper\">\n                        <div class=\"checkbox-container\">\n                            <mis-checkbox\n                                [checked]=\"item.checked\"\n                            ></mis-checkbox>\n                        </div>\n                        <p class=\"label\">\n                            {{ item.label }}\n                        </p>\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 : localData).length === 0\">\n                    {{ searchInput === '' ? noDataMessage : 'No results' }}\n                </div>\n            </div>\n            <div *ngIf=\"localData.length !== 0 && !hideApplyButton\" class=\"actions-container\">\n                <div style=\"width: calc(50% - 4px)\">\n                    <mis-button\n                            [name]=\"'Reset'\"\n                            [type]=\"'Text'\"\n                            [width]=\"'100%'\"\n                            (click)=\"onReset()\"\n                    ></mis-button>\n                </div>\n                <div style=\"width: calc(50% - 4px)\">\n                    <mis-button\n                            [name]=\"'Apply'\"\n                            [type]=\"'Solid'\"\n                            [width]=\"'100%'\"\n                            (click)=\"applyFilters()\"\n                    ></mis-button>\n                </div>\n            </div>\n        </div>\n    </div>\n\n</div>\n",
-                    styles: [".container{position:relative;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;height:32px;width:256px;font-family:Lato,sans-serif!important}.container .dropdown{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%;padding:0 12px;overflow:hidden}.container .dropdown:hover{background-color:#f5f7fc}.container .dropdown .label{display:flex;justify-content:flex-start;align-items:center;width:calc(100% - 32px)}.container .dropdown .label,.container .dropdown .label .text{font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.container .dropdown .label .text{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.container .dropdown .label .count{background-color:#e0e0e0;border-radius:50%;padding:2px 7px;margin:0 0 0 8px;font-style:normal;font-weight:400;font-size:14px;line-height:20px;text-align:center;letter-spacing:.2px;color:#181f33}.container .dropdown .handle{width:24px;height:24px;transition:.3s;position:absolute;right:12px;border-radius:50%;overflow:hidden}.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}.container .popup-container::-webkit-scrollbar{width:0;height:0}.container .popup-container .search-container{position:relative;box-sizing:border-box;padding:8px}.container .popup-container .search-container .search-icon{position:absolute;width:24px;height:24px;top:50%;transform:translateY(-50%);left:18px;z-index:1}.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}.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}.container .popup-container .items{padding:8px 0 8px 8px;overflow-y:scroll;height:100%}.container .popup-container .items::-webkit-scrollbar{width:5px;height:0}.container .popup-container .items::-webkit-scrollbar-thumb{background:#9aa7b4;border-radius:10px}.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}.container .popup-container .items .item{cursor:pointer;display:flex;justify-content:flex-start;align-items:center;padding:8px 12px;border-radius:6px;height:auto}.container .popup-container .items .item:hover{background-color:#f5f7fc}.container .popup-container .items .item .checkbox-container-wrapper{display:flex;justify-content:flex-start;align-items:center;width:90%}.container .popup-container .items .item .checkbox-container-wrapper .checkbox-container{display:block;position:relative;cursor:pointer;font-size:22px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.container .popup-container .items .item .checkbox-container-wrapper .checkbox-container input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.container .popup-container .items .item .checkbox-container-wrapper .checkbox-container input:checked~.checkmark:after{display:block}.container .popup-container .items .item .checkbox-container-wrapper .checkbox-container .checkmark{position:absolute;top:-8px;left:0;height:15px;width:15px;border-radius:4px;background-color:#0079f1;border:1px solid #6a737d}.container .popup-container .items .item .checkbox-container-wrapper .checkbox-container .checkmark:after{content:\"\";position:absolute;display:none;left:5px;top:2px;width:3px;height:6px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.container .popup-container .items .item .checkbox-container-wrapper .label{margin:0 0 0 8px;line-height:20px;font-size:14px;font-style:normal;font-weight:400;letter-spacing:.200000003px}.container .popup-container .items .item .icon-container{width:10%;display:flex;justify-content:flex-end}.container .popup-container .items .item .icon-container .icon{width:20px;height:20px}.container .popup-container .actions-container{display:flex;justify-content:space-between;bottom:0;align-items:center;position:-webkit-sticky;position:sticky;padding:16px;background-color:#fff;border-top:1px solid #e0e0e0}.container .popup-container .actions-container .cancel{cursor:pointer;padding:10px 32px;text-align:center;font-size:16px;line-height:24px;border-radius:8px}.container .popup-container .actions-container .cancel:hover{background:rgba(9,55,178,.04)}.container .popup-container .actions-container .apply{cursor:pointer;padding:10px 32px;text-align:center;color:#fff;font-size:16px;line-height:24px;background:#0937b2;border-radius:8px}.position-left{right:0}.position-right{left:0}"]
+                    template: "<div\n  class=\"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\">{{ label }}</p>\n      <p *ngIf=\"showSelectedCount && localSelectedItems?.length > 0\" class=\"count\">\n        {{ localSelectedItems?.length }}\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    [ngClass]=\"{\n      'position-left': dropdownListPosition === 'Left',\n      'position-right': dropdownListPosition === 'Right'\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        (keyup.enter)=\"toggleSelectedItems($event, item)\"\n        (click)=\"toggleSelectedItems($event, item)\"\n        *ngFor=\"let item of searchInput ? searchData : localData\"\n      >\n        <div class=\"checkbox-container-wrapper\">\n          <div class=\"checkbox-container\">\n            <mis-checkbox [checked]=\"item.checked\" tabindex=\"-1\"></mis-checkbox>\n          </div>\n          <p class=\"label\">\n            {{ item.label }}\n          </p>\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 : localData).length === 0\">\n        {{ searchInput === \"\" ? noDataMessage : \"No results\" }}\n      </div>\n    </div>\n    <div *ngIf=\"localData.length !== 0 && !hideApplyButton\" class=\"actions-container\">\n      <div style=\"width: calc(50% - 4px)\">\n        <mis-button [name]=\"'Reset'\" [type]=\"'Text'\" [width]=\"'100%'\" (click)=\"onReset()\"></mis-button>\n      </div>\n      <div style=\"width: calc(50% - 4px)\">\n        <mis-button [name]=\"'Apply'\" [type]=\"'Solid'\" [width]=\"'100%'\" (click)=\"applyFilters()\"></mis-button>\n      </div>\n    </div>\n  </div>\n</ng-template>\n",
+                    styles: [".container{position:relative;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;height:32px;width:256px;font-family:Lato,sans-serif!important}.container .dropdown{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%;padding:0 12px;overflow:hidden}.container .dropdown:focus-visible,.container .dropdown:hover{background-color:#f5f7fc;outline:none}.container .dropdown .label{display:flex;justify-content:flex-start;align-items:center;width:calc(100% - 32px)}.container .dropdown .label,.container .dropdown .label .text{font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.container .dropdown .label .text{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.container .dropdown .label .count{background-color:#e0e0e0;border-radius:50%;padding:2px 7px;margin:0 0 0 8px;font-style:normal;font-weight:400;font-size:14px;line-height:20px;text-align:center;letter-spacing:.2px;color:#181f33}.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{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 .item{cursor:pointer;display:flex;justify-content:flex-start;align-items:center;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 .checkbox-container-wrapper{display:flex;justify-content:flex-start;align-items:center;width:90%}.popup-container .items .item .checkbox-container-wrapper .checkbox-container{display:block;position:relative;cursor:pointer;font-size:22px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.popup-container .items .item .checkbox-container-wrapper .checkbox-container input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.popup-container .items .item .checkbox-container-wrapper .checkbox-container input:checked~.checkmark:after{display:block}.popup-container .items .item .checkbox-container-wrapper .checkbox-container .checkmark{position:absolute;top:-8px;left:0;height:15px;width:15px;border-radius:4px;background-color:#0079f1;border:1px solid #6a737d}.popup-container .items .item .checkbox-container-wrapper .checkbox-container .checkmark:after{content:\"\";position:absolute;display:none;left:5px;top:2px;width:3px;height:6px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.popup-container .items .item .checkbox-container-wrapper .label{margin:0 0 0 8px;line-height:20px;font-size:14px;font-style:normal;font-weight:400;letter-spacing:.2;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 .actions-container{display:flex;justify-content:space-between;bottom:0;align-items:center;position:-webkit-sticky;position:sticky;padding:16px;background-color:#fff;border-top:1px solid #e0e0e0}.popup-container .actions-container .cancel{cursor:pointer;padding:10px 32px;text-align:center;font-size:16px;line-height:24px;border-radius:8px}.popup-container .actions-container .cancel:hover{background:rgba(9,55,178,.04)}.popup-container .actions-container .apply{cursor:pointer;padding:10px 32px;text-align:center;color:#fff;font-size:16px;line-height:24px;background:#0937b2;border-radius:8px}"]
                 },] }
     ];
     MultiSelectDropdownComponent.ctorParameters = function () { return [
-        { type: core.ElementRef }
+        { type: core.ElementRef },
+        { type: overlay.Overlay },
+        { type: core.ViewContainerRef }
     ]; };
     MultiSelectDropdownComponent.propDecorators = {
         data: [{ type: core.Input }],
@@ -545,6 +582,8 @@
         selectedItems: [{ type: core.Input }],
         hideApplyButton: [{ type: core.Input }],
         onChange: [{ type: core.Output }],
+        selectElement: [{ type: core.ViewChild, args: ["select", { static: false },] }],
+        popupContainer: [{ type: core.ViewChild, args: ["popupContainer", { static: false },] }],
         clickout: [{ type: core.HostListener, args: ["document:click", ["$event"],] }]
     };