@acrodata/gui 3.4.0 → 3.5.0

package/fill/fill.scss

@@ -3,9 +3,20 @@
   display: inline-block;
   width: 1.5rem;
   height: 1.5rem;
+  padding: 0;
+  border: none;
   background-color: #fff;
   background-image: conic-gradient(transparent 25%, #ccc 25% 50%, transparent 50% 75%, #ccc 75%);
   background-size: 0.5rem 0.5rem;
+  outline: none;
+  cursor: pointer;
+
+  &:hover,
+  &:focus {
+    .gui-color-block-bg::after {
+      opacity: 0.4;
+    }
+  }
 }
 
 .gui-color-block-bg {
@@ -15,15 +26,16 @@
 
   // use the pseudo-elements `::after` to simulate the border for color-block
   &::after {
+    content: '';
     display: inline-block;
     width: 100%;
     height: 100%;
     box-sizing: border-box;
-    border: 1px solid currentColor;
+    border: 1px solid #fff;
     border-top-left-radius: var(--mat-form-field-filled-container-shape, var(--mat-sys-corner-extra-small));
     border-bottom-left-radius: var(--mat-form-field-filled-container-shape, var(--mat-sys-corner-extra-small));
-    opacity: 0.24;
-    content: '';
+    mix-blend-mode: difference;
+    opacity: 0.2;
 
     [dir='rtl'] & {
       border-radius: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acrodata/gui",
-  "version": "3.4.0",
+  "version": "3.5.0",
   "description": "JSON powered GUI for configurable panels.",
   "publishConfig": {
     "access": "public"
@@ -40,7 +40,7 @@
   },
   "dependencies": {
     "@acrodata/code-editor": "^0.6.0",
-    "@acrodata/gradient-picker": "^0.14.0",
+    "@acrodata/gradient-picker": "^0.15.0",
     "@acrodata/rnd-dialog": "^0.7.0",
     "tslib": "^2.3.0"
   },

package/types/acrodata-gui.d.ts

@@ -15,16 +15,16 @@ import * as i11 from '@angular/material/tabs';
 import * as i12 from '@angular/material/expansion';
 import * as i13 from '@angular/material/tooltip';
 import * as i14 from '@ng-matero/extensions/colorpicker';
+import { MtxColorpicker } from '@ng-matero/extensions/colorpicker';
 import * as i15 from '@ng-matero/extensions/select';
 import { MtxSelect } from '@ng-matero/extensions/select';
 import * as rxjs from 'rxjs';
 import { Subscription, Subject } from 'rxjs';
-import * as _codemirror_state from '@codemirror/state';
-import { Extension } from '@codemirror/state';
 import * as _acrodata_code_editor from '@acrodata/code-editor';
 import { Setup, Theme } from '@acrodata/code-editor';
 import * as _codemirror_language from '@codemirror/language';
 import { LanguageDescription } from '@codemirror/language';
+import { Extension } from '@codemirror/state';
 import { HttpClient } from '@angular/common/http';
 
 type GuiFieldType = 'group' | 'inline' | 'tabs' | 'tab' | 'menu' | 'menuItem' | 'text' | 'number' | 'switch' | 'slider' | 'fill' | 'select' | 'buttonToggle' | 'imageSelect' | 'combobox' | 'textarea' | 'codearea' | 'hidden' | 'image' | 'video' | 'audio' | 'file';
@@ -266,6 +266,7 @@ declare class GuiButtonToggle implements ControlValueAccessor {
 
 declare class GuiFill implements ControlValueAccessor, OnChanges {
     private cdr;
+    colorpicker?: MtxColorpicker;
     config: Partial<GuiControl>;
     disabled: boolean;
     type: GuiFillMode;
@@ -278,6 +279,7 @@ declare class GuiFill implements ControlValueAccessor, OnChanges {
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     onValueChange(): void;
+    openColorPicker(e: PointerEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<GuiFill, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<GuiFill, "gui-fill", never, { "config": { "alias": "config"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "type": { "alias": "type"; "required": false; }; }, {}, never, never, true, never>;
 }
@@ -286,6 +288,7 @@ declare class GuiFillPicker implements ControlValueAccessor, OnChanges {
     private cdr;
     disabled: boolean;
     type: GuiFillMode;
+    valueChangeComplete: EventEmitter<string>;
     types: {
         label: string;
         value: string;
@@ -307,12 +310,13 @@ declare class GuiFillPicker implements ControlValueAccessor, OnChanges {
     getTypeFromModel(value: string): void;
     getValueFromModel(value: string): void;
     onTypeChange(): void;
-    onColorChange(): void;
     onSolidChange(): void;
+    onSolidChangeComplete(): void;
     onGradientChange(): void;
+    onGradientChangeComplete(): void;
     onImageChange(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<GuiFillPicker, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<GuiFillPicker, "gui-fill-picker", never, { "disabled": { "alias": "disabled"; "required": false; }; "type": { "alias": "type"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<GuiFillPicker, "gui-fill-picker", never, { "disabled": { "alias": "disabled"; "required": false; }; "type": { "alias": "type"; "required": false; }; }, { "valueChangeComplete": "valueChangeComplete"; }, never, never, true, never>;
 }
 
 declare class GuiFieldGroup implements OnInit, DoCheck {
@@ -404,6 +408,7 @@ interface GuiCodeareaDialogData {
     readonly?: boolean;
     language?: string;
     title?: string;
+    extensions?: Extension[];
 }
 declare class GuiCodeareaDialog {
     private dialogRef;
@@ -413,7 +418,6 @@ declare class GuiCodeareaDialog {
     private codeareaCfg;
     get languages(): _codemirror_language.LanguageDescription[];
     get theme(): _acrodata_code_editor.Theme;
-    get extensions(): _codemirror_state.Extension[];
     langDesc: _codemirror_language.LanguageDescription | undefined;
     title: string;
     lineWrapping: boolean;
@@ -439,10 +443,12 @@ declare class GuiCodearea implements ControlValueAccessor {
     get language(): string;
     set language(value: string);
     private _language;
+    get extensions(): Extension[];
+    set extensions(value: Extension[]);
+    private _extensions;
     get languages(): _codemirror_language.LanguageDescription[];
     get theme(): _acrodata_code_editor.Theme;
     get dialogData(): GuiCodeareaDialogData;
-    get extensions(): _codemirror_state.Extension[];
     value: string;
     private oldValue;
     lineWrapping: boolean;
@@ -457,7 +463,7 @@ declare class GuiCodearea implements ControlValueAccessor {
     onExpand(): void;
     toggleLineWrapping(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<GuiCodearea, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<GuiCodearea, "gui-codearea", never, { "config": { "alias": "config"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "setup": { "alias": "setup"; "required": false; }; "height": { "alias": "height"; "required": false; }; "language": { "alias": "language"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<GuiCodearea, "gui-codearea", never, { "config": { "alias": "config"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "setup": { "alias": "setup"; "required": false; }; "height": { "alias": "height"; "required": false; }; "language": { "alias": "language"; "required": false; }; "extensions": { "alias": "extensions"; "required": false; }; }, {}, never, never, true, never>;
 }
 
 declare class GuiCodeareaToolbar {