@dev-tcloud/tcloud-ui 6.3.0 → 6.4.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 +40 -9
- package/fesm2022/dev-tcloud-tcloud-ui.mjs.map +1 -1
- package/lib/_modules/tcloud-ui-modal/components/tcloud-ui-modal-body/tcloud-ui-modal-body.component.d.ts +5 -1
- package/lib/_modules/tcloud-ui-modal/services/tcloud-modal.service.d.ts +8 -0
- package/lib/_modules/tcloud-ui-modal/tcloud-ui-modal.component.d.ts +3 -1
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, Component, EventEmitter, Input, Output, forwardRef, ViewChild, InjectionToken, Optional, Inject, input, effect, Directive, Pipe, ViewEncapsulation, HostListener, NgModule, makeEnvironmentProviders, output,
|
|
2
|
+
import { Injectable, Component, EventEmitter, Input, Output, forwardRef, ViewChild, InjectionToken, Optional, Inject, input, effect, Directive, Pipe, ViewEncapsulation, signal, HostListener, NgModule, makeEnvironmentProviders, output, ContentChildren, inject, computed, ApplicationRef, model, viewChild, ChangeDetectionStrategy } 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';
|
|
@@ -3050,6 +3050,7 @@ class TcloudModalService {
|
|
|
3050
3050
|
constructor() {
|
|
3051
3051
|
this.param_mode = '';
|
|
3052
3052
|
this.param_confirm = {};
|
|
3053
|
+
this.sticky = false;
|
|
3053
3054
|
this._stateClose = new Subject();
|
|
3054
3055
|
this.stateClose$ = this._stateClose.asObservable();
|
|
3055
3056
|
this._stateConfirm = new Subject();
|
|
@@ -3060,6 +3061,10 @@ class TcloudModalService {
|
|
|
3060
3061
|
this.stateLoading$ = this._stateLoading.asObservable();
|
|
3061
3062
|
this._stateMode = new Subject();
|
|
3062
3063
|
this.stateMode$ = this._stateMode.asObservable();
|
|
3064
|
+
this._stateSticky = new Subject();
|
|
3065
|
+
this.stateSticky$ = this._stateSticky.asObservable();
|
|
3066
|
+
this._is_footer_signal = signal(undefined);
|
|
3067
|
+
this.is_footer_signal = this._is_footer_signal.asReadonly();
|
|
3063
3068
|
}
|
|
3064
3069
|
toModal(action) {
|
|
3065
3070
|
if (action === 'close') {
|
|
@@ -3081,6 +3086,13 @@ class TcloudModalService {
|
|
|
3081
3086
|
this.param_mode = mode;
|
|
3082
3087
|
this._stateMode.next(mode);
|
|
3083
3088
|
}
|
|
3089
|
+
setSticky(sticky) {
|
|
3090
|
+
this.sticky = sticky;
|
|
3091
|
+
this._stateSticky.next(sticky);
|
|
3092
|
+
}
|
|
3093
|
+
getSticky() {
|
|
3094
|
+
return this.sticky;
|
|
3095
|
+
}
|
|
3084
3096
|
getLoading() {
|
|
3085
3097
|
return this.loading;
|
|
3086
3098
|
}
|
|
@@ -3088,6 +3100,9 @@ class TcloudModalService {
|
|
|
3088
3100
|
this.loading = loading;
|
|
3089
3101
|
this._stateLoading.next(loading);
|
|
3090
3102
|
}
|
|
3103
|
+
set_is_footer_signal(v) {
|
|
3104
|
+
this._is_footer_signal.set(v);
|
|
3105
|
+
}
|
|
3091
3106
|
fixed_body(fixed) {
|
|
3092
3107
|
let body = document.getElementsByTagName("BODY")[0];
|
|
3093
3108
|
if (body && body.style) {
|
|
@@ -3135,6 +3150,13 @@ class TCloudUiModalComponent {
|
|
|
3135
3150
|
}
|
|
3136
3151
|
return { value: this.position, params: { enterTransform: 'translateY(-38%)', leaveTransform: 'translateY(-38%)' } };
|
|
3137
3152
|
}
|
|
3153
|
+
set sticky(v) {
|
|
3154
|
+
this._sticky = v;
|
|
3155
|
+
this.tcloudModalService.setSticky(this._sticky);
|
|
3156
|
+
}
|
|
3157
|
+
get sticky() {
|
|
3158
|
+
return this._sticky;
|
|
3159
|
+
}
|
|
3138
3160
|
/**
|
|
3139
3161
|
* window - string - nome referente ao tamanho do modal - não utilizar maxWidth se for utilizar window - default 500 (medium)
|
|
3140
3162
|
*/
|
|
@@ -3200,7 +3222,7 @@ class TCloudUiModalComponent {
|
|
|
3200
3222
|
*/
|
|
3201
3223
|
this.maxWidth = 500;
|
|
3202
3224
|
this.position = 'top';
|
|
3203
|
-
this.
|
|
3225
|
+
this._sticky = false;
|
|
3204
3226
|
this.mode = '';
|
|
3205
3227
|
this.control_open = false;
|
|
3206
3228
|
this._open = false;
|
|
@@ -3268,7 +3290,7 @@ class TCloudUiModalComponent {
|
|
|
3268
3290
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: TCloudUiModalComponent, isStandalone: true, selector: "tcloud-ui-modal", inputs: { confirm: "confirm", confirmText: "confirmText", autoClose: "autoClose", title: "title", maxWidth: "maxWidth", position: "position", sticky: "sticky", window: "window", open: "open", loading: "loading" }, outputs: { openChange: "openChange", toConfirm: "toConfirm", toCancel: "toCancel", toAction: "toAction" }, providers: [
|
|
3269
3291
|
TcloudModalService,
|
|
3270
3292
|
TCloudUiLayoutService
|
|
3271
|
-
], ngImport: i0, template: "<div class=\"tc-background-modal\" *ngIf=\"control_open\" >{{ checkIsOpen() }}</div>\n\n<div class=\"tcloud-ui-modal base-modal\" [attr.data-layout]=\"layout\" *ngIf=\"open\">\n <div class=\"sub-modal\" [ngClass]=\"['position-' + position, sticky ? 'is-sticky' : '']\" [@fade]=\"animationParams\">\n <div class=\"tc-modal tc-modal-shadow\" [attr.style]=\"'max-width: ' + maxWidth + 'px;'\">\n <div class=\"area-top-actions tc-ui-modal-{{mode}}\">\n <button type=\"button tc-btn-action-close-ui-modal\" [class.no-use-header]=\"title\" (click)=\"toClose()\" [disabled]=\"loading\">\n <i *ngIf=\"!loading\" class=\"fas fa-times\"></i>\n <i *ngIf=\"loading\" class=\"fas fa-spinner fa-spin\"></i>\n </button>\n </div>\n\n <h4 *ngIf=\"title\" [innerHTML]=\"title\"></h4>\n\n <ng-content></ng-content>\n\n </div>\n </div>\n</div>\n\n<!-- Ex: Modal -->\n<!-- \n <tcloud-ui-modal [(open)]=\"open\">\n\n <tcloud-ui-modal-header title=\"T\u00EDtulo do Modal\" ></tcloud-ui-modal-header>\n\n <tcloud-ui-modal-body>\n Conte\u00FAdo do modal aqui\n </tcloud-ui-modal-body>\n\n <tcloud-ui-modal-footer></tcloud-ui-modal-footer>\n\n </tcloud-ui-modal>\n\n <button type=\"button\" (click)=\"open = !open\">open modal {{ open }}</button>\n-->\n\n<!-- ****** -->\n<!-- ****** -->\n<!-- ****** -->\n<!-- ****** -->\n\n<!-- Ex: Confirm Modal -->\n<!-- \n <tcloud-ui-modal [(open)]=\"open_confirm\" [title]=\"'Aten\u00E7\u00E3o'\" [confirmText]=\"'Aceito'\" [confirm]=\"true\" (toAction)=\"$event\" >\n\n <tcloud-ui-modal-body>Deseja realmente executar esta a\u00E7\u00E3o?</tcloud-ui-modal-body>\n\n <tcloud-ui-modal-footer></tcloud-ui-modal-footer>\n\n </tcloud-ui-modal>\n\n <button type=\"button\" (click)=\"open_confirm = !open_confirm\">open_confirm modal {{ open_confirm }}</button>\n-->", styles: [".tc-background-modal{border:1px solid #ccc;position:fixed;width:100%;left:0;top:0;background-color:#000;z-index:4005;height:100%;opacity:.3}.base-modal{height:100%;overflow:scroll;position:fixed;width:100%;z-index:4005;left:0;top:0;text-align:left!important}.sub-modal{padding:30px;position:absolute;width:100%;display:flex;justify-content:center;align-items:flex-start}.sub-modal.position-left{justify-content:flex-start}.sub-modal.position-right{justify-content:flex-end}.sub-modal.position-bottom{align-items:flex-end}.tc-modal{position:relative;background-color:#fff;padding:12px;border-radius:8px;margin:auto;width:100%}.sub-modal.is-sticky{padding:0}.sub-modal.is-sticky .tc-modal{border-radius:0}.sub-modal.is-sticky.position-left .tc-modal{margin:0 auto 0 0}.sub-modal.is-sticky.position-right .tc-modal{margin:0 0 0 auto}.sub-modal.is-sticky.position-bottom .tc-modal{margin:auto 0 0}.sub-modal.is-sticky.position-center .tc-modal,.sub-modal.is-sticky.position-bottom .tc-modal{max-width:100%!important;width:100%!important}.tc-modal-shadow{-webkit-box-shadow:2px 2px 10px 0px rgba(0,0,0,.368627451);box-shadow:2px 2px 10px #0000005e}.area-top-actions{position:absolute;top:2px;right:5px;z-index:1}.area-top-actions.tc-ui-modal-colorless button i{color:var(--tc-gray-600)!important}.area-top-actions button{cursor:pointer;background-color:transparent;border:none;font-size:15px;padding:5px 7px}.area-top-actions button i{font-size:17px;color:#fff;transition:all .25s;opacity:.7}.area-top-actions button i:hover{opacity:1!important}h4{font-size:16px;margin:5px 30px 10px 0;font-weight:700}.no-use-header i{color:#999!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
|
|
3293
|
+
], ngImport: i0, template: "<div class=\"tc-background-modal\" *ngIf=\"control_open\" >{{ checkIsOpen() }}</div>\n\n<div class=\"tcloud-ui-modal base-modal\" [attr.data-layout]=\"layout\" *ngIf=\"open\">\n <div class=\"sub-modal\" [ngClass]=\"['position-' + position, sticky ? 'is-sticky' : '']\" [@fade]=\"animationParams\">\n <div class=\"tc-modal tc-modal-shadow\" [attr.style]=\"'max-width: ' + maxWidth + 'px;'\" [class.tcloud-ui-modal-sticky]=\"sticky\">\n <div class=\"area-top-actions tc-ui-modal-{{mode}}\">\n <button type=\"button tc-btn-action-close-ui-modal\" [class.no-use-header]=\"title\" (click)=\"toClose()\" [disabled]=\"loading\">\n <i *ngIf=\"!loading\" class=\"fas fa-times\"></i>\n <i *ngIf=\"loading\" class=\"fas fa-spinner fa-spin\"></i>\n </button>\n </div>\n\n <h4 *ngIf=\"title\" [innerHTML]=\"title\"></h4>\n\n <ng-content></ng-content>\n\n </div>\n </div>\n</div>\n\n<!-- Ex: Modal -->\n<!-- \n <tcloud-ui-modal [(open)]=\"open\">\n\n <tcloud-ui-modal-header title=\"T\u00EDtulo do Modal\" ></tcloud-ui-modal-header>\n\n <tcloud-ui-modal-body>\n Conte\u00FAdo do modal aqui\n </tcloud-ui-modal-body>\n\n <tcloud-ui-modal-footer></tcloud-ui-modal-footer>\n\n </tcloud-ui-modal>\n\n <button type=\"button\" (click)=\"open = !open\">open modal {{ open }}</button>\n-->\n\n<!-- ****** -->\n<!-- ****** -->\n<!-- ****** -->\n<!-- ****** -->\n\n<!-- Ex: Confirm Modal -->\n<!-- \n <tcloud-ui-modal [(open)]=\"open_confirm\" [title]=\"'Aten\u00E7\u00E3o'\" [confirmText]=\"'Aceito'\" [confirm]=\"true\" (toAction)=\"$event\" >\n\n <tcloud-ui-modal-body>Deseja realmente executar esta a\u00E7\u00E3o?</tcloud-ui-modal-body>\n\n <tcloud-ui-modal-footer></tcloud-ui-modal-footer>\n\n </tcloud-ui-modal>\n\n <button type=\"button\" (click)=\"open_confirm = !open_confirm\">open_confirm modal {{ open_confirm }}</button>\n-->", styles: [".tc-background-modal{border:1px solid #ccc;position:fixed;width:100%;left:0;top:0;background-color:#000;z-index:4005;height:100%;opacity:.3}.base-modal{height:100%;overflow:scroll;position:fixed;width:100%;z-index:4005;left:0;top:0;text-align:left!important}.sub-modal{padding:30px;position:absolute;width:100%;display:flex;justify-content:center;align-items:flex-start}.sub-modal.position-left{justify-content:flex-start}.sub-modal.position-right{justify-content:flex-end}.sub-modal.position-bottom{align-items:flex-end}.tc-modal{position:relative;background-color:#fff;padding:12px;border-radius:8px;margin:auto;width:100%}.sub-modal.is-sticky{padding:0}.sub-modal.is-sticky .tc-modal{border-radius:0}.sub-modal.is-sticky.position-left .tc-modal{margin:0 auto 0 0}.sub-modal.is-sticky.position-right .tc-modal{margin:0 0 0 auto}.sub-modal.is-sticky.position-bottom .tc-modal{margin:auto 0 0}.sub-modal.is-sticky.position-center .tc-modal,.sub-modal.is-sticky.position-bottom .tc-modal{max-width:100%!important;width:100%!important}.tc-modal-shadow{-webkit-box-shadow:2px 2px 10px 0px rgba(0,0,0,.368627451);box-shadow:2px 2px 10px #0000005e}.area-top-actions{position:absolute;top:2px;right:5px;z-index:1}.area-top-actions.tc-ui-modal-colorless button i{color:var(--tc-gray-600)!important}.area-top-actions button{cursor:pointer;background-color:transparent;border:none;font-size:15px;padding:5px 7px}.area-top-actions button i{font-size:17px;color:#fff;transition:all .25s;opacity:.7}.area-top-actions button i:hover{opacity:1!important}h4{font-size:16px;margin:5px 30px 10px 0;font-weight:700}.no-use-header i{color:#999!important}.tcloud-ui-modal-sticky{height:100vh;overflow:hidden;padding:12px 4px 12px 12px}\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"] }], animations: [
|
|
3272
3294
|
trigger('fade', [
|
|
3273
3295
|
transition('void => *', [
|
|
3274
3296
|
style({ opacity: 0, transform: '{{enterTransform}}' }),
|
|
@@ -3295,7 +3317,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
3295
3317
|
animate('0.3s ease-out', style({ opacity: 0, transform: '{{leaveTransform}}' }))
|
|
3296
3318
|
], { params: { leaveTransform: 'translateY(-38%)' } })
|
|
3297
3319
|
])
|
|
3298
|
-
], standalone: true, imports: [CommonModule], template: "<div class=\"tc-background-modal\" *ngIf=\"control_open\" >{{ checkIsOpen() }}</div>\n\n<div class=\"tcloud-ui-modal base-modal\" [attr.data-layout]=\"layout\" *ngIf=\"open\">\n <div class=\"sub-modal\" [ngClass]=\"['position-' + position, sticky ? 'is-sticky' : '']\" [@fade]=\"animationParams\">\n <div class=\"tc-modal tc-modal-shadow\" [attr.style]=\"'max-width: ' + maxWidth + 'px;'\">\n <div class=\"area-top-actions tc-ui-modal-{{mode}}\">\n <button type=\"button tc-btn-action-close-ui-modal\" [class.no-use-header]=\"title\" (click)=\"toClose()\" [disabled]=\"loading\">\n <i *ngIf=\"!loading\" class=\"fas fa-times\"></i>\n <i *ngIf=\"loading\" class=\"fas fa-spinner fa-spin\"></i>\n </button>\n </div>\n\n <h4 *ngIf=\"title\" [innerHTML]=\"title\"></h4>\n\n <ng-content></ng-content>\n\n </div>\n </div>\n</div>\n\n<!-- Ex: Modal -->\n<!-- \n <tcloud-ui-modal [(open)]=\"open\">\n\n <tcloud-ui-modal-header title=\"T\u00EDtulo do Modal\" ></tcloud-ui-modal-header>\n\n <tcloud-ui-modal-body>\n Conte\u00FAdo do modal aqui\n </tcloud-ui-modal-body>\n\n <tcloud-ui-modal-footer></tcloud-ui-modal-footer>\n\n </tcloud-ui-modal>\n\n <button type=\"button\" (click)=\"open = !open\">open modal {{ open }}</button>\n-->\n\n<!-- ****** -->\n<!-- ****** -->\n<!-- ****** -->\n<!-- ****** -->\n\n<!-- Ex: Confirm Modal -->\n<!-- \n <tcloud-ui-modal [(open)]=\"open_confirm\" [title]=\"'Aten\u00E7\u00E3o'\" [confirmText]=\"'Aceito'\" [confirm]=\"true\" (toAction)=\"$event\" >\n\n <tcloud-ui-modal-body>Deseja realmente executar esta a\u00E7\u00E3o?</tcloud-ui-modal-body>\n\n <tcloud-ui-modal-footer></tcloud-ui-modal-footer>\n\n </tcloud-ui-modal>\n\n <button type=\"button\" (click)=\"open_confirm = !open_confirm\">open_confirm modal {{ open_confirm }}</button>\n-->", styles: [".tc-background-modal{border:1px solid #ccc;position:fixed;width:100%;left:0;top:0;background-color:#000;z-index:4005;height:100%;opacity:.3}.base-modal{height:100%;overflow:scroll;position:fixed;width:100%;z-index:4005;left:0;top:0;text-align:left!important}.sub-modal{padding:30px;position:absolute;width:100%;display:flex;justify-content:center;align-items:flex-start}.sub-modal.position-left{justify-content:flex-start}.sub-modal.position-right{justify-content:flex-end}.sub-modal.position-bottom{align-items:flex-end}.tc-modal{position:relative;background-color:#fff;padding:12px;border-radius:8px;margin:auto;width:100%}.sub-modal.is-sticky{padding:0}.sub-modal.is-sticky .tc-modal{border-radius:0}.sub-modal.is-sticky.position-left .tc-modal{margin:0 auto 0 0}.sub-modal.is-sticky.position-right .tc-modal{margin:0 0 0 auto}.sub-modal.is-sticky.position-bottom .tc-modal{margin:auto 0 0}.sub-modal.is-sticky.position-center .tc-modal,.sub-modal.is-sticky.position-bottom .tc-modal{max-width:100%!important;width:100%!important}.tc-modal-shadow{-webkit-box-shadow:2px 2px 10px 0px rgba(0,0,0,.368627451);box-shadow:2px 2px 10px #0000005e}.area-top-actions{position:absolute;top:2px;right:5px;z-index:1}.area-top-actions.tc-ui-modal-colorless button i{color:var(--tc-gray-600)!important}.area-top-actions button{cursor:pointer;background-color:transparent;border:none;font-size:15px;padding:5px 7px}.area-top-actions button i{font-size:17px;color:#fff;transition:all .25s;opacity:.7}.area-top-actions button i:hover{opacity:1!important}h4{font-size:16px;margin:5px 30px 10px 0;font-weight:700}.no-use-header i{color:#999!important}\n"] }]
|
|
3320
|
+
], standalone: true, imports: [CommonModule], template: "<div class=\"tc-background-modal\" *ngIf=\"control_open\" >{{ checkIsOpen() }}</div>\n\n<div class=\"tcloud-ui-modal base-modal\" [attr.data-layout]=\"layout\" *ngIf=\"open\">\n <div class=\"sub-modal\" [ngClass]=\"['position-' + position, sticky ? 'is-sticky' : '']\" [@fade]=\"animationParams\">\n <div class=\"tc-modal tc-modal-shadow\" [attr.style]=\"'max-width: ' + maxWidth + 'px;'\" [class.tcloud-ui-modal-sticky]=\"sticky\">\n <div class=\"area-top-actions tc-ui-modal-{{mode}}\">\n <button type=\"button tc-btn-action-close-ui-modal\" [class.no-use-header]=\"title\" (click)=\"toClose()\" [disabled]=\"loading\">\n <i *ngIf=\"!loading\" class=\"fas fa-times\"></i>\n <i *ngIf=\"loading\" class=\"fas fa-spinner fa-spin\"></i>\n </button>\n </div>\n\n <h4 *ngIf=\"title\" [innerHTML]=\"title\"></h4>\n\n <ng-content></ng-content>\n\n </div>\n </div>\n</div>\n\n<!-- Ex: Modal -->\n<!-- \n <tcloud-ui-modal [(open)]=\"open\">\n\n <tcloud-ui-modal-header title=\"T\u00EDtulo do Modal\" ></tcloud-ui-modal-header>\n\n <tcloud-ui-modal-body>\n Conte\u00FAdo do modal aqui\n </tcloud-ui-modal-body>\n\n <tcloud-ui-modal-footer></tcloud-ui-modal-footer>\n\n </tcloud-ui-modal>\n\n <button type=\"button\" (click)=\"open = !open\">open modal {{ open }}</button>\n-->\n\n<!-- ****** -->\n<!-- ****** -->\n<!-- ****** -->\n<!-- ****** -->\n\n<!-- Ex: Confirm Modal -->\n<!-- \n <tcloud-ui-modal [(open)]=\"open_confirm\" [title]=\"'Aten\u00E7\u00E3o'\" [confirmText]=\"'Aceito'\" [confirm]=\"true\" (toAction)=\"$event\" >\n\n <tcloud-ui-modal-body>Deseja realmente executar esta a\u00E7\u00E3o?</tcloud-ui-modal-body>\n\n <tcloud-ui-modal-footer></tcloud-ui-modal-footer>\n\n </tcloud-ui-modal>\n\n <button type=\"button\" (click)=\"open_confirm = !open_confirm\">open_confirm modal {{ open_confirm }}</button>\n-->", styles: [".tc-background-modal{border:1px solid #ccc;position:fixed;width:100%;left:0;top:0;background-color:#000;z-index:4005;height:100%;opacity:.3}.base-modal{height:100%;overflow:scroll;position:fixed;width:100%;z-index:4005;left:0;top:0;text-align:left!important}.sub-modal{padding:30px;position:absolute;width:100%;display:flex;justify-content:center;align-items:flex-start}.sub-modal.position-left{justify-content:flex-start}.sub-modal.position-right{justify-content:flex-end}.sub-modal.position-bottom{align-items:flex-end}.tc-modal{position:relative;background-color:#fff;padding:12px;border-radius:8px;margin:auto;width:100%}.sub-modal.is-sticky{padding:0}.sub-modal.is-sticky .tc-modal{border-radius:0}.sub-modal.is-sticky.position-left .tc-modal{margin:0 auto 0 0}.sub-modal.is-sticky.position-right .tc-modal{margin:0 0 0 auto}.sub-modal.is-sticky.position-bottom .tc-modal{margin:auto 0 0}.sub-modal.is-sticky.position-center .tc-modal,.sub-modal.is-sticky.position-bottom .tc-modal{max-width:100%!important;width:100%!important}.tc-modal-shadow{-webkit-box-shadow:2px 2px 10px 0px rgba(0,0,0,.368627451);box-shadow:2px 2px 10px #0000005e}.area-top-actions{position:absolute;top:2px;right:5px;z-index:1}.area-top-actions.tc-ui-modal-colorless button i{color:var(--tc-gray-600)!important}.area-top-actions button{cursor:pointer;background-color:transparent;border:none;font-size:15px;padding:5px 7px}.area-top-actions button i{font-size:17px;color:#fff;transition:all .25s;opacity:.7}.area-top-actions button i:hover{opacity:1!important}h4{font-size:16px;margin:5px 30px 10px 0;font-weight:700}.no-use-header i{color:#999!important}.tcloud-ui-modal-sticky{height:100vh;overflow:hidden;padding:12px 4px 12px 12px}\n"] }]
|
|
3299
3321
|
}], ctorParameters: () => [{ type: TCloudUiLayoutService }, { type: TcloudModalService }], propDecorators: { confirm: [{
|
|
3300
3322
|
type: Input
|
|
3301
3323
|
}], confirmText: [{
|
|
@@ -3327,16 +3349,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
3327
3349
|
}] } });
|
|
3328
3350
|
|
|
3329
3351
|
class TCloudUiModalBodyComponent {
|
|
3330
|
-
constructor() {
|
|
3352
|
+
constructor(tcloudModalService) {
|
|
3353
|
+
this.tcloudModalService = tcloudModalService;
|
|
3354
|
+
this.sticky = false;
|
|
3355
|
+
}
|
|
3356
|
+
get isFooter() {
|
|
3357
|
+
return this.tcloudModalService.is_footer_signal();
|
|
3358
|
+
}
|
|
3331
3359
|
ngOnInit() {
|
|
3360
|
+
this.sticky = this.tcloudModalService.getSticky();
|
|
3361
|
+
this.tcloudModalService.stateSticky$.subscribe((v) => { this.sticky = v; });
|
|
3332
3362
|
}
|
|
3333
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiModalBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3334
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: TCloudUiModalBodyComponent, isStandalone: true, selector: "tcloud-ui-modal-body", ngImport: i0, template: "<div class=\"tcloud-ui-modal-body tc-modal-body\">\n <ng-content></ng-content>\n</div>", styles: [".tc-modal-body{padding:13px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
3363
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiModalBodyComponent, deps: [{ token: TcloudModalService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3364
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: TCloudUiModalBodyComponent, isStandalone: true, selector: "tcloud-ui-modal-body", ngImport: i0, template: "<div class=\"tcloud-ui-modal-body tc-modal-body\" [class.body-sticky]=\"sticky\" [class.body-with-footer]=\"isFooter\" >\n <ng-content></ng-content>\n</div>", styles: [".tc-modal-body{padding:13px}.body-sticky{overflow:scroll;height:100%;padding:0!important}.body-with-footer{height:calc(100% - 130px)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
3335
3365
|
}
|
|
3336
3366
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiModalBodyComponent, decorators: [{
|
|
3337
3367
|
type: Component,
|
|
3338
|
-
args: [{ selector: 'tcloud-ui-modal-body', standalone: true, imports: [CommonModule], template: "<div class=\"tcloud-ui-modal-body tc-modal-body\">\n <ng-content></ng-content>\n</div>", styles: [".tc-modal-body{padding:13px}\n"] }]
|
|
3339
|
-
}], ctorParameters: () => [] });
|
|
3368
|
+
args: [{ selector: 'tcloud-ui-modal-body', standalone: true, imports: [CommonModule], template: "<div class=\"tcloud-ui-modal-body tc-modal-body\" [class.body-sticky]=\"sticky\" [class.body-with-footer]=\"isFooter\" >\n <ng-content></ng-content>\n</div>", styles: [".tc-modal-body{padding:13px}.body-sticky{overflow:scroll;height:100%;padding:0!important}.body-with-footer{height:calc(100% - 130px)!important}\n"] }]
|
|
3369
|
+
}], ctorParameters: () => [{ type: TcloudModalService }] });
|
|
3340
3370
|
|
|
3341
3371
|
class TCloudUiModalHeaderComponent {
|
|
3342
3372
|
constructor(_tcloudModalService) {
|
|
@@ -3421,6 +3451,7 @@ class TCloudUiModalFooterComponent {
|
|
|
3421
3451
|
this.txt_value = '';
|
|
3422
3452
|
this.param_confirm = this.tcloudModalService.getParamConfirm();
|
|
3423
3453
|
this.toStateLoading();
|
|
3454
|
+
this.tcloudModalService.set_is_footer_signal(true);
|
|
3424
3455
|
}
|
|
3425
3456
|
toClose() {
|
|
3426
3457
|
this.tcloudModalService.toModal('close');
|