@sumaris-net/ngx-components 2.11.2 → 2.11.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/doc/changelog.md +5 -1
- package/esm2022/src/app/core/form/text-popover/text-popover.component.mjs +1 -1
- package/esm2022/src/app/shared/material/text/testing/text-form.testing.mjs +3 -3
- package/esm2022/src/app/shared/material/text/text-form.component.mjs +26 -6
- package/fesm2022/sumaris-net.ngx-components.mjs +28 -8
- package/fesm2022/sumaris-net.ngx-components.mjs.map +1 -1
- package/package.json +1 -1
- package/src/app/shared/material/text/text-form.component.d.ts +13 -3
- package/src/assets/manifest.json +1 -1
|
@@ -12250,7 +12250,9 @@ class TextForm extends AppForm {
|
|
|
12250
12250
|
showError = true;
|
|
12251
12251
|
placeholder;
|
|
12252
12252
|
multiline = true;
|
|
12253
|
-
|
|
12253
|
+
autoSize = false;
|
|
12254
|
+
autoSizeMinRows;
|
|
12255
|
+
autoSizeMaxRows;
|
|
12254
12256
|
maxLength = 2000;
|
|
12255
12257
|
autofocus = false;
|
|
12256
12258
|
validator = null;
|
|
@@ -12260,6 +12262,15 @@ class TextForm extends AppForm {
|
|
|
12260
12262
|
floatLabel = 'auto';
|
|
12261
12263
|
appearance;
|
|
12262
12264
|
subscriptSizing;
|
|
12265
|
+
/**
|
|
12266
|
+
* @deprecated Use autoSize instead
|
|
12267
|
+
*/
|
|
12268
|
+
set autoHeight(value) {
|
|
12269
|
+
this.autoSize = value;
|
|
12270
|
+
}
|
|
12271
|
+
get autoHeight() {
|
|
12272
|
+
return this.autoSize;
|
|
12273
|
+
}
|
|
12263
12274
|
textAreaChanges = new EventEmitter();
|
|
12264
12275
|
textArea;
|
|
12265
12276
|
textInput;
|
|
@@ -12346,13 +12357,13 @@ class TextForm extends AppForm {
|
|
|
12346
12357
|
}
|
|
12347
12358
|
}
|
|
12348
12359
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextForm, deps: [{ token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i1$2.UntypedFormBuilder }, { token: i1$2.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
12349
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: TextForm, selector: "app-text-form", inputs: { showError: ["showError", "showError", booleanAttribute], placeholder: "placeholder", multiline: ["multiline", "multiline", booleanAttribute],
|
|
12360
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: TextForm, selector: "app-text-form", inputs: { showError: ["showError", "showError", booleanAttribute], placeholder: "placeholder", multiline: ["multiline", "multiline", booleanAttribute], autoSize: ["autoSize", "autoSize", booleanAttribute], autoSizeMinRows: ["autoSizeMinRows", "autoSizeMinRows", numberAttribute], autoSizeMaxRows: ["autoSizeMaxRows", "autoSizeMaxRows", numberAttribute], maxLength: ["maxLength", "maxLength", numberAttribute], autofocus: ["autofocus", "autofocus", booleanAttribute], validator: "validator", standalone: ["standalone", "standalone", booleanAttribute], formControl: "formControl", formControlName: "formControlName", floatLabel: "floatLabel", appearance: "appearance", subscriptSizing: "subscriptSizing", autoHeight: ["autoHeight", "autoHeight", booleanAttribute] }, outputs: { textAreaChanges: "textAreaChanges" }, providers: [
|
|
12350
12361
|
{
|
|
12351
12362
|
provide: NG_VALUE_ACCESSOR,
|
|
12352
12363
|
useExisting: forwardRef(() => TextForm),
|
|
12353
12364
|
multi: true,
|
|
12354
12365
|
},
|
|
12355
|
-
], viewQueries: [{ propertyName: "textArea", first: true, predicate: ["textArea"], descendants: true }, { propertyName: "textInput", first: true, predicate: ["textInput"], descendants: true }, { propertyName: "autosizeDirective", first: true, predicate: CdkTextareaAutosize, descendants: true }], usesInheritance: true, ngImport: i0, template: "<form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"onSubmit.emit($event)\">\n @if (multiline) {\n <mat-form-field\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"subscriptSizing\"\n >\n @if (floatLabel !== 'never' && !!placeholder) {\n <mat-label>{{ placeholder }}</mat-label>\n }\n <textarea\n #textArea\n matInput\n [formControl]=\"textControl\"\n [readonly]=\"textControl.disabled\"\n [placeholder]=\"floatLabel === 'never' && placeholder\"\n [class.fixed-height]=\"!
|
|
12366
|
+
], viewQueries: [{ propertyName: "textArea", first: true, predicate: ["textArea"], descendants: true }, { propertyName: "textInput", first: true, predicate: ["textInput"], descendants: true }, { propertyName: "autosizeDirective", first: true, predicate: CdkTextareaAutosize, descendants: true }], usesInheritance: true, ngImport: i0, template: "<form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"onSubmit.emit($event)\">\n @if (multiline) {\n <mat-form-field\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"subscriptSizing\"\n >\n @if (floatLabel !== 'never' && !!placeholder) {\n <mat-label>{{ placeholder }}</mat-label>\n }\n <textarea\n #textArea\n matInput\n [formControl]=\"textControl\"\n [readonly]=\"textControl.disabled\"\n [placeholder]=\"floatLabel === 'never' && placeholder\"\n [class.fixed-height]=\"!autoSize\"\n [cdkTextareaAutosize]=\"autoSize\"\n [cdkAutosizeMinRows]=\"autoSizeMinRows\"\n [cdkAutosizeMaxRows]=\"autoSizeMaxRows\"\n (keydown.control.enter)=\"onSubmit.emit($event)\"\n ></textarea>\n <mat-error *ngIf=\"textControl.hasError('maxlength')\">\n {{ 'ERROR.FIELD_MAX_LENGTH' | translate: textControl.errors['maxlength'] }}\n </mat-error>\n <mat-hint *ngIf=\"maxLength\" align=\"end\">\n {{ 'INFO.TEXT_PROGRESS' | translate: { current: textArea.value?.length || 0, max: maxLength } }}\n </mat-hint>\n </mat-form-field>\n } @else {\n <mat-form-field\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"subscriptSizing\"\n >\n @if (floatLabel !== 'never' && !!placeholder) {\n <mat-label>{{ placeholder }}</mat-label>\n }\n <input\n #textInput\n matInput\n [formControl]=\"textControl\"\n [readonly]=\"textControl.disabled\"\n [placeholder]=\"floatLabel === 'never' && placeholder\"\n [appAutofocus]=\"autofocus\"\n (keydown.control.enter)=\"onSubmit.emit($event)\"\n />\n <mat-error *ngIf=\"textControl.hasError('maxlength')\">\n {{ 'ERROR.FIELD_MAX_LENGTH' | translate: textControl.errors['maxlength'] }}\n </mat-error>\n <mat-error *ngIf=\"textControl.hasError('pattern')\">\n {{ 'ERROR.FIELD_INVALID' | translate }}\n </mat-error>\n <mat-error *ngIf=\"errorSpan.innerHTML.trim() as error\" [innerHTML]=\"error\"></mat-error>\n <span #errorSpan class=\"cdk-visually-hidden\">\n <ng-content select=\"[matError]\"></ng-content>\n </span>\n <mat-hint *ngIf=\"maxLength\" align=\"end\">\n {{ 'INFO.TEXT_PROGRESS' | translate: { current: textInput.value?.length || 0, max: maxLength } }}\n </mat-hint>\n </mat-form-field>\n }\n</form>\n", styles: ["textarea{--textarea-height: 11.5em;max-height:var(--textarea-height)}textarea.fixed-height{height:var(--textarea-height)}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i5$1.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: AsFloatLabelTypePipe, name: "asFloatLabelType" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
12356
12367
|
}
|
|
12357
12368
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextForm, decorators: [{
|
|
12358
12369
|
type: Component,
|
|
@@ -12362,7 +12373,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
12362
12373
|
useExisting: forwardRef(() => TextForm),
|
|
12363
12374
|
multi: true,
|
|
12364
12375
|
},
|
|
12365
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"onSubmit.emit($event)\">\n @if (multiline) {\n <mat-form-field\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"subscriptSizing\"\n >\n @if (floatLabel !== 'never' && !!placeholder) {\n <mat-label>{{ placeholder }}</mat-label>\n }\n <textarea\n #textArea\n matInput\n [formControl]=\"textControl\"\n [readonly]=\"textControl.disabled\"\n [placeholder]=\"floatLabel === 'never' && placeholder\"\n [class.fixed-height]=\"!
|
|
12376
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"onSubmit.emit($event)\">\n @if (multiline) {\n <mat-form-field\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"subscriptSizing\"\n >\n @if (floatLabel !== 'never' && !!placeholder) {\n <mat-label>{{ placeholder }}</mat-label>\n }\n <textarea\n #textArea\n matInput\n [formControl]=\"textControl\"\n [readonly]=\"textControl.disabled\"\n [placeholder]=\"floatLabel === 'never' && placeholder\"\n [class.fixed-height]=\"!autoSize\"\n [cdkTextareaAutosize]=\"autoSize\"\n [cdkAutosizeMinRows]=\"autoSizeMinRows\"\n [cdkAutosizeMaxRows]=\"autoSizeMaxRows\"\n (keydown.control.enter)=\"onSubmit.emit($event)\"\n ></textarea>\n <mat-error *ngIf=\"textControl.hasError('maxlength')\">\n {{ 'ERROR.FIELD_MAX_LENGTH' | translate: textControl.errors['maxlength'] }}\n </mat-error>\n <mat-hint *ngIf=\"maxLength\" align=\"end\">\n {{ 'INFO.TEXT_PROGRESS' | translate: { current: textArea.value?.length || 0, max: maxLength } }}\n </mat-hint>\n </mat-form-field>\n } @else {\n <mat-form-field\n [floatLabel]=\"floatLabel | asFloatLabelType\"\n [appearance]=\"appearance\"\n [subscriptSizing]=\"subscriptSizing\"\n >\n @if (floatLabel !== 'never' && !!placeholder) {\n <mat-label>{{ placeholder }}</mat-label>\n }\n <input\n #textInput\n matInput\n [formControl]=\"textControl\"\n [readonly]=\"textControl.disabled\"\n [placeholder]=\"floatLabel === 'never' && placeholder\"\n [appAutofocus]=\"autofocus\"\n (keydown.control.enter)=\"onSubmit.emit($event)\"\n />\n <mat-error *ngIf=\"textControl.hasError('maxlength')\">\n {{ 'ERROR.FIELD_MAX_LENGTH' | translate: textControl.errors['maxlength'] }}\n </mat-error>\n <mat-error *ngIf=\"textControl.hasError('pattern')\">\n {{ 'ERROR.FIELD_INVALID' | translate }}\n </mat-error>\n <mat-error *ngIf=\"errorSpan.innerHTML.trim() as error\" [innerHTML]=\"error\"></mat-error>\n <span #errorSpan class=\"cdk-visually-hidden\">\n <ng-content select=\"[matError]\"></ng-content>\n </span>\n <mat-hint *ngIf=\"maxLength\" align=\"end\">\n {{ 'INFO.TEXT_PROGRESS' | translate: { current: textInput.value?.length || 0, max: maxLength } }}\n </mat-hint>\n </mat-form-field>\n }\n</form>\n", styles: ["textarea{--textarea-height: 11.5em;max-height:var(--textarea-height)}textarea.fixed-height{height:var(--textarea-height)}\n"] }]
|
|
12366
12377
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i1$2.UntypedFormBuilder }, { type: i1$2.FormGroupDirective, decorators: [{
|
|
12367
12378
|
type: Optional
|
|
12368
12379
|
}] }], propDecorators: { showError: [{
|
|
@@ -12373,9 +12384,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
12373
12384
|
}], multiline: [{
|
|
12374
12385
|
type: Input,
|
|
12375
12386
|
args: [{ transform: booleanAttribute }]
|
|
12376
|
-
}],
|
|
12387
|
+
}], autoSize: [{
|
|
12377
12388
|
type: Input,
|
|
12378
12389
|
args: [{ transform: booleanAttribute }]
|
|
12390
|
+
}], autoSizeMinRows: [{
|
|
12391
|
+
type: Input,
|
|
12392
|
+
args: [{ transform: numberAttribute }]
|
|
12393
|
+
}], autoSizeMaxRows: [{
|
|
12394
|
+
type: Input,
|
|
12395
|
+
args: [{ transform: numberAttribute }]
|
|
12379
12396
|
}], maxLength: [{
|
|
12380
12397
|
type: Input,
|
|
12381
12398
|
args: [{ transform: numberAttribute }]
|
|
@@ -12397,6 +12414,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
12397
12414
|
type: Input
|
|
12398
12415
|
}], subscriptSizing: [{
|
|
12399
12416
|
type: Input
|
|
12417
|
+
}], autoHeight: [{
|
|
12418
|
+
type: Input,
|
|
12419
|
+
args: [{ transform: booleanAttribute }]
|
|
12400
12420
|
}], textAreaChanges: [{
|
|
12401
12421
|
type: Output
|
|
12402
12422
|
}], textArea: [{
|
|
@@ -16080,7 +16100,7 @@ class TextPopover {
|
|
|
16080
16100
|
return button?.side !== 'start';
|
|
16081
16101
|
}
|
|
16082
16102
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextPopover, deps: [{ token: i2$1.PopoverController }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
|
|
16083
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TextPopover, selector: "app-text-popover", inputs: { showHeader: "showHeader", headerColor: "headerColor", showFooter: "showFooter", title: "title", text: "text", placeholder: "placeholder", editing: "editing", multiline: "multiline", autoHeight: "autoHeight", maxLength: "maxLength", autofocus: "autofocus", validator: "validator", headerButtons: "headerButtons", mobile: "mobile" }, viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true, static: true }], ngImport: i0, template: "<ion-header *ngIf=\"showHeader\">\n <ion-toolbar [color]=\"headerColor\">\n <ion-buttons slot=\"start\">\n <ion-button *ngIf=\"mobile && editing\" (click)=\"cancel()\" [title]=\"'COMMON.BTN_CANCEL' | translate\">\n <ion-icon slot=\"icon-only\" name=\"arrow-back\"></ion-icon>\n </ion-button>\n <ion-button\n *ngFor=\"let button of headerButtons | arrayFilter: isStartSide\"\n [fill]=\"button.fill\"\n [color]=\"button.color\"\n (click)=\"clickButton(button)\"\n >\n <ion-icon *ngIf=\"button.icon\" [slot]=\"button.text ? 'start' : 'icon-only'\" [name]=\"button.icon\"></ion-icon>\n <ion-text *ngIf=\"button.text\">{{ button.text | translate }}</ion-text>\n </ion-button>\n </ion-buttons>\n\n <ion-title *ngIf=\"title\">{{ title | translate }}</ion-title>\n\n <ion-buttons slot=\"end\">\n <ion-button\n *ngFor=\"let button of headerButtons | arrayFilter: isEndSide\"\n [fill]=\"button.fill\"\n [color]=\"button.color\"\n (click)=\"clickButton(button)\"\n >\n <ion-icon *ngIf=\"button.icon\" [slot]=\"button.text ? 'start' : 'icon-only'\" [name]=\"button.icon\"></ion-icon>\n <ion-text *ngIf=\"button.text\">{{ button.text | translate }}</ion-text>\n </ion-button>\n\n <ng-container *ngIf=\"mobile\">\n <ion-button\n *ngIf=\"editing\"\n (click)=\"onValidate($event)\"\n [disabled]=\"disabled\"\n [title]=\"'COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate\"\n >\n <ion-icon slot=\"icon-only\" name=\"checkmark\"></ion-icon>\n </ion-button>\n <ion-button *ngIf=\"!editing\" (click)=\"cancel()\" [title]=\"'COMMON.BTN_CLOSE' | translate\">\n <ion-icon slot=\"icon-only\" name=\"close\"></ion-icon>\n </ion-button>\n </ng-container>\n </ion-buttons>\n </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\" [class.has-header]=\"showHeader\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n <ion-item *ngIf=\"form.error\" visible-xs visible-sm visible-mobile lines=\"none\">\n <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"form.error | translate\"></ion-label>\n </ion-item>\n\n <app-text-form\n #form\n [standalone]=\"true\"\n [placeholder]=\"placeholder\"\n [multiline]=\"multiline\"\n [maxLength]=\"maxLength\"\n [autoHeight]=\"autoHeight\"\n [autofocus]=\"editing && autofocus\"\n [validator]=\"validator\"\n (onSubmit)=\"onValidate($event)\"\n ></app-text-form>\n</ion-content>\n\n<ion-footer *ngIf=\"showFooter\">\n <ion-toolbar>\n <ion-row class=\"ion-no-padding\" nowrap>\n <ion-col></ion-col>\n\n <ion-col size=\"auto\">\n <ion-button fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n </ion-button>\n <ion-button\n [fill]=\"disabled ? 'clear' : 'solid'\"\n (click)=\"onValidate($event)\"\n (keyup.enter)=\"onValidate($event)\"\n color=\"tertiary\"\n [disabled]=\"disabled\"\n [title]=\"'COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate\"\n >\n <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n </ion-button>\n </ion-col>\n </ion-row>\n </ion-toolbar>\n</ion-footer>\n", styles: ["ion-content{--textarea-height: 11.5em}ion-content.has-header{--textarea-height: calc(11.5em - var(--ion-toolbar-height, 0em))}\n"], dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: TextForm, selector: "app-text-form", inputs: ["showError", "placeholder", "multiline", "
|
|
16103
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TextPopover, selector: "app-text-popover", inputs: { showHeader: "showHeader", headerColor: "headerColor", showFooter: "showFooter", title: "title", text: "text", placeholder: "placeholder", editing: "editing", multiline: "multiline", autoHeight: "autoHeight", maxLength: "maxLength", autofocus: "autofocus", validator: "validator", headerButtons: "headerButtons", mobile: "mobile" }, viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true, static: true }], ngImport: i0, template: "<ion-header *ngIf=\"showHeader\">\n <ion-toolbar [color]=\"headerColor\">\n <ion-buttons slot=\"start\">\n <ion-button *ngIf=\"mobile && editing\" (click)=\"cancel()\" [title]=\"'COMMON.BTN_CANCEL' | translate\">\n <ion-icon slot=\"icon-only\" name=\"arrow-back\"></ion-icon>\n </ion-button>\n <ion-button\n *ngFor=\"let button of headerButtons | arrayFilter: isStartSide\"\n [fill]=\"button.fill\"\n [color]=\"button.color\"\n (click)=\"clickButton(button)\"\n >\n <ion-icon *ngIf=\"button.icon\" [slot]=\"button.text ? 'start' : 'icon-only'\" [name]=\"button.icon\"></ion-icon>\n <ion-text *ngIf=\"button.text\">{{ button.text | translate }}</ion-text>\n </ion-button>\n </ion-buttons>\n\n <ion-title *ngIf=\"title\">{{ title | translate }}</ion-title>\n\n <ion-buttons slot=\"end\">\n <ion-button\n *ngFor=\"let button of headerButtons | arrayFilter: isEndSide\"\n [fill]=\"button.fill\"\n [color]=\"button.color\"\n (click)=\"clickButton(button)\"\n >\n <ion-icon *ngIf=\"button.icon\" [slot]=\"button.text ? 'start' : 'icon-only'\" [name]=\"button.icon\"></ion-icon>\n <ion-text *ngIf=\"button.text\">{{ button.text | translate }}</ion-text>\n </ion-button>\n\n <ng-container *ngIf=\"mobile\">\n <ion-button\n *ngIf=\"editing\"\n (click)=\"onValidate($event)\"\n [disabled]=\"disabled\"\n [title]=\"'COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate\"\n >\n <ion-icon slot=\"icon-only\" name=\"checkmark\"></ion-icon>\n </ion-button>\n <ion-button *ngIf=\"!editing\" (click)=\"cancel()\" [title]=\"'COMMON.BTN_CLOSE' | translate\">\n <ion-icon slot=\"icon-only\" name=\"close\"></ion-icon>\n </ion-button>\n </ng-container>\n </ion-buttons>\n </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\" [class.has-header]=\"showHeader\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n <ion-item *ngIf=\"form.error\" visible-xs visible-sm visible-mobile lines=\"none\">\n <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"form.error | translate\"></ion-label>\n </ion-item>\n\n <app-text-form\n #form\n [standalone]=\"true\"\n [placeholder]=\"placeholder\"\n [multiline]=\"multiline\"\n [maxLength]=\"maxLength\"\n [autoHeight]=\"autoHeight\"\n [autofocus]=\"editing && autofocus\"\n [validator]=\"validator\"\n (onSubmit)=\"onValidate($event)\"\n ></app-text-form>\n</ion-content>\n\n<ion-footer *ngIf=\"showFooter\">\n <ion-toolbar>\n <ion-row class=\"ion-no-padding\" nowrap>\n <ion-col></ion-col>\n\n <ion-col size=\"auto\">\n <ion-button fill=\"clear\" color=\"dark\" (click)=\"cancel()\">\n <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n </ion-button>\n <ion-button\n [fill]=\"disabled ? 'clear' : 'solid'\"\n (click)=\"onValidate($event)\"\n (keyup.enter)=\"onValidate($event)\"\n color=\"tertiary\"\n [disabled]=\"disabled\"\n [title]=\"'COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate\"\n >\n <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n </ion-button>\n </ion-col>\n </ion-row>\n </ion-toolbar>\n</ion-footer>\n", styles: ["ion-content{--textarea-height: 11.5em}ion-content.has-header{--textarea-height: calc(11.5em - var(--ion-toolbar-height, 0em))}\n"], dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: TextForm, selector: "app-text-form", inputs: ["showError", "placeholder", "multiline", "autoSize", "autoSizeMinRows", "autoSizeMaxRows", "maxLength", "autofocus", "validator", "standalone", "formControl", "formControlName", "floatLabel", "appearance", "subscriptSizing", "autoHeight"], outputs: ["textAreaChanges"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: ArrayFilterPipe, name: "arrayFilter" }] });
|
|
16084
16104
|
}
|
|
16085
16105
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextPopover, decorators: [{
|
|
16086
16106
|
type: Component,
|
|
@@ -40152,11 +40172,11 @@ class TextFormTestingPage {
|
|
|
40152
40172
|
this.standaloneTextForm2.enable();
|
|
40153
40173
|
}
|
|
40154
40174
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextFormTestingPage, deps: [{ token: i1$2.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
40155
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: TextFormTestingPage, selector: "text-form-testing", viewQueries: [{ propertyName: "standaloneTextForm1", first: true, predicate: ["standaloneTextForm1"], descendants: true }, { propertyName: "standaloneTextForm2", first: true, predicate: ["standaloneTextForm2"], descendants: true }], ngImport: i0, template: "<ion-header>\n <ion-toolbar color=\"primary\">\n <ion-buttons slot=\"start\">\n <ion-back-button></ion-back-button>\n </ion-buttons>\n\n <ion-title>Text form examples</ion-title>\n </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n <ion-grid>\n <ion-row>\n <ion-col>\n <ion-text><h4>Standalone mode (no form)</h4></ion-text>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Default validator</ion-label>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <app-text-form\n #standaloneTextForm1\n [standalone]=\"true\"\n [multiline]=\"false\"\n [maxLength]=\"10\"\n ></app-text-form>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Required</ion-label>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <app-text-form\n #standaloneTextForm2\n [standalone]=\"true\"\n [multiline]=\"false\"\n [maxLength]=\"10\"\n [validator]=\"Validators.required\"\n >\n @if (standaloneTextForm2.textControl.hasError('required')) {\n <mat-error matError>REQUIRED</mat-error>\n }\n </app-text-form>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n </ion-grid>\n\n <form class=\"form-container\" [formGroup]=\"form\">\n <ion-grid>\n <ion-row>\n <ion-col>\n <ion-text><h4>FormGroup mode, no placeholder</h4></ion-text>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Empty</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ form.controls.empty.value | json }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <app-text-form formControlName=\"empty\" [multiline]=\"false\" [maxLength]=\"10\"></app-text-form>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Required</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ form.controls.required.value | json }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <app-text-form\n formControlName=\"required\"\n [multiline]=\"false\"\n [maxLength]=\"10\"\n [validator]=\"Validators.required\"\n >\n <mat-error matError *ngIf=\"form.controls.required.hasError('required')\" translate>\n ERROR.FIELD_REQUIRED\n </mat-error>\n </app-text-form>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col>\n <ion-text><h4>FormGroup mode, with placeholder</h4></ion-text>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Empty</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ form.controls.empty.value | json }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <app-text-form\n formControlName=\"empty\"\n [multiline]=\"false\"\n [maxLength]=\"10\"\n placeholder=\"Empty field\"\n ></app-text-form>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Required</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ form.controls.required.value | json }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <app-text-form\n formControlName=\"required\"\n [multiline]=\"false\"\n [maxLength]=\"10\"\n [validator]=\"Validators.required\"\n placeholder=\"Required field\"\n >\n <mat-error matError *ngIf=\"form.controls.required.hasError('required')\" translate>\n ERROR.FIELD_REQUIRED\n </mat-error>\n </app-text-form>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Outline</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ form.controls.multiline.value | json }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <app-text-form\n formControlName=\"multiline\"\n [multiline]=\"true\"\n [maxLength]=\"2000\"\n appearance=\"outline\"\n placeholder=\"Outline field\"\n ></app-text-form>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n </ion-grid>\n </form>\n</ion-content>\n", dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$1.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: TextForm, selector: "app-text-form", inputs: ["showError", "placeholder", "multiline", "autoHeight", "maxLength", "autofocus", "validator", "standalone", "formControl", "formControlName", "floatLabel", "appearance", "subscriptSizing"], outputs: ["textAreaChanges"] }, { kind: "pipe", type: i3$1.JsonPipe, name: "json" }] });
|
|
40175
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: TextFormTestingPage, selector: "text-form-testing", viewQueries: [{ propertyName: "standaloneTextForm1", first: true, predicate: ["standaloneTextForm1"], descendants: true }, { propertyName: "standaloneTextForm2", first: true, predicate: ["standaloneTextForm2"], descendants: true }], ngImport: i0, template: "<ion-header>\n <ion-toolbar color=\"primary\">\n <ion-buttons slot=\"start\">\n <ion-back-button></ion-back-button>\n </ion-buttons>\n\n <ion-title>Text form examples</ion-title>\n </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n <ion-grid>\n <ion-row>\n <ion-col>\n <ion-text><h4>Standalone mode (no form)</h4></ion-text>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Default validator</ion-label>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <app-text-form\n #standaloneTextForm1\n [standalone]=\"true\"\n [multiline]=\"false\"\n [maxLength]=\"10\"\n ></app-text-form>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Required</ion-label>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <app-text-form\n #standaloneTextForm2\n [standalone]=\"true\"\n [multiline]=\"false\"\n [maxLength]=\"10\"\n [validator]=\"Validators.required\"\n >\n @if (standaloneTextForm2.textControl.hasError('required')) {\n <mat-error matError>REQUIRED</mat-error>\n }\n </app-text-form>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n </ion-grid>\n\n <form class=\"form-container\" [formGroup]=\"form\">\n <ion-grid>\n <ion-row>\n <ion-col>\n <ion-text><h4>FormGroup mode, no placeholder</h4></ion-text>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Empty</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ form.controls.empty.value | json }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <app-text-form formControlName=\"empty\" [multiline]=\"false\" [maxLength]=\"10\"></app-text-form>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Required</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ form.controls.required.value | json }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <app-text-form\n formControlName=\"required\"\n [multiline]=\"false\"\n [maxLength]=\"10\"\n [validator]=\"Validators.required\"\n >\n <mat-error matError *ngIf=\"form.controls.required.hasError('required')\" translate>\n ERROR.FIELD_REQUIRED\n </mat-error>\n </app-text-form>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col>\n <ion-text><h4>FormGroup mode, with placeholder</h4></ion-text>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Empty</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ form.controls.empty.value | json }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <app-text-form\n formControlName=\"empty\"\n [multiline]=\"false\"\n [maxLength]=\"10\"\n placeholder=\"Empty field\"\n ></app-text-form>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Required</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ form.controls.required.value | json }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <app-text-form\n formControlName=\"required\"\n [multiline]=\"false\"\n [maxLength]=\"10\"\n [validator]=\"Validators.required\"\n placeholder=\"Required field\"\n >\n <mat-error matError *ngIf=\"form.controls.required.hasError('required')\" translate>\n ERROR.FIELD_REQUIRED\n </mat-error>\n </app-text-form>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Outline</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ form.controls.multiline.value | json }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <app-text-form\n formControlName=\"multiline\"\n [multiline]=\"true\"\n appearance=\"outline\"\n autoSize=\"true\"\n autoSizeMinRows=\"4\"\n [maxLength]=\"2000\"\n placeholder=\"Outline field\"\n ></app-text-form>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n </ion-grid>\n </form>\n</ion-content>\n", dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$1.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: TextForm, selector: "app-text-form", inputs: ["showError", "placeholder", "multiline", "autoSize", "autoSizeMinRows", "autoSizeMaxRows", "maxLength", "autofocus", "validator", "standalone", "formControl", "formControlName", "floatLabel", "appearance", "subscriptSizing", "autoHeight"], outputs: ["textAreaChanges"] }, { kind: "pipe", type: i3$1.JsonPipe, name: "json" }] });
|
|
40156
40176
|
}
|
|
40157
40177
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextFormTestingPage, decorators: [{
|
|
40158
40178
|
type: Component,
|
|
40159
|
-
args: [{ selector: 'text-form-testing', template: "<ion-header>\n <ion-toolbar color=\"primary\">\n <ion-buttons slot=\"start\">\n <ion-back-button></ion-back-button>\n </ion-buttons>\n\n <ion-title>Text form examples</ion-title>\n </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n <ion-grid>\n <ion-row>\n <ion-col>\n <ion-text><h4>Standalone mode (no form)</h4></ion-text>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Default validator</ion-label>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <app-text-form\n #standaloneTextForm1\n [standalone]=\"true\"\n [multiline]=\"false\"\n [maxLength]=\"10\"\n ></app-text-form>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Required</ion-label>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <app-text-form\n #standaloneTextForm2\n [standalone]=\"true\"\n [multiline]=\"false\"\n [maxLength]=\"10\"\n [validator]=\"Validators.required\"\n >\n @if (standaloneTextForm2.textControl.hasError('required')) {\n <mat-error matError>REQUIRED</mat-error>\n }\n </app-text-form>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n </ion-grid>\n\n <form class=\"form-container\" [formGroup]=\"form\">\n <ion-grid>\n <ion-row>\n <ion-col>\n <ion-text><h4>FormGroup mode, no placeholder</h4></ion-text>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Empty</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ form.controls.empty.value | json }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <app-text-form formControlName=\"empty\" [multiline]=\"false\" [maxLength]=\"10\"></app-text-form>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Required</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ form.controls.required.value | json }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <app-text-form\n formControlName=\"required\"\n [multiline]=\"false\"\n [maxLength]=\"10\"\n [validator]=\"Validators.required\"\n >\n <mat-error matError *ngIf=\"form.controls.required.hasError('required')\" translate>\n ERROR.FIELD_REQUIRED\n </mat-error>\n </app-text-form>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col>\n <ion-text><h4>FormGroup mode, with placeholder</h4></ion-text>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Empty</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ form.controls.empty.value | json }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <app-text-form\n formControlName=\"empty\"\n [multiline]=\"false\"\n [maxLength]=\"10\"\n placeholder=\"Empty field\"\n ></app-text-form>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Required</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ form.controls.required.value | json }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <app-text-form\n formControlName=\"required\"\n [multiline]=\"false\"\n [maxLength]=\"10\"\n [validator]=\"Validators.required\"\n placeholder=\"Required field\"\n >\n <mat-error matError *ngIf=\"form.controls.required.hasError('required')\" translate>\n ERROR.FIELD_REQUIRED\n </mat-error>\n </app-text-form>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Outline</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ form.controls.multiline.value | json }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <app-text-form\n formControlName=\"multiline\"\n [multiline]=\"true\"\n
|
|
40179
|
+
args: [{ selector: 'text-form-testing', template: "<ion-header>\n <ion-toolbar color=\"primary\">\n <ion-buttons slot=\"start\">\n <ion-back-button></ion-back-button>\n </ion-buttons>\n\n <ion-title>Text form examples</ion-title>\n </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n <ion-grid>\n <ion-row>\n <ion-col>\n <ion-text><h4>Standalone mode (no form)</h4></ion-text>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Default validator</ion-label>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <app-text-form\n #standaloneTextForm1\n [standalone]=\"true\"\n [multiline]=\"false\"\n [maxLength]=\"10\"\n ></app-text-form>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Required</ion-label>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <app-text-form\n #standaloneTextForm2\n [standalone]=\"true\"\n [multiline]=\"false\"\n [maxLength]=\"10\"\n [validator]=\"Validators.required\"\n >\n @if (standaloneTextForm2.textControl.hasError('required')) {\n <mat-error matError>REQUIRED</mat-error>\n }\n </app-text-form>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n </ion-grid>\n\n <form class=\"form-container\" [formGroup]=\"form\">\n <ion-grid>\n <ion-row>\n <ion-col>\n <ion-text><h4>FormGroup mode, no placeholder</h4></ion-text>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Empty</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ form.controls.empty.value | json }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <app-text-form formControlName=\"empty\" [multiline]=\"false\" [maxLength]=\"10\"></app-text-form>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Required</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ form.controls.required.value | json }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <app-text-form\n formControlName=\"required\"\n [multiline]=\"false\"\n [maxLength]=\"10\"\n [validator]=\"Validators.required\"\n >\n <mat-error matError *ngIf=\"form.controls.required.hasError('required')\" translate>\n ERROR.FIELD_REQUIRED\n </mat-error>\n </app-text-form>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col>\n <ion-text><h4>FormGroup mode, with placeholder</h4></ion-text>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Empty</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ form.controls.empty.value | json }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <app-text-form\n formControlName=\"empty\"\n [multiline]=\"false\"\n [maxLength]=\"10\"\n placeholder=\"Empty field\"\n ></app-text-form>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Required</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ form.controls.required.value | json }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <app-text-form\n formControlName=\"required\"\n [multiline]=\"false\"\n [maxLength]=\"10\"\n [validator]=\"Validators.required\"\n placeholder=\"Required field\"\n >\n <mat-error matError *ngIf=\"form.controls.required.hasError('required')\" translate>\n ERROR.FIELD_REQUIRED\n </mat-error>\n </app-text-form>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Outline</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>{{ form.controls.multiline.value | json }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <app-text-form\n formControlName=\"multiline\"\n [multiline]=\"true\"\n appearance=\"outline\"\n autoSize=\"true\"\n autoSizeMinRows=\"4\"\n [maxLength]=\"2000\"\n placeholder=\"Outline field\"\n ></app-text-form>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n </ion-grid>\n </form>\n</ion-content>\n" }]
|
|
40160
40180
|
}], ctorParameters: () => [{ type: i1$2.UntypedFormBuilder }], propDecorators: { standaloneTextForm1: [{
|
|
40161
40181
|
type: ViewChild,
|
|
40162
40182
|
args: ['standaloneTextForm1']
|