mis-crystal-design-system 2.0.2 → 2.2.1

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

@@ -0,0 +1,172 @@
+(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/animations'), require('rxjs'), require('@angular/common')) :
+    typeof define === 'function' && define.amd ? define('mis-crystal-design-system/drawer', ['exports', '@angular/cdk/overlay', '@angular/cdk/portal', '@angular/core', 'rxjs/operators', '@angular/animations', 'rxjs', '@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'].drawer = {}), global.ng.cdk.overlay, global.ng.cdk.portal, global.ng.core, global.rxjs.operators, global.ng.animations, global.rxjs, global.ng.common));
+}(this, (function (exports, i1, portal, i0, operators, animations, rxjs, common) { 'use strict';
+
+    /** @format */
+    var DrawerRef = /** @class */ (function () {
+        function DrawerRef(overlay) {
+            this.overlay = overlay;
+            this._isExpanded = false;
+            this.afterClosed$ = new rxjs.Subject();
+            this.afterClosed = this.afterClosed$.asObservable();
+        }
+        Object.defineProperty(DrawerRef.prototype, "isExpanded", {
+            get: function () {
+                return this._isExpanded;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DrawerRef.prototype.close = function (data) {
+            this.overlay.detach();
+            this.overlay.dispose();
+            this.afterClosed$.next(data);
+            this.afterClosed$.complete();
+        };
+        DrawerRef.prototype.expand = function () {
+            this.overlay.updateSize({ width: "100%" });
+            this._isExpanded = true;
+        };
+        DrawerRef.prototype.collapse = function () {
+            this.overlay.updateSize({ width: "422px" });
+            this._isExpanded = false;
+        };
+        return DrawerRef;
+    }());
+
+    /** @format */
+    var DrawerBodyComponent = /** @class */ (function () {
+        function DrawerBodyComponent(cfr) {
+            this.cfr = cfr;
+        }
+        DrawerBodyComponent.prototype.bindComponent = function (type, injector) {
+            this.initComponent(type, injector);
+        };
+        DrawerBodyComponent.prototype.initComponent = function (type, injector) {
+            this.drawerPortal = new portal.ComponentPortal(type, this.place, injector);
+        };
+        DrawerBodyComponent.prototype.createInjector = function (ref, inj) {
+            var injectorTokens = new WeakMap([[DrawerRef, ref]]);
+            return new portal.PortalInjector(inj, injectorTokens);
+            // return Injector.create({ providers: [{ provide: inj, useValue: injectorTokens }] });
+        };
+        return DrawerBodyComponent;
+    }());
+    DrawerBodyComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: "mis-drawer-body",
+                    template: "<!-- @format -->\n\n<div class=\"mis-drawer-body\" #place @slideInOut>\n  <ng-template [cdkPortalOutlet]=\"drawerPortal\"></ng-template>\n</div>\n",
+                    animations: [
+                        animations.trigger("slideInOut", [
+                            animations.transition(":enter", [
+                                animations.style({ transform: "translateX(100%)" }),
+                                animations.animate("200ms ease-out", animations.style({ transform: "translateX(0%)" })),
+                            ]),
+                            animations.transition(":leave", [animations.animate("200ms ease-out", animations.style({ transform: "translateX(100%)" }))]),
+                        ]),
+                    ],
+                    styles: [".mis-drawer-body{display:block;width:100%;height:100%}"]
+                },] }
+    ];
+    DrawerBodyComponent.ctorParameters = function () { return [
+        { type: i0.ComponentFactoryResolver }
+    ]; };
+    DrawerBodyComponent.propDecorators = {
+        place: [{ type: i0.ViewChild, args: ["place", { static: false, read: i0.ViewContainerRef },] }]
+    };
+
+    /** @format */
+    var DRAWER_DATA_VAR = new i0.InjectionToken("MISDrawerDataInjectionToken");
+
+    /** @format */
+    var DrawerService = /** @class */ (function () {
+        function DrawerService(overlay, injector) {
+            this.overlay = overlay;
+            this.injector = injector;
+        }
+        DrawerService.prototype.show = function (component, data, options) {
+            var positionStrategy = this.overlay.position().global().top("0px").right("0px");
+            var _b = options || {}, _c = _b.width, width = _c === void 0 ? '422px' : _c, _d = _b.height, height = _d === void 0 ? '100%' : _d;
+            var config = new i1.OverlayConfig({
+                hasBackdrop: true,
+                positionStrategy: positionStrategy,
+                scrollStrategy: this.overlay.scrollStrategies.noop(),
+                width: width,
+                height: height,
+                panelClass: "mis-drawer",
+                backdropClass: "mis-drawer-overlay",
+            });
+            var overlayRef = this.overlay.create(config);
+            this.drawerRef = new DrawerRef(overlayRef);
+            var injector = this.createInjector(this.drawerRef, this.injector, data);
+            var portal$1 = new portal.ComponentPortal(DrawerBodyComponent, null);
+            this.componentInstance = overlayRef.attach(portal$1);
+            this.componentInstance.instance.bindComponent(component, injector);
+            overlayRef.backdropClick().pipe(operators.take(1)).subscribe(this.hide.bind(this));
+            return this.drawerRef;
+        };
+        DrawerService.prototype.hide = function () {
+            var _a;
+            (_a = this.drawerRef) === null || _a === void 0 ? void 0 : _a.close();
+        };
+        DrawerService.prototype.createInjector = function (ref, inj, data) {
+            var injectorTokens = new WeakMap();
+            injectorTokens.set(DrawerRef, ref);
+            injectorTokens.set(DRAWER_DATA_VAR, data);
+            return new portal.PortalInjector(inj, injectorTokens);
+            // return Injector.create({ providers: [{ provide: inj, useValue: injectorTokens }] });
+        };
+        return DrawerService;
+    }());
+    DrawerService.ɵprov = i0.ɵɵdefineInjectable({ factory: function DrawerService_Factory() { return new DrawerService(i0.ɵɵinject(i1.Overlay), i0.ɵɵinject(i0.INJECTOR)); }, token: DrawerService, providedIn: "root" });
+    DrawerService.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: "root",
+                },] }
+    ];
+    DrawerService.ctorParameters = function () { return [
+        { type: i1.Overlay },
+        { type: i0.Injector }
+    ]; };
+
+    var DrawerModule = /** @class */ (function () {
+        function DrawerModule() {
+        }
+        DrawerModule.forRoot = function () {
+            return {
+                ngModule: DrawerModule,
+                providers: [DrawerService],
+            };
+        };
+        DrawerModule.forChild = function () {
+            return {
+                ngModule: DrawerModule,
+                providers: [DrawerService],
+            };
+        };
+        return DrawerModule;
+    }());
+    DrawerModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    declarations: [DrawerBodyComponent],
+                    imports: [common.CommonModule, i1.OverlayModule, portal.PortalModule],
+                    entryComponents: [DrawerBodyComponent],
+                },] }
+    ];
+
+    /**
+     * Generated bundle index. Do not edit.
+     */
+
+    exports.DRAWER_DATA_VAR = DRAWER_DATA_VAR;
+    exports.DrawerModule = DrawerModule;
+    exports.DrawerRef = DrawerRef;
+    exports.DrawerService = DrawerService;
+    exports.ɵa = DrawerBodyComponent;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+})));
+//# sourceMappingURL=mis-crystal-design-system-drawer.umd.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mis-crystal-design-system-drawer.umd.js","sources":["../../../projects/mis-components/drawer/drawer-ref.ts","../../../projects/mis-components/drawer/drawer-body/drawer-body.component.ts","../../../projects/mis-components/drawer/drawer-constants.ts","../../../projects/mis-components/drawer/drawer.service.ts","../../../projects/mis-components/drawer/drawer.module.ts","../../../projects/mis-components/drawer/mis-crystal-design-system-drawer.ts"],"sourcesContent":["/** @format */\n\nimport { OverlayRef } from \"@angular/cdk/overlay\";\nimport { Injectable } from \"@angular/core\";\nimport { Subject } from \"rxjs\";\n\nexport class DrawerRef {\n  private _isExpanded = false;\n  private afterClosed$ = new Subject<any>();\n  afterClosed = this.afterClosed$.asObservable();\n  get isExpanded(): boolean {\n    return this._isExpanded;\n  }\n  constructor(public overlay: OverlayRef) {}\n\n  close(data?: any): void {\n    this.overlay.detach();\n    this.overlay.dispose();\n    this.afterClosed$.next(data);\n    this.afterClosed$.complete();\n  }\n\n  expand(): void {\n    this.overlay.updateSize({ width: \"100%\" });\n    this._isExpanded = true;\n  }\n\n  collapse(): void {\n    this.overlay.updateSize({ width: \"422px\" });\n    this._isExpanded = false;\n  }\n}\n","/** @format */\n\nimport { trigger, transition, style, animate } from \"@angular/animations\";\nimport { ComponentPortal, PortalInjector } from \"@angular/cdk/portal\";\nimport { Component, ComponentFactoryResolver, Injector, OnInit, ViewChild, ViewContainerRef } from \"@angular/core\";\nimport { DrawerRef } from \"../drawer-ref\";\n\n@Component({\n  selector: \"mis-drawer-body\",\n  templateUrl: \"./drawer-body.component.html\",\n  styleUrls: [\"./drawer-body.component.scss\"],\n  animations: [\n    trigger(\"slideInOut\", [\n      transition(\":enter\", [\n        style({ transform: \"translateX(100%)\" }),\n        animate(\"200ms ease-out\", style({ transform: \"translateX(0%)\" })),\n      ]),\n      transition(\":leave\", [animate(\"200ms ease-out\", style({ transform: \"translateX(100%)\" }))]),\n    ]),\n  ],\n})\nexport class DrawerBodyComponent {\n  drawerPortal: ComponentPortal<any>;\n  constructor(private cfr: ComponentFactoryResolver) {}\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.drawerPortal = new ComponentPortal(type, this.place, injector);\n  }\n\n  private createInjector(ref: DrawerRef, inj: Injector): PortalInjector {\n    const injectorTokens = new WeakMap([[DrawerRef, ref]]);\n    return new PortalInjector(inj, injectorTokens);\n    // return Injector.create({ providers: [{ provide: inj, useValue: injectorTokens }] });\n  }\n}\n","/** @format */\n\nimport { InjectionToken } from \"@angular/core\";\n\nexport const DRAWER_DATA_VAR = new InjectionToken<any>(\"MISDrawerDataInjectionToken\");\n","/** @format */\n\nimport { Overlay, OverlayConfig, OverlayRef } from \"@angular/cdk/overlay\";\nimport { ComponentPortal, ComponentType, PortalInjector } from \"@angular/cdk/portal\";\nimport { ComponentRef, Injectable, Injector } from \"@angular/core\";\nimport { take } from \"rxjs/operators\";\nimport { DrawerBodyComponent } from \"./drawer-body/drawer-body.component\";\nimport { DrawerRef } from \"./drawer-ref\";\nimport { DRAWER_DATA_VAR } from \"./drawer-constants\";\n\n@Injectable({\n  providedIn: \"root\",\n})\nexport class DrawerService {\n  drawerRef: DrawerRef;\n  componentInstance: ComponentRef<any>;\n\n  constructor(private overlay: Overlay, private injector: Injector) { }\n\n  show<T, D>(component: ComponentType<T>, data?: D, options?: { width?: string, height?: string }): DrawerRef {\n    const positionStrategy = this.overlay.position().global().top(\"0px\").right(\"0px\");\n    const { width = '422px', height = '100%' } = 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-drawer\",\n      backdropClass: \"mis-drawer-overlay\",\n    });\n    const overlayRef = this.overlay.create(config);\n    this.drawerRef = new DrawerRef(overlayRef);\n    const injector = this.createInjector(this.drawerRef, this.injector, data);\n    const portal = new ComponentPortal(DrawerBodyComponent, null);\n    this.componentInstance = overlayRef.attach(portal);\n    this.componentInstance.instance.bindComponent(component, injector);\n    overlayRef.backdropClick().pipe(take(1)).subscribe(this.hide.bind(this));\n    return this.drawerRef;\n  }\n\n  hide(): void {\n    this.drawerRef?.close();\n  }\n\n  private createInjector<D>(ref: DrawerRef, inj: Injector, data?: D): PortalInjector {\n    const injectorTokens = new WeakMap();\n    injectorTokens.set(DrawerRef, ref);\n    injectorTokens.set(DRAWER_DATA_VAR, data);\n    return new PortalInjector(inj, injectorTokens);\n    // return Injector.create({ providers: [{ provide: inj, useValue: injectorTokens }] });\n  }\n}\n","import { ModuleWithProviders, NgModule } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\nimport { DrawerService } from \"./drawer.service\";\nimport { OverlayModule } from \"@angular/cdk/overlay\";\nimport { DrawerBodyComponent } from \"./drawer-body/drawer-body.component\";\nimport { PortalModule } from \"@angular/cdk/portal\";\n\n@NgModule({\n  declarations: [DrawerBodyComponent],\n  imports: [CommonModule, OverlayModule, PortalModule],\n  entryComponents: [DrawerBodyComponent],\n})\nexport class DrawerModule {\n  static forRoot(): ModuleWithProviders<DrawerModule> {\n    return {\n      ngModule: DrawerModule,\n      providers: [DrawerService],\n    };\n  }\n\n  static forChild(): ModuleWithProviders<DrawerModule> {\n    return {\n      ngModule: DrawerModule,\n      providers: [DrawerService],\n    };\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n\nexport {DrawerBodyComponent as ɵa} from './drawer-body/drawer-body.component';"],"names":["Subject","ComponentPortal","PortalInjector","Component","trigger","transition","style","animate","ComponentFactoryResolver","ViewChild","ViewContainerRef","InjectionToken","OverlayConfig","portal","take","Injectable","Overlay","Injector","NgModule","CommonModule","OverlayModule","PortalModule"],"mappings":"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"}

package/bundles/mis-crystal-design-system-drawer.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/animations"),require("rxjs"),require("@angular/common")):"function"==typeof define&&define.amd?define("mis-crystal-design-system/drawer",["exports","@angular/cdk/overlay","@angular/cdk/portal","@angular/core","rxjs/operators","@angular/animations","rxjs","@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"].drawer={}),e.ng.cdk.overlay,e.ng.cdk.portal,e.ng.core,e.rxjs.operators,e.ng.animations,e.rxjs,e.ng.common)}(this,(function(e,t,r,o,n,a,i,s){"use strict";var l=function(){function e(e){this.overlay=e,this._isExpanded=!1,this.afterClosed$=new i.Subject,this.afterClosed=this.afterClosed$.asObservable()}return Object.defineProperty(e.prototype,"isExpanded",{get:function(){return this._isExpanded},enumerable:!1,configurable:!0}),e.prototype.close=function(e){this.overlay.detach(),this.overlay.dispose(),this.afterClosed$.next(e),this.afterClosed$.complete()},e.prototype.expand=function(){this.overlay.updateSize({width:"100%"}),this._isExpanded=!0},e.prototype.collapse=function(){this.overlay.updateSize({width:"422px"}),this._isExpanded=!1},e}(),c=function(){function e(e){this.cfr=e}return e.prototype.bindComponent=function(e,t){this.initComponent(e,t)},e.prototype.initComponent=function(e,t){this.drawerPortal=new r.ComponentPortal(e,this.place,t)},e.prototype.createInjector=function(e,t){var o=new WeakMap([[l,e]]);return new r.PortalInjector(t,o)},e}();c.decorators=[{type:o.Component,args:[{selector:"mis-drawer-body",template:'\x3c!-- @format --\x3e\n\n<div class="mis-drawer-body" #place @slideInOut>\n  <ng-template [cdkPortalOutlet]="drawerPortal"></ng-template>\n</div>\n',animations:[a.trigger("slideInOut",[a.transition(":enter",[a.style({transform:"translateX(100%)"}),a.animate("200ms ease-out",a.style({transform:"translateX(0%)"}))]),a.transition(":leave",[a.animate("200ms ease-out",a.style({transform:"translateX(100%)"}))])])],styles:[".mis-drawer-body{display:block;width:100%;height:100%}"]}]}],c.ctorParameters=function(){return[{type:o.ComponentFactoryResolver}]},c.propDecorators={place:[{type:o.ViewChild,args:["place",{static:!1,read:o.ViewContainerRef}]}]};var d=new o.InjectionToken("MISDrawerDataInjectionToken"),p=function(){function e(e,t){this.overlay=e,this.injector=t}return e.prototype.show=function(e,o,a){var i=this.overlay.position().global().top("0px").right("0px"),s=a||{},d=s.width,p=void 0===d?"422px":d,u=s.height,y=void 0===u?"100%":u,f=new t.OverlayConfig({hasBackdrop:!0,positionStrategy:i,scrollStrategy:this.overlay.scrollStrategies.noop(),width:p,height:y,panelClass:"mis-drawer",backdropClass:"mis-drawer-overlay"}),h=this.overlay.create(f);this.drawerRef=new l(h);var m=this.createInjector(this.drawerRef,this.injector,o),g=new r.ComponentPortal(c,null);return this.componentInstance=h.attach(g),this.componentInstance.instance.bindComponent(e,m),h.backdropClick().pipe(n.take(1)).subscribe(this.hide.bind(this)),this.drawerRef},e.prototype.hide=function(){var e;null===(e=this.drawerRef)||void 0===e||e.close()},e.prototype.createInjector=function(e,t,o){var n=new WeakMap;return n.set(l,e),n.set(d,o),new r.PortalInjector(t,n)},e}();p.ɵprov=o.ɵɵdefineInjectable({factory:function(){return new p(o.ɵɵinject(t.Overlay),o.ɵɵinject(o.INJECTOR))},token:p,providedIn:"root"}),p.decorators=[{type:o.Injectable,args:[{providedIn:"root"}]}],p.ctorParameters=function(){return[{type:t.Overlay},{type:o.Injector}]};var u=function(){function e(){}return e.forRoot=function(){return{ngModule:e,providers:[p]}},e.forChild=function(){return{ngModule:e,providers:[p]}},e}();u.decorators=[{type:o.NgModule,args:[{declarations:[c],imports:[s.CommonModule,t.OverlayModule,r.PortalModule],entryComponents:[c]}]}],e.DRAWER_DATA_VAR=d,e.DrawerModule=u,e.DrawerRef=l,e.DrawerService=p,e.ɵa=c,Object.defineProperty(e,"__esModule",{value:!0})}));
+//# sourceMappingURL=mis-crystal-design-system-drawer.umd.min.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../projects/mis-components/drawer/drawer-ref.ts","../../../projects/mis-components/drawer/drawer-body/drawer-body.component.ts","../../../projects/mis-components/drawer/drawer-constants.ts","../../../projects/mis-components/drawer/drawer.service.ts","../../../projects/mis-components/drawer/drawer.module.ts"],"names":["DrawerRef","overlay","this","_isExpanded","afterClosed$","Subject","afterClosed","asObservable","Object","defineProperty","prototype","close","data","detach","dispose","next","complete","expand","updateSize","width","collapse","DrawerBodyComponent","cfr","bindComponent","type","injector","initComponent","drawerPortal","ComponentPortal","place","createInjector","ref","inj","injectorTokens","WeakMap","PortalInjector","Component","args","selector","template","animations","trigger","transition","style","transform","animate","ComponentFactoryResolver","ViewChild","static","read","ViewContainerRef","DRAWER_DATA_VAR","InjectionToken","DrawerService","show","component","options","positionStrategy","position","global","top","right","_b","_c","_d","height","config","OverlayConfig","hasBackdrop","scrollStrategy","scrollStrategies","noop","panelClass","backdropClass","overlayRef","create","drawerRef","portal","componentInstance","attach","instance","backdropClick","pipe","take","subscribe","hide","bind","_a","set","Injectable","providedIn","Overlay","Injector","DrawerModule","forRoot","ngModule","providers","forChild","NgModule","declarations","imports","CommonModule","OverlayModule","PortalModule","entryComponents"],"mappings":"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","sourcesContent":["/** @format */\n\nimport { OverlayRef } from \"@angular/cdk/overlay\";\nimport { Injectable } from \"@angular/core\";\nimport { Subject } from \"rxjs\";\n\nexport class DrawerRef {\n  private _isExpanded = false;\n  private afterClosed$ = new Subject<any>();\n  afterClosed = this.afterClosed$.asObservable();\n  get isExpanded(): boolean {\n    return this._isExpanded;\n  }\n  constructor(public overlay: OverlayRef) {}\n\n  close(data?: any): void {\n    this.overlay.detach();\n    this.overlay.dispose();\n    this.afterClosed$.next(data);\n    this.afterClosed$.complete();\n  }\n\n  expand(): void {\n    this.overlay.updateSize({ width: \"100%\" });\n    this._isExpanded = true;\n  }\n\n  collapse(): void {\n    this.overlay.updateSize({ width: \"422px\" });\n    this._isExpanded = false;\n  }\n}\n","/** @format */\n\nimport { trigger, transition, style, animate } from \"@angular/animations\";\nimport { ComponentPortal, PortalInjector } from \"@angular/cdk/portal\";\nimport { Component, ComponentFactoryResolver, Injector, OnInit, ViewChild, ViewContainerRef } from \"@angular/core\";\nimport { DrawerRef } from \"../drawer-ref\";\n\n@Component({\n  selector: \"mis-drawer-body\",\n  templateUrl: \"./drawer-body.component.html\",\n  styleUrls: [\"./drawer-body.component.scss\"],\n  animations: [\n    trigger(\"slideInOut\", [\n      transition(\":enter\", [\n        style({ transform: \"translateX(100%)\" }),\n        animate(\"200ms ease-out\", style({ transform: \"translateX(0%)\" })),\n      ]),\n      transition(\":leave\", [animate(\"200ms ease-out\", style({ transform: \"translateX(100%)\" }))]),\n    ]),\n  ],\n})\nexport class DrawerBodyComponent {\n  drawerPortal: ComponentPortal<any>;\n  constructor(private cfr: ComponentFactoryResolver) {}\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.drawerPortal = new ComponentPortal(type, this.place, injector);\n  }\n\n  private createInjector(ref: DrawerRef, inj: Injector): PortalInjector {\n    const injectorTokens = new WeakMap([[DrawerRef, ref]]);\n    return new PortalInjector(inj, injectorTokens);\n    // return Injector.create({ providers: [{ provide: inj, useValue: injectorTokens }] });\n  }\n}\n","/** @format */\n\nimport { InjectionToken } from \"@angular/core\";\n\nexport const DRAWER_DATA_VAR = new InjectionToken<any>(\"MISDrawerDataInjectionToken\");\n","/** @format */\n\nimport { Overlay, OverlayConfig, OverlayRef } from \"@angular/cdk/overlay\";\nimport { ComponentPortal, ComponentType, PortalInjector } from \"@angular/cdk/portal\";\nimport { ComponentRef, Injectable, Injector } from \"@angular/core\";\nimport { take } from \"rxjs/operators\";\nimport { DrawerBodyComponent } from \"./drawer-body/drawer-body.component\";\nimport { DrawerRef } from \"./drawer-ref\";\nimport { DRAWER_DATA_VAR } from \"./drawer-constants\";\n\n@Injectable({\n  providedIn: \"root\",\n})\nexport class DrawerService {\n  drawerRef: DrawerRef;\n  componentInstance: ComponentRef<any>;\n\n  constructor(private overlay: Overlay, private injector: Injector) { }\n\n  show<T, D>(component: ComponentType<T>, data?: D, options?: { width?: string, height?: string }): DrawerRef {\n    const positionStrategy = this.overlay.position().global().top(\"0px\").right(\"0px\");\n    const { width = '422px', height = '100%' } = 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-drawer\",\n      backdropClass: \"mis-drawer-overlay\",\n    });\n    const overlayRef = this.overlay.create(config);\n    this.drawerRef = new DrawerRef(overlayRef);\n    const injector = this.createInjector(this.drawerRef, this.injector, data);\n    const portal = new ComponentPortal(DrawerBodyComponent, null);\n    this.componentInstance = overlayRef.attach(portal);\n    this.componentInstance.instance.bindComponent(component, injector);\n    overlayRef.backdropClick().pipe(take(1)).subscribe(this.hide.bind(this));\n    return this.drawerRef;\n  }\n\n  hide(): void {\n    this.drawerRef?.close();\n  }\n\n  private createInjector<D>(ref: DrawerRef, inj: Injector, data?: D): PortalInjector {\n    const injectorTokens = new WeakMap();\n    injectorTokens.set(DrawerRef, ref);\n    injectorTokens.set(DRAWER_DATA_VAR, data);\n    return new PortalInjector(inj, injectorTokens);\n    // return Injector.create({ providers: [{ provide: inj, useValue: injectorTokens }] });\n  }\n}\n","import { ModuleWithProviders, NgModule } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\nimport { DrawerService } from \"./drawer.service\";\nimport { OverlayModule } from \"@angular/cdk/overlay\";\nimport { DrawerBodyComponent } from \"./drawer-body/drawer-body.component\";\nimport { PortalModule } from \"@angular/cdk/portal\";\n\n@NgModule({\n  declarations: [DrawerBodyComponent],\n  imports: [CommonModule, OverlayModule, PortalModule],\n  entryComponents: [DrawerBodyComponent],\n})\nexport class DrawerModule {\n  static forRoot(): ModuleWithProviders<DrawerModule> {\n    return {\n      ngModule: DrawerModule,\n      providers: [DrawerService],\n    };\n  }\n\n  static forChild(): ModuleWithProviders<DrawerModule> {\n    return {\n      ngModule: DrawerModule,\n      providers: [DrawerService],\n    };\n  }\n}\n"]}

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

@@ -0,0 +1,119 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms')) :
+    typeof define === 'function' && define.amd ? define('mis-crystal-design-system/dropdown', ['exports', '@angular/core', '@angular/common', '@angular/forms'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['mis-crystal-design-system'] = global['mis-crystal-design-system'] || {}, global['mis-crystal-design-system'].dropdown = {}), global.ng.core, global.ng.common, global.ng.forms));
+}(this, (function (exports, core, common, forms) { 'use strict';
+
+    var DropdownComponent = /** @class */ (function () {
+        function DropdownComponent(eRef) {
+            this.eRef = eRef;
+            this.isOpen = false;
+            this.isSearchInputFocused = false;
+            this.searchInput = '';
+            this.searchData = [];
+            this.data = [];
+            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.onChange = new core.EventEmitter();
+        }
+        DropdownComponent.prototype.ngOnInit = function () { };
+        DropdownComponent.prototype.clickout = function (event) {
+            var isClickedOutside = !this.eRef.nativeElement.contains(event.target);
+            if (isClickedOutside) {
+                this.onCancel();
+            }
+        };
+        DropdownComponent.prototype.filterByValue = function (array, string) {
+            return array.filter(function (o) { return o.label.toLowerCase().includes(string.toLowerCase()); });
+        };
+        DropdownComponent.prototype.searchInputOnChange = function (newValue) {
+            this.searchInput = newValue;
+            if (newValue) {
+                this.searchData = this.filterByValue(this.data, newValue);
+            }
+            else {
+                this.searchData = [];
+                this.searchInput = '';
+            }
+        };
+        DropdownComponent.prototype.searchInputFocused = function (isFocused) {
+            this.isSearchInputFocused = isFocused;
+        };
+        DropdownComponent.prototype.searchInputCanceled = function (event) {
+            event.stopPropagation();
+            this.searchInput = '';
+            this.isSearchInputFocused = false;
+        };
+        DropdownComponent.prototype.toggleDropdown = function () {
+            this.isOpen = !this.isOpen;
+        };
+        DropdownComponent.prototype.selectItem = function (item) {
+            this.onChange.emit(item);
+            this.toggleDropdown();
+        };
+        DropdownComponent.prototype.onCancel = function () {
+            this.isSearchInputFocused = false;
+            this.isOpen = false;
+            this.searchInput = '';
+        };
+        return DropdownComponent;
+    }());
+    DropdownComponent.decorators = [
+        { type: core.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\" (click)=\"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{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}.position-left{right:0}.position-right{left:0}"]
+                },] }
+    ];
+    DropdownComponent.ctorParameters = function () { return [
+        { type: core.ElementRef }
+    ]; };
+    DropdownComponent.propDecorators = {
+        data: [{ type: core.Input }],
+        height: [{ type: core.Input }],
+        width: [{ type: core.Input }],
+        label: [{ type: core.Input }],
+        dropdownListHeight: [{ type: core.Input }],
+        dropdownListWidth: [{ type: core.Input }],
+        dropdownListPosition: [{ type: core.Input }],
+        searchEnabled: [{ type: core.Input }],
+        selectedItem: [{ type: core.Input }],
+        noDataMessage: [{ type: core.Input }],
+        onChange: [{ type: core.Output }],
+        clickout: [{ type: core.HostListener, args: ['document:click', ['$event'],] }]
+    };
+
+    var DropdownModule = /** @class */ (function () {
+        function DropdownModule() {
+        }
+        DropdownModule.forRoot = function () {
+            return { ngModule: DropdownModule, providers: [] };
+        };
+        return DropdownModule;
+    }());
+    DropdownModule.decorators = [
+        { type: core.NgModule, args: [{
+                    declarations: [DropdownComponent],
+                    imports: [common.CommonModule, forms.FormsModule],
+                    exports: [DropdownComponent]
+                },] }
+    ];
+
+    /**
+     * Generated bundle index. Do not edit.
+     */
+
+    exports.DropdownComponent = DropdownComponent;
+    exports.DropdownModule = DropdownModule;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+})));
+//# sourceMappingURL=mis-crystal-design-system-dropdown.umd.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mis-crystal-design-system-dropdown.umd.js","sources":["../../../projects/mis-components/dropdown/dropdown.component.ts","../../../projects/mis-components/dropdown/dropdown.module.ts","../../../projects/mis-components/dropdown/mis-crystal-design-system-dropdown.ts"],"sourcesContent":["import {\n    Component,\n    ElementRef,\n    EventEmitter,\n    HostListener,\n    Input,\n    OnInit,\n    Output\n} from '@angular/core';\n\n@Component({\n    selector: 'mis-dropdown',\n    templateUrl: './dropdown.component.html',\n    styleUrls: ['./dropdown.component.scss']\n})\nexport class DropdownComponent implements OnInit {\n    isOpen = false;\n    isSearchInputFocused: boolean = false;\n    searchInput: string = '';\n    searchData: DropdownItem[] = [];\n\n    @Input() data: DropdownItem[] = [];\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() selectedItem: DropdownItem = { value: '', label: '' };\n    @Input() noDataMessage: string = 'No Data';\n\n    @Output() onChange: EventEmitter<any> = new EventEmitter();\n\n    constructor(private eRef: ElementRef) { }\n    ngOnInit() { }\n\n    @HostListener('document:click', ['$event'])\n    clickout(event) {\n        const isClickedOutside = !this.eRef.nativeElement.contains(event.target);\n        if (isClickedOutside) {\n            this.onCancel();\n        }\n    }\n    filterByValue(array: DropdownItem[], string: string) {\n        return array.filter(o =>\n            o.label.toLowerCase().includes(string.toLowerCase())\n        );\n    }\n    searchInputOnChange(newValue) {\n        this.searchInput = newValue;\n        if (newValue) {\n            this.searchData = this.filterByValue(this.data, newValue);\n        } else {\n            this.searchData = [];\n            this.searchInput = '';\n        }\n    }\n    searchInputFocused(isFocused: boolean) {\n        this.isSearchInputFocused = isFocused;\n    }\n    searchInputCanceled(event) {\n        event.stopPropagation();\n        this.searchInput = '';\n        this.isSearchInputFocused = false;\n    }\n    toggleDropdown() {\n        this.isOpen = !this.isOpen;\n    }\n    selectItem(item) {\n        this.onChange.emit(item);\n        this.toggleDropdown();\n    }\n    onCancel() {\n        this.isSearchInputFocused = false;\n        this.isOpen = false;\n        this.searchInput = '';\n    }\n}\nexport interface DropdownItem {\n    label: string;\n    value: string;\n    icon?: string\n}\n","import { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { NgModule, ModuleWithProviders } from '@angular/core';\nimport { DropdownComponent } from './dropdown.component';\n\n@NgModule({\n    declarations: [DropdownComponent],\n    imports: [CommonModule, FormsModule],\n    exports: [DropdownComponent]\n})\nexport class DropdownModule {\n    static forRoot(): ModuleWithProviders<DropdownModule> {\n        return { ngModule: DropdownModule, providers: [] };\n    }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["EventEmitter","Component","ElementRef","Input","Output","HostListener","NgModule","CommonModule","FormsModule"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("@angular/core"),require("@angular/common"),require("@angular/forms")):"function"==typeof define&&define.amd?define("mis-crystal-design-system/dropdown",["exports","@angular/core","@angular/common","@angular/forms"],n):n(((e="undefined"!=typeof globalThis?globalThis:e||self)["mis-crystal-design-system"]=e["mis-crystal-design-system"]||{},e["mis-crystal-design-system"].dropdown={}),e.ng.core,e.ng.common,e.ng.forms)}(this,(function(e,n,t,i){"use strict";var o=function(){function e(e){this.eRef=e,this.isOpen=!1,this.isSearchInputFocused=!1,this.searchInput="",this.searchData=[],this.data=[],this.height="",this.width="",this.label="Select",this.dropdownListHeight="",this.dropdownListWidth="",this.dropdownListPosition="Left",this.searchEnabled=!0,this.selectedItem={value:"",label:""},this.noDataMessage="No Data",this.onChange=new n.EventEmitter}return e.prototype.ngOnInit=function(){},e.prototype.clickout=function(e){!this.eRef.nativeElement.contains(e.target)&&this.onCancel()},e.prototype.filterByValue=function(e,n){return e.filter((function(e){return e.label.toLowerCase().includes(n.toLowerCase())}))},e.prototype.searchInputOnChange=function(e){this.searchInput=e,e?this.searchData=this.filterByValue(this.data,e):(this.searchData=[],this.searchInput="")},e.prototype.searchInputFocused=function(e){this.isSearchInputFocused=e},e.prototype.searchInputCanceled=function(e){e.stopPropagation(),this.searchInput="",this.isSearchInputFocused=!1},e.prototype.toggleDropdown=function(){this.isOpen=!this.isOpen},e.prototype.selectItem=function(e){this.onChange.emit(e),this.toggleDropdown()},e.prototype.onCancel=function(){this.isSearchInputFocused=!1,this.isOpen=!1,this.searchInput=""},e}();o.decorators=[{type:n.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" (click)="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{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}.position-left{right:0}.position-right{left:0}"]}]}],o.ctorParameters=function(){return[{type:n.ElementRef}]},o.propDecorators={data:[{type:n.Input}],height:[{type:n.Input}],width:[{type:n.Input}],label:[{type:n.Input}],dropdownListHeight:[{type:n.Input}],dropdownListWidth:[{type:n.Input}],dropdownListPosition:[{type:n.Input}],searchEnabled:[{type:n.Input}],selectedItem:[{type:n.Input}],noDataMessage:[{type:n.Input}],onChange:[{type:n.Output}],clickout:[{type:n.HostListener,args:["document:click",["$event"]]}]};var r=function(){function e(){}return e.forRoot=function(){return{ngModule:e,providers:[]}},e}();r.decorators=[{type:n.NgModule,args:[{declarations:[o],imports:[t.CommonModule,i.FormsModule],exports:[o]}]}],e.DropdownComponent=o,e.DropdownModule=r,Object.defineProperty(e,"__esModule",{value:!0})}));
+//# sourceMappingURL=mis-crystal-design-system-dropdown.umd.min.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../projects/mis-components/dropdown/dropdown.component.ts","../../../projects/mis-components/dropdown/dropdown.module.ts"],"names":["DropdownComponent","eRef","this","isOpen","isSearchInputFocused","searchInput","searchData","data","height","width","label","dropdownListHeight","dropdownListWidth","dropdownListPosition","searchEnabled","selectedItem","value","noDataMessage","onChange","EventEmitter","prototype","ngOnInit","clickout","event","nativeElement","contains","target","onCancel","filterByValue","array","string","filter","o","toLowerCase","includes","searchInputOnChange","newValue","searchInputFocused","isFocused","searchInputCanceled","stopPropagation","toggleDropdown","selectItem","item","emit","Component","args","selector","template","ElementRef","Input","Output","HostListener","DropdownModule","forRoot","ngModule","providers","NgModule","declarations","imports","CommonModule","FormsModule","exports"],"mappings":"+iBAoCI,SAAAA,EAAoBC,GAAAC,KAAAD,KAAAA,EApBpBC,KAAAC,QAAS,EACTD,KAAAE,sBAAgC,EAChCF,KAAAG,YAAsB,GACtBH,KAAAI,WAA6B,GAEpBJ,KAAAK,KAAuB,GACvBL,KAAAM,OAAiB,GACjBN,KAAAO,MAAgB,GAChBP,KAAAQ,MAAgB,SAEhBR,KAAAS,mBAA6B,GAC7BT,KAAAU,kBAA4B,GAC5BV,KAAAW,qBAAyC,OAEzCX,KAAAY,eAAyB,EACzBZ,KAAAa,aAA6B,CAAEC,MAAO,GAAIN,MAAO,IACjDR,KAAAe,cAAwB,UAEvBf,KAAAgB,SAA8B,IAAIC,EAAAA,oBAG5CnB,EAAAoB,UAAAC,SAAA,aAGArB,EAAAoB,UAAAE,SAAA,SAASC,IACqBrB,KAAKD,KAAKuB,cAAcC,SAASF,EAAMG,SAE7DxB,KAAKyB,YAGb3B,EAAAoB,UAAAQ,cAAA,SAAcC,EAAuBC,GACjC,OAAOD,EAAME,QAAO,SAAAC,GAChB,OAAAA,EAAEtB,MAAMuB,cAAcC,SAASJ,EAAOG,mBAG9CjC,EAAAoB,UAAAe,oBAAA,SAAoBC,GAChBlC,KAAKG,YAAc+B,EACfA,EACAlC,KAAKI,WAAaJ,KAAK0B,cAAc1B,KAAKK,KAAM6B,IAEhDlC,KAAKI,WAAa,GAClBJ,KAAKG,YAAc,KAG3BL,EAAAoB,UAAAiB,mBAAA,SAAmBC,GACfpC,KAAKE,qBAAuBkC,GAEhCtC,EAAAoB,UAAAmB,oBAAA,SAAoBhB,GAChBA,EAAMiB,kBACNtC,KAAKG,YAAc,GACnBH,KAAKE,sBAAuB,GAEhCJ,EAAAoB,UAAAqB,eAAA,WACIvC,KAAKC,QAAUD,KAAKC,QAExBH,EAAAoB,UAAAsB,WAAA,SAAWC,GACPzC,KAAKgB,SAAS0B,KAAKD,GACnBzC,KAAKuC,kBAETzC,EAAAoB,UAAAO,SAAA,WACIzB,KAAKE,sBAAuB,EAC5BF,KAAKC,QAAS,EACdD,KAAKG,YAAc,6BApE1BwC,EAAAA,UAASC,KAAA,CAAC,CACPC,SAAU,eACVC,SAAA,4+PAVAC,EAAAA,4CAmBCC,EAAAA,sBACAA,EAAAA,qBACAA,EAAAA,qBACAA,EAAAA,kCAEAA,EAAAA,iCACAA,EAAAA,oCACAA,EAAAA,6BAEAA,EAAAA,4BACAA,EAAAA,6BACAA,EAAAA,wBAEAC,EAAAA,yBAKAC,EAAAA,aAAYN,KAAA,CAAC,iBAAkB,CAAC,+BC7BrC,SAAAO,YACWA,EAAAC,QAAP,WACI,MAAO,CAAEC,SAAUF,EAAgBG,UAAW,8BAPrDC,EAAAA,SAAQX,KAAA,CAAC,CACNY,aAAc,CAAC1D,GACf2D,QAAS,CAACC,EAAAA,aAAcC,EAAAA,aACxBC,QAAS,CAAC9D","sourcesContent":["import {\n    Component,\n    ElementRef,\n    EventEmitter,\n    HostListener,\n    Input,\n    OnInit,\n    Output\n} from '@angular/core';\n\n@Component({\n    selector: 'mis-dropdown',\n    templateUrl: './dropdown.component.html',\n    styleUrls: ['./dropdown.component.scss']\n})\nexport class DropdownComponent implements OnInit {\n    isOpen = false;\n    isSearchInputFocused: boolean = false;\n    searchInput: string = '';\n    searchData: DropdownItem[] = [];\n\n    @Input() data: DropdownItem[] = [];\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() selectedItem: DropdownItem = { value: '', label: '' };\n    @Input() noDataMessage: string = 'No Data';\n\n    @Output() onChange: EventEmitter<any> = new EventEmitter();\n\n    constructor(private eRef: ElementRef) { }\n    ngOnInit() { }\n\n    @HostListener('document:click', ['$event'])\n    clickout(event) {\n        const isClickedOutside = !this.eRef.nativeElement.contains(event.target);\n        if (isClickedOutside) {\n            this.onCancel();\n        }\n    }\n    filterByValue(array: DropdownItem[], string: string) {\n        return array.filter(o =>\n            o.label.toLowerCase().includes(string.toLowerCase())\n        );\n    }\n    searchInputOnChange(newValue) {\n        this.searchInput = newValue;\n        if (newValue) {\n            this.searchData = this.filterByValue(this.data, newValue);\n        } else {\n            this.searchData = [];\n            this.searchInput = '';\n        }\n    }\n    searchInputFocused(isFocused: boolean) {\n        this.isSearchInputFocused = isFocused;\n    }\n    searchInputCanceled(event) {\n        event.stopPropagation();\n        this.searchInput = '';\n        this.isSearchInputFocused = false;\n    }\n    toggleDropdown() {\n        this.isOpen = !this.isOpen;\n    }\n    selectItem(item) {\n        this.onChange.emit(item);\n        this.toggleDropdown();\n    }\n    onCancel() {\n        this.isSearchInputFocused = false;\n        this.isOpen = false;\n        this.searchInput = '';\n    }\n}\nexport interface DropdownItem {\n    label: string;\n    value: string;\n    icon?: string\n}\n","import { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { NgModule, ModuleWithProviders } from '@angular/core';\nimport { DropdownComponent } from './dropdown.component';\n\n@NgModule({\n    declarations: [DropdownComponent],\n    imports: [CommonModule, FormsModule],\n    exports: [DropdownComponent]\n})\nexport class DropdownModule {\n    static forRoot(): ModuleWithProviders<DropdownModule> {\n        return { ngModule: DropdownModule, providers: [] };\n    }\n}\n"]}

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

@@ -0,0 +1,98 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/animations'), require('@angular/common')) :
+    typeof define === 'function' && define.amd ? define('mis-crystal-design-system/fab', ['exports', '@angular/core', '@angular/animations', '@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'].fab = {}), global.ng.core, global.ng.animations, global.ng.common));
+}(this, (function (exports, core, animations, common) { 'use strict';
+
+    /** @format */
+    var FabComponent = /** @class */ (function () {
+        function FabComponent(eRef) {
+            this.eRef = eRef;
+            this.show = false;
+            this.options = {};
+            this.items = [];
+            this.isOpen = false;
+        }
+        FabComponent.prototype.clickout = function (event) {
+            if (!this.eRef.nativeElement.contains(event.target)) {
+                this.closeFab();
+            }
+        };
+        FabComponent.prototype.ngOnInit = function () {
+            this.options = Object.assign({ size: 56, backgroundColorClosed: '#0937B2', backgroundColorOpened: '#3a5fc1' }, this.options);
+        };
+        FabComponent.prototype.ngOnDestroy = function () {
+        };
+        FabComponent.prototype.clickItem = function (item) {
+            this.closeFab();
+            item.click();
+        };
+        FabComponent.prototype.closeFab = function () {
+            this.isOpen = false;
+        };
+        FabComponent.prototype.toogleFab = function () {
+            this.isOpen = !this.isOpen;
+        };
+        return FabComponent;
+    }());
+    FabComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: "mis-fab",
+                    template: "<div class=\"fab-wrapper\" *ngIf=\"show\">\n  <div class=\"fab-items\" *ngIf=\"isOpen\" @slideUpFab>\n    <div class=\"fab-item\" *ngFor=\"let item of items.reverse(); let i = index\" (click)=\"clickItem(item)\">\n      <div *ngIf=\"item.label\" class=\"fab-tooltip\">\n        {{ item.label }}\n      </div>\n      <div\n        class=\"fab-button\"\n        [ngStyle]=\"{\n          backgroundColor: item.backgroundColor || '#0937B2'\n        }\"\n      >\n        <img [src]=\"item.icon\" class=\"add-img\" />\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"fab-container\"\n    [ngStyle]=\"{\n      backgroundColor: isOpen ? options.backgroundColorOpened : options.backgroundColorClosed\n    }\"\n    (click)=\"toogleFab()\"\n  >\n    <svg\n      [@rotateButton]=\"isOpen ? 'rotated' : 'default'\"\n      class=\"add-img\"\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=\"M13.1424 5.15607C13.1424 4.51759 12.6313 4 12.0009 4C11.3704 4 10.8594 4.51759 10.8594 5.15607V10.8421H5.14149C4.51106 10.8421 4 11.3597 4 11.9982C4 12.6367 4.51106 13.1543 5.14149 13.1543H10.8594V18.8439C10.8594 19.4824 11.3704 20 12.0009 20C12.6313 20 13.1424 19.4824 13.1424 18.8439V13.1543H18.8585C19.4889 13.1543 20 12.6367 20 11.9982C20 11.3597 19.4889 10.8421 18.8585 10.8421H13.1424V5.15607Z\"\n        fill=\"white\"\n      />\n    </svg>\n  </div>\n</div>\n",
+                    animations: [
+                        animations.trigger("slideUpFab", [
+                            animations.transition(":enter", [
+                                animations.style({ transform: "translateY(50px)", opacity: 0 }),
+                                animations.animate("300ms ease-out", animations.style({ transform: "translateY(0px)", opacity: 1 })),
+                            ]),
+                            animations.transition(":leave", [
+                                animations.animate("200ms ease-out", animations.style({ transform: "translateY(70px)", opacity: 0 })),
+                            ]),
+                        ]),
+                        animations.trigger("rotateButton", [
+                            animations.state('default', animations.style({ transform: 'rotate(0)' })),
+                            animations.state('rotated', animations.style({ transform: 'rotate(45deg)' })),
+                            animations.transition('rotated => default', animations.animate('300ms ease-out')),
+                            animations.transition('default => rotated', animations.animate('200ms ease-in'))
+                        ]),
+                    ],
+                    styles: [".fab-wrapper{position:fixed;right:24px;bottom:24px;z-index:1000}.fab-wrapper .fab-item{position:relative;padding:0 0 16px 8px}.fab-wrapper .fab-item .fab-tooltip{position:absolute;background-color:#181f33;border-radius:4px;color:#fff;padding:8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;right:100%;top:calc(50% - 8px);transform:translateY(-50%)}.fab-wrapper .fab-item .fab-button{width:40px;height:40px}.fab-wrapper .fab-container,.fab-wrapper .fab-item .fab-button{cursor:pointer;border-radius:50%;display:flex;justify-content:center;align-items:center}.fab-wrapper .fab-container{width:56px;height:56px}.add-img{height:24px;width:24px}"]
+                },] }
+    ];
+    FabComponent.ctorParameters = function () { return [
+        { type: core.ElementRef }
+    ]; };
+    FabComponent.propDecorators = {
+        show: [{ type: core.Input }],
+        options: [{ type: core.Input }],
+        items: [{ type: core.Input }],
+        clickout: [{ type: core.HostListener, args: ['document:click', ['$event'],] }]
+    };
+
+    var FabModule = /** @class */ (function () {
+        function FabModule() {
+        }
+        FabModule.forRoot = function () {
+            return { ngModule: FabModule, providers: [] };
+        };
+        return FabModule;
+    }());
+    FabModule.decorators = [
+        { type: core.NgModule, args: [{
+                    declarations: [FabComponent],
+                    imports: [common.CommonModule],
+                    exports: [FabComponent],
+                },] }
+    ];
+
+    /**
+     * Generated bundle index. Do not edit.
+     */
+
+    exports.FabComponent = FabComponent;
+    exports.FabModule = FabModule;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+})));
+//# sourceMappingURL=mis-crystal-design-system-fab.umd.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mis-crystal-design-system-fab.umd.js","sources":["../../../projects/mis-components/fab/fab.component.ts","../../../projects/mis-components/fab/fab.module.ts","../../../projects/mis-components/fab/mis-crystal-design-system-fab.ts"],"sourcesContent":["/** @format */\n\nimport { Component, ElementRef, HostListener, Input, OnDestroy, OnInit } from \"@angular/core\";\nimport { trigger, transition, style, animate, state } from \"@angular/animations\";\n\nexport type FabOptions = {\n  backgroundColorClosed?: string;\n  backgroundColorOpened?: string;\n  size?: number;\n}\n\nexport type FabItem = {\n  label?: string;\n  icon: string;\n  backgroundColor?: string;\n  id?: string;\n  click?: () => any;\n}\n\nexport type FabItems = FabItem[]\n\n@Component({\n  selector: \"mis-fab\",\n  templateUrl: \"./fab.component.html\",\n  styleUrls: [\"./fab.component.scss\"],\n  animations: [\n    trigger(\"slideUpFab\", [\n      transition(\":enter\", [\n        style({ transform: \"translateY(50px)\", opacity: 0 }),\n        animate(\"300ms ease-out\", style({ transform: \"translateY(0px)\", opacity: 1 })),\n      ]),\n      transition(\":leave\", [\n        animate(\"200ms ease-out\", style({ transform: \"translateY(70px)\", opacity: 0 })),\n      ]),\n    ]),\n    trigger(\"rotateButton\", [\n      state('default', style({ transform: 'rotate(0)' })),\n      state('rotated', style({ transform: 'rotate(45deg)' })),\n      transition('rotated => default', animate('300ms ease-out')),\n      transition('default => rotated', animate('200ms ease-in'))\n    ]),\n  ],\n})\nexport class FabComponent implements OnInit, OnDestroy {\n\n  @Input() show: boolean = false;\n  @Input() options: FabOptions = {};\n  @Input() items: FabItems = []\n\n  isOpen: boolean = false;\n\n\n  constructor(private eRef: ElementRef) { }\n\n  @HostListener('document:click', ['$event'])\n  clickout(event) {\n    if (!this.eRef.nativeElement.contains(event.target)) {\n      this.closeFab()\n    }\n  }\n\n  ngOnInit(): void {\n    this.options = {\n      size: 56,\n      backgroundColorClosed: '#0937B2',\n      backgroundColorOpened: '#3a5fc1',\n      ...this.options\n    }\n  }\n\n  ngOnDestroy(): void {\n  }\n\n  clickItem(item: FabItem) {\n    this.closeFab();\n    item.click();\n  }\n\n  closeFab() {\n    this.isOpen = false;\n  }\n\n  toogleFab() {\n    this.isOpen = !this.isOpen;\n  }\n\n}\n","import { NgModule, ModuleWithProviders } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\nimport { FabComponent } from './fab.component';\n\n@NgModule({\n  declarations: [FabComponent],\n  imports: [CommonModule],\n  exports: [FabComponent],\n})\nexport class FabModule {\n  static forRoot(): ModuleWithProviders<FabModule> {\n    return { ngModule: FabModule, providers: [] };\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["Component","trigger","transition","style","animate","state","ElementRef","Input","HostListener","NgModule","CommonModule"],"mappings":";;;;;;IAAA;;QAoDE,sBAAoB,IAAgB;YAAhB,SAAI,GAAJ,IAAI,CAAY;YAP3B,SAAI,GAAY,KAAK,CAAC;YACtB,YAAO,GAAe,EAAE,CAAC;YACzB,UAAK,GAAa,EAAE,CAAA;YAE7B,WAAM,GAAY,KAAK,CAAC;SAGiB;QAGzC,+BAAQ,GAAR,UAAS,KAAK;YACZ,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE;gBACnD,IAAI,CAAC,QAAQ,EAAE,CAAA;aAChB;SACF;QAED,+BAAQ,GAAR;YACE,IAAI,CAAC,OAAO,mBACV,IAAI,EAAE,EAAE,EACR,qBAAqB,EAAE,SAAS,EAChC,qBAAqB,EAAE,SAAS,IAC7B,IAAI,CAAC,OAAO,CAChB,CAAA;SACF;QAED,kCAAW,GAAX;SACC;QAED,gCAAS,GAAT,UAAU,IAAa;YACrB,IAAI,CAAC,QAAQ,EAAE,CAAC;YAChB,IAAI,CAAC,KAAK,EAAE,CAAC;SACd;QAED,+BAAQ,GAAR;YACE,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;SACrB;QAED,gCAAS,GAAT;YACE,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;SAC5B;;;;gBA/DFA,cAAS,SAAC;oBACT,QAAQ,EAAE,SAAS;oBACnB,ygDAAmC;oBAEnC,UAAU,EAAE;wBACVC,kBAAO,CAAC,YAAY,EAAE;4BACpBC,qBAAU,CAAC,QAAQ,EAAE;gCACnBC,gBAAK,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;gCACpDC,kBAAO,CAAC,gBAAgB,EAAED,gBAAK,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC;6BAC/E,CAAC;4BACFD,qBAAU,CAAC,QAAQ,EAAE;gCACnBE,kBAAO,CAAC,gBAAgB,EAAED,gBAAK,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC;6BAChF,CAAC;yBACH,CAAC;wBACFF,kBAAO,CAAC,cAAc,EAAE;4BACtBI,gBAAK,CAAC,SAAS,EAAEF,gBAAK,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC,CAAC;4BACnDE,gBAAK,CAAC,SAAS,EAAEF,gBAAK,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC,CAAC;4BACvDD,qBAAU,CAAC,oBAAoB,EAAEE,kBAAO,CAAC,gBAAgB,CAAC,CAAC;4BAC3DF,qBAAU,CAAC,oBAAoB,EAAEE,kBAAO,CAAC,eAAe,CAAC,CAAC;yBAC3D,CAAC;qBACH;;iBACF;;;gBAxCmBE,eAAU;;;uBA2C3BC,UAAK;0BACLA,UAAK;wBACLA,UAAK;2BAOLC,iBAAY,SAAC,gBAAgB,EAAE,CAAC,QAAQ,CAAC;;;;QC7C5C;;QACS,iBAAO,GAAd;YACE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC;SAC/C;;;;gBARFC,aAAQ,SAAC;oBACR,YAAY,EAAE,CAAC,YAAY,CAAC;oBAC5B,OAAO,EAAE,CAACC,mBAAY,CAAC;oBACvB,OAAO,EAAE,CAAC,YAAY,CAAC;iBACxB;;;ICRD;;;;;;;;;;;;;"}

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

@@ -0,0 +1,2 @@
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/animations"),require("@angular/common")):"function"==typeof define&&define.amd?define("mis-crystal-design-system/fab",["exports","@angular/core","@angular/animations","@angular/common"],e):e(((t="undefined"!=typeof globalThis?globalThis:t||self)["mis-crystal-design-system"]=t["mis-crystal-design-system"]||{},t["mis-crystal-design-system"].fab={}),t.ng.core,t.ng.animations,t.ng.common)}(this,(function(t,e,n,o){"use strict";var i=function(){function t(t){this.eRef=t,this.show=!1,this.options={},this.items=[],this.isOpen=!1}return t.prototype.clickout=function(t){this.eRef.nativeElement.contains(t.target)||this.closeFab()},t.prototype.ngOnInit=function(){this.options=Object.assign({size:56,backgroundColorClosed:"#0937B2",backgroundColorOpened:"#3a5fc1"},this.options)},t.prototype.ngOnDestroy=function(){},t.prototype.clickItem=function(t){this.closeFab(),t.click()},t.prototype.closeFab=function(){this.isOpen=!1},t.prototype.toogleFab=function(){this.isOpen=!this.isOpen},t}();i.decorators=[{type:e.Component,args:[{selector:"mis-fab",template:'<div class="fab-wrapper" *ngIf="show">\n  <div class="fab-items" *ngIf="isOpen" @slideUpFab>\n    <div class="fab-item" *ngFor="let item of items.reverse(); let i = index" (click)="clickItem(item)">\n      <div *ngIf="item.label" class="fab-tooltip">\n        {{ item.label }}\n      </div>\n      <div\n        class="fab-button"\n        [ngStyle]="{\n          backgroundColor: item.backgroundColor || \'#0937B2\'\n        }"\n      >\n        <img [src]="item.icon" class="add-img" />\n      </div>\n    </div>\n  </div>\n  <div\n    class="fab-container"\n    [ngStyle]="{\n      backgroundColor: isOpen ? options.backgroundColorOpened : options.backgroundColorClosed\n    }"\n    (click)="toogleFab()"\n  >\n    <svg\n      [@rotateButton]="isOpen ? \'rotated\' : \'default\'"\n      class="add-img"\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="M13.1424 5.15607C13.1424 4.51759 12.6313 4 12.0009 4C11.3704 4 10.8594 4.51759 10.8594 5.15607V10.8421H5.14149C4.51106 10.8421 4 11.3597 4 11.9982C4 12.6367 4.51106 13.1543 5.14149 13.1543H10.8594V18.8439C10.8594 19.4824 11.3704 20 12.0009 20C12.6313 20 13.1424 19.4824 13.1424 18.8439V13.1543H18.8585C19.4889 13.1543 20 12.6367 20 11.9982C20 11.3597 19.4889 10.8421 18.8585 10.8421H13.1424V5.15607Z"\n        fill="white"\n      />\n    </svg>\n  </div>\n</div>\n',animations:[n.trigger("slideUpFab",[n.transition(":enter",[n.style({transform:"translateY(50px)",opacity:0}),n.animate("300ms ease-out",n.style({transform:"translateY(0px)",opacity:1}))]),n.transition(":leave",[n.animate("200ms ease-out",n.style({transform:"translateY(70px)",opacity:0}))])]),n.trigger("rotateButton",[n.state("default",n.style({transform:"rotate(0)"})),n.state("rotated",n.style({transform:"rotate(45deg)"})),n.transition("rotated => default",n.animate("300ms ease-out")),n.transition("default => rotated",n.animate("200ms ease-in"))])],styles:[".fab-wrapper{position:fixed;right:24px;bottom:24px;z-index:1000}.fab-wrapper .fab-item{position:relative;padding:0 0 16px 8px}.fab-wrapper .fab-item .fab-tooltip{position:absolute;background-color:#181f33;border-radius:4px;color:#fff;padding:8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;right:100%;top:calc(50% - 8px);transform:translateY(-50%)}.fab-wrapper .fab-item .fab-button{width:40px;height:40px}.fab-wrapper .fab-container,.fab-wrapper .fab-item .fab-button{cursor:pointer;border-radius:50%;display:flex;justify-content:center;align-items:center}.fab-wrapper .fab-container{width:56px;height:56px}.add-img{height:24px;width:24px}"]}]}],i.ctorParameters=function(){return[{type:e.ElementRef}]},i.propDecorators={show:[{type:e.Input}],options:[{type:e.Input}],items:[{type:e.Input}],clickout:[{type:e.HostListener,args:["document:click",["$event"]]}]};var a=function(){function t(){}return t.forRoot=function(){return{ngModule:t,providers:[]}},t}();a.decorators=[{type:e.NgModule,args:[{declarations:[i],imports:[o.CommonModule],exports:[i]}]}],t.FabComponent=i,t.FabModule=a,Object.defineProperty(t,"__esModule",{value:!0})}));
+//# sourceMappingURL=mis-crystal-design-system-fab.umd.min.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../projects/mis-components/fab/fab.component.ts","../../../projects/mis-components/fab/fab.module.ts"],"names":["FabComponent","eRef","this","show","options","items","isOpen","prototype","clickout","event","nativeElement","contains","target","closeFab","ngOnInit","Object","assign","size","backgroundColorClosed","backgroundColorOpened","ngOnDestroy","clickItem","item","click","toogleFab","Component","args","selector","template","animations","trigger","transition","style","transform","opacity","animate","state","ElementRef","Input","HostListener","FabModule","forRoot","ngModule","providers","NgModule","declarations","imports","CommonModule","exports"],"mappings":"ojBAoDE,SAAAA,EAAoBC,GAAAC,KAAAD,KAAAA,EAPXC,KAAAC,MAAgB,EAChBD,KAAAE,QAAsB,GACtBF,KAAAG,MAAkB,GAE3BH,KAAAI,QAAkB,SAMlBN,EAAAO,UAAAC,SAAA,SAASC,GACFP,KAAKD,KAAKS,cAAcC,SAASF,EAAMG,SAC1CV,KAAKW,YAITb,EAAAO,UAAAO,SAAA,WACEZ,KAAKE,QAAOW,OAAAC,OAAA,CACVC,KAAM,GACNC,sBAAuB,UACvBC,sBAAuB,WACpBjB,KAAKE,UAIZJ,EAAAO,UAAAa,YAAA,aAGApB,EAAAO,UAAAc,UAAA,SAAUC,GACRpB,KAAKW,WACLS,EAAKC,SAGPvB,EAAAO,UAAAM,SAAA,WACEX,KAAKI,QAAS,GAGhBN,EAAAO,UAAAiB,UAAA,WACEtB,KAAKI,QAAUJ,KAAKI,iCA9DvBmB,EAAAA,UAASC,KAAA,CAAC,CACTC,SAAU,UACVC,SAAA,g9CAEAC,WAAY,CACVC,EAAAA,QAAQ,aAAc,CACpBC,EAAAA,WAAW,SAAU,CACnBC,EAAAA,MAAM,CAAEC,UAAW,mBAAoBC,QAAS,IAChDC,EAAAA,QAAQ,iBAAkBH,EAAAA,MAAM,CAAEC,UAAW,kBAAmBC,QAAS,OAE3EH,EAAAA,WAAW,SAAU,CACnBI,EAAAA,QAAQ,iBAAkBH,EAAAA,MAAM,CAAEC,UAAW,mBAAoBC,QAAS,SAG9EJ,EAAAA,QAAQ,eAAgB,CACtBM,EAAAA,MAAM,UAAWJ,EAAAA,MAAM,CAAEC,UAAW,eACpCG,EAAAA,MAAM,UAAWJ,EAAAA,MAAM,CAAEC,UAAW,mBACpCF,EAAAA,WAAW,qBAAsBI,EAAAA,QAAQ,mBACzCJ,EAAAA,WAAW,qBAAsBI,EAAAA,QAAQ,4uBArC3BE,EAAAA,4CA2CjBC,EAAAA,uBACAA,EAAAA,qBACAA,EAAAA,wBAOAC,EAAAA,aAAYb,KAAA,CAAC,iBAAkB,CAAC,+BC7CnC,SAAAc,YACSA,EAAAC,QAAP,WACE,MAAO,CAAEC,SAAUF,EAAWG,UAAW,8BAP5CC,EAAAA,SAAQlB,KAAA,CAAC,CACRmB,aAAc,CAAC7C,GACf8C,QAAS,CAACC,EAAAA,cACVC,QAAS,CAAChD","sourcesContent":["/** @format */\n\nimport { Component, ElementRef, HostListener, Input, OnDestroy, OnInit } from \"@angular/core\";\nimport { trigger, transition, style, animate, state } from \"@angular/animations\";\n\nexport type FabOptions = {\n  backgroundColorClosed?: string;\n  backgroundColorOpened?: string;\n  size?: number;\n}\n\nexport type FabItem = {\n  label?: string;\n  icon: string;\n  backgroundColor?: string;\n  id?: string;\n  click?: () => any;\n}\n\nexport type FabItems = FabItem[]\n\n@Component({\n  selector: \"mis-fab\",\n  templateUrl: \"./fab.component.html\",\n  styleUrls: [\"./fab.component.scss\"],\n  animations: [\n    trigger(\"slideUpFab\", [\n      transition(\":enter\", [\n        style({ transform: \"translateY(50px)\", opacity: 0 }),\n        animate(\"300ms ease-out\", style({ transform: \"translateY(0px)\", opacity: 1 })),\n      ]),\n      transition(\":leave\", [\n        animate(\"200ms ease-out\", style({ transform: \"translateY(70px)\", opacity: 0 })),\n      ]),\n    ]),\n    trigger(\"rotateButton\", [\n      state('default', style({ transform: 'rotate(0)' })),\n      state('rotated', style({ transform: 'rotate(45deg)' })),\n      transition('rotated => default', animate('300ms ease-out')),\n      transition('default => rotated', animate('200ms ease-in'))\n    ]),\n  ],\n})\nexport class FabComponent implements OnInit, OnDestroy {\n\n  @Input() show: boolean = false;\n  @Input() options: FabOptions = {};\n  @Input() items: FabItems = []\n\n  isOpen: boolean = false;\n\n\n  constructor(private eRef: ElementRef) { }\n\n  @HostListener('document:click', ['$event'])\n  clickout(event) {\n    if (!this.eRef.nativeElement.contains(event.target)) {\n      this.closeFab()\n    }\n  }\n\n  ngOnInit(): void {\n    this.options = {\n      size: 56,\n      backgroundColorClosed: '#0937B2',\n      backgroundColorOpened: '#3a5fc1',\n      ...this.options\n    }\n  }\n\n  ngOnDestroy(): void {\n  }\n\n  clickItem(item: FabItem) {\n    this.closeFab();\n    item.click();\n  }\n\n  closeFab() {\n    this.isOpen = false;\n  }\n\n  toogleFab() {\n    this.isOpen = !this.isOpen;\n  }\n\n}\n","import { NgModule, ModuleWithProviders } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\nimport { FabComponent } from './fab.component';\n\n@NgModule({\n  declarations: [FabComponent],\n  imports: [CommonModule],\n  exports: [FabComponent],\n})\nexport class FabModule {\n  static forRoot(): ModuleWithProviders<FabModule> {\n    return { ngModule: FabModule, providers: [] };\n  }\n}\n"]}