@acrodata/gui 0.4.1 → 0.5.0

package/field-group/field-group.scss

@@ -4,6 +4,8 @@
 }
 
 .gui-field {
+  --mat-form-field-container-text-size: 12px;
+
   display: inline-flex;
   flex: 1;
   flex-wrap: wrap;
@@ -13,4 +15,51 @@
     width: 0;
     max-width: 100%;
   }
+
+  .mat-mdc-text-field-wrapper,
+  .mat-mdc-form-field-hint-wrapper {
+    position: relative;
+    padding: 0 8px;
+    border-radius: var(--mdc-filled-text-field-container-shape);
+
+    [dir='rtl'] & {
+      padding: 0 8px;
+    }
+  }
+
+  .mat-mdc-form-field-infix {
+    min-height: auto;
+    padding: 0 !important;
+  }
+
+  .mat-mdc-form-field-hint-spacer,
+  .mat-mdc-form-field-bottom-align::before,
+  .mdc-line-ripple {
+    display: none;
+  }
+
+  .mat-mdc-icon-button {
+    --mdc-icon-button-state-layer-size: 24px;
+    --mdc-icon-button-icon-size: 14px;
+
+    padding: 0;
+
+    .mat-mdc-button-touch-target {
+      width: var(--mdc-icon-button-state-layer-size);
+      height: var(--mdc-icon-button-state-layer-size);
+    }
+  }
+
+  // fix mat-form-field prefix icon
+  .mat-icon {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0 !important;
+
+    svg {
+      width: 14px;
+      height: 14px;
+    }
+  }
 }

package/file-uploader/file-uploader.scss

@@ -1,7 +1,6 @@
 .gui-file-uploader {
   display: block;
   overflow: auto;
-  flex: 1;
 
   .mat-mdc-form-field {
     width: 100%;

package/gui-form.d.ts

@@ -23,6 +23,7 @@ export declare class GuiForm implements OnChanges, OnInit, OnDestroy {
     formFields: GuiControl[];
     formSubscription: Subscription;
     controlSubscriptions: Subscription[];
+    uid: string;
     ngOnChanges(changes: SimpleChanges): void;
     ngOnInit(): void;
     ngOnDestroy(): void;

package/gui-form.scss

@@ -1,5 +1,4 @@
 .gui-form {
-  --mat-form-field-container-text-size: 12px;
   --mat-expansion-header-text-size: 12px;
   --mat-expansion-container-text-size: 12px;
   --mat-expansion-header-collapsed-state-height: 32px;
@@ -58,18 +57,6 @@
     padding: 0 12px;
   }
 
-  .mat-icon {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    padding: 0 !important;
-
-    svg {
-      width: 14px;
-      height: 14px;
-    }
-  }
-
   .mat-mdc-icon-button {
     --mdc-icon-button-state-layer-size: 24px;
     --mdc-icon-button-icon-size: 14px;
@@ -80,29 +67,13 @@
       width: var(--mdc-icon-button-state-layer-size);
       height: var(--mdc-icon-button-state-layer-size);
     }
-  }
-
-  .mat-mdc-text-field-wrapper,
-  .mat-mdc-form-field-hint-wrapper {
-    position: relative;
-    padding: 0 8px;
-    border-radius: var(--mdc-filled-text-field-container-shape);
 
-    [dir='rtl'] & {
-      padding: 0 8px;
+    .mat-icon {
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
     }
   }
-
-  .mat-mdc-form-field-infix {
-    min-height: auto;
-    padding: 0 !important;
-  }
-
-  .mat-mdc-form-field-hint-spacer,
-  .mat-mdc-form-field-bottom-align::before,
-  .mdc-line-ripple {
-    display: none;
-  }
 }
 
 .gui-list-item-heading {

package/image-select/image-select.d.ts

@@ -1,21 +1,24 @@
-import { ChangeDetectorRef } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
+import { MtxSelect } from '@ng-matero/extensions/select';
 import { GuiControl } from '../interface';
 import * as i0 from "@angular/core";
-export declare class GuiImageSelect implements ControlValueAccessor {
+export declare class GuiImageSelect implements ControlValueAccessor, AfterViewInit {
     private cdr;
+    mtxSelect: MtxSelect;
     config: Partial<GuiControl>;
     disabled: boolean;
+    appendTo: string;
     value: unknown;
     private onChange;
     private onTouched;
     constructor(cdr: ChangeDetectorRef);
+    ngAfterViewInit(): void;
     writeValue(value: unknown): void;
     registerOnChange(fn: (value: unknown) => void): void;
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     onValueChange(): void;
-    onPanelOpened(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<GuiImageSelect, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<GuiImageSelect, "gui-image-select", never, { "config": { "alias": "config"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, never, false, never>;
+    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, false, never>;
 }

package/image-select/image-select.scss

@@ -27,10 +27,8 @@
       }
     }
   }
-}
 
-.gui-form {
-  .ng-dropdown-panel {
+  &.ng-dropdown-panel {
     .ng-dropdown-panel-items {
       .ng-option {
         display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acrodata/gui",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "A lightweight GUI library for Angular",
   "publishConfig": {
     "access": "public"
@@ -31,12 +31,12 @@
     }
   },
   "peerDependencies": {
-    "@angular/cdk": ">=15.0.0",
-    "@angular/common": ">=15.0.0",
-    "@angular/core": ">=15.0.0",
-    "@angular/forms": ">=15.0.0",
-    "@angular/material": ">=15.0.0",
-    "@ng-matero/extensions": ">=15.0.0"
+    "@angular/cdk": ">=16.0.0",
+    "@angular/common": ">=16.0.0",
+    "@angular/core": ">=16.0.0",
+    "@angular/forms": ">=16.0.0",
+    "@angular/material": ">=16.0.0",
+    "@ng-matero/extensions": ">=16.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"