@foxeltech/angular-ui 0.0.11 → 0.0.12

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 {

package/package.json

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

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

@@ -44,10 +44,10 @@ module.exports = {
           'linear-gradient(135deg, rgb(var(--gradient-primary-start)) 0%, rgb(var(--gradient-primary-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)',