@dev-tcloud/tcloud-ui 5.3.7 → 5.3.8-beta
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/dev-tcloud-tcloud-ui.mjs +42 -10
- package/fesm2022/dev-tcloud-tcloud-ui.mjs.map +1 -1
- package/lib/_services/view-port.service.d.ts +11 -0
- package/lib/revitalizacao/components/tc-rev-card/tc-rev-card.component.d.ts +3 -0
- package/lib/revitalizacao/components/tc-rev-card-accordion/tc-rev-card-accordion.component.d.ts +3 -0
- package/lib/tcloud-ui.config.d.ts +1 -0
- package/package.json +1 -1
- package/scss/tcloud-revitalizacao/components/_tc-rev-util.scss +0 -5
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, EventEmitter, Input, Output, Component, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, NgModule, forwardRef, ViewChild, Pipe, ViewEncapsulation, Directive, HostListener, Optional, Inject, signal, input, effect,
|
|
2
|
+
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';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule, DatePipe, DOCUMENT } from '@angular/common';
|
|
5
5
|
import { Subject, Subscription, debounceTime, distinctUntilChanged, map, BehaviorSubject } from 'rxjs';
|
|
@@ -6810,6 +6810,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
6810
6810
|
args: ['ThemeService']
|
|
6811
6811
|
}] }] });
|
|
6812
6812
|
|
|
6813
|
+
class TCloudUiViewportService {
|
|
6814
|
+
constructor() {
|
|
6815
|
+
// Largura atual da viewport
|
|
6816
|
+
this.widthScreen = signal(window.innerWidth);
|
|
6817
|
+
// Breakpoints principais
|
|
6818
|
+
this.DESKTOP_MIN = 480;
|
|
6819
|
+
/** largura atual */
|
|
6820
|
+
this.width = computed(() => this.widthScreen());
|
|
6821
|
+
this.isDesktop = computed(() => this.width() > this.DESKTOP_MIN);
|
|
6822
|
+
window.addEventListener('resize', () => {
|
|
6823
|
+
this.widthScreen.set(window.innerWidth);
|
|
6824
|
+
});
|
|
6825
|
+
}
|
|
6826
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TCloudUiViewportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
6827
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TCloudUiViewportService, providedIn: 'root' }); }
|
|
6828
|
+
}
|
|
6829
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TCloudUiViewportService, decorators: [{
|
|
6830
|
+
type: Injectable,
|
|
6831
|
+
args: [{
|
|
6832
|
+
providedIn: 'root',
|
|
6833
|
+
}]
|
|
6834
|
+
}], ctorParameters: () => [] });
|
|
6835
|
+
|
|
6813
6836
|
class TCloudUiModule {
|
|
6814
6837
|
static forRoot(config) {
|
|
6815
6838
|
return {
|
|
@@ -6817,7 +6840,8 @@ class TCloudUiModule {
|
|
|
6817
6840
|
providers: [
|
|
6818
6841
|
{ provide: 'TCloudUiConfig', useValue: config.data },
|
|
6819
6842
|
{ provide: 'UserService', useExisting: config?.services?.userService },
|
|
6820
|
-
{ provide: 'ThemeService', useExisting: config?.services?.themeService }
|
|
6843
|
+
{ provide: 'ThemeService', useExisting: config?.services?.themeService },
|
|
6844
|
+
{ provide: 'Viewport', useExisting: config?.services?.viewportService }
|
|
6821
6845
|
]
|
|
6822
6846
|
};
|
|
6823
6847
|
}
|
|
@@ -6883,7 +6907,8 @@ class TCloudUiModule {
|
|
|
6883
6907
|
TCloudUiLoadingTransitionsService,
|
|
6884
6908
|
TCloudUiSearchInObjectService,
|
|
6885
6909
|
TCloudUiCheckAccessService,
|
|
6886
|
-
TCloudUiThemeService
|
|
6910
|
+
TCloudUiThemeService,
|
|
6911
|
+
TCloudUiViewportService
|
|
6887
6912
|
], imports: [TCloudUiModalModule,
|
|
6888
6913
|
TCloudUiTabMenuModule,
|
|
6889
6914
|
TCloudUiLinhaLogoModule,
|
|
@@ -7011,7 +7036,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
7011
7036
|
TCloudUiLoadingTransitionsService,
|
|
7012
7037
|
TCloudUiSearchInObjectService,
|
|
7013
7038
|
TCloudUiCheckAccessService,
|
|
7014
|
-
TCloudUiThemeService
|
|
7039
|
+
TCloudUiThemeService,
|
|
7040
|
+
TCloudUiViewportService
|
|
7015
7041
|
]
|
|
7016
7042
|
}]
|
|
7017
7043
|
}] });
|
|
@@ -7182,15 +7208,16 @@ class TcRevCardTitleComponent {
|
|
|
7182
7208
|
this.title = input.required();
|
|
7183
7209
|
}
|
|
7184
7210
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevCardTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7185
|
-
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
|
|
7211
|
+
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 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)}.tc-rev-card-title__text{font-size:var(--f-h3)}}\n"] }); }
|
|
7186
7212
|
}
|
|
7187
7213
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevCardTitleComponent, decorators: [{
|
|
7188
7214
|
type: Component,
|
|
7189
|
-
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
|
|
7215
|
+
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 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)}.tc-rev-card-title__text{font-size:var(--f-h3)}}\n"] }]
|
|
7190
7216
|
}] });
|
|
7191
7217
|
|
|
7192
7218
|
class TcRevCardAccordionComponent {
|
|
7193
7219
|
constructor() {
|
|
7220
|
+
this._viewPort = inject(TCloudUiViewportService);
|
|
7194
7221
|
this.toggle = output();
|
|
7195
7222
|
this.title = input('');
|
|
7196
7223
|
this.iconClass = input('fa-light fa-hard-drive');
|
|
@@ -7198,28 +7225,33 @@ class TcRevCardAccordionComponent {
|
|
|
7198
7225
|
this.showLessText = input('Exibir menos');
|
|
7199
7226
|
this.badge = input(null);
|
|
7200
7227
|
this.isOpen = model();
|
|
7228
|
+
this.isDesktop = this._viewPort.isDesktop;
|
|
7201
7229
|
}
|
|
7202
7230
|
toggleAccordion() {
|
|
7203
7231
|
this.isOpen.update(current => !current);
|
|
7204
7232
|
this.toggle.emit(this.isOpen());
|
|
7205
7233
|
}
|
|
7206
7234
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevCardAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7207
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
7235
|
+
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 pad-16 bor-xs bor-rad-16\" [class.is-open]=\"isOpen()\">\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 [class.mar-l-none]=\"!isDesktop()\"\n [class.mar-l-8]=\"isDesktop()\"\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=\"sm\" (click)=\"toggleAccordion()\">\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)}\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"] }] }); }
|
|
7208
7236
|
}
|
|
7209
7237
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevCardAccordionComponent, decorators: [{
|
|
7210
7238
|
type: Component,
|
|
7211
|
-
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
|
|
7239
|
+
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\" [class.is-open]=\"isOpen()\">\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 [class.mar-l-none]=\"!isDesktop()\"\n [class.mar-l-8]=\"isDesktop()\"\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=\"sm\" (click)=\"toggleAccordion()\">\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)}\n"] }]
|
|
7212
7240
|
}] });
|
|
7213
7241
|
|
|
7214
7242
|
class TcRevCardComponent {
|
|
7243
|
+
constructor() {
|
|
7244
|
+
this._viewPort = inject(TCloudUiViewportService);
|
|
7245
|
+
this.isDesktop = this._viewPort.isDesktop;
|
|
7246
|
+
}
|
|
7215
7247
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7216
|
-
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
|
|
7248
|
+
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[class.shadow-sm]=\"!isDesktop()\"\n[class.shadow-md]=\"isDesktop()\"\n>\n <ng-content></ng-content>\n</div>", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
7217
7249
|
}
|
|
7218
7250
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TcRevCardComponent, decorators: [{
|
|
7219
7251
|
type: Component,
|
|
7220
7252
|
args: [{ selector: 'tc-rev-card', imports: [
|
|
7221
7253
|
CommonModule,
|
|
7222
|
-
], template: "<div class=\"tc-rev-card bg-c-neutral-50 pad-16 bor-rad-16
|
|
7254
|
+
], template: "<div class=\"tc-rev-card bg-c-neutral-50 pad-16 bor-rad-16\"\n[class.shadow-sm]=\"!isDesktop()\"\n[class.shadow-md]=\"isDesktop()\"\n>\n <ng-content></ng-content>\n</div>", styles: [":host{display:block}\n"] }]
|
|
7223
7255
|
}] });
|
|
7224
7256
|
|
|
7225
7257
|
class TcRevCheckboxDirective {
|