@colijnit/sharedcomponents 1.0.22 → 1.0.23

package/lib/components/circular-gauge/co-circular-gauge.component.d.ts

@@ -0,0 +1,20 @@
+import { AxisModel, CircularGaugeComponent } from "@syncfusion/ej2-angular-circulargauge";
+import { AnnotationModel } from "@syncfusion/ej2-circulargauge/src/circular-gauge/axes/axis-model";
+export declare class CoCircularGaugeComponent {
+    circulargauge: CircularGaugeComponent;
+    set value(value: number);
+    get value(): number;
+    get color(): string;
+    showClass(): boolean;
+    private _value;
+    private _color;
+    majorTicks: Object;
+    minorTicks: Object;
+    labelStyle: Object;
+    lineStyle: Object;
+    ranges: Object[];
+    getAxes(): AxisModel[];
+    getPointers(): Object[];
+    getAnnotations(): AnnotationModel[];
+    private _setColor;
+}

package/lib/components/circular-gauge/co-circular-gauge.module.d.ts

@@ -0,0 +1,2 @@
+export declare class CoCircularGaugeModule {
+}

package/lib/components/circular-gauge/style/_layout.scss

@@ -0,0 +1,24 @@
+@import "../../../style/mixin";
+
+@include export-module('co-circular-gauge-layout') {
+  .co-circular-gauge {
+    .circular-gauge-wrapper{
+      width: $circular-gauge-width;
+    }
+
+    .circular-gauge {
+      display: block;
+      height: $circular-gauge-height;
+
+    }
+
+    .annotation {
+      display: flex;
+      justify-content: start;
+      font-family: $circular-gauge-annotation-font-family;
+      font-size: $circular-gauge-annotation-font-size;
+      font-weight: $circular-gauge-annotation-font-weight;
+      padding-top: $circular-gauge-annotation-padding-top;
+    }
+  }
+}

package/lib/components/circular-gauge/style/_material-definition.scss

@@ -0,0 +1,8 @@
+$circular-gauge-height: 30px !default;
+$circular-gauge-width: 30px !default;
+
+$circular-gauge-annotation-font-family: $sc-font-family !default;
+$circular-gauge-annotation-font-size: 8px !default;
+$circular-gauge-annotation-font-weight: bold !default;
+$circular-gauge-annotation-color: #525E64 !default;
+$circular-gauge-annotation-padding-top: 2px !default;

package/lib/components/circular-gauge/style/_theme.scss

@@ -0,0 +1,9 @@
+@import "../../../style/mixin";
+
+@include export-module('co-circular-gauge-theme') {
+  .co-circular-gauge {
+    .annotation {
+      color: $circular-gauge-annotation-color;
+    }
+  }
+}

package/lib/components/circular-gauge/style/material.scss

@@ -0,0 +1,5 @@
+@import "./material-definition";
+@import "./layout";
+@import "./theme";
+
+

package/lib/components/linear-gauge/co-linear-gauge.component.d.ts

@@ -0,0 +1,16 @@
+declare enum GaugeColor {
+    Low = "#E0E0E0",
+    Medium = "#F88952",
+    High = "#5FDCB3"
+}
+export declare class CoLinearGaugeComponent {
+    set value(value: number);
+    get value(): number;
+    count: number;
+    showClass(): boolean;
+    private _value;
+    color: GaugeColor;
+    getStyle(): string;
+    private _setColor;
+}
+export {};

package/lib/components/linear-gauge/co-linear-gauge.module.d.ts

@@ -0,0 +1,2 @@
+export declare class CoLinearGaugeModule {
+}

package/lib/components/linear-gauge/style/_layout.scss

@@ -0,0 +1,22 @@
+@import "../../../style/mixin";
+
+@include export-module('co-linear-gauge-layout') {
+  .co-linear-gauge {
+    .linear-gauge {
+      height: $linear-gauge-height;
+      min-width: $linear-gauge-width;
+      max-width: fit-content;
+      margin: $linear-gauge-margin;
+      border: $linear-gauge-border;
+      border-radius: $linear-gauge-border-radius;
+
+      font-family: $linear-gauge-font-family;
+      font-size: $linear-gauge-font-size;
+      font-weight: $linear-gauge-font-weight;
+
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+}

package/lib/components/linear-gauge/style/_material-definition.scss

@@ -0,0 +1,8 @@
+$linear-gauge-font-family: $sc-font-family !default;
+$linear-gauge-font-size: 10px !default;
+$linear-gauge-font-weight: bold !default;
+$linear-gauge-height: 12px !default;
+$linear-gauge-width: 12px !default;
+$linear-gauge-margin: 1px !default;
+$linear-gauge-border: solid 1px !default;
+$linear-gauge-border-radius: 2px !default;

package/lib/components/linear-gauge/style/_theme.scss

@@ -0,0 +1,6 @@
+@import "../../../style/mixin";
+
+@include export-module('co-linear-gauge-theme') {
+  .co-linear-gauge {
+  }
+}

package/lib/components/linear-gauge/style/material.scss

@@ -0,0 +1,5 @@
+@import "./material-definition";
+@import "./layout";
+@import "./theme";
+
+

package/lib/components/statusbar/statusbar.component.d.ts

@@ -0,0 +1,23 @@
+import { EventEmitter } from "@angular/core";
+export interface StatusbarData {
+    label: string;
+    percentage: number;
+    count?: number;
+    totalCount?: number;
+}
+export declare class StatusbarComponent {
+    set statusbarData(value: StatusbarData[]);
+    get statusbarData(): StatusbarData[];
+    statusbarClick: EventEmitter<void>;
+    showClass(): boolean;
+    constructor();
+    showPopup: boolean;
+    popupClass: string;
+    private _statusbarData;
+    private _mouseY;
+    private _windowHeight;
+    onHover(event: any): void;
+    onLeave(): void;
+    onStatusbarClick(): void;
+    setPopupClass(): void;
+}

package/lib/components/statusbar/statusbar.module.d.ts

@@ -0,0 +1,2 @@
+export declare class StatusbarModule {
+}

package/lib/components/statusbar/style/_layout.scss

@@ -0,0 +1,61 @@
+@import "../../../style/mixin";
+
+@include export-module('co-statusbar-layout') {
+  .co-statusbar-wrapper {
+    display: flex;
+    flex-direction: column;;
+    position: relative;
+    font-family: $statusbar-font-family;
+    font-size:$statusbar-font-size;
+    height: $statusbar-height;
+    min-width: $statusbar-min-width;
+    max-width: $statusbar-max-width;
+
+    cursor: pointer;
+
+    .statuses {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+    }
+
+    .status-description-popup{
+      min-height: $statusbar-popup-min-height;
+      min-width: $statusbar-popup-min-width;
+      max-width: $statusbar-popup-max-width;
+      padding: $statusbar-popup-padding;
+      border: $statusbar-popup-border;
+      border-radius: $statusbar-popup-border-radius;
+      z-index: $statusbar-popup-z-index;
+
+      &.dropdown {
+        position: absolute;
+        top: $statusbar-popup-dropdown-position-top;
+        left: 50%;
+        transform: translate(-50%, 0);
+      }
+
+      &.dropup {
+        position: absolute;
+        bottom: $statusbar-popup-dropup-position-down;
+        left: 50%;
+        transform: translate(-50%, 0);
+      }
+    }
+
+    .status-descriptions {
+      display: flex;
+      flex-direction: column;
+
+      .status-description {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+
+        span {
+          padding-left: $statusbar-status-description-padding-left;
+        }
+      }
+    }
+  }
+}

package/lib/components/statusbar/style/_material-definition.scss

@@ -0,0 +1,23 @@
+$statusbar-font-family: $sc-font-family !default;
+$statusbar-font-size: 12px !default;
+
+$statusbar-height: 30px !default;
+$statusbar-min-width: 100px !default;
+$statusbar-max-width: fit-content !default;
+
+$statusbar-background-color: white !default;
+
+$statusbar-popup-min-height: auto !default;
+$statusbar-popup-min-width: 180px !default;
+$statusbar-popup-max-width: fit-content !default;
+$statusbar-popup-padding: 10px !default;
+$statusbar-popup-border: 2px solid !default;
+$statusbar-popup-border-color: white !default;
+$statusbar-popup-border-radius: 10px !default;
+$statusbar-popup-border-box-shadow: 1px 1px 10px 1px #B6BFBF !default;
+$statusbar-popup-z-index: 10 !default;
+
+$statusbar-popup-dropdown-position-top: 30px;
+$statusbar-popup-dropup-position-down: 35px;
+
+$statusbar-status-description-padding-left: 15px !default;

package/lib/components/statusbar/style/_theme.scss

@@ -0,0 +1,16 @@
+@import "../../../style/mixin";
+
+@include export-module('co-statusbar-theme') {
+  .co-statusbar-wrapper {
+    .statusses {
+      background-color: $statusbar-background-color;
+    }
+
+    .status-description-popup {
+      background-color: $statusbar-background-color;
+      border-color: $statusbar-popup-border-color;
+      box-shadow: $statusbar-popup-border-box-shadow;
+    }
+  }
+}
+

package/lib/components/statusbar/style/material.scss

@@ -0,0 +1,6 @@
+@import "./material-definition";
+@import "./layout";
+@import "./theme";
+
+@import "../../circular-gauge/style/material";
+@import "../../linear-gauge/style/material";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colijnit/sharedcomponents",
-  "version": "1.0.22",
+  "version": "1.0.23",
   "private": false,
   "dependencies": {
     "@colijnit/sharedapi": "^1.0.1",

package/public-api.d.ts

@@ -8,4 +8,10 @@ export * from './lib/components/key-pad/key-pad.component';
 export * from './lib/components/key-pad/key-pad.module';
 export * from './lib/components/layout-switcher/layout-switcher.component';
 export * from './lib/components/layout-switcher/layout-switcher.module';
+export * from './lib/components/circular-gauge/co-circular-gauge.component';
+export * from './lib/components/circular-gauge/co-circular-gauge.module';
+export * from './lib/components/linear-gauge/co-linear-gauge.component';
+export * from './lib/components/linear-gauge/co-linear-gauge.module';
+export * from './lib/components/statusbar/statusbar.component';
+export * from './lib/components/statusbar/statusbar.module';
 export * from './lib/service/shared.service';