@fxlt/common-ui 0.0.1 → 0.0.3-rc1

package/README.md

@@ -1,63 +1,3 @@
-# Ui
+# @fxlt/common-ui
 
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.3.0.
-
-## Code scaffolding
-
-Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
-
-```bash
-ng generate component component-name
-```
-
-For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
-
-```bash
-ng generate --help
-```
-
-## Building
-
-To build the library, run:
-
-```bash
-ng build ui
-```
-
-This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
-
-### Publishing the Library
-
-Once the project is built, you can publish your library by following these steps:
-
-1. Navigate to the `dist` directory:
-   ```bash
-   cd dist/ui
-   ```
-
-2. Run the `npm publish` command to publish your library to the npm registry:
-   ```bash
-   npm publish
-   ```
-
-## Running unit tests
-
-To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
-
-```bash
-ng test
-```
-
-## Running end-to-end tests
-
-For end-to-end (e2e) testing, run:
-
-```bash
-ng e2e
-```
-
-Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
-
-## Additional Resources
-
-For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
+Common UI & Service Library

package/components.css

@@ -122,7 +122,7 @@
   box-shadow: 0 2px 4px rgb(var(--shadow-color) / 0.1) !important;
 }
 
-.mat-mdc-select-arrow-wrapper .mat-mdc-select-arrow { 
+.mat-mdc-select-arrow-wrapper .mat-mdc-select-arrow {
   color: rgb(var(--text-primary)) !important;
 }
 
@@ -142,7 +142,10 @@
   background-color: rgb(var(--bg-primary)) !important;
   border-radius: 8px !important;
 }
-
+.mat-mdc-dialog-container .mat-mdc-dialog-content {
+  letter-spacing: 0 !important;
+  padding: 10px 20px !important;
+}
 
 input[type='number']::-webkit-outer-spin-button,
 input[type='number']::-webkit-inner-spin-button {
@@ -187,6 +190,9 @@ input[type='password'] {
 .txt-section-header {
   @apply mb-1 text-xl text-text-primary font-semibold tracking-normal leading-7;
 }
+.txt-dialog-header {
+  @apply text-xl text-text-primary font-semibold tracking-normal leading-7 px-xl py-semi;
+}
 .txt-section-subtitle {
   @apply text-sm text-text-secondary font-normal tracking-normal;
 }
@@ -330,7 +336,7 @@ input[type='password'] {
   @apply rounded px-semi py-small;
 }
 .tag-round {
-  @apply rounded-2xl
+  @apply rounded-2xl;
 }
 /* progress bar */
 .progress-bar-container {
@@ -381,3 +387,12 @@ input[type='password'] {
   padding-top: 16px !important;
   padding-bottom: 16px !important;
 }
+.table-action-col {
+  width: 40px;
+}
+.table-status-col {
+  width: 200px;
+}
+.dialog-container {
+  @apply rounded-lg border border-border-default;
+}

package/dialogs.css

@@ -2,71 +2,25 @@
   max-width: unset !important;
   border-radius: 8px !important;
   .mat-dialog-actions {
-      border-top: 1px solid rgb(var(--border-default)) !important;
-      margin-left: -24px;
-      margin-right: -24px;
-      padding: 12px 24px 10px 10px;
+    border-top: 1px solid rgb(var(--border-default)) !important;
+    margin-left: -24px;
+    margin-right: -24px;
+    padding: 12px 24px 10px 10px;
   }
 
   .mat-dialog-title {
-      margin-left: -24px;
-      margin-right: -24px;
-      padding-right: 24px;
-      padding-left: 24px;
-      border-bottom: 1px solid rgb(var(--border-default));
-      padding-bottom: 20px;
-  }
-  
-  .mat-dialog-content {
-      min-height: 110px;
-      letter-spacing: 0 !important;
-  }
-}
-
-.fx-dialog3 {
-  .mat-dialog-actions {
-      border-top: 1px solid rgb(var(--border-default));
-      margin-left: -24px;
-      margin-right: -24px;
-      padding: 12px 24px 10px 10px;
+    margin-left: -24px;
+    margin-right: -24px;
+    padding-right: 24px;
+    padding-left: 24px;
+    border-bottom: 1px solid rgb(var(--border-default));
+    padding-bottom: 20px;
+    letter-spacing: 0 !important;
   }
 
-  .mat-dialog-title {
-      margin-left: -24px;
-      margin-right: -24px;
-      padding-right: 24px;
-      padding-left: 24px;
-      border-bottom: 1px solid rgb(var(--border-default));
-      padding-bottom: 20px;
-  }
-  
   .mat-dialog-content {
-      min-height: 50px;
-      overflow: visible;
-      letter-spacing: 0 !important;
-  }
-}
-
-.fx-dialog4 {
-  max-width: unset !important;
-  .mat-dialog-actions {
-      border-top: 1px solid rgb(var(--border-default));
-      margin-left: -24px;
-      margin-right: -24px;
-      padding: 12px 24px 10px 10px;
-  }
-
-  .mat-dialog-title {
-      margin-left: -24px;
-      margin-right: -24px;
-      padding-right: 24px;
-      padding-left: 24px;
-      border-bottom: 1px solid rgb(var(--border-default));
-      padding-bottom: 20px;
-  }
-  
-  .mat-dialog-content {
-      min-height: 50px;
+    min-height: 110px;
+    letter-spacing: 0 !important;
   }
 }
 
@@ -75,42 +29,42 @@
   height: 100%;
 
   mat-dialog-container {
-      padding: 0;
+    padding: 0;
 
-      form.wrapped-form {
-          display: flex;
-          flex-direction: column;
-          height: 100%;
-          justify-content: space-between;
-      }
+    form.wrapped-form {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      justify-content: space-between;
+    }
 
-      .mat-dialog-title {
-          background-color: rgb(var(--bg-primary));
-          box-shadow: 0px 4px 8px rgba(26, 28, 38, 0.15);
-          color: rgb(var(--text-primary));
-          padding: 12px 20px;
-          min-height: 24px;            
+    .mat-dialog-title {
+      background-color: rgb(var(--bg-primary));
+      box-shadow: 0px 4px 8px rgba(26, 28, 38, 0.15);
+      color: rgb(var(--text-primary));
+      padding: 12px 20px;
+      min-height: 24px;
 
-          h2 {
-              font-weight: 500;
-              font-size: 18px;
-              line-height: 24px;
-          }
+      h2 {
+        font-weight: 500;
+        font-size: 18px;
+        line-height: 24px;
       }
+    }
 
-      .mat-dialog-content {
-          background: rgb(var(--bg-primary));
-          padding: 16px 20px;
-          margin: unset;
-          height: 100%;
-          max-height: unset;
-          letter-spacing: 0 !important;
-      }
+    .mat-dialog-content {
+      background: rgb(var(--bg-primary));
+      padding: 16px 20px;
+      margin: unset;
+      height: 100%;
+      max-height: unset;
+      letter-spacing: 0 !important;
+    }
 
-      .mat-dialog-actions {
-          background-color: rgb(var(--bg-primary));
-          padding: 12px 20px;
-          margin-bottom: unset;
-      }
+    .mat-dialog-actions {
+      background-color: rgb(var(--bg-primary));
+      padding: 12px 20px;
+      margin-bottom: unset;
+    }
   }
-}
+}