@clr/angular 13.14.2 → 13.14.3

package/fesm2020/clr-angular.mjs

@@ -8757,10 +8757,10 @@ class ClrDaypicker {
     }
 }
 ClrDaypicker.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrDaypicker, deps: [{ token: ViewManagerService }, { token: DateNavigationService }, { token: LocaleHelperService }, { token: ClrCommonStringsService }], target: i0.ɵɵFactoryTarget.Component });
-ClrDaypicker.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ClrDaypicker, selector: "clr-daypicker", host: { properties: { "class.daypicker": "true" } }, ngImport: i0, template: "<div class=\"clr-sr-only\">{{commonStrings.keys.modalContentStart}}</div>\n<div class=\"calendar-header\">\n  <div class=\"calendar-pickers\">\n    <button\n      class=\"calendar-btn monthpicker-trigger\"\n      type=\"button\"\n      (click)=\"changeToMonthView()\"\n      [attr.aria-label]=\"monthAttrString\"\n      [attr.title]=\"monthAttrString\"\n    >\n      {{calendarMonth}}\n    </button>\n    <button\n      class=\"calendar-btn yearpicker-trigger\"\n      type=\"button\"\n      (click)=\"changeToYearView()\"\n      [attr.aria-label]=\"yearAttrString\"\n      [attr.title]=\"yearAttrString\"\n    >\n      {{calendarYear}}\n    </button>\n  </div>\n  <div class=\"calendar-switchers\">\n    <button\n      class=\"calendar-btn switcher\"\n      type=\"button\"\n      (click)=\"previousMonth()\"\n      [attr.aria-label]=\"commonStrings.keys.datepickerPreviousMonth\"\n    >\n      <cds-icon shape=\"angle\" direction=\"left\" [attr.title]=\"commonStrings.keys.datepickerPreviousMonth\"></cds-icon>\n    </button>\n    <button\n      class=\"calendar-btn switcher\"\n      type=\"button\"\n      (click)=\"currentMonth()\"\n      [attr.aria-label]=\"commonStrings.keys.datepickerCurrentMonth\"\n    >\n      <cds-icon shape=\"event\" [attr.title]=\"commonStrings.keys.datepickerCurrentMonth\"></cds-icon>\n    </button>\n    <button\n      class=\"calendar-btn switcher\"\n      type=\"button\"\n      (click)=\"nextMonth()\"\n      [attr.aria-label]=\"commonStrings.keys.datepickerNextMonth\"\n    >\n      <cds-icon shape=\"angle\" direction=\"right\"></cds-icon>\n    </button>\n  </div>\n</div>\n<clr-calendar></clr-calendar>\n<div class=\"clr-sr-only\">{{commonStrings.keys.modalContentEnd}}</div>\n", components: [{ type: ClrCalendar, selector: "clr-calendar" }], directives: [{ type: CdsIconCustomTag, selector: "cds-icon" }] });
+ClrDaypicker.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ClrDaypicker, selector: "clr-daypicker", host: { properties: { "class.daypicker": "true" } }, ngImport: i0, template: "<div class=\"clr-sr-only\">{{commonStrings.keys.modalContentStart}}</div>\n<div class=\"calendar-header\">\n  <div class=\"calendar-pickers\">\n    <button\n      class=\"calendar-btn monthpicker-trigger\"\n      type=\"button\"\n      (click)=\"changeToMonthView()\"\n      [attr.aria-label]=\"monthAttrString\"\n      [attr.title]=\"monthAttrString\"\n    >\n      {{calendarMonth}}\n    </button>\n    <button\n      class=\"calendar-btn yearpicker-trigger\"\n      type=\"button\"\n      (click)=\"changeToYearView()\"\n      [attr.aria-label]=\"yearAttrString\"\n      [attr.title]=\"yearAttrString\"\n    >\n      {{calendarYear}}\n    </button>\n  </div>\n  <div class=\"calendar-switchers\">\n    <button\n      class=\"calendar-btn switcher\"\n      type=\"button\"\n      (click)=\"previousMonth()\"\n      [attr.aria-label]=\"commonStrings.keys.datepickerPreviousMonth\"\n    >\n      <cds-icon shape=\"angle\" direction=\"left\" [attr.title]=\"commonStrings.keys.datepickerPreviousMonth\"></cds-icon>\n    </button>\n    <button\n      class=\"calendar-btn switcher\"\n      type=\"button\"\n      (click)=\"currentMonth()\"\n      [attr.aria-label]=\"commonStrings.keys.datepickerCurrentMonth\"\n    >\n      <cds-icon shape=\"event\" [attr.title]=\"commonStrings.keys.datepickerCurrentMonth\"></cds-icon>\n    </button>\n    <button\n      class=\"calendar-btn switcher\"\n      type=\"button\"\n      (click)=\"nextMonth()\"\n      [attr.aria-label]=\"commonStrings.keys.datepickerNextMonth\"\n    >\n      <cds-icon shape=\"angle\" direction=\"right\" [attr.title]=\"commonStrings.keys.datepickerNextMonth\"></cds-icon>\n    </button>\n  </div>\n</div>\n<clr-calendar></clr-calendar>\n<div class=\"clr-sr-only\">{{commonStrings.keys.modalContentEnd}}</div>\n", components: [{ type: ClrCalendar, selector: "clr-calendar" }], directives: [{ type: CdsIconCustomTag, selector: "cds-icon" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrDaypicker, decorators: [{
             type: Component,
-            args: [{ selector: 'clr-daypicker', host: { '[class.daypicker]': 'true' }, template: "<div class=\"clr-sr-only\">{{commonStrings.keys.modalContentStart}}</div>\n<div class=\"calendar-header\">\n  <div class=\"calendar-pickers\">\n    <button\n      class=\"calendar-btn monthpicker-trigger\"\n      type=\"button\"\n      (click)=\"changeToMonthView()\"\n      [attr.aria-label]=\"monthAttrString\"\n      [attr.title]=\"monthAttrString\"\n    >\n      {{calendarMonth}}\n    </button>\n    <button\n      class=\"calendar-btn yearpicker-trigger\"\n      type=\"button\"\n      (click)=\"changeToYearView()\"\n      [attr.aria-label]=\"yearAttrString\"\n      [attr.title]=\"yearAttrString\"\n    >\n      {{calendarYear}}\n    </button>\n  </div>\n  <div class=\"calendar-switchers\">\n    <button\n      class=\"calendar-btn switcher\"\n      type=\"button\"\n      (click)=\"previousMonth()\"\n      [attr.aria-label]=\"commonStrings.keys.datepickerPreviousMonth\"\n    >\n      <cds-icon shape=\"angle\" direction=\"left\" [attr.title]=\"commonStrings.keys.datepickerPreviousMonth\"></cds-icon>\n    </button>\n    <button\n      class=\"calendar-btn switcher\"\n      type=\"button\"\n      (click)=\"currentMonth()\"\n      [attr.aria-label]=\"commonStrings.keys.datepickerCurrentMonth\"\n    >\n      <cds-icon shape=\"event\" [attr.title]=\"commonStrings.keys.datepickerCurrentMonth\"></cds-icon>\n    </button>\n    <button\n      class=\"calendar-btn switcher\"\n      type=\"button\"\n      (click)=\"nextMonth()\"\n      [attr.aria-label]=\"commonStrings.keys.datepickerNextMonth\"\n    >\n      <cds-icon shape=\"angle\" direction=\"right\"></cds-icon>\n    </button>\n  </div>\n</div>\n<clr-calendar></clr-calendar>\n<div class=\"clr-sr-only\">{{commonStrings.keys.modalContentEnd}}</div>\n" }]
+            args: [{ selector: 'clr-daypicker', host: { '[class.daypicker]': 'true' }, template: "<div class=\"clr-sr-only\">{{commonStrings.keys.modalContentStart}}</div>\n<div class=\"calendar-header\">\n  <div class=\"calendar-pickers\">\n    <button\n      class=\"calendar-btn monthpicker-trigger\"\n      type=\"button\"\n      (click)=\"changeToMonthView()\"\n      [attr.aria-label]=\"monthAttrString\"\n      [attr.title]=\"monthAttrString\"\n    >\n      {{calendarMonth}}\n    </button>\n    <button\n      class=\"calendar-btn yearpicker-trigger\"\n      type=\"button\"\n      (click)=\"changeToYearView()\"\n      [attr.aria-label]=\"yearAttrString\"\n      [attr.title]=\"yearAttrString\"\n    >\n      {{calendarYear}}\n    </button>\n  </div>\n  <div class=\"calendar-switchers\">\n    <button\n      class=\"calendar-btn switcher\"\n      type=\"button\"\n      (click)=\"previousMonth()\"\n      [attr.aria-label]=\"commonStrings.keys.datepickerPreviousMonth\"\n    >\n      <cds-icon shape=\"angle\" direction=\"left\" [attr.title]=\"commonStrings.keys.datepickerPreviousMonth\"></cds-icon>\n    </button>\n    <button\n      class=\"calendar-btn switcher\"\n      type=\"button\"\n      (click)=\"currentMonth()\"\n      [attr.aria-label]=\"commonStrings.keys.datepickerCurrentMonth\"\n    >\n      <cds-icon shape=\"event\" [attr.title]=\"commonStrings.keys.datepickerCurrentMonth\"></cds-icon>\n    </button>\n    <button\n      class=\"calendar-btn switcher\"\n      type=\"button\"\n      (click)=\"nextMonth()\"\n      [attr.aria-label]=\"commonStrings.keys.datepickerNextMonth\"\n    >\n      <cds-icon shape=\"angle\" direction=\"right\" [attr.title]=\"commonStrings.keys.datepickerNextMonth\"></cds-icon>\n    </button>\n  </div>\n</div>\n<clr-calendar></clr-calendar>\n<div class=\"clr-sr-only\">{{commonStrings.keys.modalContentEnd}}</div>\n" }]
         }], ctorParameters: function () { return [{ type: ViewManagerService }, { type: DateNavigationService }, { type: LocaleHelperService }, { type: ClrCommonStringsService }]; } });
 
 /*
@@ -13840,8 +13840,10 @@ class Items {
         this.loading = false;
         /**
          * Tracking function to identify objects. Default is reference equality.
+         *
+         * @deprecated in v15 and scheduled for removal in v17 (CDE-71)
          */
-        this.trackBy = (_index, item) => item;
+        this.iteratorTrackBy = (_index, item) => item;
         /**
          * Whether we should use smart items for this datagrid or let the user handle
          * everything.
@@ -13915,6 +13917,22 @@ class Items {
             this._filterItems();
         }
     }
+    canTrackBy() {
+        // all items are needed unless `datagridTrackBy` is set because `iteratorTrackBy` requires the item's index
+        return !!this.datagridTrackBy || Array.isArray(this.all);
+    }
+    trackBy(item, index) {
+        if (this.datagridTrackBy) {
+            return this.datagridTrackBy(item);
+        }
+        else if (Array.isArray(this.all)) {
+            index = index ?? this.all.indexOf(item);
+            return this.iteratorTrackBy(index, item);
+        }
+        else {
+            throw new Error('improper call to Items#trackBy');
+        }
+    }
     get displayed() {
         // Ideally we could return an immutable array, but we don't have it in Clarity yet.
         return this._displayed;
@@ -14014,7 +14032,7 @@ class ClrDatagridItems {
         this._rawItems = items ? items : []; // local copy for ngOnChange diffing
     }
     set trackBy(value) {
-        this.items.trackBy = value;
+        this.items.iteratorTrackBy = value;
         this.iterableProxy.ngForTrackBy = value;
     }
     /**
@@ -14532,17 +14550,15 @@ class Selection {
                 }
                 case SelectionType.Single: {
                     let newSingle;
-                    const trackBy = this._items.trackBy;
                     let selectionUpdated = false;
                     // if the currentSingle has been set before data was loaded, we look up and save the ref from current data set
                     if (this.currentSingle && !this.prevSingleSelectionRef) {
-                        if (this._items.all && this._items.trackBy) {
-                            const lookup = this._items.all.findIndex(maybe => maybe === this.currentSingle);
-                            this.prevSingleSelectionRef = this._items.trackBy(lookup, this.currentSingle);
+                        if (this._items.canTrackBy()) {
+                            this.prevSingleSelectionRef = this._items.trackBy(this.currentSingle);
                         }
                     }
                     updatedItems.forEach((item, index) => {
-                        const ref = trackBy(index, item);
+                        const ref = this._items.trackBy(item, index);
                         // If one of the updated items is the previously selectedSingle, set it as the new one
                         if (this.prevSingleSelectionRef === ref) {
                             newSingle = item;
@@ -14572,15 +14588,13 @@ class Selection {
                 }
                 case SelectionType.Multi: {
                     let leftOver = this.current.slice();
-                    const trackBy = this._items.trackBy;
                     let selectionUpdated = false;
                     // if the current has been set before data was loaded, we look up and save the ref from current data set
                     if (this.current.length > 0 && this.prevSelectionRefs.length !== this.current.length) {
-                        if (this._items.all && this._items.trackBy) {
+                        if (this._items.canTrackBy()) {
                             this.prevSelectionRefs = [];
                             this.current.forEach(item => {
-                                const lookup = this._items.all.findIndex(maybe => maybe === item);
-                                this.prevSelectionRefs.push(this._items.trackBy(lookup, item));
+                                this.prevSelectionRefs.push(this._items.trackBy(item));
                             });
                         }
                     }
@@ -14590,7 +14604,7 @@ class Selection {
                     //
                     // The both loops below that goes over updatedItems could be combined into one.
                     updatedItems.forEach((item, index) => {
-                        const ref = trackBy(index, item);
+                        const ref = this._items.trackBy(item, index);
                         if (this.lockedRefs.indexOf(ref) > -1) {
                             updateLockedRef.push(ref);
                         }
@@ -14600,7 +14614,7 @@ class Selection {
                     // the if statement below results in broken behavior.
                     if (leftOver.length > 0) {
                         updatedItems.forEach((item, index) => {
-                            const ref = trackBy(index, item);
+                            const ref = this._items.trackBy(item, index);
                             // Look in current selected refs array if item is selected, and update actual value
                             const selectedIndex = this.prevSelectionRefs.indexOf(ref);
                             if (selectedIndex > -1) {
@@ -14676,9 +14690,8 @@ class Selection {
             return;
         }
         this._currentSingle = value;
-        if (this._items.all && this._items.trackBy && value) {
-            const lookup = this._items.all.findIndex(maybe => maybe === value);
-            this.prevSingleSelectionRef = this._items.trackBy(lookup, value);
+        if (this._items.canTrackBy() && value) {
+            this.prevSingleSelectionRef = this._items.trackBy(value);
         }
         this.emitChange();
     }
@@ -14723,10 +14736,9 @@ class Selection {
      */
     selectItem(item) {
         this.current = this.current.concat(item);
-        if (this._items.trackBy && this._items.all) {
+        if (this._items.canTrackBy()) {
             // Push selected ref onto array
-            const lookup = this._items.all.findIndex(maybe => maybe === item);
-            this.prevSelectionRefs.push(this._items.trackBy(lookup, item));
+            this.prevSelectionRefs.push(this._items.trackBy(item));
         }
     }
     /**
@@ -14734,7 +14746,7 @@ class Selection {
      */
     deselectItem(indexOfItem) {
         this.current = this.current.slice(0, indexOfItem).concat(this.current.slice(indexOfItem + 1));
-        if (this._items.trackBy && indexOfItem < this.prevSelectionRefs.length) {
+        if (indexOfItem < this.prevSelectionRefs.length) {
             // Keep selected refs array in sync
             const removedItems = this.prevSelectionRefs.splice(indexOfItem, 1);
             // locked reference is no longer needed (if any)
@@ -14784,21 +14796,16 @@ class Selection {
     }
     /**
      * Make sure that it could be locked
-     *
-     * @remark
-     * Check also is items.all an array, if not there is no nothing to lock or compare to
-     *
      */
     canItBeLocked() {
-        // We depend on the trackBy and all so there are part of the requirement of is item could be locked
-        return this._selectionType !== SelectionType.None && Array.isArray(this._items.all);
+        return this._selectionType !== SelectionType.None && this._items.canTrackBy();
     }
     /**
      * Lock and unlock item
      */
     lockItem(item, lock) {
         if (this.canItBeLocked()) {
-            const ref = this._items.trackBy(this._items.all.findIndex(maybe => maybe === item), item);
+            const ref = this._items.trackBy(item);
             if (lock === true) {
                 // Add to lockedRef
                 this.lockedRefs.push(ref);
@@ -14818,7 +14825,7 @@ class Selection {
          * into the array when there is no need for that.
          */
         if (this.canItBeLocked()) {
-            const ref = this._items.trackBy(this._items.all.findIndex(maybe => maybe === item), item);
+            const ref = this._items.trackBy(item);
             return this.lockedRefs.indexOf(ref) > -1;
         }
         return false;
@@ -14943,6 +14950,8 @@ class ClrDatagridRow {
         this.SELECTION_TYPE = SelectionType;
         this.expandAnimationTrigger = false;
         this._selected = false;
+        // By default, every item is selectable; it becomes not selectable only if it's explicitly set to false
+        this._selectable = true;
         this.selectedChanged = new EventEmitter(false);
         this.expandedChange = new EventEmitter(false);
         this._detailOpenLabel = '';
@@ -14969,6 +14978,16 @@ class ClrDatagridRow {
             }
         }));
     }
+    /**
+     * Model of the row, to use for selection
+     */
+    set item(item) {
+        this._item = item;
+        this.clrDgSelectable = this._selectable;
+    }
+    get item() {
+        return this._item;
+    }
     /**
      * The default behavior in Chrome and Firefox for shift-clicking on a label is to perform text-selection.
      * This prevents our intended range-selection, because this text-selection overrides our shift-click event.
@@ -15012,9 +15031,12 @@ class ClrDatagridRow {
             this.selection.setSelected(this.item, value);
         }
     }
-    // By default every item is selectable; it becomes not selectable only if it's explicitly set to false
     set clrDgSelectable(value) {
-        this.selection.lockItem(this.item, value === false);
+        if (this.item) {
+            this.selection.lockItem(this.item, value === 'false' || value === false);
+        }
+        // Store this value locally, to be initialized when item is initialized
+        this._selectable = value;
     }
     get clrDgSelectable() {
         return !this.selection.isLocked(this.item);
@@ -15590,6 +15612,9 @@ class ClrDatagrid {
     set rowSelectionMode(value) {
         this.selection.rowSelectionMode = value;
     }
+    set trackBy(value) {
+        this.items.datagridTrackBy = value;
+    }
     /**
      * Indicates if all currently displayed items are selected
      */
@@ -15628,9 +15653,9 @@ class ClrDatagrid {
             });
             // Try to update only when there is something cached and its open.
             if (this.detailService.state && this.detailService.isOpen) {
-                const row = this.rows.find((row, index) => {
-                    return this.items.trackBy(index, row.item) === this.items.trackBy(index, this.detailService.state);
-                });
+                const row = this.items.canTrackBy()
+                    ? this.rows.find(row => this.items.trackBy(row.item) === this.items.trackBy(this.detailService.state))
+                    : undefined;
                 /**
                  * Reopen updated row or close it
                  */
@@ -15723,7 +15748,7 @@ class ClrDatagrid {
     }
 }
 ClrDatagrid.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrDatagrid, deps: [{ token: DatagridRenderOrganizer }, { token: Items }, { token: ExpandableRowsCount }, { token: Selection }, { token: RowActionService }, { token: StateProvider }, { token: DisplayModeService }, { token: i0.Renderer2 }, { token: DetailService }, { token: DOCUMENT }, { token: i0.ElementRef }, { token: Page }, { token: ClrCommonStringsService }, { token: ColumnsService }, { token: KeyNavigationGridController }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-ClrDatagrid.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ClrDatagrid, selector: "clr-datagrid", inputs: { loading: ["clrDgLoading", "loading"], selected: ["clrDgSelected", "selected"], singleSelected: ["clrDgSingleSelected", "singleSelected"], clrDgSingleSelectionAriaLabel: "clrDgSingleSelectionAriaLabel", clrDgSingleActionableAriaLabel: "clrDgSingleActionableAriaLabel", clrDetailExpandableAriaLabel: "clrDetailExpandableAriaLabel", clrDgDisablePageFocus: "clrDgDisablePageFocus", clrDgPreserveSelection: "clrDgPreserveSelection", rowSelectionMode: ["clrDgRowSelection", "rowSelectionMode"] }, outputs: { refresh: "clrDgRefresh", selectedChanged: "clrDgSelectedChange", singleSelectedChanged: "clrDgSingleSelectedChange" }, host: { properties: { "class.datagrid-host": "true", "class.datagrid-detail-open": "detailService.isOpen" } }, providers: [
+ClrDatagrid.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ClrDatagrid, selector: "clr-datagrid", inputs: { loading: ["clrDgLoading", "loading"], selected: ["clrDgSelected", "selected"], singleSelected: ["clrDgSingleSelected", "singleSelected"], clrDgSingleSelectionAriaLabel: "clrDgSingleSelectionAriaLabel", clrDgSingleActionableAriaLabel: "clrDgSingleActionableAriaLabel", clrDetailExpandableAriaLabel: "clrDetailExpandableAriaLabel", clrDgDisablePageFocus: "clrDgDisablePageFocus", clrDgPreserveSelection: "clrDgPreserveSelection", rowSelectionMode: ["clrDgRowSelection", "rowSelectionMode"], trackBy: ["clrDgItemsTrackBy", "trackBy"] }, outputs: { refresh: "clrDgRefresh", selectedChanged: "clrDgSelectedChange", singleSelectedChanged: "clrDgSingleSelectedChange" }, host: { properties: { "class.datagrid-host": "true", "class.datagrid-detail-open": "detailService.isOpen" } }, providers: [
         Selection,
         Sort,
         FiltersProvider,
@@ -15799,6 +15824,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], rowSelectionMode: [{
                 type: Input,
                 args: ['clrDgRowSelection']
+            }], trackBy: [{
+                type: Input,
+                args: ['clrDgItemsTrackBy']
             }], placeholder: [{
                 type: ContentChild,
                 args: [ClrDatagridPlaceholder]
@@ -16074,6 +16102,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 }]
         }] });
 
+/*
+ * Copyright (c) 2016-2023 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.
+ */
+const columnToggleTrackByFn = index => index;
+
 /*
  * Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.
  * This software is released under MIT license.
@@ -16084,8 +16119,18 @@ class ClrDatagridItemsTrackBy {
         this._items = _items;
     }
     set trackBy(value) {
+        /**
+         * This is a workaround to prevent the items `trackBy` function from
+         * being replaced when the "manage columns" button is clicked. This is
+         * not a complete solution. If there is another `ngForTrackBy` function
+         * within the datagrid in application code, it could sill replace the
+         * items `trackBy` function whether it is the row iterator or not.
+         */
+        if (value === columnToggleTrackByFn) {
+            return;
+        }
         if (this._items) {
-            this._items.trackBy = value;
+            this._items.iteratorTrackBy = value;
         }
     }
 }
@@ -16123,7 +16168,7 @@ class ClrDatagridColumnToggle {
         };
         // Without tracking the checkboxes get rerendered on model update, which leads
         // to loss of focus after checkbox toggle.
-        this.trackByFn = index => index;
+        this.trackByFn = columnToggleTrackByFn;
         this.subscription = popoverToggleService.openChange.subscribe(change => (this.openState = change));
     }
     get allColumnsVisible() {