simpo-component-library 3.6.581 → 3.6.583
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/sections/countdown-banner/countdown-banner.component.mjs +50 -38
- package/esm2022/lib/sections/overlapping-image/overlapping-image.component.mjs +3 -3
- package/fesm2022/simpo-component-library.mjs +51 -39
- package/fesm2022/simpo-component-library.mjs.map +1 -1
- package/lib/ecommerce/sections/authentication-required/authentication-required.component.d.ts +1 -1
- package/lib/ecommerce/sections/featured-category/featured-category.component.d.ts +1 -1
- package/lib/ecommerce/sections/featured-category/featured-collection.component.d.ts +1 -1
- package/lib/ecommerce/sections/new-collection/new-collection.component.d.ts +1 -1
- package/lib/ecommerce/sections/product-desc/product-desc.component.d.ts +1 -1
- package/lib/ecommerce/sections/schemes/schemes.component.d.ts +1 -1
- package/lib/elements/link-editor/link-editor.component.d.ts +1 -1
- 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/contact-us/contact-us.component.d.ts +1 -1
- package/lib/sections/countdown-banner/countdown-banner.component.d.ts +6 -2
- package/lib/sections/faq-section/faq-section.component.d.ts +1 -1
- package/lib/sections/image-grid-hotspot/image-grid-hotspot.component.d.ts +1 -1
- package/lib/sections/image-grid-section/image-grid-section.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 +2 -2
- package/lib/sections/new-testimonials/new-testimonials.component.d.ts +1 -1
- package/lib/sections/pricing-section/pricing-section.component.d.ts +2 -2
- package/package.json +1 -1
- package/simpo-component-library-3.6.583.tgz +0 -0
- package/simpo-component-library-3.6.581.tgz +0 -0
|
@@ -23822,48 +23822,60 @@ class CountdownBannerComponent extends BaseSection {
|
|
|
23822
23822
|
this.minutes = '00';
|
|
23823
23823
|
this.seconds = '00';
|
|
23824
23824
|
this.bannerText = '';
|
|
23825
|
+
this.targetDate = "2026-02-17T00:00:00";
|
|
23826
|
+
this.currentTime = Date.now();
|
|
23825
23827
|
}
|
|
23826
23828
|
ngOnInit() {
|
|
23827
23829
|
this.content = this.data?.content;
|
|
23828
23830
|
this.style = this.data?.styles;
|
|
23829
23831
|
this.bannerText = this.content?.inputText[0].value ?? '';
|
|
23830
|
-
|
|
23831
|
-
this.
|
|
23832
|
-
});
|
|
23833
|
-
}
|
|
23834
|
-
startCountdown() {
|
|
23835
|
-
if (!this.content?.endDate)
|
|
23836
|
-
return;
|
|
23837
|
-
// Clear previous interval if running
|
|
23838
|
-
if (this.interval) {
|
|
23839
|
-
clearInterval(this.interval);
|
|
23840
|
-
}
|
|
23841
|
-
// Parse target date safely (local time)
|
|
23842
|
-
const target = new Date(this.content.endDate);
|
|
23843
|
-
this.interval = setInterval(() => {
|
|
23844
|
-
const now = new Date();
|
|
23845
|
-
const distance = target.getTime() - now.getTime();
|
|
23846
|
-
if (distance <= 0) {
|
|
23847
|
-
clearInterval(this.interval);
|
|
23848
|
-
this.resetTimer();
|
|
23849
|
-
return;
|
|
23850
|
-
}
|
|
23851
|
-
const totalSeconds = Math.floor(distance / 1000);
|
|
23852
|
-
const days = Math.floor(totalSeconds / (60 * 60 * 24));
|
|
23853
|
-
const hours = Math.floor((totalSeconds % (60 * 60 * 24)) / (60 * 60));
|
|
23854
|
-
const minutes = Math.floor((totalSeconds % (60 * 60)) / 60);
|
|
23855
|
-
const seconds = totalSeconds % 60;
|
|
23856
|
-
this.days = String(days).padStart(2, '0');
|
|
23857
|
-
this.hours = String(hours).padStart(2, '0');
|
|
23858
|
-
this.minutes = String(minutes).padStart(2, '0');
|
|
23859
|
-
this.seconds = String(seconds).padStart(2, '0');
|
|
23832
|
+
setInterval(() => {
|
|
23833
|
+
this.currentTime = Date.now();
|
|
23860
23834
|
}, 1000);
|
|
23861
23835
|
}
|
|
23862
|
-
|
|
23863
|
-
|
|
23864
|
-
|
|
23865
|
-
|
|
23866
|
-
|
|
23836
|
+
getDays(dateString) {
|
|
23837
|
+
if (!dateString)
|
|
23838
|
+
return 0;
|
|
23839
|
+
const target = new Date(dateString).getTime();
|
|
23840
|
+
if (isNaN(target))
|
|
23841
|
+
return 0;
|
|
23842
|
+
const difference = target - this.currentTime;
|
|
23843
|
+
if (difference <= 0)
|
|
23844
|
+
return 0;
|
|
23845
|
+
return Math.floor(difference / (1000 * 60 * 60 * 24));
|
|
23846
|
+
}
|
|
23847
|
+
getHours(dateString) {
|
|
23848
|
+
if (!dateString)
|
|
23849
|
+
return 0;
|
|
23850
|
+
const target = new Date(dateString).getTime();
|
|
23851
|
+
if (isNaN(target))
|
|
23852
|
+
return 0;
|
|
23853
|
+
const difference = target - this.currentTime;
|
|
23854
|
+
if (difference <= 0)
|
|
23855
|
+
return 0;
|
|
23856
|
+
return Math.floor((difference / (1000 * 60 * 60)) % 24);
|
|
23857
|
+
}
|
|
23858
|
+
getMinutes(dateString) {
|
|
23859
|
+
if (!dateString)
|
|
23860
|
+
return 0;
|
|
23861
|
+
const target = new Date(dateString).getTime();
|
|
23862
|
+
if (isNaN(target))
|
|
23863
|
+
return 0;
|
|
23864
|
+
const difference = target - this.currentTime;
|
|
23865
|
+
if (difference <= 0)
|
|
23866
|
+
return 0;
|
|
23867
|
+
return Math.floor((difference / (1000 * 60)) % 60);
|
|
23868
|
+
}
|
|
23869
|
+
getSeconds(dateString) {
|
|
23870
|
+
if (!dateString)
|
|
23871
|
+
return 0;
|
|
23872
|
+
const target = new Date(dateString).getTime();
|
|
23873
|
+
if (isNaN(target))
|
|
23874
|
+
return 0;
|
|
23875
|
+
const difference = target - this.currentTime;
|
|
23876
|
+
if (difference <= 0)
|
|
23877
|
+
return 0;
|
|
23878
|
+
return Math.floor((difference / 1000) % 60);
|
|
23867
23879
|
}
|
|
23868
23880
|
get stylesLayout() {
|
|
23869
23881
|
return { ...this.style?.layout };
|
|
@@ -23926,7 +23938,7 @@ class CountdownBannerComponent extends BaseSection {
|
|
|
23926
23938
|
}
|
|
23927
23939
|
}
|
|
23928
23940
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CountdownBannerComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
23929
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CountdownBannerComponent, isStandalone: true, selector: "simpo-countdown-banner", inputs: { edit: "edit", data: "data", customClass: "customClass", nextComponentColor: "nextComponentColor", index: "index", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<!-- <section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\"\r\n [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"style?.layout\" [ngClass]=\"{\r\n 'justify-content-center': style?.layout?.align === 'center',\r\n 'justify-content-start': style?.layout?.align === 'left',\r\n 'justify-content-end': style?.layout?.align === 'right'\r\n }\">\r\n <div class=\"d-flex align-items-center gap-3\">\r\n <div class=\"w-50\" [id]=\"data?.id\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [ngClass]=\"item.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"countdown-container w-50\">\r\n <div class=\"timer\">\r\n <div> \r\n <span id=\"days\">{{days}}</span>\r\n <small>DAYS</small>\r\n </div>\r\n <div>\r\n <span id=\"hours\">{{hours}}</span>\r\n <small>HOURS</small>\r\n </div>\r\n <div>\r\n <span id=\"minutes\">{{minutes}}</span>\r\n <small>MINS</small>\r\n </div>\r\n <div>\r\n <span id=\"seconds\">{{seconds}}</span>\r\n <small>SECS</small>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <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\r\n\r\n<section>\r\n <div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"sale-wrapper total-container\"\r\n [attr.style]=\"customClass\" [simpoBackground]=\"style?.background\" [simpoOverlay]=\"style?.background\">\r\n <div #mainContainer [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\"
|
|
23941
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CountdownBannerComponent, isStandalone: true, selector: "simpo-countdown-banner", inputs: { edit: "edit", data: "data", customClass: "customClass", nextComponentColor: "nextComponentColor", index: "index", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<!-- <section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\"\r\n [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"style?.layout\" [ngClass]=\"{\r\n 'justify-content-center': style?.layout?.align === 'center',\r\n 'justify-content-start': style?.layout?.align === 'left',\r\n 'justify-content-end': style?.layout?.align === 'right'\r\n }\">\r\n <div class=\"d-flex align-items-center gap-3\">\r\n <div class=\"w-50\" [id]=\"data?.id\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [ngClass]=\"item.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"countdown-container w-50\">\r\n <div class=\"timer\">\r\n <div> \r\n <span id=\"days\">{{days}}</span>\r\n <small>DAYS</small>\r\n </div>\r\n <div>\r\n <span id=\"hours\">{{hours}}</span>\r\n <small>HOURS</small>\r\n </div>\r\n <div>\r\n <span id=\"minutes\">{{minutes}}</span>\r\n <small>MINS</small>\r\n </div>\r\n <div>\r\n <span id=\"seconds\">{{seconds}}</span>\r\n <small>SECS</small>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <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\r\n\r\n<section>\r\n <div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"sale-wrapper total-container\"\r\n [attr.style]=\"customClass\" [simpoBackground]=\"style?.background\" [simpoOverlay]=\"style?.background\">\r\n <div #mainContainer [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"style?.layout\"\r\n class=\"sale-bar\">\r\n <!-- LEFT TEXT -->\r\n <div class=\"sale-text\">\r\n <simpo-text-editor [(value)]=\"bannerText\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n\r\n <!-- TIMER -->\r\n <div class=\"sale-timer\" [style.color]=\"getContrastColor(style?.background?.accentColor)\">\r\n <div class=\"time-card\" [ngStyle]=\"{'background':getAccentBackground() }\">\r\n <span>{{ getDays(content?.endDate)}}</span>\r\n <small>DAY</small>\r\n </div>\r\n <div class=\"time-card\" [ngStyle]=\"{'background':getAccentBackground() }\">\r\n <span>{{ getHours(content?.endDate) }}</span>\r\n <small>HOUR</small>\r\n </div>\r\n <div class=\"time-card\" [ngStyle]=\"{'background':getAccentBackground() }\">\r\n <span>{{ getMinutes(content?.endDate) }}</span>\r\n <small>MIN</small>\r\n </div>\r\n <div class=\"time-card\" [ngStyle]=\"{'background':getAccentBackground() }\">\r\n <span>{{ getSeconds(content?.endDate) }}</span>\r\n <small>SEC</small>\r\n </div>\r\n </div>\r\n\r\n <!-- RIGHT ACTION -->\r\n <div class=\"sale-action\">\r\n <ng-container *ngIf=\"data?.action?.display\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- Divider -->\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\r\n <!-- EDIT SELECTOR -->\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\r\n <!-- DELETE SELECTOR -->\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{ hover_effect: delete }\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n </div>\r\n</section>", styles: [".sale-wrapper{width:100%}.total-container{height:auto;position:relative}.sale-bar{width:100%;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:28px 50px}.sale-text{font-size:26px;font-weight:600}.sale-timer{display:flex;gap:18px}.time-card{background-color:#fff;padding:6px 14px;border-radius:8px;text-align:center;min-width:60px}.time-card span{display:block;font-size:18px;font-weight:600}.time-card small{font-size:11px;letter-spacing:1px;font-weight:500}.sale-action{display:flex;align-items:center;gap:20px}.shop-button{background-color:#fff;color:#1c2a39;border:none;padding:5px 14px;border-radius:30px;font-size:14px;font-weight:500;cursor:pointer;transition:.3s ease}.shop-button:hover{background-color:#f2f2f2}.close-icon{font-size:20px;cursor:pointer;opacity:.8}.close-icon:hover{opacity:1}@media (max-width: 768px){.sale-bar{flex-direction:column;gap:20px;text-align:center}.sale-action{justify-content:center}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }] }); }
|
|
23930
23942
|
}
|
|
23931
23943
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CountdownBannerComponent, decorators: [{
|
|
23932
23944
|
type: Component,
|
|
@@ -23941,7 +23953,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
23941
23953
|
SpacingHorizontalDirective,
|
|
23942
23954
|
BorderDirective,
|
|
23943
23955
|
ContentFitDirective
|
|
23944
|
-
], template: "<!-- <section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\"\r\n [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"style?.layout\" [ngClass]=\"{\r\n 'justify-content-center': style?.layout?.align === 'center',\r\n 'justify-content-start': style?.layout?.align === 'left',\r\n 'justify-content-end': style?.layout?.align === 'right'\r\n }\">\r\n <div class=\"d-flex align-items-center gap-3\">\r\n <div class=\"w-50\" [id]=\"data?.id\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [ngClass]=\"item.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"countdown-container w-50\">\r\n <div class=\"timer\">\r\n <div> \r\n <span id=\"days\">{{days}}</span>\r\n <small>DAYS</small>\r\n </div>\r\n <div>\r\n <span id=\"hours\">{{hours}}</span>\r\n <small>HOURS</small>\r\n </div>\r\n <div>\r\n <span id=\"minutes\">{{minutes}}</span>\r\n <small>MINS</small>\r\n </div>\r\n <div>\r\n <span id=\"seconds\">{{seconds}}</span>\r\n <small>SECS</small>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <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\r\n\r\n<section>\r\n <div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"sale-wrapper total-container\"\r\n [attr.style]=\"customClass\" [simpoBackground]=\"style?.background\" [simpoOverlay]=\"style?.background\">\r\n <div #mainContainer [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\"
|
|
23956
|
+
], template: "<!-- <section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\"\r\n [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"style?.layout\" [ngClass]=\"{\r\n 'justify-content-center': style?.layout?.align === 'center',\r\n 'justify-content-start': style?.layout?.align === 'left',\r\n 'justify-content-end': style?.layout?.align === 'right'\r\n }\">\r\n <div class=\"d-flex align-items-center gap-3\">\r\n <div class=\"w-50\" [id]=\"data?.id\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [ngClass]=\"item.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"countdown-container w-50\">\r\n <div class=\"timer\">\r\n <div> \r\n <span id=\"days\">{{days}}</span>\r\n <small>DAYS</small>\r\n </div>\r\n <div>\r\n <span id=\"hours\">{{hours}}</span>\r\n <small>HOURS</small>\r\n </div>\r\n <div>\r\n <span id=\"minutes\">{{minutes}}</span>\r\n <small>MINS</small>\r\n </div>\r\n <div>\r\n <span id=\"seconds\">{{seconds}}</span>\r\n <small>SECS</small>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <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\r\n\r\n<section>\r\n <div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"sale-wrapper total-container\"\r\n [attr.style]=\"customClass\" [simpoBackground]=\"style?.background\" [simpoOverlay]=\"style?.background\">\r\n <div #mainContainer [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"style?.layout\"\r\n class=\"sale-bar\">\r\n <!-- LEFT TEXT -->\r\n <div class=\"sale-text\">\r\n <simpo-text-editor [(value)]=\"bannerText\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n\r\n <!-- TIMER -->\r\n <div class=\"sale-timer\" [style.color]=\"getContrastColor(style?.background?.accentColor)\">\r\n <div class=\"time-card\" [ngStyle]=\"{'background':getAccentBackground() }\">\r\n <span>{{ getDays(content?.endDate)}}</span>\r\n <small>DAY</small>\r\n </div>\r\n <div class=\"time-card\" [ngStyle]=\"{'background':getAccentBackground() }\">\r\n <span>{{ getHours(content?.endDate) }}</span>\r\n <small>HOUR</small>\r\n </div>\r\n <div class=\"time-card\" [ngStyle]=\"{'background':getAccentBackground() }\">\r\n <span>{{ getMinutes(content?.endDate) }}</span>\r\n <small>MIN</small>\r\n </div>\r\n <div class=\"time-card\" [ngStyle]=\"{'background':getAccentBackground() }\">\r\n <span>{{ getSeconds(content?.endDate) }}</span>\r\n <small>SEC</small>\r\n </div>\r\n </div>\r\n\r\n <!-- RIGHT ACTION -->\r\n <div class=\"sale-action\">\r\n <ng-container *ngIf=\"data?.action?.display\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- Divider -->\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\r\n <!-- EDIT SELECTOR -->\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\r\n <!-- DELETE SELECTOR -->\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{ hover_effect: delete }\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n </div>\r\n</section>", styles: [".sale-wrapper{width:100%}.total-container{height:auto;position:relative}.sale-bar{width:100%;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:28px 50px}.sale-text{font-size:26px;font-weight:600}.sale-timer{display:flex;gap:18px}.time-card{background-color:#fff;padding:6px 14px;border-radius:8px;text-align:center;min-width:60px}.time-card span{display:block;font-size:18px;font-weight:600}.time-card small{font-size:11px;letter-spacing:1px;font-weight:500}.sale-action{display:flex;align-items:center;gap:20px}.shop-button{background-color:#fff;color:#1c2a39;border:none;padding:5px 14px;border-radius:30px;font-size:14px;font-weight:500;cursor:pointer;transition:.3s ease}.shop-button:hover{background-color:#f2f2f2}.close-icon{font-size:20px;cursor:pointer;opacity:.8}.close-icon:hover{opacity:1}@media (max-width: 768px){.sale-bar{flex-direction:column;gap:20px;text-align:center}.sale-action{justify-content:center}}\n"] }]
|
|
23945
23957
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { edit: [{
|
|
23946
23958
|
type: Input
|
|
23947
23959
|
}], data: [{
|
|
@@ -24001,7 +24013,7 @@ class OverlappingImageComponent extends BaseSection {
|
|
|
24001
24013
|
: `linear-gradient(${bg.accentColor}, ${bg.secondaryAccentColor})`;
|
|
24002
24014
|
}
|
|
24003
24015
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OverlappingImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
24004
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: OverlappingImageComponent, isStandalone: true, selector: "simpo-overlapping-image", inputs: { nextComponentColor: "nextComponentColor", data: "data", edit: "edit", index: "index", customClass: "customClass", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<section class=\"cta-section total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\" [simpoOverlay]=\"styles?.background\">\r\n <div class=\"cta-wrapper\" #mainContainer [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"cta-content w-100 d-flex justify-content-center\">\r\n <div class=\"d-flex flex-column gap-4 section-content position-relative\" [id]=\"data?.id\"\r\n [simpoCorner]=\"styles?.corners\"
|
|
24016
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: OverlappingImageComponent, isStandalone: true, selector: "simpo-overlapping-image", inputs: { nextComponentColor: "nextComponentColor", data: "data", edit: "edit", index: "index", customClass: "customClass", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<section class=\"cta-section total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\" [simpoOverlay]=\"styles?.background\">\r\n <div class=\"cta-wrapper\" #mainContainer [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"cta-content w-100 d-flex justify-content-center\">\r\n <div class=\"d-flex flex-column gap-4 section-content position-relative\" [id]=\"data?.id\"\r\n [simpoCorner]=\"styles?.corners\"\r\n [ngStyle]=\"{'align-items' : styles?.layout?.align === 'center' ? 'center' : (styles?.layout?.align === 'left' ? 'start' : 'end'),'background':getAccentBackground() }\"\r\n [ngClass]=\"{'left-image-position' : styles?.layout?.imagePosition === 'Left' , 'right-image-position' : styles?.layout?.imagePosition === 'Right'}\">\r\n <div class=\"cta-image\" [style.left]=\"styles?.layout?.imagePosition === 'Left' ? '-10%' : ''\"\r\n [style.right]=\"styles?.layout?.imagePosition === 'Left' ? '' : '-10%'\"\r\n [style.transform]=\"styles?.layout?.imagePosition === 'Left' ? 'rotate(-6deg)' : 'rotate(6deg)'\">\r\n <img [src]=\" content?.image?.url\" class=\"h-100\" alt=\"Building\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n <simpo-text-editor [(value)]=\"heading\" [editable]=\"edit || false\"></simpo-text-editor>\r\n <simpo-text-editor [(value)]=\"subText\" [editable]=\"edit || false\"></simpo-text-editor>\r\n <ng-container *ngIf=\"data?.action?.display\">\r\n <ng-container *ngIf=\"data?.action?.buttons?.length == 1;else mutipleButtons\">\r\n <app-button-element [buttonContent]=\"data.action.buttons[0].content\"\r\n [buttonStyle]=\"data.action.buttons[0].styles\" [buttonId]=\"data.action.buttons[0].id\"\r\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #mutipleButtons>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <ng-container *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </ng-container>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".total-container{height:auto;position:relative}.cta-wrapper{display:flex;align-items:center;justify-content:center}.left-image-position{padding-left:13rem;padding-right:30px;margin-left:6rem}.right-image-position{padding-right:13rem;padding-left:30px;margin-right:6rem}.section-content{min-height:260px;width:90%;align-items:center;justify-content:center;padding-top:5px}.section-content simpo-text-editor{width:100%}.cta-content{color:#fff}.cta-content h2{font-size:36px;margin-bottom:20px}.cta-content p{font-size:16px;line-height:1.7;margin-bottom:30px;max-width:700px}.cta-btn{display:inline-block;background:#001f3f;color:#fff;padding:12px 24px;border-radius:8px;text-decoration:none;font-weight:600;transition:.3s ease}.cta-btn:hover{background:#000}.cta-image{position:absolute;z-index:2;transform:rotate(-6deg);height:340px;top:-9%}.cta-image img{width:280px;border-radius:20px;box-shadow:0 20px 40px #0003}@media (max-width: 992px){.cta-wrapper{flex-direction:column}.cta-content{padding:60px 30px;text-align:center}.cta-image{position:relative;margin-bottom:30px}.cta-image img{width:220px;transform:rotate(0)}}@media (max-width: 576px){.cta-content h2{font-size:24px}.cta-content p{font-size:14px}.cta-btn{padding:10px 20px;font-size:14px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type:
|
|
24005
24017
|
//Directives
|
|
24006
24018
|
BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }] }); }
|
|
24007
24019
|
}
|
|
@@ -24021,7 +24033,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
24021
24033
|
CornerDirective,
|
|
24022
24034
|
ImageEditorDirective,
|
|
24023
24035
|
AnimationDirective
|
|
24024
|
-
], template: "<section class=\"cta-section total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\" [simpoOverlay]=\"styles?.background\">\r\n <div class=\"cta-wrapper\" #mainContainer [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"cta-content w-100 d-flex justify-content-center\">\r\n <div class=\"d-flex flex-column gap-4 section-content position-relative\" [id]=\"data?.id\"\r\n [simpoCorner]=\"styles?.corners\"
|
|
24036
|
+
], template: "<section class=\"cta-section total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\" [simpoOverlay]=\"styles?.background\">\r\n <div class=\"cta-wrapper\" #mainContainer [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"cta-content w-100 d-flex justify-content-center\">\r\n <div class=\"d-flex flex-column gap-4 section-content position-relative\" [id]=\"data?.id\"\r\n [simpoCorner]=\"styles?.corners\"\r\n [ngStyle]=\"{'align-items' : styles?.layout?.align === 'center' ? 'center' : (styles?.layout?.align === 'left' ? 'start' : 'end'),'background':getAccentBackground() }\"\r\n [ngClass]=\"{'left-image-position' : styles?.layout?.imagePosition === 'Left' , 'right-image-position' : styles?.layout?.imagePosition === 'Right'}\">\r\n <div class=\"cta-image\" [style.left]=\"styles?.layout?.imagePosition === 'Left' ? '-10%' : ''\"\r\n [style.right]=\"styles?.layout?.imagePosition === 'Left' ? '' : '-10%'\"\r\n [style.transform]=\"styles?.layout?.imagePosition === 'Left' ? 'rotate(-6deg)' : 'rotate(6deg)'\">\r\n <img [src]=\" content?.image?.url\" class=\"h-100\" alt=\"Building\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n <simpo-text-editor [(value)]=\"heading\" [editable]=\"edit || false\"></simpo-text-editor>\r\n <simpo-text-editor [(value)]=\"subText\" [editable]=\"edit || false\"></simpo-text-editor>\r\n <ng-container *ngIf=\"data?.action?.display\">\r\n <ng-container *ngIf=\"data?.action?.buttons?.length == 1;else mutipleButtons\">\r\n <app-button-element [buttonContent]=\"data.action.buttons[0].content\"\r\n [buttonStyle]=\"data.action.buttons[0].styles\" [buttonId]=\"data.action.buttons[0].id\"\r\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #mutipleButtons>\r\n <div class=\"d-flex align-items-center justify-content-center gap-2\">\r\n <ng-container *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </ng-container>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".total-container{height:auto;position:relative}.cta-wrapper{display:flex;align-items:center;justify-content:center}.left-image-position{padding-left:13rem;padding-right:30px;margin-left:6rem}.right-image-position{padding-right:13rem;padding-left:30px;margin-right:6rem}.section-content{min-height:260px;width:90%;align-items:center;justify-content:center;padding-top:5px}.section-content simpo-text-editor{width:100%}.cta-content{color:#fff}.cta-content h2{font-size:36px;margin-bottom:20px}.cta-content p{font-size:16px;line-height:1.7;margin-bottom:30px;max-width:700px}.cta-btn{display:inline-block;background:#001f3f;color:#fff;padding:12px 24px;border-radius:8px;text-decoration:none;font-weight:600;transition:.3s ease}.cta-btn:hover{background:#000}.cta-image{position:absolute;z-index:2;transform:rotate(-6deg);height:340px;top:-9%}.cta-image img{width:280px;border-radius:20px;box-shadow:0 20px 40px #0003}@media (max-width: 992px){.cta-wrapper{flex-direction:column}.cta-content{padding:60px 30px;text-align:center}.cta-image{position:relative;margin-bottom:30px}.cta-image img{width:220px;transform:rotate(0)}}@media (max-width: 576px){.cta-content h2{font-size:24px}.cta-content p{font-size:14px}.cta-btn{padding:10px 20px;font-size:14px}}\n"] }]
|
|
24025
24037
|
}], ctorParameters: () => [], propDecorators: { nextComponentColor: [{
|
|
24026
24038
|
type: Input
|
|
24027
24039
|
}], data: [{
|