@tmdjr/ngx-editor-js2-codemirror 19.0.0 → 20.0.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.
@@ -37,11 +37,21 @@ class NgxEditorJs2CodemirrorComponent {
37
37
  this.codeMirrorOptions.update((prev) => ({ ...prev, mode: action }));
38
38
  this.savedAction.update(() => action);
39
39
  }
40
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NgxEditorJs2CodemirrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
41
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.5", type: NgxEditorJs2CodemirrorComponent, isStandalone: true, selector: "ngx-editor-js2-codemirror", inputs: { sortIndex: { classPropertyName: "sortIndex", publicName: "sortIndex", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, formControlName: { classPropertyName: "formControlName", publicName: "formControlName", isSignal: true, isRequired: true, transformFunction: null }, blockOptionActions: { classPropertyName: "blockOptionActions", publicName: "blockOptionActions", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "cdk-drag-animating no-toolbar-inline" }, hostDirectives: [{ directive: i1.CdkDrag }], ngImport: i0, template: `
40
+ // ! Hotfix for perspective: 2500px;
41
+ // Need create a delay to wait for the animation to finish before showing the component
42
+ waitForAnimation = signal(false);
43
+ constructor() {
44
+ setTimeout(() => {
45
+ this.waitForAnimation.update(() => true);
46
+ }, 500);
47
+ }
48
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: NgxEditorJs2CodemirrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
49
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: NgxEditorJs2CodemirrorComponent, isStandalone: true, selector: "ngx-editor-js2-codemirror", inputs: { sortIndex: { classPropertyName: "sortIndex", publicName: "sortIndex", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, formControlName: { classPropertyName: "formControlName", publicName: "formControlName", isSignal: true, isRequired: true, transformFunction: null }, blockOptionActions: { classPropertyName: "blockOptionActions", publicName: "blockOptionActions", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "cdk-drag-animating no-toolbar-inline" }, hostDirectives: [{ directive: i1.CdkDrag }], ngImport: i0, template: `
50
+ @if( waitForAnimation() ) {
42
51
  <ng-container [formGroup]="formGroup()">
43
52
  <span controlAccessor [autofocus]="autofocus()"></span>
44
53
  <ngx-codemirror
54
+ class="fade-in"
45
55
  toolbarFab
46
56
  [actionCallback]="actionCallbackBind"
47
57
  [blockOptionActions]="blockOptionActions()"
@@ -50,9 +60,10 @@ class NgxEditorJs2CodemirrorComponent {
50
60
  [options]="codeMirrorOptions()"
51
61
  ></ngx-codemirror>
52
62
  </ng-container>
53
- `, isInline: true, styles: [":host{display:block;position:relative;margin:1.5rem 0}:host .codemirror-container-overlay{display:flex;height:100%;width:100%;position:absolute}:host ::ng-deep .CodeMirror{font-family:Cascadia Code,Fira Code,Menlo,Monaco,Courier New,monospace;font-size:16px;font-weight:400;line-height:32px;letter-spacing:.5px;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: ControlAccessorDirective, selector: "[controlAccessor]", inputs: ["defaultValue"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus]", inputs: ["autofocus"] }, { kind: "directive", type: ToolbarFabDirective, selector: "[toolbarFab]", inputs: ["autofocus", "blockOptionActions", "actionCallback", "componentContextPositionIndex", "formControlName"] }, { kind: "ngmodule", type: CodemirrorModule }, { kind: "component", type: i3.CodemirrorComponent, selector: "ngx-codemirror", inputs: ["className", "name", "autoFocus", "options", "preserveScrollPosition"], outputs: ["cursorActivity", "focusChange", "scroll", "drop", "codeMirrorLoaded"] }] });
63
+ }
64
+ `, isInline: true, styles: [":host{display:block;position:relative;margin:1.5rem 0}:host .codemirror-container-overlay{display:flex;height:100%;width:100%;position:absolute}:host .fade-in{animation:fadeIn .25s ease-in-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}:host ::ng-deep .CodeMirror{font-family:Cascadia Code,Fira Code,Menlo,Monaco,Courier New,monospace;font-size:16px;font-weight:400;line-height:32px;letter-spacing:.5px;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: ControlAccessorDirective, selector: "[controlAccessor]", inputs: ["defaultValue"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus]", inputs: ["autofocus"] }, { kind: "directive", type: ToolbarFabDirective, selector: "[toolbarFab]", inputs: ["autofocus", "blockOptionActions", "actionCallback", "componentContextPositionIndex", "formControlName"] }, { kind: "ngmodule", type: CodemirrorModule }, { kind: "component", type: i3.CodemirrorComponent, selector: "ngx-codemirror", inputs: ["className", "name", "autoFocus", "options", "preserveScrollPosition"], outputs: ["cursorActivity", "focusChange", "scroll", "drop", "codeMirrorLoaded"] }] });
54
65
  }
55
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NgxEditorJs2CodemirrorComponent, decorators: [{
66
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: NgxEditorJs2CodemirrorComponent, decorators: [{
56
67
  type: Component,
57
68
  args: [{ selector: 'ngx-editor-js2-codemirror', host: { class: 'cdk-drag-animating no-toolbar-inline' }, hostDirectives: [CdkDrag], imports: [
58
69
  CommonModule,
@@ -62,9 +73,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
62
73
  ToolbarFabDirective,
63
74
  CodemirrorModule,
64
75
  ], template: `
76
+ @if( waitForAnimation() ) {
65
77
  <ng-container [formGroup]="formGroup()">
66
78
  <span controlAccessor [autofocus]="autofocus()"></span>
67
79
  <ngx-codemirror
80
+ class="fade-in"
68
81
  toolbarFab
69
82
  [actionCallback]="actionCallbackBind"
70
83
  [blockOptionActions]="blockOptionActions()"
@@ -73,8 +86,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
73
86
  [options]="codeMirrorOptions()"
74
87
  ></ngx-codemirror>
75
88
  </ng-container>
76
- `, styles: [":host{display:block;position:relative;margin:1.5rem 0}:host .codemirror-container-overlay{display:flex;height:100%;width:100%;position:absolute}:host ::ng-deep .CodeMirror{font-family:Cascadia Code,Fira Code,Menlo,Monaco,Courier New,monospace;font-size:16px;font-weight:400;line-height:32px;letter-spacing:.5px;height:100%}\n"] }]
77
- }] });
89
+ }
90
+ `, styles: [":host{display:block;position:relative;margin:1.5rem 0}:host .codemirror-container-overlay{display:flex;height:100%;width:100%;position:absolute}:host .fade-in{animation:fadeIn .25s ease-in-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}:host ::ng-deep .CodeMirror{font-family:Cascadia Code,Fira Code,Menlo,Monaco,Courier New,monospace;font-size:16px;font-weight:400;line-height:32px;letter-spacing:.5px;height:100%}\n"] }]
91
+ }], ctorParameters: () => [] });
78
92
 
79
93
  /*
80
94
  * Public API Surface of ngx-editor-js2-codemirror
@@ -1 +1 @@
1
- {"version":3,"file":"tmdjr-ngx-editor-js2-codemirror.mjs","sources":["../../../projects/ngx-editor-js2-codemirror/src/lib/ngx-editor-js2-codemirror.component.ts","../../../projects/ngx-editor-js2-codemirror/src/public-api.ts","../../../projects/ngx-editor-js2-codemirror/src/tmdjr-ngx-editor-js2-codemirror.ts"],"sourcesContent":["import { Component, input, signal } from '@angular/core';\nimport { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { CdkDrag } from '@angular/cdk/drag-drop';\nimport { CodemirrorModule } from '@ctrl/ngx-codemirror';\n\nimport {\n AutofocusDirective,\n BlockComponent,\n BlockOptionAction,\n ControlAccessorDirective,\n ToolbarFabDirective,\n} from '@tmdjr/ngx-editor-js2';\nimport { CommonModule } from '@angular/common';\n\n@Component({\n selector: 'ngx-editor-js2-codemirror',\n host: { class: 'cdk-drag-animating no-toolbar-inline' },\n hostDirectives: [CdkDrag],\n imports: [\n CommonModule,\n ReactiveFormsModule,\n ControlAccessorDirective,\n AutofocusDirective,\n ToolbarFabDirective,\n CodemirrorModule,\n ],\n template: `\n <ng-container [formGroup]=\"formGroup()\">\n <span controlAccessor [autofocus]=\"autofocus()\"></span>\n <ngx-codemirror\n toolbarFab\n [actionCallback]=\"actionCallbackBind\"\n [blockOptionActions]=\"blockOptionActions()\"\n [formControlName]=\"formControlName()\"\n [componentContextPositionIndex]=\"sortIndex()\"\n [options]=\"codeMirrorOptions()\"\n ></ngx-codemirror>\n </ng-container>\n `,\n styles: [\n `\n :host {\n display: block;\n position: relative;\n margin: 1.5rem 0;\n .codemirror-container-overlay {\n display: flex;\n height: 100%;\n width: 100%;\n position: absolute;\n }\n }\n\n :host ::ng-deep .CodeMirror {\n font-family: Cascadia Code, Fira Code, Menlo, Monaco, 'Courier New',\n monospace;\n font-size: 16px;\n font-weight: 400;\n line-height: 32px;\n letter-spacing: 0.5px;\n height: 100%;\n }\n `,\n ],\n})\nexport class NgxEditorJs2CodemirrorComponent implements BlockComponent {\n sortIndex = input<number>(0);\n componentInstanceName = 'NgxEditorJs2CodemirrorComponent';\n autofocus = input<boolean>(true);\n formGroup = input.required<FormGroup>();\n formControlName = input.required<string>();\n blockOptionActions = input<BlockOptionAction[]>([\n { action: 'text/typescript', icon: 'javascript' },\n { action: 'css', icon: 'css' },\n { action: 'xml', icon: 'html' },\n ]);\n\n codeMirrorOptions = signal({\n lineNumbers: true,\n theme: 'material-palenight',\n mode: 'text/typescript',\n extraKeys: { 'Ctrl-Space': 'autocomplete' },\n styleActiveLine: true, // Highlight active line\n matchBrackets: true,\n indentUnit: 2,\n tabSize: 2,\n cursorScrollMargin: 5,\n });\n\n savedAction = signal<string>('display-large');\n actionCallbackBind = this.actionCallback.bind(this);\n\n actionCallback(action: string) {\n this.codeMirrorOptions.update((prev) => ({ ...prev, mode: action }));\n this.savedAction.update(() => action);\n }\n}\n","/*\n * Public API Surface of ngx-editor-js2-codemirror\n */\n\nexport * from './lib/ngx-editor-js2-codemirror.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"tmdjr-ngx-editor-js2-codemirror.mjs","sources":["../../../projects/ngx-editor-js2-codemirror/src/lib/ngx-editor-js2-codemirror.component.ts","../../../projects/ngx-editor-js2-codemirror/src/public-api.ts","../../../projects/ngx-editor-js2-codemirror/src/tmdjr-ngx-editor-js2-codemirror.ts"],"sourcesContent":["import { Component, input, signal } from '@angular/core';\nimport { FormGroup, ReactiveFormsModule } from '@angular/forms';\nimport { CdkDrag } from '@angular/cdk/drag-drop';\nimport { CodemirrorModule } from '@ctrl/ngx-codemirror';\n\nimport {\n AutofocusDirective,\n BlockComponent,\n BlockOptionAction,\n ControlAccessorDirective,\n ToolbarFabDirective,\n} from '@tmdjr/ngx-editor-js2';\nimport { CommonModule } from '@angular/common';\n\n@Component({\n selector: 'ngx-editor-js2-codemirror',\n host: { class: 'cdk-drag-animating no-toolbar-inline' },\n hostDirectives: [CdkDrag],\n imports: [\n CommonModule,\n ReactiveFormsModule,\n ControlAccessorDirective,\n AutofocusDirective,\n ToolbarFabDirective,\n CodemirrorModule,\n ],\n template: `\n @if( waitForAnimation() ) {\n <ng-container [formGroup]=\"formGroup()\">\n <span controlAccessor [autofocus]=\"autofocus()\"></span>\n <ngx-codemirror\n class=\"fade-in\"\n toolbarFab\n [actionCallback]=\"actionCallbackBind\"\n [blockOptionActions]=\"blockOptionActions()\"\n [formControlName]=\"formControlName()\"\n [componentContextPositionIndex]=\"sortIndex()\"\n [options]=\"codeMirrorOptions()\"\n ></ngx-codemirror>\n </ng-container>\n }\n `,\n styles: [\n `\n :host {\n display: block;\n position: relative;\n margin: 1.5rem 0;\n .codemirror-container-overlay {\n display: flex;\n height: 100%;\n width: 100%;\n position: absolute;\n }\n }\n\n :host .fade-in {\n animation: fadeIn 0.25s ease-in-out;\n }\n\n @keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n\n :host ::ng-deep .CodeMirror {\n font-family: Cascadia Code, Fira Code, Menlo, Monaco, 'Courier New',\n monospace;\n font-size: 16px;\n font-weight: 400;\n line-height: 32px;\n letter-spacing: 0.5px;\n height: 100%;\n }\n `,\n ],\n})\nexport class NgxEditorJs2CodemirrorComponent implements BlockComponent {\n sortIndex = input<number>(0);\n componentInstanceName = 'NgxEditorJs2CodemirrorComponent';\n autofocus = input<boolean>(true);\n formGroup = input.required<FormGroup>();\n formControlName = input.required<string>();\n blockOptionActions = input<BlockOptionAction[]>([\n { action: 'text/typescript', icon: 'javascript' },\n { action: 'css', icon: 'css' },\n { action: 'xml', icon: 'html' },\n ]);\n\n codeMirrorOptions = signal({\n lineNumbers: true,\n theme: 'material-palenight',\n mode: 'text/typescript',\n extraKeys: { 'Ctrl-Space': 'autocomplete' },\n styleActiveLine: true, // Highlight active line\n matchBrackets: true,\n indentUnit: 2,\n tabSize: 2,\n cursorScrollMargin: 5,\n });\n\n savedAction = signal<string>('display-large');\n actionCallbackBind = this.actionCallback.bind(this);\n\n actionCallback(action: string) {\n this.codeMirrorOptions.update((prev) => ({ ...prev, mode: action }));\n this.savedAction.update(() => action);\n }\n\n // ! Hotfix for perspective: 2500px;\n // Need create a delay to wait for the animation to finish before showing the component\n waitForAnimation = signal<boolean>(false);\n constructor() {\n setTimeout(() => {\n this.waitForAnimation.update(() => true);\n }, 500);\n }\n}\n","/*\n * Public API Surface of ngx-editor-js2-codemirror\n */\n\nexport * from './lib/ngx-editor-js2-codemirror.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
package/index.d.ts CHANGED
@@ -1,5 +1,35 @@
1
- /**
2
- * Generated bundle index. Do not edit.
3
- */
4
- /// <amd-module name="@tmdjr/ngx-editor-js2-codemirror" />
5
- export * from './public-api';
1
+ import * as _angular_core from '@angular/core';
2
+ import { FormGroup } from '@angular/forms';
3
+ import { BlockComponent, BlockOptionAction } from '@tmdjr/ngx-editor-js2';
4
+ import * as i1 from '@angular/cdk/drag-drop';
5
+
6
+ declare class NgxEditorJs2CodemirrorComponent implements BlockComponent {
7
+ sortIndex: _angular_core.InputSignal<number>;
8
+ componentInstanceName: string;
9
+ autofocus: _angular_core.InputSignal<boolean>;
10
+ formGroup: _angular_core.InputSignal<FormGroup<any>>;
11
+ formControlName: _angular_core.InputSignal<string>;
12
+ blockOptionActions: _angular_core.InputSignal<BlockOptionAction[]>;
13
+ codeMirrorOptions: _angular_core.WritableSignal<{
14
+ lineNumbers: boolean;
15
+ theme: string;
16
+ mode: string;
17
+ extraKeys: {
18
+ 'Ctrl-Space': string;
19
+ };
20
+ styleActiveLine: boolean;
21
+ matchBrackets: boolean;
22
+ indentUnit: number;
23
+ tabSize: number;
24
+ cursorScrollMargin: number;
25
+ }>;
26
+ savedAction: _angular_core.WritableSignal<string>;
27
+ actionCallbackBind: (action: string) => void;
28
+ actionCallback(action: string): void;
29
+ waitForAnimation: _angular_core.WritableSignal<boolean>;
30
+ constructor();
31
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxEditorJs2CodemirrorComponent, never>;
32
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgxEditorJs2CodemirrorComponent, "ngx-editor-js2-codemirror", never, { "sortIndex": { "alias": "sortIndex"; "required": false; "isSignal": true; }; "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; "formGroup": { "alias": "formGroup"; "required": true; "isSignal": true; }; "formControlName": { "alias": "formControlName"; "required": true; "isSignal": true; }; "blockOptionActions": { "alias": "blockOptionActions"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.CdkDrag; inputs: {}; outputs: {}; }]>;
33
+ }
34
+
35
+ export { NgxEditorJs2CodemirrorComponent };
package/package.json CHANGED
@@ -1,9 +1,14 @@
1
1
  {
2
2
  "name": "@tmdjr/ngx-editor-js2-codemirror",
3
- "version": "19.0.0",
3
+ "version": "20.0.0",
4
4
  "peerDependencies": {
5
- "@angular/common": "^19.1.0",
6
- "@angular/core": "^19.1.0"
5
+ "@angular/animations": "^20.0.4",
6
+ "@angular/cdk": "^20.0.3",
7
+ "@angular/common": "^20.0.4",
8
+ "@angular/compiler": "^20.0.4",
9
+ "@angular/core": "^20.0.4",
10
+ "@angular/forms": "^20.0.4",
11
+ "@angular/material": "^20.0.3"
7
12
  },
8
13
  "dependencies": {
9
14
  "tslib": "^2.3.0"
@@ -0,0 +1 @@
1
+ // ngx-editor-js2-codemirror.cdk-drag-preview { }
@@ -0,0 +1 @@
1
+ // ngx-editor-js2-codemirror.cdk-drag-preview { }
@@ -1,30 +0,0 @@
1
- import { FormGroup } from '@angular/forms';
2
- import { BlockComponent, BlockOptionAction } from '@tmdjr/ngx-editor-js2';
3
- import * as i0 from "@angular/core";
4
- import * as i1 from "@angular/cdk/drag-drop";
5
- export declare class NgxEditorJs2CodemirrorComponent implements BlockComponent {
6
- sortIndex: import("@angular/core").InputSignal<number>;
7
- componentInstanceName: string;
8
- autofocus: import("@angular/core").InputSignal<boolean>;
9
- formGroup: import("@angular/core").InputSignal<FormGroup<any>>;
10
- formControlName: import("@angular/core").InputSignal<string>;
11
- blockOptionActions: import("@angular/core").InputSignal<BlockOptionAction[]>;
12
- codeMirrorOptions: import("@angular/core").WritableSignal<{
13
- lineNumbers: boolean;
14
- theme: string;
15
- mode: string;
16
- extraKeys: {
17
- 'Ctrl-Space': string;
18
- };
19
- styleActiveLine: boolean;
20
- matchBrackets: boolean;
21
- indentUnit: number;
22
- tabSize: number;
23
- cursorScrollMargin: number;
24
- }>;
25
- savedAction: import("@angular/core").WritableSignal<string>;
26
- actionCallbackBind: (action: string) => void;
27
- actionCallback(action: string): void;
28
- static ɵfac: i0.ɵɵFactoryDeclaration<NgxEditorJs2CodemirrorComponent, never>;
29
- static ɵcmp: i0.ɵɵComponentDeclaration<NgxEditorJs2CodemirrorComponent, "ngx-editor-js2-codemirror", never, { "sortIndex": { "alias": "sortIndex"; "required": false; "isSignal": true; }; "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; "formGroup": { "alias": "formGroup"; "required": true; "isSignal": true; }; "formControlName": { "alias": "formControlName"; "required": true; "isSignal": true; }; "blockOptionActions": { "alias": "blockOptionActions"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.CdkDrag; inputs: {}; outputs: {}; }]>;
30
- }
package/public-api.d.ts DELETED
@@ -1 +0,0 @@
1
- export * from './lib/ngx-editor-js2-codemirror.component';