carriera-intern-components 1.1.15 → 1.1.21

package/public-api.d.ts

@@ -1,6 +1,12 @@
-export * from './app/components/input/input.component';
-export * from './app/components/drop-zone/drop-zone.component';
-export * from './app/components/input/models';
 export * from './app/utils';
+export * from './app/components/input/models';
 export * from './app/components/pm/pm.component';
+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';
+export * from './app/components/input-address/input-address.component';
+export * from './app/components/selected-location-field/selected-business-field.component';
+export * from './app/components/input-datetime-picker/interfaces';

package/src/styles/README.md

@@ -0,0 +1,57 @@
+# Global Styles
+
+This directory contains all global styles and variables for the Carriera Intern Components library.
+
+## Structure
+
+```
+styles/
+├── index.scss          # Main entry point - imports all styles
+├── _variables.scss     # Global color and design variables
+├── review_variables.scss # Review-specific variables
+└── README.md          # This file
+```
+
+## Usage
+
+### For Library Consumers
+
+The global styles are automatically included when you import the library. The styles are bundled with the library and available through the `styleIncludePaths` configuration.
+
+### For Component Development
+
+When creating new components, you can import the global variables:
+
+```scss
+@import '../../../styles/variables';
+@import '../../../styles/review_variables';
+```
+
+Or use the main index file:
+
+```scss
+@import '../../../styles/index';
+```
+
+## Variables
+
+### Color Variables
+
+All color variables follow the naming convention:
+- `$color-text-base-*` - Text colors
+- `$color-icon-base-*` - Icon colors  
+- `$color-surface-input-*` - Input surface colors
+- `$color-inverse-*` - Dark theme colors
+
+### Adding New Variables
+
+1. Add new variables to the appropriate `_variables.scss` file
+2. Import them in `index.scss` if they should be globally available
+3. Update this README with documentation
+
+## Build Configuration
+
+The styles are configured in:
+- `angular.json` - Storybook and build configurations
+- `ng-package.json` - Library build includes
+- `public-api.ts` - Exports for TypeScript access 

package/src/styles/_variables.scss

@@ -0,0 +1,288 @@
+$color-text-base-negative: #df3c3c;
+$color-text-base-heading: #424242;
+$color-text-base-content: #2f2f2f;
+$color-text-base-content-subtle: #919191;
+$color-text-base-inverse: #ffffff;
+
+$color-icon-base-neutral: #919191;
+$color-icon-base-negative: #e66767;
+$color-icon-base-positive: #6692f1;
+$color-icon-base-inverse: #ffffffb2;
+$color-icon-base-disable: #cccccc;
+
+$color-surface-input-neutral: #eeeeee;
+$color-surface-input-neutral-hover: #dadada;
+$color-surface-input-neutral-focus: #1d1d1d;
+
+$color-surface-input-positive: #e9effd;
+$color-surface-input-positive-hover: #bed0f9;
+$color-surface-input-positive-focus: #0b49d1;
+
+$color-surface-input-negative: #fbe9e9;
+$color-surface-input-negative-hover: #f4bebe;
+$color-surface-input-negative-focus: #c20c0c;
+
+$color-surface-input-disable: #f7f7f7;
+
+$color-inverse-text-base-negative: #ed9292;
+$color-inverse-icon-base-neutral: #aaaaaa;
+$color-inverse-icon-base-negative: #ed9292;
+$color-inverse-icon-base-positive: #92b1f5;
+$color-inverse-icon-base-disable: #6c6c6c;
+$color-inverse-surface-input-neutral: #424242;
+$color-inverse-surface-input-neutral-hover: #6c6c6c;
+$color-inverse-surface-input-neutral-focus: #dadada;
+$color-inverse-surface-input-positive-no-percent: #3b73ed;
+$color-inverse-surface-input-positive: #3b73ed33;
+$color-inverse-surface-input-positive-hover: #2f519a;
+$color-inverse-surface-input-negative: #df3c3c33;
+$color-inverse-surface-input-negative-hover: #923030;
+$color-inverse-surface-input-disable: #42424266;
+
+$color-pdf: #e66767;
+$color-image: #fab15c;
+$color-video: #b370f0;
+
+$color-pdf-opacity: #df3c3c66;
+$color-image-opacity: #f89b2e66;
+$color-video-opacity: #9e47ec66;
+
+$color-light-gray: #f9f9f9;
+
+// Font weights
+$font-regular: 400;
+$font-medium: 500;
+$font-semibold: 600;
+$font-bold: 700;
+$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/cropper.scss

@@ -0,0 +1,33 @@
+@import "variables";
+
+.logoVar {
+  .img-cropper .ngx-ic-cropper {
+    width: 100% !important;
+    height: 100% !important;
+    left: 0 !important;
+    margin-left: 0 !important;
+    pointer-events: none !important;
+  }
+}
+
+.img-cropper {
+  .ngx-ic-source-image {
+    object-fit: contain !important;
+  }
+  .ngx-ic-overlay {
+    margin-left: 0 !important;
+    width: 100% !important;
+  }
+  .ngx-ic-cropper{
+    pointer-events: none !important;
+
+    .ngx-ic-move{
+        border: none !important;
+        outline: none !important;
+    }
+  }
+  .ngx-ic-cropper::after{
+    border: 5px dashed #ffffff !important;
+    opacity: 1 !important;
+  }
+}