simpo-component-library 3.6.723 → 3.6.724
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/ecommerce/sections/categories-with-image-background-columns/categories-with-image-background-columns.component.mjs +3 -3
- package/fesm2022/simpo-component-library.mjs +2 -2
- package/fesm2022/simpo-component-library.mjs.map +1 -1
- package/package.json +1 -1
- package/simpo-component-library-3.6.724.tgz +0 -0
- package/simpo-component-library-3.6.723.tgz +0 -0
|
@@ -14,8 +14,8 @@ export class CategoriesWithImageBackgroundColumnsComponent {
|
|
|
14
14
|
// console.log(this.responseData);
|
|
15
15
|
}
|
|
16
16
|
redirectToListPage(category) {
|
|
17
|
-
|
|
18
|
-
this.router.navigate(['/list'], { queryParams: { category: category
|
|
17
|
+
category = category.categoryName;
|
|
18
|
+
this.router.navigate(['/list'], { queryParams: { category: category } });
|
|
19
19
|
}
|
|
20
20
|
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 }); }
|
|
21
21
|
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"] }] }); }
|
|
@@ -33,4 +33,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
33
33
|
}], content: [{
|
|
34
34
|
type: Input
|
|
35
35
|
}] } });
|
|
36
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
36
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2F0ZWdvcmllcy13aXRoLWltYWdlLWJhY2tncm91bmQtY29sdW1ucy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9zaW1wby11aS9zcmMvbGliL2Vjb21tZXJjZS9zZWN0aW9ucy9jYXRlZ29yaWVzLXdpdGgtaW1hZ2UtYmFja2dyb3VuZC1jb2x1bW5zL2NhdGVnb3JpZXMtd2l0aC1pbWFnZS1iYWNrZ3JvdW5kLWNvbHVtbnMuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvc2ltcG8tdWkvc3JjL2xpYi9lY29tbWVyY2Uvc2VjdGlvbnMvY2F0ZWdvcmllcy13aXRoLWltYWdlLWJhY2tncm91bmQtY29sdW1ucy9jYXRlZ29yaWVzLXdpdGgtaW1hZ2UtYmFja2dyb3VuZC1jb2x1bW5zLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRWpELE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUUvQyxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0scUNBQXFDLENBQUM7Ozs7QUFhdEUsTUFBTSxPQUFPLDZDQUE2QztJQUl4RCxZQUNtQixNQUFjO1FBQWQsV0FBTSxHQUFOLE1BQU0sQ0FBUTtRQU1qQyxVQUFLLEdBQVksS0FBSyxDQUFDO1FBQ3ZCLGlCQUFZLEdBQWtCLElBQUksQ0FBQztJQUxuQyxDQUFDO0lBQ0QsUUFBUTtRQUNOLGtDQUFrQztJQUNwQyxDQUFDO0lBR0Qsa0JBQWtCLENBQUMsUUFBYTtRQUM5QixRQUFRLEdBQUcsUUFBUSxDQUFDLFlBQVksQ0FBQTtRQUNoQyxJQUFJLENBQUMsTUFBTSxDQUFDLFFBQVEsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxFQUFFLEVBQUUsV0FBVyxFQUFFLEVBQUUsUUFBUSxFQUFFLFFBQVEsRUFBRSxFQUFFLENBQUMsQ0FBQztJQUMzRSxDQUFDOytHQWhCVSw2Q0FBNkM7bUdBQTdDLDZDQUE2QywwTENqQjFELDIzSUFpRk0sd21GRHRFRixlQUFlLGtGQUNmLFlBQVk7OzRGQUtILDZDQUE2QztrQkFWekQsU0FBUzsrQkFDRSxnREFBZ0QsY0FDOUMsSUFBSSxXQUNQO3dCQUNQLGVBQWU7d0JBQ2YsWUFBWTtxQkFDYjsyRUFLUSxZQUFZO3NCQUFwQixLQUFLO2dCQUNHLE1BQU07c0JBQWQsS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IENhdGVnb3J5IH0gZnJvbSAnLi4vLi4vc3R5bGVzL2NhdGVnb3J5Lm1vZGFsJztcclxuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcclxuaW1wb3J0IHsgRmVhdHVyZWRDYXRlZ29yeUNvbnRlbnRNb2RhbCwgRmVhdHVyZWRDYXRlZ29yeVN0eWxlc01vZGVsIH0gZnJvbSAnLi4vZmVhdHVyZWQtY2F0ZWdvcnkvZmVhdHVyZWQtY2F0ZWdvcnkubW9kYWwnO1xyXG5pbXBvcnQgeyBDb3JuZXJEaXJlY3RpdmUgfSBmcm9tICcuLi8uLi8uLi9kaXJlY3RpdmUvY29ybmVyLWRpcmVjdGl2ZSc7XHJcbmltcG9ydCB7IFJvdXRlciB9IGZyb20gJ0Bhbmd1bGFyL3JvdXRlcic7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ3NpbXBvLWNhdGVnb3JpZXMtd2l0aC1pbWFnZS1iYWNrZ3JvdW5kLWNvbHVtbnMnLFxyXG4gIHN0YW5kYWxvbmU6IHRydWUsXHJcbiAgaW1wb3J0czogW1xyXG4gICAgQ29ybmVyRGlyZWN0aXZlLFxyXG4gICAgQ29tbW9uTW9kdWxlXHJcbiAgXSxcclxuICB0ZW1wbGF0ZVVybDogJy4vY2F0ZWdvcmllcy13aXRoLWltYWdlLWJhY2tncm91bmQtY29sdW1ucy5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmw6ICcuL2NhdGVnb3JpZXMtd2l0aC1pbWFnZS1iYWNrZ3JvdW5kLWNvbHVtbnMuY29tcG9uZW50LmNzcydcclxufSlcclxuZXhwb3J0IGNsYXNzIENhdGVnb3JpZXNXaXRoSW1hZ2VCYWNrZ3JvdW5kQ29sdW1uc0NvbXBvbmVudCB7XHJcbiAgQElucHV0KCkgcmVzcG9uc2VEYXRhPzogQ2F0ZWdvcnlbXTtcclxuICBASW5wdXQoKSBzdHlsZXM/OiBGZWF0dXJlZENhdGVnb3J5U3R5bGVzTW9kZWw7XHJcbiAgQElucHV0KCkgY29udGVudD86IEZlYXR1cmVkQ2F0ZWdvcnlDb250ZW50TW9kYWw7XHJcbiAgY29uc3RydWN0b3IoXHJcbiAgICBwcml2YXRlIHJlYWRvbmx5IHJvdXRlcjogUm91dGVyLFxyXG4gICkge1xyXG4gIH1cclxuICBuZ09uSW5pdCgpIHtcclxuICAgIC8vIGNvbnNvbGUubG9nKHRoaXMucmVzcG9uc2VEYXRhKTtcclxuICB9XHJcbiAgaG92ZXI6IGJvb2xlYW4gPSBmYWxzZTtcclxuICBob3ZlcmVkSW5kZXg6IG51bWJlciB8IG51bGwgPSBudWxsO1xyXG4gIHJlZGlyZWN0VG9MaXN0UGFnZShjYXRlZ29yeTogYW55KSB7XHJcbiAgICBjYXRlZ29yeSA9IGNhdGVnb3J5LmNhdGVnb3J5TmFtZVxyXG4gICAgdGhpcy5yb3V0ZXIubmF2aWdhdGUoWycvbGlzdCddLCB7IHF1ZXJ5UGFyYW1zOiB7IGNhdGVnb3J5OiBjYXRlZ29yeSB9IH0pO1xyXG4gIH1cclxufVxyXG4iLCI8ZGl2IGNsYXNzPVwiZ3JpZCBwYi0zIG10LTNcIj5cclxuXHJcbiAgICA8IS0tIENhcmQgMTogV2ludGVyIEx1eGUgLS0+XHJcbiAgICA8bmctY29udGFpbmVyICpuZ0Zvcj1cImxldCBjYXRlZ29yeSBvZiByZXNwb25zZURhdGE7IGxldCBpID0gaW5kZXhcIj5cclxuICAgICAgICA8ZGl2IGNsYXNzPVwiY2FyZCBjYXJkLS0xIGJvcmRlci0wXCIgW3NpbXBvQ29ybmVyXT1cInN0eWxlcz8uY29ybmVyc1wiIChjbGljayk9XCJyZWRpcmVjdFRvTGlzdFBhZ2UoY2F0ZWdvcnkpXCJcclxuICAgICAgICAgICAgKG1vdXNlZW50ZXIpPVwiaG92ZXJlZEluZGV4ID0gaVwiIChtb3VzZWxlYXZlKT1cImhvdmVyZWRJbmRleCA9IG51bGxcIj5cclxuXHJcbiAgICAgICAgICAgIDxpbWcgY2xhc3M9XCJjYXJkX19pbWdcIlxyXG4gICAgICAgICAgICAgICAgW3NyY109XCJjYXRlZ29yeS5pbWdVcmxbMF0gP2NhdGVnb3J5LmltZ1VybFswXSA6ICdodHRwczovL2Qyejk0OTd4cDh4YjEyLmNsb3VkZnJvbnQubmV0L3Byb2QtaW1hZ2VzLzg1Njk4MGMxNzc1MjgyOTIzNDk2NzM1MV8tIE5vIFBob3Rvcy5qcGcnXCJcclxuICAgICAgICAgICAgICAgIFthbHRdPVwiY2F0ZWdvcnkuY2F0ZWdvcnlOYW1lXCIgLz5cclxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cImNhcmRfX292ZXJsYXlcIj48L2Rpdj5cclxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cImNhcmRfX2NvbnRlbnRcIj5cclxuICAgICAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwiY2FyZF9fbGFiZWxcIlxyXG4gICAgICAgICAgICAgICAgICAgICpuZ0lmPVwiaG92ZXJlZEluZGV4ICE9PSBpICYmIGNvbnRlbnQ/LmRpc3BsYXk/LnNob3dIZWFkaW5nXCI+e3tjYXRlZ29yeS5jYXRlZ29yeU5hbWV9fTwvc3Bhbj5cclxuICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJjYXJkX19kZXRhaWwgdy0xMDAgZC1mbGV4IGp1c3RpZnktY29udGVudC1zdGFydCBmbGV4LWNvbHVtblwiICpuZ0lmPVwiaG92ZXJlZEluZGV4ID09PSBpXCI+XHJcbiAgICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cImNhcmRfX3RpdGxlIHctMTAwIGQtZmxleCBqdXN0aWZ5LWNvbnRlbnQtc3RhcnRcIj57e2NhdGVnb3J5LmNhdGVnb3J5TmFtZS5sZW5ndGggPiAyMyA/XHJcbiAgICAgICAgICAgICAgICAgICAgICAgIGNhdGVnb3J5LmNhdGVnb3J5TmFtZS5zbGljZSgwLCAyMykgKyAnLi4uJyA6IGNhdGVnb3J5LmNhdGVnb3J5TmFtZSB9fTwvZGl2PlxyXG4gICAgICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJjYXJkX19kZXNjIHctMTAwIGQtZmxleCBqdXN0aWZ5LWNvbnRlbnQtc3RhcnRcIj57e2NhdGVnb3J5LmRlc2NyaXB0aW9uLmxlbmd0aCA+IDYwID9cclxuICAgICAgICAgICAgICAgICAgICAgICAgY2F0ZWdvcnkuZGVzY3JpcHRpb24uc2xpY2UoMCwgNjApICsgJy4uLicgOiBjYXRlZ29yeS5kZXNjcmlwdGlvbn19PC9kaXY+XHJcbiAgICAgICAgICAgICAgICAgICAgPGEgaHJlZj1cIiNcIiBjbGFzcz1cImNhcmRfX2N0YVwiPlNob3AgTm93IDxzcGFuIGNsYXNzPVwiYXJyb3dcIj7ihpI8L3NwYW4+PC9hPlxyXG4gICAgICAgICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgICAgIDwvZGl2PlxyXG4gICAgICAgIDwvZGl2PlxyXG4gICAgPC9uZy1jb250YWluZXI+XHJcblxyXG4gICAgPCEtLSA8ZGl2IGNsYXNzPVwiY2FyZCBjYXJkLS0yXCI+XHJcbiAgICAgICAgPGltZyBjbGFzcz1cImNhcmRfX2ltZ1wiIHNyYz1cImh0dHBzOi8vaW1hZ2VzLnVuc3BsYXNoLmNvbS9waG90by0xNTI5MTM5NTc0NDY2LWEzMDMwMjdjMWQ4Yj93PTcwMCZxPTgwXCJcclxuICAgICAgICAgICAgYWx0PVwiQm9sZCBTdGF0ZW1lbnRzXCIgLz5cclxuICAgICAgICA8ZGl2IGNsYXNzPVwiY2FyZF9fb3ZlcmxheVwiPjwvZGl2PlxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJjYXJkX19jb250ZW50XCI+XHJcbiAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwiY2FyZF9fbGFiZWxcIj5Cb2xkIFN0YXRlbWVudHM8L3NwYW4+XHJcbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJjYXJkX19kZXRhaWxcIj5cclxuICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJjYXJkX190aXRsZVwiPkJvbGQgU3RhdGVtZW50czwvZGl2PlxyXG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cImNhcmRfX2Rlc2NcIj5FeWUtY2F0Y2hpbmcgcGllY2VzIHRoYXQgZGVtYW5kIGF0dGVudGlvbjwvZGl2PlxyXG4gICAgICAgICAgICAgICAgPGEgaHJlZj1cIiNcIiBjbGFzcz1cImNhcmRfX2N0YVwiPlNob3AgTm93IDxzcGFuIGNsYXNzPVwiYXJyb3dcIj7ihpI8L3NwYW4+PC9hPlxyXG4gICAgICAgICAgICA8L2Rpdj5cclxuICAgICAgICA8L2Rpdj5cclxuICAgIDwvZGl2PlxyXG5cclxuICAgIDxkaXYgY2xhc3M9XCJjYXJkIGNhcmQtLTNcIj5cclxuICAgICAgICA8aW1nIGNsYXNzPVwiY2FyZF9faW1nXCIgc3JjPVwiaHR0cHM6Ly9pbWFnZXMudW5zcGxhc2guY29tL3Bob3RvLTE1MDgyMTQ3NTExOTYtYmNmZDRjYTYwZjkxP3c9NjAwJnE9ODBcIlxyXG4gICAgICAgICAgICBhbHQ9XCJBbHBpbmUgTGF5ZXJzXCIgLz5cclxuICAgICAgICA8ZGl2IGNsYXNzPVwiY2FyZF9fb3ZlcmxheVwiPjwvZGl2PlxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJjYXJkX19jb250ZW50XCI+XHJcbiAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwiY2FyZF9fbGFiZWxcIj5BbHBpbmUgTGF5ZXJzPC9zcGFuPlxyXG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwiY2FyZF9fZGV0YWlsXCI+XHJcbiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwiY2FyZF9fdGl0bGVcIj5BbHBpbmUgTGF5ZXJzPC9kaXY+XHJcbiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwiY2FyZF9fZGVzY1wiPkNvenkgdGV4dHVyZXMgZm9yIG1vdW50YWluIGVzY2FwZXM8L2Rpdj5cclxuICAgICAgICAgICAgICAgIDxhIGhyZWY9XCIjXCIgY2xhc3M9XCJjYXJkX19jdGFcIj5TaG9wIE5vdyA8c3BhbiBjbGFzcz1cImFycm93XCI+4oaSPC9zcGFuPjwvYT5cclxuICAgICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgPC9kaXY+XHJcbiAgICA8L2Rpdj5cclxuXHJcbiAgICA8ZGl2IGNsYXNzPVwiY2FyZCBjYXJkLS00XCI+XHJcbiAgICAgICAgPGltZyBjbGFzcz1cImNhcmRfX2ltZ1wiIHNyYz1cImh0dHBzOi8vaW1hZ2VzLnVuc3BsYXNoLmNvbS9waG90by0xNTE1ODg2NjU3NjEzLTlmMzUxNWIwYzc4Zj93PTYwMCZxPTgwXCJcclxuICAgICAgICAgICAgYWx0PVwiUmVzb3J0IExvb2tzXCIgLz5cclxuICAgICAgICA8ZGl2IGNsYXNzPVwiY2FyZF9fb3ZlcmxheVwiPjwvZGl2PlxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJjYXJkX19jb250ZW50XCI+XHJcbiAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwiY2FyZF9fbGFiZWxcIj5SZXNvcnQgTG9va3M8L3NwYW4+XHJcbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJjYXJkX19kZXRhaWxcIj5cclxuICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJjYXJkX190aXRsZVwiPlJlc29ydCBMb29rczwvZGl2PlxyXG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cImNhcmRfX2Rlc2NcIj5FZmZvcnRsZXNzIHN0eWxlIHVuZGVyIHRoZSBzdW48L2Rpdj5cclxuICAgICAgICAgICAgICAgIDxhIGhyZWY9XCIjXCIgY2xhc3M9XCJjYXJkX19jdGFcIj5TaG9wIE5vdyA8c3BhbiBjbGFzcz1cImFycm93XCI+4oaSPC9zcGFuPjwvYT5cclxuICAgICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgPC9kaXY+XHJcbiAgICA8L2Rpdj5cclxuXHJcbiAgICA8ZGl2IGNsYXNzPVwiY2FyZCBjYXJkLS01XCI+XHJcbiAgICAgICAgPGltZyBjbGFzcz1cImNhcmRfX2ltZ1wiIHNyYz1cImh0dHBzOi8vaW1hZ2VzLnVuc3BsYXNoLmNvbS9waG90by0xNTE5MDg1MzYwNzUzLWFmMDExOWY3Y2JlNz93PTYwMCZxPTgwXCJcclxuICAgICAgICAgICAgYWx0PVwiRXZlcnlkYXkgQ29vbFwiIC8+XHJcbiAgICAgICAgPGRpdiBjbGFzcz1cImNhcmRfX292ZXJsYXlcIj48L2Rpdj5cclxuICAgICAgICA8ZGl2IGNsYXNzPVwiY2FyZF9fY29udGVudFwiPlxyXG4gICAgICAgICAgICA8c3BhbiBjbGFzcz1cImNhcmRfX2xhYmVsXCI+RXZlcnlkYXkgQ29vbDwvc3Bhbj5cclxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cImNhcmRfX2RldGFpbFwiPlxyXG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cImNhcmRfX3RpdGxlXCI+RXZlcnlkYXkgQ29vbDwvZGl2PlxyXG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cImNhcmRfX2Rlc2NcIj5TdHJlZXQtcmVhZHkgbG9va3MgZm9yIGRhaWx5IGxpZmU8L2Rpdj5cclxuICAgICAgICAgICAgICAgIDxhIGhyZWY9XCIjXCIgY2xhc3M9XCJjYXJkX19jdGFcIj5TaG9wIE5vdyA8c3BhbiBjbGFzcz1cImFycm93XCI+4oaSPC9zcGFuPjwvYT5cclxuICAgICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgPC9kaXY+XHJcbiAgICA8L2Rpdj4gLS0+XHJcblxyXG48L2Rpdj4iXX0=
|
|
@@ -18187,8 +18187,8 @@ class CategoriesWithImageBackgroundColumnsComponent {
|
|
|
18187
18187
|
// console.log(this.responseData);
|
|
18188
18188
|
}
|
|
18189
18189
|
redirectToListPage(category) {
|
|
18190
|
-
|
|
18191
|
-
this.router.navigate(['/list'], { queryParams: { category: category
|
|
18190
|
+
category = category.categoryName;
|
|
18191
|
+
this.router.navigate(['/list'], { queryParams: { category: category } });
|
|
18192
18192
|
}
|
|
18193
18193
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CategoriesWithImageBackgroundColumnsComponent, deps: [{ token: i2$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
18194
18194
|
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: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|