mis-crystal-design-system 2.9.6 → 2.9.7-v14-1

package/fesm2020/mis-crystal-design-system-drawer.mjs

@@ -0,0 +1,156 @@
+import * as i1$1 from '@angular/cdk/overlay';
+import { OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
+import * as i1 from '@angular/cdk/portal';
+import { ComponentPortal, PortalInjector, PortalModule } from '@angular/cdk/portal';
+import * as i0 from '@angular/core';
+import { ViewContainerRef, Component, ViewChild, InjectionToken, Injectable, NgModule } from '@angular/core';
+import { take } from 'rxjs/operators';
+import { trigger, transition, style, animate } from '@angular/animations';
+import { Subject } from 'rxjs';
+import { CommonModule } from '@angular/common';
+
+/** @format */
+class DrawerRef {
+    constructor(overlay) {
+        this.overlay = overlay;
+        this._isExpanded = false;
+        this.afterClosed$ = new Subject();
+        this.afterClosed = this.afterClosed$.asObservable();
+    }
+    get isExpanded() {
+        return this._isExpanded;
+    }
+    close(data) {
+        this.overlay.detach();
+        this.overlay.dispose();
+        this.afterClosed$.next(data);
+        this.afterClosed$.complete();
+    }
+    expand() {
+        this.overlay.updateSize({ width: "100%" });
+        this._isExpanded = true;
+    }
+    collapse() {
+        this.overlay.updateSize({ width: "422px" });
+        this._isExpanded = false;
+    }
+}
+
+/** @format */
+class DrawerBodyComponent {
+    constructor(cfr) {
+        this.cfr = cfr;
+    }
+    bindComponent(type, injector) {
+        this.initComponent(type, injector);
+    }
+    initComponent(type, injector) {
+        this.drawerPortal = new ComponentPortal(type, this.place, injector);
+    }
+    createInjector(ref, inj) {
+        const injectorTokens = new WeakMap([[DrawerRef, ref]]);
+        return new PortalInjector(inj, injectorTokens);
+        // return Injector.create({ providers: [{ provide: inj, useValue: injectorTokens }] });
+    }
+}
+DrawerBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DrawerBodyComponent, deps: [{ token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component });
+DrawerBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DrawerBodyComponent, selector: "mis-drawer-body", viewQueries: [{ propertyName: "place", first: true, predicate: ["place"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<!-- @format -->\n\n<div class=\"mis-drawer-body\" #place @slideInOut>\n  <ng-template [cdkPortalOutlet]=\"drawerPortal\"></ng-template>\n</div>\n", styles: [".mis-drawer-body{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: i1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], animations: [
+        trigger("slideInOut", [
+            transition(":enter", [style({ transform: "translateX(100%)" }), animate("200ms ease-out", style({ transform: "translateX(0%)" }))]),
+            transition(":leave", [animate("200ms ease-out", style({ transform: "translateX(100%)" }))])
+        ])
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DrawerBodyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mis-drawer-body", animations: [
+                        trigger("slideInOut", [
+                            transition(":enter", [style({ transform: "translateX(100%)" }), animate("200ms ease-out", style({ transform: "translateX(0%)" }))]),
+                            transition(":leave", [animate("200ms ease-out", style({ transform: "translateX(100%)" }))])
+                        ])
+                    ], template: "<!-- @format -->\n\n<div class=\"mis-drawer-body\" #place @slideInOut>\n  <ng-template [cdkPortalOutlet]=\"drawerPortal\"></ng-template>\n</div>\n", styles: [".mis-drawer-body{display:block;width:100%;height:100%}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }]; }, propDecorators: { place: [{
+                type: ViewChild,
+                args: ["place", { static: false, read: ViewContainerRef }]
+            }] } });
+
+/** @format */
+const DRAWER_DATA_VAR = new InjectionToken("MISDrawerDataInjectionToken");
+
+/** @format */
+class DrawerService {
+    constructor(overlay, injector) {
+        this.overlay = overlay;
+        this.injector = injector;
+    }
+    show(component, data, options) {
+        const positionStrategy = this.overlay.position().global().top("0px").right("0px");
+        const { width = "422px", height = "100%" } = options || {};
+        const config = new OverlayConfig({
+            hasBackdrop: true,
+            positionStrategy,
+            scrollStrategy: this.overlay.scrollStrategies.noop(),
+            width: width,
+            height,
+            panelClass: "mis-drawer",
+            backdropClass: "mis-drawer-overlay"
+        });
+        const overlayRef = this.overlay.create(config);
+        this.drawerRef = new DrawerRef(overlayRef);
+        const injector = this.createInjector(this.drawerRef, this.injector, data);
+        const portal = new ComponentPortal(DrawerBodyComponent, null);
+        this.componentInstance = overlayRef.attach(portal);
+        this.componentInstance.instance.bindComponent(component, injector);
+        overlayRef.backdropClick().pipe(take(1)).subscribe(this.hide.bind(this));
+        return this.drawerRef;
+    }
+    hide() {
+        this.drawerRef?.close();
+    }
+    createInjector(ref, inj, data) {
+        const injectorTokens = new WeakMap();
+        injectorTokens.set(DrawerRef, ref);
+        injectorTokens.set(DRAWER_DATA_VAR, data);
+        return new PortalInjector(inj, injectorTokens);
+        // return Injector.create({ providers: [{ provide: inj, useValue: injectorTokens }] });
+    }
+}
+DrawerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DrawerService, deps: [{ token: i1$1.Overlay }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+DrawerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DrawerService, providedIn: "root" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DrawerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root"
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.Overlay }, { type: i0.Injector }]; } });
+
+class DrawerModule {
+    static forRoot() {
+        return {
+            ngModule: DrawerModule,
+            providers: [DrawerService]
+        };
+    }
+    static forChild() {
+        return {
+            ngModule: DrawerModule,
+            providers: [DrawerService]
+        };
+    }
+}
+DrawerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DrawerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DrawerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: DrawerModule, declarations: [DrawerBodyComponent], imports: [CommonModule, OverlayModule, PortalModule] });
+DrawerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DrawerModule, imports: [CommonModule, OverlayModule, PortalModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DrawerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [DrawerBodyComponent],
+                    imports: [CommonModule, OverlayModule, PortalModule]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DRAWER_DATA_VAR, DrawerModule, DrawerRef, DrawerService };
+//# sourceMappingURL=mis-crystal-design-system-drawer.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mis-crystal-design-system-drawer.mjs","sources":["../../../projects/mis-components/drawer/drawer-ref.ts","../../../projects/mis-components/drawer/drawer-body/drawer-body.component.ts","../../../projects/mis-components/drawer/drawer-body/drawer-body.component.html","../../../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\", [style({ transform: \"translateX(100%)\" }), animate(\"200ms ease-out\", style({ transform: \"translateX(0%)\" }))]),\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\n<div class=\"mis-drawer-body\" #place @slideInOut>\n  <ng-template [cdkPortalOutlet]=\"drawerPortal\"></ng-template>\n</div>\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})\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"],"names":["i1"],"mappings":"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"}

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

@@ -0,0 +1,175 @@
+import * as i1 from '@angular/cdk/overlay';
+import { ConnectionPositionPair, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, Input, Output, ViewChild, NgModule } from '@angular/core';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i3 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i4 from '@angular/cdk/scrolling';
+import * as i5 from '@angular/cdk-experimental/scrolling';
+import { ScrollingModule } from '@angular/cdk-experimental/scrolling';
+
+class DropdownComponent {
+    constructor(eRef, overlay, viewContainerRef) {
+        this.eRef = eRef;
+        this.overlay = overlay;
+        this.viewContainerRef = viewContainerRef;
+        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.multiLine = false;
+        this.onChange = new EventEmitter();
+    }
+    ngOnInit() {
+    }
+    filterByValue(array, string) {
+        return array.filter(o => o.label.toLowerCase().includes(string.toLowerCase()));
+    }
+    filterByPrimaryText(array, string) {
+        return array.filter(o => o.label.primaryText.toLowerCase().includes(string.toLowerCase()));
+    }
+    searchInputOnChange(newValue) {
+        this.searchInput = newValue;
+        if (newValue) {
+            this.searchData = this.multiLine ? this.filterByPrimaryText(this.data, newValue) : this.filterByValue(this.data, newValue);
+        }
+        else {
+            this.searchData = [];
+            this.searchInput = "";
+        }
+    }
+    searchInputFocused(isFocused) {
+        this.isSearchInputFocused = isFocused;
+    }
+    searchInputCanceled(event) {
+        event.stopPropagation();
+        this.searchInput = "";
+        this.isSearchInputFocused = false;
+    }
+    toggleDropdown() {
+        this.isOpen = !this.isOpen;
+        if (this.isOpen)
+            this.openDropdown(this.popupContainer, this.selectElement.nativeElement);
+        else
+            this.onCancel();
+    }
+    openDropdown(template, origin) {
+        const positionsBottom = [
+            new ConnectionPositionPair({ originX: "start", originY: "bottom" }, { overlayX: "start", overlayY: "top" }, 0, 4),
+            new ConnectionPositionPair({ originX: "end", originY: "bottom" }, { overlayX: "end", overlayY: "top" }, 0, 4)
+        ];
+        const positionsTop = [
+            new ConnectionPositionPair({ originX: "start", originY: "top" }, { overlayX: "start", overlayY: "bottom" }, 0, -4),
+            new ConnectionPositionPair({ originX: "end", originY: "top" }, { overlayX: "end", overlayY: "bottom" }, 0, -4)
+        ];
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(origin)
+            .withPositions([
+            ...(this.dropdownListPosition === "Right" ? positionsBottom.reverse() : positionsBottom),
+            ...(this.dropdownListPosition === "Right" ? positionsTop.reverse() : positionsTop)
+        ])
+            .withPush(true);
+        const configs = new OverlayConfig({
+            hasBackdrop: true,
+            backdropClass: "cdk-overlay-transparent-backdrop",
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            positionStrategy,
+            width: origin.clientWidth
+        });
+        this.overlayRef = this.overlay.create(configs);
+        if (this.dropdownListWidth)
+            this.overlayRef.updateSize({ width: this.dropdownListWidth });
+        if (this.dropdownListHeight)
+            this.overlayRef.updateSize({ height: this.dropdownListHeight });
+        this.overlayRef.attach(new TemplatePortal(template, this.viewContainerRef));
+        this.overlayRef.backdropClick().subscribe(res => {
+            this.onCancel();
+        });
+    }
+    selectItem(item) {
+        this.onChange.emit(item);
+        this.toggleDropdown();
+    }
+    onCancel() {
+        this.isSearchInputFocused = false;
+        this.isOpen = false;
+        this.overlayRef?.detach();
+        this.searchInput = "";
+    }
+}
+DropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DropdownComponent, deps: [{ token: i0.ElementRef }, { token: i1.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
+DropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DropdownComponent, selector: "mis-dropdown", inputs: { data: "data", height: "height", width: "width", label: "label", dropdownListHeight: "dropdownListHeight", dropdownListWidth: "dropdownListWidth", dropdownListPosition: "dropdownListPosition", searchEnabled: "searchEnabled", selectedItem: "selectedItem", noDataMessage: "noDataMessage", multiLine: "multiLine", additionalInfoMessage: "additionalInfoMessage" }, outputs: { onChange: "onChange" }, viewQueries: [{ propertyName: "selectElement", first: true, predicate: ["select"], descendants: true }, { propertyName: "popupContainer", first: true, predicate: ["popupContainer"], descendants: true }], ngImport: i0, template: "<div\n  class=\"main-container\"\n  [ngStyle]=\"{\n    height: height.length > 0 ? height : '',\n    width: width.length > 0 ? width : ''\n  }\"\n>\n  <div\n    class=\"dropdown\"\n    #select\n    tabindex=\"0\"\n    (keyup.enter)=\"toggleDropdown()\"\n    (click)=\"toggleDropdown()\"\n    [ngStyle]=\"{ background: isOpen ? '#E6EBF7' : '' }\"\n  >\n    <div class=\"label\">\n      <p class=\"text\">\n        {{ multiLine ? selectedItem.label?.primaryText : selectedItem.label || label }}\n      </p>\n    </div>\n    <svg\n      class=\"handle\"\n      [ngStyle]=\"{ transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)' }\"\n      width=\"20\"\n      height=\"20\"\n      viewBox=\"0 0 20 20\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M13.825 7.15845L10 10.9751L6.175 7.15845L5 8.33345L10 13.3334L15 8.33345L13.825 7.15845Z\"\n        fill=\"#181F33\"\n      />\n    </svg>\n  </div>\n</div>\n<ng-template #popupContainer>\n  <div\n    class=\"popup-container\"\n    [ngStyle]=\"{\n      height: dropdownListHeight,\n      width: dropdownListWidth\n    }\"\n  >\n    <div *ngIf=\"searchEnabled\" class=\"search-container\">\n      <svg\n        *ngIf=\"!isSearchInputFocused\"\n        class=\"search-icon\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M4.21508 11.1456C4.21508 7.3179 7.33722 4.21165 11.1926 4.21165C15.048 4.21165 18.1702 7.3179 18.1702 11.1456C18.1702 12.6931 17.6599 14.1226 16.7972 15.2767L15.3685 16.7013C14.2044 17.5668 12.759 18.0796 11.1926 18.0796C7.33722 18.0796 4.21508 14.9734 4.21508 11.1456ZM15.9421 17.7835C14.6021 18.7329 12.9627 19.2913 11.1926 19.2913C6.66977 19.2913 3 15.6461 3 11.1456C3 6.64512 6.66977 3 11.1926 3C15.7155 3 19.3852 6.64512 19.3852 11.1456C19.3852 12.9371 18.8037 14.5931 17.8184 15.9375L19.8361 17.4048C20.6705 17.912 21.7554 18.6543 20.2454 20.215C18.7353 21.7756 18.0099 20.6663 17.4991 19.8364L15.9421 17.7835Z\"\n          fill=\"#6A737D\"\n        />\n      </svg>\n      <input\n        [ngModel]=\"searchInput\"\n        [ngStyle]=\"{\n          paddingLeft: isSearchInputFocused ? '12px' : '45px',\n          border: isSearchInputFocused ? '1px solid #0937B2' : '1px solid #e0e0e0',\n          paddingRight: isSearchInputFocused ? '45px' : '10px'\n        }\"\n        (ngModelChange)=\"searchInputOnChange($event)\"\n        [placeholder]=\"isSearchInputFocused ? '' : 'Search Keyword'\"\n        (focus)=\"searchInputFocused(true)\"\n        class=\"search-input\"\n      />\n      <svg\n        *ngIf=\"isSearchInputFocused\"\n        class=\"cancel-icon\"\n        (click)=\"searchInputCanceled($event)\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M8.87446 7.32144C8.44588 6.89285 7.751 6.89285 7.32242 7.32144C6.89383 7.75002 6.89383 8.4449 7.32242 8.87349L10.4488 11.9999L7.32357 15.1252C6.89498 15.5538 6.89498 16.2486 7.32357 16.6772C7.75215 17.1058 8.44703 17.1058 8.87561 16.6772L12.0009 13.552L15.1261 16.6772C15.5547 17.1058 16.2496 17.1058 16.6781 16.6772C17.1067 16.2486 17.1067 15.5537 16.6781 15.1251L13.5529 11.9999L16.6793 8.87354C17.1079 8.44496 17.1079 7.75008 16.6793 7.3215C16.2507 6.89291 15.5558 6.89291 15.1273 7.3215L12.0009 10.4479L8.87446 7.32144Z\"\n          fill=\"#6A737D\"\n        />\n      </svg>\n    </div>\n    <div class=\"items\">\n      <cdk-virtual-scroll-viewport autosize class=\"dropdown-viewport\">\n      <div\n        class=\"item\"\n        tabindex=\"0\"\n        [ngClass]=\"{ 'item-disabled': item.disabled }\"\n        (click)=\"item.disabled ? null : selectItem(item)\"\n        (keyup.enter)=\"item.disabled ? null : selectItem(item)\"\n        *cdkVirtualFor=\"let item of searchInput ? searchData : data\"\n      >\n        <div class=\"label\" [ngStyle]=\"{ width: item.icon ? '90%' : '100%', 'display': multiLine ? 'flex': 'inherit', 'flex-direction': multiLine ? 'column': 'inherit' }\">\n          <span class=\"primaryText\">{{ multiLine ? item.label?.primaryText : item.label }}</span>\n          <span class=\"secondaryText\" *ngIf=\"multiLine\"> {{ item.label?.secondaryText ? item.label?.secondaryText : additionalInfoMessage  }} </span>\n        </div>\n        <div class=\"icon-container\" *ngIf=\"item.icon\">\n          <img class=\"icon\" [src]=\"item.icon\" alt=\"no img\" />\n        </div>\n      </div>\n    </cdk-virtual-scroll-viewport>\n      <div class=\"noData\" *ngIf=\"(searchInput ? searchData : data).length === 0\">\n        {{ searchInput === \"\" ? noDataMessage : \"No results\" }}\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [".main-container{position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;height:32px;width:256px;font-family:Lato,sans-serif!important}.main-container .dropdown{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;height:inherit;border:1px solid #e0e0e0;border-radius:6px;background-color:#fff;cursor:pointer;display:flex;justify-content:space-between;align-items:center;width:100%;box-sizing:border-box;padding:0 12px}.main-container .dropdown:hover,.main-container .dropdown:focus-visible{background-color:#f5f7fc;outline:none}.main-container .dropdown .label{box-sizing:border-box;display:flex;justify-content:flex-start;align-items:center;width:calc(100% - 32px);font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.main-container .dropdown .label .text{margin:0!important;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.main-container .dropdown .label .count{background-color:#e0e0e0;border-radius:50%;padding:2px 7px;margin:0}.main-container .dropdown .handle{width:24px;height:24px;transition:.3s;position:absolute;right:12px;border-radius:50%;overflow:hidden}.popup-container{width:100%;max-height:340px;padding-bottom:0;border:1px solid #e0e0e0;border-radius:8px;background-color:#fff;box-shadow:0 12px 24px #0000001f;display:flex;flex-direction:column;overflow:hidden;justify-content:space-between}.popup-container::-webkit-scrollbar{width:0;height:0}.popup-container .search-container{position:relative;box-sizing:border-box;padding:8px}.popup-container .search-container .search-icon{position:absolute;width:24px;height:24px;top:50%;transform:translateY(-50%);left:18px;z-index:1}.popup-container .search-container .search-input{height:40px;width:100%;padding:12px;border:1px solid #e0e0e0;box-sizing:border-box;border-radius:8px;outline:none;caret-color:#0937b2;font-style:normal;font-weight:400;font-size:12px;line-height:18px;display:flex;align-items:center;letter-spacing:.2px;color:#181f33}.popup-container .search-container .cancel-icon{position:absolute;cursor:pointer;width:24px;height:24px;top:50%;transform:translateY(-50%);right:18px;z-index:1}.popup-container .items{padding:8px 0 8px 8px;overflow-y:scroll}.popup-container .items::-webkit-scrollbar{width:5px;height:0}.popup-container .items::-webkit-scrollbar-thumb{background:#9aa7b4;border-radius:10px}.popup-container .items .noData{display:flex;justify-content:center;align-items:center;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.popup-container .items .dropdown-viewport{height:200px}.popup-container .items .dropdown-viewport .item{cursor:pointer;display:flex;justify-content:flex-start;align-items:center;gap:10px;padding:8px 12px;border-radius:6px;height:auto;letter-spacing:.2px;color:#181f33}.popup-container .items .dropdown-viewport .item:hover,.popup-container .items .dropdown-viewport .item:focus-visible{background-color:#f5f7fc;outline:none}.popup-container .items .dropdown-viewport .item .label{width:100%;line-height:20px;font-size:14px;font-style:normal;font-weight:400;text-overflow:ellipsis;overflow:hidden}.popup-container .items .dropdown-viewport .item .label .primaryText{color:#181f33;font-family:Lato;font-size:14px;line-height:20px;letter-spacing:.2px}.popup-container .items .dropdown-viewport .item .label .secondaryText{color:#6a737d;font-family:Lato;font-size:14px;line-height:20px;letter-spacing:.2px}.popup-container .items .dropdown-viewport .item .icon-container{width:10%;display:flex;justify-content:flex-end}.popup-container .items .dropdown-viewport .item .icon-container .icon{width:20px;height:20px}.popup-container .items .item-disabled{cursor:not-allowed}.popup-container .items .item-disabled:hover,.popup-container .items .item-disabled:focus-visible{background-color:transparent;outline:none}.popup-container .items .item-disabled .label{color:#929dab;-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i4.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i5.CdkAutoSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[autosize]", inputs: ["minBufferPx", "maxBufferPx"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DropdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mis-dropdown", template: "<div\n  class=\"main-container\"\n  [ngStyle]=\"{\n    height: height.length > 0 ? height : '',\n    width: width.length > 0 ? width : ''\n  }\"\n>\n  <div\n    class=\"dropdown\"\n    #select\n    tabindex=\"0\"\n    (keyup.enter)=\"toggleDropdown()\"\n    (click)=\"toggleDropdown()\"\n    [ngStyle]=\"{ background: isOpen ? '#E6EBF7' : '' }\"\n  >\n    <div class=\"label\">\n      <p class=\"text\">\n        {{ multiLine ? selectedItem.label?.primaryText : selectedItem.label || label }}\n      </p>\n    </div>\n    <svg\n      class=\"handle\"\n      [ngStyle]=\"{ transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)' }\"\n      width=\"20\"\n      height=\"20\"\n      viewBox=\"0 0 20 20\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M13.825 7.15845L10 10.9751L6.175 7.15845L5 8.33345L10 13.3334L15 8.33345L13.825 7.15845Z\"\n        fill=\"#181F33\"\n      />\n    </svg>\n  </div>\n</div>\n<ng-template #popupContainer>\n  <div\n    class=\"popup-container\"\n    [ngStyle]=\"{\n      height: dropdownListHeight,\n      width: dropdownListWidth\n    }\"\n  >\n    <div *ngIf=\"searchEnabled\" class=\"search-container\">\n      <svg\n        *ngIf=\"!isSearchInputFocused\"\n        class=\"search-icon\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M4.21508 11.1456C4.21508 7.3179 7.33722 4.21165 11.1926 4.21165C15.048 4.21165 18.1702 7.3179 18.1702 11.1456C18.1702 12.6931 17.6599 14.1226 16.7972 15.2767L15.3685 16.7013C14.2044 17.5668 12.759 18.0796 11.1926 18.0796C7.33722 18.0796 4.21508 14.9734 4.21508 11.1456ZM15.9421 17.7835C14.6021 18.7329 12.9627 19.2913 11.1926 19.2913C6.66977 19.2913 3 15.6461 3 11.1456C3 6.64512 6.66977 3 11.1926 3C15.7155 3 19.3852 6.64512 19.3852 11.1456C19.3852 12.9371 18.8037 14.5931 17.8184 15.9375L19.8361 17.4048C20.6705 17.912 21.7554 18.6543 20.2454 20.215C18.7353 21.7756 18.0099 20.6663 17.4991 19.8364L15.9421 17.7835Z\"\n          fill=\"#6A737D\"\n        />\n      </svg>\n      <input\n        [ngModel]=\"searchInput\"\n        [ngStyle]=\"{\n          paddingLeft: isSearchInputFocused ? '12px' : '45px',\n          border: isSearchInputFocused ? '1px solid #0937B2' : '1px solid #e0e0e0',\n          paddingRight: isSearchInputFocused ? '45px' : '10px'\n        }\"\n        (ngModelChange)=\"searchInputOnChange($event)\"\n        [placeholder]=\"isSearchInputFocused ? '' : 'Search Keyword'\"\n        (focus)=\"searchInputFocused(true)\"\n        class=\"search-input\"\n      />\n      <svg\n        *ngIf=\"isSearchInputFocused\"\n        class=\"cancel-icon\"\n        (click)=\"searchInputCanceled($event)\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M8.87446 7.32144C8.44588 6.89285 7.751 6.89285 7.32242 7.32144C6.89383 7.75002 6.89383 8.4449 7.32242 8.87349L10.4488 11.9999L7.32357 15.1252C6.89498 15.5538 6.89498 16.2486 7.32357 16.6772C7.75215 17.1058 8.44703 17.1058 8.87561 16.6772L12.0009 13.552L15.1261 16.6772C15.5547 17.1058 16.2496 17.1058 16.6781 16.6772C17.1067 16.2486 17.1067 15.5537 16.6781 15.1251L13.5529 11.9999L16.6793 8.87354C17.1079 8.44496 17.1079 7.75008 16.6793 7.3215C16.2507 6.89291 15.5558 6.89291 15.1273 7.3215L12.0009 10.4479L8.87446 7.32144Z\"\n          fill=\"#6A737D\"\n        />\n      </svg>\n    </div>\n    <div class=\"items\">\n      <cdk-virtual-scroll-viewport autosize class=\"dropdown-viewport\">\n      <div\n        class=\"item\"\n        tabindex=\"0\"\n        [ngClass]=\"{ 'item-disabled': item.disabled }\"\n        (click)=\"item.disabled ? null : selectItem(item)\"\n        (keyup.enter)=\"item.disabled ? null : selectItem(item)\"\n        *cdkVirtualFor=\"let item of searchInput ? searchData : data\"\n      >\n        <div class=\"label\" [ngStyle]=\"{ width: item.icon ? '90%' : '100%', 'display': multiLine ? 'flex': 'inherit', 'flex-direction': multiLine ? 'column': 'inherit' }\">\n          <span class=\"primaryText\">{{ multiLine ? item.label?.primaryText : item.label }}</span>\n          <span class=\"secondaryText\" *ngIf=\"multiLine\"> {{ item.label?.secondaryText ? item.label?.secondaryText : additionalInfoMessage  }} </span>\n        </div>\n        <div class=\"icon-container\" *ngIf=\"item.icon\">\n          <img class=\"icon\" [src]=\"item.icon\" alt=\"no img\" />\n        </div>\n      </div>\n    </cdk-virtual-scroll-viewport>\n      <div class=\"noData\" *ngIf=\"(searchInput ? searchData : data).length === 0\">\n        {{ searchInput === \"\" ? noDataMessage : \"No results\" }}\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [".main-container{position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;height:32px;width:256px;font-family:Lato,sans-serif!important}.main-container .dropdown{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;height:inherit;border:1px solid #e0e0e0;border-radius:6px;background-color:#fff;cursor:pointer;display:flex;justify-content:space-between;align-items:center;width:100%;box-sizing:border-box;padding:0 12px}.main-container .dropdown:hover,.main-container .dropdown:focus-visible{background-color:#f5f7fc;outline:none}.main-container .dropdown .label{box-sizing:border-box;display:flex;justify-content:flex-start;align-items:center;width:calc(100% - 32px);font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.main-container .dropdown .label .text{margin:0!important;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.main-container .dropdown .label .count{background-color:#e0e0e0;border-radius:50%;padding:2px 7px;margin:0}.main-container .dropdown .handle{width:24px;height:24px;transition:.3s;position:absolute;right:12px;border-radius:50%;overflow:hidden}.popup-container{width:100%;max-height:340px;padding-bottom:0;border:1px solid #e0e0e0;border-radius:8px;background-color:#fff;box-shadow:0 12px 24px #0000001f;display:flex;flex-direction:column;overflow:hidden;justify-content:space-between}.popup-container::-webkit-scrollbar{width:0;height:0}.popup-container .search-container{position:relative;box-sizing:border-box;padding:8px}.popup-container .search-container .search-icon{position:absolute;width:24px;height:24px;top:50%;transform:translateY(-50%);left:18px;z-index:1}.popup-container .search-container .search-input{height:40px;width:100%;padding:12px;border:1px solid #e0e0e0;box-sizing:border-box;border-radius:8px;outline:none;caret-color:#0937b2;font-style:normal;font-weight:400;font-size:12px;line-height:18px;display:flex;align-items:center;letter-spacing:.2px;color:#181f33}.popup-container .search-container .cancel-icon{position:absolute;cursor:pointer;width:24px;height:24px;top:50%;transform:translateY(-50%);right:18px;z-index:1}.popup-container .items{padding:8px 0 8px 8px;overflow-y:scroll}.popup-container .items::-webkit-scrollbar{width:5px;height:0}.popup-container .items::-webkit-scrollbar-thumb{background:#9aa7b4;border-radius:10px}.popup-container .items .noData{display:flex;justify-content:center;align-items:center;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.popup-container .items .dropdown-viewport{height:200px}.popup-container .items .dropdown-viewport .item{cursor:pointer;display:flex;justify-content:flex-start;align-items:center;gap:10px;padding:8px 12px;border-radius:6px;height:auto;letter-spacing:.2px;color:#181f33}.popup-container .items .dropdown-viewport .item:hover,.popup-container .items .dropdown-viewport .item:focus-visible{background-color:#f5f7fc;outline:none}.popup-container .items .dropdown-viewport .item .label{width:100%;line-height:20px;font-size:14px;font-style:normal;font-weight:400;text-overflow:ellipsis;overflow:hidden}.popup-container .items .dropdown-viewport .item .label .primaryText{color:#181f33;font-family:Lato;font-size:14px;line-height:20px;letter-spacing:.2px}.popup-container .items .dropdown-viewport .item .label .secondaryText{color:#6a737d;font-family:Lato;font-size:14px;line-height:20px;letter-spacing:.2px}.popup-container .items .dropdown-viewport .item .icon-container{width:10%;display:flex;justify-content:flex-end}.popup-container .items .dropdown-viewport .item .icon-container .icon{width:20px;height:20px}.popup-container .items .item-disabled{cursor:not-allowed}.popup-container .items .item-disabled:hover,.popup-container .items .item-disabled:focus-visible{background-color:transparent;outline:none}.popup-container .items .item-disabled .label{color:#929dab;-webkit-user-select:none;user-select:none}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.Overlay }, { type: i0.ViewContainerRef }]; }, propDecorators: { data: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], dropdownListHeight: [{
+                type: Input
+            }], dropdownListWidth: [{
+                type: Input
+            }], dropdownListPosition: [{
+                type: Input
+            }], searchEnabled: [{
+                type: Input
+            }], selectedItem: [{
+                type: Input
+            }], noDataMessage: [{
+                type: Input
+            }], multiLine: [{
+                type: Input
+            }], additionalInfoMessage: [{
+                type: Input
+            }], onChange: [{
+                type: Output
+            }], selectElement: [{
+                type: ViewChild,
+                args: ["select", { static: false }]
+            }], popupContainer: [{
+                type: ViewChild,
+                args: ["popupContainer", { static: false }]
+            }] } });
+
+class DropdownModule {
+    static forRoot() {
+        return { ngModule: DropdownModule, providers: [] };
+    }
+}
+DropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: DropdownModule, declarations: [DropdownComponent], imports: [CommonModule, FormsModule, OverlayModule, ScrollingModule], exports: [DropdownComponent] });
+DropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DropdownModule, imports: [CommonModule, FormsModule, OverlayModule, ScrollingModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DropdownModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [DropdownComponent],
+                    imports: [CommonModule, FormsModule, OverlayModule, ScrollingModule],
+                    exports: [DropdownComponent]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DropdownComponent, DropdownModule };
+//# sourceMappingURL=mis-crystal-design-system-dropdown.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mis-crystal-design-system-dropdown.mjs","sources":["../../../projects/mis-components/dropdown/dropdown.component.ts","../../../projects/mis-components/dropdown/dropdown.component.html","../../../projects/mis-components/dropdown/dropdown.module.ts","../../../projects/mis-components/dropdown/mis-crystal-design-system-dropdown.ts"],"sourcesContent":["import { ConnectionPositionPair, Overlay, OverlayConfig, OverlayRef } from \"@angular/cdk/overlay\";\nimport { TemplatePortal } from \"@angular/cdk/portal\";\nimport { Component, ElementRef, EventEmitter, Input, OnInit, Output, TemplateRef, ViewChild, ViewContainerRef } from \"@angular/core\";\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  @Input() multiLine: boolean = false;\n  @Input() additionalInfoMessage : string;\n\n  @Output() onChange: EventEmitter<any> = new EventEmitter();\n\n  @ViewChild(\"select\", { static: false }) selectElement: ElementRef;\n  @ViewChild(\"popupContainer\", { static: false }) popupContainer: TemplateRef<Element>;\n  private overlayRef: OverlayRef;\n\n  constructor(private eRef: ElementRef, private overlay: Overlay, private viewContainerRef: ViewContainerRef) {}\n  ngOnInit() {\n  }\n\n  filterByValue(array, string: string) {\n    return array.filter(o => o.label.toLowerCase().includes(string.toLowerCase()));\n  }\n\n  filterByPrimaryText(array, string: string) {\n    return array.filter(o => o.label.primaryText.toLowerCase().includes(string.toLowerCase()));\n  }\n  searchInputOnChange(newValue) {\n    this.searchInput = newValue;\n    if (newValue) {\n      this.searchData = this.multiLine ? this.filterByPrimaryText(this.data, newValue) : this.filterByValue(this.data, newValue);\n    } else {\n      this.searchData = [];\n      this.searchInput = \"\";\n    }\n  }\n  searchInputFocused(isFocused: boolean) {\n    this.isSearchInputFocused = isFocused;\n  }\n  searchInputCanceled(event) {\n    event.stopPropagation();\n    this.searchInput = \"\";\n    this.isSearchInputFocused = false;\n  }\n  toggleDropdown() {\n    this.isOpen = !this.isOpen;\n    if (this.isOpen) this.openDropdown(this.popupContainer, this.selectElement.nativeElement);\n    else this.onCancel();\n  }\n  private openDropdown(template: TemplateRef<Element>, origin: HTMLElement): void {\n    const positionsBottom = [\n      new ConnectionPositionPair({ originX: \"start\", originY: \"bottom\" }, { overlayX: \"start\", overlayY: \"top\" }, 0, 4),\n      new ConnectionPositionPair({ originX: \"end\", originY: \"bottom\" }, { overlayX: \"end\", overlayY: \"top\" }, 0, 4)\n    ];\n    const positionsTop = [\n      new ConnectionPositionPair({ originX: \"start\", originY: \"top\" }, { overlayX: \"start\", overlayY: \"bottom\" }, 0, -4),\n      new ConnectionPositionPair({ originX: \"end\", originY: \"top\" }, { overlayX: \"end\", overlayY: \"bottom\" }, 0, -4)\n    ];\n    const positionStrategy = this.overlay\n      .position()\n      .flexibleConnectedTo(origin)\n      .withPositions([\n        ...(this.dropdownListPosition === \"Right\" ? positionsBottom.reverse() : positionsBottom),\n        ...(this.dropdownListPosition === \"Right\" ? positionsTop.reverse() : positionsTop)\n      ])\n      .withPush(true);\n    const configs = new OverlayConfig({\n      hasBackdrop: true,\n      backdropClass: \"cdk-overlay-transparent-backdrop\",\n      scrollStrategy: this.overlay.scrollStrategies.reposition(),\n      positionStrategy,\n      width: origin.clientWidth\n    });\n    this.overlayRef = this.overlay.create(configs);\n    if (this.dropdownListWidth) this.overlayRef.updateSize({ width: this.dropdownListWidth });\n    if (this.dropdownListHeight) this.overlayRef.updateSize({ height: this.dropdownListHeight });\n    this.overlayRef.attach(new TemplatePortal(template, this.viewContainerRef));\n    this.overlayRef.backdropClick().subscribe(res => {\n      this.onCancel();\n    });\n  }\n  selectItem(item) {\n    this.onChange.emit(item);\n    this.toggleDropdown();\n  }\n  onCancel() {\n    this.isSearchInputFocused = false;\n    this.isOpen = false;\n    this.overlayRef?.detach();\n    this.searchInput = \"\";\n  }\n}\nexport interface DropdownItem {\n  label: any ;\n  value: string;\n  icon?: string;\n  disabled?: boolean;\n}\nexport interface ActionItemLabel {\n  primaryText ?: string;\n  secondaryText ?: string;\n}\n","<div\n  class=\"main-container\"\n  [ngStyle]=\"{\n    height: height.length > 0 ? height : '',\n    width: width.length > 0 ? width : ''\n  }\"\n>\n  <div\n    class=\"dropdown\"\n    #select\n    tabindex=\"0\"\n    (keyup.enter)=\"toggleDropdown()\"\n    (click)=\"toggleDropdown()\"\n    [ngStyle]=\"{ background: isOpen ? '#E6EBF7' : '' }\"\n  >\n    <div class=\"label\">\n      <p class=\"text\">\n        {{ multiLine ? selectedItem.label?.primaryText : selectedItem.label || label }}\n      </p>\n    </div>\n    <svg\n      class=\"handle\"\n      [ngStyle]=\"{ transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)' }\"\n      width=\"20\"\n      height=\"20\"\n      viewBox=\"0 0 20 20\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M13.825 7.15845L10 10.9751L6.175 7.15845L5 8.33345L10 13.3334L15 8.33345L13.825 7.15845Z\"\n        fill=\"#181F33\"\n      />\n    </svg>\n  </div>\n</div>\n<ng-template #popupContainer>\n  <div\n    class=\"popup-container\"\n    [ngStyle]=\"{\n      height: dropdownListHeight,\n      width: dropdownListWidth\n    }\"\n  >\n    <div *ngIf=\"searchEnabled\" class=\"search-container\">\n      <svg\n        *ngIf=\"!isSearchInputFocused\"\n        class=\"search-icon\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M4.21508 11.1456C4.21508 7.3179 7.33722 4.21165 11.1926 4.21165C15.048 4.21165 18.1702 7.3179 18.1702 11.1456C18.1702 12.6931 17.6599 14.1226 16.7972 15.2767L15.3685 16.7013C14.2044 17.5668 12.759 18.0796 11.1926 18.0796C7.33722 18.0796 4.21508 14.9734 4.21508 11.1456ZM15.9421 17.7835C14.6021 18.7329 12.9627 19.2913 11.1926 19.2913C6.66977 19.2913 3 15.6461 3 11.1456C3 6.64512 6.66977 3 11.1926 3C15.7155 3 19.3852 6.64512 19.3852 11.1456C19.3852 12.9371 18.8037 14.5931 17.8184 15.9375L19.8361 17.4048C20.6705 17.912 21.7554 18.6543 20.2454 20.215C18.7353 21.7756 18.0099 20.6663 17.4991 19.8364L15.9421 17.7835Z\"\n          fill=\"#6A737D\"\n        />\n      </svg>\n      <input\n        [ngModel]=\"searchInput\"\n        [ngStyle]=\"{\n          paddingLeft: isSearchInputFocused ? '12px' : '45px',\n          border: isSearchInputFocused ? '1px solid #0937B2' : '1px solid #e0e0e0',\n          paddingRight: isSearchInputFocused ? '45px' : '10px'\n        }\"\n        (ngModelChange)=\"searchInputOnChange($event)\"\n        [placeholder]=\"isSearchInputFocused ? '' : 'Search Keyword'\"\n        (focus)=\"searchInputFocused(true)\"\n        class=\"search-input\"\n      />\n      <svg\n        *ngIf=\"isSearchInputFocused\"\n        class=\"cancel-icon\"\n        (click)=\"searchInputCanceled($event)\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M8.87446 7.32144C8.44588 6.89285 7.751 6.89285 7.32242 7.32144C6.89383 7.75002 6.89383 8.4449 7.32242 8.87349L10.4488 11.9999L7.32357 15.1252C6.89498 15.5538 6.89498 16.2486 7.32357 16.6772C7.75215 17.1058 8.44703 17.1058 8.87561 16.6772L12.0009 13.552L15.1261 16.6772C15.5547 17.1058 16.2496 17.1058 16.6781 16.6772C17.1067 16.2486 17.1067 15.5537 16.6781 15.1251L13.5529 11.9999L16.6793 8.87354C17.1079 8.44496 17.1079 7.75008 16.6793 7.3215C16.2507 6.89291 15.5558 6.89291 15.1273 7.3215L12.0009 10.4479L8.87446 7.32144Z\"\n          fill=\"#6A737D\"\n        />\n      </svg>\n    </div>\n    <div class=\"items\">\n      <cdk-virtual-scroll-viewport autosize class=\"dropdown-viewport\">\n      <div\n        class=\"item\"\n        tabindex=\"0\"\n        [ngClass]=\"{ 'item-disabled': item.disabled }\"\n        (click)=\"item.disabled ? null : selectItem(item)\"\n        (keyup.enter)=\"item.disabled ? null : selectItem(item)\"\n        *cdkVirtualFor=\"let item of searchInput ? searchData : data\"\n      >\n        <div class=\"label\" [ngStyle]=\"{ width: item.icon ? '90%' : '100%', 'display': multiLine ? 'flex': 'inherit', 'flex-direction': multiLine ? 'column': 'inherit' }\">\n          <span class=\"primaryText\">{{ multiLine ? item.label?.primaryText : item.label }}</span>\n          <span class=\"secondaryText\" *ngIf=\"multiLine\"> {{ item.label?.secondaryText ? item.label?.secondaryText : additionalInfoMessage  }} </span>\n        </div>\n        <div class=\"icon-container\" *ngIf=\"item.icon\">\n          <img class=\"icon\" [src]=\"item.icon\" alt=\"no img\" />\n        </div>\n      </div>\n    </cdk-virtual-scroll-viewport>\n      <div class=\"noData\" *ngIf=\"(searchInput ? searchData : data).length === 0\">\n        {{ searchInput === \"\" ? noDataMessage : \"No results\" }}\n      </div>\n    </div>\n  </div>\n</ng-template>\n","import { CommonModule } from \"@angular/common\";\nimport { FormsModule } from \"@angular/forms\";\nimport { NgModule, ModuleWithProviders } from \"@angular/core\";\nimport { DropdownComponent } from \"./dropdown.component\";\nimport { OverlayModule } from \"@angular/cdk/overlay\";\nimport { ScrollingModule } from \"@angular/cdk-experimental/scrolling\";\n\n@NgModule({\n  declarations: [DropdownComponent],\n  imports: [CommonModule, FormsModule, OverlayModule, ScrollingModule],\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":[],"mappings":"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"}

package/fesm2020/mis-crystal-design-system-fab.mjs

@@ -0,0 +1,107 @@
+import * as i0 from '@angular/core';
+import { Component, Input, HostListener, NgModule } from '@angular/core';
+import { trigger, transition, style, animate, state } from '@angular/animations';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+
+/** @format */
+class FabComponent {
+    constructor(eRef) {
+        this.eRef = eRef;
+        this.show = false;
+        this.options = {};
+        this.items = [];
+        this.isOpen = false;
+    }
+    clickout(event) {
+        if (!this.eRef.nativeElement.contains(event.target)) {
+            this.closeFab();
+        }
+    }
+    ngOnInit() {
+        this.options = {
+            size: 56,
+            backgroundColorClosed: "#0937B2",
+            backgroundColorOpened: "#3a5fc1",
+            ...this.options
+        };
+    }
+    ngOnDestroy() { }
+    clickItem(item) {
+        this.closeFab();
+        item.click();
+    }
+    closeFab() {
+        this.isOpen = false;
+    }
+    toogleFab() {
+        this.isOpen = !this.isOpen;
+    }
+}
+FabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FabComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+FabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: FabComponent, selector: "mis-fab", inputs: { show: "show", options: "options", items: "items" }, host: { listeners: { "document:click": "clickout($event)" } }, ngImport: i0, 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", 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;cursor:pointer;border-radius:50%;display:flex;justify-content:center;align-items:center}.fab-wrapper .fab-container{border-radius:50%;cursor:pointer;display:flex;justify-content:center;align-items:center;width:56px;height:56px}.add-img{height:24px;width:24px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], animations: [
+        trigger("slideUpFab", [
+            transition(":enter", [
+                style({ transform: "translateY(50px)", opacity: 0 }),
+                animate("300ms ease-out", style({ transform: "translateY(0px)", opacity: 1 }))
+            ]),
+            transition(":leave", [animate("200ms ease-out", style({ transform: "translateY(70px)", opacity: 0 }))])
+        ]),
+        trigger("rotateButton", [
+            state("default", style({ transform: "rotate(0)" })),
+            state("rotated", style({ transform: "rotate(45deg)" })),
+            transition("rotated => default", animate("300ms ease-out")),
+            transition("default => rotated", animate("200ms ease-in"))
+        ])
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FabComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mis-fab", animations: [
+                        trigger("slideUpFab", [
+                            transition(":enter", [
+                                style({ transform: "translateY(50px)", opacity: 0 }),
+                                animate("300ms ease-out", style({ transform: "translateY(0px)", opacity: 1 }))
+                            ]),
+                            transition(":leave", [animate("200ms ease-out", style({ transform: "translateY(70px)", opacity: 0 }))])
+                        ]),
+                        trigger("rotateButton", [
+                            state("default", style({ transform: "rotate(0)" })),
+                            state("rotated", style({ transform: "rotate(45deg)" })),
+                            transition("rotated => default", animate("300ms ease-out")),
+                            transition("default => rotated", animate("200ms ease-in"))
+                        ])
+                    ], 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", 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;cursor:pointer;border-radius:50%;display:flex;justify-content:center;align-items:center}.fab-wrapper .fab-container{border-radius:50%;cursor:pointer;display:flex;justify-content:center;align-items:center;width:56px;height:56px}.add-img{height:24px;width:24px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { show: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }], clickout: [{
+                type: HostListener,
+                args: ["document:click", ["$event"]]
+            }] } });
+
+class FabModule {
+    static forRoot() {
+        return { ngModule: FabModule, providers: [] };
+    }
+}
+FabModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FabModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FabModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: FabModule, declarations: [FabComponent], imports: [CommonModule], exports: [FabComponent] });
+FabModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FabModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FabModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [FabComponent],
+                    imports: [CommonModule],
+                    exports: [FabComponent]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FabComponent, FabModule };
+//# sourceMappingURL=mis-crystal-design-system-fab.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mis-crystal-design-system-fab.mjs","sources":["../../../projects/mis-components/fab/fab.component.ts","../../../projects/mis-components/fab/fab.component.html","../../../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\", [animate(\"200ms ease-out\", style({ transform: \"translateY(70px)\", opacity: 0 }))])\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  @Input() show: boolean = false;\n  @Input() options: FabOptions = {};\n  @Input() items: FabItems = [];\n\n  isOpen: boolean = false;\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  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","<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","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":[],"mappings":"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"}