mirror of
https://github.com/zitadel/zitadel.git
synced 2025-01-06 13:07:52 +00:00
fix(console): angular 13, grpc web 1.3.0, dependencies (#2688)
* cli core, migrations * material * input directive * fresh lock * update oidc lib * use angular-eslint next for ng 13 * clean lock * change qrcode lib, env * eslint * deps * grpc libs update, grpc web 1.0.3, rev env * remove grpc-web from build/zitadel/Dockerfile Co-authored-by: Livio Amstutz <livio.a@gmail.com>
This commit is contained in:
parent
77a3f848e5
commit
33ae935bf6
@ -18,7 +18,7 @@ ENV PROTOC_ARCH x86_64
|
||||
FROM ${BUILDARCH}-base AS base
|
||||
ARG PROTOC_VERSION=3.13.0
|
||||
ARG PROTOC_ZIP=protoc-${PROTOC_VERSION}-linux-${PROTOC_ARCH}.zip
|
||||
ARG GRPC_WEB_VERSION=1.2.1
|
||||
ARG GRPC_WEB_VERSION=1.3.0
|
||||
# no arm specific version available and x86 works fine at the moment:
|
||||
ARG GRPC_WEB=protoc-gen-grpc-web-${GRPC_WEB_VERSION}-linux-x86_64
|
||||
|
||||
|
@ -12,17 +12,13 @@ ENV PROTOC_ARCH x86_64
|
||||
#######################
|
||||
## This step sets up the folder structure,
|
||||
## initalices go mods,
|
||||
## downloads the protofiles,
|
||||
## protoc and protoc-gen-grpc-web for later use
|
||||
## downloads the protofiles and protoc for later use
|
||||
#######################
|
||||
FROM ${BUILDARCH}-base AS base
|
||||
ARG PROTOC_VERSION=3.18.0
|
||||
ARG PROTOC_ZIP=protoc-${PROTOC_VERSION}-linux-${PROTOC_ARCH}.zip
|
||||
ARG GATEWAY_VERSION=2.6.0
|
||||
ARG VALIDATOR_VERSION=0.6.2
|
||||
ARG GRPC_WEB_VERSION=1.2.1
|
||||
# no arm specific version available and x86 works fine at the moment:
|
||||
ARG GRPC_WEB=protoc-gen-grpc-web-${GRPC_WEB_VERSION}-linux-x86_64
|
||||
|
||||
RUN apk add tar curl
|
||||
WORKDIR /proto
|
||||
@ -33,9 +29,6 @@ RUN apk add tar curl \
|
||||
&& unzip -o $PROTOC_ZIP -d /usr/local bin/protoc \
|
||||
&& unzip -o $PROTOC_ZIP -d /proto include/* \
|
||||
&& rm -f $PROTOC_ZIP \
|
||||
&& curl -OL https://github.com/grpc/grpc-web/releases/download/${GRPC_WEB_VERSION}/${GRPC_WEB} \
|
||||
&& mv ${GRPC_WEB} /usr/local/bin/protoc-gen-grpc-web \
|
||||
&& chmod +x /usr/local/bin/protoc-gen-grpc-web \
|
||||
&& curl https://raw.githubusercontent.com/envoyproxy/protoc-gen-validate/v${VALIDATOR_VERSION}/validate/validate.proto --create-dirs -o include/validate/validate.proto \
|
||||
&& curl https://raw.githubusercontent.com/grpc-ecosystem/grpc-gateway/v${GATEWAY_VERSION}/protoc-gen-openapiv2/options/annotations.proto --create-dirs -o include/protoc-gen-openapiv2/options/annotations.proto \
|
||||
&& curl https://raw.githubusercontent.com/grpc-ecosystem/grpc-gateway/v${GATEWAY_VERSION}/protoc-gen-openapiv2/options/openapiv2.proto --create-dirs -o include/protoc-gen-openapiv2/options/openapiv2.proto \
|
||||
|
1
console/.gitignore
vendored
1
console/.gitignore
vendored
@ -30,6 +30,7 @@ speed-measure-plugin*.json
|
||||
.history/*
|
||||
|
||||
# misc
|
||||
/.angular/cache
|
||||
/.sass-cache
|
||||
/connect.lock
|
||||
/coverage
|
||||
|
@ -22,22 +22,15 @@
|
||||
"main": "src/main.ts",
|
||||
"polyfills": "src/polyfills.ts",
|
||||
"tsConfig": "tsconfig.app.json",
|
||||
"assets": [
|
||||
"src/favicon.ico",
|
||||
"src/assets",
|
||||
"src/manifest.webmanifest"
|
||||
],
|
||||
"styles": [
|
||||
"src/styles.scss"
|
||||
],
|
||||
"scripts": [
|
||||
"./node_modules/tinycolor2/dist/tinycolor-min.js"
|
||||
],
|
||||
"assets": ["src/favicon.ico", "src/assets", "src/manifest.webmanifest"],
|
||||
"styles": ["src/styles.scss"],
|
||||
"scripts": ["./node_modules/tinycolor2/dist/tinycolor-min.js"],
|
||||
"allowedCommonJsDependencies": [
|
||||
"@angular/common/locales/de",
|
||||
"src/app/proto/generated/zitadel/admin_pb",
|
||||
"src/app/proto/generated/zitadel/management_pb",
|
||||
"src/app/proto/generated/**",
|
||||
"google-protobuf/google/protobuf/empty_pb",
|
||||
"file-saver",
|
||||
"qrcode"
|
||||
],
|
||||
@ -126,27 +119,15 @@
|
||||
"polyfills": "src/polyfills.ts",
|
||||
"tsConfig": "tsconfig.spec.json",
|
||||
"karmaConfig": "karma.conf.js",
|
||||
"assets": [
|
||||
"src/favicon.ico",
|
||||
"src/assets",
|
||||
"src/manifest.webmanifest"
|
||||
],
|
||||
"styles": [
|
||||
"./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css",
|
||||
"src/styles.scss"
|
||||
],
|
||||
"scripts": [
|
||||
"./node_modules/tinycolor2/dist/tinycolor-min.js"
|
||||
]
|
||||
"assets": ["src/favicon.ico", "src/assets", "src/manifest.webmanifest"],
|
||||
"styles": ["./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css", "src/styles.scss"],
|
||||
"scripts": ["./node_modules/tinycolor2/dist/tinycolor-min.js"]
|
||||
}
|
||||
},
|
||||
"lint": {
|
||||
"builder": "@angular-eslint/builder:lint",
|
||||
"options": {
|
||||
"lintFilePatterns": [
|
||||
"src/**/*.ts",
|
||||
"src/**/*.html"
|
||||
]
|
||||
"lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
|
||||
}
|
||||
},
|
||||
"e2e": {
|
||||
|
17957
console/package-lock.json
generated
17957
console/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -10,60 +10,59 @@
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "~12.2.12",
|
||||
"@angular/cdk": "~12.2.12",
|
||||
"@angular/common": "~12.2.12",
|
||||
"@angular/compiler": "~12.2.12",
|
||||
"@angular/core": "~12.2.12",
|
||||
"@angular/forms": "~12.2.12",
|
||||
"@angular/material": "^12.2.12",
|
||||
"@angular/material-moment-adapter": "^12.2.12",
|
||||
"@angular/platform-browser": "~12.2.12",
|
||||
"@angular/platform-browser-dynamic": "~12.2.12",
|
||||
"@angular/router": "~12.2.12",
|
||||
"@angular/service-worker": "~12.2.12",
|
||||
"@angular/animations": "~13.0.2",
|
||||
"@angular/cdk": "~13.0.2",
|
||||
"@angular/common": "~13.0.2",
|
||||
"@angular/compiler": "~13.0.2",
|
||||
"@angular/core": "~13.0.2",
|
||||
"@angular/forms": "~13.0.2",
|
||||
"@angular/material": "^13.0.2",
|
||||
"@angular/material-moment-adapter": "^13.0.2",
|
||||
"@angular/platform-browser": "~13.0.2",
|
||||
"@angular/platform-browser-dynamic": "~13.0.2",
|
||||
"@angular/router": "~13.0.2",
|
||||
"@angular/service-worker": "~13.0.2",
|
||||
"@grpc/grpc-js": "^1.3.2",
|
||||
"@ngx-translate/core": "^13.0.0",
|
||||
"@ngx-translate/http-loader": "^6.0.0",
|
||||
"@types/file-saver": "^2.0.2",
|
||||
"@types/google-protobuf": "^3.15.3",
|
||||
"@types/uuid": "^8.3.0",
|
||||
"angular-oauth2-oidc": "^12.1.0",
|
||||
"angularx-qrcode": "^11.0.0",
|
||||
"angular-oauth2-oidc": "^13.0.1",
|
||||
"cors": "^2.8.5",
|
||||
"file-saver": "^2.0.5",
|
||||
"google-proto-files": "^2.4.0",
|
||||
"google-proto-files": "^2.5.0",
|
||||
"google-protobuf": "^3.19.1",
|
||||
"grpc-web": "^1.2.1",
|
||||
"grpc-web": "^1.3.0",
|
||||
"libphonenumber-js": "^1.9.34",
|
||||
"moment": "^2.29.1",
|
||||
"ng-qrcode": "^6.0.0",
|
||||
"ngx-color": "^7.2.0",
|
||||
"ngx-image-cropper": "^3.3.5",
|
||||
"ngx-quicklink": "^0.2.6",
|
||||
"rxjs": "~7.3.0",
|
||||
"rxjs": "~7.4.0",
|
||||
"tinycolor2": "^1.4.2",
|
||||
"ts-protoc-gen": "^0.14.0",
|
||||
"tslib": "^2.2.0",
|
||||
"uuid": "^8.3.2",
|
||||
"zone.js": "~0.11.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-eslint/builder": "12.6.1",
|
||||
"@angular-eslint/eslint-plugin": "12.5.0",
|
||||
"@angular-eslint/eslint-plugin-template": "12.5.0",
|
||||
"@angular-eslint/schematics": "12.6.1",
|
||||
"@angular-eslint/template-parser": "12.5.0",
|
||||
"@typescript-eslint/eslint-plugin": "4.28.2",
|
||||
"@typescript-eslint/parser": "4.28.2",
|
||||
"eslint": "^7.26.0",
|
||||
"@angular-devkit/build-angular": "~12.2.12",
|
||||
"@angular/cli": "~12.2.12",
|
||||
"@angular/compiler-cli": "~12.2.12",
|
||||
"@angular/language-service": "~12.2.12",
|
||||
"@angular-devkit/build-angular": "~13.0.2",
|
||||
"@angular-eslint/builder": "^13.0.1",
|
||||
"@angular-eslint/eslint-plugin": "^13.0.1",
|
||||
"@angular-eslint/eslint-plugin-template": "^13.0.1",
|
||||
"@angular-eslint/schematics": "^13.0.1",
|
||||
"@angular-eslint/template-parser": "^13.0.1",
|
||||
"@angular/cli": "~13.0.2",
|
||||
"@angular/compiler-cli": "~13.0.2",
|
||||
"@angular/language-service": "~13.0.2",
|
||||
"@types/jasmine": "~3.9.1",
|
||||
"@types/jasminewd2": "~2.0.10",
|
||||
"@types/node": "^16.10.2",
|
||||
"@typescript-eslint/eslint-plugin": "5.3.0",
|
||||
"@typescript-eslint/parser": "5.3.0",
|
||||
"codelyzer": "^6.0.0",
|
||||
"eslint": "^8.2.0",
|
||||
"jasmine-core": "~3.9.0",
|
||||
"jasmine-spec-reporter": "~7.0.0",
|
||||
"karma": "~6.3.6",
|
||||
@ -77,6 +76,6 @@
|
||||
"stylelint-config-standard": "^22.0.0",
|
||||
"stylelint-scss": "^3.21.0",
|
||||
"ts-node": "~10.2.1",
|
||||
"typescript": "^4.2.4"
|
||||
"typescript": "^4.4.4"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -1,4 +1,4 @@
|
||||
@use '~@angular/material' as mat;
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
.root-header {
|
||||
position: fixed;
|
||||
|
@ -40,6 +40,7 @@ import { WarnDialogModule } from './modules/warn-dialog/warn-dialog.module';
|
||||
import { SignedoutComponent } from './pages/signedout/signedout.component';
|
||||
import { HasFeaturePipeModule } from './pipes/has-feature-pipe/has-feature-pipe.module';
|
||||
import { HasRolePipeModule } from './pipes/has-role-pipe/has-role-pipe.module';
|
||||
import { AdminService } from './services/admin.service';
|
||||
import { AuthenticationService } from './services/authentication.service';
|
||||
import { GrpcAuthService } from './services/grpc-auth.service';
|
||||
import { GrpcService } from './services/grpc.service';
|
||||
@ -47,6 +48,7 @@ import { AuthInterceptor } from './services/interceptors/auth.interceptor';
|
||||
import { GRPC_INTERCEPTORS } from './services/interceptors/grpc-interceptor';
|
||||
import { I18nInterceptor } from './services/interceptors/i18n.interceptor';
|
||||
import { OrgInterceptor } from './services/interceptors/org.interceptor';
|
||||
import { ManagementService } from './services/mgmt.service';
|
||||
import { RefreshService } from './services/refresh.service';
|
||||
import { SeoService } from './services/seo.service';
|
||||
import { StatehandlerProcessorService, StatehandlerProcessorServiceImpl } from './services/statehandler-processor.service';
|
||||
@ -183,6 +185,8 @@ const authConfig: AuthConfig = {
|
||||
GrpcService,
|
||||
AuthenticationService,
|
||||
GrpcAuthService,
|
||||
ManagementService,
|
||||
AdminService,
|
||||
SubscriptionService,
|
||||
AssetService,
|
||||
{ provide: 'windowObject', useValue: window },
|
||||
|
@ -1,4 +1,4 @@
|
||||
@use '~@angular/material' as mat;
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin app-card-theme($theme) {
|
||||
/* stylelint-disable */
|
||||
|
@ -1,4 +1,4 @@
|
||||
@use '~@angular/material' as mat;
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
.radio-button-wrapper {
|
||||
display: flex;
|
||||
|
@ -1,4 +1,4 @@
|
||||
@use '~@angular/material' as mat;
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
.radio-button-wrapper {
|
||||
display: flex;
|
||||
|
@ -1,4 +1,4 @@
|
||||
@use '~@angular/material' as mat;
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin avatar-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
|
@ -1,4 +1,4 @@
|
||||
@use '~@angular/material' as mat;
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin card-theme($theme) {
|
||||
/* stylelint-disable */
|
||||
|
@ -1,4 +1,4 @@
|
||||
@use '~@angular/material' as mat;
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
.change-header {
|
||||
display: flex;
|
||||
|
@ -1,4 +1,4 @@
|
||||
@use '~@angular/material' as mat;
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin detail-layout-theme($theme) {
|
||||
/* stylelint-disable */
|
||||
|
@ -1,4 +1,4 @@
|
||||
@use '~@angular/material' as mat;
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin cnsl-form-field-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
|
@ -1,4 +1,4 @@
|
||||
@use '~@angular/material' as mat;
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
.idp-radio-button-wrapper {
|
||||
display: flex;
|
||||
|
@ -1,4 +1,4 @@
|
||||
@use '~@angular/material' as mat;
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin info-row-theme($theme) {
|
||||
$foreground: map-get($theme, foreground);
|
||||
|
@ -1,4 +1,4 @@
|
||||
@use '~@angular/material' as mat;
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin info-section-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
|
@ -2,452 +2,462 @@ 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,
|
||||
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 { CanUpdateErrorState, 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',
|
||||
];
|
||||
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);
|
||||
const _MatInputBase = mixinErrorState(
|
||||
class {
|
||||
constructor(
|
||||
public _defaultErrorStateMatcher: ErrorStateMatcher,
|
||||
public _parentForm: NgForm,
|
||||
public _parentFormGroup: FormGroupDirective,
|
||||
/** @docs-private */
|
||||
public ngControl: NgControl,
|
||||
) {}
|
||||
},
|
||||
);
|
||||
|
||||
/** 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 }],
|
||||
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;
|
||||
export class InputDirective
|
||||
extends _MatInputBase
|
||||
implements
|
||||
MatFormFieldControl<any>,
|
||||
OnChanges,
|
||||
CanUpdateErrorState,
|
||||
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 being rendered on the server. */
|
||||
readonly _isServer: boolean;
|
||||
|
||||
/** Whether the component is a native html select. */
|
||||
readonly _isNativeSelect: boolean;
|
||||
/** Whether the component is a native html select. */
|
||||
readonly _isNativeSelect: boolean;
|
||||
|
||||
/** Whether the component is a textarea. */
|
||||
readonly _isTextarea: 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
|
||||
*/
|
||||
focused: boolean = false;
|
||||
|
||||
/**
|
||||
* Implemented as part of MatFormFieldControl.
|
||||
* @docs-private
|
||||
*/
|
||||
readonly stateChanges: Subject<void> = new Subject<void>();
|
||||
/**
|
||||
* 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
|
||||
*/
|
||||
controlType: string = 'mat-input';
|
||||
|
||||
/**
|
||||
* Implemented as part of MatFormFieldControl.
|
||||
* @docs-private
|
||||
*/
|
||||
autofilled: boolean = false;
|
||||
/**
|
||||
* 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;
|
||||
/**
|
||||
* Implemented as part of MatFormFieldControl.
|
||||
* @docs-private
|
||||
*/
|
||||
@Input()
|
||||
get disabled(): boolean {
|
||||
if (this.ngControl && this.ngControl.disabled !== null) {
|
||||
return this.ngControl.disabled;
|
||||
}
|
||||
set disabled(value: boolean) {
|
||||
this._disabled = coerceBooleanProperty(value);
|
||||
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();
|
||||
}
|
||||
// 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;
|
||||
}
|
||||
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()
|
||||
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() 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;
|
||||
/**
|
||||
* 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();
|
||||
/** 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;
|
||||
}
|
||||
// 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';
|
||||
}
|
||||
protected _type: string = 'text';
|
||||
|
||||
/** An object used to control when error messages are shown. */
|
||||
@Input() errorStateMatcher!: ErrorStateMatcher;
|
||||
/** An object used to control when error messages are shown. */
|
||||
@Input() errorStateMatcher!: ErrorStateMatcher;
|
||||
|
||||
/**
|
||||
* Implemented as part of MatFormFieldControl.
|
||||
* @docs-private
|
||||
*/
|
||||
// eslint-disable-next-line @angular-eslint/no-input-rename
|
||||
@Input('aria-describedby') userAriaDescribedBy!: string;
|
||||
/**
|
||||
* Implemented as part of MatFormFieldControl.
|
||||
* @docs-private
|
||||
*/
|
||||
// eslint-disable-next-line @angular-eslint/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();
|
||||
}
|
||||
/**
|
||||
* 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,
|
||||
@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);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/** Whether the element is readonly. */
|
||||
@Input()
|
||||
get readonly(): boolean { return this._readonly; }
|
||||
set readonly(value: boolean) { this._readonly = coerceBooleanProperty(value); }
|
||||
private _readonly: boolean = false;
|
||||
this._isServer = !this._platform.isBrowser;
|
||||
this._isNativeSelect = nodeName === 'select';
|
||||
this._isTextarea = nodeName === 'textarea';
|
||||
|
||||
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,
|
||||
@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';
|
||||
}
|
||||
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 {
|
||||
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();
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this.stateChanges.complete();
|
||||
// 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();
|
||||
|
||||
if (this._platform.isBrowser) {
|
||||
this._autofillMonitor.stopMonitoring(this._elementRef.nativeElement);
|
||||
}
|
||||
// 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.
|
||||
/** Callback for the cases where the focused state of the input changes. */
|
||||
/* eslint-disable */
|
||||
@HostListener('focus', ['true'])
|
||||
@HostListener('blur', ['false'])
|
||||
/* eslint-enable */
|
||||
_focusChanged(isFocused: boolean): void {
|
||||
if (isFocused !== this.focused && (!this.readonly || !isFocused)) {
|
||||
this.focused = isFocused;
|
||||
this.stateChanges.next();
|
||||
}
|
||||
}
|
||||
|
||||
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 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.
|
||||
// eslint-disable-next-line
|
||||
@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.
|
||||
}
|
||||
|
||||
// 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();
|
||||
/** 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.
|
||||
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');
|
||||
}
|
||||
}
|
||||
|
||||
/** Focuses the input. */
|
||||
focus(options?: FocusOptions): void {
|
||||
this._elementRef.nativeElement.focus(options);
|
||||
/** 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();
|
||||
}
|
||||
}
|
||||
|
||||
// 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.
|
||||
/** Callback for the cases where the focused state of the input changes. */
|
||||
/* eslint-disable */
|
||||
@HostListener('focus', ['true'])
|
||||
@HostListener('blur', ['false'])
|
||||
/* eslint-enable */
|
||||
_focusChanged(isFocused: boolean): void {
|
||||
if (isFocused !== this.focused && (!this.readonly || !isFocused)) {
|
||||
this.focused = isFocused;
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
// 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.
|
||||
// eslint-disable-next-line
|
||||
@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.
|
||||
/** 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;
|
||||
}
|
||||
}
|
||||
|
||||
/** 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.
|
||||
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');
|
||||
}
|
||||
/**
|
||||
* 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');
|
||||
}
|
||||
}
|
||||
|
||||
/** 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();
|
||||
}
|
||||
/**
|
||||
* 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();
|
||||
}
|
||||
}
|
||||
/* eslint-disable */
|
||||
static ngAcceptInputType_disabled: BooleanInput;
|
||||
static ngAcceptInputType_readonly: BooleanInput;
|
||||
static ngAcceptInputType_required: BooleanInput;
|
||||
|
||||
/** 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();
|
||||
}
|
||||
}
|
||||
/* eslint-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;
|
||||
/* eslint-enable */
|
||||
// Accept `any` to avoid conflicts with other directives on `<input>` that may
|
||||
// accept different types.
|
||||
static ngAcceptInputType_value: any;
|
||||
/* eslint-enable */
|
||||
}
|
||||
|
@ -1,4 +1,4 @@
|
||||
@use '~@angular/material' as mat;
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin cnsl-label-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
|
@ -1,4 +1,4 @@
|
||||
@use '~@angular/material' as mat;
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin onboarding-theme($theme) {
|
||||
/* stylelint-disable */
|
||||
|
@ -1,4 +1,4 @@
|
||||
@use '~@angular/material' as mat;
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@import './preview/preview.component.scss';
|
||||
|
||||
|
@ -1,63 +1,63 @@
|
||||
<h1 mat-dialog-title>
|
||||
<span class="title">{{'USER.MFA.DIALOG.ADD_MFA_TITLE' | translate}} {{data?.number}}</span>
|
||||
<span class="title">{{'USER.MFA.DIALOG.ADD_MFA_TITLE' | translate}} {{data?.number}}</span>
|
||||
</h1>
|
||||
<div mat-dialog-content>
|
||||
<ng-container *ngIf="selectedType === undefined">
|
||||
<p class="desc">{{'USER.MFA.DIALOG.ADD_MFA_DESCRIPTION' | translate}}</p>
|
||||
<ng-container *ngIf="selectedType === undefined">
|
||||
<p class="desc">{{'USER.MFA.DIALOG.ADD_MFA_DESCRIPTION' | translate}}</p>
|
||||
|
||||
<div class="type-selection">
|
||||
<button mat-raised-button color="primary" [disabled]="data.otpDisabled" (click)="selectType(AuthFactorType.OTP)">
|
||||
<div class="otp-btn">
|
||||
<mat-icon class="icon" svgIcon="mdi_radar"></mat-icon>
|
||||
<span>{{'USER.MFA.OTP' | translate}}</span>
|
||||
</div>
|
||||
</button>
|
||||
<button mat-raised-button color="primary" (click)="selectType(AuthFactorType.U2F)">
|
||||
<div class="u2f-btn">
|
||||
<div class="icon-row">
|
||||
<i matTooltip="Fingerprint" class="las la-fingerprint"></i>
|
||||
<i matTooltip="Security Key" class="lab la-usb"></i>
|
||||
<mat-icon matTooltip="NFC">nfc</mat-icon>
|
||||
</div>
|
||||
<span>{{'USER.MFA.U2F' | translate}}</span>
|
||||
</div>
|
||||
</button>
|
||||
<div class="type-selection">
|
||||
<button mat-raised-button color="primary" [disabled]="data.otpDisabled" (click)="selectType(AuthFactorType.OTP)">
|
||||
<div class="otp-btn">
|
||||
<mat-icon class="icon" svgIcon="mdi_radar"></mat-icon>
|
||||
<span>{{'USER.MFA.OTP' | translate}}</span>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<div class="otp" *ngIf="selectedType === AuthFactorType.OTP">
|
||||
<p class="desc">{{'USER.MFA.OTP_DIALOG_DESCRIPTION' | translate}}</p>
|
||||
|
||||
<div class="qrcode-wrapper">
|
||||
<qrcode *ngIf="otpurl" class="qrcode" [qrdata]="otpurl" [width]="150" [errorCorrectionLevel]="'M'"></qrcode>
|
||||
</button>
|
||||
<button mat-raised-button color="primary" (click)="selectType(AuthFactorType.U2F)">
|
||||
<div class="u2f-btn">
|
||||
<div class="icon-row">
|
||||
<i matTooltip="Fingerprint" class="las la-fingerprint"></i>
|
||||
<i matTooltip="Security Key" class="lab la-usb"></i>
|
||||
<mat-icon matTooltip="NFC">nfc</mat-icon>
|
||||
</div>
|
||||
<span>{{'USER.MFA.U2F' | translate}}</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<cnsl-form-field class="formfield" label="Access Code" required="true">
|
||||
<cnsl-label>Code</cnsl-label>
|
||||
<input cnslInput [(ngModel)]="otpcode" />
|
||||
</cnsl-form-field>
|
||||
<div class="otp" *ngIf="selectedType === AuthFactorType.OTP">
|
||||
<p class="desc">{{'USER.MFA.OTP_DIALOG_DESCRIPTION' | translate}}</p>
|
||||
|
||||
<div class="qrcode-wrapper">
|
||||
<qr-code *ngIf="otpurl" class="qrcode" [value]="otpurl" [size]="150" [errorCorrectionLevel]="'M'"></qr-code>
|
||||
</div>
|
||||
|
||||
<div class="u2f" *ngIf="selectedType === AuthFactorType.U2F">
|
||||
<p>{{'USER.MFA.U2F_DIALOG_DESCRIPTION' | translate}}</p>
|
||||
<cnsl-form-field class="formfield" label="Access Code" required="true">
|
||||
<cnsl-label>Code</cnsl-label>
|
||||
<input cnslInput [(ngModel)]="otpcode" />
|
||||
</cnsl-form-field>
|
||||
</div>
|
||||
|
||||
<cnsl-form-field class="form-field" label="Name" required="true">
|
||||
<cnsl-label>{{'USER.MFA.U2F_NAME' | translate}}</cnsl-label>
|
||||
<input cnslInput [(ngModel)]="u2fname" required (keydown.enter)="u2fname ? submitU2F() : null" />
|
||||
</cnsl-form-field>
|
||||
<div class="u2f" *ngIf="selectedType === AuthFactorType.U2F">
|
||||
<p>{{'USER.MFA.U2F_DIALOG_DESCRIPTION' | translate}}</p>
|
||||
|
||||
<mat-spinner diameter="30" *ngIf="u2fLoading"></mat-spinner>
|
||||
<cnsl-form-field class="form-field" label="Name" required="true">
|
||||
<cnsl-label>{{'USER.MFA.U2F_NAME' | translate}}</cnsl-label>
|
||||
<input cnslInput [(ngModel)]="u2fname" required (keydown.enter)="u2fname ? submitU2F() : null" />
|
||||
</cnsl-form-field>
|
||||
|
||||
<p class="error">{{u2fError}}</p>
|
||||
</div>
|
||||
<mat-spinner diameter="30" *ngIf="u2fLoading"></mat-spinner>
|
||||
|
||||
<p class="error">{{u2fError}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div mat-dialog-actions class="action">
|
||||
<button cdkFocusInitial color="primary" mat-button class="ok-button" (click)="closeDialog()">
|
||||
{{'ACTIONS.CLOSE' | translate}}
|
||||
</button>
|
||||
<button cdkFocusInitial color="primary" mat-button class="ok-button" (click)="closeDialog()">
|
||||
{{'ACTIONS.CLOSE' | translate}}
|
||||
</button>
|
||||
|
||||
<button *ngIf="selectedType !== undefined" cdkFocusInitial color="primary" mat-raised-button class="ok-button"
|
||||
(click)="submitAuth()">
|
||||
{{'ACTIONS.CREATE' | translate}}
|
||||
</button>
|
||||
<button *ngIf="selectedType !== undefined" cdkFocusInitial color="primary" mat-raised-button class="ok-button"
|
||||
(click)="submitAuth()">
|
||||
{{'ACTIONS.CREATE' | translate}}
|
||||
</button>
|
||||
</div>
|
@ -9,12 +9,12 @@
|
||||
</div>
|
||||
|
||||
<cnsl-form-field class="form-field" label="Name" required="true">
|
||||
<cnsl-label>{{'USER.MFA.U2F_NAME' | translate}}</cnsl-label>
|
||||
<input cnslInput [(ngModel)]="name" required (keydown.enter)="name ? closeDialogWithCode() : null" />
|
||||
<cnsl-label>{{'USER.MFA.U2F_NAME' | translate}}</cnsl-label>
|
||||
<input cnslInput [(ngModel)]="name" required (keydown.enter)="name ? closeDialogWithCode() : null" />
|
||||
</cnsl-form-field>
|
||||
|
||||
<button [disabled]="!name" mat-raised-button class="ok-button" color="primary"
|
||||
(click)="closeDialogWithCode()">{{'USER.PASSWORDLESS.DIALOG.NEW' | translate}}
|
||||
(click)="closeDialogWithCode()">{{'USER.PASSWORDLESS.DIALOG.NEW' | translate}}
|
||||
</button>
|
||||
|
||||
<p class="error">{{error}}</p>
|
||||
@ -26,7 +26,7 @@
|
||||
</div>
|
||||
|
||||
<button mat-raised-button class="send-button" color="primary"
|
||||
(click)="sendMyPasswordlessLink()">{{'USER.PASSWORDLESS.DIALOG.SEND' | translate}}
|
||||
(click)="sendMyPasswordlessLink()">{{'USER.PASSWORDLESS.DIALOG.SEND' | translate}}
|
||||
</button>
|
||||
|
||||
|
||||
@ -34,9 +34,9 @@
|
||||
<i class="icon las la-qrcode"></i>
|
||||
<p>{{'USER.PASSWORDLESS.DIALOG.QRCODE_DESCRIPTION' | translate}}</p>
|
||||
</div>
|
||||
|
||||
|
||||
<button mat-raised-button class="qr-button" color="primary"
|
||||
(click)="addMyPasswordlessLink()">{{'USER.PASSWORDLESS.DIALOG.QRCODE' | translate}}
|
||||
(click)="addMyPasswordlessLink()">{{'USER.PASSWORDLESS.DIALOG.QRCODE' | translate}}
|
||||
</button>
|
||||
|
||||
</div>
|
||||
@ -55,12 +55,13 @@
|
||||
<p>{{'USER.PASSWORDLESS.DIALOG.QRCODE_SCAN' | translate}}</p>
|
||||
|
||||
<div class="qrcode-wrapper">
|
||||
<qrcode *ngIf="qrcodeLink" class="qrcode" [qrdata]="qrcodeLink" [width]="150" [errorCorrectionLevel]="'M'"></qrcode>
|
||||
</div>
|
||||
<qr-code *ngIf="qrcodeLink" class="qrcode" [value]="qrcodeLink" [size]="150" [errorCorrectionLevel]="'M'">
|
||||
</qr-code>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<mat-spinner diameter="30" *ngIf="loading"></mat-spinner>
|
||||
</div>
|
||||
<div mat-dialog-actions class="action">
|
||||
<button mat-button (click)="closeDialog()">{{'ACTIONS.CLOSE' | translate}}</button>
|
||||
<button mat-button (click)="closeDialog()">{{'ACTIONS.CLOSE' | translate}}</button>
|
||||
</div>
|
@ -1,4 +1,4 @@
|
||||
@use '~@angular/material' as mat;
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin theme-card($theme) {
|
||||
/* stylelint-disable */
|
||||
|
@ -1,4 +1,4 @@
|
||||
@use '~@angular/material' as mat;
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin membership-theme($theme) {
|
||||
/* stylelint-disable */
|
||||
|
@ -12,7 +12,7 @@ import { MatTableModule } from '@angular/material/table';
|
||||
import { MatTabsModule } from '@angular/material/tabs';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { TranslateModule } from '@ngx-translate/core';
|
||||
import { QRCodeModule } from 'angularx-qrcode';
|
||||
import { QrCodeModule } from 'ng-qrcode';
|
||||
import { CopyToClipboardModule } from 'src/app/directives/copy-to-clipboard/copy-to-clipboard.module';
|
||||
import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
|
||||
import { MemberCreateDialogModule } from 'src/app/modules/add-member-dialog/member-create-dialog.module';
|
||||
@ -93,7 +93,7 @@ import { UserMfaComponent } from './user-detail/user-mfa/user-mfa.component';
|
||||
DetailFormMachineModule,
|
||||
WarnDialogModule,
|
||||
MatDialogModule,
|
||||
QRCodeModule,
|
||||
QrCodeModule,
|
||||
MetaLayoutModule,
|
||||
MatCheckboxModule,
|
||||
HasRolePipeModule,
|
||||
@ -124,4 +124,4 @@ import { UserMfaComponent } from './user-detail/user-mfa/user-mfa.component';
|
||||
InfoSectionModule,
|
||||
],
|
||||
})
|
||||
export class UserDetailModule { }
|
||||
export class UserDetailModule {}
|
||||
|
@ -1,9 +1,9 @@
|
||||
{
|
||||
"authServiceUrl": "https://api.zitadel.dev",
|
||||
"mgmtServiceUrl": "https://api.zitadel.dev",
|
||||
"adminServiceUrl":"https://api.zitadel.dev",
|
||||
"subscriptionServiceUrl":"https://sub.zitadel.dev",
|
||||
"assetServiceUrl":"https://api.zitadel.dev",
|
||||
"adminServiceUrl": "https://api.zitadel.dev",
|
||||
"subscriptionServiceUrl": "https://sub.zitadel.dev",
|
||||
"assetServiceUrl": "https://api.zitadel.dev",
|
||||
"issuer": "https://issuer.zitadel.dev",
|
||||
"clientid": "70669160379706195@zitadel"
|
||||
}
|
||||
|
@ -18,16 +18,6 @@
|
||||
* BROWSER POLYFILLS
|
||||
*/
|
||||
|
||||
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
|
||||
// import 'classlist.js'; // Run `npm install --save classlist.js`.
|
||||
|
||||
/**
|
||||
* Web Animations `@angular/platform-browser/animations`
|
||||
* Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
|
||||
* Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
|
||||
*/
|
||||
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
|
||||
|
||||
/**
|
||||
* By default, zone.js will patch all possible macroTask and DomEvents
|
||||
* user can disable parts of macroTask/DomEvents patch by setting following flags
|
||||
|
@ -1,7 +1,7 @@
|
||||
@use '~@angular/material' as mat;
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@import './component-themes';
|
||||
@import '~@angular/material/theming';
|
||||
@import '@angular/material/theming';
|
||||
|
||||
// Plus imports for other components in your app.
|
||||
|
||||
|
@ -1,4 +1,4 @@
|
||||
@use '~@angular/material' as mat;
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin cnsl-error-theme($theme) {
|
||||
$warn: map-get($theme, warn);
|
||||
|
@ -1,4 +1,4 @@
|
||||
@use '~@angular/material' as mat;
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin input-theme($theme) {
|
||||
/* stylelint-disable */
|
||||
|
@ -1,4 +1,4 @@
|
||||
@use '~@angular/material' as mat;
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin link-theme($theme) {
|
||||
/* stylelint-disable */
|
||||
|
@ -1,4 +1,4 @@
|
||||
@use '~@angular/material' as mat;
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin sidenav-list-theme($theme) {
|
||||
/* stylelint-disable */
|
||||
|
@ -1,4 +1,4 @@
|
||||
@use '~@angular/material' as mat;
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin table-theme($theme) {
|
||||
/* stylelint-disable */
|
||||
|
@ -7,7 +7,9 @@ import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@ang
|
||||
declare const require: any;
|
||||
|
||||
// First, initialize the Angular testing environment.
|
||||
getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
|
||||
getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {
|
||||
teardown: { destroyAfterEach: false }
|
||||
});
|
||||
// Then we find all the tests.
|
||||
const context = require.context('./', true, /\.spec\.ts$/);
|
||||
// And load the modules.
|
||||
|
Loading…
x
Reference in New Issue
Block a user