mis-crystal-design-system 4.0.51 → 14.0.0

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

@@ -0,0 +1,191 @@
+import * as i0 from '@angular/core';
+import { Component, ViewChild, Directive, Input, HostListener, NgModule } from '@angular/core';
+import * as i1$1 from '@angular/cdk/overlay';
+import { OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
+import { take } from 'rxjs/operators';
+import { ComponentPortal } from '@angular/cdk/portal';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { genPositionPairs } from 'mis-crystal-design-system/utils';
+
+class ToolTipComponent {
+    constructor() {
+        this.toolTipText = "";
+        this.toolTipPosition = "bottom";
+        this.toolTipTextAlignment = "";
+    }
+    ngOnInit() { }
+    ngAfterViewInit() {
+        if (!this.container?.nativeElement)
+            return;
+        if (this.toolTipPosition === "top" || this.toolTipPosition === "bottom") {
+            const eleWidth = this.container.nativeElement.getBoundingClientRect();
+            this.container.nativeElement.style.left = eleWidth.width / -2 + "px";
+            return;
+        }
+        if (this.toolTipPosition === "left") {
+            const eleWidth = this.container.nativeElement.getBoundingClientRect();
+            this.container.nativeElement.style.left = -eleWidth.width + "px";
+        }
+    }
+}
+ToolTipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ToolTipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ToolTipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ToolTipComponent, selector: "mis-tooltip", viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div id=\"tooltip-container\" *ngIf=\"toolTipText.length > 0 || tooltipTemplate\" #container>\n  <div id=\"tooltip\">\n    <div *ngIf=\"tooltipTemplate; else tooltipText\">\n      <ng-container *ngTemplateOutlet=\"tooltipTemplate\"></ng-container>\n    </div>\n\n    <ng-template #tooltipText>\n      <div id=\"tooltip-text\" [innerHTML]=\"toolTipText\" \n           [ngStyle]=\"{'text-align' : toolTipTextAlignment ? toolTipTextAlignment : '' }\"></div>\n    </ng-template>\n\n    <span\n      id=\"arrow\"\n      [ngClass]=\"{\n        'arrow-left': toolTipPosition === 'left',\n        'arrow-right': toolTipPosition === 'right',\n        'arrow-top': toolTipPosition === 'top',\n        'arrow-bottom': toolTipPosition === 'bottom'\n      }\"\n    ></span>\n  </div>\n</div>\n", styles: ["#tooltip-container{position:absolute;z-index:1}#tooltip{position:relative;display:block;padding:8px 12px;border-radius:8px;color:#fff;background:#181f33;font-family:Lato,sans-serif;font-style:normal;font-weight:400;font-size:14px;line-height:20px;text-align:center;letter-spacing:.2px}#tooltip-text{width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#arrow{position:absolute;height:12px;width:12px;background:#181f33;z-index:1}.arrow-top{left:50%;bottom:-6px;transform:translate(-50%) rotate(-45deg);-webkit-transform:translateX(-50%) rotate(-45deg)}.arrow-bottom{left:50%;top:-6px;transform:translate(-50%) rotate(-45deg);-webkit-transform:translateX(-50%) rotate(-45deg)}.arrow-left{top:50%;right:-6px;transform:translateY(-50%) rotate(-45deg);-webkit-transform:translateY(-50%) rotate(-45deg)}.arrow-right{top:50%;left:-6px;transform:translateY(-50%) rotate(-45deg);-webkit-transform:translateY(-50%) rotate(-45deg)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ToolTipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mis-tooltip", template: "<div id=\"tooltip-container\" *ngIf=\"toolTipText.length > 0 || tooltipTemplate\" #container>\n  <div id=\"tooltip\">\n    <div *ngIf=\"tooltipTemplate; else tooltipText\">\n      <ng-container *ngTemplateOutlet=\"tooltipTemplate\"></ng-container>\n    </div>\n\n    <ng-template #tooltipText>\n      <div id=\"tooltip-text\" [innerHTML]=\"toolTipText\" \n           [ngStyle]=\"{'text-align' : toolTipTextAlignment ? toolTipTextAlignment : '' }\"></div>\n    </ng-template>\n\n    <span\n      id=\"arrow\"\n      [ngClass]=\"{\n        'arrow-left': toolTipPosition === 'left',\n        'arrow-right': toolTipPosition === 'right',\n        'arrow-top': toolTipPosition === 'top',\n        'arrow-bottom': toolTipPosition === 'bottom'\n      }\"\n    ></span>\n  </div>\n</div>\n", styles: ["#tooltip-container{position:absolute;z-index:1}#tooltip{position:relative;display:block;padding:8px 12px;border-radius:8px;color:#fff;background:#181f33;font-family:Lato,sans-serif;font-style:normal;font-weight:400;font-size:14px;line-height:20px;text-align:center;letter-spacing:.2px}#tooltip-text{width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#arrow{position:absolute;height:12px;width:12px;background:#181f33;z-index:1}.arrow-top{left:50%;bottom:-6px;transform:translate(-50%) rotate(-45deg);-webkit-transform:translateX(-50%) rotate(-45deg)}.arrow-bottom{left:50%;top:-6px;transform:translate(-50%) rotate(-45deg);-webkit-transform:translateX(-50%) rotate(-45deg)}.arrow-left{top:50%;right:-6px;transform:translateY(-50%) rotate(-45deg);-webkit-transform:translateY(-50%) rotate(-45deg)}.arrow-right{top:50%;left:-6px;transform:translateY(-50%) rotate(-45deg);-webkit-transform:translateY(-50%) rotate(-45deg)}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { container: [{
+                type: ViewChild,
+                args: ["container"]
+            }] } });
+
+class ToolTipDirective {
+    constructor(element, overlay, viewContainerRef) {
+        this.element = element;
+        this.overlay = overlay;
+        this.viewContainerRef = viewContainerRef;
+        this.isToolTipDisplayed = false;
+        this.toolTipText = "";
+        this.toolTipTextAlignment = "";
+        this.toolTipPosition = "bottom";
+        this.showOnHover = true;
+    }
+    set showToolTip(value) {
+        this.isToolTipDisplayed = value;
+        if (value)
+            this.displayToolTip();
+        else
+            this.hideToolTip();
+    }
+    set text(value) {
+        this.toolTipText = value;
+    }
+    set position(value) {
+        this.toolTipPosition = value;
+    }
+    set alignText(value) {
+        this.toolTipTextAlignment = value;
+    }
+    set tooltipTemplate(value) {
+        this.templateRef = value;
+    }
+    onMouseEnter() {
+        if (this.showOnHover)
+            this.displayToolTip();
+    }
+    onMouseLeave() {
+        if (this.showOnHover)
+            this.hideToolTip();
+    }
+    ngOnInit() { }
+    ngAfterViewInit() {
+        if (this.isToolTipDisplayed)
+            this.displayToolTip();
+        else
+            this.hideToolTip();
+    }
+    displayToolTip() {
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(this.element)
+            .withPositions(genPositionPairs({
+            positionX: "center",
+            positionY: this.toolTipPosition === "top" ? "top" : "center",
+            offsetX: this.positionTooltip("OFFSET_X"),
+            offsetY: this.positionTooltip("OFFSET_Y")
+        }, false))
+            .withPush(true);
+        const config = new OverlayConfig({
+            hasBackdrop: false,
+            positionStrategy,
+            scrollStrategy: this.overlay.scrollStrategies.reposition()
+        });
+        this.overlayRef = this.overlay.create(config);
+        const tempRef = new ComponentPortal(ToolTipComponent, this.viewContainerRef);
+        const tooltipRef = this.overlayRef.attach(tempRef);
+        tooltipRef.instance.tooltipTemplate = this.templateRef;
+        tooltipRef.instance.toolTipText = this.toolTipText;
+        tooltipRef.instance.toolTipPosition = this.toolTipPosition;
+        tooltipRef.instance.toolTipTextAlignment = this.toolTipTextAlignment;
+        this.overlayRef
+            .backdropClick()
+            .pipe(take(1))
+            .subscribe(() => {
+            this.hideToolTip();
+        });
+    }
+    positionTooltip(type) {
+        if (type === "OFFSET_X") {
+            return this.toolTipPosition === "right"
+                ? this.element.nativeElement.offsetWidth / 2 + 8
+                : this.toolTipPosition === "left"
+                    ? (this.element.nativeElement.offsetWidth / 2 + 8) * -1
+                    : this.toolTipPosition === "top" || this.toolTipPosition === "bottom"
+                        ? 0
+                        : 8;
+        }
+        if (type !== "OFFSET_Y")
+            return;
+        return this.toolTipPosition === "right" || this.toolTipPosition === "left"
+            ? -18
+            : this.toolTipPosition === "top"
+                ? -44
+                : this.toolTipPosition === "bottom"
+                    ? this.element.nativeElement.offsetHeight / 2 + 8
+                    : 8;
+    }
+    hideToolTip() {
+        this.overlayRef?.detach();
+        this.overlayRef?.dispose();
+    }
+}
+ToolTipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ToolTipDirective, deps: [{ token: i0.ElementRef }, { token: i1$1.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+ToolTipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: ToolTipDirective, selector: "[misToolTip]", inputs: { showOnHover: "showOnHover", showToolTip: "showToolTip", text: "text", position: "position", alignText: "alignText", tooltipTemplate: "tooltipTemplate" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ToolTipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[misToolTip]"
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.Overlay }, { type: i0.ViewContainerRef }]; }, propDecorators: { showOnHover: [{
+                type: Input
+            }], showToolTip: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }], alignText: [{
+                type: Input
+            }], tooltipTemplate: [{
+                type: Input
+            }], onMouseEnter: [{
+                type: HostListener,
+                args: ["mouseenter"]
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ["mouseleave"]
+            }] } });
+
+class ToolTipModule {
+    static forRoot() {
+        return { ngModule: ToolTipModule, providers: [] };
+    }
+}
+ToolTipModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ToolTipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ToolTipModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: ToolTipModule, declarations: [ToolTipDirective, ToolTipComponent], imports: [CommonModule, OverlayModule], exports: [ToolTipDirective, ToolTipComponent] });
+ToolTipModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ToolTipModule, imports: [CommonModule, OverlayModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ToolTipModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ToolTipDirective, ToolTipComponent],
+                    imports: [CommonModule, OverlayModule],
+                    exports: [ToolTipDirective, ToolTipComponent]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ToolTipComponent, ToolTipDirective, ToolTipModule };
+//# sourceMappingURL=mis-crystal-design-system-tooltip.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mis-crystal-design-system-tooltip.mjs","sources":["../../../projects/mis-components/tooltip/tooltip-container/tooltip.component.ts","../../../projects/mis-components/tooltip/tooltip-container/tooltip.component.html","../../../projects/mis-components/tooltip/tooltip.directive.ts","../../../projects/mis-components/tooltip/tooltip.module.ts","../../../projects/mis-components/tooltip/mis-crystal-design-system-tooltip.ts"],"sourcesContent":["import { AfterViewInit, Component, ElementRef, Inject, OnInit, TemplateRef, ViewChild } from \"@angular/core\";\nimport { ITooltipPositions } from \"../models/tooltip.model\";\n\n@Component({\n  selector: \"mis-tooltip\",\n  templateUrl: \"./tooltip.component.html\",\n  styleUrls: [\"./tooltip.component.scss\"]\n})\nexport class ToolTipComponent implements OnInit, AfterViewInit {\n  public toolTipText: string = \"\";\n  public toolTipPosition: ITooltipPositions = \"bottom\";\n  public toolTipTextAlignment: string = \"\";\n  tooltipTemplate: TemplateRef<any>\n\n  @ViewChild(\"container\") container: ElementRef;\n\n  constructor() {}\n  ngOnInit() {}\n  ngAfterViewInit() {\n    if (!this.container?.nativeElement) return;\n    if (this.toolTipPosition === \"top\" || this.toolTipPosition === \"bottom\") {\n      const eleWidth = this.container.nativeElement.getBoundingClientRect();\n      this.container.nativeElement.style.left = eleWidth.width / -2 + \"px\";\n      return;\n    }\n    if (this.toolTipPosition === \"left\") {\n      const eleWidth = this.container.nativeElement.getBoundingClientRect();\n      this.container.nativeElement.style.left = -eleWidth.width + \"px\";\n    }\n  }\n}\n","<div id=\"tooltip-container\" *ngIf=\"toolTipText.length > 0 || tooltipTemplate\" #container>\n  <div id=\"tooltip\">\n    <div *ngIf=\"tooltipTemplate; else tooltipText\">\n      <ng-container *ngTemplateOutlet=\"tooltipTemplate\"></ng-container>\n    </div>\n\n    <ng-template #tooltipText>\n      <div id=\"tooltip-text\" [innerHTML]=\"toolTipText\" \n           [ngStyle]=\"{'text-align' : toolTipTextAlignment ? toolTipTextAlignment : '' }\"></div>\n    </ng-template>\n\n    <span\n      id=\"arrow\"\n      [ngClass]=\"{\n        'arrow-left': toolTipPosition === 'left',\n        'arrow-right': toolTipPosition === 'right',\n        'arrow-top': toolTipPosition === 'top',\n        'arrow-bottom': toolTipPosition === 'bottom'\n      }\"\n    ></span>\n  </div>\n</div>\n","import { AfterViewInit, Directive, ElementRef, HostListener, Input, OnInit, TemplateRef, ViewContainerRef } from \"@angular/core\";\nimport { Overlay, OverlayConfig, OverlayRef } from \"@angular/cdk/overlay\";\nimport { take } from \"rxjs/operators\";\nimport { ComponentPortal } from \"@angular/cdk/portal\";\nimport { ToolTipComponent } from \"./tooltip-container/tooltip.component\";\nimport { genPositionPairs } from \"mis-crystal-design-system/utils\";\nimport { ITooltipPositions } from \"./models/tooltip.model\";\n\n@Directive({\n  selector: \"[misToolTip]\"\n})\nexport class ToolTipDirective implements OnInit, AfterViewInit {\n  public isToolTipDisplayed: boolean = false;\n  public toolTipText: string = \"\";\n  public toolTipTextAlignment: string = \"\";\n  public toolTipPosition: ITooltipPositions = \"bottom\";\n  private overlayRef: OverlayRef;\n  private templateRef: TemplateRef<any>;\n\n  @Input() showOnHover: boolean = true;\n  @Input() set showToolTip(value: boolean) {\n    this.isToolTipDisplayed = value;\n    if (value) this.displayToolTip();\n    else this.hideToolTip();\n  }\n  @Input() set text(value: string) {\n    this.toolTipText = value;\n  }\n  @Input() set position(value: ITooltipPositions) {\n    this.toolTipPosition = value;\n  }\n  @Input() set alignText(value: string) {\n    this.toolTipTextAlignment = value;\n  }\n  @Input() set tooltipTemplate(value: TemplateRef<any>){\n    this.templateRef = value;\n  }\n\n  @HostListener(\"mouseenter\") onMouseEnter() {\n    if (this.showOnHover) this.displayToolTip();\n  }\n  @HostListener(\"mouseleave\") onMouseLeave() {\n    if (this.showOnHover) this.hideToolTip();\n  }\n\n  constructor(private element: ElementRef, private overlay: Overlay, private viewContainerRef: ViewContainerRef) {}\n\n  ngOnInit() {}\n  ngAfterViewInit() {\n    if (this.isToolTipDisplayed) this.displayToolTip();\n    else this.hideToolTip();\n  }\n\n  displayToolTip() {\n    const positionStrategy = this.overlay\n      .position()\n      .flexibleConnectedTo(this.element)\n      .withPositions(\n        genPositionPairs(\n          {\n            positionX: \"center\",\n            positionY: this.toolTipPosition === \"top\" ? \"top\" : \"center\",\n            offsetX: this.positionTooltip(\"OFFSET_X\"),\n            offsetY: this.positionTooltip(\"OFFSET_Y\")\n          },\n          false\n        )\n      )\n      .withPush(true);\n    const config = new OverlayConfig({\n      hasBackdrop: false,\n      positionStrategy,\n      scrollStrategy: this.overlay.scrollStrategies.reposition()\n    });\n    this.overlayRef = this.overlay.create(config);\n    const tempRef = new ComponentPortal(ToolTipComponent, this.viewContainerRef);\n    const tooltipRef = this.overlayRef.attach(tempRef);\n    tooltipRef.instance.tooltipTemplate = this.templateRef;\n    tooltipRef.instance.toolTipText = this.toolTipText;\n    tooltipRef.instance.toolTipPosition = this.toolTipPosition;\n    tooltipRef.instance.toolTipTextAlignment = this.toolTipTextAlignment;\n    this.overlayRef\n      .backdropClick()\n      .pipe(take(1))\n      .subscribe(() => {\n        this.hideToolTip();\n      });\n  }\n\n  positionTooltip(type: \"OFFSET_X\" | \"OFFSET_Y\") {\n    if (type === \"OFFSET_X\") {\n      return this.toolTipPosition === \"right\"\n        ? this.element.nativeElement.offsetWidth / 2 + 8\n        : this.toolTipPosition === \"left\"\n        ? (this.element.nativeElement.offsetWidth / 2 + 8) * -1\n        : this.toolTipPosition === \"top\" || this.toolTipPosition === \"bottom\"\n        ? 0\n        : 8;\n    }\n    if (type !== \"OFFSET_Y\") return;\n    return this.toolTipPosition === \"right\" || this.toolTipPosition === \"left\"\n      ? -18\n      : this.toolTipPosition === \"top\"\n      ? -44\n      : this.toolTipPosition === \"bottom\"\n      ? this.element.nativeElement.offsetHeight / 2 + 8\n      : 8;\n  }\n\n  hideToolTip() {\n    this.overlayRef?.detach();\n    this.overlayRef?.dispose();\n  }\n}\n","import { NgModule, ModuleWithProviders } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\nimport { OverlayModule } from \"@angular/cdk/overlay\";\nimport { ToolTipDirective } from \"./tooltip.directive\";\nimport { ToolTipComponent } from \"./tooltip-container/tooltip.component\";\n\n@NgModule({\n    declarations: [ToolTipDirective, ToolTipComponent],\n    imports: [CommonModule, OverlayModule],\n    exports: [ToolTipDirective, ToolTipComponent]\n})\nexport class ToolTipModule {\n  static forRoot(): ModuleWithProviders<ToolTipModule> {\n    return { ngModule: ToolTipModule, providers: [] };\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1"],"mappings":"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"}

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

@@ -0,0 +1,24 @@
+import { ConnectionPositionPair } from '@angular/cdk/overlay';
+
+const genPositionPairs = ({ positionX, positionY, offsetX = 0, offsetY = 0 }, isResponsive) => {
+    const positions = [
+        new ConnectionPositionPair({ originX: positionX, originY: positionY }, {
+            overlayX: positionX,
+            overlayY: positionY
+        }, offsetX, offsetY),
+        new ConnectionPositionPair({ originX: "center", originY: "bottom" }, { overlayX: "center", overlayY: "top" }, offsetX, offsetY),
+        new ConnectionPositionPair({ originX: "center", originY: "top" }, { overlayX: "center", overlayY: "bottom" }, offsetX, offsetY),
+        new ConnectionPositionPair({ originX: "start", originY: "bottom" }, { overlayX: "start", overlayY: "top" }, offsetX, offsetY),
+        new ConnectionPositionPair({ originX: "start", originY: "top" }, { overlayX: "start", overlayY: "bottom" }, offsetX, offsetY),
+        new ConnectionPositionPair({ originX: "end", originY: "bottom" }, { overlayX: "end", overlayY: "top" }, offsetX, offsetY),
+        new ConnectionPositionPair({ originX: "end", originY: "top" }, { overlayX: "end", overlayY: "bottom" }, offsetX, offsetY)
+    ];
+    return isResponsive ? positions : positions.slice(0, 1);
+};
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { genPositionPairs };
+//# sourceMappingURL=mis-crystal-design-system-utils.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mis-crystal-design-system-utils.mjs","sources":["../../../projects/mis-components/utils/index.ts","../../../projects/mis-components/utils/mis-crystal-design-system-utils.ts"],"sourcesContent":["import { ConnectionPositionPair } from \"@angular/cdk/overlay\";\n\nexport const genPositionPairs = ({ positionX, positionY, offsetX = 0, offsetY = 0 }, isResponsive: boolean): ConnectionPositionPair[] => {\n  const positions = [\n    new ConnectionPositionPair(\n      { originX: positionX, originY: positionY },\n      {\n        overlayX: positionX,\n        overlayY: positionY\n      },\n      offsetX,\n      offsetY\n    ),\n    new ConnectionPositionPair({ originX: \"center\", originY: \"bottom\" }, { overlayX: \"center\", overlayY: \"top\" }, offsetX, offsetY),\n    new ConnectionPositionPair({ originX: \"center\", originY: \"top\" }, { overlayX: \"center\", overlayY: \"bottom\" }, offsetX, offsetY),\n    new ConnectionPositionPair({ originX: \"start\", originY: \"bottom\" }, { overlayX: \"start\", overlayY: \"top\" }, offsetX, offsetY),\n    new ConnectionPositionPair({ originX: \"start\", originY: \"top\" }, { overlayX: \"start\", overlayY: \"bottom\" }, offsetX, offsetY),\n    new ConnectionPositionPair({ originX: \"end\", originY: \"bottom\" }, { overlayX: \"end\", overlayY: \"top\" }, offsetX, offsetY),\n    new ConnectionPositionPair({ originX: \"end\", originY: \"top\" }, { overlayX: \"end\", overlayY: \"bottom\" }, offsetX, offsetY)\n  ];\n  return isResponsive ? positions : positions.slice(0, 1);\n};\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;MAEa,gBAAgB,GAAG,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,GAAG,CAAC,EAAE,OAAO,GAAG,CAAC,EAAE,EAAE,YAAqB,KAA8B;AACtI,IAAA,MAAM,SAAS,GAAG;QAChB,IAAI,sBAAsB,CACxB,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,EAC1C;AACE,YAAA,QAAQ,EAAE,SAAS;AACnB,YAAA,QAAQ,EAAE,SAAS;SACpB,EACD,OAAO,EACP,OAAO,CACR;QACD,IAAI,sBAAsB,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,CAAC;QAC/H,IAAI,sBAAsB,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAE,OAAO,CAAC;QAC/H,IAAI,sBAAsB,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,CAAC;QAC7H,IAAI,sBAAsB,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAE,OAAO,CAAC;QAC7H,IAAI,sBAAsB,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,CAAC;QACzH,IAAI,sBAAsB,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAE,OAAO,CAAC;KAC1H,CAAC;AACF,IAAA,OAAO,YAAY,GAAG,SAAS,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAC1D;;ACrBA;;AAEG;;;;"}

package/fesm2020/mis-crystal-design-system-virtual-scroll.mjs

@@ -0,0 +1,154 @@
+import * as i2 from '@angular/cdk/scrolling';
+import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, Input, ViewChild, ContentChild, Output, NgModule } from '@angular/core';
+import * as i3 from 'mis-crystal-design-system/loader';
+import { LoaderModule } from 'mis-crystal-design-system/loader';
+import { BehaviorSubject, of } from 'rxjs';
+import { tap, catchError, throttleTime, mergeMap, scan } from 'rxjs/operators';
+
+class VirtualScrollComponent {
+    constructor(changeDetectorRef) {
+        this.changeDetectorRef = changeDetectorRef;
+        // Infinite scroll related variables
+        this.offset = new BehaviorSubject(null);
+        this.endOfInfiniteData = false;
+        this.rowsLoading = false;
+        // Main state managing variables
+        this.loading = false;
+        this.error = false;
+        this.config = {
+            minBufferPx: 2400,
+            maxBufferPx: 2400,
+            rowHeight: 128,
+            pageSize: 5,
+            infiniteScrollDataFunction: (offset, pageSize) => of([1, 2, 3, 4, 5])
+        };
+        this.intialized = new EventEmitter();
+        this.switchOffInfiniteScroll = () => {
+            this.error = false;
+            this.loading = true;
+            this.data$ = this.config.data$.pipe(tap(() => {
+                this.loading = false;
+                this.changeDetectorRef.detectChanges();
+            }), catchError(err => {
+                console.error("Error: Unknown error occurred while fetching calendar data", err);
+                this.loading = false;
+                this.error = true;
+                return [];
+            }));
+        };
+        this.switchOnInfiniteScroll = () => {
+            this.error = false;
+            this.loading = true;
+            this.endOfInfiniteData = false;
+            this.offset.next(0);
+            this.setupInfiniteScroll();
+        };
+    }
+    ngOnInit() {
+        this.switchOnInfiniteScroll();
+        this.virtualScrollApi = {
+            toggleLoader: () => this.loading = !this.loading,
+            toggleError: () => this.error = !this.error,
+            switchOnInfiniteScroll: this.switchOnInfiniteScroll,
+            switchOffInfiniteScroll: this.switchOffInfiniteScroll
+        };
+        this.changeDetectorRef.detectChanges();
+        this.intialized.emit(this.virtualScrollApi);
+    }
+    setupInfiniteScroll() {
+        const batchMap = this.offset.pipe(throttleTime(500), mergeMap(offset => this.getBatch(offset)), scan((acc, batch) => {
+            return [...acc, ...batch];
+        }, []));
+        this.data$ = batchMap.pipe(tap(data => {
+            this.rowsLoading = false;
+            this.loading = false;
+            setTimeout(() => {
+                this.changeDetectorRef.detectChanges();
+            }, 50);
+        }));
+    }
+    nextBatch(offset) {
+        if (this.endOfInfiniteData) {
+            return;
+        }
+        const end = this.viewPort.getRenderedRange().end;
+        const total = this.viewPort.getDataLength();
+        offset = Math.ceil(offset / this.config.pageSize);
+        if (end === total && !this.rowsLoading) {
+            this.offset.next(offset);
+        }
+    }
+    getBatch(offset) {
+        this.rowsLoading = true;
+        if (offset == null)
+            offset = 0;
+        return this.config
+            .infiniteScrollDataFunction(offset, this.config.pageSize)
+            .pipe(tap((arr) => {
+            arr.length < this.config.pageSize ? (this.endOfInfiniteData = true) : null;
+        }), catchError(err => {
+            console.error("Error: Unknown error occurred while fetching calendar data", err);
+            this.rowsLoading = false;
+            this.loading = false;
+            this.error = true;
+            return [];
+        }));
+    }
+}
+VirtualScrollComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: VirtualScrollComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+VirtualScrollComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: VirtualScrollComponent, selector: "mis-virtual-scroll", inputs: { config: "config" }, outputs: { intialized: "intialized" }, queries: [{ propertyName: "customItem", first: true, predicate: ["virtualScrollItem"], descendants: true }], viewQueries: [{ propertyName: "viewPort", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], ngImport: i0, template: "<div class=\"state-container\" *ngIf=\"loading\">\n    <mis-loader></mis-loader>\n</div>\n<div class=\"state-container\" *ngIf=\"!loading && error\">\n    <span>Unknown error has occurred.</span>\n</div>\n<ng-container *ngIf=\"data$ | async as data\">\n    <cdk-virtual-scroll-viewport\n        *ngIf=\"!loading && !error\"\n        #viewport\n        [minBufferPx]=\"config.minBufferPx\"\n        [maxBufferPx]=\"config.maxBufferPx\"\n        [itemSize]=\"this.config.rowHeight\"\n        (scrolledIndexChange)=\"nextBatch(data.length)\"\n    >\n        <ng-container *cdkVirtualFor=\"let item of data;  let i = index\">\n            <ng-container\n            [ngTemplateOutlet]=\"customItem\"\n            [ngTemplateOutletContext]=\"{ $implicit: item, index: i }\"\n            ></ng-container>\n        </ng-container>\n        <div id=\"loader-container\" *ngIf=\"rowsLoading\">\n            <mis-loader></mis-loader>\n        </div>\n    </cdk-virtual-scroll-viewport>\n</ng-container>", styles: ["cdk-virtual-scroll-viewport{height:100%}#main-container{height:100%;width:100%}.state-container{height:100%;width:100%;display:flex;justify-content:center;align-items:center}#loader-container{width:100%;height:56px;display:flex;justify-content:center;align-items:center}::ng-deep #spinner{position:relative!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: i3.LoaderComponent, selector: "mis-loader", inputs: ["mobileView"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: VirtualScrollComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mis-virtual-scroll", template: "<div class=\"state-container\" *ngIf=\"loading\">\n    <mis-loader></mis-loader>\n</div>\n<div class=\"state-container\" *ngIf=\"!loading && error\">\n    <span>Unknown error has occurred.</span>\n</div>\n<ng-container *ngIf=\"data$ | async as data\">\n    <cdk-virtual-scroll-viewport\n        *ngIf=\"!loading && !error\"\n        #viewport\n        [minBufferPx]=\"config.minBufferPx\"\n        [maxBufferPx]=\"config.maxBufferPx\"\n        [itemSize]=\"this.config.rowHeight\"\n        (scrolledIndexChange)=\"nextBatch(data.length)\"\n    >\n        <ng-container *cdkVirtualFor=\"let item of data;  let i = index\">\n            <ng-container\n            [ngTemplateOutlet]=\"customItem\"\n            [ngTemplateOutletContext]=\"{ $implicit: item, index: i }\"\n            ></ng-container>\n        </ng-container>\n        <div id=\"loader-container\" *ngIf=\"rowsLoading\">\n            <mis-loader></mis-loader>\n        </div>\n    </cdk-virtual-scroll-viewport>\n</ng-container>", styles: ["cdk-virtual-scroll-viewport{height:100%}#main-container{height:100%;width:100%}.state-container{height:100%;width:100%;display:flex;justify-content:center;align-items:center}#loader-container{width:100%;height:56px;display:flex;justify-content:center;align-items:center}::ng-deep #spinner{position:relative!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { config: [{
+                type: Input,
+                args: ["config"]
+            }], viewPort: [{
+                type: ViewChild,
+                args: [CdkVirtualScrollViewport]
+            }], customItem: [{
+                type: ContentChild,
+                args: ["virtualScrollItem", { static: false }]
+            }], intialized: [{
+                type: Output
+            }] } });
+
+class VirtualScrollModule {
+    static forRoot() {
+        return { ngModule: VirtualScrollModule, providers: [] };
+    }
+}
+VirtualScrollModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: VirtualScrollModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+VirtualScrollModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: VirtualScrollModule, declarations: [VirtualScrollComponent], imports: [CommonModule,
+        ScrollingModule,
+        LoaderModule], exports: [VirtualScrollComponent, ScrollingModule] });
+VirtualScrollModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: VirtualScrollModule, imports: [CommonModule,
+        ScrollingModule,
+        LoaderModule, ScrollingModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: VirtualScrollModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        VirtualScrollComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        ScrollingModule,
+                        LoaderModule
+                    ],
+                    exports: [VirtualScrollComponent, ScrollingModule],
+                }]
+        }] });
+
+// import { VirtualScrollModule } from "./virtual-scroll.module";
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { VirtualScrollComponent, VirtualScrollModule };
+//# sourceMappingURL=mis-crystal-design-system-virtual-scroll.mjs.map

package/fesm2020/mis-crystal-design-system-virtual-scroll.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mis-crystal-design-system-virtual-scroll.mjs","sources":["../../../projects/mis-components/virtual-scroll/virtual-scroll.component.ts","../../../projects/mis-components/virtual-scroll/virtual-scroll.component.html","../../../projects/mis-components/virtual-scroll/virtual-scroll.module.ts","../../../projects/mis-components/virtual-scroll/public_api.ts","../../../projects/mis-components/virtual-scroll/mis-crystal-design-system-virtual-scroll.ts"],"sourcesContent":["import { ChangeDetectorRef, Component, ContentChild, EventEmitter, Input, OnInit, Output, TemplateRef, ViewChild } from \"@angular/core\";\nimport { CdkVirtualScrollViewport } from \"@angular/cdk/scrolling\";\n\nimport { BehaviorSubject, Observable, of } from \"rxjs\";\nimport { catchError, mergeMap, scan, tap, throttleTime } from \"rxjs/operators\";\nimport { IVirtualScrollConfig } from \"./virtual-scroll.constants\";\n\n@Component({\n    selector: \"mis-virtual-scroll\",\n    templateUrl: \"./virtual-scroll.component.html\",\n    styleUrls: [\"./virtual-scroll.component.scss\"],\n  })\nexport class VirtualScrollComponent implements OnInit {\n\n    // Infinite scroll related variables\n    offset = new BehaviorSubject(null);\n    endOfInfiniteData: boolean = false;\n    rowsLoading: boolean = false;\n    \n    // Main state managing variables\n    loading: boolean = false\n    error: boolean = false\n    \n    // Scroll data related variables\n    data$: Observable<any>\n    @Input(\"config\") config: IVirtualScrollConfig = {\n        minBufferPx: 2400,\n        maxBufferPx: 2400,\n        rowHeight: 128,\n        pageSize: 5,\n        infiniteScrollDataFunction: (offset, pageSize) => of([1,2,3,4,5])\n    };\n    @ViewChild(CdkVirtualScrollViewport) viewPort: CdkVirtualScrollViewport;\n    @ContentChild(\"virtualScrollItem\", { static: false })\n    customItem: TemplateRef<Element>;\n    @Output() intialized = new EventEmitter<any>();\n\n    virtualScrollApi: any\n\n\n    constructor(private changeDetectorRef: ChangeDetectorRef){}\n    ngOnInit(): void {\n        this.switchOnInfiniteScroll()\n        this.virtualScrollApi = {\n            toggleLoader: () => this.loading = !this.loading,\n            toggleError: () => this.error = !this.error,\n            switchOnInfiniteScroll: this.switchOnInfiniteScroll,\n            switchOffInfiniteScroll: this.switchOffInfiniteScroll\n        }\n        this.changeDetectorRef.detectChanges();\n        this.intialized.emit(this.virtualScrollApi)\n    }\n    switchOffInfiniteScroll = (): void => {\n        this.error = false\n        this.loading = true\n        this.data$ = this.config.data$.pipe(\n            tap(() => {\n                this.loading = false\n                this.changeDetectorRef.detectChanges()\n            }),\n            catchError(err => {\n                console.error(\"Error: Unknown error occurred while fetching calendar data\", err);\n                this.loading = false;\n                this.error = true;\n                return [];\n            })\n        )\n    }\n    switchOnInfiniteScroll = (): void => {\n        this.error = false\n        this.loading = true\n        this.endOfInfiniteData = false;\n        this.offset.next(0)\n        this.setupInfiniteScroll()\n    }\n    setupInfiniteScroll(): void {\n        const batchMap = this.offset.pipe(\n          throttleTime(500),\n          mergeMap(offset => this.getBatch(offset)),\n          scan((acc: Array<any>, batch: Array<any>) => {\n            return [...acc, ...batch];\n          }, [])\n        );\n        this.data$ = batchMap.pipe(\n            tap(data => {\n                this.rowsLoading = false;\n                this.loading = false;\n                setTimeout(() => {\n                    this.changeDetectorRef.detectChanges();\n                }, 50)\n            })\n        );\n    }\n    nextBatch(offset): void {\n        if (this.endOfInfiniteData) {\n            return;\n        }\n        const end = this.viewPort.getRenderedRange().end;\n        const total = this.viewPort.getDataLength();\n        offset = Math.ceil(offset / this.config.pageSize)\n        if (end === total && !this.rowsLoading) {\n            this.offset.next(offset);\n        }\n    }\n    getBatch(offset): Observable<any> {\n        this.rowsLoading = true;\n        if (offset == null) offset = 0;\n        return this.config\n            .infiniteScrollDataFunction(offset, this.config.pageSize)\n            .pipe(\n                tap((arr: Array<any>) => {\n                    arr.length < this.config.pageSize ? (this.endOfInfiniteData = true) : null;\n                }),\n                catchError(err => {\n                    console.error(\"Error: Unknown error occurred while fetching calendar data\", err);\n                    this.rowsLoading = false;\n                    this.loading = false;\n                    this.error = true;\n                    return [];\n                })\n            );\n    }\n    \n}","<div class=\"state-container\" *ngIf=\"loading\">\n    <mis-loader></mis-loader>\n</div>\n<div class=\"state-container\" *ngIf=\"!loading && error\">\n    <span>Unknown error has occurred.</span>\n</div>\n<ng-container *ngIf=\"data$ | async as data\">\n    <cdk-virtual-scroll-viewport\n        *ngIf=\"!loading && !error\"\n        #viewport\n        [minBufferPx]=\"config.minBufferPx\"\n        [maxBufferPx]=\"config.maxBufferPx\"\n        [itemSize]=\"this.config.rowHeight\"\n        (scrolledIndexChange)=\"nextBatch(data.length)\"\n    >\n        <ng-container *cdkVirtualFor=\"let item of data;  let i = index\">\n            <ng-container\n            [ngTemplateOutlet]=\"customItem\"\n            [ngTemplateOutletContext]=\"{ $implicit: item, index: i }\"\n            ></ng-container>\n        </ng-container>\n        <div id=\"loader-container\" *ngIf=\"rowsLoading\">\n            <mis-loader></mis-loader>\n        </div>\n    </cdk-virtual-scroll-viewport>\n</ng-container>","import { ScrollingModule } from \"@angular/cdk/scrolling\";\nimport { CommonModule } from \"@angular/common\";\nimport { ModuleWithProviders, NgModule } from \"@angular/core\"\n\nimport { LoaderModule} from \"mis-crystal-design-system/loader\"\n\nimport { VirtualScrollComponent } from \"./virtual-scroll.component\";\n\n@NgModule({\n    declarations:[\n        VirtualScrollComponent\n    ],\n    imports: [\n        CommonModule,\n        ScrollingModule,\n        LoaderModule\n    ],\n    exports:[VirtualScrollComponent, ScrollingModule],\n})\nexport class VirtualScrollModule{ \n    static forRoot() : ModuleWithProviders<VirtualScrollModule> {\n        return { ngModule: VirtualScrollModule, providers: []}\n    }\n}","// import { VirtualScrollModule } from \"./virtual-scroll.module\";\n\nexport { VirtualScrollModule } from \"./virtual-scroll.module\";\nexport { VirtualScrollComponent } from \"./virtual-scroll.component\";\nexport { IVirtualScrollApi, IVirtualScrollConfig } from \"./virtual-scroll.constants\"\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,128 @@
+import { ReplaySubject, Subject } from 'rxjs';
+import { switchMap, tap } from 'rxjs/operators';
+import * as i0 from '@angular/core';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+class BaseWidget {
+    constructor(data, customStates = []) {
+        // Get loader stream
+        this.loader$ = new ReplaySubject(1);
+        this.loader = this.loader$.asObservable();
+        this.state = {};
+        // reset data/stream
+        this.reset$ = new Subject();
+        this.customStates = customStates;
+    }
+    // Toggle loader with value
+    toggleLoader(value) {
+        this.loader$.next(value);
+    }
+    // Trigger widget refresh
+    reset() {
+        this.reset$.next();
+    }
+    updateValue(data) { }
+    updateCustomStates(customStates, value) {
+        if (customStates.length > 0) {
+            customStates.forEach(customState => {
+                this.state = { ...this.state, ...customState(value) };
+            });
+        }
+        else {
+            this.state = {};
+        }
+    }
+}
+
+class SyncWidget extends BaseWidget {
+    // @param dataStream: Stream to subscribe to when widget refreshed
+    constructor(data, customStates = []) {
+        super(data, customStates);
+        if (data) {
+            this.value = data;
+        }
+    }
+    // Change data value
+    updateValue(value) {
+        this.value = value;
+        this.updateCustomStates(this.customStates, value);
+    }
+    reset() {
+        super.reset();
+        this.value = null;
+    }
+}
+
+// Data type that the stream will return
+class AsyncWidget extends BaseWidget {
+    // @param dataStream: Stream to subscribe to when widget refreshed
+    constructor(dataStream, customStates = []) {
+        super(dataStream, customStates);
+        if (dataStream) {
+            this.updateValue(dataStream);
+        }
+    }
+    // Change widget data stream
+    updateValue(dataStream) {
+        this.value = this.reset$.pipe(switchMap(() => {
+            this.toggleLoader(true);
+            return dataStream.pipe(tap(() => {
+                this.toggleLoader(false);
+            }), tap((value) => this.updateCustomStates(this.customStates, value)));
+        }));
+        setTimeout(() => this.reset(), 10);
+    }
+}
+
+class WidgetGroup extends BaseWidget {
+    constructor(widgets) {
+        super();
+        this.items = new Map();
+        Object.keys(widgets).forEach(key => {
+            this.addWidget(key, widgets[key]);
+        });
+    }
+    get value() {
+        const keys = Array.from(this.items.keys());
+        return keys.reduce((acc, key) => {
+            return { ...acc, [key]: this.get(key).value };
+        }, {});
+    }
+    get widgets() {
+        return Array.from(this.items.values());
+    }
+    addWidget(key, widget) {
+        this.items.set(key, widget);
+    }
+    get(key) {
+        return this.items.get(key);
+    }
+    removeWidget(key) {
+        this.items.delete(key);
+    }
+    reset() {
+        this.widgets.forEach(widget => widget.reset());
+    }
+}
+
+class WidgetsModule {
+}
+WidgetsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: WidgetsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+WidgetsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: WidgetsModule, imports: [CommonModule] });
+WidgetsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: WidgetsModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: WidgetsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [CommonModule],
+                    providers: []
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AsyncWidget, BaseWidget, SyncWidget, WidgetGroup, WidgetsModule };
+//# sourceMappingURL=mis-crystal-design-system-widgets.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mis-crystal-design-system-widgets.mjs","sources":["../../../projects/mis-components/widgets/classes/base-widget.ts","../../../projects/mis-components/widgets/classes/sync-widget.ts","../../../projects/mis-components/widgets/classes/async-widget.ts","../../../projects/mis-components/widgets/classes/widget-group.ts","../../../projects/mis-components/widgets/widgets.module.ts","../../../projects/mis-components/widgets/mis-crystal-design-system-widgets.ts"],"sourcesContent":["import { ReplaySubject, Subject } from \"rxjs\";\nimport { CustomState, WidgetStateMap } from \"../interfaces/widgets.model\";\n\nexport class BaseWidget<D> {\n  // Get loader stream\n  private loader$ = new ReplaySubject<boolean>(1);\n  loader = this.loader$.asObservable();\n  protected customStates: Array<CustomState<D>>;\n  state: WidgetStateMap = {};\n\n  constructor(data?: unknown, customStates: Array<CustomState<D>> = []) {\n    this.customStates = customStates;\n  }\n\n  // Toggle loader with value\n  toggleLoader(value: boolean): void {\n    this.loader$.next(value);\n  }\n  // reset data/stream\n  protected reset$ = new Subject<void>();\n\n  // Trigger widget refresh\n  reset(): void {\n    this.reset$.next();\n  }\n\n  updateValue(data: unknown): void {}\n\n  protected updateCustomStates(customStates: Array<CustomState<D>>, value: D): void {\n    if (customStates.length > 0) {\n      customStates.forEach(customState => {\n        this.state = { ...this.state, ...customState(value) };\n      });\n    } else {\n      this.state = {};\n    }\n  }\n}\n","import { CustomState } from \"../interfaces/widgets.model\";\nimport { BaseWidget } from \"./base-widget\";\n\nexport class SyncWidget<D = any> extends BaseWidget<D> {\n  // DataObject with widget functionalities\n  value: D;\n\n  // @param dataStream: Stream to subscribe to when widget refreshed\n  constructor(data?: D, customStates: Array<CustomState<D>> = []) {\n    super(data, customStates);\n    if (data) {\n      this.value = data;\n    }\n  }\n\n  // Change data value\n  updateValue(value: D): void {\n    this.value = value;\n    this.updateCustomStates(this.customStates, value);\n  }\n\n  reset(): void {\n    super.reset();\n    this.value = null;\n  }\n}\n","import { Observable } from \"rxjs\";\nimport { tap, switchMap } from \"rxjs/operators\";\nimport { CustomState, WidgetStateMap } from \"../interfaces/widgets.model\";\nimport { BaseWidget } from \"./base-widget\";\n// Data type that the stream will return\nexport class AsyncWidget<D = any> extends BaseWidget<D> {\n  // Stream with widget functionalities\n  value: Observable<D>;\n\n  // @param dataStream: Stream to subscribe to when widget refreshed\n  constructor(dataStream?: Observable<D>, customStates: Array<CustomState<D>> = []) {\n    super(dataStream, customStates);\n    if (dataStream) {\n      this.updateValue(dataStream);\n    }\n  }\n\n  // Change widget data stream\n  updateValue(dataStream: Observable<D>): void {\n    this.value = this.reset$.pipe(\n      switchMap(() => {\n        this.toggleLoader(true);\n        return dataStream.pipe(\n          tap(() => {\n            this.toggleLoader(false);\n          }),\n          tap((value: D) => this.updateCustomStates(this.customStates, value))\n        );\n      })\n    );\n    setTimeout(() => this.reset(), 10);\n  }\n}\n","import { BaseWidget } from \"./base-widget\";\nimport { WidgetMap } from \"../interfaces/widgets.model\";\nimport { AsyncWidget } from \"./async-widget\";\nimport { SyncWidget } from \"./sync-widget\";\n\nexport class WidgetGroup extends BaseWidget<any> {\n  private items = new Map<string, SyncWidget | AsyncWidget | WidgetGroup>();\n\n  constructor(widgets: WidgetMap) {\n    super();\n    Object.keys(widgets).forEach(key => {\n      this.addWidget(key, widgets[key]);\n    });\n  }\n\n  get value(): { [key: string]: any } {\n    const keys = Array.from(this.items.keys());\n    return keys.reduce((acc, key) => {\n      return { ...acc, [key]: this.get(key).value };\n    }, {});\n  }\n\n  get widgets() {\n    return Array.from(this.items.values());\n  }\n\n  addWidget(key: string, widget: SyncWidget | AsyncWidget): void {\n    this.items.set(key, widget);\n  }\n\n  get(key: string): SyncWidget | AsyncWidget | WidgetGroup {\n    return this.items.get(key);\n  }\n\n  removeWidget(key: string): void {\n    this.items.delete(key);\n  }\n\n  reset(): void {\n    this.widgets.forEach(widget => widget.reset());\n  }\n}\n","import { NgModule } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\nimport { WidgetService } from \"./services/widget.service\";\n\n@NgModule({\n  declarations: [],\n  imports: [CommonModule],\n  providers: []\n})\nexport class WidgetsModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,24 @@
+/*
+ * Public API Surface of mis-components
+ */
+// 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'
+var publicApi = {};
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+//# sourceMappingURL=mis-crystal-design-system.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mis-crystal-design-system.mjs","sources":["../../../projects/mis-components/public-api.ts","../../../projects/mis-components/mis-crystal-design-system.ts"],"sourcesContent":["/*\n * Public API Surface of mis-components\n */\n// export * from './button';\n// export * from './checkbox';\n// export * from './chip';\n// export * from './drawer';\n// export * from './dropdown';\n// export * from './fab';\n// export * from './loader';\n// export * from './multi-select-dropdown'\n// export * from './nested-multi-select-dropdown'\n// export * from './radio-button'\n// export * from './switch'\n// export * from './table';\n// export * from './toast'\n// export * from './tooltip'\n// export * from './datepicker'\n\nexport default {};\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"AAAA;;AAEG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,gBAAe,EAAE;;ACnBjB;;AAEG"}