survey-angular-ui
Version:
survey.js is a JavaScript Survey Library. It is a modern way to add a survey to your website. It uses JSON for survey metadata and results.
42 lines • 9.75 kB
JavaScript
import { Component, Input } from "@angular/core";
import { AngularComponentFactory } from "../../../component-factory";
import { RendererFactory } from "survey-core";
import * as i0 from "@angular/core";
import * as i1 from "../../svg-icon/svg-icon.component";
import * as i2 from "../../../comment-other.component";
import * as i3 from "@angular/common";
import * as i4 from "@angular/forms";
import * as i5 from "../../../utils/dynamic.directive";
export class DropdownSelectComponent {
get editableValue() {
return this.model.renderedValue || "";
}
set editableValue(newValue) {
if (newValue === "") {
this.model.renderedValue = undefined;
}
else {
this.model.renderedValue = newValue;
}
}
click(event) {
this.model.onClick(event);
}
keyup(event) {
this.model.onKeyUp(event);
}
}
DropdownSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DropdownSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
DropdownSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DropdownSelectComponent, selector: "sv-ng-dropdown-select-question", inputs: { model: "model" }, ngImport: i0, template: "<div [class]=\"model.renderCssRoot\">\n <div [class]=\"model.cssClasses.selectWrapper\">\n <select *ngIf=\"!model.isReadOnly\" [attr.id]=\"model.inputId\" [(ngModel)]=\"editableValue\"\n [disabled]=\"model.isInputReadOnly\" (click)=\"click($event)\" (keyup)=\"keyup($event)\"\n [class]=\"model.getControlClass()\" [attr.autocomplete]=\"model.autocomplete\" [required]=\"model.isRequired\"\n [attr.aria-required]=\"model.ariaRequired\" [attr.aria-label]=\"model.ariaLabel\"\n [attr.aria-invalid]=\"model.ariaInvalid\" [attr.aria-errormessage]=\"model.ariaErrormessage\">\n <option *ngIf=\"model.allowClear\" value=\"\">{{ model.placeholder }}</option>\n <ng-template *ngFor=\"let item of model.visibleChoices\"\n [component]=\"{ name: 'sv-dropdown-option-item', data: { item } }\"></ng-template>\n </select>\n <div *ngIf=\"model.isReadOnly\" disabled [class]=\"model.getControlClass()\" [attr.id]=\"model.inputId\">{{\n model.readOnlyText }}</div>\n <div *ngIf=\"model.cssClasses.chevronButtonIconId\" [class]=\"model.cssClasses.chevronButton\" aria-hidden=\"true\">\n <svg [iconName]=\"model.cssClasses.chevronButtonIconId\" [partCss]=\"model.cssClasses.chevronButtonSvg\"\n [size]=\"'auto'\" sv-ng-svg-icon></svg>\n </div>\n </div>\n <div *ngIf=\"model.isOtherSelected\" [class]=\"model.getCommentAreaCss(true)\"\n [style.display]=\"model.isFlowLayout ? 'inline': '' \" [question]=\"model\" sv-ng-comment-other></div>\n</div>", components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i2.SurveyCommentOtherComponent, selector: "sv-ng-comment-other, '[sv-ng-comment-other]'", inputs: ["question"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.DynamicComponentDirective, selector: "[component]", inputs: ["component"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DropdownSelectComponent, decorators: [{
type: Component,
args: [{
selector: "sv-ng-dropdown-select-question",
templateUrl: "./dropdown-select.component.html"
}]
}], propDecorators: { model: [{
type: Input
}] } });
AngularComponentFactory.Instance.registerComponent("dropdown-select-question", DropdownSelectComponent);
RendererFactory.Instance.registerRenderer("dropdown", "select", "dropdown-select-question");
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJvcGRvd24tc2VsZWN0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL3JlbmRlckFzL2Ryb3Bkb3duLXNlbGVjdC9kcm9wZG93bi1zZWxlY3QuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvcmVuZGVyQXMvZHJvcGRvd24tc2VsZWN0L2Ryb3Bkb3duLXNlbGVjdC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNqRCxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQUNyRSxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sYUFBYSxDQUFDOzs7Ozs7O0FBTTlDLE1BQU0sT0FBTyx1QkFBdUI7SUFHbEMsSUFBSSxhQUFhO1FBQ2YsT0FBTyxJQUFJLENBQUMsS0FBSyxDQUFDLGFBQWEsSUFBSSxFQUFFLENBQUM7SUFDeEMsQ0FBQztJQUNELElBQUksYUFBYSxDQUFDLFFBQWE7UUFDN0IsSUFBRyxRQUFRLEtBQUssRUFBRSxFQUFFO1lBQ2xCLElBQUksQ0FBQyxLQUFLLENBQUMsYUFBYSxHQUFHLFNBQVMsQ0FBQztTQUN0QzthQUFNO1lBQ0wsSUFBSSxDQUFDLEtBQUssQ0FBQyxhQUFhLEdBQUcsUUFBUSxDQUFDO1NBQ3JDO0lBQ0gsQ0FBQztJQUVELEtBQUssQ0FBQyxLQUFVO1FBQ2QsSUFBSSxDQUFDLEtBQUssQ0FBQyxPQUFPLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDNUIsQ0FBQztJQUNELEtBQUssQ0FBQyxLQUFVO1FBQ2QsSUFBSSxDQUFDLEtBQUssQ0FBQyxPQUFPLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDNUIsQ0FBQzs7cUhBbkJVLHVCQUF1Qjt5R0FBdkIsdUJBQXVCLGtHQ1JwQywrOUNBb0JNOzRGRFpPLHVCQUF1QjtrQkFKbkMsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsZ0NBQWdDO29CQUMxQyxXQUFXLEVBQUUsa0NBQWtDO2lCQUNoRDs4QkFFVSxLQUFLO3NCQUFiLEtBQUs7O0FBcUJSLHVCQUF1QixDQUFDLFFBQVEsQ0FBQyxpQkFBaUIsQ0FBQywwQkFBMEIsRUFBRSx1QkFBdUIsQ0FBQyxDQUFDO0FBQ3hHLGVBQWUsQ0FBQyxRQUFRLENBQUMsZ0JBQWdCLENBQUMsVUFBVSxFQUFFLFFBQVEsRUFBRSwwQkFBMEIsQ0FBQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCB9IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5pbXBvcnQgeyBBbmd1bGFyQ29tcG9uZW50RmFjdG9yeSB9IGZyb20gXCIuLi8uLi8uLi9jb21wb25lbnQtZmFjdG9yeVwiO1xuaW1wb3J0IHsgUmVuZGVyZXJGYWN0b3J5IH0gZnJvbSBcInN1cnZleS1jb3JlXCI7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogXCJzdi1uZy1kcm9wZG93bi1zZWxlY3QtcXVlc3Rpb25cIixcbiAgdGVtcGxhdGVVcmw6IFwiLi9kcm9wZG93bi1zZWxlY3QuY29tcG9uZW50Lmh0bWxcIlxufSlcbmV4cG9ydCBjbGFzcyBEcm9wZG93blNlbGVjdENvbXBvbmVudCB7XG4gIEBJbnB1dCgpIG1vZGVsOiBhbnk7XG5cbiAgZ2V0IGVkaXRhYmxlVmFsdWUoKSB7XG4gICAgcmV0dXJuIHRoaXMubW9kZWwucmVuZGVyZWRWYWx1ZSB8fCBcIlwiO1xuICB9XG4gIHNldCBlZGl0YWJsZVZhbHVlKG5ld1ZhbHVlOiBhbnkpIHtcbiAgICBpZihuZXdWYWx1ZSA9PT0gXCJcIikge1xuICAgICAgdGhpcy5tb2RlbC5yZW5kZXJlZFZhbHVlID0gdW5kZWZpbmVkO1xuICAgIH0gZWxzZSB7XG4gICAgICB0aGlzLm1vZGVsLnJlbmRlcmVkVmFsdWUgPSBuZXdWYWx1ZTtcbiAgICB9XG4gIH1cblxuICBjbGljayhldmVudDogYW55KSB7XG4gICAgdGhpcy5tb2RlbC5vbkNsaWNrKGV2ZW50KTtcbiAgfVxuICBrZXl1cChldmVudDogYW55KSB7XG4gICAgdGhpcy5tb2RlbC5vbktleVVwKGV2ZW50KTtcbiAgfVxufVxuXG5Bbmd1bGFyQ29tcG9uZW50RmFjdG9yeS5JbnN0YW5jZS5yZWdpc3RlckNvbXBvbmVudChcImRyb3Bkb3duLXNlbGVjdC1xdWVzdGlvblwiLCBEcm9wZG93blNlbGVjdENvbXBvbmVudCk7XG5SZW5kZXJlckZhY3RvcnkuSW5zdGFuY2UucmVnaXN0ZXJSZW5kZXJlcihcImRyb3Bkb3duXCIsIFwic2VsZWN0XCIsIFwiZHJvcGRvd24tc2VsZWN0LXF1ZXN0aW9uXCIpOyIsIjxkaXYgW2NsYXNzXT1cIm1vZGVsLnJlbmRlckNzc1Jvb3RcIj5cbiAgPGRpdiBbY2xhc3NdPVwibW9kZWwuY3NzQ2xhc3Nlcy5zZWxlY3RXcmFwcGVyXCI+XG4gICAgPHNlbGVjdCAqbmdJZj1cIiFtb2RlbC5pc1JlYWRPbmx5XCIgW2F0dHIuaWRdPVwibW9kZWwuaW5wdXRJZFwiIFsobmdNb2RlbCldPVwiZWRpdGFibGVWYWx1ZVwiXG4gICAgICBbZGlzYWJsZWRdPVwibW9kZWwuaXNJbnB1dFJlYWRPbmx5XCIgKGNsaWNrKT1cImNsaWNrKCRldmVudClcIiAoa2V5dXApPVwia2V5dXAoJGV2ZW50KVwiXG4gICAgICBbY2xhc3NdPVwibW9kZWwuZ2V0Q29udHJvbENsYXNzKClcIiBbYXR0ci5hdXRvY29tcGxldGVdPVwibW9kZWwuYXV0b2NvbXBsZXRlXCIgW3JlcXVpcmVkXT1cIm1vZGVsLmlzUmVxdWlyZWRcIlxuICAgICAgW2F0dHIuYXJpYS1yZXF1aXJlZF09XCJtb2RlbC5hcmlhUmVxdWlyZWRcIiBbYXR0ci5hcmlhLWxhYmVsXT1cIm1vZGVsLmFyaWFMYWJlbFwiXG4gICAgICBbYXR0ci5hcmlhLWludmFsaWRdPVwibW9kZWwuYXJpYUludmFsaWRcIiBbYXR0ci5hcmlhLWVycm9ybWVzc2FnZV09XCJtb2RlbC5hcmlhRXJyb3JtZXNzYWdlXCI+XG4gICAgICA8b3B0aW9uICpuZ0lmPVwibW9kZWwuYWxsb3dDbGVhclwiIHZhbHVlPVwiXCI+e3sgbW9kZWwucGxhY2Vob2xkZXIgfX08L29wdGlvbj5cbiAgICAgIDxuZy10ZW1wbGF0ZSAqbmdGb3I9XCJsZXQgaXRlbSBvZiBtb2RlbC52aXNpYmxlQ2hvaWNlc1wiXG4gICAgICAgIFtjb21wb25lbnRdPVwieyBuYW1lOiAnc3YtZHJvcGRvd24tb3B0aW9uLWl0ZW0nLCBkYXRhOiB7IGl0ZW0gfSB9XCI+PC9uZy10ZW1wbGF0ZT5cbiAgICA8L3NlbGVjdD5cbiAgICA8ZGl2ICpuZ0lmPVwibW9kZWwuaXNSZWFkT25seVwiIGRpc2FibGVkIFtjbGFzc109XCJtb2RlbC5nZXRDb250cm9sQ2xhc3MoKVwiIFthdHRyLmlkXT1cIm1vZGVsLmlucHV0SWRcIj57e1xuICAgICAgbW9kZWwucmVhZE9ubHlUZXh0IH19PC9kaXY+XG4gICAgPGRpdiAqbmdJZj1cIm1vZGVsLmNzc0NsYXNzZXMuY2hldnJvbkJ1dHRvbkljb25JZFwiIFtjbGFzc109XCJtb2RlbC5jc3NDbGFzc2VzLmNoZXZyb25CdXR0b25cIiBhcmlhLWhpZGRlbj1cInRydWVcIj5cbiAgICAgIDxzdmcgW2ljb25OYW1lXT1cIm1vZGVsLmNzc0NsYXNzZXMuY2hldnJvbkJ1dHRvbkljb25JZFwiIFtwYXJ0Q3NzXT1cIm1vZGVsLmNzc0NsYXNzZXMuY2hldnJvbkJ1dHRvblN2Z1wiXG4gICAgICAgIFtzaXplXT1cIidhdXRvJ1wiIHN2LW5nLXN2Zy1pY29uPjwvc3ZnPlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbiAgPGRpdiAqbmdJZj1cIm1vZGVsLmlzT3RoZXJTZWxlY3RlZFwiIFtjbGFzc109XCJtb2RlbC5nZXRDb21tZW50QXJlYUNzcyh0cnVlKVwiXG4gICAgW3N0eWxlLmRpc3BsYXldPVwibW9kZWwuaXNGbG93TGF5b3V0ID8gJ2lubGluZSc6ICcnIFwiIFtxdWVzdGlvbl09XCJtb2RlbFwiIHN2LW5nLWNvbW1lbnQtb3RoZXI+PC9kaXY+XG48L2Rpdj4iXX0=