import { Component, Input, Output, EventEmitter, forwardRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Utils } from '../../../_helpers/utils';
import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
import * as i0 from "@angular/core";
import * as i1 from "../../../_helpers/utils";
import * as i2 from "@angular/common";
export class MultiStepComponent {
    constructor(utils) {
        this.utils = utils;
        this.actionButtonClick = new EventEmitter();
        this.bShow$ = true;
    }
    ngOnInit() {
        // svg icons
        this.svgCurrent$ = this.utils.getImageSrc('circle-solid', this.utils.getSDKStaticContentUrl());
        this.svgNotCurrent$ = this.utils.getImageSrc('circle-solid', this.utils.getSDKStaticContentUrl());
    }
    onActionButtonClick(oData) {
        this.actionButtonClick.emit(oData);
    }
    _getVIconClass(status) {
        if (status == 'current') {
            return 'psdk-vertical-step-icon-selected';
        }
        return 'psdk-vertical-step-icon';
    }
    _getVLabelClass(status) {
        if (status == 'current') {
            return 'psdk-vertical-step-label-selected';
        }
        return 'psdk-vertical-step-label';
    }
    _getVBodyClass(index) {
        if (index < this.arNavigationSteps$.length - 1) {
            return 'psdk-vertical-step-body psdk-vertical-step-line';
        }
        return 'psdk-vertical-step-body';
    }
    _getHIconClass(status) {
        if (status == 'current') {
            return 'psdk-horizontal-step-icon-selected';
        }
        return 'psdk-horizontal-step-icon';
    }
    _getHLabelClass(status) {
        if (status == 'current') {
            return 'psdk-horizontal-step-label-selected';
        }
        return 'psdk-horizontal-step-label';
    }
    _showHLine(index) {
        return index < this.arNavigationSteps$.length - 1;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiStepComponent, deps: [{ token: i1.Utils }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MultiStepComponent, isStandalone: true, selector: "app-multi-step", inputs: { pConn$: "pConn$", formGroup$: "formGroup$", arMainButtons$: "arMainButtons$", arSecondaryButtons$: "arSecondaryButtons$", arChildren$: "arChildren$", bIsVertical$: "bIsVertical$", arCurrentStepIndicies$: "arCurrentStepIndicies$", arNavigationSteps$: "arNavigationSteps$" }, outputs: { actionButtonClick: "actionButtonClick" }, providers: [Utils], ngImport: i0, template: "<div *ngIf=\"bShow$\">\n  <div *ngIf=\"bIsVertical$\" class=\"psdk-vertical-stepper\">\n    <div *ngFor=\"let mainStep of arNavigationSteps$; let i = index\" class=\"psdk-vertical-step\">\n      <div class=\"psdk-vertical-step-header\">\n        <div class=\"{{ _getVIconClass(mainStep.visited_status) }}\">\n          <div class=\"psdk-vertical-step-icon-content\">\n            <span>{{ i + 1 }}</span>\n          </div>\n        </div>\n        <div class=\"{{ _getVLabelClass(mainStep.visited_status) }}\">\n          {{ mainStep.name }}\n        </div>\n      </div>\n      <div class=\"{{ _getVBodyClass(i) }}\">\n        <ng-container *ngIf=\"mainStep?.steps\">\n          <ul style=\"padding-inline-start: 0rem; margin-left: -7px\">\n            <li *ngFor=\"let subStep of mainStep.steps\" class=\"psdk-sub-step-list\">\n              <div style=\"display: inline-flex\">\n                <img *ngIf=\"subStep.visited_status == 'current'\" class=\"psdk-current-svg-icon\" src=\"{{ svgCurrent$ }}\" />\n                <img *ngIf=\"subStep.visited_status != 'current'\" class=\"psdk-not-current-svg-icon\" src=\"{{ svgNotCurrent$ }}\" />\n                <label *ngIf=\"subStep.visited_status == 'current'\" class=\"psdk-sub-step-current\">{{ subStep.name }}</label>\n                <label *ngIf=\"subStep.visited_status != 'current'\" class=\"psdk-sub-step-not-current\">{{ subStep.name }}</label>\n              </div>\n              <div *ngIf=\"subStep.visited_status == 'current'\">\n                <component-mapper\n                  name=\"AssignmentCard\"\n                  [props]=\"{ pConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$ }\"\n                  [parent]=\"this\"\n                  [outputEvents]=\"{ actionButtonClick: onActionButtonClick }\"\n                ></component-mapper>\n              </div>\n            </li>\n          </ul>\n        </ng-container>\n\n        <ng-container *ngIf=\"!mainStep?.steps && mainStep.visited_status == 'current'\">\n          <component-mapper\n            name=\"AssignmentCard\"\n            [props]=\"{ pConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$ }\"\n            [parent]=\"this\"\n            [outputEvents]=\"{ actionButtonClick: onActionButtonClick }\"\n          ></component-mapper>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"!bIsVertical$\" class=\"psdk-horizontal-stepper\">\n    <div class=\"psdk-horizontal-stepper-header-container\">\n      <ng-container *ngFor=\"let mainStep of arNavigationSteps$; let i = index\">\n        <div class=\"psdk-horizontal-step-header\">\n          <div class=\"{{ _getHIconClass(mainStep.visited_status) }}\">\n            <div class=\"psdk-horizontal-step-icon-content\">\n              <span>{{ i + 1 }}</span>\n            </div>\n          </div>\n          <div class=\"{{ _getHLabelClass(mainStep.visited_status) }}\">\n            <div class=\"psdk-horizontal-step-text-label\">\n              {{ mainStep.name }}\n            </div>\n          </div>\n        </div>\n        <div *ngIf=\"_showHLine(i)\" class=\"psdk-horizontal-step-line\"></div>\n      </ng-container>\n    </div>\n    <div *ngFor=\"let mainStep of arNavigationSteps$\" class=\"psdk-horizontal-stepper-body\">\n      <ng-container *ngIf=\"mainStep?.steps\">\n        <ul style=\"padding-inline-start: 0rem; margin-left: 35px\">\n          <li *ngFor=\"let subStep of mainStep.steps\" class=\"psdk-sub-step-list\">\n            <div style=\"display: inline-flex\">\n              <img *ngIf=\"subStep.visited_status == 'current'\" class=\"psdk-current-svg-icon\" src=\"{{ svgCurrent$ }}\" />\n              <img *ngIf=\"subStep.visited_status != 'current'\" class=\"psdk-not-current-svg-icon\" src=\"{{ svgNotCurrent$ }}\" />\n              <label *ngIf=\"subStep.visited_status == 'current'\" class=\"psdk-sub-step-current\">{{ subStep.name }}</label>\n              <label *ngIf=\"subStep.visited_status != 'current'\" class=\"psdk-sub-step-not-current\">{{ subStep.name }}</label>\n            </div>\n            <div *ngIf=\"subStep.visited_status == 'current'\">\n              <component-mapper\n                name=\"AssignmentCard\"\n                [props]=\"{ pConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$ }\"\n                [parent]=\"this\"\n                [outputEvents]=\"{ actionButtonClick: onActionButtonClick }\"\n              ></component-mapper>\n            </div>\n          </li>\n        </ul>\n      </ng-container>\n\n      <ng-container *ngIf=\"!mainStep?.steps && mainStep.visited_status == 'current'\">\n        <component-mapper\n          name=\"AssignmentCard\"\n          [props]=\"{ pConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$ }\"\n          [parent]=\"this\"\n          [outputEvents]=\"{ actionButtonClick: onActionButtonClick }\"\n        ></component-mapper>\n      </ng-container>\n    </div>\n  </div>\n</div>\n", styles: [".psdk-case-view-divider{border-bottom:.0625rem solid var(--app-neutral-light-color)}.psdk-icon{padding:0rem .125rem;min-width:unset}.psdk-icon-current{color:var(--app-primary-color)}.psdk-icon-not-current{color:var(--app-neutral-color)}.psdk-current-svg-icon{width:1rem;filter:var(--app-primary-color-filter)}.psdk-not-current-svg-icon{width:1rem;filter:var(--app-neutral-color-filter)}mat-vertical-stepper{background-color:transparent}mat-horizontal-stepper{background-color:transparent}.psdk-sub-step-current{padding-left:.625rem;font-weight:700;color:var(--app-label-selected-color)}.psdk-sub-step-not-current{padding-left:.625rem;color:var(--app-label-color)}.psdk-flow-container-top{background-color:var(--app-form-color);padding:0rem .625rem;border-radius:.3125rem}.psdk-flow-container{padding-left:2.1875rem}.psdk-sub-step-list{list-style:none;padding-bottom:.625rem}.psdk-vertical-stepper{background-color:transparent;display:block;text-align:left}.psdk-vertical-step{display:block}.psdk-vertical-step-header{overflow:hidden;outline:none;cursor:pointer;position:relative;box-sizing:content-box;display:flex;align-items:center;height:24px;padding:24px}.psdk-vertical-step-icon{margin-right:12px;background-color:var(--app-neutral-color);color:var(--app-form-color);border-radius:50%;height:24px;width:24px;flex-shrink:0;position:relative}.psdk-vertical-step-icon-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--app-form-color)}.psdk-vertical-step-icon-selected{margin-right:12px;background-color:var(--app-primary-color);color:var(--app-form-color);border-radius:50%;height:24px;width:24px;flex-shrink:0;position:relative}.psdk-vertical-step-label{color:var(--app-label-color);display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:50px;vertical-align:middle;font-size:14px;font-weight:500}.psdk-vertical-step-label-selected{color:var(--app-label-selected-color);display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:50px;vertical-align:middle;font-size:14px;font-weight:500}.psdk-vertical-step-body{margin-left:36px;border:0;position:relative;display:block;text-align:left}.psdk-vertical-step-line{display:block}.psdk-vertical-step-line:before{content:\"\";position:absolute;left:0;border-left-width:1px;border-left-style:solid;top:-16px;bottom:-16px;border-left-color:var(--app-multi-step-border-color)}.psdk-horizontal-stepper{background-color:transparent;display:block}.psdk-horizontal-stepper-header-container{white-space:nowrap;display:flex;flex-wrap:wrap;align-items:center;text-align:left}.psdk-horizontal-step-header{outline:none;cursor:pointer;position:relative;box-sizing:content-box;display:flex;height:72px;overflow:hidden;align-items:center;padding:0 24px}.psdk-horizontal-step-icon{background-color:var(--app-neutral-color);color:var(--app-form-color);border-radius:50%;height:24px;width:24px;flex-shrink:0;position:relative;display:block;margin-right:8px;flex:none}.psdk-horizontal-step-icon-content{display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.psdk-horizontal-step-icon-selected{background-color:var(--app-primary-color);color:var(--app-form-color);border-radius:50%;height:24px;width:24px;flex-shrink:0;position:relative;display:block;margin-right:8px;flex:none}.psdk-horizontal-step-label{color:var(--app-label-color);display:inline-block;min-width:50px;vertical-align:middle;font-size:14px;font-weight:500;white-space:initial}.psdk-horizontal-step-label-selected{color:var(--app-label-selected-color);display:inline-block;min-width:50px;vertical-align:middle;font-size:14px;font-weight:500;white-space:initial}.psdk-horizontal-step-line{border-top-color:var(--app-multi-step-border-color);border-top-width:1px;border-top-style:solid;flex:auto;height:0;margin:0 -16px;min-width:32px}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i2.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiStepComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-multi-step', providers: [Utils], standalone: true, imports: [CommonModule, forwardRef(() => ComponentMapperComponent)], template: "<div *ngIf=\"bShow$\">\n  <div *ngIf=\"bIsVertical$\" class=\"psdk-vertical-stepper\">\n    <div *ngFor=\"let mainStep of arNavigationSteps$; let i = index\" class=\"psdk-vertical-step\">\n      <div class=\"psdk-vertical-step-header\">\n        <div class=\"{{ _getVIconClass(mainStep.visited_status) }}\">\n          <div class=\"psdk-vertical-step-icon-content\">\n            <span>{{ i + 1 }}</span>\n          </div>\n        </div>\n        <div class=\"{{ _getVLabelClass(mainStep.visited_status) }}\">\n          {{ mainStep.name }}\n        </div>\n      </div>\n      <div class=\"{{ _getVBodyClass(i) }}\">\n        <ng-container *ngIf=\"mainStep?.steps\">\n          <ul style=\"padding-inline-start: 0rem; margin-left: -7px\">\n            <li *ngFor=\"let subStep of mainStep.steps\" class=\"psdk-sub-step-list\">\n              <div style=\"display: inline-flex\">\n                <img *ngIf=\"subStep.visited_status == 'current'\" class=\"psdk-current-svg-icon\" src=\"{{ svgCurrent$ }}\" />\n                <img *ngIf=\"subStep.visited_status != 'current'\" class=\"psdk-not-current-svg-icon\" src=\"{{ svgNotCurrent$ }}\" />\n                <label *ngIf=\"subStep.visited_status == 'current'\" class=\"psdk-sub-step-current\">{{ subStep.name }}</label>\n                <label *ngIf=\"subStep.visited_status != 'current'\" class=\"psdk-sub-step-not-current\">{{ subStep.name }}</label>\n              </div>\n              <div *ngIf=\"subStep.visited_status == 'current'\">\n                <component-mapper\n                  name=\"AssignmentCard\"\n                  [props]=\"{ pConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$ }\"\n                  [parent]=\"this\"\n                  [outputEvents]=\"{ actionButtonClick: onActionButtonClick }\"\n                ></component-mapper>\n              </div>\n            </li>\n          </ul>\n        </ng-container>\n\n        <ng-container *ngIf=\"!mainStep?.steps && mainStep.visited_status == 'current'\">\n          <component-mapper\n            name=\"AssignmentCard\"\n            [props]=\"{ pConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$ }\"\n            [parent]=\"this\"\n            [outputEvents]=\"{ actionButtonClick: onActionButtonClick }\"\n          ></component-mapper>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"!bIsVertical$\" class=\"psdk-horizontal-stepper\">\n    <div class=\"psdk-horizontal-stepper-header-container\">\n      <ng-container *ngFor=\"let mainStep of arNavigationSteps$; let i = index\">\n        <div class=\"psdk-horizontal-step-header\">\n          <div class=\"{{ _getHIconClass(mainStep.visited_status) }}\">\n            <div class=\"psdk-horizontal-step-icon-content\">\n              <span>{{ i + 1 }}</span>\n            </div>\n          </div>\n          <div class=\"{{ _getHLabelClass(mainStep.visited_status) }}\">\n            <div class=\"psdk-horizontal-step-text-label\">\n              {{ mainStep.name }}\n            </div>\n          </div>\n        </div>\n        <div *ngIf=\"_showHLine(i)\" class=\"psdk-horizontal-step-line\"></div>\n      </ng-container>\n    </div>\n    <div *ngFor=\"let mainStep of arNavigationSteps$\" class=\"psdk-horizontal-stepper-body\">\n      <ng-container *ngIf=\"mainStep?.steps\">\n        <ul style=\"padding-inline-start: 0rem; margin-left: 35px\">\n          <li *ngFor=\"let subStep of mainStep.steps\" class=\"psdk-sub-step-list\">\n            <div style=\"display: inline-flex\">\n              <img *ngIf=\"subStep.visited_status == 'current'\" class=\"psdk-current-svg-icon\" src=\"{{ svgCurrent$ }}\" />\n              <img *ngIf=\"subStep.visited_status != 'current'\" class=\"psdk-not-current-svg-icon\" src=\"{{ svgNotCurrent$ }}\" />\n              <label *ngIf=\"subStep.visited_status == 'current'\" class=\"psdk-sub-step-current\">{{ subStep.name }}</label>\n              <label *ngIf=\"subStep.visited_status != 'current'\" class=\"psdk-sub-step-not-current\">{{ subStep.name }}</label>\n            </div>\n            <div *ngIf=\"subStep.visited_status == 'current'\">\n              <component-mapper\n                name=\"AssignmentCard\"\n                [props]=\"{ pConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$ }\"\n                [parent]=\"this\"\n                [outputEvents]=\"{ actionButtonClick: onActionButtonClick }\"\n              ></component-mapper>\n            </div>\n          </li>\n        </ul>\n      </ng-container>\n\n      <ng-container *ngIf=\"!mainStep?.steps && mainStep.visited_status == 'current'\">\n        <component-mapper\n          name=\"AssignmentCard\"\n          [props]=\"{ pConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$ }\"\n          [parent]=\"this\"\n          [outputEvents]=\"{ actionButtonClick: onActionButtonClick }\"\n        ></component-mapper>\n      </ng-container>\n    </div>\n  </div>\n</div>\n", styles: [".psdk-case-view-divider{border-bottom:.0625rem solid var(--app-neutral-light-color)}.psdk-icon{padding:0rem .125rem;min-width:unset}.psdk-icon-current{color:var(--app-primary-color)}.psdk-icon-not-current{color:var(--app-neutral-color)}.psdk-current-svg-icon{width:1rem;filter:var(--app-primary-color-filter)}.psdk-not-current-svg-icon{width:1rem;filter:var(--app-neutral-color-filter)}mat-vertical-stepper{background-color:transparent}mat-horizontal-stepper{background-color:transparent}.psdk-sub-step-current{padding-left:.625rem;font-weight:700;color:var(--app-label-selected-color)}.psdk-sub-step-not-current{padding-left:.625rem;color:var(--app-label-color)}.psdk-flow-container-top{background-color:var(--app-form-color);padding:0rem .625rem;border-radius:.3125rem}.psdk-flow-container{padding-left:2.1875rem}.psdk-sub-step-list{list-style:none;padding-bottom:.625rem}.psdk-vertical-stepper{background-color:transparent;display:block;text-align:left}.psdk-vertical-step{display:block}.psdk-vertical-step-header{overflow:hidden;outline:none;cursor:pointer;position:relative;box-sizing:content-box;display:flex;align-items:center;height:24px;padding:24px}.psdk-vertical-step-icon{margin-right:12px;background-color:var(--app-neutral-color);color:var(--app-form-color);border-radius:50%;height:24px;width:24px;flex-shrink:0;position:relative}.psdk-vertical-step-icon-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--app-form-color)}.psdk-vertical-step-icon-selected{margin-right:12px;background-color:var(--app-primary-color);color:var(--app-form-color);border-radius:50%;height:24px;width:24px;flex-shrink:0;position:relative}.psdk-vertical-step-label{color:var(--app-label-color);display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:50px;vertical-align:middle;font-size:14px;font-weight:500}.psdk-vertical-step-label-selected{color:var(--app-label-selected-color);display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:50px;vertical-align:middle;font-size:14px;font-weight:500}.psdk-vertical-step-body{margin-left:36px;border:0;position:relative;display:block;text-align:left}.psdk-vertical-step-line{display:block}.psdk-vertical-step-line:before{content:\"\";position:absolute;left:0;border-left-width:1px;border-left-style:solid;top:-16px;bottom:-16px;border-left-color:var(--app-multi-step-border-color)}.psdk-horizontal-stepper{background-color:transparent;display:block}.psdk-horizontal-stepper-header-container{white-space:nowrap;display:flex;flex-wrap:wrap;align-items:center;text-align:left}.psdk-horizontal-step-header{outline:none;cursor:pointer;position:relative;box-sizing:content-box;display:flex;height:72px;overflow:hidden;align-items:center;padding:0 24px}.psdk-horizontal-step-icon{background-color:var(--app-neutral-color);color:var(--app-form-color);border-radius:50%;height:24px;width:24px;flex-shrink:0;position:relative;display:block;margin-right:8px;flex:none}.psdk-horizontal-step-icon-content{display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.psdk-horizontal-step-icon-selected{background-color:var(--app-primary-color);color:var(--app-form-color);border-radius:50%;height:24px;width:24px;flex-shrink:0;position:relative;display:block;margin-right:8px;flex:none}.psdk-horizontal-step-label{color:var(--app-label-color);display:inline-block;min-width:50px;vertical-align:middle;font-size:14px;font-weight:500;white-space:initial}.psdk-horizontal-step-label-selected{color:var(--app-label-selected-color);display:inline-block;min-width:50px;vertical-align:middle;font-size:14px;font-weight:500;white-space:initial}.psdk-horizontal-step-line{border-top-color:var(--app-multi-step-border-color);border-top-width:1px;border-top-style:solid;flex:auto;height:0;margin:0 -16px;min-width:32px}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.Utils }]; }, propDecorators: { pConn$: [{
                type: Input
            }], formGroup$: [{
                type: Input
            }], arMainButtons$: [{
                type: Input
            }], arSecondaryButtons$: [{
                type: Input
            }], arChildren$: [{
                type: Input
            }], bIsVertical$: [{
                type: Input
            }], arCurrentStepIndicies$: [{
                type: Input
            }], arNavigationSteps$: [{
                type: Input
            }], actionButtonClick: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 