@nova-ui/bits
Version:
SolarWinds Nova Framework
302 lines • 78.6 kB
JavaScript
// © 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.
import { Directionality } from "@angular/cdk/bidi";
import { CdkStepper } from "@angular/cdk/stepper";
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Input, NgZone, QueryList, ViewChild, ViewChildren, ViewEncapsulation, } from "@angular/core";
import last from "lodash/last";
import pull from "lodash/pull";
import without from "lodash/without";
import { takeUntil } from "rxjs/operators";
import { WizardDirective } from "../wizard.directive";
import * as i0 from "@angular/core";
import * as i1 from "@angular/cdk/bidi";
import * as i2 from "@angular/common";
import * as i3 from "../wizard-step-header/wizard-step-header.component";
import * as i4 from "../wizard-footer/wizard-footer.component";
import * as i5 from "../wizard-overflow/wizard-overflow.component";
// <example-url>./../examples/index.html#/wizard-v2</example-url>
export class WizardHorizontalComponent extends WizardDirective {
static { this.ngAcceptInputTypeEditable = undefined; }
static { this.ngAcceptInputTypeOptional = undefined; }
static { this.ngAcceptInputTypeCompleted = undefined; }
static { this.ngAcceptInputTypeHasError = undefined; }
get selectedIndex() {
return super.selectedIndex;
}
set selectedIndex(value) {
super.selectedIndex = value;
}
constructor(dir, cdRef, el, zone) {
super(dir, cdRef, el);
this.dir = dir;
this.cdRef = cdRef;
this.el = el;
this.zone = zone;
this.hasOverflow = false;
this.isInResponsiveMode = false;
this.allHeadersWidth = 0;
this.visibleSteps = [];
this.overflownStepsStart = [];
this.overflownStepsEnd = [];
this.dynamicSteps = [];
this.stepsCachedArray = [];
this.dynamicStepWidthAdjustment = 0;
this.headerPaddings = 0;
this.stepHeaderWidth = 0;
this.headerContainerWidth = 0;
this.overflowComponentWidth = 0;
/** Whether the label should display in bottom or end position. */
this.labelPosition = "top";
}
ngOnInit() {
// Checking the validity of previous steps by default.
this.linear = true;
}
ngAfterViewInit() {
super.ngAfterViewInit();
this.stepsCachedArray = [...this.stepsArray];
// Initial checking if there is an overflow and determining some values we'll use in calculations later
this.checkHeadingsView();
this.cdRef.detectChanges();
this.overflowComponentWidth =
this.overflowComponents?.first?.el?.nativeElement?.getBoundingClientRect()
?.width || 0;
// This handles how headers are processed during the resize process
this.headerResizeObserver = new ResizeObserver((entry) => {
this.zone.run(() => {
if (!this.hasOverflow) {
this.checkHeadingsView();
}
this.onContainerResize(entry[0]);
this.checkResponsiveMode();
this.cdRef.markForCheck();
});
});
// Steps change event is triggered every time we navigate through the steps AND when dynamic steps are being added/removed (or anything else
// happens in the scope of the current step's view). We only need to rebuild the headers view if there are any changes connected with dynamic steps.
// Otherwise, we don't do anything. We also have to track whether any of the dynamic steps were added or not on every event run, because we don't
// know when exactly user will attempt to add a dynamic step. If this happens, we need to also adjust the width of all the header items with respect
// to the added step to properly track the overflow, as it can happen when the dynamic step is added.
this.steps.changes.pipe(takeUntil(this._destroyed)).subscribe(() => {
this.checkDynamicSteps();
if (this.dynamicSteps.length) {
this.checkHeadingsView();
}
this.dynamicStepWidthAdjustment = this.stepsArray.includes(this.dynamicSteps[0])
? this.stepHeaderWidth
: 0;
// We keep the cached array intact to properly tack when dynamic steps are added. Multiple dynamic steps may be added,
// but we're only interested in the latest one, because the rest will be hidden under the overflow elements, if there is
// no room for them among the visible items
this.stepsCachedArray = [...this.stepsArray];
});
this.selectionChange
.pipe(takeUntil(this._destroyed))
.subscribe((event) => {
// This describes the navigation between the headers in a visible and hidden areas in the responsive mode.
if (this.hasOverflow) {
if (event.previouslySelectedIndex < event.selectedIndex) {
if (this.overflownStepsEnd.length) {
const selectedIndex = this.overflownStepsEnd.findIndex((item) => item ===
event.selectedStep);
this.visibleSteps = this.visibleSteps.concat(this.overflownStepsEnd.splice(0, selectedIndex + 1));
this.overflownStepsStart =
this.overflownStepsStart.concat(this.visibleSteps.splice(0, selectedIndex + 1));
}
}
else {
if (this.overflownStepsStart.length) {
const startPiece = this.overflownStepsStart.splice(event.selectedIndex, this.overflownStepsStart.length -
event.selectedIndex);
this.visibleSteps = startPiece.concat(this.visibleSteps);
this.overflownStepsEnd.splice(0, 0, ...this.visibleSteps.splice(this.visibleSteps.length -
startPiece.length, startPiece.length));
}
}
}
});
this.headerResizeObserver.observe(this.headerContainer.nativeElement);
}
ngOnDestroy() {
super.ngOnDestroy();
this.headerResizeObserver.disconnect();
}
handleOverflow() {
this.checkOverflow();
if (this.hasOverflow || this.isInResponsiveMode) {
const numberOfVisibleItems = this.numberOfVisibleItems;
if (!this.isInResponsiveMode) {
if (this.state?.finished) {
this.visibleSteps = this.stepsArray.slice(-numberOfVisibleItems);
this.overflownStepsStart = this.stepsArray.slice(0, -numberOfVisibleItems);
// This covers an edge case with the saved wizard state. It can happen that the active element
// appears inside the hidden list of items, when the dynamnic steps are re-added.
// We make it visible again by retrieving it back to the visible items array
if (this.overflownStepsStart.length) {
while (!this.isCurrentStepVisible) {
this.takeLastAddFirst(this.overflownStepsStart, this.visibleSteps);
this.takeLastAddFirst(this.visibleSteps, this.overflownStepsEnd);
}
}
}
else {
this.visibleSteps = this.stepsArray.slice(0, numberOfVisibleItems);
this.overflownStepsEnd =
this.stepsArray.slice(numberOfVisibleItems);
}
}
else {
this.handleDynamicHeaderChanges(numberOfVisibleItems);
}
}
this.checkResponsiveMode();
}
get isCurrentStepVisible() {
return this.visibleSteps.includes(this.stepsArray[this.selectedIndex]);
}
get numberOfVisibleItems() {
return (Math.ceil((this.headerContainerWidth - this.headerPaddings * 2) /
this.stepHeaderWidth) - 1);
}
handleDynamicHeaderChanges(visibleItemsNUmber) {
const arr = [...this.stepsArray];
if (this.overflownStepsStart.length) {
arr.splice(0, this.overflownStepsStart.length);
}
this.visibleSteps = arr.slice(0, visibleItemsNUmber);
this.overflownStepsEnd = arr.slice(visibleItemsNUmber);
this.checkOverflow();
if (!this.hasOverflow && this.overflownStepsStart.length) {
this.visibleSteps.unshift(this.overflownStepsStart.splice(this.overflownStepsStart.length - 1, 1)[0]);
}
}
checkDynamicSteps() {
if (this.stepsArray.length > this.stepsCachedArray.length) {
this.dynamicSteps = without(this.stepsArray, ...this.stepsCachedArray);
}
if (this.stepsArray.length < this.stepsCachedArray.length) {
this.dynamicSteps = without(this.stepsCachedArray, ...this.stepsArray);
// If there are no dynamic items left in the main array we need to clean up the visual items array
if (!this.stepsArray.includes(this.dynamicSteps[0])) {
pull(this.visibleSteps, ...this.dynamicSteps);
}
}
if (this.stepsArray.length === this.stepsCachedArray.length) {
this.dynamicSteps = [];
}
}
checkHeadingsView() {
this.checkHeaderWidth();
this.checkHeaderPaddings();
this.getWidthsForCalculations();
this.handleOverflow();
}
checkHeaderPaddings() {
if (!this.headerPaddings) {
this.headerPaddings = +getComputedStyle(this.headerContainer.nativeElement).paddingLeft.slice(0, -2);
}
}
checkHeaderWidth() {
if (!this.stepHeaderWidth) {
this.stepHeaderWidth =
this.stepHeaders.first?._elementRef?.nativeElement?.getBoundingClientRect()
.width || 0;
}
}
getWidthsForCalculations() {
this.headerContainerWidth =
this.headerContainer.nativeElement?.getBoundingClientRect().width;
this.allHeadersWidth = this.stepHeaderWidth * this.steps.length;
}
checkOverflow() {
this.hasOverflow = this.allHeadersWidth > this.headerContainerWidth;
}
checkResponsiveMode() {
this.isInResponsiveMode =
!!this.overflownStepsStart.length ||
!!this.overflownStepsEnd.length;
}
takeLastAddFirst(source, target) {
target.unshift(source.splice(-1, 1)[0]);
}
takeFirstAddLast(source, target) {
target.push(source.splice(0, 1)[0]);
}
onContainerResize(entry) {
this.checkOverflow();
const newWidth = entry.contentRect.width;
const visibleStepsWidth = this.visibleSteps.length * this.stepHeaderWidth;
if (newWidth <
visibleStepsWidth +
this.overflowComponentWidth * 2 +
this.dynamicStepWidthAdjustment) {
if (this.visibleSteps[0] !== this.stepsArray[this.selectedIndex]) {
return this.takeFirstAddLast(this.visibleSteps, this.overflownStepsStart);
}
if (last(this.visibleSteps) !== this.stepsArray[this.selectedIndex]) {
return this.takeLastAddFirst(this.visibleSteps, this.overflownStepsEnd);
}
}
if (newWidth >
visibleStepsWidth +
this.stepHeaderWidth +
this.overflowComponentWidth * 2 +
this.dynamicStepWidthAdjustment) {
if (this.overflownStepsEnd.length) {
return this.takeFirstAddLast(this.overflownStepsEnd, this.visibleSteps);
}
if (this.overflownStepsStart.length) {
return this.takeLastAddFirst(this.overflownStepsStart, this.visibleSteps);
}
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WizardHorizontalComponent, deps: [{ token: i1.Directionality }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: WizardHorizontalComponent, selector: "nui-wizard-horizontal", inputs: { selectedIndex: "selectedIndex", labelPosition: "labelPosition" }, host: { attributes: { "aria-orientation": "horizontal", "role": "tablist" }, properties: { "class.nui-wizard-step-header__label-position--end": "labelPosition == 'end'", "class.nui-wizard-step-header__label-position--top": "labelPosition == 'top'" }, classAttribute: "nui-wizard-horizontal-layout" }, providers: [
{ provide: WizardDirective, useExisting: WizardHorizontalComponent },
{ provide: CdkStepper, useExisting: WizardHorizontalComponent },
], viewQueries: [{ propertyName: "headerContainer", first: true, predicate: ["headerContainer"], descendants: true }, { propertyName: "stepHeaders", predicate: ["stepHeaders"], descendants: true }, { propertyName: "overflowComponents", predicate: ["overflowComponent"], descendants: true }], exportAs: ["wizardHorizontal"], usesInheritance: true, ngImport: i0, template: "<div class=\"nui-wizard-horizontal-header-container\" #headerContainer>\n <!-- Left overflow container -->\n <ng-container *ngIf=\"isInResponsiveMode && overflownStepsStart.length\">\n <nui-wizard-overflow\n #overflowComponent\n class=\"overflow-left\"\n [template]=\"overflowStart\"\n [completed]=\"true\"\n [value]=\"overflownStepsStart.length\"\n >\n </nui-wizard-overflow>\n\n <ng-template #overflowStart>\n <div *ngIf=\"overflownStepsStart.length\" class=\"pb-3\">\n <strong>+{{ overflownStepsStart.length }} more steps</strong>\n </div>\n <div\n class=\"nui-wizard-horizontal-header-wrapper\"\n *ngFor=\"\n let step of overflownStepsStart;\n let i = index;\n let isFirst = first\n \"\n >\n <ng-template\n *ngTemplateOutlet=\"\n stepHeaderWithLines;\n context: {\n $implicit: steps,\n step: step,\n i: i,\n isFirst: isFirst\n }\n \"\n ></ng-template>\n </div>\n </ng-template>\n </ng-container>\n\n <!-- Visible items container -->\n <div\n class=\"nui-wizard-horizontal-header-wrapper\"\n *ngFor=\"\n let step of isInResponsiveMode ? visibleSteps : steps;\n let i = index;\n let isFirst = first\n \"\n >\n <ng-template\n *ngTemplateOutlet=\"\n stepHeaderWithLines;\n context: {\n $implicit: steps,\n step: step,\n i: overflownStepsStart.length + i,\n isFirst: isFirst\n }\n \"\n ></ng-template>\n </div>\n\n <!-- Right overflow container -->\n <ng-container *ngIf=\"isInResponsiveMode && overflownStepsEnd.length\">\n <nui-wizard-overflow\n #overflowComponent\n class=\"overflow-right\"\n [class.overflow-right-completed]=\"allStepsCompleted\"\n [template]=\"overflowEnd\"\n [completed]=\"allStepsCompleted\"\n [value]=\"overflownStepsEnd.length\"\n >\n </nui-wizard-overflow>\n\n <ng-template #overflowEnd>\n <div *ngIf=\"overflownStepsEnd.length\" class=\"pb-3\">\n <strong>+{{ overflownStepsEnd.length }} more steps</strong>\n </div>\n <div\n class=\"nui-wizard-horizontal-header-wrapper\"\n *ngFor=\"\n let step of overflownStepsEnd;\n let i = index;\n let isFirst = first\n \"\n >\n <ng-template\n *ngTemplateOutlet=\"\n stepHeaderWithLines;\n context: {\n $implicit: steps,\n step: step,\n i:\n overflownStepsStart.length +\n visibleSteps.length +\n i,\n isFirst: isFirst\n }\n \"\n ></ng-template>\n </div>\n </ng-template>\n </ng-container>\n</div>\n\n<div class=\"nui-wizard-horizontal-content-container\">\n <div\n *ngFor=\"let step of steps; let i = index\"\n class=\"nui-wizard-horizontal-content\"\n role=\"tabpanel\"\n [id]=\"stepContentIds[i]\"\n [attr.aria-labelledby]=\"labelIds[i]\"\n [attr.aria-expanded]=\"selectedIndex === i\"\n >\n <ng-container [ngTemplateOutlet]=\"step.content\"></ng-container>\n </div>\n</div>\n<div\n *ngIf=\"selected?.stepFooter\"\n class=\"nui-wizard-horizontal-footer-container\"\n>\n <wizard-footer [footer]=\"selected?.stepFooter\"></wizard-footer>\n</div>\n\n<ng-template\n #stepHeaderWithLines\n let-steps\n let-step=\"step\"\n let-i=\"i\"\n let-isFirst=\"isFirst\"\n>\n <div\n *ngIf=\"!isFirst\"\n class=\"nui-wizard-horizontal__step-connector-line\"\n [ngClass]=\"{\n 'nui-wizard-horizontal__step-connector-line--completed':\n (stepsArray[i - 1]?.completed && step.completed) ||\n selectedIndex === i\n }\"\n ></div>\n <nui-wizard-step-header\n #stepHeaders\n class=\"nui-wizard-horizontal-header\"\n (click)=\"step.select()\"\n (keydown)=\"_onKeydown($event)\"\n [tabIndex]=\"selectedIndex === i ? 0 : -1\"\n [id]=\"labelIds[i]\"\n [attr.aria-posinset]=\"i + 1\"\n [attr.aria-setsize]=\"steps.length\"\n [attr.aria-controls]=\"stepContentIds[i]\"\n [attr.aria-selected]=\"selectedIndex === i\"\n [attr.aria-label]=\"step.ariaLabel || null\"\n [attr.aria-labelledby]=\"\n !step.ariaLabel && step.ariaLabelledby ? step.ariaLabelledby : null\n \"\n [index]=\"i\"\n [stepStateConfig]=\"step.stepStateConfig\"\n [label]=\"step.stepLabel || step.label\"\n [selected]=\"selectedIndex === i\"\n [active]=\"step.completed || selectedIndex === i || !linear\"\n [step]=\"step\"\n [errorMessage]=\"step.errorMessage\"\n >\n </nui-wizard-step-header>\n</ng-template>\n", styles: [".nui-wizard-vertical,.nui-wizard-horizontal{display:block}.nui-dialog .nui-wizard-vertical,.nui-dialog .nui-wizard-horizontal{padding-top:0}.nui-dialog .nui-wizard-vertical .nui-wizard-horizontal-header-container,.nui-dialog .nui-wizard-horizontal .nui-wizard-horizontal-header-container{border-top:none}.nui-wizard-horizontal-header{display:flex;min-height:32px;max-height:72px;align-items:center}.nui-popover-container__content .nui-wizard-horizontal-header{flex-flow:row-reverse;justify-content:flex-end;padding:0;min-height:17px}[dir=rtl] .nui-wizard-horizontal-header .nui-wizard-step-header-icon{margin-right:0;margin-left:0}.nui-popover-container__content .nui-wizard-horizontal-header .nui-wizard-step-header-icon{margin-right:5px}.nui-wizard-step-header__label-position--top .nui-wizard-horizontal-header{flex-direction:column;height:auto}.nui-wizard-step-header__label-position--top .nui-wizard-horizontal-header .nui-wizard-step-header-icon{margin-right:0;margin-left:0}.nui-wizard-horizontal-header-container{display:flex;justify-content:center;text-align:center;padding:10px;border:1px solid;border-left:none;border-right:none;overflow:hidden;white-space:nowrap;align-items:center;background-color:var(--nui-color-bg-secondary,#fafafa);border-color:var(--nui-color-line-default,#d9d9d9);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.nui-wizard-horizontal-header-wrapper{position:relative}.nui-popover-container__content .nui-wizard-horizontal-header-wrapper:not(:last-child){margin-bottom:5px}.nui-popover-container__content .nui-wizard-horizontal-header-wrapper:hover{background-color:var(--nui-color-bg-secondary,#fafafa)}.nui-wizard-horizontal__step-connector-line{border-top-width:2px;border-top-style:solid;border-color:var(--nui-color-line-default,#d9d9d9)}.nui-wizard-horizontal__step-connector-line--completed{border-color:var(--nui-color-text-link,#0079aa)}.nui-wizard-step-header__label-position--top .nui-wizard-horizontal__step-connector-line{bottom:8px;right:80.5px;width:129px;position:absolute}.nui-popover-container__content .nui-wizard-horizontal__step-connector-line{position:absolute;top:-6px;left:7px;height:6px;border-left-width:1px;border-left-style:solid;border-top:none;border-bottom:none;border-right:none}.nui-wizard-horizontal-content{outline:0}.nui-wizard-horizontal-content[aria-expanded=false]{height:0;overflow:hidden}.nui-wizard-horizontal-content-container{overflow:hidden}.nui-wizard-vertical-content{outline:0;overflow:hidden}.nui-wizard-vertical-content-container{margin-left:36px;border:0;position:relative}[dir=rtl] .nui-wizard-vertical-content-container{margin-left:0;margin-right:36px}.nui-wizard-vertical-line:before{content:\"\";position:absolute;left:0;border-left-width:2px;border-left-style:solid}[dir=rtl] .nui-wizard-vertical-line:before{left:auto;right:0}.nui-step:last-child .nui-wizard-vertical-content-container{border:none}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.WizardStepHeaderComponent, selector: "nui-wizard-step-header", inputs: ["stepStateConfig", "label", "optionalLabel", "errorMessage", "index", "selected", "active", "step"] }, { kind: "component", type: i4.WizardFooterComponent, selector: "wizard-footer", inputs: ["footer"] }, { kind: "component", type: i5.WizardOverflowComponent, selector: "nui-wizard-overflow", inputs: ["template", "value", "completed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WizardHorizontalComponent, decorators: [{
type: Component,
args: [{ selector: "nui-wizard-horizontal", exportAs: "wizardHorizontal", host: {
class: "nui-wizard-horizontal-layout",
"[class.nui-wizard-step-header__label-position--end]": "labelPosition == 'end'",
"[class.nui-wizard-step-header__label-position--top]": "labelPosition == 'top'",
"aria-orientation": "horizontal",
role: "tablist",
}, providers: [
{ provide: WizardDirective, useExisting: WizardHorizontalComponent },
{ provide: CdkStepper, useExisting: WizardHorizontalComponent },
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"nui-wizard-horizontal-header-container\" #headerContainer>\n <!-- Left overflow container -->\n <ng-container *ngIf=\"isInResponsiveMode && overflownStepsStart.length\">\n <nui-wizard-overflow\n #overflowComponent\n class=\"overflow-left\"\n [template]=\"overflowStart\"\n [completed]=\"true\"\n [value]=\"overflownStepsStart.length\"\n >\n </nui-wizard-overflow>\n\n <ng-template #overflowStart>\n <div *ngIf=\"overflownStepsStart.length\" class=\"pb-3\">\n <strong>+{{ overflownStepsStart.length }} more steps</strong>\n </div>\n <div\n class=\"nui-wizard-horizontal-header-wrapper\"\n *ngFor=\"\n let step of overflownStepsStart;\n let i = index;\n let isFirst = first\n \"\n >\n <ng-template\n *ngTemplateOutlet=\"\n stepHeaderWithLines;\n context: {\n $implicit: steps,\n step: step,\n i: i,\n isFirst: isFirst\n }\n \"\n ></ng-template>\n </div>\n </ng-template>\n </ng-container>\n\n <!-- Visible items container -->\n <div\n class=\"nui-wizard-horizontal-header-wrapper\"\n *ngFor=\"\n let step of isInResponsiveMode ? visibleSteps : steps;\n let i = index;\n let isFirst = first\n \"\n >\n <ng-template\n *ngTemplateOutlet=\"\n stepHeaderWithLines;\n context: {\n $implicit: steps,\n step: step,\n i: overflownStepsStart.length + i,\n isFirst: isFirst\n }\n \"\n ></ng-template>\n </div>\n\n <!-- Right overflow container -->\n <ng-container *ngIf=\"isInResponsiveMode && overflownStepsEnd.length\">\n <nui-wizard-overflow\n #overflowComponent\n class=\"overflow-right\"\n [class.overflow-right-completed]=\"allStepsCompleted\"\n [template]=\"overflowEnd\"\n [completed]=\"allStepsCompleted\"\n [value]=\"overflownStepsEnd.length\"\n >\n </nui-wizard-overflow>\n\n <ng-template #overflowEnd>\n <div *ngIf=\"overflownStepsEnd.length\" class=\"pb-3\">\n <strong>+{{ overflownStepsEnd.length }} more steps</strong>\n </div>\n <div\n class=\"nui-wizard-horizontal-header-wrapper\"\n *ngFor=\"\n let step of overflownStepsEnd;\n let i = index;\n let isFirst = first\n \"\n >\n <ng-template\n *ngTemplateOutlet=\"\n stepHeaderWithLines;\n context: {\n $implicit: steps,\n step: step,\n i:\n overflownStepsStart.length +\n visibleSteps.length +\n i,\n isFirst: isFirst\n }\n \"\n ></ng-template>\n </div>\n </ng-template>\n </ng-container>\n</div>\n\n<div class=\"nui-wizard-horizontal-content-container\">\n <div\n *ngFor=\"let step of steps; let i = index\"\n class=\"nui-wizard-horizontal-content\"\n role=\"tabpanel\"\n [id]=\"stepContentIds[i]\"\n [attr.aria-labelledby]=\"labelIds[i]\"\n [attr.aria-expanded]=\"selectedIndex === i\"\n >\n <ng-container [ngTemplateOutlet]=\"step.content\"></ng-container>\n </div>\n</div>\n<div\n *ngIf=\"selected?.stepFooter\"\n class=\"nui-wizard-horizontal-footer-container\"\n>\n <wizard-footer [footer]=\"selected?.stepFooter\"></wizard-footer>\n</div>\n\n<ng-template\n #stepHeaderWithLines\n let-steps\n let-step=\"step\"\n let-i=\"i\"\n let-isFirst=\"isFirst\"\n>\n <div\n *ngIf=\"!isFirst\"\n class=\"nui-wizard-horizontal__step-connector-line\"\n [ngClass]=\"{\n 'nui-wizard-horizontal__step-connector-line--completed':\n (stepsArray[i - 1]?.completed && step.completed) ||\n selectedIndex === i\n }\"\n ></div>\n <nui-wizard-step-header\n #stepHeaders\n class=\"nui-wizard-horizontal-header\"\n (click)=\"step.select()\"\n (keydown)=\"_onKeydown($event)\"\n [tabIndex]=\"selectedIndex === i ? 0 : -1\"\n [id]=\"labelIds[i]\"\n [attr.aria-posinset]=\"i + 1\"\n [attr.aria-setsize]=\"steps.length\"\n [attr.aria-controls]=\"stepContentIds[i]\"\n [attr.aria-selected]=\"selectedIndex === i\"\n [attr.aria-label]=\"step.ariaLabel || null\"\n [attr.aria-labelledby]=\"\n !step.ariaLabel && step.ariaLabelledby ? step.ariaLabelledby : null\n \"\n [index]=\"i\"\n [stepStateConfig]=\"step.stepStateConfig\"\n [label]=\"step.stepLabel || step.label\"\n [selected]=\"selectedIndex === i\"\n [active]=\"step.completed || selectedIndex === i || !linear\"\n [step]=\"step\"\n [errorMessage]=\"step.errorMessage\"\n >\n </nui-wizard-step-header>\n</ng-template>\n", styles: [".nui-wizard-vertical,.nui-wizard-horizontal{display:block}.nui-dialog .nui-wizard-vertical,.nui-dialog .nui-wizard-horizontal{padding-top:0}.nui-dialog .nui-wizard-vertical .nui-wizard-horizontal-header-container,.nui-dialog .nui-wizard-horizontal .nui-wizard-horizontal-header-container{border-top:none}.nui-wizard-horizontal-header{display:flex;min-height:32px;max-height:72px;align-items:center}.nui-popover-container__content .nui-wizard-horizontal-header{flex-flow:row-reverse;justify-content:flex-end;padding:0;min-height:17px}[dir=rtl] .nui-wizard-horizontal-header .nui-wizard-step-header-icon{margin-right:0;margin-left:0}.nui-popover-container__content .nui-wizard-horizontal-header .nui-wizard-step-header-icon{margin-right:5px}.nui-wizard-step-header__label-position--top .nui-wizard-horizontal-header{flex-direction:column;height:auto}.nui-wizard-step-header__label-position--top .nui-wizard-horizontal-header .nui-wizard-step-header-icon{margin-right:0;margin-left:0}.nui-wizard-horizontal-header-container{display:flex;justify-content:center;text-align:center;padding:10px;border:1px solid;border-left:none;border-right:none;overflow:hidden;white-space:nowrap;align-items:center;background-color:var(--nui-color-bg-secondary,#fafafa);border-color:var(--nui-color-line-default,#d9d9d9);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.nui-wizard-horizontal-header-wrapper{position:relative}.nui-popover-container__content .nui-wizard-horizontal-header-wrapper:not(:last-child){margin-bottom:5px}.nui-popover-container__content .nui-wizard-horizontal-header-wrapper:hover{background-color:var(--nui-color-bg-secondary,#fafafa)}.nui-wizard-horizontal__step-connector-line{border-top-width:2px;border-top-style:solid;border-color:var(--nui-color-line-default,#d9d9d9)}.nui-wizard-horizontal__step-connector-line--completed{border-color:var(--nui-color-text-link,#0079aa)}.nui-wizard-step-header__label-position--top .nui-wizard-horizontal__step-connector-line{bottom:8px;right:80.5px;width:129px;position:absolute}.nui-popover-container__content .nui-wizard-horizontal__step-connector-line{position:absolute;top:-6px;left:7px;height:6px;border-left-width:1px;border-left-style:solid;border-top:none;border-bottom:none;border-right:none}.nui-wizard-horizontal-content{outline:0}.nui-wizard-horizontal-content[aria-expanded=false]{height:0;overflow:hidden}.nui-wizard-horizontal-content-container{overflow:hidden}.nui-wizard-vertical-content{outline:0;overflow:hidden}.nui-wizard-vertical-content-container{margin-left:36px;border:0;position:relative}[dir=rtl] .nui-wizard-vertical-content-container{margin-left:0;margin-right:36px}.nui-wizard-vertical-line:before{content:\"\";position:absolute;left:0;border-left-width:2px;border-left-style:solid}[dir=rtl] .nui-wizard-vertical-line:before{left:auto;right:0}.nui-step:last-child .nui-wizard-vertical-content-container{border:none}\n"] }]
}], ctorParameters: () => [{ type: i1.Directionality }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { selectedIndex: [{
type: Input
}], labelPosition: [{
type: Input
}], headerContainer: [{
type: ViewChild,
args: ["headerContainer"]
}], stepHeaders: [{
type: ViewChildren,
args: ["stepHeaders"]
}], overflowComponents: [{
type: ViewChildren,
args: ["overflowComponent"]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoid2l6YXJkLWhvcml6b250YWwuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL2xpYi93aXphcmQtdjIvd2l6YXJkLWhvcml6b250YWwvd2l6YXJkLWhvcml6b250YWwuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vc3JjL2xpYi93aXphcmQtdjIvd2l6YXJkLWhvcml6b250YWwvd2l6YXJkLWhvcml6b250YWwuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEseURBQXlEO0FBQ3pELEVBQUU7QUFDRiwrRUFBK0U7QUFDL0UsNEVBQTRFO0FBQzVFLDhFQUE4RTtBQUM5RSwrRUFBK0U7QUFDL0UsOEVBQThFO0FBQzlFLDREQUE0RDtBQUM1RCxFQUFFO0FBQ0YsNkVBQTZFO0FBQzdFLHVEQUF1RDtBQUN2RCxFQUFFO0FBQ0YsNkVBQTZFO0FBQzdFLDRFQUE0RTtBQUM1RSwrRUFBK0U7QUFDL0UsMEVBQTBFO0FBQzFFLGlGQUFpRjtBQUNqRiw2RUFBNkU7QUFDN0UsaUJBQWlCO0FBRWpCLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQztBQUVuRCxPQUFPLEVBQUUsVUFBVSxFQUF5QixNQUFNLHNCQUFzQixDQUFDO0FBQ3pFLE9BQU8sRUFFSCx1QkFBdUIsRUFDdkIsaUJBQWlCLEVBQ2pCLFNBQVMsRUFDVCxVQUFVLEVBQ1YsS0FBSyxFQUNMLE1BQU0sRUFHTixTQUFTLEVBQ1QsU0FBUyxFQUNULFlBQVksRUFDWixpQkFBaUIsR0FDcEIsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxJQUFJLE1BQU0sYUFBYSxDQUFDO0FBQy9CLE9BQU8sSUFBSSxNQUFNLGFBQWEsQ0FBQztBQUMvQixPQUFPLE9BQU8sTUFBTSxnQkFBZ0IsQ0FBQztBQUNyQyxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFLM0MsT0FBTyxFQUFFLGVBQWUsRUFB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ZXNDb250ZW50IjpbIi8vIMKpIDIwMjIgU29sYXJXaW5kcyBXb3JsZHdpZGUsIExMQy4gQWxsIHJpZ2h0cyByZXNlcnZlZC5cbi8vXG4vLyBQZXJtaXNzaW9uIGlzIGhlcmVieSBncmFudGVkLCBmcmVlIG9mIGNoYXJnZSwgdG8gYW55IHBlcnNvbiBvYnRhaW5pbmcgYSBjb3B5XG4vLyAgb2YgdGhpcyBzb2Z0d2FyZSBhbmQgYXNzb2NpYXRlZCBkb2N1bWVudGF0aW9uIGZpbGVzICh0aGUgXCJTb2Z0d2FyZVwiKSwgdG9cbi8vICBkZWFsIGluIHRoZSBTb2Z0d2FyZSB3aXRob3V0IHJlc3RyaWN0aW9uLCBpbmNsdWRpbmcgd2l0aG91dCBsaW1pdGF0aW9uIHRoZVxuLy8gIHJpZ2h0cyB0byB1c2UsIGNvcHksIG1vZGlmeSwgbWVyZ2UsIHB1Ymxpc2gsIGRpc3RyaWJ1dGUsIHN1YmxpY2Vuc2UsIGFuZC9vclxuLy8gIHNlbGwgY29waWVzIG9mIHRoZSBTb2Z0d2FyZSwgYW5kIHRvIHBlcm1pdCBwZXJzb25zIHRvIHdob20gdGhlIFNvZnR3YXJlIGlzXG4vLyAgZnVybmlzaGVkIHRvIGRvIHNvLCBzdWJqZWN0IHRvIHRoZSBmb2xsb3dpbmcgY29uZGl0aW9uczpcbi8vXG4vLyBUaGUgYWJvdmUgY29weXJpZ2h0IG5vdGljZSBhbmQgdGhpcyBwZXJtaXNzaW9uIG5vdGljZSBzaGFsbCBiZSBpbmNsdWRlZCBpblxuLy8gIGFsbCBjb3BpZXMgb3Igc3Vic3RhbnRpYWwgcG9ydGlvbnMgb2YgdGhlIFNvZnR3YXJlLlxuLy9cbi8vIFRIRSBTT0ZUV0FSRSBJUyBQUk9WSURFRCBcIkFTIElTXCIsIFdJVEhPVVQgV0FSUkFOVFkgT0YgQU5ZIEtJTkQsIEVYUFJFU1MgT1Jcbi8vICBJTVBMSUVELCBJTkNMVURJTkcgQlVUIE5PVCBMSU1JVEVEIFRPIFRIRSBXQVJSQU5USUVTIE9GIE1FUkNIQU5UQUJJTElUWSxcbi8vICBGSVRORVNTIEZPUiBBIFBBUlRJQ1VMQVIgUFVSUE9TRSBBTkQgTk9OSU5GUklOR0VNRU5ULiBJTiBOTyBFVkVOVCBTSEFMTCBUSEVcbi8vICBBVVRIT1JTIE9SIENPUFlSSUdIVCBIT0xERVJTIEJFIExJQUJMRSBGT1IgQU5ZIENMQUlNLCBEQU1BR0VTIE9SIE9USEVSXG4vLyAgTElBQklMSVRZLCBXSEVUSEVSIElOIEFOIEFDVElPTiBPRiBDT05UUkFDVCwgVE9SVCBPUiBPVEhFUldJU0UsIEFSSVNJTkcgRlJPTSxcbi8vICBPVVQgT0YgT1IgSU4gQ09OTkVDVElPTiBXSVRIIFRIRSBTT0ZUV0FSRSBPUiBUSEUgVVNFIE9SIE9USEVSIERFQUxJTkdTIElOXG4vLyAgVEhFIFNPRlRXQVJFLlxuXG5pbXBvcnQgeyBEaXJlY3Rpb25hbGl0eSB9IGZyb20gXCJAYW5ndWxhci9jZGsvYmlkaVwiO1xuaW1wb3J0IHsgQm9vbGVhbklucHV0IH0gZnJvbSBcIkBhbmd1bGFyL2Nkay9jb2VyY2lvblwiO1xuaW1wb3J0IHsgQ2RrU3RlcHBlciwgU3RlcHBlclNlbGVjdGlvbkV2ZW50IH0gZnJvbSBcIkBhbmd1bGFyL2Nkay9zdGVwcGVyXCI7XG5pbXBvcnQge1xuICAgIEFmdGVyVmlld0luaXQsXG4gICAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gICAgQ2hhbmdlRGV0ZWN0b3JSZWYsXG4gICAgQ29tcG9uZW50LFxuICAgIEVsZW1lbnRSZWYsXG4gICAgSW5wdXQsXG4gICAgTmdab25lLFxuICAgIE9uRGVzdHJveSxcbiAgICBPbkluaXQsXG4gICAgUXVlcnlMaXN0LFxuICAgIFZpZXdDaGlsZCxcbiAgICBWaWV3Q2hpbGRyZW4sXG4gICAgVmlld0VuY2Fwc3VsYXRpb24sXG59IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5pbXBvcnQgbGFzdCBmcm9tIFwibG9kYXNoL2xhc3RcIjtcbmltcG9ydCBwdWxsIGZyb20gXCJsb2Rhc2gvcHVsbFwiO1xuaW1wb3J0IHdpdGhvdXQgZnJvbSBcImxvZGFzaC93aXRob3V0XCI7XG5pbXBvcnQgeyB0YWtlVW50aWw