simpo-component-library 3.6.984 → 3.6.986

package/esm2022/lib/ecommerce/sections/brands-with-image-background-columns/brands-with-image-background-columns.component.mjs

@@ -0,0 +1,35 @@
+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 BrandsWithImageBackgroundColumnsComponent {
+    constructor(router) {
+        this.router = router;
+        this.hover = false;
+        this.hoveredIndex = null;
+    }
+    ngOnInit() {
+    }
+    redirectToListPage(brand) {
+        const brandName = brand?.brandName?.replaceAll(" ", "_");
+        this.router.navigate(['/list'], { queryParams: { brand: brandName, pageNo: 1 } });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BrandsWithImageBackgroundColumnsComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BrandsWithImageBackgroundColumnsComponent, isStandalone: true, selector: "simpo-brands-with-image-background-columns", inputs: { responseData: "responseData", styles: "styles", content: "content" }, ngImport: i0, template: "<div class=\"grid pb-3 mt-3\">\n\n    <ng-container *ngFor=\"let brand of responseData; let i = index\">\n        <div class=\"card card--1 border-0\" [simpoCorner]=\"styles?.corners\" (click)=\"redirectToListPage(brand)\"\n            (mouseenter)=\"hoveredIndex = i\" (mouseleave)=\"hoveredIndex = null\">\n\n            <img class=\"card__img\"\n                [src]=\"brand.imgUrl[0] ?brand.imgUrl[0] : 'https://d2z9497xp8xb12.cloudfront.net/prod-images/856980c17752829234967351_- No Photos.jpg'\"\n                [alt]=\"brand.brandName\" />\n            <div class=\"card__overlay\"></div>\n            <div class=\"card__content\">\n                <span class=\"card__label\"\n                    *ngIf=\"hoveredIndex !== i && content?.display?.showHeading\">{{brand.brandName}}</span>\n                <div class=\"card__detail w-100 d-flex justify-content-start flex-column\" *ngIf=\"hoveredIndex === i\">\n                    <div class=\"card__title w-100 d-flex justify-content-start\">{{brand.brandName.length > 23 ?\n                        brand.brandName.slice(0, 23) + '...' : brand.brandName }}</div>\n                    <div class=\"card__desc w-100 d-flex justify-content-start\">{{brand.description.length > 60 ?\n                        brand.description.slice(0, 60) + '...' : brand.description}}</div>\n                    <a href=\"#\" class=\"card__cta\">Shop Now <span class=\"arrow\">\u2192</span></a>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n\n</div>\n", 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: BrandsWithImageBackgroundColumnsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'simpo-brands-with-image-background-columns', standalone: true, imports: [
+                        CornerDirective,
+                        CommonModule
+                    ], template: "<div class=\"grid pb-3 mt-3\">\n\n    <ng-container *ngFor=\"let brand of responseData; let i = index\">\n        <div class=\"card card--1 border-0\" [simpoCorner]=\"styles?.corners\" (click)=\"redirectToListPage(brand)\"\n            (mouseenter)=\"hoveredIndex = i\" (mouseleave)=\"hoveredIndex = null\">\n\n            <img class=\"card__img\"\n                [src]=\"brand.imgUrl[0] ?brand.imgUrl[0] : 'https://d2z9497xp8xb12.cloudfront.net/prod-images/856980c17752829234967351_- No Photos.jpg'\"\n                [alt]=\"brand.brandName\" />\n            <div class=\"card__overlay\"></div>\n            <div class=\"card__content\">\n                <span class=\"card__label\"\n                    *ngIf=\"hoveredIndex !== i && content?.display?.showHeading\">{{brand.brandName}}</span>\n                <div class=\"card__detail w-100 d-flex justify-content-start flex-column\" *ngIf=\"hoveredIndex === i\">\n                    <div class=\"card__title w-100 d-flex justify-content-start\">{{brand.brandName.length > 23 ?\n                        brand.brandName.slice(0, 23) + '...' : brand.brandName }}</div>\n                    <div class=\"card__desc w-100 d-flex justify-content-start\">{{brand.description.length > 60 ?\n                        brand.description.slice(0, 60) + '...' : brand.description}}</div>\n                    <a href=\"#\" class=\"card__cta\">Shop Now <span class=\"arrow\">\u2192</span></a>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n\n</div>\n", 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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnJhbmRzLXdpdGgtaW1hZ2UtYmFja2dyb3VuZC1jb2x1bW5zLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3NpbXBvLXVpL3NyYy9saWIvZWNvbW1lcmNlL3NlY3Rpb25zL2JyYW5kcy13aXRoLWltYWdlLWJhY2tncm91bmQtY29sdW1ucy9icmFuZHMtd2l0aC1pbWFnZS1iYWNrZ3JvdW5kLWNvbHVtbnMuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvc2ltcG8tdWkvc3JjL2xpYi9lY29tbWVyY2Uvc2VjdGlvbnMvYnJhbmRzLXdpdGgtaW1hZ2UtYmFja2dyb3VuZC1jb2x1bW5zL2JyYW5kcy13aXRoLWltYWdlLWJhY2tncm91bmQtY29sdW1ucy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUVqRCxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFFL0MsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHFDQUFxQyxDQUFDOzs7O0FBYXRFLE1BQU0sT0FBTyx5Q0FBeUM7SUFJcEQsWUFDbUIsTUFBYztRQUFkLFdBQU0sR0FBTixNQUFNLENBQVE7UUFLakMsVUFBSyxHQUFZLEtBQUssQ0FBQztRQUN2QixpQkFBWSxHQUFrQixJQUFJLENBQUM7SUFKbkMsQ0FBQztJQUNELFFBQVE7SUFDUixDQUFDO0lBR0Qsa0JBQWtCLENBQUMsS0FBVTtRQUMzQixNQUFNLFNBQVMsR0FBRyxLQUFLLEVBQUUsU0FBUyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsR0FBRyxDQUFDLENBQUM7UUFDekQsSUFBSSxDQUFDLE1BQU0sQ0FBQyxRQUFRLENBQUMsQ0FBQyxPQUFPLENBQUMsRUFBRSxFQUFFLFdBQVcsRUFBRSxFQUFFLEtBQUssRUFBRSxTQUFTLEVBQUUsTUFBTSxFQUFFLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQztJQUNwRixDQUFDOytHQWZVLHlDQUF5QzttR0FBekMseUNBQXlDLHNMQ2pCdEQsdy9DQXlCQSx3bUZEZEksZUFBZSxrRkFDZixZQUFZOzs0RkFLSCx5Q0FBeUM7a0JBVnJELFNBQVM7K0JBQ0UsNENBQTRDLGNBQzFDLElBQUksV0FDUDt3QkFDUCxlQUFlO3dCQUNmLFlBQVk7cUJBQ2I7MkVBS1EsWUFBWTtzQkFBcEIsS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csT0FBTztzQkFBZixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQnJhbmQgfSBmcm9tICcuLi8uLi9zdHlsZXMvQnJhbmQubW9kYWwnO1xuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IEZlYXR1cmVkQnJhbmRDb250ZW50TW9kYWwsIEZlYXR1cmVkQnJhbmRTdHlsZXNNb2RlbCB9IGZyb20gJy4uL2ZlYXR1cmVkLWJyYW5kL2ZlYXR1cmVkLWJyYW5kLm1vZGFsJztcbmltcG9ydCB7IENvcm5lckRpcmVjdGl2ZSB9IGZyb20gJy4uLy4uLy4uL2RpcmVjdGl2ZS9jb3JuZXItZGlyZWN0aXZlJztcbmltcG9ydCB7IFJvdXRlciB9IGZyb20gJ0Bhbmd1bGFyL3JvdXRlcic7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3NpbXBvLWJyYW5kcy13aXRoLWltYWdlLWJhY2tncm91bmQtY29sdW1ucycsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtcbiAgICBDb3JuZXJEaXJlY3RpdmUsXG4gICAgQ29tbW9uTW9kdWxlXG4gIF0sXG4gIHRlbXBsYXRlVXJsOiAnLi9icmFuZHMtd2l0aC1pbWFnZS1iYWNrZ3JvdW5kLWNvbHVtbnMuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybDogJy4vYnJhbmRzLXdpdGgtaW1hZ2UtYmFja2dyb3VuZC1jb2x1bW5zLmNvbXBvbmVudC5jc3MnXG59KVxuZXhwb3J0IGNsYXNzIEJyYW5kc1dpdGhJbWFnZUJhY2tncm91bmRDb2x1bW5zQ29tcG9uZW50IHtcbiAgQElucHV0KCkgcmVzcG9uc2VEYXRhPzogQnJhbmRbXTtcbiAgQElucHV0KCkgc3R5bGVzPzogRmVhdHVyZWRCcmFuZFN0eWxlc01vZGVsO1xuICBASW5wdXQoKSBjb250ZW50PzogRmVhdHVyZWRCcmFuZENvbnRlbnRNb2RhbDtcbiAgY29uc3RydWN0b3IoXG4gICAgcHJpdmF0ZSByZWFkb25seSByb3V0ZXI6IFJvdXRlcixcbiAgKSB7XG4gIH1cbiAgbmdPbkluaXQoKSB7XG4gIH1cbiAgaG92ZXI6IGJvb2xlYW4gPSBmYWxzZTtcbiAgaG92ZXJlZEluZGV4OiBudW1iZXIgfCBudWxsID0gbnVsbDtcbiAgcmVkaXJlY3RUb0xpc3RQYWdlKGJyYW5kOiBhbnkpIHtcbiAgICBjb25zdCBicmFuZE5hbWUgPSBicmFuZD8uYnJhbmROYW1lPy5yZXBsYWNlQWxsKFwiIFwiLCBcIl9cIik7XG4gICAgdGhpcy5yb3V0ZXIubmF2aWdhdGUoWycvbGlzdCddLCB7IHF1ZXJ5UGFyYW1zOiB7IGJyYW5kOiBicmFuZE5hbWUsIHBhZ2VObzogMSB9IH0pO1xuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwiZ3JpZCBwYi0zIG10LTNcIj5cblxuICAgIDxuZy1jb250YWluZXIgKm5nRm9yPVwibGV0IGJyYW5kIG9mIHJlc3BvbnNlRGF0YTsgbGV0IGkgPSBpbmRleFwiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwiY2FyZCBjYXJkLS0xIGJvcmRlci0wXCIgW3NpbXBvQ29ybmVyXT1cInN0eWxlcz8uY29ybmVyc1wiIChjbGljayk9XCJyZWRpcmVjdFRvTGlzdFBhZ2UoYnJhbmQpXCJcbiAgICAgICAgICAgIChtb3VzZWVudGVyKT1cImhvdmVyZWRJbmRleCA9IGlcIiAobW91c2VsZWF2ZSk9XCJob3ZlcmVkSW5kZXggPSBudWxsXCI+XG5cbiAgICAgICAgICAgIDxpbWcgY2xhc3M9XCJjYXJkX19pbWdcIlxuICAgICAgICAgICAgICAgIFtzcmNdPVwiYnJhbmQuaW1nVXJsWzBdID9icmFuZC5pbWdVcmxbMF0gOiAnaHR0cHM6Ly9kMno5NDk3eHA4eGIxMi5jbG91ZGZyb250Lm5ldC9wcm9kLWltYWdlcy84NTY5ODBjMTc3NTI4MjkyMzQ5NjczNTFfLSBObyBQaG90b3MuanBnJ1wiXG4gICAgICAgICAgICAgICAgW2FsdF09XCJicmFuZC5icmFuZE5hbWVcIiAvPlxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cImNhcmRfX292ZXJsYXlcIj48L2Rpdj5cbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJjYXJkX19jb250ZW50XCI+XG4gICAgICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJjYXJkX19sYWJlbFwiXG4gICAgICAgICAgICAgICAgICAgICpuZ0lmPVwiaG92ZXJlZEluZGV4ICE9PSBpICYmIGNvbnRlbnQ/LmRpc3BsYXk/LnNob3dIZWFkaW5nXCI+e3ticmFuZC5icmFuZE5hbWV9fTwvc3Bhbj5cbiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwiY2FyZF9fZGV0YWlsIHctMTAwIGQtZmxleCBqdXN0aWZ5LWNvbnRlbnQtc3RhcnQgZmxleC1jb2x1bW5cIiAqbmdJZj1cImhvdmVyZWRJbmRleCA9PT0gaVwiPlxuICAgICAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwiY2FyZF9fdGl0bGUgdy0xMDAgZC1mbGV4IGp1c3RpZnktY29udGVudC1zdGFydFwiPnt7YnJhbmQuYnJhbmROYW1lLmxlbmd0aCA+IDIzID9cbiAgICAgICAgICAgICAgICAgICAgICAgIGJyYW5kLmJyYW5kTmFtZS5zbGljZSgwLCAyMykgKyAnLi4uJyA6IGJyYW5kLmJyYW5kTmFtZSB9fTwvZGl2PlxuICAgICAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwiY2FyZF9fZGVzYyB3LTEwMCBkLWZsZXgganVzdGlmeS1jb250ZW50LXN0YXJ0XCI+e3ticmFuZC5kZXNjcmlwdGlvbi5sZW5ndGggPiA2MCA/XG4gICAgICAgICAgICAgICAgICAgICAgICBicmFuZC5kZXNjcmlwdGlvbi5zbGljZSgwLCA2MCkgKyAnLi4uJyA6IGJyYW5kLmRlc2NyaXB0aW9ufX08L2Rpdj5cbiAgICAgICAgICAgICAgICAgICAgPGEgaHJlZj1cIiNcIiBjbGFzcz1cImNhcmRfX2N0YVwiPlNob3AgTm93IDxzcGFuIGNsYXNzPVwiYXJyb3dcIj7ihpI8L3NwYW4+PC9hPlxuICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvZGl2PlxuICAgIDwvbmctY29udGFpbmVyPlxuXG48L2Rpdj5cbiJdfQ==