@dev-tcloud/tcloud-ui 6.0.3 → 6.0.5

package/fesm2022/dev-tcloud-tcloud-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, EventEmitter, Input, Output, forwardRef, ViewChild, Pipe, ViewEncapsulation, InjectionToken, Optional, Inject, Directive, HostListener, NgModule, makeEnvironmentProviders, input, effect, computed, output, signal, inject, ApplicationRef, model, viewChild, ChangeDetectionStrategy, ContentChildren } from '@angular/core';
+import { Injectable, Component, EventEmitter, Input, Output, forwardRef, ViewChild, Pipe, ViewEncapsulation, InjectionToken, Optional, Inject, input, effect, Directive, HostListener, NgModule, makeEnvironmentProviders, computed, output, signal, inject, ApplicationRef, model, viewChild, ChangeDetectionStrategy, ContentChildren } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, DatePipe, DOCUMENT } from '@angular/common';
 import { Subject, Subscription, debounceTime, distinctUntilChanged, map, BehaviorSubject } from 'rxjs';
@@ -2993,6 +2993,36 @@ const TCLOUD_UI_LAYOUT_SERVICE = new InjectionToken('TCLOUD_UI_LAYOUT_SERVICE');
  */
 const TCLOUD_UI_VIEWPORT_SERVICE = new InjectionToken('TCLOUD_UI_VIEWPORT_SERVICE');
 
+class TCloudUiLayoutService {
+    constructor(_LayoutService) {
+        this._LayoutService = _LayoutService;
+        this.layoutService = {};
+        this.layoutService = this._LayoutService;
+    }
+    getCurrentLayout() {
+        try {
+            return this.layoutService?.getCurrentLayout();
+        }
+        catch (error) {
+            // console.warn('getCurrentLayout', error);
+        }
+        return '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TCloudUiLayoutService, deps: [{ token: TCLOUD_UI_LAYOUT_SERVICE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TCloudUiLayoutService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TCloudUiLayoutService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [TCLOUD_UI_LAYOUT_SERVICE]
+                }] }] });
+
 class TCloudUiModalComponent {
     /**
      * confirm boolean - Indica se será um modal do tipo confirmação - default false
@@ -3050,8 +3080,8 @@ class TCloudUiModalComponent {
         this.tcloudModalService.setLoading(loading);
     }
     get loading() { return this._loading; }
-    constructor(_LayoutService, tcloudModalService) {
-        this._LayoutService = _LayoutService;
+    constructor(_tCloudUiLayoutService, tcloudModalService) {
+        this._tCloudUiLayoutService = _tCloudUiLayoutService;
         this.tcloudModalService = tcloudModalService;
         /**
         * tcloud-ui-modal - Cria e exibe um modal
@@ -3082,11 +3112,9 @@ class TCloudUiModalComponent {
         this.toConfirm = new EventEmitter();
         this.toCancel = new EventEmitter();
         this.toAction = new EventEmitter();
-        this.layoutService = {};
-        this.layoutService = this._LayoutService;
     }
     get layout() {
-        return `${this.layoutService?.getCurrentLayout()}`;
+        return `${this._tCloudUiLayoutService?.getCurrentLayout()}`;
     }
     ngOnInit() {
         this.subscription.add(this.tcloudModalService.stateClose$.subscribe((open) => {
@@ -3139,9 +3167,10 @@ class TCloudUiModalComponent {
             this.subscription.unsubscribe();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TCloudUiModalComponent, deps: [{ token: TCLOUD_UI_LAYOUT_SERVICE, optional: true }, { token: TcloudModalService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TCloudUiModalComponent, deps: [{ token: TCloudUiLayoutService }, { token: TcloudModalService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TCloudUiModalComponent, isStandalone: true, selector: "tcloud-ui-modal", inputs: { confirm: "confirm", confirmText: "confirmText", autoClose: "autoClose", title: "title", maxWidth: "maxWidth", window: "window", open: "open", loading: "loading" }, outputs: { openChange: "openChange", toConfirm: "toConfirm", toCancel: "toCancel", toAction: "toAction" }, providers: [
-            TcloudModalService
+            TcloudModalService,
+            TCloudUiLayoutService
         ], ngImport: i0, template: "<div class=\"tc-background-modal\" *ngIf=\"control_open\" >{{ checkIsOpen() }}</div>\n\n<div class=\"tcloud-ui-modal base-modal\" [attr.data-layout]=\"layout\" *ngIf=\"open\">\n  <div class=\"sub-modal\" [@fade]=\"'visible'\">\n    <div class=\"tc-modal tc-modal-shadow\" [attr.style]=\"'max-width: ' + maxWidth + 'px;'\">\n      <div class=\"area-top-actions tc-ui-modal-{{mode}}\">\n        <button type=\"button tc-btn-action-close-ui-modal\" [class.no-use-header]=\"title\" (click)=\"toClose()\" [disabled]=\"loading\">\n          <i *ngIf=\"!loading\" class=\"fas fa-times\"></i>\n          <i *ngIf=\"loading\" class=\"fas fa-spinner fa-spin\"></i>\n        </button>\n      </div>\n\n      <h4 *ngIf=\"title\" [innerHTML]=\"title\"></h4>\n\n      <ng-content></ng-content>\n\n    </div>\n  </div>\n</div>\n\n<!-- Ex: Modal -->\n<!-- \n  <tcloud-ui-modal [(open)]=\"open\">\n\n    <tcloud-ui-modal-header title=\"T\u00EDtulo do Modal\" ></tcloud-ui-modal-header>\n\n    <tcloud-ui-modal-body>\n      Conte\u00FAdo do modal aqui\n    </tcloud-ui-modal-body>\n\n    <tcloud-ui-modal-footer></tcloud-ui-modal-footer>\n\n  </tcloud-ui-modal>\n\n  <button type=\"button\" (click)=\"open = !open\">open modal {{ open }}</button>\n-->\n\n<!-- ****** -->\n<!-- ****** -->\n<!-- ****** -->\n<!-- ****** -->\n\n<!-- Ex: Confirm Modal -->\n<!-- \n  <tcloud-ui-modal [(open)]=\"open_confirm\" [title]=\"'Aten\u00E7\u00E3o'\" [confirmText]=\"'Aceito'\" [confirm]=\"true\" (toAction)=\"$event\" >\n\n    <tcloud-ui-modal-body>Deseja realmente executar esta a\u00E7\u00E3o?</tcloud-ui-modal-body>\n\n    <tcloud-ui-modal-footer></tcloud-ui-modal-footer>\n\n  </tcloud-ui-modal>\n\n  <button type=\"button\" (click)=\"open_confirm = !open_confirm\">open_confirm modal {{ open_confirm }}</button>\n-->", styles: [".tc-background-modal{border:1px solid #ccc;position:fixed;width:100%;left:0;top:0;background-color:#000;z-index:4005;height:100%;opacity:.3}.base-modal{height:100%;overflow:scroll;position:fixed;width:100%;z-index:4005;left:0;top:0;text-align:left!important}.sub-modal{padding:30px;position:absolute;width:100%}.tc-modal{position:relative;background-color:#fff;padding:12px;border-radius:8px;margin:auto;width:100%}.tc-modal-shadow{-webkit-box-shadow:2px 2px 10px 0px rgba(0,0,0,.368627451);box-shadow:2px 2px 10px #0000005e}.area-top-actions{position:absolute;top:2px;right:5px;z-index:1}.area-top-actions.tc-ui-modal-colorless button i{color:var(--tc-gray-600)!important}.area-top-actions button{cursor:pointer;background-color:transparent;border:none;font-size:15px;padding:5px 7px}.area-top-actions button i{font-size:17px;color:#fff;transition:all .25s;opacity:.7}.area-top-actions button i:hover{opacity:1!important}h4{font-size:16px;margin:5px 30px 10px 0;font-weight:700}.no-use-header i{color:#999!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
             trigger('fade', [
                 state('visible', style({ opacity: 1 })),
@@ -3157,7 +3186,8 @@ class TCloudUiModalComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TCloudUiModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tcloud-ui-modal', providers: [
-                        TcloudModalService
+                        TcloudModalService,
+                        TCloudUiLayoutService
                     ], animations: [
                         trigger('fade', [
                             state('visible', style({ opacity: 1 })),
@@ -3169,12 +3199,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                             transition('visible => hide', animate('0.3s ease-out'))
                         ])
                     ], standalone: true, imports: [CommonModule], template: "<div class=\"tc-background-modal\" *ngIf=\"control_open\" >{{ checkIsOpen() }}</div>\n\n<div class=\"tcloud-ui-modal base-modal\" [attr.data-layout]=\"layout\" *ngIf=\"open\">\n  <div class=\"sub-modal\" [@fade]=\"'visible'\">\n    <div class=\"tc-modal tc-modal-shadow\" [attr.style]=\"'max-width: ' + maxWidth + 'px;'\">\n      <div class=\"area-top-actions tc-ui-modal-{{mode}}\">\n        <button type=\"button tc-btn-action-close-ui-modal\" [class.no-use-header]=\"title\" (click)=\"toClose()\" [disabled]=\"loading\">\n          <i *ngIf=\"!loading\" class=\"fas fa-times\"></i>\n          <i *ngIf=\"loading\" class=\"fas fa-spinner fa-spin\"></i>\n        </button>\n      </div>\n\n      <h4 *ngIf=\"title\" [innerHTML]=\"title\"></h4>\n\n      <ng-content></ng-content>\n\n    </div>\n  </div>\n</div>\n\n<!-- Ex: Modal -->\n<!-- \n  <tcloud-ui-modal [(open)]=\"open\">\n\n    <tcloud-ui-modal-header title=\"T\u00EDtulo do Modal\" ></tcloud-ui-modal-header>\n\n    <tcloud-ui-modal-body>\n      Conte\u00FAdo do modal aqui\n    </tcloud-ui-modal-body>\n\n    <tcloud-ui-modal-footer></tcloud-ui-modal-footer>\n\n  </tcloud-ui-modal>\n\n  <button type=\"button\" (click)=\"open = !open\">open modal {{ open }}</button>\n-->\n\n<!-- ****** -->\n<!-- ****** -->\n<!-- ****** -->\n<!-- ****** -->\n\n<!-- Ex: Confirm Modal -->\n<!-- \n  <tcloud-ui-modal [(open)]=\"open_confirm\" [title]=\"'Aten\u00E7\u00E3o'\" [confirmText]=\"'Aceito'\" [confirm]=\"true\" (toAction)=\"$event\" >\n\n    <tcloud-ui-modal-body>Deseja realmente executar esta a\u00E7\u00E3o?</tcloud-ui-modal-body>\n\n    <tcloud-ui-modal-footer></tcloud-ui-modal-footer>\n\n  </tcloud-ui-modal>\n\n  <button type=\"button\" (click)=\"open_confirm = !open_confirm\">open_confirm modal {{ open_confirm }}</button>\n-->", styles: [".tc-background-modal{border:1px solid #ccc;position:fixed;width:100%;left:0;top:0;background-color:#000;z-index:4005;height:100%;opacity:.3}.base-modal{height:100%;overflow:scroll;position:fixed;width:100%;z-index:4005;left:0;top:0;text-align:left!important}.sub-modal{padding:30px;position:absolute;width:100%}.tc-modal{position:relative;background-color:#fff;padding:12px;border-radius:8px;margin:auto;width:100%}.tc-modal-shadow{-webkit-box-shadow:2px 2px 10px 0px rgba(0,0,0,.368627451);box-shadow:2px 2px 10px #0000005e}.area-top-actions{position:absolute;top:2px;right:5px;z-index:1}.area-top-actions.tc-ui-modal-colorless button i{color:var(--tc-gray-600)!important}.area-top-actions button{cursor:pointer;background-color:transparent;border:none;font-size:15px;padding:5px 7px}.area-top-actions button i{font-size:17px;color:#fff;transition:all .25s;opacity:.7}.area-top-actions button i:hover{opacity:1!important}h4{font-size:16px;margin:5px 30px 10px 0;font-weight:700}.no-use-header i{color:#999!important}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [TCLOUD_UI_LAYOUT_SERVICE]
-                }] }, { type: TcloudModalService }], propDecorators: { confirm: [{
+        }], ctorParameters: () => [{ type: TCloudUiLayoutService }, { type: TcloudModalService }], propDecorators: { confirm: [{
                 type: Input
             }], confirmText: [{
                 type: Input
@@ -3232,8 +3257,94 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 type: Input
             }] } });
 
+class TCloudUiButtonDirective {
+    constructor(_tCloudUiLayoutService, _el) {
+        this._tCloudUiLayoutService = _tCloudUiLayoutService;
+        this._el = _el;
+        this.color = input('primary');
+        this.size = input('sm');
+        this.fullWidth = input(false);
+        this.tcloudButton = input('filled');
+        effect(() => {
+            this.setClasses();
+        });
+    }
+    layout() {
+        return `${this._tCloudUiLayoutService?.getCurrentLayout()}`;
+    }
+    setClasses() {
+        const layout = this.layout();
+        if (layout === '') {
+            return;
+        }
+        const tokenList = this._el.nativeElement.classList;
+        tokenList.remove(...Array.from(tokenList).filter((c) => c.startsWith('tc-btn')));
+        tokenList.remove(...Array.from(tokenList).filter((c) => c.startsWith('tc-rev-btn--')));
+        let tcloudButton = this.tcloudButton();
+        if (!tcloudButton) {
+            tcloudButton = 'filled';
+        }
+        if (layout === 'modern') {
+            this.fullWidth() ? this._el.nativeElement.classList.add('tc-rev-btn--full-width') : null;
+            this._el.nativeElement.classList.add(`tc-rev-btn--${this.size()}`);
+            this._el.nativeElement.classList.add(`tc-rev-btn--${this.color()}-${tcloudButton}`);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TCloudUiButtonDirective, deps: [{ token: TCloudUiLayoutService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.17", type: TCloudUiButtonDirective, isStandalone: true, selector: "[tcloudButton]", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, tcloudButton: { classPropertyName: "tcloudButton", publicName: "tcloudButton", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "tc-rev-btn" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TCloudUiButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tcloudButton]',
+                    host: {
+                        class: 'tc-rev-btn'
+                    },
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: TCloudUiLayoutService }, { type: i0.ElementRef }] });
+
+class TCloudUiFormDirective {
+    constructor(_tCloudUiLayoutService, _el) {
+        this._tCloudUiLayoutService = _tCloudUiLayoutService;
+        this._el = _el;
+        this.fullWidth = input(false);
+        effect(() => {
+            this.setClasses();
+        });
+    }
+    layout() {
+        return `${this._tCloudUiLayoutService?.getCurrentLayout()}`;
+    }
+    setClasses() {
+        const layout = this.layout();
+        if (layout === '') {
+            return;
+        }
+        const tokenList = this._el.nativeElement.classList;
+        tokenList.remove(...Array.from(tokenList).filter((c) => c === 'form-control'));
+        tokenList.remove(...Array.from(tokenList).filter((c) => c === 'tc-form-control'));
+        if (layout === 'modern') {
+            this.fullWidth() ? this._el.nativeElement.classList.add('tc-rev-input-control--full-width') : null;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TCloudUiFormDirective, deps: [{ token: TCloudUiLayoutService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.17", type: TCloudUiFormDirective, isStandalone: true, selector: "[tcloudForm]", inputs: { fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "tc-rev-input-control" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TCloudUiFormDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tcloudForm]',
+                    host: {
+                        class: 'tc-rev-input-control'
+                    },
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: TCloudUiLayoutService }, { type: i0.ElementRef }] });
+
 class TCloudUiModalFooterComponent {
-    constructor(tcloudModalService) {
+    constructor(_tCloudUiLayoutService, tcloudModalService) {
+        this._tCloudUiLayoutService = _tCloudUiLayoutService;
         this.tcloudModalService = tcloudModalService;
         this.btnCloseText = 'Fechar';
         this.btnCancelText = 'Cancelar';
@@ -3242,6 +3353,9 @@ class TCloudUiModalFooterComponent {
         this.param_confirm = {};
         this.loading = false;
     }
+    get layout() {
+        return `${this._tCloudUiLayoutService?.getCurrentLayout()}`;
+    }
     ngOnInit() {
         this.txt_value = '';
         this.param_confirm = this.tcloudModalService.getParamConfirm();
@@ -3271,13 +3385,13 @@ class TCloudUiModalFooterComponent {
             this.subscription.unsubscribe();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TCloudUiModalFooterComponent, deps: [{ token: TcloudModalService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TCloudUiModalFooterComponent, isStandalone: true, selector: "tcloud-ui-modal-footer", inputs: { btnCloseText: "btnCloseText", btnCancelText: "btnCancelText", btnConfirmText: "btnConfirmText" }, viewQueries: [{ propertyName: "_formulario", first: true, predicate: ["_formulario"], descendants: true }], ngImport: i0, template: "<div class=\"tcloud-ui-modal-footer tc-modal-footer\">\n\n  <div class=\"input-confirm\" *ngIf=\"param_confirm && param_confirm.confirmText\">\n    <p>Digite a palavra <strong>&quot;{{ param_confirm.confirmText }}&quot;</strong> para confirmar.</p>\n    \n    <form #_formulario=\"ngForm\" (ngSubmit)=\"toConfirm(_formulario.valid)\">\n      <input \n        [disabled]=\"loading\"\n        placeholder=\"{{ param_confirm.confirmText }}\"\n        name=\"txt_value\" \n        [(ngModel)]=\"txt_value\" \n        type=\"text\" \n        class=\"tc-form-confirm tc-form-control\" \n        required \n        [class.different-text]=\"(txt_value).length >= (param_confirm.confirmText).length && (txt_value).toLowerCase() !== (param_confirm.confirmText).toLowerCase()\" >\n    </form>\n\n  </div>\n\n  <hr>\n\n  <div class=\"actions-footer {{ (loading) ? 'state-loading' : '' }}\">\n    <!-- {{ param_confirm | json }} -->\n    <button [disabled]=\"loading\" *ngIf=\"param_confirm && !param_confirm.confirm\" type=\"button\" class=\"tc-btn margin-l-5\" (click)=\"toClose()\">{{ btnCloseText }}</button>\n\n    <button [disabled]=\"loading\" *ngIf=\"param_confirm && param_confirm.confirm\" type=\"button\" class=\"tc-btn margin-l-5\" (click)=\"toCancel()\">{{ btnCancelText }}</button>\n    <button [disabled]=\"(txt_value).toLowerCase() !== (param_confirm.confirmText).toLowerCase() || loading\" *ngIf=\"param_confirm && param_confirm.confirm\" type=\"button\" class=\"tc-btn tc-btn-primary margin-l-5\" (click)=\"toConfirm(_formulario?.valid)\">{{ btnConfirmText }}</button>\n\n  </div>\n</div>\n", styles: [".actions-footer{text-align:right}.ng-valid.ng-touched.different-text{border-color:#fb9c23}.form-confirm{max-width:200px}button:disabled{opacity:.7!important;cursor:not-allowed}.input-confirm{padding:5px 14px}.state-loading button{cursor:progress!important}.margin-l-5{margin-left:5px}.tc-form-confirm{max-width:240px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TCloudUiModalFooterComponent, deps: [{ token: TCloudUiLayoutService }, { token: TcloudModalService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TCloudUiModalFooterComponent, isStandalone: true, selector: "tcloud-ui-modal-footer", inputs: { btnCloseText: "btnCloseText", btnCancelText: "btnCancelText", btnConfirmText: "btnConfirmText" }, viewQueries: [{ propertyName: "_formulario", first: true, predicate: ["_formulario"], descendants: true }], ngImport: i0, template: "<div class=\"tcloud-ui-modal-footer tc-modal-footer\">\n\n  <div class=\"input-confirm\" *ngIf=\"param_confirm && param_confirm.confirmText\">\n    <p>Digite a palavra <strong>&quot;{{ param_confirm.confirmText }}&quot;</strong> para confirmar.</p>\n    \n    <form #_formulario=\"ngForm\" (ngSubmit)=\"toConfirm(_formulario.valid)\">\n      <input \n        tcloudForm\n        [disabled]=\"loading\"\n        placeholder=\"{{ param_confirm.confirmText }}\"\n        name=\"txt_value\" \n        [(ngModel)]=\"txt_value\" \n        type=\"text\" \n        class=\"tc-form-confirm tc-form-control\" \n        required \n        [class.different-text]=\"(txt_value).length >= (param_confirm.confirmText).length && (txt_value).toLowerCase() !== (param_confirm.confirmText).toLowerCase()\" >\n    </form>\n\n  </div>\n\n  <hr>\n\n  <div class=\"actions-footer {{ (loading) ? 'state-loading' : '' }}\">\n    <!-- {{ param_confirm | json }} -->\n    <button [disabled]=\"loading\" *ngIf=\"param_confirm && !param_confirm.confirm\" type=\"button\" class=\"tc-btn margin-l-5\" tcloudButton=\"filled\" color=\"light\" (click)=\"toClose()\">{{ btnCloseText }}</button>\n\n    <button [disabled]=\"loading\" *ngIf=\"param_confirm && param_confirm.confirm\" type=\"button\" class=\"tc-btn margin-l-5\" tcloudButton=\"filled\" color=\"light\" (click)=\"toCancel()\">{{ btnCancelText }}</button>\n    <button [disabled]=\"(txt_value).toLowerCase() !== (param_confirm.confirmText).toLowerCase() || loading\" *ngIf=\"param_confirm && param_confirm.confirm\" type=\"button\" class=\"tc-btn tc-btn-primary margin-l-5\" tcloudButton=\"filled\" (click)=\"toConfirm(_formulario?.valid)\">{{ btnConfirmText }}</button>\n\n  </div>\n</div>\n", styles: [".actions-footer{text-align:right}.ng-valid.ng-touched.different-text{border-color:#fb9c23}.form-confirm{max-width:200px}button:disabled{opacity:.7!important;cursor:not-allowed}.input-confirm{padding:5px 14px}.state-loading button{cursor:progress!important}.margin-l-5{margin-left:5px}.tc-form-confirm{max-width:240px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: TCloudUiButtonDirective, selector: "[tcloudButton]", inputs: ["color", "size", "fullWidth", "tcloudButton"] }, { kind: "directive", type: TCloudUiFormDirective, selector: "[tcloudForm]", inputs: ["fullWidth"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TCloudUiModalFooterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tcloud-ui-modal-footer', standalone: true, imports: [CommonModule, FormsModule], template: "<div class=\"tcloud-ui-modal-footer tc-modal-footer\">\n\n  <div class=\"input-confirm\" *ngIf=\"param_confirm && param_confirm.confirmText\">\n    <p>Digite a palavra <strong>&quot;{{ param_confirm.confirmText }}&quot;</strong> para confirmar.</p>\n    \n    <form #_formulario=\"ngForm\" (ngSubmit)=\"toConfirm(_formulario.valid)\">\n      <input \n        [disabled]=\"loading\"\n        placeholder=\"{{ param_confirm.confirmText }}\"\n        name=\"txt_value\" \n        [(ngModel)]=\"txt_value\" \n        type=\"text\" \n        class=\"tc-form-confirm tc-form-control\" \n        required \n        [class.different-text]=\"(txt_value).length >= (param_confirm.confirmText).length && (txt_value).toLowerCase() !== (param_confirm.confirmText).toLowerCase()\" >\n    </form>\n\n  </div>\n\n  <hr>\n\n  <div class=\"actions-footer {{ (loading) ? 'state-loading' : '' }}\">\n    <!-- {{ param_confirm | json }} -->\n    <button [disabled]=\"loading\" *ngIf=\"param_confirm && !param_confirm.confirm\" type=\"button\" class=\"tc-btn margin-l-5\" (click)=\"toClose()\">{{ btnCloseText }}</button>\n\n    <button [disabled]=\"loading\" *ngIf=\"param_confirm && param_confirm.confirm\" type=\"button\" class=\"tc-btn margin-l-5\" (click)=\"toCancel()\">{{ btnCancelText }}</button>\n    <button [disabled]=\"(txt_value).toLowerCase() !== (param_confirm.confirmText).toLowerCase() || loading\" *ngIf=\"param_confirm && param_confirm.confirm\" type=\"button\" class=\"tc-btn tc-btn-primary margin-l-5\" (click)=\"toConfirm(_formulario?.valid)\">{{ btnConfirmText }}</button>\n\n  </div>\n</div>\n", styles: [".actions-footer{text-align:right}.ng-valid.ng-touched.different-text{border-color:#fb9c23}.form-confirm{max-width:200px}button:disabled{opacity:.7!important;cursor:not-allowed}.input-confirm{padding:5px 14px}.state-loading button{cursor:progress!important}.margin-l-5{margin-left:5px}.tc-form-confirm{max-width:240px}\n"] }]
-        }], ctorParameters: () => [{ type: TcloudModalService }], propDecorators: { btnCloseText: [{
+            args: [{ selector: 'tcloud-ui-modal-footer', standalone: true, imports: [CommonModule, FormsModule, TCloudUiButtonDirective, TCloudUiFormDirective], template: "<div class=\"tcloud-ui-modal-footer tc-modal-footer\">\n\n  <div class=\"input-confirm\" *ngIf=\"param_confirm && param_confirm.confirmText\">\n    <p>Digite a palavra <strong>&quot;{{ param_confirm.confirmText }}&quot;</strong> para confirmar.</p>\n    \n    <form #_formulario=\"ngForm\" (ngSubmit)=\"toConfirm(_formulario.valid)\">\n      <input \n        tcloudForm\n        [disabled]=\"loading\"\n        placeholder=\"{{ param_confirm.confirmText }}\"\n        name=\"txt_value\" \n        [(ngModel)]=\"txt_value\" \n        type=\"text\" \n        class=\"tc-form-confirm tc-form-control\" \n        required \n        [class.different-text]=\"(txt_value).length >= (param_confirm.confirmText).length && (txt_value).toLowerCase() !== (param_confirm.confirmText).toLowerCase()\" >\n    </form>\n\n  </div>\n\n  <hr>\n\n  <div class=\"actions-footer {{ (loading) ? 'state-loading' : '' }}\">\n    <!-- {{ param_confirm | json }} -->\n    <button [disabled]=\"loading\" *ngIf=\"param_confirm && !param_confirm.confirm\" type=\"button\" class=\"tc-btn margin-l-5\" tcloudButton=\"filled\" color=\"light\" (click)=\"toClose()\">{{ btnCloseText }}</button>\n\n    <button [disabled]=\"loading\" *ngIf=\"param_confirm && param_confirm.confirm\" type=\"button\" class=\"tc-btn margin-l-5\" tcloudButton=\"filled\" color=\"light\" (click)=\"toCancel()\">{{ btnCancelText }}</button>\n    <button [disabled]=\"(txt_value).toLowerCase() !== (param_confirm.confirmText).toLowerCase() || loading\" *ngIf=\"param_confirm && param_confirm.confirm\" type=\"button\" class=\"tc-btn tc-btn-primary margin-l-5\" tcloudButton=\"filled\" (click)=\"toConfirm(_formulario?.valid)\">{{ btnConfirmText }}</button>\n\n  </div>\n</div>\n", styles: [".actions-footer{text-align:right}.ng-valid.ng-touched.different-text{border-color:#fb9c23}.form-confirm{max-width:200px}button:disabled{opacity:.7!important;cursor:not-allowed}.input-confirm{padding:5px 14px}.state-loading button{cursor:progress!important}.margin-l-5{margin-left:5px}.tc-form-confirm{max-width:240px}\n"] }]
+        }], ctorParameters: () => [{ type: TCloudUiLayoutService }, { type: TcloudModalService }], propDecorators: { btnCloseText: [{
                 type: Input
             }], btnCancelText: [{
                 type: Input
@@ -6040,7 +6154,9 @@ const DIRECTIVES = [
     TCloudUiTooltipDirective,
     TCloudUiDigitOnlyDirective,
     TCloudUiHighLightDirective,
-    TCloudUiIpMaskDirective
+    TCloudUiIpMaskDirective,
+    TCloudUiButtonDirective,
+    TCloudUiFormDirective
 ];
 const PIPES = [
     ToTextPipe,
@@ -6122,7 +6238,9 @@ class TCloudUiModule {
             TCloudUiTooltipDirective,
             TCloudUiDigitOnlyDirective,
             TCloudUiHighLightDirective,
-            TCloudUiIpMaskDirective, ToTextPipe,
+            TCloudUiIpMaskDirective,
+            TCloudUiButtonDirective,
+            TCloudUiFormDirective, ToTextPipe,
             BytesPipe,
             CNPJPipe,
             CPFPipe,
@@ -6175,7 +6293,9 @@ class TCloudUiModule {
             TCloudUiTooltipDirective,
             TCloudUiDigitOnlyDirective,
             TCloudUiHighLightDirective,
-            TCloudUiIpMaskDirective, ToTextPipe,
+            TCloudUiIpMaskDirective,
+            TCloudUiButtonDirective,
+            TCloudUiFormDirective, ToTextPipe,
             BytesPipe,
             CNPJPipe,
             CPFPipe,
@@ -8454,5 +8574,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BytesPipe, CNPJPipe, CPFPipe, CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1 as CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, DateBRPipe, DropdownGroupedSize, DropdownMultiSize, DropdownSize, MonthNamePipe, MultiLevelDropdownSize, ProgressStatusBarGradientStatus, RespectivePipe, StatusInfoPipe, TCCondition, TCFiltersType, TCLOUD_UI_CONFIG, TCLOUD_UI_LAYOUT_SERVICE, TCLOUD_UI_USER_SERVICE, TCLOUD_UI_VIEWPORT_SERVICE, TCloudUiAccordionBodyComponent, TCloudUiAccordionComponent, TCloudUiAccordionTitleComponent, TCloudUiAlignDirective, TCloudUiCheckAccessDirective, TCloudUiCheckAccessService, TCloudUiChoiceIssuesComponent, TCloudUiCubesComponent, TCloudUiCurrencyDirective, TCloudUiDataListComponent, TCloudUiDataListOptionComponent, TCloudUiDatepickerComponent, TCloudUiDatepickerTimeComponent, TCloudUiDigitOnlyDirective, TCloudUiElCopyDirective, TCloudUiFiltersComponent, TCloudUiHighLightDirective, TCloudUiHoverParentDirective, TCloudUiInputPasswordComponent, TCloudUiInputSearchComponent, TCloudUiIpMaskDirective, TCloudUiLabelTokenComponent, TCloudUiLineStepCircleComponent, TCloudUiLineStepTitleComponent, TCloudUiLinhaLogoComponent, TCloudUiLoadingComponent, TCloudUiLoadingTransitionsService, TCloudUiModalBodyComponent, TCloudUiModalComponent, TCloudUiModalFooterComponent, TCloudUiModalHeaderComponent, TCloudUiModule, TCloudUiMultiInputComponent, TCloudUiMultiSelectComponent, TCloudUiMultiplesValuesComponent, TCloudUiNgCheckAccessDirective, TCloudUiNgFeatureFlagsDirective, TCloudUiNotFoundComponent, TCloudUiNumberStepComponent, TCloudUiProgressBarComponent, TCloudUiRangeDateComponent, TCloudUiReorderItemsComponent, TCloudUiScrollBoxComponent, TCloudUiSearchInObjectService, TCloudUiTabContentComponent, TCloudUiTabHeadComponent, TCloudUiTabMenuComponent, TCloudUiTabSubtitleComponent, TCloudUiTabTitleComponent, TCloudUiTableComponent, TCloudUiTooltipDirective, TCloudUiWelcomeComponent, TagColorsEnum, TcRevButtonDirective, TcRevCalendarComponent, TcRevCardAccordionComponent, TcRevCardComponent, TcRevCardTitleComponent, TcRevCheckboxDirective, TcRevComponentsLibModule, TcRevDropdownComponent, TcRevDropdownGroupedComponent, TcRevDropdownMultiComponent, TcRevDropdownMultiLevelComponent, TcRevEmptyContentComponent, TcRevFaqComponent, TcRevIconButtonDirective, TcRevInputContainerComponent, TcRevInputDirective, TcRevLoadingComponent, TcRevMessageComponent, TcRevMultiInputComponent, TcRevPaginationComponent, TcRevProgressStatusBarComponent, TcRevRadioDirective, TcRevSearchInputComponent, TcRevSideDrawerComponent, TcRevSkeletonLoadingComponent, TcRevSkeletonLoadingComponentStyle, TcRevSlideToggleDirective, TcRevSmallLoadingComponent, TcRevSmallLoadingComponentStyle, TcRevSubNavbarComponent, TcRevSubNavbarItemComponent, TcRevTabGroupComponent, TcRevTabItemComponent, TcRevTagComponent, TcRevToastComponent, TcRevTooltipDirective, TcRevWizardStepsComponent, ToTextPipe, echartBarConfig, isTextEllipsed, provideTCloudUi };
+export { BytesPipe, CNPJPipe, CPFPipe, CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1 as CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, DateBRPipe, DropdownGroupedSize, DropdownMultiSize, DropdownSize, MonthNamePipe, MultiLevelDropdownSize, ProgressStatusBarGradientStatus, RespectivePipe, StatusInfoPipe, TCCondition, TCFiltersType, TCLOUD_UI_CONFIG, TCLOUD_UI_LAYOUT_SERVICE, TCLOUD_UI_USER_SERVICE, TCLOUD_UI_VIEWPORT_SERVICE, TCloudUiAccordionBodyComponent, TCloudUiAccordionComponent, TCloudUiAccordionTitleComponent, TCloudUiAlignDirective, TCloudUiButtonDirective, TCloudUiCheckAccessDirective, TCloudUiCheckAccessService, TCloudUiChoiceIssuesComponent, TCloudUiCubesComponent, TCloudUiCurrencyDirective, TCloudUiDataListComponent, TCloudUiDataListOptionComponent, TCloudUiDatepickerComponent, TCloudUiDatepickerTimeComponent, TCloudUiDigitOnlyDirective, TCloudUiElCopyDirective, TCloudUiFiltersComponent, TCloudUiFormDirective, TCloudUiHighLightDirective, TCloudUiHoverParentDirective, TCloudUiInputPasswordComponent, TCloudUiInputSearchComponent, TCloudUiIpMaskDirective, TCloudUiLabelTokenComponent, TCloudUiLineStepCircleComponent, TCloudUiLineStepTitleComponent, TCloudUiLinhaLogoComponent, TCloudUiLoadingComponent, TCloudUiLoadingTransitionsService, TCloudUiModalBodyComponent, TCloudUiModalComponent, TCloudUiModalFooterComponent, TCloudUiModalHeaderComponent, TCloudUiModule, TCloudUiMultiInputComponent, TCloudUiMultiSelectComponent, TCloudUiMultiplesValuesComponent, TCloudUiNgCheckAccessDirective, TCloudUiNgFeatureFlagsDirective, TCloudUiNotFoundComponent, TCloudUiNumberStepComponent, TCloudUiProgressBarComponent, TCloudUiRangeDateComponent, TCloudUiReorderItemsComponent, TCloudUiScrollBoxComponent, TCloudUiSearchInObjectService, TCloudUiTabContentComponent, TCloudUiTabHeadComponent, TCloudUiTabMenuComponent, TCloudUiTabSubtitleComponent, TCloudUiTabTitleComponent, TCloudUiTableComponent, TCloudUiTooltipDirective, TCloudUiWelcomeComponent, TagColorsEnum, TcRevButtonDirective, TcRevCalendarComponent, TcRevCardAccordionComponent, TcRevCardComponent, TcRevCardTitleComponent, TcRevCheckboxDirective, TcRevComponentsLibModule, TcRevDropdownComponent, TcRevDropdownGroupedComponent, TcRevDropdownMultiComponent, TcRevDropdownMultiLevelComponent, TcRevEmptyContentComponent, TcRevFaqComponent, TcRevIconButtonDirective, TcRevInputContainerComponent, TcRevInputDirective, TcRevLoadingComponent, TcRevMessageComponent, TcRevMultiInputComponent, TcRevPaginationComponent, TcRevProgressStatusBarComponent, TcRevRadioDirective, TcRevSearchInputComponent, TcRevSideDrawerComponent, TcRevSkeletonLoadingComponent, TcRevSkeletonLoadingComponentStyle, TcRevSlideToggleDirective, TcRevSmallLoadingComponent, TcRevSmallLoadingComponentStyle, TcRevSubNavbarComponent, TcRevSubNavbarItemComponent, TcRevTabGroupComponent, TcRevTabItemComponent, TcRevTagComponent, TcRevToastComponent, TcRevTooltipDirective, TcRevWizardStepsComponent, ToTextPipe, echartBarConfig, isTextEllipsed, provideTCloudUi };
 //# sourceMappingURL=dev-tcloud-tcloud-ui.mjs.map