@clr/angular 13.9.1 → 13.10.0

package/fesm2020/clr-angular.mjs

@@ -304,8 +304,8 @@ const commonStringsDefault = {
     singleSelectionAriaLabel: 'Single selection header',
     singleActionableAriaLabel: 'Single actionable header',
     detailExpandableAriaLabel: 'Toggle more row content',
-    datagridFilterAriaLabel: 'Filter dialog',
-    datagridFilterDialogAriaLabel: 'Toggle column filter',
+    datagridFilterAriaLabel: 'Toggle {COLUMN} filter',
+    datagridFilterDialogAriaLabel: 'Filter dialog',
     columnSeparatorAriaLabel: 'Column resize handle',
     columnSeparatorDescription: 'Use left or right key to resize the column',
     // Alert
@@ -11977,11 +11977,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * since it can be anything (not just a text input).
  */
 class ClrDatagridFilter extends DatagridFilterRegistrar {
-    constructor(_filters, commonStrings, smartToggleService, platformId) {
+    constructor(_filters, commonStrings, smartToggleService, platformId, elementRef) {
         super(_filters);
         this.commonStrings = commonStrings;
         this.smartToggleService = smartToggleService;
         this.platformId = platformId;
+        this.elementRef = elementRef;
         this.subs = [];
         this.ariaExpanded = false;
         this.popoverId = uniqueIdFactory();
@@ -12023,18 +12024,33 @@ class ClrDatagridFilter extends DatagridFilterRegistrar {
     get active() {
         return !!this.filter && this.filter.isActive();
     }
+    ngOnChanges() {
+        this.setToggleButtonAriaLabel();
+    }
     ngOnDestroy() {
         super.ngOnDestroy();
         this.subs.forEach(sub => sub.unsubscribe());
     }
+    /**
+     * This is not in a getter to prevent "expression has changed after it was checked" errors.
+     * And it's more performant this way since it only runs on change.
+     */
+    setToggleButtonAriaLabel() {
+        const columnElement = this.elementRef.nativeElement?.closest('clr-dg-column');
+        const columnTitleElement = columnElement?.querySelector('.datagrid-column-title');
+        const columnTitle = columnTitleElement?.textContent.trim().toLocaleLowerCase();
+        this.toggleButtonAriaLabel = this.commonStrings.parse(this.commonStrings.keys.datagridFilterAriaLabel, {
+            COLUMN: columnTitle || '',
+        });
+    }
 }
-ClrDatagridFilter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrDatagridFilter, deps: [{ token: FiltersProvider }, { token: ClrCommonStringsService }, { token: ClrPopoverToggleService }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
-ClrDatagridFilter.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ClrDatagridFilter, selector: "clr-dg-filter", inputs: { open: ["clrDgFilterOpen", "open"], customFilter: ["clrDgFilter", "customFilter"] }, outputs: { openChange: "clrDgFilterOpenChange" }, providers: [{ provide: CustomFilter, useExisting: ClrDatagridFilter }], viewQueries: [{ propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
+ClrDatagridFilter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrDatagridFilter, deps: [{ token: FiltersProvider }, { token: ClrCommonStringsService }, { token: ClrPopoverToggleService }, { token: PLATFORM_ID }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+ClrDatagridFilter.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ClrDatagridFilter, selector: "clr-dg-filter", inputs: { open: ["clrDgFilterOpen", "open"], customFilter: ["clrDgFilter", "customFilter"] }, outputs: { openChange: "clrDgFilterOpenChange" }, providers: [{ provide: CustomFilter, useExisting: ClrDatagridFilter }], viewQueries: [{ propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
     <button
       class="datagrid-filter-toggle"
       type="button"
       #anchor
-      [attr.aria-label]="commonStrings.keys.datagridFilterAriaLabel"
+      [attr.aria-label]="toggleButtonAriaLabel"
       [attr.aria-expanded]="ariaExpanded"
       [attr.aria-controls]="popoverId"
       clrPopoverAnchor
@@ -12077,7 +12093,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
       class="datagrid-filter-toggle"
       type="button"
       #anchor
-      [attr.aria-label]="commonStrings.keys.datagridFilterAriaLabel"
+      [attr.aria-label]="toggleButtonAriaLabel"
       [attr.aria-expanded]="ariaExpanded"
       [attr.aria-controls]="popoverId"
       clrPopoverAnchor
@@ -12113,7 +12129,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         }], ctorParameters: function () { return [{ type: FiltersProvider }, { type: ClrCommonStringsService }, { type: ClrPopoverToggleService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
-                }] }]; }, propDecorators: { anchor: [{
+                }] }, { type: i0.ElementRef }]; }, propDecorators: { anchor: [{
                 type: ViewChild,
                 args: ['anchor', { read: ElementRef }]
             }], open: [{
@@ -18713,8 +18729,8 @@ class ClrStackHeader {
 }
 ClrStackHeader.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrStackHeader, deps: [{ token: ClrStackView }], target: i0.ɵɵFactoryTarget.Component });
 ClrStackHeader.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ClrStackHeader, selector: "clr-stack-header", ngImport: i0, template: `
-    <h4 class="stack-header">
-      <span class="stack-title"><ng-content></ng-content></span>
+    <div class="stack-header">
+      <h4 class="stack-title"><ng-content></ng-content></h4>
 
       <span class="stack-actions">
         <ng-content select=".stack-action"></ng-content>
@@ -18729,15 +18745,15 @@ ClrStackHeader.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
         </button>
         <!-- End of undocumented experimental feature. -->
       </span>
-    </h4>
+    </div>
   `, isInline: true, styles: [":host{display:block}\n"], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ClrStackHeader, decorators: [{
             type: Component,
             args: [{
                     selector: 'clr-stack-header',
                     template: `
-    <h4 class="stack-header">
-      <span class="stack-title"><ng-content></ng-content></span>
+    <div class="stack-header">
+      <h4 class="stack-title"><ng-content></ng-content></h4>
 
       <span class="stack-actions">
         <ng-content select=".stack-action"></ng-content>
@@ -18752,7 +18768,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         </button>
         <!-- End of undocumented experimental feature. -->
       </span>
-    </h4>
+    </div>
   `,
                     // Custom elements are inline by default
                     styles: [
@@ -23954,8 +23970,6 @@ class ClrTooltipContent extends AbstractPopover {
     constructor(injector, parentHost, tooltipIdService) {
         super(injector, parentHost);
         this.tooltipIdService = tooltipIdService;
-        this._position = defaultPosition;
-        this._size = defaultSize;
         if (!parentHost) {
             throw new Error('clr-tooltip-content should only be used inside of a clr-tooltip');
         }
@@ -24017,6 +24031,10 @@ class ClrTooltipContent extends AbstractPopover {
         this._size = newSize;
         this.updateCssClass({ oldClass: `tooltip-${oldSize}`, newClass: `tooltip-${newSize}` });
     }
+    ngOnInit() {
+        this.size = this.size || defaultSize;
+        this.position = this.position || defaultPosition;
+    }
     updateCssClass({ oldClass, newClass }) {
         this.renderer.removeClass(this.el.nativeElement, oldClass);
         this.renderer.addClass(this.el.nativeElement, newClass);