npm - simpo-component-library - Versions diffs - 3.6.551 → 3.6.552 - Mend

simpo-component-library 3.6.551 → 3.6.552

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.

Files changed (15) hide show

package/fesm2022/simpo-component-library.mjs CHANGED Viewed

@@ -10947,7 +10947,7 @@ class BlogListComponent extends BaseSection {
         }, 100);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BlogListComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BlogListComponent, isStandalone: true, selector: "simpo-blog-list", inputs: { responseData: "responseData", index: "index", edit: "edit", customClass: "customClass", data: "data", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" class=\"total-container\" simpoHover\n  (hovering)=\"showEditTabs($event)\" *ngIf=\"(responseData?.length || 0) > 0;else elseBlock\" [attr.style]=\"customClass\">\n  <div [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\"\n    [simpoAnimation]=\"style?.animation\" [simpoLayout]=\"style?.layout\">\n    <div class=\"container-fluid\" [spacingHorizontal]=\"stylesLayout\">\n      <div class=\"row gap-20\">\n        <div [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\" *ngFor=\"let content of responseData\"\n          class=\"d-flex\">\n          <a [routerLink]=\"['/blog', content.newPostTitle]\" (click)=\"getBlogById(content.newPostTitle)\">\n            <div class=\"cards h-100\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\">\n              <img loading=\"lazy\" [src]=\"content.img\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\n                [simpoCorner]=\"style?.corners\" alt=\"\" *ngIf=\"content.img\" loading=\"lazy\">\n              <img loading=\"lazy\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\n                src=\"https://dev-beeos.s3.amazonaws.com/library-media/541329c1719236963199pexels-pixabay-262508.jpg\"\n                alt=\"\" *ngIf=\"!content.img\" loading=\"lazy\">\n              <div class=\"p-30\">\n                <div class=\"d-flex flex-wrap align-items-center gap-2\">\n                  <ng-container *ngFor=\"let tag of content?.tags | slice:0:4\">\n                    <p class=\"mb-0 p-2 border\">{{ tag }}</p>\n                  </ng-container>\n                </div>\n                <div class=\"heading-medium title mt-2 fs-20\" *ngIf=\"blogContent?.display?.showHeading\">\n                  {{content.postTitle.length > 100 ? content.postTitle.substring(0,100)+'...\"' : content.postTitle}}\n                  <!-- {{content.postTitle}} -->\n                </div>\n                <ng-container>\n                  <div class=\"body-large mt-4 pb-15\" *ngIf=\"blogContent?.display?.showContent\">\n                    {{ content.postSummary.length > 250 ? content.postSummary.substring(0, 250) + '...' :\n                    content.postSummary }}\n                  </div>\n                </ng-container>\n\n                <div class=\"d-flex justify-content-end p-2 align-items-center\" *ngIf=\"content?.author?.content && content?.author?.content.length > 0\">\n                  <p>- {{content?.author?.content | titlecase}}</p>\n                </div>\n\n                <!-- <div class=\"authors\" [ngClass]=\"'justify-content-' + (style?.layout?.align || '')\">\n                <div>\n                  <mat-icon>person</mat-icon> &nbsp;&nbsp;<span class=\"body-large\">{{content?.author?.content | titlecase}}</span>\n                </div>\n                <div class=\"calendar_today\">\n                  <mat-icon>calendar_today</mat-icon> &nbsp;&nbsp; <span class=\"body-large\">{{content.createdTimeStamp |\n                    date:'EEEE, MMM, d, y'}}</span>\n                </div>\n              </div>\n              <div class=\"button heading-large\" (click)=\"getBlogById(content.newPostTitle)\" [ngClass]=\"'justify-content-' + (style?.layout?.align || '')\">\n                Read More <mat-icon>arrow_right_alt</mat-icon>\n              </div> -->\n              </div>\n            </div>\n          </a>\n        </div>\n      </div>\n    </div>\n  </div>\n  <ng-container *ngIf=\"style?.devider?.display\">\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n  </ng-container>\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n</section>\n<ng-template #elseBlock>\n  <div class=\"no-blog-text heading-medium\">Sorry there are no blog posts.</div>\n</ng-template>", styles: [".cards{box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.cards img{width:100%;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.p-30{padding:10px 15px 0}.border{border:1px solid;border-radius:8px}.authors{display:flex;gap:35px;margin-top:40px}.authors div{display:flex}.authors .calendar_today{align-items:center}.authors .calendar_today mat-icon{font-size:20px}.button{font-size:15px;display:flex;align-items:center;gap:10px;cursor:pointer;font-family:interReg;font-weight:500;justify-content:end}.mt-20{margin-top:20px}.total-container{position:relative;height:auto}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.no-blog-text{font-size:24px;line-height:36px;height:40vh;display:flex;align-items:center;justify-content:center}.justify-content-right{justify-content:right}.h-100{height:100%}.gap-20{gap:20px 0px!important}.fs-20{font-size:20px!important}.pb-15{padding-bottom:15px}.ar-none{aspect-ratio:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.SlicePipe, name: "slice" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ColumnDirectiveDirective, selector: "[simpoColumnDirective]", inputs: ["simpoColumnDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BlogListComponent, isStandalone: true, selector: "simpo-blog-list", inputs: { responseData: "responseData", index: "index", edit: "edit", customClass: "customClass", data: "data", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" class=\"total-container\" simpoHover\r\n  (hovering)=\"showEditTabs($event)\" *ngIf=\"(responseData?.length || 0) > 0;else elseBlock\" [attr.style]=\"customClass\">\r\n  <div [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\"\r\n    [simpoAnimation]=\"style?.animation\" [simpoLayout]=\"style?.layout\">\r\n    <div class=\"container-fluid\" [spacingHorizontal]=\"stylesLayout\">\r\n      <div class=\"row gap-20\">\r\n        <div [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\" *ngFor=\"let content of responseData\"\r\n          class=\"d-flex\">\r\n          <a [routerLink]=\"['/blog', content.newPostTitle]\" (click)=\"getBlogById(content.articleSlug)\">\r\n            <div class=\"cards h-100\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\">\r\n              <img loading=\"lazy\" [src]=\"content.img\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n                [simpoCorner]=\"style?.corners\" alt=\"\" *ngIf=\"content.img\" loading=\"lazy\">\r\n              <img loading=\"lazy\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\r\n                src=\"https://dev-beeos.s3.amazonaws.com/library-media/541329c1719236963199pexels-pixabay-262508.jpg\"\r\n                alt=\"\" *ngIf=\"!content.img\" loading=\"lazy\">\r\n              <div class=\"p-30\">\r\n                <div class=\"d-flex flex-wrap align-items-center gap-2\">\r\n                  <ng-container *ngFor=\"let tag of content?.tags | slice:0:4\">\r\n                    <p class=\"mb-0 p-2 border\">{{ tag }}</p>\r\n                  </ng-container>\r\n                </div>\r\n                <div class=\"heading-medium title mt-2 fs-20\" *ngIf=\"blogContent?.display?.showHeading\">\r\n                  {{content.postTitle.length > 100 ? content.postTitle.substring(0,100)+'...\"' : content.postTitle}}\r\n                  <!-- {{content.postTitle}} -->\r\n                </div>\r\n                <ng-container>\r\n                  <div class=\"body-large mt-4 pb-15\" *ngIf=\"blogContent?.display?.showContent\">\r\n                    {{ content.postSummary.length > 250 ? content.postSummary.substring(0, 250) + '...' :\r\n                    content.postSummary }}\r\n                  </div>\r\n                </ng-container>\r\n\r\n                <div class=\"d-flex justify-content-end p-2 align-items-center\" *ngIf=\"content?.author?.content && content?.author?.content.length > 0\">\r\n                  <p>- {{content?.author?.content | titlecase}}</p>\r\n                </div>\r\n\r\n                <!-- <div class=\"authors\" [ngClass]=\"'justify-content-' + (style?.layout?.align || '')\">\r\n                <div>\r\n                  <mat-icon>person</mat-icon> &nbsp;&nbsp;<span class=\"body-large\">{{content?.author?.content | titlecase}}</span>\r\n                </div>\r\n                <div class=\"calendar_today\">\r\n                  <mat-icon>calendar_today</mat-icon> &nbsp;&nbsp; <span class=\"body-large\">{{content.createdTimeStamp |\r\n                    date:'EEEE, MMM, d, y'}}</span>\r\n                </div>\r\n              </div>\r\n              <div class=\"button heading-large\" (click)=\"getBlogById(content.newPostTitle)\" [ngClass]=\"'justify-content-' + (style?.layout?.align || '')\">\r\n                Read More <mat-icon>arrow_right_alt</mat-icon>\r\n              </div> -->\r\n              </div>\r\n            </div>\r\n          </a>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.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</section>\r\n<ng-template #elseBlock>\r\n  <div class=\"no-blog-text heading-medium\">Sorry there are no blog posts.</div>\r\n</ng-template>", styles: [".cards{box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.cards img{width:100%;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.p-30{padding:10px 15px 0}.border{border:1px solid;border-radius:8px}.authors{display:flex;gap:35px;margin-top:40px}.authors div{display:flex}.authors .calendar_today{align-items:center}.authors .calendar_today mat-icon{font-size:20px}.button{font-size:15px;display:flex;align-items:center;gap:10px;cursor:pointer;font-family:interReg;font-weight:500;justify-content:end}.mt-20{margin-top:20px}.total-container{position:relative;height:auto}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.no-blog-text{font-size:24px;line-height:36px;height:40vh;display:flex;align-items:center;justify-content:center}.justify-content-right{justify-content:right}.h-100{height:100%}.gap-20{gap:20px 0px!important}.fs-20{font-size:20px!important}.pb-15{padding-bottom:15px}.ar-none{aspect-ratio:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.SlicePipe, name: "slice" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ColumnDirectiveDirective, selector: "[simpoColumnDirective]", inputs: ["simpoColumnDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BlogListComponent, decorators: [{
             type: Component,
@@ -10964,7 +10964,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         HoverDirective,
                         HoverElementsComponent,
                         MatIcon, SvgDividerComponent,
-                        SpacingHorizontalDirective, RouterLink], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" class=\"total-container\" simpoHover\n  (hovering)=\"showEditTabs($event)\" *ngIf=\"(responseData?.length || 0) > 0;else elseBlock\" [attr.style]=\"customClass\">\n  <div [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\"\n    [simpoAnimation]=\"style?.animation\" [simpoLayout]=\"style?.layout\">\n    <div class=\"container-fluid\" [spacingHorizontal]=\"stylesLayout\">\n      <div class=\"row gap-20\">\n        <div [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\" *ngFor=\"let content of responseData\"\n          class=\"d-flex\">\n          <a [routerLink]=\"['/blog', content.newPostTitle]\" (click)=\"getBlogById(content.newPostTitle)\">\n            <div class=\"cards h-100\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\">\n              <img loading=\"lazy\" [src]=\"content.img\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\n                [simpoCorner]=\"style?.corners\" alt=\"\" *ngIf=\"content.img\" loading=\"lazy\">\n              <img loading=\"lazy\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\n                src=\"https://dev-beeos.s3.amazonaws.com/library-media/541329c1719236963199pexels-pixabay-262508.jpg\"\n                alt=\"\" *ngIf=\"!content.img\" loading=\"lazy\">\n              <div class=\"p-30\">\n                <div class=\"d-flex flex-wrap align-items-center gap-2\">\n                  <ng-container *ngFor=\"let tag of content?.tags | slice:0:4\">\n                    <p class=\"mb-0 p-2 border\">{{ tag }}</p>\n                  </ng-container>\n                </div>\n                <div class=\"heading-medium title mt-2 fs-20\" *ngIf=\"blogContent?.display?.showHeading\">\n                  {{content.postTitle.length > 100 ? content.postTitle.substring(0,100)+'...\"' : content.postTitle}}\n                  <!-- {{content.postTitle}} -->\n                </div>\n                <ng-container>\n                  <div class=\"body-large mt-4 pb-15\" *ngIf=\"blogContent?.display?.showContent\">\n                    {{ content.postSummary.length > 250 ? content.postSummary.substring(0, 250) + '...' :\n                    content.postSummary }}\n                  </div>\n                </ng-container>\n\n                <div class=\"d-flex justify-content-end p-2 align-items-center\" *ngIf=\"content?.author?.content && content?.author?.content.length > 0\">\n                  <p>- {{content?.author?.content | titlecase}}</p>\n                </div>\n\n                <!-- <div class=\"authors\" [ngClass]=\"'justify-content-' + (style?.layout?.align || '')\">\n                <div>\n                  <mat-icon>person</mat-icon> &nbsp;&nbsp;<span class=\"body-large\">{{content?.author?.content | titlecase}}</span>\n                </div>\n                <div class=\"calendar_today\">\n                  <mat-icon>calendar_today</mat-icon> &nbsp;&nbsp; <span class=\"body-large\">{{content.createdTimeStamp |\n                    date:'EEEE, MMM, d, y'}}</span>\n                </div>\n              </div>\n              <div class=\"button heading-large\" (click)=\"getBlogById(content.newPostTitle)\" [ngClass]=\"'justify-content-' + (style?.layout?.align || '')\">\n                Read More <mat-icon>arrow_right_alt</mat-icon>\n              </div> -->\n              </div>\n            </div>\n          </a>\n        </div>\n      </div>\n    </div>\n  </div>\n  <ng-container *ngIf=\"style?.devider?.display\">\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n  </ng-container>\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n</section>\n<ng-template #elseBlock>\n  <div class=\"no-blog-text heading-medium\">Sorry there are no blog posts.</div>\n</ng-template>", styles: [".cards{box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.cards img{width:100%;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.p-30{padding:10px 15px 0}.border{border:1px solid;border-radius:8px}.authors{display:flex;gap:35px;margin-top:40px}.authors div{display:flex}.authors .calendar_today{align-items:center}.authors .calendar_today mat-icon{font-size:20px}.button{font-size:15px;display:flex;align-items:center;gap:10px;cursor:pointer;font-family:interReg;font-weight:500;justify-content:end}.mt-20{margin-top:20px}.total-container{position:relative;height:auto}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.no-blog-text{font-size:24px;line-height:36px;height:40vh;display:flex;align-items:center;justify-content:center}.justify-content-right{justify-content:right}.h-100{height:100%}.gap-20{gap:20px 0px!important}.fs-20{font-size:20px!important}.pb-15{padding-bottom:15px}.ar-none{aspect-ratio:0!important}\n"] }]
+                        SpacingHorizontalDirective, RouterLink], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" class=\"total-container\" simpoHover\r\n  (hovering)=\"showEditTabs($event)\" *ngIf=\"(responseData?.length || 0) > 0;else elseBlock\" [attr.style]=\"customClass\">\r\n  <div [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\"\r\n    [simpoAnimation]=\"style?.animation\" [simpoLayout]=\"style?.layout\">\r\n    <div class=\"container-fluid\" [spacingHorizontal]=\"stylesLayout\">\r\n      <div class=\"row gap-20\">\r\n        <div [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\" *ngFor=\"let content of responseData\"\r\n          class=\"d-flex\">\r\n          <a [routerLink]=\"['/blog', content.newPostTitle]\" (click)=\"getBlogById(content.articleSlug)\">\r\n            <div class=\"cards h-100\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\">\r\n              <img loading=\"lazy\" [src]=\"content.img\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n                [simpoCorner]=\"style?.corners\" alt=\"\" *ngIf=\"content.img\" loading=\"lazy\">\r\n              <img loading=\"lazy\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\r\n                src=\"https://dev-beeos.s3.amazonaws.com/library-media/541329c1719236963199pexels-pixabay-262508.jpg\"\r\n                alt=\"\" *ngIf=\"!content.img\" loading=\"lazy\">\r\n              <div class=\"p-30\">\r\n                <div class=\"d-flex flex-wrap align-items-center gap-2\">\r\n                  <ng-container *ngFor=\"let tag of content?.tags | slice:0:4\">\r\n                    <p class=\"mb-0 p-2 border\">{{ tag }}</p>\r\n                  </ng-container>\r\n                </div>\r\n                <div class=\"heading-medium title mt-2 fs-20\" *ngIf=\"blogContent?.display?.showHeading\">\r\n                  {{content.postTitle.length > 100 ? content.postTitle.substring(0,100)+'...\"' : content.postTitle}}\r\n                  <!-- {{content.postTitle}} -->\r\n                </div>\r\n                <ng-container>\r\n                  <div class=\"body-large mt-4 pb-15\" *ngIf=\"blogContent?.display?.showContent\">\r\n                    {{ content.postSummary.length > 250 ? content.postSummary.substring(0, 250) + '...' :\r\n                    content.postSummary }}\r\n                  </div>\r\n                </ng-container>\r\n\r\n                <div class=\"d-flex justify-content-end p-2 align-items-center\" *ngIf=\"content?.author?.content && content?.author?.content.length > 0\">\r\n                  <p>- {{content?.author?.content | titlecase}}</p>\r\n                </div>\r\n\r\n                <!-- <div class=\"authors\" [ngClass]=\"'justify-content-' + (style?.layout?.align || '')\">\r\n                <div>\r\n                  <mat-icon>person</mat-icon> &nbsp;&nbsp;<span class=\"body-large\">{{content?.author?.content | titlecase}}</span>\r\n                </div>\r\n                <div class=\"calendar_today\">\r\n                  <mat-icon>calendar_today</mat-icon> &nbsp;&nbsp; <span class=\"body-large\">{{content.createdTimeStamp |\r\n                    date:'EEEE, MMM, d, y'}}</span>\r\n                </div>\r\n              </div>\r\n              <div class=\"button heading-large\" (click)=\"getBlogById(content.newPostTitle)\" [ngClass]=\"'justify-content-' + (style?.layout?.align || '')\">\r\n                Read More <mat-icon>arrow_right_alt</mat-icon>\r\n              </div> -->\r\n              </div>\r\n            </div>\r\n          </a>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.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</section>\r\n<ng-template #elseBlock>\r\n  <div class=\"no-blog-text heading-medium\">Sorry there are no blog posts.</div>\r\n</ng-template>", styles: [".cards{box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.cards img{width:100%;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.p-30{padding:10px 15px 0}.border{border:1px solid;border-radius:8px}.authors{display:flex;gap:35px;margin-top:40px}.authors div{display:flex}.authors .calendar_today{align-items:center}.authors .calendar_today mat-icon{font-size:20px}.button{font-size:15px;display:flex;align-items:center;gap:10px;cursor:pointer;font-family:interReg;font-weight:500;justify-content:end}.mt-20{margin-top:20px}.total-container{position:relative;height:auto}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.no-blog-text{font-size:24px;line-height:36px;height:40vh;display:flex;align-items:center;justify-content:center}.justify-content-right{justify-content:right}.h-100{height:100%}.gap-20{gap:20px 0px!important}.fs-20{font-size:20px!important}.pb-15{padding-bottom:15px}.ar-none{aspect-ratio:0!important}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { responseData: [{
                 type: Input
             }], index: [{
@@ -11912,11 +11912,11 @@ class ViewBlogComponent {
         // this._eventService.toggleEditorEvent.emit(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ViewBlogComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ViewBlogComponent, isStandalone: true, selector: "simpo-view-blog", inputs: { responseData: "responseData" }, ngImport: i0, template: "<section class=\"main-section\">\n  <div class=\"blog-details\">\n    <!-- <h1 class=\"blog-title\">{{responseData.postTitle}}</h1> -->\n    <div style=\"margin-top: 20px;\">\n      <ng-container *ngFor=\"let item of responseData?.blocks\">\n        <div *ngIf=\"item.type=='header'\">\n          <h1 *ngIf=\"item.data.level==1\" [innerHTML]=\"item.data.text\"></h1>\n          <h2 *ngIf=\"item.data.level==2\" [innerHTML]=\"item.data.text\"></h2>\n          <h3 *ngIf=\"item.data.level==3\" [innerHTML]=\"item.data.text\"></h3>\n          <h4 *ngIf=\"item.data.level==4\" [innerHTML]=\"item.data.text\"></h4>\n          <h5 *ngIf=\"item.data.level==5\" [innerHTML]=\"item.data.text\"></h5>\n          <h6 *ngIf=\"item.data.level==6\" [innerHTML]=\"item.data.text\"></h6>\n        </div>\n        <div *ngIf=\"item.type=='paragraph'\">\n          <p class=\"inner-text\" [innerHTML]=\"item.data.text\"></p>\n        </div>\n        <div *ngIf=\"item.type=='list'\">\n          <div *ngIf=\"item.type=='list'\">\n            <div *ngIf=\"item.data.style=='ordered'\">\n              <ol class=\"list-style\">\n                <ng-container *ngFor=\"let list of item.data.items\">\n                  <li>{{ list }}</li>\n                </ng-container>\n              </ol>\n            </div>\n            <div *ngIf=\"item.data.style=='unordered'\">\n              <ul class=\"list-style\">\n                <ng-container *ngFor=\"let list of item.data.items\">\n                  <li>{{ list }}</li>\n                </ng-container>\n              </ul>\n            </div>\n          </div>\n        </div>\n        <div *ngIf=\"item.type=='delimiter'\" class=\"ce-delimiter\">\n        </div>\n        <div *ngIf=\"item.type=='image'\" class=\"image-container\">\n          <img loading=\"lazy\"  [src]=\"item.data.file.url\" alt=\"\" loading=\"lazy\">\n        </div>\n        <div *ngIf=\"item.type=='table'\">\n\n          <table>\n            <ng-container *ngFor=\"let data of item.data.content\">\n              <tr>\n                <ng-container *ngFor=\"let item of data\">\n                  <td>{{ item }}</td>\n                </ng-container>\n              </tr>\n            </ng-container>\n          </table>\n\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</section>\n", styles: [".main-section{padding:5%;background-color:#fff}.blog-details{width:60%;margin:0 auto;font-family:jakartaMedium}.delimiter{display:flex;justify-content:center}.ce-delimiter:before{display:inline-block;content:\"***\";font-size:30px;line-height:65px;height:30px;letter-spacing:.2em}p{line-height:1.6em}.back-text{@include body16r();margin-left:9px;margin-top:1px;cursor:pointer}table{border-collapse:collapse;width:100%}th,td{border:1px solid black;text-align:center}.header{margin-top:8px;margin-bottom:14px;padding-left:20px}.header img,.configuration-tab img{cursor:pointer}.blogs-totalsection{background:#eee;position:absolute;top:55px;height:calc(100vh - 55px);width:81.7%;z-index:10;overflow-y:scroll;padding:14px}.blog-title{line-height:35px}.image-container{width:100%;margin:10px 0}.image-container img{width:100%;height:350px}h1,h2,h3,h4,h5,h6{padding:.6em 0 3px}.h1,.h2,.h3,h1,h2,h3{margin-top:0}.list-style li{text-align:left}@media only screen and (max-width :500px){.blog-details{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ViewBlogComponent, isStandalone: true, selector: "simpo-view-blog", inputs: { responseData: "responseData" }, ngImport: i0, template: "<section class=\"main-section\">\n  <div class=\"blog-details\">\n    <!-- <h1 class=\"blog-title\">{{responseData.postTitle}}</h1> -->\n    <div style=\"margin-top: 20px;\">\n      <ng-container *ngFor=\"let item of responseData?.blocks\">\n        <div *ngIf=\"item.type=='header'\">\n          <h1 *ngIf=\"item.data.level==1\" [innerHTML]=\"item.data.text\"></h1>\n          <h2 *ngIf=\"item.data.level==2\" [innerHTML]=\"item.data.text\"></h2>\n          <h3 *ngIf=\"item.data.level==3\" [innerHTML]=\"item.data.text\"></h3>\n          <h4 *ngIf=\"item.data.level==4\" [innerHTML]=\"item.data.text\"></h4>\n          <h5 *ngIf=\"item.data.level==5\" [innerHTML]=\"item.data.text\"></h5>\n          <h6 *ngIf=\"item.data.level==6\" [innerHTML]=\"item.data.text\"></h6>\n        </div>\n        <div *ngIf=\"item.type=='paragraph'\">\n          <p class=\"inner-text\" [innerHTML]=\"item.data.text\"></p>\n        </div>\n        <div *ngIf=\"item.type=='list'\">\n          <div *ngIf=\"item.type=='list'\">\n            <div *ngIf=\"item.data.style=='ordered'\">\n              <ol class=\"list-style\">\n                <ng-container *ngFor=\"let list of item.data.items\">\n                  <li>{{ list }}</li>\n                </ng-container>\n              </ol>\n            </div>\n            <div *ngIf=\"item.data.style=='unordered'\">\n              <ul class=\"list-style\">\n                <ng-container *ngFor=\"let list of item.data.items\">\n                  <li>{{ list }}</li>\n                </ng-container>\n              </ul>\n            </div>\n          </div>\n        </div>\n        <div *ngIf=\"item.type=='delimiter'\" class=\"ce-delimiter\">\n        </div>\n        <div *ngIf=\"item.type=='image'\" class=\"image-container\">\n          <img loading=\"lazy\"  [src]=\"item.data.file.url\" alt=\"\" loading=\"lazy\">\n        </div>\n        <div *ngIf=\"item.type=='table'\">\n\n          <table>\n            <ng-container *ngFor=\"let data of item.data.content\">\n              <tr>\n                <ng-container *ngFor=\"let item of data\">\n                  <td>{{ item }}</td>\n                </ng-container>\n              </tr>\n            </ng-container>\n          </table>\n\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</section>\n", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.main-section{padding:5%;background-color:#fff}.blog-details{width:60%;margin:0 auto}.delimiter{display:flex;justify-content:center}.ce-delimiter:before{display:inline-block;content:\"***\";font-size:30px;line-height:65px;height:30px;letter-spacing:.2em}p{line-height:1.6em}.back-text{@include body16r();margin-left:9px;margin-top:1px;cursor:pointer}table{border-collapse:collapse;width:100%}th,td{border:1px solid black;text-align:center}.header{margin-top:8px;margin-bottom:14px;padding-left:20px}.header img,.configuration-tab img{cursor:pointer}.blogs-totalsection{background:#eee;position:absolute;top:55px;height:calc(100vh - 55px);width:81.7%;z-index:10;overflow-y:scroll;padding:14px}.blog-title{line-height:35px}.image-container{width:100%;margin:10px 0}.image-container img{width:100%}h1,h2,h3,h4,h5,h6{padding:.6em 0 3px}.h1,.h2,.h3,h1,h2,h3{margin-top:0}.list-style li{text-align:left}@media only screen and (max-width :500px){.blog-details{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ViewBlogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-view-blog', standalone: true, imports: [CommonModule], template: "<section class=\"main-section\">\n  <div class=\"blog-details\">\n    <!-- <h1 class=\"blog-title\">{{responseData.postTitle}}</h1> -->\n    <div style=\"margin-top: 20px;\">\n      <ng-container *ngFor=\"let item of responseData?.blocks\">\n        <div *ngIf=\"item.type=='header'\">\n          <h1 *ngIf=\"item.data.level==1\" [innerHTML]=\"item.data.text\"></h1>\n          <h2 *ngIf=\"item.data.level==2\" [innerHTML]=\"item.data.text\"></h2>\n          <h3 *ngIf=\"item.data.level==3\" [innerHTML]=\"item.data.text\"></h3>\n          <h4 *ngIf=\"item.data.level==4\" [innerHTML]=\"item.data.text\"></h4>\n          <h5 *ngIf=\"item.data.level==5\" [innerHTML]=\"item.data.text\"></h5>\n          <h6 *ngIf=\"item.data.level==6\" [innerHTML]=\"item.data.text\"></h6>\n        </div>\n        <div *ngIf=\"item.type=='paragraph'\">\n          <p class=\"inner-text\" [innerHTML]=\"item.data.text\"></p>\n        </div>\n        <div *ngIf=\"item.type=='list'\">\n          <div *ngIf=\"item.type=='list'\">\n            <div *ngIf=\"item.data.style=='ordered'\">\n              <ol class=\"list-style\">\n                <ng-container *ngFor=\"let list of item.data.items\">\n                  <li>{{ list }}</li>\n                </ng-container>\n              </ol>\n            </div>\n            <div *ngIf=\"item.data.style=='unordered'\">\n              <ul class=\"list-style\">\n                <ng-container *ngFor=\"let list of item.data.items\">\n                  <li>{{ list }}</li>\n                </ng-container>\n              </ul>\n            </div>\n          </div>\n        </div>\n        <div *ngIf=\"item.type=='delimiter'\" class=\"ce-delimiter\">\n        </div>\n        <div *ngIf=\"item.type=='image'\" class=\"image-container\">\n          <img loading=\"lazy\"  [src]=\"item.data.file.url\" alt=\"\" loading=\"lazy\">\n        </div>\n        <div *ngIf=\"item.type=='table'\">\n\n          <table>\n            <ng-container *ngFor=\"let data of item.data.content\">\n              <tr>\n                <ng-container *ngFor=\"let item of data\">\n                  <td>{{ item }}</td>\n                </ng-container>\n              </tr>\n            </ng-container>\n          </table>\n\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</section>\n", styles: [".main-section{padding:5%;background-color:#fff}.blog-details{width:60%;margin:0 auto;font-family:jakartaMedium}.delimiter{display:flex;justify-content:center}.ce-delimiter:before{display:inline-block;content:\"***\";font-size:30px;line-height:65px;height:30px;letter-spacing:.2em}p{line-height:1.6em}.back-text{@include body16r();margin-left:9px;margin-top:1px;cursor:pointer}table{border-collapse:collapse;width:100%}th,td{border:1px solid black;text-align:center}.header{margin-top:8px;margin-bottom:14px;padding-left:20px}.header img,.configuration-tab img{cursor:pointer}.blogs-totalsection{background:#eee;position:absolute;top:55px;height:calc(100vh - 55px);width:81.7%;z-index:10;overflow-y:scroll;padding:14px}.blog-title{line-height:35px}.image-container{width:100%;margin:10px 0}.image-container img{width:100%;height:350px}h1,h2,h3,h4,h5,h6{padding:.6em 0 3px}.h1,.h2,.h3,h1,h2,h3{margin-top:0}.list-style li{text-align:left}@media only screen and (max-width :500px){.blog-details{width:100%}}\n"] }]
+            args: [{ selector: 'simpo-view-blog', standalone: true, imports: [CommonModule], template: "<section class=\"main-section\">\n  <div class=\"blog-details\">\n    <!-- <h1 class=\"blog-title\">{{responseData.postTitle}}</h1> -->\n    <div style=\"margin-top: 20px;\">\n      <ng-container *ngFor=\"let item of responseData?.blocks\">\n        <div *ngIf=\"item.type=='header'\">\n          <h1 *ngIf=\"item.data.level==1\" [innerHTML]=\"item.data.text\"></h1>\n          <h2 *ngIf=\"item.data.level==2\" [innerHTML]=\"item.data.text\"></h2>\n          <h3 *ngIf=\"item.data.level==3\" [innerHTML]=\"item.data.text\"></h3>\n          <h4 *ngIf=\"item.data.level==4\" [innerHTML]=\"item.data.text\"></h4>\n          <h5 *ngIf=\"item.data.level==5\" [innerHTML]=\"item.data.text\"></h5>\n          <h6 *ngIf=\"item.data.level==6\" [innerHTML]=\"item.data.text\"></h6>\n        </div>\n        <div *ngIf=\"item.type=='paragraph'\">\n          <p class=\"inner-text\" [innerHTML]=\"item.data.text\"></p>\n        </div>\n        <div *ngIf=\"item.type=='list'\">\n          <div *ngIf=\"item.type=='list'\">\n            <div *ngIf=\"item.data.style=='ordered'\">\n              <ol class=\"list-style\">\n                <ng-container *ngFor=\"let list of item.data.items\">\n                  <li>{{ list }}</li>\n                </ng-container>\n              </ol>\n            </div>\n            <div *ngIf=\"item.data.style=='unordered'\">\n              <ul class=\"list-style\">\n                <ng-container *ngFor=\"let list of item.data.items\">\n                  <li>{{ list }}</li>\n                </ng-container>\n              </ul>\n            </div>\n          </div>\n        </div>\n        <div *ngIf=\"item.type=='delimiter'\" class=\"ce-delimiter\">\n        </div>\n        <div *ngIf=\"item.type=='image'\" class=\"image-container\">\n          <img loading=\"lazy\"  [src]=\"item.data.file.url\" alt=\"\" loading=\"lazy\">\n        </div>\n        <div *ngIf=\"item.type=='table'\">\n\n          <table>\n            <ng-container *ngFor=\"let data of item.data.content\">\n              <tr>\n                <ng-container *ngFor=\"let item of data\">\n                  <td>{{ item }}</td>\n                </ng-container>\n              </tr>\n            </ng-container>\n          </table>\n\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</section>\n", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.main-section{padding:5%;background-color:#fff}.blog-details{width:60%;margin:0 auto}.delimiter{display:flex;justify-content:center}.ce-delimiter:before{display:inline-block;content:\"***\";font-size:30px;line-height:65px;height:30px;letter-spacing:.2em}p{line-height:1.6em}.back-text{@include body16r();margin-left:9px;margin-top:1px;cursor:pointer}table{border-collapse:collapse;width:100%}th,td{border:1px solid black;text-align:center}.header{margin-top:8px;margin-bottom:14px;padding-left:20px}.header img,.configuration-tab img{cursor:pointer}.blogs-totalsection{background:#eee;position:absolute;top:55px;height:calc(100vh - 55px);width:81.7%;z-index:10;overflow-y:scroll;padding:14px}.blog-title{line-height:35px}.image-container{width:100%;margin:10px 0}.image-container img{width:100%}h1,h2,h3,h4,h5,h6{padding:.6em 0 3px}.h1,.h2,.h3,h1,h2,h3{margin-top:0}.list-style li{text-align:left}@media only screen and (max-width :500px){.blog-details{width:100%}}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { responseData: [{
                 type: Input
             }] } });
@@ -19776,7 +19776,7 @@ class OrderDetailsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OrderDetailsComponent, deps: [{ token: EventsService }, { token: StorageServiceService }, { token: RestService }, { token: i6$1.MessageService }, { token: ImageUplaodService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: OrderDetailsComponent, isStandalone: true, selector: "simpo-order-details", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", orderDetailData: "orderDetailData" }, outputs: { goBackEmitter: "goBackEmitter" }, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n    <div class=\"container-fluid\" [attr.style]=\"customClass\">\r\n\r\n        <!-- Header Section -->\r\n        <div class=\"row\" *ngIf=\"!isMobile\">\r\n            <div class=\"col-12 d-flex justify-content-between align-items-center\">\r\n                <div class=\"d-flex flex-column\">\r\n                    <div class=\"d-flex align-items-center gap-3\">\r\n                        <mat-icon (click)=\"goBack()\">keyboard_backspace</mat-icon>\r\n                        <h3 class=\"fw-bold text-dark mb-0\">{{ orderDetailData?.orderNum }}</h3>\r\n                    </div>\r\n                    <div class=\"d-flex flex-wrap gap-2 mb-2\">\r\n                        <span class=\"d-flex align-items-center text-muted\">\r\n                            <mat-icon class=\"fs-5 d-flex align-items-center justify-content-start\">schedule</mat-icon>\r\n                            <small>{{ orderDetailData?.createdTimeStamp | date: 'dd MMM yyyy , h : mm a' }}</small>\r\n                        </span>\r\n                        <span class=\"d-flex align-items-center text-muted\">\r\n                            <mat-icon\r\n                                class=\"fs-5 d-flex align-items-center justify-content-center\">shopping_bag</mat-icon>\r\n                            <small>{{ orderDetailData?.brandOrderDetails?.[0]?.orderedItems.length }}\r\n                                items</small>\r\n                        </span>\r\n                    </div>\r\n                </div>\r\n                <div\r\n                    [attr.class]=\"orderDetailData?.brandOrderDetails?.[0]?.orderStatus + ' order-status d-flex align-items-center gap-1'\">\r\n                    {{ orderDetailData?.brandOrderDetails?.[0]?.orderStatus?.replaceAll(\"_\", \" \") | titlecase }}\r\n                    <mat-icon class=\"f-13 d-flex align-items-center justify-content-center\"\r\n                        *ngIf=\"orderDetailData?.brandOrderDetails?.[0]?.orderStatus == 'CANCELLED'\"\r\n                        [matTooltip]=\"orderDetailData?.brandOrderDetails?.[0]?.additionalInformation['CANCEL REASON ']\">info</mat-icon>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Mobile Header -->\r\n        <div class=\"card border-0 shadow-sm mb-3\" *ngIf=\"isMobile\">\r\n            <div class=\"card-body d-flex justify-content-between align-items-center py-3\">\r\n                <h2 class=\"h4 mb-0 fw-semibold\">{{ orderDetailData?.orderNum }}</h2>\r\n                <div></div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"row g-4\">\r\n            <!-- Left Column -->\r\n            <div class=\"col-12\" [ngClass]=\"{'col-lg-8': !isMobile}\">\r\n\r\n                <!-- Timeline for Desktop -->\r\n\r\n                <!-- Items Section -->\r\n                <div class=\"card border-0 shadow-sm mb-4\">\r\n                    <div class=\"card-header py-3\" [simpoBackground]=\"styles?.background\" [id]=\"data?.id\">\r\n                        <h4 class=\"h5 mb-0 d-flex align-items-center gap-2 f-16\">\r\n                            <mat-icon>shopping_cart</mat-icon>\r\n                            Ordered Items\r\n                        </h4>\r\n                    </div>\r\n                    <div class=\"card-body p-4 scroll-45\">\r\n                        <div class=\"row g-3\">\r\n                            <div class=\"col-12\"\r\n                                *ngFor=\"let item of orderDetailData?.brandOrderDetails[0]?.orderedItems\">\r\n                                <div class=\"h-100\">\r\n                                    <div class=\"card-body p-3\">\r\n                                        <div class=\"row align-items-start\">\r\n                                            <div class=\"col-auto position-relative\">\r\n                                                <img loading=\"lazy\"\r\n                                                    onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                                                    [src]=\"item.imgUrl\" alt=\"{{ item.itemName }}\"\r\n                                                    class=\"rounded shadow-sm\"\r\n                                                    style=\"width: 85px; height: 85px; object-fit: cover;\">\r\n                                            </div>\r\n                                            <div class=\"col\">\r\n                                                <h4 class=\"h6 fw-semibold text-dark\">{{ item.itemName }}</h4>\r\n\r\n                                                <div class=\"row\">\r\n                                                    <div class=\"col-6 text-start\" *ngIf=\"!isMobile\">\r\n                                                        <div class=\"fw-bold\">\r\n                                                            <span [innerHTML]=\"currency\"></span>{{\r\n                                                            (item.sellingPrice | number: '1.0-2') + ' x ' +\r\n                                                            item.quantity }}\r\n                                                        </div>\r\n                                                    </div>\r\n                                                    <div class=\"col-md-6 col-sm-12 text-end text-nowrap\">\r\n                                                        <div class=\" p-2\">\r\n                                                            <div class=\"fw-bold\">\r\n                                                                <span [innerHTML]=\"currency\"></span>{{\r\n                                                                (item.sellingPrice * item.quantity) | number: '1.0-2'\r\n                                                                }}\r\n                                                            </div>\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n                                                <!-- Review Section -->\r\n                                                <div>\r\n                                                    <div class=\"mb-1\">\r\n                                                        <p-rating [(ngModel)]=\"item.rating\" [cancel]=\"false\"\r\n                                                            [readonly]=\"false\" />\r\n                                                    </div>\r\n\r\n                                                    <div class=\"add-detail-review f-13 cursor-pointer\"\r\n                                                        (click)=\"item.showReview = !item.showReview\">Add Detailed Review\r\n                                                    </div>\r\n\r\n                                                    <div *ngIf=\"item.showReview\">\r\n                                                        <div class=\"mb-1\">\r\n                                                            <textarea class=\"form-control border-2\"\r\n                                                                [(ngModel)]=\"item.review\" rows=\"3\"></textarea>\r\n                                                        </div>\r\n                                                        <div class=\"review-img\">\r\n                                                            <img [src]=\"img.imgUrl\" alt=\"\"\r\n                                                                *ngFor=\"let img of item?.reviewImages ?? []\">\r\n                                                            <div class=\"add-review-img\"\r\n                                                                (click)=\"reviewFileInput.click()\"\r\n                                                                [ngClass]=\"{'w-100': (item?.reviewImages?.length ?? 0) == 0}\">\r\n                                                                <mat-icon>add</mat-icon> {{(item?.reviewImages?.length\r\n                                                                ?? 0) == 0 ? 'Add Images' : ''}}\r\n                                                            </div>\r\n                                                            <input type=\"file\" name=\"myfile\" multiple hidden\r\n                                                                accept=\"image/jpg,image/jpeg,image/gif,image/png,application/pdf,image/x-eps\"\r\n                                                                (change)=\"uploadImage($event, item)\" class=\"pc-btn\"\r\n                                                                #reviewFileInput />\r\n                                                        </div>\r\n\r\n                                                        <div class=\"w-100 text-end p-2 sbt-btn f-13 cursor-pointer\"\r\n                                                            (click)=\"submitReview(item)\">\r\n                                                            Submit\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\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                <!-- Timeline for Mobile -->\r\n                <ng-container *ngIf=\"isMobile\">\r\n                    <ng-container *ngTemplateOutlet=\"timelineContainer\"></ng-container>\r\n                </ng-container>\r\n            </div>\r\n\r\n            <!-- Right Column -->\r\n            <div class=\"col-12 scroll-60\" [ngClass]=\"{'col-lg-4': !isMobile}\">\r\n\r\n                <!-- Bill Details -->\r\n                <div class=\"card border-0 shadow-sm mb-4\">\r\n                    <div class=\"card-header py-3 cursor-pointer\" [simpoBackground]=\"styles?.background\" [id]=\"data?.id\"\r\n                        (click)=\"toggleSection('billDetails')\">\r\n                        <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\">\r\n                            <div class=\"d-flex align-items-center gap-2\">\r\n                                <mat-icon>receipt</mat-icon>\r\n                                Bill Details\r\n                            </div>\r\n                            <mat-icon class=\"transition-transform\" [class.rotate-180]=\"!sectionsVisible.billDetails\">\r\n                                expand_less\r\n                            </mat-icon>\r\n                        </h4>\r\n                    </div>\r\n                    <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.billDetails\">\r\n                        <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\">\r\n                            <span class=\"text-muted\">Item Total</span>\r\n                            <span class=\"fw-semibold h6 mb-0\">\r\n                                <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.totalNetValue |\r\n                                number:'1.0-2' }}\r\n                            </span>\r\n                        </div>\r\n\r\n                        <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\"\r\n                            *ngIf=\"orderDetailData?.billDetails?.discountAmount\">\r\n                            <span class=\"d-flex align-items-center gap-2 text-muted\">\r\n                                Discount\r\n                            </span>\r\n                            <span class=\"fw-semibold text-success h6 mb-0\">\r\n                                -<span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.discountAmount |\r\n                                number:'1.0-2' }}\r\n                            </span>\r\n                        </div>\r\n\r\n                        <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\">\r\n                            <span class=\"text-muted\">Total Tax</span>\r\n                            <span class=\"fw-semibold h6 mb-0\">\r\n                                <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.discountAmount ?\r\n                                orderDetailData?.billDetails?.totalTaxAfterDiscount :\r\n                                orderDetailData?.billDetails?.totalTax | number:'1.0-2' }}\r\n                            </span>\r\n                        </div>\r\n\r\n                        <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\"\r\n                            *ngIf=\"orderDetailData?.billDetails?.orraSchemeRedeemedAmount\">\r\n                            <span class=\"text-muted\">Redeem Amount</span>\r\n                            <span class=\"fw-semibold h6 mb-0\">\r\n                                <span [innerHTML]=\"currency\"></span>{{\r\n                                orderDetailData?.billDetails?.orraSchemeRedeemedAmount | number:'1.0-2' }}\r\n                            </span>\r\n                        </div>\r\n\r\n                        <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\">\r\n                            <span class=\"d-flex align-items-center gap-2 text-muted\">\r\n                                Delivery\r\n                            </span>\r\n                            <span class=\"fw-bold text-success h6 mb-0\">{{orderDetailData?.billDetails.deliveryCharges ?\r\n                                orderDetailData?.billDetails.deliveryCharges : 'FREE'}}</span>\r\n                        </div>\r\n\r\n                        <div class=\"d-flex justify-content-between align-items-center py-3 mt-3  rounded px-3\">\r\n                            <span class=\"fw-bold h5 mb-0 text-dark\">Grand Total</span>\r\n                            <span class=\"fw-bold h4 mb-0 \">\r\n                                <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.finalPrice }}\r\n                            </span>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n                <!-- Customer Details -->\r\n                <div class=\"card border-0 shadow-sm mb-4\">\r\n                    <div class=\"card-header py-3 cursor-pointer\" [simpoBackground]=\"styles?.background\" [id]=\"data?.id\"\r\n                        (click)=\"toggleSection('deliveryDetails')\">\r\n                        <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\">\r\n                            <div class=\"d-flex align-items-center gap-2\">\r\n                                <mat-icon>person</mat-icon>\r\n                                Delivery Details\r\n                            </div>\r\n                            <mat-icon class=\"transition-transform\"\r\n                                [class.rotate-180]=\"!sectionsVisible.deliveryDetails\">\r\n                                expand_less\r\n                            </mat-icon>\r\n                        </h4>\r\n                    </div>\r\n                    <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.deliveryDetails\">\r\n                        <div class=\"mb-3\">\r\n                            <div class=\"d-flex align-items-center gap-3 p-2 bg-light rounded\">\r\n                                <div>\r\n                                    <small class=\"text-muted d-block\">Name</small>\r\n                                    <span class=\"fw-semibold\">{{ orderDetailData?.addressDetails?.receiverName }}</span>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"mb-3\">\r\n                            <div class=\"d-flex align-items-center gap-3 p-2 bg-light rounded\">\r\n                                <div>\r\n                                    <small class=\"text-muted d-block\">Phone</small>\r\n                                    <span class=\"fw-semibold\">{{ orderDetailData?.addressDetails?.receiverPhone\r\n                                        }}</span>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"mb-3\">\r\n                            <div class=\"d-flex align-items-start gap-3 p-2 bg-light rounded\">\r\n                                <div>\r\n                                    <small class=\"text-muted d-block\">Address</small>\r\n                                    <span class=\"fw-semibold\">{{ orderAddress }}</span>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"mb-3\">\r\n                            <div class=\"d-flex align-items-center gap-3 p-2 bg-light rounded\">\r\n                                <div>\r\n                                    <small class=\"text-muted d-block\">Payment</small>\r\n                                    <span class=\"fw-semibold\">{{orderDetailData?.paymentDetails ?\r\n                                        (getKey(orderDetailData?.paymentDetails)==='COD' ? 'Cash on Delivery':\r\n                                        getKey(orderDetailData?.paymentDetails) ) : 'N/A'}}</span>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <!-- Track Order Button -->\r\n                        <div class=\"text-center mt-4\" *ngIf=\"orderDetailData?.orderTrackingLink\">\r\n                            <button\r\n                                class=\"btn btn-primary w-100 d-flex align-items-center justify-content-center gap-2 py-2\"\r\n                                (click)=\"trackOrder()\">\r\n                                <mat-icon>location_searching</mat-icon>\r\n                                Track Order\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n                <!-- Timeline Section for Desktop -->\r\n                <div class=\"card border-0 shadow-sm mb-4\" *ngIf=\"!isMobile\">\r\n                    <div class=\"card-header py-3 cursor-pointer\" (click)=\"toggleSection('timeline')\"\r\n                        [simpoBackground]=\"styles?.background\" [id]=\"data?.id\">\r\n                        <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\r\n\r\n    \">\r\n                            <div class=\"d-flex align-items-center gap-2\">\r\n                                <mat-icon>timeline</mat-icon>\r\n                                Order Timeline\r\n                            </div>\r\n                            <mat-icon class=\"transition-transform\" [class.rotate-180]=\"!sectionsVisible.timeline\">\r\n                                expand_less\r\n                            </mat-icon>\r\n                        </h4>\r\n                    </div>\r\n                    <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.timeline\">\r\n                        <p-timeline [value]=\"orderTimiline\">\r\n                            <ng-template pTemplate=\"content\" let-event>\r\n                                <div class=\"d-flex align-items-start gap-3 py-3\">\r\n                                    <div class=\"rounded-circle p-2 d-flex align-items-center justify-content-center\"\r\n                                        style=\"width: 40px; height: 40px;\" [simpoBackground]=\"styles?.background\"\r\n                                        [id]=\"data?.id\">\r\n                                        <mat-icon class=\"fs-6 d-flex align-items-center justify-content-center\">{{\r\n                                            event.icon }}</mat-icon>\r\n                                    </div>\r\n                                    <div class=\"flex-grow-1\">\r\n                                        <h6 class=\"fw-semibold text-dark mb-1\">{{ event.name?.replaceAll(\"_\", \" \") |\r\n                                            titlecase }}</h6>\r\n                                        <p class=\"text-muted mb-0 small\">{{ event.desc?.replaceAll(\"_\", \" \") }}</p>\r\n                                    </div>\r\n                                </div>\r\n                            </ng-template>\r\n                        </p-timeline>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n        </div>\r\n    </div>\r\n</ng-container>\r\n\r\n<!-- Timeline Template -->\r\n<ng-template #timelineContainer>\r\n    <div class=\"card border-0 shadow-sm mb-4\">\r\n        <div class=\"card-header bg-warning text-dark py-2 f-16\">\r\n            <h4 class=\"h5 mb-0 d-flex align-items-center gap-2\">\r\n                <mat-icon>timeline</mat-icon>\r\n                Order Timeline\r\n            </h4>\r\n        </div>\r\n        <div class=\"card-body p-4\">\r\n            <p-timeline [value]=\"orderTimiline\">\r\n                <ng-template pTemplate=\"content\" let-event>\r\n                    <div class=\"d-flex align-items-start gap-3 py-3\">\r\n                        <div class=\"bg-primary rounded-circle p-2 d-flex align-items-center justify-content-center\"\r\n                            style=\"width: 40px; height: 40px;\">\r\n                            <mat-icon class=\"text-white fs-6 d-flex align-items-center justify-content-center\">{{\r\n                                event.icon }}</mat-icon>\r\n                        </div>\r\n                        <div class=\"flex-grow-1\">\r\n                            <h6 class=\"fw-semibold text-dark mb-1\">{{ event.name?.replaceAll(\"_\", \" \") | titlecase }}\r\n                            </h6>\r\n                            <p class=\"text-muted mb-0 small\">{{ event.desc?.replaceAll(\"_\", \" \") | titlecase }}</p>\r\n                        </div>\r\n                    </div>\r\n                </ng-template>\r\n            </p-timeline>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<!-- Loading Skeleton -->\r\n<div class=\"container-fluid py-4\" *ngIf=\"isLoading\">\r\n    <div class=\"row\">\r\n        <div class=\"col-12\">\r\n            <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n                width: '100%',\r\n                height: '60vh',\r\n                'border-radius': '12px',\r\n                'margin': '20px 0'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".right{height:250px;padding:15px;background-color:#f8f8f8;border-radius:8px;color:#000}*{font-family:var(--website-font-family)}hr{border-top-width:2px;margin:15px 0}.f-13{font-size:13px}.f-16{font-size:16px}.fw-800{font-weight:800}.br-6{border-radius:6px}textarea{resize:unset}.action-btn>button{font-size:14px!important;border:none;width:fit-content!important;margin-top:5px;border-radius:3px;padding:5px 10px;background-color:tomato;color:#fff}.mat-icon{height:30px;width:30px;font-size:30px}.timeline{margin:25px 0}.onlyMobile{display:none}.track-order{background-color:#000;color:#fff;border:1px solid black;width:auto;border-radius:3px;padding:5px}@media only screen and (max-width: 475px){.onlyDesktop{display:none!important}.onlyMobile{display:block}.mat-icon{width:46px}.time-line{padding-bottom:6px}.right{width:98%!important;margin-bottom:4px!important;height:auto!important;padding:15px!important;margin-top:5%}.main-section{width:100%!important;flex-direction:column!important}.left{width:100%!important;padding:3%}.orderNum{margin-bottom:25px}}@media (min-width:768px) and (max-width:1024px){.left{padding:3%;width:70%}.right{width:28%!important;padding:2%;margin-top:10%;margin-right:3%}}.mt-25{margin-top:25px}.cp{cursor:pointer}.item-summary{box-shadow:0 0 4px #00000040;border-radius:12px}mat-icon{font-family:Material Icons!important}::ng-deep .p-rating-icon{color:#ffc107!important;font-size:1.25rem!important}::ng-deep .p-timeline-event-content{padding:0!important}::ng-deep .p-timeline-event-connector{background:#000!important;width:3px!important;position:absolute;bottom:-20px;height:55px;left:18px}.sbt-btn{border-radius:8px}::ng-deep .p-timeline-event-marker{display:none!important}@media screen and (min-width: 1200px){.scroll-45{overflow-y:scroll;height:45vh}.scroll-60{overflow-y:scroll;height:60vh}}.f-16{font-size:16px!important}.f-13{font-size:13px!important}@media (max-width: 575.98px){.display-6{font-size:1.5rem}.h3{font-size:1.25rem}}.gap-3{gap:1rem!important}.shadow-sm{box-shadow:0 .125rem .5rem #0000001a!important}.card-header{border-bottom:unset!important}.btn:hover{transform:translateY(-1px);transition:all .2s ease}.card:hover{transform:translateY(-2px);transition:all .3s ease}.bg-opacity-10{background-color:rgba(var(--bs-primary-rgb),.1)!important}.cursor-pointer{cursor:pointer}.transition-transform{transition:transform .3s ease}.rotate-180{transform:rotate(180deg)}.card-header:hover{opacity:.9;transition:opacity .2s ease}.card-body{transition:all .3s ease}.review-img{display:flex;gap:10px;margin-top:10px}.review-img img{max-width:100px;max-height:140px}.add-review-img{color:#828484;width:65px;display:flex;align-items:center;justify-content:center;order:3px dotted black;background:#f0f2f2;border:1px solid #d5d9d9!important;cursor:pointer}.order-status{border-radius:8px;padding:5px 8px;font-size:16px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: TimelineModule }, { kind: "component", type: i8$4.Timeline, selector: "p-timeline", inputs: ["value", "style", "styleClass", "align", "layout"] }, { kind: "directive", type: i6$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: PanelModule }, { kind: "ngmodule", type: RatingModule }, { kind: "component", type: i7$3.Rating, selector: "p-rating", inputs: ["disabled", "readonly", "stars", "cancel", "iconOnClass", "iconOnStyle", "iconOffClass", "iconOffStyle", "iconCancelClass", "iconCancelStyle", "autofocus"], outputs: ["onRate", "onCancel", "onFocus", "onBlur"] }, { 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: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: OrderDetailsComponent, isStandalone: true, selector: "simpo-order-details", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", orderDetailData: "orderDetailData" }, outputs: { goBackEmitter: "goBackEmitter" }, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n    <div class=\"container-fluid\" [attr.style]=\"customClass\">\r\n\r\n        <!-- Header Section -->\r\n        <div class=\"row\" *ngIf=\"!isMobile\">\r\n            <div class=\"col-12 d-flex justify-content-between align-items-center\">\r\n                <div class=\"d-flex flex-column\">\r\n                    <div class=\"d-flex align-items-center gap-3\">\r\n                        <mat-icon (click)=\"goBack()\">keyboard_backspace</mat-icon>\r\n                        <h3 class=\"fw-bold text-dark mb-0\">{{ orderDetailData?.orderNum }}</h3>\r\n                    </div>\r\n                    <div class=\"d-flex flex-wrap gap-2 mb-2\">\r\n                        <span class=\"d-flex align-items-center text-muted\">\r\n                            <mat-icon class=\"fs-5 d-flex align-items-center justify-content-start\">schedule</mat-icon>\r\n                            <small>{{ orderDetailData?.createdTimeStamp | date: 'dd MMM yyyy , h : mm a' }}</small>\r\n                        </span>\r\n                        <span class=\"d-flex align-items-center text-muted\">\r\n                            <mat-icon\r\n                                class=\"fs-5 d-flex align-items-center justify-content-center\">shopping_bag</mat-icon>\r\n                            <small>{{ orderDetailData?.brandOrderDetails?.[0]?.orderedItems.length }}\r\n                                items</small>\r\n                        </span>\r\n                    </div>\r\n                </div>\r\n                <div\r\n                    [attr.class]=\"orderDetailData?.brandOrderDetails?.[0]?.orderStatus + ' order-status d-flex align-items-center gap-1'\">\r\n                    {{ orderDetailData?.brandOrderDetails?.[0]?.orderStatus?.replaceAll(\"_\", \" \") | titlecase }}\r\n                    <mat-icon class=\"f-13 d-flex align-items-center justify-content-center\"\r\n                        *ngIf=\"orderDetailData?.brandOrderDetails?.[0]?.orderStatus == 'CANCELLED'\"\r\n                        [matTooltip]=\"orderDetailData?.brandOrderDetails?.[0]?.additionalInformation['CANCEL REASON ']\">info</mat-icon>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Mobile Header -->\r\n        <div class=\"card border-0 shadow-sm mb-3\" *ngIf=\"isMobile\">\r\n            <div class=\"card-body d-flex justify-content-between align-items-center py-3\">\r\n                <h2 class=\"h4 mb-0 fw-semibold\">{{ orderDetailData?.orderNum }}</h2>\r\n                <div></div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"row g-4\">\r\n            <!-- Left Column -->\r\n            <div class=\"col-12\" [ngClass]=\"{'col-lg-8': !isMobile}\">\r\n\r\n                <!-- Timeline for Desktop -->\r\n\r\n                <!-- Items Section -->\r\n                <div class=\"card border-0 shadow-sm mb-4\">\r\n                    <div class=\"card-header py-3\" [simpoBackground]=\"styles?.background\" [id]=\"data?.id\">\r\n                        <h4 class=\"h5 mb-0 d-flex align-items-center gap-2 f-16\">\r\n                            <mat-icon>shopping_cart</mat-icon>\r\n                            Ordered Items\r\n                        </h4>\r\n                    </div>\r\n                    <div class=\"card-body p-4 scroll-45\">\r\n                        <div class=\"row g-3\">\r\n                            <div class=\"col-12\"\r\n                                *ngFor=\"let item of orderDetailData?.brandOrderDetails[0]?.orderedItems\">\r\n                                <div class=\"h-100\">\r\n                                    <div class=\"card-body p-3\">\r\n                                        <div class=\"row align-items-start\">\r\n                                            <div class=\"col-auto position-relative\">\r\n                                                <img loading=\"lazy\"\r\n                                                    onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                                                    [src]=\"item.imgUrl\" alt=\"{{ item.itemName }}\"\r\n                                                    class=\"rounded shadow-sm\"\r\n                                                    style=\"width: 85px; height: 85px; object-fit: cover;\">\r\n                                            </div>\r\n                                            <div class=\"col\">\r\n                                                <h4 class=\"h6 fw-semibold text-dark\">{{ item.itemName }}</h4>\r\n\r\n                                                <div class=\"row\">\r\n                                                    <div class=\"col-6 text-start\" *ngIf=\"!isMobile\">\r\n                                                        <div class=\"fw-bold\">\r\n                                                            <span [innerHTML]=\"currency\"></span>{{\r\n                                                            (item.sellingPrice | number: '1.0-2') + ' x ' +\r\n                                                            item.quantity }}\r\n                                                        </div>\r\n                                                    </div>\r\n                                                    <div class=\"col-md-6 col-sm-12 text-end text-nowrap\">\r\n                                                        <div class=\" p-2\">\r\n                                                            <div class=\"fw-bold\">\r\n                                                                <span [innerHTML]=\"currency\"></span>{{\r\n                                                                (item.sellingPrice * item.quantity) | number: '1.0-2'\r\n                                                                }}\r\n                                                            </div>\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n                                                <!-- Review Section -->\r\n                                                <div>\r\n                                                    <div class=\"mb-1\">\r\n                                                        <p-rating [(ngModel)]=\"item.rating\" [cancel]=\"false\"\r\n                                                            [readonly]=\"false\" (ngModelChange)=\"submitReview(item)\" />\r\n                                                    </div>\r\n\r\n                                                    <div class=\"add-detail-review f-13 cursor-pointer\"\r\n                                                        (click)=\"item.showReview = !item.showReview\">Add Detailed Review\r\n                                                    </div>\r\n\r\n                                                    <div *ngIf=\"item.showReview\">\r\n                                                        <div class=\"mb-1\">\r\n                                                            <textarea class=\"form-control border-2\"\r\n                                                                [(ngModel)]=\"item.review\" rows=\"3\"></textarea>\r\n                                                        </div>\r\n                                                        <div class=\"review-img\">\r\n                                                            <img [src]=\"img.imgUrl\" alt=\"\"\r\n                                                                *ngFor=\"let img of item?.reviewImages ?? []\">\r\n                                                            <div class=\"add-review-img\"\r\n                                                                (click)=\"reviewFileInput.click()\"\r\n                                                                [ngClass]=\"{'w-100': (item?.reviewImages?.length ?? 0) == 0}\">\r\n                                                                <mat-icon>add</mat-icon> {{(item?.reviewImages?.length\r\n                                                                ?? 0) == 0 ? 'Add Images' : ''}}\r\n                                                            </div>\r\n                                                            <input type=\"file\" name=\"myfile\" multiple hidden\r\n                                                                accept=\"image/jpg,image/jpeg,image/gif,image/png,application/pdf,image/x-eps\"\r\n                                                                (change)=\"uploadImage($event, item)\" class=\"pc-btn\"\r\n                                                                #reviewFileInput />\r\n                                                        </div>\r\n\r\n                                                        <div class=\"w-100 text-end p-2 sbt-btn f-13 cursor-pointer\"\r\n                                                            (click)=\"submitReview(item)\">\r\n                                                            Submit\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\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                <!-- Timeline for Mobile -->\r\n                <ng-container *ngIf=\"isMobile\">\r\n                    <ng-container *ngTemplateOutlet=\"timelineContainer\"></ng-container>\r\n                </ng-container>\r\n            </div>\r\n\r\n            <!-- Right Column -->\r\n            <div class=\"col-12 scroll-60\" [ngClass]=\"{'col-lg-4': !isMobile}\">\r\n\r\n                <!-- Bill Details -->\r\n                <div class=\"card border-0 shadow-sm mb-4\">\r\n                    <div class=\"card-header py-3 cursor-pointer\" [simpoBackground]=\"styles?.background\" [id]=\"data?.id\"\r\n                        (click)=\"toggleSection('billDetails')\">\r\n                        <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\">\r\n                            <div class=\"d-flex align-items-center gap-2\">\r\n                                <mat-icon>receipt</mat-icon>\r\n                                Bill Details\r\n                            </div>\r\n                            <mat-icon class=\"transition-transform\" [class.rotate-180]=\"!sectionsVisible.billDetails\">\r\n                                expand_less\r\n                            </mat-icon>\r\n                        </h4>\r\n                    </div>\r\n                    <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.billDetails\">\r\n                        <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\">\r\n                            <span class=\"text-muted\">Item Total</span>\r\n                            <span class=\"fw-semibold h6 mb-0\">\r\n                                <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.totalNetValue |\r\n                                number:'1.0-2' }}\r\n                            </span>\r\n                        </div>\r\n\r\n                        <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\"\r\n                            *ngIf=\"orderDetailData?.billDetails?.discountAmount\">\r\n                            <span class=\"d-flex align-items-center gap-2 text-muted\">\r\n                                Discount\r\n                            </span>\r\n                            <span class=\"fw-semibold text-success h6 mb-0\">\r\n                                -<span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.discountAmount |\r\n                                number:'1.0-2' }}\r\n                            </span>\r\n                        </div>\r\n\r\n                        <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\">\r\n                            <span class=\"text-muted\">Total Tax</span>\r\n                            <span class=\"fw-semibold h6 mb-0\">\r\n                                <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.discountAmount ?\r\n                                orderDetailData?.billDetails?.totalTaxAfterDiscount :\r\n                                orderDetailData?.billDetails?.totalTax | number:'1.0-2' }}\r\n                            </span>\r\n                        </div>\r\n\r\n                        <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\"\r\n                            *ngIf=\"orderDetailData?.billDetails?.orraSchemeRedeemedAmount\">\r\n                            <span class=\"text-muted\">Redeem Amount</span>\r\n                            <span class=\"fw-semibold h6 mb-0\">\r\n                                <span [innerHTML]=\"currency\"></span>{{\r\n                                orderDetailData?.billDetails?.orraSchemeRedeemedAmount | number:'1.0-2' }}\r\n                            </span>\r\n                        </div>\r\n\r\n                        <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\">\r\n                            <span class=\"d-flex align-items-center gap-2 text-muted\">\r\n                                Delivery\r\n                            </span>\r\n                            <span class=\"fw-bold text-success h6 mb-0\">{{orderDetailData?.billDetails.deliveryCharges ?\r\n                                orderDetailData?.billDetails.deliveryCharges : 'FREE'}}</span>\r\n                        </div>\r\n\r\n                        <div class=\"d-flex justify-content-between align-items-center py-3 mt-3  rounded px-3\">\r\n                            <span class=\"fw-bold h5 mb-0 text-dark\">Grand Total</span>\r\n                            <span class=\"fw-bold h4 mb-0 \">\r\n                                <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.finalPrice }}\r\n                            </span>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n                <!-- Customer Details -->\r\n                <div class=\"card border-0 shadow-sm mb-4\">\r\n                    <div class=\"card-header py-3 cursor-pointer\" [simpoBackground]=\"styles?.background\" [id]=\"data?.id\"\r\n                        (click)=\"toggleSection('deliveryDetails')\">\r\n                        <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\">\r\n                            <div class=\"d-flex align-items-center gap-2\">\r\n                                <mat-icon>person</mat-icon>\r\n                                Delivery Details\r\n                            </div>\r\n                            <mat-icon class=\"transition-transform\"\r\n                                [class.rotate-180]=\"!sectionsVisible.deliveryDetails\">\r\n                                expand_less\r\n                            </mat-icon>\r\n                        </h4>\r\n                    </div>\r\n                    <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.deliveryDetails\">\r\n                        <div class=\"mb-3\">\r\n                            <div class=\"d-flex align-items-center gap-3 p-2 bg-light rounded\">\r\n                                <div>\r\n                                    <small class=\"text-muted d-block\">Name</small>\r\n                                    <span class=\"fw-semibold\">{{ orderDetailData?.addressDetails?.receiverName }}</span>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"mb-3\">\r\n                            <div class=\"d-flex align-items-center gap-3 p-2 bg-light rounded\">\r\n                                <div>\r\n                                    <small class=\"text-muted d-block\">Phone</small>\r\n                                    <span class=\"fw-semibold\">{{ orderDetailData?.addressDetails?.receiverPhone\r\n                                        }}</span>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"mb-3\">\r\n                            <div class=\"d-flex align-items-start gap-3 p-2 bg-light rounded\">\r\n                                <div>\r\n                                    <small class=\"text-muted d-block\">Address</small>\r\n                                    <span class=\"fw-semibold\">{{ orderAddress }}</span>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"mb-3\">\r\n                            <div class=\"d-flex align-items-center gap-3 p-2 bg-light rounded\">\r\n                                <div>\r\n                                    <small class=\"text-muted d-block\">Payment</small>\r\n                                    <span class=\"fw-semibold\">{{orderDetailData?.paymentDetails ?\r\n                                        (getKey(orderDetailData?.paymentDetails)==='COD' ? 'Cash on Delivery':\r\n                                        getKey(orderDetailData?.paymentDetails) ) : 'N/A'}}</span>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <!-- Track Order Button -->\r\n                        <div class=\"text-center mt-4\" *ngIf=\"orderDetailData?.orderTrackingLink\">\r\n                            <button\r\n                                class=\"btn btn-primary w-100 d-flex align-items-center justify-content-center gap-2 py-2\"\r\n                                (click)=\"trackOrder()\">\r\n                                <mat-icon>location_searching</mat-icon>\r\n                                Track Order\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n                <!-- Timeline Section for Desktop -->\r\n                <div class=\"card border-0 shadow-sm mb-4\" *ngIf=\"!isMobile\">\r\n                    <div class=\"card-header py-3 cursor-pointer\" (click)=\"toggleSection('timeline')\"\r\n                        [simpoBackground]=\"styles?.background\" [id]=\"data?.id\">\r\n                        <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\r\n\r\n    \">\r\n                            <div class=\"d-flex align-items-center gap-2\">\r\n                                <mat-icon>timeline</mat-icon>\r\n                                Order Timeline\r\n                            </div>\r\n                            <mat-icon class=\"transition-transform\" [class.rotate-180]=\"!sectionsVisible.timeline\">\r\n                                expand_less\r\n                            </mat-icon>\r\n                        </h4>\r\n                    </div>\r\n                    <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.timeline\">\r\n                        <p-timeline [value]=\"orderTimiline\">\r\n                            <ng-template pTemplate=\"content\" let-event>\r\n                                <div class=\"d-flex align-items-start gap-3 py-3\">\r\n                                    <div class=\"rounded-circle p-2 d-flex align-items-center justify-content-center\"\r\n                                        style=\"width: 40px; height: 40px;\" [simpoBackground]=\"styles?.background\"\r\n                                        [id]=\"data?.id\">\r\n                                        <mat-icon class=\"fs-6 d-flex align-items-center justify-content-center\">{{\r\n                                            event.icon }}</mat-icon>\r\n                                    </div>\r\n                                    <div class=\"flex-grow-1\">\r\n                                        <h6 class=\"fw-semibold text-dark mb-1\">{{ event.name?.replaceAll(\"_\", \" \") |\r\n                                            titlecase }}</h6>\r\n                                        <p class=\"text-muted mb-0 small\">{{ event.desc?.replaceAll(\"_\", \" \") }}</p>\r\n                                    </div>\r\n                                </div>\r\n                            </ng-template>\r\n                        </p-timeline>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n        </div>\r\n    </div>\r\n</ng-container>\r\n\r\n<!-- Timeline Template -->\r\n<ng-template #timelineContainer>\r\n    <div class=\"card border-0 shadow-sm mb-4\">\r\n        <div class=\"card-header bg-warning text-dark py-2 f-16\">\r\n            <h4 class=\"h5 mb-0 d-flex align-items-center gap-2\">\r\n                <mat-icon>timeline</mat-icon>\r\n                Order Timeline\r\n            </h4>\r\n        </div>\r\n        <div class=\"card-body p-4\">\r\n            <p-timeline [value]=\"orderTimiline\">\r\n                <ng-template pTemplate=\"content\" let-event>\r\n                    <div class=\"d-flex align-items-start gap-3 py-3\">\r\n                        <div class=\"bg-primary rounded-circle p-2 d-flex align-items-center justify-content-center\"\r\n                            style=\"width: 40px; height: 40px;\">\r\n                            <mat-icon class=\"text-white fs-6 d-flex align-items-center justify-content-center\">{{\r\n                                event.icon }}</mat-icon>\r\n                        </div>\r\n                        <div class=\"flex-grow-1\">\r\n                            <h6 class=\"fw-semibold text-dark mb-1\">{{ event.name?.replaceAll(\"_\", \" \") | titlecase }}\r\n                            </h6>\r\n                            <p class=\"text-muted mb-0 small\">{{ event.desc?.replaceAll(\"_\", \" \") | titlecase }}</p>\r\n                        </div>\r\n                    </div>\r\n                </ng-template>\r\n            </p-timeline>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<!-- Loading Skeleton -->\r\n<div class=\"container-fluid py-4\" *ngIf=\"isLoading\">\r\n    <div class=\"row\">\r\n        <div class=\"col-12\">\r\n            <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n                width: '100%',\r\n                height: '60vh',\r\n                'border-radius': '12px',\r\n                'margin': '20px 0'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".right{height:250px;padding:15px;background-color:#f8f8f8;border-radius:8px;color:#000}*{font-family:var(--website-font-family)}hr{border-top-width:2px;margin:15px 0}.f-13{font-size:13px}.f-16{font-size:16px}.fw-800{font-weight:800}.br-6{border-radius:6px}textarea{resize:unset}.action-btn>button{font-size:14px!important;border:none;width:fit-content!important;margin-top:5px;border-radius:3px;padding:5px 10px;background-color:tomato;color:#fff}.mat-icon{height:30px;width:30px;font-size:30px}.timeline{margin:25px 0}.onlyMobile{display:none}.track-order{background-color:#000;color:#fff;border:1px solid black;width:auto;border-radius:3px;padding:5px}@media only screen and (max-width: 475px){.onlyDesktop{display:none!important}.onlyMobile{display:block}.mat-icon{width:46px}.time-line{padding-bottom:6px}.right{width:98%!important;margin-bottom:4px!important;height:auto!important;padding:15px!important;margin-top:5%}.main-section{width:100%!important;flex-direction:column!important}.left{width:100%!important;padding:3%}.orderNum{margin-bottom:25px}}@media (min-width:768px) and (max-width:1024px){.left{padding:3%;width:70%}.right{width:28%!important;padding:2%;margin-top:10%;margin-right:3%}}.mt-25{margin-top:25px}.cp{cursor:pointer}.item-summary{box-shadow:0 0 4px #00000040;border-radius:12px}mat-icon{font-family:Material Icons!important}::ng-deep .p-rating-icon{color:#ffc107!important;font-size:1.25rem!important}::ng-deep .p-timeline-event-content{padding:0!important}::ng-deep .p-timeline-event-connector{background:#000!important;width:3px!important;position:absolute;bottom:-20px;height:55px;left:18px}.sbt-btn{border-radius:8px}::ng-deep .p-timeline-event-marker{display:none!important}@media screen and (min-width: 1200px){.scroll-45{overflow-y:scroll;height:45vh}.scroll-60{overflow-y:scroll;height:60vh}}.f-16{font-size:16px!important}.f-13{font-size:13px!important}@media (max-width: 575.98px){.display-6{font-size:1.5rem}.h3{font-size:1.25rem}}.gap-3{gap:1rem!important}.shadow-sm{box-shadow:0 .125rem .5rem #0000001a!important}.card-header{border-bottom:unset!important}.btn:hover{transform:translateY(-1px);transition:all .2s ease}.card:hover{transform:translateY(-2px);transition:all .3s ease}.bg-opacity-10{background-color:rgba(var(--bs-primary-rgb),.1)!important}.cursor-pointer{cursor:pointer}.transition-transform{transition:transform .3s ease}.rotate-180{transform:rotate(180deg)}.card-header:hover{opacity:.9;transition:opacity .2s ease}.card-body{transition:all .3s ease}.review-img{display:flex;gap:10px;margin-top:10px}.review-img img{max-width:100px;max-height:140px}.add-review-img{color:#828484;width:65px;display:flex;align-items:center;justify-content:center;order:3px dotted black;background:#f0f2f2;border:1px solid #d5d9d9!important;cursor:pointer}.order-status{border-radius:8px;padding:5px 8px;font-size:16px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: TimelineModule }, { kind: "component", type: i8$4.Timeline, selector: "p-timeline", inputs: ["value", "style", "styleClass", "align", "layout"] }, { kind: "directive", type: i6$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: PanelModule }, { kind: "ngmodule", type: RatingModule }, { kind: "component", type: i7$3.Rating, selector: "p-rating", inputs: ["disabled", "readonly", "stars", "cancel", "iconOnClass", "iconOnStyle", "iconOffClass", "iconOffStyle", "iconCancelClass", "iconCancelStyle", "autofocus"], outputs: ["onRate", "onCancel", "onFocus", "onBlur"] }, { 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: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OrderDetailsComponent, decorators: [{
             type: Component,
@@ -19790,7 +19790,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         FormsModule,
                         BackgroundDirective,
                         MatTooltipModule
-                    ], template: "<ng-container *ngIf=\"!isLoading\">\r\n    <div class=\"container-fluid\" [attr.style]=\"customClass\">\r\n\r\n        <!-- Header Section -->\r\n        <div class=\"row\" *ngIf=\"!isMobile\">\r\n            <div class=\"col-12 d-flex justify-content-between align-items-center\">\r\n                <div class=\"d-flex flex-column\">\r\n                    <div class=\"d-flex align-items-center gap-3\">\r\n                        <mat-icon (click)=\"goBack()\">keyboard_backspace</mat-icon>\r\n                        <h3 class=\"fw-bold text-dark mb-0\">{{ orderDetailData?.orderNum }}</h3>\r\n                    </div>\r\n                    <div class=\"d-flex flex-wrap gap-2 mb-2\">\r\n                        <span class=\"d-flex align-items-center text-muted\">\r\n                            <mat-icon class=\"fs-5 d-flex align-items-center justify-content-start\">schedule</mat-icon>\r\n                            <small>{{ orderDetailData?.createdTimeStamp | date: 'dd MMM yyyy , h : mm a' }}</small>\r\n                        </span>\r\n                        <span class=\"d-flex align-items-center text-muted\">\r\n                            <mat-icon\r\n                                class=\"fs-5 d-flex align-items-center justify-content-center\">shopping_bag</mat-icon>\r\n                            <small>{{ orderDetailData?.brandOrderDetails?.[0]?.orderedItems.length }}\r\n                                items</small>\r\n                        </span>\r\n                    </div>\r\n                </div>\r\n                <div\r\n                    [attr.class]=\"orderDetailData?.brandOrderDetails?.[0]?.orderStatus + ' order-status d-flex align-items-center gap-1'\">\r\n                    {{ orderDetailData?.brandOrderDetails?.[0]?.orderStatus?.replaceAll(\"_\", \" \") | titlecase }}\r\n                    <mat-icon class=\"f-13 d-flex align-items-center justify-content-center\"\r\n                        *ngIf=\"orderDetailData?.brandOrderDetails?.[0]?.orderStatus == 'CANCELLED'\"\r\n                        [matTooltip]=\"orderDetailData?.brandOrderDetails?.[0]?.additionalInformation['CANCEL REASON ']\">info</mat-icon>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Mobile Header -->\r\n        <div class=\"card border-0 shadow-sm mb-3\" *ngIf=\"isMobile\">\r\n            <div class=\"card-body d-flex justify-content-between align-items-center py-3\">\r\n                <h2 class=\"h4 mb-0 fw-semibold\">{{ orderDetailData?.orderNum }}</h2>\r\n                <div></div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"row g-4\">\r\n            <!-- Left Column -->\r\n            <div class=\"col-12\" [ngClass]=\"{'col-lg-8': !isMobile}\">\r\n\r\n                <!-- Timeline for Desktop -->\r\n\r\n                <!-- Items Section -->\r\n                <div class=\"card border-0 shadow-sm mb-4\">\r\n                    <div class=\"card-header py-3\" [simpoBackground]=\"styles?.background\" [id]=\"data?.id\">\r\n                        <h4 class=\"h5 mb-0 d-flex align-items-center gap-2 f-16\">\r\n                            <mat-icon>shopping_cart</mat-icon>\r\n                            Ordered Items\r\n                        </h4>\r\n                    </div>\r\n                    <div class=\"card-body p-4 scroll-45\">\r\n                        <div class=\"row g-3\">\r\n                            <div class=\"col-12\"\r\n                                *ngFor=\"let item of orderDetailData?.brandOrderDetails[0]?.orderedItems\">\r\n                                <div class=\"h-100\">\r\n                                    <div class=\"card-body p-3\">\r\n                                        <div class=\"row align-items-start\">\r\n                                            <div class=\"col-auto position-relative\">\r\n                                                <img loading=\"lazy\"\r\n                                                    onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                                                    [src]=\"item.imgUrl\" alt=\"{{ item.itemName }}\"\r\n                                                    class=\"rounded shadow-sm\"\r\n                                                    style=\"width: 85px; height: 85px; object-fit: cover;\">\r\n                                            </div>\r\n                                            <div class=\"col\">\r\n                                                <h4 class=\"h6 fw-semibold text-dark\">{{ item.itemName }}</h4>\r\n\r\n                                                <div class=\"row\">\r\n                                                    <div class=\"col-6 text-start\" *ngIf=\"!isMobile\">\r\n                                                        <div class=\"fw-bold\">\r\n                                                            <span [innerHTML]=\"currency\"></span>{{\r\n                                                            (item.sellingPrice | number: '1.0-2') + ' x ' +\r\n                                                            item.quantity }}\r\n                                                        </div>\r\n                                                    </div>\r\n                                                    <div class=\"col-md-6 col-sm-12 text-end text-nowrap\">\r\n                                                        <div class=\" p-2\">\r\n                                                            <div class=\"fw-bold\">\r\n                                                                <span [innerHTML]=\"currency\"></span>{{\r\n                                                                (item.sellingPrice * item.quantity) | number: '1.0-2'\r\n                                                                }}\r\n                                                            </div>\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n                                                <!-- Review Section -->\r\n                                                <div>\r\n                                                    <div class=\"mb-1\">\r\n                                                        <p-rating [(ngModel)]=\"item.rating\" [cancel]=\"false\"\r\n                                                            [readonly]=\"false\" />\r\n                                                    </div>\r\n\r\n                                                    <div class=\"add-detail-review f-13 cursor-pointer\"\r\n                                                        (click)=\"item.showReview = !item.showReview\">Add Detailed Review\r\n                                                    </div>\r\n\r\n                                                    <div *ngIf=\"item.showReview\">\r\n                                                        <div class=\"mb-1\">\r\n                                                            <textarea class=\"form-control border-2\"\r\n                                                                [(ngModel)]=\"item.review\" rows=\"3\"></textarea>\r\n                                                        </div>\r\n                                                        <div class=\"review-img\">\r\n                                                            <img [src]=\"img.imgUrl\" alt=\"\"\r\n                                                                *ngFor=\"let img of item?.reviewImages ?? []\">\r\n                                                            <div class=\"add-review-img\"\r\n                                                                (click)=\"reviewFileInput.click()\"\r\n                                                                [ngClass]=\"{'w-100': (item?.reviewImages?.length ?? 0) == 0}\">\r\n                                                                <mat-icon>add</mat-icon> {{(item?.reviewImages?.length\r\n                                                                ?? 0) == 0 ? 'Add Images' : ''}}\r\n                                                            </div>\r\n                                                            <input type=\"file\" name=\"myfile\" multiple hidden\r\n                                                                accept=\"image/jpg,image/jpeg,image/gif,image/png,application/pdf,image/x-eps\"\r\n                                                                (change)=\"uploadImage($event, item)\" class=\"pc-btn\"\r\n                                                                #reviewFileInput />\r\n                                                        </div>\r\n\r\n                                                        <div class=\"w-100 text-end p-2 sbt-btn f-13 cursor-pointer\"\r\n                                                            (click)=\"submitReview(item)\">\r\n                                                            Submit\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\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                <!-- Timeline for Mobile -->\r\n                <ng-container *ngIf=\"isMobile\">\r\n                    <ng-container *ngTemplateOutlet=\"timelineContainer\"></ng-container>\r\n                </ng-container>\r\n            </div>\r\n\r\n            <!-- Right Column -->\r\n            <div class=\"col-12 scroll-60\" [ngClass]=\"{'col-lg-4': !isMobile}\">\r\n\r\n                <!-- Bill Details -->\r\n                <div class=\"card border-0 shadow-sm mb-4\">\r\n                    <div class=\"card-header py-3 cursor-pointer\" [simpoBackground]=\"styles?.background\" [id]=\"data?.id\"\r\n                        (click)=\"toggleSection('billDetails')\">\r\n                        <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\">\r\n                            <div class=\"d-flex align-items-center gap-2\">\r\n                                <mat-icon>receipt</mat-icon>\r\n                                Bill Details\r\n                            </div>\r\n                            <mat-icon class=\"transition-transform\" [class.rotate-180]=\"!sectionsVisible.billDetails\">\r\n                                expand_less\r\n                            </mat-icon>\r\n                        </h4>\r\n                    </div>\r\n                    <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.billDetails\">\r\n                        <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\">\r\n                            <span class=\"text-muted\">Item Total</span>\r\n                            <span class=\"fw-semibold h6 mb-0\">\r\n                                <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.totalNetValue |\r\n                                number:'1.0-2' }}\r\n                            </span>\r\n                        </div>\r\n\r\n                        <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\"\r\n                            *ngIf=\"orderDetailData?.billDetails?.discountAmount\">\r\n                            <span class=\"d-flex align-items-center gap-2 text-muted\">\r\n                                Discount\r\n                            </span>\r\n                            <span class=\"fw-semibold text-success h6 mb-0\">\r\n                                -<span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.discountAmount |\r\n                                number:'1.0-2' }}\r\n                            </span>\r\n                        </div>\r\n\r\n                        <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\">\r\n                            <span class=\"text-muted\">Total Tax</span>\r\n                            <span class=\"fw-semibold h6 mb-0\">\r\n                                <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.discountAmount ?\r\n                                orderDetailData?.billDetails?.totalTaxAfterDiscount :\r\n                                orderDetailData?.billDetails?.totalTax | number:'1.0-2' }}\r\n                            </span>\r\n                        </div>\r\n\r\n                        <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\"\r\n                            *ngIf=\"orderDetailData?.billDetails?.orraSchemeRedeemedAmount\">\r\n                            <span class=\"text-muted\">Redeem Amount</span>\r\n                            <span class=\"fw-semibold h6 mb-0\">\r\n                                <span [innerHTML]=\"currency\"></span>{{\r\n                                orderDetailData?.billDetails?.orraSchemeRedeemedAmount | number:'1.0-2' }}\r\n                            </span>\r\n                        </div>\r\n\r\n                        <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\">\r\n                            <span class=\"d-flex align-items-center gap-2 text-muted\">\r\n                                Delivery\r\n                            </span>\r\n                            <span class=\"fw-bold text-success h6 mb-0\">{{orderDetailData?.billDetails.deliveryCharges ?\r\n                                orderDetailData?.billDetails.deliveryCharges : 'FREE'}}</span>\r\n                        </div>\r\n\r\n                        <div class=\"d-flex justify-content-between align-items-center py-3 mt-3  rounded px-3\">\r\n                            <span class=\"fw-bold h5 mb-0 text-dark\">Grand Total</span>\r\n                            <span class=\"fw-bold h4 mb-0 \">\r\n                                <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.finalPrice }}\r\n                            </span>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n                <!-- Customer Details -->\r\n                <div class=\"card border-0 shadow-sm mb-4\">\r\n                    <div class=\"card-header py-3 cursor-pointer\" [simpoBackground]=\"styles?.background\" [id]=\"data?.id\"\r\n                        (click)=\"toggleSection('deliveryDetails')\">\r\n                        <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\">\r\n                            <div class=\"d-flex align-items-center gap-2\">\r\n                                <mat-icon>person</mat-icon>\r\n                                Delivery Details\r\n                            </div>\r\n                            <mat-icon class=\"transition-transform\"\r\n                                [class.rotate-180]=\"!sectionsVisible.deliveryDetails\">\r\n                                expand_less\r\n                            </mat-icon>\r\n                        </h4>\r\n                    </div>\r\n                    <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.deliveryDetails\">\r\n                        <div class=\"mb-3\">\r\n                            <div class=\"d-flex align-items-center gap-3 p-2 bg-light rounded\">\r\n                                <div>\r\n                                    <small class=\"text-muted d-block\">Name</small>\r\n                                    <span class=\"fw-semibold\">{{ orderDetailData?.addressDetails?.receiverName }}</span>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"mb-3\">\r\n                            <div class=\"d-flex align-items-center gap-3 p-2 bg-light rounded\">\r\n                                <div>\r\n                                    <small class=\"text-muted d-block\">Phone</small>\r\n                                    <span class=\"fw-semibold\">{{ orderDetailData?.addressDetails?.receiverPhone\r\n                                        }}</span>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"mb-3\">\r\n                            <div class=\"d-flex align-items-start gap-3 p-2 bg-light rounded\">\r\n                                <div>\r\n                                    <small class=\"text-muted d-block\">Address</small>\r\n                                    <span class=\"fw-semibold\">{{ orderAddress }}</span>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"mb-3\">\r\n                            <div class=\"d-flex align-items-center gap-3 p-2 bg-light rounded\">\r\n                                <div>\r\n                                    <small class=\"text-muted d-block\">Payment</small>\r\n                                    <span class=\"fw-semibold\">{{orderDetailData?.paymentDetails ?\r\n                                        (getKey(orderDetailData?.paymentDetails)==='COD' ? 'Cash on Delivery':\r\n                                        getKey(orderDetailData?.paymentDetails) ) : 'N/A'}}</span>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <!-- Track Order Button -->\r\n                        <div class=\"text-center mt-4\" *ngIf=\"orderDetailData?.orderTrackingLink\">\r\n                            <button\r\n                                class=\"btn btn-primary w-100 d-flex align-items-center justify-content-center gap-2 py-2\"\r\n                                (click)=\"trackOrder()\">\r\n                                <mat-icon>location_searching</mat-icon>\r\n                                Track Order\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n                <!-- Timeline Section for Desktop -->\r\n                <div class=\"card border-0 shadow-sm mb-4\" *ngIf=\"!isMobile\">\r\n                    <div class=\"card-header py-3 cursor-pointer\" (click)=\"toggleSection('timeline')\"\r\n                        [simpoBackground]=\"styles?.background\" [id]=\"data?.id\">\r\n                        <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\r\n\r\n    \">\r\n                            <div class=\"d-flex align-items-center gap-2\">\r\n                                <mat-icon>timeline</mat-icon>\r\n                                Order Timeline\r\n                            </div>\r\n                            <mat-icon class=\"transition-transform\" [class.rotate-180]=\"!sectionsVisible.timeline\">\r\n                                expand_less\r\n                            </mat-icon>\r\n                        </h4>\r\n                    </div>\r\n                    <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.timeline\">\r\n                        <p-timeline [value]=\"orderTimiline\">\r\n                            <ng-template pTemplate=\"content\" let-event>\r\n                                <div class=\"d-flex align-items-start gap-3 py-3\">\r\n                                    <div class=\"rounded-circle p-2 d-flex align-items-center justify-content-center\"\r\n                                        style=\"width: 40px; height: 40px;\" [simpoBackground]=\"styles?.background\"\r\n                                        [id]=\"data?.id\">\r\n                                        <mat-icon class=\"fs-6 d-flex align-items-center justify-content-center\">{{\r\n                                            event.icon }}</mat-icon>\r\n                                    </div>\r\n                                    <div class=\"flex-grow-1\">\r\n                                        <h6 class=\"fw-semibold text-dark mb-1\">{{ event.name?.replaceAll(\"_\", \" \") |\r\n                                            titlecase }}</h6>\r\n                                        <p class=\"text-muted mb-0 small\">{{ event.desc?.replaceAll(\"_\", \" \") }}</p>\r\n                                    </div>\r\n                                </div>\r\n                            </ng-template>\r\n                        </p-timeline>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n        </div>\r\n    </div>\r\n</ng-container>\r\n\r\n<!-- Timeline Template -->\r\n<ng-template #timelineContainer>\r\n    <div class=\"card border-0 shadow-sm mb-4\">\r\n        <div class=\"card-header bg-warning text-dark py-2 f-16\">\r\n            <h4 class=\"h5 mb-0 d-flex align-items-center gap-2\">\r\n                <mat-icon>timeline</mat-icon>\r\n                Order Timeline\r\n            </h4>\r\n        </div>\r\n        <div class=\"card-body p-4\">\r\n            <p-timeline [value]=\"orderTimiline\">\r\n                <ng-template pTemplate=\"content\" let-event>\r\n                    <div class=\"d-flex align-items-start gap-3 py-3\">\r\n                        <div class=\"bg-primary rounded-circle p-2 d-flex align-items-center justify-content-center\"\r\n                            style=\"width: 40px; height: 40px;\">\r\n                            <mat-icon class=\"text-white fs-6 d-flex align-items-center justify-content-center\">{{\r\n                                event.icon }}</mat-icon>\r\n                        </div>\r\n                        <div class=\"flex-grow-1\">\r\n                            <h6 class=\"fw-semibold text-dark mb-1\">{{ event.name?.replaceAll(\"_\", \" \") | titlecase }}\r\n                            </h6>\r\n                            <p class=\"text-muted mb-0 small\">{{ event.desc?.replaceAll(\"_\", \" \") | titlecase }}</p>\r\n                        </div>\r\n                    </div>\r\n                </ng-template>\r\n            </p-timeline>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<!-- Loading Skeleton -->\r\n<div class=\"container-fluid py-4\" *ngIf=\"isLoading\">\r\n    <div class=\"row\">\r\n        <div class=\"col-12\">\r\n            <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n                width: '100%',\r\n                height: '60vh',\r\n                'border-radius': '12px',\r\n                'margin': '20px 0'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".right{height:250px;padding:15px;background-color:#f8f8f8;border-radius:8px;color:#000}*{font-family:var(--website-font-family)}hr{border-top-width:2px;margin:15px 0}.f-13{font-size:13px}.f-16{font-size:16px}.fw-800{font-weight:800}.br-6{border-radius:6px}textarea{resize:unset}.action-btn>button{font-size:14px!important;border:none;width:fit-content!important;margin-top:5px;border-radius:3px;padding:5px 10px;background-color:tomato;color:#fff}.mat-icon{height:30px;width:30px;font-size:30px}.timeline{margin:25px 0}.onlyMobile{display:none}.track-order{background-color:#000;color:#fff;border:1px solid black;width:auto;border-radius:3px;padding:5px}@media only screen and (max-width: 475px){.onlyDesktop{display:none!important}.onlyMobile{display:block}.mat-icon{width:46px}.time-line{padding-bottom:6px}.right{width:98%!important;margin-bottom:4px!important;height:auto!important;padding:15px!important;margin-top:5%}.main-section{width:100%!important;flex-direction:column!important}.left{width:100%!important;padding:3%}.orderNum{margin-bottom:25px}}@media (min-width:768px) and (max-width:1024px){.left{padding:3%;width:70%}.right{width:28%!important;padding:2%;margin-top:10%;margin-right:3%}}.mt-25{margin-top:25px}.cp{cursor:pointer}.item-summary{box-shadow:0 0 4px #00000040;border-radius:12px}mat-icon{font-family:Material Icons!important}::ng-deep .p-rating-icon{color:#ffc107!important;font-size:1.25rem!important}::ng-deep .p-timeline-event-content{padding:0!important}::ng-deep .p-timeline-event-connector{background:#000!important;width:3px!important;position:absolute;bottom:-20px;height:55px;left:18px}.sbt-btn{border-radius:8px}::ng-deep .p-timeline-event-marker{display:none!important}@media screen and (min-width: 1200px){.scroll-45{overflow-y:scroll;height:45vh}.scroll-60{overflow-y:scroll;height:60vh}}.f-16{font-size:16px!important}.f-13{font-size:13px!important}@media (max-width: 575.98px){.display-6{font-size:1.5rem}.h3{font-size:1.25rem}}.gap-3{gap:1rem!important}.shadow-sm{box-shadow:0 .125rem .5rem #0000001a!important}.card-header{border-bottom:unset!important}.btn:hover{transform:translateY(-1px);transition:all .2s ease}.card:hover{transform:translateY(-2px);transition:all .3s ease}.bg-opacity-10{background-color:rgba(var(--bs-primary-rgb),.1)!important}.cursor-pointer{cursor:pointer}.transition-transform{transition:transform .3s ease}.rotate-180{transform:rotate(180deg)}.card-header:hover{opacity:.9;transition:opacity .2s ease}.card-body{transition:all .3s ease}.review-img{display:flex;gap:10px;margin-top:10px}.review-img img{max-width:100px;max-height:140px}.add-review-img{color:#828484;width:65px;display:flex;align-items:center;justify-content:center;order:3px dotted black;background:#f0f2f2;border:1px solid #d5d9d9!important;cursor:pointer}.order-status{border-radius:8px;padding:5px 8px;font-size:16px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}\n"] }]
+                    ], template: "<ng-container *ngIf=\"!isLoading\">\r\n    <div class=\"container-fluid\" [attr.style]=\"customClass\">\r\n\r\n        <!-- Header Section -->\r\n        <div class=\"row\" *ngIf=\"!isMobile\">\r\n            <div class=\"col-12 d-flex justify-content-between align-items-center\">\r\n                <div class=\"d-flex flex-column\">\r\n                    <div class=\"d-flex align-items-center gap-3\">\r\n                        <mat-icon (click)=\"goBack()\">keyboard_backspace</mat-icon>\r\n                        <h3 class=\"fw-bold text-dark mb-0\">{{ orderDetailData?.orderNum }}</h3>\r\n                    </div>\r\n                    <div class=\"d-flex flex-wrap gap-2 mb-2\">\r\n                        <span class=\"d-flex align-items-center text-muted\">\r\n                            <mat-icon class=\"fs-5 d-flex align-items-center justify-content-start\">schedule</mat-icon>\r\n                            <small>{{ orderDetailData?.createdTimeStamp | date: 'dd MMM yyyy , h : mm a' }}</small>\r\n                        </span>\r\n                        <span class=\"d-flex align-items-center text-muted\">\r\n                            <mat-icon\r\n                                class=\"fs-5 d-flex align-items-center justify-content-center\">shopping_bag</mat-icon>\r\n                            <small>{{ orderDetailData?.brandOrderDetails?.[0]?.orderedItems.length }}\r\n                                items</small>\r\n                        </span>\r\n                    </div>\r\n                </div>\r\n                <div\r\n                    [attr.class]=\"orderDetailData?.brandOrderDetails?.[0]?.orderStatus + ' order-status d-flex align-items-center gap-1'\">\r\n                    {{ orderDetailData?.brandOrderDetails?.[0]?.orderStatus?.replaceAll(\"_\", \" \") | titlecase }}\r\n                    <mat-icon class=\"f-13 d-flex align-items-center justify-content-center\"\r\n                        *ngIf=\"orderDetailData?.brandOrderDetails?.[0]?.orderStatus == 'CANCELLED'\"\r\n                        [matTooltip]=\"orderDetailData?.brandOrderDetails?.[0]?.additionalInformation['CANCEL REASON ']\">info</mat-icon>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Mobile Header -->\r\n        <div class=\"card border-0 shadow-sm mb-3\" *ngIf=\"isMobile\">\r\n            <div class=\"card-body d-flex justify-content-between align-items-center py-3\">\r\n                <h2 class=\"h4 mb-0 fw-semibold\">{{ orderDetailData?.orderNum }}</h2>\r\n                <div></div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"row g-4\">\r\n            <!-- Left Column -->\r\n            <div class=\"col-12\" [ngClass]=\"{'col-lg-8': !isMobile}\">\r\n\r\n                <!-- Timeline for Desktop -->\r\n\r\n                <!-- Items Section -->\r\n                <div class=\"card border-0 shadow-sm mb-4\">\r\n                    <div class=\"card-header py-3\" [simpoBackground]=\"styles?.background\" [id]=\"data?.id\">\r\n                        <h4 class=\"h5 mb-0 d-flex align-items-center gap-2 f-16\">\r\n                            <mat-icon>shopping_cart</mat-icon>\r\n                            Ordered Items\r\n                        </h4>\r\n                    </div>\r\n                    <div class=\"card-body p-4 scroll-45\">\r\n                        <div class=\"row g-3\">\r\n                            <div class=\"col-12\"\r\n                                *ngFor=\"let item of orderDetailData?.brandOrderDetails[0]?.orderedItems\">\r\n                                <div class=\"h-100\">\r\n                                    <div class=\"card-body p-3\">\r\n                                        <div class=\"row align-items-start\">\r\n                                            <div class=\"col-auto position-relative\">\r\n                                                <img loading=\"lazy\"\r\n                                                    onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                                                    [src]=\"item.imgUrl\" alt=\"{{ item.itemName }}\"\r\n                                                    class=\"rounded shadow-sm\"\r\n                                                    style=\"width: 85px; height: 85px; object-fit: cover;\">\r\n                                            </div>\r\n                                            <div class=\"col\">\r\n                                                <h4 class=\"h6 fw-semibold text-dark\">{{ item.itemName }}</h4>\r\n\r\n                                                <div class=\"row\">\r\n                                                    <div class=\"col-6 text-start\" *ngIf=\"!isMobile\">\r\n                                                        <div class=\"fw-bold\">\r\n                                                            <span [innerHTML]=\"currency\"></span>{{\r\n                                                            (item.sellingPrice | number: '1.0-2') + ' x ' +\r\n                                                            item.quantity }}\r\n                                                        </div>\r\n                                                    </div>\r\n                                                    <div class=\"col-md-6 col-sm-12 text-end text-nowrap\">\r\n                                                        <div class=\" p-2\">\r\n                                                            <div class=\"fw-bold\">\r\n                                                                <span [innerHTML]=\"currency\"></span>{{\r\n                                                                (item.sellingPrice * item.quantity) | number: '1.0-2'\r\n                                                                }}\r\n                                                            </div>\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n                                                <!-- Review Section -->\r\n                                                <div>\r\n                                                    <div class=\"mb-1\">\r\n                                                        <p-rating [(ngModel)]=\"item.rating\" [cancel]=\"false\"\r\n                                                            [readonly]=\"false\" (ngModelChange)=\"submitReview(item)\" />\r\n                                                    </div>\r\n\r\n                                                    <div class=\"add-detail-review f-13 cursor-pointer\"\r\n                                                        (click)=\"item.showReview = !item.showReview\">Add Detailed Review\r\n                                                    </div>\r\n\r\n                                                    <div *ngIf=\"item.showReview\">\r\n                                                        <div class=\"mb-1\">\r\n                                                            <textarea class=\"form-control border-2\"\r\n                                                                [(ngModel)]=\"item.review\" rows=\"3\"></textarea>\r\n                                                        </div>\r\n                                                        <div class=\"review-img\">\r\n                                                            <img [src]=\"img.imgUrl\" alt=\"\"\r\n                                                                *ngFor=\"let img of item?.reviewImages ?? []\">\r\n                                                            <div class=\"add-review-img\"\r\n                                                                (click)=\"reviewFileInput.click()\"\r\n                                                                [ngClass]=\"{'w-100': (item?.reviewImages?.length ?? 0) == 0}\">\r\n                                                                <mat-icon>add</mat-icon> {{(item?.reviewImages?.length\r\n                                                                ?? 0) == 0 ? 'Add Images' : ''}}\r\n                                                            </div>\r\n                                                            <input type=\"file\" name=\"myfile\" multiple hidden\r\n                                                                accept=\"image/jpg,image/jpeg,image/gif,image/png,application/pdf,image/x-eps\"\r\n                                                                (change)=\"uploadImage($event, item)\" class=\"pc-btn\"\r\n                                                                #reviewFileInput />\r\n                                                        </div>\r\n\r\n                                                        <div class=\"w-100 text-end p-2 sbt-btn f-13 cursor-pointer\"\r\n                                                            (click)=\"submitReview(item)\">\r\n                                                            Submit\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\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                <!-- Timeline for Mobile -->\r\n                <ng-container *ngIf=\"isMobile\">\r\n                    <ng-container *ngTemplateOutlet=\"timelineContainer\"></ng-container>\r\n                </ng-container>\r\n            </div>\r\n\r\n            <!-- Right Column -->\r\n            <div class=\"col-12 scroll-60\" [ngClass]=\"{'col-lg-4': !isMobile}\">\r\n\r\n                <!-- Bill Details -->\r\n                <div class=\"card border-0 shadow-sm mb-4\">\r\n                    <div class=\"card-header py-3 cursor-pointer\" [simpoBackground]=\"styles?.background\" [id]=\"data?.id\"\r\n                        (click)=\"toggleSection('billDetails')\">\r\n                        <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\">\r\n                            <div class=\"d-flex align-items-center gap-2\">\r\n                                <mat-icon>receipt</mat-icon>\r\n                                Bill Details\r\n                            </div>\r\n                            <mat-icon class=\"transition-transform\" [class.rotate-180]=\"!sectionsVisible.billDetails\">\r\n                                expand_less\r\n                            </mat-icon>\r\n                        </h4>\r\n                    </div>\r\n                    <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.billDetails\">\r\n                        <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\">\r\n                            <span class=\"text-muted\">Item Total</span>\r\n                            <span class=\"fw-semibold h6 mb-0\">\r\n                                <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.totalNetValue |\r\n                                number:'1.0-2' }}\r\n                            </span>\r\n                        </div>\r\n\r\n                        <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\"\r\n                            *ngIf=\"orderDetailData?.billDetails?.discountAmount\">\r\n                            <span class=\"d-flex align-items-center gap-2 text-muted\">\r\n                                Discount\r\n                            </span>\r\n                            <span class=\"fw-semibold text-success h6 mb-0\">\r\n                                -<span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.discountAmount |\r\n                                number:'1.0-2' }}\r\n                            </span>\r\n                        </div>\r\n\r\n                        <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\">\r\n                            <span class=\"text-muted\">Total Tax</span>\r\n                            <span class=\"fw-semibold h6 mb-0\">\r\n                                <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.discountAmount ?\r\n                                orderDetailData?.billDetails?.totalTaxAfterDiscount :\r\n                                orderDetailData?.billDetails?.totalTax | number:'1.0-2' }}\r\n                            </span>\r\n                        </div>\r\n\r\n                        <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\"\r\n                            *ngIf=\"orderDetailData?.billDetails?.orraSchemeRedeemedAmount\">\r\n                            <span class=\"text-muted\">Redeem Amount</span>\r\n                            <span class=\"fw-semibold h6 mb-0\">\r\n                                <span [innerHTML]=\"currency\"></span>{{\r\n                                orderDetailData?.billDetails?.orraSchemeRedeemedAmount | number:'1.0-2' }}\r\n                            </span>\r\n                        </div>\r\n\r\n                        <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\">\r\n                            <span class=\"d-flex align-items-center gap-2 text-muted\">\r\n                                Delivery\r\n                            </span>\r\n                            <span class=\"fw-bold text-success h6 mb-0\">{{orderDetailData?.billDetails.deliveryCharges ?\r\n                                orderDetailData?.billDetails.deliveryCharges : 'FREE'}}</span>\r\n                        </div>\r\n\r\n                        <div class=\"d-flex justify-content-between align-items-center py-3 mt-3  rounded px-3\">\r\n                            <span class=\"fw-bold h5 mb-0 text-dark\">Grand Total</span>\r\n                            <span class=\"fw-bold h4 mb-0 \">\r\n                                <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.finalPrice }}\r\n                            </span>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n                <!-- Customer Details -->\r\n                <div class=\"card border-0 shadow-sm mb-4\">\r\n                    <div class=\"card-header py-3 cursor-pointer\" [simpoBackground]=\"styles?.background\" [id]=\"data?.id\"\r\n                        (click)=\"toggleSection('deliveryDetails')\">\r\n                        <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\">\r\n                            <div class=\"d-flex align-items-center gap-2\">\r\n                                <mat-icon>person</mat-icon>\r\n                                Delivery Details\r\n                            </div>\r\n                            <mat-icon class=\"transition-transform\"\r\n                                [class.rotate-180]=\"!sectionsVisible.deliveryDetails\">\r\n                                expand_less\r\n                            </mat-icon>\r\n                        </h4>\r\n                    </div>\r\n                    <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.deliveryDetails\">\r\n                        <div class=\"mb-3\">\r\n                            <div class=\"d-flex align-items-center gap-3 p-2 bg-light rounded\">\r\n                                <div>\r\n                                    <small class=\"text-muted d-block\">Name</small>\r\n                                    <span class=\"fw-semibold\">{{ orderDetailData?.addressDetails?.receiverName }}</span>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"mb-3\">\r\n                            <div class=\"d-flex align-items-center gap-3 p-2 bg-light rounded\">\r\n                                <div>\r\n                                    <small class=\"text-muted d-block\">Phone</small>\r\n                                    <span class=\"fw-semibold\">{{ orderDetailData?.addressDetails?.receiverPhone\r\n                                        }}</span>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"mb-3\">\r\n                            <div class=\"d-flex align-items-start gap-3 p-2 bg-light rounded\">\r\n                                <div>\r\n                                    <small class=\"text-muted d-block\">Address</small>\r\n                                    <span class=\"fw-semibold\">{{ orderAddress }}</span>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"mb-3\">\r\n                            <div class=\"d-flex align-items-center gap-3 p-2 bg-light rounded\">\r\n                                <div>\r\n                                    <small class=\"text-muted d-block\">Payment</small>\r\n                                    <span class=\"fw-semibold\">{{orderDetailData?.paymentDetails ?\r\n                                        (getKey(orderDetailData?.paymentDetails)==='COD' ? 'Cash on Delivery':\r\n                                        getKey(orderDetailData?.paymentDetails) ) : 'N/A'}}</span>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <!-- Track Order Button -->\r\n                        <div class=\"text-center mt-4\" *ngIf=\"orderDetailData?.orderTrackingLink\">\r\n                            <button\r\n                                class=\"btn btn-primary w-100 d-flex align-items-center justify-content-center gap-2 py-2\"\r\n                                (click)=\"trackOrder()\">\r\n                                <mat-icon>location_searching</mat-icon>\r\n                                Track Order\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n                <!-- Timeline Section for Desktop -->\r\n                <div class=\"card border-0 shadow-sm mb-4\" *ngIf=\"!isMobile\">\r\n                    <div class=\"card-header py-3 cursor-pointer\" (click)=\"toggleSection('timeline')\"\r\n                        [simpoBackground]=\"styles?.background\" [id]=\"data?.id\">\r\n                        <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\r\n\r\n    \">\r\n                            <div class=\"d-flex align-items-center gap-2\">\r\n                                <mat-icon>timeline</mat-icon>\r\n                                Order Timeline\r\n                            </div>\r\n                            <mat-icon class=\"transition-transform\" [class.rotate-180]=\"!sectionsVisible.timeline\">\r\n                                expand_less\r\n                            </mat-icon>\r\n                        </h4>\r\n                    </div>\r\n                    <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.timeline\">\r\n                        <p-timeline [value]=\"orderTimiline\">\r\n                            <ng-template pTemplate=\"content\" let-event>\r\n                                <div class=\"d-flex align-items-start gap-3 py-3\">\r\n                                    <div class=\"rounded-circle p-2 d-flex align-items-center justify-content-center\"\r\n                                        style=\"width: 40px; height: 40px;\" [simpoBackground]=\"styles?.background\"\r\n                                        [id]=\"data?.id\">\r\n                                        <mat-icon class=\"fs-6 d-flex align-items-center justify-content-center\">{{\r\n                                            event.icon }}</mat-icon>\r\n                                    </div>\r\n                                    <div class=\"flex-grow-1\">\r\n                                        <h6 class=\"fw-semibold text-dark mb-1\">{{ event.name?.replaceAll(\"_\", \" \") |\r\n                                            titlecase }}</h6>\r\n                                        <p class=\"text-muted mb-0 small\">{{ event.desc?.replaceAll(\"_\", \" \") }}</p>\r\n                                    </div>\r\n                                </div>\r\n                            </ng-template>\r\n                        </p-timeline>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n        </div>\r\n    </div>\r\n</ng-container>\r\n\r\n<!-- Timeline Template -->\r\n<ng-template #timelineContainer>\r\n    <div class=\"card border-0 shadow-sm mb-4\">\r\n        <div class=\"card-header bg-warning text-dark py-2 f-16\">\r\n            <h4 class=\"h5 mb-0 d-flex align-items-center gap-2\">\r\n                <mat-icon>timeline</mat-icon>\r\n                Order Timeline\r\n            </h4>\r\n        </div>\r\n        <div class=\"card-body p-4\">\r\n            <p-timeline [value]=\"orderTimiline\">\r\n                <ng-template pTemplate=\"content\" let-event>\r\n                    <div class=\"d-flex align-items-start gap-3 py-3\">\r\n                        <div class=\"bg-primary rounded-circle p-2 d-flex align-items-center justify-content-center\"\r\n                            style=\"width: 40px; height: 40px;\">\r\n                            <mat-icon class=\"text-white fs-6 d-flex align-items-center justify-content-center\">{{\r\n                                event.icon }}</mat-icon>\r\n                        </div>\r\n                        <div class=\"flex-grow-1\">\r\n                            <h6 class=\"fw-semibold text-dark mb-1\">{{ event.name?.replaceAll(\"_\", \" \") | titlecase }}\r\n                            </h6>\r\n                            <p class=\"text-muted mb-0 small\">{{ event.desc?.replaceAll(\"_\", \" \") | titlecase }}</p>\r\n                        </div>\r\n                    </div>\r\n                </ng-template>\r\n            </p-timeline>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<!-- Loading Skeleton -->\r\n<div class=\"container-fluid py-4\" *ngIf=\"isLoading\">\r\n    <div class=\"row\">\r\n        <div class=\"col-12\">\r\n            <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n                width: '100%',\r\n                height: '60vh',\r\n                'border-radius': '12px',\r\n                'margin': '20px 0'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".right{height:250px;padding:15px;background-color:#f8f8f8;border-radius:8px;color:#000}*{font-family:var(--website-font-family)}hr{border-top-width:2px;margin:15px 0}.f-13{font-size:13px}.f-16{font-size:16px}.fw-800{font-weight:800}.br-6{border-radius:6px}textarea{resize:unset}.action-btn>button{font-size:14px!important;border:none;width:fit-content!important;margin-top:5px;border-radius:3px;padding:5px 10px;background-color:tomato;color:#fff}.mat-icon{height:30px;width:30px;font-size:30px}.timeline{margin:25px 0}.onlyMobile{display:none}.track-order{background-color:#000;color:#fff;border:1px solid black;width:auto;border-radius:3px;padding:5px}@media only screen and (max-width: 475px){.onlyDesktop{display:none!important}.onlyMobile{display:block}.mat-icon{width:46px}.time-line{padding-bottom:6px}.right{width:98%!important;margin-bottom:4px!important;height:auto!important;padding:15px!important;margin-top:5%}.main-section{width:100%!important;flex-direction:column!important}.left{width:100%!important;padding:3%}.orderNum{margin-bottom:25px}}@media (min-width:768px) and (max-width:1024px){.left{padding:3%;width:70%}.right{width:28%!important;padding:2%;margin-top:10%;margin-right:3%}}.mt-25{margin-top:25px}.cp{cursor:pointer}.item-summary{box-shadow:0 0 4px #00000040;border-radius:12px}mat-icon{font-family:Material Icons!important}::ng-deep .p-rating-icon{color:#ffc107!important;font-size:1.25rem!important}::ng-deep .p-timeline-event-content{padding:0!important}::ng-deep .p-timeline-event-connector{background:#000!important;width:3px!important;position:absolute;bottom:-20px;height:55px;left:18px}.sbt-btn{border-radius:8px}::ng-deep .p-timeline-event-marker{display:none!important}@media screen and (min-width: 1200px){.scroll-45{overflow-y:scroll;height:45vh}.scroll-60{overflow-y:scroll;height:60vh}}.f-16{font-size:16px!important}.f-13{font-size:13px!important}@media (max-width: 575.98px){.display-6{font-size:1.5rem}.h3{font-size:1.25rem}}.gap-3{gap:1rem!important}.shadow-sm{box-shadow:0 .125rem .5rem #0000001a!important}.card-header{border-bottom:unset!important}.btn:hover{transform:translateY(-1px);transition:all .2s ease}.card:hover{transform:translateY(-2px);transition:all .3s ease}.bg-opacity-10{background-color:rgba(var(--bs-primary-rgb),.1)!important}.cursor-pointer{cursor:pointer}.transition-transform{transition:transform .3s ease}.rotate-180{transform:rotate(180deg)}.card-header:hover{opacity:.9;transition:opacity .2s ease}.card-body{transition:all .3s ease}.review-img{display:flex;gap:10px;margin-top:10px}.review-img img{max-width:100px;max-height:140px}.add-review-img{color:#828484;width:65px;display:flex;align-items:center;justify-content:center;order:3px dotted black;background:#f0f2f2;border:1px solid #d5d9d9!important;cursor:pointer}.order-status{border-radius:8px;padding:5px 8px;font-size:16px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }, { type: StorageServiceService }, { type: RestService }, { type: i6$1.MessageService }, { type: ImageUplaodService }], propDecorators: { responseData: [{
                 type: Input
             }], data: [{