mirror of https://github.com/ghostfolio/ghostfolio
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
495 lines
15 KiB
495 lines
15 KiB
import { coerceBooleanProperty } from '@angular/cdk/coercion';
|
|
import { Platform, getSupportedInputTypes } from '@angular/cdk/platform';
|
|
import { AutofillMonitor, TextFieldModule } from '@angular/cdk/text-field';
|
|
import * as i0 from '@angular/core';
|
|
import { InjectionToken, inject, ElementRef, NgZone, Renderer2, isSignal, effect, booleanAttribute, Directive, Input, NgModule } from '@angular/core';
|
|
import { _IdGenerator } from '@angular/cdk/a11y';
|
|
import { NgControl, Validators, NgForm, FormGroupDirective } from '@angular/forms';
|
|
import { Subject } from 'rxjs';
|
|
import { MAT_INPUT_VALUE_ACCESSOR } from './_input-value-accessor-chunk.mjs';
|
|
import { MAT_FORM_FIELD, MatFormFieldControl } from './_form-field-chunk.mjs';
|
|
export { MatError, MatFormField, MatHint, MatLabel, MatPrefix, MatSuffix } from './_form-field-chunk.mjs';
|
|
import { ErrorStateMatcher } from './_error-options-chunk.mjs';
|
|
import { _ErrorStateTracker } from './_error-state-chunk.mjs';
|
|
import { BidiModule } from '@angular/cdk/bidi';
|
|
import { MatFormFieldModule } from './form-field.mjs';
|
|
import '@angular/common';
|
|
import 'rxjs/operators';
|
|
import '@angular/cdk/observers/private';
|
|
import './_animation-chunk.mjs';
|
|
import '@angular/cdk/layout';
|
|
import '@angular/cdk/observers';
|
|
|
|
function getMatInputUnsupportedTypeError(type) {
|
|
return Error(`Input type "${type}" isn't supported by matInput.`);
|
|
}
|
|
|
|
const MAT_INPUT_INVALID_TYPES = ['button', 'checkbox', 'file', 'hidden', 'image', 'radio', 'range', 'reset', 'submit'];
|
|
const MAT_INPUT_CONFIG = new InjectionToken('MAT_INPUT_CONFIG');
|
|
class MatInput {
|
|
_elementRef = inject(ElementRef);
|
|
_platform = inject(Platform);
|
|
ngControl = inject(NgControl, {
|
|
optional: true,
|
|
self: true
|
|
});
|
|
_autofillMonitor = inject(AutofillMonitor);
|
|
_ngZone = inject(NgZone);
|
|
_formField = inject(MAT_FORM_FIELD, {
|
|
optional: true
|
|
});
|
|
_renderer = inject(Renderer2);
|
|
_uid = inject(_IdGenerator).getId('mat-input-');
|
|
_previousNativeValue;
|
|
_inputValueAccessor;
|
|
_signalBasedValueAccessor;
|
|
_previousPlaceholder = null;
|
|
_errorStateTracker;
|
|
_config = inject(MAT_INPUT_CONFIG, {
|
|
optional: true
|
|
});
|
|
_cleanupIosKeyup;
|
|
_cleanupWebkitWheel;
|
|
_isServer = false;
|
|
_isNativeSelect = false;
|
|
_isTextarea = false;
|
|
_isInFormField = false;
|
|
focused = false;
|
|
stateChanges = new Subject();
|
|
controlType = 'mat-input';
|
|
autofilled = false;
|
|
get disabled() {
|
|
return this._disabled;
|
|
}
|
|
set disabled(value) {
|
|
this._disabled = coerceBooleanProperty(value);
|
|
if (this.focused) {
|
|
this.focused = false;
|
|
this.stateChanges.next();
|
|
}
|
|
}
|
|
_disabled = false;
|
|
get id() {
|
|
return this._id;
|
|
}
|
|
set id(value) {
|
|
this._id = value || this._uid;
|
|
}
|
|
_id;
|
|
placeholder;
|
|
name;
|
|
get required() {
|
|
return this._required ?? this.ngControl?.control?.hasValidator(Validators.required) ?? false;
|
|
}
|
|
set required(value) {
|
|
this._required = coerceBooleanProperty(value);
|
|
}
|
|
_required;
|
|
get type() {
|
|
return this._type;
|
|
}
|
|
set type(value) {
|
|
this._type = value || 'text';
|
|
this._validateType();
|
|
if (!this._isTextarea && getSupportedInputTypes().has(this._type)) {
|
|
this._elementRef.nativeElement.type = this._type;
|
|
}
|
|
}
|
|
_type = 'text';
|
|
get errorStateMatcher() {
|
|
return this._errorStateTracker.matcher;
|
|
}
|
|
set errorStateMatcher(value) {
|
|
this._errorStateTracker.matcher = value;
|
|
}
|
|
userAriaDescribedBy;
|
|
get value() {
|
|
return this._signalBasedValueAccessor ? this._signalBasedValueAccessor.value() : this._inputValueAccessor.value;
|
|
}
|
|
set value(value) {
|
|
if (value !== this.value) {
|
|
if (this._signalBasedValueAccessor) {
|
|
this._signalBasedValueAccessor.value.set(value);
|
|
} else {
|
|
this._inputValueAccessor.value = value;
|
|
}
|
|
this.stateChanges.next();
|
|
}
|
|
}
|
|
get readonly() {
|
|
return this._readonly;
|
|
}
|
|
set readonly(value) {
|
|
this._readonly = coerceBooleanProperty(value);
|
|
}
|
|
_readonly = false;
|
|
disabledInteractive;
|
|
get errorState() {
|
|
return this._errorStateTracker.errorState;
|
|
}
|
|
set errorState(value) {
|
|
this._errorStateTracker.errorState = value;
|
|
}
|
|
_neverEmptyInputTypes = ['date', 'datetime', 'datetime-local', 'month', 'time', 'week'].filter(t => getSupportedInputTypes().has(t));
|
|
constructor() {
|
|
const parentForm = inject(NgForm, {
|
|
optional: true
|
|
});
|
|
const parentFormGroup = inject(FormGroupDirective, {
|
|
optional: true
|
|
});
|
|
const defaultErrorStateMatcher = inject(ErrorStateMatcher);
|
|
const accessor = inject(MAT_INPUT_VALUE_ACCESSOR, {
|
|
optional: true,
|
|
self: true
|
|
});
|
|
const element = this._elementRef.nativeElement;
|
|
const nodeName = element.nodeName.toLowerCase();
|
|
if (accessor) {
|
|
if (isSignal(accessor.value)) {
|
|
this._signalBasedValueAccessor = accessor;
|
|
} else {
|
|
this._inputValueAccessor = accessor;
|
|
}
|
|
} else {
|
|
this._inputValueAccessor = element;
|
|
}
|
|
this._previousNativeValue = this.value;
|
|
this.id = this.id;
|
|
if (this._platform.IOS) {
|
|
this._ngZone.runOutsideAngular(() => {
|
|
this._cleanupIosKeyup = this._renderer.listen(element, 'keyup', this._iOSKeyupListener);
|
|
});
|
|
}
|
|
this._errorStateTracker = new _ErrorStateTracker(defaultErrorStateMatcher, this.ngControl, parentFormGroup, parentForm, this.stateChanges);
|
|
this._isServer = !this._platform.isBrowser;
|
|
this._isNativeSelect = nodeName === 'select';
|
|
this._isTextarea = nodeName === 'textarea';
|
|
this._isInFormField = !!this._formField;
|
|
this.disabledInteractive = this._config?.disabledInteractive || false;
|
|
if (this._isNativeSelect) {
|
|
this.controlType = element.multiple ? 'mat-native-select-multiple' : 'mat-native-select';
|
|
}
|
|
if (this._signalBasedValueAccessor) {
|
|
effect(() => {
|
|
this._signalBasedValueAccessor.value();
|
|
this.stateChanges.next();
|
|
});
|
|
}
|
|
}
|
|
ngAfterViewInit() {
|
|
if (this._platform.isBrowser) {
|
|
this._autofillMonitor.monitor(this._elementRef.nativeElement).subscribe(event => {
|
|
this.autofilled = event.isAutofilled;
|
|
this.stateChanges.next();
|
|
});
|
|
}
|
|
}
|
|
ngOnChanges() {
|
|
this.stateChanges.next();
|
|
}
|
|
ngOnDestroy() {
|
|
this.stateChanges.complete();
|
|
if (this._platform.isBrowser) {
|
|
this._autofillMonitor.stopMonitoring(this._elementRef.nativeElement);
|
|
}
|
|
this._cleanupIosKeyup?.();
|
|
this._cleanupWebkitWheel?.();
|
|
}
|
|
ngDoCheck() {
|
|
if (this.ngControl) {
|
|
this.updateErrorState();
|
|
if (this.ngControl.disabled !== null && this.ngControl.disabled !== this.disabled) {
|
|
this.disabled = this.ngControl.disabled;
|
|
this.stateChanges.next();
|
|
}
|
|
}
|
|
this._dirtyCheckNativeValue();
|
|
this._dirtyCheckPlaceholder();
|
|
}
|
|
focus(options) {
|
|
this._elementRef.nativeElement.focus(options);
|
|
}
|
|
updateErrorState() {
|
|
this._errorStateTracker.updateErrorState();
|
|
}
|
|
_focusChanged(isFocused) {
|
|
if (isFocused === this.focused) {
|
|
return;
|
|
}
|
|
if (!this._isNativeSelect && isFocused && this.disabled && this.disabledInteractive) {
|
|
const element = this._elementRef.nativeElement;
|
|
if (element.type === 'number') {
|
|
element.type = 'text';
|
|
element.setSelectionRange(0, 0);
|
|
element.type = 'number';
|
|
} else {
|
|
element.setSelectionRange(0, 0);
|
|
}
|
|
}
|
|
this.focused = isFocused;
|
|
this.stateChanges.next();
|
|
}
|
|
_onInput() {}
|
|
_dirtyCheckNativeValue() {
|
|
const newValue = this._elementRef.nativeElement.value;
|
|
if (this._previousNativeValue !== newValue) {
|
|
this._previousNativeValue = newValue;
|
|
this.stateChanges.next();
|
|
}
|
|
}
|
|
_dirtyCheckPlaceholder() {
|
|
const placeholder = this._getPlaceholder();
|
|
if (placeholder !== this._previousPlaceholder) {
|
|
const element = this._elementRef.nativeElement;
|
|
this._previousPlaceholder = placeholder;
|
|
placeholder ? element.setAttribute('placeholder', placeholder) : element.removeAttribute('placeholder');
|
|
}
|
|
}
|
|
_getPlaceholder() {
|
|
return this.placeholder || null;
|
|
}
|
|
_validateType() {
|
|
if (MAT_INPUT_INVALID_TYPES.indexOf(this._type) > -1 && (typeof ngDevMode === 'undefined' || ngDevMode)) {
|
|
throw getMatInputUnsupportedTypeError(this._type);
|
|
}
|
|
}
|
|
_isNeverEmpty() {
|
|
return this._neverEmptyInputTypes.indexOf(this._type) > -1;
|
|
}
|
|
_isBadInput() {
|
|
let validity = this._elementRef.nativeElement.validity;
|
|
return validity && validity.badInput;
|
|
}
|
|
get empty() {
|
|
return !this._isNeverEmpty() && !this._elementRef.nativeElement.value && !this._isBadInput() && !this.autofilled;
|
|
}
|
|
get shouldLabelFloat() {
|
|
if (this._isNativeSelect) {
|
|
const selectElement = this._elementRef.nativeElement;
|
|
const firstOption = selectElement.options[0];
|
|
return this.focused || selectElement.multiple || !this.empty || !!(selectElement.selectedIndex > -1 && firstOption && firstOption.label);
|
|
} else {
|
|
return this.focused && !this.disabled || !this.empty;
|
|
}
|
|
}
|
|
get describedByIds() {
|
|
const element = this._elementRef.nativeElement;
|
|
const existingDescribedBy = element.getAttribute('aria-describedby');
|
|
return existingDescribedBy?.split(' ') || [];
|
|
}
|
|
setDescribedByIds(ids) {
|
|
const element = this._elementRef.nativeElement;
|
|
if (ids.length) {
|
|
element.setAttribute('aria-describedby', ids.join(' '));
|
|
} else {
|
|
element.removeAttribute('aria-describedby');
|
|
}
|
|
}
|
|
onContainerClick() {
|
|
if (!this.focused) {
|
|
this.focus();
|
|
}
|
|
}
|
|
_isInlineSelect() {
|
|
const element = this._elementRef.nativeElement;
|
|
return this._isNativeSelect && (element.multiple || element.size > 1);
|
|
}
|
|
_iOSKeyupListener = event => {
|
|
const el = event.target;
|
|
if (!el.value && el.selectionStart === 0 && el.selectionEnd === 0) {
|
|
el.setSelectionRange(1, 1);
|
|
el.setSelectionRange(0, 0);
|
|
}
|
|
};
|
|
_getReadonlyAttribute() {
|
|
if (this._isNativeSelect) {
|
|
return null;
|
|
}
|
|
if (this.readonly || this.disabled && this.disabledInteractive) {
|
|
return 'true';
|
|
}
|
|
return null;
|
|
}
|
|
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
minVersion: "12.0.0",
|
|
version: "21.0.3",
|
|
ngImport: i0,
|
|
type: MatInput,
|
|
deps: [],
|
|
target: i0.ɵɵFactoryTarget.Directive
|
|
});
|
|
static ɵdir = i0.ɵɵngDeclareDirective({
|
|
minVersion: "16.1.0",
|
|
version: "21.0.3",
|
|
type: MatInput,
|
|
isStandalone: true,
|
|
selector: "input[matInput], textarea[matInput], select[matNativeControl],\n input[matNativeControl], textarea[matNativeControl]",
|
|
inputs: {
|
|
disabled: "disabled",
|
|
id: "id",
|
|
placeholder: "placeholder",
|
|
name: "name",
|
|
required: "required",
|
|
type: "type",
|
|
errorStateMatcher: "errorStateMatcher",
|
|
userAriaDescribedBy: ["aria-describedby", "userAriaDescribedBy"],
|
|
value: "value",
|
|
readonly: "readonly",
|
|
disabledInteractive: ["disabledInteractive", "disabledInteractive", booleanAttribute]
|
|
},
|
|
host: {
|
|
listeners: {
|
|
"focus": "_focusChanged(true)",
|
|
"blur": "_focusChanged(false)",
|
|
"input": "_onInput()"
|
|
},
|
|
properties: {
|
|
"class.mat-input-server": "_isServer",
|
|
"class.mat-mdc-form-field-textarea-control": "_isInFormField && _isTextarea",
|
|
"class.mat-mdc-form-field-input-control": "_isInFormField",
|
|
"class.mat-mdc-input-disabled-interactive": "disabledInteractive",
|
|
"class.mdc-text-field__input": "_isInFormField",
|
|
"class.mat-mdc-native-select-inline": "_isInlineSelect()",
|
|
"id": "id",
|
|
"disabled": "disabled && !disabledInteractive",
|
|
"required": "required",
|
|
"attr.name": "name || null",
|
|
"attr.readonly": "_getReadonlyAttribute()",
|
|
"attr.aria-disabled": "disabled && disabledInteractive ? \"true\" : null",
|
|
"attr.aria-invalid": "(empty && required) ? null : errorState",
|
|
"attr.aria-required": "required",
|
|
"attr.id": "id"
|
|
},
|
|
classAttribute: "mat-mdc-input-element"
|
|
},
|
|
providers: [{
|
|
provide: MatFormFieldControl,
|
|
useExisting: MatInput
|
|
}],
|
|
exportAs: ["matInput"],
|
|
usesOnChanges: true,
|
|
ngImport: i0
|
|
});
|
|
}
|
|
i0.ɵɵngDeclareClassMetadata({
|
|
minVersion: "12.0.0",
|
|
version: "21.0.3",
|
|
ngImport: i0,
|
|
type: MatInput,
|
|
decorators: [{
|
|
type: Directive,
|
|
args: [{
|
|
selector: `input[matInput], textarea[matInput], select[matNativeControl],
|
|
input[matNativeControl], textarea[matNativeControl]`,
|
|
exportAs: 'matInput',
|
|
host: {
|
|
'class': 'mat-mdc-input-element',
|
|
'[class.mat-input-server]': '_isServer',
|
|
'[class.mat-mdc-form-field-textarea-control]': '_isInFormField && _isTextarea',
|
|
'[class.mat-mdc-form-field-input-control]': '_isInFormField',
|
|
'[class.mat-mdc-input-disabled-interactive]': 'disabledInteractive',
|
|
'[class.mdc-text-field__input]': '_isInFormField',
|
|
'[class.mat-mdc-native-select-inline]': '_isInlineSelect()',
|
|
'[id]': 'id',
|
|
'[disabled]': 'disabled && !disabledInteractive',
|
|
'[required]': 'required',
|
|
'[attr.name]': 'name || null',
|
|
'[attr.readonly]': '_getReadonlyAttribute()',
|
|
'[attr.aria-disabled]': 'disabled && disabledInteractive ? "true" : null',
|
|
'[attr.aria-invalid]': '(empty && required) ? null : errorState',
|
|
'[attr.aria-required]': 'required',
|
|
'[attr.id]': 'id',
|
|
'(focus)': '_focusChanged(true)',
|
|
'(blur)': '_focusChanged(false)',
|
|
'(input)': '_onInput()'
|
|
},
|
|
providers: [{
|
|
provide: MatFormFieldControl,
|
|
useExisting: MatInput
|
|
}]
|
|
}]
|
|
}],
|
|
ctorParameters: () => [],
|
|
propDecorators: {
|
|
disabled: [{
|
|
type: Input
|
|
}],
|
|
id: [{
|
|
type: Input
|
|
}],
|
|
placeholder: [{
|
|
type: Input
|
|
}],
|
|
name: [{
|
|
type: Input
|
|
}],
|
|
required: [{
|
|
type: Input
|
|
}],
|
|
type: [{
|
|
type: Input
|
|
}],
|
|
errorStateMatcher: [{
|
|
type: Input
|
|
}],
|
|
userAriaDescribedBy: [{
|
|
type: Input,
|
|
args: ['aria-describedby']
|
|
}],
|
|
value: [{
|
|
type: Input
|
|
}],
|
|
readonly: [{
|
|
type: Input
|
|
}],
|
|
disabledInteractive: [{
|
|
type: Input,
|
|
args: [{
|
|
transform: booleanAttribute
|
|
}]
|
|
}]
|
|
}
|
|
});
|
|
|
|
class MatInputModule {
|
|
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
minVersion: "12.0.0",
|
|
version: "21.0.3",
|
|
ngImport: i0,
|
|
type: MatInputModule,
|
|
deps: [],
|
|
target: i0.ɵɵFactoryTarget.NgModule
|
|
});
|
|
static ɵmod = i0.ɵɵngDeclareNgModule({
|
|
minVersion: "14.0.0",
|
|
version: "21.0.3",
|
|
ngImport: i0,
|
|
type: MatInputModule,
|
|
imports: [MatFormFieldModule, MatInput],
|
|
exports: [MatInput, MatFormFieldModule, TextFieldModule, BidiModule]
|
|
});
|
|
static ɵinj = i0.ɵɵngDeclareInjector({
|
|
minVersion: "12.0.0",
|
|
version: "21.0.3",
|
|
ngImport: i0,
|
|
type: MatInputModule,
|
|
imports: [MatFormFieldModule, MatFormFieldModule, TextFieldModule, BidiModule]
|
|
});
|
|
}
|
|
i0.ɵɵngDeclareClassMetadata({
|
|
minVersion: "12.0.0",
|
|
version: "21.0.3",
|
|
ngImport: i0,
|
|
type: MatInputModule,
|
|
decorators: [{
|
|
type: NgModule,
|
|
args: [{
|
|
imports: [MatFormFieldModule, MatInput],
|
|
exports: [MatInput, MatFormFieldModule, TextFieldModule, BidiModule]
|
|
}]
|
|
}]
|
|
});
|
|
|
|
export { MAT_INPUT_CONFIG, MAT_INPUT_VALUE_ACCESSOR, MatInput, MatInputModule, getMatInputUnsupportedTypeError };
|
|
//# sourceMappingURL=input.mjs.map
|
|
|