@foxeltech/angular-ui 0.0.12 → 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;
@@ -670,7 +671,7 @@ declare class DndUploadComponent {
 declare class ButtonComponent {
     label: string;
     disabled: boolean;
-    buttonVariant: 'default' | 'primary' | 'alternative';
+    buttonVariant: 'default' | 'primary' | 'success' | 'alternative';
     icon?: any;
     class?: any;
     loading: boolean;

package/package.json

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

package/src/lib/styles/components.css

@@ -82,20 +82,24 @@
 }
 
 .mat-mdc-table {
-  border: 2px solid rgb(var(--border-default)) !important;
-  border-radius: 4px !important;
+  border: 1px solid rgb(var(--border-default)) !important;
+  border-radius: 12px !important;
+  overflow: hidden !important;
+  border-collapse: separate !important;
+  border-spacing: 0 !important;
+  background-color: rgb(var(--bg-primary)) !important;
 }
 
 .mdc-data-table__header-row {
-  height: 32px !important;
-  min-height: 32px !important;
+  height: 40px !important;
+  min-height: 40px !important;
 }
 
 .mdc-data-table__header-cell {
-  border-left: 1px solid rgb(var(--border-default)) !important;
   background-color: rgb(var(--bg-primary-hover)) !important;
-  padding-top: 4px !important;
-  padding-bottom: 4px !important;
+  border-bottom: 1px solid rgb(var(--border-default)) !important;
+  padding-top: 8px !important;
+  padding-bottom: 8px !important;
   line-height: 24px !important;
   font-family: 'Roboto';
 }
@@ -103,14 +107,23 @@
 .mdc-data-table__row {
   height: 0 !important;
   min-height: 0 !important;
+  transition: background-color 0.2s ease-in-out;
+}
+
+.mat-mdc-row:hover .mdc-data-table__cell {
+  background-color: rgb(var(--bg-primary-hover)) !important;
 }
 
 .mdc-data-table__cell {
-  border-left: 1px solid rgb(var(--border-default)) !important;
+  border-bottom: 1px solid rgb(var(--border-default)) !important;
   background-color: rgb(var(--bg-primary)) !important;
   font-family: 'Roboto';
 }
 
+.mat-mdc-row:last-child .mdc-data-table__cell {
+  border-bottom: none !important;
+}
+
 .mat-mdc-cell {
   border-color: rgb(var(--border-default)) !important;
 }
@@ -279,7 +292,7 @@ input[type='password'] {
   @apply text-xs font-light text-text-secondary tracking-normal;
 }
 .txt-tag-common {
-  @apply font-medium text-xs;
+  @apply font-semibold text-xs;
 }
 .txt-tag-default {
   @apply txt-tag-common text-text-secondary;
@@ -321,6 +334,9 @@ input[type='password'] {
 .btn-primary {
   @apply btn-common bg-gradient-primary hover:opacity-75 text-text-focus;
 }
+.btn-success {
+  @apply btn-common bg-gradient-success hover:opacity-75 text-white;
+}
 .btn-alternative {
   @apply btn-common hover:bg-bg-hover text-text-primary border border-border-default;
 }
@@ -364,28 +380,28 @@ input[type='password'] {
 }
 
 .tag-common {
-  @apply flex min-w-7 px-normal py-small hover:opacity-70 items-center justify-center;
+  @apply flex min-w-7 px-[10px] py-[2px] leading-5 hover:opacity-70 items-center justify-center;
 }
 .tag-default {
   @apply tag-common bg-bg-hover;
 }
 .tag-success {
-  @apply tag-common bg-success/10;
+  @apply tag-common bg-success/20;
 }
 .tag-warning {
-  @apply tag-common bg-warning/10;
+  @apply tag-common bg-warning/20;
 }
 .tag-danger {
-  @apply tag-common bg-danger/10;
+  @apply tag-common bg-danger/20;
 }
 .tag-critical {
-  @apply tag-common bg-critical/10;
+  @apply tag-common bg-critical/20;
 }
 .tag-discovery {
-  @apply tag-common bg-discovery/10;
+  @apply tag-common bg-discovery/20;
 }
 .tag-information {
-  @apply tag-common bg-information/10;
+  @apply tag-common bg-information/20;
 }
 .tag-default-solid {
   @apply tag-common bg-bg-hover;
@@ -409,10 +425,10 @@ input[type='password'] {
   @apply tag-common bg-information;
 }
 .tag-square {
-  @apply rounded px-semi py-small;
+  @apply rounded-md px-semi py-small;
 }
 .tag-round {
-  @apply rounded-2xl;
+  @apply rounded-full;
 }
 /* progress bar */
 .progress-bar-container {

package/src/lib/styles/theme.css

@@ -1,8 +1,11 @@
 .light_theme {
-  --gradient-primary-start: 156 129 255;
-  --gradient-primary-end: 4 255 135;
+  --gradient-primary-start: 124 58 237;
+  --gradient-primary-end: 79 142 247;
+  --gradient-success-start: 16 185 129;
+  --gradient-success-end: 45 212 191;
   --bg-primary: 255 255 255;
-  --primary: 236 25 56;
+  --bg-canvas: 245 247 250;
+  --primary: 124 58 237;
   --success: 15 140 96;
   --warning: 255 199 0;
   --critical: 254 4 83;
@@ -18,14 +21,14 @@
   --bg-primary-hover: 247 247 247;
   --text-focus: 255 255 255;
   --bg-primary-neutral: 12 14 18;
-  --text-selected-primary: 199 14 41;
+  --text-selected-primary: 124 58 237;
   --button-default: 34 38 47; 
   --text-inverse: 255 255 255;
   --bg-error-bold: 215 0 68;
   --text-error: 215 0 68;
-  --border-interactive: 236 25 56;
-  --border-selected: 254 53 83;
-  --button-primary: 236 25 56;
+  --border-interactive: 124 58 237;
+  --border-selected: 124 58 237;
+  --button-primary: 124 58 237;
   --border-strong: 206 207 210;
   --border-secondary-hover: 0 199 205;
   --bg-secondary-hover: 6 59 70;
@@ -33,10 +36,13 @@
 }
 
 :root {
-  --gradient-primary-start: 156 129 255;
-  --gradient-primary-end: 4 255 135;
+  --gradient-primary-start: 124 58 237;
+  --gradient-primary-end: 79 142 247;
+  --gradient-success-start: 16 185 129;
+  --gradient-success-end: 45 212 191;
   --bg-primary: 12 14 18;
-  --primary: 236 25 56;
+  --bg-canvas: 8 9 12;
+  --primary: 124 58 237;
   --success: 76 175 80;
   --warning: 255 188 59;
   --critical: 236 25 56;
@@ -52,14 +58,14 @@
   --bg-primary-hover: 34 38 47;
   --text-focus: 255 255 255;
   --bg-primary-neutral: 12 14 18;
-  --text-selected-primary: 254 53 83;
+  --text-selected-primary: 124 58 237;
   --button-default: 236 236 236; 
   --text-inverse: 12 14 18;
   --bg-error-bold: 215 0 68;
   --text-error: 255 0 81;
-  --border-interactive: 236 25 56;
-  --border-selected: 254 53 83;
-  --button-primary: 236 25 56;
+  --border-interactive: 124 58 237;
+  --border-selected: 124 58 237;
+  --button-primary: 124 58 237;
   --border-strong: 97 101 108;
   --border-secondary-hover: 0 199 205;
   --bg-secondary-hover: 6 59 70;

package/src/lib/ui/components/button/button.component.html

@@ -3,6 +3,7 @@
   [ngClass]="{
     'btn-default': buttonVariant === 'default',
     'btn-primary': buttonVariant === 'primary',
+    'btn-success': buttonVariant === 'success',
     'btn-alternative': buttonVariant === 'alternative',
   }"
   [disabled]="disabled || loading"
@@ -220,7 +221,7 @@
             [ngClass]="{
               'text-text-inverse': buttonVariant === 'default',
               'text-text-primary': buttonVariant === 'alternative',
-              'text-white': buttonVariant === 'primary',
+              'text-white': buttonVariant === 'primary' || buttonVariant === 'success',
             }"
           ></fx-ui-hero-icon>
         }

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;
 }

package/tailwind.config.js

@@ -4,6 +4,8 @@ module.exports = {
       colors: {
         'gradient-primary-start': 'rgb(var(--gradient-primary-start) / <alpha-value>)',
         'gradient-primary-end': 'rgb(var(--gradient-primary-end) / <alpha-value>)',
+        'gradient-success-start': 'rgb(var(--gradient-success-start) / <alpha-value>)',
+        'gradient-success-end': 'rgb(var(--gradient-success-end) / <alpha-value>)',
         primary: 'rgb(var(--primary) / <alpha-value>)',
         success: 'rgb(var(--success) / <alpha-value>)',
         danger: 'rgb(var(--danger) / <alpha-value>)',
@@ -13,6 +15,7 @@ module.exports = {
         information: 'rgb(var(--information) / <alpha-value>)',
         bg: {
           primary: 'rgb(var(--bg-primary) / <alpha-value>)',
+          canvas: 'rgb(var(--bg-canvas) / <alpha-value>)',
           hover: 'rgb(var(--bg-primary-hover) / <alpha-value>)',
           error: 'rgb(var(--bg-error-bold) / <alpha-value>)',
           hover2: 'rgb(var(--bg-secondary-hover) / <alpha-value>)',
@@ -42,6 +45,8 @@ module.exports = {
       backgroundImage: {
         'gradient-primary':
           'linear-gradient(135deg, rgb(var(--gradient-primary-start)) 0%, rgb(var(--gradient-primary-end)) 100%)',
+        'gradient-success':
+          'linear-gradient(135deg, rgb(var(--gradient-success-start)) 0%, rgb(var(--gradient-success-end)) 100%)',
       },
       screens: {
         sm: '480px',

package/theme.css

@@ -1,8 +1,11 @@
 .light_theme {
-  --gradient-primary-start: 156 129 255;
-  --gradient-primary-end: 4 255 135;
+  --gradient-primary-start: 124 58 237;
+  --gradient-primary-end: 79 142 247;
+  --gradient-success-start: 16 185 129;
+  --gradient-success-end: 45 212 191;
   --bg-primary: 255 255 255;
-  --primary: 236 25 56;
+  --bg-canvas: 245 247 250;
+  --primary: 124 58 237;
   --success: 15 140 96;
   --warning: 255 199 0;
   --critical: 254 4 83;
@@ -18,14 +21,14 @@
   --bg-primary-hover: 247 247 247;
   --text-focus: 255 255 255;
   --bg-primary-neutral: 12 14 18;
-  --text-selected-primary: 199 14 41;
+  --text-selected-primary: 124 58 237;
   --button-default: 34 38 47; 
   --text-inverse: 255 255 255;
   --bg-error-bold: 215 0 68;
   --text-error: 215 0 68;
-  --border-interactive: 236 25 56;
-  --border-selected: 254 53 83;
-  --button-primary: 236 25 56;
+  --border-interactive: 124 58 237;
+  --border-selected: 124 58 237;
+  --button-primary: 124 58 237;
   --border-strong: 206 207 210;
   --border-secondary-hover: 0 199 205;
   --bg-secondary-hover: 6 59 70;
@@ -33,10 +36,13 @@
 }
 
 :root {
-  --gradient-primary-start: 156 129 255;
-  --gradient-primary-end: 4 255 135;
+  --gradient-primary-start: 124 58 237;
+  --gradient-primary-end: 79 142 247;
+  --gradient-success-start: 16 185 129;
+  --gradient-success-end: 45 212 191;
   --bg-primary: 12 14 18;
-  --primary: 236 25 56;
+  --bg-canvas: 8 9 12;
+  --primary: 124 58 237;
   --success: 76 175 80;
   --warning: 255 188 59;
   --critical: 236 25 56;
@@ -52,14 +58,14 @@
   --bg-primary-hover: 34 38 47;
   --text-focus: 255 255 255;
   --bg-primary-neutral: 12 14 18;
-  --text-selected-primary: 254 53 83;
+  --text-selected-primary: 124 58 237;
   --button-default: 236 236 236; 
   --text-inverse: 12 14 18;
   --bg-error-bold: 215 0 68;
   --text-error: 255 0 81;
-  --border-interactive: 236 25 56;
-  --border-selected: 254 53 83;
-  --button-primary: 236 25 56;
+  --border-interactive: 124 58 237;
+  --border-selected: 124 58 237;
+  --button-primary: 124 58 237;
   --border-strong: 97 101 108;
   --border-secondary-hover: 0 199 205;
   --bg-secondary-hover: 6 59 70;