mis-crystal-design-system 4.0.31 → 4.0.32

package/bundles/mis-crystal-design-system-async-search-dropdown.umd.min.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../projects/mis-components/async-search-dropdown/async-dropdown.component.ts","../../../projects/mis-components/async-search-dropdown/async-dropdown.module.ts"],"names":["AsyncDropdownComponent","overlay","viewContainerRef","_ngZone","_this","this","size","placeholder","debounceTime","minInputLength","multi","onSelect","EventEmitter","searchInput","FormControl","data","opened","loading","error","selections","Map","searchQueryChange","clear","itemSelected","itemRemoved","handleControlChanges","values","forEach","el","selectData","prototype","ngOnInit","uniqueKey","Error","disabled","disable","searchSubscription","valueChanges","pipe","tap","val","emit","distinctUntilChanged","subscribe","res","run","length","closeDropdown","httpStream","_a","overlayRef","hasAttached","openDropdown","dd","origin","nativeElement","list","control","value","controlSubscription","_b","ngOnChanges","changes","searchValue","currentValue","patchValue","enable","ngOnDestroy","unsubscribe","template","positionStrategy","position","flexibleConnectedTo","withPositions","ConnectionPositionPair","originX","originY","overlayX","overlayY","withPush","configs","OverlayConfig","hasBackdrop","backdropClass","scrollStrategy","scrollStrategies","reposition","width","clientWidth","create","attach","TemplatePortal","backdropClick","detach","item","effectedFromOutside","has","set","setControlValue","selectedItems","setTimeout","input","focus","scrollIntoView","displayKey","emitEvent","removeItem","delete","Object","defineProperty","Array","from","removeInputValue","reset","Component","args","selector","Overlay","ViewContainerRef","NgZone","Input","ViewChild","static","ContentChild","Output","NgModule","declarations","imports","CommonModule","OverlayModule","ReactiveFormsModule","FormsModule","LoaderModule","exports"],"mappings":"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","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  @Input() 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"]}
+{"version":3,"sources":["../../../projects/mis-components/async-search-dropdown/async-dropdown.component.ts","../../../projects/mis-components/async-search-dropdown/async-dropdown.module.ts"],"names":["AsyncDropdownComponent","overlay","viewContainerRef","_ngZone","_this","this","size","placeholder","debounceTime","minInputLength","multi","disableCopyPaste","onSelect","EventEmitter","searchInput","FormControl","data","opened","loading","error","selections","Map","searchQueryChange","clear","itemSelected","itemRemoved","handleControlChanges","values","forEach","el","selectData","prototype","ngOnInit","uniqueKey","Error","disabled","disable","searchSubscription","valueChanges","pipe","tap","val","emit","distinctUntilChanged","subscribe","res","run","length","closeDropdown","httpStream","_a","overlayRef","hasAttached","openDropdown","dd","origin","nativeElement","list","control","value","controlSubscription","_b","ngOnChanges","changes","searchValue","currentValue","patchValue","enable","ngOnDestroy","unsubscribe","template","positionStrategy","position","flexibleConnectedTo","withPositions","ConnectionPositionPair","originX","originY","overlayX","overlayY","withPush","configs","OverlayConfig","hasBackdrop","backdropClass","scrollStrategy","scrollStrategies","reposition","width","clientWidth","create","attach","TemplatePortal","backdropClick","detach","item","effectedFromOutside","has","set","setControlValue","selectedItems","setTimeout","input","focus","scrollIntoView","displayKey","emitEvent","removeItem","delete","Object","defineProperty","Array","from","removeInputValue","reset","Component","args","selector","Overlay","ViewContainerRef","NgZone","Input","ViewChild","static","ContentChild","Output","NgModule","declarations","imports","CommonModule","OverlayModule","ReactiveFormsModule","FormsModule","LoaderModule","exports"],"mappings":"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","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  @Input() disableCopyPaste: boolean = false;\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  @Input() 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"]}

package/bundles/mis-crystal-design-system-checkbox.umd.js

@@ -83,7 +83,7 @@
         { type: core.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}"]
+                    styles: [".checkbox-container{height:20px;width:20px;position:relative;cursor:pointer;-webkit-user-select:none;-moz-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 = function () { return []; };

package/bundles/mis-crystal-design-system-checkbox.umd.min.js

@@ -1,2 +1,2 @@
-!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports,require("@angular/core"),require("@angular/forms"),require("@angular/common")):"function"==typeof define&&define.amd?define("mis-crystal-design-system/checkbox",["exports","@angular/core","@angular/forms","@angular/common"],o):o(((e="undefined"!=typeof globalThis?globalThis:e||self)["mis-crystal-design-system"]=e["mis-crystal-design-system"]||{},e["mis-crystal-design-system"].checkbox={}),e.ng.core,e.ng.forms,e.ng.common)}(this,(function(e,o,r,t){"use strict";var n=function(){function e(){this.isError=!1,this.isIndeterminate=!1,this.name="",this.formControl=new r.FormControl,this.valueChange=new o.EventEmitter}return Object.defineProperty(e.prototype,"type",{set:function(e){this.isError="Error"===e},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"indeterminate",{set:function(e){e?(this.formControl.setValue(!0),this.valueChange.emit({name:this.name,value:!0})):(this.formControl.setValue(!1),this.valueChange.emit({name:this.name,value:!1})),this.isIndeterminate=e},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"checked",{set:function(e){e?this.formControl.setValue(!0):this.formControl.setValue(!1)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"disabled",{set:function(e){e?this.formControl.disable():this.formControl.enable()},enumerable:!1,configurable:!0}),e.prototype.ngOnInit=function(){},e.prototype.toggleState=function(){this.isIndeterminate?(this.isIndeterminate=!1,this.formControl.setValue(!0)):this.formControl.value?this.formControl.setValue(!1):this.formControl.setValue(!0),this.valueChange.emit({name:this.name,value:this.formControl.value})},e}();n.decorators=[{type:o.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}']}]}],n.ctorParameters=function(){return[]},n.propDecorators={inputBox:[{type:o.ViewChild,args:["input"]}],type:[{type:o.Input}],indeterminate:[{type:o.Input}],checked:[{type:o.Input}],disabled:[{type:o.Input}],name:[{type:o.Input}],formControl:[{type:o.Input}],valueChange:[{type:o.Output}]};var i=function(){function e(){}return e.forRoot=function(){return{ngModule:e,providers:[]}},e}();i.decorators=[{type:o.NgModule,args:[{declarations:[n],imports:[t.CommonModule,r.ReactiveFormsModule],exports:[n]}]}],e.CheckboxComponent=n,e.CheckboxModule=i,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports,require("@angular/core"),require("@angular/forms"),require("@angular/common")):"function"==typeof define&&define.amd?define("mis-crystal-design-system/checkbox",["exports","@angular/core","@angular/forms","@angular/common"],o):o(((e="undefined"!=typeof globalThis?globalThis:e||self)["mis-crystal-design-system"]=e["mis-crystal-design-system"]||{},e["mis-crystal-design-system"].checkbox={}),e.ng.core,e.ng.forms,e.ng.common)}(this,(function(e,o,r,t){"use strict";var n=function(){function e(){this.isError=!1,this.isIndeterminate=!1,this.name="",this.formControl=new r.FormControl,this.valueChange=new o.EventEmitter}return Object.defineProperty(e.prototype,"type",{set:function(e){this.isError="Error"===e},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"indeterminate",{set:function(e){e?(this.formControl.setValue(!0),this.valueChange.emit({name:this.name,value:!0})):(this.formControl.setValue(!1),this.valueChange.emit({name:this.name,value:!1})),this.isIndeterminate=e},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"checked",{set:function(e){e?this.formControl.setValue(!0):this.formControl.setValue(!1)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"disabled",{set:function(e){e?this.formControl.disable():this.formControl.enable()},enumerable:!1,configurable:!0}),e.prototype.ngOnInit=function(){},e.prototype.toggleState=function(){this.isIndeterminate?(this.isIndeterminate=!1,this.formControl.setValue(!0)):this.formControl.value?this.formControl.setValue(!1):this.formControl.setValue(!0),this.valueChange.emit({name:this.name,value:this.formControl.value})},e}();n.decorators=[{type:o.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;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}']}]}],n.ctorParameters=function(){return[]},n.propDecorators={inputBox:[{type:o.ViewChild,args:["input"]}],type:[{type:o.Input}],indeterminate:[{type:o.Input}],checked:[{type:o.Input}],disabled:[{type:o.Input}],name:[{type:o.Input}],formControl:[{type:o.Input}],valueChange:[{type:o.Output}]};var i=function(){function e(){}return e.forRoot=function(){return{ngModule:e,providers:[]}},e}();i.decorators=[{type:o.NgModule,args:[{declarations:[n],imports:[t.CommonModule,r.ReactiveFormsModule],exports:[n]}]}],e.CheckboxComponent=n,e.CheckboxModule=i,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=mis-crystal-design-system-checkbox.umd.min.js.map

package/bundles/mis-crystal-design-system-checkbox.umd.min.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../projects/mis-components/checkbox/checkbox.component.ts","../../../projects/mis-components/checkbox/checkbox.module.ts"],"names":["CheckboxComponent","this","isError","isIndeterminate","name","formControl","FormControl","valueChange","EventEmitter","Object","defineProperty","prototype","value","setValue","emit","disable","enable","ngOnInit","toggleState","Component","args","selector","template","ViewChild","Input","Output","CheckboxModule","forRoot","ngModule","providers","NgModule","declarations","imports","CommonModule","ReactiveFormsModule","exports"],"mappings":"+iBA4CE,SAAAA,IAnCOC,KAAAC,SAAmB,EACnBD,KAAAE,iBAA2B,EA8BzBF,KAAAG,KAAe,GACfH,KAAAI,YAA+B,IAAIC,EAAAA,YAClCL,KAAAM,YAAc,IAAIC,EAAAA,oBA7B5BC,OAAAC,eAAaV,EAAAW,UAAA,OAAI,KAAjB,SAAkBC,GAChBX,KAAKC,QAAoB,UAAVU,mCAEjBH,OAAAC,eAAaV,EAAAW,UAAA,gBAAa,KAA1B,SAA2BC,GACrBA,GACFX,KAAKI,YAAYQ,UAAS,GAC1BZ,KAAKM,YAAYO,KAAK,CACpBV,KAAMH,KAAKG,KACXQ,OAAO,MAGTX,KAAKI,YAAYQ,UAAS,GAC1BZ,KAAKM,YAAYO,KAAK,CACpBV,KAAMH,KAAKG,KACXQ,OAAO,KAGXX,KAAKE,gBAAkBS,mCAEzBH,OAAAC,eAAaV,EAAAW,UAAA,UAAO,KAApB,SAAqBC,GACfA,EAAOX,KAAKI,YAAYQ,UAAS,GAChCZ,KAAKI,YAAYQ,UAAS,oCAEjCJ,OAAAC,eAAaV,EAAAW,UAAA,WAAQ,KAArB,SAAsBC,GAChBA,EAAOX,KAAKI,YAAYU,UACvBd,KAAKI,YAAYW,0CAOxBhB,EAAAW,UAAAM,SAAA,aAEAjB,EAAAW,UAAAO,YAAA,WACMjB,KAAKE,iBACPF,KAAKE,iBAAkB,EACvBF,KAAKI,YAAYQ,UAAS,IAEtBZ,KAAKI,YAAYO,MAAOX,KAAKI,YAAYQ,UAAS,GACjDZ,KAAKI,YAAYQ,UAAS,GAEjCZ,KAAKM,YAAYO,KAAK,CACpBV,KAAMH,KAAKG,KACXQ,MAAOX,KAAKI,YAAYO,kCAtD7BO,EAAAA,UAASC,KAAA,CAAC,CACTC,SAAU,eACVC,SAAA,urFAOCC,EAAAA,UAASH,KAAA,CAAC,uBACVI,EAAAA,6BAGAA,EAAAA,uBAgBAA,EAAAA,wBAIAA,EAAAA,oBAIAA,EAAAA,2BACAA,EAAAA,2BACAC,EAAAA,2BC/BH,SAAAC,YACSA,EAAAC,QAAP,WACE,MAAO,CAAEC,SAAUF,EAAgBG,UAAW,8BAPjDC,EAAAA,SAAQV,KAAA,CAAC,CACRW,aAAc,CAAC/B,GACfgC,QAAS,CAACC,EAAAA,aAAcC,EAAAA,qBACxBC,QAAS,CAACnC","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"]}
+{"version":3,"sources":["../../../projects/mis-components/checkbox/checkbox.component.ts","../../../projects/mis-components/checkbox/checkbox.module.ts"],"names":["CheckboxComponent","this","isError","isIndeterminate","name","formControl","FormControl","valueChange","EventEmitter","Object","defineProperty","prototype","value","setValue","emit","disable","enable","ngOnInit","toggleState","Component","args","selector","template","ViewChild","Input","Output","CheckboxModule","forRoot","ngModule","providers","NgModule","declarations","imports","CommonModule","ReactiveFormsModule","exports"],"mappings":"+iBA4CE,SAAAA,IAnCOC,KAAAC,SAAmB,EACnBD,KAAAE,iBAA2B,EA8BzBF,KAAAG,KAAe,GACfH,KAAAI,YAA+B,IAAIC,EAAAA,YAClCL,KAAAM,YAAc,IAAIC,EAAAA,oBA7B5BC,OAAAC,eAAaV,EAAAW,UAAA,OAAI,KAAjB,SAAkBC,GAChBX,KAAKC,QAAoB,UAAVU,mCAEjBH,OAAAC,eAAaV,EAAAW,UAAA,gBAAa,KAA1B,SAA2BC,GACrBA,GACFX,KAAKI,YAAYQ,UAAS,GAC1BZ,KAAKM,YAAYO,KAAK,CACpBV,KAAMH,KAAKG,KACXQ,OAAO,MAGTX,KAAKI,YAAYQ,UAAS,GAC1BZ,KAAKM,YAAYO,KAAK,CACpBV,KAAMH,KAAKG,KACXQ,OAAO,KAGXX,KAAKE,gBAAkBS,mCAEzBH,OAAAC,eAAaV,EAAAW,UAAA,UAAO,KAApB,SAAqBC,GACfA,EAAOX,KAAKI,YAAYQ,UAAS,GAChCZ,KAAKI,YAAYQ,UAAS,oCAEjCJ,OAAAC,eAAaV,EAAAW,UAAA,WAAQ,KAArB,SAAsBC,GAChBA,EAAOX,KAAKI,YAAYU,UACvBd,KAAKI,YAAYW,0CAOxBhB,EAAAW,UAAAM,SAAA,aAEAjB,EAAAW,UAAAO,YAAA,WACMjB,KAAKE,iBACPF,KAAKE,iBAAkB,EACvBF,KAAKI,YAAYQ,UAAS,IAEtBZ,KAAKI,YAAYO,MAAOX,KAAKI,YAAYQ,UAAS,GACjDZ,KAAKI,YAAYQ,UAAS,GAEjCZ,KAAKM,YAAYO,KAAK,CACpBV,KAAMH,KAAKG,KACXQ,MAAOX,KAAKI,YAAYO,kCAtD7BO,EAAAA,UAASC,KAAA,CAAC,CACTC,SAAU,eACVC,SAAA,kqFAOCC,EAAAA,UAASH,KAAA,CAAC,uBACVI,EAAAA,6BAGAA,EAAAA,uBAgBAA,EAAAA,wBAIAA,EAAAA,oBAIAA,EAAAA,2BACAA,EAAAA,2BACAC,EAAAA,2BC/BH,SAAAC,YACSA,EAAAC,QAAP,WACE,MAAO,CAAEC,SAAUF,EAAgBG,UAAW,8BAPjDC,EAAAA,SAAQV,KAAA,CAAC,CACRW,aAAc,CAAC/B,GACfgC,QAAS,CAACC,EAAAA,aAAcC,EAAAA,qBACxBC,QAAS,CAACnC","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"]}