carriera-intern 0.0.0

package/projects/carriera-intern-components/src/app/components/sticky-scrollbar/sticky-scrollbar.stories.ts

@@ -0,0 +1,343 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { Component } from '@angular/core';
+import { StickyScrollbarComponent } from './sticky-scrollbar.component';
+import { eScrollState } from './enums';
+
+const meta: Meta<StickyScrollbarComponent> = {
+  title: 'Components/StickyScrollbar',
+  component: StickyScrollbarComponent,
+  decorators: [],
+  argTypes: {},
+  args: {},
+};
+
+export default meta;
+type Story = StoryObj<StickyScrollbarComponent>;
+
+// --- Stories ---
+
+export const Default: Story = {
+  args: {},
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+    <div style="width: 500px; height: 200px; margin-bottom: 20px;">
+      <ca-sticky-scrollbar>
+        <div style="min-width: 1500px; background: linear-gradient(to right, #c7d2fe, #ddd6fe); height: 100%;"></div>
+      </ca-sticky-scrollbar>
+    </div>
+
+    `,
+  }),
+};
+
+export const HiddenTrack: Story = {
+  args: {},
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+    <div style="width: 500px; height: 200px; margin-bottom: 20px;">
+      <ca-sticky-scrollbar [hideTrack]="true">
+        <div style="min-width: 1500px; background: linear-gradient(to right, #c7d2fe, #ddd6fe); height: 100%;"></div>
+      </ca-sticky-scrollbar>
+    </div>
+
+    `,
+  }),
+};
+
+export const WithStickyOffset: Story = {
+  args: {},
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+    <div style="width: 500px; height: 1000px; margin-bottom: 20px;">
+      <ca-sticky-scrollbar [stickyOffset]="12">
+        <div style="min-width: 1500px; background: linear-gradient(to right, #c7d2fe, #ddd6fe); height: 100%;"></div>
+      </ca-sticky-scrollbar>
+    </div>
+
+    `,
+  }),
+};
+
+@Component({
+  selector: 'ca-multiple-scrollbars-test',
+  standalone: true,
+  imports: [StickyScrollbarComponent],
+  template: `
+    <div style="padding: 20px;">
+      <h2 style="margin-bottom: 20px;">Synchronized Scrollbars Test</h2>
+      <div
+        style="margin-bottom: 10px; padding: 10px; background-color: #f5f5f5; border-radius: 4px;"
+      >
+        <strong>Sync Mode:</strong> Internal (no shared position binding)
+      </div>
+      <div
+        style="margin-bottom: 10px; padding: 10px; background-color: #f5f5f5; border-radius: 4px;"
+      >
+        <strong>Scroll State:</strong> {{ scrollState || 'N/A' }}
+      </div>
+
+      <div style="margin-bottom: 20px;">
+        <div style="width: 600px; height: 200px; margin-bottom: 20px;">
+          <ca-sticky-scrollbar
+            (scrollStateChange)="onScrollStateChange($event)"
+            [stickyOffset]="14"
+          >
+            <div
+              style="min-width: 1500px; background: linear-gradient(to right, #c7d2fe, #ddd6fe); height: 100%;"
+            ></div>
+          </ca-sticky-scrollbar>
+        </div>
+      </div>
+
+      <div style="margin-bottom: 20px;">
+        <div style="width: 600px; height: 200px; margin-bottom: 20px;">
+          <ca-sticky-scrollbar
+            (scrollStateChange)="onScrollStateChange($event)"
+            [stickyOffset]="14"
+          >
+            <div
+              style="min-width: 1500px; background: linear-gradient(to right, #c7d2fe, #ddd6fe); height: 100%;"
+            ></div>
+          </ca-sticky-scrollbar>
+        </div>
+      </div>
+
+      <div style="margin-bottom: 20px;">
+        <div style="width: 600px; height: 200px; margin-bottom: 20px;">
+          <ca-sticky-scrollbar
+            (scrollStateChange)="onScrollStateChange($event)"
+            [stickyOffset]="14"
+          >
+            <div
+              style="min-width: 1500px; background: linear-gradient(to right, #c7d2fe, #ddd6fe); height: 100%;"
+            ></div>
+          </ca-sticky-scrollbar>
+        </div>
+      </div>
+
+      <div style="margin-bottom: 20px;">
+        <div style="width: 600px; height: 200px; margin-bottom: 20px;">
+          <ca-sticky-scrollbar
+            (scrollStateChange)="onScrollStateChange($event)"
+            [stickyOffset]="14"
+          >
+            <div
+              style="min-width: 1500px; background: linear-gradient(to right, #c7d2fe, #ddd6fe); height: 100%;"
+            ></div>
+          </ca-sticky-scrollbar>
+        </div>
+      </div>
+
+      <div
+        style="margin-top: 20px; padding: 15px; background-color: #e3f2fd; border-radius: 4px; border-left: 4px solid #2196f3;"
+      >
+        <p style="margin: 0 0 10px 0;">
+          <strong>Instructions:</strong> Scroll any of the scrollbars or drag
+          their thumbs. All scrollbars will sync to the same position
+          automatically.
+        </p>
+      </div>
+
+      <div
+        style="margin-top: 20px; padding: 15px; background-color: #f5f5f5; border-radius: 4px;"
+      >
+        <h3 style="margin: 0 0 10px 0; font-size: 16px;">
+          Implementation Guide
+        </h3>
+        <p style="margin: 0 0 10px 0; font-size: 14px;">
+          <strong>1. Create a shared scroll position variable:</strong>
+        </p>
+        <pre
+          style="background: #fff; padding: 10px; border-radius: 4px; overflow-x: auto; font-size: 12px; margin: 0 0 15px 0;"
+        >
+// Use your parent-level sync coordinator/service state here</pre
+        >
+
+        <p style="margin: 0 0 10px 0; font-size: 14px;">
+          <strong
+            >2. Bind scrollPosition and handle scrollPositionChange:</strong
+          >
+        </p>
+        <pre
+          style="background: #fff; padding: 10px; border-radius: 4px; overflow-x: auto; font-size: 12px; margin: 0 0 15px 0;"
+        >
+&lt;ca-sticky-scrollbar
+  [stickyOffset]="14"
+&gt;
+  &lt;!-- Your content here --&gt;
+&lt;/ca-sticky-scrollbar&gt;</pre
+        >
+
+        <p style="margin: 0 0 10px 0; font-size: 14px;">
+          <strong>3. Handle position changes in component:</strong>
+        </p>
+        <pre
+          style="background: #fff; padding: 10px; border-radius: 4px; overflow-x: auto; font-size: 12px; margin: 0 0 15px 0;"
+        >
+// Sync position should be handled in the parent/coordinator.</pre
+        >
+
+        <p style="margin: 0 0 10px 0; font-size: 14px;">
+          <strong
+            >4. Optional - Track scroll state (start/scrolling/end):</strong
+          >
+        </p>
+        <pre
+          style="background: #fff; padding: 10px; border-radius: 4px; overflow-x: auto; font-size: 12px; margin: 0;"
+        >
+(scrollStateChange)="onScrollStateChange($event)"
+
+onScrollStateChange(state: eScrollState): void {{ '{' }}
+  this.scrollState = state; // 'start' | 'scrolling' | 'end'
+{{ '}' }}</pre
+        >
+      </div>
+    </div>
+  `,
+})
+class MultipleScrollbarsTestComponent {
+  scrollState: eScrollState = eScrollState.START;
+
+  onScrollStateChange(state: eScrollState): void {
+    this.scrollState = state;
+  }
+}
+
+export const MultipleSynchronizedScrollbars: StoryObj = {
+  render: () => ({
+    props: {},
+    template: `<ca-multiple-scrollbars-test></ca-multiple-scrollbars-test>`,
+    moduleMetadata: {
+      imports: [MultipleScrollbarsTestComponent],
+    },
+  }),
+};
+
+@Component({
+  selector: 'ca-multiple-tables-single-scrollbar',
+  standalone: true,
+  imports: [StickyScrollbarComponent],
+  template: `
+    <div style="padding: 20px;">
+      <h2 style="margin-bottom: 20px;">
+        Multiple Tables - Single Fixed Scrollbar
+      </h2>
+      <div
+        style="margin-bottom: 10px; padding: 10px; background-color: #f5f5f5; border-radius: 4px;"
+      >
+        <strong>Sync Mode:</strong> Internal (no shared position binding)
+      </div>
+      <div
+        style="margin-bottom: 10px; padding: 10px; background-color: #f5f5f5; border-radius: 4px;"
+      >
+        <strong>Scroll State:</strong> {{ scrollState || 'N/A' }}
+      </div>
+
+      <div style="">
+        <h3>Table 1 (No visible track)</h3>
+        <div style="width: 600px; height: 200px; margin-bottom: 20px;">
+          <ca-sticky-scrollbar
+            (scrollStateChange)="onScrollStateChange($event)"
+            [hideTrack]="true"
+          >
+            <div
+              style="min-width: 1500px; background: linear-gradient(to right, #fecaca, #fca5a5); height: 100%; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: bold; color: #7f1d1d;"
+            >
+              Table 1 Content
+            </div>
+          </ca-sticky-scrollbar>
+        </div>
+      </div>
+
+      <div style="">
+        <h3>Table 2 (No visible track)</h3>
+        <div style="width: 600px; height: 200px; margin-bottom: 20px;">
+          <ca-sticky-scrollbar
+            (scrollStateChange)="onScrollStateChange($event)"
+            [hideTrack]="true"
+          >
+            <div
+              style="min-width: 1500px; background: linear-gradient(to right, #fed7aa, #fdba74); height: 100%; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: bold; color: #7c2d12;"
+            >
+              Table 2 Content
+            </div>
+          </ca-sticky-scrollbar>
+        </div>
+      </div>
+
+      <div style="">
+        <h3>Table 3 (No visible track)</h3>
+        <div style="width: 600px; height: 200px; margin-bottom: 20px;">
+          <ca-sticky-scrollbar
+            (scrollStateChange)="onScrollStateChange($event)"
+            [hideTrack]="true"
+          >
+            <div
+              style="min-width: 1500px; background: linear-gradient(to right, #fef08a, #fde047); height: 100%; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: bold; color: #713f12;"
+            >
+              Table 3 Content
+            </div>
+          </ca-sticky-scrollbar>
+        </div>
+      </div>
+
+      <div style="margin-bottom: 20px;">
+        <h3>Table 4 (Fixed scrollbar at bottom - always visible)</h3>
+        <div style="width: 600px; height: 200px; margin-bottom: 20px;">
+          <ca-sticky-scrollbar
+            (scrollStateChange)="onScrollStateChange($event)"
+            [hideTrack]="false"
+            [alwaysVisible]="true"
+            [stickyOffset]="10"
+          >
+            <div
+              style="min-width: 1500px; background: linear-gradient(to right, #c7d2fe, #a5b4fc); height: 100%; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: bold; color: #312e81;"
+            >
+              Table 4 Content (Track Visible)
+            </div>
+          </ca-sticky-scrollbar>
+        </div>
+      </div>
+
+      <div
+        style="margin-top: 20px; padding: 15px; background-color: #e3f2fd; border-radius: 4px; border-left: 4px solid #2196f3;"
+      >
+        <p style="margin: 0 0 10px 0;">
+          <strong>Instructions:</strong> Scroll the page vertically to see
+          tables go out of view. The scrollbar at the bottom remains fixed and
+          visible at all times, controlling all 4 tables.
+        </p>
+        <p style="margin: 0;">
+          Scroll horizontally using the fixed scrollbar at the bottom to see all
+          tables sync together.
+        </p>
+      </div>
+    </div>
+  `,
+})
+class MultipleTablesComponent {
+  scrollState: eScrollState = eScrollState.START;
+
+  onScrollStateChange(state: eScrollState): void {
+    this.scrollState = state;
+  }
+}
+
+export const MultipleTablesWithFixedScrollbar: StoryObj = {
+  render: () => ({
+    props: {},
+    template: `<ca-multiple-tables-single-scrollbar></ca-multiple-tables-single-scrollbar>`,
+    moduleMetadata: {
+      imports: [MultipleTablesComponent],
+    },
+  }),
+};

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

@@ -0,0 +1,2 @@
+export * from './tab-option-config.interface';
+export * from './tab-option.interface';

package/projects/carriera-intern-components/src/app/components/tab-option-dropdown/interfaces/tab-option-config.interface.ts

@@ -0,0 +1,4 @@
+export interface ITabOptionConfig {
+  splitPart: string;
+  splitPartSide: 'left' | 'right';
+}

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

@@ -0,0 +1,4 @@
+export interface ITabOption {
+  id: number;
+  name: string;
+}

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

@@ -0,0 +1 @@
+export * from './tab-search-filter.pipe';

package/projects/carriera-intern-components/src/app/components/tab-option-dropdown/pipes/tab-search-filter.pipe.ts

@@ -0,0 +1,20 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { ITabOption } from '../interfaces';
+
+@Pipe({
+  name: 'tabSearchFilter',
+})
+export class TabSearchFilterPipe implements PipeTransform {
+  transform(
+    options: ITabOption[] | null | undefined,
+    searchValue?: string
+  ): ITabOption[] {
+    if (!options) return [];
+
+    if (!searchValue) return options;
+
+    return options.filter((option) =>
+      option.name?.toLowerCase().includes(searchValue.toLowerCase())
+    );
+  }
+}

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

@@ -0,0 +1,66 @@
+@let splitPart = config().splitPart;
+<!--  -->
+@let splitPartSide = config().splitPartSide;
+<!--  -->
+<div
+  #container
+  class="tab-option-dropdown"
+  [class.is-loading]="isLoading()"
+  ngbDropdown
+  #dropdown="ngbDropdown"
+  dropdownClass="cai-dropdown"
+  [placement]="'bottom'"
+  [autoClose]="false"
+  [container]="'body'"
+  (click)="handleClick()"
+>
+  <div class="tab-option-label">
+    <div class="tab-option-label-content">
+      <div class="cut-part" [class.split-right]="splitPartSide === 'right'">
+        <p>{{ splitPart }}</p>
+      </div>
+      <p>{{ selectedOption()?.name ?? "" }}</p>
+    </div>
+    <p class="counter">{{ count() }}</p>
+  </div>
+  <input
+    #inputRef
+    type="text"
+    class="tab-option-input"
+    (focus)="handleFocus()"
+    (blur)="handleBlur()"
+    placeholder=""
+    [(ngModel)]="searchValue"
+  />
+  <svg-icon name="cai-arrow-primary-up" class="dropdown-icon"></svg-icon>
+  <div class="tab-option-background"></div>
+  <div class="dropdown-anchor" ngbDropdownAnchor></div>
+  <!--  -->
+  @let dropdownOptions = options() | tabSearchFilter: searchValue();
+  <!--  -->
+  @let maxHeight = (dropdownOptions.length || 1) * 28 + 6;
+  <div
+    class="dropdown-menu"
+    ngbDropdownMenu
+    [style.width.px]="containerWidth()"
+    [class.closing]="closing()"
+    [style.--max-height]="maxHeight > 244 ? '244px' : maxHeight + 'px'"
+  >
+    @if (dropdownOptions.length) {
+      @for (option of dropdownOptions; track option.id) {
+        <div
+          class="dropdown-item"
+          [class.selected]="option.id === selectedOption()?.id"
+          (pointerdown)="handleOption($event, option)"
+        >
+          <p [innerHTML]="option.name | highlightSearch: searchValue()"></p>
+          <svg-icon name="cai-checkmark" class="dropdown-item-icon"></svg-icon>
+        </div>
+      }
+    } @else {
+      <div class="dropdown-item no-results">
+        <p>No results</p>
+      </div>
+    }
+  </div>
+</div>