@dev-tcloud/tcloud-ui 6.5.5 → 6.5.6
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.
|
@@ -3290,7 +3290,7 @@ class TCloudUiModalComponent {
|
|
|
3290
3290
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.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: [
|
|
3291
3291
|
TcloudModalService,
|
|
3292
3292
|
TCloudUiLayoutService
|
|
3293
|
-
], ngImport: i0, template: "<div class=\"tc-background-modal\" *ngIf=\"control_open\" >{{ checkIsOpen() }}</div>\n\n<div class=\"tcloud-ui-modal base-modal tcloud-ui-modal-layout-{{ layout }} tcloud-ui-modal-postition-{{ position }}\" [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\n @if( layout === 'classic'){\n <button type=\"button\" class=\"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 }@else{\n <button type=\"button\" class=\"tc-rev-btn
|
|
3293
|
+
], ngImport: i0, template: "<div class=\"tc-background-modal\" *ngIf=\"control_open\" >{{ checkIsOpen() }}</div>\n\n<div class=\"tcloud-ui-modal base-modal tcloud-ui-modal-layout-{{ layout }} tcloud-ui-modal-postition-{{ position }}\" [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\n @if( layout === 'classic'){\n <button type=\"button\" class=\"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 }@else{\n <button type=\"button\" class=\"tc-rev-btn-square tc-btn-x\" [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 }\n\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}.tc-btn-x{min-height:25px!important;min-width:25px!important;height:25px;width:25px;margin-top:8px}.area-top-actions{position:absolute;top:2px;right:5px;z-index:1}.area-top-actions.tc-ui-modal-colorless button.tc-btn-action-close-ui-modal i{color:var(--tc-gray-600)!important}.area-top-actions button.tc-btn-action-close-ui-modal{cursor:pointer;background-color:transparent;border:none;font-size:15px;padding:5px 7px}.area-top-actions button.tc-btn-action-close-ui-modal i{font-size:17px;color:#fff;transition:all .25s;opacity:.7}.area-top-actions button.tc-btn-action-close-ui-modal 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}\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: [
|
|
3294
3294
|
trigger('fade', [
|
|
3295
3295
|
transition('void => *', [
|
|
3296
3296
|
style({ opacity: 0, transform: '{{enterTransform}}' }),
|
|
@@ -3317,7 +3317,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
3317
3317
|
animate('0.3s ease-out', style({ opacity: 0, transform: '{{leaveTransform}}' }))
|
|
3318
3318
|
], { params: { leaveTransform: 'translateY(-38%)' } })
|
|
3319
3319
|
])
|
|
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 tcloud-ui-modal-layout-{{ layout }} tcloud-ui-modal-postition-{{ position }}\" [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\n @if( layout === 'classic'){\n <button type=\"button\" class=\"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 }@else{\n <button type=\"button\" class=\"tc-rev-btn
|
|
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 tcloud-ui-modal-layout-{{ layout }} tcloud-ui-modal-postition-{{ position }}\" [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\n @if( layout === 'classic'){\n <button type=\"button\" class=\"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 }@else{\n <button type=\"button\" class=\"tc-rev-btn-square tc-btn-x\" [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 }\n\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}.tc-btn-x{min-height:25px!important;min-width:25px!important;height:25px;width:25px;margin-top:8px}.area-top-actions{position:absolute;top:2px;right:5px;z-index:1}.area-top-actions.tc-ui-modal-colorless button.tc-btn-action-close-ui-modal i{color:var(--tc-gray-600)!important}.area-top-actions button.tc-btn-action-close-ui-modal{cursor:pointer;background-color:transparent;border:none;font-size:15px;padding:5px 7px}.area-top-actions button.tc-btn-action-close-ui-modal i{font-size:17px;color:#fff;transition:all .25s;opacity:.7}.area-top-actions button.tc-btn-action-close-ui-modal 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}\n"] }]
|
|
3321
3321
|
}], ctorParameters: () => [{ type: TCloudUiLayoutService }, { type: TcloudModalService }], propDecorators: { confirm: [{
|
|
3322
3322
|
type: Input
|
|
3323
3323
|
}], confirmText: [{
|
|
@@ -3361,11 +3361,11 @@ class TCloudUiModalBodyComponent {
|
|
|
3361
3361
|
this.tcloudModalService.stateSticky$.subscribe((v) => { this.sticky = v; });
|
|
3362
3362
|
}
|
|
3363
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:
|
|
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:0 15px}.body-sticky{overflow-x:scroll;height:calc(100% - 30px)}.body-with-footer{height:calc(100% - 130px)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
3365
3365
|
}
|
|
3366
3366
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiModalBodyComponent, decorators: [{
|
|
3367
3367
|
type: Component,
|
|
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:
|
|
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:0 15px}.body-sticky{overflow-x:scroll;height:calc(100% - 30px)}.body-with-footer{height:calc(100% - 130px)!important}\n"] }]
|
|
3369
3369
|
}], ctorParameters: () => [{ type: TcloudModalService }] });
|
|
3370
3370
|
|
|
3371
3371
|
class TCloudUiModalHeaderComponent {
|
|
@@ -3377,11 +3377,11 @@ class TCloudUiModalHeaderComponent {
|
|
|
3377
3377
|
this._tcloudModalService.toMode(this.mode);
|
|
3378
3378
|
}
|
|
3379
3379
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiModalHeaderComponent, deps: [{ token: TcloudModalService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3380
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: TCloudUiModalHeaderComponent, isStandalone: true, selector: "tcloud-ui-modal-header", inputs: { mode: "mode", title: "title" }, ngImport: i0, template: "<div class=\"tcloud-ui-modal-header tc-modal-header tc-mode-{{ mode }}\" >\n <h4 class
|
|
3380
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: TCloudUiModalHeaderComponent, isStandalone: true, selector: "tcloud-ui-modal-header", inputs: { mode: "mode", title: "title" }, ngImport: i0, template: "<div class=\"tcloud-ui-modal-header tc-modal-header tc-mode-{{ mode }}\" >\n <h4 [class.text-neutral-700]=\"mode === 'colorless'\" *ngIf=\"title\" [innerHTML]=\"title\"></h4>\n <ng-content></ng-content>\n <hr>\n</div>\n", styles: ["h4{font-size:16px;margin:5px 30px 10px 0;font-weight:700}.tc-modal-header{padding:12px;color:#fff;margin:-12px -12px 15px;border-radius:7px 7px 0 0}hr{display:none}.tc-mode-success{background:#62c46d;color:#fff}.tc-mode-info{background:var(--tc-primary);color:#fff}.tc-mode-danger{background:#f06868;color:#fff}.tc-mode-warning{background:#e8b02e;color:#fff}.tc-mode-colorless{color:var(--tc-gray-600)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
3381
3381
|
}
|
|
3382
3382
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiModalHeaderComponent, decorators: [{
|
|
3383
3383
|
type: Component,
|
|
3384
|
-
args: [{ selector: 'tcloud-ui-modal-header', standalone: true, imports: [CommonModule], template: "<div class=\"tcloud-ui-modal-header tc-modal-header tc-mode-{{ mode }}\" >\n <h4 class
|
|
3384
|
+
args: [{ selector: 'tcloud-ui-modal-header', standalone: true, imports: [CommonModule], template: "<div class=\"tcloud-ui-modal-header tc-modal-header tc-mode-{{ mode }}\" >\n <h4 [class.text-neutral-700]=\"mode === 'colorless'\" *ngIf=\"title\" [innerHTML]=\"title\"></h4>\n <ng-content></ng-content>\n <hr>\n</div>\n", styles: ["h4{font-size:16px;margin:5px 30px 10px 0;font-weight:700}.tc-modal-header{padding:12px;color:#fff;margin:-12px -12px 15px;border-radius:7px 7px 0 0}hr{display:none}.tc-mode-success{background:#62c46d;color:#fff}.tc-mode-info{background:var(--tc-primary);color:#fff}.tc-mode-danger{background:#f06868;color:#fff}.tc-mode-warning{background:#e8b02e;color:#fff}.tc-mode-colorless{color:var(--tc-gray-600)}\n"] }]
|
|
3385
3385
|
}], ctorParameters: () => [{ type: TcloudModalService }], propDecorators: { mode: [{
|
|
3386
3386
|
type: Input
|
|
3387
3387
|
}], title: [{
|