@energycap/components 0.36.5-ECAP-18591-link-button-disabled-state.20230808-0954 → 0.37.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@energycap/components",
-  "version": "0.36.5-ECAP-18591-link-button-disabled-state.20230808-0954",
+  "version": "0.37.0",
   "dependencies": {
     "tslib": "^2.0.0"
   },
@@ -10,7 +10,6 @@
     "@angular/forms": ">=15.2.0",
     "@angular/router": ">=15.2.0",
     "@angular/cdk": ">=15.2.0",
-    "@energycap/energycap-icons": "^4.0.0",
     "@ngx-translate/core": "^14.0.0",
     "popper.js": "~1.11.1",
     "lodash": "^4.17.21",

package/src/styles/_base.scss

@@ -1,7 +1,7 @@
 $fa-font-path: '/assets/webfonts';
 @import '@fortawesome/fontawesome-pro/scss/solid';
 @import '@angular/cdk/overlay-prebuilt.css';
-@import '../../../icons/src/styles/core';
+@import '../../../icons/styles/core';
 
 html,
 body {

package/src/styles/_icons.scss

@@ -1,26 +1,16 @@
-// TODO: replace these background image icons with icon font icons. Requires updating ng1 form controls in energycap project (ECAP-9608)
-
 $icon-url-prefix: 'data:image/svg+xml;charset=utf8,';
 
-// Deprecated SCSS variables for legacy background-image icons.
+// Deprecated SCSS variables and functions for legacy background-image icons.
 $icon-color-base: rgba(26, 26, 35, .66);
+$required-icon: none; // Unused variable. Need to keep reference for backwards compatability. Overridden for ng1 controls in energycap repo.
+$invalid-icon: none; // Unused variable. Need to keep reference for backwards compatability. Overridden for ng1 controls in energycap repo.
 
-$required-icon: str-replace(url('#{$icon-url-prefix}<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#{$yellow-4}" d="M31.32 21.69l-.09.18-2.48 4.35c-.36.54-.77.62-1.25.27-.12 0-.2 0-.2-.09L19.53 22v9.37a1.26 1.26 0 0 1-.72.67h-5.26c-.59 0-.83-.3-.83-.89 0-.12.15-.21.15-.27V22l-8 4.71h-.12c-.42.66-.8.21-1.16-.27L1 21.82a.82.82 0 0 1 .35-1.26l.18-.1L9 16 .87 11.47v-.09c0-.36-.39-.74-.09-1.16l2.75-4.35v-.09c0-.42.82-.54 1.29-.36l8 4.62V.89c0-.59.18-.89.77-.89h5c.65 0 .91.3.91.89V10l7.94-4.53c.48-.29.72-.21 1.08.27l2.32 4.35v.09c.66.48.45.89-.08 1.25L23 16l7.91 4.53v.09c-.04.18.53.54.41 1.07z"/></svg>'), '#', '%23');
-
-$invalid-icon: str-replace(url('#{$icon-url-prefix}<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="#{$icon-color-base}" d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c-13.3 0-24 10.7-24 24V264c0 13.3 10.7 24 24 24s24-10.7 24-24V152c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"/></svg>'), '#', '%23');
-
-@function pending-icon($color: '#0084a9') {
-  @return str-replace(url('#{$icon-url-prefix}<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 50 50"><path fill="#{$color}" d="M43.935 25.145c0-10.318-8.364-18.683-18.683-18.683-10.318 0-18.683 8.365-18.683 18.683h4.068c0-8.071 6.543-14.615 14.615-14.615s14.615 6.543 14.615 14.615h4.068z"><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.8s" repeatCount="indefinite"/></path></svg>'), '#', '%23');
-}
-
-@function icon-sort-asc-bg($color: $icon-color-base) {
-  @return str-replace(url('#{$icon-url-prefix}<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#{$color}" d="M14 8.828V27a2 2 0 1 0 4 0V8.828l4.586 4.586a2 2 0 0 0 2.828-2.828l-8-8a2 2 0 0 0-2.828 0l-8 8a2 2 0 0 0 2.828 2.828L14 8.828z"/></svg>'), '#', '%23');
-}
-
-@function icon-caret-down-bg($color: $icon-color-base) {
-  @return str-replace(url('#{$icon-url-prefix}<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#{$color}" d="M32 8L16 24 0 8z"/></svg>'), '#', '%23');
-}
+// 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%, 

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

@@ -98,6 +98,10 @@ $control-bg-read-only: rgba($black, .12);
         background-color: $control-bg-disabled;
         border-color: var(--ec-border-color-control-disabled);
       }
+
+      & + .icon-required {
+        display: none;
+      }
     }
   }
 }

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

@@ -37,6 +37,20 @@ $checkbox-indicator-size: $form-control-icon-size;
   .textbox-group-input ::ng-deep .control input.ng-invalid,
   .textbox-group-input ::ng-deep .control input.ng-valid {
     @include form-control-state(invalid, input);
+
+    background-image: none;
+
+    & ~ .icon-invalid {
+      display: inline-flex;
+      position: absolute;
+      left: .5rem;
+      top: .5rem;
+      z-index: 1;
+    }
+
+    & ~ .icon-required {
+      display: none
+    }
   }
 
   &:not(.open) {
@@ -78,7 +92,7 @@ $checkbox-indicator-size: $form-control-icon-size;
 
   /// Pending
   } @else if $state == pending {
-    @include form-control-input-icon(pending-icon(), $position: $icon-position)
+    @include form-control-input-icon(pending-icon(), $position: $icon-position);
 
   /// Invalid
   } @else if $state == invalid {
@@ -106,7 +120,7 @@ $checkbox-indicator-size: $form-control-icon-size;
 
 /// The default form control element in the control component
 /// @param {string} $tag [input] - The HTML tag name of the input element (e.g. input, textarea)
-@mixin form-control-input($selector: input) {
+@mixin form-control-input($selector: input, $new-state-icons: false) {
   @include control-default;
   @include form-control-input-base;
   background-image: none;
@@ -125,6 +139,19 @@ $checkbox-indicator-size: $form-control-icon-size;
   &:required {
     &.is-empty {
       @include form-control-state(required, $selector);
+
+      @if $new-state-icons {
+        background-image: none;
+
+        & ~ .icon-required {
+          display: inline-flex;
+          position: absolute;
+          left: .5rem;
+          top: .5rem;
+          z-index: 1;
+          color: var(--ec-color-yellow-4);
+        }
+      }
     }
   }
 
@@ -132,6 +159,22 @@ $checkbox-indicator-size: $form-control-icon-size;
   &.ng-invalid {
     &.ng-touched {
       @include form-control-state(invalid, $selector);
+
+      @if $new-state-icons {
+        background-image: none;
+
+        & ~ .icon-invalid {
+          display: inline-flex;
+          position: absolute;
+          left: .5rem;
+          top: .5rem;
+          z-index: 1;
+        }
+  
+        & ~ .icon-required {
+          display: none
+        }
+      }
     }
   }
 
@@ -140,6 +183,21 @@ $checkbox-indicator-size: $form-control-icon-size;
     &.ng-invalid,
     &.ng-pending {
       @include form-control-state(pending, $selector);
+
+      @if $new-state-icons {
+        & ~ .icon-loading {
+          display: inline-flex;
+          position: absolute;
+          left: .5rem;
+          top: .5rem;
+          z-index: 1;
+        }
+
+        & ~ .icon-required,
+        & ~ .icon-invalid {
+          display: none;
+        }
+      }
     }
   }
 

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

@@ -138,14 +138,18 @@ $table-z-indexes: (
 }
 
 @mixin table-col-sort-icon() {
-  content: '';
-  background-repeat: no-repeat;
-  background-position: center;
   width: .875rem;
   height: .875rem;
   margin: 0 .25rem;
-  vertical-align: top;
+  font-size: .75rem;
   display: none;
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin icon-sort-asc {
+	font: var(--fa-font-solid);
+	content: "\f063";
 }
 
 @mixin table-col-sort() {
@@ -167,8 +171,8 @@ $table-z-indexes: (
     &.is-sorted-desc,
     &.is-sorted-asc {
       .content-wrapper::after {
-        background-image: icon-sort-asc-bg();
-        display: inline-block;
+        @include icon-sort-asc;
+        display: inline-flex;
       }
     }
 
@@ -195,8 +199,8 @@ $table-z-indexes: (
     &.is-sorted-desc,
     &.is-sorted-asc {
       &::after {
-        background-image: icon-sort-asc-bg();
-        display: inline-block;
+        @include icon-sort-asc;
+        display: inline-flex;
       }
     }
 
@@ -217,7 +221,7 @@ $table-z-indexes: (
       &.is-sorted-desc,
       &.is-sorted-asc {
         &::before {
-          background-image: icon-sort-asc-bg();
+          @include icon-sort-asc;
           display: inline-block;
         }
       }