@acorex/components 21.0.0-next52 → 21.0.1-next.1

package/code-editor/index.d.ts

@@ -284,6 +284,8 @@ declare class AXCodeEditorComponent extends MXValueComponent<string> {
     focusOnReady: _angular_core.InputSignal<boolean>;
     /** If true, format the document via Prettier before emitting save. */
     formatOnSave: _angular_core.InputSignal<boolean>;
+    /** Minimum number of rows (lines) to display. Controls the minimum height of the editor. */
+    minRow: _angular_core.InputSignal<number>;
     /**
      * Custom autocompletion options: either a static array of Completion items
      * or a CodeMirror CompletionSource function.
@@ -309,6 +311,8 @@ declare class AXCodeEditorComponent extends MXValueComponent<string> {
     private lineNumbersCompartment;
     private cm;
     private isBrowser;
+    /** Computed minimum height based on minRow (excluding gutter/line numbers). */
+    getMinHeight(): string | null;
     constructor();
     private initializeEditor;
     private reconfigure;
@@ -332,7 +336,7 @@ declare class AXCodeEditorComponent extends MXValueComponent<string> {
     /** Returns the total number of lines in the current document. */
     getTotalLines(): number;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXCodeEditorComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXCodeEditorComponent, "ax-code-editor", never, { "disabled": { "alias": "disabled"; "required": false; }; "value": { "alias": "value"; "required": false; }; "state": { "alias": "state"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "language": { "alias": "language"; "required": false; "isSignal": true; }; "editorReadonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "lineNumbers": { "alias": "lineNumbers"; "required": false; "isSignal": true; }; "lineWrapping": { "alias": "lineWrapping"; "required": false; "isSignal": true; }; "tabSize": { "alias": "tabSize"; "required": false; "isSignal": true; }; "indentWithTab": { "alias": "indentWithTab"; "required": false; "isSignal": true; }; "theme": { "alias": "theme"; "required": false; "isSignal": true; }; "extensions": { "alias": "extensions"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "focusOnReady": { "alias": "focusOnReady"; "required": false; "isSignal": true; }; "formatOnSave": { "alias": "formatOnSave"; "required": false; "isSignal": true; }; "customCompletions": { "alias": "customCompletions"; "required": false; "isSignal": true; }; }, { "onValueChanged": "onValueChanged"; "valueChange": "valueChange"; "stateChange": "stateChange"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; "ready": "ready"; "save": "save"; }, never, ["ax-validation-rule"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXCodeEditorComponent, "ax-code-editor", never, { "disabled": { "alias": "disabled"; "required": false; }; "value": { "alias": "value"; "required": false; }; "state": { "alias": "state"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "language": { "alias": "language"; "required": false; "isSignal": true; }; "editorReadonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "lineNumbers": { "alias": "lineNumbers"; "required": false; "isSignal": true; }; "lineWrapping": { "alias": "lineWrapping"; "required": false; "isSignal": true; }; "tabSize": { "alias": "tabSize"; "required": false; "isSignal": true; }; "indentWithTab": { "alias": "indentWithTab"; "required": false; "isSignal": true; }; "theme": { "alias": "theme"; "required": false; "isSignal": true; }; "extensions": { "alias": "extensions"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "focusOnReady": { "alias": "focusOnReady"; "required": false; "isSignal": true; }; "formatOnSave": { "alias": "formatOnSave"; "required": false; "isSignal": true; }; "minRow": { "alias": "minRow"; "required": false; "isSignal": true; }; "customCompletions": { "alias": "customCompletions"; "required": false; "isSignal": true; }; }, { "onValueChanged": "onValueChanged"; "valueChange": "valueChange"; "stateChange": "stateChange"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; "ready": "ready"; "save": "save"; }, never, ["ax-validation-rule"], true, never>;
 }
 
 declare class AXCodeEditorModule {

package/data-list/index.d.ts

@@ -1,7 +1,7 @@
 import * as _angular_core from '@angular/core';
 import { OnInit, TemplateRef, EventEmitter } from '@angular/core';
-import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import { MXValueComponent, AXDataSource, AXListDataSource } from '@acorex/cdk/common';
+import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 
 interface AXDataListItem {
     id: string;

package/decorators/index.d.ts

@@ -72,9 +72,13 @@ declare class AXDecoratorColorIndicatorComponent {
 }
 
 declare class AXDecoratorFullScreenButtonComponent extends MXBaseComponent {
+    #private;
+    private readonly fullScreenService;
+    private readonly elementRef;
+    element: i0.ModelSignal<HTMLElement>;
     isActive: i0.ModelSignal<boolean>;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXDecoratorFullScreenButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXDecoratorFullScreenButtonComponent, "ax-fullscreen-button", never, { "isActive": { "alias": "isActive"; "required": false; "isSignal": true; }; }, { "isActive": "isActiveChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXDecoratorFullScreenButtonComponent, "ax-fullscreen-button", never, { "element": { "alias": "element"; "required": false; "isSignal": true; }; "isActive": { "alias": "isActive"; "required": false; "isSignal": true; }; }, { "element": "elementChange"; "isActive": "isActiveChange"; }, never, never, true, never>;
 }
 
 /**

package/fesm2022/acorex-components-code-editor.mjs

@@ -464,6 +464,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
         }], ctorParameters: () => [] });
 
 class AXCodeEditorComponent extends MXValueComponent {
+    /** Computed minimum height based on minRow (excluding gutter/line numbers). */
+    getMinHeight() {
+        const rows = this.minRow();
+        if (!rows || rows <= 0)
+            return null;
+        // CodeMirror default line height is typically 1.5em, but we use rem for consistency
+        // This calculates height without accounting for gutter since gutter is separate
+        return `calc(${rows} * 1.5rem)`;
+    }
     constructor() {
         super();
         // Inputs (signals)
@@ -492,6 +501,8 @@ class AXCodeEditorComponent extends MXValueComponent {
         this.focusOnReady = input(false, ...(ngDevMode ? [{ debugName: "focusOnReady" }] : []));
         /** If true, format the document via Prettier before emitting save. */
         this.formatOnSave = input(false, ...(ngDevMode ? [{ debugName: "formatOnSave" }] : []));
+        /** Minimum number of rows (lines) to display. Controls the minimum height of the editor. */
+        this.minRow = input(null, ...(ngDevMode ? [{ debugName: "minRow" }] : []));
         /**
          * Custom autocompletion options: either a static array of Completion items
          * or a CodeMirror CompletionSource function.
@@ -842,7 +853,7 @@ class AXCodeEditorComponent extends MXValueComponent {
         return text ? text.split(/\r?\n/).length : 1;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXCodeEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.9", type: AXCodeEditorComponent, isStandalone: true, selector: "ax-code-editor", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null }, editorReadonly: { classPropertyName: "editorReadonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, lineNumbers: { classPropertyName: "lineNumbers", publicName: "lineNumbers", isSignal: true, isRequired: false, transformFunction: null }, lineWrapping: { classPropertyName: "lineWrapping", publicName: "lineWrapping", isSignal: true, isRequired: false, transformFunction: null }, tabSize: { classPropertyName: "tabSize", publicName: "tabSize", isSignal: true, isRequired: false, transformFunction: null }, indentWithTab: { classPropertyName: "indentWithTab", publicName: "indentWithTab", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, extensions: { classPropertyName: "extensions", publicName: "extensions", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, focusOnReady: { classPropertyName: "focusOnReady", publicName: "focusOnReady", isSignal: true, isRequired: false, transformFunction: null }, formatOnSave: { classPropertyName: "formatOnSave", publicName: "formatOnSave", isSignal: true, isRequired: false, transformFunction: null }, customCompletions: { classPropertyName: "customCompletions", publicName: "customCompletions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onValueChanged: "onValueChanged", valueChange: "valueChange", stateChange: "stateChange", readonlyChange: "readonlyChange", disabledChange: "disabledChange", ready: "ready", save: "save" }, host: { listeners: { "keydown.control.s": "onSaveShortcut($event)" }, classAttribute: "ax-code-editor block" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.9", type: AXCodeEditorComponent, isStandalone: true, selector: "ax-code-editor", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null }, editorReadonly: { classPropertyName: "editorReadonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, lineNumbers: { classPropertyName: "lineNumbers", publicName: "lineNumbers", isSignal: true, isRequired: false, transformFunction: null }, lineWrapping: { classPropertyName: "lineWrapping", publicName: "lineWrapping", isSignal: true, isRequired: false, transformFunction: null }, tabSize: { classPropertyName: "tabSize", publicName: "tabSize", isSignal: true, isRequired: false, transformFunction: null }, indentWithTab: { classPropertyName: "indentWithTab", publicName: "indentWithTab", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, extensions: { classPropertyName: "extensions", publicName: "extensions", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, focusOnReady: { classPropertyName: "focusOnReady", publicName: "focusOnReady", isSignal: true, isRequired: false, transformFunction: null }, formatOnSave: { classPropertyName: "formatOnSave", publicName: "formatOnSave", isSignal: true, isRequired: false, transformFunction: null }, minRow: { classPropertyName: "minRow", publicName: "minRow", isSignal: true, isRequired: false, transformFunction: null }, customCompletions: { classPropertyName: "customCompletions", publicName: "customCompletions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onValueChanged: "onValueChanged", valueChange: "valueChange", stateChange: "stateChange", readonlyChange: "readonlyChange", disabledChange: "disabledChange", ready: "ready", save: "save" }, host: { listeners: { "keydown.control.s": "onSaveShortcut($event)" }, classAttribute: "ax-code-editor block" }, providers: [
             { provide: AXValuableComponent, useExisting: AXCodeEditorComponent },
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -851,7 +862,7 @@ class AXCodeEditorComponent extends MXValueComponent {
             },
             { provide: AXComponent, useExisting: AXCodeEditorComponent },
         ], viewQueries: [{ propertyName: "host", first: true, predicate: ["host"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
-    <div class="ax-editor-container">
+    <div class="ax-editor-container" [style.min-height]="getMinHeight()">
       <div class="ax-code-editor-container">
         <div
           #host
@@ -864,7 +875,7 @@ class AXCodeEditorComponent extends MXValueComponent {
       <ng-content select="ax-validation-rule"> </ng-content>
     </div>
     <div class="ax-error-container"></div>
-  `, isInline: true, styles: [":host{display:block;width:100%;height:100%}:host .ax-editor-container{padding:.1rem}:host.ax-disable{opacity:.5;cursor:not-allowed}:host>.ax-editor-container{display:block;height:100%!important;--ax-comp-editor-space-start-size: 0;--ax-comp-editor-space-end-size: 0;overflow:visible;position:relative}:host .ax-code-editor-container{display:flex;flex-direction:column;height:100%}:host .cm-editor{width:100%;max-width:100%;overflow:auto}:host .cm-editor.cm-focused{outline:none}:host .ax-error-message{padding-inline:.5rem}\n"] }); }
+  `, isInline: true, styles: [":host{display:block;width:100%;height:100%}:host.ax-disable{opacity:.5;cursor:not-allowed}:host>.ax-editor-container{height:100%;width:100%;align-items:start;--ax-comp-editor-space-start-size: 0;--ax-comp-editor-space-end-size: 0;--ax-comp-editor-border-width: 1px}:host .ax-code-editor-container{display:flex;flex-direction:column;height:100%;width:100%}:host .cm-editor{width:100%;max-width:100%;overflow:auto}:host .cm-editor.cm-focused{outline:none}:host .ax-error-message{padding-inline:.5rem}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXCodeEditorComponent, decorators: [{
             type: Component,
@@ -880,7 +891,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                         },
                         { provide: AXComponent, useExisting: AXCodeEditorComponent },
                     ], template: `
-    <div class="ax-editor-container">
+    <div class="ax-editor-container" [style.min-height]="getMinHeight()">
       <div class="ax-code-editor-container">
         <div
           #host
@@ -893,8 +904,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
       <ng-content select="ax-validation-rule"> </ng-content>
     </div>
     <div class="ax-error-container"></div>
-  `, styles: [":host{display:block;width:100%;height:100%}:host .ax-editor-container{padding:.1rem}:host.ax-disable{opacity:.5;cursor:not-allowed}:host>.ax-editor-container{display:block;height:100%!important;--ax-comp-editor-space-start-size: 0;--ax-comp-editor-space-end-size: 0;overflow:visible;position:relative}:host .ax-code-editor-container{display:flex;flex-direction:column;height:100%}:host .cm-editor{width:100%;max-width:100%;overflow:auto}:host .cm-editor.cm-focused{outline:none}:host .ax-error-message{padding-inline:.5rem}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { language: [{ type: i0.Input, args: [{ isSignal: true, alias: "language", required: false }] }], editorReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], lineNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "lineNumbers", required: false }] }], lineWrapping: [{ type: i0.Input, args: [{ isSignal: true, alias: "lineWrapping", required: false }] }], tabSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabSize", required: false }] }], indentWithTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "indentWithTab", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], extensions: [{ type: i0.Input, args: [{ isSignal: true, alias: "extensions", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], focusOnReady: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusOnReady", required: false }] }], formatOnSave: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatOnSave", required: false }] }], customCompletions: [{ type: i0.Input, args: [{ isSignal: true, alias: "customCompletions", required: false }] }], ready: [{ type: i0.Output, args: ["ready"] }], save: [{ type: i0.Output, args: ["save"] }], host: [{ type: i0.ViewChild, args: ['host', { isSignal: true }] }] } });
+  `, styles: [":host{display:block;width:100%;height:100%}:host.ax-disable{opacity:.5;cursor:not-allowed}:host>.ax-editor-container{height:100%;width:100%;align-items:start;--ax-comp-editor-space-start-size: 0;--ax-comp-editor-space-end-size: 0;--ax-comp-editor-border-width: 1px}:host .ax-code-editor-container{display:flex;flex-direction:column;height:100%;width:100%}:host .cm-editor{width:100%;max-width:100%;overflow:auto}:host .cm-editor.cm-focused{outline:none}:host .ax-error-message{padding-inline:.5rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { language: [{ type: i0.Input, args: [{ isSignal: true, alias: "language", required: false }] }], editorReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], lineNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "lineNumbers", required: false }] }], lineWrapping: [{ type: i0.Input, args: [{ isSignal: true, alias: "lineWrapping", required: false }] }], tabSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabSize", required: false }] }], indentWithTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "indentWithTab", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], extensions: [{ type: i0.Input, args: [{ isSignal: true, alias: "extensions", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], focusOnReady: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusOnReady", required: false }] }], formatOnSave: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatOnSave", required: false }] }], minRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "minRow", required: false }] }], customCompletions: [{ type: i0.Input, args: [{ isSignal: true, alias: "customCompletions", required: false }] }], ready: [{ type: i0.Output, args: ["ready"] }], save: [{ type: i0.Output, args: ["save"] }], host: [{ type: i0.ViewChild, args: ['host', { isSignal: true }] }] } });
 
 class AXCodeEditorModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXCodeEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }