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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJvcGRvd24tc2VsZWN0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL3JlbmRlckFzL2Ryb3Bkb3duLXNlbGVjdC9kcm9wZG93bi1zZWxlY3QuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvcmVuZGVyQXMvZHJvcGRvd24tc2VsZWN0L2Ryb3Bkb3duLXNlbGVjdC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNqRCxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQUNyRSxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sYUFBYSxDQUFDOzs7Ozs7O0FBTTlDLE1BQU0sT0FBTyx1QkFBdUI7SUFHbEMsSUFBSSxhQUFhO1FBQ2YsT0FBTyxJQUFJLENBQUMsS0FBSyxDQUFDLGFBQWEsSUFBSSxFQUFFLENBQUM7SUFDeEMsQ0FBQztJQUNELElBQUksYUFBYSxDQUFDLFFBQWE7UUFDN0IsSUFBSSxRQUFRLEtBQUssRUFBRSxFQUFFO1lBQ25CLElBQUksQ0FBQyxLQUFLLENBQUMsYUFBYSxHQUFHLFNBQVMsQ0FBQztTQUN0QzthQUFNO1lBQ0wsSUFBSSxDQUFDLEtBQUssQ0FBQyxhQUFhLEdBQUcsUUFBUSxDQUFDO1NBQ3JDO0lBQ0gsQ0FBQztJQUVELEtBQUssQ0FBQyxLQUFVO1FBQ2QsSUFBSSxDQUFDLEtBQUssQ0FBQyxPQUFPLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDNUIsQ0FBQztJQUNELEtBQUssQ0FBQyxLQUFVO1FBQ2QsSUFBSSxDQUFDLEtBQUssQ0FBQyxPQUFPLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDNUIsQ0FBQzs7cUhBbkJVLHVCQUF1Qjt5R0FBdkIsdUJBQXVCLGtHQ1JwQywrOUNBb0JNOzRGRFpPLHVCQUF1QjtrQkFKbkMsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsZ0NBQWdDO29CQUMxQyxXQUFXLEVBQUUsa0NBQWtDO2lCQUNoRDs4QkFFVSxLQUFLO3NCQUFiLEtBQUs7O0FBcUJSLHVCQUF1QixDQUFDLFFBQVEsQ0FBQyxpQkFBaUIsQ0FBQywwQkFBMEIsRUFBRSx1QkFBdUIsQ0FBQyxDQUFDO0FBQ3hHLGVBQWUsQ0FBQyxRQUFRLENBQUMsZ0JBQWdCLENBQUMsVUFBVSxFQUFFLFFBQVEsRUFBRSwwQkFBMEIsQ0FBQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCB9IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5pbXBvcnQgeyBBbmd1bGFyQ29tcG9uZW50RmFjdG9yeSB9IGZyb20gXCIuLi8uLi8uLi9jb21wb25lbnQtZmFjdG9yeVwiO1xuaW1wb3J0IHsgUmVuZGVyZXJGYWN0b3J5IH0gZnJvbSBcInN1cnZleS1jb3JlXCI7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogXCJzdi1uZy1kcm9wZG93bi1zZWxlY3QtcXVlc3Rpb25cIixcbiAgdGVtcGxhdGVVcmw6IFwiLi9kcm9wZG93bi1zZWxlY3QuY29tcG9uZW50Lmh0bWxcIlxufSlcbmV4cG9ydCBjbGFzcyBEcm9wZG93blNlbGVjdENvbXBvbmVudCB7XG4gIEBJbnB1dCgpIG1vZGVsOiBhbnk7XG5cbiAgZ2V0IGVkaXRhYmxlVmFsdWUoKSB7XG4gICAgcmV0dXJuIHRoaXMubW9kZWwucmVuZGVyZWRWYWx1ZSB8fCBcIlwiO1xuICB9XG4gIHNldCBlZGl0YWJsZVZhbHVlKG5ld1ZhbHVlOiBhbnkpIHtcbiAgICBpZiAobmV3VmFsdWUgPT09IFwiXCIpIHtcbiAgICAgIHRoaXMubW9kZWwucmVuZGVyZWRWYWx1ZSA9IHVuZGVmaW5lZDtcbiAgICB9IGVsc2Uge1xuICAgICAgdGhpcy5tb2RlbC5yZW5kZXJlZFZhbHVlID0gbmV3VmFsdWU7XG4gICAgfVxuICB9XG5cbiAgY2xpY2soZXZlbnQ6IGFueSkge1xuICAgIHRoaXMubW9kZWwub25DbGljayhldmVudCk7XG4gIH1cbiAga2V5dXAoZXZlbnQ6IGFueSkge1xuICAgIHRoaXMubW9kZWwub25LZXlVcChldmVudCk7XG4gIH1cbn1cblxuQW5ndWxhckNvbXBvbmVudEZhY3RvcnkuSW5zdGFuY2UucmVnaXN0ZXJDb21wb25lbnQoXCJkcm9wZG93bi1zZWxlY3QtcXVlc3Rpb25cIiwgRHJvcGRvd25TZWxlY3RDb21wb25lbnQpO1xuUmVuZGVyZXJGYWN0b3J5Lkluc3RhbmNlLnJlZ2lzdGVyUmVuZGVyZXIoXCJkcm9wZG93blwiLCBcInNlbGVjdFwiLCBcImRyb3Bkb3duLXNlbGVjdC1xdWVzdGlvblwiKTsiLCI8ZGl2IFtjbGFzc109XCJtb2RlbC5yZW5kZXJDc3NSb290XCI+XG4gIDxkaXYgW2NsYXNzXT1cIm1vZGVsLmNzc0NsYXNzZXMuc2VsZWN0V3JhcHBlclwiPlxuICAgIDxzZWxlY3QgKm5nSWY9XCIhbW9kZWwuaXNSZWFkT25seVwiIFthdHRyLmlkXT1cIm1vZGVsLmlucHV0SWRcIiBbKG5nTW9kZWwpXT1cImVkaXRhYmxlVmFsdWVcIlxuICAgICAgW2Rpc2FibGVkXT1cIm1vZGVsLmlzSW5wdXRSZWFkT25seVwiIChjbGljayk9XCJjbGljaygkZXZlbnQpXCIgKGtleXVwKT1cImtleXVwKCRldmVudClcIlxuICAgICAgW2NsYXNzXT1cIm1vZGVsLmdldENvbnRyb2xDbGFzcygpXCIgW2F0dHIuYXV0b2NvbXBsZXRlXT1cIm1vZGVsLmF1dG9jb21wbGV0ZVwiIFtyZXF1aXJlZF09XCJtb2RlbC5pc1JlcXVpcmVkXCJcbiAgICAgIFthdHRyLmFyaWEtcmVxdWlyZWRdPVwibW9kZWwuYXJpYVJlcXVpcmVkXCIgW2F0dHIuYXJpYS1sYWJlbF09XCJtb2RlbC5hcmlhTGFiZWxcIlxuICAgICAgW2F0dHIuYXJpYS1pbnZhbGlkXT1cIm1vZGVsLmFyaWFJbnZhbGlkXCIgW2F0dHIuYXJpYS1lcnJvcm1lc3NhZ2VdPVwibW9kZWwuYXJpYUVycm9ybWVzc2FnZVwiPlxuICAgICAgPG9wdGlvbiAqbmdJZj1cIm1vZGVsLmFsbG93Q2xlYXJcIiB2YWx1ZT1cIlwiPnt7IG1vZGVsLnBsYWNlaG9sZGVyIH19PC9vcHRpb24+XG4gICAgICA8bmctdGVtcGxhdGUgKm5nRm9yPVwibGV0IGl0ZW0gb2YgbW9kZWwudmlzaWJsZUNob2ljZXNcIlxuICAgICAgICBbY29tcG9uZW50XT1cInsgbmFtZTogJ3N2LWRyb3Bkb3duLW9wdGlvbi1pdGVtJywgZGF0YTogeyBpdGVtIH0gfVwiPjwvbmctdGVtcGxhdGU+XG4gICAgPC9zZWxlY3Q+XG4gICAgPGRpdiAqbmdJZj1cIm1vZGVsLmlzUmVhZE9ubHlcIiBkaXNhYmxlZCBbY2xhc3NdPVwibW9kZWwuZ2V0Q29udHJvbENsYXNzKClcIiBbYXR0ci5pZF09XCJtb2RlbC5pbnB1dElkXCI+e3tcbiAgICAgIG1vZGVsLnJlYWRPbmx5VGV4dCB9fTwvZGl2PlxuICAgIDxkaXYgKm5nSWY9XCJtb2RlbC5jc3NDbGFzc2VzLmNoZXZyb25CdXR0b25JY29uSWRcIiBbY2xhc3NdPVwibW9kZWwuY3NzQ2xhc3Nlcy5jaGV2cm9uQnV0dG9uXCIgYXJpYS1oaWRkZW49XCJ0cnVlXCI+XG4gICAgICA8c3ZnIFtpY29uTmFtZV09XCJtb2RlbC5jc3NDbGFzc2VzLmNoZXZyb25CdXR0b25JY29uSWRcIiBbcGFydENzc109XCJtb2RlbC5jc3NDbGFzc2VzLmNoZXZyb25CdXR0b25TdmdcIlxuICAgICAgICBbc2l6ZV09XCInYXV0bydcIiBzdi1uZy1zdmctaWNvbj48L3N2Zz5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG4gIDxkaXYgKm5nSWY9XCJtb2RlbC5pc090aGVyU2VsZWN0ZWRcIiBbY2xhc3NdPVwibW9kZWwuZ2V0Q29tbWVudEFyZWFDc3ModHJ1ZSlcIlxuICAgIFtzdHlsZS5kaXNwbGF5XT1cIm1vZGVsLmlzRmxvd0xheW91dCA/ICdpbmxpbmUnOiAnJyBcIiBbcXVlc3Rpb25dPVwibW9kZWxcIiBzdi1uZy1jb21tZW50LW90aGVyPjwvZGl2PlxuPC9kaXY+Il19