@foxeltech/angular-ui 0.0.11 → 0.0.13

package/index.d.ts

@@ -514,6 +514,7 @@ declare class FxComponent<T> implements ControlValueAccessor {
 declare class InputComponent extends FxComponent<string> implements AfterViewInit {
     private ref;
     label: string;
+    tooltip: string;
     type: string;
     placeholder: string;
     errorMessages: {
@@ -540,12 +541,13 @@ declare class InputComponent extends FxComponent<string> implements AfterViewIni
     onSuffixClick(): void;
     get displayType(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<InputComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<InputComponent, "fx-ui-input", never, { "label": { "alias": "label"; "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>;
+    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 {
     private ref;
     label: string;
+    tooltip: string;
     placeholder: string;
     options: {
         label: string;
@@ -580,22 +582,25 @@ declare class SelectComponent extends FxComponent<string | string[]> implements
     onSelectionChange(value: any): void;
     isSelected(value: string): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<SelectComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SelectComponent, "fx-ui-select", never, { "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "options": { "alias": "options"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "errorMessages": { "alias": "errorMessages"; "required": false; }; "required": { "alias": "required"; "required": false; }; "class": { "alias": "class"; "required": false; }; "enableSearch": { "alias": "enableSearch"; "required": false; }; "searchFn": { "alias": "searchFn"; "required": false; }; }, { "closed": "closed"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SelectComponent, "fx-ui-select", never, { "label": { "alias": "label"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "options": { "alias": "options"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "errorMessages": { "alias": "errorMessages"; "required": false; }; "required": { "alias": "required"; "required": false; }; "class": { "alias": "class"; "required": false; }; "enableSearch": { "alias": "enableSearch"; "required": false; }; "searchFn": { "alias": "searchFn"; "required": false; }; }, { "closed": "closed"; }, never, never, false, never>;
 }
 
 interface IRadioButton {
     label: string;
     value: any;
     description?: string;
+    tooltip?: string;
 }
 declare class RadioButtonComponent extends FxComponent<IRadioButton> implements AfterViewInit {
     private ref;
     label?: string;
+    tooltip: string;
     required?: boolean;
     options: {
         label: string;
         value: any;
         icon?: any;
+        tooltip?: string;
     }[];
     disabled: boolean;
     errorMessages: ErrorMessages;
@@ -605,7 +610,7 @@ declare class RadioButtonComponent extends FxComponent<IRadioButton> implements
     setDisabledState?(isDisabled: boolean): void;
     onSelectValue(value: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<RadioButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<RadioButtonComponent, "fx-ui-radio", never, { "label": { "alias": "label"; "required": false; }; "required": { "alias": "required"; "required": false; }; "options": { "alias": "options"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "errorMessages": { "alias": "errorMessages"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RadioButtonComponent, "fx-ui-radio", never, { "label": { "alias": "label"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "required": { "alias": "required"; "required": false; }; "options": { "alias": "options"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "errorMessages": { "alias": "errorMessages"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, never, false, never>;
 }
 
 declare class CheckboxComponent extends FxComponent<any> implements AfterViewInit {
@@ -665,7 +670,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.11",
+  "version": "0.0.13",
   "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/input/input.component.html

@@ -5,6 +5,16 @@
       @if (required) {
         <span class="txt-required">*</span>
       }
+      @if (tooltip) {
+        <fx-ui-hero-icon
+          icon="information-circle"
+          [size]="16"
+          class="inline-block align-middle ml-0.5 text-text-secondary cursor-help relative -top-px"
+          [matTooltip]="tooltip"
+          matTooltipPosition="above"
+          matTooltipClass="text-text-primary text-xs font-semibold"
+        ></fx-ui-hero-icon>
+      }
     </label>
   }
 

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

@@ -1,9 +1,22 @@
 <div class="w-full rounded-lg overflow-hidden" [class]="class" role="radiogroup">
-  @if (label){
-  <label class="txt-field-label">
-    {{ label }}
-    @if(required){<span class="txt-required">*</span>} </label
-  >}
+  @if (label) {
+    <label class="txt-field-label">
+      {{ label }}
+      @if (required) {
+        <span class="txt-required">*</span>
+      }
+      @if (tooltip) {
+        <fx-ui-hero-icon
+          icon="information-circle"
+          [size]="16"
+          class="inline-block align-middle ml-0.5 text-text-secondary cursor-help relative -top-px"
+          [matTooltip]="tooltip"
+          matTooltipPosition="above"
+          matTooltipClass="text-text-primary text-xs font-semibold"
+        ></fx-ui-hero-icon>
+      }
+    </label>
+  }
 
   <button
     *ngFor="let opt of options"
@@ -14,22 +27,27 @@
     [disabled]="disabled"
     [class.text-gray-900]="value !== opt.value"
     class="flex-1 px-normal w-full flex items-center gap-normal h-10 rounded-md hover:bg-bg-hover transition-all duration-150 disabled:opacity-60 disabled:cursor-not-allowed"
+    [matTooltip]="opt.tooltip || ''"
+    matTooltipPosition="right"
+    matTooltipClass="text-text-primary text-xs font-semibold"
   >
     <span
       [ngClass]="{
         'radio-checked': value === opt.value,
-        'radio-uncheck': value !== opt.value
+        'radio-uncheck': value !== opt.value,
       }"
       class="radio-container"
     >
-      @if(value === opt.value) {<span class="radio-dot"></span>}
+      @if (value === opt.value) {
+        <span class="radio-dot"></span>
+      }
     </span>
 
     <span class="txt-default mb-0">{{ opt.label }}</span>
   </button>
-  @if (invalid){
-  <div class="txt-invalid">
-    {{ getErrorMessage(label) }}
-  </div>
+  @if (invalid) {
+    <div class="txt-invalid">
+      {{ getErrorMessage(label) }}
+    </div>
   }
 </div>

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

@@ -5,6 +5,16 @@
       @if (required) {
         <span class="txt-required">*</span>
       }
+      @if (tooltip) {
+        <fx-ui-hero-icon
+          icon="information-circle"
+          [size]="16"
+          class="inline-block align-middle ml-0.5 text-text-secondary cursor-help relative -top-px"
+          [matTooltip]="tooltip"
+          matTooltipPosition="above"
+          matTooltipClass="text-text-primary text-xs font-semibold"
+        ></fx-ui-hero-icon>
+      }
     </label>
   }
 

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,12 +45,14 @@ 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: '640px',
-        md: '960px',
-        lg: '1280px',
-        xl: '2560px'
+        sm: '480px',
+        md: '720px',
+        lg: '1080px',
+        xl: '1920px'
       },
       boxShadow: {
         sm: '0 1px 2px 0 rgb(var(--shadow-color) / 0.05)',

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;