mis-crystal-design-system 2.1.3 → 2.2.0

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

@@ -0,0 +1,151 @@
+import { OverlayConfig, Overlay, OverlayModule } from '@angular/cdk/overlay';
+import { ComponentPortal, PortalInjector, PortalModule } from '@angular/cdk/portal';
+import { InjectionToken, Component, ViewChild, ViewContainerRef, ɵɵdefineInjectable, ɵɵinject, INJECTOR, Injectable, Injector, NgModule } from '@angular/core';
+import { Subject } from 'rxjs';
+import { trigger, transition, style, animate } from '@angular/animations';
+import { CommonModule } from '@angular/common';
+
+/** @format */
+const MODAL_DATA_VAR = new InjectionToken("MISModalDataInjectionToken");
+
+/** @format */
+class ModalRef {
+    constructor(overlay) {
+        this.overlay = overlay;
+        this.afterClosed$ = new Subject();
+        this.afterClosed = this.afterClosed$.asObservable();
+    }
+    close(data) {
+        this.overlay.detach();
+        this.overlay.dispose();
+        this.afterClosed$.next(data);
+        this.afterClosed$.complete();
+    }
+}
+
+class ModuleWrapperComponent {
+    constructor() { }
+    bindComponent(type, injector) {
+        this.initComponent(type, injector);
+    }
+    initComponent(type, injector) {
+        this.modalPortal = new ComponentPortal(type, this.place, injector);
+    }
+}
+ModuleWrapperComponent.decorators = [
+    { type: Component, args: [{
+                selector: "mis-module-wrapper",
+                template: "<div class=\"mis-modal-body\" #place @slideInOut>\n  <ng-template [cdkPortalOutlet]=\"modalPortal\"></ng-template>\n</div>\n",
+                animations: [
+                    trigger("slideInOut", [
+                        transition(":enter", [
+                            style({ transform: "translateY(-30%)", opacity: 0 }),
+                            animate("200ms ease-out", style({ transform: "translatey(0%)", opacity: 1 })),
+                        ]),
+                        transition(":leave", [animate("200ms ease-out", style({ transform: "translatey(-30%)", opacity: 0 }))]),
+                    ]),
+                ],
+                styles: [".mis-modal-body{display:block;width:100%;height:100%;background-color:transparent;border-radius:12px;box-shadow:0 12px 24px rgba(0,0,0,.12),0 4px 8px rgba(0,0,0,.12);overflow:hidden}"]
+            },] }
+];
+ModuleWrapperComponent.ctorParameters = () => [];
+ModuleWrapperComponent.propDecorators = {
+    place: [{ type: ViewChild, args: ["place", { static: false, read: ViewContainerRef },] }]
+};
+
+class ModalService {
+    constructor(overlay, injector) {
+        this.overlay = overlay;
+        this.injector = injector;
+    }
+    show(component, data, options) {
+        const positionStrategy = this.calculatePosition(options);
+        const { width, height } = options || {};
+        const config = new OverlayConfig({
+            hasBackdrop: true,
+            positionStrategy,
+            scrollStrategy: this.overlay.scrollStrategies.noop(),
+            width: width,
+            height,
+            panelClass: "mis-modal",
+            backdropClass: "mis-modal-overlay",
+        });
+        const overlayRef = this.overlay.create(config);
+        const modalRef = new ModalRef(overlayRef);
+        const injector = this.createInjector(modalRef, this.injector, data);
+        const portal = new ComponentPortal(ModuleWrapperComponent, null);
+        this.componentInstance = overlayRef.attach(portal);
+        if (options === null || options === void 0 ? void 0 : options.closeOnBackdropClick) {
+            overlayRef.backdropClick().subscribe(() => modalRef.close());
+        }
+        this.componentInstance.instance.bindComponent(component, injector);
+        return modalRef;
+    }
+    createInjector(ref, inj, data) {
+        const injectorTokens = new WeakMap();
+        injectorTokens.set(ModalRef, ref);
+        injectorTokens.set(MODAL_DATA_VAR, data);
+        return new PortalInjector(inj, injectorTokens);
+    }
+    calculatePosition(options) {
+        const position = this.overlay.position().global().centerHorizontally().centerVertically();
+        if (options && screen.width > 600) {
+            if (options.top) {
+                position.top(options.top);
+            }
+            if (options.left) {
+                position.left(options.left);
+            }
+            if (options.right) {
+                position.right(options.right);
+            }
+            if (options.bottom) {
+                position.bottom(options.bottom);
+            }
+        }
+        return position;
+    }
+}
+ModalService.ɵprov = ɵɵdefineInjectable({ factory: function ModalService_Factory() { return new ModalService(ɵɵinject(Overlay), ɵɵinject(INJECTOR)); }, token: ModalService, providedIn: "root" });
+ModalService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: "root",
+            },] }
+];
+ModalService.ctorParameters = () => [
+    { type: Overlay },
+    { type: Injector }
+];
+
+class ModalModule {
+    static forRoot() {
+        return {
+            ngModule: ModalModule,
+            providers: [ModalService],
+        };
+    }
+    static forChild() {
+        return {
+            ngModule: ModalModule,
+            providers: [ModalService],
+        };
+    }
+}
+ModalModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [ModuleWrapperComponent],
+                imports: [
+                    CommonModule,
+                    OverlayModule,
+                    PortalModule
+                ],
+                entryComponents: [ModuleWrapperComponent]
+            },] }
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MODAL_DATA_VAR, ModalModule, ModalRef, ModalService, ModuleWrapperComponent as ɵa };
+//# sourceMappingURL=mis-crystal-design-system-modal.js.map

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

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

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/index.d.ts

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

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/modal/index.d.ts

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

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mis-crystal-design-system",
-  "version": "2.1.3",
+  "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);
+}