@energycap/components 0.46.1 → 0.46.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@energycap/components",
-  "version": "0.46.1",
+  "version": "0.46.3",
   "schematics": "./schematics/collection.json",
   "dependencies": {
     "tslib": "^2.0.0"

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

@@ -545,6 +545,7 @@ $checkbox-indicator-size: $form-control-icon-size;
     cursor: pointer;
     display: flex;
     flex: 1 1 0%;
+    gap: 0.25rem;
     justify-content: center;
     line-height: 1.1em;
     margin-bottom: 0;
@@ -557,6 +558,10 @@ $checkbox-indicator-size: $form-control-icon-size;
     .ec-icon {
       color: inherit;
     }
+
+    &.is-selected {
+      color: var(--ec-color-interactive);
+    }
   }
 
   a {

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

@@ -1,34 +1,23 @@
-// Animation
-@use "sass:math";
-
-@keyframes sk-bouncedelay {
-    0%, 80%, 100% {
-        opacity: 0;
-    } 40% {
-        opacity: 1;
-    }
+@keyframes bblFadInOut {
+    0%, 80%, 100% { transform: scale(0); }
+    40%           { transform: scale(1); }
 }
 
-@mixin spinner-dot($dot-size: .75rem) {
+@mixin spinner-dot($dot-size: 17.5px) {
     width: $dot-size;
     height: $dot-size;
-    background-color: var(--ec-spinner-color, var(--ec-color-purple-5));
-    animation: sk-bouncedelay 1.7s infinite ease-in-out both;
-    margin-right: math.div($dot-size, 3);
-
-    &:nth-child(1) {
-        animation-delay: -0.60s;
-    }
-
-    &:nth-child(2) {
-        animation-delay: -0.40s;
-    }
+    border-radius: 50%;
+    background-color: var(--ec-spinner-color, var(--ec-color-brand-black));
+    animation: bblFadInOut 1.8s infinite ease-in-out both;
+    flex-shrink: 0;
 
-    &:nth-child(3) {
-        animation-delay: -0.20s;
-    }
+    &:nth-child(1) { animation-delay: -0.32s; }
+    &:nth-child(2) { animation-delay: -0.16s; }
+    &:nth-child(3) { animation-delay: 0s; }
 }
 
-@mixin spinner {
+@mixin spinner($dot-size: 17.5px) {
     display: flex;
+    gap: calc(#{$dot-size} / 2.5);
+    align-items: center;
 }

package/types/energycap-components.d.ts

@@ -3361,6 +3361,12 @@ declare class RadioButtonComponent extends FormControlBase implements AfterViewI
      * @default 'row'
      */
     direction?: RadioButtonDirection;
+    /**
+     * When true, only icons are displayed in toggle options — labels are hidden even if present on the option.
+     * Only applies when type is 'toggle'.
+     * @default false
+     */
+    iconOnly: boolean;
     /**
     * The name of the radio input element used to group radio elements
     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio
@@ -3380,7 +3386,7 @@ declare class RadioButtonComponent extends FormControlBase implements AfterViewI
     ngOnInit(): void;
     ngAfterViewInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<RadioButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<RadioButtonComponent, "ec-radiobutton", never, { "type": { "alias": "type"; "required": false; }; "options": { "alias": "options"; "required": false; }; "direction": { "alias": "direction"; "required": false; }; "name": { "alias": "name"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RadioButtonComponent, "ec-radiobutton", never, { "type": { "alias": "type"; "required": false; }; "options": { "alias": "options"; "required": false; }; "direction": { "alias": "direction"; "required": false; }; "iconOnly": { "alias": "iconOnly"; "required": false; }; "name": { "alias": "name"; "required": false; }; }, {}, never, never, false, never>;
 }
 
 interface ClickableElement {