survey-angular-ui
Version:
A free MIT-licensed Angular UI component that renders dynamic, interactive JSON-based forms and surveys. You can use it to collect responses from users and send them to your own database.
42 lines • 10.7 kB
JavaScript
import { Component, ViewChild } from "@angular/core";
import { QuestionAngular } from "../question";
import { Helpers } from "survey-core";
import { AngularComponentFactory } from "../component-factory";
import * as i0 from "@angular/core";
import * as i1 from "../components/character-counter/character-counter.component";
import * as i2 from "@angular/common";
import * as i3 from "@angular/forms";
export class TextQuestionComponent extends QuestionAngular {
get value() {
var _a;
return (_a = this.model.inputValue) !== null && _a !== void 0 ? _a : "";
}
blur(event) {
this.model.onBlur(event);
this.updateInputDomElement();
}
updateInputDomElement() {
var _a;
if (!!((_a = this.inputElementRef) === null || _a === void 0 ? void 0 : _a.nativeElement)) {
const control = this.inputElementRef.nativeElement;
if (!Helpers.isTwoValueEquals(this.value, control.value, false, true, false)) {
control.value = this.value;
}
}
}
}
TextQuestionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TextQuestionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
TextQuestionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TextQuestionComponent, selector: "sv-ng-text-question", viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true }], usesInheritance: true, ngImport: i0, template: " <ng-container [ngTemplateOutlet]=\"input\" *ngIf=\"!model.dataListId && !model.isReadOnlyRenderDiv()\"></ng-container>\n <div *ngIf=\"model.dataListId && !model.isReadOnlyRenderDiv()\">\n <ng-container [ngTemplateOutlet]=\"input\"></ng-container>\n <datalist [id]=\"model.dataListId\">\n <option *ngFor=\"let dataListItem of model.dataList\" [value]=\"dataListItem\"></option>\n </datalist>\n </div>\n <div *ngIf=\"model.isReadOnlyRenderDiv()\" #contentElement>{{ value }}</div>\n <ng-template #input>\n <input #inputElement [style]=\"model.inputStyle\" [class]=\"model.getControlClass()\" [attr.list]=\"model.dataListId\" (click)=\"model.readOnlyBlocker($event)\" (pointerdown)=\"model.readOnlyBlocker($event)\" \n (change)=\"model.onChange($event)\" [value]=\"value\" [disabled]=\"model.isDisabledAttr\" [type]=\"model.inputType\" [id]=\"model.inputId\" [attr.placeholder]=\"model.renderedPlaceholder\"\n (keyup)=\"model.onKeyUp($event)\" (keydown)=\"model.onKeyDown($event)\" (blur)=\"blur($event)\" (focus)=\"model.onFocus($event)\" (compositionupdate)=\"model.onCompositionUpdate($event)\" \n [attr.size] = \"model.renderedInputSize\" [attr.maxlength]= \"model.getMaxLength()\" [attr.min]=\"model.renderedMin\" [readonly]=\"model.isReadOnlyAttr\"\n [attr.max]=\"model.renderedMax\" [attr.step]=\"model.renderedStep\" [attr.max]=\"model.renderedMax\" [attr.aria-required]=\"model.a11y_input_ariaRequired\"\n [attr.aria-label]=\"model.a11y_input_ariaLabel\" [attr.aria-labelledby]=\"model.a11y_input_ariaLabelledBy\" [attr.aria-describedby]=\"model.a11y_input_ariaDescribedBy\"[attr.aria-invalid]=\"model.a11y_input_ariaInvalid\" [attr.aria-errormessage]=\"model.a11y_input_ariaErrormessage\" [attr.autocomplete]=\"model.autocomplete\" #contentElement/>\n <sv-ng-character-counter *ngIf=\"model.getMaxLength()\" \n [counter]=\"model.characterCounter\"\n [remainingCharacterCounter]=\"model.cssClasses.remainingCharacterCounter\">\n </sv-ng-character-counter>\n </ng-template>", styles: [""], components: [{ type: i1.CharacterCounterComponent, selector: "sv-ng-character-counter", inputs: ["counter", "remainingCharacterCounter"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TextQuestionComponent, decorators: [{
type: Component,
args: [{
selector: "sv-ng-text-question",
templateUrl: "./text.component.html",
styleUrls: ["./text.component.scss"]
}]
}], propDecorators: { inputElementRef: [{
type: ViewChild,
args: ["inputElement"]
}] } });
AngularComponentFactory.Instance.registerComponent("text-question", TextQuestionComponent);
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGV4dC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvcXVlc3Rpb25zL3RleHQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vc3JjL3F1ZXN0aW9ucy90ZXh0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQWMsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ2pFLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxhQUFhLENBQUM7QUFDOUMsT0FBTyxFQUFFLE9BQU8sRUFBcUIsTUFBTSxhQUFhLENBQUM7QUFDekQsT0FBTyxFQUFFLHVCQUF1QixFQUFFLE1BQU0sc0JBQXNCLENBQUM7Ozs7O0FBTy9ELE1BQU0sT0FBTyxxQkFBc0IsU0FBUSxlQUFrQztJQUczRSxJQUFJLEtBQUs7O1FBQ1AsT0FBTyxNQUFBLElBQUksQ0FBQyxLQUFLLENBQUMsVUFBVSxtQ0FBSSxFQUFFLENBQUM7SUFDckMsQ0FBQztJQUVELElBQUksQ0FBQyxLQUFVO1FBQ2IsSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDekIsSUFBSSxDQUFDLHFCQUFxQixFQUFFLENBQUM7SUFDL0IsQ0FBQztJQUVELHFCQUFxQjs7UUFDbkIsSUFBSSxDQUFDLENBQUMsQ0FBQSxNQUFBLElBQUksQ0FBQyxlQUFlLDBDQUFFLGFBQWEsQ0FBQSxFQUFFO1lBQ3pDLE1BQU0sT0FBTyxHQUFRLElBQUksQ0FBQyxlQUFlLENBQUMsYUFBYSxDQUFDO1lBQ3hELElBQUksQ0FBQyxPQUFPLENBQUMsZ0JBQWdCLENBQUMsSUFBSSxDQUFDLEtBQUssRUFBRSxPQUFPLENBQUMsS0FBSyxFQUFFLEtBQUssRUFBRSxJQUFJLEVBQUUsS0FBSyxDQUFDLEVBQUU7Z0JBQzVFLE9BQU8sQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQzthQUM1QjtTQUNGO0lBQ0gsQ0FBQzs7bUhBbkJVLHFCQUFxQjt1R0FBckIscUJBQXFCLG1NQ1ZsQyw2K0RBbUJnQjs0RkRUSCxxQkFBcUI7a0JBTGpDLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLHFCQUFxQjtvQkFDL0IsV0FBVyxFQUFFLHVCQUF1QjtvQkFDcEMsU0FBUyxFQUFFLENBQUMsdUJBQXVCLENBQUM7aUJBQ3JDOzhCQUU0QixlQUFlO3NCQUF6QyxTQUFTO3VCQUFDLGNBQWM7O0FBcUIzQix1QkFBdUIsQ0FBQyxRQUFRLENBQUMsaUJBQWlCLENBQUMsZUFBZSxFQUFFLHFCQUFxQixDQUFDLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEVsZW1lbnRSZWYsIFZpZXdDaGlsZCB9IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5pbXBvcnQgeyBRdWVzdGlvbkFuZ3VsYXIgfSBmcm9tIFwiLi4vcXVlc3Rpb25cIjtcbmltcG9ydCB7IEhlbHBlcnMsIFF1ZXN0aW9uVGV4dE1vZGVsIH0gZnJvbSBcInN1cnZleS1jb3JlXCI7XG5pbXBvcnQgeyBBbmd1bGFyQ29tcG9uZW50RmFjdG9yeSB9IGZyb20gXCIuLi9jb21wb25lbnQtZmFjdG9yeVwiO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6IFwic3YtbmctdGV4dC1xdWVzdGlvblwiLFxuICB0ZW1wbGF0ZVVybDogXCIuL3RleHQuY29tcG9uZW50Lmh0bWxcIixcbiAgc3R5bGVVcmxzOiBbXCIuL3RleHQuY29tcG9uZW50LnNjc3NcIl1cbn0pXG5leHBvcnQgY2xhc3MgVGV4dFF1ZXN0aW9uQ29tcG9uZW50IGV4dGVuZHMgUXVlc3Rpb25Bbmd1bGFyPFF1ZXN0aW9uVGV4dE1vZGVsPiB7XG4gIEBWaWV3Q2hpbGQoXCJpbnB1dEVsZW1lbnRcIikgaW5wdXRFbGVtZW50UmVmITogRWxlbWVudFJlZjxIVE1MRGl2RWxlbWVudD47XG5cbiAgZ2V0IHZhbHVlKCk6IHN0cmluZyB7XG4gICAgcmV0dXJuIHRoaXMubW9kZWwuaW5wdXRWYWx1ZSA/PyBcIlwiO1xuICB9XG5cbiAgYmx1cihldmVudDogYW55KTogdm9pZCB7XG4gICAgdGhpcy5tb2RlbC5vbkJsdXIoZXZlbnQpO1xuICAgIHRoaXMudXBkYXRlSW5wdXREb21FbGVtZW50KCk7XG4gIH1cblxuICB1cGRhdGVJbnB1dERvbUVsZW1lbnQoKTogdm9pZCB7XG4gICAgaWYgKCEhdGhpcy5pbnB1dEVsZW1lbnRSZWY/Lm5hdGl2ZUVsZW1lbnQpIHtcbiAgICAgIGNvbnN0IGNvbnRyb2w6IGFueSA9IHRoaXMuaW5wdXRFbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQ7XG4gICAgICBpZiAoIUhlbHBlcnMuaXNUd29WYWx1ZUVxdWFscyh0aGlzLnZhbHVlLCBjb250cm9sLnZhbHVlLCBmYWxzZSwgdHJ1ZSwgZmFsc2UpKSB7XG4gICAgICAgIGNvbnRyb2wudmFsdWUgPSB0aGlzLnZhbHVlO1xuICAgICAgfVxuICAgIH1cbiAgfVxufVxuXG5Bbmd1bGFyQ29tcG9uZW50RmFjdG9yeS5JbnN0YW5jZS5yZWdpc3RlckNvbXBvbmVudChcInRleHQtcXVlc3Rpb25cIiwgVGV4dFF1ZXN0aW9uQ29tcG9uZW50KTsiLCIgIDxuZy1jb250YWluZXIgW25nVGVtcGxhdGVPdXRsZXRdPVwiaW5wdXRcIiAqbmdJZj1cIiFtb2RlbC5kYXRhTGlzdElkICYmICFtb2RlbC5pc1JlYWRPbmx5UmVuZGVyRGl2KClcIj48L25nLWNvbnRhaW5lcj5cbiAgPGRpdiAqbmdJZj1cIm1vZGVsLmRhdGFMaXN0SWQgJiYgIW1vZGVsLmlzUmVhZE9ubHlSZW5kZXJEaXYoKVwiPlxuICAgIDxuZy1jb250YWluZXIgW25nVGVtcGxhdGVPdXRsZXRdPVwiaW5wdXRcIj48L25nLWNvbnRhaW5lcj5cbiAgICA8ZGF0YWxpc3QgW2lkXT1cIm1vZGVsLmRhdGFMaXN0SWRcIj5cbiAgICAgIDxvcHRpb24gKm5nRm9yPVwibGV0IGRhdGFMaXN0SXRlbSBvZiBtb2RlbC5kYXRhTGlzdFwiIFt2YWx1ZV09XCJkYXRhTGlzdEl0ZW1cIj48L29wdGlvbj5cbiAgICA8L2RhdGFsaXN0PlxuICA8L2Rpdj5cbiAgPGRpdiAqbmdJZj1cIm1vZGVsLmlzUmVhZE9ubHlSZW5kZXJEaXYoKVwiICNjb250ZW50RWxlbWVudD57eyB2YWx1ZSB9fTwvZGl2PlxuICA8bmctdGVtcGxhdGUgI2lucHV0PlxuICAgIDxpbnB1dCAjaW5wdXRFbGVtZW50IFtzdHlsZV09XCJtb2RlbC5pbnB1dFN0eWxlXCIgW2NsYXNzXT1cIm1vZGVsLmdldENvbnRyb2xDbGFzcygpXCIgW2F0dHIubGlzdF09XCJtb2RlbC5kYXRhTGlzdElkXCIgKGNsaWNrKT1cIm1vZGVsLnJlYWRPbmx5QmxvY2tlcigkZXZlbnQpXCIgKHBvaW50ZXJkb3duKT1cIm1vZGVsLnJlYWRPbmx5QmxvY2tlcigkZXZlbnQpXCIgXG4gICAgKGNoYW5nZSk9XCJtb2RlbC5vbkNoYW5nZSgkZXZlbnQpXCIgW3ZhbHVlXT1cInZhbHVlXCIgW2Rpc2FibGVkXT1cIm1vZGVsLmlzRGlzYWJsZWRBdHRyXCIgW3R5cGVdPVwibW9kZWwuaW5wdXRUeXBlXCIgW2lkXT1cIm1vZGVsLmlucHV0SWRcIiBbYXR0ci5wbGFjZWhvbGRlcl09XCJtb2RlbC5yZW5kZXJlZFBsYWNlaG9sZGVyXCJcbiAgICAoa2V5dXApPVwibW9kZWwub25LZXlVcCgkZXZlbnQpXCIgKGtleWRvd24pPVwibW9kZWwub25LZXlEb3duKCRldmVudClcIiAoYmx1cik9XCJibHVyKCRldmVudClcIiAoZm9jdXMpPVwibW9kZWwub25Gb2N1cygkZXZlbnQpXCIgKGNvbXBvc2l0aW9udXBkYXRlKT1cIm1vZGVsLm9uQ29tcG9zaXRpb25VcGRhdGUoJGV2ZW50KVwiIFxuICAgIFthdHRyLnNpemVdID0gXCJtb2RlbC5yZW5kZXJlZElucHV0U2l6ZVwiIFthdHRyLm1heGxlbmd0aF09IFwibW9kZWwuZ2V0TWF4TGVuZ3RoKClcIiBbYXR0ci5taW5dPVwibW9kZWwucmVuZGVyZWRNaW5cIiBbcmVhZG9ubHldPVwibW9kZWwuaXNSZWFkT25seUF0dHJcIlxuICAgIFthdHRyLm1heF09XCJtb2RlbC5yZW5kZXJlZE1heFwiIFthdHRyLnN0ZXBdPVwibW9kZWwucmVuZGVyZWRTdGVwXCIgW2F0dHIubWF4XT1cIm1vZGVsLnJlbmRlcmVkTWF4XCIgW2F0dHIuYXJpYS1yZXF1aXJlZF09XCJtb2RlbC5hMTF5X2lucHV0X2FyaWFSZXF1aXJlZFwiXG4gICAgW2F0dHIuYXJpYS1sYWJlbF09XCJtb2RlbC5hMTF5X2lucHV0X2FyaWFMYWJlbFwiIFthdHRyLmFyaWEtbGFiZWxsZWRieV09XCJtb2RlbC5hMTF5X2lucHV0X2FyaWFMYWJlbGxlZEJ5XCIgW2F0dHIuYXJpYS1kZXNjcmliZWRieV09XCJtb2RlbC5hMTF5X2lucHV0X2FyaWFEZXNjcmliZWRCeVwiW2F0dHIuYXJpYS1pbnZhbGlkXT1cIm1vZGVsLmExMXlfaW5wdXRfYXJpYUludmFsaWRcIiBbYXR0ci5hcmlhLWVycm9ybWVzc2FnZV09XCJtb2RlbC5hMTF5X2lucHV0X2FyaWFFcnJvcm1lc3NhZ2VcIiBbYXR0ci5hdXRvY29tcGxldGVdPVwibW9kZWwuYXV0b2NvbXBsZXRlXCIgI2NvbnRlbnRFbGVtZW50Lz5cbiAgICA8c3YtbmctY2hhcmFjdGVyLWNvdW50ZXIgKm5nSWY9XCJtb2RlbC5nZXRNYXhMZW5ndGgoKVwiIFxuICAgIFtjb3VudGVyXT1cIm1vZGVsLmNoYXJhY3RlckNvdW50ZXJcIlxuICAgIFtyZW1haW5pbmdDaGFyYWN0ZXJDb3VudGVyXT1cIm1vZGVsLmNzc0NsYXNzZXMucmVtYWluaW5nQ2hhcmFjdGVyQ291bnRlclwiPlxuICA8L3N2LW5nLWNoYXJhY3Rlci1jb3VudGVyPlxuICA8L25nLXRlbXBsYXRlPiJdfQ==