@drayman/elements 1.4.30 → 1.6.0

package/dist/types/code-editor/src/app/models/code-editor-options.d.ts

@@ -0,0 +1,29 @@
+export interface DraymanCodeEditor {
+    /**
+     * The language of the code editor.
+     * By default, the language is set to 'javascript'.
+     */
+    language?: 'javascript' | 'json' | 'sql';
+    /**
+     * Wether code editor should be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Wether code editor should be read only.
+     */
+    readOnly?: boolean;
+    /**
+     * Value of the code editor.
+     */
+    value?: string;
+    /**
+     * Executed with an input value from user.
+     */
+    onValueChange?: ElementEvent<{
+        value: string;
+    }>;
+    /**
+     * Label shown above the editor.
+     */
+    label?: string;
+}

package/dist/types/nebula/src/app/models/nebula-options.d.ts

@@ -3,38 +3,35 @@ export interface DraymanNebula {
      * Executed when user makes selections.
      */
     onSelections?: ElementEvent<{
-        value: {
-            selections: any;
-            method: 'selectHyperCubeValues' | 'rangeSelectHyperCubeValues';
-        };
+        selections: any;
+        method: 'selectHyperCubeValues' | 'rangeSelectHyperCubeValues';
     }>;
     /**
      * Executed when viz method must be called.
      */
     onVizMethod?: ElementEvent<{
-        value: {
-            args: any;
-            name: 'getEffectiveProperties' | 'getHyperCubeReducedData' | 'getHyperCubeData';
-        };
+        args: any;
+        name: 'getEffectiveProperties' | 'getHyperCubeReducedData' | 'getHyperCubeData';
     }>;
     /**
      * Executed when measure needs to be returned
      */
     onGetMeasure?: ElementEvent<{
-        value: {
-            measureId: string;
-        };
+        measureId: string;
     }>;
     /**
      * Executed when object needs to be returned
      */
     onGetObject?: ElementEvent<{
-        value: {
-            objectId: string;
-        };
+        objectId: string;
     }>;
     /**
      * Initial qLayout of the object to render.
      */
     qLayout: any;
+    /**
+     * Custom JSON theme for the viz.
+     * Structure can be found here - https://help.qlik.com/en-US/sense-developer/Subsystems/Extensions/Content/Sense_Extensions/CustomThemes/custom-themes-properties.htm.
+     */
+    theme: any;
 }

package/dist/types/ngx-graph/src/app/models/ngx-graph-options.d.ts

@@ -27,4 +27,18 @@ export interface DraymanNgxGraph {
      * Automatically zoom the graph to fit in the avialable viewport when the graph is updated.
      */
     autoZoom?: boolean;
+    /**
+     * Executed when user clicks on a node.
+     */
+    onNodeClick?: ElementEvent<{
+        nodeId: any;
+    }>;
+    /**
+     * Executed when user clicks on a link.
+     * Emits IDs of the source and target nodes.
+     */
+    onLinkClick?: ElementEvent<{
+        sourceNodeId: any;
+        targetNodeId: any;
+    }>;
 }

package/dist/types/select/src/app/models/select-options.d.ts

@@ -22,4 +22,8 @@ export interface DraymanSelect extends FieldOptionsBase<any> {
      * Whether the user should be allowed to select multiple options.
      */
     multiple?: boolean;
+    /**
+     * Whether clearing of the select field should be disabled.
+     */
+    allowSelectionClear?: boolean;
 }

package/dist/types/table/src/app/models/table-options.d.ts

@@ -276,6 +276,7 @@ export interface DraymanTableFileUploaderCell extends DraymanTableCellBase<strin
 }
 export interface DraymanTableTextFieldCell extends DraymanTableCellBase<string>, InputMaskOptionsBase {
     type: 'text-field';
+    inputType?: 'text' | 'password';
     /**
      * Error text to be shown underneath the form field control.
      */

package/dist/types/text-field/src/app/models/text-field-options.d.ts

@@ -2,4 +2,5 @@ import { InputMaskOptionsBase } from '../../../../shared/models/input-mask-optio
 import { AutocompleteOptionsBase } from '../../../../shared/models/autocomplete-options-base';
 import { InputFieldOptionsBase } from '../../../../shared/models/input-field-options-base';
 export interface DraymanTextField extends InputFieldOptionsBase<string>, AutocompleteOptionsBase<string>, InputMaskOptionsBase {
+    type?: 'text' | 'password';
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drayman/elements",
-  "version": "1.4.30",
+  "version": "1.6.0",
   "description": "A collection of web components for Drayman.",
   "license": "MIT",
   "keywords": [
@@ -12,7 +12,8 @@
     "build:types": "tsc -p ./tsconfig.types.json",
     "typedoc": "npm run build:types && typedoc --tsconfig ./tsconfig.types.json",
     "lint": "ng lint",
-    "build": "npm run build:button && npm run build:text-field && npm run build:claviz-charts && npm run build:file-uploader && npm run build:number-field && npm run build:select && npm run build:table && npm run build:checkbox && npm run build:textarea-field && npm run build:radio-group && npm run build:datepicker && npm run build:timepicker && npm run build:pdf-viewer && npm run build:ngx-charts && npm run build:menu && npm run build:ngx-graph && npm run build:youtube-player && npm run build:nebula && npm run build:grid && npm run build:picasso && npm run typedoc",
+    "build": "npm run build:code-editor && npm run build:button && npm run build:text-field && npm run build:claviz-charts && npm run build:file-uploader && npm run build:number-field && npm run build:select && npm run build:table && npm run build:checkbox && npm run build:textarea-field && npm run build:radio-group && npm run build:datepicker && npm run build:timepicker && npm run build:pdf-viewer && npm run build:ngx-charts && npm run build:menu && npm run build:ngx-graph && npm run build:youtube-player && npm run build:nebula && npm run build:grid && npm run build:picasso && npm run typedoc",
+    "build:code-editor": "ng build code-editor --prod --single-bundle --output-hashing=none",
     "build:button": "ng build button --prod --single-bundle --output-hashing=none",
     "build:text-field": "ng build text-field --prod --single-bundle --output-hashing=none",
     "build:claviz-charts": "ng build claviz-charts --prod --single-bundle --output-hashing=none",
@@ -46,6 +47,9 @@
       "drayman-button": {
         "script": "./dist/button/main.js"
       },
+      "drayman-code-editor": {
+        "script": "./dist/code-editor/main.js"
+      },
       "drayman-claviz-charts": {
         "script": "./dist/claviz-charts/main.js"
       },
@@ -118,6 +122,7 @@
     "@angular/youtube-player": "^10.1.0",
     "@babel/core": "^7.11.5",
     "@compodoc/compodoc": "^1.1.11",
+    "@ctrl/ngx-codemirror": "^4.1.1",
     "@drayman/types": "latest",
     "@nebula.js/stardust": "2.3.1",
     "@ngneat/spectator": "^5.13.2",
@@ -131,6 +136,7 @@
     "babel-loader": "^8.1.0",
     "claviz-charts": "0.5.0",
     "codelyzer": "6.0.0",
+    "codemirror": "^5.65.2",
     "d3-require": "^1.2.4",
     "dayjs": "^1.9.6",
     "deepmerge": "4.2.2",
@@ -141,6 +147,8 @@
     "filepond-plugin-get-file": "1.0.6",
     "jest": "26.4.2",
     "jest-preset-angular": "^8.3.1",
+    "jshint": "^2.13.4",
+    "jsonlint": "^1.6.3",
     "mat-single-overlay": "^0.0.2",
     "ng-lazyload-image": "9.1.0",
     "ng2-date-picker": "^10.0.1",

package/types/index.d.ts

@@ -17,6 +17,7 @@ import { DraymanTimepicker } from '../dist/types/timepicker/src/app/models/timep
 import { DraymanYoutubePlayer } from '../dist/types/youtube-player/src/app/models/youtube-player-options';
 import { DraymanNebula } from '../dist/types/nebula/src/app/models/nebula-options';
 import { DraymanGrid } from '../dist/types/grid/src/app/models/grid-options';
+import { DraymanCodeEditor } from '../dist/types/code-editor/src/app/models/code-editor-options';
 
 declare global {
     interface DraymanElementsProps {
@@ -338,6 +339,35 @@ declare global {
      * ```
      */
     interface DraymanDatepickerProps extends DraymanDatepicker, DraymanElementsProps { }
+    /**
+     * # <drayman-code-editor \/>
+     *
+     * Code Editor powered by [CodeMirror](https://codemirror.net/) library.
+     *
+     * ## Example of usage
+     *
+     * ```typescript
+     * export const component: DraymanComponent = async ({ forceUpdate }) => {
+     *     let code = `console.log('Hello, World!')`;
+     * 
+     *     return () => {
+     * 
+     *         return (
+     *             <drayman-code-editor
+     *                 label="Amazing code"
+     *                 language="javascript"
+     *                 value={code}
+     *                 onValueChange={async ({ value }) => {
+     *                     code = value;
+     *                     await forceUpdate();
+     *                 }}
+     *             />
+     *         );
+     *     }
+     * }
+     * ```
+     */
+    interface DraymanCodeEditorProps extends DraymanCodeEditor, DraymanElementsProps { }
     /**
      * # <drayman-file-uploader \/>
      *
@@ -1137,6 +1167,7 @@ declare global {
             'drayman-youtube-player': DraymanYoutubePlayerProps;
             'drayman-nebula': DraymanNebulaProps;
             'drayman-grid': DraymanGridProps;
+            'drayman-code-editor': DraymanCodeEditorProps;
         }
     }
 }