mis-crystal-design-system 2.0.0 → 2.1.3

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

@@ -0,0 +1,156 @@
+import { OverlayConfig, Overlay, OverlayModule } from '@angular/cdk/overlay';
+import { ComponentPortal, PortalInjector, PortalModule } from '@angular/cdk/portal';
+import { Component, ComponentFactoryResolver, ViewChild, ViewContainerRef, InjectionToken, ɵɵdefineInjectable, ɵɵinject, INJECTOR, Injectable, Injector, 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.decorators = [
+    { type: 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: [
+                    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%)" }))]),
+                    ]),
+                ],
+                styles: [".mis-drawer-body{display:block;width:100%;height:100%}"]
+            },] }
+];
+DrawerBodyComponent.ctorParameters = () => [
+    { type: ComponentFactoryResolver }
+];
+DrawerBodyComponent.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() {
+        var _a;
+        (_a = this.drawerRef) === null || _a === void 0 ? void 0 : _a.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.ɵprov = ɵɵdefineInjectable({ factory: function DrawerService_Factory() { return new DrawerService(ɵɵinject(Overlay), ɵɵinject(INJECTOR)); }, token: DrawerService, providedIn: "root" });
+DrawerService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: "root",
+            },] }
+];
+DrawerService.ctorParameters = () => [
+    { type: Overlay },
+    { type: Injector }
+];
+
+class DrawerModule {
+    static forRoot() {
+        return {
+            ngModule: DrawerModule,
+            providers: [DrawerService],
+        };
+    }
+    static forChild() {
+        return {
+            ngModule: DrawerModule,
+            providers: [DrawerService],
+        };
+    }
+}
+DrawerModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [DrawerBodyComponent],
+                imports: [CommonModule, OverlayModule, PortalModule],
+                entryComponents: [DrawerBodyComponent],
+            },] }
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DRAWER_DATA_VAR, DrawerModule, DrawerRef, DrawerService, DrawerBodyComponent as ɵa };
+//# sourceMappingURL=mis-crystal-design-system-drawer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mis-crystal-design-system-drawer.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":[],"mappings":"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"}

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

@@ -0,0 +1,108 @@
+import { EventEmitter, Component, ElementRef, Input, Output, HostListener, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+class DropdownComponent {
+    constructor(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 EventEmitter();
+    }
+    ngOnInit() { }
+    clickout(event) {
+        const isClickedOutside = !this.eRef.nativeElement.contains(event.target);
+        if (isClickedOutside) {
+            this.onCancel();
+        }
+    }
+    filterByValue(array, string) {
+        return array.filter(o => o.label.toLowerCase().includes(string.toLowerCase()));
+    }
+    searchInputOnChange(newValue) {
+        this.searchInput = newValue;
+        if (newValue) {
+            this.searchData = 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;
+    }
+    selectItem(item) {
+        this.onChange.emit(item);
+        this.toggleDropdown();
+    }
+    onCancel() {
+        this.isSearchInputFocused = false;
+        this.isOpen = false;
+        this.searchInput = '';
+    }
+}
+DropdownComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'mis-dropdown',
+                template: "<div class=\"main-container\"\n     [ngStyle]=\"{\n        'height': height.length > 0? height: '',\n        'width': width.length > 0? width: ''\n     }\"\n>\n    <div class=\"dropdown\" (click)=\"toggleDropdown()\" [ngStyle]=\"{'background': isOpen ? '#E6EBF7': ''}\">\n        <div class=\"label\">\n            <p class=\"text\">\n                {{ selectedItem.label || label }}\n            </p>\n        </div>\n        <svg class=\"handle\" [ngStyle]=\"{ transform: isOpen ? 'rotate(180deg)': 'rotate(0deg)' }\" width=\"20\" height=\"20\"\n             viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                  d=\"M13.825 7.15845L10 10.9751L6.175 7.15845L5 8.33345L10 13.3334L15 8.33345L13.825 7.15845Z\" fill=\"#181F33\" />\n        </svg>\n    </div>\n    <div style=\"flex-basis: 0;\"></div>\n    <div style=\"width: 100%; position: relative;\">\n        <div *ngIf=\"isOpen\" class=\"popup-container\"\n             [ngStyle]=\"{\n                'height': dropdownListHeight,\n                'width': dropdownListWidth\n                }\"\n             [ngClass]=\"{\n                'position-left': dropdownListPosition === 'Left',\n                'position-right': dropdownListPosition === 'Right'\n             }\"\n        >\n            <div *ngIf=\"searchEnabled\" class=\"search-container\">\n                <svg *ngIf=\"!isSearchInputFocused\" class=\"search-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n                     xmlns=\"http://www.w3.org/2000/svg\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                          d=\"M4.21508 11.1456C4.21508 7.3179 7.33722 4.21165 11.1926 4.21165C15.048 4.21165 18.1702 7.3179 18.1702 11.1456C18.1702 12.6931 17.6599 14.1226 16.7972 15.2767L15.3685 16.7013C14.2044 17.5668 12.759 18.0796 11.1926 18.0796C7.33722 18.0796 4.21508 14.9734 4.21508 11.1456ZM15.9421 17.7835C14.6021 18.7329 12.9627 19.2913 11.1926 19.2913C6.66977 19.2913 3 15.6461 3 11.1456C3 6.64512 6.66977 3 11.1926 3C15.7155 3 19.3852 6.64512 19.3852 11.1456C19.3852 12.9371 18.8037 14.5931 17.8184 15.9375L19.8361 17.4048C20.6705 17.912 21.7554 18.6543 20.2454 20.215C18.7353 21.7756 18.0099 20.6663 17.4991 19.8364L15.9421 17.7835Z\"\n                          fill=\"#6A737D\" />\n                </svg>\n                <input\n                        [ngModel]=\"searchInput\"\n                        [ngStyle]=\"{ paddingLeft: isSearchInputFocused ? '12px' : '45px', border:isSearchInputFocused? '1px solid #0937B2':'1px solid #e0e0e0', paddingRight: isSearchInputFocused ? '45px' : '10px' }\"\n                        (ngModelChange)=\"searchInputOnChange($event)\"\n                        [placeholder]=\"isSearchInputFocused ? '' : 'Search Keyword'\"\n                        (focus)=\"searchInputFocused(true)\"\n                        class=\"search-input\"\n                />\n                <svg *ngIf=\"isSearchInputFocused\" class=\"cancel-icon\" (click)=\"searchInputCanceled($event)\" width=\"24\" height=\"24\"\n                     viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                          d=\"M8.87446 7.32144C8.44588 6.89285 7.751 6.89285 7.32242 7.32144C6.89383 7.75002 6.89383 8.4449 7.32242 8.87349L10.4488 11.9999L7.32357 15.1252C6.89498 15.5538 6.89498 16.2486 7.32357 16.6772C7.75215 17.1058 8.44703 17.1058 8.87561 16.6772L12.0009 13.552L15.1261 16.6772C15.5547 17.1058 16.2496 17.1058 16.6781 16.6772C17.1067 16.2486 17.1067 15.5537 16.6781 15.1251L13.5529 11.9999L16.6793 8.87354C17.1079 8.44496 17.1079 7.75008 16.6793 7.3215C16.2507 6.89291 15.5558 6.89291 15.1273 7.3215L12.0009 10.4479L8.87446 7.32144Z\"\n                          fill=\"#6A737D\" />\n                </svg>\n            </div>\n            <div class=\"items\">\n                <div class=\"item\" (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 = () => [
+    { type: ElementRef }
+];
+DropdownComponent.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 }],
+    onChange: [{ type: Output }],
+    clickout: [{ type: HostListener, args: ['document:click', ['$event'],] }]
+};
+
+class DropdownModule {
+    static forRoot() {
+        return { ngModule: DropdownModule, providers: [] };
+    }
+}
+DropdownModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [DropdownComponent],
+                imports: [CommonModule, FormsModule],
+                exports: [DropdownComponent]
+            },] }
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DropdownComponent, DropdownModule };
+//# sourceMappingURL=mis-crystal-design-system-dropdown.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mis-crystal-design-system-dropdown.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":[],"mappings":"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"}

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

@@ -0,0 +1,87 @@
+import { Component, ElementRef, Input, HostListener, NgModule } from '@angular/core';
+import { trigger, transition, style, animate, state } from '@angular/animations';
+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 = Object.assign({ 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.decorators = [
+    { type: 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: [
+                    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'))
+                    ]),
+                ],
+                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 = () => [
+    { type: ElementRef }
+];
+FabComponent.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.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.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mis-crystal-design-system-fab.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":[],"mappings":";;;;AAAA;MA2Ca,YAAY;IASvB,YAAoB,IAAgB;QAAhB,SAAI,GAAJ,IAAI,CAAY;QAP3B,SAAI,GAAY,KAAK,CAAC;QACtB,YAAO,GAAe,EAAE,CAAC;QACzB,UAAK,GAAa,EAAE,CAAA;QAE7B,WAAM,GAAY,KAAK,CAAC;KAGiB;IAGzC,QAAQ,CAAC,KAAK;QACZ,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE;YACnD,IAAI,CAAC,QAAQ,EAAE,CAAA;SAChB;KACF;IAED,QAAQ;QACN,IAAI,CAAC,OAAO,mBACV,IAAI,EAAE,EAAE,EACR,qBAAqB,EAAE,SAAS,EAChC,qBAAqB,EAAE,SAAS,IAC7B,IAAI,CAAC,OAAO,CAChB,CAAA;KACF;IAED,WAAW;KACV;IAED,SAAS,CAAC,IAAa;QACrB,IAAI,CAAC,QAAQ,EAAE,CAAC;QAChB,IAAI,CAAC,KAAK,EAAE,CAAC;KACd;IAED,QAAQ;QACN,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;KACrB;IAED,SAAS;QACP,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;KAC5B;;;YA/DF,SAAS,SAAC;gBACT,QAAQ,EAAE,SAAS;gBACnB,ygDAAmC;gBAEnC,UAAU,EAAE;oBACV,OAAO,CAAC,YAAY,EAAE;wBACpB,UAAU,CAAC,QAAQ,EAAE;4BACnB,KAAK,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;4BACpD,OAAO,CAAC,gBAAgB,EAAE,KAAK,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC;yBAC/E,CAAC;wBACF,UAAU,CAAC,QAAQ,EAAE;4BACnB,OAAO,CAAC,gBAAgB,EAAE,KAAK,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC;yBAChF,CAAC;qBACH,CAAC;oBACF,OAAO,CAAC,cAAc,EAAE;wBACtB,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC,CAAC;wBACnD,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC,CAAC;wBACvD,UAAU,CAAC,oBAAoB,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;wBAC3D,UAAU,CAAC,oBAAoB,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;qBAC3D,CAAC;iBACH;;aACF;;;YAxCmB,UAAU;;;mBA2C3B,KAAK;sBACL,KAAK;oBACL,KAAK;uBAOL,YAAY,SAAC,gBAAgB,EAAE,CAAC,QAAQ,CAAC;;;MC7C/B,SAAS;IACpB,OAAO,OAAO;QACZ,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC;KAC/C;;;YARF,QAAQ,SAAC;gBACR,YAAY,EAAE,CAAC,YAAY,CAAC;gBAC5B,OAAO,EAAE,CAAC,YAAY,CAAC;gBACvB,OAAO,EAAE,CAAC,YAAY,CAAC;aACxB;;;ACRD;;;;;;"}

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

@@ -0,0 +1,42 @@
+import { Component, Input, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+class LoaderComponent {
+    constructor() {
+        /** Controls loader size */
+        this.mobileView = false;
+    }
+    ngOnInit() {
+    }
+}
+LoaderComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'mis-loader',
+                template: "<div id=\"spinner\" [ngClass]=\"{\n  'mobile': mobileView\n}\"></div>\n",
+                styles: ["#spinner{-webkit-animation:frames 1s linear infinite;animation:frames 1s linear infinite;background:transparent;border-radius:100%;border:4px solid #e0e0e0;border-top-color:#6200ee;width:40px;height:40px;padding:0;position:absolute}@-webkit-keyframes frames{0%{transform:rotate(0deg)}to{transform:rotate(359deg)}}@keyframes frames{0%{transform:rotate(0deg)}to{transform:rotate(359deg)}}.mobile{height:20px!important;width:20px!important;border:2px solid #e0e0e0!important;border-top-color:#6200ee!important}"]
+            },] }
+];
+LoaderComponent.ctorParameters = () => [];
+LoaderComponent.propDecorators = {
+    mobileView: [{ type: Input }]
+};
+
+class LoaderModule {
+    static forRoot() {
+        return { ngModule: LoaderModule, providers: [] };
+    }
+}
+LoaderModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [LoaderComponent],
+                imports: [CommonModule],
+                exports: [LoaderComponent]
+            },] }
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LoaderComponent, LoaderModule };
+//# sourceMappingURL=mis-crystal-design-system-loader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mis-crystal-design-system-loader.js","sources":["../../../projects/mis-components/loader/loader.component.ts","../../../projects/mis-components/loader/loader.module.ts","../../../projects/mis-components/loader/mis-crystal-design-system-loader.ts"],"sourcesContent":["import {Component, Input, OnInit} from '@angular/core';\n\n@Component({\n  selector: 'mis-loader',\n  templateUrl: './loader.component.html',\n  styleUrls: ['./loader.component.scss']\n})\nexport class LoaderComponent implements OnInit{\n\n  /** Controls loader size */\n  @Input() mobileView: boolean = false\n\n  constructor() {\n  }\n  ngOnInit(){\n  }\n}\n","import { NgModule, ModuleWithProviders } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { LoaderComponent } from './loader.component';\n\n@NgModule({\n  declarations: [LoaderComponent],\n  imports: [CommonModule],\n  exports: [LoaderComponent]\n})\nexport class LoaderModule {\n  static forRoot(): ModuleWithProviders<LoaderModule> {\n    return { ngModule: LoaderModule, providers: [] };\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAOa,eAAe;IAK1B;;QAFS,eAAU,GAAY,KAAK,CAAA;KAGnC;IACD,QAAQ;KACP;;;YAbF,SAAS,SAAC;gBACT,QAAQ,EAAE,YAAY;gBACtB,mFAAsC;;aAEvC;;;;yBAIE,KAAK;;;MCAK,YAAY;IACvB,OAAO,OAAO;QACZ,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC;KAClD;;;YARF,QAAQ,SAAC;gBACR,YAAY,EAAE,CAAC,eAAe,CAAC;gBAC/B,OAAO,EAAE,CAAC,YAAY,CAAC;gBACvB,OAAO,EAAE,CAAC,eAAe,CAAC;aAC3B;;;ACTD;;;;;;"}