diff --git a/src/app/demo/checkbox-demo/checkbox-demo.module.ts b/src/app/demo/checkbox-demo/checkbox-demo.module.ts index 1f268fe..e51ca72 100644 --- a/src/app/demo/checkbox-demo/checkbox-demo.module.ts +++ b/src/app/demo/checkbox-demo/checkbox-demo.module.ts @@ -4,6 +4,8 @@ import { RouterModule } from '@angular/router'; import { CheckboxDemoComponent } from './checkbox-demo.component'; import { UiModule } from '../../ui/ui.module'; import { FormsModule } from '@angular/forms'; +import { IW_CHECKBOX_CONFIG } from '../../ui/checkbox/checkbox.config'; +import { CheckboxConfig } from '../../ui/checkbox/checkbox-config.interface'; @NgModule({ imports: [ @@ -15,6 +17,12 @@ import { FormsModule } from '@angular/forms'; FormsModule ], declarations: [CheckboxDemoComponent], - exports: [RouterModule] + exports: [RouterModule], + providers: [{ + provide: IW_CHECKBOX_CONFIG, + useValue: { + containerClass: 'demo-checkbox' + } + }] }) export class CheckboxDemoModule { } diff --git a/src/app/ui/checkbox/checkbox-config.interface.ts b/src/app/ui/checkbox/checkbox-config.interface.ts new file mode 100644 index 0000000..bd9ef4a --- /dev/null +++ b/src/app/ui/checkbox/checkbox-config.interface.ts @@ -0,0 +1,4 @@ + +export interface CheckboxConfig { + containerClass?: string; +} diff --git a/src/app/ui/checkbox/checkbox.config.ts b/src/app/ui/checkbox/checkbox.config.ts new file mode 100644 index 0000000..da480ab --- /dev/null +++ b/src/app/ui/checkbox/checkbox.config.ts @@ -0,0 +1,4 @@ +import { InjectionToken } from '@angular/core'; +import { CheckboxConfig } from './checkbox-config.interface'; + +export const IW_CHECKBOX_CONFIG = new InjectionToken('iw-checkbox.config'); diff --git a/src/app/ui/checkbox/checkbox/checkbox.component.ts b/src/app/ui/checkbox/checkbox/checkbox.component.ts index 70409d6..3133a37 100644 --- a/src/app/ui/checkbox/checkbox/checkbox.component.ts +++ b/src/app/ui/checkbox/checkbox/checkbox.component.ts @@ -7,12 +7,18 @@ import { HostListener, HostBinding, Input, - ChangeDetectorRef + ChangeDetectorRef, + Optional, + Inject, + Renderer, + ElementRef } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; +import { CheckboxConfig } from '../checkbox-config.interface'; +import { IW_CHECKBOX_CONFIG } from '../checkbox.config'; @Component({ selector: 'iw-checkbox', @@ -36,11 +42,23 @@ export class CheckboxComponent implements OnInit, ControlValueAccessor { @HostBinding('class.checkbox--disabled') isDisabled: boolean; - constructor(private changeDetectorRef: ChangeDetectorRef) { + constructor( + private renderer: Renderer, + private elementRef: ElementRef, + private changeDetectorRef: ChangeDetectorRef, + @Optional() @Inject(IW_CHECKBOX_CONFIG) private checkboxConfig: CheckboxConfig + ) { this.onChangeCb = this.onTouchedCb = () => {}; } ngOnInit() { + if (this.checkboxConfig && this.checkboxConfig.containerClass) { + this.renderer.setElementClass( + this.elementRef.nativeElement, + this.checkboxConfig.containerClass, + true + ); + } } onKeyup($event: KeyboardEvent) {