@acorex/layout 3.0.63 → 4.1.0

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