@energycap/components 0.42.4-esbuild.20250131-1219 → 0.42.4-esbuild.20250131-1256

package/src/styles/components/_splash.scss

@@ -0,0 +1,57 @@
+@import "../mixins/animations";
+
+@keyframes splash {
+  0% {
+    background-position: left bottom;
+  }
+
+  20% {
+    background-position: left top;
+  }
+
+  40% {
+    background-position: right top;
+  }
+
+  60% {
+    background-position: right bottom;
+  }
+
+  100% {
+    background-position: left bottom;
+  }
+}
+
+
+.app-splash {
+  position: fixed;
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: var(--ec-background-splash);
+  background-size: 110% 110%;
+  transition-property: opacity;
+  transition-duration: .3s;
+  transition-timing-function: ease-out;
+  opacity: 1;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+
+  animation-name: splash;
+  animation-duration: 6s;
+  animation-iteration-count: infinite;
+
+  img {
+    width: 200px;
+    mix-blend-mode: screen;
+  }
+
+  &.app-loaded {
+    opacity: 0;
+    pointer-events: none;
+  }
+}

package/src/styles/components/_unsupported-browsers.scss

@@ -0,0 +1,24 @@
+@import '../colors';
+
+.unsupported-browser-container {
+  display: flex;
+  position: fixed;
+  z-index: 10000;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  align-items: center;
+  background: var(--ec-background-color-splash);
+}
+
+.unsupported-browser {
+  max-width: 25rem;
+  margin: 0 auto;
+  font-size: var(--ec-font-size-title);
+  color: var(--ec-color-primary-light);
+
+  a {
+    color: $blue-1;
+  }
+}

package/src/styles/email/_email-base.scss

@@ -0,0 +1,228 @@
+// Most email clients do not support CSS Custom Properties (variables),
+// so we need to reference SCSS variables instead.
+$ec-color-primary-dark: rgb(26, 26, 35);
+$ec-color-secondary-dark: rgba(26, 26, 35, .66);
+$ec-color-interactive: rgb(0, 132, 169);
+$ec-background-color: rgb(255, 255, 255);
+$ec-border-color: #D6D6D7;
+$ec-border-color-dark: #383840;
+$ec-font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+$green-3: #cfd856; 
+$ec-color-danger: rgb(197, 1, 36);
+
+@mixin body {
+  font-size: 14px;
+  font-weight: 400;
+  color: $ec-color-primary-dark;
+  line-height: 1.2;
+  font-family: $ec-font-family;
+  text-align: left;
+}
+
+@mixin content {
+  h1, h2, h3, h4, h5, h6, p, ol, ul {
+    margin-top: 0;
+    margin-bottom: 16px;
+  }
+  
+  h1, h2 {
+    font-size: 20px;
+    line-height: 24px;
+  }
+  
+  h3, h4 {
+    font-size: 16px;
+    line-height: 24px;
+  }
+  
+  h5, h6 {
+    font-size: 12px;
+    line-height: 16px;
+    text-transform: uppercase;
+    color: $ec-color-secondary-dark;
+  }
+  
+  h1, h3, h5 {
+    font-weight: bold;
+  }
+  
+  h2, h4, h6 {
+    font-weight: normal;
+  }
+  
+  ol ol,
+  ul ul,
+  ol ul,
+  ul ol {
+    margin-bottom: 0;
+  }
+  
+  b,
+  strong {
+    font-weight: bolder;
+  }
+  
+  a {
+    color: $ec-color-interactive;
+    text-decoration: none;
+    background-color: transparent;
+  }
+
+  th,
+  td {
+    text-align: left;
+  }
+  
+  a:hover { 
+    text-decoration: underline;
+  }
+  
+  a:focus {
+    outline: $ec-color-interactive solid 2px;
+    outline-offset: 2px;
+    border-radius: 2px;
+  }
+  
+  a:not([href]):not([tabindex]) {
+    color: inherit;
+    text-decoration: none;
+  }
+  
+  a:not([href]):not([tabindex]), 
+  a:not([href]):not([tabindex]):focus {
+    color: inherit;
+    text-decoration: none;
+  }
+  
+  a:not([href]):not([tabindex]):focus {
+    outline: 0;
+  }
+  
+  .email-button,
+  .email-button-primary {
+    display: inline-block;
+    margin-right: 8px;
+    margin-bottom: 8px;
+    background-color: #D6D6D7;
+    padding: 0 16px;
+    line-height: 32px;
+    border-radius: 4px;
+    color: $ec-color-primary-dark !important;
+  }
+
+  .email-button-primary {
+    background-color: $green-3;
+  }
+  
+  .email-cta {
+    display: inline-block;
+    margin-right: 8px;
+    margin-bottom: 8px;
+    background-color: #17303B;
+    color: #D8E902 !important;
+    line-height: 48px;
+    padding: 0 24px;
+    min-width: 176px;
+    text-align: center;
+    border-radius: 6px;
+  }
+
+  .email-table {
+    width: 100%;
+    border-spacing: 0;
+    border-collapse: separate;
+    font-size: 12px;
+    margin-bottom: 16px;
+
+    th,
+    td {
+      height: 32px;
+      line-height: 16px;
+      padding: 8px;
+    }
+
+    th {
+      font-weight: normal;
+      vertical-align: middle;
+      color: $ec-color-secondary-dark;
+      border-bottom: 1px solid $ec-border-color-dark;
+    }
+
+    td {
+      border-top: 1px solid $ec-border-color;
+      vertical-align: top;
+    }
+
+    th:first-child,
+    td:first-child {
+      padding-left: 0;
+    }
+
+    th:last-child,
+    td:last-child {
+      padding-right: 0;
+    }
+
+    tr:first-child td {
+      border-top: 0;
+    }
+  }
+  
+  img {
+    max-width: 100%;
+    height: auto;
+  }
+  
+  hr {
+    height: 0;
+    border: 0;
+    overflow: visible;
+    margin: 16px 0;
+    border-top: 1px solid $ec-border-color;
+  }
+  
+  .text-left {
+    text-align: left;
+  }
+  
+  .text-center {
+    text-align: center;
+  }
+  
+  .text-right {
+    text-align: right;
+  }
+  
+  .text-underline {
+    text-decoration: underline;
+  }
+
+  .text-caption-1 {
+    color: $ec-color-secondary-dark;
+    font-size: 12px;
+  }
+
+  .text-caption-2 {
+    color: $ec-color-secondary-dark;
+    font-size: 10px;
+  }
+
+  .font-color-danger {
+    color: $ec-color-danger;
+  }
+}
+
+@mixin logos { 
+  .email-logo {
+    width: 100%;
+    max-width: 292px;
+    font-size: 28px;
+    font-weight: normal;
+  }
+
+  .email-logo-wl {
+    margin-left: 4px;
+    width: 56px;
+    max-width: 56px;
+  }
+}

package/src/styles/email/email.scss

@@ -0,0 +1,43 @@
+/** Standalone styles for energycap application emails. Include the generated css (dist/components/energycap-email.min.css) in a style element in the head of the email document. */
+@import 'email-base';
+
+html {
+  background-color: $ec-background-color;
+  font-size: 16px;
+}
+
+body { 
+  @include body;
+  margin: 0;
+}
+
+table {
+  width: 100%;
+  border-spacing: 0;
+  font-size: 14px;
+}
+
+tr, td {
+  border-image-width: 0;
+}
+
+.email-wrapper {
+  width: 600px;
+  padding-top: 48px;
+}
+
+.email-header {
+  padding-right: 16px;
+  padding-left: 16px;
+}
+
+.email-body {
+  padding: 32px 24px;
+}
+
+[tabindex="-1"]:focus {
+  outline: 0 !important;
+}
+
+@include content;
+@include logos;

package/src/styles/index.scss

@@ -0,0 +1,27 @@
+@import 'bootstrap/reboot';
+@import '@angular/cdk/overlay-prebuilt.css';
+
+/*!
+* EnergyCAP Components - Base Styles
+*/
+@import 'global-variables';
+@import 'core';
+@import 'base';
+@import 'bootstrap/grid';
+
+/*!
+* EnergyCAP Components - Global Component Styles
+*/
+@import 'components/card';
+@import 'components/splash';
+@import 'components/unsupported-browsers';
+@import 'components/link-icons';
+
+/*!
+* EnergyCAP Components - Utility Styles
+*/
+@import 'utilities/layout';
+@import 'utilities/spacing';
+@import 'utilities/text';
+@import 'utilities/borders';
+@import 'utilities/common';

package/src/styles/mixins/_animations.scss

@@ -0,0 +1,18 @@
+@keyframes spin {
+  from { transform: rotate(0); }
+  to { transform: rotate(1turn); }
+}
+
+@mixin spin {
+  animation: spin .8s linear infinite
+}
+
+@keyframes fade-in-out {
+  0% { opacity: .6;}
+  50% { opacity: 1;}
+  100% { opacity: .6;}
+}
+
+@mixin fade-in-out {
+  animation: fade-in-out 1.5s ease-in infinite;
+}

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

@@ -0,0 +1,185 @@
+$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: $button-padding-y $button-padding-x;
+  border: 0;
+  border-radius: var(--ec-border-radius);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+
+  .label {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    white-space: nowrap;
+    flex: auto;
+  }
+
+  .ec-icon {
+    flex: none;
+  }
+
+  .ec-icon + .label {
+    flex: none;
+    margin-left: .25rem;
+  }
+
+  &.has-badge {
+    padding-right: 0.0625rem;
+  }
+
+  &:focus {
+    outline: none;
+    position: relative;
+    z-index: 1;
+  }
+
+  &:disabled {
+    background-color: var(--ec-background-color-disabled);
+    border: 1px solid var(--ec-form-control-border-color-disabled);
+    color: var(--ec-color-disabled-dark);
+    opacity: var(--ec-form-control-opacity-disabled);
+    cursor: default;
+  }
+}
+
+@mixin primary-button {
+  background-color: var(--ec-button-background-color-primary, var(--ec-color-gray-8));
+  color: var(--ec-button-color-primary, var(--ec-color-primary-light));
+
+  &:active:not(:disabled) {
+    background-color: var(--ec-button-background-color-active, var(--ec-background-color-selected));
+    color: var(--ec-button-color-active, var(--ec-color-primary-dark));
+    box-shadow: var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));
+  }
+
+  &:focus {
+    box-shadow: var(--ec-button-box-shadow-focus-primary, (0 0 0 2px var(--ec-color-interactive), inset 0 0 0 2px var(--ec-color-white)));
+  }
+
+  .ec-icon {
+    color: var(--ec-button-color-icon-primary, var(--ec-color-primary-light));
+  }
+}
+
+@mixin secondary-button {
+  background-color: var(--ec-button-background-color-secondary, var(--ec-background-color));
+  border: 1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8));
+  color: var(--ec-button-color-secondary, var(--ec-color-primary-dark));
+
+  &:active:not(:disabled) {
+    background-color: var(--ec-button-background-color-active, var(--ec-background-color-selected));
+    color: var(--ec-button-color-active, var(--ec-color-primary-dark));
+    box-shadow: var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));
+    border-color: transparent;
+  }
+
+  &:focus {
+    box-shadow: var(--ec-button-box-shadow-focus-secondary, (0 0 0 2px var(--ec-border-color-focus)));
+    border-color: var(--ec-button-border-color-secondary-focus, transparent);
+  }
+
+  .ec-icon {
+    color: var(--ec-button-color-icon-secondary, var(--ec-color-icon));
+  }
+}
+
+// Deprecated
+@mixin common-button {
+  @include secondary-button();
+}
+
+@mixin danger-button {
+  background-color: var(--ec-color-danger);
+  color: var(--ec-color-primary-light);
+
+  .ec-icon {
+    color: var(--ec-button-color-icon, inherit);
+  }
+
+  &:active:not(:disabled) {
+    background-color: var(--ec-button-background-color-active, var(--ec-background-color-selected));
+    color: var(--ec-button-color-active, var(--ec-color-primary-dark));
+    box-shadow: var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));
+  }
+
+  &:focus {
+    box-shadow: var(--ec-button-box-shadow-focus-primary, (0 0 0 2px var(--ec-border-color-focus), inset 0 0 0 2px var(--ec-color-white)));
+  }
+}
+
+@mixin icon-button{
+  background-color: transparent;
+  color: var(--ec-button-color-icon, var(--ec-color-icon));
+  width: 2rem;
+  padding: 0;
+
+  .ec-icon {
+    height: 1rem;
+    margin: 0;
+    padding: 0;
+    color: inherit
+  }
+
+  &:hover:not(:disabled) {
+    background-color: var(--ec-background-color-hover);
+
+    .ec-icon {
+      color: var(--ec-button-color-icon-hover, var(--ec-button-color-icon, var(--ec-color-icon)));
+    }
+  }
+
+  &:active:not(:disabled),
+  &:focus {
+    box-shadow: var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));
+  }
+
+  &:active:not(:disabled) {
+    background-color: var(--ec-background-color-selected);
+  }
+
+  &:disabled {
+    background-color: transparent;
+    border-color: transparent;
+
+    .ec-icon {
+      color: var(--ec-color-disabled-dark);
+    }
+  }
+
+  &.has-badge {
+    width: auto;
+    min-width: 2rem;
+    padding-right: 0;
+    padding-left: 0.375rem;
+  }
+}
+
+@mixin text-button(
+  $type: 'text',
+  $color: var(--ec-color-primary-dark),
+  $icon-color: inherit
+) {
+  background-color: transparent;
+  color: var(--ec-button-color-text, $color);
+
+  .ec-icon {
+    color: var(--ec-button-color-icon-#{$type}, $icon-color);
+  }
+
+  &:active:not(:disabled),
+  &:focus {
+    box-shadow: var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));
+  }
+
+  &:disabled {
+    background-color: transparent;
+    border-color: transparent;
+  }
+}

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

@@ -0,0 +1,40 @@
+@mixin card {
+  background-color: var(--ec-background-color);
+  background-clip: padding-box;
+  border: var(--ec-border-width) solid var(--ec-border-color-hint);
+  border-radius: var(--ec-border-radius-card);
+  overflow: auto;
+  box-shadow: var(--ec-box-shadow);
+}
+
+@mixin card-header {
+  display: flex;
+  align-items: center;
+  min-height: 2.5rem;
+}
+
+@mixin card-title {
+  @extend .text-heading-2;
+  @include truncate;
+  cursor: default;
+  display: flex;
+  align-items: center;
+  padding-left: .5rem;
+  padding-right: .5rem;
+  flex: 1 1;
+  min-height: 0;
+  min-width: 0;
+}
+
+@mixin card-footer {
+  @extend .text-caption-1;
+  border-top: 1px solid var(--ec-border-color);
+  min-height: 2rem;
+  padding: .5rem;
+}
+
+@mixin card-actions {
+  padding: .25rem;
+  display: flex;
+  margin-left: auto;
+}

package/src/styles/mixins/_common.scss

@@ -0,0 +1,52 @@
+////
+/// Common mixins to be shared by many components
+////
+
+/// Truncates text
+@mixin truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// Clips text
+@mixin clip {
+  overflow: hidden;
+  text-overflow: clip;
+  white-space: nowrap;
+}
+
+@mixin flex-grow {
+  flex: 1 1;
+  min-height: 0;
+  min-width: 0;
+}
+
+@mixin indicator($color, $condensed:false) {
+  border: solid 2px $color;
+  background-color: rgba($color, .25);
+  display: block;
+  width: 0.625rem;
+  height: 0.625rem;
+  border-radius: 50%;
+
+  @if $condensed {
+    width: .5rem;
+    height: .5rem;
+    border-width: 1px;
+  }
+}
+
+@mixin ul-reset {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+@mixin count-display {
+  color: var(--ec-color-accent);
+  font-size: 2rem;
+  font-style: normal;
+  font-weight: bold;
+  line-height: 1;
+}