@acorex/platform 20.2.4-next.7 → 20.2.4-next.9

package/fesm2022/acorex-platform-layout-designer.mjs

@@ -3,7 +3,7 @@ import { AXButtonModule } from '@acorex/components/button';
 import * as i1 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
 import * as i1$2 from '@acorex/platform/layout/builder';
-import { AXPWidgetRegistryService, AXPWidgetGroupEnum, AXPWidgetsCatalog, AXPLayoutWidgetComponent, AXP_WIDGET_TOKEN, AXPWidgetStatus, AXPValueWidgetComponent, AXPLayoutBuilderModule } from '@acorex/platform/layout/builder';
+import { AXPWidgetRegistryService, AXPWidgetGroupEnum, AXPWidgetsCatalog, AXPLayoutBaseWidgetComponent, AXP_WIDGET_TOKEN, AXPWidgetStatus, AXPValueWidgetComponent, AXPLayoutBuilderModule } from '@acorex/platform/layout/builder';
 import * as i0 from '@angular/core';
 import { signal, computed, Injectable, inject, effect, ViewEncapsulation, ChangeDetectionStrategy, Component, input, output, EventEmitter, HostBinding, Output, model, HostListener, Injector, NgZone, ViewContainerRef, Directive, ElementRef, ViewChild } from '@angular/core';
 import { AXLoadingDialogService } from '@acorex/components/loading-dialog';
@@ -1011,7 +1011,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
 class AXPDesignerAddWidgetButtonComponent {
     constructor() {
         this.designerService = inject(AXPDesignerService);
-        this.parent = inject(AXPLayoutWidgetComponent);
+        this.parent = inject(AXPLayoutBaseWidgetComponent);
     }
     async handleClick(e) {
         e.nativeEvent.stopPropagation();
@@ -1082,7 +1082,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
 class AXPDesignerAddWidgetMiniButtonComponent {
     constructor() {
         this.designerService = inject(AXPDesignerService);
-        this.parent = inject(AXPLayoutWidgetComponent);
+        this.parent = inject(AXPLayoutBaseWidgetComponent);
         this.onClick = new EventEmitter();
     }
     async handleClick(e) {
@@ -1100,16 +1100,19 @@ class AXPDesignerAddWidgetMiniButtonComponent {
         //
         cls[`ax-flex`] = true;
         cls[`ax-w-full`] = true;
+        cls[`ax-h-full`] = true;
         return cls;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPDesignerAddWidgetMiniButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: AXPDesignerAddWidgetMiniButtonComponent, isStandalone: true, selector: "axp-designer-add-widget-mini-button", outputs: { onClick: "onClick" }, host: { properties: { "class": "this.__class" } }, ngImport: i0, template: `
     <div class="axp-empty-space">
-      <div
-        class="ax-m-auto ax-py-4 ax-px-8 ax-text-primary-500 hover:ax-text-primary-700 ax-cursor-pointer"
-        (click)="handleClick($event)"
-      >
-        <i class="fa-solid fa-plus "></i>
+      <div class="ax-m-auto ax-py-4 ax-px-8">
+        <div
+          class="ax-flex ax-items-center ax-justify-center ax-size-4 hover:ax-scale-125 ax-cursor-pointer"
+          (click)="handleClick($event)"
+        >
+          <i class="fa-solid fa-plus"></i>
+        </div>
       </div>
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXDecoratorModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
@@ -1120,17 +1123,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                     selector: 'axp-designer-add-widget-mini-button',
                     template: `
     <div class="axp-empty-space">
-      <div
-        class="ax-m-auto ax-py-4 ax-px-8 ax-text-primary-500 hover:ax-text-primary-700 ax-cursor-pointer"
-        (click)="handleClick($event)"
-      >
-        <i class="fa-solid fa-plus "></i>
+      <div class="ax-m-auto ax-py-4 ax-px-8">
+        <div
+          class="ax-flex ax-items-center ax-justify-center ax-size-4 hover:ax-scale-125 ax-cursor-pointer"
+          (click)="handleClick($event)"
+        >
+          <i class="fa-solid fa-plus"></i>
+        </div>
       </div>
     </div>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [AXButtonModule, AXDecoratorModule],
-                    encapsulation: ViewEncapsulation.None
+                    encapsulation: ViewEncapsulation.None,
                 }]
         }], propDecorators: { onClick: [{
                 type: Output
@@ -1139,6 +1144,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                 args: ['class']
             }] } });
 
+class AXPDesignerFlexDrawerComponent {
+    constructor() {
+        this.itemsCount = model(12, ...(ngDevMode ? [{ debugName: "itemsCount", alias: 'items' }] : [{ alias: 'items' }]));
+        this.onSelect = output();
+        this.items = computed(() => Array.from({ length: this.itemsCount() }).map((v, index) => index + 1), ...(ngDevMode ? [{ debugName: "items" }] : []));
+        this.range = signal(0, ...(ngDevMode ? [{ debugName: "range" }] : []));
+    }
+    handleMouseHover(c) {
+        this.range.set(c);
+    }
+    handleClick(c) {
+        this.onSelect.emit(c);
+    }
+    handleMouseLeave(event) {
+        this.range.set(0);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPDesignerFlexDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXPDesignerFlexDrawerComponent, isStandalone: true, selector: "axp-designer-flex-drawer", inputs: { itemsCount: { classPropertyName: "itemsCount", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemsCount: "itemsChange", onSelect: "onSelect" }, host: { listeners: { "mouseleave": "handleMouseLeave($event)" } }, ngImport: i0, template: `
+    <table class="table-picker">
+      <tbody>
+        <tr>
+          @for (c of items(); track $index) {
+            <td (mouseenter)="handleMouseHover(c)" [class.picked]="c <= range()" (click)="handleClick(c)"></td>
+          }
+        </tr>
+        <tr>
+          <td [attr.colspan]="items().length" class="ax-text-center">
+            <small>{{ range() }}</small>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  `, isInline: true, styles: [":host{width:100%}:host table{width:100%;border-collapse:collapse;--tw-border-spacing-x: 0px;--tw-border-spacing-y: 0px;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y)}:host table td{height:2.5rem;border-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1))}:host table td:after{content:\"\";display:block}:host table td.picked{border-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-primary-100),var(--tw-bg-opacity, 1))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPDesignerFlexDrawerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-designer-flex-drawer', template: `
+    <table class="table-picker">
+      <tbody>
+        <tr>
+          @for (c of items(); track $index) {
+            <td (mouseenter)="handleMouseHover(c)" [class.picked]="c <= range()" (click)="handleClick(c)"></td>
+          }
+        </tr>
+        <tr>
+          <td [attr.colspan]="items().length" class="ax-text-center">
+            <small>{{ range() }}</small>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, imports: [], styles: [":host{width:100%}:host table{width:100%;border-collapse:collapse;--tw-border-spacing-x: 0px;--tw-border-spacing-y: 0px;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y)}:host table td{height:2.5rem;border-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1))}:host table td:after{content:\"\";display:block}:host table td.picked{border-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-primary-100),var(--tw-bg-opacity, 1))}\n"] }]
+        }], propDecorators: { handleMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave', ['$event']]
+            }] } });
+
 class AXPDesignerGridDrawerComponent {
     constructor() {
         this.rowsCount = model(5, ...(ngDevMode ? [{ debugName: "rowsCount", alias: 'rows' }] : [{ alias: 'rows' }]));
@@ -1182,7 +1244,7 @@ class AXPDesignerGridDrawerComponent {
         }
         <tr>
           <td [attr.colspan]="columns().length" class="ax-text-center">
-            <small>{{ rangeC() }}*{{ rangeR() }}</small>
+            <small>{{ rangeC() }}×{{ rangeR() }}</small>
           </td>
         </tr>
       </tbody>
@@ -1207,7 +1269,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
         }
         <tr>
           <td [attr.colspan]="columns().length" class="ax-text-center">
-            <small>{{ rangeC() }}*{{ rangeR() }}</small>
+            <small>{{ rangeC() }}×{{ rangeR() }}</small>
           </td>
         </tr>
       </tbody>
@@ -2399,5 +2461,5 @@ var preview_component = /*#__PURE__*/Object.freeze({
  * Generated bundle index. Do not edit.
  */
 
-export { AXPDesignerAddWidgetButtonComponent, AXPDesignerAddWidgetLineButtonComponent, AXPDesignerAddWidgetMiniButtonComponent, AXPDesignerConnector, AXPDesignerGridDrawerComponent, AXPDesignerMessageKeys, AXPDesignerModes, AXPDesignerService, AXPDesignerWidgetPickerComponent, AXPLayoutDesignerComponent, AXPLayoutDesignerPreviewComponent, AXPLayoutDesignerPreviewViewerComponent, AXPTemplateLoadingStrategy, AXPWidgetDesignerRendererDirective, AXPWidgetPickerService, AXP_DESIGNER_ADD_WIDGET_MENU, AXP_DESIGNER_CLONE_MENU, AXP_DESIGNER_COPY_MENU, AXP_DESIGNER_CUT_MENU, AXP_DESIGNER_DELETE_WIDGET_MENU, AXP_DESIGNER_PASTE_MENU, AXP_DESIGNER_SAVE_AS_WIDGET_MENU, AXP_DESIGNER_SELECT_WIDGET_MENU, cloneWidgetMenu };
+export { AXPDesignerAddWidgetButtonComponent, AXPDesignerAddWidgetLineButtonComponent, AXPDesignerAddWidgetMiniButtonComponent, AXPDesignerConnector, AXPDesignerFlexDrawerComponent, AXPDesignerGridDrawerComponent, AXPDesignerMessageKeys, AXPDesignerModes, AXPDesignerService, AXPDesignerWidgetPickerComponent, AXPLayoutDesignerComponent, AXPLayoutDesignerPreviewComponent, AXPLayoutDesignerPreviewViewerComponent, AXPTemplateLoadingStrategy, AXPWidgetDesignerRendererDirective, AXPWidgetPickerService, AXP_DESIGNER_ADD_WIDGET_MENU, AXP_DESIGNER_CLONE_MENU, AXP_DESIGNER_COPY_MENU, AXP_DESIGNER_CUT_MENU, AXP_DESIGNER_DELETE_WIDGET_MENU, AXP_DESIGNER_PASTE_MENU, AXP_DESIGNER_SAVE_AS_WIDGET_MENU, AXP_DESIGNER_SELECT_WIDGET_MENU, cloneWidgetMenu };
 //# sourceMappingURL=acorex-platform-layout-designer.mjs.map