@acrodata/gui 3.3.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/icon-button-wrapper/icon-button-wrapper.scss

@@ -16,6 +16,8 @@
     align-items: center;
     width: 1.5rem;
     height: 1.5rem;
+    font-size: 0.875rem;
+    line-height: 1.5rem;
 
     svg {
       width: 0.875rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acrodata/gui",
-  "version": "3.3.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,12 +443,15 @@ 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;
     private onChange;
     private onTouched;
     constructor();
@@ -454,8 +461,14 @@ declare class GuiCodearea implements ControlValueAccessor {
     setDisabledState(isDisabled: boolean): void;
     onValueChange(): void;
     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 {
+    static ɵfac: i0.ɵɵFactoryDeclaration<GuiCodeareaToolbar, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<GuiCodeareaToolbar, "gui-codearea-toolbar", never, {}, {}, never, ["*"], true, never>;
 }
 
 type FileUploadType = 'image' | 'video' | 'audio' | '*';
@@ -539,7 +552,7 @@ declare function getModelFromConfig(config?: GuiFields, model?: Record<string, a
 
 declare class GuiModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<GuiModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<GuiModule, never, [typeof i1.CommonModule, typeof i2.ReactiveFormsModule, typeof i2.FormsModule, typeof i3.MatFormFieldModule, typeof i4.MatInputModule, typeof i5.MatSelectModule, typeof i6.MatSliderModule, typeof i7.MatSlideToggleModule, typeof i8.MatButtonToggleModule, typeof i9.MatIconModule, typeof i10.MatButtonModule, typeof i11.MatTabsModule, typeof i12.MatExpansionModule, typeof i13.MatTooltipModule, typeof i14.MtxColorpickerModule, typeof i15.MtxSelectModule, typeof GuiForm, typeof GuiInputText, typeof GuiInputNumber, typeof GuiSelect, typeof GuiSwitch, typeof GuiSlider, typeof GuiIcon, typeof GuiButtonToggle, typeof GuiFill, typeof GuiFillPicker, typeof GuiFieldGroup, typeof GuiFieldLabel, typeof GuiInlineGroup, typeof GuiImageSelect, typeof GuiCombobox, typeof GuiTextarea, typeof GuiCodearea, typeof GuiCodeareaDialog, typeof GuiFileUploader, typeof GuiIconButtonWrapper, typeof GuiEjsPipe, typeof GuiFlexDirective], [typeof GuiForm, typeof GuiInputText, typeof GuiInputNumber, typeof GuiSelect, typeof GuiSwitch, typeof GuiSlider, typeof GuiIcon, typeof GuiButtonToggle, typeof GuiFill, typeof GuiFillPicker, typeof GuiFieldGroup, typeof GuiFieldLabel, typeof GuiInlineGroup, typeof GuiImageSelect, typeof GuiCombobox, typeof GuiTextarea, typeof GuiCodearea, typeof GuiCodeareaDialog, typeof GuiFileUploader, typeof GuiIconButtonWrapper, typeof GuiEjsPipe, typeof GuiFlexDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<GuiModule, never, [typeof i1.CommonModule, typeof i2.ReactiveFormsModule, typeof i2.FormsModule, typeof i3.MatFormFieldModule, typeof i4.MatInputModule, typeof i5.MatSelectModule, typeof i6.MatSliderModule, typeof i7.MatSlideToggleModule, typeof i8.MatButtonToggleModule, typeof i9.MatIconModule, typeof i10.MatButtonModule, typeof i11.MatTabsModule, typeof i12.MatExpansionModule, typeof i13.MatTooltipModule, typeof i14.MtxColorpickerModule, typeof i15.MtxSelectModule, typeof GuiForm, typeof GuiInputText, typeof GuiInputNumber, typeof GuiSelect, typeof GuiSwitch, typeof GuiSlider, typeof GuiIcon, typeof GuiButtonToggle, typeof GuiFill, typeof GuiFillPicker, typeof GuiFieldGroup, typeof GuiFieldLabel, typeof GuiInlineGroup, typeof GuiImageSelect, typeof GuiCombobox, typeof GuiTextarea, typeof GuiCodearea, typeof GuiCodeareaDialog, typeof GuiCodeareaToolbar, typeof GuiFileUploader, typeof GuiIconButtonWrapper, typeof GuiEjsPipe, typeof GuiFlexDirective], [typeof GuiForm, typeof GuiInputText, typeof GuiInputNumber, typeof GuiSelect, typeof GuiSwitch, typeof GuiSlider, typeof GuiIcon, typeof GuiButtonToggle, typeof GuiFill, typeof GuiFillPicker, typeof GuiFieldGroup, typeof GuiFieldLabel, typeof GuiInlineGroup, typeof GuiImageSelect, typeof GuiCombobox, typeof GuiTextarea, typeof GuiCodearea, typeof GuiCodeareaDialog, typeof GuiCodeareaToolbar, typeof GuiFileUploader, typeof GuiIconButtonWrapper, typeof GuiEjsPipe, typeof GuiFlexDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<GuiModule>;
 }
 
@@ -604,5 +617,5 @@ declare class GuiIconsRegistry {
     static ɵprov: i0.ɵɵInjectableDeclaration<GuiIconsRegistry>;
 }
 
-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 };
+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 };
 export type { FileUploadContent, FileUploadResponseBody, FileUploadType, GuiBasicValue, GuiCodeareaDialogData, GuiCondition, GuiControl, GuiControls, GuiDefaultValue, GuiField, GuiFieldOption, GuiFieldShowIf, GuiFieldType, GuiFields, GuiFillMode, GuiIconType, GuiIconsConfig, GuiOperator, GuiSliderMode, GuiTabsMode };