carriera-intern-components 1.1.164 → 1.1.166

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carriera-intern-components",
-  "version": "1.1.164",
+  "version": "1.1.166",
   "peerDependencies": {
     "@angular/common": "^19.2.14",
     "@angular/core": "^19.2.14"

package/public/assets/icons/fuel-contact/cai-user-2.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 11.1244C11.0012 11.1244 11.9798 10.8276 12.8123 10.2714C13.6448 9.71519 14.2936 8.92464 14.6768 7.99971C15.06 7.07477 15.1603 6.05699 14.965 5.07504C14.7698 4.0931 14.2878 3.19109 13.5799 2.48309C12.8721 1.77508 11.9702 1.29286 10.9883 1.09741C10.0064 0.901955 8.98856 1.00204 8.06354 1.38502C7.13852 1.768 6.34783 2.41666 5.79146 3.249C5.23508 4.08133 4.938 5.05995 4.93778 6.06111C4.93778 7.4038 5.47108 8.69151 6.4204 9.64104C7.36972 10.5906 8.65731 11.1242 10 11.1244ZM14.5 12.2489H12.5633C11.7598 12.6194 10.8854 12.8113 10.0006 12.8113C9.11568 12.8113 8.24133 12.6194 7.43778 12.2489H5.5C4.30653 12.2489 3.16193 12.723 2.31802 13.5669C1.47411 14.4108 1 15.5554 1 16.7489L1 17.3111C1 17.7587 1.17782 18.188 1.49434 18.5046C1.81086 18.8211 2.24015 18.9989 2.68778 18.9989H17.3122C17.5339 18.9989 17.7533 18.9552 17.9581 18.8704C18.1629 18.7856 18.3489 18.6613 18.5057 18.5046C18.6624 18.3478 18.7867 18.1618 18.8715 17.957C18.9563 17.7522 19 17.5328 19 17.3111V16.7489C19 15.5554 18.5259 14.4108 17.682 13.5669C16.8381 12.723 15.6935 12.2489 14.5 12.2489Z" fill="currentColor"/>
+</svg>

package/public/assets/icons/interaction/cai-copy.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.31901 19.0002C5.62052 19.0002 4.92874 18.8628 4.28342 18.5955C3.6381 18.3282 3.05179 17.936 2.55789 17.4421C2.06398 16.9482 1.6723 16.3621 1.405 15.7168C1.1377 15.0715 1 14.3797 1 13.6812V6.77691C1 6.48222 1.11715 6.19969 1.32552 5.99132C1.53389 5.78295 1.81643 5.6658 2.11111 5.6658H3.22222C3.51691 5.6658 3.79944 5.78295 4.00781 5.99132C4.21619 6.19969 4.33333 6.48222 4.33333 6.77691V12.6732C4.33363 13.4667 4.64898 14.228 5.21007 14.7891C5.77116 15.3502 6.53219 15.6655 7.32568 15.6658H13.2222C13.5169 15.6658 13.7994 15.7829 14.0078 15.9913C14.2162 16.1997 14.3333 16.4822 14.3333 16.7769V17.888C14.3333 18.1827 14.2162 18.4652 14.0078 18.6736C13.7994 18.882 13.5169 18.9991 13.2222 18.9991L6.31901 19.0002ZM7.88775 14.3333C7.29838 14.3333 6.73305 14.099 6.3163 13.6823C5.89955 13.2655 5.66553 12.7005 5.66553 12.1111V3.22222C5.66553 2.63285 5.89955 2.06779 6.3163 1.65104C6.73305 1.23429 7.29838 1 7.88775 1H16.7766C17.366 1 17.9313 1.23429 18.3481 1.65104C18.7648 2.06779 18.9989 2.63285 18.9989 3.22222V12.1111C18.9989 12.7005 18.7648 13.2655 18.3481 13.6823C17.9313 14.099 17.366 14.3333 16.7766 14.3333H7.88775ZM8.99886 11H15.6655V4.33333H8.99886V11Z" fill="currentColor"/>
+</svg>

package/public/assets/json/icons.json

@@ -188,6 +188,10 @@
       "iconName": "cai-cancel",
       "iconPath": "/assets/icons/interaction/cai-cancel.svg"
     },
+    {
+      "iconName": "cai-copy",
+      "iconPath": "/assets/icons/interaction/cai-copy.svg"
+    },
     {
       "iconName": "cai-checkmark",
       "iconPath": "/assets/icons/general/cai-checkmark.svg"
@@ -288,6 +292,10 @@
       "iconName": "cai-share",
       "iconPath": "/assets/icons/fuel-contact/cai-share.svg"
     },
+    {
+      "iconName": "cai-user-2",
+      "iconPath": "/assets/icons/fuel-contact/cai-user-2.svg"
+    },
     {
       "iconName": "cai-ltl-single",
       "iconPath": "/assets/icons/load/cai-ltl-single.svg"

package/public-api.d.ts

@@ -5,3 +5,5 @@ export * from './app/components/input/input.component';
 export * from './app/components/drop-zone/drop-zone.component';
 export * from './app/components/input-datetime-picker/cai-input-datetime-picker.component';
 export * from './app/components/input-datetime-picker/components/cai-custom-datetime-pickers/config';
+export * from './app/components/avatar/avatar.component';
+export * from './app/components/copy/copy.component';

package/src/styles/_variables.scss

@@ -54,4 +54,235 @@ $font-regular: 400;
 $font-medium: 500;
 $font-semibold: 600;
 $font-bold: 700;
-$font-extrabold: 800;
+$font-extrabold: 800;
+
+// Colors
+
+// White color palette
+$color-white-50: #ffffff;
+$color-white-100: #f7f7f7;
+$color-white-200: #eeeeee;
+$color-white-300: #e5e5e5;
+$color-white-500: #dadada;
+$color-white-700: #cccccc;
+
+// Black color palette
+$color-black-50: #aaaaaa;
+$color-black-100: #919191;
+$color-black-200: #6c6c6c;
+$color-black-300: #424242;
+$color-black-500: #2f2f2f;
+$color-black-700: #1d1d1d;
+
+// Blue color palette
+$color-blue-50: #e9effd;
+$color-blue-100: #bed0f9;
+$color-blue-200: #92b1f5;
+$color-blue-300: #6692f1;
+$color-blue-500: #3b73ed;
+$color-blue-700: #0b49d1;
+
+// Red color palette
+$color-red-50: #fbe9e9;
+$color-red-100: #f4bebe;
+$color-red-200: #ed9292;
+$color-red-300: #e66767;
+$color-red-500: #df3c3c;
+$color-red-700: #c20c0c;
+
+// Green color palette
+$color-green-50: #e7f4f3;
+$color-green-100: #b6dfdb;
+$color-green-200: #86c9c3;
+$color-green-300: #56b4ac;
+$color-green-500: #259f94;
+$color-green-700: #007a6e;
+
+// Yellow color palette
+$color-yellow-50: #fef4e8;
+$color-yellow-100: #fddeb9;
+$color-yellow-200: #fbc88b;
+$color-yellow-300: #fab15c;
+$color-yellow-500: #f89b2e;
+$color-yellow-700: #de7700;
+
+// Purple color palette
+$color-purple-50: #f4ebfd;
+$color-purple-100: #dfc2f9;
+$color-purple-200: #c999f4;
+$color-purple-300: #b370f0;
+$color-purple-500: #9e47ec;
+$color-purple-700: #7919d0;
+
+// Navy color palette
+$color-navy-50: #e7e7fa;
+$color-navy-100: #b7b6f1;
+$color-navy-200: #8785e8;
+$color-navy-300: #5755df;
+$color-navy-500: #2724d6;
+$color-navy-700: #0000b8;
+
+// Brown color palette
+$color-brown-50: #f1ede9;
+$color-brown-100: #d6c9bd;
+$color-brown-200: #bca691;
+$color-brown-300: #a08266;
+$color-brown-500: #865e3a;
+$color-brown-700: #5f330a;
+
+// Gold color palette
+$color-gold-50: #faf3e6;
+$color-gold-100: #efdcb4;
+$color-gold-200: #e4c481;
+$color-gold-300: #daad4f;
+$color-gold-500: #cf961d;
+$color-gold-700: #b07000;
+
+// Lime color palette
+$color-lime-50: #ecf6e7;
+$color-lime-100: #c5e3b6;
+$color-lime-200: #9ed186;
+$color-lime-300: #77bf56;
+$color-lime-500: #50ac25;
+$color-lime-700: #238900;
+
+// Magenta color palette
+$color-magenta-50: #fbe9f1;
+$color-magenta-100: #f4bed6;
+$color-magenta-200: #ed93bb;
+$color-magenta-300: #e668a0;
+$color-magenta-500: #df3d85;
+$color-magenta-700: #c10d5d;
+
+// Orange color palette
+$color-orange-50: #ffefea;
+$color-orange-100: #ffcfc0;
+$color-orange-200: #ffb097;
+$color-orange-300: #ff906d;
+$color-orange-500: #ff7043;
+$color-orange-700: #e54715;
+
+// Azure color palette
+$color-azure-50: #e5f7fc;
+$color-azure-100: #b2e6f7;
+$color-azure-200: #80d6f1;
+$color-azure-300: #4dc5eb;
+$color-azure-500: #1ab5e6;
+$color-azure-700: #0093c9;
+
+// Palette
+
+$color-palettes: (
+  white: (
+    50: $color-white-50,
+    100: $color-white-100,
+    200: $color-white-200,
+    300: $color-white-300,
+    500: $color-white-500,
+    700: $color-white-700,
+  ),
+  black: (
+    50: $color-black-50,
+    100: $color-black-100,
+    200: $color-black-200,
+    300: $color-black-300,
+    500: $color-black-500,
+    700: $color-black-700,
+  ),
+  blue: (
+    50: $color-blue-50,
+    100: $color-blue-100,
+    200: $color-blue-200,
+    300: $color-blue-300,
+    500: $color-blue-500,
+    700: $color-blue-700,
+  ),
+  red: (
+    50: $color-red-50,
+    100: $color-red-100,
+    200: $color-red-200,
+    300: $color-red-300,
+    500: $color-red-500,
+    700: $color-red-700,
+  ),
+  green: (
+    50: $color-green-50,
+    100: $color-green-100,
+    200: $color-green-200,
+    300: $color-green-300,
+    500: $color-green-500,
+    700: $color-green-700,
+  ),
+  yellow: (
+    50: $color-yellow-50,
+    100: $color-yellow-100,
+    200: $color-yellow-200,
+    300: $color-yellow-300,
+    500: $color-yellow-500,
+    700: $color-yellow-700,
+  ),
+  purple: (
+    50: $color-purple-50,
+    100: $color-purple-100,
+    200: $color-purple-200,
+    300: $color-purple-300,
+    500: $color-purple-500,
+    700: $color-purple-700,
+  ),
+  orange: (
+    50: $color-orange-50,
+    100: $color-orange-100,
+    200: $color-orange-200,
+    300: $color-orange-300,
+    500: $color-orange-500,
+    700: $color-orange-700,
+  ),
+  azure: (
+    50: $color-azure-50,
+    100: $color-azure-100,
+    200: $color-azure-200,
+    300: $color-azure-300,
+    500: $color-azure-500,
+    700: $color-azure-700,
+  ),
+  gold: (
+    50: $color-gold-50,
+    100: $color-gold-100,
+    200: $color-gold-200,
+    300: $color-gold-300,
+    500: $color-gold-500,
+    700: $color-gold-700,
+  ),
+  brown: (
+    50: $color-brown-50,
+    100: $color-brown-100,
+    200: $color-brown-200,
+    300: $color-brown-300,
+    500: $color-brown-500,
+    700: $color-brown-700,
+  ),
+  navy: (
+    50: $color-navy-50,
+    100: $color-navy-100,
+    200: $color-navy-200,
+    300: $color-navy-300,
+    500: $color-navy-500,
+    700: $color-navy-700,
+  ),
+  lime: (
+    50: $color-lime-50,
+    100: $color-lime-100,
+    200: $color-lime-200,
+    300: $color-lime-300,
+    500: $color-lime-500,
+    700: $color-lime-700,
+  ),
+  magenta: (
+    50: $color-magenta-50,
+    100: $color-magenta-100,
+    200: $color-magenta-200,
+    300: $color-magenta-300,
+    500: $color-magenta-500,
+    700: $color-magenta-700,
+  ),
+);

package/src/styles/tooltip.scss

@@ -1,6 +1,6 @@
-@import "variables";
+@use "variables" as *;
 
-.tooltip {
+.tooltip:not(.app-ca-main-tooltip):not(.app-main-tooltip) {
   font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system,
     BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
     "Apple Color Emoji", "Segoe UI Emoji" !important;
@@ -19,6 +19,12 @@
     font-size: 11px !important;
     font-weight: 600 !important;
     color: #ffffff !important;
+
+    transition: background-color 0.1s ease-in-out;
+
+    &:empty {
+      display: none !important;
+    }
   }
 }
 
@@ -32,3 +38,45 @@
     background-color: #df3c3c !important;
   }
 }
+
+// Override the default tooltip background when custom bg classes are applied
+.tooltip:not(.app-ca-main-tooltip):not(.app-main-tooltip) {
+  &[class*="tooltip-bg-"] {
+    .tooltip-inner {
+      background-color: inherit !important;
+    }
+  }
+}
+
+@each $color-name, $shades in $color-palettes {
+  .tooltip:not(.app-ca-main-tooltip):not(.app-main-tooltip) {
+    &.tooltip-bg-#{$color-name} {
+      @each $shade, $color-value in $shades {
+        &-#{$shade} {
+          .tooltip-inner {
+            background-color: $color-value !important;
+          }
+
+          // Opacity variants only for -500
+          @if $shade == 500 {
+            &\/20 {
+              .tooltip-inner {
+                background-color: rgba($color-value, 0.2) !important;
+              }
+            }
+            &\/40 {
+              .tooltip-inner {
+                background-color: rgba($color-value, 0.4) !important;
+              }
+            }
+            &\/70 {
+              .tooltip-inner {
+                background-color: rgba($color-value, 0.7) !important;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/styles/utility/colors.scss

@@ -0,0 +1,265 @@
+@use "../variables" as *;
+
+// Generate text color utilities with opacity variants only for -500
+@each $color-name, $shades in $color-palettes {
+  .text-#{$color-name} {
+    @each $shade, $color-value in $shades {
+      &-#{$shade} {
+        color: $color-value;
+
+        // Opacity variants only for -500
+        @if $shade == 500 {
+          &\/20 {
+            color: rgba($color-value, 0.2);
+          }
+          &\/40 {
+            color: rgba($color-value, 0.4);
+          }
+          &\/70 {
+            color: rgba($color-value, 0.7);
+          }
+        }
+      }
+    }
+  }
+}
+
+// Generate background color utilities with opacity variants only for -500
+@each $color-name, $shades in $color-palettes {
+  .bg-#{$color-name} {
+    @each $shade, $color-value in $shades {
+      &-#{$shade} {
+        background-color: $color-value;
+
+        // Opacity variants only for -500
+        @if $shade == 500 {
+          &\/20 {
+            background-color: rgba($color-value, 0.2);
+          }
+          &\/40 {
+            background-color: rgba($color-value, 0.4);
+          }
+          &\/70 {
+            background-color: rgba($color-value, 0.7);
+          }
+        }
+      }
+    }
+  }
+}
+
+// Generate border color utilities with opacity variants only for -500
+@each $color-name, $shades in $color-palettes {
+  .border-#{$color-name} {
+    @each $shade, $color-value in $shades {
+      &-#{$shade} {
+        border-color: $color-value;
+
+        // Opacity variants only for -500
+        @if $shade == 500 {
+          &\/20 {
+            border-color: rgba($color-value, 0.2);
+          }
+          &\/40 {
+            border-color: rgba($color-value, 0.4);
+          }
+          &\/70 {
+            border-color: rgba($color-value, 0.7);
+          }
+        }
+      }
+    }
+  }
+}
+
+// Generate fill utilities for SVGs with opacity variants only for -500
+@each $color-name, $shades in $color-palettes {
+  .fill-#{$color-name} {
+    @each $shade, $color-value in $shades {
+      &-#{$shade} {
+        fill: $color-value;
+
+        // Opacity variants only for -500
+        @if $shade == 500 {
+          &\/20 {
+            fill: rgba($color-value, 0.2);
+          }
+          &\/40 {
+            fill: rgba($color-value, 0.4);
+          }
+          &\/70 {
+            fill: rgba($color-value, 0.7);
+          }
+        }
+      }
+    }
+  }
+}
+
+// Generate stroke utilities for SVGs with opacity variants only for -500
+@each $color-name, $shades in $color-palettes {
+  .stroke-#{$color-name} {
+    @each $shade, $color-value in $shades {
+      &-#{$shade} {
+        stroke: $color-value;
+
+        // Opacity variants only for -500
+        @if $shade == 500 {
+          &\/20 {
+            stroke: rgba($color-value, 0.2);
+          }
+          &\/40 {
+            stroke: rgba($color-value, 0.4);
+          }
+          &\/70 {
+            stroke: rgba($color-value, 0.7);
+          }
+        }
+      }
+    }
+  }
+}
+
+// Hover states for text colors with opacity variants only for -500
+@each $color-name, $shades in $color-palettes {
+  .hover\:text-#{$color-name} {
+    @each $shade, $color-value in $shades {
+      &-#{$shade}:hover {
+        color: $color-value;
+
+        // Opacity variants only for -500
+        @if $shade == 500 {
+          &\/20 {
+            color: rgba($color-value, 0.2);
+          }
+          &\/40 {
+            color: rgba($color-value, 0.4);
+          }
+          &\/70 {
+            color: rgba($color-value, 0.7);
+          }
+        }
+      }
+    }
+  }
+}
+
+// Hover states for background colors with opacity variants only for -500
+@each $color-name, $shades in $color-palettes {
+  .hover\:bg-#{$color-name} {
+    @each $shade, $color-value in $shades {
+      &-#{$shade}:hover {
+        background-color: $color-value;
+
+        // Opacity variants only for -500
+        @if $shade == 500 {
+          &\/20 {
+            background-color: rgba($color-value, 0.2);
+          }
+          &\/40 {
+            background-color: rgba($color-value, 0.4);
+          }
+          &\/70 {
+            background-color: rgba($color-value, 0.7);
+          }
+        }
+      }
+    }
+  }
+}
+
+// Focus states for text colors with opacity variants only for -500
+@each $color-name, $shades in $color-palettes {
+  .focus\:text-#{$color-name} {
+    @each $shade, $color-value in $shades {
+      &-#{$shade}:focus-visible {
+        color: $color-value;
+
+        // Opacity variants only for -500
+        @if $shade == 500 {
+          &\/20 {
+            color: rgba($color-value, 0.2);
+          }
+          &\/40 {
+            color: rgba($color-value, 0.4);
+          }
+          &\/70 {
+            color: rgba($color-value, 0.7);
+          }
+        }
+      }
+    }
+  }
+}
+
+// Focus states for background colors with opacity variants only for -500
+@each $color-name, $shades in $color-palettes {
+  .focus\:bg-#{$color-name} {
+    @each $shade, $color-value in $shades {
+      &-#{$shade}:focus-visible {
+        background-color: $color-value;
+
+        // Opacity variants only for -500
+        @if $shade == 500 {
+          &\/20 {
+            background-color: rgba($color-value, 0.2);
+          }
+          &\/40 {
+            background-color: rgba($color-value, 0.4);
+          }
+          &\/70 {
+            background-color: rgba($color-value, 0.7);
+          }
+        }
+      }
+    }
+  }
+}
+
+// Active states for text colors with opacity variants only for -500
+@each $color-name, $shades in $color-palettes {
+  .active\:text-#{$color-name} {
+    @each $shade, $color-value in $shades {
+      &-#{$shade}:active {
+        color: $color-value;
+
+        // Opacity variants only for -500
+        @if $shade == 500 {
+          &\/20 {
+            color: rgba($color-value, 0.2);
+          }
+          &\/40 {
+            color: rgba($color-value, 0.4);
+          }
+          &\/70 {
+            color: rgba($color-value, 0.7);
+          }
+        }
+      }
+    }
+  }
+}
+
+// Active states for background colors with opacity variants only for -500
+@each $color-name, $shades in $color-palettes {
+  .active\:bg-#{$color-name} {
+    @each $shade, $color-value in $shades {
+      &-#{$shade}:active {
+        background-color: $color-value;
+
+        // Opacity variants only for -500
+        @if $shade == 500 {
+          &\/20 {
+            background-color: rgba($color-value, 0.2);
+          }
+          &\/40 {
+            background-color: rgba($color-value, 0.4);
+          }
+          &\/70 {
+            background-color: rgba($color-value, 0.7);
+          }
+        }
+      }
+    }
+  }
+}

package/src/styles/utility/utilities.scss

@@ -0,0 +1,6 @@
+@use "colors";
+@use "../variables" as *;
+
+.transition {
+  transition: all 0.2s ease-in-out;
+}

package/src/styles.scss

@@ -3,9 +3,12 @@
 @use "styles/custompickers";
 @use "styles/popover";
 @use "styles/cropper";
+@use "styles/utility/utilities";
 @use "styles/tooltip";
+
 /* Importing Bootstrap SCSS file. */
 @use "bootstrap/scss/bootstrap";
+
 @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap");
 
 html {