@guildofgleks/ui 21.4.1 → 21.4.3

package/fesm2022/guildofgleks-ui.mjs

@@ -3036,15 +3036,21 @@ class TabsComponent {
             const header = this.headerRefs()[index]?.nativeElement;
             if (!this.isBrowser || !this.scrollActiveIntoView() || !header)
                 return;
-            // Feature-detected: absent in jsdom (so: in unit tests) and in very old browsers, which
-            // then simply keep whatever scroll position they already had.
-            if (typeof header.scrollIntoView !== 'function')
+            const behavior = this.hasScrolledOnce && !this.prefersReducedMotion() ? 'smooth' : 'auto';
+            // The header strip only — never the page.
+            //
+            // This used to call `header.scrollIntoView({ inline: 'center', block: 'nearest' })`, and
+            // `scrollIntoView` walks up and scrolls *every* scrollable ancestor that needs to move.
+            // A `gog-tabs` sitting below the fold therefore dragged the whole page down to itself the
+            // moment it initialised — jarring in an app, and in a documentation page with several
+            // examples it jumped the reader to the last one. Scrolling the component's own viewport
+            // by hand keeps the behaviour (the active header centred) and touches nothing outside.
+            const viewport = header.closest('.gog-scroll__viewport');
+            if (!viewport || typeof viewport.scrollTo !== 'function')
                 return;
-            header.scrollIntoView({
-                inline: 'center',
-                block: 'nearest',
-                behavior: this.hasScrolledOnce && !this.prefersReducedMotion() ? 'smooth' : 'auto',
-            });
+            const centred = header.offsetLeft - (viewport.clientWidth - header.offsetWidth) / 2;
+            const left = Math.max(0, Math.min(centred, viewport.scrollWidth - viewport.clientWidth));
+            viewport.scrollTo({ left, behavior });
             this.hasScrolledOnce = true;
         });
     }
@@ -3893,13 +3899,13 @@ class CalendarComponent {
         return isSameDay(date, this.focusedDate());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: CalendarComponent, isStandalone: true, selector: "gog-calendar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, defaultMonth: { classPropertyName: "defaultMonth", publicName: "defaultMonth", isSignal: true, isRequired: false, transformFunction: null }, numberOfMonths: { classPropertyName: "numberOfMonths", publicName: "numberOfMonths", isSignal: true, isRequired: false, transformFunction: null }, showTime: { classPropertyName: "showTime", publicName: "showTime", isSignal: true, isRequired: false, transformFunction: null }, hourFormat: { classPropertyName: "hourFormat", publicName: "hourFormat", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, showTodayButton: { classPropertyName: "showTodayButton", publicName: "showTodayButton", isSignal: true, isRequired: false, transformFunction: null }, showThisMonthButton: { classPropertyName: "showThisMonthButton", publicName: "showThisMonthButton", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, todayLabel: { classPropertyName: "todayLabel", publicName: "todayLabel", isSignal: true, isRequired: false, transformFunction: null }, thisMonthLabel: { classPropertyName: "thisMonthLabel", publicName: "thisMonthLabel", isSignal: true, isRequired: false, transformFunction: null }, previousMonthLabel: { classPropertyName: "previousMonthLabel", publicName: "previousMonthLabel", isSignal: true, isRequired: false, transformFunction: null }, nextMonthLabel: { classPropertyName: "nextMonthLabel", publicName: "nextMonthLabel", isSignal: true, isRequired: false, transformFunction: null }, previousYearLabel: { classPropertyName: "previousYearLabel", publicName: "previousYearLabel", isSignal: true, isRequired: false, transformFunction: null }, nextYearLabel: { classPropertyName: "nextYearLabel", publicName: "nextYearLabel", isSignal: true, isRequired: false, transformFunction: null }, hoursLabel: { classPropertyName: "hoursLabel", publicName: "hoursLabel", isSignal: true, isRequired: false, transformFunction: null }, minutesLabel: { classPropertyName: "minutesLabel", publicName: "minutesLabel", isSignal: true, isRequired: false, transformFunction: null }, secondsLabel: { classPropertyName: "secondsLabel", publicName: "secondsLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", gogDateSelect: "gogDateSelect" }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "<div class=\"gog-calendar__header\">\r\n  <button\r\n    type=\"button\"\r\n    class=\"gog-calendar__nav gog-inline-center\"\r\n    [attr.aria-label]=\"resolvedLabels().previousYear\"\r\n    (click)=\"shiftViewYears(-1)\"\r\n  >\r\n    <gog-icon name=\"chevron-left\" />\r\n    <gog-icon name=\"chevron-left\" />\r\n  </button>\r\n  <button\r\n    type=\"button\"\r\n    class=\"gog-calendar__nav gog-inline-center\"\r\n    [attr.aria-label]=\"resolvedLabels().previousMonth\"\r\n    (click)=\"shiftView(-1)\"\r\n  >\r\n    <gog-icon name=\"chevron-left\" />\r\n  </button>\r\n\r\n  <div class=\"gog-calendar__titles\">\r\n    @for (month of monthViews(); track $index) {\r\n      <span class=\"gog-calendar__title\">{{ month.label }}</span>\r\n    }\r\n  </div>\r\n\r\n  <button\r\n    type=\"button\"\r\n    class=\"gog-calendar__nav gog-inline-center\"\r\n    [attr.aria-label]=\"resolvedLabels().nextMonth\"\r\n    (click)=\"shiftView(1)\"\r\n  >\r\n    <gog-icon name=\"chevron-right\" />\r\n  </button>\r\n  <button\r\n    type=\"button\"\r\n    class=\"gog-calendar__nav gog-inline-center\"\r\n    [attr.aria-label]=\"resolvedLabels().nextYear\"\r\n    (click)=\"shiftViewYears(1)\"\r\n  >\r\n    <gog-icon name=\"chevron-right\" />\r\n    <gog-icon name=\"chevron-right\" />\r\n  </button>\r\n</div>\r\n\r\n<div class=\"gog-calendar__months\" (mouseleave)=\"onGridLeave()\">\r\n  @for (month of monthViews(); track $index) {\r\n    <!--\r\n      role=\"grid\" rather than a list of buttons: a month is two-dimensional, and the arrow\r\n      keys have to mean \"next day\" and \"next week\" \u2014 which is what the grid role tells\r\n      assistive tech to expect. One keydown handler on the grid serves all 42 cells.\r\n    -->\r\n    <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -- the keydown handler is delegated here so 42 cells don't each carry one; the real keyboard targets are the day buttons inside, which are focusable and carry the roving tabindex. The grid itself must not be a tab stop. -->\r\n    <table\r\n      class=\"gog-calendar__grid\"\r\n      role=\"grid\"\r\n      [attr.aria-label]=\"month.label\"\r\n      (keydown)=\"onGridKeydown($event)\"\r\n    >\r\n      <thead>\r\n        <tr class=\"gog-calendar__weekdays\">\r\n          @for (weekday of weekdays(); track $index) {\r\n            <th class=\"gog-calendar__weekday\" scope=\"col\" [attr.abbr]=\"weekday\">{{ weekday }}</th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (week of month.weeks; track $index) {\r\n          <tr class=\"gog-calendar__week\">\r\n            @for (day of week; track day.date.getTime()) {\r\n              <td class=\"gog-calendar__cell\" role=\"gridcell\" [attr.aria-selected]=\"day.selected\">\r\n                <!--\r\n                  A roving tabindex across 42 cells: exactly one is tabbable, and the arrows\r\n                  move it. Tabbing through every day of the month instead would put 42 stops\r\n                  between the field and whatever follows it.\r\n                -->\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"gog-calendar__day\"\r\n                  [class.gog-calendar__day--outside]=\"day.outside\"\r\n                  [class.gog-calendar__day--today]=\"day.today\"\r\n                  [class.gog-calendar__day--selected]=\"day.selected\"\r\n                  [class.gog-calendar__day--range-start]=\"day.rangeStart\"\r\n                  [class.gog-calendar__day--range-end]=\"day.rangeEnd\"\r\n                  [class.gog-calendar__day--in-range]=\"day.inRange\"\r\n                  [disabled]=\"day.disabled\"\r\n                  [attr.aria-disabled]=\"day.disabled\"\r\n                  [attr.aria-current]=\"day.today ? 'date' : null\"\r\n                  [tabindex]=\"isFocusedDay(day.date) ? 0 : -1\"\r\n                  (click)=\"onDayClick(day)\"\r\n                  (mouseenter)=\"onDayHover(day)\"\r\n                >\r\n                  {{ day.label }}\r\n                </button>\r\n              </td>\r\n            }\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    </table>\r\n  }\r\n</div>\r\n\r\n@if (showTime()) {\r\n  <div class=\"gog-calendar__time\">\r\n    <gog-icon class=\"gog-calendar__time-icon\" name=\"clock\" [ariaHidden]=\"true\" />\r\n\r\n    <input\r\n      type=\"number\"\r\n      class=\"gog-calendar__time-input\"\r\n      [min]=\"minHour()\"\r\n      [max]=\"maxHour()\"\r\n      [value]=\"hours()\"\r\n      [attr.aria-label]=\"resolvedLabels().hours\"\r\n      (input)=\"onHourInput($event)\"\r\n    />\r\n    <span class=\"gog-calendar__time-sep\" aria-hidden=\"true\">:</span>\r\n    <input\r\n      type=\"number\"\r\n      class=\"gog-calendar__time-input\"\r\n      min=\"0\"\r\n      max=\"59\"\r\n      [step]=\"minuteStep()\"\r\n      [value]=\"minutes()\"\r\n      [attr.aria-label]=\"resolvedLabels().minutes\"\r\n      (input)=\"onMinuteInput($event)\"\r\n    />\r\n\r\n    @if (showSeconds()) {\r\n      <span class=\"gog-calendar__time-sep\" aria-hidden=\"true\">:</span>\r\n      <input\r\n        type=\"number\"\r\n        class=\"gog-calendar__time-input\"\r\n        min=\"0\"\r\n        max=\"59\"\r\n        [value]=\"seconds()\"\r\n        [attr.aria-label]=\"resolvedLabels().seconds\"\r\n        (input)=\"onSecondInput($event)\"\r\n      />\r\n    }\r\n\r\n    @if (hourFormat() === '12') {\r\n      <button\r\n        type=\"button\"\r\n        class=\"gog-calendar__meridiem\"\r\n        [attr.aria-pressed]=\"isPm()\"\r\n        (click)=\"toggleMeridiem()\"\r\n      >\r\n        {{ isPm() ? 'PM' : 'AM' }}\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n\r\n@if (showTodayButton() || showThisMonthButton()) {\r\n  <!--\r\n    Two distinct actions, never one: \"Today\" picks a date, \"This month\" only moves the view.\r\n    Collapsing them into a single button is what made the control ambiguous \u2014 after paging\r\n    away, the same label reads as \"take me back\" to one person and \"set it to today\" to another.\r\n  -->\r\n  <div class=\"gog-calendar__footer\">\r\n    @if (showThisMonthButton()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"gog-calendar__action gog-calendar__action--this-month\"\r\n        (click)=\"goToThisMonth()\"\r\n      >\r\n        {{ resolvedLabels().thisMonth }}\r\n      </button>\r\n    }\r\n\r\n    @if (showTodayButton()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"gog-calendar__action gog-calendar__today\"\r\n        [disabled]=\"!isTodaySelectable()\"\r\n        (click)=\"selectToday()\"\r\n      >\r\n        {{ resolvedLabels().today }}\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block;box-sizing:border-box;padding:var(--gog-calendar-padding);color:var(--gog-calendar-color);font-family:var(--gog-calendar-font-family);font-size:var(--gog-calendar-size-font-size, var(--gog-calendar-md-font-size));contain:layout style}.gog-calendar__header{display:flex;align-items:center;gap:var(--gog-calendar-header-gap);margin-block-end:var(--gog-calendar-header-margin)}.gog-calendar__titles{display:flex;flex:1 1 auto;justify-content:space-around;gap:var(--gog-calendar-header-gap)}.gog-calendar__title{flex:1 1 0;color:var(--gog-calendar-title-color);font-weight:var(--gog-calendar-title-font-weight);text-align:center}.gog-calendar__nav{flex:0 0 auto;width:var(--gog-calendar-nav-size);height:var(--gog-calendar-nav-size);padding:0;border:0;border-radius:var(--gog-calendar-nav-radius);background-color:var(--gog-calendar-nav-bg);color:var(--gog-calendar-nav-color);font-size:var(--gog-calendar-nav-icon-size);letter-spacing:var(--gog-calendar-nav-icon-overlap);cursor:pointer}.gog-calendar__nav:hover{background-color:var(--gog-calendar-nav-hover-bg);color:var(--gog-calendar-nav-hover-color)}.gog-calendar__nav:focus-visible,.gog-calendar__day:focus-visible,.gog-calendar__action:focus-visible,.gog-calendar__meridiem:focus-visible,.gog-calendar__time-input:focus-visible{outline:var(--gog-calendar-focus-ring-width) solid var(--gog-calendar-focus-ring-color);outline-offset:var(--gog-calendar-focus-ring-offset)}.gog-calendar__months{display:flex;gap:var(--gog-calendar-months-gap)}.gog-calendar__grid{border-collapse:collapse;table-layout:fixed}.gog-calendar__weekday{padding:var(--gog-calendar-weekday-padding);color:var(--gog-calendar-weekday-color);font-size:var(--gog-calendar-weekday-font-size);font-weight:var(--gog-calendar-weekday-font-weight);text-align:center;text-transform:var(--gog-calendar-weekday-text-transform)}.gog-calendar__cell{padding:0}.gog-calendar__day{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--gog-calendar-day-size, var(--gog-calendar-size-day-size, var(--gog-calendar-md-day-size)));height:var(--gog-calendar-day-size, var(--gog-calendar-size-day-size, var(--gog-calendar-md-day-size)));border:var(--gog-calendar-day-border-width) var(--gog-calendar-day-border-style) transparent;border-radius:var(--gog-calendar-day-radius);background-color:var(--gog-calendar-day-bg, var(--gog-calendar-day-rest-bg));color:var(--gog-calendar-day-color, var(--gog-calendar-day-rest-color));font:inherit;cursor:pointer;transition:background-color var(--gog-calendar-transition-duration) var(--gog-easing),color var(--gog-calendar-transition-duration) var(--gog-easing)}.gog-calendar__day:hover:not(:disabled){background-color:var(--gog-calendar-day-hover-bg)}.gog-calendar__day--outside{color:var(--gog-calendar-day-outside-color)}.gog-calendar__day--today{border-color:var(--gog-calendar-today-border-color);font-weight:var(--gog-calendar-today-font-weight)}.gog-calendar__day--in-range{border-radius:0;background-color:var(--gog-calendar-range-bg);color:var(--gog-calendar-range-color)}.gog-calendar__day--range-start{border-start-end-radius:0;border-end-end-radius:0}.gog-calendar__day--range-end{border-start-start-radius:0;border-end-start-radius:0}.gog-calendar__day--selected{background-color:var(--gog-calendar-selected-bg);color:var(--gog-calendar-selected-color);font-weight:var(--gog-calendar-selected-font-weight)}.gog-calendar__day:disabled{opacity:var(--gog-calendar-disabled-opacity);cursor:not-allowed}.gog-calendar__time{display:flex;align-items:center;justify-content:center;gap:var(--gog-calendar-time-gap);margin-block-start:var(--gog-calendar-time-margin);padding-block-start:var(--gog-calendar-time-margin);border-block-start:var(--gog-calendar-divider-width) var(--gog-calendar-divider-style) var(--gog-calendar-divider-color)}.gog-calendar__time-icon{color:var(--gog-calendar-weekday-color)}.gog-calendar__time-input{box-sizing:border-box;width:var(--gog-calendar-time-input-width);padding:var(--gog-calendar-time-input-padding);border:var(--gog-calendar-day-border-width) var(--gog-calendar-day-border-style) var(--gog-calendar-divider-color);border-radius:var(--gog-calendar-day-radius);background-color:var(--gog-calendar-time-input-bg);color:var(--gog-calendar-color);font:inherit;text-align:center}.gog-calendar__time-sep{color:var(--gog-calendar-weekday-color)}.gog-calendar__meridiem,.gog-calendar__action{padding:var(--gog-calendar-action-padding);border:var(--gog-calendar-day-border-width) var(--gog-calendar-day-border-style) var(--gog-calendar-divider-color);border-radius:var(--gog-calendar-day-radius);background-color:var(--gog-calendar-nav-bg);color:var(--gog-calendar-nav-color);font:inherit;cursor:pointer}.gog-calendar__meridiem:hover:not(:disabled),.gog-calendar__action:hover:not(:disabled){background-color:var(--gog-calendar-nav-hover-bg);color:var(--gog-calendar-nav-hover-color)}.gog-calendar__footer{display:flex;justify-content:center;gap:var(--gog-calendar-footer-gap);margin-block-start:var(--gog-calendar-time-margin)}.gog-calendar__action:disabled{opacity:var(--gog-calendar-disabled-opacity);cursor:not-allowed}:host(.gog-calendar--xsm){--gog-calendar-size-font-size: var(--gog-calendar-xsm-font-size);--gog-calendar-size-day-size: var(--gog-calendar-xsm-day-size)}:host(.gog-calendar--sm){--gog-calendar-size-font-size: var(--gog-calendar-sm-font-size);--gog-calendar-size-day-size: var(--gog-calendar-sm-day-size)}:host(.gog-calendar--lg){--gog-calendar-size-font-size: var(--gog-calendar-lg-font-size);--gog-calendar-size-day-size: var(--gog-calendar-lg-day-size)}:host(.gog-calendar--slg){--gog-calendar-size-font-size: var(--gog-calendar-slg-font-size);--gog-calendar-size-day-size: var(--gog-calendar-slg-day-size)}@media(prefers-reduced-motion:reduce){.gog-calendar__day{transition:none}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: CalendarComponent, isStandalone: true, selector: "gog-calendar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, defaultMonth: { classPropertyName: "defaultMonth", publicName: "defaultMonth", isSignal: true, isRequired: false, transformFunction: null }, numberOfMonths: { classPropertyName: "numberOfMonths", publicName: "numberOfMonths", isSignal: true, isRequired: false, transformFunction: null }, showTime: { classPropertyName: "showTime", publicName: "showTime", isSignal: true, isRequired: false, transformFunction: null }, hourFormat: { classPropertyName: "hourFormat", publicName: "hourFormat", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, showTodayButton: { classPropertyName: "showTodayButton", publicName: "showTodayButton", isSignal: true, isRequired: false, transformFunction: null }, showThisMonthButton: { classPropertyName: "showThisMonthButton", publicName: "showThisMonthButton", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, todayLabel: { classPropertyName: "todayLabel", publicName: "todayLabel", isSignal: true, isRequired: false, transformFunction: null }, thisMonthLabel: { classPropertyName: "thisMonthLabel", publicName: "thisMonthLabel", isSignal: true, isRequired: false, transformFunction: null }, previousMonthLabel: { classPropertyName: "previousMonthLabel", publicName: "previousMonthLabel", isSignal: true, isRequired: false, transformFunction: null }, nextMonthLabel: { classPropertyName: "nextMonthLabel", publicName: "nextMonthLabel", isSignal: true, isRequired: false, transformFunction: null }, previousYearLabel: { classPropertyName: "previousYearLabel", publicName: "previousYearLabel", isSignal: true, isRequired: false, transformFunction: null }, nextYearLabel: { classPropertyName: "nextYearLabel", publicName: "nextYearLabel", isSignal: true, isRequired: false, transformFunction: null }, hoursLabel: { classPropertyName: "hoursLabel", publicName: "hoursLabel", isSignal: true, isRequired: false, transformFunction: null }, minutesLabel: { classPropertyName: "minutesLabel", publicName: "minutesLabel", isSignal: true, isRequired: false, transformFunction: null }, secondsLabel: { classPropertyName: "secondsLabel", publicName: "secondsLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", gogDateSelect: "gogDateSelect" }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "<div class=\"gog-calendar__header\">\r\n  <button\r\n    type=\"button\"\r\n    class=\"gog-calendar__nav gog-inline-center\"\r\n    [attr.aria-label]=\"resolvedLabels().previousYear\"\r\n    (click)=\"shiftViewYears(-1)\"\r\n  >\r\n    <gog-icon name=\"chevron-left\" />\r\n    <gog-icon name=\"chevron-left\" />\r\n  </button>\r\n  <button\r\n    type=\"button\"\r\n    class=\"gog-calendar__nav gog-inline-center\"\r\n    [attr.aria-label]=\"resolvedLabels().previousMonth\"\r\n    (click)=\"shiftView(-1)\"\r\n  >\r\n    <gog-icon name=\"chevron-left\" />\r\n  </button>\r\n\r\n  <div class=\"gog-calendar__titles\">\r\n    @for (month of monthViews(); track $index) {\r\n      <span class=\"gog-calendar__title\">{{ month.label }}</span>\r\n    }\r\n  </div>\r\n\r\n  <button\r\n    type=\"button\"\r\n    class=\"gog-calendar__nav gog-inline-center\"\r\n    [attr.aria-label]=\"resolvedLabels().nextMonth\"\r\n    (click)=\"shiftView(1)\"\r\n  >\r\n    <gog-icon name=\"chevron-right\" />\r\n  </button>\r\n  <button\r\n    type=\"button\"\r\n    class=\"gog-calendar__nav gog-inline-center\"\r\n    [attr.aria-label]=\"resolvedLabels().nextYear\"\r\n    (click)=\"shiftViewYears(1)\"\r\n  >\r\n    <gog-icon name=\"chevron-right\" />\r\n    <gog-icon name=\"chevron-right\" />\r\n  </button>\r\n</div>\r\n\r\n<div class=\"gog-calendar__months\" (mouseleave)=\"onGridLeave()\">\r\n  @for (month of monthViews(); track $index) {\r\n    <!--\r\n      role=\"grid\" rather than a list of buttons: a month is two-dimensional, and the arrow\r\n      keys have to mean \"next day\" and \"next week\" \u2014 which is what the grid role tells\r\n      assistive tech to expect. One keydown handler on the grid serves all 42 cells.\r\n    -->\r\n    <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -- the keydown handler is delegated here so 42 cells don't each carry one; the real keyboard targets are the day buttons inside, which are focusable and carry the roving tabindex. The grid itself must not be a tab stop. -->\r\n    <table\r\n      class=\"gog-calendar__grid\"\r\n      role=\"grid\"\r\n      [attr.aria-label]=\"month.label\"\r\n      (keydown)=\"onGridKeydown($event)\"\r\n    >\r\n      <thead>\r\n        <tr class=\"gog-calendar__weekdays\">\r\n          @for (weekday of weekdays(); track $index) {\r\n            <th class=\"gog-calendar__weekday\" scope=\"col\" [attr.abbr]=\"weekday\">{{ weekday }}</th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (week of month.weeks; track $index) {\r\n          <tr class=\"gog-calendar__week\">\r\n            @for (day of week; track day.date.getTime()) {\r\n              <td class=\"gog-calendar__cell\" role=\"gridcell\" [attr.aria-selected]=\"day.selected\">\r\n                <!--\r\n                  A roving tabindex across 42 cells: exactly one is tabbable, and the arrows\r\n                  move it. Tabbing through every day of the month instead would put 42 stops\r\n                  between the field and whatever follows it.\r\n                -->\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"gog-calendar__day\"\r\n                  [class.gog-calendar__day--outside]=\"day.outside\"\r\n                  [class.gog-calendar__day--today]=\"day.today\"\r\n                  [class.gog-calendar__day--selected]=\"day.selected\"\r\n                  [class.gog-calendar__day--range-start]=\"day.rangeStart\"\r\n                  [class.gog-calendar__day--range-end]=\"day.rangeEnd\"\r\n                  [class.gog-calendar__day--in-range]=\"day.inRange\"\r\n                  [disabled]=\"day.disabled\"\r\n                  [attr.aria-disabled]=\"day.disabled\"\r\n                  [attr.aria-current]=\"day.today ? 'date' : null\"\r\n                  [tabindex]=\"isFocusedDay(day.date) ? 0 : -1\"\r\n                  (click)=\"onDayClick(day)\"\r\n                  (mouseenter)=\"onDayHover(day)\"\r\n                >\r\n                  {{ day.label }}\r\n                </button>\r\n              </td>\r\n            }\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    </table>\r\n  }\r\n</div>\r\n\r\n@if (showTime()) {\r\n  <div class=\"gog-calendar__time\">\r\n    <gog-icon class=\"gog-calendar__time-icon\" name=\"clock\" [ariaHidden]=\"true\" />\r\n\r\n    <input\r\n      type=\"number\"\r\n      class=\"gog-calendar__time-input\"\r\n      [min]=\"minHour()\"\r\n      [max]=\"maxHour()\"\r\n      [value]=\"hours()\"\r\n      [attr.aria-label]=\"resolvedLabels().hours\"\r\n      (input)=\"onHourInput($event)\"\r\n    />\r\n    <span class=\"gog-calendar__time-sep\" aria-hidden=\"true\">:</span>\r\n    <input\r\n      type=\"number\"\r\n      class=\"gog-calendar__time-input\"\r\n      min=\"0\"\r\n      max=\"59\"\r\n      [step]=\"minuteStep()\"\r\n      [value]=\"minutes()\"\r\n      [attr.aria-label]=\"resolvedLabels().minutes\"\r\n      (input)=\"onMinuteInput($event)\"\r\n    />\r\n\r\n    @if (showSeconds()) {\r\n      <span class=\"gog-calendar__time-sep\" aria-hidden=\"true\">:</span>\r\n      <input\r\n        type=\"number\"\r\n        class=\"gog-calendar__time-input\"\r\n        min=\"0\"\r\n        max=\"59\"\r\n        [value]=\"seconds()\"\r\n        [attr.aria-label]=\"resolvedLabels().seconds\"\r\n        (input)=\"onSecondInput($event)\"\r\n      />\r\n    }\r\n\r\n    @if (hourFormat() === '12') {\r\n      <button\r\n        type=\"button\"\r\n        class=\"gog-calendar__meridiem\"\r\n        [attr.aria-pressed]=\"isPm()\"\r\n        (click)=\"toggleMeridiem()\"\r\n      >\r\n        {{ isPm() ? 'PM' : 'AM' }}\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n\r\n@if (showTodayButton() || showThisMonthButton()) {\r\n  <!--\r\n    Two distinct actions, never one: \"Today\" picks a date, \"This month\" only moves the view.\r\n    Collapsing them into a single button is what made the control ambiguous \u2014 after paging\r\n    away, the same label reads as \"take me back\" to one person and \"set it to today\" to another.\r\n  -->\r\n  <div class=\"gog-calendar__footer\">\r\n    @if (showThisMonthButton()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"gog-calendar__action gog-calendar__action--this-month\"\r\n        (click)=\"goToThisMonth()\"\r\n      >\r\n        {{ resolvedLabels().thisMonth }}\r\n      </button>\r\n    }\r\n\r\n    @if (showTodayButton()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"gog-calendar__action gog-calendar__today\"\r\n        [disabled]=\"!isTodaySelectable()\"\r\n        (click)=\"selectToday()\"\r\n      >\r\n        {{ resolvedLabels().today }}\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block;box-sizing:border-box;max-width:var(--gog-calendar-max-width);padding:var(--gog-calendar-padding);color:var(--gog-calendar-color);font-family:var(--gog-calendar-font-family);font-size:var(--gog-calendar-size-font-size, var(--gog-calendar-md-font-size));contain:layout style}.gog-calendar__header{display:flex;align-items:center;gap:var(--gog-calendar-header-gap);margin-block-end:var(--gog-calendar-header-margin)}.gog-calendar__titles{display:flex;flex:1 1 auto;justify-content:space-around;gap:var(--gog-calendar-header-gap)}.gog-calendar__title{flex:1 1 0;color:var(--gog-calendar-title-color);font-weight:var(--gog-calendar-title-font-weight);text-align:center}.gog-calendar__nav{flex:0 0 auto;width:var(--gog-calendar-nav-size);height:var(--gog-calendar-nav-size);padding:0;border:0;border-radius:var(--gog-calendar-nav-radius);background-color:var(--gog-calendar-nav-bg);color:var(--gog-calendar-nav-color);font-size:var(--gog-calendar-nav-icon-size);letter-spacing:var(--gog-calendar-nav-icon-overlap);cursor:pointer}.gog-calendar__nav:hover{background-color:var(--gog-calendar-nav-hover-bg);color:var(--gog-calendar-nav-hover-color)}.gog-calendar__nav:focus-visible,.gog-calendar__day:focus-visible,.gog-calendar__action:focus-visible,.gog-calendar__meridiem:focus-visible,.gog-calendar__time-input:focus-visible{outline:var(--gog-calendar-focus-ring-width) solid var(--gog-calendar-focus-ring-color);outline-offset:var(--gog-calendar-focus-ring-offset)}.gog-calendar__months{display:flex;gap:var(--gog-calendar-months-gap)}.gog-calendar__grid{border-collapse:collapse;table-layout:fixed}.gog-calendar__weekday{padding:var(--gog-calendar-weekday-padding);color:var(--gog-calendar-weekday-color);font-size:var(--gog-calendar-weekday-font-size);font-weight:var(--gog-calendar-weekday-font-weight);text-align:center;text-transform:var(--gog-calendar-weekday-text-transform)}.gog-calendar__cell{padding:0}.gog-calendar__day{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--gog-calendar-day-size, var(--gog-calendar-size-day-size, var(--gog-calendar-md-day-size)));height:var(--gog-calendar-day-size, var(--gog-calendar-size-day-size, var(--gog-calendar-md-day-size)));border:var(--gog-calendar-day-border-width) var(--gog-calendar-day-border-style) transparent;border-radius:var(--gog-calendar-day-radius);background-color:var(--gog-calendar-day-bg, var(--gog-calendar-day-rest-bg));color:var(--gog-calendar-day-color, var(--gog-calendar-day-rest-color));font:inherit;cursor:pointer;transition:background-color var(--gog-calendar-transition-duration) var(--gog-easing),color var(--gog-calendar-transition-duration) var(--gog-easing)}.gog-calendar__day:hover:not(:disabled){background-color:var(--gog-calendar-day-hover-bg)}.gog-calendar__day--outside{color:var(--gog-calendar-day-outside-color)}.gog-calendar__day--today{border-color:var(--gog-calendar-today-border-color);font-weight:var(--gog-calendar-today-font-weight)}.gog-calendar__day--in-range{border-radius:0;background-color:var(--gog-calendar-range-bg);color:var(--gog-calendar-range-color)}.gog-calendar__day--range-start{border-start-end-radius:0;border-end-end-radius:0}.gog-calendar__day--range-end{border-start-start-radius:0;border-end-start-radius:0}.gog-calendar__day--selected{background-color:var(--gog-calendar-selected-bg);color:var(--gog-calendar-selected-color);font-weight:var(--gog-calendar-selected-font-weight)}.gog-calendar__day:disabled{opacity:var(--gog-calendar-disabled-opacity);cursor:not-allowed}.gog-calendar__time{display:flex;align-items:center;justify-content:center;gap:var(--gog-calendar-time-gap);margin-block-start:var(--gog-calendar-time-margin);padding-block-start:var(--gog-calendar-time-margin);border-block-start:var(--gog-calendar-divider-width) var(--gog-calendar-divider-style) var(--gog-calendar-divider-color)}.gog-calendar__time-icon{color:var(--gog-calendar-weekday-color)}.gog-calendar__time-input{box-sizing:border-box;width:var(--gog-calendar-time-input-width);padding:var(--gog-calendar-time-input-padding);border:var(--gog-calendar-day-border-width) var(--gog-calendar-day-border-style) var(--gog-calendar-divider-color);border-radius:var(--gog-calendar-day-radius);background-color:var(--gog-calendar-time-input-bg);color:var(--gog-calendar-color);font:inherit;text-align:center}.gog-calendar__time-sep{color:var(--gog-calendar-weekday-color)}.gog-calendar__meridiem,.gog-calendar__action{padding:var(--gog-calendar-action-padding);border:var(--gog-calendar-day-border-width) var(--gog-calendar-day-border-style) var(--gog-calendar-divider-color);border-radius:var(--gog-calendar-day-radius);background-color:var(--gog-calendar-nav-bg);color:var(--gog-calendar-nav-color);font:inherit;cursor:pointer}.gog-calendar__meridiem:hover:not(:disabled),.gog-calendar__action:hover:not(:disabled){background-color:var(--gog-calendar-nav-hover-bg);color:var(--gog-calendar-nav-hover-color)}.gog-calendar__footer{display:flex;justify-content:center;gap:var(--gog-calendar-footer-gap);margin-block-start:var(--gog-calendar-time-margin)}.gog-calendar__action:disabled{opacity:var(--gog-calendar-disabled-opacity);cursor:not-allowed}:host(.gog-calendar--xsm){--gog-calendar-size-font-size: var(--gog-calendar-xsm-font-size);--gog-calendar-size-day-size: var(--gog-calendar-xsm-day-size)}:host(.gog-calendar--sm){--gog-calendar-size-font-size: var(--gog-calendar-sm-font-size);--gog-calendar-size-day-size: var(--gog-calendar-sm-day-size)}:host(.gog-calendar--lg){--gog-calendar-size-font-size: var(--gog-calendar-lg-font-size);--gog-calendar-size-day-size: var(--gog-calendar-lg-day-size)}:host(.gog-calendar--slg){--gog-calendar-size-font-size: var(--gog-calendar-slg-font-size);--gog-calendar-size-day-size: var(--gog-calendar-slg-day-size)}@media(prefers-reduced-motion:reduce){.gog-calendar__day{transition:none}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gog-calendar', imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class]': 'hostClasses()',
-                    }, template: "<div class=\"gog-calendar__header\">\r\n  <button\r\n    type=\"button\"\r\n    class=\"gog-calendar__nav gog-inline-center\"\r\n    [attr.aria-label]=\"resolvedLabels().previousYear\"\r\n    (click)=\"shiftViewYears(-1)\"\r\n  >\r\n    <gog-icon name=\"chevron-left\" />\r\n    <gog-icon name=\"chevron-left\" />\r\n  </button>\r\n  <button\r\n    type=\"button\"\r\n    class=\"gog-calendar__nav gog-inline-center\"\r\n    [attr.aria-label]=\"resolvedLabels().previousMonth\"\r\n    (click)=\"shiftView(-1)\"\r\n  >\r\n    <gog-icon name=\"chevron-left\" />\r\n  </button>\r\n\r\n  <div class=\"gog-calendar__titles\">\r\n    @for (month of monthViews(); track $index) {\r\n      <span class=\"gog-calendar__title\">{{ month.label }}</span>\r\n    }\r\n  </div>\r\n\r\n  <button\r\n    type=\"button\"\r\n    class=\"gog-calendar__nav gog-inline-center\"\r\n    [attr.aria-label]=\"resolvedLabels().nextMonth\"\r\n    (click)=\"shiftView(1)\"\r\n  >\r\n    <gog-icon name=\"chevron-right\" />\r\n  </button>\r\n  <button\r\n    type=\"button\"\r\n    class=\"gog-calendar__nav gog-inline-center\"\r\n    [attr.aria-label]=\"resolvedLabels().nextYear\"\r\n    (click)=\"shiftViewYears(1)\"\r\n  >\r\n    <gog-icon name=\"chevron-right\" />\r\n    <gog-icon name=\"chevron-right\" />\r\n  </button>\r\n</div>\r\n\r\n<div class=\"gog-calendar__months\" (mouseleave)=\"onGridLeave()\">\r\n  @for (month of monthViews(); track $index) {\r\n    <!--\r\n      role=\"grid\" rather than a list of buttons: a month is two-dimensional, and the arrow\r\n      keys have to mean \"next day\" and \"next week\" \u2014 which is what the grid role tells\r\n      assistive tech to expect. One keydown handler on the grid serves all 42 cells.\r\n    -->\r\n    <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -- the keydown handler is delegated here so 42 cells don't each carry one; the real keyboard targets are the day buttons inside, which are focusable and carry the roving tabindex. The grid itself must not be a tab stop. -->\r\n    <table\r\n      class=\"gog-calendar__grid\"\r\n      role=\"grid\"\r\n      [attr.aria-label]=\"month.label\"\r\n      (keydown)=\"onGridKeydown($event)\"\r\n    >\r\n      <thead>\r\n        <tr class=\"gog-calendar__weekdays\">\r\n          @for (weekday of weekdays(); track $index) {\r\n            <th class=\"gog-calendar__weekday\" scope=\"col\" [attr.abbr]=\"weekday\">{{ weekday }}</th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (week of month.weeks; track $index) {\r\n          <tr class=\"gog-calendar__week\">\r\n            @for (day of week; track day.date.getTime()) {\r\n              <td class=\"gog-calendar__cell\" role=\"gridcell\" [attr.aria-selected]=\"day.selected\">\r\n                <!--\r\n                  A roving tabindex across 42 cells: exactly one is tabbable, and the arrows\r\n                  move it. Tabbing through every day of the month instead would put 42 stops\r\n                  between the field and whatever follows it.\r\n                -->\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"gog-calendar__day\"\r\n                  [class.gog-calendar__day--outside]=\"day.outside\"\r\n                  [class.gog-calendar__day--today]=\"day.today\"\r\n                  [class.gog-calendar__day--selected]=\"day.selected\"\r\n                  [class.gog-calendar__day--range-start]=\"day.rangeStart\"\r\n                  [class.gog-calendar__day--range-end]=\"day.rangeEnd\"\r\n                  [class.gog-calendar__day--in-range]=\"day.inRange\"\r\n                  [disabled]=\"day.disabled\"\r\n                  [attr.aria-disabled]=\"day.disabled\"\r\n                  [attr.aria-current]=\"day.today ? 'date' : null\"\r\n                  [tabindex]=\"isFocusedDay(day.date) ? 0 : -1\"\r\n                  (click)=\"onDayClick(day)\"\r\n                  (mouseenter)=\"onDayHover(day)\"\r\n                >\r\n                  {{ day.label }}\r\n                </button>\r\n              </td>\r\n            }\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    </table>\r\n  }\r\n</div>\r\n\r\n@if (showTime()) {\r\n  <div class=\"gog-calendar__time\">\r\n    <gog-icon class=\"gog-calendar__time-icon\" name=\"clock\" [ariaHidden]=\"true\" />\r\n\r\n    <input\r\n      type=\"number\"\r\n      class=\"gog-calendar__time-input\"\r\n      [min]=\"minHour()\"\r\n      [max]=\"maxHour()\"\r\n      [value]=\"hours()\"\r\n      [attr.aria-label]=\"resolvedLabels().hours\"\r\n      (input)=\"onHourInput($event)\"\r\n    />\r\n    <span class=\"gog-calendar__time-sep\" aria-hidden=\"true\">:</span>\r\n    <input\r\n      type=\"number\"\r\n      class=\"gog-calendar__time-input\"\r\n      min=\"0\"\r\n      max=\"59\"\r\n      [step]=\"minuteStep()\"\r\n      [value]=\"minutes()\"\r\n      [attr.aria-label]=\"resolvedLabels().minutes\"\r\n      (input)=\"onMinuteInput($event)\"\r\n    />\r\n\r\n    @if (showSeconds()) {\r\n      <span class=\"gog-calendar__time-sep\" aria-hidden=\"true\">:</span>\r\n      <input\r\n        type=\"number\"\r\n        class=\"gog-calendar__time-input\"\r\n        min=\"0\"\r\n        max=\"59\"\r\n        [value]=\"seconds()\"\r\n        [attr.aria-label]=\"resolvedLabels().seconds\"\r\n        (input)=\"onSecondInput($event)\"\r\n      />\r\n    }\r\n\r\n    @if (hourFormat() === '12') {\r\n      <button\r\n        type=\"button\"\r\n        class=\"gog-calendar__meridiem\"\r\n        [attr.aria-pressed]=\"isPm()\"\r\n        (click)=\"toggleMeridiem()\"\r\n      >\r\n        {{ isPm() ? 'PM' : 'AM' }}\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n\r\n@if (showTodayButton() || showThisMonthButton()) {\r\n  <!--\r\n    Two distinct actions, never one: \"Today\" picks a date, \"This month\" only moves the view.\r\n    Collapsing them into a single button is what made the control ambiguous \u2014 after paging\r\n    away, the same label reads as \"take me back\" to one person and \"set it to today\" to another.\r\n  -->\r\n  <div class=\"gog-calendar__footer\">\r\n    @if (showThisMonthButton()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"gog-calendar__action gog-calendar__action--this-month\"\r\n        (click)=\"goToThisMonth()\"\r\n      >\r\n        {{ resolvedLabels().thisMonth }}\r\n      </button>\r\n    }\r\n\r\n    @if (showTodayButton()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"gog-calendar__action gog-calendar__today\"\r\n        [disabled]=\"!isTodaySelectable()\"\r\n        (click)=\"selectToday()\"\r\n      >\r\n        {{ resolvedLabels().today }}\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block;box-sizing:border-box;padding:var(--gog-calendar-padding);color:var(--gog-calendar-color);font-family:var(--gog-calendar-font-family);font-size:var(--gog-calendar-size-font-size, var(--gog-calendar-md-font-size));contain:layout style}.gog-calendar__header{display:flex;align-items:center;gap:var(--gog-calendar-header-gap);margin-block-end:var(--gog-calendar-header-margin)}.gog-calendar__titles{display:flex;flex:1 1 auto;justify-content:space-around;gap:var(--gog-calendar-header-gap)}.gog-calendar__title{flex:1 1 0;color:var(--gog-calendar-title-color);font-weight:var(--gog-calendar-title-font-weight);text-align:center}.gog-calendar__nav{flex:0 0 auto;width:var(--gog-calendar-nav-size);height:var(--gog-calendar-nav-size);padding:0;border:0;border-radius:var(--gog-calendar-nav-radius);background-color:var(--gog-calendar-nav-bg);color:var(--gog-calendar-nav-color);font-size:var(--gog-calendar-nav-icon-size);letter-spacing:var(--gog-calendar-nav-icon-overlap);cursor:pointer}.gog-calendar__nav:hover{background-color:var(--gog-calendar-nav-hover-bg);color:var(--gog-calendar-nav-hover-color)}.gog-calendar__nav:focus-visible,.gog-calendar__day:focus-visible,.gog-calendar__action:focus-visible,.gog-calendar__meridiem:focus-visible,.gog-calendar__time-input:focus-visible{outline:var(--gog-calendar-focus-ring-width) solid var(--gog-calendar-focus-ring-color);outline-offset:var(--gog-calendar-focus-ring-offset)}.gog-calendar__months{display:flex;gap:var(--gog-calendar-months-gap)}.gog-calendar__grid{border-collapse:collapse;table-layout:fixed}.gog-calendar__weekday{padding:var(--gog-calendar-weekday-padding);color:var(--gog-calendar-weekday-color);font-size:var(--gog-calendar-weekday-font-size);font-weight:var(--gog-calendar-weekday-font-weight);text-align:center;text-transform:var(--gog-calendar-weekday-text-transform)}.gog-calendar__cell{padding:0}.gog-calendar__day{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--gog-calendar-day-size, var(--gog-calendar-size-day-size, var(--gog-calendar-md-day-size)));height:var(--gog-calendar-day-size, var(--gog-calendar-size-day-size, var(--gog-calendar-md-day-size)));border:var(--gog-calendar-day-border-width) var(--gog-calendar-day-border-style) transparent;border-radius:var(--gog-calendar-day-radius);background-color:var(--gog-calendar-day-bg, var(--gog-calendar-day-rest-bg));color:var(--gog-calendar-day-color, var(--gog-calendar-day-rest-color));font:inherit;cursor:pointer;transition:background-color var(--gog-calendar-transition-duration) var(--gog-easing),color var(--gog-calendar-transition-duration) var(--gog-easing)}.gog-calendar__day:hover:not(:disabled){background-color:var(--gog-calendar-day-hover-bg)}.gog-calendar__day--outside{color:var(--gog-calendar-day-outside-color)}.gog-calendar__day--today{border-color:var(--gog-calendar-today-border-color);font-weight:var(--gog-calendar-today-font-weight)}.gog-calendar__day--in-range{border-radius:0;background-color:var(--gog-calendar-range-bg);color:var(--gog-calendar-range-color)}.gog-calendar__day--range-start{border-start-end-radius:0;border-end-end-radius:0}.gog-calendar__day--range-end{border-start-start-radius:0;border-end-start-radius:0}.gog-calendar__day--selected{background-color:var(--gog-calendar-selected-bg);color:var(--gog-calendar-selected-color);font-weight:var(--gog-calendar-selected-font-weight)}.gog-calendar__day:disabled{opacity:var(--gog-calendar-disabled-opacity);cursor:not-allowed}.gog-calendar__time{display:flex;align-items:center;justify-content:center;gap:var(--gog-calendar-time-gap);margin-block-start:var(--gog-calendar-time-margin);padding-block-start:var(--gog-calendar-time-margin);border-block-start:var(--gog-calendar-divider-width) var(--gog-calendar-divider-style) var(--gog-calendar-divider-color)}.gog-calendar__time-icon{color:var(--gog-calendar-weekday-color)}.gog-calendar__time-input{box-sizing:border-box;width:var(--gog-calendar-time-input-width);padding:var(--gog-calendar-time-input-padding);border:var(--gog-calendar-day-border-width) var(--gog-calendar-day-border-style) var(--gog-calendar-divider-color);border-radius:var(--gog-calendar-day-radius);background-color:var(--gog-calendar-time-input-bg);color:var(--gog-calendar-color);font:inherit;text-align:center}.gog-calendar__time-sep{color:var(--gog-calendar-weekday-color)}.gog-calendar__meridiem,.gog-calendar__action{padding:var(--gog-calendar-action-padding);border:var(--gog-calendar-day-border-width) var(--gog-calendar-day-border-style) var(--gog-calendar-divider-color);border-radius:var(--gog-calendar-day-radius);background-color:var(--gog-calendar-nav-bg);color:var(--gog-calendar-nav-color);font:inherit;cursor:pointer}.gog-calendar__meridiem:hover:not(:disabled),.gog-calendar__action:hover:not(:disabled){background-color:var(--gog-calendar-nav-hover-bg);color:var(--gog-calendar-nav-hover-color)}.gog-calendar__footer{display:flex;justify-content:center;gap:var(--gog-calendar-footer-gap);margin-block-start:var(--gog-calendar-time-margin)}.gog-calendar__action:disabled{opacity:var(--gog-calendar-disabled-opacity);cursor:not-allowed}:host(.gog-calendar--xsm){--gog-calendar-size-font-size: var(--gog-calendar-xsm-font-size);--gog-calendar-size-day-size: var(--gog-calendar-xsm-day-size)}:host(.gog-calendar--sm){--gog-calendar-size-font-size: var(--gog-calendar-sm-font-size);--gog-calendar-size-day-size: var(--gog-calendar-sm-day-size)}:host(.gog-calendar--lg){--gog-calendar-size-font-size: var(--gog-calendar-lg-font-size);--gog-calendar-size-day-size: var(--gog-calendar-lg-day-size)}:host(.gog-calendar--slg){--gog-calendar-size-font-size: var(--gog-calendar-slg-font-size);--gog-calendar-size-day-size: var(--gog-calendar-slg-day-size)}@media(prefers-reduced-motion:reduce){.gog-calendar__day{transition:none}}\n"] }]
+                    }, template: "<div class=\"gog-calendar__header\">\r\n  <button\r\n    type=\"button\"\r\n    class=\"gog-calendar__nav gog-inline-center\"\r\n    [attr.aria-label]=\"resolvedLabels().previousYear\"\r\n    (click)=\"shiftViewYears(-1)\"\r\n  >\r\n    <gog-icon name=\"chevron-left\" />\r\n    <gog-icon name=\"chevron-left\" />\r\n  </button>\r\n  <button\r\n    type=\"button\"\r\n    class=\"gog-calendar__nav gog-inline-center\"\r\n    [attr.aria-label]=\"resolvedLabels().previousMonth\"\r\n    (click)=\"shiftView(-1)\"\r\n  >\r\n    <gog-icon name=\"chevron-left\" />\r\n  </button>\r\n\r\n  <div class=\"gog-calendar__titles\">\r\n    @for (month of monthViews(); track $index) {\r\n      <span class=\"gog-calendar__title\">{{ month.label }}</span>\r\n    }\r\n  </div>\r\n\r\n  <button\r\n    type=\"button\"\r\n    class=\"gog-calendar__nav gog-inline-center\"\r\n    [attr.aria-label]=\"resolvedLabels().nextMonth\"\r\n    (click)=\"shiftView(1)\"\r\n  >\r\n    <gog-icon name=\"chevron-right\" />\r\n  </button>\r\n  <button\r\n    type=\"button\"\r\n    class=\"gog-calendar__nav gog-inline-center\"\r\n    [attr.aria-label]=\"resolvedLabels().nextYear\"\r\n    (click)=\"shiftViewYears(1)\"\r\n  >\r\n    <gog-icon name=\"chevron-right\" />\r\n    <gog-icon name=\"chevron-right\" />\r\n  </button>\r\n</div>\r\n\r\n<div class=\"gog-calendar__months\" (mouseleave)=\"onGridLeave()\">\r\n  @for (month of monthViews(); track $index) {\r\n    <!--\r\n      role=\"grid\" rather than a list of buttons: a month is two-dimensional, and the arrow\r\n      keys have to mean \"next day\" and \"next week\" \u2014 which is what the grid role tells\r\n      assistive tech to expect. One keydown handler on the grid serves all 42 cells.\r\n    -->\r\n    <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -- the keydown handler is delegated here so 42 cells don't each carry one; the real keyboard targets are the day buttons inside, which are focusable and carry the roving tabindex. The grid itself must not be a tab stop. -->\r\n    <table\r\n      class=\"gog-calendar__grid\"\r\n      role=\"grid\"\r\n      [attr.aria-label]=\"month.label\"\r\n      (keydown)=\"onGridKeydown($event)\"\r\n    >\r\n      <thead>\r\n        <tr class=\"gog-calendar__weekdays\">\r\n          @for (weekday of weekdays(); track $index) {\r\n            <th class=\"gog-calendar__weekday\" scope=\"col\" [attr.abbr]=\"weekday\">{{ weekday }}</th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (week of month.weeks; track $index) {\r\n          <tr class=\"gog-calendar__week\">\r\n            @for (day of week; track day.date.getTime()) {\r\n              <td class=\"gog-calendar__cell\" role=\"gridcell\" [attr.aria-selected]=\"day.selected\">\r\n                <!--\r\n                  A roving tabindex across 42 cells: exactly one is tabbable, and the arrows\r\n                  move it. Tabbing through every day of the month instead would put 42 stops\r\n                  between the field and whatever follows it.\r\n                -->\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"gog-calendar__day\"\r\n                  [class.gog-calendar__day--outside]=\"day.outside\"\r\n                  [class.gog-calendar__day--today]=\"day.today\"\r\n                  [class.gog-calendar__day--selected]=\"day.selected\"\r\n                  [class.gog-calendar__day--range-start]=\"day.rangeStart\"\r\n                  [class.gog-calendar__day--range-end]=\"day.rangeEnd\"\r\n                  [class.gog-calendar__day--in-range]=\"day.inRange\"\r\n                  [disabled]=\"day.disabled\"\r\n                  [attr.aria-disabled]=\"day.disabled\"\r\n                  [attr.aria-current]=\"day.today ? 'date' : null\"\r\n                  [tabindex]=\"isFocusedDay(day.date) ? 0 : -1\"\r\n                  (click)=\"onDayClick(day)\"\r\n                  (mouseenter)=\"onDayHover(day)\"\r\n                >\r\n                  {{ day.label }}\r\n                </button>\r\n              </td>\r\n            }\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    </table>\r\n  }\r\n</div>\r\n\r\n@if (showTime()) {\r\n  <div class=\"gog-calendar__time\">\r\n    <gog-icon class=\"gog-calendar__time-icon\" name=\"clock\" [ariaHidden]=\"true\" />\r\n\r\n    <input\r\n      type=\"number\"\r\n      class=\"gog-calendar__time-input\"\r\n      [min]=\"minHour()\"\r\n      [max]=\"maxHour()\"\r\n      [value]=\"hours()\"\r\n      [attr.aria-label]=\"resolvedLabels().hours\"\r\n      (input)=\"onHourInput($event)\"\r\n    />\r\n    <span class=\"gog-calendar__time-sep\" aria-hidden=\"true\">:</span>\r\n    <input\r\n      type=\"number\"\r\n      class=\"gog-calendar__time-input\"\r\n      min=\"0\"\r\n      max=\"59\"\r\n      [step]=\"minuteStep()\"\r\n      [value]=\"minutes()\"\r\n      [attr.aria-label]=\"resolvedLabels().minutes\"\r\n      (input)=\"onMinuteInput($event)\"\r\n    />\r\n\r\n    @if (showSeconds()) {\r\n      <span class=\"gog-calendar__time-sep\" aria-hidden=\"true\">:</span>\r\n      <input\r\n        type=\"number\"\r\n        class=\"gog-calendar__time-input\"\r\n        min=\"0\"\r\n        max=\"59\"\r\n        [value]=\"seconds()\"\r\n        [attr.aria-label]=\"resolvedLabels().seconds\"\r\n        (input)=\"onSecondInput($event)\"\r\n      />\r\n    }\r\n\r\n    @if (hourFormat() === '12') {\r\n      <button\r\n        type=\"button\"\r\n        class=\"gog-calendar__meridiem\"\r\n        [attr.aria-pressed]=\"isPm()\"\r\n        (click)=\"toggleMeridiem()\"\r\n      >\r\n        {{ isPm() ? 'PM' : 'AM' }}\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n\r\n@if (showTodayButton() || showThisMonthButton()) {\r\n  <!--\r\n    Two distinct actions, never one: \"Today\" picks a date, \"This month\" only moves the view.\r\n    Collapsing them into a single button is what made the control ambiguous \u2014 after paging\r\n    away, the same label reads as \"take me back\" to one person and \"set it to today\" to another.\r\n  -->\r\n  <div class=\"gog-calendar__footer\">\r\n    @if (showThisMonthButton()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"gog-calendar__action gog-calendar__action--this-month\"\r\n        (click)=\"goToThisMonth()\"\r\n      >\r\n        {{ resolvedLabels().thisMonth }}\r\n      </button>\r\n    }\r\n\r\n    @if (showTodayButton()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"gog-calendar__action gog-calendar__today\"\r\n        [disabled]=\"!isTodaySelectable()\"\r\n        (click)=\"selectToday()\"\r\n      >\r\n        {{ resolvedLabels().today }}\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block;box-sizing:border-box;max-width:var(--gog-calendar-max-width);padding:var(--gog-calendar-padding);color:var(--gog-calendar-color);font-family:var(--gog-calendar-font-family);font-size:var(--gog-calendar-size-font-size, var(--gog-calendar-md-font-size));contain:layout style}.gog-calendar__header{display:flex;align-items:center;gap:var(--gog-calendar-header-gap);margin-block-end:var(--gog-calendar-header-margin)}.gog-calendar__titles{display:flex;flex:1 1 auto;justify-content:space-around;gap:var(--gog-calendar-header-gap)}.gog-calendar__title{flex:1 1 0;color:var(--gog-calendar-title-color);font-weight:var(--gog-calendar-title-font-weight);text-align:center}.gog-calendar__nav{flex:0 0 auto;width:var(--gog-calendar-nav-size);height:var(--gog-calendar-nav-size);padding:0;border:0;border-radius:var(--gog-calendar-nav-radius);background-color:var(--gog-calendar-nav-bg);color:var(--gog-calendar-nav-color);font-size:var(--gog-calendar-nav-icon-size);letter-spacing:var(--gog-calendar-nav-icon-overlap);cursor:pointer}.gog-calendar__nav:hover{background-color:var(--gog-calendar-nav-hover-bg);color:var(--gog-calendar-nav-hover-color)}.gog-calendar__nav:focus-visible,.gog-calendar__day:focus-visible,.gog-calendar__action:focus-visible,.gog-calendar__meridiem:focus-visible,.gog-calendar__time-input:focus-visible{outline:var(--gog-calendar-focus-ring-width) solid var(--gog-calendar-focus-ring-color);outline-offset:var(--gog-calendar-focus-ring-offset)}.gog-calendar__months{display:flex;gap:var(--gog-calendar-months-gap)}.gog-calendar__grid{border-collapse:collapse;table-layout:fixed}.gog-calendar__weekday{padding:var(--gog-calendar-weekday-padding);color:var(--gog-calendar-weekday-color);font-size:var(--gog-calendar-weekday-font-size);font-weight:var(--gog-calendar-weekday-font-weight);text-align:center;text-transform:var(--gog-calendar-weekday-text-transform)}.gog-calendar__cell{padding:0}.gog-calendar__day{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--gog-calendar-day-size, var(--gog-calendar-size-day-size, var(--gog-calendar-md-day-size)));height:var(--gog-calendar-day-size, var(--gog-calendar-size-day-size, var(--gog-calendar-md-day-size)));border:var(--gog-calendar-day-border-width) var(--gog-calendar-day-border-style) transparent;border-radius:var(--gog-calendar-day-radius);background-color:var(--gog-calendar-day-bg, var(--gog-calendar-day-rest-bg));color:var(--gog-calendar-day-color, var(--gog-calendar-day-rest-color));font:inherit;cursor:pointer;transition:background-color var(--gog-calendar-transition-duration) var(--gog-easing),color var(--gog-calendar-transition-duration) var(--gog-easing)}.gog-calendar__day:hover:not(:disabled){background-color:var(--gog-calendar-day-hover-bg)}.gog-calendar__day--outside{color:var(--gog-calendar-day-outside-color)}.gog-calendar__day--today{border-color:var(--gog-calendar-today-border-color);font-weight:var(--gog-calendar-today-font-weight)}.gog-calendar__day--in-range{border-radius:0;background-color:var(--gog-calendar-range-bg);color:var(--gog-calendar-range-color)}.gog-calendar__day--range-start{border-start-end-radius:0;border-end-end-radius:0}.gog-calendar__day--range-end{border-start-start-radius:0;border-end-start-radius:0}.gog-calendar__day--selected{background-color:var(--gog-calendar-selected-bg);color:var(--gog-calendar-selected-color);font-weight:var(--gog-calendar-selected-font-weight)}.gog-calendar__day:disabled{opacity:var(--gog-calendar-disabled-opacity);cursor:not-allowed}.gog-calendar__time{display:flex;align-items:center;justify-content:center;gap:var(--gog-calendar-time-gap);margin-block-start:var(--gog-calendar-time-margin);padding-block-start:var(--gog-calendar-time-margin);border-block-start:var(--gog-calendar-divider-width) var(--gog-calendar-divider-style) var(--gog-calendar-divider-color)}.gog-calendar__time-icon{color:var(--gog-calendar-weekday-color)}.gog-calendar__time-input{box-sizing:border-box;width:var(--gog-calendar-time-input-width);padding:var(--gog-calendar-time-input-padding);border:var(--gog-calendar-day-border-width) var(--gog-calendar-day-border-style) var(--gog-calendar-divider-color);border-radius:var(--gog-calendar-day-radius);background-color:var(--gog-calendar-time-input-bg);color:var(--gog-calendar-color);font:inherit;text-align:center}.gog-calendar__time-sep{color:var(--gog-calendar-weekday-color)}.gog-calendar__meridiem,.gog-calendar__action{padding:var(--gog-calendar-action-padding);border:var(--gog-calendar-day-border-width) var(--gog-calendar-day-border-style) var(--gog-calendar-divider-color);border-radius:var(--gog-calendar-day-radius);background-color:var(--gog-calendar-nav-bg);color:var(--gog-calendar-nav-color);font:inherit;cursor:pointer}.gog-calendar__meridiem:hover:not(:disabled),.gog-calendar__action:hover:not(:disabled){background-color:var(--gog-calendar-nav-hover-bg);color:var(--gog-calendar-nav-hover-color)}.gog-calendar__footer{display:flex;justify-content:center;gap:var(--gog-calendar-footer-gap);margin-block-start:var(--gog-calendar-time-margin)}.gog-calendar__action:disabled{opacity:var(--gog-calendar-disabled-opacity);cursor:not-allowed}:host(.gog-calendar--xsm){--gog-calendar-size-font-size: var(--gog-calendar-xsm-font-size);--gog-calendar-size-day-size: var(--gog-calendar-xsm-day-size)}:host(.gog-calendar--sm){--gog-calendar-size-font-size: var(--gog-calendar-sm-font-size);--gog-calendar-size-day-size: var(--gog-calendar-sm-day-size)}:host(.gog-calendar--lg){--gog-calendar-size-font-size: var(--gog-calendar-lg-font-size);--gog-calendar-size-day-size: var(--gog-calendar-lg-day-size)}:host(.gog-calendar--slg){--gog-calendar-size-font-size: var(--gog-calendar-slg-font-size);--gog-calendar-size-day-size: var(--gog-calendar-slg-day-size)}@media(prefers-reduced-motion:reduce){.gog-calendar__day{transition:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], defaultMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultMonth", required: false }] }], numberOfMonths: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberOfMonths", required: false }] }], showTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTime", required: false }] }], hourFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourFormat", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], showTodayButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTodayButton", required: false }] }], showThisMonthButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showThisMonthButton", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], todayLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "todayLabel", required: false }] }], thisMonthLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "thisMonthLabel", required: false }] }], previousMonthLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousMonthLabel", required: false }] }], nextMonthLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextMonthLabel", required: false }] }], previousYearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousYearLabel", required: false }] }], nextYearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextYearLabel", required: false }] }], hoursLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoursLabel", required: false }] }], minutesLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "minutesLabel", required: false }] }], secondsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondsLabel", required: false }] }], gogDateSelect: [{ type: i0.Output, args: ["gogDateSelect"] }] } });
 /** How far into the week `date` sits, given which weekday the week starts on. */
 function weekdayOffset(date, firstDayOfWeek) {
@@ -4280,13 +4286,13 @@ class DatepickerComponent {
         this.directionState.set(placement.direction);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DatepickerComponent, isStandalone: true, selector: "gog-datepicker", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, defaultMonth: { classPropertyName: "defaultMonth", publicName: "defaultMonth", isSignal: true, isRequired: false, transformFunction: null }, numberOfMonths: { classPropertyName: "numberOfMonths", publicName: "numberOfMonths", isSignal: true, isRequired: false, transformFunction: null }, showTime: { classPropertyName: "showTime", publicName: "showTime", isSignal: true, isRequired: false, transformFunction: null }, hourFormat: { classPropertyName: "hourFormat", publicName: "hourFormat", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, showTodayButton: { classPropertyName: "showTodayButton", publicName: "showTodayButton", isSignal: true, isRequired: false, transformFunction: null }, showThisMonthButton: { classPropertyName: "showThisMonthButton", publicName: "showThisMonthButton", isSignal: true, isRequired: false, transformFunction: null }, todayLabel: { classPropertyName: "todayLabel", publicName: "todayLabel", isSignal: true, isRequired: false, transformFunction: null }, thisMonthLabel: { classPropertyName: "thisMonthLabel", publicName: "thisMonthLabel", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, allowTextInput: { classPropertyName: "allowTextInput", publicName: "allowTextInput", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, errorDisplay: { classPropertyName: "errorDisplay", publicName: "errorDisplay", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, floatLabel: { classPropertyName: "floatLabel", publicName: "floatLabel", isSignal: true, isRequired: false, transformFunction: null }, floatLabelShowPlaceholder: { classPropertyName: "floatLabelShowPlaceholder", publicName: "floatLabelShowPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, appendToBody: { classPropertyName: "appendToBody", publicName: "appendToBody", isSignal: true, isRequired: false, transformFunction: null }, dropdownDirection: { classPropertyName: "dropdownDirection", publicName: "dropdownDirection", isSignal: true, isRequired: false, transformFunction: null }, dropdownZIndex: { classPropertyName: "dropdownZIndex", publicName: "dropdownZIndex", isSignal: true, isRequired: false, transformFunction: null }, openCalendarLabel: { classPropertyName: "openCalendarLabel", publicName: "openCalendarLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.gog-host--auto-width": "!fullWidth()" } }, viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panelTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (inline()) {\r\n  <!--\r\n    Inline mode is literally `gog-calendar` with no field and no panel around it \u2014 which is why\r\n    the calendar is its own component rather than markup buried in this one.\r\n  -->\r\n  <gog-calendar\r\n    class=\"gog-datepicker__inline\"\r\n    [value]=\"value()\"\r\n    [selectionMode]=\"selectionMode()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [disabledDates]=\"disabledDates()\"\r\n    [locale]=\"resolvedLocale()\"\r\n    [firstDayOfWeek]=\"resolvedFirstDayOfWeek()\"\r\n    [defaultMonth]=\"defaultMonth()\"\r\n    [numberOfMonths]=\"numberOfMonths()\"\r\n    [showTime]=\"showTime()\"\r\n    [hourFormat]=\"hourFormat()\"\r\n    [minuteStep]=\"minuteStep()\"\r\n    [showSeconds]=\"showSeconds()\"\r\n    [showTodayButton]=\"showTodayButton()\"\r\n    [showThisMonthButton]=\"showThisMonthButton()\"\r\n    [todayLabel]=\"todayLabel()\"\r\n    [thisMonthLabel]=\"thisMonthLabel()\"\r\n    [size]=\"resolvedSize()\"\r\n    (valueChange)=\"onCalendarValue($event)\"\r\n    (gogDateSelect)=\"onCalendarSelect($event)\"\r\n  />\r\n} @else {\r\n  <!--\r\n    Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\r\n    context, which traps the panel's z-index inside it.\r\n  -->\r\n  <div\r\n    class=\"gog-datepicker\"\r\n    [class]=\"sizeClass()\"\r\n    [class.gog-datepicker--clearable]=\"showClear()\"\r\n    [class.gog-datepicker--disabled]=\"isDisabled()\"\r\n    [class.gog-datepicker--open]=\"isOpen()\"\r\n    [class.gog-datepicker--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n    [class.gog-datepicker--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n    [class.gog-datepicker--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n    [class.gog-datepicker--floated]=\"isFloatLabelFloated()\"\r\n  >\r\n    @if (label() && resolvedFloatLabel() === 'none') {\r\n      <label class=\"gog-datepicker__label\" [for]=\"triggerId()\">{{ label() }}</label>\r\n    }\r\n\r\n    <div class=\"gog-datepicker__field\">\r\n      @if (label() && isFloatLabelActive()) {\r\n        <label class=\"gog-datepicker__label gog-datepicker__label--float\" [for]=\"triggerId()\">{{\r\n          label()\r\n        }}</label>\r\n      }\r\n\r\n      <input\r\n        type=\"text\"\r\n        class=\"gog-datepicker__control\"\r\n        autocomplete=\"off\"\r\n        [id]=\"triggerId()\"\r\n        [disabled]=\"isDisabled()\"\r\n        [readOnly]=\"!allowTextInput() || selectionMode() === 'range'\"\r\n        [value]=\"text()\"\r\n        [placeholder]=\"effectivePlaceholder()\"\r\n        [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\r\n        [attr.aria-haspopup]=\"'dialog'\"\r\n        [attr.aria-expanded]=\"isOpen()\"\r\n        [attr.aria-controls]=\"panelId()\"\r\n        [attr.aria-invalid]=\"hasError()\"\r\n        [attr.aria-describedby]=\"errorId()\"\r\n        (input)=\"onTextInput($event)\"\r\n        (keydown)=\"onTriggerKeydown($event)\"\r\n        (focus)=\"onFocus()\"\r\n        (blur)=\"onBlur()\"\r\n      />\r\n\r\n      <span class=\"gog-datepicker__actions\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-datepicker__toggle gog-inline-center\"\r\n          [disabled]=\"isDisabled()\"\r\n          [attr.aria-label]=\"resolvedOpenCalendarLabel()\"\r\n          [attr.aria-expanded]=\"isOpen()\"\r\n          [attr.aria-controls]=\"panelId()\"\r\n          (click)=\"toggle()\"\r\n        >\r\n          <gog-icon name=\"calendar\" />\r\n        </button>\r\n\r\n        @if (showClear()) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"gog-datepicker__clear gog-inline-center\"\r\n            [attr.aria-label]=\"resolvedClearLabel()\"\r\n            (click)=\"clearValue($event)\"\r\n          >\r\n            <gog-icon name=\"close\" />\r\n          </button>\r\n        }\r\n      </span>\r\n\r\n      @if (isOpen() && !resolvedAppendToBody()) {\r\n        <ng-container [ngTemplateOutlet]=\"panelTpl\" />\r\n      }\r\n    </div>\r\n\r\n    @if (hasError()) {\r\n      <span class=\"gog-datepicker__error\" [attr.id]=\"errorId()\" role=\"alert\">\r\n        {{ visibleError() }}\r\n      </span>\r\n    }\r\n  </div>\r\n}\r\n\r\n<!--\r\n  One template for both render modes \u2014 inline under the field, or stamped into <body> by the\r\n  overlay when `appendToBody` is set, which also copies any scoped `data-theme` across.\r\n-->\r\n<ng-template #panelTpl>\r\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -- (click) here is housekeeping stopPropagation, not an interactive handler; the focusable, keyboard-operable elements are the calendar's own grid and buttons -->\r\n  <div\r\n    [id]=\"panelId()\"\r\n    class=\"gog-datepicker__panel\"\r\n    role=\"dialog\"\r\n    [attr.aria-label]=\"label() || ariaLabel() || resolvedOpenCalendarLabel()\"\r\n    [class.gog-datepicker__panel--up]=\"!resolvedAppendToBody() && directionState() === 'up'\"\r\n    [class.gog-datepicker__panel--portal]=\"resolvedAppendToBody()\"\r\n    [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\r\n    [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\r\n    [style.z-index]=\"dropdownZIndex()\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    <gog-calendar\r\n      [value]=\"value()\"\r\n      [selectionMode]=\"selectionMode()\"\r\n      [min]=\"min()\"\r\n      [max]=\"max()\"\r\n      [disabledDates]=\"disabledDates()\"\r\n      [locale]=\"resolvedLocale()\"\r\n      [firstDayOfWeek]=\"resolvedFirstDayOfWeek()\"\r\n      [defaultMonth]=\"defaultMonth()\"\r\n      [numberOfMonths]=\"numberOfMonths()\"\r\n      [showTime]=\"showTime()\"\r\n      [hourFormat]=\"hourFormat()\"\r\n      [minuteStep]=\"minuteStep()\"\r\n      [showSeconds]=\"showSeconds()\"\r\n      [showTodayButton]=\"showTodayButton()\"\r\n      [showThisMonthButton]=\"showThisMonthButton()\"\r\n      [todayLabel]=\"todayLabel()\"\r\n      [thisMonthLabel]=\"thisMonthLabel()\"\r\n      [size]=\"resolvedSize()\"\r\n      (valueChange)=\"onCalendarValue($event)\"\r\n      (gogDateSelect)=\"onCalendarSelect($event)\"\r\n    />\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.gog-datepicker{display:flex;flex-direction:column;gap:var(--gog-datepicker-gap);width:100%}.gog-datepicker__label{color:var(--gog-datepicker-label-color);font-family:var(--gog-datepicker-label-font-family);font-size:var(--gog-datepicker-label-font-size);letter-spacing:var(--gog-datepicker-label-letter-spacing);text-transform:var(--gog-datepicker-label-text-transform)}.gog-datepicker__field{position:relative;display:flex;align-items:center;width:100%;min-width:var(--gog-datepicker-min-width)}.gog-datepicker__control{box-sizing:border-box;width:100%;padding:var(--gog-datepicker-padding-y, var(--gog-datepicker-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-datepicker-actions-reserve) var(--gog-datepicker-padding-y, var(--gog-datepicker-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-datepicker-padding-x, var(--gog-datepicker-size-padding-x, var(--gog-field-md-padding-x)));border:var(--gog-datepicker-border-width) var(--gog-datepicker-border-style) var(--gog-datepicker-border-color);border-radius:var(--gog-datepicker-radius);background-color:var(--gog-datepicker-bg, var(--gog-datepicker-field-bg));color:var(--gog-datepicker-color, var(--gog-datepicker-text-color));font-family:var(--gog-datepicker-font-family);font-size:var(--gog-datepicker-font-size, var(--gog-datepicker-size-font-size, var(--gog-field-md-font-size)));line-height:var(--gog-datepicker-line-height);transition:border-color var(--gog-datepicker-transition-duration) var(--gog-easing)}.gog-datepicker__control::placeholder{color:var(--gog-datepicker-placeholder-color)}.gog-datepicker__control:hover:not(:disabled){border-color:var(--gog-datepicker-hover-border-color)}.gog-datepicker__control:focus-visible,.gog-datepicker__toggle:focus-visible,.gog-datepicker__clear:focus-visible{outline:var(--gog-datepicker-focus-ring-width) solid var(--gog-datepicker-focus-ring-color);outline-offset:var(--gog-datepicker-focus-ring-offset)}.gog-datepicker__control:disabled{opacity:var(--gog-datepicker-disabled-opacity);cursor:not-allowed}.gog-datepicker__control[aria-invalid=true]{border-color:var(--gog-datepicker-error-border-color)}.gog-datepicker__actions{position:absolute;inset-inline-end:var(--gog-datepicker-actions-inset);display:inline-flex;align-items:center;flex-direction:row-reverse;gap:var(--gog-datepicker-actions-gap)}.gog-datepicker__toggle,.gog-datepicker__clear{padding:0;border:0;background:none;color:var(--gog-datepicker-icon-color);cursor:pointer}.gog-datepicker__toggle{font-size:var(--gog-datepicker-toggle-icon-size)}.gog-datepicker__clear{color:var(--gog-datepicker-clear-color);font-size:calc(var(--gog-icon-size) * var(--gog-datepicker-clear-icon-ratio))}.gog-datepicker__toggle:hover,.gog-datepicker__clear:hover{color:var(--gog-datepicker-icon-hover-color)}.gog-datepicker__toggle:disabled{opacity:var(--gog-datepicker-disabled-opacity);cursor:not-allowed}.gog-datepicker__error{color:var(--gog-datepicker-error-color);font-family:var(--gog-datepicker-error-font-family);font-size:var(--gog-datepicker-error-font-size)}.gog-datepicker__panel{position:absolute;inset-inline-start:0;top:calc(100% + var(--gog-datepicker-panel-gap));z-index:var(--gog-dropdown-z);width:max-content;border:var(--gog-datepicker-panel-border-width) var(--gog-datepicker-panel-border-style) var(--gog-datepicker-panel-border-color);border-radius:var(--gog-datepicker-panel-radius);background-color:var(--gog-datepicker-panel-bg);box-shadow:var(--gog-datepicker-panel-shadow)}.gog-datepicker__panel--up{top:auto;bottom:calc(100% + var(--gog-datepicker-panel-gap))}.gog-datepicker__panel--portal{position:fixed;top:0;inset-inline-start:0}.gog-datepicker__inline{border:var(--gog-datepicker-panel-border-width) var(--gog-datepicker-panel-border-style) var(--gog-datepicker-panel-border-color);border-radius:var(--gog-datepicker-panel-radius);background-color:var(--gog-datepicker-panel-bg)}.gog-datepicker--xsm{--gog-datepicker-size-padding-y: var(--gog-field-xsm-padding-y);--gog-datepicker-size-padding-x: var(--gog-field-xsm-padding-x);--gog-datepicker-size-font-size: var(--gog-field-xsm-font-size)}.gog-datepicker--sm{--gog-datepicker-size-padding-y: var(--gog-field-sm-padding-y);--gog-datepicker-size-padding-x: var(--gog-field-sm-padding-x);--gog-datepicker-size-font-size: var(--gog-field-sm-font-size)}.gog-datepicker--lg{--gog-datepicker-size-padding-y: var(--gog-field-lg-padding-y);--gog-datepicker-size-padding-x: var(--gog-field-lg-padding-x);--gog-datepicker-size-font-size: var(--gog-field-lg-font-size)}.gog-datepicker--slg{--gog-datepicker-size-padding-y: var(--gog-field-slg-padding-y);--gog-datepicker-size-padding-x: var(--gog-field-slg-padding-x);--gog-datepicker-size-font-size: var(--gog-field-slg-font-size)}:host(.gog-host--auto-width) .gog-datepicker,:host(.gog-host--auto-width) .gog-datepicker__field,:host(.gog-host--auto-width) .gog-datepicker__control{width:auto}.gog-datepicker__label--float{position:absolute;left:var(--gog-datepicker-padding-x, var(--gog-datepicker-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - 2 * var(--gog-datepicker-padding-x, var(--gog-datepicker-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;color:var(--gog-datepicker-placeholder-color);font-size:var(--gog-datepicker-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-datepicker-transition-duration) var(--gog-easing),font-size var(--gog-datepicker-transition-duration) var(--gog-easing),color var(--gog-datepicker-transition-duration) var(--gog-easing),top var(--gog-datepicker-transition-duration) var(--gog-easing),background-color var(--gog-datepicker-transition-duration) var(--gog-easing)}.gog-datepicker--float-in,.gog-datepicker--float-on{--gog-datepicker-float-top-padding: calc(var(--gog-datepicker-padding-y, var(--gog-datepicker-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-datepicker-float-label-reserve))}.gog-datepicker--float-in .gog-datepicker__control,.gog-datepicker--float-on .gog-datepicker__control{padding-top:var(--gog-datepicker-float-top-padding)}.gog-datepicker--float-in .gog-datepicker__label--float,.gog-datepicker--float-on .gog-datepicker__label--float{top:var(--gog-datepicker-float-top-padding);transform:none}.gog-datepicker--float-in.gog-datepicker--floated .gog-datepicker__label--float{top:var(--gog-datepicker-float-label-in-top);transform:translateY(0);font-size:var(--gog-datepicker-label-font-size);color:var(--gog-datepicker-label-color);text-transform:var(--gog-datepicker-label-text-transform);letter-spacing:var(--gog-datepicker-label-letter-spacing)}.gog-datepicker--float-on.gog-datepicker--floated .gog-datepicker__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-datepicker-label-font-size);color:var(--gog-datepicker-label-color);text-transform:var(--gog-datepicker-label-text-transform);letter-spacing:var(--gog-datepicker-label-letter-spacing);background-color:var(--gog-datepicker-float-label-on-bg, var(--gog-datepicker-field-bg));padding:0 4px;left:calc(var(--gog-datepicker-padding-x, var(--gog-datepicker-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-datepicker--float-over.gog-datepicker--floated .gog-datepicker__label--float{top:calc(-1 * var(--gog-datepicker-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-datepicker-label-font-size);color:var(--gog-datepicker-label-color);text-transform:var(--gog-datepicker-label-text-transform);letter-spacing:var(--gog-datepicker-label-letter-spacing)}.gog-datepicker--float-over .gog-datepicker__field{margin-top:var(--gog-datepicker-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-datepicker__control{transition:none}}\n"], dependencies: [{ kind: "component", type: CalendarComponent, selector: "gog-calendar", inputs: ["value", "selectionMode", "min", "max", "disabledDates", "locale", "firstDayOfWeek", "defaultMonth", "numberOfMonths", "showTime", "hourFormat", "minuteStep", "showSeconds", "showTodayButton", "showThisMonthButton", "size", "todayLabel", "thisMonthLabel", "previousMonthLabel", "nextMonthLabel", "previousYearLabel", "nextYearLabel", "hoursLabel", "minutesLabel", "secondsLabel"], outputs: ["valueChange", "gogDateSelect"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DatepickerComponent, isStandalone: true, selector: "gog-datepicker", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, defaultMonth: { classPropertyName: "defaultMonth", publicName: "defaultMonth", isSignal: true, isRequired: false, transformFunction: null }, numberOfMonths: { classPropertyName: "numberOfMonths", publicName: "numberOfMonths", isSignal: true, isRequired: false, transformFunction: null }, showTime: { classPropertyName: "showTime", publicName: "showTime", isSignal: true, isRequired: false, transformFunction: null }, hourFormat: { classPropertyName: "hourFormat", publicName: "hourFormat", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, showTodayButton: { classPropertyName: "showTodayButton", publicName: "showTodayButton", isSignal: true, isRequired: false, transformFunction: null }, showThisMonthButton: { classPropertyName: "showThisMonthButton", publicName: "showThisMonthButton", isSignal: true, isRequired: false, transformFunction: null }, todayLabel: { classPropertyName: "todayLabel", publicName: "todayLabel", isSignal: true, isRequired: false, transformFunction: null }, thisMonthLabel: { classPropertyName: "thisMonthLabel", publicName: "thisMonthLabel", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, allowTextInput: { classPropertyName: "allowTextInput", publicName: "allowTextInput", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, errorDisplay: { classPropertyName: "errorDisplay", publicName: "errorDisplay", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, floatLabel: { classPropertyName: "floatLabel", publicName: "floatLabel", isSignal: true, isRequired: false, transformFunction: null }, floatLabelShowPlaceholder: { classPropertyName: "floatLabelShowPlaceholder", publicName: "floatLabelShowPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, appendToBody: { classPropertyName: "appendToBody", publicName: "appendToBody", isSignal: true, isRequired: false, transformFunction: null }, dropdownDirection: { classPropertyName: "dropdownDirection", publicName: "dropdownDirection", isSignal: true, isRequired: false, transformFunction: null }, dropdownZIndex: { classPropertyName: "dropdownZIndex", publicName: "dropdownZIndex", isSignal: true, isRequired: false, transformFunction: null }, openCalendarLabel: { classPropertyName: "openCalendarLabel", publicName: "openCalendarLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.gog-host--auto-width": "!fullWidth()" } }, viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panelTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (inline()) {\r\n  <!--\r\n    Inline mode is literally `gog-calendar` with no field and no panel around it \u2014 which is why\r\n    the calendar is its own component rather than markup buried in this one.\r\n  -->\r\n  <gog-calendar\r\n    class=\"gog-datepicker__inline\"\r\n    [value]=\"value()\"\r\n    [selectionMode]=\"selectionMode()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [disabledDates]=\"disabledDates()\"\r\n    [locale]=\"resolvedLocale()\"\r\n    [firstDayOfWeek]=\"resolvedFirstDayOfWeek()\"\r\n    [defaultMonth]=\"defaultMonth()\"\r\n    [numberOfMonths]=\"numberOfMonths()\"\r\n    [showTime]=\"showTime()\"\r\n    [hourFormat]=\"hourFormat()\"\r\n    [minuteStep]=\"minuteStep()\"\r\n    [showSeconds]=\"showSeconds()\"\r\n    [showTodayButton]=\"showTodayButton()\"\r\n    [showThisMonthButton]=\"showThisMonthButton()\"\r\n    [todayLabel]=\"todayLabel()\"\r\n    [thisMonthLabel]=\"thisMonthLabel()\"\r\n    [size]=\"resolvedSize()\"\r\n    (valueChange)=\"onCalendarValue($event)\"\r\n    (gogDateSelect)=\"onCalendarSelect($event)\"\r\n  />\r\n} @else {\r\n  <!--\r\n    Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\r\n    context, which traps the panel's z-index inside it.\r\n  -->\r\n  <div\r\n    class=\"gog-datepicker\"\r\n    [class]=\"sizeClass()\"\r\n    [class.gog-datepicker--clearable]=\"showClear()\"\r\n    [class.gog-datepicker--disabled]=\"isDisabled()\"\r\n    [class.gog-datepicker--open]=\"isOpen()\"\r\n    [class.gog-datepicker--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n    [class.gog-datepicker--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n    [class.gog-datepicker--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n    [class.gog-datepicker--floated]=\"isFloatLabelFloated()\"\r\n  >\r\n    @if (label() && resolvedFloatLabel() === 'none') {\r\n      <label class=\"gog-datepicker__label\" [for]=\"triggerId()\">{{ label() }}</label>\r\n    }\r\n\r\n    <div class=\"gog-datepicker__field\">\r\n      @if (label() && isFloatLabelActive()) {\r\n        <label class=\"gog-datepicker__label gog-datepicker__label--float\" [for]=\"triggerId()\">{{\r\n          label()\r\n        }}</label>\r\n      }\r\n\r\n      <input\r\n        type=\"text\"\r\n        class=\"gog-datepicker__control\"\r\n        autocomplete=\"off\"\r\n        [id]=\"triggerId()\"\r\n        [disabled]=\"isDisabled()\"\r\n        [readOnly]=\"!allowTextInput() || selectionMode() === 'range'\"\r\n        [value]=\"text()\"\r\n        [placeholder]=\"effectivePlaceholder()\"\r\n        [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\r\n        [attr.aria-haspopup]=\"'dialog'\"\r\n        [attr.aria-expanded]=\"isOpen()\"\r\n        [attr.aria-controls]=\"panelId()\"\r\n        [attr.aria-invalid]=\"hasError()\"\r\n        [attr.aria-describedby]=\"errorId()\"\r\n        (input)=\"onTextInput($event)\"\r\n        (keydown)=\"onTriggerKeydown($event)\"\r\n        (focus)=\"onFocus()\"\r\n        (blur)=\"onBlur()\"\r\n      />\r\n\r\n      <span class=\"gog-datepicker__actions\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-datepicker__toggle gog-inline-center\"\r\n          [disabled]=\"isDisabled()\"\r\n          [attr.aria-label]=\"resolvedOpenCalendarLabel()\"\r\n          [attr.aria-expanded]=\"isOpen()\"\r\n          [attr.aria-controls]=\"panelId()\"\r\n          (click)=\"toggle()\"\r\n        >\r\n          <gog-icon name=\"calendar\" />\r\n        </button>\r\n\r\n        @if (showClear()) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"gog-datepicker__clear gog-inline-center\"\r\n            [attr.aria-label]=\"resolvedClearLabel()\"\r\n            (click)=\"clearValue($event)\"\r\n          >\r\n            <gog-icon name=\"close\" />\r\n          </button>\r\n        }\r\n      </span>\r\n\r\n      @if (isOpen() && !resolvedAppendToBody()) {\r\n        <ng-container [ngTemplateOutlet]=\"panelTpl\" />\r\n      }\r\n    </div>\r\n\r\n    @if (hasError()) {\r\n      <span class=\"gog-datepicker__error\" [attr.id]=\"errorId()\" role=\"alert\">\r\n        {{ visibleError() }}\r\n      </span>\r\n    }\r\n  </div>\r\n}\r\n\r\n<!--\r\n  One template for both render modes \u2014 inline under the field, or stamped into <body> by the\r\n  overlay when `appendToBody` is set, which also copies any scoped `data-theme` across.\r\n-->\r\n<ng-template #panelTpl>\r\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -- (click) here is housekeeping stopPropagation, not an interactive handler; the focusable, keyboard-operable elements are the calendar's own grid and buttons -->\r\n  <div\r\n    [id]=\"panelId()\"\r\n    class=\"gog-datepicker__panel\"\r\n    role=\"dialog\"\r\n    [attr.aria-label]=\"label() || ariaLabel() || resolvedOpenCalendarLabel()\"\r\n    [class.gog-datepicker__panel--up]=\"!resolvedAppendToBody() && directionState() === 'up'\"\r\n    [class.gog-datepicker__panel--portal]=\"resolvedAppendToBody()\"\r\n    [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\r\n    [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\r\n    [style.z-index]=\"dropdownZIndex()\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    <gog-calendar\r\n      [value]=\"value()\"\r\n      [selectionMode]=\"selectionMode()\"\r\n      [min]=\"min()\"\r\n      [max]=\"max()\"\r\n      [disabledDates]=\"disabledDates()\"\r\n      [locale]=\"resolvedLocale()\"\r\n      [firstDayOfWeek]=\"resolvedFirstDayOfWeek()\"\r\n      [defaultMonth]=\"defaultMonth()\"\r\n      [numberOfMonths]=\"numberOfMonths()\"\r\n      [showTime]=\"showTime()\"\r\n      [hourFormat]=\"hourFormat()\"\r\n      [minuteStep]=\"minuteStep()\"\r\n      [showSeconds]=\"showSeconds()\"\r\n      [showTodayButton]=\"showTodayButton()\"\r\n      [showThisMonthButton]=\"showThisMonthButton()\"\r\n      [todayLabel]=\"todayLabel()\"\r\n      [thisMonthLabel]=\"thisMonthLabel()\"\r\n      [size]=\"resolvedSize()\"\r\n      (valueChange)=\"onCalendarValue($event)\"\r\n      (gogDateSelect)=\"onCalendarSelect($event)\"\r\n    />\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.gog-datepicker{display:flex;flex-direction:column;gap:var(--gog-datepicker-gap);width:100%}.gog-datepicker__label{color:var(--gog-datepicker-label-color);font-family:var(--gog-datepicker-label-font-family);font-size:var(--gog-datepicker-label-font-size);letter-spacing:var(--gog-datepicker-label-letter-spacing);text-transform:var(--gog-datepicker-label-text-transform)}.gog-datepicker__field{position:relative;display:flex;align-items:center;width:100%;min-width:var(--gog-datepicker-min-width)}.gog-datepicker__control{box-sizing:border-box;width:100%;padding:var(--gog-datepicker-padding-y, var(--gog-datepicker-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-datepicker-actions-reserve) var(--gog-datepicker-padding-y, var(--gog-datepicker-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-datepicker-padding-x, var(--gog-datepicker-size-padding-x, var(--gog-field-md-padding-x)));border:var(--gog-datepicker-border-width) var(--gog-datepicker-border-style) var(--gog-datepicker-border-color);border-radius:var(--gog-datepicker-radius);background-color:var(--gog-datepicker-bg, var(--gog-datepicker-field-bg));color:var(--gog-datepicker-color, var(--gog-datepicker-text-color));font-family:var(--gog-datepicker-font-family);font-size:var(--gog-datepicker-font-size, var(--gog-datepicker-size-font-size, var(--gog-field-md-font-size)));line-height:var(--gog-datepicker-line-height);transition:border-color var(--gog-datepicker-transition-duration) var(--gog-easing)}.gog-datepicker__control::placeholder{color:var(--gog-datepicker-placeholder-color)}.gog-datepicker__control:hover:not(:disabled){border-color:var(--gog-datepicker-hover-border-color)}.gog-datepicker__control:focus-visible,.gog-datepicker__toggle:focus-visible,.gog-datepicker__clear:focus-visible{outline:var(--gog-datepicker-focus-ring-width) solid var(--gog-datepicker-focus-ring-color);outline-offset:var(--gog-datepicker-focus-ring-offset)}.gog-datepicker__control:disabled{opacity:var(--gog-datepicker-disabled-opacity);cursor:not-allowed}.gog-datepicker__control[aria-invalid=true]{border-color:var(--gog-datepicker-error-border-color)}.gog-datepicker__actions{position:absolute;inset-inline-end:var(--gog-datepicker-actions-inset);display:inline-flex;align-items:center;flex-direction:row-reverse;gap:var(--gog-datepicker-actions-gap)}.gog-datepicker__toggle,.gog-datepicker__clear{padding:0;border:0;background:none;color:var(--gog-datepicker-icon-color);cursor:pointer}.gog-datepicker__toggle{font-size:var(--gog-datepicker-toggle-icon-size)}.gog-datepicker__clear{color:var(--gog-datepicker-clear-color);font-size:calc(var(--gog-icon-size) * var(--gog-datepicker-clear-icon-ratio))}.gog-datepicker__toggle:hover,.gog-datepicker__clear:hover{color:var(--gog-datepicker-icon-hover-color)}.gog-datepicker__toggle:disabled{opacity:var(--gog-datepicker-disabled-opacity);cursor:not-allowed}.gog-datepicker__error{color:var(--gog-datepicker-error-color);font-family:var(--gog-datepicker-error-font-family);font-size:var(--gog-datepicker-error-font-size)}.gog-datepicker__panel{position:absolute;inset-inline-start:0;top:calc(100% + var(--gog-datepicker-panel-gap));z-index:var(--gog-dropdown-z);width:var(--gog-datepicker-panel-width);border:var(--gog-datepicker-panel-border-width) var(--gog-datepicker-panel-border-style) var(--gog-datepicker-panel-border-color);border-radius:var(--gog-datepicker-panel-radius);background-color:var(--gog-datepicker-panel-bg);box-shadow:var(--gog-datepicker-panel-shadow)}.gog-datepicker__panel--up{top:auto;bottom:calc(100% + var(--gog-datepicker-panel-gap))}.gog-datepicker__panel--portal{position:fixed;top:0;inset-inline-start:0}.gog-datepicker__inline{border:var(--gog-datepicker-panel-border-width) var(--gog-datepicker-panel-border-style) var(--gog-datepicker-panel-border-color);border-radius:var(--gog-datepicker-panel-radius);background-color:var(--gog-datepicker-panel-bg)}.gog-datepicker--xsm{--gog-datepicker-size-padding-y: var(--gog-field-xsm-padding-y);--gog-datepicker-size-padding-x: var(--gog-field-xsm-padding-x);--gog-datepicker-size-font-size: var(--gog-field-xsm-font-size)}.gog-datepicker--sm{--gog-datepicker-size-padding-y: var(--gog-field-sm-padding-y);--gog-datepicker-size-padding-x: var(--gog-field-sm-padding-x);--gog-datepicker-size-font-size: var(--gog-field-sm-font-size)}.gog-datepicker--lg{--gog-datepicker-size-padding-y: var(--gog-field-lg-padding-y);--gog-datepicker-size-padding-x: var(--gog-field-lg-padding-x);--gog-datepicker-size-font-size: var(--gog-field-lg-font-size)}.gog-datepicker--slg{--gog-datepicker-size-padding-y: var(--gog-field-slg-padding-y);--gog-datepicker-size-padding-x: var(--gog-field-slg-padding-x);--gog-datepicker-size-font-size: var(--gog-field-slg-font-size)}:host(.gog-host--auto-width) .gog-datepicker,:host(.gog-host--auto-width) .gog-datepicker__field,:host(.gog-host--auto-width) .gog-datepicker__control{width:auto}.gog-datepicker__label--float{position:absolute;left:var(--gog-datepicker-padding-x, var(--gog-datepicker-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - 2 * var(--gog-datepicker-padding-x, var(--gog-datepicker-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;color:var(--gog-datepicker-placeholder-color);font-size:var(--gog-datepicker-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-datepicker-transition-duration) var(--gog-easing),font-size var(--gog-datepicker-transition-duration) var(--gog-easing),color var(--gog-datepicker-transition-duration) var(--gog-easing),top var(--gog-datepicker-transition-duration) var(--gog-easing),background-color var(--gog-datepicker-transition-duration) var(--gog-easing)}.gog-datepicker--float-in,.gog-datepicker--float-on{--gog-datepicker-float-top-padding: calc(var(--gog-datepicker-padding-y, var(--gog-datepicker-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-datepicker-float-label-reserve))}.gog-datepicker--float-in .gog-datepicker__control,.gog-datepicker--float-on .gog-datepicker__control{padding-top:var(--gog-datepicker-float-top-padding)}.gog-datepicker--float-in .gog-datepicker__label--float,.gog-datepicker--float-on .gog-datepicker__label--float{top:var(--gog-datepicker-float-top-padding);transform:none}.gog-datepicker--float-in.gog-datepicker--floated .gog-datepicker__label--float{top:var(--gog-datepicker-float-label-in-top);transform:translateY(0);font-size:var(--gog-datepicker-label-font-size);color:var(--gog-datepicker-label-color);text-transform:var(--gog-datepicker-label-text-transform);letter-spacing:var(--gog-datepicker-label-letter-spacing)}.gog-datepicker--float-on.gog-datepicker--floated .gog-datepicker__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-datepicker-label-font-size);color:var(--gog-datepicker-label-color);text-transform:var(--gog-datepicker-label-text-transform);letter-spacing:var(--gog-datepicker-label-letter-spacing);background-color:var(--gog-datepicker-float-label-on-bg, var(--gog-datepicker-field-bg));padding:0 4px;left:calc(var(--gog-datepicker-padding-x, var(--gog-datepicker-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-datepicker--float-over.gog-datepicker--floated .gog-datepicker__label--float{top:calc(-1 * var(--gog-datepicker-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-datepicker-label-font-size);color:var(--gog-datepicker-label-color);text-transform:var(--gog-datepicker-label-text-transform);letter-spacing:var(--gog-datepicker-label-letter-spacing)}.gog-datepicker--float-over .gog-datepicker__field{margin-top:var(--gog-datepicker-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-datepicker__control{transition:none}}\n"], dependencies: [{ kind: "component", type: CalendarComponent, selector: "gog-calendar", inputs: ["value", "selectionMode", "min", "max", "disabledDates", "locale", "firstDayOfWeek", "defaultMonth", "numberOfMonths", "showTime", "hourFormat", "minuteStep", "showSeconds", "showTodayButton", "showThisMonthButton", "size", "todayLabel", "thisMonthLabel", "previousMonthLabel", "nextMonthLabel", "previousYearLabel", "nextYearLabel", "hoursLabel", "minutesLabel", "secondsLabel"], outputs: ["valueChange", "gogDateSelect"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DatepickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gog-datepicker', imports: [CalendarComponent, IconComponent, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.gog-host--auto-width]': '!fullWidth()',
-                    }, template: "@if (inline()) {\r\n  <!--\r\n    Inline mode is literally `gog-calendar` with no field and no panel around it \u2014 which is why\r\n    the calendar is its own component rather than markup buried in this one.\r\n  -->\r\n  <gog-calendar\r\n    class=\"gog-datepicker__inline\"\r\n    [value]=\"value()\"\r\n    [selectionMode]=\"selectionMode()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [disabledDates]=\"disabledDates()\"\r\n    [locale]=\"resolvedLocale()\"\r\n    [firstDayOfWeek]=\"resolvedFirstDayOfWeek()\"\r\n    [defaultMonth]=\"defaultMonth()\"\r\n    [numberOfMonths]=\"numberOfMonths()\"\r\n    [showTime]=\"showTime()\"\r\n    [hourFormat]=\"hourFormat()\"\r\n    [minuteStep]=\"minuteStep()\"\r\n    [showSeconds]=\"showSeconds()\"\r\n    [showTodayButton]=\"showTodayButton()\"\r\n    [showThisMonthButton]=\"showThisMonthButton()\"\r\n    [todayLabel]=\"todayLabel()\"\r\n    [thisMonthLabel]=\"thisMonthLabel()\"\r\n    [size]=\"resolvedSize()\"\r\n    (valueChange)=\"onCalendarValue($event)\"\r\n    (gogDateSelect)=\"onCalendarSelect($event)\"\r\n  />\r\n} @else {\r\n  <!--\r\n    Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\r\n    context, which traps the panel's z-index inside it.\r\n  -->\r\n  <div\r\n    class=\"gog-datepicker\"\r\n    [class]=\"sizeClass()\"\r\n    [class.gog-datepicker--clearable]=\"showClear()\"\r\n    [class.gog-datepicker--disabled]=\"isDisabled()\"\r\n    [class.gog-datepicker--open]=\"isOpen()\"\r\n    [class.gog-datepicker--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n    [class.gog-datepicker--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n    [class.gog-datepicker--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n    [class.gog-datepicker--floated]=\"isFloatLabelFloated()\"\r\n  >\r\n    @if (label() && resolvedFloatLabel() === 'none') {\r\n      <label class=\"gog-datepicker__label\" [for]=\"triggerId()\">{{ label() }}</label>\r\n    }\r\n\r\n    <div class=\"gog-datepicker__field\">\r\n      @if (label() && isFloatLabelActive()) {\r\n        <label class=\"gog-datepicker__label gog-datepicker__label--float\" [for]=\"triggerId()\">{{\r\n          label()\r\n        }}</label>\r\n      }\r\n\r\n      <input\r\n        type=\"text\"\r\n        class=\"gog-datepicker__control\"\r\n        autocomplete=\"off\"\r\n        [id]=\"triggerId()\"\r\n        [disabled]=\"isDisabled()\"\r\n        [readOnly]=\"!allowTextInput() || selectionMode() === 'range'\"\r\n        [value]=\"text()\"\r\n        [placeholder]=\"effectivePlaceholder()\"\r\n        [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\r\n        [attr.aria-haspopup]=\"'dialog'\"\r\n        [attr.aria-expanded]=\"isOpen()\"\r\n        [attr.aria-controls]=\"panelId()\"\r\n        [attr.aria-invalid]=\"hasError()\"\r\n        [attr.aria-describedby]=\"errorId()\"\r\n        (input)=\"onTextInput($event)\"\r\n        (keydown)=\"onTriggerKeydown($event)\"\r\n        (focus)=\"onFocus()\"\r\n        (blur)=\"onBlur()\"\r\n      />\r\n\r\n      <span class=\"gog-datepicker__actions\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-datepicker__toggle gog-inline-center\"\r\n          [disabled]=\"isDisabled()\"\r\n          [attr.aria-label]=\"resolvedOpenCalendarLabel()\"\r\n          [attr.aria-expanded]=\"isOpen()\"\r\n          [attr.aria-controls]=\"panelId()\"\r\n          (click)=\"toggle()\"\r\n        >\r\n          <gog-icon name=\"calendar\" />\r\n        </button>\r\n\r\n        @if (showClear()) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"gog-datepicker__clear gog-inline-center\"\r\n            [attr.aria-label]=\"resolvedClearLabel()\"\r\n            (click)=\"clearValue($event)\"\r\n          >\r\n            <gog-icon name=\"close\" />\r\n          </button>\r\n        }\r\n      </span>\r\n\r\n      @if (isOpen() && !resolvedAppendToBody()) {\r\n        <ng-container [ngTemplateOutlet]=\"panelTpl\" />\r\n      }\r\n    </div>\r\n\r\n    @if (hasError()) {\r\n      <span class=\"gog-datepicker__error\" [attr.id]=\"errorId()\" role=\"alert\">\r\n        {{ visibleError() }}\r\n      </span>\r\n    }\r\n  </div>\r\n}\r\n\r\n<!--\r\n  One template for both render modes \u2014 inline under the field, or stamped into <body> by the\r\n  overlay when `appendToBody` is set, which also copies any scoped `data-theme` across.\r\n-->\r\n<ng-template #panelTpl>\r\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -- (click) here is housekeeping stopPropagation, not an interactive handler; the focusable, keyboard-operable elements are the calendar's own grid and buttons -->\r\n  <div\r\n    [id]=\"panelId()\"\r\n    class=\"gog-datepicker__panel\"\r\n    role=\"dialog\"\r\n    [attr.aria-label]=\"label() || ariaLabel() || resolvedOpenCalendarLabel()\"\r\n    [class.gog-datepicker__panel--up]=\"!resolvedAppendToBody() && directionState() === 'up'\"\r\n    [class.gog-datepicker__panel--portal]=\"resolvedAppendToBody()\"\r\n    [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\r\n    [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\r\n    [style.z-index]=\"dropdownZIndex()\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    <gog-calendar\r\n      [value]=\"value()\"\r\n      [selectionMode]=\"selectionMode()\"\r\n      [min]=\"min()\"\r\n      [max]=\"max()\"\r\n      [disabledDates]=\"disabledDates()\"\r\n      [locale]=\"resolvedLocale()\"\r\n      [firstDayOfWeek]=\"resolvedFirstDayOfWeek()\"\r\n      [defaultMonth]=\"defaultMonth()\"\r\n      [numberOfMonths]=\"numberOfMonths()\"\r\n      [showTime]=\"showTime()\"\r\n      [hourFormat]=\"hourFormat()\"\r\n      [minuteStep]=\"minuteStep()\"\r\n      [showSeconds]=\"showSeconds()\"\r\n      [showTodayButton]=\"showTodayButton()\"\r\n      [showThisMonthButton]=\"showThisMonthButton()\"\r\n      [todayLabel]=\"todayLabel()\"\r\n      [thisMonthLabel]=\"thisMonthLabel()\"\r\n      [size]=\"resolvedSize()\"\r\n      (valueChange)=\"onCalendarValue($event)\"\r\n      (gogDateSelect)=\"onCalendarSelect($event)\"\r\n    />\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.gog-datepicker{display:flex;flex-direction:column;gap:var(--gog-datepicker-gap);width:100%}.gog-datepicker__label{color:var(--gog-datepicker-label-color);font-family:var(--gog-datepicker-label-font-family);font-size:var(--gog-datepicker-label-font-size);letter-spacing:var(--gog-datepicker-label-letter-spacing);text-transform:var(--gog-datepicker-label-text-transform)}.gog-datepicker__field{position:relative;display:flex;align-items:center;width:100%;min-width:var(--gog-datepicker-min-width)}.gog-datepicker__control{box-sizing:border-box;width:100%;padding:var(--gog-datepicker-padding-y, var(--gog-datepicker-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-datepicker-actions-reserve) var(--gog-datepicker-padding-y, var(--gog-datepicker-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-datepicker-padding-x, var(--gog-datepicker-size-padding-x, var(--gog-field-md-padding-x)));border:var(--gog-datepicker-border-width) var(--gog-datepicker-border-style) var(--gog-datepicker-border-color);border-radius:var(--gog-datepicker-radius);background-color:var(--gog-datepicker-bg, var(--gog-datepicker-field-bg));color:var(--gog-datepicker-color, var(--gog-datepicker-text-color));font-family:var(--gog-datepicker-font-family);font-size:var(--gog-datepicker-font-size, var(--gog-datepicker-size-font-size, var(--gog-field-md-font-size)));line-height:var(--gog-datepicker-line-height);transition:border-color var(--gog-datepicker-transition-duration) var(--gog-easing)}.gog-datepicker__control::placeholder{color:var(--gog-datepicker-placeholder-color)}.gog-datepicker__control:hover:not(:disabled){border-color:var(--gog-datepicker-hover-border-color)}.gog-datepicker__control:focus-visible,.gog-datepicker__toggle:focus-visible,.gog-datepicker__clear:focus-visible{outline:var(--gog-datepicker-focus-ring-width) solid var(--gog-datepicker-focus-ring-color);outline-offset:var(--gog-datepicker-focus-ring-offset)}.gog-datepicker__control:disabled{opacity:var(--gog-datepicker-disabled-opacity);cursor:not-allowed}.gog-datepicker__control[aria-invalid=true]{border-color:var(--gog-datepicker-error-border-color)}.gog-datepicker__actions{position:absolute;inset-inline-end:var(--gog-datepicker-actions-inset);display:inline-flex;align-items:center;flex-direction:row-reverse;gap:var(--gog-datepicker-actions-gap)}.gog-datepicker__toggle,.gog-datepicker__clear{padding:0;border:0;background:none;color:var(--gog-datepicker-icon-color);cursor:pointer}.gog-datepicker__toggle{font-size:var(--gog-datepicker-toggle-icon-size)}.gog-datepicker__clear{color:var(--gog-datepicker-clear-color);font-size:calc(var(--gog-icon-size) * var(--gog-datepicker-clear-icon-ratio))}.gog-datepicker__toggle:hover,.gog-datepicker__clear:hover{color:var(--gog-datepicker-icon-hover-color)}.gog-datepicker__toggle:disabled{opacity:var(--gog-datepicker-disabled-opacity);cursor:not-allowed}.gog-datepicker__error{color:var(--gog-datepicker-error-color);font-family:var(--gog-datepicker-error-font-family);font-size:var(--gog-datepicker-error-font-size)}.gog-datepicker__panel{position:absolute;inset-inline-start:0;top:calc(100% + var(--gog-datepicker-panel-gap));z-index:var(--gog-dropdown-z);width:max-content;border:var(--gog-datepicker-panel-border-width) var(--gog-datepicker-panel-border-style) var(--gog-datepicker-panel-border-color);border-radius:var(--gog-datepicker-panel-radius);background-color:var(--gog-datepicker-panel-bg);box-shadow:var(--gog-datepicker-panel-shadow)}.gog-datepicker__panel--up{top:auto;bottom:calc(100% + var(--gog-datepicker-panel-gap))}.gog-datepicker__panel--portal{position:fixed;top:0;inset-inline-start:0}.gog-datepicker__inline{border:var(--gog-datepicker-panel-border-width) var(--gog-datepicker-panel-border-style) var(--gog-datepicker-panel-border-color);border-radius:var(--gog-datepicker-panel-radius);background-color:var(--gog-datepicker-panel-bg)}.gog-datepicker--xsm{--gog-datepicker-size-padding-y: var(--gog-field-xsm-padding-y);--gog-datepicker-size-padding-x: var(--gog-field-xsm-padding-x);--gog-datepicker-size-font-size: var(--gog-field-xsm-font-size)}.gog-datepicker--sm{--gog-datepicker-size-padding-y: var(--gog-field-sm-padding-y);--gog-datepicker-size-padding-x: var(--gog-field-sm-padding-x);--gog-datepicker-size-font-size: var(--gog-field-sm-font-size)}.gog-datepicker--lg{--gog-datepicker-size-padding-y: var(--gog-field-lg-padding-y);--gog-datepicker-size-padding-x: var(--gog-field-lg-padding-x);--gog-datepicker-size-font-size: var(--gog-field-lg-font-size)}.gog-datepicker--slg{--gog-datepicker-size-padding-y: var(--gog-field-slg-padding-y);--gog-datepicker-size-padding-x: var(--gog-field-slg-padding-x);--gog-datepicker-size-font-size: var(--gog-field-slg-font-size)}:host(.gog-host--auto-width) .gog-datepicker,:host(.gog-host--auto-width) .gog-datepicker__field,:host(.gog-host--auto-width) .gog-datepicker__control{width:auto}.gog-datepicker__label--float{position:absolute;left:var(--gog-datepicker-padding-x, var(--gog-datepicker-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - 2 * var(--gog-datepicker-padding-x, var(--gog-datepicker-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;color:var(--gog-datepicker-placeholder-color);font-size:var(--gog-datepicker-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-datepicker-transition-duration) var(--gog-easing),font-size var(--gog-datepicker-transition-duration) var(--gog-easing),color var(--gog-datepicker-transition-duration) var(--gog-easing),top var(--gog-datepicker-transition-duration) var(--gog-easing),background-color var(--gog-datepicker-transition-duration) var(--gog-easing)}.gog-datepicker--float-in,.gog-datepicker--float-on{--gog-datepicker-float-top-padding: calc(var(--gog-datepicker-padding-y, var(--gog-datepicker-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-datepicker-float-label-reserve))}.gog-datepicker--float-in .gog-datepicker__control,.gog-datepicker--float-on .gog-datepicker__control{padding-top:var(--gog-datepicker-float-top-padding)}.gog-datepicker--float-in .gog-datepicker__label--float,.gog-datepicker--float-on .gog-datepicker__label--float{top:var(--gog-datepicker-float-top-padding);transform:none}.gog-datepicker--float-in.gog-datepicker--floated .gog-datepicker__label--float{top:var(--gog-datepicker-float-label-in-top);transform:translateY(0);font-size:var(--gog-datepicker-label-font-size);color:var(--gog-datepicker-label-color);text-transform:var(--gog-datepicker-label-text-transform);letter-spacing:var(--gog-datepicker-label-letter-spacing)}.gog-datepicker--float-on.gog-datepicker--floated .gog-datepicker__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-datepicker-label-font-size);color:var(--gog-datepicker-label-color);text-transform:var(--gog-datepicker-label-text-transform);letter-spacing:var(--gog-datepicker-label-letter-spacing);background-color:var(--gog-datepicker-float-label-on-bg, var(--gog-datepicker-field-bg));padding:0 4px;left:calc(var(--gog-datepicker-padding-x, var(--gog-datepicker-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-datepicker--float-over.gog-datepicker--floated .gog-datepicker__label--float{top:calc(-1 * var(--gog-datepicker-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-datepicker-label-font-size);color:var(--gog-datepicker-label-color);text-transform:var(--gog-datepicker-label-text-transform);letter-spacing:var(--gog-datepicker-label-letter-spacing)}.gog-datepicker--float-over .gog-datepicker__field{margin-top:var(--gog-datepicker-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-datepicker__control{transition:none}}\n"] }]
+                    }, template: "@if (inline()) {\r\n  <!--\r\n    Inline mode is literally `gog-calendar` with no field and no panel around it \u2014 which is why\r\n    the calendar is its own component rather than markup buried in this one.\r\n  -->\r\n  <gog-calendar\r\n    class=\"gog-datepicker__inline\"\r\n    [value]=\"value()\"\r\n    [selectionMode]=\"selectionMode()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [disabledDates]=\"disabledDates()\"\r\n    [locale]=\"resolvedLocale()\"\r\n    [firstDayOfWeek]=\"resolvedFirstDayOfWeek()\"\r\n    [defaultMonth]=\"defaultMonth()\"\r\n    [numberOfMonths]=\"numberOfMonths()\"\r\n    [showTime]=\"showTime()\"\r\n    [hourFormat]=\"hourFormat()\"\r\n    [minuteStep]=\"minuteStep()\"\r\n    [showSeconds]=\"showSeconds()\"\r\n    [showTodayButton]=\"showTodayButton()\"\r\n    [showThisMonthButton]=\"showThisMonthButton()\"\r\n    [todayLabel]=\"todayLabel()\"\r\n    [thisMonthLabel]=\"thisMonthLabel()\"\r\n    [size]=\"resolvedSize()\"\r\n    (valueChange)=\"onCalendarValue($event)\"\r\n    (gogDateSelect)=\"onCalendarSelect($event)\"\r\n  />\r\n} @else {\r\n  <!--\r\n    Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\r\n    context, which traps the panel's z-index inside it.\r\n  -->\r\n  <div\r\n    class=\"gog-datepicker\"\r\n    [class]=\"sizeClass()\"\r\n    [class.gog-datepicker--clearable]=\"showClear()\"\r\n    [class.gog-datepicker--disabled]=\"isDisabled()\"\r\n    [class.gog-datepicker--open]=\"isOpen()\"\r\n    [class.gog-datepicker--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n    [class.gog-datepicker--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n    [class.gog-datepicker--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n    [class.gog-datepicker--floated]=\"isFloatLabelFloated()\"\r\n  >\r\n    @if (label() && resolvedFloatLabel() === 'none') {\r\n      <label class=\"gog-datepicker__label\" [for]=\"triggerId()\">{{ label() }}</label>\r\n    }\r\n\r\n    <div class=\"gog-datepicker__field\">\r\n      @if (label() && isFloatLabelActive()) {\r\n        <label class=\"gog-datepicker__label gog-datepicker__label--float\" [for]=\"triggerId()\">{{\r\n          label()\r\n        }}</label>\r\n      }\r\n\r\n      <input\r\n        type=\"text\"\r\n        class=\"gog-datepicker__control\"\r\n        autocomplete=\"off\"\r\n        [id]=\"triggerId()\"\r\n        [disabled]=\"isDisabled()\"\r\n        [readOnly]=\"!allowTextInput() || selectionMode() === 'range'\"\r\n        [value]=\"text()\"\r\n        [placeholder]=\"effectivePlaceholder()\"\r\n        [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\r\n        [attr.aria-haspopup]=\"'dialog'\"\r\n        [attr.aria-expanded]=\"isOpen()\"\r\n        [attr.aria-controls]=\"panelId()\"\r\n        [attr.aria-invalid]=\"hasError()\"\r\n        [attr.aria-describedby]=\"errorId()\"\r\n        (input)=\"onTextInput($event)\"\r\n        (keydown)=\"onTriggerKeydown($event)\"\r\n        (focus)=\"onFocus()\"\r\n        (blur)=\"onBlur()\"\r\n      />\r\n\r\n      <span class=\"gog-datepicker__actions\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-datepicker__toggle gog-inline-center\"\r\n          [disabled]=\"isDisabled()\"\r\n          [attr.aria-label]=\"resolvedOpenCalendarLabel()\"\r\n          [attr.aria-expanded]=\"isOpen()\"\r\n          [attr.aria-controls]=\"panelId()\"\r\n          (click)=\"toggle()\"\r\n        >\r\n          <gog-icon name=\"calendar\" />\r\n        </button>\r\n\r\n        @if (showClear()) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"gog-datepicker__clear gog-inline-center\"\r\n            [attr.aria-label]=\"resolvedClearLabel()\"\r\n            (click)=\"clearValue($event)\"\r\n          >\r\n            <gog-icon name=\"close\" />\r\n          </button>\r\n        }\r\n      </span>\r\n\r\n      @if (isOpen() && !resolvedAppendToBody()) {\r\n        <ng-container [ngTemplateOutlet]=\"panelTpl\" />\r\n      }\r\n    </div>\r\n\r\n    @if (hasError()) {\r\n      <span class=\"gog-datepicker__error\" [attr.id]=\"errorId()\" role=\"alert\">\r\n        {{ visibleError() }}\r\n      </span>\r\n    }\r\n  </div>\r\n}\r\n\r\n<!--\r\n  One template for both render modes \u2014 inline under the field, or stamped into <body> by the\r\n  overlay when `appendToBody` is set, which also copies any scoped `data-theme` across.\r\n-->\r\n<ng-template #panelTpl>\r\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -- (click) here is housekeeping stopPropagation, not an interactive handler; the focusable, keyboard-operable elements are the calendar's own grid and buttons -->\r\n  <div\r\n    [id]=\"panelId()\"\r\n    class=\"gog-datepicker__panel\"\r\n    role=\"dialog\"\r\n    [attr.aria-label]=\"label() || ariaLabel() || resolvedOpenCalendarLabel()\"\r\n    [class.gog-datepicker__panel--up]=\"!resolvedAppendToBody() && directionState() === 'up'\"\r\n    [class.gog-datepicker__panel--portal]=\"resolvedAppendToBody()\"\r\n    [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\r\n    [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\r\n    [style.z-index]=\"dropdownZIndex()\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    <gog-calendar\r\n      [value]=\"value()\"\r\n      [selectionMode]=\"selectionMode()\"\r\n      [min]=\"min()\"\r\n      [max]=\"max()\"\r\n      [disabledDates]=\"disabledDates()\"\r\n      [locale]=\"resolvedLocale()\"\r\n      [firstDayOfWeek]=\"resolvedFirstDayOfWeek()\"\r\n      [defaultMonth]=\"defaultMonth()\"\r\n      [numberOfMonths]=\"numberOfMonths()\"\r\n      [showTime]=\"showTime()\"\r\n      [hourFormat]=\"hourFormat()\"\r\n      [minuteStep]=\"minuteStep()\"\r\n      [showSeconds]=\"showSeconds()\"\r\n      [showTodayButton]=\"showTodayButton()\"\r\n      [showThisMonthButton]=\"showThisMonthButton()\"\r\n      [todayLabel]=\"todayLabel()\"\r\n      [thisMonthLabel]=\"thisMonthLabel()\"\r\n      [size]=\"resolvedSize()\"\r\n      (valueChange)=\"onCalendarValue($event)\"\r\n      (gogDateSelect)=\"onCalendarSelect($event)\"\r\n    />\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.gog-datepicker{display:flex;flex-direction:column;gap:var(--gog-datepicker-gap);width:100%}.gog-datepicker__label{color:var(--gog-datepicker-label-color);font-family:var(--gog-datepicker-label-font-family);font-size:var(--gog-datepicker-label-font-size);letter-spacing:var(--gog-datepicker-label-letter-spacing);text-transform:var(--gog-datepicker-label-text-transform)}.gog-datepicker__field{position:relative;display:flex;align-items:center;width:100%;min-width:var(--gog-datepicker-min-width)}.gog-datepicker__control{box-sizing:border-box;width:100%;padding:var(--gog-datepicker-padding-y, var(--gog-datepicker-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-datepicker-actions-reserve) var(--gog-datepicker-padding-y, var(--gog-datepicker-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-datepicker-padding-x, var(--gog-datepicker-size-padding-x, var(--gog-field-md-padding-x)));border:var(--gog-datepicker-border-width) var(--gog-datepicker-border-style) var(--gog-datepicker-border-color);border-radius:var(--gog-datepicker-radius);background-color:var(--gog-datepicker-bg, var(--gog-datepicker-field-bg));color:var(--gog-datepicker-color, var(--gog-datepicker-text-color));font-family:var(--gog-datepicker-font-family);font-size:var(--gog-datepicker-font-size, var(--gog-datepicker-size-font-size, var(--gog-field-md-font-size)));line-height:var(--gog-datepicker-line-height);transition:border-color var(--gog-datepicker-transition-duration) var(--gog-easing)}.gog-datepicker__control::placeholder{color:var(--gog-datepicker-placeholder-color)}.gog-datepicker__control:hover:not(:disabled){border-color:var(--gog-datepicker-hover-border-color)}.gog-datepicker__control:focus-visible,.gog-datepicker__toggle:focus-visible,.gog-datepicker__clear:focus-visible{outline:var(--gog-datepicker-focus-ring-width) solid var(--gog-datepicker-focus-ring-color);outline-offset:var(--gog-datepicker-focus-ring-offset)}.gog-datepicker__control:disabled{opacity:var(--gog-datepicker-disabled-opacity);cursor:not-allowed}.gog-datepicker__control[aria-invalid=true]{border-color:var(--gog-datepicker-error-border-color)}.gog-datepicker__actions{position:absolute;inset-inline-end:var(--gog-datepicker-actions-inset);display:inline-flex;align-items:center;flex-direction:row-reverse;gap:var(--gog-datepicker-actions-gap)}.gog-datepicker__toggle,.gog-datepicker__clear{padding:0;border:0;background:none;color:var(--gog-datepicker-icon-color);cursor:pointer}.gog-datepicker__toggle{font-size:var(--gog-datepicker-toggle-icon-size)}.gog-datepicker__clear{color:var(--gog-datepicker-clear-color);font-size:calc(var(--gog-icon-size) * var(--gog-datepicker-clear-icon-ratio))}.gog-datepicker__toggle:hover,.gog-datepicker__clear:hover{color:var(--gog-datepicker-icon-hover-color)}.gog-datepicker__toggle:disabled{opacity:var(--gog-datepicker-disabled-opacity);cursor:not-allowed}.gog-datepicker__error{color:var(--gog-datepicker-error-color);font-family:var(--gog-datepicker-error-font-family);font-size:var(--gog-datepicker-error-font-size)}.gog-datepicker__panel{position:absolute;inset-inline-start:0;top:calc(100% + var(--gog-datepicker-panel-gap));z-index:var(--gog-dropdown-z);width:var(--gog-datepicker-panel-width);border:var(--gog-datepicker-panel-border-width) var(--gog-datepicker-panel-border-style) var(--gog-datepicker-panel-border-color);border-radius:var(--gog-datepicker-panel-radius);background-color:var(--gog-datepicker-panel-bg);box-shadow:var(--gog-datepicker-panel-shadow)}.gog-datepicker__panel--up{top:auto;bottom:calc(100% + var(--gog-datepicker-panel-gap))}.gog-datepicker__panel--portal{position:fixed;top:0;inset-inline-start:0}.gog-datepicker__inline{border:var(--gog-datepicker-panel-border-width) var(--gog-datepicker-panel-border-style) var(--gog-datepicker-panel-border-color);border-radius:var(--gog-datepicker-panel-radius);background-color:var(--gog-datepicker-panel-bg)}.gog-datepicker--xsm{--gog-datepicker-size-padding-y: var(--gog-field-xsm-padding-y);--gog-datepicker-size-padding-x: var(--gog-field-xsm-padding-x);--gog-datepicker-size-font-size: var(--gog-field-xsm-font-size)}.gog-datepicker--sm{--gog-datepicker-size-padding-y: var(--gog-field-sm-padding-y);--gog-datepicker-size-padding-x: var(--gog-field-sm-padding-x);--gog-datepicker-size-font-size: var(--gog-field-sm-font-size)}.gog-datepicker--lg{--gog-datepicker-size-padding-y: var(--gog-field-lg-padding-y);--gog-datepicker-size-padding-x: var(--gog-field-lg-padding-x);--gog-datepicker-size-font-size: var(--gog-field-lg-font-size)}.gog-datepicker--slg{--gog-datepicker-size-padding-y: var(--gog-field-slg-padding-y);--gog-datepicker-size-padding-x: var(--gog-field-slg-padding-x);--gog-datepicker-size-font-size: var(--gog-field-slg-font-size)}:host(.gog-host--auto-width) .gog-datepicker,:host(.gog-host--auto-width) .gog-datepicker__field,:host(.gog-host--auto-width) .gog-datepicker__control{width:auto}.gog-datepicker__label--float{position:absolute;left:var(--gog-datepicker-padding-x, var(--gog-datepicker-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - 2 * var(--gog-datepicker-padding-x, var(--gog-datepicker-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;color:var(--gog-datepicker-placeholder-color);font-size:var(--gog-datepicker-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-datepicker-transition-duration) var(--gog-easing),font-size var(--gog-datepicker-transition-duration) var(--gog-easing),color var(--gog-datepicker-transition-duration) var(--gog-easing),top var(--gog-datepicker-transition-duration) var(--gog-easing),background-color var(--gog-datepicker-transition-duration) var(--gog-easing)}.gog-datepicker--float-in,.gog-datepicker--float-on{--gog-datepicker-float-top-padding: calc(var(--gog-datepicker-padding-y, var(--gog-datepicker-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-datepicker-float-label-reserve))}.gog-datepicker--float-in .gog-datepicker__control,.gog-datepicker--float-on .gog-datepicker__control{padding-top:var(--gog-datepicker-float-top-padding)}.gog-datepicker--float-in .gog-datepicker__label--float,.gog-datepicker--float-on .gog-datepicker__label--float{top:var(--gog-datepicker-float-top-padding);transform:none}.gog-datepicker--float-in.gog-datepicker--floated .gog-datepicker__label--float{top:var(--gog-datepicker-float-label-in-top);transform:translateY(0);font-size:var(--gog-datepicker-label-font-size);color:var(--gog-datepicker-label-color);text-transform:var(--gog-datepicker-label-text-transform);letter-spacing:var(--gog-datepicker-label-letter-spacing)}.gog-datepicker--float-on.gog-datepicker--floated .gog-datepicker__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-datepicker-label-font-size);color:var(--gog-datepicker-label-color);text-transform:var(--gog-datepicker-label-text-transform);letter-spacing:var(--gog-datepicker-label-letter-spacing);background-color:var(--gog-datepicker-float-label-on-bg, var(--gog-datepicker-field-bg));padding:0 4px;left:calc(var(--gog-datepicker-padding-x, var(--gog-datepicker-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-datepicker--float-over.gog-datepicker--floated .gog-datepicker__label--float{top:calc(-1 * var(--gog-datepicker-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-datepicker-label-font-size);color:var(--gog-datepicker-label-color);text-transform:var(--gog-datepicker-label-text-transform);letter-spacing:var(--gog-datepicker-label-letter-spacing)}.gog-datepicker--float-over .gog-datepicker__field{margin-top:var(--gog-datepicker-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-datepicker__control{transition:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], defaultMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultMonth", required: false }] }], numberOfMonths: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberOfMonths", required: false }] }], showTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTime", required: false }] }], hourFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourFormat", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], showTodayButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTodayButton", required: false }] }], showThisMonthButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showThisMonthButton", required: false }] }], todayLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "todayLabel", required: false }] }], thisMonthLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "thisMonthLabel", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], allowTextInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowTextInput", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAriaLabel", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], errorDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorDisplay", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], floatLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatLabel", required: false }] }], floatLabelShowPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatLabelShowPlaceholder", required: false }] }], appendToBody: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendToBody", required: false }] }], dropdownDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownDirection", required: false }] }], dropdownZIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownZIndex", required: false }] }], openCalendarLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "openCalendarLabel", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], panelTemplate: [{ type: i0.ViewChild, args: ['panelTpl', { isSignal: true }] }] } });
 
 /**
@@ -8157,6 +8163,7 @@ const GOG_TOKEN_GROUPS = [
             '--gog-calendar-header-margin',
             '--gog-calendar-lg-day-size',
             '--gog-calendar-lg-font-size',
+            '--gog-calendar-max-width',
             '--gog-calendar-md-day-size',
             '--gog-calendar-md-font-size',
             '--gog-calendar-months-gap',
@@ -8492,6 +8499,7 @@ const GOG_TOKEN_GROUPS = [
             '--gog-datepicker-panel-gap',
             '--gog-datepicker-panel-radius',
             '--gog-datepicker-panel-shadow',
+            '--gog-datepicker-panel-width',
             '--gog-datepicker-placeholder-color',
             '--gog-datepicker-radius',
             '--gog-datepicker-text-color',