import { Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CornerDirective } from '../../../directive/corner-directive';
import * as i0 from "@angular/core";
import * as i1 from "@angular/router";
import * as i2 from "@angular/common";
export class CategoriesWithImageBackgroundColumnsComponent {
    constructor(router) {
        this.router = router;
        this.hover = false;
        this.hoveredIndex = null;
    }
    ngOnInit() {
        // console.log(this.responseData);
    }
    redirectToListPage(category) {
        // category = category.categoryName?.replaceAll(" ", "_");
        this.router.navigate(['/list'], { queryParams: { category: category, pageNo: 1 } });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CategoriesWithImageBackgroundColumnsComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CategoriesWithImageBackgroundColumnsComponent, isStandalone: true, selector: "simpo-categories-with-image-background-columns", inputs: { responseData: "responseData", styles: "styles", content: "content" }, ngImport: i0, template: "<div class=\"grid pb-3 mt-3\">\r\n\r\n    <!-- Card 1: Winter Luxe -->\r\n    <ng-container *ngFor=\"let category of responseData; let i = index\">\r\n        <div class=\"card card--1 border-0\" [simpoCorner]=\"styles?.corners\" (click)=\"redirectToListPage(category)\"\r\n            (mouseenter)=\"hoveredIndex = i\" (mouseleave)=\"hoveredIndex = null\">\r\n\r\n            <img class=\"card__img\"\r\n                [src]=\"category.imgUrl[0] ?category.imgUrl[0] : 'https://d2z9497xp8xb12.cloudfront.net/prod-images/856980c17752829234967351_- No Photos.jpg'\"\r\n                [alt]=\"category.categoryName\" />\r\n            <div class=\"card__overlay\"></div>\r\n            <div class=\"card__content\">\r\n                <span class=\"card__label\"\r\n                    *ngIf=\"hoveredIndex !== i && content?.display?.showHeading\">{{category.categoryName}}</span>\r\n                <div class=\"card__detail w-100 d-flex justify-content-start flex-column\" *ngIf=\"hoveredIndex === i\">\r\n                    <div class=\"card__title w-100 d-flex justify-content-start\">{{category.categoryName.length > 23 ?\r\n                        category.categoryName.slice(0, 23) + '...' : category.categoryName }}</div>\r\n                    <div class=\"card__desc w-100 d-flex justify-content-start\">{{category.description.length > 60 ?\r\n                        category.description.slice(0, 60) + '...' : category.description}}</div>\r\n                    <a href=\"#\" class=\"card__cta\">Shop Now <span class=\"arrow\">\u2192</span></a>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <!-- <div class=\"card card--2\">\r\n        <img class=\"card__img\" src=\"https://images.unsplash.com/photo-1529139574466-a303027c1d8b?w=700&q=80\"\r\n            alt=\"Bold Statements\" />\r\n        <div class=\"card__overlay\"></div>\r\n        <div class=\"card__content\">\r\n            <span class=\"card__label\">Bold Statements</span>\r\n            <div class=\"card__detail\">\r\n                <div class=\"card__title\">Bold Statements</div>\r\n                <div class=\"card__desc\">Eye-catching pieces that demand attention</div>\r\n                <a href=\"#\" class=\"card__cta\">Shop Now <span class=\"arrow\">\u2192</span></a>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"card card--3\">\r\n        <img class=\"card__img\" src=\"https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?w=600&q=80\"\r\n            alt=\"Alpine Layers\" />\r\n        <div class=\"card__overlay\"></div>\r\n        <div class=\"card__content\">\r\n            <span class=\"card__label\">Alpine Layers</span>\r\n            <div class=\"card__detail\">\r\n                <div class=\"card__title\">Alpine Layers</div>\r\n                <div class=\"card__desc\">Cozy textures for mountain escapes</div>\r\n                <a href=\"#\" class=\"card__cta\">Shop Now <span class=\"arrow\">\u2192</span></a>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"card card--4\">\r\n        <img class=\"card__img\" src=\"https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?w=600&q=80\"\r\n            alt=\"Resort Looks\" />\r\n        <div class=\"card__overlay\"></div>\r\n        <div class=\"card__content\">\r\n            <span class=\"card__label\">Resort Looks</span>\r\n            <div class=\"card__detail\">\r\n                <div class=\"card__title\">Resort Looks</div>\r\n                <div class=\"card__desc\">Effortless style under the sun</div>\r\n                <a href=\"#\" class=\"card__cta\">Shop Now <span class=\"arrow\">\u2192</span></a>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"card card--5\">\r\n        <img class=\"card__img\" src=\"https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?w=600&q=80\"\r\n            alt=\"Everyday Cool\" />\r\n        <div class=\"card__overlay\"></div>\r\n        <div class=\"card__content\">\r\n            <span class=\"card__label\">Everyday Cool</span>\r\n            <div class=\"card__detail\">\r\n                <div class=\"card__title\">Everyday Cool</div>\r\n                <div class=\"card__desc\">Street-ready looks for daily life</div>\r\n                <a href=\"#\" class=\"card__cta\">Shop Now <span class=\"arrow\">\u2192</span></a>\r\n            </div>\r\n        </div>\r\n    </div> -->\r\n\r\n</div>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.grid{display:flex;gap:12px;align-items:stretch;width:100%;overflow-x:scroll}.card{position:relative;overflow:hidden;cursor:pointer;flex-shrink:0;width:180px;height:530px;transition:width .55s cubic-bezier(.4,0,.2,1),flex .55s cubic-bezier(.4,0,.2,1)}.card:hover{width:420px}.card__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .65s cubic-bezier(.4,0,.2,1)}.card:hover .card__img{transform:scale(1.05)}.card__overlay{position:absolute;inset:0;background:linear-gradient(to bottom,#0000 30%,#000000b8);transition:background .4s ease}.card:hover .card__overlay{background:linear-gradient(to bottom,#00000014,#000000c7)}.card__content{position:absolute;bottom:0;left:0;right:0;padding:28px 22px;display:flex;flex-direction:column;gap:8px}.card__label{font-size:17px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;white-space:nowrap;writing-mode:vertical-rl;transform:rotate(180deg);align-self:flex-start;transition:opacity .35s ease,transform .45s cubic-bezier(.4,0,.2,1)}.card:hover .card__label{opacity:0;transform:rotate(180deg) translateY(10px)}.card__detail{opacity:0;transform:translateY(18px);transition:opacity .4s ease .15s,transform .45s cubic-bezier(.4,0,.2,1) .15s;pointer-events:none}.card:hover .card__detail{opacity:1;transform:translateY(0);pointer-events:auto}.card__title{font-size:26px;font-weight:700;color:#fff;line-height:1.2;white-space:nowrap}.card__desc{font-size:13.5px;font-weight:300;color:#ffffffc7;line-height:1.5;margin-top:4px;white-space:nowrap}.card__cta{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:13px;font-weight:500;letter-spacing:.04em;color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:2px;width:fit-content;transition:gap .25s ease,border-color .25s ease}.card__cta:hover{gap:14px;border-color:#fff}.card__cta .arrow{font-size:16px;transition:transform .25s ease}.card__cta:hover .arrow{transform:translate(4px)}.card--1 .card__img{filter:brightness(.95)}.card--2{width:320px}.card--2:hover{width:480px}.card--3 .card__img{filter:brightness(1.02)}@media (max-width: 900px){.grid{gap:8px}.card{width:140px;height:440px}.card:hover{width:320px}.card--2{width:240px}.card--2:hover{width:360px}.card__title{font-size:20px}}@media (max-width: 600px){.grid{flex-wrap:nowrap;overflow-x:auto;gap:8px}.card{width:110px;height:360px;flex-shrink:0}.card:hover{width:240px}.card--2{width:180px}.card--2:hover{width:280px}}\n"], dependencies: [{ kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CategoriesWithImageBackgroundColumnsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'simpo-categories-with-image-background-columns', standalone: true, imports: [
                        CornerDirective,
                        CommonModule
                    ], template: "<div class=\"grid pb-3 mt-3\">\r\n\r\n    <!-- Card 1: Winter Luxe -->\r\n    <ng-container *ngFor=\"let category of responseData; let i = index\">\r\n        <div class=\"card card--1 border-0\" [simpoCorner]=\"styles?.corners\" (click)=\"redirectToListPage(category)\"\r\n            (mouseenter)=\"hoveredIndex = i\" (mouseleave)=\"hoveredIndex = null\">\r\n\r\n            <img class=\"card__img\"\r\n                [src]=\"category.imgUrl[0] ?category.imgUrl[0] : 'https://d2z9497xp8xb12.cloudfront.net/prod-images/856980c17752829234967351_- No Photos.jpg'\"\r\n                [alt]=\"category.categoryName\" />\r\n            <div class=\"card__overlay\"></div>\r\n            <div class=\"card__content\">\r\n                <span class=\"card__label\"\r\n                    *ngIf=\"hoveredIndex !== i && content?.display?.showHeading\">{{category.categoryName}}</span>\r\n                <div class=\"card__detail w-100 d-flex justify-content-start flex-column\" *ngIf=\"hoveredIndex === i\">\r\n                    <div class=\"card__title w-100 d-flex justify-content-start\">{{category.categoryName.length > 23 ?\r\n                        category.categoryName.slice(0, 23) + '...' : category.categoryName }}</div>\r\n                    <div class=\"card__desc w-100 d-flex justify-content-start\">{{category.description.length > 60 ?\r\n                        category.description.slice(0, 60) + '...' : category.description}}</div>\r\n                    <a href=\"#\" class=\"card__cta\">Shop Now <span class=\"arrow\">\u2192</span></a>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <!-- <div class=\"card card--2\">\r\n        <img class=\"card__img\" src=\"https://images.unsplash.com/photo-1529139574466-a303027c1d8b?w=700&q=80\"\r\n            alt=\"Bold Statements\" />\r\n        <div class=\"card__overlay\"></div>\r\n        <div class=\"card__content\">\r\n            <span class=\"card__label\">Bold Statements</span>\r\n            <div class=\"card__detail\">\r\n                <div class=\"card__title\">Bold Statements</div>\r\n                <div class=\"card__desc\">Eye-catching pieces that demand attention</div>\r\n                <a href=\"#\" class=\"card__cta\">Shop Now <span class=\"arrow\">\u2192</span></a>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"card card--3\">\r\n        <img class=\"card__img\" src=\"https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?w=600&q=80\"\r\n            alt=\"Alpine Layers\" />\r\n        <div class=\"card__overlay\"></div>\r\n        <div class=\"card__content\">\r\n            <span class=\"card__label\">Alpine Layers</span>\r\n            <div class=\"card__detail\">\r\n                <div class=\"card__title\">Alpine Layers</div>\r\n                <div class=\"card__desc\">Cozy textures for mountain escapes</div>\r\n                <a href=\"#\" class=\"card__cta\">Shop Now <span class=\"arrow\">\u2192</span></a>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"card card--4\">\r\n        <img class=\"card__img\" src=\"https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?w=600&q=80\"\r\n            alt=\"Resort Looks\" />\r\n        <div class=\"card__overlay\"></div>\r\n        <div class=\"card__content\">\r\n            <span class=\"card__label\">Resort Looks</span>\r\n            <div class=\"card__detail\">\r\n                <div class=\"card__title\">Resort Looks</div>\r\n                <div class=\"card__desc\">Effortless style under the sun</div>\r\n                <a href=\"#\" class=\"card__cta\">Shop Now <span class=\"arrow\">\u2192</span></a>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"card card--5\">\r\n        <img class=\"card__img\" src=\"https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?w=600&q=80\"\r\n            alt=\"Everyday Cool\" />\r\n        <div class=\"card__overlay\"></div>\r\n        <div class=\"card__content\">\r\n            <span class=\"card__label\">Everyday Cool</span>\r\n            <div class=\"card__detail\">\r\n                <div class=\"card__title\">Everyday Cool</div>\r\n                <div class=\"card__desc\">Street-ready looks for daily life</div>\r\n                <a href=\"#\" class=\"card__cta\">Shop Now <span class=\"arrow\">\u2192</span></a>\r\n            </div>\r\n        </div>\r\n    </div> -->\r\n\r\n</div>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.grid{display:flex;gap:12px;align-items:stretch;width:100%;overflow-x:scroll}.card{position:relative;overflow:hidden;cursor:pointer;flex-shrink:0;width:180px;height:530px;transition:width .55s cubic-bezier(.4,0,.2,1),flex .55s cubic-bezier(.4,0,.2,1)}.card:hover{width:420px}.card__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .65s cubic-bezier(.4,0,.2,1)}.card:hover .card__img{transform:scale(1.05)}.card__overlay{position:absolute;inset:0;background:linear-gradient(to bottom,#0000 30%,#000000b8);transition:background .4s ease}.card:hover .card__overlay{background:linear-gradient(to bottom,#00000014,#000000c7)}.card__content{position:absolute;bottom:0;left:0;right:0;padding:28px 22px;display:flex;flex-direction:column;gap:8px}.card__label{font-size:17px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;white-space:nowrap;writing-mode:vertical-rl;transform:rotate(180deg);align-self:flex-start;transition:opacity .35s ease,transform .45s cubic-bezier(.4,0,.2,1)}.card:hover .card__label{opacity:0;transform:rotate(180deg) translateY(10px)}.card__detail{opacity:0;transform:translateY(18px);transition:opacity .4s ease .15s,transform .45s cubic-bezier(.4,0,.2,1) .15s;pointer-events:none}.card:hover .card__detail{opacity:1;transform:translateY(0);pointer-events:auto}.card__title{font-size:26px;font-weight:700;color:#fff;line-height:1.2;white-space:nowrap}.card__desc{font-size:13.5px;font-weight:300;color:#ffffffc7;line-height:1.5;margin-top:4px;white-space:nowrap}.card__cta{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:13px;font-weight:500;letter-spacing:.04em;color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:2px;width:fit-content;transition:gap .25s ease,border-color .25s ease}.card__cta:hover{gap:14px;border-color:#fff}.card__cta .arrow{font-size:16px;transition:transform .25s ease}.card__cta:hover .arrow{transform:translate(4px)}.card--1 .card__img{filter:brightness(.95)}.card--2{width:320px}.card--2:hover{width:480px}.card--3 .card__img{filter:brightness(1.02)}@media (max-width: 900px){.grid{gap:8px}.card{width:140px;height:440px}.card:hover{width:320px}.card--2{width:240px}.card--2:hover{width:360px}.card__title{font-size:20px}}@media (max-width: 600px){.grid{flex-wrap:nowrap;overflow-x:auto;gap:8px}.card{width:110px;height:360px;flex-shrink:0}.card:hover{width:240px}.card--2{width:180px}.card--2:hover{width:280px}}\n"] }]
        }], ctorParameters: () => [{ type: i1.Router }], propDecorators: { responseData: [{
                type: Input
            }], styles: [{
                type: Input
            }], content: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 