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

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

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

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

package/link/ng-package.json

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

package/link/src/link.component.html

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

package/link/src/link.component.scss

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

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

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

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

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

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

package/list/ng-package.json

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

package/list/src/list.component.html

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

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

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

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

@@ -1,36 +0,0 @@
-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/src/models/list-item.ts

@@ -1,22 +0,0 @@
-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?: IconModel;
-    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/upd-list.module.ts

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

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

package/modal/ng-package.json

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

package/modal/src/components/modal-container/modal-container.component.html

@@ -1,116 +0,0 @@
-<ng-container *transloco="let t; prefix: 'UpDevs.Modal'">
-    <div [ngClass]="classes" #dialog>
-        <div class="modal-content" tabindex="-1" #content>
-            @if (!!contentType) {
-                <ng-container [ngComponentOutlet]="contentType" [ngComponentOutletInputs]="{modalRef: this, data: data}"></ng-container>
-            } @else {
-                @if (!isAlert && (!!titleText || !!headerTemplateRef)) {
-                    <div class="modal-header">
-                        @if (!!headerTemplateRef) {
-                            <ng-container [ngTemplateOutlet]="headerTemplateRef" [ngTemplateOutletContext]="{modalRef: this, data: data}">
-                            </ng-container>
-                        } @else {
-                            <h5 class="modal-title">{{ titleText }}</h5>
-                            @if (showCloseButton) {
-                                <ng-container [ngTemplateOutlet]="closeBtnTpl"></ng-container>
-                            }
-                        }
-                    </div>
-                } @else if (showCloseButton) {
-                    <ng-container [ngTemplateOutlet]="closeBtnTpl"></ng-container>
-                }
-
-                <div class="modal-body py-4" [class.text-center]="isTextCentered || isAlert">
-                    @if (isAlert && !!titleText) {
-                        <div class="d-flex justify-content-center align-content-start"
-                            [class.flex-row]="titleIconPosition === 'left' || titleIconPosition === 'right'"
-                            [class.flex-column]="titleIconPosition === 'top' || titleIconPosition === 'bottom'">
-                            @if (!!titleIcon && (titleIconPosition === 'top' || titleIconPosition === 'left')) {
-                                <upd-icon [model]="titleIcon" [class.me-2]="titleIconPosition === 'left'"
-                                    [class.mb-2]="titleIconPosition === 'top'"></upd-icon>
-                            }
-
-                            <span class="align-self-center fs-3 fw-bold" [class.mb-3]="!!titleIcon && titleIconPosition === 'top'">
-                                {{ titleText }}
-                            </span>
-
-                            @if (!!titleIcon && (titleIconPosition === 'bottom' || titleIconPosition === 'right')) {
-                                <upd-icon [model]="titleIcon" [class.ms-2]="titleIconPosition === 'right'"
-                                    [class.mb-2]="titleIconPosition === 'bottom'"></upd-icon>
-                            }
-                        </div>
-                    }
-
-                    @if (!!bodyTemplateRef) {
-                        <ng-container [ngTemplateOutlet]="bodyTemplateRef!" [ngTemplateOutletContext]="{modalRef: this, data: data}">
-                        </ng-container>
-                    } @else if (!!bodyContentType) {
-                        <ng-container [ngComponentOutlet]="bodyContentType" [ngComponentOutletInputs]="{modalRef: this, data: data}">
-                        </ng-container>
-                    } @else {
-                        <div [innerHTML]="bodyText" [class.text-secondary]="isAlert"></div>
-                    }
-                </div>
-
-                @if (!!statusColor) {
-                    <div class="modal-status" [style.position]="'relative'" [ngClass]="statusColorClass"></div>
-                }
-
-                @if (showCancelButton || actionButtons.length > 0 || !!footerTemplateRef) {
-                    <div class="modal-footer">
-                        @if (!!footerTemplateRef) {
-                            <ng-container [ngTemplateOutlet]="footerTemplateRef" [ngTemplateOutletContext]="{modalRef: this, data: data}">
-                            </ng-container>
-                        } @else {
-                            @switch (footerLayout) {
-                                @case ('full-width') {
-                                    <div class="w-100">
-                                        <div class="row">
-                                            @if (showCancelButton) {
-                                                <div class="col">
-                                                    <upd-button class="w-100" [isNavigationLink]="true" (clicked)="close()">
-                                                        {{ t('Cancel') }}
-                                                    </upd-button>
-                                                </div>
-                                            }
-
-                                            @for (btn of actionButtons; track btn) {
-                                                <div class="col">
-                                                    <upd-button class="w-100" [model]="btn"></upd-button>
-                                                </div>
-                                            }
-                                        </div>
-                                    </div>
-                                }
-                                @case ('centered') {
-                                    <div class="d-flex justify-content-center w-100">
-                                        <ng-container [ngTemplateOutlet]="buttonsTpl"></ng-container>
-                                    </div>
-                                }
-                                @default {
-                                    <ng-container [ngTemplateOutlet]="buttonsTpl"></ng-container>
-                                }
-                            }
-                        }
-                    </div>
-                }
-            }
-        </div>
-    </div>
-
-    <ng-template #closeBtnTpl>
-        <upd-button (clicked)="close()" [shouldIgnoreBtnClass]="true" customClasses="btn-close"></upd-button>
-    </ng-template>
-
-    <ng-template #buttonsTpl>
-        @if (showCancelButton) {
-            <upd-button colorStyle="secondary" [isLink]="true" (clicked)="close()">
-                {{ t('Cancel') }}
-            </upd-button>
-        }
-
-        @for (btn of actionButtons; track btn.id) {
-            <upd-button [model]="btn" (clicked)="buttonClick($event, btn)"></upd-button>
-        }
-    </ng-template>
-</ng-container>

package/modal/src/components/modal-container/modal-container.component.scss

@@ -1 +0,0 @@
-

package/modal/src/components/modal-container/modal-container.component.spec.ts

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