@clr/angular 13.0.3 → 13.1.0

package/forms/combobox/combobox.d.ts

@@ -80,7 +80,6 @@ export declare class ClrCombobox<T> extends WrappedFormControl<ClrComboboxContai
     private getDisplayNames;
     ngAfterContentInit(): void;
     ngAfterViewInit(): void;
-    ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ClrCombobox<any>, [null, null, { optional: true; self: true; }, null, null, null, null, null, null, { optional: true; }, { optional: true; }, null, null, null, null]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ClrCombobox<any>, "clr-combobox", never, { "placeholder": "placeholder"; "multiSelect": "clrMulti"; }, { "clrInputChange": "clrInputChange"; "clrOpenChange": "clrOpenChange"; "clrSelectionChange": "clrSelectionChange"; }, ["optionSelected"], ["*"]>;
 }

package/layout/nav/header.d.ts

@@ -17,7 +17,13 @@ export declare class ClrHeader implements OnDestroy {
     resetNavTriggers(): void;
     initializeNavTriggers(navList: number[]): void;
     closeOpenNav(): void;
+    /**
+     * @deprecated Will be removed in with @clr/angular v15.0.0
+     *
+     * Use `openNav(navLevel)` instead to open the navigation and ResponsiveNavService to close it.
+     */
     toggleNav(navLevel: number): void;
+    openNav(navLevel: number): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ClrHeader, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ClrHeader, "clr-header", never, {}, {}, never, ["*"]>;

package/layout/nav/nav-level.d.ts

@@ -1,20 +1,32 @@
-import { ElementRef, OnInit } from '@angular/core';
+import { ElementRef, Injector, OnInit, Renderer2 } from '@angular/core';
 import { ResponsiveNavigationService } from './providers/responsive-navigation.service';
 import { ResponsiveNavCodes } from './responsive-nav-codes';
+import { FocusTrap, FocusTrapElement } from '../../utils/focus-trap/focus-trap';
+import '@cds/core/internal-components/close-button/register.js';
 import * as i0 from "@angular/core";
-export declare class ClrNavLevel implements OnInit {
+export declare class ClrNavLevel extends FocusTrap implements OnInit {
     private responsiveNavService;
     private elementRef;
     _level: number;
-    constructor(responsiveNavService: ResponsiveNavigationService, elementRef: ElementRef);
+    closeButtonAriaLabel: string;
+    private _subscription;
+    private _isOpen;
+    constructor(platformId: any, responsiveNavService: ResponsiveNavigationService, elementRef: ElementRef<FocusTrapElement>, renderer: Renderer2, injector: Injector);
     ngOnInit(): void;
+    ngAfterViewInit(): void;
     addNavClass(level: number): void;
     get level(): number;
     get responsiveNavCodes(): ResponsiveNavCodes;
+    get isOpen(): boolean;
+    onResize(event: Event): void;
     open(): void;
     close(): void;
     onMouseClick(target: any): void;
+    protected hideNavigation(): void;
+    protected showNavigation(): void;
+    protected hideCloseButton(): void;
+    protected showCloseButton(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ClrNavLevel, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ClrNavLevel, "[clr-nav-level]", never, { "_level": "clr-nav-level"; }, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ClrNavLevel, "[clr-nav-level]", never, { "_level": "clr-nav-level"; "closeButtonAriaLabel": "closeAriaLabel"; }, {}, never>;
 }

package/layout/vertical-nav/vertical-nav-link.d.ts

@@ -1,9 +1,10 @@
+import { ChangeDetectorRef, ElementRef, OnDestroy } from '@angular/core';
 import { VerticalNavGroupService } from './providers/vertical-nav-group.service';
 import * as i0 from "@angular/core";
-export declare class ClrVerticalNavLink {
-    private _navGroupService;
-    constructor(_navGroupService: VerticalNavGroupService);
-    expandParentNavGroup(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ClrVerticalNavLink, [{ optional: true; }]>;
+export declare class ClrVerticalNavLink implements OnDestroy {
+    private destroy$;
+    constructor(host: ElementRef<HTMLElement>, ref: ChangeDetectorRef, navGroupService: VerticalNavGroupService | null);
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ClrVerticalNavLink, [null, null, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ClrVerticalNavLink, "[clrVerticalNavLink]", never, {}, {}, never, ["[clrVerticalNavIcon]", "*"]>;
 }

package/modal/modal-body.d.ts

@@ -11,6 +11,7 @@ export declare class ClrModalBody implements OnDestroy {
     private readonly host;
     private tabindex;
     private unlisteners;
+    private observer;
     constructor(renderer: Renderer2, host: ElementRef<HTMLElement>, ngZone: NgZone);
     ngOnDestroy(): void;
     private addTabIndex;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@clr/angular",
   "description": "Angular components for Clarity",
-  "homepage": "https://clarity.design",
+  "homepage": "https://angular.clarity.design",
   "keywords": [
     "ng-add",
     "clarity",
@@ -10,12 +10,12 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/vmware/clarity.git"
+    "url": "https://github.com/vmware-clarity/ng-clarity.git"
   },
   "author": "Clarity Design System",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/vmware/clarity/issues"
+    "url": "https://github.com/vmware-clarity/ng-clarity/issues"
   },
   "peerDependencies": {
     "@angular/common": "^13.0.0",
@@ -45,5 +45,5 @@
   "dependencies": {
     "tslib": "^2.3.0"
   },
-  "version": "13.0.3"
+  "version": "13.1.0"
 }

package/popover/common/abstract-popover.d.ts

@@ -1,4 +1,4 @@
-import { AfterViewChecked, ElementRef, Injector, OnDestroy, Renderer2 } from '@angular/core';
+import { AfterViewChecked, ElementRef, Injector, OnDestroy, Renderer2, NgZone, ChangeDetectorRef } from '@angular/core';
 import { ClrPopoverToggleService } from '../../utils/popover/providers/popover-toggle.service';
 import { Point } from './popover';
 import { PopoverOptions } from './popover-options.interface';
@@ -9,6 +9,8 @@ export declare abstract class AbstractPopover implements AfterViewChecked, OnDes
     protected el: ElementRef;
     protected toggleService: ClrPopoverToggleService;
     protected renderer: Renderer2;
+    protected ngZone: NgZone;
+    protected ref: ChangeDetectorRef;
     private popoverInstance;
     private subscription;
     private updateAnchor;

package/popover/dropdown/providers/dropdown-focus-handler.service.d.ts

@@ -1,10 +1,10 @@
-import { Renderer2 } from '@angular/core';
+import { OnDestroy, Renderer2 } from '@angular/core';
 import { Observable } from 'rxjs';
 import { ClrPopoverToggleService } from '../../../utils/popover/providers/popover-toggle.service';
 import { FocusService } from '../../../utils/focus/focus.service';
 import { FocusableItem } from '../../../utils/focus/focusable-item/focusable-item';
 import * as i0 from "@angular/core";
-export declare class DropdownFocusHandler implements FocusableItem {
+export declare class DropdownFocusHandler implements OnDestroy, FocusableItem {
     id: string;
     private renderer;
     private parent;

package/utils/breakpoints/breakpoints.d.ts

@@ -1 +1,15 @@
+/**
+ * TODO:
+ * Using core functions like:
+ * - pluckPixelValue
+ * - getCssPropertyValue
+ *
+ * to get the value of the design token.
+ *
+ * Note: Memoization/Cache usage possible.
+ */
 export declare const DATEPICKER_ENABLE_BREAKPOINT = 768;
+export declare const SMALL_BREAKPOINT = 576;
+export declare const MEDIUM_BREAKPOINT = 768;
+export declare const LARGE_BREAKPOINT = 992;
+export declare const EXTRA_LARGE_BREAKPOINT = 1200;

package/utils/destroy/destroy.service.d.ts

@@ -0,0 +1,32 @@
+import { OnDestroy } from '@angular/core';
+import { Subject } from 'rxjs';
+import * as i0 from "@angular/core";
+/**
+ * @description
+ *
+ * Developers should explicitly add this service to providers; it then can be injected
+ * into a constructor and used as a notifier for the `takeUntil` operator. This eliminates
+ * the need for boilerplates with subscriptions, and we don't need to implement the `OnDestroy`
+ * interface and teardown subscriptions there.
+ *
+ * This can be used as follows:
+ * ```ts
+ * @Component({
+ *   selector: 'clr-button-group',
+ *   templateUrl: 'button-group.html',
+ *   providers: [ClrDestroyService],
+ * })
+ * export class ClrButtonGroup {
+ *   constructor(public buttonGroupNewService: ButtonInGroupService, private destroy$: ClrDestroyService) {}
+ *
+ *   ngAfterContentInit() {
+ *     this.buttonGroupNewService.changes.pipe(takeUntil(this.destroy$)).subscribe(button => this.rearrangeButton(button));
+ *   }
+ * }
+ * ```
+ */
+export declare class ClrDestroyService extends Subject<void> implements OnDestroy {
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ClrDestroyService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ClrDestroyService>;
+}

package/utils/destroy/index.d.ts

@@ -0,0 +1 @@
+export * from './destroy.service';

package/utils/focus/focus-on-view-init/focus-on-view-init.d.ts

@@ -1,17 +1,18 @@
-import { AfterViewInit, ElementRef, Renderer2 } from '@angular/core';
+import { AfterViewInit, ElementRef, NgZone, OnDestroy, Renderer2 } from '@angular/core';
 import * as i0 from "@angular/core";
-export declare class ClrFocusOnViewInit implements AfterViewInit {
+export declare class ClrFocusOnViewInit implements AfterViewInit, OnDestroy {
     private el;
     private platformId;
     private focusOnViewInit;
     private renderer;
-    constructor(el: ElementRef, platformId: any, focusOnViewInit: boolean, document: any, renderer: Renderer2);
+    private destroy$;
+    constructor(el: ElementRef, platformId: any, focusOnViewInit: boolean, document: any, renderer: Renderer2, ngZone: NgZone);
     private document;
     private directFocus;
-    onFocusout(): void;
     private _isEnabled;
     set isEnabled(value: boolean | string);
     ngAfterViewInit(): void;
+    ngOnDestroy(): void;
     private focus;
     static ɵfac: i0.ɵɵFactoryDeclaration<ClrFocusOnViewInit, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<ClrFocusOnViewInit, "[clrFocusOnViewInit]", never, { "isEnabled": "clrFocusOnViewInit"; }, {}, never>;

package/utils/focus-trap/focus-trap.d.ts

@@ -0,0 +1,29 @@
+import { Injector, Renderer2 } from '@angular/core';
+import * as i0 from "@angular/core";
+export interface FocusTrapElement extends HTMLElement {
+    topReboundElement: HTMLElement | undefined;
+    bottomReboundElement: HTMLElement | undefined;
+    focusTrapId: string;
+}
+export declare function refocusIfOutsideFocusTrapElement(focusedElement: HTMLElement, focusTrapElement: FocusTrapElement, elementToRefocus?: HTMLElement): void;
+export declare function elementIsOutsideFocusTrapElement(focusedElement: HTMLElement, focusTrapElement: FocusTrapElement): boolean;
+export declare function createFocusTrapReboundElement(document: Document): HTMLSpanElement;
+export declare function addReboundElementsToFocusTrapElement(document: Document, focusTrapElement: FocusTrapElement): void;
+export declare function removeReboundElementsFromFocusTrapElement(focusTrapElement: FocusTrapElement): void;
+export declare function castHtmlElementToFocusTrapElement(el: HTMLElement): FocusTrapElement;
+export declare class FocusTrap {
+    protected renderer: Renderer2;
+    focusTrapElement: FocusTrapElement;
+    private previousFocus;
+    private onFocusInEvent;
+    private unlisten;
+    protected _document: Document;
+    firstFocusElement: HTMLElement | FocusTrapElement;
+    active: boolean;
+    constructor(renderer: Renderer2, injector: Injector, platformId: any, hostElement: FocusTrapElement);
+    enableFocusTrap(): void;
+    removeFocusTrap(): void;
+    private onFocusIn;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FocusTrap, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<FocusTrap>;
+}

package/utils/index.d.ts

@@ -7,3 +7,4 @@ export * from './drag-and-drop/index';
 export * from './popover/index';
 export * from './focus/focus-on-view-init/index';
 export * from './focus-trap/index';
+export * from './destroy';

package/utils/popover/popover-content.d.ts

@@ -19,7 +19,8 @@ export declare class ClrPopoverContent implements AfterContentChecked, OnDestroy
     set contentAt(position: ClrPopoverPosition);
     set outsideClickClose(clickToClose: boolean);
     set scrollToClose(scrollToClose: boolean);
-    constructor(document: HTMLDocument, container: ViewContainerRef, template: TemplateRef<any>, renderer: Renderer2, smartPositionService: ClrPopoverPositionService, smartEventsService: ClrPopoverEventsService, smartOpenService: ClrPopoverToggleService);
+    private removeClickListenerFn;
+    constructor(document: Document, container: ViewContainerRef, template: TemplateRef<any>, renderer: Renderer2, smartPositionService: ClrPopoverPositionService, smartEventsService: ClrPopoverEventsService, smartOpenService: ClrPopoverToggleService);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     private removeContent;