@dev-tcloud/tcloud-ui 5.4.6-beta.1 → 5.4.6-beta.2
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.
|
@@ -8505,12 +8505,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
8505
8505
|
}], ctorParameters: () => [] });
|
|
8506
8506
|
|
|
8507
8507
|
class TcRevSideDrawerComponent {
|
|
8508
|
-
constructor(document) {
|
|
8508
|
+
constructor(document, el, renderer) {
|
|
8509
8509
|
this.document = document;
|
|
8510
|
+
this.el = el;
|
|
8511
|
+
this.renderer = renderer;
|
|
8510
8512
|
this.loading = input(false);
|
|
8511
8513
|
this.position = input('right');
|
|
8512
8514
|
this.title = input.required();
|
|
8513
|
-
this.xAxis = computed(() =>
|
|
8515
|
+
this.xAxis = computed(() => this.position() === 'left' ? `left: 0` : `right: 0`);
|
|
8514
8516
|
this.onCloseDrawer = output();
|
|
8515
8517
|
this.isOpen = false;
|
|
8516
8518
|
this._deviceService = inject(TCloudUiDeviceUtilsService);
|
|
@@ -8520,9 +8522,23 @@ class TcRevSideDrawerComponent {
|
|
|
8520
8522
|
ngOnInit() {
|
|
8521
8523
|
this.document.body.style.overflowY = 'hidden';
|
|
8522
8524
|
this.isOpen = true;
|
|
8525
|
+
// --- mover o host do componente para o <body> apenas em mobile ---
|
|
8526
|
+
if (this.el &&
|
|
8527
|
+
this.el.nativeElement &&
|
|
8528
|
+
this.el.nativeElement.parentNode !== this.document.body &&
|
|
8529
|
+
this.isMobile()) {
|
|
8530
|
+
this.renderer.appendChild(this.document.body, this.el.nativeElement);
|
|
8531
|
+
}
|
|
8523
8532
|
}
|
|
8524
8533
|
ngOnDestroy() {
|
|
8525
8534
|
this.document.body.style.overflowY = '';
|
|
8535
|
+
// remover o host do body ao destruir apenas em mobile
|
|
8536
|
+
if (this.el &&
|
|
8537
|
+
this.el.nativeElement &&
|
|
8538
|
+
this.el.nativeElement.parentNode === this.document.body &&
|
|
8539
|
+
this.isMobile()) {
|
|
8540
|
+
this.renderer.removeChild(this.document.body, this.el.nativeElement);
|
|
8541
|
+
}
|
|
8526
8542
|
}
|
|
8527
8543
|
handleClickOverlay() {
|
|
8528
8544
|
if (this.loading()) {
|
|
@@ -8534,29 +8550,35 @@ class TcRevSideDrawerComponent {
|
|
|
8534
8550
|
handleClickContent(_ev) {
|
|
8535
8551
|
_ev.stopPropagation();
|
|
8536
8552
|
}
|
|
8537
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TcRevSideDrawerComponent, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8553
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TcRevSideDrawerComponent, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8538
8554
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TcRevSideDrawerComponent, isStandalone: true, selector: "tc-rev-side-drawer", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onCloseDrawer: "onCloseDrawer" }, ngImport: i0, template: "@if(isDesktop()){\n<div\n [@backdropAnimation]\n class=\"tc-rev-side-drawer-overlay\"\n (click)=\"handleClickOverlay()\">\n</div>\n}\n\n<div\n *ngIf=\"isOpen\"\n [@drawerAnimation]=\"isDesktop() ? 'desktop' : 'mobile'\"\n class=\"tc-rev-side-drawer-content\"\n [style.width]=\"isMobile() ? '100%' : null\"\n (click)=\"handleClickContent($event)\"\n [style]=\"xAxis()\">\n\n <div class=\"tc-rev-side-drawer-content__header\">\n <h2 class=\"mar-none f-h2 f-weight-600\">{{title()}}</h2>\n\n <button\n tcRevIconButton=\"outline\" color=\"dark\"\n [disabled]=\"loading()\"\n (click)=\"handleClickOverlay()\">\n <i class=\"fa-light fa-times\"></i>\n </button>\n </div>\n <ng-content></ng-content>\n</div>", styles: [":host{display:block}.tc-rev-side-drawer-overlay{background-color:#00000080;inset:0;position:fixed;height:100vh;z-index:3000}.tc-rev-side-drawer-content{background-color:var(--c-neutral-50);height:100vh;position:fixed;z-index:3001;top:0}.tc-rev-side-drawer-content__header{align-items:center;color:var(--c-neutral-700);display:flex;font-family:var(--f-family);gap:var(--size-16);justify-content:space-between;padding:var(--size-16);padding-bottom:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TcRevIconButtonDirective, selector: "button[tcRevIconButton]", inputs: ["color", "size", "tcRevIconButton"] }], animations: [
|
|
8539
8555
|
trigger('drawerAnimation', [
|
|
8540
8556
|
transition('void => desktop', [
|
|
8541
8557
|
style({ transform: 'translateX(100%)', opacity: 0 }),
|
|
8542
|
-
animate('250ms', style({ transform: 'translateX(0)', opacity: 1 }))
|
|
8558
|
+
animate('250ms', style({ transform: 'translateX(0)', opacity: 1 })),
|
|
8543
8559
|
]),
|
|
8544
8560
|
transition('desktop => void', [
|
|
8545
8561
|
style({ transform: 'translateX(0)', opacity: 1 }),
|
|
8546
|
-
animate('250ms', style({ transform: 'translateX(100%)', opacity: 0 }))
|
|
8562
|
+
animate('250ms', style({ transform: 'translateX(100%)', opacity: 0 })),
|
|
8547
8563
|
]),
|
|
8548
8564
|
transition('void => mobile', [
|
|
8549
8565
|
style({ opacity: 0 }),
|
|
8550
|
-
animate('200ms ease', style({ opacity: 1 }))
|
|
8566
|
+
animate('200ms ease', style({ opacity: 1 })),
|
|
8551
8567
|
]),
|
|
8552
8568
|
transition('mobile => void', [
|
|
8553
8569
|
style({ opacity: 1 }),
|
|
8554
|
-
animate('200ms ease', style({ opacity: 0 }))
|
|
8555
|
-
])
|
|
8570
|
+
animate('200ms ease', style({ opacity: 0 })),
|
|
8571
|
+
]),
|
|
8556
8572
|
]),
|
|
8557
8573
|
trigger('backdropAnimation', [
|
|
8558
|
-
transition(':enter', [
|
|
8559
|
-
|
|
8574
|
+
transition(':enter', [
|
|
8575
|
+
style({ opacity: 0 }),
|
|
8576
|
+
animate('100ms', style({ opacity: 1 })),
|
|
8577
|
+
]),
|
|
8578
|
+
transition(':leave', [
|
|
8579
|
+
style({ opacity: 1 }),
|
|
8580
|
+
animate('250ms', style({ opacity: 0 })),
|
|
8581
|
+
]),
|
|
8560
8582
|
]),
|
|
8561
8583
|
] }); }
|
|
8562
8584
|
}
|
|
@@ -8566,30 +8588,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
8566
8588
|
trigger('drawerAnimation', [
|
|
8567
8589
|
transition('void => desktop', [
|
|
8568
8590
|
style({ transform: 'translateX(100%)', opacity: 0 }),
|
|
8569
|
-
animate('250ms', style({ transform: 'translateX(0)', opacity: 1 }))
|
|
8591
|
+
animate('250ms', style({ transform: 'translateX(0)', opacity: 1 })),
|
|
8570
8592
|
]),
|
|
8571
8593
|
transition('desktop => void', [
|
|
8572
8594
|
style({ transform: 'translateX(0)', opacity: 1 }),
|
|
8573
|
-
animate('250ms', style({ transform: 'translateX(100%)', opacity: 0 }))
|
|
8595
|
+
animate('250ms', style({ transform: 'translateX(100%)', opacity: 0 })),
|
|
8574
8596
|
]),
|
|
8575
8597
|
transition('void => mobile', [
|
|
8576
8598
|
style({ opacity: 0 }),
|
|
8577
|
-
animate('200ms ease', style({ opacity: 1 }))
|
|
8599
|
+
animate('200ms ease', style({ opacity: 1 })),
|
|
8578
8600
|
]),
|
|
8579
8601
|
transition('mobile => void', [
|
|
8580
8602
|
style({ opacity: 1 }),
|
|
8581
|
-
animate('200ms ease', style({ opacity: 0 }))
|
|
8582
|
-
])
|
|
8603
|
+
animate('200ms ease', style({ opacity: 0 })),
|
|
8604
|
+
]),
|
|
8583
8605
|
]),
|
|
8584
8606
|
trigger('backdropAnimation', [
|
|
8585
|
-
transition(':enter', [
|
|
8586
|
-
|
|
8607
|
+
transition(':enter', [
|
|
8608
|
+
style({ opacity: 0 }),
|
|
8609
|
+
animate('100ms', style({ opacity: 1 })),
|
|
8610
|
+
]),
|
|
8611
|
+
transition(':leave', [
|
|
8612
|
+
style({ opacity: 1 }),
|
|
8613
|
+
animate('250ms', style({ opacity: 0 })),
|
|
8614
|
+
]),
|
|
8587
8615
|
]),
|
|
8588
8616
|
], template: "@if(isDesktop()){\n<div\n [@backdropAnimation]\n class=\"tc-rev-side-drawer-overlay\"\n (click)=\"handleClickOverlay()\">\n</div>\n}\n\n<div\n *ngIf=\"isOpen\"\n [@drawerAnimation]=\"isDesktop() ? 'desktop' : 'mobile'\"\n class=\"tc-rev-side-drawer-content\"\n [style.width]=\"isMobile() ? '100%' : null\"\n (click)=\"handleClickContent($event)\"\n [style]=\"xAxis()\">\n\n <div class=\"tc-rev-side-drawer-content__header\">\n <h2 class=\"mar-none f-h2 f-weight-600\">{{title()}}</h2>\n\n <button\n tcRevIconButton=\"outline\" color=\"dark\"\n [disabled]=\"loading()\"\n (click)=\"handleClickOverlay()\">\n <i class=\"fa-light fa-times\"></i>\n </button>\n </div>\n <ng-content></ng-content>\n</div>", styles: [":host{display:block}.tc-rev-side-drawer-overlay{background-color:#00000080;inset:0;position:fixed;height:100vh;z-index:3000}.tc-rev-side-drawer-content{background-color:var(--c-neutral-50);height:100vh;position:fixed;z-index:3001;top:0}.tc-rev-side-drawer-content__header{align-items:center;color:var(--c-neutral-700);display:flex;font-family:var(--f-family);gap:var(--size-16);justify-content:space-between;padding:var(--size-16);padding-bottom:0}\n"] }]
|
|
8589
8617
|
}], ctorParameters: () => [{ type: Document, decorators: [{
|
|
8590
8618
|
type: Inject,
|
|
8591
8619
|
args: [DOCUMENT]
|
|
8592
|
-
}] }] });
|
|
8620
|
+
}] }, { type: i0.ElementRef }, { type: i0.Renderer2 }] });
|
|
8593
8621
|
|
|
8594
8622
|
class TcRevSkeletonLoadingComponent {
|
|
8595
8623
|
constructor() {
|