ngx-surveys
Version:
Angular 18+ survey / form builder
2,803 lines • 246 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, Directive, EventEmitter, Component, Input, Output, ViewEncapsulation, forwardRef, ViewChild, Pipe, Inject, ViewChildren, NgModule } from '@angular/core';
import * as _ from 'lodash';
import { ReplaySubject, Observable } from 'rxjs';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2 from '@angular/forms';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import * as i3$1 from '@angular/material/button';
import { MatButtonModule } from '@angular/material/button';
import * as i5$3 from '@angular/material/stepper';
import { MatStepperModule } from '@angular/material/stepper';
import * as i3 from '@angular/material/input';
import { MatInputModule } from '@angular/material/input';
import * as i4 from '@angular/material/form-field';
import * as i6 from '@angular/material/tooltip';
import { MatTooltipModule } from '@angular/material/tooltip';
import * as i2$1 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import * as i5 from '@angular/cdk/text-field';
import * as moment from 'moment';
import moment__default from 'moment';
import * as i5$1 from '@angular/material/datepicker';
import { MatDatepickerModule } from '@angular/material/datepicker';
import * as i6$1 from 'ngx-mask';
import { NgxMaskModule } from 'ngx-mask';
import * as i2$2 from '@angular/material/button-toggle';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import * as i3$2 from '@angular/material/checkbox';
import { MatCheckboxModule } from '@angular/material/checkbox';
import * as i4$1 from '@angular/material/radio';
import { MatRadioModule } from '@angular/material/radio';
import * as i2$3 from '@angular/material/list';
import { MatListModule } from '@angular/material/list';
import * as i3$3 from '@angular/material/select';
import { MatSelectModule } from '@angular/material/select';
import * as i4$2 from '@angular/material/core';
import * as i8 from '@angular/material/table';
import { MatTableDataSource, MatTableModule } from '@angular/material/table';
import * as i9 from '@angular/cdk/drag-drop';
import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
import * as i11 from '@angular/material/slide-toggle';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import * as i5$2 from 'ngx-file-drop';
import { NgxFileDropModule } from 'ngx-file-drop';
import * as i3$4 from '@angular/material/progress-bar';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import * as WaveSurfer from 'wavesurfer.js';
import RecordRTC, { StereoAudioRecorder } from 'recordrtc';
import { MatMomentDateModule } from '@angular/material-moment-adapter';
import * as i8$1 from '@angular/material/card';
import { MatCardModule } from '@angular/material/card';
import { MatMenuModule } from '@angular/material/menu';
import * as i1$1 from '@angular/material/dialog';
import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
import { STEPPER_GLOBAL_OPTIONS } from '@angular/cdk/stepper';
class NgxSurveyService {
constructor() {
this.onFilesSelected = new ReplaySubject(1);
this.errorMessages = {
require: "Field required",
minLength: "Must be more than {value} characters",
maxLength: "Must be less than {value} characters",
setLength: "{value} Digit Number Required",
numeric: "The entry can only contain numbers",
email: "Not valid email"
};
}
initForm(form, formValues) {
//console.log(form, formValues);
form.forEach(section => {
if (section.name) {
const groupedItems = _.groupBy(_.filter(section.items, item => !item.name), item => item.type);
_.each(groupedItems, (items, type) => {
if (type) {
section.items[_.indexOf(section.items, _.first(items))] = {
type: type,
items: items,
name: section.name,
isSectionValueItem: true,
};
_.each(items, (item) => {
section.items = _.without(section.items, item);
});
}
});
}
});
const visibilityValuesInTableConvert = (item) => {
if (item.visibilityValuesInTable) {
const tableItem = _.first(_.map(form, (section) => {
return _.find(section.items, (item) => {
if (!item.items) {
return item.actionUpdatesTableValue;
}
else {
return _.find(item.items, item => item.actionUpdatesTableValue);
}
});
}));
const newValues = [];
if (tableItem) {
_.each(item.visibilityValuesInTable, (val) => {
let valItem = _.find(tableItem.items, item => item.title === val);
newValues.push(valItem && valItem.optionValue ? valItem.optionValue : val);
});
}
item.visibilityValuesInTable = newValues;
}
};
_.each(form, (section) => {
visibilityValuesInTableConvert(section);
_.each(section.items, (item) => {
visibilityValuesInTableConvert(item);
if (item.type === 'radio' && section.allowsMultipleSelection) {
item.multiple = true;
}
if (item.multiple && _.isString(item.value)) {
if (_.isString(item.value)) {
try {
item.value = JSON.parse(item.value);
}
catch (err) {
console.log(err);
}
}
}
if (formValues[item.name] !== undefined) {
item.value = formValues[item.name];
if (item.type === 'date' && !_.isString(item.value)) {
//item.value = this.getDateStr(formValues[item.name]);
}
//item.readOnly = item.readOnly || _.contains(this.readOnlyFields, item.name);
if (item.multiple && _.isString(item.value)) {
item.value = JSON.parse(item.value);
}
if (item.type === 'numericRating' && _.isString(item.value)) {
item.value = parseInt(item.value);
}
}
if (item.isSectionValueItem && section.sectionValidation && !item.fieldValidation) {
item.fieldValidation = section.sectionValidation;
}
});
if (section.subtitle) {
section.subtitle = section.subtitle.replace(new RegExp('\n', 'g'), '<br />');
}
});
//console.log(form);
return form;
}
isItemVisible(form, section, item) {
let res = true;
if (item.visibilityValuesInSection && item.visibilityValuesInSection.length) {
let sectionItems = section.items?.filter(item => item.isSectionValueItem).length ? section.items?.filter(item => item.isSectionValueItem) : section.items?.filter(item => item.actionUpdatesSectionValue);
res = sectionItems.filter((sItem) => {
const valArr = _.isArray(sItem.value) ? sItem.value : [sItem.value];
return valArr.find(val => item.visibilityValuesInSection.find(arr => arr.indexOf(val) >= 0));
}).length === item.visibilityValuesInSection.length;
}
if (item.visibilityValuesInTable && item.visibilityValuesInTable.length) {
let tableItem = _.first(_.map(form, (section) => {
return _.find(section.items, (item) => {
if (!item.items) {
return item.actionUpdatesTableValue;
}
else {
return _.find(item.items, item => item.actionUpdatesTableValue);
}
});
}));
if (tableItem) {
res = item.visibilityValuesInTable.indexOf(tableItem.value) >= 0;
}
}
if (section.visibilityValuesInTable && section.visibilityValuesInTable.length) {
let sectionTableItem = _.first(_.map(form, (section) => {
return _.find(section.items, (item) => {
if (!item.items) {
return item.actionReloadsTable;
}
else {
return _.find(item.items, item => item.actionReloadsTable);
}
});
}));
if (sectionTableItem) {
res = section.visibilityValuesInTable.indexOf(sectionTableItem.value) >= 0;
}
}
return res;
}
;
isSectionVisible(form, section) {
let res = false;
_.each(section.items, (item) => {
if (this.isItemVisible(form, section, item)) {
res = true;
}
});
return !section.items ? this.isItemVisible(form, section, {}) : res;
}
;
getErrors(item) {
if (item.fieldValidations) {
let errors = [];
_.each(item.fieldValidations.rules, (rule) => {
const err = this.checkValidationRule(item, rule);
if (err) {
errors.push(err);
}
});
errors = _.flatten(errors);
if (item.fieldValidations.type === 'OR') {
return errors.length === item.fieldValidations.rules.length ? [errors[errors.length - 1]] : [];
}
return errors;
}
const err = this.checkValidationRule(item, item.fieldValidation);
return err ? [err] : [];
}
;
checkValidationRule(item, rule) {
let res;
let errorMessages = _.clone(this.errorMessages);
//console.log(item);
if (rule && rule.minLength >= 0 && rule.minLength === rule.maxLength) {
rule.setLength = rule.maxLength;
delete rule.minLength;
delete rule.maxLength;
}
let validationObj = rule || item.sectionValidation;
let isNumericError = !/^\d+$/.test(item.value) && validationObj && validationObj.numeric;
if (!validationObj) {
//console.log('!validationObj', item);
}
if (item.type === 'label') {
return res;
}
_.each(validationObj, (param, name) => {
if (name === 'minCount') {
name = 'minLength';
}
let message = '';
let itemValue = '' + item.value;
switch (name) {
case "setLength":
if (item.value === undefined || (item.value && itemValue.length !== param) || isNumericError) {
message = errorMessages[name].replace('{value}', param);
if (item.keyboardType && item.keyboardType === 'number-pad') {
message = message.replace('characters', 'digits');
}
res = {
type: name,
message: message
};
}
else if (item.value === null) {
//console.log(item);
res = {
type: 'require',
message: errorMessages.require
};
}
break;
case "minLength":
if (!_.isObject(item.value) && (item.value === null || item.value === undefined || !item.value || (item.value?.length || 0) < param || isNumericError)) {
//console.log(isNumericError, param, item, rule, name);
if (param > 1) {
message = errorMessages[name].replace('{value}', param);
if (item.keyboardType && item.keyboardType === 'number-pad') {
message = message.replace('characters', 'digits');
}
res = {
type: name,
message: message
};
}
else if (!item.value || !item?.value?.length) {
//console.log(item);
res = {
type: 'require',
message: errorMessages.require
};
}
else if (isNumericError) {
res = {
type: 'numeric',
message: errorMessages.numeric
};
}
}
if (item.name === 'email' && !res?.length) {
let re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if (!re.test(item.value)) {
res = {
type: 'email',
message: errorMessages.email
};
}
}
break;
case "optionKeyValues":
if (!item.value || !item.value.length) {
res = {
type: 'require',
message: errorMessages.require
};
}
else {
if (item.value.find(op => !op.optionValue || !op.label)) {
res = {
type: 'require',
message: 'All options should have Value and Labels defined'
};
}
}
break;
default:
break;
}
});
return res;
}
;
getValue(form, validateAll = false) {
let value = {};
let valid = true;
let firstError;
_.each(_.filter(form, (section) => this.isSectionVisible(form, section)), (section) => {
_.each(_.filter(section.items, (item) => this.isItemVisible(form, section, item)), (item) => {
//value[item.name] = _.isArray(item.value) ? JSON.stringify(item.value) : item.value;
value[item.name] = item.value;
if (validateAll) {
item.errors = this.getErrors(item);
if (item.errors && item.errors.length) {
if (!firstError) {
firstError = item;
}
valid = false;
}
}
});
});
return {
valid,
value,
firstError
};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: NgxSurveyService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: NgxSurveyService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: NgxSurveyService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: () => [] });
class FormItemDirective {
constructor(viewContainerRef) {
this.viewContainerRef = viewContainerRef;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FormItemDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.12", type: FormItemDirective, selector: "[form-item-host]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FormItemDirective, decorators: [{
type: Directive,
args: [{
selector: '[form-item-host]',
}]
}], ctorParameters: () => [{ type: i0.ViewContainerRef }] });
class FormItem {
}
class SurveyFile {
}
class SurveyErrorStateMatcher {
isErrorState(control, form) {
return !(this.item && !(this.item.errors && this.item.errors.length));
}
}
class ItemOptionStateMatcher {
isErrorState(control, form) {
//console.log(control);
return control && !control.value;
}
}
class FormItemString extends FormItem {
}
class FormItemStringComponent {
constructor() {
this.editable = true;
this.changes = new EventEmitter();
this.matcher = new SurveyErrorStateMatcher();
this.maxLabelLength = 60;
}
ngOnInit() {
this.matcher.item = this.item;
}
ngOnChanges() {
this.matcher.item = this.item;
}
checkRequired(placeholder) {
if (placeholder === 'Required') {
return true;
}
}
onValueChanges(item) {
this.changes.emit(item);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FormItemStringComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: FormItemStringComponent, selector: "ammo-form-item-string", inputs: { item: "item", editable: "editable" }, outputs: { changes: "changes" }, usesOnChanges: true, ngImport: i0, template: "\n<mat-form-field>\n <label class=\"long-label-text\" *ngIf=\"item.label.length>=maxLabelLength\" [ngClass]=\"{'has-error':item.errors && item.errors.length}\">{{item.label}} <span *ngIf=\"item.required\" class=\"required-asterix\">*</span></label>\n <input #inputField\n matInput\n [type]=\"item.style || 'text'\"\n [disabled]=\"!editable\"\n [attr.id]=\"item.name\"\n [placeholder]=\"item.label.length<maxLabelLength ? item.label : ''\"\n [(ngModel)]=\"item.value\"\n [minlength]=\"item.fieldValidation ? item.fieldValidation.minLength : undefined \"\n (ngModelChange)=\"onValueChanges(item)\"\n [errorStateMatcher]=\"matcher\"\n [required]=\"item.required\"\n >\n <mat-error *ngIf=\"item.errors && item.errors.length\">\n <div *ngFor=\"let error of item.errors\">{{error.message}}</div>\n </mat-error>\n <mat-hint align=\"start\" *ngIf=\"!(item.errors && item.errors.length) && item.hint?.length < maxLabelLength\"><strong>{{item.hint}}</strong> </mat-hint>\n\n</mat-form-field>\n<small class=\"long-hint\" *ngIf=\"!(item.errors && item.errors.length) && item.hint?.length >= maxLabelLength\"><strong>{{item.hint}}</strong> </small>\n\n", styles: [".mat-mdc-form-field{display:block}.long-label-text{margin-bottom:5px;display:block}.long-hint{margin-top:-14px;display:inline-block;margin-bottom:10px;color:#0000008a;font-size:75%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FormItemStringComponent, decorators: [{
type: Component,
args: [{ selector: 'ammo-form-item-string', template: "\n<mat-form-field>\n <label class=\"long-label-text\" *ngIf=\"item.label.length>=maxLabelLength\" [ngClass]=\"{'has-error':item.errors && item.errors.length}\">{{item.label}} <span *ngIf=\"item.required\" class=\"required-asterix\">*</span></label>\n <input #inputField\n matInput\n [type]=\"item.style || 'text'\"\n [disabled]=\"!editable\"\n [attr.id]=\"item.name\"\n [placeholder]=\"item.label.length<maxLabelLength ? item.label : ''\"\n [(ngModel)]=\"item.value\"\n [minlength]=\"item.fieldValidation ? item.fieldValidation.minLength : undefined \"\n (ngModelChange)=\"onValueChanges(item)\"\n [errorStateMatcher]=\"matcher\"\n [required]=\"item.required\"\n >\n <mat-error *ngIf=\"item.errors && item.errors.length\">\n <div *ngFor=\"let error of item.errors\">{{error.message}}</div>\n </mat-error>\n <mat-hint align=\"start\" *ngIf=\"!(item.errors && item.errors.length) && item.hint?.length < maxLabelLength\"><strong>{{item.hint}}</strong> </mat-hint>\n\n</mat-form-field>\n<small class=\"long-hint\" *ngIf=\"!(item.errors && item.errors.length) && item.hint?.length >= maxLabelLength\"><strong>{{item.hint}}</strong> </small>\n\n", styles: [".mat-mdc-form-field{display:block}.long-label-text{margin-bottom:5px;display:block}.long-hint{margin-top:-14px;display:inline-block;margin-bottom:10px;color:#0000008a;font-size:75%}\n"] }]
}], ctorParameters: () => [], propDecorators: { item: [{
type: Input
}], editable: [{
type: Input
}], changes: [{
type: Output
}] } });
class StarRatingComponent {
constructor() {
this.ratingUpdated = new EventEmitter();
this.snackBarDuration = 2000;
this.ratingArr = [];
}
ngOnInit() {
for (let index = 0; index < this.starCount; index++) {
this.ratingArr.push(index);
}
}
onClick(rating) {
if (this.readOnly) {
return false;
}
this.rating = rating;
this.ratingUpdated.emit(rating);
return false;
}
showIcon(index) {
if (this.rating >= index + 1) {
return 'star';
}
else {
return 'star_border';
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: StarRatingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: StarRatingComponent, selector: "mat-star-rating", inputs: { rating: "rating", starCount: "starCount", color: "color", readOnly: "readOnly" }, outputs: { ratingUpdated: "ratingUpdated" }, ngImport: i0, template: "<button mat-icon-button [color]=\"color\" *ngFor=\"let ratingId of ratingArr;index as i\" [id]=\"'star_'+i\" (click)=\"onClick(i+1)\" [matTooltip]=\"ratingId+1\" matTooltipPosition=\"above\">\n <mat-icon>\n {{showIcon(i)}}\n </mat-icon>\n</button>\n<mat-error *ngIf=\"starCount == null || starCount == 0\">\n Star count is <strong>required</strong> and cannot be zero\n</mat-error>\n", styles: ["button{height:20px;width:25px;line-height:20px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: StarRatingComponent, decorators: [{
type: Component,
args: [{ selector: 'mat-star-rating', encapsulation: ViewEncapsulation.Emulated, template: "<button mat-icon-button [color]=\"color\" *ngFor=\"let ratingId of ratingArr;index as i\" [id]=\"'star_'+i\" (click)=\"onClick(i+1)\" [matTooltip]=\"ratingId+1\" matTooltipPosition=\"above\">\n <mat-icon>\n {{showIcon(i)}}\n </mat-icon>\n</button>\n<mat-error *ngIf=\"starCount == null || starCount == 0\">\n Star count is <strong>required</strong> and cannot be zero\n</mat-error>\n", styles: ["button{height:20px;width:25px;line-height:20px}\n"] }]
}], ctorParameters: () => [], propDecorators: { rating: [{
type: Input
}], starCount: [{
type: Input
}], color: [{
type: Input
}], readOnly: [{
type: Input
}], ratingUpdated: [{
type: Output
}] } });
var StarRatingColor;
(function (StarRatingColor) {
StarRatingColor["primary"] = "primary";
StarRatingColor["accent"] = "accent";
StarRatingColor["warn"] = "warn";
})(StarRatingColor || (StarRatingColor = {}));
class FormItemRating extends FormItem {
}
class FormItemRatingComponent {
constructor() {
this.editable = true;
this.changes = new EventEmitter();
}
ngOnInit() {
}
onRatingChanged(value) {
if (!this.editable) {
return;
}
this.item.value = value;
this.changes.emit(this.item);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FormItemRatingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: FormItemRatingComponent, selector: "ammo-form-item-rating", inputs: { item: "item", editable: "editable" }, outputs: { changes: "changes" }, ngImport: i0, template: "<div class=\"form-group\">\n <div class=\"col-xs-12 rating-set\">\n <div class=\"rating-set-title\">{{item.label}}</div>\n <div class=\"rating-set-stars\">\n <mat-star-rating\n [rating]=\"item.value\"\n [starCount]=\"5\"\n [color]=\"editable ? 'primary' : 'muted'\"\n [readOnly]=\"!editable\"\n (ratingUpdated)=\"onRatingChanged($event)\"\n ></mat-star-rating>\n </div>\n <mat-error *ngIf=\"item.errors && item.errors.length\">\n <div *ngFor=\"let error of item.errors\">{{error.message}}</div>\n </mat-error>\n <mat-hint align=\"start\" *ngIf=\"!(item.errors && item.errors.length)\"><strong>{{item.hint}}</strong> </mat-hint>\n </div>\n</div>\n", styles: [".rating-set{display:block;padding:20;text-align:center}.rating-set-title{font-size:.875rem}:host ::ng-deep button.mat-icon-button{height:auto}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: StarRatingComponent, selector: "mat-star-rating", inputs: ["rating", "starCount", "color", "readOnly"], outputs: ["ratingUpdated"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FormItemRatingComponent, decorators: [{
type: Component,
args: [{ selector: 'ammo-form-item-rating', template: "<div class=\"form-group\">\n <div class=\"col-xs-12 rating-set\">\n <div class=\"rating-set-title\">{{item.label}}</div>\n <div class=\"rating-set-stars\">\n <mat-star-rating\n [rating]=\"item.value\"\n [starCount]=\"5\"\n [color]=\"editable ? 'primary' : 'muted'\"\n [readOnly]=\"!editable\"\n (ratingUpdated)=\"onRatingChanged($event)\"\n ></mat-star-rating>\n </div>\n <mat-error *ngIf=\"item.errors && item.errors.length\">\n <div *ngFor=\"let error of item.errors\">{{error.message}}</div>\n </mat-error>\n <mat-hint align=\"start\" *ngIf=\"!(item.errors && item.errors.length)\"><strong>{{item.hint}}</strong> </mat-hint>\n </div>\n</div>\n", styles: [".rating-set{display:block;padding:20;text-align:center}.rating-set-title{font-size:.875rem}:host ::ng-deep button.mat-icon-button{height:auto}\n"] }]
}], ctorParameters: () => [], propDecorators: { item: [{
type: Input
}], editable: [{
type: Input
}], changes: [{
type: Output
}] } });
class FormItemText extends FormItem {
}
class FormItemTextComponent {
constructor() {
this.editable = true;
this.changes = new EventEmitter();
this.matcher = new SurveyErrorStateMatcher();
this.maxLabelLength = 60;
}
ngOnInit() {
this.matcher.item = this.item;
}
ngOnChanges() {
this.matcher.item = this.item;
}
checkRequired(placeholder) {
if (placeholder === 'Required') {
return true;
}
}
onValueChanges(item) {
this.changes.emit(item);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FormItemTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: FormItemTextComponent, selector: "ammo-form-item-text", inputs: { item: "item", editable: "editable" }, outputs: { changes: "changes" }, usesOnChanges: true, ngImport: i0, template: "\n<mat-form-field class=\"example-full-width\">\n <label class=\"long-label-text\" *ngIf=\"item.label.length>=maxLabelLength\" [ngClass]=\"{'has-error':item.errors && item.errors.length}\">{{item.label}} <span *ngIf=\"item.required\" class=\"required-asterix\">*</span></label>\n <textarea matInput\n [disabled]=\"!editable\"\n [attr.id]=\"item.name\"\n [placeholder]=\"item.label.length<maxLabelLength ? item.label : ''\"\n [(ngModel)]=\"item.value\"\n (ngModelChange)=\"onValueChanges(item)\"\n [errorStateMatcher]=\"matcher\"\n cdkTextareaAutosize\n #autosize=\"cdkTextareaAutosize\"\n cdkAutosizeMinRows=\"1\"\n [required]=\"item.required\"\n ></textarea>\n <mat-error *ngIf=\"item.errors && item.errors.length\">\n <div *ngFor=\"let error of item.errors\">{{error.message}}</div>\n </mat-error>\n <mat-hint align=\"start\" *ngIf=\"!(item.errors && item.errors.length) && item.hint?.length < maxLabelLength\"><strong>{{item.hint}}</strong> </mat-hint>\n\n</mat-form-field>\n<small class=\"long-hint\" *ngIf=\"!(item.errors && item.errors.length) && item.hint?.length >= maxLabelLength\"><strong>{{item.hint}}</strong> </small>\n", styles: [".mat-mdc-form-field{display:block}.long-label-text{margin-bottom:5px;display:block}.long-hint{margin-top:-14px;display:inline-block;margin-bottom:10px;color:#0000008a;font-size:75%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i5.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FormItemTextComponent, decorators: [{
type: Component,
args: [{ selector: 'ammo-form-item-text', template: "\n<mat-form-field class=\"example-full-width\">\n <label class=\"long-label-text\" *ngIf=\"item.label.length>=maxLabelLength\" [ngClass]=\"{'has-error':item.errors && item.errors.length}\">{{item.label}} <span *ngIf=\"item.required\" class=\"required-asterix\">*</span></label>\n <textarea matInput\n [disabled]=\"!editable\"\n [attr.id]=\"item.name\"\n [placeholder]=\"item.label.length<maxLabelLength ? item.label : ''\"\n [(ngModel)]=\"item.value\"\n (ngModelChange)=\"onValueChanges(item)\"\n [errorStateMatcher]=\"matcher\"\n cdkTextareaAutosize\n #autosize=\"cdkTextareaAutosize\"\n cdkAutosizeMinRows=\"1\"\n [required]=\"item.required\"\n ></textarea>\n <mat-error *ngIf=\"item.errors && item.errors.length\">\n <div *ngFor=\"let error of item.errors\">{{error.message}}</div>\n </mat-error>\n <mat-hint align=\"start\" *ngIf=\"!(item.errors && item.errors.length) && item.hint?.length < maxLabelLength\"><strong>{{item.hint}}</strong> </mat-hint>\n\n</mat-form-field>\n<small class=\"long-hint\" *ngIf=\"!(item.errors && item.errors.length) && item.hint?.length >= maxLabelLength\"><strong>{{item.hint}}</strong> </small>\n", styles: [".mat-mdc-form-field{display:block}.long-label-text{margin-bottom:5px;display:block}.long-hint{margin-top:-14px;display:inline-block;margin-bottom:10px;color:#0000008a;font-size:75%}\n"] }]
}], ctorParameters: () => [], propDecorators: { item: [{
type: Input
}], editable: [{
type: Input
}], changes: [{
type: Output
}] } });
class FormItemDate extends FormItem {
}
const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => FormItemDateComponent),
multi: true
};
const noop = () => {
};
class FormItemDateComponent {
constructor() {
this.editable = true;
this.changes = new EventEmitter();
this.matcher = new SurveyErrorStateMatcher();
//Placeholders for the callbacks which are later provided
//by the Control Value Accessor
this.onTouchedCallback = noop;
this.onChangeCallback = noop;
}
ngOnInit() {
this.matcher.item = this.item;
if (this.item.value) {
this.value = moment__default(this.item.value.toString()); //
}
this.onTouchedCallback();
}
ngAfterViewInit() {
//console.log(this.inputField);
this.inputField.value = '5/14/2021';
}
ngOnChanges() {
this.matcher.item = this.item;
}
checkRequired(placeholder) {
if (placeholder === 'Required') {
return true;
}
}
onValueChanges(ev) {
const val = ev.value ? ev.value.format('L') : '';
this.item.value = val;
this.changes.emit(this.item);
}
//get accessor
get value() {
return this.innerValue;
}
;
get textValue() {
return this.value ? this.value.format('L') : '';
}
;
//set accessor including call the onchange callback
set value(v) {
if (v !== this.innerValue) {
this.innerValue = v;
}
}
//Occured value changed from module
writeValue(value) {
if (value !== this.innerValue) {
this.innerValue = value;
}
}
registerOnChange(fn) {
this.onChangeCallback = fn;
}
registerOnTouched(fn) {
this.onTouchedCallback = fn;
}
onChange(event) {
this.value = event;
this.onBlur();
}
onBlur() {
this.onChangeCallback(this.innerValue);
}
todate(value) {
this.value = value ? moment__default(value) : '';
this.onValueChanges({
value: this.value
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FormItemDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: FormItemDateComponent, selector: "ammo-form-item-date", inputs: { item: "item", editable: "editable" }, outputs: { changes: "changes" }, providers: [
CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR
], viewQueries: [{ propertyName: "inputField", first: true, predicate: ["inputField"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"form-group\">\n <mat-form-field class=\"example-full-width\">\n <input type=\"hidden\" [matDatepicker]=\"picker\" [(ngModel)]='value' (dateChange)=\"onValueChanges($event)\">\n <input matInput #inputField\n [name]=\"item.name\"\n [disabled]=\"!editable || (value && item.readOnly)\"\n [attr.id]=\"item.name\"\n [placeholder]=\"item.label\"\n (change)='todate($event.target.value)'\n [ngModel]=\"textValue | date:'MM/dd/yyyy'\"\n [errorStateMatcher]=\"matcher\"\n [required]=\"item.required\"\n mask=\"M0/d0/0000\"\n (blur)=\"onBlur()\"\n >\n <mat-error *ngIf=\"item.errors && item.errors.length\">\n <div *ngFor=\"let error of item.errors\">{{error.message}}</div>\n </mat-error>\n <mat-hint align=\"start\" *ngIf=\"!(item.errors && item.errors.length)\"><strong>{{item.hint}}</strong> </mat-hint>\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker (selectedChanged)=\"onChange($event)\" #picker></mat-datepicker>\n </mat-form-field>\n</div>\n\n", styles: [".example-full-width{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i6$1.MaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "triggerOnMaskChange"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FormItemDateComponent, decorators: [{
type: Component,
args: [{ selector: 'ammo-form-item-date', providers: [
CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR
], template: "<div class=\"form-group\">\n <mat-form-field class=\"example-full-width\">\n <input type=\"hidden\" [matDatepicker]=\"picker\" [(ngModel)]='value' (dateChange)=\"onValueChanges($event)\">\n <input matInput #inputField\n [name]=\"item.name\"\n [disabled]=\"!editable || (value && item.readOnly)\"\n [attr.id]=\"item.name\"\n [placeholder]=\"item.label\"\n (change)='todate($event.target.value)'\n [ngModel]=\"textValue | date:'MM/dd/yyyy'\"\n [errorStateMatcher]=\"matcher\"\n [required]=\"item.required\"\n mask=\"M0/d0/0000\"\n (blur)=\"onBlur()\"\n >\n <mat-error *ngIf=\"item.errors && item.errors.length\">\n <div *ngFor=\"let error of item.errors\">{{error.message}}</div>\n </mat-error>\n <mat-hint align=\"start\" *ngIf=\"!(item.errors && item.errors.length)\"><strong>{{item.hint}}</strong> </mat-hint>\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker (selectedChanged)=\"onChange($event)\" #picker></mat-datepicker>\n </mat-form-field>\n</div>\n\n", styles: [".example-full-width{width:100%}\n"] }]
}], ctorParameters: () => [], propDecorators: { inputField: [{
type: ViewChild,
args: ['inputField', { static: true }]
}], item: [{
type: Input
}], editable: [{
type: Input
}], changes: [{
type: Output
}] } });
class FormItemSegments extends FormItem {
constructor() {
super(...arguments);
this.hasOptions = true;
}
}
class FormItemSegmentsComponent {
constructor() {
this.editable = true;
this.changes = new EventEmitter();
}
ngOnInit() {
}
onSelectionChange(value) {
this.item.value = value;
this.changes.emit(this.item);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FormItemSegmentsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: FormItemSegmentsComponent, selector: "ammo-form-item-segments", inputs: { item: "item", editable: "editable" }, outputs: { changes: "changes" }, ngImport: i0, template: "<div class=\"form-group\">\n <mat-label *ngIf=\"item.label\">{{item.label}}</mat-label>\n <mat-button-toggle-group\n aria-label=\"type of credits\"\n [ngClass]=\"{'has-error':item.errors && item.errors.length}\"\n value=\"{{item.value}}\">\n <mat-button-toggle\n *ngFor=\"let segment of item.segments\"\n [disabled]=\"!editable\"\n (click)=\"editable ? onSelectionChange(segment.optionValue) : false\"\n [value]=\"segment.value\"\n [checked]=\"segment.optionValue===item.value\"\n >{{segment.label}}\n </mat-button-toggle>\n </mat-button-toggle-group>\n <mat-error *ngIf=\"item.errors && item.errors.length\">\n <div *ngFor=\"let error of item.errors\">{{error.message}}</div>\n </mat-error>\n <mat-hint align=\"start\" *ngIf=\"!(item.errors && item.errors.length)\"><strong>{{item.hint}}</strong> </mat-hint>\n</div>\n", styles: [".mat-button-toggle-group{display:flex}.mat-button-toggle{flex:1}.mat-button-toggle.btn-primary{color:#fff}.mat-button-toggle.mat-button-toggle-disabled.btn-primary{background-color:#00f}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i2$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FormItemSegmentsComponent, decorators: [{
type: Component,
args: [{ selector: 'ammo-form-item-segments', template: "<div class=\"form-group\">\n <mat-label *ngIf=\"item.label\">{{item.label}}</mat-label>\n <mat-button-toggle-group\n aria-label=\"type of credits\"\n [ngClass]=\"{'has-error':item.errors && item.errors.length}\"\n value=\"{{item.value}}\">\n <mat-button-toggle\n *ngFor=\"let segment of item.segments\"\n [disabled]=\"!editable\"\n (click)=\"editable ? onSelectionChange(segment.optionValue) : false\"\n [value]=\"segment.value\"\n [checked]=\"segment.optionValue===item.value\"\n >{{segment.label}}\n </mat-button-toggle>\n </mat-button-toggle-group>\n <mat-error *ngIf=\"item.errors && item.errors.length\">\n <div *ngFor=\"let error of item.errors\">{{error.message}}</div>\n </mat-error>\n <mat-hint align=\"start\" *ngIf=\"!(item.errors && item.errors.length)\"><strong>{{item.hint}}</strong> </mat-hint>\n</div>\n", styles: [".mat-button-toggle-group{display:flex}.mat-button-toggle{flex:1}.mat-button-toggle.btn-primary{color:#fff}.mat-button-toggle.mat-button-toggle-disabled.btn-primary{background-color:#00f}\n"] }]
}], ctorParameters: () => [], propDecorators: { item: [{
type: Input
}], editable: [{
type: Input
}], changes: [{
type: Output
}] } });
class RadioGroupComponent {
constructor() {
this.editable = true;
this.options = [];
this.selectionChange = new EventEmitter();
}
ngOnInit() {
}
isOptionSelected(option) {
return this.multiple ? (this.value || []).indexOf(option.optionValue) >= 0 : this.value === option.optionValue;
}
onSelectionChange(event) {
this.selectionChange.emit(event.value);
}
onCheckboxSelectionChange(event) {
let value = this.value && Array.isArray(this.value) ? this.value : [];
if (event.checked) {
value.push(event.source.value);
}
else {
value = value.filter(v => v !== event.source.value);
}
//console.log(value);
this.selectionChange.emit(value);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: RadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: RadioGroupComponent, selector: "app-radio-group", inputs: { label: "label", editable: "editable", required: "required", multiple: "multiple", options: "options", value: "value" }, outputs: { selectionChange: "selectionChange" }, ngImport: i0, template: "<mat-radio-group [attr.aria-label]=\"label\" *ngIf=\"!multiple\"\n (change)=\"onSelectionChange($event)\"\n [disabled]=\"!editable\"\n [(ngModel)]=\"value\"\n [required]=\"required\"\n>\n <mat-radio-button *ngFor=\"let option of options\"\n [value]=\"option.optionValue\"\n [checked]=\"isOptionSelected(option)\"\n >{{option.label}}\n </mat-radio-button>\n\n</mat-radio-group>\n<div class=\"example-list-section\" *ngIf=\"multiple\">\n <ul>\n <li *ngFor=\"let option of options\">\n <mat-checkbox\n [value]=\"option.optionValue\"\n [checked]=\"isOptionSelected(option)\"\n [disabled]=\"!editable\"\n (change)=\"onCheckboxSelectionChange($event)\">\n {{option.label}}\n </mat-checkbox>\n </li>\n </ul>\n</div>\n", styles: [".mat-radio-group.is-mobile{display:flex;flex-direction:column}.example-section{margin:12px 0}.example-margin{margin:0 12px}ul{list-style-type:none;margin-top:4px;padding-left:10px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i4$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i4$1.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: RadioGroupComponent, decorators: [{
type: Component,
args: [{ selector: 'app-radio-group', template: "<mat-radio-group [attr.aria-label]=\"label\" *ngIf=\"!multiple\"\n (change)=\"onSelectionChange($event)\"\n [disabled]=\"!editable\"\n [(ngModel)]=\"value\"\n [required]=\"required\"\n>\n <mat-radio-button *ngFor=\"let option of options\"\n [value]=\"option.optionValue\"\n [checked]=\"isOptionSelected(option)\"\n >{{option.label}}\n </mat-radio-button>\n\n</mat-radio-group>\n<div class=\"example-list-section\" *ngIf=\"multiple\">\n <ul>\n <li *ngFor=\"let option of options\">\n <mat-checkbox\n [value]=\"option.optionValue\"\n [checked]=\"isOptionSelected(option)\"\n [disabled]=\"!editable\"\n (change)=\"onCheckboxSelectionChange($event)\">\n {{option.label}}\n </mat-checkbox>\n </li>\n </ul>\n</div>\n", styles: [".mat-radio-group.is-mobile{display:flex;flex-direction:column}.example-section{margin:12px 0}.example-margin{margin:0 12px}ul{list-style-type:none;margin-top:4px;padding-left:10px}\n"] }]
}], ctorParameters: () => [], propDecorators: { label: [{
type: Input
}], editable: [{
type: Input
}], required: [{
type: Input
}], multiple: [{
type: Input
}], options: [{
type: Input
}], selectionChange: [{
type: Output
}], value: [{
type: Input
}] } });
class SelectionListComponent {
constructor() {
this.editable = true;
this.options = [];
this.selectionChange = new EventEmitter();
this.init = true;
}
ngOnInit() {
}
isOptionSelected(option) {
return this.multiple ? (this.value || []).indexOf(option.optionValue) >= 0 : this.value === option.optionValue;
}
onSelectionChange(event) {
//console.log(event, this.selectedOptions);
this.value = this.multiple ? this.selectedOptions.selectedOptions.selected.map(op => op.value) : event.options[0].value;
this.selectionChange.emit(this.value);
}
ngOnChanges(changes) {
if (changes.multiple && changes.multiple.previousValue !== changes.multiple.currentValue) {
this.init = false;
//console.log(changes);
setTimeout(() => { this.init = true; }, 10);
}
}
onOptionClick(event, option) {
/*
console.log(event, option);
if (!this.required){
if (this.multiple && this.value.indexOf(option.optionValue)>=0 && Array.isArray(this.value)){
this.value=this.value.filter(str=>str!==option.optionValue);
this.selectionChange.emit(this.value);
}
else if (this.value===option.optionValue) {
this.value='';
this.selectionChange.emit(this.value);
}
}
*/
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: SelectionListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: SelectionListComponent, selector: "app-selection-list", inputs: { label: "label", editable: "editable", required: "required", multiple: "multiple", options: "options", value: "value" }, outputs: { selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "selectedOptions", first: true, predicate: ["selectedOptions"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<mat-selection-list #selectedOptions *ngIf=\"init\"\n (selectionChange)=\"onSelectionChange($event)\"\n [disabled]=\"!editable\"\n\n [multiple]=\"multiple\"\n>\n <!--\n [selected]=\"isOptionSelected(option)\"\n -->\n <mat-list-option *ngFor=\"let option of options\"\n [value]=\"option.optionValue\"\n [selected]=\"isOptionSelected(option)\"\n (click)=\"onOptionClick($event, option)\"\n >\n <span>{{option.label}}</span>\n <!--\n <mat-pseudo-checkbox *ngIf=\"!multiple && isOptionSelected(option)\" class=\"mat-pseudo-checkbox mat-pseudo-checkbox-checked\"></mat-pseudo-checkbox>\n -->\n </mat-list-option>\n</mat-selection-list>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i2$3.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: SelectionListComponent, decorators: [{
type: Component,
args: [{ selector: 'app-selection-list', template: "<mat-selection-list #selectedOptions *ngIf=\"init\"\n (selectionChange)=\"onSelectionChange($event)\"\n [disabled]=\"!editable\"\n\n [multiple]=\"multiple\"\n>\n <!--\n [selected]=\"isOptionSelected(option)\"\n -->\n <mat-list-option *ngFor=\"let option of options\"\n [value]=\"option.optionValue\"\n [selected]=\"isOptionSelected(option)\"\n (click)=\"onOptionClick($event, option)\"\n >\n <span>{{option.label}}</span>\n <!--\n <mat-pseudo-checkbox *ngIf=\"!multiple && isOptionSelected(option)\" class=\"mat-pseudo-checkbox mat-pseudo-checkbox-checked\"></mat-pseudo-checkbox>\n -->\n </mat-list-option>\n</mat-selection-list>\n" }]
}], ctorParameters: () => [], propDecorators: { label: [{
type: Input
}], editable: [{
type: Input
}], required: [{
type: Input
}], multiple: [{
type: Input
}], options: [{
type: Input
}], selectionChange: [{
type: Output
}], value: [{
type: Input
}], selectedOptions: [{
type: ViewChild,
args: ['selectedOptions', { static: false }]
}] } });
class SelectComponent {
constructor() {
this.editable = true;
this.options = [];
this.selectionChange = new EventEmitter();
this.init = true;
this.matcher = new SurveyErrorStateMatcher();
}
ngOnInit() {
}
isOptionSelected(option) {
return this.multiple ? (this.value || []).indexOf(option.optionValue) >= 0 : this.value === option.optionValue;
}
onSelectionChange(event) {
//console.log(event);
this.value = event.value;
this.selectionChange.emit(this.value);
}
ngOnChanges(changes) {
if (changes.multiple && changes.multiple.previousValue !== changes.multiple.currentValue) {
this.init = false;
//console.log(changes);
setTimeout(() => { this.init = true; }, 10);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: SelectComponent, selector: "app-select", inputs: { label: "label", editable: "editable", required: "required", multiple: "multiple", options: "options", value: "value" }, outputs: { selectionChange: "selectionChange" }, usesOnChanges: true, ngImport: i0, template: "<mat-form-field appearance=\"fill\" *ngIf=\"init\">\n <mat-select\n [value]=\"value\"\n [disabled]=\"!editable\"\n (selectionChange)=\"onSelectionChange($event)\"\n [errorStateMatcher]=\"matcher\"\n [required]=\"required\"\n [multiple]=\"multiple\"\n >\n <mat-option *ngFor=\"let option of options\" [value]=\"option.optionValue\">\n {{option.label}}\n </mat-option>\n </mat-select>\n</mat-form-field>", styles: [".mat-mdc-form-field{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i3$3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: SelectComponent, decorators: [{
type: Component,
args: [{ selector: 'app-select', template: "<mat-form-field appearance=\"fill\" *ngIf=\"init\">\n <mat-select\n [value]=\"value\"\n [disabled]=\"!editable\"\n (selectionChange)=\"onSelectionChange($event)\"\n [errorStateMatcher]=\"matcher\"\n [required]=\"required\"\n [multiple]=\"multiple\"\n >\n <mat-option *ngFor=\"let option of options\" [value]=\"option.optionValue\">\n {{option.label}}\n </mat-option>\n </mat-select>\n</mat-form-field>", styles: [".mat-mdc-form-field{display:block}\n"] }]
}], ctorParameters: () => [], propDecorators: { label: [{
type: Input
}], editable: [{
type: Input
}], required: [{
type: Input
}], multiple: [{
type: Input
}], options: [{
type: Input
}], selectionChange: [{
type: Output
}], value: [{
type: Input
}] } });
class FormItemRadio extends FormItem {
constructor() {
super(...arguments);
this.hasOptions = true;
}
}
class FormItemRadioComponent {
constructor() {
this.editable = true;
this.changes = new EventEmitter();
this.explanationValue = '';
}
ngOnInit() {
//console.log(this.item);
if (this.item && !this.item.multiple && Array.isArray(this.item.value)) {
this.item.value = this.item.value[0];
}
//console.log(this.item.value);
let selectedOptionObj = this.item.items.find(op => op.optionValue === this.item.value);
this.selectedOption = selectedOptionObj ? selectedOptionObj.optionValue : '';
if (!this.selectedOption && this.item.value && !this.item.multiple) {
const valArr = (this.item.value.toString()).split(', ');
selectedOptionObj = this.item.items.find(op => op.optionValue === valArr[0]);
//console.log(valArr, selectedOptionObj);
if (selectedOptionObj) {
this.selectedOption = selectedOptionObj.optionValue;
this.explanationValue = valArr.slice(1, valArr.length).join(', ');
}
}
//console.log(this.item.value);
}
onSelectionChange(value) {
//console.log(value);
this.item.value = value;
if (!Array.isArray(value)) {
this.selectedOption = value;
this.onExplanationValueChanges(this.explanationValue, this.item.value);
}
this.changes.emit(this.item);
}
onExplanationValueChanges(val, selectedOptionVal) {
//console.log(val);
//console.log(val, selectedOptionVal);
const option = this.item.items.find(op => op.optionValue === selectedOptionVal);
if (!option || !this.isExplanationRequired(option.optionValue)) {
return false;
}
this.item.value = option.optionValue + ', ' + val;
this.changes.emit(this.item);
}
isExplanationRequired(selectedOptionVal) {
//console.log(selectedOptionVal);
const option = this.item.items.find(op => op.optionValue === selectedOptionVal);
if (!option) {
return false;
}
this.explanationLabel = option.explanationLabel;
return option && option.showExplanation;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FormItemRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: FormItemRadioComponent, selector: "ammo-form-item-radio", inputs: { item: "item", editable: "editable" }, outputs: { changes: "changes" }, ngImport: i0, template: "<label *ngIf=\"item.label\" [ngClass]=\"{'has-error':item.errors && item.errors.length}\">{{item.label}} <span class=\"required\" *ngIf=\"item.required\">*</span></label>\n<ng-container *ngIf=\"item.items && item.items.length\">\n <app-selection-list *ngIf=\"!item.style || item.style==='list'\"\n [label]=\"item.label\"\n [editable]=\"editable\"\n [required]=\"item.required\"\n [value]=\"item.multiple ? item.value : selectedOption\"\n [options]=\"item.items\"\n [multiple]=\"item.multiple\"\n (selectionChange)=\"onSelectionChange($event)\"\n ></app-selection-list>\n <app-radio-group *ngIf=\"item.style==='buttons'\"\n [label]=\"item.label\"\n [editable]=\"editable\"\n [required]=\"item.required\"\n [label]=\"item.label\"\n [value]=\"item.multiple ? item.value : selectedOption\"\n [options]=\"item.items\"\n [multiple]=\"item.multiple\"\n (selectionChange)=\"onSelectionChange($event)\"\n ></app-radio-group>\n <app-select *ngIf=\"item.style==='select'\"\n [label]=\"item.label\"\n [editable]=\"editable\"\n [required]=\"item.required\"\n [value]=\"item.multiple ? item.value : selectedOption\"\n [options]=\"item.items\"\n [multiple]=\"item.multiple\"\n (selectionChange)=\"onSelectionChange($event)\"\n ></app-select>\n <mat-form-field *ngIf=\"isExplanationRequired(selectedOption)\" class=\"other-option-field\">\n <mat-label>{{explanationLabel}}</mat-label>\n <input #inputField\n matInput\n [(ngModel)]=\"explanationValue\"\n (ngModelChange)=\"onExplanationValueChanges($event, selectedOption)\"\n >\n </mat-form-field>\n</ng-container>\n\n<mat-error *ngIf=\"item.errors && item.errors.length\">\n <div *ngFor=\"let error of item.errors\">{{error.message}}</div>\n</mat-error>\n<mat-hint align=\"start\" *ngIf=\"!(item.errors && item.errors.length)\"><strong>{{item.hint}}</strong> </mat-hint>\n", styles: [":host ::ng-deep .mat-list-item:not(:last-of-type){border-bottom:1px solid #eaeaea}:host ::ng-deep .mat-pseudo-checkbox{color:transparent}:host ::ng-deep .mat-list-single-selected-option .mat-list-text{display:flex;flex-direction:row!important}:host ::ng-deep .mat-list-single-selected-option .mat-list-text>span{width:100%}:host ::ng-deep .mat-pseudo-checkbox-checked{color:transparent;background:transparent}:host ::ng-deep .mat-pseudo-checkbox-checked:after{opacity:1}:host ::ng-deep .mat-error{padding:.54167em;border-top:1px solid red;font-size:75%;text-align:center}:host ::ng-deep .mat-radio-button{margin-left:15px}:host ::ng-deep .other-option-field{display:block}:host ::ng-deep label{color:#0000008a}:host ::ng-deep label.has-error{color:#f44336}.mat-list,.mat-selection-list{padding-top:0}.mat-mdc-form-field{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: RadioGroupComponent, selector: "app-radio-group", inputs: ["label", "editable", "required", "multiple", "options", "value"], outputs: ["selectionChange"] }, { kind: "component", type: SelectionListComponent, selector: "app-selection-list", inputs: ["label", "editable", "required", "multiple", "options", "value"], outputs: ["selectionChange"] }, { kind: "component", type: SelectComponent, selector: "app-select", inputs: ["label", "editable", "required", "multiple", "options", "value"], outputs: ["selectionChange"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FormItemRadioComponent, decorators: [{
type: Component,
args: [{ selector: 'ammo-form-item-radio', template: "<label *ngIf=\"item.label\" [ngClass]=\"{'has-error':item.errors && item.errors.length}\">{{item.label}} <span class=\"required\" *ngIf=\"item.required\">*</span></label>\n<ng-container *ngIf=\"item.items && item.items.length\">\n <app-selection-list *ngIf=\"!item.style || item.style==='list'\"\n [label]=\"item.label\"\n [editable]=\"editable\"\n [required]=\"item.required\"\n [value]=\"item.multiple ? item.value : selectedOption\"\n [options]=\"item.items\"\n [multiple]=\"item.multiple\"\n (selectionChange)=\"onSelectionChange($event)\"\n ></app-selection-list>\n <app-radio-group *ngIf=\"item.style==='buttons'\"\n [label]=\"item.label\"\n [editable]=\"editable\"\n [required]=\"item.required\"\n [label]=\"item.label\"\n [value]=\"item.multiple ? item.value : selectedOption\"\n [options]=\"item.items\"\n [multiple]=\"item.multiple\"\n (selectionChange)=\"onSelectionChange($event)\"\n ></app-radio-group>\n <app-select *ngIf=\"item.style==='select'\"\n [label]=\"item.label\"\n [editable]=\"editable\"\n [required]=\"item.required\"\n [value]=\"item.multiple ? item.value : selectedOption\"\n [options]=\"item.items\"\n [multiple]=\"item.multiple\"\n (selectionChange)=\"onSelectionChange($event)\"\n ></app-select>\n <mat-form-field *ngIf=\"isExplanationRequired(selectedOption)\" class=\"other-option-field\">\n <mat-label>{{explanationLabel}}</mat-label>\n <input #inputField\n matInput\n [(ngModel)]=\"explanationValue\"\n (ngModelChange)=\"onExplanationValueChanges($event, selectedOption)\"\n >\n </mat-form-field>\n</ng-container>\n\n<mat-error *ngIf=\"item.errors && item.errors.length\">\n <div *ngFor=\"let error of item.errors\">{{error.message}}</div>\n</mat-error>\n<mat-hint align=\"start\" *ngIf=\"!(item.errors && item.errors.length)\"><strong>{{item.hint}}</strong> </mat-hint>\n", styles: [":host ::ng-deep .mat-list-item:not(:last-of-type){border-bottom:1px solid #eaeaea}:host ::ng-deep .mat-pseudo-checkbox{color:transparent}:host ::ng-deep .mat-list-single-selected-option .mat-list-text{display:flex;flex-direction:row!important}:host ::ng-deep .mat-list-single-selected-option .mat-list-text>span{width:100%}:host ::ng-deep .mat-pseudo-checkbox-checked{color:transparent;background:transparent}:host ::ng-deep .mat-pseudo-checkbox-checked:after{opacity:1}:host ::ng-deep .mat-error{padding:.54167em;border-top:1px solid red;font-size:75%;text-align:center}:host ::ng-deep .mat-radio-button{margin-left:15px}:host ::ng-deep .other-option-field{display:block}:host ::ng-deep label{color:#0000008a}:host ::ng-deep label.has-error{color:#f44336}.mat-list,.mat-selection-list{padding-top:0}.mat-mdc-form-field{display:block}\n"] }]
}], ctorParameters: () => [], propDecorators: { item: [{
type: Input
}], editable: [{
type: Input
}], changes: [{
type: Output
}] } });
class FormItemNumericRating extends FormItem {
}
class FormItemNumericRatingComponent {
constructor() {
this.editable = true;
this.changes = new EventEmitter();
}
ngOnInit() {
}
onSelectionChange(value) {
this.item.value = value;
this.changes.emit(this.item);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FormItemNumericRatingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: FormItemNumericRatingComponent, selector: "ammo-form-item-numeric-rating", inputs: { item: "item", editable: "editable" }, outputs: { changes: "changes" }, ngImport: i0, template: "<div class=\"form-group\">\n <div class=\"col-xs-12 rating-set\">\n <div class=\"rating-set-title\">{{item.label}}</div>\n <div class=\"rating-set-buttons\">\n <button mat-button class=\"btn btn-sm\" type=\"button\"\n (click)=\"editable ? onSelectionChange(i) : false\"\n [ngClass]=\"item.value===i ? 'btn-primary' : 'btn-outline-primary'\"\n *ngFor=\"let i of [0,1,2,3,4,5,6,7,8,9,10]\">{{i}}</button>\n </div>\n <mat-error *ngIf=\"item.errors && item.errors.length\">\n <div *ngFor=\"let error of item.errors\">{{error.message}}</div>\n </mat-error>\n <mat-hint align=\"start\" *ngIf=\"!(item.errors && item.errors.length)\"><strong>{{item.hint}}</strong> </mat-hint>\n </div>\n</div>\n", styles: [".rating-set{display:block;padding:100/2;padding-bottom:10;text-align:center}.rating-set-title{font-size:.875rem}:host ::ng-deep button.mat-button{margin-bottom:4px}:host ::ng-deep button.mat-button:not(:last-child){margin-right:4px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FormItemNumericRatingComponent, decorators: [{
type: Component,
args: [{ selector: 'ammo-form-item-numeric-rating', template: "<div class=\"form-group\">\n <div class=\"col-xs-12 rating-set\">\n <div class=\"rating-set-title\">{{item.label}}</div>\n <div class=\"rating-set-buttons\">\n <button mat-button class=\"btn btn-sm\" type=\"button\"\n (click)=\"editable ? onSelectionChange(i) : false\"\n [ngClass]=\"item.value===i ? 'btn-primary' : 'btn-outline-primary'\"\n *ngFor=\"let i of [0,1,2,3,4,5,6,7,8,9,10]\">{{i}}</button>\n </div>\n <mat-error *ngIf=\"item.errors && item.errors.length\">\n <div *ngFor=\"let error of item.errors\">{{error.message}}</div>\n </mat-error>\n <mat-hint align=\"start\" *ngIf=\"!(item.errors && item.errors.length)\"><strong>{{item.hint}}</strong> </mat-hint>\n </div>\n</div>\n", styles: [".rating-set{display:block;padding:100/2;padding-bottom:10;text-align:center}.rating-set-title{font-size:.875rem}:host ::ng-deep button.mat-button{margin-bottom:4px}:host ::ng-deep button.mat-button:not(:last-child){margin-right:4px}\n"] }]
}], ctorParameters: () => [], propDecorators: { item: [{
type: Input
}], editable: [{
type: Input
}], changes: [{
type: Output
}] } });
class FormItemSelect extends FormItem {
constructor() {
super(...arguments);
this.hasOptions = true;
}
}
class FormItemSelectComponent {
constructor() {
this.editable = true;
this.changes = new EventEmitter();
this.matcher = new SurveyErrorStateMatcher();
}
ngOnInit() {
}
onSelectionChange(value) {
console.log(value);
this.item.value = value;
this.changes.emit(this.item);
}
isOptionSelected(option) {
const item = this.item;
return item.value === option.optionValue;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FormItemSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: FormItemSelectComponent, selector: "ammo-form-item-select", inputs: { item: "item", editable: "editable" }, outputs: { changes: "changes" }, ngImport: i0, template: "<mat-form-field appearance=\"fill\">\n <mat-label>{{item.label}}</mat-label>\n <mat-select\n [value]=\"item.value\"\n [disabled]=\"!editable\"\n (valueChange)=\"onSelectionChange($event)\"\n [errorStateMatcher]=\"matcher\"\n [required]=\"item.required\"\n >\n <mat-option *ngFor=\"let option of item.items\" [value]=\"option.optionValue\">\n {{option.label}}\n </mat-option>\n </mat-select>\n</mat-form-field>\n\n<mat-error *ngIf=\"item.errors && item.errors.length\">\n <div *ngFor=\"let error of item.errors\">{{error.message}}</div>\n</mat-error>\n<mat-hint align=\"start\" *ngIf=\"!(item.errors && item.errors.length)\"><strong>{{item.hint}}</strong> </mat-hint>\n", styles: [".mat-mdc-form-field{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i3$3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FormItemSelectComponent, decorators: [{
type: Component,
args: [{ selector: 'ammo-form-item-select', template: "<mat-form-field appearance=\"fill\">\n <mat-label>{{item.label}}</mat-label>\n <mat-select\n [value]=\"item.value\"\n [disabled]=\"!editable\"\n (valueChange)=\"onSelectionChange($event)\"\n [errorStateMatcher]=\"matcher\"\n [required]=\"item.required\"\n >\n <mat-option *ngFor=\"let option of item.items\" [value]=\"option.optionValue\">\n {{option.label}}\n </mat-option>\n </mat-select>\n</mat-form-field>\n\n<mat-error *ngIf=\"item.errors && item.errors.length\">\n <div *ngFor=\"let error of item.errors\">{{error.message}}</div>\n</mat-error>\n<mat-hint align=\"start\" *ngIf=\"!(item.errors && item.errors.length)\"><strong>{{item.hint}}</strong> </mat-hint>\n", styles: [".mat-mdc-form-field{display:block}\n"] }]
}], ctorParameters: () => [], propDecorators: { item: [{
type: Input
}], editable: [{
type: Input
}], changes: [{
type: Output
}] } });
class FormItemOptionsEditor extends FormItem {
constructor() {
super(...arguments);
this.hasOptions = true;
this.useCustomOptionValues = false;
this.allowCustomOptionValues = true;
this.allowCustomAnswers = true;
this.multiple = false;
this.fieldValidations = {
rules: [
{
"optionKeyValues": true
}
]
};
}
}
class FormItemOptionsEditorComponent {
constructor() {
this.editable = true;
this.changes = new EventEmitter();
this.matcher = new ItemOptionStateMatcher();
this.dataSource = new MatTableDataSource([]);
this.useCustomValues = false;
this.allowCustomValues = true;
this.allowCustomAnswers = true;
}
ngOnInit() {
if (!this.item.value) {
this.item.value = [];
}
this.dataSource.data = this.item.value;
this.useCustomValues = this.item.useCustomOptionValues;
this.allowCustomValues = this.item.allowCustomOptionValues;
this.allowCustomAnswers = this.item.allowCustomAnswers;
this.setColumns();
this.item.value.forEach(option => {
option.selected = this.isOptionSelected(option);
});
console.log(this.item);
}
setColumns() {
this.columns = this.useCustomValues ? ['selectedByDefault', 'optionValue', 'label', 'actions'] : ['selectedByDefault', 'label', 'actions'];
}
onUseCustomValuesChange(ev) {
this.useCustomValues = ev.checked;
this.item.useCustomOptionValues = this.useCustomValues;
this.setColumns();
}
onValueChange(value) {
this.item.value = value;
//console.log(this.item);
if (this.useCustomValues) {
(this.item.value || []).forEach(field => {
field.optionValue = field.label;
});
}
this.changes.emit(this.item);
}
isOptionSelected(option) {
//console.log(option);
const item = this.item;
return item.multiple ? (item.defaultValue || []).indexOf(option.optionValue) >= 0 : item.defaultValue === option.optionValue;
}
setDefaultValue(option, checked) {
const item = this.item;
if (item.multiple) {
let value = [...item.defaultValue];
const selectedIndex = value.indexOf(option.optionValue);
if (selectedIndex >= 0) {
checked ? value.push(option.optionValue) : value = value.filter((str, index) => index !== selectedIndex);
}
else if (checked) {
value.push(option.optionValue);
}
item.defaultValue = value;
}
else {
item.defaultValue = checked ? option.optionValue : '';
}
(this.item.value || []).forEach(option => {
option.selected = this.isOptionSelected(option);
});
this.changes.emit(this.item);
}
onOptionLabelChange(value, option) {
if (!this.useCustomValues) {
option.optionValue = value;
}
}
addOption() {
const obj = {};
this.item.value.push(obj);
this.dataSource.data = this.item.value;
}
removeOption(option) {
this.item.value = this.item.value.filter((op, index) => index !== this.item.value.indexOf(option));
this.dataSource.data = this.item.value;
}
onListDropped(event) {
const previousIndex = this.dataSource.data.findIndex(row => row === event.item.data);
moveItemInArray(this.dataSource.data, previousIndex, event.currentIndex);
this.dataSource.data = this.dataSource.data.slice();
//console.log('dropped', JSON.stringify(this.dataSource.data), JSON.stringify(this.item.value));
}
toggleExplanationField(option) {
option.showExplanation = !option.showExplanation;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FormItemOptionsEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: FormItemOptionsEditorComponent, selector: "ammo-form-item-options-editor", inputs: { item: "item", editable: "editable" }, outputs: { changes: "changes" }, ngImport: i0, template: "<div>\n <mat-label>{{item.label}}</mat-label>\n\n <mat-slide-toggle *ngIf=\"allowCustomValues\"\n class=\"example-margin\"\n [color]=\"'primary'\"\n [checked]=\"useCustomValues\"\n [disabled]=\"!editable\"\n (change)=\"onUseCustomValuesChange($event)\"\n >\n Use custom option values\n </mat-slide-toggle>\n\n <table mat-table [dataSource]=\"dataSource\" class=\"mat-elevation-z8\"\n cdkDropList\n [cdkDropListData]=\"dataSource\"\n (cdkDropListDropped)=\"onListDropped($event)\"\n [cdkDropListDisabled]=\"!editable\"\n >\n\n <ng-container matColumnDef=\"selectedByDefault\">\n <th mat-header-cell *matHeaderCellDef> Selected </th>\n <td mat-cell *matCellDef=\"let element\">\n <mat-checkbox\n [checked]=\"element.selected\"\n [color]=\"'primary'\"\n (change)=\"setDefaultValue(element, $event.checked)\"\n ></mat-checkbox>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"optionValue\">\n <th mat-header-cell *matHeaderCellDef> Value </th>\n <td mat-cell *matCellDef=\"let element\">\n <mat-form-field class=\"example-full-width\">\n <input #inputField\n matInput\n [(ngModel)]=\"element.optionValue\"\n [errorStateMatcher]=\"matcher\"\n [disabled]=\"!editable\"\n >\n </mat-form-field>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"label\">\n <th mat-header-cell *matHeaderCellDef> Label </th>\n <td mat-cell *matCellDef=\"let element\" class=\"row-actions\">\n <mat-form-field class=\"example-full-width\">\n <input #inputField\n matInput\n [(ngModel)]=\"element.label\"\n (ngModelChange)=\"onOptionLabelChange($event, element)\"\n [errorStateMatcher]=\"matcher\"\n [disabled]=\"!editable\"\n >\n </mat-form-field>\n\n <mat-form-field class=\"explanation-field\" *ngIf=\"element.showExplanation\">\n <mat-label>Explanation field label</mat-label>\n <input #inputField\n matInput\n [(ngModel)]=\"element.explanationLabel\"\n [disabled]=\"!editable\"\n >\n </mat-form-field>\n </td>\n </ng-container>\n <ng-container matColumnDef=\"actions\">\n <th mat-header-cell *matHeaderCellDef></th>\n <td mat-cell *matCellDef=\"let element\">\n <button mat-icon-button class=\"form-item-actions-button\" aria-label=\"Show text field with custom value\" *ngIf=\"allowCustomAnswers && !item.multiple\" (click)=\"toggleExplanationField(element)\" type=\"button\"\n matTooltip=\"Show explanation text field\"\n [disabled]=\"!editable\"\n >\n <mat-icon [color]=\"element.showExplanation ? 'primary' : 'disabled'\">comment</mat-icon>\n </button>\n\n <button mat-icon-button class=\"form-item-actions-button\" aria-label=\"Remove Option\" (click)=\"removeOption(element)\" type=\"button\"\n matTooltip=\"Remove Option\"\n [disabled]=\"!editable\"\n >\n <mat-icon>delete</mat-icon>\n </button>\n </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"columns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: columns;\"\n cdkDrag\n [cdkDragData]=row\n ></tr>\n <tr class=\"mat-row\" *matNoDataRow>\n <td class=\"mat-cell\" colspan=\"3\">No options</td>\n </tr>\n </table>\n <mat-error *ngIf=\"item.errors && item.errors.length\">\n <div *ngFor=\"let error of item.errors\">{{error.message}}</div>\n </mat-error>\n <mat-hint align=\"start\" *ngIf=\"!(item.errors && item.errors.length)\"><strong>{{item.hint}}</strong> </mat-hint>\n <button mat-raised-button color=\"primary\" aria-label=\"Add Option\" (click)=\"addOption()\" type=\"button\" matTooltip=\"Add Option\" [disabled]=\"!editable\">\n Add Option\n </button>\n</div>\n\n\n", styles: [".mat-mdc-form-field{display:block}::ng-deep .mat-table{box-shadow:none;width:100%}::ng-deep .mat-table .mat-cell{cursor:move}::ng-deep .mat-table .mat-cell .mat-mdc-form-field-infix{width:100%}::ng-deep .mat-table .mat-input-element{width:95%}::ng-deep .mat-table .mat-column-optionValue{padding-right:10px}::ng-deep .mat-table .cdk-column-actions{text-align:right}::ng-deep .mat-table .explanation-field{padding-left:20px}::ng-deep .mat-slide-toggle{display:block!important}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i8.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i8.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i8.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i8.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i8.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "directive", type: i9.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i9.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i3$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i11.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FormItemOptionsEditorComponent, decorators: [{
type: Component,
args: [{ selector: 'ammo-form-item-options-editor', template: "<div>\n <mat-label>{{item.label}}</mat-label>\n\n <mat-slide-toggle *ngIf=\"allowCustomValues\"\n class=\"example-margin\"\n [color]=\"'primary'\"\n [checked]=\"useCustomValues\"\n [disabled]=\"!editable\"\n (change)=\"onUseCustomValuesChange($event)\"\n >\n Use custom option values\n </mat-slide-toggle>\n\n <table mat-table [dataSource]=\"dataSource\" class=\"mat-elevation-z8\"\n cdkDropList\n [cdkDropListData]=\"dataSource\"\n (cdkDropListDropped)=\"onListDropped($event)\"\n [cdkDropListDisabled]=\"!editable\"\n >\n\n <ng-container matColumnDef=\"selectedByDefault\">\n <th mat-header-cell *matHeaderCellDef> Selected </th>\n <td mat-cell *matCellDef=\"let element\">\n <mat-checkbox\n [checked]=\"element.selected\"\n [color]=\"'primary'\"\n (change)=\"setDefaultValue(element, $event.checked)\"\n ></mat-checkbox>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"optionValue\">\n <th mat-header-cell *matHeaderCellDef> Value </th>\n <td mat-cell *matCellDef=\"let element\">\n <mat-form-field class=\"example-full-width\">\n <input #inputField\n matInput\n [(ngModel)]=\"element.optionValue\"\n [errorStateMatcher]=\"matcher\"\n [disabled]=\"!editable\"\n >\n </mat-form-field>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"label\">\n <th mat-header-cell *matHeaderCellDef> Label </th>\n <td mat-cell *matCellDef=\"let element\" class=\"row-actions\">\n <mat-form-field class=\"example-full-width\">\n <input #inputField\n matInput\n [(ngModel)]=\"element.label\"\n (ngModelChange)=\"onOptionLabelChange($event, element)\"\n [errorStateMatcher]=\"matcher\"\n [disabled]=\"!editable\"\n >\n </mat-form-field>\n\n <mat-form-field class=\"explanation-field\" *ngIf=\"element.showExplanation\">\n <mat-label>Explanation field label</mat-label>\n <input #inputField\n matInput\n [(ngModel)]=\"element.explanationLabel\"\n [disabled]=\"!editable\"\n >\n </mat-form-field>\n </td>\n </ng-container>\n <ng-container matColumnDef=\"actions\">\n <th mat-header-cell *matHeaderCellDef></th>\n <td mat-cell *matCellDef=\"let element\">\n <button mat-icon-button class=\"form-item-actions-button\" aria-label=\"Show text field with custom value\" *ngIf=\"allowCustomAnswers && !item.multiple\" (click)=\"toggleExplanationField(element)\" type=\"button\"\n matTooltip=\"Show explanation text field\"\n [disabled]=\"!editable\"\n >\n <mat-icon [color]=\"element.showExplanation ? 'primary' : 'disabled'\">comment</mat-icon>\n </button>\n\n <button mat-icon-button class=\"form-item-actions-button\" aria-label=\"Remove Option\" (click)=\"removeOption(element)\" type=\"button\"\n matTooltip=\"Remove Option\"\n [disabled]=\"!editable\"\n >\n <mat-icon>delete</mat-icon>\n </button>\n </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"columns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: columns;\"\n cdkDrag\n [cdkDragData]=row\n ></tr>\n <tr class=\"mat-row\" *matNoDataRow>\n <td class=\"mat-cell\" colspan=\"3\">No options</td>\n </tr>\n </table>\n <mat-error *ngIf=\"item.errors && item.errors.length\">\n <div *ngFor=\"let error of item.errors\">{{error.message}}</div>\n </mat-error>\n <mat-hint align=\"start\" *ngIf=\"!(item.errors && item.errors.length)\"><strong>{{item.hint}}</strong> </mat-hint>\n <button mat-raised-button color=\"primary\" aria-label=\"Add Option\" (click)=\"addOption()\" type=\"button\" matTooltip=\"Add Option\" [disabled]=\"!editable\">\n Add Option\n </button>\n</div>\n\n\n", styles: [".mat-mdc-form-field{display:block}::ng-deep .mat-table{box-shadow:none;width:100%}::ng-deep .mat-table .mat-cell{cursor:move}::ng-deep .mat-table .mat-cell .mat-mdc-form-field-infix{width:100%}::ng-deep .mat-table .mat-input-element{width:95%}::ng-deep .mat-table .mat-column-optionValue{padding-right:10px}::ng-deep .mat-table .cdk-column-actions{text-align:right}::ng-deep .mat-table .explanation-field{padding-left:20px}::ng-deep .mat-slide-toggle{display:block!important}\n"] }]
}], ctorParameters: () => [], propDecorators: { item: [{
type: Input
}], editable: [{
type: Input
}], changes: [{
type: Output
}] } });
class FormItemCheckbox extends FormItem {
}
class FormItemCheckboxComponent {
constructor() {
this.editable = true;
this.changes = new EventEmitter();
this.matcher = new SurveyErrorStateMatcher();
}
ngOnInit() {
}
onChange(event) {
console.log(event);
this.item.value = event.checked;
this.changes.emit(this.item);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FormItemCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: FormItemCheckboxComponent, selector: "ammo-form-item-checkbox", inputs: { item: "item", editable: "editable" }, outputs: { changes: "changes" }, ngImport: i0, template: "<section class=\"example-section\">\n <mat-checkbox class=\"example-margin\"\n [(ngModel)]=\"item.value\"\n (change)=\"onChange($event)\"\n [required]=\"item.required\"\n [disabled]=\"!editable\"\n >{{item.label}}</mat-checkbox>\n</section>\n<mat-error *ngIf=\"item.errors && item.errors.length\">\n <div *ngFor=\"let error of item.errors\">{{error.message}}</div>\n</mat-error>\n<mat-hint align=\"start\" *ngIf=\"!(item.errors && item.errors.length)\"><strong>{{item.hint}}</strong> </mat-hint>\n\n", styles: [".mat-mdc-form-field{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i3$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FormItemCheckboxComponent, decorators: [{
type: Component,
args: [{ selector: 'ammo-form-item-checkbox', template: "<section class=\"example-section\">\n <mat-checkbox class=\"example-margin\"\n [(ngModel)]=\"item.value\"\n (change)=\"onChange($event)\"\n [required]=\"item.required\"\n [disabled]=\"!editable\"\n >{{item.label}}</mat-checkbox>\n</section>\n<mat-error *ngIf=\"item.errors && item.errors.length\">\n <div *ngFor=\"let error of item.errors\">{{error.message}}</div>\n</mat-error>\n<mat-hint align=\"start\" *ngIf=\"!(item.errors && item.errors.length)\"><strong>{{item.hint}}</strong> </mat-hint>\n\n", styles: [".mat-mdc-form-field{display:block}\n"] }]
}], ctorParameters: () => [], propDecorators: { item: [{
type: Input
}], editable: [{
type: Input
}], changes: [{
type: Output
}] } });
/*
* Convert bytes into largest possible unit.
* Takes an precision argument that defaults to 2.
* Usage:
* bytes | fileSize:precision
* Example:
* {{ 1024 | fileSize}}
* formats to: 1 KB
*/
class FileSizePipe {
constructor() {
this.units = [
'bytes',
'KB',
'MB',
'GB',
'TB',
'PB'
];
}
transform(bytes = 0, precision = 2, separator = ' ') {
if (!isFinite(bytes)) {
return '?';
}
;
let unit = 0;
while (bytes >= 1024) {
bytes /= 1024;
unit++;
}
return bytes.toFixed(+precision) + separator + this.units[unit];
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FileSizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.12", ngImport: i0, type: FileSizePipe, name: "fileSize" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FileSizePipe, decorators: [{
type: Pipe,
args: [{ name: 'fileSize' }]
}] });
class TruncatePipe {
transform(name) {
const ext = name.substring(name.lastIndexOf('.') + 1, name.length).toLowerCase();
let newName = name.replace('.' + ext, '');
if (name.length <= 8) {
// if file name length is less than 8 do not format
// return same name
return name;
}
newName = newName.substring(0, 8) + (name.length > 8 ? '...' : '');
return newName + '.' + ext;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: TruncatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.12", ngImport: i0, type: TruncatePipe, name: "truncate" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: TruncatePipe, decorators: [{
type: Pipe,
args: [{
name: 'truncate'
}]
}] });
class FileListItemImageComponent {
constructor() {
this.onDelete = new EventEmitter();
}
ngOnInit() {
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FileListItemImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: FileListItemImageComponent, selector: "ammo-file-list-item-image", inputs: { file: "file", allowDelete: "allowDelete", type: "type" }, outputs: { onDelete: "onDelete" }, ngImport: i0, template: "<div class=\"image-upload-item\" [ngClass]=\"{uploading: file.uploading}\">\n <img [src]=\"file.src || file.url\" width=\"100%\" *ngIf=\"type==='image' && (file.src || file.url)\">\n <mat-icon class=\"file-icon\" *ngIf=\"type!=='image'\">insert_drive_file</mat-icon>\n <mat-progress-bar mode=\"determinate\" *ngIf=\"file.uploading\" [value]=\"file.progressValue\"></mat-progress-bar>\n <div class=\"file-upload-img-info\" *ngIf=\"file.size || file.name\">\n <div *ngIf=\"file.size\">\n Size: <span class=\"file-upload-img-info-value\" [innerHTML]=\"file.size| fileSize\"></span>\n </div>\n <div *ngIf=\"file.name\" >\n <a [href]=\"file.url\" class=\"file-name\" target=\"_blank\" [title]=\"file.name\" *ngIf=\"!file.uploading\">{{file.name | truncate}}</a>\n <span class=\"file-name\" *ngIf=\"file.uploading\">{{file.name | truncate}}</span>\n </div>\n </div>\n <a class=\"delete-btn\" *ngIf=\"allowDelete\" (click)=\"onDelete.emit(file)\" title=\"Delete Image\"><mat-icon>cancel</mat-icon></a>\n</div>\n", styles: [".image-upload-item{padding:15px 10px;position:relative;margin-bottom:1rem;border:1px solid #c2c9d8;border-radius:4px;background-color:#fff;width:94px;margin-right:5px}.image-upload-item.uploading img{opacity:.5}.image-upload-item .file-upload-img-info{padding-top:10px;text-align:center;color:#9e9e9e}.image-upload-item .file-upload-img-info .file-upload-img-info-value{font-weight:500;color:#363e49}.image-upload-item .delete-btn{position:absolute;top:2px;right:2px;color:#c72939!important;cursor:pointer;font-size:20px}.image-upload-item .file-icon{width:95px;height:95px;display:block;font-size:95px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$4.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "pipe", type: FileSizePipe, name: "fileSize" }, { kind: "pipe", type: TruncatePipe, name: "truncate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FileListItemImageComponent, decorators: [{
type: Component,
args: [{ selector: 'ammo-file-list-item-image', template: "<div class=\"image-upload-item\" [ngClass]=\"{uploading: file.uploading}\">\n <img [src]=\"file.src || file.url\" width=\"100%\" *ngIf=\"type==='image' && (file.src || file.url)\">\n <mat-icon class=\"file-icon\" *ngIf=\"type!=='image'\">insert_drive_file</mat-icon>\n <mat-progress-bar mode=\"determinate\" *ngIf=\"file.uploading\" [value]=\"file.progressValue\"></mat-progress-bar>\n <div class=\"file-upload-img-info\" *ngIf=\"file.size || file.name\">\n <div *ngIf=\"file.size\">\n Size: <span class=\"file-upload-img-info-value\" [innerHTML]=\"file.size| fileSize\"></span>\n </div>\n <div *ngIf=\"file.name\" >\n <a [href]=\"file.url\" class=\"file-name\" target=\"_blank\" [title]=\"file.name\" *ngIf=\"!file.uploading\">{{file.name | truncate}}</a>\n <span class=\"file-name\" *ngIf=\"file.uploading\">{{file.name | truncate}}</span>\n </div>\n </div>\n <a class=\"delete-btn\" *ngIf=\"allowDelete\" (click)=\"onDelete.emit(file)\" title=\"Delete Image\"><mat-icon>cancel</mat-icon></a>\n</div>\n", styles: [".image-upload-item{padding:15px 10px;position:relative;margin-bottom:1rem;border:1px solid #c2c9d8;border-radius:4px;background-color:#fff;width:94px;margin-right:5px}.image-upload-item.uploading img{opacity:.5}.image-upload-item .file-upload-img-info{padding-top:10px;text-align:center;color:#9e9e9e}.image-upload-item .file-upload-img-info .file-upload-img-info-value{font-weight:500;color:#363e49}.image-upload-item .delete-btn{position:absolute;top:2px;right:2px;color:#c72939!important;cursor:pointer;font-size:20px}.image-upload-item .file-icon{width:95px;height:95px;display:block;font-size:95px}\n"] }]
}], ctorParameters: () => [], propDecorators: { file: [{
type: Input
}], allowDelete: [{
type: Input
}], onDelete: [{
type: Output
}], type: [{
type: Input
}] } });
class FileListItemVideoComponent {
constructor() {
this.onDelete = new EventEmitter();
}
ngOnInit() {
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FileListItemVideoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: FileListItemVideoComponent, selector: "ammo-file-list-item-video", inputs: { file: "file", allowDelete: "allowDelete" }, outputs: { onDelete: "onDelete" }, ngImport: i0, template: "<div class=\"video-upload-item\" [ngClass]=\"{uploading: file.uploading}\">\n <video class=\"media-player img\" controls preload=\"metadata\" *ngIf=\"file.url\">\n <source [type]=\"file.mime\" [src]=\"file.url\"/>\n </video>\n <mat-progress-bar mode=\"determinate\" *ngIf=\"file.uploading\" [value]=\"file.progressValue\"></mat-progress-bar>\n <div class=\"file-upload-img-info\" *ngIf=\"file.size\">\n Size: <div class=\"file-upload-img-info-value\" [innerHTML]=\"file.size| fileSize\"></div>\n </div>\n <a class=\"delete-btn\" *ngIf=\"allowDelete\" (click)=\"onDelete.emit(file)\" title=\"Delete Vieod\"><mat-icon>cancel</mat-icon></a>\n</div>\n", styles: [".video-upload-item{padding:15px 10px;position:relative;margin-bottom:1rem;border:1px solid #c2c9d8;border-radius:4px;background-color:#fff;width:300px;margin-right:5px}.video-upload-item video{width:100%}.video-upload-item.uploading video{opacity:.5}.video-upload-item .file-upload-img-info{padding-top:10px;text-align:center;color:#9e9e9e}.video-upload-item .file-upload-img-info .file-upload-img-info-value{font-weight:500;color:#363e49}.video-upload-item .delete-btn{position:absolute;top:2px;right:2px;color:#c72939!important;cursor:pointer;font-size:20px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$4.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "pipe", type: FileSizePipe, name: "fileSize" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FileListItemVideoComponent, decorators: [{
type: Component,
args: [{ selector: 'ammo-file-list-item-video', template: "<div class=\"video-upload-item\" [ngClass]=\"{uploading: file.uploading}\">\n <video class=\"media-player img\" controls preload=\"metadata\" *ngIf=\"file.url\">\n <source [type]=\"file.mime\" [src]=\"file.url\"/>\n </video>\n <mat-progress-bar mode=\"determinate\" *ngIf=\"file.uploading\" [value]=\"file.progressValue\"></mat-progress-bar>\n <div class=\"file-upload-img-info\" *ngIf=\"file.size\">\n Size: <div class=\"file-upload-img-info-value\" [innerHTML]=\"file.size| fileSize\"></div>\n </div>\n <a class=\"delete-btn\" *ngIf=\"allowDelete\" (click)=\"onDelete.emit(file)\" title=\"Delete Vieod\"><mat-icon>cancel</mat-icon></a>\n</div>\n", styles: [".video-upload-item{padding:15px 10px;position:relative;margin-bottom:1rem;border:1px solid #c2c9d8;border-radius:4px;background-color:#fff;width:300px;margin-right:5px}.video-upload-item video{width:100%}.video-upload-item.uploading video{opacity:.5}.video-upload-item .file-upload-img-info{padding-top:10px;text-align:center;color:#9e9e9e}.video-upload-item .file-upload-img-info .file-upload-img-info-value{font-weight:500;color:#363e49}.video-upload-item .delete-btn{position:absolute;top:2px;right:2px;color:#c72939!important;cursor:pointer;font-size:20px}\n"] }]
}], ctorParameters: () => [], propDecorators: { file: [{
type: Input
}], allowDelete: [{
type: Input
}], onDelete: [{
type: Output
}] } });
//import { map } from 'rxjs/operators';
class FormItemFile extends FormItem {
}
class FormItemFileComponent {
constructor(service, zone) {
this.service = service;
this.zone = zone;
this.editable = true;
this.changes = new EventEmitter();
this.matcher = new SurveyErrorStateMatcher();
this.fileObjects = [];
this.allowDelete = true;
this.uploadedFilesNumber = 0;
this.uploadFilesNumber = 0;
this.acceptTypes = {
image: '.png, .jpg, .jpeg',
video: '.mp4, .mov',
file: ''
};
}
ngOnInit() {
if (this.item.value) {
this.files = this.item.value.map(f => {
const obj = _.extend(new SurveyFile(), f);
return obj;
});
}
this.matcher.item = this.item;
this.accept = this.acceptTypes[this.item.fileType];
}
ngOnChanges() {
this.matcher.item = this.item;
}
checkRequired(placeholder) {
if (placeholder === 'Required') {
return true;
}
}
onValueChanges(item) {
this.changes.emit(item);
}
removeFile(file) {
this.files = _.without(this.files, file);
//this.fileObjects=_.without(this.fileObjects, this.fileObjects.find(f=>f.id===file.id));
this.item.value = (this.item.value || []).filter(f => f.url !== file.url);
this.changes.emit(this.item);
}
fileOver(fileIsOver) {
console.log('fileIsOver', fileIsOver);
this.fileIsOver = fileIsOver;
}
onFileDrop(files) {
const surveyFiles = [];
let droppedFiles = files.filter(f => f.fileEntry.isFile && (!this.accept || this.accept.split(',').find(ext => f.fileEntry.name.indexOf(ext.trim()) > 0)));
if (!this.item.multiple && droppedFiles.length > 1) {
droppedFiles = [droppedFiles[0]];
}
console.log('onFileDrop', files, this.files, droppedFiles);
droppedFiles.forEach(droppedFile => {
const fileEntry = droppedFile.fileEntry;
fileEntry.file((file) => {
const surveyFile = new SurveyFile();
surveyFile.size = file.size;
surveyFile.name = file.name;
surveyFile.mime = file.type;
surveyFile.file = file;
if (file.type.indexOf('image/') === 0) {
if (FileReader) {
var fr = new FileReader();
fr.onload = function () {
surveyFile.src = fr.result;
};
fr.readAsDataURL(file);
}
}
surveyFiles.push(surveyFile);
if (surveyFiles.length === droppedFiles.length) {
this.uploadFiles(surveyFiles);
}
// Here you can access the real file
console.log(droppedFile.relativePath, file);
});
});
this.fileIsOver = false;
}
uploadFiles(files) {
console.log(files);
if (!files.length) {
return;
}
this.item.busy = true;
files.forEach(file => {
file.uploading = true;
file.progressSubject = new Observable(observer => {
file.progressObserver = observer;
});
file.progressSubject.subscribe(data => {
this.zone.run(() => {
file.progressValue = data;
//console.log(file);
if (file.url) {
this.item.value = this.files.filter(f => f.url).map(f => {
const obj = new SurveyFile;
obj.url = f.url;
obj.name = f.name;
obj.mime = f.mime;
obj.size = f.size;
return obj;
});
console.log(this.item);
this.item.busy = !!files.find(f => f.uploading);
this.changes.emit(this.item);
}
});
}, err => {
this.item.busy = !!files.find(f => f.uploading);
});
});
this.service.onFilesSelected.next(files);
this.files = _.union(this.files, files);
this.isFilesUploading = true;
this.uploadFilesNumber = files.length;
this.uploadedFilesNumber = 1;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FormItemFileComponent, deps: [{ token: NgxSurveyService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: FormItemFileComponent, selector: "ammo-form-item-file", inputs: { item: "item", editable: "editable" }, outputs: { changes: "changes" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"form-group\">\n <div class=\"col-xs-12 files-set\" [ngClass]=\"{'files-upload-editable':editable}\">\n <div *ngIf=\"item.label\" class=\"files-set-title label\" [ngClass]=\"{'has-error':item.errors && item.errors.length}\">{{item.label}} <span *ngIf=\"item.required\" class=\"required-asterix\">*</span></div>\n <div [ngClass]=\"'files-list-'+item.fileType\">\n <div class=\"file-item\" *ngFor=\"let file of files\">\n <ammo-file-list-item-image *ngIf=\"item.fileType!=='video'\"\n [type]=\"item.fileType\"\n [file]=\"file\"\n [allowDelete]=\"editable\"\n (onDelete)=\"removeFile($event)\"\n >\n </ammo-file-list-item-image>\n <ammo-file-list-item-video *ngIf=\"item.fileType==='video'\"\n [file]=\"file\"\n [allowDelete]=\"editable\"\n (onDelete)=\"removeFile($event)\"\n >\n </ammo-file-list-item-video>\n </div>\n </div>\n <div *ngIf=\"!editable && !files?.length\" class=\"no-files-message\">\n No {{item.fileType==='video' ? 'Videos' : 'Photos'}} Submitted\n </div>\n <ngx-file-drop *ngIf=\"(item.multiple || (!item.multiple && (!files || files.length<1)))\"\n dropZoneLabel=\"Drop files here\"\n (onFileDrop)=\"onFileDrop($event)\"\n (onFileOver)=\"fileOver(true)\"\n (onFileLeave)=\"fileOver(false)\"\n [multiple]=\"item.multiple\"\n [accept]=\"accept\"\n [directory]=\"false\"\n [disabled]=\"!editable\"\n [ngClass]=\"{'file-is-over':fileIsOver}\"\n >\n <ng-template ngx-file-drop-content-tmp let-openFileSelector=\"openFileSelector\">\n <span *ngIf=\"!fileIsOver && editable\">\n <ng-container *ngIf=\"item.areaLabel\"{{item.areaLabel}}></ng-container>\n <ng-container *ngIf=\"!item.areaLabel\"> Drag & Drop Files here <br />or </ng-container>\n </span>\n <span *ngIf=\"fileIsOver\">Drop files here</span>\n <br/>\n <button *ngIf=\"!fileIsOver\" mat-raised-button [disabled]=\"!editable\" color=\"primary\" type=\"button\" (click)=\"openFileSelector()\">{{item.buttonLabel || 'Browse Files'}}</button>\n </ng-template>\n </ngx-file-drop>\n <mat-error *ngIf=\"item.errors && item.errors.length\">\n <div *ngFor=\"let error of item.errors\">{{error.message}}</div>\n </mat-error>\n <mat-hint align=\"start\" *ngIf=\"!(item.errors && item.errors.length)\"><strong>{{item.hint}}</strong> </mat-hint>\n </div>\n</div>\n\n\n", styles: [":host{margin-top:10px;display:block}:host ::ng-deep .ngx-file-drop__content{display:block!important;text-align:center;padding-top:8px}:host ::ng-deep .ngx-file-drop__content .mat-raised-button{margin-top:5px}:host ::ng-deep .file-is-over .ngx-file-drop__content{display:flex!important;padding-top:0}.files-list-image,.files-list-file{display:flex;flex-flow:wrap}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i5$2.NgxFileDropComponent, selector: "ngx-file-drop", inputs: ["accept", "directory", "multiple", "dropZoneLabel", "dropZoneClassName", "useDragEnter", "contentClassName", "showBrowseBtn", "browseBtnClassName", "browseBtnLabel", "disabled"], outputs: ["onFileDrop", "onFileOver", "onFileLeave"] }, { kind: "directive", type: i5$2.NgxFileDropContentTemplateDirective, selector: "[ngx-file-drop-content-tmp]" }, { kind: "component", type: FileListItemImageComponent, selector: "ammo-file-list-item-image", inputs: ["file", "allowDelete", "type"], outputs: ["onDelete"] }, { kind: "component", type: FileListItemVideoComponent, selector: "ammo-file-list-item-video", inputs: ["file", "allowDelete"], outputs: ["onDelete"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FormItemFileComponent, decorators: [{
type: Component,
args: [{ selector: 'ammo-form-item-file', template: "<div class=\"form-group\">\n <div class=\"col-xs-12 files-set\" [ngClass]=\"{'files-upload-editable':editable}\">\n <div *ngIf=\"item.label\" class=\"files-set-title label\" [ngClass]=\"{'has-error':item.errors && item.errors.length}\">{{item.label}} <span *ngIf=\"item.required\" class=\"required-asterix\">*</span></div>\n <div [ngClass]=\"'files-list-'+item.fileType\">\n <div class=\"file-item\" *ngFor=\"let file of files\">\n <ammo-file-list-item-image *ngIf=\"item.fileType!=='video'\"\n [type]=\"item.fileType\"\n [file]=\"file\"\n [allowDelete]=\"editable\"\n (onDelete)=\"removeFile($event)\"\n >\n </ammo-file-list-item-image>\n <ammo-file-list-item-video *ngIf=\"item.fileType==='video'\"\n [file]=\"file\"\n [allowDelete]=\"editable\"\n (onDelete)=\"removeFile($event)\"\n >\n </ammo-file-list-item-video>\n </div>\n </div>\n <div *ngIf=\"!editable && !files?.length\" class=\"no-files-message\">\n No {{item.fileType==='video' ? 'Videos' : 'Photos'}} Submitted\n </div>\n <ngx-file-drop *ngIf=\"(item.multiple || (!item.multiple && (!files || files.length<1)))\"\n dropZoneLabel=\"Drop files here\"\n (onFileDrop)=\"onFileDrop($event)\"\n (onFileOver)=\"fileOver(true)\"\n (onFileLeave)=\"fileOver(false)\"\n [multiple]=\"item.multiple\"\n [accept]=\"accept\"\n [directory]=\"false\"\n [disabled]=\"!editable\"\n [ngClass]=\"{'file-is-over':fileIsOver}\"\n >\n <ng-template ngx-file-drop-content-tmp let-openFileSelector=\"openFileSelector\">\n <span *ngIf=\"!fileIsOver && editable\">\n <ng-container *ngIf=\"item.areaLabel\"{{item.areaLabel}}></ng-container>\n <ng-container *ngIf=\"!item.areaLabel\"> Drag & Drop Files here <br />or </ng-container>\n </span>\n <span *ngIf=\"fileIsOver\">Drop files here</span>\n <br/>\n <button *ngIf=\"!fileIsOver\" mat-raised-button [disabled]=\"!editable\" color=\"primary\" type=\"button\" (click)=\"openFileSelector()\">{{item.buttonLabel || 'Browse Files'}}</button>\n </ng-template>\n </ngx-file-drop>\n <mat-error *ngIf=\"item.errors && item.errors.length\">\n <div *ngFor=\"let error of item.errors\">{{error.message}}</div>\n </mat-error>\n <mat-hint align=\"start\" *ngIf=\"!(item.errors && item.errors.length)\"><strong>{{item.hint}}</strong> </mat-hint>\n </div>\n</div>\n\n\n", styles: [":host{margin-top:10px;display:block}:host ::ng-deep .ngx-file-drop__content{display:block!important;text-align:center;padding-top:8px}:host ::ng-deep .ngx-file-drop__content .mat-raised-button{margin-top:5px}:host ::ng-deep .file-is-over .ngx-file-drop__content{display:flex!important;padding-top:0}.files-list-image,.files-list-file{display:flex;flex-flow:wrap}\n"] }]
}], ctorParameters: () => [{ type: NgxSurveyService }, { type: i0.NgZone }], propDecorators: { item: [{
type: Input
}], editable: [{
type: Input
}], changes: [{
type: Output
}] } });
//import moment from 'moment';
class DurationPipe {
transform(value, ...args) {
if (typeof args === 'undefined' || !args.length) {
throw new Error('DurationPipe: missing required time unit argument');
}
const arr = new Date(value * 1000).toISOString().substr(11, 8).split(':');
const duration = {
days: 0,
hours: parseInt(arr[0]),
minutes: parseInt(arr[1]),
seconds: parseInt(arr[2]),
};
const formats = {
short: {
d: 'd',
h: 'h',
m: 'm',
s: 's',
},
long: {
d: ' days',
h: ' hrs',
m: ' mins',
s: ' secs',
}
};
const f = args[1] || 'short';
return args[0] === 'seconds'
? (duration.days ? duration.days + formats[f].d + ' ' : '') + (duration.hours ? duration.hours + formats[f].h + ' ' : '') + (duration.minutes ? duration.minutes + formats[f].m + ' ' : '') + duration.seconds + formats[f].s
: arr.join(':');
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: DurationPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.12", ngImport: i0, type: DurationPipe, name: "duration" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: DurationPipe, decorators: [{
type: Pipe,
args: [{
name: 'duration',
pure: true,
}]
}] });
class FormItemVoice extends FormItem {
}
class FormItemVoiceComponent {
constructor(service, zone) {
this.service = service;
this.zone = zone;
this.editable = true;
this.changes = new EventEmitter();
this.matcher = new SurveyErrorStateMatcher();
this.allowDelete = true;
this.uploadedFilesNumber = 0;
this.uploadFilesNumber = 0;
this.timeLimit = 120;
this.isEdge = navigator.userAgent.indexOf('Edge') !== -1 && (!!navigator['msSaveOrOpenBlob'] || !!navigator['msSaveBlob']);
this.isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
this.controlIcon = 'record-circle';
}
ngOnInit() {
if (this.item.value) {
this.file = _.extend(new SurveyFile(), this.item.value);
if (this.file?.url) {
this.hasRecord = true;
}
}
this.matcher.item = this.item;
this.service;
this.zone;
Observable;
}
ngAfterViewInit() {
// set the initial state of the video
let audio = this.audio.nativeElement;
audio.muted = false;
audio.controls = true;
audio.autoplay = false;
if (this.file?.url) {
this.hasRecord = true;
this.wavesurfer = WaveSurfer.create({
container: this.waveformElement.nativeElement,
height: 190,
waveColor: '#d4d9dd',
progressColor: '#555',
normalize: true,
barHeight: 8,
cursorWidth: 1,
cursorColor: '#d9d9d9'
});
this.wavesurfer.load(this.file.url);
this.wavesurfer.on('ready', () => {
console.log(this.wavesurfer);
this.zone.run(() => {
if (this.file) {
this.file.duration = this.wavesurfer.getDuration();
this.duration = this.file.duration * 1000;
this.wavesurferPlay = false;
}
});
});
this.wavesurfer.on('play', () => {
this.zone.run(() => {
this.wavesurferPlay = true;
});
});
this.wavesurfer.on('pause', () => {
this.zone.run(() => {
this.wavesurferPlay = false;
});
});
}
}
ngOnChanges() {
this.matcher.item = this.item;
}
checkRequired(placeholder) {
if (placeholder === 'Required') {
return true;
}
}
onValueChanges(item) {
this.changes.emit(item);
}
clear() {
this.file = undefined;
this.fileObject = undefined;
}
/*
uploadFiles(files: SurveyFile[]) {
console.log(files);
if(!files.length){
return;
}
files.forEach(file=>{
file.uploading=true;
file.progressSubject = new Observable(observer => {
file.progressObserver = observer
});
file.progressSubject.subscribe(
data => {
this.zone.run(()=>{
file.progressValue=data;
//console.log(file);
if (file.url){
this.item.value=this.files.filter(f=>f.url).map(f=>{
const obj=new SurveyFile;
obj.url=f.url;
obj.name=f.name;
obj.mime=f.mime;
return obj;
});
console.log(this.item);
this.changes.emit(this.item);
}
})
}
);
})
this.service.onFilesSelected.next(files);
this.files=_.union(this.files, files);
this.isFilesUploading = true;
this.uploadFilesNumber=files.length;
this.uploadedFilesNumber=1;
}
*/
onCloseClick() {
//this.dialogRef.close();
}
startRecording() {
let mediaConstraints = {
audio: this.isEdge ? true : {
echoCancellation: false
}
};
this.blobSize = 0;
//window['AudioContext'] = window['AudioContext'] || window['webkitAudioContext'];
navigator.mediaDevices
.getUserMedia(mediaConstraints)
.then(this.successCallback.bind(this), this.errorCallback.bind(this));
}
errorCallback(stream) {
//console.log(stream);
}
successCallback(stream) {
const microphone = stream;
if (this.isSafari) {
this.audio.muted = true;
this.audio.srcObject = microphone;
}
//console.log(stream);
//let audio: HTMLAudioElement = this.audio.nativeElement;
let options = {
mimeType: 'audio/webm',
numberOfAudioChannels: this.isEdge ? 1 : 2,
checkForInactiveTracks: true,
bufferSize: 16384,
elementClass: 'multi-streams-mixer'
};
this.stream = stream;
if (this.isSafari || this.isEdge) {
options['recorderType'] = StereoAudioRecorder;
}
if (navigator.platform && navigator.platform.toString().toLowerCase().indexOf('win') === -1) {
options['sampleRate'] = 48000; // or 44100 or remove this line for default
}
if (this.isSafari) {
options['sampleRate'] = 44100;
options['bufferSize'] = 4096;
options['numberOfAudioChannels'] = 2;
options['mimeType'] = 'audio/wav';
}
if (this.recordRTC) {
this.recordRTC.destroy();
this.recordRTC = null;
}
this.recordRTC = new RecordRTC(stream, options);
this.recordRTC.startRecording();
this.audio.srcObject = stream;
//audio.src = this.recordRTC.toURL();
this.duration = 0;
this.durationInterval = setInterval(() => {
//console.log(this.recordRTC.getState(), this.recordRTC);
if (this.recordRTC && this.recordRTC.getState() === 'recording') {
this.duration++;
//this.cd.detectChanges();
}
else {
//clearInterval(durationInterval);
}
}, 1000);
//console.log(this.recordRTC);
this.toggleControls();
this.recordingInprogress = true;
}
toggleControls() {
let audio = this.audio.nativeElement;
audio.muted = !audio.muted;
audio.controls = !audio.controls;
audio.autoplay = !audio.autoplay;
}
stopRecording() {
let recordRTC = this.recordRTC;
recordRTC.stopRecording(this.processAudio.bind(this));
let stream = this.stream;
stream.getTracks().forEach(track => track.stop());
this.recordingInprogress = false;
if (this.durationInterval) {
clearInterval(this.durationInterval);
}
}
processAudio(audioVideoWebMURL) {
let audio = this.audio.nativeElement;
let recordRTC = this.recordRTC;
let fileReader = new FileReader();
fileReader;
audio.src = audioVideoWebMURL;
this.toggleControls();
this.recordedBlob = recordRTC.getBlob();
if (!this.recordedBlob) {
this.hasRecord = false;
return;
}
let ext = 'mp3';
if (this.recordedBlob.type) {
ext = this.recordedBlob.type.split('/')[1];
ext = ext.split(';')[0];
}
this.recordedBlob.name = 'audio.' + ext;
if (!this.file) {
this.file = new SurveyFile();
this.file.name = 'audio.' + ext;
}
//this.file.workflow='audio';
this.file.mime = this.recordedBlob.type;
fileReader.onload = (event) => {
if (this.file && event?.target) {
this.file.src = event.target['result'];
this.uploadFile(this.file);
}
};
fileReader.readAsArrayBuffer(this.recordedBlob);
this.file.size = this.recordedBlob.size;
this.zone.run(() => {
this.hasRecord = true;
});
//console.log(this.recordedBlob);
recordRTC.getDataURL(dataURL => {
//console.log(audioVideoWebMURL, dataURL, audio.src);
this.wavesurfer = WaveSurfer.create({
container: this.waveformElement.nativeElement,
height: 190,
waveColor: '#d4d9dd',
progressColor: '#555',
normalize: true,
barHeight: 8,
cursorWidth: 1,
cursorColor: '#d9d9d9'
});
this.wavesurfer.loadBlob(this.recordedBlob);
this.wavesurfer.on('ready', () => {
//console.log(this.wavesurfer.getDuration());
if (this.file) {
this.file.duration = this.wavesurfer.getDuration();
this.duration = this.file.duration * 1000;
this.wavesurferPlay = false;
}
});
this.wavesurfer.on('play', () => {
this.zone.run(() => {
this.wavesurferPlay = true;
});
});
this.wavesurfer.on('pause', () => {
this.zone.run(() => {
this.wavesurferPlay = false;
});
});
});
return this.file;
}
uploadFile(file) {
file.uploading = true;
file.progressSubject = new Observable(observer => {
file.progressObserver = observer;
});
this.item.busy = true;
file.progressSubject.subscribe(data => {
this.zone.run(() => {
file.progressValue = data;
//console.log(file);
if (file.url) {
const obj = new SurveyFile;
obj.url = file.url;
obj.name = file.name;
obj.mime = file.mime;
this.item.value = obj;
console.log(this.item);
this.item.busy = false;
this.changes.emit(this.item);
}
});
}, err => {
this.item.busy = false;
});
this.service.onFilesSelected.next([file]);
this.file = file;
}
play() {
if (this.wavesurfer) {
this.wavesurfer.play();
}
}
pause() {
if (this.wavesurfer) {
this.wavesurfer.pause();
}
}
togglePlay() {
if (this.wavesurfer) {
if (this.wavesurferPlay) {
this.pause();
this.controlIcon = 'play-circle-thin';
}
else {
this.play();
this.controlIcon = 'pause-circle-thin';
}
}
}
toggleRecording() {
//console.log('CLICKED');
if (this.recordingInprogress) {
this.stopRecording();
this.controlIcon = 'play-circle-thin';
}
else {
this.startRecording();
this.controlIcon = 'record-round';
}
}
clearBlob() {
this.file = undefined;
this.recordedBlob = null;
this.hasRecord = false;
if (this.wavesurfer) {
this.wavesurfer.destroy();
}
if (this.recordRTC) {
//this.recordRTC.destroy()
}
this.controlIcon = 'record-circle';
this.item.value = undefined;
this.changes.emit(this.item);
}
download() {
this.recordRTC.save('audio.webm');
}
onSave() {
//this.stopRecording();
}
ngOnDestroy() {
if (this.wavesurfer) {
this.wavesurfer.destroy();
}
if (this.recordRTC && this.recordRTC.state === 'recording') {
this.recordRTC.stopRecording();
this.recordRTC.clearRecordedData();
//this.stopRecording();
}
if (this.recordRTC) {
this.recordRTC.destroy();
}
if (this.stream) {
this.stream.getTracks().forEach(track => track.stop());
}
if (this.durationInterval) {
this.duration = 0;
clearInterval(this.durationInterval);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FormItemVoiceComponent, deps: [{ token: NgxSurveyService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: FormItemVoiceComponent, selector: "app-form-item-voice", inputs: { item: "item", editable: "editable" }, outputs: { changes: "changes" }, viewQueries: [{ propertyName: "audio", first: true, predicate: ["audio"], descendants: true, static: true }, { propertyName: "waveformElement", first: true, predicate: ["waveform"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"form-group\">\n <div class=\"col-xs-12 voice-recorder\">\n <div *ngIf=\"item.label\" class=\"voice-recorder-title label\" [ngClass]=\"{'has-error':item.errors && item.errors.length}\">{{item.label}} <span *ngIf=\"item.required\" class=\"required-asterix\">*</span></div>\n <div class=\"audio-recorder\">\n <audio #audio class=\"audio\" style=\"display:none;\" [src]=\"file?.url\"></audio>\n <div class=\"main-screen\">\n <div #waveform class=\"waveform\" [ngClass]=\"{hidden:recordingInprogress || !hasRecord}\"></div>\n <ng-container *ngIf=\"!recordingInprogress && hasRecord; else startScreen\">\n <button mat-button class=\"main-screen-button\" (click)=\"togglePlay()\" type=\"button\">\n <mat-icon class=\"main-screen-icon-big\">{{this.wavesurferPlay ? 'pause_circle_outline' : 'play_circle_outline'}}</mat-icon>\n </button>\n\n <a mat-button class=\"main-screen-button-aside download-btn\" *ngIf=\"item.value && item.value.url\" [href]=\"item.value.url\" target=\"_blank\" title=\"Dowload Record\">\n <mat-icon class=\"main-screen-icon-small\">download</mat-icon>\n </a>\n <button mat-button class=\"main-screen-button-aside delete-btn\" title=\"Delete Record\" (click)=\"clearBlob()\" *ngIf=\"editable\" type=\"button\">\n <mat-icon class=\"main-screen-icon-small\">cancel</mat-icon>\n </button>\n <mat-progress-bar mode=\"determinate\" *ngIf=\"file && file.uploading\" [value]=\"file.progressValue\"></mat-progress-bar>\n </ng-container>\n\n </div>\n\n <ng-template #startScreen>\n <div class=\"start-screen\">\n <button mat-button class=\"start-screen-button\" (click)=\"toggleRecording()\" [disabled]=\"!editable\" type=\"button\">\n <mat-icon class=\"start-screen-icon\" >{{recordingInprogress ? 'mic':'mic_none'}}</mat-icon>\n <div *ngIf=\"!recordingInprogress && !hasRecord\" class=\"start-screen-text\">Tap to record audio</div>\n <div *ngIf=\"recordingInprogress\" class=\"start-screen-text\">\n {{duration | duration:'seconds'}}\n / {{timeLimit - duration | duration:'seconds'}}\n </div>\n </button>\n </div>\n </ng-template>\n </div>\n <mat-error *ngIf=\"item.errors && item.errors.length\">\n <div *ngFor=\"let error of item.errors\">{{error.message}}</div>\n </mat-error>\n <mat-hint align=\"start\" *ngIf=\"!(item.errors && item.errors.length)\"><strong>{{item.hint}}</strong> </mat-hint>\n </div>\n</div>\n", styles: [".mat-mdc-form-field{width:100%}.audio-recorder{height:192px;background-color:#f9f9f9;border:1px solid #efefef;border-radius:4px}.start-screen{display:flex;align-items:center;justify-content:center;height:100%;position:absolute;top:0;width:100%}.start-screen-button{height:100%;width:100%}.start-screen-icon{font-size:6rem;color:#9b0000;width:96px;height:96px}.start-screen-text{color:#919191;margin-top:15px}.main-screen{position:relative;height:100%}.main-screen-button{position:absolute;top:50%;left:50%;transform:translate3d(-50%,-50%,0);padding:0;z-index:3;border-radius:50%}.main-screen-button-aside{position:absolute;bottom:15px;right:15px;min-width:48px;padding:0;border-radius:50%;z-index:3}.main-screen-button-aside.delete-btn .mat-icon{color:#c72939}.main-screen-button-aside.download-btn{left:15px;right:auto}.main-screen-button-aside.download-btn .mat-icon{color:#3f51b5}.main-screen-icon-big{font-size:6rem;color:#10027b;width:96px;height:96px}.main-screen-icon-small{font-size:3rem;color:#b1b1b1;width:48px;height:48px}#waveform{height:100%!important;background-color:#f9f9f9;display:block}#waveform.hidden{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$4.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "pipe", type: DurationPipe, name: "duration" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FormItemVoiceComponent, decorators: [{
type: Component,
args: [{ selector: 'app-form-item-voice', template: "<div class=\"form-group\">\n <div class=\"col-xs-12 voice-recorder\">\n <div *ngIf=\"item.label\" class=\"voice-recorder-title label\" [ngClass]=\"{'has-error':item.errors && item.errors.length}\">{{item.label}} <span *ngIf=\"item.required\" class=\"required-asterix\">*</span></div>\n <div class=\"audio-recorder\">\n <audio #audio class=\"audio\" style=\"display:none;\" [src]=\"file?.url\"></audio>\n <div class=\"main-screen\">\n <div #waveform class=\"waveform\" [ngClass]=\"{hidden:recordingInprogress || !hasRecord}\"></div>\n <ng-container *ngIf=\"!recordingInprogress && hasRecord; else startScreen\">\n <button mat-button class=\"main-screen-button\" (click)=\"togglePlay()\" type=\"button\">\n <mat-icon class=\"main-screen-icon-big\">{{this.wavesurferPlay ? 'pause_circle_outline' : 'play_circle_outline'}}</mat-icon>\n </button>\n\n <a mat-button class=\"main-screen-button-aside download-btn\" *ngIf=\"item.value && item.value.url\" [href]=\"item.value.url\" target=\"_blank\" title=\"Dowload Record\">\n <mat-icon class=\"main-screen-icon-small\">download</mat-icon>\n </a>\n <button mat-button class=\"main-screen-button-aside delete-btn\" title=\"Delete Record\" (click)=\"clearBlob()\" *ngIf=\"editable\" type=\"button\">\n <mat-icon class=\"main-screen-icon-small\">cancel</mat-icon>\n </button>\n <mat-progress-bar mode=\"determinate\" *ngIf=\"file && file.uploading\" [value]=\"file.progressValue\"></mat-progress-bar>\n </ng-container>\n\n </div>\n\n <ng-template #startScreen>\n <div class=\"start-screen\">\n <button mat-button class=\"start-screen-button\" (click)=\"toggleRecording()\" [disabled]=\"!editable\" type=\"button\">\n <mat-icon class=\"start-screen-icon\" >{{recordingInprogress ? 'mic':'mic_none'}}</mat-icon>\n <div *ngIf=\"!recordingInprogress && !hasRecord\" class=\"start-screen-text\">Tap to record audio</div>\n <div *ngIf=\"recordingInprogress\" class=\"start-screen-text\">\n {{duration | duration:'seconds'}}\n / {{timeLimit - duration | duration:'seconds'}}\n </div>\n </button>\n </div>\n </ng-template>\n </div>\n <mat-error *ngIf=\"item.errors && item.errors.length\">\n <div *ngFor=\"let error of item.errors\">{{error.message}}</div>\n </mat-error>\n <mat-hint align=\"start\" *ngIf=\"!(item.errors && item.errors.length)\"><strong>{{item.hint}}</strong> </mat-hint>\n </div>\n</div>\n", styles: [".mat-mdc-form-field{width:100%}.audio-recorder{height:192px;background-color:#f9f9f9;border:1px solid #efefef;border-radius:4px}.start-screen{display:flex;align-items:center;justify-content:center;height:100%;position:absolute;top:0;width:100%}.start-screen-button{height:100%;width:100%}.start-screen-icon{font-size:6rem;color:#9b0000;width:96px;height:96px}.start-screen-text{color:#919191;margin-top:15px}.main-screen{position:relative;height:100%}.main-screen-button{position:absolute;top:50%;left:50%;transform:translate3d(-50%,-50%,0);padding:0;z-index:3;border-radius:50%}.main-screen-button-aside{position:absolute;bottom:15px;right:15px;min-width:48px;padding:0;border-radius:50%;z-index:3}.main-screen-button-aside.delete-btn .mat-icon{color:#c72939}.main-screen-button-aside.download-btn{left:15px;right:auto}.main-screen-button-aside.download-btn .mat-icon{color:#3f51b5}.main-screen-icon-big{font-size:6rem;color:#10027b;width:96px;height:96px}.main-screen-icon-small{font-size:3rem;color:#b1b1b1;width:48px;height:48px}#waveform{height:100%!important;background-color:#f9f9f9;display:block}#waveform.hidden{display:block}\n"] }]
}], ctorParameters: () => [{ type: NgxSurveyService }, { type: i0.NgZone }], propDecorators: { audio: [{
type: ViewChild,
args: ['audio', { static: true }]
}], waveformElement: [{
type: ViewChild,
args: ['waveform', { static: true }]
}], item: [{
type: Input
}], editable: [{
type: Input
}], changes: [{
type: Output
}] } });
class FormItemLabel extends FormItem {
}
class FormItemLabelComponent {
constructor() {
this.editable = true;
this.changes = new EventEmitter();
}
ngOnInit() {
//console.log(this.item);
}
ngOnChanges() {
}
checkRequired(placeholder) {
}
onValueChanges(item) {
this.changes.emit(item);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FormItemLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: FormItemLabelComponent, selector: "app-form-item-label", inputs: { item: "item", editable: "editable" }, outputs: { changes: "changes" }, usesOnChanges: true, ngImport: i0, template: "<div [innerHTML]=\"item.htmlContent\"></div>\n", styles: [""] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FormItemLabelComponent, decorators: [{
type: Component,
args: [{ selector: 'app-form-item-label', template: "<div [innerHTML]=\"item.htmlContent\"></div>\n" }]
}], ctorParameters: () => [], propDecorators: { item: [{
type: Input
}], editable: [{
type: Input
}], changes: [{
type: Output
}] } });
const FormItemTypes = {
label: {
component: FormItemLabelComponent,
model: FormItemLabel,
label: 'Label'
},
'string': {
component: FormItemStringComponent,
model: FormItemString,
label: 'Short text'
},
text: {
component: FormItemTextComponent,
model: FormItemText,
label: 'Long text'
},
rating: {
component: FormItemRatingComponent,
model: FormItemRating,
label: 'Star rating'
},
numericRating: {
component: FormItemNumericRatingComponent,
model: FormItemNumericRating,
label: 'Numeric rating'
},
segments: {
component: FormItemSegmentsComponent,
model: FormItemSegments,
label: 'Segments'
},
radio: {
component: FormItemRadioComponent,
model: FormItemRadio,
label: 'Multi Choice'
},
select: {
component: FormItemSelectComponent,
model: FormItemSelect,
//label: 'Select'
},
optionsEditor: {
component: FormItemOptionsEditorComponent,
model: FormItemOptionsEditor
},
checkbox: {
component: FormItemCheckboxComponent,
model: FormItemCheckbox,
label: 'Checkbox'
},
date: {
component: FormItemDateComponent,
model: FormItemDate,
label: 'Date'
},
file: {
component: FormItemFileComponent,
model: FormItemFile,
label: 'File Upload'
},
voice: {
component: FormItemVoiceComponent,
model: FormItemVoice,
label: 'Voice Record'
},
};
function buildOption(optionValue, label) {
return { optionValue, label };
}
function buildField(type, data, required) {
const obj = Object.assign(new (FormItemTypes[type].model), data);
obj.type = type;
if (required) {
obj.fieldValidations = {
rules: [
{
minLength: 1
}
]
};
}
return obj;
}
class FormItemComponent {
constructor(componentFactoryResolver) {
this.componentFactoryResolver = componentFactoryResolver;
this.editable = true;
this.isMobile = false;
this.changes = new EventEmitter();
}
ngOnInit() {
this.loadComponent();
}
ngOnChanges(changes) {
if (changes && (changes.type || changes.id)) {
this.loadComponent();
}
}
ngOnDestroy() {
if (this.subscription) {
this.subscription.unsubscribe();
}
}
loadComponent() {
if (!FormItemTypes[this.type]) {
return;
}
let componentFactory = this.componentFactoryResolver.resolveComponentFactory(FormItemTypes[this.type].component);
let viewContainerRef = this.itemHost.viewContainerRef;
viewContainerRef.clear();
let componentRef = viewContainerRef.createComponent(componentFactory);
componentRef.instance.item = this.item;
componentRef.instance.editable = this.editable;
componentRef.instance.isMobile = this.isMobile;
this.subscription = componentRef.instance.changes.subscribe(item => this.changes.emit(item));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FormItemComponent, deps: [{ token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: FormItemComponent, selector: "ngx-survey-form-item", inputs: { type: "type", item: "item", editable: "editable", isMobile: "isMobile", id: "id" }, outputs: { changes: "changes" }, viewQueries: [{ propertyName: "itemHost", first: true, predicate: FormItemDirective, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template form-item-host></ng-template>\n", styles: [":host ::ng-deep label,:host ::ng-deep .label{color:#0000008a}:host ::ng-deep label.has-error,:host ::ng-deep .label.has-error{color:#f44336}\n"], dependencies: [{ kind: "directive", type: FormItemDirective, selector: "[form-item-host]" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FormItemComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-survey-form-item', template: "<ng-template form-item-host></ng-template>\n", styles: [":host ::ng-deep label,:host ::ng-deep .label{color:#0000008a}:host ::ng-deep label.has-error,:host ::ng-deep .label.has-error{color:#f44336}\n"] }]
}], ctorParameters: () => [{ type: i0.ComponentFactoryResolver }], propDecorators: { type: [{
type: Input
}], item: [{
type: Input
}], editable: [{
type: Input
}], isMobile: [{
type: Input
}], id: [{
type: Input
}], changes: [{
type: Output
}], itemHost: [{
type: ViewChild,
args: [FormItemDirective, { static: true }]
}] } });
class NgxSurveyComponent {
get submitDisabled() {
return !!this.form.find(section => section.items.find(item => item.busy));
}
//private _bpSub: Subscription;
constructor(
//private bpObserver: BreakpointObserver,
elRef, service) {
this.elRef = elRef;
this.service = service;
this.value = {};
this.validateByStepChange = true;
this.editable = true;
this.valueChange = new EventEmitter();
this.stepChanged = new EventEmitter();
this.submit = new EventEmitter();
this.selectedIndex = 0;
}
ngOnInit() {
//console.log(this.value);
this.form = this.service.initForm(this.form, this.value);
if (this.splitBySteps) {
this.form.forEach(section => {
section.isEditable = true;
});
}
/*
this._bpSub = this.bpObserver
.observe(['(max-width: 599px)'])
.subscribe((state: BreakpointState) => {
this.setMobileStepper(state.matches);
});
*/
}
ngAfterViewInit() {
//console.log(this.stepper);
}
onResized(event) {
//TODO
}
/*
onResized(event: ResizedEvent) {
if (event.newRect.width<600 && !this.isMobile){
this.setMobileStepper(true);
}
else if (event.newRect.width>=600 && this.isMobile){
this.setMobileStepper(false);
}
this.resized.emit(event);
//this.width = event.newWidth;
//this.height = event.newHeight;
}*/
scrollToField(field) {
let el = this.elRef.nativeElement.querySelector('#form_item_' + field.name);
if (el) {
el.scrollIntoView();
}
}
;
isStepEnabled(section) {
const prevSection = this.form[this.form.indexOf(section) - 1];
return !this.validateByStepChange || !prevSection || (prevSection && prevSection.submited && !prevSection.hasError);
}
onItemChanges(item) {
if (!this.editable) {
return;
}
item.errors = this.service.getErrors(item);
const { value } = this.service.getValue(this.form, false);
this.valueChange.emit(value);
}
selectionChanged(event) {
this.selectedIndex = event.selectedIndex;
}
setMobileStepper(isMobile) {
this.isMobile = isMobile;
setTimeout(() => {
if (this.stepper) {
this.stepper.selectedIndex = this.selectedIndex;
}
});
}
onStepChange(step) {
//console.log(step);
this.stepChanged.emit(step);
if (this.validateByStepChange && step.previouslySelectedIndex >= 0 && this.form[step.previouslySelectedIndex]) {
this.submitStep(this.form[step.previouslySelectedIndex], false);
}
// this.stepper.selectedIndex=0;
}
submitForm() {
const { valid, value, firstError } = this.service.getValue(this.form, true);
if (valid) {
this.submit.emit(value);
}
else {
this.scrollToField(firstError);
}
}
submitStep(section, goToNext) {
if (!this.editable) {
return;
}
//console.log(section);
const { valid, firstError } = this.service.getValue([section], true);
//console.log({valid, value, firstError});
if (valid) {
section.hasError = false;
section.submited = true;
//console.log(this.stepper);
if (goToNext) {
setTimeout(() => {
this.stepper.next();
}, 100);
}
}
else {
//console.log(firstError);
this.scrollToField(firstError);
section.hasError = true;
if (firstError && firstError.errors && firstError.errors[0]) {
section.firstErrorText = firstError.label + ': ' + firstError.errors[0].message;
}
}
}
ngOnDestroy() {
//this._bpSub.unsubscribe();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: NgxSurveyComponent, deps: [{ token: i0.ElementRef }, { token: NgxSurveyService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: NgxSurveyComponent, selector: "ngx-survey", inputs: { form: "form", value: "value", splitBySteps: "splitBySteps", validateByStepChange: "validateByStepChange", submitInProgress: "submitInProgress", submitErrorText: "submitErrorText", editable: "editable" }, outputs: { valueChange: "valueChange", stepChanged: "stepChanged", submit: "submit" }, viewQueries: [{ propertyName: "stepper", first: true, predicate: ["stepper"], descendants: true }], ngImport: i0, template: "<div (resized)=\"onResized($event)\">\n <form name=\"surveyForm\" *ngIf=\"!splitBySteps\">\n <fieldset class=\"form-fieldset\" *ngFor=\"let section of form\">\n <ng-container *ngIf=\"service.isSectionVisible(form, section)\">\n <legend class=\"form-legend\" *ngIf=\"section.title || section.subtitle\">\n <span [ngClass]=\"'section-style-'+section.sectionStyle\" [innerHtml]=\"section.title\"></span>\n <span *ngIf=\"section.subtitle\"><br /><small [innerHtml]=\"section.subtitle\"></small></span>\n </legend>\n\n <div class=\"form-fieldset-content\">\n <div *ngFor=\"let item of section.items\" [attr.id]=\"'form_item_'+item.name\">\n <ngx-survey-form-item\n *ngIf=\"service.isItemVisible(form, section, item)\"\n [type]=\"item.type\"\n [item]=\"item\"\n [editable]=\"editable\"\n [isMobile]=\"isMobile\"\n (changes)=\"onItemChanges($event)\"\n ></ngx-survey-form-item>\n </div>\n </div>\n </ng-container>\n </fieldset>\n </form>\n\n <div *ngIf=\"splitBySteps\">\n <mat-horizontal-stepper #stepper *ngIf=\"!isMobile\"\n (selectionChange)=\"onStepChange($event)\"\n >\n <!--\n <ng-template matStepperIcon=\"done\" let-index=\"index\">\n {{index+1}}\n </ng-template>\n\n -->\n\n <mat-step *ngFor=\"let section of form; index as i;\"\n [editable]=\"isStepEnabled(section)\"\n [completed]=\"section.submited\"\n\n [hasError]=\"section.hasError\"\n [errorMessage]=\"section.firstErrorText\"\n >\n\n <form>\n <ng-template matStepLabel>{{section.title}}</ng-template>\n <h3 *ngIf=\"section.subtitle\">{{section.subtitle}}</h3>\n <div *ngFor=\"let item of section.items\" [attr.id]=\"'form_item_'+item.name\">\n <ngx-survey-form-item\n *ngIf=\"service.isItemVisible(form, section, item)\"\n [type]=\"item.type\"\n [item]=\"item\"\n [editable]=\"editable\"\n [isMobile]=\"isMobile\"\n (changes)=\"onItemChanges($event)\"\n ></ngx-survey-form-item>\n </div>\n </form>\n <div *ngIf=\"i<form.length-1\">\n <button mat-button type=\"button\" class=\"btn btn-primary btn-block\" (click)=\"submitStep(section, true)\">Continue</button>\n </div>\n <div *ngIf=\"i>=form.length-1\">\n <div class=\"text-center text-danger global-error\" *ngIf=\"submitErrorText\">{{submitErrorText}}<br /></div>\n <button mat-button type=\"button\" class=\"btn btn-success btn-block\" (click)=\"submitForm()\" [disabled]=\"submitInProgress || submitDisabled\"><i class=\"fa fa-spinner fa-spin\" *ngIf=\"submitInProgress\"></i> Submit</button>\n </div>\n </mat-step>\n </mat-horizontal-stepper>\n\n <mat-vertical-stepper #stepper *ngIf=\"isMobile\"\n (selectionChange)=\"onStepChange($event)\"\n >\n <!--\n <ng-template matStepperIcon=\"done\" let-index=\"index\">\n {{index+1}}\n </ng-template>\n\n -->\n\n <mat-step *ngFor=\"let section of form; index as i;\"\n [editable]=\"isStepEnabled(section)\"\n [completed]=\"section.submited\"\n\n [hasError]=\"section.hasError\"\n [errorMessage]=\"section.firstErrorText\"\n >\n\n <form>\n <ng-template matStepLabel>{{section.title}}</ng-template>\n <h3 *ngIf=\"section.subtitle\">{{section.subtitle}}</h3>\n <div *ngFor=\"let item of section.items\" [attr.id]=\"'form_item_'+item.name\">\n <ngx-survey-form-item\n *ngIf=\"service.isItemVisible(form, section, item)\"\n [type]=\"item.type\"\n [item]=\"item\"\n [editable]=\"editable\"\n (changes)=\"onItemChanges($event)\"\n [isMobile]=\"isMobile\"\n ></ngx-survey-form-item>\n </div>\n </form>\n <div *ngIf=\"i<form.length-1\">\n <button mat-button type=\"button\" class=\"btn btn-primary btn-block\" (click)=\"submitStep(section, true)\">Continue</button>\n </div>\n <div *ngIf=\"i>=form.length-1\">\n <div class=\"text-center text-danger global-error\" *ngIf=\"submitErrorText\">{{submitErrorText}}<br /></div>\n <button mat-button type=\"button\" class=\"btn btn-success btn-block\" (click)=\"submitForm()\" [disabled]=\"submitInProgress || submitDisabled\"><i class=\"fa fa-spinner fa-spin\" *ngIf=\"submitInProgress\"></i> Submit</button>\n </div>\n </mat-step>\n </mat-vertical-stepper>\n </div>\n</div>\n", styles: ["::ng-deep .mat-step-header.mat-disabled{cursor:default}::ng-deep .mat-step-header.mat-disabled .mat-step-icon-state-done{background-color:#0000008a}::ng-deep .mat-step-header.mat-disabled .mat-step-label.mat-step-label-active{color:#0000008a}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i5$3.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i5$3.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i5$3.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "component", type: FormItemComponent, selector: "ngx-survey-form-item", inputs: ["type", "item", "editable", "isMobile", "id"], outputs: ["changes"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: NgxSurveyComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-survey', template: "<div (resized)=\"onResized($event)\">\n <form name=\"surveyForm\" *ngIf=\"!splitBySteps\">\n <fieldset class=\"form-fieldset\" *ngFor=\"let section of form\">\n <ng-container *ngIf=\"service.isSectionVisible(form, section)\">\n <legend class=\"form-legend\" *ngIf=\"section.title || section.subtitle\">\n <span [ngClass]=\"'section-style-'+section.sectionStyle\" [innerHtml]=\"section.title\"></span>\n <span *ngIf=\"section.subtitle\"><br /><small [innerHtml]=\"section.subtitle\"></small></span>\n </legend>\n\n <div class=\"form-fieldset-content\">\n <div *ngFor=\"let item of section.items\" [attr.id]=\"'form_item_'+item.name\">\n <ngx-survey-form-item\n *ngIf=\"service.isItemVisible(form, section, item)\"\n [type]=\"item.type\"\n [item]=\"item\"\n [editable]=\"editable\"\n [isMobile]=\"isMobile\"\n (changes)=\"onItemChanges($event)\"\n ></ngx-survey-form-item>\n </div>\n </div>\n </ng-container>\n </fieldset>\n </form>\n\n <div *ngIf=\"splitBySteps\">\n <mat-horizontal-stepper #stepper *ngIf=\"!isMobile\"\n (selectionChange)=\"onStepChange($event)\"\n >\n <!--\n <ng-template matStepperIcon=\"done\" let-index=\"index\">\n {{index+1}}\n </ng-template>\n\n -->\n\n <mat-step *ngFor=\"let section of form; index as i;\"\n [editable]=\"isStepEnabled(section)\"\n [completed]=\"section.submited\"\n\n [hasError]=\"section.hasError\"\n [errorMessage]=\"section.firstErrorText\"\n >\n\n <form>\n <ng-template matStepLabel>{{section.title}}</ng-template>\n <h3 *ngIf=\"section.subtitle\">{{section.subtitle}}</h3>\n <div *ngFor=\"let item of section.items\" [attr.id]=\"'form_item_'+item.name\">\n <ngx-survey-form-item\n *ngIf=\"service.isItemVisible(form, section, item)\"\n [type]=\"item.type\"\n [item]=\"item\"\n [editable]=\"editable\"\n [isMobile]=\"isMobile\"\n (changes)=\"onItemChanges($event)\"\n ></ngx-survey-form-item>\n </div>\n </form>\n <div *ngIf=\"i<form.length-1\">\n <button mat-button type=\"button\" class=\"btn btn-primary btn-block\" (click)=\"submitStep(section, true)\">Continue</button>\n </div>\n <div *ngIf=\"i>=form.length-1\">\n <div class=\"text-center text-danger global-error\" *ngIf=\"submitErrorText\">{{submitErrorText}}<br /></div>\n <button mat-button type=\"button\" class=\"btn btn-success btn-block\" (click)=\"submitForm()\" [disabled]=\"submitInProgress || submitDisabled\"><i class=\"fa fa-spinner fa-spin\" *ngIf=\"submitInProgress\"></i> Submit</button>\n </div>\n </mat-step>\n </mat-horizontal-stepper>\n\n <mat-vertical-stepper #stepper *ngIf=\"isMobile\"\n (selectionChange)=\"onStepChange($event)\"\n >\n <!--\n <ng-template matStepperIcon=\"done\" let-index=\"index\">\n {{index+1}}\n </ng-template>\n\n -->\n\n <mat-step *ngFor=\"let section of form; index as i;\"\n [editable]=\"isStepEnabled(section)\"\n [completed]=\"section.submited\"\n\n [hasError]=\"section.hasError\"\n [errorMessage]=\"section.firstErrorText\"\n >\n\n <form>\n <ng-template matStepLabel>{{section.title}}</ng-template>\n <h3 *ngIf=\"section.subtitle\">{{section.subtitle}}</h3>\n <div *ngFor=\"let item of section.items\" [attr.id]=\"'form_item_'+item.name\">\n <ngx-survey-form-item\n *ngIf=\"service.isItemVisible(form, section, item)\"\n [type]=\"item.type\"\n [item]=\"item\"\n [editable]=\"editable\"\n (changes)=\"onItemChanges($event)\"\n [isMobile]=\"isMobile\"\n ></ngx-survey-form-item>\n </div>\n </form>\n <div *ngIf=\"i<form.length-1\">\n <button mat-button type=\"button\" class=\"btn btn-primary btn-block\" (click)=\"submitStep(section, true)\">Continue</button>\n </div>\n <div *ngIf=\"i>=form.length-1\">\n <div class=\"text-center text-danger global-error\" *ngIf=\"submitErrorText\">{{submitErrorText}}<br /></div>\n <button mat-button type=\"button\" class=\"btn btn-success btn-block\" (click)=\"submitForm()\" [disabled]=\"submitInProgress || submitDisabled\"><i class=\"fa fa-spinner fa-spin\" *ngIf=\"submitInProgress\"></i> Submit</button>\n </div>\n </mat-step>\n </mat-vertical-stepper>\n </div>\n</div>\n", styles: ["::ng-deep .mat-step-header.mat-disabled{cursor:default}::ng-deep .mat-step-header.mat-disabled .mat-step-icon-state-done{background-color:#0000008a}::ng-deep .mat-step-header.mat-disabled .mat-step-label.mat-step-label-active{color:#0000008a}\n"] }]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: NgxSurveyService }], propDecorators: { form: [{
type: Input
}], value: [{
type: Input
}], splitBySteps: [{
type: Input
}], validateByStepChange: [{
type: Input
}], submitInProgress: [{
type: Input
}], submitErrorText: [{
type: Input
}], editable: [{
type: Input
}], valueChange: [{
type: Output
}], stepChanged: [{
type: Output
}], submit: [{
type: Output
}], stepper: [{
type: ViewChild,
args: ['stepper', { static: false }]
}] } });
class DialogSectionEdit {
constructor(dialogRef, data) {
this.dialogRef = dialogRef;
this.data = data;
this.commonFields = [
//buildField('string', {name: "name", label: "Name"}, true),
buildField('string', { name: "title", label: "Title" }),
buildField('string', { name: "subtitle", label: "Subtitle" }),
/*
buildField('select', {name: "sectionStyle", label: "Section Style", items: [
{
optionValue: 'Bold',
label: 'Bold',
style: "Checkmark"
},
{
optionValue: 'Normal',
label: 'Normal',
style: "Checkmark"
}
]}, true),
*/
];
this.sectionEditForm = [
{
items: [...this.commonFields]
}
];
const section = data.section;
this.readOnly = data.params.readOnly;
this.section = section;
}
onNoClick() {
this.dialogRef.close();
}
onFormSubmit(data) {
data.name = _.camelCase(data.title);
this.section = data;
this.dialogRef.close(this.section);
}
onOkClick() {
//console.log(this.data);
this.survey.submitForm();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: DialogSectionEdit, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: DialogSectionEdit, selector: "dialog-section-edit", viewQueries: [{ propertyName: "survey", first: true, predicate: ["survey"], descendants: true }], ngImport: i0, template: "<h1 mat-dialog-title>Edit section</h1>\n<div mat-dialog-content>\n <ngx-survey #survey\n [form]=\"sectionEditForm\"\n [value]=\"section\"\n (submit)=\"onFormSubmit($event)\"\n [editable]=\"!readOnly\"\n ></ngx-survey>\n</div>\n<div mat-dialog-actions>\n <button mat-button (click)=\"onNoClick()\">Cancel</button>\n <button mat-button (click)=\"onOkClick()\" [disabled]=\"readOnly\" cdkFocusInitial >Ok</button>\n</div>\n", styles: [".full-width{width:100%}\n"], dependencies: [{ kind: "component", type: i3$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: NgxSurveyComponent, selector: "ngx-survey", inputs: ["form", "value", "splitBySteps", "validateByStepChange", "submitInProgress", "submitErrorText", "editable"], outputs: ["valueChange", "stepChanged", "submit"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: DialogSectionEdit, decorators: [{
type: Component,
args: [{ selector: 'dialog-section-edit', template: "<h1 mat-dialog-title>Edit section</h1>\n<div mat-dialog-content>\n <ngx-survey #survey\n [form]=\"sectionEditForm\"\n [value]=\"section\"\n (submit)=\"onFormSubmit($event)\"\n [editable]=\"!readOnly\"\n ></ngx-survey>\n</div>\n<div mat-dialog-actions>\n <button mat-button (click)=\"onNoClick()\">Cancel</button>\n <button mat-button (click)=\"onOkClick()\" [disabled]=\"readOnly\" cdkFocusInitial >Ok</button>\n</div>\n", styles: [".full-width{width:100%}\n"] }]
}], ctorParameters: () => [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
type: Inject,
args: [MAT_DIALOG_DATA]
}] }], propDecorators: { survey: [{
type: ViewChild,
args: ['survey', { static: false }]
}] } });
class DialogItemEdit {
constructor(dialogRef, data) {
this.dialogRef = dialogRef;
this.data = data;
this.extraFields = [];
this.multiChoiseFieldTypes = ["radio", "select", "segments"];
console.log(data, this.commonFields);
const item = data.item;
if (item.fieldValidations && item.fieldValidations.rules && item.fieldValidations.rules.find(r => r.minLength && r.minLength > 0)) {
item.required = true;
}
this.item = item;
this.multiChoiseFieldsOnly = data.params.multiChoiseFieldsOnly;
this.customFieldNamesAllowed = data.params.customFieldNamesAllowed;
this.readOnly = data.params.readOnly;
this.setFormFields();
}
setFormFields() {
console.log(Object.keys(FormItemTypes).filter(key => this.multiChoiseFieldsOnly ? this.multiChoiseFieldTypes.indexOf(key) >= 0 : true));
this.commonFields = [
buildField('select', { name: "type", label: "Type", items: Object.keys(FormItemTypes).filter(key => this.multiChoiseFieldsOnly ? this.multiChoiseFieldTypes.indexOf(key) >= 0 : true).map(key => {
const item = FormItemTypes[key];
return item.label ? buildOption(key, item.label) : null;
}).filter(t => t), actionUpdatesSectionValue: true }, true),
buildField('select', { name: "style", label: "Text Field Style", items: [
buildOption('text', 'Standard Text Field'),
buildOption('number', 'Number'),
buildOption('email', 'E-mail'),
buildOption('password', 'Password'),
buildOption('url', 'URL'),
], visibilityValuesInSection: ["string"], value: 'text' }, true),
buildField('select', { name: "fileType", label: "Uploader Type", items: [
buildOption('image', 'Image'),
buildOption('video', 'Video'),
buildOption('file', 'Any File'),
], visibilityValuesInSection: ["file"], value: 'image' }, true),
buildField('select', { name: "style", label: "Style", items: [
buildOption('list', 'List with selection'),
buildOption('buttons', 'Radio Buttons'),
buildOption('select', 'Select'),
], visibilityValuesInSection: ["radio"], value: 'list' }, true),
buildField('checkbox', { name: "multiple", label: "Allow multiple files upload", visibilityValuesInSection: ["file"] }),
/*
buildField('string', {name: "areaLabel", label: "Area Label", visibilityValuesInSection: ["file"], defaultValue:'Drag and drop files here or use "Browse Files" button'}),
buildField('string', {name: "buttonLabel", label: "Button Label", visibilityValuesInSection: ["file"], defaultValue:'Browse Files'}),
*/
buildField('string', { name: "name", label: "Name", visibilityValuesInSection: !this.customFieldNamesAllowed ? ['none'] : undefined }, false),
buildField('text', { name: "label", label: "Label" }),
buildField('text', { name: "hint", label: "Hint" }),
buildField('text', { name: "htmlContent", label: "Content", visibilityValuesInSection: ["label"] }),
buildField('checkbox', { name: "required", label: "Required" }),
buildField('checkbox', { name: "actionUpdatesSectionValue", label: "Action Updates Section Value", visibilityValuesInSection: [this.multiChoiseFieldTypes] }),
buildField('checkbox', { name: "multiple", label: "Multiple Answers", visibilityValuesInSection: ["radio"] }),
buildField('optionsEditor', { name: "items", label: "Options", visibilityValuesInSection: [["radio", "select"]], allowCustomAnswers: !this.multiChoiseFieldsOnly, allowCustomOptionValues: this.customFieldNamesAllowed, defaultValue: this.item.value, multiple: this.item.multiple }),
buildField('optionsEditor', { name: "segments", label: "Segments", visibilityValuesInSection: ["segments"], allowCustomAnswers: false, allowCustomOptionValues: this.customFieldNamesAllowed, defaultValue: this.item.value }),
];
this.itemEditForm = [
{
items: [...this.commonFields]
}
];
}
onFormChange(values) {
console.log(values, this.itemEditForm);
const optionsEditField = this.itemEditForm[0].items.find(f => f.name === 'items');
if (optionsEditField && optionsEditField.multiple !== values.multiple) {
optionsEditField.multiple = values.multiple;
if (values.multiple) {
optionsEditField.defaultValue = [];
}
}
console.log(optionsEditField);
}
onNoClick() {
this.dialogRef.close();
}
onFormSubmit(item) {
if (!item.fieldValidations) {
item.fieldValidations = {};
}
if (!item.fieldValidations.rules) {
item.fieldValidations.rules = [];
}
if (!item.name || !this.customFieldNamesAllowed) {
item.name = _.camelCase(item.label);
}
console.log(item);
const minLengthRule = item.fieldValidations.rules.find(r => r.minLength > 0);
console.log(item, minLengthRule);
if (item.required && !minLengthRule) {
item.fieldValidations.rules.push({
minLength: 1
});
}
else if (!item.required && minLengthRule) {
minLengthRule.minLength = 0;
}
['segments', 'items'].forEach(key => {
if (item[key] && item[key].length) {
let defaultValArr = [];
let defaultValStr = '';
item[key].forEach(option => {
if (option.selected) {
defaultValArr.push(option.optionValue);
defaultValStr = option.optionValue;
}
delete option.selected;
});
item.value = item.multiple ? defaultValArr : defaultValStr;
}
});
this.item = item;
this.dialogRef.close(this.item);
}
onOkClick() {
//console.log(this.data);
this.survey.submitForm();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: DialogItemEdit, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: DialogItemEdit, selector: "dialog-item-edit", viewQueries: [{ propertyName: "survey", first: true, predicate: ["survey"], descendants: true }], ngImport: i0, template: "<h1 mat-dialog-title>Edit Field</h1>\n<div mat-dialog-content>\n <ngx-survey #survey\n [form]=\"itemEditForm\"\n [value]=\"item\"\n (valueChange)=\"onFormChange($event)\"\n (submit)=\"onFormSubmit($event)\"\n [editable]=\"!readOnly\"\n ></ngx-survey>\n</div>\n<div mat-dialog-actions>\n <button mat-button (click)=\"onNoClick()\">Cancel</button>\n <button mat-button (click)=\"onOkClick()\" [disabled]=\"readOnly\" cdkFocusInitial>Ok</button>\n</div>\n", styles: [".full-width{width:100%}\n"], dependencies: [{ kind: "component", type: i3$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: NgxSurveyComponent, selector: "ngx-survey", inputs: ["form", "value", "splitBySteps", "validateByStepChange", "submitInProgress", "submitErrorText", "editable"], outputs: ["valueChange", "stepChanged", "submit"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: DialogItemEdit, decorators: [{
type: Component,
args: [{ selector: 'dialog-item-edit', template: "<h1 mat-dialog-title>Edit Field</h1>\n<div mat-dialog-content>\n <ngx-survey #survey\n [form]=\"itemEditForm\"\n [value]=\"item\"\n (valueChange)=\"onFormChange($event)\"\n (submit)=\"onFormSubmit($event)\"\n [editable]=\"!readOnly\"\n ></ngx-survey>\n</div>\n<div mat-dialog-actions>\n <button mat-button (click)=\"onNoClick()\">Cancel</button>\n <button mat-button (click)=\"onOkClick()\" [disabled]=\"readOnly\" cdkFocusInitial>Ok</button>\n</div>\n", styles: [".full-width{width:100%}\n"] }]
}], ctorParameters: () => [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
type: Inject,
args: [MAT_DIALOG_DATA]
}] }], propDecorators: { survey: [{
type: ViewChild,
args: ['survey', { static: false }]
}] } });
class DialogItemVisibility {
constructor(dialogRef, data) {
this.dialogRef = dialogRef;
this.data = data;
this.formFields = [];
this.extraFields = [];
this.itemEditForm = [
{
items: []
}
];
console.log(data);
const value = {};
this.formFields = data.sectionItems.map(item => {
this.data.visibility.forEach(val => {
if ((item.items || item.segments)?.find(op => val.indexOf(op.optionValue) >= 0)) {
value[item.name] = val;
}
});
return buildField('radio', { name: item.name, label: item.label || item.name, items: item.items || item.segments, multiple: true }, false);
});
this.value = value;
this.itemEditForm = [{
items: this.formFields
}];
this.readOnly = data.readOnly;
console.log(this.itemEditForm, value);
}
onFormChange(values) {
console.log(values);
}
onNoClick() {
this.dialogRef.close();
}
onFormSubmit(value) {
this.dialogRef.close(value);
}
onOkClick() {
//console.log(this.data);
this.survey.submitForm();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: DialogItemVisibility, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: DialogItemVisibility, selector: "dialog-item-visibility", viewQueries: [{ propertyName: "survey", first: true, predicate: ["survey"], descendants: true }], ngImport: i0, template: "<h1 mat-dialog-title>Field Visibility</h1>\n<div mat-dialog-content>\n <ngx-survey #survey\n [form]=\"itemEditForm\"\n [value]=\"value\"\n (valueChange)=\"onFormChange($event)\"\n (submit)=\"onFormSubmit($event)\"\n [editable]=\"!readOnly\"\n ></ngx-survey>\n</div>\n<div mat-dialog-actions>\n <button mat-button (click)=\"onNoClick()\">Cancel</button>\n <button mat-button (click)=\"onOkClick()\" [disabled]=\"readOnly\" cdkFocusInitial>Ok</button>\n</div>\n", styles: [".full-width{width:100%}\n"], dependencies: [{ kind: "component", type: i3$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: NgxSurveyComponent, selector: "ngx-survey", inputs: ["form", "value", "splitBySteps", "validateByStepChange", "submitInProgress", "submitErrorText", "editable"], outputs: ["valueChange", "stepChanged", "submit"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: DialogItemVisibility, decorators: [{
type: Component,
args: [{ selector: 'dialog-item-visibility', template: "<h1 mat-dialog-title>Field Visibility</h1>\n<div mat-dialog-content>\n <ngx-survey #survey\n [form]=\"itemEditForm\"\n [value]=\"value\"\n (valueChange)=\"onFormChange($event)\"\n (submit)=\"onFormSubmit($event)\"\n [editable]=\"!readOnly\"\n ></ngx-survey>\n</div>\n<div mat-dialog-actions>\n <button mat-button (click)=\"onNoClick()\">Cancel</button>\n <button mat-button (click)=\"onOkClick()\" [disabled]=\"readOnly\" cdkFocusInitial>Ok</button>\n</div>\n", styles: [".full-width{width:100%}\n"] }]
}], ctorParameters: () => [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
type: Inject,
args: [MAT_DIALOG_DATA]
}] }], propDecorators: { survey: [{
type: ViewChild,
args: ['survey', { static: false }]
}] } });
class FormBuilderComponent {
set form(form) {
this._form = this.service.initForm(form, this.formValues);
//console.log(this._form);
}
;
get form() {
return this._form;
}
onSectionDropped(event) {
const previousIndex = this.form.findIndex(row => event.item && row === event.item.data);
moveItemInArray(this.form, previousIndex, event.currentIndex);
this.form = this.form.slice();
this.changes.emit(this.form);
}
onItemDropped(event, section) {
const previousIndex = (section.items || []).findIndex(row => event.item && row === event.item.data);
moveItemInArray((section.items || []), previousIndex, event.currentIndex);
section.items = (section.items || []).slice();
this.changes.emit(this.form);
}
constructor(service, dialog) {
this.service = service;
this.dialog = dialog;
this.changes = new EventEmitter();
this.onFieldAdded = new EventEmitter();
this.allowMultiChoiseFieldsOnly = false;
this.enableEditFieldValues = true;
this.showFieldNames = true;
this.readOnly = false;
this.formValues = {};
this.sortableSectionOptions = {
onUpdate: (event) => {
//event;
//console.log(event);
this.changes.emit(this.form);
},
//handle: '.sortable-handle'
};
this.sortableItemOptions = {
onUpdate: (event) => {
//event;
//console.log(event);
this.changes.emit(this.form);
},
handle: '.form-item'
};
}
openSectionDialog(section) {
const dialogRef = this.dialog.open(DialogSectionEdit, {
minWidth: '450px',
data: {
params: {
readOnly: this.readOnly,
},
section: section
},
});
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed', result);
if (result && !this.readOnly) {
section = _.extend(section, result);
this.changes.emit(this.form);
}
});
}
openItemDialog(item, section) {
const dialogRef = this.dialog.open(DialogItemEdit, {
minWidth: '450px',
data: {
params: {
multiChoiseFieldsOnly: this.allowMultiChoiseFieldsOnly,
customFieldNamesAllowed: this.showFieldNames,
readOnly: this.readOnly,
},
item: _.cloneDeep(item)
},
});
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed', result, section);
if (result && !this.readOnly) {
item = _.extend(item, result);
const itemComponent = this.formItemElements.find(el => el.item === item);
if (section && !this.showFieldNames) {
item.name = _.camelCase((section.name || '') + ' ' + item.name);
}
if (item.justAdded) {
this.onFieldAdded.emit(item);
}
item.justAdded = false;
this.changes.emit(this.form);
if (itemComponent) {
itemComponent.loadComponent();
}
}
else if (section && item.justAdded) {
this.removeField(item, section);
}
});
}
getSectionValueItemsForItem(item, section) {
return (section.items || []).filter(sItem => sItem.actionUpdatesSectionValue && sItem.name !== item.name);
}
openItemVisibilityDialog(item, section) {
const sectionValueItems = this.getSectionValueItemsForItem(item, section);
const dialogRef = this.dialog.open(DialogItemVisibility, {
width: '450px',
data: {
sectionItems: sectionValueItems,
visibility: item.visibilityValuesInSection || [],
readOnly: this.readOnly,
}
});
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed', result);
if (result && !this.readOnly) {
item.visibilityValuesInSection = [];
sectionValueItems.forEach(sItem => {
if (result[sItem.name]) {
item.visibilityValuesInSection.push(result[sItem.name]);
}
});
console.log(item);
this.changes.emit(this.form);
}
/*
if (result){
item=_.extend(item, result);
this.changes.emit(this.form);
}
else if(section && item.justAdded) {
this.removeField(item, section);
}*/
});
}
ngOnInit() {
}
getDateStr(time) {
time = time / 1000000;
return moment.utc(time).format("MM/DD/YYYY");
}
;
getDateValue(str) {
var dt = new Date(str);
dt.setMinutes(dt.getMinutes() - dt.getTimezoneOffset());
return dt;
}
;
/*
setItemValue(item, value) {
item.value = item.multiple ? _.contains(item.value || [], value) ? _.without(item.value, value) : _.union(item.value || [], [value]) : value;
};
isSelected(item, value) {
return item.multiple ? _.contains(item.value || [], value) : item.value === value;
};
*/
onItemChanges(item) {
item.errors = this.service.getErrors(item);
this.changes.emit(this.form);
}
removeField(item, section) {
section.items = (section.items || []).filter((op, index) => index !== (section.items || []).indexOf(item));
this.changes.emit(this.form);
}
cloneItem(item, section) {
//section.items=(section.items || []).filter((op, index)=>index!==(section.items || []).indexOf(item));
//console.log(item);
if (this.readOnly) {
return;
}
const newItem = _.cloneDeep(item);
let newName = newItem.name + '_clone';
if (section.items?.find(item => item.name === newName)) {
const index = section.items?.filter(item => item.name.indexOf(newName) >= 0).length;
newName += '_' + index;
}
newItem.name = newName;
newItem.actionUpdatesSectionValue = false;
section.items?.splice(section.items?.indexOf(item) + 1, 0, newItem);
this.changes.emit(this.form);
}
clearValue(item, section) {
item.value = '';
this.changes.emit(this.form);
}
addFeild(section) {
if (!section.items) {
section.items = [];
}
const field = this.allowMultiChoiseFieldsOnly ? buildField('radio', { name: "", label: "", items: [], style: "list" }, true) : buildField('string', { name: "", label: "" });
field.justAdded = true;
section.items.push(field);
this.openItemDialog(field, section);
}
removeSection(section) {
this.form = this.form.filter((op, index) => index !== this.form.indexOf(section));
this.changes.emit(this.form);
}
addSection() {
this.form.push({});
this.changes.emit(this.form);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FormBuilderComponent, deps: [{ token: NgxSurveyService }, { token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: FormBuilderComponent, selector: "ngx-survey-form-builder", inputs: { form: "form", allowMultiChoiseFieldsOnly: "allowMultiChoiseFieldsOnly", enableEditFieldValues: "enableEditFieldValues", showFieldNames: "showFieldNames", readOnly: "readOnly" }, outputs: { changes: "changes", onFieldAdded: "onFieldAdded" }, viewQueries: [{ propertyName: "formItemElements", predicate: ["formFieldItem"], descendants: true }], ngImport: i0, template: "<form name=\"surveyForm\"\n cdkDropList\n [cdkDropListData]=\"form\"\n (cdkDropListDropped)=\"onSectionDropped($event)\"\n [cdkDropListDisabled]=\"readOnly\"\n>\n <mat-card *ngFor=\"let section of form\"\n cdkDrag\n [cdkDragData]=section\n >\n <div class=\"section-drag-placeholder\" *cdkDragPlaceholder></div>\n <div class=\"example-custom-placeholder\" *cdkDragPlaceholder></div>\n <mat-card-header class=\"section-header\">\n <mat-card-title class=\"section-title\">\n <div class=\"section-title-text\">\n <span [ngClass]=\"'section-style-'+section.sectionStyle\" [innerHtml]=\"section.title\"></span>\n </div>\n\n <button mat-icon-button class=\"form-item-actions-button\" aria-label=\"Toggle menu\"\n matTooltip=\"Edit Section\"\n matTooltipPosition=\"above\"\n (click)=\"openSectionDialog(section)\"\n >\n <mat-icon>edit</mat-icon>\n </button>\n <button mat-icon-button class=\"form-item-actions-button \" aria-label=\"Toggle menu\"\n matTooltip=\"Delete Section\"\n matTooltipPosition=\"above\"\n (click)=\"removeSection(section)\"\n [disabled]=\"readOnly\"\n >\n <mat-icon>delete</mat-icon>\n </button>\n <!--\n <button mat-icon-button class=\"more-button\" [matMenuTriggerFor]=\"menu\" aria-label=\"Toggle menu\">\n <mat-icon>more_vert</mat-icon>\n </button>\n <mat-menu #menu=\"matMenu\" xPosition=\"before\">\n <button mat-menu-item (click)=\"openSectionDialog(section)\">Edit Section</button>\n <button mat-menu-item (click)=\"removeSection(section)\">Remove</button>\n </mat-menu>\n -->\n\n </mat-card-title>\n <mat-card-subtitle>\n <span *ngIf=\"section.subtitle\"><small [innerHtml]=\"section.subtitle\"></small></span>\n </mat-card-subtitle>\n </mat-card-header>\n <mat-card-content>\n <div *ngIf=\"service.isSectionVisible(form, section)\">\n <div cdkDropList\n [cdkDropListData]=\"section.items\"\n (cdkDropListDropped)=\"onItemDropped($event, section)\"\n [cdkDropListDisabled]=\"readOnly\"\n class=\"form-items-list\"\n >\n <div *ngFor=\"let item of section.items\" [attr.id]=\"'form_item_'+item.name\" class=\"form-item\"\n cdkDrag\n [cdkDragData]=item\n >\n <div class=\"item-drag-placeholder\" *cdkDragPlaceholder></div>\n <div class=\"form-item-actions\">\n <div class=\"form-item-var-name\">\n <small *ngIf=\"showFieldNames\">{{item.name}}</small>\n </div>\n <button mat-icon-button class=\"form-item-actions-button\" aria-label=\"Visibility\" *ngIf=\"getSectionValueItemsForItem(item, section).length\"\n matTooltip=\"Visibility\"\n matTooltipPosition=\"above\"\n (click)=\"openItemVisibilityDialog(item, section)\"\n >\n <mat-icon\n [color]=\"item.visibilityValuesInSection && item.visibilityValuesInSection.length ? 'primary' : 'disabled'\"\n >visibility</mat-icon>\n </button>\n <button mat-icon-button class=\"form-item-actions-button\" aria-label=\"Toggle menu\" *ngIf=\"!readOnly\"\n matTooltip=\"Clone\"\n matTooltipPosition=\"above\"\n (click)=\"cloneItem(item, section)\"\n >\n <mat-icon>filter_none</mat-icon>\n </button>\n <button mat-icon-button class=\"form-item-actions-button\" aria-label=\"Toggle menu\"\n matTooltip=\"Edit Field\"\n matTooltipPosition=\"above\"\n (click)=\"openItemDialog(item, section)\"\n >\n <mat-icon>edit</mat-icon>\n </button>\n <!--\n <button mat-icon-button class=\"form-item-actions-button\" aria-label=\"Toggle menu\" *ngIf=\"item.value && !readOnly\"\n matTooltip=\"Clear field value\"\n matTooltipPosition=\"above\"\n (click)=\"clearValue(item, section)\"\n >\n <mat-icon>cancel_presentation</mat-icon>\n </button>\n -->\n\n <button mat-icon-button class=\"form-item-actions-button\" aria-label=\"Toggle menu\" [disabled]=\"readOnly\"\n matTooltip=\"Delete Field\"\n matTooltipPosition=\"above\"\n (click)=\"removeField(item, section)\"\n >\n <mat-icon>delete</mat-icon>\n </button>\n\n </div>\n <ngx-survey-form-item\n [type]=\"item.type\"\n [item]=\"item\"\n [editable]=\"enableEditFieldValues && !readOnly\"\n (changes)=\"onItemChanges($event)\"\n #formFieldItem\n ></ngx-survey-form-item>\n </div>\n </div>\n </div>\n <div class=\"add-item-button\"\n >\n <button mat-stroked-button color=\"primary\" (click)=\"addFeild(section)\" [disabled]=\"readOnly\">Add Field</button>\n </div>\n <!--\n <button mat-icon-button class=\"add-item-button\" aria-label=\"Toggle menu\">\n <mat-icon>add_circle</mat-icon>\n </button>\n -->\n </mat-card-content>\n </mat-card>\n <div class=\"add-item-button\"\n matTooltip=\"Add Section\"\n matTooltipPosition=\"above\"\n >\n <button mat-mini-fab color=\"primary\" aria-label=\"Add Section\" (click)=\"addSection()\" [disabled]=\"readOnly\">\n <mat-icon>add</mat-icon>\n </button>\n </div>\n</form>\n", styles: [".more-button{position:absolute;top:5px;right:10px}.add-item-button{text-align:center}.add-item-button .mat-stroked-button{width:100%;margin-top:20px}::ng-deep .mat-card{margin-bottom:10px}::ng-deep .mat-card:hover .add-item-button{display:block}::ng-deep .mat-card .mat-card-header-text{width:100%;margin-right:0}::ng-deep .mat-card .mat-card-header-text .section-title{align-content:center;align-items:center;display:flex;justify-content:center}::ng-deep .mat-card .mat-card-header-text .section-title .section-title-text{flex:1 1 auto}.form-item{border:dotted 3px #fff}.form-item .form-item-actions{height:20px;align-content:center;align-items:center;display:flex;justify-content:center}.form-item .form-item-actions .form-item-var-name{overflow:hidden;flex:1 1 auto}.form-item .form-item-actions .form-item-var-name small{display:none}.form-item .form-item-actions .mat-icon{font-size:16px}.form-item .form-item-actions .mat-icon-button{height:20px;width:20px;line-height:20px}.form-item:hover{background:#ccc;border-color:#999;min-height:60px;transition:transform .25s cubic-bezier(0,0,.2,1);cursor:move}.form-item:hover .form-item-actions .form-item-var-name small{display:inline}.example-list{min-height:60px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.form-items-list.cdk-drop-list-dragging .form-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.item-drag-placeholder{background:#ccc;border:dotted 3px #999;min-height:83px;transition:transform .25s cubic-bezier(0,0,.2,1)}.section-drag-placeholder{background:#ccc;border:dotted 3px #999;min-height:150px;transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i8$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i8$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i8$1.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i8$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i9.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i9.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i9.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: FormItemComponent, selector: "ngx-survey-form-item", inputs: ["type", "item", "editable", "isMobile", "id"], outputs: ["changes"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FormBuilderComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-survey-form-builder', template: "<form name=\"surveyForm\"\n cdkDropList\n [cdkDropListData]=\"form\"\n (cdkDropListDropped)=\"onSectionDropped($event)\"\n [cdkDropListDisabled]=\"readOnly\"\n>\n <mat-card *ngFor=\"let section of form\"\n cdkDrag\n [cdkDragData]=section\n >\n <div class=\"section-drag-placeholder\" *cdkDragPlaceholder></div>\n <div class=\"example-custom-placeholder\" *cdkDragPlaceholder></div>\n <mat-card-header class=\"section-header\">\n <mat-card-title class=\"section-title\">\n <div class=\"section-title-text\">\n <span [ngClass]=\"'section-style-'+section.sectionStyle\" [innerHtml]=\"section.title\"></span>\n </div>\n\n <button mat-icon-button class=\"form-item-actions-button\" aria-label=\"Toggle menu\"\n matTooltip=\"Edit Section\"\n matTooltipPosition=\"above\"\n (click)=\"openSectionDialog(section)\"\n >\n <mat-icon>edit</mat-icon>\n </button>\n <button mat-icon-button class=\"form-item-actions-button \" aria-label=\"Toggle menu\"\n matTooltip=\"Delete Section\"\n matTooltipPosition=\"above\"\n (click)=\"removeSection(section)\"\n [disabled]=\"readOnly\"\n >\n <mat-icon>delete</mat-icon>\n </button>\n <!--\n <button mat-icon-button class=\"more-button\" [matMenuTriggerFor]=\"menu\" aria-label=\"Toggle menu\">\n <mat-icon>more_vert</mat-icon>\n </button>\n <mat-menu #menu=\"matMenu\" xPosition=\"before\">\n <button mat-menu-item (click)=\"openSectionDialog(section)\">Edit Section</button>\n <button mat-menu-item (click)=\"removeSection(section)\">Remove</button>\n </mat-menu>\n -->\n\n </mat-card-title>\n <mat-card-subtitle>\n <span *ngIf=\"section.subtitle\"><small [innerHtml]=\"section.subtitle\"></small></span>\n </mat-card-subtitle>\n </mat-card-header>\n <mat-card-content>\n <div *ngIf=\"service.isSectionVisible(form, section)\">\n <div cdkDropList\n [cdkDropListData]=\"section.items\"\n (cdkDropListDropped)=\"onItemDropped($event, section)\"\n [cdkDropListDisabled]=\"readOnly\"\n class=\"form-items-list\"\n >\n <div *ngFor=\"let item of section.items\" [attr.id]=\"'form_item_'+item.name\" class=\"form-item\"\n cdkDrag\n [cdkDragData]=item\n >\n <div class=\"item-drag-placeholder\" *cdkDragPlaceholder></div>\n <div class=\"form-item-actions\">\n <div class=\"form-item-var-name\">\n <small *ngIf=\"showFieldNames\">{{item.name}}</small>\n </div>\n <button mat-icon-button class=\"form-item-actions-button\" aria-label=\"Visibility\" *ngIf=\"getSectionValueItemsForItem(item, section).length\"\n matTooltip=\"Visibility\"\n matTooltipPosition=\"above\"\n (click)=\"openItemVisibilityDialog(item, section)\"\n >\n <mat-icon\n [color]=\"item.visibilityValuesInSection && item.visibilityValuesInSection.length ? 'primary' : 'disabled'\"\n >visibility</mat-icon>\n </button>\n <button mat-icon-button class=\"form-item-actions-button\" aria-label=\"Toggle menu\" *ngIf=\"!readOnly\"\n matTooltip=\"Clone\"\n matTooltipPosition=\"above\"\n (click)=\"cloneItem(item, section)\"\n >\n <mat-icon>filter_none</mat-icon>\n </button>\n <button mat-icon-button class=\"form-item-actions-button\" aria-label=\"Toggle menu\"\n matTooltip=\"Edit Field\"\n matTooltipPosition=\"above\"\n (click)=\"openItemDialog(item, section)\"\n >\n <mat-icon>edit</mat-icon>\n </button>\n <!--\n <button mat-icon-button class=\"form-item-actions-button\" aria-label=\"Toggle menu\" *ngIf=\"item.value && !readOnly\"\n matTooltip=\"Clear field value\"\n matTooltipPosition=\"above\"\n (click)=\"clearValue(item, section)\"\n >\n <mat-icon>cancel_presentation</mat-icon>\n </button>\n -->\n\n <button mat-icon-button class=\"form-item-actions-button\" aria-label=\"Toggle menu\" [disabled]=\"readOnly\"\n matTooltip=\"Delete Field\"\n matTooltipPosition=\"above\"\n (click)=\"removeField(item, section)\"\n >\n <mat-icon>delete</mat-icon>\n </button>\n\n </div>\n <ngx-survey-form-item\n [type]=\"item.type\"\n [item]=\"item\"\n [editable]=\"enableEditFieldValues && !readOnly\"\n (changes)=\"onItemChanges($event)\"\n #formFieldItem\n ></ngx-survey-form-item>\n </div>\n </div>\n </div>\n <div class=\"add-item-button\"\n >\n <button mat-stroked-button color=\"primary\" (click)=\"addFeild(section)\" [disabled]=\"readOnly\">Add Field</button>\n </div>\n <!--\n <button mat-icon-button class=\"add-item-button\" aria-label=\"Toggle menu\">\n <mat-icon>add_circle</mat-icon>\n </button>\n -->\n </mat-card-content>\n </mat-card>\n <div class=\"add-item-button\"\n matTooltip=\"Add Section\"\n matTooltipPosition=\"above\"\n >\n <button mat-mini-fab color=\"primary\" aria-label=\"Add Section\" (click)=\"addSection()\" [disabled]=\"readOnly\">\n <mat-icon>add</mat-icon>\n </button>\n </div>\n</form>\n", styles: [".more-button{position:absolute;top:5px;right:10px}.add-item-button{text-align:center}.add-item-button .mat-stroked-button{width:100%;margin-top:20px}::ng-deep .mat-card{margin-bottom:10px}::ng-deep .mat-card:hover .add-item-button{display:block}::ng-deep .mat-card .mat-card-header-text{width:100%;margin-right:0}::ng-deep .mat-card .mat-card-header-text .section-title{align-content:center;align-items:center;display:flex;justify-content:center}::ng-deep .mat-card .mat-card-header-text .section-title .section-title-text{flex:1 1 auto}.form-item{border:dotted 3px #fff}.form-item .form-item-actions{height:20px;align-content:center;align-items:center;display:flex;justify-content:center}.form-item .form-item-actions .form-item-var-name{overflow:hidden;flex:1 1 auto}.form-item .form-item-actions .form-item-var-name small{display:none}.form-item .form-item-actions .mat-icon{font-size:16px}.form-item .form-item-actions .mat-icon-button{height:20px;width:20px;line-height:20px}.form-item:hover{background:#ccc;border-color:#999;min-height:60px;transition:transform .25s cubic-bezier(0,0,.2,1);cursor:move}.form-item:hover .form-item-actions .form-item-var-name small{display:inline}.example-list{min-height:60px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.form-items-list.cdk-drop-list-dragging .form-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.item-drag-placeholder{background:#ccc;border:dotted 3px #999;min-height:83px;transition:transform .25s cubic-bezier(0,0,.2,1)}.section-drag-placeholder{background:#ccc;border:dotted 3px #999;min-height:150px;transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
}], ctorParameters: () => [{ type: NgxSurveyService }, { type: i1$1.MatDialog }], propDecorators: { changes: [{
type: Output
}], onFieldAdded: [{
type: Output
}], form: [{
type: Input
}], allowMultiChoiseFieldsOnly: [{
type: Input
}], enableEditFieldValues: [{
type: Input
}], showFieldNames: [{
type: Input
}], readOnly: [{
type: Input
}], formItemElements: [{
type: ViewChildren,
args: ['formFieldItem']
}] } });
class FileListItemFileComponent {
constructor() {
this.onDelete = new EventEmitter();
}
ngOnInit() {
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FileListItemFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: FileListItemFileComponent, selector: "ammo-file-list-item-file", inputs: { file: "file", allowDelete: "allowDelete" }, outputs: { onDelete: "onDelete" }, ngImport: i0, template: "<div class=\"file\">\n <div class=\"file-title\">\n <div class=\"file-name\">\n <mat-icon>insert_drive_file</mat-icon>\n <strong *ngIf=\"file.uploading\">{{file.name}}</strong>\n <a [href]=\"file.url\" target=\"_blank\" *ngIf=\"!file.uploading\">{{file.name}}</a>\n <span class=\"file-size\" [innerHTML]=\"file.size | fileSize\"></span>\n </div>\n <a class=\"file-upload-cancel\" [href]=\"file.url\" target=\"_blank\" *ngIf=\"!file.uploading\"><mat-icon>cloud_download</mat-icon></a>\n <a class=\"file-upload-cancel\" *ngIf=\"allowDelete\" (click)=\"onDelete.emit(file)\"><mat-icon>delete</mat-icon></a>\n </div>\n <mat-progress-bar mode=\"determinate\" *ngIf=\"file.uploading\" [value]=\"file.progressValue\"></mat-progress-bar>\n</div>\n", styles: [".file{font-size:10px;padding-top:7px;padding-bottom:7px;line-height:13px;text-align:left}.file .file-title{display:flex;font-size:12px}.file .file-title .file-name{width:100%}.file .file-title .file-name mat-icon{width:16px;font-size:15px}.file .file-title .file-name i{padding-right:5px}.file .file-title .file-size{margin-left:5px}.file .file-upload-cancel{display:block;width:20px;padding-left:5px;font-size:15px;cursor:pointer}.file .file-upload-cancel mat-icon{width:20px;font-size:20px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$4.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "pipe", type: FileSizePipe, name: "fileSize" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FileListItemFileComponent, decorators: [{
type: Component,
args: [{ selector: 'ammo-file-list-item-file', template: "<div class=\"file\">\n <div class=\"file-title\">\n <div class=\"file-name\">\n <mat-icon>insert_drive_file</mat-icon>\n <strong *ngIf=\"file.uploading\">{{file.name}}</strong>\n <a [href]=\"file.url\" target=\"_blank\" *ngIf=\"!file.uploading\">{{file.name}}</a>\n <span class=\"file-size\" [innerHTML]=\"file.size | fileSize\"></span>\n </div>\n <a class=\"file-upload-cancel\" [href]=\"file.url\" target=\"_blank\" *ngIf=\"!file.uploading\"><mat-icon>cloud_download</mat-icon></a>\n <a class=\"file-upload-cancel\" *ngIf=\"allowDelete\" (click)=\"onDelete.emit(file)\"><mat-icon>delete</mat-icon></a>\n </div>\n <mat-progress-bar mode=\"determinate\" *ngIf=\"file.uploading\" [value]=\"file.progressValue\"></mat-progress-bar>\n</div>\n", styles: [".file{font-size:10px;padding-top:7px;padding-bottom:7px;line-height:13px;text-align:left}.file .file-title{display:flex;font-size:12px}.file .file-title .file-name{width:100%}.file .file-title .file-name mat-icon{width:16px;font-size:15px}.file .file-title .file-name i{padding-right:5px}.file .file-title .file-size{margin-left:5px}.file .file-upload-cancel{display:block;width:20px;padding-left:5px;font-size:15px;cursor:pointer}.file .file-upload-cancel mat-icon{width:20px;font-size:20px}\n"] }]
}], ctorParameters: () => [], propDecorators: { file: [{
type: Input
}], allowDelete: [{
type: Input
}], onDelete: [{
type: Output
}] } });
const formItemComponents = [
FormItemStringComponent,
FormItemRatingComponent,
FormItemTextComponent,
FormItemDateComponent,
FormItemSegmentsComponent,
FormItemRadioComponent,
FormItemNumericRatingComponent,
FormItemSelectComponent,
FormItemOptionsEditorComponent,
FormItemCheckboxComponent,
FormItemLabelComponent,
DialogSectionEdit,
DialogItemEdit,
DialogItemVisibility
];
class NgxSurveyModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: NgxSurveyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.12", ngImport: i0, type: NgxSurveyModule, declarations: [FormItemDirective,
FormItemComponent, FormItemStringComponent,
FormItemRatingComponent,
FormItemTextComponent,
FormItemDateComponent,
FormItemSegmentsComponent,
FormItemRadioComponent,
FormItemNumericRatingComponent,
FormItemSelectComponent,
FormItemOptionsEditorComponent,
FormItemCheckboxComponent,
FormItemLabelComponent,
DialogSectionEdit,
DialogItemEdit,
DialogItemVisibility, FormBuilderComponent,
StarRatingComponent,
NgxSurveyComponent,
RadioGroupComponent,
SelectionListComponent,
SelectComponent,
FormItemFileComponent,
FileListItemFileComponent,
FileListItemImageComponent,
FileListItemVideoComponent,
FileSizePipe,
DurationPipe,
TruncatePipe,
FormItemVoiceComponent], imports: [CommonModule,
FormsModule,
MatButtonToggleModule,
MatButtonModule,
MatInputModule,
MatDatepickerModule,
MatListModule,
MatTooltipModule,
MatIconModule,
MatMomentDateModule,
MatCardModule,
MatMenuModule,
MatDialogModule,
MatSelectModule,
MatTableModule,
DragDropModule,
MatCheckboxModule,
MatRadioModule,
MatSlideToggleModule,
MatStepperModule, i6$1.NgxMaskModule,
//AngularResizeEventModule,
NgxFileDropModule,
MatProgressBarModule], exports: [FormBuilderComponent,
NgxSurveyComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: NgxSurveyModule, providers: [
NgxSurveyService,
{
provide: STEPPER_GLOBAL_OPTIONS, useValue: { showError: true }
}
], imports: [CommonModule,
FormsModule,
MatButtonToggleModule,
MatButtonModule,
MatInputModule,
MatDatepickerModule,
MatListModule,
MatTooltipModule,
MatIconModule,
MatMomentDateModule,
MatCardModule,
MatMenuModule,
MatDialogModule,
MatSelectModule,
MatTableModule,
DragDropModule,
MatCheckboxModule,
MatRadioModule,
MatSlideToggleModule,
MatStepperModule,
NgxMaskModule.forRoot(),
//AngularResizeEventModule,
NgxFileDropModule,
MatProgressBarModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: NgxSurveyModule, decorators: [{
type: NgModule,
args: [{
imports: [
CommonModule,
FormsModule,
MatButtonToggleModule,
MatButtonModule,
MatInputModule,
MatDatepickerModule,
MatListModule,
MatTooltipModule,
MatIconModule,
MatMomentDateModule,
MatCardModule,
MatMenuModule,
MatDialogModule,
MatSelectModule,
MatTableModule,
DragDropModule,
MatCheckboxModule,
MatRadioModule,
MatSlideToggleModule,
MatStepperModule,
NgxMaskModule.forRoot(),
//AngularResizeEventModule,
NgxFileDropModule,
MatProgressBarModule
],
declarations: [
FormItemDirective,
FormItemComponent,
...formItemComponents,
FormBuilderComponent,
StarRatingComponent,
NgxSurveyComponent,
RadioGroupComponent,
SelectionListComponent,
SelectComponent,
FormItemFileComponent,
FileListItemFileComponent,
FileListItemImageComponent,
FileListItemVideoComponent,
FileSizePipe,
DurationPipe,
TruncatePipe,
FormItemVoiceComponent
],
exports: [
FormBuilderComponent,
NgxSurveyComponent
],
providers: [
NgxSurveyService,
{
provide: STEPPER_GLOBAL_OPTIONS, useValue: { showError: true }
}
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { FormBuilderComponent, FormItem, FormItemComponent, FormItemTypes, NgxSurveyComponent, NgxSurveyModule, NgxSurveyService, SurveyFile, buildField, buildOption };
//# sourceMappingURL=ngx-surveys.mjs.map