ngx-surveys
Version:
Angular 18+ survey / form builder
44 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";
export class FormItemString extends FormItem {
}
export class FormItemStringComponent {
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: FormItemStringComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: FormItemStringComponent, selector: "ammo-form-item-string", inputs: { item: "item", editable: "editable" }, outputs: { changes: "changes" }, usesOnChanges: true, ngImport: i0, template: "\n<mat-form-field>\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 <input #inputField\n matInput\n [type]=\"item.style || 'text'\"\n [disabled]=\"!editable\"\n [attr.id]=\"item.name\"\n [placeholder]=\"item.label.length<maxLabelLength ? item.label : ''\"\n [(ngModel)]=\"item.value\"\n [minlength]=\"item.fieldValidation ? item.fieldValidation.minLength : undefined \"\n (ngModelChange)=\"onValueChanges(item)\"\n [errorStateMatcher]=\"matcher\"\n [required]=\"item.required\"\n >\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\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.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { 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"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FormItemStringComponent, decorators: [{
type: Component,
args: [{ selector: 'ammo-form-item-string', template: "\n<mat-form-field>\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 <input #inputField\n matInput\n [type]=\"item.style || 'text'\"\n [disabled]=\"!editable\"\n [attr.id]=\"item.name\"\n [placeholder]=\"item.label.length<maxLabelLength ? item.label : ''\"\n [(ngModel)]=\"item.value\"\n [minlength]=\"item.fieldValidation ? item.fieldValidation.minLength : undefined \"\n (ngModelChange)=\"onValueChanges(item)\"\n [errorStateMatcher]=\"matcher\"\n [required]=\"item.required\"\n >\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\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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZm9ybS1pdGVtLXN0cmluZy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtc3VydmV5cy9zcmMvbGliL2Zvcm0taXRlbS9mb3JtLWl0ZW0tc3RyaW5nL2Zvcm0taXRlbS1zdHJpbmcuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXN1cnZleXMvc3JjL2xpYi9mb3JtLWl0ZW0vZm9ybS1pdGVtLXN0cmluZy9mb3JtLWl0ZW0tc3RyaW5nLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQVUsS0FBSyxFQUFFLE1BQU0sRUFBRSxZQUFZLEVBQWEsTUFBTSxlQUFlLENBQUM7QUFDMUYsT0FBTyxFQUFFLFFBQVEsRUFBRSx1QkFBdUIsRUFBa0IsTUFBTSxVQUFVLENBQUM7Ozs7OztBQUU3RSxNQUFNLE9BQU8sY0FBZSxTQUFRLFFBQVE7Q0FFM0M7QUFPRCxNQUFNLE9BQU8sdUJBQXVCO0lBUWhDO1FBTFMsYUFBUSxHQUFVLElBQUksQ0FBQztRQUN0QixZQUFPLEdBQUcsSUFBSSxZQUFZLEVBQWtCLENBQUM7UUFDdkQsWUFBTyxHQUFHLElBQUksdUJBQXVCLEVBQUUsQ0FBQztRQUN4QyxtQkFBYyxHQUFDLEVBQUUsQ0FBQztJQUVGLENBQUM7SUFFakIsUUFBUTtRQUNKLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxHQUFDLElBQUksQ0FBQyxJQUFJLENBQUM7SUFDaEMsQ0FBQztJQUVELFdBQVc7UUFDUCxJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksR0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDO0lBQ2hDLENBQUM7SUFFRCxhQUFhLENBQUMsV0FBVztRQUNyQixJQUFJLFdBQVcsS0FBSyxVQUFVLEVBQUUsQ0FBQztZQUM3QixPQUFPLElBQUksQ0FBQztRQUNoQixDQUFDO0lBQ0wsQ0FBQztJQUVELGNBQWMsQ0FBQyxJQUFJO1FBQ2YsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDNUIsQ0FBQzsrR0ExQlEsdUJBQXVCO21HQUF2Qix1QkFBdUIsbUtDWnBDLGt0Q0F1QkE7OzRGRFhhLHVCQUF1QjtrQkFMbkMsU0FBUzsrQkFDRSx1QkFBdUI7d0RBTXRCLElBQUk7c0JBQVosS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNJLE9BQU87c0JBQWhCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIE9uSW5pdCwgSW5wdXQsIE91dHB1dCwgRXZlbnRFbWl0dGVyLCBPbkNoYW5nZXMgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEZvcm1JdGVtLCBTdXJ2ZXlFcnJvclN0YXRlTWF0Y2hlciwgRm9ybUl0ZW1XaWRnZXQgfSBmcm9tICcuLi9pbmRleCc7XG5cbmV4cG9ydCBjbGFzcyBGb3JtSXRlbVN0cmluZyBleHRlbmRzIEZvcm1JdGVtIHtcbiAgICBoaW50OiBzdHJpbmc7XG59XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2FtbW8tZm9ybS1pdGVtLXN0cmluZycsXG4gIHRlbXBsYXRlVXJsOiAnLi9mb3JtLWl0ZW0tc3RyaW5nLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vZm9ybS1pdGVtLXN0cmluZy5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIEZvcm1JdGVtU3RyaW5nQ29tcG9uZW50IGltcGxlbWVudHMgRm9ybUl0ZW1XaWRnZXQsIE9uSW5pdCwgT25DaGFuZ2VzIHtcblxuICAgIEBJbnB1dCgpIGl0ZW06IEZvcm1JdGVtU3RyaW5nO1xuICAgIEBJbnB1dCgpIGVkaXRhYmxlOiBib29sZWFuPXRydWU7XG4gICAgQE91dHB1dCgpIGNoYW5nZXMgPSBuZXcgRXZlbnRFbWl0dGVyPEZvcm1JdGVtU3RyaW5nPigpO1xuICAgIG1hdGNoZXIgPSBuZXcgU3VydmV5RXJyb3JTdGF0ZU1hdGNoZXIoKTtcbiAgICBtYXhMYWJlbExlbmd0aD02MDtcblxuICAgIGNvbnN0cnVjdG9yKCkgeyB9XG5cbiAgICBuZ09uSW5pdCgpIHtcbiAgICAgICAgdGhpcy5tYXRjaGVyLml0ZW09dGhpcy5pdGVtO1xuICAgIH1cblxuICAgIG5nT25DaGFuZ2VzKCkge1xuICAgICAgICB0aGlzLm1hdGNoZXIuaXRlbT10aGlzLml0ZW07XG4gICAgfVxuXG4gICAgY2hlY2tSZXF1aXJlZChwbGFjZWhvbGRlcikge1xuICAgICAgICBpZiAocGxhY2Vob2xkZXIgPT09ICdSZXF1aXJlZCcpIHtcbiAgICAgICAgICAgIHJldHVybiB0cnVlO1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgb25WYWx1ZUNoYW5nZXMoaXRlbSkge1xuICAgICAgICB0aGlzLmNoYW5nZXMuZW1pdChpdGVtKTtcbiAgICB9XG59XG4iLCJcbjxtYXQtZm9ybS1maWVsZD5cbiAgICA8bGFiZWwgY2xhc3M9XCJsb25nLWxhYmVsLXRleHRcIiAqbmdJZj1cIml0ZW0ubGFiZWwubGVuZ3RoPj1tYXhMYWJlbExlbmd0aFwiIFtuZ0NsYXNzXT1cInsnaGFzLWVycm9yJzppdGVtLmVycm9ycyAmJiBpdGVtLmVycm9ycy5sZW5ndGh9XCI+e3tpdGVtLmxhYmVsfX0gPHNwYW4gKm5nSWY9XCJpdGVtLnJlcXVpcmVkXCIgY2xhc3M9XCJyZXF1aXJlZC1hc3Rlcml4XCI+Kjwvc3Bhbj48L2xhYmVsPlxuICAgIDxpbnB1dCAjaW5wdXRGaWVsZFxuICAgICAgICBtYXRJbnB1dFxuICAgICAgICBbdHlwZV09XCJpdGVtLnN0eWxlIHx8ICd0ZXh0J1wiXG4gICAgICAgIFtkaXNhYmxlZF09XCIhZWRpdGFibGVcIlxuICAgICAgICBbYXR0ci5pZF09XCJpdGVtLm5hbWVcIlxuICAgICAgICBbcGxhY2Vob2xkZXJdPVwiaXRlbS5sYWJlbC5sZW5ndGg8bWF4TGFiZWxMZW5ndGggPyBpdGVtLmxhYmVsIDogJydcIlxuICAgICAgICBbKG5nTW9kZWwpXT1cIml0ZW0udmFsdWVcIlxuICAgICAgICBbbWlubGVuZ3RoXT1cIml0ZW0uZmllbGRWYWxpZGF0aW9uID8gaXRlbS5maWVsZFZhbGlkYXRpb24ubWluTGVuZ3RoIDogdW5kZWZpbmVkIFwiXG4gICAgICAgIChuZ01vZGVsQ2hhbmdlKT1cIm9uVmFsdWVDaGFuZ2VzKGl0ZW0pXCJcbiAgICAgICAgW2Vycm9yU3RhdGVNYXRjaGVyXT1cIm1hdGNoZXJcIlxuICAgICAgICBbcmVxdWlyZWRdPVwiaXRlbS5yZXF1aXJlZFwiXG4gICAgPlxuICAgIDxtYXQtZXJyb3IgKm5nSWY9XCJpdGVtLmVycm9ycyAmJiBpdGVtLmVycm9ycy5sZW5ndGhcIj5cbiAgICAgIDxkaXYgKm5nRm9yPVwibGV0IGVycm9yIG9mIGl0ZW0uZXJyb3JzXCI+e3tlcnJvci5tZXNzYWdlfX08L2Rpdj5cbiAgICA8L21hdC1lcnJvcj5cbiAgICA8bWF0LWhpbnQgYWxpZ249XCJzdGFydFwiICpuZ0lmPVwiIShpdGVtLmVycm9ycyAmJiBpdGVtLmVycm9ycy5sZW5ndGgpICYmIGl0ZW0uaGludD8ubGVuZ3RoIDwgbWF4TGFiZWxMZW5ndGhcIj48c3Ryb25nPnt7aXRlbS5oaW50fX08L3N0cm9uZz4gPC9tYXQtaGludD5cblxuPC9tYXQtZm9ybS1maWVsZD5cbjxzbWFsbCBjbGFzcz1cImxvbmctaGludFwiICpuZ0lmPVwiIShpdGVtLmVycm9ycyAmJiBpdGVtLmVycm9ycy5sZW5ndGgpICYmIGl0ZW0uaGludD8ubGVuZ3RoID49IG1heExhYmVsTGVuZ3RoXCI+PHN0cm9uZz57e2l0ZW0uaGludH19PC9zdHJvbmc+IDwvc21hbGw+XG5cbiJdfQ==