@foxeltech/angular-ui 0.0.9 → 0.0.11

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

@@ -521,7 +521,6 @@ declare class InputComponent extends FxComponent<string> implements AfterViewIni
     };
     required: string | boolean;
     disabled: boolean;
-    iconClass?: string;
     suffixIcon?: string;
     class?: any;
     maxlength?: number;
@@ -541,7 +540,7 @@ 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; }; "iconClass": { "alias": "iconClass"; "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; }; "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 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@foxeltech/angular-ui",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "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

@@ -33,11 +33,17 @@
         [disabled]="disabled"
       >
         @if (type === 'password') {
-          <i class="material-symbols-outlined text-lg select-none">{{
-            showPassword ? 'visibility_off' : 'visibility'
-          }}</i>
+          <fx-ui-hero-icon
+            [icon]="showPassword ? 'eye-slash' : 'eye'"
+            [size]="18"
+            class="text-text-primary"
+          ></fx-ui-hero-icon>
         } @else if (suffixIcon) {
-          <i [class]="iconClass" class="text-lg select-none">{{ suffixIcon }}</i>
+          <fx-ui-hero-icon
+            [icon]="suffixIcon"
+            [size]="18"
+            class="text-text-primary"
+          ></fx-ui-hero-icon>
         }
       </button>
     }

package/tailwind.config.js

@@ -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%;