@hermes-ui/angular 0.1.6 → 0.2.0

package/fesm2022/hermes-ui-angular-data-datagrid.mjs

@@ -11,7 +11,7 @@ import * as i1 from '@hermes-ui/angular/modal';
 import * as i10 from '@angular/common';
 import { isPlatformBrowser, NgForOf, CommonModule } from '@angular/common';
 import * as i5 from '@hermes-ui/angular/icon';
-import { ClarityIcons, ellipsisVerticalIcon, viewColumnsIcon, windowCloseIcon, arrowIcon, timesIcon, twoWayArrowsIcon, stepForward2Icon, angleDoubleIcon, filterGridCircleIcon, filterGridIcon, HermesIcon } from '@hermes-ui/angular/icon';
+import { HermesIcons, ellipsisVerticalIcon, viewColumnsIcon, windowCloseIcon, arrowIcon, timesIcon, twoWayArrowsIcon, stepForward2Icon, angleDoubleIcon, filterGridCircleIcon, filterGridIcon, HermesIcon } from '@hermes-ui/angular/icon';
 import * as i4 from '@hermes-ui/angular/forms/common';
 import { HermesControlLabel } from '@hermes-ui/angular/forms/common';
 import * as i5$1 from '@hermes-ui/angular/forms/number-input';
@@ -1273,46 +1273,46 @@ class HermesDatagridColumnSeparator {
         return event.key === Keys.ArrowRight;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesDatagridColumnSeparator, deps: [{ token: ColumnResizerService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: TableSizeService }, { token: i2.HermesCommonStringsService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.22", type: HermesDatagridColumnSeparator, isStandalone: false, selector: "hermes-dg-column-separator", host: { properties: { "class.datagrid-column-separator": "true" } }, viewQueries: [{ propertyName: "resizeTrackerRef", first: true, predicate: ["resizeTracker"], descendants: true }, { propertyName: "columnHandleRef", first: true, predicate: ["columnHandle"], descendants: true }], ngImport: i0, template: `
-    <button
-      type="button"
-      class="datagrid-column-handle"
-      [attr.aria-label]="commonString.keys.columnSeparatorAriaLabel"
-      [attr.aria-describedby]="descriptionId"
-      cdkDrag
-      cdkDragLockAxis="x"
-      (cdkDragStarted)="showTracker()"
-      (cdkDragMoved)="moveTracker($event.distance.x)"
-      (cdkDragEnded)="hideTracker(); $event.source._dragRef.reset()"
-      #columnHandle
-    ></button>
-    <span class="hermes-sr-only" [attr.id]="descriptionId">
-      {{ commonString.keys.columnSeparatorDescription }}
-    </span>
-    <div class="datagrid-column-resize-tracker" #resizeTracker></div>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.22", type: HermesDatagridColumnSeparator, isStandalone: false, selector: "hermes-dg-column-separator", host: { properties: { "class.datagrid-column-separator": "true" } }, viewQueries: [{ propertyName: "resizeTrackerRef", first: true, predicate: ["resizeTracker"], descendants: true }, { propertyName: "columnHandleRef", first: true, predicate: ["columnHandle"], descendants: true }], ngImport: i0, template: `
+    <button
+      type="button"
+      class="datagrid-column-handle"
+      [attr.aria-label]="commonString.keys.columnSeparatorAriaLabel"
+      [attr.aria-describedby]="descriptionId"
+      cdkDrag
+      cdkDragLockAxis="x"
+      (cdkDragStarted)="showTracker()"
+      (cdkDragMoved)="moveTracker($event.distance.x)"
+      (cdkDragEnded)="hideTracker(); $event.source._dragRef.reset()"
+      #columnHandle
+    ></button>
+    <span class="hermes-sr-only" [attr.id]="descriptionId">
+      {{ commonString.keys.columnSeparatorDescription }}
+    </span>
+    <div class="datagrid-column-resize-tracker" #resizeTracker></div>
   `, isInline: true, dependencies: [{ kind: "directive", type: i2.CdkDragModule_CdkDrag, selector: "[cdkDrag]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesDatagridColumnSeparator, decorators: [{
             type: Component,
             args: [{
                     selector: 'hermes-dg-column-separator',
-                    template: `
-    <button
-      type="button"
-      class="datagrid-column-handle"
-      [attr.aria-label]="commonString.keys.columnSeparatorAriaLabel"
-      [attr.aria-describedby]="descriptionId"
-      cdkDrag
-      cdkDragLockAxis="x"
-      (cdkDragStarted)="showTracker()"
-      (cdkDragMoved)="moveTracker($event.distance.x)"
-      (cdkDragEnded)="hideTracker(); $event.source._dragRef.reset()"
-      #columnHandle
-    ></button>
-    <span class="hermes-sr-only" [attr.id]="descriptionId">
-      {{ commonString.keys.columnSeparatorDescription }}
-    </span>
-    <div class="datagrid-column-resize-tracker" #resizeTracker></div>
+                    template: `
+    <button
+      type="button"
+      class="datagrid-column-handle"
+      [attr.aria-label]="commonString.keys.columnSeparatorAriaLabel"
+      [attr.aria-describedby]="descriptionId"
+      cdkDrag
+      cdkDragLockAxis="x"
+      (cdkDragStarted)="showTracker()"
+      (cdkDragMoved)="moveTracker($event.distance.x)"
+      (cdkDragEnded)="hideTracker(); $event.source._dragRef.reset()"
+      #columnHandle
+    ></button>
+    <span class="hermes-sr-only" [attr.id]="descriptionId">
+      {{ commonString.keys.columnSeparatorDescription }}
+    </span>
+    <div class="datagrid-column-resize-tracker" #resizeTracker></div>
   `,
                     host: {
                         '[class.datagrid-column-separator]': 'true',
@@ -2075,41 +2075,41 @@ class HermesDatagridFilter extends DatagridFilterRegistrar {
         this.subs.forEach(sub => sub.unsubscribe());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesDatagridFilter, deps: [{ token: FiltersProvider }, { token: i2.HermesCommonStringsService }, { token: i3.HermesPopoverService }, { token: KeyNavigationGridController, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.22", type: HermesDatagridFilter, isStandalone: false, selector: "hermes-dg-filter", inputs: { open: ["hermesDgFilterOpen", "open", booleanAttribute], customFilter: ["hermesDgFilter", "customFilter"] }, outputs: { openChange: "hermesDgFilterOpenChange" }, providers: [{ provide: CustomFilter, useExisting: HermesDatagridFilter }], viewQueries: [{ propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
-    <button
-      class="datagrid-filter-toggle"
-      type="button"
-      #anchor
-      [attr.aria-expanded]="ariaExpanded"
-      [attr.aria-controls]="popoverId"
-      hermesPopoverOrigin
-      hermesPopoverOpenCloseButton
-      [class.datagrid-filter-open]="open"
-      [class.datagrid-filtered]="active"
-    >
-      <hermes-icon
-        [status]="active ? 'info' : null"
-        [shape]="active ? 'filter-grid-circle' : 'filter-grid'"
-        solid
-      ></hermes-icon>
-    </button>
-
-    <div
-      class="datagrid-filter"
-      [id]="popoverId"
-      cdkTrapFocus
-      *hermesPopoverContent="open; at: popoverPosition; type: popoverType; outsideClickToClose: true; scrollToClose: false"
-      role="dialog"
-      [attr.aria-label]="commonStrings.keys.datagridFilterDialogAriaLabel"
-    >
-      <div class="datagrid-filter-close-wrapper">
-        <button type="button" class="close" hermesPopoverCloseButton>
-          <hermes-icon shape="window-close" [attr.title]="commonStrings.keys.close"></hermes-icon>
-        </button>
-      </div>
-
-      <ng-content></ng-content>
-    </div>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.22", type: HermesDatagridFilter, isStandalone: false, selector: "hermes-dg-filter", inputs: { open: ["hermesDgFilterOpen", "open", booleanAttribute], customFilter: ["hermesDgFilter", "customFilter"] }, outputs: { openChange: "hermesDgFilterOpenChange" }, providers: [{ provide: CustomFilter, useExisting: HermesDatagridFilter }], viewQueries: [{ propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
+    <button
+      class="datagrid-filter-toggle"
+      type="button"
+      #anchor
+      [attr.aria-expanded]="ariaExpanded"
+      [attr.aria-controls]="popoverId"
+      hermesPopoverOrigin
+      hermesPopoverOpenCloseButton
+      [class.datagrid-filter-open]="open"
+      [class.datagrid-filtered]="active"
+    >
+      <hermes-icon
+        [status]="active ? 'info' : null"
+        [shape]="active ? 'filter-grid-circle' : 'filter-grid'"
+        solid
+      ></hermes-icon>
+    </button>
+
+    <div
+      class="datagrid-filter"
+      [id]="popoverId"
+      cdkTrapFocus
+      *hermesPopoverContent="open; at: popoverPosition; type: popoverType; outsideClickToClose: true; scrollToClose: false"
+      role="dialog"
+      [attr.aria-label]="commonStrings.keys.datagridFilterDialogAriaLabel"
+    >
+      <div class="datagrid-filter-close-wrapper">
+        <button type="button" class="close" hermesPopoverCloseButton>
+          <hermes-icon shape="window-close" [attr.title]="commonStrings.keys.close"></hermes-icon>
+        </button>
+      </div>
+
+      <ng-content></ng-content>
+    </div>
   `, isInline: true, dependencies: [{ kind: "directive", type: i2.CdkTrapFocusModule_CdkTrapFocus, selector: "[cdkTrapFocus]" }, { kind: "component", type: i5.HermesIcon, selector: "hermes-icon, hermes-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i3.HermesPopoverOrigin, selector: "[hermesPopoverOrigin]" }, { kind: "directive", type: i3.HermesPopoverCloseButton, selector: "[hermesPopoverCloseButton]", outputs: ["hermesPopoverOnCloseChange"] }, { kind: "directive", type: i3.HermesPopoverOpenCloseButton, selector: "[hermesPopoverOpenCloseButton]", outputs: ["hermesPopoverOpenCloseChange"] }, { kind: "directive", type: i3.HermesPopoverContent, selector: "[hermesPopoverContent]", inputs: ["hermesPopoverContent", "hermesPopoverContentAt", "hermesPopoverContentAvailablePositions", "hermesPopoverContentType", "hermesPopoverContentOutsideClickToClose", "hermesPopoverContentScrollToClose", "hermesPopoverContentOrigin"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesDatagridFilter, decorators: [{
@@ -2118,41 +2118,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                     selector: 'hermes-dg-filter',
                     // We register this component as a CustomFilter, for the parent column to detect it.
                     providers: [{ provide: CustomFilter, useExisting: HermesDatagridFilter }],
-                    template: `
-    <button
-      class="datagrid-filter-toggle"
-      type="button"
-      #anchor
-      [attr.aria-expanded]="ariaExpanded"
-      [attr.aria-controls]="popoverId"
-      hermesPopoverOrigin
-      hermesPopoverOpenCloseButton
-      [class.datagrid-filter-open]="open"
-      [class.datagrid-filtered]="active"
-    >
-      <hermes-icon
-        [status]="active ? 'info' : null"
-        [shape]="active ? 'filter-grid-circle' : 'filter-grid'"
-        solid
-      ></hermes-icon>
-    </button>
-
-    <div
-      class="datagrid-filter"
-      [id]="popoverId"
-      cdkTrapFocus
-      *hermesPopoverContent="open; at: popoverPosition; type: popoverType; outsideClickToClose: true; scrollToClose: false"
-      role="dialog"
-      [attr.aria-label]="commonStrings.keys.datagridFilterDialogAriaLabel"
-    >
-      <div class="datagrid-filter-close-wrapper">
-        <button type="button" class="close" hermesPopoverCloseButton>
-          <hermes-icon shape="window-close" [attr.title]="commonStrings.keys.close"></hermes-icon>
-        </button>
-      </div>
-
-      <ng-content></ng-content>
-    </div>
+                    template: `
+    <button
+      class="datagrid-filter-toggle"
+      type="button"
+      #anchor
+      [attr.aria-expanded]="ariaExpanded"
+      [attr.aria-controls]="popoverId"
+      hermesPopoverOrigin
+      hermesPopoverOpenCloseButton
+      [class.datagrid-filter-open]="open"
+      [class.datagrid-filtered]="active"
+    >
+      <hermes-icon
+        [status]="active ? 'info' : null"
+        [shape]="active ? 'filter-grid-circle' : 'filter-grid'"
+        solid
+      ></hermes-icon>
+    </button>
+
+    <div
+      class="datagrid-filter"
+      [id]="popoverId"
+      cdkTrapFocus
+      *hermesPopoverContent="open; at: popoverPosition; type: popoverType; outsideClickToClose: true; scrollToClose: false"
+      role="dialog"
+      [attr.aria-label]="commonStrings.keys.datagridFilterDialogAriaLabel"
+    >
+      <div class="datagrid-filter-close-wrapper">
+        <button type="button" class="close" hermesPopoverCloseButton>
+          <hermes-icon shape="window-close" [attr.title]="commonStrings.keys.close"></hermes-icon>
+        </button>
+      </div>
+
+      <ng-content></ng-content>
+    </div>
   `,
                     standalone: false,
                 }]
@@ -2311,39 +2311,39 @@ class DatagridNumericFilter extends DatagridFilterRegistrar {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DatagridNumericFilter, deps: [{ token: FiltersProvider }, { token: i2.DomAdapter }, { token: i2.HermesCommonStringsService }, { token: i3.HermesPopoverService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.22", type: DatagridNumericFilter, isStandalone: false, selector: "hermes-dg-numeric-filter", inputs: { minPlaceholder: ["hermesFilterMinPlaceholder", "minPlaceholder"], maxPlaceholder: ["hermesFilterMaxPlaceholder", "maxPlaceholder"], fromLabel: ["hermesFilterFromLabel", "fromLabel"], toLabel: ["hermesFilterToLabel", "toLabel"], value: ["hermesFilterValue", "value"], customNumericFilter: ["hermesDgNumericFilter", "customNumericFilter"] }, outputs: { filterValueChange: "hermesFilterValueChange" }, providers: [{ provide: CustomFilter, useExisting: DatagridNumericFilter }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input_low"], descendants: true }, { propertyName: "filterContainer", first: true, predicate: HermesDatagridFilter, descendants: true }], usesInheritance: true, ngImport: i0, template: `
-    <hermes-dg-filter [hermesDgFilter]="registered" [(hermesDgFilterOpen)]="open">
-      <div class="datagrid-numeric-filter-form">
-        <hermes-number-input-container>
-          <label class="hermes-control-label">{{ fromLabelValue }}</label>
-          <input
-            hermesNumberInput
-            class="datagrid-numeric-filter-input"
-            #input_low
-            type="number"
-            autocomplete="off"
-            name="low"
-            [(ngModel)]="low"
-            [placeholder]="minPlaceholderValue"
-            [attr.aria-label]="minPlaceholderValue"
-          />
-        </hermes-number-input-container>
-        <hermes-number-input-container>
-          <label class="hermes-control-label">{{ toLabelValue }}</label>
-          <input
-            hermesNumberInput
-            class="datagrid-numeric-filter-input"
-            #input_high
-            type="number"
-            autocomplete="off"
-            name="high"
-            [(ngModel)]="high"
-            [placeholder]="maxPlaceholderValue"
-            [attr.aria-label]="maxPlaceholderValue"
-          />
-        </hermes-number-input-container>
-      </div>
-    </hermes-dg-filter>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.22", type: DatagridNumericFilter, isStandalone: false, selector: "hermes-dg-numeric-filter", inputs: { minPlaceholder: ["hermesFilterMinPlaceholder", "minPlaceholder"], maxPlaceholder: ["hermesFilterMaxPlaceholder", "maxPlaceholder"], fromLabel: ["hermesFilterFromLabel", "fromLabel"], toLabel: ["hermesFilterToLabel", "toLabel"], value: ["hermesFilterValue", "value"], customNumericFilter: ["hermesDgNumericFilter", "customNumericFilter"] }, outputs: { filterValueChange: "hermesFilterValueChange" }, providers: [{ provide: CustomFilter, useExisting: DatagridNumericFilter }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input_low"], descendants: true }, { propertyName: "filterContainer", first: true, predicate: HermesDatagridFilter, descendants: true }], usesInheritance: true, ngImport: i0, template: `
+    <hermes-dg-filter [hermesDgFilter]="registered" [(hermesDgFilterOpen)]="open">
+      <div class="datagrid-numeric-filter-form">
+        <hermes-number-input-container>
+          <label class="hermes-control-label">{{ fromLabelValue }}</label>
+          <input
+            hermesNumberInput
+            class="datagrid-numeric-filter-input"
+            #input_low
+            type="number"
+            autocomplete="off"
+            name="low"
+            [(ngModel)]="low"
+            [placeholder]="minPlaceholderValue"
+            [attr.aria-label]="minPlaceholderValue"
+          />
+        </hermes-number-input-container>
+        <hermes-number-input-container>
+          <label class="hermes-control-label">{{ toLabelValue }}</label>
+          <input
+            hermesNumberInput
+            class="datagrid-numeric-filter-input"
+            #input_high
+            type="number"
+            autocomplete="off"
+            name="high"
+            [(ngModel)]="high"
+            [placeholder]="maxPlaceholderValue"
+            [attr.aria-label]="maxPlaceholderValue"
+          />
+        </hermes-number-input-container>
+      </div>
+    </hermes-dg-filter>
   `, isInline: true, dependencies: [{ kind: "directive", type: i4.HermesControlLabel, selector: "label", inputs: ["id", "for"] }, { kind: "directive", type: i5$1.HermesNumberInput, selector: "input[type=\"number\"][hermesNumberInput]" }, { kind: "component", type: i5$1.HermesNumberInputContainer, selector: "hermes-number-input-container" }, { kind: "directive", type: i14.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i14.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i14.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i14.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HermesDatagridFilter, selector: "hermes-dg-filter", inputs: ["hermesDgFilterOpen", "hermesDgFilter"], outputs: ["hermesDgFilterOpenChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DatagridNumericFilter, decorators: [{
@@ -2351,39 +2351,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
             args: [{
                     selector: 'hermes-dg-numeric-filter',
                     providers: [{ provide: CustomFilter, useExisting: DatagridNumericFilter }],
-                    template: `
-    <hermes-dg-filter [hermesDgFilter]="registered" [(hermesDgFilterOpen)]="open">
-      <div class="datagrid-numeric-filter-form">
-        <hermes-number-input-container>
-          <label class="hermes-control-label">{{ fromLabelValue }}</label>
-          <input
-            hermesNumberInput
-            class="datagrid-numeric-filter-input"
-            #input_low
-            type="number"
-            autocomplete="off"
-            name="low"
-            [(ngModel)]="low"
-            [placeholder]="minPlaceholderValue"
-            [attr.aria-label]="minPlaceholderValue"
-          />
-        </hermes-number-input-container>
-        <hermes-number-input-container>
-          <label class="hermes-control-label">{{ toLabelValue }}</label>
-          <input
-            hermesNumberInput
-            class="datagrid-numeric-filter-input"
-            #input_high
-            type="number"
-            autocomplete="off"
-            name="high"
-            [(ngModel)]="high"
-            [placeholder]="maxPlaceholderValue"
-            [attr.aria-label]="maxPlaceholderValue"
-          />
-        </hermes-number-input-container>
-      </div>
-    </hermes-dg-filter>
+                    template: `
+    <hermes-dg-filter [hermesDgFilter]="registered" [(hermesDgFilterOpen)]="open">
+      <div class="datagrid-numeric-filter-form">
+        <hermes-number-input-container>
+          <label class="hermes-control-label">{{ fromLabelValue }}</label>
+          <input
+            hermesNumberInput
+            class="datagrid-numeric-filter-input"
+            #input_low
+            type="number"
+            autocomplete="off"
+            name="low"
+            [(ngModel)]="low"
+            [placeholder]="minPlaceholderValue"
+            [attr.aria-label]="minPlaceholderValue"
+          />
+        </hermes-number-input-container>
+        <hermes-number-input-container>
+          <label class="hermes-control-label">{{ toLabelValue }}</label>
+          <input
+            hermesNumberInput
+            class="datagrid-numeric-filter-input"
+            #input_high
+            type="number"
+            autocomplete="off"
+            name="high"
+            [(ngModel)]="high"
+            [placeholder]="maxPlaceholderValue"
+            [attr.aria-label]="maxPlaceholderValue"
+          />
+        </hermes-number-input-container>
+      </div>
+    </hermes-dg-filter>
   `,
                     standalone: false,
                 }]
@@ -2521,22 +2521,22 @@ class DatagridStringFilter extends DatagridFilterRegistrar {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DatagridStringFilter, deps: [{ token: FiltersProvider }, { token: i2.DomAdapter }, { token: i2.HermesCommonStringsService }, { token: i3.HermesPopoverService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.22", type: DatagridStringFilter, isStandalone: false, selector: "hermes-dg-string-filter", inputs: { placeholder: ["hermesFilterPlaceholder", "placeholder"], label: ["hermesFilterLabel", "label"], customStringFilter: ["hermesDgStringFilter", "customStringFilter"], value: ["hermesFilterValue", "value"] }, outputs: { filterValueChange: "hermesFilterValueChange" }, providers: [{ provide: CustomFilter, useExisting: DatagridStringFilter }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "filterContainer", first: true, predicate: HermesDatagridFilter, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
-    <hermes-dg-filter [hermesDgFilter]="registered" [(hermesDgFilterOpen)]="open">
-      <hermes-input-container>
-        <label>{{ labelValue }}</label>
-        <input
-          #input
-          type="text"
-          autocomplete="off"
-          name="search"
-          [(ngModel)]="value"
-          hermesInput
-          [attr.aria-label]="placeholderValue"
-          [placeholder]="placeholderValue"
-        />
-      </hermes-input-container>
-    </hermes-dg-filter>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.22", type: DatagridStringFilter, isStandalone: false, selector: "hermes-dg-string-filter", inputs: { placeholder: ["hermesFilterPlaceholder", "placeholder"], label: ["hermesFilterLabel", "label"], customStringFilter: ["hermesDgStringFilter", "customStringFilter"], value: ["hermesFilterValue", "value"] }, outputs: { filterValueChange: "hermesFilterValueChange" }, providers: [{ provide: CustomFilter, useExisting: DatagridStringFilter }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "filterContainer", first: true, predicate: HermesDatagridFilter, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+    <hermes-dg-filter [hermesDgFilter]="registered" [(hermesDgFilterOpen)]="open">
+      <hermes-input-container>
+        <label>{{ labelValue }}</label>
+        <input
+          #input
+          type="text"
+          autocomplete="off"
+          name="search"
+          [(ngModel)]="value"
+          hermesInput
+          [attr.aria-label]="placeholderValue"
+          [placeholder]="placeholderValue"
+        />
+      </hermes-input-container>
+    </hermes-dg-filter>
   `, isInline: true, dependencies: [{ kind: "directive", type: i4.HermesControlLabel, selector: "label", inputs: ["id", "for"] }, { kind: "directive", type: i5$2.HermesInput, selector: "[hermesInput]" }, { kind: "component", type: i5$2.HermesInputContainer, selector: "hermes-input-container" }, { kind: "directive", type: i14.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i14.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i14.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HermesDatagridFilter, selector: "hermes-dg-filter", inputs: ["hermesDgFilterOpen", "hermesDgFilter"], outputs: ["hermesDgFilterOpenChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DatagridStringFilter, decorators: [{
@@ -2544,22 +2544,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
             args: [{
                     selector: 'hermes-dg-string-filter',
                     providers: [{ provide: CustomFilter, useExisting: DatagridStringFilter }],
-                    template: `
-    <hermes-dg-filter [hermesDgFilter]="registered" [(hermesDgFilterOpen)]="open">
-      <hermes-input-container>
-        <label>{{ labelValue }}</label>
-        <input
-          #input
-          type="text"
-          autocomplete="off"
-          name="search"
-          [(ngModel)]="value"
-          hermesInput
-          [attr.aria-label]="placeholderValue"
-          [placeholder]="placeholderValue"
-        />
-      </hermes-input-container>
-    </hermes-dg-filter>
+                    template: `
+    <hermes-dg-filter [hermesDgFilter]="registered" [(hermesDgFilterOpen)]="open">
+      <hermes-input-container>
+        <label>{{ labelValue }}</label>
+        <input
+          #input
+          type="text"
+          autocomplete="off"
+          name="search"
+          [(ngModel)]="value"
+          hermesInput
+          [attr.aria-label]="placeholderValue"
+          [placeholder]="placeholderValue"
+        />
+      </hermes-input-container>
+    </hermes-dg-filter>
   `,
                     standalone: false,
                 }]
@@ -2918,136 +2918,136 @@ class HermesDatagridColumn extends DatagridFilterRegistrar {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesDatagridColumn, deps: [{ token: i0.ElementRef }, { token: Sort }, { token: FiltersProvider }, { token: i0.ViewContainerRef }, { token: DetailService }, { token: i0.ChangeDetectorRef }, { token: i2.HermesCommonStringsService }, { token: ColumnsService }, { token: COLUMN_STATE, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: HermesDatagridColumn, isStandalone: false, selector: "hermes-dg-column", inputs: { filterStringPlaceholder: ["hermesFilterStringPlaceholder", "filterStringPlaceholder"], filterNumberMaxPlaceholder: ["hermesFilterNumberMaxPlaceholder", "filterNumberMaxPlaceholder"], filterNumberMinPlaceholder: ["hermesFilterNumberMinPlaceholder", "filterNumberMinPlaceholder"], disableUnsort: ["hermesDgDisableUnsort", "disableUnsort"], pinned: ["hermesDgPinned", "pinned", booleanAttribute], colType: ["hermesDgColType", "colType"], field: ["hermesDgField", "field"], sortBy: ["hermesDgSortBy", "sortBy"], sortOrder: ["hermesDgSortOrder", "sortOrder"], updateFilterValue: ["hermesFilterValue", "updateFilterValue"] }, outputs: { sortOrderChange: "hermesDgSortOrderChange", filterValueChange: "hermesFilterValueChange" }, host: { attributes: { "role": "columnheader" }, properties: { "class.datagrid-column": "true", "attr.aria-sort": "ariaSort" } }, queries: [{ propertyName: "projectedFilter", first: true, predicate: CustomFilter, descendants: true }], viewQueries: [{ propertyName: "titleContainer", first: true, predicate: ["titleContainer"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, hostDirectives: [{ directive: i3.HermesPopoverHostDirective }], ngImport: i0, template: `
-    <div class="datagrid-column-flex">
-      <!--
-        hermesDgPinnable is disabled for now. Restoring it means uncommenting this block together with
-        the pinnable input, the hermesDgPinnedChange output and togglePinned() below, the
-        .datagrid-column-pin styles, the pin/unpin icons in HermesDatagridModule and the
-        pinColumn/unpinColumn common strings.
-
-        @if (pinnable) {
-          <button
-            class="datagrid-column-pin"
-            type="button"
-            [attr.aria-label]="pinned ? commonStrings.keys.unpinColumn : commonStrings.keys.pinColumn"
-            (click)="togglePinned($event)"
-          >
-            <hermes-icon [size]="'12'" [shape]="pinned ? 'unpin' : 'pin'" solid aria-hidden="true"></hermes-icon>
-          </button>
-        }
-      -->
-      @if (sortable) {
-        <button class="datagrid-column-title" (click)="sort()" type="button" #titleContainer>
-          <ng-container *ngTemplateOutlet="columnTitle"></ng-container>
-          <hermes-icon
-            [shape]="sortDirection ? 'arrow' : 'two-way-arrows'"
-            [direction]="sortDirection ? sortDirection : 'left'"
-            aria-hidden="true"
-            class="sort-icon"
-          ></hermes-icon>
-        </button>
-      }
-      <!-- I'm really not happy with that select since it's not very scalable -->
-      <ng-content select="hermes-dg-filter, hermes-dg-string-filter, hermes-dg-numeric-filter"></ng-content>
-
-      @if (field && !customFilter && colType == 'string') {
-        <hermes-dg-string-filter
-          [hermesFilterPlaceholder]="filterStringPlaceholder"
-          [hermesDgStringFilter]="registered"
-          [(hermesFilterValue)]="filterValue"
-        ></hermes-dg-string-filter>
-      }
-      @if (field && !customFilter && colType == 'number') {
-        <hermes-dg-numeric-filter
-          [hermesFilterMaxPlaceholder]="filterNumberMaxPlaceholder"
-          [hermesFilterMinPlaceholder]="filterNumberMinPlaceholder"
-          [hermesDgNumericFilter]="registered"
-          [(hermesFilterValue)]="filterValue"
-        ></hermes-dg-numeric-filter>
-      }
-
-      <ng-template #columnTitle>
-        <ng-content></ng-content>
-      </ng-template>
-
-      @if (!sortable) {
-        <span class="datagrid-column-title" #titleContainer>
-          <ng-container *ngTemplateOutlet="columnTitle"></ng-container>
-        </span>
-      }
-      @if (showSeparator) {
-        <hermes-dg-column-separator></hermes-dg-column-separator>
-      }
-    </div>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: HermesDatagridColumn, isStandalone: false, selector: "hermes-dg-column", inputs: { filterStringPlaceholder: ["hermesFilterStringPlaceholder", "filterStringPlaceholder"], filterNumberMaxPlaceholder: ["hermesFilterNumberMaxPlaceholder", "filterNumberMaxPlaceholder"], filterNumberMinPlaceholder: ["hermesFilterNumberMinPlaceholder", "filterNumberMinPlaceholder"], disableUnsort: ["hermesDgDisableUnsort", "disableUnsort"], pinned: ["hermesDgPinned", "pinned", booleanAttribute], colType: ["hermesDgColType", "colType"], field: ["hermesDgField", "field"], sortBy: ["hermesDgSortBy", "sortBy"], sortOrder: ["hermesDgSortOrder", "sortOrder"], updateFilterValue: ["hermesFilterValue", "updateFilterValue"] }, outputs: { sortOrderChange: "hermesDgSortOrderChange", filterValueChange: "hermesFilterValueChange" }, host: { attributes: { "role": "columnheader" }, properties: { "class.datagrid-column": "true", "attr.aria-sort": "ariaSort" } }, queries: [{ propertyName: "projectedFilter", first: true, predicate: CustomFilter, descendants: true }], viewQueries: [{ propertyName: "titleContainer", first: true, predicate: ["titleContainer"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, hostDirectives: [{ directive: i3.HermesPopoverHostDirective }], ngImport: i0, template: `
+    <div class="datagrid-column-flex">
+      <!--
+        hermesDgPinnable is disabled for now. Restoring it means uncommenting this block together with
+        the pinnable input, the hermesDgPinnedChange output and togglePinned() below, the
+        .datagrid-column-pin styles, the pin/unpin icons in HermesDatagridModule and the
+        pinColumn/unpinColumn common strings.
+
+        @if (pinnable) {
+          <button
+            class="datagrid-column-pin"
+            type="button"
+            [attr.aria-label]="pinned ? commonStrings.keys.unpinColumn : commonStrings.keys.pinColumn"
+            (click)="togglePinned($event)"
+          >
+            <hermes-icon [size]="'12'" [shape]="pinned ? 'unpin' : 'pin'" solid aria-hidden="true"></hermes-icon>
+          </button>
+        }
+      -->
+      @if (sortable) {
+        <button class="datagrid-column-title" (click)="sort()" type="button" #titleContainer>
+          <ng-container *ngTemplateOutlet="columnTitle"></ng-container>
+          <hermes-icon
+            [shape]="sortDirection ? 'arrow' : 'two-way-arrows'"
+            [direction]="sortDirection ? sortDirection : 'left'"
+            aria-hidden="true"
+            class="sort-icon"
+          ></hermes-icon>
+        </button>
+      }
+      <!-- I'm really not happy with that select since it's not very scalable -->
+      <ng-content select="hermes-dg-filter, hermes-dg-string-filter, hermes-dg-numeric-filter"></ng-content>
+
+      @if (field && !customFilter && colType == 'string') {
+        <hermes-dg-string-filter
+          [hermesFilterPlaceholder]="filterStringPlaceholder"
+          [hermesDgStringFilter]="registered"
+          [(hermesFilterValue)]="filterValue"
+        ></hermes-dg-string-filter>
+      }
+      @if (field && !customFilter && colType == 'number') {
+        <hermes-dg-numeric-filter
+          [hermesFilterMaxPlaceholder]="filterNumberMaxPlaceholder"
+          [hermesFilterMinPlaceholder]="filterNumberMinPlaceholder"
+          [hermesDgNumericFilter]="registered"
+          [(hermesFilterValue)]="filterValue"
+        ></hermes-dg-numeric-filter>
+      }
+
+      <ng-template #columnTitle>
+        <ng-content></ng-content>
+      </ng-template>
+
+      @if (!sortable) {
+        <span class="datagrid-column-title" #titleContainer>
+          <ng-container *ngTemplateOutlet="columnTitle"></ng-container>
+        </span>
+      }
+      @if (showSeparator) {
+        <hermes-dg-column-separator></hermes-dg-column-separator>
+      }
+    </div>
   `, isInline: true, dependencies: [{ kind: "directive", type: i10.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.HermesIcon, selector: "hermes-icon, hermes-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "component", type: HermesDatagridColumnSeparator, selector: "hermes-dg-column-separator" }, { kind: "component", type: DatagridNumericFilter, selector: "hermes-dg-numeric-filter", inputs: ["hermesFilterMinPlaceholder", "hermesFilterMaxPlaceholder", "hermesFilterFromLabel", "hermesFilterToLabel", "hermesFilterValue", "hermesDgNumericFilter"], outputs: ["hermesFilterValueChange"] }, { kind: "component", type: DatagridStringFilter, selector: "hermes-dg-string-filter", inputs: ["hermesFilterPlaceholder", "hermesFilterLabel", "hermesDgStringFilter", "hermesFilterValue"], outputs: ["hermesFilterValueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesDatagridColumn, decorators: [{
             type: Component,
             args: [{
                     selector: 'hermes-dg-column',
-                    template: `
-    <div class="datagrid-column-flex">
-      <!--
-        hermesDgPinnable is disabled for now. Restoring it means uncommenting this block together with
-        the pinnable input, the hermesDgPinnedChange output and togglePinned() below, the
-        .datagrid-column-pin styles, the pin/unpin icons in HermesDatagridModule and the
-        pinColumn/unpinColumn common strings.
-
-        @if (pinnable) {
-          <button
-            class="datagrid-column-pin"
-            type="button"
-            [attr.aria-label]="pinned ? commonStrings.keys.unpinColumn : commonStrings.keys.pinColumn"
-            (click)="togglePinned($event)"
-          >
-            <hermes-icon [size]="'12'" [shape]="pinned ? 'unpin' : 'pin'" solid aria-hidden="true"></hermes-icon>
-          </button>
-        }
-      -->
-      @if (sortable) {
-        <button class="datagrid-column-title" (click)="sort()" type="button" #titleContainer>
-          <ng-container *ngTemplateOutlet="columnTitle"></ng-container>
-          <hermes-icon
-            [shape]="sortDirection ? 'arrow' : 'two-way-arrows'"
-            [direction]="sortDirection ? sortDirection : 'left'"
-            aria-hidden="true"
-            class="sort-icon"
-          ></hermes-icon>
-        </button>
-      }
-      <!-- I'm really not happy with that select since it's not very scalable -->
-      <ng-content select="hermes-dg-filter, hermes-dg-string-filter, hermes-dg-numeric-filter"></ng-content>
-
-      @if (field && !customFilter && colType == 'string') {
-        <hermes-dg-string-filter
-          [hermesFilterPlaceholder]="filterStringPlaceholder"
-          [hermesDgStringFilter]="registered"
-          [(hermesFilterValue)]="filterValue"
-        ></hermes-dg-string-filter>
-      }
-      @if (field && !customFilter && colType == 'number') {
-        <hermes-dg-numeric-filter
-          [hermesFilterMaxPlaceholder]="filterNumberMaxPlaceholder"
-          [hermesFilterMinPlaceholder]="filterNumberMinPlaceholder"
-          [hermesDgNumericFilter]="registered"
-          [(hermesFilterValue)]="filterValue"
-        ></hermes-dg-numeric-filter>
-      }
-
-      <ng-template #columnTitle>
-        <ng-content></ng-content>
-      </ng-template>
-
-      @if (!sortable) {
-        <span class="datagrid-column-title" #titleContainer>
-          <ng-container *ngTemplateOutlet="columnTitle"></ng-container>
-        </span>
-      }
-      @if (showSeparator) {
-        <hermes-dg-column-separator></hermes-dg-column-separator>
-      }
-    </div>
+                    template: `
+    <div class="datagrid-column-flex">
+      <!--
+        hermesDgPinnable is disabled for now. Restoring it means uncommenting this block together with
+        the pinnable input, the hermesDgPinnedChange output and togglePinned() below, the
+        .datagrid-column-pin styles, the pin/unpin icons in HermesDatagridModule and the
+        pinColumn/unpinColumn common strings.
+
+        @if (pinnable) {
+          <button
+            class="datagrid-column-pin"
+            type="button"
+            [attr.aria-label]="pinned ? commonStrings.keys.unpinColumn : commonStrings.keys.pinColumn"
+            (click)="togglePinned($event)"
+          >
+            <hermes-icon [size]="'12'" [shape]="pinned ? 'unpin' : 'pin'" solid aria-hidden="true"></hermes-icon>
+          </button>
+        }
+      -->
+      @if (sortable) {
+        <button class="datagrid-column-title" (click)="sort()" type="button" #titleContainer>
+          <ng-container *ngTemplateOutlet="columnTitle"></ng-container>
+          <hermes-icon
+            [shape]="sortDirection ? 'arrow' : 'two-way-arrows'"
+            [direction]="sortDirection ? sortDirection : 'left'"
+            aria-hidden="true"
+            class="sort-icon"
+          ></hermes-icon>
+        </button>
+      }
+      <!-- I'm really not happy with that select since it's not very scalable -->
+      <ng-content select="hermes-dg-filter, hermes-dg-string-filter, hermes-dg-numeric-filter"></ng-content>
+
+      @if (field && !customFilter && colType == 'string') {
+        <hermes-dg-string-filter
+          [hermesFilterPlaceholder]="filterStringPlaceholder"
+          [hermesDgStringFilter]="registered"
+          [(hermesFilterValue)]="filterValue"
+        ></hermes-dg-string-filter>
+      }
+      @if (field && !customFilter && colType == 'number') {
+        <hermes-dg-numeric-filter
+          [hermesFilterMaxPlaceholder]="filterNumberMaxPlaceholder"
+          [hermesFilterMinPlaceholder]="filterNumberMinPlaceholder"
+          [hermesDgNumericFilter]="registered"
+          [(hermesFilterValue)]="filterValue"
+        ></hermes-dg-numeric-filter>
+      }
+
+      <ng-template #columnTitle>
+        <ng-content></ng-content>
+      </ng-template>
+
+      @if (!sortable) {
+        <span class="datagrid-column-title" #titleContainer>
+          <ng-container *ngTemplateOutlet="columnTitle"></ng-container>
+        </span>
+      }
+      @if (showSeparator) {
+        <hermes-dg-column-separator></hermes-dg-column-separator>
+      }
+    </div>
   `,
                     hostDirectives: [HermesPopoverHostDirective],
                     host: {
@@ -5749,42 +5749,42 @@ class HermesDatagridActionOverflow {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesDatagridActionOverflow, deps: [{ token: RowActionService }, { token: i2.HermesCommonStringsService }, { token: PLATFORM_ID }, { token: i3.HermesPopoverService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.22", type: HermesDatagridActionOverflow, isStandalone: false, selector: "hermes-dg-action-overflow", inputs: { buttonLabel: ["hermesDgActionOverflowButtonLabel", "buttonLabel"], open: ["hermesDgActionOverflowOpen", "open"] }, outputs: { openChange: "hermesDgActionOverflowOpenChange" }, viewQueries: [{ propertyName: "keyFocus", first: true, predicate: HermesKeyFocus, descendants: true }], hostDirectives: [{ directive: i3.HermesPopoverHostDirective }], ngImport: i0, template: `
-    <button
-      tabindex="-1"
-      class="datagrid-action-toggle"
-      type="button"
-      role="button"
-      aria-haspopup="true"
-      #anchor
-      [attr.aria-controls]="popoverId"
-      [attr.aria-expanded]="open"
-      [attr.aria-label]="buttonLabel || commonStrings.keys.rowActions"
-      hermesPopoverOrigin
-      hermesPopoverOpenCloseButton
-      (click)="$event.stopPropagation()"
-    >
-      <hermes-icon shape="ellipsis-vertical" [attr.title]="buttonLabel || commonStrings.keys.rowActions"></hermes-icon>
-    </button>
-
-    <div
-      class="datagrid-action-overflow"
-      [id]="popoverId"
-      [attr.aria-hidden]="!open"
-      [attr.id]="popoverId"
-      hermesKeyFocus
-      cdkTrapFocus
-      (click)="closeOverflowContent($event)"
-      *hermesPopoverContent="
-        open;
-        at: smartPosition;
-        availablePositions: positions;
-        outsideClickToClose: true;
-        scrollToClose: true
-      "
-    >
-      <ng-content></ng-content>
-    </div>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.22", type: HermesDatagridActionOverflow, isStandalone: false, selector: "hermes-dg-action-overflow", inputs: { buttonLabel: ["hermesDgActionOverflowButtonLabel", "buttonLabel"], open: ["hermesDgActionOverflowOpen", "open"] }, outputs: { openChange: "hermesDgActionOverflowOpenChange" }, viewQueries: [{ propertyName: "keyFocus", first: true, predicate: HermesKeyFocus, descendants: true }], hostDirectives: [{ directive: i3.HermesPopoverHostDirective }], ngImport: i0, template: `
+    <button
+      tabindex="-1"
+      class="datagrid-action-toggle"
+      type="button"
+      role="button"
+      aria-haspopup="true"
+      #anchor
+      [attr.aria-controls]="popoverId"
+      [attr.aria-expanded]="open"
+      [attr.aria-label]="buttonLabel || commonStrings.keys.rowActions"
+      hermesPopoverOrigin
+      hermesPopoverOpenCloseButton
+      (click)="$event.stopPropagation()"
+    >
+      <hermes-icon shape="ellipsis-vertical" [attr.title]="buttonLabel || commonStrings.keys.rowActions"></hermes-icon>
+    </button>
+
+    <div
+      class="datagrid-action-overflow"
+      [id]="popoverId"
+      [attr.aria-hidden]="!open"
+      [attr.id]="popoverId"
+      hermesKeyFocus
+      cdkTrapFocus
+      (click)="closeOverflowContent($event)"
+      *hermesPopoverContent="
+        open;
+        at: smartPosition;
+        availablePositions: positions;
+        outsideClickToClose: true;
+        scrollToClose: true
+      "
+    >
+      <ng-content></ng-content>
+    </div>
   `, isInline: true, dependencies: [{ kind: "directive", type: i2.CdkTrapFocusModule_CdkTrapFocus, selector: "[cdkTrapFocus]" }, { kind: "component", type: i5.HermesIcon, selector: "hermes-icon, hermes-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i3.HermesPopoverOrigin, selector: "[hermesPopoverOrigin]" }, { kind: "directive", type: i3.HermesPopoverOpenCloseButton, selector: "[hermesPopoverOpenCloseButton]", outputs: ["hermesPopoverOpenCloseChange"] }, { kind: "directive", type: i3.HermesPopoverContent, selector: "[hermesPopoverContent]", inputs: ["hermesPopoverContent", "hermesPopoverContentAt", "hermesPopoverContentAvailablePositions", "hermesPopoverContentType", "hermesPopoverContentOutsideClickToClose", "hermesPopoverContentScrollToClose", "hermesPopoverContentOrigin"] }, { kind: "component", type: i2.HermesKeyFocus, selector: "[hermesKeyFocus]", inputs: ["hermesDirection", "hermesFocusOnLoad", "hermesKeyFocus"], outputs: ["hermesFocusChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesDatagridActionOverflow, decorators: [{
@@ -5792,42 +5792,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
             args: [{
                     selector: 'hermes-dg-action-overflow',
                     hostDirectives: [HermesPopoverHostDirective],
-                    template: `
-    <button
-      tabindex="-1"
-      class="datagrid-action-toggle"
-      type="button"
-      role="button"
-      aria-haspopup="true"
-      #anchor
-      [attr.aria-controls]="popoverId"
-      [attr.aria-expanded]="open"
-      [attr.aria-label]="buttonLabel || commonStrings.keys.rowActions"
-      hermesPopoverOrigin
-      hermesPopoverOpenCloseButton
-      (click)="$event.stopPropagation()"
-    >
-      <hermes-icon shape="ellipsis-vertical" [attr.title]="buttonLabel || commonStrings.keys.rowActions"></hermes-icon>
-    </button>
-
-    <div
-      class="datagrid-action-overflow"
-      [id]="popoverId"
-      [attr.aria-hidden]="!open"
-      [attr.id]="popoverId"
-      hermesKeyFocus
-      cdkTrapFocus
-      (click)="closeOverflowContent($event)"
-      *hermesPopoverContent="
-        open;
-        at: smartPosition;
-        availablePositions: positions;
-        outsideClickToClose: true;
-        scrollToClose: true
-      "
-    >
-      <ng-content></ng-content>
-    </div>
+                    template: `
+    <button
+      tabindex="-1"
+      class="datagrid-action-toggle"
+      type="button"
+      role="button"
+      aria-haspopup="true"
+      #anchor
+      [attr.aria-controls]="popoverId"
+      [attr.aria-expanded]="open"
+      [attr.aria-label]="buttonLabel || commonStrings.keys.rowActions"
+      hermesPopoverOrigin
+      hermesPopoverOpenCloseButton
+      (click)="$event.stopPropagation()"
+    >
+      <hermes-icon shape="ellipsis-vertical" [attr.title]="buttonLabel || commonStrings.keys.rowActions"></hermes-icon>
+    </button>
+
+    <div
+      class="datagrid-action-overflow"
+      [id]="popoverId"
+      [attr.aria-hidden]="!open"
+      [attr.id]="popoverId"
+      hermesKeyFocus
+      cdkTrapFocus
+      (click)="closeOverflowContent($event)"
+      *hermesPopoverContent="
+        open;
+        at: smartPosition;
+        availablePositions: positions;
+        outsideClickToClose: true;
+        scrollToClose: true
+      "
+    >
+      <ng-content></ng-content>
+    </div>
   `,
                     standalone: false,
                 }]
@@ -5885,30 +5885,30 @@ class HermesDatagridColumnToggleButton {
         return this.columnsService.columns.filter(column => column.value.hideable);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesDatagridColumnToggleButton, deps: [{ token: i2.HermesCommonStringsService }, { token: ColumnsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.22", type: HermesDatagridColumnToggleButton, isStandalone: false, selector: "hermes-dg-column-toggle-button", outputs: { hermesAllSelected: "hermesAllSelected" }, ngImport: i0, template: `
-    <button
-      class="btn btn-sm btn-link switch-button"
-      (click)="selectAll()"
-      [disabled]="allHideablesVisible"
-      type="button"
-    >
-      {{ commonStrings.keys.selectAll }}
-    </button>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.22", type: HermesDatagridColumnToggleButton, isStandalone: false, selector: "hermes-dg-column-toggle-button", outputs: { hermesAllSelected: "hermesAllSelected" }, ngImport: i0, template: `
+    <button
+      class="btn btn-sm btn-link switch-button"
+      (click)="selectAll()"
+      [disabled]="allHideablesVisible"
+      type="button"
+    >
+      {{ commonStrings.keys.selectAll }}
+    </button>
   `, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesDatagridColumnToggleButton, decorators: [{
             type: Component,
             args: [{
                     selector: 'hermes-dg-column-toggle-button',
-                    template: `
-    <button
-      class="btn btn-sm btn-link switch-button"
-      (click)="selectAll()"
-      [disabled]="allHideablesVisible"
-      type="button"
-    >
-      {{ commonStrings.keys.selectAll }}
-    </button>
+                    template: `
+    <button
+      class="btn btn-sm btn-link switch-button"
+      (click)="selectAll()"
+      [disabled]="allHideablesVisible"
+      type="button"
+    >
+      {{ commonStrings.keys.selectAll }}
+    </button>
   `,
                     standalone: false,
                 }]
@@ -5969,138 +5969,138 @@ class HermesDatagridColumnToggle {
         this.allSelectedElement.nativeElement.focus();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesDatagridColumnToggle, deps: [{ token: i2.HermesCommonStringsService }, { token: ColumnsService }, { token: i3.HermesPopoverService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: HermesDatagridColumnToggle, isStandalone: false, selector: "hermes-dg-column-toggle", host: { properties: { "class.column-switch-wrapper": "true", "class.active": "openState" } }, viewQueries: [{ propertyName: "allSelectedElement", first: true, predicate: ["allSelected"], descendants: true, read: ElementRef }], hostDirectives: [{ directive: i3.HermesPopoverHostDirective }], ngImport: i0, template: `
-    <button
-      role="button"
-      type="button"
-      class="btn btn-sm column-toggle-action"
-      hermesPopoverOrigin
-      hermesPopoverOpenCloseButton
-      [attr.aria-controls]="popoverId"
-      [attr.aria-expanded]="openState"
-      [attr.aria-haspopup]="'menu'"
-    >
-      {{ commonStrings.keys.pickColumns }}
-    </button>
-    <div
-      class="column-switch"
-      role="dialog"
-      [attr.aria-label]="commonStrings.keys.showColumnsMenuDescription"
-      [id]="popoverId"
-      cdkTrapFocus
-      cdkTrapFocusAutoCapture
-      *hermesPopoverContent="
-        openState;
-        at: popoverPosition;
-        type: popoverType;
-        outsideClickToClose: true;
-        scrollToClose: true
-      "
-    >
-      <div class="switch-header">
-        <div class="hermes-sr-only" tabindex="-1" #allSelected>{{ commonStrings.keys.allColumnsSelected }}</div>
-        <h2>{{ commonStrings.keys.showColumns }}</h2>
-        <button
-          class="btn btn-sm btn-link-neutral toggle-switch-close-button"
-          hermesPopoverCloseButton
-          type="button"
-          [attr.aria-label]="commonStrings.keys.close"
-        >
-          <hermes-icon shape="window-close" aria-hidden="true" [attr.title]="commonStrings.keys.close"></hermes-icon>
-          <span class="hermes-sr-only">{{ commonStrings.keys.close }}</span>
-        </button>
-      </div>
-      <ul class="switch-content list-unstyled">
-        @for (columnState of hideableColumnStates; track trackByFn($index, columnState)) {
-          <li>
-            <hermes-checkbox-wrapper>
-              <input
-                hermesCheckbox
-                type="checkbox"
-                [disabled]="hasOnlyOneVisibleColumn && !columnState.hidden"
-                [ngModel]="!columnState.hidden"
-                (ngModelChange)="toggleColumnState(columnState, !$event)"
-              />
-              <label>
-                <ng-template [ngTemplateOutlet]="columnState.titleTemplateRef"></ng-template>
-              </label>
-            </hermes-checkbox-wrapper>
-          </li>
-        }
-      </ul>
-      <div class="switch-footer">
-        <hermes-dg-column-toggle-button (hermesAllSelected)="allColumnsSelected()"></hermes-dg-column-toggle-button>
-      </div>
-    </div>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: HermesDatagridColumnToggle, isStandalone: false, selector: "hermes-dg-column-toggle", host: { properties: { "class.column-switch-wrapper": "true", "class.active": "openState" } }, viewQueries: [{ propertyName: "allSelectedElement", first: true, predicate: ["allSelected"], descendants: true, read: ElementRef }], hostDirectives: [{ directive: i3.HermesPopoverHostDirective }], ngImport: i0, template: `
+    <button
+      role="button"
+      type="button"
+      class="btn btn-sm column-toggle-action"
+      hermesPopoverOrigin
+      hermesPopoverOpenCloseButton
+      [attr.aria-controls]="popoverId"
+      [attr.aria-expanded]="openState"
+      [attr.aria-haspopup]="'menu'"
+    >
+      {{ commonStrings.keys.pickColumns }}
+    </button>
+    <div
+      class="column-switch"
+      role="dialog"
+      [attr.aria-label]="commonStrings.keys.showColumnsMenuDescription"
+      [id]="popoverId"
+      cdkTrapFocus
+      cdkTrapFocusAutoCapture
+      *hermesPopoverContent="
+        openState;
+        at: popoverPosition;
+        type: popoverType;
+        outsideClickToClose: true;
+        scrollToClose: true
+      "
+    >
+      <div class="switch-header">
+        <div class="hermes-sr-only" tabindex="-1" #allSelected>{{ commonStrings.keys.allColumnsSelected }}</div>
+        <h2>{{ commonStrings.keys.showColumns }}</h2>
+        <button
+          class="btn btn-sm btn-link-neutral toggle-switch-close-button"
+          hermesPopoverCloseButton
+          type="button"
+          [attr.aria-label]="commonStrings.keys.close"
+        >
+          <hermes-icon shape="window-close" aria-hidden="true" [attr.title]="commonStrings.keys.close"></hermes-icon>
+          <span class="hermes-sr-only">{{ commonStrings.keys.close }}</span>
+        </button>
+      </div>
+      <ul class="switch-content list-unstyled">
+        @for (columnState of hideableColumnStates; track trackByFn($index, columnState)) {
+          <li>
+            <hermes-checkbox-wrapper>
+              <input
+                hermesCheckbox
+                type="checkbox"
+                [disabled]="hasOnlyOneVisibleColumn && !columnState.hidden"
+                [ngModel]="!columnState.hidden"
+                (ngModelChange)="toggleColumnState(columnState, !$event)"
+              />
+              <label>
+                <ng-template [ngTemplateOutlet]="columnState.titleTemplateRef"></ng-template>
+              </label>
+            </hermes-checkbox-wrapper>
+          </li>
+        }
+      </ul>
+      <div class="switch-footer">
+        <hermes-dg-column-toggle-button (hermesAllSelected)="allColumnsSelected()"></hermes-dg-column-toggle-button>
+      </div>
+    </div>
   `, isInline: true, dependencies: [{ kind: "directive", type: i10.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.CdkTrapFocusModule_CdkTrapFocus, selector: "[cdkTrapFocus]" }, { kind: "component", type: i5.HermesIcon, selector: "hermes-icon, hermes-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i4.HermesControlLabel, selector: "label", inputs: ["id", "for"] }, { kind: "directive", type: i7.HermesCheckbox, selector: "[hermesCheckbox],[hermesToggle]" }, { kind: "component", type: i7.HermesCheckboxWrapper, selector: "hermes-checkbox-wrapper,hermes-toggle-wrapper" }, { kind: "directive", type: i14.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i14.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i14.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.HermesPopoverOrigin, selector: "[hermesPopoverOrigin]" }, { kind: "directive", type: i3.HermesPopoverCloseButton, selector: "[hermesPopoverCloseButton]", outputs: ["hermesPopoverOnCloseChange"] }, { kind: "directive", type: i3.HermesPopoverOpenCloseButton, selector: "[hermesPopoverOpenCloseButton]", outputs: ["hermesPopoverOpenCloseChange"] }, { kind: "directive", type: i3.HermesPopoverContent, selector: "[hermesPopoverContent]", inputs: ["hermesPopoverContent", "hermesPopoverContentAt", "hermesPopoverContentAvailablePositions", "hermesPopoverContentType", "hermesPopoverContentOutsideClickToClose", "hermesPopoverContentScrollToClose", "hermesPopoverContentOrigin"] }, { kind: "component", type: HermesDatagridColumnToggleButton, selector: "hermes-dg-column-toggle-button", outputs: ["hermesAllSelected"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesDatagridColumnToggle, decorators: [{
             type: Component,
             args: [{
                     selector: 'hermes-dg-column-toggle',
-                    template: `
-    <button
-      role="button"
-      type="button"
-      class="btn btn-sm column-toggle-action"
-      hermesPopoverOrigin
-      hermesPopoverOpenCloseButton
-      [attr.aria-controls]="popoverId"
-      [attr.aria-expanded]="openState"
-      [attr.aria-haspopup]="'menu'"
-    >
-      {{ commonStrings.keys.pickColumns }}
-    </button>
-    <div
-      class="column-switch"
-      role="dialog"
-      [attr.aria-label]="commonStrings.keys.showColumnsMenuDescription"
-      [id]="popoverId"
-      cdkTrapFocus
-      cdkTrapFocusAutoCapture
-      *hermesPopoverContent="
-        openState;
-        at: popoverPosition;
-        type: popoverType;
-        outsideClickToClose: true;
-        scrollToClose: true
-      "
-    >
-      <div class="switch-header">
-        <div class="hermes-sr-only" tabindex="-1" #allSelected>{{ commonStrings.keys.allColumnsSelected }}</div>
-        <h2>{{ commonStrings.keys.showColumns }}</h2>
-        <button
-          class="btn btn-sm btn-link-neutral toggle-switch-close-button"
-          hermesPopoverCloseButton
-          type="button"
-          [attr.aria-label]="commonStrings.keys.close"
-        >
-          <hermes-icon shape="window-close" aria-hidden="true" [attr.title]="commonStrings.keys.close"></hermes-icon>
-          <span class="hermes-sr-only">{{ commonStrings.keys.close }}</span>
-        </button>
-      </div>
-      <ul class="switch-content list-unstyled">
-        @for (columnState of hideableColumnStates; track trackByFn($index, columnState)) {
-          <li>
-            <hermes-checkbox-wrapper>
-              <input
-                hermesCheckbox
-                type="checkbox"
-                [disabled]="hasOnlyOneVisibleColumn && !columnState.hidden"
-                [ngModel]="!columnState.hidden"
-                (ngModelChange)="toggleColumnState(columnState, !$event)"
-              />
-              <label>
-                <ng-template [ngTemplateOutlet]="columnState.titleTemplateRef"></ng-template>
-              </label>
-            </hermes-checkbox-wrapper>
-          </li>
-        }
-      </ul>
-      <div class="switch-footer">
-        <hermes-dg-column-toggle-button (hermesAllSelected)="allColumnsSelected()"></hermes-dg-column-toggle-button>
-      </div>
-    </div>
+                    template: `
+    <button
+      role="button"
+      type="button"
+      class="btn btn-sm column-toggle-action"
+      hermesPopoverOrigin
+      hermesPopoverOpenCloseButton
+      [attr.aria-controls]="popoverId"
+      [attr.aria-expanded]="openState"
+      [attr.aria-haspopup]="'menu'"
+    >
+      {{ commonStrings.keys.pickColumns }}
+    </button>
+    <div
+      class="column-switch"
+      role="dialog"
+      [attr.aria-label]="commonStrings.keys.showColumnsMenuDescription"
+      [id]="popoverId"
+      cdkTrapFocus
+      cdkTrapFocusAutoCapture
+      *hermesPopoverContent="
+        openState;
+        at: popoverPosition;
+        type: popoverType;
+        outsideClickToClose: true;
+        scrollToClose: true
+      "
+    >
+      <div class="switch-header">
+        <div class="hermes-sr-only" tabindex="-1" #allSelected>{{ commonStrings.keys.allColumnsSelected }}</div>
+        <h2>{{ commonStrings.keys.showColumns }}</h2>
+        <button
+          class="btn btn-sm btn-link-neutral toggle-switch-close-button"
+          hermesPopoverCloseButton
+          type="button"
+          [attr.aria-label]="commonStrings.keys.close"
+        >
+          <hermes-icon shape="window-close" aria-hidden="true" [attr.title]="commonStrings.keys.close"></hermes-icon>
+          <span class="hermes-sr-only">{{ commonStrings.keys.close }}</span>
+        </button>
+      </div>
+      <ul class="switch-content list-unstyled">
+        @for (columnState of hideableColumnStates; track trackByFn($index, columnState)) {
+          <li>
+            <hermes-checkbox-wrapper>
+              <input
+                hermesCheckbox
+                type="checkbox"
+                [disabled]="hasOnlyOneVisibleColumn && !columnState.hidden"
+                [ngModel]="!columnState.hidden"
+                (ngModelChange)="toggleColumnState(columnState, !$event)"
+              />
+              <label>
+                <ng-template [ngTemplateOutlet]="columnState.titleTemplateRef"></ng-template>
+              </label>
+            </hermes-checkbox-wrapper>
+          </li>
+        }
+      </ul>
+      <div class="switch-footer">
+        <hermes-dg-column-toggle-button (hermesAllSelected)="allColumnsSelected()"></hermes-dg-column-toggle-button>
+      </div>
+    </div>
   `,
                     host: { '[class.column-switch-wrapper]': 'true', '[class.active]': 'openState' },
                     hostDirectives: [HermesPopoverHostDirective],
@@ -6129,20 +6129,20 @@ class HermesDatagridDetailHeader {
         this.title.nativeElement.focus();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesDatagridDetailHeader, deps: [{ token: DetailService }, { token: i2.HermesCommonStringsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.22", type: HermesDatagridDetailHeader, isStandalone: false, selector: "hermes-dg-detail-header", host: { properties: { "class.datagrid-detail-header": "true" } }, viewQueries: [{ propertyName: "title", first: true, predicate: ["title"], descendants: true }], ngImport: i0, template: `
-    <div #title class="datagrid-detail-header-title" tabindex="-1" [id]="titleId">
-      <ng-content></ng-content>
-    </div>
-    <div class="datagrid-detail-pane-close">
-      <button
-        type="button"
-        class="btn btn-icon btn-link"
-        (click)="detailService.close()"
-        [attr.aria-label]="commonStrings.keys.close"
-      >
-        <hermes-icon shape="times"></hermes-icon>
-      </button>
-    </div>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.22", type: HermesDatagridDetailHeader, isStandalone: false, selector: "hermes-dg-detail-header", host: { properties: { "class.datagrid-detail-header": "true" } }, viewQueries: [{ propertyName: "title", first: true, predicate: ["title"], descendants: true }], ngImport: i0, template: `
+    <div #title class="datagrid-detail-header-title" tabindex="-1" [id]="titleId">
+      <ng-content></ng-content>
+    </div>
+    <div class="datagrid-detail-pane-close">
+      <button
+        type="button"
+        class="btn btn-icon btn-link"
+        (click)="detailService.close()"
+        [attr.aria-label]="commonStrings.keys.close"
+      >
+        <hermes-icon shape="times"></hermes-icon>
+      </button>
+    </div>
   `, isInline: true, dependencies: [{ kind: "component", type: i5.HermesIcon, selector: "hermes-icon, hermes-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesDatagridDetailHeader, decorators: [{
@@ -6152,20 +6152,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                     host: {
                         '[class.datagrid-detail-header]': 'true',
                     },
-                    template: `
-    <div #title class="datagrid-detail-header-title" tabindex="-1" [id]="titleId">
-      <ng-content></ng-content>
-    </div>
-    <div class="datagrid-detail-pane-close">
-      <button
-        type="button"
-        class="btn btn-icon btn-link"
-        (click)="detailService.close()"
-        [attr.aria-label]="commonStrings.keys.close"
-      >
-        <hermes-icon shape="times"></hermes-icon>
-      </button>
-    </div>
+                    template: `
+    <div #title class="datagrid-detail-header-title" tabindex="-1" [id]="titleId">
+      <ng-content></ng-content>
+    </div>
+    <div class="datagrid-detail-pane-close">
+      <button
+        type="button"
+        class="btn btn-icon btn-link"
+        (click)="detailService.close()"
+        [attr.aria-label]="commonStrings.keys.close"
+      >
+        <hermes-icon shape="times"></hermes-icon>
+      </button>
+    </div>
   `,
                     standalone: false,
                 }]
@@ -6235,23 +6235,23 @@ class HermesDatagridDetail {
         this.detailService.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesDatagridDetail, deps: [{ token: DetailService }, { token: i2.HermesCommonStringsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: HermesDatagridDetail, isStandalone: false, selector: "hermes-dg-detail", inputs: { ariaLabelledBy: ["hermesDetailAriaLabelledBy", "ariaLabelledBy"], ariaLabel: ["hermesDetailAriaLabel", "ariaLabel"], detailWidth: ["hermesDetailWidth", "detailWidth"] }, host: { properties: { "class.datagrid-detail-pane": "true", "class.datagrid-detail-custom-width": "isCustomWidth", "style.width.%": "width" } }, queries: [{ propertyName: "header", first: true, predicate: HermesDatagridDetailHeader, descendants: true }], ngImport: i0, template: `
-    @if (detailService.isOpen) {
-      <div
-        cdkTrapFocus
-        [cdkTrapFocusAutoCapture]="!header"
-        class="datagrid-detail-pane-content"
-        role="dialog"
-        [id]="detailService.id"
-        aria-modal="true"
-        [attr.aria-labelledby]="labelledBy"
-        [attr.aria-label]="label"
-      >
-        <div class="hermes-sr-only">{{ commonStrings.keys.detailPaneStart }}</div>
-        <ng-content></ng-content>
-        <div class="hermes-sr-only">{{ commonStrings.keys.detailPaneEnd }}</div>
-      </div>
-    }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: HermesDatagridDetail, isStandalone: false, selector: "hermes-dg-detail", inputs: { ariaLabelledBy: ["hermesDetailAriaLabelledBy", "ariaLabelledBy"], ariaLabel: ["hermesDetailAriaLabel", "ariaLabel"], detailWidth: ["hermesDetailWidth", "detailWidth"] }, host: { properties: { "class.datagrid-detail-pane": "true", "class.datagrid-detail-custom-width": "isCustomWidth", "style.width.%": "width" } }, queries: [{ propertyName: "header", first: true, predicate: HermesDatagridDetailHeader, descendants: true }], ngImport: i0, template: `
+    @if (detailService.isOpen) {
+      <div
+        cdkTrapFocus
+        [cdkTrapFocusAutoCapture]="!header"
+        class="datagrid-detail-pane-content"
+        role="dialog"
+        [id]="detailService.id"
+        aria-modal="true"
+        [attr.aria-labelledby]="labelledBy"
+        [attr.aria-label]="label"
+      >
+        <div class="hermes-sr-only">{{ commonStrings.keys.detailPaneStart }}</div>
+        <ng-content></ng-content>
+        <div class="hermes-sr-only">{{ commonStrings.keys.detailPaneEnd }}</div>
+      </div>
+    }
   `, isInline: true, dependencies: [{ kind: "directive", type: i2.CdkTrapFocusModule_CdkTrapFocus, selector: "[cdkTrapFocus]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesDatagridDetail, decorators: [{
@@ -6265,23 +6265,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                     },
                     // We put the @if on the cdkTrapFocus so it doesn't always exist on the page
                     // have to test for presence of header for aria-describedby because it was causing unit tests to crash
-                    template: `
-    @if (detailService.isOpen) {
-      <div
-        cdkTrapFocus
-        [cdkTrapFocusAutoCapture]="!header"
-        class="datagrid-detail-pane-content"
-        role="dialog"
-        [id]="detailService.id"
-        aria-modal="true"
-        [attr.aria-labelledby]="labelledBy"
-        [attr.aria-label]="label"
-      >
-        <div class="hermes-sr-only">{{ commonStrings.keys.detailPaneStart }}</div>
-        <ng-content></ng-content>
-        <div class="hermes-sr-only">{{ commonStrings.keys.detailPaneEnd }}</div>
-      </div>
-    }
+                    template: `
+    @if (detailService.isOpen) {
+      <div
+        cdkTrapFocus
+        [cdkTrapFocusAutoCapture]="!header"
+        class="datagrid-detail-pane-content"
+        role="dialog"
+        [id]="detailService.id"
+        aria-modal="true"
+        [attr.aria-labelledby]="labelledBy"
+        [attr.aria-label]="label"
+      >
+        <div class="hermes-sr-only">{{ commonStrings.keys.detailPaneStart }}</div>
+        <ng-content></ng-content>
+        <div class="hermes-sr-only">{{ commonStrings.keys.detailPaneEnd }}</div>
+      </div>
+    }
   `,
                     standalone: false,
                 }]
@@ -6634,78 +6634,78 @@ class HermesDatagridRowDetail {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesDatagridRowDetail, deps: [{ token: Selection }, { token: RowActionService }, { token: DatagridIfExpandService }, { token: ExpandableRowsCount }, { token: i2.HermesCommonStringsService }, { token: ColumnsService }, { token: DisplayModeService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: HermesDatagridRowDetail, isStandalone: false, selector: "hermes-dg-row-detail", inputs: { _beginningOfExpandableContentAriaText: ["hermesRowDetailBeginningAriaText", "_beginningOfExpandableContentAriaText"], _endOfExpandableContentAriaText: ["hermesRowDetailEndAriaText", "_endOfExpandableContentAriaText"], replace: ["hermesDgReplace", "replace"] }, host: { attributes: { "role": "row" }, properties: { "class.datagrid-row-flex": "true", "class.datagrid-row-detail": "true", "attr.id": "expand.expandableId" } }, queries: [{ propertyName: "cells", predicate: HermesDatagridCell }], viewQueries: [{ propertyName: "_pinnedCells", first: true, predicate: ["pinnedCells"], descendants: true, read: ViewContainerRef }, { propertyName: "_scrollableCells", first: true, predicate: ["scrollableCells"], descendants: true, read: ViewContainerRef }, { propertyName: "_plainCells", first: true, predicate: ["plainCells"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: `
-    <div class="hermes-sr-only">
-      {{ beginningOfExpandableContentAriaText }}
-      {{ commonStrings.keys.datagridExpandableRowsHelperText }}
-    </div>
-    <!--
-      These two containers mirror the ones in the row above and are only used while the detail is
-      column aligned - see columnAligned. They are always rendered so the cells always have
-      somewhere to be moved into, and the pinned one takes itself out of the layout while empty.
-    -->
-    <div class="datagrid-pinned-cells">
-      <ng-container #pinnedCells></ng-container>
-    </div>
-    <ng-container #scrollableCells></ng-container>
-    @if (this.cells?.length > 0) {
-      <ng-container [ngTemplateOutlet]="noCells"></ng-container>
-      <!--
-        Where the cells go back to when the detail stops being column aligned, because a column was
-        unpinned. A view that has been moved into a container cannot be handed back to the content
-        projection it came from, so it needs a container of its own in the same place.
-      -->
-      <ng-container #plainCells></ng-container>
-    }
-    @if (this.cells?.length === 0) {
-      <hermes-dg-cell class="datagrid-container">
-        <ng-container [ngTemplateOutlet]="noCells"></ng-container>
-      </hermes-dg-cell>
-    }
-
-    <ng-template #noCells>
-      <ng-content></ng-content>
-    </ng-template>
-    <div class="hermes-sr-only">{{ endOfExpandableContentAriaText }}</div>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: HermesDatagridRowDetail, isStandalone: false, selector: "hermes-dg-row-detail", inputs: { _beginningOfExpandableContentAriaText: ["hermesRowDetailBeginningAriaText", "_beginningOfExpandableContentAriaText"], _endOfExpandableContentAriaText: ["hermesRowDetailEndAriaText", "_endOfExpandableContentAriaText"], replace: ["hermesDgReplace", "replace"] }, host: { attributes: { "role": "row" }, properties: { "class.datagrid-row-flex": "true", "class.datagrid-row-detail": "true", "attr.id": "expand.expandableId" } }, queries: [{ propertyName: "cells", predicate: HermesDatagridCell }], viewQueries: [{ propertyName: "_pinnedCells", first: true, predicate: ["pinnedCells"], descendants: true, read: ViewContainerRef }, { propertyName: "_scrollableCells", first: true, predicate: ["scrollableCells"], descendants: true, read: ViewContainerRef }, { propertyName: "_plainCells", first: true, predicate: ["plainCells"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: `
+    <div class="hermes-sr-only">
+      {{ beginningOfExpandableContentAriaText }}
+      {{ commonStrings.keys.datagridExpandableRowsHelperText }}
+    </div>
+    <!--
+      These two containers mirror the ones in the row above and are only used while the detail is
+      column aligned - see columnAligned. They are always rendered so the cells always have
+      somewhere to be moved into, and the pinned one takes itself out of the layout while empty.
+    -->
+    <div class="datagrid-pinned-cells">
+      <ng-container #pinnedCells></ng-container>
+    </div>
+    <ng-container #scrollableCells></ng-container>
+    @if (this.cells?.length > 0) {
+      <ng-container [ngTemplateOutlet]="noCells"></ng-container>
+      <!--
+        Where the cells go back to when the detail stops being column aligned, because a column was
+        unpinned. A view that has been moved into a container cannot be handed back to the content
+        projection it came from, so it needs a container of its own in the same place.
+      -->
+      <ng-container #plainCells></ng-container>
+    }
+    @if (this.cells?.length === 0) {
+      <hermes-dg-cell class="datagrid-container">
+        <ng-container [ngTemplateOutlet]="noCells"></ng-container>
+      </hermes-dg-cell>
+    }
+
+    <ng-template #noCells>
+      <ng-content></ng-content>
+    </ng-template>
+    <div class="hermes-sr-only">{{ endOfExpandableContentAriaText }}</div>
   `, isInline: true, dependencies: [{ kind: "directive", type: i10.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HermesDatagridCell, selector: "hermes-dg-cell" }, { kind: "directive", type: DatagridCellRenderer, selector: "hermes-dg-cell" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesDatagridRowDetail, decorators: [{
             type: Component,
             args: [{
                     selector: 'hermes-dg-row-detail',
-                    template: `
-    <div class="hermes-sr-only">
-      {{ beginningOfExpandableContentAriaText }}
-      {{ commonStrings.keys.datagridExpandableRowsHelperText }}
-    </div>
-    <!--
-      These two containers mirror the ones in the row above and are only used while the detail is
-      column aligned - see columnAligned. They are always rendered so the cells always have
-      somewhere to be moved into, and the pinned one takes itself out of the layout while empty.
-    -->
-    <div class="datagrid-pinned-cells">
-      <ng-container #pinnedCells></ng-container>
-    </div>
-    <ng-container #scrollableCells></ng-container>
-    @if (this.cells?.length > 0) {
-      <ng-container [ngTemplateOutlet]="noCells"></ng-container>
-      <!--
-        Where the cells go back to when the detail stops being column aligned, because a column was
-        unpinned. A view that has been moved into a container cannot be handed back to the content
-        projection it came from, so it needs a container of its own in the same place.
-      -->
-      <ng-container #plainCells></ng-container>
-    }
-    @if (this.cells?.length === 0) {
-      <hermes-dg-cell class="datagrid-container">
-        <ng-container [ngTemplateOutlet]="noCells"></ng-container>
-      </hermes-dg-cell>
-    }
-
-    <ng-template #noCells>
-      <ng-content></ng-content>
-    </ng-template>
-    <div class="hermes-sr-only">{{ endOfExpandableContentAriaText }}</div>
+                    template: `
+    <div class="hermes-sr-only">
+      {{ beginningOfExpandableContentAriaText }}
+      {{ commonStrings.keys.datagridExpandableRowsHelperText }}
+    </div>
+    <!--
+      These two containers mirror the ones in the row above and are only used while the detail is
+      column aligned - see columnAligned. They are always rendered so the cells always have
+      somewhere to be moved into, and the pinned one takes itself out of the layout while empty.
+    -->
+    <div class="datagrid-pinned-cells">
+      <ng-container #pinnedCells></ng-container>
+    </div>
+    <ng-container #scrollableCells></ng-container>
+    @if (this.cells?.length > 0) {
+      <ng-container [ngTemplateOutlet]="noCells"></ng-container>
+      <!--
+        Where the cells go back to when the detail stops being column aligned, because a column was
+        unpinned. A view that has been moved into a container cannot be handed back to the content
+        projection it came from, so it needs a container of its own in the same place.
+      -->
+      <ng-container #plainCells></ng-container>
+    }
+    @if (this.cells?.length === 0) {
+      <hermes-dg-cell class="datagrid-container">
+        <ng-container [ngTemplateOutlet]="noCells"></ng-container>
+      </hermes-dg-cell>
+    }
+
+    <ng-template #noCells>
+      <ng-content></ng-content>
+    </ng-template>
+    <div class="hermes-sr-only">{{ endOfExpandableContentAriaText }}</div>
   `,
                     host: {
                         '[class.datagrid-row-flex]': 'true',
@@ -6757,50 +6757,50 @@ class HermesDatagridFooter {
         return this.columnsService.hasHideableColumns;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesDatagridFooter, deps: [{ token: Selection }, { token: DetailService }, { token: ColumnsService }, { token: i2.HermesCommonStringsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: HermesDatagridFooter, isStandalone: false, selector: "hermes-dg-footer", host: { properties: { "class.datagrid-footer": "true" } }, ngImport: i0, template: `
-    @if (selection.selectionType === SELECTION_TYPE.Multi && selection.current?.length > 0) {
-      <div class="hermes-form-control-disabled">
-        <hermes-checkbox-wrapper class="datagrid-footer-select">
-          <input hermesCheckbox type="checkbox" checked="checked" disabled />
-          <label>{{ selection.current.length }}</label>
-          <span class="hermes-sr-only">{{ commonStrings.keys.selectedRows }}</span>
-        </hermes-checkbox-wrapper>
-      </div>
-    }
-    @if (!detailService.isOpen) {
-      @if (hasHideableColumns) {
-        <hermes-dg-column-toggle></hermes-dg-column-toggle>
-      }
-      <div class="datagrid-footer-description">
-        <ng-content></ng-content>
-      </div>
-    }
-    <ng-content select="hermes-dg-pagination"></ng-content>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: HermesDatagridFooter, isStandalone: false, selector: "hermes-dg-footer", host: { properties: { "class.datagrid-footer": "true" } }, ngImport: i0, template: `
+    @if (selection.selectionType === SELECTION_TYPE.Multi && selection.current?.length > 0) {
+      <div class="hermes-form-control-disabled">
+        <hermes-checkbox-wrapper class="datagrid-footer-select">
+          <input hermesCheckbox type="checkbox" checked="checked" disabled />
+          <label>{{ selection.current.length }}</label>
+          <span class="hermes-sr-only">{{ commonStrings.keys.selectedRows }}</span>
+        </hermes-checkbox-wrapper>
+      </div>
+    }
+    @if (!detailService.isOpen) {
+      @if (hasHideableColumns) {
+        <hermes-dg-column-toggle></hermes-dg-column-toggle>
+      }
+      <div class="datagrid-footer-description">
+        <ng-content></ng-content>
+      </div>
+    }
+    <ng-content select="hermes-dg-pagination"></ng-content>
   `, isInline: true, dependencies: [{ kind: "directive", type: i4.HermesControlLabel, selector: "label", inputs: ["id", "for"] }, { kind: "directive", type: i7.HermesCheckbox, selector: "[hermesCheckbox],[hermesToggle]" }, { kind: "component", type: i7.HermesCheckboxWrapper, selector: "hermes-checkbox-wrapper,hermes-toggle-wrapper" }, { kind: "component", type: HermesDatagridColumnToggle, selector: "hermes-dg-column-toggle" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesDatagridFooter, decorators: [{
             type: Component,
             args: [{
                     selector: 'hermes-dg-footer',
-                    template: `
-    @if (selection.selectionType === SELECTION_TYPE.Multi && selection.current?.length > 0) {
-      <div class="hermes-form-control-disabled">
-        <hermes-checkbox-wrapper class="datagrid-footer-select">
-          <input hermesCheckbox type="checkbox" checked="checked" disabled />
-          <label>{{ selection.current.length }}</label>
-          <span class="hermes-sr-only">{{ commonStrings.keys.selectedRows }}</span>
-        </hermes-checkbox-wrapper>
-      </div>
-    }
-    @if (!detailService.isOpen) {
-      @if (hasHideableColumns) {
-        <hermes-dg-column-toggle></hermes-dg-column-toggle>
-      }
-      <div class="datagrid-footer-description">
-        <ng-content></ng-content>
-      </div>
-    }
-    <ng-content select="hermes-dg-pagination"></ng-content>
+                    template: `
+    @if (selection.selectionType === SELECTION_TYPE.Multi && selection.current?.length > 0) {
+      <div class="hermes-form-control-disabled">
+        <hermes-checkbox-wrapper class="datagrid-footer-select">
+          <input hermesCheckbox type="checkbox" checked="checked" disabled />
+          <label>{{ selection.current.length }}</label>
+          <span class="hermes-sr-only">{{ commonStrings.keys.selectedRows }}</span>
+        </hermes-checkbox-wrapper>
+      </div>
+    }
+    @if (!detailService.isOpen) {
+      @if (hasHideableColumns) {
+        <hermes-dg-column-toggle></hermes-dg-column-toggle>
+      }
+      <div class="datagrid-footer-description">
+        <ng-content></ng-content>
+      </div>
+    }
+    <ng-content select="hermes-dg-pagination"></ng-content>
   `,
                     host: {
                         '[class.datagrid-footer]': 'true',
@@ -6831,30 +6831,30 @@ class HermesDatagridPageSize {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesDatagridPageSize, deps: [{ token: Page }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: HermesDatagridPageSize, isStandalone: false, selector: "hermes-dg-page-size", inputs: { pageSizeOptions: ["hermesPageSizeOptions", "pageSizeOptions"], pageSizeOptionsId: ["hermesPageSizeOptionsId", "pageSizeOptionsId"] }, viewQueries: [{ propertyName: "label", first: true, predicate: HermesControlLabel, descendants: true, static: true }], ngImport: i0, template: `
-    <label [for]="pageSizeOptionsId"><ng-content></ng-content></label>
-    <div class="hermes-native-select-wrapper">
-      <select [id]="pageSizeOptionsId" [class.hermes-page-size-select]="true" [(ngModel)]="page.size">
-        @for (option of pageSizeOptions; track option) {
-          <option [ngValue]="option">{{ option }}</option>
-        }
-      </select>
-    </div>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: HermesDatagridPageSize, isStandalone: false, selector: "hermes-dg-page-size", inputs: { pageSizeOptions: ["hermesPageSizeOptions", "pageSizeOptions"], pageSizeOptionsId: ["hermesPageSizeOptionsId", "pageSizeOptionsId"] }, viewQueries: [{ propertyName: "label", first: true, predicate: HermesControlLabel, descendants: true, static: true }], ngImport: i0, template: `
+    <label [for]="pageSizeOptionsId"><ng-content></ng-content></label>
+    <div class="hermes-native-select-wrapper">
+      <select [id]="pageSizeOptionsId" [class.hermes-page-size-select]="true" [(ngModel)]="page.size">
+        @for (option of pageSizeOptions; track option) {
+          <option [ngValue]="option">{{ option }}</option>
+        }
+      </select>
+    </div>
   `, isInline: true, dependencies: [{ kind: "directive", type: i4.HermesControlLabel, selector: "label", inputs: ["id", "for"] }, { kind: "directive", type: i14.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i14.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i14.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i14.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i14.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesDatagridPageSize, decorators: [{
             type: Component,
             args: [{
                     selector: 'hermes-dg-page-size',
-                    template: `
-    <label [for]="pageSizeOptionsId"><ng-content></ng-content></label>
-    <div class="hermes-native-select-wrapper">
-      <select [id]="pageSizeOptionsId" [class.hermes-page-size-select]="true" [(ngModel)]="page.size">
-        @for (option of pageSizeOptions; track option) {
-          <option [ngValue]="option">{{ option }}</option>
-        }
-      </select>
-    </div>
+                    template: `
+    <label [for]="pageSizeOptionsId"><ng-content></ng-content></label>
+    <div class="hermes-native-select-wrapper">
+      <select [id]="pageSizeOptionsId" [class.hermes-page-size-select]="true" [(ngModel)]="page.size">
+        @for (option of pageSizeOptions; track option) {
+          <option [ngValue]="option">{{ option }}</option>
+        }
+      </select>
+    </div>
   `,
                     standalone: false,
                 }]
@@ -7020,212 +7020,212 @@ class HermesDatagridPagination {
         this.currentPageInputRef.nativeElement.value = this.page.current.toString();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesDatagridPagination, deps: [{ token: Page }, { token: i2.HermesCommonStringsService }, { token: DetailService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: HermesDatagridPagination, isStandalone: false, selector: "hermes-dg-pagination", inputs: { disableCurrentPageInput: ["hermesDgPageInputDisabled", "disableCurrentPageInput"], pageSize: ["hermesDgPageSize", "pageSize"], totalItems: ["hermesDgTotalItems", "totalItems"], lastPage: ["hermesDgLastPage", "lastPage"], currentPage: ["hermesDgPage", "currentPage"] }, outputs: { currentChanged: "hermesDgPageChange" }, host: { properties: { "class.pagination": "true" } }, queries: [{ propertyName: "_pageSizeComponent", first: true, predicate: HermesDatagridPageSize, descendants: true }], viewQueries: [{ propertyName: "currentPageInputRef", first: true, predicate: ["currentPageInput"], descendants: true }], ngImport: i0, template: `
-    @if (!detailService.isOpen) {
-      @if (_pageSizeComponent) {
-        <div class="pagination-size">
-          <ng-content select="hermes-dg-page-size"></ng-content>
-        </div>
-      }
-      <div class="pagination-description">
-        <ng-content></ng-content>
-      </div>
-      @if (page.last > 1) {
-        <div class="pagination-list">
-          <button
-            type="button"
-            class="pagination-first"
-            [disabled]="page.current <= 1"
-            (click)="page.current = 1"
-            [attr.aria-label]="commonStrings.keys.firstPage"
-          >
-            <span class="hermes-sr-only">{{ commonStrings.keys.firstPage }}</span>
-            <hermes-icon shape="step-forward-2" direction="down"></hermes-icon>
-          </button>
-          <button
-            type="button"
-            class="pagination-previous"
-            [disabled]="page.current <= 1"
-            (click)="page.current = page.current - 1"
-            [attr.aria-label]="commonStrings.keys.previousPage"
-          >
-            <span class="hermes-sr-only">{{ commonStrings.keys.previousPage }}</span>
-            <hermes-icon shape="angle" direction="left"></hermes-icon>
-          </button>
-          <div class="pagination-pages">
-            @if (!disableCurrentPageInput) {
-              <input
-                #currentPageInput
-                type="text"
-                class="pagination-current hermes-input"
-                [size]="page.last.toString().length"
-                [value]="page.current"
-                (keydown.enter)="updateCurrentPage($event)"
-                (blur)="verifyCurrentPage($event)"
-                [attr.aria-label]="commonStrings.keys.currentPage"
-              />
-            } @else {
-              <span>{{ page.current }}</span>
-            }
-            &nbsp;/&nbsp;<span [attr.aria-label]="commonStrings.keys.totalPages">{{ page.last }}</span>
-          </div>
-          <button
-            type="button"
-            class="pagination-next"
-            [disabled]="page.current >= page.last"
-            (click)="page.current = page.current + 1"
-            [attr.aria-label]="commonStrings.keys.nextPage"
-          >
-            <span class="hermes-sr-only">{{ commonStrings.keys.nextPage }}</span>
-            <hermes-icon shape="angle" direction="right"></hermes-icon>
-          </button>
-          <button
-            type="button"
-            class="pagination-last"
-            [disabled]="page.current >= page.last"
-            (click)="page.current = page.last"
-            [attr.aria-label]="commonStrings.keys.lastPage"
-          >
-            <span class="hermes-sr-only">{{ commonStrings.keys.lastPage }}</span>
-            <hermes-icon shape="step-forward-2" direction="up"></hermes-icon>
-          </button>
-        </div>
-      }
-    }
-    @if (detailService.isOpen) {
-      <div class="pagination-description-compact">
-        {{ page.firstItem + 1 }}-{{ page.lastItem + 1 }} / {{ page.totalItems }}
-      </div>
-      <div class="pagination-list">
-        <button
-          type="button"
-          class="pagination-previous"
-          [disabled]="page.current <= 1"
-          (click)="page.current = page.current - 1"
-          [attr.aria-label]="commonStrings.keys.previousPage"
-        >
-          <span class="hermes-sr-only">{{ commonStrings.keys.previousPage }}</span>
-          <hermes-icon shape="angle" direction="left"></hermes-icon>
-        </button>
-        <span>{{ page.current }}</span>
-        <button
-          type="button"
-          class="pagination-next"
-          [disabled]="page.current >= page.last"
-          (click)="page.current = page.current + 1"
-          [attr.aria-label]="commonStrings.keys.nextPage"
-        >
-          <span class="hermes-sr-only">{{ commonStrings.keys.nextPage }}</span>
-          <hermes-icon shape="angle" direction="right"></hermes-icon>
-        </button>
-      </div>
-    }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: HermesDatagridPagination, isStandalone: false, selector: "hermes-dg-pagination", inputs: { disableCurrentPageInput: ["hermesDgPageInputDisabled", "disableCurrentPageInput"], pageSize: ["hermesDgPageSize", "pageSize"], totalItems: ["hermesDgTotalItems", "totalItems"], lastPage: ["hermesDgLastPage", "lastPage"], currentPage: ["hermesDgPage", "currentPage"] }, outputs: { currentChanged: "hermesDgPageChange" }, host: { properties: { "class.pagination": "true" } }, queries: [{ propertyName: "_pageSizeComponent", first: true, predicate: HermesDatagridPageSize, descendants: true }], viewQueries: [{ propertyName: "currentPageInputRef", first: true, predicate: ["currentPageInput"], descendants: true }], ngImport: i0, template: `
+    @if (!detailService.isOpen) {
+      @if (_pageSizeComponent) {
+        <div class="pagination-size">
+          <ng-content select="hermes-dg-page-size"></ng-content>
+        </div>
+      }
+      <div class="pagination-description">
+        <ng-content></ng-content>
+      </div>
+      @if (page.last > 1) {
+        <div class="pagination-list">
+          <button
+            type="button"
+            class="pagination-first"
+            [disabled]="page.current <= 1"
+            (click)="page.current = 1"
+            [attr.aria-label]="commonStrings.keys.firstPage"
+          >
+            <span class="hermes-sr-only">{{ commonStrings.keys.firstPage }}</span>
+            <hermes-icon shape="step-forward-2" direction="down"></hermes-icon>
+          </button>
+          <button
+            type="button"
+            class="pagination-previous"
+            [disabled]="page.current <= 1"
+            (click)="page.current = page.current - 1"
+            [attr.aria-label]="commonStrings.keys.previousPage"
+          >
+            <span class="hermes-sr-only">{{ commonStrings.keys.previousPage }}</span>
+            <hermes-icon shape="angle" direction="left"></hermes-icon>
+          </button>
+          <div class="pagination-pages">
+            @if (!disableCurrentPageInput) {
+              <input
+                #currentPageInput
+                type="text"
+                class="pagination-current hermes-input"
+                [size]="page.last.toString().length"
+                [value]="page.current"
+                (keydown.enter)="updateCurrentPage($event)"
+                (blur)="verifyCurrentPage($event)"
+                [attr.aria-label]="commonStrings.keys.currentPage"
+              />
+            } @else {
+              <span>{{ page.current }}</span>
+            }
+            &nbsp;/&nbsp;<span [attr.aria-label]="commonStrings.keys.totalPages">{{ page.last }}</span>
+          </div>
+          <button
+            type="button"
+            class="pagination-next"
+            [disabled]="page.current >= page.last"
+            (click)="page.current = page.current + 1"
+            [attr.aria-label]="commonStrings.keys.nextPage"
+          >
+            <span class="hermes-sr-only">{{ commonStrings.keys.nextPage }}</span>
+            <hermes-icon shape="angle" direction="right"></hermes-icon>
+          </button>
+          <button
+            type="button"
+            class="pagination-last"
+            [disabled]="page.current >= page.last"
+            (click)="page.current = page.last"
+            [attr.aria-label]="commonStrings.keys.lastPage"
+          >
+            <span class="hermes-sr-only">{{ commonStrings.keys.lastPage }}</span>
+            <hermes-icon shape="step-forward-2" direction="up"></hermes-icon>
+          </button>
+        </div>
+      }
+    }
+    @if (detailService.isOpen) {
+      <div class="pagination-description-compact">
+        {{ page.firstItem + 1 }}-{{ page.lastItem + 1 }} / {{ page.totalItems }}
+      </div>
+      <div class="pagination-list">
+        <button
+          type="button"
+          class="pagination-previous"
+          [disabled]="page.current <= 1"
+          (click)="page.current = page.current - 1"
+          [attr.aria-label]="commonStrings.keys.previousPage"
+        >
+          <span class="hermes-sr-only">{{ commonStrings.keys.previousPage }}</span>
+          <hermes-icon shape="angle" direction="left"></hermes-icon>
+        </button>
+        <span>{{ page.current }}</span>
+        <button
+          type="button"
+          class="pagination-next"
+          [disabled]="page.current >= page.last"
+          (click)="page.current = page.current + 1"
+          [attr.aria-label]="commonStrings.keys.nextPage"
+        >
+          <span class="hermes-sr-only">{{ commonStrings.keys.nextPage }}</span>
+          <hermes-icon shape="angle" direction="right"></hermes-icon>
+        </button>
+      </div>
+    }
   `, isInline: true, dependencies: [{ kind: "component", type: i5.HermesIcon, selector: "hermes-icon, hermes-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesDatagridPagination, decorators: [{
             type: Component,
             args: [{
                     selector: 'hermes-dg-pagination',
-                    template: `
-    @if (!detailService.isOpen) {
-      @if (_pageSizeComponent) {
-        <div class="pagination-size">
-          <ng-content select="hermes-dg-page-size"></ng-content>
-        </div>
-      }
-      <div class="pagination-description">
-        <ng-content></ng-content>
-      </div>
-      @if (page.last > 1) {
-        <div class="pagination-list">
-          <button
-            type="button"
-            class="pagination-first"
-            [disabled]="page.current <= 1"
-            (click)="page.current = 1"
-            [attr.aria-label]="commonStrings.keys.firstPage"
-          >
-            <span class="hermes-sr-only">{{ commonStrings.keys.firstPage }}</span>
-            <hermes-icon shape="step-forward-2" direction="down"></hermes-icon>
-          </button>
-          <button
-            type="button"
-            class="pagination-previous"
-            [disabled]="page.current <= 1"
-            (click)="page.current = page.current - 1"
-            [attr.aria-label]="commonStrings.keys.previousPage"
-          >
-            <span class="hermes-sr-only">{{ commonStrings.keys.previousPage }}</span>
-            <hermes-icon shape="angle" direction="left"></hermes-icon>
-          </button>
-          <div class="pagination-pages">
-            @if (!disableCurrentPageInput) {
-              <input
-                #currentPageInput
-                type="text"
-                class="pagination-current hermes-input"
-                [size]="page.last.toString().length"
-                [value]="page.current"
-                (keydown.enter)="updateCurrentPage($event)"
-                (blur)="verifyCurrentPage($event)"
-                [attr.aria-label]="commonStrings.keys.currentPage"
-              />
-            } @else {
-              <span>{{ page.current }}</span>
-            }
-            &nbsp;/&nbsp;<span [attr.aria-label]="commonStrings.keys.totalPages">{{ page.last }}</span>
-          </div>
-          <button
-            type="button"
-            class="pagination-next"
-            [disabled]="page.current >= page.last"
-            (click)="page.current = page.current + 1"
-            [attr.aria-label]="commonStrings.keys.nextPage"
-          >
-            <span class="hermes-sr-only">{{ commonStrings.keys.nextPage }}</span>
-            <hermes-icon shape="angle" direction="right"></hermes-icon>
-          </button>
-          <button
-            type="button"
-            class="pagination-last"
-            [disabled]="page.current >= page.last"
-            (click)="page.current = page.last"
-            [attr.aria-label]="commonStrings.keys.lastPage"
-          >
-            <span class="hermes-sr-only">{{ commonStrings.keys.lastPage }}</span>
-            <hermes-icon shape="step-forward-2" direction="up"></hermes-icon>
-          </button>
-        </div>
-      }
-    }
-    @if (detailService.isOpen) {
-      <div class="pagination-description-compact">
-        {{ page.firstItem + 1 }}-{{ page.lastItem + 1 }} / {{ page.totalItems }}
-      </div>
-      <div class="pagination-list">
-        <button
-          type="button"
-          class="pagination-previous"
-          [disabled]="page.current <= 1"
-          (click)="page.current = page.current - 1"
-          [attr.aria-label]="commonStrings.keys.previousPage"
-        >
-          <span class="hermes-sr-only">{{ commonStrings.keys.previousPage }}</span>
-          <hermes-icon shape="angle" direction="left"></hermes-icon>
-        </button>
-        <span>{{ page.current }}</span>
-        <button
-          type="button"
-          class="pagination-next"
-          [disabled]="page.current >= page.last"
-          (click)="page.current = page.current + 1"
-          [attr.aria-label]="commonStrings.keys.nextPage"
-        >
-          <span class="hermes-sr-only">{{ commonStrings.keys.nextPage }}</span>
-          <hermes-icon shape="angle" direction="right"></hermes-icon>
-        </button>
-      </div>
-    }
+                    template: `
+    @if (!detailService.isOpen) {
+      @if (_pageSizeComponent) {
+        <div class="pagination-size">
+          <ng-content select="hermes-dg-page-size"></ng-content>
+        </div>
+      }
+      <div class="pagination-description">
+        <ng-content></ng-content>
+      </div>
+      @if (page.last > 1) {
+        <div class="pagination-list">
+          <button
+            type="button"
+            class="pagination-first"
+            [disabled]="page.current <= 1"
+            (click)="page.current = 1"
+            [attr.aria-label]="commonStrings.keys.firstPage"
+          >
+            <span class="hermes-sr-only">{{ commonStrings.keys.firstPage }}</span>
+            <hermes-icon shape="step-forward-2" direction="down"></hermes-icon>
+          </button>
+          <button
+            type="button"
+            class="pagination-previous"
+            [disabled]="page.current <= 1"
+            (click)="page.current = page.current - 1"
+            [attr.aria-label]="commonStrings.keys.previousPage"
+          >
+            <span class="hermes-sr-only">{{ commonStrings.keys.previousPage }}</span>
+            <hermes-icon shape="angle" direction="left"></hermes-icon>
+          </button>
+          <div class="pagination-pages">
+            @if (!disableCurrentPageInput) {
+              <input
+                #currentPageInput
+                type="text"
+                class="pagination-current hermes-input"
+                [size]="page.last.toString().length"
+                [value]="page.current"
+                (keydown.enter)="updateCurrentPage($event)"
+                (blur)="verifyCurrentPage($event)"
+                [attr.aria-label]="commonStrings.keys.currentPage"
+              />
+            } @else {
+              <span>{{ page.current }}</span>
+            }
+            &nbsp;/&nbsp;<span [attr.aria-label]="commonStrings.keys.totalPages">{{ page.last }}</span>
+          </div>
+          <button
+            type="button"
+            class="pagination-next"
+            [disabled]="page.current >= page.last"
+            (click)="page.current = page.current + 1"
+            [attr.aria-label]="commonStrings.keys.nextPage"
+          >
+            <span class="hermes-sr-only">{{ commonStrings.keys.nextPage }}</span>
+            <hermes-icon shape="angle" direction="right"></hermes-icon>
+          </button>
+          <button
+            type="button"
+            class="pagination-last"
+            [disabled]="page.current >= page.last"
+            (click)="page.current = page.last"
+            [attr.aria-label]="commonStrings.keys.lastPage"
+          >
+            <span class="hermes-sr-only">{{ commonStrings.keys.lastPage }}</span>
+            <hermes-icon shape="step-forward-2" direction="up"></hermes-icon>
+          </button>
+        </div>
+      }
+    }
+    @if (detailService.isOpen) {
+      <div class="pagination-description-compact">
+        {{ page.firstItem + 1 }}-{{ page.lastItem + 1 }} / {{ page.totalItems }}
+      </div>
+      <div class="pagination-list">
+        <button
+          type="button"
+          class="pagination-previous"
+          [disabled]="page.current <= 1"
+          (click)="page.current = page.current - 1"
+          [attr.aria-label]="commonStrings.keys.previousPage"
+        >
+          <span class="hermes-sr-only">{{ commonStrings.keys.previousPage }}</span>
+          <hermes-icon shape="angle" direction="left"></hermes-icon>
+        </button>
+        <span>{{ page.current }}</span>
+        <button
+          type="button"
+          class="pagination-next"
+          [disabled]="page.current >= page.last"
+          (click)="page.current = page.current + 1"
+          [attr.aria-label]="commonStrings.keys.nextPage"
+        >
+          <span class="hermes-sr-only">{{ commonStrings.keys.nextPage }}</span>
+          <hermes-icon shape="angle" direction="right"></hermes-icon>
+        </button>
+      </div>
+    }
   `,
                     host: { '[class.pagination]': 'true' },
                     standalone: false,
@@ -7881,7 +7881,7 @@ const HERMES_DATAGRID_STANDALONE_DIRECTIVES = [HermesDatagridSingleSelectionValu
 const HERMES_DATAGRID_SHARED_DIRECTIVES = [HermesIfExpanded];
 class HermesDatagridModule {
     constructor() {
-        ClarityIcons.addIcons(ellipsisVerticalIcon, viewColumnsIcon, windowCloseIcon, arrowIcon, timesIcon, twoWayArrowsIcon, stepForward2Icon, angleDoubleIcon, filterGridCircleIcon, filterGridIcon
+        HermesIcons.addIcons(ellipsisVerticalIcon, viewColumnsIcon, windowCloseIcon, arrowIcon, timesIcon, twoWayArrowsIcon, stepForward2Icon, angleDoubleIcon, filterGridCircleIcon, filterGridIcon
         // Only the hermesDgPinnable toggle used these, so they are disabled along with it.
         // pinIcon,
         // unpinIcon