diff --git a/component-package/controls/index.ts b/component-package/controls/index.ts index 9d5297e0f..4aa1fa453 100644 --- a/component-package/controls/index.ts +++ b/component-package/controls/index.ts @@ -22,7 +22,6 @@ export { ModalPlaceholderComponent } from './modal/modal.component'; export { MonthpickerComponent } from './monthpicker/monthpicker.component'; export { DatepickerComponent } from './datepicker/datepicker.component'; export { InputComponent } from './input/input.component'; -export { InputNewComponent } from './input-new/input-new.component'; export { CardSectionComponent } from './card/cardSection.component'; export { TitleValueComponent } from './titleValue/titleValue.component'; export { LoaderComponent } from './loader/loader.component'; diff --git a/component-package/controls/input-new/input-new.component.html b/component-package/controls/input-new/input-new.component.html deleted file mode 100644 index 9f708ed84..000000000 --- a/component-package/controls/input-new/input-new.component.html +++ /dev/null @@ -1,18 +0,0 @@ -
- -
- -
-
{{suffix}}
-
-
-
-
-
-
{{validationErrorMessage | truncate:64}}
-
{{validationErrorMessage | truncate:24}}
-
-
diff --git a/component-package/controls/input/input.component.html b/component-package/controls/input/input.component.html index 6691c0154..0bfb0aded 100644 --- a/component-package/controls/input/input.component.html +++ b/component-package/controls/input/input.component.html @@ -3,7 +3,7 @@ }">
-
{{suffix}}
diff --git a/component-package/controls/input/input.component.ts b/component-package/controls/input/input.component.ts index e8fc4254e..4cc787f8a 100644 --- a/component-package/controls/input/input.component.ts +++ b/component-package/controls/input/input.component.ts @@ -5,90 +5,90 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { concat } from 'rxjs/observable/concat'; @Component({ - selector: 'vgr-input', - moduleId: module.id, - templateUrl: './input.component.html', + selector: 'vgr-input', + moduleId: module.id, + templateUrl: './input.component.html', - providers: [{ - provide: NG_VALUE_ACCESSOR, - useExisting: forwardRef(() => InputComponent), - multi: true - }] + providers: [{ + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => InputComponent), + multi: true + }] }) export class InputComponent implements ControlValueAccessor { - @Input() isInvalid: boolean; - - @Input() @HostBinding('class.readonly') readonly?: boolean; - @Input() @HostBinding('class.input--small') small: boolean; - @Input() @HostBinding('class.align-right') alignRight: boolean; - - @Input() suffix: string; - @Input() value: any; - @Input() maxlength?: number; - @Input() errormessage: string; - - @Output() blur: EventEmitter; - @Output() focus: EventEmitter; - - @HostBinding('class.validated-input') hasClass = true; - @HostBinding('class.validation-error--active') get errorClass() { - return this.touched && this.isInvalid && !this.hasFocus; - } - @HostBinding('class.validation-error--editing') get editingClass() { - return this.touched && this.isInvalid && this.hasFocus; - } - @HostBinding('class.validation-error--fixed') get fixedClass() { - return this.invalidOnFocus && this.touched && !this.isInvalid && !this.hasFocus; + @Input() isInvalid: boolean; + + @Input() @HostBinding('class.readonly') readonly?: boolean; + @Input() @HostBinding('class.input--small') small: boolean; + @Input() @HostBinding('class.align-right') alignRight: boolean; + + @Input() suffix: string; + @Input() value: any; + @Input() maxlength?: number; + @Input() errormessage: string; + + @Output() blur: EventEmitter; + @Output() focus: EventEmitter; + + @HostBinding('class.validated-input') hasClass = true; + @HostBinding('class.validation-error--active') get errorClass() { + return this.touched && this.isInvalid && !this.hasFocus; + } + @HostBinding('class.validation-error--editing') get editingClass() { + return this.touched && this.isInvalid && this.hasFocus; + } + @HostBinding('class.validation-error--fixed') get fixedClass() { + return this.invalidOnFocus && this.touched && !this.isInvalid && !this.hasFocus; + } + + control: AbstractControl; + hasFocus = false; + touched = false; + invalidOnFocus = false; + + constructor() { + this.blur = new EventEmitter(); + this.focus = new EventEmitter(); + } + + writeValue(value: any) { + if (value !== undefined) { + this.value = value; } + } - control: AbstractControl; - hasFocus = false; - touched = false; - invalidOnFocus = false; + registerOnChange(fn: any) { + this.onChange = fn; + } - constructor() { - this.blur = new EventEmitter(); - this.focus = new EventEmitter(); - } + registerOnTouched(fn: any) { + this.onTouched = fn; + } - writeValue(value: any) { - if (value !== undefined) { - this.value = value; - } - } + onChange(input: any) { + this.value = input; + } - registerOnChange(fn: any) { - this.onChange = fn; - } - - registerOnTouched(fn: any) { - this.onTouched = fn; - } + onTouched() { + } - onChange(input: any) { - this.value = input; + onBlur(): void { + if (this.readonly) { + return; } - onTouched() { - } - - onBlur(): void { - if (this.readonly) { - return; - } - - this.touched = true; - this.hasFocus = false; - this.blur.emit(event); - } + this.touched = true; + this.hasFocus = false; + this.blur.emit(event); + } - onFocus(): void { - if (this.readonly) { - return; - } - this.invalidOnFocus = this.isInvalid && this.touched; - this.hasFocus = true; - this.focus.emit(event); + onFocus(): void { + if (this.readonly) { + return; } + this.invalidOnFocus = this.isInvalid && this.touched; + this.hasFocus = true; + this.focus.emit(event); + } } diff --git a/component-package/komponentkartan.module.ts b/component-package/komponentkartan.module.ts index ca76b5e54..31dda6a2c 100644 --- a/component-package/komponentkartan.module.ts +++ b/component-package/komponentkartan.module.ts @@ -55,7 +55,6 @@ const PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = { control.MonthpickerComponent, control.DatepickerComponent, control.InputComponent, - control.InputNewComponent, control.CardComponent, control.CardHeaderComponent, control.CardColumnComponent, @@ -98,7 +97,6 @@ const PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = { control.MonthpickerComponent, control.DatepickerComponent, control.InputComponent, - control.InputNewComponent, control.CardComponent, control.CardHeaderComponent, control.CardColumnComponent, diff --git a/demo-app/inputFields/inputFields.component.html b/demo-app/inputFields/inputFields.component.html index b9d79256d..7d2add50d 100644 --- a/demo-app/inputFields/inputFields.component.html +++ b/demo-app/inputFields/inputFields.component.html @@ -4,8 +4,6 @@

Åtgärder

Öppna
- -

Some content

@@ -15,11 +13,8 @@

Some content

-
-
-
-

Notera

-
    -
  • - Validering sker alltid när man lämnar fältet (onblur) -
  • -
  • - Om man anger pattern blir fältet automatiskt obligatoriskt. -
  • -
  • - För numeriska fält (numeric, amount, km, percent) uppdateras värdet till NaN om fältet inte kan tolkas som ett giltigt värde -
  • - -
  • - Om pattern anger ett maximalt antal tecken, sätt även [maxlength] för att spärra fältet för längre inmatning -
  • -
-
-
-
-
-

Konfiguration

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyBeskrivningExempel
[value]Värde att binda till[value]="person.lastName"
[validateOnInit]Om true, validera värdet vid laddning av sidan. Default = false.[validateOnInit]="true"
(valueChanged)Event när värdet ändras. Triggas när fokus lämnar fältet. Värdet är parameter.(valueChanged)="person.lastName = $event"
[title]Tool-tip vid hover. Default = tomt.[title]="'Fyll i ditt namn här'"
[maxlength]Max antal tecken. Begränsar antalet möjliga tecken att mata in. Default = obegränsat.[maxlength]="5"
[required]Om true, är fältet obligatoriskt, annars skapas valideringsfel. Default = false[required]="true"
[pattern]Regex att matcha innehållet mot vid validering. Default = tomt[pattern]="[a-z,A-Z]+'" (Minst en bokstav)
[invalidtext]Text som visas vid valideringsfel för pattern eller om obligatoriskt fält ej fyllts i[invalidtext]="'Ange ett värde mellan 1-10'"
[suffix]Text som visas till höger om fältet, som t.ex en enhet (km, m, kg, kr mm)[suffix]="'kg'"
[alignRight]Om true, högerställ innehållet i fältet. Default är False.[alignRight]="true"
[type]Fördefinierade typer av färdig validering samt suffix. Gltiga värden är amount, kg, percent, numeric. Sätter - pattern, högerställer samt formatterar värdet. Inställningar möjliga att skriva över med enstaka properties - ovan. - [type]="'amount'"
[customValidator]En egendefinierad funktion som returnerar validering baserat på innehållet. Anropas när fokus lämnar fältet. - Funktionen tar in en sträng och returnerar ett IValidationResult med resultat samt meddelande. Se "Validering - med service" ovan. Notera anropet med [funktion].bind(this). - [customValidator]="validateCityName.bind(this)"
-
-
- diff --git a/package.json b/package.json index 64420013d..024a7a467 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vgr-komponentkartan", - "version": "0.3.3-rc32", + "version": "0.3.3-rc33", "author": "Västra Götalandsregionen", "scripts": { "start": "concurrent \"npm run _watch-ts\" \"npm run _local-webserver\" \"npm run _watch-css\" \"npm run _watch-demo-app-css\"",