@clr/angular 12.0.13 → 12.0.14

package/layout/nav/header.d.ts

@@ -14,6 +14,12 @@ 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;
 }

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

@@ -1,17 +1,29 @@
-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';
-export declare class ClrNavLevel implements OnInit {
+import { FocusTrap, FocusTrapElement } from '../../utils/focus-trap/focus-trap';
+import '@cds/core/internal-components/close-button/register.js';
+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;
 }

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": "^12.0.0",
@@ -31,7 +31,7 @@
   "metadata": "clr-angular.metadata.json",
   "sideEffects": false,
   "dependencies": {
-    "tslib": "^2.2.0"
+    "tslib": "^2.1.0"
   },
-  "version": "12.0.13"
+  "version": "12.0.14"
 }

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/focus-trap/focus-trap.d.ts

@@ -0,0 +1,26 @@
+import { Injector, Renderer2 } 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;
+}

package/utils/i18n/common-strings.interface.d.ts

@@ -204,6 +204,13 @@ export interface ClrCommonStrings {
     datepickerCurrentDecade: string;
     datepickerSelectMonthText: string;
     datepickerSelectYearText: string;
+    /**
+     * Navigation
+     */
+    responsiveNavToggleOpen: string;
+    responsiveNavToggleClose: string;
+    responsiveNavOverflowOpen: string;
+    responsiveNavOverflowClose: string;
     /**
      * Stack View: Record has changed
      */
@@ -247,4 +254,18 @@ export interface ClrCommonStrings {
     comboboxSelected: string;
     comboboxNoResults: string;
     comboboxOpen: string;
+    /**
+     * Wizard: Screen-reader text for completed step.
+     */
+    wizardStepSuccess: string;
+    /**
+     * Wizard: Screen-reader text for step with error.
+     */
+    wizardStepError: string;
+    /**
+     * Password Input
+     * Screen-reader text for the hide/show password field button.
+     */
+    passwordHide: string;
+    passwordShow: string;
 }