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

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

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

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

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

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

@@ -0,0 +1,106 @@
+import { ConnectionPositionPair, OverlayConfig, Overlay, OverlayModule } from '@angular/cdk/overlay';
+import { TemplatePortal, PortalModule } from '@angular/cdk/portal';
+import { Directive, ElementRef, ViewContainerRef, Input, HostListener, NgModule } from '@angular/core';
+import { take } from 'rxjs/operators';
+import { CommonModule } from '@angular/common';
+
+/** @format */
+class MenuDirective {
+    constructor(overlay, element, viewContainerRef) {
+        this.overlay = overlay;
+        this.element = element;
+        this.viewContainerRef = viewContainerRef;
+        this.positionX = "start";
+        this.positionY = "bottom";
+        this.offsetX = 0;
+        this.offsetY = 0;
+    }
+    onClick(event) {
+        this.menuShow();
+    }
+    menuShow() {
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(this.element)
+            .withPositions([
+            new ConnectionPositionPair({ originX: this.positionX, originY: this.positionY }, { overlayX: this.positionX, overlayY: this.positionY === "bottom" ? "top" : "bottom" }, this.offsetX, this.offsetY),
+            new ConnectionPositionPair({ originX: "start", originY: "bottom" }, { overlayX: "start", overlayY: "top" }, this.offsetX, this.offsetY),
+            new ConnectionPositionPair({ originX: "end", originY: "top" }, { overlayX: "end", overlayY: "bottom" }, this.offsetX, this.offsetY)
+        ])
+            .withPush(true);
+        const config = new OverlayConfig({
+            hasBackdrop: true,
+            positionStrategy,
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            backdropClass: "cdk-overlay-transparent-backdrop"
+        });
+        this.overlayRef = this.overlay.create(config);
+        const tempRef = new TemplatePortal(this.menu, this.viewContainerRef);
+        this.overlayRef.attach(tempRef);
+        this.overlayRef
+            .backdropClick()
+            .pipe(take(1))
+            .subscribe(res => {
+            this.close();
+        });
+    }
+    close() {
+        var _a, _b;
+        (_a = this.overlayRef) === null || _a === void 0 ? void 0 : _a.detach();
+        (_b = this.overlayRef) === null || _b === void 0 ? void 0 : _b.dispose();
+    }
+}
+MenuDirective.decorators = [
+    { type: Directive, args: [{
+                selector: "[misMenu]",
+                exportAs: "misMenu"
+            },] }
+];
+MenuDirective.ctorParameters = () => [
+    { type: Overlay },
+    { type: ElementRef },
+    { type: ViewContainerRef }
+];
+MenuDirective.propDecorators = {
+    menu: [{ type: Input, args: ["misMenu",] }],
+    positionX: [{ type: Input }],
+    positionY: [{ type: Input }],
+    offsetX: [{ type: Input }],
+    offsetY: [{ type: Input }],
+    onClick: [{ type: HostListener, args: ["click", ["$event"],] }]
+};
+
+class MenuCloseDirective {
+    constructor() { }
+    closeMenu() {
+        this.menu.close();
+    }
+}
+MenuCloseDirective.decorators = [
+    { type: Directive, args: [{
+                selector: "[misMenuClose]"
+            },] }
+];
+MenuCloseDirective.ctorParameters = () => [];
+MenuCloseDirective.propDecorators = {
+    menu: [{ type: Input, args: ["misMenuClose",] }],
+    closeMenu: [{ type: HostListener, args: ["click", [],] }]
+};
+
+/** @format */
+class MisMenuModule {
+}
+MisMenuModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [MenuDirective, MenuCloseDirective],
+                imports: [CommonModule, OverlayModule, PortalModule],
+                exports: [MenuDirective, MenuCloseDirective]
+            },] }
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MenuCloseDirective, MenuDirective, MisMenuModule };
+//# sourceMappingURL=mis-crystal-design-system-menu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mis-crystal-design-system-menu.js","sources":["../../../projects/mis-components/menu/menu.directive.ts","../../../projects/mis-components/menu/menu-close.directive.ts","../../../projects/mis-components/menu/menu.module.ts","../../../projects/mis-components/menu/mis-crystal-design-system-menu.ts"],"sourcesContent":["/** @format */\n\nimport { ConnectionPositionPair, Overlay, OverlayConfig, OverlayRef } from \"@angular/cdk/overlay\";\nimport { TemplatePortal } from \"@angular/cdk/portal\";\nimport { Directive, ElementRef, HostListener, Input, TemplateRef, ViewContainerRef } from \"@angular/core\";\nimport { take } from \"rxjs/operators\";\n\n@Directive({\n  selector: \"[misMenu]\",\n  exportAs: \"misMenu\"\n})\nexport class MenuDirective {\n  @Input(\"misMenu\") menu: TemplateRef<ElementRef>;\n  @Input() positionX: \"start\" | \"end\" = \"start\";\n  @Input() positionY: \"top\" | \"bottom\" = \"bottom\";\n  @Input() offsetX = 0;\n  @Input() offsetY = 0;\n  private overlayRef: OverlayRef;\n\n  constructor(private overlay: Overlay, private element: ElementRef, private viewContainerRef: ViewContainerRef) {}\n  @HostListener(\"click\", [\"$event\"]) onClick(event) {\n    this.menuShow();\n  }\n  private menuShow() {\n    const positionStrategy = this.overlay\n      .position()\n      .flexibleConnectedTo(this.element)\n      .withPositions([\n        new ConnectionPositionPair(\n          { originX: this.positionX, originY: this.positionY },\n          { overlayX: this.positionX, overlayY: this.positionY === \"bottom\" ? \"top\" : \"bottom\" },\n          this.offsetX,\n          this.offsetY\n        ),\n        new ConnectionPositionPair({ originX: \"start\", originY: \"bottom\" }, { overlayX: \"start\", overlayY: \"top\" }, this.offsetX, this.offsetY),\n        new ConnectionPositionPair({ originX: \"end\", originY: \"top\" }, { overlayX: \"end\", overlayY: \"bottom\" }, this.offsetX, this.offsetY)\n      ])\n      .withPush(true);\n    const config = new OverlayConfig({\n      hasBackdrop: true,\n      positionStrategy,\n      scrollStrategy: this.overlay.scrollStrategies.reposition(),\n      backdropClass: \"cdk-overlay-transparent-backdrop\"\n    });\n    this.overlayRef = this.overlay.create(config);\n\n    const tempRef = new TemplatePortal(this.menu, this.viewContainerRef);\n    this.overlayRef.attach(tempRef);\n    this.overlayRef\n      .backdropClick()\n      .pipe(take(1))\n      .subscribe(res => {\n        this.close();\n      });\n  }\n\n  close(): void {\n    this.overlayRef?.detach();\n    this.overlayRef?.dispose();\n  }\n}\n","import { Directive, HostListener, Input } from \"@angular/core\";\nimport { MenuDirective } from \"./menu.directive\";\n\n@Directive({\n  selector: \"[misMenuClose]\"\n})\nexport class MenuCloseDirective {\n  @Input(\"misMenuClose\") menu: MenuDirective;\n  constructor() {}\n\n  @HostListener(\"click\", []) closeMenu() {\n    this.menu.close();\n  }\n}\n","/** @format */\n\nimport { NgModule } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\nimport { MenuDirective } from \"./menu.directive\";\nimport { OverlayModule } from \"@angular/cdk/overlay\";\nimport { PortalModule } from \"@angular/cdk/portal\";\nimport { MenuCloseDirective } from \"./menu-close.directive\";\n\n@NgModule({\n  declarations: [MenuDirective, MenuCloseDirective],\n  imports: [CommonModule, OverlayModule, PortalModule],\n  exports: [MenuDirective, MenuCloseDirective]\n})\nexport class MisMenuModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,147 @@
+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@NgModule({\n  declarations: [ModuleWrapperComponent],\n  imports: [CommonModule, OverlayModule, PortalModule],\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/fesm2015/mis-crystal-design-system-multi-select-dropdown.js

@@ -0,0 +1,292 @@
+import { __rest } from 'tslib';
+import { EventEmitter, Component, ElementRef, ViewContainerRef, NgZone, Input, Output, ViewChild, NgModule } from '@angular/core';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { ConnectionPositionPair, OverlayConfig, Overlay, OverlayModule } from '@angular/cdk/overlay';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { CheckboxModule } from 'mis-crystal-design-system/checkbox';
+import { ButtonModule } from 'mis-crystal-design-system/button';
+
+class MultiSelectDropdownComponent {
+    constructor(eRef, overlay, viewContainerRef, ngZone) {
+        this.eRef = eRef;
+        this.overlay = overlay;
+        this.viewContainerRef = viewContainerRef;
+        this.ngZone = ngZone;
+        this.searchInput = "";
+        this.isOpen = false;
+        this.localSelectedItems = [];
+        this.localData = [];
+        this.searchData = [];
+        this.isSearchInputFocused = false;
+        this.SELECT_ALL_ENUM = "SELECT_ALL_ENABLED";
+        this.label = "Select";
+        this.height = "";
+        this.width = "";
+        this.dropdownListHeight = "";
+        this.dropdownListWidth = "";
+        this.dropdownListPosition = "Left";
+        this.enableSelectAll = false;
+        this.searchEnabled = true;
+        this.showSelectedCount = false;
+        this.noDataMessage = "No Data";
+        this.options = {
+            sortLabels: true
+        };
+        this.hideApplyButton = false;
+        this.onChange = new EventEmitter();
+    }
+    set data(values) {
+        this.localData = values.map(item => {
+            return Object.assign(Object.assign({}, item), { checked: false });
+        });
+    }
+    set selectedItems(values) {
+        this.handlerSetLocalSelectedItems(values);
+    }
+    ngOnInit() { }
+    handlerSetLocalSelectedItems(values) {
+        this.localSelectedItems = values;
+        this.localData = this.localData.map(item => {
+            if (item.value === this.SELECT_ALL_ENUM && values.length === this.localData.length - 1) {
+                return Object.assign(Object.assign({}, item), { checked: true });
+            }
+            if (values.some(base => base.value === item.value)) {
+                return Object.assign(Object.assign({}, item), { checked: true });
+            }
+            else {
+                if (item.value !== this.SELECT_ALL_ENUM || !this.hideApplyButton) {
+                    return Object.assign(Object.assign({}, item), { checked: false });
+                }
+                else {
+                    return item;
+                }
+            }
+        });
+        this.localData = this.formatValues(this.localData);
+    }
+    searchInputFocused(isFocused) {
+        this.isSearchInputFocused = isFocused;
+    }
+    searchInputCanceled(event) {
+        event.stopPropagation();
+        this.searchInput = "";
+        this.isSearchInputFocused = false;
+    }
+    toggleDropdown() {
+        this.ngZone.run(() => {
+            this.isOpen = !this.isOpen;
+            if (this.isOpen) {
+                this.handlerSetLocalSelectedItems(this.localSelectedItems);
+                this.localData = this.formatValues(this.localData);
+            }
+            if (this.isOpen)
+                this.openDropdown(this.popupContainer, this.selectElement.nativeElement);
+            else
+                this.onCancel();
+        });
+    }
+    openDropdown(template, origin) {
+        const positionsBottom = [
+            new ConnectionPositionPair({ originX: "start", originY: "bottom" }, { overlayX: "start", overlayY: "top" }, 0, 4),
+            new ConnectionPositionPair({ originX: "end", originY: "bottom" }, { overlayX: "end", overlayY: "top" }, 0, 4)
+        ];
+        const positionsTop = [
+            new ConnectionPositionPair({ originX: "start", originY: "top" }, { overlayX: "start", overlayY: "bottom" }, 0, -4),
+            new ConnectionPositionPair({ originX: "end", originY: "top" }, { overlayX: "end", overlayY: "bottom" }, 0, -4)
+        ];
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(origin)
+            .withPositions([
+            ...(this.dropdownListPosition === "Right" ? positionsBottom.reverse() : positionsBottom),
+            ...(this.dropdownListPosition === "Right" ? positionsTop.reverse() : positionsTop)
+        ])
+            .withPush(true);
+        const configs = new OverlayConfig({
+            hasBackdrop: true,
+            backdropClass: "cdk-overlay-transparent-backdrop",
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            positionStrategy,
+            width: origin.clientWidth
+        });
+        this.overlayRef = this.overlay.create(configs);
+        if (this.dropdownListWidth)
+            this.overlayRef.updateSize({ width: this.dropdownListWidth });
+        if (this.dropdownListHeight)
+            this.overlayRef.updateSize({ height: this.dropdownListHeight });
+        this.overlayRef.attach(new TemplatePortal(template, this.viewContainerRef));
+        this.overlayRef.backdropClick().subscribe(res => {
+            this.onCancel();
+        });
+    }
+    filterByValue(array, string) {
+        return array.filter(o => o.label.toLowerCase().includes(string.toLowerCase()));
+    }
+    searchInputOnChange(newValue) {
+        this.searchInput = newValue;
+        if (newValue) {
+            this.searchData = this.filterByValue(this.localData, newValue);
+        }
+        else {
+            this.searchData = [];
+            this.searchInput = "";
+        }
+    }
+    formatValues(array) {
+        let sortedArray = array;
+        if (this.options.sortLabels) {
+            const checkedValues = array
+                .filter(a => a.checked)
+                .sort((a, b) => (a.label > b.label ? 1 : b.label > a.label ? -1 : 0));
+            const unCheckedValues = array
+                .filter(a => !a.checked)
+                .sort((a, b) => (a.label > b.label ? 1 : b.label > a.label ? -1 : 0));
+            sortedArray = [...checkedValues, ...unCheckedValues].filter(t => t.value !== this.SELECT_ALL_ENUM);
+        }
+        if (!sortedArray.some(option => option.value === this.SELECT_ALL_ENUM) && this.enableSelectAll && sortedArray.length > 0) {
+            sortedArray.unshift({
+                label: "Select all",
+                value: this.SELECT_ALL_ENUM,
+                checked: sortedArray.every(y => y.checked)
+            });
+        }
+        return sortedArray;
+    }
+    toggleSelectedItems(event, item) {
+        event.stopPropagation();
+        if (this.enableSelectAll && item.value === this.SELECT_ALL_ENUM) {
+            this.localData = this.localData.map(t => (Object.assign(Object.assign({}, t), { checked: !item.checked })));
+            if (this.hideApplyButton) {
+                this.applyFilters();
+            }
+            return;
+        }
+        if (item.checked) {
+            this.localData = [
+                ...this.localData.map(a => {
+                    if (a.value === item.value || a.value === this.SELECT_ALL_ENUM) {
+                        return Object.assign(Object.assign({}, a), { checked: false });
+                    }
+                    return a;
+                })
+            ];
+        }
+        else {
+            this.localData = [
+                ...this.localData.map(a => {
+                    if (a.value === item.value) {
+                        return Object.assign(Object.assign({}, a), { checked: true });
+                    }
+                    return a;
+                })
+            ];
+            if (this.enableSelectAll && this.localData.filter(r => r.value !== this.SELECT_ALL_ENUM).every(t => t.checked)) {
+                this.localData = [
+                    ...this.localData.map(a => {
+                        if (a.value === this.SELECT_ALL_ENUM) {
+                            return Object.assign(Object.assign({}, a), { checked: true });
+                        }
+                        return a;
+                    })
+                ];
+            }
+        }
+        if (this.searchEnabled) {
+            this.searchInputOnChange(this.searchInput);
+        }
+        if (this.hideApplyButton) {
+            this.applyFilters();
+        }
+    }
+    applyFilters() {
+        this.onChange.emit(this.localData
+            .filter(a => {
+            return a.checked && a.value !== this.SELECT_ALL_ENUM;
+        })
+            .map(item => {
+            const { checked } = item, data = __rest(item, ["checked"]);
+            return data;
+        }));
+        if (!this.hideApplyButton) {
+            this.onCancel();
+        }
+    }
+    onReset() {
+        this.isSearchInputFocused = false;
+        this.onChange.emit([]);
+        this.isOpen = false;
+        this.searchInput = "";
+    }
+    onCancel() {
+        var _a;
+        this.isSearchInputFocused = false;
+        this.localData = this.localData.map(a => {
+            if (this.localSelectedItems.some(b => b.value === a.value && String(b.checked) !== String(a.checked))) {
+                return a;
+            }
+            else {
+                if (a.value !== this.SELECT_ALL_ENUM && this.hideApplyButton) {
+                    return Object.assign(Object.assign({}, a), { checked: false });
+                }
+                return a;
+            }
+        });
+        this.isOpen = false;
+        this.searchInput = "";
+        (_a = this.overlayRef) === null || _a === void 0 ? void 0 : _a.detach();
+        this.searchInput = "";
+    }
+}
+MultiSelectDropdownComponent.decorators = [
+    { type: Component, args: [{
+                selector: "mis-multi-select-dropdown",
+                template: "<div\n  class=\"container\"\n  [ngStyle]=\"{\n    height: height.length > 0 ? height : '',\n    width: width.length > 0 ? width : ''\n  }\"\n>\n  <div\n    class=\"dropdown\"\n    #select\n    tabindex=\"0\"\n    (keyup.enter)=\"toggleDropdown()\"\n    (click)=\"toggleDropdown()\"\n    [ngStyle]=\"{ background: isOpen ? '#E6EBF7' : '' }\"\n  >\n    <div class=\"label\">\n      <p class=\"text\">{{ label }}</p>\n      <p *ngIf=\"showSelectedCount && localSelectedItems?.length > 0\" class=\"count\">\n        {{ localSelectedItems?.length }}\n      </p>\n    </div>\n    <svg\n      class=\"handle\"\n      [ngStyle]=\"{ transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)' }\"\n      width=\"20\"\n      height=\"20\"\n      viewBox=\"0 0 20 20\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M13.825 7.15845L10 10.9751L6.175 7.15845L5 8.33345L10 13.3334L15 8.33345L13.825 7.15845Z\"\n        fill=\"#181F33\"\n      />\n    </svg>\n  </div>\n</div>\n<ng-template #popupContainer>\n  <div\n    class=\"popup-container\"\n    [ngStyle]=\"{\n      height: dropdownListHeight,\n      width: dropdownListWidth\n    }\"\n    [ngClass]=\"{\n      'position-left': dropdownListPosition === 'Left',\n      'position-right': dropdownListPosition === 'Right'\n    }\"\n  >\n    <div *ngIf=\"searchEnabled\" class=\"search-container\">\n      <svg\n        *ngIf=\"!isSearchInputFocused\"\n        class=\"search-icon\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M4.21508 11.1456C4.21508 7.3179 7.33722 4.21165 11.1926 4.21165C15.048 4.21165 18.1702 7.3179 18.1702 11.1456C18.1702 12.6931 17.6599 14.1226 16.7972 15.2767L15.3685 16.7013C14.2044 17.5668 12.759 18.0796 11.1926 18.0796C7.33722 18.0796 4.21508 14.9734 4.21508 11.1456ZM15.9421 17.7835C14.6021 18.7329 12.9627 19.2913 11.1926 19.2913C6.66977 19.2913 3 15.6461 3 11.1456C3 6.64512 6.66977 3 11.1926 3C15.7155 3 19.3852 6.64512 19.3852 11.1456C19.3852 12.9371 18.8037 14.5931 17.8184 15.9375L19.8361 17.4048C20.6705 17.912 21.7554 18.6543 20.2454 20.215C18.7353 21.7756 18.0099 20.6663 17.4991 19.8364L15.9421 17.7835Z\"\n          fill=\"#6A737D\"\n        />\n      </svg>\n      <input\n        [ngModel]=\"searchInput\"\n        [ngStyle]=\"{\n          paddingLeft: isSearchInputFocused ? '12px' : '45px',\n          border: isSearchInputFocused ? '1px solid #0937B2' : '1px solid #e0e0e0',\n          paddingRight: isSearchInputFocused ? '45px' : '10px'\n        }\"\n        (ngModelChange)=\"searchInputOnChange($event)\"\n        [placeholder]=\"isSearchInputFocused ? '' : 'Search Keyword'\"\n        (focus)=\"searchInputFocused(true)\"\n        class=\"search-input\"\n      />\n      <svg\n        *ngIf=\"isSearchInputFocused\"\n        class=\"cancel-icon\"\n        (click)=\"searchInputCanceled($event)\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M8.87446 7.32144C8.44588 6.89285 7.751 6.89285 7.32242 7.32144C6.89383 7.75002 6.89383 8.4449 7.32242 8.87349L10.4488 11.9999L7.32357 15.1252C6.89498 15.5538 6.89498 16.2486 7.32357 16.6772C7.75215 17.1058 8.44703 17.1058 8.87561 16.6772L12.0009 13.552L15.1261 16.6772C15.5547 17.1058 16.2496 17.1058 16.6781 16.6772C17.1067 16.2486 17.1067 15.5537 16.6781 15.1251L13.5529 11.9999L16.6793 8.87354C17.1079 8.44496 17.1079 7.75008 16.6793 7.3215C16.2507 6.89291 15.5558 6.89291 15.1273 7.3215L12.0009 10.4479L8.87446 7.32144Z\"\n          fill=\"#6A737D\"\n        />\n      </svg>\n    </div>\n    <div class=\"items\">\n      <div\n        class=\"item\"\n        tabindex=\"0\"\n        (keyup.enter)=\"toggleSelectedItems($event, item)\"\n        (click)=\"toggleSelectedItems($event, item)\"\n        *ngFor=\"let item of searchInput ? searchData : localData\"\n      >\n        <div class=\"checkbox-container-wrapper\">\n          <div class=\"checkbox-container\">\n            <mis-checkbox [checked]=\"item.checked\" tabindex=\"-1\"></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 && !hideApplyButton\" class=\"actions-container\">\n      <div style=\"width: calc(50% - 4px)\">\n        <mis-button [name]=\"'Reset'\" [type]=\"'Text'\" [width]=\"'100%'\" (click)=\"onReset()\"></mis-button>\n      </div>\n      <div style=\"width: calc(50% - 4px)\">\n        <mis-button [name]=\"'Apply'\" [type]=\"'Solid'\" [width]=\"'100%'\" (click)=\"applyFilters()\"></mis-button>\n      </div>\n    </div>\n  </div>\n</ng-template>\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:focus-visible,.container .dropdown:hover{background-color:#f5f7fc;outline:none}.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}.popup-container{width:100%;max-height:340px;padding-bottom:0;border:1px solid #e0e0e0;border-radius:8px;background-color:#fff;box-shadow:0 12px 24px 0 rgba(0,0,0,.12);display:flex;flex-direction:column;overflow:hidden;justify-content:space-between}.popup-container::-webkit-scrollbar{width:0;height:0}.popup-container .search-container{position:relative;box-sizing:border-box;padding:8px}.popup-container .search-container .search-icon{position:absolute;width:24px;height:24px;top:50%;transform:translateY(-50%);left:18px;z-index:1}.popup-container .search-container .search-input{height:40px;width:100%;padding:12px;border:1px solid #e0e0e0;box-sizing:border-box;border-radius:8px;outline:none;caret-color:#0937b2;font-style:normal;font-weight:400;font-size:12px;line-height:18px;display:flex;align-items:center;letter-spacing:.2px;color:#181f33}.popup-container .search-container .cancel-icon{position:absolute;cursor:pointer;width:24px;height:24px;top:50%;transform:translateY(-50%);right:18px;z-index:1}.popup-container .items{padding:8px 0 8px 8px;overflow-y:scroll}.popup-container .items::-webkit-scrollbar{width:5px;height:0}.popup-container .items::-webkit-scrollbar-thumb{background:#9aa7b4;border-radius:10px}.popup-container .items .noData{display:flex;justify-content:center;align-items:center;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.popup-container .items .item{cursor:pointer;display:flex;justify-content:flex-start;align-items:center;padding:8px 12px;border-radius:6px;height:auto}.popup-container .items .item:focus-visible,.popup-container .items .item:hover{background-color:#f5f7fc;outline:none}.popup-container .items .item .checkbox-container-wrapper{display:flex;justify-content:flex-start;align-items:center;width:90%}.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}.popup-container .items .item .checkbox-container-wrapper .checkbox-container input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.popup-container .items .item .checkbox-container-wrapper .checkbox-container input:checked~.checkmark:after{display:block}.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}.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)}.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:.2;text-overflow:ellipsis;overflow:hidden}.popup-container .items .item .icon-container{width:10%;display:flex;justify-content:flex-end}.popup-container .items .item .icon-container .icon{width:20px;height:20px}.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}.popup-container .actions-container .cancel{cursor:pointer;padding:10px 32px;text-align:center;font-size:16px;line-height:24px;border-radius:8px}.popup-container .actions-container .cancel:hover{background:rgba(9,55,178,.04)}.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}"]
+            },] }
+];
+MultiSelectDropdownComponent.ctorParameters = () => [
+    { type: ElementRef },
+    { type: Overlay },
+    { type: ViewContainerRef },
+    { type: NgZone }
+];
+MultiSelectDropdownComponent.propDecorators = {
+    data: [{ type: Input }],
+    label: [{ type: Input }],
+    height: [{ type: Input }],
+    width: [{ type: Input }],
+    dropdownListHeight: [{ type: Input }],
+    dropdownListWidth: [{ type: Input }],
+    dropdownListPosition: [{ type: Input }],
+    enableSelectAll: [{ type: Input }],
+    searchEnabled: [{ type: Input }],
+    showSelectedCount: [{ type: Input }],
+    noDataMessage: [{ type: Input }],
+    options: [{ type: Input }],
+    selectedItems: [{ type: Input }],
+    hideApplyButton: [{ type: Input }],
+    onChange: [{ type: Output }],
+    selectElement: [{ type: ViewChild, args: ["select", { static: false },] }],
+    popupContainer: [{ type: ViewChild, args: ["popupContainer", { static: false },] }]
+};
+
+class MultiSelectDropdownModule {
+    static forRoot() {
+        return { ngModule: MultiSelectDropdownModule, providers: [] };
+    }
+}
+MultiSelectDropdownModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [MultiSelectDropdownComponent],
+                imports: [CommonModule, FormsModule, OverlayModule, CheckboxModule, ButtonModule],
+                exports: [MultiSelectDropdownComponent]
+            },] }
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MultiSelectDropdownComponent, MultiSelectDropdownModule };
+//# sourceMappingURL=mis-crystal-design-system-multi-select-dropdown.js.map