@acrodata/gui 2.4.0 → 2.5.0

package/fesm2022/acrodata-gui.mjs

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { Pipe, Input, Directive, ChangeDetectionStrategy, ViewEncapsulation, Component, forwardRef, Injectable, Inject, InjectionToken, Optional, ViewChild, EventEmitter, Output, NgModule } from '@angular/core';
+import { Pipe, Input, Directive, ChangeDetectionStrategy, ViewEncapsulation, Component, forwardRef, Injectable, InjectionToken, Optional, Inject, ViewChild, EventEmitter, Output, NgModule } from '@angular/core';
 import { NgTemplateOutlet, CommonModule } from '@angular/common';
 import * as i1 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR, FormGroup, FormControl, FormArray, ReactiveFormsModule } from '@angular/forms';
 import { MatHint, MatFormField, MatPrefix, MatSuffix, MatFormFieldModule } from '@angular/material/form-field';
 import { MatInput, MatInputModule } from '@angular/material/input';
-import * as i1$2 from '@angular/material/icon';
+import * as i1$1 from '@angular/material/icon';
 import { MatIcon, MatIconModule } from '@angular/material/icon';
 import { MatSelect, MatSelectModule } from '@angular/material/select';
 import { MatSlider, MatSliderThumb, MatSliderRangeThumb, MatSliderModule } from '@angular/material/slider';
@@ -23,7 +23,7 @@ import { coerceCssPixelValue } from '@angular/cdk/coercion';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1$3 from '@acrodata/rnd-dialog';
 import { RndDialogDragHandle } from '@acrodata/rnd-dialog';
-import * as i1$1 from '@angular/cdk/dialog';
+import * as i1$2 from '@angular/cdk/dialog';
 import { DIALOG_DATA } from '@angular/cdk/dialog';
 import * as i2 from '@angular/platform-browser';
 import { finalize } from 'rxjs/operators';
@@ -145,14 +145,14 @@ class GuiFieldLabel {
             (parentType === 'inline' && type !== 'inline') || type === 'group' || type === 'tabs';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiFieldLabel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: GuiFieldLabel, isStandalone: true, selector: "gui-field-label", inputs: { config: "config", index: "index" }, host: { properties: { "class.gui-field-label": "!styless", "title": "title" } }, usesOnChanges: true, ngImport: i0, template: "@if (!config.description) {\n  <span>{{ title }}</span>\n} @else {\n  <span\n    [class.gui-field-label-with-description]=\"config.description\"\n    [matTooltip]=\"config.description\"\n    matTooltipPosition=\"above\"\n    matTooltipClass=\"gui-field-label-tooltip\"\n  >\n    {{ title }}\n  </span>\n}\n", styles: [".gui-field-label{display:inline-block;width:4rem;height:1.5rem;padding:0 .25rem;line-height:1.5rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.gui-field-label-with-description{text-decoration:underline dotted;cursor:help}\n"], dependencies: [{ kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: GuiFieldLabel, isStandalone: true, selector: "gui-field-label", inputs: { config: "config", index: "index" }, host: { properties: { "class.gui-field-label": "!styless", "title": "title" } }, usesOnChanges: true, ngImport: i0, template: "@if (!config.description) {\n  <span>{{ title }}</span>\n} @else {\n  <span\n    [class.gui-field-label-with-description]=\"config.description\"\n    [matTooltip]=\"config.description\"\n    matTooltipPosition=\"above\"\n    matTooltipClass=\"gui-field-label-tooltip\"\n  >\n    {{ title }}\n  </span>\n}\n", styles: [".gui-field-label{display:inline-block;width:4rem;height:1.5rem;padding:0 .25rem;line-height:1.5rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.gui-field-label-with-description{text-decoration:underline dotted;cursor:help}.gui-field-label-tooltip{white-space:pre-wrap}\n"], dependencies: [{ kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiFieldLabel, decorators: [{
             type: Component,
             args: [{ selector: 'gui-field-label', host: {
                         '[class.gui-field-label]': '!styless',
                         '[title]': 'title',
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MatTooltip], template: "@if (!config.description) {\n  <span>{{ title }}</span>\n} @else {\n  <span\n    [class.gui-field-label-with-description]=\"config.description\"\n    [matTooltip]=\"config.description\"\n    matTooltipPosition=\"above\"\n    matTooltipClass=\"gui-field-label-tooltip\"\n  >\n    {{ title }}\n  </span>\n}\n", styles: [".gui-field-label{display:inline-block;width:4rem;height:1.5rem;padding:0 .25rem;line-height:1.5rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.gui-field-label-with-description{text-decoration:underline dotted;cursor:help}\n"] }]
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MatTooltip], template: "@if (!config.description) {\n  <span>{{ title }}</span>\n} @else {\n  <span\n    [class.gui-field-label-with-description]=\"config.description\"\n    [matTooltip]=\"config.description\"\n    matTooltipPosition=\"above\"\n    matTooltipClass=\"gui-field-label-tooltip\"\n  >\n    {{ title }}\n  </span>\n}\n", styles: [".gui-field-label{display:inline-block;width:4rem;height:1.5rem;padding:0 .25rem;line-height:1.5rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.gui-field-label-with-description{text-decoration:underline dotted;cursor:help}.gui-field-label-tooltip{white-space:pre-wrap}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], index: [{
@@ -266,6 +266,7 @@ class GuiCodeareaConfig {
         this.changes = new Subject();
         this.theme = 'light';
         this.languages = [];
+        this.extensions = [];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiCodeareaConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiCodeareaConfig, providedIn: 'root' }); }
@@ -277,44 +278,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }] });
 
-class GuiCodeareaDialog {
-    get languages() {
-        return this.codeareaCfg.languages;
-    }
-    get theme() {
-        return this.codeareaCfg.theme;
-    }
-    constructor(dialogRef, data, cdr, destroyRef, codeareaCfg) {
-        this.dialogRef = dialogRef;
-        this.data = data;
-        this.cdr = cdr;
-        this.destroyRef = destroyRef;
-        this.codeareaCfg = codeareaCfg;
-        this.langDesc = this.codeareaCfg.languages.find(lang => lang.alias.includes(this.data.language.toLowerCase()));
-        this.title = `${this.data.title || ''} (${this.langDesc?.name || 'Plain Text'})`;
-        this.codeareaCfg.changes.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
-            this.cdr.markForCheck();
-        });
-    }
-    save() {
-        this.dialogRef.close(this.data.value);
-    }
-    close() {
-        this.dialogRef.close();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiCodeareaDialog, deps: [{ token: i1$1.DialogRef }, { token: DIALOG_DATA }, { token: i0.ChangeDetectorRef }, { token: i0.DestroyRef }, { token: GuiCodeareaConfig }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GuiCodeareaDialog, isStandalone: true, selector: "gui-codearea-dialog", host: { classAttribute: "gui-codearea-dialog" }, ngImport: i0, template: "<div\n  class=\"gui-codearea-dialog-header\"\n  [class.dragging]=\"dragHandle.isDragging\"\n  rndDialogDragHandle\n  #dragHandle=\"rndDialogDragHandle\"\n>\n  <span class=\"gui-codearea-dialog-title\" [title]=\"title\">{{ title }}</span>\n\n  <span class=\"gui-codearea-dialog-spacer\"></span>\n\n  <button mat-stroked-button (click)=\"close()\">Close</button>\n  <button mat-flat-button (click)=\"save()\">Save</button>\n</div>\n\n<code-editor\n  [(ngModel)]=\"data.value\"\n  [disabled]=\"data.disabled\"\n  [language]=\"data.language\"\n  [languages]=\"languages\"\n  [theme]=\"theme\"\n  indentWithTab\n/>\n", styles: [".gui-codearea-dialog-panel{--rnd-dialog-container-color: var(--mdc-dialog-container-color)}.gui-codearea-dialog{--mdc-outlined-button-label-text-size: .75rem;--mdc-outlined-button-container-height: 1.5rem;--mat-outlined-button-horizontal-padding: .75rem;--mat-outlined-button-touch-target-display: none;--mdc-filled-button-label-text-size: .75rem;--mdc-filled-button-container-height: 1.5rem;--mat-filled-button-horizontal-padding: .75rem;--mat-filled-button-touch-target-display: none;display:flex;flex-direction:column;height:100%;overflow:hidden;border-radius:inherit;font-size:.75rem}.gui-codearea-dialog .code-editor{flex:1;overflow:auto;border:1px solid transparent}.gui-codearea-dialog-header{display:flex;gap:.5rem;align-items:center;padding:.5rem;cursor:grab;border-bottom:1px solid rgba(0,0,0,.24);box-shadow:0 1px #ffffff3d}.gui-codearea-dialog-header.dragging{cursor:grabbing}.gui-codearea-dialog-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gui-codearea-dialog-spacer{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: RndDialogDragHandle, selector: "[rnd-dialog-drag-handle], [rndDialogDragHandle]", exportAs: ["rndDialogDragHandle"] }, { kind: "component", type: CodeEditor, selector: "code-editor", inputs: ["root", "autoFocus", "value", "disabled", "readonly", "theme", "placeholder", "indentWithTab", "indentUnit", "lineWrapping", "highlightWhitespace", "languages", "language", "setup", "extensions"], outputs: ["change", "focus", "blur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiCodeareaDialog, decorators: [{
-            type: Component,
-            args: [{ selector: 'gui-codearea-dialog', standalone: true, imports: [FormsModule, MatButton, RndDialogDragHandle, CodeEditor], host: {
-                        class: 'gui-codearea-dialog',
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"gui-codearea-dialog-header\"\n  [class.dragging]=\"dragHandle.isDragging\"\n  rndDialogDragHandle\n  #dragHandle=\"rndDialogDragHandle\"\n>\n  <span class=\"gui-codearea-dialog-title\" [title]=\"title\">{{ title }}</span>\n\n  <span class=\"gui-codearea-dialog-spacer\"></span>\n\n  <button mat-stroked-button (click)=\"close()\">Close</button>\n  <button mat-flat-button (click)=\"save()\">Save</button>\n</div>\n\n<code-editor\n  [(ngModel)]=\"data.value\"\n  [disabled]=\"data.disabled\"\n  [language]=\"data.language\"\n  [languages]=\"languages\"\n  [theme]=\"theme\"\n  indentWithTab\n/>\n", styles: [".gui-codearea-dialog-panel{--rnd-dialog-container-color: var(--mdc-dialog-container-color)}.gui-codearea-dialog{--mdc-outlined-button-label-text-size: .75rem;--mdc-outlined-button-container-height: 1.5rem;--mat-outlined-button-horizontal-padding: .75rem;--mat-outlined-button-touch-target-display: none;--mdc-filled-button-label-text-size: .75rem;--mdc-filled-button-container-height: 1.5rem;--mat-filled-button-horizontal-padding: .75rem;--mat-filled-button-touch-target-display: none;display:flex;flex-direction:column;height:100%;overflow:hidden;border-radius:inherit;font-size:.75rem}.gui-codearea-dialog .code-editor{flex:1;overflow:auto;border:1px solid transparent}.gui-codearea-dialog-header{display:flex;gap:.5rem;align-items:center;padding:.5rem;cursor:grab;border-bottom:1px solid rgba(0,0,0,.24);box-shadow:0 1px #ffffff3d}.gui-codearea-dialog-header.dragging{cursor:grabbing}.gui-codearea-dialog-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gui-codearea-dialog-spacer{flex:1}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.DialogRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [DIALOG_DATA]
-                }] }, { type: i0.ChangeDetectorRef }, { type: i0.DestroyRef }, { type: GuiCodeareaConfig }] });
-
 const svgIcons = {
     horizontal: `
   <svg viewBox="0 0 24 24">
@@ -365,6 +328,10 @@ const svgIcons = {
   <svg viewBox="0 0 24 24">
     <path fill="currentColor" d="M10,21V19H6.41L10.91,14.5L9.5,13.09L5,17.59V14H3V21H10M14.5,10.91L19,6.41V10H21V3H14V5H17.59L13.09,9.5L14.5,10.91Z"></path>
   </svg>`,
+    wrap: `
+  <svg viewBox="0 0 24 24">
+    <path fill="currentColor" d="M21,5H3V7H21V5M3,19H10V17H3V19M3,13H18C19,13 20,13.43 20,15C20,16.57 19,17 18,17H16V15L12,18L16,21V19H18C20.95,19 22,17.73 22,15C22,12.28 21,11 18,11H3V13Z"></path>
+  </svg>`,
 };
 /** Injection token that can be used to provide the default icons. */
 const GUI_ICONS_CONFIG = new InjectionToken('gui-icons-config');
@@ -380,19 +347,75 @@ class GuiIconsRegistry {
             this._iconRegistry.addSvgIconLiteral(k, this._sanitizer.bypassSecurityTrustHtml(icons[k]));
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiIconsRegistry, deps: [{ token: i1$2.MatIconRegistry }, { token: i2.DomSanitizer }, { token: GUI_ICONS_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiIconsRegistry, deps: [{ token: i1$1.MatIconRegistry }, { token: i2.DomSanitizer }, { token: GUI_ICONS_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiIconsRegistry, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiIconsRegistry, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1$2.MatIconRegistry }, { type: i2.DomSanitizer }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i1$1.MatIconRegistry }, { type: i2.DomSanitizer }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
                     args: [GUI_ICONS_CONFIG]
                 }] }] });
 
+class GuiCodeareaDialog {
+    get languages() {
+        return this.codeareaCfg.languages;
+    }
+    get theme() {
+        return this.codeareaCfg.theme;
+    }
+    get extensions() {
+        return typeof this.codeareaCfg.extensions === 'function'
+            ? this.codeareaCfg.extensions(this.data)
+            : this.codeareaCfg.extensions;
+    }
+    constructor(dialogRef, data, cdr, destroyRef, codeareaCfg, iconsRegistry) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.cdr = cdr;
+        this.destroyRef = destroyRef;
+        this.codeareaCfg = codeareaCfg;
+        this.langDesc = this.codeareaCfg.languages.find(lang => this.data.language && lang.alias.includes(this.data.language.toLowerCase()));
+        this.title = `${this.data.title || ''} (${this.langDesc?.name || 'Plain Text'})`;
+        this.lineWrapping = false;
+        iconsRegistry.add('wrap');
+        this.codeareaCfg.changes.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+            this.cdr.markForCheck();
+        });
+    }
+    toggleLineWrapping() {
+        this.lineWrapping = !this.lineWrapping;
+    }
+    save() {
+        this.dialogRef.close(this.data.value);
+    }
+    close() {
+        this.dialogRef.close();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiCodeareaDialog, deps: [{ token: i1$2.DialogRef }, { token: DIALOG_DATA }, { token: i0.ChangeDetectorRef }, { token: i0.DestroyRef }, { token: GuiCodeareaConfig }, { token: GuiIconsRegistry }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GuiCodeareaDialog, isStandalone: true, selector: "gui-codearea-dialog", host: { classAttribute: "gui-codearea-dialog" }, ngImport: i0, template: "<div\n  class=\"gui-codearea-dialog-header\"\n  [class.dragging]=\"dragHandle.isDragging\"\n  rndDialogDragHandle\n  #dragHandle=\"rndDialogDragHandle\"\n>\n  <span class=\"gui-codearea-dialog-title\" [title]=\"title\">{{ title }}</span>\n\n  <span class=\"gui-codearea-dialog-spacer\"></span>\n\n  <button mat-stroked-button (click)=\"close()\">Close</button>\n  <button mat-flat-button (click)=\"save()\">Save</button>\n</div>\n\n<div class=\"gui-codearea-dialog-content\">\n  <code-editor\n    [(ngModel)]=\"data.value\"\n    [disabled]=\"data.disabled || false\"\n    [readonly]=\"data.readonly || false\"\n    [language]=\"data.language || ''\"\n    [languages]=\"languages\"\n    [theme]=\"theme\"\n    [extensions]=\"extensions\"\n    [lineWrapping]=\"lineWrapping\"\n    indentWithTab\n  />\n\n  <div class=\"gui-codearea-btns\">\n    <gui-icon-button-wrapper>\n      <button mat-icon-button type=\"button\" (click)=\"toggleLineWrapping()\">\n        <mat-icon svgIcon=\"wrap\" />\n      </button>\n    </gui-icon-button-wrapper>\n  </div>\n</div>\n", styles: [".gui-codearea-dialog-panel{--rnd-dialog-container-color: var(--mdc-dialog-container-color)}.gui-codearea-dialog{--mdc-outlined-button-label-text-size: .75rem;--mdc-outlined-button-container-height: 1.5rem;--mat-outlined-button-horizontal-padding: .75rem;--mat-outlined-button-touch-target-display: none;--mdc-filled-button-label-text-size: .75rem;--mdc-filled-button-container-height: 1.5rem;--mat-filled-button-horizontal-padding: .75rem;--mat-filled-button-touch-target-display: none;display:flex;flex-direction:column;height:100%;overflow:hidden;border-radius:inherit;font-size:.75rem}.gui-codearea-dialog-header{display:flex;gap:.5rem;align-items:center;padding:.5rem;cursor:grab;border-bottom:1px solid rgba(0,0,0,.24);box-shadow:0 1px #ffffff3d}.gui-codearea-dialog-header.dragging{cursor:grabbing}.gui-codearea-dialog-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gui-codearea-dialog-spacer{flex:1}.gui-codearea-dialog-content{position:relative;flex:1;overflow:auto}.gui-codearea-dialog-content .code-editor{height:100%;overflow:auto;border:1px solid transparent}.gui-codearea-dialog-content:hover .gui-codearea-btns{display:block}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: RndDialogDragHandle, selector: "[rnd-dialog-drag-handle], [rndDialogDragHandle]", exportAs: ["rndDialogDragHandle"] }, { kind: "component", type: CodeEditor, selector: "code-editor", inputs: ["root", "autoFocus", "value", "disabled", "readonly", "theme", "placeholder", "indentWithTab", "indentUnit", "lineWrapping", "highlightWhitespace", "languages", "language", "setup", "extensions"], outputs: ["change", "focus", "blur"] }, { kind: "component", type: GuiIconButtonWrapper, selector: "gui-icon-button-wrapper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiCodeareaDialog, decorators: [{
+            type: Component,
+            args: [{ selector: 'gui-codearea-dialog', standalone: true, imports: [
+                        FormsModule,
+                        MatButton,
+                        MatIconButton,
+                        MatIcon,
+                        RndDialogDragHandle,
+                        CodeEditor,
+                        GuiIconButtonWrapper,
+                    ], host: {
+                        class: 'gui-codearea-dialog',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"gui-codearea-dialog-header\"\n  [class.dragging]=\"dragHandle.isDragging\"\n  rndDialogDragHandle\n  #dragHandle=\"rndDialogDragHandle\"\n>\n  <span class=\"gui-codearea-dialog-title\" [title]=\"title\">{{ title }}</span>\n\n  <span class=\"gui-codearea-dialog-spacer\"></span>\n\n  <button mat-stroked-button (click)=\"close()\">Close</button>\n  <button mat-flat-button (click)=\"save()\">Save</button>\n</div>\n\n<div class=\"gui-codearea-dialog-content\">\n  <code-editor\n    [(ngModel)]=\"data.value\"\n    [disabled]=\"data.disabled || false\"\n    [readonly]=\"data.readonly || false\"\n    [language]=\"data.language || ''\"\n    [languages]=\"languages\"\n    [theme]=\"theme\"\n    [extensions]=\"extensions\"\n    [lineWrapping]=\"lineWrapping\"\n    indentWithTab\n  />\n\n  <div class=\"gui-codearea-btns\">\n    <gui-icon-button-wrapper>\n      <button mat-icon-button type=\"button\" (click)=\"toggleLineWrapping()\">\n        <mat-icon svgIcon=\"wrap\" />\n      </button>\n    </gui-icon-button-wrapper>\n  </div>\n</div>\n", styles: [".gui-codearea-dialog-panel{--rnd-dialog-container-color: var(--mdc-dialog-container-color)}.gui-codearea-dialog{--mdc-outlined-button-label-text-size: .75rem;--mdc-outlined-button-container-height: 1.5rem;--mat-outlined-button-horizontal-padding: .75rem;--mat-outlined-button-touch-target-display: none;--mdc-filled-button-label-text-size: .75rem;--mdc-filled-button-container-height: 1.5rem;--mat-filled-button-horizontal-padding: .75rem;--mat-filled-button-touch-target-display: none;display:flex;flex-direction:column;height:100%;overflow:hidden;border-radius:inherit;font-size:.75rem}.gui-codearea-dialog-header{display:flex;gap:.5rem;align-items:center;padding:.5rem;cursor:grab;border-bottom:1px solid rgba(0,0,0,.24);box-shadow:0 1px #ffffff3d}.gui-codearea-dialog-header.dragging{cursor:grabbing}.gui-codearea-dialog-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gui-codearea-dialog-spacer{flex:1}.gui-codearea-dialog-content{position:relative;flex:1;overflow:auto}.gui-codearea-dialog-content .code-editor{height:100%;overflow:auto;border:1px solid transparent}.gui-codearea-dialog-content:hover .gui-codearea-btns{display:block}\n"] }]
+        }], ctorParameters: () => [{ type: i1$2.DialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DIALOG_DATA]
+                }] }, { type: i0.ChangeDetectorRef }, { type: i0.DestroyRef }, { type: GuiCodeareaConfig }, { type: GuiIconsRegistry }] });
+
 class GuiCodearea {
     get height() {
         return coerceCssPixelValue(this.config.height || this._height);
@@ -412,6 +435,18 @@ class GuiCodearea {
     get theme() {
         return this.codeareaCfg.theme;
     }
+    get dialogData() {
+        return {
+            value: this.value,
+            disabled: this.disabled,
+            language: this.language,
+        };
+    }
+    get extensions() {
+        return typeof this.codeareaCfg.extensions === 'function'
+            ? this.codeareaCfg.extensions(this.dialogData)
+            : this.codeareaCfg.extensions;
+    }
     constructor(rndDialog, cdr, destroyRef, codeareaCfg, iconsRegistry) {
         this.rndDialog = rndDialog;
         this.cdr = cdr;
@@ -462,11 +497,7 @@ class GuiCodearea {
             panelClass: 'gui-codearea-dialog-panel',
             hasBackdrop: false,
             width: '600px',
-            data: {
-                value: this.value,
-                disabled: this.disabled,
-                language: this.language,
-            },
+            data: this.dialogData,
         });
         dialogRef.closed.subscribe(newValue => {
             if (newValue) {
@@ -483,7 +514,7 @@ class GuiCodearea {
                 useExisting: forwardRef(() => GuiCodearea),
                 multi: true,
             },
-        ], ngImport: i0, template: "<code-editor\n  [style.height]=\"height\"\n  [(ngModel)]=\"value\"\n  [disabled]=\"disabled\"\n  [language]=\"language\"\n  [languages]=\"languages\"\n  [theme]=\"theme\"\n  [setup]=\"setup\"\n  (blur)=\"onValueChange()\"\n/>\n\n<div class=\"gui-codearea-btns\">\n  <gui-icon-button-wrapper>\n    <button mat-icon-button type=\"button\" (click)=\"onExpand()\">\n      <mat-icon svgIcon=\"expand\" />\n    </button>\n  </gui-icon-button-wrapper>\n</div>\n\n@if (config.parentType === 'inline') {\n  <mat-hint>\n    <gui-field-label [config]=\"config\" />\n  </mat-hint>\n}\n", styles: [".gui-codearea{position:relative;overflow:auto;border:1px solid var(--mdc-outlined-text-field-outline-color);border-radius:var(--mdc-outlined-text-field-container-shape)}.gui-codearea .code-editor{width:100%;min-height:1.5rem;overflow:auto;resize:vertical}.gui-codearea:hover .gui-codearea-btns{display:block}.gui-codearea-btns{position:absolute;top:0;right:0;display:none;margin:2px}[dir=rtl] .gui-codearea-btns{left:0;right:auto}.gui-codearea-btns .gui-icon-button-wrapper .mat-mdc-icon-button,.gui-codearea-btns .gui-icon-button-wrapper .mat-icon{width:1.25rem;height:1.25rem}.gui-codearea-btns .mat-mdc-icon-button{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:.25rem}.gui-codearea-btns .mat-mdc-icon-button .mat-mdc-button-persistent-ripple{border-radius:inherit}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: CodeEditor, selector: "code-editor", inputs: ["root", "autoFocus", "value", "disabled", "readonly", "theme", "placeholder", "indentWithTab", "indentUnit", "lineWrapping", "highlightWhitespace", "languages", "language", "setup", "extensions"], outputs: ["change", "focus", "blur"] }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }, { kind: "component", type: GuiIconButtonWrapper, selector: "gui-icon-button-wrapper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], ngImport: i0, template: "<code-editor\n  [style.height]=\"height\"\n  [(ngModel)]=\"value\"\n  [disabled]=\"disabled\"\n  [language]=\"language\"\n  [languages]=\"languages\"\n  [theme]=\"theme\"\n  [setup]=\"setup\"\n  [extensions]=\"extensions\"\n  (blur)=\"onValueChange()\"\n/>\n\n<div class=\"gui-codearea-btns\">\n  <gui-icon-button-wrapper>\n    <button mat-icon-button type=\"button\" (click)=\"onExpand()\">\n      <mat-icon svgIcon=\"expand\" />\n    </button>\n  </gui-icon-button-wrapper>\n</div>\n\n@if (config.parentType === 'inline') {\n  <mat-hint>\n    <gui-field-label [config]=\"config\" />\n  </mat-hint>\n}\n", styles: [".gui-codearea{position:relative;overflow:auto;border:1px solid var(--mdc-outlined-text-field-outline-color);border-radius:var(--mdc-outlined-text-field-container-shape)}.gui-codearea .code-editor{width:100%;min-height:1.5rem;overflow:auto;resize:vertical}.gui-codearea:hover .gui-codearea-btns{display:block}.gui-codearea-btns{position:absolute;top:0;right:0;display:none;margin:2px}[dir=rtl] .gui-codearea-btns{left:0;right:auto}.gui-codearea-btns .gui-icon-button-wrapper .mat-mdc-icon-button,.gui-codearea-btns .gui-icon-button-wrapper .mat-icon{width:1.25rem;height:1.25rem}.gui-codearea-btns .mat-mdc-icon-button{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:.25rem}.gui-codearea-btns .mat-mdc-icon-button .mat-mdc-button-persistent-ripple{border-radius:inherit}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: CodeEditor, selector: "code-editor", inputs: ["root", "autoFocus", "value", "disabled", "readonly", "theme", "placeholder", "indentWithTab", "indentUnit", "lineWrapping", "highlightWhitespace", "languages", "language", "setup", "extensions"], outputs: ["change", "focus", "blur"] }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }, { kind: "component", type: GuiIconButtonWrapper, selector: "gui-icon-button-wrapper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiCodearea, decorators: [{
             type: Component,
@@ -503,7 +534,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         CodeEditor,
                         GuiFieldLabel,
                         GuiIconButtonWrapper,
-                    ], template: "<code-editor\n  [style.height]=\"height\"\n  [(ngModel)]=\"value\"\n  [disabled]=\"disabled\"\n  [language]=\"language\"\n  [languages]=\"languages\"\n  [theme]=\"theme\"\n  [setup]=\"setup\"\n  (blur)=\"onValueChange()\"\n/>\n\n<div class=\"gui-codearea-btns\">\n  <gui-icon-button-wrapper>\n    <button mat-icon-button type=\"button\" (click)=\"onExpand()\">\n      <mat-icon svgIcon=\"expand\" />\n    </button>\n  </gui-icon-button-wrapper>\n</div>\n\n@if (config.parentType === 'inline') {\n  <mat-hint>\n    <gui-field-label [config]=\"config\" />\n  </mat-hint>\n}\n", styles: [".gui-codearea{position:relative;overflow:auto;border:1px solid var(--mdc-outlined-text-field-outline-color);border-radius:var(--mdc-outlined-text-field-container-shape)}.gui-codearea .code-editor{width:100%;min-height:1.5rem;overflow:auto;resize:vertical}.gui-codearea:hover .gui-codearea-btns{display:block}.gui-codearea-btns{position:absolute;top:0;right:0;display:none;margin:2px}[dir=rtl] .gui-codearea-btns{left:0;right:auto}.gui-codearea-btns .gui-icon-button-wrapper .mat-mdc-icon-button,.gui-codearea-btns .gui-icon-button-wrapper .mat-icon{width:1.25rem;height:1.25rem}.gui-codearea-btns .mat-mdc-icon-button{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:.25rem}.gui-codearea-btns .mat-mdc-icon-button .mat-mdc-button-persistent-ripple{border-radius:inherit}\n"] }]
+                    ], template: "<code-editor\n  [style.height]=\"height\"\n  [(ngModel)]=\"value\"\n  [disabled]=\"disabled\"\n  [language]=\"language\"\n  [languages]=\"languages\"\n  [theme]=\"theme\"\n  [setup]=\"setup\"\n  [extensions]=\"extensions\"\n  (blur)=\"onValueChange()\"\n/>\n\n<div class=\"gui-codearea-btns\">\n  <gui-icon-button-wrapper>\n    <button mat-icon-button type=\"button\" (click)=\"onExpand()\">\n      <mat-icon svgIcon=\"expand\" />\n    </button>\n  </gui-icon-button-wrapper>\n</div>\n\n@if (config.parentType === 'inline') {\n  <mat-hint>\n    <gui-field-label [config]=\"config\" />\n  </mat-hint>\n}\n", styles: [".gui-codearea{position:relative;overflow:auto;border:1px solid var(--mdc-outlined-text-field-outline-color);border-radius:var(--mdc-outlined-text-field-container-shape)}.gui-codearea .code-editor{width:100%;min-height:1.5rem;overflow:auto;resize:vertical}.gui-codearea:hover .gui-codearea-btns{display:block}.gui-codearea-btns{position:absolute;top:0;right:0;display:none;margin:2px}[dir=rtl] .gui-codearea-btns{left:0;right:auto}.gui-codearea-btns .gui-icon-button-wrapper .mat-mdc-icon-button,.gui-codearea-btns .gui-icon-button-wrapper .mat-icon{width:1.25rem;height:1.25rem}.gui-codearea-btns .mat-mdc-icon-button{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:.25rem}.gui-codearea-btns .mat-mdc-icon-button .mat-mdc-button-persistent-ripple{border-radius:inherit}\n"] }]
         }], ctorParameters: () => [{ type: i1$3.RndDialog }, { type: i0.ChangeDetectorRef }, { type: i0.DestroyRef }, { type: GuiCodeareaConfig }, { type: GuiIconsRegistry }], propDecorators: { config: [{
                 type: Input
             }], disabled: [{