ngx-surveys
Version:
Angular 18+ survey / form builder
45 lines • 11.4 kB
JavaScript
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { FormItem, SurveyErrorStateMatcher } from '../index';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/forms";
import * as i3 from "@angular/material/input";
import * as i4 from "@angular/material/form-field";
import * as i5 from "@angular/cdk/text-field";
export class FormItemText extends FormItem {
}
export class FormItemTextComponent {
constructor() {
this.editable = true;
this.changes = new EventEmitter();
this.matcher = new SurveyErrorStateMatcher();
this.maxLabelLength = 60;
}
ngOnInit() {
this.matcher.item = this.item;
}
ngOnChanges() {
this.matcher.item = this.item;
}
checkRequired(placeholder) {
if (placeholder === 'Required') {
return true;
}
}
onValueChanges(item) {
this.changes.emit(item);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FormItemTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: FormItemTextComponent, selector: "ammo-form-item-text", inputs: { item: "item", editable: "editable" }, outputs: { changes: "changes" }, usesOnChanges: true, ngImport: i0, template: "\n<mat-form-field class=\"example-full-width\">\n <label class=\"long-label-text\" *ngIf=\"item.label.length>=maxLabelLength\" [ngClass]=\"{'has-error':item.errors && item.errors.length}\">{{item.label}} <span *ngIf=\"item.required\" class=\"required-asterix\">*</span></label>\n <textarea matInput\n [disabled]=\"!editable\"\n [attr.id]=\"item.name\"\n [placeholder]=\"item.label.length<maxLabelLength ? item.label : ''\"\n [(ngModel)]=\"item.value\"\n (ngModelChange)=\"onValueChanges(item)\"\n [errorStateMatcher]=\"matcher\"\n cdkTextareaAutosize\n #autosize=\"cdkTextareaAutosize\"\n cdkAutosizeMinRows=\"1\"\n [required]=\"item.required\"\n ></textarea>\n <mat-error *ngIf=\"item.errors && item.errors.length\">\n <div *ngFor=\"let error of item.errors\">{{error.message}}</div>\n </mat-error>\n <mat-hint align=\"start\" *ngIf=\"!(item.errors && item.errors.length) && item.hint?.length < maxLabelLength\"><strong>{{item.hint}}</strong> </mat-hint>\n\n</mat-form-field>\n<small class=\"long-hint\" *ngIf=\"!(item.errors && item.errors.length) && item.hint?.length >= maxLabelLength\"><strong>{{item.hint}}</strong> </small>\n", styles: [".mat-mdc-form-field{display:block}.long-label-text{margin-bottom:5px;display:block}.long-hint{margin-top:-14px;display:inline-block;margin-bottom:10px;color:#0000008a;font-size:75%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.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: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i5.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FormItemTextComponent, decorators: [{
type: Component,
args: [{ selector: 'ammo-form-item-text', template: "\n<mat-form-field class=\"example-full-width\">\n <label class=\"long-label-text\" *ngIf=\"item.label.length>=maxLabelLength\" [ngClass]=\"{'has-error':item.errors && item.errors.length}\">{{item.label}} <span *ngIf=\"item.required\" class=\"required-asterix\">*</span></label>\n <textarea matInput\n [disabled]=\"!editable\"\n [attr.id]=\"item.name\"\n [placeholder]=\"item.label.length<maxLabelLength ? item.label : ''\"\n [(ngModel)]=\"item.value\"\n (ngModelChange)=\"onValueChanges(item)\"\n [errorStateMatcher]=\"matcher\"\n cdkTextareaAutosize\n #autosize=\"cdkTextareaAutosize\"\n cdkAutosizeMinRows=\"1\"\n [required]=\"item.required\"\n ></textarea>\n <mat-error *ngIf=\"item.errors && item.errors.length\">\n <div *ngFor=\"let error of item.errors\">{{error.message}}</div>\n </mat-error>\n <mat-hint align=\"start\" *ngIf=\"!(item.errors && item.errors.length) && item.hint?.length < maxLabelLength\"><strong>{{item.hint}}</strong> </mat-hint>\n\n</mat-form-field>\n<small class=\"long-hint\" *ngIf=\"!(item.errors && item.errors.length) && item.hint?.length >= maxLabelLength\"><strong>{{item.hint}}</strong> </small>\n", styles: [".mat-mdc-form-field{display:block}.long-label-text{margin-bottom:5px;display:block}.long-hint{margin-top:-14px;display:inline-block;margin-bottom:10px;color:#0000008a;font-size:75%}\n"] }]
}], ctorParameters: () => [], propDecorators: { item: [{
type: Input
}], editable: [{
type: Input
}], changes: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZm9ybS1pdGVtLXRleHQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXN1cnZleXMvc3JjL2xpYi9mb3JtLWl0ZW0vZm9ybS1pdGVtLXRleHQvZm9ybS1pdGVtLXRleHQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXN1cnZleXMvc3JjL2xpYi9mb3JtLWl0ZW0vZm9ybS1pdGVtLXRleHQvZm9ybS1pdGVtLXRleHQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBVSxLQUFLLEVBQUUsTUFBTSxFQUFFLFlBQVksRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMvRSxPQUFPLEVBQUUsUUFBUSxFQUFFLHVCQUF1QixFQUFrQixNQUFNLFVBQVUsQ0FBQzs7Ozs7OztBQUU3RSxNQUFNLE9BQU8sWUFBYSxTQUFRLFFBQVE7Q0FFekM7QUFPRCxNQUFNLE9BQU8scUJBQXFCO0lBUTlCO1FBTFMsYUFBUSxHQUFVLElBQUksQ0FBQztRQUN0QixZQUFPLEdBQUcsSUFBSSxZQUFZLEVBQWdCLENBQUM7UUFDckQsWUFBTyxHQUFHLElBQUksdUJBQXVCLEVBQUUsQ0FBQztRQUN4QyxtQkFBYyxHQUFDLEVBQUUsQ0FBQztJQUVGLENBQUM7SUFHakIsUUFBUTtRQUNKLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxHQUFDLElBQUksQ0FBQyxJQUFJLENBQUM7SUFDaEMsQ0FBQztJQUVELFdBQVc7UUFDUCxJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksR0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDO0lBQ2hDLENBQUM7SUFFRCxhQUFhLENBQUMsV0FBVztRQUNyQixJQUFJLFdBQVcsS0FBSyxVQUFVLEVBQUUsQ0FBQztZQUM3QixPQUFPLElBQUksQ0FBQztRQUNoQixDQUFDO0lBQ0wsQ0FBQztJQUVELGNBQWMsQ0FBQyxJQUFJO1FBQ2YsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDNUIsQ0FBQzsrR0EzQlEscUJBQXFCO21HQUFyQixxQkFBcUIsaUtDWmxDLDJzQ0FzQkE7OzRGRFZhLHFCQUFxQjtrQkFMakMsU0FBUzsrQkFDRSxxQkFBcUI7d0RBTXBCLElBQUk7c0JBQVosS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNJLE9BQU87c0JBQWhCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIE9uSW5pdCwgSW5wdXQsIE91dHB1dCwgRXZlbnRFbWl0dGVyIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBGb3JtSXRlbSwgU3VydmV5RXJyb3JTdGF0ZU1hdGNoZXIsIEZvcm1JdGVtV2lkZ2V0IH0gZnJvbSAnLi4vaW5kZXgnO1xuXG5leHBvcnQgY2xhc3MgRm9ybUl0ZW1UZXh0IGV4dGVuZHMgRm9ybUl0ZW0ge1xuICAgIGhpbnQ6IHN0cmluZztcbn1cblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYW1tby1mb3JtLWl0ZW0tdGV4dCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9mb3JtLWl0ZW0tdGV4dC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2Zvcm0taXRlbS10ZXh0LmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgRm9ybUl0ZW1UZXh0Q29tcG9uZW50IGltcGxlbWVudHMgRm9ybUl0ZW1XaWRnZXQsIE9uSW5pdCB7XG5cbiAgICBASW5wdXQoKSBpdGVtOiBGb3JtSXRlbVRleHQ7XG4gICAgQElucHV0KCkgZWRpdGFibGU6IGJvb2xlYW49dHJ1ZTtcbiAgICBAT3V0cHV0KCkgY2hhbmdlcyA9IG5ldyBFdmVudEVtaXR0ZXI8Rm9ybUl0ZW1UZXh0PigpO1xuICAgIG1hdGNoZXIgPSBuZXcgU3VydmV5RXJyb3JTdGF0ZU1hdGNoZXIoKTtcbiAgICBtYXhMYWJlbExlbmd0aD02MDtcblxuICAgIGNvbnN0cnVjdG9yKCkgeyB9XG5cblxuICAgIG5nT25Jbml0KCkge1xuICAgICAgICB0aGlzLm1hdGNoZXIuaXRlbT10aGlzLml0ZW07XG4gICAgfVxuXG4gICAgbmdPbkNoYW5nZXMoKSB7XG4gICAgICAgIHRoaXMubWF0Y2hlci5pdGVtPXRoaXMuaXRlbTtcbiAgICB9XG5cbiAgICBjaGVja1JlcXVpcmVkKHBsYWNlaG9sZGVyKSB7XG4gICAgICAgIGlmIChwbGFjZWhvbGRlciA9PT0gJ1JlcXVpcmVkJykge1xuICAgICAgICAgICAgcmV0dXJuIHRydWU7XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICBvblZhbHVlQ2hhbmdlcyhpdGVtKSB7XG4gICAgICAgIHRoaXMuY2hhbmdlcy5lbWl0KGl0ZW0pO1xuICAgIH1cbn1cbiIsIlxuPG1hdC1mb3JtLWZpZWxkIGNsYXNzPVwiZXhhbXBsZS1mdWxsLXdpZHRoXCI+XG4gICAgPGxhYmVsIGNsYXNzPVwibG9uZy1sYWJlbC10ZXh0XCIgKm5nSWY9XCJpdGVtLmxhYmVsLmxlbmd0aD49bWF4TGFiZWxMZW5ndGhcIiBbbmdDbGFzc109XCJ7J2hhcy1lcnJvcic6aXRlbS5lcnJvcnMgJiYgaXRlbS5lcnJvcnMubGVuZ3RofVwiPnt7aXRlbS5sYWJlbH19IDxzcGFuICpuZ0lmPVwiaXRlbS5yZXF1aXJlZFwiIGNsYXNzPVwicmVxdWlyZWQtYXN0ZXJpeFwiPio8L3NwYW4+PC9sYWJlbD5cbiAgICA8dGV4dGFyZWEgbWF0SW5wdXRcbiAgICAgICAgW2Rpc2FibGVkXT1cIiFlZGl0YWJsZVwiXG4gICAgICAgIFthdHRyLmlkXT1cIml0ZW0ubmFtZVwiXG4gICAgICAgIFtwbGFjZWhvbGRlcl09XCJpdGVtLmxhYmVsLmxlbmd0aDxtYXhMYWJlbExlbmd0aCA/IGl0ZW0ubGFiZWwgOiAnJ1wiXG4gICAgICAgIFsobmdNb2RlbCldPVwiaXRlbS52YWx1ZVwiXG4gICAgICAgIChuZ01vZGVsQ2hhbmdlKT1cIm9uVmFsdWVDaGFuZ2VzKGl0ZW0pXCJcbiAgICAgICAgW2Vycm9yU3RhdGVNYXRjaGVyXT1cIm1hdGNoZXJcIlxuICAgICAgICBjZGtUZXh0YXJlYUF1dG9zaXplXG4gICAgICAgICNhdXRvc2l6ZT1cImNka1RleHRhcmVhQXV0b3NpemVcIlxuICAgICAgICBjZGtBdXRvc2l6ZU1pblJvd3M9XCIxXCJcbiAgICAgICAgW3JlcXVpcmVkXT1cIml0ZW0ucmVxdWlyZWRcIlxuICAgID48L3RleHRhcmVhPlxuICAgIDxtYXQtZXJyb3IgKm5nSWY9XCJpdGVtLmVycm9ycyAmJiBpdGVtLmVycm9ycy5sZW5ndGhcIj5cbiAgICAgIDxkaXYgKm5nRm9yPVwibGV0IGVycm9yIG9mIGl0ZW0uZXJyb3JzXCI+e3tlcnJvci5tZXNzYWdlfX08L2Rpdj5cbiAgICA8L21hdC1lcnJvcj5cbiAgICA8bWF0LWhpbnQgYWxpZ249XCJzdGFydFwiICpuZ0lmPVwiIShpdGVtLmVycm9ycyAmJiBpdGVtLmVycm9ycy5sZW5ndGgpICYmIGl0ZW0uaGludD8ubGVuZ3RoIDwgbWF4TGFiZWxMZW5ndGhcIj48c3Ryb25nPnt7aXRlbS5oaW50fX08L3N0cm9uZz4gPC9tYXQtaGludD5cblxuPC9tYXQtZm9ybS1maWVsZD5cbjxzbWFsbCBjbGFzcz1cImxvbmctaGludFwiICpuZ0lmPVwiIShpdGVtLmVycm9ycyAmJiBpdGVtLmVycm9ycy5sZW5ndGgpICYmIGl0ZW0uaGludD8ubGVuZ3RoID49IG1heExhYmVsTGVuZ3RoXCI+PHN0cm9uZz57e2l0ZW0uaGludH19PC9zdHJvbmc+IDwvc21hbGw+XG4iXX0=