@acrodata/gui 3.0.1 → 3.2.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 {
@@ -135,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/image-select/image-select.scss

@@ -36,7 +36,7 @@
       }
     }
 
-    .ng-clear-wrapper .ng-clear {
+    .ng-clear {
       font-family: math;
       font-size: 12px;
     }
@@ -47,17 +47,15 @@
   }
 
   &.ng-dropdown-panel {
-    .ng-dropdown-panel-items {
-      .ng-option {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-        height: 4rem;
-        padding: 0.5rem;
+    .ng-option {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      height: 4rem;
+      padding: 0.5rem;
 
-        img {
-          @extend %img;
-        }
+      img {
+        @extend %img;
       }
     }
   }

package/index.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { OnChanges, OnInit, OnDestroy, EventEmitter, SimpleChanges, DoCheck, AfterViewInit, ElementRef, PipeTransform, InjectionToken } from '@angular/core';
+import { OnChanges, OnInit, OnDestroy, EventEmitter, SimpleChanges, DoCheck, ElementRef, PipeTransform, InjectionToken } from '@angular/core';
 import * as i1 from '@angular/common';
 import * as i2 from '@angular/forms';
 import { FormGroup, FormArray, ControlValueAccessor } from '@angular/forms';
@@ -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(): "hex" | "rgb" | "hsl" | "hsv";
     getTypeFromModel(value: string): void;
     getValueFromModel(value: string): void;
     onTypeChange(): void;
-    onColorChange(e: ColorEvent): void;
+    onColorChange(): void;
     onSolidChange(): void;
     onGradientChange(): void;
     onImageChange(): void;
@@ -345,7 +342,7 @@ declare class GuiInlineGroup {
     static ɵcmp: i0.ɵɵComponentDeclaration<GuiInlineGroup, "gui-inline-group", never, { "config": { "alias": "config"; "required": false; }; }, {}, never, ["*"], true, never>;
 }
 
-declare class GuiImageSelect implements ControlValueAccessor, AfterViewInit {
+declare class GuiImageSelect implements ControlValueAccessor {
     private cdr;
     mtxSelect: MtxSelect;
     config: Partial<GuiControl>;
@@ -354,7 +351,6 @@ declare class GuiImageSelect implements ControlValueAccessor, AfterViewInit {
     value: any;
     private onChange;
     private onTouched;
-    ngAfterViewInit(): void;
     writeValue(value: any): void;
     registerOnChange(fn: (value: any) => void): void;
     registerOnTouched(fn: () => void): void;
@@ -364,7 +360,7 @@ declare class GuiImageSelect implements ControlValueAccessor, AfterViewInit {
     static ɵcmp: i0.ɵɵComponentDeclaration<GuiImageSelect, "gui-image-select", never, { "config": { "alias": "config"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "appendTo": { "alias": "appendTo"; "required": false; }; }, {}, never, never, true, never>;
 }
 
-declare class GuiCombobox implements ControlValueAccessor, AfterViewInit {
+declare class GuiCombobox implements ControlValueAccessor {
     private cdr;
     mtxSelect: MtxSelect;
     config: Partial<GuiControl>;
@@ -373,7 +369,6 @@ declare class GuiCombobox implements ControlValueAccessor, AfterViewInit {
     value: GuiBasicValue | GuiBasicValue[];
     private onChange;
     private onTouched;
-    ngAfterViewInit(): void;
     writeValue(value: any): void;
     registerOnChange(fn: (value: GuiBasicValue | GuiBasicValue[]) => void): void;
     registerOnTouched(fn: () => void): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acrodata/gui",
-  "version": "3.0.1",
+  "version": "3.2.0",
   "description": "JSON powered GUI for configurable panels.",
   "publishConfig": {
     "access": "public"
@@ -36,11 +36,11 @@
     "@angular/core": ">=20.0.0",
     "@angular/forms": ">=20.0.0",
     "@angular/material": ">=20.0.0",
-    "@ng-matero/extensions": ">=20.0.0"
+    "@ng-matero/extensions": ">=20.5.0"
   },
   "dependencies": {
-    "@acrodata/code-editor": "^0.5.0",
-    "@acrodata/gradient-picker": "^0.11.0",
+    "@acrodata/code-editor": "^0.6.0",
+    "@acrodata/gradient-picker": "^0.14.0",
     "@acrodata/rnd-dialog": "^0.4.0",
     "tslib": "^2.3.0"
   },