ca-components 2.1.152 → 2.1.161

package/lib/components/ca-custom-card/ca-custom-card.component.html

@@ -1,164 +0,0 @@
-<div
-    class="ca-custom-card"
-    (mouseenter)="isCardHover = true"
-    (mouseleave)="isCardHover = false"
->
-    @if (hasDivider) {
-        <div class="divider {{ customDividerClass }}"></div>
-    }
-
-    @if (!isHeaderHidden) {
-        <div
-            class="ca-card-header d-flex justify-content-between"
-            [ngClass]="
-                isTwoRowTitle ? 'align-items-start' : 'h-26 align-items-center'
-            "
-            [class.no-data]="!hasBodyData"
-            [class.disabled]="isDisabledCard"
-            [class.always-open]="isAlwaysOpen"
-            [class.active]="_isCardOpen"
-            (mouseenter)="isHeaderHover = true"
-            (mouseleave)="isHeaderHover = false"
-            (click)="isCardOpenEvent($event)"
-        >
-            <!-- Left side of header -->
-
-            <div class="header-content d-flex align-items-center p-y-4 m-r-4">
-                <!-- Name -->
-
-                <span
-                    class="header-text ca-font-extra-bold text-size-14 {{
-                        customNameClass
-                    }}"
-                    [ngClass]="
-                        _isCardOpen ? 'text-color-black' : 'text-color-bw6-2'
-                    "
-                >
-                    {{ cardName }}
-                </span>
-
-                <!-- Counter -->
-
-                @if (counter >= 0) {
-                    <div
-                        class="header-counter d-flex align-items-center justify-content-center p-x-5 p-y-4 m-l-4 h-18 min-w-18 br-60"
-                        [ngClass]="
-                            _isCardOpen
-                                ? 'background-gray-2'
-                                : 'background-muted'
-                        "
-                    >
-                        <span
-                            class="text-color-white ca-font-bold text-size-11"
-                            >{{ counter }}</span
-                        >
-                    </div>
-                }
-
-                <ng-container
-                    *ngTemplateOutlet="
-                        headerLeftSideTemplate;
-                        context: headerLeftSideContext
-                    "
-                ></ng-container>
-
-                <!-- Sub Text -->
-
-                @if (cardSubText) {
-                    <span
-                        class="text-size-11 line-height-15 text-color-muted ca-font-medium m-l-4 m-t-2"
-                    >
-                        {{ cardSubText }}
-                    </span>
-                }
-            </div>
-
-            <!-- Right Side of header -->
-            <div
-                class="header-actions d-flex align-items-center {{
-                    headerRightSideClass
-                }}"
-            >
-                @if (
-                    !isShowArrowOnHover ||
-                    (isShowArrowOnHover && !isHeaderHover)
-                ) {
-                    <ng-container
-                        *ngTemplateOutlet="headerRightSideTemplate"
-                    ></ng-container>
-                }
-
-                <!-- Arrow -->
-                @if (
-                    (hasArrow &&
-                        hasBodyData &&
-                        !isAlwaysOpen &&
-                        (!hasPlusIcon || (hasPlusIcon && !_isCardOpen))) ||
-                    (isShowArrowOnHover && isHeaderHover)
-                ) {
-                    <svg-icon
-                        class="header-arrow d-flex align-items-center"
-                        [class.header-arrow-hide]="!isCardHover && _isCardOpen"
-                        [ngClass]="{ rotate: _isCardOpen }"
-                        [src]="sharedSvgRoutes.ARROW_DOWN"
-                    ></svg-icon>
-                }
-
-                <!-- Plus -->
-                @if (
-                    (hasArrow && hasPlusIcon && _isCardOpen) ||
-                    (!hasArrow && hasPlusIcon)
-                ) {
-                    <div
-                        class="d-flex align-items-center justify-content-center br-2 p-x-4 p-y-4 w-26 h-26"
-                        [ngClass]="
-                            isPlusIconDisabled
-                                ? 'svg-fill-light-grey-6 cursor-default'
-                                : 'svg-fill-blue-8 svg-hover-blue-15 background-hover-blue-16 c-pointer'
-                        "
-                        ngbTooltip
-                        [mainCaTooltip]="plusIconTooltip"
-                        [tooltipBackground]="eColor.BLACK"
-                        [position]="ePosition.BOTTOM"
-                        [disableTooltip]="isPlusIconDisabled"
-                        (click)="onPlusIconClick($event)"
-                    >
-                        <svg-icon
-                            class="svg-size-18 d-flex align-items-center justify-content-center"
-                            [src]="sharedSvgRoutes.PLUS_ICON"
-                        ></svg-icon>
-                    </div>
-                }
-            </div>
-        </div>
-    }
-
-    <!-- Body -->
-
-    <div
-        class="ca-card-body"
-        [ngClass]="{
-            scroll: hasScrollBody,
-        }"
-    >
-        <div
-            [ngClass]="noActive"
-            [style.--animation-margin-top]="
-                _isCardOpen ? animationMarginParams.marginTop : '0'
-            "
-            [style.--animation-margin-bottom]="
-                _isCardOpen ? animationMarginParams.marginBottom : '0'
-            "
-            [class.openedCardClass]="_isCardOpen"
-            [@showHideCardBody]="{
-                value: _isCardOpen,
-                params: animationMarginParams,
-            }"
-            class="content-holder {{ customClass }}"
-        >
-            @if (isCardOpenAnimated) {
-                <ng-content></ng-content>
-            }
-        </div>
-    </div>
-</div>

package/lib/components/ca-custom-card/ca-custom-card.component.scss

@@ -1,187 +0,0 @@
-@import 'scss/styles.scss';
-
-@keyframes selectFix {
-    from {
-        user-select: none;
-    }
-
-    to {
-        user-select: auto !important;
-    }
-}
-
-.ca-custom-card {
-    transition: background 0.1s ease-in-out;
-
-    // Card header
-    .ca-card-header {
-        margin: 4px 0px;
-        cursor: pointer;
-        user-select: none;
-        max-width: 616px;
-
-        .header-content {
-            .header-text {
-                transition: color 0.3s ease-in-out;
-            }
-
-            .header-counter {
-                transition: background-color 0.3s ease-in-out;
-            }
-        }
-
-        // Card right side actions
-        .header-actions {
-            // Arrow
-            .header-arrow {
-                width: 18px;
-                height: 18px;
-                line-height: 18px;
-
-                opacity: 1;
-                visibility: visible;
-                transition:
-                    opacity 0.3s ease-in-out,
-                    visibility 0.3s ease-in-out;
-
-                &-hide {
-                    opacity: 0;
-                    visibility: hidden;
-                }
-
-                svg {
-                    transform: rotate(0deg);
-                    transition: all 0.3s ease-in-out;
-
-                    path {
-                        fill: $muted;
-                        transition: all 0.3s ease-in-out;
-                    }
-                }
-
-                &.rotate {
-                    svg {
-                        transform: rotate(180deg);
-                        transition: all 0.3s ease-in-out;
-                    }
-                }
-            }
-        }
-
-        &:hover {
-            transition: all 0.3s ease-in-out;
-
-            .header-text {
-                color: $ta-black !important;
-            }
-
-            .header-arrow {
-                svg {
-                    path {
-                        transition: all 0.3s ease-in-out;
-                        fill: $ta-black;
-                    }
-                }
-            }
-
-            .header-counter {
-                background-color: $bw6-2 !important;
-            }
-        }
-
-        &.no-data {
-            cursor: auto !important;
-
-            &:hover {
-                .header-arrow {
-                    svg {
-                        path {
-                            fill: $ta-light-grey-2;
-                        }
-                    }
-                }
-            }
-        }
-
-        &.disabled {
-            cursor: default;
-
-            .header-text {
-                color: $ta-light-grey-2 !important;
-            }
-
-            .header-counter {
-                display: none !important;
-            }
-
-            .header-arrow {
-                display: none;
-            }
-        }
-        &.always-open {
-            cursor: default;
-            .header-text {
-                color: $ta-black !important;
-            }
-        }
-    }
-
-    // Card body
-    .ca-card-body {
-        max-height: auto;
-        position: relative;
-
-        .content-holder {
-            margin-top: var(--animation-margin-top, 12px);
-            margin-bottom: var(--animation-margin-bottom, 12px);
-            height: 0;
-            opacity: 0;
-            overflow: hidden;
-            transition:
-                height 0.3s ease-in-out,
-                opacity 0.15s ease-in-out;
-            will-change: height, opacity;
-
-            &.inactive {
-                opacity: 0;
-                overflow: hidden;
-            }
-
-            &.active {
-                opacity: 1;
-                overflow: visible;
-                height: 100%;
-            }
-
-            &.openedCardClass {
-                animation: selectFix 1.5s ease;
-            }
-        }
-
-        &.scroll {
-            overflow-y: auto !important;
-            overflow-x: hidden !important;
-            scrollbar-width: thin !important;
-            /* Firefox */
-
-            &::-webkit-scrollbar {
-                width: 6px;
-            }
-
-            &::-webkit-scrollbar-thumb {
-                background-color: $bw-9;
-                border-radius: 3px;
-                border: 1px solid $ta-light-grey-5;
-            }
-
-            &::-webkit-scrollbar-track {
-                background: $ta-light-grey-5;
-                border-radius: 3px;
-            }
-        }
-    }
-}
-
-.cursor-default {
-    cursor: default;
-}

package/lib/components/ca-custom-card/ca-custom-card.component.stories.ts

@@ -1,97 +0,0 @@
-import {
-    Meta,
-    moduleMetadata,
-    StoryObj,
-    applicationConfig,
-} from '@storybook/angular';
-import { HttpClientModule } from '@angular/common/http';
-
-// modules
-import { AngularSvgIconModule } from 'angular-svg-icon';
-import { CaCustomCardComponent } from './ca-custom-card.component';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { NgbPopoverModule, NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
-import { importProvidersFrom } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-const meta: Meta<CaCustomCardComponent<Meta>> = {
-    title: 'Example/CaCustomCardComponent',
-    component: CaCustomCardComponent,
-    tags: ['autodocs'],
-    decorators: [
-        moduleMetadata({
-            imports: [
-                CommonModule,
-                NgbPopoverModule,
-                AngularSvgIconModule,
-                NgbTooltip,
-            ],
-        }),
-        applicationConfig({
-            providers: [
-                importProvidersFrom(
-                    BrowserAnimationsModule,
-                    HttpClientModule,
-                    AngularSvgIconModule.forRoot(),
-                    NgbTooltip
-                ),
-            ],
-        }),
-    ],
-};
-
-export default meta;
-type Story = StoryObj<CaCustomCardComponent<StoryObj>>;
-
-const cardTemplate: string = `
-  <app-ca-custom-card
-    [cardName]="cardName"
-    [hasPlusIcon]="hasPlusIcon"
-    [headerLeftSideTemplate]="mockTemplateLeft"
-    [headerRightSideTemplate]="mockTemplateRight"
-  >
-    <div>Something to show me</div>
-  </app-ca-custom-card>
-
-  <ng-template #mockTemplateLeft>
-      <div style="color: red;">This is a mocked template!</div>
-    </ng-template>
-
-  <ng-template #mockTemplateRight>
-    <div style="color: blue;">This is a mocked template!</div>
-  </ng-template>
-`;
-
-export const DefaultCard: Story = {
-    args: {
-        cardName: 'Test',
-    },
-};
-
-export const DisabledCard: Story = {
-    args: {
-        cardName: 'Test',
-        isDisabledCard: true,
-    },
-};
-
-export const CardWithTemplate: Story = {
-    render: (args) => ({
-        props: {
-            ...args,
-            cardName: 'Test',
-        },
-        template: cardTemplate,
-    }),
-};
-
-export const CardWithPlusTemplate: Story = {
-    render: (args) => ({
-        props: {
-            ...args,
-            cardName: 'Test',
-            hasPlusIcon: true,
-            isCardOpen: true,
-        },
-    }),
-};

package/lib/components/ca-custom-card/ca-custom-card.component.ts

@@ -1,181 +0,0 @@
-import {
-    Component,
-    EventEmitter,
-    Input,
-    Output,
-    ViewEncapsulation,
-    ChangeDetectionStrategy,
-    TemplateRef,
-    OnDestroy,
-} from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-// animations
-import { cardModalAnimation } from './utils/animations/card-modal.animation';
-
-// modules
-import { AngularSvgIconModule } from 'angular-svg-icon';
-import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
-
-// Enums
-import { eCustomCard } from './utils/enums/custom-card.enum';
-import { eColor, eGeneralActions, ePosition } from '../../enums';
-
-//svg Routes
-import { SharedSvgRoutes } from '../../utils/svg-routes';
-
-// components
-import { CaAppTooltipV2Component } from '../ca-app-tooltip-v2/ca-app-tooltip-v2.component';
-
-@Component({
-    selector: 'app-ca-custom-card',
-    templateUrl: './ca-custom-card.component.html',
-    styleUrls: ['./ca-custom-card.component.scss'],
-    animations: [cardModalAnimation('showHideCardBody')],
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    encapsulation: ViewEncapsulation.None,
-    imports: [
-        // modules
-        CommonModule,
-        AngularSvgIconModule,
-        NgbModule,
-        // components
-        CaAppTooltipV2Component,
-    ],
-})
-export class CaCustomCardComponent<T> implements OnDestroy {
-    @Input() headerLeftSideTemplate!: TemplateRef<T>;
-    @Input() headerRightSideTemplate!: TemplateRef<T>;
-    @Input() headerLeftSideContext: any;
-
-    @Input() headerRightSideClass!: string;
-
-    @Input() cardHeight!: number;
-    @Input() isAnimationsDisabled = true;
-    @Input() cardName!: string;
-    @Input() cardSubText: string | null = null;
-    @Input() hasArrow: boolean = true;
-    @Input() hasPlusIcon: boolean = false;
-    @Input() isPlusIconDisabled: boolean = false;
-    @Input() plusIconTooltip: string = eGeneralActions.ADD_NEW;
-    @Input() isHeaderSvgEnabled!: boolean;
-    @Input() counter: number = -1;
-    @Input() hasDivider: boolean = true;
-    @Input() hasBodyData: boolean = true;
-    @Input() hasScrollBody!: boolean;
-    @Input() isStayOpen!: boolean;
-    @Input() isDisabledCard!: boolean;
-    @Input() isHeaderHidden?: boolean = false;
-    @Input() isTwoRowTitle?: boolean = false;
-    @Input() isAlwaysOpen!: boolean;
-    @Input() isShowArrowOnHover?: boolean = false;
-    @Input() animationMarginParams = {
-        marginTop: '12px',
-        marginBottom: '12px',
-    };
-    @Input() set isCardOpen(value: boolean) {
-        if (this.isCardClicked) {
-            this.isCardClicked = false;
-            return;
-        }
-
-        this.onIsCardOpenChange(value);
-        this.updateCardAnimationState();
-    }
-
-    @Input() customClass!: string;
-    @Input() customNameClass!: string;
-    @Input() customDividerClass!: string;
-
-    @Output() onActionEvent: EventEmitter<{ check: boolean; action: string }> =
-        new EventEmitter<{ check: boolean; action: string }>();
-    @Output() onOpenCard: EventEmitter<boolean> = new EventEmitter<boolean>(
-        false
-    );
-
-    private isCardOpenAnimatedTimeout:
-        | ReturnType<typeof setTimeout>
-        | undefined;
-
-    private isCardClicked: boolean = false;
-    public isHeaderHover!: boolean;
-    public noActive: string = eCustomCard.INACTIVE;
-    public _isCardOpen!: boolean;
-    public isCardOpenAnimated!: boolean;
-    public isCardHover: boolean = false;
-
-    public sharedSvgRoutes = SharedSvgRoutes;
-    public eColor = eColor;
-    public ePosition = ePosition;
-    public eGeneralActions = eGeneralActions;
-
-    constructor() {}
-
-    private updateCardAnimationState(forceUpdate: boolean = false): void {
-        if (forceUpdate && this.isDisabledCard) return;
-
-        if (this.noActive === eCustomCard.ACTIVE) {
-            this.isCardOpenAnimated = true;
-
-            if (this.isCardOpenAnimatedTimeout) {
-                clearTimeout(this.isCardOpenAnimatedTimeout);
-                this.isCardOpenAnimatedTimeout = undefined;
-            }
-        } else {
-            this.isCardOpenAnimatedTimeout = setTimeout(() => {
-                this.isCardOpenAnimated = false;
-            }, 300);
-        }
-    }
-
-    public onIsCardOpenChange(value: boolean): void {
-        if (this.isAlwaysOpen) {
-            this.noActive = eCustomCard.ACTIVE;
-            this._isCardOpen = true;
-        } else {
-            this.noActive = value ? eCustomCard.ACTIVE : eCustomCard.INACTIVE;
-            this._isCardOpen = value;
-        }
-    }
-
-    public isCardOpenEvent(event: MouseEvent): void {
-        if (this.isDisabledCard || this.isAlwaysOpen) return;
-        this.isCardClicked = true;
-
-        event.preventDefault();
-        event.stopPropagation();
-
-        const newValue = this.noActive === eCustomCard.INACTIVE;
-        this.noActive = newValue ? eCustomCard.ACTIVE : eCustomCard.INACTIVE;
-        this._isCardOpen = newValue;
-
-        this.updateCardAnimationState();
-        this.onOpenCard.emit(this._isCardOpen);
-    }
-
-    public onPlusIconClick(event: MouseEvent): void {
-        event.stopPropagation();
-
-        if (this.isPlusIconDisabled) return;
-
-        if (this.noActive === eCustomCard.INACTIVE) {
-            this.noActive = eCustomCard.ACTIVE;
-            this._isCardOpen = true;
-            this.updateCardAnimationState(true);
-        }
-
-        const actionEventEmit = {
-            check: true,
-            action: 'plus-action',
-        };
-
-        this.onActionEvent.emit(actionEventEmit);
-    }
-
-    ngOnDestroy(): void {
-        if (this.isCardOpenAnimatedTimeout) {
-            clearTimeout(this.isCardOpenAnimatedTimeout);
-            this.isCardOpenAnimatedTimeout = undefined;
-        }
-    }
-}

package/lib/components/ca-custom-card/utils/animations/card-modal.animation.ts

@@ -1,80 +0,0 @@
-import {
-    animate,
-    state,
-    style,
-    transition,
-    trigger,
-} from '@angular/animations';
-
-export const cardModalAnimation = (type: string) =>
-    trigger(type, [
-        state(
-            'true',
-            style({
-                height: '*',
-                opacity: '1',
-                'margin-top': '{{marginTop}}',
-                'margin-bottom': '{{marginBottom}}',
-            }),
-            {
-                params: {
-                    marginTop: '{{marginTop}}',
-                    marginBottom: '{{marginBottom}}',
-                },
-            }
-        ),
-        state(
-            'false',
-            style({
-                height: '0px',
-                opacity: '0',
-                'margin-top': '0px',
-                'margin-bottom': '0px',
-            })
-        ),
-        state(
-            'null',
-            style({
-                height: '*',
-            })
-        ),
-        transition('false <=> true', [animate('.3s ease-in-out')]),
-        transition('true <=> false', [animate('.3s ease-in-out')]),
-    ]);
-
-export const cardModalAnimationFalse = (type: string) =>
-    trigger(type, [
-        state(
-            'false',
-            style({
-                height: '*',
-                overflow: 'visible',
-                opacity: '1',
-                'margin-top': '{{marginTop}}',
-                'margin-bottom': '{{marginBottom}}',
-            }),
-            {
-                params: {
-                    marginTop: '{{marginTop}}',
-                    marginBottom: '{{marginBottom}}',
-                },
-            }
-        ),
-        state(
-            'true',
-            style({
-                height: '0px',
-                overflow: 'hidden',
-                opacity: '0',
-                'margin-top': '0px',
-            })
-        ),
-        state(
-            'null',
-            style({
-                height: '*',
-            })
-        ),
-        transition('true <=> false', [animate('.3s ease-in-out')]),
-        transition('false <=> true', [animate('.3s ease-in-out')]),
-    ]);

package/lib/components/ca-custom-card/utils/animations/index.ts

@@ -1 +0,0 @@
-export * from './card-modal.animation';