@updevs/components 1.0.0-alpha.9 → 1.0.0-alpha.91

package/card/src/card.component.ts

@@ -1,112 +0,0 @@
-import {
-    Component,
-    Input,
-    ContentChild,
-    SimpleChanges,
-    OnInit,
-    OnChanges,
-    ViewEncapsulation, HostBinding
-} from '@angular/core';
-import { BgColorStyleType, ButtonModel } from '@updevs/sdk/layout';
-import { TopBottomLeftRightType } from '@updevs/sdk/types';
-import { IconModel } from '@updevs/icons';
-
-import { CardFooterDirective } from './directives/card-footer.directive';
-import { CardHeaderDirective } from './directives/card-header.directive';
-import { HoverEffectType } from './types/hover-effect.type';
-import { CardStateType } from './types/card-state.type';
-import { StatusPositionType } from './types/status-position.type';
-import { RibbonStyleType } from './types/ribbon-style.type';
-import { CardStyleType } from './types/card-style.type';
-import { CardImageDirective } from './directives/card-image.directive';
-import { CardActionsDirective } from './directives/card-actions.directive';
-
-@Component({
-    selector: 'upd-card',
-    templateUrl: './card.component.html',
-    styleUrls: ['./card.component.scss'],
-    encapsulation: ViewEncapsulation.None
-})
-export class CardComponent implements OnInit, OnChanges {
-    @HostBinding('class') @Input() wrapperClasses = '';
-    @ContentChild(CardHeaderDirective) headerTemplate?: CardHeaderDirective;
-    @ContentChild(CardFooterDirective) footerTemplate?: CardFooterDirective;
-    @ContentChild(CardImageDirective) imageTemplate?: CardImageDirective;
-    @ContentChild(CardActionsDirective) actionsTemplate?: CardActionsDirective;
-
-    @Input() title?: string;
-    @Input() subtitle?: string;
-    @Input() hoverEffect?: HoverEffectType;
-    @Input() state?: CardStateType;
-    @Input() type?: CardStyleType;
-    @Input() imagePosition?: TopBottomLeftRightType;
-    @Input() bgColor?: BgColorStyleType;
-    @Input() stampIcon?: IconModel;
-    @Input() stampBackground: BgColorStyleType = 'primary';
-    @Input() statusBackground?: BgColorStyleType;
-    @Input() statusPosition: StatusPositionType = 'top';
-    @Input() ribbonBackground?: BgColorStyleType;
-    @Input() ribbonStyle: RibbonStyleType = 'default';
-    @Input() ribbonIcon?: IconModel = { tablerIcon: 'star' };
-    @Input() ribbonText?: string;
-    @Input() rotate?: 'right' | 'left';
-    @Input() removeBorder = false;
-    @Input() useLightHeader = false;
-    /**
-     * Whether the header should be displayed.
-     */
-    @Input() showHeader = true;
-    @Input() isFooterTransparent = false;
-    @Input() footerText?: string;
-    @Input() showProgressBar = false;
-    @Input() progress?: number;
-    @Input() actions: ButtonModel[] = [];
-
-    classes: string[] = [];
-
-    ngOnInit(): void {
-        this.updateClasses();
-    }
-
-    ngOnChanges(changes: SimpleChanges): void {
-        this.updateClasses();
-    }
-
-    private updateClasses(): void {
-        const lClasses: string[] = [];
-
-        if (this.removeBorder) {
-            lClasses.push('card-borderless');
-        }
-
-        if (!!this.hoverEffect) {
-            lClasses.push('card-link');
-
-            if (this.hoverEffect !== 'default') {
-                lClasses.push(`card-link-${this.hoverEffect}`);
-            }
-        }
-
-        if (!!this.state) {
-            lClasses.push(`card-${this.state}`);
-        }
-
-        if (!!this.bgColor) {
-            lClasses.push(`bg-${this.bgColor}`);
-        }
-
-        if (!!this.rotate) {
-            lClasses.push(`card-rotate-${this.rotate}`);
-        }
-
-        if (!!this.type) {
-            lClasses.push(`card-${this.type}`);
-        }
-
-        if (!!this.hoverEffect) {
-            this.classes = [...lClasses];
-        } else {
-            this.wrapperClasses = 'card ' + lClasses.join(' ');
-        }
-    }
-}

package/card/src/directives/card-actions.directive.spec.ts

@@ -1,8 +0,0 @@
-import { CardActionsDirective } from './card-actions.directive';
-
-describe('CardActionsDirective', () => {
-  it('should create an instance', () => {
-    const directive = new CardActionsDirective();
-    expect(directive).toBeTruthy();
-  });
-});

package/card/src/directives/card-actions.directive.ts

@@ -1,8 +0,0 @@
-import { Directive, TemplateRef, inject } from '@angular/core';
-
-@Directive({
-    selector: 'ng-template[updCardActions]'
-})
-export class CardActionsDirective {
-    public readonly templateRef = inject(TemplateRef<any>);
-}

package/card/src/directives/card-footer.directive.spec.ts

@@ -1,8 +0,0 @@
-import { CardFooterDirective } from './card-footer.directive';
-
-describe('CardFooterDirective', () => {
-    it('should create an instance', () => {
-        const directive = new CardFooterDirective(undefined);
-        expect(directive).toBeTruthy();
-    });
-});

package/card/src/directives/card-footer.directive.ts

@@ -1,8 +0,0 @@
-import { Directive, TemplateRef, inject } from '@angular/core';
-
-@Directive({
-    selector: 'ng-template[updCardFooter]'
-})
-export class CardFooterDirective {
-    public readonly templateRef = inject(TemplateRef<any>);
-}

package/card/src/directives/card-header.directive.spec.ts

@@ -1,8 +0,0 @@
-import { CardHeaderDirective } from './card-header.directive';
-
-describe('CardHeaderDirective', () => {
-  it('should create an instance', () => {
-    const directive = new CardHeaderDirective();
-    expect(directive).toBeTruthy();
-  });
-});

package/card/src/directives/card-header.directive.ts

@@ -1,8 +0,0 @@
-import { Directive, TemplateRef, inject } from '@angular/core';
-
-@Directive({
-    selector: 'ng-template[updCardHeader]'
-})
-export class CardHeaderDirective {
-    public readonly templateRef = inject(TemplateRef<any>);
-}

package/card/src/directives/card-image.directive.spec.ts

@@ -1,8 +0,0 @@
-import { CardImageDirective } from './card-image.directive';
-
-describe('CardImageDirective', () => {
-    it('should create an instance', () => {
-        const directive = new CardImageDirective(undefined);
-        expect(directive).toBeTruthy();
-    });
-});

package/card/src/directives/card-image.directive.ts

@@ -1,8 +0,0 @@
-import { Directive, TemplateRef, inject } from '@angular/core';
-
-@Directive({
-    selector: 'ng-template[updCardImage]'
-})
-export class CardImageDirective {
-    public readonly templateRef = inject(TemplateRef<any>);
-}

package/card/src/public-api.ts

@@ -1,3 +0,0 @@
-export * from './directives/public-api';
-export * from './upd-card.module';
-export * from './card.component';

package/card/src/upd-card.module.ts

@@ -1,32 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { UpdIconsModule } from '@updevs/icons';
-import { UpdButtonModule } from '@updevs/components/button';
-
-import { CardComponent } from './card.component';
-import { CardHeaderDirective } from './directives/card-header.directive';
-import { CardFooterDirective } from './directives/card-footer.directive';
-import { CardImageDirective } from './directives/card-image.directive';
-import { CardActionsDirective } from './directives/card-actions.directive';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        UpdIconsModule,
-        UpdButtonModule
-    ],
-    declarations: [
-        CardComponent,
-        CardHeaderDirective,
-        CardFooterDirective,
-        CardImageDirective,
-        CardActionsDirective
-    ],
-    exports: [
-        CardComponent,
-        CardHeaderDirective,
-        CardFooterDirective,
-        CardImageDirective
-    ]
-})
-export class UpdCardModule {}

package/drag-and-drop/index.ts

@@ -1 +0,0 @@
-export * from './src/index';

package/drag-and-drop/ng-package.json

@@ -1,6 +0,0 @@
-{
-    "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
-    "lib": {
-        "entryFile": "src/index.ts"
-    }
-}

package/drag-and-drop/src/drag-and-drop.component.html

@@ -1,24 +0,0 @@
-<div class="d-flex w-100">
-    @for (col of columns(); track col.name) {
-        <div class="d-flex flex-column w-100 me-2 bg-body p-4 rounded" (drop)="drop($event, col.name)"
-            (dragover)="dragOver($event, col.name)" (dragenter)="dragEnter()" (dragleave)="dragLeave(col.name)">
-            @if (!!col.title) {
-                <div class="mb-2">
-                    <h1>{{ textService.getText(col.title) }}</h1>
-                </div>
-            }
-            @for (item of col.items(); track item.name) {
-                <div class="d-flex border p-2 mb-1 bg-muted-lt rounded" [attr.draggable]="item.isDraggable" [attr.id]="item.name"
-                    [class.draggable]="item.isDraggable" [class.opacity-25]="item.isBeingDragged()"
-                    (dragstart)="startDrag($event, item, col.name)" (dragend)="endDrag(item)">
-                    @if (canShowHandler(item)) {
-                        <upd-icon tablerIcon="grip-vertical" customClasses="me-2"></upd-icon>
-                    }
-                    <div class="flex-grow-1 align-content-center">
-                        <span>{{ textService.getText(item.text) }}</span>
-                    </div>
-                </div>
-            }
-        </div>
-    }
-</div>

package/drag-and-drop/src/drag-and-drop.component.scss

@@ -1,4 +0,0 @@
-.draggable {
-    cursor: move;
-    user-select: none;
-}

package/drag-and-drop/src/drag-and-drop.component.spec.ts

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

package/drag-and-drop/src/drag-and-drop.component.ts

@@ -1,164 +0,0 @@
-import { Component, input, inject, computed, signal, model, OnInit } from '@angular/core';
-import { TextService } from '@updevs/sdk';
-import { OptionalType } from '@updevs/sdk/types';
-
-import { DragAndDropItemModel } from './models/drag-and-drop-item.model';
-import { DragAndDropColumnModel } from './models/drag-and-drop-column.model';
-import { DragAndDropConfig } from './models/drag-and-drop.config';
-
-@Component({
-    selector: 'upd-drag-and-drop',
-    templateUrl: './drag-and-drop.component.html',
-    styleUrl: './drag-and-drop.component.scss'
-})
-export class DragAndDropComponent implements OnInit {
-    config = input.required<DragAndDropConfig>();
-    columns = model<DragAndDropColumnModel[]>([]);
-
-    readonly showHandler = computed(() => this.config().showHandler || false);
-    readonly canReorder = computed(() => this.config().canReorder || false);
-    readonly textService = inject(TextService);
-
-    private readonly isReordering = signal(false);
-    private readonly draggedItem = signal<OptionalType<DragAndDropItemModel>>(undefined);
-    private dragEnterCounter = 0;
-
-    ngOnInit(): void {
-        this.columns.set(this.config().columns.map(c => new DragAndDropColumnModel(c)));
-    }
-
-    canShowHandler(item: DragAndDropItemModel): boolean {
-        return this.showHandler() && item.isDraggable;
-    }
-
-    startDrag(event: DragEvent, item: DragAndDropItemModel, origin: string): void {
-        item.origin = origin;
-
-        this.draggedItem.set(item);
-        item.isBeingDragged.set(true);
-
-        event.dataTransfer!.effectAllowed = 'move';
-    }
-
-    endDrag(item: DragAndDropItemModel): void {
-        item.isBeingDragged.set(false);
-        this.draggedItem.set(undefined);
-    }
-
-    drop(event: DragEvent, destination: string): void {
-        event.preventDefault();
-
-        this.dragEnterCounter = 0;
-        const dataTransfer = event.dataTransfer!;
-        dataTransfer.dropEffect = 'move';
-        const itemName = this.draggedItem()?.name;
-        const origin = this.draggedItem()?.origin;
-        const item = this.columns().find(c => c.name === origin)?.items().find(i => i.name === itemName);
-
-        if (!!item && (this.canReorder() || destination !== origin)) {
-            const destinationColumn = this.columns().find(c => c.name === destination);
-            const originColumn = this.columns().find(c => c.name === origin)!;
-
-            if (!!destinationColumn) {
-                item.isBeingDragged.set(false);
-                this.draggedItem.set(undefined);
-
-                // We only move items if it's a move between containers, if it's a reorder, nothing needs to be done.
-                // The item was correctly replaced during dragOver.
-                if (destination !== origin) {
-                    const originIdx = originColumn.items().findIndex(i => i.name === itemName);
-                    const destinationIdx = destinationColumn.items().findIndex(i => i.name === itemName);
-
-                    originColumn.items().splice(originIdx, 1);
-
-                    // This is required, because the item may have been added during dragOver. TODO: check
-                    if (destinationIdx >= 0) {
-                        dataTransfer.clearData();
-                        return;
-                    }
-
-                    destinationColumn.items().push(item);
-
-                    const destinationColumnIdx = this.columns().findIndex(c => c.name === destination);
-
-                    this.columns.update(curr => {
-                        curr[destinationColumnIdx] = destinationColumn;
-                        return [...curr];
-                    });
-                }
-
-                dataTransfer.clearData();
-            }
-        }
-    }
-
-    dragOver(event: DragEvent, destination: string): void {
-        event.preventDefault();
-        const destinationColumn = this.columns().find(c => c.name === destination)!;
-
-        if (this.isReordering() || destinationColumn.items().length === 0) {
-            return;
-        }
-
-        event.dataTransfer!.dropEffect = 'move';
-
-        this.isReordering.set(true);
-        const element = event.target as HTMLElement;
-
-        if (!!element.id && !!this.draggedItem() && element.id !== this.draggedItem()!.name) {
-            const destinationHoverIdx = destinationColumn.items().findIndex(i => i.name === element.id);
-            const rect = element.getBoundingClientRect();
-            const y = event.clientY - rect.top;
-            const newOverZone = y <= rect.height / 2 ? 'top' : 'bottom';
-
-            destinationColumn.items.update(curr => {
-                const originalArray = [...curr];
-
-                if (destinationHoverIdx >= 0) {
-                    if (destinationHoverIdx === 0 && newOverZone === 'top') {
-                        originalArray.unshift(this.draggedItem()!);
-                    } else if (destinationHoverIdx === curr.length - 1 && newOverZone === 'bottom') {
-                        originalArray.push(this.draggedItem()!);
-                    } else {
-                        const originalItem = curr[destinationHoverIdx];
-                        originalArray.splice(destinationHoverIdx, 1);
-                        originalArray.splice(destinationHoverIdx + (newOverZone === 'top' ? -1 : 1), 0, originalItem);
-                    }
-                } else if (!!this.draggedItem()) {
-                    originalArray.push(this.draggedItem()!);
-                }
-
-                return originalArray;
-            });
-
-            const destinationColumnIdx = this.columns().findIndex(c => c.name === destination);
-
-            this.columns.update(curr => {
-                curr[destinationColumnIdx] = destinationColumn;
-                return [...curr];
-            });
-        }
-
-        this.isReordering.set(false);
-    }
-
-    dragEnter(): void {
-        this.dragEnterCounter++;
-    }
-
-    dragLeave(columnName: string): void {
-        this.dragEnterCounter--;
-
-        if (this.dragEnterCounter === 0 && !!this.draggedItem()?.origin && this.draggedItem()?.origin !== columnName) {
-            const column = this.columns().find(c => c.name === columnName)!;
-            const idx = column.items().findIndex(i => i.name === this.draggedItem()?.name);
-
-            if (idx >= 0) {
-                column.items.update(curr => {
-                    curr.splice(idx, 1);
-                    return [...curr];
-                });
-            }
-        }
-    }
-}

package/drag-and-drop/src/models/drag-and-drop-column.config.ts

@@ -1,10 +0,0 @@
-import { TextModel } from '@updevs/sdk';
-
-import { DragAndDropItem } from './drag-and-drop-item';
-
-export interface DragAndDropColumnConfig {
-    name: string;
-    title?: TextModel;
-    items: DragAndDropItem[];
-    canBeEmpty?: boolean;
-}

package/drag-and-drop/src/models/drag-and-drop-column.model.ts

@@ -1,16 +0,0 @@
-import { WritableSignal, signal } from '@angular/core';
-import { TextModel } from '@updevs/sdk';
-
-import { DragAndDropColumnConfig } from './drag-and-drop-column.config';
-import { DragAndDropItemModel } from './drag-and-drop-item.model';
-
-export class DragAndDropColumnModel {
-    name!: string;
-    title?: TextModel;
-    items!: WritableSignal<DragAndDropItemModel[]>;
-
-    constructor(init: DragAndDropColumnConfig) {
-        Object.assign(this, init);
-        this.items = signal(init.items.map(i => new DragAndDropItemModel(i)));
-    }
-}

package/drag-and-drop/src/models/drag-and-drop-item.model.ts

@@ -1,21 +0,0 @@
-import { signal } from '@angular/core';
-import { TextModel } from '@updevs/sdk';
-
-import { DragAndDropItem } from './drag-and-drop-item';
-
-export class DragAndDropItemModel implements DragAndDropItem {
-    name!: string;
-    text!: TextModel;
-    isDisabled = false;
-    canDrag = true;
-    canBeEmpty = true; // TODO: implement
-    isBeingDragged = signal(false);
-    origin?: string;
-    get isDraggable(): boolean {
-        return this.canDrag && !this.isDisabled;
-    }
-
-    constructor(init: DragAndDropItem) {
-        Object.assign(this, init);
-    }
-}

package/drag-and-drop/src/models/drag-and-drop-item.ts

@@ -1,8 +0,0 @@
-import { TextModel } from '@updevs/sdk';
-
-export interface DragAndDropItem {
-    name: string;
-    text: TextModel;
-    isDisabled?: boolean;
-    canDrag?: boolean;
-}

package/drag-and-drop/src/models/drag-and-drop.config.ts

@@ -1,7 +0,0 @@
-import { DragAndDropColumnConfig } from './drag-and-drop-column.config';
-
-export interface DragAndDropConfig {
-    columns: DragAndDropColumnConfig[];
-    showHandler?: boolean;
-    canReorder?: boolean;
-}

package/drag-and-drop/src/upd-drag-and-drop.module.ts

@@ -1,19 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { UpdIconsModule } from '@updevs/icons';
-
-import { DragAndDropComponent } from './drag-and-drop.component';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        UpdIconsModule
-    ],
-    declarations: [
-        DragAndDropComponent
-    ],
-    exports: [
-        DragAndDropComponent
-    ]
-})
-export class UpdDragAndDropModule {}

package/dropdown/index.ts

@@ -1 +0,0 @@
-export * from './src/index';

package/dropdown/ng-package.json

@@ -1,6 +0,0 @@
-{
-    "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
-    "lib": {
-        "entryFile": "src/index.ts"
-    }
-}

package/dropdown/src/dropdown.component.html

@@ -1,70 +0,0 @@
-@if (!!header) {
-    <h6 class="dropdown-header">{{ header }}</h6>
-}
-
-@for (item of items; track item) {
-    @switch (item.type) {
-        @case ('divider') {
-            <div class="dropdown-divider"></div>
-        }
-        @case ('default') {
-            <upd-button [customClasses]="'dropdown-item' + (item.isDisabled ? ' disabled' : '') + (item.isActive ? ' active' : '')"
-                [shouldIgnoreBtnClass]="true" (clicked)="onSelect(item)">
-                @if (!!item.icon) {
-                    <upd-icon [model]="item.icon" customClasses="dropdown-item-icon"></upd-icon>
-                }
-
-                @if (!!item.leftBoxText || !!item.leftBoxImage) {
-                    <span style="background-image: url({{item.leftBoxImage}})"
-                        class="avatar avatar-xs rounded me-2">{{ item.leftBoxText }}</span>
-                }
-
-                {{ textService.getText(item.text) }}
-
-                @if (!!item.badgeColor) {
-                    <span class="badge bg-{{item.badgeColor}} ms-auto">{{ item.badgeText }}</span>
-                }
-            </upd-button>
-        }
-        @case ('radio') {
-            <upd-radio (selected)="onSelect(item)" [label]="item.text" [isChecked]="item.isChecked || false"
-                [wrapperClasses]="'dropdown-item' + (item.isDisabled ? ' disabled' : '') + (item.isActive ? ' active' : '')"></upd-radio>
-        }
-        @case ('checkbox') {
-            <upd-checkbox (changed)="onCheckboxChange(item, $event)" [label]="item.text" [isChecked]="item.isChecked || false"
-                [isSwitch]="item.isSwitch || false"
-                [wrapperClasses]="'dropdown-item' + (item.isDisabled ? ' disabled' : '') + (item.isActive ? ' active' : '')"></upd-checkbox>
-        }
-        @case ('with-toolbar') {
-            <div class="dropdown-item" [class.disabled]="item.isDisabled" [class.active]="item.isActive" (click)="onSelect(item)">
-                @if (!!item.icon) {
-                    <upd-icon [model]="item.icon" customClasses="dropdown-item-icon"></upd-icon>
-                }
-
-                @if (!!item.leftBoxText || !!item.leftBoxImage) {
-                    <span style="background-image: url({{item.leftBoxImage}})"
-                        class="avatar avatar-xs rounded me-2">{{ item.leftBoxText }}</span>
-                }
-
-                <span [ngClass]="overflowClass">
-                    {{ textService.getText(item.text) }}
-                </span>
-
-                @if ((item.actionButtons?.length || 0) > 0) {
-                    <div class="ms-auto d-flex" [class.btn-group]="item.toolbarType === 'grouped'"
-                        [class.gap-1]="item.toolbarType === 'spaced'">
-                        @for (btn of item.actionButtons; track btn) {
-                            <upd-button [model]="adaptAction(btn, item)"></upd-button>
-                        }
-                    </div>
-                }
-
-                @if (!!item.badgeColor) {
-                    <span class="badge bg-{{item.badgeColor}} ms-auto">{{ item.badgeText }}</span>
-                }
-            </div>
-        }
-    }
-}
-
-<ng-content></ng-content>

package/dropdown/src/dropdown.component.scss

@@ -1,19 +0,0 @@
-.dropdown-show {
-    display: inline-block !important;
-    width: 100% !important;
-    position: relative;
-    top: 0 !important;
-    margin-bottom: 1rem !important;
-}
-
-.dropdown-item > .form-check {
-    margin-bottom: 0 !important;
-}
-
-.dropdown-item {
-    cursor: pointer !important;
-}
-
-.dropdown-overflow {
-    overflow-y: auto !important;
-}