@dev-tcloud/tcloud-ui 6.8.2 → 6.9.0
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 +209 -11
- package/fesm2022/dev-tcloud-tcloud-ui.mjs.map +1 -1
- package/lib/_directives/tcloud-ui-slide-toggle/tcloud-ui-slide-toggle.directive.d.ts +5 -0
- package/lib/_modules/tcloud-ui-calendar/tcloud-ui-calendar.component.d.ts +43 -0
- package/lib/_modules/tcloud-ui-loading/tcloud-ui-loading.component.d.ts +2 -1
- package/lib/_modules/tcloud-ui-wizard-steps/tcloud-ui-wizard-steps.component.d.ts +19 -0
- package/lib/tcloud-ui.module.d.ts +38 -35
- package/package.json +1 -1
- package/public-api.d.ts +6 -2
- package/scss/components/custom/_tcloud-ui-slide-toggle.scss +65 -0
- package/scss/components/styles.scss +3 -1
- /package/scss/{tcloud-ui/components → components/custom}/_tcloud-ui-checkbox.scss +0 -0
|
@@ -4644,6 +4644,7 @@ class TCloudUiLoadingComponent {
|
|
|
4644
4644
|
}
|
|
4645
4645
|
get loading() { return this._loading; }
|
|
4646
4646
|
constructor() {
|
|
4647
|
+
this.gif = 'totvs';
|
|
4647
4648
|
this._mode = '';
|
|
4648
4649
|
this.onlyInline = false;
|
|
4649
4650
|
this.onlyIcon = false;
|
|
@@ -4653,12 +4654,14 @@ class TCloudUiLoadingComponent {
|
|
|
4653
4654
|
ngOnInit() {
|
|
4654
4655
|
}
|
|
4655
4656
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4656
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: TCloudUiLoadingComponent, isStandalone: true, selector: "tcloud-ui-loading", inputs: { mode: "mode", onlyInline: "onlyInline", onlyIcon: "onlyIcon", full: "full", loading: "loading" }, ngImport: i0, template: "<ng-container *ngIf=\"onlyIcon || onlyInline\">\n <div *ngIf=\"onlyIcon && loading\" class=\"tcloud-ui-loading-only-icon\" [class.tc-mini-inline-block]=\"onlyIcon\">\n
|
|
4657
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: TCloudUiLoadingComponent, isStandalone: true, selector: "tcloud-ui-loading", inputs: { gif: "gif", mode: "mode", onlyInline: "onlyInline", onlyIcon: "onlyIcon", full: "full", loading: "loading" }, ngImport: i0, template: "<ng-container *ngIf=\"onlyIcon || onlyInline\">\n <div *ngIf=\"onlyIcon && loading\" class=\"tcloud-ui-loading-only-icon\" [class.tc-mini-inline-block]=\"onlyIcon\">\n <tcloud-ui-circle *ngIf=\"gif === 'circle'\" [onlyIcon]=\"onlyIcon\"></tcloud-ui-circle>\n <tcloud-ui-totvs *ngIf=\"gif === 'totvs'\" [onlyIcon]=\"onlyIcon\"></tcloud-ui-totvs>\n </div>\n\n <div *ngIf=\"onlyInline && loading\" class=\"tc-loading-box\">\n <div class=\"tcloud-ui-loading-only-icon tc-mini-inline-block\">\n <tcloud-ui-circle *ngIf=\"gif === 'circle'\" [onlyIcon]=\"true\"></tcloud-ui-circle>\n <tcloud-ui-totvs *ngIf=\"gif === 'totvs'\" [onlyIcon]=\"true\"></tcloud-ui-totvs>\n </div>\n </div>\n</ng-container>\n\n\n<ng-container *ngIf=\"!onlyIcon && !onlyInline\">\n <div *ngIf=\"full && loading\" class=\"tc-loading-full\">\n <div class=\"tc-state-loading-backdrop\"></div>\n <div class=\"tc-state-loading-main\">\n <div class=\"tc-state-loading-artifact\">\n\n <tcloud-ui-circle *ngIf=\"gif === 'circle'\" [full]=\"full\"></tcloud-ui-circle>\n <tcloud-ui-totvs *ngIf=\"gif === 'totvs'\" [full]=\"full\"></tcloud-ui-totvs>\n\n </div>\n </div>\n </div>\n\n <ng-container *ngIf=\"!full && loading\">\n <div class=\"tc-state-loading-backdrop\"></div>\n <div class=\"tc-state-loading-main\">\n <div class=\"tc-state-loading-artifact\">\n\n <tcloud-ui-circle *ngIf=\"gif === 'circle'\"></tcloud-ui-circle>\n <tcloud-ui-totvs *ngIf=\"gif === 'totvs'\"></tcloud-ui-totvs>\n\n </div>\n </div>\n </ng-container>\n</ng-container>", styles: [".tc-loading-full{width:100%;height:100%;position:fixed;background-color:#8b8d8e4d;left:0;top:0;z-index:1999;cursor:progress!important}.tc-state-loading-backdrop{z-index:1999;position:absolute;inset:0;background-color:#8b8d8e4d;cursor:progress!important}.tc-state-loading-artifact{width:80px;height:80px;position:absolute;inset:0;margin:auto;z-index:2000;cursor:progress!important}.tc-progress-loading{height:100vh;opacity:.1}.tc-mini-inline-block{display:inline-block}.tc-mini-inline-block tcloud-ui-circle{display:inline-block}.tc-loading-box{text-align:center;padding-top:.5rem;padding-bottom:.2rem}.tcloud-ui-loading-only-icon{cursor:progress!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TCloudUiCircleComponent, selector: "tcloud-ui-circle", inputs: ["full", "onlyIcon", "onlyInline"] }, { kind: "component", type: TCloudUiTotvsComponent, selector: "tcloud-ui-totvs", inputs: ["full", "onlyIcon", "onlyInline"] }] }); }
|
|
4657
4658
|
}
|
|
4658
4659
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiLoadingComponent, decorators: [{
|
|
4659
4660
|
type: Component,
|
|
4660
|
-
args: [{ selector: 'tcloud-ui-loading', standalone: true, imports: [CommonModule, TCloudUiCubesComponent, TCloudUiCircleComponent, TCloudUiTotvsComponent], template: "<ng-container *ngIf=\"onlyIcon || onlyInline\">\n <div *ngIf=\"onlyIcon && loading\" class=\"tcloud-ui-loading-only-icon\" [class.tc-mini-inline-block]=\"onlyIcon\">\n
|
|
4661
|
-
}], ctorParameters: () => [], propDecorators: {
|
|
4661
|
+
args: [{ selector: 'tcloud-ui-loading', standalone: true, imports: [CommonModule, TCloudUiCubesComponent, TCloudUiCircleComponent, TCloudUiTotvsComponent], template: "<ng-container *ngIf=\"onlyIcon || onlyInline\">\n <div *ngIf=\"onlyIcon && loading\" class=\"tcloud-ui-loading-only-icon\" [class.tc-mini-inline-block]=\"onlyIcon\">\n <tcloud-ui-circle *ngIf=\"gif === 'circle'\" [onlyIcon]=\"onlyIcon\"></tcloud-ui-circle>\n <tcloud-ui-totvs *ngIf=\"gif === 'totvs'\" [onlyIcon]=\"onlyIcon\"></tcloud-ui-totvs>\n </div>\n\n <div *ngIf=\"onlyInline && loading\" class=\"tc-loading-box\">\n <div class=\"tcloud-ui-loading-only-icon tc-mini-inline-block\">\n <tcloud-ui-circle *ngIf=\"gif === 'circle'\" [onlyIcon]=\"true\"></tcloud-ui-circle>\n <tcloud-ui-totvs *ngIf=\"gif === 'totvs'\" [onlyIcon]=\"true\"></tcloud-ui-totvs>\n </div>\n </div>\n</ng-container>\n\n\n<ng-container *ngIf=\"!onlyIcon && !onlyInline\">\n <div *ngIf=\"full && loading\" class=\"tc-loading-full\">\n <div class=\"tc-state-loading-backdrop\"></div>\n <div class=\"tc-state-loading-main\">\n <div class=\"tc-state-loading-artifact\">\n\n <tcloud-ui-circle *ngIf=\"gif === 'circle'\" [full]=\"full\"></tcloud-ui-circle>\n <tcloud-ui-totvs *ngIf=\"gif === 'totvs'\" [full]=\"full\"></tcloud-ui-totvs>\n\n </div>\n </div>\n </div>\n\n <ng-container *ngIf=\"!full && loading\">\n <div class=\"tc-state-loading-backdrop\"></div>\n <div class=\"tc-state-loading-main\">\n <div class=\"tc-state-loading-artifact\">\n\n <tcloud-ui-circle *ngIf=\"gif === 'circle'\"></tcloud-ui-circle>\n <tcloud-ui-totvs *ngIf=\"gif === 'totvs'\"></tcloud-ui-totvs>\n\n </div>\n </div>\n </ng-container>\n</ng-container>", styles: [".tc-loading-full{width:100%;height:100%;position:fixed;background-color:#8b8d8e4d;left:0;top:0;z-index:1999;cursor:progress!important}.tc-state-loading-backdrop{z-index:1999;position:absolute;inset:0;background-color:#8b8d8e4d;cursor:progress!important}.tc-state-loading-artifact{width:80px;height:80px;position:absolute;inset:0;margin:auto;z-index:2000;cursor:progress!important}.tc-progress-loading{height:100vh;opacity:.1}.tc-mini-inline-block{display:inline-block}.tc-mini-inline-block tcloud-ui-circle{display:inline-block}.tc-loading-box{text-align:center;padding-top:.5rem;padding-bottom:.2rem}.tcloud-ui-loading-only-icon{cursor:progress!important}\n"] }]
|
|
4662
|
+
}], ctorParameters: () => [], propDecorators: { gif: [{
|
|
4663
|
+
type: Input
|
|
4664
|
+
}], mode: [{
|
|
4662
4665
|
type: Input
|
|
4663
4666
|
}], onlyInline: [{
|
|
4664
4667
|
type: Input
|
|
@@ -6388,6 +6391,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
6388
6391
|
args: ['paste', ['$event']]
|
|
6389
6392
|
}] } });
|
|
6390
6393
|
|
|
6394
|
+
class TCloudUiSlideToggleDirective {
|
|
6395
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiSlideToggleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
6396
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: TCloudUiSlideToggleDirective, isStandalone: true, selector: "input[type=\"checkbox\"][tcloudUiSlideToggle]", host: { classAttribute: "tcloud-ui-slide-toggle" }, ngImport: i0 }); }
|
|
6397
|
+
}
|
|
6398
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiSlideToggleDirective, decorators: [{
|
|
6399
|
+
type: Directive,
|
|
6400
|
+
args: [{
|
|
6401
|
+
selector: 'input[type="checkbox"][tcloudUiSlideToggle]',
|
|
6402
|
+
host: {
|
|
6403
|
+
class: 'tcloud-ui-slide-toggle'
|
|
6404
|
+
}
|
|
6405
|
+
}]
|
|
6406
|
+
}] });
|
|
6407
|
+
|
|
6391
6408
|
[];
|
|
6392
6409
|
class TCloudUiPaginationService {
|
|
6393
6410
|
constructor() {
|
|
@@ -6798,6 +6815,139 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
6798
6815
|
args: [{ selector: 'tcloud-ui-card-accordion', imports: [CommonModule, TcRevCardTitleComponent, TcRevButtonDirective], template: "<div class=\"tcloud-ui-card-accordion tcloud-ui-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\"\n [ngClass]=\"badge()?.class\"\n [class.mar-l-8]=\"isDesktop()\"\n >\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=\"tcloud-ui-card-accordion__arrow-mobile mar-l-a\">\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}.tcloud-ui-card-accordion{border-color:var(--c-neutral-400)}@media(max-width:480px){.tcloud-ui-card-accordion__arrow-mobile{font-size:var(--f-size-16);padding:0 var(--size-6)}}\n"] }]
|
|
6799
6816
|
}] });
|
|
6800
6817
|
|
|
6818
|
+
class TCloudUiCalendarComponent {
|
|
6819
|
+
constructor() {
|
|
6820
|
+
this.appointments = []; // Updated to use the new type
|
|
6821
|
+
/** Active date format
|
|
6822
|
+
* @format YYYY-MM-DD
|
|
6823
|
+
* @example 2023-10-01
|
|
6824
|
+
*/
|
|
6825
|
+
this.activeDate = input();
|
|
6826
|
+
this.innerActiveDate = computed(() => {
|
|
6827
|
+
if (!this.activeDate())
|
|
6828
|
+
return '';
|
|
6829
|
+
const date = new Date(`${this.activeDate()} 00:00:00`);
|
|
6830
|
+
return date;
|
|
6831
|
+
});
|
|
6832
|
+
this.onSelectDate = output();
|
|
6833
|
+
this.currentDate = new Date();
|
|
6834
|
+
this.viewMode = 'days';
|
|
6835
|
+
this.yearOffset = 0; // Offset for year navigation
|
|
6836
|
+
// Fixed properties
|
|
6837
|
+
this.month = '';
|
|
6838
|
+
this.year = 0;
|
|
6839
|
+
this.daysOfWeek = [];
|
|
6840
|
+
this.calendarDays = [];
|
|
6841
|
+
this.calendarMonths = [];
|
|
6842
|
+
this.calendarYears = [];
|
|
6843
|
+
}
|
|
6844
|
+
ngOnInit() {
|
|
6845
|
+
this.updateMonth();
|
|
6846
|
+
this.updateYear();
|
|
6847
|
+
this.updateDaysOfWeek();
|
|
6848
|
+
this.updateCalendarDays();
|
|
6849
|
+
this.updateCalendarMonths();
|
|
6850
|
+
this.updateCalendarYears();
|
|
6851
|
+
}
|
|
6852
|
+
// Methods to update fixed properties
|
|
6853
|
+
updateMonth() {
|
|
6854
|
+
this.month = this.currentDate.toLocaleString('default', { month: 'long' });
|
|
6855
|
+
}
|
|
6856
|
+
updateYear() {
|
|
6857
|
+
this.year = this.currentDate.getFullYear();
|
|
6858
|
+
}
|
|
6859
|
+
updateDaysOfWeek() {
|
|
6860
|
+
this.daysOfWeek = ['D', 'S', 'T', 'Q', 'Q', 'S', 'S'];
|
|
6861
|
+
}
|
|
6862
|
+
updateCalendarDays() {
|
|
6863
|
+
const year = this.currentDate.getFullYear();
|
|
6864
|
+
const month = this.currentDate.getMonth();
|
|
6865
|
+
const firstDayOfMonth = new Date(year, month, 1);
|
|
6866
|
+
const lastDayOfMonth = new Date(year, month + 1, 0);
|
|
6867
|
+
const daysInLastMonth = firstDayOfMonth.getDay();
|
|
6868
|
+
const daysInCurrentMonth = lastDayOfMonth.getDate();
|
|
6869
|
+
const calendarDays = [];
|
|
6870
|
+
// Add last days of the previous month
|
|
6871
|
+
for (let i = daysInLastMonth - 1; i >= 0; i--) {
|
|
6872
|
+
const date = new Date(year, month, -i);
|
|
6873
|
+
calendarDays.push({ date, isCurrentMonth: false });
|
|
6874
|
+
}
|
|
6875
|
+
// Add all days of the current month
|
|
6876
|
+
for (let i = 1; i <= daysInCurrentMonth; i++) {
|
|
6877
|
+
const date = new Date(year, month, i);
|
|
6878
|
+
calendarDays.push({ date, isCurrentMonth: true });
|
|
6879
|
+
}
|
|
6880
|
+
// Add first days of the next month
|
|
6881
|
+
const remainingDays = 35 - calendarDays.length;
|
|
6882
|
+
for (let i = 1; i <= remainingDays; i++) {
|
|
6883
|
+
const date = new Date(year, month + 1, i);
|
|
6884
|
+
calendarDays.push({ date, isCurrentMonth: false });
|
|
6885
|
+
}
|
|
6886
|
+
this.calendarDays = calendarDays;
|
|
6887
|
+
console.log('calendarDays', this.calendarDays[16].date);
|
|
6888
|
+
}
|
|
6889
|
+
updateCalendarMonths() {
|
|
6890
|
+
this.calendarMonths = Array.from({ length: 12 }, (_, i) => new Date(this.year, i).toLocaleString('default', { month: 'long' }));
|
|
6891
|
+
}
|
|
6892
|
+
updateCalendarYears() {
|
|
6893
|
+
const startYear = this.year - 5 + this.yearOffset * 12;
|
|
6894
|
+
this.calendarYears = Array.from({ length: 12 }, (_, i) => startYear + i);
|
|
6895
|
+
}
|
|
6896
|
+
// Existing methods updated to call the update methods
|
|
6897
|
+
changeMonth(offset) {
|
|
6898
|
+
this.currentDate = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth() + offset, 1);
|
|
6899
|
+
this.updateMonth();
|
|
6900
|
+
this.updateYear();
|
|
6901
|
+
this.updateCalendarDays();
|
|
6902
|
+
}
|
|
6903
|
+
selectMonth(monthIndex) {
|
|
6904
|
+
this.currentDate = new Date(this.year, monthIndex, 1);
|
|
6905
|
+
this.viewMode = 'days';
|
|
6906
|
+
this.updateMonth();
|
|
6907
|
+
this.updateCalendarDays();
|
|
6908
|
+
}
|
|
6909
|
+
changeYearOffset(offset) {
|
|
6910
|
+
if (this.viewMode === 'months') {
|
|
6911
|
+
// Adjust the current date by adding or subtracting a year
|
|
6912
|
+
this.currentDate = new Date(this.currentDate.getFullYear() + offset, this.currentDate.getMonth(), 1);
|
|
6913
|
+
this.updateYear();
|
|
6914
|
+
this.updateCalendarMonths();
|
|
6915
|
+
}
|
|
6916
|
+
else if (this.viewMode === 'years') {
|
|
6917
|
+
// Adjust the year offset for the year view
|
|
6918
|
+
this.yearOffset += offset;
|
|
6919
|
+
this.updateCalendarYears();
|
|
6920
|
+
}
|
|
6921
|
+
}
|
|
6922
|
+
selectYear(year) {
|
|
6923
|
+
this.currentDate = new Date(year, this.currentDate.getMonth(), 1);
|
|
6924
|
+
this.viewMode = 'months';
|
|
6925
|
+
this.updateYear();
|
|
6926
|
+
this.updateCalendarMonths();
|
|
6927
|
+
}
|
|
6928
|
+
toggleViewMode(mode) {
|
|
6929
|
+
this.viewMode = mode;
|
|
6930
|
+
if (mode === 'years') {
|
|
6931
|
+
this.yearOffset = 0; // Reset year offset when entering year view
|
|
6932
|
+
this.updateCalendarYears();
|
|
6933
|
+
}
|
|
6934
|
+
}
|
|
6935
|
+
isAppointment(date) {
|
|
6936
|
+
const dateString = date.toISOString().split('T')[0];
|
|
6937
|
+
return this.appointments.find(appointment => appointment.appointmentDate === dateString);
|
|
6938
|
+
}
|
|
6939
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6940
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TCloudUiCalendarComponent, isStandalone: true, selector: "tcloud-ui-calendar", inputs: { appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: false, isRequired: false, transformFunction: null }, activeDate: { classPropertyName: "activeDate", publicName: "activeDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectDate: "onSelectDate" }, ngImport: i0, template: "<div class=\"tcloud-ui-calendar\">\n <div class=\"calendar-header\">\n <button class=\"prev-btn mar-r-a\" (click)=\"changeMonth(-1)\" *ngIf=\"viewMode === 'days'\"><i class=\"fa-light fa-chevron-left\"></i></button>\n <button class=\"prev-btn mar-r-a\" (click)=\"changeYearOffset(-1)\" *ngIf=\"viewMode === 'months' || viewMode === 'years'\"><i class=\"fa-light fa-chevron-left\"></i></button>\n @if (viewMode === 'days')\n {\n <span class=\"calendar-title date\" (click)=\"toggleViewMode('months')\">{{ month }} - </span>\n <span class=\"calendar-title date\" (click)=\"toggleViewMode('years')\">{{ year }}</span>\n }\n @else if (viewMode === 'months')\n {\n <span class=\"calendar-title\">Selecione o m\u00EAs</span>\n }\n @else if (viewMode === 'years')\n {\n <span class=\"calendar-title\">Selecione o ano</span>\n } \n <button class=\"next-btn mar-l-a\" (click)=\"changeYearOffset(1)\" *ngIf=\"viewMode === 'months' || viewMode === 'years'\"><i class=\"fa-light fa-chevron-right\"></i></button>\n <button class=\"next-btn mar-l-a\" (click)=\"changeMonth(1)\" *ngIf=\"viewMode === 'days'\"><i class=\"fa-light fa-chevron-right\"></i></button>\n </div>\n\n <div class=\"calendar-grid\" *ngIf=\"viewMode === 'days'\">\n <div class=\"day-header\" *ngFor=\"let day of daysOfWeek\">{{ day }}</div>\n <button\n *ngFor=\"let day of calendarDays\"\n class=\"day\"\n [class.selected]=\"day.date.valueOf() === innerActiveDate().valueOf()\"\n [class.current-month]=\"day.isCurrentMonth\"\n [title]=\"isAppointment(day.date)?.description ? isAppointment(day.date)?.description : ''\"\n (click)=\"onSelectDate.emit(day.date)\"\n >\n <span\n *ngIf=\"isAppointment(day.date)\"\n class=\"appointment-dot\"\n [ngClass]=\"'appointment-'+ isAppointment(day.date)?.type\"\n ></span>\n {{ day.date.getDate() }}\n </button>\n </div>\n\n <div class=\"calendar-grid months\" *ngIf=\"viewMode === 'months'\">\n <div\n class=\"month\"\n *ngFor=\"let month of calendarMonths; let i = index\"\n (click)=\"selectMonth(i)\"\n >\n {{ month }}\n </div>\n </div>\n\n <div class=\"calendar-grid years\" *ngIf=\"viewMode === 'years'\">\n <div\n class=\"year\"\n *ngFor=\"let year of calendarYears\"\n (click)=\"selectYear(year)\"\n >\n {{ year }}\n </div>\n </div>\n</div>\n", styles: [":host{display:block}.tcloud-ui-calendar{background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-16);color:var(--c-neutral-700);font-family:var(--f-family);min-height:274px;min-width:16.125rem;padding:var(--size-16)}.tcloud-ui-calendar .calendar-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:var(--size-16)}.tcloud-ui-calendar .calendar-header .prev-btn,.tcloud-ui-calendar .calendar-header .next-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-500);border-radius:var(--bor-radius-rounded);cursor:pointer;display:flex;justify-content:center;font-size:var(--f-size-14);height:var(--size-32);width:var(--size-32)}.tcloud-ui-calendar .calendar-header .calendar-title{cursor:default;font-size:var(--f-size-14);line-height:var(--l-height-20)}.tcloud-ui-calendar .calendar-header .calendar-title.date{cursor:pointer;text-transform:capitalize}.tcloud-ui-calendar .calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);justify-items:center}.tcloud-ui-calendar .calendar-grid.months{grid-template-columns:repeat(3,1fr);row-gap:10px}.tcloud-ui-calendar .calendar-grid.years{grid-template-columns:repeat(4,1fr);row-gap:10px}.tcloud-ui-calendar .day-header{cursor:default;font-size:var(--f-size-12);font-weight:var(--f-weight-700);line-height:var(--l-height-16);text-align:center;align-content:center;height:var(--size-32);width:var(--size-32)}.tcloud-ui-calendar .day{align-content:center;border-radius:var(--bor-radius-rounded);background:transparent;border:none;padding:0;cursor:default;font-size:var(--f-size-12);line-height:var(--l-height-16);position:relative;height:var(--size-32);text-align:center;transition:.1s ease;width:var(--size-32)}.tcloud-ui-calendar .day:hover,.tcloud-ui-calendar .day:focus{background-color:var(--c-neutral-100);color:var(--c-primary-500)}.tcloud-ui-calendar .day:active,.tcloud-ui-calendar .day.selected{background-color:var(--c-primary-300);color:var(--c-primary-500)}.tcloud-ui-calendar .day .appointment-dot{width:6px;height:6px;border-radius:50%;position:absolute;top:5px;right:5px}.tcloud-ui-calendar .day .appointment-dot.appointment-info{background-color:var(--c-info-500)}.tcloud-ui-calendar .day .appointment-dot.appointment-alert{background-color:var(--c-alert-500)}.tcloud-ui-calendar .day .appointment-dot.appointment-danger{background-color:var(--c-danger-500)}.tcloud-ui-calendar .day .appointment-dot.appointment-success{background-color:var(--c-success-500)}.tcloud-ui-calendar .month,.tcloud-ui-calendar .year{align-content:center;border:none;border-radius:var(--bor-radius-4);cursor:pointer;height:var(--size-32);text-align:center;text-transform:capitalize;transition:.1s ease;width:100%}.tcloud-ui-calendar .month:hover,.tcloud-ui-calendar .month:focus,.tcloud-ui-calendar .year:hover,.tcloud-ui-calendar .year:focus{background-color:var(--c-neutral-100);color:var(--c-primary-500)}.tcloud-ui-calendar .month:active,.tcloud-ui-calendar .year:active{background-color:var(--c-primary-300);color:var(--c-primary-500)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
6941
|
+
}
|
|
6942
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiCalendarComponent, decorators: [{
|
|
6943
|
+
type: Component,
|
|
6944
|
+
args: [{ selector: 'tcloud-ui-calendar', imports: [
|
|
6945
|
+
CommonModule,
|
|
6946
|
+
], template: "<div class=\"tcloud-ui-calendar\">\n <div class=\"calendar-header\">\n <button class=\"prev-btn mar-r-a\" (click)=\"changeMonth(-1)\" *ngIf=\"viewMode === 'days'\"><i class=\"fa-light fa-chevron-left\"></i></button>\n <button class=\"prev-btn mar-r-a\" (click)=\"changeYearOffset(-1)\" *ngIf=\"viewMode === 'months' || viewMode === 'years'\"><i class=\"fa-light fa-chevron-left\"></i></button>\n @if (viewMode === 'days')\n {\n <span class=\"calendar-title date\" (click)=\"toggleViewMode('months')\">{{ month }} - </span>\n <span class=\"calendar-title date\" (click)=\"toggleViewMode('years')\">{{ year }}</span>\n }\n @else if (viewMode === 'months')\n {\n <span class=\"calendar-title\">Selecione o m\u00EAs</span>\n }\n @else if (viewMode === 'years')\n {\n <span class=\"calendar-title\">Selecione o ano</span>\n } \n <button class=\"next-btn mar-l-a\" (click)=\"changeYearOffset(1)\" *ngIf=\"viewMode === 'months' || viewMode === 'years'\"><i class=\"fa-light fa-chevron-right\"></i></button>\n <button class=\"next-btn mar-l-a\" (click)=\"changeMonth(1)\" *ngIf=\"viewMode === 'days'\"><i class=\"fa-light fa-chevron-right\"></i></button>\n </div>\n\n <div class=\"calendar-grid\" *ngIf=\"viewMode === 'days'\">\n <div class=\"day-header\" *ngFor=\"let day of daysOfWeek\">{{ day }}</div>\n <button\n *ngFor=\"let day of calendarDays\"\n class=\"day\"\n [class.selected]=\"day.date.valueOf() === innerActiveDate().valueOf()\"\n [class.current-month]=\"day.isCurrentMonth\"\n [title]=\"isAppointment(day.date)?.description ? isAppointment(day.date)?.description : ''\"\n (click)=\"onSelectDate.emit(day.date)\"\n >\n <span\n *ngIf=\"isAppointment(day.date)\"\n class=\"appointment-dot\"\n [ngClass]=\"'appointment-'+ isAppointment(day.date)?.type\"\n ></span>\n {{ day.date.getDate() }}\n </button>\n </div>\n\n <div class=\"calendar-grid months\" *ngIf=\"viewMode === 'months'\">\n <div\n class=\"month\"\n *ngFor=\"let month of calendarMonths; let i = index\"\n (click)=\"selectMonth(i)\"\n >\n {{ month }}\n </div>\n </div>\n\n <div class=\"calendar-grid years\" *ngIf=\"viewMode === 'years'\">\n <div\n class=\"year\"\n *ngFor=\"let year of calendarYears\"\n (click)=\"selectYear(year)\"\n >\n {{ year }}\n </div>\n </div>\n</div>\n", styles: [":host{display:block}.tcloud-ui-calendar{background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-300);border-radius:var(--bor-radius-16);color:var(--c-neutral-700);font-family:var(--f-family);min-height:274px;min-width:16.125rem;padding:var(--size-16)}.tcloud-ui-calendar .calendar-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:var(--size-16)}.tcloud-ui-calendar .calendar-header .prev-btn,.tcloud-ui-calendar .calendar-header .next-btn{align-items:center;background-color:transparent;border:1px solid var(--c-neutral-500);border-radius:var(--bor-radius-rounded);cursor:pointer;display:flex;justify-content:center;font-size:var(--f-size-14);height:var(--size-32);width:var(--size-32)}.tcloud-ui-calendar .calendar-header .calendar-title{cursor:default;font-size:var(--f-size-14);line-height:var(--l-height-20)}.tcloud-ui-calendar .calendar-header .calendar-title.date{cursor:pointer;text-transform:capitalize}.tcloud-ui-calendar .calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);justify-items:center}.tcloud-ui-calendar .calendar-grid.months{grid-template-columns:repeat(3,1fr);row-gap:10px}.tcloud-ui-calendar .calendar-grid.years{grid-template-columns:repeat(4,1fr);row-gap:10px}.tcloud-ui-calendar .day-header{cursor:default;font-size:var(--f-size-12);font-weight:var(--f-weight-700);line-height:var(--l-height-16);text-align:center;align-content:center;height:var(--size-32);width:var(--size-32)}.tcloud-ui-calendar .day{align-content:center;border-radius:var(--bor-radius-rounded);background:transparent;border:none;padding:0;cursor:default;font-size:var(--f-size-12);line-height:var(--l-height-16);position:relative;height:var(--size-32);text-align:center;transition:.1s ease;width:var(--size-32)}.tcloud-ui-calendar .day:hover,.tcloud-ui-calendar .day:focus{background-color:var(--c-neutral-100);color:var(--c-primary-500)}.tcloud-ui-calendar .day:active,.tcloud-ui-calendar .day.selected{background-color:var(--c-primary-300);color:var(--c-primary-500)}.tcloud-ui-calendar .day .appointment-dot{width:6px;height:6px;border-radius:50%;position:absolute;top:5px;right:5px}.tcloud-ui-calendar .day .appointment-dot.appointment-info{background-color:var(--c-info-500)}.tcloud-ui-calendar .day .appointment-dot.appointment-alert{background-color:var(--c-alert-500)}.tcloud-ui-calendar .day .appointment-dot.appointment-danger{background-color:var(--c-danger-500)}.tcloud-ui-calendar .day .appointment-dot.appointment-success{background-color:var(--c-success-500)}.tcloud-ui-calendar .month,.tcloud-ui-calendar .year{align-content:center;border:none;border-radius:var(--bor-radius-4);cursor:pointer;height:var(--size-32);text-align:center;text-transform:capitalize;transition:.1s ease;width:100%}.tcloud-ui-calendar .month:hover,.tcloud-ui-calendar .month:focus,.tcloud-ui-calendar .year:hover,.tcloud-ui-calendar .year:focus{background-color:var(--c-neutral-100);color:var(--c-primary-500)}.tcloud-ui-calendar .month:active,.tcloud-ui-calendar .year:active{background-color:var(--c-primary-300);color:var(--c-primary-500)}\n"] }]
|
|
6947
|
+
}], propDecorators: { appointments: [{
|
|
6948
|
+
type: Input
|
|
6949
|
+
}] } });
|
|
6950
|
+
|
|
6801
6951
|
/**
|
|
6802
6952
|
* Verifica se um elemento de texto está elipsado (texto cortado com ...)
|
|
6803
6953
|
* @param element - O elemento HTML que contém o texto
|
|
@@ -7537,6 +7687,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
7537
7687
|
], template: "<a\n *ngIf=\"this.url()\"\n class=\"tcloud-ui-tab-item\"\n [class.disabled]=\"this.disabled()\"\n [class.full-width]=\"this.fullWidth()\"\n [routerLinkActive]=\"'active'\"\n [routerLink]=\"[this.url()]\"\n (click)=\"this.onClick.emit($event)\">\n <ng-container *ngTemplateOutlet=\"content\" />\n</a>\n\n\n<button\n *ngIf=\"!this.url()\"\n class=\"tcloud-ui-tab-item\"\n [class.active]=\"this.active()\"\n [class.full-width]=\"this.fullWidth()\"\n [disabled]=\"this.disabled()\"\n (click)=\"this.onClick.emit($event)\">\n <ng-container *ngTemplateOutlet=\"content\" />\n</button>\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n\n", styles: [":host{display:block}.tcloud-ui-tab-item,.tcloud-ui-tab-item:link{align-items:center;background-color:var(--c-neutral-50);border:var(--bor-size-1) solid var(--c-neutral-400);border-radius:var(--bor-radius-8);color:var(--c-neutral-700);cursor:pointer;display:inline-flex;font-family:var(--f-family);font-size:var(--f-size-14);font-weight:600;gap:var(--size-8);height:var(--size-40);line-height:var(--l-height-20);justify-content:center;padding:0 var(--size-16);text-decoration:none;text-wrap:nowrap;transition:all .2s ease}.tcloud-ui-tab-item.full-width,.tcloud-ui-tab-item:link.full-width{width:100%}.tcloud-ui-tab-item:hover,.tcloud-ui-tab-item:focus,.tcloud-ui-tab-item:link:hover,.tcloud-ui-tab-item:link:focus{background-color:var(--c-neutral-200);border-color:var(--c-neutral-200);color:var(--c-primary-500);font-weight:600}.tcloud-ui-tab-item:active,.tcloud-ui-tab-item.selected,.tcloud-ui-tab-item.active,.tcloud-ui-tab-item:link:active,.tcloud-ui-tab-item:link.selected,.tcloud-ui-tab-item:link.active{background-color:var(--c-primary-300);border-color:var(--c-primary-500);color:var(--c-primary-500);font-weight:600}.tcloud-ui-tab-item:disabled,.tcloud-ui-tab-item.disabled,.tcloud-ui-tab-item:link:disabled,.tcloud-ui-tab-item:link.disabled{background-color:var(--c-neutral-50);border-color:var(--c-neutral-50);color:var(--c-neutral-400);cursor:not-allowed;font-weight:var(--f-weight-400);pointer-events:none}@media(max-width:480px){:host{display:contents}:host .tcloud-ui-tab-item{width:100%}}\n"] }]
|
|
7538
7688
|
}] });
|
|
7539
7689
|
|
|
7690
|
+
class TCloudUiWizardStepsComponent {
|
|
7691
|
+
constructor() {
|
|
7692
|
+
this.onStepClick = output();
|
|
7693
|
+
this.direction = input('horizontal');
|
|
7694
|
+
this.currentStep = input(0);
|
|
7695
|
+
this.stepClickable = input(false);
|
|
7696
|
+
this.steps = input.required();
|
|
7697
|
+
}
|
|
7698
|
+
handleStepClick(step, isNext, index) {
|
|
7699
|
+
if (this.stepClickable() && !isNext) {
|
|
7700
|
+
this.onStepClick.emit({ step, index });
|
|
7701
|
+
}
|
|
7702
|
+
}
|
|
7703
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiWizardStepsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7704
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TCloudUiWizardStepsComponent, isStandalone: true, selector: "tcloud-ui-wizard-steps", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, currentStep: { classPropertyName: "currentStep", publicName: "currentStep", isSignal: true, isRequired: false, transformFunction: null }, stepClickable: { classPropertyName: "stepClickable", publicName: "stepClickable", isSignal: true, isRequired: false, transformFunction: null }, steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onStepClick: "onStepClick" }, ngImport: i0, template: "<div [class]=\"'tcloud-ui-wizard-steps' + ` tcloud-ui-wizard-steps--${this.direction()}`\">\n @for (step of this.steps(); let i = $index; track step.title + i) {\n @let isCompleted = step.completed || i + 1 < this.currentStep();\n @let isNext = i + 1 > this.currentStep();\n <div\n class=\"tcloud-ui-wizard-step\"\n [class.tcloud-ui-wizard-step--current]=\"i + 1 === this.currentStep()\"\n [class.tcloud-ui-wizard-step--completed]=\"isCompleted\"\n [class.tcloud-ui-wizard-step--next]=\"isNext\">\n\n <span\n class=\"tcloud-ui-wizard-step__counter f-h3\"\n [class.cursor-default]=\"!this.stepClickable()\"\n [class.cursor-pointer]=\"this.stepClickable() && !isNext\"\n (click)=\"this.handleStepClick(step, isNext, i)\">\n @if (isCompleted) {\n <i class=\"fas fa-check\"></i>\n }\n @else {\n {{ i + 1 }}\n }\n </span>\n\n <div class=\"tcloud-ui-wizard-step__info\">\n <p class=\"tcloud-ui-wizard-step__title f-lg mar-none cursor-default\">\n {{ step.title }}\n </p>\n\n @if (step.description) {\n <p class=\"tcloud-ui-wizard-step__description f-sm mar-none cursor-default\">\n {{ step.description }}\n </p>\n }\n </div>\n </div>\n }\n</div>\n\n<!-- VERS\u00C3O COM DIVISOR -->\n<!-- <div [class]=\"'tcloud-ui-wizard-steps' + ` tcloud-ui-wizard-steps--${this.direction()}`\">\n @for (step of this.steps(); let i = $index; let last = $last; track step.title + i) {\n @let isCompleted = step.completed || i + 1 < this.currentStep();\n\n <div\n class=\"tcloud-ui-wizard-step\"\n [class.tcloud-ui-wizard-step--current]=\"i + 1 === this.currentStep()\"\n [class.tcloud-ui-wizard-step--completed]=\"isCompleted\"\n [class.tcloud-ui-wizard-step--next]=\"i + 1 > this.currentStep()\"\n [ngClass]=\"this.direction()\">\n\n <span class=\"tcloud-ui-wizard-step__counter f-h3 cursor-default\">\n {{ i + 1 }}\n </span>\n\n <div class=\"tcloud-ui-wizard-step__info\">\n <p class=\"tcloud-ui-wizard-step__title f-lg mar-none cursor-default\">\n {{ step.title }}\n </p>\n\n @if (step.description) {\n <p class=\"tcloud-ui-wizard-step__description f-sm mar-none cursor-default\">\n {{ step.description }}\n </p>\n }\n </div>\n </div>\n\n @if (this.steps().length > i && !last) {\n <div\n class=\"tcloud-ui-wizard-step-divider\"\n [class.completed]=\"isCompleted\"\n [ngClass]=\"this.direction()\">\n </div>\n }\n }\n</div> -->\n", styles: [":host{display:block}.tcloud-ui-wizard-steps{display:inline-flex;font-family:var(--f-family);gap:var(--size-32)}.tcloud-ui-wizard-steps--horizontal{flex-direction:row}.tcloud-ui-wizard-steps--vertical{flex-direction:column}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step{display:flex;gap:var(--size-8)}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step__info{max-width:13.25rem}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step__counter{align-items:center;border:1px solid;border-radius:var(--bor-radius-rounded);display:flex;height:var(--size-40);justify-content:center;width:var(--size-40);transition:all .3s ease;min-height:var(--size-40);min-width:var(--size-40)}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step--completed .tcloud-ui-wizard-step__counter{border-color:1px solid var(--c-primary-600);color:var(--c-neutral-600)}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step--completed .tcloud-ui-wizard-step__title{color:var(--c-neutral-600);font-weight:var(--f-weight-400)}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step--completed .tcloud-ui-wizard-step__description{color:var(--c-neutral-600)}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step--current .tcloud-ui-wizard-step__counter{background-color:var(--c-primary-500);border-color:var(--c-primary-500);color:var(--c-neutral-50)}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step--current .tcloud-ui-wizard-step__title{color:var(--c-neutral-700);font-weight:var(--f-weight-600)}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step--current .tcloud-ui-wizard-step__description{color:var(--c-neutral-700);font-weight:var(--f-weight-400)}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step--next .tcloud-ui-wizard-step__counter{border-color:var(--c-neutral-400);color:var(--c-neutral-400)}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step--next .tcloud-ui-wizard-step__title{color:var(--c-neutral-400);font-weight:var(--f-weight-400)}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step--next .tcloud-ui-wizard-step__description{color:var(--c-neutral-400)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], animations: [
|
|
7705
|
+
trigger('progressBarEntering', [
|
|
7706
|
+
state('in', style({ width: '*' })),
|
|
7707
|
+
transition('void => *', [
|
|
7708
|
+
style({ width: 0 }),
|
|
7709
|
+
animate('1.5s 0s ease')
|
|
7710
|
+
])
|
|
7711
|
+
])
|
|
7712
|
+
] }); }
|
|
7713
|
+
}
|
|
7714
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiWizardStepsComponent, decorators: [{
|
|
7715
|
+
type: Component,
|
|
7716
|
+
args: [{ selector: 'tcloud-ui-wizard-steps', imports: [CommonModule], animations: [
|
|
7717
|
+
trigger('progressBarEntering', [
|
|
7718
|
+
state('in', style({ width: '*' })),
|
|
7719
|
+
transition('void => *', [
|
|
7720
|
+
style({ width: 0 }),
|
|
7721
|
+
animate('1.5s 0s ease')
|
|
7722
|
+
])
|
|
7723
|
+
])
|
|
7724
|
+
], template: "<div [class]=\"'tcloud-ui-wizard-steps' + ` tcloud-ui-wizard-steps--${this.direction()}`\">\n @for (step of this.steps(); let i = $index; track step.title + i) {\n @let isCompleted = step.completed || i + 1 < this.currentStep();\n @let isNext = i + 1 > this.currentStep();\n <div\n class=\"tcloud-ui-wizard-step\"\n [class.tcloud-ui-wizard-step--current]=\"i + 1 === this.currentStep()\"\n [class.tcloud-ui-wizard-step--completed]=\"isCompleted\"\n [class.tcloud-ui-wizard-step--next]=\"isNext\">\n\n <span\n class=\"tcloud-ui-wizard-step__counter f-h3\"\n [class.cursor-default]=\"!this.stepClickable()\"\n [class.cursor-pointer]=\"this.stepClickable() && !isNext\"\n (click)=\"this.handleStepClick(step, isNext, i)\">\n @if (isCompleted) {\n <i class=\"fas fa-check\"></i>\n }\n @else {\n {{ i + 1 }}\n }\n </span>\n\n <div class=\"tcloud-ui-wizard-step__info\">\n <p class=\"tcloud-ui-wizard-step__title f-lg mar-none cursor-default\">\n {{ step.title }}\n </p>\n\n @if (step.description) {\n <p class=\"tcloud-ui-wizard-step__description f-sm mar-none cursor-default\">\n {{ step.description }}\n </p>\n }\n </div>\n </div>\n }\n</div>\n\n<!-- VERS\u00C3O COM DIVISOR -->\n<!-- <div [class]=\"'tcloud-ui-wizard-steps' + ` tcloud-ui-wizard-steps--${this.direction()}`\">\n @for (step of this.steps(); let i = $index; let last = $last; track step.title + i) {\n @let isCompleted = step.completed || i + 1 < this.currentStep();\n\n <div\n class=\"tcloud-ui-wizard-step\"\n [class.tcloud-ui-wizard-step--current]=\"i + 1 === this.currentStep()\"\n [class.tcloud-ui-wizard-step--completed]=\"isCompleted\"\n [class.tcloud-ui-wizard-step--next]=\"i + 1 > this.currentStep()\"\n [ngClass]=\"this.direction()\">\n\n <span class=\"tcloud-ui-wizard-step__counter f-h3 cursor-default\">\n {{ i + 1 }}\n </span>\n\n <div class=\"tcloud-ui-wizard-step__info\">\n <p class=\"tcloud-ui-wizard-step__title f-lg mar-none cursor-default\">\n {{ step.title }}\n </p>\n\n @if (step.description) {\n <p class=\"tcloud-ui-wizard-step__description f-sm mar-none cursor-default\">\n {{ step.description }}\n </p>\n }\n </div>\n </div>\n\n @if (this.steps().length > i && !last) {\n <div\n class=\"tcloud-ui-wizard-step-divider\"\n [class.completed]=\"isCompleted\"\n [ngClass]=\"this.direction()\">\n </div>\n }\n }\n</div> -->\n", styles: [":host{display:block}.tcloud-ui-wizard-steps{display:inline-flex;font-family:var(--f-family);gap:var(--size-32)}.tcloud-ui-wizard-steps--horizontal{flex-direction:row}.tcloud-ui-wizard-steps--vertical{flex-direction:column}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step{display:flex;gap:var(--size-8)}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step__info{max-width:13.25rem}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step__counter{align-items:center;border:1px solid;border-radius:var(--bor-radius-rounded);display:flex;height:var(--size-40);justify-content:center;width:var(--size-40);transition:all .3s ease;min-height:var(--size-40);min-width:var(--size-40)}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step--completed .tcloud-ui-wizard-step__counter{border-color:1px solid var(--c-primary-600);color:var(--c-neutral-600)}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step--completed .tcloud-ui-wizard-step__title{color:var(--c-neutral-600);font-weight:var(--f-weight-400)}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step--completed .tcloud-ui-wizard-step__description{color:var(--c-neutral-600)}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step--current .tcloud-ui-wizard-step__counter{background-color:var(--c-primary-500);border-color:var(--c-primary-500);color:var(--c-neutral-50)}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step--current .tcloud-ui-wizard-step__title{color:var(--c-neutral-700);font-weight:var(--f-weight-600)}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step--current .tcloud-ui-wizard-step__description{color:var(--c-neutral-700);font-weight:var(--f-weight-400)}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step--next .tcloud-ui-wizard-step__counter{border-color:var(--c-neutral-400);color:var(--c-neutral-400)}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step--next .tcloud-ui-wizard-step__title{color:var(--c-neutral-400);font-weight:var(--f-weight-400)}.tcloud-ui-wizard-steps .tcloud-ui-wizard-step--next .tcloud-ui-wizard-step__description{color:var(--c-neutral-400)}\n"] }]
|
|
7725
|
+
}] });
|
|
7726
|
+
|
|
7540
7727
|
const COMPONENTS = [
|
|
7541
7728
|
TCloudUiAccordionComponent,
|
|
7542
7729
|
TCloudUiAccordionBodyComponent,
|
|
@@ -7584,6 +7771,7 @@ const COMPONENTS = [
|
|
|
7584
7771
|
TCloudUiCardComponent,
|
|
7585
7772
|
TCloudUiCardTitleComponent,
|
|
7586
7773
|
TCloudUiCardAccordionComponent,
|
|
7774
|
+
TCloudUiCalendarComponent,
|
|
7587
7775
|
TCloudUiDropdownComponent,
|
|
7588
7776
|
TCloudUiDropdownMultiComponent,
|
|
7589
7777
|
TCloudUiEmptyContentComponent,
|
|
@@ -7594,7 +7782,8 @@ const COMPONENTS = [
|
|
|
7594
7782
|
TCloudUiSubNavbarComponent,
|
|
7595
7783
|
TCloudUiSubNavbarItemComponent,
|
|
7596
7784
|
TCloudUiTabGroupComponent,
|
|
7597
|
-
TCloudUiTabItemComponent
|
|
7785
|
+
TCloudUiTabItemComponent,
|
|
7786
|
+
TCloudUiWizardStepsComponent
|
|
7598
7787
|
];
|
|
7599
7788
|
const DIRECTIVES = [
|
|
7600
7789
|
TCloudUiAlignDirective,
|
|
@@ -7610,7 +7799,8 @@ const DIRECTIVES = [
|
|
|
7610
7799
|
TCloudUiHighLightDirective,
|
|
7611
7800
|
TCloudUiIpMaskDirective,
|
|
7612
7801
|
TCloudUiButtonDirective,
|
|
7613
|
-
TCloudUiFormDirective
|
|
7802
|
+
TCloudUiFormDirective,
|
|
7803
|
+
TCloudUiSlideToggleDirective
|
|
7614
7804
|
];
|
|
7615
7805
|
const PIPES = [
|
|
7616
7806
|
ToTextPipe,
|
|
@@ -7693,6 +7883,7 @@ class TCloudUiModule {
|
|
|
7693
7883
|
TCloudUiCardComponent,
|
|
7694
7884
|
TCloudUiCardTitleComponent,
|
|
7695
7885
|
TCloudUiCardAccordionComponent,
|
|
7886
|
+
TCloudUiCalendarComponent,
|
|
7696
7887
|
TCloudUiDropdownComponent,
|
|
7697
7888
|
TCloudUiDropdownMultiComponent,
|
|
7698
7889
|
TCloudUiEmptyContentComponent,
|
|
@@ -7703,7 +7894,8 @@ class TCloudUiModule {
|
|
|
7703
7894
|
TCloudUiSubNavbarComponent,
|
|
7704
7895
|
TCloudUiSubNavbarItemComponent,
|
|
7705
7896
|
TCloudUiTabGroupComponent,
|
|
7706
|
-
TCloudUiTabItemComponent,
|
|
7897
|
+
TCloudUiTabItemComponent,
|
|
7898
|
+
TCloudUiWizardStepsComponent, TCloudUiAlignDirective,
|
|
7707
7899
|
TCloudUiCheckboxDirective,
|
|
7708
7900
|
TCloudUiCurrencyDirective,
|
|
7709
7901
|
TCloudUiElCopyDirective,
|
|
@@ -7716,7 +7908,8 @@ class TCloudUiModule {
|
|
|
7716
7908
|
TCloudUiHighLightDirective,
|
|
7717
7909
|
TCloudUiIpMaskDirective,
|
|
7718
7910
|
TCloudUiButtonDirective,
|
|
7719
|
-
TCloudUiFormDirective,
|
|
7911
|
+
TCloudUiFormDirective,
|
|
7912
|
+
TCloudUiSlideToggleDirective, ToTextPipe,
|
|
7720
7913
|
BytesPipe,
|
|
7721
7914
|
CNPJPipe,
|
|
7722
7915
|
CPFPipe,
|
|
@@ -7770,6 +7963,7 @@ class TCloudUiModule {
|
|
|
7770
7963
|
TCloudUiCardComponent,
|
|
7771
7964
|
TCloudUiCardTitleComponent,
|
|
7772
7965
|
TCloudUiCardAccordionComponent,
|
|
7966
|
+
TCloudUiCalendarComponent,
|
|
7773
7967
|
TCloudUiDropdownComponent,
|
|
7774
7968
|
TCloudUiDropdownMultiComponent,
|
|
7775
7969
|
TCloudUiEmptyContentComponent,
|
|
@@ -7780,7 +7974,8 @@ class TCloudUiModule {
|
|
|
7780
7974
|
TCloudUiSubNavbarComponent,
|
|
7781
7975
|
TCloudUiSubNavbarItemComponent,
|
|
7782
7976
|
TCloudUiTabGroupComponent,
|
|
7783
|
-
TCloudUiTabItemComponent,
|
|
7977
|
+
TCloudUiTabItemComponent,
|
|
7978
|
+
TCloudUiWizardStepsComponent, TCloudUiAlignDirective,
|
|
7784
7979
|
TCloudUiCheckboxDirective,
|
|
7785
7980
|
TCloudUiCurrencyDirective,
|
|
7786
7981
|
TCloudUiElCopyDirective,
|
|
@@ -7793,7 +7988,8 @@ class TCloudUiModule {
|
|
|
7793
7988
|
TCloudUiHighLightDirective,
|
|
7794
7989
|
TCloudUiIpMaskDirective,
|
|
7795
7990
|
TCloudUiButtonDirective,
|
|
7796
|
-
TCloudUiFormDirective,
|
|
7991
|
+
TCloudUiFormDirective,
|
|
7992
|
+
TCloudUiSlideToggleDirective, ToTextPipe,
|
|
7797
7993
|
BytesPipe,
|
|
7798
7994
|
CNPJPipe,
|
|
7799
7995
|
CPFPipe,
|
|
@@ -7848,6 +8044,7 @@ class TCloudUiModule {
|
|
|
7848
8044
|
TCloudUiPaginationComponent,
|
|
7849
8045
|
TCloudUiCardComponent,
|
|
7850
8046
|
TCloudUiCardAccordionComponent,
|
|
8047
|
+
TCloudUiCalendarComponent,
|
|
7851
8048
|
TCloudUiDropdownComponent,
|
|
7852
8049
|
TCloudUiDropdownMultiComponent,
|
|
7853
8050
|
TCloudUiFaqComponent,
|
|
@@ -7857,7 +8054,8 @@ class TCloudUiModule {
|
|
|
7857
8054
|
TCloudUiSubNavbarComponent,
|
|
7858
8055
|
TCloudUiSubNavbarItemComponent,
|
|
7859
8056
|
TCloudUiTabGroupComponent,
|
|
7860
|
-
TCloudUiTabItemComponent
|
|
8057
|
+
TCloudUiTabItemComponent,
|
|
8058
|
+
TCloudUiWizardStepsComponent] }); }
|
|
7861
8059
|
}
|
|
7862
8060
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiModule, decorators: [{
|
|
7863
8061
|
type: NgModule,
|
|
@@ -9868,5 +10066,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
9868
10066
|
* Generated bundle index. Do not edit.
|
|
9869
10067
|
*/
|
|
9870
10068
|
|
|
9871
|
-
export { BytesPipe, CNPJPipe, CPFPipe, CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1 as CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, DateBRPipe, DropdownGroupedSize, DropdownMultiSize$1 as DropdownMultiSize, DropdownSize$1 as 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, TCloudUiBreadcrumbComponent, TCloudUiBreadcrumbService, TCloudUiButtonDirective, TCloudUiCardAccordionComponent, TCloudUiCardComponent, TCloudUiCardTitleComponent, TCloudUiCheckAccessDirective, TCloudUiCheckAccessService, TCloudUiCheckboxDirective, TCloudUiChoiceIssuesComponent, TCloudUiContainerColComponent, TCloudUiContainerComponent, TCloudUiContainerContentComponent, TCloudUiCubesComponent, TCloudUiCurrencyDirective, TCloudUiDataListComponent, TCloudUiDataListOptionComponent, TCloudUiDatepickerComponent, TCloudUiDatepickerTimeComponent, TCloudUiDigitOnlyDirective, TCloudUiDropdownComponent, TCloudUiDropdownMultiComponent, TCloudUiElCopyDirective, TCloudUiEmptyContentComponent, TCloudUiFaqComponent, TCloudUiFiltersComponent, TCloudUiFormDirective, TCloudUiHighLightDirective, TCloudUiHoverParentDirective, TCloudUiInputContainerComponent, TCloudUiInputPasswordComponent, TCloudUiInputSearchComponent, TCloudUiIpMaskDirective, TCloudUiLabelTokenComponent, TCloudUiLineStepCircleComponent, TCloudUiLineStepTitleComponent, TCloudUiLinhaLogoComponent, TCloudUiLoadingComponent, TCloudUiLoadingTransitionsService, TCloudUiMessageComponent, TCloudUiModalBodyComponent, TCloudUiModalComponent, TCloudUiModalFooterComponent, TCloudUiModalHeaderComponent, TCloudUiModule, TCloudUiMultiInputComponent, TCloudUiMultiSelectComponent, TCloudUiMultiplesValuesComponent, TCloudUiNgCheckAccessDirective, TCloudUiNgFeatureFlagsDirective, TCloudUiNotFoundComponent, TCloudUiNumberStepComponent, TCloudUiPaginationComponent, TCloudUiPaginationPipe, TCloudUiProgressBarComponent, TCloudUiRangeDateComponent, TCloudUiReorderItemsComponent, TCloudUiScrollBoxComponent, TCloudUiSearchInObjectService, TCloudUiSkeletonLoadingComponent, TCloudUiSkeletonLoadingComponentStyle, TCloudUiSubNavbarComponent, TCloudUiSubNavbarItemComponent, TCloudUiTabContentComponent, TCloudUiTabGroupComponent, TCloudUiTabHeadComponent, TCloudUiTabItemComponent, TCloudUiTabMenuComponent, TCloudUiTabSubtitleComponent, TCloudUiTabTitleComponent, TCloudUiTableComponent, TCloudUiTagComponent, TCloudUiToastComponent, 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 };
|
|
10069
|
+
export { BytesPipe, CNPJPipe, CPFPipe, CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$1 as CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, DateBRPipe, DropdownGroupedSize, DropdownMultiSize$1 as DropdownMultiSize, DropdownSize$1 as 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, TCloudUiBreadcrumbComponent, TCloudUiBreadcrumbService, TCloudUiButtonDirective, TCloudUiCalendarComponent, TCloudUiCardAccordionComponent, TCloudUiCardComponent, TCloudUiCardTitleComponent, TCloudUiCheckAccessDirective, TCloudUiCheckAccessService, TCloudUiCheckboxDirective, TCloudUiChoiceIssuesComponent, TCloudUiContainerColComponent, TCloudUiContainerComponent, TCloudUiContainerContentComponent, TCloudUiCubesComponent, TCloudUiCurrencyDirective, TCloudUiDataListComponent, TCloudUiDataListOptionComponent, TCloudUiDatepickerComponent, TCloudUiDatepickerTimeComponent, TCloudUiDigitOnlyDirective, TCloudUiDropdownComponent, TCloudUiDropdownMultiComponent, TCloudUiElCopyDirective, TCloudUiEmptyContentComponent, TCloudUiFaqComponent, TCloudUiFiltersComponent, TCloudUiFormDirective, TCloudUiHighLightDirective, TCloudUiHoverParentDirective, TCloudUiInputContainerComponent, TCloudUiInputPasswordComponent, TCloudUiInputSearchComponent, TCloudUiIpMaskDirective, TCloudUiLabelTokenComponent, TCloudUiLineStepCircleComponent, TCloudUiLineStepTitleComponent, TCloudUiLinhaLogoComponent, TCloudUiLoadingComponent, TCloudUiLoadingTransitionsService, TCloudUiMessageComponent, TCloudUiModalBodyComponent, TCloudUiModalComponent, TCloudUiModalFooterComponent, TCloudUiModalHeaderComponent, TCloudUiModule, TCloudUiMultiInputComponent, TCloudUiMultiSelectComponent, TCloudUiMultiplesValuesComponent, TCloudUiNgCheckAccessDirective, TCloudUiNgFeatureFlagsDirective, TCloudUiNotFoundComponent, TCloudUiNumberStepComponent, TCloudUiPaginationComponent, TCloudUiPaginationPipe, TCloudUiProgressBarComponent, TCloudUiRangeDateComponent, TCloudUiReorderItemsComponent, TCloudUiScrollBoxComponent, TCloudUiSearchInObjectService, TCloudUiSkeletonLoadingComponent, TCloudUiSkeletonLoadingComponentStyle, TCloudUiSlideToggleDirective, TCloudUiSubNavbarComponent, TCloudUiSubNavbarItemComponent, TCloudUiTabContentComponent, TCloudUiTabGroupComponent, TCloudUiTabHeadComponent, TCloudUiTabItemComponent, TCloudUiTabMenuComponent, TCloudUiTabSubtitleComponent, TCloudUiTabTitleComponent, TCloudUiTableComponent, TCloudUiTagComponent, TCloudUiToastComponent, TCloudUiTooltipDirective, TCloudUiWelcomeComponent, TCloudUiWizardStepsComponent, 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 };
|
|
9872
10070
|
//# sourceMappingURL=dev-tcloud-tcloud-ui.mjs.map
|