@tuki-io/tuki-widgets 0.0.194 → 0.0.196

package/fesm2020/tuki-io-tuki-widgets-di2mt.mjs

@@ -877,14 +877,14 @@ class StatCardComponent {
             return Math.ceil(this.stats?.totalUpgraded / this.stats?.total * 100);
     }
     get pendingActivationPercentage() {
-        return Math.ceil(this.stats?.pendingActivation / this.stats?.totalUpgraded * 100);
+        return Math.ceil(this.stats?.totalUpgraded / this.stats?.pendingActivation * 100);
     }
 }
 StatCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StatCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-StatCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: StatCardComponent, selector: "tk-stat-card", inputs: { title: "title", type: "type", readinessStats: "readinessStats", upgradeStatus: "upgradeStatus" }, ngImport: i0, template: "<tk-card [title]=\"title\">\r\n  <ng-container ngProjectAs=\"card-content\">\r\n    <div class=\"card__content-info\">\r\n      <div class=\"card__content-wrapper\">\r\n        <img width=\"42\" [src]=\"'assets/icons/' + type + '.png'\" alt=\"\" />\r\n        <div class=\"card__content-text\">\r\n          <ng-container *ngIf=\"upgradeStatus === 'ready' || upgradeStatus === 'already'\">\r\n            <div class=\"card__content-label\">\r\n              {{ upgradeStatus === 'ready' ? stats?.totalReady : stats?.totalUpgraded }}\r\n              {{ type === 'user' ? 'Users' : 'Sites' }}</div>\r\n            <div class=\"card__content-description\">{{ upgradeStatus === 'ready' ? 'Ready to Upgrade' : 'Already Upgraded' }}</div>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"upgradeStatus === 'pending'\">\r\n            <div class=\"card__content-label\">\r\n              {{ stats?.pendingActivation }}\r\n              {{ 'User' }}</div>\r\n            <div class=\"card__content-description\">{{ 'Ready to activate' }}</div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"card__content-progress-wrapper\">\r\n      <ng-container *ngIf=\"upgradeStatus === 'ready' || upgradeStatus === 'already'\">\r\n        <div class=\"card__content-progress\">\r\n          <div class=\"card__content-progress-label\">\r\n            <span>{{ readyPercentage }}%</span>\r\n            <span>From all {{ stats?.total }} {{ type === 'user' ? 'users' : 'sites' }}</span>\r\n          </div>\r\n          <div class=\"card__content-progress-bar\">\r\n            <div\r\n              class=\"card__content-progress-bar-fill ready\"\r\n              [class.already]=\"upgradeStatus === 'already'\"\r\n              [style.width.%]=\"readyPercentage\"\r\n            ></div>\r\n          </div>\r\n        </div>\r\n        <div *ngIf=\"upgradeStatus === 'already'\" class=\"card__content-progress\">\r\n          <div class=\"card__content-progress-label\">\r\n            <span>{{ upgradedPercentage }}%</span>\r\n            <span>From all {{ stats?.totalReady }} ready {{ type === 'user' ? 'users' : 'sites' }}</span>\r\n          </div>\r\n          <div class=\"card__content-progress-bar\">\r\n            <div\r\n              class=\"card__content-progress-bar-fill ready\"\r\n              [class.already]=\"upgradeStatus === 'already'\"\r\n              [style.width.%]=\"upgradedPercentage\"\r\n            ></div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"upgradeStatus === 'pending'\">\r\n        <div class=\"card__content-progress\">\r\n          <div class=\"card__content-progress-label\">\r\n            <span>{{ pendingActivationPercentage }}%</span>\r\n            <span>From all {{ stats?.totalUpgraded }} {{ 'upgraded users' }}</span>\r\n          </div>\r\n          <div class=\"card__content-progress-bar\">\r\n            <div\r\n              class=\"card__content-progress-bar-fill ready\"\r\n              [class.pending-activation]=\"upgradeStatus === 'pending'\"\r\n              [style.width.%]=\"pendingActivationPercentage\"\r\n            ></div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </ng-container>\r\n</tk-card>\r\n", styles: [":host{display:block;height:100%;box-sizing:border-box}.card__content-info{display:flex;align-items:center;justify-content:space-between}.card__content-text{display:flex;flex-direction:column;gap:.25rem}.card__content-text .card__content-label{font-size:20px}.card__content-text .card__content-description{font-size:12px}.card__content-wrapper{display:flex;align-items:center;justify-content:center;gap:1rem}.card__content-wrapper:first-child{display:flex;gap:.5rem}.card__content-progress-wrapper{display:flex;flex-direction:column;gap:1rem}.card__content-progress{display:flex;flex-direction:column;gap:.25rem;font-size:14px}.card__content-progress .card__content-progress-label{display:flex;align-items:center;justify-content:space-between;padding:.05rem}.card__content-progress .card__content-progress-bar{background-color:#ededed;border-radius:10rem}.card__content-progress .card__content-progress-bar .card__content-progress-bar-fill{height:10px;border-radius:inherit}.ready{background-color:#0a78cc}.already{background-color:#16a693}.pending-activation{background-color:#ddbf45}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CardComponent, selector: "tk-card", inputs: ["title"] }] });
+StatCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: StatCardComponent, selector: "tk-stat-card", inputs: { title: "title", type: "type", readinessStats: "readinessStats", upgradeStatus: "upgradeStatus" }, ngImport: i0, template: "<tk-card [title]=\"title\">\r\n  <ng-container ngProjectAs=\"card-content\">\r\n    <div class=\"card__content-info\">\r\n      <div class=\"card__content-wrapper\">\r\n        <img width=\"42\" [src]=\"'assets/icons/' + type + '.png'\" alt=\"\" />\r\n        <div class=\"card__content-text\">\r\n          <ng-container *ngIf=\"upgradeStatus === 'ready' || upgradeStatus === 'already'\">\r\n            <div class=\"card__content-label\">\r\n              {{ upgradeStatus === 'ready' ? stats?.totalReady : stats?.totalUpgraded }}\r\n              {{ type === 'user' ? 'Users' : 'Sites' }}</div>\r\n            <div class=\"card__content-description\">{{ upgradeStatus === 'ready' ? 'Ready to Upgrade' : 'Already Upgraded' }}</div>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"upgradeStatus === 'pending'\">\r\n            <div class=\"card__content-label\">\r\n              {{ stats?.pendingActivation }}\r\n              {{ 'User' }}</div>\r\n            <div class=\"card__content-description\">{{ 'Ready to activate' }}</div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"card__content-progress-wrapper\">\r\n      <ng-container *ngIf=\"upgradeStatus === 'ready' || upgradeStatus === 'already'\">\r\n        <div class=\"card__content-progress\">\r\n          <div class=\"card__content-progress-label\">\r\n            <span>{{ readyPercentage }}%</span>\r\n            <span>From all {{ stats?.total }} {{ type === 'user' ? 'users' : 'sites' }}</span>\r\n          </div>\r\n          <div class=\"card__content-progress-bar\">\r\n            <div\r\n              class=\"card__content-progress-bar-fill ready\"\r\n              [class.already]=\"upgradeStatus === 'already'\"\r\n              [style.width.%]=\"readyPercentage\"\r\n            ></div>\r\n          </div>\r\n        </div>\r\n        <div *ngIf=\"upgradeStatus === 'already'\" class=\"card__content-progress\">\r\n          <div class=\"card__content-progress-label\">\r\n            <span>{{ upgradedPercentage }}%</span>\r\n            <span>From all {{ stats?.totalReady }} ready {{ type === 'user' ? 'users' : 'sites' }}</span>\r\n          </div>\r\n          <div class=\"card__content-progress-bar\">\r\n            <div\r\n              class=\"card__content-progress-bar-fill ready\"\r\n              [class.already]=\"upgradeStatus === 'already'\"\r\n              [style.width.%]=\"upgradedPercentage\"\r\n            ></div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"upgradeStatus === 'pending'\">\r\n        <div class=\"card__content-progress\">\r\n          <div class=\"card__content-progress-label\">\r\n            <span>{{ pendingActivationPercentage }}%</span>\r\n            <span>From all {{ stats?.totalUpgraded }} {{ 'upgraded users' }}</span>\r\n          </div>\r\n          <div class=\"card__content-progress-bar\" style=\"overflow: hidden;\">\r\n            <div\r\n              class=\"card__content-progress-bar-fill ready\"\r\n              [class.pending-activation]=\"upgradeStatus === 'pending'\"\r\n              [style.width.%]=\"pendingActivationPercentage\"\r\n            ></div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </ng-container>\r\n</tk-card>\r\n", styles: [":host{display:block;height:100%;box-sizing:border-box}.card__content-info{display:flex;align-items:center;justify-content:space-between}.card__content-text{display:flex;flex-direction:column;gap:.25rem}.card__content-text .card__content-label{font-size:20px}.card__content-text .card__content-description{font-size:12px}.card__content-wrapper{display:flex;align-items:center;justify-content:center;gap:1rem}.card__content-wrapper:first-child{display:flex;gap:.5rem}.card__content-progress-wrapper{display:flex;flex-direction:column;gap:1rem}.card__content-progress{display:flex;flex-direction:column;gap:.25rem;font-size:14px}.card__content-progress .card__content-progress-label{display:flex;align-items:center;justify-content:space-between;padding:.05rem}.card__content-progress .card__content-progress-bar{background-color:#ededed;border-radius:10rem}.card__content-progress .card__content-progress-bar .card__content-progress-bar-fill{height:10px;border-radius:inherit}.ready{background-color:#0a78cc}.already{background-color:#16a693}.pending-activation{background-color:#ddbf45}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CardComponent, selector: "tk-card", inputs: ["title"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StatCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tk-stat-card', template: "<tk-card [title]=\"title\">\r\n  <ng-container ngProjectAs=\"card-content\">\r\n    <div class=\"card__content-info\">\r\n      <div class=\"card__content-wrapper\">\r\n        <img width=\"42\" [src]=\"'assets/icons/' + type + '.png'\" alt=\"\" />\r\n        <div class=\"card__content-text\">\r\n          <ng-container *ngIf=\"upgradeStatus === 'ready' || upgradeStatus === 'already'\">\r\n            <div class=\"card__content-label\">\r\n              {{ upgradeStatus === 'ready' ? stats?.totalReady : stats?.totalUpgraded }}\r\n              {{ type === 'user' ? 'Users' : 'Sites' }}</div>\r\n            <div class=\"card__content-description\">{{ upgradeStatus === 'ready' ? 'Ready to Upgrade' : 'Already Upgraded' }}</div>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"upgradeStatus === 'pending'\">\r\n            <div class=\"card__content-label\">\r\n              {{ stats?.pendingActivation }}\r\n              {{ 'User' }}</div>\r\n            <div class=\"card__content-description\">{{ 'Ready to activate' }}</div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"card__content-progress-wrapper\">\r\n      <ng-container *ngIf=\"upgradeStatus === 'ready' || upgradeStatus === 'already'\">\r\n        <div class=\"card__content-progress\">\r\n          <div class=\"card__content-progress-label\">\r\n            <span>{{ readyPercentage }}%</span>\r\n            <span>From all {{ stats?.total }} {{ type === 'user' ? 'users' : 'sites' }}</span>\r\n          </div>\r\n          <div class=\"card__content-progress-bar\">\r\n            <div\r\n              class=\"card__content-progress-bar-fill ready\"\r\n              [class.already]=\"upgradeStatus === 'already'\"\r\n              [style.width.%]=\"readyPercentage\"\r\n            ></div>\r\n          </div>\r\n        </div>\r\n        <div *ngIf=\"upgradeStatus === 'already'\" class=\"card__content-progress\">\r\n          <div class=\"card__content-progress-label\">\r\n            <span>{{ upgradedPercentage }}%</span>\r\n            <span>From all {{ stats?.totalReady }} ready {{ type === 'user' ? 'users' : 'sites' }}</span>\r\n          </div>\r\n          <div class=\"card__content-progress-bar\">\r\n            <div\r\n              class=\"card__content-progress-bar-fill ready\"\r\n              [class.already]=\"upgradeStatus === 'already'\"\r\n              [style.width.%]=\"upgradedPercentage\"\r\n            ></div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"upgradeStatus === 'pending'\">\r\n        <div class=\"card__content-progress\">\r\n          <div class=\"card__content-progress-label\">\r\n            <span>{{ pendingActivationPercentage }}%</span>\r\n            <span>From all {{ stats?.totalUpgraded }} {{ 'upgraded users' }}</span>\r\n          </div>\r\n          <div class=\"card__content-progress-bar\">\r\n            <div\r\n              class=\"card__content-progress-bar-fill ready\"\r\n              [class.pending-activation]=\"upgradeStatus === 'pending'\"\r\n              [style.width.%]=\"pendingActivationPercentage\"\r\n            ></div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </ng-container>\r\n</tk-card>\r\n", styles: [":host{display:block;height:100%;box-sizing:border-box}.card__content-info{display:flex;align-items:center;justify-content:space-between}.card__content-text{display:flex;flex-direction:column;gap:.25rem}.card__content-text .card__content-label{font-size:20px}.card__content-text .card__content-description{font-size:12px}.card__content-wrapper{display:flex;align-items:center;justify-content:center;gap:1rem}.card__content-wrapper:first-child{display:flex;gap:.5rem}.card__content-progress-wrapper{display:flex;flex-direction:column;gap:1rem}.card__content-progress{display:flex;flex-direction:column;gap:.25rem;font-size:14px}.card__content-progress .card__content-progress-label{display:flex;align-items:center;justify-content:space-between;padding:.05rem}.card__content-progress .card__content-progress-bar{background-color:#ededed;border-radius:10rem}.card__content-progress .card__content-progress-bar .card__content-progress-bar-fill{height:10px;border-radius:inherit}.ready{background-color:#0a78cc}.already{background-color:#16a693}.pending-activation{background-color:#ddbf45}\n"] }]
+            args: [{ selector: 'tk-stat-card', template: "<tk-card [title]=\"title\">\r\n  <ng-container ngProjectAs=\"card-content\">\r\n    <div class=\"card__content-info\">\r\n      <div class=\"card__content-wrapper\">\r\n        <img width=\"42\" [src]=\"'assets/icons/' + type + '.png'\" alt=\"\" />\r\n        <div class=\"card__content-text\">\r\n          <ng-container *ngIf=\"upgradeStatus === 'ready' || upgradeStatus === 'already'\">\r\n            <div class=\"card__content-label\">\r\n              {{ upgradeStatus === 'ready' ? stats?.totalReady : stats?.totalUpgraded }}\r\n              {{ type === 'user' ? 'Users' : 'Sites' }}</div>\r\n            <div class=\"card__content-description\">{{ upgradeStatus === 'ready' ? 'Ready to Upgrade' : 'Already Upgraded' }}</div>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"upgradeStatus === 'pending'\">\r\n            <div class=\"card__content-label\">\r\n              {{ stats?.pendingActivation }}\r\n              {{ 'User' }}</div>\r\n            <div class=\"card__content-description\">{{ 'Ready to activate' }}</div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"card__content-progress-wrapper\">\r\n      <ng-container *ngIf=\"upgradeStatus === 'ready' || upgradeStatus === 'already'\">\r\n        <div class=\"card__content-progress\">\r\n          <div class=\"card__content-progress-label\">\r\n            <span>{{ readyPercentage }}%</span>\r\n            <span>From all {{ stats?.total }} {{ type === 'user' ? 'users' : 'sites' }}</span>\r\n          </div>\r\n          <div class=\"card__content-progress-bar\">\r\n            <div\r\n              class=\"card__content-progress-bar-fill ready\"\r\n              [class.already]=\"upgradeStatus === 'already'\"\r\n              [style.width.%]=\"readyPercentage\"\r\n            ></div>\r\n          </div>\r\n        </div>\r\n        <div *ngIf=\"upgradeStatus === 'already'\" class=\"card__content-progress\">\r\n          <div class=\"card__content-progress-label\">\r\n            <span>{{ upgradedPercentage }}%</span>\r\n            <span>From all {{ stats?.totalReady }} ready {{ type === 'user' ? 'users' : 'sites' }}</span>\r\n          </div>\r\n          <div class=\"card__content-progress-bar\">\r\n            <div\r\n              class=\"card__content-progress-bar-fill ready\"\r\n              [class.already]=\"upgradeStatus === 'already'\"\r\n              [style.width.%]=\"upgradedPercentage\"\r\n            ></div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"upgradeStatus === 'pending'\">\r\n        <div class=\"card__content-progress\">\r\n          <div class=\"card__content-progress-label\">\r\n            <span>{{ pendingActivationPercentage }}%</span>\r\n            <span>From all {{ stats?.totalUpgraded }} {{ 'upgraded users' }}</span>\r\n          </div>\r\n          <div class=\"card__content-progress-bar\" style=\"overflow: hidden;\">\r\n            <div\r\n              class=\"card__content-progress-bar-fill ready\"\r\n              [class.pending-activation]=\"upgradeStatus === 'pending'\"\r\n              [style.width.%]=\"pendingActivationPercentage\"\r\n            ></div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </ng-container>\r\n</tk-card>\r\n", styles: [":host{display:block;height:100%;box-sizing:border-box}.card__content-info{display:flex;align-items:center;justify-content:space-between}.card__content-text{display:flex;flex-direction:column;gap:.25rem}.card__content-text .card__content-label{font-size:20px}.card__content-text .card__content-description{font-size:12px}.card__content-wrapper{display:flex;align-items:center;justify-content:center;gap:1rem}.card__content-wrapper:first-child{display:flex;gap:.5rem}.card__content-progress-wrapper{display:flex;flex-direction:column;gap:1rem}.card__content-progress{display:flex;flex-direction:column;gap:.25rem;font-size:14px}.card__content-progress .card__content-progress-label{display:flex;align-items:center;justify-content:space-between;padding:.05rem}.card__content-progress .card__content-progress-bar{background-color:#ededed;border-radius:10rem}.card__content-progress .card__content-progress-bar .card__content-progress-bar-fill{height:10px;border-radius:inherit}.ready{background-color:#0a78cc}.already{background-color:#16a693}.pending-activation{background-color:#ddbf45}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], type: [{
@@ -2231,7 +2231,6 @@ class PendingActivationUsersCardComponent {
             .subscribe(({ summary, pendingActivation }) => {
             this.readinessStats = {
                 ...summary,
-                totalUpgradedUsers: 1,
                 pendingActivation
             };
             this.loading = false;