@acrodata/gui 0.3.1 → 0.4.1

package/fill/fill.scss

@@ -29,7 +29,7 @@
   opacity: .12;
   content: '';
 
-  [dir="rtl"] & {
+  [dir='rtl'] & {
     border-radius: 0;
     border-top-right-radius: var(--mdc-filled-text-field-container-shape);
     border-bottom-right-radius: var(--mdc-filled-text-field-container-shape);

package/gui-form.d.ts

@@ -1,10 +1,9 @@
-import { ChangeDetectorRef, EventEmitter, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
+import { EventEmitter, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
 import { FormArray, FormGroup } from '@angular/forms';
 import { Subscription } from 'rxjs';
 import { GuiControl, GuiFieldType, GuiFields, GuiTabsMode } from './interface';
 import * as i0 from "@angular/core";
 export declare class GuiForm implements OnChanges, OnInit, OnDestroy {
-    private cdr;
     /**
      * The form instance which allow to track model value and validation status.
      */
@@ -24,7 +23,6 @@ export declare class GuiForm implements OnChanges, OnInit, OnDestroy {
     formFields: GuiControl[];
     formSubscription: Subscription;
     controlSubscriptions: Subscription[];
-    constructor(cdr: ChangeDetectorRef);
     ngOnChanges(changes: SimpleChanges): void;
     ngOnInit(): void;
     ngOnDestroy(): void;
@@ -36,31 +34,28 @@ export declare class GuiForm implements OnChanges, OnInit, OnDestroy {
      * @param model        The value of the form control
      * @param defaultValue The default value of the form field
      * @param parentType   The type of the form field parent
-     * @param options      The reactive form options
      * @returns
      */
-    getFormFieldArray(form: FormGroup | FormArray, config?: GuiFields | GuiControl[], model?: Record<string, any>, defaultValue?: any, parentType?: GuiFieldType, options?: {
-        onlySelf?: boolean;
-        emitEvent?: boolean;
-    }): GuiControl[];
+    getFormFieldArray(form: FormGroup | FormArray, config?: GuiFields | GuiControl[], model?: Record<string, any>, defaultValue?: any, parentType?: GuiFieldType): GuiControl[];
     /**
      * Add a tab item.
      *
-     * @param e     The mouse event
-     * @param form  The reactive form instance
-     * @param tabs  The config of the tabs field
-     * @param index The index of the tabs array
+     * @param e         The mouse event
+     * @param formArray The reactive form instance
+     * @param tabs      The config of the tabs field
+     * @param copy      Whether to copy the current tab
+     * @param index     The index of the tabs array
      */
-    addTab(e: MouseEvent, form: FormArray, tabs: GuiControl, index?: number): void;
+    addTab(e: MouseEvent, formArray: FormArray, tabs: GuiControl, copy?: boolean, index?: number): void;
     /**
      * Remove a tab item.
      *
-     * @param e     The mouse event
-     * @param form  The reactive form instance
-     * @param tabs  The config of the tabs field
-     * @param index The index of the tabs array
+     * @param e         The mouse event
+     * @param formArray The reactive form instance
+     * @param tabs      The config of the tabs field
+     * @param index     The index of the tabs array
      */
-    removeTab(e: MouseEvent, form: FormArray, tabs: GuiControl, index?: number): void;
+    removeTab(e: MouseEvent, formArray: FormArray, tabs: GuiControl, index?: number): void;
     /**
      * Change the display mode of tabs.
      *

package/gui-form.scss

@@ -26,8 +26,16 @@
       align-items: center;
       padding-right: 8px;
 
+      [dir='rtl'] & {
+        padding-right: 0;
+        padding-left: 8px;
+      }
+
       gui-field-label {
         flex: 1;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
       }
     }
   }
@@ -80,7 +88,7 @@
     padding: 0 8px;
     border-radius: var(--mdc-filled-text-field-container-shape);
 
-    [dir="rtl"] & {
+    [dir='rtl'] & {
       padding: 0 8px;
     }
   }
@@ -104,10 +112,6 @@
   padding: 0 12px;
   line-height: 24px;
 
-  .gui-list-item-title {
-    flex: 1;
-  }
-
   &::before {
     position: absolute;
     left: 0;
@@ -115,6 +119,20 @@
     height: 16px;
     background-color: var(--mat-expansion-header-text-color);
     content: '';
+
+    [dir='rtl'] & {
+      left: auto;
+      right: 0;
+    }
+  }
+}
+
+.gui-list-item-title {
+  flex: 1;
+  cursor: pointer;
+
+  .gui-list-item-active & {
+    font-weight: bold;
   }
 }
 

package/input-number/input-number.scss

@@ -2,7 +2,7 @@
   .mat-mdc-text-field-wrapper {
     padding-right: 0;
 
-    [dir="rtl"] & {
+    [dir='rtl'] & {
       padding-left: 0;
     }
   }

package/interface.d.ts

@@ -55,6 +55,7 @@ export interface GuiControl extends GuiField {
     index?: number;
     children?: GuiControl[];
     template?: Partial<GuiControl>;
+    selectedIndex?: number;
 }
 export interface GuiControls {
     [key: string]: GuiControl;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acrodata/gui",
-  "version": "0.3.1",
+  "version": "0.4.1",
   "description": "A lightweight GUI library for Angular",
   "publishConfig": {
     "access": "public"

package/select/select.scss

@@ -4,10 +4,15 @@
 
   .mat-mdc-option {
     min-height: var(--mat-option-label-text-line-height);
-    padding: 0 8px;
+    padding: 0 8px !important;
 
     .mat-pseudo-checkbox-full {
       margin-right: 8px;
+
+      [dir='rtl'] & {
+        margin-right: 0;
+        margin-left: 8px;
+      }
     }
   }
 

package/slider/slider.scss

@@ -38,6 +38,11 @@
   .mat-mdc-form-field {
     margin-left: 6px;
 
+    [dir='rtl'] & {
+      margin-left: 0;
+      margin-right: 6px;
+    }
+
     input::-webkit-outer-spin-button,
     input::-webkit-inner-spin-button {
       appearance: none;