@clr/angular 12.0.15 → 12.1.0

package/bundles/clr-angular.umd.js

@@ -12584,7 +12584,7 @@
     ClrDatagridPlaceholder.decorators = [
         { type: i0.Component, args: [{
                     selector: 'clr-dg-placeholder',
-                    template: "\n    <div class=\"datagrid-placeholder\" [class.datagrid-empty]=\"emptyDatagrid\" role=\"row\">\n      <div class=\"datagrid-placeholder-image\" *ngIf=\"emptyDatagrid\"></div>\n      <span role=\"gridcell\"><ng-content *ngIf=\"emptyDatagrid\"></ng-content></span>\n    </div>\n  ",
+                    template: "\n    <div class=\"datagrid-placeholder\" [class.datagrid-empty]=\"emptyDatagrid\" role=\"row\">\n      <div class=\"datagrid-placeholder-image\" *ngIf=\"emptyDatagrid\"></div>\n      <span role=\"gridcell\" class=\"datagrid-placeholder-content\"><ng-content *ngIf=\"emptyDatagrid\"></ng-content></span>\n    </div>\n  ",
                     host: { '[class.datagrid-placeholder-container]': 'true' }
                 },] }
     ];
@@ -13880,13 +13880,201 @@
         { type: i0.Injectable }
     ];
 
+    /*
+     * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
+     * This software is released under MIT license.
+     * The full license information can be found in LICENSE in the root directory of this project.
+     */
+    function getTabableItems(el) {
+        var tabableSelector = [
+            'a[href]',
+            'area[href]',
+            'input:not([disabled])',
+            'button:not([disabled])',
+            'select:not([disabled])',
+            'textarea:not([disabled])',
+            'iframe',
+            'object',
+            'embed',
+            '*[tabindex]',
+            '*[contenteditable=true]',
+            '[role=button]:not([disabled])',
+        ].join(',');
+        return Array.from(el.querySelectorAll(tabableSelector));
+    }
+    var KeyNavigationGridController = /** @class */ (function () {
+        function KeyNavigationGridController(zone) {
+            this.zone = zone;
+            this.listenersAdded = false;
+            this.destroy$ = new rxjs.Subject();
+            this.config = {
+                keyGridRows: '[role=row]:not(.datagrid-placeholder)',
+                keyGridCells: '[role=gridcell]:not(.datagrid-hidden-column):not(.datagrid-placeholder-content), [role=columnheader]:not(.datagrid-hidden-column):not(.datagrid-placeholder-content), .datagrid-detail-caret',
+                keyGrid: '[role=grid]',
+            };
+        }
+        Object.defineProperty(KeyNavigationGridController.prototype, "grid", {
+            get: function () {
+                var _a;
+                return (_a = this.host) === null || _a === void 0 ? void 0 : _a.querySelector(this.config.keyGrid);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(KeyNavigationGridController.prototype, "rows", {
+            get: function () {
+                var _a;
+                return (_a = this.host) === null || _a === void 0 ? void 0 : _a.querySelectorAll(this.config.keyGridRows);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(KeyNavigationGridController.prototype, "cells", {
+            get: function () {
+                var _a;
+                return (_a = this.host) === null || _a === void 0 ? void 0 : _a.querySelectorAll(this.config.keyGridCells);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        KeyNavigationGridController.prototype.ngOnDestroy = function () {
+            this.destroy$.next();
+            this.destroy$.complete();
+        };
+        KeyNavigationGridController.prototype.addListeners = function () {
+            var _this = this;
+            if (this.listenersAdded) {
+                return;
+            }
+            this.zone.runOutsideAngular(function () {
+                rxjs.fromEvent(_this.grid, 'mousedown')
+                    .pipe(operators.takeUntil(_this.destroy$))
+                    .subscribe(function (e) {
+                    // preserve right click for context menus & keyboard mouse control https://apple.stackexchange.com/questions/32715/how-do-i-open-the-context-menu-from-a-mac-keyboard
+                    if (e.buttons === 1 && !e.ctrlKey) {
+                        var activeCell = _this.cells
+                            ? Array.from(_this.cells).find(function (c) { return c === e.target || c === e.target.closest(_this.config.keyGridCells); })
+                            : null;
+                        if (activeCell) {
+                            _this.setActiveCell(activeCell);
+                        }
+                    }
+                });
+                rxjs.fromEvent(_this.grid, 'keydown')
+                    .pipe(operators.takeUntil(_this.destroy$))
+                    .subscribe(function (e) {
+                    // Skip column resize events
+                    if (e.target.classList.contains('drag-handle') &&
+                        (e.code === 'ArrowLeft' || e.code === 'ArrowRight')) {
+                        return;
+                    }
+                    if (e.code === 'ArrowUp' ||
+                        e.code === 'ArrowDown' ||
+                        e.code === 'ArrowLeft' ||
+                        e.code === 'ArrowRight' ||
+                        e.code === 'End' ||
+                        e.code === 'Home' ||
+                        e.code === 'PageUp' ||
+                        e.code === 'PageDown') {
+                        var _b = _this.getNextItemCoordinate(e), x = _b.x, y = _b.y;
+                        var activeItem = _this.rows
+                            ? Array.from(_this.rows[y].querySelectorAll(_this.config.keyGridCells))[x]
+                            : null;
+                        if (activeItem) {
+                            _this.setActiveCell(activeItem);
+                        }
+                        e.preventDefault();
+                    }
+                });
+            });
+            this.listenersAdded = true;
+        };
+        KeyNavigationGridController.prototype.initializeKeyGrid = function (host) {
+            this.host = host;
+            this.addListeners();
+            this.resetKeyGrid();
+        };
+        KeyNavigationGridController.prototype.resetKeyGrid = function () {
+            var _a;
+            (_a = this.cells) === null || _a === void 0 ? void 0 : _a.forEach(function (i) { return i.setAttribute('tabindex', '-1'); });
+            var firstCell = this.cells ? this.cells[0] : null;
+            firstCell === null || firstCell === void 0 ? void 0 : firstCell.setAttribute('tabindex', '0');
+        };
+        KeyNavigationGridController.prototype.setActiveCell = function (activeCell) {
+            var prior = this.cells ? Array.from(this.cells).find(function (c) { return c.getAttribute('tabindex') === '0'; }) : null;
+            if (prior) {
+                prior.setAttribute('tabindex', '-1');
+            }
+            activeCell.setAttribute('tabindex', '0');
+            var items = getTabableItems(activeCell);
+            var item = activeCell.getAttribute('role') !== 'columnheader' && items[0] ? items[0] : activeCell;
+            item.focus();
+        };
+        KeyNavigationGridController.prototype.getNextItemCoordinate = function (e) {
+            var _a;
+            var currentCell = this.cells ? Array.from(this.cells).find(function (i) { return i.getAttribute('tabindex') === '0'; }) : null;
+            if (e.code === 'Tab') {
+                currentCell = document.activeElement;
+            }
+            var currentRow = this.rows && currentCell ? Array.from(this.rows).find(function (r) { return r.contains(currentCell); }) : null;
+            var numOfRows = this.rows ? this.rows.length - 1 : 0;
+            var numOfColumns = this.cells ? this.cells.length / this.rows.length - 1 : 0;
+            var x = currentRow && currentCell
+                ? Array.from(currentRow.querySelectorAll(this.config.keyGridCells)).indexOf(currentCell)
+                : 0;
+            var y = currentRow && currentCell && this.rows ? Array.from(this.rows).indexOf(currentRow) : 0;
+            var dir = this.host.dir;
+            var inlineStart = dir === 'rtl' ? 'ArrowRight' : 'ArrowLeft';
+            var inlineEnd = dir === 'rtl' ? 'ArrowLeft' : 'ArrowRight';
+            var itemsPerPage = Math.floor(((_a = this.host) === null || _a === void 0 ? void 0 : _a.querySelector('.datagrid').clientHeight) / this.rows[0].clientHeight) - 1 || 0;
+            if (e.code === 'ArrowUp' && y !== 0) {
+                y = y - 1;
+            }
+            else if (e.code === 'ArrowDown' && y < numOfRows) {
+                y = y + 1;
+            }
+            else if (e.code === inlineStart && x !== 0) {
+                x = x - 1;
+            }
+            else if (e.code === inlineEnd && x < numOfColumns) {
+                x = x + 1;
+            }
+            else if (e.code === 'End') {
+                x = numOfColumns;
+                if (e.ctrlKey) {
+                    y = numOfRows;
+                }
+            }
+            else if (e.code === 'Home') {
+                x = 0;
+                if (e.ctrlKey) {
+                    y = 0;
+                }
+            }
+            else if (e.code === 'PageUp') {
+                y = y - itemsPerPage > 0 ? y - itemsPerPage : 0;
+            }
+            else if (e.code === 'PageDown') {
+                y = y + itemsPerPage < numOfRows ? y + itemsPerPage : numOfRows;
+            }
+            return { x: x, y: y };
+        };
+        return KeyNavigationGridController;
+    }());
+    KeyNavigationGridController.decorators = [
+        { type: i0.Injectable }
+    ];
+    KeyNavigationGridController.ctorParameters = function () { return [
+        { type: i0.NgZone }
+    ]; };
+
     /*
      * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
      * This software is released under MIT license.
      * The full license information can be found in LICENSE in the root directory of this project.
      */
     var ClrDatagrid = /** @class */ (function () {
-        function ClrDatagrid(organizer, items, expandableRows, selection, rowActionService, stateProvider, displayMode, renderer, detailService, datagridId, el, page, commonStrings) {
+        function ClrDatagrid(organizer, items, expandableRows, selection, rowActionService, stateProvider, displayMode, renderer, detailService, datagridId, el, page, commonStrings, columnsService, keyNavigation) {
             this.organizer = organizer;
             this.items = items;
             this.expandableRows = expandableRows;
@@ -13899,6 +14087,8 @@
             this.el = el;
             this.page = page;
             this.commonStrings = commonStrings;
+            this.columnsService = columnsService;
+            this.keyNavigation = keyNavigation;
             /* reference to the enum so that template can access */
             this.SELECTION_TYPE = SelectionType;
             /**
@@ -14050,6 +14240,7 @@
          */
         ClrDatagrid.prototype.ngAfterViewInit = function () {
             var _this = this;
+            this.keyNavigation.initializeKeyGrid(this.el.nativeElement);
             // TODO: determine if we can get rid of provider wiring in view init so that subscriptions can be done earlier
             this.refresh.emit(this.stateProvider.state);
             this._subscriptions.push(this.stateProvider.change.subscribe(function (state) { return _this.refresh.emit(state); }), this.selection.change.subscribe(function (s) {
@@ -14059,11 +14250,16 @@
                 else if (_this.selection.selectionType === SelectionType.Multi) {
                     _this.selectedChanged.emit(s);
                 }
-            }), this.page.change.subscribe(function () {
+            }), 
+            // Reinitialize arrow key navigation on page changes
+            this.page.change.subscribe(function () {
+                _this.keyNavigation.resetKeyGrid();
                 if (!_this.clrDgDisablePageFocus) {
                     _this.datagridTable.nativeElement.focus();
                 }
             }), 
+            // Reinitialize arrow key navigation on hide/unhide columns
+            rxjs.combineLatest(this.columnsService.columns).subscribe(function () { var _a; return (_a = _this.keyNavigation) === null || _a === void 0 ? void 0 : _a.resetKeyGrid(); }), 
             // A subscription that listens for displayMode changes on the datagrid
             this.displayMode.view.subscribe(function (viewChange) {
                 // Remove any projected columns from the projectedDisplayColumns container
@@ -14115,7 +14311,7 @@
     ClrDatagrid.decorators = [
         { type: i0.Component, args: [{
                     selector: 'clr-datagrid',
-                    template: "<!--\n  ~ Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<ng-content select=\"clr-dg-action-bar\"></ng-content>\n<div class=\"datagrid-outer-wrapper\">\n  <div class=\"datagrid-inner-wrapper\">\n    <div class=\"datagrid\" #datagrid [attr.aria-hidden]=\"detailService.isOpen ? true : null\">\n      <div class=\"datagrid-table-wrapper\">\n        <div role=\"grid\" class=\"datagrid-table\" tabindex=\"-1\" #datagridTable>\n          <div role=\"rowgroup\" class=\"datagrid-header\">\n            <div role=\"row\" class=\"datagrid-row\">\n              <div class=\"datagrid-row-master datagrid-row-flex\">\n                <div class=\"datagrid-row-sticky\">\n                  <!--header for datagrid where you can select multiple rows -->\n                  <div\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-select datagrid-fixed-column\"\n                    *ngIf=\"selection.selectionType === SELECTION_TYPE.Multi\"\n                  >\n                    <div class=\"clr-checkbox-wrapper\">\n                      <input\n                        type=\"checkbox\"\n                        [id]=\"selectAllId\"\n                        [(ngModel)]=\"allSelected\"\n                        [attr.aria-label]=\"commonStrings.keys.selectAll\"\n                      />\n                      <!-- Usage of class clr-col-null here prevents clr-col-* classes from being added when a datagrid is wrapped inside clrForm -->\n                      <label [for]=\"selectAllId\" class=\"clr-control-label clr-col-null\">\n                        <span class=\"clr-sr-only\">{{commonStrings.keys.selectAll}}</span>\n                      </label>\n                    </div>\n\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                  <!-- header for datagrid where you can select one row only -->\n                  <div\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-select datagrid-fixed-column\"\n                    *ngIf=\"selection.selectionType === SELECTION_TYPE.Single\"\n                    [attr.aria-label]=\"clrDgSingleSelectionAriaLabel\"\n                  >\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                  <!-- header for single row action; only displayType if we have at least one actionable row in datagrid -->\n                  <div\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-row-actions datagrid-fixed-column\"\n                    *ngIf=\"rowActionService.hasActionableRow\"\n                    [attr.aria-label]=\"clrDgSingleActionableAriaLabel\"\n                  >\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                  <!-- header for carets; only displayType if we have at least one expandable row in datagrid -->\n                  <div\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-expandable-caret datagrid-fixed-column\"\n                    *ngIf=\"expandableRows.hasExpandableRow || detailService.enabled\"\n                    [attr.aria-label]=\"clrDetailExpandableAriaLabel\"\n                  >\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                </div>\n                <div class=\"datagrid-row-scrollable\">\n                  <ng-container #projectedDisplayColumns></ng-container>\n                </div>\n              </div>\n            </div>\n          </div>\n          <ng-container #displayedRows></ng-container>\n          <!-- Custom placeholder overrides the default empty one -->\n          <ng-content select=\"clr-dg-placeholder\"></ng-content>\n          <clr-dg-placeholder *ngIf=\"!placeholder\"></clr-dg-placeholder>\n        </div>\n      </div>\n    </div>\n    <ng-content select=\"clr-dg-footer\"></ng-content>\n    <div class=\"datagrid-spinner\" *ngIf=\"loading\">\n      <clr-spinner clrMedium>Loading</clr-spinner>\n    </div>\n  </div>\n  <ng-content select=\"[clrIfDetail],clr-dg-detail\"></ng-content>\n</div>\n\n<div class=\"datagrid-calculation-table\">\n  <div class=\"datagrid-calculation-header\">\n    <ng-container #projectedCalculationColumns></ng-container>\n  </div>\n  <ng-container #calculationRows></ng-container>\n</div>\n",
+                    template: "<!--\n  ~ Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<ng-content select=\"clr-dg-action-bar\"></ng-content>\n<div class=\"datagrid-outer-wrapper\">\n  <div class=\"datagrid-inner-wrapper\">\n    <div class=\"datagrid\" #datagrid [attr.aria-hidden]=\"detailService.isOpen ? true : null\">\n      <div class=\"datagrid-table-wrapper\">\n        <div role=\"grid\" class=\"datagrid-table\" tabindex=\"-1\" #datagridTable>\n          <div role=\"rowgroup\" class=\"datagrid-header\">\n            <div role=\"row\" class=\"datagrid-row\">\n              <div class=\"datagrid-row-master datagrid-row-flex\">\n                <div class=\"datagrid-row-sticky\">\n                  <!--header for datagrid where you can select multiple rows -->\n                  <div\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-select datagrid-fixed-column\"\n                    *ngIf=\"selection.selectionType === SELECTION_TYPE.Multi\"\n                    (keydown.space)=\"allSelected = !allSelected; $event.preventDefault()\"\n                  >\n                    <div class=\"clr-checkbox-wrapper\">\n                      <!-- We need to move focus and space-key handling to the parent because of keyboard arrow key navigation,\n                           which is not able to transfer focus directly on the input when focused with the tab key -->\n                      <input\n                        type=\"checkbox\"\n                        [id]=\"selectAllId\"\n                        [(ngModel)]=\"allSelected\"\n                        [attr.aria-label]=\"commonStrings.keys.selectAll\"\n                        tabindex=\"-1\"\n                      />\n                      <!-- Usage of class clr-col-null here prevents clr-col-* classes from being added when a datagrid is wrapped inside clrForm -->\n                      <label [for]=\"selectAllId\" class=\"clr-control-label clr-col-null\">\n                        <span class=\"clr-sr-only\">{{commonStrings.keys.selectAll}}</span>\n                      </label>\n                    </div>\n\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                  <!-- header for datagrid where you can select one row only -->\n                  <div\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-select datagrid-fixed-column\"\n                    *ngIf=\"selection.selectionType === SELECTION_TYPE.Single\"\n                    [attr.aria-label]=\"clrDgSingleSelectionAriaLabel\"\n                  >\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                  <!-- header for single row action; only displayType if we have at least one actionable row in datagrid -->\n                  <div\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-row-actions datagrid-fixed-column\"\n                    *ngIf=\"rowActionService.hasActionableRow\"\n                    [attr.aria-label]=\"clrDgSingleActionableAriaLabel\"\n                  >\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                  <!-- header for carets; only displayType if we have at least one expandable row in datagrid -->\n                  <div\n                    role=\"columnheader\"\n                    class=\"datagrid-column datagrid-expandable-caret datagrid-fixed-column\"\n                    *ngIf=\"expandableRows.hasExpandableRow || detailService.enabled\"\n                    [attr.aria-label]=\"clrDetailExpandableAriaLabel\"\n                  >\n                    <div class=\"datagrid-column-separator\"></div>\n                  </div>\n                </div>\n                <div class=\"datagrid-row-scrollable\">\n                  <ng-container #projectedDisplayColumns></ng-container>\n                </div>\n              </div>\n            </div>\n          </div>\n          <ng-container #displayedRows></ng-container>\n          <!-- Custom placeholder overrides the default empty one -->\n          <ng-content select=\"clr-dg-placeholder\"></ng-content>\n          <clr-dg-placeholder *ngIf=\"!placeholder\"></clr-dg-placeholder>\n        </div>\n      </div>\n    </div>\n    <ng-content select=\"clr-dg-footer\"></ng-content>\n    <div class=\"datagrid-spinner\" *ngIf=\"loading\">\n      <clr-spinner clrMedium>Loading</clr-spinner>\n    </div>\n  </div>\n  <ng-content select=\"[clrIfDetail],clr-dg-detail\"></ng-content>\n</div>\n\n<div class=\"datagrid-calculation-table\">\n  <div class=\"datagrid-calculation-header\">\n    <ng-container #projectedCalculationColumns></ng-container>\n  </div>\n  <ng-container #calculationRows></ng-container>\n</div>\n",
                     providers: [
                         Selection,
                         Sort,
@@ -14132,6 +14328,7 @@
                         TableSizeService,
                         ColumnsService,
                         DisplayModeService,
+                        KeyNavigationGridController,
                     ],
                     host: {
                         '[class.datagrid-host]': 'true',
@@ -14152,7 +14349,9 @@
         { type: String, decorators: [{ type: i0.Inject, args: [UNIQUE_ID,] }] },
         { type: i0.ElementRef },
         { type: Page },
-        { type: ClrCommonStringsService }
+        { type: ClrCommonStringsService },
+        { type: ColumnsService },
+        { type: KeyNavigationGridController }
     ]; };
     ClrDatagrid.propDecorators = {
         loading: [{ type: i0.Input, args: ['clrDgLoading',] }],
@@ -19685,7 +19884,6 @@
     var createCdsCloseButton = function (document, ariaLabel) {
         var cdsCloseButton = document.createElement('cds-internal-close-button');
         cdsCloseButton.setAttribute('icon-size', '32');
-        console.log(ariaLabel);
         cdsCloseButton.setAttribute('aria-label', ariaLabel);
         cdsCloseButton.setAttribute('aria-hidden', 'true');
         cdsCloseButton.setAttribute('type', 'button');
@@ -26488,50 +26686,51 @@
     exports["ɵd"] = FOCUS_TRAP_DIRECTIVES;
     exports["ɵda"] = ColumnsService;
     exports["ɵdb"] = DisplayModeService;
-    exports["ɵdc"] = DatagridFilterRegistrar;
-    exports["ɵdd"] = CustomFilter;
-    exports["ɵde"] = DatagridIfExpandService;
-    exports["ɵdf"] = SignpostFocusManager;
-    exports["ɵdg"] = SignpostIdService;
-    exports["ɵdh"] = ColumnResizerService;
-    exports["ɵdi"] = COLUMN_STATE;
-    exports["ɵdj"] = columnStateFactory;
-    exports["ɵdk"] = COLUMN_STATE_PROVIDER;
-    exports["ɵdm"] = WillyWonka;
-    exports["ɵdn"] = OompaLoompa;
-    exports["ɵdo"] = StackControl;
-    exports["ɵdp"] = TreeFeaturesService;
-    exports["ɵdq"] = treeFeaturesFactory;
-    exports["ɵdr"] = TREE_FEATURES_PROVIDER;
-    exports["ɵds"] = TreeFocusManagerService;
-    exports["ɵdt"] = RecursiveChildren;
-    exports["ɵdu"] = ScrollingService;
-    exports["ɵdv"] = ButtonInGroupService;
-    exports["ɵdw"] = ResponsiveNavigationService;
-    exports["ɵdy"] = FocusTrap;
-    exports["ɵdz"] = ClrTemplateRefModule;
+    exports["ɵdc"] = KeyNavigationGridController;
+    exports["ɵdd"] = DatagridFilterRegistrar;
+    exports["ɵde"] = CustomFilter;
+    exports["ɵdf"] = DatagridIfExpandService;
+    exports["ɵdg"] = SignpostFocusManager;
+    exports["ɵdh"] = SignpostIdService;
+    exports["ɵdi"] = ColumnResizerService;
+    exports["ɵdj"] = COLUMN_STATE;
+    exports["ɵdk"] = columnStateFactory;
+    exports["ɵdl"] = COLUMN_STATE_PROVIDER;
+    exports["ɵdn"] = WillyWonka;
+    exports["ɵdo"] = OompaLoompa;
+    exports["ɵdp"] = StackControl;
+    exports["ɵdq"] = TreeFeaturesService;
+    exports["ɵdr"] = treeFeaturesFactory;
+    exports["ɵds"] = TREE_FEATURES_PROVIDER;
+    exports["ɵdt"] = TreeFocusManagerService;
+    exports["ɵdu"] = RecursiveChildren;
+    exports["ɵdv"] = ScrollingService;
+    exports["ɵdw"] = ButtonInGroupService;
+    exports["ɵdx"] = ResponsiveNavigationService;
+    exports["ɵdz"] = FocusTrap;
     exports["ɵe"] = RootDropdownService;
-    exports["ɵea"] = TEMPLATE_REF_DIRECTIVES;
-    exports["ɵeb"] = TemplateRefContainer;
-    exports["ɵec"] = TabsService;
-    exports["ɵed"] = TABS_ID;
-    exports["ɵee"] = tokenFactory;
-    exports["ɵef"] = TABS_ID_PROVIDER;
-    exports["ɵeg"] = VerticalNavService;
-    exports["ɵeh"] = VerticalNavIconService;
-    exports["ɵei"] = VerticalNavGroupRegistrationService;
-    exports["ɵej"] = VerticalNavGroupService;
-    exports["ɵek"] = TooltipIdService;
-    exports["ɵel"] = WizardNavigationService;
-    exports["ɵem"] = PageCollectionService;
-    exports["ɵen"] = ButtonHubService;
-    exports["ɵeo"] = HeaderActionService;
-    exports["ɵep"] = AccordionService;
-    exports["ɵeq"] = panelAnimation;
-    exports["ɵer"] = stepAnimation;
-    exports["ɵes"] = defaultAnimationTiming;
-    exports["ɵet"] = StepperService;
-    exports["ɵeu"] = TimelineIconAttributeService;
+    exports["ɵea"] = ClrTemplateRefModule;
+    exports["ɵeb"] = TEMPLATE_REF_DIRECTIVES;
+    exports["ɵec"] = TemplateRefContainer;
+    exports["ɵed"] = TabsService;
+    exports["ɵee"] = TABS_ID;
+    exports["ɵef"] = tokenFactory;
+    exports["ɵeg"] = TABS_ID_PROVIDER;
+    exports["ɵeh"] = VerticalNavService;
+    exports["ɵei"] = VerticalNavIconService;
+    exports["ɵej"] = VerticalNavGroupRegistrationService;
+    exports["ɵek"] = VerticalNavGroupService;
+    exports["ɵel"] = TooltipIdService;
+    exports["ɵem"] = WizardNavigationService;
+    exports["ɵen"] = PageCollectionService;
+    exports["ɵeo"] = ButtonHubService;
+    exports["ɵep"] = HeaderActionService;
+    exports["ɵeq"] = AccordionService;
+    exports["ɵer"] = panelAnimation;
+    exports["ɵes"] = stepAnimation;
+    exports["ɵet"] = defaultAnimationTiming;
+    exports["ɵeu"] = StepperService;
+    exports["ɵev"] = TimelineIconAttributeService;
     exports["ɵf"] = clrRootDropdownFactory;
     exports["ɵg"] = ROOT_DROPDOWN_PROVIDER;
     exports["ɵh"] = POPOVER_HOST_ANCHOR;