@cute-widgets/base 20.0.2 → 20.0.4

package/CHANGELOG.md

@@ -1 +1,35 @@
-## Initial version 20.0.0
+## Changes in version 20.0.4 (2026-01-30)
+
+---
+### Fixes:
+* The internal markup of `CuteCardBody` and `CuteCardSubtitle` has been changed.
+* The type of `sort` parameter in `CuteTableDataSource#sortData` has been changed to `Sort` interface.
+
+### Improvements:
+* Add `wrapLabel` input property to the `CuteButton` component. With default value of _false_.
+* `CuteSort` implements the `Sort` interface now and uses native CSS animation.
+* `CuteCardImage` can now be positioned by statically specifying the corresponding attribute: `[cute-card-top-image]`, `[cute-card-bottom-image]`, or `[cute-card-float-image]`.  
+* `CutePaginator` and `CuteSelect` are more responsive now.
+* `CuteChips` have become more cute.
+* The `bsBreakpoints` object has been completely redesigned.
+
+
+## Changes in version 20.0.3 (2026-01-12)
+
+---
+* Multiple cosmetic changes.
+
+## Changes in version 20.0.2 (2025-12-30)
+
+---
+* `cute-select` now uses native CSS animation.
+
+## Changes in version 20.0.1 (2025-12-26)
+
+---
+* Small changes.
+
+## Version 20.0.0
+
+---
+* Initial version.

package/abstract/index.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { ElementRef, InjectionToken, OnInit, AfterViewInit, AfterContentInit, OnChanges, OnDestroy, ChangeDetectorRef, Renderer2, SimpleChanges, Signal, EventEmitter } from '@angular/core';
+import { ElementRef, InjectionToken, OnInit, AfterViewInit, AfterContentInit, OnChanges, OnDestroy, ChangeDetectorRef, Renderer2, DestroyRef, SimpleChanges, Signal, EventEmitter } from '@angular/core';
 import { BooleanInput } from '@angular/cdk/coercion';
 import { Observable, Subject } from 'rxjs';
 import { RichThemeColor, LayoutBreakpoint } from '@cute-widgets/base/core';
@@ -52,6 +52,7 @@ declare abstract class CuteBaseControl implements CuteWidget, OnInit, AfterViewI
     protected readonly _elementRef: ElementRef<HTMLElement>;
     protected readonly _changeDetectorRef: ChangeDetectorRef;
     protected readonly _renderer: Renderer2;
+    protected readonly _destroyRef: DestroyRef;
     /** Owner widget */
     readonly owner: CuteWidget | null;
     /**
@@ -190,6 +191,8 @@ declare abstract class CuteBaseControl implements CuteWidget, OnInit, AfterViewI
     disable(): void;
     /** Explicitly marks the view as changed so that it can be checked again. */
     markForCheck(): void;
+    /** Checks this view and its children. */
+    detectChanges(): void;
     /** Toggles the `disabled` state of the component */
     toggleDisabled(): void;
     ngOnInit(): void;
@@ -313,7 +316,7 @@ declare abstract class CuteLayoutControl extends CuteBaseControl {
     /** Clears floated content within a container */
     clearfix: boolean;
     /** Symbolic name of the screen minimum width which determines how the responsive layout behaves across device or viewport sizes. */
-    breakpoint: LayoutBreakpoint | undefined;
+    breakpoint: LayoutBreakpoint | LayoutBreakpoint[] | undefined;
     /** Event that is raised when the width of viewport is changed and crosses the size of `breakpoint`'s value. */
     breakpointState: EventEmitter<BreakpointState>;
     ngOnChanges(changes: SimpleChanges): void;

package/button/index.d.ts

@@ -45,16 +45,16 @@ declare abstract class CuteButtonBase extends CuteFocusableControl implements Do
     protected readonly _ngZone: NgZone;
     protected readonly _isAnchor: boolean;
     private _icons;
-    /** Button's appearance style in the following format: `{style}-button` */
+    /** Button's appearance style in the following format: `{style}-button`. */
     get inputButtonStyle(): CuteButtonStyle;
     set inputButtonStyle(value: CuteButtonStyle | undefined | "");
     private _inputButtonStyle;
     private _buttonStyle;
-    /** Relative size of the Button */
+    /** Relative size of the Button. */
     magnitude: RelativeSize7 | undefined;
-    /** Whether to disable text wrapping */
-    nowrap: boolean;
-    /** Whether to disable the ripple effect on button clicking */
+    /** Whether to enable label wrapping. */
+    wrapLabel: boolean;
+    /** Whether to disable the ripple effect on button clicking. */
     get disableRipple(): boolean;
     set disableRipple(value: boolean);
     /** `aria-disabled` value of the button. */
@@ -111,7 +111,8 @@ declare abstract class CuteButtonBase extends CuteFocusableControl implements Do
     private _onMouseEvent;
     private _launchRipple;
     static ɵfac: i0.ɵɵFactoryDeclaration<CuteButtonBase, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<CuteButtonBase, never, never, { "inputButtonStyle": { "alias": "cuteButton"; "required": false; }; "magnitude": { "alias": "magnitude"; "required": false; }; "nowrap": { "alias": "nowrap"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "ariaDisabled": { "alias": "aria-disabled"; "required": false; }; "withAriaExpandedIndicator": { "alias": "withAriaExpandedIndicator"; "required": false; }; "disabledInteractive": { "alias": "disabledInteractive"; "required": false; }; "visuallyHiddenLabel": { "alias": "visuallyHiddenLabel"; "required": false; }; }, {}, ["_icons"], never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CuteButtonBase, never, never, { "inputButtonStyle": { "alias": "cuteButton"; "required": false; }; "magnitude": { "alias": "magnitude"; "required": false; }; "wrapLabel": { "alias": "wrapLabel"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "ariaDisabled": { "alias": "aria-disabled"; "required": false; }; "withAriaExpandedIndicator": { "alias": "withAriaExpandedIndicator"; "required": false; }; "disabledInteractive": { "alias": "disabledInteractive"; "required": false; }; "visuallyHiddenLabel": { "alias": "visuallyHiddenLabel"; "required": false; }; }, {}, ["_icons"], never, true, never>;
+    static ngAcceptInputType_wrapLabel: unknown;
     static ngAcceptInputType_ariaDisabled: unknown;
     static ngAcceptInputType_withAriaExpandedIndicator: unknown;
     static ngAcceptInputType_disabledInteractive: unknown;

package/card/index.d.ts

@@ -36,13 +36,13 @@ declare class CuteCard extends CuteLayoutControl {
     set backgroundImage(value: string | undefined);
     private _backgroundImage;
     /** `CuteCardHeader` element if it was defined in the `CuteCard` template. */
-    readonly _header: CuteCardHeader | undefined;
+    readonly _header: i0.Signal<CuteCardHeader | undefined>;
     /** `CuteCardFooter` element if it was defined in the `CuteCard` template. */
-    readonly _footer: CuteCardFooter | undefined;
+    readonly _footer: i0.Signal<CuteCardFooter | undefined>;
     constructor();
     protected generateId(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<CuteCard, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CuteCard, "cute-card", ["cuteCard"], { "backgroundImage": { "alias": "backgroundImage"; "required": false; }; }, {}, ["_header", "_footer"], ["cute-card-header", "img[position=top], [role=img][position=top]", "*", "img[position=bottom], [role=img][position=bottom]", "cute-card-footer"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CuteCard, "cute-card", ["cuteCard"], { "backgroundImage": { "alias": "backgroundImage"; "required": false; }; }, {}, ["_header", "_footer"], ["cute-card-header", "[cute-card-top-image]", "*", "[cute-card-bottom-image]", "cute-card-footer"], true, never>;
 }
 
 /**
@@ -59,6 +59,7 @@ declare class CuteCardAvatar {
     static ɵdir: i0.ɵɵDirectiveDeclaration<CuteCardAvatar, "[cute-card-avatar], [cuteCardAvatar]", never, {}, {}, never, never, true, never>;
 }
 
+type CuteCardImagePosition = "top" | "bottom" | "fluid";
 /**
  * Primary image content for a card, intended for use within `<cute-card>`. Can be applied to
  * any media element, such as `<img>` or `<picture>`.
@@ -71,13 +72,14 @@ declare class CuteCardAvatar {
 declare class CuteCardImage {
     protected card: CuteCard;
     /** Image position in the card layout */
-    position: "top" | "bottom" | "fluid";
-    /** Image height in pixels */
+    protected readonly _position: CuteCardImagePosition;
+    /** The intrinsic height of the image, in pixels. */
     get height(): number | undefined;
     set height(value: number | string | undefined);
     private _height;
+    constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<CuteCardImage, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<CuteCardImage, "[cute-card-image], [cuteCardImage]", never, { "position": { "alias": "position"; "required": false; }; "height": { "alias": "height"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CuteCardImage, "[cute-card-image], [cute-card-top-image], [cute-card-bottom-image], [cute-card-fluid-image]", never, { "height": { "alias": "height"; "required": false; }; }, {}, never, never, true, never>;
 }
 
 /**
@@ -161,3 +163,4 @@ declare class CuteCardModule {
 }
 
 export { CuteCard, CuteCardActions, CuteCardAvatar, CuteCardBody, CuteCardFooter, CuteCardGroup, CuteCardHeader, CuteCardImage, CuteCardModule, CuteCardOverlay, CuteCardSubtitle, CuteCardTitle };
+export type { CuteCardImagePosition };

package/core/directives/index.d.ts

@@ -1,6 +1,5 @@
 import * as i0 from '@angular/core';
 import { EventEmitter, OnChanges, SimpleChanges, OnInit } from '@angular/core';
-import { LayoutBreakpoint } from '@cute-widgets/base/core/types';
 
 /**
  * Allows users to disable the context menu that appears when they right-click
@@ -23,7 +22,7 @@ declare class CuteDisableContextMenu {
 /**
  * Tracks a click outside the target element.
  * @example
- * <div cuteClickOutside (clickOutside)="closeDropdown()">
+ * <div (cuteClickOutside)="closeDropdown()">
  *   <button (click)="toggleDropdown()">Toggle Dropdown</button>
  *   <div *ngIf="dropdownOpen" class="dropdown">
  *     Dropdown content
@@ -90,35 +89,6 @@ declare class CuteTimeAgo implements OnChanges {
     static ɵdir: i0.ɵɵDirectiveDeclaration<CuteTimeAgo, "[cuteTimeAgo]", never, { "cuteTimeAgo": { "alias": "cuteTimeAgo"; "required": false; }; }, {}, never, never, true, never>;
 }
 
-/**
- * @license Apache-2.0
- *
- * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
- *
- * You may not use this file except in compliance with the License
- * that can be found at http://www.apache.org/licenses/LICENSE-2.0
- */
-
-/**
- * ```HTML
- * <div cuteResponsive="md, lg">
- *   This content is visible on medium and large screens.
- * </div>
- * ```
- */
-declare class CuteResponsive implements OnInit {
-    private templateRef;
-    private viewContainer;
-    /** Comma-separated screen size breakpoints (e.g., 'md, lg') or an array of it. */
-    breakPoints?: string | LayoutBreakpoint[];
-    constructor();
-    ngOnInit(): void;
-    private detectScreenSize;
-    private getScreenWidth;
-    static ɵfac: i0.ɵɵFactoryDeclaration<CuteResponsive, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<CuteResponsive, "[cuteResponsive]", never, { "breakPoints": { "alias": "cuteResponsive"; "required": false; }; }, {}, never, never, true, never>;
-}
-
 /**
  * @license Apache-2.0
  *
@@ -165,4 +135,4 @@ declare class CuteFocusInitial {
     static ɵdir: i0.ɵɵDirectiveDeclaration<CuteFocusInitial, "[cuteFocusInitial]", never, {}, {}, never, never, true, never>;
 }
 
-export { CuteClickOutside, CuteCopyToClipboard, CuteDisableContextMenu, CuteFocusInitial, CuteIconLink, CuteResponsive, CuteSvgSymbol, CuteTimeAgo };
+export { CuteClickOutside, CuteCopyToClipboard, CuteDisableContextMenu, CuteFocusInitial, CuteIconLink, CuteSvgSymbol, CuteTimeAgo };

package/core/index.d.ts

@@ -54,21 +54,28 @@ declare function _animationsDisabled(): boolean;
  * that can be found at http://www.apache.org/licenses/LICENSE-2.0
  */
 /**
- * Bootstrap media-queries, or `breakpoints`.
- * PascalCase is being used as Breakpoints is used like an enum.
+ * Bootstrap media queries, or `breakpoints`.
  */
 declare const bsBreakpoints: {
-    SmallAndDown: string;
-    MediumAndDown: string;
-    LargeAndDown: string;
-    XLargeAndDown: string;
-    XXLargeAndDown: string;
-    XSmall: string;
-    Small: string;
-    Medium: string;
-    Large: string;
-    XLarge: string;
-    XXLarge: string;
+    query: {
+        SmallAndDown: string;
+        MediumAndDown: string;
+        LargeAndDown: string;
+        XLargeAndDown: string;
+        XXLargeAndDown: string;
+        XSmall: string;
+        Small: string;
+        Medium: string;
+        Large: string;
+        XLarge: string;
+        XXLarge: string;
+        readonly xs: string;
+        readonly sm: string;
+        readonly md: string;
+        readonly lg: string;
+        readonly xl: string;
+        readonly xxl: string;
+    };
     readonly grid: {
         xs: number;
         sm: number;
@@ -77,24 +84,24 @@ declare const bsBreakpoints: {
         xl: number;
         xxl: number;
     };
-    readonly xs: string;
-    readonly sm: string;
-    readonly md: string;
-    readonly lg: string;
-    readonly xl: string;
-    readonly xxl: string;
-    /**
-     * Gets the object's property name of the media-query by its value
-     * @param query The media-query text
-     * @returns The property name of the media-query or _undefined_ if it was not found
-     */
-    getQueryName(query: string): string | undefined;
     /**
      * Gets the breakpoint label by Bootstrap's breakpoint abbreviation
-     * @param code Bootstrap's breakpoint abbreviation
-     * @returns More descriptive text of the abbreviation
+     * @param code Bootstrap's breakpoint abbreviation.
+     * @returns More descriptive text of the abbreviation.
      */
     getLabel(code: string): string;
+    /**
+     * Returns the media query string for the specified breakpoint symbol.
+     * @param code Bootstrap's breakpoint abbreviation.
+     * @returns Media query string or _undefined_ if the code has an unknown value.
+     */
+    getQuery(code: string): string | undefined;
+    /**
+     * Gets the name of the media-query by its value.
+     * @param query The media-query text.
+     * @returns The name of the media-query or _undefined_ if it was not found.
+     */
+    getQueryName(query: string): string | undefined;
 };
 
 /**
@@ -229,7 +236,7 @@ interface TreeNode<D = unknown> {
     data?: D;
     /** Router link. */
     routerLink?: string | string[];
-    /** Identifies the picture displayed to the left of the item label. */
+    /** Identifies the image displayed next to the item label. */
     icon?: string;
     /** Icon color. */
     iconColor?: string;

package/core/interfaces/index.d.ts

@@ -39,7 +39,7 @@ interface TreeNode<D = unknown> {
     data?: D;
     /** Router link. */
     routerLink?: string | string[];
-    /** Identifies the picture displayed to the left of the item label. */
+    /** Identifies the image displayed next to the item label. */
     icon?: string;
     /** Icon color. */
     iconColor?: string;

package/core/layout/index.d.ts

@@ -7,21 +7,28 @@
  * that can be found at http://www.apache.org/licenses/LICENSE-2.0
  */
 /**
- * Bootstrap media-queries, or `breakpoints`.
- * PascalCase is being used as Breakpoints is used like an enum.
+ * Bootstrap media queries, or `breakpoints`.
  */
 declare const bsBreakpoints: {
-    SmallAndDown: string;
-    MediumAndDown: string;
-    LargeAndDown: string;
-    XLargeAndDown: string;
-    XXLargeAndDown: string;
-    XSmall: string;
-    Small: string;
-    Medium: string;
-    Large: string;
-    XLarge: string;
-    XXLarge: string;
+    query: {
+        SmallAndDown: string;
+        MediumAndDown: string;
+        LargeAndDown: string;
+        XLargeAndDown: string;
+        XXLargeAndDown: string;
+        XSmall: string;
+        Small: string;
+        Medium: string;
+        Large: string;
+        XLarge: string;
+        XXLarge: string;
+        readonly xs: string;
+        readonly sm: string;
+        readonly md: string;
+        readonly lg: string;
+        readonly xl: string;
+        readonly xxl: string;
+    };
     readonly grid: {
         xs: number;
         sm: number;
@@ -30,24 +37,24 @@ declare const bsBreakpoints: {
         xl: number;
         xxl: number;
     };
-    readonly xs: string;
-    readonly sm: string;
-    readonly md: string;
-    readonly lg: string;
-    readonly xl: string;
-    readonly xxl: string;
-    /**
-     * Gets the object's property name of the media-query by its value
-     * @param query The media-query text
-     * @returns The property name of the media-query or _undefined_ if it was not found
-     */
-    getQueryName(query: string): string | undefined;
     /**
      * Gets the breakpoint label by Bootstrap's breakpoint abbreviation
-     * @param code Bootstrap's breakpoint abbreviation
-     * @returns More descriptive text of the abbreviation
+     * @param code Bootstrap's breakpoint abbreviation.
+     * @returns More descriptive text of the abbreviation.
      */
     getLabel(code: string): string;
+    /**
+     * Returns the media query string for the specified breakpoint symbol.
+     * @param code Bootstrap's breakpoint abbreviation.
+     * @returns Media query string or _undefined_ if the code has an unknown value.
+     */
+    getQuery(code: string): string | undefined;
+    /**
+     * Gets the name of the media-query by its value.
+     * @param query The media-query text.
+     * @returns The name of the media-query or _undefined_ if it was not found.
+     */
+    getQueryName(query: string): string | undefined;
 };
 
 export { bsBreakpoints };

package/core/nav/index.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { NgZone, ViewContainerRef, InjectionToken, DestroyRef, QueryList, EventEmitter, TemplateRef, OnDestroy } from '@angular/core';
+import { NgZone, ViewContainerRef, InjectionToken, QueryList, EventEmitter, TemplateRef, OnDestroy } from '@angular/core';
 import { ListKeyManager, FocusOrigin } from '@angular/cdk/a11y';
 import { Directionality } from '@angular/cdk/bidi';
 import { CuteFocusableControl, CuteLayoutControl } from '@cute-widgets/base/abstract';
@@ -170,7 +170,6 @@ declare class CuteNavChangingEvent extends Event {
  * ```
  */
 declare class CuteNav extends CuteLayoutControl {
-    protected _destroyRef: DestroyRef;
     protected _dir: Directionality;
     protected _keyManager: ListKeyManager<CuteNavLink> | undefined;
     private _oldFocusLink;

package/expansion/index.d.ts

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { TemplateRef, AfterContentInit, OnChanges, OnDestroy, EventEmitter, SimpleChanges, ElementRef, InjectionToken, AfterViewInit, QueryList } from '@angular/core';
+import { TemplateRef, AfterContentInit, OnChanges, OnDestroy, EventEmitter, SimpleChanges, ElementRef, InjectionToken, QueryList } from '@angular/core';
 import { CdkAccordion, CdkAccordionItem } from '@angular/cdk/accordion';
 import { FocusableOption, FocusOrigin } from '@angular/cdk/a11y';
 import { BooleanInput } from '@angular/cdk/coercion';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { Subject } from 'rxjs';
-import { Expandable } from '@cute-widgets/base/abstract';
+import { Expandable, CuteLayoutControl } from '@cute-widgets/base/abstract';
 import * as i1 from '@angular/common';
 
 /**
@@ -177,23 +177,9 @@ declare class CuteExpansionPanel extends CdkAccordionItem implements CuteExpansi
     static ɵcmp: i0.ɵɵComponentDeclaration<CuteExpansionPanel, "cute-expansion-panel", ["cuteExpansionPanel"], { "hideToggle": { "alias": "hideToggle"; "required": false; }; "togglePosition": { "alias": "togglePosition"; "required": false; }; }, { "afterExpand": "afterExpand"; "afterCollapse": "afterCollapse"; }, ["_lazyContent"], ["cute-expansion-panel-header", "*", "cute-action-row"], true, never>;
 }
 
-/**
- * @license Apache-2.0
- *
- * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
- *
- * You may not use this file except in compliance with the License
- * that can be found at http://www.apache.org/licenses/LICENSE-2.0
- *
- * This code is a modification of the `@angular/material` original
- * code licensed under MIT-style License (https://angular.dev/license).
- */
-
-declare class CuteExpansionPanelHeader implements AfterViewInit, OnDestroy, FocusableOption {
+declare class CuteExpansionPanelHeader extends CuteLayoutControl implements FocusableOption {
     readonly panel: CuteExpansionPanel;
-    private _element;
     private _focusMonitor;
-    private _changeDetectorRef;
     private _parentChangeSubscription;
     constructor(...args: unknown[]);
     /** Height of the header while the panel is expanded. */
@@ -202,8 +188,9 @@ declare class CuteExpansionPanelHeader implements AfterViewInit, OnDestroy, Focu
     collapsedHeight: string | undefined;
     /** Tab index of the header. */
     tabIndex: number;
+    protected generateId(): string;
     /** Whether the associated panel is disabled. Implemented as a part of `FocusableOption`. */
-    get disabled(): boolean;
+    protected getDisabledState(): boolean;
     /** Toggles the expanded state of the panel. */
     protected _toggle(): void;
     /** Gets whether the panel is expanded. */

package/fesm2022/cute-widgets-base-abstract.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, isDevMode, inject, ElementRef, ChangeDetectorRef, Renderer2, booleanAttribute, Input, Directive, numberAttribute, EventEmitter, Output, HostBinding } from '@angular/core';
+import { InjectionToken, isDevMode, inject, ElementRef, ChangeDetectorRef, Renderer2, DestroyRef, booleanAttribute, Input, Directive, numberAttribute, EventEmitter, Output, HostBinding } from '@angular/core';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { Observable, Subject } from 'rxjs';
 import { FocusMonitor } from '@angular/cdk/a11y';
@@ -59,7 +59,7 @@ class CuteBaseControl {
     ;
     set id(value) { this._id = value; }
     /** Theme color palette for the component. */
-    get color() { return this._color ?? this.defaultColor; }
+    get color() { return this._color ?? this.defaultColor ?? this.owner?.color; }
     set color(value) { this.setColor(value); }
     /**
      * Makes the host element not mutable, focusable, or even submitted with the form
@@ -86,6 +86,7 @@ class CuteBaseControl {
         this._elementRef = inject(ElementRef);
         this._changeDetectorRef = inject(ChangeDetectorRef);
         this._renderer = inject(Renderer2);
+        this._destroyRef = inject(DestroyRef);
         /** Owner widget */
         this.owner = inject(CUTE_WIDGET, { skipSelf: true, optional: true });
         /**
@@ -246,6 +247,10 @@ class CuteBaseControl {
     markForCheck() {
         this._changeDetectorRef.markForCheck();
     }
+    /** Checks this view and its children. */
+    detectChanges() {
+        this._changeDetectorRef.detectChanges();
+    }
     /** Toggles the `disabled` state of the component */
     toggleDisabled() {
         this.disabled = !this.disabled;
@@ -499,10 +504,20 @@ class CuteLayoutControl extends CuteBaseControl {
         const change = changes["breakpoint"];
         if (change) {
             this._subscription?.unsubscribe();
-            if (change.currentValue) { // && (change.currentValue !== change.previousValue)) {
-                const bpName = bsBreakpoints.getLabel(change.currentValue);
+            if (change.currentValue) {
+                let bpArray;
+                if (Array.isArray(change.currentValue)) {
+                    bpArray = change.currentValue;
+                }
+                else {
+                    bpArray = [change.currentValue];
+                }
+                const queries = bpArray.map(value => {
+                    const label = bsBreakpoints.getLabel(value);
+                    return bsBreakpoints.getQuery(label + "AndDown") ?? "";
+                });
                 this._subscription = this.breakpointObserver
-                    .observe(bsBreakpoints[bpName + "AndDown"])
+                    .observe(queries)
                     .subscribe(state => this.breakpointState.emit(state));
             }
         }