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

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

@@ -6038,6 +6038,12 @@ declare class MultiselectComponent extends FormControlBase implements OnInit, On
      * Truncate menu items when true
      */
     truncateItems: boolean;
+    /**
+     * When true, allows the user to add a custom value that is not in the options list.
+     * The custom item will use the typed text as both its label and value.
+     * @default false
+     */
+    allowCustom: boolean;
     /**
      * Maximum number of items that can be selected. 0 means no limit.
      * @default 0
@@ -6122,8 +6128,17 @@ declare class MultiselectComponent extends FormControlBase implements OnInit, On
      * Selectable items flattened from the options
      */
     selectableItems: MenuItem[];
+    /**
+     * Whether to show the "Add custom" option in the dropdown.
+     * Visible when allowCustom is true, the filter text is non-empty,
+     * no existing option exactly matches the filter text (case-insensitive),
+     * and the value has not already been added as a custom item.
+     */
+    get showAddCustomOption(): boolean;
     /** Placeholder text for 'Choose' */
     private choosePlaceholder;
+    /** Items added by the user via the allowCustom feature */
+    private customItems;
     /** Flag to prevent valueChanges subscriptions from reacting during programmatic sync */
     private ignoreCheckboxChanges;
     /** Fired when options change to clean up previous item FormControl subscriptions */
@@ -6157,6 +6172,11 @@ declare class MultiselectComponent extends FormControlBase implements OnInit, On
      * Handle filter input changes
      */
     onFilterInput(): void;
+    /**
+     * Add a custom item from the current filter text and select it.
+     * The item uses the typed text as both label and value.
+     */
+    addCustomItem(): void;
     /**
      * Handle keyboard navigation
      */
@@ -6177,6 +6197,10 @@ declare class MultiselectComponent extends FormControlBase implements OnInit, On
      * Get selectable items from the current filtered options, excluding the select-all item
      */
     getVisibleSelectableItems(): MenuItem[];
+    /**
+     * Get all options including any custom items added by the user
+     */
+    getAllOptions(): MenuItem[];
     /**
      * Unfilter options and update selectable items
      */
@@ -6233,7 +6257,7 @@ declare class MultiselectComponent extends FormControlBase implements OnInit, On
      */
     private buildCheckboxFormControls;
     static ɵfac: i0.ɵɵFactoryDeclaration<MultiselectComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MultiselectComponent, "ec-multiselect", never, { "options": { "alias": "options"; "required": false; }; "menuPosition": { "alias": "menuPosition"; "required": false; }; "popupFixed": { "alias": "popupFixed"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "tagType": { "alias": "tagType"; "required": false; }; "hideNoMatches": { "alias": "hideNoMatches"; "required": false; }; "noMatchesText": { "alias": "noMatchesText"; "required": false; }; "truncateItems": { "alias": "truncateItems"; "required": false; }; "maxSelections": { "alias": "maxSelections"; "required": false; }; }, { "search": "search"; "selectionChanged": "selectionChanged"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MultiselectComponent, "ec-multiselect", never, { "options": { "alias": "options"; "required": false; }; "menuPosition": { "alias": "menuPosition"; "required": false; }; "popupFixed": { "alias": "popupFixed"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "tagType": { "alias": "tagType"; "required": false; }; "hideNoMatches": { "alias": "hideNoMatches"; "required": false; }; "noMatchesText": { "alias": "noMatchesText"; "required": false; }; "truncateItems": { "alias": "truncateItems"; "required": false; }; "allowCustom": { "alias": "allowCustom"; "required": false; }; "maxSelections": { "alias": "maxSelections"; "required": false; }; }, { "search": "search"; "selectionChanged": "selectionChanged"; }, never, never, false, never>;
 }
 
 type ComponentsModuleConfig = {