simpo-component-library 1.1.3 → 1.1.4
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/directive/animation-directive.mjs +57 -3
- package/esm2022/lib/sections/faq-section/faq-section.component.mjs +13 -4
- package/esm2022/lib/sections/video-section/video-section.component.mjs +3 -3
- package/fesm2022/simpo-component-library.mjs +69 -7
- package/fesm2022/simpo-component-library.mjs.map +1 -1
- package/lib/directive/animation-directive.d.ts +3 -0
- package/lib/sections/faq-section/faq-section.component.d.ts +2 -0
- package/package.json +1 -1
- package/simpo-component-library-1.1.4.tgz +0 -0
- package/simpo-component-library-1.1.3.tgz +0 -0
|
@@ -1116,15 +1116,69 @@ class AnimationDirective {
|
|
|
1116
1116
|
});
|
|
1117
1117
|
}
|
|
1118
1118
|
ngOnDestroy() {
|
|
1119
|
+
if (this.observer) {
|
|
1120
|
+
this.observer.disconnect();
|
|
1121
|
+
}
|
|
1119
1122
|
if (this.eventServiceSubscription) {
|
|
1120
1123
|
this.eventServiceSubscription.unsubscribe();
|
|
1121
1124
|
}
|
|
1122
1125
|
}
|
|
1123
1126
|
ngOnInit() {
|
|
1124
|
-
this.
|
|
1127
|
+
this.createObserver();
|
|
1128
|
+
// this.applyAnimation();
|
|
1125
1129
|
}
|
|
1126
1130
|
ngOnChanges() {
|
|
1127
|
-
this.applyAnimation();
|
|
1131
|
+
// this.applyAnimation();
|
|
1132
|
+
}
|
|
1133
|
+
createObserver() {
|
|
1134
|
+
const options = {
|
|
1135
|
+
root: null, // Use the viewport as the container
|
|
1136
|
+
threshold: 0.1 // Percentage of element visibility required to trigger the callback
|
|
1137
|
+
};
|
|
1138
|
+
if (typeof window !== 'undefined' && 'IntersectionObserver' in window) {
|
|
1139
|
+
this.observer = new IntersectionObserver((entries) => {
|
|
1140
|
+
entries.forEach(entry => {
|
|
1141
|
+
if (entry.isIntersecting &&
|
|
1142
|
+
!this.el.nativeElement.className.includes('visible')) {
|
|
1143
|
+
this.el.nativeElement.classList.add('visible');
|
|
1144
|
+
this.el.nativeElement.style.setProperty('position', 'relative');
|
|
1145
|
+
this.el.nativeElement.style.setProperty('animation-name', this.getAnimationName());
|
|
1146
|
+
if (this.animationData?.speed) {
|
|
1147
|
+
const speed = animation.speed[this.animationData?.speed];
|
|
1148
|
+
this.el.nativeElement.style.setProperty('animation-duration', this.getAnimationSpeed(this.animationData.speed));
|
|
1149
|
+
}
|
|
1150
|
+
this.observer?.unobserve(this.el.nativeElement);
|
|
1151
|
+
}
|
|
1152
|
+
});
|
|
1153
|
+
}, options);
|
|
1154
|
+
this.observer.observe(this.el.nativeElement);
|
|
1155
|
+
}
|
|
1156
|
+
}
|
|
1157
|
+
getAnimationName() {
|
|
1158
|
+
if (this.animationData?.type) {
|
|
1159
|
+
if (this.animationData?.type == 'left') {
|
|
1160
|
+
return 'animateleft';
|
|
1161
|
+
}
|
|
1162
|
+
if (this.animationData?.type == 'right') {
|
|
1163
|
+
return 'animateright';
|
|
1164
|
+
}
|
|
1165
|
+
if (this.animationData?.type == 'top') {
|
|
1166
|
+
return 'animatetop';
|
|
1167
|
+
}
|
|
1168
|
+
if (this.animationData?.type == 'bottom') {
|
|
1169
|
+
return 'animatebottom';
|
|
1170
|
+
}
|
|
1171
|
+
if (this.animationData?.type == 'fadeIn') {
|
|
1172
|
+
return 'opac';
|
|
1173
|
+
}
|
|
1174
|
+
if (this.animationData?.type == 'zoom') {
|
|
1175
|
+
return 'animatezoom';
|
|
1176
|
+
}
|
|
1177
|
+
if (this.animationData?.type === 'none') {
|
|
1178
|
+
return 'none';
|
|
1179
|
+
}
|
|
1180
|
+
}
|
|
1181
|
+
return null;
|
|
1128
1182
|
}
|
|
1129
1183
|
applyAnimation() {
|
|
1130
1184
|
if (this.animationData?.type) {
|
|
@@ -2067,6 +2121,7 @@ class FaqSectionComponent extends BaseSection {
|
|
|
2067
2121
|
constructor(_eventService) {
|
|
2068
2122
|
super();
|
|
2069
2123
|
this._eventService = _eventService;
|
|
2124
|
+
this.unCollapsedList = [];
|
|
2070
2125
|
}
|
|
2071
2126
|
ngOnInit() {
|
|
2072
2127
|
this.content = this.data?.content;
|
|
@@ -2079,6 +2134,12 @@ class FaqSectionComponent extends BaseSection {
|
|
|
2079
2134
|
get stylesLayout() {
|
|
2080
2135
|
return { ...this.style?.layout };
|
|
2081
2136
|
}
|
|
2137
|
+
toggleContent(idx) {
|
|
2138
|
+
if (this.unCollapsedList.includes(idx))
|
|
2139
|
+
this.unCollapsedList = this.unCollapsedList.filter((index) => idx != index);
|
|
2140
|
+
else
|
|
2141
|
+
this.unCollapsedList.push(idx);
|
|
2142
|
+
}
|
|
2082
2143
|
editSection() {
|
|
2083
2144
|
this._eventService.toggleEditorEvent.emit(false);
|
|
2084
2145
|
setTimeout(() => {
|
|
@@ -2086,9 +2147,9 @@ class FaqSectionComponent extends BaseSection {
|
|
|
2086
2147
|
}, 100);
|
|
2087
2148
|
}
|
|
2088
2149
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: FaqSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2089
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: FaqSectionComponent, isStandalone: true, selector: "simpo-faq-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\"
|
|
2150
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: FaqSectionComponent, isStandalone: true, selector: "simpo-faq-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" \r\n class=\"total-container\">\r\n <div class=\"col-xxl-8 px-4 py-5 w-100\" #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\"\r\n [simpoBorder]=\"style?.border\" [simpoAnimation]=\"style?.animation\">\r\n\r\n <div *ngIf=\"!content?.image?.showImage\">\r\n <div class=\"container-fluid flex-col\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n [simpoLayout]=\"style?.layout\">\r\n <div *ngFor=\"let text of data?.content?.inputText\" class=\"\" [simpoContentTitleSpace]=\"headingSpace\">\r\n <simpo-heading-element [data]=\"text.value\"></simpo-heading-element>\r\n </div>\r\n\r\n <div *ngFor=\"let itemData of content?.listItem?.data;let i = index\" class=\"data\"(click)=\"toggleContent(i)\">\r\n <p class=\"heading-medium d-flex align-items-center justify-content-between\" data-toggle=\"collapse\">\r\n <span>{{itemData.inputText[0].value}}</span>\r\n <mat-icon *ngIf=\"unCollapsedList.includes(i)\">keyboard_arrow_up</mat-icon>\r\n <mat-icon *ngIf=\"!unCollapsedList.includes(i)\">keyboard_arrow_down</mat-icon>\r\n </p>\r\n <div class=\"body-large desc multi-collapse\" [ngClass]=\"{'collapse': unCollapsedList.includes(i)}\">itemData.inputText[1].value</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"content?.image?.showImage\" class=\"row g-5\" [id]=\"data?.id\"\r\n [simpoLayout]=\"style?.layout\" [simpoPositionLayoutDirective]=\"style?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': style?.positionLayout?.value === 'left' || style?.positionLayout?.value === 'right' }\">\r\n\r\n\r\n <div class=\"col-lg-6 d-flex flex-column justify-content-start gap-15\" [id]=\"data?.id\"\r\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"style?.contentAlignment\">\r\n\r\n <div *ngFor=\"let text of data?.content?.inputText\" class=\"\" [simpoContentTitleSpace]=\"headingSpace\">\r\n <simpo-heading-element [data]=\"text.value\"></simpo-heading-element>\r\n </div>\r\n\r\n <div *ngFor=\"let itemData of content?.listItem?.data;let i = index\" class=\"data\" (click)=\"toggleContent(i)\">\r\n <p class=\"heading-medium d-flex align-items-center justify-content-between\" data-toggle=\"collapse\">\r\n <span>{{itemData.inputText[0].value}}</span>\r\n <mat-icon *ngIf=\"unCollapsedList.includes(i)\">keyboard_arrow_up</mat-icon>\r\n <mat-icon *ngIf=\"!unCollapsedList.includes(i)\">keyboard_arrow_down</mat-icon>\r\n </p>\r\n <div class=\"body-large desc multi-collapse\" [ngClass]=\"{'collapse': unCollapsedList.includes(i)}\">{{itemData.inputText[1].value}}</div>\r\n </div>\r\n </div>\r\n <div class=\"col-10 col-sm-8 col-lg-6\" [simpoContainerAlignment]=\"stylesLayout\" *ngIf=\"content?.image?.showImage\">\r\n <img [src]=\"content?.image?.url\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block mx-lg-auto img-fluid h-100\"\r\n [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" />\r\n </div>\r\n </div>\r\n </div>\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", styles: [".mb-2{margin-bottom:2.5rem!important}.data{display:flex;flex-direction:column;gap:1rem;padding-top:2.5rem;padding-bottom:2.5rem;box-shadow:#11182733 0 -1px inset;cursor:pointer}.flex-col{display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{height:auto;position:relative}.heading-large{margin-top:20px}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: HeadingElementComponent, selector: "simpo-heading-element", inputs: ["data"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type:
|
|
2090
2151
|
//directive
|
|
2091
|
-
AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type:
|
|
2152
|
+
AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }] }); }
|
|
2092
2153
|
}
|
|
2093
2154
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: FaqSectionComponent, decorators: [{
|
|
2094
2155
|
type: Component,
|
|
@@ -2097,6 +2158,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
|
|
|
2097
2158
|
CommonModule,
|
|
2098
2159
|
ContentFitDirective,
|
|
2099
2160
|
SimpoComponentModule,
|
|
2161
|
+
MatIcon,
|
|
2100
2162
|
//directive
|
|
2101
2163
|
AnimationDirective,
|
|
2102
2164
|
BackgroundDirective,
|
|
@@ -2117,7 +2179,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
|
|
|
2117
2179
|
ContentTitleDirective,
|
|
2118
2180
|
ObjectPositionDirective,
|
|
2119
2181
|
SimpoContainerAligment
|
|
2120
|
-
], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\"
|
|
2182
|
+
], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" \r\n class=\"total-container\">\r\n <div class=\"col-xxl-8 px-4 py-5 w-100\" #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\"\r\n [simpoBorder]=\"style?.border\" [simpoAnimation]=\"style?.animation\">\r\n\r\n <div *ngIf=\"!content?.image?.showImage\">\r\n <div class=\"container-fluid flex-col\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n [simpoLayout]=\"style?.layout\">\r\n <div *ngFor=\"let text of data?.content?.inputText\" class=\"\" [simpoContentTitleSpace]=\"headingSpace\">\r\n <simpo-heading-element [data]=\"text.value\"></simpo-heading-element>\r\n </div>\r\n\r\n <div *ngFor=\"let itemData of content?.listItem?.data;let i = index\" class=\"data\"(click)=\"toggleContent(i)\">\r\n <p class=\"heading-medium d-flex align-items-center justify-content-between\" data-toggle=\"collapse\">\r\n <span>{{itemData.inputText[0].value}}</span>\r\n <mat-icon *ngIf=\"unCollapsedList.includes(i)\">keyboard_arrow_up</mat-icon>\r\n <mat-icon *ngIf=\"!unCollapsedList.includes(i)\">keyboard_arrow_down</mat-icon>\r\n </p>\r\n <div class=\"body-large desc multi-collapse\" [ngClass]=\"{'collapse': unCollapsedList.includes(i)}\">itemData.inputText[1].value</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"content?.image?.showImage\" class=\"row g-5\" [id]=\"data?.id\"\r\n [simpoLayout]=\"style?.layout\" [simpoPositionLayoutDirective]=\"style?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': style?.positionLayout?.value === 'left' || style?.positionLayout?.value === 'right' }\">\r\n\r\n\r\n <div class=\"col-lg-6 d-flex flex-column justify-content-start gap-15\" [id]=\"data?.id\"\r\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"style?.contentAlignment\">\r\n\r\n <div *ngFor=\"let text of data?.content?.inputText\" class=\"\" [simpoContentTitleSpace]=\"headingSpace\">\r\n <simpo-heading-element [data]=\"text.value\"></simpo-heading-element>\r\n </div>\r\n\r\n <div *ngFor=\"let itemData of content?.listItem?.data;let i = index\" class=\"data\" (click)=\"toggleContent(i)\">\r\n <p class=\"heading-medium d-flex align-items-center justify-content-between\" data-toggle=\"collapse\">\r\n <span>{{itemData.inputText[0].value}}</span>\r\n <mat-icon *ngIf=\"unCollapsedList.includes(i)\">keyboard_arrow_up</mat-icon>\r\n <mat-icon *ngIf=\"!unCollapsedList.includes(i)\">keyboard_arrow_down</mat-icon>\r\n </p>\r\n <div class=\"body-large desc multi-collapse\" [ngClass]=\"{'collapse': unCollapsedList.includes(i)}\">{{itemData.inputText[1].value}}</div>\r\n </div>\r\n </div>\r\n <div class=\"col-10 col-sm-8 col-lg-6\" [simpoContainerAlignment]=\"stylesLayout\" *ngIf=\"content?.image?.showImage\">\r\n <img [src]=\"content?.image?.url\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block mx-lg-auto img-fluid h-100\"\r\n [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" />\r\n </div>\r\n </div>\r\n </div>\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", styles: [".mb-2{margin-bottom:2.5rem!important}.data{display:flex;flex-direction:column;gap:1rem;padding-top:2.5rem;padding-bottom:2.5rem;box-shadow:#11182733 0 -1px inset;cursor:pointer}.flex-col{display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{height:auto;position:relative}.heading-large{margin-top:20px}\n"] }]
|
|
2121
2183
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
2122
2184
|
type: Input
|
|
2123
2185
|
}], index: [{
|
|
@@ -2691,7 +2753,7 @@ class VideoSectionComponent extends BaseSection {
|
|
|
2691
2753
|
}, 100);
|
|
2692
2754
|
}
|
|
2693
2755
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: VideoSectionComponent, deps: [{ token: i1.DomSanitizer }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2694
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: VideoSectionComponent, isStandalone: true, selector: "simpo-video-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" (click)=\"editSection()\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div class=\"container-fluid main-section\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n [simpoLayout]=\"style?.layout\">\r\n <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n\r\n <div *ngFor=\"let text of data?.content?.inputText\" class=\"heading-large\" [innerHTML]=\"text.value\" [simpoContentTitleSpace]=\"headingSpace\">\r\n </div>\r\n\r\n\r\n <div class=\"video-section\" [ngStyle]=\"style?.fullScreen ? {'padding': '0px', 'margin': '0px'} : {}\">\r\n <iframe class=\"video\"\r\n [ngClass]=\"{'h-80': style?.layout?.fit === 'content', 'video': style?.layout?.fit === 'screen'}\"\r\n
|
|
2756
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: VideoSectionComponent, isStandalone: true, selector: "simpo-video-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" (click)=\"editSection()\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div class=\"container-fluid main-section\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n [simpoLayout]=\"style?.layout\">\r\n <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n\r\n <div *ngFor=\"let text of data?.content?.inputText\" class=\"heading-large\" [innerHTML]=\"text.value\" [simpoContentTitleSpace]=\"headingSpace\">\r\n </div>\r\n\r\n\r\n <div class=\"video-section\" [ngStyle]=\"style?.fullScreen ? {'padding': '0px', 'margin': '0px'} : {}\">\r\n <iframe class=\"video\"\r\n [ngClass]=\"{'h-80': style?.layout?.fit === 'content', 'video': style?.layout?.fit === 'screen'}\"\r\n id=\"iframe\" frameborder=\"0\" allowfullscreen></iframe>\r\n\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: [".total-container{height:auto;position:relative}.video{width:100%;height:100vh}.main-section{width:100%;height:100%!important;display:block!important}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type:
|
|
2695
2757
|
//directive
|
|
2696
2758
|
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: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }] }); }
|
|
2697
2759
|
}
|
|
@@ -2721,7 +2783,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
|
|
|
2721
2783
|
OverlayDirective,
|
|
2722
2784
|
PositionLayoutDirectiveDirective,
|
|
2723
2785
|
TextBackgroundDirectiveDirective
|
|
2724
|
-
], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" (click)=\"editSection()\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div class=\"container-fluid main-section\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n [simpoLayout]=\"style?.layout\">\r\n <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n\r\n <div *ngFor=\"let text of data?.content?.inputText\" class=\"heading-large\" [innerHTML]=\"text.value\" [simpoContentTitleSpace]=\"headingSpace\">\r\n </div>\r\n\r\n\r\n <div class=\"video-section\" [ngStyle]=\"style?.fullScreen ? {'padding': '0px', 'margin': '0px'} : {}\">\r\n <iframe class=\"video\"\r\n [ngClass]=\"{'h-80': style?.layout?.fit === 'content', 'video': style?.layout?.fit === 'screen'}\"\r\n
|
|
2786
|
+
], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" (click)=\"editSection()\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div class=\"container-fluid main-section\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n [simpoLayout]=\"style?.layout\">\r\n <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n\r\n <div *ngFor=\"let text of data?.content?.inputText\" class=\"heading-large\" [innerHTML]=\"text.value\" [simpoContentTitleSpace]=\"headingSpace\">\r\n </div>\r\n\r\n\r\n <div class=\"video-section\" [ngStyle]=\"style?.fullScreen ? {'padding': '0px', 'margin': '0px'} : {}\">\r\n <iframe class=\"video\"\r\n [ngClass]=\"{'h-80': style?.layout?.fit === 'content', 'video': style?.layout?.fit === 'screen'}\"\r\n id=\"iframe\" frameborder=\"0\" allowfullscreen></iframe>\r\n\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: [".total-container{height:auto;position:relative}.video{width:100%;height:100vh}.main-section{width:100%;height:100%!important;display:block!important}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"] }]
|
|
2725
2787
|
}], ctorParameters: () => [{ type: i1.DomSanitizer }, { type: EventsService }], propDecorators: { data: [{
|
|
2726
2788
|
type: Input
|
|
2727
2789
|
}], index: [{
|