carriera-intern 0.0.0 → 1.1.76

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

@@ -1,343 +0,0 @@
-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

@@ -1,2 +0,0 @@
-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

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

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

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

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

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

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

@@ -1,20 +0,0 @@
-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

@@ -1,66 +0,0 @@
-@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>