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

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

@@ -1,243 +0,0 @@
-import { DOCUMENT, NgComponentOutlet } from '@angular/common';
-import { Component, HostBinding, TemplateRef, inject, Type, ElementRef, Renderer2, viewChild, ComponentRef } from '@angular/core';
-import { TextService, TextModel } from '@updevs/sdk';
-import {
-    BgColorStyleType,
-    Utils as LayoutUtils,
-    LayoutService,
-    ScrollbarService,
-    BaseComponent,
-    Overlay,
-    ButtonModel
-} from '@updevs/sdk/layout';
-import { TopBottomLeftRightType, OptionalType } from '@updevs/sdk/types';
-import { IconModel } from '@updevs/icons';
-
-import { ModalSizeType } from '../../types/modal-size.type';
-import { ModalConfig } from '../../models/modal.config';
-import { ModalConfigModel } from '../../models/modal-config.model';
-import { ModalFooterStyleType } from '../../types/modal-footer-style.type';
-import { ModalRef } from '../../models/modal-ref';
-
-let containerId = 1;
-
-@Component({
-    selector: 'upd-modal-container',
-    templateUrl: './modal-container.component.html',
-    styleUrl: './modal-container.component.scss'
-})
-export class ModalContainerComponent extends BaseComponent implements ModalConfig, ModalRef {
-    @HostBinding('id') id = `modal-${containerId++}`;
-    @HostBinding('class') hostClass = ['modal', 'modal-blur', 'fade'];
-    @HostBinding('role') role = 'dialog';
-    @HostBinding('aria-hidden') ariaHidden = true;
-    @HostBinding('aria-modal') ariaModal = false;
-    @HostBinding('tabindex') tabIndex = -1;
-    @HostBinding('style.display') styleDisplay?: string;
-
-    dialog = viewChild.required('dialog', { read: ElementRef });
-    content = viewChild.required('content', { read: ElementRef });
-    bodyContentOutlet = viewChild<NgComponentOutlet>(NgComponentOutlet);
-    size: ModalSizeType = 'regular';
-    isVerticallyCentered = true;
-    isScrollable = false;
-    showCloseButton = true;
-    showCancelButton = false;
-    isTextCentered = true;
-    shouldDismissOnEsc = false;
-    shouldDismissOnOutsideClick = false;
-    isAlert = false;
-    statusColor?: BgColorStyleType;
-    headerTemplateRef?: TemplateRef<any>;
-    footerTemplateRef?: TemplateRef<any>;
-    bodyTemplateRef?: TemplateRef<any>;
-    bodyContentType?: Type<any>;
-    contentType?: Type<any>;
-    body?: TextModel;
-    title?: TextModel;
-    titleIcon?: IconModel;
-    titleIconPosition?: TopBottomLeftRightType = 'top';
-    footerLayout?: ModalFooterStyleType = 'default';
-    actionButtons: ButtonModel[] = [];
-    overlay!: Overlay;
-    modalContainerRef!: ComponentRef<ModalContainerComponent>;
-    data?: any;
-    afterClose?: (result?: any) => void;
-
-    get classes(): string[] {
-        return [
-            'modal-dialog',
-            this.isVerticallyCentered ? 'modal-dialog-centered' : '',
-            this.isScrollable ? 'modal-dialog-scrollable' : '',
-            this.sizeClass
-        ];
-    }
-    get titleText(): string {
-        return this.textService.getText(this.title);
-    }
-    get bodyText(): string {
-        return this.textService.getText(this.body);
-    }
-    get statusColorClass(): string {
-        return `bg-${this.statusColor}`;
-    }
-    get sizeClass(): string {
-        let cls = '';
-
-        switch (this.size) {
-            case 'small':
-                cls = 'modal-sm';
-                break;
-            case 'large':
-                cls = 'modal-lg';
-                break;
-            case 'extra-large':
-                cls = 'modal-xl';
-                break;
-        }
-
-        return cls;
-    }
-
-    private readonly openClass = 'modal-open';
-    private readonly textService = inject(TextService);
-    private readonly elementRef = inject(ElementRef);
-    private readonly layoutService = inject(LayoutService);
-    private readonly scrollbarService = inject(ScrollbarService);
-    private readonly renderer = inject(Renderer2);
-    private readonly document = inject(DOCUMENT);
-    private get element(): any {
-        return this.elementRef.nativeElement;
-    }
-
-    prepareToShow(config?: ModalConfig): void {
-        this.setupConfig(config);
-        this.scrollbarService.hide();
-        this.layoutService.addBodyClasses(this.openClass);
-        this.adjustDialog();
-        this.setupActionButtons();
-    }
-
-    show(): void {
-        this.setupListeners();
-
-        this.styleDisplay = 'block';
-        this.ariaHidden = false;
-        this.ariaModal = true;
-        this.element.scrollTop = 0;
-        this.dialog().nativeElement.scrollTop = 0;
-
-        LayoutUtils.reflow(this.element);
-
-        const transitionSub = LayoutUtils.executeAfterTransition(this.element).subscribe(() => {
-            this.element.classList.add('show');
-            this.content().nativeElement.focus();
-        });
-
-        this.addSubscriptions(transitionSub);
-    }
-
-    close(result?: any): void {
-        const transitionSub = LayoutUtils.executeAfterTransition(this.element).subscribe(() => {
-            this.styleDisplay = undefined;
-            this.ariaHidden = true;
-            this.ariaModal = false;
-
-            if (!!this.afterClose) {
-                this.afterClose(result);
-            }
-
-            this.overlay.hide();
-            this.layoutService.removeBodyClasses(this.openClass);
-            this.modalContainerRef.destroy();
-        });
-
-        this.element.classList.remove('show');
-        this.addSubscriptions(transitionSub);
-    }
-
-    buttonClick(event: MouseEvent, btn: ButtonModel): void {
-        if (!!btn.clickFunction) {
-            btn.clickFunction({ event, data: btn });
-        }
-    }
-
-    getBodyInstance<T>(): OptionalType<T> {
-        return <T> this.bodyContentOutlet()?.['_componentRef'].instance;
-    }
-
-    private adjustDialog(): void {
-        const isModalOverflowing = this.element.scrollHeight > this.document.documentElement.clientHeight;
-        const scrollbarWidth = this.scrollbarService.getWidth();
-        const isBodyOverflowing = scrollbarWidth > 0;
-
-        if (isBodyOverflowing && !isModalOverflowing) {
-            this.renderer.setStyle(this.element, 'paddingRight', `${scrollbarWidth}px`);
-        }
-
-        if (!isBodyOverflowing && isModalOverflowing) {
-            this.renderer.setStyle(this.element, 'paddingLeft', `${scrollbarWidth}px`);
-        }
-    }
-
-    private setupConfig(config?: ModalConfig): void {
-        if (!config) {
-            return;
-        }
-
-        const configModel = new ModalConfigModel(config);
-        this.size = configModel.size;
-        this.isVerticallyCentered = configModel.isVerticallyCentered;
-        this.isScrollable = configModel.isScrollable;
-        this.showCancelButton = configModel.showCancelButton;
-        this.showCloseButton = configModel.showCloseButton;
-        this.shouldDismissOnEsc = configModel.shouldDismissOnEsc;
-        this.shouldDismissOnOutsideClick = configModel.shouldDismissOnOutsideClick;
-        this.isAlert = configModel.isAlert;
-        this.isTextCentered = configModel.isTextCentered;
-        this.statusColor = configModel.statusColor;
-        this.headerTemplateRef = configModel.headerTemplateRef;
-        this.footerTemplateRef = configModel.footerTemplateRef;
-        this.bodyTemplateRef = configModel.bodyTemplateRef;
-        this.bodyContentType = configModel.bodyContentType;
-        this.body = configModel.body;
-        this.title = configModel.title;
-        this.titleIcon = configModel.titleIcon;
-        this.titleIconPosition = configModel.titleIconPosition;
-        this.footerLayout = configModel.footerLayout;
-        this.actionButtons = configModel.actionButtons;
-        this.data = configModel.data;
-    }
-
-    private setupActionButtons(): void {
-        this.actionButtons.forEach(btn => {
-            const fnBackup = btn.clickFunction;
-            btn.clickFunction = event => {
-                event.data = this;
-                fnBackup!(event);
-            };
-        });
-    }
-
-    private setupListeners(): void {
-        if (this.shouldDismissOnOutsideClick) {
-            this.element.addEventListener('click', this.clickCallback);
-        }
-
-        if (this.shouldDismissOnEsc) {
-            this.element.addEventListener('keydown', this.escCallback);
-        }
-    }
-
-    private clickCallback = (evt: Event) => {
-        if (evt.target === this.element) {
-            this.close();
-        }
-    };
-
-    private escCallback = (evt: KeyboardEvent) => {
-        if (evt.key === 'Escape') {
-            this.close();
-        }
-    };
-}

package/modal/src/models/base.modal.ts

@@ -1,9 +0,0 @@
-import { input, Directive } from '@angular/core';
-
-import { ModalRef } from './modal-ref';
-
-@Directive()
-export abstract class BaseModal<TData = any> {
-    modalRef = input.required<ModalRef>();
-    data = input.required<TData>();
-}

package/modal/src/models/modal-config.model.ts

@@ -1,39 +0,0 @@
-import { TemplateRef, Type } from '@angular/core';
-import { BgColorStyleType, ButtonModel } from '@updevs/sdk/layout';
-import { TextModel } from '@updevs/sdk';
-import { TopBottomLeftRightType } from '@updevs/sdk/types';
-import { IconModel } from '@updevs/icons';
-
-import { ModalConfig } from './modal.config';
-import { ModalSizeType } from '../types/modal-size.type';
-import { ModalFooterStyleType } from '../types/modal-footer-style.type';
-
-export class ModalConfigModel implements ModalConfig {
-    size: ModalSizeType = 'regular';
-    isVerticallyCentered = true;
-    isScrollable = false;
-    showCancelButton = false;
-    showCloseButton = true;
-    isTextCentered = true;
-    shouldDismissOnEsc = false;
-    shouldDismissOnOutsideClick = false;
-    isAlert = false;
-    statusColor?: BgColorStyleType;
-    headerTemplateRef?: TemplateRef<any>;
-    footerTemplateRef?: TemplateRef<any>;
-    bodyTemplateRef?: TemplateRef<any>;
-    bodyContentType?: Type<any>;
-    body?: TextModel;
-    title?: TextModel;
-    titleIcon?: IconModel;
-    titleIconPosition?: TopBottomLeftRightType = 'top';
-    footerLayout?: ModalFooterStyleType = 'default';
-    actionButtons: ButtonModel[] = [];
-    data?: any;
-
-    constructor(init?: Partial<ModalConfig>) {
-        if (!!init) {
-            Object.assign(this, init);
-        }
-    }
-}

package/modal/src/models/modal-ref.ts

@@ -1,9 +0,0 @@
-import { OptionalType } from '@updevs/sdk/types/index';
-
-export interface ModalRef {
-    afterClose?: (result?: any) => void;
-
-    close(result?: any): void;
-
-    getBodyInstance<T>(): OptionalType<T>;
-}

package/modal/src/models/modal.config.ts

@@ -1,32 +0,0 @@
-import { TemplateRef, Type } from '@angular/core';
-import { TextModel } from '@updevs/sdk';
-import { BgColorStyleType, ButtonModel } from '@updevs/sdk/layout';
-import { TopBottomLeftRightType } from '@updevs/sdk/types';
-import { IconModel } from '@updevs/icons';
-
-import { ModalSizeType } from '../types/modal-size.type';
-import { ModalFooterStyleType } from '../types/modal-footer-style.type';
-
-export interface ModalConfig {
-    size?: ModalSizeType;
-    isVerticallyCentered?: boolean;
-    isScrollable?: boolean;
-    showCancelButton?: boolean;
-    showCloseButton?: boolean;
-    shouldDismissOnEsc?: boolean;
-    shouldDismissOnOutsideClick?: boolean;
-    isAlert?: boolean;
-    isTextCentered?: boolean;
-    statusColor?: BgColorStyleType;
-    headerTemplateRef?: TemplateRef<any>;
-    footerTemplateRef?: TemplateRef<any>;
-    bodyTemplateRef?: TemplateRef<any>;
-    bodyContentType?: Type<any>;
-    body?: TextModel;
-    title?: TextModel;
-    titleIcon?: IconModel;
-    titleIconPosition?: TopBottomLeftRightType;
-    footerLayout?: ModalFooterStyleType;
-    actionButtons?: ButtonModel[];
-    data?: any;
-}

package/modal/src/services/modal-alert.service.spec.ts

@@ -1,16 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { ModalAlertService } from './modal-alert.service';
-
-describe('ModalAlertService', () => {
-    let service: ModalAlertService;
-
-    beforeEach(() => {
-        TestBed.configureTestingModule({});
-        service = TestBed.inject(ModalAlertService);
-    });
-
-    it('should be created', () => {
-        expect(service).toBeTruthy();
-    });
-});

package/modal/src/services/modal-alert.service.ts

@@ -1,167 +0,0 @@
-import { Injectable, inject, signal } from '@angular/core';
-import { TextModel } from '@updevs/sdk';
-import { BgColorStyleType, ButtonModel } from '@updevs/sdk/layout';
-import { TopBottomLeftRightType } from '@updevs/sdk/types';
-import { IconModel, TablerIconsType } from '@updevs/icons';
-import { Observable, Subject } from 'rxjs';
-
-import { ModalService } from './modal.service';
-import { ModalSizeType } from '../types/modal-size.type';
-import { ModalFooterStyleType } from '../types/modal-footer-style.type';
-import { ModalRef } from '../models/modal-ref';
-
-@Injectable()
-export class ModalAlertService {
-    private readonly modalService = inject(ModalService);
-    private readonly defaultIconModel: IconModel = { tablerIconWeight: 'medium-light', tablerIconSize: 48 };
-
-    showWarning(message: TextModel, title?: TextModel, actionButtons: ButtonModel[] = []): ModalRef {
-        return this.open(
-            message,
-            title || { text: 'UpDevs.ModalAlert.WarningTitle', isTranslated: false },
-            'alert-triangle',
-            'text-warning',
-            'warning',
-            actionButtons
-        );
-    }
-
-    showError(message: TextModel, title?: TextModel, actionButtons: ButtonModel[] = []): ModalRef {
-        return this.open(
-            message,
-            title || { text: 'UpDevs.ModalAlert.ErrorTitle', isTranslated: false },
-            'exclamation-circle',
-            'text-danger',
-            'danger',
-            actionButtons
-        );
-    }
-
-    showInfo(message: TextModel, title?: TextModel, actionButtons: ButtonModel[] = []): ModalRef {
-        return this.open(
-            message,
-            title || { text: 'UpDevs.ModalAlert.InfoTitle', isTranslated: false },
-            'info-circle',
-            'text-info',
-            'info',
-            actionButtons
-        );
-    }
-
-    showSuccess(message: TextModel, title?: TextModel, actionButtons: ButtonModel[] = []): ModalRef {
-        return this.open(
-            message,
-            title || { text: 'UpDevs.ModalAlert.SuccessTitle', isTranslated: false },
-            'circle-check',
-            'text-success',
-            'success',
-            actionButtons
-        );
-    }
-
-    showConfirm(message: TextModel, title?: TextModel, actionButtons: ButtonModel[] = []): Observable<boolean> {
-        // eslint-disable-next-line prefer-const
-        let modalRef: ModalRef;
-        const statusColor: BgColorStyleType = 'indigo';
-        const result = new Subject<boolean>();
-
-        if (actionButtons.length < 1) {
-            actionButtons = [
-                new ButtonModel({
-                    text: signal({ text: 'UpDevs.ModalAlert.ConfirmNo', isTranslated: false }),
-                    isOutline: signal(true),
-                    clickFunction: () => {
-                        result.next(false);
-                        modalRef.close();
-                    }
-                }),
-                new ButtonModel({
-                    text: signal({ text: 'UpDevs.ModalAlert.ConfirmYes', isTranslated: false }),
-                    colorStyle: signal(statusColor),
-                    clickFunction: () => {
-                        result.next(true);
-                        modalRef.close();
-                    }
-                })
-            ];
-        }
-
-        modalRef = this.open(
-            message,
-            title || { text: 'UpDevs.ModalAlert.ConfirmationTitle', isTranslated: false },
-            'checklist',
-            'text-indigo',
-            statusColor,
-            actionButtons,
-            'full-width'
-        );
-
-        return result;
-    }
-
-    showCustom(
-        message: TextModel,
-        title: TextModel,
-        titleIcon: IconModel,
-        titleIconPosition: TopBottomLeftRightType,
-        statusColor: BgColorStyleType,
-        actionButtons: ButtonModel[] = [],
-        size: ModalSizeType = 'small',
-        footerLayout: ModalFooterStyleType = 'default'
-    ): ModalRef {
-        return this.modalService.open(undefined, {
-            isAlert: true,
-            title,
-            titleIcon,
-            titleIconPosition,
-            size,
-            body: message,
-            statusColor,
-            footerLayout,
-            actionButtons
-        });
-    }
-
-    private open(
-        message: TextModel,
-        title: TextModel,
-        titleIconType: TablerIconsType,
-        titleIconColorClass: string,
-        statusColor: BgColorStyleType,
-        actionButtons: ButtonModel[],
-        footerLayout: ModalFooterStyleType = 'default'
-    ): ModalRef {
-        // eslint-disable-next-line prefer-const
-        let modalRef: ModalRef;
-        const titleIcon: IconModel = {
-            ...this.defaultIconModel,
-            tablerIcon: titleIconType,
-            colorClass: titleIconColorClass
-        };
-
-        if (actionButtons.length < 1) {
-            actionButtons.push(
-                new ButtonModel({
-                    text: signal({ text: 'UpDevs.ModalAlert.OkButtonTitle', isTranslated: false }),
-                    colorStyle: signal(statusColor),
-                    clickFunction: () => modalRef.close()
-                })
-            );
-        }
-
-        modalRef = this.modalService.open(undefined, {
-            isAlert: true,
-            title,
-            titleIcon,
-            titleIconPosition: 'top',
-            size: 'small',
-            body: message,
-            statusColor,
-            footerLayout,
-            actionButtons,
-            showCloseButton: false
-        });
-
-        return modalRef;
-    }
-}

package/modal/src/services/modal.service.spec.ts

@@ -1,16 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { ModalService } from './modal.service';
-
-describe('ModalService', () => {
-  let service: ModalService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(ModalService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});

package/modal/src/services/modal.service.ts

@@ -1,38 +0,0 @@
-import { Injectable, inject, ViewContainerRef, ApplicationRef } from '@angular/core';
-import { DynamicComponentLoaderService, OverlayService } from '@updevs/sdk/layout';
-import { ComponentType } from '@updevs/sdk/types';
-
-import { ModalContainerComponent } from '../components/modal-container/modal-container.component';
-import { ModalConfig } from '../models/modal.config';
-import { ModalRef } from '../models/modal-ref';
-
-@Injectable()
-export class ModalService {
-    private readonly dynamicComponentLoaderService = inject(DynamicComponentLoaderService);
-    private readonly overlayService = inject(OverlayService);
-    private readonly applicationRef = inject(ApplicationRef);
-
-    open<T>(
-        contentType?: ComponentType<T>,
-        config?: ModalConfig,
-        rootElement?: Element,
-        shouldDisposeOnClick = false,
-        shouldDisposeOnEsc = false
-    ): ModalRef {
-        const viewContainerRef = this.applicationRef.components[0].injector.get(ViewContainerRef);
-        const modalContainerRef = this.dynamicComponentLoaderService.load(ModalContainerComponent, viewContainerRef);
-        const overlay = this.overlayService.create({ rootElement, customClasses: ['modal-backdrop'] });
-
-        modalContainerRef.instance.prepareToShow(config);
-
-        modalContainerRef.instance.modalContainerRef = modalContainerRef;
-        modalContainerRef.instance.overlay = overlay;
-        modalContainerRef.instance.contentType = contentType;
-        modalContainerRef.instance.shouldDismissOnOutsideClick = config?.shouldDismissOnOutsideClick || shouldDisposeOnClick;
-        modalContainerRef.instance.shouldDismissOnEsc = config?.shouldDismissOnEsc || shouldDisposeOnEsc;
-
-        overlay.show().subscribe(() => modalContainerRef.instance.show());
-
-        return modalContainerRef.instance;
-    }
-}

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

@@ -1,74 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { UpdCoreLayoutModule } from '@updevs/sdk/layout';
-import { UpdIconsModule } from '@updevs/icons';
-import { UpdMessagesModule, MessagesService, MessageTypeEnum } from '@updevs/sdk/messages';
-import { OptionalType } from '@updevs/sdk/types';
-import { UpdButtonModule } from '@updevs/components/button';
-import { TranslocoService, TranslocoDirective } from '@jsverse/transloco';
-
-import * as en from './assets/i18n/en.json';
-import * as pt from './assets/i18n/pt.json';
-import { ModalService } from './services/modal.service';
-import { ModalContainerComponent } from './components/modal-container/modal-container.component';
-import { ModalAlertService } from './services/modal-alert.service';
-import { ModalRef } from './models/modal-ref';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        UpdCoreLayoutModule,
-        UpdButtonModule,
-        UpdIconsModule,
-        UpdMessagesModule,
-        TranslocoDirective
-    ],
-    declarations: [
-        ModalContainerComponent
-    ],
-    providers: [
-        ModalService,
-        ModalAlertService
-    ]
-})
-export class UpdModalModule {
-    constructor(translocoService: TranslocoService, modalAlertService: ModalAlertService, messagesService: MessagesService) {
-        translocoService.setTranslation(en, 'en');
-        translocoService.setTranslation(pt, 'pt');
-        this.setupMessagesService(modalAlertService, messagesService);
-    }
-
-    private setupMessagesService(modalAlertService: ModalAlertService, messagesService: MessagesService): void {
-        messagesService.onNewMessage.subscribe(msg => {
-            if (msg.isModal) {
-                if (!!msg.onShown) {
-                    msg.onShown();
-                }
-
-                let modalRef: OptionalType<ModalRef>;
-
-                switch (msg.type) {
-                    case MessageTypeEnum.Warning:
-                        modalRef = modalAlertService.showWarning(msg.message, msg.title);
-                        break;
-                    case MessageTypeEnum.Info:
-                        modalRef = modalAlertService.showInfo(msg.message, msg.title);
-                        break;
-                    case MessageTypeEnum.Error:
-                        modalRef = modalAlertService.showError(msg.message, msg.title);
-                        break;
-                    case MessageTypeEnum.Success:
-                        modalRef = modalAlertService.showSuccess(msg.message, msg.title);
-                        break;
-                    case MessageTypeEnum.Confirm:
-                        modalAlertService.showConfirm(msg.message, msg.title);
-                        break;
-                }
-
-                if (!!modalRef && !!msg.onHidden) {
-                    modalRef.afterClose = msg.onHidden;
-                }
-            }
-        });
-    }
-}

package/ng-package.json

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

package/paginator/index.ts

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

package/paginator/ng-package.json

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