@energycap/components 0.45.2-multi-select-component.20260303-1641 → 0.45.2-multi-select-component.20260303-1239

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

@@ -1,228 +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;
-  }
+// 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 +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;
+/** 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,29 +1,29 @@
-@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';
-@import 'components/tag';
-@import 'components/badge';
-
-/*!
-* EnergyCAP Components - Utility Styles
-*/
-@import 'utilities/layout';
-@import 'utilities/spacing';
-@import 'utilities/text';
-@import 'utilities/borders';
-@import 'utilities/common';
+@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';
+@import 'components/tag';
+@import 'components/badge';
+
+/*!
+* 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 +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;
+@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;
 }