@foxeltech/angular-ui 0.0.13 → 0.0.14

package/index.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { OnDestroy, Injector, ApplicationRef, OnInit, AfterViewInit, ChangeDetectorRef, Type, EventEmitter, ModuleWithProviders, TemplateRef, ViewContainerRef, ElementRef, RendererFactory2, AfterContentInit, QueryList, Renderer2, OnChanges, NgZone } from '@angular/core';
+import { OnDestroy, Injector, ApplicationRef, OnInit, AfterViewInit, ChangeDetectorRef, Type, EventEmitter, ModuleWithProviders, TemplateRef, ViewContainerRef, ElementRef, RendererFactory2, OnChanges, SimpleChanges, AfterContentInit, QueryList, Renderer2, NgZone } from '@angular/core';
 import * as _foxeltech_angular_ui from '@foxeltech/angular-ui';
 import * as i43 from '@angular/material/paginator';
 import { MatPaginator } from '@angular/material/paginator';
@@ -544,7 +544,7 @@ declare class InputComponent extends FxComponent<string> implements AfterViewIni
     static ɵcmp: i0.ɵɵComponentDeclaration<InputComponent, "fx-ui-input", never, { "label": { "alias": "label"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "type": { "alias": "type"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "errorMessages": { "alias": "errorMessages"; "required": false; }; "required": { "alias": "required"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "suffixIcon": { "alias": "suffixIcon"; "required": false; }; "class": { "alias": "class"; "required": false; }; "maxlength": { "alias": "maxlength"; "required": false; }; "validateFn": { "alias": "validateFn"; "required": false; }; }, { "blurred": "blurred"; "focused": "focused"; "suffixClick": "suffixClick"; }, never, never, false, never>;
 }
 
-declare class SelectComponent extends FxComponent<string | string[]> implements AfterViewInit, OnInit {
+declare class SelectComponent extends FxComponent<string | string[]> implements AfterViewInit, OnInit, OnChanges {
     private ref;
     label: string;
     tooltip: string;
@@ -575,6 +575,7 @@ declare class SelectComponent extends FxComponent<string | string[]> implements
     private search$;
     constructor(ngControl: NgControl, ref: ChangeDetectorRef);
     ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
     onOpened(open: boolean): void;
     onSearchChange(value: string): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@foxeltech/angular-ui",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "license": "MIT",
   "main": "bundles/ui.umd.js",
   "module": "fesm2022/foxeltech-angular-ui.mjs",

package/src/lib/ui/components/select/select.component.css

@@ -62,8 +62,19 @@
   margin-right: 0 !important;
 }
 
-::ng-deep .fx-select-field .mat-mdc-select-arrow-wrapper {
-  color: rgb(var(--text-primary));
+/* Unified chevron-down arrow (replaces Material's default triangle) */
+::ng-deep .fx-select-field .mat-mdc-select-arrow-wrapper .mat-mdc-select-arrow svg {
+  display: none !important;
+}
+::ng-deep .fx-select-field .mat-mdc-select-arrow-wrapper .mat-mdc-select-arrow {
+  width: 8px !important;
+  height: 8px !important;
+  border-style: solid;
+  border-color: currentColor;
+  border-width: 0 1.5px 1.5px 0;
+  transform: rotate(45deg);
+  margin-top: -3px;
+  color: rgb(var(--text-secondary)) !important;
 }
 
 ::ng-deep .mat-mdc-select-panel {
@@ -102,6 +113,30 @@
   padding: 8px 16px; /* Add visual padding back to the input */
   border: none;
   /* Optional: Add a subtle border to separate it from the options */
-  border-bottom: 1px solid #ddd; 
+  border-bottom: 1px solid #ddd;
   box-sizing: border-box; /* Include padding in the element's total width */
+}
+
+/* Disabled state */
+::ng-deep .fx-select-field.mat-form-field-disabled .mat-mdc-form-field-flex,
+::ng-deep .fx-select-field:has(.mat-mdc-select-disabled) .mat-mdc-form-field-flex {
+  background-color: rgb(var(--bg-primary-hover)) !important;
+  border-color: rgb(var(--border-default)) !important;
+  cursor: not-allowed !important;
+  opacity: 0.6;
+  box-shadow: none !important;
+}
+
+::ng-deep .fx-select-field.mat-form-field-disabled .mat-mdc-select-value,
+::ng-deep .fx-select-field.mat-form-field-disabled .mat-mdc-select-placeholder,
+::ng-deep .fx-select-field.mat-form-field-disabled .mat-mdc-select-arrow,
+::ng-deep .fx-select-field:has(.mat-mdc-select-disabled) .mat-mdc-select-value,
+::ng-deep .fx-select-field:has(.mat-mdc-select-disabled) .mat-mdc-select-placeholder,
+::ng-deep .fx-select-field:has(.mat-mdc-select-disabled) .mat-mdc-select-arrow {
+  color: rgb(var(--text-placeholder)) !important;
+}
+
+::ng-deep .fx-select-field.mat-form-field-disabled .mat-mdc-select,
+::ng-deep .fx-select-field:has(.mat-mdc-select-disabled) .mat-mdc-select {
+  cursor: not-allowed !important;
 }