@foxeltech/angular-ui 0.0.10 → 0.0.12

package/fonts.css

@@ -122,4 +122,116 @@
   src: url('./SpaceMono-Regular.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('./roboto/Roboto-Thin.ttf') format('truetype');
+  font-weight: 100;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('./roboto/Roboto-ThinItalic.ttf') format('truetype');
+  font-weight: 100;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('./roboto/Roboto-Light.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('./roboto/Roboto-LightItalic.ttf') format('truetype');
+  font-weight: 300;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('./roboto/Roboto-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('./roboto/Roboto-Italic.ttf') format('truetype');
+  font-weight: 400;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('./roboto/Roboto-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('./roboto/Roboto-MediumItalic.ttf') format('truetype');
+  font-weight: 500;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('./roboto/Roboto-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('./roboto/Roboto-BoldItalic.ttf') format('truetype');
+  font-weight: 700;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('./roboto/Roboto-Black.ttf') format('truetype');
+  font-weight: 900;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('./roboto/Roboto-BlackItalic.ttf') format('truetype');
+  font-weight: 900;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Roboto Condensed';
+  src: url('./roboto/Roboto-Condensed.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Roboto Condensed';
+  src: url('./roboto/Roboto-CondensedItalic.ttf') format('truetype');
+  font-weight: 400;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Roboto Condensed';
+  src: url('./roboto/Roboto-BoldCondensed.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Roboto Condensed';
+  src: url('./roboto/Roboto-BoldCondensedItalic.ttf') format('truetype');
+  font-weight: 700;
+  font-style: italic;
 }

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.10",
+  "version": "0.0.12",
   "license": "MIT",
   "main": "bundles/ui.umd.js",
   "module": "fesm2022/foxeltech-angular-ui.mjs",

package/src/lib/styles/components.css

@@ -97,7 +97,7 @@
   padding-top: 4px !important;
   padding-bottom: 4px !important;
   line-height: 24px !important;
-  font-family: 'DMSans';
+  font-family: 'Roboto';
 }
 
 .mdc-data-table__row {
@@ -108,7 +108,7 @@
 .mdc-data-table__cell {
   border-left: 1px solid rgb(var(--border-default)) !important;
   background-color: rgb(var(--bg-primary)) !important;
-  font-family: 'DMSans';
+  font-family: 'Roboto';
 }
 
 .mat-mdc-cell {
@@ -185,7 +185,7 @@ input[type='password'] {
   @apply font-semibold text-sm tracking-normal leading-5 text-text-primary;
 }
 .txt-heading-table {
-  @apply text-base font-dmsans font-semibold text-text-primary tracking-tight;
+  @apply text-base font-roboto font-semibold text-text-primary tracking-tight;
 }
 .txt-heading-compact-02 {
   @apply font-semibold text-sm tracking-normal leading-5 text-text-primary;

package/src/lib/styles/fonts.css

@@ -122,4 +122,116 @@
   src: url('./SpaceMono-Regular.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('./roboto/Roboto-Thin.ttf') format('truetype');
+  font-weight: 100;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('./roboto/Roboto-ThinItalic.ttf') format('truetype');
+  font-weight: 100;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('./roboto/Roboto-Light.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('./roboto/Roboto-LightItalic.ttf') format('truetype');
+  font-weight: 300;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('./roboto/Roboto-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('./roboto/Roboto-Italic.ttf') format('truetype');
+  font-weight: 400;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('./roboto/Roboto-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('./roboto/Roboto-MediumItalic.ttf') format('truetype');
+  font-weight: 500;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('./roboto/Roboto-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('./roboto/Roboto-BoldItalic.ttf') format('truetype');
+  font-weight: 700;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('./roboto/Roboto-Black.ttf') format('truetype');
+  font-weight: 900;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('./roboto/Roboto-BlackItalic.ttf') format('truetype');
+  font-weight: 900;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Roboto Condensed';
+  src: url('./roboto/Roboto-Condensed.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Roboto Condensed';
+  src: url('./roboto/Roboto-CondensedItalic.ttf') format('truetype');
+  font-weight: 400;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Roboto Condensed';
+  src: url('./roboto/Roboto-BoldCondensed.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Roboto Condensed';
+  src: url('./roboto/Roboto-BoldCondensedItalic.ttf') format('truetype');
+  font-weight: 700;
+  font-style: italic;
 }

package/src/lib/styles/tailwind.css

@@ -9,7 +9,7 @@
 @tailwind utilities;
 
 html, body {
-  font-family: 'DMSans';
+  font-family: 'Roboto';
   margin: 0;
   padding: 0;
   height: 100%;

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)',
@@ -72,6 +72,7 @@ module.exports = {
         dmsans: ['DMSans', 'sans-serif'],
         orbitron: ['Orbitron', 'sans-serif'],
         bevn: ['BeVietnamPro', 'sans-serif'],
+        roboto: ['Roboto', 'sans-serif'],
       },
       fontSize: {
         xs: '0.75rem',

package/tailwind.css

@@ -9,7 +9,7 @@
 @tailwind utilities;
 
 html, body {
-  font-family: 'DMSans';
+  font-family: 'Roboto';
   margin: 0;
   padding: 0;
   height: 100%;