@dev-tcloud/tcloud-ui 6.5.4 → 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.
- package/fesm2022/dev-tcloud-tcloud-ui.mjs +37 -11
- package/fesm2022/dev-tcloud-tcloud-ui.mjs.map +1 -1
- package/lib/_modules/tcloud-ui-loading/components/tcloud-ui-circle/tcloud-ui-circle.component.d.ts +3 -1
- package/lib/_modules/tcloud-ui-loading/tcloud-ui-loading.component.d.ts +6 -1
- package/package.json +1 -1
- package/scss/tcloud-revitalizacao/components/_tc-rev-button.scss +12 -0
|
@@ -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: [{
|
|
@@ -4547,18 +4547,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
4547
4547
|
class TCloudUiCircleComponent {
|
|
4548
4548
|
constructor() {
|
|
4549
4549
|
this.full = false;
|
|
4550
|
+
this.onlyIcon = false;
|
|
4551
|
+
this.onlyInline = false;
|
|
4550
4552
|
}
|
|
4551
4553
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiCircleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4552
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: TCloudUiCircleComponent, isStandalone: true, selector: "tcloud-ui-circle", inputs: { full: "full" }, ngImport: i0, template: "<span class=\"tc-rev-loading-spinner\" [class.tc-rev-loading-size-full]=\"full\"
|
|
4554
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: TCloudUiCircleComponent, isStandalone: true, selector: "tcloud-ui-circle", inputs: { full: "full", onlyIcon: "onlyIcon", onlyInline: "onlyInline" }, ngImport: i0, template: "<span class=\"tc-rev-loading-spinner\" \n [class.tc-rev-loading-size-full]=\"full\" \n [class.tc-rev-loading-size-mini]=\"onlyIcon\">\n</span>\n<!-- <p class=\"tc-rev-loading-message\">{{message()}}...</p> -->", styles: ["@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.tc-rev-loading-spinner{margin:auto;animation:rotation 1s linear infinite;border:3px solid var(--c-neutral-200);border-bottom-color:var(--c-neutral-500);border-radius:50%;box-sizing:border-box;display:block;height:3rem;width:3rem}.tc-rev-loading-message{background-color:var(--c-neutral-600);border-radius:var(--bor-radius-8);color:var(--c-neutral-50);font-family:var(--f-family);font-size:var(--f-size-16);margin:var(--size-12) 0 0 0;padding:var(--size-4) var(--size-12)}.tc-rev-loading-size-full{border:4px solid var(--c-neutral-200)!important;border-bottom-color:var(--c-neutral-500)!important;height:6rem!important;width:6rem!important}.tc-rev-loading-size-mini{animation:rotation .8s linear infinite;margin:auto;border:2px solid var(--c-neutral-200);border-bottom-color:var(--c-neutral-500);border-radius:50%;box-sizing:border-box;display:block;height:1.5rem;width:1.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
4553
4555
|
}
|
|
4554
4556
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiCircleComponent, decorators: [{
|
|
4555
4557
|
type: Component,
|
|
4556
|
-
args: [{ selector: 'tcloud-ui-circle', standalone: true, imports: [CommonModule], template: "<span class=\"tc-rev-loading-spinner\" [class.tc-rev-loading-size-full]=\"full\"
|
|
4558
|
+
args: [{ selector: 'tcloud-ui-circle', standalone: true, imports: [CommonModule], template: "<span class=\"tc-rev-loading-spinner\" \n [class.tc-rev-loading-size-full]=\"full\" \n [class.tc-rev-loading-size-mini]=\"onlyIcon\">\n</span>\n<!-- <p class=\"tc-rev-loading-message\">{{message()}}...</p> -->", styles: ["@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.tc-rev-loading-spinner{margin:auto;animation:rotation 1s linear infinite;border:3px solid var(--c-neutral-200);border-bottom-color:var(--c-neutral-500);border-radius:50%;box-sizing:border-box;display:block;height:3rem;width:3rem}.tc-rev-loading-message{background-color:var(--c-neutral-600);border-radius:var(--bor-radius-8);color:var(--c-neutral-50);font-family:var(--f-family);font-size:var(--f-size-16);margin:var(--size-12) 0 0 0;padding:var(--size-4) var(--size-12)}.tc-rev-loading-size-full{border:4px solid var(--c-neutral-200)!important;border-bottom-color:var(--c-neutral-500)!important;height:6rem!important;width:6rem!important}.tc-rev-loading-size-mini{animation:rotation .8s linear infinite;margin:auto;border:2px solid var(--c-neutral-200);border-bottom-color:var(--c-neutral-500);border-radius:50%;box-sizing:border-box;display:block;height:1.5rem;width:1.5rem}\n"] }]
|
|
4557
4559
|
}], propDecorators: { full: [{
|
|
4558
4560
|
type: Input
|
|
4561
|
+
}], onlyIcon: [{
|
|
4562
|
+
type: Input
|
|
4563
|
+
}], onlyInline: [{
|
|
4564
|
+
type: Input
|
|
4559
4565
|
}] } });
|
|
4560
4566
|
|
|
4561
4567
|
class TCloudUiLoadingComponent {
|
|
4568
|
+
set mode(mode) {
|
|
4569
|
+
if (mode === 'icon') {
|
|
4570
|
+
this.onlyIcon = true;
|
|
4571
|
+
}
|
|
4572
|
+
if (mode === 'inline') {
|
|
4573
|
+
this.onlyInline = true;
|
|
4574
|
+
}
|
|
4575
|
+
}
|
|
4576
|
+
get mode() {
|
|
4577
|
+
return this._mode;
|
|
4578
|
+
}
|
|
4562
4579
|
set loading(loading) {
|
|
4563
4580
|
if (this._loading !== loading) {
|
|
4564
4581
|
this._loading = loading;
|
|
@@ -4566,18 +4583,27 @@ class TCloudUiLoadingComponent {
|
|
|
4566
4583
|
}
|
|
4567
4584
|
get loading() { return this._loading; }
|
|
4568
4585
|
constructor() {
|
|
4586
|
+
this._mode = '';
|
|
4587
|
+
this.onlyInline = false;
|
|
4588
|
+
this.onlyIcon = false;
|
|
4569
4589
|
this.full = false;
|
|
4570
4590
|
this._loading = false;
|
|
4571
4591
|
}
|
|
4572
4592
|
ngOnInit() {
|
|
4573
4593
|
}
|
|
4574
4594
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4575
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: TCloudUiLoadingComponent, isStandalone: true, selector: "tcloud-ui-loading", inputs: { full: "full", loading: "loading" }, ngImport: i0, template: "<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
|
|
4595
|
+
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 <tcloud-ui-circle [onlyIcon]=\"onlyIcon\"></tcloud-ui-circle>\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 [onlyIcon]=\"true\"></tcloud-ui-circle>\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-cubes></tcloud-ui-cubes> -->\n <tcloud-ui-circle [full]=\"full\"></tcloud-ui-circle>\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-cubes></tcloud-ui-cubes> -->\n <tcloud-ui-circle></tcloud-ui-circle>\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;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"] }] }); }
|
|
4576
4596
|
}
|
|
4577
4597
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TCloudUiLoadingComponent, decorators: [{
|
|
4578
4598
|
type: Component,
|
|
4579
|
-
args: [{ selector: 'tcloud-ui-loading', standalone: true, imports: [CommonModule, TCloudUiCubesComponent, TCloudUiCircleComponent], template: "<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
|
|
4580
|
-
}], ctorParameters: () => [], propDecorators: {
|
|
4599
|
+
args: [{ selector: 'tcloud-ui-loading', standalone: true, imports: [CommonModule, TCloudUiCubesComponent, TCloudUiCircleComponent], 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 [onlyIcon]=\"onlyIcon\"></tcloud-ui-circle>\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 [onlyIcon]=\"true\"></tcloud-ui-circle>\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-cubes></tcloud-ui-cubes> -->\n <tcloud-ui-circle [full]=\"full\"></tcloud-ui-circle>\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-cubes></tcloud-ui-cubes> -->\n <tcloud-ui-circle></tcloud-ui-circle>\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;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"] }]
|
|
4600
|
+
}], ctorParameters: () => [], propDecorators: { mode: [{
|
|
4601
|
+
type: Input
|
|
4602
|
+
}], onlyInline: [{
|
|
4603
|
+
type: Input
|
|
4604
|
+
}], onlyIcon: [{
|
|
4605
|
+
type: Input
|
|
4606
|
+
}], full: [{
|
|
4581
4607
|
type: Input
|
|
4582
4608
|
}], loading: [{
|
|
4583
4609
|
type: Input
|