@vectoriox/iox-ui 4.0.9 → 4.1.0
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.
|
@@ -1,24 +1,493 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import {
|
|
3
|
-
import
|
|
4
|
-
import {
|
|
2
|
+
import { EventEmitter, HostListener, Output, Input, Directive, NgModule, Injectable, ViewChild, Component, Host, Optional, forwardRef, Inject, InjectionToken, PLATFORM_ID, ChangeDetectionStrategy, ViewContainerRef } from '@angular/core';
|
|
3
|
+
import * as i2 from '@angular/animations';
|
|
4
|
+
import { style, animate } from '@angular/animations';
|
|
5
|
+
import { Subject, fromEvent, of } from 'rxjs';
|
|
6
|
+
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
|
7
|
+
import { Masonry } from '@fristys/masonry';
|
|
8
|
+
import { BrowserModule } from '@angular/platform-browser';
|
|
9
|
+
import * as i1$2 from '@angular/common';
|
|
10
|
+
import { CommonModule, isPlatformBrowser } from '@angular/common';
|
|
5
11
|
import Lenis from 'lenis';
|
|
12
|
+
import * as i1 from 'ngx-cookie-service';
|
|
13
|
+
import { CookieService } from 'ngx-cookie-service';
|
|
14
|
+
import * as i1$1 from '@angular/common/http';
|
|
15
|
+
import { map } from 'rxjs/operators';
|
|
6
16
|
|
|
7
|
-
class
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
17
|
+
class ViewPositionDirective {
|
|
18
|
+
constructor(_elr) {
|
|
19
|
+
this._elr = _elr;
|
|
20
|
+
this._scrollDirection = "Down";
|
|
21
|
+
this._scrollPos = 0;
|
|
22
|
+
this.isOnScreen = false;
|
|
23
|
+
this.isHalfScreen = false;
|
|
24
|
+
this.onEnter = new EventEmitter();
|
|
25
|
+
this.onLeave = new EventEmitter();
|
|
26
|
+
this.onHalf = new EventEmitter();
|
|
27
|
+
this._initScreenDeminitions();
|
|
28
|
+
console.log(`screent highet: ${this._viewPortHighet}`);
|
|
29
|
+
}
|
|
30
|
+
ngAfterViewInit() {
|
|
31
|
+
this._elementOffseTop = this._elr.nativeElement.offsetTop;
|
|
32
|
+
this._elementHeight = this._elr.nativeElement.offsetHeight;
|
|
33
|
+
console.log(`element offset Y = ${this._elementOffseTop}`);
|
|
34
|
+
}
|
|
35
|
+
onScroll(e) {
|
|
36
|
+
if ((document.body.getBoundingClientRect()).top > this._scrollPos) {
|
|
37
|
+
if (this._scrollDirection != "Up") {
|
|
38
|
+
this.isHalfScreen = false;
|
|
39
|
+
this._scrollDirection = "Up";
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
else {
|
|
43
|
+
if (this._scrollDirection != "Down") {
|
|
44
|
+
this.isHalfScreen = false;
|
|
45
|
+
this._scrollDirection = "Down";
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
this._scrollPos = (document.body.getBoundingClientRect()).top;
|
|
49
|
+
let currentClientHight = this._elr.nativeElement.getBoundingClientRect().top;
|
|
50
|
+
if (currentClientHight >= this._viewPortHighet || currentClientHight < -this._elementHeight) {
|
|
51
|
+
if (this.isOnScreen) {
|
|
52
|
+
this.isOnScreen = false;
|
|
53
|
+
this.onLeave.emit("OUT");
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
else {
|
|
57
|
+
if (!this.isOnScreen) {
|
|
58
|
+
this.isOnScreen = true;
|
|
59
|
+
this.onEnter.emit("IN");
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
if (currentClientHight < this._halfSscreen && currentClientHight > 0 && this._scrollDirection == "Down") {
|
|
63
|
+
if (!this.isHalfScreen) {
|
|
64
|
+
this.isHalfScreen = true;
|
|
65
|
+
console.log("half");
|
|
66
|
+
this.onHalf.emit(this.data);
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
if (currentClientHight + this._elementHeight > this._halfSscreen && currentClientHight + this._elementHeight < this._viewPortHighet && this._scrollDirection == "Up") {
|
|
70
|
+
if (!this.isHalfScreen) {
|
|
71
|
+
this.isHalfScreen = true;
|
|
72
|
+
console.log("I am half");
|
|
73
|
+
this.onHalf.emit(this.data);
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
onResize(e) {
|
|
78
|
+
this._viewPortHighet = window.innerHeight;
|
|
79
|
+
this._initScreenDeminitions();
|
|
80
|
+
}
|
|
81
|
+
_initScreenDeminitions() {
|
|
82
|
+
this._viewPortHighet = window.innerHeight;
|
|
83
|
+
this._curterScreen = Math.trunc(this._viewPortHighet * 0.25);
|
|
84
|
+
this._halfSscreen = Math.trunc(this._viewPortHighet * 0.5);
|
|
85
|
+
}
|
|
86
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: ViewPositionDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
87
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.11", type: ViewPositionDirective, isStandalone: false, selector: "[view-position]", inputs: { data: "data" }, outputs: { onEnter: "onEnter", onLeave: "onLeave", onHalf: "onHalf" }, host: { listeners: { "window:scroll": "onScroll($event)", "window:resize": "onResize($event)" } }, ngImport: i0 }); }
|
|
88
|
+
}
|
|
89
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: ViewPositionDirective, decorators: [{
|
|
90
|
+
type: Directive,
|
|
91
|
+
args: [{
|
|
92
|
+
selector: '[view-position]',
|
|
93
|
+
standalone: false
|
|
94
|
+
}]
|
|
95
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { data: [{
|
|
96
|
+
type: Input
|
|
97
|
+
}], onEnter: [{
|
|
98
|
+
type: Output
|
|
99
|
+
}], onLeave: [{
|
|
100
|
+
type: Output
|
|
101
|
+
}], onHalf: [{
|
|
102
|
+
type: Output
|
|
103
|
+
}], onScroll: [{
|
|
104
|
+
type: HostListener,
|
|
105
|
+
args: ['window:scroll', ['$event']]
|
|
106
|
+
}], onResize: [{
|
|
107
|
+
type: HostListener,
|
|
108
|
+
args: ['window:resize', ['$event']]
|
|
109
|
+
}] } });
|
|
110
|
+
|
|
111
|
+
class ViewPositionModule {
|
|
112
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: ViewPositionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
113
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.11", ngImport: i0, type: ViewPositionModule, declarations: [ViewPositionDirective], exports: [ViewPositionDirective] }); }
|
|
114
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: ViewPositionModule }); }
|
|
115
|
+
}
|
|
116
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: ViewPositionModule, decorators: [{
|
|
117
|
+
type: NgModule,
|
|
118
|
+
args: [{
|
|
119
|
+
declarations: [
|
|
120
|
+
ViewPositionDirective
|
|
121
|
+
],
|
|
122
|
+
imports: [],
|
|
123
|
+
exports: [
|
|
124
|
+
ViewPositionDirective
|
|
125
|
+
]
|
|
126
|
+
}]
|
|
127
|
+
}] });
|
|
128
|
+
|
|
129
|
+
/********** Entries Animations ********************/
|
|
130
|
+
const IoxAnimationStyles = {};
|
|
131
|
+
IoxAnimationStyles["fade-up"] = (delay, duration) => {
|
|
132
|
+
return [style({ opacity: 0, transform: "translate3d(0,100px,0)" }),
|
|
133
|
+
animate(`${duration} ${delay} cubic-bezier(0.445, 0.05, 0.55, 0.95)`, style({ opacity: 1, transform: "translateZ(0)" }))];
|
|
134
|
+
};
|
|
135
|
+
IoxAnimationStyles["fade-right"] = (delay, duration) => {
|
|
136
|
+
return [style({ opacity: 0, transform: "translateX(150px)" }),
|
|
137
|
+
animate(`${duration} ${delay} cubic-bezier(0.445, 0.05, 0.55, 0.95)`, style({ opacity: 1, transform: "translateZ(0)" }))];
|
|
138
|
+
};
|
|
139
|
+
IoxAnimationStyles["fade-out-right"] = (delay, duration) => {
|
|
140
|
+
return [style({ opacity: 1, transform: "translateX(0px)" }),
|
|
141
|
+
animate(`${duration} ${delay} cubic-bezier(0.445, 0.05, 0.55, 0.95)`, style({ opacity: 0, transform: "translateX(150px)" }))];
|
|
142
|
+
};
|
|
143
|
+
IoxAnimationStyles["fade-left"] = (delay, duration) => {
|
|
144
|
+
return [style({ opacity: 0, transform: "translateX(-150px)" }),
|
|
145
|
+
animate(`${duration} ${delay} cubic-bezier(0.445, 0.05, 0.55, 0.95)`, style({ opacity: 1, transform: "translateZ(0)" }))];
|
|
146
|
+
};
|
|
147
|
+
IoxAnimationStyles["fade-out-up"] = (delay, duration) => {
|
|
148
|
+
return [style({ opacity: 1, transform: "translateZ(0)" }),
|
|
149
|
+
animate(`${duration} ${delay} cubic-bezier(0.445, 0.05, 0.55, 0.95)`, style({ opacity: 0, transform: "translate3d(0,-100px,0)" }))];
|
|
150
|
+
};
|
|
151
|
+
IoxAnimationStyles["flip-left"] = (delay, duration) => {
|
|
152
|
+
return [style({ opacity: 0, transform: "perspective(2500px) rotateY(-100deg)" }),
|
|
153
|
+
animate(`${duration} ${delay} cubic-bezier(0.445, 0.05, 0.55, 0.95)`, style({ opacity: 1, transform: "perspective(2500px) rotateY(0)" }))];
|
|
154
|
+
};
|
|
155
|
+
IoxAnimationStyles["flip-up"] = (delay, duration) => {
|
|
156
|
+
return [style({ opacity: 0, transform: "perspective(2500px) rotateX(-100deg)" }),
|
|
157
|
+
animate(`${duration} ${delay} cubic-bezier(0.445, 0.05, 0.55, 0.95)`, style({ opacity: 1, transform: "perspective(2500px) rotateY(0)" }))];
|
|
158
|
+
};
|
|
159
|
+
IoxAnimationStyles["zoom-in-up"] = (delay, duration) => {
|
|
160
|
+
return [style({ opacity: 0, transform: "translate3d(0,100px,0) scale(.6)" }),
|
|
161
|
+
animate(`${duration} ${delay} cubic-bezier(0.445, 0.05, 0.55, 0.95)`, style({ opacity: 1, transform: "translateZ(0) scale(1)" }))];
|
|
162
|
+
};
|
|
163
|
+
|
|
164
|
+
class AOSService {
|
|
165
|
+
constructor() {
|
|
166
|
+
this._scrollOffset = new Subject();
|
|
167
|
+
this.scrollOffset = this._scrollOffset.asObservable();
|
|
168
|
+
}
|
|
169
|
+
updateScrollOffset(offset) {
|
|
170
|
+
this._scrollOffset.next(offset);
|
|
171
|
+
}
|
|
172
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AOSService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
173
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AOSService, providedIn: 'root' }); }
|
|
174
|
+
}
|
|
175
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AOSService, decorators: [{
|
|
176
|
+
type: Injectable,
|
|
177
|
+
args: [{ providedIn: 'root' }]
|
|
178
|
+
}], ctorParameters: () => [] });
|
|
179
|
+
|
|
180
|
+
class IoxAnimateContainer {
|
|
181
|
+
constructor(_element, _aOSService) {
|
|
182
|
+
this._element = _element;
|
|
183
|
+
this._aOSService = _aOSService;
|
|
184
|
+
this.kickIn = true;
|
|
185
|
+
this._scrollOffset = new Subject();
|
|
186
|
+
this.scrollOffset = this._scrollOffset.asObservable();
|
|
187
|
+
}
|
|
188
|
+
ngAfterViewInit() {
|
|
189
|
+
this.updateOffset();
|
|
190
|
+
}
|
|
191
|
+
onScroll($event) {
|
|
192
|
+
this.updateOffset();
|
|
193
|
+
}
|
|
194
|
+
ngOnChanges(changes) {
|
|
195
|
+
console.log(changes);
|
|
196
|
+
if (changes['kickIn'] && changes['kickIn'].currentValue) {
|
|
197
|
+
this.updateOffset();
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
updateOffset() {
|
|
201
|
+
let elClientRect = this.animateRooteElement.nativeElement.getBoundingClientRect();
|
|
202
|
+
this._scrollOffset.next(elClientRect);
|
|
203
|
+
this._aOSService.updateScrollOffset(elClientRect);
|
|
204
|
+
}
|
|
205
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: IoxAnimateContainer, deps: [{ token: i0.ElementRef }, { token: AOSService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
206
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: IoxAnimateContainer, isStandalone: false, selector: "[ioxAnimateContainer], ioxAnimateContainer", inputs: { kickIn: "kickIn" }, host: { listeners: { "scroll": "onScroll($event)" } }, viewQueries: [{ propertyName: "animateRooteElement", first: true, predicate: ["animateRooteElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `<div class='animate_root_element' #animateRooteElement>
|
|
207
|
+
<ng-content></ng-content>
|
|
208
|
+
</div>`, isInline: true }); }
|
|
209
|
+
}
|
|
210
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: IoxAnimateContainer, decorators: [{
|
|
211
|
+
type: Component,
|
|
212
|
+
args: [{
|
|
213
|
+
selector: "[ioxAnimateContainer], ioxAnimateContainer",
|
|
214
|
+
template: `<div class='animate_root_element' #animateRooteElement>
|
|
215
|
+
<ng-content></ng-content>
|
|
216
|
+
</div>`,
|
|
217
|
+
standalone: false
|
|
218
|
+
}]
|
|
219
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: AOSService }], propDecorators: { kickIn: [{
|
|
220
|
+
type: Input,
|
|
221
|
+
args: ['kickIn']
|
|
222
|
+
}], animateRooteElement: [{
|
|
223
|
+
type: ViewChild,
|
|
224
|
+
args: ['animateRooteElement']
|
|
225
|
+
}], onScroll: [{
|
|
226
|
+
type: HostListener,
|
|
227
|
+
args: ['scroll', ['$event']]
|
|
228
|
+
}] } });
|
|
229
|
+
|
|
230
|
+
class IoxAosDirective {
|
|
231
|
+
constructor(_animateContainer, _element, _animationBuilder, _renderer) {
|
|
232
|
+
this._animateContainer = _animateContainer;
|
|
233
|
+
this._element = _element;
|
|
234
|
+
this._animationBuilder = _animationBuilder;
|
|
235
|
+
this._renderer = _renderer;
|
|
236
|
+
this.animationDelay = "";
|
|
237
|
+
this.animationIn = "";
|
|
238
|
+
this.animationOut = "";
|
|
239
|
+
this.animationDuration = "0.5s";
|
|
240
|
+
this.isAnimationPlayed = false;
|
|
241
|
+
this._elTop = 0;
|
|
242
|
+
this._renderer.setStyle(_element.nativeElement, 'opacity', '0');
|
|
243
|
+
}
|
|
244
|
+
ngOnInit() {
|
|
245
|
+
}
|
|
246
|
+
ngAfterViewInit() {
|
|
247
|
+
setTimeout(() => {
|
|
248
|
+
this._elTop = this._cumulativeOffset(this._element.nativeElement).top;
|
|
249
|
+
if (this._animateContainer) {
|
|
250
|
+
if (this._animateContainer.kickIn) {
|
|
251
|
+
this.runIfVisiable();
|
|
252
|
+
}
|
|
253
|
+
else {
|
|
254
|
+
return;
|
|
255
|
+
}
|
|
256
|
+
}
|
|
257
|
+
else {
|
|
258
|
+
this.runIfVisiable();
|
|
259
|
+
}
|
|
260
|
+
}, 150);
|
|
261
|
+
const resizeObserver = new ResizeObserver((entries) => this._elTop = this._cumulativeOffset(this._element.nativeElement).top);
|
|
262
|
+
resizeObserver.observe(document.body);
|
|
263
|
+
if (this._animateContainer) {
|
|
264
|
+
this._animateContainer?.scrollOffset.subscribe((offset) => {
|
|
265
|
+
if (this._animateContainer.kickIn) {
|
|
266
|
+
this.scrollEventHandler(-1 * offset.top);
|
|
267
|
+
}
|
|
268
|
+
});
|
|
269
|
+
}
|
|
270
|
+
}
|
|
271
|
+
makeAnimationIn(animationStyle) {
|
|
272
|
+
let animation = IoxAnimationStyles[animationStyle](this.animationDelay, this.animationDuration);
|
|
273
|
+
const myAnimation = this._animationBuilder.build(animation);
|
|
274
|
+
return myAnimation.create(this._element.nativeElement);
|
|
275
|
+
}
|
|
276
|
+
_cumulativeOffset(element) {
|
|
277
|
+
var top = 0, left = 0;
|
|
278
|
+
do {
|
|
279
|
+
top += element.offsetTop || 0;
|
|
280
|
+
left += element.offsetLeft || 0;
|
|
281
|
+
element = element.offsetParent;
|
|
282
|
+
} while (element);
|
|
283
|
+
return {
|
|
284
|
+
top: top,
|
|
285
|
+
left: left
|
|
286
|
+
};
|
|
287
|
+
}
|
|
288
|
+
;
|
|
289
|
+
onScrollEvent($event) {
|
|
290
|
+
this.scrollEventHandler(window.pageYOffset);
|
|
291
|
+
}
|
|
292
|
+
isVisable(offset) {
|
|
293
|
+
//console.log(this._elTop >= window.pageYOffset && this._elTop <= window.pageYOffset + window.innerHeight);
|
|
294
|
+
//return this._elTop >= window.pageYOffset && this._elTop <= window.pageYOffset + window.innerHeight;
|
|
295
|
+
return this._elTop >= offset && this._elTop <= offset + window.innerHeight;
|
|
296
|
+
}
|
|
297
|
+
scrollEventHandler(offset) {
|
|
298
|
+
if (this._animateContainer && this._animateContainer.kickIn == false) {
|
|
299
|
+
return;
|
|
300
|
+
}
|
|
301
|
+
if (this.isVisable(offset) && !this.isAnimationPlayed) {
|
|
302
|
+
let animationStyle = this.animationIn || "fade-up";
|
|
303
|
+
this.makeAnimationIn(animationStyle).play();
|
|
304
|
+
this.isAnimationPlayed = true;
|
|
305
|
+
}
|
|
306
|
+
else if (!this.isVisable(offset) && this.isAnimationPlayed && this.animationOut) {
|
|
307
|
+
this.makeAnimationIn(this.animationOut).play();
|
|
308
|
+
this.isAnimationPlayed = false;
|
|
309
|
+
}
|
|
310
|
+
}
|
|
311
|
+
runIfVisiable() {
|
|
312
|
+
if (this.isVisable(window.pageYOffset)) {
|
|
313
|
+
let animationStyle = this.animationIn || "fade-up";
|
|
314
|
+
this.makeAnimationIn(animationStyle).play();
|
|
315
|
+
this.isAnimationPlayed = true;
|
|
316
|
+
}
|
|
317
|
+
}
|
|
318
|
+
ngOnDestroy() {
|
|
319
|
+
}
|
|
320
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: IoxAosDirective, deps: [{ token: IoxAnimateContainer, host: true, optional: true }, { token: i0.ElementRef }, { token: i2.AnimationBuilder }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
321
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.11", type: IoxAosDirective, isStandalone: false, selector: "[ioxAnimate], ioxAnimate", inputs: { animationDelay: "animationDelay", animationIn: "animationIn", animationOut: "animationOut", animationDuration: "animationDuration" }, host: { listeners: { "document:scroll": "onScrollEvent($event)" } }, ngImport: i0 }); }
|
|
322
|
+
}
|
|
323
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: IoxAosDirective, decorators: [{
|
|
324
|
+
type: Directive,
|
|
325
|
+
args: [{
|
|
326
|
+
selector: "[ioxAnimate], ioxAnimate",
|
|
327
|
+
standalone: false
|
|
328
|
+
}]
|
|
329
|
+
}], ctorParameters: () => [{ type: IoxAnimateContainer, decorators: [{
|
|
330
|
+
type: Host
|
|
331
|
+
}, {
|
|
332
|
+
type: Optional
|
|
333
|
+
}] }, { type: i0.ElementRef }, { type: i2.AnimationBuilder }, { type: i0.Renderer2 }], propDecorators: { animationDelay: [{
|
|
334
|
+
type: Input,
|
|
335
|
+
args: ["animationDelay"]
|
|
336
|
+
}], animationIn: [{
|
|
337
|
+
type: Input,
|
|
338
|
+
args: ["animationIn"]
|
|
339
|
+
}], animationOut: [{
|
|
340
|
+
type: Input,
|
|
341
|
+
args: ["animationOut"]
|
|
342
|
+
}], animationDuration: [{
|
|
343
|
+
type: Input,
|
|
344
|
+
args: ["animationDuration"]
|
|
345
|
+
}], onScrollEvent: [{
|
|
346
|
+
type: HostListener,
|
|
347
|
+
args: ['document:scroll', ['$event']]
|
|
348
|
+
}] } });
|
|
349
|
+
function ViewParent() {
|
|
350
|
+
throw new Error("Function not implemented.");
|
|
351
|
+
}
|
|
352
|
+
|
|
353
|
+
class IoxAosModule {
|
|
354
|
+
static forRoot() {
|
|
355
|
+
return {
|
|
356
|
+
ngModule: IoxAosModule,
|
|
357
|
+
providers: [AOSService]
|
|
358
|
+
};
|
|
359
|
+
}
|
|
360
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: IoxAosModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
361
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.11", ngImport: i0, type: IoxAosModule, declarations: [IoxAosDirective,
|
|
362
|
+
IoxAnimateContainer], imports: [BrowserAnimationsModule], exports: [IoxAosDirective,
|
|
363
|
+
IoxAnimateContainer] }); }
|
|
364
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: IoxAosModule, providers: [
|
|
365
|
+
AOSService
|
|
366
|
+
], imports: [BrowserAnimationsModule] }); }
|
|
367
|
+
}
|
|
368
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: IoxAosModule, decorators: [{
|
|
369
|
+
type: NgModule,
|
|
370
|
+
args: [{
|
|
371
|
+
declarations: [
|
|
372
|
+
IoxAosDirective,
|
|
373
|
+
IoxAnimateContainer
|
|
374
|
+
],
|
|
375
|
+
imports: [
|
|
376
|
+
BrowserAnimationsModule
|
|
377
|
+
],
|
|
378
|
+
providers: [
|
|
379
|
+
AOSService
|
|
380
|
+
],
|
|
381
|
+
exports: [
|
|
382
|
+
IoxAosDirective,
|
|
383
|
+
IoxAnimateContainer
|
|
384
|
+
]
|
|
385
|
+
}]
|
|
386
|
+
}] });
|
|
387
|
+
|
|
388
|
+
class IoxMasonryService {
|
|
389
|
+
constructor() { }
|
|
390
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: IoxMasonryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
391
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: IoxMasonryService, providedIn: 'root' }); }
|
|
392
|
+
}
|
|
393
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: IoxMasonryService, decorators: [{
|
|
394
|
+
type: Injectable,
|
|
395
|
+
args: [{
|
|
396
|
+
providedIn: 'root'
|
|
397
|
+
}]
|
|
398
|
+
}], ctorParameters: () => [] });
|
|
399
|
+
|
|
400
|
+
class IoxMasonryComponent {
|
|
401
|
+
constructor(_element) {
|
|
402
|
+
this._element = _element;
|
|
403
|
+
// Inputs
|
|
404
|
+
this.options = {};
|
|
405
|
+
this.useImagesLoaded = false;
|
|
406
|
+
this.updateLayout = false;
|
|
407
|
+
this.layoutComplete = new EventEmitter();
|
|
408
|
+
this.isAppendAllowed = true;
|
|
409
|
+
this.add = (element) => {
|
|
410
|
+
setTimeout(() => {
|
|
411
|
+
this._msnry.init();
|
|
412
|
+
}, 200);
|
|
413
|
+
};
|
|
414
|
+
}
|
|
415
|
+
ngAfterViewInit() {
|
|
416
|
+
console.log("test");
|
|
417
|
+
}
|
|
418
|
+
ngOnInit() {
|
|
419
|
+
this._msnry = new Masonry(document.getElementById('masonry'), this.options);
|
|
420
|
+
this.layout();
|
|
421
|
+
}
|
|
422
|
+
ngOnChanges(changes) {
|
|
423
|
+
console.log(changes);
|
|
424
|
+
}
|
|
425
|
+
remove(element) {
|
|
426
|
+
this._msnry.remove(element);
|
|
427
|
+
}
|
|
428
|
+
layout() {
|
|
429
|
+
setTimeout(() => {
|
|
430
|
+
this._msnry.init();
|
|
431
|
+
});
|
|
432
|
+
}
|
|
433
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: IoxMasonryComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
434
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: IoxMasonryComponent, isStandalone: false, selector: "[iox-masonry], iox-masonry", inputs: { options: "options", useImagesLoaded: "useImagesLoaded", updateLayout: "updateLayout" }, outputs: { layoutComplete: "layoutComplete" }, usesOnChanges: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
|
|
435
|
+
}
|
|
436
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: IoxMasonryComponent, decorators: [{
|
|
437
|
+
type: Component,
|
|
438
|
+
args: [{ selector: "[iox-masonry], iox-masonry", template: `<ng-content></ng-content>`, standalone: false }]
|
|
439
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { options: [{
|
|
440
|
+
type: Input
|
|
441
|
+
}], useImagesLoaded: [{
|
|
442
|
+
type: Input
|
|
443
|
+
}], updateLayout: [{
|
|
444
|
+
type: Input
|
|
445
|
+
}], layoutComplete: [{
|
|
446
|
+
type: Output
|
|
447
|
+
}] } });
|
|
448
|
+
|
|
449
|
+
class IoxMasonryItemDirective {
|
|
450
|
+
constructor(_element, _parent, _renderer) {
|
|
451
|
+
this._element = _element;
|
|
452
|
+
this._parent = _parent;
|
|
453
|
+
this._renderer = _renderer;
|
|
454
|
+
//this._renderer.setStyle(_element.nativeElement,'opacity', '0');
|
|
455
|
+
}
|
|
456
|
+
ngAfterViewInit() {
|
|
457
|
+
console.log(this._element.nativeElement);
|
|
458
|
+
this._parent.add(this._element.nativeElement);
|
|
459
|
+
}
|
|
460
|
+
ngOnDestroy() {
|
|
461
|
+
this._parent.remove(this._element.nativeElement);
|
|
462
|
+
}
|
|
463
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: IoxMasonryItemDirective, deps: [{ token: i0.ElementRef }, { token: forwardRef(() => IoxMasonryComponent) }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
464
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.11", type: IoxMasonryItemDirective, isStandalone: false, selector: "[ioxMasonryItem], ioxMasonryItem", ngImport: i0 }); }
|
|
465
|
+
}
|
|
466
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: IoxMasonryItemDirective, decorators: [{
|
|
467
|
+
type: Directive,
|
|
468
|
+
args: [{
|
|
469
|
+
selector: "[ioxMasonryItem], ioxMasonryItem",
|
|
470
|
+
standalone: false
|
|
471
|
+
}]
|
|
472
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: IoxMasonryComponent, decorators: [{
|
|
473
|
+
type: Inject,
|
|
474
|
+
args: [forwardRef(() => IoxMasonryComponent)]
|
|
475
|
+
}] }, { type: i0.Renderer2 }] });
|
|
476
|
+
|
|
477
|
+
class IoxMasonryModule {
|
|
478
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: IoxMasonryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
479
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.11", ngImport: i0, type: IoxMasonryModule, declarations: [IoxMasonryComponent, IoxMasonryItemDirective], imports: [BrowserModule], exports: [IoxMasonryComponent, IoxMasonryItemDirective] }); }
|
|
480
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: IoxMasonryModule, imports: [BrowserModule] }); }
|
|
481
|
+
}
|
|
482
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: IoxMasonryModule, decorators: [{
|
|
483
|
+
type: NgModule,
|
|
484
|
+
args: [{
|
|
485
|
+
declarations: [IoxMasonryComponent, IoxMasonryItemDirective],
|
|
486
|
+
imports: [
|
|
487
|
+
BrowserModule
|
|
488
|
+
],
|
|
489
|
+
exports: [IoxMasonryComponent, IoxMasonryItemDirective]
|
|
490
|
+
}]
|
|
22
491
|
}] });
|
|
23
492
|
|
|
24
493
|
class PageScrollProvider {
|
|
@@ -126,7 +595,1102 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
126
595
|
}]
|
|
127
596
|
}] });
|
|
128
597
|
|
|
598
|
+
class IoxUiModule {
|
|
599
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: IoxUiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
600
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.11", ngImport: i0, type: IoxUiModule, imports: [IoxAosModule, IoxPageModule], exports: [IoxAosModule, IoxPageModule] }); }
|
|
601
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: IoxUiModule, imports: [IoxAosModule, IoxPageModule, IoxAosModule, IoxPageModule] }); }
|
|
602
|
+
}
|
|
603
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: IoxUiModule, decorators: [{
|
|
604
|
+
type: NgModule,
|
|
605
|
+
args: [{
|
|
606
|
+
declarations: [],
|
|
607
|
+
imports: [IoxAosModule, IoxPageModule],
|
|
608
|
+
exports: [IoxAosModule, IoxPageModule]
|
|
609
|
+
}]
|
|
610
|
+
}] });
|
|
611
|
+
|
|
612
|
+
var PrivacyModelEvent;
|
|
613
|
+
(function (PrivacyModelEvent) {
|
|
614
|
+
PrivacyModelEvent[PrivacyModelEvent["OPEN"] = 1] = "OPEN";
|
|
615
|
+
PrivacyModelEvent[PrivacyModelEvent["CLOSE"] = 2] = "CLOSE";
|
|
616
|
+
})(PrivacyModelEvent || (PrivacyModelEvent = {}));
|
|
617
|
+
class PrivacyModalService {
|
|
618
|
+
constructor() {
|
|
619
|
+
this.modalEvent = new Subject();
|
|
620
|
+
this.decisionSubject = null;
|
|
621
|
+
}
|
|
622
|
+
registerModalEvent(func) {
|
|
623
|
+
this.modalEvent.subscribe({
|
|
624
|
+
next: (val) => {
|
|
625
|
+
func(val);
|
|
626
|
+
}
|
|
627
|
+
});
|
|
628
|
+
}
|
|
629
|
+
openModal() {
|
|
630
|
+
this.modalEvent.next(PrivacyModelEvent.OPEN);
|
|
631
|
+
this.decisionSubject = new Subject();
|
|
632
|
+
return this.decisionSubject;
|
|
633
|
+
}
|
|
634
|
+
closeModal() {
|
|
635
|
+
this.modalEvent.next(PrivacyModelEvent.CLOSE);
|
|
636
|
+
}
|
|
637
|
+
notifyDecision(accepted) {
|
|
638
|
+
if (this.decisionSubject) {
|
|
639
|
+
this.decisionSubject.next(accepted);
|
|
640
|
+
this.decisionSubject.complete();
|
|
641
|
+
this.decisionSubject = null;
|
|
642
|
+
}
|
|
643
|
+
this.closeModal();
|
|
644
|
+
}
|
|
645
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: PrivacyModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
646
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: PrivacyModalService }); }
|
|
647
|
+
}
|
|
648
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: PrivacyModalService, decorators: [{
|
|
649
|
+
type: Injectable
|
|
650
|
+
}], ctorParameters: () => [] });
|
|
651
|
+
|
|
652
|
+
class ConsentService {
|
|
653
|
+
constructor(cookieService, httpClient, _privacyModalService, environment) {
|
|
654
|
+
this.cookieService = cookieService;
|
|
655
|
+
this.httpClient = httpClient;
|
|
656
|
+
this._privacyModalService = _privacyModalService;
|
|
657
|
+
this.environment = environment;
|
|
658
|
+
this.WEB_USER = "webUser";
|
|
659
|
+
}
|
|
660
|
+
hasAnalyticsConsent() {
|
|
661
|
+
const cookieValue = this.cookieService.get(this.WEB_USER);
|
|
662
|
+
if (!cookieValue) {
|
|
663
|
+
return false;
|
|
664
|
+
}
|
|
665
|
+
try {
|
|
666
|
+
const parsedCookieValue = JSON.parse(cookieValue);
|
|
667
|
+
return parsedCookieValue.user?.consent?.analyticsConsent === true;
|
|
668
|
+
}
|
|
669
|
+
catch {
|
|
670
|
+
// Invalid JSON or unexpected structure: treat as no consent
|
|
671
|
+
return false;
|
|
672
|
+
}
|
|
673
|
+
}
|
|
674
|
+
checkAnalyticsConsent() {
|
|
675
|
+
if (this.hasAnalyticsConsent()) {
|
|
676
|
+
// Consent already given, return true immediately as Observable
|
|
677
|
+
return of(true);
|
|
678
|
+
}
|
|
679
|
+
// No consent yet (or invalid/missing cookie) -> show modal
|
|
680
|
+
return this._privacyModalService.openModal();
|
|
681
|
+
}
|
|
682
|
+
checkMarketingConsent() {
|
|
683
|
+
let cookieValue = this.cookieService.get(this.WEB_USER);
|
|
684
|
+
if (!cookieValue) {
|
|
685
|
+
return false;
|
|
686
|
+
}
|
|
687
|
+
let parsedCookieValue = JSON.parse(cookieValue);
|
|
688
|
+
return parsedCookieValue.user?.consent?.marketingConsent;
|
|
689
|
+
}
|
|
690
|
+
setConsent(analytics, marketing) {
|
|
691
|
+
let cookieValue = this.cookieService.get(this.WEB_USER);
|
|
692
|
+
let parsedCookieValue = cookieValue ? JSON.parse(cookieValue) : { user: { consent: {
|
|
693
|
+
anonymousId: this.generateAnonymousId()
|
|
694
|
+
} } };
|
|
695
|
+
parsedCookieValue.user.consent.analyticsConsent = analytics;
|
|
696
|
+
parsedCookieValue.user.consent.marketingConsent = marketing;
|
|
697
|
+
this.cookieService.set(this.WEB_USER, JSON.stringify(parsedCookieValue));
|
|
698
|
+
this.httpClient.post(`${this.environment.HOST}consent`, parsedCookieValue.user.consent)
|
|
699
|
+
.subscribe({
|
|
700
|
+
next: (response) => {
|
|
701
|
+
console.log('Consent updated successfully:', response);
|
|
702
|
+
},
|
|
703
|
+
error: (error) => {
|
|
704
|
+
console.error('Error updating consent:', error);
|
|
705
|
+
}
|
|
706
|
+
});
|
|
707
|
+
}
|
|
708
|
+
generateAnonymousId() {
|
|
709
|
+
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
|
|
710
|
+
var r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8);
|
|
711
|
+
return v.toString(16);
|
|
712
|
+
});
|
|
713
|
+
}
|
|
714
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: ConsentService, deps: [{ token: i1.CookieService }, { token: i1$1.HttpClient }, { token: PrivacyModalService }, { token: ENVIRONMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
715
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: ConsentService }); }
|
|
716
|
+
}
|
|
717
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: ConsentService, decorators: [{
|
|
718
|
+
type: Injectable
|
|
719
|
+
}], ctorParameters: () => [{ type: i1.CookieService }, { type: i1$1.HttpClient }, { type: PrivacyModalService }, { type: undefined, decorators: [{
|
|
720
|
+
type: Inject,
|
|
721
|
+
args: [ENVIRONMENT]
|
|
722
|
+
}] }] });
|
|
723
|
+
|
|
724
|
+
class PrivacyModalComponent {
|
|
725
|
+
constructor(_privacyModalService, _consentService) {
|
|
726
|
+
this._privacyModalService = _privacyModalService;
|
|
727
|
+
this._consentService = _consentService;
|
|
728
|
+
this.isOpen = false;
|
|
729
|
+
this._privacyModalService.registerModalEvent((event) => {
|
|
730
|
+
if (event == PrivacyModelEvent.CLOSE) {
|
|
731
|
+
this.isOpen = false;
|
|
732
|
+
}
|
|
733
|
+
else {
|
|
734
|
+
this.isOpen = true;
|
|
735
|
+
}
|
|
736
|
+
});
|
|
737
|
+
}
|
|
738
|
+
onAccept() {
|
|
739
|
+
this._consentService.setConsent(true, true);
|
|
740
|
+
this._privacyModalService.notifyDecision(true);
|
|
741
|
+
this.isOpen = false;
|
|
742
|
+
}
|
|
743
|
+
onDecline() {
|
|
744
|
+
this._privacyModalService.notifyDecision(false);
|
|
745
|
+
this.isOpen = false;
|
|
746
|
+
}
|
|
747
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: PrivacyModalComponent, deps: [{ token: PrivacyModalService }, { token: ConsentService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
748
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: PrivacyModalComponent, isStandalone: false, selector: "privacy-modal", ngImport: i0, template: "<div class=\"privacy-modal\" [ngClass]=\"{'open': isOpen, 'closed': !isOpen}\">\n <div class=\"modal-content\">\n <h2>\u05D0\u05E0\u05D7\u05E0\u05D5 \u05E9\u05D5\u05DE\u05E8\u05D9\u05DD \u05E2\u05DC \u05D4\u05E4\u05E8\u05D8\u05D9\u05D5\u05EA \u05E9\u05DC\u05DA</h2>\n <p dir=\"rtl\">\n <span>\n \u05D0\u05E0\u05D7\u05E0\u05D5 \u05DE\u05E9\u05DE\u05E9\u05D9\u05DD \u05D1\u05E7\u05D1\u05E6\u05D9 \n </span>\n <span>Cookies </span>\n <span>\u05DB\u05D3\u05D9 \u05DC\u05E9\u05E4\u05E8 \u05D0\u05EA \u05D7\u05D5\u05D5\u05D9\u05EA \u05D4\u05D2\u05DC\u05D9\u05E9\u05D4 \u05E9\u05DC\u05DA, \u05DC\u05E0\u05EA\u05D7 \u05E9\u05D9\u05DE\u05D5\u05E9 \u05D1\u05D0\u05EA\u05E8 \u05D5\u05DC\u05D4\u05E6\u05D9\u05E2 \u05EA\u05D5\u05DB\u05DF \u05DE\u05D5\u05EA\u05D0\u05DD \u05D0\u05D9\u05E9\u05D9\u05EA.</span>\n <span> \u05DC\u05DE\u05D9\u05D3\u05E2 \u05E0\u05D5\u05E1\u05E3 \u05E2\u05DC \u05D0\u05D9\u05DA \u05D0\u05E0\u05D7\u05E0\u05D5 \u05DE\u05E9\u05EA\u05DE\u05E9\u05D9\u05DD \u05D1\u05DE\u05D9\u05D3\u05E2 \u05E9\u05DC\u05DA, \u05E8\u05D0\u05D4 \u05D0\u05EA <a target=\"_blank\" href=\"/privacy\">\u05DE\u05D3\u05D9\u05E0\u05D9\u05D5\u05EA \u05D4\u05E4\u05E8\u05D8\u05D9\u05D5\u05EA </a> \u05E9\u05DC\u05E0\u05D5</span>\n </p>\n\n <div class=\"button-container\">\n <button class=\"accept-button\" (click)=\"onAccept()\">\u05D0\u05E0\u05D9 \u05DE\u05E1\u05DB\u05D9\u05DD</button>\n <button class=\"decline-button\" (click)=\"onDecline()\">\u05D0\u05E0\u05D9 \u05DC\u05D0 \u05DE\u05E1\u05DB\u05D9\u05DD</button>\n </div>\n </div>\n</div>\n", styles: [".privacy-modal{padding:2em;background:#fff;border-radius:8px;position:fixed;z-index:10000000000000;bottom:0;left:0;right:0;height:25vh;display:flex;align-items:center;justify-content:center;transform:translateY(100%);transition:transform .3s ease-in-out}.privacy-modal.open{transform:translateY(0);transition:transform .3s ease-in-out}.modal-content{width:40vw;text-align:right}.privacy-modal h2{margin-top:0;text-align:right;font-size:2.1vw;color:#6b4f3b}.privacy-modal p{font-size:1.3vw;color:#6b4f3b}.button-container{display:flex;justify-content:flex-end;margin-top:20px}.button-container button{border:0;margin-inline-start:15px;font-size:1vw}.button-container .accept-button{background:#6b4f3b;color:#fff;padding:.5em 1em;border-radius:4px;cursor:pointer}.button-container .accept-button:hover{background:#5b4332}.button-container .decline-button{background:transparent;color:#6b4f3b;padding:0;cursor:pointer;border-bottom:1px solid #fff}.button-container .decline-button:hover{border-bottom:1px solid #6b4f3b}@media(max-width:768px){.privacy-modal h2{font-size:8.2vw}.privacy-modal p{font-size:4.2vw}.privacy-modal .modal-content{width:80vw}.privacy-modal .button-container button{font-size:3.2vw}}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
749
|
+
}
|
|
750
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: PrivacyModalComponent, decorators: [{
|
|
751
|
+
type: Component,
|
|
752
|
+
args: [{ selector: 'privacy-modal', standalone: false, template: "<div class=\"privacy-modal\" [ngClass]=\"{'open': isOpen, 'closed': !isOpen}\">\n <div class=\"modal-content\">\n <h2>\u05D0\u05E0\u05D7\u05E0\u05D5 \u05E9\u05D5\u05DE\u05E8\u05D9\u05DD \u05E2\u05DC \u05D4\u05E4\u05E8\u05D8\u05D9\u05D5\u05EA \u05E9\u05DC\u05DA</h2>\n <p dir=\"rtl\">\n <span>\n \u05D0\u05E0\u05D7\u05E0\u05D5 \u05DE\u05E9\u05DE\u05E9\u05D9\u05DD \u05D1\u05E7\u05D1\u05E6\u05D9 \n </span>\n <span>Cookies </span>\n <span>\u05DB\u05D3\u05D9 \u05DC\u05E9\u05E4\u05E8 \u05D0\u05EA \u05D7\u05D5\u05D5\u05D9\u05EA \u05D4\u05D2\u05DC\u05D9\u05E9\u05D4 \u05E9\u05DC\u05DA, \u05DC\u05E0\u05EA\u05D7 \u05E9\u05D9\u05DE\u05D5\u05E9 \u05D1\u05D0\u05EA\u05E8 \u05D5\u05DC\u05D4\u05E6\u05D9\u05E2 \u05EA\u05D5\u05DB\u05DF \u05DE\u05D5\u05EA\u05D0\u05DD \u05D0\u05D9\u05E9\u05D9\u05EA.</span>\n <span> \u05DC\u05DE\u05D9\u05D3\u05E2 \u05E0\u05D5\u05E1\u05E3 \u05E2\u05DC \u05D0\u05D9\u05DA \u05D0\u05E0\u05D7\u05E0\u05D5 \u05DE\u05E9\u05EA\u05DE\u05E9\u05D9\u05DD \u05D1\u05DE\u05D9\u05D3\u05E2 \u05E9\u05DC\u05DA, \u05E8\u05D0\u05D4 \u05D0\u05EA <a target=\"_blank\" href=\"/privacy\">\u05DE\u05D3\u05D9\u05E0\u05D9\u05D5\u05EA \u05D4\u05E4\u05E8\u05D8\u05D9\u05D5\u05EA </a> \u05E9\u05DC\u05E0\u05D5</span>\n </p>\n\n <div class=\"button-container\">\n <button class=\"accept-button\" (click)=\"onAccept()\">\u05D0\u05E0\u05D9 \u05DE\u05E1\u05DB\u05D9\u05DD</button>\n <button class=\"decline-button\" (click)=\"onDecline()\">\u05D0\u05E0\u05D9 \u05DC\u05D0 \u05DE\u05E1\u05DB\u05D9\u05DD</button>\n </div>\n </div>\n</div>\n", styles: [".privacy-modal{padding:2em;background:#fff;border-radius:8px;position:fixed;z-index:10000000000000;bottom:0;left:0;right:0;height:25vh;display:flex;align-items:center;justify-content:center;transform:translateY(100%);transition:transform .3s ease-in-out}.privacy-modal.open{transform:translateY(0);transition:transform .3s ease-in-out}.modal-content{width:40vw;text-align:right}.privacy-modal h2{margin-top:0;text-align:right;font-size:2.1vw;color:#6b4f3b}.privacy-modal p{font-size:1.3vw;color:#6b4f3b}.button-container{display:flex;justify-content:flex-end;margin-top:20px}.button-container button{border:0;margin-inline-start:15px;font-size:1vw}.button-container .accept-button{background:#6b4f3b;color:#fff;padding:.5em 1em;border-radius:4px;cursor:pointer}.button-container .accept-button:hover{background:#5b4332}.button-container .decline-button{background:transparent;color:#6b4f3b;padding:0;cursor:pointer;border-bottom:1px solid #fff}.button-container .decline-button:hover{border-bottom:1px solid #6b4f3b}@media(max-width:768px){.privacy-modal h2{font-size:8.2vw}.privacy-modal p{font-size:4.2vw}.privacy-modal .modal-content{width:80vw}.privacy-modal .button-container button{font-size:3.2vw}}\n"] }]
|
|
753
|
+
}], ctorParameters: () => [{ type: PrivacyModalService }, { type: ConsentService }] });
|
|
754
|
+
|
|
755
|
+
class WebSettingsService {
|
|
756
|
+
constructor(httpClient, environment) {
|
|
757
|
+
this.httpClient = httpClient;
|
|
758
|
+
this.environment = environment;
|
|
759
|
+
}
|
|
760
|
+
getSettings() {
|
|
761
|
+
// If the server injected a runtime config (window.__APP_CONFIG) use that first,
|
|
762
|
+
// otherwise fall back to the compile-time environment.HOST.
|
|
763
|
+
const runtimeHost = (typeof window !== 'undefined' && window.__APP_CONFIG && window.__APP_CONFIG.HOST) ? window.__APP_CONFIG.HOST : this.environment.HOST;
|
|
764
|
+
return this.httpClient.get(`${runtimeHost}web/settings`);
|
|
765
|
+
}
|
|
766
|
+
configArrayToObject(arr) {
|
|
767
|
+
return arr.reduce((acc, item) => {
|
|
768
|
+
acc[item.key] = item.value;
|
|
769
|
+
return acc;
|
|
770
|
+
}, {});
|
|
771
|
+
}
|
|
772
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: WebSettingsService, deps: [{ token: i1$1.HttpClient }, { token: ENVIRONMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
773
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: WebSettingsService }); }
|
|
774
|
+
}
|
|
775
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: WebSettingsService, decorators: [{
|
|
776
|
+
type: Injectable
|
|
777
|
+
}], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: undefined, decorators: [{
|
|
778
|
+
type: Inject,
|
|
779
|
+
args: [ENVIRONMENT]
|
|
780
|
+
}] }] });
|
|
781
|
+
|
|
782
|
+
class ContentService {
|
|
783
|
+
constructor(httpClient, environment) {
|
|
784
|
+
this.httpClient = httpClient;
|
|
785
|
+
this.environment = environment;
|
|
786
|
+
this.appContent = {};
|
|
787
|
+
}
|
|
788
|
+
getContent(contentName, id) {
|
|
789
|
+
if (this.appContent[contentName] && this.appContent[contentName].length) {
|
|
790
|
+
if (id) {
|
|
791
|
+
return of(this.findOne(this.appContent[contentName], id));
|
|
792
|
+
}
|
|
793
|
+
return of(this.appContent[contentName]);
|
|
794
|
+
}
|
|
795
|
+
return this.httpClient.get(`${this.environment.HOST}${contentName}`).pipe(map((content) => {
|
|
796
|
+
if (contentName == this.environment.contentResource.SERVICES || contentName == this.environment.contentResource.PROJECTS) {
|
|
797
|
+
content = content.map((item) => {
|
|
798
|
+
item.id = item.name.replace(/ /g, "_");
|
|
799
|
+
//item._id= item.name.replace(/ /g,"_");
|
|
800
|
+
return item;
|
|
801
|
+
});
|
|
802
|
+
}
|
|
803
|
+
this.appContent[contentName] = content;
|
|
804
|
+
if (id) {
|
|
805
|
+
return this.findOne(this.appContent[contentName], id);
|
|
806
|
+
}
|
|
807
|
+
return content;
|
|
808
|
+
}));
|
|
809
|
+
}
|
|
810
|
+
findOne(arr, id) {
|
|
811
|
+
for (let i = 0; i < arr.length; i++) {
|
|
812
|
+
if (arr[i].id == id) {
|
|
813
|
+
return arr[i];
|
|
814
|
+
}
|
|
815
|
+
}
|
|
816
|
+
}
|
|
817
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: ContentService, deps: [{ token: i1$1.HttpClient }, { token: ENVIRONMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
818
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: ContentService }); }
|
|
819
|
+
}
|
|
820
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: ContentService, decorators: [{
|
|
821
|
+
type: Injectable
|
|
822
|
+
}], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: undefined, decorators: [{
|
|
823
|
+
type: Inject,
|
|
824
|
+
args: [ENVIRONMENT]
|
|
825
|
+
}] }] });
|
|
826
|
+
|
|
827
|
+
const ENVIRONMENT = new InjectionToken('environment');
|
|
828
|
+
class CMSClientInfraModule {
|
|
829
|
+
static forRoot(environment) {
|
|
830
|
+
return {
|
|
831
|
+
ngModule: CMSClientInfraModule,
|
|
832
|
+
providers: [
|
|
833
|
+
{ provide: ENVIRONMENT, useValue: environment },
|
|
834
|
+
ConsentService,
|
|
835
|
+
ContentService,
|
|
836
|
+
CookieService,
|
|
837
|
+
WebSettingsService,
|
|
838
|
+
PrivacyModalService
|
|
839
|
+
]
|
|
840
|
+
};
|
|
841
|
+
}
|
|
842
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CMSClientInfraModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
843
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.11", ngImport: i0, type: CMSClientInfraModule, declarations: [PrivacyModalComponent], imports: [CommonModule], exports: [PrivacyModalComponent] }); }
|
|
844
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CMSClientInfraModule, imports: [CommonModule] }); }
|
|
845
|
+
}
|
|
846
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CMSClientInfraModule, decorators: [{
|
|
847
|
+
type: NgModule,
|
|
848
|
+
args: [{
|
|
849
|
+
declarations: [
|
|
850
|
+
PrivacyModalComponent
|
|
851
|
+
],
|
|
852
|
+
imports: [
|
|
853
|
+
CommonModule
|
|
854
|
+
],
|
|
855
|
+
exports: [PrivacyModalComponent]
|
|
856
|
+
}]
|
|
857
|
+
}] });
|
|
858
|
+
|
|
859
|
+
class AnalyticsService {
|
|
860
|
+
constructor(platformId) {
|
|
861
|
+
this.platformId = platformId;
|
|
862
|
+
this.gaScriptId = 'google-analytics-script';
|
|
863
|
+
}
|
|
864
|
+
applyGoogleAnalytics(appId) {
|
|
865
|
+
if (!isPlatformBrowser(this.platformId))
|
|
866
|
+
return;
|
|
867
|
+
// 1. Establish the dataLayer and the CORRECT gtag function stub
|
|
868
|
+
const win = window;
|
|
869
|
+
win.dataLayer = win.dataLayer || [];
|
|
870
|
+
// CRITICAL FIX: The Google library requires the special 'arguments' object,
|
|
871
|
+
// NOT a standard array spread [...args].
|
|
872
|
+
if (!win.gtag) {
|
|
873
|
+
win.gtag = function () {
|
|
874
|
+
win.dataLayer.push(arguments);
|
|
875
|
+
};
|
|
876
|
+
}
|
|
877
|
+
// 2. Queue initial commands immediately (even before script loads)
|
|
878
|
+
win.gtag('js', new Date());
|
|
879
|
+
win.gtag('config', appId);
|
|
880
|
+
// 3. Load the script if not already present
|
|
881
|
+
if (!document.getElementById(this.gaScriptId)) {
|
|
882
|
+
const script = document.createElement('script');
|
|
883
|
+
script.id = this.gaScriptId;
|
|
884
|
+
script.async = true;
|
|
885
|
+
script.src = `https://www.googletagmanager.com/gtag/js?id=${appId}`;
|
|
886
|
+
script.onload = () => {
|
|
887
|
+
console.log('[Analytics] gtag.js script loaded and ready');
|
|
888
|
+
};
|
|
889
|
+
script.onerror = (e) => console.error('[Analytics] gtag.js failed to load', e);
|
|
890
|
+
document.head.appendChild(script);
|
|
891
|
+
}
|
|
892
|
+
}
|
|
893
|
+
// Helper to send events from your components
|
|
894
|
+
sendEvent(eventName, params = {}) {
|
|
895
|
+
if (isPlatformBrowser(this.platformId) && window.gtag) {
|
|
896
|
+
window.gtag('event', eventName, params);
|
|
897
|
+
}
|
|
898
|
+
}
|
|
899
|
+
// Synchronous page view sender that won't rely on internal ready Promise
|
|
900
|
+
sendPageView(path) {
|
|
901
|
+
if (!isPlatformBrowser(this.platformId))
|
|
902
|
+
return;
|
|
903
|
+
const win = window;
|
|
904
|
+
try {
|
|
905
|
+
if (win && win.gtag) {
|
|
906
|
+
// Prefer gtag when available
|
|
907
|
+
win.gtag('event', 'page_view', { page_path: path });
|
|
908
|
+
return;
|
|
909
|
+
}
|
|
910
|
+
// Fallback: ensure dataLayer exists and push a native arguments-like object
|
|
911
|
+
win.dataLayer = win.dataLayer || [];
|
|
912
|
+
// Use a plain object that resembles gtag's usage if gtag not present
|
|
913
|
+
win.dataLayer.push({ event: 'page_view', page_path: path });
|
|
914
|
+
}
|
|
915
|
+
catch (err) {
|
|
916
|
+
console.warn('[Analytics] sendPageView failed', err);
|
|
917
|
+
}
|
|
918
|
+
}
|
|
919
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AnalyticsService, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
920
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AnalyticsService, providedIn: 'root' }); }
|
|
921
|
+
}
|
|
922
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AnalyticsService, decorators: [{
|
|
923
|
+
type: Injectable,
|
|
924
|
+
args: [{ providedIn: 'root' }]
|
|
925
|
+
}], ctorParameters: () => [{ type: Object, decorators: [{
|
|
926
|
+
type: Inject,
|
|
927
|
+
args: [PLATFORM_ID]
|
|
928
|
+
}] }] });
|
|
929
|
+
|
|
129
930
|
const IS_PREVIEW = new InjectionToken('IS_PREVIEW');
|
|
931
|
+
const IOX_BUILDER_EVENTS = new InjectionToken('IOX_BUILDER_EVENTS');
|
|
932
|
+
|
|
933
|
+
class BuilderImageComponent {
|
|
934
|
+
constructor() {
|
|
935
|
+
this.src = 'https://placehold.co/600x400?text=Image';
|
|
936
|
+
this.alt = 'Image';
|
|
937
|
+
this.objectFit = 'cover';
|
|
938
|
+
this.nodeId = '';
|
|
939
|
+
}
|
|
940
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BuilderImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
941
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: BuilderImageComponent, isStandalone: false, selector: "app-builder-image", inputs: { src: "src", alt: "alt", objectFit: "objectFit", nodeId: "nodeId" }, ngImport: i0, template: `
|
|
942
|
+
<img [src]="src" [alt]="alt" [ngClass]="'iox-node-' + nodeId" [style.object-fit]="objectFit" />
|
|
943
|
+
`, isInline: true, styles: ["img{display:block;max-width:100%}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
944
|
+
}
|
|
945
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BuilderImageComponent, decorators: [{
|
|
946
|
+
type: Component,
|
|
947
|
+
args: [{ selector: 'app-builder-image', template: `
|
|
948
|
+
<img [src]="src" [alt]="alt" [ngClass]="'iox-node-' + nodeId" [style.object-fit]="objectFit" />
|
|
949
|
+
`, standalone: false, styles: ["img{display:block;max-width:100%}\n"] }]
|
|
950
|
+
}], propDecorators: { src: [{
|
|
951
|
+
type: Input
|
|
952
|
+
}], alt: [{
|
|
953
|
+
type: Input
|
|
954
|
+
}], objectFit: [{
|
|
955
|
+
type: Input
|
|
956
|
+
}], nodeId: [{
|
|
957
|
+
type: Input
|
|
958
|
+
}] } });
|
|
959
|
+
|
|
960
|
+
class BuilderSpacerComponent {
|
|
961
|
+
constructor() {
|
|
962
|
+
this.nodeId = '';
|
|
963
|
+
}
|
|
964
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BuilderSpacerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
965
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: BuilderSpacerComponent, isStandalone: false, selector: "app-builder-spacer", inputs: { nodeId: "nodeId" }, ngImport: i0, template: `<div class="iox-spacer" [ngClass]="'iox-node-' + nodeId"></div>`, isInline: true, styles: [".iox-spacer{display:block;flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
966
|
+
}
|
|
967
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BuilderSpacerComponent, decorators: [{
|
|
968
|
+
type: Component,
|
|
969
|
+
args: [{ selector: 'app-builder-spacer', template: `<div class="iox-spacer" [ngClass]="'iox-node-' + nodeId"></div>`, standalone: false, styles: [".iox-spacer{display:block;flex-shrink:0}\n"] }]
|
|
970
|
+
}], propDecorators: { nodeId: [{
|
|
971
|
+
type: Input
|
|
972
|
+
}] } });
|
|
973
|
+
|
|
974
|
+
class CardComponent {
|
|
975
|
+
constructor() {
|
|
976
|
+
this.title = '';
|
|
977
|
+
this.image = '';
|
|
978
|
+
this.description = '';
|
|
979
|
+
this.nodeId = '';
|
|
980
|
+
}
|
|
981
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
982
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: CardComponent, isStandalone: false, selector: "app-card", inputs: { title: "title", image: "image", description: "description", nodeId: "nodeId" }, ngImport: i0, template: `
|
|
983
|
+
<div class="card" [ngClass]="'iox-node-' + nodeId">
|
|
984
|
+
<div class="image-wrapper">
|
|
985
|
+
<img [src]="image" alt="Card image" class="card-img">
|
|
986
|
+
</div>
|
|
987
|
+
<h2>{{ title }}</h2>
|
|
988
|
+
<p>{{ description }}</p>
|
|
989
|
+
</div>
|
|
990
|
+
`, isInline: true, styles: [".image-wrapper{width:100%;aspect-ratio:1/1;overflow:hidden;margin-bottom:.75rem}\n", ".card-img{width:100%;height:100%;object-fit:cover}\n", "h2{margin:0 0 .5rem;font-size:1.2rem}\n", "p{margin:0}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
991
|
+
}
|
|
992
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CardComponent, decorators: [{
|
|
993
|
+
type: Component,
|
|
994
|
+
args: [{ selector: 'app-card', template: `
|
|
995
|
+
<div class="card" [ngClass]="'iox-node-' + nodeId">
|
|
996
|
+
<div class="image-wrapper">
|
|
997
|
+
<img [src]="image" alt="Card image" class="card-img">
|
|
998
|
+
</div>
|
|
999
|
+
<h2>{{ title }}</h2>
|
|
1000
|
+
<p>{{ description }}</p>
|
|
1001
|
+
</div>
|
|
1002
|
+
`, standalone: false, styles: [".image-wrapper{width:100%;aspect-ratio:1/1;overflow:hidden;margin-bottom:.75rem}\n", ".card-img{width:100%;height:100%;object-fit:cover}\n", "h2{margin:0 0 .5rem;font-size:1.2rem}\n", "p{margin:0}\n"] }]
|
|
1003
|
+
}], propDecorators: { title: [{
|
|
1004
|
+
type: Input
|
|
1005
|
+
}], image: [{
|
|
1006
|
+
type: Input
|
|
1007
|
+
}], description: [{
|
|
1008
|
+
type: Input
|
|
1009
|
+
}], nodeId: [{
|
|
1010
|
+
type: Input
|
|
1011
|
+
}] } });
|
|
1012
|
+
|
|
1013
|
+
class BuilderDividerComponent {
|
|
1014
|
+
constructor() {
|
|
1015
|
+
this.nodeId = '';
|
|
1016
|
+
}
|
|
1017
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BuilderDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1018
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: BuilderDividerComponent, isStandalone: false, selector: "app-builder-divider", inputs: { nodeId: "nodeId" }, ngImport: i0, template: `<div class="iox-divider" [ngClass]="'iox-node-' + nodeId"></div>`, isInline: true, styles: [".iox-divider{box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
1019
|
+
}
|
|
1020
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BuilderDividerComponent, decorators: [{
|
|
1021
|
+
type: Component,
|
|
1022
|
+
args: [{ selector: 'app-builder-divider', template: `<div class="iox-divider" [ngClass]="'iox-node-' + nodeId"></div>`, standalone: false, styles: [".iox-divider{box-sizing:border-box}\n"] }]
|
|
1023
|
+
}], propDecorators: { nodeId: [{
|
|
1024
|
+
type: Input
|
|
1025
|
+
}] } });
|
|
1026
|
+
|
|
1027
|
+
class BuilderIconComponent {
|
|
1028
|
+
constructor() {
|
|
1029
|
+
/** Full Phosphor icon CSS class string, e.g. "ph-thin ph-star" */
|
|
1030
|
+
this.iconClass = 'ph-thin ph-star';
|
|
1031
|
+
this.nodeId = '';
|
|
1032
|
+
}
|
|
1033
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BuilderIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1034
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: BuilderIconComponent, isStandalone: false, selector: "app-builder-icon", inputs: { iconClass: "iconClass", nodeId: "nodeId" }, ngImport: i0, template: `<i [ngClass]="[iconClass, 'iox-node-' + nodeId]"></i>`, isInline: true, styles: ["i{display:inline-block;line-height:1}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
1035
|
+
}
|
|
1036
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BuilderIconComponent, decorators: [{
|
|
1037
|
+
type: Component,
|
|
1038
|
+
args: [{ selector: 'app-builder-icon', template: `<i [ngClass]="[iconClass, 'iox-node-' + nodeId]"></i>`, standalone: false, styles: ["i{display:inline-block;line-height:1}\n"] }]
|
|
1039
|
+
}], propDecorators: { iconClass: [{
|
|
1040
|
+
type: Input
|
|
1041
|
+
}], nodeId: [{
|
|
1042
|
+
type: Input
|
|
1043
|
+
}] } });
|
|
1044
|
+
|
|
1045
|
+
class BuilderLinkComponent {
|
|
1046
|
+
constructor(isPreview) {
|
|
1047
|
+
this.isPreview = isPreview;
|
|
1048
|
+
this.label = 'Click here';
|
|
1049
|
+
this.linkType = 'external';
|
|
1050
|
+
this.url = 'https://';
|
|
1051
|
+
this.pageRoute = '';
|
|
1052
|
+
this.target = '_self';
|
|
1053
|
+
this.style = {};
|
|
1054
|
+
}
|
|
1055
|
+
get resolvedHref() {
|
|
1056
|
+
if (this.linkType !== 'page')
|
|
1057
|
+
return this.url || '#';
|
|
1058
|
+
return this.pageRoute || '#';
|
|
1059
|
+
}
|
|
1060
|
+
onLinkClick(event) {
|
|
1061
|
+
if (!this.isPreview) {
|
|
1062
|
+
event.preventDefault();
|
|
1063
|
+
event.stopPropagation();
|
|
1064
|
+
}
|
|
1065
|
+
}
|
|
1066
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BuilderLinkComponent, deps: [{ token: IS_PREVIEW, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1067
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: BuilderLinkComponent, isStandalone: false, selector: "app-builder-link", inputs: { label: "label", linkType: "linkType", url: "url", pageRoute: "pageRoute", target: "target", style: "style" }, ngImport: i0, template: `
|
|
1068
|
+
<a [href]="isPreview ? resolvedHref : null"
|
|
1069
|
+
[attr.target]="isPreview ? target : null"
|
|
1070
|
+
[ngStyle]="style"
|
|
1071
|
+
[style.pointerEvents]="isPreview ? '' : 'none'"
|
|
1072
|
+
class="builder-link"
|
|
1073
|
+
(click)="onLinkClick($event)">
|
|
1074
|
+
{{ label }}
|
|
1075
|
+
</a>
|
|
1076
|
+
`, isInline: true, styles: [".builder-link{display:inline;cursor:pointer;color:inherit}\n"], dependencies: [{ kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1077
|
+
}
|
|
1078
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BuilderLinkComponent, decorators: [{
|
|
1079
|
+
type: Component,
|
|
1080
|
+
args: [{ selector: 'app-builder-link', template: `
|
|
1081
|
+
<a [href]="isPreview ? resolvedHref : null"
|
|
1082
|
+
[attr.target]="isPreview ? target : null"
|
|
1083
|
+
[ngStyle]="style"
|
|
1084
|
+
[style.pointerEvents]="isPreview ? '' : 'none'"
|
|
1085
|
+
class="builder-link"
|
|
1086
|
+
(click)="onLinkClick($event)">
|
|
1087
|
+
{{ label }}
|
|
1088
|
+
</a>
|
|
1089
|
+
`, standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".builder-link{display:inline;cursor:pointer;color:inherit}\n"] }]
|
|
1090
|
+
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
1091
|
+
type: Optional
|
|
1092
|
+
}, {
|
|
1093
|
+
type: Inject,
|
|
1094
|
+
args: [IS_PREVIEW]
|
|
1095
|
+
}] }], propDecorators: { label: [{
|
|
1096
|
+
type: Input
|
|
1097
|
+
}], linkType: [{
|
|
1098
|
+
type: Input
|
|
1099
|
+
}], url: [{
|
|
1100
|
+
type: Input
|
|
1101
|
+
}], pageRoute: [{
|
|
1102
|
+
type: Input
|
|
1103
|
+
}], target: [{
|
|
1104
|
+
type: Input
|
|
1105
|
+
}], style: [{
|
|
1106
|
+
type: Input
|
|
1107
|
+
}] } });
|
|
1108
|
+
|
|
1109
|
+
class BuilderButtonComponent {
|
|
1110
|
+
constructor(events) {
|
|
1111
|
+
this.events = events;
|
|
1112
|
+
this.label = 'Click me';
|
|
1113
|
+
this.link = '#';
|
|
1114
|
+
this.variant = 'primary';
|
|
1115
|
+
this.nodeId = '';
|
|
1116
|
+
this.node = null;
|
|
1117
|
+
this.editing = false;
|
|
1118
|
+
}
|
|
1119
|
+
ngOnInit() { }
|
|
1120
|
+
startEdit(event) {
|
|
1121
|
+
if (this.isBound('label'))
|
|
1122
|
+
return;
|
|
1123
|
+
event.preventDefault();
|
|
1124
|
+
event.stopPropagation();
|
|
1125
|
+
this.editing = true;
|
|
1126
|
+
setTimeout(() => event.target.focus());
|
|
1127
|
+
}
|
|
1128
|
+
commitEdit(event) {
|
|
1129
|
+
if (!this.editing)
|
|
1130
|
+
return;
|
|
1131
|
+
this.editing = false;
|
|
1132
|
+
const newValue = event.target.innerText.trim();
|
|
1133
|
+
this.label = newValue;
|
|
1134
|
+
this.syncTraitToPanel('label', newValue);
|
|
1135
|
+
}
|
|
1136
|
+
onKeyDown(event) {
|
|
1137
|
+
if (event.key === 'Enter') {
|
|
1138
|
+
event.preventDefault();
|
|
1139
|
+
event.target.blur();
|
|
1140
|
+
}
|
|
1141
|
+
if (event.key === 'Escape') {
|
|
1142
|
+
this.editing = false;
|
|
1143
|
+
event.target.blur();
|
|
1144
|
+
}
|
|
1145
|
+
event.stopPropagation();
|
|
1146
|
+
}
|
|
1147
|
+
isBound(prop) {
|
|
1148
|
+
return (this.node?.bindings || []).some(b => b.prop === prop);
|
|
1149
|
+
}
|
|
1150
|
+
syncTraitToPanel(prop, value) {
|
|
1151
|
+
if (!this.node || !this.events)
|
|
1152
|
+
return;
|
|
1153
|
+
const trait = (this.node.traits || []).find(t => t.name === prop);
|
|
1154
|
+
if (trait) {
|
|
1155
|
+
trait.default = value;
|
|
1156
|
+
}
|
|
1157
|
+
this.events.emit('elementselect', { node: this.node, componentRef: null });
|
|
1158
|
+
}
|
|
1159
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BuilderButtonComponent, deps: [{ token: IOX_BUILDER_EVENTS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1160
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: BuilderButtonComponent, isStandalone: false, selector: "app-builder-button", inputs: { label: "label", link: "link", variant: "variant", nodeId: "nodeId", node: "node" }, ngImport: i0, template: `
|
|
1161
|
+
<a [href]="link" class="builder-btn" [ngClass]="['variant-' + variant, 'iox-node-' + nodeId]"
|
|
1162
|
+
[attr.contenteditable]="editing ? 'true' : null"
|
|
1163
|
+
(dblclick)="startEdit($event)"
|
|
1164
|
+
(blur)="commitEdit($event)"
|
|
1165
|
+
(keydown)="onKeyDown($event)">
|
|
1166
|
+
{{ label }}
|
|
1167
|
+
</a>
|
|
1168
|
+
`, isInline: true, styles: [".builder-btn{display:inline-block;padding:.6rem 1.5rem;border-radius:6px;font-size:.9rem;text-decoration:none;cursor:pointer;text-align:center;transition:opacity .15s}.variant-primary{background:#cb9090;color:#fff;border:1px solid #cb9090}.variant-outlined{background:transparent;color:#cb9090;border:1px solid #cb9090}.variant-text{background:transparent;color:#cb9090;border:1px solid transparent}[contenteditable]{outline:2px solid #cb9090;cursor:text}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1169
|
+
}
|
|
1170
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BuilderButtonComponent, decorators: [{
|
|
1171
|
+
type: Component,
|
|
1172
|
+
args: [{ selector: 'app-builder-button', template: `
|
|
1173
|
+
<a [href]="link" class="builder-btn" [ngClass]="['variant-' + variant, 'iox-node-' + nodeId]"
|
|
1174
|
+
[attr.contenteditable]="editing ? 'true' : null"
|
|
1175
|
+
(dblclick)="startEdit($event)"
|
|
1176
|
+
(blur)="commitEdit($event)"
|
|
1177
|
+
(keydown)="onKeyDown($event)">
|
|
1178
|
+
{{ label }}
|
|
1179
|
+
</a>
|
|
1180
|
+
`, standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".builder-btn{display:inline-block;padding:.6rem 1.5rem;border-radius:6px;font-size:.9rem;text-decoration:none;cursor:pointer;text-align:center;transition:opacity .15s}.variant-primary{background:#cb9090;color:#fff;border:1px solid #cb9090}.variant-outlined{background:transparent;color:#cb9090;border:1px solid #cb9090}.variant-text{background:transparent;color:#cb9090;border:1px solid transparent}[contenteditable]{outline:2px solid #cb9090;cursor:text}\n"] }]
|
|
1181
|
+
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
1182
|
+
type: Optional
|
|
1183
|
+
}, {
|
|
1184
|
+
type: Inject,
|
|
1185
|
+
args: [IOX_BUILDER_EVENTS]
|
|
1186
|
+
}] }], propDecorators: { label: [{
|
|
1187
|
+
type: Input
|
|
1188
|
+
}], link: [{
|
|
1189
|
+
type: Input
|
|
1190
|
+
}], variant: [{
|
|
1191
|
+
type: Input
|
|
1192
|
+
}], nodeId: [{
|
|
1193
|
+
type: Input
|
|
1194
|
+
}], node: [{
|
|
1195
|
+
type: Input
|
|
1196
|
+
}] } });
|
|
1197
|
+
|
|
1198
|
+
class BuilderHeadingComponent {
|
|
1199
|
+
constructor(events, cdr) {
|
|
1200
|
+
this.events = events;
|
|
1201
|
+
this.cdr = cdr;
|
|
1202
|
+
this.content = 'Heading';
|
|
1203
|
+
this.level = 'h2';
|
|
1204
|
+
this.nodeId = '';
|
|
1205
|
+
this.node = null;
|
|
1206
|
+
this.editing = false;
|
|
1207
|
+
}
|
|
1208
|
+
ngOnInit() { }
|
|
1209
|
+
onMouseDown(event) {
|
|
1210
|
+
if (this.editing) {
|
|
1211
|
+
event.stopPropagation();
|
|
1212
|
+
}
|
|
1213
|
+
}
|
|
1214
|
+
startEdit(event) {
|
|
1215
|
+
if (this.isBound('content'))
|
|
1216
|
+
return;
|
|
1217
|
+
event.stopPropagation();
|
|
1218
|
+
this.editing = true;
|
|
1219
|
+
this.cdr.detectChanges();
|
|
1220
|
+
this.cdr.detach();
|
|
1221
|
+
const el = event.target;
|
|
1222
|
+
setTimeout(() => { el.focus(); });
|
|
1223
|
+
}
|
|
1224
|
+
commitEdit(event) {
|
|
1225
|
+
if (!this.editing)
|
|
1226
|
+
return;
|
|
1227
|
+
this.editing = false;
|
|
1228
|
+
const newValue = event.target.innerText;
|
|
1229
|
+
this.content = newValue;
|
|
1230
|
+
this.cdr.reattach();
|
|
1231
|
+
this.syncTraitToPanel('content', newValue);
|
|
1232
|
+
}
|
|
1233
|
+
onKeyDown(event) {
|
|
1234
|
+
if (event.key === 'Enter' && !event.shiftKey) {
|
|
1235
|
+
event.preventDefault();
|
|
1236
|
+
event.target.blur();
|
|
1237
|
+
}
|
|
1238
|
+
if (event.key === 'Escape') {
|
|
1239
|
+
this.editing = false;
|
|
1240
|
+
this.cdr.reattach();
|
|
1241
|
+
event.target.blur();
|
|
1242
|
+
}
|
|
1243
|
+
event.stopPropagation();
|
|
1244
|
+
}
|
|
1245
|
+
isBound(prop) {
|
|
1246
|
+
return (this.node?.bindings || []).some(b => b.prop === prop);
|
|
1247
|
+
}
|
|
1248
|
+
syncTraitToPanel(prop, value) {
|
|
1249
|
+
if (!this.node || !this.events)
|
|
1250
|
+
return;
|
|
1251
|
+
const trait = (this.node.traits || []).find(t => t.name === prop);
|
|
1252
|
+
if (trait) {
|
|
1253
|
+
trait.default = value;
|
|
1254
|
+
}
|
|
1255
|
+
this.events.emit('elementselect', { node: this.node, componentRef: null, isCanvasUpdate: true });
|
|
1256
|
+
}
|
|
1257
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BuilderHeadingComponent, deps: [{ token: IOX_BUILDER_EVENTS, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1258
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: BuilderHeadingComponent, isStandalone: false, selector: "app-builder-heading", inputs: { content: "content", level: "level", nodeId: "nodeId", node: "node" }, ngImport: i0, template: `
|
|
1259
|
+
<ng-container [ngSwitch]="level">
|
|
1260
|
+
<h1 *ngSwitchCase="'h1'" [ngClass]="'iox-node-' + nodeId"
|
|
1261
|
+
[attr.contenteditable]="editing ? 'true' : null"
|
|
1262
|
+
(mousedown)="onMouseDown($event)"
|
|
1263
|
+
(dblclick)="startEdit($event)" (blur)="commitEdit($event)" (keydown)="onKeyDown($event)">{{ content }}</h1>
|
|
1264
|
+
<h2 *ngSwitchCase="'h2'" [ngClass]="'iox-node-' + nodeId"
|
|
1265
|
+
[attr.contenteditable]="editing ? 'true' : null"
|
|
1266
|
+
(mousedown)="onMouseDown($event)"
|
|
1267
|
+
(dblclick)="startEdit($event)" (blur)="commitEdit($event)" (keydown)="onKeyDown($event)">{{ content }}</h2>
|
|
1268
|
+
<h3 *ngSwitchCase="'h3'" [ngClass]="'iox-node-' + nodeId"
|
|
1269
|
+
[attr.contenteditable]="editing ? 'true' : null"
|
|
1270
|
+
(mousedown)="onMouseDown($event)"
|
|
1271
|
+
(dblclick)="startEdit($event)" (blur)="commitEdit($event)" (keydown)="onKeyDown($event)">{{ content }}</h3>
|
|
1272
|
+
<h4 *ngSwitchCase="'h4'" [ngClass]="'iox-node-' + nodeId"
|
|
1273
|
+
[attr.contenteditable]="editing ? 'true' : null"
|
|
1274
|
+
(mousedown)="onMouseDown($event)"
|
|
1275
|
+
(dblclick)="startEdit($event)" (blur)="commitEdit($event)" (keydown)="onKeyDown($event)">{{ content }}</h4>
|
|
1276
|
+
<h5 *ngSwitchCase="'h5'" [ngClass]="'iox-node-' + nodeId"
|
|
1277
|
+
[attr.contenteditable]="editing ? 'true' : null"
|
|
1278
|
+
(mousedown)="onMouseDown($event)"
|
|
1279
|
+
(dblclick)="startEdit($event)" (blur)="commitEdit($event)" (keydown)="onKeyDown($event)">{{ content }}</h5>
|
|
1280
|
+
<h6 *ngSwitchDefault [ngClass]="'iox-node-' + nodeId"
|
|
1281
|
+
[attr.contenteditable]="editing ? 'true' : null"
|
|
1282
|
+
(mousedown)="onMouseDown($event)"
|
|
1283
|
+
(dblclick)="startEdit($event)" (blur)="commitEdit($event)" (keydown)="onKeyDown($event)">{{ content }}</h6>
|
|
1284
|
+
</ng-container>
|
|
1285
|
+
`, isInline: true, styles: ["h1,h2,h3,h4,h5,h6{margin:0}[contenteditable]{outline:none;cursor:text}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$2.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1286
|
+
}
|
|
1287
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BuilderHeadingComponent, decorators: [{
|
|
1288
|
+
type: Component,
|
|
1289
|
+
args: [{ selector: 'app-builder-heading', template: `
|
|
1290
|
+
<ng-container [ngSwitch]="level">
|
|
1291
|
+
<h1 *ngSwitchCase="'h1'" [ngClass]="'iox-node-' + nodeId"
|
|
1292
|
+
[attr.contenteditable]="editing ? 'true' : null"
|
|
1293
|
+
(mousedown)="onMouseDown($event)"
|
|
1294
|
+
(dblclick)="startEdit($event)" (blur)="commitEdit($event)" (keydown)="onKeyDown($event)">{{ content }}</h1>
|
|
1295
|
+
<h2 *ngSwitchCase="'h2'" [ngClass]="'iox-node-' + nodeId"
|
|
1296
|
+
[attr.contenteditable]="editing ? 'true' : null"
|
|
1297
|
+
(mousedown)="onMouseDown($event)"
|
|
1298
|
+
(dblclick)="startEdit($event)" (blur)="commitEdit($event)" (keydown)="onKeyDown($event)">{{ content }}</h2>
|
|
1299
|
+
<h3 *ngSwitchCase="'h3'" [ngClass]="'iox-node-' + nodeId"
|
|
1300
|
+
[attr.contenteditable]="editing ? 'true' : null"
|
|
1301
|
+
(mousedown)="onMouseDown($event)"
|
|
1302
|
+
(dblclick)="startEdit($event)" (blur)="commitEdit($event)" (keydown)="onKeyDown($event)">{{ content }}</h3>
|
|
1303
|
+
<h4 *ngSwitchCase="'h4'" [ngClass]="'iox-node-' + nodeId"
|
|
1304
|
+
[attr.contenteditable]="editing ? 'true' : null"
|
|
1305
|
+
(mousedown)="onMouseDown($event)"
|
|
1306
|
+
(dblclick)="startEdit($event)" (blur)="commitEdit($event)" (keydown)="onKeyDown($event)">{{ content }}</h4>
|
|
1307
|
+
<h5 *ngSwitchCase="'h5'" [ngClass]="'iox-node-' + nodeId"
|
|
1308
|
+
[attr.contenteditable]="editing ? 'true' : null"
|
|
1309
|
+
(mousedown)="onMouseDown($event)"
|
|
1310
|
+
(dblclick)="startEdit($event)" (blur)="commitEdit($event)" (keydown)="onKeyDown($event)">{{ content }}</h5>
|
|
1311
|
+
<h6 *ngSwitchDefault [ngClass]="'iox-node-' + nodeId"
|
|
1312
|
+
[attr.contenteditable]="editing ? 'true' : null"
|
|
1313
|
+
(mousedown)="onMouseDown($event)"
|
|
1314
|
+
(dblclick)="startEdit($event)" (blur)="commitEdit($event)" (keydown)="onKeyDown($event)">{{ content }}</h6>
|
|
1315
|
+
</ng-container>
|
|
1316
|
+
`, standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["h1,h2,h3,h4,h5,h6{margin:0}[contenteditable]{outline:none;cursor:text}\n"] }]
|
|
1317
|
+
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
1318
|
+
type: Optional
|
|
1319
|
+
}, {
|
|
1320
|
+
type: Inject,
|
|
1321
|
+
args: [IOX_BUILDER_EVENTS]
|
|
1322
|
+
}] }, { type: i0.ChangeDetectorRef }], propDecorators: { content: [{
|
|
1323
|
+
type: Input
|
|
1324
|
+
}], level: [{
|
|
1325
|
+
type: Input
|
|
1326
|
+
}], nodeId: [{
|
|
1327
|
+
type: Input
|
|
1328
|
+
}], node: [{
|
|
1329
|
+
type: Input
|
|
1330
|
+
}] } });
|
|
1331
|
+
|
|
1332
|
+
class TextBlockComponent {
|
|
1333
|
+
constructor(events, cdr) {
|
|
1334
|
+
this.events = events;
|
|
1335
|
+
this.cdr = cdr;
|
|
1336
|
+
this.content = 'Enter text here';
|
|
1337
|
+
this.tag = 'p';
|
|
1338
|
+
this.style = {};
|
|
1339
|
+
this.nodeId = '';
|
|
1340
|
+
this.node = null;
|
|
1341
|
+
this.editing = false;
|
|
1342
|
+
}
|
|
1343
|
+
ngOnInit() { }
|
|
1344
|
+
onMouseDown(event) {
|
|
1345
|
+
if (this.editing) {
|
|
1346
|
+
event.stopPropagation();
|
|
1347
|
+
}
|
|
1348
|
+
}
|
|
1349
|
+
startEdit(event) {
|
|
1350
|
+
if (this.isBound('content'))
|
|
1351
|
+
return;
|
|
1352
|
+
event.stopPropagation();
|
|
1353
|
+
this.editing = true;
|
|
1354
|
+
this.cdr.detectChanges();
|
|
1355
|
+
this.cdr.detach();
|
|
1356
|
+
const el = event.target;
|
|
1357
|
+
setTimeout(() => { el.focus(); });
|
|
1358
|
+
}
|
|
1359
|
+
commitEdit(event) {
|
|
1360
|
+
if (!this.editing)
|
|
1361
|
+
return;
|
|
1362
|
+
this.editing = false;
|
|
1363
|
+
const newValue = event.target.innerText;
|
|
1364
|
+
this.content = newValue;
|
|
1365
|
+
this.cdr.reattach();
|
|
1366
|
+
this.syncTraitToPanel('content', newValue);
|
|
1367
|
+
}
|
|
1368
|
+
onKeyDown(event) {
|
|
1369
|
+
if (event.key === 'Enter' && !event.shiftKey) {
|
|
1370
|
+
event.preventDefault();
|
|
1371
|
+
event.target.blur();
|
|
1372
|
+
}
|
|
1373
|
+
if (event.key === 'Escape') {
|
|
1374
|
+
this.editing = false;
|
|
1375
|
+
this.cdr.reattach();
|
|
1376
|
+
event.target.blur();
|
|
1377
|
+
}
|
|
1378
|
+
event.stopPropagation();
|
|
1379
|
+
}
|
|
1380
|
+
isBound(prop) {
|
|
1381
|
+
return (this.node?.bindings || []).some(b => b.prop === prop);
|
|
1382
|
+
}
|
|
1383
|
+
syncTraitToPanel(prop, value) {
|
|
1384
|
+
if (!this.node || !this.events)
|
|
1385
|
+
return;
|
|
1386
|
+
const trait = (this.node.traits || []).find(t => t.name === prop);
|
|
1387
|
+
if (trait) {
|
|
1388
|
+
trait.default = value;
|
|
1389
|
+
}
|
|
1390
|
+
this.events.emit('elementselect', { node: this.node, componentRef: null, isCanvasUpdate: true });
|
|
1391
|
+
}
|
|
1392
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: TextBlockComponent, deps: [{ token: IOX_BUILDER_EVENTS, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1393
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: TextBlockComponent, isStandalone: false, selector: "app-text-block", inputs: { content: "content", tag: "tag", style: "style", nodeId: "nodeId", node: "node" }, ngImport: i0, template: `
|
|
1394
|
+
<ng-container [ngSwitch]="tag">
|
|
1395
|
+
<p *ngSwitchDefault
|
|
1396
|
+
[ngClass]="'iox-node-' + nodeId"
|
|
1397
|
+
[attr.contenteditable]="editing ? 'true' : null"
|
|
1398
|
+
(mousedown)="onMouseDown($event)"
|
|
1399
|
+
(dblclick)="startEdit($event)"
|
|
1400
|
+
(blur)="commitEdit($event)"
|
|
1401
|
+
(keydown)="onKeyDown($event)">{{ content }}</p>
|
|
1402
|
+
<span *ngSwitchCase="'span'"
|
|
1403
|
+
[ngClass]="'iox-node-' + nodeId"
|
|
1404
|
+
[attr.contenteditable]="editing ? 'true' : null"
|
|
1405
|
+
(mousedown)="onMouseDown($event)"
|
|
1406
|
+
(dblclick)="startEdit($event)"
|
|
1407
|
+
(blur)="commitEdit($event)"
|
|
1408
|
+
(keydown)="onKeyDown($event)">{{ content }}</span>
|
|
1409
|
+
</ng-container>
|
|
1410
|
+
`, isInline: true, styles: ["p,span{margin:0}[contenteditable]{outline:none;cursor:text}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$2.NgSwitchDefault, selector: "[ngSwitchDefault]" }] }); }
|
|
1411
|
+
}
|
|
1412
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: TextBlockComponent, decorators: [{
|
|
1413
|
+
type: Component,
|
|
1414
|
+
args: [{ selector: 'app-text-block', template: `
|
|
1415
|
+
<ng-container [ngSwitch]="tag">
|
|
1416
|
+
<p *ngSwitchDefault
|
|
1417
|
+
[ngClass]="'iox-node-' + nodeId"
|
|
1418
|
+
[attr.contenteditable]="editing ? 'true' : null"
|
|
1419
|
+
(mousedown)="onMouseDown($event)"
|
|
1420
|
+
(dblclick)="startEdit($event)"
|
|
1421
|
+
(blur)="commitEdit($event)"
|
|
1422
|
+
(keydown)="onKeyDown($event)">{{ content }}</p>
|
|
1423
|
+
<span *ngSwitchCase="'span'"
|
|
1424
|
+
[ngClass]="'iox-node-' + nodeId"
|
|
1425
|
+
[attr.contenteditable]="editing ? 'true' : null"
|
|
1426
|
+
(mousedown)="onMouseDown($event)"
|
|
1427
|
+
(dblclick)="startEdit($event)"
|
|
1428
|
+
(blur)="commitEdit($event)"
|
|
1429
|
+
(keydown)="onKeyDown($event)">{{ content }}</span>
|
|
1430
|
+
</ng-container>
|
|
1431
|
+
`, standalone: false, styles: ["p,span{margin:0}[contenteditable]{outline:none;cursor:text}\n"] }]
|
|
1432
|
+
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
1433
|
+
type: Optional
|
|
1434
|
+
}, {
|
|
1435
|
+
type: Inject,
|
|
1436
|
+
args: [IOX_BUILDER_EVENTS]
|
|
1437
|
+
}] }, { type: i0.ChangeDetectorRef }], propDecorators: { content: [{
|
|
1438
|
+
type: Input
|
|
1439
|
+
}], tag: [{
|
|
1440
|
+
type: Input
|
|
1441
|
+
}], style: [{
|
|
1442
|
+
type: Input
|
|
1443
|
+
}], nodeId: [{
|
|
1444
|
+
type: Input
|
|
1445
|
+
}], node: [{
|
|
1446
|
+
type: Input
|
|
1447
|
+
}] } });
|
|
1448
|
+
|
|
1449
|
+
class SectionComponent {
|
|
1450
|
+
constructor() {
|
|
1451
|
+
this.nodeId = '';
|
|
1452
|
+
}
|
|
1453
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: SectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1454
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: SectionComponent, isStandalone: false, selector: "iox-section", inputs: { nodeId: "nodeId" }, viewQueries: [{ propertyName: "childrenHost", first: true, predicate: ["childrenHost"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: `
|
|
1455
|
+
<div class="section-root" [ngClass]="['iox-node-' + nodeId]">
|
|
1456
|
+
<ng-container #childrenHost></ng-container>
|
|
1457
|
+
</div>
|
|
1458
|
+
`, isInline: true, styles: [".section-root{position:relative;box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
1459
|
+
}
|
|
1460
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: SectionComponent, decorators: [{
|
|
1461
|
+
type: Component,
|
|
1462
|
+
args: [{ selector: 'iox-section', template: `
|
|
1463
|
+
<div class="section-root" [ngClass]="['iox-node-' + nodeId]">
|
|
1464
|
+
<ng-container #childrenHost></ng-container>
|
|
1465
|
+
</div>
|
|
1466
|
+
`, standalone: false, styles: [".section-root{position:relative;box-sizing:border-box}\n"] }]
|
|
1467
|
+
}], propDecorators: { nodeId: [{
|
|
1468
|
+
type: Input
|
|
1469
|
+
}], childrenHost: [{
|
|
1470
|
+
type: ViewChild,
|
|
1471
|
+
args: ['childrenHost', { read: ViewContainerRef, static: true }]
|
|
1472
|
+
}] } });
|
|
1473
|
+
|
|
1474
|
+
class ContainerComponent {
|
|
1475
|
+
constructor() {
|
|
1476
|
+
this.nodeId = '';
|
|
1477
|
+
}
|
|
1478
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: ContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1479
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: ContainerComponent, isStandalone: false, selector: "iox-container", inputs: { nodeId: "nodeId" }, viewQueries: [{ propertyName: "childrenHost", first: true, predicate: ["childrenHost"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: `
|
|
1480
|
+
<div class="container-root" [ngClass]="['iox-node-' + nodeId]">
|
|
1481
|
+
<ng-container #childrenHost></ng-container>
|
|
1482
|
+
</div>
|
|
1483
|
+
`, isInline: true, styles: [".container-root{position:relative;box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
1484
|
+
}
|
|
1485
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: ContainerComponent, decorators: [{
|
|
1486
|
+
type: Component,
|
|
1487
|
+
args: [{ selector: 'iox-container', template: `
|
|
1488
|
+
<div class="container-root" [ngClass]="['iox-node-' + nodeId]">
|
|
1489
|
+
<ng-container #childrenHost></ng-container>
|
|
1490
|
+
</div>
|
|
1491
|
+
`, standalone: false, styles: [".container-root{position:relative;box-sizing:border-box}\n"] }]
|
|
1492
|
+
}], propDecorators: { nodeId: [{
|
|
1493
|
+
type: Input
|
|
1494
|
+
}], childrenHost: [{
|
|
1495
|
+
type: ViewChild,
|
|
1496
|
+
args: ['childrenHost', { read: ViewContainerRef, static: true }]
|
|
1497
|
+
}] } });
|
|
1498
|
+
|
|
1499
|
+
class LinkedContainerComponent {
|
|
1500
|
+
constructor(elRef, isPreview) {
|
|
1501
|
+
this.elRef = elRef;
|
|
1502
|
+
this.isPreview = isPreview;
|
|
1503
|
+
this.nodeId = '';
|
|
1504
|
+
this.linkType = 'external';
|
|
1505
|
+
this.url = 'https://';
|
|
1506
|
+
this.pageRoute = '';
|
|
1507
|
+
this.target = '_self';
|
|
1508
|
+
this.capturePreventDefault = (e) => e.preventDefault();
|
|
1509
|
+
}
|
|
1510
|
+
ngOnInit() {
|
|
1511
|
+
if (!this.isPreview) {
|
|
1512
|
+
this.elRef.nativeElement.addEventListener('click', this.capturePreventDefault, true);
|
|
1513
|
+
}
|
|
1514
|
+
}
|
|
1515
|
+
ngOnDestroy() {
|
|
1516
|
+
if (!this.isPreview) {
|
|
1517
|
+
this.elRef.nativeElement.removeEventListener('click', this.capturePreventDefault, true);
|
|
1518
|
+
}
|
|
1519
|
+
}
|
|
1520
|
+
get resolvedHref() {
|
|
1521
|
+
if (this.linkType !== 'page')
|
|
1522
|
+
return this.url || '#';
|
|
1523
|
+
return this.pageRoute || '#';
|
|
1524
|
+
}
|
|
1525
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: LinkedContainerComponent, deps: [{ token: i0.ElementRef }, { token: IS_PREVIEW, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1526
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: LinkedContainerComponent, isStandalone: false, selector: "iox-linked-container", inputs: { nodeId: "nodeId", linkType: "linkType", url: "url", pageRoute: "pageRoute", target: "target" }, viewQueries: [{ propertyName: "childrenHost", first: true, predicate: ["childrenHost"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: `
|
|
1527
|
+
<a [href]="resolvedHref"
|
|
1528
|
+
[target]="target"
|
|
1529
|
+
[ngClass]="['iox-node-' + nodeId]"
|
|
1530
|
+
class="linked-container-root">
|
|
1531
|
+
<ng-container #childrenHost></ng-container>
|
|
1532
|
+
</a>
|
|
1533
|
+
`, isInline: true, styles: [".linked-container-root{display:block;position:relative;box-sizing:border-box;text-decoration:none;color:inherit;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
1534
|
+
}
|
|
1535
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: LinkedContainerComponent, decorators: [{
|
|
1536
|
+
type: Component,
|
|
1537
|
+
args: [{ selector: 'iox-linked-container', template: `
|
|
1538
|
+
<a [href]="resolvedHref"
|
|
1539
|
+
[target]="target"
|
|
1540
|
+
[ngClass]="['iox-node-' + nodeId]"
|
|
1541
|
+
class="linked-container-root">
|
|
1542
|
+
<ng-container #childrenHost></ng-container>
|
|
1543
|
+
</a>
|
|
1544
|
+
`, standalone: false, styles: [".linked-container-root{display:block;position:relative;box-sizing:border-box;text-decoration:none;color:inherit;cursor:pointer}\n"] }]
|
|
1545
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
|
|
1546
|
+
type: Optional
|
|
1547
|
+
}, {
|
|
1548
|
+
type: Inject,
|
|
1549
|
+
args: [IS_PREVIEW]
|
|
1550
|
+
}] }], propDecorators: { nodeId: [{
|
|
1551
|
+
type: Input
|
|
1552
|
+
}], linkType: [{
|
|
1553
|
+
type: Input
|
|
1554
|
+
}], url: [{
|
|
1555
|
+
type: Input
|
|
1556
|
+
}], pageRoute: [{
|
|
1557
|
+
type: Input
|
|
1558
|
+
}], target: [{
|
|
1559
|
+
type: Input
|
|
1560
|
+
}], childrenHost: [{
|
|
1561
|
+
type: ViewChild,
|
|
1562
|
+
args: ['childrenHost', { read: ViewContainerRef, static: true }]
|
|
1563
|
+
}] } });
|
|
1564
|
+
|
|
1565
|
+
/**
|
|
1566
|
+
* Client-engine repeater shell. Data fetching and item expansion are handled
|
|
1567
|
+
* by DataSourceResolverService + BindingApplicatorService in the PageResolver
|
|
1568
|
+
* before this component is rendered. ClientRenderDirective inserts one child
|
|
1569
|
+
* per resolved item into childrenHost.
|
|
1570
|
+
*/
|
|
1571
|
+
class ClientRepeaterComponent {
|
|
1572
|
+
constructor() {
|
|
1573
|
+
this.nodeId = '';
|
|
1574
|
+
}
|
|
1575
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: ClientRepeaterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1576
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: ClientRepeaterComponent, isStandalone: false, selector: "iox-repeater", inputs: { nodeId: "nodeId" }, viewQueries: [{ propertyName: "childrenHost", first: true, predicate: ["childrenHost"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: `
|
|
1577
|
+
<div class="repeater-root" [ngClass]="['iox-node-' + nodeId]">
|
|
1578
|
+
<ng-container #childrenHost></ng-container>
|
|
1579
|
+
</div>
|
|
1580
|
+
`, isInline: true, styles: [".repeater-root{position:relative;box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
1581
|
+
}
|
|
1582
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: ClientRepeaterComponent, decorators: [{
|
|
1583
|
+
type: Component,
|
|
1584
|
+
args: [{ selector: 'iox-repeater', template: `
|
|
1585
|
+
<div class="repeater-root" [ngClass]="['iox-node-' + nodeId]">
|
|
1586
|
+
<ng-container #childrenHost></ng-container>
|
|
1587
|
+
</div>
|
|
1588
|
+
`, standalone: false, styles: [".repeater-root{position:relative;box-sizing:border-box}\n"] }]
|
|
1589
|
+
}], propDecorators: { nodeId: [{
|
|
1590
|
+
type: Input
|
|
1591
|
+
}], childrenHost: [{
|
|
1592
|
+
type: ViewChild,
|
|
1593
|
+
args: ['childrenHost', { read: ViewContainerRef, static: true }]
|
|
1594
|
+
}] } });
|
|
1595
|
+
|
|
1596
|
+
const COMPONENTS = [
|
|
1597
|
+
BuilderImageComponent,
|
|
1598
|
+
BuilderSpacerComponent,
|
|
1599
|
+
CardComponent,
|
|
1600
|
+
BuilderDividerComponent,
|
|
1601
|
+
BuilderIconComponent,
|
|
1602
|
+
BuilderLinkComponent,
|
|
1603
|
+
BuilderButtonComponent,
|
|
1604
|
+
BuilderHeadingComponent,
|
|
1605
|
+
TextBlockComponent,
|
|
1606
|
+
SectionComponent,
|
|
1607
|
+
ContainerComponent,
|
|
1608
|
+
LinkedContainerComponent,
|
|
1609
|
+
ClientRepeaterComponent,
|
|
1610
|
+
];
|
|
1611
|
+
class IoxBuilderComponentsModule {
|
|
1612
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: IoxBuilderComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1613
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.11", ngImport: i0, type: IoxBuilderComponentsModule, declarations: [BuilderImageComponent,
|
|
1614
|
+
BuilderSpacerComponent,
|
|
1615
|
+
CardComponent,
|
|
1616
|
+
BuilderDividerComponent,
|
|
1617
|
+
BuilderIconComponent,
|
|
1618
|
+
BuilderLinkComponent,
|
|
1619
|
+
BuilderButtonComponent,
|
|
1620
|
+
BuilderHeadingComponent,
|
|
1621
|
+
TextBlockComponent,
|
|
1622
|
+
SectionComponent,
|
|
1623
|
+
ContainerComponent,
|
|
1624
|
+
LinkedContainerComponent,
|
|
1625
|
+
ClientRepeaterComponent], imports: [CommonModule], exports: [BuilderImageComponent,
|
|
1626
|
+
BuilderSpacerComponent,
|
|
1627
|
+
CardComponent,
|
|
1628
|
+
BuilderDividerComponent,
|
|
1629
|
+
BuilderIconComponent,
|
|
1630
|
+
BuilderLinkComponent,
|
|
1631
|
+
BuilderButtonComponent,
|
|
1632
|
+
BuilderHeadingComponent,
|
|
1633
|
+
TextBlockComponent,
|
|
1634
|
+
SectionComponent,
|
|
1635
|
+
ContainerComponent,
|
|
1636
|
+
LinkedContainerComponent,
|
|
1637
|
+
ClientRepeaterComponent] }); }
|
|
1638
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: IoxBuilderComponentsModule, imports: [CommonModule] }); }
|
|
1639
|
+
}
|
|
1640
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: IoxBuilderComponentsModule, decorators: [{
|
|
1641
|
+
type: NgModule,
|
|
1642
|
+
args: [{
|
|
1643
|
+
declarations: COMPONENTS,
|
|
1644
|
+
imports: [CommonModule],
|
|
1645
|
+
exports: COMPONENTS,
|
|
1646
|
+
}]
|
|
1647
|
+
}] });
|
|
1648
|
+
|
|
1649
|
+
/**
|
|
1650
|
+
* Single source of truth for the IOX component type → Angular class mapping.
|
|
1651
|
+
* Used by the client engine (iox-client-engine) to resolve component classes
|
|
1652
|
+
* from IoxLayoutNode.type strings at render time.
|
|
1653
|
+
*
|
|
1654
|
+
* All 13 builder components are registered here:
|
|
1655
|
+
* - Leaf (Phase 2a): Image, Spacer, Card, Divider, Icon
|
|
1656
|
+
* - Inline-editable (Phase 2b): Link, Button, Heading, Text
|
|
1657
|
+
* - Layout shells (Phase 2c): Section, Container, LinkedContainer
|
|
1658
|
+
* - Repeater (Phase 2d): ClientRepeaterComponent
|
|
1659
|
+
*
|
|
1660
|
+
* Section/Container/LinkedContainer/Repeater expose childrenHost: ViewContainerRef
|
|
1661
|
+
* for ClientRenderDirective to insert child components into.
|
|
1662
|
+
*/
|
|
1663
|
+
class IoxComponentRegistryService {
|
|
1664
|
+
constructor() {
|
|
1665
|
+
this.map = new Map([
|
|
1666
|
+
['Image', BuilderImageComponent],
|
|
1667
|
+
['Spacer', BuilderSpacerComponent],
|
|
1668
|
+
['Card', CardComponent],
|
|
1669
|
+
['Divider', BuilderDividerComponent],
|
|
1670
|
+
['Icon', BuilderIconComponent],
|
|
1671
|
+
['Link', BuilderLinkComponent],
|
|
1672
|
+
['Button', BuilderButtonComponent],
|
|
1673
|
+
['Heading', BuilderHeadingComponent],
|
|
1674
|
+
['Text', TextBlockComponent],
|
|
1675
|
+
['Section', SectionComponent],
|
|
1676
|
+
['Container', ContainerComponent],
|
|
1677
|
+
['LinkedContainer', LinkedContainerComponent],
|
|
1678
|
+
['Repeater', ClientRepeaterComponent],
|
|
1679
|
+
]);
|
|
1680
|
+
}
|
|
1681
|
+
getComponent(type) {
|
|
1682
|
+
return this.map.get(type);
|
|
1683
|
+
}
|
|
1684
|
+
hasComponent(type) {
|
|
1685
|
+
return this.map.has(type);
|
|
1686
|
+
}
|
|
1687
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: IoxComponentRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1688
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: IoxComponentRegistryService, providedIn: 'root' }); }
|
|
1689
|
+
}
|
|
1690
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: IoxComponentRegistryService, decorators: [{
|
|
1691
|
+
type: Injectable,
|
|
1692
|
+
args: [{ providedIn: 'root' }]
|
|
1693
|
+
}] });
|
|
130
1694
|
|
|
131
1695
|
/*
|
|
132
1696
|
* Public API Surface of iox-ui
|
|
@@ -136,5 +1700,5 @@ const IS_PREVIEW = new InjectionToken('IS_PREVIEW');
|
|
|
136
1700
|
* Generated bundle index. Do not edit.
|
|
137
1701
|
*/
|
|
138
1702
|
|
|
139
|
-
export { IS_PREVIEW, IoxPageComponent, IoxPageModule,
|
|
1703
|
+
export { AOSService, AnalyticsService, BuilderButtonComponent, BuilderDividerComponent, BuilderHeadingComponent, BuilderIconComponent, BuilderImageComponent, BuilderLinkComponent, BuilderSpacerComponent, CMSClientInfraModule, CardComponent, ClientRepeaterComponent, ConsentService, ContainerComponent, ContentService, ENVIRONMENT, IOX_BUILDER_EVENTS, IS_PREVIEW, IoxAnimateContainer, IoxAosDirective, IoxAosModule, IoxBuilderComponentsModule, IoxComponentRegistryService, IoxMasonryComponent, IoxMasonryItemDirective, IoxMasonryModule, IoxMasonryService, IoxPageComponent, IoxPageModule, IoxUiModule, LinkedContainerComponent, PageScrollProvider, PrivacyModalComponent, PrivacyModalService, PrivacyModelEvent, SectionComponent, TextBlockComponent, ViewPositionDirective, ViewPositionModule, WebSettingsService };
|
|
140
1704
|
//# sourceMappingURL=vectoriox-iox-ui.mjs.map
|