mirror of
https://github.com/andwati/zitadel.git
synced 2026-10-30 11:02:16 +00:00
fix(console): formfield changes and ux (#1020)
* cnsl-formfield, cnsl-label, cnsl-input, ch prefix * create user cnsl-fields, add cnsl-error * replace user forms with cnsl-fields * replace all other occurrences of mat-form-field with cnsl-fields * improve hover, active, focus behavior, headlin styling * user-grant refactor * style cleanup * stylelint * fix detail layout flexstart, user table header * input dir * error, input directives instead components, on blur handler * error directive, formfield content children * formfield control directive * use new field for new contact dialog * formfield hint, error directive, scss * hint or error binding, animation after view init * avatar changes, policy header * style lint * lint * input control within formfield, errorstatematcher * use matformcontrol to merge with selects * member table min width, lint * lint * implement from matformcontrol insteat custom, add selector * find error * add focus listener * labelfloat * fix input directive * renaming * rm logs * user search overflow, org create i18n, meta cleanup * sidenav shadow * redirect to org table * lint * lint test files * remove usage of formfieldmodule, use input module, layout optim * replace formfieldmodule usage with inputmodule * lint input dir, scss * user grant, user table optimisations * reorganize sidenav, project table empty, tooltips, avatar ch * user grant tooltips, form field error directive accessor * checkbox overflow fix, table dateblock, i18n tooltips * app placeholder, i18n, optimize mobile layout * change refresh table order, i18n, redirect chips * stylelint * chore(deps-dev): bump stylelint from 13.7.2 to 13.8.0 in /console (#1007) * fix: add project validation (#996) * fix: project add validation (#997) * fix: add project validation * fix: removed loop * chore(deps-dev): bump stylelint from 13.7.2 to 13.8.0 in /console Bumps [stylelint](https://github.com/stylelint/stylelint) from 13.7.2 to 13.8.0. - [Release notes](https://github.com/stylelint/stylelint/releases) - [Changelog](https://github.com/stylelint/stylelint/blob/master/CHANGELOG.md) - [Commits](https://github.com/stylelint/stylelint/compare/13.7.2...13.8.0) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: Silvan <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @angular/cli from 11.0.1 to 11.0.2 in /console (#1006) * fix: add project validation (#996) * fix: project add validation (#997) * fix: add project validation * fix: removed loop * chore(deps-dev): bump @angular/cli from 11.0.1 to 11.0.2 in /console Bumps [@angular/cli](https://github.com/angular/angular-cli) from 11.0.1 to 11.0.2. - [Release notes](https://github.com/angular/angular-cli/releases) - [Commits](https://github.com/angular/angular-cli/compare/v11.0.1...v11.0.2) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: Silvan <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump google-proto-files from 2.2.0 to 2.3.0 in /console (#1005) * fix: add project validation (#996) * fix: project add validation (#997) * fix: add project validation * fix: removed loop * chore(deps): bump google-proto-files from 2.2.0 to 2.3.0 in /console Bumps [google-proto-files](https://github.com/googleapis/nodejs-proto-files) from 2.2.0 to 2.3.0. - [Release notes](https://github.com/googleapis/nodejs-proto-files/releases) - [Changelog](https://github.com/googleapis/nodejs-proto-files/blob/master/CHANGELOG.md) - [Commits](https://github.com/googleapis/nodejs-proto-files/compare/v2.2.0...v2.3.0) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: Silvan <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @types/node from 14.14.6 to 14.14.9 in /console (#1004) * fix: add project validation (#996) * fix: project add validation (#997) * fix: add project validation * fix: removed loop * chore(deps-dev): bump @types/node from 14.14.6 to 14.14.9 in /console Bumps [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) from 14.14.6 to 14.14.9. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: Silvan <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @angular/language-service from 11.0.0 to 11.0.2 in /console (#999) * fix: add project validation (#996) * fix: project add validation (#997) * fix: add project validation * fix: removed loop * chore(deps-dev): bump @angular/language-service in /console Bumps [@angular/language-service](https://github.com/angular/angular/tree/HEAD/packages/language-service) from 11.0.0 to 11.0.2. - [Release notes](https://github.com/angular/angular/releases) - [Changelog](https://github.com/angular/angular/blob/master/CHANGELOG.md) - [Commits](https://github.com/angular/angular/commits/11.0.2/packages/language-service) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: Silvan <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @angular-devkit/build-angular from 0.1100.1 to 0.1100.2 in /console (#1003) * fix: add project validation (#996) * fix: project add validation (#997) * fix: add project validation * fix: removed loop * chore(deps-dev): bump @angular-devkit/build-angular in /console Bumps [@angular-devkit/build-angular](https://github.com/angular/angular-cli) from 0.1100.1 to 0.1100.2. - [Release notes](https://github.com/angular/angular-cli/releases) - [Commits](https://github.com/angular/angular-cli/commits) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: Silvan <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Max Peintner <[email protected]> * chore(deps-dev): bump prettier from 2.1.2 to 2.2.0 in /console (#1002) * fix: add project validation (#996) * fix: project add validation (#997) * fix: add project validation * fix: removed loop * chore(deps-dev): bump prettier from 2.1.2 to 2.2.0 in /console Bumps [prettier](https://github.com/prettier/prettier) from 2.1.2 to 2.2.0. - [Release notes](https://github.com/prettier/prettier/releases) - [Changelog](https://github.com/prettier/prettier/blob/master/CHANGELOG.md) - [Commits](https://github.com/prettier/prettier/compare/2.1.2...2.2.0) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: Silvan <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @types/jasmine from 3.6.1 to 3.6.2 in /console (#1001) * fix: add project validation (#996) * fix: project add validation (#997) * fix: add project validation * fix: removed loop * chore(deps-dev): bump @types/jasmine from 3.6.1 to 3.6.2 in /console Bumps [@types/jasmine](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/jasmine) from 3.6.1 to 3.6.2. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/jasmine) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: Silvan <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Max Peintner <[email protected]> * chore(deps): bump file-saver from 2.0.2 to 2.0.5 in /console (#1000) * fix: add project validation (#996) * fix: project add validation (#997) * fix: add project validation * fix: removed loop * chore(deps): bump file-saver from 2.0.2 to 2.0.5 in /console Bumps [file-saver](https://github.com/eligrey/FileSaver.js) from 2.0.2 to 2.0.5. - [Release notes](https://github.com/eligrey/FileSaver.js/releases) - [Changelog](https://github.com/eligrey/FileSaver.js/blob/master/CHANGELOG.md) - [Commits](https://github.com/eligrey/FileSaver.js/commits) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: Silvan <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Max Peintner <[email protected]> * chore(deps-dev): bump jasmine-spec-reporter in /console (#974) Bumps [jasmine-spec-reporter](https://github.com/bcaudan/jasmine-spec-reporter) from 5.0.2 to 6.0.0. - [Release notes](https://github.com/bcaudan/jasmine-spec-reporter/releases) - [Changelog](https://github.com/bcaudan/jasmine-spec-reporter/blob/master/CHANGELOG.md) - [Commits](https://github.com/bcaudan/jasmine-spec-reporter/compare/v5.0.2...v6.0.0) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * input field border improvements, primary color * redirect form, conventional ux * redirects inputs on app create * fix dynamic suffix padding, user grant layout, lint * input style accessor, contact view optim, ext idp, card fixes * hide error on untouched formfield, border red on error touched * fix change detector * change, user, form validation, delete refresh * safari font weight adjustment, change refresh emitter * key validation * remove tabls layout from projects * app changes, refactor project, app state, meta layout * add key dialog validation, startdate, rever change tabs * stylelint * Update console/src/assets/i18n/en.json Co-authored-by: Florian Forster <[email protected]> * Update console/src/assets/i18n/en.json Co-authored-by: Florian Forster <[email protected]> * Update console/src/assets/i18n/de.json Co-authored-by: Florian Forster <[email protected]> * Update console/src/assets/i18n/de.json Co-authored-by: Florian Forster <[email protected]> * Update console/src/assets/i18n/de.json Co-authored-by: Florian Forster <[email protected]> * Update console/src/assets/i18n/de.json Co-authored-by: Florian Forster <[email protected]> * Update console/src/assets/i18n/de.json Co-authored-by: Florian Forster <[email protected]> * Update console/src/assets/i18n/de.json Co-authored-by: Florian Forster <[email protected]> * Update console/src/assets/i18n/en.json Co-authored-by: Florian Forster <[email protected]> * Update console/src/assets/i18n/en.json Co-authored-by: Florian Forster <[email protected]> * finnaly fix fckntimestamp picker * optional key expiry * small state badge * Update console/src/assets/i18n/de.json Co-authored-by: Florian Forster <[email protected]> * Update console/src/assets/i18n/de.json Co-authored-by: Florian Forster <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Silvan <[email protected]> Co-authored-by: Florian Forster <[email protected]>
This commit is contained in:
Max Peintner
co-authored by
dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Florian Forster
dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Silvan
dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Florian Forster
dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Silvan
parent
42f50de790
commit
ae26999834
@@ -0,0 +1,19 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { FormControl, FormGroupDirective, NgForm } from '@angular/forms';
|
||||
|
||||
|
||||
/** Provider that defines how form controls behave with regards to displaying error messages. */
|
||||
@Injectable({ providedIn: 'root' })
|
||||
export class ErrorStateMatcher {
|
||||
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
|
||||
return !!(control && control.invalid && (control.touched || (form && form.submitted)));
|
||||
}
|
||||
}
|
||||
|
||||
/** Error state matcher that matches when a control is invalid and dirty. */
|
||||
@Injectable()
|
||||
export class ShowOnDirtyErrorStateMatcher implements ErrorStateMatcher {
|
||||
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
|
||||
return !!(control && control.invalid && (control.dirty || (form && form.submitted)));
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
import { InputDirective } from './input.directive';
|
||||
|
||||
describe('InputDirective', () => {
|
||||
it('should create an instance', () => {
|
||||
const directive = new InputDirective();
|
||||
expect(directive).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,459 @@
|
||||
import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
|
||||
import { getSupportedInputTypes, Platform } from '@angular/cdk/platform';
|
||||
import { AutofillMonitor } from '@angular/cdk/text-field';
|
||||
import {
|
||||
AfterViewInit,
|
||||
Directive,
|
||||
DoCheck,
|
||||
ElementRef,
|
||||
HostListener,
|
||||
Inject,
|
||||
Input,
|
||||
NgZone,
|
||||
OnChanges,
|
||||
OnDestroy,
|
||||
Optional,
|
||||
Self,
|
||||
} from '@angular/core';
|
||||
import { FormGroupDirective, NgControl, NgForm } from '@angular/forms';
|
||||
import { CanUpdateErrorState, CanUpdateErrorStateCtor, ErrorStateMatcher, mixinErrorState } from '@angular/material/core';
|
||||
import { MAT_FORM_FIELD, MatFormField, MatFormFieldControl } from '@angular/material/form-field';
|
||||
import { getMatInputUnsupportedTypeError, MAT_INPUT_VALUE_ACCESSOR } from '@angular/material/input';
|
||||
import { Subject } from 'rxjs';
|
||||
|
||||
|
||||
// Invalid input type. Using one of these will throw an MatInputUnsupportedTypeError.
|
||||
const MAT_INPUT_INVALID_TYPES = [
|
||||
'button',
|
||||
'checkbox',
|
||||
'file',
|
||||
'hidden',
|
||||
'image',
|
||||
'radio',
|
||||
'range',
|
||||
'reset',
|
||||
'submit',
|
||||
];
|
||||
|
||||
let nextUniqueId = 0;
|
||||
|
||||
// Boilerplate for applying mixins to MatInput.
|
||||
/** @docs-private */
|
||||
class MatInputBase {
|
||||
constructor(public _defaultErrorStateMatcher: ErrorStateMatcher,
|
||||
public _parentForm: NgForm,
|
||||
public _parentFormGroup: FormGroupDirective,
|
||||
/** @docs-private */
|
||||
public ngControl: NgControl) { }
|
||||
}
|
||||
const _MatInputMixinBase: CanUpdateErrorStateCtor & typeof MatInputBase =
|
||||
mixinErrorState(MatInputBase);
|
||||
|
||||
/** Directive that allows a native input to work inside a `MatFormField`. */
|
||||
@Directive({
|
||||
selector: `input[cnslInput], textarea[cnslInput], select[cnslNativeControl]`,
|
||||
exportAs: 'cnslInput',
|
||||
host: {
|
||||
/**
|
||||
* @breaking-change 8.0.0 remove .mat-form-field-autofill-control in favor of AutofillMonitor.
|
||||
*/
|
||||
// 'class': 'cnsl-input-element cnsl-form-field-autofill-control',
|
||||
// '[class.mat-input-server]': '_isServer',
|
||||
// Native input properties that are overwritten by Angular inputs need to be synced with
|
||||
// the native input element. Otherwise property bindings for those don't work.
|
||||
'[attr.id]': 'id',
|
||||
// At the time of writing, we have a lot of customer tests that look up the input based on its
|
||||
// placeholder. Since we sometimes omit the placeholder attribute from the DOM to prevent screen
|
||||
// readers from reading it twice, we have to keep it somewhere in the DOM for the lookup.
|
||||
'[attr.data-placeholder]': 'placeholder',
|
||||
'[disabled]': 'disabled',
|
||||
'[required]': 'required',
|
||||
'[attr.readonly]': 'readonly && !_isNativeSelect || null',
|
||||
'[attr.aria-invalid]': 'errorState',
|
||||
'[attr.aria-required]': 'required.toString()',
|
||||
},
|
||||
providers: [{ provide: MatFormFieldControl, useExisting: InputDirective }],
|
||||
})
|
||||
export class InputDirective extends _MatInputMixinBase implements MatFormFieldControl<any>, OnChanges,
|
||||
OnDestroy, AfterViewInit, DoCheck, CanUpdateErrorState {
|
||||
protected _uid: string = `cnsl-input-${nextUniqueId++}`;
|
||||
protected _previousNativeValue: any;
|
||||
private _inputValueAccessor: { value: any; };
|
||||
private _previousPlaceholder!: string | null;
|
||||
|
||||
/** Whether the component is being rendered on the server. */
|
||||
readonly _isServer: boolean;
|
||||
|
||||
/** Whether the component is a native html select. */
|
||||
readonly _isNativeSelect: boolean;
|
||||
|
||||
/** Whether the component is a textarea. */
|
||||
readonly _isTextarea: boolean;
|
||||
|
||||
/**
|
||||
* Implemented as part of MatFormFieldControl.
|
||||
* @docs-private
|
||||
*/
|
||||
focused: boolean = false;
|
||||
|
||||
/**
|
||||
* Implemented as part of MatFormFieldControl.
|
||||
* @docs-private
|
||||
*/
|
||||
readonly stateChanges: Subject<void> = new Subject<void>();
|
||||
|
||||
/**
|
||||
* Implemented as part of MatFormFieldControl.
|
||||
* @docs-private
|
||||
*/
|
||||
controlType: string = 'mat-input';
|
||||
|
||||
/**
|
||||
* Implemented as part of MatFormFieldControl.
|
||||
* @docs-private
|
||||
*/
|
||||
autofilled: boolean = false;
|
||||
|
||||
/**
|
||||
* Implemented as part of MatFormFieldControl.
|
||||
* @docs-private
|
||||
*/
|
||||
@Input()
|
||||
get disabled(): boolean {
|
||||
if (this.ngControl && this.ngControl.disabled !== null) {
|
||||
return this.ngControl.disabled;
|
||||
}
|
||||
return this._disabled;
|
||||
}
|
||||
set disabled(value: boolean) {
|
||||
this._disabled = coerceBooleanProperty(value);
|
||||
|
||||
// Browsers may not fire the blur event if the input is disabled too quickly.
|
||||
// Reset from here to ensure that the element doesn't become stuck.
|
||||
if (this.focused) {
|
||||
this.focused = false;
|
||||
this.stateChanges.next();
|
||||
}
|
||||
}
|
||||
protected _disabled: boolean = false;
|
||||
|
||||
/**
|
||||
* Implemented as part of MatFormFieldControl.
|
||||
* @docs-private
|
||||
*/
|
||||
@Input()
|
||||
get id(): string { return this._id; }
|
||||
set id(value: string) { this._id = value || this._uid; }
|
||||
protected _id!: string;
|
||||
|
||||
/**
|
||||
* Implemented as part of MatFormFieldControl.
|
||||
* @docs-private
|
||||
*/
|
||||
@Input() placeholder!: string;
|
||||
|
||||
/**
|
||||
* Implemented as part of MatFormFieldControl.
|
||||
* @docs-private
|
||||
*/
|
||||
@Input()
|
||||
get required(): boolean { return this._required; }
|
||||
set required(value: boolean) { this._required = coerceBooleanProperty(value); }
|
||||
protected _required: boolean = false;
|
||||
|
||||
/** Input type of the element. */
|
||||
@Input()
|
||||
get type(): string { return this._type; }
|
||||
set type(value: string) {
|
||||
this._type = value || 'text';
|
||||
this._validateType();
|
||||
|
||||
// When using Angular inputs, developers are no longer able to set the properties on the native
|
||||
// input element. To ensure that bindings for `type` work, we need to sync the setter
|
||||
// with the native property. Textarea elements don't support the type property or attribute.
|
||||
if (!this._isTextarea && getSupportedInputTypes().has(this._type)) {
|
||||
(this._elementRef.nativeElement as HTMLInputElement).type = this._type;
|
||||
}
|
||||
}
|
||||
protected _type: string = 'text';
|
||||
|
||||
/** An object used to control when error messages are shown. */
|
||||
@Input() errorStateMatcher!: ErrorStateMatcher;
|
||||
|
||||
/**
|
||||
* Implemented as part of MatFormFieldControl.
|
||||
* @docs-private
|
||||
*/
|
||||
// tslint:disable-next-line:no-input-rename
|
||||
@Input('aria-describedby') userAriaDescribedBy!: string;
|
||||
|
||||
/**
|
||||
* Implemented as part of MatFormFieldControl.
|
||||
* @docs-private
|
||||
*/
|
||||
@Input()
|
||||
get value(): string { return this._inputValueAccessor.value; }
|
||||
set value(value: string) {
|
||||
if (value !== this.value) {
|
||||
this._inputValueAccessor.value = value;
|
||||
this.stateChanges.next();
|
||||
}
|
||||
}
|
||||
|
||||
/** Whether the element is readonly. */
|
||||
@Input()
|
||||
get readonly(): boolean { return this._readonly; }
|
||||
set readonly(value: boolean) { this._readonly = coerceBooleanProperty(value); }
|
||||
private _readonly: boolean = false;
|
||||
|
||||
protected _neverEmptyInputTypes: string[] = [
|
||||
'date',
|
||||
'datetime',
|
||||
'datetime-local',
|
||||
'month',
|
||||
'time',
|
||||
'week',
|
||||
].filter(t => getSupportedInputTypes().has(t));
|
||||
|
||||
constructor(
|
||||
protected _elementRef: ElementRef<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>,
|
||||
protected _platform: Platform,
|
||||
/** @docs-private */
|
||||
@Optional() @Self() public ngControl: NgControl,
|
||||
@Optional() _parentForm: NgForm,
|
||||
@Optional() _parentFormGroup: FormGroupDirective,
|
||||
_defaultErrorStateMatcher: ErrorStateMatcher,
|
||||
@Optional() @Self() @Inject(MAT_INPUT_VALUE_ACCESSOR) inputValueAccessor: any,
|
||||
private _autofillMonitor: AutofillMonitor,
|
||||
ngZone: NgZone,
|
||||
// TODO: Remove this once the legacy appearance has been removed. We only need
|
||||
// to inject the form-field for determining whether the placeholder has been promoted.
|
||||
@Optional() @Inject(MAT_FORM_FIELD) private _formField?: MatFormField) {
|
||||
|
||||
super(_defaultErrorStateMatcher, _parentForm, _parentFormGroup, ngControl);
|
||||
|
||||
const element = this._elementRef.nativeElement;
|
||||
const nodeName = element.nodeName.toLowerCase();
|
||||
|
||||
// If no input value accessor was explicitly specified, use the element as the input value
|
||||
// accessor.
|
||||
this._inputValueAccessor = inputValueAccessor || element;
|
||||
|
||||
this._previousNativeValue = this.value;
|
||||
|
||||
// Force setter to be called in case id was not specified.
|
||||
this.id = this.id;
|
||||
|
||||
// On some versions of iOS the caret gets stuck in the wrong place when holding down the delete
|
||||
// key. In order to get around this we need to "jiggle" the caret loose. Since this bug only
|
||||
// exists on iOS, we only bother to install the listener on iOS.
|
||||
if (_platform.IOS) {
|
||||
ngZone.runOutsideAngular(() => {
|
||||
_elementRef.nativeElement.addEventListener('keyup', (event: Event) => {
|
||||
const el: HTMLInputElement = event.target as HTMLInputElement;
|
||||
if (!el.value && !el.selectionStart && !el.selectionEnd) {
|
||||
// Note: Just setting `0, 0` doesn't fix the issue. Setting
|
||||
// `1, 1` fixes it for the first time that you type text and
|
||||
// then hold delete. Toggling to `1, 1` and then back to
|
||||
// `0, 0` seems to completely fix it.
|
||||
el.setSelectionRange(1, 1);
|
||||
el.setSelectionRange(0, 0);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
this._isServer = !this._platform.isBrowser;
|
||||
this._isNativeSelect = nodeName === 'select';
|
||||
this._isTextarea = nodeName === 'textarea';
|
||||
|
||||
if (this._isNativeSelect) {
|
||||
this.controlType = (element as HTMLSelectElement).multiple ? 'mat-native-select-multiple' :
|
||||
'mat-native-select';
|
||||
}
|
||||
}
|
||||
|
||||
ngAfterViewInit(): void {
|
||||
if (this._platform.isBrowser) {
|
||||
this._autofillMonitor.monitor(this._elementRef.nativeElement).subscribe(event => {
|
||||
this.autofilled = event.isAutofilled;
|
||||
this.stateChanges.next();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
ngOnChanges(): void {
|
||||
this.stateChanges.next();
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this.stateChanges.complete();
|
||||
|
||||
if (this._platform.isBrowser) {
|
||||
this._autofillMonitor.stopMonitoring(this._elementRef.nativeElement);
|
||||
}
|
||||
}
|
||||
|
||||
ngDoCheck(): void {
|
||||
if (this.ngControl) {
|
||||
// We need to re-evaluate this on every change detection cycle, because there are some
|
||||
// error triggers that we can't subscribe to (e.g. parent form submissions). This means
|
||||
// that whatever logic is in here has to be super lean or we risk destroying the performance.
|
||||
this.updateErrorState();
|
||||
}
|
||||
|
||||
// We need to dirty-check the native element's value, because there are some cases where
|
||||
// we won't be notified when it changes (e.g. the consumer isn't using forms or they're
|
||||
// updating the value using `emitEvent: false`).
|
||||
this._dirtyCheckNativeValue();
|
||||
|
||||
// We need to dirty-check and set the placeholder attribute ourselves, because whether it's
|
||||
// present or not depends on a query which is prone to "changed after checked" errors.
|
||||
this._dirtyCheckPlaceholder();
|
||||
}
|
||||
|
||||
/** Focuses the input. */
|
||||
focus(options?: FocusOptions): void {
|
||||
this._elementRef.nativeElement.focus(options);
|
||||
}
|
||||
|
||||
// We have to use a `HostListener` here in order to support both Ivy and ViewEngine.
|
||||
// In Ivy the `host` bindings will be merged when this class is extended, whereas in
|
||||
// ViewEngine they're overwritten.
|
||||
// TODO(crisbeto): we move this back into `host` once Ivy is turned on by default.
|
||||
/** Callback for the cases where the focused state of the input changes. */
|
||||
// tslint:disable:no-host-decorator-in-concrete
|
||||
@HostListener('focus', ['true'])
|
||||
@HostListener('blur', ['false'])
|
||||
// tslint:enable:no-host-decorator-in-concrete
|
||||
_focusChanged(isFocused: boolean): void {
|
||||
if (isFocused !== this.focused && (!this.readonly || !isFocused)) {
|
||||
this.focused = isFocused;
|
||||
this.stateChanges.next();
|
||||
}
|
||||
}
|
||||
|
||||
// We have to use a `HostListener` here in order to support both Ivy and ViewEngine.
|
||||
// In Ivy the `host` bindings will be merged when this class is extended, whereas in
|
||||
// ViewEngine they're overwritten.
|
||||
// TODO(crisbeto): we move this back into `host` once Ivy is turned on by default.
|
||||
// tslint:disable-next-line:no-host-decorator-in-concrete
|
||||
@HostListener('input')
|
||||
_onInput(): void {
|
||||
// This is a noop function and is used to let Angular know whenever the value changes.
|
||||
// Angular will run a new change detection each time the `input` event has been dispatched.
|
||||
// It's necessary that Angular recognizes the value change, because when floatingLabel
|
||||
// is set to false and Angular forms aren't used, the placeholder won't recognize the
|
||||
// value changes and will not disappear.
|
||||
// Listening to the input event wouldn't be necessary when the input is using the
|
||||
// FormsModule or ReactiveFormsModule, because Angular forms also listens to input events.
|
||||
}
|
||||
|
||||
/** Does some manual dirty checking on the native input `placeholder` attribute. */
|
||||
private _dirtyCheckPlaceholder(): void {
|
||||
// If we're hiding the native placeholder, it should also be cleared from the DOM, otherwise
|
||||
// screen readers will read it out twice: once from the label and once from the attribute.
|
||||
// TODO: can be removed once we get rid of the `legacy` style for the form field, because it's
|
||||
// the only one that supports promoting the placeholder to a label.
|
||||
const placeholder = this._formField?._hideControlPlaceholder?.() ? null : this.placeholder;
|
||||
if (placeholder !== this._previousPlaceholder) {
|
||||
const element = this._elementRef.nativeElement;
|
||||
this._previousPlaceholder = placeholder;
|
||||
placeholder ?
|
||||
element.setAttribute('placeholder', placeholder) : element.removeAttribute('placeholder');
|
||||
}
|
||||
}
|
||||
|
||||
/** Does some manual dirty checking on the native input `value` property. */
|
||||
protected _dirtyCheckNativeValue(): void {
|
||||
const newValue = this._elementRef.nativeElement.value;
|
||||
|
||||
if (this._previousNativeValue !== newValue) {
|
||||
this._previousNativeValue = newValue;
|
||||
this.stateChanges.next();
|
||||
}
|
||||
}
|
||||
|
||||
/** Make sure the input is a supported type. */
|
||||
protected _validateType(): void {
|
||||
if (MAT_INPUT_INVALID_TYPES.indexOf(this._type) > -1) {
|
||||
throw getMatInputUnsupportedTypeError(this._type);
|
||||
}
|
||||
}
|
||||
|
||||
/** Checks whether the input type is one of the types that are never empty. */
|
||||
protected _isNeverEmpty(): boolean {
|
||||
return this._neverEmptyInputTypes.indexOf(this._type) > -1;
|
||||
}
|
||||
|
||||
/** Checks whether the input is invalid based on the native validation. */
|
||||
protected _isBadInput(): boolean {
|
||||
// The `validity` property won't be present on platform-server.
|
||||
const validity = (this._elementRef.nativeElement as HTMLInputElement).validity;
|
||||
return validity && validity.badInput;
|
||||
}
|
||||
|
||||
/**
|
||||
* Implemented as part of MatFormFieldControl.
|
||||
* @docs-private
|
||||
*/
|
||||
get empty(): boolean {
|
||||
return !this._isNeverEmpty() && !this._elementRef.nativeElement.value && !this._isBadInput() &&
|
||||
!this.autofilled;
|
||||
}
|
||||
|
||||
/**
|
||||
* Implemented as part of MatFormFieldControl.
|
||||
* @docs-private
|
||||
*/
|
||||
get shouldLabelFloat(): boolean {
|
||||
if (this._isNativeSelect) {
|
||||
// For a single-selection `<select>`, the label should float when the selected option has
|
||||
// a non-empty display value. For a `<select multiple>`, the label *always* floats to avoid
|
||||
// overlapping the label with the options.
|
||||
const selectElement = this._elementRef.nativeElement as HTMLSelectElement;
|
||||
const firstOption: HTMLOptionElement | undefined = selectElement.options[0];
|
||||
|
||||
// On most browsers the `selectedIndex` will always be 0, however on IE and Edge it'll be
|
||||
// -1 if the `value` is set to something, that isn't in the list of options, at a later point.
|
||||
return this.focused || selectElement.multiple || !this.empty ||
|
||||
!!(selectElement.selectedIndex > -1 && firstOption && firstOption.label);
|
||||
} else {
|
||||
return this.focused || !this.empty;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Implemented as part of MatFormFieldControl.
|
||||
* @docs-private
|
||||
*/
|
||||
setDescribedByIds(ids: string[]): void {
|
||||
if (ids.length) {
|
||||
this._elementRef.nativeElement.setAttribute('aria-describedby', ids.join(' '));
|
||||
} else {
|
||||
this._elementRef.nativeElement.removeAttribute('aria-describedby');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Implemented as part of MatFormFieldControl.
|
||||
* @docs-private
|
||||
*/
|
||||
onContainerClick(): void {
|
||||
// Do not re-focus the input element if the element is already focused. Otherwise it can happen
|
||||
// that someone clicks on a time input and the cursor resets to the "hours" field while the
|
||||
// "minutes" field was actually clicked. See: https://github.com/angular/components/issues/12849
|
||||
if (!this.focused) {
|
||||
this.focus();
|
||||
}
|
||||
}
|
||||
// tslint:disable
|
||||
static ngAcceptInputType_disabled: BooleanInput;
|
||||
static ngAcceptInputType_readonly: BooleanInput;
|
||||
static ngAcceptInputType_required: BooleanInput;
|
||||
|
||||
// Accept `any` to avoid conflicts with other directives on `<input>` that may
|
||||
// accept different types.
|
||||
static ngAcceptInputType_value: any;
|
||||
// tslint:enable
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { MatRippleModule } from '@angular/material/core';
|
||||
|
||||
import { FormFieldModule } from '../form-field/form-field.module';
|
||||
import { LabelModule } from '../label/label.module';
|
||||
import { ErrorStateMatcher } from './error-options';
|
||||
import { InputDirective } from './input.directive';
|
||||
|
||||
|
||||
@NgModule({
|
||||
declarations: [InputDirective],
|
||||
imports: [
|
||||
LabelModule,
|
||||
CommonModule,
|
||||
FormFieldModule,
|
||||
MatRippleModule,
|
||||
],
|
||||
exports: [InputDirective, FormFieldModule],
|
||||
providers: [ErrorStateMatcher],
|
||||
})
|
||||
export class InputModule { }
|
||||
Reference in New Issue
Block a user