carriera-intern 0.0.0

package/projects/carriera-intern-components/src/app/components/text-area/text-area.component.scss

@@ -0,0 +1,294 @@
+@use "variables" as *;
+
+$bezier: cubic-bezier(0.46, 0.03, 0.51, 0.95);
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+  transition: background-color 5000s ease-in-out 0s !important;
+}
+
+input:-webkit-autofill:focus {
+  -webkit-text-fill-color: #ffffff !important;
+}
+
+input:-moz-autofill,
+input:-moz-autofill-preview {
+  filter: none;
+}
+
+*,
+*::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;
+}
+
+button {
+  background: none;
+  border: none;
+  padding: 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;
+}
+
+@mixin label-focused {
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 14px;
+  transform: translateY(-18px);
+}
+
+.text-area {
+  border: none;
+  outline: none;
+  resize: none;
+  overflow: hidden;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+
+  font-family: Montserrat;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 18px;
+  color: $color-black-500;
+
+  flex: 1;
+  min-width: 0;
+
+  field-sizing: content;
+
+  transition: color 0.1s $bezier;
+
+  &::selection {
+    background-color: #ffffff4d;
+  }
+}
+
+.text-area-container {
+  position: relative;
+  display: flex;
+  cursor: text;
+
+  padding: 4px 26px 4px 6px;
+  border-radius: 2px;
+  min-height: 26px;
+
+  background-color: $color-white-200;
+
+  &:hover {
+    background-color: $color-white-300;
+  }
+
+  transition:
+    background-color 0.1s $bezier,
+    height 0.1s $bezier;
+
+  &:has(.text-area:focus-visible) {
+    background-color: $color-black-700;
+    .text-area {
+      color: $color-white-50 !important;
+    }
+
+    .label {
+      @include label-focused;
+    }
+  }
+
+  &:not(:has(.text-area:placeholder-shown)) {
+    .checkmark-icon {
+      opacity: 1 !important;
+    }
+
+    .label {
+      @include label-focused;
+    }
+
+    background-color: $color-blue-50;
+
+    &:hover,
+    &:has(.text-area:focus-visible) {
+      background-color: $color-blue-100;
+
+      .checkmark-icon {
+        opacity: 0 !important;
+      }
+
+      .cancel-icon {
+        color: $color-blue-100 !important;
+      }
+
+      .cancel-button {
+        opacity: 1 !important;
+
+        pointer-events: auto !important;
+      }
+    }
+
+    &:has(.text-area:focus-visible) {
+      background-color: $color-blue-700;
+      .cancel-icon {
+        color: $color-blue-700 !important;
+        background-color: $color-icon-base-inverse !important;
+
+        &:hover {
+          background-color: $color-white-50 !important;
+        }
+      }
+    }
+  }
+}
+
+.checkmark-icon {
+  height: 18px;
+  width: 18px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  color: $color-blue-300;
+  opacity: 0;
+  padding: 2px;
+
+  transition: opacity 0.1s $bezier;
+  pointer-events: none;
+
+  position: absolute;
+  bottom: 4px;
+  right: 4px;
+}
+
+.cancel-button {
+  position: absolute;
+  bottom: 4px;
+  right: 4px;
+  pointer-events: none;
+  opacity: 0;
+}
+
+.cancel-icon {
+  background-color: $color-blue-300;
+  color: $color-blue-50;
+  border-radius: 1px;
+  height: 18px;
+  width: 18px;
+  padding: 0;
+  display: grid;
+  place-items: center;
+
+  transition:
+    background-color 0.1s $bezier,
+    color 0.1s $bezier,
+    opacity 0.1s $bezier,
+    transform 0.1s $bezier;
+
+  transform-box: border-box;
+  transform-origin: center;
+  will-change: transform;
+
+  svg {
+    transition: transform 0.1s $bezier;
+  }
+
+  &:hover {
+    background-color: $color-blue-700;
+    transform: scale(calc(22 / 18));
+    svg {
+      transform: scale(calc(18 / 22));
+    }
+  }
+
+  &:active {
+    transform: scale(1);
+  }
+
+  svg {
+    width: 14px;
+    height: 14px;
+  }
+}
+
+.label {
+  color: $color-black-300;
+  font-family: Montserrat;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 18px;
+
+  position: absolute;
+  top: 4px;
+  left: 6px;
+  transform: translateY(0);
+
+  transition:
+    font-size 0.1s $bezier,
+    font-weight 0.1s $bezier,
+    line-height 0.1s $bezier,
+    color 0.1s $bezier,
+    transform 0.1s $bezier;
+
+  pointer-events: none;
+  user-select: none;
+}

package/projects/carriera-intern-components/src/app/components/text-area/text-area.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TextAreaComponent } from './text-area.component';
+
+describe('TextAreaComponent', () => {
+  let component: TextAreaComponent;
+  let fixture: ComponentFixture<TextAreaComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TextAreaComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(TextAreaComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/projects/carriera-intern-components/src/app/components/text-area/text-area.component.ts

@@ -0,0 +1,213 @@
+// Angular
+import {
+  Component,
+  ElementRef,
+  input,
+  Optional,
+  output,
+  Self,
+  signal,
+  ViewChild,
+} from '@angular/core';
+import { ControlValueAccessor, NgControl } from '@angular/forms';
+
+// Bootstrap
+import { NgbModule, NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
+
+// Components
+import { SvgIconComponent } from 'angular-svg-icon';
+
+// Interfaces
+import { ITextAreaConfig } from './interfaces';
+
+/**
+ * This component is a text area component that integrates with Angular forms.
+ */
+@Component({
+  selector: 'cai-text-area',
+  templateUrl: './text-area.component.html',
+  styleUrl: './text-area.component.scss',
+  imports: [
+    // Bootstrap
+    NgbModule,
+    NgbTooltip,
+    // Components
+    SvgIconComponent,
+  ],
+})
+export class TextAreaComponent implements ControlValueAccessor {
+  // Refs
+  @ViewChild('cancelTooltip') cancelTooltip!: NgbTooltip;
+  @ViewChild('textArea') textArea!: ElementRef<HTMLTextAreaElement>;
+
+  // Inputs
+  /**
+   * Configuration object for the text area's behavior and appearance.
+   */
+  config = input<ITextAreaConfig>({});
+
+  // Signals
+  /**
+   * Holds the internal value of the text area.
+   */
+  value = signal<string>('');
+
+  /**
+   * Internal signal to track the disabled state of the text area.
+   */
+  disabled = signal<boolean>(false);
+
+  /**
+   * A signal that indicates whether the text area is focused.
+   */
+  focused = signal<boolean>(false);
+
+  // Outputs
+  onBlur = output();
+  onFocused = output();
+  onValueChange = output<string | null>();
+  onClearEvent = output();
+
+  /**
+   * Constructor for the TextAreaComponent.
+   * It injects NgControl to integrate with Angular's forms API.
+   * @param ngControl - Optional NgControl instance for form integration.
+   */
+  constructor(@Optional() @Self() public ngControl: NgControl | null) {
+    if (this.ngControl) {
+      this.ngControl.valueAccessor = this;
+    }
+  }
+
+  // ControlValueAccessor methods
+  onChange = (_: any) => {};
+  onTouched = () => {};
+
+  /**
+   * Writes a new value to the element. (ControlValueAccessor)
+   */
+  writeValue(value: any): void {
+    this.value.set(value || '');
+    // Use requestAnimationFrame to ensure the view is initialized
+    requestAnimationFrame(() => {
+      this.setValue();
+    });
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled.set(isDisabled);
+  }
+
+  /**
+   * Handles the native 'input' event from the HTMLTextAreaElement.
+   * Updates the component's internal value and notifies Angular forms.
+   * @param event - The input event object.
+   */
+  onInput(event: Event): void {
+    const textAreaElement = event.target as HTMLTextAreaElement;
+    const max = this.config().max;
+
+    if (max && textAreaElement.value.length > max) {
+      const cursorPosition = textAreaElement.selectionStart || 0;
+      textAreaElement.value = textAreaElement.value.slice(0, max);
+      const newCursorPosition = Math.min(cursorPosition, max);
+      textAreaElement.setSelectionRange(newCursorPosition, newCursorPosition);
+    }
+
+    this.value.set(textAreaElement.value);
+    this.dispatchOnChange(this.value());
+  }
+
+  /**
+   * Dispatches the onChange event with the provided value.
+   * @param value - The value to pass to onChange
+   */
+  dispatchOnChange(value: any): void {
+    if (value === undefined || value === null || value === '') {
+      this.onChange(null);
+      this.onValueChange.emit(null);
+    } else {
+      this.onChange(value);
+      this.onValueChange.emit(value);
+    }
+  }
+
+  /**
+   * Sets the value in the actual HTML text area element.
+   */
+  setValue(): void {
+    if (this.textArea?.nativeElement) {
+      this.textArea.nativeElement.value = this.value();
+    }
+  }
+
+  /**
+   * Focuses the text area element.
+   */
+  focus(event?: MouseEvent): void {
+    if (event && event.target === this.textArea?.nativeElement) {
+      return;
+    }
+
+    if (event) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+
+    if (this.textArea?.nativeElement) {
+      this.textArea.nativeElement.focus();
+    }
+  }
+
+  /**
+   * Called when the text area receives focus.
+   */
+  onFocus(): void {
+    this.onFocused.emit();
+    this.focused.set(true);
+  }
+
+  /**
+   * Called when the text area loses focus.
+   */
+  dispatchOnBlur(): void {
+    this.onBlur.emit();
+    this.onTouched();
+    this.focused.set(false);
+  }
+
+  /**
+   * Resets the text area value to an empty string.
+   */
+  reset(event?: MouseEvent): void {
+    this.value.set('');
+    this.dispatchOnChange('');
+    this.setValue();
+    this.onClearEvent.emit();
+
+    if (this.cancelTooltip) {
+      this.cancelTooltip.close();
+    }
+
+    if (event) {
+      this.focus(event);
+    }
+  }
+
+  /**
+   * Handles the clear button click.
+   */
+  onClear(event: MouseEvent): void {
+    event.preventDefault();
+    event.stopPropagation();
+    this.reset(event);
+  }
+}

package/projects/carriera-intern-components/src/app/components/text-area/text-area.stories.ts

@@ -0,0 +1,90 @@
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+
+import {
+  FormGroup,
+  FormControl,
+  ReactiveFormsModule,
+  Validators,
+} from '@angular/forms';
+import { TextAreaComponent } from './text-area.component';
+
+const meta: Meta<TextAreaComponent> = {
+  title: 'Components/TextArea',
+  component: TextAreaComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [ReactiveFormsModule],
+    }),
+  ],
+  argTypes: {},
+  args: {},
+};
+
+export default meta;
+type Story = StoryObj<TextAreaComponent>;
+
+// --- Stories ---
+
+export const Default: Story = {
+  args: {},
+  render: (args) => ({
+    props: {
+      ...args,
+      form: new FormGroup({
+        textArea: new FormControl(''),
+      }),
+      config: {
+        name: 'How can we improve?',
+      },
+    },
+    template: `
+    <form [formGroup]="form" style="width: 280px;">
+        <cai-text-area [config]="config" formControlName="textArea"></cai-text-area>
+      </form>
+    `,
+  }),
+};
+
+export const WithMaxLength: Story = {
+  args: {},
+  render: (args) => ({
+    props: {
+      ...args,
+      form: new FormGroup({
+        textArea: new FormControl(''),
+      }),
+      config: {
+        name: 'Comments (max 100 characters)',
+        max: 100,
+      },
+    },
+    template: `
+    <form [formGroup]="form" style="width: 280px;">
+        <cai-text-area [config]="config" formControlName="textArea"></cai-text-area>
+      </form>
+    `,
+  }),
+};
+
+export const WithDebugger: Story = {
+  args: {},
+  render: (args) => ({
+    props: {
+      ...args,
+      form: new FormGroup({
+        textArea: new FormControl('Initial Value'),
+      }),
+      config: {
+        name: 'Description',
+      },
+    },
+    template: `
+    <div style="display: flex; gap: 16px;">
+      <form [formGroup]="form" style="width: 280px;">
+        <cai-text-area [config]="config" formControlName="textArea"></cai-text-area>
+      </form>
+      <pre style="flex: 1; min-width: 0;">{{ form.value | json }}</pre>
+    </div>
+    `,
+  }),
+};

package/projects/carriera-intern-components/src/app/components/toolbar-dropdown/interfaces/index.ts

@@ -0,0 +1 @@
+export * from './interval-dropdown-option.interface';

package/projects/carriera-intern-components/src/app/components/toolbar-dropdown/interfaces/interval-dropdown-option.interface.ts

@@ -0,0 +1,10 @@
+export interface IIntervalDropdownOption {
+  id: number;
+  name: string;
+  value: string;
+
+  // Custom options
+  custom?: boolean;
+  startDate?: string;
+  endDate?: string;
+}