Skip to content

Commit

Permalink
feat(form): adding clr-control-success as part of Clarity containers
Browse files Browse the repository at this point in the history
  - create component to represent clr-control-success inside containers
  - add success icon inside containers
  - combine if-success and if-error service into one if-control-state
  - if-success and if-error components now extend single abstract classs having the base logic inside.
  - update all containers to provide clr-control-success
  - provide demo page

Signed-off-by: Bozhidar Dryanovski <[email protected]>
  • Loading branch information
bdryanovski committed Jun 15, 2020
1 parent f187802 commit 9b6bc17
Show file tree
Hide file tree
Showing 61 changed files with 1,177 additions and 427 deletions.
59 changes: 43 additions & 16 deletions packages/angular/golden/clr-angular.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -49,13 +49,15 @@ export declare abstract class ClrAbstractContainer implements DynamicWrapper, On
_dynamic: boolean;
control: NgControl;
protected controlClassService: ControlClassService;
protected ifErrorService: IfErrorService;
invalid: boolean;
protected ifControlStateService: IfControlStateService;
label: ClrLabel;
protected layoutService: LayoutService;
protected ngControlService: NgControlService;
get showHelper(): boolean;
get showInvalid(): boolean;
get showValid(): boolean;
protected subscriptions: Subscription[];
constructor(ifErrorService: IfErrorService, layoutService: LayoutService, controlClassService: ControlClassService, ngControlService: NgControlService);
constructor(ifControlStateService: IfControlStateService, layoutService: LayoutService, controlClassService: ControlClassService, ngControlService: NgControlService);
addGrid(): boolean;
controlClass(): string;
ngOnDestroy(): void;
Expand Down Expand Up @@ -261,10 +263,11 @@ export declare class ClrCheckboxContainer extends ClrAbstractContainer {
set clrInline(value: boolean | string);
get clrInline(): boolean | string;
protected controlClassService: ControlClassService;
protected ifErrorService: IfErrorService;
controlSuccessComponent: ClrControlSuccess;
protected ifControlStateService: IfControlStateService;
protected layoutService: LayoutService;
protected ngControlService: NgControlService;
constructor(ifErrorService: IfErrorService, layoutService: LayoutService, controlClassService: ControlClassService, ngControlService: NgControlService);
constructor(layoutService: LayoutService, controlClassService: ControlClassService, ngControlService: NgControlService, ifControlStateService: IfControlStateService);
}

export declare class ClrCheckboxModule {
Expand Down Expand Up @@ -367,6 +370,7 @@ export declare class ClrControl extends WrappedFormControl<ClrControlContainer>
}

export declare class ClrControlContainer extends ClrAbstractContainer {
controlSuccessComponent: ClrControlSuccess;
}

export declare class ClrControlError {
Expand All @@ -379,6 +383,11 @@ export declare class ClrControlHelper {
constructor(controlIdService: ControlIdService);
}

export declare class ClrControlSuccess {
controlIdService: ControlIdService;
constructor(controlIdService: ControlIdService);
}

export declare class ClrDatagrid<T = any> implements AfterContentInit, AfterViewInit, OnDestroy {
SELECTION_TYPE: typeof SelectionType;
_calculationRows: ViewContainerRef;
Expand Down Expand Up @@ -734,8 +743,10 @@ export declare class ClrDatalist implements AfterContentInit {
}

export declare class ClrDatalistContainer extends ClrAbstractContainer {
controlSuccessComponent: ClrControlSuccess;
focus: boolean;
constructor(controlClassService: ControlClassService, layoutService: LayoutService, ifErrorService: IfErrorService, ngControlService: NgControlService, focusService: FocusService);
protected ifControlStateService: IfControlStateService;
constructor(controlClassService: ControlClassService, layoutService: LayoutService, ngControlService: NgControlService, focusService: FocusService, ifControlStateService: IfControlStateService);
}

export declare class ClrDatalistInput extends WrappedFormControl<ClrDatalistContainer> implements AfterContentInit {
Expand All @@ -758,14 +769,18 @@ export declare class ClrDateContainer implements DynamicWrapper, OnDestroy, Afte
set clrPosition(position: string);
commonStrings: ClrCommonStringsService;
control: NgControl;
controlSuccessComponent: ClrControlSuccess;
focus: boolean;
invalid: boolean;
get isEnabled(): boolean;
get isInputDateDisabled(): boolean;
label: ClrLabel;
get open(): boolean;
get popoverPosition(): ClrPopoverPosition;
constructor(toggleService: ClrPopoverToggleService, dateNavigationService: DateNavigationService, datepickerEnabledService: DatepickerEnabledService, dateFormControlService: DateFormControlService, commonStrings: ClrCommonStringsService, ifErrorService: IfErrorService, focusService: FocusService, viewManagerService: ViewManagerService, controlClassService: ControlClassService, layoutService: LayoutService, ngControlService: NgControlService);
showHelper: boolean;
state: CONTROL_STATE;
valid: boolean;
constructor(toggleService: ClrPopoverToggleService, dateNavigationService: DateNavigationService, datepickerEnabledService: DatepickerEnabledService, dateFormControlService: DateFormControlService, commonStrings: ClrCommonStringsService, focusService: FocusService, viewManagerService: ViewManagerService, controlClassService: ControlClassService, layoutService: LayoutService, ngControlService: NgControlService, ifControlStateService: IfControlStateService);
addGrid(): boolean;
controlClass(): string;
ngAfterViewInit(): void;
Expand Down Expand Up @@ -1015,10 +1030,10 @@ export declare class ClrIfDragged<T> implements OnDestroy {
ngOnDestroy(): void;
}

export declare class ClrIfError {
export declare class ClrIfError extends AbstractIfState {
error: string;
constructor(ifErrorService: IfErrorService, ngControlService: NgControlService, template: TemplateRef<any>, container: ViewContainerRef);
ngOnDestroy(): void;
constructor(ifControlStateService: IfControlStateService, ngControlService: NgControlService, template: TemplateRef<any>, container: ViewContainerRef);
protected handleState(state: CONTROL_STATE): void;
}

export declare class ClrIfExpanded implements OnInit, OnDestroy {
Expand All @@ -1040,12 +1055,18 @@ export declare class ClrIfOpen implements OnDestroy {
static ngAcceptInputType_open: boolean | '';
}

export declare class ClrIfSuccess extends AbstractIfState {
constructor(ifControlStateService: IfControlStateService, ngControlService: NgControlService, template: TemplateRef<any>, container: ViewContainerRef);
protected handleState(state: CONTROL_STATE): void;
}

export declare class ClrInput extends WrappedFormControl<ClrInputContainer> {
protected index: number;
constructor(vcr: ViewContainerRef, injector: Injector, control: NgControl, renderer: Renderer2, el: ElementRef);
}

export declare class ClrInputContainer extends ClrAbstractContainer {
controlSuccessComponent: ClrControlSuccess;
}

export declare class ClrInputModule {
Expand Down Expand Up @@ -1181,10 +1202,11 @@ export declare class ClrPasswordContainer extends ClrAbstractContainer {
set clrToggle(state: boolean);
get clrToggle(): boolean;
commonStrings: ClrCommonStringsService;
controlSuccessComponent: ClrControlSuccess;
focus: boolean;
focusService: FocusService;
show: boolean;
constructor(ifErrorService: IfErrorService, layoutService: LayoutService, controlClassService: ControlClassService, ngControlService: NgControlService, focusService: FocusService, toggleService: BehaviorSubject<boolean>, commonStrings: ClrCommonStringsService);
constructor(ifControlStateService: IfControlStateService, layoutService: LayoutService, controlClassService: ControlClassService, ngControlService: NgControlService, focusService: FocusService, toggleService: BehaviorSubject<boolean>, commonStrings: ClrCommonStringsService);
toggle(): void;
}

Expand Down Expand Up @@ -1297,10 +1319,11 @@ export declare class ClrRadioContainer extends ClrAbstractContainer {
set clrInline(value: boolean | string);
get clrInline(): boolean | string;
protected controlClassService: ControlClassService;
protected ifErrorService: IfErrorService;
controlSuccessComponent: ClrControlSuccess;
protected ifControlStateService: IfControlStateService;
protected layoutService: LayoutService;
protected ngControlService: NgControlService;
constructor(ifErrorService: IfErrorService, layoutService: LayoutService, controlClassService: ControlClassService, ngControlService: NgControlService);
constructor(layoutService: LayoutService, controlClassService: ControlClassService, ngControlService: NgControlService, ifControlStateService: IfControlStateService);
}

export declare class ClrRadioModule {
Expand All @@ -1317,9 +1340,11 @@ export declare class ClrRange extends WrappedFormControl<ClrRangeContainer> {
}

export declare class ClrRangeContainer extends ClrAbstractContainer {
controlSuccessComponent: ClrControlSuccess;
set hasProgress(val: boolean);
get hasProgress(): boolean;
constructor(ifErrorService: IfErrorService, layoutService: LayoutService, controlClassService: ControlClassService, ngControlService: NgControlService, renderer: Renderer2, idService: ControlIdService);
protected ifControlStateService: IfControlStateService;
constructor(layoutService: LayoutService, controlClassService: ControlClassService, ngControlService: NgControlService, renderer: Renderer2, idService: ControlIdService, ifControlStateService: IfControlStateService);
getRangeProgressFillWidth(): string;
}

Expand All @@ -1346,11 +1371,12 @@ export declare class ClrSelect extends WrappedFormControl<ClrSelectContainer> {

export declare class ClrSelectContainer extends ClrAbstractContainer {
protected controlClassService: ControlClassService;
protected ifErrorService: IfErrorService;
controlSuccessComponent: ClrControlSuccess;
protected ifControlStateService: IfControlStateService;
protected layoutService: LayoutService;
multiple: SelectMultipleControlValueAccessor;
protected ngControlService: NgControlService;
constructor(ifErrorService: IfErrorService, layoutService: LayoutService, controlClassService: ControlClassService, ngControlService: NgControlService);
constructor(layoutService: LayoutService, controlClassService: ControlClassService, ngControlService: NgControlService, ifControlStateService: IfControlStateService);
ngOnInit(): void;
wrapperClass(): "clr-multiselect-wrapper" | "clr-select-wrapper";
}
Expand Down Expand Up @@ -1595,6 +1621,7 @@ export declare class ClrTextarea extends WrappedFormControl<ClrTextareaContainer
}

export declare class ClrTextareaContainer extends ClrAbstractContainer {
controlSuccessComponent: ClrControlSuccess;
}

export declare class ClrTextareaModule {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import { By } from '@angular/platform-browser';

import { ClrIconModule } from '../../icon/icon.module';
import { ClrCommonFormsModule } from '../common/common.module';
import { IfErrorService } from '../common/if-error/if-error.service';
import { NgControlService } from '../common/providers/ng-control.service';
import { LayoutService } from '../common/providers/layout.service';

Expand All @@ -19,6 +18,7 @@ import { ClrCheckboxContainer } from './checkbox-container';
import { ClrCheckboxWrapper } from './checkbox-wrapper';

import { ContainerNoLabelSpec, TemplateDrivenSpec, ReactiveSpec } from '../tests/container.spec';
import { IfControlStateService } from '../common/if-control-state/if-control-state.service';

@Component({
template: ` <clr-checkbox-container></clr-checkbox-container> `,
Expand Down Expand Up @@ -47,6 +47,7 @@ class NoLabelTest {}
</clr-checkbox-wrapper>
<clr-control-error>There was an error</clr-control-error>
<clr-control-helper>Helper text</clr-control-helper>
<clr-control-success>Valid</clr-control-success>
</clr-checkbox-container>
`,
})
Expand All @@ -70,6 +71,7 @@ class TemplateDrivenTest {
</clr-checkbox-wrapper>
<clr-control-error>There was an error</clr-control-error>
<clr-control-helper>Helper text</clr-control-helper>
<clr-control-success>Valid</clr-control-success>
</clr-checkbox-container>
</form>`,
})
Expand Down Expand Up @@ -102,7 +104,7 @@ export default function (): void {
TestBed.configureTestingModule({
imports: [ClrIconModule, ClrCommonFormsModule, FormsModule],
declarations: [ClrCheckboxContainer, ClrCheckboxWrapper, ClrCheckbox, TemplateDrivenTest],
providers: [NgControl, NgControlService, IfErrorService, LayoutService],
providers: [IfControlStateService, NgControl, NgControlService, LayoutService],
});
fixture = TestBed.createComponent(TemplateDrivenTest);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,14 @@
* The full license information can be found in LICENSE in the root directory of this project.
*/

import { Component, Input, Optional } from '@angular/core';
import { Component, Input, Optional, ContentChild } from '@angular/core';

import { IfErrorService } from '../common/if-error/if-error.service';
import { ControlClassService } from '../common/providers/control-class.service';
import { NgControlService } from '../common/providers/ng-control.service';
import { ClrAbstractContainer } from '../common/abstract-container';
import { LayoutService } from '../common/providers/layout.service';
import { ClrControlSuccess } from '../common/success';
import { IfControlStateService } from '../common/if-control-state/if-control-state.service';

@Component({
selector: 'clr-checkbox-container,clr-toggle-container',
Expand All @@ -20,9 +21,21 @@ import { LayoutService } from '../common/providers/layout.service';
<div class="clr-control-container" [class.clr-control-inline]="clrInline" [ngClass]="controlClass()">
<ng-content select="clr-checkbox-wrapper,clr-toggle-wrapper"></ng-content>
<div class="clr-subtext-wrapper">
<ng-content select="clr-control-helper" *ngIf="!invalid"></ng-content>
<clr-icon *ngIf="invalid" class="clr-validate-icon" shape="exclamation-circle" aria-hidden="true"></clr-icon>
<ng-content select="clr-control-error" *ngIf="invalid"></ng-content>
<ng-content select="clr-control-helper" *ngIf="showHelper"></ng-content>
<clr-icon
*ngIf="showInvalid"
class="clr-validate-icon"
shape="exclamation-circle"
aria-hidden="true"
></clr-icon>
<clr-icon
*ngIf="showValid && controlSuccessComponent"
class="clr-validate-icon"
shape="check-circle"
aria-hidden="true"
></clr-icon>
<ng-content select="clr-control-error" *ngIf="showInvalid"></ng-content>
<ng-content select="clr-control-success" *ngIf="showValid"></ng-content>
</div>
</div>
`,
Expand All @@ -31,18 +44,19 @@ import { LayoutService } from '../common/providers/layout.service';
'[class.clr-form-control-disabled]': 'control?.disabled',
'[class.clr-row]': 'addGrid()',
},
providers: [NgControlService, ControlClassService, IfErrorService],
providers: [IfControlStateService, NgControlService, ControlClassService],
})
export class ClrCheckboxContainer extends ClrAbstractContainer {
private inline = false;
@ContentChild(ClrControlSuccess) controlSuccessComponent: ClrControlSuccess;

constructor(
protected ifErrorService: IfErrorService,
@Optional() protected layoutService: LayoutService,
protected controlClassService: ControlClassService,
protected ngControlService: NgControlService
protected ngControlService: NgControlService,
protected ifControlStateService: IfControlStateService
) {
super(ifErrorService, layoutService, controlClassService, ngControlService);
super(ifControlStateService, layoutService, controlClassService, ngControlService);
}

/*
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@ import { By } from '@angular/platform-browser';

import { ClrIconModule } from '../../icon/icon.module';
import { ClrCommonFormsModule } from '../common/common.module';
import { IfErrorService } from '../common/if-error/if-error.service';
import { NgControlService } from '../common/providers/ng-control.service';
import { LayoutService } from '../common/providers/layout.service';
import { IfControlStateService } from '../common/if-control-state/if-control-state.service';

import { ClrCheckbox } from './checkbox';
import { ClrCheckboxContainer } from './checkbox-container';
Expand All @@ -39,6 +39,7 @@ class NoLabelTest {}
</clr-toggle-wrapper>
<clr-control-error>There was an error</clr-control-error>
<clr-control-helper>Helper text</clr-control-helper>
<clr-control-success>Valid</clr-control-success>
</clr-toggle-container>
`,
})
Expand All @@ -62,6 +63,7 @@ class TemplateDrivenTest {
</clr-toggle-wrapper>
<clr-control-error>There was an error</clr-control-error>
<clr-control-helper>Helper text</clr-control-helper>
<clr-control-success>Valid</clr-control-success>
</clr-toggle-container>
</form>`,
})
Expand Down Expand Up @@ -94,7 +96,7 @@ export default function (): void {
TestBed.configureTestingModule({
imports: [ClrIconModule, ClrCommonFormsModule, FormsModule],
declarations: [ClrCheckboxContainer, ClrCheckboxWrapper, ClrCheckbox, TemplateDrivenTest],
providers: [NgControl, NgControlService, IfErrorService, LayoutService],
providers: [IfControlStateService, NgControl, NgControlService, LayoutService],
});
fixture = TestBed.createComponent(TemplateDrivenTest);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,14 @@ import { By } from '@angular/platform-browser';

import { ClrIconModule } from '../../icon/icon.module';
import { ClrCommonFormsModule } from '../common/common.module';
import { IfErrorService } from '../common/if-error/if-error.service';
import { NgControlService } from '../common/providers/ng-control.service';
import { LayoutService } from '../common/providers/layout.service';

import { WrapperFullSpec, WrapperNoLabelSpec, WrapperContainerSpec } from '../tests/wrapper.spec';
import { ClrCheckbox } from './checkbox';
import { ClrCheckboxWrapper } from './checkbox-wrapper';
import { ClrCheckboxContainer } from './checkbox-container';
import { IfControlStateService } from '../common/if-control-state/if-control-state.service';

@Component({
template: `
Expand Down Expand Up @@ -63,7 +63,7 @@ export default function (): void {
TestBed.configureTestingModule({
imports: [ClrIconModule, ClrCommonFormsModule, FormsModule],
declarations: [ClrCheckboxWrapper, ClrCheckbox, FullTest],
providers: [NgControl, NgControlService, IfErrorService, LayoutService],
providers: [IfControlStateService, NgControl, NgControlService, LayoutService],
});
fixture = TestBed.createComponent(FullTest);

Expand Down
Loading

0 comments on commit 9b6bc17

Please sign in to comment.