import { Component, HostBinding, Input } from '@angular/core';
import { interval } from 'rxjs';
import { WsEvents } from '@sunbird-cb/utils-v2';
import * as i0 from "@angular/core";
import * as i1 from "@sunbird-cb/utils-v2";
import * as i2 from "@ngx-translate/core";
import * as i3 from "@angular/common";
import * as i4 from "@angular/router";
import * as i5 from "@angular/material/icon";
import * as i6 from "@angular/material/legacy-tooltip";
export class SlidersDynamicComponent {
    constructor(events, translate, langTranslations) {
        this.events = events;
        this.translate = translate;
        this.langTranslations = langTranslations;
        this.id = `banner_${Math.random()}`;
        this.currentIndex = 0;
        this.slideInterval = null;
        if (localStorage.getItem('websiteLanguage')) {
            this.translate.setDefaultLang('en');
            const lang = localStorage.getItem('websiteLanguage');
            this.translate.use(lang);
        }
    }
    ngOnInit() {
        console.log('widgetData', this.widgetData, this?.baseContentReadData);
        this.reInitiateSlideInterval();
    }
    reInitiateSlideInterval() {
        if (this.widgetData && this.widgetData.sliderData && this.widgetData.sliderData.length > 1) {
            try {
                if (this.slideInterval) {
                    this.slideInterval.unsubscribe();
                }
            }
            catch (e) {
            }
            finally {
                this.slideInterval = interval(8000).subscribe(() => {
                    if (this.currentIndex === this.widgetData.sliderData.length - 1) {
                        this.currentIndex = 0;
                    }
                    else {
                        this.currentIndex += 1;
                    }
                });
            }
        }
    }
    slideTo(index) {
        if (this.widgetData && this.widgetData.sliderData) {
            if (index >= 0 && index < this.widgetData.sliderData.length) {
                this.currentIndex = index;
            }
            else if (index === this.widgetData.sliderData.length) {
                this.currentIndex = 0;
            }
            else {
                this.currentIndex = this.widgetData.sliderData.length + index;
            }
            this.reInitiateSlideInterval();
        }
    }
    get isOpenInNewTab() {
        if (this.widgetData && this.widgetData.sliderData) {
            const currentData = this.widgetData.sliderData[this.currentIndex];
            if (currentData && currentData.redirectUrl && currentData.redirectUrl.includes('mailto') ||
                this.widgetData.sliderData[this.currentIndex]?.openInNewTab) {
                return true;
            }
        }
        return false;
    }
    openInNewTab() {
        if (this.widgetData && this.widgetData.sliderData) {
            const currentData = this.widgetData.sliderData[this.currentIndex];
            if (currentData && currentData.redirectUrl && currentData.redirectUrl.includes('mailto') ||
                this.widgetData.sliderData[this.currentIndex]?.openInNewTab) {
                window.open(currentData.redirectUrl);
            }
        }
    }
    raiseTelemetry(bannerUrl) {
        this.openInNewTab();
        const path = window.location.pathname.replace('/', '');
        const url = path + window.location.search;
        this.events.raiseInteractTelemetry({
            type: 'click',
            subType: 'banner',
        }, {
            pageUrl: url,
            bannerRedirectUrl: bannerUrl,
        }, {
            pageIdExt: 'banner',
            module: WsEvents.EnumTelemetrymodules.CONTENT,
        });
    }
    translateLabels(label, type) {
        return this.langTranslations.translateLabelWithoutspace(label, type, '');
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SlidersDynamicComponent, deps: [{ token: i1.EventService }, { token: i2.TranslateService }, { token: i1.MultilingualTranslationsService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SlidersDynamicComponent, selector: "ws-widget-sliders-dynamic", inputs: { widgetData: "widgetData", baseContentReadData: "baseContentReadData" }, host: { properties: { "id": "this.id" } }, ngImport: i0, template: "<div class=\"banner-container\" (swipeleft)=\"slideTo(currentIndex + 1)\" [ngClass]=\"widgetData?.cardClass\" (swiperight)=\"slideTo(currentIndex - 1)\" [ngStyle]=\"{'min-height': widgetData?.height}\" *ngIf=\"widgetData?.sliderData?.length > 0\">\n  <ng-container *ngIf=\"widgetData.type === 'image'\">\n    <a (click)=\"raiseTelemetry(widgetData.sliderData[currentIndex].redirectUrl)\"\n    [routerLink]=\" !isOpenInNewTab ? widgetData.sliderData[currentIndex].redirectUrl : './'\" class=\"banner-overlay\"\n    [ngClass]=\"{'cursor-auto': !widgetData.sliderData[currentIndex].redirectUrl}\">\n      <div class=\"banner WidgetInstanceId\" *ngFor=\"let slide of widgetData.sliderData; let i = index\" [hidden]=\"i !== currentIndex\">\n        <img i18n-alt alt=\"Page Banner\" [src]=\"slide.banners\" wsUtilsImageResponsive class=\"banner-image\" />\n      </div>\n    </a>\n  </ng-container>\n\n  <ng-container *ngIf=\"widgetData.type === 'data'\">\n    <div class=\"banner WidgetInstanceId flex margin-bottom-xs\" *ngFor=\"let slide of widgetData.sliderData; let i = index\" [hidden]=\"i !== currentIndex\">\n      <div class=\"banner-data flex margin-right-m \">\n        {{ widgetData.sliderData[currentIndex].title }}\n      </div>\n      <div class=\"flex data-analysis flex-middle\" [ngClass]=\"widgetData.sliderData[currentIndex].colorData\" *ngIf=\"widgetData.sliderData[currentIndex].data\">\n        <mat-icon class=\"icon-stats\">{{ widgetData.sliderData[currentIndex].icon }}</mat-icon>\n        <p class=\"margin-remove text-no-wrap\">{{ widgetData.sliderData[currentIndex].data }}</p>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"widgetData?.type === 'tips'\">\n    <ng-container *ngFor=\"let slide of widgetData?.sliderData; let i = index\">\n      <div class=\"tips banner WidgetInstanceId flex margin-bottom-xs\" [hidden]=\"i !== currentIndex\">\n        <div class=\"banner-data flex margin-right-m\">\n          {{i + 1}}. {{ slide }}\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n\n  <ng-container *ngIf=\"widgetData.type === 'karma-points'\">\n    <div class=\"flex flex-row items-center gap-2 mb-4\" *ngFor=\"let slide of widgetData.sliderData; let i = index\"\n      [hidden]=\"i !== currentIndex\">\n      <img [src]=\"slide?.displayButton === 'Quick Learner Badge'\n    ? '/assets/icons/badges/Medal.svg'\n    : '/assets/icons/home/karma-badge.svg'\" width=\"28px\" alt=\"karma-points image\" />\n      <div class=\"text-xs\">\n        <span *ngIf=\"slide?.textBeforeIcon\">\n          {{\n          slide?.displayButton === 'Quick Learner Badge'\n          ? slide?.textBeforeIcon\n          : translateLabels(slide?.textBeforeIcon, 'appKarmapointsPanel')\n          }}\n        </span>&nbsp;\n        <span *ngIf=\"slide?.points\" class=\"font-bold\">{{ slide?.points }} {{ translateLabels(slide?.textAfterPoints,\n        'appKarmapointsPanel') }}</span>&nbsp;\n        <span *ngIf=\"slide?.textAfterIcon\">{{ translateLabels(slide?.textAfterIcon, 'appKarmapointsPanel') }}</span>\n      </div>\n      <mat-icon class=\"cursor-pointer ws-mat-black60-text info-icon\" [matTooltip]=\"translateLabels(slide?.toolTipText, 'appKarmapointsPanel')\"\n        *ngIf=\"slide?.toolTipText && slide?.displayButton !== 'Quick Learner Badge'\">info_outline</mat-icon>\n    </div>\n  </ng-container>\n\n  <ng-container>\n    <div class=\"banner-meta\">\n      <ng-container *ngIf=\"widgetData.type === 'image'\">\n        <a [routerLink]=\" !isOpenInNewTab ? widgetData.sliderData[currentIndex].redirectUrl : './'\" class=\"banner-title text-truncate\"\n        *ngIf=\"widgetData.sliderData[currentIndex].title\" [title]=\"widgetData.sliderData[currentIndex].title\">\n          {{ widgetData.sliderData[currentIndex].title }}\n        </a>\n      </ng-container>\n\n      <div class=\"dots-container\" *ngIf=\"widgetData.sliderData?.length > 1\">\n        <span class=\"dot\" [ngClass]=\"{ active: j === currentIndex, 'dot-active': j === currentIndex, 'dot-grey': j !== currentIndex }\" *ngFor=\"let slide of widgetData.sliderData; let j = index\" (click)=\"slideTo(j)\"></span>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"widgetData.iconsDisplay\">\n    <a *ngIf=\"widgetData.sliderData?.length > 1\" role=\"button\" class=\"prev\" (click)=\"slideTo(currentIndex - 1)\">&#10094;</a>\n    <a *ngIf=\"widgetData.sliderData?.length > 1\" role=\"button\" class=\"next\" (click)=\"slideTo(currentIndex + 1)\">&#10095;</a>\n  </ng-container>\n\n</div>\n", styles: [".banner-container{min-height:243px;overflow:hidden;position:relative;margin:auto;border-radius:12px}.banner-overlay{z-index:1;top:0;left:0;width:100%;height:100%;background:linear-gradient(to left,#00000040,#0000 15% 85%,#00000040)}.banner{-webkit-animation-name:fade;-webkit-animation-duration:1.5s;animation-name:fade;animation-duration:1.5s;min-height:50px}.banner .banner-image{width:100%;min-height:243px;display:block;border-radius:12px}.tips{min-height:30px}.banner-meta{text-align:center;z-index:2;padding:4px 8px;position:absolute;bottom:0;left:50%;border-radius:12px;transform:translate(-50%);box-sizing:border-box}.banner-meta .banner-title{color:#f2f2f2;margin-bottom:4px;font-size:1.1rem}.banner-meta .dots-container{padding:4px;display:flex;align-items:center;justify-content:center}.banner-meta .dots-container .dot{cursor:pointer;height:4px;width:4px;margin:0 6px;background-color:#d3d3d3;box-shadow:1px 1px 4px #0009;border-radius:50%;display:inline-block;transition:background-color .5s ease!important}.banner-meta .dots-container .dot.active{background-color:#f0f0f0;height:5px;width:5px}@keyframes fade{0%{opacity:.25}to{opacity:1}}.prev,.next{cursor:pointer;position:absolute;top:50%;transform:translateY(-50%);padding:16px;color:#fff;font-weight:700;font-size:24px;z-index:2;border-radius:0 3px 3px 0}.next{right:0;border-radius:3px 0 0 3px}.banner-container-solo{overflow:hidden;margin:auto;border-radius:12px}.banner-image-solo{width:100%;display:block;border-radius:12px}.banner-data{opacity:1;color:#000000de;font-family:Lato-Regular;font-size:.75rem;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:16px}.color-green{color:#1d8923}.color-red{color:#c41112}.data-analysis{opacity:1;font-family:Lato-Regular;font-size:.75rem;font-weight:400;font-style:normal;letter-spacing:.21px;text-align:left;line-height:16px}.data-analysis mat-icon{width:18px;height:18px;font-size:1.2rem}.dot-grey{opacity:.2;background-color:#1b2133!important;width:4px!important;height:4px!important;box-shadow:unset!important}.dot-active{width:8px!important;height:4px!important;border-radius:2px!important;opacity:1;background-color:#f3962f!important;box-shadow:unset!important}.slider-container{background:#ef951e29!important;padding:16px}.text-no-wrap{text-wrap:nowrap;margin-top:4px!important}.icon-stats{margin-right:4px}.info-icon{width:16px;height:16px;font-size:16px}.cursor-auto{cursor:auto}.flex{display:flex}.flex-middle{align-items:center}.flex-row{flex-direction:row}.items-center{align-items:center}.gap-2{gap:.5rem}.mb-4{margin-bottom:1rem}.text-xs{font-size:.75rem}.font-bold{font-weight:700}.margin-bottom-xs{margin-bottom:4px}.margin-right-m{margin-right:16px}.margin-remove{margin:0}.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cursor-pointer{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.ImageResponsiveDirective, selector: "[wsUtilsImageResponsive]", inputs: ["src"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SlidersDynamicComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ws-widget-sliders-dynamic', template: "<div class=\"banner-container\" (swipeleft)=\"slideTo(currentIndex + 1)\" [ngClass]=\"widgetData?.cardClass\" (swiperight)=\"slideTo(currentIndex - 1)\" [ngStyle]=\"{'min-height': widgetData?.height}\" *ngIf=\"widgetData?.sliderData?.length > 0\">\n  <ng-container *ngIf=\"widgetData.type === 'image'\">\n    <a (click)=\"raiseTelemetry(widgetData.sliderData[currentIndex].redirectUrl)\"\n    [routerLink]=\" !isOpenInNewTab ? widgetData.sliderData[currentIndex].redirectUrl : './'\" class=\"banner-overlay\"\n    [ngClass]=\"{'cursor-auto': !widgetData.sliderData[currentIndex].redirectUrl}\">\n      <div class=\"banner WidgetInstanceId\" *ngFor=\"let slide of widgetData.sliderData; let i = index\" [hidden]=\"i !== currentIndex\">\n        <img i18n-alt alt=\"Page Banner\" [src]=\"slide.banners\" wsUtilsImageResponsive class=\"banner-image\" />\n      </div>\n    </a>\n  </ng-container>\n\n  <ng-container *ngIf=\"widgetData.type === 'data'\">\n    <div class=\"banner WidgetInstanceId flex margin-bottom-xs\" *ngFor=\"let slide of widgetData.sliderData; let i = index\" [hidden]=\"i !== currentIndex\">\n      <div class=\"banner-data flex margin-right-m \">\n        {{ widgetData.sliderData[currentIndex].title }}\n      </div>\n      <div class=\"flex data-analysis flex-middle\" [ngClass]=\"widgetData.sliderData[currentIndex].colorData\" *ngIf=\"widgetData.sliderData[currentIndex].data\">\n        <mat-icon class=\"icon-stats\">{{ widgetData.sliderData[currentIndex].icon }}</mat-icon>\n        <p class=\"margin-remove text-no-wrap\">{{ widgetData.sliderData[currentIndex].data }}</p>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"widgetData?.type === 'tips'\">\n    <ng-container *ngFor=\"let slide of widgetData?.sliderData; let i = index\">\n      <div class=\"tips banner WidgetInstanceId flex margin-bottom-xs\" [hidden]=\"i !== currentIndex\">\n        <div class=\"banner-data flex margin-right-m\">\n          {{i + 1}}. {{ slide }}\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n\n  <ng-container *ngIf=\"widgetData.type === 'karma-points'\">\n    <div class=\"flex flex-row items-center gap-2 mb-4\" *ngFor=\"let slide of widgetData.sliderData; let i = index\"\n      [hidden]=\"i !== currentIndex\">\n      <img [src]=\"slide?.displayButton === 'Quick Learner Badge'\n    ? '/assets/icons/badges/Medal.svg'\n    : '/assets/icons/home/karma-badge.svg'\" width=\"28px\" alt=\"karma-points image\" />\n      <div class=\"text-xs\">\n        <span *ngIf=\"slide?.textBeforeIcon\">\n          {{\n          slide?.displayButton === 'Quick Learner Badge'\n          ? slide?.textBeforeIcon\n          : translateLabels(slide?.textBeforeIcon, 'appKarmapointsPanel')\n          }}\n        </span>&nbsp;\n        <span *ngIf=\"slide?.points\" class=\"font-bold\">{{ slide?.points }} {{ translateLabels(slide?.textAfterPoints,\n        'appKarmapointsPanel') }}</span>&nbsp;\n        <span *ngIf=\"slide?.textAfterIcon\">{{ translateLabels(slide?.textAfterIcon, 'appKarmapointsPanel') }}</span>\n      </div>\n      <mat-icon class=\"cursor-pointer ws-mat-black60-text info-icon\" [matTooltip]=\"translateLabels(slide?.toolTipText, 'appKarmapointsPanel')\"\n        *ngIf=\"slide?.toolTipText && slide?.displayButton !== 'Quick Learner Badge'\">info_outline</mat-icon>\n    </div>\n  </ng-container>\n\n  <ng-container>\n    <div class=\"banner-meta\">\n      <ng-container *ngIf=\"widgetData.type === 'image'\">\n        <a [routerLink]=\" !isOpenInNewTab ? widgetData.sliderData[currentIndex].redirectUrl : './'\" class=\"banner-title text-truncate\"\n        *ngIf=\"widgetData.sliderData[currentIndex].title\" [title]=\"widgetData.sliderData[currentIndex].title\">\n          {{ widgetData.sliderData[currentIndex].title }}\n        </a>\n      </ng-container>\n\n      <div class=\"dots-container\" *ngIf=\"widgetData.sliderData?.length > 1\">\n        <span class=\"dot\" [ngClass]=\"{ active: j === currentIndex, 'dot-active': j === currentIndex, 'dot-grey': j !== currentIndex }\" *ngFor=\"let slide of widgetData.sliderData; let j = index\" (click)=\"slideTo(j)\"></span>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"widgetData.iconsDisplay\">\n    <a *ngIf=\"widgetData.sliderData?.length > 1\" role=\"button\" class=\"prev\" (click)=\"slideTo(currentIndex - 1)\">&#10094;</a>\n    <a *ngIf=\"widgetData.sliderData?.length > 1\" role=\"button\" class=\"next\" (click)=\"slideTo(currentIndex + 1)\">&#10095;</a>\n  </ng-container>\n\n</div>\n", styles: [".banner-container{min-height:243px;overflow:hidden;position:relative;margin:auto;border-radius:12px}.banner-overlay{z-index:1;top:0;left:0;width:100%;height:100%;background:linear-gradient(to left,#00000040,#0000 15% 85%,#00000040)}.banner{-webkit-animation-name:fade;-webkit-animation-duration:1.5s;animation-name:fade;animation-duration:1.5s;min-height:50px}.banner .banner-image{width:100%;min-height:243px;display:block;border-radius:12px}.tips{min-height:30px}.banner-meta{text-align:center;z-index:2;padding:4px 8px;position:absolute;bottom:0;left:50%;border-radius:12px;transform:translate(-50%);box-sizing:border-box}.banner-meta .banner-title{color:#f2f2f2;margin-bottom:4px;font-size:1.1rem}.banner-meta .dots-container{padding:4px;display:flex;align-items:center;justify-content:center}.banner-meta .dots-container .dot{cursor:pointer;height:4px;width:4px;margin:0 6px;background-color:#d3d3d3;box-shadow:1px 1px 4px #0009;border-radius:50%;display:inline-block;transition:background-color .5s ease!important}.banner-meta .dots-container .dot.active{background-color:#f0f0f0;height:5px;width:5px}@keyframes fade{0%{opacity:.25}to{opacity:1}}.prev,.next{cursor:pointer;position:absolute;top:50%;transform:translateY(-50%);padding:16px;color:#fff;font-weight:700;font-size:24px;z-index:2;border-radius:0 3px 3px 0}.next{right:0;border-radius:3px 0 0 3px}.banner-container-solo{overflow:hidden;margin:auto;border-radius:12px}.banner-image-solo{width:100%;display:block;border-radius:12px}.banner-data{opacity:1;color:#000000de;font-family:Lato-Regular;font-size:.75rem;font-weight:400;font-style:normal;letter-spacing:.25px;text-align:left;line-height:16px}.color-green{color:#1d8923}.color-red{color:#c41112}.data-analysis{opacity:1;font-family:Lato-Regular;font-size:.75rem;font-weight:400;font-style:normal;letter-spacing:.21px;text-align:left;line-height:16px}.data-analysis mat-icon{width:18px;height:18px;font-size:1.2rem}.dot-grey{opacity:.2;background-color:#1b2133!important;width:4px!important;height:4px!important;box-shadow:unset!important}.dot-active{width:8px!important;height:4px!important;border-radius:2px!important;opacity:1;background-color:#f3962f!important;box-shadow:unset!important}.slider-container{background:#ef951e29!important;padding:16px}.text-no-wrap{text-wrap:nowrap;margin-top:4px!important}.icon-stats{margin-right:4px}.info-icon{width:16px;height:16px;font-size:16px}.cursor-auto{cursor:auto}.flex{display:flex}.flex-middle{align-items:center}.flex-row{flex-direction:row}.items-center{align-items:center}.gap-2{gap:.5rem}.mb-4{margin-bottom:1rem}.text-xs{font-size:.75rem}.font-bold{font-weight:700}.margin-bottom-xs{margin-bottom:4px}.margin-right-m{margin-right:16px}.margin-remove{margin:0}.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cursor-pointer{cursor:pointer}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.EventService }, { type: i2.TranslateService }, { type: i1.MultilingualTranslationsService }]; }, propDecorators: { widgetData: [{
                type: Input
            }], baseContentReadData: [{
                type: Input
            }], id: [{
                type: HostBinding,
                args: ['id']
            }] } });
//# sourceMappingURL=data:application/json;base64, 