mis-crystal-design-system 2.0.1 → 2.2.0

package/index.d.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/input/directives/input/input.directive.d.ts

@@ -0,0 +1,15 @@
+import { ElementRef, OnDestroy, OnInit } from '@angular/core';
+import { NgControl } from '@angular/forms';
+import { Subject } from 'rxjs';
+export declare class MisInputDirective implements OnInit, OnDestroy {
+    el: ElementRef;
+    private control;
+    constructor(el: ElementRef, control: NgControl);
+    private validityChange;
+    validity: import("rxjs").Observable<boolean>;
+    endObs: Subject<void>;
+    focus: boolean;
+    hasValue: boolean;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+}

package/input/mis-crystal-design-system-input.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';

package/input/mis-crystal-design-system-input.metadata.json

@@ -0,0 +1 @@
+{"__symbolic":"module","version":4,"metadata":{"MisInputDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":12,"character":1},"arguments":[{"selector":"input[misInput]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Self","line":19,"character":5}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":19,"character":13}}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":18,"character":15},{"__symbolic":"reference","module":"@angular/forms","name":"NgControl","line":19,"character":41}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"MisInputComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":11,"character":1},"arguments":[{"selector":"mis-input","template":"<div class=\"input-container\" [ngClass]=\"{'rounded': type === 'rounded', 'floating': type === 'floating', 'has-error': !inputValidity || hasError, 'no-hint': noHints}\">\n  <div class=\"input-wrapper\">\n    <ng-content select=\"[mis-input-icon]\"></ng-content>\n    <div class=\"mis-input\">\n      <ng-content select=\"input\"></ng-content>\n      <span class=\"mis-placeholder\">{{placeholder}}</span>\n    </div>\n    <ng-content select=\"[mis-input-act]\"></ng-content>\n  </div>\n  <ng-content select=\"[mis-input-hint]\"></ng-content>\n  <ng-content select=\"[mis-input-error]\"></ng-content>\n</div>","styles":[".input-container{position:relative;padding-bottom:24px}.input-container .input-wrapper{box-sizing:border-box;display:flex;align-items:center;flex-direction:row;flex-wrap:nowrap;transition:all 60ms ease-in;background-color:#fff;padding:3px 16px}.input-container .input-wrapper>:not(:last-child){margin-right:16px}.input-container .input-wrapper .mis-input{flex:1 1 auto;z-index:0;position:relative;display:flex;align-items:center}.input-container .input-wrapper input{flex:1 1 auto;border:none;outline:none;height:100%;padding:0;font-family:Lato;font-style:normal;font-weight:400;font-size:16px;height:24px;color:#181f33;background-color:transparent;width:100%;vertical-align:middle}.input-container .input-wrapper input::-moz-placeholder{-moz-transition:all .1s ease-in;transition:all .1s ease-in;opacity:0;transform-origin:left center;color:transparent}.input-container .input-wrapper input:-ms-input-placeholder{-ms-transition:all .1s ease-in;transition:all .1s ease-in;opacity:0;transform-origin:left center;color:transparent}.input-container .input-wrapper input::placeholder{transition:all .1s ease-in;opacity:0;transform-origin:left center;color:transparent}.input-container .input-wrapper .mis-placeholder{position:absolute;font-family:Lato;font-style:normal;font-weight:400;font-size:16px;line-height:24px;color:#6a737d;z-index:-1;transition:all .15s ease-in}.input-container .input-wrapper:focus-within{background-color:#f5f5f5}.input-container .input-wrapper:focus-within{border:1px solid #0937b2}.input-container .input-wrapper [mis-input-act],.input-container .input-wrapper [mis-input-icon]{width:18px;height:18px;color:#6a737d;font-size:24px;line-height:18px}.input-container .input-wrapper [mis-input-act]{cursor:pointer}.input-container.no-hint{padding-bottom:0}.input-container.rounded .input-wrapper{border-radius:4px;border:1px solid #e0e0e0}.input-container.rounded .input-wrapper:focus-within,.input-container.rounded .input-wrapper:hover{background-color:#f5f5f5}.input-container.rounded .input-wrapper input:not(:-moz-placeholder-shown)+.mis-placeholder{color:transparent!important}.input-container.rounded .input-wrapper input:not(:-ms-input-placeholder)+.mis-placeholder{color:transparent!important}.input-container.rounded .input-wrapper input:not(:placeholder-shown)+.mis-placeholder{color:transparent!important}.input-container.rounded .input-wrapper .mis-placeholder{transition-duration:50ms}.input-container.rounded.has-error .input-wrapper{border:1px solid #b00020!important}.input-container.floating .input-wrapper{padding-top:24px;padding-bottom:7px;border-bottom:1px solid #e0e0e0}.input-container.floating .input-wrapper input:focus+.mis-placeholder{color:#0937b2!important}.input-container.floating .input-wrapper input:not(:-moz-placeholder-shown)+.mis-placeholder{transform:translateY(calc(-100% + 6px))!important;font-size:12px!important;letter-spacing:.2px!important}.input-container.floating .input-wrapper input:not(:-ms-input-placeholder)+.mis-placeholder{transform:translateY(calc(-100% + 6px))!important;font-size:12px!important;letter-spacing:.2px!important}.input-container.floating .input-wrapper input:focus+.mis-placeholder,.input-container.floating .input-wrapper input:not(:placeholder-shown)+.mis-placeholder{transform:translateY(calc(-100% + 6px))!important;font-size:12px!important;letter-spacing:.2px!important}.input-container.floating .input-wrapper:focus-within{border:none;border-bottom:1px solid #0937b2}.input-container.floating .input-wrapper:focus-within input::-moz-placeholder{color:#6a737d;opacity:1;font-size:16px}.input-container.floating .input-wrapper:focus-within input:-ms-input-placeholder{color:#6a737d;opacity:1;font-size:16px}.input-container.floating .input-wrapper:focus-within input::placeholder{color:#6a737d;opacity:1;font-size:16px}.input-container.floating.has-error .input-wrapper{border-bottom:1px solid #b00020!important}.input-container.floating.has-error .input-wrapper .mis-placeholder{color:#b00020!important}.input-container [mis-input-error],.input-container [mis-input-hint]{position:absolute;left:0;right:0;bottom:0;line-height:24px;height:24px;font-size:12px;color:#6a737d;letter-spacing:.2px}.input-container [mis-input-error]{color:#b00020}"]}]}],"members":{"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"noHints":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"hasError":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"formInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":21,"character":3},"arguments":[{"__symbolic":"reference","name":"MisInputDirective"}]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"MisInputModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"MisInputComponent"},{"__symbolic":"reference","name":"MisInputDirective"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":8,"character":12},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":8,"character":26}],"exports":[{"__symbolic":"reference","name":"MisInputComponent"},{"__symbolic":"reference","name":"MisInputDirective"}]}]}],"members":{}}},"origins":{"MisInputDirective":"./directives/input/input.directive","MisInputComponent":"./mis-input.component","MisInputModule":"./mis-input.module"},"importAs":"mis-crystal-design-system/input"}

package/input/mis-input.component.d.ts

@@ -0,0 +1,15 @@
+import { OnDestroy, OnInit } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { MisInputDirective } from './directives/input/input.directive';
+export declare class MisInputComponent implements OnInit, OnDestroy {
+    type: 'rounded' | 'floating';
+    placeholder: string;
+    noHints: boolean;
+    hasError: boolean;
+    set formInput(input: MisInputDirective);
+    inputSubscription: Subscription | undefined;
+    inputValidity: boolean;
+    constructor();
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+}

package/input/mis-input.module.d.ts

@@ -0,0 +1,2 @@
+export declare class MisInputModule {
+}

package/input/package.json

@@ -0,0 +1,11 @@
+{
+  "main": "../bundles/mis-crystal-design-system-input.umd.js",
+  "module": "../fesm2015/mis-crystal-design-system-input.js",
+  "es2015": "../fesm2015/mis-crystal-design-system-input.js",
+  "esm2015": "../esm2015/input/mis-crystal-design-system-input.js",
+  "fesm2015": "../fesm2015/mis-crystal-design-system-input.js",
+  "typings": "mis-crystal-design-system-input.d.ts",
+  "metadata": "mis-crystal-design-system-input.metadata.json",
+  "sideEffects": false,
+  "name": "mis-crystal-design-system/input"
+}

package/input/public_api.d.ts

@@ -0,0 +1,3 @@
+export { MisInputDirective } from './directives/input/input.directive';
+export { MisInputComponent } from './mis-input.component';
+export { MisInputModule } from './mis-input.module';

package/loader/mis-crystal-design-system-loader.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';

package/loader/mis-crystal-design-system-loader.metadata.json

@@ -0,0 +1 @@
+{"__symbolic":"module","version":4,"metadata":{"LoaderComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"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}"]}]}],"members":{"mobileView":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}},"LoaderModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":5,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"LoaderComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":7,"character":12}],"exports":[{"__symbolic":"reference","name":"LoaderComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"LoaderModule"},"providers":[]}}}}},"origins":{"LoaderComponent":"./loader.component","LoaderModule":"./loader.module"},"importAs":"mis-crystal-design-system/loader"}

package/loader/package.json

@@ -0,0 +1,11 @@
+{
+  "main": "../bundles/mis-crystal-design-system-loader.umd.js",
+  "module": "../fesm2015/mis-crystal-design-system-loader.js",
+  "es2015": "../fesm2015/mis-crystal-design-system-loader.js",
+  "esm2015": "../esm2015/loader/mis-crystal-design-system-loader.js",
+  "fesm2015": "../fesm2015/mis-crystal-design-system-loader.js",
+  "typings": "mis-crystal-design-system-loader.d.ts",
+  "metadata": "mis-crystal-design-system-loader.metadata.json",
+  "sideEffects": false,
+  "name": "mis-crystal-design-system/loader"
+}

package/mis-crystal-design-system.d.ts

@@ -1,4 +1,4 @@
 /**
  * Generated bundle index. Do not edit.
  */
-export * from './public-api';
+export * from './index';

package/mis-crystal-design-system.metadata.json

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"exports":[{"from":"./public_api"}],"metadata":{},"origins":{},"importAs":"mis-crystal-design-system"}
+{"__symbolic":"module","version":4,"exports":[{"from":"./public-api"}],"metadata":{},"origins":{},"importAs":"mis-crystal-design-system"}

package/modal/mis-crystal-design-system-modal.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';
+export { ModuleWrapperComponent as ɵa } from './module-wrapper/module-wrapper.component';

package/modal/mis-crystal-design-system-modal.metadata.json

@@ -0,0 +1 @@
+{"__symbolic":"module","version":4,"metadata":{"ModalService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":16,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"Overlay","line":22,"character":31},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":22,"character":58}]}],"show":[{"__symbolic":"method"}],"createInjector":[{"__symbolic":"method"}],"calculatePosition":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}},"ModalRef":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"OverlayRef","line":10,"character":30}]}],"close":[{"__symbolic":"method"}]}},"MODAL_DATA_VAR":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":4,"character":34},"arguments":["MISModalDataInjectionToken"]},"ModalModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":9,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵa"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":12,"character":4},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"OverlayModule","line":13,"character":4},{"__symbolic":"reference","module":"@angular/cdk/portal","name":"PortalModule","line":14,"character":4}],"entryComponents":[{"__symbolic":"reference","name":"ɵa"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"ModalModule"},"providers":[{"__symbolic":"reference","name":"ModalService"}]}},"forChild":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"ModalModule"},"providers":[{"__symbolic":"reference","name":"ModalService"}]}}}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"mis-module-wrapper","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":10,"character":4},"arguments":["slideInOut",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":11,"character":6},"arguments":[":enter",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":12,"character":8},"arguments":[{"transform":"translateY(-30%)","opacity":0}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":13,"character":8},"arguments":["200ms ease-out",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":13,"character":34},"arguments":[{"transform":"translatey(0%)","opacity":1}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":15,"character":6},"arguments":[":leave",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":15,"character":28},"arguments":["200ms ease-out",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":15,"character":54},"arguments":[{"transform":"translatey(-30%)","opacity":0}]}]}]]}]]}],"template":"<div class=\"mis-modal-body\" #place @slideInOut>\n  <ng-template [cdkPortalOutlet]=\"modalPortal\"></ng-template>\n</div>\n","styles":[".mis-modal-body{display:block;width:100%;height:100%;background-color:transparent;border-radius:12px;box-shadow:0 12px 24px rgba(0,0,0,.12),0 4px 8px rgba(0,0,0,.12);overflow:hidden}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"place":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":23,"character":3},"arguments":["place",{"static":false,"read":{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":23,"character":45}}]}]}],"bindComponent":[{"__symbolic":"method"}],"initComponent":[{"__symbolic":"method"}]}}},"origins":{"ModalService":"./modal.service","ModalRef":"./modal-ref","MODAL_DATA_VAR":"./modal-constants","ModalModule":"./modal.module","ɵa":"./module-wrapper/module-wrapper.component"},"importAs":"mis-crystal-design-system/modal"}

package/modal/modal-constants.d.ts

@@ -0,0 +1,3 @@
+/** @format */
+import { InjectionToken } from "@angular/core";
+export declare const MODAL_DATA_VAR: InjectionToken<any>;

package/modal/modal-ref.d.ts

@@ -0,0 +1,9 @@
+/** @format */
+import { OverlayRef } from "@angular/cdk/overlay";
+export declare class ModalRef {
+    overlay: OverlayRef;
+    private afterClosed$;
+    afterClosed: import("rxjs").Observable<unknown>;
+    constructor(overlay: OverlayRef);
+    close(data?: unknown): void;
+}

package/modal/modal.module.d.ts

@@ -0,0 +1,5 @@
+import { ModuleWithProviders } from '@angular/core';
+export declare class ModalModule {
+    static forRoot(): ModuleWithProviders<ModalModule>;
+    static forChild(): ModuleWithProviders<ModalModule>;
+}

package/modal/modal.service.d.ts

@@ -0,0 +1,22 @@
+import { ComponentType, Overlay } from "@angular/cdk/overlay";
+import { Injector } from "@angular/core";
+import { ModalRef } from "./modal-ref";
+interface IModalOptions {
+    width?: string;
+    height?: string;
+    top?: string;
+    right?: string;
+    bottom?: string;
+    left?: string;
+    closeOnBackdropClick?: boolean;
+}
+export declare class ModalService {
+    private overlay;
+    private injector;
+    private componentInstance;
+    constructor(overlay: Overlay, injector: Injector);
+    show<T, D>(component: ComponentType<T>, data?: D, options?: IModalOptions): ModalRef;
+    private createInjector;
+    private calculatePosition;
+}
+export {};

package/modal/module-wrapper/module-wrapper.component.d.ts

@@ -0,0 +1,9 @@
+import { ComponentPortal, PortalInjector } from "@angular/cdk/portal";
+import { ViewContainerRef } from "@angular/core";
+export declare class ModuleWrapperComponent {
+    modalPortal: ComponentPortal<any>;
+    constructor();
+    place: ViewContainerRef;
+    bindComponent(type: any, injector: PortalInjector): void;
+    private initComponent;
+}

package/modal/package.json

@@ -0,0 +1,11 @@
+{
+  "main": "../bundles/mis-crystal-design-system-modal.umd.js",
+  "module": "../fesm2015/mis-crystal-design-system-modal.js",
+  "es2015": "../fesm2015/mis-crystal-design-system-modal.js",
+  "esm2015": "../esm2015/modal/mis-crystal-design-system-modal.js",
+  "fesm2015": "../fesm2015/mis-crystal-design-system-modal.js",
+  "typings": "mis-crystal-design-system-modal.d.ts",
+  "metadata": "mis-crystal-design-system-modal.metadata.json",
+  "sideEffects": false,
+  "name": "mis-crystal-design-system/modal"
+}

package/modal/public_api.d.ts

@@ -0,0 +1,4 @@
+export * from './modal.service';
+export * from './modal-ref';
+export * from './modal-constants';
+export * from './modal.module';

package/multi-select-dropdown/mis-crystal-design-system-multi-select-dropdown.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';

package/multi-select-dropdown/mis-crystal-design-system-multi-select-dropdown.metadata.json

@@ -0,0 +1 @@
+{"__symbolic":"module","version":4,"metadata":{"MultiSelectDropdownComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"selector":"mis-multi-select-dropdown","template":"<div class=\"container\" [ngStyle]=\"{\n        'height': height.length > 0? height: '',\n        'width': width.length > 0? width: ''\n     }\"\n>\n    <div class=\"dropdown\" (click)=\"toggleDropdown()\" [ngStyle]=\"{'background': isOpen ? '#E6EBF7': ''}\">\n        <div class=\"label\">\n            <p class=\"text\">{{ label }}</p>\n            <p *ngIf=\"showSelectedCount && localSelectedItems?.length > 0\" class=\"count\">\n                {{ localSelectedItems?.length }}\n            </p>\n        </div>\n        <svg class=\"handle\" [ngStyle]=\"{ transform: isOpen ? 'rotate(180deg)': 'rotate(0deg)' }\" width=\"20\" height=\"20\"\n             viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                  d=\"M13.825 7.15845L10 10.9751L6.175 7.15845L5 8.33345L10 13.3334L15 8.33345L13.825 7.15845Z\" fill=\"#181F33\" />\n        </svg>\n    </div>\n    <div style=\"flex-basis: 0;\"></div>\n    <div style=\"width: 100%; position: relative;\">\n        <div *ngIf=\"isOpen\" class=\"popup-container\"\n             [ngStyle]=\"{\n                'height': dropdownListHeight,\n                'width': dropdownListWidth\n             }\"\n             [ngClass]=\"{\n                'position-left': dropdownListPosition === 'Left',\n                'position-right': dropdownListPosition === 'Right'\n             }\"\n        >\n            <div *ngIf=\"searchEnabled\" class=\"search-container\">\n                <svg *ngIf=\"!isSearchInputFocused\" class=\"search-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n                     xmlns=\"http://www.w3.org/2000/svg\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                          d=\"M4.21508 11.1456C4.21508 7.3179 7.33722 4.21165 11.1926 4.21165C15.048 4.21165 18.1702 7.3179 18.1702 11.1456C18.1702 12.6931 17.6599 14.1226 16.7972 15.2767L15.3685 16.7013C14.2044 17.5668 12.759 18.0796 11.1926 18.0796C7.33722 18.0796 4.21508 14.9734 4.21508 11.1456ZM15.9421 17.7835C14.6021 18.7329 12.9627 19.2913 11.1926 19.2913C6.66977 19.2913 3 15.6461 3 11.1456C3 6.64512 6.66977 3 11.1926 3C15.7155 3 19.3852 6.64512 19.3852 11.1456C19.3852 12.9371 18.8037 14.5931 17.8184 15.9375L19.8361 17.4048C20.6705 17.912 21.7554 18.6543 20.2454 20.215C18.7353 21.7756 18.0099 20.6663 17.4991 19.8364L15.9421 17.7835Z\"\n                          fill=\"#6A737D\" />\n                </svg>\n                <input\n                        [ngModel]=\"searchInput\"\n                        [ngStyle]=\"{ paddingLeft: isSearchInputFocused ? '12px' : '45px', border:isSearchInputFocused? '1px solid #0937B2':'1px solid #e0e0e0', paddingRight: isSearchInputFocused ? '45px' : '10px' }\"\n                        (ngModelChange)=\"searchInputOnChange($event)\"\n                        [placeholder]=\"isSearchInputFocused ? '' : 'Search Keyword'\"\n                        (focus)=\"searchInputFocused(true)\"\n                        class=\"search-input\"\n                />\n                <svg *ngIf=\"isSearchInputFocused\" class=\"cancel-icon\" (click)=\"searchInputCanceled($event)\" width=\"24\" height=\"24\"\n                     viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                          d=\"M8.87446 7.32144C8.44588 6.89285 7.751 6.89285 7.32242 7.32144C6.89383 7.75002 6.89383 8.4449 7.32242 8.87349L10.4488 11.9999L7.32357 15.1252C6.89498 15.5538 6.89498 16.2486 7.32357 16.6772C7.75215 17.1058 8.44703 17.1058 8.87561 16.6772L12.0009 13.552L15.1261 16.6772C15.5547 17.1058 16.2496 17.1058 16.6781 16.6772C17.1067 16.2486 17.1067 15.5537 16.6781 15.1251L13.5529 11.9999L16.6793 8.87354C17.1079 8.44496 17.1079 7.75008 16.6793 7.3215C16.2507 6.89291 15.5558 6.89291 15.1273 7.3215L12.0009 10.4479L8.87446 7.32144Z\"\n                          fill=\"#6A737D\" />\n                </svg>\n            </div>\n            <div class=\"items\">\n                <div class=\"item\" (click)=\"toggleSelectedItems($event, item)\" *ngFor=\"let item of searchInput ? searchData : localData\">\n                    <div class=\"checkbox-container-wrapper\">\n                        <div class=\"checkbox-container\">\n                            <mis-checkbox\n                                [checked]=\"item.checked\"\n                            ></mis-checkbox>\n                        </div>\n                        <p class=\"label\">\n                            {{ item.label }}\n                        </p>\n                    </div>\n                    <div class=\"icon-container\" *ngIf=\"item.icon\">\n                        <img class=\"icon\" [src]=\"item.icon\" alt=\"no img\">\n                    </div>\n                </div>\n                <div class=\"noData\" *ngIf=\"(searchInput ? searchData : localData).length === 0\">\n                    {{ searchInput === '' ? noDataMessage : 'No results' }}\n                </div>\n            </div>\n            <div *ngIf=\"localData.length !== 0\" class=\"actions-container\">\n                <div style=\"width: calc(50% - 4px)\">\n                    <mis-button\n                            [name]=\"'Reset'\"\n                            [type]=\"'Text'\"\n                            [width]=\"'100%'\"\n                            (click)=\"onReset()\"\n                    ></mis-button>\n                </div>\n                <div style=\"width: calc(50% - 4px)\">\n                    <mis-button\n                            [name]=\"'Apply'\"\n                            [type]=\"'Solid'\"\n                            [width]=\"'100%'\"\n                            (click)=\"applyFilters()\"\n                    ></mis-button>\n                </div>\n            </div>\n        </div>\n    </div>\n\n</div>\n","styles":[".container{position:relative;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;height:32px;width:256px;font-family:Lato,sans-serif!important}.container .dropdown{height:inherit;border:1px solid #e0e0e0;border-radius:6px;background-color:#fff;cursor:pointer;display:flex;justify-content:space-between;align-items:center;width:100%;padding:0 12px;overflow:hidden}.container .dropdown:hover{background-color:#f5f7fc}.container .dropdown .label{display:flex;justify-content:flex-start;align-items:center;width:calc(100% - 32px)}.container .dropdown .label,.container .dropdown .label .text{font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.container .dropdown .label .text{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.container .dropdown .label .count{background-color:#e0e0e0;border-radius:50%;padding:2px 7px;margin:0 0 0 8px;font-style:normal;font-weight:400;font-size:14px;line-height:20px;text-align:center;letter-spacing:.2px;color:#181f33}.container .dropdown .handle{width:24px;height:24px;transition:.3s;position:absolute;right:12px;border-radius:50%;overflow:hidden}.container .popup-container{position:absolute;top:4px;width:100%;max-height:340px;padding-bottom:0;border:1px solid #e0e0e0;border-radius:8px;background-color:#fff;box-shadow:0 12px 24px 0 rgba(0,0,0,.12);overflow:scroll;overflow-x:hidden;display:flex;flex-direction:column;justify-content:space-between;z-index:100}.container .popup-container::-webkit-scrollbar{width:0;height:0}.container .popup-container .search-container{position:relative;box-sizing:border-box;padding:8px}.container .popup-container .search-container .search-icon{position:absolute;width:24px;height:24px;top:50%;transform:translateY(-50%);left:18px;z-index:1}.container .popup-container .search-container .search-input{height:40px;width:100%;padding:12px;border:1px solid #e0e0e0;box-sizing:border-box;border-radius:8px;outline:none;caret-color:#0937b2;font-style:normal;font-weight:400;font-size:12px;line-height:18px;display:flex;align-items:center;letter-spacing:.2px;color:#181f33}.container .popup-container .search-container .cancel-icon{position:absolute;cursor:pointer;width:24px;height:24px;top:50%;transform:translateY(-50%);right:18px;z-index:1}.container .popup-container .items{padding:8px 0 8px 8px;overflow-y:scroll;height:100%}.container .popup-container .items::-webkit-scrollbar{width:5px;height:0}.container .popup-container .items::-webkit-scrollbar-thumb{background:#9aa7b4;border-radius:10px}.container .popup-container .items .noData{display:flex;justify-content:center;align-items:center;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.container .popup-container .items .item{cursor:pointer;display:flex;justify-content:flex-start;align-items:center;padding:8px 12px;border-radius:6px;height:auto}.container .popup-container .items .item:hover{background-color:#f5f7fc}.container .popup-container .items .item .checkbox-container-wrapper{display:flex;justify-content:flex-start;align-items:center;width:90%}.container .popup-container .items .item .checkbox-container-wrapper .checkbox-container{display:block;position:relative;cursor:pointer;font-size:22px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.container .popup-container .items .item .checkbox-container-wrapper .checkbox-container input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.container .popup-container .items .item .checkbox-container-wrapper .checkbox-container input:checked~.checkmark:after{display:block}.container .popup-container .items .item .checkbox-container-wrapper .checkbox-container .checkmark{position:absolute;top:-8px;left:0;height:15px;width:15px;border-radius:4px;background-color:#0079f1;border:1px solid #6a737d}.container .popup-container .items .item .checkbox-container-wrapper .checkbox-container .checkmark:after{content:\"\";position:absolute;display:none;left:5px;top:2px;width:3px;height:6px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.container .popup-container .items .item .checkbox-container-wrapper .label{margin:0 0 0 8px;line-height:20px;font-size:14px;font-style:normal;font-weight:400;letter-spacing:.200000003px}.container .popup-container .items .item .icon-container{width:10%;display:flex;justify-content:flex-end}.container .popup-container .items .item .icon-container .icon{width:20px;height:20px}.container .popup-container .actions-container{display:flex;justify-content:space-between;bottom:0;align-items:center;position:-webkit-sticky;position:sticky;padding:16px;background-color:#fff;border-top:1px solid #e0e0e0}.container .popup-container .actions-container .cancel{cursor:pointer;padding:10px 32px;text-align:center;font-size:16px;line-height:24px;border-radius:8px}.container .popup-container .actions-container .cancel:hover{background:rgba(9,55,178,.04)}.container .popup-container .actions-container .apply{cursor:pointer;padding:10px 32px;text-align:center;color:#fff;font-size:16px;line-height:24px;background:#0937b2;border-radius:8px}.position-left{right:0}.position-right{left:0}"]}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":5}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":5}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":5}}]}],"dropdownListHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":5}}]}],"dropdownListWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":5}}]}],"dropdownListPosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":5}}]}],"searchEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":5}}]}],"showSelectedCount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":5}}]}],"noDataMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":5}}]}],"selectedItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":5}}]}],"onChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":43,"character":5}}]}],"clickout":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":45,"character":5},"arguments":["document:click",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":52,"character":30}]}],"ngOnInit":[{"__symbolic":"method"}],"handlerSetLocalSelectedItems":[{"__symbolic":"method"}],"searchInputFocused":[{"__symbolic":"method"}],"searchInputCanceled":[{"__symbolic":"method"}],"toggleDropdown":[{"__symbolic":"method"}],"filterByValue":[{"__symbolic":"method"}],"searchInputOnChange":[{"__symbolic":"method"}],"formatValues":[{"__symbolic":"method"}],"toggleSelectedItems":[{"__symbolic":"method"}],"applyFilters":[{"__symbolic":"method"}],"onReset":[{"__symbolic":"method"}],"onCancel":[{"__symbolic":"method"}]}},"MultiSelectDropdownItem":{"__symbolic":"interface"},"MultiSelectDropdownModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":7,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"MultiSelectDropdownComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":9,"character":14},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":9,"character":28},{"__symbolic":"reference","module":"mis-crystal-design-system/checkbox","name":"CheckboxModule","line":9,"character":41},{"__symbolic":"reference","module":"mis-crystal-design-system/button","name":"ButtonModule","line":9,"character":57}],"exports":[{"__symbolic":"reference","name":"MultiSelectDropdownComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"MultiSelectDropdownModule"},"providers":[]}}}}},"origins":{"MultiSelectDropdownComponent":"./multi-select-dropdown.component","MultiSelectDropdownItem":"./multi-select-dropdown.component","MultiSelectDropdownModule":"./multi-select-dropdown.module"},"importAs":"mis-crystal-design-system/multi-select-dropdown"}

package/multi-select-dropdown/package.json

@@ -0,0 +1,11 @@
+{
+  "main": "../bundles/mis-crystal-design-system-multi-select-dropdown.umd.js",
+  "module": "../fesm2015/mis-crystal-design-system-multi-select-dropdown.js",
+  "es2015": "../fesm2015/mis-crystal-design-system-multi-select-dropdown.js",
+  "esm2015": "../esm2015/multi-select-dropdown/mis-crystal-design-system-multi-select-dropdown.js",
+  "fesm2015": "../fesm2015/mis-crystal-design-system-multi-select-dropdown.js",
+  "typings": "mis-crystal-design-system-multi-select-dropdown.d.ts",
+  "metadata": "mis-crystal-design-system-multi-select-dropdown.metadata.json",
+  "sideEffects": false,
+  "name": "mis-crystal-design-system/multi-select-dropdown"
+}

package/nested-multi-select-dropdown/mis-crystal-design-system-nested-multi-select-dropdown.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';

package/nested-multi-select-dropdown/mis-crystal-design-system-nested-multi-select-dropdown.metadata.json

@@ -0,0 +1 @@
+{"__symbolic":"module","version":4,"metadata":{"NestedMultiSelectDropdownComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"selector":"mis-nested-multi-select-dropdown","template":"<div class=\"container\" [ngStyle]=\"{\n        'height': height.length > 0? height: '',\n        'width': width.length > 0? width: ''\n     }\"\n>\n    <div class=\"dropdown\" (click)=\"toggleDropdown()\" [ngStyle]=\"{'background': isOpen ? '#E6EBF7': ''}\">\n        <div class=\"label\">\n            <p class=\"text\">{{ label }}</p>\n            <p *ngIf=\"showSelectedCount && selectedCount > 0\" class=\"count\">\n                {{ selectedCount }}\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 (click)=\"toggleSelectedItems($event, item)\" *ngFor=\"let item of searchInput ? searchData : localData\">\n                    <div class=\"item\">\n                        <div class=\"checkbox-container-wrapper\">\n                            <div class=\"checkbox-container\">\n                                <mis-checkbox\n                                        [checked]=\"item.checked\"\n                                ></mis-checkbox>\n                            </div>\n                            <p class=\"label\">\n                                {{ item.label }}\n                            </p>\n                        </div>\n                        <div class=\"icon-container\" *ngIf=\"item.icon\">\n                            <img class=\"icon\" [src]=\"item.icon\" alt=\"no img\">\n                        </div>\n                    </div>\n                    <div *ngIf=\"item?.children?.length > 0\" class=\"items sub\" style=\"padding-right: 0;\">\n                        <div class=\"item\" (click)=\"toggleSelectedItems($event, item, cItem)\" *ngFor=\"let cItem of item?.children\">\n                            <div class=\"checkbox-container-wrapper\">\n                                <div class=\"checkbox-container\">\n                                    <mis-checkbox\n                                            [checked]=\"cItem.checked\"\n                                    ></mis-checkbox>\n                                </div>\n                                <p class=\"label\">\n                                    {{ cItem.label }}\n                                </p>\n                            </div>\n                            <div class=\"icon-container\" *ngIf=\"cItem.icon\">\n                                <img class=\"icon\" [src]=\"cItem.icon\" alt=\"no img\">\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"noData\" *ngIf=\"(searchInput ? searchData : localData).length === 0\">\n                    {{ searchInput === '' ? noDataMessage : 'No results' }}\n                </div>\n            </div>\n            <div *ngIf=\"localData.length !== 0\" class=\"actions-container\">\n                <div style=\"width: calc(50% - 4px)\">\n                    <mis-button\n                            [name]=\"'Reset'\"\n                            [type]=\"'Text'\"\n                            [width]=\"'100%'\"\n                            (click)=\"onReset()\"\n                    ></mis-button>\n                </div>\n                <div style=\"width: calc(50% - 4px)\">\n                    <mis-button\n                            [name]=\"'Apply'\"\n                            [type]=\"'Solid'\"\n                            [width]=\"'100%'\"\n                            (click)=\"applyFilters()\"\n                    ></mis-button>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n","styles":["::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:#9aa7b4}.container{position:relative;display:flex;justify-content:center;align-items:center;height:32px;width:256px;flex-wrap:wrap;font-family:Lato,sans-serif}.container .dropdown{height:inherit;border:1px solid #e0e0e0;border-radius:6px;background-color:#fff;cursor:pointer;display:flex;justify-content:space-between;align-items:center;width:100%;padding:0 12px;overflow:hidden}.container .dropdown:hover{background-color:#f5f7fc}.container .dropdown .label{display:flex;justify-content:flex-start;align-items:center;width:calc(100% - 32px)}.container .dropdown .label,.container .dropdown .label .text{font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.container .dropdown .label .text{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.container .dropdown .label .count{background-color:#e0e0e0;border-radius:50%;padding:2px 7px;margin:0 0 0 8px;font-style:normal;font-weight:400;font-size:14px;line-height:20px;text-align:center;letter-spacing:.2px;color:#181f33}.container .dropdown .handle{width:24px;height:24px;transition:.3s;position:absolute;right:12px;border-radius:50%;overflow:hidden}.container .popup-container{position:absolute;top:4px;width:100%;max-height:340px;padding-bottom:0;border:1px solid #e0e0e0;border-radius:8px;background-color:#fff;box-shadow:0 12px 24px 0 rgba(0,0,0,.12);overflow:scroll;overflow-x:hidden;display:flex;flex-direction:column;justify-content:space-between;z-index:100}.container .popup-container::-webkit-scrollbar{width:0;height:0}.container .popup-container .search-container{position:relative;box-sizing:border-box;padding:8px}.container .popup-container .search-container .search-icon{position:absolute;width:24px;height:24px;top:50%;transform:translateY(-50%);left:18px;z-index:1}.container .popup-container .search-container .search-input{height:40px;width:100%;padding:12px;border:1px solid #e0e0e0;box-sizing:border-box;border-radius:8px;outline:none;caret-color:#0937b2;font-style:normal;font-weight:400;font-size:12px;line-height:18px;display:flex;align-items:center;letter-spacing:.2px;color:#181f33}.container .popup-container .search-container .cancel-icon{position:absolute;cursor:pointer;width:24px;height:24px;top:50%;transform:translateY(-50%);right:18px;z-index:1}.container .popup-container .items{padding:8px 0 8px 8px;overflow-y:scroll;height:100%}.container .popup-container .items::-webkit-scrollbar{width:5px;height:0}.container .popup-container .items::-webkit-scrollbar-thumb{background:#9aa7b4;border-radius:10px}.container .popup-container .items .noData{display:flex;justify-content:center;align-items:center;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.container .popup-container .items .item{cursor:pointer;display:flex;justify-content:flex-start;align-items:center;padding:8px 12px;border-radius:6px;height:auto}.container .popup-container .items .item:hover{background-color:#f5f7fc}.container .popup-container .items .item .checkbox-container-wrapper{display:flex;justify-content:flex-start;align-items:center;width:90%}.container .popup-container .items .item .checkbox-container-wrapper .checkbox-container{display:block;position:relative;cursor:pointer;font-size:22px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.container .popup-container .items .item .checkbox-container-wrapper .checkbox-container input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.container .popup-container .items .item .checkbox-container-wrapper .checkbox-container input:checked~.checkmark:after{display:block}.container .popup-container .items .item .checkbox-container-wrapper .checkbox-container .checkmark{position:absolute;top:-8px;left:0;height:15px;width:15px;border-radius:4px;background-color:#0079f1;border:1px solid #6a737d}.container .popup-container .items .item .checkbox-container-wrapper .checkbox-container .checkmark:after{content:\"\";position:absolute;display:none;left:5px;top:2px;width:3px;height:6px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.container .popup-container .items .item .checkbox-container-wrapper .label{margin:0 0 0 8px;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.container .popup-container .items .item .icon-container{width:10%;display:flex;justify-content:flex-end}.container .popup-container .items .item .icon-container .icon{width:20px;height:20px}.container .popup-container .actions-container{display:flex;justify-content:space-between;bottom:0;align-items:center;position:-webkit-sticky;position:sticky;padding:16px;background-color:#fff;border-top:1px solid #e0e0e0}.container .popup-container .actions-container .cancel{cursor:pointer;padding:10px 32px;text-align:center;font-size:16px;line-height:24px;border-radius:8px}.container .popup-container .actions-container .cancel:hover{background:rgba(9,55,178,.04)}.container .popup-container .actions-container .apply{cursor:pointer;padding:10px 32px;text-align:center;color:#fff;font-size:16px;line-height:24px;background:#0937b2;border-radius:8px}.position-left{right:0}.position-right{left:0}"]}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":5}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":5}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":5}}]}],"dropdownListHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":5}}]}],"dropdownListWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":5}}]}],"dropdownListPosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":5}}]}],"searchEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":5}}]}],"showSelectedCount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":5}}]}],"noDataMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":5}}]}],"selectedItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":5}}]}],"onChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":54,"character":5}}]}],"clickout":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":56,"character":5},"arguments":["document:click",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":64,"character":30}]}],"ngOnInit":[{"__symbolic":"method"}],"handlerSetLocalSelectedItems":[{"__symbolic":"method"}],"searchInputFocused":[{"__symbolic":"method"}],"searchInputCanceled":[{"__symbolic":"method"}],"toggleDropdown":[{"__symbolic":"method"}],"filterByValue":[{"__symbolic":"method"}],"searchInputOnChange":[{"__symbolic":"method"}],"formatValues":[{"__symbolic":"method"}],"toggleSelectedItems":[{"__symbolic":"method"}],"applyFilters":[{"__symbolic":"method"}],"onReset":[{"__symbolic":"method"}],"onCancel":[{"__symbolic":"method"}]}},"NestedMultiSelectDropdownItem":{"__symbolic":"interface"},"NestedMultiSelectDropdownModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":7,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"NestedMultiSelectDropdownComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":9,"character":14},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":9,"character":28},{"__symbolic":"reference","module":"mis-crystal-design-system/checkbox","name":"CheckboxModule","line":9,"character":41},{"__symbolic":"reference","module":"mis-crystal-design-system/button","name":"ButtonModule","line":9,"character":57}],"exports":[{"__symbolic":"reference","name":"NestedMultiSelectDropdownComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"NestedMultiSelectDropdownModule"},"providers":[]}}}}},"origins":{"NestedMultiSelectDropdownComponent":"./nested-multi-select-dropdown.component","NestedMultiSelectDropdownItem":"./nested-multi-select-dropdown.component","NestedMultiSelectDropdownModule":"./nested-multi-select-dropdown.module"},"importAs":"mis-crystal-design-system/nested-multi-select-dropdown"}

package/nested-multi-select-dropdown/package.json

@@ -0,0 +1,11 @@
+{
+  "main": "../bundles/mis-crystal-design-system-nested-multi-select-dropdown.umd.js",
+  "module": "../fesm2015/mis-crystal-design-system-nested-multi-select-dropdown.js",
+  "es2015": "../fesm2015/mis-crystal-design-system-nested-multi-select-dropdown.js",
+  "esm2015": "../esm2015/nested-multi-select-dropdown/mis-crystal-design-system-nested-multi-select-dropdown.js",
+  "fesm2015": "../fesm2015/mis-crystal-design-system-nested-multi-select-dropdown.js",
+  "typings": "mis-crystal-design-system-nested-multi-select-dropdown.d.ts",
+  "metadata": "mis-crystal-design-system-nested-multi-select-dropdown.metadata.json",
+  "sideEffects": false,
+  "name": "mis-crystal-design-system/nested-multi-select-dropdown"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mis-crystal-design-system",
-  "version": "2.0.1",
+  "version": "2.2.0",
   "peerDependencies": {
     "@angular/common": "*",
     "@angular/core": "*",

package/projects/mis-components/button/button.directive.scss

@@ -0,0 +1,69 @@
+.mis-btn {
+  background: none;
+  outline: none;
+  border: none;
+  cursor: pointer;
+  border-radius: 4px;
+  vertical-align: middle;
+  text-align: center;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  justify-content: center;
+
+  span,
+  img {
+    margin-right: 8px;
+  }
+
+  padding: 10px 16px;
+  font-size: 16px;
+  line-height: 24px;
+  &.mis-btn-lg {
+    padding: 16px;
+    font-weight: bold;
+  }
+  &.mis-btn-sm {
+    padding: 6px 12px;
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  background-color: transparent;
+  color: #0937b2;
+  &:hover {
+    background-color: #f0f3fa;
+  }
+  &:focus {
+    background-color: #dae1f3;
+  }
+  &:disabled {
+    color: #929dab;
+    pointer-events: none;
+  }
+
+  &.mis-outline {
+    border: 1px solid #0937b2;
+
+    &:disabled {
+      color: #929dab;
+      border-color: #929dab;
+    }
+  }
+
+  &.mis-primary {
+    background-color: #0937b2;
+    color: #ffffff;
+    &:hover {
+      background-color: #062a99;
+    }
+    &:focus {
+      background-color: #041f80;
+    }
+    &:disabled {
+      background-color: #e0e0e0;
+      color: #929dab;
+    }
+  }
+}

package/projects/mis-components/modal/modal.scss

@@ -0,0 +1,9 @@
+.mis-modal {
+  display: block;
+  overflow: auto;
+  padding: 8px;
+  // transition: all 300ms ease-out;
+}
+.mis-modal-overlay {
+  background: rgba(0, 0, 0, 0.32);
+}

package/public-api.d.ts

@@ -1,15 +1,2 @@
-export * from './button';
-export * from './checkbox';
-export * from './chip';
-export * from './drawer';
-export * from './dropdown';
-export * from './fab';
-export * from './loader';
-export * from './multi-select-dropdown';
-export * from './nested-multi-select-dropdown';
-export * from './radio-button';
-export * from './switch';
-export * from './table';
-export * from './toast';
-export * from './tooltip';
-export * from './datepicker';
+declare const _default: {};
+export default _default;

package/radio-button/mis-crystal-design-system-radio-button.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';

package/radio-button/mis-crystal-design-system-radio-button.metadata.json

@@ -0,0 +1 @@
+{"__symbolic":"module","version":4,"metadata":{"RadioButtonComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"mis-radio","template":"<input\n  (change)=\"onChange($event)\"\n  id=\"{{id}}\"\n  type=\"radio\"\n  [name]=\"name\"\n  [disabled]=\"disabled\"\n  [value]=\"value\"\n  [formControl]=\"formControl\"\n>\n","styles":["input[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;margin:0;padding:3px;background-clip:content-box;border:2px solid #6a737d;background-color:#fff;border-radius:50%;cursor:pointer}input[type=radio]:checked{background-color:#0937b2;border:2px solid #0937b2}input[type=radio]:hover{border:2px solid #929dab}input[type=radio]:checked:hover{border:2px solid #0937b2}input[type=radio]:disabled{border:2px solid #c8cdd3}input[type=radio]:checked:disabled{border:2px solid #c8cdd3;background-color:#c8cdd3}"]}]}],"members":{"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"formControl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":29,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"onChange":[{"__symbolic":"method"}]}},"RadioButtonModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"RadioButtonComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":8,"character":14},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":8,"character":28}],"exports":[{"__symbolic":"reference","name":"RadioButtonComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"RadioButtonModule"},"providers":[]}}}}},"origins":{"RadioButtonComponent":"./radio-button.component","RadioButtonModule":"./radio-button.module"},"importAs":"mis-crystal-design-system/radio-button"}

package/radio-button/package.json

@@ -0,0 +1,11 @@
+{
+  "main": "../bundles/mis-crystal-design-system-radio-button.umd.js",
+  "module": "../fesm2015/mis-crystal-design-system-radio-button.js",
+  "es2015": "../fesm2015/mis-crystal-design-system-radio-button.js",
+  "esm2015": "../esm2015/radio-button/mis-crystal-design-system-radio-button.js",
+  "fesm2015": "../fesm2015/mis-crystal-design-system-radio-button.js",
+  "typings": "mis-crystal-design-system-radio-button.d.ts",
+  "metadata": "mis-crystal-design-system-radio-button.metadata.json",
+  "sideEffects": false,
+  "name": "mis-crystal-design-system/radio-button"
+}

package/switch/mis-crystal-design-system-switch.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';

package/switch/mis-crystal-design-system-switch.metadata.json

@@ -0,0 +1 @@
+{"__symbolic":"module","version":4,"metadata":{"SwitchComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"mis-switch","template":"<label class=\"toggle-switch\" [ngClass]=\"{'toggle-switch-mobile': mobileView}\">\n  <input\n    type=\"checkbox\"\n    (change)=\"onChange($event)\"\n    [formControl]=\"formControl\"\n  >\n  <span class=\"slider\"></span>\n</label>\n","styles":[".toggle-switch{height:28px;width:51px;display:inline-block;position:relative;cursor:pointer}.toggle-switch input{display:none}.toggle-switch input:checked+.slider{background-color:#0937b2}.toggle-switch input:checked+.slider:after{transform:translateX(23px)}.toggle-switch .slider{position:absolute;left:0;top:0;right:0;bottom:0;background-color:#e0e0e0;transition:.25s;border-radius:14px}.toggle-switch .slider:after{position:absolute;content:\"\";height:24px;width:24px;background-color:#fff;border-radius:12px;left:2px;bottom:2px;transition:.25s}.toggle-switch-mobile{height:14px;width:34px;display:inline-block;position:relative}.toggle-switch-mobile input{display:none}.toggle-switch-mobile input:checked+.slider{background-color:#e0e0e0}.toggle-switch-mobile input:disabled+.slider{background-color:#f5f5f5!important}.toggle-switch-mobile input:checked+.slider:after{background-color:#0937b2;transform:translateX(34px)}.toggle-switch-mobile input:checked:disabled+.slider:after{background-color:#929dab}.toggle-switch-mobile .slider{position:absolute;left:0;top:0;right:0;bottom:0;background-color:#e0e0e0;transition:.25s;border-radius:14px}.toggle-switch-mobile .slider:after{position:absolute;content:\"\";height:20px;width:20px;background-color:#fff;box-shadow:0 0 6px -2px #929dab;border-radius:12px;top:-3px;left:-10px;transition:.25s}"]}]}],"members":{"mobileView":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"checked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"formControl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"valueChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":21,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"onChange":[{"__symbolic":"method"}]}},"SwitchModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"SwitchComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":8,"character":14},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":8,"character":28}],"exports":[{"__symbolic":"reference","name":"SwitchComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"SwitchModule"},"providers":[]}}}}},"origins":{"SwitchComponent":"./switch.component","SwitchModule":"./switch.module"},"importAs":"mis-crystal-design-system/switch"}

package/switch/package.json

@@ -0,0 +1,11 @@
+{
+  "main": "../bundles/mis-crystal-design-system-switch.umd.js",
+  "module": "../fesm2015/mis-crystal-design-system-switch.js",
+  "es2015": "../fesm2015/mis-crystal-design-system-switch.js",
+  "esm2015": "../esm2015/switch/mis-crystal-design-system-switch.js",
+  "fesm2015": "../fesm2015/mis-crystal-design-system-switch.js",
+  "typings": "mis-crystal-design-system-switch.d.ts",
+  "metadata": "mis-crystal-design-system-switch.metadata.json",
+  "sideEffects": false,
+  "name": "mis-crystal-design-system/switch"
+}

package/table/filter/filter.component.d.ts

@@ -1,10 +1,6 @@
 import { ElementRef, EventEmitter, OnInit } from '@angular/core';
 export declare class TableFilterComponent implements OnInit {
     filtersData: Array<Filter>;
-    appliedFilters: Array<{
-        name: string;
-        value: string;
-    }>;
     containerStyles: any;
     filtersApplied: EventEmitter<any>;
     container: ElementRef | undefined;
@@ -15,7 +11,9 @@ export declare class TableFilterComponent implements OnInit {
     resetFilters(): void;
     applyFilters(): void;
     updateSearchValue(event: any): void;
-    getFiltersBasedOnSearchValue(): unknown[];
+    updateFilter(data: any): void;
+    getFiltersBasedOnSearchValue(): Filter[] | any;
+    getCheckedFilters(): Filter[] | any;
     mySort: (a: Filter | any, b: Filter | any) => 1 | 0 | -1;
 }
 export interface Filter {

package/table/mis-crystal-design-system-table.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';
+export { SubTableComponent as ɵa } from './sub-table/sub-table.component';