@indice/ng-components 0.2.173-beta.6 → 0.2.173-beta.8

package/fesm2020/indice-ng-components.mjs

@@ -2592,6 +2592,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImpor
                 args: [ContentTileHeaderComponent]
             }] } });
 
+class StatsGridComponent {
+    constructor() {
+        this.busy = false;
+        this.count = 6;
+        this.loader = ['', '', '', '', '', ''];
+        this.mode = 'normal';
+        this.labels = ['Online', 'Offline', 'Faulted'];
+        this.values = [10, 20, 30];
+        this.colors = [
+            'rgb(53, 177, 201, 0.6)',
+            'rgb(168, 162, 158, 0.2)',
+            'rgb(233, 96, 96, 0.8)'
+        ];
+    }
+    ngOnChanges(changes) {
+        if (changes.count) {
+            this.loader = [];
+            for (let i = 0; i <= this.count; i++) {
+                this.loader.push('');
+            }
+        }
+    }
+    isNumber(value) {
+        return !isNaN(Number(value));
+        ;
+    }
+}
+StatsGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: StatsGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+StatsGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: StatsGridComponent, selector: "lib-stats-grid", inputs: { busy: "busy", count: "count", mode: "mode", labels: "labels", values: "values", colors: "colors" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"!busy\">\n    <ul role=\"list\" class=\"grid gap-1\"\n        [class.grid-cols-3]=\"mode==='normal'\"\n        [class.grid-cols-5]=\"mode!=='normal'\"\n        [class.grid-flow-col]=\"mode!=='normal'\">\n      <ng-container *ngFor=\"let value of values; index as i\">\n        <li class=\"col-span-1 flex pb-2\" *ngIf=\"mode==='normal'\">\n          <div class=\"grid-cols-1 border-l-2 px-1\" [style]=\"'border-color:' + colors[i]\">\n            <div class=\"text-xs text-ellipsis overflow-hidden\">{{labels[i]}}</div>\n            <div *ngIf=\"isNumber(values[i])\" class=\"font-medium text-sm md:text-lg text-ellipsis overflow-hidden\">{{values[i] | number:'1.0-2':'el'}}</div>\n            <div *ngIf=\"!isNumber(values[i])\" class=\"font-medium text-sm md:text-lg text-ellipsis overflow-hidden\">{{values[i]}}</div>\n          </div>\n        </li>\n        <li class=\"col-span-1 flex pb-2\" *ngIf=\"mode!=='normal'\">\n          <div class=\"grid-cols-1 border-l-2 pl-1 pr-2\" [style]=\"'border-color:' + colors[i]\">\n            <div *ngIf=\"isNumber(values[i])\" class=\"font-medium text-xs lg:text-sm text-ellipsis overflow-hidden\">{{values[i] | number:'1.0-2':'el'}}</div>\n            <div *ngIf=\"!isNumber(values[i])\" class=\"font-medium text-xs lg:text-sm text-ellipsis overflow-hidden\">{{values[i]}}</div>\n            <div class=\"text-xs max-w-18 lg:w-auto truncate text-ellipsis overflow-hidden\">{{labels[i]}}</div>\n          </div>\n        </li>\n      </ng-container>\n    </ul>\n  </div>\n  <div *ngIf=\"busy\">\n    <ul role=\"list\" class=\"grid gap-1\"\n        [class.grid-cols-3]=\"mode==='normal'\"\n        [class.grid-cols-5]=\"mode!=='normal'\"\n        [class.grid-flow-col]=\"mode!=='normal'\">\n      <ng-container *ngFor=\"let value of values; index as i\">\n        <li class=\"animate-pulse col-span-1 flex pb-2\" *ngIf=\"mode==='normal'\">\n          <div class=\"grid-cols-1 border-l-2 px-1\" style=\"border-color:rgb(168, 162, 158, 0.2)\">\n            <div class=\"rounded-md bg-slate-400/25 h-3 w-14\"></div>\n            <div class=\"rounded-md bg-slate-400/25 mt-2 h-4 w-6\"></div>\n          </div>\n        </li>\n        <li class=\"animate-pulse col-span-1 flex pb-2\" *ngIf=\"mode!=='normal'\">\n          <div class=\"grid-cols-1 border-l-2 pl-1 pr-2\" style=\"border-color:rgb(168, 162, 158, 0.2)\">\n            <div class=\"rounded-md bg-slate-400/25 h-3 w-14\"></div>\n            <div class=\"rounded-md bg-slate-400/25 mt-2 h-4 w-6\"></div>\n          </div>\n        </li>\n      </ng-container>\n    </ul>\n  </div>  ", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: StatsGridComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-stats-grid', template: "<div *ngIf=\"!busy\">\n    <ul role=\"list\" class=\"grid gap-1\"\n        [class.grid-cols-3]=\"mode==='normal'\"\n        [class.grid-cols-5]=\"mode!=='normal'\"\n        [class.grid-flow-col]=\"mode!=='normal'\">\n      <ng-container *ngFor=\"let value of values; index as i\">\n        <li class=\"col-span-1 flex pb-2\" *ngIf=\"mode==='normal'\">\n          <div class=\"grid-cols-1 border-l-2 px-1\" [style]=\"'border-color:' + colors[i]\">\n            <div class=\"text-xs text-ellipsis overflow-hidden\">{{labels[i]}}</div>\n            <div *ngIf=\"isNumber(values[i])\" class=\"font-medium text-sm md:text-lg text-ellipsis overflow-hidden\">{{values[i] | number:'1.0-2':'el'}}</div>\n            <div *ngIf=\"!isNumber(values[i])\" class=\"font-medium text-sm md:text-lg text-ellipsis overflow-hidden\">{{values[i]}}</div>\n          </div>\n        </li>\n        <li class=\"col-span-1 flex pb-2\" *ngIf=\"mode!=='normal'\">\n          <div class=\"grid-cols-1 border-l-2 pl-1 pr-2\" [style]=\"'border-color:' + colors[i]\">\n            <div *ngIf=\"isNumber(values[i])\" class=\"font-medium text-xs lg:text-sm text-ellipsis overflow-hidden\">{{values[i] | number:'1.0-2':'el'}}</div>\n            <div *ngIf=\"!isNumber(values[i])\" class=\"font-medium text-xs lg:text-sm text-ellipsis overflow-hidden\">{{values[i]}}</div>\n            <div class=\"text-xs max-w-18 lg:w-auto truncate text-ellipsis overflow-hidden\">{{labels[i]}}</div>\n          </div>\n        </li>\n      </ng-container>\n    </ul>\n  </div>\n  <div *ngIf=\"busy\">\n    <ul role=\"list\" class=\"grid gap-1\"\n        [class.grid-cols-3]=\"mode==='normal'\"\n        [class.grid-cols-5]=\"mode!=='normal'\"\n        [class.grid-flow-col]=\"mode!=='normal'\">\n      <ng-container *ngFor=\"let value of values; index as i\">\n        <li class=\"animate-pulse col-span-1 flex pb-2\" *ngIf=\"mode==='normal'\">\n          <div class=\"grid-cols-1 border-l-2 px-1\" style=\"border-color:rgb(168, 162, 158, 0.2)\">\n            <div class=\"rounded-md bg-slate-400/25 h-3 w-14\"></div>\n            <div class=\"rounded-md bg-slate-400/25 mt-2 h-4 w-6\"></div>\n          </div>\n        </li>\n        <li class=\"animate-pulse col-span-1 flex pb-2\" *ngIf=\"mode!=='normal'\">\n          <div class=\"grid-cols-1 border-l-2 pl-1 pr-2\" style=\"border-color:rgb(168, 162, 158, 0.2)\">\n            <div class=\"rounded-md bg-slate-400/25 h-3 w-14\"></div>\n            <div class=\"rounded-md bg-slate-400/25 mt-2 h-4 w-6\"></div>\n          </div>\n        </li>\n      </ng-container>\n    </ul>\n  </div>  " }]
+        }], ctorParameters: function () { return []; }, propDecorators: { busy: [{
+                type: Input
+            }], count: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], labels: [{
+                type: Input
+            }], values: [{
+                type: Input
+            }], colors: [{
+                type: Input
+            }] } });
+
 class DynamicComponentHostDirective {
     constructor(viewContainerRef) {
         this.viewContainerRef = viewContainerRef;
@@ -4596,6 +4642,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImpor
                     args: [MODAL_CONFIG_DEFAULT_OVERRIDE]
                 }] }]; } });
 
+class ProgressBarComponent {
+    constructor() {
+        this.value = 0;
+        this.total = 0;
+        this.text = undefined;
+        this.percentage = 0;
+    }
+    ngOnChanges(changes) {
+        if (changes.value || changes.total) {
+            this.calcPercentage();
+        }
+    }
+    calcPercentage() {
+        if (this.total > 0) {
+            this.percentage = (this.value / this.total) * 100;
+        }
+        else {
+            this.percentage = 0;
+        }
+    }
+}
+ProgressBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ProgressBarComponent, selector: "lib-progress-bar", inputs: { value: "value", total: "total", text: "text" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"flex grid grid-cols-1\">\n    <div class=\"text-xs mt-2 truncate text-ellipsis\">{{value}}/{{total}} {{text}}</div>\n    <div class=\"flex mt-1 h-4 rounded-md backdrop-blur-sm bg-slate-200/25\">\n      <div class=\"h-2 m-1 rounded-md bg-sky-200 transition-[width] ease duration-300 transform\" [style]=\"'width:' + percentage + '%' \"></div>\n    </div>\n  </div>\n  " });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ProgressBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-progress-bar', template: "<div class=\"flex grid grid-cols-1\">\n    <div class=\"text-xs mt-2 truncate text-ellipsis\">{{value}}/{{total}} {{text}}</div>\n    <div class=\"flex mt-1 h-4 rounded-md backdrop-blur-sm bg-slate-200/25\">\n      <div class=\"h-2 m-1 rounded-md bg-sky-200 transition-[width] ease duration-300 transform\" [style]=\"'width:' + percentage + '%' \"></div>\n    </div>\n  </div>\n  " }]
+        }], ctorParameters: function () { return []; }, propDecorators: { value: [{
+                type: Input
+            }], total: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }] } });
+
 class IndiceComponentsModule {
     static forRoot() {
         return {
@@ -4665,7 +4745,9 @@ IndiceComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         ToggleButtonsListComponent,
         ContentTileComponent,
         ContentTileItemComponent,
-        ContentTileHeaderComponent], imports: [CommonModule,
+        ContentTileHeaderComponent,
+        StatsGridComponent,
+        ProgressBarComponent], imports: [CommonModule,
         RouterModule,
         IndiceAuthModule,
         FormsModule], exports: [AddressPipe,
@@ -4714,7 +4796,8 @@ IndiceComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         ToggleButtonsListComponent,
         ContentTileComponent,
         ContentTileItemComponent,
-        ContentTileHeaderComponent] });
+        ContentTileHeaderComponent,
+        StatsGridComponent] });
 IndiceComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: IndiceComponentsModule, imports: [CommonModule,
         RouterModule,
         IndiceAuthModule,
@@ -4779,7 +4862,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImpor
                         ToggleButtonsListComponent,
                         ContentTileComponent,
                         ContentTileItemComponent,
-                        ContentTileHeaderComponent
+                        ContentTileHeaderComponent,
+                        StatsGridComponent,
+                        ProgressBarComponent
                     ],
                     imports: [
                         CommonModule,
@@ -4834,7 +4919,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImpor
                         ToggleButtonsListComponent,
                         ContentTileComponent,
                         ContentTileItemComponent,
-                        ContentTileHeaderComponent
+                        ContentTileHeaderComponent,
+                        StatsGridComponent
                     ]
                 }]
         }] });
@@ -4845,5 +4931,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { APP_LANGUAGES, APP_LINKS, APP_NOTIFICATIONS, AddressPipe, AuthCallbackComponent, AuthRenewComponent, AvatarInitialsComponent, BaseListComponent, BreadcrumbComponent, BreadcrumbItem, BreadcrumbRouteData, BreadcrumbService, ClickOutsideDirective, CollapsiblePanelComponent, ComboboxComponent, ComponentLoaderFactory, ContentTileComponent, ContentTileHeaderComponent, ContentTileItemComponent, DatepickerComponent, DefaultShellConfig, DropDownMenuComponent, DurationFormatPipe, ErrorComponent, ExternalNavLink, FormLayoutComponent, FragmentNavLink, HeaderMetaItem, Icons, IndiceComponentsModule, KpiTileComponent, LIBSTEPPER_ACCESSOR, LIBTABGROUP_ACCESSOR, LibStepComponent, LibStepInfoDirective, LibStepLabelDirective, LibStepperComponent, LibTabComponent, LibTabGroupComponent, LibTabLabelDirective, ListColumnComponent, ListDetailsSectionComponent, ListTileComponent, ListViewComponent, ListViewEmptyStateComponent, ListViewType, LoggedOutComponent, MODAL_CONFIG_DEFAULT_OVERRIDE, MenuOption, Modal, ModalOptions, ModalService, ModelViewLayoutComponent, NULL_TOAST, NavLink, NavLinksListComponent, NotificationNavLink, PageNotFoundComponent, PagerComponent, PagerPosition, RouterViewAction, SCREEN_SIZE, SHELL_CONFIG, ShellFooterComponent, ShellHeaderComponent, ShellLayoutComponent, ShellLayoutType, ShellSidebarComponent, ShellSidebarHeaderComponent, ShortNumberPipe, SidePaneComponent, SidePaneOverlayType, SidePaneSize, SideViewLayoutComponent, SkeletonLoaderComponent, StepState, StepperType, SwitchViewAction, ToastType, ToasterComponent, ToasterContainerComponent, ToasterService, ToggleButtonComponent, ToggleButtonsListComponent, ToggleComponent, UnauthorizedComponent, UserSettingsService, ViewAction, ViewLayoutComponent };
+export { APP_LANGUAGES, APP_LINKS, APP_NOTIFICATIONS, AddressPipe, AuthCallbackComponent, AuthRenewComponent, AvatarInitialsComponent, BaseListComponent, BreadcrumbComponent, BreadcrumbItem, BreadcrumbRouteData, BreadcrumbService, ClickOutsideDirective, CollapsiblePanelComponent, ComboboxComponent, ComponentLoaderFactory, ContentTileComponent, ContentTileHeaderComponent, ContentTileItemComponent, DatepickerComponent, DefaultShellConfig, DropDownMenuComponent, DurationFormatPipe, ErrorComponent, ExternalNavLink, FormLayoutComponent, FragmentNavLink, HeaderMetaItem, Icons, IndiceComponentsModule, KpiTileComponent, LIBSTEPPER_ACCESSOR, LIBTABGROUP_ACCESSOR, LibStepComponent, LibStepInfoDirective, LibStepLabelDirective, LibStepperComponent, LibTabComponent, LibTabGroupComponent, LibTabLabelDirective, ListColumnComponent, ListDetailsSectionComponent, ListTileComponent, ListViewComponent, ListViewEmptyStateComponent, ListViewType, LoggedOutComponent, MODAL_CONFIG_DEFAULT_OVERRIDE, MenuOption, Modal, ModalOptions, ModalService, ModelViewLayoutComponent, NULL_TOAST, NavLink, NavLinksListComponent, NotificationNavLink, PageNotFoundComponent, PagerComponent, PagerPosition, RouterViewAction, SCREEN_SIZE, SHELL_CONFIG, ShellFooterComponent, ShellHeaderComponent, ShellLayoutComponent, ShellLayoutType, ShellSidebarComponent, ShellSidebarHeaderComponent, ShortNumberPipe, SidePaneComponent, SidePaneOverlayType, SidePaneSize, SideViewLayoutComponent, SkeletonLoaderComponent, StatsGridComponent, StepState, StepperType, SwitchViewAction, ToastType, ToasterComponent, ToasterContainerComponent, ToasterService, ToggleButtonComponent, ToggleButtonsListComponent, ToggleComponent, UnauthorizedComponent, UserSettingsService, ViewAction, ViewLayoutComponent };
 //# sourceMappingURL=indice-ng-components.mjs.map