simpo-component-library 3.2.85 → 3.2.86
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/components/hover-elements/hover-elements.component.mjs +3 -3
- package/esm2022/lib/directive/background-directive.mjs +3 -2
- package/esm2022/lib/ecommerce/sections/authentication-required/authentication-required.component.mjs +2 -2
- package/esm2022/lib/ecommerce/sections/featured-products/featured-products.component.mjs +3 -3
- package/esm2022/lib/elements/add-section/add-section.component.mjs +3 -3
- package/esm2022/lib/elements/below-image-card/below-image-card.component.mjs +3 -3
- package/esm2022/lib/elements/image-editor/image-editor.component.mjs +3 -3
- package/esm2022/lib/elements/media-selector/media-selector.component.mjs +3 -3
- package/esm2022/lib/sections/banner-section/banner-section.component.mjs +4 -3
- package/esm2022/lib/sections/contact-us/contact-us.component.mjs +7 -5
- package/esm2022/lib/sections/header-section/header-section.component.mjs +3 -3
- package/esm2022/lib/sections/logo-showcase/logo-showcase.component.mjs +3 -3
- package/esm2022/lib/sections/new-services/new-services.component.mjs +3 -3
- package/esm2022/lib/sections/new-testimonials/new-testimonials.component.mjs +3 -3
- package/esm2022/lib/sections/pricing-section/pricing-section.component.mjs +3 -3
- package/fesm2022/simpo-component-library.mjs +33 -30
- package/fesm2022/simpo-component-library.mjs.map +1 -1
- package/package.json +1 -1
- package/simpo-component-library-3.2.86.tgz +0 -0
- package/src/lib/styles/global-styles.css +1 -1
- package/simpo-component-library-3.2.85.tgz +0 -0
|
@@ -1702,11 +1702,11 @@ class MediaSelectorComponent {
|
|
|
1702
1702
|
});
|
|
1703
1703
|
}
|
|
1704
1704
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: MediaSelectorComponent, deps: [{ token: ImageUplaodService }, { token: i2$2.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2$3.MatSnackBar }, { token: ElementServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1705
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: MediaSelectorComponent, isStandalone: true, selector: "simpo-media-selector", viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], ngImport: i0, template: "<section>\r\n <div class=\"header d-flex justify-content-between align-items-center\">\r\n <div class=\"heading\">Upload Image</div>\r\n <mat-icon (click)=\"_dialogRef.close()\" class=\"d-flex align-items-center justify-content-center f-18 cp\">close</mat-icon>\r\n </div>\r\n <div class=\"tabs d-flex align-items-center justify-content-between\">\r\n <div *ngFor=\"let tab of tabs\" [ngClass]=\"{'selectedTab': activeTab === tab}\" (click)=\"activeTab = tab\">{{tab}}</div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"activeTab === 'Unsplash'\">\r\n <ng-container *ngTemplateOutlet=\"unsplashImagesTemplate\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"activeTab === 'Upload'\">\r\n <ng-container *ngTemplateOutlet=\"uploadImageTemplate\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"activeTab === 'Library'\">\r\n <ng-container *ngTemplateOutlet=\"imageLibraryTemplate\"></ng-container>\r\n </ng-container>\r\n\r\n <div class=\"uploadButton d-flex\" *ngIf=\"this.selectedImage.size > 0\">\r\n <button (click)=\"uploadImage()\" [disabled]=\"buttonLoader\">\r\n <span *ngIf=\"buttonLoader\" ><i class=\"fas fa-circle-notch fa-spin\"></i> Loading</span>\r\n <span *ngIf=\"!buttonLoader\" >Upload Image</span></button>\r\n </div>\r\n</section>\r\n\r\n<ng-template #unsplashImagesTemplate>\r\n\r\n <div class=\"input-container d-flex align-items-center\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/314661c1741844234442Vector%20%281%29.png\"\r\n alt=\"search-bar-icon\">\r\n <input type=\"text\" placeholder=\"Search images\" [formControl]=\"searchControl\">\r\n </div>\r\n <cdk-virtual-scroll-viewport [itemSize]=\"imageSize\" [minBufferPx]=\"800\" [maxBufferPx]=\"1600\"\r\n class=\"scroll-container\">\r\n <div class=\"row image-container\">\r\n <div class=\"col-md-4 col-6\" *cdkVirtualFor=\"let image of unsplashImages\">\r\n <img [lazyLoad]=\"image.urls.thumb\" [errorImage]=\"'assets/error.jpg'\" (click)=\"selectUnsplashImage(image)\"\r\n [ngClass]=\"{'selectedImage': selectedImage.has(image.id)}\" alt=\"Image\" class=\"cp\" />\r\n </div>\r\n </div>\r\n </cdk-virtual-scroll-viewport>\r\n\r\n <p *ngIf=\"isLoading\">Loading more results...</p>\r\n\r\n</ng-template>\r\n\r\n<ng-template #uploadImageTemplate>\r\n <div>\r\n <div class=\"image-upload-container\">\r\n <div class=\"upload-img-container d-flex align-items-center justify-content-center\">\r\n <img lazy src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/187238c1742394129668upload-one.png\" alt=\"upload-image\" class=\"upload-img\">\r\n </div>\r\n <div class=\"text-container text-center\">\r\n <div class=\"top-text\">Choose a file or drag and drop it here</div>\r\n <div class=\"middle-text\">JPEG, PNG formats up to 50MB</div>\r\n <div class=\"upload-btn d-flex align-items-center justify-content-center\">\r\n <div class=\"uploads cp\" (click)=\"fileInput.click()\">\r\n Upload\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <input type=\"file\" style=\"display: none\" (change)=\"uploadImageFromSystem($event)\" [multiple]=\"multiple\"\r\n accept=\"image/png, image/jpeg, image/jpg, image/gif\" #fileInput />\r\n\r\n <div class=\"row image-container mt-3 h-30-overflow\">\r\n <ng-container *ngFor=\"let image of selectedImage | keyvalue\">\r\n <div class=\"col-md-4 systemImage\" *ngIf=\"image.value.file\">\r\n <img [src]=\"image.value.assets[0].url\" alt=\"Image\" />\r\n <mat-icon (click)=\"deleteSystemImage(image.key)\">delete</mat-icon>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #imageLibraryTemplate>\r\n <div class=\"row image-container mt-3 h-75-overflow\">\r\n <ng-container *ngIf=\"imageLibrary.length > 0; else emptyScreen\">\r\n <ng-container *ngFor=\"let image of imageLibrary\">\r\n <div class=\"col-md-4 col-6\">\r\n <img [src]=\"image.assets[0].url\" alt=\"Image\" (click)=\"selectFromImageLibrary(image)\" [ngClass]=\"{'selectedImage': selectedImage.has(image.uniqueId)}\"/>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n <ng-template #emptyScreen>\r\n <div class=\"empty-container d-flex justify-content-center align-items-center w-100 flex-column\">\r\n <div class=\"empty-img-container d-flex justify-content-center align-items-center\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/935737c1743411798188image%20%287%29.png\" alt=\"\">\r\n </div>\r\n <div class=\"empty-main-text\">\r\n Uh-oh!\r\n </div>\r\n <div class=\"sub-text-1\">\r\n No images here\r\n </div>\r\n <div class=\"sub-text-2\">\r\n I looked left, right\u2026 even turned around! Still nothing\r\n </div>\r\n </div>\r\n </ng-template>\r\n</ng-template>\r\n", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}section{height:100%;position:relative}img{width:100%;height:200px}.scroll-container{height:calc(66vh + -0px);width:100%;overflow-y:scroll}.selectedImage{position:relative;border-radius:10px;overflow:hidden;border:3px solid hsl(227,52%,36%)}.uploadButton{position:absolute;bottom:0;padding:10px;background:#fff;width:100%;justify-content:end;box-shadow:0 0 4px #00000040}.uploadButton button{background:var(--primary-bg-color);color:#fff;font-weight:600;border:unset;font-size:15px!important;padding:8px;border-radius:8px;width:15%!important}.systemImage{position:relative}.systemImage mat-icon{display:none}.systemImage:hover mat-icon{display:inline;position:absolute;right:15px;top:5px;color:red;cursor:pointer}.f-18{font-size:18px}.header{padding:10px;box-shadow:0 0 4px #00000040}.header .heading{font-size:15px;font-weight:600;line-height:24px}.header mat-icon{color:#2d264b}.tabs{padding:20px 40px}.tabs div{width:22%;cursor:pointer;text-align:center;padding:8px}.selectedTab{background:var(--primary-bg-color);background-clip:text;-webkit-text-fill-color:transparent;font-weight:500;color:#fff;box-shadow:0 0 4px #00000040;border-radius:10px;font-weight:600;position:relative}.selectedTab:before{content:\"\";position:absolute;inset:0;padding:1px;border-radius:10px;background:var(--primary-bg-color);mask:linear-gradient(white 0 0) content-box,linear-gradient(white 0 0);mask-composite:xor;mask-composite:exclude}.input-container{padding:6px 10px;gap:10px;margin:0 40px 20px;box-shadow:0 0 4px #00000040;border-radius:13px}.input-container input{width:90%;border:unset;appearance:unset;outline:unset}.input-container img{width:20px;height:20px}.image-container{margin:0 40px 20px}.image-container div{margin-bottom:20px}.image-container div img{border-radius:13px}.image-upload-container{margin:0 40px;border-radius:17px;padding:15px;border:3px dashed rgba(44,44,44,.6)}.upload-img{width:12%;height:10%}.cp{cursor:pointer}.middle-text{font-size:15px;color:#686868}.top-text{background:var(--primary-bg-color);background-clip:text;-webkit-text-fill-color:transparent;font-size:17px;font-weight:600}.uploads{width:20%;padding:8px;background:var(--primary-bg-color);background-clip:text;-webkit-text-fill-color:transparent;font-size:17px;font-weight:600;position:relative;margin-top:15px}.uploads:before{content:\"\";position:absolute;inset:0;padding:1px;border-radius:10px;background:var(--primary-bg-color);mask:linear-gradient(white 0 0) content-box,linear-gradient(white 0 0);mask-composite:xor;mask-composite:exclude}.h-30-overflow{height:calc(30vh + -0px);overflow-y:scroll}.h-75-overflow{height:calc(75vh + -0px);overflow-y:scroll}.empty-main-text{font-weight:900;font-size:42px;background:var(--primary-bg-color);background-clip:text;-webkit-text-fill-color:transparent}.sub-text-1{font-size:19px;font-weight:600;color:#101010e5}.sub-text-2{font-size:16px;font-weight:600;color:#101010e5}@media screen and (max-width : 475px){.tabs div{width:30%!important}.uploadButton button{width:35%!important}.uploads{width:30%!important}.sub-text-2{text-align:center!important}img{height:150px}}\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: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: LazyLoadImageModule }, { kind: "directive", type: i7.LazyLoadImageDirective, selector: "[lazyLoad]", inputs: ["lazyLoad", "defaultImage", "errorImage", "scrollTarget", "customObservable", "offset", "useSrcset", "decode", "debug"], outputs: ["onStateChange"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i8$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i8$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
1705
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: MediaSelectorComponent, isStandalone: true, selector: "simpo-media-selector", viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], ngImport: i0, template: "<section>\r\n <div class=\"header d-flex justify-content-between align-items-center\">\r\n <div class=\"heading\">Upload Image</div>\r\n <mat-icon (click)=\"_dialogRef.close()\" class=\"d-flex align-items-center justify-content-center f-18 cp\">close</mat-icon>\r\n </div>\r\n <div class=\"tabs d-flex align-items-center justify-content-between\">\r\n <div *ngFor=\"let tab of tabs\" [ngClass]=\"{'selectedTab': activeTab === tab}\" (click)=\"activeTab = tab\">{{tab}}</div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"activeTab === 'Unsplash'\">\r\n <ng-container *ngTemplateOutlet=\"unsplashImagesTemplate\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"activeTab === 'Upload'\">\r\n <ng-container *ngTemplateOutlet=\"uploadImageTemplate\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"activeTab === 'Library'\">\r\n <ng-container *ngTemplateOutlet=\"imageLibraryTemplate\"></ng-container>\r\n </ng-container>\r\n\r\n <div class=\"uploadButton d-flex\" *ngIf=\"this.selectedImage.size > 0\">\r\n <button (click)=\"uploadImage()\" [disabled]=\"buttonLoader\">\r\n <span *ngIf=\"buttonLoader\" ><i class=\"fas fa-circle-notch fa-spin\"></i> Loading</span>\r\n <span *ngIf=\"!buttonLoader\" >Upload Image</span></button>\r\n </div>\r\n</section>\r\n\r\n<ng-template #unsplashImagesTemplate>\r\n\r\n <div class=\"input-container d-flex align-items-center\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/314661c1741844234442Vector%20%281%29.png\"\r\n alt=\"search-bar-icon\">\r\n <input type=\"text\" placeholder=\"Search images\" [formControl]=\"searchControl\">\r\n </div>\r\n <cdk-virtual-scroll-viewport [itemSize]=\"imageSize\" [minBufferPx]=\"800\" [maxBufferPx]=\"1600\"\r\n class=\"scroll-container\">\r\n <div class=\"row image-container\">\r\n <div class=\"col-md-4 col-6\" *cdkVirtualFor=\"let image of unsplashImages\">\r\n <img [lazyLoad]=\"image.urls.thumb\" [errorImage]=\"'assets/error.jpg'\" (click)=\"selectUnsplashImage(image)\"\r\n [ngClass]=\"{'selectedImage': selectedImage.has(image.id)}\" alt=\"Image\" class=\"cp\" />\r\n </div>\r\n </div>\r\n </cdk-virtual-scroll-viewport>\r\n\r\n <p *ngIf=\"isLoading\">Loading more results...</p>\r\n\r\n</ng-template>\r\n\r\n<ng-template #uploadImageTemplate>\r\n <div>\r\n <div class=\"image-upload-container\">\r\n <div class=\"upload-img-container d-flex align-items-center justify-content-center\">\r\n <img lazy src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/547500c1744698830343upload-one%20%281%29.png\" alt=\"upload-image\" class=\"upload-img\">\r\n </div>\r\n <div class=\"text-container text-center\">\r\n <div class=\"top-text\">Choose a file or drag and drop it here</div>\r\n <div class=\"middle-text\">JPEG, PNG formats up to 50MB</div>\r\n <div class=\"upload-btn d-flex align-items-center justify-content-center\">\r\n <div class=\"uploads cp\" (click)=\"fileInput.click()\">\r\n Upload\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <input type=\"file\" style=\"display: none\" (change)=\"uploadImageFromSystem($event)\" [multiple]=\"multiple\"\r\n accept=\"image/png, image/jpeg, image/jpg, image/gif\" #fileInput />\r\n\r\n <div class=\"row image-container mt-3 h-30-overflow\">\r\n <ng-container *ngFor=\"let image of selectedImage | keyvalue\">\r\n <div class=\"col-md-4 systemImage\" *ngIf=\"image.value.file\">\r\n <img [src]=\"image.value.assets[0].url\" alt=\"Image\" />\r\n <mat-icon (click)=\"deleteSystemImage(image.key)\">delete</mat-icon>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #imageLibraryTemplate>\r\n <div class=\"row image-container mt-3 h-75-overflow\">\r\n <ng-container *ngIf=\"imageLibrary.length > 0; else emptyScreen\">\r\n <ng-container *ngFor=\"let image of imageLibrary\">\r\n <div class=\"col-md-4 col-6\">\r\n <img [src]=\"image.assets[0].url\" alt=\"Image\" (click)=\"selectFromImageLibrary(image)\" [ngClass]=\"{'selectedImage': selectedImage.has(image.uniqueId)}\"/>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n <ng-template #emptyScreen>\r\n <div class=\"empty-container d-flex justify-content-center align-items-center w-100 flex-column\">\r\n <div class=\"empty-img-container d-flex justify-content-center align-items-center\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/935737c1743411798188image%20%287%29.png\" alt=\"\">\r\n </div>\r\n <div class=\"empty-main-text\">\r\n Uh-oh!\r\n </div>\r\n <div class=\"sub-text-1\">\r\n No images here\r\n </div>\r\n <div class=\"sub-text-2\">\r\n I looked left, right\u2026 even turned around! Still nothing\r\n </div>\r\n </div>\r\n </ng-template>\r\n</ng-template>\r\n", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}section{height:100%;position:relative}img{width:100%;height:200px}.scroll-container{height:calc(66vh + -0px);width:100%;overflow-y:scroll}.selectedImage{position:relative;border-radius:10px;overflow:hidden;border:3px solid hsl(227,52%,36%)}.uploadButton{position:absolute;bottom:0;padding:10px;background:#fff;width:100%;justify-content:end;box-shadow:0 0 4px #00000040}.uploadButton button{background:var(--primary-bg-color);color:#fff;font-weight:600;border:unset;font-size:15px!important;padding:8px;border-radius:8px;width:15%!important}.systemImage{position:relative}.systemImage mat-icon{display:none}.systemImage:hover mat-icon{display:inline;position:absolute;right:15px;top:5px;color:red;cursor:pointer}.f-18{font-size:18px}.header{padding:10px;box-shadow:0 0 4px #00000040}.header .heading{font-size:15px;font-weight:600;line-height:24px}.header mat-icon{color:#2d264b}.tabs{padding:20px 40px}.tabs div{width:22%;cursor:pointer;text-align:center;padding:8px}.selectedTab{background:var(--primary-bg-color);background-clip:text;-webkit-text-fill-color:transparent;font-weight:500;color:#fff;box-shadow:0 0 4px #00000040;border-radius:10px;font-weight:600;position:relative}.selectedTab:before{content:\"\";position:absolute;inset:0;padding:1px;border-radius:10px;background:var(--primary-bg-color);mask:linear-gradient(white 0 0) content-box,linear-gradient(white 0 0);mask-composite:xor;mask-composite:exclude}.input-container{padding:6px 10px;gap:10px;margin:0 40px 20px;box-shadow:0 0 4px #00000040;border-radius:13px}.input-container input{width:90%;border:unset;appearance:unset;outline:unset}.input-container img{width:20px;height:20px}.image-container{margin:0 40px 20px}.image-container div{margin-bottom:20px}.image-container div img{border-radius:13px}.image-upload-container{margin:0 40px;border-radius:17px;padding:15px;border:3px dashed rgba(44,44,44,.6)}.upload-img{width:12%;height:10%}.cp{cursor:pointer}.middle-text{font-size:15px;color:#686868}.top-text{background:var(--primary-bg-color);background-clip:text;-webkit-text-fill-color:transparent;font-size:17px;font-weight:600}.uploads{width:20%;padding:8px;background:var(--primary-bg-color);background-clip:text;-webkit-text-fill-color:transparent;font-size:17px;font-weight:600;position:relative;margin-top:15px}.uploads:before{content:\"\";position:absolute;inset:0;padding:1px;border-radius:10px;background:var(--primary-bg-color);mask:linear-gradient(white 0 0) content-box,linear-gradient(white 0 0);mask-composite:xor;mask-composite:exclude}.h-30-overflow{height:calc(30vh + -0px);overflow-y:scroll}.h-75-overflow{height:calc(75vh + -0px);overflow-y:scroll}.empty-main-text{font-weight:900;font-size:42px;background:var(--primary-bg-color);background-clip:text;-webkit-text-fill-color:transparent}.sub-text-1{font-size:19px;font-weight:600;color:#101010e5}.sub-text-2{font-size:16px;font-weight:600;color:#101010e5}@media screen and (max-width : 475px){.tabs div{width:30%!important}.uploadButton button{width:35%!important}.uploads{width:30%!important}.sub-text-2{text-align:center!important}img{height:150px}}\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: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: LazyLoadImageModule }, { kind: "directive", type: i7.LazyLoadImageDirective, selector: "[lazyLoad]", inputs: ["lazyLoad", "defaultImage", "errorImage", "scrollTarget", "customObservable", "offset", "useSrcset", "decode", "debug"], outputs: ["onStateChange"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i8$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i8$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
1706
1706
|
}
|
|
1707
1707
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: MediaSelectorComponent, decorators: [{
|
|
1708
1708
|
type: Component,
|
|
1709
|
-
args: [{ selector: 'simpo-media-selector', standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule, CdkVirtualScrollViewport, LazyLoadImageModule, ScrollingModule, MatIconModule], template: "<section>\r\n <div class=\"header d-flex justify-content-between align-items-center\">\r\n <div class=\"heading\">Upload Image</div>\r\n <mat-icon (click)=\"_dialogRef.close()\" class=\"d-flex align-items-center justify-content-center f-18 cp\">close</mat-icon>\r\n </div>\r\n <div class=\"tabs d-flex align-items-center justify-content-between\">\r\n <div *ngFor=\"let tab of tabs\" [ngClass]=\"{'selectedTab': activeTab === tab}\" (click)=\"activeTab = tab\">{{tab}}</div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"activeTab === 'Unsplash'\">\r\n <ng-container *ngTemplateOutlet=\"unsplashImagesTemplate\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"activeTab === 'Upload'\">\r\n <ng-container *ngTemplateOutlet=\"uploadImageTemplate\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"activeTab === 'Library'\">\r\n <ng-container *ngTemplateOutlet=\"imageLibraryTemplate\"></ng-container>\r\n </ng-container>\r\n\r\n <div class=\"uploadButton d-flex\" *ngIf=\"this.selectedImage.size > 0\">\r\n <button (click)=\"uploadImage()\" [disabled]=\"buttonLoader\">\r\n <span *ngIf=\"buttonLoader\" ><i class=\"fas fa-circle-notch fa-spin\"></i> Loading</span>\r\n <span *ngIf=\"!buttonLoader\" >Upload Image</span></button>\r\n </div>\r\n</section>\r\n\r\n<ng-template #unsplashImagesTemplate>\r\n\r\n <div class=\"input-container d-flex align-items-center\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/314661c1741844234442Vector%20%281%29.png\"\r\n alt=\"search-bar-icon\">\r\n <input type=\"text\" placeholder=\"Search images\" [formControl]=\"searchControl\">\r\n </div>\r\n <cdk-virtual-scroll-viewport [itemSize]=\"imageSize\" [minBufferPx]=\"800\" [maxBufferPx]=\"1600\"\r\n class=\"scroll-container\">\r\n <div class=\"row image-container\">\r\n <div class=\"col-md-4 col-6\" *cdkVirtualFor=\"let image of unsplashImages\">\r\n <img [lazyLoad]=\"image.urls.thumb\" [errorImage]=\"'assets/error.jpg'\" (click)=\"selectUnsplashImage(image)\"\r\n [ngClass]=\"{'selectedImage': selectedImage.has(image.id)}\" alt=\"Image\" class=\"cp\" />\r\n </div>\r\n </div>\r\n </cdk-virtual-scroll-viewport>\r\n\r\n <p *ngIf=\"isLoading\">Loading more results...</p>\r\n\r\n</ng-template>\r\n\r\n<ng-template #uploadImageTemplate>\r\n <div>\r\n <div class=\"image-upload-container\">\r\n <div class=\"upload-img-container d-flex align-items-center justify-content-center\">\r\n <img lazy src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/
|
|
1709
|
+
args: [{ selector: 'simpo-media-selector', standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule, CdkVirtualScrollViewport, LazyLoadImageModule, ScrollingModule, MatIconModule], template: "<section>\r\n <div class=\"header d-flex justify-content-between align-items-center\">\r\n <div class=\"heading\">Upload Image</div>\r\n <mat-icon (click)=\"_dialogRef.close()\" class=\"d-flex align-items-center justify-content-center f-18 cp\">close</mat-icon>\r\n </div>\r\n <div class=\"tabs d-flex align-items-center justify-content-between\">\r\n <div *ngFor=\"let tab of tabs\" [ngClass]=\"{'selectedTab': activeTab === tab}\" (click)=\"activeTab = tab\">{{tab}}</div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"activeTab === 'Unsplash'\">\r\n <ng-container *ngTemplateOutlet=\"unsplashImagesTemplate\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"activeTab === 'Upload'\">\r\n <ng-container *ngTemplateOutlet=\"uploadImageTemplate\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"activeTab === 'Library'\">\r\n <ng-container *ngTemplateOutlet=\"imageLibraryTemplate\"></ng-container>\r\n </ng-container>\r\n\r\n <div class=\"uploadButton d-flex\" *ngIf=\"this.selectedImage.size > 0\">\r\n <button (click)=\"uploadImage()\" [disabled]=\"buttonLoader\">\r\n <span *ngIf=\"buttonLoader\" ><i class=\"fas fa-circle-notch fa-spin\"></i> Loading</span>\r\n <span *ngIf=\"!buttonLoader\" >Upload Image</span></button>\r\n </div>\r\n</section>\r\n\r\n<ng-template #unsplashImagesTemplate>\r\n\r\n <div class=\"input-container d-flex align-items-center\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/314661c1741844234442Vector%20%281%29.png\"\r\n alt=\"search-bar-icon\">\r\n <input type=\"text\" placeholder=\"Search images\" [formControl]=\"searchControl\">\r\n </div>\r\n <cdk-virtual-scroll-viewport [itemSize]=\"imageSize\" [minBufferPx]=\"800\" [maxBufferPx]=\"1600\"\r\n class=\"scroll-container\">\r\n <div class=\"row image-container\">\r\n <div class=\"col-md-4 col-6\" *cdkVirtualFor=\"let image of unsplashImages\">\r\n <img [lazyLoad]=\"image.urls.thumb\" [errorImage]=\"'assets/error.jpg'\" (click)=\"selectUnsplashImage(image)\"\r\n [ngClass]=\"{'selectedImage': selectedImage.has(image.id)}\" alt=\"Image\" class=\"cp\" />\r\n </div>\r\n </div>\r\n </cdk-virtual-scroll-viewport>\r\n\r\n <p *ngIf=\"isLoading\">Loading more results...</p>\r\n\r\n</ng-template>\r\n\r\n<ng-template #uploadImageTemplate>\r\n <div>\r\n <div class=\"image-upload-container\">\r\n <div class=\"upload-img-container d-flex align-items-center justify-content-center\">\r\n <img lazy src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/547500c1744698830343upload-one%20%281%29.png\" alt=\"upload-image\" class=\"upload-img\">\r\n </div>\r\n <div class=\"text-container text-center\">\r\n <div class=\"top-text\">Choose a file or drag and drop it here</div>\r\n <div class=\"middle-text\">JPEG, PNG formats up to 50MB</div>\r\n <div class=\"upload-btn d-flex align-items-center justify-content-center\">\r\n <div class=\"uploads cp\" (click)=\"fileInput.click()\">\r\n Upload\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <input type=\"file\" style=\"display: none\" (change)=\"uploadImageFromSystem($event)\" [multiple]=\"multiple\"\r\n accept=\"image/png, image/jpeg, image/jpg, image/gif\" #fileInput />\r\n\r\n <div class=\"row image-container mt-3 h-30-overflow\">\r\n <ng-container *ngFor=\"let image of selectedImage | keyvalue\">\r\n <div class=\"col-md-4 systemImage\" *ngIf=\"image.value.file\">\r\n <img [src]=\"image.value.assets[0].url\" alt=\"Image\" />\r\n <mat-icon (click)=\"deleteSystemImage(image.key)\">delete</mat-icon>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #imageLibraryTemplate>\r\n <div class=\"row image-container mt-3 h-75-overflow\">\r\n <ng-container *ngIf=\"imageLibrary.length > 0; else emptyScreen\">\r\n <ng-container *ngFor=\"let image of imageLibrary\">\r\n <div class=\"col-md-4 col-6\">\r\n <img [src]=\"image.assets[0].url\" alt=\"Image\" (click)=\"selectFromImageLibrary(image)\" [ngClass]=\"{'selectedImage': selectedImage.has(image.uniqueId)}\"/>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n <ng-template #emptyScreen>\r\n <div class=\"empty-container d-flex justify-content-center align-items-center w-100 flex-column\">\r\n <div class=\"empty-img-container d-flex justify-content-center align-items-center\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/935737c1743411798188image%20%287%29.png\" alt=\"\">\r\n </div>\r\n <div class=\"empty-main-text\">\r\n Uh-oh!\r\n </div>\r\n <div class=\"sub-text-1\">\r\n No images here\r\n </div>\r\n <div class=\"sub-text-2\">\r\n I looked left, right\u2026 even turned around! Still nothing\r\n </div>\r\n </div>\r\n </ng-template>\r\n</ng-template>\r\n", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}section{height:100%;position:relative}img{width:100%;height:200px}.scroll-container{height:calc(66vh + -0px);width:100%;overflow-y:scroll}.selectedImage{position:relative;border-radius:10px;overflow:hidden;border:3px solid hsl(227,52%,36%)}.uploadButton{position:absolute;bottom:0;padding:10px;background:#fff;width:100%;justify-content:end;box-shadow:0 0 4px #00000040}.uploadButton button{background:var(--primary-bg-color);color:#fff;font-weight:600;border:unset;font-size:15px!important;padding:8px;border-radius:8px;width:15%!important}.systemImage{position:relative}.systemImage mat-icon{display:none}.systemImage:hover mat-icon{display:inline;position:absolute;right:15px;top:5px;color:red;cursor:pointer}.f-18{font-size:18px}.header{padding:10px;box-shadow:0 0 4px #00000040}.header .heading{font-size:15px;font-weight:600;line-height:24px}.header mat-icon{color:#2d264b}.tabs{padding:20px 40px}.tabs div{width:22%;cursor:pointer;text-align:center;padding:8px}.selectedTab{background:var(--primary-bg-color);background-clip:text;-webkit-text-fill-color:transparent;font-weight:500;color:#fff;box-shadow:0 0 4px #00000040;border-radius:10px;font-weight:600;position:relative}.selectedTab:before{content:\"\";position:absolute;inset:0;padding:1px;border-radius:10px;background:var(--primary-bg-color);mask:linear-gradient(white 0 0) content-box,linear-gradient(white 0 0);mask-composite:xor;mask-composite:exclude}.input-container{padding:6px 10px;gap:10px;margin:0 40px 20px;box-shadow:0 0 4px #00000040;border-radius:13px}.input-container input{width:90%;border:unset;appearance:unset;outline:unset}.input-container img{width:20px;height:20px}.image-container{margin:0 40px 20px}.image-container div{margin-bottom:20px}.image-container div img{border-radius:13px}.image-upload-container{margin:0 40px;border-radius:17px;padding:15px;border:3px dashed rgba(44,44,44,.6)}.upload-img{width:12%;height:10%}.cp{cursor:pointer}.middle-text{font-size:15px;color:#686868}.top-text{background:var(--primary-bg-color);background-clip:text;-webkit-text-fill-color:transparent;font-size:17px;font-weight:600}.uploads{width:20%;padding:8px;background:var(--primary-bg-color);background-clip:text;-webkit-text-fill-color:transparent;font-size:17px;font-weight:600;position:relative;margin-top:15px}.uploads:before{content:\"\";position:absolute;inset:0;padding:1px;border-radius:10px;background:var(--primary-bg-color);mask:linear-gradient(white 0 0) content-box,linear-gradient(white 0 0);mask-composite:xor;mask-composite:exclude}.h-30-overflow{height:calc(30vh + -0px);overflow-y:scroll}.h-75-overflow{height:calc(75vh + -0px);overflow-y:scroll}.empty-main-text{font-weight:900;font-size:42px;background:var(--primary-bg-color);background-clip:text;-webkit-text-fill-color:transparent}.sub-text-1{font-size:19px;font-weight:600;color:#101010e5}.sub-text-2{font-size:16px;font-weight:600;color:#101010e5}@media screen and (max-width : 475px){.tabs div{width:30%!important}.uploadButton button{width:35%!important}.uploads{width:30%!important}.sub-text-2{text-align:center!important}img{height:150px}}\n"] }]
|
|
1710
1710
|
}], ctorParameters: () => [{ type: ImageUplaodService }, { type: i2$2.MatDialogRef }, { type: undefined, decorators: [{
|
|
1711
1711
|
type: Inject,
|
|
1712
1712
|
args: [MAT_DIALOG_DATA]
|
|
@@ -1759,11 +1759,11 @@ class ImageEditorComponent {
|
|
|
1759
1759
|
this.imageData.url = '';
|
|
1760
1760
|
}
|
|
1761
1761
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ImageEditorComponent, deps: [{ token: EventsService }, { token: i2$2.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2$2.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1762
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ImageEditorComponent, isStandalone: true, selector: "simpo-image-editor", ngImport: i0, template: "<section class=\"main-section\">\r\n <div class=\"header-section d-flex justify-content-between align-items-center\">\r\n <div class=\"head-text\">Image Settings</div>\r\n <mat-icon class=\"d-flex align-items-center justify-content-center f-18 cp\" (click)=\"dialogRef.close()\">close</mat-icon>\r\n </div>\r\n <div>\r\n <!-- <p class=\"heading mb-0\">Image</p> -->\r\n <div class=\"upload-image cp\" *ngIf=\"!imageData.url\" (click)=\"updateImage()\">\r\n <img loading=\"lazy\"\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/
|
|
1762
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ImageEditorComponent, isStandalone: true, selector: "simpo-image-editor", ngImport: i0, template: "<section class=\"main-section\">\r\n <div class=\"header-section d-flex justify-content-between align-items-center\">\r\n <div class=\"head-text\">Image Settings</div>\r\n <mat-icon class=\"d-flex align-items-center justify-content-center f-18 cp\" (click)=\"dialogRef.close()\">close</mat-icon>\r\n </div>\r\n <div>\r\n <!-- <p class=\"heading mb-0\">Image</p> -->\r\n <div class=\"upload-image cp\" *ngIf=\"!imageData.url\" (click)=\"updateImage()\">\r\n <img loading=\"lazy\"\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/547500c1744698830343upload-one%20%281%29.png\" alt=\"\"\r\n >\r\n <p class=\"upload-text mb-0\">Upload a file</p>\r\n <p class=\"upload-text mb-0\">or select an existing one</p>\r\n <span class=\"upload-text\">up to 32MB</span>\r\n </div>\r\n <div class=\"sec d-flex align-items-center\" *ngIf=\"imageData.url\">\r\n <img loading=\"lazy\" [src]=\"imageData.url\" [alt]=\"imageData.altText\">\r\n <div class=\"repalce-image cursor-pointer\" (click)=\"updateImage()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" width=\"24\"\r\n height=\"24\" class=\"icon w-4 h-4\" aria-hidden=\"true\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\r\n d=\"m4 16 4.58579-4.5858c.78104-.781 2.04741-.781 2.82841 0L16 16m-2-2 1.5858-1.5858c.781-.781 2.0474-.781 2.8284 0L20 14m-6-6h.01M6 20h12c1.1046 0 2-.8954 2-2V6c0-1.10457-.8954-2-2-2H6c-1.10457 0-2 .89543-2 2v12c0 1.1046.89543 2 2 2Z\">\r\n </path>\r\n </svg>\r\n </div>\r\n\r\n <div class=\"delete-image cursor-pointer \" (click)=\"deleteImage()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"#ffffff\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\"\r\n class=\"icon h-4 w-4\" aria-hidden=\"true\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\r\n d=\"m19 7-.8673 12.1425C18.0579 20.1891 17.187 21 16.1378 21H7.86224c-1.04928 0-1.92016-.8109-1.99492-1.8575L5 7m5 4v6m4-6v6m1-10V4c0-.55228-.4477-1-1-1h-4c-.55228 0-1 .44772-1 1v3M4 7h16\">\r\n </path>\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"w-100 p-0-10 mb-22\" *ngIf=\"imageData.hasOwnProperty('altText')\">\r\n <p class=\"heading mb-2\">Alt text</p>\r\n <input type=\"text\" placeholder=\"Enter alt text\" class=\"input-field w-100\" [(ngModel)]=\"imageData.altText\">\r\n <div class=\"sub-text\">When the image fails to load, this text will be displayed.</div>\r\n </div>\r\n\r\n <div class=\"image mb-22\" *ngIf=\"imageData.hasOwnProperty('position')\">\r\n <p class=\"heading mb-1\">Image Position</p>\r\n <div class=\"horizontal-action\">\r\n <label>Horizontal</label>\r\n <div class=\"slider d-flex align-items-center justify-content-start cp\">\r\n <input [min]=\"min\" [max]=\"max\" step=\"5\" type=\"range\" [(ngModel)]=\"imageData.position.x\"\r\n (input)=\"horizontalPosition()\" class=\"w-75\">\r\n </div>\r\n </div>\r\n <div class=\"horizontal-action\" style=\"margin-top: 5px;\">\r\n <label>Vertical</label>\r\n <div class=\"slider d-flex align-items-center justify-content-start cp\">\r\n <input [min]=\"min\" [max]=\"max\" step=\"5\" type=\"range\" [(ngModel)]=\"imageData.position.y\"\r\n (input)=\"horizontalPosition()\" class=\"w-75\">\r\n </div>\r\n </div>\r\n </div>\r\n</section>\r\n", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}.heading{color:#000;font-size:17px;font-weight:600}.upload-text{background:var( --primary-bg-color);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:500}.upload-image{border:3px dashed rgba(44,44,44,.6);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2rem;margin:10px 10px 22px;border-radius:20px;box-shadow:#0000000d 0 1px 2px}.upload-image img{margin-bottom:8px;height:40px}.mb-0{margin-bottom:0!important}.desc{color:#fafafa;font-size:15px}.input-field{font-size:14px;outline:none;border:unset;border-radius:5px;padding:10px;color:#090909e6;background:#fafafa}.horizontal-action{display:flex;justify-content:space-between;align-items:center}.horizontal-action label{width:25%;font-size:14px;font-weight:400!important}.main-section{display:flex;flex-direction:column}.image{display:flex;flex-direction:column;gap:5px;padding:0 10px}.slider{width:70%}.cp{cursor:pointer}.sec{padding:10px 10px 22px;position:relative}.sec img{width:100%;height:200px;border-radius:20px}.delete-image{background-color:#d92d20;width:30px;height:30px;border-radius:6px;display:flex;justify-content:center;align-items:center;position:absolute;top:20px;right:20px}.repalce-image{display:flex;align-items:center;background:#fff;padding:2px;border-radius:6px;position:absolute;bottom:30px;left:20px}.f-18{font-size:18px}.header-section{padding:10px;box-shadow:0 0 4px #00000040}.header-section .head-text{font-weight:600;font-size:15px;color:#000}.header-section mat-icon{color:#2d264b}.p-0-10{padding:0 10px}.sub-text{font-size:13px;font-weight:400;line-height:24px;color:#09090980}.w-75{width:75%}.mb-22{margin-bottom:22px}input[type=range]{-webkit-appearance:none;width:100%;height:8px;border-radius:20px;overflow:hidden;background:#fafafa}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:8px;width:10px;background:var(--primary-bg-color);box-shadow:-50rem 0 5rem 20rem #250d5e,-40rem 0 5rem 30rem #0bf,-30rem 0 2rem 25rem #250d5e,-25.5rem 0 0 25rem #0bf;border-radius:50%;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSliderModule }] }); }
|
|
1763
1763
|
}
|
|
1764
1764
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ImageEditorComponent, decorators: [{
|
|
1765
1765
|
type: Component,
|
|
1766
|
-
args: [{ selector: 'simpo-image-editor', standalone: true, imports: [CommonModule, FormsModule, MatIconModule, MatSliderModule], template: "<section class=\"main-section\">\r\n <div class=\"header-section d-flex justify-content-between align-items-center\">\r\n <div class=\"head-text\">Image Settings</div>\r\n <mat-icon class=\"d-flex align-items-center justify-content-center f-18 cp\" (click)=\"dialogRef.close()\">close</mat-icon>\r\n </div>\r\n <div>\r\n <!-- <p class=\"heading mb-0\">Image</p> -->\r\n <div class=\"upload-image cp\" *ngIf=\"!imageData.url\" (click)=\"updateImage()\">\r\n <img loading=\"lazy\"\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/
|
|
1766
|
+
args: [{ selector: 'simpo-image-editor', standalone: true, imports: [CommonModule, FormsModule, MatIconModule, MatSliderModule], template: "<section class=\"main-section\">\r\n <div class=\"header-section d-flex justify-content-between align-items-center\">\r\n <div class=\"head-text\">Image Settings</div>\r\n <mat-icon class=\"d-flex align-items-center justify-content-center f-18 cp\" (click)=\"dialogRef.close()\">close</mat-icon>\r\n </div>\r\n <div>\r\n <!-- <p class=\"heading mb-0\">Image</p> -->\r\n <div class=\"upload-image cp\" *ngIf=\"!imageData.url\" (click)=\"updateImage()\">\r\n <img loading=\"lazy\"\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/547500c1744698830343upload-one%20%281%29.png\" alt=\"\"\r\n >\r\n <p class=\"upload-text mb-0\">Upload a file</p>\r\n <p class=\"upload-text mb-0\">or select an existing one</p>\r\n <span class=\"upload-text\">up to 32MB</span>\r\n </div>\r\n <div class=\"sec d-flex align-items-center\" *ngIf=\"imageData.url\">\r\n <img loading=\"lazy\" [src]=\"imageData.url\" [alt]=\"imageData.altText\">\r\n <div class=\"repalce-image cursor-pointer\" (click)=\"updateImage()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" width=\"24\"\r\n height=\"24\" class=\"icon w-4 h-4\" aria-hidden=\"true\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\r\n d=\"m4 16 4.58579-4.5858c.78104-.781 2.04741-.781 2.82841 0L16 16m-2-2 1.5858-1.5858c.781-.781 2.0474-.781 2.8284 0L20 14m-6-6h.01M6 20h12c1.1046 0 2-.8954 2-2V6c0-1.10457-.8954-2-2-2H6c-1.10457 0-2 .89543-2 2v12c0 1.1046.89543 2 2 2Z\">\r\n </path>\r\n </svg>\r\n </div>\r\n\r\n <div class=\"delete-image cursor-pointer \" (click)=\"deleteImage()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"#ffffff\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\"\r\n class=\"icon h-4 w-4\" aria-hidden=\"true\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\r\n d=\"m19 7-.8673 12.1425C18.0579 20.1891 17.187 21 16.1378 21H7.86224c-1.04928 0-1.92016-.8109-1.99492-1.8575L5 7m5 4v6m4-6v6m1-10V4c0-.55228-.4477-1-1-1h-4c-.55228 0-1 .44772-1 1v3M4 7h16\">\r\n </path>\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"w-100 p-0-10 mb-22\" *ngIf=\"imageData.hasOwnProperty('altText')\">\r\n <p class=\"heading mb-2\">Alt text</p>\r\n <input type=\"text\" placeholder=\"Enter alt text\" class=\"input-field w-100\" [(ngModel)]=\"imageData.altText\">\r\n <div class=\"sub-text\">When the image fails to load, this text will be displayed.</div>\r\n </div>\r\n\r\n <div class=\"image mb-22\" *ngIf=\"imageData.hasOwnProperty('position')\">\r\n <p class=\"heading mb-1\">Image Position</p>\r\n <div class=\"horizontal-action\">\r\n <label>Horizontal</label>\r\n <div class=\"slider d-flex align-items-center justify-content-start cp\">\r\n <input [min]=\"min\" [max]=\"max\" step=\"5\" type=\"range\" [(ngModel)]=\"imageData.position.x\"\r\n (input)=\"horizontalPosition()\" class=\"w-75\">\r\n </div>\r\n </div>\r\n <div class=\"horizontal-action\" style=\"margin-top: 5px;\">\r\n <label>Vertical</label>\r\n <div class=\"slider d-flex align-items-center justify-content-start cp\">\r\n <input [min]=\"min\" [max]=\"max\" step=\"5\" type=\"range\" [(ngModel)]=\"imageData.position.y\"\r\n (input)=\"horizontalPosition()\" class=\"w-75\">\r\n </div>\r\n </div>\r\n </div>\r\n</section>\r\n", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}.heading{color:#000;font-size:17px;font-weight:600}.upload-text{background:var( --primary-bg-color);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:500}.upload-image{border:3px dashed rgba(44,44,44,.6);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2rem;margin:10px 10px 22px;border-radius:20px;box-shadow:#0000000d 0 1px 2px}.upload-image img{margin-bottom:8px;height:40px}.mb-0{margin-bottom:0!important}.desc{color:#fafafa;font-size:15px}.input-field{font-size:14px;outline:none;border:unset;border-radius:5px;padding:10px;color:#090909e6;background:#fafafa}.horizontal-action{display:flex;justify-content:space-between;align-items:center}.horizontal-action label{width:25%;font-size:14px;font-weight:400!important}.main-section{display:flex;flex-direction:column}.image{display:flex;flex-direction:column;gap:5px;padding:0 10px}.slider{width:70%}.cp{cursor:pointer}.sec{padding:10px 10px 22px;position:relative}.sec img{width:100%;height:200px;border-radius:20px}.delete-image{background-color:#d92d20;width:30px;height:30px;border-radius:6px;display:flex;justify-content:center;align-items:center;position:absolute;top:20px;right:20px}.repalce-image{display:flex;align-items:center;background:#fff;padding:2px;border-radius:6px;position:absolute;bottom:30px;left:20px}.f-18{font-size:18px}.header-section{padding:10px;box-shadow:0 0 4px #00000040}.header-section .head-text{font-weight:600;font-size:15px;color:#000}.header-section mat-icon{color:#2d264b}.p-0-10{padding:0 10px}.sub-text{font-size:13px;font-weight:400;line-height:24px;color:#09090980}.w-75{width:75%}.mb-22{margin-bottom:22px}input[type=range]{-webkit-appearance:none;width:100%;height:8px;border-radius:20px;overflow:hidden;background:#fafafa}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:8px;width:10px;background:var(--primary-bg-color);box-shadow:-50rem 0 5rem 20rem #250d5e,-40rem 0 5rem 30rem #0bf,-30rem 0 2rem 25rem #250d5e,-25.5rem 0 0 25rem #0bf;border-radius:50%;cursor:pointer}\n"] }]
|
|
1767
1767
|
}], ctorParameters: () => [{ type: EventsService }, { type: i2$2.MatDialogRef }, { type: undefined, decorators: [{
|
|
1768
1768
|
type: Inject,
|
|
1769
1769
|
args: [MAT_DIALOG_DATA]
|
|
@@ -1861,7 +1861,7 @@ class BelowImageCardComponent {
|
|
|
1861
1861
|
return { ...this.styles.image };
|
|
1862
1862
|
}
|
|
1863
1863
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: BelowImageCardComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1864
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: BelowImageCardComponent, isStandalone: true, selector: "simpo-below-image-card", inputs: { data: "data", styles: "styles", content: "content", componentId: "componentId", button: "button", edit: "edit" }, ngImport: i0, template: "<div (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\" [ngClass]=\"{'box-shadow' : content.display.showCard}\">\r\n <!-- <div [simpoImageContainerDirective]=\"getAspectRatio\" class=\"w-100\"> -->\r\n <img loading=\"lazy\" [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\" [attr.simpoObjectPosition]=\"styles?.image?.fit !== 'contain' ? data.image?.position : null\"\r\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100 h-100\" [class]=\"componentId+data.image.id\" *ngIf=\"content.display.showImage\"\r\n loading=\"lazy\" [appImageEditor]=\"
|
|
1864
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: BelowImageCardComponent, isStandalone: true, selector: "simpo-below-image-card", inputs: { data: "data", styles: "styles", content: "content", componentId: "componentId", button: "button", edit: "edit" }, ngImport: i0, template: "<div (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\" [ngClass]=\"{'box-shadow' : content.display.showCard}\">\r\n <!-- <div [simpoImageContainerDirective]=\"getAspectRatio\" class=\"w-100\"> -->\r\n <img loading=\"lazy\" [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\" [attr.simpoObjectPosition]=\"styles?.image?.fit !== 'contain' ? data.image?.position : null\"\r\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100 h-100\" [class]=\"componentId+data.image.id\" *ngIf=\"content.display.showImage\"\r\n loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"data.image\" [sectionId]=\"data?.id\">\r\n\r\n <img loading=\"lazy\" [src]=\"data.icon.url\" *ngIf=\"content.display.showIcon\" class=\"logo-img\" [appImageEditor]=\"true\" [imageData]=\"data.image\" [sectionId]=\"data?.id\">\r\n <!-- </div> -->\r\n <div class=\"ptb-1 content-side\">\r\n <div class=\"heading-medium mb-1 fw-600\" *ngIf=\"content.display.showHeading\">\r\n <simpo-text-editor [(value)]=\"data.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"body-desc\" *ngIf=\"content.display.showContent\">\r\n <simpo-text-editor [(value)]=\"data.inputText[01].value \" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\r\n <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [buttonId]=\"button ? button.id : ''\" [sectionId]=\"componentId\"\r\n [color]=\"styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".w-100{width:100%}.ptb-1{padding-top:1.5rem;padding-bottom:1.5rem}.mb-1{margin-bottom:1rem!important}.box-shadow{background:#fff;border-radius:10px;box-shadow:0 4px 8px #0003,0 0 #00000030;padding:10px;color:#000!important}.logo-img{width:100px;height:100px;margin-top:1rem}.fw-600{font-weight:600}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "img[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId"] }] }); }
|
|
1865
1865
|
}
|
|
1866
1866
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: BelowImageCardComponent, decorators: [{
|
|
1867
1867
|
type: Component,
|
|
@@ -1874,7 +1874,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
1874
1874
|
ImageContainerDirective,
|
|
1875
1875
|
TextEditorComponent,
|
|
1876
1876
|
ImageEditorDirective
|
|
1877
|
-
], template: "<div (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\" [ngClass]=\"{'box-shadow' : content.display.showCard}\">\r\n <!-- <div [simpoImageContainerDirective]=\"getAspectRatio\" class=\"w-100\"> -->\r\n <img loading=\"lazy\" [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\" [attr.simpoObjectPosition]=\"styles?.image?.fit !== 'contain' ? data.image?.position : null\"\r\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100 h-100\" [class]=\"componentId+data.image.id\" *ngIf=\"content.display.showImage\"\r\n loading=\"lazy\" [appImageEditor]=\"
|
|
1877
|
+
], template: "<div (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\" [ngClass]=\"{'box-shadow' : content.display.showCard}\">\r\n <!-- <div [simpoImageContainerDirective]=\"getAspectRatio\" class=\"w-100\"> -->\r\n <img loading=\"lazy\" [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\" [attr.simpoObjectPosition]=\"styles?.image?.fit !== 'contain' ? data.image?.position : null\"\r\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100 h-100\" [class]=\"componentId+data.image.id\" *ngIf=\"content.display.showImage\"\r\n loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"data.image\" [sectionId]=\"data?.id\">\r\n\r\n <img loading=\"lazy\" [src]=\"data.icon.url\" *ngIf=\"content.display.showIcon\" class=\"logo-img\" [appImageEditor]=\"true\" [imageData]=\"data.image\" [sectionId]=\"data?.id\">\r\n <!-- </div> -->\r\n <div class=\"ptb-1 content-side\">\r\n <div class=\"heading-medium mb-1 fw-600\" *ngIf=\"content.display.showHeading\">\r\n <simpo-text-editor [(value)]=\"data.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"body-desc\" *ngIf=\"content.display.showContent\">\r\n <simpo-text-editor [(value)]=\"data.inputText[01].value \" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\r\n <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [buttonId]=\"button ? button.id : ''\" [sectionId]=\"componentId\"\r\n [color]=\"styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".w-100{width:100%}.ptb-1{padding-top:1.5rem;padding-bottom:1.5rem}.mb-1{margin-bottom:1rem!important}.box-shadow{background:#fff;border-radius:10px;box-shadow:0 4px 8px #0003,0 0 #00000030;padding:10px;color:#000!important}.logo-img{width:100px;height:100px;margin-top:1rem}.fw-600{font-weight:600}\n"] }]
|
|
1878
1878
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
1879
1879
|
type: Input
|
|
1880
1880
|
}], styles: [{
|
|
@@ -2295,11 +2295,11 @@ class AddSectionComponent {
|
|
|
2295
2295
|
this.dummy2 = {};
|
|
2296
2296
|
}
|
|
2297
2297
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: AddSectionComponent, deps: [{ token: i2$2.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i1.HttpClient }, { token: EventsService }, { token: ElementServiceService }, { token: ElementServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2298
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: AddSectionComponent, isStandalone: true, selector: "simpo-add-section", ngImport: i0, template: "<section class=\"main-container\">\r\n <div class=\"header-container d-flex align-items-center justify-content-between\">\r\n <div>Select Template</div>\r\n <mat-icon class=\"d-flex align-items-center justify-content-center f-18 cp\" (click)=\"dialog.close()\">\r\n close\r\n </mat-icon>\r\n </div>\r\n <div class=\"parent-container\">\r\n <div class=\"search-bar-container\">\r\n <div class=\"search-bar d-flex gap-10\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/314661c1741844234442Vector%20%281%29.png\"\r\n alt=\"search-bar-icon\">\r\n <input type=\"text\" placeholder=\"Search for Sections\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchSections()\">\r\n </div>\r\n </div>\r\n <div class=\"tab-container d-flex justify-content-around align-items-center\">\r\n <ng-container *ngFor=\"let ele of tabs\">\r\n <div class=\"tabs\" (click)=\"selectedTab = ele.value\" [class.active-tab]=\"ele.value == selectedTab\">\r\n {{ele.viewValue}}\r\n <ng-container *ngIf=\"ele.value == 'PRO' && ele.value != selectedTab\">\r\n <img class=\"w-30\"\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/887493c1742273970151Frame%201244831740.png\"\r\n alt=\"pro-icon\">\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <ng-container *ngIf=\"!isSearch;else emptyScreen\">\r\n <div class=\"categories-container d-flex\">\r\n <div class=\"categories-sidepanel\" *ngIf=\"!loader\">\r\n <ng-container *ngFor=\"let ele of getObjectKeys(sections)\">\r\n <div class=\"side-section d-flex justify-content-center align-items-center flex-column\"\r\n (click)=\"selectSection(ele)\"\r\n [class.active-section]=\"selectedSection == sections[ele]\">\r\n <div class=\"image-container\">\r\n <ng-container *ngIf=\"selectedSection == sections[ele]\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/954383c1741850392802Group%201707481879.png\"\r\n alt=\"icon text\">\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedSection != sections[ele]\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/846145c1741850574864Icon%20%281%29.png\"\r\n alt=\"icon text\">\r\n </ng-container>\r\n </div>\r\n <div class=\"section-text\">\r\n {{ele}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"categories-render-section\" *ngIf=\" !loader && !tabShiftLoader\">\r\n <div class=\"categories-head\">\r\n {{selectedSectionName}}\r\n </div>\r\n <div class=\"sub-text\">\r\n Select a section to add to your page\r\n </div>\r\n <div class=\"sections-container\">\r\n <ng-container *ngFor=\"let ele of selectedSection\">\r\n <div class=\"section\">\r\n <div class=\"section-header\">{{ele.sectionName}}</div>\r\n <div class=\"section-img-container cp\"\r\n (click)=\"addNewSection(ele.componentId,ele.sectionType,$event)\">\r\n <ng-container *ngIf=\"ele?.image; else noImage\">\r\n <img [src]=\"ele?.image\" alt=\"section image\">\r\n </ng-container>\r\n <ng-template #noImage>\r\n <img src=\"https://img.freepik.com/premium-vector/default-image-icon-vector-missing-picture-page-website-design-mobile-app-no-photo-available_87543-11093.jpg\"\r\n alt=\"section image\" class=\"h-30\">\r\n </ng-template>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"categories-sidepanel\" *ngIf=\"loader\">\r\n <ng-container *ngFor=\"let ele of [1,1,1,1,1,1,1,1,1]\">\r\n <div class=\"d-flex justify-content-center align-items-center flex-column\">\r\n <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n height: '8vh',\r\n width: '65%',\r\n 'border-radius': '13px',\r\n 'margin-bottom' : '10px',\r\n }\" class=\"d-flex justify-content-center w-100\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"categories-render-section\" *ngIf=\"loader || tabShiftLoader\">\r\n <div class=\"categories-head\">\r\n <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n width: '20%',\r\n height : '3vh',\r\n 'border-radius': '5px',\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n <div class=\"sub-text\">\r\n <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n width: '60%',\r\n height : '2vh',\r\n 'border-radius': '5px',\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n <div class=\"sections-container\">\r\n <ng-container *ngFor=\"let ele of [1,1,1,1]\">\r\n <div class=\"section\">\r\n <div> <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n width: '25%',\r\n height : '2vh',\r\n 'border-radius': '5px',\r\n }\">\r\n </ngx-skeleton-loader></div>\r\n <div>\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '100%',\r\n height : '25vh',\r\n 'border-radius': '5px',\r\n 'margin':'2px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-template #emptyScreen>\r\n <div class=\"empty-div d-flex align-items-center justify-content-center flex-column\">\r\n <div class=\"image-container-1\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/377076c1743154807683image%20%286%29.png\" alt=\"empty-img\" class=\"empty-img \">\r\n </div>\r\n <div class=\"oops-text\">\r\n Oops! \r\n </div>\r\n <div class=\"oops-sub-text\">\r\n <div class=\"oops-sub-text-1 text-center\">I sniffed everywhere, but I couldn't find what you're looking for</div>\r\n <div class=\"oops-sub-text-2 text-center\">\r\n Maybe try a different search? \r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n</section>", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}.header-container{padding:12px 15px;font-size:15px;line-height:24px;font-weight:600;color:#000;box-shadow:0 0 4px #00000040;margin-bottom:2px}.search-bar{box-shadow:0 0 4px #00000040;padding:8px;border-radius:8px}.search-bar img{width:19px;height:18px}.search-bar input{width:100%;outline:none;border:unset;font-size:13px;font-weight:400;background:#fafafa}.gap-10{gap:10px!important}.tab-container{padding:8px;margin:0 15px;gap:3%;background:#fff;border-radius:13px}.tabs{font-size:14px;font-weight:500;line-height:24px;color:#2c2c2c99;width:30%;cursor:pointer;padding:8px 0;text-align:center}.active-tab{color:#fff!important;background:var(--primary-bg-color);box-shadow:0 0 4px #00000040;border-radius:8px;transition:opacity .3s ease-in-out,transform .3s ease-in-out;opacity:1;transform:translateY(0)}.categories-sidepanel{width:15%;padding:10px 5px;margin:15px 0;border-radius:10px;height:calc(70vh + -0px);overflow-y:scroll;background:#fff}.side-section{padding:6px 10px;border-radius:8px;margin-bottom:10px;cursor:pointer}.side-section img{width:16px}.side-section .image-container{background:#f9fafb;padding:5px 8px;border-radius:5px}.side-section .section-text{font-size:12px;font-weight:500;line-height:24px;text-align:center;color:#a1a1a1}.active-section{background:var(--primary-bg-color)!important;box-shadow:0 0 4px #00000040}.active-section .section-text{color:#fff!important}.active-section .image-container{background:unset!important;padding:unset!important;border-radius:unset!important}.categories-render-section{width:85%;padding:15px;margin:15px 10px;border-radius:10px;height:calc(70vh + -0px);overflow-y:scroll;background:#fff}.categories-head{font-size:20px;font-weight:600;line-height:24px;color:#434343}.sub-text{font-size:13px;font-weight:500;line-height:24px;color:#a1a1a1;margin-bottom:10px}.section{margin-bottom:10px}.section-header{font-size:14px;font-weight:500;line-height:24px;color:#a1a1a1;margin-bottom:10px}.section-img-container{padding:18px;border-radius:8px;background:#f9fafb}.section-img-container img{width:100%}.search-bar-container{padding:15px}.parent-container{background:#fafafa}.f-18{font-size:18px;cursor:pointer}.w-30{width:30px!important}.h-30{height:30vh}.cp{cursor:pointer}.empty-div{height:calc(70vh + -0px);background:#fff;margin:18px;border-radius:13px}.empty-img{height:30vh}.oops-text{font-weight:900;font-size:42px;background:var(--primary-bg-color);background-clip:text;-webkit-text-fill-color:transparent}.oops-sub-text-1{font-size:17px;font-weight:600;color:#101010e5}.oops-sub-text-2{font-size:14px;font-weight:600;color:#101010e5}\n"], dependencies: [{ 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"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
|
2298
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: AddSectionComponent, isStandalone: true, selector: "simpo-add-section", ngImport: i0, template: "<section class=\"main-container\">\r\n <div class=\"header-container d-flex align-items-center justify-content-between\">\r\n <div>Select Template</div>\r\n <mat-icon class=\"d-flex align-items-center justify-content-center f-18 cp\" (click)=\"dialog.close()\">\r\n close\r\n </mat-icon>\r\n </div>\r\n <div class=\"parent-container\">\r\n <div class=\"search-bar-container\">\r\n <div class=\"search-bar d-flex gap-10\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/314661c1741844234442Vector%20%281%29.png\"\r\n alt=\"search-bar-icon\">\r\n <input type=\"text\" placeholder=\"Search for Sections\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchSections()\">\r\n </div>\r\n </div>\r\n <div class=\"tab-container d-flex justify-content-around align-items-center\">\r\n <ng-container *ngFor=\"let ele of tabs\">\r\n <div class=\"tabs\" (click)=\"selectedTab = ele.value\" [class.active-tab]=\"ele.value == selectedTab\">\r\n {{ele.viewValue}}\r\n <ng-container *ngIf=\"ele.value == 'PRO' && ele.value != selectedTab\">\r\n <img class=\"w-30\"\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/468281c1744699664858Frame%201244831740%20%281%29.png\"\r\n alt=\"pro-icon\">\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <ng-container *ngIf=\"!isSearch;else emptyScreen\">\r\n <div class=\"categories-container d-flex\">\r\n <div class=\"categories-sidepanel\" *ngIf=\"!loader\">\r\n <ng-container *ngFor=\"let ele of getObjectKeys(sections)\">\r\n <div class=\"side-section d-flex justify-content-center align-items-center flex-column\"\r\n (click)=\"selectSection(ele)\"\r\n [class.active-section]=\"selectedSection == sections[ele]\">\r\n <div class=\"image-container\">\r\n <ng-container *ngIf=\"selectedSection == sections[ele]\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/954383c1741850392802Group%201707481879.png\"\r\n alt=\"icon text\">\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedSection != sections[ele]\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/846145c1741850574864Icon%20%281%29.png\"\r\n alt=\"icon text\">\r\n </ng-container>\r\n </div>\r\n <div class=\"section-text\">\r\n {{ele}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"categories-render-section\" *ngIf=\" !loader && !tabShiftLoader\">\r\n <div class=\"categories-head\">\r\n {{selectedSectionName}}\r\n </div>\r\n <div class=\"sub-text\">\r\n Select a section to add to your page\r\n </div>\r\n <div class=\"sections-container\">\r\n <ng-container *ngFor=\"let ele of selectedSection\">\r\n <div class=\"section\">\r\n <div class=\"section-header\">{{ele.sectionName}}</div>\r\n <div class=\"section-img-container cp\"\r\n (click)=\"addNewSection(ele.componentId,ele.sectionType,$event)\">\r\n <ng-container *ngIf=\"ele?.image; else noImage\">\r\n <img [src]=\"ele?.image\" alt=\"section image\">\r\n </ng-container>\r\n <ng-template #noImage>\r\n <img src=\"https://img.freepik.com/premium-vector/default-image-icon-vector-missing-picture-page-website-design-mobile-app-no-photo-available_87543-11093.jpg\"\r\n alt=\"section image\" class=\"h-30\">\r\n </ng-template>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"categories-sidepanel\" *ngIf=\"loader\">\r\n <ng-container *ngFor=\"let ele of [1,1,1,1,1,1,1,1,1]\">\r\n <div class=\"d-flex justify-content-center align-items-center flex-column\">\r\n <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n height: '8vh',\r\n width: '65%',\r\n 'border-radius': '13px',\r\n 'margin-bottom' : '10px',\r\n }\" class=\"d-flex justify-content-center w-100\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"categories-render-section\" *ngIf=\"loader || tabShiftLoader\">\r\n <div class=\"categories-head\">\r\n <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n width: '20%',\r\n height : '3vh',\r\n 'border-radius': '5px',\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n <div class=\"sub-text\">\r\n <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n width: '60%',\r\n height : '2vh',\r\n 'border-radius': '5px',\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n <div class=\"sections-container\">\r\n <ng-container *ngFor=\"let ele of [1,1,1,1]\">\r\n <div class=\"section\">\r\n <div> <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n width: '25%',\r\n height : '2vh',\r\n 'border-radius': '5px',\r\n }\">\r\n </ngx-skeleton-loader></div>\r\n <div>\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '100%',\r\n height : '25vh',\r\n 'border-radius': '5px',\r\n 'margin':'2px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-template #emptyScreen>\r\n <div class=\"empty-div d-flex align-items-center justify-content-center flex-column\">\r\n <div class=\"image-container-1\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/377076c1743154807683image%20%286%29.png\" alt=\"empty-img\" class=\"empty-img \">\r\n </div>\r\n <div class=\"oops-text\">\r\n Oops! \r\n </div>\r\n <div class=\"oops-sub-text\">\r\n <div class=\"oops-sub-text-1 text-center\">I sniffed everywhere, but I couldn't find what you're looking for</div>\r\n <div class=\"oops-sub-text-2 text-center\">\r\n Maybe try a different search? \r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n</section>", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}.header-container{padding:12px 15px;font-size:15px;line-height:24px;font-weight:600;color:#000;box-shadow:0 0 4px #00000040;margin-bottom:2px}.search-bar{box-shadow:0 0 4px #00000040;padding:8px;border-radius:8px}.search-bar img{width:19px;height:18px}.search-bar input{width:100%;outline:none;border:unset;font-size:13px;font-weight:400;background:#fafafa}.gap-10{gap:10px!important}.tab-container{padding:8px;margin:0 15px;gap:3%;background:#fff;border-radius:13px}.tabs{font-size:14px;font-weight:500;line-height:24px;color:#2c2c2c99;width:30%;cursor:pointer;padding:8px 0;text-align:center}.active-tab{color:#fff!important;background:var(--primary-bg-color);box-shadow:0 0 4px #00000040;border-radius:8px;transition:opacity .3s ease-in-out,transform .3s ease-in-out;opacity:1;transform:translateY(0)}.categories-sidepanel{width:15%;padding:10px 5px;margin:15px 0;border-radius:10px;height:calc(70vh + -0px);overflow-y:scroll;background:#fff}.side-section{padding:6px 10px;border-radius:8px;margin-bottom:10px;cursor:pointer}.side-section img{width:16px}.side-section .image-container{background:#f9fafb;padding:5px 8px;border-radius:5px}.side-section .section-text{font-size:12px;font-weight:500;line-height:24px;text-align:center;color:#a1a1a1}.active-section{background:var(--primary-bg-color)!important;box-shadow:0 0 4px #00000040}.active-section .section-text{color:#fff!important}.active-section .image-container{background:unset!important;padding:unset!important;border-radius:unset!important}.categories-render-section{width:85%;padding:15px;margin:15px 10px;border-radius:10px;height:calc(70vh + -0px);overflow-y:scroll;background:#fff}.categories-head{font-size:20px;font-weight:600;line-height:24px;color:#434343}.sub-text{font-size:13px;font-weight:500;line-height:24px;color:#a1a1a1;margin-bottom:10px}.section{margin-bottom:10px}.section-header{font-size:14px;font-weight:500;line-height:24px;color:#a1a1a1;margin-bottom:10px}.section-img-container{padding:18px;border-radius:8px;background:#f9fafb}.section-img-container img{width:100%}.search-bar-container{padding:15px}.parent-container{background:#fafafa}.f-18{font-size:18px;cursor:pointer}.w-30{width:30px!important}.h-30{height:30vh}.cp{cursor:pointer}.empty-div{height:calc(70vh + -0px);background:#fff;margin:18px;border-radius:13px}.empty-img{height:30vh}.oops-text{font-weight:900;font-size:42px;background:var(--primary-bg-color);background-clip:text;-webkit-text-fill-color:transparent}.oops-sub-text-1{font-size:17px;font-weight:600;color:#101010e5}.oops-sub-text-2{font-size:14px;font-weight:600;color:#101010e5}\n"], dependencies: [{ 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"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
|
2299
2299
|
}
|
|
2300
2300
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: AddSectionComponent, decorators: [{
|
|
2301
2301
|
type: Component,
|
|
2302
|
-
args: [{ selector: 'simpo-add-section', standalone: true, imports: [CommonModule, MatIconModule, NgxSkeletonLoaderModule, FormsModule], template: "<section class=\"main-container\">\r\n <div class=\"header-container d-flex align-items-center justify-content-between\">\r\n <div>Select Template</div>\r\n <mat-icon class=\"d-flex align-items-center justify-content-center f-18 cp\" (click)=\"dialog.close()\">\r\n close\r\n </mat-icon>\r\n </div>\r\n <div class=\"parent-container\">\r\n <div class=\"search-bar-container\">\r\n <div class=\"search-bar d-flex gap-10\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/314661c1741844234442Vector%20%281%29.png\"\r\n alt=\"search-bar-icon\">\r\n <input type=\"text\" placeholder=\"Search for Sections\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchSections()\">\r\n </div>\r\n </div>\r\n <div class=\"tab-container d-flex justify-content-around align-items-center\">\r\n <ng-container *ngFor=\"let ele of tabs\">\r\n <div class=\"tabs\" (click)=\"selectedTab = ele.value\" [class.active-tab]=\"ele.value == selectedTab\">\r\n {{ele.viewValue}}\r\n <ng-container *ngIf=\"ele.value == 'PRO' && ele.value != selectedTab\">\r\n <img class=\"w-30\"\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/887493c1742273970151Frame%201244831740.png\"\r\n alt=\"pro-icon\">\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <ng-container *ngIf=\"!isSearch;else emptyScreen\">\r\n <div class=\"categories-container d-flex\">\r\n <div class=\"categories-sidepanel\" *ngIf=\"!loader\">\r\n <ng-container *ngFor=\"let ele of getObjectKeys(sections)\">\r\n <div class=\"side-section d-flex justify-content-center align-items-center flex-column\"\r\n (click)=\"selectSection(ele)\"\r\n [class.active-section]=\"selectedSection == sections[ele]\">\r\n <div class=\"image-container\">\r\n <ng-container *ngIf=\"selectedSection == sections[ele]\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/954383c1741850392802Group%201707481879.png\"\r\n alt=\"icon text\">\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedSection != sections[ele]\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/846145c1741850574864Icon%20%281%29.png\"\r\n alt=\"icon text\">\r\n </ng-container>\r\n </div>\r\n <div class=\"section-text\">\r\n {{ele}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"categories-render-section\" *ngIf=\" !loader && !tabShiftLoader\">\r\n <div class=\"categories-head\">\r\n {{selectedSectionName}}\r\n </div>\r\n <div class=\"sub-text\">\r\n Select a section to add to your page\r\n </div>\r\n <div class=\"sections-container\">\r\n <ng-container *ngFor=\"let ele of selectedSection\">\r\n <div class=\"section\">\r\n <div class=\"section-header\">{{ele.sectionName}}</div>\r\n <div class=\"section-img-container cp\"\r\n (click)=\"addNewSection(ele.componentId,ele.sectionType,$event)\">\r\n <ng-container *ngIf=\"ele?.image; else noImage\">\r\n <img [src]=\"ele?.image\" alt=\"section image\">\r\n </ng-container>\r\n <ng-template #noImage>\r\n <img src=\"https://img.freepik.com/premium-vector/default-image-icon-vector-missing-picture-page-website-design-mobile-app-no-photo-available_87543-11093.jpg\"\r\n alt=\"section image\" class=\"h-30\">\r\n </ng-template>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"categories-sidepanel\" *ngIf=\"loader\">\r\n <ng-container *ngFor=\"let ele of [1,1,1,1,1,1,1,1,1]\">\r\n <div class=\"d-flex justify-content-center align-items-center flex-column\">\r\n <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n height: '8vh',\r\n width: '65%',\r\n 'border-radius': '13px',\r\n 'margin-bottom' : '10px',\r\n }\" class=\"d-flex justify-content-center w-100\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"categories-render-section\" *ngIf=\"loader || tabShiftLoader\">\r\n <div class=\"categories-head\">\r\n <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n width: '20%',\r\n height : '3vh',\r\n 'border-radius': '5px',\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n <div class=\"sub-text\">\r\n <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n width: '60%',\r\n height : '2vh',\r\n 'border-radius': '5px',\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n <div class=\"sections-container\">\r\n <ng-container *ngFor=\"let ele of [1,1,1,1]\">\r\n <div class=\"section\">\r\n <div> <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n width: '25%',\r\n height : '2vh',\r\n 'border-radius': '5px',\r\n }\">\r\n </ngx-skeleton-loader></div>\r\n <div>\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '100%',\r\n height : '25vh',\r\n 'border-radius': '5px',\r\n 'margin':'2px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-template #emptyScreen>\r\n <div class=\"empty-div d-flex align-items-center justify-content-center flex-column\">\r\n <div class=\"image-container-1\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/377076c1743154807683image%20%286%29.png\" alt=\"empty-img\" class=\"empty-img \">\r\n </div>\r\n <div class=\"oops-text\">\r\n Oops! \r\n </div>\r\n <div class=\"oops-sub-text\">\r\n <div class=\"oops-sub-text-1 text-center\">I sniffed everywhere, but I couldn't find what you're looking for</div>\r\n <div class=\"oops-sub-text-2 text-center\">\r\n Maybe try a different search? \r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n</section>", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}.header-container{padding:12px 15px;font-size:15px;line-height:24px;font-weight:600;color:#000;box-shadow:0 0 4px #00000040;margin-bottom:2px}.search-bar{box-shadow:0 0 4px #00000040;padding:8px;border-radius:8px}.search-bar img{width:19px;height:18px}.search-bar input{width:100%;outline:none;border:unset;font-size:13px;font-weight:400;background:#fafafa}.gap-10{gap:10px!important}.tab-container{padding:8px;margin:0 15px;gap:3%;background:#fff;border-radius:13px}.tabs{font-size:14px;font-weight:500;line-height:24px;color:#2c2c2c99;width:30%;cursor:pointer;padding:8px 0;text-align:center}.active-tab{color:#fff!important;background:var(--primary-bg-color);box-shadow:0 0 4px #00000040;border-radius:8px;transition:opacity .3s ease-in-out,transform .3s ease-in-out;opacity:1;transform:translateY(0)}.categories-sidepanel{width:15%;padding:10px 5px;margin:15px 0;border-radius:10px;height:calc(70vh + -0px);overflow-y:scroll;background:#fff}.side-section{padding:6px 10px;border-radius:8px;margin-bottom:10px;cursor:pointer}.side-section img{width:16px}.side-section .image-container{background:#f9fafb;padding:5px 8px;border-radius:5px}.side-section .section-text{font-size:12px;font-weight:500;line-height:24px;text-align:center;color:#a1a1a1}.active-section{background:var(--primary-bg-color)!important;box-shadow:0 0 4px #00000040}.active-section .section-text{color:#fff!important}.active-section .image-container{background:unset!important;padding:unset!important;border-radius:unset!important}.categories-render-section{width:85%;padding:15px;margin:15px 10px;border-radius:10px;height:calc(70vh + -0px);overflow-y:scroll;background:#fff}.categories-head{font-size:20px;font-weight:600;line-height:24px;color:#434343}.sub-text{font-size:13px;font-weight:500;line-height:24px;color:#a1a1a1;margin-bottom:10px}.section{margin-bottom:10px}.section-header{font-size:14px;font-weight:500;line-height:24px;color:#a1a1a1;margin-bottom:10px}.section-img-container{padding:18px;border-radius:8px;background:#f9fafb}.section-img-container img{width:100%}.search-bar-container{padding:15px}.parent-container{background:#fafafa}.f-18{font-size:18px;cursor:pointer}.w-30{width:30px!important}.h-30{height:30vh}.cp{cursor:pointer}.empty-div{height:calc(70vh + -0px);background:#fff;margin:18px;border-radius:13px}.empty-img{height:30vh}.oops-text{font-weight:900;font-size:42px;background:var(--primary-bg-color);background-clip:text;-webkit-text-fill-color:transparent}.oops-sub-text-1{font-size:17px;font-weight:600;color:#101010e5}.oops-sub-text-2{font-size:14px;font-weight:600;color:#101010e5}\n"] }]
|
|
2302
|
+
args: [{ selector: 'simpo-add-section', standalone: true, imports: [CommonModule, MatIconModule, NgxSkeletonLoaderModule, FormsModule], template: "<section class=\"main-container\">\r\n <div class=\"header-container d-flex align-items-center justify-content-between\">\r\n <div>Select Template</div>\r\n <mat-icon class=\"d-flex align-items-center justify-content-center f-18 cp\" (click)=\"dialog.close()\">\r\n close\r\n </mat-icon>\r\n </div>\r\n <div class=\"parent-container\">\r\n <div class=\"search-bar-container\">\r\n <div class=\"search-bar d-flex gap-10\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/314661c1741844234442Vector%20%281%29.png\"\r\n alt=\"search-bar-icon\">\r\n <input type=\"text\" placeholder=\"Search for Sections\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchSections()\">\r\n </div>\r\n </div>\r\n <div class=\"tab-container d-flex justify-content-around align-items-center\">\r\n <ng-container *ngFor=\"let ele of tabs\">\r\n <div class=\"tabs\" (click)=\"selectedTab = ele.value\" [class.active-tab]=\"ele.value == selectedTab\">\r\n {{ele.viewValue}}\r\n <ng-container *ngIf=\"ele.value == 'PRO' && ele.value != selectedTab\">\r\n <img class=\"w-30\"\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/468281c1744699664858Frame%201244831740%20%281%29.png\"\r\n alt=\"pro-icon\">\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <ng-container *ngIf=\"!isSearch;else emptyScreen\">\r\n <div class=\"categories-container d-flex\">\r\n <div class=\"categories-sidepanel\" *ngIf=\"!loader\">\r\n <ng-container *ngFor=\"let ele of getObjectKeys(sections)\">\r\n <div class=\"side-section d-flex justify-content-center align-items-center flex-column\"\r\n (click)=\"selectSection(ele)\"\r\n [class.active-section]=\"selectedSection == sections[ele]\">\r\n <div class=\"image-container\">\r\n <ng-container *ngIf=\"selectedSection == sections[ele]\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/954383c1741850392802Group%201707481879.png\"\r\n alt=\"icon text\">\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedSection != sections[ele]\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/846145c1741850574864Icon%20%281%29.png\"\r\n alt=\"icon text\">\r\n </ng-container>\r\n </div>\r\n <div class=\"section-text\">\r\n {{ele}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"categories-render-section\" *ngIf=\" !loader && !tabShiftLoader\">\r\n <div class=\"categories-head\">\r\n {{selectedSectionName}}\r\n </div>\r\n <div class=\"sub-text\">\r\n Select a section to add to your page\r\n </div>\r\n <div class=\"sections-container\">\r\n <ng-container *ngFor=\"let ele of selectedSection\">\r\n <div class=\"section\">\r\n <div class=\"section-header\">{{ele.sectionName}}</div>\r\n <div class=\"section-img-container cp\"\r\n (click)=\"addNewSection(ele.componentId,ele.sectionType,$event)\">\r\n <ng-container *ngIf=\"ele?.image; else noImage\">\r\n <img [src]=\"ele?.image\" alt=\"section image\">\r\n </ng-container>\r\n <ng-template #noImage>\r\n <img src=\"https://img.freepik.com/premium-vector/default-image-icon-vector-missing-picture-page-website-design-mobile-app-no-photo-available_87543-11093.jpg\"\r\n alt=\"section image\" class=\"h-30\">\r\n </ng-template>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"categories-sidepanel\" *ngIf=\"loader\">\r\n <ng-container *ngFor=\"let ele of [1,1,1,1,1,1,1,1,1]\">\r\n <div class=\"d-flex justify-content-center align-items-center flex-column\">\r\n <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n height: '8vh',\r\n width: '65%',\r\n 'border-radius': '13px',\r\n 'margin-bottom' : '10px',\r\n }\" class=\"d-flex justify-content-center w-100\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"categories-render-section\" *ngIf=\"loader || tabShiftLoader\">\r\n <div class=\"categories-head\">\r\n <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n width: '20%',\r\n height : '3vh',\r\n 'border-radius': '5px',\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n <div class=\"sub-text\">\r\n <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n width: '60%',\r\n height : '2vh',\r\n 'border-radius': '5px',\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n <div class=\"sections-container\">\r\n <ng-container *ngFor=\"let ele of [1,1,1,1]\">\r\n <div class=\"section\">\r\n <div> <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n width: '25%',\r\n height : '2vh',\r\n 'border-radius': '5px',\r\n }\">\r\n </ngx-skeleton-loader></div>\r\n <div>\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '100%',\r\n height : '25vh',\r\n 'border-radius': '5px',\r\n 'margin':'2px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-template #emptyScreen>\r\n <div class=\"empty-div d-flex align-items-center justify-content-center flex-column\">\r\n <div class=\"image-container-1\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/377076c1743154807683image%20%286%29.png\" alt=\"empty-img\" class=\"empty-img \">\r\n </div>\r\n <div class=\"oops-text\">\r\n Oops! \r\n </div>\r\n <div class=\"oops-sub-text\">\r\n <div class=\"oops-sub-text-1 text-center\">I sniffed everywhere, but I couldn't find what you're looking for</div>\r\n <div class=\"oops-sub-text-2 text-center\">\r\n Maybe try a different search? \r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n</section>", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}.header-container{padding:12px 15px;font-size:15px;line-height:24px;font-weight:600;color:#000;box-shadow:0 0 4px #00000040;margin-bottom:2px}.search-bar{box-shadow:0 0 4px #00000040;padding:8px;border-radius:8px}.search-bar img{width:19px;height:18px}.search-bar input{width:100%;outline:none;border:unset;font-size:13px;font-weight:400;background:#fafafa}.gap-10{gap:10px!important}.tab-container{padding:8px;margin:0 15px;gap:3%;background:#fff;border-radius:13px}.tabs{font-size:14px;font-weight:500;line-height:24px;color:#2c2c2c99;width:30%;cursor:pointer;padding:8px 0;text-align:center}.active-tab{color:#fff!important;background:var(--primary-bg-color);box-shadow:0 0 4px #00000040;border-radius:8px;transition:opacity .3s ease-in-out,transform .3s ease-in-out;opacity:1;transform:translateY(0)}.categories-sidepanel{width:15%;padding:10px 5px;margin:15px 0;border-radius:10px;height:calc(70vh + -0px);overflow-y:scroll;background:#fff}.side-section{padding:6px 10px;border-radius:8px;margin-bottom:10px;cursor:pointer}.side-section img{width:16px}.side-section .image-container{background:#f9fafb;padding:5px 8px;border-radius:5px}.side-section .section-text{font-size:12px;font-weight:500;line-height:24px;text-align:center;color:#a1a1a1}.active-section{background:var(--primary-bg-color)!important;box-shadow:0 0 4px #00000040}.active-section .section-text{color:#fff!important}.active-section .image-container{background:unset!important;padding:unset!important;border-radius:unset!important}.categories-render-section{width:85%;padding:15px;margin:15px 10px;border-radius:10px;height:calc(70vh + -0px);overflow-y:scroll;background:#fff}.categories-head{font-size:20px;font-weight:600;line-height:24px;color:#434343}.sub-text{font-size:13px;font-weight:500;line-height:24px;color:#a1a1a1;margin-bottom:10px}.section{margin-bottom:10px}.section-header{font-size:14px;font-weight:500;line-height:24px;color:#a1a1a1;margin-bottom:10px}.section-img-container{padding:18px;border-radius:8px;background:#f9fafb}.section-img-container img{width:100%}.search-bar-container{padding:15px}.parent-container{background:#fafafa}.f-18{font-size:18px;cursor:pointer}.w-30{width:30px!important}.h-30{height:30vh}.cp{cursor:pointer}.empty-div{height:calc(70vh + -0px);background:#fff;margin:18px;border-radius:13px}.empty-img{height:30vh}.oops-text{font-weight:900;font-size:42px;background:var(--primary-bg-color);background-clip:text;-webkit-text-fill-color:transparent}.oops-sub-text-1{font-size:17px;font-weight:600;color:#101010e5}.oops-sub-text-2{font-size:14px;font-weight:600;color:#101010e5}\n"] }]
|
|
2303
2303
|
}], ctorParameters: () => [{ type: i2$2.MatDialogRef }, { type: undefined, decorators: [{
|
|
2304
2304
|
type: Inject,
|
|
2305
2305
|
args: [MAT_DIALOG_DATA]
|
|
@@ -2368,11 +2368,11 @@ class HoverElementsComponent {
|
|
|
2368
2368
|
event.stopPropagation();
|
|
2369
2369
|
}
|
|
2370
2370
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: HoverElementsComponent, deps: [{ token: EventsService }, { token: i2$2.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2371
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: HoverElementsComponent, isStandalone: true, selector: "simpo-hover-elements", inputs: { data: "data", index: "index", editOptions: "editOptions", isMerged: "isMerged", isEcommerce: "isEcommerce" }, outputs: { edit: "edit" }, ngImport: i0, template: "<mat-dialog-content class=\"mat-typography\" *ngIf=\"editOptions\">\r\n <div class=\"top-btn\" [ngClass]=\"{'adjust-top-btn': isMerged && index == 1}\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList' && !isEcommerce\">\r\n <button class=\"add_btn_top\" (click)=\"addSection('ABOVE', $event)\">Add Section +</button>\r\n </div>\r\n <section class=\"hover-tab\" [ngClass]=\"{'adjustPosition': isMerged && index == 1}\">\r\n <div class=\"tabs-section\" [ngStyle]=\"{'z-index' : data.sectionType === 'header' ? '10000' : '100'}\">\r\n <div class=\"edit-tab\">\r\n <button (click)=\"editSection()\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <defs>\r\n <linearGradient id=\"gradient\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\r\n <stop offset=\"0%\" style=\"stop-color:#283E90;stop-opacity:1\" />\r\n <stop offset=\"100%\" style=\"stop-color:#F000E8;stop-opacity:1\" />\r\n </linearGradient>\r\n </defs>\r\n <g clip-path=\"url(#clip0_1076_52409)\">\r\n <path d=\"M2 11.4997V13.9997H4.5L11.8733 6.62638L9.37333 4.12638L2 11.4997ZM13.8067 4.69305C14.0667 4.43305 14.0667 4.01305 13.8067 3.75305L12.2467 2.19305C11.9867 1.93305 11.5667 1.93305 11.3067 2.19305L10.0867 3.41305L12.5867 5.91305L13.8067 4.69305Z\" fill=\"url(#gradient)\" />\r\n </g>\r\n </svg>\r\n <span class=\"edit-text\">Edit</span>\r\n </button>\r\n </div>\r\n \r\n <div class=\"vr-line\"></div>\r\n \r\n <div class=\"regenerate\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'blogList'\">\r\n <button (click)=\"restyleSection($event)\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M4.01108 19.9525C4.27565 20.0656 4.58327 19.9712 4.7378 19.7271L11.7691 8.55522C11.8829 8.3744 11.8898 8.14608 11.7868 7.95956C11.6838 7.77245 11.4869 7.65628 11.2735 7.65628H6.58085L8.32608 0.730146C8.39647 0.450341 8.25397 0.161357 7.98905 0.0474897C7.72585 -0.0657916 7.41628 0.0291694 7.26233 0.272919L0.231082 11.4448C0.117215 11.6256 0.11034 11.8539 0.213348 12.0405C0.316355 12.2276 0.513191 12.3437 0.726629 12.3437H5.41928L3.67405 19.2699C3.60366 19.5497 3.74612 19.8387 4.01108 19.9525Z\" fill=\"url(#gradient)\" />\r\n </svg>\r\n <span class=\"edit-text\">Restyle</span>\r\n </button>\r\n </div>\r\n \r\n <div class=\"vr-line\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList'\"></div>\r\n \r\n <div class=\"regenerate\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList'\">\r\n <button (click)=\"changeContent($event)\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M11 12h7m-7-8h7m-7 4h7M2 16h16\" stroke=\"url(#gradient)\" stroke-linecap=\"round\" stroke-width=\"1.5\" />\r\n <path d=\"m2 12 .85714-2.28571M8 12l-.85714-2.28571m0 0L5 4 2.85714 9.71429m4.28572 0H2.85714\" stroke=\"url(#gradient)\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" />\r\n </svg>\r\n <span class=\"edit-text\">Change Content</span>\r\n </button>\r\n </div>\r\n \r\n <div class=\"vr-line\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'blogList'\"></div>\r\n <div class=\"remainin-sections\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList'\">\r\n <button class=\"copy\" (click)=\"duplicateSection($event)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"url(#gradient)\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\r\n class=\"icon w-5 h-5\" aria-hidden=\"true\">\r\n <path\r\n d=\"M9 2c-1.10457 0-2 .89543-2 2v8c0 1.1046.89543 2 2 2h6c1.1046 0 2-.8954 2-2V6.41421c0-.53043-.2107-1.03914-.5858-1.41421L14 2.58579C13.6249 2.21071 13.1162 2 12.5858 2H9Z\">\r\n </path>\r\n <path d=\"M3 8c0-1.10457.89543-2 2-2v10h8c0 1.1046-.8954 2-2 2H5c-1.10457 0-2-.8954-2-2V8Z\"></path>\r\n </svg>\r\n </button>\r\n <button class=\"up-arrow\" (click)=\"moveUp($event)\" [disabled]=\"index == 1\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"url(#gradient)\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\r\n class=\"icon w-5 h-5\" aria-hidden=\"true\">\r\n <path fill-rule=\"evenodd\"\r\n d=\"M3.29289 9.70711c-.39052-.39053-.39052-1.02369 0-1.41422l6-6c.39053-.39052 1.02371-.39052 1.41421 0l6 6c.3905.39053.3905 1.02369 0 1.41422-.3905.39049-1.0237.39049-1.4142 0L11 5.41421V17c0 .5523-.4477 1-1 1-.55228 0-1-.4477-1-1V5.41421l-4.29289 4.2929c-.39053.39049-1.02369.39049-1.41422 0Z\"\r\n clip-rule=\"evenodd\"></path>\r\n </svg>\r\n </button>\r\n <button class=\"up-arrow\" (click)=\"moveDown($event)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"url(#gradient)\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\r\n class=\"icon w-5 h-5\" aria-hidden=\"true\">\r\n <path fill-rule=\"evenodd\"\r\n d=\"M16.7071 10.2929c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.02368.3905-1.41421 0l-6-6c-.39052-.3905-.39052-1.0237 0-1.4142.39053-.39053 1.02369-.39053 1.41422 0L9 14.5858V3c0-.55228.44772-1 1-1 .5523 0 1 .44772 1 1v11.5858l4.2929-4.2929c.3905-.39053 1.0237-.39053 1.4142 0Z\"\r\n clip-rule=\"evenodd\"></path>\r\n </svg>\r\n </button>\r\n <button class=\"up-arrow\" (click)=\"deleteSection($event)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"url(#gradient)\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\r\n class=\"icon w-5 h-5\" aria-hidden=\"true\">\r\n <path fill-rule=\"evenodd\"\r\n d=\"M9 2c-.37877 0-.72503.214-.89443.55279L7.38197 4H4c-.55228 0-1 .44772-1 1s.44772 1 1 1v10c0 1.1046.89543 2 2 2h8c1.1046 0 2-.8954 2-2V6c.5523 0 1-.44772 1-1s-.4477-1-1-1h-3.382l-.7236-1.44721C11.725 2.214 11.3788 2 11 2H9ZM7 8c0-.55228.44772-1 1-1s1 .44772 1 1v6c0 .5523-.44772 1-1 1s-1-.4477-1-1V8Zm5-1c-.5523 0-1 .44772-1 1v6c0 .5523.4477 1 1 1s1-.4477 1-1V8c0-.55228-.4477-1-1-1Z\"\r\n clip-rule=\"evenodd\"></path>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n </section>\r\n \r\n \r\n \r\n <div class=\"bottom-btn\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList' && !isEcommerce\">\r\n <button class=\"add_btn\" (click)=\"addSection('BELOW', $event)\">Add Section +</button>\r\n </div>\r\n</mat-dialog-content>\r\n", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}.hover-tab{display:flex;justify-content:flex-end;align-items:center;position:absolute;right:30px;top:40px;height:auto}.adjustPosition{top:200px}.bottom-btn{position:absolute;top:100%;z-index:101;border:3px solid transparent;border-image:var(--primary-bg-color);border-image-slice:1;width:100%}.bottom-btn .add_btn{width:140px!important;height:36px;background:var(--primary-bg-color);border-radius:4px;transform:translate(-50%,-50%);color:#fff;cursor:pointer;border:none;outline:none;position:absolute;top:100%;left:50%;box-shadow:#00000059 0 5px 15px}.adjust-top-btn{top:170px!important}.top-btn{position:absolute;top:0%;z-index:101;width:100%;border:3px solid transparent;border-image-slice:1;border-image:var(--primary-bg-color) 1}.top-btn .add_btn_top{top:0!important;width:140px!important;height:36px;background:var(--primary-bg-color);border-radius:4px;position:absolute;left:50%;transform:translate(-50%,-50%);color:#fff;cursor:pointer;border:none;outline:none;z-index:1001;box-shadow:#00000059 0 5px 15px}.tabs-section{width:auto;padding:15px 10px;box-shadow:#63636333 0 2px 8px;border-radius:6px;display:flex;align-items:center;height:60px;background-color:#fff;z-index:1000}.edit-tab{display:flex;align-items:center;justify-content:center}.edit-tab button{border:none;outline:none;cursor:pointer;background-color:transparent;padding:0;display:flex;justify-content:center;align-items:center}.edit-text{font-size:14px;background:var(--primary-bg-color);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:500;position:relative;left:4px}.vr-line{border-left:1px solid #e8e8e8;height:25px;margin-left:14px}.regenerate{margin-left:10px;display:flex;justify-content:center;align-items:center}.regenerate button{border:none;outline:none;cursor:pointer;background-color:transparent;padding:0;display:flex;justify-content:center;align-items:center}.remainin-sections{margin-left:10px;display:flex;justify-content:center;align-items:center}.remainin-sections :is(.copy,.up-arrow){border:none;outline:none;cursor:pointer;background-color:transparent;padding:0}.remainin-sections :is(.copy:hover,.up-arrow:hover) svg{fill:linear-gradient(94.22deg,#283E90 -4.45%,#F000E8 111.88%)}.up-arrow{margin-left:10px}svg{fill:linear-gradient(94.22deg,#283E90 -4.45%,#F000E8 111.88%)!important}@media only screen and (max-width: 475px){.tabs-section{position:relative;left:27px;height:53px}}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
2371
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: HoverElementsComponent, isStandalone: true, selector: "simpo-hover-elements", inputs: { data: "data", index: "index", editOptions: "editOptions", isMerged: "isMerged", isEcommerce: "isEcommerce" }, outputs: { edit: "edit" }, ngImport: i0, template: "<mat-dialog-content class=\"mat-typography\" *ngIf=\"editOptions\">\r\n <div class=\"top-btn\" [ngClass]=\"{'adjust-top-btn': isMerged && index == 1}\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList' && !isEcommerce\">\r\n <button class=\"add_btn_top\" (click)=\"addSection('ABOVE', $event)\">Add Section +</button>\r\n </div>\r\n <section class=\"hover-tab\" [ngClass]=\"{'adjustPosition': isMerged && index == 1}\">\r\n <div class=\"tabs-section\" [ngStyle]=\"{'z-index' : data.sectionType === 'header' ? '10000' : '100'}\">\r\n <div class=\"edit-tab\">\r\n <button (click)=\"editSection()\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <defs>\r\n <linearGradient id=\"gradient\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\r\n <stop offset=\"0%\" style=\"stop-color:#230860;stop-opacity:1\" />\r\n <stop offset=\"100%\" style=\"stop-color:#00b6ff;stop-opacity:1\" />\r\n </linearGradient>\r\n </defs>\r\n <g clip-path=\"url(#clip0_1076_52409)\">\r\n <path d=\"M2 11.4997V13.9997H4.5L11.8733 6.62638L9.37333 4.12638L2 11.4997ZM13.8067 4.69305C14.0667 4.43305 14.0667 4.01305 13.8067 3.75305L12.2467 2.19305C11.9867 1.93305 11.5667 1.93305 11.3067 2.19305L10.0867 3.41305L12.5867 5.91305L13.8067 4.69305Z\" fill=\"url(#gradient)\" />\r\n </g>\r\n </svg>\r\n <span class=\"edit-text\">Edit</span>\r\n </button>\r\n </div>\r\n \r\n <div class=\"vr-line\"></div>\r\n \r\n <div class=\"regenerate\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'blogList'\">\r\n <button (click)=\"restyleSection($event)\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M4.01108 19.9525C4.27565 20.0656 4.58327 19.9712 4.7378 19.7271L11.7691 8.55522C11.8829 8.3744 11.8898 8.14608 11.7868 7.95956C11.6838 7.77245 11.4869 7.65628 11.2735 7.65628H6.58085L8.32608 0.730146C8.39647 0.450341 8.25397 0.161357 7.98905 0.0474897C7.72585 -0.0657916 7.41628 0.0291694 7.26233 0.272919L0.231082 11.4448C0.117215 11.6256 0.11034 11.8539 0.213348 12.0405C0.316355 12.2276 0.513191 12.3437 0.726629 12.3437H5.41928L3.67405 19.2699C3.60366 19.5497 3.74612 19.8387 4.01108 19.9525Z\" fill=\"url(#gradient)\" />\r\n </svg>\r\n <span class=\"edit-text\">Restyle</span>\r\n </button>\r\n </div>\r\n \r\n <div class=\"vr-line\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList'\"></div>\r\n \r\n <div class=\"regenerate\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList'\">\r\n <button (click)=\"changeContent($event)\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M11 12h7m-7-8h7m-7 4h7M2 16h16\" stroke=\"url(#gradient)\" stroke-linecap=\"round\" stroke-width=\"1.5\" />\r\n <path d=\"m2 12 .85714-2.28571M8 12l-.85714-2.28571m0 0L5 4 2.85714 9.71429m4.28572 0H2.85714\" stroke=\"url(#gradient)\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" />\r\n </svg>\r\n <span class=\"edit-text\">Change Content</span>\r\n </button>\r\n </div>\r\n \r\n <div class=\"vr-line\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'blogList'\"></div>\r\n <div class=\"remainin-sections\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList'\">\r\n <button class=\"copy\" (click)=\"duplicateSection($event)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"url(#gradient)\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\r\n class=\"icon w-5 h-5\" aria-hidden=\"true\">\r\n <path\r\n d=\"M9 2c-1.10457 0-2 .89543-2 2v8c0 1.1046.89543 2 2 2h6c1.1046 0 2-.8954 2-2V6.41421c0-.53043-.2107-1.03914-.5858-1.41421L14 2.58579C13.6249 2.21071 13.1162 2 12.5858 2H9Z\">\r\n </path>\r\n <path d=\"M3 8c0-1.10457.89543-2 2-2v10h8c0 1.1046-.8954 2-2 2H5c-1.10457 0-2-.8954-2-2V8Z\"></path>\r\n </svg>\r\n </button>\r\n <button class=\"up-arrow\" (click)=\"moveUp($event)\" [disabled]=\"index == 1\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"url(#gradient)\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\r\n class=\"icon w-5 h-5\" aria-hidden=\"true\">\r\n <path fill-rule=\"evenodd\"\r\n d=\"M3.29289 9.70711c-.39052-.39053-.39052-1.02369 0-1.41422l6-6c.39053-.39052 1.02371-.39052 1.41421 0l6 6c.3905.39053.3905 1.02369 0 1.41422-.3905.39049-1.0237.39049-1.4142 0L11 5.41421V17c0 .5523-.4477 1-1 1-.55228 0-1-.4477-1-1V5.41421l-4.29289 4.2929c-.39053.39049-1.02369.39049-1.41422 0Z\"\r\n clip-rule=\"evenodd\"></path>\r\n </svg>\r\n </button>\r\n <button class=\"up-arrow\" (click)=\"moveDown($event)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"url(#gradient)\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\r\n class=\"icon w-5 h-5\" aria-hidden=\"true\">\r\n <path fill-rule=\"evenodd\"\r\n d=\"M16.7071 10.2929c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.02368.3905-1.41421 0l-6-6c-.39052-.3905-.39052-1.0237 0-1.4142.39053-.39053 1.02369-.39053 1.41422 0L9 14.5858V3c0-.55228.44772-1 1-1 .5523 0 1 .44772 1 1v11.5858l4.2929-4.2929c.3905-.39053 1.0237-.39053 1.4142 0Z\"\r\n clip-rule=\"evenodd\"></path>\r\n </svg>\r\n </button>\r\n <button class=\"up-arrow\" (click)=\"deleteSection($event)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"url(#gradient)\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\r\n class=\"icon w-5 h-5\" aria-hidden=\"true\">\r\n <path fill-rule=\"evenodd\"\r\n d=\"M9 2c-.37877 0-.72503.214-.89443.55279L7.38197 4H4c-.55228 0-1 .44772-1 1s.44772 1 1 1v10c0 1.1046.89543 2 2 2h8c1.1046 0 2-.8954 2-2V6c.5523 0 1-.44772 1-1s-.4477-1-1-1h-3.382l-.7236-1.44721C11.725 2.214 11.3788 2 11 2H9ZM7 8c0-.55228.44772-1 1-1s1 .44772 1 1v6c0 .5523-.44772 1-1 1s-1-.4477-1-1V8Zm5-1c-.5523 0-1 .44772-1 1v6c0 .5523.4477 1 1 1s1-.4477 1-1V8c0-.55228-.4477-1-1-1Z\"\r\n clip-rule=\"evenodd\"></path>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n </section>\r\n \r\n \r\n \r\n <div class=\"bottom-btn\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList' && !isEcommerce\">\r\n <button class=\"add_btn\" (click)=\"addSection('BELOW', $event)\">Add Section +</button>\r\n </div>\r\n</mat-dialog-content>\r\n", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}.hover-tab{display:flex;justify-content:flex-end;align-items:center;position:absolute;right:30px;top:40px;height:auto}.adjustPosition{top:200px}.bottom-btn{position:absolute;top:100%;z-index:101;border:3px solid transparent;border-image:var(--primary-bg-color);border-image-slice:1;width:100%}.bottom-btn .add_btn{width:140px!important;height:36px;background:var(--primary-bg-color);border-radius:4px;transform:translate(-50%,-50%);color:#fff;cursor:pointer;border:none;outline:none;position:absolute;top:100%;left:50%;box-shadow:#00000059 0 5px 15px}.adjust-top-btn{top:170px!important}.top-btn{position:absolute;top:0%;z-index:101;width:100%;border:3px solid transparent;border-image-slice:1;border-image:var(--primary-bg-color) 1}.top-btn .add_btn_top{top:0!important;width:140px!important;height:36px;background:var(--primary-bg-color);border-radius:4px;position:absolute;left:50%;transform:translate(-50%,-50%);color:#fff;cursor:pointer;border:none;outline:none;z-index:1001;box-shadow:#00000059 0 5px 15px}.tabs-section{width:auto;padding:15px 10px;box-shadow:#63636333 0 2px 8px;border-radius:6px;display:flex;align-items:center;height:60px;background-color:#fff;z-index:1000}.edit-tab{display:flex;align-items:center;justify-content:center}.edit-tab button{border:none;outline:none;cursor:pointer;background-color:transparent;padding:0;display:flex;justify-content:center;align-items:center}.edit-text{font-size:14px;background:var(--primary-bg-color);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:500;position:relative;left:4px}.vr-line{border-left:1px solid #e8e8e8;height:25px;margin-left:14px}.regenerate{margin-left:10px;display:flex;justify-content:center;align-items:center}.regenerate button{border:none;outline:none;cursor:pointer;background-color:transparent;padding:0;display:flex;justify-content:center;align-items:center}.remainin-sections{margin-left:10px;display:flex;justify-content:center;align-items:center}.remainin-sections :is(.copy,.up-arrow){border:none;outline:none;cursor:pointer;background-color:transparent;padding:0}.remainin-sections :is(.copy:hover,.up-arrow:hover) svg{fill:linear-gradient(94.22deg,#283E90 -4.45%,#F000E8 111.88%)}.up-arrow{margin-left:10px}svg{fill:linear-gradient(94.22deg,#283E90 -4.45%,#F000E8 111.88%)!important}@media only screen and (max-width: 475px){.tabs-section{position:relative;left:27px;height:53px}}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
2372
2372
|
}
|
|
2373
2373
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: HoverElementsComponent, decorators: [{
|
|
2374
2374
|
type: Component,
|
|
2375
|
-
args: [{ selector: 'simpo-hover-elements', standalone: true, imports: [MatIconModule, MatDialogModule, CommonModule, AddSectionComponent], template: "<mat-dialog-content class=\"mat-typography\" *ngIf=\"editOptions\">\r\n <div class=\"top-btn\" [ngClass]=\"{'adjust-top-btn': isMerged && index == 1}\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList' && !isEcommerce\">\r\n <button class=\"add_btn_top\" (click)=\"addSection('ABOVE', $event)\">Add Section +</button>\r\n </div>\r\n <section class=\"hover-tab\" [ngClass]=\"{'adjustPosition': isMerged && index == 1}\">\r\n <div class=\"tabs-section\" [ngStyle]=\"{'z-index' : data.sectionType === 'header' ? '10000' : '100'}\">\r\n <div class=\"edit-tab\">\r\n <button (click)=\"editSection()\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <defs>\r\n <linearGradient id=\"gradient\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\r\n <stop offset=\"0%\" style=\"stop-color:#283E90;stop-opacity:1\" />\r\n <stop offset=\"100%\" style=\"stop-color:#F000E8;stop-opacity:1\" />\r\n </linearGradient>\r\n </defs>\r\n <g clip-path=\"url(#clip0_1076_52409)\">\r\n <path d=\"M2 11.4997V13.9997H4.5L11.8733 6.62638L9.37333 4.12638L2 11.4997ZM13.8067 4.69305C14.0667 4.43305 14.0667 4.01305 13.8067 3.75305L12.2467 2.19305C11.9867 1.93305 11.5667 1.93305 11.3067 2.19305L10.0867 3.41305L12.5867 5.91305L13.8067 4.69305Z\" fill=\"url(#gradient)\" />\r\n </g>\r\n </svg>\r\n <span class=\"edit-text\">Edit</span>\r\n </button>\r\n </div>\r\n \r\n <div class=\"vr-line\"></div>\r\n \r\n <div class=\"regenerate\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'blogList'\">\r\n <button (click)=\"restyleSection($event)\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M4.01108 19.9525C4.27565 20.0656 4.58327 19.9712 4.7378 19.7271L11.7691 8.55522C11.8829 8.3744 11.8898 8.14608 11.7868 7.95956C11.6838 7.77245 11.4869 7.65628 11.2735 7.65628H6.58085L8.32608 0.730146C8.39647 0.450341 8.25397 0.161357 7.98905 0.0474897C7.72585 -0.0657916 7.41628 0.0291694 7.26233 0.272919L0.231082 11.4448C0.117215 11.6256 0.11034 11.8539 0.213348 12.0405C0.316355 12.2276 0.513191 12.3437 0.726629 12.3437H5.41928L3.67405 19.2699C3.60366 19.5497 3.74612 19.8387 4.01108 19.9525Z\" fill=\"url(#gradient)\" />\r\n </svg>\r\n <span class=\"edit-text\">Restyle</span>\r\n </button>\r\n </div>\r\n \r\n <div class=\"vr-line\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList'\"></div>\r\n \r\n <div class=\"regenerate\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList'\">\r\n <button (click)=\"changeContent($event)\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M11 12h7m-7-8h7m-7 4h7M2 16h16\" stroke=\"url(#gradient)\" stroke-linecap=\"round\" stroke-width=\"1.5\" />\r\n <path d=\"m2 12 .85714-2.28571M8 12l-.85714-2.28571m0 0L5 4 2.85714 9.71429m4.28572 0H2.85714\" stroke=\"url(#gradient)\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" />\r\n </svg>\r\n <span class=\"edit-text\">Change Content</span>\r\n </button>\r\n </div>\r\n \r\n <div class=\"vr-line\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'blogList'\"></div>\r\n <div class=\"remainin-sections\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList'\">\r\n <button class=\"copy\" (click)=\"duplicateSection($event)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"url(#gradient)\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\r\n class=\"icon w-5 h-5\" aria-hidden=\"true\">\r\n <path\r\n d=\"M9 2c-1.10457 0-2 .89543-2 2v8c0 1.1046.89543 2 2 2h6c1.1046 0 2-.8954 2-2V6.41421c0-.53043-.2107-1.03914-.5858-1.41421L14 2.58579C13.6249 2.21071 13.1162 2 12.5858 2H9Z\">\r\n </path>\r\n <path d=\"M3 8c0-1.10457.89543-2 2-2v10h8c0 1.1046-.8954 2-2 2H5c-1.10457 0-2-.8954-2-2V8Z\"></path>\r\n </svg>\r\n </button>\r\n <button class=\"up-arrow\" (click)=\"moveUp($event)\" [disabled]=\"index == 1\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"url(#gradient)\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\r\n class=\"icon w-5 h-5\" aria-hidden=\"true\">\r\n <path fill-rule=\"evenodd\"\r\n d=\"M3.29289 9.70711c-.39052-.39053-.39052-1.02369 0-1.41422l6-6c.39053-.39052 1.02371-.39052 1.41421 0l6 6c.3905.39053.3905 1.02369 0 1.41422-.3905.39049-1.0237.39049-1.4142 0L11 5.41421V17c0 .5523-.4477 1-1 1-.55228 0-1-.4477-1-1V5.41421l-4.29289 4.2929c-.39053.39049-1.02369.39049-1.41422 0Z\"\r\n clip-rule=\"evenodd\"></path>\r\n </svg>\r\n </button>\r\n <button class=\"up-arrow\" (click)=\"moveDown($event)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"url(#gradient)\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\r\n class=\"icon w-5 h-5\" aria-hidden=\"true\">\r\n <path fill-rule=\"evenodd\"\r\n d=\"M16.7071 10.2929c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.02368.3905-1.41421 0l-6-6c-.39052-.3905-.39052-1.0237 0-1.4142.39053-.39053 1.02369-.39053 1.41422 0L9 14.5858V3c0-.55228.44772-1 1-1 .5523 0 1 .44772 1 1v11.5858l4.2929-4.2929c.3905-.39053 1.0237-.39053 1.4142 0Z\"\r\n clip-rule=\"evenodd\"></path>\r\n </svg>\r\n </button>\r\n <button class=\"up-arrow\" (click)=\"deleteSection($event)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"url(#gradient)\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\r\n class=\"icon w-5 h-5\" aria-hidden=\"true\">\r\n <path fill-rule=\"evenodd\"\r\n d=\"M9 2c-.37877 0-.72503.214-.89443.55279L7.38197 4H4c-.55228 0-1 .44772-1 1s.44772 1 1 1v10c0 1.1046.89543 2 2 2h8c1.1046 0 2-.8954 2-2V6c.5523 0 1-.44772 1-1s-.4477-1-1-1h-3.382l-.7236-1.44721C11.725 2.214 11.3788 2 11 2H9ZM7 8c0-.55228.44772-1 1-1s1 .44772 1 1v6c0 .5523-.44772 1-1 1s-1-.4477-1-1V8Zm5-1c-.5523 0-1 .44772-1 1v6c0 .5523.4477 1 1 1s1-.4477 1-1V8c0-.55228-.4477-1-1-1Z\"\r\n clip-rule=\"evenodd\"></path>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n </section>\r\n \r\n \r\n \r\n <div class=\"bottom-btn\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList' && !isEcommerce\">\r\n <button class=\"add_btn\" (click)=\"addSection('BELOW', $event)\">Add Section +</button>\r\n </div>\r\n</mat-dialog-content>\r\n", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}.hover-tab{display:flex;justify-content:flex-end;align-items:center;position:absolute;right:30px;top:40px;height:auto}.adjustPosition{top:200px}.bottom-btn{position:absolute;top:100%;z-index:101;border:3px solid transparent;border-image:var(--primary-bg-color);border-image-slice:1;width:100%}.bottom-btn .add_btn{width:140px!important;height:36px;background:var(--primary-bg-color);border-radius:4px;transform:translate(-50%,-50%);color:#fff;cursor:pointer;border:none;outline:none;position:absolute;top:100%;left:50%;box-shadow:#00000059 0 5px 15px}.adjust-top-btn{top:170px!important}.top-btn{position:absolute;top:0%;z-index:101;width:100%;border:3px solid transparent;border-image-slice:1;border-image:var(--primary-bg-color) 1}.top-btn .add_btn_top{top:0!important;width:140px!important;height:36px;background:var(--primary-bg-color);border-radius:4px;position:absolute;left:50%;transform:translate(-50%,-50%);color:#fff;cursor:pointer;border:none;outline:none;z-index:1001;box-shadow:#00000059 0 5px 15px}.tabs-section{width:auto;padding:15px 10px;box-shadow:#63636333 0 2px 8px;border-radius:6px;display:flex;align-items:center;height:60px;background-color:#fff;z-index:1000}.edit-tab{display:flex;align-items:center;justify-content:center}.edit-tab button{border:none;outline:none;cursor:pointer;background-color:transparent;padding:0;display:flex;justify-content:center;align-items:center}.edit-text{font-size:14px;background:var(--primary-bg-color);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:500;position:relative;left:4px}.vr-line{border-left:1px solid #e8e8e8;height:25px;margin-left:14px}.regenerate{margin-left:10px;display:flex;justify-content:center;align-items:center}.regenerate button{border:none;outline:none;cursor:pointer;background-color:transparent;padding:0;display:flex;justify-content:center;align-items:center}.remainin-sections{margin-left:10px;display:flex;justify-content:center;align-items:center}.remainin-sections :is(.copy,.up-arrow){border:none;outline:none;cursor:pointer;background-color:transparent;padding:0}.remainin-sections :is(.copy:hover,.up-arrow:hover) svg{fill:linear-gradient(94.22deg,#283E90 -4.45%,#F000E8 111.88%)}.up-arrow{margin-left:10px}svg{fill:linear-gradient(94.22deg,#283E90 -4.45%,#F000E8 111.88%)!important}@media only screen and (max-width: 475px){.tabs-section{position:relative;left:27px;height:53px}}\n"] }]
|
|
2375
|
+
args: [{ selector: 'simpo-hover-elements', standalone: true, imports: [MatIconModule, MatDialogModule, CommonModule, AddSectionComponent], template: "<mat-dialog-content class=\"mat-typography\" *ngIf=\"editOptions\">\r\n <div class=\"top-btn\" [ngClass]=\"{'adjust-top-btn': isMerged && index == 1}\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList' && !isEcommerce\">\r\n <button class=\"add_btn_top\" (click)=\"addSection('ABOVE', $event)\">Add Section +</button>\r\n </div>\r\n <section class=\"hover-tab\" [ngClass]=\"{'adjustPosition': isMerged && index == 1}\">\r\n <div class=\"tabs-section\" [ngStyle]=\"{'z-index' : data.sectionType === 'header' ? '10000' : '100'}\">\r\n <div class=\"edit-tab\">\r\n <button (click)=\"editSection()\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <defs>\r\n <linearGradient id=\"gradient\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\r\n <stop offset=\"0%\" style=\"stop-color:#230860;stop-opacity:1\" />\r\n <stop offset=\"100%\" style=\"stop-color:#00b6ff;stop-opacity:1\" />\r\n </linearGradient>\r\n </defs>\r\n <g clip-path=\"url(#clip0_1076_52409)\">\r\n <path d=\"M2 11.4997V13.9997H4.5L11.8733 6.62638L9.37333 4.12638L2 11.4997ZM13.8067 4.69305C14.0667 4.43305 14.0667 4.01305 13.8067 3.75305L12.2467 2.19305C11.9867 1.93305 11.5667 1.93305 11.3067 2.19305L10.0867 3.41305L12.5867 5.91305L13.8067 4.69305Z\" fill=\"url(#gradient)\" />\r\n </g>\r\n </svg>\r\n <span class=\"edit-text\">Edit</span>\r\n </button>\r\n </div>\r\n \r\n <div class=\"vr-line\"></div>\r\n \r\n <div class=\"regenerate\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'blogList'\">\r\n <button (click)=\"restyleSection($event)\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M4.01108 19.9525C4.27565 20.0656 4.58327 19.9712 4.7378 19.7271L11.7691 8.55522C11.8829 8.3744 11.8898 8.14608 11.7868 7.95956C11.6838 7.77245 11.4869 7.65628 11.2735 7.65628H6.58085L8.32608 0.730146C8.39647 0.450341 8.25397 0.161357 7.98905 0.0474897C7.72585 -0.0657916 7.41628 0.0291694 7.26233 0.272919L0.231082 11.4448C0.117215 11.6256 0.11034 11.8539 0.213348 12.0405C0.316355 12.2276 0.513191 12.3437 0.726629 12.3437H5.41928L3.67405 19.2699C3.60366 19.5497 3.74612 19.8387 4.01108 19.9525Z\" fill=\"url(#gradient)\" />\r\n </svg>\r\n <span class=\"edit-text\">Restyle</span>\r\n </button>\r\n </div>\r\n \r\n <div class=\"vr-line\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList'\"></div>\r\n \r\n <div class=\"regenerate\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList'\">\r\n <button (click)=\"changeContent($event)\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M11 12h7m-7-8h7m-7 4h7M2 16h16\" stroke=\"url(#gradient)\" stroke-linecap=\"round\" stroke-width=\"1.5\" />\r\n <path d=\"m2 12 .85714-2.28571M8 12l-.85714-2.28571m0 0L5 4 2.85714 9.71429m4.28572 0H2.85714\" stroke=\"url(#gradient)\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" />\r\n </svg>\r\n <span class=\"edit-text\">Change Content</span>\r\n </button>\r\n </div>\r\n \r\n <div class=\"vr-line\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'blogList'\"></div>\r\n <div class=\"remainin-sections\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList'\">\r\n <button class=\"copy\" (click)=\"duplicateSection($event)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"url(#gradient)\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\r\n class=\"icon w-5 h-5\" aria-hidden=\"true\">\r\n <path\r\n d=\"M9 2c-1.10457 0-2 .89543-2 2v8c0 1.1046.89543 2 2 2h6c1.1046 0 2-.8954 2-2V6.41421c0-.53043-.2107-1.03914-.5858-1.41421L14 2.58579C13.6249 2.21071 13.1162 2 12.5858 2H9Z\">\r\n </path>\r\n <path d=\"M3 8c0-1.10457.89543-2 2-2v10h8c0 1.1046-.8954 2-2 2H5c-1.10457 0-2-.8954-2-2V8Z\"></path>\r\n </svg>\r\n </button>\r\n <button class=\"up-arrow\" (click)=\"moveUp($event)\" [disabled]=\"index == 1\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"url(#gradient)\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\r\n class=\"icon w-5 h-5\" aria-hidden=\"true\">\r\n <path fill-rule=\"evenodd\"\r\n d=\"M3.29289 9.70711c-.39052-.39053-.39052-1.02369 0-1.41422l6-6c.39053-.39052 1.02371-.39052 1.41421 0l6 6c.3905.39053.3905 1.02369 0 1.41422-.3905.39049-1.0237.39049-1.4142 0L11 5.41421V17c0 .5523-.4477 1-1 1-.55228 0-1-.4477-1-1V5.41421l-4.29289 4.2929c-.39053.39049-1.02369.39049-1.41422 0Z\"\r\n clip-rule=\"evenodd\"></path>\r\n </svg>\r\n </button>\r\n <button class=\"up-arrow\" (click)=\"moveDown($event)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"url(#gradient)\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\r\n class=\"icon w-5 h-5\" aria-hidden=\"true\">\r\n <path fill-rule=\"evenodd\"\r\n d=\"M16.7071 10.2929c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.02368.3905-1.41421 0l-6-6c-.39052-.3905-.39052-1.0237 0-1.4142.39053-.39053 1.02369-.39053 1.41422 0L9 14.5858V3c0-.55228.44772-1 1-1 .5523 0 1 .44772 1 1v11.5858l4.2929-4.2929c.3905-.39053 1.0237-.39053 1.4142 0Z\"\r\n clip-rule=\"evenodd\"></path>\r\n </svg>\r\n </button>\r\n <button class=\"up-arrow\" (click)=\"deleteSection($event)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"url(#gradient)\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\r\n class=\"icon w-5 h-5\" aria-hidden=\"true\">\r\n <path fill-rule=\"evenodd\"\r\n d=\"M9 2c-.37877 0-.72503.214-.89443.55279L7.38197 4H4c-.55228 0-1 .44772-1 1s.44772 1 1 1v10c0 1.1046.89543 2 2 2h8c1.1046 0 2-.8954 2-2V6c.5523 0 1-.44772 1-1s-.4477-1-1-1h-3.382l-.7236-1.44721C11.725 2.214 11.3788 2 11 2H9ZM7 8c0-.55228.44772-1 1-1s1 .44772 1 1v6c0 .5523-.44772 1-1 1s-1-.4477-1-1V8Zm5-1c-.5523 0-1 .44772-1 1v6c0 .5523.4477 1 1 1s1-.4477 1-1V8c0-.55228-.4477-1-1-1Z\"\r\n clip-rule=\"evenodd\"></path>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n </section>\r\n \r\n \r\n \r\n <div class=\"bottom-btn\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList' && !isEcommerce\">\r\n <button class=\"add_btn\" (click)=\"addSection('BELOW', $event)\">Add Section +</button>\r\n </div>\r\n</mat-dialog-content>\r\n", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}.hover-tab{display:flex;justify-content:flex-end;align-items:center;position:absolute;right:30px;top:40px;height:auto}.adjustPosition{top:200px}.bottom-btn{position:absolute;top:100%;z-index:101;border:3px solid transparent;border-image:var(--primary-bg-color);border-image-slice:1;width:100%}.bottom-btn .add_btn{width:140px!important;height:36px;background:var(--primary-bg-color);border-radius:4px;transform:translate(-50%,-50%);color:#fff;cursor:pointer;border:none;outline:none;position:absolute;top:100%;left:50%;box-shadow:#00000059 0 5px 15px}.adjust-top-btn{top:170px!important}.top-btn{position:absolute;top:0%;z-index:101;width:100%;border:3px solid transparent;border-image-slice:1;border-image:var(--primary-bg-color) 1}.top-btn .add_btn_top{top:0!important;width:140px!important;height:36px;background:var(--primary-bg-color);border-radius:4px;position:absolute;left:50%;transform:translate(-50%,-50%);color:#fff;cursor:pointer;border:none;outline:none;z-index:1001;box-shadow:#00000059 0 5px 15px}.tabs-section{width:auto;padding:15px 10px;box-shadow:#63636333 0 2px 8px;border-radius:6px;display:flex;align-items:center;height:60px;background-color:#fff;z-index:1000}.edit-tab{display:flex;align-items:center;justify-content:center}.edit-tab button{border:none;outline:none;cursor:pointer;background-color:transparent;padding:0;display:flex;justify-content:center;align-items:center}.edit-text{font-size:14px;background:var(--primary-bg-color);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:500;position:relative;left:4px}.vr-line{border-left:1px solid #e8e8e8;height:25px;margin-left:14px}.regenerate{margin-left:10px;display:flex;justify-content:center;align-items:center}.regenerate button{border:none;outline:none;cursor:pointer;background-color:transparent;padding:0;display:flex;justify-content:center;align-items:center}.remainin-sections{margin-left:10px;display:flex;justify-content:center;align-items:center}.remainin-sections :is(.copy,.up-arrow){border:none;outline:none;cursor:pointer;background-color:transparent;padding:0}.remainin-sections :is(.copy:hover,.up-arrow:hover) svg{fill:linear-gradient(94.22deg,#283E90 -4.45%,#F000E8 111.88%)}.up-arrow{margin-left:10px}svg{fill:linear-gradient(94.22deg,#283E90 -4.45%,#F000E8 111.88%)!important}@media only screen and (max-width: 475px){.tabs-section{position:relative;left:27px;height:53px}}\n"] }]
|
|
2376
2376
|
}], ctorParameters: () => [{ type: EventsService }, { type: i2$2.MatDialog }], propDecorators: { edit: [{
|
|
2377
2377
|
type: Output
|
|
2378
2378
|
}], data: [{
|
|
@@ -3034,7 +3034,8 @@ class BackgroundDirective {
|
|
|
3034
3034
|
}
|
|
3035
3035
|
}
|
|
3036
3036
|
ngOnChanges(change) {
|
|
3037
|
-
if (this.simpoBackground?.showImage
|
|
3037
|
+
if (this.simpoBackground?.showImage) {
|
|
3038
|
+
// && this.scrollValue == 0
|
|
3038
3039
|
this.el.nativeElement.style.setProperty('background-image', `url(${this.simpoBackground.image})`);
|
|
3039
3040
|
this.el.nativeElement.style.setProperty('background-position', `${this.simpoBackground.position?.x}% ${this.simpoBackground.position?.y}%`);
|
|
3040
3041
|
this.el.nativeElement.style.setProperty('background-repeat', `no-repeat`);
|
|
@@ -3958,6 +3959,7 @@ class BannerSectionComponent extends BaseSection {
|
|
|
3958
3959
|
this.styles = this.data?.styles;
|
|
3959
3960
|
if (!this.styles || !this.content)
|
|
3960
3961
|
return;
|
|
3962
|
+
console.log("styles", this.styles?.background);
|
|
3961
3963
|
this.getScreenSize();
|
|
3962
3964
|
// this.styles.layout.bannerImageDisplay = this.content.image.showImage;
|
|
3963
3965
|
}
|
|
@@ -3989,7 +3991,7 @@ class BannerSectionComponent extends BaseSection {
|
|
|
3989
3991
|
this.screenWidth = window.innerWidth;
|
|
3990
3992
|
}
|
|
3991
3993
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: BannerSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3992
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: BannerSectionComponent, isStandalone: true, selector: "simpo-banner-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\"\r\n [ngClass]=\"{'mergeNavbar': canMergeNavbar && index == 1, 'justify-content-between d-flex': isBorderlessImage}\"\r\n class=\"total-container\" style=\"overflow-x: hidden;\" simpoHover [ngClass]=\"{'d-block': isBorderlessImage}\"\r\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n <div [spacingAround]=\"stylesLayout\">\r\n <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" class=\"total-container row\" [ngClass]=\"{'row' : isBorderlessImage}\" [simpoCorner]=\"styles?.corners\">\r\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n <div class=\"py-5\" [ngClass]=\"{'col-lg-6 col-xxl-6': content?.image?.showImage && isBorderlessImage, 'w-100 col-xxl-8': !isBorderlessImage || !content?.image?.showImage }\"\r\n [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\">\r\n <div class=\"row g-5 justify-content-start mlr-0\" [id]=\"data?.id\"\r\n [style.flexDirection]=\"styles?.revertImage ? 'column-reverse' : ''\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'flex-lg-row': true }\">\r\n <div class=\"col-10 col-sm-8 col-lg-6\" *ngIf=\"content?.image?.showImage && !isBorderlessImage\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block w-100 insideImg\"\r\n [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" />\r\n </div>\r\n <div class=\"d-flex flex-column justify-content-start gap-15 content-side\"\r\n [ngClass]=\"{'col-lg-12': content?.image?.showImage && isBorderlessImage, 'col-lg-6':!isBorderlessImage || !content?.image?.showImage,'box p-3': content?.display?.showCard}\"\r\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\" [simpoCorner]=\"styles?.corners\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <!-- <div [innerHTML]=\"item.value | sanitizeHtml\" class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div> -->\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"d-flex gap-3 card-container\" [ngClass]=\"{'gap-3': screenWidth > 475 , 'gap-1' : screenWidth <= 475}\">\r\n <div *ngFor=\"let item of content?.listItem?.data\" class=\"carder\">\r\n <div class=\"card_wrapper\">\r\n <div class=\"container_card visible\">\r\n <div class=\"card-section\">\r\n <div class=\"second-part-card\">\r\n </div>\r\n <div class=\"first-part-card d-flex align-items-center\"\r\n [ngClass]=\"item.inputText[0].label=== 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <img loading=\"lazy\" class=\"tick-img\" [src]=\"item?.icon?.url\" alt=\"something\" />\r\n <!-- <div [innerHTML]=\"item.inputText[0].value | sanitizeHtml\" class=\"ml-5\"></div> -->\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\" [edit]=\"edit\"\r\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n [isMerged]=\"styles?.merge ?? false\"></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</div>\r\n<ng-template #ImageSection>\r\n <div class=\"col-10 col-sm-8 col-lg-6\"\r\n [ngStyle]=\"{'width': styles?.positionLayout?.value === 'right' ? 'fit-content' : ''}\"\r\n style=\"padding: 0px !important;\" *ngIf=\"content?.image?.showImage && isBorderlessImage;\"\r\n [simpoBorderless]=\"getPositionLayout\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" class=\"d-block img-fluid h-100 w-100\"\r\n [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"/>\r\n </div>\r\n</ng-template>\r\n", styles: [".btn-primary{border:none}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px}.gap-15{gap:15px}.box{background:#fff;border:8px solid rgb(232 232 232 / 80%);box-shadow:#63636333 0 2px 8px}@media only screen and (max-width: 475px){.col-10{width:100%;max-width:100%;flex-basis:100%;height:32vh;padding-right:13px;padding-left:13px}.total-container{flex-direction:column}.insideImg{height:100%!important}.card-container{flex-direction:column}}.text-element{inline-size:100%;overflow-wrap:break-word}.
|
|
3994
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: BannerSectionComponent, isStandalone: true, selector: "simpo-banner-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\"\r\n [ngClass]=\"{'mergeNavbar': canMergeNavbar && index == 1, 'justify-content-between d-flex': isBorderlessImage}\"\r\n class=\"total-container\" style=\"overflow-x: hidden;\" simpoHover [ngClass]=\"{'d-block': isBorderlessImage}\"\r\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n <div [spacingAround]=\"stylesLayout\">\r\n <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" class=\"total-container row\" [ngClass]=\"{'row' : isBorderlessImage}\" [simpoCorner]=\"styles?.corners\">\r\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n <div class=\"py-5\" [ngClass]=\"{'col-lg-6 col-xxl-6': content?.image?.showImage && isBorderlessImage, 'w-100 col-xxl-8': !isBorderlessImage || !content?.image?.showImage }\"\r\n [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\">\r\n <div class=\"row g-5 justify-content-start mlr-0\" [id]=\"data?.id\"\r\n [style.flexDirection]=\"styles?.revertImage ? 'column-reverse' : ''\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'flex-lg-row': true }\">\r\n <div class=\"col-10 col-sm-8 col-lg-6\" *ngIf=\"content?.image?.showImage && !isBorderlessImage\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block w-100 insideImg\"\r\n [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" />\r\n </div>\r\n <div class=\"d-flex flex-column justify-content-start gap-15 content-side\"\r\n [ngClass]=\"{'col-lg-12': content?.image?.showImage && isBorderlessImage, 'col-lg-6':!isBorderlessImage || !content?.image?.showImage,'box p-3': content?.display?.showCard}\"\r\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\" [simpoCorner]=\"styles?.corners\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <!-- <div [innerHTML]=\"item.value | sanitizeHtml\" class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div> -->\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"d-flex gap-3 card-container\" [ngClass]=\"{'gap-3': screenWidth > 475 , 'gap-1' : screenWidth <= 475}\">\r\n <div *ngFor=\"let item of content?.listItem?.data\" class=\"carder\">\r\n <div class=\"card_wrapper\">\r\n <div class=\"container_card visible\">\r\n <div class=\"card-section\">\r\n <div class=\"second-part-card\">\r\n </div>\r\n <div class=\"first-part-card d-flex align-items-center\"\r\n [ngClass]=\"item.inputText[0].label=== 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <img loading=\"lazy\" class=\"tick-img\" [src]=\"item?.icon?.url\" alt=\"something\" />\r\n <!-- <div [innerHTML]=\"item.inputText[0].value | sanitizeHtml\" class=\"ml-5\"></div> -->\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\" [edit]=\"edit\"\r\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n [isMerged]=\"styles?.merge ?? false\"></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</div>\r\n<ng-template #ImageSection>\r\n <div class=\"col-10 col-sm-8 col-lg-6\"\r\n [ngStyle]=\"{'width': styles?.positionLayout?.value === 'right' ? 'fit-content' : ''}\"\r\n style=\"padding: 0px !important;\" *ngIf=\"content?.image?.showImage && isBorderlessImage;\"\r\n [simpoBorderless]=\"getPositionLayout\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" class=\"d-block img-fluid h-100 w-100\"\r\n [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"/>\r\n </div>\r\n</ng-template>\r\n", styles: [".btn-primary{border:none}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px}.gap-15{gap:15px}.box{background:#fff;border:8px solid rgb(232 232 232 / 80%);box-shadow:#63636333 0 2px 8px}@media only screen and (max-width: 475px){.col-10{width:100%;max-width:100%;flex-basis:100%;height:32vh;padding-right:13px;padding-left:13px}.total-container{flex-direction:column}.insideImg{height:100%!important}.card-container{flex-direction:column}}.text-element{inline-size:100%;overflow-wrap:break-word}.container_card .card-section{align-items:center;gap:20px;padding-top:5px;padding-bottom:5px;width:100%;border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}.card_wrapper{display:flex;flex-direction:column;gap:20px}.visible{visibility:visible!important}.visible .card-section{opacity:1;transform:translateY(0)}.first-part-card{min-width:fit-content}.first-part-card .body-large{font-size:1.1rem;font-weight:700}.second-part-card{width:2px;height:2px;border-radius:50%;display:flex;justify-content:center;align-items:center}.third-part-card .heading-large{font-size:1.1rem;font-weight:700}.third-part-card .body-large{font-size:12px;font-weight:400;line-height:15px}.tick-img{width:25px;height:25px;border-radius:50%}.third-part-card{display:flex;flex-direction:column;gap:10px}.image-card{width:50%!important}.svg{fill:#ffb6c1;transform:rotate(180deg)}.ml-5{margin-left:5px}.mlr-0{margin-left:0;margin-right:0}.d-block{display:block!important}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { 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: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: "ngmodule", type: MatGridListModule }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type:
|
|
3993
3995
|
//directive
|
|
3994
3996
|
SimpoBorderlessDirective, selector: "[simpoBorderless]", inputs: ["simpoBorderless"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround"] }, { kind: "directive", type: ImageEditorDirective, selector: "img[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId"] }] }); }
|
|
3995
3997
|
}
|
|
@@ -4029,7 +4031,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
4029
4031
|
SpacingHorizontalDirective,
|
|
4030
4032
|
SpacingAroundDirective,
|
|
4031
4033
|
ImageEditorDirective
|
|
4032
|
-
], template: "<div [id]=\"data?.id\"\r\n [ngClass]=\"{'mergeNavbar': canMergeNavbar && index == 1, 'justify-content-between d-flex': isBorderlessImage}\"\r\n class=\"total-container\" style=\"overflow-x: hidden;\" simpoHover [ngClass]=\"{'d-block': isBorderlessImage}\"\r\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n <div [spacingAround]=\"stylesLayout\">\r\n <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" class=\"total-container row\" [ngClass]=\"{'row' : isBorderlessImage}\" [simpoCorner]=\"styles?.corners\">\r\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n <div class=\"py-5\" [ngClass]=\"{'col-lg-6 col-xxl-6': content?.image?.showImage && isBorderlessImage, 'w-100 col-xxl-8': !isBorderlessImage || !content?.image?.showImage }\"\r\n [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\">\r\n <div class=\"row g-5 justify-content-start mlr-0\" [id]=\"data?.id\"\r\n [style.flexDirection]=\"styles?.revertImage ? 'column-reverse' : ''\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'flex-lg-row': true }\">\r\n <div class=\"col-10 col-sm-8 col-lg-6\" *ngIf=\"content?.image?.showImage && !isBorderlessImage\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block w-100 insideImg\"\r\n [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" />\r\n </div>\r\n <div class=\"d-flex flex-column justify-content-start gap-15 content-side\"\r\n [ngClass]=\"{'col-lg-12': content?.image?.showImage && isBorderlessImage, 'col-lg-6':!isBorderlessImage || !content?.image?.showImage,'box p-3': content?.display?.showCard}\"\r\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\" [simpoCorner]=\"styles?.corners\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <!-- <div [innerHTML]=\"item.value | sanitizeHtml\" class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div> -->\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"d-flex gap-3 card-container\" [ngClass]=\"{'gap-3': screenWidth > 475 , 'gap-1' : screenWidth <= 475}\">\r\n <div *ngFor=\"let item of content?.listItem?.data\" class=\"carder\">\r\n <div class=\"card_wrapper\">\r\n <div class=\"container_card visible\">\r\n <div class=\"card-section\">\r\n <div class=\"second-part-card\">\r\n </div>\r\n <div class=\"first-part-card d-flex align-items-center\"\r\n [ngClass]=\"item.inputText[0].label=== 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <img loading=\"lazy\" class=\"tick-img\" [src]=\"item?.icon?.url\" alt=\"something\" />\r\n <!-- <div [innerHTML]=\"item.inputText[0].value | sanitizeHtml\" class=\"ml-5\"></div> -->\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\" [edit]=\"edit\"\r\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n [isMerged]=\"styles?.merge ?? false\"></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</div>\r\n<ng-template #ImageSection>\r\n <div class=\"col-10 col-sm-8 col-lg-6\"\r\n [ngStyle]=\"{'width': styles?.positionLayout?.value === 'right' ? 'fit-content' : ''}\"\r\n style=\"padding: 0px !important;\" *ngIf=\"content?.image?.showImage && isBorderlessImage;\"\r\n [simpoBorderless]=\"getPositionLayout\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" class=\"d-block img-fluid h-100 w-100\"\r\n [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"/>\r\n </div>\r\n</ng-template>\r\n", styles: [".btn-primary{border:none}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px}.gap-15{gap:15px}.box{background:#fff;border:8px solid rgb(232 232 232 / 80%);box-shadow:#63636333 0 2px 8px}@media only screen and (max-width: 475px){.col-10{width:100%;max-width:100%;flex-basis:100%;height:32vh;padding-right:13px;padding-left:13px}.total-container{flex-direction:column}.insideImg{height:100%!important}.card-container{flex-direction:column}}.text-element{inline-size:100%;overflow-wrap:break-word}.
|
|
4034
|
+
], template: "<div [id]=\"data?.id\"\r\n [ngClass]=\"{'mergeNavbar': canMergeNavbar && index == 1, 'justify-content-between d-flex': isBorderlessImage}\"\r\n class=\"total-container\" style=\"overflow-x: hidden;\" simpoHover [ngClass]=\"{'d-block': isBorderlessImage}\"\r\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n <div [spacingAround]=\"stylesLayout\">\r\n <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" class=\"total-container row\" [ngClass]=\"{'row' : isBorderlessImage}\" [simpoCorner]=\"styles?.corners\">\r\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n <div class=\"py-5\" [ngClass]=\"{'col-lg-6 col-xxl-6': content?.image?.showImage && isBorderlessImage, 'w-100 col-xxl-8': !isBorderlessImage || !content?.image?.showImage }\"\r\n [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\">\r\n <div class=\"row g-5 justify-content-start mlr-0\" [id]=\"data?.id\"\r\n [style.flexDirection]=\"styles?.revertImage ? 'column-reverse' : ''\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'flex-lg-row': true }\">\r\n <div class=\"col-10 col-sm-8 col-lg-6\" *ngIf=\"content?.image?.showImage && !isBorderlessImage\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block w-100 insideImg\"\r\n [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" />\r\n </div>\r\n <div class=\"d-flex flex-column justify-content-start gap-15 content-side\"\r\n [ngClass]=\"{'col-lg-12': content?.image?.showImage && isBorderlessImage, 'col-lg-6':!isBorderlessImage || !content?.image?.showImage,'box p-3': content?.display?.showCard}\"\r\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\" [simpoCorner]=\"styles?.corners\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <!-- <div [innerHTML]=\"item.value | sanitizeHtml\" class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div> -->\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"d-flex gap-3 card-container\" [ngClass]=\"{'gap-3': screenWidth > 475 , 'gap-1' : screenWidth <= 475}\">\r\n <div *ngFor=\"let item of content?.listItem?.data\" class=\"carder\">\r\n <div class=\"card_wrapper\">\r\n <div class=\"container_card visible\">\r\n <div class=\"card-section\">\r\n <div class=\"second-part-card\">\r\n </div>\r\n <div class=\"first-part-card d-flex align-items-center\"\r\n [ngClass]=\"item.inputText[0].label=== 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <img loading=\"lazy\" class=\"tick-img\" [src]=\"item?.icon?.url\" alt=\"something\" />\r\n <!-- <div [innerHTML]=\"item.inputText[0].value | sanitizeHtml\" class=\"ml-5\"></div> -->\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\" [edit]=\"edit\"\r\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n [isMerged]=\"styles?.merge ?? false\"></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</div>\r\n<ng-template #ImageSection>\r\n <div class=\"col-10 col-sm-8 col-lg-6\"\r\n [ngStyle]=\"{'width': styles?.positionLayout?.value === 'right' ? 'fit-content' : ''}\"\r\n style=\"padding: 0px !important;\" *ngIf=\"content?.image?.showImage && isBorderlessImage;\"\r\n [simpoBorderless]=\"getPositionLayout\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" class=\"d-block img-fluid h-100 w-100\"\r\n [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"/>\r\n </div>\r\n</ng-template>\r\n", styles: [".btn-primary{border:none}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px}.gap-15{gap:15px}.box{background:#fff;border:8px solid rgb(232 232 232 / 80%);box-shadow:#63636333 0 2px 8px}@media only screen and (max-width: 475px){.col-10{width:100%;max-width:100%;flex-basis:100%;height:32vh;padding-right:13px;padding-left:13px}.total-container{flex-direction:column}.insideImg{height:100%!important}.card-container{flex-direction:column}}.text-element{inline-size:100%;overflow-wrap:break-word}.container_card .card-section{align-items:center;gap:20px;padding-top:5px;padding-bottom:5px;width:100%;border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}.card_wrapper{display:flex;flex-direction:column;gap:20px}.visible{visibility:visible!important}.visible .card-section{opacity:1;transform:translateY(0)}.first-part-card{min-width:fit-content}.first-part-card .body-large{font-size:1.1rem;font-weight:700}.second-part-card{width:2px;height:2px;border-radius:50%;display:flex;justify-content:center;align-items:center}.third-part-card .heading-large{font-size:1.1rem;font-weight:700}.third-part-card .body-large{font-size:12px;font-weight:400;line-height:15px}.tick-img{width:25px;height:25px;border-radius:50%}.third-part-card{display:flex;flex-direction:column;gap:10px}.image-card{width:50%!important}.svg{fill:#ffb6c1;transform:rotate(180deg)}.ml-5{margin-left:5px}.mlr-0{margin-left:0;margin-right:0}.d-block{display:block!important}\n"] }]
|
|
4033
4035
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
4034
4036
|
type: Input
|
|
4035
4037
|
}], index: [{
|
|
@@ -6888,7 +6890,7 @@ class AuthenticationRequiredComponent extends BaseSection {
|
|
|
6888
6890
|
let verifySignData = {
|
|
6889
6891
|
name: this.userName,
|
|
6890
6892
|
businessId: this.businessId,
|
|
6891
|
-
businessName: localStorage.getItem('
|
|
6893
|
+
businessName: localStorage.getItem('bName'),
|
|
6892
6894
|
mobile: this.mobile,
|
|
6893
6895
|
email: this.email,
|
|
6894
6896
|
password: this.password,
|
|
@@ -7394,9 +7396,9 @@ class ContactUsComponent extends BaseSection {
|
|
|
7394
7396
|
return Object.hasOwn(field, "status") ? field.status : true;
|
|
7395
7397
|
}
|
|
7396
7398
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ContactUsComponent, deps: [{ token: EventsService }, { token: PLATFORM_ID }, { token: i2$3.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7397
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ContactUsComponent, isStandalone: true, selector: "simpo-contact-us", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:resize": "screenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\"
|
|
7399
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ContactUsComponent, isStandalone: true, selector: "simpo-contact-us", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:resize": "screenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div class=\"spacing-around\" [spacingAround]=\"stylesLayout\">\r\n <div class=\"main-container\" [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [attr.style]=\"customClass\">\r\n <div *ngIf=\"content?.image?.showImage === false\" class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer\r\n [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"row g-5\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"col-12 d-flex justify-content-evenly\" [class.gap-3]=\"screenWidth > 475\" [id]=\"data?.id\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{'align-items-center text-center': styles?.positionLayout?.value === 'top'}\">\r\n <div class=\"d-flex flex-column col-5 pt-5 content-side\">\r\n <div *ngFor=\"let item of content?.inputText\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"col-5 d-flex flex-wrap\" style=\"gap: 1rem;height: fit-content;\">\r\n <ng-container *ngFor=\"let feild of content?.contactField?.fields\">\r\n <simpo-input-fields [opacity]=\"styles?.inputOpacity\" [style.width.%]=\"getWidthByField(feild)\"\r\n [feild]=\"feild\" [bgColor]=\"styles?.background?.color\" [sectionId]=\"data?.id\"\r\n *ngIf=\"canShowContactField(feild)\"></simpo-input-fields>\r\n </ng-container>\r\n <div class=\"w-100\">\r\n <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\" (click)=\"buttonClick()\">{{ content?.contactField?.button\r\n }}</button>\r\n </div>\r\n <!-- <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [color]=\"styles?.background?.accentColor\" (click)=\"buttonClick()\">{{ content?.contactField?.button }}</button> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"content?.image?.showImage\" class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer\r\n [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n <div class=\"gap-5 mobile-display\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'align-items-center text-center': styles?.positionLayout?.value === 'top'}\">\r\n <div class=\"col-10 col-sm-8 col-lg-6 mobile-image\" *ngIf=\"content?.image?.showImage\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block mx-lg-auto img-fluid h-100\"\r\n [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" />\r\n </div>\r\n <div class=\"d-flex flex-column mobile-text\" style=\"width: 46%;\"\r\n [ngClass]=\"{'pt-5': styles?.positionLayout?.value === 'top'}\" [id]=\"data?.id\">\r\n <div class=\"d-flex flex-column content-side\">\r\n <div *ngFor=\"let item of content?.inputText\" [innerHTML]=\"item.value | sanitizeHtml\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\r\n </div>\r\n <div class=\"d-flex flex-wrap justify-content-start align-items-end\" style=\"gap: 1rem;height: fit-content;\">\r\n <ng-container *ngFor=\"let feild of content?.contactField?.fields\">\r\n <simpo-input-fields [opacity]=\"styles?.inputOpacity\" [style.width.%]=\"getWidthByField(feild)\"\r\n [feild]=\"feild\" [bgColor]=\"styles?.background?.color\" [sectionId]=\"data?.id\"></simpo-input-fields>\r\n </ng-container>\r\n <div class=\"w-100\">\r\n <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\" (click)=\"buttonClick()\">{{ content?.contactField?.button\r\n }}</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\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</div>\r\n", styles: [".send-btn{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;margin-top:1rem}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.w-100{width:100%}@media only screen and (max-width: 475px){.col-12{display:flex;flex-direction:column}.pt-5{width:100%}.pt-5 div{font-size:24px}.col-5{width:100%}.send-btn{margin-left:0}.mobile-display{display:flex!important;flex-direction:column!important}.mobile-image{width:100%!important;padding:0!important}.mobile-text{width:100%!important;margin-top:3rem}.mobile-text .d-flex div{font-size:24px}}.gap-3{gap:3rem!important}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { 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: "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: InputFieldsComponent, selector: "simpo-input-fields", inputs: ["feild", "opacity", "bgColor", "sectionId"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type:
|
|
7398
7400
|
//directive
|
|
7399
|
-
AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "ngmodule", type: MatSnackBarModule }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
|
|
7401
|
+
AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "ngmodule", type: MatSnackBarModule }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround"] }] }); }
|
|
7400
7402
|
}
|
|
7401
7403
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ContactUsComponent, decorators: [{
|
|
7402
7404
|
type: Component,
|
|
@@ -7428,8 +7430,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
7428
7430
|
ButtonDirectiveDirective,
|
|
7429
7431
|
MatSnackBarModule,
|
|
7430
7432
|
SanitizeHtmlPipe,
|
|
7431
|
-
SpacingHorizontalDirective
|
|
7432
|
-
|
|
7433
|
+
SpacingHorizontalDirective,
|
|
7434
|
+
SpacingAroundDirective
|
|
7435
|
+
], template: "<div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div class=\"spacing-around\" [spacingAround]=\"stylesLayout\">\r\n <div class=\"main-container\" [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [attr.style]=\"customClass\">\r\n <div *ngIf=\"content?.image?.showImage === false\" class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer\r\n [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"row g-5\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"col-12 d-flex justify-content-evenly\" [class.gap-3]=\"screenWidth > 475\" [id]=\"data?.id\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{'align-items-center text-center': styles?.positionLayout?.value === 'top'}\">\r\n <div class=\"d-flex flex-column col-5 pt-5 content-side\">\r\n <div *ngFor=\"let item of content?.inputText\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"col-5 d-flex flex-wrap\" style=\"gap: 1rem;height: fit-content;\">\r\n <ng-container *ngFor=\"let feild of content?.contactField?.fields\">\r\n <simpo-input-fields [opacity]=\"styles?.inputOpacity\" [style.width.%]=\"getWidthByField(feild)\"\r\n [feild]=\"feild\" [bgColor]=\"styles?.background?.color\" [sectionId]=\"data?.id\"\r\n *ngIf=\"canShowContactField(feild)\"></simpo-input-fields>\r\n </ng-container>\r\n <div class=\"w-100\">\r\n <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\" (click)=\"buttonClick()\">{{ content?.contactField?.button\r\n }}</button>\r\n </div>\r\n <!-- <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [color]=\"styles?.background?.accentColor\" (click)=\"buttonClick()\">{{ content?.contactField?.button }}</button> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"content?.image?.showImage\" class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer\r\n [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n <div class=\"gap-5 mobile-display\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'align-items-center text-center': styles?.positionLayout?.value === 'top'}\">\r\n <div class=\"col-10 col-sm-8 col-lg-6 mobile-image\" *ngIf=\"content?.image?.showImage\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block mx-lg-auto img-fluid h-100\"\r\n [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" />\r\n </div>\r\n <div class=\"d-flex flex-column mobile-text\" style=\"width: 46%;\"\r\n [ngClass]=\"{'pt-5': styles?.positionLayout?.value === 'top'}\" [id]=\"data?.id\">\r\n <div class=\"d-flex flex-column content-side\">\r\n <div *ngFor=\"let item of content?.inputText\" [innerHTML]=\"item.value | sanitizeHtml\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\r\n </div>\r\n <div class=\"d-flex flex-wrap justify-content-start align-items-end\" style=\"gap: 1rem;height: fit-content;\">\r\n <ng-container *ngFor=\"let feild of content?.contactField?.fields\">\r\n <simpo-input-fields [opacity]=\"styles?.inputOpacity\" [style.width.%]=\"getWidthByField(feild)\"\r\n [feild]=\"feild\" [bgColor]=\"styles?.background?.color\" [sectionId]=\"data?.id\"></simpo-input-fields>\r\n </ng-container>\r\n <div class=\"w-100\">\r\n <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\" (click)=\"buttonClick()\">{{ content?.contactField?.button\r\n }}</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\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</div>\r\n", styles: [".send-btn{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;margin-top:1rem}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.w-100{width:100%}@media only screen and (max-width: 475px){.col-12{display:flex;flex-direction:column}.pt-5{width:100%}.pt-5 div{font-size:24px}.col-5{width:100%}.send-btn{margin-left:0}.mobile-display{display:flex!important;flex-direction:column!important}.mobile-image{width:100%!important;padding:0!important}.mobile-text{width:100%!important;margin-top:3rem}.mobile-text .d-flex div{font-size:24px}}.gap-3{gap:3rem!important}\n"] }]
|
|
7433
7436
|
}], ctorParameters: () => [{ type: EventsService }, { type: Object, decorators: [{
|
|
7434
7437
|
type: Inject,
|
|
7435
7438
|
args: [PLATFORM_ID]
|
|
@@ -7626,7 +7629,7 @@ class PricingSectionComponent extends BaseSection {
|
|
|
7626
7629
|
redirectTo() {
|
|
7627
7630
|
}
|
|
7628
7631
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PricingSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7629
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: PricingSectionComponent, isStandalone: true, selector: "simpo-pricing-section", inputs: { data: "data", index: "index", edit: "edit", customClass: "customClass", delete: "delete", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n <div *ngFor=\"let text of data?.content?.inputText\" [simpoContentTitleSpace]=\"headingSpace\">\r\n <!-- <div class=\"heading-large content-side\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value | sanitizeHtml\"></div> -->\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"pricing-options d-flex\">\r\n <div class=\"individual-options\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\" *ngFor=\"let options of content?.listItem?.data\"\r\n [ngClass]=\"{'highlighted-option': options.highlight.highlighted === true,\r\n 'individual-options-3': content?.listItem?.data?.length === 3,\r\n 'individual-options-2': content?.listItem?.data?.length === 2,\r\n 'individual-options-1': content?.listItem?.data?.length === 1\r\n }\">\r\n <img loading=\"lazy\" class=\"image\" *ngIf=\"content?.display?.showImage === true\"\r\n [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"options.image.position\"\r\n [simpoCorner]=\"style?.corners\" [src]=\"options.image.url \" alt=\"\" width=\"92%\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"options?.image\" [sectionId]=\"data?.id\" [class]=\"data?.id+(options?.image?.id || '')\">\r\n <div class=\"highlight-label\" *ngIf=\"options.highlight.highlighted === true\" [ngStyle]=\"{'background-color': getTextColor()}\" [simpoColor]=\"getTextColor()\">\r\n {{options.highlight.label}}\r\n </div>\r\n <!-- <div class=\"heading-small content-side\" [innerHTML]=\"options.inputText[0].value | sanitizeHtml \"></div>\r\n <div class=\"heading-large price content-side\" [innerHTML]=\"options.inputText[2].value | sanitizeHtml \"></div>\r\n <div class=\"body-desc content-side\" [innerHTML]=\"options.inputText[3].value | sanitizeHtml \"></div> -->\r\n <div class=\"heading-small\">\r\n <simpo-text-editor [(value)]=\"options.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"heading-large price\">\r\n <simpo-text-editor [(value)]=\"options.inputText[2].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"body-desc\">\r\n <simpo-text-editor [(value)]=\"options.inputText[3].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n\r\n <div class=\"btn\" *ngIf=\"content?.display?.showButton === true\">\r\n <button class=\"button\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"style?.background\" (click)=\"redirectTo()\">{{options?.button?.label}}</button>\r\n </div>\r\n <div class=\"body-desc description\" *ngIf=\"content?.display?.showContent === true\">\r\n <simpo-text-editor [(value)]=\"options.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"body-desc content-options\" *ngIf=\"content?.display?.showIncludeditems\">\r\n <div class=\"d-flex gap-15\" *ngFor=\"let content of options.additionalData\">\r\n <mat-icon>check</mat-icon><simpo-text-editor [(value)]=\"content.content\" [editable]=\"edit || false\"></simpo-text-editor>\r\n <!-- {{content.content}} -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\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", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.container-fluid{height:auto;padding:6rem 3rem}.pricing-options{width:100%;justify-content:center}.individual-options{border:1.5px solid;display:flex;flex-direction:column;align-items:center;padding:30px 10px;margin-top:6rem;margin-bottom:3rem;width:25%}.individual-options-3{width:32%}.individual-options-3 .btn{width:95%}.btn{width:97%;border:none;box-shadow:none}.individual-options-2{width:40%}.individual-options-1{width:75%}.individual-options-1 .btn{width:95%}.highlighted-option{margin-top:1rem;margin-bottom:0rem;height:auto;
|
|
7632
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: PricingSectionComponent, isStandalone: true, selector: "simpo-pricing-section", inputs: { data: "data", index: "index", edit: "edit", customClass: "customClass", delete: "delete", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n <div *ngFor=\"let text of data?.content?.inputText\" [simpoContentTitleSpace]=\"headingSpace\">\r\n <!-- <div class=\"heading-large content-side\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value | sanitizeHtml\"></div> -->\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"pricing-options d-flex\">\r\n <div class=\"individual-options\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\" *ngFor=\"let options of content?.listItem?.data\"\r\n [ngClass]=\"{'highlighted-option': options.highlight.highlighted === true,\r\n 'individual-options-3': content?.listItem?.data?.length === 3,\r\n 'individual-options-2': content?.listItem?.data?.length === 2,\r\n 'individual-options-1': content?.listItem?.data?.length === 1\r\n }\">\r\n <img loading=\"lazy\" class=\"image\" *ngIf=\"content?.display?.showImage === true\"\r\n [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"options.image.position\"\r\n [simpoCorner]=\"style?.corners\" [src]=\"options.image.url \" alt=\"\" width=\"92%\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"options?.image\" [sectionId]=\"data?.id\" [class]=\"data?.id+(options?.image?.id || '')\">\r\n <div class=\"highlight-label\" *ngIf=\"options.highlight.highlighted === true\" [ngStyle]=\"{'background-color': getTextColor()}\" [simpoColor]=\"getTextColor()\">\r\n {{options.highlight.label}}\r\n </div>\r\n <!-- <div class=\"heading-small content-side\" [innerHTML]=\"options.inputText[0].value | sanitizeHtml \"></div>\r\n <div class=\"heading-large price content-side\" [innerHTML]=\"options.inputText[2].value | sanitizeHtml \"></div>\r\n <div class=\"body-desc content-side\" [innerHTML]=\"options.inputText[3].value | sanitizeHtml \"></div> -->\r\n <div class=\"heading-small\">\r\n <simpo-text-editor [(value)]=\"options.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"heading-large price\">\r\n <simpo-text-editor [(value)]=\"options.inputText[2].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"body-desc\">\r\n <simpo-text-editor [(value)]=\"options.inputText[3].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n\r\n <div class=\"btn\" *ngIf=\"content?.display?.showButton === true\">\r\n <button class=\"button\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"style?.background\" (click)=\"redirectTo()\">{{options?.button?.label}}</button>\r\n </div>\r\n <div class=\"body-desc description\" *ngIf=\"content?.display?.showContent === true\">\r\n <simpo-text-editor [(value)]=\"options.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"body-desc content-options\" *ngIf=\"content?.display?.showIncludeditems\">\r\n <div class=\"d-flex gap-15\" *ngFor=\"let content of options.additionalData\">\r\n <mat-icon>check</mat-icon><simpo-text-editor [(value)]=\"content.content\" [editable]=\"edit || false\"></simpo-text-editor>\r\n <!-- {{content.content}} -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\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", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.container-fluid{height:auto;padding:6rem 3rem}.pricing-options{width:100%;justify-content:center}.individual-options{border:1.5px solid;display:flex;flex-direction:column;align-items:center;padding:30px 10px;margin-top:6rem;margin-bottom:3rem;width:25%}.individual-options-3{width:32%}.individual-options-3 .btn{width:95%}.btn{width:97%;border:none;box-shadow:none}.individual-options-2{width:40%}.individual-options-1{width:75%}.individual-options-1 .btn{width:95%}.highlighted-option{margin-top:1rem;margin-bottom:0rem;padding-top:7rem;height:auto;border:3px solid}.highlighted-option .heading-small{padding-top:5px}.heading-small{padding:15px 5px;text-align:left;font-size:24px;width:94%}.price,.body-desc{text-align:left;width:89%}.description{line-height:30px;padding-top:11px}.content-options{padding-top:20px}.gap-15{gap:15px;padding:.75rem 0}.highlight-label{padding:5px 17px;display:flex;align-items:flex-start;flex-direction:column;width:auto;border-radius:25px;margin-top:20px;margin-right:auto;margin-left:17px;font-size:15px}.button{margin-top:2rem;margin-bottom:.25rem;font-size:17px!important;padding:.75rem 0}.pricing-package{margin-top:10px;width:90%;margin-bottom:10px}@media only screen and (max-width: 475px){.pricing-options{flex-direction:column}.individual-options,.highlighted-option{width:100%;margin-top:1rem;margin-bottom:1rem;padding:2rem}.button{white-space:nowrap!important;margin-top:2.5rem;margin-bottom:2rem}.btn{width:106%}.highlight-label{margin-left:4px}.price{margin-top:10px;width:97%}.body-desc{width:97%}:is(.individual-options-1,.individual-options-2,.individual-options-3) .btn{width:100%}.image{width:100%!important}.heading-small{width:100%}.content-options{padding-top:10px}}\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: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { 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: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "directive", type: ImageEditorDirective, selector: "img[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
|
|
7630
7633
|
}
|
|
7631
7634
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PricingSectionComponent, decorators: [{
|
|
7632
7635
|
type: Component,
|
|
@@ -7650,7 +7653,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
7650
7653
|
ContentTitleDirective,
|
|
7651
7654
|
SanitizeHtmlPipe, SvgDividerComponent,
|
|
7652
7655
|
ImageEditorDirective, SpacingHorizontalDirective
|
|
7653
|
-
], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n <div *ngFor=\"let text of data?.content?.inputText\" [simpoContentTitleSpace]=\"headingSpace\">\r\n <!-- <div class=\"heading-large content-side\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value | sanitizeHtml\"></div> -->\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"pricing-options d-flex\">\r\n <div class=\"individual-options\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\" *ngFor=\"let options of content?.listItem?.data\"\r\n [ngClass]=\"{'highlighted-option': options.highlight.highlighted === true,\r\n 'individual-options-3': content?.listItem?.data?.length === 3,\r\n 'individual-options-2': content?.listItem?.data?.length === 2,\r\n 'individual-options-1': content?.listItem?.data?.length === 1\r\n }\">\r\n <img loading=\"lazy\" class=\"image\" *ngIf=\"content?.display?.showImage === true\"\r\n [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"options.image.position\"\r\n [simpoCorner]=\"style?.corners\" [src]=\"options.image.url \" alt=\"\" width=\"92%\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"options?.image\" [sectionId]=\"data?.id\" [class]=\"data?.id+(options?.image?.id || '')\">\r\n <div class=\"highlight-label\" *ngIf=\"options.highlight.highlighted === true\" [ngStyle]=\"{'background-color': getTextColor()}\" [simpoColor]=\"getTextColor()\">\r\n {{options.highlight.label}}\r\n </div>\r\n <!-- <div class=\"heading-small content-side\" [innerHTML]=\"options.inputText[0].value | sanitizeHtml \"></div>\r\n <div class=\"heading-large price content-side\" [innerHTML]=\"options.inputText[2].value | sanitizeHtml \"></div>\r\n <div class=\"body-desc content-side\" [innerHTML]=\"options.inputText[3].value | sanitizeHtml \"></div> -->\r\n <div class=\"heading-small\">\r\n <simpo-text-editor [(value)]=\"options.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"heading-large price\">\r\n <simpo-text-editor [(value)]=\"options.inputText[2].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"body-desc\">\r\n <simpo-text-editor [(value)]=\"options.inputText[3].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n\r\n <div class=\"btn\" *ngIf=\"content?.display?.showButton === true\">\r\n <button class=\"button\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"style?.background\" (click)=\"redirectTo()\">{{options?.button?.label}}</button>\r\n </div>\r\n <div class=\"body-desc description\" *ngIf=\"content?.display?.showContent === true\">\r\n <simpo-text-editor [(value)]=\"options.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"body-desc content-options\" *ngIf=\"content?.display?.showIncludeditems\">\r\n <div class=\"d-flex gap-15\" *ngFor=\"let content of options.additionalData\">\r\n <mat-icon>check</mat-icon><simpo-text-editor [(value)]=\"content.content\" [editable]=\"edit || false\"></simpo-text-editor>\r\n <!-- {{content.content}} -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\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", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.container-fluid{height:auto;padding:6rem 3rem}.pricing-options{width:100%;justify-content:center}.individual-options{border:1.5px solid;display:flex;flex-direction:column;align-items:center;padding:30px 10px;margin-top:6rem;margin-bottom:3rem;width:25%}.individual-options-3{width:32%}.individual-options-3 .btn{width:95%}.btn{width:97%;border:none;box-shadow:none}.individual-options-2{width:40%}.individual-options-1{width:75%}.individual-options-1 .btn{width:95%}.highlighted-option{margin-top:1rem;margin-bottom:0rem;height:auto;
|
|
7656
|
+
], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n <div *ngFor=\"let text of data?.content?.inputText\" [simpoContentTitleSpace]=\"headingSpace\">\r\n <!-- <div class=\"heading-large content-side\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value | sanitizeHtml\"></div> -->\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"pricing-options d-flex\">\r\n <div class=\"individual-options\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\" *ngFor=\"let options of content?.listItem?.data\"\r\n [ngClass]=\"{'highlighted-option': options.highlight.highlighted === true,\r\n 'individual-options-3': content?.listItem?.data?.length === 3,\r\n 'individual-options-2': content?.listItem?.data?.length === 2,\r\n 'individual-options-1': content?.listItem?.data?.length === 1\r\n }\">\r\n <img loading=\"lazy\" class=\"image\" *ngIf=\"content?.display?.showImage === true\"\r\n [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"options.image.position\"\r\n [simpoCorner]=\"style?.corners\" [src]=\"options.image.url \" alt=\"\" width=\"92%\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"options?.image\" [sectionId]=\"data?.id\" [class]=\"data?.id+(options?.image?.id || '')\">\r\n <div class=\"highlight-label\" *ngIf=\"options.highlight.highlighted === true\" [ngStyle]=\"{'background-color': getTextColor()}\" [simpoColor]=\"getTextColor()\">\r\n {{options.highlight.label}}\r\n </div>\r\n <!-- <div class=\"heading-small content-side\" [innerHTML]=\"options.inputText[0].value | sanitizeHtml \"></div>\r\n <div class=\"heading-large price content-side\" [innerHTML]=\"options.inputText[2].value | sanitizeHtml \"></div>\r\n <div class=\"body-desc content-side\" [innerHTML]=\"options.inputText[3].value | sanitizeHtml \"></div> -->\r\n <div class=\"heading-small\">\r\n <simpo-text-editor [(value)]=\"options.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"heading-large price\">\r\n <simpo-text-editor [(value)]=\"options.inputText[2].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"body-desc\">\r\n <simpo-text-editor [(value)]=\"options.inputText[3].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n\r\n <div class=\"btn\" *ngIf=\"content?.display?.showButton === true\">\r\n <button class=\"button\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"style?.background\" (click)=\"redirectTo()\">{{options?.button?.label}}</button>\r\n </div>\r\n <div class=\"body-desc description\" *ngIf=\"content?.display?.showContent === true\">\r\n <simpo-text-editor [(value)]=\"options.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"body-desc content-options\" *ngIf=\"content?.display?.showIncludeditems\">\r\n <div class=\"d-flex gap-15\" *ngFor=\"let content of options.additionalData\">\r\n <mat-icon>check</mat-icon><simpo-text-editor [(value)]=\"content.content\" [editable]=\"edit || false\"></simpo-text-editor>\r\n <!-- {{content.content}} -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\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", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.container-fluid{height:auto;padding:6rem 3rem}.pricing-options{width:100%;justify-content:center}.individual-options{border:1.5px solid;display:flex;flex-direction:column;align-items:center;padding:30px 10px;margin-top:6rem;margin-bottom:3rem;width:25%}.individual-options-3{width:32%}.individual-options-3 .btn{width:95%}.btn{width:97%;border:none;box-shadow:none}.individual-options-2{width:40%}.individual-options-1{width:75%}.individual-options-1 .btn{width:95%}.highlighted-option{margin-top:1rem;margin-bottom:0rem;padding-top:7rem;height:auto;border:3px solid}.highlighted-option .heading-small{padding-top:5px}.heading-small{padding:15px 5px;text-align:left;font-size:24px;width:94%}.price,.body-desc{text-align:left;width:89%}.description{line-height:30px;padding-top:11px}.content-options{padding-top:20px}.gap-15{gap:15px;padding:.75rem 0}.highlight-label{padding:5px 17px;display:flex;align-items:flex-start;flex-direction:column;width:auto;border-radius:25px;margin-top:20px;margin-right:auto;margin-left:17px;font-size:15px}.button{margin-top:2rem;margin-bottom:.25rem;font-size:17px!important;padding:.75rem 0}.pricing-package{margin-top:10px;width:90%;margin-bottom:10px}@media only screen and (max-width: 475px){.pricing-options{flex-direction:column}.individual-options,.highlighted-option{width:100%;margin-top:1rem;margin-bottom:1rem;padding:2rem}.button{white-space:nowrap!important;margin-top:2.5rem;margin-bottom:2rem}.btn{width:106%}.highlight-label{margin-left:4px}.price{margin-top:10px;width:97%}.body-desc{width:97%}:is(.individual-options-1,.individual-options-2,.individual-options-3) .btn{width:100%}.image{width:100%!important}.heading-small{width:100%}.content-options{padding-top:10px}}\n"] }]
|
|
7654
7657
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
7655
7658
|
type: Input
|
|
7656
7659
|
}], index: [{
|
|
@@ -9345,11 +9348,11 @@ class LogoShowcaseComponent extends BaseSection {
|
|
|
9345
9348
|
}, 100);
|
|
9346
9349
|
}
|
|
9347
9350
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: LogoShowcaseComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9348
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: LogoShowcaseComponent, isStandalone: true, selector: "simpo-logo-showcase", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"styles?.showCaseType==='Grid'\">\r\n <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div class=\"col-xxl-8 px-4 py-5 w-100 \" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" #mainContainer\r\n [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"row g-5 gridtext\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n *ngIf=\"styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'}\">\r\n\r\n <div class=\"col-5 gridimg w-full mb-20 content-side\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <!-- <div [innerHTML]=\"item.value | sanitizeHtml\" class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-7 d-flex flex-wrap flex-1 w-full\">\r\n <div class=\"slider flex overflow-hidden w-full\">\r\n <div class=\"slider-track\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\r\n <div class=\"slides\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\r\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <img loading=\"lazy\" [simpoCorner]=\"styles?.corners\" [src]=\"item?.image?.url\"\r\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.image?.id || '')\">\r\n </div>\r\n </div>\r\n </div>\r\n <!-- </div> -->\r\n </div>\r\n </div>\r\n <div class=\"flex-column row g-2\" [id]=\"data?.id\"\r\n [simpoLayout]=\"styles?.layout\" *ngIf=\"styles?.positionLayout?.value === 'bottom'\">\r\n <div class=\"px-5 mb-20 content-side\" [id]=\"data?.id\"\r\n [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n\r\n <div class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\"[backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-12 flex flex-wrap items-center w-full gap-2 justify-center\">\r\n <!-- flex flex-wrap items-center w-full gap-2 justify-center -->\r\n <div class=\"slider flex overflow-hidden w-full\">\r\n <div class=\"slider-track w-full\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\r\n <div class=\"slides\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\r\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <img loading=\"lazy\" [simpoCorner]=\"styles?.corners\" [src]=\"item?.image?.url\"\r\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n </div>\r\n </div>\r\n <!-- </div> -->\r\n </div>\r\n\r\n\r\n\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\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 </div>\r\n</div>\r\n\r\n<div *ngIf=\"styles?.showCaseType==='Carousal'\">\r\n <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\">\r\n\r\n <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\">\r\n <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\">\r\n <div class=\"mainsec px-5 content-side\" [id]=\"data?.id\"\r\n [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n\r\n <div class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"gap-2 d-md-flex mt-15\" [ngClass]=\"[\r\n styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n ]\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{\r\n 'fullwidth flex-1 inline-edit ': styles?.fullWidth,\r\n 'nofullwidth flex-1 inline-edit ': !styles?.fullWidth\r\n }\">\r\n <div class=\"masking\">\r\n\r\n <div class=\"slider animation \" [style.animationDuration]=\"animationDuration\"\r\n [style.animationDirection]=\"animationDirection\">\r\n <div class=\"slider-track2\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\r\n <div class=\"slides2\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\r\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <img loading=\"lazy\" [simpoCorner]=\"styles?.corners\" [src]=\"item?.image?.url\"\r\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n <div class=\"slides\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\r\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <img loading=\"lazy\" [simpoCorner]=\"styles?.corners\" [src]=\"item?.image?.url\"\r\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n <div class=\"slides\" [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'\r\n }\" *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <img loading=\"lazy\" [simpoCorner]=\"styles?.corners\" [src]=\"item?.image?.url\"\r\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\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 </div>\r\n</div>", styles: [".masking{mask:linear-gradient(90deg,transparent,white 5%,white 95%,transparent);overflow:hidden;width:100%}.sliderdad{width:100%;display:flex}@media (min-width: 860px){.nofullwidth{padding-left:15rem;padding-right:15rem;overflow:hidden}}.slider-track2{min-width:max-content;translate:none;rotate:none;scale:none;justify-content:center;align-items:center;flex-wrap:wrap;width:100%;display:flex}.mainsec{gap:2rem;flex-direction:column;display:flex}.slider-track2.logotype-boxed{gap:1rem}.slider-track2.logotype-basic{gap:5rem}.slides2.logotype-boxed{padding:1.5rem 1.25rem;--tw-bg-opacity: .05;flex-shrink:0;width:auto;height:8rem;display:flex;position:relative;background-color:rgba(0,0,0,var(--tw-bg-opacity))}.slides2.logotype-basic{flex-shrink:0;width:auto;height:5rem;display:flex;position:relative}.slides2.img{height:100%;max-width:100%;border-style:solid}@keyframes scrollLeft{0%{transform:translateZ(0)}to{transform:translate3d(-50%,0,0)}}@keyframes scrollRight{0%{transform:translate3d(-50%,0,0)}to{transform:translateZ(0)}}.animation{animation:scrollLeft 5s linear infinite}.slider-track{justify-content:center;align-items:center;flex-wrap:wrap;width:100%;display:flex}.slider-track.logotype-basic{gap:5rem}.slider-track.logotype-boxed{gap:1rem}.slides.logotype-basic{flex-shrink:0;width:auto;height:5rem;display:flex;position:relative}.slides.logotype-boxed{padding:1.5rem .625rem;--tw-bg-opacity: .05;background-color:rgba(0,0,0,var(--tw-bg-opacity));justify-content:center;flex-grow:1;flex-shrink:0;width:auto;height:8rem;display:flex;position:relative}.slides.img{border-style:solid;max-width:100%;height:100%}@media only screen and (min-width: 375px) and (max-width: 500px){.col-xxl-8{padding-left:0!important;padding-right:0!important}.mainsec{padding-right:2rem!important;padding-left:2rem!important}.col-7{min-width:50%;width:100%;max-width:100%}.col-5{width:100%}}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-20{margin-top:20px}.mb-20{margin-bottom:20px}\n"], dependencies: [{ kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { 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: "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: "ngmodule", type: MatGridListModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ImageEditorDirective, selector: "img[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId"] }] }); }
|
|
9351
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: LogoShowcaseComponent, isStandalone: true, selector: "simpo-logo-showcase", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"styles?.showCaseType==='Grid'\">\r\n <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div class=\"col-xxl-8 px-4 py-5 w-100 \" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" #mainContainer\r\n [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"row g-5 gridtext\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n *ngIf=\"styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'}\">\r\n\r\n <div class=\"col-5 gridimg w-full mb-20 content-side\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <!-- <div [innerHTML]=\"item.value | sanitizeHtml\" class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-7 d-flex flex-wrap flex-1 w-full\">\r\n <div class=\"slider flex overflow-hidden w-full\">\r\n <div class=\"slider-track\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\r\n <div class=\"slides\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\r\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <img loading=\"lazy\" [simpoCorner]=\"styles?.corners\" [src]=\"item?.image?.url\"\r\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.image?.id || '')\">\r\n </div>\r\n </div>\r\n </div>\r\n <!-- </div> -->\r\n </div>\r\n </div>\r\n <div class=\"flex-column row g-2\" [id]=\"data?.id\"\r\n [simpoLayout]=\"styles?.layout\" *ngIf=\"styles?.positionLayout?.value === 'bottom'\">\r\n <div class=\"px-5 mb-20 content-side\" [id]=\"data?.id\"\r\n [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n\r\n <div class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\"[backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-12 flex flex-wrap items-center w-full gap-2 justify-center\">\r\n <!-- flex flex-wrap items-center w-full gap-2 justify-center -->\r\n <div class=\"slider flex overflow-hidden w-full\">\r\n <div class=\"slider-track w-full\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\r\n <div class=\"slides\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\r\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <img loading=\"lazy\" [simpoCorner]=\"styles?.corners\" [src]=\"item?.image?.url\"\r\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n </div>\r\n </div>\r\n <!-- </div> -->\r\n </div>\r\n\r\n\r\n\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\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 </div>\r\n</div>\r\n\r\n<div *ngIf=\"styles?.showCaseType==='Carousal'\">\r\n <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\">\r\n\r\n <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\">\r\n <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\">\r\n <div class=\"mainsec px-5 content-side\" [id]=\"data?.id\"\r\n [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n\r\n <div class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"gap-2 d-md-flex mt-15\" [ngClass]=\"[\r\n styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n ]\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{\r\n 'fullwidth flex-1 inline-edit ': styles?.fullWidth,\r\n 'nofullwidth flex-1 inline-edit ': !styles?.fullWidth\r\n }\">\r\n <div class=\"masking\">\r\n\r\n <div class=\"slider animation \" [style.animationDuration]=\"animationDuration\"\r\n [style.animationDirection]=\"animationDirection\">\r\n <div class=\"slider-track2\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\r\n <div class=\"slides2\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\r\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <img loading=\"lazy\" [simpoCorner]=\"styles?.corners\" [src]=\"item?.image?.url\"\r\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n <div class=\"slides\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\r\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <img loading=\"lazy\" [simpoCorner]=\"styles?.corners\" [src]=\"item?.image?.url\"\r\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n <div class=\"slides\" [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'\r\n }\" *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <img loading=\"lazy\" [simpoCorner]=\"styles?.corners\" [src]=\"item?.image?.url\"\r\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\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 </div>\r\n</div>", styles: [".masking{mask:linear-gradient(90deg,transparent,white 5%,white 95%,transparent);overflow:hidden;width:100%}.sliderdad{width:100%;display:flex}@media (min-width: 860px){.nofullwidth{padding-left:15rem;padding-right:15rem;overflow:hidden}}.slider-track2{min-width:max-content;translate:none;rotate:none;scale:none;justify-content:center;align-items:center;flex-wrap:wrap;width:100%;display:flex}.mainsec{gap:2rem;flex-direction:column;display:flex}.slider-track2.logotype-boxed{gap:1rem}.slider-track2.logotype-basic{gap:5rem}.slides2.logotype-boxed{padding:1.5rem 1.25rem;--tw-bg-opacity: .05;flex-shrink:0;width:auto;height:8rem;display:flex;position:relative;background-color:rgba(0,0,0,var(--tw-bg-opacity))}.slides2.logotype-basic{flex-shrink:0;width:auto;height:5rem;display:flex;position:relative}.slides2.img{height:100%;max-width:100%;border-style:solid}@keyframes scrollLeft{0%{transform:translateZ(0)}to{transform:translate3d(-50%,0,0)}}@keyframes scrollRight{0%{transform:translate3d(-50%,0,0)}to{transform:translateZ(0)}}.animation{animation:scrollLeft 5s linear infinite}.slider-track{justify-content:center;align-items:center;flex-wrap:wrap;width:100%;display:flex}.slider-track.logotype-basic{gap:5rem}.slider-track.logotype-boxed{gap:1rem}.slides.logotype-basic{flex-shrink:0;width:auto;height:5rem;display:flex;position:relative}.slides.logotype-boxed{padding:1.5rem .625rem;--tw-bg-opacity: .05;background-color:rgba(0,0,0,var(--tw-bg-opacity));justify-content:center;flex-grow:1;flex-shrink:0;width:auto;height:8rem;display:flex;position:relative}.slides.img{border-style:solid;max-width:100%;height:100%}@media only screen and (min-width: 375px) and (max-width: 500px){.col-xxl-8{padding-left:0!important;padding-right:0!important}.mainsec{padding-right:2rem!important;padding-left:2rem!important}.col-7{min-width:50%;width:100%;max-width:100%}.col-5{width:100%}}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-20{margin-top:20px}.mb-20{margin-bottom:20px}.row{margin-left:0;margin-right:0}\n"], dependencies: [{ kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { 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: "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: "ngmodule", type: MatGridListModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ImageEditorDirective, selector: "img[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId"] }] }); }
|
|
9349
9352
|
}
|
|
9350
9353
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: LogoShowcaseComponent, decorators: [{
|
|
9351
9354
|
type: Component,
|
|
9352
|
-
args: [{ selector: 'simpo-logo-showcase', standalone: true, imports: [SimpoButtonComponent, SimpoElementsModule, SanitizeHtmlPipe, TextEditorComponent, SimpoComponentModule, CommonModule, MatGridListModule, AnimationDirective, BackgroundDirective, ContentFitDirective, BorderDirective, BannerContentFitDirective, ButtonDirectiveDirective, ColumnDirectiveDirective, ContainerFitDirective, CornerDirective, simpoConetenAlignmentDirective, SimpoFooterLayoutDirective, HoverDirective, ImageDirectiveDirective, OverlayDirective, PositionLayoutDirectiveDirective, TextBackgroundDirectiveDirective, SpacingHorizontalDirective, ObjectPositionDirective, ImageEditorDirective], template: "<div *ngIf=\"styles?.showCaseType==='Grid'\">\r\n <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div class=\"col-xxl-8 px-4 py-5 w-100 \" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" #mainContainer\r\n [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"row g-5 gridtext\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n *ngIf=\"styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'}\">\r\n\r\n <div class=\"col-5 gridimg w-full mb-20 content-side\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <!-- <div [innerHTML]=\"item.value | sanitizeHtml\" class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-7 d-flex flex-wrap flex-1 w-full\">\r\n <div class=\"slider flex overflow-hidden w-full\">\r\n <div class=\"slider-track\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\r\n <div class=\"slides\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\r\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <img loading=\"lazy\" [simpoCorner]=\"styles?.corners\" [src]=\"item?.image?.url\"\r\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.image?.id || '')\">\r\n </div>\r\n </div>\r\n </div>\r\n <!-- </div> -->\r\n </div>\r\n </div>\r\n <div class=\"flex-column row g-2\" [id]=\"data?.id\"\r\n [simpoLayout]=\"styles?.layout\" *ngIf=\"styles?.positionLayout?.value === 'bottom'\">\r\n <div class=\"px-5 mb-20 content-side\" [id]=\"data?.id\"\r\n [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n\r\n <div class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\"[backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-12 flex flex-wrap items-center w-full gap-2 justify-center\">\r\n <!-- flex flex-wrap items-center w-full gap-2 justify-center -->\r\n <div class=\"slider flex overflow-hidden w-full\">\r\n <div class=\"slider-track w-full\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\r\n <div class=\"slides\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\r\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <img loading=\"lazy\" [simpoCorner]=\"styles?.corners\" [src]=\"item?.image?.url\"\r\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n </div>\r\n </div>\r\n <!-- </div> -->\r\n </div>\r\n\r\n\r\n\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\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 </div>\r\n</div>\r\n\r\n<div *ngIf=\"styles?.showCaseType==='Carousal'\">\r\n <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\">\r\n\r\n <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\">\r\n <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\">\r\n <div class=\"mainsec px-5 content-side\" [id]=\"data?.id\"\r\n [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n\r\n <div class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"gap-2 d-md-flex mt-15\" [ngClass]=\"[\r\n styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n ]\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{\r\n 'fullwidth flex-1 inline-edit ': styles?.fullWidth,\r\n 'nofullwidth flex-1 inline-edit ': !styles?.fullWidth\r\n }\">\r\n <div class=\"masking\">\r\n\r\n <div class=\"slider animation \" [style.animationDuration]=\"animationDuration\"\r\n [style.animationDirection]=\"animationDirection\">\r\n <div class=\"slider-track2\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\r\n <div class=\"slides2\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\r\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <img loading=\"lazy\" [simpoCorner]=\"styles?.corners\" [src]=\"item?.image?.url\"\r\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n <div class=\"slides\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\r\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <img loading=\"lazy\" [simpoCorner]=\"styles?.corners\" [src]=\"item?.image?.url\"\r\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n <div class=\"slides\" [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'\r\n }\" *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <img loading=\"lazy\" [simpoCorner]=\"styles?.corners\" [src]=\"item?.image?.url\"\r\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\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 </div>\r\n</div>", styles: [".masking{mask:linear-gradient(90deg,transparent,white 5%,white 95%,transparent);overflow:hidden;width:100%}.sliderdad{width:100%;display:flex}@media (min-width: 860px){.nofullwidth{padding-left:15rem;padding-right:15rem;overflow:hidden}}.slider-track2{min-width:max-content;translate:none;rotate:none;scale:none;justify-content:center;align-items:center;flex-wrap:wrap;width:100%;display:flex}.mainsec{gap:2rem;flex-direction:column;display:flex}.slider-track2.logotype-boxed{gap:1rem}.slider-track2.logotype-basic{gap:5rem}.slides2.logotype-boxed{padding:1.5rem 1.25rem;--tw-bg-opacity: .05;flex-shrink:0;width:auto;height:8rem;display:flex;position:relative;background-color:rgba(0,0,0,var(--tw-bg-opacity))}.slides2.logotype-basic{flex-shrink:0;width:auto;height:5rem;display:flex;position:relative}.slides2.img{height:100%;max-width:100%;border-style:solid}@keyframes scrollLeft{0%{transform:translateZ(0)}to{transform:translate3d(-50%,0,0)}}@keyframes scrollRight{0%{transform:translate3d(-50%,0,0)}to{transform:translateZ(0)}}.animation{animation:scrollLeft 5s linear infinite}.slider-track{justify-content:center;align-items:center;flex-wrap:wrap;width:100%;display:flex}.slider-track.logotype-basic{gap:5rem}.slider-track.logotype-boxed{gap:1rem}.slides.logotype-basic{flex-shrink:0;width:auto;height:5rem;display:flex;position:relative}.slides.logotype-boxed{padding:1.5rem .625rem;--tw-bg-opacity: .05;background-color:rgba(0,0,0,var(--tw-bg-opacity));justify-content:center;flex-grow:1;flex-shrink:0;width:auto;height:8rem;display:flex;position:relative}.slides.img{border-style:solid;max-width:100%;height:100%}@media only screen and (min-width: 375px) and (max-width: 500px){.col-xxl-8{padding-left:0!important;padding-right:0!important}.mainsec{padding-right:2rem!important;padding-left:2rem!important}.col-7{min-width:50%;width:100%;max-width:100%}.col-5{width:100%}}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-20{margin-top:20px}.mb-20{margin-bottom:20px}\n"] }]
|
|
9355
|
+
args: [{ selector: 'simpo-logo-showcase', standalone: true, imports: [SimpoButtonComponent, SimpoElementsModule, SanitizeHtmlPipe, TextEditorComponent, SimpoComponentModule, CommonModule, MatGridListModule, AnimationDirective, BackgroundDirective, ContentFitDirective, BorderDirective, BannerContentFitDirective, ButtonDirectiveDirective, ColumnDirectiveDirective, ContainerFitDirective, CornerDirective, simpoConetenAlignmentDirective, SimpoFooterLayoutDirective, HoverDirective, ImageDirectiveDirective, OverlayDirective, PositionLayoutDirectiveDirective, TextBackgroundDirectiveDirective, SpacingHorizontalDirective, ObjectPositionDirective, ImageEditorDirective], template: "<div *ngIf=\"styles?.showCaseType==='Grid'\">\r\n <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div class=\"col-xxl-8 px-4 py-5 w-100 \" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" #mainContainer\r\n [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"row g-5 gridtext\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n *ngIf=\"styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'}\">\r\n\r\n <div class=\"col-5 gridimg w-full mb-20 content-side\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <!-- <div [innerHTML]=\"item.value | sanitizeHtml\" class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-7 d-flex flex-wrap flex-1 w-full\">\r\n <div class=\"slider flex overflow-hidden w-full\">\r\n <div class=\"slider-track\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\r\n <div class=\"slides\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\r\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <img loading=\"lazy\" [simpoCorner]=\"styles?.corners\" [src]=\"item?.image?.url\"\r\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.image?.id || '')\">\r\n </div>\r\n </div>\r\n </div>\r\n <!-- </div> -->\r\n </div>\r\n </div>\r\n <div class=\"flex-column row g-2\" [id]=\"data?.id\"\r\n [simpoLayout]=\"styles?.layout\" *ngIf=\"styles?.positionLayout?.value === 'bottom'\">\r\n <div class=\"px-5 mb-20 content-side\" [id]=\"data?.id\"\r\n [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n\r\n <div class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\"[backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-12 flex flex-wrap items-center w-full gap-2 justify-center\">\r\n <!-- flex flex-wrap items-center w-full gap-2 justify-center -->\r\n <div class=\"slider flex overflow-hidden w-full\">\r\n <div class=\"slider-track w-full\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\r\n <div class=\"slides\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\r\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <img loading=\"lazy\" [simpoCorner]=\"styles?.corners\" [src]=\"item?.image?.url\"\r\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n </div>\r\n </div>\r\n <!-- </div> -->\r\n </div>\r\n\r\n\r\n\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\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 </div>\r\n</div>\r\n\r\n<div *ngIf=\"styles?.showCaseType==='Carousal'\">\r\n <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\">\r\n\r\n <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\">\r\n <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\">\r\n <div class=\"mainsec px-5 content-side\" [id]=\"data?.id\"\r\n [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n\r\n <div class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"gap-2 d-md-flex mt-15\" [ngClass]=\"[\r\n styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n ]\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{\r\n 'fullwidth flex-1 inline-edit ': styles?.fullWidth,\r\n 'nofullwidth flex-1 inline-edit ': !styles?.fullWidth\r\n }\">\r\n <div class=\"masking\">\r\n\r\n <div class=\"slider animation \" [style.animationDuration]=\"animationDuration\"\r\n [style.animationDirection]=\"animationDirection\">\r\n <div class=\"slider-track2\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\r\n <div class=\"slides2\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\r\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <img loading=\"lazy\" [simpoCorner]=\"styles?.corners\" [src]=\"item?.image?.url\"\r\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n <div class=\"slides\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\r\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <img loading=\"lazy\" [simpoCorner]=\"styles?.corners\" [src]=\"item?.image?.url\"\r\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n <div class=\"slides\" [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'\r\n }\" *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <img loading=\"lazy\" [simpoCorner]=\"styles?.corners\" [src]=\"item?.image?.url\"\r\n [alt]=\"item?.image?.altText\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\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 </div>\r\n</div>", styles: [".masking{mask:linear-gradient(90deg,transparent,white 5%,white 95%,transparent);overflow:hidden;width:100%}.sliderdad{width:100%;display:flex}@media (min-width: 860px){.nofullwidth{padding-left:15rem;padding-right:15rem;overflow:hidden}}.slider-track2{min-width:max-content;translate:none;rotate:none;scale:none;justify-content:center;align-items:center;flex-wrap:wrap;width:100%;display:flex}.mainsec{gap:2rem;flex-direction:column;display:flex}.slider-track2.logotype-boxed{gap:1rem}.slider-track2.logotype-basic{gap:5rem}.slides2.logotype-boxed{padding:1.5rem 1.25rem;--tw-bg-opacity: .05;flex-shrink:0;width:auto;height:8rem;display:flex;position:relative;background-color:rgba(0,0,0,var(--tw-bg-opacity))}.slides2.logotype-basic{flex-shrink:0;width:auto;height:5rem;display:flex;position:relative}.slides2.img{height:100%;max-width:100%;border-style:solid}@keyframes scrollLeft{0%{transform:translateZ(0)}to{transform:translate3d(-50%,0,0)}}@keyframes scrollRight{0%{transform:translate3d(-50%,0,0)}to{transform:translateZ(0)}}.animation{animation:scrollLeft 5s linear infinite}.slider-track{justify-content:center;align-items:center;flex-wrap:wrap;width:100%;display:flex}.slider-track.logotype-basic{gap:5rem}.slider-track.logotype-boxed{gap:1rem}.slides.logotype-basic{flex-shrink:0;width:auto;height:5rem;display:flex;position:relative}.slides.logotype-boxed{padding:1.5rem .625rem;--tw-bg-opacity: .05;background-color:rgba(0,0,0,var(--tw-bg-opacity));justify-content:center;flex-grow:1;flex-shrink:0;width:auto;height:8rem;display:flex;position:relative}.slides.img{border-style:solid;max-width:100%;height:100%}@media only screen and (min-width: 375px) and (max-width: 500px){.col-xxl-8{padding-left:0!important;padding-right:0!important}.mainsec{padding-right:2rem!important;padding-left:2rem!important}.col-7{min-width:50%;width:100%;max-width:100%}.col-5{width:100%}}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-20{margin-top:20px}.mb-20{margin-bottom:20px}.row{margin-left:0;margin-right:0}\n"] }]
|
|
9353
9356
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
9354
9357
|
type: Input
|
|
9355
9358
|
}], index: [{
|
|
@@ -11301,7 +11304,7 @@ class HeaderSectionComponent {
|
|
|
11301
11304
|
return page;
|
|
11302
11305
|
}
|
|
11303
11306
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: HeaderSectionComponent, deps: [{ token: EventsService }, { token: i2$5.Router }, { token: i2$5.ActivatedRoute }, { token: i2$2.MatDialog }, { token: StorageServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11304
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: HeaderSectionComponent, isStandalone: true, selector: "simpo-header-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", customClass: "customClass", edit: "edit" }, host: { listeners: { "window:scroll": "onScroll($event)", "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], ngImport: i0, template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [style.height.px]=\"getParentHeight\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"ptb-1 w-100\" #childContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\r\n [isHeader]=\"true\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\" [simpoBackground]=\"backgroundInfo\"\r\n [simpoSticky]=\"isHeaderSticky\">\r\n <div *ngIf=\"style?.styling === 'Header1'\">\r\n <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header2'\">\r\n <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header3'\">\r\n <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header4'\">\r\n <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile\">\r\n <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n </ng-container>\r\n\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</section>\r\n\r\n<ng-template #header1Template>\r\n <div class=\"header1\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header2Template>\r\n <div class=\"header1\">\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </div>\r\n <div class=\"text-end\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header3Template>\r\n <div class=\"header1\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n </ng-container>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header4Template>\r\n <div class=\"header1\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </div>\r\n <div class=\"text-end\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #logoSectionTemplate>\r\n <div class=\"d-flex gap-3 align-center cursor-pointer\"\r\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\r\n [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\r\n loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\r\n <div class=\"d-flex gap-3\" style=\"margin-right: 10px;\"\r\n [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile}\">\r\n <ng-container *ngFor=\"let item of getNavbarButton\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n <div class=\"position-relative\">\r\n <button mat-stroked-button class=\"mat-btn dropdown-toggle category-btn\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\r\n data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{link | lowercase | titlecase}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n <div class=\"d-flex\">\r\n <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\r\n [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount()\">Login</button>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n <div class=\"icons\" (click)=\"goToHome()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Home</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"searchProducts()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Shop</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"goToWishlist()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n </div>\r\n <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Cart</span>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n <div class=\"justify-content-between pr-0 d-flex position-relative gap-10\"\r\n [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\r\n <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\r\n <mat-icon [style.color]=\"accentColor\">search</mat-icon>\r\n </div>\r\n <div class=\"input-group\" *ngIf=\"showSearchBar\">\r\n <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\"\r\n [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProducts()\">\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\r\n <mat-icon [style.color]=\"accentColor\">favorite_border</mat-icon>\r\n <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Wishlist</span> -->\r\n </div>\r\n <div class=\"d-flex align-items-center mx-3 position-relative\" style=\"gap: 5px; cursor: pointer;\"\r\n (click)=\"goToCart()\">\r\n <mat-icon [style.color]=\"accentColor\">shopping_cart</mat-icon>\r\n <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Bag</span> -->\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n </div>\r\n <div class=\"loginButton\" (click)=\"goToAccount()\" [style.backgroundColor]=\"accentColor\" *ngIf=\"!loggedIn\">\r\n <mat-icon [simpoColor]=\"accentColor\">person_outline</mat-icon>\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount()\" *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">{{getUserName}}</span>\r\n </div>\r\n <!-- <div> -->\r\n <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\r\n <!-- </div> -->\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\r\n [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n <ng-container *ngFor=\"let item of getNavbarButton\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n <div class=\"position-relative\">\r\n <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\r\n data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{link | uppercase}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\r\n [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\r\n <div class=\"offcanvas-header\">\r\n <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\r\n <!-- <button type=\"button\" class=\"btn-close\" aria-label=\"Close\"></button> -->\r\n <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\r\n </div>\r\n <div class=\"offcanvas-body\">\r\n <div class=\"pages\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"offcanvas-footer\">\r\n <div class=\"canvas-button\">\r\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #ecomProfileTemplate>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount()\" *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileLogoSectionTemplate>\r\n <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\r\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\"\r\n loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n <!-- </div> -->\r\n</ng-template>\r\n", styles: ["@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.pages{margin-left:15px}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:0;left:12px;height:22px;width:22px;display:flex;align-items:center;justify-content:center;font-size:12px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:-1px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.input-group{position:relative;width:340px;outline:none;border:none;border-radius:5px;height:38px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin-right:25px;position:absolute;right:0%;top:130%;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;padding:6px 15px;border-radius:8px;cursor:pointer}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:70%;z-index:100000000;height:100vh}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.canvas-button{position:absolute;bottom:20px;left:12px;width:90%}.mobileLoginButton{width:100%;height:40px;border-radius:8px;margin-top:15px;outline:none;background:transparent}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:70vh}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:20vh}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}\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: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NavbarButtonElementComponent, selector: "simpo-navbar-button-element", inputs: ["buttonData", "buttonStyle", "selectedStyle", "bgColor", "sectionId", "accentColor"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoStickyDirective, selector: "[simpoSticky]", inputs: ["simpoSticky"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
|
|
11307
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: HeaderSectionComponent, isStandalone: true, selector: "simpo-header-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", customClass: "customClass", edit: "edit" }, host: { listeners: { "window:scroll": "onScroll($event)", "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], ngImport: i0, template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [style.height.px]=\"getParentHeight\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"ptb-1 w-100\" #childContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\r\n [isHeader]=\"true\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\" [simpoBackground]=\"backgroundInfo\"\r\n [simpoSticky]=\"isHeaderSticky\">\r\n <div *ngIf=\"style?.styling === 'Header1'\">\r\n <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header2'\">\r\n <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header3'\">\r\n <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header4'\">\r\n <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile\">\r\n <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n </ng-container>\r\n\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</section>\r\n\r\n<ng-template #header1Template>\r\n <div class=\"header1\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header2Template>\r\n <div class=\"header1\">\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </div>\r\n <div class=\"text-end\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header3Template>\r\n <div class=\"header1\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n </ng-container>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header4Template>\r\n <div class=\"header1\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </div>\r\n <div class=\"text-end\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #logoSectionTemplate>\r\n <div class=\"d-flex gap-3 align-center cursor-pointer\"\r\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\r\n [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\r\n loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\r\n <div class=\"d-flex gap-3\" style=\"margin-right: 10px;\"\r\n [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile}\">\r\n <ng-container *ngFor=\"let item of getNavbarButton\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n <div class=\"position-relative\">\r\n <button mat-stroked-button class=\"mat-btn dropdown-toggle category-btn\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\r\n data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{link | lowercase | titlecase}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n <div class=\"d-flex\">\r\n <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\r\n [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount()\">Login</button>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n <div class=\"icons\" (click)=\"goToHome()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Home</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"searchProducts()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Shop</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"goToWishlist()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n </div>\r\n <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Cart</span>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n <div class=\"justify-content-between pr-0 d-flex position-relative gap-10\"\r\n [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\r\n <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\r\n <mat-icon [style.color]=\"accentColor\">search</mat-icon>\r\n </div>\r\n <div class=\"input-group\" *ngIf=\"showSearchBar\">\r\n <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\"\r\n [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProducts()\">\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\r\n <mat-icon [style.color]=\"accentColor\">favorite_border</mat-icon>\r\n <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Wishlist</span> -->\r\n </div>\r\n <div class=\"d-flex align-items-center mx-3 position-relative\" style=\"gap: 5px; cursor: pointer;\"\r\n (click)=\"goToCart()\">\r\n <mat-icon [style.color]=\"accentColor\">shopping_cart</mat-icon>\r\n <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Bag</span> -->\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n </div>\r\n <div class=\"loginButton\" (click)=\"goToAccount()\" [style.backgroundColor]=\"accentColor\" *ngIf=\"!loggedIn\">\r\n <mat-icon [simpoColor]=\"accentColor\">person_outline</mat-icon>\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount()\" *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">{{getUserName}}</span>\r\n </div>\r\n <!-- <div> -->\r\n <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\r\n <!-- </div> -->\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\r\n [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n <ng-container *ngFor=\"let item of getNavbarButton\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n <div class=\"position-relative\">\r\n <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\r\n data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{link | uppercase}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\r\n [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\r\n <div class=\"offcanvas-header\">\r\n <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\r\n <!-- <button type=\"button\" class=\"btn-close\" aria-label=\"Close\"></button> -->\r\n <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\r\n </div>\r\n <div class=\"offcanvas-body\">\r\n <div class=\"pages\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"offcanvas-footer\">\r\n <div class=\"canvas-button\">\r\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #ecomProfileTemplate>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount()\" *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileLogoSectionTemplate>\r\n <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\r\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\"\r\n loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n <!-- </div> -->\r\n</ng-template>\r\n", styles: ["@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.pages{margin-left:15px}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:0;left:12px;height:22px;width:22px;display:flex;align-items:center;justify-content:center;font-size:12px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:-1px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.input-group{position:relative;width:340px;outline:none;border:none;border-radius:5px;height:38px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin-right:25px;position:absolute;right:0%;top:130%;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;padding:6px 15px;border-radius:8px;cursor:pointer}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:70%;z-index:100000000}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.canvas-button{position:absolute;bottom:20px;left:12px;width:90%}.mobileLoginButton{width:100%;height:40px;border-radius:8px;margin-top:15px;outline:none;background:transparent}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:70vh}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:20vh}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}\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: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NavbarButtonElementComponent, selector: "simpo-navbar-button-element", inputs: ["buttonData", "buttonStyle", "selectedStyle", "bgColor", "sectionId", "accentColor"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoStickyDirective, selector: "[simpoSticky]", inputs: ["simpoSticky"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
|
|
11305
11308
|
}
|
|
11306
11309
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: HeaderSectionComponent, decorators: [{
|
|
11307
11310
|
type: Component,
|
|
@@ -11337,7 +11340,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
11337
11340
|
MatButtonModule,
|
|
11338
11341
|
MatMenuModule,
|
|
11339
11342
|
SpacingHorizontalDirective
|
|
11340
|
-
], template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [style.height.px]=\"getParentHeight\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"ptb-1 w-100\" #childContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\r\n [isHeader]=\"true\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\" [simpoBackground]=\"backgroundInfo\"\r\n [simpoSticky]=\"isHeaderSticky\">\r\n <div *ngIf=\"style?.styling === 'Header1'\">\r\n <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header2'\">\r\n <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header3'\">\r\n <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header4'\">\r\n <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile\">\r\n <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n </ng-container>\r\n\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</section>\r\n\r\n<ng-template #header1Template>\r\n <div class=\"header1\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header2Template>\r\n <div class=\"header1\">\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </div>\r\n <div class=\"text-end\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header3Template>\r\n <div class=\"header1\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n </ng-container>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header4Template>\r\n <div class=\"header1\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </div>\r\n <div class=\"text-end\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #logoSectionTemplate>\r\n <div class=\"d-flex gap-3 align-center cursor-pointer\"\r\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\r\n [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\r\n loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\r\n <div class=\"d-flex gap-3\" style=\"margin-right: 10px;\"\r\n [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile}\">\r\n <ng-container *ngFor=\"let item of getNavbarButton\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n <div class=\"position-relative\">\r\n <button mat-stroked-button class=\"mat-btn dropdown-toggle category-btn\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\r\n data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{link | lowercase | titlecase}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n <div class=\"d-flex\">\r\n <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\r\n [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount()\">Login</button>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n <div class=\"icons\" (click)=\"goToHome()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Home</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"searchProducts()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Shop</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"goToWishlist()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n </div>\r\n <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Cart</span>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n <div class=\"justify-content-between pr-0 d-flex position-relative gap-10\"\r\n [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\r\n <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\r\n <mat-icon [style.color]=\"accentColor\">search</mat-icon>\r\n </div>\r\n <div class=\"input-group\" *ngIf=\"showSearchBar\">\r\n <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\"\r\n [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProducts()\">\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\r\n <mat-icon [style.color]=\"accentColor\">favorite_border</mat-icon>\r\n <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Wishlist</span> -->\r\n </div>\r\n <div class=\"d-flex align-items-center mx-3 position-relative\" style=\"gap: 5px; cursor: pointer;\"\r\n (click)=\"goToCart()\">\r\n <mat-icon [style.color]=\"accentColor\">shopping_cart</mat-icon>\r\n <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Bag</span> -->\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n </div>\r\n <div class=\"loginButton\" (click)=\"goToAccount()\" [style.backgroundColor]=\"accentColor\" *ngIf=\"!loggedIn\">\r\n <mat-icon [simpoColor]=\"accentColor\">person_outline</mat-icon>\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount()\" *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">{{getUserName}}</span>\r\n </div>\r\n <!-- <div> -->\r\n <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\r\n <!-- </div> -->\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\r\n [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n <ng-container *ngFor=\"let item of getNavbarButton\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n <div class=\"position-relative\">\r\n <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\r\n data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{link | uppercase}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\r\n [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\r\n <div class=\"offcanvas-header\">\r\n <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\r\n <!-- <button type=\"button\" class=\"btn-close\" aria-label=\"Close\"></button> -->\r\n <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\r\n </div>\r\n <div class=\"offcanvas-body\">\r\n <div class=\"pages\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"offcanvas-footer\">\r\n <div class=\"canvas-button\">\r\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #ecomProfileTemplate>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount()\" *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileLogoSectionTemplate>\r\n <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\r\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\"\r\n loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n <!-- </div> -->\r\n</ng-template>\r\n", styles: ["@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.pages{margin-left:15px}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:0;left:12px;height:22px;width:22px;display:flex;align-items:center;justify-content:center;font-size:12px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:-1px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.input-group{position:relative;width:340px;outline:none;border:none;border-radius:5px;height:38px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin-right:25px;position:absolute;right:0%;top:130%;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;padding:6px 15px;border-radius:8px;cursor:pointer}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:70%;z-index:100000000;height:100vh}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.canvas-button{position:absolute;bottom:20px;left:12px;width:90%}.mobileLoginButton{width:100%;height:40px;border-radius:8px;margin-top:15px;outline:none;background:transparent}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:70vh}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:20vh}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}\n"] }]
|
|
11343
|
+
], template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [style.height.px]=\"getParentHeight\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"ptb-1 w-100\" #childContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\r\n [isHeader]=\"true\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\" [simpoBackground]=\"backgroundInfo\"\r\n [simpoSticky]=\"isHeaderSticky\">\r\n <div *ngIf=\"style?.styling === 'Header1'\">\r\n <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header2'\">\r\n <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header3'\">\r\n <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header4'\">\r\n <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile\">\r\n <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n </ng-container>\r\n\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</section>\r\n\r\n<ng-template #header1Template>\r\n <div class=\"header1\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header2Template>\r\n <div class=\"header1\">\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </div>\r\n <div class=\"text-end\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header3Template>\r\n <div class=\"header1\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n </ng-container>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header4Template>\r\n <div class=\"header1\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </div>\r\n <div class=\"text-end\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #logoSectionTemplate>\r\n <div class=\"d-flex gap-3 align-center cursor-pointer\"\r\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\r\n [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\r\n loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\r\n <div class=\"d-flex gap-3\" style=\"margin-right: 10px;\"\r\n [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile}\">\r\n <ng-container *ngFor=\"let item of getNavbarButton\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n <div class=\"position-relative\">\r\n <button mat-stroked-button class=\"mat-btn dropdown-toggle category-btn\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\r\n data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{link | lowercase | titlecase}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n <div class=\"d-flex\">\r\n <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\r\n [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount()\">Login</button>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n <div class=\"icons\" (click)=\"goToHome()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Home</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"searchProducts()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Shop</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"goToWishlist()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n </div>\r\n <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Cart</span>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n <div class=\"justify-content-between pr-0 d-flex position-relative gap-10\"\r\n [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\r\n <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\r\n <mat-icon [style.color]=\"accentColor\">search</mat-icon>\r\n </div>\r\n <div class=\"input-group\" *ngIf=\"showSearchBar\">\r\n <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\"\r\n [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProducts()\">\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\r\n <mat-icon [style.color]=\"accentColor\">favorite_border</mat-icon>\r\n <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Wishlist</span> -->\r\n </div>\r\n <div class=\"d-flex align-items-center mx-3 position-relative\" style=\"gap: 5px; cursor: pointer;\"\r\n (click)=\"goToCart()\">\r\n <mat-icon [style.color]=\"accentColor\">shopping_cart</mat-icon>\r\n <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Bag</span> -->\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n </div>\r\n <div class=\"loginButton\" (click)=\"goToAccount()\" [style.backgroundColor]=\"accentColor\" *ngIf=\"!loggedIn\">\r\n <mat-icon [simpoColor]=\"accentColor\">person_outline</mat-icon>\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount()\" *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">{{getUserName}}</span>\r\n </div>\r\n <!-- <div> -->\r\n <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\r\n <!-- </div> -->\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\r\n [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n <ng-container *ngFor=\"let item of getNavbarButton\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n <div class=\"position-relative\">\r\n <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\r\n data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{link | uppercase}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\r\n [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\r\n <div class=\"offcanvas-header\">\r\n <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\r\n <!-- <button type=\"button\" class=\"btn-close\" aria-label=\"Close\"></button> -->\r\n <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\r\n </div>\r\n <div class=\"offcanvas-body\">\r\n <div class=\"pages\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"offcanvas-footer\">\r\n <div class=\"canvas-button\">\r\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #ecomProfileTemplate>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount()\" *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileLogoSectionTemplate>\r\n <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\r\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\"\r\n loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n <!-- </div> -->\r\n</ng-template>\r\n", styles: ["@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.pages{margin-left:15px}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:0;left:12px;height:22px;width:22px;display:flex;align-items:center;justify-content:center;font-size:12px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:-1px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.input-group{position:relative;width:340px;outline:none;border:none;border-radius:5px;height:38px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin-right:25px;position:absolute;right:0%;top:130%;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;padding:6px 15px;border-radius:8px;cursor:pointer}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:70%;z-index:100000000}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.canvas-button{position:absolute;bottom:20px;left:12px;width:90%}.mobileLoginButton{width:100%;height:40px;border-radius:8px;margin-top:15px;outline:none;background:transparent}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:70vh}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:20vh}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}\n"] }]
|
|
11341
11344
|
}], ctorParameters: () => [{ type: EventsService }, { type: i2$5.Router }, { type: i2$5.ActivatedRoute }, { type: i2$2.MatDialog }, { type: StorageServiceService }], propDecorators: { data: [{
|
|
11342
11345
|
type: Input
|
|
11343
11346
|
}], nextComponent: [{
|
|
@@ -11405,7 +11408,7 @@ class NewTestimonialsComponent extends BaseSection {
|
|
|
11405
11408
|
this.screenWidth = window.innerWidth;
|
|
11406
11409
|
}
|
|
11407
11410
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: NewTestimonialsComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11408
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: NewTestimonialsComponent, isStandalone: true, selector: "simpo-new-testimonials", inputs: { data: "data", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor", index: "index" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"main-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"spacing-around\" [spacingAround]=\"stylesLayout\">\r\n <div class=\"parent-div\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n [simpoLayout]=\"styles?.layout\" [simpoBackground]=\"styles?.background\">\r\n <div class=\"header\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\">\r\n <ng-container *ngFor=\"let text of content?.inputText\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <div *ngFor=\"let button of data?.action?.buttons\" class=\"mt-4\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\">\r\n
|
|
11411
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: NewTestimonialsComponent, isStandalone: true, selector: "simpo-new-testimonials", inputs: { data: "data", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor", index: "index" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"main-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"spacing-around\" [spacingAround]=\"stylesLayout\">\r\n <div class=\"parent-div\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n [simpoLayout]=\"styles?.layout\" [simpoBackground]=\"styles?.background\">\r\n <div class=\"header\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\">\r\n <ng-container *ngFor=\"let text of content?.inputText\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <ng-container *ngIf=\"data?.action?.display\">\r\n <div *ngFor=\"let button of data?.action?.buttons\" class=\"mt-4\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [edit]=\"edit\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </ng-container>\r\n <div class=\"list-items mt-3 d-flex gap-3\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [simpoAnimation]=\"styles?.animation\" [class.flex-column]=\"screenWidth < 475\">\r\n <div class=\"image-container w-50 height-50\" [class.w-100]=\"screenWidth < 475\" [class.h-30]=\"screenWidth < 475\">\r\n <ng-container>\r\n <ng-container *ngIf=\"getImageType() == 'Image'\">\r\n <img [src]=\"getImageUrl()\" alt=\"Selected Image\" class=\"w-100 h-100\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"getImageData()\" [sectionId]=\"data?.id\"\r\n [simpoCorner]=\"styles?.corners\">\r\n </ng-container>\r\n <ng-container *ngIf=\"getImageType() == 'Video'\">\r\n <video [src]=\"getImageUrl()\" class=\"w-100 h-100\" [simpoCorner]=\"styles?.corners\"\r\n controls></video>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n <div id=\"carouselExampleIndicators\" class=\"carousel slide w-50 d-flex flex-column\"\r\n [simpoContentAlignment]=\"styles?.contentAlignment\" [class.w-100]=\"screenWidth < 475\">\r\n <div class=\"carousel-inner mb-4\" [class.mb-6]=\"screenWidth < 475\">\r\n <ng-container *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <div class=\"carousel-item h-100\" [ngClass]=\"{'active': i === 0}\">\r\n <div class=\"quote-image mb-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"36\" height=\"31\" viewBox=\"0 0 36 31\"\r\n fill=\"none\">\r\n <path\r\n d=\"M35.3998 3.29993C35.5998 3.09993 35.7998 2.69993 35.5998 2.29993C35.3998 2.09993 34.9998 1.69993 34.5998 0.899925C33.9998 0.699925 33.5998 0.699926 32.9998 1.09993C25.3998 5.89993 21.1998 11.4999 20.3998 17.8999C18.9998 27.8999 27.9998 32.6999 32.5998 28.2999C37.1998 23.8999 34.3998 18.2999 31.1998 16.6999C27.9998 15.0999 25.9998 15.6999 26.1998 13.6999C26.5998 11.6999 31.1998 6.09993 35.3998 3.29993ZM14.7998 1.09993C14.1998 0.699926 13.5998 0.699926 13.1998 1.09993C5.59983 5.89993 1.39983 11.4999 0.599832 18.0999C-0.800168 28.0999 8.19983 32.8999 12.7998 28.4999C17.3998 24.0999 14.5998 18.4999 11.3998 16.8999C7.99983 15.4999 5.99983 16.0999 6.39983 13.8999C6.79983 11.8999 11.3998 6.29993 15.5998 3.49993C15.7998 3.29993 15.9998 2.89993 15.7998 2.49993C15.5998 2.29993 15.1998 1.89993 14.7998 1.09993Z\"\r\n [attr.fill]=\"styles?.background?.accentColor\" />\r\n </svg>\r\n </div>\r\n <div class=\"item mb-3\">\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"prev-next d-flex gap-2\">\r\n <div class=\"carousel-control-prev\" href=\"#carouselExampleIndicators\" role=\"button\"\r\n data-bs-slide=\"prev\" [style.backgroundColor]=\"styles?.background?.accentColor\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n <div class=\"carousel-control-next\" href=\"#carouselExampleIndicators\" role=\"button\"\r\n data-bs-slide=\"next\" [style.backgroundColor]=\"styles?.background?.accentColor\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n\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>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-container{position:relative;height:auto}.carousel-control-prev,.carousel-control-next{position:unset!important;width:5%;border-radius:50%!important;height:4vh}.prev-next{position:absolute;bottom:0;left:0;width:100%}@media screen and (max-width: 475px){.carousel-control-prev,.carousel-control-next{width:10%!important}.h-30{height:30vh!important}}.height-50{height:50vh}.w-100{width:100%!important}.mb-6{margin-bottom:2.5rem!important}.flex-column{flex-direction:column!important}\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: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type:
|
|
11409
11412
|
// directives
|
|
11410
11413
|
SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { 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: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "component", type:
|
|
11411
11414
|
// components
|
|
@@ -11441,7 +11444,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
11441
11444
|
TextEditorComponent,
|
|
11442
11445
|
SimpoButtonComponent,
|
|
11443
11446
|
ImageEditorDirective,
|
|
11444
|
-
], template: "<section class=\"main-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"spacing-around\" [spacingAround]=\"stylesLayout\">\r\n <div class=\"parent-div\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n [simpoLayout]=\"styles?.layout\" [simpoBackground]=\"styles?.background\">\r\n <div class=\"header\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\">\r\n <ng-container *ngFor=\"let text of content?.inputText\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <div *ngFor=\"let button of data?.action?.buttons\" class=\"mt-4\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\">\r\n
|
|
11447
|
+
], template: "<section class=\"main-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"spacing-around\" [spacingAround]=\"stylesLayout\">\r\n <div class=\"parent-div\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n [simpoLayout]=\"styles?.layout\" [simpoBackground]=\"styles?.background\">\r\n <div class=\"header\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\">\r\n <ng-container *ngFor=\"let text of content?.inputText\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <ng-container *ngIf=\"data?.action?.display\">\r\n <div *ngFor=\"let button of data?.action?.buttons\" class=\"mt-4\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [edit]=\"edit\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </ng-container>\r\n <div class=\"list-items mt-3 d-flex gap-3\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [simpoAnimation]=\"styles?.animation\" [class.flex-column]=\"screenWidth < 475\">\r\n <div class=\"image-container w-50 height-50\" [class.w-100]=\"screenWidth < 475\" [class.h-30]=\"screenWidth < 475\">\r\n <ng-container>\r\n <ng-container *ngIf=\"getImageType() == 'Image'\">\r\n <img [src]=\"getImageUrl()\" alt=\"Selected Image\" class=\"w-100 h-100\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"getImageData()\" [sectionId]=\"data?.id\"\r\n [simpoCorner]=\"styles?.corners\">\r\n </ng-container>\r\n <ng-container *ngIf=\"getImageType() == 'Video'\">\r\n <video [src]=\"getImageUrl()\" class=\"w-100 h-100\" [simpoCorner]=\"styles?.corners\"\r\n controls></video>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n <div id=\"carouselExampleIndicators\" class=\"carousel slide w-50 d-flex flex-column\"\r\n [simpoContentAlignment]=\"styles?.contentAlignment\" [class.w-100]=\"screenWidth < 475\">\r\n <div class=\"carousel-inner mb-4\" [class.mb-6]=\"screenWidth < 475\">\r\n <ng-container *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <div class=\"carousel-item h-100\" [ngClass]=\"{'active': i === 0}\">\r\n <div class=\"quote-image mb-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"36\" height=\"31\" viewBox=\"0 0 36 31\"\r\n fill=\"none\">\r\n <path\r\n d=\"M35.3998 3.29993C35.5998 3.09993 35.7998 2.69993 35.5998 2.29993C35.3998 2.09993 34.9998 1.69993 34.5998 0.899925C33.9998 0.699925 33.5998 0.699926 32.9998 1.09993C25.3998 5.89993 21.1998 11.4999 20.3998 17.8999C18.9998 27.8999 27.9998 32.6999 32.5998 28.2999C37.1998 23.8999 34.3998 18.2999 31.1998 16.6999C27.9998 15.0999 25.9998 15.6999 26.1998 13.6999C26.5998 11.6999 31.1998 6.09993 35.3998 3.29993ZM14.7998 1.09993C14.1998 0.699926 13.5998 0.699926 13.1998 1.09993C5.59983 5.89993 1.39983 11.4999 0.599832 18.0999C-0.800168 28.0999 8.19983 32.8999 12.7998 28.4999C17.3998 24.0999 14.5998 18.4999 11.3998 16.8999C7.99983 15.4999 5.99983 16.0999 6.39983 13.8999C6.79983 11.8999 11.3998 6.29993 15.5998 3.49993C15.7998 3.29993 15.9998 2.89993 15.7998 2.49993C15.5998 2.29993 15.1998 1.89993 14.7998 1.09993Z\"\r\n [attr.fill]=\"styles?.background?.accentColor\" />\r\n </svg>\r\n </div>\r\n <div class=\"item mb-3\">\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"prev-next d-flex gap-2\">\r\n <div class=\"carousel-control-prev\" href=\"#carouselExampleIndicators\" role=\"button\"\r\n data-bs-slide=\"prev\" [style.backgroundColor]=\"styles?.background?.accentColor\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n <div class=\"carousel-control-next\" href=\"#carouselExampleIndicators\" role=\"button\"\r\n data-bs-slide=\"next\" [style.backgroundColor]=\"styles?.background?.accentColor\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n\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>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-container{position:relative;height:auto}.carousel-control-prev,.carousel-control-next{position:unset!important;width:5%;border-radius:50%!important;height:4vh}.prev-next{position:absolute;bottom:0;left:0;width:100%}@media screen and (max-width: 475px){.carousel-control-prev,.carousel-control-next{width:10%!important}.h-30{height:30vh!important}}.height-50{height:50vh}.w-100{width:100%!important}.mb-6{margin-bottom:2.5rem!important}.flex-column{flex-direction:column!important}\n"] }]
|
|
11445
11448
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
11446
11449
|
type: Input
|
|
11447
11450
|
}], edit: [{
|
|
@@ -11511,7 +11514,7 @@ class NewServicesComponent extends BaseSection {
|
|
|
11511
11514
|
}
|
|
11512
11515
|
}
|
|
11513
11516
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: NewServicesComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11514
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: NewServicesComponent, isStandalone: true, selector: "simpo-new-services", inputs: { data: "data", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"main-container d-block\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\"\r\n [attr.style]=\"customClass\">\r\n <div class=\"spacing-around\" [spacingAround]=\"stylesLayout\">\r\n <div class=\"main-div\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\" [simpoLayout]=\"styles?.layout\"\r\n [simpoBackground]=\"styles?.background\">\r\n <div class=\"header\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\">\r\n <ng-container *ngFor=\"let text of content?.inputText\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <div *ngFor=\"let button of data?.action?.buttons\" class=\"mt-4\" [spacingHorizontal]=\"stylesLayout\"\r\n
|
|
11517
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: NewServicesComponent, isStandalone: true, selector: "simpo-new-services", inputs: { data: "data", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"main-container d-block\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\"\r\n [attr.style]=\"customClass\">\r\n <div class=\"spacing-around\" [spacingAround]=\"stylesLayout\" [id]=\"data?.id\">\r\n <div class=\"main-div\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\" [simpoLayout]=\"styles?.layout\"\r\n [simpoBackground]=\"styles?.background\">\r\n <div class=\"header\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\">\r\n <ng-container *ngFor=\"let text of content?.inputText\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <ng-container *ngIf=\"data?.action?.display\">\r\n <div *ngFor=\"let button of data?.action?.buttons\" class=\"mt-4\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoAnimation]=\"styles?.animation\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [edit]=\"edit\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </ng-container>\r\n <div class=\"list-image-container mt-3 d-flex gap-3 h-100\" [id]=\"data?.id\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [spacingHorizontal]=\"stylesLayout\"\r\n [class.flex-column-reverse]=\"screenWidth < 475\" [simpoAnimation]=\"styles?.animation\"\r\n [class.w-100]=\"screenWidth < 475\">\r\n <div class=\"list-items h-auto\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n [class.w-50]=\"styles?.positionLayout?.value === 'right' || styles?.positionLayout?.value === 'left'\"\r\n [class.w-100]=\"screenWidth < 475\"\r\n [class.over-y]=\"styles?.positionLayout?.value === 'right' || styles?.positionLayout?.value === 'left'\"\r\n [class.row]=\"styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'\"\r\n [class.gap-2]=\"styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'\"\r\n [class.over-x]=\"styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'\"\r\n [class.object-unset]=\"styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'\">\r\n <ng-container *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <div class=\"item mb-3\"\r\n [class.col-md-3]=\"styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'\"\r\n [class.col-6]=\"screenWidth < 475 && (styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom')\"\r\n (mouseenter)=\"idx = i\" [ngStyle]=\"{\r\n borderBottom: styles?.background?.accentBackgroundType === 'Solid'\r\n ? '3px solid ' + styles?.background?.accentColor\r\n : '3px solid transparent',\r\n borderImage: styles?.background?.accentBackgroundType === 'Gradient'\r\n ? 'linear-gradient(' + getGradientDirection(styles?.background?.gradientDirection) + ', ' + styles?.background?.accentColor + ', ' + styles?.background?.secondaryAccentColor + ') 1'\r\n : '',\r\n borderImageSlice: styles?.background?.accentBackgroundType === 'Gradient' ? '1' : ''\r\n }\">\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"img-container h-100\"\r\n [class.w-50]=\"styles?.positionLayout?.value === 'right' || styles?.positionLayout?.value === 'left'\"\r\n [class.w-100]=\"screenWidth < 475\">\r\n <ng-container *ngIf=\"getImageUrl()\">\r\n <img [src]=\"getImageUrl()\" alt=\"Selected Image\" class=\"d-block mx-lg-auto img-fluid h-100\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"getImageData()\" [sectionId]=\"data?.id\"\r\n [simpoCorner]=\"styles?.corners\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n\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", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-container{position:relative;height:auto}.item{padding-bottom:10px}.row{flex-wrap:unset!important}.col-md-3{width:24%!important;padding-left:unset!important;padding-right:unset!important}.col-6{width:50%!important}.over-x{overflow-x:scroll}.over-y{overflow-y:scroll}.w-100{width:100%!important}.object-unset{aspect-ratio:unset!important}\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: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type:
|
|
11515
11518
|
// directives
|
|
11516
11519
|
SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { 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: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "component", type:
|
|
11517
11520
|
// components
|
|
@@ -11547,7 +11550,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
11547
11550
|
TextEditorComponent,
|
|
11548
11551
|
SimpoButtonComponent,
|
|
11549
11552
|
ImageEditorDirective,
|
|
11550
|
-
], template: "<section class=\"main-container d-block\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\"\r\n [attr.style]=\"customClass\">\r\n <div class=\"spacing-around\" [spacingAround]=\"stylesLayout\">\r\n <div class=\"main-div\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\" [simpoLayout]=\"styles?.layout\"\r\n [simpoBackground]=\"styles?.background\">\r\n <div class=\"header\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\">\r\n <ng-container *ngFor=\"let text of content?.inputText\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <div *ngFor=\"let button of data?.action?.buttons\" class=\"mt-4\" [spacingHorizontal]=\"stylesLayout\"\r\n
|
|
11553
|
+
], template: "<section class=\"main-container d-block\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\"\r\n [attr.style]=\"customClass\">\r\n <div class=\"spacing-around\" [spacingAround]=\"stylesLayout\" [id]=\"data?.id\">\r\n <div class=\"main-div\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\" [simpoLayout]=\"styles?.layout\"\r\n [simpoBackground]=\"styles?.background\">\r\n <div class=\"header\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\">\r\n <ng-container *ngFor=\"let text of content?.inputText\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <ng-container *ngIf=\"data?.action?.display\">\r\n <div *ngFor=\"let button of data?.action?.buttons\" class=\"mt-4\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoAnimation]=\"styles?.animation\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [edit]=\"edit\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </ng-container>\r\n <div class=\"list-image-container mt-3 d-flex gap-3 h-100\" [id]=\"data?.id\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [spacingHorizontal]=\"stylesLayout\"\r\n [class.flex-column-reverse]=\"screenWidth < 475\" [simpoAnimation]=\"styles?.animation\"\r\n [class.w-100]=\"screenWidth < 475\">\r\n <div class=\"list-items h-auto\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n [class.w-50]=\"styles?.positionLayout?.value === 'right' || styles?.positionLayout?.value === 'left'\"\r\n [class.w-100]=\"screenWidth < 475\"\r\n [class.over-y]=\"styles?.positionLayout?.value === 'right' || styles?.positionLayout?.value === 'left'\"\r\n [class.row]=\"styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'\"\r\n [class.gap-2]=\"styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'\"\r\n [class.over-x]=\"styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'\"\r\n [class.object-unset]=\"styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'\">\r\n <ng-container *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <div class=\"item mb-3\"\r\n [class.col-md-3]=\"styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'\"\r\n [class.col-6]=\"screenWidth < 475 && (styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom')\"\r\n (mouseenter)=\"idx = i\" [ngStyle]=\"{\r\n borderBottom: styles?.background?.accentBackgroundType === 'Solid'\r\n ? '3px solid ' + styles?.background?.accentColor\r\n : '3px solid transparent',\r\n borderImage: styles?.background?.accentBackgroundType === 'Gradient'\r\n ? 'linear-gradient(' + getGradientDirection(styles?.background?.gradientDirection) + ', ' + styles?.background?.accentColor + ', ' + styles?.background?.secondaryAccentColor + ') 1'\r\n : '',\r\n borderImageSlice: styles?.background?.accentBackgroundType === 'Gradient' ? '1' : ''\r\n }\">\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"img-container h-100\"\r\n [class.w-50]=\"styles?.positionLayout?.value === 'right' || styles?.positionLayout?.value === 'left'\"\r\n [class.w-100]=\"screenWidth < 475\">\r\n <ng-container *ngIf=\"getImageUrl()\">\r\n <img [src]=\"getImageUrl()\" alt=\"Selected Image\" class=\"d-block mx-lg-auto img-fluid h-100\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"getImageData()\" [sectionId]=\"data?.id\"\r\n [simpoCorner]=\"styles?.corners\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n\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", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-container{position:relative;height:auto}.item{padding-bottom:10px}.row{flex-wrap:unset!important}.col-md-3{width:24%!important;padding-left:unset!important;padding-right:unset!important}.col-6{width:50%!important}.over-x{overflow-x:scroll}.over-y{overflow-y:scroll}.w-100{width:100%!important}.object-unset{aspect-ratio:unset!important}\n"] }]
|
|
11551
11554
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
11552
11555
|
type: Input
|
|
11553
11556
|
}], edit: [{
|
|
@@ -12061,7 +12064,7 @@ class FeaturedProductsComponent extends BaseSection {
|
|
|
12061
12064
|
}, 100);
|
|
12062
12065
|
}
|
|
12063
12066
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: FeaturedProductsComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: RestService }, { token: i2$5.Router }, { token: CartService }, { token: StorageServiceService }, { token: i5$2.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12064
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: FeaturedProductsComponent, isStandalone: true, selector: "simpo-featured-products", inputs: { data: "data", responseData: "responseData", index: "index", isRelatedProduct: "isRelatedProduct", edit: "edit", customClass: "customClass", delete: "delete", nextComponentColor: "nextComponentColor" }, outputs: { changeDetailProduct: "changeDetailProduct" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<ng-container>\r\n <section class=\"container-fluid total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [simpoBackground]=\"styles?.background\" [attr.style]=\"customClass\">\r\n <div [id]=\"data?.id\" class=\"display-block\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"d-flex jc-space align-center content-side\">\r\n <div class=\"input-text content-side\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <!-- <div [innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"> -->\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n <!-- </div> -->\r\n </div>\r\n </div>\r\n <div class=\"body-large view-all\" *ngIf=\"content?.display?.showButton && screenWidth > 475\" (click)=\"proceedToProductList()\">{{viewAllButton?.content?.label ?? 'See All'}} ></div>\r\n </div>\r\n <img *ngIf=\"styles?.dividerImage?.showDivider\" loading=\"lazy\" [src]=\"styles?.dividerImage?.url\" alt=\"\"\r\n class=\"span-img mt-15\">\r\n <ng-container *ngIf=\"!apiLoading\">\r\n <div class=\"product-parent position-relative\" *ngIf=\"responseData && responseData?.length\"\r\n [simpoWrapContainer]=\"styles?.direction\" #container>\r\n <ng-container *ngIf=\"styles?.direction == 'ROW' && !isMobile\">\r\n <div class=\"left-arrow\" (click)=\"scrollLeft()\" *ngIf=\"showLeftArrow && responseData?.length\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n </ng-container>\r\n <div\r\n *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\"\r\n class=\"product\" [style.padding.px]=\"styles?.theme != theme.Theme1 ? '3' : ''\" [style.width.%]=\"styles?.theme != theme.Theme1 && isMobile && isRelatedProduct ? '48' : ''\" [style.minWidth]=\"applyProductWidth() ? getProductWidth() : ''\" [style.maxWidth]=\"applyProductWidth() ? getProductWidth() : ''\">\r\n <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\r\n <ng-container *ngTemplateOutlet=\"ProductDes; context: {data: product, idx: idx}\"></ng-container>\r\n </ng-container>\r\n <div *ngIf=\"styles?.theme != theme.Theme1\">\r\n <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"this.screenWidth > 475 || (this.screenWidth <= 475 && styles?.direction == 'ROW')\"></simpo-small-product-listing>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.direction == 'ROW' && !isMobile\">\r\n <div class=\"right-arrow\" (click)=\"scrollRight()\" *ngIf=\"showRightArrow && responseData?.length\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n </ng-container>\r\n <simpo-card-skeleton-loader *ngIf=\"apiLoading\"></simpo-card-skeleton-loader>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\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\r\n </section>\r\n</ng-container>\r\n\r\n<ng-template #VarientList let-product=\"data\">\r\n <div class=\"varient-list\" *ngIf=\"product?.itemVariant?.length\">\r\n <ng-container *ngFor=\"let varient of product?.itemVariant; let idx = index\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"varient.variantImages?.[0]?.imgUrl\"\r\n alt=\"\" class=\"varient\" [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\"\r\n [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\"\r\n (click)=\"selectVarient(product, varient)\">\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n</ng-template>\r\n\r\n<ng-template #AddToCart let-product=\"data\">\r\n <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\" [style.marginTop]=\"true ? '10px' : ''\">\r\n <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\" *ngIf=\"!product.quantity && !isItemOutOfStock(product)\"\r\n [backgroundInfo]=\"styles?.background\"\r\n (click)=\"addItemToCart(product, 'ADD')\">{{button?.content?.label ?? 'Add to Cart'}}</button>\r\n <div class=\"quantity full-width-quantity\" [style.borderColor]=\"styles?.background?.accentColor\" [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\" [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\r\n <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\" [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart(product, 'ADD')\">+</span>\r\n </div>\r\n <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ProductPricing let-product=\"data\">\r\n <div class=\"d-flex justify-content-between align-items-center\" [style.display]=\"true ? 'block!important' : ''\">\r\n <div class=\"price body-large d-flex g-10\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n <!-- <div *ngIf=\"product.price.value != product.price.discountedPrice\" class=\"selling-price\">\r\n <span [innerHTML]='currency'></span>\r\n {{product.price.value}}\r\n </div> -->\r\n <div class=\"price discount-price\" *ngIf=\"product?.price?.discountedPrice != product?.price?.value\">\r\n <span [innerHTML]='currency | sanitizeHtml'></span>\r\n {{product.price.value}}</div>\r\n <div>\r\n <span [innerHTML]='currency | sanitizeHtml'></span>\r\n {{product.price.sellingPrice | number:'1.0-0'}}\r\n </div>\r\n </div>\r\n <ng-container>\r\n <ng-container *ngTemplateOutlet=\"AddToCart; context: {data: product}\"></ng-container>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ProductDes let-product=\"data\" let-idx=\"idx\">\r\n <div (click)=\"proceedToProductDesc(product)\" class=\"position-relative box-shadow\" [style.height.px]=\"isMobile ? (styles?.mobileColumn == 1 ? '480' : '230' ) : ''\">\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n <!-- <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [id]=\"'preview_'+idx\" [src]=\"product.itemImages?.[product.prviewIdx]?.imgUrl\" alt=\"\"\r\n class=\"product-img preivew\" (mouseenter)=\"togglePreviewImage(product, idx)\"\r\n (mouseleave)=\"product.prviewIdx = 0\"> -->\r\n <image-loading [hash]=\"product.itemImages?.[product.prviewIdx]?.blurhash\" [index]=\"idx\" [imageUrl]=\"product.itemImages?.[product.prviewIdx]?.imgUrl\" [theme]=\"styles?.theme\"></image-loading>\r\n\r\n </div>\r\n <div class=\"mt-15 w-100\">\r\n <div class=\"product-name heading-large text-left trim-text w-100\" [id]=\"data?.id\" (click)=\"proceedToProductDesc(product)\"\r\n [simpoColor]=\"styles?.background?.color\">\r\n {{product.name }}</div>\r\n <ng-container *ngTemplateOutlet=\"VarientList; context: {data: product}\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"ProductPricing; context: {data: product}\"></ng-container>\r\n </div>\r\n</ng-template>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" 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", styles: ["div[class*=arrow]{background-color:#fff;color:#000;padding:5px;border-radius:50%;position:sticky;height:fit-content;top:50%;display:flex;align-items:center;justify-content:center;z-index:10000001;cursor:pointer;box-shadow:#63636333 0 2px 8px}div[class*=arrow] .mat-icon{color:#000}.left-arrow{left:2px}.right-arrow{right:2px}.product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;height:fit-content;cursor:pointer;position:relative;display:flex;flex-direction:column;justify-content:space-between}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:60px;width:45px;border-radius:5px;border:1px solid lightgray}.varient-list .selected-varient{border:1px solid transparent}.tags{position:absolute;top:8px;left:8px;display:flex;gap:5px}.tags .tag{font-size:12px;background-color:#fff;padding:5px;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.fav-icon{position:absolute;z-index:1000;padding:5px;right:8px;top:8px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;padding:5px 10px;border-radius:5px}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px;font-weight:500}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}@media screen and (max-width: 475px){.selling-price{display:none!important}}.discounted-price{margin-top:-3px}.add-product-button{width:20%}.action-btn{display:flex;justify-content:center;margin-top:20px}.action-btn>a{width:fit-content!important;padding:5px 20px;text-decoration:none}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative}.display-block{display:block!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid;border-radius:3px;padding:5px;font-weight:600;width:95px}.preivew{transition:opacity .5s ease-in-out;opacity:1}.transition-preview{opacity:0}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.them2-lisiting{min-width:195px;max-width:195px;margin-right:10px}.input-text{width:90%}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important}.default-image img{height:250px}.out-of-stock{font-size:12px!important}.input-text{width:100%}}.add-to-cart-btn{display:flex;gap:10px}.add-to-cart-btn .mat-icon{height:30px;width:35px;font-size:27px;margin-top:5px}.add-to-cart-btn button{height:35px;font-size:16px!important}.jc-space{justify-content:space-between}.align-end{align-items:end}.view-all{font-size:16px;font-weight:600;cursor:pointer}.box-shadow{box-shadow:#0000003d 0 3px 8px;border-radius:10px}.full-width-quantity{text-align:center;padding:unset;font-weight:600;height:35px}.change-quantity{width:15%;height:inherit;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:600;position:relative}.align-center{align-items:center}@media screen and (max-width: 475px){.product-name{font-size:14px}}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.g-10{gap:10px}.mb-5{margin-bottom:5px!important}\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: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "ngmodule", type: FormsModule }, { 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: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type:
|
|
12067
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: FeaturedProductsComponent, isStandalone: true, selector: "simpo-featured-products", inputs: { data: "data", responseData: "responseData", index: "index", isRelatedProduct: "isRelatedProduct", edit: "edit", customClass: "customClass", delete: "delete", nextComponentColor: "nextComponentColor" }, outputs: { changeDetailProduct: "changeDetailProduct" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<ng-container>\r\n <section class=\"container-fluid total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [simpoBackground]=\"styles?.background\" [attr.style]=\"customClass\">\r\n <div [id]=\"data?.id\" class=\"display-block\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"d-flex jc-space align-center content-side\">\r\n <div class=\"input-text content-side\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <!-- <div [innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"> -->\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n <!-- </div> -->\r\n </div>\r\n </div>\r\n <div class=\"body-large view-all\" *ngIf=\"content?.display?.showButton && screenWidth > 475\" (click)=\"proceedToProductList()\">{{viewAllButton?.content?.label ?? 'See All'}} ></div>\r\n </div>\r\n <img *ngIf=\"styles?.dividerImage?.showDivider\" loading=\"lazy\" [src]=\"styles?.dividerImage?.url\" alt=\"\"\r\n class=\"span-img mt-15\">\r\n <ng-container *ngIf=\"!apiLoading\">\r\n <div class=\"product-parent position-relative\" *ngIf=\"responseData && responseData?.length\"\r\n [simpoWrapContainer]=\"styles?.direction\" #container>\r\n <ng-container *ngIf=\"styles?.direction == 'ROW' && !isMobile\">\r\n <div class=\"left-arrow\" (click)=\"scrollLeft()\" *ngIf=\"showLeftArrow && responseData?.length\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n </ng-container>\r\n <div\r\n *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\"\r\n class=\"product\" [style.padding.px]=\"styles?.theme != theme.Theme1 ? '3' : ''\" [style.width.%]=\"styles?.theme != theme.Theme1 && isMobile && isRelatedProduct ? '48' : ''\" [style.minWidth]=\"applyProductWidth() ? getProductWidth() : ''\" [style.maxWidth]=\"applyProductWidth() ? getProductWidth() : ''\">\r\n <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\r\n <ng-container *ngTemplateOutlet=\"ProductDes; context: {data: product, idx: idx}\"></ng-container>\r\n </ng-container>\r\n <div *ngIf=\"styles?.theme != theme.Theme1\">\r\n <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"this.screenWidth > 475 || (this.screenWidth <= 475 && styles?.direction == 'ROW')\"></simpo-small-product-listing>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.direction == 'ROW' && !isMobile\">\r\n <div class=\"right-arrow\" (click)=\"scrollRight()\" *ngIf=\"showRightArrow && responseData?.length\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n </ng-container>\r\n <simpo-card-skeleton-loader *ngIf=\"apiLoading\"></simpo-card-skeleton-loader>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\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\r\n </section>\r\n</ng-container>\r\n\r\n<ng-template #VarientList let-product=\"data\">\r\n <div class=\"varient-list\" *ngIf=\"product?.itemVariant?.length\">\r\n <ng-container *ngFor=\"let varient of product?.itemVariant; let idx = index\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"varient.variantImages?.[0]?.imgUrl\"\r\n alt=\"\" class=\"varient\" [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\"\r\n [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\"\r\n (click)=\"selectVarient(product, varient)\">\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n</ng-template>\r\n\r\n<ng-template #AddToCart let-product=\"data\">\r\n <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\" [style.marginTop]=\"true ? '10px' : ''\">\r\n <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\" *ngIf=\"!product.quantity && !isItemOutOfStock(product)\"\r\n [backgroundInfo]=\"styles?.background\"\r\n (click)=\"addItemToCart(product, 'ADD')\">{{button?.content?.label ?? 'Add to Cart'}}</button>\r\n <div class=\"quantity full-width-quantity\" [style.borderColor]=\"styles?.background?.accentColor\" [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\" [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\r\n <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\" [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart(product, 'ADD')\">+</span>\r\n </div>\r\n <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ProductPricing let-product=\"data\">\r\n <div class=\"d-flex justify-content-between align-items-center\" [style.display]=\"true ? 'block!important' : ''\">\r\n <div class=\"price body-large d-flex g-10\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n <!-- <div *ngIf=\"product.price.value != product.price.discountedPrice\" class=\"selling-price\">\r\n <span [innerHTML]='currency'></span>\r\n {{product.price.value}}\r\n </div> -->\r\n <div class=\"price discount-price\" *ngIf=\"product?.price?.discountedPrice != product?.price?.value\">\r\n <span [innerHTML]='currency | sanitizeHtml'></span>\r\n {{product.price.value}}</div>\r\n <div>\r\n <span [innerHTML]='currency | sanitizeHtml'></span>\r\n {{product.price.sellingPrice | number:'1.0-0'}}\r\n </div>\r\n </div>\r\n <ng-container>\r\n <ng-container *ngTemplateOutlet=\"AddToCart; context: {data: product}\"></ng-container>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ProductDes let-product=\"data\" let-idx=\"idx\">\r\n <div (click)=\"proceedToProductDesc(product)\" class=\"position-relative box-shadow\" [style.height.px]=\"isMobile ? (styles?.mobileColumn == 1 ? '480' : '230' ) : ''\">\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n <!-- <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [id]=\"'preview_'+idx\" [src]=\"product.itemImages?.[product.prviewIdx]?.imgUrl\" alt=\"\"\r\n class=\"product-img preivew\" (mouseenter)=\"togglePreviewImage(product, idx)\"\r\n (mouseleave)=\"product.prviewIdx = 0\"> -->\r\n <image-loading [hash]=\"product.itemImages?.[product.prviewIdx]?.blurhash\" [index]=\"idx\" [imageUrl]=\"product.itemImages?.[product.prviewIdx]?.imgUrl\" [theme]=\"styles?.theme\"></image-loading>\r\n\r\n </div>\r\n <div class=\"mt-15 w-100\">\r\n <div class=\"product-name heading-large text-left trim-text w-100\" [id]=\"data?.id\" (click)=\"proceedToProductDesc(product)\"\r\n [simpoColor]=\"styles?.background?.color\">\r\n {{product.name }}</div>\r\n <ng-container *ngTemplateOutlet=\"VarientList; context: {data: product}\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"ProductPricing; context: {data: product}\"></ng-container>\r\n </div>\r\n</ng-template>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" 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", styles: ["div[class*=arrow]{background-color:#fff;color:#000;padding:5px;border-radius:50%;position:sticky;height:fit-content;top:50%;display:flex;align-items:center;justify-content:center;z-index:101;cursor:pointer;box-shadow:#63636333 0 2px 8px}div[class*=arrow] .mat-icon{color:#000}.left-arrow{left:2px}.right-arrow{right:2px}.product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;height:fit-content;cursor:pointer;position:relative;display:flex;flex-direction:column;justify-content:space-between}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:60px;width:45px;border-radius:5px;border:1px solid lightgray}.varient-list .selected-varient{border:1px solid transparent}.tags{position:absolute;top:8px;left:8px;display:flex;gap:5px}.tags .tag{font-size:12px;background-color:#fff;padding:5px;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.fav-icon{position:absolute;z-index:1000;padding:5px;right:8px;top:8px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;padding:5px 10px;border-radius:5px}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px;font-weight:500}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}@media screen and (max-width: 475px){.selling-price{display:none!important}}.discounted-price{margin-top:-3px}.add-product-button{width:20%}.action-btn{display:flex;justify-content:center;margin-top:20px}.action-btn>a{width:fit-content!important;padding:5px 20px;text-decoration:none}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative}.display-block{display:block!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid;border-radius:3px;padding:5px;font-weight:600;width:95px}.preivew{transition:opacity .5s ease-in-out;opacity:1}.transition-preview{opacity:0}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.them2-lisiting{min-width:195px;max-width:195px;margin-right:10px}.input-text{width:90%}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important}.default-image img{height:250px}.out-of-stock{font-size:12px!important}.input-text{width:100%}}.add-to-cart-btn{display:flex;gap:10px}.add-to-cart-btn .mat-icon{height:30px;width:35px;font-size:27px;margin-top:5px}.add-to-cart-btn button{height:35px;font-size:16px!important}.jc-space{justify-content:space-between}.align-end{align-items:end}.view-all{font-size:16px;font-weight:600;cursor:pointer}.box-shadow{box-shadow:#0000003d 0 3px 8px;border-radius:10px}.full-width-quantity{text-align:center;padding:unset;font-weight:600;height:35px}.change-quantity{width:15%;height:inherit;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:600;position:relative}.align-center{align-items:center}@media screen and (max-width: 475px){.product-name{font-size:14px}}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.g-10{gap:10px}.mb-5{margin-bottom:5px!important}\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: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "ngmodule", type: FormsModule }, { 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: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type:
|
|
12065
12068
|
//directive
|
|
12066
12069
|
SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: SimpoWrapComntainer, selector: "[simpoWrapContainer]", inputs: ["simpoWrapContainer"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "directive", type:
|
|
12067
12070
|
// MatBottomSheetModule,
|
|
@@ -12093,7 +12096,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
12093
12096
|
SmallProductListingComponent,
|
|
12094
12097
|
CardSkeletonLoaderComponent,
|
|
12095
12098
|
ImageLoadingComponent, SvgDividerComponent, TextEditorComponent
|
|
12096
|
-
], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<ng-container>\r\n <section class=\"container-fluid total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [simpoBackground]=\"styles?.background\" [attr.style]=\"customClass\">\r\n <div [id]=\"data?.id\" class=\"display-block\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"d-flex jc-space align-center content-side\">\r\n <div class=\"input-text content-side\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <!-- <div [innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"> -->\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n <!-- </div> -->\r\n </div>\r\n </div>\r\n <div class=\"body-large view-all\" *ngIf=\"content?.display?.showButton && screenWidth > 475\" (click)=\"proceedToProductList()\">{{viewAllButton?.content?.label ?? 'See All'}} ></div>\r\n </div>\r\n <img *ngIf=\"styles?.dividerImage?.showDivider\" loading=\"lazy\" [src]=\"styles?.dividerImage?.url\" alt=\"\"\r\n class=\"span-img mt-15\">\r\n <ng-container *ngIf=\"!apiLoading\">\r\n <div class=\"product-parent position-relative\" *ngIf=\"responseData && responseData?.length\"\r\n [simpoWrapContainer]=\"styles?.direction\" #container>\r\n <ng-container *ngIf=\"styles?.direction == 'ROW' && !isMobile\">\r\n <div class=\"left-arrow\" (click)=\"scrollLeft()\" *ngIf=\"showLeftArrow && responseData?.length\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n </ng-container>\r\n <div\r\n *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\"\r\n class=\"product\" [style.padding.px]=\"styles?.theme != theme.Theme1 ? '3' : ''\" [style.width.%]=\"styles?.theme != theme.Theme1 && isMobile && isRelatedProduct ? '48' : ''\" [style.minWidth]=\"applyProductWidth() ? getProductWidth() : ''\" [style.maxWidth]=\"applyProductWidth() ? getProductWidth() : ''\">\r\n <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\r\n <ng-container *ngTemplateOutlet=\"ProductDes; context: {data: product, idx: idx}\"></ng-container>\r\n </ng-container>\r\n <div *ngIf=\"styles?.theme != theme.Theme1\">\r\n <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"this.screenWidth > 475 || (this.screenWidth <= 475 && styles?.direction == 'ROW')\"></simpo-small-product-listing>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.direction == 'ROW' && !isMobile\">\r\n <div class=\"right-arrow\" (click)=\"scrollRight()\" *ngIf=\"showRightArrow && responseData?.length\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n </ng-container>\r\n <simpo-card-skeleton-loader *ngIf=\"apiLoading\"></simpo-card-skeleton-loader>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\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\r\n </section>\r\n</ng-container>\r\n\r\n<ng-template #VarientList let-product=\"data\">\r\n <div class=\"varient-list\" *ngIf=\"product?.itemVariant?.length\">\r\n <ng-container *ngFor=\"let varient of product?.itemVariant; let idx = index\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"varient.variantImages?.[0]?.imgUrl\"\r\n alt=\"\" class=\"varient\" [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\"\r\n [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\"\r\n (click)=\"selectVarient(product, varient)\">\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n</ng-template>\r\n\r\n<ng-template #AddToCart let-product=\"data\">\r\n <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\" [style.marginTop]=\"true ? '10px' : ''\">\r\n <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\" *ngIf=\"!product.quantity && !isItemOutOfStock(product)\"\r\n [backgroundInfo]=\"styles?.background\"\r\n (click)=\"addItemToCart(product, 'ADD')\">{{button?.content?.label ?? 'Add to Cart'}}</button>\r\n <div class=\"quantity full-width-quantity\" [style.borderColor]=\"styles?.background?.accentColor\" [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\" [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\r\n <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\" [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart(product, 'ADD')\">+</span>\r\n </div>\r\n <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ProductPricing let-product=\"data\">\r\n <div class=\"d-flex justify-content-between align-items-center\" [style.display]=\"true ? 'block!important' : ''\">\r\n <div class=\"price body-large d-flex g-10\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n <!-- <div *ngIf=\"product.price.value != product.price.discountedPrice\" class=\"selling-price\">\r\n <span [innerHTML]='currency'></span>\r\n {{product.price.value}}\r\n </div> -->\r\n <div class=\"price discount-price\" *ngIf=\"product?.price?.discountedPrice != product?.price?.value\">\r\n <span [innerHTML]='currency | sanitizeHtml'></span>\r\n {{product.price.value}}</div>\r\n <div>\r\n <span [innerHTML]='currency | sanitizeHtml'></span>\r\n {{product.price.sellingPrice | number:'1.0-0'}}\r\n </div>\r\n </div>\r\n <ng-container>\r\n <ng-container *ngTemplateOutlet=\"AddToCart; context: {data: product}\"></ng-container>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ProductDes let-product=\"data\" let-idx=\"idx\">\r\n <div (click)=\"proceedToProductDesc(product)\" class=\"position-relative box-shadow\" [style.height.px]=\"isMobile ? (styles?.mobileColumn == 1 ? '480' : '230' ) : ''\">\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n <!-- <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [id]=\"'preview_'+idx\" [src]=\"product.itemImages?.[product.prviewIdx]?.imgUrl\" alt=\"\"\r\n class=\"product-img preivew\" (mouseenter)=\"togglePreviewImage(product, idx)\"\r\n (mouseleave)=\"product.prviewIdx = 0\"> -->\r\n <image-loading [hash]=\"product.itemImages?.[product.prviewIdx]?.blurhash\" [index]=\"idx\" [imageUrl]=\"product.itemImages?.[product.prviewIdx]?.imgUrl\" [theme]=\"styles?.theme\"></image-loading>\r\n\r\n </div>\r\n <div class=\"mt-15 w-100\">\r\n <div class=\"product-name heading-large text-left trim-text w-100\" [id]=\"data?.id\" (click)=\"proceedToProductDesc(product)\"\r\n [simpoColor]=\"styles?.background?.color\">\r\n {{product.name }}</div>\r\n <ng-container *ngTemplateOutlet=\"VarientList; context: {data: product}\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"ProductPricing; context: {data: product}\"></ng-container>\r\n </div>\r\n</ng-template>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" 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", styles: ["div[class*=arrow]{background-color:#fff;color:#000;padding:5px;border-radius:50%;position:sticky;height:fit-content;top:50%;display:flex;align-items:center;justify-content:center;z-index:10000001;cursor:pointer;box-shadow:#63636333 0 2px 8px}div[class*=arrow] .mat-icon{color:#000}.left-arrow{left:2px}.right-arrow{right:2px}.product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;height:fit-content;cursor:pointer;position:relative;display:flex;flex-direction:column;justify-content:space-between}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:60px;width:45px;border-radius:5px;border:1px solid lightgray}.varient-list .selected-varient{border:1px solid transparent}.tags{position:absolute;top:8px;left:8px;display:flex;gap:5px}.tags .tag{font-size:12px;background-color:#fff;padding:5px;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.fav-icon{position:absolute;z-index:1000;padding:5px;right:8px;top:8px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;padding:5px 10px;border-radius:5px}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px;font-weight:500}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}@media screen and (max-width: 475px){.selling-price{display:none!important}}.discounted-price{margin-top:-3px}.add-product-button{width:20%}.action-btn{display:flex;justify-content:center;margin-top:20px}.action-btn>a{width:fit-content!important;padding:5px 20px;text-decoration:none}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative}.display-block{display:block!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid;border-radius:3px;padding:5px;font-weight:600;width:95px}.preivew{transition:opacity .5s ease-in-out;opacity:1}.transition-preview{opacity:0}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.them2-lisiting{min-width:195px;max-width:195px;margin-right:10px}.input-text{width:90%}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important}.default-image img{height:250px}.out-of-stock{font-size:12px!important}.input-text{width:100%}}.add-to-cart-btn{display:flex;gap:10px}.add-to-cart-btn .mat-icon{height:30px;width:35px;font-size:27px;margin-top:5px}.add-to-cart-btn button{height:35px;font-size:16px!important}.jc-space{justify-content:space-between}.align-end{align-items:end}.view-all{font-size:16px;font-weight:600;cursor:pointer}.box-shadow{box-shadow:#0000003d 0 3px 8px;border-radius:10px}.full-width-quantity{text-align:center;padding:unset;font-weight:600;height:35px}.change-quantity{width:15%;height:inherit;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:600;position:relative}.align-center{align-items:center}@media screen and (max-width: 475px){.product-name{font-size:14px}}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.g-10{gap:10px}.mb-5{margin-bottom:5px!important}\n"] }]
|
|
12099
|
+
], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<ng-container>\r\n <section class=\"container-fluid total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [simpoBackground]=\"styles?.background\" [attr.style]=\"customClass\">\r\n <div [id]=\"data?.id\" class=\"display-block\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"d-flex jc-space align-center content-side\">\r\n <div class=\"input-text content-side\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <!-- <div [innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"> -->\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n <!-- </div> -->\r\n </div>\r\n </div>\r\n <div class=\"body-large view-all\" *ngIf=\"content?.display?.showButton && screenWidth > 475\" (click)=\"proceedToProductList()\">{{viewAllButton?.content?.label ?? 'See All'}} ></div>\r\n </div>\r\n <img *ngIf=\"styles?.dividerImage?.showDivider\" loading=\"lazy\" [src]=\"styles?.dividerImage?.url\" alt=\"\"\r\n class=\"span-img mt-15\">\r\n <ng-container *ngIf=\"!apiLoading\">\r\n <div class=\"product-parent position-relative\" *ngIf=\"responseData && responseData?.length\"\r\n [simpoWrapContainer]=\"styles?.direction\" #container>\r\n <ng-container *ngIf=\"styles?.direction == 'ROW' && !isMobile\">\r\n <div class=\"left-arrow\" (click)=\"scrollLeft()\" *ngIf=\"showLeftArrow && responseData?.length\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n </ng-container>\r\n <div\r\n *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\"\r\n class=\"product\" [style.padding.px]=\"styles?.theme != theme.Theme1 ? '3' : ''\" [style.width.%]=\"styles?.theme != theme.Theme1 && isMobile && isRelatedProduct ? '48' : ''\" [style.minWidth]=\"applyProductWidth() ? getProductWidth() : ''\" [style.maxWidth]=\"applyProductWidth() ? getProductWidth() : ''\">\r\n <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\r\n <ng-container *ngTemplateOutlet=\"ProductDes; context: {data: product, idx: idx}\"></ng-container>\r\n </ng-container>\r\n <div *ngIf=\"styles?.theme != theme.Theme1\">\r\n <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"this.screenWidth > 475 || (this.screenWidth <= 475 && styles?.direction == 'ROW')\"></simpo-small-product-listing>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.direction == 'ROW' && !isMobile\">\r\n <div class=\"right-arrow\" (click)=\"scrollRight()\" *ngIf=\"showRightArrow && responseData?.length\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n </ng-container>\r\n <simpo-card-skeleton-loader *ngIf=\"apiLoading\"></simpo-card-skeleton-loader>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\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\r\n </section>\r\n</ng-container>\r\n\r\n<ng-template #VarientList let-product=\"data\">\r\n <div class=\"varient-list\" *ngIf=\"product?.itemVariant?.length\">\r\n <ng-container *ngFor=\"let varient of product?.itemVariant; let idx = index\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"varient.variantImages?.[0]?.imgUrl\"\r\n alt=\"\" class=\"varient\" [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\"\r\n [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\"\r\n (click)=\"selectVarient(product, varient)\">\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n</ng-template>\r\n\r\n<ng-template #AddToCart let-product=\"data\">\r\n <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\" [style.marginTop]=\"true ? '10px' : ''\">\r\n <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\" *ngIf=\"!product.quantity && !isItemOutOfStock(product)\"\r\n [backgroundInfo]=\"styles?.background\"\r\n (click)=\"addItemToCart(product, 'ADD')\">{{button?.content?.label ?? 'Add to Cart'}}</button>\r\n <div class=\"quantity full-width-quantity\" [style.borderColor]=\"styles?.background?.accentColor\" [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\" [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\r\n <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\" [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart(product, 'ADD')\">+</span>\r\n </div>\r\n <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ProductPricing let-product=\"data\">\r\n <div class=\"d-flex justify-content-between align-items-center\" [style.display]=\"true ? 'block!important' : ''\">\r\n <div class=\"price body-large d-flex g-10\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n <!-- <div *ngIf=\"product.price.value != product.price.discountedPrice\" class=\"selling-price\">\r\n <span [innerHTML]='currency'></span>\r\n {{product.price.value}}\r\n </div> -->\r\n <div class=\"price discount-price\" *ngIf=\"product?.price?.discountedPrice != product?.price?.value\">\r\n <span [innerHTML]='currency | sanitizeHtml'></span>\r\n {{product.price.value}}</div>\r\n <div>\r\n <span [innerHTML]='currency | sanitizeHtml'></span>\r\n {{product.price.sellingPrice | number:'1.0-0'}}\r\n </div>\r\n </div>\r\n <ng-container>\r\n <ng-container *ngTemplateOutlet=\"AddToCart; context: {data: product}\"></ng-container>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ProductDes let-product=\"data\" let-idx=\"idx\">\r\n <div (click)=\"proceedToProductDesc(product)\" class=\"position-relative box-shadow\" [style.height.px]=\"isMobile ? (styles?.mobileColumn == 1 ? '480' : '230' ) : ''\">\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n <!-- <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [id]=\"'preview_'+idx\" [src]=\"product.itemImages?.[product.prviewIdx]?.imgUrl\" alt=\"\"\r\n class=\"product-img preivew\" (mouseenter)=\"togglePreviewImage(product, idx)\"\r\n (mouseleave)=\"product.prviewIdx = 0\"> -->\r\n <image-loading [hash]=\"product.itemImages?.[product.prviewIdx]?.blurhash\" [index]=\"idx\" [imageUrl]=\"product.itemImages?.[product.prviewIdx]?.imgUrl\" [theme]=\"styles?.theme\"></image-loading>\r\n\r\n </div>\r\n <div class=\"mt-15 w-100\">\r\n <div class=\"product-name heading-large text-left trim-text w-100\" [id]=\"data?.id\" (click)=\"proceedToProductDesc(product)\"\r\n [simpoColor]=\"styles?.background?.color\">\r\n {{product.name }}</div>\r\n <ng-container *ngTemplateOutlet=\"VarientList; context: {data: product}\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"ProductPricing; context: {data: product}\"></ng-container>\r\n </div>\r\n</ng-template>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" 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", styles: ["div[class*=arrow]{background-color:#fff;color:#000;padding:5px;border-radius:50%;position:sticky;height:fit-content;top:50%;display:flex;align-items:center;justify-content:center;z-index:101;cursor:pointer;box-shadow:#63636333 0 2px 8px}div[class*=arrow] .mat-icon{color:#000}.left-arrow{left:2px}.right-arrow{right:2px}.product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;height:fit-content;cursor:pointer;position:relative;display:flex;flex-direction:column;justify-content:space-between}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:60px;width:45px;border-radius:5px;border:1px solid lightgray}.varient-list .selected-varient{border:1px solid transparent}.tags{position:absolute;top:8px;left:8px;display:flex;gap:5px}.tags .tag{font-size:12px;background-color:#fff;padding:5px;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.fav-icon{position:absolute;z-index:1000;padding:5px;right:8px;top:8px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;padding:5px 10px;border-radius:5px}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px;font-weight:500}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}@media screen and (max-width: 475px){.selling-price{display:none!important}}.discounted-price{margin-top:-3px}.add-product-button{width:20%}.action-btn{display:flex;justify-content:center;margin-top:20px}.action-btn>a{width:fit-content!important;padding:5px 20px;text-decoration:none}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative}.display-block{display:block!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid;border-radius:3px;padding:5px;font-weight:600;width:95px}.preivew{transition:opacity .5s ease-in-out;opacity:1}.transition-preview{opacity:0}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.them2-lisiting{min-width:195px;max-width:195px;margin-right:10px}.input-text{width:90%}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important}.default-image img{height:250px}.out-of-stock{font-size:12px!important}.input-text{width:100%}}.add-to-cart-btn{display:flex;gap:10px}.add-to-cart-btn .mat-icon{height:30px;width:35px;font-size:27px;margin-top:5px}.add-to-cart-btn button{height:35px;font-size:16px!important}.jc-space{justify-content:space-between}.align-end{align-items:end}.view-all{font-size:16px;font-weight:600;cursor:pointer}.box-shadow{box-shadow:#0000003d 0 3px 8px;border-radius:10px}.full-width-quantity{text-align:center;padding:unset;font-weight:600;height:35px}.change-quantity{width:15%;height:inherit;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:600;position:relative}.align-center{align-items:center}@media screen and (max-width: 475px){.product-name{font-size:14px}}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.g-10{gap:10px}.mb-5{margin-bottom:5px!important}\n"] }]
|
|
12097
12100
|
}], ctorParameters: () => [{ type: Object, decorators: [{
|
|
12098
12101
|
type: Inject,
|
|
12099
12102
|
args: [PLATFORM_ID]
|