@dev-tcloud/tcloud-ui 5.3.7 → 5.3.8-beta.2

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Input, Output, Component, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, NgModule, forwardRef, ViewChild, Pipe, ViewEncapsulation, Directive, HostListener, Optional, Inject, signal, input, effect, computed, output, model, ChangeDetectionStrategy, ContentChildren, inject } from '@angular/core';
+import { Injectable, EventEmitter, Input, Output, Component, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, NgModule, forwardRef, ViewChild, Pipe, ViewEncapsulation, Directive, HostListener, Optional, Inject, signal, computed, input, effect, output, inject, model, 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';
@@ -6810,6 +6810,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                     args: ['ThemeService']
                 }] }] });
 
+class TCloudUiViewportService {
+    constructor() {
+        // Largura atual da viewport
+        this.widthScreen = signal(window.innerWidth);
+        // Breakpoints principais
+        this.DESKTOP_MIN = 480;
+        /** largura atual */
+        this.width = computed(() => this.widthScreen());
+        this.isDesktop = computed(() => this.width() > this.DESKTOP_MIN);
+        window.addEventListener('resize', () => {
+            this.widthScreen.set(window.innerWidth);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TCloudUiViewportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TCloudUiViewportService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TCloudUiViewportService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
 class TCloudUiModule {
     static forRoot(config) {
         return {
@@ -6817,7 +6840,8 @@ class TCloudUiModule {
             providers: [
                 { provide: 'TCloudUiConfig', useValue: config.data },
                 { provide: 'UserService', useExisting: config?.services?.userService },
-                { provide: 'ThemeService', useExisting: config?.services?.themeService }
+                { provide: 'ThemeService', useExisting: config?.services?.themeService },
+                { provide: 'Viewport', useExisting: config?.services?.viewportService }
             ]
         };
     }
@@ -6883,7 +6907,8 @@ class TCloudUiModule {
             TCloudUiLoadingTransitionsService,
             TCloudUiSearchInObjectService,
             TCloudUiCheckAccessService,
-            TCloudUiThemeService
+            TCloudUiThemeService,
+            TCloudUiViewportService
         ], imports: [TCloudUiModalModule,
             TCloudUiTabMenuModule,
             TCloudUiLinhaLogoModule,
@@ -7011,7 +7036,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         TCloudUiLoadingTransitionsService,
                         TCloudUiSearchInObjectService,
                         TCloudUiCheckAccessService,
-                        TCloudUiThemeService
+                        TCloudUiThemeService,
+                        TCloudUiViewportService
                     ]
                 }]
         }] });
@@ -7179,18 +7205,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
 
 class TcRevCardTitleComponent {
     constructor() {
+        this._viewPort = inject(TCloudUiViewportService);
         this.title = input.required();
+        this.isDesktop = this._viewPort.isDesktop;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevCardTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: TcRevCardTitleComponent, isStandalone: true, selector: "tc-rev-card-title", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"tc-rev-card-title c-neutral-700\">\n    <span class=\"tc-rev-card-title__icon w-40 h-40 f-size-18 bg-c-neutral-200 bor-rad-rounded\">\n        <ng-content select=\"[icon]\"></ng-content>\n    </span>\n\n    <h2 class=\"tc-rev-card-title__text f-h2 f-weight-700 mar-none\">{{title()}}</h2>\n\n    <ng-content></ng-content>\n</div>\n", styles: [":host{display:block}.tc-rev-card-title{align-items:center;display:flex;gap:var(--size-8);height:var(--size-40);max-height:var(--size-40);min-height:var(--size-40)}.tc-rev-card-title__icon{align-content:center;text-align:center}.tc-rev-card-title__text{cursor:default}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: TcRevCardTitleComponent, isStandalone: true, selector: "tc-rev-card-title", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"tc-rev-card-title c-neutral-700\">\n    <span class=\"tc-rev-card-title__icon w-40 h-40 f-size-18 bg-c-neutral-200 bor-rad-rounded\">\n        <ng-content select=\"[icon]\"></ng-content>\n    </span>\n\n    <h2 class=\"tc-rev-card-title__text f-h2 f-weight-700 mar-none\">{{title()}}</h2>\n\n    <ng-content></ng-content>\n</div>\n", styles: [":host{display:block}.tc-rev-card-title{align-items:center;display:flex;gap:var(--size-8);height:var(--size-40);max-height:var(--size-40);min-height:var(--size-40)}.tc-rev-card-title__icon{align-content:center;text-align:center;max-width:var(--size-40);min-width:var(--size-40);max-height:var(--size-40);min-height:var(--size-40)}.tc-rev-card-title__text{cursor:default}@media(max-width:480px){.tc-rev-card-title__icon{max-width:var(--size-32);min-width:var(--size-32);max-height:var(--size-32);min-height:var(--size-32);font-size:var(--f-size-16)}.tc-rev-card-title__text{font-size:var(--f-size-14);font-weight:var(--f-weight-500);text-transform:inherit}}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevCardTitleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tc-rev-card-title', imports: [], template: "<div class=\"tc-rev-card-title c-neutral-700\">\n    <span class=\"tc-rev-card-title__icon w-40 h-40 f-size-18 bg-c-neutral-200 bor-rad-rounded\">\n        <ng-content select=\"[icon]\"></ng-content>\n    </span>\n\n    <h2 class=\"tc-rev-card-title__text f-h2 f-weight-700 mar-none\">{{title()}}</h2>\n\n    <ng-content></ng-content>\n</div>\n", styles: [":host{display:block}.tc-rev-card-title{align-items:center;display:flex;gap:var(--size-8);height:var(--size-40);max-height:var(--size-40);min-height:var(--size-40)}.tc-rev-card-title__icon{align-content:center;text-align:center}.tc-rev-card-title__text{cursor:default}\n"] }]
+            args: [{ selector: 'tc-rev-card-title', imports: [], template: "<div class=\"tc-rev-card-title c-neutral-700\">\n    <span class=\"tc-rev-card-title__icon w-40 h-40 f-size-18 bg-c-neutral-200 bor-rad-rounded\">\n        <ng-content select=\"[icon]\"></ng-content>\n    </span>\n\n    <h2 class=\"tc-rev-card-title__text f-h2 f-weight-700 mar-none\">{{title()}}</h2>\n\n    <ng-content></ng-content>\n</div>\n", styles: [":host{display:block}.tc-rev-card-title{align-items:center;display:flex;gap:var(--size-8);height:var(--size-40);max-height:var(--size-40);min-height:var(--size-40)}.tc-rev-card-title__icon{align-content:center;text-align:center;max-width:var(--size-40);min-width:var(--size-40);max-height:var(--size-40);min-height:var(--size-40)}.tc-rev-card-title__text{cursor:default}@media(max-width:480px){.tc-rev-card-title__icon{max-width:var(--size-32);min-width:var(--size-32);max-height:var(--size-32);min-height:var(--size-32);font-size:var(--f-size-16)}.tc-rev-card-title__text{font-size:var(--f-size-14);font-weight:var(--f-weight-500);text-transform:inherit}}\n"] }]
         }] });
 
 class TcRevCardAccordionComponent {
     constructor() {
+        this._viewPort = inject(TCloudUiViewportService);
         this.toggle = output();
         this.title = input('');
         this.iconClass = input('fa-light fa-hard-drive');
@@ -7198,28 +7227,51 @@ class TcRevCardAccordionComponent {
         this.showLessText = input('Exibir menos');
         this.badge = input(null);
         this.isOpen = model();
+        this.isDesktop = this._viewPort.isDesktop;
     }
     toggleAccordion() {
-        this.isOpen.update(current => !current);
+        this.isOpen.update((current) => !current);
         this.toggle.emit(this.isOpen());
     }
+    /**
+     * APPLY FUNCTIONS RESPONSIVE < 500PX
+     */
+    get accordionExtraClasses() {
+        if (this.isDesktop()) {
+            return ['pad-16'];
+        }
+        //Responsive Classes
+        return ['pad-12'];
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevCardAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: TcRevCardAccordionComponent, isStandalone: true, selector: "tc-rev-card-accordion", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, iconClass: { classPropertyName: "iconClass", publicName: "iconClass", isSignal: true, isRequired: false, transformFunction: null }, showMoreText: { classPropertyName: "showMoreText", publicName: "showMoreText", isSignal: true, isRequired: false, transformFunction: null }, showLessText: { classPropertyName: "showLessText", publicName: "showLessText", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggle: "toggle", isOpen: "isOpenChange" }, ngImport: i0, template: "<div class=\"tc-rev-card-accordion tc-rev-card bg-c-neutral-50 pad-16 bor-xs bor-rad-16\">\n  <tc-rev-card-title [title]=\"title()\" [class]=\"isOpen() ? 'pad-b-16' : '' \">\n    <i [class]=\"iconClass()\" icon></i>\n\n    <div\n      *ngIf=\"badge()\"\n      class=\"f-size-12 f-weight-600 pad-x-4 pad-y-2 bor-xs bor-rad-xs mar-l-8\"\n      [ngClass]=\"badge()?.class\">\n      {{ badge()?.text }}\n    </div>\n\n    <button tcRevButton=\"outline\" color=\"dark\" size=\"sm\" class=\"mar-l-a\" (click)=\"toggleAccordion()\">\n      {{ isOpen() ? showLessText() : showMoreText() }}\n      <i class=\"fa-light\" [ngClass]=\"isOpen() ? 'fa-chevron-up' : 'fa-chevron-down'\"></i>\n    </button>\n  </tc-rev-card-title>\n  <ng-content *ngIf=\"isOpen()\"></ng-content>\n</div>\n", styles: [":host{display:block}.tc-rev-card-accordion{border-color:var(--c-neutral-400)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TcRevCardTitleComponent, selector: "tc-rev-card-title", inputs: ["title"] }, { kind: "directive", type: TcRevButtonDirective, selector: "button[tcRevButton]", inputs: ["color", "size", "fullWidth", "tcRevButton"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TcRevCardAccordionComponent, isStandalone: true, selector: "tc-rev-card-accordion", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, iconClass: { classPropertyName: "iconClass", publicName: "iconClass", isSignal: true, isRequired: false, transformFunction: null }, showMoreText: { classPropertyName: "showMoreText", publicName: "showMoreText", isSignal: true, isRequired: false, transformFunction: null }, showLessText: { classPropertyName: "showLessText", publicName: "showLessText", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggle: "toggle", isOpen: "isOpenChange" }, ngImport: i0, template: "<div class=\"tc-rev-card-accordion tc-rev-card bg-c-neutral-50  bor-xs bor-rad-16\"\n[ngClass]=\"accordionExtraClasses\"\n>\n  <tc-rev-card-title [title]=\"title()\" [class]=\"isOpen() ? 'pad-b-16' : '' \">\n    <i [class]=\"iconClass()\" icon></i>\n\n    <div\n      *ngIf=\"badge()\"\n      class=\"f-size-12 f-weight-600 pad-x-4 pad-y-2 bor-xs bor-rad-xs mar-l-8\"\n      [ngClass]=\"badge()?.class\">\n      {{ badge()?.text }}\n    </div>\n\n    @if(isDesktop()){\n      <button tcRevButton=\"outline\" color=\"dark\" size=\"sm\" class=\"mar-l-a\" (click)=\"toggleAccordion()\">\n        {{ isOpen() ? showLessText() : showMoreText() }}\n        <i class=\"fa-light\" [ngClass]=\"isOpen() ? 'fa-chevron-up' : 'fa-chevron-down'\"></i>\n      </button>\n    }\n\n    @if(!isDesktop()){\n      <button tcRevButton=\"link\" color=\"dark\" size=\"md\" (click)=\"toggleAccordion()\" class=\"tc-rev-card-accordion__arrow-mobile\">\n        <i class=\"fa-light\" [ngClass]=\"isOpen() ? 'fa-chevron-up' : 'fa-chevron-down'\"></i>\n      </button>\n    }\n\n  </tc-rev-card-title>\n  <ng-content *ngIf=\"isOpen()\"></ng-content>\n</div>\n", styles: [":host{display:block}.tc-rev-card-accordion{border-color:var(--c-neutral-400)}@media(max-width:480px){.tc-rev-card-accordion__arrow-mobile{font-size:var(--f-size-16)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TcRevCardTitleComponent, selector: "tc-rev-card-title", inputs: ["title"] }, { kind: "directive", type: TcRevButtonDirective, selector: "button[tcRevButton]", inputs: ["color", "size", "fullWidth", "tcRevButton"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevCardAccordionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tc-rev-card-accordion', imports: [CommonModule, TcRevCardTitleComponent, TcRevButtonDirective], template: "<div class=\"tc-rev-card-accordion tc-rev-card bg-c-neutral-50 pad-16 bor-xs bor-rad-16\">\n  <tc-rev-card-title [title]=\"title()\" [class]=\"isOpen() ? 'pad-b-16' : '' \">\n    <i [class]=\"iconClass()\" icon></i>\n\n    <div\n      *ngIf=\"badge()\"\n      class=\"f-size-12 f-weight-600 pad-x-4 pad-y-2 bor-xs bor-rad-xs mar-l-8\"\n      [ngClass]=\"badge()?.class\">\n      {{ badge()?.text }}\n    </div>\n\n    <button tcRevButton=\"outline\" color=\"dark\" size=\"sm\" class=\"mar-l-a\" (click)=\"toggleAccordion()\">\n      {{ isOpen() ? showLessText() : showMoreText() }}\n      <i class=\"fa-light\" [ngClass]=\"isOpen() ? 'fa-chevron-up' : 'fa-chevron-down'\"></i>\n    </button>\n  </tc-rev-card-title>\n  <ng-content *ngIf=\"isOpen()\"></ng-content>\n</div>\n", styles: [":host{display:block}.tc-rev-card-accordion{border-color:var(--c-neutral-400)}\n"] }]
+            args: [{ selector: 'tc-rev-card-accordion', imports: [CommonModule, TcRevCardTitleComponent, TcRevButtonDirective], template: "<div class=\"tc-rev-card-accordion tc-rev-card bg-c-neutral-50  bor-xs bor-rad-16\"\n[ngClass]=\"accordionExtraClasses\"\n>\n  <tc-rev-card-title [title]=\"title()\" [class]=\"isOpen() ? 'pad-b-16' : '' \">\n    <i [class]=\"iconClass()\" icon></i>\n\n    <div\n      *ngIf=\"badge()\"\n      class=\"f-size-12 f-weight-600 pad-x-4 pad-y-2 bor-xs bor-rad-xs mar-l-8\"\n      [ngClass]=\"badge()?.class\">\n      {{ badge()?.text }}\n    </div>\n\n    @if(isDesktop()){\n      <button tcRevButton=\"outline\" color=\"dark\" size=\"sm\" class=\"mar-l-a\" (click)=\"toggleAccordion()\">\n        {{ isOpen() ? showLessText() : showMoreText() }}\n        <i class=\"fa-light\" [ngClass]=\"isOpen() ? 'fa-chevron-up' : 'fa-chevron-down'\"></i>\n      </button>\n    }\n\n    @if(!isDesktop()){\n      <button tcRevButton=\"link\" color=\"dark\" size=\"md\" (click)=\"toggleAccordion()\" class=\"tc-rev-card-accordion__arrow-mobile\">\n        <i class=\"fa-light\" [ngClass]=\"isOpen() ? 'fa-chevron-up' : 'fa-chevron-down'\"></i>\n      </button>\n    }\n\n  </tc-rev-card-title>\n  <ng-content *ngIf=\"isOpen()\"></ng-content>\n</div>\n", styles: [":host{display:block}.tc-rev-card-accordion{border-color:var(--c-neutral-400)}@media(max-width:480px){.tc-rev-card-accordion__arrow-mobile{font-size:var(--f-size-16)}}\n"] }]
         }] });
 
 class TcRevCardComponent {
+    constructor() {
+        this._viewPort = inject(TCloudUiViewportService);
+        this.isDesktop = this._viewPort.isDesktop;
+    }
+    /**
+    * APPLY FUNCTIONS RESPONSIVE < 480PX
+    */
+    get extraClasses() {
+        if (this.isDesktop()) {
+            return ['shadow-md', 'pad-16'];
+        }
+        //Responsive Classes
+        return ['shadow-sm', 'pad-12'];
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TcRevCardComponent, isStandalone: true, selector: "tc-rev-card", ngImport: i0, template: "<div class=\"tc-rev-card bg-c-neutral-50 pad-16 bor-rad-16 shadow-md\">\n  <ng-content></ng-content>\n</div>", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TcRevCardComponent, isStandalone: true, selector: "tc-rev-card", ngImport: i0, template: "<div class=\"tc-rev-card bg-c-neutral-50 pad-16 bor-rad-16\"\n[ngClass]=\"extraClasses\"\n>\n  <ng-content></ng-content>\n</div>", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tc-rev-card', imports: [
-                        CommonModule,
-                    ], template: "<div class=\"tc-rev-card bg-c-neutral-50 pad-16 bor-rad-16 shadow-md\">\n  <ng-content></ng-content>\n</div>", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'tc-rev-card', imports: [CommonModule], template: "<div class=\"tc-rev-card bg-c-neutral-50 pad-16 bor-rad-16\"\n[ngClass]=\"extraClasses\"\n>\n  <ng-content></ng-content>\n</div>", styles: [":host{display:block}\n"] }]
         }] });
 
 class TcRevCheckboxDirective {