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

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

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

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,22 @@
+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();
+    });
+});

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

@@ -0,0 +1,243 @@
+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/index.ts

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

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

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

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

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

@@ -0,0 +1,32 @@
+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/models/public-api.ts

@@ -0,0 +1,3 @@
+export * from './base.modal';
+export * from './modal.config';
+export * from './modal-ref';

package/modal/src/public-api.ts

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

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

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

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