@acrodata/gui 3.3.0 → 3.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/codearea/codearea-dialog.scss +5 -1
- package/codearea/codearea-toolbar.scss +33 -0
- package/codearea/codearea.scss +5 -31
- package/fesm2022/acrodata-gui.mjs +35 -11
- package/fesm2022/acrodata-gui.mjs.map +1 -1
- package/icon-button-wrapper/icon-button-wrapper.scss +2 -0
- package/package.json +1 -1
- package/types/acrodata-gui.d.ts +9 -2
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
.gui-codearea-toolbar {
|
|
2
|
+
position: absolute;
|
|
3
|
+
top: 0;
|
|
4
|
+
right: 0;
|
|
5
|
+
margin: 2px;
|
|
6
|
+
|
|
7
|
+
[dir='rtl'] & {
|
|
8
|
+
left: 0;
|
|
9
|
+
right: auto;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.gui-icon-button-wrapper {
|
|
13
|
+
display: flex;
|
|
14
|
+
flex-direction: column;
|
|
15
|
+
gap: 2px;
|
|
16
|
+
|
|
17
|
+
.mat-mdc-icon-button,
|
|
18
|
+
.mat-icon {
|
|
19
|
+
width: 1.25rem;
|
|
20
|
+
height: 1.25rem;
|
|
21
|
+
line-height: 1.25rem;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.mat-mdc-icon-button {
|
|
26
|
+
backdrop-filter: blur(8px);
|
|
27
|
+
border-radius: 0.25rem;
|
|
28
|
+
|
|
29
|
+
.mat-mdc-button-persistent-ripple {
|
|
30
|
+
border-radius: inherit;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
}
|
package/codearea/codearea.scss
CHANGED
|
@@ -11,39 +11,13 @@
|
|
|
11
11
|
resize: vertical;
|
|
12
12
|
}
|
|
13
13
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
display: block;
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
.gui-codearea-btns {
|
|
22
|
-
position: absolute;
|
|
23
|
-
top: 0;
|
|
24
|
-
right: 0;
|
|
25
|
-
display: none;
|
|
26
|
-
margin: 2px;
|
|
27
|
-
|
|
28
|
-
[dir='rtl'] & {
|
|
29
|
-
left: 0;
|
|
30
|
-
right: auto;
|
|
14
|
+
.gui-codearea-toolbar {
|
|
15
|
+
display: none;
|
|
31
16
|
}
|
|
32
17
|
|
|
33
|
-
|
|
34
|
-
.
|
|
35
|
-
|
|
36
|
-
width: 1.25rem;
|
|
37
|
-
height: 1.25rem;
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
.mat-mdc-icon-button {
|
|
42
|
-
backdrop-filter: blur(8px);
|
|
43
|
-
border-radius: 0.25rem;
|
|
44
|
-
|
|
45
|
-
.mat-mdc-button-persistent-ripple {
|
|
46
|
-
border-radius: inherit;
|
|
18
|
+
&:hover {
|
|
19
|
+
.gui-codearea-toolbar {
|
|
20
|
+
display: block;
|
|
47
21
|
}
|
|
48
22
|
}
|
|
49
23
|
}
|
|
@@ -77,7 +77,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
77
77
|
type: Pipe,
|
|
78
78
|
args: [{
|
|
79
79
|
name: 'ejs',
|
|
80
|
-
standalone: true,
|
|
81
80
|
}]
|
|
82
81
|
}] });
|
|
83
82
|
class GuiFlexDirective {
|
|
@@ -94,7 +93,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
94
93
|
type: Directive,
|
|
95
94
|
args: [{
|
|
96
95
|
selector: '[flex]',
|
|
97
|
-
standalone: true,
|
|
98
96
|
}]
|
|
99
97
|
}], propDecorators: { flex: [{
|
|
100
98
|
type: Input
|
|
@@ -202,7 +200,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
202
200
|
}
|
|
203
201
|
`, host: {
|
|
204
202
|
class: 'gui-icon',
|
|
205
|
-
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush,
|
|
203
|
+
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".gui-icon{display:inline-flex}.gui-icon img,.gui-icon i{display:block;width:var(--mat-button-toggle-height);height:var(--mat-button-toggle-height);line-height:var(--mat-button-toggle-height)}\n"] }]
|
|
206
204
|
}], propDecorators: { src: [{
|
|
207
205
|
type: Input
|
|
208
206
|
}] } });
|
|
@@ -356,13 +354,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
356
354
|
|
|
357
355
|
class GuiIconButtonWrapper {
|
|
358
356
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: GuiIconButtonWrapper, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
359
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: GuiIconButtonWrapper, isStandalone: true, selector: "gui-icon-button-wrapper", host: { classAttribute: "gui-icon-button-wrapper" }, ngImport: i0, template: "<ng-content />\n", styles: [".gui-icon-button-wrapper{display:block;line-height:1}.gui-icon-button-wrapper .mat-mdc-icon-button{--mat-icon-button-state-layer-size: 1.5rem;--mat-icon-button-icon-size: .875rem;--mat-icon-button-touch-target-display: none;padding:0}.gui-icon-button-wrapper .mat-icon{display:inline-flex;justify-content:center;align-items:center;width:1.5rem;height:1.5rem}.gui-icon-button-wrapper .mat-icon svg{width:.875rem;height:.875rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
357
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: GuiIconButtonWrapper, isStandalone: true, selector: "gui-icon-button-wrapper", host: { classAttribute: "gui-icon-button-wrapper" }, ngImport: i0, template: "<ng-content />\n", styles: [".gui-icon-button-wrapper{display:block;line-height:1}.gui-icon-button-wrapper .mat-mdc-icon-button{--mat-icon-button-state-layer-size: 1.5rem;--mat-icon-button-icon-size: .875rem;--mat-icon-button-touch-target-display: none;padding:0}.gui-icon-button-wrapper .mat-icon{display:inline-flex;justify-content:center;align-items:center;width:1.5rem;height:1.5rem;font-size:.875rem;line-height:1.5rem}.gui-icon-button-wrapper .mat-icon svg{width:.875rem;height:.875rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
360
358
|
}
|
|
361
359
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: GuiIconButtonWrapper, decorators: [{
|
|
362
360
|
type: Component,
|
|
363
|
-
args: [{ selector: 'gui-icon-button-wrapper',
|
|
361
|
+
args: [{ selector: 'gui-icon-button-wrapper', host: {
|
|
364
362
|
class: 'gui-icon-button-wrapper',
|
|
365
|
-
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content />\n", styles: [".gui-icon-button-wrapper{display:block;line-height:1}.gui-icon-button-wrapper .mat-mdc-icon-button{--mat-icon-button-state-layer-size: 1.5rem;--mat-icon-button-icon-size: .875rem;--mat-icon-button-touch-target-display: none;padding:0}.gui-icon-button-wrapper .mat-icon{display:inline-flex;justify-content:center;align-items:center;width:1.5rem;height:1.5rem}.gui-icon-button-wrapper .mat-icon svg{width:.875rem;height:.875rem}\n"] }]
|
|
363
|
+
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content />\n", styles: [".gui-icon-button-wrapper{display:block;line-height:1}.gui-icon-button-wrapper .mat-mdc-icon-button{--mat-icon-button-state-layer-size: 1.5rem;--mat-icon-button-icon-size: .875rem;--mat-icon-button-touch-target-display: none;padding:0}.gui-icon-button-wrapper .mat-icon{display:inline-flex;justify-content:center;align-items:center;width:1.5rem;height:1.5rem;font-size:.875rem;line-height:1.5rem}.gui-icon-button-wrapper .mat-icon svg{width:.875rem;height:.875rem}\n"] }]
|
|
366
364
|
}] });
|
|
367
365
|
|
|
368
366
|
class GuiCodeareaConfig {
|
|
@@ -380,6 +378,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
380
378
|
}]
|
|
381
379
|
}] });
|
|
382
380
|
|
|
381
|
+
class GuiCodeareaToolbar {
|
|
382
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: GuiCodeareaToolbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
383
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: GuiCodeareaToolbar, isStandalone: true, selector: "gui-codearea-toolbar", host: { classAttribute: "gui-codearea-toolbar" }, ngImport: i0, template: `
|
|
384
|
+
<ng-content />
|
|
385
|
+
`, isInline: true, styles: [".gui-codearea-toolbar{position:absolute;top:0;right:0;margin:2px}[dir=rtl] .gui-codearea-toolbar{left:0;right:auto}.gui-codearea-toolbar .gui-icon-button-wrapper{display:flex;flex-direction:column;gap:2px}.gui-codearea-toolbar .gui-icon-button-wrapper .mat-mdc-icon-button,.gui-codearea-toolbar .gui-icon-button-wrapper .mat-icon{width:1.25rem;height:1.25rem;line-height:1.25rem}.gui-codearea-toolbar .mat-mdc-icon-button{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:.25rem}.gui-codearea-toolbar .mat-mdc-icon-button .mat-mdc-button-persistent-ripple{border-radius:inherit}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
386
|
+
}
|
|
387
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: GuiCodeareaToolbar, decorators: [{
|
|
388
|
+
type: Component,
|
|
389
|
+
args: [{ selector: 'gui-codearea-toolbar', template: `
|
|
390
|
+
<ng-content />
|
|
391
|
+
`, host: {
|
|
392
|
+
class: 'gui-codearea-toolbar',
|
|
393
|
+
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".gui-codearea-toolbar{position:absolute;top:0;right:0;margin:2px}[dir=rtl] .gui-codearea-toolbar{left:0;right:auto}.gui-codearea-toolbar .gui-icon-button-wrapper{display:flex;flex-direction:column;gap:2px}.gui-codearea-toolbar .gui-icon-button-wrapper .mat-mdc-icon-button,.gui-codearea-toolbar .gui-icon-button-wrapper .mat-icon{width:1.25rem;height:1.25rem;line-height:1.25rem}.gui-codearea-toolbar .mat-mdc-icon-button{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:.25rem}.gui-codearea-toolbar .mat-mdc-icon-button .mat-mdc-button-persistent-ripple{border-radius:inherit}\n"] }]
|
|
394
|
+
}] });
|
|
395
|
+
|
|
383
396
|
class GuiCodeareaDialog {
|
|
384
397
|
dialogRef = inject(DialogRef);
|
|
385
398
|
data = inject(DIALOG_DATA);
|
|
@@ -417,7 +430,7 @@ class GuiCodeareaDialog {
|
|
|
417
430
|
this.dialogRef.close();
|
|
418
431
|
}
|
|
419
432
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: GuiCodeareaDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
420
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", 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 <
|
|
433
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", 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 <gui-codearea-toolbar>\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 </gui-codearea-toolbar>\n</div>\n", styles: [".gui-codearea-dialog-panel{--rnd-dialog-container-color: var(--mat-dialog-container-color, var(--mat-sys-surface, white))}.gui-codearea-dialog{--mat-button-outlined-label-text-size: .75rem;--mat-button-outlined-container-height: 1.5rem;--mat-button-outlined-horizontal-padding: .75rem;--mat-button-outlined-touch-target-display: none;--mat-button-filled-label-text-size: .75rem;--mat-button-filled-container-height: 1.5rem;--mat-button-filled-horizontal-padding: .75rem;--mat-button-filled-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 .gui-codearea-toolbar{display:none}.gui-codearea-dialog-content:hover .gui-codearea-toolbar{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[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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" }, { kind: "component", type: GuiCodeareaToolbar, selector: "gui-codearea-toolbar" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
421
434
|
}
|
|
422
435
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: GuiCodeareaDialog, decorators: [{
|
|
423
436
|
type: Component,
|
|
@@ -429,9 +442,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
429
442
|
RndDialogDragHandle,
|
|
430
443
|
CodeEditor,
|
|
431
444
|
GuiIconButtonWrapper,
|
|
445
|
+
GuiCodeareaToolbar,
|
|
432
446
|
], host: {
|
|
433
447
|
class: 'gui-codearea-dialog',
|
|
434
|
-
}, 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 <
|
|
448
|
+
}, 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 <gui-codearea-toolbar>\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 </gui-codearea-toolbar>\n</div>\n", styles: [".gui-codearea-dialog-panel{--rnd-dialog-container-color: var(--mat-dialog-container-color, var(--mat-sys-surface, white))}.gui-codearea-dialog{--mat-button-outlined-label-text-size: .75rem;--mat-button-outlined-container-height: 1.5rem;--mat-button-outlined-horizontal-padding: .75rem;--mat-button-outlined-touch-target-display: none;--mat-button-filled-label-text-size: .75rem;--mat-button-filled-container-height: 1.5rem;--mat-button-filled-horizontal-padding: .75rem;--mat-button-filled-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 .gui-codearea-toolbar{display:none}.gui-codearea-dialog-content:hover .gui-codearea-toolbar{display:block}\n"] }]
|
|
435
449
|
}], ctorParameters: () => [] });
|
|
436
450
|
|
|
437
451
|
class GuiCodearea {
|
|
@@ -476,11 +490,13 @@ class GuiCodearea {
|
|
|
476
490
|
}
|
|
477
491
|
value = '';
|
|
478
492
|
oldValue = '';
|
|
493
|
+
lineWrapping = false;
|
|
479
494
|
onChange = () => { };
|
|
480
495
|
onTouched = () => { };
|
|
481
496
|
constructor() {
|
|
482
497
|
const iconsRegistry = inject(GuiIconsRegistry);
|
|
483
498
|
iconsRegistry.add('expand');
|
|
499
|
+
iconsRegistry.add('wrap');
|
|
484
500
|
this.codeareaCfg.changes.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
|
|
485
501
|
this.cdr.markForCheck();
|
|
486
502
|
});
|
|
@@ -526,6 +542,9 @@ class GuiCodearea {
|
|
|
526
542
|
}
|
|
527
543
|
});
|
|
528
544
|
}
|
|
545
|
+
toggleLineWrapping() {
|
|
546
|
+
this.lineWrapping = !this.lineWrapping;
|
|
547
|
+
}
|
|
529
548
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: GuiCodearea, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
530
549
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: GuiCodearea, isStandalone: true, selector: "gui-codearea", inputs: { config: "config", disabled: "disabled", setup: "setup", height: "height", language: "language" }, host: { classAttribute: "gui-field gui-codearea" }, providers: [
|
|
531
550
|
{
|
|
@@ -533,7 +552,7 @@ class GuiCodearea {
|
|
|
533
552
|
useExisting: forwardRef(() => GuiCodearea),
|
|
534
553
|
multi: true,
|
|
535
554
|
},
|
|
536
|
-
], 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<
|
|
555
|
+
], 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 [lineWrapping]=\"lineWrapping\"\n (blur)=\"onValueChange()\"\n/>\n\n<gui-codearea-toolbar>\n <gui-icon-button-wrapper>\n <button mat-icon-button type=\"button\" (click)=\"onExpand()\">\n <mat-icon svgIcon=\"expand\" />\n </button>\n <button mat-icon-button type=\"button\" (click)=\"toggleLineWrapping()\">\n <mat-icon svgIcon=\"wrap\" />\n </button>\n </gui-icon-button-wrapper>\n</gui-codearea-toolbar>\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(--mat-form-field-outlined-outline-color, var(--mat-sys-outline));border-radius:var(--mat-form-field-outlined-container-shape, var(--mat-sys-corner-extra-small))}.gui-codearea .code-editor{width:100%;min-height:1.5rem;overflow:auto;resize:vertical}.gui-codearea .gui-codearea-toolbar{display:none}.gui-codearea:hover .gui-codearea-toolbar{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: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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" }, { kind: "component", type: GuiCodeareaToolbar, selector: "gui-codearea-toolbar" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
537
556
|
}
|
|
538
557
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: GuiCodearea, decorators: [{
|
|
539
558
|
type: Component,
|
|
@@ -553,7 +572,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
553
572
|
CodeEditor,
|
|
554
573
|
GuiFieldLabel,
|
|
555
574
|
GuiIconButtonWrapper,
|
|
556
|
-
|
|
575
|
+
GuiCodeareaToolbar,
|
|
576
|
+
], 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 [lineWrapping]=\"lineWrapping\"\n (blur)=\"onValueChange()\"\n/>\n\n<gui-codearea-toolbar>\n <gui-icon-button-wrapper>\n <button mat-icon-button type=\"button\" (click)=\"onExpand()\">\n <mat-icon svgIcon=\"expand\" />\n </button>\n <button mat-icon-button type=\"button\" (click)=\"toggleLineWrapping()\">\n <mat-icon svgIcon=\"wrap\" />\n </button>\n </gui-icon-button-wrapper>\n</gui-codearea-toolbar>\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(--mat-form-field-outlined-outline-color, var(--mat-sys-outline));border-radius:var(--mat-form-field-outlined-container-shape, var(--mat-sys-corner-extra-small))}.gui-codearea .code-editor{width:100%;min-height:1.5rem;overflow:auto;resize:vertical}.gui-codearea .gui-codearea-toolbar{display:none}.gui-codearea:hover .gui-codearea-toolbar{display:block}\n"] }]
|
|
557
577
|
}], ctorParameters: () => [], propDecorators: { config: [{
|
|
558
578
|
type: Input
|
|
559
579
|
}], disabled: [{
|
|
@@ -1795,6 +1815,7 @@ class GuiModule {
|
|
|
1795
1815
|
GuiTextarea,
|
|
1796
1816
|
GuiCodearea,
|
|
1797
1817
|
GuiCodeareaDialog,
|
|
1818
|
+
GuiCodeareaToolbar,
|
|
1798
1819
|
GuiFileUploader,
|
|
1799
1820
|
GuiIconButtonWrapper,
|
|
1800
1821
|
GuiEjsPipe,
|
|
@@ -1816,6 +1837,7 @@ class GuiModule {
|
|
|
1816
1837
|
GuiTextarea,
|
|
1817
1838
|
GuiCodearea,
|
|
1818
1839
|
GuiCodeareaDialog,
|
|
1840
|
+
GuiCodeareaToolbar,
|
|
1819
1841
|
GuiFileUploader,
|
|
1820
1842
|
GuiIconButtonWrapper,
|
|
1821
1843
|
GuiEjsPipe,
|
|
@@ -1890,6 +1912,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
1890
1912
|
GuiTextarea,
|
|
1891
1913
|
GuiCodearea,
|
|
1892
1914
|
GuiCodeareaDialog,
|
|
1915
|
+
GuiCodeareaToolbar,
|
|
1893
1916
|
GuiFileUploader,
|
|
1894
1917
|
GuiIconButtonWrapper,
|
|
1895
1918
|
GuiEjsPipe,
|
|
@@ -1914,6 +1937,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
1914
1937
|
GuiTextarea,
|
|
1915
1938
|
GuiCodearea,
|
|
1916
1939
|
GuiCodeareaDialog,
|
|
1940
|
+
GuiCodeareaToolbar,
|
|
1917
1941
|
GuiFileUploader,
|
|
1918
1942
|
GuiIconButtonWrapper,
|
|
1919
1943
|
GuiEjsPipe,
|
|
@@ -1930,5 +1954,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
1930
1954
|
* Generated bundle index. Do not edit.
|
|
1931
1955
|
*/
|
|
1932
1956
|
|
|
1933
|
-
export { GUI_ICONS_CONFIG, GuiButtonToggle, GuiCodearea, GuiCodeareaConfig, GuiCodeareaDialog, GuiCombobox, GuiEjsPipe, GuiFieldGroup, GuiFieldLabel, GuiFileUploader, GuiFileUploaderConfig, GuiFill, GuiFillPicker, GuiFlexDirective, GuiForm, GuiIcon, GuiIconButtonWrapper, GuiIconsRegistry, GuiImageSelect, GuiInlineGroup, GuiInputNumber, GuiInputText, GuiModule, GuiSelect, GuiSlider, GuiSwitch, GuiTextarea, compareValues, ejsTmpl, getModelFromConfig, getValueByPath, svgIcons };
|
|
1957
|
+
export { GUI_ICONS_CONFIG, GuiButtonToggle, GuiCodearea, GuiCodeareaConfig, GuiCodeareaDialog, GuiCodeareaToolbar, GuiCombobox, GuiEjsPipe, GuiFieldGroup, GuiFieldLabel, GuiFileUploader, GuiFileUploaderConfig, GuiFill, GuiFillPicker, GuiFlexDirective, GuiForm, GuiIcon, GuiIconButtonWrapper, GuiIconsRegistry, GuiImageSelect, GuiInlineGroup, GuiInputNumber, GuiInputText, GuiModule, GuiSelect, GuiSlider, GuiSwitch, GuiTextarea, compareValues, ejsTmpl, getModelFromConfig, getValueByPath, svgIcons };
|
|
1934
1958
|
//# sourceMappingURL=acrodata-gui.mjs.map
|