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.96 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-choice.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.a11y_input_ariaRequired\" [attr.aria-label]=\"model.a11y_input_ariaLabel\"\n [attr.aria-invalid]=\"model.a11y_input_ariaInvalid\" [attr.aria-errormessage]=\"model.a11y_input_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.isShowingChoiceComment\" [class]=\"model.getCommentAreaCss(true)\"\n [style.display]=\"model.isFlowLayout ? 'inline': '' \" [question]=\"model\" [item]=\"model.selectedItem\" sv-ng-comment-choice></div>\n</div>", components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i2.SurveyCommentChoiceComponent, selector: "sv-ng-comment-choice, '[sv-ng-comment-choice]'", inputs: ["question", "item"] }], 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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJvcGRvd24tc2VsZWN0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL3JlbmRlckFzL2Ryb3Bkb3duLXNlbGVjdC9kcm9wZG93bi1zZWxlY3QuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvcmVuZGVyQXMvZHJvcGRvd24tc2VsZWN0L2Ryb3Bkb3duLXNlbGVjdC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNqRCxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQUNyRSxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sYUFBYSxDQUFDOzs7Ozs7O0FBTTlDLE1BQU0sT0FBTyx1QkFBdUI7SUFHbEMsSUFBSSxhQUFhO1FBQ2YsT0FBTyxJQUFJLENBQUMsS0FBSyxDQUFDLGFBQWEsSUFBSSxFQUFFLENBQUM7SUFDeEMsQ0FBQztJQUNELElBQUksYUFBYSxDQUFDLFFBQWE7UUFDN0IsSUFBSSxRQUFRLEtBQUssRUFBRSxFQUFFO1lBQ25CLElBQUksQ0FBQyxLQUFLLENBQUMsYUFBYSxHQUFHLFNBQVMsQ0FBQztTQUN0QzthQUFNO1lBQ0wsSUFBSSxDQUFDLEtBQUssQ0FBQyxhQUFhLEdBQUcsUUFBUSxDQUFDO1NBQ3JDO0lBQ0gsQ0FBQztJQUVELEtBQUssQ0FBQyxLQUFVO1FBQ2QsSUFBSSxDQUFDLEtBQUssQ0FBQyxPQUFPLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDNUIsQ0FBQztJQUNELEtBQUssQ0FBQyxLQUFVO1FBQ2QsSUFBSSxDQUFDLEtBQUssQ0FBQyxPQUFPLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDNUIsQ0FBQzs7cUhBbkJVLHVCQUF1Qjt5R0FBdkIsdUJBQXVCLGtHQ1JwQyxpakRBb0JNOzRGRFpPLHVCQUF1QjtrQkFKbkMsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsZ0NBQWdDO29CQUMxQyxXQUFXLEVBQUUsa0NBQWtDO2lCQUNoRDs4QkFFVSxLQUFLO3NCQUFiLEtBQUs7O0FBcUJSLHVCQUF1QixDQUFDLFFBQVEsQ0FBQyxpQkFBaUIsQ0FBQywwQkFBMEIsRUFBRSx1QkFBdUIsQ0FBQyxDQUFDO0FBQ3hHLGVBQWUsQ0FBQyxRQUFRLENBQUMsZ0JBQWdCLENBQUMsVUFBVSxFQUFFLFFBQVEsRUFBRSwwQkFBMEIsQ0FBQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCB9IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5pbXBvcnQgeyBBbmd1bGFyQ29tcG9uZW50RmFjdG9yeSB9IGZyb20gXCIuLi8uLi8uLi9jb21wb25lbnQtZmFjdG9yeVwiO1xuaW1wb3J0IHsgUmVuZGVyZXJGYWN0b3J5IH0gZnJvbSBcInN1cnZleS1jb3JlXCI7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogXCJzdi1uZy1kcm9wZG93bi1zZWxlY3QtcXVlc3Rpb25cIixcbiAgdGVtcGxhdGVVcmw6IFwiLi9kcm9wZG93bi1zZWxlY3QuY29tcG9uZW50Lmh0bWxcIlxufSlcbmV4cG9ydCBjbGFzcyBEcm9wZG93blNlbGVjdENvbXBvbmVudCB7XG4gIEBJbnB1dCgpIG1vZGVsOiBhbnk7XG5cbiAgZ2V0IGVkaXRhYmxlVmFsdWUoKSB7XG4gICAgcmV0dXJuIHRoaXMubW9kZWwucmVuZGVyZWRWYWx1ZSB8fCBcIlwiO1xuICB9XG4gIHNldCBlZGl0YWJsZVZhbHVlKG5ld1ZhbHVlOiBhbnkpIHtcbiAgICBpZiAobmV3VmFsdWUgPT09IFwiXCIpIHtcbiAgICAgIHRoaXMubW9kZWwucmVuZGVyZWRWYWx1ZSA9IHVuZGVmaW5lZDtcbiAgICB9IGVsc2Uge1xuICAgICAgdGhpcy5tb2RlbC5yZW5kZXJlZFZhbHVlID0gbmV3VmFsdWU7XG4gICAgfVxuICB9XG5cbiAgY2xpY2soZXZlbnQ6IGFueSkge1xuICAgIHRoaXMubW9kZWwub25DbGljayhldmVudCk7XG4gIH1cbiAga2V5dXAoZXZlbnQ6IGFueSkge1xuICAgIHRoaXMubW9kZWwub25LZXlVcChldmVudCk7XG4gIH1cbn1cblxuQW5ndWxhckNvbXBvbmVudEZhY3RvcnkuSW5zdGFuY2UucmVnaXN0ZXJDb21wb25lbnQoXCJkcm9wZG93bi1zZWxlY3QtcXVlc3Rpb25cIiwgRHJvcGRvd25TZWxlY3RDb21wb25lbnQpO1xuUmVuZGVyZXJGYWN0b3J5Lkluc3RhbmNlLnJlZ2lzdGVyUmVuZGVyZXIoXCJkcm9wZG93blwiLCBcInNlbGVjdFwiLCBcImRyb3Bkb3duLXNlbGVjdC1xdWVzdGlvblwiKTsiLCI8ZGl2IFtjbGFzc109XCJtb2RlbC5yZW5kZXJDc3NSb290XCI+XG4gIDxkaXYgW2NsYXNzXT1cIm1vZGVsLmNzc0NsYXNzZXMuc2VsZWN0V3JhcHBlclwiPlxuICAgIDxzZWxlY3QgKm5nSWY9XCIhbW9kZWwuaXNSZWFkT25seVwiIFthdHRyLmlkXT1cIm1vZGVsLmlucHV0SWRcIiBbKG5nTW9kZWwpXT1cImVkaXRhYmxlVmFsdWVcIlxuICAgICAgW2Rpc2FibGVkXT1cIm1vZGVsLmlzSW5wdXRSZWFkT25seVwiIChjbGljayk9XCJjbGljaygkZXZlbnQpXCIgKGtleXVwKT1cImtleXVwKCRldmVudClcIlxuICAgICAgW2NsYXNzXT1cIm1vZGVsLmdldENvbnRyb2xDbGFzcygpXCIgW2F0dHIuYXV0b2NvbXBsZXRlXT1cIm1vZGVsLmF1dG9jb21wbGV0ZVwiIFtyZXF1aXJlZF09XCJtb2RlbC5pc1JlcXVpcmVkXCJcbiAgICAgIFthdHRyLmFyaWEtcmVxdWlyZWRdPVwibW9kZWwuYTExeV9pbnB1dF9hcmlhUmVxdWlyZWRcIiBbYXR0ci5hcmlhLWxhYmVsXT1cIm1vZGVsLmExMXlfaW5wdXRfYXJpYUxhYmVsXCJcbiAgICAgIFthdHRyLmFyaWEtaW52YWxpZF09XCJtb2RlbC5hMTF5X2lucHV0X2FyaWFJbnZhbGlkXCIgW2F0dHIuYXJpYS1lcnJvcm1lc3NhZ2VdPVwibW9kZWwuYTExeV9pbnB1dF9hcmlhRXJyb3JtZXNzYWdlXCI+XG4gICAgICA8b3B0aW9uICpuZ0lmPVwibW9kZWwuYWxsb3dDbGVhclwiIHZhbHVlPVwiXCI+e3sgbW9kZWwucGxhY2Vob2xkZXIgfX08L29wdGlvbj5cbiAgICAgIDxuZy10ZW1wbGF0ZSAqbmdGb3I9XCJsZXQgaXRlbSBvZiBtb2RlbC52aXNpYmxlQ2hvaWNlc1wiXG4gICAgICAgIFtjb21wb25lbnRdPVwieyBuYW1lOiAnc3YtZHJvcGRvd24tb3B0aW9uLWl0ZW0nLCBkYXRhOiB7IGl0ZW0gfSB9XCI+PC9uZy10ZW1wbGF0ZT5cbiAgICA8L3NlbGVjdD5cbiAgICA8ZGl2ICpuZ0lmPVwibW9kZWwuaXNSZWFkT25seVwiIGRpc2FibGVkIFtjbGFzc109XCJtb2RlbC5nZXRDb250cm9sQ2xhc3MoKVwiIFthdHRyLmlkXT1cIm1vZGVsLmlucHV0SWRcIj57e1xuICAgICAgbW9kZWwucmVhZE9ubHlUZXh0IH19PC9kaXY+XG4gICAgPGRpdiAqbmdJZj1cIm1vZGVsLmNzc0NsYXNzZXMuY2hldnJvbkJ1dHRvbkljb25JZFwiIFtjbGFzc109XCJtb2RlbC5jc3NDbGFzc2VzLmNoZXZyb25CdXR0b25cIiBhcmlhLWhpZGRlbj1cInRydWVcIj5cbiAgICAgIDxzdmcgW2ljb25OYW1lXT1cIm1vZGVsLmNzc0NsYXNzZXMuY2hldnJvbkJ1dHRvbkljb25JZFwiIFtwYXJ0Q3NzXT1cIm1vZGVsLmNzc0NsYXNzZXMuY2hldnJvbkJ1dHRvblN2Z1wiXG4gICAgICAgIFtzaXplXT1cIidhdXRvJ1wiIHN2LW5nLXN2Zy1pY29uPjwvc3ZnPlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbiAgPGRpdiAqbmdJZj1cIm1vZGVsLmlzU2hvd2luZ0Nob2ljZUNvbW1lbnRcIiBbY2xhc3NdPVwibW9kZWwuZ2V0Q29tbWVudEFyZWFDc3ModHJ1ZSlcIlxuICAgIFtzdHlsZS5kaXNwbGF5XT1cIm1vZGVsLmlzRmxvd0xheW91dCA/ICdpbmxpbmUnOiAnJyBcIiBbcXVlc3Rpb25dPVwibW9kZWxcIiBbaXRlbV09XCJtb2RlbC5zZWxlY3RlZEl0ZW1cIiBzdi1uZy1jb21tZW50LWNob2ljZT48L2Rpdj5cbjwvZGl2PiJdfQ==