mdds-angular-composite
Version:
Augular Composite that compose multiple componennt to be a single page
431 lines (420 loc) • 18.4 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/router'), require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('@angular/common/http')) :
typeof define === 'function' && define.amd ? define('mdds-angular-composite', ['exports', '@angular/router', '@angular/core', '@angular/common', '@angular/forms', '@angular/common/http'], factory) :
(factory((global['mdds-angular-composite'] = {}),global.ng.router,global.ng.core,global.ng.common,global.ng.forms,global.ng.common.http));
}(this, (function (exports,router,core,common,forms,http) { 'use strict';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
function __values(o) {
var m = typeof Symbol === "function" && o[Symbol.iterator], i = 0;
if (m)
return m.call(o);
return {
next: function () {
if (o && i >= o.length)
o = void 0;
return { value: o && o[i++], done: !o };
}
};
}
function __read(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m)
return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
ar.push(r.value);
}
catch (error) {
e = { error: error };
}
finally {
try {
if (r && !r.done && (m = i["return"]))
m.call(i);
}
finally {
if (e)
throw e.error;
}
}
return ar;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var CompositeDirective = /** @class */ (function () {
function CompositeDirective(viewContainerRef) {
this.viewContainerRef = viewContainerRef;
}
CompositeDirective.decorators = [
{ type: core.Directive, args: [{
selector: '[composite-directive]',
},] }
];
/** @nocollapse */
CompositeDirective.ctorParameters = function () {
return [
{ type: core.ViewContainerRef }
];
};
return CompositeDirective;
}());
var CompositeSubmitDirective = /** @class */ (function () {
function CompositeSubmitDirective(viewContainerRef) {
this.viewContainerRef = viewContainerRef;
}
CompositeSubmitDirective.decorators = [
{ type: core.Directive, args: [{
selector: '[composite-submit-directive]',
},] }
];
/** @nocollapse */
CompositeSubmitDirective.ctorParameters = function () {
return [
{ type: core.ViewContainerRef }
];
};
return CompositeSubmitDirective;
}());
var CompositeComponent = /** @class */ (function () {
function CompositeComponent(componentFactoryResolver, router$$1) {
this.componentFactoryResolver = componentFactoryResolver;
this.router = router$$1;
this.totalSteps = 0;
this.stepCompRef = [];
this.stepCompIns = [];
this.stepCompEmitter = [];
this.errorMessages = [];
this.submitting = false;
this.componentEvents = new core.EventEmitter();
}
/**
* @return {?}
*/
CompositeComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
if (!this.steps) {
console.warn("No steps defined for CompositeComponent.");
return;
}
this.totalSteps = this.steps.length;
};
/**
* @return {?}
*/
CompositeComponent.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
var _this = this;
if (!this.compositeDirectives) {
console.warn("No composite directive for CompositeComponent.");
return;
}
setTimeout(( /**
* @return {?}
*/function () {
_this.loadAllSteps();
}), 10);
this.componentEvents.emit({
//telling parent we are ready to load steps
stepIndex: undefined,
message: {
type: 'ngAfterViewInit'
},
});
};
/**
* @param {?} index
* @param {?} stepConfig
* @return {?}
*/
CompositeComponent.prototype.reloadStep = /**
* @param {?} index
* @param {?} stepConfig
* @return {?}
*/
function (index, stepConfig) {
var _this = this;
/** @type {?} */
var directive = this.compositeDirectives.toArray()[index];
var stepTitle = stepConfig.stepTitle, stepComponent = stepConfig.stepComponent, mandatory = stepConfig.mandatory, preSelectedId = stepConfig.preSelectedId, searchObj = stepConfig.searchObj, disableActionButtions = stepConfig.disableActionButtions;
if (!stepComponent)
return; //stop handling this step.
//stop handling this step.
/** @type {?} */
var viewContainerRef = directive.viewContainerRef;
viewContainerRef.clear();
/** @type {?} */
var componentFactory = this.componentFactoryResolver.resolveComponentFactory(stepComponent);
/** @type {?} */
var componentRef = viewContainerRef.createComponent(componentFactory);
// create and insert in one call
/** @type {?} */
var componentInstance = componentRef.instance;
this.stepCompIns[index] = componentInstance;
componentInstance.inputData = {
stepTitle: stepTitle,
preSelectedId: preSelectedId,
mandatory: mandatory,
};
componentInstance.searchObj = searchObj;
componentInstance.disableActionButtions = disableActionButtions;
if (index === 0) {
componentInstance.setFocus();
}
componentInstance.eventEmitter.subscribe(( /**
* @param {?} message
* @return {?}
*/function (message) {
if (message) {
/** @type {?} */
var msg = {
stepIndex: index,
message: message,
};
_this.componentEvents.emit(msg);
}
}));
};
/**
* @return {?}
*/
CompositeComponent.prototype.loadAllSteps = /**
* @return {?}
*/
function () {
for (var index = 0; index < this.compositeDirectives.length; index++) {
if (this.stepCompIns[index])
continue; //already loaded
if (!this.stepConfigs[index])
continue; //no configuration
this.reloadStep(index, this.stepConfigs[index]);
}
};
/**
* @return {?}
*/
CompositeComponent.prototype.allActionsReady = /**
* @return {?}
*/
function () {
var e_1, _a;
/** @type {?} */
var ready = true;
try {
for (var _b = __values(this.stepConfigs.entries()), _c = _b.next(); !_c.done; _c = _b.next()) {
var _d = __read(_c.value, 2), index = _d[0], step = _d[1];
this.errorMessages[index] = false; // no error
if (step.mandatory) {
/** @type {?} */
var instance = this.stepCompIns[index];
if (!instance) {
return false;
}
if (instance.actionType === 'selection') {
/** @type {?} */
var value = instance.getSelectedItems();
if (value.length === 0) {
this.errorMessages[index] = true;
ready = false;
return false;
}
}
else if (instance.actionType === 'term') {
if (!instance.isTermChecked()) {
this.errorMessages[index] = true;
return false;
}
}
}
}
}
catch (e_1_1) {
e_1 = { error: e_1_1 };
}
finally {
try {
if (_c && !_c.done && (_a = _b.return))
_a.call(_b);
}
finally {
if (e_1)
throw e_1.error;
}
}
return ready;
};
/**
* @return {?}
*/
CompositeComponent.prototype.onSubmit = /**
* @return {?}
*/
function () {
var _this = this;
var e_2, _a;
this.submitting = true;
if (!(this.allActionsReady())) {
return;
}
/** @type {?} */
var viewContainerRef = this.compositeSubmitDirective.viewContainerRef;
viewContainerRef.clear();
if (!this.submitCompRef) {
/** @type {?} */
var componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.submit.compoment);
this.submitCompRef = viewContainerRef.createComponent(componentFactory); // create and insert in one call
}
/** @type {?} */
var componentInstance = this.submitCompRef.instance;
/** @type {?} */
var initData = {};
var _loop_1 = function (index, step) {
/** @type {?} */
var instance = this_1.stepCompIns[index];
/** @type {?} */
var value = void 0;
if (instance.actionType === 'selection') {
value = instance.getSelectedItems();
if (value.length === 0) {
value = undefined;
}
else if (!componentInstance.arrayFields.some(( /**
* @param {?} x
* @return {?}
*/function (x) { return x[0] === step.submitFieldName; }))) { //check if the target fields is an array fields. in ['fieldName', 'Field type'] format
value = value[0]; //only get one object
}
}
else if (instance.actionType === 'term') {
value = instance.isTermChecked();
}
initData[step.submitFieldName] = value;
};
var this_1 = this;
try {
for (var _b = __values(this.stepConfigs.entries()), _c = _b.next(); !_c.done; _c = _b.next()) {
var _d = __read(_c.value, 2), index = _d[0], step = _d[1];
_loop_1(index, step);
}
}
catch (e_2_1) {
e_2 = { error: e_2_1 };
}
finally {
try {
if (_c && !_c.done && (_a = _b.return))
_a.call(_b);
}
finally {
if (e_2)
throw e_2.error;
}
}
componentInstance.id = undefined;
componentInstance.embeddedView = true;
componentInstance.initData = initData;
componentInstance.ngOnInit();
componentInstance.onSubmit();
componentInstance.done.subscribe(( /**
* @param {?} value
* @return {?}
*/function (value) {
if (value) {
_this.router.navigateByUrl(_this.submit.succeedUrl);
}
}));
};
/**
* @return {?}
*/
CompositeComponent.prototype.onCancel = /**
* @return {?}
*/
function () {
this.router.navigateByUrl(this.submit.cancelUrl);
};
CompositeComponent.decorators = [
{ type: core.Component, args: [{
selector: 'app-composite',
template: "<div>\n <h3 class=\"mt-3\">Class Enrollment:</h3>\n\n <div *ngFor=\"let step of steps; index as idx;\">\n <h4 class=\"mt-3\">{{idx + 1}}. {{step.stepName}}</h4>\n <ng-template composite-directive></ng-template>\n <div class=\"error-message\" *ngIf=\"errorMessages[idx]\">{{step.errorMessage}}</div>\n </div>\n\n <div class=\"action-buttons-center mt-3\">\n <button class=\"btn btn-success\" \n (click)=\"onSubmit()\">Submit</button>\n <button class=\"btn btn-outline-success\" \n type=\"button\" (click)=\"onCancel()\">Cancel</button>\n \n <div *ngIf=\"submitting && !allActionsReady()\" class=\"error-message\">Please check and fix all errors before submitting.</div>\n </div>\n\n <div style=\"display: none;\">\n <ng-template composite-submit-directive></ng-template>\n </div>\n</div>",
styles: [".action-buttons-center{width:100%;float:right;text-align:center;margin-bottom:1.25rem}.action-buttons-center .btn{display:inline-block;margin-left:2.5rem}.error-message{color:#dc3545;margin-top:1rem;font-style:italic}"]
}] }
];
/** @nocollapse */
CompositeComponent.ctorParameters = function () {
return [
{ type: core.ComponentFactoryResolver },
{ type: router.Router }
];
};
CompositeComponent.propDecorators = {
steps: [{ type: core.Input }],
stepConfigs: [{ type: core.Input }],
title: [{ type: core.Input }],
submit: [{ type: core.Input }],
componentEvents: [{ type: core.Output }],
compositeDirectives: [{ type: core.ViewChildren, args: [CompositeDirective,] }],
compositeSubmitDirective: [{ type: core.ViewChild, args: [CompositeSubmitDirective,] }]
};
return CompositeComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var CompositeModule = /** @class */ (function () {
function CompositeModule() {
}
CompositeModule.decorators = [
{ type: core.NgModule, args: [{
imports: [
common.CommonModule,
forms.FormsModule,
forms.ReactiveFormsModule,
http.HttpClientModule,
],
declarations: [
CompositeComponent,
CompositeDirective,
CompositeSubmitDirective
],
exports: [
CompositeComponent
],
providers: [],
},] }
];
return CompositeModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
exports.CompositeComponent = CompositeComponent;
exports.CompositeModule = CompositeModule;
exports.ɵa = CompositeDirective;
exports.ɵb = CompositeSubmitDirective;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=mdds-angular-composite.umd.js.map