@acorex/layout 1.3.90

Sign up to get free protection for your applications and to get access to all the features.
Files changed (41) hide show
  1. package/README.md +2 -0
  2. package/acorex-layout.d.ts +6 -0
  3. package/acorex-layout.metadata.json +1 -0
  4. package/bundles/acorex-layout.umd.js +1479 -0
  5. package/bundles/acorex-layout.umd.js.map +1 -0
  6. package/bundles/acorex-layout.umd.min.js +16 -0
  7. package/bundles/acorex-layout.umd.min.js.map +1 -0
  8. package/esm2015/acorex-layout.js +7 -0
  9. package/esm2015/lib/widget-board/editors/widget-size-editor/widget-size.editor.js +49 -0
  10. package/esm2015/lib/widget-board/editors/widget-size-editor/widget-size.module.js +22 -0
  11. package/esm2015/lib/widget-board/widget-board.component.js +468 -0
  12. package/esm2015/lib/widget-board/widget-board.module.js +69 -0
  13. package/esm2015/lib/widget-board/widget-config.component.js +86 -0
  14. package/esm2015/lib/widget-board/widget-host.component.js +313 -0
  15. package/esm2015/lib/widget-board/widget-save.component.js +79 -0
  16. package/esm2015/lib/widget-board/widget.class.js +123 -0
  17. package/esm2015/public-api.js +7 -0
  18. package/esm5/acorex-layout.js +7 -0
  19. package/esm5/lib/widget-board/editors/widget-size-editor/widget-size.editor.js +52 -0
  20. package/esm5/lib/widget-board/editors/widget-size-editor/widget-size.module.js +23 -0
  21. package/esm5/lib/widget-board/widget-board.component.js +494 -0
  22. package/esm5/lib/widget-board/widget-board.module.js +70 -0
  23. package/esm5/lib/widget-board/widget-config.component.js +90 -0
  24. package/esm5/lib/widget-board/widget-host.component.js +349 -0
  25. package/esm5/lib/widget-board/widget-save.component.js +83 -0
  26. package/esm5/lib/widget-board/widget.class.js +134 -0
  27. package/esm5/public-api.js +7 -0
  28. package/fesm2015/acorex-layout.js +1171 -0
  29. package/fesm2015/acorex-layout.js.map +1 -0
  30. package/fesm5/acorex-layout.js +1256 -0
  31. package/fesm5/acorex-layout.js.map +1 -0
  32. package/lib/widget-board/editors/widget-size-editor/widget-size.editor.d.ts +16 -0
  33. package/lib/widget-board/editors/widget-size-editor/widget-size.module.d.ts +3 -0
  34. package/lib/widget-board/widget-board.component.d.ts +58 -0
  35. package/lib/widget-board/widget-board.module.d.ts +6 -0
  36. package/lib/widget-board/widget-config.component.d.ts +20 -0
  37. package/lib/widget-board/widget-host.component.d.ts +48 -0
  38. package/lib/widget-board/widget-save.component.d.ts +16 -0
  39. package/lib/widget-board/widget.class.d.ts +53 -0
  40. package/package.json +21 -0
  41. package/public-api.d.ts +6 -0
@@ -0,0 +1,1256 @@
1
+ import { __decorate, __metadata, __extends, __awaiter, __generator, __spread } from 'tslib';
2
+ import { EventEmitter, ChangeDetectorRef, ViewChild, Component, ViewEncapsulation, ChangeDetectionStrategy, ElementRef, ComponentFactoryResolver, Input, Output, ViewContainerRef, HostBinding, NgZone, ViewChildren, QueryList, NgModule } from '@angular/core';
3
+ import { propertyEditor, AXValidationFormComponent, AXBasePopupPageComponent, AXPropertyDecorators, AXPopupService, AXLoadingService, AXProperyEditorComponent, AXNumberBoxModule, AXSearchBoxModule, AXLoadingModule, AXProppertyEditorModule, AXPageModule, AXToolbarModule, AXLabelModule, AXTextAreaModule, AXFieldsetModule, AXTextBoxModule, AXFormGroupModule, AXTabStripModule, AXCheckBoxModule, AXMenuModule, AXValidationModule } from '@acorex/components';
4
+ import { AXTranslator, AXHtmlUtil, AXObjectUtil, AXRenderService, AXClientRec, AXTranslatorModule } from '@acorex/core';
5
+ import { Observable } from 'rxjs';
6
+ import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
7
+ import { CommonModule } from '@angular/common';
8
+ import { RouterModule } from '@angular/router';
9
+ import { FormsModule } from '@angular/forms';
10
+
11
+ var ɵ0 = function () {
12
+ return [1, 2, 3, 5, 10, 20, 30, 60].map(function (c) { return ({
13
+ id: 60000 * c,
14
+ text: AXTranslator.get('dateTime.duration.format_minute').replace('{0}', c.toString())
15
+ }); });
16
+ };
17
+ // @dynamic
18
+ var AXWidgetComponent = /** @class */ (function () {
19
+ function AXWidgetComponent() {
20
+ var _this = this;
21
+ this.uid = AXHtmlUtil.getUID();
22
+ this.onBusyChanged = new EventEmitter();
23
+ this._isBusy = true;
24
+ this.refreshRate = [{
25
+ id: 60000 * 5,
26
+ text: AXTranslator.get('dateTime.duration.format_minute').replace('{0}', '5')
27
+ }];
28
+ this.onConfiguredChanged = new EventEmitter();
29
+ this.onConfiguredChanged.subscribe(function () {
30
+ if (_this.isConfigured === true && _this.getRefreshRate()) {
31
+ _this.restartRefreshTimer();
32
+ }
33
+ else {
34
+ _this.stopRefreshTimer();
35
+ }
36
+ });
37
+ }
38
+ Object.defineProperty(AXWidgetComponent.prototype, "isBusy", {
39
+ get: function () {
40
+ return this._isBusy;
41
+ },
42
+ set: function (v) {
43
+ if (v !== this._isBusy) {
44
+ var eventData = {
45
+ component: this,
46
+ oldValue: this._isBusy,
47
+ value: v
48
+ };
49
+ this._isBusy = v;
50
+ this.onBusyChanged.emit(eventData);
51
+ }
52
+ },
53
+ enumerable: true,
54
+ configurable: true
55
+ });
56
+ // ???
57
+ AXWidgetComponent.prototype.getRefreshRate = function () {
58
+ return Array.isArray(this.refreshRate) && this.refreshRate.length ? this.refreshRate[0].id : this.refreshRate;
59
+ };
60
+ AXWidgetComponent.prototype.startRefreshTimer = function () {
61
+ this.intervalId = window.setInterval(this.refresh.bind(this), this.getRefreshRate());
62
+ };
63
+ AXWidgetComponent.prototype.stopRefreshTimer = function () {
64
+ window.clearInterval(this.intervalId);
65
+ };
66
+ AXWidgetComponent.prototype.restartRefreshTimer = function () {
67
+ this.stopRefreshTimer();
68
+ this.startRefreshTimer();
69
+ };
70
+ AXWidgetComponent.prototype.ngOnDestroy = function () {
71
+ this.stopRefreshTimer();
72
+ };
73
+ AXWidgetComponent.prototype.redraw = function () {
74
+ };
75
+ AXWidgetComponent.prototype.refresh = function () {
76
+ this.restartRefreshTimer();
77
+ };
78
+ Object.defineProperty(AXWidgetComponent.prototype, "isConfigured", {
79
+ get: function () {
80
+ return true;
81
+ },
82
+ enumerable: true,
83
+ configurable: true
84
+ });
85
+ AXWidgetComponent.prototype.setValue = function (name, value) {
86
+ this[name] = value;
87
+ this.onConfiguredChanged.emit();
88
+ };
89
+ AXWidgetComponent.prototype.getValue = function (name) {
90
+ var _a;
91
+ var val = this[name];
92
+ var config = this['__meta__'].config;
93
+ var runtime = (_a = config.props[name]) === null || _a === void 0 ? void 0 : _a.runtime;
94
+ if (runtime && this.provideValue) {
95
+ var res = this.provideValue({
96
+ name: name,
97
+ value: val,
98
+ uniqueName: config.uniqueName,
99
+ options: config.options,
100
+ });
101
+ if (this.provideValue instanceof Promise) {
102
+ return res;
103
+ }
104
+ else {
105
+ return Promise.resolve(res);
106
+ }
107
+ }
108
+ return Promise.resolve(val);
109
+ };
110
+ __decorate([
111
+ propertyEditor({
112
+ editorClass: 'ax/editors/widget-size',
113
+ title: 'common.size',
114
+ visible: false,
115
+ order: -99,
116
+ }),
117
+ __metadata("design:type", Array)
118
+ ], AXWidgetComponent.prototype, "widgetSize", void 0);
119
+ __decorate([
120
+ propertyEditor({
121
+ editorClass: 'ax/editors/select',
122
+ title: 'common.refresh-rate',
123
+ visible: true,
124
+ order: -98,
125
+ editorOptions: {
126
+ items: ɵ0,
127
+ allowNull: false,
128
+ allowSearch: false,
129
+ selectionDataMode: 'value',
130
+ selectionMode: 'single',
131
+ valueField: 'id',
132
+ }
133
+ }),
134
+ __metadata("design:type", Object)
135
+ ], AXWidgetComponent.prototype, "refreshRate", void 0);
136
+ return AXWidgetComponent;
137
+ }());
138
+
139
+ var AXWidgetConfigComponent = /** @class */ (function (_super) {
140
+ __extends(AXWidgetConfigComponent, _super);
141
+ function AXWidgetConfigComponent(cdr) {
142
+ var _this = _super.call(this) || this;
143
+ _this.cdr = cdr;
144
+ _this.props = [];
145
+ _this.displayProps = [];
146
+ _this.changes = [];
147
+ _this.context = {};
148
+ return _this;
149
+ }
150
+ AXWidgetConfigComponent.prototype.getFooterButtons = function () {
151
+ return [
152
+ {
153
+ name: 'okay',
154
+ submitBehavior: true,
155
+ text: AXTranslator.get('common.confirm'),
156
+ style: 'success'
157
+ },
158
+ {
159
+ name: 'cancel',
160
+ cancelBehavior: true,
161
+ text: AXTranslator.get('common.cancel'),
162
+ style: 'danger blank'
163
+ }
164
+ ];
165
+ };
166
+ AXWidgetConfigComponent.prototype.onFooterButtonClick = function (e) {
167
+ var _this = this;
168
+ if (e.name === 'cancel') {
169
+ this.close();
170
+ }
171
+ if (e.name === 'okay') {
172
+ this.form.validate().then(function (c) {
173
+ if (c.result) {
174
+ _this.close(_this.changes);
175
+ }
176
+ });
177
+ }
178
+ };
179
+ AXWidgetConfigComponent.prototype.handleValueChange = function (e) {
180
+ var prop = this.changes.find(function (c) { return c.property.name === e.property.name; });
181
+ if (prop) {
182
+ prop.value = e.value;
183
+ }
184
+ else {
185
+ this.changes.push({ property: e.property, value: e.value });
186
+ }
187
+ this.updateContext();
188
+ };
189
+ AXWidgetConfigComponent.prototype.ngOnInit = function () {
190
+ this.displayProps = this.props.filter(function (c) { return c.property.visible !== false; }).sort(function (a, b) { return a.property.order - b.property.order; });
191
+ this.updateContext();
192
+ };
193
+ AXWidgetConfigComponent.prototype.updateContext = function () {
194
+ var ctx = {};
195
+ this.props.forEach(function (p) {
196
+ ctx[p.property.name] = p.value;
197
+ });
198
+ this.changes.forEach(function (p) {
199
+ ctx[p.property.name] = p.value;
200
+ });
201
+ this.context = ctx;
202
+ };
203
+ AXWidgetConfigComponent.prototype.identify = function (index, item) {
204
+ return item.property.name;
205
+ };
206
+ AXWidgetConfigComponent.ctorParameters = function () { return [
207
+ { type: ChangeDetectorRef }
208
+ ]; };
209
+ __decorate([
210
+ ViewChild(AXValidationFormComponent),
211
+ __metadata("design:type", AXValidationFormComponent)
212
+ ], AXWidgetConfigComponent.prototype, "form", void 0);
213
+ AXWidgetConfigComponent = __decorate([
214
+ Component({
215
+ template: "<ax-page>\r\n <ax-page-content>\r\n <div class=\"container\">\r\n <ax-validation-form #form>\r\n <div class=\"row\" *ngFor=\"let p of displayProps; trackBy: identify\">\r\n <div class=\"col-12\">\r\n <ax-label>{{p.property.title | trans}}</ax-label>\r\n <ng-container ax-property-editor-renderer [property]=\"p\" [context]=\"context\" [host]=\"widget\" [validationForm]=\"form\"\r\n (onValueChange)=\"handleValueChange($event)\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ax-validation-form>\r\n </div>\r\n </ax-page-content>\r\n</ax-page>",
216
+ encapsulation: ViewEncapsulation.None,
217
+ changeDetection: ChangeDetectionStrategy.OnPush
218
+ }),
219
+ __metadata("design:paramtypes", [ChangeDetectorRef])
220
+ ], AXWidgetConfigComponent);
221
+ return AXWidgetConfigComponent;
222
+ }(AXBasePopupPageComponent));
223
+
224
+ var AXWidgetSaveComponent = /** @class */ (function (_super) {
225
+ __extends(AXWidgetSaveComponent, _super);
226
+ function AXWidgetSaveComponent() {
227
+ var _this = _super !== null && _super.apply(this, arguments) || this;
228
+ _this.props = [];
229
+ return _this;
230
+ }
231
+ AXWidgetSaveComponent.prototype.getFooterButtons = function () {
232
+ return [
233
+ {
234
+ name: 'okay',
235
+ submitBehavior: true,
236
+ text: AXTranslator.get('common.confirm'),
237
+ style: 'ax success'
238
+ },
239
+ {
240
+ name: 'cancel',
241
+ cancelBehavior: true,
242
+ text: AXTranslator.get('common.cancel'),
243
+ style: 'ax light'
244
+ }
245
+ ];
246
+ };
247
+ AXWidgetSaveComponent.prototype.ngOnInit = function () {
248
+ var _a, _b;
249
+ var titleProp = this.props.find(function (c) { return c.property.name === 'title' || c.property.name === 'name'; });
250
+ var title = ((_a = titleProp) === null || _a === void 0 ? void 0 : _a.value) || this.config.title;
251
+ var pp = {};
252
+ (_b = this.props) === null || _b === void 0 ? void 0 : _b.forEach(function (c) {
253
+ pp[c.property.name] = c.property;
254
+ });
255
+ this.data = {
256
+ component: this.config.component,
257
+ title: title,
258
+ uniqueName: this.config.uniqueName + "-" + AXHtmlUtil.getUID(),
259
+ options: AXObjectUtil.deepJSONClone(this.config.options),
260
+ props: AXObjectUtil.deepJSONClone(pp)
261
+ };
262
+ this.displayProps = this.props
263
+ .filter(function (c) { return c.property.visible !== false; })
264
+ .sort(function (a, b) { return a.property.order - b.property.order; })
265
+ .map(function (c) { return ({
266
+ name: c.property.name,
267
+ title: c.property.title,
268
+ allow: true
269
+ }); });
270
+ };
271
+ AXWidgetSaveComponent.prototype.onFooterButtonClick = function (e) {
272
+ var _this = this;
273
+ if (e.name === 'cancel') {
274
+ this.close();
275
+ }
276
+ if (e.name === 'okay') {
277
+ this.props.forEach(function (p) {
278
+ var pp = _this.displayProps.find(function (c) { return c.name === p.property.name; });
279
+ if (pp == null || !pp.allow) {
280
+ var ppp = _this.data.props[p.property.name];
281
+ if (ppp) {
282
+ ppp.visible = false;
283
+ }
284
+ else {
285
+ ppp = { visible: false };
286
+ }
287
+ }
288
+ });
289
+ this.close(this.data);
290
+ }
291
+ };
292
+ AXWidgetSaveComponent = __decorate([
293
+ Component({
294
+ template: "<ax-page>\r\n <ax-page-content>\r\n <div class=\"container\">\r\n <div class=\"row\">\r\n <div class=\"col-12\">\r\n <ax-form-group>\r\n <ax-label>{{'common.title' | trans}}</ax-label>\r\n <ax-text-box [(value)]=\"data.title\"></ax-text-box>\r\n </ax-form-group>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-12\">\r\n <ax-form-group>\r\n <ax-label>{{'common.description' | trans}}</ax-label>\r\n <ax-text-area [(value)]=\"data.description\"></ax-text-area>\r\n </ax-form-group>\r\n </div>\r\n </div>\r\n <!-- <div class=\"row\">\r\n <div class=\"col-12\">\r\n <ax-form-group>\r\n <ax-label>{{'common.uniquename' | trans}}</ax-label>\r\n <ax-text-box></ax-text-box>\r\n </ax-form-group>\r\n </div>\r\n </div> -->\r\n <div class=\"row\" style=\"margin-block-end: var(--ax-size-md);margin-block-start: var(--ax-size-md);\">\r\n <div class=\"col-12\">\r\n <ax-fieldset caption=\"{{'widget-board.configurable-props' | trans}}\">\r\n <div class=\"row\" *ngFor=\"let prop of displayProps\">\r\n <div class=\"col-12\" style=\"margin-block-end: var(--ax-size-sm)\">\r\n <ax-check-box [(value)]=\"prop.allow\" label=\"{{ prop.title | trans }}\">\r\n\r\n </ax-check-box>\r\n </div>\r\n </div>\r\n </ax-fieldset>\r\n </div>\r\n </div>\r\n </div>\r\n </ax-page-content>\r\n</ax-page>",
295
+ encapsulation: ViewEncapsulation.None,
296
+ changeDetection: ChangeDetectionStrategy.OnPush
297
+ })
298
+ ], AXWidgetSaveComponent);
299
+ return AXWidgetSaveComponent;
300
+ }(AXBasePopupPageComponent));
301
+
302
+ var AXWidgetHostComponent = /** @class */ (function () {
303
+ function AXWidgetHostComponent(ref, componentFactoryResolver, rendererService, cdr, popup, loadingService) {
304
+ this.ref = ref;
305
+ this.componentFactoryResolver = componentFactoryResolver;
306
+ this.rendererService = rendererService;
307
+ this.cdr = cdr;
308
+ this.popup = popup;
309
+ this.loadingService = loadingService;
310
+ this._hasProps = false;
311
+ this._hasMenu = false;
312
+ this.configMenuItem = [
313
+ {
314
+ icon: 'far fa-ellipsis-h',
315
+ items: []
316
+ }
317
+ ];
318
+ this.onRemove = new EventEmitter();
319
+ this.onConfigChanged = new EventEmitter();
320
+ this.onResized = new EventEmitter();
321
+ this.onSave = new EventEmitter();
322
+ this._isLoading = false;
323
+ this.sizeX = 1;
324
+ this.sizeY = 1;
325
+ this.col = 1;
326
+ this.row = 1;
327
+ }
328
+ Object.defineProperty(AXWidgetHostComponent.prototype, "widget", {
329
+ get: function () {
330
+ return this._widget;
331
+ },
332
+ enumerable: true,
333
+ configurable: true
334
+ });
335
+ Object.defineProperty(AXWidgetHostComponent.prototype, "element", {
336
+ get: function () {
337
+ return this.ref.nativeElement;
338
+ },
339
+ enumerable: true,
340
+ configurable: true
341
+ });
342
+ Object.defineProperty(AXWidgetHostComponent.prototype, "isLoading", {
343
+ get: function () {
344
+ return this._isLoading;
345
+ },
346
+ set: function (v) {
347
+ this._isLoading = v;
348
+ if (this._loadingId && !v) {
349
+ this.loadingService.hide(this._loadingId);
350
+ this._loadingId = null;
351
+ }
352
+ if (v) {
353
+ this._loadingId = this.loadingService.show(this.ref.nativeElement);
354
+ }
355
+ },
356
+ enumerable: true,
357
+ configurable: true
358
+ });
359
+ Object.defineProperty(AXWidgetHostComponent.prototype, "isConfigured", {
360
+ get: function () {
361
+ var _a;
362
+ return ((_a = this._widget) === null || _a === void 0 ? void 0 : _a.isConfigured) || false;
363
+ },
364
+ enumerable: true,
365
+ configurable: true
366
+ });
367
+ AXWidgetHostComponent.prototype.ngOnInit = function () {
368
+ this.isLoading = true;
369
+ };
370
+ AXWidgetHostComponent.prototype.ngAfterViewInit = function () {
371
+ var _a;
372
+ return __awaiter(this, void 0, void 0, function () {
373
+ var component, route, widgetFactory;
374
+ var _this = this;
375
+ return __generator(this, function (_b) {
376
+ switch (_b.label) {
377
+ case 0:
378
+ if (!(typeof this.config.component === 'string')) return [3 /*break*/, 2];
379
+ return [4 /*yield*/, this.rendererService.findLoadedComponentByRoute(this.config.component, 20)];
380
+ case 1:
381
+ route = _b.sent();
382
+ component = (_a = route) === null || _a === void 0 ? void 0 : _a.component;
383
+ return [3 /*break*/, 3];
384
+ case 2:
385
+ if (typeof this.config.component === 'function') {
386
+ component = this.config.component;
387
+ }
388
+ _b.label = 3;
389
+ case 3:
390
+ if (component == null) {
391
+ console.error("Invalid Widget Component!", this.config);
392
+ this.onRemove.emit(this);
393
+ return [2 /*return*/];
394
+ }
395
+ widgetFactory = this.componentFactoryResolver.resolveComponentFactory(component);
396
+ this.componentRef = this.vc.createComponent(widgetFactory);
397
+ this._widget = this.componentRef.instance;
398
+ this._widget.provideValue = this.provideValue;
399
+ if (this._widget.onBusyChanged) {
400
+ this._widget.onBusyChanged.subscribe(function (d) {
401
+ if (!_this._widget.widgetSize) {
402
+ _this._widget.setValue('widgetSize', [_this.sizeX, _this.sizeY]);
403
+ }
404
+ else {
405
+ _this.setSizeFromOptions();
406
+ }
407
+ _this.isLoading = d.value;
408
+ _this.cdr.detectChanges();
409
+ });
410
+ }
411
+ if (this._widget.onConfiguredChanged) {
412
+ this._widget.onConfiguredChanged.subscribe(function () {
413
+ _this.setSizeFromOptions();
414
+ });
415
+ }
416
+ //
417
+ if (this.config.options) {
418
+ Object.assign(this._widget, this.config.options);
419
+ }
420
+ this._hasProps = AXPropertyDecorators.getProperties(this._widget).length > 0;
421
+ this.isLoading = false;
422
+ this.config['__meta__'].instance = this;
423
+ this._widget['__meta__'] = {};
424
+ this._widget['__meta__'].config = this.config;
425
+ //
426
+ if (this._hasProps) {
427
+ this.configMenuItem[0].items.push({
428
+ name: 'configs',
429
+ icon: 'far fa-cogs',
430
+ text: AXTranslator.get('common.configs'),
431
+ onClick: function () {
432
+ _this.openConfigDialog();
433
+ }
434
+ });
435
+ }
436
+ this.configMenuItem[0].items.push({
437
+ name: 'save',
438
+ icon: 'far fa-save',
439
+ text: AXTranslator.get('common.save-as'),
440
+ onClick: function () {
441
+ _this.openSaveDialog();
442
+ }
443
+ });
444
+ if (true) {
445
+ this.configMenuItem[0].items.push({
446
+ name: 'remove',
447
+ icon: 'far fa-times',
448
+ style: 'ax danger blank',
449
+ text: AXTranslator.get('common.remove'),
450
+ onClick: function () {
451
+ _this.onRemove.emit(_this);
452
+ }
453
+ });
454
+ }
455
+ this._hasMenu = this.configMenuItem[0].items.length > 0;
456
+ this.cdr.detectChanges();
457
+ return [2 /*return*/];
458
+ }
459
+ });
460
+ });
461
+ };
462
+ AXWidgetHostComponent.prototype.setSizeFromOptions = function () {
463
+ var _this = this;
464
+ this._widget.getValue('widgetSize').then(function (c) {
465
+ var oldSizeX = _this.sizeX;
466
+ var oldSizeY = _this.sizeY;
467
+ if (c && Array.isArray(c) && (oldSizeX !== c[0] || oldSizeY !== c[1])) {
468
+ _this.config.sizeX = _this.sizeX = c[0];
469
+ _this.config.sizeY = _this.sizeY = c[1];
470
+ _this.onResized.emit({
471
+ component: _this._widget,
472
+ config: _this.config
473
+ });
474
+ }
475
+ _this.cdr.detectChanges();
476
+ });
477
+ };
478
+ AXWidgetHostComponent.prototype.remove = function (e) {
479
+ e.preventDefault();
480
+ e.stopPropagation();
481
+ this.onRemove.emit(this);
482
+ return false;
483
+ };
484
+ AXWidgetHostComponent.prototype.handleConfig = function (e) {
485
+ e.preventDefault();
486
+ e.stopPropagation();
487
+ this.openConfigDialog();
488
+ return false;
489
+ };
490
+ AXWidgetHostComponent.prototype.openConfigDialog = function () {
491
+ var _this = this;
492
+ var ppp = this.getMergedProps();
493
+ this.popup.open(AXWidgetConfigComponent, {
494
+ title: AXTranslator.get('common.configs'),
495
+ size: 'sm',
496
+ data: {
497
+ props: ppp.map(function (c) { return ({ property: c.options, value: _this._widget[c.options.name] }); }),
498
+ widget: this.widget
499
+ }
500
+ }).then(function (c) {
501
+ if (c.data) {
502
+ if (!_this.config.options) {
503
+ _this.config.options = {};
504
+ }
505
+ c.data.forEach(function (p) {
506
+ _this._widget.setValue(p.property.name, p.value);
507
+ _this.config.options[p.property.name] = p.value;
508
+ });
509
+ _this.emitConfigChanged();
510
+ _this._widget.redraw();
511
+ _this.cdr.detectChanges();
512
+ }
513
+ });
514
+ };
515
+ AXWidgetHostComponent.prototype.openSaveDialog = function () {
516
+ var _this = this;
517
+ var ppp = this.getMergedProps();
518
+ this.popup.open(AXWidgetSaveComponent, {
519
+ title: AXTranslator.get('common.save-as'),
520
+ size: 'sm',
521
+ data: {
522
+ config: this.config,
523
+ props: ppp.map(function (c) { return ({ property: c.options, value: _this._widget[c.options.name] }); })
524
+ }
525
+ }).then(function (c) {
526
+ if (c.data) {
527
+ _this.onSave.emit({
528
+ component: _this._widget,
529
+ data: c.data
530
+ });
531
+ }
532
+ });
533
+ };
534
+ AXWidgetHostComponent.prototype.handleOptionClick = function (e) {
535
+ e.preventDefault();
536
+ e.stopPropagation();
537
+ this.openConfigDialog();
538
+ return false;
539
+ };
540
+ AXWidgetHostComponent.prototype.ngOnDestroy = function () {
541
+ this.vc.clear();
542
+ if (this.componentRef) {
543
+ this.componentRef.destroy();
544
+ }
545
+ };
546
+ AXWidgetHostComponent.prototype.getMergedProps = function () {
547
+ var ppp = AXObjectUtil.deepCopy(AXPropertyDecorators.getProperties(this._widget));
548
+ var _loop_1 = function (key) {
549
+ if (Object.prototype.hasOwnProperty.call(this_1.config.props, key)) {
550
+ var newP = this_1.config.props[key];
551
+ var existPropDec = ppp.find(function (p) { return p.property === key; });
552
+ if (existPropDec) {
553
+ Object.assign(existPropDec.options, newP);
554
+ }
555
+ }
556
+ };
557
+ var this_1 = this;
558
+ for (var key in this.config.props) {
559
+ _loop_1(key);
560
+ }
561
+ return ppp;
562
+ };
563
+ AXWidgetHostComponent.prototype.emitConfigChanged = function () {
564
+ this.onConfigChanged.emit({
565
+ component: this._widget,
566
+ config: this.config
567
+ });
568
+ };
569
+ AXWidgetHostComponent.ctorParameters = function () { return [
570
+ { type: ElementRef },
571
+ { type: ComponentFactoryResolver },
572
+ { type: AXRenderService },
573
+ { type: ChangeDetectorRef },
574
+ { type: AXPopupService },
575
+ { type: AXLoadingService }
576
+ ]; };
577
+ __decorate([
578
+ Input(),
579
+ __metadata("design:type", Function)
580
+ ], AXWidgetHostComponent.prototype, "provideValue", void 0);
581
+ __decorate([
582
+ Output(),
583
+ __metadata("design:type", EventEmitter)
584
+ ], AXWidgetHostComponent.prototype, "onRemove", void 0);
585
+ __decorate([
586
+ Output(),
587
+ __metadata("design:type", EventEmitter)
588
+ ], AXWidgetHostComponent.prototype, "onConfigChanged", void 0);
589
+ __decorate([
590
+ Output(),
591
+ __metadata("design:type", EventEmitter)
592
+ ], AXWidgetHostComponent.prototype, "onResized", void 0);
593
+ __decorate([
594
+ Output(),
595
+ __metadata("design:type", EventEmitter)
596
+ ], AXWidgetHostComponent.prototype, "onSave", void 0);
597
+ __decorate([
598
+ Input(),
599
+ __metadata("design:type", Object)
600
+ ], AXWidgetHostComponent.prototype, "config", void 0);
601
+ __decorate([
602
+ ViewChild('vc', { read: ViewContainerRef }),
603
+ __metadata("design:type", ViewContainerRef)
604
+ ], AXWidgetHostComponent.prototype, "vc", void 0);
605
+ __decorate([
606
+ HostBinding('attr.data-size-x'),
607
+ Input(),
608
+ __metadata("design:type", Number)
609
+ ], AXWidgetHostComponent.prototype, "sizeX", void 0);
610
+ __decorate([
611
+ HostBinding('attr.data-size-y'),
612
+ Input(),
613
+ __metadata("design:type", Number)
614
+ ], AXWidgetHostComponent.prototype, "sizeY", void 0);
615
+ __decorate([
616
+ HostBinding('attr.data-col'),
617
+ Input(),
618
+ __metadata("design:type", Number)
619
+ ], AXWidgetHostComponent.prototype, "col", void 0);
620
+ __decorate([
621
+ HostBinding('attr.data-row'),
622
+ Input(),
623
+ __metadata("design:type", Number)
624
+ ], AXWidgetHostComponent.prototype, "row", void 0);
625
+ AXWidgetHostComponent = __decorate([
626
+ Component({
627
+ selector: 'ax-widget-host',
628
+ template: "<div class='widget-container'>\r\n <div class=\"widget-config-overlay\" *ngIf=\"!isConfigured\" (click)=\"handleConfig($event)\">\r\n <div class=\"widget-title\">{{config.title}}</div>\r\n <div class=\"widget-config-box\">\r\n <div class=\"config-title\">{{ 'widget-board.configure' | trans}}</div>\r\n <div class=\"config-icon\"><i class=\"fas fa-cogs fa-5x\"></i></div>\r\n </div>\r\n </div>\r\n <div class='widget-edit-overlay'>\r\n <div class='widget-edit-menu'>\r\n <button class=\"widget-edit-menu-button\" (click)=\"handleConfig($event)\"\r\n (mousedown)=\"$event.stopPropagation()\" *ngIf=\"_hasProps\" (mouseup)=\"$event.stopPropagation()\">\r\n <i class=\"far fa-cogs\"></i>\r\n </button>\r\n <button class=\"widget-edit-menu-button\" (click)=\"remove($event)\" (mousedown)=\"$event.stopPropagation()\"\r\n (mouseup)=\"$event.stopPropagation()\">\r\n <i class=\"far fa-times\"></i>\r\n </button>\r\n </div>\r\n\r\n </div>\r\n <div class=\"widget-options-menu\" *ngIf=\"_hasMenu\">\r\n <ax-menu [items]='configMenuItem' direction=\"horizontal\"></ax-menu>\r\n </div>\r\n <!-- <ax-loading-panel [visible]=\"isBusy\">\r\n </ax-loading-panel> -->\r\n <div class=\"widget-content\">\r\n <ng-container #vc></ng-container>\r\n </div>\r\n</div>",
629
+ host: { class: 'ax widget-host', tabindex: '0' },
630
+ encapsulation: ViewEncapsulation.None,
631
+ changeDetection: ChangeDetectionStrategy.OnPush
632
+ }),
633
+ __metadata("design:paramtypes", [ElementRef,
634
+ ComponentFactoryResolver,
635
+ AXRenderService,
636
+ ChangeDetectorRef,
637
+ AXPopupService,
638
+ AXLoadingService])
639
+ ], AXWidgetHostComponent);
640
+ return AXWidgetHostComponent;
641
+ }());
642
+
643
+ var AXWidgetBoardComponent = /** @class */ (function () {
644
+ function AXWidgetBoardComponent(ref, zone, cdr) {
645
+ this.ref = ref;
646
+ this.zone = zone;
647
+ this.cdr = cdr;
648
+ this.widgets = [];
649
+ this.galleryItems = [];
650
+ this.tileSize = 80;
651
+ this.gapSize = 5;
652
+ this.newWidget = null;
653
+ this._isInEditing = false;
654
+ this.isDragging = false;
655
+ this.DATA_COL = 'data-col';
656
+ this.DATA_ROW = 'data-row';
657
+ this.DATA_SIZE_X = 'data-size-x';
658
+ this.DATA_SIZE_Y = 'data-size-y';
659
+ this.DATA_OLD_COL = 'data-old-col';
660
+ this.DATA_OLD_ROW = 'data-old-row';
661
+ this.onConfigChanged = new EventEmitter();
662
+ this.onWidgetSave = new EventEmitter();
663
+ }
664
+ AXWidgetBoardComponent.prototype.isInEditing = function () {
665
+ return this._isInEditing;
666
+ };
667
+ AXWidgetBoardComponent.prototype.ngOnInit = function () {
668
+ if (this.rtl == null) {
669
+ this.rtl = window.getComputedStyle(this.ref.nativeElement, null).getPropertyValue('direction') === 'rtl';
670
+ }
671
+ };
672
+ AXWidgetBoardComponent.prototype.ngAfterViewInit = function () {
673
+ var _this = this;
674
+ this.zone.runOutsideAngular(function (c) {
675
+ var style = document.createElement('style');
676
+ style.type = 'text/css';
677
+ _this.ref.nativeElement.appendChild(style);
678
+ // add css data classes
679
+ for (var i = 1; i <= 50; i++) {
680
+ style.innerHTML += "[" + _this.DATA_COL + "=\"" + i + "\"] { " + (_this.rtl ? 'right' : 'left') + ": " + (i - 1) * (_this.tileSize + _this.gapSize) + "px; }";
681
+ style.innerHTML += "[" + _this.DATA_ROW + "=\"" + i + "\"] { top: " + (i - 1) * (_this.tileSize + _this.gapSize) + "px; }";
682
+ style.innerHTML += "[" + _this.DATA_SIZE_X + "=\"" + i + "\"] { width: " + ((i * _this.tileSize) + ((i - 1) * _this.gapSize)) + "px; }";
683
+ style.innerHTML += "[" + _this.DATA_SIZE_Y + "=\"" + i + "\"] { height: " + ((i * _this.tileSize) + ((i - 1) * _this.gapSize)) + "px; }";
684
+ }
685
+ });
686
+ };
687
+ AXWidgetBoardComponent.prototype.calcGridSize = function () {
688
+ var _this = this;
689
+ this.zone.runOutsideAngular(function () {
690
+ var width = (Math.max.apply(Math, __spread(_this.widgets.map(function (c) { return c.col + c.sizeX - 1; })))) * (_this.tileSize + _this.gapSize);
691
+ var height = (Math.max.apply(Math, __spread(_this.widgets.map(function (c) { return c.row + c.sizeY - 1; })))) * (_this.tileSize + _this.gapSize);
692
+ _this.container.nativeElement.style.width = width + 'px';
693
+ _this.container.nativeElement.style.height = height + 'px';
694
+ });
695
+ };
696
+ AXWidgetBoardComponent.prototype.toggleEdit = function () {
697
+ this._isInEditing ? this.finishEdit() : this.startEdit();
698
+ };
699
+ AXWidgetBoardComponent.prototype.dragStart = function (e) {
700
+ var _this = this;
701
+ e.preventDefault();
702
+ e.stopPropagation();
703
+ this.zone.runOutsideAngular(function () {
704
+ if (_this._isInEditing && e.which === 1) {
705
+ _this.dragItem = e.currentTarget;
706
+ _this.dragItem.setAttribute('data-x-offset', (_this.dragItem.offsetLeft - e.clientX).toString());
707
+ //
708
+ _this.dragItem.setAttribute('data-y-offset', (_this.dragItem.offsetTop - e.clientY).toString());
709
+ _this.dragItem.classList.add('widget-dragging');
710
+ _this.dragItem.classList.remove('animate__animated', 'animate__pulse');
711
+ }
712
+ });
713
+ return false;
714
+ };
715
+ AXWidgetBoardComponent.prototype.removePositionData = function () {
716
+ var _this = this;
717
+ this.zone.runOutsideAngular(function () {
718
+ if (_this.dragItem && _this._isInEditing && _this.dragItem.getAttribute(_this.DATA_OLD_COL) == null) {
719
+ _this.dragItem.setAttribute(_this.DATA_OLD_COL, _this.dragItem.getAttribute(_this.DATA_COL));
720
+ _this.dragItem.setAttribute(_this.DATA_OLD_ROW, _this.dragItem.getAttribute(_this.DATA_ROW));
721
+ _this.dragItem.removeAttribute(_this.DATA_COL);
722
+ _this.dragItem.removeAttribute(_this.DATA_ROW);
723
+ }
724
+ });
725
+ };
726
+ AXWidgetBoardComponent.prototype.resetPositionData = function () {
727
+ var _this = this;
728
+ this.zone.runOutsideAngular(function () {
729
+ if (_this.dragItem && _this._isInEditing) {
730
+ _this.setPosition(_this.dragItem, _this.dragItem.getAttribute(_this.DATA_OLD_COL), _this.dragItem.getAttribute(_this.DATA_OLD_ROW));
731
+ }
732
+ });
733
+ };
734
+ AXWidgetBoardComponent.prototype.setPosition = function (element, col, row) {
735
+ var _this = this;
736
+ this.zone.runOutsideAngular(function () {
737
+ element.setAttribute(_this.DATA_COL, col);
738
+ element.setAttribute(_this.DATA_ROW, row);
739
+ element.removeAttribute(_this.DATA_OLD_COL);
740
+ element.removeAttribute(_this.DATA_OLD_ROW);
741
+ element.style.removeProperty('top');
742
+ element.style.removeProperty('left');
743
+ var widget = _this.widgets.find(function (c) { return c['__meta__'].instance.element === element; });
744
+ widget.col = Number(col);
745
+ widget.row = Number(row);
746
+ });
747
+ };
748
+ AXWidgetBoardComponent.prototype.drag = function (e) {
749
+ var _this = this;
750
+ e.preventDefault();
751
+ e.stopPropagation();
752
+ this.zone.runOutsideAngular(function () {
753
+ if (_this.dragItem && _this._isInEditing) {
754
+ _this.isDragging = true;
755
+ _this.addPlaceholder();
756
+ var xOffset = Number(_this.dragItem.getAttribute('data-x-offset'));
757
+ var yOffset = Number(_this.dragItem.getAttribute('data-y-offset'));
758
+ _this.dragItem.style.left = e.clientX + xOffset + 'px';
759
+ _this.dragItem.style.top = e.clientY + yOffset + 'px';
760
+ //
761
+ _this.detectBestPlacement();
762
+ _this.removePositionData();
763
+ }
764
+ });
765
+ return false;
766
+ };
767
+ AXWidgetBoardComponent.prototype.dragEnd = function (e) {
768
+ var _this = this;
769
+ this.zone.runOutsideAngular(function () {
770
+ if (_this.dragItem && _this._isInEditing && _this.isDragging) {
771
+ _this.dragItem.classList.remove('widget-dragging');
772
+ _this.dragItem.classList.add('animate__animated', 'animate__pulse');
773
+ //
774
+ var p = _this.container.nativeElement.querySelector('.widget-blank-placeholder');
775
+ if (_this.newWidget) {
776
+ var w_1 = {
777
+ uniqueName: _this.newWidget.uniqueName,
778
+ component: _this.newWidget.component,
779
+ title: _this.newWidget.title,
780
+ options: _this.newWidget.options,
781
+ sizeX: _this.newWidget.sizeX,
782
+ sizeY: _this.newWidget.sizeY,
783
+ col: Number(p.getAttribute(_this.DATA_COL)),
784
+ row: Number(p.getAttribute(_this.DATA_ROW))
785
+ };
786
+ _this.widgets.push(w_1);
787
+ _this.newWidget = null;
788
+ _this.container.nativeElement.removeChild(_this.dragItem);
789
+ _this.zone.run(function () {
790
+ _this.cdr.detectChanges();
791
+ _this.calcGridSize();
792
+ setTimeout(function () {
793
+ w_1['__meta__'].instance.element.addEventListener('mousedown', _this.dragStart.bind(_this), false);
794
+ }, 1000);
795
+ });
796
+ }
797
+ else {
798
+ if (p) {
799
+ _this.setPosition(_this.dragItem, p.getAttribute(_this.DATA_COL), p.getAttribute(_this.DATA_ROW));
800
+ }
801
+ else {
802
+ _this.setPosition(_this.dragItem, _this.dragItem.getAttribute(_this.DATA_OLD_COL), _this.dragItem.getAttribute(_this.DATA_OLD_ROW));
803
+ }
804
+ }
805
+ //
806
+ _this.removePlaceholder();
807
+ _this.dragItem = null;
808
+ _this.calcGridSize();
809
+ _this.emitConfigChanged();
810
+ }
811
+ _this.isDragging = false;
812
+ });
813
+ };
814
+ AXWidgetBoardComponent.prototype.detectFirstEmptySlot = function (w) {
815
+ var xTile = Math.floor(this.ref.nativeElement.parentElement.offsetWidth / this.tileSize);
816
+ for (var j = 1; j <= 100; j++) {
817
+ var _loop_1 = function (i) {
818
+ var rec = new AXClientRec({
819
+ left: i,
820
+ top: j,
821
+ width: w.sizeX,
822
+ height: w.sizeY
823
+ });
824
+ var el = this_1.widgets.filter(function (c) { return c !== w; }).find(function (c) {
825
+ return rec.intersect({
826
+ left: c.col,
827
+ top: c.row,
828
+ width: c.sizeX,
829
+ height: c.sizeY
830
+ });
831
+ });
832
+ if (el == null) {
833
+ w.col = i;
834
+ w.row = j;
835
+ return { value: void 0 };
836
+ }
837
+ };
838
+ var this_1 = this;
839
+ for (var i = 1; i <= xTile - w.sizeX; i++) {
840
+ var state_1 = _loop_1(i);
841
+ if (typeof state_1 === "object")
842
+ return state_1.value;
843
+ }
844
+ }
845
+ };
846
+ AXWidgetBoardComponent.prototype.detectBestPlacement = function () {
847
+ var _this = this;
848
+ this.zone.runOutsideAngular(function () {
849
+ var p = _this.container.nativeElement.querySelector('.widget-blank-placeholder');
850
+ var col = Math.ceil(_this.dragItem.offsetLeft / _this.tileSize);
851
+ if (_this.rtl) {
852
+ col = Math.ceil((_this.container.nativeElement.clientWidth - (_this.dragItem.offsetLeft + _this.dragItem.clientWidth)) / _this.tileSize);
853
+ }
854
+ var row = Math.ceil(_this.dragItem.offsetTop / _this.tileSize);
855
+ if (col < 1) {
856
+ col = 1;
857
+ }
858
+ if (row < 1) {
859
+ row = 1;
860
+ }
861
+ var widgets = Array.from(_this.ref.nativeElement.querySelectorAll('.widget-host')).map(function (c) { return c; });
862
+ p.setAttribute(_this.DATA_COL, col.toString());
863
+ p.setAttribute(_this.DATA_ROW, row.toString());
864
+ var collision = widgets.filter(function (c) { return c !== _this.dragItem; }).some(function (c) { return AXHtmlUtil.collision(c, _this.dragItem); });
865
+ if (collision) {
866
+ _this.removePlaceholder();
867
+ }
868
+ });
869
+ };
870
+ AXWidgetBoardComponent.prototype.addPlaceholder = function () {
871
+ var _this = this;
872
+ this.zone.runOutsideAngular(function () {
873
+ _this.removePlaceholder();
874
+ if (_this.dragItem) {
875
+ var p = document.createElement('div');
876
+ p.classList.add('widget-blank-placeholder');
877
+ p.setAttribute(_this.DATA_COL, _this.dragItem.getAttribute(_this.DATA_COL));
878
+ p.setAttribute(_this.DATA_ROW, _this.dragItem.getAttribute(_this.DATA_ROW));
879
+ p.setAttribute(_this.DATA_SIZE_X, _this.dragItem.getAttribute(_this.DATA_SIZE_X));
880
+ p.setAttribute(_this.DATA_SIZE_Y, _this.dragItem.getAttribute(_this.DATA_SIZE_Y));
881
+ _this.container.nativeElement.appendChild(p);
882
+ }
883
+ });
884
+ };
885
+ AXWidgetBoardComponent.prototype.removePlaceholder = function () {
886
+ var _a;
887
+ var p = this.container.nativeElement.querySelector('.widget-blank-placeholder');
888
+ (_a = p) === null || _a === void 0 ? void 0 : _a.remove();
889
+ };
890
+ AXWidgetBoardComponent.prototype.startEdit = function () {
891
+ var _this = this;
892
+ this._isInEditing = true;
893
+ this.calcGridSize();
894
+ this.ref.nativeElement.classList.add('grid-background');
895
+ var bg = this.ref.nativeElement;
896
+ bg.style.setProperty('background-position', (this.rtl ? 'right' : 'left') + " top");
897
+ // tslint:disable-next-line: max-line-length
898
+ var pattern = "url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"" + (this.tileSize + this.gapSize) + "\" height=\"" + (this.tileSize + this.gapSize) + "\"> <rect style=\"fill: %23dadada\" x=\"" + (this.rtl ? this.gapSize : 0) + "\" width=\"" + this.tileSize + "\" height=\"" + this.tileSize + "\" y=\"0\"></rect></svg>')";
899
+ bg.style.setProperty('background-image', pattern);
900
+ //
901
+ var widgets = Array.from(this.ref.nativeElement.querySelectorAll('.widget-host'));
902
+ widgets.forEach(function (w) {
903
+ w.addEventListener('mousedown', _this.dragStart.bind(_this), false);
904
+ });
905
+ this.ref.nativeElement.addEventListener('mousemove', this.drag.bind(this), false);
906
+ this.ref.nativeElement.addEventListener('mouseup', this.dragEnd.bind(this), false);
907
+ };
908
+ AXWidgetBoardComponent.prototype.finishEdit = function () {
909
+ var _this = this;
910
+ this.ref.nativeElement.classList.remove('grid-background');
911
+ var bg = this.ref.nativeElement;
912
+ bg.style.removeProperty('background-image');
913
+ //
914
+ this._isInEditing = false;
915
+ var widgets = Array.from(this.ref.nativeElement.querySelectorAll('.widget-host'));
916
+ widgets.forEach(function (w) {
917
+ w.removeEventListener('mousedown', _this.dragStart.bind(_this), false);
918
+ });
919
+ this.ref.nativeElement.removeEventListener('mousemove', this.drag.bind(this), false);
920
+ this.ref.nativeElement.removeEventListener('mouseup', this.dragEnd.bind(this), false);
921
+ this.emitConfigChanged();
922
+ };
923
+ AXWidgetBoardComponent.prototype.addWidget = function (widget) {
924
+ var _this = this;
925
+ this.zone.runOutsideAngular(function () {
926
+ _this.newWidget = {
927
+ uniqueName: widget.uniqueName,
928
+ component: widget.component,
929
+ title: widget.title,
930
+ col: 1,
931
+ row: 1,
932
+ sizeX: widget.sizeX,
933
+ sizeY: widget.sizeY,
934
+ options: widget.options,
935
+ props: widget.props
936
+ };
937
+ _this.detectFirstEmptySlot(_this.newWidget);
938
+ var w = {
939
+ uniqueName: _this.newWidget.uniqueName,
940
+ component: _this.newWidget.component,
941
+ title: _this.newWidget.title,
942
+ options: _this.newWidget.options,
943
+ props: _this.newWidget.props,
944
+ sizeX: _this.newWidget.sizeX,
945
+ sizeY: _this.newWidget.sizeY,
946
+ col: _this.newWidget.col,
947
+ row: _this.newWidget.row
948
+ };
949
+ _this.widgets.push(w);
950
+ _this.newWidget = null;
951
+ _this.zone.run(function () {
952
+ _this.cdr.detectChanges();
953
+ _this.calcGridSize();
954
+ _this.emitConfigChanged();
955
+ setTimeout(function () {
956
+ w['__meta__'].instance.element.addEventListener('mousedown', _this.dragStart.bind(_this), false);
957
+ }, 1000);
958
+ });
959
+ });
960
+ };
961
+ AXWidgetBoardComponent.prototype.handleOnRemove = function (w) {
962
+ var _this = this;
963
+ w.element.classList.add('animate__animated', 'animate__zoomOut');
964
+ w.element.addEventListener('animationend', function () {
965
+ _this.widgets = _this.widgets.filter(function (c) { return c.__meta__.id !== w.config.__meta__.id; });
966
+ _this.cdr.detectChanges();
967
+ _this.calcGridSize();
968
+ _this.emitConfigChanged();
969
+ });
970
+ };
971
+ AXWidgetBoardComponent.prototype.handleOnSave = function (e) {
972
+ this.onWidgetSave.emit(e);
973
+ };
974
+ AXWidgetBoardComponent.prototype.trackByFn = function (index, item) {
975
+ var _a, _b;
976
+ if (!((_a = item['__meta__']) === null || _a === void 0 ? void 0 : _a.id)) {
977
+ item['__meta__'] = {};
978
+ item['__meta__'].id = AXHtmlUtil.getUID();
979
+ }
980
+ return (_b = item['__meta__']) === null || _b === void 0 ? void 0 : _b.id;
981
+ };
982
+ AXWidgetBoardComponent.prototype.load = function (widgets) {
983
+ var _this = this;
984
+ this.clear();
985
+ return new Promise(function (resolve, reject) {
986
+ if (widgets) {
987
+ var loadedWidgets_1 = [];
988
+ if (typeof widgets === 'string') {
989
+ try {
990
+ loadedWidgets_1.push.apply(loadedWidgets_1, __spread(JSON.parse(widgets)));
991
+ }
992
+ catch (error) {
993
+ reject('Invalid widget json data!');
994
+ }
995
+ }
996
+ else {
997
+ loadedWidgets_1.push.apply(loadedWidgets_1, __spread(widgets));
998
+ }
999
+ var intervalId_1 = -1;
1000
+ var loadFunc = function () {
1001
+ var _a;
1002
+ if (_this.galleryItems && _this.galleryItems.length > 0) {
1003
+ loadedWidgets_1.forEach(function (w) {
1004
+ var gitem = _this.galleryItems.find(function (c) { return c.uniqueName === w.uniqueName; });
1005
+ if (gitem) {
1006
+ w.component = gitem.component;
1007
+ if (gitem.props) {
1008
+ w.props = JSON.parse(JSON.stringify(gitem.props));
1009
+ }
1010
+ }
1011
+ });
1012
+ (_a = _this.widgets).push.apply(_a, __spread(loadedWidgets_1));
1013
+ window.clearInterval(intervalId_1);
1014
+ _this.cdr.detectChanges();
1015
+ resolve();
1016
+ }
1017
+ };
1018
+ intervalId_1 = window.setInterval(loadFunc, 200);
1019
+ }
1020
+ else {
1021
+ resolve();
1022
+ }
1023
+ });
1024
+ };
1025
+ AXWidgetBoardComponent.prototype.clear = function () {
1026
+ if (this.widgets.length) {
1027
+ this.widgets = [];
1028
+ this.cdr.detectChanges();
1029
+ this.emitConfigChanged();
1030
+ }
1031
+ };
1032
+ AXWidgetBoardComponent.prototype.save = function () {
1033
+ var obj = this.widgets.map(function (c) { return ({
1034
+ uniqueName: c.uniqueName,
1035
+ component: c.component,
1036
+ title: c.title,
1037
+ sizeX: c.sizeX,
1038
+ sizeY: c.sizeY,
1039
+ col: c.col,
1040
+ row: c.row,
1041
+ options: c.options,
1042
+ props: c.props
1043
+ }); });
1044
+ return Promise.resolve(JSON.stringify(obj));
1045
+ };
1046
+ AXWidgetBoardComponent.prototype.refresh = function () {
1047
+ this.widgetHosts.forEach(function (host) {
1048
+ host.widget.refresh();
1049
+ });
1050
+ };
1051
+ AXWidgetBoardComponent.prototype.handleOnConfigChanged = function (e) {
1052
+ this.cdr.detectChanges();
1053
+ this.emitConfigChanged();
1054
+ };
1055
+ AXWidgetBoardComponent.prototype.handleOnResizedChanged = function (e) {
1056
+ this.detectFirstEmptySlot(e.config);
1057
+ this.cdr.detectChanges();
1058
+ this.emitConfigChanged();
1059
+ };
1060
+ AXWidgetBoardComponent.prototype.emitConfigChanged = function () {
1061
+ var _this = this;
1062
+ if (!this.resizeChangeObserver) {
1063
+ this.resizeChangeObserver = new Observable();
1064
+ Observable.create(function (observer) {
1065
+ _this.resizeChangeObserver = observer;
1066
+ })
1067
+ .pipe(debounceTime(750))
1068
+ .pipe(distinctUntilChanged())
1069
+ .subscribe(function (c) {
1070
+ _this.onConfigChanged.emit({
1071
+ component: _this
1072
+ });
1073
+ });
1074
+ }
1075
+ this.resizeChangeObserver.next(new Date());
1076
+ };
1077
+ AXWidgetBoardComponent.ctorParameters = function () { return [
1078
+ { type: ElementRef },
1079
+ { type: NgZone },
1080
+ { type: ChangeDetectorRef }
1081
+ ]; };
1082
+ __decorate([
1083
+ ViewChild('container'),
1084
+ __metadata("design:type", ElementRef)
1085
+ ], AXWidgetBoardComponent.prototype, "container", void 0);
1086
+ __decorate([
1087
+ ViewChildren(AXWidgetHostComponent),
1088
+ __metadata("design:type", QueryList)
1089
+ ], AXWidgetBoardComponent.prototype, "widgetHosts", void 0);
1090
+ __decorate([
1091
+ Input(),
1092
+ __metadata("design:type", Array)
1093
+ ], AXWidgetBoardComponent.prototype, "galleryItems", void 0);
1094
+ __decorate([
1095
+ Input(),
1096
+ __metadata("design:type", Number)
1097
+ ], AXWidgetBoardComponent.prototype, "tileSize", void 0);
1098
+ __decorate([
1099
+ Input(),
1100
+ __metadata("design:type", Number)
1101
+ ], AXWidgetBoardComponent.prototype, "gapSize", void 0);
1102
+ __decorate([
1103
+ Input(),
1104
+ __metadata("design:type", Function)
1105
+ ], AXWidgetBoardComponent.prototype, "provideValue", void 0);
1106
+ __decorate([
1107
+ Output(),
1108
+ __metadata("design:type", EventEmitter)
1109
+ ], AXWidgetBoardComponent.prototype, "onConfigChanged", void 0);
1110
+ __decorate([
1111
+ Output(),
1112
+ __metadata("design:type", EventEmitter)
1113
+ ], AXWidgetBoardComponent.prototype, "onWidgetSave", void 0);
1114
+ AXWidgetBoardComponent = __decorate([
1115
+ Component({
1116
+ selector: 'ax-widget-board',
1117
+ template: "<div class=\"widgets-container\" [class.rtl]=\"rtl\" #container>\r\n <ax-widget-host *ngFor=\"let w of widgets;trackBy: trackByFn\" [config]='w' [sizeX]=\"w.sizeX\"\r\n [sizeY]=\"w.sizeY\" [col]=\"w.col\" [row]=\"w.row\" (onRemove)=\"handleOnRemove($event)\" (onSave)=\"handleOnSave($event)\"\r\n (onConfigChanged)=\"handleOnConfigChanged($event)\" (onResized)=\"handleOnResizedChanged($event)\"\r\n [provideValue]=\"provideValue\">\r\n </ax-widget-host>\r\n</div>\r\n",
1118
+ host: { class: 'ax widget-board' },
1119
+ encapsulation: ViewEncapsulation.None,
1120
+ changeDetection: ChangeDetectionStrategy.OnPush,
1121
+ styles: [".widget-board{display:inline-block;margin:15px 20px;min-width:calc(100% - 40px);min-height:calc(100% - 34px);--animate-duration:0.5s;background-repeat:no-repeat}.widget-board.grid-background{background-repeat:repeat!important}.widget-board.grid-background .widgets-container .widget-host{touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.widget-board.grid-background .widgets-container .widget-host .widget-edit-overlay{display:block;cursor:move}.widget-board.grid-background .widgets-container .widget-host.widget-dragging{z-index:1000}.widget-board.grid-background .widgets-container .widget-host:focus{outline-width:1px;outline-style:solid;outline-color:var(--ax-primary-color)}.widget-board.grid-background .widget-blank-placeholder{background:var(--ax-primary-trans-light-color);position:absolute}.widget-board .widgets-container{position:relative;touch-action:none}.widget-board .widgets-container.rtl .widget-host .widget-options-menu{right:unset!important;left:0!important}.widget-board .widgets-container .widget-host{position:absolute;background:#fff;box-shadow:2px 2px 3px #dadada}.widget-board .widgets-container .widget-host .widget-content{width:100%;height:100%;display:flex;flex-direction:column}.widget-board .widgets-container .widget-host .widget-content .widget-title{padding:var(--ax-size-md);text-align:start;font-size:1.5em;position:absolute}.widget-board .widgets-container .widget-host .widget-edit-loading{display:none;background:rgba(255,255,255,.85);position:absolute;width:100%;height:100%;top:0;left:0;z-index:2;display:flex}.widget-board .widgets-container .widget-host .widget-config-overlay{position:absolute;background:#fff;width:100%;height:100%;top:0;left:0;z-index:1;padding:var(--ax-size-md);cursor:pointer}.widget-board .widgets-container .widget-host .widget-config-overlay:hover .widget-title{text-decoration:underline}.widget-board .widgets-container .widget-host .widget-config-overlay .widget-title{text-align:start;font-size:1.5em}.widget-board .widgets-container .widget-host .widget-config-overlay .widget-config-box{align-self:center;text-align:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--ax-gray-dark-color)}.widget-board .widgets-container .widget-host .widget-config-overlay .widget-config-box .config-title{font-size:1.2em;margin-bottom:var(--ax-size-md)}.widget-board .widgets-container .widget-host .widget-edit-overlay{display:none;background:rgba(255,255,255,.5);position:absolute;width:100%;height:100%;top:0;left:0;z-index:10}.widget-board .widgets-container .widget-host .widget-edit-overlay .widget-edit-menu{margin:6px;text-align:end;float:inline-end;opacity:1;transition:opacity 1s}.widget-board .widgets-container .widget-host .widget-edit-overlay .widget-edit-menu .widget-edit-menu-button{display:inline-block;background-color:#f0f0f0;border-radius:1px;border:2px solid #fff;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;padding:0;height:32px;width:32px;cursor:pointer;color:#666}.widget-board .widgets-container .widget-host .widget-edit-overlay .widget-edit-menu .widget-edit-menu-button:hover{border-color:#a6a6a6;background-color:#c8c8c8}.widget-board .widgets-container .widget-host .widget-options-menu{display:none;position:absolute;top:0;right:0;z-index:2;cursor:pointer;padding:2px 5px}.widget-board .widgets-container .widget-host .widget-options-menu:hover{background-color:#f0f0f0}.widget-board .widgets-container .widget-host .widget-container{padding:1px;height:100%}.widget-board .widgets-container .widget-host .widget-container:hover .widget-options-menu{display:block}"]
1122
+ }),
1123
+ __metadata("design:paramtypes", [ElementRef,
1124
+ NgZone,
1125
+ ChangeDetectorRef])
1126
+ ], AXWidgetBoardComponent);
1127
+ return AXWidgetBoardComponent;
1128
+ }());
1129
+
1130
+ var AXWidgetSizePropertyEditorComponent = /** @class */ (function (_super) {
1131
+ __extends(AXWidgetSizePropertyEditorComponent, _super);
1132
+ function AXWidgetSizePropertyEditorComponent(cdr) {
1133
+ var _this = _super.call(this, cdr) || this;
1134
+ _this.cdr = cdr;
1135
+ _this.minX = 1;
1136
+ _this.maxX = 10;
1137
+ _this.minY = 1;
1138
+ _this.maxY = 10;
1139
+ return _this;
1140
+ }
1141
+ AXWidgetSizePropertyEditorComponent.prototype.ngOnInit = function () {
1142
+ if (Array.isArray(this.value)) {
1143
+ this.sizeX = this.value[0];
1144
+ this.sizeY = this.value[1];
1145
+ }
1146
+ else {
1147
+ this.sizeX = 2;
1148
+ this.sizeY = 2;
1149
+ }
1150
+ };
1151
+ AXWidgetSizePropertyEditorComponent.prototype.handleMinValueChange = function (e) {
1152
+ this.sizeX = e.value;
1153
+ if (this.sizeY > 0) {
1154
+ _super.prototype.handleValueChange.call(this, [this.sizeX, this.sizeY]);
1155
+ }
1156
+ };
1157
+ AXWidgetSizePropertyEditorComponent.prototype.handleMaxValueChange = function (e) {
1158
+ this.sizeY = e.value;
1159
+ if (this.sizeX > 0) {
1160
+ _super.prototype.handleValueChange.call(this, [this.sizeX, this.sizeY]);
1161
+ }
1162
+ };
1163
+ AXWidgetSizePropertyEditorComponent.prototype.ngAfterViewInit = function () {
1164
+ this.initiated = true;
1165
+ };
1166
+ AXWidgetSizePropertyEditorComponent.ctorParameters = function () { return [
1167
+ { type: ChangeDetectorRef }
1168
+ ]; };
1169
+ AXWidgetSizePropertyEditorComponent = __decorate([
1170
+ Component({
1171
+ template: "<div style=\"display: flex;\">\r\n <div style=\"margin-inline-end: 0.5em;flex: calc(50% - 0.25em);\">\r\n <ax-number-box (onValueChanged)=\"handleMinValueChange($event)\" [value]=\"sizeX\" [min]=\"minX\" [max]=\"maxX\">\r\n </ax-number-box>\r\n </div>\r\n <div style=\"flex: calc(50% - 0.25em);\">\r\n <ax-number-box (onValueChanged)=\"handleMaxValueChange($event)\" [value]=\"sizeY\" [min]=\"minY\" [max]=\"maxY\">\r\n </ax-number-box>\r\n </div>\r\n</div>"
1172
+ }),
1173
+ __metadata("design:paramtypes", [ChangeDetectorRef])
1174
+ ], AXWidgetSizePropertyEditorComponent);
1175
+ return AXWidgetSizePropertyEditorComponent;
1176
+ }(AXProperyEditorComponent));
1177
+
1178
+ var AXWidgetSizePropertyEditorModule = /** @class */ (function () {
1179
+ function AXWidgetSizePropertyEditorModule() {
1180
+ }
1181
+ AXWidgetSizePropertyEditorModule = __decorate([
1182
+ NgModule({
1183
+ declarations: [AXWidgetSizePropertyEditorComponent],
1184
+ imports: [CommonModule, FormsModule, AXNumberBoxModule],
1185
+ exports: [AXWidgetSizePropertyEditorComponent],
1186
+ entryComponents: [AXWidgetSizePropertyEditorComponent],
1187
+ providers: [],
1188
+ }),
1189
+ __metadata("design:paramtypes", [])
1190
+ ], AXWidgetSizePropertyEditorModule);
1191
+ return AXWidgetSizePropertyEditorModule;
1192
+ }());
1193
+
1194
+ var AXWidgetBoardModule = /** @class */ (function () {
1195
+ /**
1196
+ *
1197
+ */
1198
+ function AXWidgetBoardModule() {
1199
+ AXTranslator.load('en', {
1200
+ 'widget-board': {
1201
+ 'configurable-props': 'Configurable Properties',
1202
+ configure: 'Configure Widget'
1203
+ }
1204
+ });
1205
+ AXTranslator.load('fa', {
1206
+ 'widget-board': {
1207
+ 'configurable-props': 'ویژگی های قابل تنظیم',
1208
+ configure: 'پیکر بندی ابزارک'
1209
+ }
1210
+ });
1211
+ }
1212
+ AXWidgetBoardModule = __decorate([
1213
+ NgModule({
1214
+ imports: [
1215
+ CommonModule,
1216
+ AXSearchBoxModule,
1217
+ AXLoadingModule,
1218
+ RouterModule,
1219
+ AXProppertyEditorModule,
1220
+ AXPageModule,
1221
+ AXToolbarModule,
1222
+ AXTranslatorModule,
1223
+ AXLabelModule,
1224
+ AXTextAreaModule,
1225
+ AXFieldsetModule,
1226
+ AXTextBoxModule,
1227
+ AXFormGroupModule,
1228
+ AXTabStripModule,
1229
+ AXCheckBoxModule,
1230
+ AXMenuModule,
1231
+ AXTranslatorModule,
1232
+ AXWidgetSizePropertyEditorModule,
1233
+ AXValidationModule,
1234
+ RouterModule.forChild([
1235
+ {
1236
+ component: AXWidgetSizePropertyEditorComponent,
1237
+ path: 'ax/editors/widget-size'
1238
+ },
1239
+ ])
1240
+ ],
1241
+ exports: [AXWidgetBoardComponent, AXProppertyEditorModule],
1242
+ declarations: [AXWidgetBoardComponent, AXWidgetHostComponent, AXWidgetConfigComponent, AXWidgetSaveComponent],
1243
+ entryComponents: [AXWidgetConfigComponent, AXWidgetSaveComponent],
1244
+ providers: []
1245
+ }),
1246
+ __metadata("design:paramtypes", [])
1247
+ ], AXWidgetBoardModule);
1248
+ return AXWidgetBoardModule;
1249
+ }());
1250
+
1251
+ /**
1252
+ * Generated bundle index. Do not edit.
1253
+ */
1254
+
1255
+ export { AXWidgetBoardComponent, AXWidgetBoardModule, AXWidgetComponent, AXWidgetHostComponent, AXWidgetSizePropertyEditorComponent, AXWidgetSizePropertyEditorModule, ɵ0, AXWidgetConfigComponent as ɵa, AXWidgetSaveComponent as ɵb };
1256
+ //# sourceMappingURL=acorex-layout.js.map