@nova-ui/dashboards
Version:
Nova Dashboards is a framework designed to provide feature developers with a common solution for presenting data coming from various sources within a single view, as well as a set of predefined widget visualizations that are 100% configuration-driven and
389 lines • 15.8 kB
JavaScript
"use strict";
// © 2022 SolarWinds Worldwide, LLC. All rights reserved.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to
// deal in the Software without restriction, including without limitation the
// rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
// sell copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
var DashwizComponent_1;
Object.defineProperty(exports, "__esModule", { value: true });
exports.DashwizComponent = void 0;
const tslib_1 = require("tslib");
const overlay_1 = require("@angular/cdk/overlay");
const core_1 = require("@angular/core");
const find_1 = tslib_1.__importDefault(require("lodash/find"));
const findIndex_1 = tslib_1.__importDefault(require("lodash/findIndex"));
const isUndefined_1 = tslib_1.__importDefault(require("lodash/isUndefined"));
const rxjs_1 = require("rxjs");
const bits_1 = require("@nova-ui/bits");
const dashwiz_step_component_1 = require("../dashwiz-step/dashwiz-step.component");
const dashwiz_buttons_component_1 = require("./dashwiz-buttons.component");
const dashwiz_service_1 = require("./dashwiz.service");
/**
* Component that provides wizard functionality.
*/
let DashwizComponent = class DashwizComponent {
static { DashwizComponent_1 = this; }
static { this.placeholderFinishText = "Action"; } // as a placeholder "Action" does not need to be i18n
constructor(changeDetector, componentFactoryResolver, logger, dashwizService, scrollDispatcher) {
this.changeDetector = changeDetector;
this.componentFactoryResolver = componentFactoryResolver;
this.logger = logger;
this.dashwizService = dashwizService;
this.scrollDispatcher = scrollDispatcher;
/**
* Set to true to hide the wizard header including the step breadcrumbs.
* (default: false)
*/
this.hideHeader = false;
/**
* Set to true to show the "Next" button at any point during the wizard process.
* (default: false)
*/
this.canProceed = false;
/**
* Set to true to show the "Finish" button at any point during the wizard process.
* (default: false)
*/
this.canFinish = false;
/**
* Overrides the default text on the finish step button.
* (default: 'Action')
*/
this.finishText = DashwizComponent_1.placeholderFinishText;
/**
* Use this to stretch lines between step labels according to largest label width.
* (default: false)
*/
this.stretchStepLines = false;
/**
* Evaluated when a step is selected.
*/
this.stepNavigated = new core_1.EventEmitter();
/**
* Evaluated when the user attempts to cancel the wizard.
*/
this.cancel = new core_1.EventEmitter();
/**
* Evaluated when the user completes the wizard.
*/
this.finish = new core_1.EventEmitter();
/**
* Emits when next button is clicked.
*/
this.next = new core_1.EventEmitter();
/**
* Emits when Back button is clicked.
*/
this.back = new core_1.EventEmitter();
/**
* Use this BehaviorSubject to control navigability between steps
*/
this.navigationControl = new rxjs_1.BehaviorSubject({
busyState: { busy: false },
allowStepChange: true,
});
this.stepLineWidth = 65;
this.scrolled = false;
this.previousStepIndex = 0;
this.onBack = () => {
if (!(0, isUndefined_1.default)(this.stepIndex)) {
let previousStep = this.arraySteps[this.stepIndex - 1];
if (previousStep.hidden || previousStep.disabled) {
previousStep = (0, find_1.default)(this.arraySteps.slice(0).reverse(), (step) => !step.hidden, (0, findIndex_1.default)(this.arraySteps.slice(0).reverse(), this.arraySteps[this.stepIndex]) + 1);
}
this.selectStep(previousStep);
this.back.emit();
}
};
this.onNext = () => {
let nextStep = this.arraySteps[this.stepIndex + 1];
this.handleStepControl(this.currentStep);
this.currentStep.nextStep({
currentStepIndex: this.stepIndex,
currentStep: this.currentStep,
previousStep: this.currentStep,
previousStepIndex: this.stepIndex,
});
if (nextStep.hidden ||
(nextStep.disabled && !(0, isUndefined_1.default)(nextStep.stepControl))) {
// this disabled does not let user to go forward when next is disabled. Needs to be changed after validation
nextStep = (0, find_1.default)(this.arraySteps, (step) => !step.hidden, this.stepIndex + 1);
}
if ((0, isUndefined_1.default)(this.currentStep.stepControl) ||
this.currentStep.stepControl) {
this.currentStep.complete = true;
}
if (nextStep.disabled && !nextStep.visited) {
this.currentStep.complete = false;
}
this.selectStep(nextStep);
this.next.emit();
};
this.onFinish = () => {
this.finish.emit();
};
this.onCancel = () => {
this.cancel.emit(this.steps.toArray().filter((step) => step.complete).length !== 0);
};
// eslint-disable-next-line @typescript-eslint/member-ordering
this.buttonPortalActionMap = {
cancel: this.onCancel,
next: this.onNext,
back: this.onBack,
finish: this.onFinish,
};
if (dashwizService) {
dashwizService.component = this;
}
}
ngOnInit() {
this.scrollDispatcher.scrolled().subscribe((event) => {
const element = event?.getElementRef()?.nativeElement;
if (element?.classList?.contains("configurator-scrollable")) {
this.scrolled = !!element?.scrollTop;
}
});
this.buttonComponentTypes = this.buttonComponentTypes || [
dashwiz_buttons_component_1.DashwizButtonsComponent.lateLoadKey,
];
if (this.finishText === DashwizComponent_1.placeholderFinishText) {
this.logger
.warn(`DashwizComponent input "finishText" is using placeholder text
"${DashwizComponent_1.placeholderFinishText}". A value should be specified.`);
}
}
ngDoCheck() {
if (this.currentStep) {
this.buttonProperties = {
busy: this.currentStep.busyConfig.busy,
canProceed: this.canProceed,
canFinish: this.canFinish,
isLastStepActive: this.steps.last.active,
isFirstStepActive: this.steps.first.active,
nextText: this.currentStep.nextText,
finishText: this.finishText,
};
}
}
ngAfterContentInit() {
const activeTabs = this.steps.filter((item) => item.active);
this.arraySteps = this.steps.toArray();
if (activeTabs.length === 0) {
this.currentStep = this.steps.first;
this.selectStep(this.currentStep);
this.changeDetector.detectChanges();
}
this.steps.toArray().forEach((step) => {
step.valid.subscribe((event) => {
if (!(0, isUndefined_1.default)(event)) {
this.handleStepControl(step);
}
});
});
this.navigationControl.subscribe((value) => {
this.currentStep.busyConfig = value.busyState;
if (value.allowStepChange &&
!(0, isUndefined_1.default)(this.futureStep) &&
this.currentStep !== this.futureStep) {
this.enterAnotherStep();
this.futureStep = undefined;
}
});
}
ngAfterViewChecked() {
if (this.stretchStepLines) {
this.stepLineWidth = Math.round(this.getLargestLabelWidth() / 2);
this.changeDetector.detectChanges();
}
}
ngOnDestroy() {
this.steps
.toArray()
.forEach((step) => step.valid.unsubscribe());
this.navigationControl.unsubscribe();
this.dashwizService.component = undefined;
}
addStepDynamic(wizardStep, indexToInsert) {
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(dashwiz_step_component_1.DashwizStepComponent);
const componentRef = this.dynamicStep.createComponent(componentFactory);
const instance = componentRef.instance;
instance.stepTemplate = wizardStep.stepTemplate;
this.arraySteps.splice(indexToInsert, 0, componentRef.instance);
this.steps.reset(this.arraySteps);
return componentRef.instance;
}
disableStep(step) {
const indexOfStep = this.arraySteps.indexOf(step);
const toDisable = this.arraySteps[indexOfStep];
toDisable.disabled = true;
this.changeDetector.detectChanges();
}
enableStep(step) {
const indexOfStep = this.arraySteps.indexOf(step);
const toDisable = this.arraySteps[indexOfStep];
toDisable.disabled = false;
this.changeDetector.detectChanges();
}
hideStep(step) {
const indexOfStep = this.arraySteps.indexOf(step);
const toHide = this.arraySteps[indexOfStep];
toHide.hidden = true;
}
showStep(step) {
const indexOfStep = this.arraySteps.indexOf(step);
const visibleStep = this.arraySteps[indexOfStep];
visibleStep.hidden = false;
}
goToStep(stepIndex) {
this.selectStep(this.arraySteps[stepIndex]);
}
selectStep(step) {
if (!step.disabled) {
this.futureStep = step;
this.currentStep.exitStep({
currentStepIndex: this.arraySteps.indexOf(this.futureStep),
currentStep: this.futureStep,
previousStep: this.arraySteps[this.stepIndex],
previousStepIndex: this.stepIndex,
});
if (this.navigationControl.value.allowStepChange) {
this.enterAnotherStep();
}
}
}
enterAnotherStep() {
this.currentStep.applyExitingStep();
this.futureStep?.enterStep();
if (this.futureStep) {
this.currentStep = this.futureStep;
}
this.currentStep.applyEnteringStep();
this.stepIndex = this.arraySteps.indexOf(this.currentStep);
this.stepNavigatedEvent = {
currentStepIndex: this.stepIndex,
currentStep: this.currentStep,
previousStep: this.arraySteps[this.previousStepIndex],
previousStepIndex: this.previousStepIndex,
};
this.stepNavigated.emit(this.stepNavigatedEvent);
this.previousStepIndex = this.stepIndex;
}
onButtonPortalOutput(event) {
// @ts-ignore
this.buttonPortalActionMap[event.id]?.();
}
disableFollowingSteps() {
this.arraySteps.slice(this.stepIndex + 1).map((item) => {
item.disabled = true;
});
}
enableFollowingSteps() {
this.arraySteps.slice(this.stepIndex + 1).map((item) => {
item.disabled = false;
});
}
handleStepControl(step) {
if (!(0, isUndefined_1.default)(step.stepControl)) {
if (step.stepControl) {
this.enableFollowingSteps();
}
else {
this.disableFollowingSteps();
}
}
}
getLargestLabelWidth() {
const widths = this.stepTitles.map((title) => title.nativeElement.offsetWidth);
return Math.round(Math.max(...widths));
}
};
exports.DashwizComponent = DashwizComponent;
tslib_1.__decorate([
(0, core_1.ContentChildren)(dashwiz_step_component_1.DashwizStepComponent),
tslib_1.__metadata("design:type", core_1.QueryList)
], DashwizComponent.prototype, "steps", void 0);
tslib_1.__decorate([
(0, core_1.ViewChildren)("stepTitle"),
tslib_1.__metadata("design:type", core_1.QueryList)
], DashwizComponent.prototype, "stepTitles", void 0);
tslib_1.__decorate([
(0, core_1.ViewChild)("container", { read: core_1.ViewContainerRef }),
tslib_1.__metadata("design:type", Object)
], DashwizComponent.prototype, "dynamicStep", void 0);
tslib_1.__decorate([
(0, core_1.Input)(),
tslib_1.__metadata("design:type", Object)
], DashwizComponent.prototype, "hideHeader", void 0);
tslib_1.__decorate([
(0, core_1.Input)(),
tslib_1.__metadata("design:type", Object)
], DashwizComponent.prototype, "canProceed", void 0);
tslib_1.__decorate([
(0, core_1.Input)(),
tslib_1.__metadata("design:type", Object)
], DashwizComponent.prototype, "canFinish", void 0);
tslib_1.__decorate([
(0, core_1.Input)(),
tslib_1.__metadata("design:type", Object)
], DashwizComponent.prototype, "finishText", void 0);
tslib_1.__decorate([
(0, core_1.Input)(),
tslib_1.__metadata("design:type", Boolean)
], DashwizComponent.prototype, "stretchStepLines", void 0);
tslib_1.__decorate([
(0, core_1.Input)(),
tslib_1.__metadata("design:type", Array)
], DashwizComponent.prototype, "buttonComponentTypes", void 0);
tslib_1.__decorate([
(0, core_1.Output)(),
tslib_1.__metadata("design:type", Object)
], DashwizComponent.prototype, "stepNavigated", void 0);
tslib_1.__decorate([
(0, core_1.Output)(),
tslib_1.__metadata("design:type", Object)
], DashwizComponent.prototype, "cancel", void 0);
tslib_1.__decorate([
(0, core_1.Output)(),
tslib_1.__metadata("design:type", Object)
], DashwizComponent.prototype, "finish", void 0);
tslib_1.__decorate([
(0, core_1.Output)(),
tslib_1.__metadata("design:type", Object)
], DashwizComponent.prototype, "next", void 0);
tslib_1.__decorate([
(0, core_1.Output)(),
tslib_1.__metadata("design:type", Object)
], DashwizComponent.prototype, "back", void 0);
tslib_1.__decorate([
(0, core_1.Input)(),
tslib_1.__metadata("design:type", rxjs_1.BehaviorSubject)
], DashwizComponent.prototype, "navigationControl", void 0);
exports.DashwizComponent = DashwizComponent = DashwizComponent_1 = tslib_1.__decorate([
(0, core_1.Component)({
selector: "nui-dashwiz",
templateUrl: "./dashwiz.component.html",
styleUrls: ["./dashwiz.component.less"],
host: { class: "flex-grow-1 overflow-auto" },
standalone: false,
}),
tslib_1.__metadata("design:paramtypes", [core_1.ChangeDetectorRef,
core_1.ComponentFactoryResolver,
bits_1.LoggerService,
dashwiz_service_1.DashwizService,
overlay_1.ScrollDispatcher])
], DashwizComponent);
//# sourceMappingURL=dashwiz.component.js.map