@mxtommy/kip 1.2.1 → 1.3.0

package/src/app/widget-gauge-ng-linear/widget-gauge-ng-linear.component.html

@@ -1,126 +1,126 @@
-<div style="margin: 0px; padding: 0px; width: 100%; height: 100%;">
-  <div [className]="isGaugeVertical ? 'verticalLinearWrapper' : 'horizontalLinearWrapper'" #linearWrapperDiv (resized)="onResized($event)">
-    <linear-gauge class="linearGauge" id="{{widgetUUID}}" #linearGauge
-      [attr.width]="gaugeOptions.width"
-      [attr.height]="gaugeOptions.height"
-
-      [attr.title]="config.displayName"
-      font-title="arial"
-      [attr.font-title-size]="gaugeOptions.fontTitleSize"
-      font-title-weight="bold"
-      [attr.color-title]="gaugeOptions.colorTitle"
-
-      [attr.units]="config.paths['gaugePath'].convertUnitTo"
-      [value]="dataValue"
-
-      [attr.min-value]="gaugeOptions.minValue"
-      [attr.max-value]="gaugeOptions.maxValue"
-      font-Units="arial"
-      [attr.font-Units-size]="gaugeOptions.fontUnitsSize"
-      font-Units-weight=""
-      [attr.color-units]="gaugeOptions.colorUnits"
-
-      borders="false"
-      border-outer-width="0"
-      color-border-outer="red"
-      color-border-outer-end="red"
-      border-middle-width="0"
-      color-border-middle="#63afdf"
-      color-border-middle-end="#63afdf"
-      border-inner-width="0"
-      color-border-inner="red"
-      color-border-inner-end="#121212"
-      border-shadow-width="0"
-
-      [attr.color-plate]="gaugeOptions.colorPlate"
-      [attr.color-plate-end]="gaugeOptions.colorPlate"
-      border-radius="0"
-
-      bar-progress="true"
-      [attr.bar-width]="gaugeOptions.barWidth"
-      [attr.bar-length]="gaugeOptions.barLength"
-      bar-begin-circle="false"
-      bar-stroke-width="0"
-      bar-shadow="0"
-
-      [attr.color-bar]="gaugeOptions.colorBar"
-      color-bar-end=""
-      [attr.color-bar-progress]="gaugeOptions.colorBarProgress"
-      [attr.color-bar-progress-end]="gaugeOptions.colorBarProgressEnd"
-      color-bar-stroke="0"
-
-      [attr.value-box]="gaugeOptions.valueBox"
-      value-box-stroke="0"
-      color-value-box-rect=""
-      color-value-box-rect-end=""
-      [attr.value-box-width]="gaugeOptions.valueBoxWidth"
-      [attr.value-box-border-radius]="gaugeOptions.valueBoxBorderRadius"
-      [attr.color-value-box-background]="gaugeOptions.colorBar"
-      value-text=""
-      [attr.value-int]="gaugeOptions.valueInt"
-      [attr.value-dec]="gaugeOptions.valueDec"
-      font-value="arial"
-      font-value-size="50"
-      font-value-weight="bold"
-      [attr.color-value-text]="gaugeOptions.colorValueText"
-      value-text-shadow="false"
-      color-value-box-shadow=""
-
-      [attr.exact-ticks]="gaugeOptions.exactTicks"
-      [attr.stroke-ticks]="gaugeOptions.strokeTicks"
-      color-stroke-ticks=""
-      [attr.tick-side]="gaugeOptions.tickSide"
-      [attr.ticks-padding]="gaugeOptions.ticksPadding"
-      [attr.major-ticks]="gaugeOptions.majorTicks"
-      [attr.major-ticks-int]="gaugeOptions.majorTicksInt"
-      [attr.major-ticks-dec]="gaugeOptions.majorTicksDec"
-      [attr.color-major-ticks]="gaugeOptions.colorMajorTicks"
-      [attr.ticks-width]="gaugeOptions.ticksWidth"
-      [attr.minor-ticks]="gaugeOptions.minorTicks"
-      [attr.color-minor-ticks]="gaugeOptions.colorMinorTicks"
-      [attr.number-side]="gaugeOptions.numberSide"
-      [attr.numbers-margin]="gaugeOptions.numbersMargin"
-      font-numbers="arial"
-      [attr.font-numbers-size]="gaugeOptions.fontNumbersSize"
-      font-numbers-weight=""
-      [attr.color-numbers]="gaugeOptions.colorNumbers"
-      [attr.ticks-width-minor]="gaugeOptions.ticksWidthMinor"
-      [attr.highlights]="gaugeOptions.highlights|json"
-      [attr.highlights-width]="gaugeOptions.highlightsWidth"
-      [attr.needle-side]="gaugeOptions.needleSide"
-
-      animation="true"
-      animation-duration="500"
-      animation-rule="linear"
-      animated-value="false"
-      animate-on-init="false"
-
-      [attr.needle]="gaugeOptions.needle"
-      [attr.needle-end]="gaugeOptions.needleEnd"
-      [attr.needle-start]="gaugeOptions.needleStart"
-      [attr.needle-shadow]="gaugeOptions.needleShadow"
-      [attr.needle-side]="gaugeOptions.needleSide"
-      [attr.needle-width]="gaugeOptions.needleWidth"
-      [attr.needle-type]="gaugeOptions.needleType"
-      [attr.color-needle]="gaugeOptions.colorNeedle"
-      [attr.color-needle-end]="gaugeOptions.colorNeedleEnd"
-      [attr.color-needle-shadow-up]="gaugeOptions.colorNeedleShadowUp"
-      [attr.color-needle-shadow-down]="gaugeOptions.colorNeedleShadowDown"
-    ></linear-gauge>
-  </div>
-
-  <div #primary class='primary' style="display: none;"></div>
-  <div #accent class='accent' style="display: none;"></div>
-  <div #warn class='warn' style="display: none;"></div>
-  <div #primaryDark class='primaryDark' style="display: none;"></div>
-  <div #accentDark class='accentDark' style="display: none;"></div>
-  <div #warnDark class='warnDark' style="display: none;"></div>
-  <div #background class='background' style="display: none;"></div>
-  <div #text class='text' style="display: none;"></div>
-
-  <div class="settingsButton" *ngIf="unlockStatus">
-    <button  color="accent" mat-mini-fab class="selector-fab" (click)="openWidgetSettings()">
-        <span class="fa fa-cog"></span>
-    </button>
-  </div>
-</div>
+<div style="margin: 0px; padding: 0px; width: 100%; height: 100%;">
+  <div [className]="isGaugeVertical ? 'verticalLinearWrapper' : 'horizontalLinearWrapper'" #linearWrapperDiv (resized)="onResized($event)">
+    <linear-gauge class="linearGauge" id="{{widgetUUID}}" #linearGauge
+      [attr.width]="gaugeOptions.width"
+      [attr.height]="gaugeOptions.height"
+
+      [attr.title]="config.displayName"
+      font-title="arial"
+      [attr.font-title-size]="gaugeOptions.fontTitleSize"
+      font-title-weight="bold"
+      [attr.color-title]="gaugeOptions.colorTitle"
+
+      [attr.units]="config.paths['gaugePath'].convertUnitTo"
+      [value]="dataValue"
+
+      [attr.min-value]="gaugeOptions.minValue"
+      [attr.max-value]="gaugeOptions.maxValue"
+      font-Units="arial"
+      [attr.font-Units-size]="gaugeOptions.fontUnitsSize"
+      font-Units-weight=""
+      [attr.color-units]="gaugeOptions.colorUnits"
+
+      borders="false"
+      border-outer-width="0"
+      color-border-outer="red"
+      color-border-outer-end="red"
+      border-middle-width="0"
+      color-border-middle="#63afdf"
+      color-border-middle-end="#63afdf"
+      border-inner-width="0"
+      color-border-inner="red"
+      color-border-inner-end="#121212"
+      border-shadow-width="0"
+
+      [attr.color-plate]="gaugeOptions.colorPlate"
+      [attr.color-plate-end]="gaugeOptions.colorPlate"
+      border-radius="0"
+
+      bar-progress="true"
+      [attr.bar-width]="gaugeOptions.barWidth"
+      [attr.bar-length]="gaugeOptions.barLength"
+      bar-begin-circle="false"
+      bar-stroke-width="0"
+      bar-shadow="0"
+
+      [attr.color-bar]="gaugeOptions.colorBar"
+      color-bar-end=""
+      [attr.color-bar-progress]="gaugeOptions.colorBarProgress"
+      [attr.color-bar-progress-end]="gaugeOptions.colorBarProgressEnd"
+      color-bar-stroke="0"
+
+      [attr.value-box]="gaugeOptions.valueBox"
+      value-box-stroke="0"
+      color-value-box-rect=""
+      color-value-box-rect-end=""
+      [attr.value-box-width]="gaugeOptions.valueBoxWidth"
+      [attr.value-box-border-radius]="gaugeOptions.valueBoxBorderRadius"
+      [attr.color-value-box-background]="gaugeOptions.colorBar"
+      value-text=""
+      [attr.value-int]="gaugeOptions.valueInt"
+      [attr.value-dec]="gaugeOptions.valueDec"
+      font-value="arial"
+      font-value-size="50"
+      font-value-weight="bold"
+      [attr.color-value-text]="gaugeOptions.colorValueText"
+      value-text-shadow="false"
+      color-value-box-shadow=""
+
+      [attr.exact-ticks]="gaugeOptions.exactTicks"
+      [attr.stroke-ticks]="gaugeOptions.strokeTicks"
+      color-stroke-ticks=""
+      [attr.tick-side]="gaugeOptions.tickSide"
+      [attr.ticks-padding]="gaugeOptions.ticksPadding"
+      [attr.major-ticks]="gaugeOptions.majorTicks"
+      [attr.major-ticks-int]="gaugeOptions.majorTicksInt"
+      [attr.major-ticks-dec]="gaugeOptions.majorTicksDec"
+      [attr.color-major-ticks]="gaugeOptions.colorMajorTicks"
+      [attr.ticks-width]="gaugeOptions.ticksWidth"
+      [attr.minor-ticks]="gaugeOptions.minorTicks"
+      [attr.color-minor-ticks]="gaugeOptions.colorMinorTicks"
+      [attr.number-side]="gaugeOptions.numberSide"
+      [attr.numbers-margin]="gaugeOptions.numbersMargin"
+      font-numbers="arial"
+      [attr.font-numbers-size]="gaugeOptions.fontNumbersSize"
+      font-numbers-weight=""
+      [attr.color-numbers]="gaugeOptions.colorNumbers"
+      [attr.ticks-width-minor]="gaugeOptions.ticksWidthMinor"
+      [attr.highlights]="gaugeOptions.highlights|json"
+      [attr.highlights-width]="gaugeOptions.highlightsWidth"
+      [attr.needle-side]="gaugeOptions.needleSide"
+
+      animation="true"
+      animation-duration="500"
+      animation-rule="linear"
+      animated-value="false"
+      animate-on-init="false"
+
+      [attr.needle]="gaugeOptions.needle"
+      [attr.needle-end]="gaugeOptions.needleEnd"
+      [attr.needle-start]="gaugeOptions.needleStart"
+      [attr.needle-shadow]="gaugeOptions.needleShadow"
+      [attr.needle-side]="gaugeOptions.needleSide"
+      [attr.needle-width]="gaugeOptions.needleWidth"
+      [attr.needle-type]="gaugeOptions.needleType"
+      [attr.color-needle]="gaugeOptions.colorNeedle"
+      [attr.color-needle-end]="gaugeOptions.colorNeedleEnd"
+      [attr.color-needle-shadow-up]="gaugeOptions.colorNeedleShadowUp"
+      [attr.color-needle-shadow-down]="gaugeOptions.colorNeedleShadowDown"
+    ></linear-gauge>
+  </div>
+
+  <div #primary class='primary' style="display: none;"></div>
+  <div #accent class='accent' style="display: none;"></div>
+  <div #warn class='warn' style="display: none;"></div>
+  <div #primaryDark class='primaryDark' style="display: none;"></div>
+  <div #accentDark class='accentDark' style="display: none;"></div>
+  <div #warnDark class='warnDark' style="display: none;"></div>
+  <div #background class='background' style="display: none;"></div>
+  <div #text class='text' style="display: none;"></div>
+
+  <div class="settingsButton" *ngIf="unlockStatus">
+    <button  color="accent" mat-mini-fab class="selector-fab" (click)="openWidgetSettings()">
+        <span class="fa-solid fa-cog"></span>
+    </button>
+  </div>
+</div>

package/src/app/widget-gauge-ng-linear/widget-gauge-ng-linear.component.scss

@@ -1,93 +1,94 @@
-@import '~@angular/material/theming';
-
-@mixin widget-ngGauge-linear-theme($theme) {
-
-  $ngGauge: map-get($theme, ngGauge);
-  $themeForeground: map-get($theme, foreground);
-
-  app-widget-gauge-ng-linear {
-      .primary {
-        color: mat-color($ngGauge, primary-gaugeFaceLight);
-      }
-      .accent {
-        color: mat-color($ngGauge, accent-gaugeFaceLight);
-      }
-      .warn {
-        color: mat-color($ngGauge, warn-gaugeFaceLight);
-      }
-      .primaryDark {
-        color: mat-color($ngGauge, primary-gaugeFaceDark);
-      }
-      .accentDark {
-        color: mat-color($ngGauge, accent-gaugeFaceDark);
-      }
-      .warnDark {
-        color: mat-color($ngGauge, warn-gaugeFaceDark);
-      }
-      .background {
-        color: mat-color($themeForeground, divider);
-      }
-      .text {
-        color: mat-color($themeForeground, text);
-      }
-  }
-}
-
-.verticalLinearWrapper {
-  position: relative;
-  top: 3%;
-  height: 97%;
-  width: 100%;
-
-  > .linearGauge {
-    position: absolute;
-    top:0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    text-align: center;
-  }
-
-}
-
-.horizontalLinearWrapper {
-  position: relative;
-  margin: 0px;
-  top: 47%;
-  -ms-transform: translateY(-47%);
-  transform: translateY(-47%);
-  &:before {
-    display:block;
-    content: "";
-    width: 100%;
-    padding-top: (1 / 4) * 97%;
-    margin-top: 3%;
-  }
-  > .linearGauge {
-    position: absolute;
-    top:0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-  }
-}
-
-.settingsButton {
-  position: absolute;
-  bottom: 5%;
-  left: 50%;
-  transform: translate(-50%);
-}
-
-
-.tab-group {
-  border: 1px solid #e8e8e8;
-}
-
-.tab-content {
-  padding: 16px;
-}
-
-.full-width {
-  width: 100%;
-}
+@use '~@angular/material' as mat;
+@use "sass:math";
+
+@mixin widget-ngGauge-linear-theme($theme) {
+
+  $ngGauge: map-get($theme, ngGauge);
+  $themeForeground: map-get($theme, foreground);
+
+  app-widget-gauge-ng-linear {
+      .primary {
+        color: mat.get-color-from-palette($ngGauge, primary-gaugeFaceLight);
+      }
+      .accent {
+        color: mat.get-color-from-palette($ngGauge, accent-gaugeFaceLight);
+      }
+      .warn {
+        color: mat.get-color-from-palette($ngGauge, warn-gaugeFaceLight);
+      }
+      .primaryDark {
+        color: mat.get-color-from-palette($ngGauge, primary-gaugeFaceDark);
+      }
+      .accentDark {
+        color: mat.get-color-from-palette($ngGauge, accent-gaugeFaceDark);
+      }
+      .warnDark {
+        color: mat.get-color-from-palette($ngGauge, warn-gaugeFaceDark);
+      }
+      .background {
+        color: mat.get-color-from-palette($themeForeground, divider);
+      }
+      .text {
+        color: mat.get-color-from-palette($themeForeground, text);
+      }
+  }
+}
+
+.verticalLinearWrapper {
+  position: relative;
+  top: 3%;
+  height: 97%;
+  width: 100%;
+
+  > .linearGauge {
+    position: absolute;
+    top:0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    text-align: center;
+  }
+
+}
+
+.horizontalLinearWrapper {
+  position: relative;
+  margin: 0px;
+  top: 47%;
+  -ms-transform: translateY(-47%);
+  transform: translateY(-47%);
+  &:before {
+    display:block;
+    content: "";
+    width: 100%;
+    padding-top: math.div(1, 4) * 97%;
+    margin-top: 3%;
+  }
+  > .linearGauge {
+    position: absolute;
+    top:0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+}
+
+.settingsButton {
+  position: absolute;
+  bottom: 5%;
+  left: 50%;
+  transform: translate(-50%);
+}
+
+
+.tab-group {
+  border: 1px solid #e8e8e8;
+}
+
+.tab-content {
+  padding: 16px;
+}
+
+.full-width {
+  width: 100%;
+}

package/src/app/widget-gauge-ng-linear/widget-gauge-ng-linear.component.spec.ts

@@ -1,25 +1,25 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-
-import { WidgetGaugeNgLinearComponent } from './widget-gauge-ng-linear.component';
-
-describe('WidgetGaugeNgLinearComponent', () => {
-  let component: WidgetGaugeNgLinearComponent;
-  let fixture: ComponentFixture<WidgetGaugeNgLinearComponent>;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [ WidgetGaugeNgLinearComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(WidgetGaugeNgLinearComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { WidgetGaugeNgLinearComponent } from './widget-gauge-ng-linear.component';
+
+describe('WidgetGaugeNgLinearComponent', () => {
+  let component: WidgetGaugeNgLinearComponent;
+  let fixture: ComponentFixture<WidgetGaugeNgLinearComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ WidgetGaugeNgLinearComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WidgetGaugeNgLinearComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});