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

package/src/styles/components/_splash.scss

@@ -1,57 +0,0 @@
-@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

@@ -1,24 +0,0 @@
-@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

@@ -1,228 +0,0 @@
-// 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

@@ -1,43 +0,0 @@
-/** 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

@@ -1,27 +0,0 @@
-@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

@@ -1,18 +0,0 @@
-@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

@@ -1,185 +0,0 @@
-$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

@@ -1,40 +0,0 @@
-@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

@@ -1,52 +0,0 @@
-////
-/// 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;
-}