ca-components 2.1.152 → 2.1.161

package/lib/components/ca-todo/utils/svg-routes/todo.routes.ts

@@ -1,8 +0,0 @@
-export class TodoSvgRoute {
-  static web: string = 'assets/ca-components/svg/todo/web.svg';
-  static attachment: string = 'assets/ca-components/svg/todo/attachment.svg';
-  static comments: string = 'assets/ca-components/svg/todo/comments.svg';
-  static dropdown: string = 'assets/ca-components/svg/todo/dropdown.svg';
-  static plus: string = 'assets/ca-components/svg/todo/plus.svg';
-  static upload: string = 'assets/ca-components/svg/todo/upload.svg';
-}

package/lib/components/ca-toolbar-dropdown/ca-toolbar-dropdown.component.html

@@ -1,282 +0,0 @@
-<div #componentWrapper class="w-100 position-relative">
-    @let searchValue = searchFormControl?.value;
-    @let hasSearchContent = !!searchValue;
-    @let dropDownOptionsWithFilter =
-        dropDownOptions | filterBySearchTerm: searchValue;
-    @let headerInfo = dropDownOptionsWithFilter | selectedItem;
-    @let title = headerInfo?.title;
-    <div
-        class="basic-state h-34 w-100 d-flex align-items-center justify-content-between c-pointer background-white br-3"
-        [class.background-black]="isExpanded"
-        (mouseenter)="onTitleHover()"
-        (mouseleave)="onTitleHover()"
-        (click)="
-            !isExpanded && toggleOptionsVisibility(); $event.stopPropagation()
-        "
-    >
-        <div
-            class="d-flex align-items-center justify-content-start p-y-3 p-x-4 m-y-5 m-x-4 w-100 position-relative"
-            [formGroup]="searchForm"
-        >
-            @let iconBackgroundColor =
-                isExpanded
-                    ? 'svg-fill-muted'
-                    : isTitleHovered
-                      ? 'svg-fill-black'
-                      : 'svg-fill-bw6-2';
-
-            @if (!hasSearchContent) {
-                @if (selectedItem) {
-                    @if (selectedItem.avatar) {
-                        <img
-                            [src]="selectedItem.avatar"
-                            class="w-18 h-18 br-circle"
-                        />
-                    }
-                    @if (selectedItem.icon) {
-                        <svg-icon
-                            [src]="selectedItem.icon"
-                            class="svg-size-18 d-flex align-items-center transition-fill"
-                            [ngClass]="iconBackgroundColor"
-                        />
-                    }
-                    @if (!selectedItem.icon && !selectedItem.avatar && hasInitials) {
-                        <div
-                            class="d-flex align-items-center justify-content-center br-circle w-18 h-18"
-                            [ngStyle]="{
-                                backgroundColor:
-                                    headerInfo?.avatarColor?.background,
-                                color: headerInfo?.avatarColor?.color,
-                            }"
-                        >
-                            <span class="font-size-7 ca-font-extra-bold">
-                                {{ selectedItem.title | nameInitials }}
-                            </span>
-                        </div>
-                    }
-                } @else {
-                    @if (headerInfo?.avatar) {
-                        <img
-                            [src]="headerInfo?.avatar"
-                            class="w-18 h-18 br-circle"
-                        />
-                    }
-                    @if (headerInfo?.icon) {
-                        <svg-icon
-                            [src]="headerInfo?.icon!"
-                            class="svg-size-18 d-flex align-items-center transition-fill"
-                            [ngClass]="iconBackgroundColor"
-                        />
-                    }
-                    @if (!headerInfo?.icon && !headerInfo?.avatar && hasInitials) {
-                        <div
-                            class="d-flex align-items-center justify-content-center br-circle w-18 h-18"
-                            [ngStyle]="{
-                                backgroundColor:
-                                    headerInfo?.avatarColor?.background,
-                                color: headerInfo?.avatarColor?.color,
-                            }"
-                        >
-                            <span class="font-size-7 ca-font-extra-bold">
-                                {{ headerInfo?.title | nameInitials }}
-                            </span>
-                        </div>
-                    }
-                }
-            }
-            @if (isExpanded) {
-                <div
-                    class="input-wrapper position-absolute d-inline-block w-100"
-                >
-                    <input
-                        class="h-26 background-transparent text-color-white ca-font-extra-bold w-100"
-                        [formControlName]="eGeneralActions.SEARCH_LOWERCASE"
-                    />
-                </div>
-                @if (!hasSearchContent) {
-                    <span
-                        class="mirror-span p-y-2 w-100 p-l-4 text-color-muted text-size-16 ca-font-extra-bold"
-                    >
-                        {{ title }}
-                    </span>
-                }
-            } @else {
-                <div
-                    class="header text-size-16 text-color-black ca-font-extra-bold p-4 user-select-none"
-                >
-                    {{ title }}
-                </div>
-            }
-
-            @if (title && !isExpanded && !headerInfo?.isCountHidden) {
-                @let countBackgroundColor =
-                    isExpanded
-                        ? 'background-muted'
-                        : isTitleHovered
-                          ? 'background-black'
-                          : 'background-bw6-2';
-
-                <div
-                    class="h-18 min-w-18 d-flex align-items-center justify-content-center text-color-white p-y-0 p-x-5 br-10 transition-background"
-                    [ngClass]="countBackgroundColor"
-                >
-                    <span
-                        class="text-size-11 ca-font-extra-bold"
-                        [ngClass]="
-                            isExpanded ? 'text-color-black' : 'text-color-white'
-                        "
-                    >
-                        {{ headerInfo?.count }}</span
-                    >
-                </div>
-            }
-        </div>
-        @let iconColor =
-            isExpanded
-                ? 'svg-fill-white-4'
-                : isTitleHovered
-                  ? 'svg-fill-black'
-                  : 'svg-fill-bw6-2';
-        @let isClearIconDisplayable = !title && hasSearchContent && isExpanded;
-        <div
-            class="d-flex align-items-center justify-content-end h-100"
-            (click)="toggleOptionsVisibility(); $event.stopPropagation()"
-        >
-            @if (isClearIconDisplayable) {
-                <div
-                    class="h-26 w-26 d-flex align-items-center justify-content-center p-4 m-r-8 br-3 background-hover-bw6"
-                    ngbTooltip
-                    [tooltipBackground]="eColor.BLACK"
-                    [mainCaTooltip]="eGeneralActions.CLEAR"
-                    [position]="ePosition.BOTTOM"
-                    (click)="clearSearch()"
-                >
-                    <svg-icon
-                        class="icon d-flex svg-size-14"
-                        [class]="iconColor"
-                        [src]="sharedSvgRoutes.CLEAR_SELECTED_ICON"
-                    >
-                    </svg-icon>
-                </div>
-            }
-            <div
-                class="d-flex align-items-center justify-content-center p-4 m-r-6"
-                ngbTooltip
-                [tooltipBackground]="eColor.BLACK"
-                [mainCaTooltip]="
-                    isExpanded
-                        ? eGeneralActions.COLLAPSE
-                        : eGeneralActions.EXPAND
-                "
-                [position]="ePosition.BOTTOM"
-            >
-                <svg-icon
-                    class="icon d-flex svg-size-14 transition-fill"
-                    [class]="iconColor"
-                    [src]="sharedSvgRoutes.ARROW_UP"
-                    [@rotatedState]="
-                        isExpanded
-                            ? eAnimationState.ROTATED
-                            : eAnimationState.DEFAULT
-                    "
-                ></svg-icon>
-            </div>
-        </div>
-    </div>
-    @if (isExpanded) {
-        @let positionTop = parentHeight + 4;
-        <div
-            class="dropdown-items w-100 p-y-4 p-x-4 br-3 background-black-2 text-color-white position-absolute"
-            [ngStyle]="{
-                width: parentWidth + eUnit.PX,
-                top: positionTop + eUnit.PX,
-            }"
-        >
-            @for (
-                item of dropDownOptionsWithFilter;
-                track item.id;
-                let first = $first
-            ) {
-                <div
-                    class="dropdown-item h-26 d-flex justify-content-between background-hover-black c-pointer p-x-4 p-y-4 br-2"
-                    [class.m-t-4]="!first"
-                    (click)="onSelectDropdownItem(item)"
-                    (mouseenter)="onDropdownItemHover(item.id)"
-                    (mouseleave)="onDropdownItemHover(-1)"
-                >
-                    @let isItemSelected =
-                        item?.isSelected || title === item?.title;
-
-                    @let isItemHovered = dropdownItemHoverId === item.id;
-
-                    <div
-                        class="d-flex align-items-center justify-content-start gap-px-4"
-                    >
-                        @if (item.avatar) {
-                            <img
-                                [src]="item.avatar"
-                                class="w-18 h-18 br-circle"
-                            />
-                        }
-                        @if (item.icon) {
-                            <svg-icon
-                                [src]="item.icon"
-                                [ngClass]="
-                                    isItemSelected
-                                        ? 'svg-fill-blue-8'
-                                        : 'svg-fill-bw6-2'
-                                "
-                                class="svg-size-18 d-flex align-items-center"
-                            />
-                        }
-                        @if (!item.icon && !item.avatar && hasInitials) {
-                            <div
-                                class="d-flex align-items-center justify-content-center br-circle w-18 h-18"
-                                [ngStyle]="{
-                                    backgroundColor:
-                                        item?.avatarColor?.background,
-                                    color: item?.avatarColor?.color,
-                                }"
-                            >
-                                <span
-                                    class="font-size-7 ca-font-extra-bold h-9"
-                                >
-                                    {{ item.title | nameInitials }}
-                                </span>
-                            </div>
-                        }
-                        <span
-                            class="text-size-14"
-                            [class.ca-font-bold]="isItemSelected"
-                        >
-                            {{ item.title }}
-                        </span>
-                    </div>
-
-                    @if (!item?.isCountHidden) {
-                        <div
-                            class="h-18 min-w-18 d-flex align-items-center justify-content-center p-x-5 br-10"
-                            [class.background-blue-14]="isItemSelected"
-                            [ngClass]="
-                                isItemSelected
-                                    ? 'background-blue-14'
-                                    : 'background-black'
-                            "
-                        >
-                            <span
-                                class="text-size-11 ca-font-semi-bold h-14"
-                                [ngClass]="
-                                    isItemSelected || isItemHovered
-                                        ? 'text-color-white'
-                                        : 'text-color-white-4'
-                                "
-                            >
-                                {{ item.count }}
-                            </span>
-                        </div>
-                    }
-                </div>
-            }
-        </div>
-    }
-</div>

package/lib/components/ca-toolbar-dropdown/ca-toolbar-dropdown.component.scss

@@ -1,53 +0,0 @@
-@import 'scss/styles.scss';
-
-.basic-state {
-    transition: background-color $transitionDuration;
-
-    &:hover {
-        .header {
-            color: $black;
-        }
-    }
-    .input-wrapper {
-        input {
-            border: 0;
-            outline: none;
-            padding-left: 0px;
-            &:focus {
-                border: 0;
-            }
-            
-        }        
-    }
-    .mirror-span {
-        top: 0;
-        font: inherit;
-    }
-
-    .transition-background {
-        transition: background-color .2s ease-in;
-    }
-
-    .transition-fill {
-        svg path,
-        svg circle {
-            transition: fill .2s ease-in;
-        }
-    }
-}
-
-.dropdown-items {
-    z-index: 11;
-    max-height: 244px;
-    overflow-y: auto;
-    &::-webkit-scrollbar {
-        width: 4px;
-    }
-    
-    &::-webkit-scrollbar-thumb {
-        background-color: $muted;
-        width: 2px;
-        border: 2px solid $black-2;
-        border-radius: 3px;
-    }
-}

package/lib/components/ca-toolbar-dropdown/ca-toolbar-dropdown.component.spec.ts

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

package/lib/components/ca-toolbar-dropdown/ca-toolbar-dropdown.component.ts

@@ -1,197 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { HttpClientModule } from '@angular/common/http';
-import {
-    AfterViewInit,
-    Component,
-    ElementRef,
-    EventEmitter,
-    HostListener,
-    Input,
-    OnDestroy,
-    OnInit,
-    Output,
-    ViewChild,
-} from '@angular/core';
-import {
-    AbstractControl,
-    FormsModule,
-    ReactiveFormsModule,
-    UntypedFormBuilder,
-    UntypedFormGroup,
-} from '@angular/forms';
-import { Subject } from 'rxjs';
-
-// third-party modules
-import { AngularSvgIconModule } from 'angular-svg-icon';
-import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
-
-// components
-import { CaAppTooltipV2Component } from '../ca-app-tooltip-v2/ca-app-tooltip-v2.component';
-
-// assets
-import { SharedSvgRoutes } from '../../utils/svg-routes';
-import { toggleUpDownAnimation } from '../../utils/animations';
-
-// interfaces
-import { IDropdownItem } from './interfaces';
-
-// enums
-import {
-    eAnimationState,
-    eColor,
-    eGeneralActions,
-    ePosition,
-    eStringPlaceholder,
-    eUnit,
-} from '../../enums';
-
-// pipes
-import { SelectedItemPipe, FilterBySearchTermPipe } from './pipes';
-import { NameInitialsPipe } from '../../pipes';
-
-@Component({
-    selector: 'ca-toolbar-dropdown',
-    imports: [
-        CommonModule,
-        FormsModule,
-        ReactiveFormsModule,
-        HttpClientModule,
-        // third-party modules
-        AngularSvgIconModule,
-        NgbModule,
-        // components
-        CaAppTooltipV2Component,
-        // pipes
-        SelectedItemPipe,
-        FilterBySearchTermPipe,
-        NameInitialsPipe,
-    ],
-    templateUrl: './ca-toolbar-dropdown.component.html',
-    styleUrl: './ca-toolbar-dropdown.component.scss',
-    animations: [toggleUpDownAnimation],
-})
-export class CaToolbarDropdownComponent
-    implements OnInit, AfterViewInit, OnDestroy
-{
-    @ViewChild('componentWrapper')
-    componentWrapperRef!: ElementRef<HTMLInputElement>;
-
-    @Input() set dropdownOptions(value: IDropdownItem[]) {
-        this.dropDownOptions = value?.length ? [...value] : [];
-    }
-
-    @Input() hasInitials: boolean = false;
-
-    @Output() onDropdownItemSelect: EventEmitter<IDropdownItem> =
-        new EventEmitter<IDropdownItem>();
-
-    // form
-    public searchForm!: UntypedFormGroup;
-    public searchTerm: string = eStringPlaceholder.EMPTY;
-    public searchFormControl!: AbstractControl | null;
-
-    // boolean flags
-    public isExpanded: boolean = false;
-    public isTitleHovered: boolean = false;
-    public dropdownItemHoverId: number | undefined = -1;
-
-    // assets
-    public sharedSvgRoutes = SharedSvgRoutes;
-
-    public dropDownOptions!: IDropdownItem[];
-
-    public parentWidth: number = 0;
-    public parentHeight: number = 0;
-
-    // enums
-    public eAnimationState = eAnimationState;
-    public ePosition = ePosition;
-    public eGeneralActions = eGeneralActions;
-    public eUnit = eUnit;
-    public eColor = eColor;
-
-    private destroy$ = new Subject<void>();
-
-    public selectedItem: IDropdownItem | null = null;
-
-    constructor(private formBuilder: UntypedFormBuilder) {}
-
-    ngOnInit(): void {
-        this.createForm();
-    }
-
-    ngAfterViewInit(): void {
-        this.getParentElementDimensions();
-    }
-
-    private getParentElementDimensions(): void {
-        const componentWrapper: HTMLDivElement =
-            this.componentWrapperRef?.nativeElement;
-
-        if (!componentWrapper) return;
-
-        this.parentHeight = componentWrapper.offsetHeight;
-        this.parentWidth = componentWrapper.offsetWidth;
-    }
-
-    private createForm(): void {
-        this.searchForm = this.formBuilder.group({
-            search: eStringPlaceholder.EMPTY,
-        });
-
-        this.searchFormControl = this.searchForm?.get(
-            eGeneralActions.SEARCH_LOWERCASE
-        );
-    }
-
-    @HostListener('document:click', ['$event'])
-    public onDocumentClick(event: Event): void {
-        if (!this.isExpanded) {
-            return;
-        }
-
-        const target = event.target as HTMLElement;
-        const clickedInside =
-            this.componentWrapperRef?.nativeElement?.contains(target);
-
-        if (!clickedInside) {
-            this.searchForm.reset();
-            this.isExpanded = false;
-        }
-        this.isTitleHovered = false;
-    }
-
-    public toggleOptionsVisibility(): void {
-        this.isExpanded = !this.isExpanded;
-    }
-
-    public onSelectDropdownItem(selectedItem: IDropdownItem): void {
-        this.dropDownOptions = this.dropDownOptions.map(
-            (item: IDropdownItem) => ({
-                ...item,
-                isSelected: item?.title === selectedItem?.title,
-            })
-        );
-        this.onDropdownItemSelect.emit(selectedItem);
-        this.selectedItem = selectedItem;
-        this.searchFormControl?.setValue('');
-        this.isExpanded = false;
-    }
-
-    public onDropdownItemHover(id: number | undefined): void {
-        this.dropdownItemHoverId = id;
-    }
-
-    public clearSearch(): void {
-        this.searchForm.reset();
-    }
-
-    public onTitleHover(): void {
-        this.isTitleHovered = !this.isTitleHovered;
-    }
-
-    ngOnDestroy(): void {
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
-}

package/lib/components/ca-toolbar-dropdown/ca-toolbar-dropdown.stories.ts

@@ -1,83 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { importProvidersFrom } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
-import {
-    applicationConfig,
-    moduleMetadata,
-    StoryObj,
-    Meta,
-} from '@storybook/angular';
-
-// modules
-import { AngularSvgIconModule, SvgIconRegistryService } from 'angular-svg-icon';
-import { eStringPlaceholder } from '../../enums';
-
-// components
-import { CaToolbarDropdownComponent } from './ca-toolbar-dropdown.component';
-
-const meta: Meta<CaToolbarDropdownComponent> = {
-    title: 'Example/CaToolbarDropdown',
-    component: CaToolbarDropdownComponent,
-    tags: ['autodocs'],
-    decorators: [
-        applicationConfig({
-            providers: [importProvidersFrom(BrowserAnimationsModule)],
-        }),
-        moduleMetadata({
-            imports: [
-                // modules
-                CommonModule,
-                FormsModule,
-                ReactiveFormsModule,
-                BrowserAnimationsModule,
-                AngularSvgIconModule.forRoot(),
-
-                NgbModule,
-            ],
-            providers: [SvgIconRegistryService],
-        }),
-    ],
-    argTypes: {},
-};
-export default meta;
-type Story = StoryObj<CaToolbarDropdownComponent>;
-
-export const ToolbarDropdownStory: Story = {
-    args: {
-        dropdownOptions: [
-            {
-                id: 1,
-                title: 'Comments',
-                count: 5,
-                isSelected: false,
-                avatar: '',
-                iconColor: '#ffffff',
-                icon: 'assets/ca-components/svg/common/ic_columns.svg',                
-            },
-            {
-                id: 2,
-                title: 'Status Log',
-                count: 10,
-                isSelected: false,
-                avatar: 'https://s3.rute.co:9000/devcarriera/User avatar/37/9/9c14dff2-fed4-44a0-88ca-0a1a2da7541b-userAvatar.png',
-                iconColor: '',
-                icon: '',
-            },        
-            {
-                id: 3,
-                title: 'Charlie Brown',
-                count: 4,
-                isSelected: false,
-                avatar: '',
-                avatarColor: {
-                    background: '#B7B6F1',
-                    color: '#6D82C7',
-                },
-                iconColor: '',
-                icon: '',
-            }    
-        ],
-    },
-};

package/lib/components/ca-toolbar-dropdown/interfaces/dropdown-item.interface.ts

@@ -1,14 +0,0 @@
-export interface IDropdownItem {
-    id?: number;
-    title: string;
-    count: number;
-    isSelected: boolean;
-    isCountHidden?: boolean;
-    avatar?: string;
-    icon?: string;
-    iconColor?: string;
-    avatarColor?: { 
-        background?: string; 
-        color?: string 
-    };
-}

package/lib/components/ca-toolbar-dropdown/interfaces/index.ts

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

package/lib/components/ca-toolbar-dropdown/pipes/filter-by-search-term.pipe.ts

@@ -1,20 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-
-// interfaces
-import { IDropdownItem } from '../interfaces';
-
-@Pipe({
-    name: 'filterBySearchTerm',
-    standalone: true,
-})
-export class FilterBySearchTermPipe implements PipeTransform {
-    transform(items: IDropdownItem[], searchTerm?: string): IDropdownItem[] {
-        if (!searchTerm) return items;
-
-        const searchValue: string = searchTerm.trim().toLowerCase();
-
-        return items?.filter((item: IDropdownItem) =>
-            item?.title?.toLowerCase()?.includes(searchValue)
-        );
-    }
-}

package/lib/components/ca-toolbar-dropdown/pipes/index.ts

@@ -1,2 +0,0 @@
-export * from './filter-by-search-term.pipe';
-export * from './selected-item.pipe';