@acrodata/gui 3.0.0 → 3.1.0

package/fill/fill-picker.scss

@@ -10,102 +10,13 @@
     0 8px 16px 0 rgba(0, 0, 0, 0.12),
     0 0 1px 0 rgba(0, 0, 0, 0.12);
 
-  color-chrome {
-    display: block;
-
-    .chrome-picker {
-      width: auto;
-      background: none;
-      box-shadow: none;
-      border-radius: 0;
-      font-family: inherit;
-    }
-
-    .saturation {
-      border-radius: 0.25rem;
-      box-shadow:
-        0 0 0 1px rgba(255, 255, 255, 0.12),
-        0 0 0 1px rgba(0, 0, 0, 0.12);
-    }
-
-    .chrome-body {
-      padding: 1rem 0 0;
-    }
-
-    .chrome-swatch {
-      box-shadow:
-        0 0 0 1px rgba(255, 255, 255, 0.12),
-        0 0 0 1px rgba(0, 0, 0, 0.12);
-    }
-
-    .chrome-active {
-      box-shadow: none;
-    }
-
-    .alpha-checkboard {
-      background-color: #fff;
-      border-radius: 2px;
-    }
-
-    .alpha-gradient {
-      border-radius: 2px;
-    }
-
-    .chrome-wrap {
-      gap: 0.75rem;
-      align-items: center;
-    }
-
-    .chrome-fields {
-      gap: 0.5rem;
-      margin: 0;
-    }
-
-    .chrome-field {
-      padding: 0;
-    }
-
-    .wrap {
-      width: 100%;
-      line-height: 1;
-
-      input {
-        background-color: transparent;
-        box-shadow: none !important;
-        color: var(--mat-form-field-outlined-input-text-color, var(--mat-sys-on-surface)) !important;
-        border: 1px solid var(--mat-form-field-outlined-outline-color, var(--mat-sys-outline)) !important;
-      }
-    }
-
-    .chrome-toggle {
-      display: flex;
-      width: 1.5rem;
-      height: 1.5rem;
-      padding: 0.125rem;
-      border-radius: 2px;
-
-      &:hover {
-        background: rgba(0, 0, 0, 0.04);
-      }
-    }
-
-    .chrome-icon {
-      margin: 0;
-    }
-
-    .chrome-toggle-svg {
-      width: 1.25rem;
-      height: 1.25rem;
-      border: none;
-
-      &:hover {
-        background: transparent;
-      }
-
-      path {
-        fill: var(--mat-icon-button-icon-color, var(--mat-sys-on-surface-variant));
-      }
-    }
+  .color-picker {
+    --cp-container-width: auto;
+    --cp-container-padding: 0;
+    --cp-container-shape: 0;
+    --cp-container-elevation-shadow: none;
+    --cp-container-background-color: transparent;
+    --cp-container-text-color: var(--mat-form-field-filled-input-text-color, var(--mat-sys-on-surface));
   }
 
   .gradient-picker {
@@ -117,6 +28,10 @@
     --gp-container-background-color: transparent;
     --gp-container-text-color: var(--mat-form-field-filled-input-text-color, var(--mat-sys-on-surface));
     --gp-input-background-color: var(--mat-form-field-filled-container-color, var(--mat-sys-surface-variant));
+    --gp-radio-button-selected-background-color: var(--mat-button-toggle-selected-state-background-color,
+        var(--mat-sys-secondary-container));
+    --gp-radio-button-selected-outline-color: var(--mat-button-toggle-divider-color,
+        var(--mat-sys-outline));
   }
 }
 
@@ -131,7 +46,7 @@
     gap: 0.25rem;
     border: none;
 
-    .mat-button-toggle-appearance-standard + .mat-button-toggle-appearance-standard {
+    .mat-button-toggle-appearance-standard+.mat-button-toggle-appearance-standard {
       border: none;
     }
   }

package/index.d.ts

@@ -19,7 +19,6 @@ 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 { ColorEvent } from 'ngx-color';
 import * as _codemirror_state from '@codemirror/state';
 import { Extension } from '@codemirror/state';
 import * as _acrodata_code_editor from '@acrodata/code-editor';
@@ -292,7 +291,6 @@ declare class GuiFillPicker implements ControlValueAccessor, OnChanges {
         value: string;
     }[];
     selectedType: Exclude<GuiFillMode, 'all'>;
-    colorFormat: 'hex' | 'rgb' | 'hsl' | 'hsv';
     fillValue: {
         solid: string;
         gradient: string;
@@ -306,11 +304,10 @@ declare class GuiFillPicker implements ControlValueAccessor, OnChanges {
     registerOnChange(fn: (value: string) => void): void;
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
-    getColorFormat(): "hsl" | "rgb" | "hex" | "hsv";
     getTypeFromModel(value: string): void;
     getValueFromModel(value: string): void;
     onTypeChange(): void;
-    onColorChange(e: ColorEvent): void;
+    onColorChange(): void;
     onSolidChange(): void;
     onGradientChange(): void;
     onImageChange(): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acrodata/gui",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "JSON powered GUI for configurable panels.",
   "publishConfig": {
     "access": "public"
@@ -39,8 +39,8 @@
     "@ng-matero/extensions": ">=20.0.0"
   },
   "dependencies": {
-    "@acrodata/code-editor": "^0.5.0",
-    "@acrodata/gradient-picker": "^0.8.0",
+    "@acrodata/code-editor": "^0.6.0",
+    "@acrodata/gradient-picker": "^0.12.0",
     "@acrodata/rnd-dialog": "^0.4.0",
     "tslib": "^2.3.0"
   },