@dev-tcloud/tcloud-ui 6.5.4 → 6.5.5
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 +31 -5
- 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
|
@@ -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
|