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

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

@@ -0,0 +1,34 @@
+import { ModuleWithProviders, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { UpdCoreLayoutModule } from '@updevs/sdk/layout';
+
+import { UpdLayoutConfig } from './models/upd-layout.config';
+import { LayoutConstants } from './tools/layout.constants';
+import { UpdLayoutConfigService } from './services/upd-layout-config.service';
+
+/**
+ * Layout module.
+ */
+@NgModule({
+    imports: [
+        CommonModule,
+        UpdCoreLayoutModule
+    ],
+    providers: [
+        UpdLayoutConfigService
+    ]
+})
+export class UpdLayoutModule {
+    /**
+     * Sets up the layout module with the provided configuration.
+     * @param config Configuration (See: #updsee[p:abstractions, i:UpdCoreLayoutConfig]).
+     */
+    static forRoot(config: UpdLayoutConfig): ModuleWithProviders<UpdLayoutModule> {
+        return {
+            ngModule: UpdLayoutModule,
+            providers: [
+                { provide: LayoutConstants.defaultOptionsInjectionToken, useValue: config }
+            ]
+        };
+    }
+}

package/link/index.ts

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

package/link/ng-package.json

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

package/link/src/index.ts

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

package/link/src/link.component.html

@@ -0,0 +1,3 @@
+<a [attr.href]="href" [attr.target]="target" [ngClass]="classes" (click)="onClick($event)">
+    <ng-content></ng-content>
+</a>

package/link/src/link.component.scss

@@ -0,0 +1,3 @@
+a:hover {
+    cursor: pointer;
+}

package/link/src/link.component.spec.ts

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

package/link/src/link.component.ts

@@ -0,0 +1,48 @@
+import { Component, Output, EventEmitter, SimpleChanges, OnInit, OnChanges, Input, ViewEncapsulation } from '@angular/core';
+
+import { LinkTargetType } from './target.type';
+
+@Component({
+    selector: 'upd-link',
+    templateUrl: './link.component.html',
+    styleUrls: ['./link.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class LinkComponent implements OnInit, OnChanges {
+    @Input() href?: string;
+    @Input() target: LinkTargetType = '_self';
+    @Input() customClasses: string[] = [];
+    @Input() isNavigation = false;
+
+    /**
+     * Emitted when the link is clicked.
+     * **NOTE:** The name of the event can not be 'click'. It would generate a conflict with the HTML event of same name.
+     * That would cause strange behaviors like preventing `isDisabled` from working correctly.
+     */
+    @Output() readonly clicked = new EventEmitter<any>();
+
+    classes: string[] = [];
+
+    ngOnInit(): void {
+        this.updateWrapperClasses();
+    }
+
+    ngOnChanges(changes: SimpleChanges): void {
+        this.updateWrapperClasses();
+    }
+
+    onClick(event: MouseEvent): void {
+        this.clicked.emit(undefined);
+        event.stopPropagation();
+    }
+
+    private updateWrapperClasses(): void {
+        const lClasses: string[] = [];
+
+        if (this.isNavigation) {
+            lClasses.push('nav-link');
+        }
+
+        this.classes = [...lClasses, ...this.customClasses];
+    }
+}

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

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { LinkComponent } from './link.component';
+
+@NgModule({
+    imports: [
+        CommonModule
+    ],
+    declarations: [
+        LinkComponent
+    ],
+    exports: [
+        LinkComponent
+    ]
+})
+export class UpdLinkModule {}

package/list/index.ts

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

package/list/ng-package.json

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

package/list/src/assets/i18n/en.json

@@ -0,0 +1,9 @@
+{
+    "UpDevs": {
+        "List": {
+            "NoRecordsFound": "No records found.",
+            "Item": "item",
+            "Items": "items"
+        }
+    }
+}

package/list/src/assets/i18n/pt.json

@@ -0,0 +1,9 @@
+{
+    "UpDevs": {
+        "List": {
+            "NoRecordsFound": "Nenhum registro encontrado.",
+            "Item": "item",
+            "Items": "itens"
+        }
+    }
+}

package/list/src/index.ts

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

package/list/src/list.component.html

@@ -0,0 +1,67 @@
+<ng-container *transloco="let t; prefix: 'UpDevs.List'">
+    @for (item of listItems; track item) {
+        @if ((item.children?.length || 0) > 0) {
+            <div class="list-group-header sticky-top">{{ item.text }}</div>
+            @for (child of item.children; track child) {
+                <ng-container [ngTemplateOutlet]="listItemTpl" [ngTemplateOutletContext]="{item:child}"></ng-container>
+            }
+        } @else {
+            <ng-container [ngTemplateOutlet]="listItemTpl" [ngTemplateOutletContext]="{item:item}"></ng-container>
+        }
+    } @empty {
+        <div class="list-group-item">
+            <upd-icon tablerIcon="alert-triangle" wrapperClasses="text-yellow"></upd-icon>
+            {{ t('NoRecordsFound') }}
+        </div>
+    }
+
+    @if (shouldDisplayItemsCounter && listItems.length > 0) {
+        <div class="list-items-counter bg-muted text-muted-fg">
+            {{ listItems.length }} {{ t(listItems.length === 1 ? 'Item' : 'Items') }}
+        </div>
+    }
+</ng-container>
+
+<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)">
+        @if (!item.hasLeftBox) {
+            <span>{{ item.text }}</span>
+        } @else {
+            <div class="row">
+                <ng-container [ngTemplateOutlet]="leftBoxTpl" [ngTemplateOutletContext]="{item:item}"></ng-container>
+                <div class="col text-truncate">
+                    @if (!!item.text) {
+                        <div class="text-body d-block">{{ item.text }}</div>
+                    }
+                    @if (!!item.description) {
+                        <div class="text-muted text-truncate mt-n1">{{ item.description }}</div>
+                    }
+                </div>
+            </div>
+        }
+    </div>
+</ng-template>
+
+<ng-template #leftBoxTpl let-item="item">
+    <div class="col-auto">
+        @if (!!item.icon) {
+            <upd-icon [model]="item.icon"></upd-icon>
+        } @else if (item.hasCheckbox) {
+            <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' : '')"-->
+
+        } @else if (item.hasLeftBadge) {
+            <span class="badge bg-{{item.badgeColor}} ms-auto">{{ item.badgeText }}</span>
+        } @else if (!!item.leftBoxImage || !!item.leftBoxText) {
+            <a href="#"> <!-- TODO: change. -->
+                <span class="avatar" style="background-image: url({{item.leftBoxImage}})">{{ item.leftBoxText }}
+                    @if (item.hasBottomRightBadge) {
+                        <span class="badge bg-{{item.badgeColor}} ms-auto">{{ item.badgeText }}</span>
+                    }
+                </span>
+            </a>
+        }
+    </div>
+</ng-template>

package/list/src/list.component.scss

@@ -0,0 +1,22 @@
+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;
+    margin-top: -24px;
+}

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,129 @@
+import {
+    Component,
+    HostBinding,
+    Input,
+    Renderer2,
+    ElementRef,
+    OnInit,
+    RendererStyleFlags2,
+    ViewEncapsulation,
+    Output,
+    EventEmitter,
+    OnChanges,
+    SimpleChanges, inject
+} 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;
+
+    @Output() readonly checkboxChanged = new EventEmitter<ListItem>();
+    @Output() readonly selectedItem = new EventEmitter<ListItem>();
+
+    listItems: ListItemModel[] = [];
+    currentSelection: ListItem[] = [];
+
+    private localBackupItems: ListItem[] = [];
+
+    private readonly renderer = inject(Renderer2);
+    private readonly elementRef = inject(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/list-item.model.ts

@@ -0,0 +1,36 @@
+import { IconModel } from '@updevs/icons';
+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?: IconModel;
+    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 || !!this.icon;
+    }
+    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/{models/list-item.d.ts → src/models/list-item.ts}

@@ -1,10 +1,13 @@
+import { IconModel } from '@updevs/icons';
 import { BgColorStyleType } from '@updevs/sdk/layout';
+
 import { BadgePositionType } from './badge-position.type';
+
 export interface ListItem {
     id?: any;
     text?: string;
     description?: string;
-    icon?: string;
+    icon?: IconModel;
     isChecked?: boolean;
     isSwitch?: boolean;
     hasCheckbox?: boolean;

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 '@jsverse/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/modal/index.ts

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

package/modal/ng-package.json

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

package/modal/src/assets/i18n/en.json

@@ -0,0 +1,17 @@
+{
+    "UpDevs": {
+        "Modal": {
+            "Cancel": "Cancel"
+        },
+        "ModalAlert": {
+            "OkButtonTitle": "Ok",
+            "ConfirmYes": "Yes",
+            "ConfirmNo": "No",
+            "WarningTitle": "Warning",
+            "ErrorTitle": "Error",
+            "InfoTitle": "Information",
+            "SuccessTitle": "Success",
+            "ConfirmationTitle": "Confirm"
+        }
+    }
+}

package/modal/src/assets/i18n/pt.json

@@ -0,0 +1,17 @@
+{
+    "UpDevs": {
+        "Modal": {
+            "Cancel": "Cancelar"
+        },
+        "ModalAlert": {
+            "OkButtonTitle": "Ok",
+            "ConfirmYes": "Sim",
+            "ConfirmNo": "Não",
+            "WarningTitle": "Alerta",
+            "ErrorTitle": "Erro",
+            "InfoTitle": "Informação",
+            "SuccessTitle": "Sucesso",
+            "ConfirmationTitle": "Confirme"
+        }
+    }
+}