@updevs/components 1.0.0-alpha.1 → 1.0.0-alpha.3

package/list/src/list.component.html

@@ -0,0 +1,58 @@
+<ng-container *ngIf="listItems.length > 0; else noDataTpl">
+    <ng-container *ngFor="let item of listItems">
+        <ng-container *ngIf="(item.children?.length || 0) > 0; else rowTpl">
+            <div class="list-group-header sticky-top">{{item.text}}</div>
+            <ng-container *ngFor="let child of item.children">
+                <ng-container [ngTemplateOutlet]="listItemTpl" [ngTemplateOutletContext]="{item:child}"></ng-container>
+            </ng-container>
+        </ng-container>
+        <ng-template #rowTpl>
+            <ng-container [ngTemplateOutlet]="listItemTpl" [ngTemplateOutletContext]="{item:item}"></ng-container>
+        </ng-template>
+    </ng-container>
+</ng-container>
+<ng-template #noDataTpl>
+    <div class="list-group-item">
+        <upd-icon tablerIcon="alert-triangle" wrapperClasses="text-yellow"></upd-icon>
+        {{noRecordsFoundKey | transloco}}
+    </div>
+</ng-template>
+
+<div *ngIf="shouldDisplayItemsCounter" class="list-items-counter bg-muted text-muted-fg">
+    {{listItems.length}} {{(listItems.length === 1 ? itemFoundKey : itemsFoundKey) | transloco}}
+</div>
+
+<ng-template #listItemTpl let-item="item">
+    <div class="list-group-item" [class.list-group-item-action]="!item.hasLeftBox" [class.active]="item.isActive"
+        [class.disabled]="item.isDisabled" (click)="onSelectItem($event, item)">
+        <span *ngIf="!item.hasLeftBox; else customContentTpl">{{item.text}}</span>
+        <ng-template #customContentTpl>
+            <div class="row">
+                <ng-container [ngTemplateOutlet]="leftBoxTpl" [ngTemplateOutletContext]="{item:item}"></ng-container>
+                <div class="col text-truncate">
+                    <div *ngIf="!!item.text" class="text-body d-block">{{item.text}}</div>
+                    <div *ngIf="!!item.description" class="text-muted text-truncate mt-n1">{{item.description}}</div>
+                </div>
+            </div>
+        </ng-template>
+    </div>
+</ng-template>
+
+<ng-template #leftBoxTpl let-item="item">
+    <div *ngIf="item.hasCheckbox" class="col-auto">
+        <upd-checkbox (changed)="onCheckboxChange(item, $event)" [isChecked]="item.isChecked || false"
+            [isSwitch]="item.isSwitch || false"></upd-checkbox>
+        <!--        [wrapperClasses]="'dropdown-item' + (item.isDisabled ? ' disabled' : '') +(item.isActive ? ' active' : '')"-->
+    </div>
+    <div *ngIf="item.hasLeftBadge" class="col-auto">
+        <span class="badge bg-{{item.badgeColor}} ms-auto">{{item.badgeText}}</span>
+    </div>
+    <div *ngIf="!!item.leftBoxImage || !!item.leftBoxText" class="col-auto">
+        <a href="#"> <!-- TODO: change. -->
+            <span class="avatar" style="background-image: url({{item.leftBoxImage}})">{{item.leftBoxText}}
+                <span *ngIf="item.hasBottomRightBadge"
+                    class="badge bg-{{item.badgeColor}} ms-auto">{{item.badgeText}}</span>
+            </span>
+        </a>
+    </div>
+</ng-template>

package/list/src/list.component.scss

@@ -0,0 +1,21 @@
+upd-list {
+    width: 100%;
+}
+
+.list-group-item {
+    cursor: pointer;
+}
+
+.list-hidden {
+    display: none !important;
+}
+
+.list-items-counter {
+    position: sticky;
+    bottom: 0;
+    right: 0;
+    float: right;
+    border-top-left-radius: 2px;
+    opacity: .6;
+    padding: 2px 12px;
+}

package/list/src/list.component.spec.ts

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

package/list/src/list.component.ts

@@ -0,0 +1,147 @@
+import {
+    Component,
+    HostBinding,
+    Input,
+    Renderer2,
+    ElementRef,
+    OnInit,
+    RendererStyleFlags2,
+    ViewEncapsulation,
+    Output,
+    EventEmitter,
+    OnChanges,
+    SimpleChanges
+} from '@angular/core';
+
+import { ListItem } from './models/list-item';
+import { ListItemModel } from './models/list-item.model';
+
+@Component({
+    selector: 'upd-list',
+    templateUrl: './list.component.html',
+    styleUrls: ['./list.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class ListComponent implements OnInit, OnChanges {
+    @HostBinding('class') localWrapperClasses = '';
+
+    /**
+     * List items.
+     * If provided, the single will be considered static.
+     */
+    @Input() items?: ListItem[];
+    /**
+     * Whether the content should overflow or not.
+     */
+    @Input() shouldOverflow = false;
+    /**
+     * Whether the list will fit the layout of the container.
+     * If set to false, the list's round borders will be visible. It'll have a detached behavior.
+     */
+    @Input() isFlush = true;
+    @Input() isVisible = true;
+    @Input() isHoverable = false;
+    @Input() shouldDisplayItemsCounter = false;
+    @Input() wrapperClasses = '';
+    /**
+     * Maximum height of the component.
+     * Note: The unit should also be provided, i.e.: 350px, 35rem, etc.
+     */
+    @Input() maxHeight?: string;
+    /**
+     * Translation key used to inform no records have been found.
+     * If translation is not being used, you can insert the custom text here as well.
+     */
+    @Input() noRecordsFoundKey?: string = 'NoRecordsFound';
+    /**
+     * Translation key used to describe 1 item found.
+     * If translation is not being used, you can insert the custom text here as well.
+     */
+    @Input() itemFoundKey?: string = 'Item';
+    /**
+     * Translation key used to describe items (plural) found.
+     * If translation is not being used, you can insert the custom text here as well.
+     */
+    @Input() itemsFoundKey?: string = 'Items';
+
+    @Output() readonly checkboxChanged = new EventEmitter<ListItem>();
+    @Output() readonly selectedItem = new EventEmitter<ListItem>();
+
+    listItems: ListItemModel[] = [];
+    currentSelection: ListItem[] = [];
+
+    private localBackupItems: ListItem[] = [];
+
+    constructor(
+        private renderer: Renderer2,
+        private elementRef: ElementRef
+    ) {
+    }
+
+    ngOnInit(): void {
+        this.setupStyle();
+        this.updateWrapperClasses();
+        this.setupItems();
+    }
+
+    ngOnChanges(changes: SimpleChanges): void {
+        this.updateWrapperClasses();
+
+        if (!!changes['items']) {
+            this.setupItems();
+        }
+    }
+
+    onCheckboxChange(item: ListItem, isChecked: boolean): void {
+        item.isChecked = isChecked;
+        this.checkboxChanged.emit(item);
+    }
+
+    onSelectItem(evt: any, item: ListItem): void {
+        evt.stopPropagation();
+        this.selectedItem.emit(item);
+    }
+
+    private setupItems(): void {
+        const tempItems: ListItemModel[] = [];
+
+        this.items?.forEach(it => {
+            const parent = new ListItemModel(it);
+
+            if ((it.children?.length || 0) > 0) {
+                parent.children = [];
+                it.children?.forEach(child => parent.children!.push(new ListItemModel(child)));
+            }
+
+            tempItems.push(parent);
+        });
+
+        this.listItems = [...tempItems];
+    }
+
+    private setupStyle(): void {
+        if (!!this.maxHeight) {
+            this.renderer.setStyle(this.elementRef.nativeElement, 'max-height', this.maxHeight, RendererStyleFlags2.Important);
+        }
+    }
+
+    private updateWrapperClasses(): void {
+        this.localWrapperClasses = 'list-group' + ` ${this.wrapperClasses}`;
+
+        if (this.isFlush) {
+            this.localWrapperClasses += ' list-group-flush';
+        }
+
+        if (this.isHoverable) {
+            this.localWrapperClasses += '  list-group-hoverable';
+        }
+
+        if (this.shouldOverflow) {
+            this.localWrapperClasses += '  overflow-auto';
+        }
+
+        if (!this.isVisible) {
+            this.localWrapperClasses += ' list-hidden';
+        }
+    }
+}

package/list/src/models/badge-position.type.ts

@@ -0,0 +1 @@
+export type BadgePositionType = 'left' | 'left-box-bottom-right';

package/list/src/models/list-item.model.ts

@@ -0,0 +1,35 @@
+import { BgColorStyleType } from '@updevs/sdk/layout';
+
+import { ListItem } from './list-item';
+import { BadgePositionType } from './badge-position.type';
+
+export class ListItemModel implements ListItem {
+    id?: any;
+    text?: string;
+    description?: string;
+    icon?: string;
+    isChecked?: boolean;
+    isSwitch?: boolean;
+    hasCheckbox?: boolean;
+    isDisabled?: boolean;
+    isActive?: boolean;
+    leftBoxText?: string;
+    leftBoxImage?: string;
+    badgeColor?: BgColorStyleType;
+    badgeText?: string;
+    badgePosition?: BadgePositionType;
+    children?: ListItemModel[];
+    get hasLeftBox(): boolean {
+        return !!this.leftBoxImage || !!this.leftBoxText || !!this.badgeColor || this.hasCheckbox === true;
+    }
+    get hasLeftBadge(): boolean {
+        return !!this.badgeColor && this.badgePosition === 'left';
+    }
+    get hasBottomRightBadge(): boolean {
+        return !!this.badgeColor && this.badgePosition === 'left-box-bottom-right';
+    }
+
+    constructor(init?: ListItem) {
+        Object.assign(this, init);
+    }
+}

package/list/src/models/list-item.ts

@@ -0,0 +1,21 @@
+import { BgColorStyleType } from '@updevs/sdk/layout';
+
+import { BadgePositionType } from './badge-position.type';
+
+export interface ListItem {
+    id?: any;
+    text?: string;
+    description?: string;
+    icon?: string;
+    isChecked?: boolean;
+    isSwitch?: boolean;
+    hasCheckbox?: boolean;
+    isDisabled?: boolean;
+    isActive?: boolean;
+    leftBoxText?: string;
+    leftBoxImage?: string;
+    badgeColor?: BgColorStyleType;
+    badgeText?: string;
+    badgePosition?: BadgePositionType;
+    children?: ListItem[];
+}

package/list/src/models/public-api.ts

@@ -0,0 +1,2 @@
+export * from './badge-position.type';
+export * from './list-item';

package/list/src/public-api.ts

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

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

@@ -0,0 +1,30 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TranslocoService, TranslocoModule } from '@ngneat/transloco';
+import { UpdCheckboxModule } from '@updevs/components/form-controls/checkbox';
+import { UpdIconsModule } from '@updevs/icons';
+
+import * as en from './assets/i18n/en.json';
+import * as pt from './assets/i18n/pt.json';
+import { ListComponent } from './list.component';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        TranslocoModule,
+        UpdCheckboxModule,
+        UpdIconsModule
+    ],
+    declarations: [
+        ListComponent
+    ],
+    exports: [
+        ListComponent
+    ]
+})
+export class UpdListModule {
+    constructor(translocoService: TranslocoService) {
+        translocoService.setTranslation(en, 'en');
+        translocoService.setTranslation(pt, 'pt');
+    }
+}

package/ng-package.json

@@ -1,7 +1,10 @@
 {
-  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../../dist/updevs/components",
-  "lib": {
-    "entryFile": "src/public-api.ts"
-  }
-}
+    "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+    "dest": "../../../node_modules/@updevs/components",
+    "lib": {
+        "entryFile": "src/public-api.ts"
+    },
+    "assets": [
+        "assets"
+    ]
+}

package/package.json

@@ -1,12 +1,15 @@
 {
     "name": "@updevs/components",
-    "version": "1.0.0-alpha.1",
+    "version": "1.0.0-alpha.3",
     "scripts": {
-        "build": "ng-packagr"
+        "build": "ng build @updevs/components"
     },
     "peerDependencies": {
-        "@angular/common": "^15.1.0",
-        "@angular/core": "^15.1.0"
+        "@angular/common": "^16.2.7",
+        "@angular/core": "^16.2.7",
+        "@ngneat/transloco": "^6.0.0",
+        "@updevs/icons": "^1.0.2",
+        "@updevs/sdk": "^1.0.0-alpha.13"
     },
     "dependencies": {
         "tslib": "^2.3.0"
@@ -15,5 +18,5 @@
         "access": "public"
     },
     "sideEffects": false,
-    "gitHead": "667e1860a13227cae79371443c3acd9594c75f39"
+    "gitHead": "a9f29d8ca7d1c7acc424d82c1a7b00620e496d1c"
 }

package/popover/ng-package.json

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

package/popover/src/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/popover/src/popover.component.html

@@ -0,0 +1,20 @@
+<div class="popover-arrow upd-popover-arrow -{{placement}}"></div>
+<ng-container *ngIf="!!title || !!titleTemplate">
+    <h3 *ngIf="title; else titleTpl" [innerHTML]="title" class="popover-header"></h3>
+    <ng-template #titleTpl>
+        <div class="popover-header">
+            <ng-template [ngTemplateOutlet]="titleTemplate!"></ng-template>
+        </div>
+    </ng-template>
+</ng-container>
+<div class="popover-body">
+    <ng-container *ngIf="!!text; else contentTpl">
+        <span [innerHTML]="text"></span>
+    </ng-container>
+    <ng-template #contentTpl>
+        <ng-container *ngIf="!template; else customContentTpl">
+            <ng-content></ng-content>
+        </ng-container>
+        <ng-template #customContentTpl [ngTemplateOutlet]="template!"></ng-template>
+    </ng-template>
+</div>

package/popover/src/popover.component.scss

@@ -0,0 +1,8 @@
+.upd-popover {
+    position: absolute;
+    margin: 0;
+}
+
+.upd-popover-arrow {
+    position: absolute;
+}

package/popover/src/popover.component.spec.ts

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

package/popover/src/popover.component.ts

@@ -0,0 +1,53 @@
+import { Component, Input, HostBinding, SimpleChanges, OnInit, OnChanges, ViewEncapsulation, TemplateRef } from '@angular/core';
+import { TopBottomLeftRightType } from '@updevs/sdk/types';
+
+@Component({
+    selector: 'upd-popover',
+    templateUrl: './popover.component.html',
+    styleUrls: ['./popover.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class PopoverComponent implements OnInit, OnChanges {
+    @HostBinding('class') classes = '';
+    @HostBinding('attr.data-popper-placement') popperPlacement = '';
+    @HostBinding('role') readonly role = 'tooltip';
+
+    @Input() title?: string;
+    @Input() text?: string;
+    @Input() titleTemplate?: TemplateRef<any>;
+    @Input() template?: TemplateRef<any>;
+    @Input() placement: TopBottomLeftRightType = 'top';
+    @Input() customClasses?: string;
+
+    get isVisible(): boolean {
+        return this._isVisible;
+    }
+
+    private _isVisible = false;
+
+    ngOnInit(): void {
+        this.updateClasses();
+    }
+
+    ngOnChanges(changes: SimpleChanges): void {
+        this.updateClasses();
+    }
+
+    setVisible(isVisible: boolean): void {
+        this._isVisible = isVisible;
+        this.updateClasses();
+    }
+
+    private updateClasses(): void {
+        this.popperPlacement = this.placement;
+        this.classes = [
+            'popover',
+            'bs-popover-auto',
+            !this._isVisible ? 'fade' : '',
+            this._isVisible ? 'show' : '',
+            'upd-popover',
+            `-${this.placement}`,
+            ...(this.customClasses?.split(' ') || [])
+        ].join(' ');
+    }
+}

package/popover/src/popover.directive.spec.ts

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

package/popover/src/popover.directive.ts

@@ -0,0 +1,128 @@
+import {
+    Directive,
+    Input,
+    TemplateRef,
+    ViewContainerRef,
+    Renderer2,
+    ElementRef,
+    Injector,
+    NgZone,
+    ComponentRef,
+    HostListener
+} from '@angular/core';
+import { TopBottomLeftRightType } from '@updevs/sdk/types';
+import { PositioningService, ComputePositionResult, DynamicComponentLoaderService } from '@updevs/sdk/layout';
+
+import { PopoverComponent } from './popover.component';
+
+@Directive({
+    selector: '[updPopover]'
+})
+export class PopoverDirective {
+    @Input('updPopover') text?: string;
+    @Input('updPopoverTitle') title?: string;
+    @Input('updPopoverTitleTemplate') popoverTitleTemplate?: TemplateRef<any>;
+    @Input('updPopoverTemplate') popoverTemplate?: TemplateRef<any>;
+    @Input('updPopoverPlacement') placement: TopBottomLeftRightType = 'top';
+    @Input('updPopoverCustomClasses') customClasses?: string;
+    /**
+     * This makes the popover behave like a tooltip.
+     * It means it'll show/hide depending on whether the mouse is over or not the element.
+     */
+    @Input('updPopoverActAsTooltip') actAsTooltip = false;
+
+    private popoverComponentRef?: ComponentRef<PopoverComponent>;
+
+    constructor(
+        private elementRef: ElementRef,
+        private renderer: Renderer2,
+        private viewContainerRef: ViewContainerRef,
+        private ngZone: NgZone,
+        private injector: Injector,
+        private positioningService: PositioningService,
+        private dynamicComponentLoaderService: DynamicComponentLoaderService
+    ) {
+    }
+
+    @HostListener('mouseenter')
+    onMouseEnter(): void {
+        if (this.actAsTooltip) {
+            this.initPopover();
+        }
+    }
+
+    @HostListener('mouseleave')
+    onMouseLeave(): void {
+        if (this.actAsTooltip) {
+            this.disposePopover();
+        }
+    }
+
+    @HostListener('click')
+    onClick(): void {
+        if (!this.actAsTooltip) {
+            if (this.popoverComponentRef?.instance.isVisible) {
+                this.disposePopover();
+            } else {
+                this.initPopover();
+            }
+        }
+    }
+
+    private initPopover(): void {
+        this.setupPopover();
+        this.popoverComponentRef!.instance.setVisible(true);
+        this.ngZone.runOutsideAngular(() =>
+            this.positioningService
+                .computePosition(this.elementRef, this.popoverComponentRef!.location, { placement: this.placement })
+                .subscribe(resp => this.updatePosition(resp))
+        );
+    }
+
+    private disposePopover(): void {
+        this.viewContainerRef.clear();
+        this.popoverComponentRef!.instance.setVisible(false);
+    }
+
+    private setupPopover(): void {
+        this.viewContainerRef.clear();
+
+        this.popoverComponentRef = this.dynamicComponentLoaderService.load(PopoverComponent, this.viewContainerRef, this.injector);
+        this.popoverComponentRef!.instance.title = this.title;
+        this.popoverComponentRef!.instance.text = this.text;
+        this.popoverComponentRef!.instance.titleTemplate = this.popoverTitleTemplate;
+        this.popoverComponentRef!.instance.template = this.popoverTemplate;
+        this.popoverComponentRef!.instance.placement = this.placement;
+        this.popoverComponentRef!.instance.customClasses = this.customClasses;
+    }
+
+    private updatePosition(result: ComputePositionResult): void {
+        const nativeElement = this.popoverComponentRef!.location.nativeElement;
+        const arrowElement = this.popoverComponentRef!.location.nativeElement.querySelector('.popover-arrow');
+        const popoverBox = nativeElement.getBoundingClientRect();
+        const arrowBox = arrowElement.getBoundingClientRect();
+
+        switch (this.placement) {
+            case 'top':
+                this.renderer.setStyle(nativeElement, 'top', `${result.y - arrowBox.height}px`);
+                this.renderer.setStyle(nativeElement, 'left', `${result.x}px`);
+                this.renderer.setStyle(arrowElement, 'left', `${(popoverBox.width / 2) - (arrowBox.width / 2)}px`);
+                break;
+            case 'bottom':
+                this.renderer.setStyle(nativeElement, 'top', `${result.y + arrowBox.height}px`);
+                this.renderer.setStyle(nativeElement, 'left', `${result.x}px`);
+                this.renderer.setStyle(arrowElement, 'left', `${(popoverBox.width / 2) - (arrowBox.width / 2)}px`);
+                break;
+            case 'left':
+                this.renderer.setStyle(nativeElement, 'top', `${result.y}px`);
+                this.renderer.setStyle(nativeElement, 'left', `${result.x - arrowBox.width}px`);
+                this.renderer.setStyle(arrowElement, 'top', `${(popoverBox.height / 2) - (arrowBox.height / 2)}px`);
+                break;
+            case 'right':
+                this.renderer.setStyle(nativeElement, 'top', `${result.y}px`);
+                this.renderer.setStyle(nativeElement, 'left', `${result.x + arrowBox.width}px`);
+                this.renderer.setStyle(arrowElement, 'top', `${(popoverBox.height / 2) - (arrowBox.height / 2)}px`);
+                break;
+        }
+    }
+}

package/popover/src/public-api.ts

@@ -0,0 +1,3 @@
+export * from './popover.component';
+export * from './popover.directive';
+export * from './upd-popover.module';