ws-form-builder/dist/src-inlined/components/ws-form-builder-wrapper/ws-form-builder-wrapper.metadata.json

Ionic 2 Form Builder

[{"__symbolic":"module","version":4,"metadata":{"WsFormBuilderWrapperComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ws-form-builder-wrapper","template":"\n    <div class=\"ws-form-builder-wrapper\">\n\n    \t<div *ngIf=\"errorStatus\">\n    \t\t<div class=\"error-message\">{{wrongField}}</div>\n    \t</div>\n\n    \t<div *ngIf=\"showProgressBar\">\n    \t\t<ws-progress-bar [progressBarTotal]=\"totalSteps\" [progressBarCurrent]=\"currentStep\"></ws-progress-bar>\n    \t</div>\n\n    \t<ion-list>\n    \t\t<div *ngFor=\"let step of formConfig.steps; let s = index;\">\n    \t\t\t<span *ngIf=\"s === currentStep\">\n    \t\t\t\t<div class=\"step-container\" [ngClass]=\"{'step-container-show': showActiveTab === true}\">\n    \t\t\t\t{{step.stepTitle}}\n    \t\t\t\t<div *ngFor=\"let question of step.questions; let q = index;\">\n    \t\t\t\t\t<span *ngIf=\"question.type === 'text'\">\n    \t\t\t\t\t\t<ws-text-input [question]='question' (answerGiven)=\"updateField($event,s,q)\"></ws-text-input>\n    \t\t\t\t\t</span>\n\n    \t\t\t\t\t<span *ngIf=\"question.type === 'textarea'\">\n    \t\t\t\t\t\t<ws-text-area [question]='question' (answerGiven)=\"updateField($event,s,q)\"></ws-text-area>\n    \t\t\t\t\t</span>\n\n    \t\t\t\t\t<span *ngIf=\"question.type === 'email'\">\n    \t\t\t\t\t\t<ws-email-input [question]='question' (answerGiven)=\"updateField($event,s,q)\"></ws-email-input>\n    \t\t\t\t\t</span>\n\n    \t\t\t\t\t<span *ngIf=\"question.type === 'password'\">\n    \t\t\t\t\t\t<ws-password-input [question]='question' (answerGiven)=\"updateField($event,s,q)\"></ws-password-input>\n    \t\t\t\t\t</span>\n\n    \t\t\t\t\t<span *ngIf=\"question.type === 'phone'\">\n    \t\t\t\t\t\t<ws-phone-input [question]='question' (answerGiven)=\"updateField($event,s,q)\"></ws-phone-input>\n    \t\t\t\t\t</span>\n\n    \t\t\t\t\t<span *ngIf=\"question.type === 'number'\">\n    \t\t\t\t\t\t<ws-number-input [question]='question' (answerGiven)=\"updateField($event,s,q)\"></ws-number-input>\n    \t\t\t\t\t</span>\n\n    \t\t\t\t\t<span *ngIf=\"question.type === 'radio'\">\n    \t\t\t\t\t\t<ws-radio-group [question]='question' (answerGiven)=\"updateField($event,s,q)\"></ws-radio-group>\n    \t\t\t\t\t</span>\n\n    \t\t\t\t\t<span *ngIf=\"question.type === 'checkbox'\">\n    \t\t\t\t\t\t<ws-checkbox-group [question]='question' (answerGiven)=\"updateField($event,s,q)\"></ws-checkbox-group>\n    \t\t\t\t\t</span>\n\n    \t\t\t\t\t<span *ngIf=\"question.type === 'checkbox-grid'\">\n    \t\t\t\t\t\t<ws-checkbox-grid [question]='question' (answerGiven)=\"updateField($event,s,q)\"></ws-checkbox-grid>\n    \t\t\t\t\t</span>\n\t\t\t\t\t\n    \t\t\t\t\t<span *ngIf=\"question.type === 'select'\">\n    \t\t\t\t\t\t<ws-select-dropdown [question]='question' (answerGiven)=\"updateField($event,s,q)\"></ws-select-dropdown>\n    \t\t\t\t\t</span>\n\n    \t\t\t\t\t<span *ngIf=\"question.type === 'date'\">\n    \t\t\t\t\t\t<ws-date-picker [question]='question' (answerGiven)=\"updateField($event,s,q)\"></ws-date-picker>\n    \t\t\t\t\t</span>\n\n\n    \t\t\t\t\t<span *ngIf=\"question.type === 'profilepic'\">\n    \t\t\t\t\t\t<ws-profile-picture [question]='question' (answerGiven)=\"updateField($event,s,q)\"></ws-profile-picture>\n    \t\t\t\t\t</span>\n\n    \t\t\t\t\t<span *ngIf=\"question.type === 'pincode'\">\n    \t\t\t\t\t\t<ws-pincode [question]='question' (answerGiven)=\"updateField($event,s,q)\"></ws-pincode>\n    \t\t\t\t\t</span>\n\n    \t\t\t\t\t<span *ngIf=\"question.type === 'punchcard'\">\n\n    \t\t\t\t\t\t<ws-punchcard [question]='question' (answerGiven)=\"updateField($event,s,q)\"></ws-punchcard>\n    \t\t\t\t\t</span>\n\n    \t\t\t\t\t<span *ngIf=\"question.type === 'toggle'\">\n    \t\t\t\t\t\t<ws-toggle [question]='question' (answerGiven)=\"updateField($event,s,q)\"></ws-toggle>\n    \t\t\t\t\t</span>\n\n    \t\t\t\t\t<span *ngIf=\"question.type === 'slider'\">\n    \t\t\t\t\t\t<ws-single-range-slider [question]='question' (answerGiven)=\"updateField($event,s,q)\"></ws-single-range-slider>\n    \t\t\t\t\t</span>\n\t\t\t\t\t\n\n    \t\t\t\t</div>\n    \t\t\t</div>\n    \t\t\t</span>\n\n    \t\t</div>\n\n    \t</ion-list>\n\n\n\n    \t<div class=\"buttons\" *ngIf=\"buttonLayout === 'grid'\">\n    \t\t<div class=\"buttons__button-wrapper\" *ngIf=\"showPreviousButton\">\n    \t\t\t<button class=\"buttons__previous-button\" ion-button (tap)=\"goToPreviousStep()\" [disabled]=\"disablePreviousButton\" round [color]=\"prevButtonColor\">\n    \t\t\t\t{{previousButtonText}}\n    \t\t\t</button>\n    \t\t</div>\n    \t\t<div class=\"buttons__button-wrapper\">\n    \t\t\t<button class=\"buttons__next-button\" ion-button (tap)=\"continueToNext()\" round [color]=\"nextButtonColor\" [disabled]=\"disableNextButton\">\n    \t\t\t\t{{nextButtonText}}\n    \t\t\t</button>\n    \t\t</div>\n    \t</div>\n\n\n\n\n\n\n    \t<div class=\"block-buttons\" *ngIf=\"buttonLayout === 'block'\">\n    \t\t<button ion-button (tap)=\"continueToNext()\"  [attr.block]=\"nextButtonStyle\" round [color]=\"nextButtonColor\" [disabled]=\"disableNextButton\">{{nextButtonText}}</button>\n\t\t\n    \t\t<span *ngIf=\"showPreviousButton\">\n    \t\t\t<button ion-button (tap)=\"goToPreviousStep()\" [attr.block]=\"prevButtonStyle\" [disabled]=\"disablePreviousButton\" round [color]=\"prevButtonColor\">{{previousButtonText}}</button>\n    \t\t</span>\n    \t</div>\n\t\n\n\n    \t<span *ngIf=\"debugMode\">\n    \t\t<pre style=\"max-height:150px; border:1px solid grey; padding:15px;\">\n    \t\t{{formConfig | json}}\n    \t\t</pre>\n    \t</span>\n    </div>\n  ","styles":["\n    .ws-form-builder-wrapper .step-container{width:100%;display:block;opacity:0;-moz-transition:all 250ms;-o-transition:all 250ms;-webkit-transition:all 250ms;transition:all 250ms;-webkit-transform:translate(0, -10px);-moz-transform:translate(0, -10px);-ms-transform:translate(0, -10px);-o-transform:translate(0, -10px);transform:translate(0, -10px)}.ws-form-builder-wrapper .step-container.step-container-show{opacity:1;-webkit-transform:translate(0, 0);-moz-transform:translate(0, 0);-ms-transform:translate(0, 0);-o-transform:translate(0, 0);transform:translate(0, 0)}\n  "]}]}],"members":{"content":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":[{"__symbolic":"reference","module":"ionic-angular","name":"Content"}]}]}],"formConfig":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["formConfig"]}]}],"formBuilderCallback":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"formBuilderCurrentStepChangeCallback":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../../providers/form-builder/form-builder","name":"FormBuilderProvider"}]}],"ngOnInit":[{"__symbolic":"method"}],"validateStep":[{"__symbolic":"method"}],"continueToNext":[{"__symbolic":"method"}],"goToNextStep":[{"__symbolic":"method"}],"extractData":[{"__symbolic":"method"}],"goToPreviousStep":[{"__symbolic":"method"}],"updateField":[{"__symbolic":"method"}],"fancyLog":[{"__symbolic":"method"}]}}}}]