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

package/src/styles/_global-variables.scss

@@ -0,0 +1,232 @@
+@import './colors';
+
+// Global CSS variables (custom properties). 
+// Variable names should follow this pattern: --ec-<css-property>[-<dash delimited modifiers>]. 
+// If the variable is the default value, don't include a modifier
+// For example, the primary dark color should be named --ec-color-primary-dark 
+// and default border color should be --ec-border-color
+
+:root {
+  // Variables for the EnergyCAP brand color pallette
+  // Colors go from lighter (1) to darker (8).
+  --ec-color-black: #{$black}; 
+  --ec-color-white: #{$white};
+
+  --ec-color-gray-1: #{$gray-1};
+  --ec-color-gray-2: #{$gray-2};
+  --ec-color-gray-3: #{$gray-3};
+  --ec-color-gray-4: #{$gray-4};
+  --ec-color-gray-5: #{$gray-5};
+  --ec-color-gray-6: #{$gray-6};
+  --ec-color-gray-7: #{$gray-7};
+  --ec-color-gray-8: #{$gray-8};
+
+  --ec-color-red-1: #{$red-1};
+  --ec-color-red-2: #{$red-2};
+  --ec-color-red-3: #{$red-3};
+  --ec-color-red-4: #{$red-4};
+  --ec-color-red-5: #{$red-5};
+  --ec-color-red-6: #{$red-6};
+  --ec-color-red-7: #{$red-7};
+  --ec-color-red-8: #{$red-8};
+
+  --ec-color-orange-1: #{$orange-1};
+  --ec-color-orange-2: #{$orange-2};
+  --ec-color-orange-3: #{$orange-3};
+  --ec-color-orange-4: #{$orange-4};
+  --ec-color-orange-5: #{$orange-5};
+  --ec-color-orange-6: #{$orange-6};
+  --ec-color-orange-7: #{$orange-7};
+  --ec-color-orange-8: #{$orange-8};
+
+  --ec-color-yellow-1: #{$yellow-1};
+  --ec-color-yellow-2: #{$yellow-2};
+  --ec-color-yellow-3: #{$yellow-3};
+  --ec-color-yellow-4: #{$yellow-4};
+  --ec-color-yellow-5: #{$yellow-5};
+  --ec-color-yellow-6: #{$yellow-6};
+  --ec-color-yellow-7: #{$yellow-7};
+  --ec-color-yellow-8: #{$yellow-8};
+
+  --ec-color-green-1: #{$green-1};
+  --ec-color-green-2: #{$green-2};
+  --ec-color-green-3: #{$green-3};
+  --ec-color-green-4: #{$green-4};
+  --ec-color-green-5: #{$green-5};
+  --ec-color-green-6: #{$green-6};
+  --ec-color-green-7: #{$green-7};
+  --ec-color-green-8: #{$green-8};
+
+  --ec-color-blue-1: #{$blue-1};
+  --ec-color-blue-2: #{$blue-2};
+  --ec-color-blue-3: #{$blue-3};
+  --ec-color-blue-4: #{$blue-4};
+  --ec-color-blue-5: #{$blue-5};
+  --ec-color-blue-6: #{$blue-6};
+  --ec-color-blue-7: #{$blue-7};
+  --ec-color-blue-8: #{$blue-8};
+
+  --ec-color-purple-1: #{$purple-1};
+  --ec-color-purple-2: #{$purple-2};
+  --ec-color-purple-3: #{$purple-3};
+  --ec-color-purple-4: #{$purple-4};
+  --ec-color-purple-5: #{$purple-5};
+  --ec-color-purple-6: #{$purple-6};
+  --ec-color-purple-7: #{$purple-7};
+  --ec-color-purple-8: #{$purple-8};
+
+  --ec-color-cobalt-1: #{$cobalt-1};
+  --ec-color-cobalt-2: #{$cobalt-2};
+  --ec-color-cobalt-3: #{$cobalt-3};
+  --ec-color-cobalt-4: #{$cobalt-4};
+  --ec-color-cobalt-5: #{$cobalt-5};
+  --ec-color-cobalt-6: #{$cobalt-6};
+  --ec-color-cobalt-7: #{$cobalt-7};
+  --ec-color-cobalt-8: #{$cobalt-8};
+
+  --ec-color-aqua-1: #{$aqua-1};
+  --ec-color-aqua-2: #{$aqua-2};
+  --ec-color-aqua-3: #{$aqua-3};
+  --ec-color-aqua-4: #{$aqua-4};
+  --ec-color-aqua-5: #{$aqua-5};
+  --ec-color-aqua-6: #{$aqua-6};
+  --ec-color-aqua-7: #{$aqua-7};
+  --ec-color-aqua-8: #{$aqua-8};
+
+  --ec-color-pink-1: #{$pink-1};
+  --ec-color-pink-2: #{$pink-2};
+  --ec-color-pink-3: #{$pink-3};
+  --ec-color-pink-4: #{$pink-4};
+  --ec-color-pink-5: #{$pink-5};
+  --ec-color-pink-6: #{$pink-6};
+  --ec-color-pink-7: #{$pink-7};
+  --ec-color-pink-8: #{$pink-8};
+
+  --ec-color-brand-green: rgb(216, 234, 83);
+  --ec-color-brand-black: rgb(22, 47, 59);
+
+  // Colors
+  --ec-color-primary-dark: var(--ec-color-black);
+  --ec-color-primary-light: var(--ec-color-white);
+  --ec-color-secondary-dark: rgba(26, 26, 35, .66);
+  --ec-color-secondary-light: rgba(255, 255, 255, .6);
+  --ec-color-hint-dark: rgba(26, 26, 35, .38);
+  --ec-color-hint-light: rgba(255, 255, 255, .38);
+  --ec-color-disabled-dark: var(--ec-color-hint-dark);
+  
+  // TODO: where is this used and what would the new value be
+  --ec-color-shadow: rgba(26, 26, 35, .1);
+  // TODO: where is this used and what would the new value be
+  --ec-color-shadow-overlay: rgba(26, 26, 35, .2);
+
+  --ec-color-interactive: var(--ec-color-cobalt-6);
+  --ec-color-link: var(--ec-color-interactive);
+  --ec-color-link-light: var(--ec-color-blue-2);
+
+  --ec-color-info: var(--ec-color-cobalt-6);
+  --ec-color-success: var(--ec-color-green-6);
+  // Deprecated - use ec-color-success
+  --ec-color-good: var(--ec-color-success);
+  --ec-color-caution: var(--ec-color-yellow-8);
+  --ec-color-danger: var(--ec-color-red-7);
+  // Deprecated - use ec-color-danger
+  --ec-color-bad: var(--ec-color-danger);
+  --ec-color-accent: var(--ec-color-purple-6);
+
+  // TODO: where is this used and what would the new value be
+  --ec-color-control-invalid: var(--ec-color-caution);
+
+  // TODO: where is this used and what would the new value be
+  --ec-color-accrual: #{$ec-color-accrual};
+
+  --ec-color-tour-title: var(--ec-color-primary-light);
+  
+  --ec-background-color: rgb(255, 255, 255);
+  --ec-background-color-overlay: rgba(255, 255, 255, .7);
+  --ec-background-color-body: rgb(241, 243, 244);
+  --ec-background-color-body-overlay: rgba(241, 243, 244, .7);
+  --ec-background-color-dark: rgb(26, 26, 35);
+  --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);
+  --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);
+  --ec-background-color-selected: rgb(225, 233, 249);
+
+  --ec-background-color-info: rgb(218, 229, 251);
+  --ec-background-color-success: rgb(227, 251, 214);
+  --ec-background-color-caution: rgb(255, 249, 195);
+  --ec-background-color-danger: rgb(255, 225, 231);
+  --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);
+  
+  // Shadows
+  --ec-box-shadow: 0px .125rem 1rem var(--ec-color-shadow);
+  --ec-box-shadow-overlay: 0px .0625rem .5rem var(--ec-color-shadow-overlay);
+
+  // Borders
+  --ec-border-color: #D6D6D7;
+  --ec-border-color-dark: #383840;
+  --ec-border-color-hint: var(--ec-color-gray-1);
+  --ec-border-color-control: var(--ec-color-gray-4);
+  --ec-border-color-control-disabled: var(--ec-border-color-control);
+  --ec-border-color-control-readonly: transparent;
+
+  --ec-border-radius: .25rem;
+  --ec-border-radius-card: .375rem;
+  --ec-border-radius-dialog: .5rem;
+  --ec-border-color-focus: var(--ec-color-interactive);
+  --ec-border-width: 1px;
+
+  // Fonts
+  --ec-font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  --ec-font-family-monospace: "Consolas", "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Monaco", "Courier New", Courier, monospace;
+  
+  --ec-font-size: .875rem;
+  --ec-font-size-body: 1rem;
+  --ec-font-size-label: .75rem;
+  --ec-font-size-action: .875rem;
+  --ec-font-size-title: 1.25rem;
+  --ec-font-size-icon: 1rem;
+  --ec-font-size-tiny: .625rem;
+
+  --ec-font-weight-bold: bold;
+  --ec-font-weight-normal: normal;
+
+  // Z-indexes
+  --ec-z-index-sticky-header: 3;
+  --ec-z-index-sticky-page-header: 10;
+  --ec-z-index-overlay: 20;
+  --ec-z-index-splitter: 30;
+  --ec-z-index-navbar: 40;
+  --ec-z-index-popup: 50;
+  --ec-z-index-dialog: 60;
+  --ec-z-index-toast: 70;
+
+  // Form Controls
+  --ec-form-control-background-color: var(--ec-background-color);
+  --ec-form-control-color: var(--ec-color-primary-dark);
+  --ec-form-control-color-placeholder: var(--ec-color-hint-dark);
+  --ec-form-control-background-color-selection: var(--ec-color-interactive);
+  --ec-form-control-color-selection: var(--ec-color-primary-light);
+  --ec-form-control-border-color: var(--ec-color-gray-4);
+  --ec-form-control-border-radius: var(--ec-border-radius);
+  --ec-form-control-font-size: var(--ec-font-size-body);
+  --ec-form-control-border-color-focus: var(--ec-background-color);
+  --ec-form-control-box-shadow-focus: 0 0 0 2px var(--ec-color-interactive);
+  --ec-form-control-background-color-invalid: var(--ec-background-color-caution);
+  --ec-form-control-color-invalid: var(--ec-color-primary-dark);
+  --ec-form-control-border-color-invalid: var(--ec-color-caution);
+  --ec-form-control-background-color-disabled: var(--ec-background-color-disabled);
+  --ec-form-control-color-disabled: var(--ec-color-primary-dark);
+  --ec-form-control-border-color-disabled: var(--ec-color-gray-4);
+  --ec-form-control-opacity-disabled: .6;
+  --ec-form-control-background-color-readonly: var(--ec-background-color-disabled);
+  --ec-form-control-color-readonly: var(--ec-color-primary-dark);
+  --ec-form-control-border-color-readonly: var(--ec-color-gray-4);
+}

package/src/styles/_icons.scss

@@ -0,0 +1,24 @@
+$icon-url-prefix: 'data:image/svg+xml;charset=utf8,';
+
+// Deprecated SCSS variables and functions for legacy background-image icons.
+$icon-color-base: rgba(26, 26, 35, .66);
+$required-icon: none !default; // Unused variable. Need to keep reference for backwards compatability. Overridden for ng1 controls in energycap repo.
+$invalid-icon: none !default; // Unused variable. Need to keep reference for backwards compatability. Overridden for ng1 controls in energycap repo.
+
+// Unused function. Need to keep reference for backwards compatability. Overridden for ng1 controls in energycap repo.
+@function pending-icon() { 
+	@return ''; 
+} 
+
+// Needed for backwards compatablity of ng1 form controls in energycap repo
+@mixin icon-bg-image(
+	$icon,
+	$position: 0 50%, 
+	$size: 2rem 2rem, 
+	$repeat: no-repeat
+) { 
+	background-image: $icon;
+	background-repeat: $repeat;
+	background-position: $position;
+	background-size: $size;
+}

package/src/styles/bootstrap/_grid.scss

@@ -0,0 +1,34 @@
+// Bootstrap Grid
+// TODO: extract only classes we need. Keeping mostly for backwards compatibility with EnergyCAP Version 7
+@import 'bootstrap/dist/css/bootstrap-grid.min';
+@media (min-width: 1024px) {
+    .container {
+        max-width: 100%;
+    }
+}
+
+// Override bootstrap's default column padding to 8px
+.container,
+.container-fluid,
+.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, 
+.col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, 
+.col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, 
+.col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, 
+.col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, 
+.col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, 
+.col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, 
+.col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, 
+.col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, 
+.col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, 
+.col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, 
+.col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, 
+.col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, 
+.col-xl-auto {
+    padding-right: .5rem;
+    padding-left: .5rem;
+}
+
+.row {
+    margin-right: -.5rem;
+    margin-left: -.5rem;
+}

package/src/styles/bootstrap/_reboot.scss

@@ -0,0 +1,323 @@
+/*!
+* Bootstrap Reboot v4.1.3 (https://getbootstrap.com/)
+* Copyright 2011-2018 The Bootstrap Authors
+* Copyright 2011-2018 Twitter, Inc.
+* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
+*/
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: sans-serif;
+  line-height: 1.15;
+  -webkit-text-size-adjust: 100%;
+  -ms-overflow-style: scrollbar;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+@-ms-viewport {
+  width: device-width;
+}
+
+article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
+  display: block;
+}
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, Noto Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #212529;
+  text-align: left;
+  background-color: #fff;
+}
+
+[tabindex="-1"]:focus {
+  outline: 0 !important;
+}
+
+hr {
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+abbr[title],
+abbr[data-original-title] {
+  text-decoration: underline;
+  -webkit-text-decoration: underline dotted;
+  text-decoration: underline dotted;
+  cursor: help;
+  border-bottom: 0;
+}
+
+address {
+  margin-bottom: 1rem;
+  font-style: normal;
+  line-height: inherit;
+}
+
+ol,
+ul,
+dl {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+ol ol,
+ul ul,
+ol ul,
+ul ol {
+  margin-bottom: 0;
+}
+
+dt {
+  font-weight: 700;
+}
+
+dd {
+  margin-bottom: .5rem;
+  margin-left: 0;
+}
+
+blockquote {
+  margin: 0 0 1rem;
+}
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+small {
+  font-size: 80%;
+}
+
+sub,
+sup {
+  position: relative;
+  font-size: 75%;
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -.25em;
+}
+
+sup {
+  top: -.5em;
+}
+
+a {
+  color: #007bff;
+  text-decoration: none;
+  background-color: transparent;
+}
+
+a:hover {
+  color: #0056b3;
+  text-decoration: underline;
+}
+
+a:not([href]):not([tabindex]):not(.text-link) {
+  color: inherit;
+  text-decoration: none;
+}
+
+a:not([href]):not([tabindex]):not(.text-link):hover, a:not([href]):not([tabindex]):not(.text-link):focus {
+  color: inherit;
+  text-decoration: none;
+}
+
+a:not([href]):not([tabindex]):focus {
+  outline: 0;
+}
+
+pre,
+code,
+kbd,
+samp {
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 1em;
+}
+
+pre {
+  margin-top: 0;
+  margin-bottom: 1rem;
+  overflow: auto;
+  -ms-overflow-style: scrollbar;
+}
+
+figure {
+  margin: 0 0 1rem;
+}
+
+img {
+  vertical-align: middle;
+  border-style: none;
+}
+
+svg {
+  overflow: hidden;
+  vertical-align: middle;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+caption {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  color: #6c757d;
+  text-align: left;
+  caption-side: bottom;
+}
+
+th {
+  text-align: inherit;
+}
+
+label {
+  display: inline-block;
+  margin-bottom: 0.5rem;
+}
+
+button {
+  border-radius: 0;
+}
+
+button:focus {
+  outline: 1px dotted;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
+input,
+button,
+select,
+optgroup,
+textarea {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+button,
+input {
+  overflow: visible;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+input[type="radio"],
+input[type="checkbox"] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+input[type="date"],
+input[type="time"],
+input[type="datetime-local"],
+input[type="month"] {
+  -webkit-appearance: listbox;
+}
+
+textarea {
+  overflow: auto;
+  resize: vertical;
+}
+
+fieldset {
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+legend {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  padding: 0;
+  margin-bottom: .5rem;
+  font-size: 1.5rem;
+  line-height: inherit;
+  color: inherit;
+  white-space: normal;
+}
+
+progress {
+  vertical-align: baseline;
+}
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+[type="search"] {
+  outline-offset: -2px;
+  -webkit-appearance: none;
+}
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+::-webkit-file-upload-button {
+  font: inherit;
+  -webkit-appearance: button;
+}
+
+output {
+  display: inline-block;
+}
+
+summary {
+  display: list-item;
+  cursor: pointer;
+}
+
+template {
+  display: none;
+}
+
+[hidden] {
+  display: none !important;
+}

package/src/styles/components/_card.scss

@@ -0,0 +1,21 @@
+@import '../mixins/card-base';
+
+.card {
+  @include card;
+}
+
+.card-header {
+  @include card-header;
+}
+
+.card-title {
+  @include card-title;
+}
+
+.card-footer {
+  @include card-footer;
+}
+
+.card-actions {
+  @include card-actions;
+}

package/src/styles/components/_link-icons.scss

@@ -0,0 +1,38 @@
+$fa-font-path: '/assets/webfonts';
+@import '@fortawesome/fontawesome-pro/scss/solid';
+@import '../../../../icons/styles/core';
+
+a[target="_blank"] {
+  &::after {
+    font: var(--fa-font-solid);
+    @extend .fa-solid;
+    content: fa-content('\\' + get-icon-unicode($icons, 'icon-external-link'));
+    margin-left: .125rem;
+    opacity: .5;
+  }
+
+  &.is-map-link {
+    &::after {
+      content: fa-content('\\' + get-icon-unicode($icons, 'icon-map-marker-alt'));
+    }
+  }
+
+  &.is-file-link {
+    &::after {
+      content: fa-content('\\' + get-icon-unicode($icons, 'icon-file-download'));
+    }
+  }
+
+  &.is-image-link {
+    &::after {
+      content: fa-content('\\' + get-icon-unicode($icons, 'icon-file-image'));
+    }
+  }
+}
+
+.hide-external-link-icon {
+  &[target="_blank"]::after,
+  [target="_blank"]::after {
+    content: '' !important;
+  }
+}