@acorex/layout 4.1.6 → 4.1.8
Sign up to get free protection for your applications and to get access to all the features.
- package/esm2020/lib/widget-board/widget-board.component.mjs +6 -3
- package/esm2020/lib/widget-board/widget-host.component.mjs +10 -5
- package/esm2020/lib/widget-board/widget.class.mjs +1 -1
- package/fesm2015/acorex-layout.mjs +14 -6
- package/fesm2015/acorex-layout.mjs.map +1 -1
- package/fesm2020/acorex-layout.mjs +14 -6
- package/fesm2020/acorex-layout.mjs.map +1 -1
- package/lib/widget-board/widget-board.component.d.ts +2 -1
- package/lib/widget-board/widget-host.component.d.ts +2 -1
- package/lib/widget-board/widget.class.d.ts +1 -0
- package/package.json +1 -1
|
@@ -304,6 +304,7 @@ class AXWidgetHostComponent {
|
|
|
304
304
|
this.onConfigChanged = new EventEmitter();
|
|
305
305
|
this.onResized = new EventEmitter();
|
|
306
306
|
this.onSave = new EventEmitter();
|
|
307
|
+
this.readonly = false;
|
|
307
308
|
this._isLoading = false;
|
|
308
309
|
this.sizeX = 1;
|
|
309
310
|
this.sizeY = 1;
|
|
@@ -443,13 +444,15 @@ class AXWidgetHostComponent {
|
|
|
443
444
|
remove(e) {
|
|
444
445
|
e.preventDefault();
|
|
445
446
|
e.stopPropagation();
|
|
446
|
-
this.
|
|
447
|
+
if (!this.readonly)
|
|
448
|
+
this.onRemove.emit(this);
|
|
447
449
|
return false;
|
|
448
450
|
}
|
|
449
451
|
handleConfig(e) {
|
|
450
452
|
e.preventDefault();
|
|
451
453
|
e.stopPropagation();
|
|
452
|
-
this.
|
|
454
|
+
if (!this.readonly)
|
|
455
|
+
this.openConfigDialog();
|
|
453
456
|
return false;
|
|
454
457
|
}
|
|
455
458
|
openConfigDialog() {
|
|
@@ -527,10 +530,10 @@ class AXWidgetHostComponent {
|
|
|
527
530
|
}
|
|
528
531
|
}
|
|
529
532
|
AXWidgetHostComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXWidgetHostComponent, deps: [{ token: i0.ElementRef }, { token: i0.ComponentFactoryResolver }, { token: i1$1.AXRenderService }, { token: i0.ChangeDetectorRef }, { token: i1.AXPopupService }, { token: i1.AXLoadingService }], target: i0.ɵɵFactoryTarget.Component });
|
|
530
|
-
AXWidgetHostComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXWidgetHostComponent, selector: "ax-widget-host", inputs: { provideValue: "provideValue", config: "config", sizeX: "sizeX", sizeY: "sizeY", col: "col", row: "row" }, outputs: { onRemove: "onRemove", onConfigChanged: "onConfigChanged", onResized: "onResized", onSave: "onSave" }, host: { attributes: { "tabindex": "0" }, properties: { "attr.data-size-x": "this.sizeX", "attr.data-size-y": "this.sizeY", "attr.data-col": "this.col", "attr.data-row": "this.row" }, classAttribute: "ax widget-host" }, viewQueries: [{ propertyName: "vc", first: true, predicate: ["vc"], descendants: true, read: ViewContainerRef }], ngImport: i0, 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>", components: [{ type: i1.AXMenuComponent, selector: "ax-menu", inputs: ["menuTemplate", "rtl", "size", "selection", "mode", "target", "floatAlignment", "floatPlacemnet", "direction", "items"], outputs: ["onItemClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "trans": i1$1.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
533
|
+
AXWidgetHostComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXWidgetHostComponent, selector: "ax-widget-host", inputs: { provideValue: "provideValue", config: "config", readonly: "readonly", sizeX: "sizeX", sizeY: "sizeY", col: "col", row: "row" }, outputs: { onRemove: "onRemove", onConfigChanged: "onConfigChanged", onResized: "onResized", onSave: "onSave" }, host: { attributes: { "tabindex": "0" }, properties: { "attr.data-size-x": "this.sizeX", "attr.data-size-y": "this.sizeY", "attr.data-col": "this.col", "attr.data-row": "this.row" }, classAttribute: "ax widget-host" }, viewQueries: [{ propertyName: "vc", first: true, predicate: ["vc"], descendants: true, read: ViewContainerRef }], ngImport: i0, 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\" *ngIf=\"!readonly\"><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 && !readonly\">\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>", components: [{ type: i1.AXMenuComponent, selector: "ax-menu", inputs: ["menuTemplate", "rtl", "size", "selection", "mode", "target", "floatAlignment", "floatPlacemnet", "direction", "items"], outputs: ["onItemClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "trans": i1$1.AXTranslatorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
531
534
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXWidgetHostComponent, decorators: [{
|
|
532
535
|
type: Component,
|
|
533
|
-
args: [{ selector: 'ax-widget-host', host: { class: 'ax widget-host', tabindex: '0' }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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>" }]
|
|
536
|
+
args: [{ selector: 'ax-widget-host', host: { class: 'ax widget-host', tabindex: '0' }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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\" *ngIf=\"!readonly\"><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 && !readonly\">\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>" }]
|
|
534
537
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ComponentFactoryResolver }, { type: i1$1.AXRenderService }, { type: i0.ChangeDetectorRef }, { type: i1.AXPopupService }, { type: i1.AXLoadingService }]; }, propDecorators: { provideValue: [{
|
|
535
538
|
type: Input
|
|
536
539
|
}], onRemove: [{
|
|
@@ -546,6 +549,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
546
549
|
}], vc: [{
|
|
547
550
|
type: ViewChild,
|
|
548
551
|
args: ['vc', { read: ViewContainerRef }]
|
|
552
|
+
}], readonly: [{
|
|
553
|
+
type: Input
|
|
549
554
|
}], sizeX: [{
|
|
550
555
|
type: HostBinding,
|
|
551
556
|
args: ['attr.data-size-x']
|
|
@@ -577,6 +582,7 @@ class AXWidgetBoardComponent {
|
|
|
577
582
|
this.galleryItems = [];
|
|
578
583
|
this.tileSize = 80;
|
|
579
584
|
this.gapSize = 5;
|
|
585
|
+
this.readonly = false;
|
|
580
586
|
this.newWidget = null;
|
|
581
587
|
this._isInEditing = false;
|
|
582
588
|
this.isDragging = false;
|
|
@@ -978,10 +984,10 @@ class AXWidgetBoardComponent {
|
|
|
978
984
|
}
|
|
979
985
|
}
|
|
980
986
|
AXWidgetBoardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXWidgetBoardComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
981
|
-
AXWidgetBoardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXWidgetBoardComponent, selector: "ax-widget-board", inputs: { galleryItems: "galleryItems", tileSize: "tileSize", gapSize: "gapSize", provideValue: "provideValue" }, outputs: { onConfigChanged: "onConfigChanged", onWidgetSave: "onWidgetSave" }, host: { classAttribute: "ax widget-board" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "widgetHosts", predicate: AXWidgetHostComponent, descendants: true }], ngImport: i0, 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", styles: [".widget-board{display:inline-block;margin:15px 20px;min-width:calc(100% - 40px);min-height:calc(100% - 34px);--animate-duration: .5s;background-repeat:no-repeat}.widget-board.grid-background{background-repeat:repeat!important}.widget-board.grid-background .widgets-container .widget-host{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:
|
|
987
|
+
AXWidgetBoardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AXWidgetBoardComponent, selector: "ax-widget-board", inputs: { galleryItems: "galleryItems", tileSize: "tileSize", gapSize: "gapSize", readonly: "readonly", provideValue: "provideValue" }, outputs: { onConfigChanged: "onConfigChanged", onWidgetSave: "onWidgetSave" }, host: { classAttribute: "ax widget-board" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "widgetHosts", predicate: AXWidgetHostComponent, descendants: true }], ngImport: i0, 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\" [readonly]=\"readonly || w.readonly\"\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", styles: [".widget-board{display:inline-block;margin:15px 20px;min-width:calc(100% - 40px);min-height:calc(100% - 34px);--animate-duration: .5s;background-repeat:no-repeat}.widget-board.grid-background{background-repeat:repeat!important}.widget-board.grid-background .widgets-container .widget-host{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:white;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 ease}.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}\n"], components: [{ type: AXWidgetHostComponent, selector: "ax-widget-host", inputs: ["provideValue", "config", "readonly", "sizeX", "sizeY", "col", "row"], outputs: ["onRemove", "onConfigChanged", "onResized", "onSave"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
982
988
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AXWidgetBoardComponent, decorators: [{
|
|
983
989
|
type: Component,
|
|
984
|
-
args: [{ selector: 'ax-widget-board', host: { class: 'ax widget-board' }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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", styles: [".widget-board{display:inline-block;margin:15px 20px;min-width:calc(100% - 40px);min-height:calc(100% - 34px);--animate-duration: .5s;background-repeat:no-repeat}.widget-board.grid-background{background-repeat:repeat!important}.widget-board.grid-background .widgets-container .widget-host{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:
|
|
990
|
+
args: [{ selector: 'ax-widget-board', host: { class: 'ax widget-board' }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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\" [readonly]=\"readonly || w.readonly\"\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", styles: [".widget-board{display:inline-block;margin:15px 20px;min-width:calc(100% - 40px);min-height:calc(100% - 34px);--animate-duration: .5s;background-repeat:no-repeat}.widget-board.grid-background{background-repeat:repeat!important}.widget-board.grid-background .widgets-container .widget-host{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:white;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 ease}.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}\n"] }]
|
|
985
991
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { container: [{
|
|
986
992
|
type: ViewChild,
|
|
987
993
|
args: ['container']
|
|
@@ -994,6 +1000,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
994
1000
|
type: Input
|
|
995
1001
|
}], gapSize: [{
|
|
996
1002
|
type: Input
|
|
1003
|
+
}], readonly: [{
|
|
1004
|
+
type: Input
|
|
997
1005
|
}], provideValue: [{
|
|
998
1006
|
type: Input
|
|
999
1007
|
}], onConfigChanged: [{
|