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

package/card/src/card.component.ts

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

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

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

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

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

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

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

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

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

package/card/src/types/public-api.ts

@@ -0,0 +1,5 @@
+export * from './card-state.type';
+export * from './card-style.type';
+export * from './hover-effect.type';
+export * from './ribbon-style.type';
+export * from './status-position.type';

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/drag-and-drop/src/models/public-api.ts

@@ -0,0 +1,4 @@
+export * from './drag-and-drop.config';
+export * from './drag-and-drop-column.config';
+export * from './drag-and-drop-column.model';
+export * from './drag-and-drop-item';

package/drag-and-drop/src/public-api.ts

@@ -0,0 +1,3 @@
+export * from './models/public-api';
+export * from './drag-and-drop.component';
+export * from './upd-drag-and-drop.module';

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

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

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

package/dropdown/ng-package.json

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

package/dropdown/src/dropdown.component.html

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

@@ -0,0 +1,19 @@
+.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;
+}