@acorex-platform/framework-client 0.0.46 → 0.0.49

package/fesm2022/acorex-platform-framework-client-core.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, Directive, computed, Injector, ChangeDetectionStrategy, Component, input, ElementRef, ViewContainerRef, signal, effect, runInInjectionContext, Optional, Inject, NgModule, EventEmitter, HostListener, Output, DestroyRef, untracked, provideAppInitializer, Pipe } from '@angular/core';
+import { InjectionToken, inject, Injectable, Directive, computed, Injector, ChangeDetectionStrategy, Component, input, ElementRef, ViewContainerRef, signal, effect, runInInjectionContext, Optional, Inject, NgModule, EventEmitter, HostListener, Output, untracked, DestroyRef, provideAppInitializer, Pipe } from '@angular/core';
 import { AXTranslationService, resolveMultiLanguageString } from '@acorex/core/translation';
-import { resolveToSurfaceClass, isRuntimeHexSurfaceClass, buildRuntimeSurfaceCssRule, isFormContextDirty, getSmart, isSelectionValueEqual, isFormValueEqual, setSmart, summarizeFormContextDirtyDiff, AXPExpressionEvaluatorScopeProviderContext, ExpressionEvaluatorEngine, extractValue, createRandomUuid, AXPKeyboardShortcutPriority, getSystemActions, isLocaleStringMap } from '@acorex-platform/framework-shared/core';
+import { resolveToSurfaceClass, isRuntimeHexSurfaceClass, buildRuntimeSurfaceCssRule, isFormContextDirty, getSmart, isSelectionValueEqual, isFormValueEqual, setSmart, summarizeFormContextDirtyDiff, AXPExpressionEvaluatorScopeProviderContext, ExpressionEvaluatorEngine, extractValue, axpGridItemPlacementClassMap, isAxpGridPlacementUtilityClass, createRandomUuid, AXPKeyboardShortcutPriority, getSystemActions, isLocaleStringMap } from '@acorex-platform/framework-shared/core';
 export { axpContextDefinitionIsAiPrompt } from '@acorex-platform/framework-shared/core';
 import { cloneDeep, isEmpty, isEqual, has, unset, isPlainObject, get, sortBy, set, isUndefined, isNil, endsWith, startsWith, includes, lte, gte, lt, gt, orderBy } from 'lodash-es';
 import { signalStore, withState, withComputed, withMethods, patchState } from '@ngrx/signals';
@@ -1883,57 +1883,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "axp-data", required: false }] }], path: [{ type: i0.Input, args: [{ isSignal: true, alias: "axp-data-path", required: false }] }] } });
 
-// src/app/directives/grid-layout.directive.ts
+//#region ----- Imports -----
+//#endregion
+//#region ----- Directive -----
 class AXPGridLayoutDirective {
     constructor(el, renderer) {
         this.el = el;
         this.renderer = renderer;
         this.options = input.required({ ...(ngDevMode ? { debugName: "options" } : /* istanbul ignore next */ {}), alias: 'axp-grid-layout' });
+        effect(() => {
+            this.options();
+            untracked(() => this.applyTailwindClasses());
+        });
     }
-    ngOnChanges(changes) {
-        if (changes['options']) {
-            this.applyTailwindClasses();
-        }
-    }
+    //#region ----- Grid classes -----
     applyTailwindClasses() {
-        const placement = this.options()?.positions;
-        if (!placement)
-            return;
-        // Clear existing grid classes
         this.clearClasses();
-        // Apply new grid classes based on the input options
-        this.setClasses(placement.sm, '');
-        this.setClasses(placement.md, 'md:');
-        this.setClasses(placement.lg, 'lg:');
-        this.setClasses(placement.xl, 'xl:');
-        this.setClasses(placement.xxl, '2xl:');
-    }
-    setClasses(placement, prefix) {
-        if (placement == null)
-            return;
-        const colStart = placement.colStart ? `${prefix}col-start-${placement.colStart}` : '';
-        const colEnd = placement.colEnd ? `${prefix}col-end-${placement.colEnd}` : '';
-        const colSpan = placement.colSpan ? `${prefix}col-span-${placement.colSpan}` : '';
-        const rowStart = placement.rowStart ? `${prefix}row-start-${placement.rowStart}` : '';
-        const rowEnd = placement.rowEnd ? `${prefix}row-end-${placement.rowEnd}` : '';
-        const rowSpan = placement.rowSpan ? `${prefix}row-span-${placement.rowSpan}` : '';
-        const order = placement.order ? `${prefix}order-${placement.order}` : ''; // Handling order
-        [colStart, colEnd, colSpan, rowStart, rowEnd, rowSpan, order].forEach(cls => {
-            if (cls) {
-                this.renderer.addClass(this.el.nativeElement, cls);
-            }
+        const classMap = axpGridItemPlacementClassMap({
+            positions: this.options()?.positions,
         });
+        for (const [className, enabled] of Object.entries(classMap)) {
+            if (enabled) {
+                this.renderer.addClass(this.el.nativeElement, className);
+            }
+        }
     }
     clearClasses() {
-        const currentClasses = this.el.nativeElement.className.split(' ');
-        currentClasses.forEach((className) => {
-            if (className.startsWith('col-') || className.startsWith('row-') || className.startsWith('order-')) {
+        const current = this.el.nativeElement.className;
+        if (typeof current !== 'string' || !current) {
+            return;
+        }
+        for (const className of current.split(/\s+/)) {
+            if (isAxpGridPlacementUtilityClass(className)) {
                 this.renderer.removeClass(this.el.nativeElement, className);
             }
-        });
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPGridLayoutDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: AXPGridLayoutDirective, isStandalone: true, selector: "[axp-grid-layout]", inputs: { options: { classPropertyName: "options", publicName: "axp-grid-layout", isSignal: true, isRequired: true, transformFunction: null } }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: AXPGridLayoutDirective, isStandalone: true, selector: "[axp-grid-layout]", inputs: { options: { classPropertyName: "options", publicName: "axp-grid-layout", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPGridLayoutDirective, decorators: [{
             type: Directive,