diff options
Diffstat (limited to 'src/angular/form-elements')
25 files changed, 114 insertions, 75 deletions
diff --git a/src/angular/form-elements/checkbox/checkbox.component.html.ts b/src/angular/form-elements/checkbox/checkbox.component.html.ts index f4031db..3fdd53f 100644 --- a/src/angular/form-elements/checkbox/checkbox.component.html.ts +++ b/src/angular/form-elements/checkbox/checkbox.component.html.ts @@ -1,7 +1,7 @@ -export default ` +export const template = ` <div class="sdc-checkbox"> <label SdcRippleClickAnimation [rippleClickDisabled]="disabled"> - <input type="checkbox" class="sdc-checkbox__input" [ngModel]="checked" (ngModelChange)="toggleState($event)" [disabled]="disabled"> + <input type="checkbox" class="sdc-checkbox__input" [ngModel]="checked" (ngModelChange)="toggleState($event)" [disabled]="disabled" [attr.data-tests-id]="testId"> <span class="sdc-checkbox__label">{{ label }}</span> </label> </div> diff --git a/src/angular/form-elements/checkbox/checkbox.component.spec.ts b/src/angular/form-elements/checkbox/checkbox.component.spec.ts index 36f478e..8fc63e2 100644 --- a/src/angular/form-elements/checkbox/checkbox.component.spec.ts +++ b/src/angular/form-elements/checkbox/checkbox.component.spec.ts @@ -3,7 +3,6 @@ import { CheckboxComponent } from "./checkbox.component"; import { AnimationDirectivesModule } from "../../animations/animation-directives.module"; import { FormsModule } from "@angular/forms"; - describe("Checbox Tests", ()=>{ let component: CheckboxComponent; beforeEach(async(() => { diff --git a/src/angular/form-elements/checkbox/checkbox.component.ts b/src/angular/form-elements/checkbox/checkbox.component.ts index ec05eac..2b50e6d 100644 --- a/src/angular/form-elements/checkbox/checkbox.component.ts +++ b/src/angular/form-elements/checkbox/checkbox.component.ts @@ -1,5 +1,5 @@ import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core'; -import template from "./checkbox.component.html"; +import { template } from "./checkbox.component.html"; @Component({ selector: 'sdc-checkbox', @@ -10,6 +10,7 @@ export class CheckboxComponent { @Input() label:string; @Input() checked:boolean; @Input() disabled:boolean; + @Input() testId: string; @Output() checkedChange:EventEmitter<any> = new EventEmitter<any>(); public toggleState(newState:boolean) { diff --git a/src/angular/form-elements/dropdown/dropdown-models.ts b/src/angular/form-elements/dropdown/dropdown-models.ts index fa8dc23..a718c07 100644 --- a/src/angular/form-elements/dropdown/dropdown-models.ts +++ b/src/angular/form-elements/dropdown/dropdown-models.ts @@ -1,14 +1,14 @@ export enum DropDownTypes { - Regular, - Headless, - Auto + Regular = "Regular", + Headless = "Headless", + Auto = "Auto" } export enum DropDownOptionType { - Simple, // default - Header, - Disable, - HorizontalLine + Simple = "Simple", // default + Header = "Header", + Disable = "Disable", + HorizontalLine = "HorizontalLine" } export interface IDropDownOption { diff --git a/src/angular/form-elements/dropdown/dropdown.component.html.ts b/src/angular/form-elements/dropdown/dropdown.component.html.ts index a4247a4..36ce17c 100644 --- a/src/angular/form-elements/dropdown/dropdown.component.html.ts +++ b/src/angular/form-elements/dropdown/dropdown.component.html.ts @@ -1,4 +1,4 @@ -export default ` +export const template = ` <div class="sdc-dropdown" #dropDownWrapper [ngClass]="{ 'headless': type === cIDropDownTypes.Headless, diff --git a/src/angular/form-elements/dropdown/dropdown.component.ts b/src/angular/form-elements/dropdown/dropdown.component.ts index a23072f..33f54ac 100644 --- a/src/angular/form-elements/dropdown/dropdown.component.ts +++ b/src/angular/form-elements/dropdown/dropdown.component.ts @@ -1,7 +1,7 @@ import { Component, EventEmitter, Input, Output, forwardRef, OnChanges, SimpleChanges, OnInit, ElementRef, ViewChild, AfterViewInit, HostListener, Renderer } from '@angular/core'; import { IDropDownOption, DropDownOptionType, DropDownTypes } from "./dropdown-models"; import { ValidatableComponent } from './../validation/validatable.component'; -import template from './dropdown.component.html'; +import { template } from './dropdown.component.html'; @Component({ selector: 'sdc-dropdown', @@ -24,7 +24,7 @@ export class DropDownComponent extends ValidatableComponent implements OnChanges this.onClickDocument(e); } - private bottomVisible = true; + public bottomVisible = true; private myRenderer: Renderer; // Drop-down show/hide flag. default is false (closed) @@ -57,7 +57,9 @@ export class DropDownComponent extends ValidatableComponent implements OnChanges ngOnInit(): void { if (this.options) { this.allOptions = this.options; - if (this.options.find(option => option.type === DropDownOptionType.Header)) { + // To support ES5 + if (this.options.filter(option => option.type === DropDownOptionType.Header).length>0) { + // if (this.options.find(option => option.type === DropDownOptionType.Header)) { this.isGroupDesign = true; } } @@ -114,14 +116,20 @@ export class DropDownComponent extends ValidatableComponent implements OnChanges } private isSelectable = (value: string): boolean => { - const option: IDropDownOption = this.options.find(o => o.value === value); + // Support ES5 + // const option: IDropDownOption = this.options.find(o => o.value === value); + const option: IDropDownOption = this.options.filter(o => o.value === value)[0]; if (!option) { return false; } if (!option.type) { return true; } - return !this.unselectableOptions.find(optionType => optionType === option.type); + // Support ES5 + // return !this.unselectableOptions.find(optionType => optionType === option.type); + return !this.unselectableOptions.filter(optionType => optionType === option.type)[0]; } private setSelected = (value: string): void => { - this.selectedOption = this.options.find(o => o.value === value); + // Support ES5 + // this.selectedOption = this.options.find(o => o.value === value); + this.selectedOption = this.options.filter(o => o.value === value)[0]; if (this.type === DropDownTypes.Auto) { this.filterValue = value; } this.show = false; this.changeEmitter.next(this.selectedOption); diff --git a/src/angular/form-elements/form-elements.module.ts b/src/angular/form-elements/form-elements.module.ts index 744f8b8..d290eda 100644 --- a/src/angular/form-elements/form-elements.module.ts +++ b/src/angular/form-elements/form-elements.module.ts @@ -1,6 +1,6 @@ import { NgModule } from "@angular/core"; import { FormsModule, ReactiveFormsModule } from "@angular/forms"; -import { InputComponent } from "./input/input.component"; +import { InputComponent } from "./text-elements/input/input.component"; import { DropDownComponent } from "./dropdown/dropdown.component"; import { CommonModule } from "@angular/common"; import { CheckboxComponent } from "./checkbox/checkbox.component"; @@ -9,6 +9,7 @@ import { AnimationDirectivesModule } from '../animations/animation-directives.mo import { DropDownTriggerDirective } from "./dropdown/dropdown-trigger.directive"; import {SvgIconModule} from "../svg-icon/svg-icon.module"; import { ValidationModule } from './validation/validation.module'; +import {TextareaComponent} from "./text-elements/textarea/textarea.component"; @NgModule({ imports: [ @@ -24,6 +25,7 @@ import { ValidationModule } from './validation/validation.module'; CheckboxComponent, RadioGroupComponent, DropDownTriggerDirective, + TextareaComponent ], exports: [ DropDownComponent, @@ -31,7 +33,8 @@ import { ValidationModule } from './validation/validation.module'; InputComponent, CheckboxComponent, RadioGroupComponent, - ValidationModule + ValidationModule, + TextareaComponent ] }) export class FormElementsModule { diff --git a/src/angular/form-elements/radios/radio-buttons-group.component.html.ts b/src/angular/form-elements/radios/radio-buttons-group.component.html.ts index 28a27af..a0026f2 100644 --- a/src/angular/form-elements/radios/radio-buttons-group.component.html.ts +++ b/src/angular/form-elements/radios/radio-buttons-group.component.html.ts @@ -1,7 +1,7 @@ -export default ` +export const template = ` <label class='sdc-radio-group__legend'>{{legend}}</label> <div class='sdc-radio-group__radios {{direction}}'> - <template *ngFor="let item of options.items"> + <div *ngFor="let item of options.items"> <div class="sdc-radio"> <label class="sdc-radio__animation-wrapper" SdcRippleClickAnimation [rippleClickDisabled]="disabled"> <input class="sdc-radio__input" @@ -15,6 +15,6 @@ export default ` <span class="sdc-radio__label">{{ item.label }}</span> </label> </div> - </template> + </div> </div> `; diff --git a/src/angular/form-elements/radios/radio-buttons-group.component.ts b/src/angular/form-elements/radios/radio-buttons-group.component.ts index 800d8b0..9fa6b7d 100644 --- a/src/angular/form-elements/radios/radio-buttons-group.component.ts +++ b/src/angular/form-elements/radios/radio-buttons-group.component.ts @@ -1,6 +1,6 @@ import { Component, Input, Output, ViewEncapsulation, EventEmitter, HostBinding } from "@angular/core"; import { Direction, IOptionGroup, IRadioButtonModel } from "./radio-button.model"; -import template from './radio-buttons-group.component.html'; +import { template } from './radio-buttons-group.component.html'; @Component({ selector: 'sdc-radio-group', @@ -43,9 +43,11 @@ export class RadioGroupComponent { } private isOptionExists(value) { - const exist = this.options.items.find((item: IRadioButtonModel) => { + // Support ES5 + // const exist = this.options.items.find((item: IRadioButtonModel) => { + const exist = this.options.items.filter((item: IRadioButtonModel) => { return item.value === value; - }); + })[0]; return exist !== undefined; } diff --git a/src/angular/form-elements/input/input.component.ts b/src/angular/form-elements/text-elements/base-text-element.component.ts index af0e9f4..a87238f 100644 --- a/src/angular/form-elements/input/input.component.ts +++ b/src/angular/form-elements/text-elements/base-text-element.component.ts @@ -1,15 +1,9 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; import { FormControl } from "@angular/forms"; -import { ValidationComponent } from '../validation/validation.component'; -import { ValidatableComponent } from './../validation/validatable.component'; +import { ValidatableComponent } from "../validation/validatable.component"; import 'rxjs/add/operator/debounceTime'; -import template from "./input.component.html"; -@Component({ - selector: 'sdc-input', - template: template, -}) -export class InputComponent extends ValidatableComponent implements OnInit { +export class BaseTextElementComponent extends ValidatableComponent implements OnInit { @Output('valueChange') public baseEmitter: EventEmitter<any> = new EventEmitter<any>(); @Input() public label: string; @@ -17,7 +11,6 @@ export class InputComponent extends ValidatableComponent implements OnInit { @Input() public name: string; @Input() public classNames: string; @Input() public disabled: boolean; - @Input() public type: string; @Input() public placeHolder: string; @Input() public required: boolean; @Input() public minLength: number; @@ -25,19 +18,18 @@ export class InputComponent extends ValidatableComponent implements OnInit { @Input() public debounceTime: number; @Input() public testId: string; - protected control: FormControl; + public control: FormControl; constructor() { super(); this.control = new FormControl('', []); this.debounceTime = 0; this.placeHolder = ''; - this.type = 'text'; } ngOnInit() { this.control.valueChanges. - debounceTime(this.debounceTime) + debounceTime(this.debounceTime) .subscribe((newValue: any) => { this.baseEmitter.emit(this.value); }); diff --git a/src/angular/form-elements/input/input.component.html.ts b/src/angular/form-elements/text-elements/input/input.component.html.ts index f8a4609..bb5d788 100644 --- a/src/angular/form-elements/input/input.component.html.ts +++ b/src/angular/form-elements/text-elements/input/input.component.html.ts @@ -1,9 +1,9 @@ -export default ` +export const template = ` <div class="sdc-input "> <label class="sdc-input__label" *ngIf="label" [ngClass]="{'required':required}">{{label}}</label> <input class="sdc-input__input {{classNames}}" - [ngClass]="{'error': !valid, 'disabled':disabled}" + [ngClass]="{'error': (!valid && dirty), 'disabled':disabled}" [attr.name]="name ? name : null" [placeholder]="placeHolder" [(ngModel)]="value" diff --git a/src/angular/form-elements/text-elements/input/input.component.ts b/src/angular/form-elements/text-elements/input/input.component.ts new file mode 100644 index 0000000..48b177b --- /dev/null +++ b/src/angular/form-elements/text-elements/input/input.component.ts @@ -0,0 +1,18 @@ +import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import { template } from "./input.component.html"; +import { BaseTextElementComponent } from "../base-text-element.component"; +import 'rxjs/add/operator/debounceTime'; + +@Component({ + selector: 'sdc-input', + template: template, +}) +export class InputComponent extends BaseTextElementComponent { + @Input() public type: string; + + constructor() { + super(); + this.type = 'text'; + } + +} diff --git a/src/angular/form-elements/text-elements/textarea/textarea.component.html.ts b/src/angular/form-elements/text-elements/textarea/textarea.component.html.ts new file mode 100644 index 0000000..7e976b2 --- /dev/null +++ b/src/angular/form-elements/text-elements/textarea/textarea.component.html.ts @@ -0,0 +1,18 @@ +export const template = ` +<div class="sdc-textarea"> + <label class="sdc-textarea__label" *ngIf="label" [ngClass]="{'required':required}">{{label}}</label> + <textarea + class="sdc-textarea__textarea {{classNames}}" + [ngClass]="{'error': (!valid && dirty), 'disabled':disabled}" + [attr.name]="name ? name : null" + [placeholder]="placeHolder" + [(ngModel)]="value" + [maxlength]="maxLength" + [minlength]="minLength" + [formControl]="control" + [attr.disabled]="disabled ? 'disabled' : null" + (input)="onKeyPress($event.target.value)" + [attr.data-tests-id]="testId"> + </textarea> +</div> +`; diff --git a/src/angular/form-elements/text-elements/textarea/textarea.component.ts b/src/angular/form-elements/text-elements/textarea/textarea.component.ts new file mode 100644 index 0000000..e8f0700 --- /dev/null +++ b/src/angular/form-elements/text-elements/textarea/textarea.component.ts @@ -0,0 +1,14 @@ +import { Component } from "@angular/core"; +import { template } from './textarea.component.html'; +import { BaseTextElementComponent } from "../base-text-element.component"; + +@Component({ + selector: 'sdc-textarea', + template: template, +}) + +export class TextareaComponent extends BaseTextElementComponent { + constructor() { + super(); + } +} diff --git a/src/angular/form-elements/validation/validatable.component.ts b/src/angular/form-elements/validation/validatable.component.ts index 4817dea..3201e0b 100644 --- a/src/angular/form-elements/validation/validatable.component.ts +++ b/src/angular/form-elements/validation/validatable.component.ts @@ -1,24 +1,24 @@ -import { Input, Component } from "@angular/core"; -import { ValidationComponent } from './validation.component'; import { Subject } from 'rxjs/Subject'; import { IValidatableComponent } from './validatable.interface'; export abstract class ValidatableComponent implements IValidatableComponent { // Each ValidatableComponent should handle the style in case of error, according to this boolean - public valid = true; - + public valid: boolean; + public dirty: boolean; // Each ValidatableComponent will notify when the value is changed. public notifier: Subject<string>; constructor() { this.notifier = new Subject(); + this.dirty = false; } public abstract getValue(): any; // Each ValidatableComponent should call the valueChanged on value changed function. protected valueChanged = (value: any): void => { + this.dirty = true; this.notifier.next(value); } diff --git a/src/angular/form-elements/validation/validation-group.component.html.ts b/src/angular/form-elements/validation/validation-group.component.html.ts index dff591e..4e5e362 100644 --- a/src/angular/form-elements/validation/validation-group.component.html.ts +++ b/src/angular/form-elements/validation/validation-group.component.html.ts @@ -1,3 +1,3 @@ -export default ` +export const template = ` <ng-content></ng-content> `; diff --git a/src/angular/form-elements/validation/validation-group.component.ts b/src/angular/form-elements/validation/validation-group.component.ts index 59ecf4c..4231bbf 100644 --- a/src/angular/form-elements/validation/validation-group.component.ts +++ b/src/angular/form-elements/validation/validation-group.component.ts @@ -1,15 +1,7 @@ import { Input, Component, ContentChildren, EventEmitter, Output, QueryList, SimpleChanges, HostBinding, AfterContentInit } from "@angular/core"; -import { AbstractControl, FormControl } from "@angular/forms"; -import { Subscribable } from "rxjs/Observable"; -import { AnonymousSubscription } from "rxjs/Subscription"; -import { IValidator } from './validators/validator.interface'; import { ValidatorComponent } from './validators/base.validator.component'; -import { RegexValidatorComponent } from './validators/regex.validator.component'; -import { RequiredValidatorComponent } from './validators/required.validator.component'; -import { ValidatableComponent } from './validatable.component'; import { ValidationComponent } from './validation.component'; -import { CustomValidatorComponent } from './validators/custom.validator.component'; -import template from "./validation.component.html"; +import { template } from "./validation-group.component.html"; @Component({ selector: 'sdc-validation-group', @@ -37,7 +29,7 @@ export class ValidationGroupComponent implements AfterContentInit { let validationResult = true; // Iterate over all validationComponent inside the group and return boolean result true in case all validations passed. this.validationsComponents.forEach((validationComponent) => { - if (validationComponent.validate()) { + if (!validationComponent.validate()) { validationResult = false; } }); diff --git a/src/angular/form-elements/validation/validation.component.html.ts b/src/angular/form-elements/validation/validation.component.html.ts index 0f11a23..438cec1 100644 --- a/src/angular/form-elements/validation/validation.component.html.ts +++ b/src/angular/form-elements/validation/validation.component.html.ts @@ -1,3 +1,3 @@ -export default ` -<ng-content *ngIf="!disabled"></ng-content> +export const template = ` +<ng-content *ngIf="!disabled && (validateElement && validateElement.dirty)"></ng-content> `; diff --git a/src/angular/form-elements/validation/validation.component.ts b/src/angular/form-elements/validation/validation.component.ts index 4abdd12..289aeda 100644 --- a/src/angular/form-elements/validation/validation.component.ts +++ b/src/angular/form-elements/validation/validation.component.ts @@ -1,14 +1,10 @@ import { Input, Component, ContentChildren, EventEmitter, Output, QueryList, SimpleChanges, HostBinding, AfterContentInit } from "@angular/core"; -import { AbstractControl, FormControl } from "@angular/forms"; -import { Subscribable } from "rxjs/Observable"; -import { AnonymousSubscription } from "rxjs/Subscription"; -import { IValidator } from './validators/validator.interface'; import { ValidatorComponent } from './validators/base.validator.component'; import { RegexValidatorComponent } from './validators/regex.validator.component'; import { RequiredValidatorComponent } from './validators/required.validator.component'; import { ValidatableComponent } from './validatable.component'; import { CustomValidatorComponent } from './validators/custom.validator.component'; -import template from "./validation.component.html"; +import { template } from "./validation.component.html"; @Component({ selector: 'sdc-validation', @@ -47,6 +43,9 @@ export class ValidationComponent implements AfterContentInit { }, (error) => console.log('Validation subscribe error') ); + // init validateElement.valid. + const value = this.validateElement.getValue(); + this.validateElement.notifier.next(value); } public validate = (): boolean => { diff --git a/src/angular/form-elements/validation/validation.module.ts b/src/angular/form-elements/validation/validation.module.ts index 4213f76..a6aa41e 100644 --- a/src/angular/form-elements/validation/validation.module.ts +++ b/src/angular/form-elements/validation/validation.module.ts @@ -3,7 +3,6 @@ import { FormsModule, ReactiveFormsModule } from "@angular/forms"; import { CommonModule } from "@angular/common"; import { SvgIconModule } from './../../svg-icon/svg-icon.module'; import { ValidationComponent } from './validation.component'; -import { ValidatorComponent } from './validators/base.validator.component'; import { RequiredValidatorComponent } from './validators/required.validator.component'; import { RegexValidatorComponent } from './validators/regex.validator.component'; import { CustomValidatorComponent } from './validators/custom.validator.component'; diff --git a/src/angular/form-elements/validation/validators/base.validator.component.html.ts b/src/angular/form-elements/validation/validators/base.validator.component.html.ts index aba8eed..d96ee3b 100644 --- a/src/angular/form-elements/validation/validators/base.validator.component.html.ts +++ b/src/angular/form-elements/validation/validators/base.validator.component.html.ts @@ -1,6 +1,6 @@ -export default ` +export const template = ` <svg-icon-label - *ngIf="!isValid" + *ngIf="!isValid && !disabled" name="alert-triangle" mode="error" size="small" diff --git a/src/angular/form-elements/validation/validators/base.validator.component.ts b/src/angular/form-elements/validation/validators/base.validator.component.ts index 3d751af..8fd0361 100644 --- a/src/angular/form-elements/validation/validators/base.validator.component.ts +++ b/src/angular/form-elements/validation/validators/base.validator.component.ts @@ -1,18 +1,12 @@ import { Input, Component, ContentChildren, EventEmitter, Output, QueryList, SimpleChanges, HostBinding } from "@angular/core"; -import { IValidator } from './validator.interface'; -import template from "./base.validator.component.html"; -@Component({ - selector: 'sdc-validator', - template: template -}) export abstract class ValidatorComponent { @Input() public message: any; @Input() public disabled: boolean; @HostBinding('class') classes; - protected isValid: boolean; + public isValid: boolean; constructor() { this.disabled = false; diff --git a/src/angular/form-elements/validation/validators/custom.validator.component.ts b/src/angular/form-elements/validation/validators/custom.validator.component.ts index eb09636..0ec0e68 100644 --- a/src/angular/form-elements/validation/validators/custom.validator.component.ts +++ b/src/angular/form-elements/validation/validators/custom.validator.component.ts @@ -1,7 +1,7 @@ import { Input, Component } from "@angular/core"; import { ValidatorComponent } from "./base.validator.component"; import { IValidator } from './validator.interface'; -import template from "./base.validator.component.html"; +import { template } from "./base.validator.component.html"; @Component({ selector: 'sdc-custom-validator', diff --git a/src/angular/form-elements/validation/validators/regex.validator.component.ts b/src/angular/form-elements/validation/validators/regex.validator.component.ts index 5929016..5a213a9 100644 --- a/src/angular/form-elements/validation/validators/regex.validator.component.ts +++ b/src/angular/form-elements/validation/validators/regex.validator.component.ts @@ -1,7 +1,7 @@ import { Input, Component } from "@angular/core"; import { ValidatorComponent } from "./base.validator.component"; import { IValidator } from './validator.interface'; -import template from "./base.validator.component.html"; +import { template } from "./base.validator.component.html"; @Component({ selector: 'sdc-regex-validator', diff --git a/src/angular/form-elements/validation/validators/required.validator.component.ts b/src/angular/form-elements/validation/validators/required.validator.component.ts index 7eee932..fc550ca 100644 --- a/src/angular/form-elements/validation/validators/required.validator.component.ts +++ b/src/angular/form-elements/validation/validators/required.validator.component.ts @@ -1,7 +1,7 @@ import { Input, Component } from "@angular/core"; import { ValidatorComponent } from "./base.validator.component"; import { IValidator } from './validator.interface'; -import template from "./base.validator.component.html"; +import { template } from "./base.validator.component.html"; @Component({ selector: 'sdc-required-validator', |