import { Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import { interval } from 'rxjs';
import * as i0 from "@angular/core";
import * as i1 from "../../../_bridge/angular-pconnect";
import * as i2 from "../../../_helpers/utils";
import * as i3 from "@angular/common";
export class StagesComponent {
    constructor(angularPConnect, utils) {
        this.angularPConnect = angularPConnect;
        this.utils = utils;
        // Used with AngularPConnect
        this.angularPConnectData = {};
        this.PCore$ = PCore;
    }
    ngOnInit() {
        // First thing in initialization is registering and subscribing to the AngularPConnect service
        this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
        // const imagePath = this.utils.getIconPath(this.utils.getSDKStaticContentUrl());
        this.checkSvgIcon$ = this.utils.getImageSrc('check', this.utils.getSDKStaticContentUrl());
        this.key = `${this.pConn$.getCaseInfo().getClassName()}!CASE!${this.pConn$.getCaseInfo().getName()}`.toUpperCase();
    }
    ngOnDestroy() {
        if (this.angularPConnectData.unsubscribeFn) {
            this.angularPConnectData.unsubscribeFn();
        }
    }
    // Callback passed when subscribing to store change
    onStateChange() {
        this.checkAndUpdate();
    }
    checkAndUpdate() {
        // Should always check the bridge to see if the component should
        // update itself (re-render)
        const bUpdateSelf = this.angularPConnect.shouldComponentUpdate(this);
        // ONLY call updateSelf when the component should update
        if (bUpdateSelf) {
            this.updateSelf();
        }
    }
    updateSelf() {
        this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
        const timer = interval(50).subscribe(() => {
            timer.unsubscribe();
            const arStages = this.angularPConnect.getComponentProp(this, 'stages');
            // this.stageResults$ = this.configProps$.stages;
            if (arStages != null) {
                this.arStageResults$ = arStages;
                this.lastStage$ = this.arStageResults$[this.arStageResults$.length - 1];
            }
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StagesComponent, deps: [{ token: i1.AngularPConnectService }, { token: i2.Utils }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: StagesComponent, isStandalone: true, selector: "app-stages", inputs: { pConn$: "pConn$" }, ngImport: i0, template: "<div class=\"psdk-stages-bar\">\n  <div class=\"psdk-stages-chevron\" *ngFor=\"let stage of arStageResults$\">\n    <div *ngIf=\"stage.visited_status == 'completed'\" class=\"psdk-stages-inner-past\">\n      <img class=\"psdk-stages-icon\" src=\"{{ checkSvgIcon$ }}\" />{{ PCore$.getLocaleUtils().getLocaleValue(stage.name, '', key) }}\n    </div>\n    <div *ngIf=\"stage.visited_status == 'active'\" class=\"psdk-stages-inner-present\">\n      {{ PCore$.getLocaleUtils().getLocaleValue(stage.name, '', key) }}\n    </div>\n    <div *ngIf=\"stage.visited_status == 'future'\" class=\"psdk-stages-inner-future\">\n      {{ PCore$.getLocaleUtils().getLocaleValue(stage.name, '', key) }}\n    </div>\n  </div>\n</div>\n\n<div class=\"psdk-stages-divider\"></div>\n", styles: [".psdk-stages{padding:.625rem 0rem}.psdk-stages-span span{padding:.3125rem;font-weight:700;font-size:1.5rem}.psdk-stages-div{display:inline-flex;padding:.3125rem;font-weight:700;font-size:1.3rem;color:var(--app-neutral-color)}.psdk-stages-past{color:var(--app-primary-color);padding-right:.3125rem}.psdk-stages-present{color:var(--app-secondary-color);padding-right:.3125rem}.psdk-stages-future{color:var(--app-neutral-color);padding-right:.3125rem}.psdk-stages-full{display:block}.psdk-stages-divider{border-bottom:.0625rem solid var(--app-neutral-light-color)}.psdk-stages-icon{width:1.4rem;display:inline-block;vertical-align:top}.psdk-stages-bar{margin:1rem 0rem;background-color:var(--app-form-color);border-radius:.5rem;border:.0625rem solid var(--app-neutral-light-color);overflow:hidden;height:2rem;display:flex}.psdk-stages-chevron{position:relative;padding:1rem;display:flex;justify-content:center;align-items:center;max-width:100%;min-width:0px;flex-grow:1;flex-shrink:1}.psdk-stages-chevron:not(:last-child):after{content:\"\";position:absolute;display:block;z-index:2;width:1.75rem;right:-.4375rem;background:inherit;border-style:solid;border-color:#cfcfcf;border-width:.0625rem .0625rem 0px 0px;border-radius:0px .3125rem 0px 0px;transform:rotate(45deg) skew(15deg,15deg);height:2rem}.psdk-stages-inner-past{color:var(--app-inverse-form-color);font-size:1rem}.psdk-stages-inner-present{color:var(--app-primary-color);font-weight:700;font-size:1rem}.psdk-stages-inner-future{color:var(--app-neutral-color);font-size:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StagesComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-stages', standalone: true, imports: [CommonModule], template: "<div class=\"psdk-stages-bar\">\n  <div class=\"psdk-stages-chevron\" *ngFor=\"let stage of arStageResults$\">\n    <div *ngIf=\"stage.visited_status == 'completed'\" class=\"psdk-stages-inner-past\">\n      <img class=\"psdk-stages-icon\" src=\"{{ checkSvgIcon$ }}\" />{{ PCore$.getLocaleUtils().getLocaleValue(stage.name, '', key) }}\n    </div>\n    <div *ngIf=\"stage.visited_status == 'active'\" class=\"psdk-stages-inner-present\">\n      {{ PCore$.getLocaleUtils().getLocaleValue(stage.name, '', key) }}\n    </div>\n    <div *ngIf=\"stage.visited_status == 'future'\" class=\"psdk-stages-inner-future\">\n      {{ PCore$.getLocaleUtils().getLocaleValue(stage.name, '', key) }}\n    </div>\n  </div>\n</div>\n\n<div class=\"psdk-stages-divider\"></div>\n", styles: [".psdk-stages{padding:.625rem 0rem}.psdk-stages-span span{padding:.3125rem;font-weight:700;font-size:1.5rem}.psdk-stages-div{display:inline-flex;padding:.3125rem;font-weight:700;font-size:1.3rem;color:var(--app-neutral-color)}.psdk-stages-past{color:var(--app-primary-color);padding-right:.3125rem}.psdk-stages-present{color:var(--app-secondary-color);padding-right:.3125rem}.psdk-stages-future{color:var(--app-neutral-color);padding-right:.3125rem}.psdk-stages-full{display:block}.psdk-stages-divider{border-bottom:.0625rem solid var(--app-neutral-light-color)}.psdk-stages-icon{width:1.4rem;display:inline-block;vertical-align:top}.psdk-stages-bar{margin:1rem 0rem;background-color:var(--app-form-color);border-radius:.5rem;border:.0625rem solid var(--app-neutral-light-color);overflow:hidden;height:2rem;display:flex}.psdk-stages-chevron{position:relative;padding:1rem;display:flex;justify-content:center;align-items:center;max-width:100%;min-width:0px;flex-grow:1;flex-shrink:1}.psdk-stages-chevron:not(:last-child):after{content:\"\";position:absolute;display:block;z-index:2;width:1.75rem;right:-.4375rem;background:inherit;border-style:solid;border-color:#cfcfcf;border-width:.0625rem .0625rem 0px 0px;border-radius:0px .3125rem 0px 0px;transform:rotate(45deg) skew(15deg,15deg);height:2rem}.psdk-stages-inner-past{color:var(--app-inverse-form-color);font-size:1rem}.psdk-stages-inner-present{color:var(--app-primary-color);font-weight:700;font-size:1rem}.psdk-stages-inner-future{color:var(--app-neutral-color);font-size:1rem}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.AngularPConnectService }, { type: i2.Utils }]; }, propDecorators: { pConn$: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 