UNPKG

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.

54 lines 13.7 kB
import { Component, Input } from "@angular/core"; import { BaseAngular } from "../base-angular"; import { AngularComponentFactory } from "../component-factory"; import * as i0 from "@angular/core"; import * as i1 from "../components/svg-icon/svg-icon.component"; import * as i2 from "../survey-string.component"; import * as i3 from "@angular/common"; export class ImagePickerItemComponent extends BaseAngular { getModel() { return this.model; } onChange(event) { if (this.question.isReadOnlyAttr) return; if (this.question.multiSelect) { if (event.target.checked) { this.question.value = this.question.value.concat(event.target.value); } else { var currValue = this.question.value; currValue.splice(this.question.value.indexOf(event.target.value), 1); this.question.value = currValue; } } else { this.question.value = event.target.value; } } ngAfterViewInit() { this.model.locImageLink.onChanged = () => { this.detectChanges(); }; } ngOnDestroy() { super.ngOnDestroy(); this.model.locImageLink.onChanged = () => { }; } } ImagePickerItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ImagePickerItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); ImagePickerItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ImagePickerItemComponent, selector: "sv-ng-imagepicker-item", inputs: { question: "question", model: "model" }, usesInheritance: true, ngImport: i0, template: "<ng-template #template>\n <div [class]=\"question.getItemClass(model)\">\n <label [class]=\"question.cssClasses.label\">\n <input [type]=\"question.inputType\" [attr.name]=\"question.questionName\" [attr.value]=\"model.value\" [id]=\"question.getItemId(model)\" [attr.aria-required]=\"question.ariaRequired\" [attr.aria-label]=\"model.locText.renderedHtml\" [attr.aria-invalid]=\"question.ariaInvalid\" [attr.aria-errormessage]=\"question.ariaErrormessage\"\n (change)=\"onChange($event)\" [checked]=\"question.isItemSelected(model)\" [disabled]=\"!question.getItemEnabled(model)\" [readonly]=\"question.isReadOnlyAttr\" [class]=\"question.cssClasses.itemControl\"\n />\n <div [class]=\"question.cssClasses.itemDecorator\">\n <div [class]=\"question.cssClasses.imageContainer\">\n <span *ngIf=\"question.cssClasses.checkedItemDecorator\" [class]=\"question.cssClasses.checkedItemDecorator\" aria-hidden=\"true\">\n <svg *ngIf=\"question.cssClasses.checkedItemSvgIconId\" [class]=\"question.cssClasses.checkedItemSvgIcon\" [iconName]=\"question.cssClasses.checkedItemSvgIconId\" [size]=\"'auto'\" sv-ng-svg-icon></svg>\n </span>\n <img *ngIf=\"model.locImageLink.renderedHtml && !model.contentNotLoaded && question.contentMode === 'image'\" [class]=\"question.cssClasses.image\" [attr.src]=\"model.locImageLink.renderedHtml\" [attr.width]=\"question.renderedImageWidth\" [attr.height]=\"question.renderedImageHeight\" [attr.alt]=\"model.locText.renderedHtml\" [style.objectFit]=\"question.imageFit\" (load)=\"question.onContentLoaded(model, $event)\" (error)=\"model.onErrorHandler()\"/>\n <video *ngIf=\"model.locImageLink.renderedHtml && !model.contentNotLoaded && question.contentMode === 'video'\" controls [class]=\"question.cssClasses.image\" [attr.src]=\"model.locImageLink.renderedHtml\" [attr.width]=\"question.renderedImageWidth\" [attr.height]=\"question.renderedImageHeight\" [style.objectFit]=\"question.imageFit\" (loadedmetadata)=\"question.onContentLoaded(model, $event)\" (error)=\"model.onErrorHandler()\"></video>\n <div *ngIf=\"!model.locImageLink.renderedHtml || model.contentNotLoaded\" [class]=\"question.cssClasses.itemNoImage\" [style.width]=\"question.renderedImageWidth + 'px'\" [style.height]=\"question.renderedImageHeight + 'px'\" [style.objectFit]=\"question.imageFit\">\n <svg *ngIf=\"question.cssClasses.itemNoImageSvgIconId\" [class]=\"question.cssClasses.itemNoImageSvgIcon\" [iconName]=\"question.cssClasses.itemNoImageSvgIconId\" [size]=\"48\" sv-ng-svg-icon></svg>\n </div>\n </div>\n <span *ngIf=\"question.showLabel\" [class]=\"question.cssClasses.itemText\" [model]=\"model.locText\" sv-ng-string></span>\n </div>\n </label>\n </div>\n</ng-template>", styles: [":host { display: none; }"], components: [{ type: i1.SvgIconComponent, selector: "'[sv-ng-svg-icon]'", inputs: ["size", "width", "height", "iconName", "partCss", "css", "title"] }, { type: i2.SurveyStringComponent, selector: "sv-ng-string, '[sv-ng-string]'", inputs: ["model"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ImagePickerItemComponent, decorators: [{ type: Component, args: [{ selector: "sv-ng-imagepicker-item", templateUrl: "./imagepicker-item.component.html", styles: [":host { display: none; }"] }] }], propDecorators: { question: [{ type: Input }], model: [{ type: Input }] } }); AngularComponentFactory.Instance.registerComponent("sv-ng-imagepicker-item", ImagePickerItemComponent); //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW1hZ2VwaWNrZXItaXRlbS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvcXVlc3Rpb25zL2ltYWdlcGlja2VyLWl0ZW0uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vc3JjL3F1ZXN0aW9ucy9pbWFnZXBpY2tlci1pdGVtLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBaUIsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNoRSxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFFOUMsT0FBTyxFQUFFLHVCQUF1QixFQUFFLE1BQU0sc0JBQXNCLENBQUM7Ozs7O0FBTS9ELE1BQU0sT0FBTyx3QkFBeUIsU0FBUSxXQUEyQjtJQUc3RCxRQUFRO1FBQ2hCLE9BQU8sSUFBSSxDQUFDLEtBQUssQ0FBQztJQUNwQixDQUFDO0lBQ0QsUUFBUSxDQUFDLEtBQVU7UUFDakIsSUFBSSxJQUFJLENBQUMsUUFBUSxDQUFDLGNBQWM7WUFBRSxPQUFPO1FBQ3pDLElBQUksSUFBSSxDQUFDLFFBQVEsQ0FBQyxXQUFXLEVBQUU7WUFDN0IsSUFBSSxLQUFLLENBQUMsTUFBTSxDQUFDLE9BQU8sRUFBRTtnQkFDeEIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxLQUFLLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsS0FBSyxDQUFDLENBQUM7YUFDdEU7aUJBQU07Z0JBQ0wsSUFBSSxTQUFTLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxLQUFLLENBQUM7Z0JBQ3BDLFNBQVMsQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxLQUFLLENBQUMsT0FBTyxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsS0FBSyxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUM7Z0JBQ3JFLElBQUksQ0FBQyxRQUFRLENBQUMsS0FBSyxHQUFHLFNBQVMsQ0FBQzthQUNqQztTQUNGO2FBQU07WUFDTCxJQUFJLENBQUMsUUFBUSxDQUFDLEtBQUssR0FBRyxLQUFLLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQztTQUMxQztJQUNILENBQUM7SUFDRCxlQUFlO1FBQ2IsSUFBSSxDQUFDLEtBQUssQ0FBQyxZQUFZLENBQUMsU0FBUyxHQUFHLEdBQUcsRUFBRTtZQUN2QyxJQUFJLENBQUMsYUFBYSxFQUFFLENBQUM7UUFDdkIsQ0FBQyxDQUFDO0lBQ0osQ0FBQztJQUNRLFdBQVc7UUFDbEIsS0FBSyxDQUFDLFdBQVcsRUFBRSxDQUFDO1FBQ3BCLElBQUksQ0FBQyxLQUFLLENBQUMsWUFBWSxDQUFDLFNBQVMsR0FBRyxHQUFHLEVBQUUsR0FBRSxDQUFDLENBQUM7SUFDL0MsQ0FBQzs7c0hBNUJVLHdCQUF3QjswR0FBeEIsd0JBQXdCLHVJQ1RyQyw0ekZBcUJjOzRGRFpELHdCQUF3QjtrQkFMcEMsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsd0JBQXdCO29CQUNsQyxXQUFXLEVBQUUsbUNBQW1DO29CQUNoRCxNQUFNLEVBQUUsQ0FBQywwQkFBMEIsQ0FBQztpQkFDckM7OEJBRVUsUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7O0FBNkJSLHVCQUF1QixDQUFDLFFBQVEsQ0FBQyxpQkFBaUIsQ0FBQyx3QkFBd0IsRUFBRSx3QkFBd0IsQ0FBQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQWZ0ZXJWaWV3SW5pdCwgQ29tcG9uZW50LCBJbnB1dCB9IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5pbXBvcnQgeyBCYXNlQW5ndWxhciB9IGZyb20gXCIuLi9iYXNlLWFuZ3VsYXJcIjtcbmltcG9ydCB7IEltYWdlSXRlbVZhbHVlLCBRdWVzdGlvbkltYWdlUGlja2VyTW9kZWwgfSBmcm9tIFwic3VydmV5LWNvcmVcIjtcbmltcG9ydCB7IEFuZ3VsYXJDb21wb25lbnRGYWN0b3J5IH0gZnJvbSBcIi4uL2NvbXBvbmVudC1mYWN0b3J5XCI7XG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6IFwic3YtbmctaW1hZ2VwaWNrZXItaXRlbVwiLFxuICB0ZW1wbGF0ZVVybDogXCIuL2ltYWdlcGlja2VyLWl0ZW0uY29tcG9uZW50Lmh0bWxcIixcbiAgc3R5bGVzOiBbXCI6aG9zdCB7IGRpc3BsYXk6IG5vbmU7IH1cIl1cbn0pXG5leHBvcnQgY2xhc3MgSW1hZ2VQaWNrZXJJdGVtQ29tcG9uZW50IGV4dGVuZHMgQmFzZUFuZ3VsYXI8SW1hZ2VJdGVtVmFsdWU+IGltcGxlbWVudHMgQWZ0ZXJWaWV3SW5pdCB7XG4gIEBJbnB1dCgpIHF1ZXN0aW9uITogUXVlc3Rpb25JbWFnZVBpY2tlck1vZGVsO1xuICBASW5wdXQoKSBtb2RlbCE6IEltYWdlSXRlbVZhbHVlO1xuICBwcm90ZWN0ZWQgZ2V0TW9kZWwoKTogSW1hZ2VJdGVtVmFsdWUge1xuICAgIHJldHVybiB0aGlzLm1vZGVsO1xuICB9XG4gIG9uQ2hhbmdlKGV2ZW50OiBhbnkpIHtcbiAgICBpZiAodGhpcy5xdWVzdGlvbi5pc1JlYWRPbmx5QXR0cikgcmV0dXJuO1xuICAgIGlmICh0aGlzLnF1ZXN0aW9uLm11bHRpU2VsZWN0KSB7XG4gICAgICBpZiAoZXZlbnQudGFyZ2V0LmNoZWNrZWQpIHtcbiAgICAgICAgdGhpcy5xdWVzdGlvbi52YWx1ZSA9IHRoaXMucXVlc3Rpb24udmFsdWUuY29uY2F0KGV2ZW50LnRhcmdldC52YWx1ZSk7XG4gICAgICB9IGVsc2Uge1xuICAgICAgICB2YXIgY3VyclZhbHVlID0gdGhpcy5xdWVzdGlvbi52YWx1ZTtcbiAgICAgICAgY3VyclZhbHVlLnNwbGljZSh0aGlzLnF1ZXN0aW9uLnZhbHVlLmluZGV4T2YoZXZlbnQudGFyZ2V0LnZhbHVlKSwgMSk7XG4gICAgICAgIHRoaXMucXVlc3Rpb24udmFsdWUgPSBjdXJyVmFsdWU7XG4gICAgICB9XG4gICAgfSBlbHNlIHtcbiAgICAgIHRoaXMucXVlc3Rpb24udmFsdWUgPSBldmVudC50YXJnZXQudmFsdWU7XG4gICAgfVxuICB9XG4gIG5nQWZ0ZXJWaWV3SW5pdCgpOiB2b2lkIHtcbiAgICB0aGlzLm1vZGVsLmxvY0ltYWdlTGluay5vbkNoYW5nZWQgPSAoKSA9PiB7XG4gICAgICB0aGlzLmRldGVjdENoYW5nZXMoKTtcbiAgICB9O1xuICB9XG4gIG92ZXJyaWRlIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgIHN1cGVyLm5nT25EZXN0cm95KCk7XG4gICAgdGhpcy5tb2RlbC5sb2NJbWFnZUxpbmsub25DaGFuZ2VkID0gKCkgPT4ge307XG4gIH1cbn1cblxuQW5ndWxhckNvbXBvbmVudEZhY3RvcnkuSW5zdGFuY2UucmVnaXN0ZXJDb21wb25lbnQoXCJzdi1uZy1pbWFnZXBpY2tlci1pdGVtXCIsIEltYWdlUGlja2VySXRlbUNvbXBvbmVudCk7IiwiPG5nLXRlbXBsYXRlICN0ZW1wbGF0ZT5cbiAgPGRpdiBbY2xhc3NdPVwicXVlc3Rpb24uZ2V0SXRlbUNsYXNzKG1vZGVsKVwiPlxuICAgIDxsYWJlbCBbY2xhc3NdPVwicXVlc3Rpb24uY3NzQ2xhc3Nlcy5sYWJlbFwiPlxuICAgICAgICA8aW5wdXQgW3R5cGVdPVwicXVlc3Rpb24uaW5wdXRUeXBlXCIgW2F0dHIubmFtZV09XCJxdWVzdGlvbi5xdWVzdGlvbk5hbWVcIiBbYXR0ci52YWx1ZV09XCJtb2RlbC52YWx1ZVwiIFtpZF09XCJxdWVzdGlvbi5nZXRJdGVtSWQobW9kZWwpXCIgW2F0dHIuYXJpYS1yZXF1aXJlZF09XCJxdWVzdGlvbi5hcmlhUmVxdWlyZWRcIiBbYXR0ci5hcmlhLWxhYmVsXT1cIm1vZGVsLmxvY1RleHQucmVuZGVyZWRIdG1sXCIgW2F0dHIuYXJpYS1pbnZhbGlkXT1cInF1ZXN0aW9uLmFyaWFJbnZhbGlkXCIgW2F0dHIuYXJpYS1lcnJvcm1lc3NhZ2VdPVwicXVlc3Rpb24uYXJpYUVycm9ybWVzc2FnZVwiXG4gICAgICAgIChjaGFuZ2UpPVwib25DaGFuZ2UoJGV2ZW50KVwiIFtjaGVja2VkXT1cInF1ZXN0aW9uLmlzSXRlbVNlbGVjdGVkKG1vZGVsKVwiIFtkaXNhYmxlZF09XCIhcXVlc3Rpb24uZ2V0SXRlbUVuYWJsZWQobW9kZWwpXCIgW3JlYWRvbmx5XT1cInF1ZXN0aW9uLmlzUmVhZE9ubHlBdHRyXCIgW2NsYXNzXT1cInF1ZXN0aW9uLmNzc0NsYXNzZXMuaXRlbUNvbnRyb2xcIlxuICAgICAgICAvPlxuICAgICAgICA8ZGl2IFtjbGFzc109XCJxdWVzdGlvbi5jc3NDbGFzc2VzLml0ZW1EZWNvcmF0b3JcIj5cbiAgICAgICAgICAgIDxkaXYgW2NsYXNzXT1cInF1ZXN0aW9uLmNzc0NsYXNzZXMuaW1hZ2VDb250YWluZXJcIj5cbiAgICAgICAgICAgICAgPHNwYW4gKm5nSWY9XCJxdWVzdGlvbi5jc3NDbGFzc2VzLmNoZWNrZWRJdGVtRGVjb3JhdG9yXCIgW2NsYXNzXT1cInF1ZXN0aW9uLmNzc0NsYXNzZXMuY2hlY2tlZEl0ZW1EZWNvcmF0b3JcIiBhcmlhLWhpZGRlbj1cInRydWVcIj5cbiAgICAgICAgICAgICAgICA8c3ZnICpuZ0lmPVwicXVlc3Rpb24uY3NzQ2xhc3Nlcy5jaGVja2VkSXRlbVN2Z0ljb25JZFwiIFtjbGFzc109XCJxdWVzdGlvbi5jc3NDbGFzc2VzLmNoZWNrZWRJdGVtU3ZnSWNvblwiIFtpY29uTmFtZV09XCJxdWVzdGlvbi5jc3NDbGFzc2VzLmNoZWNrZWRJdGVtU3ZnSWNvbklkXCIgW3NpemVdPVwiJ2F1dG8nXCIgc3Ytbmctc3ZnLWljb24+PC9zdmc+XG4gICAgICAgICAgICAgIDwvc3Bhbj5cbiAgICAgICAgICAgICAgPGltZyAqbmdJZj1cIm1vZGVsLmxvY0ltYWdlTGluay5yZW5kZXJlZEh0bWwgJiYgIW1vZGVsLmNvbnRlbnROb3RMb2FkZWQgJiYgcXVlc3Rpb24uY29udGVudE1vZGUgPT09ICdpbWFnZSdcIiBbY2xhc3NdPVwicXVlc3Rpb24uY3NzQ2xhc3Nlcy5pbWFnZVwiIFthdHRyLnNyY109XCJtb2RlbC5sb2NJbWFnZUxpbmsucmVuZGVyZWRIdG1sXCIgW2F0dHIud2lkdGhdPVwicXVlc3Rpb24ucmVuZGVyZWRJbWFnZVdpZHRoXCIgW2F0dHIuaGVpZ2h0XT1cInF1ZXN0aW9uLnJlbmRlcmVkSW1hZ2VIZWlnaHRcIiBbYXR0ci5hbHRdPVwibW9kZWwubG9jVGV4dC5yZW5kZXJlZEh0bWxcIiAgW3N0eWxlLm9iamVjdEZpdF09XCJxdWVzdGlvbi5pbWFnZUZpdFwiIChsb2FkKT1cInF1ZXN0aW9uLm9uQ29udGVudExvYWRlZChtb2RlbCwgJGV2ZW50KVwiIChlcnJvcik9XCJtb2RlbC5vbkVycm9ySGFuZGxlcigpXCIvPlxuICAgICAgICAgICAgICA8dmlkZW8gKm5nSWY9XCJtb2RlbC5sb2NJbWFnZUxpbmsucmVuZGVyZWRIdG1sICYmICFtb2RlbC5jb250ZW50Tm90TG9hZGVkICYmIHF1ZXN0aW9uLmNvbnRlbnRNb2RlID09PSAndmlkZW8nXCIgY29udHJvbHMgW2NsYXNzXT1cInF1ZXN0aW9uLmNzc0NsYXNzZXMuaW1hZ2VcIiBbYXR0ci5zcmNdPVwibW9kZWwubG9jSW1hZ2VMaW5rLnJlbmRlcmVkSHRtbFwiIFthdHRyLndpZHRoXT1cInF1ZXN0aW9uLnJlbmRlcmVkSW1hZ2VXaWR0aFwiIFthdHRyLmhlaWdodF09XCJxdWVzdGlvbi5yZW5kZXJlZEltYWdlSGVpZ2h0XCIgW3N0eWxlLm9iamVjdEZpdF09XCJxdWVzdGlvbi5pbWFnZUZpdFwiIChsb2FkZWRtZXRhZGF0YSk9XCJxdWVzdGlvbi5vbkNvbnRlbnRMb2FkZWQobW9kZWwsICRldmVudClcIiAoZXJyb3IpPVwibW9kZWwub25FcnJvckhhbmRsZXIoKVwiPjwvdmlkZW8+XG4gICAgICAgICAgICAgIDxkaXYgKm5nSWY9XCIhbW9kZWwubG9jSW1hZ2VMaW5rLnJlbmRlcmVkSHRtbCB8fCBtb2RlbC5jb250ZW50Tm90TG9hZGVkXCIgW2NsYXNzXT1cInF1ZXN0aW9uLmNzc0NsYXNzZXMuaXRlbU5vSW1hZ2VcIiBbc3R5bGUud2lkdGhdPVwicXVlc3Rpb24ucmVuZGVyZWRJbWFnZVdpZHRoICsgJ3B4J1wiIFtzdHlsZS5oZWlnaHRdPVwicXVlc3Rpb24ucmVuZGVyZWRJbWFnZUhlaWdodCArICdweCdcIiBbc3R5bGUub2JqZWN0Rml0XT1cInF1ZXN0aW9uLmltYWdlRml0XCI+XG4gICAgICAgICAgICAgICAgPHN2ZyAqbmdJZj1cInF1ZXN0aW9uLmNzc0NsYXNzZXMuaXRlbU5vSW1hZ2VTdmdJY29uSWRcIiBbY2xhc3NdPVwicXVlc3Rpb24uY3NzQ2xhc3Nlcy5pdGVtTm9JbWFnZVN2Z0ljb25cIiBbaWNvbk5hbWVdPVwicXVlc3Rpb24uY3NzQ2xhc3Nlcy5pdGVtTm9JbWFnZVN2Z0ljb25JZFwiIFtzaXplXT1cIjQ4XCIgc3Ytbmctc3ZnLWljb24+PC9zdmc+XG4gICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICA8c3BhbiAqbmdJZj1cInF1ZXN0aW9uLnNob3dMYWJlbFwiIFtjbGFzc109XCJxdWVzdGlvbi5jc3NDbGFzc2VzLml0ZW1UZXh0XCIgW21vZGVsXT1cIm1vZGVsLmxvY1RleHRcIiBzdi1uZy1zdHJpbmc+PC9zcGFuPlxuICAgICAgICA8L2Rpdj5cbiAgICA8L2xhYmVsPlxuICA8L2Rpdj5cbjwvbmctdGVtcGxhdGU+Il19