@clr/angular 17.12.2 → 18.0.0-beta.1

package/package.json

@@ -18,34 +18,213 @@
     "url": "https://github.com/vmware-clarity/ng-clarity/issues"
   },
   "peerDependencies": {
-    "@angular/cdk": "15 || 16 || 17 || 18 || 19",
-    "@angular/common": "15 || 16 || 17 || 18 || 19",
-    "@angular/core": "15 || 16 || 17 || 18 || 19",
-    "@cds/core": ">= 6.9.2",
-    "@clr/ui": "17.12.2"
+    "@angular/cdk": "^21",
+    "@angular/common": "^21",
+    "@angular/core": "^21",
+    "@clr/ui": "18.0.0-beta.1"
   },
-  "module": "fesm2015/clr-angular.mjs",
-  "es2020": "fesm2020/clr-angular.mjs",
-  "esm2020": "esm2020/clr-angular.mjs",
-  "fesm2020": "fesm2020/clr-angular.mjs",
-  "fesm2015": "fesm2015/clr-angular.mjs",
-  "typings": "index.d.ts",
+  "module": "fesm2022/clr-angular.mjs",
+  "typings": "types/clr-angular.d.ts",
   "exports": {
     "./package.json": {
       "default": "./package.json"
     },
     ".": {
-      "types": "./index.d.ts",
-      "esm2020": "./esm2020/clr-angular.mjs",
-      "es2020": "./fesm2020/clr-angular.mjs",
-      "es2015": "./fesm2015/clr-angular.mjs",
-      "node": "./fesm2015/clr-angular.mjs",
-      "default": "./fesm2020/clr-angular.mjs"
+      "types": "./types/clr-angular.d.ts",
+      "default": "./fesm2022/clr-angular.mjs"
+    },
+    "./accordion": {
+      "types": "./types/clr-angular-accordion.d.ts",
+      "default": "./fesm2022/clr-angular-accordion.mjs"
+    },
+    "./button": {
+      "types": "./types/clr-angular-button.d.ts",
+      "default": "./fesm2022/clr-angular-button.mjs"
+    },
+    "./collapsible-panel": {
+      "types": "./types/clr-angular-collapsible-panel.d.ts",
+      "default": "./fesm2022/clr-angular-collapsible-panel.mjs"
+    },
+    "./data": {
+      "types": "./types/clr-angular-data.d.ts",
+      "default": "./fesm2022/clr-angular-data.mjs"
+    },
+    "./data/datagrid": {
+      "types": "./types/clr-angular-data-datagrid.d.ts",
+      "default": "./fesm2022/clr-angular-data-datagrid.mjs"
+    },
+    "./data/stack-view": {
+      "types": "./types/clr-angular-data-stack-view.d.ts",
+      "default": "./fesm2022/clr-angular-data-stack-view.mjs"
+    },
+    "./data/tree-view": {
+      "types": "./types/clr-angular-data-tree-view.d.ts",
+      "default": "./fesm2022/clr-angular-data-tree-view.mjs"
+    },
+    "./emphasis": {
+      "types": "./types/clr-angular-emphasis.d.ts",
+      "default": "./fesm2022/clr-angular-emphasis.mjs"
+    },
+    "./emphasis/alert": {
+      "types": "./types/clr-angular-emphasis-alert.d.ts",
+      "default": "./fesm2022/clr-angular-emphasis-alert.mjs"
+    },
+    "./emphasis/badge": {
+      "types": "./types/clr-angular-emphasis-badge.d.ts",
+      "default": "./fesm2022/clr-angular-emphasis-badge.mjs"
+    },
+    "./emphasis/common": {
+      "types": "./types/clr-angular-emphasis-common.d.ts",
+      "default": "./fesm2022/clr-angular-emphasis-common.mjs"
+    },
+    "./emphasis/label": {
+      "types": "./types/clr-angular-emphasis-label.d.ts",
+      "default": "./fesm2022/clr-angular-emphasis-label.mjs"
+    },
+    "./forms": {
+      "types": "./types/clr-angular-forms.d.ts",
+      "default": "./fesm2022/clr-angular-forms.mjs"
+    },
+    "./forms/checkbox": {
+      "types": "./types/clr-angular-forms-checkbox.d.ts",
+      "default": "./fesm2022/clr-angular-forms-checkbox.mjs"
+    },
+    "./forms/combobox": {
+      "types": "./types/clr-angular-forms-combobox.d.ts",
+      "default": "./fesm2022/clr-angular-forms-combobox.mjs"
+    },
+    "./forms/common": {
+      "types": "./types/clr-angular-forms-common.d.ts",
+      "default": "./fesm2022/clr-angular-forms-common.mjs"
+    },
+    "./forms/datalist": {
+      "types": "./types/clr-angular-forms-datalist.d.ts",
+      "default": "./fesm2022/clr-angular-forms-datalist.mjs"
+    },
+    "./forms/datepicker": {
+      "types": "./types/clr-angular-forms-datepicker.d.ts",
+      "default": "./fesm2022/clr-angular-forms-datepicker.mjs"
+    },
+    "./forms/file-input": {
+      "types": "./types/clr-angular-forms-file-input.d.ts",
+      "default": "./fesm2022/clr-angular-forms-file-input.mjs"
+    },
+    "./forms/input": {
+      "types": "./types/clr-angular-forms-input.d.ts",
+      "default": "./fesm2022/clr-angular-forms-input.mjs"
+    },
+    "./forms/number-input": {
+      "types": "./types/clr-angular-forms-number-input.d.ts",
+      "default": "./fesm2022/clr-angular-forms-number-input.mjs"
+    },
+    "./forms/password": {
+      "types": "./types/clr-angular-forms-password.d.ts",
+      "default": "./fesm2022/clr-angular-forms-password.mjs"
+    },
+    "./forms/radio": {
+      "types": "./types/clr-angular-forms-radio.d.ts",
+      "default": "./fesm2022/clr-angular-forms-radio.mjs"
+    },
+    "./forms/range": {
+      "types": "./types/clr-angular-forms-range.d.ts",
+      "default": "./fesm2022/clr-angular-forms-range.mjs"
+    },
+    "./forms/select": {
+      "types": "./types/clr-angular-forms-select.d.ts",
+      "default": "./fesm2022/clr-angular-forms-select.mjs"
+    },
+    "./forms/textarea": {
+      "types": "./types/clr-angular-forms-textarea.d.ts",
+      "default": "./fesm2022/clr-angular-forms-textarea.mjs"
+    },
+    "./icon": {
+      "types": "./types/clr-angular-icon.d.ts",
+      "default": "./fesm2022/clr-angular-icon.mjs"
+    },
+    "./layout": {
+      "types": "./types/clr-angular-layout.d.ts",
+      "default": "./fesm2022/clr-angular-layout.mjs"
+    },
+    "./layout/breadcrumbs": {
+      "types": "./types/clr-angular-layout-breadcrumbs.d.ts",
+      "default": "./fesm2022/clr-angular-layout-breadcrumbs.mjs"
+    },
+    "./layout/main-container": {
+      "types": "./types/clr-angular-layout-main-container.d.ts",
+      "default": "./fesm2022/clr-angular-layout-main-container.mjs"
+    },
+    "./layout/nav": {
+      "types": "./types/clr-angular-layout-nav.d.ts",
+      "default": "./fesm2022/clr-angular-layout-nav.mjs"
+    },
+    "./layout/tabs": {
+      "types": "./types/clr-angular-layout-tabs.d.ts",
+      "default": "./fesm2022/clr-angular-layout-tabs.mjs"
+    },
+    "./layout/vertical-nav": {
+      "types": "./types/clr-angular-layout-vertical-nav.d.ts",
+      "default": "./fesm2022/clr-angular-layout-vertical-nav.mjs"
+    },
+    "./modal": {
+      "types": "./types/clr-angular-modal.d.ts",
+      "default": "./fesm2022/clr-angular-modal.mjs"
+    },
+    "./popover": {
+      "types": "./types/clr-angular-popover.d.ts",
+      "default": "./fesm2022/clr-angular-popover.mjs"
+    },
+    "./popover/common": {
+      "types": "./types/clr-angular-popover-common.d.ts",
+      "default": "./fesm2022/clr-angular-popover-common.mjs"
+    },
+    "./popover/dropdown": {
+      "types": "./types/clr-angular-popover-dropdown.d.ts",
+      "default": "./fesm2022/clr-angular-popover-dropdown.mjs"
+    },
+    "./popover/signpost": {
+      "types": "./types/clr-angular-popover-signpost.d.ts",
+      "default": "./fesm2022/clr-angular-popover-signpost.mjs"
+    },
+    "./popover/tooltip": {
+      "types": "./types/clr-angular-popover-tooltip.d.ts",
+      "default": "./fesm2022/clr-angular-popover-tooltip.mjs"
+    },
+    "./progress/progress-bars": {
+      "types": "./types/clr-angular-progress-progress-bars.d.ts",
+      "default": "./fesm2022/clr-angular-progress-progress-bars.mjs"
+    },
+    "./progress/spinner": {
+      "types": "./types/clr-angular-progress-spinner.d.ts",
+      "default": "./fesm2022/clr-angular-progress-spinner.mjs"
+    },
+    "./stepper": {
+      "types": "./types/clr-angular-stepper.d.ts",
+      "default": "./fesm2022/clr-angular-stepper.mjs"
+    },
+    "./timeline": {
+      "types": "./types/clr-angular-timeline.d.ts",
+      "default": "./fesm2022/clr-angular-timeline.mjs"
+    },
+    "./utils": {
+      "types": "./types/clr-angular-utils.d.ts",
+      "default": "./fesm2022/clr-angular-utils.mjs"
+    },
+    "./utils/conditional": {
+      "types": "./types/clr-angular-utils-conditional.d.ts",
+      "default": "./fesm2022/clr-angular-utils-conditional.mjs"
+    },
+    "./utils/loading": {
+      "types": "./types/clr-angular-utils-loading.d.ts",
+      "default": "./fesm2022/clr-angular-utils-loading.mjs"
+    },
+    "./wizard": {
+      "types": "./types/clr-angular-wizard.d.ts",
+      "default": "./fesm2022/clr-angular-wizard.mjs"
     }
   },
   "sideEffects": false,
   "dependencies": {
     "tslib": "^2.3.0"
   },
-  "version": "17.12.2"
+  "version": "18.0.0-beta.1"
 }

package/popover/common/README.md

@@ -0,0 +1,110 @@
+# ClrPopover Utilities
+
+The `ClrPopover` implementation is a utility infrastructure based on the Angular Overlay and Portals implementation provided in the Angular CDK. It is not a standalone component, but a set of directives and services used to build Clarity overlay components like **Dropdowns**, **Signposts**, and **Tooltips**.
+
+## Goal
+
+The goal is to provide a straightforward utility within the Clarity library that allows for popover-like elements to use a consistent API. It offloads all positioning, z-indexing, and layering logic to the Angular CDK, which is better equipped to handle complex rendering situations.
+
+## Architecture
+
+At its most basic, the popover utility is implemented with a set of directives and a service to track, manage, and subscribe to state change events.
+
+### Service: `ClrPopoverService`
+
+The **`ClrPopoverService`** acts as the central state manager for a specific popover instance. It is **transient** and must be provided at the component level (e.g., inside `ClrDropdown`, `ClrSignpost`, or `ClrTooltip`) to ensure that each popover maintains its own isolated state.
+
+The service is responsible for:
+
+- **State Management**:
+  - **`open`**: A boolean property to get or set the current visibility state of the popover. Setting this triggers the `openChange` observable.
+  - **`position`**: Tracks the current `ClrPopoverPosition` (e.g., `bottom-left`), triggering the `getPositionChange()` stream when updated.
+  - **`popoverType`**: Defines the type of popover (Tooltip, Signpost, etc.) to determine offset calculations.
+
+- **Event Handling**:
+  - **`toggleWithEvent(event: any)`**: A helper method used by triggers. It toggles the `open` state, stores the triggering event (to prevent conflicts like "click outside" closing immediately), and prevents default scrolling behavior for arrow keys.
+  - **`openEvent`**: Stores the specific browser event that triggered the opening of the popover.
+
+- **Focus & Anchor Management**:
+  - **`anchorElementRef`**: Holds the `ElementRef` of the anchor/trigger element. This is used by the CDK to calculate where the overlay should appear.
+  - **`closeButtonRef`**: Holds the `ElementRef` of the internal close button (if applicable).
+  - **`focusAnchor()`**: A utility method to return focus to the anchor element (e.g., when the menu closes), ensuring accessibility compliance.
+  - **`focusCloseButton()`**: Moves focus to the close button inside the content when appropriate.
+
+- **Reactive Streams**:
+  - **`openChange`**: Observable that emits whenever the open state changes.
+  - **`popoverVisible`**: Observable used to coordinate when the DOM is actually ready/visible.
+  - **`getEventChange()`**: Observable stream of the events that triggered state changes.
+
+### Directives
+
+1.  **`[clrPopoverAnchor]`**:
+
+- Used on the element that serves as the reference point for positioning (the anchor).
+- Passes an `ElementRef` to the service, which is used for focus management and positioning calculations.
+
+2.  **`*clrPopoverContent`**:
+
+- A structural directive that renders the view and hoists it to an Overlay on the `body` element using a `DomPortal`.
+- Accepts configuration arguments for the overlay (open state, position, outside click behavior, scroll behavior).
+- Manages "Click Outside" and "Scroll to Close" logic.
+
+3.  **`[clrPopoverCloseButton]`**:
+
+- Should only be used inside popover content containers.
+- Calls the toggle method on the service and restores focus to the anchor element.
+
+4.  **`[clrPopoverOpenCloseButton]`**:
+
+- Handles toggling the popover content open and closed via the popover service.
+- Typically used on triggers (e.g., the button that opens a menu).
+
+### ClrPopoverContent Inputs
+
+The `*clrPopoverContent` directive is the "workhorse" of the utility. It accepts several inputs to configure behavior:
+
+- **`clrPopoverContent`** (boolean):
+  - Controls the open/closed state of the popover. When true, the overlay is created and attached; when false, it is detached.
+- **`clrPopoverContentAt`** (`ClrPopoverPosition | ConnectedPosition`):
+  - Defines the preferred position of the content relative to the anchor (e.g., `top-right`, `bottom-left`). It sets the `preferredPosition` for the CDK overlay.
+- **`clrPopoverContentAvailablePositions`** (`ConnectedPosition[]`):
+  - A prioritized list of fallback positions the overlay can attempt to use if the preferred position does not fit within the viewport.
+- **`clrPopoverContentType`** (`ClrPopoverType`):
+  - Specifies the type of popover (e.g., `DROPDOWN`, `TOOLTIP`, `SIGNPOST`). This determines specific offsets and behavior variations associated with that type.
+- **`clrPopoverContentOutsideClickToClose`** (boolean):
+  - Determines if clicking outside the popover content should automatically close it. Defaults to `true`.
+- **`clrPopoverContentScrollToClose`** (boolean):
+  - Determines if scrolling the page should automatically close the popover. Defaults to `false`.
+
+## Enums
+
+1.  **`ClrPopoverType`**: Describes the popover variation: `SIGNPOST`, `TOOLTIP`, `DROPDOWN`, and `DEFAULT`.
+2.  **`ClrPopoverPosition`**: Describes the popover position relative to the anchor (e.g., `top-left`, `bottom-right`).
+3.  **`ClrPosition`**: Describes the specific point of contact on both the anchor and content elements.
+
+---
+
+## Usage Example
+
+To use the popover utility, a host component must provide the `ClrPopoverService`. Components generally provide a `ClrPopoverPosition` via the `at` input to describe the preferred content position.
+
+```html
+<button class="btn" clrPopoverOpenCloseButton clrPopoverAnchor [attr.aria-owns]="popoverId">
+  <cds-icon shape="home"></cds-icon> Popover Anchor
+</button>
+<div
+  [id]="popoverId"
+  role="dialog"
+  cdkTrapFocus
+  *clrPopoverContent="open;
+    at: position; availablePositions: [...]; outsideClickToClose: true; scrollToClose: true"
+>
+  <div role="heading">
+    Overlay Header
+    <button class="btn btn-sm btn-outline-neutral btn-icon" clrPopoverCloseButton>
+      <cds-icon shape="times"></cds-icon>
+    </button>
+  </div>
+  <div>Overlay Content</div>
+</div>
+```

package/types/clr-angular-accordion.d.ts

@@ -0,0 +1,100 @@
+import * as i0 from '@angular/core';
+import { OnChanges, EventEmitter, QueryList, SimpleChanges, OnInit, AfterViewInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
+import { CollapsiblePanel, CollapsiblePanelModel, CollapsiblePanelGroupModel, CollapsiblePanelService } from '@clr/angular/collapsible-panel';
+import { HeadingLevel, WillyWonka, OompaLoompa, IfExpandService } from '@clr/angular/utils';
+import * as i8 from '@angular/common';
+import * as i9 from '@clr/angular/icon';
+
+declare class ClrAccordionDescription {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ClrAccordionDescription, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ClrAccordionDescription, "clr-accordion-description", never, {}, {}, never, ["*"], false, never>;
+}
+
+declare class ClrAccordionPanel extends CollapsiblePanel implements OnChanges {
+    disabled: boolean;
+    panelOpen: boolean;
+    panelOpenChange: EventEmitter<boolean>;
+    /**
+     * Level of the accordion heading from 1 to 6.
+     */
+    explicitHeadingLevel: HeadingLevel;
+    accordionDescription: QueryList<ClrAccordionDescription>;
+    ngOnChanges(changes: SimpleChanges): void;
+    getPanelStateClasses(panel: CollapsiblePanelModel): "clr-accordion-panel-open" | "clr-accordion-panel-closed";
+    getContentId(id: string): string;
+    getHeaderId(id: string): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ClrAccordionPanel, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ClrAccordionPanel, "clr-accordion-panel", never, { "disabled": { "alias": "clrAccordionPanelDisabled"; "required": false; }; "panelOpen": { "alias": "clrAccordionPanelOpen"; "required": false; }; "explicitHeadingLevel": { "alias": "clrAccordionPanelHeadingLevel"; "required": false; }; }, { "panelOpenChange": "clrAccordionPanelOpenChange"; }, ["accordionDescription"], ["clr-accordion-title", "clr-accordion-description", "*"], false, never>;
+}
+
+/**
+ * Controls how many panels can be open simultaneously within an accordion.
+ */
+declare enum AccordionStrategy {
+    /** Only one panel can be open at a time. Opening a panel closes any previously open panel. */
+    Single = "single",
+    /** Multiple panels can be open simultaneously. */
+    Multi = "multi"
+}
+
+declare class AccordionModel extends CollapsiblePanelGroupModel {
+    private strategy;
+    setStrategy(strategy: AccordionStrategy): void;
+    togglePanel(panelId: string, open?: boolean): void;
+    private closeAllPanels;
+}
+
+declare class AccordionService extends CollapsiblePanelService {
+    protected panelGroup: AccordionModel;
+    setStrategy(strategy: AccordionStrategy): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AccordionService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<AccordionService>;
+}
+
+declare class ClrAccordion implements OnInit, OnChanges, AfterViewInit, OnDestroy {
+    private accordionService;
+    multiPanel: boolean | string;
+    panels: QueryList<ClrAccordionPanel>;
+    private subscriptions;
+    constructor(accordionService: AccordionService);
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    private setAccordionStrategy;
+    private listenForDOMChanges;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ClrAccordion, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ClrAccordion, "clr-accordion", never, { "multiPanel": { "alias": "clrAccordionMultiPanel"; "required": false; }; }, {}, ["panels"], ["*"], false, never>;
+}
+
+declare class ClrAccordionTitle {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ClrAccordionTitle, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ClrAccordionTitle, "clr-accordion-title", never, {}, {}, never, ["*"], false, never>;
+}
+
+declare class ClrAccordionContent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ClrAccordionContent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ClrAccordionContent, "clr-accordion-content", never, {}, {}, never, ["*"], false, never>;
+}
+
+declare class AccordionWillyWonka extends WillyWonka {
+    static ɵfac: i0.ɵɵFactoryDeclaration<AccordionWillyWonka, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AccordionWillyWonka, "clr-accordion", never, {}, {}, never, never, false, never>;
+}
+
+declare class AccordionOompaLoompa extends OompaLoompa {
+    private expand;
+    constructor(cdr: ChangeDetectorRef, willyWonka: AccordionWillyWonka, ifExpandService: IfExpandService);
+    get flavor(): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AccordionOompaLoompa, [null, { optional: true; }, null]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AccordionOompaLoompa, "clr-accordion-panel", never, {}, {}, never, never, false, never>;
+}
+
+declare class ClrAccordionModule {
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<ClrAccordionModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ClrAccordionModule, [typeof ClrAccordion, typeof ClrAccordionPanel, typeof ClrAccordionTitle, typeof ClrAccordionDescription, typeof ClrAccordionContent, typeof AccordionOompaLoompa, typeof AccordionWillyWonka], [typeof i8.CommonModule, typeof i9.ClrIcon], [typeof ClrAccordion, typeof ClrAccordionPanel, typeof ClrAccordionTitle, typeof ClrAccordionDescription, typeof ClrAccordionContent, typeof AccordionOompaLoompa, typeof AccordionWillyWonka]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<ClrAccordionModule>;
+}
+
+export { AccordionModel, AccordionService, AccordionStrategy, ClrAccordion, ClrAccordionContent, ClrAccordionDescription, ClrAccordionModule, ClrAccordionPanel, ClrAccordionTitle, AccordionOompaLoompa as ÇlrAccordionOompaLoompa, AccordionWillyWonka as ÇlrAccordionWillyWonka };

package/types/clr-angular-button.d.ts

@@ -0,0 +1,169 @@
+import * as i0 from '@angular/core';
+import { ElementRef, EventEmitter, Renderer2, Type, TemplateRef, AfterContentInit, AfterViewInit, QueryList } from '@angular/core';
+import { LoadingListener, ClrLoadingState, FocusService, ClrCommonStringsService, ClrDestroyService } from '@clr/angular/utils';
+import * as i2 from '@angular/common';
+import { RouterLinkActive } from '@angular/router';
+import { Observable } from 'rxjs';
+import * as i1 from '@clr/angular/popover/common';
+import { ClrPopoverService, ClrPopoverType, ClrPopoverPosition } from '@clr/angular/popover/common';
+import * as i4 from '@clr/angular/icon';
+
+declare class ClrLoadingButton implements LoadingListener {
+    el: ElementRef<HTMLButtonElement>;
+    private renderer;
+    disabled: boolean;
+    clrLoadingChange: EventEmitter<ClrLoadingState>;
+    buttonState: typeof ClrLoadingState;
+    state: ClrLoadingState;
+    constructor(el: ElementRef<HTMLButtonElement>, renderer: Renderer2);
+    loadingStateChange(state: ClrLoadingState): void;
+    private setExplicitButtonWidth;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ClrLoadingButton, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ClrLoadingButton, "button[clrLoading]", never, { "disabled": { "alias": "disabled"; "required": false; }; }, { "clrLoadingChange": "clrLoadingChange"; }, never, ["*"], false, never>;
+}
+
+declare const CLR_LOADING_BUTTON_DIRECTIVES: Type<any>[];
+declare class ClrLoadingButtonModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ClrLoadingButtonModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ClrLoadingButtonModule, [typeof ClrLoadingButton], [typeof i2.CommonModule], [typeof ClrLoadingButton]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<ClrLoadingButtonModule>;
+}
+
+declare class ButtonInGroupService {
+    private _changes;
+    get changes(): Observable<ClrButton>;
+    updateButtonGroup(button: ClrButton): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ButtonInGroupService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ButtonInGroupService>;
+}
+
+declare class ClrButton implements LoadingListener {
+    private readonly routerLinkActive;
+    buttonInGroupService: ButtonInGroupService;
+    _click: EventEmitter<boolean>;
+    routerLinkActiveClasses: string;
+    templateRef: TemplateRef<ClrButton>;
+    loading: boolean;
+    private _inMenu;
+    private _enableService;
+    private _classNames;
+    private _name;
+    private _type;
+    private _disabled;
+    private _id;
+    constructor(routerLinkActive: RouterLinkActive, buttonInGroupService: ButtonInGroupService);
+    get inMenu(): boolean;
+    set inMenu(value: boolean);
+    get classNames(): string;
+    set classNames(value: string);
+    get name(): string;
+    set name(value: string);
+    get type(): string;
+    set type(value: string);
+    get id(): string;
+    set id(value: string);
+    get disabled(): any;
+    set disabled(value: any);
+    get role(): string;
+    ngAfterViewInit(): void;
+    loadingStateChange(state: ClrLoadingState): void;
+    emitClick(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ClrButton, [{ optional: true; }, { optional: true; skipSelf: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ClrButton, "clr-button", never, { "routerLinkActiveClasses": { "alias": "routerLinkActive"; "required": false; }; "inMenu": { "alias": "clrInMenu"; "required": false; }; "classNames": { "alias": "class"; "required": false; }; "name": { "alias": "name"; "required": false; }; "type": { "alias": "type"; "required": false; }; "id": { "alias": "id"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "_click": "click"; }, never, ["*"], false, never>;
+}
+
+declare enum InitialFocus {
+    FIRST_ITEM = "first",
+    LAST_ITEM = "last"
+}
+
+declare class ButtonGroupFocusHandler {
+    private focusService;
+    private popoverService;
+    private renderer;
+    initialFocus: InitialFocus;
+    private menu;
+    private menuToggle;
+    private buttons;
+    private _unlistenFuncs;
+    constructor(focusService: FocusService, popoverService: ClrPopoverService, renderer: Renderer2);
+    ngOnDestroy(): void;
+    initialize({ menu, menuToggle }: {
+        menu: HTMLElement;
+        menuToggle: HTMLElement;
+    }): void;
+    private resetButtonsFocus;
+    private listenToKeys;
+    private closeMenu;
+    private linkButtons;
+    private focusFirstItem;
+    private focusLastItem;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ButtonGroupFocusHandler, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ButtonGroupFocusHandler>;
+}
+
+declare class ClrButtonGroup implements AfterContentInit, AfterViewInit {
+    buttonGroupNewService: ButtonInGroupService;
+    private popoverService;
+    commonStrings: ClrCommonStringsService;
+    private destroy$;
+    private focusHandler;
+    clrToggleButtonAriaLabel: string;
+    menuToggle: ElementRef<HTMLElement>;
+    menu: ElementRef<HTMLElement>;
+    buttons: QueryList<ClrButton>;
+    popoverId: string;
+    InitialFocus: typeof InitialFocus;
+    inlineButtons: ClrButton[];
+    menuButtons: ClrButton[];
+    protected popoverType: ClrPopoverType;
+    private _menuPosition;
+    constructor(buttonGroupNewService: ButtonInGroupService, popoverService: ClrPopoverService, commonStrings: ClrCommonStringsService, destroy$: ClrDestroyService, focusHandler: ButtonGroupFocusHandler);
+    get menuPosition(): ClrPopoverPosition;
+    set menuPosition(pos: ClrPopoverPosition | string);
+    get open(): boolean;
+    /**
+     * 1. Initializes the initial Button Group View
+     * 2. Subscribes to changes on the ContentChildren
+     *    in case the user content projection changes
+     */
+    ngAfterContentInit(): void;
+    ngAfterViewInit(): void;
+    /**
+     * Moves the button into the other ViewContainer
+     * when an update is received.
+     *
+     * @param button
+     */
+    rearrangeButton(button: ClrButton): void;
+    openMenu(event: Event, initialFocus: InitialFocus): void;
+    /**
+     * Author: Eudes
+     *
+     * Finds the order of a button w.r.t other buttons
+     *
+     * @param buttonToMove
+     * @returns
+     */
+    getMoveIndex(buttonToMove: ClrButton): number;
+    initializeButtons(): void;
+    private handleFocusOnMenuOpen;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ClrButtonGroup, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ClrButtonGroup, "clr-button-group", never, { "clrToggleButtonAriaLabel": { "alias": "clrToggleButtonAriaLabel"; "required": false; }; "menuPosition": { "alias": "clrMenuPosition"; "required": false; }; }, {}, ["buttons"], never, false, [{ directive: typeof i1.ClrPopoverHostDirective; inputs: {}; outputs: {}; }]>;
+}
+
+declare const CLR_BUTTON_GROUP_DIRECTIVES: Type<any>[];
+declare class ClrButtonGroupModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ClrButtonGroupModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ClrButtonGroupModule, [typeof ClrButton, typeof ClrButtonGroup], [typeof i2.CommonModule, typeof i4.ClrIcon, typeof i1.ÇlrClrPopoverModuleNext], [typeof ClrButton, typeof ClrButtonGroup]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<ClrButtonGroupModule>;
+}
+
+declare class ClrButtonModule {
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<ClrButtonModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ClrButtonModule, never, never, [typeof ClrLoadingButtonModule, typeof ClrButtonGroupModule]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<ClrButtonModule>;
+}
+
+export { CLR_BUTTON_GROUP_DIRECTIVES, CLR_LOADING_BUTTON_DIRECTIVES, ClrButton, ClrButtonGroup, ClrButtonGroupModule, ClrButtonModule, ClrLoadingButton, ClrLoadingButtonModule };