simpo-component-library 3.5.42 → 3.5.45
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/payment-details/payment-details.component.mjs +37 -11
- package/esm2022/lib/directive/hover-animation.directive.mjs +133 -0
- package/esm2022/lib/ecommerce/sections/featured-products/featured-products.component.mjs +3 -3
- package/esm2022/lib/ecommerce/sections/small-product-listing/small-product-listing.component.mjs +3 -3
- package/esm2022/lib/elements/below-image-card/below-image-card.component.mjs +3 -3
- package/esm2022/lib/elements/top-of-image-card/top-of-image-card.component.mjs +7 -3
- package/esm2022/lib/sections/moving-text/moving-text.component.mjs +5 -5
- package/esm2022/lib/sections/moving-text/moving-text.modal.mjs +1 -1
- package/esm2022/lib/sections/registration-form/registration-form.component.mjs +3 -1
- package/esm2022/lib/sections/service-section/service-section.component.mjs +3 -3
- package/esm2022/lib/sections/service-section/service-section.model.mjs +1 -1
- package/esm2022/lib/services/events.service.mjs +2 -1
- package/esm2022/lib/styles/index.mjs +2 -1
- package/esm2022/lib/styles/style.model.mjs +1 -1
- package/esm2022/lib/styles/types.mjs +1 -1
- package/esm2022/public-api.mjs +2 -1
- package/fesm2022/simpo-component-library.mjs +188 -25
- package/fesm2022/simpo-component-library.mjs.map +1 -1
- package/lib/components/input-fields/input-fields.component.d.ts +1 -1
- package/lib/directive/background-directive.d.ts +1 -1
- package/lib/directive/button-directive.directive.d.ts +1 -1
- package/lib/directive/color.directive.d.ts +1 -1
- package/lib/directive/hover-animation.directive.d.ts +19 -0
- package/lib/ecommerce/sections/authentication-required/authentication-required.component.d.ts +1 -1
- package/lib/elements/top-of-image-card/top-of-image-card.component.d.ts +3 -0
- package/lib/sections/banner-carousel/banner-carousel.component.d.ts +2 -2
- package/lib/sections/carousel-banner/carousel-banner.component.d.ts +1 -1
- package/lib/sections/image-section/image-section.component.d.ts +2 -2
- package/lib/sections/logo-showcase/logo-showcase.component.d.ts +1 -1
- package/lib/sections/moving-text/moving-text.component.d.ts +1 -2
- package/lib/sections/moving-text/moving-text.modal.d.ts +1 -1
- package/lib/sections/pricing-section/pricing-section.component.d.ts +1 -1
- package/lib/sections/service-section/service-section.model.d.ts +3 -1
- package/lib/services/events.service.d.ts +1 -0
- package/lib/styles/index.d.ts +2 -1
- package/lib/styles/style.model.d.ts +4 -1
- package/lib/styles/types.d.ts +1 -0
- package/package.json +1 -1
- package/public-api.d.ts +1 -0
- package/simpo-component-library-3.5.45.tgz +0 -0
- package/simpo-component-library-3.5.42.tgz +0 -0
|
@@ -115,6 +115,7 @@ class EventsService {
|
|
|
115
115
|
this.colorOverlayChangeChecks = new EventEmitter();
|
|
116
116
|
this.alignmentChangeChecks = new EventEmitter();
|
|
117
117
|
this.animationChangeChecks = new EventEmitter();
|
|
118
|
+
this.contentAnimationChangeChecks = new EventEmitter();
|
|
118
119
|
this.spacingChangeChecks = new EventEmitter();
|
|
119
120
|
this.borderChangeChecks = new EventEmitter();
|
|
120
121
|
this.cardSizeChangeChecks = new EventEmitter();
|
|
@@ -512,6 +513,7 @@ var animationType;
|
|
|
512
513
|
(function (animationType) {
|
|
513
514
|
animationType["INFINITE_SCROLL"] = "InfiniteScroll";
|
|
514
515
|
animationType["SOFT_TRANSITION"] = "SoftTransition";
|
|
516
|
+
animationType["NO_EFFECT"] = "NoEffect";
|
|
515
517
|
})(animationType || (animationType = {}));
|
|
516
518
|
var GradientDirection;
|
|
517
519
|
(function (GradientDirection) {
|
|
@@ -1888,7 +1890,7 @@ class BelowImageCardComponent {
|
|
|
1888
1890
|
return { ...this.styles.image };
|
|
1889
1891
|
}
|
|
1890
1892
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: BelowImageCardComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1891
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: BelowImageCardComponent, isStandalone: true, selector: "simpo-below-image-card", inputs: { data: "data", styles: "styles", content: "content", componentId: "componentId", button: "button", edit: "edit" }, ngImport: i0, template: "<div (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\" [ngClass]=\"{'box-shadow' : content.display.showCard}\">\r\n <!-- <div [simpoImageContainerDirective]=\"getAspectRatio\" class=\"w-100\"> -->\r\n <img loading=\"lazy\" [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\" [attr.simpoObjectPosition]=\"styles?.image?.fit !== 'contain' ? data.image?.position : null\"\r\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100 h-100\" [class]=\"componentId+data.image.id\" *ngIf=\"content.display.showImage\"\r\n loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"data.image\" [sectionId]=\"data?.id\">\r\n\r\n <img loading=\"lazy\" [src]=\"data.
|
|
1893
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: BelowImageCardComponent, isStandalone: true, selector: "simpo-below-image-card", inputs: { data: "data", styles: "styles", content: "content", componentId: "componentId", button: "button", edit: "edit" }, ngImport: i0, template: "<div (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\" [ngClass]=\"{'box-shadow' : content.display.showCard}\">\r\n <!-- <div [simpoImageContainerDirective]=\"getAspectRatio\" class=\"w-100\"> -->\r\n <img loading=\"lazy\" [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\" [attr.simpoObjectPosition]=\"styles?.image?.fit !== 'contain' ? data.image?.position : null\"\r\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100 h-100\" [class]=\"componentId+data.image.id\" *ngIf=\"content.display.showImage\"\r\n loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"data.image\" [sectionId]=\"data?.id\">\r\n\r\n <img loading=\"lazy\" [src]=\"data.image.url\" *ngIf=\"content.display.showIcon\" class=\"logo-img\" [appImageEditor]=\"true\" [imageData]=\"data.image\" [sectionId]=\"data?.id\" [simpoCorner]=\"styles?.corners\">\r\n <!-- </div> -->\r\n <div class=\"ptb-1 content-side\">\r\n <div class=\"heading-medium mb-1 fw-600\" *ngIf=\"content.display.showHeading\">\r\n <simpo-text-editor [(value)]=\"data.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"body-desc\" *ngIf=\"content.display.showContent\">\r\n <simpo-text-editor [(value)]=\"data.inputText[01].value \" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\r\n <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [buttonId]=\"button ? button.id : ''\" [sectionId]=\"componentId\"\r\n [color]=\"styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".w-100{width:100%}.ptb-1{padding-top:1.5rem;padding-bottom:1.5rem}.mb-1{margin-bottom:1rem!important}.box-shadow{background:#fff;border-radius:10px;box-shadow:0 4px 8px #0003,0 0 #00000030;padding:10px;color:#000!important}.logo-img{width:100px;height:100px;margin-top:1rem}.fw-600{font-weight:600}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "img[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId"] }] }); }
|
|
1892
1894
|
}
|
|
1893
1895
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: BelowImageCardComponent, decorators: [{
|
|
1894
1896
|
type: Component,
|
|
@@ -1901,7 +1903,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
1901
1903
|
ImageContainerDirective,
|
|
1902
1904
|
TextEditorComponent,
|
|
1903
1905
|
ImageEditorDirective
|
|
1904
|
-
], template: "<div (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\" [ngClass]=\"{'box-shadow' : content.display.showCard}\">\r\n <!-- <div [simpoImageContainerDirective]=\"getAspectRatio\" class=\"w-100\"> -->\r\n <img loading=\"lazy\" [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\" [attr.simpoObjectPosition]=\"styles?.image?.fit !== 'contain' ? data.image?.position : null\"\r\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100 h-100\" [class]=\"componentId+data.image.id\" *ngIf=\"content.display.showImage\"\r\n loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"data.image\" [sectionId]=\"data?.id\">\r\n\r\n <img loading=\"lazy\" [src]=\"data.
|
|
1906
|
+
], template: "<div (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\" [ngClass]=\"{'box-shadow' : content.display.showCard}\">\r\n <!-- <div [simpoImageContainerDirective]=\"getAspectRatio\" class=\"w-100\"> -->\r\n <img loading=\"lazy\" [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\" [attr.simpoObjectPosition]=\"styles?.image?.fit !== 'contain' ? data.image?.position : null\"\r\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100 h-100\" [class]=\"componentId+data.image.id\" *ngIf=\"content.display.showImage\"\r\n loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"data.image\" [sectionId]=\"data?.id\">\r\n\r\n <img loading=\"lazy\" [src]=\"data.image.url\" *ngIf=\"content.display.showIcon\" class=\"logo-img\" [appImageEditor]=\"true\" [imageData]=\"data.image\" [sectionId]=\"data?.id\" [simpoCorner]=\"styles?.corners\">\r\n <!-- </div> -->\r\n <div class=\"ptb-1 content-side\">\r\n <div class=\"heading-medium mb-1 fw-600\" *ngIf=\"content.display.showHeading\">\r\n <simpo-text-editor [(value)]=\"data.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"body-desc\" *ngIf=\"content.display.showContent\">\r\n <simpo-text-editor [(value)]=\"data.inputText[01].value \" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\r\n <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [buttonId]=\"button ? button.id : ''\" [sectionId]=\"componentId\"\r\n [color]=\"styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".w-100{width:100%}.ptb-1{padding-top:1.5rem;padding-bottom:1.5rem}.mb-1{margin-bottom:1rem!important}.box-shadow{background:#fff;border-radius:10px;box-shadow:0 4px 8px #0003,0 0 #00000030;padding:10px;color:#000!important}.logo-img{width:100px;height:100px;margin-top:1rem}.fw-600{font-weight:600}\n"] }]
|
|
1905
1907
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
1906
1908
|
type: Input
|
|
1907
1909
|
}], styles: [{
|
|
@@ -2022,21 +2024,154 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
2022
2024
|
args: ['simpoTextBackgroundDirective']
|
|
2023
2025
|
}] } });
|
|
2024
2026
|
|
|
2027
|
+
class HoverAnimationDirective {
|
|
2028
|
+
constructor(el, renderer, eventService) {
|
|
2029
|
+
this.el = el;
|
|
2030
|
+
this.renderer = renderer;
|
|
2031
|
+
this.eventService = eventService;
|
|
2032
|
+
this.eventServiceSubscription = this.eventService.contentAnimationChangeChecks.subscribe((res) => {
|
|
2033
|
+
this.animationData = res.data;
|
|
2034
|
+
this.setupAnimation();
|
|
2035
|
+
});
|
|
2036
|
+
}
|
|
2037
|
+
ngOnInit() {
|
|
2038
|
+
console.log(this.animationData?.contentAnimation);
|
|
2039
|
+
this.setupAnimation();
|
|
2040
|
+
}
|
|
2041
|
+
// setupAnimation() {
|
|
2042
|
+
// if (this.animationData?.contentAnimation === 'hover') {
|
|
2043
|
+
// // Initially hidden but still in the DOM (opacity 0 instead of display none)
|
|
2044
|
+
// this.renderer.setStyle(this.el.nativeElement, 'opacity', '0');
|
|
2045
|
+
// this.renderer.setStyle(this.el.nativeElement, 'transition', 'opacity 1s ease');
|
|
2046
|
+
// // Adjust the parent element to listen for hover events
|
|
2047
|
+
// const parentElement = this.el.nativeElement.parentElement;
|
|
2048
|
+
// if (parentElement) {
|
|
2049
|
+
// this.renderer.listen(parentElement, 'mouseenter', () => {
|
|
2050
|
+
// this.renderer.setStyle(this.el.nativeElement, 'opacity', '1');
|
|
2051
|
+
// });
|
|
2052
|
+
// this.renderer.listen(parentElement, 'mouseleave', () => {
|
|
2053
|
+
// this.renderer.setStyle(this.el.nativeElement, 'opacity', '0');
|
|
2054
|
+
// });
|
|
2055
|
+
// }
|
|
2056
|
+
// }
|
|
2057
|
+
// }
|
|
2058
|
+
setupAnimation() {
|
|
2059
|
+
this.mouseEnterListener?.();
|
|
2060
|
+
this.mouseLeaveListener?.();
|
|
2061
|
+
const animationType = this.animationData?.contentAnimation;
|
|
2062
|
+
const parentElement = this.el.nativeElement.parentElement;
|
|
2063
|
+
if (animationType === 'hover') {
|
|
2064
|
+
this.renderer.setStyle(this.el.nativeElement, 'opacity', '0');
|
|
2065
|
+
this.renderer.setStyle(this.el.nativeElement, 'transition', 'opacity 1s ease');
|
|
2066
|
+
if (parentElement) {
|
|
2067
|
+
this.mouseEnterListener = this.renderer.listen(parentElement, 'mouseenter', () => {
|
|
2068
|
+
this.renderer.setStyle(this.el.nativeElement, 'opacity', '1');
|
|
2069
|
+
});
|
|
2070
|
+
this.mouseLeaveListener = this.renderer.listen(parentElement, 'mouseleave', () => {
|
|
2071
|
+
this.renderer.setStyle(this.el.nativeElement, 'opacity', '0');
|
|
2072
|
+
});
|
|
2073
|
+
}
|
|
2074
|
+
}
|
|
2075
|
+
else if (animationType === 'grow-shadow') {
|
|
2076
|
+
this.renderer.setStyle(this.el.nativeElement, 'transition', 'box-shadow 0.3s ease');
|
|
2077
|
+
if (parentElement) {
|
|
2078
|
+
this.mouseEnterListener = this.renderer.listen(parentElement, 'mouseenter', () => {
|
|
2079
|
+
this.renderer.setStyle(this.el.nativeElement, 'box-shadow', '0 10px 20px rgba(0, 0, 0, 0.3)');
|
|
2080
|
+
});
|
|
2081
|
+
this.mouseLeaveListener = this.renderer.listen(parentElement, 'mouseleave', () => {
|
|
2082
|
+
this.renderer.setStyle(this.el.nativeElement, 'box-shadow', 'none');
|
|
2083
|
+
});
|
|
2084
|
+
}
|
|
2085
|
+
}
|
|
2086
|
+
else if (animationType === 'pop-bounce') {
|
|
2087
|
+
this.renderer.setStyle(this.el.nativeElement, 'transition', 'transform 0.3s ease');
|
|
2088
|
+
if (parentElement) {
|
|
2089
|
+
this.mouseEnterListener = this.renderer.listen(parentElement, 'mouseenter', () => {
|
|
2090
|
+
this.renderer.setStyle(this.el.nativeElement, 'transform', 'scale(1.1)');
|
|
2091
|
+
});
|
|
2092
|
+
this.mouseLeaveListener = this.renderer.listen(parentElement, 'mouseleave', () => {
|
|
2093
|
+
this.renderer.setStyle(this.el.nativeElement, 'transform', 'scale(1)');
|
|
2094
|
+
});
|
|
2095
|
+
}
|
|
2096
|
+
}
|
|
2097
|
+
else if (animationType === 'hover-pop') {
|
|
2098
|
+
this.renderer.setStyle(this.el.nativeElement, 'opacity', '0');
|
|
2099
|
+
this.renderer.setStyle(this.el.nativeElement, 'visibility', 'hidden');
|
|
2100
|
+
this.renderer.setStyle(this.el.nativeElement, 'transform', 'translateY(10px)');
|
|
2101
|
+
this.renderer.setStyle(this.el.nativeElement, 'transition', 'opacity 0.3s ease, transform 0.3s ease');
|
|
2102
|
+
if (parentElement) {
|
|
2103
|
+
this.mouseEnterListener = this.renderer.listen(parentElement, 'mouseenter', () => {
|
|
2104
|
+
this.renderer.setStyle(this.el.nativeElement, 'visibility', 'visible');
|
|
2105
|
+
this.renderer.setStyle(this.el.nativeElement, 'opacity', '1');
|
|
2106
|
+
this.renderer.setStyle(this.el.nativeElement, 'transform', 'translateY(0)');
|
|
2107
|
+
});
|
|
2108
|
+
this.mouseLeaveListener = this.renderer.listen(parentElement, 'mouseleave', () => {
|
|
2109
|
+
this.renderer.setStyle(this.el.nativeElement, 'opacity', '0');
|
|
2110
|
+
this.renderer.setStyle(this.el.nativeElement, 'transform', 'translateY(10px)');
|
|
2111
|
+
setTimeout(() => {
|
|
2112
|
+
this.renderer.setStyle(this.el.nativeElement, 'visibility', 'hidden');
|
|
2113
|
+
}, 300);
|
|
2114
|
+
});
|
|
2115
|
+
}
|
|
2116
|
+
}
|
|
2117
|
+
else if (animationType === 'slide-in-left') {
|
|
2118
|
+
this.renderer.setStyle(this.el.nativeElement, 'opacity', '0');
|
|
2119
|
+
this.renderer.setStyle(this.el.nativeElement, 'visibility', 'hidden');
|
|
2120
|
+
this.renderer.setStyle(this.el.nativeElement, 'transform', 'translateX(-10px)');
|
|
2121
|
+
this.renderer.setStyle(this.el.nativeElement, 'transition', 'opacity 0.3s ease, transform 0.3s ease');
|
|
2122
|
+
if (parentElement) {
|
|
2123
|
+
this.mouseEnterListener = this.renderer.listen(parentElement, 'mouseenter', () => {
|
|
2124
|
+
this.renderer.setStyle(this.el.nativeElement, 'visibility', 'visible');
|
|
2125
|
+
this.renderer.setStyle(this.el.nativeElement, 'opacity', '1');
|
|
2126
|
+
this.renderer.setStyle(this.el.nativeElement, 'transform', 'translateX(0)');
|
|
2127
|
+
});
|
|
2128
|
+
this.mouseLeaveListener = this.renderer.listen(parentElement, 'mouseleave', () => {
|
|
2129
|
+
this.renderer.setStyle(this.el.nativeElement, 'opacity', '0');
|
|
2130
|
+
this.renderer.setStyle(this.el.nativeElement, 'transform', 'translateX(-10px)');
|
|
2131
|
+
setTimeout(() => {
|
|
2132
|
+
this.renderer.setStyle(this.el.nativeElement, 'visibility', 'hidden');
|
|
2133
|
+
}, 300);
|
|
2134
|
+
});
|
|
2135
|
+
}
|
|
2136
|
+
}
|
|
2137
|
+
}
|
|
2138
|
+
ngOnDestroy() {
|
|
2139
|
+
if (this.eventServiceSubscription) {
|
|
2140
|
+
this.eventServiceSubscription.unsubscribe();
|
|
2141
|
+
}
|
|
2142
|
+
}
|
|
2143
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: HoverAnimationDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2144
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.4", type: HoverAnimationDirective, isStandalone: true, selector: "[simpoHoverAnimation]", inputs: { animationData: ["simpoHoverAnimation", "animationData"] }, ngImport: i0 }); }
|
|
2145
|
+
}
|
|
2146
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: HoverAnimationDirective, decorators: [{
|
|
2147
|
+
type: Directive,
|
|
2148
|
+
args: [{
|
|
2149
|
+
selector: '[simpoHoverAnimation]',
|
|
2150
|
+
standalone: true
|
|
2151
|
+
}]
|
|
2152
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: EventsService }], propDecorators: { animationData: [{
|
|
2153
|
+
type: Input,
|
|
2154
|
+
args: ['simpoHoverAnimation']
|
|
2155
|
+
}] } });
|
|
2156
|
+
|
|
2025
2157
|
class TopOfImageCardComponent {
|
|
2026
2158
|
constructor(_eventService) {
|
|
2027
2159
|
this._eventService = _eventService;
|
|
2028
2160
|
}
|
|
2029
2161
|
ngOnInit() {
|
|
2030
2162
|
}
|
|
2163
|
+
getContentAnimation() {
|
|
2164
|
+
return { contentAnimation: this.styles?.contentAnimation };
|
|
2165
|
+
}
|
|
2031
2166
|
redirectTo() {
|
|
2032
2167
|
this._eventService.buttonRedirection.emit({ data: this.data.button });
|
|
2033
2168
|
}
|
|
2034
2169
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: TopOfImageCardComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2035
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: TopOfImageCardComponent, isStandalone: true, selector: "simpo-top-of-image-card", inputs: { data: "data", styles: "styles", content: "content", componentId: "componentId", button: "button", edit: "edit" }, ngImport: i0, template: "<!-- <div style=\"position: relative;\">\r\n\r\n <img loading=\"lazy\" [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\"\r\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100\" *ngIf=\"content.showImage\">\r\n\r\n <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"styles?.textBackground\">\r\n <div style=\"color: white;\" class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\"\r\n *ngIf=\"content.showHeading\"></div>\r\n <div style=\"color: white;\" class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.showContent\">\r\n </div>\r\n <app-button-element [buttonData]=\"data?.button\" [sectionId]=\"componentId\" [buttonStyle]=\"styles?.button\" [color]=\"styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n</div>\r\n -->\r\n<div class=\"top-container\" (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\"\r\n [ngStyle]=\"{'background-image' : content.display.showImage ? 'url('+data.image.url+')' : ''}\"\r\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\">\r\n <div [simpoImageDirective]=\"styles?.image\" [id]=\"componentId\" *ngIf=\"content.display.showImage\"></div>\r\n <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\"\r\n [simpoTextBackgroundDirective]=\"content.display.showImage ? styles?.textBackground : ''\">\r\n <div class=\"heading-medium mb-1 lh-40\" *ngIf=\"content.display.showHeading\">\r\n <simpo-text-editor [(value)]=\"data.inputText[0].value \" [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n </div>\r\n <div class=\"body-desc\" *ngIf=\"content.display.showContent\">\r\n <simpo-text-editor [(value)]=\"data.inputText[1].value \" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\r\n
|
|
2170
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: TopOfImageCardComponent, isStandalone: true, selector: "simpo-top-of-image-card", inputs: { data: "data", styles: "styles", content: "content", componentId: "componentId", button: "button", edit: "edit" }, ngImport: i0, template: "<!-- <div style=\"position: relative;\">\r\n\r\n <img loading=\"lazy\" [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\"\r\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100\" *ngIf=\"content.showImage\">\r\n\r\n <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"styles?.textBackground\">\r\n <div style=\"color: white;\" class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\"\r\n *ngIf=\"content.showHeading\"></div>\r\n <div style=\"color: white;\" class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.showContent\">\r\n </div>\r\n <app-button-element [buttonData]=\"data?.button\" [sectionId]=\"componentId\" [buttonStyle]=\"styles?.button\" [color]=\"styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n</div>\r\n -->\r\n<div class=\"top-container\" (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\"\r\n [ngStyle]=\"{'background-image' : content.display.showImage ? 'url('+data.image.url+')' : ''}\"\r\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\">\r\n <div [simpoImageDirective]=\"styles?.image\" [id]=\"componentId\" *ngIf=\"content.display.showImage\"></div>\r\n <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\"\r\n [simpoTextBackgroundDirective]=\"content.display.showImage ? styles?.textBackground : ''\">\r\n <div class=\"heading-medium mb-1 lh-40\" *ngIf=\"content.display.showHeading\">\r\n <simpo-text-editor [(value)]=\"data.inputText[0].value \" [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n </div>\r\n <div class=\"body-desc\" *ngIf=\"content.display.showContent\">\r\n <simpo-text-editor [(value)]=\"data.inputText[1].value \" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"w-100 d-flex justify-content-center\">\r\n <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\" [simpoHoverAnimation]=\"getContentAnimation()\" style=\"width: max-content;\">\r\n <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\"\r\n [buttonId]=\"button ? button.id : ''\" [color]=\"styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".w-100{width:100%}.mb-1{margin-bottom:1rem!important}.content{padding:3rem 1.5rem 1.5rem;min-height:256px;display:flex;flex-direction:column;justify-content:end;bottom:0}.top-container{background-position:center center;background-size:cover;height:100%;position:relative;display:flex;flex-direction:column;justify-content:flex-end}.lh-40{line-height:40px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: TextBackgroundDirectiveDirective, selector: "[simpoTextBackgroundDirective]", inputs: ["simpoTextBackgroundDirective"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "directive", type: HoverAnimationDirective, selector: "[simpoHoverAnimation]", inputs: ["simpoHoverAnimation"] }] }); }
|
|
2036
2171
|
}
|
|
2037
2172
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: TopOfImageCardComponent, decorators: [{
|
|
2038
2173
|
type: Component,
|
|
2039
|
-
args: [{ selector: 'simpo-top-of-image-card', standalone: true, imports: [CommonModule, ImageDirectiveDirective, CornerDirective, TextBackgroundDirectiveDirective, TextEditorComponent, SimpoButtonComponent], template: "<!-- <div style=\"position: relative;\">\r\n\r\n <img loading=\"lazy\" [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\"\r\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100\" *ngIf=\"content.showImage\">\r\n\r\n <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"styles?.textBackground\">\r\n <div style=\"color: white;\" class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\"\r\n *ngIf=\"content.showHeading\"></div>\r\n <div style=\"color: white;\" class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.showContent\">\r\n </div>\r\n <app-button-element [buttonData]=\"data?.button\" [sectionId]=\"componentId\" [buttonStyle]=\"styles?.button\" [color]=\"styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n</div>\r\n -->\r\n<div class=\"top-container\" (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\"\r\n [ngStyle]=\"{'background-image' : content.display.showImage ? 'url('+data.image.url+')' : ''}\"\r\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\">\r\n <div [simpoImageDirective]=\"styles?.image\" [id]=\"componentId\" *ngIf=\"content.display.showImage\"></div>\r\n <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\"\r\n [simpoTextBackgroundDirective]=\"content.display.showImage ? styles?.textBackground : ''\">\r\n <div class=\"heading-medium mb-1 lh-40\" *ngIf=\"content.display.showHeading\">\r\n <simpo-text-editor [(value)]=\"data.inputText[0].value \" [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n </div>\r\n <div class=\"body-desc\" *ngIf=\"content.display.showContent\">\r\n <simpo-text-editor [(value)]=\"data.inputText[1].value \" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\r\n
|
|
2174
|
+
args: [{ selector: 'simpo-top-of-image-card', standalone: true, imports: [CommonModule, ImageDirectiveDirective, CornerDirective, TextBackgroundDirectiveDirective, TextEditorComponent, SimpoButtonComponent, HoverAnimationDirective], template: "<!-- <div style=\"position: relative;\">\r\n\r\n <img loading=\"lazy\" [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\"\r\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100\" *ngIf=\"content.showImage\">\r\n\r\n <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"styles?.textBackground\">\r\n <div style=\"color: white;\" class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\"\r\n *ngIf=\"content.showHeading\"></div>\r\n <div style=\"color: white;\" class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.showContent\">\r\n </div>\r\n <app-button-element [buttonData]=\"data?.button\" [sectionId]=\"componentId\" [buttonStyle]=\"styles?.button\" [color]=\"styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n</div>\r\n -->\r\n<div class=\"top-container\" (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\"\r\n [ngStyle]=\"{'background-image' : content.display.showImage ? 'url('+data.image.url+')' : ''}\"\r\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\">\r\n <div [simpoImageDirective]=\"styles?.image\" [id]=\"componentId\" *ngIf=\"content.display.showImage\"></div>\r\n <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\"\r\n [simpoTextBackgroundDirective]=\"content.display.showImage ? styles?.textBackground : ''\">\r\n <div class=\"heading-medium mb-1 lh-40\" *ngIf=\"content.display.showHeading\">\r\n <simpo-text-editor [(value)]=\"data.inputText[0].value \" [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n </div>\r\n <div class=\"body-desc\" *ngIf=\"content.display.showContent\">\r\n <simpo-text-editor [(value)]=\"data.inputText[1].value \" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"w-100 d-flex justify-content-center\">\r\n <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\" [simpoHoverAnimation]=\"getContentAnimation()\" style=\"width: max-content;\">\r\n <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\"\r\n [buttonId]=\"button ? button.id : ''\" [color]=\"styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".w-100{width:100%}.mb-1{margin-bottom:1rem!important}.content{padding:3rem 1.5rem 1.5rem;min-height:256px;display:flex;flex-direction:column;justify-content:end;bottom:0}.top-container{background-position:center center;background-size:cover;height:100%;position:relative;display:flex;flex-direction:column;justify-content:flex-end}.lh-40{line-height:40px}\n"] }]
|
|
2040
2175
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
2041
2176
|
type: Input
|
|
2042
2177
|
}], styles: [{
|
|
@@ -2581,7 +2716,7 @@ class PaymentDetailsComponent {
|
|
|
2581
2716
|
this.defaultImage = 'https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/917067c1734337280303cancel.png';
|
|
2582
2717
|
}
|
|
2583
2718
|
ngOnInit() {
|
|
2584
|
-
this.admissionData.subscriptionPlans =
|
|
2719
|
+
// this.admissionData.subscriptionPlans =[]
|
|
2585
2720
|
this.subscriptionsData.forEach(element => {
|
|
2586
2721
|
if (element.newPricingList) {
|
|
2587
2722
|
element.newPricingList.forEach((elem) => {
|
|
@@ -2591,13 +2726,15 @@ class PaymentDetailsComponent {
|
|
|
2591
2726
|
});
|
|
2592
2727
|
this.admissionData?.studentFeeStructureV2?.feeConfig.forEach((element) => {
|
|
2593
2728
|
if (element.termsList.length > 0) {
|
|
2594
|
-
element.selectedTermValue
|
|
2595
|
-
|
|
2596
|
-
element.
|
|
2597
|
-
|
|
2598
|
-
|
|
2599
|
-
|
|
2600
|
-
|
|
2729
|
+
if (!element.selectedTermValue) {
|
|
2730
|
+
element.selectedTermValue = 'SINGLE';
|
|
2731
|
+
if (element.selectedTermValue === 'SINGLE') {
|
|
2732
|
+
element.term = false;
|
|
2733
|
+
element.paid = true;
|
|
2734
|
+
}
|
|
2735
|
+
else {
|
|
2736
|
+
element.paid = false;
|
|
2737
|
+
}
|
|
2601
2738
|
}
|
|
2602
2739
|
}
|
|
2603
2740
|
else {
|
|
@@ -2605,6 +2742,19 @@ class PaymentDetailsComponent {
|
|
|
2605
2742
|
}
|
|
2606
2743
|
});
|
|
2607
2744
|
this.feeStructure = this.admissionData?.studentFeeStructureV2;
|
|
2745
|
+
if (this.admissionData.subscriptionPlans.length > 0) {
|
|
2746
|
+
this.subscriptionsData.forEach(sub => {
|
|
2747
|
+
sub.newPricingList.forEach((pl) => {
|
|
2748
|
+
pl.selecteStatus = this.admissionData.subscriptionPlans.some((element) => {
|
|
2749
|
+
const match = element.frequency === pl.name;
|
|
2750
|
+
if (match) {
|
|
2751
|
+
this.isSubscriptionSelected(sub);
|
|
2752
|
+
}
|
|
2753
|
+
return match;
|
|
2754
|
+
});
|
|
2755
|
+
});
|
|
2756
|
+
});
|
|
2757
|
+
}
|
|
2608
2758
|
this.getAllStops();
|
|
2609
2759
|
this.getVehicleTypes();
|
|
2610
2760
|
}
|
|
@@ -2640,6 +2790,7 @@ class PaymentDetailsComponent {
|
|
|
2640
2790
|
if (element.stopName.split(' ').join('_').toLowerCase() === event.option.value.split(' ').join('_').toLowerCase()) {
|
|
2641
2791
|
selectedStudent = element;
|
|
2642
2792
|
this.selectedStop = element;
|
|
2793
|
+
localStorage.setItem('selectedStop', JSON.stringify(this.selectedStop));
|
|
2643
2794
|
}
|
|
2644
2795
|
});
|
|
2645
2796
|
}
|
|
@@ -2653,6 +2804,15 @@ class PaymentDetailsComponent {
|
|
|
2653
2804
|
this.restService.getAllVehicleTypes(data).subscribe((res) => {
|
|
2654
2805
|
this.vehicleTypesList = res.data.data;
|
|
2655
2806
|
this.filteredVehicleTypesList = [...this.vehicleTypesList];
|
|
2807
|
+
const selectedStop = JSON.parse(localStorage.getItem('selectedStop') || 'null');
|
|
2808
|
+
const selectedVehicle = JSON.parse(localStorage.getItem('selectedVehicle') || 'null');
|
|
2809
|
+
this.stopSearchText = selectedStop?.stopName || '';
|
|
2810
|
+
this.vehicleTypeSearchText = selectedVehicle?.vehicleType || '';
|
|
2811
|
+
if (this.admissionData.selectedStopDetail != null) {
|
|
2812
|
+
this.selectedStop = selectedStop;
|
|
2813
|
+
this.selectedVehicleType = selectedVehicle;
|
|
2814
|
+
this.getVehicleRoutesByStops();
|
|
2815
|
+
}
|
|
2656
2816
|
});
|
|
2657
2817
|
}
|
|
2658
2818
|
filtereVehicleTypes() {
|
|
@@ -2671,6 +2831,7 @@ class PaymentDetailsComponent {
|
|
|
2671
2831
|
this.vehicleTypesList.forEach((element) => {
|
|
2672
2832
|
if (element.vehicleType.split(' ').join('_').toLowerCase() === event.option.value.split(' ').join('_').toLowerCase()) {
|
|
2673
2833
|
this.selectedVehicleType = element;
|
|
2834
|
+
localStorage.setItem('selectedVehicle', JSON.stringify(this.selectedVehicleType));
|
|
2674
2835
|
}
|
|
2675
2836
|
});
|
|
2676
2837
|
this.getVehicleRoutesByStops();
|
|
@@ -2890,7 +3051,7 @@ class PaymentDetailsComponent {
|
|
|
2890
3051
|
}
|
|
2891
3052
|
}
|
|
2892
3053
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PaymentDetailsComponent, deps: [{ token: ElementServiceService }, { token: i2$2.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2893
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: PaymentDetailsComponent, isStandalone: true, selector: "simpo-payment-details", inputs: { admissionData: "admissionData", subscriptionsData: "subscriptionsData", termPaymentList: "termPaymentList" }, ngImport: i0, template: "<!-- <section class=\"main-section\">\r\n <div class=\"row\">\r\n <div class=\"col-md-6\">\r\n <div class=\"heading left-side\">\r\n Admission Fee\r\n </div>\r\n\r\n <div class=\"left-side mt-10\" *ngFor=\"let configList of Object.keys(feeConfig)\">\r\n <div class=\"heading mb-20\">{{configList}}</div>\r\n\r\n <div class=\"d-flex justify-space mt-10 mb-15\" *ngFor=\"let config of feeConfig[configList]\">\r\n <p class=\"sub-heading mb-0\">{{config.feeHead}}</p>\r\n <p class=\"amount mb-0\">\u20B9 {{config.amount}}</p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"left-side mt-10\" *ngFor=\"let type of Object.keys(subscriptions)\">\r\n <p class=\"heading\">{{type}}</p>\r\n\r\n <table class=\"subscription-table w-100\">\r\n <thead>\r\n <th>Subscription Title</th>\r\n <th>Monthly</th>\r\n <th>Quaterly</th>\r\n <th>Yearly</th>\r\n <th>On Demand</th>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let data of subscriptions[type];let i = index\">\r\n <td>{{data.subName}}</td>\r\n <td>\r\n <div class=\"form-check\" *ngIf=\"data.pricing['QUARTERLY']\">\r\n <input class=\"form-check-input\" type=\"radio\" name=\"subscription{{i}}\" [value]=\"'MONTHLY'\" (click)=\"toggleSelection(data, 'MONTHLY')\" [checked]=\"data.selectedOption === 'MONTHLY'\" [(ngModel)]=\"data.selectedOption\" id=\"flexRadioDefault2\">\r\n <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n \u20B9 {{data.pricing['MONTHLY']}}\r\n </label>\r\n </div>\r\n <img class=\"defaultImage\" *ngIf=\"!data.pricing['QUARTERLY']\" [src]=\"defaultImage\" alt=\"\">\r\n </td>\r\n <td>\r\n <div class=\"form-check\" *ngIf=\"data.pricing['MONTHLY']\">\r\n <input class=\"form-check-input\" type=\"radio\" name=\"subscription{{i}}\" [value]=\"'QUARTERLY'\" (click)=\"toggleSelection(data, 'QUARTERLY')\" [checked]=\"data.selectedOption === 'QUARTERLY'\" [(ngModel)]=\"data.selectedOption\" id=\"flexCheckChecked\">\r\n <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n \u20B9 {{data.pricing['QUARTERLY']}}\r\n </label>\r\n <img class=\"defaultImage\" *ngIf=\"!data.pricing['MONTHLY']\" [src]=\"defaultImage\" alt=\"\">\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"form-check\" *ngIf=\"data.pricing['ANNUALLY']\">\r\n <input class=\"form-check-input\" type=\"radio\" name=\"subscription{{i}}\" [value]=\"'ANNUALLY'\" (click)=\"toggleSelection(data, 'ANNUALLY')\" [checked]=\"data.selectedOption === 'ANNUALLY'\" [(ngModel)]=\"data.selectedOption\" id=\"flexCheckChecked\">\r\n <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n \u20B9 {{data.pricing['ANNUALLY']}}\r\n </label>\r\n </div>\r\n <img class=\"defaultImage\" *ngIf=\"!data.pricing['ANNUALLY']\" [src]=\"defaultImage\" alt=\"\">\r\n </td>\r\n <td>\r\n <div class=\"form-check\" *ngIf=\"data.pricing['ONDEMAND']\">\r\n <input class=\"form-check-input\" type=\"radio\" name=\"subscription{{i}}\" [value]=\"'ONDEMAND'\" (click)=\"toggleSelection(data, 'ONDEMAND')\" [checked]=\"data.selectedOption === 'ONDEMAND'\" [(ngModel)]=\"data.selectedOption\" id=\"flexCheckChecked\">\r\n <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n \u20B9 {{data.pricing['ONDEMAND']}}\r\n </label>\r\n </div>\r\n <img class=\"defaultImage\" *ngIf=\"!data.pricing['ONDEMAND']\" [src]=\"defaultImage\" alt=\"\">\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n <div class=\"left-side mt-10\">\r\n <p class=\"heading\">Payment Plan</p>\r\n\r\n <div class=\"d-flex g-2\">\r\n <div class=\"form-check\" (click)=\"changeAnnualPaymentTerm('ANNUALLY')\">\r\n <input class=\"form-check-input\" type=\"radio\" value=\"\" name=\"payment-plan\" id=\"flexCheckChecked\" [checked]=\"admissionData.paymentPlanType === 'ANNUALLY'\">\r\n <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n Annually\r\n </label>\r\n </div>\r\n <div class=\"form-check\" (click)=\"changeAnnualPaymentTerm('TERM')\">\r\n <input class=\"form-check-input\" type=\"radio\" value=\"\" name=\"payment-plan\" id=\"flexCheckChecked\" [checked]=\"admissionData.paymentPlanType === 'TERM'\">\r\n <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n Term\r\n </label>\r\n </div>\r\n </div>\r\n\r\n <div class=\"admission\" *ngIf=\"admissionData.paymentPlanType === 'TERM'\">\r\n <mat-form-field class=\"input-text\" appearance=\"outline\">\r\n <mat-select class=\"inputStyle\" placeholder=\"--Select--\" multiple=\"true\" [(ngModel)]=\"feeStructure.termPaymentList\" (ngModelChange)=\"calculateTotalAmount()\">\r\n <mat-option *ngFor=\"let term of termPaymentList\" [value]=\"term\">term {{term.termNumber}}</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <div class=\"col-md-6 right-side\">\r\n <div class=\"heading mb-20\">\r\n Fee Calculation\r\n </div>\r\n <div class=\"d-flex justify-space mt-10 mb-15\" *ngFor=\"let config of feeStructure.feeConfigs\">\r\n <p class=\"sub-heading mb-0\">{{config.feeHead}}</p>\r\n <p class=\"amount mb-0\">\u20B9 {{config.amount}}</p>\r\n </div>\r\n\r\n <div class=\"d-flex justify-space mt-10 mb-15\" *ngFor=\"let subscripition of feeStructure.subscriptionPlans\">\r\n <p class=\"sub-heading mb-0\">{{subscripition.subName}}</p>\r\n <p class=\"amount mb-0\">\u20B9 {{subscripition.pricing[subscripition.frequency]}}</p>\r\n </div>\r\n\r\n <div class=\"total-fee\">\r\n <div class=\"heading mb-5\">\r\n Total Fee\r\n </div>\r\n <div class=\"amount\">\r\n \u20B9 {{feeStructure.totalAmount}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</section> -->\r\n\r\n\r\n<section class=\"main_payment_details_section h-100 w-100 p-2 d-flex justify-content-between\">\r\n <div class=\"left_payment_details h-100 p-2\">\r\n <div class=\"fees_section\">\r\n <div class=\"sec_title\">\r\n Fees\r\n </div>\r\n <div class=\"mt-2 all_fee_configs\">\r\n <ng-container *ngFor=\"let item of feeStructure?.feeConfig\">\r\n <div class=\"single_fee_config p-3\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"fee_title\">{{item.feeHead ? item.feeHead.name : 'N/A'}}</div>\r\n <div class=\"fee_amount\">\u20B9 {{item.amount}}</div>\r\n </div>\r\n <div *ngIf=\"item.termsList.length > 0\">\r\n <div class=\"change_selection\">\r\n <mat-radio-group aria-label=\"Select an option\" [(ngModel)]=\"item.selectedTermValue\"\r\n name=\"termOption_{{ item.feeHead.id}}\"\r\n (change)=\"changeTermValue(item)\">\r\n <mat-radio-button value=\"SINGLE\"\r\n style=\"font-family: var(--primary-font-family);font-size:13px\">Single</mat-radio-button>\r\n <mat-radio-button value=\"TERM\"\r\n style=\"font-family: var(--primary-font-family);font-size:13px\">Term</mat-radio-button>\r\n </mat-radio-group>\r\n </div>\r\n <div class=\"termCount\" *ngIf=\"item.selectedTermValue === 'TERM'\">\r\n <div class=\"check_data\">\r\n <ng-container *ngFor=\"let term of item.termsList;let i = index\">\r\n <div class=\"singleData d-flex gap-3 align-items-end\">\r\n <input type=\"checkbox\" (change)=\"addTerms($event,term)\">\r\n <div class=\"data_value\">{{getOrdinalSuffix(i+1)}} Term (\u20B9 {{term?.termAmount}})</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"subscriptions_list mt-3\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"title\">Transport Fee</div>\r\n <div class=\"selecting_types d-flex align-items-center gap-2 justify-content-end\">\r\n <div style=\"width:30%\">\r\n <mat-form-field appearance=\"outline\" class=\"input_card mt-2 w-100\" style=\"height:40px\">\r\n <input type=\"text\" matInput placeholder=\"Select Stop\" [matAutocomplete]=\"autoGrade\"\r\n [(ngModel)]=\"stopSearchText\" (input)=\"filterStops()\"\r\n style=\"font-size: 13px;font-family: var(--primary-font-family);\">\r\n <mat-autocomplete #autoGrade=\"matAutocomplete\" (optionSelected)=\"onStopSelection($event)\">\r\n <mat-option *ngFor=\"let stop of filteredStopsList\" [value]=\"stop.stopName\"\r\n style=\"font-size: 13px;font-family: var(--primary-font-family);\">\r\n {{ stop.stopName | titlecase }}\r\n </mat-option>\r\n </mat-autocomplete>\r\n </mat-form-field>\r\n </div>\r\n <div style=\"width:30%\">\r\n <mat-form-field appearance=\"outline\" class=\"input_card mt-2 w-100\" style=\"height:40px\">\r\n <input type=\"text\" matInput placeholder=\"Select Vehicle Type\" [matAutocomplete]=\"autoGrade1\"\r\n [(ngModel)]=\"vehicleTypeSearchText\" (input)=\"filtereVehicleTypes()\"\r\n style=\"font-size: 13px;font-family: var(--primary-font-family);\">\r\n <mat-autocomplete #autoGrade1=\"matAutocomplete\" (optionSelected)=\"onVehicleTypeSelection($event)\">\r\n <mat-option *ngFor=\"let stop of filteredVehicleTypesList\" [value]=\"stop.vehicleType\"\r\n style=\"font-size: 13px;font-family: var(--primary-font-family);\">\r\n {{ stop.vehicleType | titlecase }}\r\n </mat-option>\r\n </mat-autocomplete>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"list_all_subscriptions mt-2\">\r\n <ng-container *ngFor=\"let item of routeValues\">\r\n <div class=\"single_fee_config p-3\">\r\n <div class=\"d-flex gap-2 align-items-center\">\r\n <mat-checkbox [checked]=\"admissionData.selectedStopDetail === item\"\r\n (change)=\"onCheckboxChange(item, $event)\"></mat-checkbox>\r\n\r\n <div class=\"d-flex justify-content-between align-items-center\" style=\"width:92%\">\r\n <div class=\"fee_title\">\r\n {{ item.transport.route ? item.transport.route.name : 'N/A' }}\r\n <span>(<span style=\"font-size:12px;font-family: var(--primary-font-family);\">Pickup Time :</span>\r\n <span\r\n style=\"font-size:12px;font-family: var(--primary-semi-bold-font-family);\">{{getPickupTime(item.transport.busRouteStopTimings)\r\n | date:'h:mm a'}}</span>\r\n -\r\n <span style=\"font-size:12px;font-family: var(--primary-font-family);\">Drop Time :</span>\r\n <span\r\n style=\"font-size:12px;font-family: var(--primary-semi-bold-font-family);\">{{getDroptime(item.transport.busRouteStopTimings)\r\n | date:'h:mm a'}}</span>\r\n )</span>\r\n </div>\r\n <div class=\"fee_amount\">\u20B9 {{ item.charges.totalAmount }}</div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"item?.charges.termPaymentList.length > 0\">\r\n <div class=\"change_selection\" style=\"width:90%;margin:0 auto\">\r\n <mat-radio-group aria-label=\"Select an option\" [(ngModel)]=\"item.charges.selectedTermValue\"\r\n (change)=\"changeTransportTermValue(item)\" [disabled]=\"admissionData.selectedStopDetail !== item\">\r\n <mat-radio-button value=\"SINGLE\"\r\n style=\"font-family: var(--primary-font-family); font-size: 13px\">Single</mat-radio-button>\r\n <mat-radio-button value=\"TERM\"\r\n style=\"font-family: var(--primary-font-family); font-size: 13px\">Term</mat-radio-button>\r\n </mat-radio-group>\r\n </div>\r\n\r\n <div class=\"termCount\" *ngIf=\"item.charges.selectedTermValue === 'TERM'\">\r\n <div class=\"check_data\" style=\"width:75%;margin:0 auto\">\r\n <ng-container *ngFor=\"let term of item.charges.termPaymentList; let i = index\">\r\n <div class=\"singleData d-flex gap-3 align-items-end\">\r\n <input type=\"checkbox\" (change)=\"addSingleStop($event, term)\"\r\n [disabled]=\"admissionData.selectedStopDetail !== item\" />\r\n <div class=\"data_value\">{{ getOrdinalSuffix(i + 1) }} Term (\u20B9 {{term.termAmount}})</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n </div>\r\n <div class=\"subscriptions_list mt-3\" *ngIf=\"subscriptionsData.length > 0\">\r\n <div class=\"title\">Subscriptions</div>\r\n <div class=\"list_all_subscriptions mt-2\">\r\n <ng-container *ngFor=\"let item of subscriptionsData\">\r\n <div class=\"top_1\">\r\n <div class=\"d-flex align-items-center gap-3\">\r\n <mat-checkbox [checked]=\"isSubscriptionSelected(item)\"\r\n (change)=\"onSubscriptionItemChange($event, item)\"></mat-checkbox>\r\n <div class=\"subscription_title\">\r\n {{item.subscriptionTitle}}\r\n </div>\r\n </div>\r\n <div class=\"subscription_types\" style=\"width:85%;margin:auto\">\r\n <ng-container *ngFor=\"let subV of item.newPricingList;let i = index\">\r\n <div class=\"single_subscrption d-flex gap-2 mt-2\">\r\n <div class=\"single_title d-flex gap-3 align-items-center\" style=\"width:25%\">\r\n <input type=\"radio\" [checked]=\"subV.selecteStatus\"\r\n (change)=\"toggleSubscriptionSelection(item.newPricingList, i, item)\"\r\n [disabled]=\"!disableSubscriptionSelection(item)\">\r\n <div class=\"data_value\">{{subV.name | titlecase}}</div>\r\n </div>\r\n <div class=\"single_value\">\r\n {{subV.amount}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"right_payment_details h-100\">\r\n <div class=\"total_payment_details h-100 w-100 p-3\">\r\n <div class=\"mt-2 calculation_table\">\r\n <div class=\"calculation_single_part\">\r\n <div class=\"total_title\" style=\"border-bottom: 1px solid #dedede;padding-bottom: 12px;\">\r\n Total Academic Fee Breakdown\r\n </div>\r\n <ng-container *ngFor=\"let item of feeStructure.feeConfig\">\r\n <div class=\"d-flex justify-content-between align-items-center\" style=\"margin-top: 8px;\">\r\n <div class=\"fee_title\">{{item.feeHead ? item.feeHead.name : 'N/A'}}</div>\r\n <div class=\"fee_amount\" *ngIf=\"item.termsList.length === 0 || item.selectedTermValue != 'TERM'\">\r\n <span [ngClass]=\"(item?.concession != null && item?.concession?.length != 0) ? 'strikethrough' : ''\">\r\n \u20B9 {{item.amount}}\r\n </span>\r\n <span\r\n *ngIf=\"item.concession != null && item?.concession.length != 0\">({{item.appliedConcessionAmount}})</span>\r\n </div>\r\n </div>\r\n <div class=\"value fw-500\" *ngIf=\"item.termsList.length >= 0\">\r\n <div class=\"selecte_terms\">\r\n <ng-container *ngFor=\"let data of item.termsList\">\r\n <div class=\"selected_single_term d-flex align-items-center justify-content-between\" *ngIf=\"data.selected\">\r\n <div class=\"key\">\r\n Term {{data.termNumber}}\r\n </div>\r\n <div class=\"value fw-500\">\r\n \u20B9 {{data.termAmount}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"calculation_single_part\" *ngIf=\"admissionData.selectedStopDetail != null\">\r\n <div class=\"total_title\" style=\"border-bottom: 1px solid #dedede;padding-bottom: 12px;\">\r\n Transport Fee\r\n </div>\r\n <ng-container>\r\n <div class=\"d-flex justify-content-between align-items-center\" style=\"margin-top: 8px;\">\r\n <div class=\"fee_title\">{{admissionData.selectedStopDetail?.charges?.vehicleType ?\r\n admissionData.selectedStopDetail?.charges?.vehicleType?.name : 'N/A'}}</div>\r\n <div class=\"fee_amount\"\r\n *ngIf=\"admissionData.selectedStopDetail?.charges?.termPaymentList?.length === 0 || admissionData.selectedStopDetail?.charges?.selectedTermValue != 'TERM'\">\r\n \u20B9\r\n {{admissionData.selectedStopDetail?.charges?.totalAmount}}\r\n </div>\r\n </div>\r\n <div class=\"value fw-500\" *ngIf=\"admissionData.selectedStopDetail?.charges?.termPaymentList?.length >= 0\">\r\n <div class=\"selecte_terms\">\r\n <ng-container *ngFor=\"let data of admissionData.selectedStopDetail?.charges?.termPaymentList\">\r\n <div class=\"selected_single_term d-flex align-items-center justify-content-between\"\r\n *ngIf=\"data.selected\">\r\n <div class=\"key\">\r\n Term {{data.termNumber}}\r\n </div>\r\n <div class=\"value fw-500\">\r\n \u20B9 {{data.termAmount}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"calculation_single_part\" *ngIf=\"hasActiveSubscriptions()\">\r\n <div class=\"new_title mt-2\" style=\"border-bottom: 1px solid #dedede;padding-bottom: 12px;\">\r\n Subscriptions\r\n </div>\r\n <div class=\"listing_selected_suscriptions mt-2\">\r\n <ng-container *ngFor=\"let item of admissionData.subscriptionPlans\">\r\n <div class=\"fee_title\">{{item.subName | titlecase}}</div>\r\n <ng-container>\r\n <div class=\"single_payment_calculation d-flex justify-content-between align-items-center mb-1\">\r\n <div class=\"key\">\r\n {{item.frequency | titlecase}}\r\n </div>\r\n <div class=\"value fw-500\">\r\n \u20B9 {{item.pricing[item.frequency]}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"footer_section total_container\">\r\n <div class=\"footer_title\">Grand Total Fee</div>\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n \u20B9 {{feeStructure?.totalFee}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</section>", styles: [".left_payment_details{width:55%;overflow-y:scroll}.right_payment_details{width:45%;padding:10px}.sec_title{font-size:16px;font-family:var(--primary-semi-bold-font-family);font-weight:500;color:#000}.single_fee_config{background-color:#f1f7ff99;padding:10px;box-shadow:0 0 2px #d3d3d3;border-radius:8px;margin-bottom:10px}.fee_title{font-size:14.5px;font-family:var(--primary-font-family);color:#3a3838;font-weight:500}.fee_amount,.fee_amount span{font-size:14.5px;font-family:var(--primary-semi-bold-font-family);color:#000;font-weight:500}.total_payment_details{background:#faf5f199;box-shadow:0 0 2px #d3d3d3;border-radius:8px}.total_title{font-size:20px;font-family:var(--primary-semi-bold-font-family);color:#000;font-weight:500;line-height:18px}.calculation_table{height:90%;overflow-y:scroll}.footer_section{height:10%;display:flex;justify-content:space-between;align-items:center}.footer_title{font-size:18px;font-family:var(--primary-font-family);font-weight:500;color:#000}.total_container{background-color:#fff;padding:10px;font-size:20px;font-weight:500;font-family:var(--primary-semi-bold-font-family);color:#000}.calculation_single_part{background-color:#fff;padding:10px;border-radius:8px;margin-bottom:10px}.selected_single_term{margin-bottom:10px}.key{font-weight:500;font-size:14px;font-family:var(--primary-font-family);color:#3a3838;margin-left:30px}.fw-500{font-weight:500;font-family:var(--primary-semi-bold-font-family);font-size:16px;margin:0!important}.check_data{width:90%;margin:auto}.singleData{margin-bottom:10px}.singleData input{width:16px;height:16px}.singleData .data_value{font-size:14px;font-family:var(--primary-font-family);color:#3a3838;font-weight:500}.title{font-family:var(--primary-semi-bold-font-family);font-weight:500;font-size:15px;color:#000}.subscription_title{font-family:var(--primary-font-family);font-weight:500;font-size:14px;color:#000}.single_value{font-size:16px;font-family:var(--primary-semi-bold-font-family);color:#000;font-weight:500}.single_title input{width:16px;height:16px}.data_value{font-size:14px;font-family:var(--primary-font-family);color:#3a3838;font-weight:500}.top_1{background:#d2d4b999;padding:10px;box-shadow:0 0 2px #d3d3d3;border-radius:8px;margin-bottom:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { 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: "ngmodule", type: MatOptionModule }, { kind: "component", type: i13.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i11.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i7$2.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i7$2.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i8$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i9.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i9.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i10.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] }); }
|
|
3054
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: PaymentDetailsComponent, isStandalone: true, selector: "simpo-payment-details", inputs: { admissionData: "admissionData", subscriptionsData: "subscriptionsData", termPaymentList: "termPaymentList" }, ngImport: i0, template: "<!-- <section class=\"main-section\">\r\n <div class=\"row\">\r\n <div class=\"col-md-6\">\r\n <div class=\"heading left-side\">\r\n Admission Fee\r\n </div>\r\n\r\n <div class=\"left-side mt-10\" *ngFor=\"let configList of Object.keys(feeConfig)\">\r\n <div class=\"heading mb-20\">{{configList}}</div>\r\n\r\n <div class=\"d-flex justify-space mt-10 mb-15\" *ngFor=\"let config of feeConfig[configList]\">\r\n <p class=\"sub-heading mb-0\">{{config.feeHead}}</p>\r\n <p class=\"amount mb-0\">\u20B9 {{config.amount}}</p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"left-side mt-10\" *ngFor=\"let type of Object.keys(subscriptions)\">\r\n <p class=\"heading\">{{type}}</p>\r\n\r\n <table class=\"subscription-table w-100\">\r\n <thead>\r\n <th>Subscription Title</th>\r\n <th>Monthly</th>\r\n <th>Quaterly</th>\r\n <th>Yearly</th>\r\n <th>On Demand</th>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let data of subscriptions[type];let i = index\">\r\n <td>{{data.subName}}</td>\r\n <td>\r\n <div class=\"form-check\" *ngIf=\"data.pricing['QUARTERLY']\">\r\n <input class=\"form-check-input\" type=\"radio\" name=\"subscription{{i}}\" [value]=\"'MONTHLY'\" (click)=\"toggleSelection(data, 'MONTHLY')\" [checked]=\"data.selectedOption === 'MONTHLY'\" [(ngModel)]=\"data.selectedOption\" id=\"flexRadioDefault2\">\r\n <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n \u20B9 {{data.pricing['MONTHLY']}}\r\n </label>\r\n </div>\r\n <img class=\"defaultImage\" *ngIf=\"!data.pricing['QUARTERLY']\" [src]=\"defaultImage\" alt=\"\">\r\n </td>\r\n <td>\r\n <div class=\"form-check\" *ngIf=\"data.pricing['MONTHLY']\">\r\n <input class=\"form-check-input\" type=\"radio\" name=\"subscription{{i}}\" [value]=\"'QUARTERLY'\" (click)=\"toggleSelection(data, 'QUARTERLY')\" [checked]=\"data.selectedOption === 'QUARTERLY'\" [(ngModel)]=\"data.selectedOption\" id=\"flexCheckChecked\">\r\n <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n \u20B9 {{data.pricing['QUARTERLY']}}\r\n </label>\r\n <img class=\"defaultImage\" *ngIf=\"!data.pricing['MONTHLY']\" [src]=\"defaultImage\" alt=\"\">\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"form-check\" *ngIf=\"data.pricing['ANNUALLY']\">\r\n <input class=\"form-check-input\" type=\"radio\" name=\"subscription{{i}}\" [value]=\"'ANNUALLY'\" (click)=\"toggleSelection(data, 'ANNUALLY')\" [checked]=\"data.selectedOption === 'ANNUALLY'\" [(ngModel)]=\"data.selectedOption\" id=\"flexCheckChecked\">\r\n <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n \u20B9 {{data.pricing['ANNUALLY']}}\r\n </label>\r\n </div>\r\n <img class=\"defaultImage\" *ngIf=\"!data.pricing['ANNUALLY']\" [src]=\"defaultImage\" alt=\"\">\r\n </td>\r\n <td>\r\n <div class=\"form-check\" *ngIf=\"data.pricing['ONDEMAND']\">\r\n <input class=\"form-check-input\" type=\"radio\" name=\"subscription{{i}}\" [value]=\"'ONDEMAND'\" (click)=\"toggleSelection(data, 'ONDEMAND')\" [checked]=\"data.selectedOption === 'ONDEMAND'\" [(ngModel)]=\"data.selectedOption\" id=\"flexCheckChecked\">\r\n <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n \u20B9 {{data.pricing['ONDEMAND']}}\r\n </label>\r\n </div>\r\n <img class=\"defaultImage\" *ngIf=\"!data.pricing['ONDEMAND']\" [src]=\"defaultImage\" alt=\"\">\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n <div class=\"left-side mt-10\">\r\n <p class=\"heading\">Payment Plan</p>\r\n\r\n <div class=\"d-flex g-2\">\r\n <div class=\"form-check\" (click)=\"changeAnnualPaymentTerm('ANNUALLY')\">\r\n <input class=\"form-check-input\" type=\"radio\" value=\"\" name=\"payment-plan\" id=\"flexCheckChecked\" [checked]=\"admissionData.paymentPlanType === 'ANNUALLY'\">\r\n <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n Annually\r\n </label>\r\n </div>\r\n <div class=\"form-check\" (click)=\"changeAnnualPaymentTerm('TERM')\">\r\n <input class=\"form-check-input\" type=\"radio\" value=\"\" name=\"payment-plan\" id=\"flexCheckChecked\" [checked]=\"admissionData.paymentPlanType === 'TERM'\">\r\n <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n Term\r\n </label>\r\n </div>\r\n </div>\r\n\r\n <div class=\"admission\" *ngIf=\"admissionData.paymentPlanType === 'TERM'\">\r\n <mat-form-field class=\"input-text\" appearance=\"outline\">\r\n <mat-select class=\"inputStyle\" placeholder=\"--Select--\" multiple=\"true\" [(ngModel)]=\"feeStructure.termPaymentList\" (ngModelChange)=\"calculateTotalAmount()\">\r\n <mat-option *ngFor=\"let term of termPaymentList\" [value]=\"term\">term {{term.termNumber}}</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <div class=\"col-md-6 right-side\">\r\n <div class=\"heading mb-20\">\r\n Fee Calculation\r\n </div>\r\n <div class=\"d-flex justify-space mt-10 mb-15\" *ngFor=\"let config of feeStructure.feeConfigs\">\r\n <p class=\"sub-heading mb-0\">{{config.feeHead}}</p>\r\n <p class=\"amount mb-0\">\u20B9 {{config.amount}}</p>\r\n </div>\r\n\r\n <div class=\"d-flex justify-space mt-10 mb-15\" *ngFor=\"let subscripition of feeStructure.subscriptionPlans\">\r\n <p class=\"sub-heading mb-0\">{{subscripition.subName}}</p>\r\n <p class=\"amount mb-0\">\u20B9 {{subscripition.pricing[subscripition.frequency]}}</p>\r\n </div>\r\n\r\n <div class=\"total-fee\">\r\n <div class=\"heading mb-5\">\r\n Total Fee\r\n </div>\r\n <div class=\"amount\">\r\n \u20B9 {{feeStructure.totalAmount}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</section> -->\r\n\r\n\r\n<section class=\"main_payment_details_section h-100 w-100 p-2 d-flex justify-content-between\">\r\n <div class=\"left_payment_details h-100 p-2\">\r\n <div class=\"fees_section\">\r\n <div class=\"sec_title\">\r\n Fees\r\n </div>\r\n <div class=\"mt-2 all_fee_configs\">\r\n <ng-container *ngFor=\"let item of feeStructure?.feeConfig\">\r\n <div class=\"single_fee_config p-3\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"fee_title\">{{item.feeHead ? item.feeHead.name : 'N/A'}}</div>\r\n <div class=\"fee_amount\">\u20B9 {{item.amount}}</div>\r\n </div>\r\n <div *ngIf=\"item.termsList.length > 0\">\r\n <div class=\"change_selection\">\r\n <mat-radio-group aria-label=\"Select an option\" [(ngModel)]=\"item.selectedTermValue\"\r\n name=\"termOption_{{ item.feeHead.id}}\"\r\n (change)=\"changeTermValue(item)\">\r\n <mat-radio-button value=\"SINGLE\"\r\n style=\"font-family: var(--primary-font-family);font-size:13px\">Single</mat-radio-button>\r\n <mat-radio-button value=\"TERM\"\r\n style=\"font-family: var(--primary-font-family);font-size:13px\">Term</mat-radio-button>\r\n </mat-radio-group>\r\n </div>\r\n <div class=\"termCount\" *ngIf=\"item.selectedTermValue === 'TERM'\">\r\n <div class=\"check_data\">\r\n <ng-container *ngFor=\"let term of item.termsList;let i = index\">\r\n <div class=\"singleData d-flex gap-3 align-items-end\">\r\n <input type=\"checkbox\" (change)=\"addTerms($event,term)\" [checked]=\"term.selected\">\r\n <div class=\"data_value\">{{getOrdinalSuffix(i+1)}} Term (\u20B9 {{term?.termAmount}})</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"subscriptions_list mt-3\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"title\">Transport Fee</div>\r\n <div class=\"selecting_types d-flex align-items-center gap-2 justify-content-end\">\r\n <div style=\"width:30%\">\r\n <mat-form-field appearance=\"outline\" class=\"input_card mt-2 w-100\" style=\"height:40px\">\r\n <input type=\"text\" matInput placeholder=\"Select Stop\" [matAutocomplete]=\"autoGrade\"\r\n [(ngModel)]=\"stopSearchText\" (input)=\"filterStops()\"\r\n style=\"font-size: 13px;font-family: var(--primary-font-family);\">\r\n <mat-autocomplete #autoGrade=\"matAutocomplete\" (optionSelected)=\"onStopSelection($event)\">\r\n <mat-option *ngFor=\"let stop of filteredStopsList\" [value]=\"stop.stopName\"\r\n style=\"font-size: 13px;font-family: var(--primary-font-family);\">\r\n {{ stop.stopName | titlecase }}\r\n </mat-option>\r\n </mat-autocomplete>\r\n </mat-form-field>\r\n </div>\r\n <div style=\"width:30%\">\r\n <mat-form-field appearance=\"outline\" class=\"input_card mt-2 w-100\" style=\"height:40px\">\r\n <input type=\"text\" matInput placeholder=\"Select Vehicle Type\" [matAutocomplete]=\"autoGrade1\"\r\n [(ngModel)]=\"vehicleTypeSearchText\" (input)=\"filtereVehicleTypes()\"\r\n style=\"font-size: 13px;font-family: var(--primary-font-family);\">\r\n <mat-autocomplete #autoGrade1=\"matAutocomplete\" (optionSelected)=\"onVehicleTypeSelection($event)\">\r\n <mat-option *ngFor=\"let stop of filteredVehicleTypesList\" [value]=\"stop.vehicleType\"\r\n style=\"font-size: 13px;font-family: var(--primary-font-family);\">\r\n {{ stop.vehicleType | titlecase }}\r\n </mat-option>\r\n </mat-autocomplete>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"list_all_subscriptions mt-2\">\r\n <ng-container *ngFor=\"let item of routeValues\">\r\n <div class=\"single_fee_config p-3\">\r\n <div class=\"d-flex gap-2 align-items-center\">\r\n <mat-checkbox [checked]=\"admissionData.selectedStopDetail === item\"\r\n (change)=\"onCheckboxChange(item, $event)\"></mat-checkbox>\r\n\r\n <div class=\"d-flex justify-content-between align-items-center\" style=\"width:92%\">\r\n <div class=\"fee_title\">\r\n {{ item.transport.route ? item.transport.route.name : 'N/A' }}\r\n <span>(<span style=\"font-size:12px;font-family: var(--primary-font-family);\">Pickup Time :</span>\r\n <span\r\n style=\"font-size:12px;font-family: var(--primary-semi-bold-font-family);\">{{getPickupTime(item.transport.busRouteStopTimings)\r\n | date:'h:mm a'}}</span>\r\n -\r\n <span style=\"font-size:12px;font-family: var(--primary-font-family);\">Drop Time :</span>\r\n <span\r\n style=\"font-size:12px;font-family: var(--primary-semi-bold-font-family);\">{{getDroptime(item.transport.busRouteStopTimings)\r\n | date:'h:mm a'}}</span>\r\n )</span>\r\n </div>\r\n <div class=\"fee_amount\">\u20B9 {{ item.charges.totalAmount }}</div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"item?.charges.termPaymentList.length > 0\">\r\n <div class=\"change_selection\" style=\"width:90%;margin:0 auto\">\r\n <mat-radio-group aria-label=\"Select an option\" [(ngModel)]=\"item.charges.selectedTermValue\"\r\n (change)=\"changeTransportTermValue(item)\" [disabled]=\"admissionData.selectedStopDetail !== item\">\r\n <mat-radio-button value=\"SINGLE\"\r\n style=\"font-family: var(--primary-font-family); font-size: 13px\">Single</mat-radio-button>\r\n <mat-radio-button value=\"TERM\"\r\n style=\"font-family: var(--primary-font-family); font-size: 13px\">Term</mat-radio-button>\r\n </mat-radio-group>\r\n </div>\r\n\r\n <div class=\"termCount\" *ngIf=\"item.charges.selectedTermValue === 'TERM'\">\r\n <div class=\"check_data\" style=\"width:75%;margin:0 auto\">\r\n <ng-container *ngFor=\"let term of item.charges.termPaymentList; let i = index\">\r\n <div class=\"singleData d-flex gap-3 align-items-end\">\r\n <input type=\"checkbox\" (change)=\"addSingleStop($event, term)\"\r\n [disabled]=\"admissionData.selectedStopDetail !== item\" />\r\n <div class=\"data_value\">{{ getOrdinalSuffix(i + 1) }} Term (\u20B9 {{term.termAmount}})</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n </div>\r\n <div class=\"subscriptions_list mt-3\" *ngIf=\"subscriptionsData.length > 0\">\r\n <div class=\"title\">Subscriptions</div>\r\n <div class=\"list_all_subscriptions mt-2\">\r\n <ng-container *ngFor=\"let item of subscriptionsData\">\r\n <div class=\"top_1\">\r\n <div class=\"d-flex align-items-center gap-3\">\r\n <mat-checkbox [checked]=\"isSubscriptionSelected(item)\"\r\n (change)=\"onSubscriptionItemChange($event, item)\"></mat-checkbox>\r\n <div class=\"subscription_title\">\r\n {{item.subscriptionTitle}}\r\n </div>\r\n </div>\r\n <div class=\"subscription_types\" style=\"width:85%;margin:auto\">\r\n <ng-container *ngFor=\"let subV of item.newPricingList;let i = index\">\r\n <div class=\"single_subscrption d-flex gap-2 mt-2\">\r\n <div class=\"single_title d-flex gap-3 align-items-center\" style=\"width:25%\">\r\n <input type=\"radio\" [checked]=\"subV.selecteStatus\"\r\n (change)=\"toggleSubscriptionSelection(item.newPricingList, i, item)\"\r\n [disabled]=\"!disableSubscriptionSelection(item)\">\r\n <div class=\"data_value\">{{subV.name | titlecase}}</div>\r\n </div>\r\n <div class=\"single_value\">\r\n {{subV.amount}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"right_payment_details h-100\">\r\n <div class=\"total_payment_details h-100 w-100 p-3\">\r\n <div class=\"mt-2 calculation_table\">\r\n <div class=\"calculation_single_part\">\r\n <div class=\"total_title\" style=\"border-bottom: 1px solid #dedede;padding-bottom: 12px;\">\r\n Total Academic Fee Breakdown\r\n </div>\r\n <ng-container *ngFor=\"let item of feeStructure.feeConfig\">\r\n <div class=\"d-flex justify-content-between align-items-center\" style=\"margin-top: 8px;\">\r\n <div class=\"fee_title\">{{item.feeHead ? item.feeHead.name : 'N/A'}}</div>\r\n <div class=\"fee_amount\" *ngIf=\"item.termsList.length === 0 || item.selectedTermValue != 'TERM'\">\r\n <span [ngClass]=\"(item?.concession != null && item?.concession?.length != 0) ? 'strikethrough' : ''\">\r\n \u20B9 {{item.amount}}\r\n </span>\r\n <span\r\n *ngIf=\"item.concession != null && item?.concession.length != 0\">({{item.appliedConcessionAmount}})</span>\r\n </div>\r\n </div>\r\n <div class=\"value fw-500\" *ngIf=\"item.termsList.length >= 0\">\r\n <div class=\"selecte_terms\">\r\n <ng-container *ngFor=\"let data of item.termsList\">\r\n <div class=\"selected_single_term d-flex align-items-center justify-content-between\" *ngIf=\"data.selected\">\r\n <div class=\"key\">\r\n Term {{data.termNumber}}\r\n </div>\r\n <div class=\"value fw-500\">\r\n \u20B9 {{data.termAmount}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"calculation_single_part\" *ngIf=\"admissionData.selectedStopDetail != null\">\r\n <div class=\"total_title\" style=\"border-bottom: 1px solid #dedede;padding-bottom: 12px;\">\r\n Transport Fee\r\n </div>\r\n <ng-container>\r\n <div class=\"d-flex justify-content-between align-items-center\" style=\"margin-top: 8px;\">\r\n <div class=\"fee_title\">{{admissionData.selectedStopDetail?.charges?.vehicleType ?\r\n admissionData.selectedStopDetail?.charges?.vehicleType?.name : 'N/A'}}</div>\r\n <div class=\"fee_amount\"\r\n *ngIf=\"admissionData.selectedStopDetail?.charges?.termPaymentList?.length === 0 || admissionData.selectedStopDetail?.charges?.selectedTermValue != 'TERM'\">\r\n \u20B9\r\n {{admissionData.selectedStopDetail?.charges?.totalAmount}}\r\n </div>\r\n </div>\r\n <div class=\"value fw-500\" *ngIf=\"admissionData.selectedStopDetail?.charges?.termPaymentList?.length >= 0\">\r\n <div class=\"selecte_terms\">\r\n <ng-container *ngFor=\"let data of admissionData.selectedStopDetail?.charges?.termPaymentList\">\r\n <div class=\"selected_single_term d-flex align-items-center justify-content-between\"\r\n *ngIf=\"data.selected\">\r\n <div class=\"key\">\r\n Term {{data.termNumber}}\r\n </div>\r\n <div class=\"value fw-500\">\r\n \u20B9 {{data.termAmount}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"calculation_single_part\" *ngIf=\"hasActiveSubscriptions()\">\r\n <div class=\"new_title mt-2\" style=\"border-bottom: 1px solid #dedede;padding-bottom: 12px;\">\r\n Subscriptions\r\n </div>\r\n <div class=\"listing_selected_suscriptions mt-2\">\r\n <ng-container *ngFor=\"let item of admissionData.subscriptionPlans\">\r\n <div class=\"fee_title\">{{item.subName | titlecase}}</div>\r\n <ng-container>\r\n <div class=\"single_payment_calculation d-flex justify-content-between align-items-center mb-1\">\r\n <div class=\"key\">\r\n {{item.frequency | titlecase}}\r\n </div>\r\n <div class=\"value fw-500\">\r\n \u20B9 {{item.pricing[item.frequency]}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"footer_section total_container\">\r\n <div class=\"footer_title\">Grand Total Fee</div>\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n \u20B9 {{feeStructure?.totalFee}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</section>", styles: [".left_payment_details{width:55%;overflow-y:scroll}.right_payment_details{width:45%;padding:10px}.sec_title{font-size:16px;font-family:var(--primary-semi-bold-font-family);font-weight:500;color:#000}.single_fee_config{background-color:#f1f7ff99;padding:10px;box-shadow:0 0 2px #d3d3d3;border-radius:8px;margin-bottom:10px}.fee_title{font-size:14.5px;font-family:var(--primary-font-family);color:#3a3838;font-weight:500}.fee_amount,.fee_amount span{font-size:14.5px;font-family:var(--primary-semi-bold-font-family);color:#000;font-weight:500}.total_payment_details{background:#faf5f199;box-shadow:0 0 2px #d3d3d3;border-radius:8px}.total_title{font-size:20px;font-family:var(--primary-semi-bold-font-family);color:#000;font-weight:500;line-height:18px}.calculation_table{height:90%;overflow-y:scroll}.footer_section{height:10%;display:flex;justify-content:space-between;align-items:center}.footer_title{font-size:18px;font-family:var(--primary-font-family);font-weight:500;color:#000}.total_container{background-color:#fff;padding:10px;font-size:20px;font-weight:500;font-family:var(--primary-semi-bold-font-family);color:#000}.calculation_single_part{background-color:#fff;padding:10px;border-radius:8px;margin-bottom:10px}.selected_single_term{margin-bottom:10px}.key{font-weight:500;font-size:14px;font-family:var(--primary-font-family);color:#3a3838;margin-left:30px}.fw-500{font-weight:500;font-family:var(--primary-semi-bold-font-family);font-size:16px;margin:0!important}.check_data{width:90%;margin:auto}.singleData{margin-bottom:10px}.singleData input{width:16px;height:16px}.singleData .data_value{font-size:14px;font-family:var(--primary-font-family);color:#3a3838;font-weight:500}.title{font-family:var(--primary-semi-bold-font-family);font-weight:500;font-size:15px;color:#000}.subscription_title{font-family:var(--primary-font-family);font-weight:500;font-size:14px;color:#000}.single_value{font-size:16px;font-family:var(--primary-semi-bold-font-family);color:#000;font-weight:500}.single_title input{width:16px;height:16px}.data_value{font-size:14px;font-family:var(--primary-font-family);color:#3a3838;font-weight:500}.top_1{background:#d2d4b999;padding:10px;box-shadow:0 0 2px #d3d3d3;border-radius:8px;margin-bottom:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { 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: "ngmodule", type: MatOptionModule }, { kind: "component", type: i13.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i11.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i7$2.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i7$2.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i8$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i9.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i9.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i10.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] }); }
|
|
2894
3055
|
}
|
|
2895
3056
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PaymentDetailsComponent, decorators: [{
|
|
2896
3057
|
type: Component,
|
|
@@ -2905,7 +3066,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
2905
3066
|
MatDialogModule,
|
|
2906
3067
|
MatAutocompleteModule,
|
|
2907
3068
|
MatInputModule
|
|
2908
|
-
], template: "<!-- <section class=\"main-section\">\r\n <div class=\"row\">\r\n <div class=\"col-md-6\">\r\n <div class=\"heading left-side\">\r\n Admission Fee\r\n </div>\r\n\r\n <div class=\"left-side mt-10\" *ngFor=\"let configList of Object.keys(feeConfig)\">\r\n <div class=\"heading mb-20\">{{configList}}</div>\r\n\r\n <div class=\"d-flex justify-space mt-10 mb-15\" *ngFor=\"let config of feeConfig[configList]\">\r\n <p class=\"sub-heading mb-0\">{{config.feeHead}}</p>\r\n <p class=\"amount mb-0\">\u20B9 {{config.amount}}</p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"left-side mt-10\" *ngFor=\"let type of Object.keys(subscriptions)\">\r\n <p class=\"heading\">{{type}}</p>\r\n\r\n <table class=\"subscription-table w-100\">\r\n <thead>\r\n <th>Subscription Title</th>\r\n <th>Monthly</th>\r\n <th>Quaterly</th>\r\n <th>Yearly</th>\r\n <th>On Demand</th>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let data of subscriptions[type];let i = index\">\r\n <td>{{data.subName}}</td>\r\n <td>\r\n <div class=\"form-check\" *ngIf=\"data.pricing['QUARTERLY']\">\r\n <input class=\"form-check-input\" type=\"radio\" name=\"subscription{{i}}\" [value]=\"'MONTHLY'\" (click)=\"toggleSelection(data, 'MONTHLY')\" [checked]=\"data.selectedOption === 'MONTHLY'\" [(ngModel)]=\"data.selectedOption\" id=\"flexRadioDefault2\">\r\n <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n \u20B9 {{data.pricing['MONTHLY']}}\r\n </label>\r\n </div>\r\n <img class=\"defaultImage\" *ngIf=\"!data.pricing['QUARTERLY']\" [src]=\"defaultImage\" alt=\"\">\r\n </td>\r\n <td>\r\n <div class=\"form-check\" *ngIf=\"data.pricing['MONTHLY']\">\r\n <input class=\"form-check-input\" type=\"radio\" name=\"subscription{{i}}\" [value]=\"'QUARTERLY'\" (click)=\"toggleSelection(data, 'QUARTERLY')\" [checked]=\"data.selectedOption === 'QUARTERLY'\" [(ngModel)]=\"data.selectedOption\" id=\"flexCheckChecked\">\r\n <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n \u20B9 {{data.pricing['QUARTERLY']}}\r\n </label>\r\n <img class=\"defaultImage\" *ngIf=\"!data.pricing['MONTHLY']\" [src]=\"defaultImage\" alt=\"\">\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"form-check\" *ngIf=\"data.pricing['ANNUALLY']\">\r\n <input class=\"form-check-input\" type=\"radio\" name=\"subscription{{i}}\" [value]=\"'ANNUALLY'\" (click)=\"toggleSelection(data, 'ANNUALLY')\" [checked]=\"data.selectedOption === 'ANNUALLY'\" [(ngModel)]=\"data.selectedOption\" id=\"flexCheckChecked\">\r\n <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n \u20B9 {{data.pricing['ANNUALLY']}}\r\n </label>\r\n </div>\r\n <img class=\"defaultImage\" *ngIf=\"!data.pricing['ANNUALLY']\" [src]=\"defaultImage\" alt=\"\">\r\n </td>\r\n <td>\r\n <div class=\"form-check\" *ngIf=\"data.pricing['ONDEMAND']\">\r\n <input class=\"form-check-input\" type=\"radio\" name=\"subscription{{i}}\" [value]=\"'ONDEMAND'\" (click)=\"toggleSelection(data, 'ONDEMAND')\" [checked]=\"data.selectedOption === 'ONDEMAND'\" [(ngModel)]=\"data.selectedOption\" id=\"flexCheckChecked\">\r\n <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n \u20B9 {{data.pricing['ONDEMAND']}}\r\n </label>\r\n </div>\r\n <img class=\"defaultImage\" *ngIf=\"!data.pricing['ONDEMAND']\" [src]=\"defaultImage\" alt=\"\">\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n <div class=\"left-side mt-10\">\r\n <p class=\"heading\">Payment Plan</p>\r\n\r\n <div class=\"d-flex g-2\">\r\n <div class=\"form-check\" (click)=\"changeAnnualPaymentTerm('ANNUALLY')\">\r\n <input class=\"form-check-input\" type=\"radio\" value=\"\" name=\"payment-plan\" id=\"flexCheckChecked\" [checked]=\"admissionData.paymentPlanType === 'ANNUALLY'\">\r\n <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n Annually\r\n </label>\r\n </div>\r\n <div class=\"form-check\" (click)=\"changeAnnualPaymentTerm('TERM')\">\r\n <input class=\"form-check-input\" type=\"radio\" value=\"\" name=\"payment-plan\" id=\"flexCheckChecked\" [checked]=\"admissionData.paymentPlanType === 'TERM'\">\r\n <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n Term\r\n </label>\r\n </div>\r\n </div>\r\n\r\n <div class=\"admission\" *ngIf=\"admissionData.paymentPlanType === 'TERM'\">\r\n <mat-form-field class=\"input-text\" appearance=\"outline\">\r\n <mat-select class=\"inputStyle\" placeholder=\"--Select--\" multiple=\"true\" [(ngModel)]=\"feeStructure.termPaymentList\" (ngModelChange)=\"calculateTotalAmount()\">\r\n <mat-option *ngFor=\"let term of termPaymentList\" [value]=\"term\">term {{term.termNumber}}</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <div class=\"col-md-6 right-side\">\r\n <div class=\"heading mb-20\">\r\n Fee Calculation\r\n </div>\r\n <div class=\"d-flex justify-space mt-10 mb-15\" *ngFor=\"let config of feeStructure.feeConfigs\">\r\n <p class=\"sub-heading mb-0\">{{config.feeHead}}</p>\r\n <p class=\"amount mb-0\">\u20B9 {{config.amount}}</p>\r\n </div>\r\n\r\n <div class=\"d-flex justify-space mt-10 mb-15\" *ngFor=\"let subscripition of feeStructure.subscriptionPlans\">\r\n <p class=\"sub-heading mb-0\">{{subscripition.subName}}</p>\r\n <p class=\"amount mb-0\">\u20B9 {{subscripition.pricing[subscripition.frequency]}}</p>\r\n </div>\r\n\r\n <div class=\"total-fee\">\r\n <div class=\"heading mb-5\">\r\n Total Fee\r\n </div>\r\n <div class=\"amount\">\r\n \u20B9 {{feeStructure.totalAmount}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</section> -->\r\n\r\n\r\n<section class=\"main_payment_details_section h-100 w-100 p-2 d-flex justify-content-between\">\r\n <div class=\"left_payment_details h-100 p-2\">\r\n <div class=\"fees_section\">\r\n <div class=\"sec_title\">\r\n Fees\r\n </div>\r\n <div class=\"mt-2 all_fee_configs\">\r\n <ng-container *ngFor=\"let item of feeStructure?.feeConfig\">\r\n <div class=\"single_fee_config p-3\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"fee_title\">{{item.feeHead ? item.feeHead.name : 'N/A'}}</div>\r\n <div class=\"fee_amount\">\u20B9 {{item.amount}}</div>\r\n </div>\r\n <div *ngIf=\"item.termsList.length > 0\">\r\n <div class=\"change_selection\">\r\n <mat-radio-group aria-label=\"Select an option\" [(ngModel)]=\"item.selectedTermValue\"\r\n name=\"termOption_{{ item.feeHead.id}}\"\r\n (change)=\"changeTermValue(item)\">\r\n <mat-radio-button value=\"SINGLE\"\r\n style=\"font-family: var(--primary-font-family);font-size:13px\">Single</mat-radio-button>\r\n <mat-radio-button value=\"TERM\"\r\n style=\"font-family: var(--primary-font-family);font-size:13px\">Term</mat-radio-button>\r\n </mat-radio-group>\r\n </div>\r\n <div class=\"termCount\" *ngIf=\"item.selectedTermValue === 'TERM'\">\r\n <div class=\"check_data\">\r\n <ng-container *ngFor=\"let term of item.termsList;let i = index\">\r\n <div class=\"singleData d-flex gap-3 align-items-end\">\r\n <input type=\"checkbox\" (change)=\"addTerms($event,term)\">\r\n <div class=\"data_value\">{{getOrdinalSuffix(i+1)}} Term (\u20B9 {{term?.termAmount}})</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"subscriptions_list mt-3\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"title\">Transport Fee</div>\r\n <div class=\"selecting_types d-flex align-items-center gap-2 justify-content-end\">\r\n <div style=\"width:30%\">\r\n <mat-form-field appearance=\"outline\" class=\"input_card mt-2 w-100\" style=\"height:40px\">\r\n <input type=\"text\" matInput placeholder=\"Select Stop\" [matAutocomplete]=\"autoGrade\"\r\n [(ngModel)]=\"stopSearchText\" (input)=\"filterStops()\"\r\n style=\"font-size: 13px;font-family: var(--primary-font-family);\">\r\n <mat-autocomplete #autoGrade=\"matAutocomplete\" (optionSelected)=\"onStopSelection($event)\">\r\n <mat-option *ngFor=\"let stop of filteredStopsList\" [value]=\"stop.stopName\"\r\n style=\"font-size: 13px;font-family: var(--primary-font-family);\">\r\n {{ stop.stopName | titlecase }}\r\n </mat-option>\r\n </mat-autocomplete>\r\n </mat-form-field>\r\n </div>\r\n <div style=\"width:30%\">\r\n <mat-form-field appearance=\"outline\" class=\"input_card mt-2 w-100\" style=\"height:40px\">\r\n <input type=\"text\" matInput placeholder=\"Select Vehicle Type\" [matAutocomplete]=\"autoGrade1\"\r\n [(ngModel)]=\"vehicleTypeSearchText\" (input)=\"filtereVehicleTypes()\"\r\n style=\"font-size: 13px;font-family: var(--primary-font-family);\">\r\n <mat-autocomplete #autoGrade1=\"matAutocomplete\" (optionSelected)=\"onVehicleTypeSelection($event)\">\r\n <mat-option *ngFor=\"let stop of filteredVehicleTypesList\" [value]=\"stop.vehicleType\"\r\n style=\"font-size: 13px;font-family: var(--primary-font-family);\">\r\n {{ stop.vehicleType | titlecase }}\r\n </mat-option>\r\n </mat-autocomplete>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"list_all_subscriptions mt-2\">\r\n <ng-container *ngFor=\"let item of routeValues\">\r\n <div class=\"single_fee_config p-3\">\r\n <div class=\"d-flex gap-2 align-items-center\">\r\n <mat-checkbox [checked]=\"admissionData.selectedStopDetail === item\"\r\n (change)=\"onCheckboxChange(item, $event)\"></mat-checkbox>\r\n\r\n <div class=\"d-flex justify-content-between align-items-center\" style=\"width:92%\">\r\n <div class=\"fee_title\">\r\n {{ item.transport.route ? item.transport.route.name : 'N/A' }}\r\n <span>(<span style=\"font-size:12px;font-family: var(--primary-font-family);\">Pickup Time :</span>\r\n <span\r\n style=\"font-size:12px;font-family: var(--primary-semi-bold-font-family);\">{{getPickupTime(item.transport.busRouteStopTimings)\r\n | date:'h:mm a'}}</span>\r\n -\r\n <span style=\"font-size:12px;font-family: var(--primary-font-family);\">Drop Time :</span>\r\n <span\r\n style=\"font-size:12px;font-family: var(--primary-semi-bold-font-family);\">{{getDroptime(item.transport.busRouteStopTimings)\r\n | date:'h:mm a'}}</span>\r\n )</span>\r\n </div>\r\n <div class=\"fee_amount\">\u20B9 {{ item.charges.totalAmount }}</div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"item?.charges.termPaymentList.length > 0\">\r\n <div class=\"change_selection\" style=\"width:90%;margin:0 auto\">\r\n <mat-radio-group aria-label=\"Select an option\" [(ngModel)]=\"item.charges.selectedTermValue\"\r\n (change)=\"changeTransportTermValue(item)\" [disabled]=\"admissionData.selectedStopDetail !== item\">\r\n <mat-radio-button value=\"SINGLE\"\r\n style=\"font-family: var(--primary-font-family); font-size: 13px\">Single</mat-radio-button>\r\n <mat-radio-button value=\"TERM\"\r\n style=\"font-family: var(--primary-font-family); font-size: 13px\">Term</mat-radio-button>\r\n </mat-radio-group>\r\n </div>\r\n\r\n <div class=\"termCount\" *ngIf=\"item.charges.selectedTermValue === 'TERM'\">\r\n <div class=\"check_data\" style=\"width:75%;margin:0 auto\">\r\n <ng-container *ngFor=\"let term of item.charges.termPaymentList; let i = index\">\r\n <div class=\"singleData d-flex gap-3 align-items-end\">\r\n <input type=\"checkbox\" (change)=\"addSingleStop($event, term)\"\r\n [disabled]=\"admissionData.selectedStopDetail !== item\" />\r\n <div class=\"data_value\">{{ getOrdinalSuffix(i + 1) }} Term (\u20B9 {{term.termAmount}})</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n </div>\r\n <div class=\"subscriptions_list mt-3\" *ngIf=\"subscriptionsData.length > 0\">\r\n <div class=\"title\">Subscriptions</div>\r\n <div class=\"list_all_subscriptions mt-2\">\r\n <ng-container *ngFor=\"let item of subscriptionsData\">\r\n <div class=\"top_1\">\r\n <div class=\"d-flex align-items-center gap-3\">\r\n <mat-checkbox [checked]=\"isSubscriptionSelected(item)\"\r\n (change)=\"onSubscriptionItemChange($event, item)\"></mat-checkbox>\r\n <div class=\"subscription_title\">\r\n {{item.subscriptionTitle}}\r\n </div>\r\n </div>\r\n <div class=\"subscription_types\" style=\"width:85%;margin:auto\">\r\n <ng-container *ngFor=\"let subV of item.newPricingList;let i = index\">\r\n <div class=\"single_subscrption d-flex gap-2 mt-2\">\r\n <div class=\"single_title d-flex gap-3 align-items-center\" style=\"width:25%\">\r\n <input type=\"radio\" [checked]=\"subV.selecteStatus\"\r\n (change)=\"toggleSubscriptionSelection(item.newPricingList, i, item)\"\r\n [disabled]=\"!disableSubscriptionSelection(item)\">\r\n <div class=\"data_value\">{{subV.name | titlecase}}</div>\r\n </div>\r\n <div class=\"single_value\">\r\n {{subV.amount}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"right_payment_details h-100\">\r\n <div class=\"total_payment_details h-100 w-100 p-3\">\r\n <div class=\"mt-2 calculation_table\">\r\n <div class=\"calculation_single_part\">\r\n <div class=\"total_title\" style=\"border-bottom: 1px solid #dedede;padding-bottom: 12px;\">\r\n Total Academic Fee Breakdown\r\n </div>\r\n <ng-container *ngFor=\"let item of feeStructure.feeConfig\">\r\n <div class=\"d-flex justify-content-between align-items-center\" style=\"margin-top: 8px;\">\r\n <div class=\"fee_title\">{{item.feeHead ? item.feeHead.name : 'N/A'}}</div>\r\n <div class=\"fee_amount\" *ngIf=\"item.termsList.length === 0 || item.selectedTermValue != 'TERM'\">\r\n <span [ngClass]=\"(item?.concession != null && item?.concession?.length != 0) ? 'strikethrough' : ''\">\r\n \u20B9 {{item.amount}}\r\n </span>\r\n <span\r\n *ngIf=\"item.concession != null && item?.concession.length != 0\">({{item.appliedConcessionAmount}})</span>\r\n </div>\r\n </div>\r\n <div class=\"value fw-500\" *ngIf=\"item.termsList.length >= 0\">\r\n <div class=\"selecte_terms\">\r\n <ng-container *ngFor=\"let data of item.termsList\">\r\n <div class=\"selected_single_term d-flex align-items-center justify-content-between\" *ngIf=\"data.selected\">\r\n <div class=\"key\">\r\n Term {{data.termNumber}}\r\n </div>\r\n <div class=\"value fw-500\">\r\n \u20B9 {{data.termAmount}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"calculation_single_part\" *ngIf=\"admissionData.selectedStopDetail != null\">\r\n <div class=\"total_title\" style=\"border-bottom: 1px solid #dedede;padding-bottom: 12px;\">\r\n Transport Fee\r\n </div>\r\n <ng-container>\r\n <div class=\"d-flex justify-content-between align-items-center\" style=\"margin-top: 8px;\">\r\n <div class=\"fee_title\">{{admissionData.selectedStopDetail?.charges?.vehicleType ?\r\n admissionData.selectedStopDetail?.charges?.vehicleType?.name : 'N/A'}}</div>\r\n <div class=\"fee_amount\"\r\n *ngIf=\"admissionData.selectedStopDetail?.charges?.termPaymentList?.length === 0 || admissionData.selectedStopDetail?.charges?.selectedTermValue != 'TERM'\">\r\n \u20B9\r\n {{admissionData.selectedStopDetail?.charges?.totalAmount}}\r\n </div>\r\n </div>\r\n <div class=\"value fw-500\" *ngIf=\"admissionData.selectedStopDetail?.charges?.termPaymentList?.length >= 0\">\r\n <div class=\"selecte_terms\">\r\n <ng-container *ngFor=\"let data of admissionData.selectedStopDetail?.charges?.termPaymentList\">\r\n <div class=\"selected_single_term d-flex align-items-center justify-content-between\"\r\n *ngIf=\"data.selected\">\r\n <div class=\"key\">\r\n Term {{data.termNumber}}\r\n </div>\r\n <div class=\"value fw-500\">\r\n \u20B9 {{data.termAmount}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"calculation_single_part\" *ngIf=\"hasActiveSubscriptions()\">\r\n <div class=\"new_title mt-2\" style=\"border-bottom: 1px solid #dedede;padding-bottom: 12px;\">\r\n Subscriptions\r\n </div>\r\n <div class=\"listing_selected_suscriptions mt-2\">\r\n <ng-container *ngFor=\"let item of admissionData.subscriptionPlans\">\r\n <div class=\"fee_title\">{{item.subName | titlecase}}</div>\r\n <ng-container>\r\n <div class=\"single_payment_calculation d-flex justify-content-between align-items-center mb-1\">\r\n <div class=\"key\">\r\n {{item.frequency | titlecase}}\r\n </div>\r\n <div class=\"value fw-500\">\r\n \u20B9 {{item.pricing[item.frequency]}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"footer_section total_container\">\r\n <div class=\"footer_title\">Grand Total Fee</div>\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n \u20B9 {{feeStructure?.totalFee}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</section>", styles: [".left_payment_details{width:55%;overflow-y:scroll}.right_payment_details{width:45%;padding:10px}.sec_title{font-size:16px;font-family:var(--primary-semi-bold-font-family);font-weight:500;color:#000}.single_fee_config{background-color:#f1f7ff99;padding:10px;box-shadow:0 0 2px #d3d3d3;border-radius:8px;margin-bottom:10px}.fee_title{font-size:14.5px;font-family:var(--primary-font-family);color:#3a3838;font-weight:500}.fee_amount,.fee_amount span{font-size:14.5px;font-family:var(--primary-semi-bold-font-family);color:#000;font-weight:500}.total_payment_details{background:#faf5f199;box-shadow:0 0 2px #d3d3d3;border-radius:8px}.total_title{font-size:20px;font-family:var(--primary-semi-bold-font-family);color:#000;font-weight:500;line-height:18px}.calculation_table{height:90%;overflow-y:scroll}.footer_section{height:10%;display:flex;justify-content:space-between;align-items:center}.footer_title{font-size:18px;font-family:var(--primary-font-family);font-weight:500;color:#000}.total_container{background-color:#fff;padding:10px;font-size:20px;font-weight:500;font-family:var(--primary-semi-bold-font-family);color:#000}.calculation_single_part{background-color:#fff;padding:10px;border-radius:8px;margin-bottom:10px}.selected_single_term{margin-bottom:10px}.key{font-weight:500;font-size:14px;font-family:var(--primary-font-family);color:#3a3838;margin-left:30px}.fw-500{font-weight:500;font-family:var(--primary-semi-bold-font-family);font-size:16px;margin:0!important}.check_data{width:90%;margin:auto}.singleData{margin-bottom:10px}.singleData input{width:16px;height:16px}.singleData .data_value{font-size:14px;font-family:var(--primary-font-family);color:#3a3838;font-weight:500}.title{font-family:var(--primary-semi-bold-font-family);font-weight:500;font-size:15px;color:#000}.subscription_title{font-family:var(--primary-font-family);font-weight:500;font-size:14px;color:#000}.single_value{font-size:16px;font-family:var(--primary-semi-bold-font-family);color:#000;font-weight:500}.single_title input{width:16px;height:16px}.data_value{font-size:14px;font-family:var(--primary-font-family);color:#3a3838;font-weight:500}.top_1{background:#d2d4b999;padding:10px;box-shadow:0 0 2px #d3d3d3;border-radius:8px;margin-bottom:10px}\n"] }]
|
|
3069
|
+
], template: "<!-- <section class=\"main-section\">\r\n <div class=\"row\">\r\n <div class=\"col-md-6\">\r\n <div class=\"heading left-side\">\r\n Admission Fee\r\n </div>\r\n\r\n <div class=\"left-side mt-10\" *ngFor=\"let configList of Object.keys(feeConfig)\">\r\n <div class=\"heading mb-20\">{{configList}}</div>\r\n\r\n <div class=\"d-flex justify-space mt-10 mb-15\" *ngFor=\"let config of feeConfig[configList]\">\r\n <p class=\"sub-heading mb-0\">{{config.feeHead}}</p>\r\n <p class=\"amount mb-0\">\u20B9 {{config.amount}}</p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"left-side mt-10\" *ngFor=\"let type of Object.keys(subscriptions)\">\r\n <p class=\"heading\">{{type}}</p>\r\n\r\n <table class=\"subscription-table w-100\">\r\n <thead>\r\n <th>Subscription Title</th>\r\n <th>Monthly</th>\r\n <th>Quaterly</th>\r\n <th>Yearly</th>\r\n <th>On Demand</th>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let data of subscriptions[type];let i = index\">\r\n <td>{{data.subName}}</td>\r\n <td>\r\n <div class=\"form-check\" *ngIf=\"data.pricing['QUARTERLY']\">\r\n <input class=\"form-check-input\" type=\"radio\" name=\"subscription{{i}}\" [value]=\"'MONTHLY'\" (click)=\"toggleSelection(data, 'MONTHLY')\" [checked]=\"data.selectedOption === 'MONTHLY'\" [(ngModel)]=\"data.selectedOption\" id=\"flexRadioDefault2\">\r\n <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n \u20B9 {{data.pricing['MONTHLY']}}\r\n </label>\r\n </div>\r\n <img class=\"defaultImage\" *ngIf=\"!data.pricing['QUARTERLY']\" [src]=\"defaultImage\" alt=\"\">\r\n </td>\r\n <td>\r\n <div class=\"form-check\" *ngIf=\"data.pricing['MONTHLY']\">\r\n <input class=\"form-check-input\" type=\"radio\" name=\"subscription{{i}}\" [value]=\"'QUARTERLY'\" (click)=\"toggleSelection(data, 'QUARTERLY')\" [checked]=\"data.selectedOption === 'QUARTERLY'\" [(ngModel)]=\"data.selectedOption\" id=\"flexCheckChecked\">\r\n <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n \u20B9 {{data.pricing['QUARTERLY']}}\r\n </label>\r\n <img class=\"defaultImage\" *ngIf=\"!data.pricing['MONTHLY']\" [src]=\"defaultImage\" alt=\"\">\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"form-check\" *ngIf=\"data.pricing['ANNUALLY']\">\r\n <input class=\"form-check-input\" type=\"radio\" name=\"subscription{{i}}\" [value]=\"'ANNUALLY'\" (click)=\"toggleSelection(data, 'ANNUALLY')\" [checked]=\"data.selectedOption === 'ANNUALLY'\" [(ngModel)]=\"data.selectedOption\" id=\"flexCheckChecked\">\r\n <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n \u20B9 {{data.pricing['ANNUALLY']}}\r\n </label>\r\n </div>\r\n <img class=\"defaultImage\" *ngIf=\"!data.pricing['ANNUALLY']\" [src]=\"defaultImage\" alt=\"\">\r\n </td>\r\n <td>\r\n <div class=\"form-check\" *ngIf=\"data.pricing['ONDEMAND']\">\r\n <input class=\"form-check-input\" type=\"radio\" name=\"subscription{{i}}\" [value]=\"'ONDEMAND'\" (click)=\"toggleSelection(data, 'ONDEMAND')\" [checked]=\"data.selectedOption === 'ONDEMAND'\" [(ngModel)]=\"data.selectedOption\" id=\"flexCheckChecked\">\r\n <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n \u20B9 {{data.pricing['ONDEMAND']}}\r\n </label>\r\n </div>\r\n <img class=\"defaultImage\" *ngIf=\"!data.pricing['ONDEMAND']\" [src]=\"defaultImage\" alt=\"\">\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n <div class=\"left-side mt-10\">\r\n <p class=\"heading\">Payment Plan</p>\r\n\r\n <div class=\"d-flex g-2\">\r\n <div class=\"form-check\" (click)=\"changeAnnualPaymentTerm('ANNUALLY')\">\r\n <input class=\"form-check-input\" type=\"radio\" value=\"\" name=\"payment-plan\" id=\"flexCheckChecked\" [checked]=\"admissionData.paymentPlanType === 'ANNUALLY'\">\r\n <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n Annually\r\n </label>\r\n </div>\r\n <div class=\"form-check\" (click)=\"changeAnnualPaymentTerm('TERM')\">\r\n <input class=\"form-check-input\" type=\"radio\" value=\"\" name=\"payment-plan\" id=\"flexCheckChecked\" [checked]=\"admissionData.paymentPlanType === 'TERM'\">\r\n <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n Term\r\n </label>\r\n </div>\r\n </div>\r\n\r\n <div class=\"admission\" *ngIf=\"admissionData.paymentPlanType === 'TERM'\">\r\n <mat-form-field class=\"input-text\" appearance=\"outline\">\r\n <mat-select class=\"inputStyle\" placeholder=\"--Select--\" multiple=\"true\" [(ngModel)]=\"feeStructure.termPaymentList\" (ngModelChange)=\"calculateTotalAmount()\">\r\n <mat-option *ngFor=\"let term of termPaymentList\" [value]=\"term\">term {{term.termNumber}}</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <div class=\"col-md-6 right-side\">\r\n <div class=\"heading mb-20\">\r\n Fee Calculation\r\n </div>\r\n <div class=\"d-flex justify-space mt-10 mb-15\" *ngFor=\"let config of feeStructure.feeConfigs\">\r\n <p class=\"sub-heading mb-0\">{{config.feeHead}}</p>\r\n <p class=\"amount mb-0\">\u20B9 {{config.amount}}</p>\r\n </div>\r\n\r\n <div class=\"d-flex justify-space mt-10 mb-15\" *ngFor=\"let subscripition of feeStructure.subscriptionPlans\">\r\n <p class=\"sub-heading mb-0\">{{subscripition.subName}}</p>\r\n <p class=\"amount mb-0\">\u20B9 {{subscripition.pricing[subscripition.frequency]}}</p>\r\n </div>\r\n\r\n <div class=\"total-fee\">\r\n <div class=\"heading mb-5\">\r\n Total Fee\r\n </div>\r\n <div class=\"amount\">\r\n \u20B9 {{feeStructure.totalAmount}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</section> -->\r\n\r\n\r\n<section class=\"main_payment_details_section h-100 w-100 p-2 d-flex justify-content-between\">\r\n <div class=\"left_payment_details h-100 p-2\">\r\n <div class=\"fees_section\">\r\n <div class=\"sec_title\">\r\n Fees\r\n </div>\r\n <div class=\"mt-2 all_fee_configs\">\r\n <ng-container *ngFor=\"let item of feeStructure?.feeConfig\">\r\n <div class=\"single_fee_config p-3\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"fee_title\">{{item.feeHead ? item.feeHead.name : 'N/A'}}</div>\r\n <div class=\"fee_amount\">\u20B9 {{item.amount}}</div>\r\n </div>\r\n <div *ngIf=\"item.termsList.length > 0\">\r\n <div class=\"change_selection\">\r\n <mat-radio-group aria-label=\"Select an option\" [(ngModel)]=\"item.selectedTermValue\"\r\n name=\"termOption_{{ item.feeHead.id}}\"\r\n (change)=\"changeTermValue(item)\">\r\n <mat-radio-button value=\"SINGLE\"\r\n style=\"font-family: var(--primary-font-family);font-size:13px\">Single</mat-radio-button>\r\n <mat-radio-button value=\"TERM\"\r\n style=\"font-family: var(--primary-font-family);font-size:13px\">Term</mat-radio-button>\r\n </mat-radio-group>\r\n </div>\r\n <div class=\"termCount\" *ngIf=\"item.selectedTermValue === 'TERM'\">\r\n <div class=\"check_data\">\r\n <ng-container *ngFor=\"let term of item.termsList;let i = index\">\r\n <div class=\"singleData d-flex gap-3 align-items-end\">\r\n <input type=\"checkbox\" (change)=\"addTerms($event,term)\" [checked]=\"term.selected\">\r\n <div class=\"data_value\">{{getOrdinalSuffix(i+1)}} Term (\u20B9 {{term?.termAmount}})</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"subscriptions_list mt-3\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"title\">Transport Fee</div>\r\n <div class=\"selecting_types d-flex align-items-center gap-2 justify-content-end\">\r\n <div style=\"width:30%\">\r\n <mat-form-field appearance=\"outline\" class=\"input_card mt-2 w-100\" style=\"height:40px\">\r\n <input type=\"text\" matInput placeholder=\"Select Stop\" [matAutocomplete]=\"autoGrade\"\r\n [(ngModel)]=\"stopSearchText\" (input)=\"filterStops()\"\r\n style=\"font-size: 13px;font-family: var(--primary-font-family);\">\r\n <mat-autocomplete #autoGrade=\"matAutocomplete\" (optionSelected)=\"onStopSelection($event)\">\r\n <mat-option *ngFor=\"let stop of filteredStopsList\" [value]=\"stop.stopName\"\r\n style=\"font-size: 13px;font-family: var(--primary-font-family);\">\r\n {{ stop.stopName | titlecase }}\r\n </mat-option>\r\n </mat-autocomplete>\r\n </mat-form-field>\r\n </div>\r\n <div style=\"width:30%\">\r\n <mat-form-field appearance=\"outline\" class=\"input_card mt-2 w-100\" style=\"height:40px\">\r\n <input type=\"text\" matInput placeholder=\"Select Vehicle Type\" [matAutocomplete]=\"autoGrade1\"\r\n [(ngModel)]=\"vehicleTypeSearchText\" (input)=\"filtereVehicleTypes()\"\r\n style=\"font-size: 13px;font-family: var(--primary-font-family);\">\r\n <mat-autocomplete #autoGrade1=\"matAutocomplete\" (optionSelected)=\"onVehicleTypeSelection($event)\">\r\n <mat-option *ngFor=\"let stop of filteredVehicleTypesList\" [value]=\"stop.vehicleType\"\r\n style=\"font-size: 13px;font-family: var(--primary-font-family);\">\r\n {{ stop.vehicleType | titlecase }}\r\n </mat-option>\r\n </mat-autocomplete>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"list_all_subscriptions mt-2\">\r\n <ng-container *ngFor=\"let item of routeValues\">\r\n <div class=\"single_fee_config p-3\">\r\n <div class=\"d-flex gap-2 align-items-center\">\r\n <mat-checkbox [checked]=\"admissionData.selectedStopDetail === item\"\r\n (change)=\"onCheckboxChange(item, $event)\"></mat-checkbox>\r\n\r\n <div class=\"d-flex justify-content-between align-items-center\" style=\"width:92%\">\r\n <div class=\"fee_title\">\r\n {{ item.transport.route ? item.transport.route.name : 'N/A' }}\r\n <span>(<span style=\"font-size:12px;font-family: var(--primary-font-family);\">Pickup Time :</span>\r\n <span\r\n style=\"font-size:12px;font-family: var(--primary-semi-bold-font-family);\">{{getPickupTime(item.transport.busRouteStopTimings)\r\n | date:'h:mm a'}}</span>\r\n -\r\n <span style=\"font-size:12px;font-family: var(--primary-font-family);\">Drop Time :</span>\r\n <span\r\n style=\"font-size:12px;font-family: var(--primary-semi-bold-font-family);\">{{getDroptime(item.transport.busRouteStopTimings)\r\n | date:'h:mm a'}}</span>\r\n )</span>\r\n </div>\r\n <div class=\"fee_amount\">\u20B9 {{ item.charges.totalAmount }}</div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"item?.charges.termPaymentList.length > 0\">\r\n <div class=\"change_selection\" style=\"width:90%;margin:0 auto\">\r\n <mat-radio-group aria-label=\"Select an option\" [(ngModel)]=\"item.charges.selectedTermValue\"\r\n (change)=\"changeTransportTermValue(item)\" [disabled]=\"admissionData.selectedStopDetail !== item\">\r\n <mat-radio-button value=\"SINGLE\"\r\n style=\"font-family: var(--primary-font-family); font-size: 13px\">Single</mat-radio-button>\r\n <mat-radio-button value=\"TERM\"\r\n style=\"font-family: var(--primary-font-family); font-size: 13px\">Term</mat-radio-button>\r\n </mat-radio-group>\r\n </div>\r\n\r\n <div class=\"termCount\" *ngIf=\"item.charges.selectedTermValue === 'TERM'\">\r\n <div class=\"check_data\" style=\"width:75%;margin:0 auto\">\r\n <ng-container *ngFor=\"let term of item.charges.termPaymentList; let i = index\">\r\n <div class=\"singleData d-flex gap-3 align-items-end\">\r\n <input type=\"checkbox\" (change)=\"addSingleStop($event, term)\"\r\n [disabled]=\"admissionData.selectedStopDetail !== item\" />\r\n <div class=\"data_value\">{{ getOrdinalSuffix(i + 1) }} Term (\u20B9 {{term.termAmount}})</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n </div>\r\n <div class=\"subscriptions_list mt-3\" *ngIf=\"subscriptionsData.length > 0\">\r\n <div class=\"title\">Subscriptions</div>\r\n <div class=\"list_all_subscriptions mt-2\">\r\n <ng-container *ngFor=\"let item of subscriptionsData\">\r\n <div class=\"top_1\">\r\n <div class=\"d-flex align-items-center gap-3\">\r\n <mat-checkbox [checked]=\"isSubscriptionSelected(item)\"\r\n (change)=\"onSubscriptionItemChange($event, item)\"></mat-checkbox>\r\n <div class=\"subscription_title\">\r\n {{item.subscriptionTitle}}\r\n </div>\r\n </div>\r\n <div class=\"subscription_types\" style=\"width:85%;margin:auto\">\r\n <ng-container *ngFor=\"let subV of item.newPricingList;let i = index\">\r\n <div class=\"single_subscrption d-flex gap-2 mt-2\">\r\n <div class=\"single_title d-flex gap-3 align-items-center\" style=\"width:25%\">\r\n <input type=\"radio\" [checked]=\"subV.selecteStatus\"\r\n (change)=\"toggleSubscriptionSelection(item.newPricingList, i, item)\"\r\n [disabled]=\"!disableSubscriptionSelection(item)\">\r\n <div class=\"data_value\">{{subV.name | titlecase}}</div>\r\n </div>\r\n <div class=\"single_value\">\r\n {{subV.amount}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"right_payment_details h-100\">\r\n <div class=\"total_payment_details h-100 w-100 p-3\">\r\n <div class=\"mt-2 calculation_table\">\r\n <div class=\"calculation_single_part\">\r\n <div class=\"total_title\" style=\"border-bottom: 1px solid #dedede;padding-bottom: 12px;\">\r\n Total Academic Fee Breakdown\r\n </div>\r\n <ng-container *ngFor=\"let item of feeStructure.feeConfig\">\r\n <div class=\"d-flex justify-content-between align-items-center\" style=\"margin-top: 8px;\">\r\n <div class=\"fee_title\">{{item.feeHead ? item.feeHead.name : 'N/A'}}</div>\r\n <div class=\"fee_amount\" *ngIf=\"item.termsList.length === 0 || item.selectedTermValue != 'TERM'\">\r\n <span [ngClass]=\"(item?.concession != null && item?.concession?.length != 0) ? 'strikethrough' : ''\">\r\n \u20B9 {{item.amount}}\r\n </span>\r\n <span\r\n *ngIf=\"item.concession != null && item?.concession.length != 0\">({{item.appliedConcessionAmount}})</span>\r\n </div>\r\n </div>\r\n <div class=\"value fw-500\" *ngIf=\"item.termsList.length >= 0\">\r\n <div class=\"selecte_terms\">\r\n <ng-container *ngFor=\"let data of item.termsList\">\r\n <div class=\"selected_single_term d-flex align-items-center justify-content-between\" *ngIf=\"data.selected\">\r\n <div class=\"key\">\r\n Term {{data.termNumber}}\r\n </div>\r\n <div class=\"value fw-500\">\r\n \u20B9 {{data.termAmount}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"calculation_single_part\" *ngIf=\"admissionData.selectedStopDetail != null\">\r\n <div class=\"total_title\" style=\"border-bottom: 1px solid #dedede;padding-bottom: 12px;\">\r\n Transport Fee\r\n </div>\r\n <ng-container>\r\n <div class=\"d-flex justify-content-between align-items-center\" style=\"margin-top: 8px;\">\r\n <div class=\"fee_title\">{{admissionData.selectedStopDetail?.charges?.vehicleType ?\r\n admissionData.selectedStopDetail?.charges?.vehicleType?.name : 'N/A'}}</div>\r\n <div class=\"fee_amount\"\r\n *ngIf=\"admissionData.selectedStopDetail?.charges?.termPaymentList?.length === 0 || admissionData.selectedStopDetail?.charges?.selectedTermValue != 'TERM'\">\r\n \u20B9\r\n {{admissionData.selectedStopDetail?.charges?.totalAmount}}\r\n </div>\r\n </div>\r\n <div class=\"value fw-500\" *ngIf=\"admissionData.selectedStopDetail?.charges?.termPaymentList?.length >= 0\">\r\n <div class=\"selecte_terms\">\r\n <ng-container *ngFor=\"let data of admissionData.selectedStopDetail?.charges?.termPaymentList\">\r\n <div class=\"selected_single_term d-flex align-items-center justify-content-between\"\r\n *ngIf=\"data.selected\">\r\n <div class=\"key\">\r\n Term {{data.termNumber}}\r\n </div>\r\n <div class=\"value fw-500\">\r\n \u20B9 {{data.termAmount}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"calculation_single_part\" *ngIf=\"hasActiveSubscriptions()\">\r\n <div class=\"new_title mt-2\" style=\"border-bottom: 1px solid #dedede;padding-bottom: 12px;\">\r\n Subscriptions\r\n </div>\r\n <div class=\"listing_selected_suscriptions mt-2\">\r\n <ng-container *ngFor=\"let item of admissionData.subscriptionPlans\">\r\n <div class=\"fee_title\">{{item.subName | titlecase}}</div>\r\n <ng-container>\r\n <div class=\"single_payment_calculation d-flex justify-content-between align-items-center mb-1\">\r\n <div class=\"key\">\r\n {{item.frequency | titlecase}}\r\n </div>\r\n <div class=\"value fw-500\">\r\n \u20B9 {{item.pricing[item.frequency]}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"footer_section total_container\">\r\n <div class=\"footer_title\">Grand Total Fee</div>\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n \u20B9 {{feeStructure?.totalFee}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</section>", styles: [".left_payment_details{width:55%;overflow-y:scroll}.right_payment_details{width:45%;padding:10px}.sec_title{font-size:16px;font-family:var(--primary-semi-bold-font-family);font-weight:500;color:#000}.single_fee_config{background-color:#f1f7ff99;padding:10px;box-shadow:0 0 2px #d3d3d3;border-radius:8px;margin-bottom:10px}.fee_title{font-size:14.5px;font-family:var(--primary-font-family);color:#3a3838;font-weight:500}.fee_amount,.fee_amount span{font-size:14.5px;font-family:var(--primary-semi-bold-font-family);color:#000;font-weight:500}.total_payment_details{background:#faf5f199;box-shadow:0 0 2px #d3d3d3;border-radius:8px}.total_title{font-size:20px;font-family:var(--primary-semi-bold-font-family);color:#000;font-weight:500;line-height:18px}.calculation_table{height:90%;overflow-y:scroll}.footer_section{height:10%;display:flex;justify-content:space-between;align-items:center}.footer_title{font-size:18px;font-family:var(--primary-font-family);font-weight:500;color:#000}.total_container{background-color:#fff;padding:10px;font-size:20px;font-weight:500;font-family:var(--primary-semi-bold-font-family);color:#000}.calculation_single_part{background-color:#fff;padding:10px;border-radius:8px;margin-bottom:10px}.selected_single_term{margin-bottom:10px}.key{font-weight:500;font-size:14px;font-family:var(--primary-font-family);color:#3a3838;margin-left:30px}.fw-500{font-weight:500;font-family:var(--primary-semi-bold-font-family);font-size:16px;margin:0!important}.check_data{width:90%;margin:auto}.singleData{margin-bottom:10px}.singleData input{width:16px;height:16px}.singleData .data_value{font-size:14px;font-family:var(--primary-font-family);color:#3a3838;font-weight:500}.title{font-family:var(--primary-semi-bold-font-family);font-weight:500;font-size:15px;color:#000}.subscription_title{font-family:var(--primary-font-family);font-weight:500;font-size:14px;color:#000}.single_value{font-size:16px;font-family:var(--primary-semi-bold-font-family);color:#000;font-weight:500}.single_title input{width:16px;height:16px}.data_value{font-size:14px;font-family:var(--primary-font-family);color:#3a3838;font-weight:500}.top_1{background:#d2d4b999;padding:10px;box-shadow:0 0 2px #d3d3d3;border-radius:8px;margin-bottom:10px}\n"] }]
|
|
2909
3070
|
}], ctorParameters: () => [{ type: ElementServiceService }, { type: i2$2.MatSnackBar }], propDecorators: { admissionData: [{
|
|
2910
3071
|
type: Input
|
|
2911
3072
|
}], subscriptionsData: [{
|
|
@@ -4830,7 +4991,7 @@ class ServiceSectionComponent extends BaseSection {
|
|
|
4830
4991
|
}, 100);
|
|
4831
4992
|
}
|
|
4832
4993
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ServiceSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4833
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ServiceSectionComponent, isStandalone: true, selector: "simpo-service-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div [spacingAround]=\"stylesLayout\">\r\n <div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" [simpoCorner]=\"style?.layout?.spacingAround && style?.layout?.spacingAround != 'none' && style?.layout?.spacingAround != 'remove' ? style?.corners : Corner.None\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"container-fluid d-flex flex-column\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <div
|
|
4994
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ServiceSectionComponent, isStandalone: true, selector: "simpo-service-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div [spacingAround]=\"stylesLayout\">\r\n <div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" [simpoCorner]=\"style?.layout?.spacingAround && style?.layout?.spacingAround != 'none' && style?.layout?.spacingAround != 'remove' ? style?.corners : Corner.None\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"container-fluid d-flex flex-column\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <div [simpoContentTitleSpace]=\"headingSpace\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\" [class.row-scroll]=\"style?.direction === 'ROW'\" #container>\r\n <div class=\"cards\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\r\n *ngFor=\"let service of content?.listItem?.data\">\r\n <ng-container *ngIf=\"style?.textPosition === TextPosition.BELOW_IMAGE\">\r\n <simpo-below-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-below-image-card>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.textPosition === TextPosition.TOP_OF_IMAGE\">\r\n <simpo-top-of-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-top-of-image-card>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.textPosition === TextPosition.COVERING_IMAGE\">\r\n <simpo-covering-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-covering-image-card>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: [".total-container{height:auto;position:relative}.mb-1{margin-bottom:1.5rem!important}.cards{padding-bottom:10px}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.row-scroll{flex-wrap:nowrap!important;width:100%;overflow-x:scroll}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: BelowImageCardComponent, selector: "simpo-below-image-card", inputs: ["data", "styles", "content", "componentId", "button", "edit"] }, { kind: "component", type: TopOfImageCardComponent, selector: "simpo-top-of-image-card", inputs: ["data", "styles", "content", "componentId", "button", "edit"] }, { kind: "component", type: CoveringImageCardComponent, selector: "simpo-covering-image-card", inputs: ["data", "styles", "content", "componentId", "button", "edit"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type:
|
|
4834
4995
|
//directive
|
|
4835
4996
|
ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ColumnDirectiveDirective, selector: "[simpoColumnDirective]", inputs: ["simpoColumnDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround"] }] }); }
|
|
4836
4997
|
}
|
|
@@ -4863,7 +5024,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
4863
5024
|
SanitizeHtmlPipe,
|
|
4864
5025
|
SpacingHorizontalDirective,
|
|
4865
5026
|
SpacingAroundDirective
|
|
4866
|
-
], template: "<section [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div [spacingAround]=\"stylesLayout\">\r\n <div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" [simpoCorner]=\"style?.layout?.spacingAround && style?.layout?.spacingAround != 'none' && style?.layout?.spacingAround != 'remove' ? style?.corners : Corner.None\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"container-fluid d-flex flex-column\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <div
|
|
5027
|
+
], template: "<section [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div [spacingAround]=\"stylesLayout\">\r\n <div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" [simpoCorner]=\"style?.layout?.spacingAround && style?.layout?.spacingAround != 'none' && style?.layout?.spacingAround != 'remove' ? style?.corners : Corner.None\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"container-fluid d-flex flex-column\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <div [simpoContentTitleSpace]=\"headingSpace\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\" [class.row-scroll]=\"style?.direction === 'ROW'\" #container>\r\n <div class=\"cards\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\r\n *ngFor=\"let service of content?.listItem?.data\">\r\n <ng-container *ngIf=\"style?.textPosition === TextPosition.BELOW_IMAGE\">\r\n <simpo-below-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-below-image-card>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.textPosition === TextPosition.TOP_OF_IMAGE\">\r\n <simpo-top-of-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-top-of-image-card>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.textPosition === TextPosition.COVERING_IMAGE\">\r\n <simpo-covering-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-covering-image-card>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: [".total-container{height:auto;position:relative}.mb-1{margin-bottom:1.5rem!important}.cards{padding-bottom:10px}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.row-scroll{flex-wrap:nowrap!important;width:100%;overflow-x:scroll}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"] }]
|
|
4867
5028
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
4868
5029
|
type: Input
|
|
4869
5030
|
}], index: [{
|
|
@@ -11080,6 +11241,8 @@ class RegistrationFormComponent extends BaseSection {
|
|
|
11080
11241
|
"subscriptionPlans": admissionData.subscriptionPlans
|
|
11081
11242
|
};
|
|
11082
11243
|
this.restService.createPaymentLink(payload).subscribe((res) => {
|
|
11244
|
+
localStorage.removeItem('selectedStop');
|
|
11245
|
+
localStorage.removeItem('selectedVehicle');
|
|
11083
11246
|
this._eventService.cashFreeEvent.emit({ response: res, paymentType: 'ADMISSION' });
|
|
11084
11247
|
});
|
|
11085
11248
|
});
|
|
@@ -11822,7 +11985,7 @@ class MovingTextComponent extends BaseSection {
|
|
|
11822
11985
|
this.alternateDirection = true;
|
|
11823
11986
|
}
|
|
11824
11987
|
ngOnInit() {
|
|
11825
|
-
if (this.data?.styles?.
|
|
11988
|
+
if (this.data?.styles?.headlineAnimationType === 'SoftTransition' &&
|
|
11826
11989
|
this.data?.content?.listItem?.data?.length) {
|
|
11827
11990
|
setTimeout(() => {
|
|
11828
11991
|
this.startAnimationCycle();
|
|
@@ -11830,7 +11993,7 @@ class MovingTextComponent extends BaseSection {
|
|
|
11830
11993
|
}
|
|
11831
11994
|
}
|
|
11832
11995
|
ngOnChanges() {
|
|
11833
|
-
if (this.data?.styles?.
|
|
11996
|
+
if (this.data?.styles?.headlineAnimationType === 'SoftTransition') {
|
|
11834
11997
|
setTimeout(() => {
|
|
11835
11998
|
this.startAnimationCycle();
|
|
11836
11999
|
}, 100);
|
|
@@ -11879,7 +12042,7 @@ class MovingTextComponent extends BaseSection {
|
|
|
11879
12042
|
}, 3000);
|
|
11880
12043
|
}
|
|
11881
12044
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: MovingTextComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11882
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: MovingTextComponent, isStandalone: true, selector: "simpo-moving-text", inputs: { data: "data", edit: "edit", delete: "delete", customClass: "customClass", index: "index" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<section class=\"main-container\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\" [attr.style]=\"customClass\">\r\n <div class=\"slider-wrapper px-2 py-2 d-flex align-items-center justify-content-between\"
|
|
12045
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: MovingTextComponent, isStandalone: true, selector: "simpo-moving-text", inputs: { data: "data", edit: "edit", delete: "delete", customClass: "customClass", index: "index" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<section class=\"main-container\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\" [attr.style]=\"customClass\">\r\n <div class=\"slider-wrapper px-2 py-2 d-flex align-items-center justify-content-between\"\r\n [style.backgroundColor]=\"data?.styles?.background?.accentColor\">\r\n <div class=\"slider-track w-100 d-flex justify-content-between align-items-center\"\r\n *ngIf=\"data?.styles?.headlineAnimationType == 'InfiniteScroll'\">\r\n <ng-container *ngFor=\"let item of data?.content?.listItem?.data; let i = index\">\r\n <div class=\"sliding-text\">\r\n {{item.inputText[0].value}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.styles?.headlineAnimationType == 'SoftTransition'\" class=\"list-container\">\r\n <ng-container *ngFor=\"let item of data?.content?.listItem?.data; let i = index\">\r\n <div class=\"list-item d-flex align-items-center justify-content-center w-100\" [ngClass]=\"{\r\n 'active': currentIndex === i,\r\n 'fade-in-left': animationDirection === 'left' && currentIndex === i,\r\n 'fade-in-right': animationDirection === 'right' && currentIndex === i\r\n }\">\r\n {{item.inputText[0].value}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n <ng-container *ngIf=\"data?.styles?.headlineAnimationType == 'NoEffect'\">\r\n <ng-container *ngFor=\"let item of data?.content?.listItem?.data\">\r\n <div class=\"d-flex align-items-center justify-content-center w-100\">\r\n {{item.inputText[0].value}}\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n <!-- Your existing edit/delete elements -->\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".main-container{position:relative;height:auto}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.slider-wrapper{position:relative;overflow:hidden}.slider-track{display:flex;gap:2rem;height:40px;width:max-content;animation:scrollLeft 30s linear infinite;animation-play-state:running;will-change:transform}.slider-track:hover{animation-play-state:paused}.sliding-text{flex-shrink:0;white-space:nowrap;padding:0 1rem;position:relative}@keyframes scrollLeft{0%{transform:translate(100%)}to{transform:translate(-100%)}}.list-container{position:relative;width:100%;height:40px;overflow:hidden;display:flex;align-items:center;justify-content:center}.list-item{position:absolute;width:100%;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .8s ease,transform .8s ease;text-align:center}.list-item.active{opacity:1;visibility:visible}.fade-in-left{animation:fadeInLeft .8s forwards}.fade-out-left{animation:fadeOutLeft .8s forwards}.fade-in-right{animation:fadeInRight .8s forwards}.fade-out-right{animation:fadeOutRight .8s forwards}@keyframes fadeInLeft{0%{opacity:0;transform:translate(-100px)}to{opacity:1;transform:translate(0)}}@keyframes fadeOutLeft{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-100px)}}@keyframes fadeInRight{0%{opacity:0;transform:translate(100px)}to{opacity:1;transform:translate(0)}}@keyframes fadeOutRight{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100px)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }] }); }
|
|
11883
12046
|
}
|
|
11884
12047
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: MovingTextComponent, decorators: [{
|
|
11885
12048
|
type: Component,
|
|
@@ -11891,7 +12054,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
11891
12054
|
SimpoHoverBorderDirective,
|
|
11892
12055
|
HoverDirective,
|
|
11893
12056
|
TextBackgroundDirectiveDirective,
|
|
11894
|
-
], template: "<section class=\"main-container\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\" [attr.style]=\"customClass\">\r\n <div class=\"slider-wrapper px-2 py-2 d-flex align-items-center justify-content-between\"
|
|
12057
|
+
], template: "<section class=\"main-container\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\" [attr.style]=\"customClass\">\r\n <div class=\"slider-wrapper px-2 py-2 d-flex align-items-center justify-content-between\"\r\n [style.backgroundColor]=\"data?.styles?.background?.accentColor\">\r\n <div class=\"slider-track w-100 d-flex justify-content-between align-items-center\"\r\n *ngIf=\"data?.styles?.headlineAnimationType == 'InfiniteScroll'\">\r\n <ng-container *ngFor=\"let item of data?.content?.listItem?.data; let i = index\">\r\n <div class=\"sliding-text\">\r\n {{item.inputText[0].value}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.styles?.headlineAnimationType == 'SoftTransition'\" class=\"list-container\">\r\n <ng-container *ngFor=\"let item of data?.content?.listItem?.data; let i = index\">\r\n <div class=\"list-item d-flex align-items-center justify-content-center w-100\" [ngClass]=\"{\r\n 'active': currentIndex === i,\r\n 'fade-in-left': animationDirection === 'left' && currentIndex === i,\r\n 'fade-in-right': animationDirection === 'right' && currentIndex === i\r\n }\">\r\n {{item.inputText[0].value}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n <ng-container *ngIf=\"data?.styles?.headlineAnimationType == 'NoEffect'\">\r\n <ng-container *ngFor=\"let item of data?.content?.listItem?.data\">\r\n <div class=\"d-flex align-items-center justify-content-center w-100\">\r\n {{item.inputText[0].value}}\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n <!-- Your existing edit/delete elements -->\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".main-container{position:relative;height:auto}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.slider-wrapper{position:relative;overflow:hidden}.slider-track{display:flex;gap:2rem;height:40px;width:max-content;animation:scrollLeft 30s linear infinite;animation-play-state:running;will-change:transform}.slider-track:hover{animation-play-state:paused}.sliding-text{flex-shrink:0;white-space:nowrap;padding:0 1rem;position:relative}@keyframes scrollLeft{0%{transform:translate(100%)}to{transform:translate(-100%)}}.list-container{position:relative;width:100%;height:40px;overflow:hidden;display:flex;align-items:center;justify-content:center}.list-item{position:absolute;width:100%;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .8s ease,transform .8s ease;text-align:center}.list-item.active{opacity:1;visibility:visible}.fade-in-left{animation:fadeInLeft .8s forwards}.fade-out-left{animation:fadeOutLeft .8s forwards}.fade-in-right{animation:fadeInRight .8s forwards}.fade-out-right{animation:fadeOutRight .8s forwards}@keyframes fadeInLeft{0%{opacity:0;transform:translate(-100px)}to{opacity:1;transform:translate(0)}}@keyframes fadeOutLeft{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-100px)}}@keyframes fadeInRight{0%{opacity:0;transform:translate(100px)}to{opacity:1;transform:translate(0)}}@keyframes fadeOutRight{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100px)}}\n"] }]
|
|
11895
12058
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
11896
12059
|
type: Input
|
|
11897
12060
|
}], edit: [{
|
|
@@ -12549,7 +12712,7 @@ class SmallProductListingComponent {
|
|
|
12549
12712
|
return BUSINESS_CONSTANTS.CURRENCY;
|
|
12550
12713
|
}
|
|
12551
12714
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: SmallProductListingComponent, deps: [{ token: CartService }, { token: i2$4.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12552
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: SmallProductListingComponent, isStandalone: true, selector: "simpo-small-product-listing", inputs: { product: "product", data: "data", isScrollable: "isScrollable", isCategoryProductList: "isCategoryProductList", customClass: "customClass" }, ngImport: i0, template: "<div class=\"product\" [ngClass]=\"{'width' : isScrollable, 'adjustHeightWidth': isCategoryProductList}\" [style.opacity]=\"product?.itemInventory?.openingStock == 0 ? 0.5 : 1\" (click)=\"goToProductDetail(product)\" [attr.style]=\"customClass\">\r\n <div class=\"prod-img\">\r\n <image-loading [imageUrl]=\"product.itemImages?.[0]?.imgUrl\" [hash]=\"product.itemImages?.[0]?.blurhash\" [theme]=\"data?.styles?.theme\"></image-loading>\r\n <div class=\"discount\" [style.backgroundColor]=\"data?.styles?.background?.color\" [simpoColor]=\"data?.styles?.background?.color\"\r\n *ngIf=\"getPercentage(product) > '0'\">{{getPercentage(product)}}% off</div>\r\n </div>\r\n <div class=\"p-2 h-40\">\r\n <span class=\"trim-text color\">{{product.name}}</span>\r\n <div class=\"bottom\">\r\n <span class=\"m-1\">\r\n <span class=\"color\" *ngIf=\"product?.price?.discountedPrice && product.price.discountedPrice > 0\"><span [innerHTML]=\"currency\"></span> {{product?.price?.discountedPrice ?? 0}}</span>\r\n <span class=\"color\" [ngClass]=\"{'strike-through' : product?.price?.discountedPrice && product.price.discountedPrice > 0 }\"><span [innerHTML]=\"currency\"></span> {{product?.price?.sellingPrice ?? 0}}</span>\r\n </span>\r\n <div class=\"add-to-cart\"\r\n [style.borderColor]=\"data.styles?.background?.accentColor\"\r\n [ngClass]=\"{'justify-content-between p-0 d-flex': product.quantity, 'justify-content-center': !product.quantity}\" (click)=\"removeDefault($event)\">\r\n <ng-container *ngIf=\"product?.itemInventory?.openingStock\">\r\n <ng-container *ngIf=\"!product.quantity\">\r\n <div (click)=\"addItemToCart($event, product, 'ADD')\" [style.color]=\"data.styles?.background?.accentColor\">Add to Cart</div>\r\n </ng-container>\r\n <ng-container *ngIf=\"product.quantity\">\r\n <span class=\"quantity-btn\" (click)=\"addItemToCart($event, product, 'SUBSTRACT')\" [style.backgroundColor]=\"getSupportingColor(data.styles?.background?.accentColor)\" [style.color]=\"data.styles?.background?.accentColor\">-</span>\r\n <span class=\"quantity\" [style.color]=\"data.styles?.background?.accentColor\">{{product.quantity}}</span>\r\n <span class=\"quantity-btn\" (click)=\"addItemToCart($event, product, 'ADD')\" [style.backgroundColor]=\"getSupportingColor(data.styles?.background?.accentColor)\" [style.color]=\"data.styles?.background?.accentColor\">+</span>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"!product?.itemInventory?.openingStock\">\r\n <span class=\"d-flex align-items-center justify-content-center w-100\">\r\n <mat-icon>notification_important</mat-icon>\r\n <span class=\"ml-2\">Notify</span>\r\n </span>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- <ng-template #loadingScreen>\r\n <ngx-skeleton-loader *ngIf=\"filterLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '100%',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\" />\r\n</ng-template> -->\r\n", styles: [".product{position:relative;display:flex;flex-direction:column;cursor:pointer;margin-bottom:10px;border-radius:10px;overflow:hidden;height:350px;background-color:#fff}.product .prod-img{position:relative;height:55%;width:100%;overflow:hidden;border:1.8px solid;border-radius:10px;border-color:#e5e7eb}.product .prod-img img{height:100%;width:100%;object-fit:cover}.width{margin-right:10px;min-width:195px;max-width:195px}.styling{height:30px;width:30px;border-radius:50%;background-color:#fff;position:absolute;bottom:0;right:-12px}.strike-through{text-decoration:line-through;color:#d3d3d3;font-size:12px;margin-left:5px;position:relative}.add-to-cart{width:100%;cursor:pointer;background-color:#fff;border:1.5px solid transparent;border-radius:5px;padding:5px;text-align:center;align-items:center}.add-to-cart .quantity-btn{padding:5px 10px;font-weight:700}.discount{position:absolute;top:0;padding:5px;width:60px;text-align:center;font-size:12px;border-bottom-right-radius:3px}@media screen and (max-width: 475px){.width{max-width:160px;min-width:160px;height:300px}.adjustHeightWidth{max-width:100%;min-width:100%}}.h-40{height:45%;position:relative}.bottom{position:absolute;bottom:10px;width:93%;display:flex;flex-direction:column}.discount-price{font-weight:600;font-size:14px}.color{color:#000}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ImageLoadingComponent, selector: "image-loading", inputs: ["hash", "imageUrl", "index", "product", "theme"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }] }); }
|
|
12715
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: SmallProductListingComponent, isStandalone: true, selector: "simpo-small-product-listing", inputs: { product: "product", data: "data", isScrollable: "isScrollable", isCategoryProductList: "isCategoryProductList", customClass: "customClass" }, ngImport: i0, template: "<div class=\"product\" [ngClass]=\"{'width' : isScrollable, 'adjustHeightWidth': isCategoryProductList}\" [style.opacity]=\"product?.itemInventory?.openingStock == 0 ? 0.5 : 1\" (click)=\"goToProductDetail(product)\" [attr.style]=\"customClass\">\r\n <div class=\"prod-img\">\r\n <image-loading [imageUrl]=\"product.itemImages?.[0]?.imgUrl\" [hash]=\"product.itemImages?.[0]?.blurhash\" [theme]=\"data?.styles?.theme\"></image-loading>\r\n <div class=\"discount\" [style.backgroundColor]=\"data?.styles?.background?.color\" [simpoColor]=\"data?.styles?.background?.color\"\r\n *ngIf=\"getPercentage(product) > '0'\">{{getPercentage(product)}}% off</div>\r\n </div>\r\n <div class=\"p-2 h-40\">\r\n <span class=\"trim-text color\">{{product.name}}</span>\r\n <div class=\"bottom\">\r\n <span class=\"m-1\">\r\n <span class=\"color\" *ngIf=\"product?.price?.discountedPrice && product.price.discountedPrice > 0\"><span [innerHTML]=\"currency\"></span> {{product?.price?.discountedPrice ?? 0}}</span>\r\n <span class=\"color\" [ngClass]=\"{'strike-through' : product?.price?.discountedPrice && product.price.discountedPrice > 0 }\"><span [innerHTML]=\"currency\"></span> {{product?.price?.sellingPrice ?? 0}}</span>\r\n </span>\r\n <div class=\"add-to-cart\"\r\n [style.borderColor]=\"data.styles?.background?.accentColor\"\r\n [ngClass]=\"{'justify-content-between p-0 d-flex': product.quantity, 'justify-content-center': !product.quantity}\" (click)=\"removeDefault($event)\">\r\n <ng-container *ngIf=\"product?.itemInventory?.openingStock\">\r\n <ng-container *ngIf=\"!product.quantity\">\r\n <div (click)=\"addItemToCart($event, product, 'ADD')\" [style.color]=\"data.styles?.background?.accentColor\">Add to Cart</div>\r\n </ng-container>\r\n <ng-container *ngIf=\"product.quantity\">\r\n <span class=\"quantity-btn\" (click)=\"addItemToCart($event, product, 'SUBSTRACT')\" [style.backgroundColor]=\"getSupportingColor(data.styles?.background?.accentColor)\" [style.color]=\"data.styles?.background?.accentColor\">-</span>\r\n <span class=\"quantity\" [style.color]=\"data.styles?.background?.accentColor\">{{product.quantity}}</span>\r\n <span class=\"quantity-btn\" (click)=\"addItemToCart($event, product, 'ADD')\" [style.backgroundColor]=\"getSupportingColor(data.styles?.background?.accentColor)\" [style.color]=\"data.styles?.background?.accentColor\">+</span>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"!product?.itemInventory?.openingStock\">\r\n <span class=\"d-flex align-items-center justify-content-center w-100\">\r\n <mat-icon>notification_important</mat-icon>\r\n <span class=\"ml-2\">Notify</span>\r\n </span>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- <ng-template #loadingScreen>\r\n <ngx-skeleton-loader *ngIf=\"filterLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '100%',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\" />\r\n</ng-template> -->\r\n", styles: [".product{position:relative;display:flex;flex-direction:column;cursor:pointer;margin-bottom:10px;border-radius:10px;overflow:hidden;height:350px;background-color:#fff}.product .prod-img{position:relative;height:55%;width:100%;overflow:hidden;border:1.8px solid;border-radius:10px;border-color:#e5e7eb}.product .prod-img img{height:100%;width:100%;object-fit:cover}.width{margin-right:10px;min-width:195px;max-width:195px}.styling{height:30px;width:30px;border-radius:50%;background-color:#fff;position:absolute;bottom:0;right:-12px}.strike-through{text-decoration:line-through;color:#d3d3d3;font-size:12px;margin-left:5px;position:relative}.add-to-cart{width:100%;cursor:pointer;background-color:#fff;border:1.5px solid transparent;border-radius:5px;padding:5px;text-align:center;align-items:center}.add-to-cart .quantity-btn{padding:5px 10px;font-weight:700}.discount{position:absolute;top:0;padding:5px;width:60px;text-align:center;font-size:12px;border-bottom-right-radius:3px}@media screen and (max-width: 475px){.width{max-width:160px;min-width:160px;height:300px}.adjustHeightWidth{max-width:100%;min-width:100%}}.h-40{height:45%;position:relative}.bottom{position:absolute;bottom:10px;width:93%;display:flex;flex-direction:column}.discount-price{font-weight:600;font-size:14px}.color{color:#000}.trim-text{text-align:inherit!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ImageLoadingComponent, selector: "image-loading", inputs: ["hash", "imageUrl", "index", "product", "theme"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }] }); }
|
|
12553
12716
|
}
|
|
12554
12717
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: SmallProductListingComponent, decorators: [{
|
|
12555
12718
|
type: Component,
|
|
@@ -12558,7 +12721,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
12558
12721
|
MatIcon,
|
|
12559
12722
|
ImageLoadingComponent,
|
|
12560
12723
|
ColorDirective
|
|
12561
|
-
], template: "<div class=\"product\" [ngClass]=\"{'width' : isScrollable, 'adjustHeightWidth': isCategoryProductList}\" [style.opacity]=\"product?.itemInventory?.openingStock == 0 ? 0.5 : 1\" (click)=\"goToProductDetail(product)\" [attr.style]=\"customClass\">\r\n <div class=\"prod-img\">\r\n <image-loading [imageUrl]=\"product.itemImages?.[0]?.imgUrl\" [hash]=\"product.itemImages?.[0]?.blurhash\" [theme]=\"data?.styles?.theme\"></image-loading>\r\n <div class=\"discount\" [style.backgroundColor]=\"data?.styles?.background?.color\" [simpoColor]=\"data?.styles?.background?.color\"\r\n *ngIf=\"getPercentage(product) > '0'\">{{getPercentage(product)}}% off</div>\r\n </div>\r\n <div class=\"p-2 h-40\">\r\n <span class=\"trim-text color\">{{product.name}}</span>\r\n <div class=\"bottom\">\r\n <span class=\"m-1\">\r\n <span class=\"color\" *ngIf=\"product?.price?.discountedPrice && product.price.discountedPrice > 0\"><span [innerHTML]=\"currency\"></span> {{product?.price?.discountedPrice ?? 0}}</span>\r\n <span class=\"color\" [ngClass]=\"{'strike-through' : product?.price?.discountedPrice && product.price.discountedPrice > 0 }\"><span [innerHTML]=\"currency\"></span> {{product?.price?.sellingPrice ?? 0}}</span>\r\n </span>\r\n <div class=\"add-to-cart\"\r\n [style.borderColor]=\"data.styles?.background?.accentColor\"\r\n [ngClass]=\"{'justify-content-between p-0 d-flex': product.quantity, 'justify-content-center': !product.quantity}\" (click)=\"removeDefault($event)\">\r\n <ng-container *ngIf=\"product?.itemInventory?.openingStock\">\r\n <ng-container *ngIf=\"!product.quantity\">\r\n <div (click)=\"addItemToCart($event, product, 'ADD')\" [style.color]=\"data.styles?.background?.accentColor\">Add to Cart</div>\r\n </ng-container>\r\n <ng-container *ngIf=\"product.quantity\">\r\n <span class=\"quantity-btn\" (click)=\"addItemToCart($event, product, 'SUBSTRACT')\" [style.backgroundColor]=\"getSupportingColor(data.styles?.background?.accentColor)\" [style.color]=\"data.styles?.background?.accentColor\">-</span>\r\n <span class=\"quantity\" [style.color]=\"data.styles?.background?.accentColor\">{{product.quantity}}</span>\r\n <span class=\"quantity-btn\" (click)=\"addItemToCart($event, product, 'ADD')\" [style.backgroundColor]=\"getSupportingColor(data.styles?.background?.accentColor)\" [style.color]=\"data.styles?.background?.accentColor\">+</span>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"!product?.itemInventory?.openingStock\">\r\n <span class=\"d-flex align-items-center justify-content-center w-100\">\r\n <mat-icon>notification_important</mat-icon>\r\n <span class=\"ml-2\">Notify</span>\r\n </span>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- <ng-template #loadingScreen>\r\n <ngx-skeleton-loader *ngIf=\"filterLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '100%',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\" />\r\n</ng-template> -->\r\n", styles: [".product{position:relative;display:flex;flex-direction:column;cursor:pointer;margin-bottom:10px;border-radius:10px;overflow:hidden;height:350px;background-color:#fff}.product .prod-img{position:relative;height:55%;width:100%;overflow:hidden;border:1.8px solid;border-radius:10px;border-color:#e5e7eb}.product .prod-img img{height:100%;width:100%;object-fit:cover}.width{margin-right:10px;min-width:195px;max-width:195px}.styling{height:30px;width:30px;border-radius:50%;background-color:#fff;position:absolute;bottom:0;right:-12px}.strike-through{text-decoration:line-through;color:#d3d3d3;font-size:12px;margin-left:5px;position:relative}.add-to-cart{width:100%;cursor:pointer;background-color:#fff;border:1.5px solid transparent;border-radius:5px;padding:5px;text-align:center;align-items:center}.add-to-cart .quantity-btn{padding:5px 10px;font-weight:700}.discount{position:absolute;top:0;padding:5px;width:60px;text-align:center;font-size:12px;border-bottom-right-radius:3px}@media screen and (max-width: 475px){.width{max-width:160px;min-width:160px;height:300px}.adjustHeightWidth{max-width:100%;min-width:100%}}.h-40{height:45%;position:relative}.bottom{position:absolute;bottom:10px;width:93%;display:flex;flex-direction:column}.discount-price{font-weight:600;font-size:14px}.color{color:#000}\n"] }]
|
|
12724
|
+
], template: "<div class=\"product\" [ngClass]=\"{'width' : isScrollable, 'adjustHeightWidth': isCategoryProductList}\" [style.opacity]=\"product?.itemInventory?.openingStock == 0 ? 0.5 : 1\" (click)=\"goToProductDetail(product)\" [attr.style]=\"customClass\">\r\n <div class=\"prod-img\">\r\n <image-loading [imageUrl]=\"product.itemImages?.[0]?.imgUrl\" [hash]=\"product.itemImages?.[0]?.blurhash\" [theme]=\"data?.styles?.theme\"></image-loading>\r\n <div class=\"discount\" [style.backgroundColor]=\"data?.styles?.background?.color\" [simpoColor]=\"data?.styles?.background?.color\"\r\n *ngIf=\"getPercentage(product) > '0'\">{{getPercentage(product)}}% off</div>\r\n </div>\r\n <div class=\"p-2 h-40\">\r\n <span class=\"trim-text color\">{{product.name}}</span>\r\n <div class=\"bottom\">\r\n <span class=\"m-1\">\r\n <span class=\"color\" *ngIf=\"product?.price?.discountedPrice && product.price.discountedPrice > 0\"><span [innerHTML]=\"currency\"></span> {{product?.price?.discountedPrice ?? 0}}</span>\r\n <span class=\"color\" [ngClass]=\"{'strike-through' : product?.price?.discountedPrice && product.price.discountedPrice > 0 }\"><span [innerHTML]=\"currency\"></span> {{product?.price?.sellingPrice ?? 0}}</span>\r\n </span>\r\n <div class=\"add-to-cart\"\r\n [style.borderColor]=\"data.styles?.background?.accentColor\"\r\n [ngClass]=\"{'justify-content-between p-0 d-flex': product.quantity, 'justify-content-center': !product.quantity}\" (click)=\"removeDefault($event)\">\r\n <ng-container *ngIf=\"product?.itemInventory?.openingStock\">\r\n <ng-container *ngIf=\"!product.quantity\">\r\n <div (click)=\"addItemToCart($event, product, 'ADD')\" [style.color]=\"data.styles?.background?.accentColor\">Add to Cart</div>\r\n </ng-container>\r\n <ng-container *ngIf=\"product.quantity\">\r\n <span class=\"quantity-btn\" (click)=\"addItemToCart($event, product, 'SUBSTRACT')\" [style.backgroundColor]=\"getSupportingColor(data.styles?.background?.accentColor)\" [style.color]=\"data.styles?.background?.accentColor\">-</span>\r\n <span class=\"quantity\" [style.color]=\"data.styles?.background?.accentColor\">{{product.quantity}}</span>\r\n <span class=\"quantity-btn\" (click)=\"addItemToCart($event, product, 'ADD')\" [style.backgroundColor]=\"getSupportingColor(data.styles?.background?.accentColor)\" [style.color]=\"data.styles?.background?.accentColor\">+</span>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"!product?.itemInventory?.openingStock\">\r\n <span class=\"d-flex align-items-center justify-content-center w-100\">\r\n <mat-icon>notification_important</mat-icon>\r\n <span class=\"ml-2\">Notify</span>\r\n </span>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- <ng-template #loadingScreen>\r\n <ngx-skeleton-loader *ngIf=\"filterLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '100%',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\" />\r\n</ng-template> -->\r\n", styles: [".product{position:relative;display:flex;flex-direction:column;cursor:pointer;margin-bottom:10px;border-radius:10px;overflow:hidden;height:350px;background-color:#fff}.product .prod-img{position:relative;height:55%;width:100%;overflow:hidden;border:1.8px solid;border-radius:10px;border-color:#e5e7eb}.product .prod-img img{height:100%;width:100%;object-fit:cover}.width{margin-right:10px;min-width:195px;max-width:195px}.styling{height:30px;width:30px;border-radius:50%;background-color:#fff;position:absolute;bottom:0;right:-12px}.strike-through{text-decoration:line-through;color:#d3d3d3;font-size:12px;margin-left:5px;position:relative}.add-to-cart{width:100%;cursor:pointer;background-color:#fff;border:1.5px solid transparent;border-radius:5px;padding:5px;text-align:center;align-items:center}.add-to-cart .quantity-btn{padding:5px 10px;font-weight:700}.discount{position:absolute;top:0;padding:5px;width:60px;text-align:center;font-size:12px;border-bottom-right-radius:3px}@media screen and (max-width: 475px){.width{max-width:160px;min-width:160px;height:300px}.adjustHeightWidth{max-width:100%;min-width:100%}}.h-40{height:45%;position:relative}.bottom{position:absolute;bottom:10px;width:93%;display:flex;flex-direction:column}.discount-price{font-weight:600;font-size:14px}.color{color:#000}.trim-text{text-align:inherit!important}\n"] }]
|
|
12562
12725
|
}], ctorParameters: () => [{ type: CartService }, { type: i2$4.Router }], propDecorators: { product: [{
|
|
12563
12726
|
type: Input
|
|
12564
12727
|
}], data: [{
|
|
@@ -12863,7 +13026,7 @@ class FeaturedProductsComponent extends BaseSection {
|
|
|
12863
13026
|
}, 100);
|
|
12864
13027
|
}
|
|
12865
13028
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: FeaturedProductsComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: RestService }, { token: i2$4.Router }, { token: CartService }, { token: StorageServiceService }, { token: i5$1.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12866
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: FeaturedProductsComponent, isStandalone: true, selector: "simpo-featured-products", inputs: { data: "data", responseData: "responseData", index: "index", isRelatedProduct: "isRelatedProduct", edit: "edit", customClass: "customClass", delete: "delete", nextComponentColor: "nextComponentColor" }, outputs: { changeDetailProduct: "changeDetailProduct" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<ng-container>\r\n <section class=\"container-fluid total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [simpoBackground]=\"styles?.background\" [attr.style]=\"customClass\">\r\n <div [id]=\"data?.id\" class=\"display-block\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"d-flex jc-space align-center content-side\">\r\n <div class=\"input-text content-side\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <!-- <div [innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"> -->\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n <!-- </div> -->\r\n </div>\r\n </div>\r\n <div class=\"body-large view-all\" *ngIf=\"content?.display?.showButton && screenWidth > 475\" (click)=\"proceedToProductList()\">{{viewAllButton?.content?.label ?? 'See All'}} ></div>\r\n </div>\r\n <img *ngIf=\"styles?.dividerImage?.showDivider\" loading=\"lazy\" [src]=\"styles?.dividerImage?.url\" alt=\"\"\r\n class=\"span-img mt-15\">\r\n <ng-container *ngIf=\"!apiLoading\">\r\n <div class=\"product-parent position-relative\" *ngIf=\"responseData && responseData?.length\"\r\n [simpoWrapContainer]=\"styles?.direction\" #container>\r\n <ng-container *ngIf=\"styles?.direction == 'ROW' && !isMobile\">\r\n <div class=\"left-arrow\" (click)=\"scrollLeft()\" *ngIf=\"showLeftArrow && responseData?.length\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n </ng-container>\r\n <div\r\n *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\"\r\n class=\"product\" [style.padding.px]=\"styles?.theme != theme.Theme1 ? '3' : ''\" [style.width.%]=\"styles?.theme != theme.Theme1 && isMobile && isRelatedProduct ? '48' : ''\" [style.minWidth]=\"applyProductWidth() ? getProductWidth() : ''\" [style.maxWidth]=\"applyProductWidth() ? getProductWidth() : ''\">\r\n <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\r\n <ng-container *ngTemplateOutlet=\"ProductDes; context: {data: product, idx: idx}\"></ng-container>\r\n </ng-container>\r\n <div *ngIf=\"styles?.theme != theme.Theme1\">\r\n <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"this.screenWidth > 475 || (this.screenWidth <= 475 && styles?.direction == 'ROW')\"></simpo-small-product-listing>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.direction == 'ROW' && !isMobile\">\r\n <div class=\"right-arrow\" (click)=\"scrollRight()\" *ngIf=\"showRightArrow && responseData?.length\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n </ng-container>\r\n <simpo-card-skeleton-loader *ngIf=\"apiLoading\"></simpo-card-skeleton-loader>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n </section>\r\n</ng-container>\r\n\r\n<ng-template #VarientList let-product=\"data\">\r\n <div class=\"varient-list\" *ngIf=\"product?.itemVariant?.length\">\r\n <ng-container *ngFor=\"let varient of product?.itemVariant; let idx = index\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"varient.variantImages?.[0]?.imgUrl\"\r\n alt=\"\" class=\"varient\" [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\"\r\n [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\"\r\n (click)=\"selectVarient(product, varient)\">\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n</ng-template>\r\n\r\n<ng-template #AddToCart let-product=\"data\">\r\n <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\" [style.marginTop]=\"true ? '10px' : ''\">\r\n <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\" *ngIf=\"!product.quantity && !isItemOutOfStock(product)\"\r\n [backgroundInfo]=\"styles?.background\"\r\n (click)=\"addItemToCart(product, 'ADD')\">{{button?.content?.label ?? 'Add to Cart'}}</button>\r\n <div class=\"quantity full-width-quantity\" [style.borderColor]=\"styles?.background?.accentColor\" [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\" [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\r\n <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\" [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart(product, 'ADD')\">+</span>\r\n </div>\r\n <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ProductPricing let-product=\"data\">\r\n <div class=\"d-flex justify-content-between align-items-center\" [style.display]=\"true ? 'block!important' : ''\">\r\n <div class=\"price body-large d-flex g-10\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n <!-- <div *ngIf=\"product.price.value != product.price.discountedPrice\" class=\"selling-price\">\r\n <span [innerHTML]='currency'></span>\r\n {{product.price.value}}\r\n </div> -->\r\n <div class=\"price discount-price\" *ngIf=\"product?.price?.discountedPrice != product?.price?.value\">\r\n <span [innerHTML]='currency | sanitizeHtml'></span>\r\n {{product.price.value}}</div>\r\n <div>\r\n <span [innerHTML]='currency | sanitizeHtml'></span>\r\n {{product.price.sellingPrice | number:'1.0-0'}}\r\n </div>\r\n </div>\r\n <ng-container>\r\n <ng-container *ngTemplateOutlet=\"AddToCart; context: {data: product}\"></ng-container>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ProductDes let-product=\"data\" let-idx=\"idx\">\r\n <div (click)=\"proceedToProductDesc(product)\" class=\"position-relative box-shadow\" [style.height.px]=\"isMobile ? (styles?.mobileColumn == 1 ? '480' : '230' ) : ''\">\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n <!-- <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [id]=\"'preview_'+idx\" [src]=\"product.itemImages?.[product.prviewIdx]?.imgUrl\" alt=\"\"\r\n class=\"product-img preivew\" (mouseenter)=\"togglePreviewImage(product, idx)\"\r\n (mouseleave)=\"product.prviewIdx = 0\"> -->\r\n <image-loading [hash]=\"product.itemImages?.[product.prviewIdx]?.blurhash\" [index]=\"idx\" [imageUrl]=\"product.itemImages?.[product.prviewIdx]?.imgUrl\" [theme]=\"styles?.theme\"></image-loading>\r\n\r\n </div>\r\n <div class=\"mt-15 w-100\">\r\n <div class=\"product-name heading-large text-left trim-text w-100\" [id]=\"data?.id\" (click)=\"proceedToProductDesc(product)\"\r\n [simpoColor]=\"styles?.background?.color\">\r\n {{product.name }}</div>\r\n <ng-container *ngTemplateOutlet=\"VarientList; context: {data: product}\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"ProductPricing; context: {data: product}\"></ng-container>\r\n </div>\r\n</ng-template>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n", styles: ["div[class*=arrow]{background-color:#fff;color:#000;padding:5px;border-radius:50%;position:sticky;height:fit-content;top:50%;display:flex;align-items:center;justify-content:center;z-index:101;cursor:pointer;box-shadow:#63636333 0 2px 8px}div[class*=arrow] .mat-icon{color:#000}.left-arrow{left:2px}.right-arrow{right:2px}.product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;height:fit-content;cursor:pointer;position:relative;display:flex;flex-direction:column;justify-content:space-between}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:60px;width:45px;border-radius:5px;border:1px solid lightgray}.varient-list .selected-varient{border:1px solid transparent}.tags{position:absolute;top:8px;left:8px;display:flex;gap:5px}.tags .tag{font-size:12px;background-color:#fff;padding:5px;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.fav-icon{position:absolute;z-index:1000;padding:5px;right:8px;top:8px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;padding:5px 10px;border-radius:5px}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px;font-weight:500}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}@media screen and (max-width: 475px){.selling-price{display:none!important}}.discounted-price{margin-top:-3px}.add-product-button{width:20%}.action-btn{display:flex;justify-content:center;margin-top:20px}.action-btn>a{width:fit-content!important;padding:5px 20px;text-decoration:none}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative}.display-block{display:block!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid;border-radius:3px;padding:5px;font-weight:600;width:95px}.preivew{transition:opacity .5s ease-in-out;opacity:1}.transition-preview{opacity:0}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.them2-lisiting{min-width:195px;max-width:195px;margin-right:10px}.input-text{width:90%}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important}.default-image img{height:250px}.out-of-stock{font-size:12px!important}.input-text{width:100%}}.add-to-cart-btn{display:flex;gap:10px}.add-to-cart-btn .mat-icon{height:30px;width:35px;font-size:27px;margin-top:5px}.add-to-cart-btn button{height:35px;font-size:16px!important}.jc-space{justify-content:space-between}.align-end{align-items:end}.view-all{font-size:16px;font-weight:600;cursor:pointer}.box-shadow{box-shadow:#0000003d 0 3px 8px;border-radius:10px}.full-width-quantity{text-align:center;padding:unset;font-weight:600;height:35px}.change-quantity{width:15%;height:inherit;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:600;position:relative}.align-center{align-items:center}@media screen and (max-width: 475px){.product-name{font-size:14px}}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.g-10{gap:10px}.mb-5{margin-bottom:5px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i3.SlicePipe, name: "slice" }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type:
|
|
13029
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: FeaturedProductsComponent, isStandalone: true, selector: "simpo-featured-products", inputs: { data: "data", responseData: "responseData", index: "index", isRelatedProduct: "isRelatedProduct", edit: "edit", customClass: "customClass", delete: "delete", nextComponentColor: "nextComponentColor" }, outputs: { changeDetailProduct: "changeDetailProduct" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<ng-container>\r\n <section class=\"container-fluid total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [simpoBackground]=\"styles?.background\" [attr.style]=\"customClass\">\r\n <div [id]=\"data?.id\" class=\"display-block\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"d-flex jc-space align-center content-side\">\r\n <div class=\"input-text content-side\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <!-- <div [innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"> -->\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n <!-- </div> -->\r\n </div>\r\n </div>\r\n <div class=\"body-large view-all\" *ngIf=\"content?.display?.showButton && screenWidth > 475\" (click)=\"proceedToProductList()\">{{viewAllButton?.content?.label ?? 'See All'}} ></div>\r\n </div>\r\n <img *ngIf=\"styles?.dividerImage?.showDivider\" loading=\"lazy\" [src]=\"styles?.dividerImage?.url\" alt=\"\"\r\n class=\"span-img mt-15\">\r\n <ng-container *ngIf=\"!apiLoading\">\r\n <div class=\"product-parent position-relative\" *ngIf=\"responseData && responseData?.length\"\r\n [simpoWrapContainer]=\"styles?.direction\" #container>\r\n <ng-container *ngIf=\"styles?.direction == 'ROW' && !isMobile\">\r\n <div class=\"left-arrow\" (click)=\"scrollLeft()\" *ngIf=\"showLeftArrow && responseData?.length\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n </ng-container>\r\n <div\r\n *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\"\r\n class=\"product\" [style.padding.px]=\"styles?.theme != theme.Theme1 ? '3' : ''\" [style.width.%]=\"styles?.theme != theme.Theme1 && isMobile && isRelatedProduct ? '48' : ''\" [style.minWidth]=\"applyProductWidth() ? getProductWidth() : ''\" [style.maxWidth]=\"applyProductWidth() ? getProductWidth() : ''\">\r\n <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\r\n <ng-container *ngTemplateOutlet=\"ProductDes; context: {data: product, idx: idx}\"></ng-container>\r\n </ng-container>\r\n <div *ngIf=\"styles?.theme != theme.Theme1\">\r\n <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"this.screenWidth > 475 || (this.screenWidth <= 475 && styles?.direction == 'ROW')\"></simpo-small-product-listing>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.direction == 'ROW' && !isMobile\">\r\n <div class=\"right-arrow\" (click)=\"scrollRight()\" *ngIf=\"showRightArrow && responseData?.length\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n </ng-container>\r\n <simpo-card-skeleton-loader *ngIf=\"apiLoading\"></simpo-card-skeleton-loader>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n </section>\r\n</ng-container>\r\n\r\n<ng-template #VarientList let-product=\"data\">\r\n <div class=\"varient-list\" *ngIf=\"product?.itemVariant?.length\">\r\n <ng-container *ngFor=\"let varient of product?.itemVariant; let idx = index\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"varient.variantImages?.[0]?.imgUrl\"\r\n alt=\"\" class=\"varient\" [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\"\r\n [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\"\r\n (click)=\"selectVarient(product, varient)\">\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n</ng-template>\r\n\r\n<ng-template #AddToCart let-product=\"data\">\r\n <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\" [style.marginTop]=\"true ? '10px' : ''\">\r\n <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\" *ngIf=\"!product.quantity && !isItemOutOfStock(product)\"\r\n [backgroundInfo]=\"styles?.background\"\r\n (click)=\"addItemToCart(product, 'ADD')\">{{button?.content?.label ?? 'Add to Cart'}}</button>\r\n <div class=\"quantity full-width-quantity\" [style.borderColor]=\"styles?.background?.accentColor\" [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\" [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\r\n <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\" [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart(product, 'ADD')\">+</span>\r\n </div>\r\n <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ProductPricing let-product=\"data\">\r\n <div class=\"d-flex justify-content-between align-items-center\" [style.display]=\"true ? 'block!important' : ''\" >\r\n <div class=\"price body-large g-10\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\"\r\n [ngClass]=\"{\r\n 'text-left': stylesLayout?.align === 'left',\r\n 'text-right': stylesLayout?.align === 'right',\r\n 'text-center': stylesLayout?.align === 'center'\r\n }\">\r\n <!-- <div *ngIf=\"product.price.value != product.price.discountedPrice\" class=\"selling-price\">\r\n <span [innerHTML]='currency'></span>\r\n {{product.price.value}}\r\n </div> -->\r\n <!-- <div class=\"price discount-price\" *ngIf=\"product?.price?.discountedPrice != product?.price?.value\" >\r\n <span [innerHTML]='currency | sanitizeHtml'></span>\r\n {{product.price.value}}</div> -->\r\n <div>\r\n <span class=\"price discount-price\" *ngIf=\"product?.price?.discountedPrice != product?.price?.value\">\r\n {{product.price.value}}\r\n </span>\r\n <span [innerHTML]='currency | sanitizeHtml'></span>\r\n {{product.price.sellingPrice | number:'1.0-0'}}\r\n </div>\r\n </div>\r\n <ng-container>\r\n <ng-container *ngTemplateOutlet=\"AddToCart; context: {data: product}\"></ng-container>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ProductDes let-product=\"data\" let-idx=\"idx\">\r\n <div (click)=\"proceedToProductDesc(product)\" class=\"position-relative box-shadow\" [style.height.px]=\"isMobile ? (styles?.mobileColumn == 1 ? '480' : '230' ) : ''\">\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n <!-- <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [id]=\"'preview_'+idx\" [src]=\"product.itemImages?.[product.prviewIdx]?.imgUrl\" alt=\"\"\r\n class=\"product-img preivew\" (mouseenter)=\"togglePreviewImage(product, idx)\"\r\n (mouseleave)=\"product.prviewIdx = 0\"> -->\r\n <image-loading [hash]=\"product.itemImages?.[product.prviewIdx]?.blurhash\" [index]=\"idx\" [imageUrl]=\"product.itemImages?.[product.prviewIdx]?.imgUrl\" [theme]=\"styles?.theme\"></image-loading>\r\n\r\n </div>\r\n <div class=\"mt-15 w-100\">\r\n <div class=\"product-name heading-large trim-text w-100\" [id]=\"data?.id\" (click)=\"proceedToProductDesc(product)\"\r\n [simpoColor]=\"styles?.background?.color\">\r\n {{product.name }}</div>\r\n <ng-container *ngTemplateOutlet=\"VarientList; context: {data: product}\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"ProductPricing; context: {data: product}\"></ng-container>\r\n </div>\r\n</ng-template>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n", styles: ["div[class*=arrow]{background-color:#fff;color:#000;padding:5px;border-radius:50%;position:sticky;height:fit-content;top:50%;display:flex;align-items:center;justify-content:center;z-index:101;cursor:pointer;box-shadow:#63636333 0 2px 8px}div[class*=arrow] .mat-icon{color:#000}.left-arrow{left:2px}.right-arrow{right:2px}.product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;height:fit-content;cursor:pointer;position:relative;display:flex;flex-direction:column;justify-content:space-between}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:60px;width:45px;border-radius:5px;border:1px solid lightgray}.varient-list .selected-varient{border:1px solid transparent}.tags{position:absolute;top:8px;left:8px;display:flex;gap:5px}.tags .tag{font-size:12px;background-color:#fff;padding:5px;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.fav-icon{position:absolute;z-index:1000;padding:5px;right:8px;top:8px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;padding:5px 10px;border-radius:5px}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px;font-weight:500}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}@media screen and (max-width: 475px){.selling-price{display:none!important}}.discounted-price{margin-top:-3px}.add-product-button{width:20%}.action-btn{display:flex;justify-content:center;margin-top:20px}.action-btn>a{width:fit-content!important;padding:5px 20px;text-decoration:none}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative}.display-block{display:block!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid;border-radius:3px;padding:5px;font-weight:600;width:95px}.preivew{transition:opacity .5s ease-in-out;opacity:1}.transition-preview{opacity:0}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.them2-lisiting{min-width:195px;max-width:195px;margin-right:10px}.input-text{width:90%}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important}.default-image img{height:250px}.out-of-stock{font-size:12px!important}.input-text{width:100%}}.add-to-cart-btn{display:flex;gap:10px}.add-to-cart-btn .mat-icon{height:30px;width:35px;font-size:27px;margin-top:5px}.add-to-cart-btn button{height:35px;font-size:16px!important}.jc-space{justify-content:space-between}.align-end{align-items:end}.view-all{font-size:16px;font-weight:600;cursor:pointer}.box-shadow{box-shadow:#0000003d 0 3px 8px;border-radius:10px}.full-width-quantity{text-align:center;padding:unset;font-weight:600;height:35px}.change-quantity{width:15%;height:inherit;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:600;position:relative}.align-center{align-items:center}@media screen and (max-width: 475px){.product-name{font-size:14px}}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.g-10{gap:10px}.mb-5{margin-bottom:5px!important}.trim-text{text-align:inherit!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i3.SlicePipe, name: "slice" }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type:
|
|
12867
13030
|
//directive
|
|
12868
13031
|
SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: SimpoWrapComntainer, selector: "[simpoWrapContainer]", inputs: ["simpoWrapContainer"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "directive", type:
|
|
12869
13032
|
// MatBottomSheetModule,
|
|
@@ -12895,7 +13058,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
12895
13058
|
SmallProductListingComponent,
|
|
12896
13059
|
CardSkeletonLoaderComponent,
|
|
12897
13060
|
ImageLoadingComponent, SvgDividerComponent, TextEditorComponent
|
|
12898
|
-
], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<ng-container>\r\n <section class=\"container-fluid total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [simpoBackground]=\"styles?.background\" [attr.style]=\"customClass\">\r\n <div [id]=\"data?.id\" class=\"display-block\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"d-flex jc-space align-center content-side\">\r\n <div class=\"input-text content-side\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <!-- <div [innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"> -->\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n <!-- </div> -->\r\n </div>\r\n </div>\r\n <div class=\"body-large view-all\" *ngIf=\"content?.display?.showButton && screenWidth > 475\" (click)=\"proceedToProductList()\">{{viewAllButton?.content?.label ?? 'See All'}} ></div>\r\n </div>\r\n <img *ngIf=\"styles?.dividerImage?.showDivider\" loading=\"lazy\" [src]=\"styles?.dividerImage?.url\" alt=\"\"\r\n class=\"span-img mt-15\">\r\n <ng-container *ngIf=\"!apiLoading\">\r\n <div class=\"product-parent position-relative\" *ngIf=\"responseData && responseData?.length\"\r\n [simpoWrapContainer]=\"styles?.direction\" #container>\r\n <ng-container *ngIf=\"styles?.direction == 'ROW' && !isMobile\">\r\n <div class=\"left-arrow\" (click)=\"scrollLeft()\" *ngIf=\"showLeftArrow && responseData?.length\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n </ng-container>\r\n <div\r\n *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\"\r\n class=\"product\" [style.padding.px]=\"styles?.theme != theme.Theme1 ? '3' : ''\" [style.width.%]=\"styles?.theme != theme.Theme1 && isMobile && isRelatedProduct ? '48' : ''\" [style.minWidth]=\"applyProductWidth() ? getProductWidth() : ''\" [style.maxWidth]=\"applyProductWidth() ? getProductWidth() : ''\">\r\n <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\r\n <ng-container *ngTemplateOutlet=\"ProductDes; context: {data: product, idx: idx}\"></ng-container>\r\n </ng-container>\r\n <div *ngIf=\"styles?.theme != theme.Theme1\">\r\n <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"this.screenWidth > 475 || (this.screenWidth <= 475 && styles?.direction == 'ROW')\"></simpo-small-product-listing>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.direction == 'ROW' && !isMobile\">\r\n <div class=\"right-arrow\" (click)=\"scrollRight()\" *ngIf=\"showRightArrow && responseData?.length\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n </ng-container>\r\n <simpo-card-skeleton-loader *ngIf=\"apiLoading\"></simpo-card-skeleton-loader>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n </section>\r\n</ng-container>\r\n\r\n<ng-template #VarientList let-product=\"data\">\r\n <div class=\"varient-list\" *ngIf=\"product?.itemVariant?.length\">\r\n <ng-container *ngFor=\"let varient of product?.itemVariant; let idx = index\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"varient.variantImages?.[0]?.imgUrl\"\r\n alt=\"\" class=\"varient\" [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\"\r\n [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\"\r\n (click)=\"selectVarient(product, varient)\">\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n</ng-template>\r\n\r\n<ng-template #AddToCart let-product=\"data\">\r\n <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\" [style.marginTop]=\"true ? '10px' : ''\">\r\n <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\" *ngIf=\"!product.quantity && !isItemOutOfStock(product)\"\r\n [backgroundInfo]=\"styles?.background\"\r\n (click)=\"addItemToCart(product, 'ADD')\">{{button?.content?.label ?? 'Add to Cart'}}</button>\r\n <div class=\"quantity full-width-quantity\" [style.borderColor]=\"styles?.background?.accentColor\" [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\" [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\r\n <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\" [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart(product, 'ADD')\">+</span>\r\n </div>\r\n <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ProductPricing let-product=\"data\">\r\n <div class=\"d-flex justify-content-between align-items-center\" [style.display]=\"true ? 'block!important' : ''\">\r\n <div class=\"price body-large d-flex g-10\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n <!-- <div *ngIf=\"product.price.value != product.price.discountedPrice\" class=\"selling-price\">\r\n <span [innerHTML]='currency'></span>\r\n {{product.price.value}}\r\n </div> -->\r\n <div class=\"price discount-price\" *ngIf=\"product?.price?.discountedPrice != product?.price?.value\">\r\n <span [innerHTML]='currency | sanitizeHtml'></span>\r\n {{product.price.value}}</div>\r\n <div>\r\n <span [innerHTML]='currency | sanitizeHtml'></span>\r\n {{product.price.sellingPrice | number:'1.0-0'}}\r\n </div>\r\n </div>\r\n <ng-container>\r\n <ng-container *ngTemplateOutlet=\"AddToCart; context: {data: product}\"></ng-container>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ProductDes let-product=\"data\" let-idx=\"idx\">\r\n <div (click)=\"proceedToProductDesc(product)\" class=\"position-relative box-shadow\" [style.height.px]=\"isMobile ? (styles?.mobileColumn == 1 ? '480' : '230' ) : ''\">\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n <!-- <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [id]=\"'preview_'+idx\" [src]=\"product.itemImages?.[product.prviewIdx]?.imgUrl\" alt=\"\"\r\n class=\"product-img preivew\" (mouseenter)=\"togglePreviewImage(product, idx)\"\r\n (mouseleave)=\"product.prviewIdx = 0\"> -->\r\n <image-loading [hash]=\"product.itemImages?.[product.prviewIdx]?.blurhash\" [index]=\"idx\" [imageUrl]=\"product.itemImages?.[product.prviewIdx]?.imgUrl\" [theme]=\"styles?.theme\"></image-loading>\r\n\r\n </div>\r\n <div class=\"mt-15 w-100\">\r\n <div class=\"product-name heading-large text-left trim-text w-100\" [id]=\"data?.id\" (click)=\"proceedToProductDesc(product)\"\r\n [simpoColor]=\"styles?.background?.color\">\r\n {{product.name }}</div>\r\n <ng-container *ngTemplateOutlet=\"VarientList; context: {data: product}\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"ProductPricing; context: {data: product}\"></ng-container>\r\n </div>\r\n</ng-template>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n", styles: ["div[class*=arrow]{background-color:#fff;color:#000;padding:5px;border-radius:50%;position:sticky;height:fit-content;top:50%;display:flex;align-items:center;justify-content:center;z-index:101;cursor:pointer;box-shadow:#63636333 0 2px 8px}div[class*=arrow] .mat-icon{color:#000}.left-arrow{left:2px}.right-arrow{right:2px}.product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;height:fit-content;cursor:pointer;position:relative;display:flex;flex-direction:column;justify-content:space-between}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:60px;width:45px;border-radius:5px;border:1px solid lightgray}.varient-list .selected-varient{border:1px solid transparent}.tags{position:absolute;top:8px;left:8px;display:flex;gap:5px}.tags .tag{font-size:12px;background-color:#fff;padding:5px;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.fav-icon{position:absolute;z-index:1000;padding:5px;right:8px;top:8px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;padding:5px 10px;border-radius:5px}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px;font-weight:500}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}@media screen and (max-width: 475px){.selling-price{display:none!important}}.discounted-price{margin-top:-3px}.add-product-button{width:20%}.action-btn{display:flex;justify-content:center;margin-top:20px}.action-btn>a{width:fit-content!important;padding:5px 20px;text-decoration:none}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative}.display-block{display:block!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid;border-radius:3px;padding:5px;font-weight:600;width:95px}.preivew{transition:opacity .5s ease-in-out;opacity:1}.transition-preview{opacity:0}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.them2-lisiting{min-width:195px;max-width:195px;margin-right:10px}.input-text{width:90%}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important}.default-image img{height:250px}.out-of-stock{font-size:12px!important}.input-text{width:100%}}.add-to-cart-btn{display:flex;gap:10px}.add-to-cart-btn .mat-icon{height:30px;width:35px;font-size:27px;margin-top:5px}.add-to-cart-btn button{height:35px;font-size:16px!important}.jc-space{justify-content:space-between}.align-end{align-items:end}.view-all{font-size:16px;font-weight:600;cursor:pointer}.box-shadow{box-shadow:#0000003d 0 3px 8px;border-radius:10px}.full-width-quantity{text-align:center;padding:unset;font-weight:600;height:35px}.change-quantity{width:15%;height:inherit;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:600;position:relative}.align-center{align-items:center}@media screen and (max-width: 475px){.product-name{font-size:14px}}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.g-10{gap:10px}.mb-5{margin-bottom:5px!important}\n"] }]
|
|
13061
|
+
], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<ng-container>\r\n <section class=\"container-fluid total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [simpoBackground]=\"styles?.background\" [attr.style]=\"customClass\">\r\n <div [id]=\"data?.id\" class=\"display-block\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"d-flex jc-space align-center content-side\">\r\n <div class=\"input-text content-side\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <!-- <div [innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"> -->\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n <!-- </div> -->\r\n </div>\r\n </div>\r\n <div class=\"body-large view-all\" *ngIf=\"content?.display?.showButton && screenWidth > 475\" (click)=\"proceedToProductList()\">{{viewAllButton?.content?.label ?? 'See All'}} ></div>\r\n </div>\r\n <img *ngIf=\"styles?.dividerImage?.showDivider\" loading=\"lazy\" [src]=\"styles?.dividerImage?.url\" alt=\"\"\r\n class=\"span-img mt-15\">\r\n <ng-container *ngIf=\"!apiLoading\">\r\n <div class=\"product-parent position-relative\" *ngIf=\"responseData && responseData?.length\"\r\n [simpoWrapContainer]=\"styles?.direction\" #container>\r\n <ng-container *ngIf=\"styles?.direction == 'ROW' && !isMobile\">\r\n <div class=\"left-arrow\" (click)=\"scrollLeft()\" *ngIf=\"showLeftArrow && responseData?.length\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n </ng-container>\r\n <div\r\n *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\"\r\n class=\"product\" [style.padding.px]=\"styles?.theme != theme.Theme1 ? '3' : ''\" [style.width.%]=\"styles?.theme != theme.Theme1 && isMobile && isRelatedProduct ? '48' : ''\" [style.minWidth]=\"applyProductWidth() ? getProductWidth() : ''\" [style.maxWidth]=\"applyProductWidth() ? getProductWidth() : ''\">\r\n <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\r\n <ng-container *ngTemplateOutlet=\"ProductDes; context: {data: product, idx: idx}\"></ng-container>\r\n </ng-container>\r\n <div *ngIf=\"styles?.theme != theme.Theme1\">\r\n <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"this.screenWidth > 475 || (this.screenWidth <= 475 && styles?.direction == 'ROW')\"></simpo-small-product-listing>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.direction == 'ROW' && !isMobile\">\r\n <div class=\"right-arrow\" (click)=\"scrollRight()\" *ngIf=\"showRightArrow && responseData?.length\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n </ng-container>\r\n <simpo-card-skeleton-loader *ngIf=\"apiLoading\"></simpo-card-skeleton-loader>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n </section>\r\n</ng-container>\r\n\r\n<ng-template #VarientList let-product=\"data\">\r\n <div class=\"varient-list\" *ngIf=\"product?.itemVariant?.length\">\r\n <ng-container *ngFor=\"let varient of product?.itemVariant; let idx = index\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"varient.variantImages?.[0]?.imgUrl\"\r\n alt=\"\" class=\"varient\" [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\"\r\n [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\"\r\n (click)=\"selectVarient(product, varient)\">\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n</ng-template>\r\n\r\n<ng-template #AddToCart let-product=\"data\">\r\n <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\" [style.marginTop]=\"true ? '10px' : ''\">\r\n <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\" *ngIf=\"!product.quantity && !isItemOutOfStock(product)\"\r\n [backgroundInfo]=\"styles?.background\"\r\n (click)=\"addItemToCart(product, 'ADD')\">{{button?.content?.label ?? 'Add to Cart'}}</button>\r\n <div class=\"quantity full-width-quantity\" [style.borderColor]=\"styles?.background?.accentColor\" [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\" [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\r\n <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\" [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart(product, 'ADD')\">+</span>\r\n </div>\r\n <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ProductPricing let-product=\"data\">\r\n <div class=\"d-flex justify-content-between align-items-center\" [style.display]=\"true ? 'block!important' : ''\" >\r\n <div class=\"price body-large g-10\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\"\r\n [ngClass]=\"{\r\n 'text-left': stylesLayout?.align === 'left',\r\n 'text-right': stylesLayout?.align === 'right',\r\n 'text-center': stylesLayout?.align === 'center'\r\n }\">\r\n <!-- <div *ngIf=\"product.price.value != product.price.discountedPrice\" class=\"selling-price\">\r\n <span [innerHTML]='currency'></span>\r\n {{product.price.value}}\r\n </div> -->\r\n <!-- <div class=\"price discount-price\" *ngIf=\"product?.price?.discountedPrice != product?.price?.value\" >\r\n <span [innerHTML]='currency | sanitizeHtml'></span>\r\n {{product.price.value}}</div> -->\r\n <div>\r\n <span class=\"price discount-price\" *ngIf=\"product?.price?.discountedPrice != product?.price?.value\">\r\n {{product.price.value}}\r\n </span>\r\n <span [innerHTML]='currency | sanitizeHtml'></span>\r\n {{product.price.sellingPrice | number:'1.0-0'}}\r\n </div>\r\n </div>\r\n <ng-container>\r\n <ng-container *ngTemplateOutlet=\"AddToCart; context: {data: product}\"></ng-container>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ProductDes let-product=\"data\" let-idx=\"idx\">\r\n <div (click)=\"proceedToProductDesc(product)\" class=\"position-relative box-shadow\" [style.height.px]=\"isMobile ? (styles?.mobileColumn == 1 ? '480' : '230' ) : ''\">\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n <!-- <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [id]=\"'preview_'+idx\" [src]=\"product.itemImages?.[product.prviewIdx]?.imgUrl\" alt=\"\"\r\n class=\"product-img preivew\" (mouseenter)=\"togglePreviewImage(product, idx)\"\r\n (mouseleave)=\"product.prviewIdx = 0\"> -->\r\n <image-loading [hash]=\"product.itemImages?.[product.prviewIdx]?.blurhash\" [index]=\"idx\" [imageUrl]=\"product.itemImages?.[product.prviewIdx]?.imgUrl\" [theme]=\"styles?.theme\"></image-loading>\r\n\r\n </div>\r\n <div class=\"mt-15 w-100\">\r\n <div class=\"product-name heading-large trim-text w-100\" [id]=\"data?.id\" (click)=\"proceedToProductDesc(product)\"\r\n [simpoColor]=\"styles?.background?.color\">\r\n {{product.name }}</div>\r\n <ng-container *ngTemplateOutlet=\"VarientList; context: {data: product}\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"ProductPricing; context: {data: product}\"></ng-container>\r\n </div>\r\n</ng-template>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n", styles: ["div[class*=arrow]{background-color:#fff;color:#000;padding:5px;border-radius:50%;position:sticky;height:fit-content;top:50%;display:flex;align-items:center;justify-content:center;z-index:101;cursor:pointer;box-shadow:#63636333 0 2px 8px}div[class*=arrow] .mat-icon{color:#000}.left-arrow{left:2px}.right-arrow{right:2px}.product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;height:fit-content;cursor:pointer;position:relative;display:flex;flex-direction:column;justify-content:space-between}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:60px;width:45px;border-radius:5px;border:1px solid lightgray}.varient-list .selected-varient{border:1px solid transparent}.tags{position:absolute;top:8px;left:8px;display:flex;gap:5px}.tags .tag{font-size:12px;background-color:#fff;padding:5px;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.fav-icon{position:absolute;z-index:1000;padding:5px;right:8px;top:8px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;padding:5px 10px;border-radius:5px}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px;font-weight:500}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}@media screen and (max-width: 475px){.selling-price{display:none!important}}.discounted-price{margin-top:-3px}.add-product-button{width:20%}.action-btn{display:flex;justify-content:center;margin-top:20px}.action-btn>a{width:fit-content!important;padding:5px 20px;text-decoration:none}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative}.display-block{display:block!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid;border-radius:3px;padding:5px;font-weight:600;width:95px}.preivew{transition:opacity .5s ease-in-out;opacity:1}.transition-preview{opacity:0}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.them2-lisiting{min-width:195px;max-width:195px;margin-right:10px}.input-text{width:90%}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important}.default-image img{height:250px}.out-of-stock{font-size:12px!important}.input-text{width:100%}}.add-to-cart-btn{display:flex;gap:10px}.add-to-cart-btn .mat-icon{height:30px;width:35px;font-size:27px;margin-top:5px}.add-to-cart-btn button{height:35px;font-size:16px!important}.jc-space{justify-content:space-between}.align-end{align-items:end}.view-all{font-size:16px;font-weight:600;cursor:pointer}.box-shadow{box-shadow:#0000003d 0 3px 8px;border-radius:10px}.full-width-quantity{text-align:center;padding:unset;font-weight:600;height:35px}.change-quantity{width:15%;height:inherit;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:600;position:relative}.align-center{align-items:center}@media screen and (max-width: 475px){.product-name{font-size:14px}}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.g-10{gap:10px}.mb-5{margin-bottom:5px!important}.trim-text{text-align:inherit!important}\n"] }]
|
|
12899
13062
|
}], ctorParameters: () => [{ type: Object, decorators: [{
|
|
12900
13063
|
type: Inject,
|
|
12901
13064
|
args: [PLATFORM_ID]
|
|
@@ -15942,5 +16105,5 @@ class Product {
|
|
|
15942
16105
|
* Generated bundle index. Do not edit.
|
|
15943
16106
|
*/
|
|
15944
16107
|
|
|
15945
|
-
export { API_URL, AddNewSectionComponent, AlignContent, AnimationDirective, AppointmentFormComponent, AuthenticateUserComponent, AuthenticationRequiredComponent, BANNERALIGNMENT, BANNERHALIGN, BUCKET_URL, BackgroundDirective, BannerCarouselComponent, BannerContentFitDirective, BannerGridSectionComponent, BannerSectionComponent, BlogListComponent, BorderDirective, ButtonDirectiveDirective, CMIS_URL, CarouselBannerComponent, Cart, CartComponent, Category, CategoryProductComponent, ChannelType, CheckoutComponent, ChooseUsSectionComponent, Collection, ColorDirective, ColumnDirectiveDirective, ContactUsComponent, ContainerFitDirective, ContentFitDirective, CornerDirective, Corners, CustomerReviewComponent, DeviderType, ECOMMERCE_URL, EndUserService, EventsService, FaqSectionComponent, FeaturedCategoryComponent, FeaturedCollectionComponent, FeaturedProductsComponent, FeaturesSectionComponent, FooterComponent, FooterSectionComponent, FooterType, FooterTypes, GradientDirection, HALIGN, HEADER_STYLING, HeaderButtonStyle, HeaderSectionComponent, HeaderTextComponent, Header_Type, HoverDirective, ImageCarouselSectionComponent, ImageDirectiveDirective, ImageFit, ImageGridSectionComponent, ImageRatio, ImageSectionComponent, LocationSectionComponent, LogoGalleryComponent, LogoShowcaseComponent, MapType, MovingTextComponent, NavbarSectionComponent, NewServicesComponent, NewTestimonialsComponent, ObjectPositionDirective, OverlayDirective, OverlayValue, Padding, PositionLayoutDirectiveDirective, PricingSectionComponent, ProcessModernComponent, ProcessSectionComponent, Product, ProductCardTheme, ProductCategoryListComponent, ProductDescComponent, ProductListComponent, PropertyComponentComponent, PropertyListComponent, RecentBlogPostSectionComponent, RedirectionLinkType, RegistrationFormComponent, RemoveCarouselDirective, SPACING$1 as SPACING, SPACINGALIGN, SanitizeHtmlPipe, ServiceSectionComponent, SimpoContainerAligment, SimpoFooterLayoutDirective, SimpoStickyDirective, SkeletonLoaderSectionComponent, SpacingAroundDirective, Style, TEXT_SIZE, TeamMemberSectionComponent, TestimonialFullwidthComponent, TestimonialSectionComponent, TestimonialVideoComponent, TextBackgroundDirectiveDirective, TextImageSectionComponent, TextPosition, TextSectionComponent, UserProfileComponent, UspVideoSectionComponent, VALIGN, VerifyComponent, VideoSectionComponent, ViewBlogComponent, WhislistComponent, animation, animationType, applySpacing, applyStyle, cartType, contentAlignment, fitContent, fitScreen, fontSize, logoDirection, logoSpeed, logoType, mapStyle, showCaseType, simpoConetenAlignmentDirective, svgData };
|
|
16108
|
+
export { API_URL, AddNewSectionComponent, AlignContent, AnimationDirective, AppointmentFormComponent, AuthenticateUserComponent, AuthenticationRequiredComponent, BANNERALIGNMENT, BANNERHALIGN, BUCKET_URL, BackgroundDirective, BannerCarouselComponent, BannerContentFitDirective, BannerGridSectionComponent, BannerSectionComponent, BlogListComponent, BorderDirective, ButtonDirectiveDirective, CMIS_URL, CarouselBannerComponent, Cart, CartComponent, Category, CategoryProductComponent, ChannelType, CheckoutComponent, ChooseUsSectionComponent, Collection, ColorDirective, ColumnDirectiveDirective, ContactUsComponent, ContainerFitDirective, ContentFitDirective, CornerDirective, Corners, CustomerReviewComponent, DeviderType, ECOMMERCE_URL, EndUserService, EventsService, FaqSectionComponent, FeaturedCategoryComponent, FeaturedCollectionComponent, FeaturedProductsComponent, FeaturesSectionComponent, FooterComponent, FooterSectionComponent, FooterType, FooterTypes, GradientDirection, HALIGN, HEADER_STYLING, HeaderButtonStyle, HeaderSectionComponent, HeaderTextComponent, Header_Type, HoverAnimationDirective, HoverDirective, ImageCarouselSectionComponent, ImageDirectiveDirective, ImageFit, ImageGridSectionComponent, ImageRatio, ImageSectionComponent, LocationSectionComponent, LogoGalleryComponent, LogoShowcaseComponent, MapType, MovingTextComponent, NavbarSectionComponent, NewServicesComponent, NewTestimonialsComponent, ObjectPositionDirective, OverlayDirective, OverlayValue, Padding, PositionLayoutDirectiveDirective, PricingSectionComponent, ProcessModernComponent, ProcessSectionComponent, Product, ProductCardTheme, ProductCategoryListComponent, ProductDescComponent, ProductListComponent, PropertyComponentComponent, PropertyListComponent, RecentBlogPostSectionComponent, RedirectionLinkType, RegistrationFormComponent, RemoveCarouselDirective, SPACING$1 as SPACING, SPACINGALIGN, SanitizeHtmlPipe, ServiceSectionComponent, SimpoContainerAligment, SimpoFooterLayoutDirective, SimpoStickyDirective, SkeletonLoaderSectionComponent, SpacingAroundDirective, Style, TEXT_SIZE, TeamMemberSectionComponent, TestimonialFullwidthComponent, TestimonialSectionComponent, TestimonialVideoComponent, TextBackgroundDirectiveDirective, TextImageSectionComponent, TextPosition, TextSectionComponent, UserProfileComponent, UspVideoSectionComponent, VALIGN, VerifyComponent, VideoSectionComponent, ViewBlogComponent, WhislistComponent, animation, animationType, applySpacing, applyStyle, cartType, contentAlignment, fitContent, fitScreen, fontSize, logoDirection, logoSpeed, logoType, mapStyle, showCaseType, simpoConetenAlignmentDirective, svgData };
|
|
15946
16109
|
//# sourceMappingURL=simpo-component-library.mjs.map
|