import * as i0 from '@angular/core';
import { EventEmitter, Component, Input, Output } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule, NgOptimizedImage, NgIf } from '@angular/common';
import * as i2 from 'ngx-owl-carousel-o';
import { CarouselModule } from 'ngx-owl-carousel-o';
import { PriceFormatPipe, EnglishArabicPriceByLanguagePipe } from '@testlocallibrary/shared-kernel/pipes';
import * as i3 from '@ngx-translate/core';
import { TranslateModule } from '@ngx-translate/core';

class SquareSliderComponent {
    constructor() {
        this.heading = '';
        this.PopularExtensionsBtnText = '';
        this.domains = [];
        this.selectedDomainAction = new EventEmitter();
        this.index = 0;
        this.language = localStorage.getItem('language') || 'en';
        this.customOptions = {
            loop: true,
            margin: 10,
            nav: true,
            dots: false,
            autoplay: false,
            touchDrag: true,
            mouseDrag: true,
            rtl: this.language == 'en' ? false : true,
            navText: [
                '<img src="assets/images/Icons/svg/arrow-left.svg" alt="Card image cap">',
                '<img' + ' src="assets/images/Icons/svg/arrow-right.svg" alt="Card image cap">',
            ],
            stagePadding: 50,
            responsive: {
                0: {
                    items: 1,
                },
                600: {
                    items: 3,
                },
                1000: {
                    items: 5,
                },
            },
        };
    }
    registerAction($event) {
        this.selectedDomainAction.emit($event);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SquareSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SquareSliderComponent, isStandalone: true, selector: "lib-square-slider", inputs: { heading: "heading", PopularExtensionsBtnText: "PopularExtensionsBtnText", domains: "domains" }, outputs: { selectedDomainAction: "selectedDomainAction" }, ngImport: i0, template: "<section class=\"Gallery mb-5\">\r\n  <h2 class=\"mb-5 text-center\">{{ heading }}</h2>\r\n  <div class=\"container\">\r\n    <div class=\"row\">\r\n      <div class=\"col-12 wrapper\">\r\n        <owl-carousel-o [options]=\"customOptions\">\r\n          <ng-container *ngFor=\"let domain of domains\">\r\n            <ng-template class=\"slide\" [id]=\"domain.img\" carouselSlide>\r\n              <div class=\"card shadow-sm rounded-4\">\r\n                <div class=\"fixImgSize\">\r\n                  <img\r\n                    class=\"img-fluid\"\r\n                    [src]=\"domain.img\"\r\n                    alt=\"\"\r\n                    ngSrcset=\"100w, 200w, 300w\"\r\n                    sizes=\"50vw\"\r\n                    placeholder\r\n                    priority\r\n                  />\r\n                </div>\r\n                <div\r\n                  class=\"card-body {{\r\n                    language === 'en' ? 'dir-ltr' : 'dir-rtl'\r\n                  }}\"\r\n                >\r\n                  <div class=\"discount\" *ngIf=\"domain?.currency == 'egp'\">\r\n                    <s *ngIf=\"domain?.discount\">\r\n                      {{ domain?.discountPeriod }}{{ +domain?.discount!| priceformat :domain.currency }}</s>\r\n                  </div>\r\n\r\n                  <p>\r\n                    <!--                    {{domain?.currency | uppercase}}-->\r\n                    <b class=\"yearly-price\"\r\n                    >{{ +domain?.price!| priceformat :domain.currency}}\r\n                    </b>\r\n                    <span class=\"period\">\r\n                      {{ domain?.period || \"\" | translate }}\r\n                    </span>\r\n                  </p>\r\n                </div>\r\n                <button\r\n                  (click)=\"registerAction(domain)\"\r\n                  type=\"button\"\r\n                  class=\"btn btn-sm btn-light-custom w-100\"\r\n                  [id]=\"'register-domain-' + domain.name + '-' + language\"\r\n                >\r\n                  {{ PopularExtensionsBtnText }}\r\n                </button>\r\n              </div>\r\n            </ng-template>\r\n          </ng-container>\r\n        </owl-carousel-o>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</section>\r\n", styles: [".dir-ltr{direction:ltr}.dir-rtl{direction:rtl}::ng-deep .owl-rtl .owl-nav .owl-prev{right:100%!important}::ng-deep .owl-rtl .owl-nav .owl-next{right:-100%!important}::ng-deep .owl-carousel{position:relative}::ng-deep .owl-carousel .owl-nav{width:100%;display:flex;justify-content:space-between;position:absolute;top:30%}::ng-deep .owl-carousel .owl-nav .owl-prev{position:relative;left:-50px;background:unset}::ng-deep .owl-carousel .owl-nav .owl-next{position:relative;right:-50px;background:unset}::ng-deep .owl-carousel .owl-nav [class*=owl-]:hover{background:#eee!important}::ng-deep .Gallery .yearly-price{color:#57c1db}::ng-deep .Gallery .yearly-price:after{content:\"/\";font-size:10px;margin:0 2px}::ng-deep .Gallery .yearly-price+span{font-size:12px;color:#888}::ng-deep .Gallery .discount{font-size:12px;color:#888;height:30px;text-decoration:line-through}::ng-deep .Gallery .card{border:1px solid #57c1db;overflow:hidden;height:240px;margin-top:10px}::ng-deep .Gallery .btn-light-custom{border-radius:0;padding:8px 28px}::ng-deep .Gallery .btn-light-custom:hover{background:#57c1db;color:#fff;border:1px solid #57c1db}::ng-deep .Gallery .fixImgSize{height:100px}@media only screen and (max-width: 768px){::ng-deep .owl-rtl .owl-nav .owl-prev{right:92%!important}::ng-deep .owl-rtl .owl-nav .owl-next{left:-92%!important}::ng-deep .owl-carousel .owl-nav{width:180px;display:flex;position:relative;bottom:-32px;margin:0 auto}::ng-deep .owl-carousel .owl-nav .owl-next{border-radius:10px;padding:10px 16px;border:2px solid #57c1db;right:0}::ng-deep .owl-carousel .owl-nav .owl-prev{border-radius:10px;padding:10px 16px;border:2px solid #57c1db;left:0}::ng-deep .yearly-price{font-size:20px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: CarouselModule }, { kind: "component", type: i2.CarouselComponent, selector: "owl-carousel-o", inputs: ["options"], outputs: ["translated", "dragging", "change", "changed", "initialized"] }, { kind: "directive", type: i2.CarouselSlideDirective, selector: "ng-template[carouselSlide]", inputs: ["id", "dataMerge", "width", "dotContent", "dataHash"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: PriceFormatPipe, name: "priceformat" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SquareSliderComponent, decorators: [{
            type: Component,
            args: [{ selector: 'lib-square-slider', imports: [
                        CommonModule,
                        NgOptimizedImage,
                        CarouselModule,
                        EnglishArabicPriceByLanguagePipe,
                        TranslateModule,
                        PriceFormatPipe,
                        NgIf
                    ], standalone: true, template: "<section class=\"Gallery mb-5\">\r\n  <h2 class=\"mb-5 text-center\">{{ heading }}</h2>\r\n  <div class=\"container\">\r\n    <div class=\"row\">\r\n      <div class=\"col-12 wrapper\">\r\n        <owl-carousel-o [options]=\"customOptions\">\r\n          <ng-container *ngFor=\"let domain of domains\">\r\n            <ng-template class=\"slide\" [id]=\"domain.img\" carouselSlide>\r\n              <div class=\"card shadow-sm rounded-4\">\r\n                <div class=\"fixImgSize\">\r\n                  <img\r\n                    class=\"img-fluid\"\r\n                    [src]=\"domain.img\"\r\n                    alt=\"\"\r\n                    ngSrcset=\"100w, 200w, 300w\"\r\n                    sizes=\"50vw\"\r\n                    placeholder\r\n                    priority\r\n                  />\r\n                </div>\r\n                <div\r\n                  class=\"card-body {{\r\n                    language === 'en' ? 'dir-ltr' : 'dir-rtl'\r\n                  }}\"\r\n                >\r\n                  <div class=\"discount\" *ngIf=\"domain?.currency == 'egp'\">\r\n                    <s *ngIf=\"domain?.discount\">\r\n                      {{ domain?.discountPeriod }}{{ +domain?.discount!| priceformat :domain.currency }}</s>\r\n                  </div>\r\n\r\n                  <p>\r\n                    <!--                    {{domain?.currency | uppercase}}-->\r\n                    <b class=\"yearly-price\"\r\n                    >{{ +domain?.price!| priceformat :domain.currency}}\r\n                    </b>\r\n                    <span class=\"period\">\r\n                      {{ domain?.period || \"\" | translate }}\r\n                    </span>\r\n                  </p>\r\n                </div>\r\n                <button\r\n                  (click)=\"registerAction(domain)\"\r\n                  type=\"button\"\r\n                  class=\"btn btn-sm btn-light-custom w-100\"\r\n                  [id]=\"'register-domain-' + domain.name + '-' + language\"\r\n                >\r\n                  {{ PopularExtensionsBtnText }}\r\n                </button>\r\n              </div>\r\n            </ng-template>\r\n          </ng-container>\r\n        </owl-carousel-o>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</section>\r\n", styles: [".dir-ltr{direction:ltr}.dir-rtl{direction:rtl}::ng-deep .owl-rtl .owl-nav .owl-prev{right:100%!important}::ng-deep .owl-rtl .owl-nav .owl-next{right:-100%!important}::ng-deep .owl-carousel{position:relative}::ng-deep .owl-carousel .owl-nav{width:100%;display:flex;justify-content:space-between;position:absolute;top:30%}::ng-deep .owl-carousel .owl-nav .owl-prev{position:relative;left:-50px;background:unset}::ng-deep .owl-carousel .owl-nav .owl-next{position:relative;right:-50px;background:unset}::ng-deep .owl-carousel .owl-nav [class*=owl-]:hover{background:#eee!important}::ng-deep .Gallery .yearly-price{color:#57c1db}::ng-deep .Gallery .yearly-price:after{content:\"/\";font-size:10px;margin:0 2px}::ng-deep .Gallery .yearly-price+span{font-size:12px;color:#888}::ng-deep .Gallery .discount{font-size:12px;color:#888;height:30px;text-decoration:line-through}::ng-deep .Gallery .card{border:1px solid #57c1db;overflow:hidden;height:240px;margin-top:10px}::ng-deep .Gallery .btn-light-custom{border-radius:0;padding:8px 28px}::ng-deep .Gallery .btn-light-custom:hover{background:#57c1db;color:#fff;border:1px solid #57c1db}::ng-deep .Gallery .fixImgSize{height:100px}@media only screen and (max-width: 768px){::ng-deep .owl-rtl .owl-nav .owl-prev{right:92%!important}::ng-deep .owl-rtl .owl-nav .owl-next{left:-92%!important}::ng-deep .owl-carousel .owl-nav{width:180px;display:flex;position:relative;bottom:-32px;margin:0 auto}::ng-deep .owl-carousel .owl-nav .owl-next{border-radius:10px;padding:10px 16px;border:2px solid #57c1db;right:0}::ng-deep .owl-carousel .owl-nav .owl-prev{border-radius:10px;padding:10px 16px;border:2px solid #57c1db;left:0}::ng-deep .yearly-price{font-size:20px}}\n"] }]
        }], propDecorators: { heading: [{
                type: Input
            }], PopularExtensionsBtnText: [{
                type: Input
            }], domains: [{
                type: Input,
                args: [{ required: true }]
            }], selectedDomainAction: [{
                type: Output
            }] } });

/**
 * Generated bundle index. Do not edit.
 */

export { SquareSliderComponent };
//# sourceMappingURL=testlocallibrary-shared-kernel-components-square-slider.mjs.map
