@energycap/components 0.37.7-ECAP-18600-ech-theme-updates.20230913-1721 → 0.37.7-ECAP-18600-ech-theme-updates.20230914-0840

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@energycap/components",
-  "version": "0.37.7-ECAP-18600-ech-theme-updates.20230913-1721",
+  "version": "0.37.7-ECAP-18600-ech-theme-updates.20230914-0840",
   "dependencies": {
     "tslib": "^2.0.0"
   },

package/src/assets/images/favicon.svg

@@ -1,9 +1,12 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-  <g fill="none" fill-rule="evenodd">
-    <rect width="32" height="32" fill="#FFF" rx="4"/>
-    <g fill-rule="nonzero" transform="translate(2 2)">
-      <path fill="#A0AD39" d="M19.5608 18.06L19.5608 20.86 8.5176 20.86 8.5176 18.06 19.5608 18.06zM15.932 12.5888L15.932 15.3888 8.5176 15.3888 8.5176 12.5888 15.932 12.5888zM19.5608 7.1176L19.5608 9.9176 8.5176 9.9176 8.5176 7.1176 19.5608 7.1176zM13.9944 2.8C17.416 2.8 20.4736 4.34 22.5288 6.7592L24.8248 5.1296C22.26 1.9992 18.3568 0 13.9944 0 9.632 0 5.7288 1.9992 3.164 5.1296L5.46 6.7592C7.5152 4.34 10.5728 2.8 13.9944 2.8z"/>
-      <path fill="#17303B" d="M22.5344,21.2408 C20.4792,23.66 17.4216,25.2 14,25.2 C10.5784,25.2 7.5208,23.66 5.4656,21.2408 L5.4768,21.2352 C3.8192,19.2808 2.8,16.7664 2.8,14 C2.8,12.2416 3.2144,10.5896 3.9368,9.1056 L1.6184,7.4648 C0.588,9.4136 0,11.6368 0,14 C0,17.3656 1.1928,20.4512 3.1696,22.8648 L3.1696,22.8648 C5.7344,25.9952 9.6376,27.9944 14,27.9944 C18.3624,27.9944 22.2656,25.9952 24.8304,22.8648 L22.5344,21.2408 Z"/>
-    </g>
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none" viewBox="0 0 32 32">
+  <g clip-path="url(#a)">
+    <path fill="#fff" d="M28 0H4a4 4 0 0 0-4 4v24a4 4 0 0 0 4 4h24a4 4 0 0 0 4-4V4a4 4 0 0 0-4-4Z"/>
+    <path fill="#162F3B" d="M22.56 20.06v2.8H11.519v-2.8H22.56Zm-3.628-5.471v2.8h-7.414v-2.8h7.414Zm3.629-5.471v2.8H11.518v-2.8H22.56ZM16.994 4.8c3.422 0 6.48 1.54 8.535 3.96l2.296-1.63A13.973 13.973 0 0 0 16.995 2c-4.363 0-8.266 2-10.83 5.13L8.46 8.76a11.17 11.17 0 0 1 8.534-3.96Z"/>
+    <path fill="#162F3B" d="M25.534 23.24A11.17 11.17 0 0 1 17 27.2a11.17 11.17 0 0 1-8.534-3.96l.01-.005C6.82 21.281 5.8 18.766 5.8 16c0-1.758.414-3.41 1.137-4.894L4.618 9.465A13.94 13.94 0 0 0 3 16c0 3.366 1.193 6.451 3.17 8.865A13.973 13.973 0 0 0 17 29.995c4.362 0 8.266-2 10.83-5.13l-2.296-1.624Z"/>
   </g>
+  <defs>
+    <clipPath id="a">
+      <path fill="#fff" d="M0 0h32v32H0z"/>
+    </clipPath>
+  </defs>
 </svg>

package/src/styles/_global-variables.scss

@@ -147,12 +147,9 @@
   --ec-background-color-dialog: rgba(26, 26, 35, .5);
   --ec-background-color-dialog-stacked: rgba(26, 26, 35, .25);
   --ec-background-color-tour: var(--ec-color-gray-8);
-
-  // TODO: verify
   --ec-background-splash: radial-gradient(104.77% 95.14% at 90.16% 85.25%, rgba(113,235,111,0.60) 0%, rgba(255, 255, 255, 0) 100%),
   radial-gradient(156.88% 63.71% at 8.4% 78.12%, rgba(219, 141, 255, 0.60) 0%, rgba(255, 255, 255, 0) 100%), 
   radial-gradient(265.09% 182.17% at 24.49% 5.63%, rgba(0, 87, 255, 0.60) 0%, rgba(255, 255, 255, 0) 100%), #FFF;
-
   --ec-background-color-detail: rgba(26, 26, 35, .03);
   --ec-background-color-disabled: rgba(26,26,35, .1);
   --ec-background-color-hover: rgb(195, 212, 247);
@@ -165,14 +162,9 @@
   --ec-background-color-accent: rgb(237, 220, 255);
   --ec-background-color-promo: linear-gradient(78deg, #4B0793 0%, #A572DC 100%);
   --ec-background-color-control: var(--ec-background-color);
-
-  // TODO: verify
-  --ec-background-color-control-invalid: var(--ec-background-color-caution);
   
   // Shadows
   --ec-box-shadow: 0px .125rem 1rem var(--ec-color-shadow);
-
-  // TODO: verify
   --ec-box-shadow-overlay: 0px .0625rem .5rem var(--ec-color-shadow-overlay);
 
   // Borders
@@ -183,9 +175,6 @@
   --ec-border-color-control-disabled: var(--ec-border-color-control);
   --ec-border-color-control-readonly: transparent;
 
-  // TODO: update
-  --ec-border-color-control-invalid: var(--ec-color-caution);
-
   --ec-border-radius: .25rem;
   --ec-border-radius-card: .375rem;
   --ec-border-radius-dialog: .5rem;

package/src/styles/mixins/_button-base.scss

@@ -1,8 +1,11 @@
+$button-padding-y: 0.3125rem;
+$button-padding-x: 0.5rem;
+
 @mixin button {
   font-size: var(--ec-font-size-action);
   height: 2rem;
   line-height: 1.25rem;
-  padding: 0.3125rem .75rem;
+  padding: $button-padding-y $button-padding-x;
   border: 0;
   border-radius: var(--ec-border-radius);
   display: flex;
@@ -160,11 +163,11 @@
 
 @mixin text-button(
   $type: 'text',
-  $color: var(--ec-button-color-text, var(--ec-color-primary-dark)),
+  $color: var(--ec-color-primary-dark),
   $icon-color: inherit
 ) {
   background-color: transparent;
-  color: $color;
+  color: var(--ec-button-color-text, $color);
 
   .ec-icon {
     color: var(--ec-button-color-icon-#{$type}, $icon-color);

package/src/styles/mixins/_common.scss

@@ -26,13 +26,13 @@
   border: solid 2px $color;
   background-color: rgba($color, .25);
   display: block;
-  width: rem-calc(10px);
-  height: rem-calc(10px);
+  width: 0.625rem;
+  height: 0.625rem;
   border-radius: 50%;
 
   @if $condensed {
-    width: rem-calc(8px);
-    height: rem-calc(8px);
+    width: .5rem;
+    height: .5rem;
     border-width: 1px;
   }
 }
@@ -45,7 +45,7 @@
 
 @mixin count-display {
   color: var(--ec-color-accent);
-  font-size: rem-calc(32px);
+  font-size: 2rem;
   font-style: normal;
   font-weight: bold;
   line-height: 1;

package/src/styles/mixins/_control-base-deprecated.scss

@@ -0,0 +1,113 @@
+@import '../core';
+
+$control-border-color: var(--ec-border-color-control);
+$control-border-width: rem-calc(1px);
+$control-color: var(--ec-color-primary-dark);
+$control-bg: var(--ec-background-color);
+$control-font-family: var(--ec-font-family);
+$control-font-size: var(--ec-font-size-body);
+$control-height: rem-calc(32px);
+$control-line-height: rem-calc(20px);
+$control-padding-x: rem-calc(8px);
+
+// Active State
+$control-bg-active: var(--ec-color-interactive);
+$control-text-active: var(--ec-color-primary-light);
+
+// Focused
+$control-bg-focused: var(--ec-color-disabled-dark);
+$control-border-color-focused: var(--ec-color-interactive);
+$control-shadow-focused: 0 0 0 $control-border-width $control-border-color-focused;
+
+// Disabled
+$control-bg-disabled: var(--ec-background-color-disabled);
+$control-color-disabled: var(--ec-color-secondary-dark);
+$control-opacity-disabled: .65;
+
+// Invalid
+$control-bg-invalid: var(--ec-background-color-control-invalid);
+$control-border-color-invalid: var(--ec-border-color-control-invalid);
+
+// Read only
+$control-bg-read-only: rgba($black, .12);
+
+/// Calculates the height, line-height and padding of a control
+/// @param {number} $font-size [$control-font-size] - The font size of the control
+/// @param {number | string} $height [$control-height] - The height of the control
+/// @param {number} $line-height [$control-line-height] - The line-height of the control
+/// @param {boolean} $borders [true] - Does the contorl have borders
+@mixin control-dimensions(
+  $font-size: $control-font-size,
+  $height: $control-height,
+  $line-height: $control-line-height,
+  $borders: true
+) {
+
+  // If $height is auto, set height to auto and reassign $control-height to $height for padding calculations
+  @if $height == auto {
+    height: $height;
+    $height: $control-height;
+  } @else {
+    height: $height;
+  }
+
+  // Remove units from $line height so it is relative to the control's font-size
+  line-height: strip-unit($line-height);
+
+  // Vertical padding should be the height minus the lineheight divided by two. If the control has borders, remove the border's width from the vertical padding
+  @if unit($line-height) != 'rem' {
+    @error "$line-height must be in rems in order to do calculations, was #{unit($line-height)}."
+  }
+
+  $padding-y: ($height - $line-height) * 0.5;
+  @if $borders {
+    $padding-y: (($height - $line-height) * 0.5) - $control-border-width;
+  }
+  padding: $padding-y $control-padding-x;
+}
+
+@mixin control-focus($borders: true) {
+  @if $borders {
+    border-color: $control-border-color-focused;
+    box-shadow: $control-shadow-focused;
+  } @else {
+    background-color: $control-bg-focused;
+  }
+  position: relative;
+  z-index: 1;
+}
+
+@mixin control-disabled($type, $borders: true) {
+  @if $borders {
+    background-color: $control-bg-disabled;
+    border-color: var(--ec-border-color-control-disabled);
+  }
+
+  color: $control-color-disabled;
+  opacity: $control-opacity-disabled;
+
+  @if $type == form {
+    
+  }
+}
+  
+@mixin control-invalid($borders: true) {
+  @if $borders {
+    &:not(:focus) {
+      border-color: $control-border-color-invalid;
+    }
+  }
+  background-color: $control-bg-invalid;
+}
+
+@mixin control-default($borders: true) {
+  @if $borders {
+    border-color: $control-border-color;
+  }
+  background-color: $control-bg;
+}
+
+@mixin control-active {
+  background-color: var(--ec-background-color-hover);
+}
+

package/src/styles/mixins/_form-control-base.scss

@@ -1,12 +1,16 @@
 @use "sass:math";
 
-@import 'control-base';
+@import '../icons';
 
 $form-control-icon-size: 1rem;
+$form-control-font-size: 1rem;
 $form-control-icon-position: .5rem center;
 $form-control-label-size: var(--ec-font-size-label);
 $form-control-height: 2rem;
+$form-control-line-height: 1.25rem;
+$form-control-padding-x: .5rem;
 $form-control-spacing-y: 1rem;
+$form-control-padding-y: .3125rem;
 
 $checkbox-indicator-size: $form-control-icon-size;
 
@@ -76,7 +80,7 @@ $checkbox-indicator-size: $form-control-icon-size;
 ) {
   $size: $width, $height;
   @include icon-bg-image($icon, $position, $size);
-  padding-left: ($indent + $control-padding-x);
+  padding-left: ($indent + $form-control-padding-x);
 }
 
 @mixin form-control-state($state, $selector) {
@@ -88,8 +92,6 @@ $checkbox-indicator-size: $form-control-icon-size;
 
   /// Required
   @if $state == required {
-    // @include control-default;
-
     // TODO: remove when all bootstrap and kendo controls have been replaced in EUM
     @include form-control-input-icon($required-icon, $position: $icon-position);
 
@@ -101,15 +103,13 @@ $checkbox-indicator-size: $form-control-icon-size;
 
   /// Invalid
   } @else if $state == invalid {
-    @include control-invalid;
+    background-color: var(--ec-form-control-background-color-invalid);
     border-color: var(--ec-form-control-border-color-invalid);
     
     &:focus {
       border-color: var(--ec-form-control-background-color-invalid);
     }
 
-    background-color: var(--ec-form-control-background-color-invalid);
-
     // TODO: remove when all bootstrap and kendo controls have been replaced in EUM
     @include form-control-input-icon($invalid-icon, $position: $icon-position);
 
@@ -130,7 +130,7 @@ $checkbox-indicator-size: $form-control-icon-size;
     &:required,
     &:required.is-empty {
       background-image: none;
-      padding-left: $control-padding-x;
+      padding-left: $form-control-padding-x;
 
       // We need to define these again because the :required styles override
       // the background-color and border-color we set above
@@ -163,8 +163,8 @@ $checkbox-indicator-size: $form-control-icon-size;
   background-image: none;
   background-clip: padding-box;
   width: 100%;
-  line-height: 1.25rem;
-  padding: 0.3125rem .5rem;
+  line-height: $form-control-line-height;
+  padding: $form-control-padding-y $form-control-padding-x;
 
   @if $selector == input {
     height: $form-control-height;
@@ -430,9 +430,8 @@ $checkbox-indicator-size: $form-control-icon-size;
 }
 
 @mixin checkbox-radio-label() {
-  @include control-dimensions($height: $form-control-height, $borders: false);
-  padding-left: 0;
-  padding-right: 0;
+  line-height: $form-control-line-height;
+  padding: 0.375rem 0;
   margin-left: .5rem;
   min-height: $form-control-height;
   height: auto;
@@ -457,15 +456,15 @@ $checkbox-indicator-size: $form-control-icon-size;
   #{$label-selector},
   #{$indicator-selector} {
     opacity: 1;
-    color: $control-color;
+    color: var(--ec-form-control-color);
   }
 }
 
 @mixin toggle() {
-  font-size: $control-font-size;
+  font-size: var(--ec-form-control-font-size);
   background-color: var(--ec-border-color);
   border-radius: var(--ec-border-radius);
-  border: $control-border-width solid var(--ec-border-color);
+  border: 1px solid var(--ec-border-color);
   min-height: 2em;
   position: relative;
   color: var(--ec-color-secondary-dark);
@@ -512,7 +511,7 @@ $checkbox-indicator-size: $form-control-icon-size;
     justify-content: center;
     line-height: 1.1em;
     margin-bottom: 0;
-    padding: rem-calc(6px) rem-calc(8px);
+    padding: 0.375rem .5rem;
     position: relative;
     text-align: center;
     transition: color .3s ease;
@@ -524,7 +523,7 @@ $checkbox-indicator-size: $form-control-icon-size;
   }
 
   a {
-    border: rem-calc(3px) solid transparent;
+    border: 0.1875rem solid transparent;
     border-radius: calc(var(--ec-form-control-border-radius) * .75);
     display: block;
     height: 100%;
@@ -587,7 +586,7 @@ $checkbox-indicator-size: $form-control-icon-size;
   input {
     &.ng-invalid.ng-touched {
       background-image: none;
-      padding-left: $control-padding-x;
+      padding-left: $form-control-padding-x;
 
       &:not(.is-empty) ~ .units-left {
         left: 0;
@@ -630,3 +629,12 @@ $checkbox-indicator-size: $form-control-icon-size;
   overflow: hidden;
   white-space: nowrap;
 }
+
+@mixin form-control-popup {
+  background-color: var(--ec-background-color);
+  border-radius: var(--ec-border-radius-card);
+  box-shadow: var(--ec-box-shadow-overlay);
+  margin-top: .25rem;
+  overflow: hidden;
+  z-index: var(--ec-z-index-popup);
+}

package/src/styles/mixins/_nav-control-base-deprecated.scss

@@ -0,0 +1,99 @@
+// @import 'control-base';
+
+$nav-font-size: var(--ec-font-size-action);
+$nav-item-bg: var(--ec-background-color);
+$nav-item-height: 1.75rem;
+$nav-item-line-height: 1.125rem;
+$nav-item-bg-hover: var(--ec-background-color-hover);
+$nav-item-bg-selected: var(--ec-background-color-selected);
+$nav-icon-height: var(--ec-font-size-icon);
+$nav-item-transition-duration: .2s;
+
+@mixin nav-hover($selector) {
+  @if $selector == button {
+
+  } @else {
+    background-color: $nav-item-bg-hover;
+  }
+}
+
+@mixin nav-active() {
+  background-color: $control-bg-active;
+  color: $control-text-active;
+}
+
+@mixin nav-selected() {
+  background-color: $nav-item-bg-selected;
+}
+
+@mixin nav-focus($borders) {
+  @include control-focus($borders);
+}
+
+@mixin nav-item-states($selector, $borders: false) {
+  cursor: pointer;
+
+  &.is-selected,
+  &.is-highlighted {
+    @include nav-selected();
+  }
+
+  &:hover {
+    @include nav-hover($selector);
+  }
+
+  &:focus {
+    @include nav-focus($borders);
+    outline: none;
+  }
+
+  &:active {
+    @include nav-active();
+  }
+
+  &:disabled,
+  &.is-disabled {
+    @include control-disabled('nav', $borders);
+    cursor: default;
+  }
+}
+
+@mixin nav-item(
+  $selector,
+  $bg: $nav-item-bg,
+  $font-size: $nav-font-size,
+  $height: $nav-item-height,
+  $line-height: $nav-item-line-height,
+  $borders: false
+) {
+
+  @include control-dimensions($font-size, $height, $line-height, $borders);
+
+  align-items: center;
+  background-color: $bg;
+  display: flex;
+
+  @include nav-item-states($selector, $borders);
+
+  .label {
+    align-items: center;
+    display: flex;
+    flex: auto;
+  }
+
+  .ec-icon {
+    flex: 0 0 auto;
+
+    & + .label {
+      margin: 0 0.375rem;
+    }
+  }
+}
+
+@mixin nav-group($font-size: $nav-font-size, $color: $control-color) {
+  color: $color;
+  font-size: $font-size;
+  font-family: $control-font-family;
+  padding: 0;
+  margin: 0;
+}

package/src/styles/mixins/_overlay-base.scss

@@ -28,6 +28,6 @@ $overlay-padding-y: 3rem;
 }
 
 @mixin overlay-empty-wrapper {
-    max-width: rem-calc(480px);
+    max-width: 30rem;
     margin: 0 auto;
 }

package/src/styles/mixins/_tabs-base.scss

@@ -1,5 +1,3 @@
-@import 'nav-control-base';
-
 @mixin tab-active($style: tabs) {
     color: var(--ec-tab-color-active, var(--ec-color-interactive));
 
@@ -11,7 +9,7 @@
 }
 
 @mixin tab($style: tabs) {
-    $height: rem-calc(32px);
+    $height: 2rem;
 
     @if $style == 'pills' {
         $height: 1.75rem;
@@ -66,6 +64,10 @@
 @mixin tab-icon-only {
     padding: 0;
     justify-content: center;
+
+    .ec-icon {
+        color: inherit;
+    }
 }
 
 @mixin tab-item($style: tabs) {

package/src/styles/mixins.scss

@@ -2,10 +2,8 @@
 // of the component library
 @import 'mixins/common';
 @import 'mixins/button-base';
-@import 'mixins/control-base';
 @import 'mixins/dialog-base';
 @import 'mixins/form-control-base';
-@import 'mixins/nav-control-base';
 @import 'mixins/overlay-base';
 @import 'mixins/spinner-base';
 @import 'mixins/tabs-base';