carriera-intern 0.0.0

package/projects/carriera-intern-components/src/app/components/tab-option-dropdown/tab-option-dropdown.component.scss

@@ -0,0 +1,441 @@
+@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;
+}
+
+.is-loading {
+  pointer-events: none;
+
+  .counter {
+    opacity: 0 !important;
+  }
+}
+
+.tab-option-dropdown {
+  padding: 4px 8px 4px 0;
+  display: flex;
+  gap: 4px;
+  align-items: center;
+
+  position: relative;
+  isolation: isolate;
+
+  cursor: pointer;
+
+  &:hover {
+    .dropdown-icon {
+      color: $color-black-300;
+    }
+    .counter {
+      background-color: $color-black-300;
+    }
+  }
+
+  &:has(.tab-option-input:focus-visible) {
+    .tab-option-background {
+      background-color: $color-black-300;
+    }
+
+    .tab-option-label {
+      color: $color-black-100;
+    }
+
+    .dropdown-icon {
+      color: $color-white-70 !important;
+      transform: rotate(0deg);
+    }
+
+    .counter {
+      opacity: 0;
+    }
+
+    .cut-part {
+      max-width: 0 !important;
+      opacity: 0 !important;
+    }
+  }
+
+  &:not(:has(.tab-option-input:placeholder-shown)) {
+    .tab-option-label {
+      opacity: 0 !important;
+    }
+  }
+}
+
+.tab-option-background {
+  position: absolute;
+  top: -1px;
+  left: 0;
+  width: 100%;
+  height: calc(100% + 2px);
+
+  border-radius: 3px;
+
+  transition: background-color 0.2s $bezier;
+  background-color: transparent;
+}
+
+.tab-option-input {
+  padding: 3px 6px;
+  height: 26px;
+  cursor: pointer;
+
+  &:focus-visible {
+    cursor: text;
+    outline: none;
+  }
+  color: white;
+
+  z-index: 2;
+
+  background-color: transparent;
+
+  &::selection {
+    background-color: $color-white-70;
+  }
+  flex: 1;
+  min-width: 0;
+}
+
+.tab-option-label {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  height: 26px;
+  padding: 3px 6px;
+
+  position: absolute;
+  top: 4px;
+  left: 0;
+  z-index: 1;
+
+  user-select: none;
+  pointer-events: none;
+
+  color: $color-black-300;
+  transition:
+    color 0.2s $bezier,
+    opacity 0.1s $bezier;
+
+  font-size: 16px;
+  font-weight: 800;
+
+  .tab-option-label-content {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.dropdown-icon {
+  width: 18px;
+  height: 18px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  z-index: 1;
+
+  color: $color-black-200;
+
+  transition:
+    color 0.2s $bezier,
+    transform 0.2s $bezier;
+  transform: rotate(180deg);
+}
+
+.counter {
+  opacity: 1;
+  transition:
+    opacity 0.2s $bezier,
+    background-color 0.2s $bezier;
+
+  background-color: $color-black-200;
+  border-radius: 50px;
+  padding: 0 5px;
+  color: white;
+  text-align: center;
+  font-size: 11px;
+  font-weight: 800;
+  line-height: 18px;
+  min-width: 18px;
+}
+
+.cut-part {
+  max-width: 100%;
+  opacity: 1;
+  overflow: hidden;
+
+  transition:
+    max-width 0.2s $bezier,
+    opacity 0.2s $bezier,
+    color 0.2s $bezier;
+
+  &.split-right {
+    order: 2;
+    p {
+      padding-right: 0;
+      padding-left: 4px;
+    }
+  }
+
+  p {
+    padding-right: 4px;
+    white-space: nowrap;
+  }
+}
+
+.dropdown-anchor {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+  opacity: 0;
+  pointer-events: none;
+  user-select: none;
+}
+
+.dropdown-menu {
+  min-width: 0px !important;
+  width: 100%;
+  background-color: $color-text-base-content;
+  border: 0;
+  border-radius: 3px;
+  margin-top: 1px;
+  padding: 4px;
+  padding-right: 0px;
+  top: 30px;
+  max-height: 244px;
+  z-index: 1100 !important;
+  overflow-y: scroll;
+
+  &::-webkit-scrollbar {
+    background-color: $color-text-base-content;
+    border-radius: 0 3px 3px 0;
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: #919191;
+    width: 2px;
+    border: 2px solid $color-text-base-content;
+    border-radius: 3px;
+  }
+
+  // Firefox scrollbar styles (maintaining webkit styling intent)
+  // Note: Firefox has limited scrollbar customization compared to webkit
+
+  // Firefox-specific targeting to ensure consistent behavior
+  @supports (-moz-appearance: none) {
+    padding-right: 6px;
+    scrollbar-width: 4px;
+    scrollbar-color: #919191 transparent;
+    // Force always visible scrollbar and disable hover effects
+    scrollbar-gutter: stable !important;
+
+    &:hover {
+      scrollbar-color: #919191 transparent;
+      scrollbar-width: 4px !important;
+      scrollbar-gutter: stable !important;
+      // Keep same color on hover
+    }
+  }
+
+  // Additional Firefox scrollbar visibility control
+  @-moz-document url-prefix() {
+    overflow: -moz-scrollbars-vertical;
+    scrollbar-width: 4px;
+    scrollbar-color: #919191 transparent;
+  }
+}
+
+.dropdown-menu {
+  transition:
+    max-height 0.2s $bezier,
+    opacity 0.2s $bezier,
+    height 0.2s $bezier;
+  animation: dropdown-menu-opening 0.2s $bezier;
+
+  max-height: var(--max-height);
+  height: var(--max-height);
+}
+
+.closing {
+  animation: dropdown-menu-closing 0.2s $bezier;
+  opacity: 0;
+  max-height: 0;
+}
+
+@keyframes dropdown-menu-opening {
+  0% {
+    max-height: 0;
+    opacity: 0;
+  }
+  100% {
+    max-height: 244px;
+    opacity: 1;
+  }
+}
+
+@keyframes dropdown-menu-closing {
+  0% {
+    max-height: 244px;
+    opacity: 1;
+  }
+  100% {
+    max-height: 0;
+    opacity: 0;
+  }
+}
+
+.dropdown-item {
+  color: white;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 18px;
+  height: 26px;
+  padding: 4px 6px;
+  width: 100%;
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4px;
+  user-select: none;
+
+  cursor: pointer;
+
+  background-color: $color-black-500;
+  transition:
+    background-color 0.2s ease-in-out,
+    color 0.2s ease-in-out;
+  border-radius: 2px;
+
+  &:hover {
+    background-color: $color-black-300;
+    color: white;
+  }
+
+  &:focus-visible {
+    background-color: $color-black-300;
+    border: 0;
+    outline: none;
+  }
+
+  position: relative;
+
+  &.selected {
+    font-weight: 700;
+    .dropdown-item-icon {
+      opacity: 1;
+    }
+    cursor: default;
+  }
+
+  .dropdown-item-icon {
+    opacity: 0;
+    transition: opacity 0.2s ease-in-out;
+    color: $color-blue-300;
+  }
+
+  &:not(:first-child) {
+    margin-top: 2px;
+  }
+}
+
+.no-results {
+  color: $color-black-100;
+  font-weight: 700;
+
+  pointer-events: none;
+}

package/projects/carriera-intern-components/src/app/components/tab-option-dropdown/tab-option-dropdown.component.spec.ts

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

package/projects/carriera-intern-components/src/app/components/tab-option-dropdown/tab-option-dropdown.component.ts

@@ -0,0 +1,105 @@
+import { CommonModule } from '@angular/common';
+import {
+  Component,
+  ElementRef,
+  input,
+  OnInit,
+  output,
+  signal,
+  ViewChild,
+} from '@angular/core';
+import { NgbDropdown, NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
+import { FormsModule } from '@angular/forms';
+
+// Components
+import { SvgIconComponent } from 'angular-svg-icon';
+
+// Interfaces
+import { ITabOptionConfig, ITabOption } from './interfaces';
+
+// Pipes
+import { TabSearchFilterPipe } from './pipes';
+import { HighlightSearchPipe } from '../input/pipes/highlight-search.pipe';
+
+@Component({
+  selector: 'cai-tab-option-dropdown',
+  templateUrl: './tab-option-dropdown.component.html',
+  styleUrl: './tab-option-dropdown.component.scss',
+  imports: [
+    CommonModule,
+    FormsModule,
+
+    // Bootstrap
+    NgbDropdownModule,
+    SvgIconComponent,
+
+    // Pipes
+    TabSearchFilterPipe,
+    HighlightSearchPipe,
+  ],
+})
+export class TabOptionDropdownComponent {
+  @ViewChild('dropdown') dropdown!: NgbDropdown;
+  @ViewChild('container') containerRef!: ElementRef<HTMLDivElement>;
+  @ViewChild('inputRef') inputRef!: ElementRef<HTMLInputElement>;
+
+  selectedOption = input<ITabOption | null>(null);
+  count = input<number>(0);
+  isLoading = input<boolean>(false);
+  options = input<ITabOption[]>([]);
+  config = input<ITabOptionConfig>({
+    splitPart: 'Top',
+    splitPartSide: 'left',
+  });
+
+  onSelectionChange = output<ITabOption>();
+
+  searchValue = signal<string>('');
+
+  closing = signal<boolean>(false);
+  containerWidth = signal<number>(0);
+
+  private updateContainerWidth(): void {
+    if (this.containerRef?.nativeElement) {
+      this.containerWidth.set(
+        this.containerRef?.nativeElement?.offsetWidth ?? 0
+      );
+    }
+  }
+
+  private closeDropdown() {
+    this.closing.set(true);
+    this.searchValue.set('');
+
+    setTimeout(() => {
+      this.dropdown?.close();
+      this.closing.set(false);
+    }, 200);
+  }
+
+  handleFocus() {
+    this.updateContainerWidth();
+    this.dropdown?.open();
+  }
+
+  handleClick() {
+    if (this.isLoading() || this.dropdown?.isOpen()) return;
+    this.inputRef?.nativeElement.focus();
+  }
+
+  handleBlur() {
+    this.closeDropdown();
+  }
+
+  handleOption(event: MouseEvent, option: ITabOption) {
+    event.stopPropagation();
+    event.preventDefault();
+
+    if (option.id === this.selectedOption()?.id) {
+      return;
+    }
+
+    this.onSelectionChange.emit(option);
+    this.inputRef?.nativeElement.blur();
+  }
+}

package/projects/carriera-intern-components/src/app/components/tab-option-dropdown/tab-option.stories.ts

@@ -0,0 +1,93 @@
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { TabOptionDropdownComponent } from './tab-option-dropdown.component';
+
+import { ReactiveFormsModule } from '@angular/forms';
+import { ITabOption } from './interfaces';
+
+const meta: Meta<TabOptionDropdownComponent> = {
+  title: 'Components/TabOptionDropdown',
+  component: TabOptionDropdownComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [ReactiveFormsModule],
+    }),
+  ],
+  argTypes: {},
+  args: {},
+};
+
+export default meta;
+type Story = StoryObj<TabOptionDropdownComponent>;
+
+// --- Stories ---
+
+export const TopList: Story = {
+  args: {},
+  render: (args) => ({
+    props: {
+      ...args,
+      config: {
+        splitPart: 'Top',
+        splitPartSide: 'left',
+      },
+      count: 67,
+      options: [
+        {
+          id: 1,
+          name: 'Driver',
+        },
+        {
+          id: 2,
+          name: 'Dispatcher',
+        },
+      ],
+      selectedOption: {
+        id: 1,
+        name: 'Driver',
+      },
+      isLoading: false,
+      onSelectionChange: (option: ITabOption) => {
+        console.log('Selection changed to:', option);
+      },
+    },
+    template: `
+    <div style="width: 226px;">
+      <cai-tab-option-dropdown [config]="config" [count]="count" [options]="options" [selectedOption]="selectedOption" [isLoading]="isLoading" (onSelectionChange)="onSelectionChange($event)"></cai-tab-option-dropdown>
+    </div>
+    `,
+  }),
+};
+
+export const ByState: Story = {
+  args: {},
+  render: (args) => ({
+    props: {
+      ...args,
+      config: {
+        splitPart: 'by State',
+        splitPartSide: 'right',
+      },
+      count: 67,
+      options: [
+        {
+          id: 1,
+          name: 'Pickup',
+        },
+        {
+          id: 2,
+          name: 'Delivery',
+        },
+      ],
+      selectedOption: {
+        id: 1,
+        name: 'Pickup',
+      },
+      isLoading: false,
+    },
+    template: `
+    <div style="width: 226px;">
+      <cai-tab-option-dropdown [config]="config" [count]="count" [options]="options" [selectedOption]="selectedOption" [isLoading]="isLoading"></cai-tab-option-dropdown>
+    </div>
+    `,
+  }),
+};

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

@@ -0,0 +1 @@
+export * from './text-area.interface';

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

@@ -0,0 +1,4 @@
+export interface ITextAreaConfig {
+  name?: string;
+  max?: number;
+}

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

@@ -0,0 +1,29 @@
+@let name = config().name;
+
+<div class="text-area-container" (pointerdown)="focus($event)">
+  <label class="label">{{ name }}</label>
+
+  <textarea
+    class="text-area"
+    placeholder=""
+    #textArea
+    [disabled]="disabled()"
+    (input)="onInput($event)"
+    (focus)="onFocus()"
+    (blur)="dispatchOnBlur()"
+  ></textarea>
+  <svg-icon name="cai-checkmark" class="checkmark-icon"></svg-icon>
+  <button
+    class="cancel-button"
+    ngbTooltip="Cancel"
+    #cancelTooltip="ngbTooltip"
+    [openDelay]="600"
+    tooltipClass="tooltip input-tooltip"
+    [placement]="'top'"
+    [container]="'body'"
+    [autoClose]="true"
+    (click)="onClear($event)"
+  >
+    <svg-icon [name]="'cai-cancel'" class="cancel-icon"></svg-icon>
+  </button>
+</div>