carriera-intern-components 1.1.15 → 1.1.21

package/src/styles/popover.scss

@@ -0,0 +1,18 @@
+@import "variables";
+
+.tagPopover {
+  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;
+  --bs-body-bg: #2f2f2f !important;
+  border: none !important;
+
+  .popover-arrow {
+    display: none !important;
+  }
+
+  .popover-body {
+    border-radius: 3px;
+    padding: 0px !important;
+  }
+}

package/src/styles/review_variables.scss

@@ -0,0 +1,40 @@
+$color-span: #F77D3B;
+$color-negative: #DF3C3C;
+$color-like: #56B4AC;
+$color-dislike: #E66767;
+$color-trash-fill: #C20C0C;
+$color-trash-background: #F4BEBE;
+$color-tooltip: rgba(66, 66, 66, 1);
+$color-divider: #DADADA;
+
+$color-light-blue: #92B1F5;
+$color-blue: #3B73ED;
+$color-blue-transparent: #3b73ed3f;
+
+$color-icon-base: #6692F1;
+$color-icon-base-hover: #0B49D1;
+$color-icon-black: #6C6C6C;
+$color-review-icon-dark: #919191;
+$color-review-icon-dark-hover: #424242;
+
+
+$color-light: #FFFFFFB2;
+$color-light-disabled: #F7F7F7;
+$color-light-gray: #EEEEEE;
+$color-review-hover: #CCCCCC;
+$color-dark: #1D1D1D;
+
+$color-text-gray: #AAAAAA;
+
+$color-modal-dark-bg: #2F2F2F;
+
+$color-rect-positive: #E9EFFD;
+$color-icon: rgba(145, 145, 145, 0.4);
+$color-filter-hover: rgba(145, 145, 145, 0.2);
+
+
+
+
+
+
+

package/src/styles/tooltip.scss

@@ -0,0 +1,85 @@
+@use "variables" as *;
+
+.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;
+  margin-bottom: 8px !important;
+  &.input-tooltip {
+    margin-bottom: 0 !important;
+  }
+  &.tooltip-m-t-4 {
+    margin-top: 4px !important;
+  }
+  .tooltip-arrow {
+    display: none !important;
+  }
+  .tooltip-inner {
+    border-radius: 3px !important;
+    background-color: #424242 !important;
+    padding: 2px 6px !important;
+    line-height: 14px !important;
+    font-size: 11px !important;
+    font-weight: 600 !important;
+    color: #ffffff !important;
+
+    transition: background-color 0.1s ease-in-out;
+
+    &:empty {
+      display: none !important;
+    }
+  }
+}
+
+.tooltip.show {
+  opacity: 1 !important;
+}
+
+.tooltip-delete,
+.error-tooltip {
+  .tooltip-inner {
+    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

@@ -1,8 +1,14 @@
 /* You can add global styles to this file, and also import other style files */
 @use "styles/variables";
 @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 {
@@ -20,72 +26,3 @@ body {
     BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
     "Apple Color Emoji", "Segoe UI Emoji";
 }
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  border-width: 0;
-  border-style: solid;
-  border-color: #e5e7eb;
-}
-
-p,
-ul,
-ol,
-dl,
-blockquote,
-figure,
-pre {
-  margin: 0;
-}
-
-button,
-input,
-select,
-textarea {
-  font-family: inherit;
-  font-size: 100%;
-  line-height: 1.15;
-  margin: 0;
-}
-
-img,
-svg,
-video,
-canvas,
-audio,
-iframe,
-embed,
-object {
-  display: block;
-  vertical-align: middle;
-  max-width: 100%;
-  height: auto;
-}
-
-/* Remove default list styles on ul, ol */
-ul,
-ol {
-  padding-left: 1.5rem;
-  list-style-position: outside;
-}
-
-/* Link styles */
-a {
-  color: inherit;
-  text-decoration: inherit;
-}
-
-/* Tables */
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-/* Remove outline for focus on mouse users, but keep it for keyboard */
-:focus:not(:focus-visible) {
-  outline: none;
-}
-
-

package/app/components/input-datetime-picker/pipes/input-clear-class.pipe.d.ts

@@ -1,14 +0,0 @@
-import { PipeTransform } from '@angular/core';
-import { AbstractControl } from '@angular/forms';
-import { ICaInput } from '../components/cai-custom-datetime-pickers/config';
-import * as i0 from "@angular/core";
-export declare enum DropdownTemplateTypeEnum {
-    PAYROLL_TRUCKS = "payroll-trucks"
-}
-export declare class InputClearClassPipe implements PipeTransform {
-    transform(getSuperControl: AbstractControl<any, any> | null, isFocusInput: boolean, inputConfig: ICaInput, incorrectValue: boolean, selectedDropdownLabelColor: boolean, template: string, value: string): {
-        [key: string]: boolean | undefined;
-    };
-    static ɵfac: i0.ɵɵFactoryDeclaration<InputClearClassPipe, never>;
-    static ɵpipe: i0.ɵɵPipeDeclaration<InputClearClassPipe, "inputClearClass", true>;
-}

package/app/components/input-datetime-picker/pipes/input-date-time-container-class.pipe.d.ts

@@ -1,11 +0,0 @@
-import { PipeTransform } from '@angular/core';
-import { AbstractControl } from '@angular/forms';
-import { ICaInput } from '../components/cai-custom-datetime-pickers/config';
-import * as i0 from "@angular/core";
-export declare class InputDateTimeContainerClassPipe implements PipeTransform {
-    transform(getSuperControl: AbstractControl<any, any> | null, isFocusInput: boolean, inputConfig: ICaInput, value: string, isDisabledInput?: boolean, invalid?: boolean, isTouchedInput?: boolean): {
-        [key: string]: boolean | undefined | null | string;
-    };
-    static ɵfac: i0.ɵɵFactoryDeclaration<InputDateTimeContainerClassPipe, never>;
-    static ɵpipe: i0.ɵɵPipeDeclaration<InputDateTimeContainerClassPipe, "inputDateTimeContainerClass", true>;
-}

package/app/components/input-datetime-picker/pipes/input-dropdown-arrow-class.pipe.d.ts

@@ -1,11 +0,0 @@
-import { PipeTransform } from '@angular/core';
-import { AbstractControl } from '@angular/forms';
-import { ICaInput } from '../components/cai-custom-datetime-pickers/config';
-import * as i0 from "@angular/core";
-export declare class InputDropdownArrowClassPipe implements PipeTransform {
-    transform(getSuperControl: AbstractControl<any, any> | null, isFocusInput: boolean, inputConfig: ICaInput, isTouchedInput: boolean, value: string): {
-        [key: string]: boolean | undefined;
-    };
-    static ɵfac: i0.ɵɵFactoryDeclaration<InputDropdownArrowClassPipe, never>;
-    static ɵpipe: i0.ɵɵPipeDeclaration<InputDropdownArrowClassPipe, "inputDropdownArrowClass", true>;
-}

package/app/components/input-datetime-picker/pipes/input-placeholder-icon.class.pipe.d.ts

@@ -1,11 +0,0 @@
-import { PipeTransform } from "@angular/core";
-import { AbstractControl } from "@angular/forms";
-import { ICaInput } from "../components/cai-custom-datetime-pickers/config";
-import * as i0 from "@angular/core";
-export declare class InputPlaceholderIconClassPipe implements PipeTransform {
-    transform(getSuperControl: AbstractControl<any, any> | null, isFocusInput: boolean, inputConfig: ICaInput, selectedDropdownLabelColor: any | null, isTouchedInput: boolean, isEditInput: boolean, value: string): {
-        [key: string]: boolean | undefined;
-    };
-    static ɵfac: i0.ɵɵFactoryDeclaration<InputPlaceholderIconClassPipe, never>;
-    static ɵpipe: i0.ɵɵPipeDeclaration<InputPlaceholderIconClassPipe, "inputPlaceholderIconClass", true>;
-}

package/app/components/input-datetime-picker/pipes/show-clear.pipe.d.ts

@@ -1,8 +0,0 @@
-import { PipeTransform } from "@angular/core";
-import { ICaInput } from "../components/cai-custom-datetime-pickers/config";
-import * as i0 from "@angular/core";
-export declare class ShowClearPipe implements PipeTransform {
-    transform(inputConfig: ICaInput, disabled?: boolean): boolean | undefined;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ShowClearPipe, never>;
-    static ɵpipe: i0.ɵɵPipeDeclaration<ShowClearPipe, "showClear", true>;
-}

package/app/directives/hover-svg-directives.d.ts

@@ -1,15 +0,0 @@
-import { ElementRef, Renderer2 } from "@angular/core";
-import * as i0 from "@angular/core";
-export declare class HoverSvgDirective {
-    private elRef;
-    private renderer2;
-    set fill(value: string | null | undefined);
-    set fillHover(value: string | null | undefined);
-    _fill: string;
-    _fillHover: string;
-    constructor(elRef: ElementRef, renderer2: Renderer2);
-    onMouseOver(): void;
-    onMouseLeave(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<HoverSvgDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<HoverSvgDirective, "[appHoverSvg]", never, { "fill": { "alias": "fill"; "required": false; }; "fillHover": { "alias": "fillHover"; "required": false; }; }, {}, never, never, true, never>;
-}

package/app/directives/index.d.ts

@@ -1 +0,0 @@
-export * from './hover-svg-directives';