@energycap/components 0.45.2-multi-select-component.20260304-1123 → 0.45.2-multi-select-component.20260304-1639

package/src/styles/utilities/_spacing.scss

@@ -1,65 +1,65 @@
-// TODO: implement after removing bootstrap.grid.min.css dependency
-
-// @mixin spacer-prop($selector, $prop, $i, $rem) {
-//   .#{$selector}-#{$i} {
-//     #{$prop}: $rem !important;  
-//   }
-//   .#{$selector}x-#{$i} {
-//     #{$prop}-left: $rem !important;
-//     #{$prop}-right: $rem !important;
-//   }
-//   .#{$selector}y-#{$i} {
-//     #{$prop}-top: $rem !important;
-//     #{$prop}-bottom: $rem !important;
-//   }
-//   .#{$selector}l-#{$i} {
-//     #{$prop}-left: $rem !important;
-//   }
-//   .#{$selector}t-#{$i} {
-//     #{$prop}-top: $rem !important;
-//   }
-//   .#{$selector}r-#{$i} {
-//     #{$prop}-right: $rem !important;
-//   }
-//   .#{$selector}b-#{$i} {
-//     #{$prop}-bottom: $rem !important;
-//   }
-// }
-
-// @mixin spacers() {
-//   $i: 0;
-//   $rem: 0;
-//   @while $i < 6 {
-//     @include spacer-prop(p, padding, $i, $rem);
-//     @include spacer-prop(m, margin, $i, $rem);
-
-//     @if $i == 0 {
-//       $rem: .25rem; 
-//     } @else {
-//       $rem: ($rem * 2);
-//     }
-//     $i: $i + 1;
-//   }
-// }
-
-// .ml-auto {
-//   margin-left: auto !important;
-// }
-
-// .mr-auto {
-//   margin-right: auto !important;
-// }
-
-// .mt-auto {
-//   margin-top: auto !important;
-// }
-
-// .mb-auto {
-//   margin-bottom: auto !important;
-// }
-
-// .m-auto {
-//   margin: auto !important;
-// }
-
+// TODO: implement after removing bootstrap.grid.min.css dependency
+
+// @mixin spacer-prop($selector, $prop, $i, $rem) {
+//   .#{$selector}-#{$i} {
+//     #{$prop}: $rem !important;  
+//   }
+//   .#{$selector}x-#{$i} {
+//     #{$prop}-left: $rem !important;
+//     #{$prop}-right: $rem !important;
+//   }
+//   .#{$selector}y-#{$i} {
+//     #{$prop}-top: $rem !important;
+//     #{$prop}-bottom: $rem !important;
+//   }
+//   .#{$selector}l-#{$i} {
+//     #{$prop}-left: $rem !important;
+//   }
+//   .#{$selector}t-#{$i} {
+//     #{$prop}-top: $rem !important;
+//   }
+//   .#{$selector}r-#{$i} {
+//     #{$prop}-right: $rem !important;
+//   }
+//   .#{$selector}b-#{$i} {
+//     #{$prop}-bottom: $rem !important;
+//   }
+// }
+
+// @mixin spacers() {
+//   $i: 0;
+//   $rem: 0;
+//   @while $i < 6 {
+//     @include spacer-prop(p, padding, $i, $rem);
+//     @include spacer-prop(m, margin, $i, $rem);
+
+//     @if $i == 0 {
+//       $rem: .25rem; 
+//     } @else {
+//       $rem: ($rem * 2);
+//     }
+//     $i: $i + 1;
+//   }
+// }
+
+// .ml-auto {
+//   margin-left: auto !important;
+// }
+
+// .mr-auto {
+//   margin-right: auto !important;
+// }
+
+// .mt-auto {
+//   margin-top: auto !important;
+// }
+
+// .mb-auto {
+//   margin-bottom: auto !important;
+// }
+
+// .m-auto {
+//   margin: auto !important;
+// }
+
 // @include spacers();

package/src/styles/utilities/_text.scss

@@ -1,139 +1,139 @@
-@import "../mixins/overlay-base";
-@import "../mixins/text";
-
-// Text styles
-.text-title-1 {
-  @include text-title-1;
-}
-
-.text-title-2 {
-  @include text-title-2;
-}
-
-.text-heading-1 {
-  @include text-heading-1;
-}
-
-.text-heading-2 {
-  @include text-heading-2;
-}
-
-.text-heading-3 {
-  @include text-heading-3;
-}
-
-.text-body-1 {
-  @include text-body-1;
-}
-
-.text-body-2 {
-  @include text-body-2;
-}
-
-.text-caption-1 {
-  @include text-caption-1;
-}
-
-.text-caption-2 {
-  @include text-caption-2;
-}
-
-.text-display-1 {
-  @include text-display-1;
-}
-
-.text-link {
-  @include text-link;
-}
-
-@each $alignment in (left, right, center) {
-  .text-#{$alignment} {
-    text-align: $alignment !important;
-  }
-}
-
-// Font property utilities
-.font-weight-bold {
-  font-weight: var(--ec-font-weight-bold) !important;
-}
-
-.font-weight-normal {
-  font-weight: var(--ec-font-weight-normal) !important;
-}
-
-.font-size-small {
-  font-size: var(--ec-font-size-label) !important;
-}
-
-.font-size-medium {
-  font-size: var(--ec-font-size-body) !important;
-}
-
-.font-size-base {
-  font-size: var(--ec-font-size) !important;
-}
-
-.font-size-large {
-  font-size: var(--ec-font-size-title) !important;
-}
-
-.font-color-primary {
-  color: var(--ec-color-primary-dark) !important;
-}
-
-.font-color-primary-light {
-  color: var(--ec-color-primary-light) !important;
-}
-
-.font-color-secondary {
-  color: var(--ec-color-secondary-dark) !important;
-}
-
-.font-color-secondary-light {
-  color: var(--ec-color-secondary-light) !important;
-}
-
-// font-color-muted is deprecated, use .font-color-hint instead
-.font-color-muted,
-.font-color-hint {
-  color: var(--ec-color-hint-dark) !important;
-}
-
-// @deprecated, use .text-link instead.
-.font-color-link {
-  color: var(--ec-color-link) !important;
-}
-
-.font-color-error {
-  color: var(--ec-color-danger) !important;
-}
-
-.font-color-success {
-  color: var(--ec-color-success) !important;
-}
-
-.font-color-interactive {
-  color: var(--ec-color-interactive) !important;
-}
-
-// @deprecated use .text-display-1 instead
-.font-message {
-  @include overlay-message;
-}
-
-// @deprecated use .text-display-1 instead
-.font-message-medium {
-  @include overlay-message($font-size: var(--ec-font-size-body));
-}
-
-.text-truncate {
-  @include truncate();
-}
-
-.text-break-all {
-  word-break: break-all;
-}
-
-.text-wrap {
-  white-space: normal;
-}
+@import "../mixins/overlay-base";
+@import "../mixins/text";
+
+// Text styles
+.text-title-1 {
+  @include text-title-1;
+}
+
+.text-title-2 {
+  @include text-title-2;
+}
+
+.text-heading-1 {
+  @include text-heading-1;
+}
+
+.text-heading-2 {
+  @include text-heading-2;
+}
+
+.text-heading-3 {
+  @include text-heading-3;
+}
+
+.text-body-1 {
+  @include text-body-1;
+}
+
+.text-body-2 {
+  @include text-body-2;
+}
+
+.text-caption-1 {
+  @include text-caption-1;
+}
+
+.text-caption-2 {
+  @include text-caption-2;
+}
+
+.text-display-1 {
+  @include text-display-1;
+}
+
+.text-link {
+  @include text-link;
+}
+
+@each $alignment in (left, right, center) {
+  .text-#{$alignment} {
+    text-align: $alignment !important;
+  }
+}
+
+// Font property utilities
+.font-weight-bold {
+  font-weight: var(--ec-font-weight-bold) !important;
+}
+
+.font-weight-normal {
+  font-weight: var(--ec-font-weight-normal) !important;
+}
+
+.font-size-small {
+  font-size: var(--ec-font-size-label) !important;
+}
+
+.font-size-medium {
+  font-size: var(--ec-font-size-body) !important;
+}
+
+.font-size-base {
+  font-size: var(--ec-font-size) !important;
+}
+
+.font-size-large {
+  font-size: var(--ec-font-size-title) !important;
+}
+
+.font-color-primary {
+  color: var(--ec-color-primary-dark) !important;
+}
+
+.font-color-primary-light {
+  color: var(--ec-color-primary-light) !important;
+}
+
+.font-color-secondary {
+  color: var(--ec-color-secondary-dark) !important;
+}
+
+.font-color-secondary-light {
+  color: var(--ec-color-secondary-light) !important;
+}
+
+// font-color-muted is deprecated, use .font-color-hint instead
+.font-color-muted,
+.font-color-hint {
+  color: var(--ec-color-hint-dark) !important;
+}
+
+// @deprecated, use .text-link instead.
+.font-color-link {
+  color: var(--ec-color-link) !important;
+}
+
+.font-color-error {
+  color: var(--ec-color-danger) !important;
+}
+
+.font-color-success {
+  color: var(--ec-color-success) !important;
+}
+
+.font-color-interactive {
+  color: var(--ec-color-interactive) !important;
+}
+
+// @deprecated use .text-display-1 instead
+.font-message {
+  @include overlay-message;
+}
+
+// @deprecated use .text-display-1 instead
+.font-message-medium {
+  @include overlay-message($font-size: var(--ec-font-size-body));
+}
+
+.text-truncate {
+  @include truncate();
+}
+
+.text-break-all {
+  word-break: break-all;
+}
+
+.text-wrap {
+  white-space: normal;
+}

package/types/energycap-components.d.ts

@@ -6149,7 +6149,7 @@ declare class MultiselectComponent extends FormControlBase implements OnInit, On
      */
     get showAddCustomOption(): boolean;
     /** Placeholder text for 'Choose' */
-    private choosePlaceholder;
+    private searchPlaceholder;
     /** Items added by the user via the allowCustom feature */
     private customItems;
     /** Flag to prevent valueChanges subscriptions from reacting during programmatic sync */
@@ -6256,7 +6256,9 @@ declare class MultiselectComponent extends FormControlBase implements OnInit, On
      */
     private synchronizeDisabledAttributes;
     /**
-     * Recompute the placeholder text
+     * Recompute the placeholder text.
+     * When items are selected, show 'Search_TC' so the user knows they can filter.
+     * When no items are selected, show the provided placeholder or the default 'Choose' text.
      */
     private updatePlaceholderText;
     /**