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

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

@@ -0,0 +1 @@
+{"version":3,"file":"mis-crystal-design-system-async-search-dropdown.js","sources":["../../../projects/mis-components/async-search-dropdown/async-dropdown.component.ts","../../../projects/mis-components/async-search-dropdown/async-dropdown.module.ts","../../../projects/mis-components/async-search-dropdown/mis-crystal-design-system-async-search-dropdown.ts"],"sourcesContent":["import { ConnectionPositionPair, Overlay, OverlayConfig, OverlayRef } from \"@angular/cdk/overlay\";\nimport { TemplatePortal } from \"@angular/cdk/portal\";\nimport {\n  AfterViewInit,\n  Component,\n  ContentChild,\n  ElementRef,\n  EventEmitter,\n  HostListener,\n  Input,\n  NgZone,\n  OnChanges,\n  OnDestroy,\n  OnInit,\n  Output,\n  SimpleChanges,\n  TemplateRef,\n  ViewChild,\n  ViewContainerRef\n} from \"@angular/core\";\nimport { AbstractControl, FormControl } from \"@angular/forms\";\nimport { Observable, Subscription } from \"rxjs\";\nimport { debounceTime, distinctUntilChanged, filter, tap } from \"rxjs/operators\";\n\n// tslint:disable-next-line\ntype IListData = any;\n\n@Component({\n  selector: \"mis-async-search-dropdown\",\n  templateUrl: \"./async-dropdown.component.html\",\n  styleUrls: [\"./async-dropdown.component.scss\"]\n})\nexport class AsyncDropdownComponent implements OnInit, OnChanges, OnDestroy {\n  constructor(private overlay: Overlay, private viewContainerRef: ViewContainerRef, private _ngZone: NgZone) { }\n  @Input() height;\n  @Input() size: 'md' | 'sm' = 'md'\n  @Input() httpStream!: (searchKey: string) => Observable<IListData>; // function that returns an httpobservable\n  @Input() displayKey!: string; // string to show value in list\n  @Input() secondaryDisplayKey!: string; // string to display secondary value\n  @Input() placeholder = \"Select\"; // placeholder for input\n  @Input() debounceTime = 400; // wait time till which API call is paused\n  @Input() minInputLength = 2; // min length after which API call is made\n  @Input() multi = false; // maintain a list or emit value\n  @Input() uniqueKey: string; // for identifying unique values\n  @Input() control: AbstractControl | null; // form control for reactive forms\n  @Input() disabled: boolean; // disable actions on component\n  @Input() readonly: boolean; // make component readonly\n  @ViewChild(\"ddBtn\", { static: false }) origin: ElementRef;\n  @ViewChild(\"input\", { static: false }) input: ElementRef;\n  @ViewChild(\"dd\", { static: false }) dd: TemplateRef<Element>;\n  @ContentChild(\"misCustomItem\", { static: false })\n  customItem: TemplateRef<Element>;\n  @ContentChild(\"asyncCustomLoader\", { static: false})\n  customLoader: TemplateRef<Element>;\n  // tslint:disable-next-line\n  @Output() onSelect: EventEmitter<IListData | IListData[]> = new EventEmitter(true); // emit selected values\n  searchInput: FormControl = new FormControl();\n  data: IListData[] = [];\n  opened = false;\n  loading: boolean = false;\n  error: boolean = false;\n  // tslint:disable-next-line\n  selections: Map<string, any> = new Map();\n  private searchSubscription: Subscription;\n  private overlayRef: OverlayRef;\n  controlSubscription: Subscription | undefined;\n  @Input() searchValue;\n  @Output() searchQueryChange = new EventEmitter<string>()\n  @Output() clear: EventEmitter<boolean> = new EventEmitter(false);\n  @Output() itemSelected = new EventEmitter<IListData>()\n  @Output() itemRemoved = new EventEmitter<IListData>()\n  ngOnInit(): void {\n    if (this.multi && !this.uniqueKey) {\n      throw new Error(\"[uniqueKey] required in multi mode.\");\n    }\n    if (this.disabled) {\n      this.searchInput.disable();\n    }\n    this.searchSubscription = this.searchInput.valueChanges\n      .pipe(\n        // filter(val => val && val.length >= this.minInputLength),\n        tap((val) => this.searchQueryChange.emit(val)),\n        debounceTime(this.debounceTime),\n        distinctUntilChanged()\n      )\n      .subscribe(res => {\n        this._ngZone.run(() => {\n          if (res?.length < this.minInputLength || !res?.length) {\n            this.closeDropdown();\n            return;\n          } else if (res?.length > this.minInputLength && this.httpStream) {\n            this.loading = true;\n            this.error = false;\n            if(!this.overlayRef?.hasAttached())\n              this.openDropdown(this.dd, this.origin.nativeElement);\n            this.httpStream(res).subscribe(list => {\n              this.loading = false;\n              this.data = list;\n              if (!this.overlayRef?.hasAttached() && list.length > 0) {\n                this.openDropdown(this.dd, this.origin.nativeElement);\n              }\n            }, error => {\n              this.loading = false;\n              this.error = true;\n            });\n          }\n        })\n      });\n    if (this.control?.value) {\n      this.handleControlChanges(this.control.value);\n    }\n    this.controlSubscription = this.control?.valueChanges.subscribe(this.handleControlChanges);\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (changes && changes?.searchValue?.currentValue) {\n      this.searchInput.patchValue(changes.searchValue.currentValue);\n    }\n    if (changes && changes.disabled) {\n      this.searchInput.enable();\n      if (this.disabled) {\n        this.searchInput.disable();\n      }\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.searchSubscription?.unsubscribe();\n  }\n\n  private handleControlChanges = (values: IListData[]) => {\n    values.forEach(el => {\n      this.selectData(el, true);\n    });\n    // tslint:disable-next-line\n  };\n\n  private openDropdown(template: TemplateRef<Element>, origin: HTMLElement): void {\n    const positionStrategy = this.overlay\n      .position()\n      .flexibleConnectedTo(origin)\n      .withPositions([\n        new ConnectionPositionPair({ originX: \"start\", originY: \"bottom\" }, { overlayX: \"start\", overlayY: \"top\" }),\n        new ConnectionPositionPair({ originX: \"start\", originY: \"top\" }, { overlayX: \"start\", overlayY: \"bottom\" })\n      ])\n      .withPush(true);\n\n    const configs = new OverlayConfig({\n      hasBackdrop: true,\n      backdropClass: \"cdk-overlay-transparent-backdrop\",\n      scrollStrategy: this.overlay.scrollStrategies.reposition(),\n      positionStrategy,\n      width: origin.clientWidth\n    });\n    this.overlayRef = this.overlay.create(configs);\n    this.overlayRef.attach(new TemplatePortal(template, this.viewContainerRef));\n    this.overlayRef.backdropClick().subscribe(res => {\n      this.closeDropdown();\n    });\n  }\n\n  /**\n   * closes the dropdown\n   */\n  closeDropdown(): void {\n    this.opened = false;\n    this.overlayRef?.detach();\n    this.data = [];\n  }\n\n  /**\n   *\n   * @param item item to select\n   * if item property disabled is set to true, selection will be disabled\n   * @param effectedFromOutside set to true if calling from parent component, if true will focus on search input\n   */\n  selectData(item: IListData, effectedFromOutside = true): void {\n    if (item.disabled) {\n      return;\n    }\n    this.itemSelected.emit(item)\n    if (!this.multi) {\n      this.searchInput.patchValue(item[this.displayKey], { emitEvent: false });\n      this.setControlValue(item);\n    } else {\n      if (!this.selections.has(item[this.uniqueKey])) {\n        this.selections.set(item[this.uniqueKey], item);\n      }\n      this.setControlValue(this.selectedItems);\n      if (!effectedFromOutside) {\n        setTimeout(() => {\n          this.input.nativeElement.focus();\n          this.input.nativeElement.scrollIntoView();\n        }, 10);\n      }\n      this.searchInput.patchValue(\"\");\n      this.data = [];\n    }\n    this.closeDropdown();\n  }\n\n  /**\n   *\n   * @param item remove item from selected list\n   */\n  removeItem(item: IListData): void {\n    this.itemRemoved.emit(item)\n    this.selections.delete(item[this.uniqueKey]);\n    this.setControlValue(this.selectedItems);\n    // tslint:disable-next-line\n    this.input[\"nativeElement\"].focus();\n  }\n\n  private setControlValue(value: IListData): void {\n    this.onSelect.emit(value);\n    this.control?.patchValue(value, { emitEvent: false });\n  }\n\n  /**\n   * @returns list of selected items\n   */\n  get selectedItems(): Array<IListData> {\n    return Array.from(this.selections.values());\n  }\n\n  removeInputValue() {\n    this.searchInput.reset();\n    this.data = [];\n    this.clear.emit(true);\n  }\n}\n","import { OverlayModule } from \"@angular/cdk/overlay\";\nimport { CommonModule } from \"@angular/common\";\nimport { NgModule } from \"@angular/core\";\nimport { FormsModule, ReactiveFormsModule } from \"@angular/forms\";\nimport { LoaderModule } from \"mis-crystal-design-system/loader\";\nimport { AsyncDropdownComponent } from \"./async-dropdown.component\";\n\n@NgModule({\n  declarations: [AsyncDropdownComponent],\n  imports: [CommonModule, OverlayModule, ReactiveFormsModule, FormsModule, LoaderModule],\n  exports: [AsyncDropdownComponent]\n})\nexport class AsyncDropdownModule {}\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-button.js

@@ -0,0 +1,120 @@
+import { EventEmitter, Component, Input, Output, Directive, ElementRef, Renderer2, HostBinding, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+class ButtonComponent {
+    constructor() {
+        this.name = "Enabled";
+        this.type = "Solid";
+        this.size = "Medium";
+        this.width = "";
+        this.showIcon = false;
+        this.iconUrl = "";
+        this.iconPosition = "Left";
+        this.disabled = false;
+        this.disableLeftBorderRadius = false;
+        this.disableRightBorderRadius = false;
+        /** Emits event when button is clicked */
+        this.click = new EventEmitter();
+    }
+    ngOnInit() { }
+    onClick(event) {
+        this.click.emit(event);
+    }
+}
+ButtonComponent.decorators = [
+    { type: Component, args: [{
+                selector: "mis-button",
+                template: "<button\n  (click)=\"onClick($event)\"\n  [disabled]=\"disabled\"\n  [ngClass]=\"{\n    solid: type === 'Solid',\n    outline: type === 'Outline',\n    text: type === 'Text',\n    large: size === 'Large',\n    medium: size === 'Medium',\n    small: size === 'Small',\n    'large-mobile': size === 'Large-M',\n    'small-mobile': size === 'Small-M'\n  }\"\n  [ngStyle]=\"{\n    'border-top-left-radius': disableLeftBorderRadius ? '0px' : '',\n    'border-bottom-left-radius': disableLeftBorderRadius ? '0px' : '',\n    'border-top-right-radius': disableRightBorderRadius ? '0px' : '',\n    'border-bottom-right-radius': disableRightBorderRadius ? '0px' : '',\n    width: width\n  }\"\n>\n  <span id=\"left-icon\" *ngIf=\"showIcon && iconPosition === 'Left'\">\n    <img [src]=\"iconUrl\" alt=\"\" />\n  </span>\n  {{ name }}\n  <span id=\"right-icon\" *ngIf=\"showIcon && iconPosition === 'Right'\">\n    <img [src]=\"iconUrl\" alt=\"\" />\n  </span>\n</button>\n",
+                styles: ["button{font-family:Lato,sans-serif!important;border:none;padding:0;margin:0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#181f33;background-color:#fff}.solid{color:#fff;background:#0937b2}.solid:hover:enabled{background:#062a99}.solid:active:enabled{background:#041f80}.solid:disabled{color:#929dab;background:#f5f5f5}.outline{border:1px solid #0937b2;color:#0937b2;background:#fff}.outline:hover:enabled{background:#f0f3fa}.outline:active:enabled{background:#dae1f3}.outline:disabled{color:#929dab;border:1px solid #929dab}.text{color:#181f33;background:#fff}.text:hover:enabled{background:#f0f3fa}.text:active:enabled{background:#dae1f3}.text:disabled{color:#929dab}.large{height:56px;padding:16px;border-radius:10px;font-weight:700;letter-spacing:.5px}.large,.medium{font-style:normal;font-size:16px;line-height:24px}.medium{height:44px;padding:10px 16px;border-radius:8px;font-weight:400;letter-spacing:.2px}.small{height:32px;padding:6px 16px;border-radius:6px;font-weight:400;letter-spacing:.25px}.large-mobile,.small{font-style:normal;font-size:14px;line-height:20px}.large-mobile{height:44px;padding:12px}.large-mobile,.small-mobile{border-radius:8px;font-weight:700;letter-spacing:.1px}.small-mobile{height:32px;padding:6px 12px;font-style:normal;font-size:14px;line-height:20px}span{display:flex;justify-content:center;align-items:center}#left-icon{margin-right:8px}#right-icon{margin-left:8px}"]
+            },] }
+];
+ButtonComponent.ctorParameters = () => [];
+ButtonComponent.propDecorators = {
+    name: [{ type: Input }],
+    type: [{ type: Input }],
+    size: [{ type: Input }],
+    width: [{ type: Input }],
+    showIcon: [{ type: Input }],
+    iconUrl: [{ type: Input }],
+    iconPosition: [{ type: Input }],
+    disabled: [{ type: Input }],
+    disableLeftBorderRadius: [{ type: Input }],
+    disableRightBorderRadius: [{ type: Input }],
+    click: [{ type: Output }]
+};
+
+class ButtonDirective {
+    constructor(el, renderer) {
+        this.el = el;
+        this.renderer = renderer;
+        this.type = "none";
+        this.size = "md";
+        this.elementClass = "mis-btn";
+    }
+    ngAfterViewInit() {
+        this.bindTypeClass();
+        this.bindSizeClass();
+    }
+    bindTypeClass() {
+        let className = "";
+        switch (this.type) {
+            case "primary":
+                className = "mis-primary";
+                break;
+            case "outline":
+                className = "mis-outline";
+                break;
+            default:
+                className = "mis-none";
+        }
+        this.renderer.addClass(this.el.nativeElement, className);
+    }
+    bindSizeClass() {
+        let className = "";
+        switch (this.size) {
+            case "lg":
+                className = "mis-btn-lg";
+                break;
+            case "sm":
+                className = "mis-btn-sm";
+                break;
+            default:
+                className = "mis-btn-md";
+        }
+        this.renderer.addClass(this.el.nativeElement, className);
+    }
+}
+ButtonDirective.decorators = [
+    { type: Directive, args: [{
+                selector: "[mis-button]"
+            },] }
+];
+ButtonDirective.ctorParameters = () => [
+    { type: ElementRef },
+    { type: Renderer2 }
+];
+ButtonDirective.propDecorators = {
+    type: [{ type: Input }],
+    size: [{ type: Input }],
+    elementClass: [{ type: HostBinding, args: ["class",] }]
+};
+
+class ButtonModule {
+    static forRoot() {
+        return { ngModule: ButtonModule, providers: [] };
+    }
+}
+ButtonModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [ButtonComponent, ButtonDirective],
+                imports: [CommonModule],
+                exports: [ButtonComponent, ButtonDirective]
+            },] }
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ButtonComponent, ButtonDirective, ButtonModule };
+//# sourceMappingURL=mis-crystal-design-system-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mis-crystal-design-system-button.js","sources":["../../../projects/mis-components/button/button.component.ts","../../../projects/mis-components/button/button.directive.ts","../../../projects/mis-components/button/button.module.ts","../../../projects/mis-components/button/mis-crystal-design-system-button.ts"],"sourcesContent":["import { Component, Input, OnInit, Output, EventEmitter, ContentChild, TemplateRef } from \"@angular/core\";\n\n@Component({\n  selector: \"mis-button\",\n  templateUrl: \"./button.component.html\",\n  styleUrls: [\"./button.component.scss\"]\n})\nexport class ButtonComponent implements OnInit {\n  @Input() name: string = \"Enabled\";\n  @Input() type: \"Solid\" | \"Outline\" | \"Text\" = \"Solid\";\n  @Input() size: \"Small\" | \"Medium\" | \"Large\" | \"Small-M\" | \"Large-M\" = \"Medium\";\n  @Input() width: string = \"\";\n\n  @Input() showIcon: boolean = false;\n  @Input() iconUrl: string = \"\";\n  @Input() iconPosition: \"Left\" | \"Right\" = \"Left\";\n\n  @Input() disabled: boolean = false;\n  @Input() disableLeftBorderRadius: boolean = false;\n  @Input() disableRightBorderRadius: boolean = false;\n\n  /** Emits event when button is clicked */\n  @Output() click = new EventEmitter<any>();\n\n  constructor() {}\n\n  ngOnInit() {}\n\n  onClick(event) {\n    this.click.emit(event);\n  }\n}\n","import { AfterViewInit, Directive, ElementRef, HostBinding, Input, Renderer2 } from \"@angular/core\";\n\n@Directive({\n  selector: \"[mis-button]\"\n})\nexport class ButtonDirective implements AfterViewInit {\n  @Input() type: \"primary\" | \"outline\" | \"none\" = \"none\";\n  @Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n  @HostBinding(\"class\") elementClass = \"mis-btn\";\n\n  constructor(private el: ElementRef, private renderer: Renderer2) {}\n\n  ngAfterViewInit(): void {\n    this.bindTypeClass();\n    this.bindSizeClass();\n  }\n\n  private bindTypeClass(): void {\n    let className = \"\";\n    switch (this.type) {\n      case \"primary\":\n        className = \"mis-primary\";\n        break;\n      case \"outline\":\n        className = \"mis-outline\";\n        break;\n      default:\n        className = \"mis-none\";\n    }\n    this.renderer.addClass(this.el.nativeElement, className);\n  }\n\n  private bindSizeClass(): void {\n    let className = \"\";\n    switch (this.size) {\n      case \"lg\":\n        className = \"mis-btn-lg\";\n        break;\n      case \"sm\":\n        className = \"mis-btn-sm\";\n        break;\n      default:\n        className = \"mis-btn-md\";\n    }\n    this.renderer.addClass(this.el.nativeElement, className);\n  }\n}\n","import { NgModule, ModuleWithProviders } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\nimport { ButtonDirective } from \"./button.directive\";\nimport { ButtonComponent } from \"./button.component\";\n\n@NgModule({\n  declarations: [ButtonComponent, ButtonDirective],\n  imports: [CommonModule],\n  exports: [ButtonComponent, ButtonDirective]\n})\nexport class ButtonModule {\n  static forRoot(): ModuleWithProviders<ButtonModule> {\n    return { ngModule: ButtonModule, providers: [] };\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAOa,eAAe;IAiB1B;QAhBS,SAAI,GAAW,SAAS,CAAC;QACzB,SAAI,GAAiC,OAAO,CAAC;QAC7C,SAAI,GAAyD,QAAQ,CAAC;QACtE,UAAK,GAAW,EAAE,CAAC;QAEnB,aAAQ,GAAY,KAAK,CAAC;QAC1B,YAAO,GAAW,EAAE,CAAC;QACrB,iBAAY,GAAqB,MAAM,CAAC;QAExC,aAAQ,GAAY,KAAK,CAAC;QAC1B,4BAAuB,GAAY,KAAK,CAAC;QACzC,6BAAwB,GAAY,KAAK,CAAC;;QAGzC,UAAK,GAAG,IAAI,YAAY,EAAO,CAAC;KAE1B;IAEhB,QAAQ,MAAK;IAEb,OAAO,CAAC,KAAK;QACX,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACxB;;;YA5BF,SAAS,SAAC;gBACT,QAAQ,EAAE,YAAY;gBACtB,88BAAsC;;aAEvC;;;;mBAEE,KAAK;mBACL,KAAK;mBACL,KAAK;oBACL,KAAK;uBAEL,KAAK;sBACL,KAAK;2BACL,KAAK;uBAEL,KAAK;sCACL,KAAK;uCACL,KAAK;oBAGL,MAAM;;;MCjBI,eAAe;IAK1B,YAAoB,EAAc,EAAU,QAAmB;QAA3C,OAAE,GAAF,EAAE,CAAY;QAAU,aAAQ,GAAR,QAAQ,CAAW;QAJtD,SAAI,GAAmC,MAAM,CAAC;QAC9C,SAAI,GAAuB,IAAI,CAAC;QACnB,iBAAY,GAAG,SAAS,CAAC;KAEoB;IAEnE,eAAe;QACb,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB;IAEO,aAAa;QACnB,IAAI,SAAS,GAAG,EAAE,CAAC;QACnB,QAAQ,IAAI,CAAC,IAAI;YACf,KAAK,SAAS;gBACZ,SAAS,GAAG,aAAa,CAAC;gBAC1B,MAAM;YACR,KAAK,SAAS;gBACZ,SAAS,GAAG,aAAa,CAAC;gBAC1B,MAAM;YACR;gBACE,SAAS,GAAG,UAAU,CAAC;SAC1B;QACD,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC;KAC1D;IAEO,aAAa;QACnB,IAAI,SAAS,GAAG,EAAE,CAAC;QACnB,QAAQ,IAAI,CAAC,IAAI;YACf,KAAK,IAAI;gBACP,SAAS,GAAG,YAAY,CAAC;gBACzB,MAAM;YACR,KAAK,IAAI;gBACP,SAAS,GAAG,YAAY,CAAC;gBACzB,MAAM;YACR;gBACE,SAAS,GAAG,YAAY,CAAC;SAC5B;QACD,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC;KAC1D;;;YA3CF,SAAS,SAAC;gBACT,QAAQ,EAAE,cAAc;aACzB;;;YAJkC,UAAU;YAAsB,SAAS;;;mBAMzE,KAAK;mBACL,KAAK;2BACL,WAAW,SAAC,OAAO;;;MCET,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,EAAE,eAAe,CAAC;gBAChD,OAAO,EAAE,CAAC,YAAY,CAAC;gBACvB,OAAO,EAAE,CAAC,eAAe,EAAE,eAAe,CAAC;aAC5C;;;ACTD;;;;;;"}

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

@@ -0,0 +1,100 @@
+import { EventEmitter, Component, ViewChild, Input, Output, NgModule } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+
+class CheckboxComponent {
+    constructor() {
+        this.isError = false;
+        this.isIndeterminate = false;
+        this.name = "";
+        this.formControl = new FormControl();
+        this.valueChange = new EventEmitter();
+    }
+    set type(value) {
+        this.isError = value === "Error";
+    }
+    set indeterminate(value) {
+        if (value) {
+            this.formControl.setValue(true);
+            this.valueChange.emit({
+                name: this.name,
+                value: true
+            });
+        }
+        else {
+            this.formControl.setValue(false);
+            this.valueChange.emit({
+                name: this.name,
+                value: false
+            });
+        }
+        this.isIndeterminate = value;
+    }
+    set checked(value) {
+        if (value)
+            this.formControl.setValue(true);
+        else
+            this.formControl.setValue(false);
+    }
+    set disabled(value) {
+        if (value)
+            this.formControl.disable();
+        else
+            this.formControl.enable();
+    }
+    ngOnInit() { }
+    toggleState() {
+        if (this.isIndeterminate) {
+            this.isIndeterminate = false;
+            this.formControl.setValue(true);
+        }
+        else {
+            if (this.formControl.value)
+                this.formControl.setValue(false);
+            else
+                this.formControl.setValue(true);
+        }
+        this.valueChange.emit({
+            name: this.name,
+            value: this.formControl.value
+        });
+    }
+}
+CheckboxComponent.decorators = [
+    { type: Component, args: [{
+                selector: "mis-checkbox",
+                template: "<div\n  class=\"checkbox-container\"\n  [ngStyle]=\"{ cursor: formControl.disabled ? 'not-allowed' : 'pointer' }\"\n  (click)=\"!formControl.disabled && toggleState()\"\n>\n  <input hidden type=\"checkbox\" [formControl]=\"formControl\" (click)=\"$event.stopPropagation()\" />\n  <span\n    class=\"checkmark\"\n    tabindex=\"0\"\n    *ngIf=\"!isIndeterminate\"\n    [ngClass]=\"{\n      'disabled-checkbox': formControl.disabled,\n      error: isError && !formControl.disabled\n    }\"\n  ></span>\n  <span\n    class=\"checkmark indeterminate\"\n    tabindex=\"0\"\n    *ngIf=\"isIndeterminate\"\n    [ngClass]=\"{\n      'disabled-checkbox': formControl.disabled,\n      error: isError && !formControl.disabled\n    }\"\n  ></span>\n</div>\n",
+                styles: [".checkbox-container{height:20px;width:20px;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:sub}.checkbox-container input{opacity:0;cursor:pointer}.checkbox-container input,.checkmark{position:absolute;height:20px;width:20px}.checkmark{display:flex;justify-content:center;align-items:center;top:0;left:0;border-radius:4px;background-color:#fff;border:2px solid #6a737d;box-sizing:border-box}.checkmark:hover{border-color:#929dab}.checkmark:focus,.checkmark:focus-within{box-shadow:0 0 0 .09em #fff,0 0 .01em .2em #0937b2;outline:none}.checkbox-container input:checked~.checkmark{background-color:#0937b2;border-color:#0937b2}.checkbox-container input:checked~.checkmark.disabled-checkbox{background-color:#c8cdd3;border-color:#c8cdd3}.checkmark:after{content:\"\";position:absolute;display:none}.checkbox-container input:checked~.checkmark:after{display:block}.checkbox-container .checkmark:after{top:1px;width:4px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.checkbox-container .checkmark.indeterminate:after{top:2px;width:2px;height:0;border:solid #fff;border-width:0 0 12px;border-radius:14px;transform:rotate(90deg);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg)}.disabled-checkbox{pointer-events:none;border-color:#c8cdd3}.error{border-color:#b00020}.checkbox-container input:checked~.error.checkmark{border:#b00020!important;background:#b00020!important}.checkbox-container .error.checkmark:after{top:3px;width:4px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.checkbox-container .error.checkmark.indeterminate:after{top:4px;width:2px;height:0;border:solid #fff;border-width:0 0 12px;border-radius:14px;transform:rotate(90deg);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg)}.error:focus,.error:focus-within{box-shadow:none!important;outline:none}"]
+            },] }
+];
+CheckboxComponent.ctorParameters = () => [];
+CheckboxComponent.propDecorators = {
+    inputBox: [{ type: ViewChild, args: ["input",] }],
+    type: [{ type: Input }],
+    indeterminate: [{ type: Input }],
+    checked: [{ type: Input }],
+    disabled: [{ type: Input }],
+    name: [{ type: Input }],
+    formControl: [{ type: Input }],
+    valueChange: [{ type: Output }]
+};
+
+class CheckboxModule {
+    static forRoot() {
+        return { ngModule: CheckboxModule, providers: [] };
+    }
+}
+CheckboxModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [CheckboxComponent],
+                imports: [CommonModule, ReactiveFormsModule],
+                exports: [CheckboxComponent]
+            },] }
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CheckboxComponent, CheckboxModule };
+//# sourceMappingURL=mis-crystal-design-system-checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mis-crystal-design-system-checkbox.js","sources":["../../../projects/mis-components/checkbox/checkbox.component.ts","../../../projects/mis-components/checkbox/checkbox.module.ts","../../../projects/mis-components/checkbox/mis-crystal-design-system-checkbox.ts"],"sourcesContent":["import { Component, OnInit, EventEmitter, Input, Output, ViewChild, ElementRef, Renderer2 } from \"@angular/core\";\nimport { AbstractControl, FormControl } from \"@angular/forms\";\n\n@Component({\n  selector: \"mis-checkbox\",\n  templateUrl: \"./checkbox.component.html\",\n  styleUrls: [\"./checkbox.component.scss\"]\n})\nexport class CheckboxComponent implements OnInit {\n  public isError: boolean = false;\n  public isIndeterminate: boolean = false;\n\n  @ViewChild(\"input\") inputBox: ElementRef;\n  @Input() set type(value: \"Default\" | \"Error\") {\n    this.isError = value === \"Error\";\n  }\n  @Input() set indeterminate(value: boolean) {\n    if (value) {\n      this.formControl.setValue(true);\n      this.valueChange.emit({\n        name: this.name,\n        value: true\n      });\n    } else {\n      this.formControl.setValue(false);\n      this.valueChange.emit({\n        name: this.name,\n        value: false\n      });\n    }\n    this.isIndeterminate = value;\n  }\n  @Input() set checked(value: boolean) {\n    if (value) this.formControl.setValue(true);\n    else this.formControl.setValue(false);\n  }\n  @Input() set disabled(value: boolean) {\n    if (value) this.formControl.disable();\n    else this.formControl.enable();\n  }\n  @Input() name: string = \"\";\n  @Input() formControl: AbstractControl = new FormControl();\n  @Output() valueChange = new EventEmitter<{ name: string; value: boolean }>();\n\n  constructor() {}\n  ngOnInit() {}\n\n  toggleState() {\n    if (this.isIndeterminate) {\n      this.isIndeterminate = false;\n      this.formControl.setValue(true);\n    } else {\n      if (this.formControl.value) this.formControl.setValue(false);\n      else this.formControl.setValue(true);\n    }\n    this.valueChange.emit({\n      name: this.name,\n      value: this.formControl.value\n    });\n  }\n}\n","import { NgModule, ModuleWithProviders } from \"@angular/core\";\nimport { ReactiveFormsModule } from \"@angular/forms\";\nimport { CommonModule } from \"@angular/common\";\n\nimport { CheckboxComponent } from \"./checkbox.component\";\n\n@NgModule({\n  declarations: [CheckboxComponent],\n  imports: [CommonModule, ReactiveFormsModule],\n  exports: [CheckboxComponent]\n})\nexport class CheckboxModule {\n  static forRoot(): ModuleWithProviders<CheckboxModule> {\n    return { ngModule: CheckboxModule, providers: [] };\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAQa,iBAAiB;IAoC5B;QAnCO,YAAO,GAAY,KAAK,CAAC;QACzB,oBAAe,GAAY,KAAK,CAAC;QA8B/B,SAAI,GAAW,EAAE,CAAC;QAClB,gBAAW,GAAoB,IAAI,WAAW,EAAE,CAAC;QAChD,gBAAW,GAAG,IAAI,YAAY,EAAoC,CAAC;KAE7D;IA/BhB,IAAa,IAAI,CAAC,KAA0B;QAC1C,IAAI,CAAC,OAAO,GAAG,KAAK,KAAK,OAAO,CAAC;KAClC;IACD,IAAa,aAAa,CAAC,KAAc;QACvC,IAAI,KAAK,EAAE;YACT,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;YAChC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;gBACpB,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,KAAK,EAAE,IAAI;aACZ,CAAC,CAAC;SACJ;aAAM;YACL,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;YACjC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;gBACpB,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,KAAK,EAAE,KAAK;aACb,CAAC,CAAC;SACJ;QACD,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;KAC9B;IACD,IAAa,OAAO,CAAC,KAAc;QACjC,IAAI,KAAK;YAAE,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;;YACtC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;KACvC;IACD,IAAa,QAAQ,CAAC,KAAc;QAClC,IAAI,KAAK;YAAE,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC;;YACjC,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC;KAChC;IAMD,QAAQ,MAAK;IAEb,WAAW;QACT,IAAI,IAAI,CAAC,eAAe,EAAE;YACxB,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;YAC7B,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;SACjC;aAAM;YACL,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK;gBAAE,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;;gBACxD,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;SACtC;QACD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;YACpB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,KAAK;SAC9B,CAAC,CAAC;KACJ;;;YAxDF,SAAS,SAAC;gBACT,QAAQ,EAAE,cAAc;gBACxB,qvBAAwC;;aAEzC;;;;uBAKE,SAAS,SAAC,OAAO;mBACjB,KAAK;4BAGL,KAAK;sBAgBL,KAAK;uBAIL,KAAK;mBAIL,KAAK;0BACL,KAAK;0BACL,MAAM;;;MC/BI,cAAc;IACzB,OAAO,OAAO;QACZ,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC;KACpD;;;YARF,QAAQ,SAAC;gBACR,YAAY,EAAE,CAAC,iBAAiB,CAAC;gBACjC,OAAO,EAAE,CAAC,YAAY,EAAE,mBAAmB,CAAC;gBAC5C,OAAO,EAAE,CAAC,iBAAiB,CAAC;aAC7B;;;ACVD;;;;;;"}

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

@@ -0,0 +1,52 @@
+import { EventEmitter, Component, Input, Output, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+class ChipComponent {
+    constructor() {
+        this.label = "";
+        this.value = "";
+        this.size = "Medium";
+        this.iconUrl = null;
+        this.count = null;
+        this.dismissible = false;
+        this.cancel = new EventEmitter();
+    }
+    ngOnInit() { }
+}
+ChipComponent.decorators = [
+    { type: Component, args: [{
+                selector: "mis-chip",
+                template: "<div\n  id=\"chip-container\"\n  [ngClass]=\"{\n    small: size === 'Small',\n    medium: size === 'Medium',\n    'small-m': size === 'Small-M',\n    'medium-m': size === 'Medium-M'\n  }\"\n>\n  <img *ngIf=\"iconUrl && iconUrl.length > 0\" [src]=\"iconUrl\" alt=\"\" />\n  <span>{{ label }}</span>\n  <div *ngIf=\"count != null || count != undefined\" id=\"count-container\">\n    <div id=\"separator\"></div>\n    <span id=\"count-text\">{{ count }}</span>\n  </div>\n  <span *ngIf=\"dismissible\" id=\"close-icon\" (click)=\"cancel.emit(value)\">\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M5.49931 4.25725C5.15643 3.91437 4.60052 3.91437 4.25765 4.25725C3.91477 4.60012 3.91477 5.15604 4.25765 5.49891L6.75868 7.99994L4.25827 10.5004C3.91539 10.8432 3.91539 11.3991 4.25827 11.742C4.60114 12.0849 5.15706 12.0849 5.49993 11.742L8.00034 9.24161L10.5007 11.742C10.8436 12.0849 11.3995 12.0849 11.7424 11.742C12.0853 11.3991 12.0853 10.8432 11.7424 10.5003L9.24201 7.99995L11.743 5.49893C12.0859 5.15606 12.0859 4.60014 11.743 4.25727C11.4001 3.91439 10.8442 3.91439 10.5014 4.25727L8.00034 6.75828L5.49931 4.25725Z\"\n        fill=\"#181F33\"\n      />\n    </svg>\n  </span>\n</div>\n",
+                styles: ["#chip-container{display:flex;justify-content:center;align-items:center;font-family:Lato,sans-serif!important;background-color:#e0e0e0;box-sizing:border-box;cursor:default}#chip-container:hover{background:#d7d9de}img{margin-right:4px}#close-icon{margin-left:4px;cursor:pointer}#close-icon,#count-container{display:flex;justify-content:center;align-items:center}#count-container,#separator{height:100%}#separator{width:1px;background-color:#c8cdd3;margin:0 8px}#count-text{font-weight:700;letter-spacing:.25px}.small{height:24px;padding:4px 8px;border-radius:7px;font-weight:700;font-size:12px;line-height:16px;letter-spacing:.7px}.medium,.small{font-style:normal;color:#181f33}.medium{height:32px;padding:6px 12px;border-radius:16px;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px}.small-m{height:20px;padding:4px 8px;border-radius:10px;font-size:11px;line-height:12px;letter-spacing:.1px}.medium-m,.small-m{font-style:normal;font-weight:400;color:#181f33}.medium-m{height:24px;padding:4px 12px;border-radius:12px;font-size:12px;line-height:16px;letter-spacing:.25px}"]
+            },] }
+];
+ChipComponent.ctorParameters = () => [];
+ChipComponent.propDecorators = {
+    label: [{ type: Input }],
+    value: [{ type: Input }],
+    size: [{ type: Input }],
+    iconUrl: [{ type: Input }],
+    count: [{ type: Input }],
+    dismissible: [{ type: Input }],
+    cancel: [{ type: Output }]
+};
+
+class ChipModule {
+    static forRoot() {
+        return { ngModule: ChipModule, providers: [] };
+    }
+}
+ChipModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [ChipComponent],
+                imports: [CommonModule],
+                exports: [ChipComponent]
+            },] }
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ChipComponent, ChipModule };
+//# sourceMappingURL=mis-crystal-design-system-chip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mis-crystal-design-system-chip.js","sources":["../../../projects/mis-components/chip/chip.component.ts","../../../projects/mis-components/chip/chip.module.ts","../../../projects/mis-components/chip/mis-crystal-design-system-chip.ts"],"sourcesContent":["import { Component, Input, OnInit, Output, EventEmitter } from \"@angular/core\";\n\n@Component({\n  selector: \"mis-chip\",\n  templateUrl: \"chip.component.html\",\n  styleUrls: [\"chip.component.scss\"]\n})\nexport class ChipComponent implements OnInit {\n  @Input() label: string = \"\";\n  @Input() value: any = \"\";\n  @Input() size: \"Small\" | \"Medium\" | \"Small-M\" | \"Medium-M\" = \"Medium\";\n  @Input() iconUrl: string | null = null;\n  @Input() count: number | null | undefined = null;\n  @Input() dismissible: boolean = false;\n\n  @Output() cancel = new EventEmitter<any>();\n  constructor() {}\n  ngOnInit() {}\n}\n","import { NgModule, ModuleWithProviders } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\nimport { ChipComponent } from \"./chip.component\";\n\n@NgModule({\n  declarations: [ChipComponent],\n  imports: [CommonModule],\n  exports: [ChipComponent]\n})\nexport class ChipModule {\n  static forRoot(): ModuleWithProviders<ChipModule> {\n    return { ngModule: ChipModule, providers: [] };\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAOa,aAAa;IASxB;QARS,UAAK,GAAW,EAAE,CAAC;QACnB,UAAK,GAAQ,EAAE,CAAC;QAChB,SAAI,GAAgD,QAAQ,CAAC;QAC7D,YAAO,GAAkB,IAAI,CAAC;QAC9B,UAAK,GAA8B,IAAI,CAAC;QACxC,gBAAW,GAAY,KAAK,CAAC;QAE5B,WAAM,GAAG,IAAI,YAAY,EAAO,CAAC;KAC3B;IAChB,QAAQ,MAAK;;;YAfd,SAAS,SAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,00CAAkC;;aAEnC;;;;oBAEE,KAAK;oBACL,KAAK;mBACL,KAAK;sBACL,KAAK;oBACL,KAAK;0BACL,KAAK;qBAEL,MAAM;;;MCNI,UAAU;IACrB,OAAO,OAAO;QACZ,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC;KAChD;;;YARF,QAAQ,SAAC;gBACR,YAAY,EAAE,CAAC,aAAa,CAAC;gBAC7B,OAAO,EAAE,CAAC,YAAY,CAAC;gBACvB,OAAO,EAAE,CAAC,aAAa,CAAC;aACzB;;;ACRD;;;;;;"}