@hermes-ui/angular 0.1.6 → 0.2.0

package/fesm2022/hermes-ui-angular-forms-datepicker.mjs

@@ -11,7 +11,7 @@ import * as i1 from '@hermes-ui/angular/popover/common';
 import { HermesPopoverPosition, HermesPopoverType, DROPDOWN_POSITIONS, HermesPopoverHostDirective, HermesPopoverModuleNext } from '@hermes-ui/angular/popover/common';
 import { Subject, tap } from 'rxjs';
 import * as i5 from '@hermes-ui/angular/icon';
-import { ClarityIcons, successStandardIcon, errorStandardIcon, angleIcon, eventIcon, calendarIcon, HermesIcon } from '@hermes-ui/angular/icon';
+import { HermesIcons, successStandardIcon, errorStandardIcon, angleIcon, eventIcon, calendarIcon, HermesIcon } from '@hermes-ui/angular/icon';
 import * as i6 from '@hermes-ui/angular/layout/vertical-nav';
 import { HermesVerticalNavModule } from '@hermes-ui/angular/layout/vertical-nav';
 import * as i1$1 from '@angular/forms';
@@ -1114,128 +1114,128 @@ class HermesMonthpicker {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesMonthpicker, deps: [{ token: LocaleHelperService }, { token: DateNavigationService }, { token: DatepickerFocusService }, { token: i0.ElementRef }, { token: ViewManagerService }, { token: i4.HermesCommonStringsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: HermesMonthpicker, isStandalone: false, selector: "hermes-monthpicker", host: { attributes: { "role": "application" }, listeners: { "keydown": "onKeyDown($event)" }, properties: { "class.monthpicker": "true" } }, ngImport: i0, template: `
-    <div class="calendar-header in-monthpicker">
-      <div class="year-view-switcher">
-        <button
-          class="calendar-btn yearpicker-trigger"
-          type="button"
-          (click)="changeToYearView()"
-          [attr.aria-label]="yearAttrString"
-          [attr.title]="yearAttrString"
-        >
-          {{ calendarYear }}
-        </button>
-      </div>
-      <div class="calendar-switchers">
-        <button
-          class="calendar-btn switcher"
-          type="button"
-          (click)="previousYear()"
-          [attr.aria-label]="commonStrings.keys.datepickerPreviousMonth"
-        >
-          <hermes-icon shape="angle" direction="left" [attr.title]="commonStrings.keys.datepickerPreviousMonth"></hermes-icon>
-        </button>
-        <button
-          class="calendar-btn switcher"
-          type="button"
-          (click)="currentYear()"
-          [attr.aria-label]="commonStrings.keys.datepickerCurrentMonth"
-        >
-          <hermes-icon shape="event" [attr.title]="commonStrings.keys.datepickerCurrentMonth"></hermes-icon>
-        </button>
-        <button
-          class="calendar-btn switcher"
-          type="button"
-          (click)="nextYear()"
-          [attr.aria-label]="commonStrings.keys.datepickerNextMonth"
-        >
-          <hermes-icon shape="angle" direction="right" [attr.title]="commonStrings.keys.datepickerNextMonth"></hermes-icon>
-        </button>
-      </div>
-    </div>
-    <div class="months">
-      @for (month of monthNames; track month; let monthIndex = $index) {
-        <button
-          type="button"
-          class="calendar-btn month"
-          (click)="changeMonth(monthIndex)"
-          [class.is-selected]="isSelected(monthIndex)"
-          [class.is-start-range]="getIsRangeStartMonth(monthIndex)"
-          [class.is-end-range]="getIsRangeEndMonth(monthIndex)"
-          [class.in-range]="isInRange(monthIndex)"
-          [attr.tabindex]="getTabIndex(monthIndex)"
-          [class.is-today]="calendarYear === currentCalendarYear && monthIndex === currentCalendarMonth"
-          (mouseenter)="onHover(monthIndex)"
-        >
-          {{ month }}
-        </button>
-      }
-    </div>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: HermesMonthpicker, isStandalone: false, selector: "hermes-monthpicker", host: { attributes: { "role": "application" }, listeners: { "keydown": "onKeyDown($event)" }, properties: { "class.monthpicker": "true" } }, ngImport: i0, template: `
+    <div class="calendar-header in-monthpicker">
+      <div class="year-view-switcher">
+        <button
+          class="calendar-btn yearpicker-trigger"
+          type="button"
+          (click)="changeToYearView()"
+          [attr.aria-label]="yearAttrString"
+          [attr.title]="yearAttrString"
+        >
+          {{ calendarYear }}
+        </button>
+      </div>
+      <div class="calendar-switchers">
+        <button
+          class="calendar-btn switcher"
+          type="button"
+          (click)="previousYear()"
+          [attr.aria-label]="commonStrings.keys.datepickerPreviousMonth"
+        >
+          <hermes-icon shape="angle" direction="left" [attr.title]="commonStrings.keys.datepickerPreviousMonth"></hermes-icon>
+        </button>
+        <button
+          class="calendar-btn switcher"
+          type="button"
+          (click)="currentYear()"
+          [attr.aria-label]="commonStrings.keys.datepickerCurrentMonth"
+        >
+          <hermes-icon shape="event" [attr.title]="commonStrings.keys.datepickerCurrentMonth"></hermes-icon>
+        </button>
+        <button
+          class="calendar-btn switcher"
+          type="button"
+          (click)="nextYear()"
+          [attr.aria-label]="commonStrings.keys.datepickerNextMonth"
+        >
+          <hermes-icon shape="angle" direction="right" [attr.title]="commonStrings.keys.datepickerNextMonth"></hermes-icon>
+        </button>
+      </div>
+    </div>
+    <div class="months">
+      @for (month of monthNames; track month; let monthIndex = $index) {
+        <button
+          type="button"
+          class="calendar-btn month"
+          (click)="changeMonth(monthIndex)"
+          [class.is-selected]="isSelected(monthIndex)"
+          [class.is-start-range]="getIsRangeStartMonth(monthIndex)"
+          [class.is-end-range]="getIsRangeEndMonth(monthIndex)"
+          [class.in-range]="isInRange(monthIndex)"
+          [attr.tabindex]="getTabIndex(monthIndex)"
+          [class.is-today]="calendarYear === currentCalendarYear && monthIndex === currentCalendarMonth"
+          (mouseenter)="onHover(monthIndex)"
+        >
+          {{ month }}
+        </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: HermesMonthpicker, decorators: [{
             type: Component,
             args: [{
                     selector: 'hermes-monthpicker',
-                    template: `
-    <div class="calendar-header in-monthpicker">
-      <div class="year-view-switcher">
-        <button
-          class="calendar-btn yearpicker-trigger"
-          type="button"
-          (click)="changeToYearView()"
-          [attr.aria-label]="yearAttrString"
-          [attr.title]="yearAttrString"
-        >
-          {{ calendarYear }}
-        </button>
-      </div>
-      <div class="calendar-switchers">
-        <button
-          class="calendar-btn switcher"
-          type="button"
-          (click)="previousYear()"
-          [attr.aria-label]="commonStrings.keys.datepickerPreviousMonth"
-        >
-          <hermes-icon shape="angle" direction="left" [attr.title]="commonStrings.keys.datepickerPreviousMonth"></hermes-icon>
-        </button>
-        <button
-          class="calendar-btn switcher"
-          type="button"
-          (click)="currentYear()"
-          [attr.aria-label]="commonStrings.keys.datepickerCurrentMonth"
-        >
-          <hermes-icon shape="event" [attr.title]="commonStrings.keys.datepickerCurrentMonth"></hermes-icon>
-        </button>
-        <button
-          class="calendar-btn switcher"
-          type="button"
-          (click)="nextYear()"
-          [attr.aria-label]="commonStrings.keys.datepickerNextMonth"
-        >
-          <hermes-icon shape="angle" direction="right" [attr.title]="commonStrings.keys.datepickerNextMonth"></hermes-icon>
-        </button>
-      </div>
-    </div>
-    <div class="months">
-      @for (month of monthNames; track month; let monthIndex = $index) {
-        <button
-          type="button"
-          class="calendar-btn month"
-          (click)="changeMonth(monthIndex)"
-          [class.is-selected]="isSelected(monthIndex)"
-          [class.is-start-range]="getIsRangeStartMonth(monthIndex)"
-          [class.is-end-range]="getIsRangeEndMonth(monthIndex)"
-          [class.in-range]="isInRange(monthIndex)"
-          [attr.tabindex]="getTabIndex(monthIndex)"
-          [class.is-today]="calendarYear === currentCalendarYear && monthIndex === currentCalendarMonth"
-          (mouseenter)="onHover(monthIndex)"
-        >
-          {{ month }}
-        </button>
-      }
-    </div>
+                    template: `
+    <div class="calendar-header in-monthpicker">
+      <div class="year-view-switcher">
+        <button
+          class="calendar-btn yearpicker-trigger"
+          type="button"
+          (click)="changeToYearView()"
+          [attr.aria-label]="yearAttrString"
+          [attr.title]="yearAttrString"
+        >
+          {{ calendarYear }}
+        </button>
+      </div>
+      <div class="calendar-switchers">
+        <button
+          class="calendar-btn switcher"
+          type="button"
+          (click)="previousYear()"
+          [attr.aria-label]="commonStrings.keys.datepickerPreviousMonth"
+        >
+          <hermes-icon shape="angle" direction="left" [attr.title]="commonStrings.keys.datepickerPreviousMonth"></hermes-icon>
+        </button>
+        <button
+          class="calendar-btn switcher"
+          type="button"
+          (click)="currentYear()"
+          [attr.aria-label]="commonStrings.keys.datepickerCurrentMonth"
+        >
+          <hermes-icon shape="event" [attr.title]="commonStrings.keys.datepickerCurrentMonth"></hermes-icon>
+        </button>
+        <button
+          class="calendar-btn switcher"
+          type="button"
+          (click)="nextYear()"
+          [attr.aria-label]="commonStrings.keys.datepickerNextMonth"
+        >
+          <hermes-icon shape="angle" direction="right" [attr.title]="commonStrings.keys.datepickerNextMonth"></hermes-icon>
+        </button>
+      </div>
+    </div>
+    <div class="months">
+      @for (month of monthNames; track month; let monthIndex = $index) {
+        <button
+          type="button"
+          class="calendar-btn month"
+          (click)="changeMonth(monthIndex)"
+          [class.is-selected]="isSelected(monthIndex)"
+          [class.is-start-range]="getIsRangeStartMonth(monthIndex)"
+          [class.is-end-range]="getIsRangeEndMonth(monthIndex)"
+          [class.in-range]="isInRange(monthIndex)"
+          [attr.tabindex]="getTabIndex(monthIndex)"
+          [class.is-today]="calendarYear === currentCalendarYear && monthIndex === currentCalendarMonth"
+          (mouseenter)="onHover(monthIndex)"
+        >
+          {{ month }}
+        </button>
+      }
+    </div>
   `,
                     host: {
                         '[class.monthpicker]': 'true',
@@ -1473,126 +1473,126 @@ class HermesYearpicker {
         this._datepickerFocusService.focusCell(this._elRef);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesYearpicker, deps: [{ token: DateNavigationService }, { token: ViewManagerService }, { token: DatepickerFocusService }, { token: i0.ElementRef }, { token: i4.HermesCommonStringsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: HermesYearpicker, isStandalone: false, selector: "hermes-yearpicker", host: { attributes: { "role": "application" }, listeners: { "keydown": "onKeyDown($event)" }, properties: { "class.yearpicker": "true" } }, ngImport: i0, template: `
-    <div class="calendar-header">
-      <div class="calendar-pickers">
-        <button class="calendar-btn yearpicker-trigger year-range" type="button" (click)="changeToDayView()">
-          {{ yearRangeModel.yearRange[0] }} - {{ yearRangeModel.yearRange[yearRangeModel.yearRange.length - 1] }}
-        </button>
-      </div>
-      <div class="year-switchers">
-        <button
-          class="calendar-btn switcher"
-          type="button"
-          (click)="previousDecade()"
-          [attr.aria-label]="commonStrings.keys.datepickerPreviousDecade"
-        >
-          <hermes-icon
-            shape="angle"
-            direction="left"
-            [attr.title]="commonStrings.keys.datepickerPreviousDecade"
-          ></hermes-icon>
-        </button>
-        <button
-          class="calendar-btn switcher"
-          type="button"
-          (click)="currentDecade()"
-          [attr.aria-label]="commonStrings.keys.datepickerCurrentDecade"
-        >
-          <hermes-icon shape="event" [attr.title]="commonStrings.keys.datepickerCurrentDecade"></hermes-icon>
-        </button>
-        <button
-          class="calendar-btn switcher"
-          type="button"
-          (click)="nextDecade()"
-          [attr.aria-label]="commonStrings.keys.datepickerNextDecade"
-        >
-          <hermes-icon shape="angle" direction="right" [attr.title]="commonStrings.keys.datepickerNextDecade"></hermes-icon>
-        </button>
-      </div>
-    </div>
-
-    <div class="years">
-      @for (year of yearRangeModel.yearRange; track year) {
-        <button
-          type="button"
-          class="calendar-btn year"
-          [attr.tabindex]="getTabIndex(year)"
-          [class.is-selected]="year === selectedStartYear || year === selectedEndYear"
-          [class.is-start-range]="getIsRangeStartYear(year)"
-          [class.is-end-range]="getIsRangeEndYear(year)"
-          [class.in-range]="isInRange(year)"
-          [class.is-today]="isCurrentCalendarYear(year)"
-          (click)="changeYear(year)"
-          (mouseenter)="onHover(year)"
-        >
-          {{ year }}
-        </button>
-      }
-    </div>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: HermesYearpicker, isStandalone: false, selector: "hermes-yearpicker", host: { attributes: { "role": "application" }, listeners: { "keydown": "onKeyDown($event)" }, properties: { "class.yearpicker": "true" } }, ngImport: i0, template: `
+    <div class="calendar-header">
+      <div class="calendar-pickers">
+        <button class="calendar-btn yearpicker-trigger year-range" type="button" (click)="changeToDayView()">
+          {{ yearRangeModel.yearRange[0] }} - {{ yearRangeModel.yearRange[yearRangeModel.yearRange.length - 1] }}
+        </button>
+      </div>
+      <div class="year-switchers">
+        <button
+          class="calendar-btn switcher"
+          type="button"
+          (click)="previousDecade()"
+          [attr.aria-label]="commonStrings.keys.datepickerPreviousDecade"
+        >
+          <hermes-icon
+            shape="angle"
+            direction="left"
+            [attr.title]="commonStrings.keys.datepickerPreviousDecade"
+          ></hermes-icon>
+        </button>
+        <button
+          class="calendar-btn switcher"
+          type="button"
+          (click)="currentDecade()"
+          [attr.aria-label]="commonStrings.keys.datepickerCurrentDecade"
+        >
+          <hermes-icon shape="event" [attr.title]="commonStrings.keys.datepickerCurrentDecade"></hermes-icon>
+        </button>
+        <button
+          class="calendar-btn switcher"
+          type="button"
+          (click)="nextDecade()"
+          [attr.aria-label]="commonStrings.keys.datepickerNextDecade"
+        >
+          <hermes-icon shape="angle" direction="right" [attr.title]="commonStrings.keys.datepickerNextDecade"></hermes-icon>
+        </button>
+      </div>
+    </div>
+
+    <div class="years">
+      @for (year of yearRangeModel.yearRange; track year) {
+        <button
+          type="button"
+          class="calendar-btn year"
+          [attr.tabindex]="getTabIndex(year)"
+          [class.is-selected]="year === selectedStartYear || year === selectedEndYear"
+          [class.is-start-range]="getIsRangeStartYear(year)"
+          [class.is-end-range]="getIsRangeEndYear(year)"
+          [class.in-range]="isInRange(year)"
+          [class.is-today]="isCurrentCalendarYear(year)"
+          (click)="changeYear(year)"
+          (mouseenter)="onHover(year)"
+        >
+          {{ year }}
+        </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: HermesYearpicker, decorators: [{
             type: Component,
             args: [{
                     selector: 'hermes-yearpicker',
-                    template: `
-    <div class="calendar-header">
-      <div class="calendar-pickers">
-        <button class="calendar-btn yearpicker-trigger year-range" type="button" (click)="changeToDayView()">
-          {{ yearRangeModel.yearRange[0] }} - {{ yearRangeModel.yearRange[yearRangeModel.yearRange.length - 1] }}
-        </button>
-      </div>
-      <div class="year-switchers">
-        <button
-          class="calendar-btn switcher"
-          type="button"
-          (click)="previousDecade()"
-          [attr.aria-label]="commonStrings.keys.datepickerPreviousDecade"
-        >
-          <hermes-icon
-            shape="angle"
-            direction="left"
-            [attr.title]="commonStrings.keys.datepickerPreviousDecade"
-          ></hermes-icon>
-        </button>
-        <button
-          class="calendar-btn switcher"
-          type="button"
-          (click)="currentDecade()"
-          [attr.aria-label]="commonStrings.keys.datepickerCurrentDecade"
-        >
-          <hermes-icon shape="event" [attr.title]="commonStrings.keys.datepickerCurrentDecade"></hermes-icon>
-        </button>
-        <button
-          class="calendar-btn switcher"
-          type="button"
-          (click)="nextDecade()"
-          [attr.aria-label]="commonStrings.keys.datepickerNextDecade"
-        >
-          <hermes-icon shape="angle" direction="right" [attr.title]="commonStrings.keys.datepickerNextDecade"></hermes-icon>
-        </button>
-      </div>
-    </div>
-
-    <div class="years">
-      @for (year of yearRangeModel.yearRange; track year) {
-        <button
-          type="button"
-          class="calendar-btn year"
-          [attr.tabindex]="getTabIndex(year)"
-          [class.is-selected]="year === selectedStartYear || year === selectedEndYear"
-          [class.is-start-range]="getIsRangeStartYear(year)"
-          [class.is-end-range]="getIsRangeEndYear(year)"
-          [class.in-range]="isInRange(year)"
-          [class.is-today]="isCurrentCalendarYear(year)"
-          (click)="changeYear(year)"
-          (mouseenter)="onHover(year)"
-        >
-          {{ year }}
-        </button>
-      }
-    </div>
+                    template: `
+    <div class="calendar-header">
+      <div class="calendar-pickers">
+        <button class="calendar-btn yearpicker-trigger year-range" type="button" (click)="changeToDayView()">
+          {{ yearRangeModel.yearRange[0] }} - {{ yearRangeModel.yearRange[yearRangeModel.yearRange.length - 1] }}
+        </button>
+      </div>
+      <div class="year-switchers">
+        <button
+          class="calendar-btn switcher"
+          type="button"
+          (click)="previousDecade()"
+          [attr.aria-label]="commonStrings.keys.datepickerPreviousDecade"
+        >
+          <hermes-icon
+            shape="angle"
+            direction="left"
+            [attr.title]="commonStrings.keys.datepickerPreviousDecade"
+          ></hermes-icon>
+        </button>
+        <button
+          class="calendar-btn switcher"
+          type="button"
+          (click)="currentDecade()"
+          [attr.aria-label]="commonStrings.keys.datepickerCurrentDecade"
+        >
+          <hermes-icon shape="event" [attr.title]="commonStrings.keys.datepickerCurrentDecade"></hermes-icon>
+        </button>
+        <button
+          class="calendar-btn switcher"
+          type="button"
+          (click)="nextDecade()"
+          [attr.aria-label]="commonStrings.keys.datepickerNextDecade"
+        >
+          <hermes-icon shape="angle" direction="right" [attr.title]="commonStrings.keys.datepickerNextDecade"></hermes-icon>
+        </button>
+      </div>
+    </div>
+
+    <div class="years">
+      @for (year of yearRangeModel.yearRange; track year) {
+        <button
+          type="button"
+          class="calendar-btn year"
+          [attr.tabindex]="getTabIndex(year)"
+          [class.is-selected]="year === selectedStartYear || year === selectedEndYear"
+          [class.is-start-range]="getIsRangeStartYear(year)"
+          [class.is-end-range]="getIsRangeEndYear(year)"
+          [class.in-range]="isInRange(year)"
+          [class.is-today]="isCurrentCalendarYear(year)"
+          (click)="changeYear(year)"
+          (mouseenter)="onHover(year)"
+        >
+          {{ year }}
+        </button>
+      }
+    </div>
   `,
                     host: {
                         '[class.yearpicker]': 'true',
@@ -1889,52 +1889,52 @@ class HermesDay {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesDay, deps: [{ token: DateNavigationService }, { token: i4.HermesCommonStringsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.22", type: HermesDay, isStandalone: false, selector: "hermes-day", inputs: { dayView: ["hermesDayView", "dayView"] }, outputs: { onSelectDay: "selectDay" }, host: { listeners: { "mouseenter": "hoverListener()" }, properties: { "class.day": "true" } }, ngImport: i0, template: `
-    <button
-      class="day-btn"
-      type="button"
-      [class.is-today]="dayView.isTodaysDate"
-      [class.is-excluded]="dayView.isExcluded"
-      [class.is-disabled]="dayView.isDisabled"
-      [class.is-selected]="dayView.isSelected"
-      [class.in-range]="isInRange()"
-      [class.is-start-range]="isRangeStartDay"
-      [class.is-end-range]="isRangeEndDay"
-      [attr.tabindex]="dayView.tabIndex"
-      (click)="selectDay()"
-      (focus)="onDayViewFocus()"
-      [attr.aria-current]="dayView.isTodaysDate ? 'date' : 'false'"
-      [attr.aria-label]="dayString"
-      [attr.aria-selected]="dayView.isSelected"
-    >
-      {{ dayView.dayModel.date }}
-    </button>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.22", type: HermesDay, isStandalone: false, selector: "hermes-day", inputs: { dayView: ["hermesDayView", "dayView"] }, outputs: { onSelectDay: "selectDay" }, host: { listeners: { "mouseenter": "hoverListener()" }, properties: { "class.day": "true" } }, ngImport: i0, template: `
+    <button
+      class="day-btn"
+      type="button"
+      [class.is-today]="dayView.isTodaysDate"
+      [class.is-excluded]="dayView.isExcluded"
+      [class.is-disabled]="dayView.isDisabled"
+      [class.is-selected]="dayView.isSelected"
+      [class.in-range]="isInRange()"
+      [class.is-start-range]="isRangeStartDay"
+      [class.is-end-range]="isRangeEndDay"
+      [attr.tabindex]="dayView.tabIndex"
+      (click)="selectDay()"
+      (focus)="onDayViewFocus()"
+      [attr.aria-current]="dayView.isTodaysDate ? 'date' : 'false'"
+      [attr.aria-label]="dayString"
+      [attr.aria-selected]="dayView.isSelected"
+    >
+      {{ dayView.dayModel.date }}
+    </button>
   `, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesDay, decorators: [{
             type: Component,
             args: [{
                     selector: 'hermes-day',
-                    template: `
-    <button
-      class="day-btn"
-      type="button"
-      [class.is-today]="dayView.isTodaysDate"
-      [class.is-excluded]="dayView.isExcluded"
-      [class.is-disabled]="dayView.isDisabled"
-      [class.is-selected]="dayView.isSelected"
-      [class.in-range]="isInRange()"
-      [class.is-start-range]="isRangeStartDay"
-      [class.is-end-range]="isRangeEndDay"
-      [attr.tabindex]="dayView.tabIndex"
-      (click)="selectDay()"
-      (focus)="onDayViewFocus()"
-      [attr.aria-current]="dayView.isTodaysDate ? 'date' : 'false'"
-      [attr.aria-label]="dayString"
-      [attr.aria-selected]="dayView.isSelected"
-    >
-      {{ dayView.dayModel.date }}
-    </button>
+                    template: `
+    <button
+      class="day-btn"
+      type="button"
+      [class.is-today]="dayView.isTodaysDate"
+      [class.is-excluded]="dayView.isExcluded"
+      [class.is-disabled]="dayView.isDisabled"
+      [class.is-selected]="dayView.isSelected"
+      [class.in-range]="isInRange()"
+      [class.is-start-range]="isRangeStartDay"
+      [class.is-end-range]="isRangeEndDay"
+      [attr.tabindex]="dayView.tabIndex"
+      (click)="selectDay()"
+      (focus)="onDayViewFocus()"
+      [attr.aria-current]="dayView.isTodaysDate ? 'date' : 'false'"
+      [attr.aria-label]="dayString"
+      [attr.aria-selected]="dayView.isSelected"
+    >
+      {{ dayView.dayModel.date }}
+    </button>
   `,
                     host: { '[class.day]': 'true' },
                     standalone: false,
@@ -2218,18 +2218,18 @@ class HermesDatepickerActions {
         this.popoverService.open = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesDatepickerActions, deps: [{ token: i4.HermesCommonStringsService }, { token: i1.HermesPopoverService }, { token: DateNavigationService }, { token: DateFormControlService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.22", type: HermesDatepickerActions, isStandalone: false, selector: "hermes-datepicker-actions", host: { properties: { "class.datepicker-actions": "true" } }, ngImport: i0, template: `
-    <button class="btn btn-outline" (click)="cancel()">{{ commonStrings.keys.cancel }}</button>
-    <button class="btn btn-primary" (click)="apply()">{{ commonStrings.keys.apply }}</button>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.22", type: HermesDatepickerActions, isStandalone: false, selector: "hermes-datepicker-actions", host: { properties: { "class.datepicker-actions": "true" } }, ngImport: i0, template: `
+    <button class="btn btn-outline" (click)="cancel()">{{ commonStrings.keys.cancel }}</button>
+    <button class="btn btn-primary" (click)="apply()">{{ commonStrings.keys.apply }}</button>
   `, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesDatepickerActions, decorators: [{
             type: Component,
             args: [{
                     selector: 'hermes-datepicker-actions',
-                    template: `
-    <button class="btn btn-outline" (click)="cancel()">{{ commonStrings.keys.cancel }}</button>
-    <button class="btn btn-primary" (click)="apply()">{{ commonStrings.keys.apply }}</button>
+                    template: `
+    <button class="btn btn-outline" (click)="cancel()">{{ commonStrings.keys.cancel }}</button>
+    <button class="btn btn-primary" (click)="apply()">{{ commonStrings.keys.apply }}</button>
   `,
                     host: {
                         '[class.datepicker-actions]': 'true',
@@ -2284,7 +2284,7 @@ class HermesDatepickerViewManager {
         this.dateNavigationService.moveToSpecificMonth(startDate);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesDatepickerViewManager, deps: [{ token: i4.HermesCommonStringsService }, { token: ViewManagerService }, { token: DateNavigationService }, { token: DateIOService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: HermesDatepickerViewManager, isStandalone: false, selector: "hermes-datepicker-view-manager", host: { attributes: { "role": "dialog" }, properties: { "class.datepicker": "true", "class.has-range-option": "hasRangeOptions", "class.has-action-buttons": "hasActionButtons", "attr.aria-modal": "true", "attr.aria-label": "commonStrings.keys.datepickerDialogLabel" } }, providers: [DatepickerFocusService], ngImport: i0, template: "<!--\r\n  ~ Copyright (c) 2016-2026 Broadcom. All Rights Reserved.\r\n  ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\r\n  ~ This software is released under MIT license.\r\n  ~ The full license information can be found in LICENSE in the root directory of this project.\r\n  -->\r\n\r\n@if (hasRangeOptions) {\r\n<hermes-vertical-nav class=\"hermes-date-range-picker-nav\">\r\n  @for (option of dateRangeOptions; track option) {\r\n  <a\r\n    hermesVerticalNavLink\r\n    href=\"javascript:void(0)\"\r\n    [attr.aria-label]=\"option?.label\"\r\n    tabindex=\"0\"\r\n    (keyup.enter)=\"onRangeOptionSelect(option)\"\r\n    (click)=\"onRangeOptionSelect(option)\"\r\n  >\r\n    {{option.label}}\r\n  </a>\r\n  }\r\n</hermes-vertical-nav>\r\n<ng-container *ngTemplateOutlet=\"calendarView\"></ng-container>\r\n} @else {\r\n<div class=\"datepicker-view-manager\">\r\n  @if (isMonthView) {\r\n  <hermes-monthpicker></hermes-monthpicker>\r\n  } @if (isYearView) {\r\n  <hermes-yearpicker></hermes-yearpicker>\r\n  } @if (isDayView) {\r\n  <hermes-daypicker></hermes-daypicker>\r\n  } @if (hasActionButtons) {\r\n  <hermes-datepicker-actions></hermes-datepicker-actions>\r\n  }\r\n</div>\r\n}\r\n\r\n<ng-template #calendarView>\r\n  <div class=\"datepicker-view-manager\">\r\n    @if (isMonthView) {\r\n    <hermes-monthpicker></hermes-monthpicker>\r\n    } @if (isYearView) {\r\n    <hermes-yearpicker></hermes-yearpicker>\r\n    } @if (isDayView) {\r\n    <hermes-daypicker></hermes-daypicker>\r\n    } @if (hasActionButtons) {\r\n    <hermes-datepicker-actions></hermes-datepicker-actions>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i5$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i6.HermesVerticalNav, selector: "hermes-vertical-nav", inputs: ["hermesVerticalNavToggleLabel", "hermesVerticalNavPinnable", "hermesVerticalNavCollapsible", "hermesVerticalNavCollapsed"], outputs: ["hermesVerticalNavCollapsedChange"] }, { kind: "component", type: i6.HermesVerticalNavLink, selector: "[hermesVerticalNavLink]" }, { kind: "component", type: HermesMonthpicker, selector: "hermes-monthpicker" }, { kind: "component", type: HermesYearpicker, selector: "hermes-yearpicker" }, { kind: "component", type: HermesDaypicker, selector: "hermes-daypicker" }, { kind: "component", type: HermesDatepickerActions, selector: "hermes-datepicker-actions" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: HermesDatepickerViewManager, isStandalone: false, selector: "hermes-datepicker-view-manager", host: { attributes: { "role": "dialog" }, properties: { "class.datepicker": "true", "class.has-range-option": "hasRangeOptions", "class.has-action-buttons": "hasActionButtons", "attr.aria-modal": "true", "attr.aria-label": "commonStrings.keys.datepickerDialogLabel" } }, providers: [DatepickerFocusService], ngImport: i0, template: "<!--\r\n  ~ Copyright (c) 2016-2026 Broadcom. All Rights Reserved.\r\n  ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\r\n  ~ This software is released under MIT license.\r\n  ~ The full license information can be found in LICENSE in the root directory of this project.\r\n  -->\r\n\r\n@if (hasRangeOptions) {\r\n<hermes-vertical-nav class=\"hermes-date-range-picker-nav\">\r\n  @for (option of dateRangeOptions; track option) {\r\n  <a\r\n    hermesVerticalNavLink\r\n    href=\"javascript:void(0)\"\r\n    [attr.aria-label]=\"option?.label\"\r\n    tabindex=\"0\"\r\n    (keyup.enter)=\"onRangeOptionSelect(option)\"\r\n    (click)=\"onRangeOptionSelect(option)\"\r\n  >\r\n    {{option.label}}\r\n  </a>\r\n  }\r\n</hermes-vertical-nav>\r\n<ng-container *ngTemplateOutlet=\"calendarView\"></ng-container>\r\n} @else {\r\n<div class=\"datepicker-view-manager\">\r\n  @if (isMonthView) {\r\n  <hermes-monthpicker></hermes-monthpicker>\r\n  } @if (isYearView) {\r\n  <hermes-yearpicker></hermes-yearpicker>\r\n  } @if (isDayView) {\r\n  <hermes-daypicker></hermes-daypicker>\r\n  } @if (hasActionButtons) {\r\n  <hermes-datepicker-actions></hermes-datepicker-actions>\r\n  }\r\n</div>\r\n}\r\n\r\n<ng-template #calendarView>\r\n  <div class=\"datepicker-view-manager\">\r\n    @if (isMonthView) {\r\n    <hermes-monthpicker></hermes-monthpicker>\r\n    } @if (isYearView) {\r\n    <hermes-yearpicker></hermes-yearpicker>\r\n    } @if (isDayView) {\r\n    <hermes-daypicker></hermes-daypicker>\r\n    } @if (hasActionButtons) {\r\n    <hermes-datepicker-actions></hermes-datepicker-actions>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i5$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i6.HermesVerticalNav, selector: "hermes-vertical-nav", inputs: ["hermesVerticalNavToggleLabel", "hermesVerticalNavPinnable", "hermesVerticalNavLabel", "hermesVerticalNavMode", "hermesVerticalNavFooter", "hermesVerticalNavAutoWidth", "hermesVerticalNavFooterLabels", "hermesVerticalNavCollapsible", "hermesVerticalNavCollapsed"], outputs: ["hermesVerticalNavModeChange", "hermesVerticalNavCollapsedChange"] }, { kind: "component", type: i6.HermesVerticalNavLink, selector: "[hermesVerticalNavLink]" }, { kind: "component", type: HermesMonthpicker, selector: "hermes-monthpicker" }, { kind: "component", type: HermesYearpicker, selector: "hermes-yearpicker" }, { kind: "component", type: HermesDaypicker, selector: "hermes-daypicker" }, { kind: "component", type: HermesDatepickerActions, selector: "hermes-datepicker-actions" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesDatepickerViewManager, decorators: [{
             type: Component,
@@ -2480,110 +2480,110 @@ class HermesDateContainer extends HermesAbstractContainer {
             DatepickerEnabledService,
             DateFormControlService,
             ViewManagerService,
-        ], viewQueries: [{ propertyName: "actionButton", first: true, predicate: ["actionButton"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i1.HermesPopoverHostDirective }], ngImport: i0, template: `
-    <ng-content select="label"></ng-content>
-    @if (!label && addGrid()) {
-      <label></label>
-    }
-    <div class="hermes-control-container" [ngClass]="controlClass()">
-      <div class="hermes-input-wrapper" hermesPopoverOrigin>
-        <div class="hermes-input-group" [class.hermes-focus]="focus">
-          <!-- render range inputs only if using hermes-date-range-container -->
-          @if (isRangePicker) {
-            <ng-content select="[hermesStartDate]"></ng-content>
-            <span class="date-range-separator">-</span>
-            <ng-content select="[hermesEndDate]"></ng-content>
-          }
-          <!-- no @if for the singe-date input because it breaks the "auto-wrapped" date picker -->
-          <ng-content select="[hermesDate]"></ng-content>
-          @if (isEnabled) {
-            <button
-              #actionButton
-              type="button"
-              hermesPopoverOpenCloseButton
-              class="hermes-input-group-icon-action"
-              [disabled]="isInputDateDisabled"
-            >
-              <hermes-icon status="info" shape="calendar"></hermes-icon>
-            </button>
-          }
-          <hermes-datepicker-view-manager
-            *hermesPopoverContent="
-              open;
-              at: popoverPosition;
-              type: popoverType;
-              outsideClickToClose: true;
-              scrollToClose: true
-            "
-            cdkTrapFocus
-          ></hermes-datepicker-view-manager>
-        </div>
-      </div>
-      @if (showHelper) {
-        <ng-content select="hermes-control-helper"></ng-content>
-      }
-      @if (showInvalid) {
-        <ng-content select="hermes-control-error"></ng-content>
-      }
-      @if (showValid) {
-        <ng-content select="hermes-control-success"></ng-content>
-      }
-    </div>
+        ], viewQueries: [{ propertyName: "actionButton", first: true, predicate: ["actionButton"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i1.HermesPopoverHostDirective }], ngImport: i0, template: `
+    <ng-content select="label"></ng-content>
+    @if (!label && addGrid()) {
+      <label></label>
+    }
+    <div class="hermes-control-container" [ngClass]="controlClass()">
+      <div class="hermes-input-wrapper" hermesPopoverOrigin>
+        <div class="hermes-input-group" [class.hermes-focus]="focus">
+          <!-- render range inputs only if using hermes-date-range-container -->
+          @if (isRangePicker) {
+            <ng-content select="[hermesStartDate]"></ng-content>
+            <span class="date-range-separator">-</span>
+            <ng-content select="[hermesEndDate]"></ng-content>
+          }
+          <!-- no @if for the singe-date input because it breaks the "auto-wrapped" date picker -->
+          <ng-content select="[hermesDate]"></ng-content>
+          @if (isEnabled) {
+            <button
+              #actionButton
+              type="button"
+              hermesPopoverOpenCloseButton
+              class="hermes-input-group-icon-action"
+              [disabled]="isInputDateDisabled"
+            >
+              <hermes-icon status="info" shape="calendar"></hermes-icon>
+            </button>
+          }
+          <hermes-datepicker-view-manager
+            *hermesPopoverContent="
+              open;
+              at: popoverPosition;
+              type: popoverType;
+              outsideClickToClose: true;
+              scrollToClose: true
+            "
+            cdkTrapFocus
+          ></hermes-datepicker-view-manager>
+        </div>
+      </div>
+      @if (showHelper) {
+        <ng-content select="hermes-control-helper"></ng-content>
+      }
+      @if (showInvalid) {
+        <ng-content select="hermes-control-error"></ng-content>
+      }
+      @if (showValid) {
+        <ng-content select="hermes-control-success"></ng-content>
+      }
+    </div>
   `, isInline: true, dependencies: [{ kind: "directive", type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.CdkTrapFocusModule_CdkTrapFocus, selector: "[cdkTrapFocus]" }, { kind: "directive", type: i1.HermesPopoverOrigin, selector: "[hermesPopoverOrigin]" }, { kind: "directive", type: i1.HermesPopoverOpenCloseButton, selector: "[hermesPopoverOpenCloseButton]", outputs: ["hermesPopoverOpenCloseChange"] }, { kind: "directive", type: i1.HermesPopoverContent, selector: "[hermesPopoverContent]", inputs: ["hermesPopoverContent", "hermesPopoverContentAt", "hermesPopoverContentAvailablePositions", "hermesPopoverContentType", "hermesPopoverContentOutsideClickToClose", "hermesPopoverContentScrollToClose", "hermesPopoverContentOrigin"] }, { kind: "component", type: i5.HermesIcon, selector: "hermes-icon, hermes-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "directive", type: i7.HermesControlLabel, selector: "label", inputs: ["id", "for"] }, { kind: "component", type: HermesDatepickerViewManager, selector: "hermes-datepicker-view-manager" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesDateContainer, decorators: [{
             type: Component,
             args: [{
                     selector: 'hermes-date-container, hermes-date-range-container',
-                    template: `
-    <ng-content select="label"></ng-content>
-    @if (!label && addGrid()) {
-      <label></label>
-    }
-    <div class="hermes-control-container" [ngClass]="controlClass()">
-      <div class="hermes-input-wrapper" hermesPopoverOrigin>
-        <div class="hermes-input-group" [class.hermes-focus]="focus">
-          <!-- render range inputs only if using hermes-date-range-container -->
-          @if (isRangePicker) {
-            <ng-content select="[hermesStartDate]"></ng-content>
-            <span class="date-range-separator">-</span>
-            <ng-content select="[hermesEndDate]"></ng-content>
-          }
-          <!-- no @if for the singe-date input because it breaks the "auto-wrapped" date picker -->
-          <ng-content select="[hermesDate]"></ng-content>
-          @if (isEnabled) {
-            <button
-              #actionButton
-              type="button"
-              hermesPopoverOpenCloseButton
-              class="hermes-input-group-icon-action"
-              [disabled]="isInputDateDisabled"
-            >
-              <hermes-icon status="info" shape="calendar"></hermes-icon>
-            </button>
-          }
-          <hermes-datepicker-view-manager
-            *hermesPopoverContent="
-              open;
-              at: popoverPosition;
-              type: popoverType;
-              outsideClickToClose: true;
-              scrollToClose: true
-            "
-            cdkTrapFocus
-          ></hermes-datepicker-view-manager>
-        </div>
-      </div>
-      @if (showHelper) {
-        <ng-content select="hermes-control-helper"></ng-content>
-      }
-      @if (showInvalid) {
-        <ng-content select="hermes-control-error"></ng-content>
-      }
-      @if (showValid) {
-        <ng-content select="hermes-control-success"></ng-content>
-      }
-    </div>
+                    template: `
+    <ng-content select="label"></ng-content>
+    @if (!label && addGrid()) {
+      <label></label>
+    }
+    <div class="hermes-control-container" [ngClass]="controlClass()">
+      <div class="hermes-input-wrapper" hermesPopoverOrigin>
+        <div class="hermes-input-group" [class.hermes-focus]="focus">
+          <!-- render range inputs only if using hermes-date-range-container -->
+          @if (isRangePicker) {
+            <ng-content select="[hermesStartDate]"></ng-content>
+            <span class="date-range-separator">-</span>
+            <ng-content select="[hermesEndDate]"></ng-content>
+          }
+          <!-- no @if for the singe-date input because it breaks the "auto-wrapped" date picker -->
+          <ng-content select="[hermesDate]"></ng-content>
+          @if (isEnabled) {
+            <button
+              #actionButton
+              type="button"
+              hermesPopoverOpenCloseButton
+              class="hermes-input-group-icon-action"
+              [disabled]="isInputDateDisabled"
+            >
+              <hermes-icon status="info" shape="calendar"></hermes-icon>
+            </button>
+          }
+          <hermes-datepicker-view-manager
+            *hermesPopoverContent="
+              open;
+              at: popoverPosition;
+              type: popoverType;
+              outsideClickToClose: true;
+              scrollToClose: true
+            "
+            cdkTrapFocus
+          ></hermes-datepicker-view-manager>
+        </div>
+      </div>
+      @if (showHelper) {
+        <ng-content select="hermes-control-helper"></ng-content>
+      }
+      @if (showInvalid) {
+        <ng-content select="hermes-control-error"></ng-content>
+      }
+      @if (showValid) {
+        <ng-content select="hermes-control-success"></ng-content>
+      }
+    </div>
   `,
                     providers: [
                         ControlIdService,
@@ -3202,7 +3202,7 @@ const HERMES_DATEPICKER_DIRECTIVES = [
 ];
 class HermesDatepickerModule {
     constructor() {
-        ClarityIcons.addIcons(successStandardIcon, errorStandardIcon, angleIcon, eventIcon, calendarIcon);
+        HermesIcons.addIcons(successStandardIcon, errorStandardIcon, angleIcon, eventIcon, calendarIcon);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.22", ngImport: i0, type: HermesDatepickerModule, declarations: [HermesDateInput,