simpo-component-library 1.6.22 → 1.6.23
Sign up to get free protection for your applications and to get access to all the features.
|
@@ -174,7 +174,7 @@ export class CategoryProductComponent extends BaseSection {
|
|
|
174
174
|
return { ...this.styles?.layout };
|
|
175
175
|
}
|
|
176
176
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: CategoryProductComponent, deps: [{ token: i1.RestService }, { token: i2.CartService }, { token: i3.EventsService }, { token: i4.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
177
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: CategoryProductComponent, isStandalone: true, selector: "simpo-category-product", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\">\r\n <section class=\"container-fluid d-block\" [id]=\"data?.id\"\r\n [simpoBackground]=\"styles?.background\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"getSpacingLayout\">\r\n <div *ngFor=\"let item of data?.content?.inputText\">\r\n <div [innerHTML]=\"item.value | sanitizeHtml\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div>\r\n </div>\r\n <section class=\"m-auto position-relative w-100\" [ngClass]=\"{'adjustPosition': isMobile}\">\r\n <section class=\"d-flex\">\r\n <ng-container *ngFor=\"let category of categoryList; let idx = index\">\r\n <div class=\"d-flex flex-column align-items-center category-tag position-relative\" style=\"gap: 5px;\"\r\n [style.backgroundColor]=\"selectCategoryId === category.categoryId ? getSupportingColor(styles?.background?.accentColor ?? '#000000') : ''\"\r\n [style.borderColor]=\"selectCategoryId == category.categoryId ? styles?.background?.accentColor : ''\"\r\n (click)=\"selectCategory(category.categoryId)\">\r\n <img [src]=\"category.imgUrl[0]\" alt=\"\" height=\"30px\" width=\"30px\" style=\"border-radius: 50%;\">\r\n <span class=\"trim-text\" style=\"font-size: .8125rem; text-align: center !important;\"\r\n [style.color]=\"selectCategoryId === category.categoryId ? (styles?.background?.accentColor) : ''\">{{\r\n category.categoryName | titlecase }}</span>\r\n </div>\r\n </ng-container>\r\n </section>\r\n <ng-container *ngIf=\"!isMobile\">\r\n <div class=\"left-arrow\" (click)=\"scrollLeft()\" *ngIf=\"showLeftArrow && categoryList?.length\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n <div class=\"right-arrow\" (click)=\"scrollRight()\" *ngIf=\"showRightArrow && categoryList?.length\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n </ng-container>\r\n <section class=\"product-list position-relative\" #container *ngIf=\"dataList.length\"\r\n [style.backgroundColor]=\"styles?.background?.accentColor\">\r\n <section class=\"d-flex overflow-scroll\" id=\"productScrollBar\">\r\n <ng-container *ngFor=\"let product of dataList\">\r\n <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"true\"></simpo-small-product-listing>\r\n </ng-container>\r\n </section>\r\n </section>\r\n </section>\r\n </section>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n<ng-template #loadingTemplate>\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n</ng-template>\r\n", styles: [".total-container{height:auto;position:relative}.d-block{display:block!important}.category-tag{padding:15px 10px;height:
|
|
177
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: CategoryProductComponent, isStandalone: true, selector: "simpo-category-product", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\">\r\n <section class=\"container-fluid d-block\" [id]=\"data?.id\"\r\n [simpoBackground]=\"styles?.background\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"getSpacingLayout\">\r\n <div *ngFor=\"let item of data?.content?.inputText\">\r\n <div [innerHTML]=\"item.value | sanitizeHtml\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div>\r\n </div>\r\n <section class=\"m-auto position-relative w-100\" [ngClass]=\"{'adjustPosition': isMobile}\">\r\n <section class=\"d-flex\">\r\n <ng-container *ngFor=\"let category of categoryList; let idx = index\">\r\n <div class=\"d-flex flex-column align-items-center category-tag position-relative\" style=\"gap: 5px;\"\r\n [style.backgroundColor]=\"selectCategoryId === category.categoryId ? getSupportingColor(styles?.background?.accentColor ?? '#000000') : ''\"\r\n [style.borderColor]=\"selectCategoryId == category.categoryId ? styles?.background?.accentColor : ''\"\r\n (click)=\"selectCategory(category.categoryId)\">\r\n <img [src]=\"category.imgUrl[0]\" alt=\"\" height=\"30px\" width=\"30px\" style=\"border-radius: 50%;\">\r\n <span class=\"trim-text\" style=\"font-size: .8125rem; text-align: center !important;\"\r\n [style.color]=\"selectCategoryId === category.categoryId ? (styles?.background?.accentColor) : ''\">{{\r\n category.categoryName | titlecase }}</span>\r\n </div>\r\n </ng-container>\r\n </section>\r\n <ng-container *ngIf=\"!isMobile\">\r\n <div class=\"left-arrow\" (click)=\"scrollLeft()\" *ngIf=\"showLeftArrow && categoryList?.length\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n <div class=\"right-arrow\" (click)=\"scrollRight()\" *ngIf=\"showRightArrow && categoryList?.length\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n </ng-container>\r\n <section class=\"product-list position-relative\" #container *ngIf=\"dataList.length\"\r\n [style.backgroundColor]=\"styles?.background?.accentColor\">\r\n <section class=\"d-flex overflow-scroll\" id=\"productScrollBar\">\r\n <ng-container *ngFor=\"let product of dataList\">\r\n <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"true\"></simpo-small-product-listing>\r\n </ng-container>\r\n </section>\r\n </section>\r\n </section>\r\n </section>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n<ng-template #loadingTemplate>\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n</ng-template>\r\n", styles: [".total-container{height:auto;position:relative}.d-block{display:block!important}.category-tag{padding:15px 10px;height:105px;width:80px;border-top-left-radius:10px;border-top-right-radius:10px;cursor:pointer;border-top:8px solid transparent}.product-list{padding:40px 20px;border-radius:8px}.adjustPosition{position:relative!important;left:-15px!important;width:108%!important}.overflow-scroll{overflow-x:auto}div[class*=arrow]{background-color:#fff;padding:5px;border-radius:50%;position:absolute;top:50%;display:flex;align-items:center;justify-content:center;z-index:10000001;cursor:pointer}.left-arrow{left:10px}.right-arrow{right:10px}#productScrollBar{scroll-behavior:smooth}@media screen and (max-width: 475px){.padding-1{padding-left:1rem;padding-right:1rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: SmallProductListingComponent, selector: "simpo-small-product-listing", inputs: ["product", "data", "isScrollable", "isCategoryProductList"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i6.HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: i7.DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i8.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal"] }] }); }
|
|
178
178
|
}
|
|
179
179
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: CategoryProductComponent, decorators: [{
|
|
180
180
|
type: Component,
|
|
@@ -190,7 +190,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
190
190
|
SimpoComponentModule,
|
|
191
191
|
SanitizeHtmlPipe,
|
|
192
192
|
SpacingHorizontalDirective
|
|
193
|
-
], template: "<section class=\"total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\">\r\n <section class=\"container-fluid d-block\" [id]=\"data?.id\"\r\n [simpoBackground]=\"styles?.background\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"getSpacingLayout\">\r\n <div *ngFor=\"let item of data?.content?.inputText\">\r\n <div [innerHTML]=\"item.value | sanitizeHtml\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div>\r\n </div>\r\n <section class=\"m-auto position-relative w-100\" [ngClass]=\"{'adjustPosition': isMobile}\">\r\n <section class=\"d-flex\">\r\n <ng-container *ngFor=\"let category of categoryList; let idx = index\">\r\n <div class=\"d-flex flex-column align-items-center category-tag position-relative\" style=\"gap: 5px;\"\r\n [style.backgroundColor]=\"selectCategoryId === category.categoryId ? getSupportingColor(styles?.background?.accentColor ?? '#000000') : ''\"\r\n [style.borderColor]=\"selectCategoryId == category.categoryId ? styles?.background?.accentColor : ''\"\r\n (click)=\"selectCategory(category.categoryId)\">\r\n <img [src]=\"category.imgUrl[0]\" alt=\"\" height=\"30px\" width=\"30px\" style=\"border-radius: 50%;\">\r\n <span class=\"trim-text\" style=\"font-size: .8125rem; text-align: center !important;\"\r\n [style.color]=\"selectCategoryId === category.categoryId ? (styles?.background?.accentColor) : ''\">{{\r\n category.categoryName | titlecase }}</span>\r\n </div>\r\n </ng-container>\r\n </section>\r\n <ng-container *ngIf=\"!isMobile\">\r\n <div class=\"left-arrow\" (click)=\"scrollLeft()\" *ngIf=\"showLeftArrow && categoryList?.length\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n <div class=\"right-arrow\" (click)=\"scrollRight()\" *ngIf=\"showRightArrow && categoryList?.length\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n </ng-container>\r\n <section class=\"product-list position-relative\" #container *ngIf=\"dataList.length\"\r\n [style.backgroundColor]=\"styles?.background?.accentColor\">\r\n <section class=\"d-flex overflow-scroll\" id=\"productScrollBar\">\r\n <ng-container *ngFor=\"let product of dataList\">\r\n <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"true\"></simpo-small-product-listing>\r\n </ng-container>\r\n </section>\r\n </section>\r\n </section>\r\n </section>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n<ng-template #loadingTemplate>\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n</ng-template>\r\n", styles: [".total-container{height:auto;position:relative}.d-block{display:block!important}.category-tag{padding:15px 10px;height:
|
|
193
|
+
], template: "<section class=\"total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\">\r\n <section class=\"container-fluid d-block\" [id]=\"data?.id\"\r\n [simpoBackground]=\"styles?.background\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"getSpacingLayout\">\r\n <div *ngFor=\"let item of data?.content?.inputText\">\r\n <div [innerHTML]=\"item.value | sanitizeHtml\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div>\r\n </div>\r\n <section class=\"m-auto position-relative w-100\" [ngClass]=\"{'adjustPosition': isMobile}\">\r\n <section class=\"d-flex\">\r\n <ng-container *ngFor=\"let category of categoryList; let idx = index\">\r\n <div class=\"d-flex flex-column align-items-center category-tag position-relative\" style=\"gap: 5px;\"\r\n [style.backgroundColor]=\"selectCategoryId === category.categoryId ? getSupportingColor(styles?.background?.accentColor ?? '#000000') : ''\"\r\n [style.borderColor]=\"selectCategoryId == category.categoryId ? styles?.background?.accentColor : ''\"\r\n (click)=\"selectCategory(category.categoryId)\">\r\n <img [src]=\"category.imgUrl[0]\" alt=\"\" height=\"30px\" width=\"30px\" style=\"border-radius: 50%;\">\r\n <span class=\"trim-text\" style=\"font-size: .8125rem; text-align: center !important;\"\r\n [style.color]=\"selectCategoryId === category.categoryId ? (styles?.background?.accentColor) : ''\">{{\r\n category.categoryName | titlecase }}</span>\r\n </div>\r\n </ng-container>\r\n </section>\r\n <ng-container *ngIf=\"!isMobile\">\r\n <div class=\"left-arrow\" (click)=\"scrollLeft()\" *ngIf=\"showLeftArrow && categoryList?.length\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n <div class=\"right-arrow\" (click)=\"scrollRight()\" *ngIf=\"showRightArrow && categoryList?.length\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n </ng-container>\r\n <section class=\"product-list position-relative\" #container *ngIf=\"dataList.length\"\r\n [style.backgroundColor]=\"styles?.background?.accentColor\">\r\n <section class=\"d-flex overflow-scroll\" id=\"productScrollBar\">\r\n <ng-container *ngFor=\"let product of dataList\">\r\n <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"true\"></simpo-small-product-listing>\r\n </ng-container>\r\n </section>\r\n </section>\r\n </section>\r\n </section>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n<ng-template #loadingTemplate>\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n</ng-template>\r\n", styles: [".total-container{height:auto;position:relative}.d-block{display:block!important}.category-tag{padding:15px 10px;height:105px;width:80px;border-top-left-radius:10px;border-top-right-radius:10px;cursor:pointer;border-top:8px solid transparent}.product-list{padding:40px 20px;border-radius:8px}.adjustPosition{position:relative!important;left:-15px!important;width:108%!important}.overflow-scroll{overflow-x:auto}div[class*=arrow]{background-color:#fff;padding:5px;border-radius:50%;position:absolute;top:50%;display:flex;align-items:center;justify-content:center;z-index:10000001;cursor:pointer}.left-arrow{left:10px}.right-arrow{right:10px}#productScrollBar{scroll-behavior:smooth}@media screen and (max-width: 475px){.padding-1{padding-left:1rem;padding-right:1rem}}\n"] }]
|
|
194
194
|
}], ctorParameters: () => [{ type: i1.RestService }, { type: i2.CartService }, { type: i3.EventsService }, { type: i4.ActivatedRoute }], propDecorators: { data: [{
|
|
195
195
|
type: Input
|
|
196
196
|
}], index: [{
|
|
@@ -8798,7 +8798,7 @@ class CategoryProductComponent extends BaseSection {
|
|
|
8798
8798
|
return { ...this.styles?.layout };
|
|
8799
8799
|
}
|
|
8800
8800
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: CategoryProductComponent, deps: [{ token: RestService }, { token: CartService }, { token: EventsService }, { token: i2$3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8801
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: CategoryProductComponent, isStandalone: true, selector: "simpo-category-product", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\">\r\n <section class=\"container-fluid d-block\" [id]=\"data?.id\"\r\n [simpoBackground]=\"styles?.background\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"getSpacingLayout\">\r\n <div *ngFor=\"let item of data?.content?.inputText\">\r\n <div [innerHTML]=\"item.value | sanitizeHtml\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div>\r\n </div>\r\n <section class=\"m-auto position-relative w-100\" [ngClass]=\"{'adjustPosition': isMobile}\">\r\n <section class=\"d-flex\">\r\n <ng-container *ngFor=\"let category of categoryList; let idx = index\">\r\n <div class=\"d-flex flex-column align-items-center category-tag position-relative\" style=\"gap: 5px;\"\r\n [style.backgroundColor]=\"selectCategoryId === category.categoryId ? getSupportingColor(styles?.background?.accentColor ?? '#000000') : ''\"\r\n [style.borderColor]=\"selectCategoryId == category.categoryId ? styles?.background?.accentColor : ''\"\r\n (click)=\"selectCategory(category.categoryId)\">\r\n <img [src]=\"category.imgUrl[0]\" alt=\"\" height=\"30px\" width=\"30px\" style=\"border-radius: 50%;\">\r\n <span class=\"trim-text\" style=\"font-size: .8125rem; text-align: center !important;\"\r\n [style.color]=\"selectCategoryId === category.categoryId ? (styles?.background?.accentColor) : ''\">{{\r\n category.categoryName | titlecase }}</span>\r\n </div>\r\n </ng-container>\r\n </section>\r\n <ng-container *ngIf=\"!isMobile\">\r\n <div class=\"left-arrow\" (click)=\"scrollLeft()\" *ngIf=\"showLeftArrow && categoryList?.length\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n <div class=\"right-arrow\" (click)=\"scrollRight()\" *ngIf=\"showRightArrow && categoryList?.length\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n </ng-container>\r\n <section class=\"product-list position-relative\" #container *ngIf=\"dataList.length\"\r\n [style.backgroundColor]=\"styles?.background?.accentColor\">\r\n <section class=\"d-flex overflow-scroll\" id=\"productScrollBar\">\r\n <ng-container *ngFor=\"let product of dataList\">\r\n <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"true\"></simpo-small-product-listing>\r\n </ng-container>\r\n </section>\r\n </section>\r\n </section>\r\n </section>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n<ng-template #loadingTemplate>\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n</ng-template>\r\n", styles: [".total-container{height:auto;position:relative}.d-block{display:block!important}.category-tag{padding:15px 10px;height:
|
|
8801
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: CategoryProductComponent, isStandalone: true, selector: "simpo-category-product", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\">\r\n <section class=\"container-fluid d-block\" [id]=\"data?.id\"\r\n [simpoBackground]=\"styles?.background\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"getSpacingLayout\">\r\n <div *ngFor=\"let item of data?.content?.inputText\">\r\n <div [innerHTML]=\"item.value | sanitizeHtml\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div>\r\n </div>\r\n <section class=\"m-auto position-relative w-100\" [ngClass]=\"{'adjustPosition': isMobile}\">\r\n <section class=\"d-flex\">\r\n <ng-container *ngFor=\"let category of categoryList; let idx = index\">\r\n <div class=\"d-flex flex-column align-items-center category-tag position-relative\" style=\"gap: 5px;\"\r\n [style.backgroundColor]=\"selectCategoryId === category.categoryId ? getSupportingColor(styles?.background?.accentColor ?? '#000000') : ''\"\r\n [style.borderColor]=\"selectCategoryId == category.categoryId ? styles?.background?.accentColor : ''\"\r\n (click)=\"selectCategory(category.categoryId)\">\r\n <img [src]=\"category.imgUrl[0]\" alt=\"\" height=\"30px\" width=\"30px\" style=\"border-radius: 50%;\">\r\n <span class=\"trim-text\" style=\"font-size: .8125rem; text-align: center !important;\"\r\n [style.color]=\"selectCategoryId === category.categoryId ? (styles?.background?.accentColor) : ''\">{{\r\n category.categoryName | titlecase }}</span>\r\n </div>\r\n </ng-container>\r\n </section>\r\n <ng-container *ngIf=\"!isMobile\">\r\n <div class=\"left-arrow\" (click)=\"scrollLeft()\" *ngIf=\"showLeftArrow && categoryList?.length\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n <div class=\"right-arrow\" (click)=\"scrollRight()\" *ngIf=\"showRightArrow && categoryList?.length\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n </ng-container>\r\n <section class=\"product-list position-relative\" #container *ngIf=\"dataList.length\"\r\n [style.backgroundColor]=\"styles?.background?.accentColor\">\r\n <section class=\"d-flex overflow-scroll\" id=\"productScrollBar\">\r\n <ng-container *ngFor=\"let product of dataList\">\r\n <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"true\"></simpo-small-product-listing>\r\n </ng-container>\r\n </section>\r\n </section>\r\n </section>\r\n </section>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n<ng-template #loadingTemplate>\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n</ng-template>\r\n", styles: [".total-container{height:auto;position:relative}.d-block{display:block!important}.category-tag{padding:15px 10px;height:105px;width:80px;border-top-left-radius:10px;border-top-right-radius:10px;cursor:pointer;border-top:8px solid transparent}.product-list{padding:40px 20px;border-radius:8px}.adjustPosition{position:relative!important;left:-15px!important;width:108%!important}.overflow-scroll{overflow-x:auto}div[class*=arrow]{background-color:#fff;padding:5px;border-radius:50%;position:absolute;top:50%;display:flex;align-items:center;justify-content:center;z-index:10000001;cursor:pointer}.left-arrow{left:10px}.right-arrow{right:10px}#productScrollBar{scroll-behavior:smooth}@media screen and (max-width: 475px){.padding-1{padding-left:1rem;padding-right:1rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: SmallProductListingComponent, selector: "simpo-small-product-listing", inputs: ["product", "data", "isScrollable", "isCategoryProductList"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i13$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal"] }] }); }
|
|
8802
8802
|
}
|
|
8803
8803
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: CategoryProductComponent, decorators: [{
|
|
8804
8804
|
type: Component,
|
|
@@ -8814,7 +8814,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
8814
8814
|
SimpoComponentModule,
|
|
8815
8815
|
SanitizeHtmlPipe,
|
|
8816
8816
|
SpacingHorizontalDirective
|
|
8817
|
-
], template: "<section class=\"total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\">\r\n <section class=\"container-fluid d-block\" [id]=\"data?.id\"\r\n [simpoBackground]=\"styles?.background\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"getSpacingLayout\">\r\n <div *ngFor=\"let item of data?.content?.inputText\">\r\n <div [innerHTML]=\"item.value | sanitizeHtml\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div>\r\n </div>\r\n <section class=\"m-auto position-relative w-100\" [ngClass]=\"{'adjustPosition': isMobile}\">\r\n <section class=\"d-flex\">\r\n <ng-container *ngFor=\"let category of categoryList; let idx = index\">\r\n <div class=\"d-flex flex-column align-items-center category-tag position-relative\" style=\"gap: 5px;\"\r\n [style.backgroundColor]=\"selectCategoryId === category.categoryId ? getSupportingColor(styles?.background?.accentColor ?? '#000000') : ''\"\r\n [style.borderColor]=\"selectCategoryId == category.categoryId ? styles?.background?.accentColor : ''\"\r\n (click)=\"selectCategory(category.categoryId)\">\r\n <img [src]=\"category.imgUrl[0]\" alt=\"\" height=\"30px\" width=\"30px\" style=\"border-radius: 50%;\">\r\n <span class=\"trim-text\" style=\"font-size: .8125rem; text-align: center !important;\"\r\n [style.color]=\"selectCategoryId === category.categoryId ? (styles?.background?.accentColor) : ''\">{{\r\n category.categoryName | titlecase }}</span>\r\n </div>\r\n </ng-container>\r\n </section>\r\n <ng-container *ngIf=\"!isMobile\">\r\n <div class=\"left-arrow\" (click)=\"scrollLeft()\" *ngIf=\"showLeftArrow && categoryList?.length\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n <div class=\"right-arrow\" (click)=\"scrollRight()\" *ngIf=\"showRightArrow && categoryList?.length\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n </ng-container>\r\n <section class=\"product-list position-relative\" #container *ngIf=\"dataList.length\"\r\n [style.backgroundColor]=\"styles?.background?.accentColor\">\r\n <section class=\"d-flex overflow-scroll\" id=\"productScrollBar\">\r\n <ng-container *ngFor=\"let product of dataList\">\r\n <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"true\"></simpo-small-product-listing>\r\n </ng-container>\r\n </section>\r\n </section>\r\n </section>\r\n </section>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n<ng-template #loadingTemplate>\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n</ng-template>\r\n", styles: [".total-container{height:auto;position:relative}.d-block{display:block!important}.category-tag{padding:15px 10px;height:
|
|
8817
|
+
], template: "<section class=\"total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\">\r\n <section class=\"container-fluid d-block\" [id]=\"data?.id\"\r\n [simpoBackground]=\"styles?.background\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"getSpacingLayout\">\r\n <div *ngFor=\"let item of data?.content?.inputText\">\r\n <div [innerHTML]=\"item.value | sanitizeHtml\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div>\r\n </div>\r\n <section class=\"m-auto position-relative w-100\" [ngClass]=\"{'adjustPosition': isMobile}\">\r\n <section class=\"d-flex\">\r\n <ng-container *ngFor=\"let category of categoryList; let idx = index\">\r\n <div class=\"d-flex flex-column align-items-center category-tag position-relative\" style=\"gap: 5px;\"\r\n [style.backgroundColor]=\"selectCategoryId === category.categoryId ? getSupportingColor(styles?.background?.accentColor ?? '#000000') : ''\"\r\n [style.borderColor]=\"selectCategoryId == category.categoryId ? styles?.background?.accentColor : ''\"\r\n (click)=\"selectCategory(category.categoryId)\">\r\n <img [src]=\"category.imgUrl[0]\" alt=\"\" height=\"30px\" width=\"30px\" style=\"border-radius: 50%;\">\r\n <span class=\"trim-text\" style=\"font-size: .8125rem; text-align: center !important;\"\r\n [style.color]=\"selectCategoryId === category.categoryId ? (styles?.background?.accentColor) : ''\">{{\r\n category.categoryName | titlecase }}</span>\r\n </div>\r\n </ng-container>\r\n </section>\r\n <ng-container *ngIf=\"!isMobile\">\r\n <div class=\"left-arrow\" (click)=\"scrollLeft()\" *ngIf=\"showLeftArrow && categoryList?.length\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n <div class=\"right-arrow\" (click)=\"scrollRight()\" *ngIf=\"showRightArrow && categoryList?.length\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n </ng-container>\r\n <section class=\"product-list position-relative\" #container *ngIf=\"dataList.length\"\r\n [style.backgroundColor]=\"styles?.background?.accentColor\">\r\n <section class=\"d-flex overflow-scroll\" id=\"productScrollBar\">\r\n <ng-container *ngFor=\"let product of dataList\">\r\n <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"true\"></simpo-small-product-listing>\r\n </ng-container>\r\n </section>\r\n </section>\r\n </section>\r\n </section>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n<ng-template #loadingTemplate>\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n</ng-template>\r\n", styles: [".total-container{height:auto;position:relative}.d-block{display:block!important}.category-tag{padding:15px 10px;height:105px;width:80px;border-top-left-radius:10px;border-top-right-radius:10px;cursor:pointer;border-top:8px solid transparent}.product-list{padding:40px 20px;border-radius:8px}.adjustPosition{position:relative!important;left:-15px!important;width:108%!important}.overflow-scroll{overflow-x:auto}div[class*=arrow]{background-color:#fff;padding:5px;border-radius:50%;position:absolute;top:50%;display:flex;align-items:center;justify-content:center;z-index:10000001;cursor:pointer}.left-arrow{left:10px}.right-arrow{right:10px}#productScrollBar{scroll-behavior:smooth}@media screen and (max-width: 475px){.padding-1{padding-left:1rem;padding-right:1rem}}\n"] }]
|
|
8818
8818
|
}], ctorParameters: () => [{ type: RestService }, { type: CartService }, { type: EventsService }, { type: i2$3.ActivatedRoute }], propDecorators: { data: [{
|
|
8819
8819
|
type: Input
|
|
8820
8820
|
}], index: [{
|
package/package.json
CHANGED
|
Binary file
|