import { Component, EventEmitter, Inject, Input, Output } from '@angular/core';
import { Serializable } from '../../common/Serializable';
import { asyncScheduler, BehaviorSubject, fromEvent } from 'rxjs';
import { throttleTime } from 'rxjs/operators';
import { CSS_BREAKPOINTS } from '../../common/constants/css-breakpoints';
import { WINDOW } from '../../services/window.service';
import * as i0 from "@angular/core";
import * as i1 from "../../directives/evo-ui-class.directive";
import * as i2 from "@angular/common";
export var EvoBannerTypes;
(function (EvoBannerTypes) {
    EvoBannerTypes["large"] = "large";
    EvoBannerTypes["small"] = "small";
    EvoBannerTypes["fullWidth"] = "full-width";
})(EvoBannerTypes || (EvoBannerTypes = {}));
export var EvoBannerLocations;
(function (EvoBannerLocations) {
    EvoBannerLocations["main"] = "Main";
    EvoBannerLocations["category"] = "Category";
})(EvoBannerLocations || (EvoBannerLocations = {}));
export class EvoBanner extends Serializable {
    constructor(data) {
        super(data);
        this.bannerPositionNames = {
            [EvoBannerLocations.main]: ['main', 'top', 'bottom'],
            [EvoBannerLocations.category]: ['main'],
        };
    }
}
/**
 * @deprecated
 */
export class EvoBannerComponent {
    constructor(window, el) {
        this.window = window;
        this.el = el;
        this.type = EvoBannerTypes.small;
        this.bannerClick = new EventEmitter();
        this.bannerSize$ = new BehaviorSubject(['']);
        this.subscriptions = {};
        this.initResizeEvent();
    }
    ngOnInit() {
        this.onResize();
    }
    ngOnDestroy() {
        Object.keys(this.subscriptions).forEach((key) => {
            this.subscriptions[key].unsubscribe();
        });
    }
    onBannerClick() {
        this.bannerClick.emit(this.banner);
    }
    get bannerClass() {
        const result = [];
        if (this.type) {
            result.push(this.type);
        }
        if (this.bannerSize$.getValue()) {
            result.push(...this.bannerSize$.getValue());
        }
        return result;
    }
    initResizeEvent() {
        this.subscriptions['resize'] = fromEvent(this.window, 'resize')
            .pipe(throttleTime(300, asyncScheduler, { trailing: true }))
            .subscribe(() => {
            this.onResize();
        });
    }
    onResize() {
        if (!this.el.nativeElement) {
            return;
        }
        const rect = this.el.nativeElement.getBoundingClientRect();
        if (!rect) {
            return;
        }
        const width = rect.width + 30; // grid double gap
        if (width <= CSS_BREAKPOINTS.mobile) {
            this.bannerSize$.next(['size-mobile']);
        }
        else if (width < CSS_BREAKPOINTS.tablet) {
            this.bannerSize$.next(['size-tablet']);
        }
        else if (width < CSS_BREAKPOINTS.desktopS) {
            this.bannerSize$.next(['size-desktop', 'size-desktop-s']);
        }
        else {
            this.bannerSize$.next(['size-desktop']);
        }
    }
}
EvoBannerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: EvoBannerComponent, deps: [{ token: WINDOW }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
EvoBannerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: EvoBannerComponent, selector: "evo-banner", inputs: { banner: "banner", type: "type" }, outputs: { bannerClick: "bannerClick" }, ngImport: i0, template: "<a\n    class=\"evo-banner\"\n    target=\"_blank\"\n    [attr.href]=\"banner?.url\"\n    (click)=\"onBannerClick()\"\n    [evoUiClass]=\"bannerClass\"\n    [ngStyle]=\"{'background-color': banner?.background}\"\n>\n    <div class=\"evo-banner__content\">\n        <div class=\"evo-banner__title\">{{ banner?.title }}</div>\n        <button\n            class=\"btn\"\n            [ngStyle]=\"{'color': banner?.background}\"\n            *ngIf=\"banner?.button\"\n        >{{ banner?.button }}</button>\n    </div>\n    <img\n        class=\"evo-banner__img\"\n        [src]=\"banner?.image\"\n        [alt]=\"banner?.title\"\n    >\n</a>\n", styles: [".evo-banner{position:relative;display:block;height:430px;padding:12px 20px;overflow:hidden;color:#fff;text-decoration:none;border-radius:6px;cursor:pointer;transition:box-shadow .3s}.evo-banner:hover{box-shadow:0 4px 12px #0003}.evo-banner .evo-banner__content{position:relative;z-index:2}.evo-banner .evo-banner__content .btn{display:inline-block;min-width:156px;height:40px;padding:0 20px;color:#f05023;font-weight:600;font-size:14px;text-transform:uppercase;background-color:#fff;border-radius:24px;transition:color .3s,background .3s}.evo-banner .evo-banner__title{margin-bottom:20px;font-weight:700;font-size:30px;font-family:var(--evo-font-secondary);line-height:1.3}.evo-banner .evo-banner__description{margin-top:20px;margin-bottom:10px;font-size:14px;line-height:1.3}.evo-banner .evo-banner__img{position:absolute;right:0;bottom:0}.evo-banner_full-width{padding:20px}.evo-banner_full-width .evo-banner__title{line-height:38px}.evo-banner_full-width .evo-banner__img,.evo-banner_large .evo-banner__img{width:290px;height:290px}.evo-banner_small{height:210px;padding:20px}.evo-banner_small .evo-banner__content{max-width:70%}.evo-banner_small .evo-banner__title{margin-bottom:20px;font-size:20px}.evo-banner_small .evo-banner__img{width:210px;height:210px}.evo-banner_size-tablet.evo-banner .evo-banner__content{max-width:66%}.evo-banner_size-tablet.evo-banner .evo-banner__description{max-width:250px}.evo-banner_size-tablet.evo-banner_large{padding:40px}.evo-banner_size-tablet.evo-banner_large .evo-banner__title{margin-bottom:20px;font-size:36px;line-height:44px}.evo-banner_size-tablet.evo-banner_large .evo-banner__img{width:430px;height:430px}.evo-banner_size-desktop.evo-banner .evo-banner__content{max-width:66%}.evo-banner_size-desktop.evo-banner .evo-banner__description{max-width:250px}.evo-banner_size-desktop.evo-banner_full-width{height:240px;padding:30px}.evo-banner_size-desktop.evo-banner_full-width .evo-banner__title{font-size:36px;line-height:44px}.evo-banner_size-desktop.evo-banner_full-width .evo-banner__img{width:240px;height:240px}.evo-banner_size-desktop.evo-banner_large{padding:40px}.evo-banner_size-desktop.evo-banner_large .evo-banner__title{font-size:36px;line-height:44px}.evo-banner_size-desktop.evo-banner_large .evo-banner__img{width:430px;height:430px}.evo-banner_size-desktop-s.evo-banner_full-width .evo-banner__title{font-size:28px;line-height:38px}\n"], directives: [{ type: i1.EvoUiClassDirective, selector: "[evoUiClass]", inputs: ["class", "evoUiClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: EvoBannerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'evo-banner', template: "<a\n    class=\"evo-banner\"\n    target=\"_blank\"\n    [attr.href]=\"banner?.url\"\n    (click)=\"onBannerClick()\"\n    [evoUiClass]=\"bannerClass\"\n    [ngStyle]=\"{'background-color': banner?.background}\"\n>\n    <div class=\"evo-banner__content\">\n        <div class=\"evo-banner__title\">{{ banner?.title }}</div>\n        <button\n            class=\"btn\"\n            [ngStyle]=\"{'color': banner?.background}\"\n            *ngIf=\"banner?.button\"\n        >{{ banner?.button }}</button>\n    </div>\n    <img\n        class=\"evo-banner__img\"\n        [src]=\"banner?.image\"\n        [alt]=\"banner?.title\"\n    >\n</a>\n", styles: [".evo-banner{position:relative;display:block;height:430px;padding:12px 20px;overflow:hidden;color:#fff;text-decoration:none;border-radius:6px;cursor:pointer;transition:box-shadow .3s}.evo-banner:hover{box-shadow:0 4px 12px #0003}.evo-banner .evo-banner__content{position:relative;z-index:2}.evo-banner .evo-banner__content .btn{display:inline-block;min-width:156px;height:40px;padding:0 20px;color:#f05023;font-weight:600;font-size:14px;text-transform:uppercase;background-color:#fff;border-radius:24px;transition:color .3s,background .3s}.evo-banner .evo-banner__title{margin-bottom:20px;font-weight:700;font-size:30px;font-family:var(--evo-font-secondary);line-height:1.3}.evo-banner .evo-banner__description{margin-top:20px;margin-bottom:10px;font-size:14px;line-height:1.3}.evo-banner .evo-banner__img{position:absolute;right:0;bottom:0}.evo-banner_full-width{padding:20px}.evo-banner_full-width .evo-banner__title{line-height:38px}.evo-banner_full-width .evo-banner__img,.evo-banner_large .evo-banner__img{width:290px;height:290px}.evo-banner_small{height:210px;padding:20px}.evo-banner_small .evo-banner__content{max-width:70%}.evo-banner_small .evo-banner__title{margin-bottom:20px;font-size:20px}.evo-banner_small .evo-banner__img{width:210px;height:210px}.evo-banner_size-tablet.evo-banner .evo-banner__content{max-width:66%}.evo-banner_size-tablet.evo-banner .evo-banner__description{max-width:250px}.evo-banner_size-tablet.evo-banner_large{padding:40px}.evo-banner_size-tablet.evo-banner_large .evo-banner__title{margin-bottom:20px;font-size:36px;line-height:44px}.evo-banner_size-tablet.evo-banner_large .evo-banner__img{width:430px;height:430px}.evo-banner_size-desktop.evo-banner .evo-banner__content{max-width:66%}.evo-banner_size-desktop.evo-banner .evo-banner__description{max-width:250px}.evo-banner_size-desktop.evo-banner_full-width{height:240px;padding:30px}.evo-banner_size-desktop.evo-banner_full-width .evo-banner__title{font-size:36px;line-height:44px}.evo-banner_size-desktop.evo-banner_full-width .evo-banner__img{width:240px;height:240px}.evo-banner_size-desktop.evo-banner_large{padding:40px}.evo-banner_size-desktop.evo-banner_large .evo-banner__title{font-size:36px;line-height:44px}.evo-banner_size-desktop.evo-banner_large .evo-banner__img{width:430px;height:430px}.evo-banner_size-desktop-s.evo-banner_full-width .evo-banner__title{font-size:28px;line-height:38px}\n"] }]
        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                    type: Inject,
                    args: [WINDOW]
                }] }, { type: i0.ElementRef }]; }, propDecorators: { banner: [{
                type: Input
            }], type: [{
                type: Input
            }], bannerClick: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 