@acorex/layout 4.1.4 → 4.2.0

package/karma.conf.js

@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../../coverage/acorex/layout'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

package/ng-package.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../../dist/acorex/layout",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "allowedNonPeerDependencies": [
+  ]
+}

package/package.json

@@ -1,31 +1,11 @@
-{
-  "name": "@acorex/layout",
-  "version": "4.1.4",
-  "peerDependencies": {
-    "@angular/common": "^13.3.8",
-    "@angular/core": "^13.3.8"
-  },
-  "dependencies": {
-    "tslib": "^2.0.0"
-  },
-  "module": "fesm2015/acorex-layout.mjs",
-  "es2020": "fesm2020/acorex-layout.mjs",
-  "esm2020": "esm2020/acorex-layout.mjs",
-  "fesm2020": "fesm2020/acorex-layout.mjs",
-  "fesm2015": "fesm2015/acorex-layout.mjs",
-  "typings": "acorex-layout.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./acorex-layout.d.ts",
-      "esm2020": "./esm2020/acorex-layout.mjs",
-      "es2020": "./fesm2020/acorex-layout.mjs",
-      "es2015": "./fesm2015/acorex-layout.mjs",
-      "node": "./fesm2015/acorex-layout.mjs",
-      "default": "./fesm2020/acorex-layout.mjs"
-    }
-  },
-  "sideEffects": false
-}
+{
+  "name": "@acorex/layout",
+  "version": "4.2.0",
+  "peerDependencies": {
+    "@angular/common": "^13.3.8",
+    "@angular/core": "^13.3.8"
+  },
+  "dependencies": {
+    "tslib": "^2.0.0"
+  }
+}

package/src/lib/widget-board/editors/widget-size-editor/widget-size.editor.html

@@ -0,0 +1,10 @@
+<div style="display: flex;">
+    <div style="margin-inline-end: 0.5em;flex: calc(50% - 0.25em);">
+        <ax-number-box (onValueChanged)="handleMinValueChange($event)" [value]="sizeX" [min]="minX" [max]="maxX">
+        </ax-number-box>
+    </div>
+    <div style="flex: calc(50% - 0.25em);">
+        <ax-number-box (onValueChanged)="handleMaxValueChange($event)" [value]="sizeY" [min]="minY" [max]="maxY">
+        </ax-number-box>
+    </div>
+</div>

package/src/lib/widget-board/editors/widget-size-editor/widget-size.editor.ts

@@ -0,0 +1,55 @@
+import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
+import { AXProperyEditorComponent } from '@acorex/components';
+
+@Component({
+    templateUrl: './widget-size.editor.html'
+})
+export class AXWidgetSizePropertyEditorComponent extends AXProperyEditorComponent<number[]>  {
+
+    sizeX: number;
+    sizeY: number;
+
+    minX: number = 1;
+    maxX: number = 10;
+
+    minY: number = 1;
+    maxY: number = 10;
+
+
+    constructor(protected cdr: ChangeDetectorRef) {
+        super(cdr);
+    }
+
+    ngOnInit() {
+        if (Array.isArray(this.value)) {
+            this.sizeX = this.value[0];
+            this.sizeY = this.value[1];
+        }
+        else {
+            this.sizeX = 2;
+            this.sizeY = 2;
+        }
+    }
+
+    handleMinValueChange(e: any) {
+        this.sizeX = e.value;
+
+        if (this.sizeY > 0) {
+            super.handleValueChange([this.sizeX, this.sizeY]);
+        }
+    }
+
+    handleMaxValueChange(e: any) {
+        this.sizeY = e.value;
+        if (this.sizeX > 0) {
+            super.handleValueChange([this.sizeX, this.sizeY]);
+        }
+    }
+
+
+
+    ngAfterViewInit() {
+        this.onRenderCompleted.emit();
+    }
+
+}

package/src/lib/widget-board/editors/widget-size-editor/widget-size.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { AXWidgetSizePropertyEditorComponent } from './widget-size.editor';
+import { AXNumberBoxModule } from '@acorex/components';
+
+
+
+
+@NgModule({
+    declarations: [AXWidgetSizePropertyEditorComponent],
+    imports: [CommonModule, FormsModule, AXNumberBoxModule],
+    exports: [AXWidgetSizePropertyEditorComponent],
+    providers: []
+})
+export class AXWidgetSizePropertyEditorModule {
+   
+}

package/src/lib/widget-board/widget-board.component.html

@@ -0,0 +1,7 @@
+<div class="widgets-container" [class.rtl]="rtl" #container>
+    <ax-widget-host *ngFor="let w of widgets;trackBy: trackByFn"  [config]='w' [sizeX]="w.sizeX"
+        [sizeY]="w.sizeY" [col]="w.col" [row]="w.row" (onRemove)="handleOnRemove($event)" (onSave)="handleOnSave($event)"
+        (onConfigChanged)="handleOnConfigChanged($event)" (onResized)="handleOnResizedChanged($event)"
+        [provideValue]="provideValue">
+    </ax-widget-host>
+</div>

package/src/lib/widget-board/widget-board.component.scss

@@ -0,0 +1,198 @@
+.widget-board {
+    display: inline-block;
+    margin: 15px 20px 15px 20px;
+    min-width: calc(100% - 40px);
+    min-height: calc(100% - 34px);
+    --animate-duration: 0.5s;
+    background-repeat: no-repeat;
+
+    &.grid-background {
+        
+        background-repeat: repeat !important;
+        .widgets-container {
+            .widget-host {
+                touch-action: none;
+
+                .widget-edit-overlay {
+                    display: block;
+                    cursor: move;
+                }
+
+                &.widget-dragging {
+                    z-index: 1000;
+                }
+
+                &:focus {
+                    outline-width: 1px;
+                    outline-style: solid;
+                    outline-color: var(--ax-primary-color);
+                }
+
+                touch-action: none;
+                user-select: none;
+            }
+        }
+
+        .widget-blank-placeholder {
+            background: var(--ax-primary-trans-light-color);
+            position: absolute;
+        }
+    }
+
+    .widgets-container {
+        position: relative;
+        touch-action: none;
+
+
+        &.rtl {
+            .widget-host {
+                .widget-options-menu {
+                    right: unset !important;
+                    left: 0 !important;
+                }
+            }
+        }
+
+
+        .widget-host {
+            position: absolute;
+            background: #fff;
+            box-shadow: 2px 2px 3px #dadada;
+
+            .widget-content {
+                width: 100%;
+                height: 100%;
+                display: flex;
+                flex-direction: column;
+
+                .widget-title {
+                    padding: var(--ax-size-md);
+                    text-align: start;
+                    font-size: 1.5em;
+                    position: absolute;
+                }
+            }
+
+
+            .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-config-overlay {
+                position: absolute;
+                background: rgba(255, 255, 255, 1);
+                width: 100%;
+                height: 100%;
+                top: 0;
+                left: 0;
+                z-index: 1;
+                padding: var(--ax-size-md);
+                cursor: pointer;
+
+                &:hover {
+                    .widget-title {
+                        text-decoration: underline;
+                    }
+                }
+
+
+
+                .widget-title {
+                    text-align: start;
+                    font-size: 1.5em;
+                }
+
+                .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);
+
+
+                    .config-title {
+                        font-size: 1.2em;
+                        margin-bottom: var(--ax-size-md);
+                    }
+
+                    .config-icon {}
+                }
+            }
+
+            .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-edit-menu {
+                    margin: 6px;
+                    text-align: end;
+                    float: inline-end;
+                    opacity: 1;
+                    transition: opacity 1s ease;
+
+                    .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;
+
+                        &:hover {
+                            border-color: #a6a6a6;
+                            background-color: #c8c8c8;
+                        }
+                    }
+                }
+            }
+
+            .widget-options-menu {
+                display: none;
+                position: absolute;
+                top: 0;
+                right: 0;
+                z-index: 2;
+                cursor: pointer;
+                padding: 2px 5px;
+
+                &:hover {
+                    background-color: #f0f0f0;
+                }
+            }
+
+            .widget-container {
+                padding: 1px;
+                height: 100%;
+
+                &:hover {
+                    .widget-options-menu {
+                        display: block;
+                    }
+                }
+            }
+        }
+
+    }
+}