s4y-ui 5.1.2 → 5.2.2

package/fesm2022/s4y-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { ContentChild, Component, signal, computed, Injectable, inject, input, HostBinding, Input, ChangeDetectionStrategy, NgModule, booleanAttribute, forwardRef, HostListener, Directive, EventEmitter, Output, model, output, ViewEncapsulation, effect, Inject, TemplateRef, ViewChild, ContentChildren, ElementRef, ViewContainerRef, viewChild, Renderer2, DestroyRef, contentChild, InjectionToken, Injector, afterNextRender } from '@angular/core';
+import { ContentChild, Component, signal, computed, Injectable, inject, input, HostBinding, Input, ChangeDetectionStrategy, NgModule, booleanAttribute, forwardRef, HostListener, Directive, EventEmitter, Output, model, output, ViewEncapsulation, effect, Inject, TemplateRef, ViewChild, ContentChildren, ElementRef, ViewContainerRef, viewChild, Renderer2, DestroyRef, contentChild, InjectionToken, Injector, afterNextRender, SecurityContext } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, AsyncPipe, JsonPipe, NgClass, NgTemplateOutlet, DOCUMENT, NgIf, NgStyle } from '@angular/common';
 import * as i1$1 from '@angular/platform-browser';
@@ -7,7 +7,7 @@ import { DomSanitizer } from '@angular/platform-browser';
 import * as i1$2 from '@angular/router';
 import { Router, RouterModule, GuardsCheckEnd } from '@angular/router';
 import { catchError, map, filter } from 'rxjs/operators';
-import { defer, from, throwError, BehaviorSubject, map as map$1, Subject, takeUntil, Subscription, filter as filter$1, fromEvent, isObservable, firstValueFrom, ReplaySubject, take } from 'rxjs';
+import { defer, from, throwError, BehaviorSubject, map as map$1, Subject, takeUntil, Subscription, filter as filter$1, fromEvent, isObservable, firstValueFrom, ReplaySubject, take, finalize, catchError as catchError$1, of } from 'rxjs';
 import * as i1$3 from '@angular/cdk/scrolling';
 import { CdkScrollableModule, CdkScrollable } from '@angular/cdk/scrolling';
 import * as i2 from '@angular/forms';
@@ -4590,6 +4590,178 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                     }, template: "\r\n@if (!isEditing()) {\r\n  <p (keydown)=\"onKeydown($event)\">\r\n    {{ value() }}\r\n  </p>\r\n\r\n  <ng-content select=\"[icon]\"></ng-content>\r\n} @else {\r\n  <input\r\n    type=\"text\"\r\n    [value]=\"value()\"\r\n    (blur)=\"stopEdit()\"\r\n    (keydown.enter)=\"stopEdit()\"\r\n    (keydown.escape)=\"stopEdit(false)\"\r\n    (input)=\"setValue($event)\"\r\n    autofocus\r\n    #editInput\r\n  />\r\n}\r\n\r\n\r\n", styles: [":host{background-color:#fff;font-size:1.2rem;border-radius:var(--radius);width:fit-content;padding:.4rem .8rem;display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-shrink:0;border:1px solid transparent}:host(.size-xs){font-size:1rem;padding:.2rem .4rem;gap:.3rem}:host(.size-sm){font-size:1.2rem;padding:.25rem .55rem;gap:.4rem}:host(.size-md){font-size:1.4rem;padding:.3rem .7rem;gap:.5rem}:host(.size-lg){font-size:1.6rem;padding:.4rem .9rem;gap:.6rem}:host(.size-xl){font-size:1.8rem;padding:.5rem 1.1rem;gap:.7rem}:host(.tag-primary){background:var(--primary-color);color:#fff}:host(.tag-secondary){background:var(--secondary-color);color:#fff}:host(.tag-success){background:var(--success-color);color:#fff}:host(.tag-error){background:var(--danger-color);color:#fff}:host(.tag-warning){background:var(--warning-color);color:#fff}:host(.tag-info){background:var(--info-color);color:#fff}:host(.tag-neutral){background-color:var(--gray-500);border:1px solid var(--gray-500);color:#fff}:host(.tag-finished){color:#fff;background:var(--success-color)}:host(.tag-primary.outlined){border:1px solid var(--primary-color);color:var(--primary-color);background-color:transparent}:host(.tag-success.outlined){color:var(--success-color);background-color:transparent;border:1px solid var(--success-color)}:host(.tag-secondary.outlined){border:1px solid var(--secondary-color);color:var(--secondary-color);background-color:transparent}:host(.tag-neutral.outlined){background-color:transparent;border:1px solid var(--gray-500);color:var(--gray-500)}:host(.tag-error.outlined){border:1px solid var(--danger-color);color:var(--danger-color);background-color:transparent}:host(.tag-finished.outlined){border:1px solid var(--success-color);color:var(--success-color);background-color:transparent}:host(.tag-info.outlined){border:1px solid var(--info-color);color:var(--info-color);background-color:transparent}:host(.tag-warning.outlined){background-color:transparent;border:1px solid var(--warning-color);color:var(--warning-color)}input{background-color:transparent;width:100%}\n"] }]
         }], ctorParameters: () => [] });
 
+class ConfirmationComponent {
+    sanitizer = inject(DomSanitizer);
+    props;
+    onCancelClick;
+    onConfirmClick;
+    confirmLoading = false;
+    cancelLoading = false;
+    loading = false;
+    get isTemplate() {
+        return this.props?.content instanceof TemplateRef;
+    }
+    // Verifica se é HTML
+    get isHtml() {
+        return !this.isTemplate && this.props?.contentType === 'html';
+    }
+    // Verifica se é texto simples
+    get isText() {
+        return !this.isTemplate && this.props?.contentType !== 'html';
+    }
+    // Retorna o template se for TemplateRef
+    get template() {
+        return this.isTemplate
+            ? this.props.content
+            : undefined;
+    }
+    // Retorna HTML sanitizado se contentType for 'html'
+    get safeHtml() {
+        if (!this.isHtml || typeof this.props?.content !== 'string')
+            return undefined;
+        return (this.sanitizer.sanitize(SecurityContext.HTML, this.props.content) || '');
+    }
+    // Retorna texto simples
+    get textContent() {
+        return this.isText && typeof this.props?.content === 'string'
+            ? this.props.content
+            : undefined;
+    }
+    async handleCancel() {
+        if (this.onCancelClick) {
+            this.cancelLoading = true;
+            this.loading = true;
+            await this.onCancelClick();
+            this.cancelLoading = false;
+            this.loading = false;
+        }
+    }
+    async handleConfirm() {
+        if (this.onConfirmClick) {
+            this.confirmLoading = true;
+            this.loading = true;
+            await this.onConfirmClick();
+            this.confirmLoading = false;
+            this.loading = false;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ConfirmationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ConfirmationComponent, isStandalone: true, selector: "s4y-confirmation", ngImport: i0, template: "@let model = props;\r\n@let cancelModel = model?.cancelProps;\r\n@let confirmationModel = model?.confirmationProps;\r\n\r\n@if (model) {\r\n  <div class=\"s4y-confirmation-icon\">\r\n    @if (model.iconUri) {\r\n      <s4y-svg [src]=\"model.iconUri\" />\r\n    } @else {\r\n      <svg\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 24 24\"\r\n        fill=\"currentColor\"\r\n      >\r\n        <path\r\n          d=\"M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 15H13V17H11V15ZM11 7H13V13H11V7Z\"\r\n        ></path>\r\n      </svg>\r\n    }\r\n  </div>\r\n\r\n\r\n  <div class=\"s4y-confirmation-content flex\">\r\n    <p class=\"medium-text-bold s4y-confirmation-title\">\r\n      {{ model.title }}\r\n    </p>\r\n\r\n    @if (model.content) {\r\n      <div class=\"s4y-confirmation-description\">\r\n        @if (isTemplate) {\r\n          <ng-container *ngTemplateOutlet=\"template!\"></ng-container>\r\n        } @else if (isHtml) {\r\n          <div class=\"small-text-regular\" [innerHTML]=\"safeHtml\"></div>\r\n        } @else {\r\n          <p class=\"small-text-regular\">{{ textContent }}</p>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n\r\n  <div class=\"s4y-confirmation-buttons\">\r\n    <button\r\n      type=\"button\"\r\n      s4yButton\r\n      [outlined]=\"true\"\r\n      [variant]=\"'danger'\"\r\n      [fullWidth]=\"true\"\r\n      [disabled]=\"cancelLoading || loading\"\r\n      [loading]=\"cancelLoading\"\r\n      (click)=\"handleCancel()\"\r\n    >\r\n      {{ cancelModel?.text ?? \"Cancelar\" }}\r\n    </button>\r\n    <button\r\n      type=\"button\"\r\n      s4yButton\r\n      [outlined]=\"false\"\r\n      [variant]=\"'danger'\"\r\n      [fullWidth]=\"true\"\r\n      [disabled]=\"confirmLoading || loading\"\r\n      [loading]=\"confirmLoading\"\r\n      (click)=\"handleConfirm()\"\r\n    >\r\n      {{ confirmationModel?.text ?? \"Confirmar\" }}\r\n    </button>\r\n  </div>\r\n}\r\n", styles: [":host{display:block;width:100%}:host .s4y-confirmation-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}:host .s4y-confirmation-content{gap:.4rem;flex-direction:column;text-align:center;padding:1rem 0;width:100%;overflow-wrap:break-word;word-break:break-word}:host .s4y-confirmation-title{color:var(--primary-color)}:host .s4y-confirmation-description{font-weight:400;overflow-wrap:break-word;word-break:break-word}:host .s4y-confirmation-description strong,:host .s4y-confirmation-description b{font-weight:600;color:var(--primary-color)}:host .s4y-confirmation-description em,:host .s4y-confirmation-description i{font-style:italic}:host .s4y-confirmation-description a{color:var(--primary-color);text-decoration:underline}:host .s4y-confirmation-description p{margin:0}:host .s4y-confirmation-description p+p{margin-top:.8rem}:host .s4y-confirmation-description ul,:host .s4y-confirmation-description ol{margin:.8rem 0;padding-left:2rem}:host s4y-svg,:host svg{width:4rem;color:var(--warning-color);flex-shrink:0}:host .s4y-confirmation-buttons{display:flex;gap:1.4rem;align-items:center;margin-top:2.8rem;width:100%;flex-shrink:0;flex-wrap:wrap}:host .s4y-confirmation-buttons button{flex:1 1 calc(50% - .7rem)}@media (max-width: 30rem){:host .s4y-confirmation-buttons{flex:1 1 100%}}\n"], dependencies: [{ kind: "component", type: SvgComponent, selector: "s4y-svg", inputs: ["src", "color", "size"] }, { kind: "component", type: ButtonComponent, selector: "button[s4yButton], a[s4yButton]", inputs: ["disabled", "outlined", "loading", "size", "roundend", "variant", "fullWidth", "iconAligned"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ConfirmationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 's4y-confirmation', imports: [SvgComponent, ButtonComponent, NgTemplateOutlet], template: "@let model = props;\r\n@let cancelModel = model?.cancelProps;\r\n@let confirmationModel = model?.confirmationProps;\r\n\r\n@if (model) {\r\n  <div class=\"s4y-confirmation-icon\">\r\n    @if (model.iconUri) {\r\n      <s4y-svg [src]=\"model.iconUri\" />\r\n    } @else {\r\n      <svg\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 24 24\"\r\n        fill=\"currentColor\"\r\n      >\r\n        <path\r\n          d=\"M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 15H13V17H11V15ZM11 7H13V13H11V7Z\"\r\n        ></path>\r\n      </svg>\r\n    }\r\n  </div>\r\n\r\n\r\n  <div class=\"s4y-confirmation-content flex\">\r\n    <p class=\"medium-text-bold s4y-confirmation-title\">\r\n      {{ model.title }}\r\n    </p>\r\n\r\n    @if (model.content) {\r\n      <div class=\"s4y-confirmation-description\">\r\n        @if (isTemplate) {\r\n          <ng-container *ngTemplateOutlet=\"template!\"></ng-container>\r\n        } @else if (isHtml) {\r\n          <div class=\"small-text-regular\" [innerHTML]=\"safeHtml\"></div>\r\n        } @else {\r\n          <p class=\"small-text-regular\">{{ textContent }}</p>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n\r\n  <div class=\"s4y-confirmation-buttons\">\r\n    <button\r\n      type=\"button\"\r\n      s4yButton\r\n      [outlined]=\"true\"\r\n      [variant]=\"'danger'\"\r\n      [fullWidth]=\"true\"\r\n      [disabled]=\"cancelLoading || loading\"\r\n      [loading]=\"cancelLoading\"\r\n      (click)=\"handleCancel()\"\r\n    >\r\n      {{ cancelModel?.text ?? \"Cancelar\" }}\r\n    </button>\r\n    <button\r\n      type=\"button\"\r\n      s4yButton\r\n      [outlined]=\"false\"\r\n      [variant]=\"'danger'\"\r\n      [fullWidth]=\"true\"\r\n      [disabled]=\"confirmLoading || loading\"\r\n      [loading]=\"confirmLoading\"\r\n      (click)=\"handleConfirm()\"\r\n    >\r\n      {{ confirmationModel?.text ?? \"Confirmar\" }}\r\n    </button>\r\n  </div>\r\n}\r\n", styles: [":host{display:block;width:100%}:host .s4y-confirmation-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}:host .s4y-confirmation-content{gap:.4rem;flex-direction:column;text-align:center;padding:1rem 0;width:100%;overflow-wrap:break-word;word-break:break-word}:host .s4y-confirmation-title{color:var(--primary-color)}:host .s4y-confirmation-description{font-weight:400;overflow-wrap:break-word;word-break:break-word}:host .s4y-confirmation-description strong,:host .s4y-confirmation-description b{font-weight:600;color:var(--primary-color)}:host .s4y-confirmation-description em,:host .s4y-confirmation-description i{font-style:italic}:host .s4y-confirmation-description a{color:var(--primary-color);text-decoration:underline}:host .s4y-confirmation-description p{margin:0}:host .s4y-confirmation-description p+p{margin-top:.8rem}:host .s4y-confirmation-description ul,:host .s4y-confirmation-description ol{margin:.8rem 0;padding-left:2rem}:host s4y-svg,:host svg{width:4rem;color:var(--warning-color);flex-shrink:0}:host .s4y-confirmation-buttons{display:flex;gap:1.4rem;align-items:center;margin-top:2.8rem;width:100%;flex-shrink:0;flex-wrap:wrap}:host .s4y-confirmation-buttons button{flex:1 1 calc(50% - .7rem)}@media (max-width: 30rem){:host .s4y-confirmation-buttons{flex:1 1 100%}}\n"] }]
+        }] });
+
+class ConfirmationService {
+    overlay = inject(Overlay);
+    constructor() { }
+    open(config) {
+        const overlayRef = this.createOverlay(config);
+        const confirmationPortal = this.confirmationPortal();
+        const result$ = new Subject();
+        let isProcessing = false;
+        const confirmationInstance = overlayRef.attach(confirmationPortal);
+        confirmationInstance.instance.props = config;
+        confirmationInstance.instance.onCancelClick = async () => {
+            isProcessing = true;
+            await this.handleAction(config.onCancel, overlayRef, false, result$);
+            isProcessing = false;
+        };
+        confirmationInstance.instance.onConfirmClick = async () => {
+            isProcessing = true;
+            await this.handleAction(config.onConfirm, overlayRef, true, result$);
+            isProcessing = false;
+        };
+        const backdropSub = overlayRef.backdropClick().subscribe(() => {
+            if (!isProcessing) {
+                this.closeWithResult(overlayRef, result$, false);
+            }
+        });
+        const keySub = overlayRef.keydownEvents().subscribe((event) => {
+            if (event.key === 'Escape' && !isProcessing) {
+                // ADICIONE essa verificação
+                this.closeWithResult(overlayRef, result$, false);
+            }
+        });
+        return result$.asObservable().pipe(take(1), finalize(() => {
+            backdropSub.unsubscribe();
+            keySub.unsubscribe();
+        }));
+    }
+    async handleAction(action, overlayRef, confirmed, result$) {
+        try {
+            if (!action) {
+                result$.next({ confirmed });
+                result$.complete();
+                overlayRef.dispose();
+                return;
+            }
+            const actionResult$ = this.toObservable(action);
+            const actionData = await firstValueFrom(actionResult$.pipe(catchError$1(() => of(true))));
+            if (actionData === false) {
+                return;
+            }
+            result$.next({ confirmed, data: actionData });
+            result$.complete();
+            overlayRef.dispose();
+        }
+        catch (error) {
+            console.error('Error handling confirmation action:', error);
+            result$.next({ confirmed: false });
+            result$.complete();
+            overlayRef.dispose();
+        }
+    }
+    toObservable(value) {
+        const resolvedValue = typeof value === 'function' ? value() : value;
+        if (isObservable(resolvedValue)) {
+            return resolvedValue;
+        }
+        if (resolvedValue instanceof Promise) {
+            return from(resolvedValue);
+        }
+        return of(resolvedValue);
+    }
+    createOverlay({ width, height }) {
+        const overlayRef = this.overlay.create({
+            hasBackdrop: true,
+            disposeOnNavigation: true,
+            backdropClass: 's4y-backdrop-dialog',
+            panelClass: 's4y-confirmation-panel',
+            maxWidth: '90dvw',
+            height: height,
+            width: width ?? 'min(41rem, 90dvw)',
+            positionStrategy: this.overlay
+                .position()
+                .global()
+                .centerHorizontally()
+                .centerVertically(),
+        });
+        return overlayRef;
+    }
+    confirmationPortal() {
+        return new ComponentPortal(ConfirmationComponent);
+    }
+    closeWithResult(overlayRef, result$, confirmed) {
+        if (!result$.closed) {
+            result$.next({ confirmed });
+            result$.complete();
+        }
+        if (overlayRef.hasAttached()) {
+            overlayRef.dispose();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ConfirmationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ConfirmationService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ConfirmationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
 /*
  * Public API Surface of s4y-components
  */
@@ -4599,5 +4771,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AsideComponent, AsideService, AvatarComponent, BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbService, ButtonComponent, CheckboxComponent, ClickOutsideDirective, DYNAMIC_DIALOG_DATA, DYNAMIC_DIALOG_OPTIONS, DashboardContainerComponent, DashboardLayoutComponent, DashboardModule, DashboardRoutesComponent, DrawerComponent, DynamicDialogComponent, DynamicDialogRef, DynamicDialogService, DynamicLoadingGlobalService, DynamicTooltipDirective, ErrorMessageComponent, FormFieldComponent, FormFieldPasswordComponent, FormsKitModule, HintComponent, ImageComponent, ImageService, InputComponent, InputPrefixComponent, InputSufixComponent, LabelComponent, LoadingModalComponent, LoadingModalService, MaskDirective, MenuComponent, MenuItemComponent, ModalComponent, ModalConfirmationComponent, ModalConfirmationService, NavbarComponent, PaginationComponent, PopoverPanelComponent, PopoverTriggerDirective, RadioComponent, RatingComponent, SearchBarComponent, SelectComponent, SelectMultiComponent, SidebarRightComponent, SidebarRightService, SliderComponent, SpinnerComponent, StepComponent, StepPanelComponent, StepperComponent, SummaryCardComponent, SvgComponent, SvgService, TableComponent, TableSortDirective, TagComponent, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipDirective, TooltipModule, TooltipPosition, modalFadeCombined, sidebarRightAnimation };
+export { AsideComponent, AsideService, AvatarComponent, BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbService, ButtonComponent, CheckboxComponent, ClickOutsideDirective, ConfirmationService, DYNAMIC_DIALOG_DATA, DYNAMIC_DIALOG_OPTIONS, DashboardContainerComponent, DashboardLayoutComponent, DashboardModule, DashboardRoutesComponent, DrawerComponent, DynamicDialogComponent, DynamicDialogRef, DynamicDialogService, DynamicLoadingGlobalService, DynamicTooltipDirective, ErrorMessageComponent, FormFieldComponent, FormFieldPasswordComponent, FormsKitModule, HintComponent, ImageComponent, ImageService, InputComponent, InputPrefixComponent, InputSufixComponent, LabelComponent, LoadingModalComponent, LoadingModalService, MaskDirective, MenuComponent, MenuItemComponent, ModalComponent, ModalConfirmationComponent, ModalConfirmationService, NavbarComponent, PaginationComponent, PopoverPanelComponent, PopoverTriggerDirective, RadioComponent, RatingComponent, SearchBarComponent, SelectComponent, SelectMultiComponent, SidebarRightComponent, SidebarRightService, SliderComponent, SpinnerComponent, StepComponent, StepPanelComponent, StepperComponent, SummaryCardComponent, SvgComponent, SvgService, TableComponent, TableSortDirective, TagComponent, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipDirective, TooltipModule, TooltipPosition, modalFadeCombined, sidebarRightAnimation };
 //# sourceMappingURL=s4y-ui.mjs.map