@guildofgleks/ui 21.5.0 → 21.5.2

package/fesm2022/guildofgleks-ui.mjs

@@ -98,6 +98,15 @@ function resolveConfigured(instanceValue, configuredValue, fallback) {
 
 class SpinnerComponent {
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /**
+     * Covers the viewport with a backdrop while it spins.
+     *
+     * "The viewport" holds only while no ancestor establishes a containing block: `contain`,
+     * `transform`, `filter`, `backdrop-filter` or `will-change` on anything above it retargets
+     * the overlay to that element's box instead — including `gog-scroll`, which sets
+     * `contain: layout style`. Render it from your app's root, or expect it to cover the
+     * contained ancestor. See README's "Overlays and the viewport".
+     */
     overlay = input(false, ...(ngDevMode ? [{ debugName: "overlay" }] : /* istanbul ignore next */ []));
     ariaLabel = input('Loading', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     /**
@@ -2568,14 +2577,14 @@ class AutocompleteComponent extends GogDropdownBase {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AutocompleteComponent, isStandalone: true, selector: "gog-autocomplete", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, filterLocal: { classPropertyName: "filterLocal", publicName: "filterLocal", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, openOnFocus: { classPropertyName: "openOnFocus", publicName: "openOnFocus", isSignal: true, isRequired: false, transformFunction: null }, searchDebounce: { classPropertyName: "searchDebounce", publicName: "searchDebounce", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, forceSelection: { classPropertyName: "forceSelection", publicName: "forceSelection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", gogSearch: "gogSearch", gogLoadMore: "gogLoadMore" }, host: { properties: { "style.--gog-autocomplete-min-width": "minWidth()" } }, viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panelTpl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!--\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 and lets whatever follows on the page\r\n  paint over the open dropdown.\r\n-->\r\n<div\r\n  class=\"gog-autocomplete\"\r\n  [class]=\"sizeClass()\"\r\n  [class.gog-autocomplete--clearable]=\"showClear()\"\r\n  [class.gog-autocomplete--disabled]=\"isDisabled()\"\r\n  [class.gog-autocomplete--open]=\"isOpen()\"\r\n  [class.gog-autocomplete--loading]=\"loading()\"\r\n  [class.gog-autocomplete--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n  [class.gog-autocomplete--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n  [class.gog-autocomplete--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n  [class.gog-autocomplete--floated]=\"isFloatLabelFloated()\"\r\n>\r\n  @if (label() && resolvedFloatLabel() === 'none') {\r\n    <label class=\"gog-autocomplete__label\" [for]=\"triggerId()\">{{ label() }}</label>\r\n  }\r\n\r\n  <div class=\"gog-autocomplete__field\">\r\n    @if (label() && isFloatLabelActive()) {\r\n      <label class=\"gog-autocomplete__label gog-autocomplete__label--float\" [for]=\"triggerId()\">{{\r\n        label()\r\n      }}</label>\r\n    }\r\n\r\n    <!--\r\n      The input *is* the combobox \u2014 role, aria-autocomplete and aria-activedescendant all sit\r\n      here, and DOM focus never leaves it. That is the difference from gog-select, where the\r\n      trigger is a button and focus moves onto the option itself.\r\n    -->\r\n    <input\r\n      type=\"text\"\r\n      class=\"gog-autocomplete__control\"\r\n      autocomplete=\"off\"\r\n      role=\"combobox\"\r\n      aria-autocomplete=\"list\"\r\n      [id]=\"triggerId()\"\r\n      [disabled]=\"isDisabled()\"\r\n      [value]=\"query()\"\r\n      [placeholder]=\"effectivePlaceholder()\"\r\n      [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || null\"\r\n      [attr.aria-controls]=\"listboxId()\"\r\n      [attr.aria-expanded]=\"isOpen()\"\r\n      [attr.aria-activedescendant]=\"activeOptionId()\"\r\n      [attr.aria-invalid]=\"hasError()\"\r\n      [attr.aria-describedby]=\"errorId()\"\r\n      (input)=\"onInput($event)\"\r\n      (keydown)=\"onInputKeydown($event)\"\r\n      (focus)=\"onInputFocus()\"\r\n      (blur)=\"onInputBlur()\"\r\n    />\r\n\r\n    <span class=\"gog-autocomplete__actions\">\r\n      @if (loading()) {\r\n        <gog-spinner class=\"gog-autocomplete__spinner\" size=\"xsm\" ariaLabel=\"Loading\" />\r\n      }\r\n\r\n      @if (showClear()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-autocomplete__clear gog-inline-center\"\r\n          [attr.aria-label]=\"resolvedClearLabel()\"\r\n          (mousedown)=\"onOptionMousedown($event)\"\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-autocomplete__error\" [attr.id]=\"errorId()\" role=\"alert\">\r\n      {{ visibleError() }}\r\n    </span>\r\n  }\r\n</div>\r\n\r\n<!--\r\n  One template for both render modes \u2014 inline, or stamped into <body> by the overlay when\r\n  `appendToBody` is set, which is why the portal modifier and the resolved coordinates are\r\n  applied conditionally.\r\n-->\r\n<ng-template #panelTpl>\r\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation; the keyboard contract lives on the combobox input, which keeps focus and drives this list via aria-activedescendant -->\r\n  <div\r\n    [id]=\"listboxId()\"\r\n    class=\"gog-autocomplete__dropdown\"\r\n    [class.gog-autocomplete__dropdown--up]=\"\r\n      !resolvedAppendToBody() && dropdownDirectionState() === 'up'\r\n    \"\r\n    [class.gog-autocomplete__dropdown--portal]=\"resolvedAppendToBody()\"\r\n    [class]=\"panelSizeClass()\"\r\n    [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\r\n    [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\r\n    [style.width]=\"resolvedAppendToBody() ? resolvedPanelWidth() : null\"\r\n    [style.min-width]=\"resolvedAppendToBody() ? resolvedPanelMinWidth() : null\"\r\n    [style.max-height]=\"resolvedAppendToBody() ? resolvedPanelMaxHeight() : null\"\r\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\r\n    role=\"listbox\"\r\n    [attr.aria-label]=\"label() || ariaLabel() || null\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    <gog-scroll\r\n      size=\"thin\"\r\n      [focusable]=\"false\"\r\n      overscrollBehavior=\"contain\"\r\n      class=\"gog-autocomplete__scroll\"\r\n      (gogReachEnd)=\"gogLoadMore.emit()\"\r\n    >\r\n      @if (visibleOptions().length === 0) {\r\n        <p class=\"gog-autocomplete__empty\">{{ emptyMessage() }}</p>\r\n      }\r\n\r\n      @for (option of visibleOptions(); track valueOf(option); let i = $index) {\r\n        <!--\r\n          A div, not a button: focus stays in the input, so these rows are never focused and a\r\n          button would only add tab stops and a second Enter handler. The highlight is pointed\r\n          at with aria-activedescendant instead.\r\n\r\n          mousedown is prevented so clicking a row doesn't blur the input first \u2014 that blur\r\n          would close the panel and, under forceSelection, wipe the text before the click lands.\r\n        -->\r\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- this is the ARIA combobox pattern: the option is deliberately neither focusable nor a keyboard target, because focus stays in the input and the whole keyboard contract (arrows, Enter, Escape) is handled there and communicated through aria-activedescendant. Making these rows focusable would break the pattern rather than improve it. -->\r\n        <div\r\n          class=\"gog-autocomplete__option\"\r\n          role=\"option\"\r\n          [id]=\"optionId(i)\"\r\n          [attr.aria-selected]=\"isSelected(option)\"\r\n          [attr.aria-disabled]=\"isOptionDisabled(option)\"\r\n          [class.gog-autocomplete__option--active]=\"i === activeIndex()\"\r\n          [class.gog-autocomplete__option--selected]=\"isSelected(option)\"\r\n          [class.gog-autocomplete__option--disabled]=\"isOptionDisabled(option)\"\r\n          (mousedown)=\"onOptionMousedown($event)\"\r\n          (click)=\"onOptionClick(option, $event)\"\r\n        >\r\n          @if (optionSlot(); as slot) {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"slot.templateRef\"\r\n              [ngTemplateOutletContext]=\"optionContext(option, isSelected(option))\"\r\n            />\r\n          } @else {\r\n            <span class=\"gog-autocomplete__option-label\">{{ labelOf(option) }}</span>\r\n          }\r\n        </div>\r\n      }\r\n    </gog-scroll>\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.gog-autocomplete{display:flex;flex-direction:column;gap:var(--gog-autocomplete-gap);width:100%}.gog-autocomplete__label{color:var(--gog-autocomplete-label-color);font-family:var(--gog-autocomplete-label-font-family);font-size:var(--gog-autocomplete-label-font-size);font-weight:var(--gog-autocomplete-label-font-weight);letter-spacing:var(--gog-autocomplete-label-letter-spacing)}.gog-autocomplete__field{position:relative;display:flex;align-items:center;width:100%;min-width:var(--gog-autocomplete-min-width)}.gog-autocomplete__control{box-sizing:border-box;width:100%;min-width:var(--gog-autocomplete-min-width);padding:var(--gog-autocomplete-padding-y, var(--gog-autocomplete-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-autocomplete-actions-reserve) var(--gog-autocomplete-padding-y, var(--gog-autocomplete-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-autocomplete-padding-x, var(--gog-autocomplete-size-padding-x, var(--gog-field-md-padding-x)));border:var(--gog-autocomplete-border-width) var(--gog-autocomplete-border-style) var(--gog-autocomplete-border-color);border-radius:var(--gog-autocomplete-radius);background-color:var(--gog-autocomplete-bg, var(--gog-autocomplete-field-bg));color:var(--gog-autocomplete-color, var(--gog-autocomplete-text-color));font-family:var(--gog-autocomplete-font-family);font-size:var(--gog-autocomplete-font-size, var(--gog-autocomplete-size-font-size, var(--gog-field-md-font-size)));line-height:var(--gog-autocomplete-line-height);transition:border-color var(--gog-autocomplete-transition-duration) var(--gog-easing),box-shadow var(--gog-autocomplete-transition-duration) var(--gog-easing)}.gog-autocomplete__control::placeholder{color:var(--gog-autocomplete-placeholder-color)}.gog-autocomplete__control:hover:not(:disabled){border-color:var(--gog-autocomplete-hover-border-color)}.gog-autocomplete__control:focus-visible{outline:var(--gog-autocomplete-focus-ring-width) solid var(--gog-autocomplete-focus-ring-color);outline-offset:var(--gog-autocomplete-focus-ring-offset)}.gog-autocomplete__control:disabled{opacity:var(--gog-autocomplete-disabled-opacity);cursor:not-allowed}.gog-autocomplete--error .gog-autocomplete__control,.gog-autocomplete__control[aria-invalid=true]{border-color:var(--gog-autocomplete-error-border-color)}.gog-autocomplete__actions{position:absolute;inset-inline-end:var(--gog-autocomplete-actions-inset);display:inline-flex;align-items:center;flex-direction:row-reverse;gap:var(--gog-autocomplete-actions-gap);pointer-events:none}.gog-autocomplete__actions>*{pointer-events:auto}.gog-autocomplete__clear{padding:0;border:0;background:none;color:var(--gog-autocomplete-clear-color);font-size:calc(var(--gog-icon-size) * var(--gog-autocomplete-clear-icon-ratio));cursor:pointer}.gog-autocomplete__clear:hover{color:var(--gog-autocomplete-clear-hover-color)}.gog-autocomplete__clear:focus-visible{outline:var(--gog-autocomplete-focus-ring-width) solid var(--gog-autocomplete-focus-ring-color);outline-offset:var(--gog-autocomplete-focus-ring-offset)}.gog-autocomplete__spinner{font-size:var(--gog-autocomplete-spinner-size)}.gog-autocomplete__error{color:var(--gog-autocomplete-error-color);font-family:var(--gog-autocomplete-error-font-family);font-size:var(--gog-autocomplete-error-font-size)}.gog-autocomplete__dropdown{position:absolute;inset-inline-start:0;top:calc(100% + var(--gog-autocomplete-panel-gap));z-index:var(--gog-dropdown-z);box-sizing:border-box;display:flex;flex-direction:column;width:max-content;min-width:100%;max-width:var(--gog-autocomplete-panel-max-width);max-height:var(--gog-autocomplete-panel-max-height);padding:var(--gog-autocomplete-options-padding);border:var(--gog-autocomplete-panel-border-width) var(--gog-autocomplete-panel-border-style) var(--gog-autocomplete-panel-border-color);border-radius:var(--gog-autocomplete-panel-radius);background-color:var(--gog-autocomplete-panel-bg);box-shadow:var(--gog-autocomplete-panel-shadow);overflow:hidden}.gog-autocomplete__dropdown--up{top:auto;bottom:calc(100% + var(--gog-autocomplete-panel-gap))}.gog-autocomplete__dropdown--portal{position:fixed;top:0;inset-inline-start:0;min-width:0}.gog-autocomplete__scroll{flex:1;min-height:0}.gog-autocomplete__option{display:flex;align-items:center;gap:var(--gog-autocomplete-option-gap);padding:var(--gog-autocomplete-option-padding);border-radius:var(--gog-autocomplete-option-radius);color:var(--gog-autocomplete-option-color);font-family:var(--gog-autocomplete-font-family);font-size:var(--gog-autocomplete-font-size, var(--gog-autocomplete-size-font-size, var(--gog-field-md-font-size)));cursor:pointer}.gog-autocomplete__option:hover:not([aria-disabled=true]),.gog-autocomplete__option--active{background-color:var(--gog-autocomplete-option-hover-bg);color:var(--gog-autocomplete-option-hover-color)}.gog-autocomplete__option--selected{background-color:var(--gog-autocomplete-option-selected-bg);color:var(--gog-autocomplete-option-selected-color)}.gog-autocomplete__option--disabled{opacity:var(--gog-autocomplete-disabled-opacity);cursor:not-allowed}.gog-autocomplete__option-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gog-autocomplete__empty{margin:0;padding:var(--gog-autocomplete-option-padding);color:var(--gog-autocomplete-empty-color);font-family:var(--gog-autocomplete-font-family);font-size:var(--gog-autocomplete-empty-font-size)}.gog-autocomplete--xsm{--gog-autocomplete-size-padding-y: var(--gog-field-xsm-padding-y);--gog-autocomplete-size-padding-x: var(--gog-field-xsm-padding-x);--gog-autocomplete-size-font-size: var(--gog-field-xsm-font-size)}.gog-autocomplete--sm{--gog-autocomplete-size-padding-y: var(--gog-field-sm-padding-y);--gog-autocomplete-size-padding-x: var(--gog-field-sm-padding-x);--gog-autocomplete-size-font-size: var(--gog-field-sm-font-size)}.gog-autocomplete--lg{--gog-autocomplete-size-padding-y: var(--gog-field-lg-padding-y);--gog-autocomplete-size-padding-x: var(--gog-field-lg-padding-x);--gog-autocomplete-size-font-size: var(--gog-field-lg-font-size)}.gog-autocomplete--slg{--gog-autocomplete-size-padding-y: var(--gog-field-slg-padding-y);--gog-autocomplete-size-padding-x: var(--gog-field-slg-padding-x);--gog-autocomplete-size-font-size: var(--gog-field-slg-font-size)}:host(.gog-host--auto-width) .gog-autocomplete,:host(.gog-host--auto-width) .gog-autocomplete__field,:host(.gog-host--auto-width) .gog-autocomplete__control{width:auto}.gog-autocomplete__label--float{position:absolute;inset-inline-start:var(--gog-autocomplete-padding-x, var(--gog-autocomplete-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - 2 * var(--gog-autocomplete-padding-x, var(--gog-autocomplete-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;color:var(--gog-autocomplete-placeholder-color);font-size:var(--gog-autocomplete-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-autocomplete-transition-duration) var(--gog-easing),font-size var(--gog-autocomplete-transition-duration) var(--gog-easing),color var(--gog-autocomplete-transition-duration) var(--gog-easing),top var(--gog-autocomplete-transition-duration) var(--gog-easing),background-color var(--gog-autocomplete-transition-duration) var(--gog-easing)}.gog-autocomplete--float-in,.gog-autocomplete--float-on{--gog-autocomplete-float-top-padding: calc(var(--gog-autocomplete-padding-y, var(--gog-autocomplete-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-autocomplete-float-label-reserve))}.gog-autocomplete--float-in .gog-autocomplete__control,.gog-autocomplete--float-on .gog-autocomplete__control{padding-top:var(--gog-autocomplete-float-top-padding)}.gog-autocomplete--float-in .gog-autocomplete__label--float,.gog-autocomplete--float-on .gog-autocomplete__label--float{top:var(--gog-autocomplete-float-top-padding);transform:none}.gog-autocomplete--float-in.gog-autocomplete--floated .gog-autocomplete__label--float{top:var(--gog-autocomplete-float-label-in-top);transform:translateY(0);font-size:var(--gog-autocomplete-label-font-size);color:var(--gog-autocomplete-label-color);text-transform:var(--gog-autocomplete-label-text-transform);letter-spacing:var(--gog-autocomplete-label-letter-spacing)}.gog-autocomplete--float-on.gog-autocomplete--floated .gog-autocomplete__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-autocomplete-label-font-size);color:var(--gog-autocomplete-label-color);text-transform:var(--gog-autocomplete-label-text-transform);letter-spacing:var(--gog-autocomplete-label-letter-spacing);background-color:var(--gog-autocomplete-float-label-on-bg, var(--gog-autocomplete-field-bg));padding:0 4px;inset-inline-start:calc(var(--gog-autocomplete-padding-x, var(--gog-autocomplete-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-autocomplete--float-over.gog-autocomplete--floated .gog-autocomplete__label--float{top:calc(-1 * var(--gog-autocomplete-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-autocomplete-label-font-size);color:var(--gog-autocomplete-label-color);text-transform:var(--gog-autocomplete-label-text-transform);letter-spacing:var(--gog-autocomplete-label-letter-spacing)}.gog-autocomplete--float-over .gog-autocomplete__field{margin-top:var(--gog-autocomplete-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-autocomplete__control{transition:none}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ScrollComponent, selector: "gog-scroll", inputs: ["axis", "size", "autoHide", "hideDelay", "reachThreshold", "focusable", "ariaLabel", "overscrollBehavior", "showTrack"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }, { kind: "component", type: SpinnerComponent, selector: "gog-spinner", inputs: ["size", "overlay", "ariaLabel", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AutocompleteComponent, isStandalone: true, selector: "gog-autocomplete", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, filterLocal: { classPropertyName: "filterLocal", publicName: "filterLocal", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, openOnFocus: { classPropertyName: "openOnFocus", publicName: "openOnFocus", isSignal: true, isRequired: false, transformFunction: null }, searchDebounce: { classPropertyName: "searchDebounce", publicName: "searchDebounce", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, forceSelection: { classPropertyName: "forceSelection", publicName: "forceSelection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", gogSearch: "gogSearch", gogLoadMore: "gogLoadMore" }, host: { properties: { "style.--gog-autocomplete-min-width": "minWidth()" } }, viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panelTpl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!--\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 and lets whatever follows on the page\r\n  paint over the open dropdown.\r\n-->\r\n<div\r\n  class=\"gog-autocomplete\"\r\n  [class]=\"sizeClass()\"\r\n  [class.gog-autocomplete--clearable]=\"showClear()\"\r\n  [class.gog-autocomplete--disabled]=\"isDisabled()\"\r\n  [class.gog-autocomplete--open]=\"isOpen()\"\r\n  [class.gog-autocomplete--loading]=\"loading()\"\r\n  [class.gog-autocomplete--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n  [class.gog-autocomplete--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n  [class.gog-autocomplete--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n  [class.gog-autocomplete--floated]=\"isFloatLabelFloated()\"\r\n>\r\n  @if (label() && resolvedFloatLabel() === 'none') {\r\n    <label class=\"gog-autocomplete__label\" [for]=\"triggerId()\">{{ label() }}</label>\r\n  }\r\n\r\n  <div class=\"gog-autocomplete__field\">\r\n    @if (label() && isFloatLabelActive()) {\r\n      <label class=\"gog-autocomplete__label gog-autocomplete__label--float\" [for]=\"triggerId()\">{{\r\n        label()\r\n      }}</label>\r\n    }\r\n\r\n    <!--\r\n      The input *is* the combobox \u2014 role, aria-autocomplete and aria-activedescendant all sit\r\n      here, and DOM focus never leaves it. That is the difference from gog-select, where the\r\n      trigger is a button and focus moves onto the option itself.\r\n    -->\r\n    <input\r\n      type=\"text\"\r\n      class=\"gog-autocomplete__control\"\r\n      autocomplete=\"off\"\r\n      role=\"combobox\"\r\n      aria-autocomplete=\"list\"\r\n      [id]=\"triggerId()\"\r\n      [disabled]=\"isDisabled()\"\r\n      [value]=\"query()\"\r\n      [placeholder]=\"effectivePlaceholder()\"\r\n      [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || null\"\r\n      [attr.aria-controls]=\"listboxId()\"\r\n      [attr.aria-expanded]=\"isOpen()\"\r\n      [attr.aria-activedescendant]=\"activeOptionId()\"\r\n      [attr.aria-invalid]=\"hasError()\"\r\n      [attr.aria-describedby]=\"errorId()\"\r\n      (input)=\"onInput($event)\"\r\n      (keydown)=\"onInputKeydown($event)\"\r\n      (focus)=\"onInputFocus()\"\r\n      (blur)=\"onInputBlur()\"\r\n    />\r\n\r\n    <span class=\"gog-autocomplete__actions\">\r\n      @if (loading()) {\r\n        <gog-spinner class=\"gog-autocomplete__spinner\" size=\"xsm\" ariaLabel=\"Loading\" />\r\n      }\r\n\r\n      @if (showClear()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-autocomplete__clear gog-inline-center\"\r\n          [attr.aria-label]=\"resolvedClearLabel()\"\r\n          (mousedown)=\"onOptionMousedown($event)\"\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-autocomplete__error\" [attr.id]=\"errorId()\" role=\"alert\">\r\n      {{ visibleError() }}\r\n    </span>\r\n  }\r\n</div>\r\n\r\n<!--\r\n  One template for both render modes \u2014 inline, or stamped into <body> by the overlay when\r\n  `appendToBody` is set, which is why the portal modifier and the resolved coordinates are\r\n  applied conditionally.\r\n-->\r\n<ng-template #panelTpl>\r\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation; the keyboard contract lives on the combobox input, which keeps focus and drives this list via aria-activedescendant -->\r\n  <div\r\n    [id]=\"listboxId()\"\r\n    class=\"gog-autocomplete__dropdown\"\r\n    [class.gog-autocomplete__dropdown--up]=\"\r\n      !resolvedAppendToBody() && dropdownDirectionState() === 'up'\r\n    \"\r\n    [class.gog-autocomplete__dropdown--portal]=\"resolvedAppendToBody()\"\r\n    [class]=\"panelSizeClass()\"\r\n    [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\r\n    [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\r\n    [style.width]=\"resolvedAppendToBody() ? resolvedPanelWidth() : null\"\r\n    [style.min-width]=\"resolvedAppendToBody() ? resolvedPanelMinWidth() : null\"\r\n    [style.max-height]=\"resolvedAppendToBody() ? resolvedPanelMaxHeight() : null\"\r\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\r\n    role=\"listbox\"\r\n    [attr.aria-label]=\"label() || ariaLabel() || null\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    <gog-scroll\r\n      size=\"thin\"\r\n      [focusable]=\"false\"\r\n      overscrollBehavior=\"contain\"\r\n      class=\"gog-autocomplete__scroll\"\r\n      (gogReachEnd)=\"gogLoadMore.emit()\"\r\n    >\r\n      @if (visibleOptions().length === 0) {\r\n        <p class=\"gog-autocomplete__empty\">{{ emptyMessage() }}</p>\r\n      }\r\n\r\n      @for (option of visibleOptions(); track valueOf(option); let i = $index) {\r\n        <!--\r\n          A div, not a button: focus stays in the input, so these rows are never focused and a\r\n          button would only add tab stops and a second Enter handler. The highlight is pointed\r\n          at with aria-activedescendant instead.\r\n\r\n          mousedown is prevented so clicking a row doesn't blur the input first \u2014 that blur\r\n          would close the panel and, under forceSelection, wipe the text before the click lands.\r\n        -->\r\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- this is the ARIA combobox pattern: the option is deliberately neither focusable nor a keyboard target, because focus stays in the input and the whole keyboard contract (arrows, Enter, Escape) is handled there and communicated through aria-activedescendant. Making these rows focusable would break the pattern rather than improve it. -->\r\n        <div\r\n          class=\"gog-autocomplete__option\"\r\n          role=\"option\"\r\n          [id]=\"optionId(i)\"\r\n          [attr.aria-selected]=\"isSelected(option)\"\r\n          [attr.aria-disabled]=\"isOptionDisabled(option)\"\r\n          [class.gog-autocomplete__option--active]=\"i === activeIndex()\"\r\n          [class.gog-autocomplete__option--selected]=\"isSelected(option)\"\r\n          [class.gog-autocomplete__option--disabled]=\"isOptionDisabled(option)\"\r\n          (mousedown)=\"onOptionMousedown($event)\"\r\n          (click)=\"onOptionClick(option, $event)\"\r\n        >\r\n          @if (optionSlot(); as slot) {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"slot.templateRef\"\r\n              [ngTemplateOutletContext]=\"optionContext(option, isSelected(option))\"\r\n            />\r\n          } @else {\r\n            <span class=\"gog-autocomplete__option-label\">{{ labelOf(option) }}</span>\r\n          }\r\n        </div>\r\n      }\r\n    </gog-scroll>\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.gog-autocomplete{display:flex;flex-direction:column;gap:var(--gog-autocomplete-gap);width:100%}.gog-autocomplete__label{color:var(--gog-autocomplete-label-color);font-family:var(--gog-autocomplete-label-font-family);font-size:var(--gog-autocomplete-label-font-size);font-weight:var(--gog-autocomplete-label-font-weight);letter-spacing:var(--gog-autocomplete-label-letter-spacing)}.gog-autocomplete__field{position:relative;display:flex;align-items:center;width:100%;min-width:var(--gog-autocomplete-min-width)}.gog-autocomplete__control{box-sizing:border-box;width:100%;min-width:var(--gog-autocomplete-min-width);padding-block:var(--gog-autocomplete-padding-y, var(--gog-autocomplete-size-padding-y, var(--gog-field-md-padding-y)));padding-inline:var(--gog-autocomplete-padding-x, var(--gog-autocomplete-size-padding-x, var(--gog-field-md-padding-x))) var(--gog-autocomplete-actions-reserve);border:var(--gog-autocomplete-border-width) var(--gog-autocomplete-border-style) var(--gog-autocomplete-border-color);border-radius:var(--gog-autocomplete-radius);background-color:var(--gog-autocomplete-bg, var(--gog-autocomplete-field-bg));color:var(--gog-autocomplete-color, var(--gog-autocomplete-text-color));font-family:var(--gog-autocomplete-font-family);font-size:var(--gog-autocomplete-font-size, var(--gog-autocomplete-size-font-size, var(--gog-field-md-font-size)));line-height:var(--gog-autocomplete-line-height);transition:border-color var(--gog-autocomplete-transition-duration) var(--gog-easing),box-shadow var(--gog-autocomplete-transition-duration) var(--gog-easing)}.gog-autocomplete__control::placeholder{color:var(--gog-autocomplete-placeholder-color)}.gog-autocomplete__control:hover:not(:disabled){border-color:var(--gog-autocomplete-hover-border-color)}.gog-autocomplete__control:focus-visible{outline:var(--gog-autocomplete-focus-ring-width) solid var(--gog-autocomplete-focus-ring-color);outline-offset:var(--gog-autocomplete-focus-ring-offset)}.gog-autocomplete__control:disabled{opacity:var(--gog-autocomplete-disabled-opacity);cursor:not-allowed}.gog-autocomplete--error .gog-autocomplete__control,.gog-autocomplete__control[aria-invalid=true]{border-color:var(--gog-autocomplete-error-border-color)}.gog-autocomplete__actions{position:absolute;inset-inline-end:var(--gog-autocomplete-actions-inset);display:inline-flex;align-items:center;flex-direction:row-reverse;gap:var(--gog-autocomplete-actions-gap);pointer-events:none}.gog-autocomplete__actions>*{pointer-events:auto}.gog-autocomplete__clear{padding:0;border:0;background:none;color:var(--gog-autocomplete-clear-color);font-size:calc(var(--gog-icon-size) * var(--gog-autocomplete-clear-icon-ratio));cursor:pointer}.gog-autocomplete__clear:hover{color:var(--gog-autocomplete-clear-hover-color)}.gog-autocomplete__clear:focus-visible{outline:var(--gog-autocomplete-focus-ring-width) solid var(--gog-autocomplete-focus-ring-color);outline-offset:var(--gog-autocomplete-focus-ring-offset)}.gog-autocomplete__spinner{font-size:var(--gog-autocomplete-spinner-size)}.gog-autocomplete__error{color:var(--gog-autocomplete-error-color);font-family:var(--gog-autocomplete-error-font-family);font-size:var(--gog-autocomplete-error-font-size)}.gog-autocomplete__dropdown{position:absolute;inset-inline-start:0;top:calc(100% + var(--gog-autocomplete-panel-gap));z-index:var(--gog-dropdown-z);box-sizing:border-box;display:flex;flex-direction:column;width:max-content;min-width:100%;max-width:var(--gog-autocomplete-panel-max-width);max-height:var(--gog-autocomplete-panel-max-height);padding:var(--gog-autocomplete-options-padding);border:var(--gog-autocomplete-panel-border-width) var(--gog-autocomplete-panel-border-style) var(--gog-autocomplete-panel-border-color);border-radius:var(--gog-autocomplete-panel-radius);background-color:var(--gog-autocomplete-panel-bg);box-shadow:var(--gog-autocomplete-panel-shadow);overflow:hidden}.gog-autocomplete__dropdown--up{top:auto;bottom:calc(100% + var(--gog-autocomplete-panel-gap))}.gog-autocomplete__dropdown--portal{position:fixed;top:0;inset-inline-start:0;min-width:0}.gog-autocomplete__scroll{flex:1;min-height:0}.gog-autocomplete__option{display:flex;align-items:center;gap:var(--gog-autocomplete-option-gap);padding:var(--gog-autocomplete-option-padding);border-radius:var(--gog-autocomplete-option-radius);color:var(--gog-autocomplete-option-color);font-family:var(--gog-autocomplete-font-family);font-size:var(--gog-autocomplete-font-size, var(--gog-autocomplete-size-font-size, var(--gog-field-md-font-size)));cursor:pointer}.gog-autocomplete__option:hover:not([aria-disabled=true]),.gog-autocomplete__option--active{background-color:var(--gog-autocomplete-option-hover-bg);color:var(--gog-autocomplete-option-hover-color)}.gog-autocomplete__option--selected{background-color:var(--gog-autocomplete-option-selected-bg);color:var(--gog-autocomplete-option-selected-color)}.gog-autocomplete__option--disabled{opacity:var(--gog-autocomplete-disabled-opacity);cursor:not-allowed}.gog-autocomplete__option-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gog-autocomplete__empty{margin:0;padding:var(--gog-autocomplete-option-padding);color:var(--gog-autocomplete-empty-color);font-family:var(--gog-autocomplete-font-family);font-size:var(--gog-autocomplete-empty-font-size)}.gog-autocomplete--xsm{--gog-autocomplete-size-padding-y: var(--gog-field-xsm-padding-y);--gog-autocomplete-size-padding-x: var(--gog-field-xsm-padding-x);--gog-autocomplete-size-font-size: var(--gog-field-xsm-font-size)}.gog-autocomplete--sm{--gog-autocomplete-size-padding-y: var(--gog-field-sm-padding-y);--gog-autocomplete-size-padding-x: var(--gog-field-sm-padding-x);--gog-autocomplete-size-font-size: var(--gog-field-sm-font-size)}.gog-autocomplete--lg{--gog-autocomplete-size-padding-y: var(--gog-field-lg-padding-y);--gog-autocomplete-size-padding-x: var(--gog-field-lg-padding-x);--gog-autocomplete-size-font-size: var(--gog-field-lg-font-size)}.gog-autocomplete--slg{--gog-autocomplete-size-padding-y: var(--gog-field-slg-padding-y);--gog-autocomplete-size-padding-x: var(--gog-field-slg-padding-x);--gog-autocomplete-size-font-size: var(--gog-field-slg-font-size)}:host(.gog-host--auto-width) .gog-autocomplete,:host(.gog-host--auto-width) .gog-autocomplete__field,:host(.gog-host--auto-width) .gog-autocomplete__control{width:auto}.gog-autocomplete__label--float{position:absolute;inset-inline-start:var(--gog-autocomplete-padding-x, var(--gog-autocomplete-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - 2 * var(--gog-autocomplete-padding-x, var(--gog-autocomplete-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;color:var(--gog-autocomplete-placeholder-color);font-size:var(--gog-autocomplete-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-autocomplete-transition-duration) var(--gog-easing),font-size var(--gog-autocomplete-transition-duration) var(--gog-easing),color var(--gog-autocomplete-transition-duration) var(--gog-easing),top var(--gog-autocomplete-transition-duration) var(--gog-easing),background-color var(--gog-autocomplete-transition-duration) var(--gog-easing)}.gog-autocomplete--float-in,.gog-autocomplete--float-on{--gog-autocomplete-float-top-padding: calc(var(--gog-autocomplete-padding-y, var(--gog-autocomplete-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-autocomplete-float-label-reserve))}.gog-autocomplete--float-in .gog-autocomplete__control,.gog-autocomplete--float-on .gog-autocomplete__control{padding-top:var(--gog-autocomplete-float-top-padding)}.gog-autocomplete--float-in .gog-autocomplete__label--float,.gog-autocomplete--float-on .gog-autocomplete__label--float{top:var(--gog-autocomplete-float-top-padding);transform:none}.gog-autocomplete--float-in.gog-autocomplete--floated .gog-autocomplete__label--float{top:var(--gog-autocomplete-float-label-in-top);transform:translateY(0);font-size:var(--gog-autocomplete-label-font-size);color:var(--gog-autocomplete-label-color);text-transform:var(--gog-autocomplete-label-text-transform);letter-spacing:var(--gog-autocomplete-label-letter-spacing)}.gog-autocomplete--float-on.gog-autocomplete--floated .gog-autocomplete__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-autocomplete-label-font-size);color:var(--gog-autocomplete-label-color);text-transform:var(--gog-autocomplete-label-text-transform);letter-spacing:var(--gog-autocomplete-label-letter-spacing);background-color:var(--gog-autocomplete-float-label-on-bg, var(--gog-autocomplete-field-bg));padding:0 4px;inset-inline-start:calc(var(--gog-autocomplete-padding-x, var(--gog-autocomplete-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-autocomplete--float-over.gog-autocomplete--floated .gog-autocomplete__label--float{top:calc(-1 * var(--gog-autocomplete-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-autocomplete-label-font-size);color:var(--gog-autocomplete-label-color);text-transform:var(--gog-autocomplete-label-text-transform);letter-spacing:var(--gog-autocomplete-label-letter-spacing)}.gog-autocomplete--float-over .gog-autocomplete__field{margin-top:var(--gog-autocomplete-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-autocomplete__control{transition:none}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ScrollComponent, selector: "gog-scroll", inputs: ["axis", "size", "autoHide", "hideDelay", "reachThreshold", "focusable", "ariaLabel", "overscrollBehavior", "showTrack"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }, { kind: "component", type: SpinnerComponent, selector: "gog-spinner", inputs: ["size", "overlay", "ariaLabel", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AutocompleteComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gog-autocomplete', imports: [IconComponent, NgTemplateOutlet, ScrollComponent, SpinnerComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         // Only bites when the control has opted out of full width; otherwise the container decides.
                         '[style.--gog-autocomplete-min-width]': 'minWidth()',
-                    }, template: "<!--\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 and lets whatever follows on the page\r\n  paint over the open dropdown.\r\n-->\r\n<div\r\n  class=\"gog-autocomplete\"\r\n  [class]=\"sizeClass()\"\r\n  [class.gog-autocomplete--clearable]=\"showClear()\"\r\n  [class.gog-autocomplete--disabled]=\"isDisabled()\"\r\n  [class.gog-autocomplete--open]=\"isOpen()\"\r\n  [class.gog-autocomplete--loading]=\"loading()\"\r\n  [class.gog-autocomplete--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n  [class.gog-autocomplete--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n  [class.gog-autocomplete--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n  [class.gog-autocomplete--floated]=\"isFloatLabelFloated()\"\r\n>\r\n  @if (label() && resolvedFloatLabel() === 'none') {\r\n    <label class=\"gog-autocomplete__label\" [for]=\"triggerId()\">{{ label() }}</label>\r\n  }\r\n\r\n  <div class=\"gog-autocomplete__field\">\r\n    @if (label() && isFloatLabelActive()) {\r\n      <label class=\"gog-autocomplete__label gog-autocomplete__label--float\" [for]=\"triggerId()\">{{\r\n        label()\r\n      }}</label>\r\n    }\r\n\r\n    <!--\r\n      The input *is* the combobox \u2014 role, aria-autocomplete and aria-activedescendant all sit\r\n      here, and DOM focus never leaves it. That is the difference from gog-select, where the\r\n      trigger is a button and focus moves onto the option itself.\r\n    -->\r\n    <input\r\n      type=\"text\"\r\n      class=\"gog-autocomplete__control\"\r\n      autocomplete=\"off\"\r\n      role=\"combobox\"\r\n      aria-autocomplete=\"list\"\r\n      [id]=\"triggerId()\"\r\n      [disabled]=\"isDisabled()\"\r\n      [value]=\"query()\"\r\n      [placeholder]=\"effectivePlaceholder()\"\r\n      [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || null\"\r\n      [attr.aria-controls]=\"listboxId()\"\r\n      [attr.aria-expanded]=\"isOpen()\"\r\n      [attr.aria-activedescendant]=\"activeOptionId()\"\r\n      [attr.aria-invalid]=\"hasError()\"\r\n      [attr.aria-describedby]=\"errorId()\"\r\n      (input)=\"onInput($event)\"\r\n      (keydown)=\"onInputKeydown($event)\"\r\n      (focus)=\"onInputFocus()\"\r\n      (blur)=\"onInputBlur()\"\r\n    />\r\n\r\n    <span class=\"gog-autocomplete__actions\">\r\n      @if (loading()) {\r\n        <gog-spinner class=\"gog-autocomplete__spinner\" size=\"xsm\" ariaLabel=\"Loading\" />\r\n      }\r\n\r\n      @if (showClear()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-autocomplete__clear gog-inline-center\"\r\n          [attr.aria-label]=\"resolvedClearLabel()\"\r\n          (mousedown)=\"onOptionMousedown($event)\"\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-autocomplete__error\" [attr.id]=\"errorId()\" role=\"alert\">\r\n      {{ visibleError() }}\r\n    </span>\r\n  }\r\n</div>\r\n\r\n<!--\r\n  One template for both render modes \u2014 inline, or stamped into <body> by the overlay when\r\n  `appendToBody` is set, which is why the portal modifier and the resolved coordinates are\r\n  applied conditionally.\r\n-->\r\n<ng-template #panelTpl>\r\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation; the keyboard contract lives on the combobox input, which keeps focus and drives this list via aria-activedescendant -->\r\n  <div\r\n    [id]=\"listboxId()\"\r\n    class=\"gog-autocomplete__dropdown\"\r\n    [class.gog-autocomplete__dropdown--up]=\"\r\n      !resolvedAppendToBody() && dropdownDirectionState() === 'up'\r\n    \"\r\n    [class.gog-autocomplete__dropdown--portal]=\"resolvedAppendToBody()\"\r\n    [class]=\"panelSizeClass()\"\r\n    [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\r\n    [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\r\n    [style.width]=\"resolvedAppendToBody() ? resolvedPanelWidth() : null\"\r\n    [style.min-width]=\"resolvedAppendToBody() ? resolvedPanelMinWidth() : null\"\r\n    [style.max-height]=\"resolvedAppendToBody() ? resolvedPanelMaxHeight() : null\"\r\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\r\n    role=\"listbox\"\r\n    [attr.aria-label]=\"label() || ariaLabel() || null\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    <gog-scroll\r\n      size=\"thin\"\r\n      [focusable]=\"false\"\r\n      overscrollBehavior=\"contain\"\r\n      class=\"gog-autocomplete__scroll\"\r\n      (gogReachEnd)=\"gogLoadMore.emit()\"\r\n    >\r\n      @if (visibleOptions().length === 0) {\r\n        <p class=\"gog-autocomplete__empty\">{{ emptyMessage() }}</p>\r\n      }\r\n\r\n      @for (option of visibleOptions(); track valueOf(option); let i = $index) {\r\n        <!--\r\n          A div, not a button: focus stays in the input, so these rows are never focused and a\r\n          button would only add tab stops and a second Enter handler. The highlight is pointed\r\n          at with aria-activedescendant instead.\r\n\r\n          mousedown is prevented so clicking a row doesn't blur the input first \u2014 that blur\r\n          would close the panel and, under forceSelection, wipe the text before the click lands.\r\n        -->\r\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- this is the ARIA combobox pattern: the option is deliberately neither focusable nor a keyboard target, because focus stays in the input and the whole keyboard contract (arrows, Enter, Escape) is handled there and communicated through aria-activedescendant. Making these rows focusable would break the pattern rather than improve it. -->\r\n        <div\r\n          class=\"gog-autocomplete__option\"\r\n          role=\"option\"\r\n          [id]=\"optionId(i)\"\r\n          [attr.aria-selected]=\"isSelected(option)\"\r\n          [attr.aria-disabled]=\"isOptionDisabled(option)\"\r\n          [class.gog-autocomplete__option--active]=\"i === activeIndex()\"\r\n          [class.gog-autocomplete__option--selected]=\"isSelected(option)\"\r\n          [class.gog-autocomplete__option--disabled]=\"isOptionDisabled(option)\"\r\n          (mousedown)=\"onOptionMousedown($event)\"\r\n          (click)=\"onOptionClick(option, $event)\"\r\n        >\r\n          @if (optionSlot(); as slot) {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"slot.templateRef\"\r\n              [ngTemplateOutletContext]=\"optionContext(option, isSelected(option))\"\r\n            />\r\n          } @else {\r\n            <span class=\"gog-autocomplete__option-label\">{{ labelOf(option) }}</span>\r\n          }\r\n        </div>\r\n      }\r\n    </gog-scroll>\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.gog-autocomplete{display:flex;flex-direction:column;gap:var(--gog-autocomplete-gap);width:100%}.gog-autocomplete__label{color:var(--gog-autocomplete-label-color);font-family:var(--gog-autocomplete-label-font-family);font-size:var(--gog-autocomplete-label-font-size);font-weight:var(--gog-autocomplete-label-font-weight);letter-spacing:var(--gog-autocomplete-label-letter-spacing)}.gog-autocomplete__field{position:relative;display:flex;align-items:center;width:100%;min-width:var(--gog-autocomplete-min-width)}.gog-autocomplete__control{box-sizing:border-box;width:100%;min-width:var(--gog-autocomplete-min-width);padding:var(--gog-autocomplete-padding-y, var(--gog-autocomplete-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-autocomplete-actions-reserve) var(--gog-autocomplete-padding-y, var(--gog-autocomplete-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-autocomplete-padding-x, var(--gog-autocomplete-size-padding-x, var(--gog-field-md-padding-x)));border:var(--gog-autocomplete-border-width) var(--gog-autocomplete-border-style) var(--gog-autocomplete-border-color);border-radius:var(--gog-autocomplete-radius);background-color:var(--gog-autocomplete-bg, var(--gog-autocomplete-field-bg));color:var(--gog-autocomplete-color, var(--gog-autocomplete-text-color));font-family:var(--gog-autocomplete-font-family);font-size:var(--gog-autocomplete-font-size, var(--gog-autocomplete-size-font-size, var(--gog-field-md-font-size)));line-height:var(--gog-autocomplete-line-height);transition:border-color var(--gog-autocomplete-transition-duration) var(--gog-easing),box-shadow var(--gog-autocomplete-transition-duration) var(--gog-easing)}.gog-autocomplete__control::placeholder{color:var(--gog-autocomplete-placeholder-color)}.gog-autocomplete__control:hover:not(:disabled){border-color:var(--gog-autocomplete-hover-border-color)}.gog-autocomplete__control:focus-visible{outline:var(--gog-autocomplete-focus-ring-width) solid var(--gog-autocomplete-focus-ring-color);outline-offset:var(--gog-autocomplete-focus-ring-offset)}.gog-autocomplete__control:disabled{opacity:var(--gog-autocomplete-disabled-opacity);cursor:not-allowed}.gog-autocomplete--error .gog-autocomplete__control,.gog-autocomplete__control[aria-invalid=true]{border-color:var(--gog-autocomplete-error-border-color)}.gog-autocomplete__actions{position:absolute;inset-inline-end:var(--gog-autocomplete-actions-inset);display:inline-flex;align-items:center;flex-direction:row-reverse;gap:var(--gog-autocomplete-actions-gap);pointer-events:none}.gog-autocomplete__actions>*{pointer-events:auto}.gog-autocomplete__clear{padding:0;border:0;background:none;color:var(--gog-autocomplete-clear-color);font-size:calc(var(--gog-icon-size) * var(--gog-autocomplete-clear-icon-ratio));cursor:pointer}.gog-autocomplete__clear:hover{color:var(--gog-autocomplete-clear-hover-color)}.gog-autocomplete__clear:focus-visible{outline:var(--gog-autocomplete-focus-ring-width) solid var(--gog-autocomplete-focus-ring-color);outline-offset:var(--gog-autocomplete-focus-ring-offset)}.gog-autocomplete__spinner{font-size:var(--gog-autocomplete-spinner-size)}.gog-autocomplete__error{color:var(--gog-autocomplete-error-color);font-family:var(--gog-autocomplete-error-font-family);font-size:var(--gog-autocomplete-error-font-size)}.gog-autocomplete__dropdown{position:absolute;inset-inline-start:0;top:calc(100% + var(--gog-autocomplete-panel-gap));z-index:var(--gog-dropdown-z);box-sizing:border-box;display:flex;flex-direction:column;width:max-content;min-width:100%;max-width:var(--gog-autocomplete-panel-max-width);max-height:var(--gog-autocomplete-panel-max-height);padding:var(--gog-autocomplete-options-padding);border:var(--gog-autocomplete-panel-border-width) var(--gog-autocomplete-panel-border-style) var(--gog-autocomplete-panel-border-color);border-radius:var(--gog-autocomplete-panel-radius);background-color:var(--gog-autocomplete-panel-bg);box-shadow:var(--gog-autocomplete-panel-shadow);overflow:hidden}.gog-autocomplete__dropdown--up{top:auto;bottom:calc(100% + var(--gog-autocomplete-panel-gap))}.gog-autocomplete__dropdown--portal{position:fixed;top:0;inset-inline-start:0;min-width:0}.gog-autocomplete__scroll{flex:1;min-height:0}.gog-autocomplete__option{display:flex;align-items:center;gap:var(--gog-autocomplete-option-gap);padding:var(--gog-autocomplete-option-padding);border-radius:var(--gog-autocomplete-option-radius);color:var(--gog-autocomplete-option-color);font-family:var(--gog-autocomplete-font-family);font-size:var(--gog-autocomplete-font-size, var(--gog-autocomplete-size-font-size, var(--gog-field-md-font-size)));cursor:pointer}.gog-autocomplete__option:hover:not([aria-disabled=true]),.gog-autocomplete__option--active{background-color:var(--gog-autocomplete-option-hover-bg);color:var(--gog-autocomplete-option-hover-color)}.gog-autocomplete__option--selected{background-color:var(--gog-autocomplete-option-selected-bg);color:var(--gog-autocomplete-option-selected-color)}.gog-autocomplete__option--disabled{opacity:var(--gog-autocomplete-disabled-opacity);cursor:not-allowed}.gog-autocomplete__option-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gog-autocomplete__empty{margin:0;padding:var(--gog-autocomplete-option-padding);color:var(--gog-autocomplete-empty-color);font-family:var(--gog-autocomplete-font-family);font-size:var(--gog-autocomplete-empty-font-size)}.gog-autocomplete--xsm{--gog-autocomplete-size-padding-y: var(--gog-field-xsm-padding-y);--gog-autocomplete-size-padding-x: var(--gog-field-xsm-padding-x);--gog-autocomplete-size-font-size: var(--gog-field-xsm-font-size)}.gog-autocomplete--sm{--gog-autocomplete-size-padding-y: var(--gog-field-sm-padding-y);--gog-autocomplete-size-padding-x: var(--gog-field-sm-padding-x);--gog-autocomplete-size-font-size: var(--gog-field-sm-font-size)}.gog-autocomplete--lg{--gog-autocomplete-size-padding-y: var(--gog-field-lg-padding-y);--gog-autocomplete-size-padding-x: var(--gog-field-lg-padding-x);--gog-autocomplete-size-font-size: var(--gog-field-lg-font-size)}.gog-autocomplete--slg{--gog-autocomplete-size-padding-y: var(--gog-field-slg-padding-y);--gog-autocomplete-size-padding-x: var(--gog-field-slg-padding-x);--gog-autocomplete-size-font-size: var(--gog-field-slg-font-size)}:host(.gog-host--auto-width) .gog-autocomplete,:host(.gog-host--auto-width) .gog-autocomplete__field,:host(.gog-host--auto-width) .gog-autocomplete__control{width:auto}.gog-autocomplete__label--float{position:absolute;inset-inline-start:var(--gog-autocomplete-padding-x, var(--gog-autocomplete-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - 2 * var(--gog-autocomplete-padding-x, var(--gog-autocomplete-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;color:var(--gog-autocomplete-placeholder-color);font-size:var(--gog-autocomplete-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-autocomplete-transition-duration) var(--gog-easing),font-size var(--gog-autocomplete-transition-duration) var(--gog-easing),color var(--gog-autocomplete-transition-duration) var(--gog-easing),top var(--gog-autocomplete-transition-duration) var(--gog-easing),background-color var(--gog-autocomplete-transition-duration) var(--gog-easing)}.gog-autocomplete--float-in,.gog-autocomplete--float-on{--gog-autocomplete-float-top-padding: calc(var(--gog-autocomplete-padding-y, var(--gog-autocomplete-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-autocomplete-float-label-reserve))}.gog-autocomplete--float-in .gog-autocomplete__control,.gog-autocomplete--float-on .gog-autocomplete__control{padding-top:var(--gog-autocomplete-float-top-padding)}.gog-autocomplete--float-in .gog-autocomplete__label--float,.gog-autocomplete--float-on .gog-autocomplete__label--float{top:var(--gog-autocomplete-float-top-padding);transform:none}.gog-autocomplete--float-in.gog-autocomplete--floated .gog-autocomplete__label--float{top:var(--gog-autocomplete-float-label-in-top);transform:translateY(0);font-size:var(--gog-autocomplete-label-font-size);color:var(--gog-autocomplete-label-color);text-transform:var(--gog-autocomplete-label-text-transform);letter-spacing:var(--gog-autocomplete-label-letter-spacing)}.gog-autocomplete--float-on.gog-autocomplete--floated .gog-autocomplete__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-autocomplete-label-font-size);color:var(--gog-autocomplete-label-color);text-transform:var(--gog-autocomplete-label-text-transform);letter-spacing:var(--gog-autocomplete-label-letter-spacing);background-color:var(--gog-autocomplete-float-label-on-bg, var(--gog-autocomplete-field-bg));padding:0 4px;inset-inline-start:calc(var(--gog-autocomplete-padding-x, var(--gog-autocomplete-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-autocomplete--float-over.gog-autocomplete--floated .gog-autocomplete__label--float{top:calc(-1 * var(--gog-autocomplete-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-autocomplete-label-font-size);color:var(--gog-autocomplete-label-color);text-transform:var(--gog-autocomplete-label-text-transform);letter-spacing:var(--gog-autocomplete-label-letter-spacing)}.gog-autocomplete--float-over .gog-autocomplete__field{margin-top:var(--gog-autocomplete-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-autocomplete__control{transition:none}}\n"] }]
+                    }, template: "<!--\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 and lets whatever follows on the page\r\n  paint over the open dropdown.\r\n-->\r\n<div\r\n  class=\"gog-autocomplete\"\r\n  [class]=\"sizeClass()\"\r\n  [class.gog-autocomplete--clearable]=\"showClear()\"\r\n  [class.gog-autocomplete--disabled]=\"isDisabled()\"\r\n  [class.gog-autocomplete--open]=\"isOpen()\"\r\n  [class.gog-autocomplete--loading]=\"loading()\"\r\n  [class.gog-autocomplete--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n  [class.gog-autocomplete--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n  [class.gog-autocomplete--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n  [class.gog-autocomplete--floated]=\"isFloatLabelFloated()\"\r\n>\r\n  @if (label() && resolvedFloatLabel() === 'none') {\r\n    <label class=\"gog-autocomplete__label\" [for]=\"triggerId()\">{{ label() }}</label>\r\n  }\r\n\r\n  <div class=\"gog-autocomplete__field\">\r\n    @if (label() && isFloatLabelActive()) {\r\n      <label class=\"gog-autocomplete__label gog-autocomplete__label--float\" [for]=\"triggerId()\">{{\r\n        label()\r\n      }}</label>\r\n    }\r\n\r\n    <!--\r\n      The input *is* the combobox \u2014 role, aria-autocomplete and aria-activedescendant all sit\r\n      here, and DOM focus never leaves it. That is the difference from gog-select, where the\r\n      trigger is a button and focus moves onto the option itself.\r\n    -->\r\n    <input\r\n      type=\"text\"\r\n      class=\"gog-autocomplete__control\"\r\n      autocomplete=\"off\"\r\n      role=\"combobox\"\r\n      aria-autocomplete=\"list\"\r\n      [id]=\"triggerId()\"\r\n      [disabled]=\"isDisabled()\"\r\n      [value]=\"query()\"\r\n      [placeholder]=\"effectivePlaceholder()\"\r\n      [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || null\"\r\n      [attr.aria-controls]=\"listboxId()\"\r\n      [attr.aria-expanded]=\"isOpen()\"\r\n      [attr.aria-activedescendant]=\"activeOptionId()\"\r\n      [attr.aria-invalid]=\"hasError()\"\r\n      [attr.aria-describedby]=\"errorId()\"\r\n      (input)=\"onInput($event)\"\r\n      (keydown)=\"onInputKeydown($event)\"\r\n      (focus)=\"onInputFocus()\"\r\n      (blur)=\"onInputBlur()\"\r\n    />\r\n\r\n    <span class=\"gog-autocomplete__actions\">\r\n      @if (loading()) {\r\n        <gog-spinner class=\"gog-autocomplete__spinner\" size=\"xsm\" ariaLabel=\"Loading\" />\r\n      }\r\n\r\n      @if (showClear()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-autocomplete__clear gog-inline-center\"\r\n          [attr.aria-label]=\"resolvedClearLabel()\"\r\n          (mousedown)=\"onOptionMousedown($event)\"\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-autocomplete__error\" [attr.id]=\"errorId()\" role=\"alert\">\r\n      {{ visibleError() }}\r\n    </span>\r\n  }\r\n</div>\r\n\r\n<!--\r\n  One template for both render modes \u2014 inline, or stamped into <body> by the overlay when\r\n  `appendToBody` is set, which is why the portal modifier and the resolved coordinates are\r\n  applied conditionally.\r\n-->\r\n<ng-template #panelTpl>\r\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation; the keyboard contract lives on the combobox input, which keeps focus and drives this list via aria-activedescendant -->\r\n  <div\r\n    [id]=\"listboxId()\"\r\n    class=\"gog-autocomplete__dropdown\"\r\n    [class.gog-autocomplete__dropdown--up]=\"\r\n      !resolvedAppendToBody() && dropdownDirectionState() === 'up'\r\n    \"\r\n    [class.gog-autocomplete__dropdown--portal]=\"resolvedAppendToBody()\"\r\n    [class]=\"panelSizeClass()\"\r\n    [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\r\n    [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\r\n    [style.width]=\"resolvedAppendToBody() ? resolvedPanelWidth() : null\"\r\n    [style.min-width]=\"resolvedAppendToBody() ? resolvedPanelMinWidth() : null\"\r\n    [style.max-height]=\"resolvedAppendToBody() ? resolvedPanelMaxHeight() : null\"\r\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\r\n    role=\"listbox\"\r\n    [attr.aria-label]=\"label() || ariaLabel() || null\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    <gog-scroll\r\n      size=\"thin\"\r\n      [focusable]=\"false\"\r\n      overscrollBehavior=\"contain\"\r\n      class=\"gog-autocomplete__scroll\"\r\n      (gogReachEnd)=\"gogLoadMore.emit()\"\r\n    >\r\n      @if (visibleOptions().length === 0) {\r\n        <p class=\"gog-autocomplete__empty\">{{ emptyMessage() }}</p>\r\n      }\r\n\r\n      @for (option of visibleOptions(); track valueOf(option); let i = $index) {\r\n        <!--\r\n          A div, not a button: focus stays in the input, so these rows are never focused and a\r\n          button would only add tab stops and a second Enter handler. The highlight is pointed\r\n          at with aria-activedescendant instead.\r\n\r\n          mousedown is prevented so clicking a row doesn't blur the input first \u2014 that blur\r\n          would close the panel and, under forceSelection, wipe the text before the click lands.\r\n        -->\r\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- this is the ARIA combobox pattern: the option is deliberately neither focusable nor a keyboard target, because focus stays in the input and the whole keyboard contract (arrows, Enter, Escape) is handled there and communicated through aria-activedescendant. Making these rows focusable would break the pattern rather than improve it. -->\r\n        <div\r\n          class=\"gog-autocomplete__option\"\r\n          role=\"option\"\r\n          [id]=\"optionId(i)\"\r\n          [attr.aria-selected]=\"isSelected(option)\"\r\n          [attr.aria-disabled]=\"isOptionDisabled(option)\"\r\n          [class.gog-autocomplete__option--active]=\"i === activeIndex()\"\r\n          [class.gog-autocomplete__option--selected]=\"isSelected(option)\"\r\n          [class.gog-autocomplete__option--disabled]=\"isOptionDisabled(option)\"\r\n          (mousedown)=\"onOptionMousedown($event)\"\r\n          (click)=\"onOptionClick(option, $event)\"\r\n        >\r\n          @if (optionSlot(); as slot) {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"slot.templateRef\"\r\n              [ngTemplateOutletContext]=\"optionContext(option, isSelected(option))\"\r\n            />\r\n          } @else {\r\n            <span class=\"gog-autocomplete__option-label\">{{ labelOf(option) }}</span>\r\n          }\r\n        </div>\r\n      }\r\n    </gog-scroll>\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.gog-autocomplete{display:flex;flex-direction:column;gap:var(--gog-autocomplete-gap);width:100%}.gog-autocomplete__label{color:var(--gog-autocomplete-label-color);font-family:var(--gog-autocomplete-label-font-family);font-size:var(--gog-autocomplete-label-font-size);font-weight:var(--gog-autocomplete-label-font-weight);letter-spacing:var(--gog-autocomplete-label-letter-spacing)}.gog-autocomplete__field{position:relative;display:flex;align-items:center;width:100%;min-width:var(--gog-autocomplete-min-width)}.gog-autocomplete__control{box-sizing:border-box;width:100%;min-width:var(--gog-autocomplete-min-width);padding-block:var(--gog-autocomplete-padding-y, var(--gog-autocomplete-size-padding-y, var(--gog-field-md-padding-y)));padding-inline:var(--gog-autocomplete-padding-x, var(--gog-autocomplete-size-padding-x, var(--gog-field-md-padding-x))) var(--gog-autocomplete-actions-reserve);border:var(--gog-autocomplete-border-width) var(--gog-autocomplete-border-style) var(--gog-autocomplete-border-color);border-radius:var(--gog-autocomplete-radius);background-color:var(--gog-autocomplete-bg, var(--gog-autocomplete-field-bg));color:var(--gog-autocomplete-color, var(--gog-autocomplete-text-color));font-family:var(--gog-autocomplete-font-family);font-size:var(--gog-autocomplete-font-size, var(--gog-autocomplete-size-font-size, var(--gog-field-md-font-size)));line-height:var(--gog-autocomplete-line-height);transition:border-color var(--gog-autocomplete-transition-duration) var(--gog-easing),box-shadow var(--gog-autocomplete-transition-duration) var(--gog-easing)}.gog-autocomplete__control::placeholder{color:var(--gog-autocomplete-placeholder-color)}.gog-autocomplete__control:hover:not(:disabled){border-color:var(--gog-autocomplete-hover-border-color)}.gog-autocomplete__control:focus-visible{outline:var(--gog-autocomplete-focus-ring-width) solid var(--gog-autocomplete-focus-ring-color);outline-offset:var(--gog-autocomplete-focus-ring-offset)}.gog-autocomplete__control:disabled{opacity:var(--gog-autocomplete-disabled-opacity);cursor:not-allowed}.gog-autocomplete--error .gog-autocomplete__control,.gog-autocomplete__control[aria-invalid=true]{border-color:var(--gog-autocomplete-error-border-color)}.gog-autocomplete__actions{position:absolute;inset-inline-end:var(--gog-autocomplete-actions-inset);display:inline-flex;align-items:center;flex-direction:row-reverse;gap:var(--gog-autocomplete-actions-gap);pointer-events:none}.gog-autocomplete__actions>*{pointer-events:auto}.gog-autocomplete__clear{padding:0;border:0;background:none;color:var(--gog-autocomplete-clear-color);font-size:calc(var(--gog-icon-size) * var(--gog-autocomplete-clear-icon-ratio));cursor:pointer}.gog-autocomplete__clear:hover{color:var(--gog-autocomplete-clear-hover-color)}.gog-autocomplete__clear:focus-visible{outline:var(--gog-autocomplete-focus-ring-width) solid var(--gog-autocomplete-focus-ring-color);outline-offset:var(--gog-autocomplete-focus-ring-offset)}.gog-autocomplete__spinner{font-size:var(--gog-autocomplete-spinner-size)}.gog-autocomplete__error{color:var(--gog-autocomplete-error-color);font-family:var(--gog-autocomplete-error-font-family);font-size:var(--gog-autocomplete-error-font-size)}.gog-autocomplete__dropdown{position:absolute;inset-inline-start:0;top:calc(100% + var(--gog-autocomplete-panel-gap));z-index:var(--gog-dropdown-z);box-sizing:border-box;display:flex;flex-direction:column;width:max-content;min-width:100%;max-width:var(--gog-autocomplete-panel-max-width);max-height:var(--gog-autocomplete-panel-max-height);padding:var(--gog-autocomplete-options-padding);border:var(--gog-autocomplete-panel-border-width) var(--gog-autocomplete-panel-border-style) var(--gog-autocomplete-panel-border-color);border-radius:var(--gog-autocomplete-panel-radius);background-color:var(--gog-autocomplete-panel-bg);box-shadow:var(--gog-autocomplete-panel-shadow);overflow:hidden}.gog-autocomplete__dropdown--up{top:auto;bottom:calc(100% + var(--gog-autocomplete-panel-gap))}.gog-autocomplete__dropdown--portal{position:fixed;top:0;inset-inline-start:0;min-width:0}.gog-autocomplete__scroll{flex:1;min-height:0}.gog-autocomplete__option{display:flex;align-items:center;gap:var(--gog-autocomplete-option-gap);padding:var(--gog-autocomplete-option-padding);border-radius:var(--gog-autocomplete-option-radius);color:var(--gog-autocomplete-option-color);font-family:var(--gog-autocomplete-font-family);font-size:var(--gog-autocomplete-font-size, var(--gog-autocomplete-size-font-size, var(--gog-field-md-font-size)));cursor:pointer}.gog-autocomplete__option:hover:not([aria-disabled=true]),.gog-autocomplete__option--active{background-color:var(--gog-autocomplete-option-hover-bg);color:var(--gog-autocomplete-option-hover-color)}.gog-autocomplete__option--selected{background-color:var(--gog-autocomplete-option-selected-bg);color:var(--gog-autocomplete-option-selected-color)}.gog-autocomplete__option--disabled{opacity:var(--gog-autocomplete-disabled-opacity);cursor:not-allowed}.gog-autocomplete__option-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gog-autocomplete__empty{margin:0;padding:var(--gog-autocomplete-option-padding);color:var(--gog-autocomplete-empty-color);font-family:var(--gog-autocomplete-font-family);font-size:var(--gog-autocomplete-empty-font-size)}.gog-autocomplete--xsm{--gog-autocomplete-size-padding-y: var(--gog-field-xsm-padding-y);--gog-autocomplete-size-padding-x: var(--gog-field-xsm-padding-x);--gog-autocomplete-size-font-size: var(--gog-field-xsm-font-size)}.gog-autocomplete--sm{--gog-autocomplete-size-padding-y: var(--gog-field-sm-padding-y);--gog-autocomplete-size-padding-x: var(--gog-field-sm-padding-x);--gog-autocomplete-size-font-size: var(--gog-field-sm-font-size)}.gog-autocomplete--lg{--gog-autocomplete-size-padding-y: var(--gog-field-lg-padding-y);--gog-autocomplete-size-padding-x: var(--gog-field-lg-padding-x);--gog-autocomplete-size-font-size: var(--gog-field-lg-font-size)}.gog-autocomplete--slg{--gog-autocomplete-size-padding-y: var(--gog-field-slg-padding-y);--gog-autocomplete-size-padding-x: var(--gog-field-slg-padding-x);--gog-autocomplete-size-font-size: var(--gog-field-slg-font-size)}:host(.gog-host--auto-width) .gog-autocomplete,:host(.gog-host--auto-width) .gog-autocomplete__field,:host(.gog-host--auto-width) .gog-autocomplete__control{width:auto}.gog-autocomplete__label--float{position:absolute;inset-inline-start:var(--gog-autocomplete-padding-x, var(--gog-autocomplete-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - 2 * var(--gog-autocomplete-padding-x, var(--gog-autocomplete-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;color:var(--gog-autocomplete-placeholder-color);font-size:var(--gog-autocomplete-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-autocomplete-transition-duration) var(--gog-easing),font-size var(--gog-autocomplete-transition-duration) var(--gog-easing),color var(--gog-autocomplete-transition-duration) var(--gog-easing),top var(--gog-autocomplete-transition-duration) var(--gog-easing),background-color var(--gog-autocomplete-transition-duration) var(--gog-easing)}.gog-autocomplete--float-in,.gog-autocomplete--float-on{--gog-autocomplete-float-top-padding: calc(var(--gog-autocomplete-padding-y, var(--gog-autocomplete-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-autocomplete-float-label-reserve))}.gog-autocomplete--float-in .gog-autocomplete__control,.gog-autocomplete--float-on .gog-autocomplete__control{padding-top:var(--gog-autocomplete-float-top-padding)}.gog-autocomplete--float-in .gog-autocomplete__label--float,.gog-autocomplete--float-on .gog-autocomplete__label--float{top:var(--gog-autocomplete-float-top-padding);transform:none}.gog-autocomplete--float-in.gog-autocomplete--floated .gog-autocomplete__label--float{top:var(--gog-autocomplete-float-label-in-top);transform:translateY(0);font-size:var(--gog-autocomplete-label-font-size);color:var(--gog-autocomplete-label-color);text-transform:var(--gog-autocomplete-label-text-transform);letter-spacing:var(--gog-autocomplete-label-letter-spacing)}.gog-autocomplete--float-on.gog-autocomplete--floated .gog-autocomplete__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-autocomplete-label-font-size);color:var(--gog-autocomplete-label-color);text-transform:var(--gog-autocomplete-label-text-transform);letter-spacing:var(--gog-autocomplete-label-letter-spacing);background-color:var(--gog-autocomplete-float-label-on-bg, var(--gog-autocomplete-field-bg));padding:0 4px;inset-inline-start:calc(var(--gog-autocomplete-padding-x, var(--gog-autocomplete-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-autocomplete--float-over.gog-autocomplete--floated .gog-autocomplete__label--float{top:calc(-1 * var(--gog-autocomplete-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-autocomplete-label-font-size);color:var(--gog-autocomplete-label-color);text-transform:var(--gog-autocomplete-label-text-transform);letter-spacing:var(--gog-autocomplete-label-letter-spacing)}.gog-autocomplete--float-over .gog-autocomplete__field{margin-top:var(--gog-autocomplete-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-autocomplete__control{transition:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], filterLocal: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterLocal", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], openOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOnFocus", required: false }] }], searchDebounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchDebounce", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], forceSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceSelection", required: false }] }], gogSearch: [{ type: i0.Output, args: ["gogSearch"] }], gogLoadMore: [{ type: i0.Output, args: ["gogLoadMore"] }], panelTemplate: [{ type: i0.ViewChild, args: ['panelTpl', { isSignal: true }] }] } });
 
 /** Beyond this count the badge renders `N+` rather than growing without limit. */
@@ -4367,13 +4376,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: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;inset-inline-start: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;inset-inline-start: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-block:var(--gog-datepicker-padding-y, var(--gog-datepicker-size-padding-y, var(--gog-field-md-padding-y)));padding-inline:var(--gog-datepicker-padding-x, var(--gog-datepicker-size-padding-x, var(--gog-field-md-padding-x))) var(--gog-datepicker-actions-reserve);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;inset-inline-start: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;inset-inline-start: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: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;inset-inline-start: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;inset-inline-start: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-block:var(--gog-datepicker-padding-y, var(--gog-datepicker-size-padding-y, var(--gog-field-md-padding-y)));padding-inline:var(--gog-datepicker-padding-x, var(--gog-datepicker-size-padding-x, var(--gog-field-md-padding-x))) var(--gog-datepicker-actions-reserve);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;inset-inline-start: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;inset-inline-start: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 }] }] } });
 
 /**
@@ -4819,6 +4828,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 
 /** Built-in default, used when neither `DialogConfig` nor `GOG_CONFIG.labels` supplies one. */
 const DEFAULT_CLOSE_LABEL$1 = 'Close dialog';
+/**
+ * The single outlet every `DialogService.open(...)` renders into. Place one, typically in the
+ * root component's template.
+ *
+ * **Place it at the root, not inside a section.** The backdrop is `position: fixed`, which
+ * covers the viewport only while no ancestor establishes a containing block — `contain`,
+ * `transform`, `filter`, `backdrop-filter` or `will-change` above it retargets the backdrop to
+ * that element's box, and `gog-scroll` sets `contain: layout style`. Nested inside one, a modal
+ * dims the scroller and leaves the rest of the page live. See README's "Overlays and the
+ * viewport".
+ */
 class DialogComponent {
     dialogService = inject(DialogService);
     globalConfig = inject(GOG_CONFIG);
@@ -5229,6 +5249,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 const POSITIONS = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
 /** The two types urgent enough to interrupt whatever the screen reader is currently saying. */
 const ASSERTIVE_TYPES = ['error', 'warning'];
+/**
+ * The single host every toast renders into. Place one, typically in the root component.
+ *
+ * **Where you place it decides what it anchors to.** The container is `position: fixed`, which
+ * pins it to the viewport only while no ancestor establishes a containing block — `contain`,
+ * `transform`, `filter`, `backdrop-filter` or `will-change` above it retargets it to that
+ * element's box, and `gog-scroll` sets `contain: layout style`. A container nested inside one
+ * corners its toasts against the scroller rather than the window. See README's "Overlays and
+ * the viewport".
+ */
 class ToastContainerComponent {
     toastService = inject(ToastService);
     maxVisiblePerPosition = input(5, ...(ngDevMode ? [{ debugName: "maxVisiblePerPosition" }] : /* istanbul ignore next */ []));
@@ -5615,7 +5645,7 @@ class InputfieldComponent {
         this._onTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: InputfieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: InputfieldComponent, isStandalone: true, selector: "gog-inputfield", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "minlength", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, inputMode: { classPropertyName: "inputMode", publicName: "inputMode", isSignal: true, isRequired: false, transformFunction: null }, spellcheck: { classPropertyName: "spellcheck", publicName: "spellcheck", 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 }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, showSpinButtons: { classPropertyName: "showSpinButtons", publicName: "showSpinButtons", isSignal: true, isRequired: false, transformFunction: null }, incrementLabel: { classPropertyName: "incrementLabel", publicName: "incrementLabel", isSignal: true, isRequired: false, transformFunction: null }, decrementLabel: { classPropertyName: "decrementLabel", publicName: "decrementLabel", 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 }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, iconStart: { classPropertyName: "iconStart", publicName: "iconStart", isSignal: true, isRequired: false, transformFunction: null }, iconEnd: { classPropertyName: "iconEnd", publicName: "iconEnd", isSignal: true, isRequired: false, transformFunction: null }, showPasswordLabel: { classPropertyName: "showPasswordLabel", publicName: "showPasswordLabel", isSignal: true, isRequired: false, transformFunction: null }, hidePasswordLabel: { classPropertyName: "hidePasswordLabel", publicName: "hidePasswordLabel", 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 }, floatLabel: { classPropertyName: "floatLabel", publicName: "floatLabel", isSignal: true, isRequired: false, transformFunction: null }, floatLabelShowPlaceholder: { classPropertyName: "floatLabelShowPlaceholder", publicName: "floatLabelShowPlaceholder", 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()" } }, queries: [{ propertyName: "addonStart", first: true, predicate: GogInputAddonStartDirective, descendants: true, isSignal: true }, { propertyName: "addonEnd", first: true, predicate: GogInputAddonEndDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  class=\"gog-input-wrapper gog-contained-layout\"\r\n  [class]=\"sizeClass()\"\r\n  [class.gog-input-wrapper--icon-start]=\"hasIconStart()\"\r\n  [class.gog-input-wrapper--icon-end]=\"hasIconEnd() || hasSpinButtons()\"\r\n  [class.gog-input-wrapper--spin-clear]=\"hasSpinAndClear()\"\r\n  [class.gog-input-wrapper--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n  [class.gog-input-wrapper--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n  [class.gog-input-wrapper--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n  [class.gog-input-wrapper--floated]=\"isFloatLabelFloated()\"\r\n>\r\n  @if (label() && resolvedFloatLabel() === 'none') {\r\n    <label class=\"gog-input__label\" [attr.for]=\"resolvedInputId()\">{{ label() }}</label>\r\n  }\r\n  <div class=\"gog-input__field-container\">\r\n    @if (label() && isFloatLabelActive()) {\r\n      <label class=\"gog-input__label gog-input__label--float\" [attr.for]=\"resolvedInputId()\">{{\r\n        label()\r\n      }}</label>\r\n    }\r\n    @if (addonStart()) {\r\n      <span class=\"gog-input__icon gog-inline-center gog-input__icon--start gog-input__addon\">\r\n        <ng-content select=\"[gogInputAddonStart]\" />\r\n      </span>\r\n    } @else if (iconStart(); as iconStartName) {\r\n      <span class=\"gog-input__icon gog-inline-center gog-input__icon--start\" aria-hidden=\"true\">\r\n        <gog-icon [name]=\"iconStartName\" />\r\n      </span>\r\n    }\r\n    <input\r\n      class=\"gog-input__field\"\r\n      [class.gog-input__field--error]=\"hasError()\"\r\n      [class.gog-input__field--spin-hidden]=\"isNumberField()\"\r\n      [attr.id]=\"resolvedInputId()\"\r\n      [type]=\"effectiveType()\"\r\n      [attr.name]=\"name() || null\"\r\n      [placeholder]=\"effectivePlaceholder()\"\r\n      [value]=\"value()\"\r\n      [disabled]=\"isDisabled()\"\r\n      [readOnly]=\"readonly()\"\r\n      [autocomplete]=\"effectiveAutocomplete()\"\r\n      [attr.min]=\"min()\"\r\n      [attr.max]=\"max()\"\r\n      [attr.step]=\"step()\"\r\n      [attr.maxlength]=\"maxlength()\"\r\n      [attr.minlength]=\"minlength()\"\r\n      [attr.pattern]=\"pattern() || null\"\r\n      [attr.inputmode]=\"inputMode()\"\r\n      [attr.spellcheck]=\"spellcheck()\"\r\n      [attr.aria-invalid]=\"hasError()\"\r\n      [attr.aria-describedby]=\"errorId()\"\r\n      (input)=\"onInput($event)\"\r\n      (focus)=\"onFocus()\"\r\n      (blur)=\"onBlur()\"\r\n    />\r\n    <!--\r\n      A password field's built-in show/hide toggle owns the end slot: it is the only control\r\n      that reveals the value, so a projected addon must not be able to displace it.\r\n    -->\r\n    @if (hasSpinButtons()) {\r\n      <span class=\"gog-input__spin\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-input__spin-btn gog-input__spin-btn--up\"\r\n          tabindex=\"-1\"\r\n          [attr.aria-label]=\"resolvedIncrementLabel()\"\r\n          [disabled]=\"isDisabled() || isAtMax()\"\r\n          (mousedown)=\"$event.preventDefault()\"\r\n          (click)=\"stepValue(1)\"\r\n        >\r\n          <gog-icon name=\"chevron-up\" />\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-input__spin-btn gog-input__spin-btn--down\"\r\n          tabindex=\"-1\"\r\n          [attr.aria-label]=\"resolvedDecrementLabel()\"\r\n          [disabled]=\"isDisabled() || isAtMin()\"\r\n          (mousedown)=\"$event.preventDefault()\"\r\n          (click)=\"stepValue(-1)\"\r\n        >\r\n          <gog-icon name=\"chevron-down\" />\r\n        </button>\r\n      </span>\r\n    }\r\n    <!--\r\n      The clear button sits outside the stepper's `@if` rather than in an `@else` branch: on a\r\n      number field the two have to coexist, and the stepper owns the field's right edge while\r\n      the clear button shifts left of it (`--spin-clear` on the wrapper widens the gutter). It\r\n      still outranks a projected addon or a decorative end icon \u2014 those share one slot with it\r\n      and only get it when there is nothing to clear.\r\n    -->\r\n    @if (showClear() && !isPasswordField()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"gog-input__icon gog-inline-center gog-input__icon--end gog-input__icon--action gog-input__clear\"\r\n        [attr.aria-label]=\"resolvedClearLabel()\"\r\n        (click)=\"clearValue($event)\"\r\n      >\r\n        <gog-icon name=\"close\" />\r\n      </button>\r\n    } @else if (!hasSpinButtons()) {\r\n      @if (addonEnd() && !isPasswordField()) {\r\n        <span class=\"gog-input__icon gog-inline-center gog-input__icon--end gog-input__addon\">\r\n          <ng-content select=\"[gogInputAddonEnd]\" />\r\n        </span>\r\n      } @else if (effectiveIconEnd(); as iconEndName) {\r\n        @if (isPasswordField()) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"gog-input__icon gog-inline-center gog-input__icon--end gog-input__icon--action\"\r\n            [attr.aria-label]=\"effectiveIconEndLabel() || null\"\r\n            (click)=\"togglePasswordVisibility()\"\r\n          >\r\n            <gog-icon [name]=\"iconEndName\" />\r\n          </button>\r\n        } @else {\r\n          <span class=\"gog-input__icon gog-inline-center gog-input__icon--end\" aria-hidden=\"true\">\r\n            <gog-icon [name]=\"iconEndName\" />\r\n          </span>\r\n        }\r\n      }\r\n    }\r\n  </div>\r\n  @if (visibleError()) {\r\n    <span class=\"gog-input__error\" [attr.id]=\"errorId()\" role=\"alert\">{{ visibleError() }}</span>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.gog-input-wrapper{display:flex;flex-direction:column;gap:var(--gog-input-gap);width:100%}:host(.gog-host--auto-width){width:fit-content}:host(.gog-host--auto-width) .gog-input-wrapper{width:fit-content}.gog-input__label{font-family:var(--gog-input-label-font-family);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing)}.gog-input__field-container{position:relative;display:flex;align-items:center}.gog-input__field{width:100%;padding:var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-input-pr, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))) var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-input-pl, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x)));font-family:var(--gog-input-font-family);font-size:var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-input-field-color);background-color:var(--gog-input-field-bg);border:var(--gog-input-field-border-width) var(--gog-input-field-border-style) var(--gog-input-field-border);border-radius:var(--gog-input-radius);outline:none;transition:border-color var(--gog-input-transition-duration) var(--gog-easing),box-shadow var(--gog-input-transition-duration) var(--gog-easing)}.gog-input-wrapper--xsm{--gog-input-size-padding-y: var(--gog-field-xsm-padding-y);--gog-input-size-padding-x: var(--gog-field-xsm-padding-x);--gog-input-size-font-size: var(--gog-field-xsm-font-size);--gog-input-size-icon-offset: var(--gog-field-xsm-icon-offset);--gog-input-size-icon-inset: var(--gog-field-xsm-icon-inset)}.gog-input-wrapper--sm{--gog-input-size-padding-y: var(--gog-field-sm-padding-y);--gog-input-size-padding-x: var(--gog-field-sm-padding-x);--gog-input-size-font-size: var(--gog-field-sm-font-size);--gog-input-size-icon-offset: var(--gog-field-sm-icon-offset);--gog-input-size-icon-inset: var(--gog-field-sm-icon-inset)}.gog-input-wrapper--lg{--gog-input-size-padding-y: var(--gog-field-lg-padding-y);--gog-input-size-padding-x: var(--gog-field-lg-padding-x);--gog-input-size-font-size: var(--gog-field-lg-font-size);--gog-input-size-icon-offset: var(--gog-field-lg-icon-offset);--gog-input-size-icon-inset: var(--gog-field-lg-icon-inset)}.gog-input-wrapper--slg{--gog-input-size-padding-y: var(--gog-field-slg-padding-y);--gog-input-size-padding-x: var(--gog-field-slg-padding-x);--gog-input-size-font-size: var(--gog-field-slg-font-size);--gog-input-size-icon-offset: var(--gog-field-slg-icon-offset);--gog-input-size-icon-inset: var(--gog-field-slg-icon-inset)}.gog-input-wrapper--icon-start .gog-input__field-container{--gog-input-pl: var(--gog-input-size-icon-inset, var(--gog-field-md-icon-inset))}.gog-input-wrapper--icon-end .gog-input__field-container{--gog-input-pr: var(--gog-input-size-icon-inset, var(--gog-field-md-icon-inset))}.gog-input-wrapper--spin-clear .gog-input__field-container{--gog-input-pr: calc( var(--gog-input-size-icon-inset, var(--gog-field-md-icon-inset)) + var(--gog-input-spin-width) )}.gog-input-wrapper--spin-clear .gog-input__clear{inset-inline-end:calc(var(--gog-input-size-icon-offset, var(--gog-field-md-icon-offset)) + var(--gog-input-spin-width))}.gog-input__field::placeholder{color:var(--gog-input-placeholder-color)}.gog-input__field:focus{border-color:var(--gog-input-focus-border);box-shadow:var(--gog-input-focus-glow)}.gog-input__field:focus-visible{outline:var(--gog-input-focus-ring-width) solid var(--gog-input-focus-border);outline-offset:var(--gog-input-focus-ring-offset)}.gog-input__field:disabled{opacity:var(--gog-input-disabled-opacity);cursor:not-allowed}.gog-input__field--error{border-color:var(--gog-input-error-color)}.gog-input__icon{position:absolute;color:var(--gog-input-icon-color);font-size:var(--gog-input-size-font-size, var(--gog-field-md-font-size));pointer-events:none;line-height:1}.gog-input__addon{pointer-events:auto}.gog-input__icon--action{padding:0;background:none;border:none;cursor:pointer;pointer-events:auto;border-radius:var(--gog-input-icon-action-radius);color:var(--gog-input-icon-color);transition:color var(--gog-input-transition-duration) var(--gog-easing)}.gog-input__icon--action:hover{color:var(--gog-input-icon-hover-color)}.gog-input__icon--action:focus-visible{outline:var(--gog-input-icon-focus-ring-width) solid var(--gog-input-icon-hover-color);outline-offset:var(--gog-input-focus-ring-offset)}.gog-input__icon--start{inset-inline-start:var(--gog-input-size-icon-offset, var(--gog-field-md-icon-offset))}.gog-input__icon--end{inset-inline-end:var(--gog-input-size-icon-offset, var(--gog-field-md-icon-offset))}.gog-input__error{font-family:var(--gog-input-font-family);font-size:var(--gog-input-error-font-size);color:var(--gog-input-error-color);margin-top:var(--gog-input-error-offset)}.gog-input__field--spin-hidden::-webkit-inner-spin-button,.gog-input__field--spin-hidden::-webkit-outer-spin-button{margin:0;-webkit-appearance:none;appearance:none}.gog-input__field--spin-hidden{appearance:textfield;-moz-appearance:textfield}.gog-input__spin{position:absolute;top:0;bottom:0;inset-inline-end:0;display:flex;flex-direction:column;pointer-events:auto;border-inline-start:var(--gog-input-field-border-width) var(--gog-input-field-border-style) var(--gog-input-field-border)}.gog-input__spin-btn{display:flex;flex:1 1 0;align-items:center;justify-content:center;width:var(--gog-input-spin-width);padding:0;border:none;background:none;color:var(--gog-input-icon-color);line-height:0;cursor:pointer;transition:color var(--gog-input-transition-duration) var(--gog-easing),background-color var(--gog-input-transition-duration) var(--gog-easing)}.gog-input__spin-btn--up{border-start-end-radius:calc(var(--gog-input-radius) - var(--gog-input-field-border-width));border-block-end:var(--gog-input-field-border-width) var(--gog-input-field-border-style) var(--gog-input-field-border)}.gog-input__spin-btn--down{border-end-end-radius:calc(var(--gog-input-radius) - var(--gog-input-field-border-width))}.gog-input__spin-btn gog-icon{font-size:calc(var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size))) * .7)}.gog-input__spin-btn:hover:not(:disabled){color:var(--gog-input-icon-hover-color);background-color:var(--gog-input-spin-hover-bg)}.gog-input__spin-btn:focus-visible{outline:var(--gog-input-icon-focus-ring-width) solid var(--gog-input-icon-hover-color);outline-offset:calc(-1 * var(--gog-input-icon-focus-ring-width))}.gog-input__spin-btn:disabled{opacity:var(--gog-input-disabled-opacity);cursor:not-allowed}.gog-input__label--float{position:absolute;inset-inline-start:var(--gog-input-pl, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - var(--gog-input-pl, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))) - var(--gog-input-pr, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;color:var(--gog-input-placeholder-color);font-size:var(--gog-input-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-input-transition-duration) var(--gog-easing),font-size var(--gog-input-transition-duration) var(--gog-easing),color var(--gog-input-transition-duration) var(--gog-easing),top var(--gog-input-transition-duration) var(--gog-easing),background-color var(--gog-input-transition-duration) var(--gog-easing)}.gog-input-wrapper--float-in,.gog-input-wrapper--float-on{--gog-input-float-top-padding: calc(var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-input-float-label-reserve))}.gog-input-wrapper--float-in .gog-input__field,.gog-input-wrapper--float-on .gog-input__field{padding-top:var(--gog-input-float-top-padding)}.gog-input-wrapper--float-in .gog-input__label--float,.gog-input-wrapper--float-on .gog-input__label--float{top:var(--gog-input-float-top-padding);transform:none}.gog-input-wrapper--float-in.gog-input-wrapper--floated .gog-input__label--float{top:var(--gog-input-float-label-in-top);transform:translateY(0);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing)}.gog-input-wrapper--float-on.gog-input-wrapper--floated .gog-input__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing);background-color:var(--gog-input-float-label-on-bg, var(--gog-input-field-bg));padding:0 4px;inset-inline-start:calc(var(--gog-input-pl, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-input-wrapper--float-over.gog-input-wrapper--floated .gog-input__label--float{top:calc(-1 * var(--gog-input-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing)}.gog-input-wrapper--float-over .gog-input__field-container{margin-top:var(--gog-input-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-input__field,.gog-input__label--float{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: InputfieldComponent, isStandalone: true, selector: "gog-inputfield", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "minlength", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, inputMode: { classPropertyName: "inputMode", publicName: "inputMode", isSignal: true, isRequired: false, transformFunction: null }, spellcheck: { classPropertyName: "spellcheck", publicName: "spellcheck", 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 }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, showSpinButtons: { classPropertyName: "showSpinButtons", publicName: "showSpinButtons", isSignal: true, isRequired: false, transformFunction: null }, incrementLabel: { classPropertyName: "incrementLabel", publicName: "incrementLabel", isSignal: true, isRequired: false, transformFunction: null }, decrementLabel: { classPropertyName: "decrementLabel", publicName: "decrementLabel", 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 }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, iconStart: { classPropertyName: "iconStart", publicName: "iconStart", isSignal: true, isRequired: false, transformFunction: null }, iconEnd: { classPropertyName: "iconEnd", publicName: "iconEnd", isSignal: true, isRequired: false, transformFunction: null }, showPasswordLabel: { classPropertyName: "showPasswordLabel", publicName: "showPasswordLabel", isSignal: true, isRequired: false, transformFunction: null }, hidePasswordLabel: { classPropertyName: "hidePasswordLabel", publicName: "hidePasswordLabel", 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 }, floatLabel: { classPropertyName: "floatLabel", publicName: "floatLabel", isSignal: true, isRequired: false, transformFunction: null }, floatLabelShowPlaceholder: { classPropertyName: "floatLabelShowPlaceholder", publicName: "floatLabelShowPlaceholder", 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()" } }, queries: [{ propertyName: "addonStart", first: true, predicate: GogInputAddonStartDirective, descendants: true, isSignal: true }, { propertyName: "addonEnd", first: true, predicate: GogInputAddonEndDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  class=\"gog-input-wrapper gog-contained-layout\"\r\n  [class]=\"sizeClass()\"\r\n  [class.gog-input-wrapper--icon-start]=\"hasIconStart()\"\r\n  [class.gog-input-wrapper--icon-end]=\"hasIconEnd() || hasSpinButtons()\"\r\n  [class.gog-input-wrapper--spin-clear]=\"hasSpinAndClear()\"\r\n  [class.gog-input-wrapper--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n  [class.gog-input-wrapper--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n  [class.gog-input-wrapper--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n  [class.gog-input-wrapper--floated]=\"isFloatLabelFloated()\"\r\n>\r\n  @if (label() && resolvedFloatLabel() === 'none') {\r\n    <label class=\"gog-input__label\" [attr.for]=\"resolvedInputId()\">{{ label() }}</label>\r\n  }\r\n  <div class=\"gog-input__field-container\">\r\n    @if (label() && isFloatLabelActive()) {\r\n      <label class=\"gog-input__label gog-input__label--float\" [attr.for]=\"resolvedInputId()\">{{\r\n        label()\r\n      }}</label>\r\n    }\r\n    @if (addonStart()) {\r\n      <span class=\"gog-input__icon gog-inline-center gog-input__icon--start gog-input__addon\">\r\n        <ng-content select=\"[gogInputAddonStart]\" />\r\n      </span>\r\n    } @else if (iconStart(); as iconStartName) {\r\n      <span class=\"gog-input__icon gog-inline-center gog-input__icon--start\" aria-hidden=\"true\">\r\n        <gog-icon [name]=\"iconStartName\" />\r\n      </span>\r\n    }\r\n    <input\r\n      class=\"gog-input__field\"\r\n      [class.gog-input__field--error]=\"hasError()\"\r\n      [class.gog-input__field--spin-hidden]=\"isNumberField()\"\r\n      [attr.id]=\"resolvedInputId()\"\r\n      [type]=\"effectiveType()\"\r\n      [attr.name]=\"name() || null\"\r\n      [placeholder]=\"effectivePlaceholder()\"\r\n      [value]=\"value()\"\r\n      [disabled]=\"isDisabled()\"\r\n      [readOnly]=\"readonly()\"\r\n      [autocomplete]=\"effectiveAutocomplete()\"\r\n      [attr.min]=\"min()\"\r\n      [attr.max]=\"max()\"\r\n      [attr.step]=\"step()\"\r\n      [attr.maxlength]=\"maxlength()\"\r\n      [attr.minlength]=\"minlength()\"\r\n      [attr.pattern]=\"pattern() || null\"\r\n      [attr.inputmode]=\"inputMode()\"\r\n      [attr.spellcheck]=\"spellcheck()\"\r\n      [attr.aria-invalid]=\"hasError()\"\r\n      [attr.aria-describedby]=\"errorId()\"\r\n      (input)=\"onInput($event)\"\r\n      (focus)=\"onFocus()\"\r\n      (blur)=\"onBlur()\"\r\n    />\r\n    <!--\r\n      A password field's built-in show/hide toggle owns the end slot: it is the only control\r\n      that reveals the value, so a projected addon must not be able to displace it.\r\n    -->\r\n    @if (hasSpinButtons()) {\r\n      <span class=\"gog-input__spin\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-input__spin-btn gog-input__spin-btn--up\"\r\n          tabindex=\"-1\"\r\n          [attr.aria-label]=\"resolvedIncrementLabel()\"\r\n          [disabled]=\"isDisabled() || isAtMax()\"\r\n          (mousedown)=\"$event.preventDefault()\"\r\n          (click)=\"stepValue(1)\"\r\n        >\r\n          <gog-icon name=\"chevron-up\" />\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-input__spin-btn gog-input__spin-btn--down\"\r\n          tabindex=\"-1\"\r\n          [attr.aria-label]=\"resolvedDecrementLabel()\"\r\n          [disabled]=\"isDisabled() || isAtMin()\"\r\n          (mousedown)=\"$event.preventDefault()\"\r\n          (click)=\"stepValue(-1)\"\r\n        >\r\n          <gog-icon name=\"chevron-down\" />\r\n        </button>\r\n      </span>\r\n    }\r\n    <!--\r\n      The clear button sits outside the stepper's `@if` rather than in an `@else` branch: on a\r\n      number field the two have to coexist, and the stepper owns the field's right edge while\r\n      the clear button shifts left of it (`--spin-clear` on the wrapper widens the gutter). It\r\n      still outranks a projected addon or a decorative end icon \u2014 those share one slot with it\r\n      and only get it when there is nothing to clear.\r\n    -->\r\n    @if (showClear() && !isPasswordField()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"gog-input__icon gog-inline-center gog-input__icon--end gog-input__icon--action gog-input__clear\"\r\n        [attr.aria-label]=\"resolvedClearLabel()\"\r\n        (click)=\"clearValue($event)\"\r\n      >\r\n        <gog-icon name=\"close\" />\r\n      </button>\r\n    } @else if (!hasSpinButtons()) {\r\n      @if (addonEnd() && !isPasswordField()) {\r\n        <span class=\"gog-input__icon gog-inline-center gog-input__icon--end gog-input__addon\">\r\n          <ng-content select=\"[gogInputAddonEnd]\" />\r\n        </span>\r\n      } @else if (effectiveIconEnd(); as iconEndName) {\r\n        @if (isPasswordField()) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"gog-input__icon gog-inline-center gog-input__icon--end gog-input__icon--action\"\r\n            [attr.aria-label]=\"effectiveIconEndLabel() || null\"\r\n            (click)=\"togglePasswordVisibility()\"\r\n          >\r\n            <gog-icon [name]=\"iconEndName\" />\r\n          </button>\r\n        } @else {\r\n          <span class=\"gog-input__icon gog-inline-center gog-input__icon--end\" aria-hidden=\"true\">\r\n            <gog-icon [name]=\"iconEndName\" />\r\n          </span>\r\n        }\r\n      }\r\n    }\r\n  </div>\r\n  @if (visibleError()) {\r\n    <span class=\"gog-input__error\" [attr.id]=\"errorId()\" role=\"alert\">{{ visibleError() }}</span>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.gog-input-wrapper{display:flex;flex-direction:column;gap:var(--gog-input-gap);width:100%}:host(.gog-host--auto-width){width:fit-content}:host(.gog-host--auto-width) .gog-input-wrapper{width:fit-content}.gog-input__label{font-family:var(--gog-input-label-font-family);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing)}.gog-input__field-container{position:relative;display:flex;align-items:center}.gog-input__field{width:100%;padding-block:var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y)));padding-inline:var(--gog-input-ps, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))) var(--gog-input-pe, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x)));font-family:var(--gog-input-font-family);font-size:var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-input-field-color);background-color:var(--gog-input-field-bg);border:var(--gog-input-field-border-width) var(--gog-input-field-border-style) var(--gog-input-field-border);border-radius:var(--gog-input-radius);outline:none;transition:border-color var(--gog-input-transition-duration) var(--gog-easing),box-shadow var(--gog-input-transition-duration) var(--gog-easing)}.gog-input-wrapper--xsm{--gog-input-size-padding-y: var(--gog-field-xsm-padding-y);--gog-input-size-padding-x: var(--gog-field-xsm-padding-x);--gog-input-size-font-size: var(--gog-field-xsm-font-size);--gog-input-size-icon-offset: var(--gog-field-xsm-icon-offset);--gog-input-size-icon-inset: var(--gog-field-xsm-icon-inset)}.gog-input-wrapper--sm{--gog-input-size-padding-y: var(--gog-field-sm-padding-y);--gog-input-size-padding-x: var(--gog-field-sm-padding-x);--gog-input-size-font-size: var(--gog-field-sm-font-size);--gog-input-size-icon-offset: var(--gog-field-sm-icon-offset);--gog-input-size-icon-inset: var(--gog-field-sm-icon-inset)}.gog-input-wrapper--lg{--gog-input-size-padding-y: var(--gog-field-lg-padding-y);--gog-input-size-padding-x: var(--gog-field-lg-padding-x);--gog-input-size-font-size: var(--gog-field-lg-font-size);--gog-input-size-icon-offset: var(--gog-field-lg-icon-offset);--gog-input-size-icon-inset: var(--gog-field-lg-icon-inset)}.gog-input-wrapper--slg{--gog-input-size-padding-y: var(--gog-field-slg-padding-y);--gog-input-size-padding-x: var(--gog-field-slg-padding-x);--gog-input-size-font-size: var(--gog-field-slg-font-size);--gog-input-size-icon-offset: var(--gog-field-slg-icon-offset);--gog-input-size-icon-inset: var(--gog-field-slg-icon-inset)}.gog-input-wrapper--icon-start .gog-input__field-container{--gog-input-ps: var(--gog-input-size-icon-inset, var(--gog-field-md-icon-inset))}.gog-input-wrapper--icon-end .gog-input__field-container{--gog-input-pe: var(--gog-input-size-icon-inset, var(--gog-field-md-icon-inset))}.gog-input-wrapper--spin-clear .gog-input__field-container{--gog-input-pe: calc( var(--gog-input-size-icon-inset, var(--gog-field-md-icon-inset)) + var(--gog-input-spin-width) )}.gog-input-wrapper--spin-clear .gog-input__clear{inset-inline-end:calc(var(--gog-input-size-icon-offset, var(--gog-field-md-icon-offset)) + var(--gog-input-spin-width))}.gog-input__field::placeholder{color:var(--gog-input-placeholder-color)}.gog-input__field:focus{border-color:var(--gog-input-focus-border);box-shadow:var(--gog-input-focus-glow)}.gog-input__field:focus-visible{outline:var(--gog-input-focus-ring-width) solid var(--gog-input-focus-border);outline-offset:var(--gog-input-focus-ring-offset)}.gog-input__field:disabled{opacity:var(--gog-input-disabled-opacity);cursor:not-allowed}.gog-input__field--error{border-color:var(--gog-input-error-color)}.gog-input__icon{position:absolute;color:var(--gog-input-icon-color);font-size:var(--gog-input-size-font-size, var(--gog-field-md-font-size));pointer-events:none;line-height:1}.gog-input__addon{pointer-events:auto}.gog-input__icon--action{padding:0;background:none;border:none;cursor:pointer;pointer-events:auto;border-radius:var(--gog-input-icon-action-radius);color:var(--gog-input-icon-color);transition:color var(--gog-input-transition-duration) var(--gog-easing)}.gog-input__icon--action:hover{color:var(--gog-input-icon-hover-color)}.gog-input__icon--action:focus-visible{outline:var(--gog-input-icon-focus-ring-width) solid var(--gog-input-icon-hover-color);outline-offset:var(--gog-input-focus-ring-offset)}.gog-input__icon--start{inset-inline-start:var(--gog-input-size-icon-offset, var(--gog-field-md-icon-offset))}.gog-input__icon--end{inset-inline-end:var(--gog-input-size-icon-offset, var(--gog-field-md-icon-offset))}.gog-input__error{font-family:var(--gog-input-font-family);font-size:var(--gog-input-error-font-size);color:var(--gog-input-error-color);margin-top:var(--gog-input-error-offset)}.gog-input__field--spin-hidden::-webkit-inner-spin-button,.gog-input__field--spin-hidden::-webkit-outer-spin-button{margin:0;-webkit-appearance:none;appearance:none}.gog-input__field--spin-hidden{appearance:textfield;-moz-appearance:textfield}.gog-input__spin{position:absolute;top:0;bottom:0;inset-inline-end:0;display:flex;flex-direction:column;pointer-events:auto;border-inline-start:var(--gog-input-field-border-width) var(--gog-input-field-border-style) var(--gog-input-field-border)}.gog-input__spin-btn{display:flex;flex:1 1 0;align-items:center;justify-content:center;width:var(--gog-input-spin-width);padding:0;border:none;background:none;color:var(--gog-input-icon-color);line-height:0;cursor:pointer;transition:color var(--gog-input-transition-duration) var(--gog-easing),background-color var(--gog-input-transition-duration) var(--gog-easing)}.gog-input__spin-btn--up{border-start-end-radius:calc(var(--gog-input-radius) - var(--gog-input-field-border-width));border-block-end:var(--gog-input-field-border-width) var(--gog-input-field-border-style) var(--gog-input-field-border)}.gog-input__spin-btn--down{border-end-end-radius:calc(var(--gog-input-radius) - var(--gog-input-field-border-width))}.gog-input__spin-btn gog-icon{font-size:calc(var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size))) * .7)}.gog-input__spin-btn:hover:not(:disabled){color:var(--gog-input-icon-hover-color);background-color:var(--gog-input-spin-hover-bg)}.gog-input__spin-btn:focus-visible{outline:var(--gog-input-icon-focus-ring-width) solid var(--gog-input-icon-hover-color);outline-offset:calc(-1 * var(--gog-input-icon-focus-ring-width))}.gog-input__spin-btn:disabled{opacity:var(--gog-input-disabled-opacity);cursor:not-allowed}.gog-input__label--float{position:absolute;inset-inline-start:var(--gog-input-ps, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - var(--gog-input-ps, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))) - var(--gog-input-pe, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;color:var(--gog-input-placeholder-color);font-size:var(--gog-input-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-input-transition-duration) var(--gog-easing),font-size var(--gog-input-transition-duration) var(--gog-easing),color var(--gog-input-transition-duration) var(--gog-easing),top var(--gog-input-transition-duration) var(--gog-easing),background-color var(--gog-input-transition-duration) var(--gog-easing)}.gog-input-wrapper--float-in,.gog-input-wrapper--float-on{--gog-input-float-top-padding: calc(var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-input-float-label-reserve))}.gog-input-wrapper--float-in .gog-input__field,.gog-input-wrapper--float-on .gog-input__field{padding-top:var(--gog-input-float-top-padding)}.gog-input-wrapper--float-in .gog-input__label--float,.gog-input-wrapper--float-on .gog-input__label--float{top:var(--gog-input-float-top-padding);transform:none}.gog-input-wrapper--float-in.gog-input-wrapper--floated .gog-input__label--float{top:var(--gog-input-float-label-in-top);transform:translateY(0);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing)}.gog-input-wrapper--float-on.gog-input-wrapper--floated .gog-input__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing);background-color:var(--gog-input-float-label-on-bg, var(--gog-input-field-bg));padding:0 4px;inset-inline-start:calc(var(--gog-input-ps, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-input-wrapper--float-over.gog-input-wrapper--floated .gog-input__label--float{top:calc(-1 * var(--gog-input-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing)}.gog-input-wrapper--float-over .gog-input__field-container{margin-top:var(--gog-input-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-input__field,.gog-input__label--float{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: InputfieldComponent, decorators: [{
             type: Component,
@@ -5625,7 +5655,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         // full-width class: this field is full width by default, so the class only appears
                         // once a consumer opts *out* of that.
                         '[class.gog-host--auto-width]': '!fullWidth()',
-                    }, template: "<div\r\n  class=\"gog-input-wrapper gog-contained-layout\"\r\n  [class]=\"sizeClass()\"\r\n  [class.gog-input-wrapper--icon-start]=\"hasIconStart()\"\r\n  [class.gog-input-wrapper--icon-end]=\"hasIconEnd() || hasSpinButtons()\"\r\n  [class.gog-input-wrapper--spin-clear]=\"hasSpinAndClear()\"\r\n  [class.gog-input-wrapper--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n  [class.gog-input-wrapper--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n  [class.gog-input-wrapper--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n  [class.gog-input-wrapper--floated]=\"isFloatLabelFloated()\"\r\n>\r\n  @if (label() && resolvedFloatLabel() === 'none') {\r\n    <label class=\"gog-input__label\" [attr.for]=\"resolvedInputId()\">{{ label() }}</label>\r\n  }\r\n  <div class=\"gog-input__field-container\">\r\n    @if (label() && isFloatLabelActive()) {\r\n      <label class=\"gog-input__label gog-input__label--float\" [attr.for]=\"resolvedInputId()\">{{\r\n        label()\r\n      }}</label>\r\n    }\r\n    @if (addonStart()) {\r\n      <span class=\"gog-input__icon gog-inline-center gog-input__icon--start gog-input__addon\">\r\n        <ng-content select=\"[gogInputAddonStart]\" />\r\n      </span>\r\n    } @else if (iconStart(); as iconStartName) {\r\n      <span class=\"gog-input__icon gog-inline-center gog-input__icon--start\" aria-hidden=\"true\">\r\n        <gog-icon [name]=\"iconStartName\" />\r\n      </span>\r\n    }\r\n    <input\r\n      class=\"gog-input__field\"\r\n      [class.gog-input__field--error]=\"hasError()\"\r\n      [class.gog-input__field--spin-hidden]=\"isNumberField()\"\r\n      [attr.id]=\"resolvedInputId()\"\r\n      [type]=\"effectiveType()\"\r\n      [attr.name]=\"name() || null\"\r\n      [placeholder]=\"effectivePlaceholder()\"\r\n      [value]=\"value()\"\r\n      [disabled]=\"isDisabled()\"\r\n      [readOnly]=\"readonly()\"\r\n      [autocomplete]=\"effectiveAutocomplete()\"\r\n      [attr.min]=\"min()\"\r\n      [attr.max]=\"max()\"\r\n      [attr.step]=\"step()\"\r\n      [attr.maxlength]=\"maxlength()\"\r\n      [attr.minlength]=\"minlength()\"\r\n      [attr.pattern]=\"pattern() || null\"\r\n      [attr.inputmode]=\"inputMode()\"\r\n      [attr.spellcheck]=\"spellcheck()\"\r\n      [attr.aria-invalid]=\"hasError()\"\r\n      [attr.aria-describedby]=\"errorId()\"\r\n      (input)=\"onInput($event)\"\r\n      (focus)=\"onFocus()\"\r\n      (blur)=\"onBlur()\"\r\n    />\r\n    <!--\r\n      A password field's built-in show/hide toggle owns the end slot: it is the only control\r\n      that reveals the value, so a projected addon must not be able to displace it.\r\n    -->\r\n    @if (hasSpinButtons()) {\r\n      <span class=\"gog-input__spin\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-input__spin-btn gog-input__spin-btn--up\"\r\n          tabindex=\"-1\"\r\n          [attr.aria-label]=\"resolvedIncrementLabel()\"\r\n          [disabled]=\"isDisabled() || isAtMax()\"\r\n          (mousedown)=\"$event.preventDefault()\"\r\n          (click)=\"stepValue(1)\"\r\n        >\r\n          <gog-icon name=\"chevron-up\" />\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-input__spin-btn gog-input__spin-btn--down\"\r\n          tabindex=\"-1\"\r\n          [attr.aria-label]=\"resolvedDecrementLabel()\"\r\n          [disabled]=\"isDisabled() || isAtMin()\"\r\n          (mousedown)=\"$event.preventDefault()\"\r\n          (click)=\"stepValue(-1)\"\r\n        >\r\n          <gog-icon name=\"chevron-down\" />\r\n        </button>\r\n      </span>\r\n    }\r\n    <!--\r\n      The clear button sits outside the stepper's `@if` rather than in an `@else` branch: on a\r\n      number field the two have to coexist, and the stepper owns the field's right edge while\r\n      the clear button shifts left of it (`--spin-clear` on the wrapper widens the gutter). It\r\n      still outranks a projected addon or a decorative end icon \u2014 those share one slot with it\r\n      and only get it when there is nothing to clear.\r\n    -->\r\n    @if (showClear() && !isPasswordField()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"gog-input__icon gog-inline-center gog-input__icon--end gog-input__icon--action gog-input__clear\"\r\n        [attr.aria-label]=\"resolvedClearLabel()\"\r\n        (click)=\"clearValue($event)\"\r\n      >\r\n        <gog-icon name=\"close\" />\r\n      </button>\r\n    } @else if (!hasSpinButtons()) {\r\n      @if (addonEnd() && !isPasswordField()) {\r\n        <span class=\"gog-input__icon gog-inline-center gog-input__icon--end gog-input__addon\">\r\n          <ng-content select=\"[gogInputAddonEnd]\" />\r\n        </span>\r\n      } @else if (effectiveIconEnd(); as iconEndName) {\r\n        @if (isPasswordField()) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"gog-input__icon gog-inline-center gog-input__icon--end gog-input__icon--action\"\r\n            [attr.aria-label]=\"effectiveIconEndLabel() || null\"\r\n            (click)=\"togglePasswordVisibility()\"\r\n          >\r\n            <gog-icon [name]=\"iconEndName\" />\r\n          </button>\r\n        } @else {\r\n          <span class=\"gog-input__icon gog-inline-center gog-input__icon--end\" aria-hidden=\"true\">\r\n            <gog-icon [name]=\"iconEndName\" />\r\n          </span>\r\n        }\r\n      }\r\n    }\r\n  </div>\r\n  @if (visibleError()) {\r\n    <span class=\"gog-input__error\" [attr.id]=\"errorId()\" role=\"alert\">{{ visibleError() }}</span>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.gog-input-wrapper{display:flex;flex-direction:column;gap:var(--gog-input-gap);width:100%}:host(.gog-host--auto-width){width:fit-content}:host(.gog-host--auto-width) .gog-input-wrapper{width:fit-content}.gog-input__label{font-family:var(--gog-input-label-font-family);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing)}.gog-input__field-container{position:relative;display:flex;align-items:center}.gog-input__field{width:100%;padding:var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-input-pr, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))) var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-input-pl, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x)));font-family:var(--gog-input-font-family);font-size:var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-input-field-color);background-color:var(--gog-input-field-bg);border:var(--gog-input-field-border-width) var(--gog-input-field-border-style) var(--gog-input-field-border);border-radius:var(--gog-input-radius);outline:none;transition:border-color var(--gog-input-transition-duration) var(--gog-easing),box-shadow var(--gog-input-transition-duration) var(--gog-easing)}.gog-input-wrapper--xsm{--gog-input-size-padding-y: var(--gog-field-xsm-padding-y);--gog-input-size-padding-x: var(--gog-field-xsm-padding-x);--gog-input-size-font-size: var(--gog-field-xsm-font-size);--gog-input-size-icon-offset: var(--gog-field-xsm-icon-offset);--gog-input-size-icon-inset: var(--gog-field-xsm-icon-inset)}.gog-input-wrapper--sm{--gog-input-size-padding-y: var(--gog-field-sm-padding-y);--gog-input-size-padding-x: var(--gog-field-sm-padding-x);--gog-input-size-font-size: var(--gog-field-sm-font-size);--gog-input-size-icon-offset: var(--gog-field-sm-icon-offset);--gog-input-size-icon-inset: var(--gog-field-sm-icon-inset)}.gog-input-wrapper--lg{--gog-input-size-padding-y: var(--gog-field-lg-padding-y);--gog-input-size-padding-x: var(--gog-field-lg-padding-x);--gog-input-size-font-size: var(--gog-field-lg-font-size);--gog-input-size-icon-offset: var(--gog-field-lg-icon-offset);--gog-input-size-icon-inset: var(--gog-field-lg-icon-inset)}.gog-input-wrapper--slg{--gog-input-size-padding-y: var(--gog-field-slg-padding-y);--gog-input-size-padding-x: var(--gog-field-slg-padding-x);--gog-input-size-font-size: var(--gog-field-slg-font-size);--gog-input-size-icon-offset: var(--gog-field-slg-icon-offset);--gog-input-size-icon-inset: var(--gog-field-slg-icon-inset)}.gog-input-wrapper--icon-start .gog-input__field-container{--gog-input-pl: var(--gog-input-size-icon-inset, var(--gog-field-md-icon-inset))}.gog-input-wrapper--icon-end .gog-input__field-container{--gog-input-pr: var(--gog-input-size-icon-inset, var(--gog-field-md-icon-inset))}.gog-input-wrapper--spin-clear .gog-input__field-container{--gog-input-pr: calc( var(--gog-input-size-icon-inset, var(--gog-field-md-icon-inset)) + var(--gog-input-spin-width) )}.gog-input-wrapper--spin-clear .gog-input__clear{inset-inline-end:calc(var(--gog-input-size-icon-offset, var(--gog-field-md-icon-offset)) + var(--gog-input-spin-width))}.gog-input__field::placeholder{color:var(--gog-input-placeholder-color)}.gog-input__field:focus{border-color:var(--gog-input-focus-border);box-shadow:var(--gog-input-focus-glow)}.gog-input__field:focus-visible{outline:var(--gog-input-focus-ring-width) solid var(--gog-input-focus-border);outline-offset:var(--gog-input-focus-ring-offset)}.gog-input__field:disabled{opacity:var(--gog-input-disabled-opacity);cursor:not-allowed}.gog-input__field--error{border-color:var(--gog-input-error-color)}.gog-input__icon{position:absolute;color:var(--gog-input-icon-color);font-size:var(--gog-input-size-font-size, var(--gog-field-md-font-size));pointer-events:none;line-height:1}.gog-input__addon{pointer-events:auto}.gog-input__icon--action{padding:0;background:none;border:none;cursor:pointer;pointer-events:auto;border-radius:var(--gog-input-icon-action-radius);color:var(--gog-input-icon-color);transition:color var(--gog-input-transition-duration) var(--gog-easing)}.gog-input__icon--action:hover{color:var(--gog-input-icon-hover-color)}.gog-input__icon--action:focus-visible{outline:var(--gog-input-icon-focus-ring-width) solid var(--gog-input-icon-hover-color);outline-offset:var(--gog-input-focus-ring-offset)}.gog-input__icon--start{inset-inline-start:var(--gog-input-size-icon-offset, var(--gog-field-md-icon-offset))}.gog-input__icon--end{inset-inline-end:var(--gog-input-size-icon-offset, var(--gog-field-md-icon-offset))}.gog-input__error{font-family:var(--gog-input-font-family);font-size:var(--gog-input-error-font-size);color:var(--gog-input-error-color);margin-top:var(--gog-input-error-offset)}.gog-input__field--spin-hidden::-webkit-inner-spin-button,.gog-input__field--spin-hidden::-webkit-outer-spin-button{margin:0;-webkit-appearance:none;appearance:none}.gog-input__field--spin-hidden{appearance:textfield;-moz-appearance:textfield}.gog-input__spin{position:absolute;top:0;bottom:0;inset-inline-end:0;display:flex;flex-direction:column;pointer-events:auto;border-inline-start:var(--gog-input-field-border-width) var(--gog-input-field-border-style) var(--gog-input-field-border)}.gog-input__spin-btn{display:flex;flex:1 1 0;align-items:center;justify-content:center;width:var(--gog-input-spin-width);padding:0;border:none;background:none;color:var(--gog-input-icon-color);line-height:0;cursor:pointer;transition:color var(--gog-input-transition-duration) var(--gog-easing),background-color var(--gog-input-transition-duration) var(--gog-easing)}.gog-input__spin-btn--up{border-start-end-radius:calc(var(--gog-input-radius) - var(--gog-input-field-border-width));border-block-end:var(--gog-input-field-border-width) var(--gog-input-field-border-style) var(--gog-input-field-border)}.gog-input__spin-btn--down{border-end-end-radius:calc(var(--gog-input-radius) - var(--gog-input-field-border-width))}.gog-input__spin-btn gog-icon{font-size:calc(var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size))) * .7)}.gog-input__spin-btn:hover:not(:disabled){color:var(--gog-input-icon-hover-color);background-color:var(--gog-input-spin-hover-bg)}.gog-input__spin-btn:focus-visible{outline:var(--gog-input-icon-focus-ring-width) solid var(--gog-input-icon-hover-color);outline-offset:calc(-1 * var(--gog-input-icon-focus-ring-width))}.gog-input__spin-btn:disabled{opacity:var(--gog-input-disabled-opacity);cursor:not-allowed}.gog-input__label--float{position:absolute;inset-inline-start:var(--gog-input-pl, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - var(--gog-input-pl, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))) - var(--gog-input-pr, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;color:var(--gog-input-placeholder-color);font-size:var(--gog-input-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-input-transition-duration) var(--gog-easing),font-size var(--gog-input-transition-duration) var(--gog-easing),color var(--gog-input-transition-duration) var(--gog-easing),top var(--gog-input-transition-duration) var(--gog-easing),background-color var(--gog-input-transition-duration) var(--gog-easing)}.gog-input-wrapper--float-in,.gog-input-wrapper--float-on{--gog-input-float-top-padding: calc(var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-input-float-label-reserve))}.gog-input-wrapper--float-in .gog-input__field,.gog-input-wrapper--float-on .gog-input__field{padding-top:var(--gog-input-float-top-padding)}.gog-input-wrapper--float-in .gog-input__label--float,.gog-input-wrapper--float-on .gog-input__label--float{top:var(--gog-input-float-top-padding);transform:none}.gog-input-wrapper--float-in.gog-input-wrapper--floated .gog-input__label--float{top:var(--gog-input-float-label-in-top);transform:translateY(0);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing)}.gog-input-wrapper--float-on.gog-input-wrapper--floated .gog-input__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing);background-color:var(--gog-input-float-label-on-bg, var(--gog-input-field-bg));padding:0 4px;inset-inline-start:calc(var(--gog-input-pl, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-input-wrapper--float-over.gog-input-wrapper--floated .gog-input__label--float{top:calc(-1 * var(--gog-input-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing)}.gog-input-wrapper--float-over .gog-input__field-container{margin-top:var(--gog-input-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-input__field,.gog-input__label--float{transition:none}}\n"] }]
+                    }, template: "<div\r\n  class=\"gog-input-wrapper gog-contained-layout\"\r\n  [class]=\"sizeClass()\"\r\n  [class.gog-input-wrapper--icon-start]=\"hasIconStart()\"\r\n  [class.gog-input-wrapper--icon-end]=\"hasIconEnd() || hasSpinButtons()\"\r\n  [class.gog-input-wrapper--spin-clear]=\"hasSpinAndClear()\"\r\n  [class.gog-input-wrapper--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n  [class.gog-input-wrapper--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n  [class.gog-input-wrapper--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n  [class.gog-input-wrapper--floated]=\"isFloatLabelFloated()\"\r\n>\r\n  @if (label() && resolvedFloatLabel() === 'none') {\r\n    <label class=\"gog-input__label\" [attr.for]=\"resolvedInputId()\">{{ label() }}</label>\r\n  }\r\n  <div class=\"gog-input__field-container\">\r\n    @if (label() && isFloatLabelActive()) {\r\n      <label class=\"gog-input__label gog-input__label--float\" [attr.for]=\"resolvedInputId()\">{{\r\n        label()\r\n      }}</label>\r\n    }\r\n    @if (addonStart()) {\r\n      <span class=\"gog-input__icon gog-inline-center gog-input__icon--start gog-input__addon\">\r\n        <ng-content select=\"[gogInputAddonStart]\" />\r\n      </span>\r\n    } @else if (iconStart(); as iconStartName) {\r\n      <span class=\"gog-input__icon gog-inline-center gog-input__icon--start\" aria-hidden=\"true\">\r\n        <gog-icon [name]=\"iconStartName\" />\r\n      </span>\r\n    }\r\n    <input\r\n      class=\"gog-input__field\"\r\n      [class.gog-input__field--error]=\"hasError()\"\r\n      [class.gog-input__field--spin-hidden]=\"isNumberField()\"\r\n      [attr.id]=\"resolvedInputId()\"\r\n      [type]=\"effectiveType()\"\r\n      [attr.name]=\"name() || null\"\r\n      [placeholder]=\"effectivePlaceholder()\"\r\n      [value]=\"value()\"\r\n      [disabled]=\"isDisabled()\"\r\n      [readOnly]=\"readonly()\"\r\n      [autocomplete]=\"effectiveAutocomplete()\"\r\n      [attr.min]=\"min()\"\r\n      [attr.max]=\"max()\"\r\n      [attr.step]=\"step()\"\r\n      [attr.maxlength]=\"maxlength()\"\r\n      [attr.minlength]=\"minlength()\"\r\n      [attr.pattern]=\"pattern() || null\"\r\n      [attr.inputmode]=\"inputMode()\"\r\n      [attr.spellcheck]=\"spellcheck()\"\r\n      [attr.aria-invalid]=\"hasError()\"\r\n      [attr.aria-describedby]=\"errorId()\"\r\n      (input)=\"onInput($event)\"\r\n      (focus)=\"onFocus()\"\r\n      (blur)=\"onBlur()\"\r\n    />\r\n    <!--\r\n      A password field's built-in show/hide toggle owns the end slot: it is the only control\r\n      that reveals the value, so a projected addon must not be able to displace it.\r\n    -->\r\n    @if (hasSpinButtons()) {\r\n      <span class=\"gog-input__spin\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-input__spin-btn gog-input__spin-btn--up\"\r\n          tabindex=\"-1\"\r\n          [attr.aria-label]=\"resolvedIncrementLabel()\"\r\n          [disabled]=\"isDisabled() || isAtMax()\"\r\n          (mousedown)=\"$event.preventDefault()\"\r\n          (click)=\"stepValue(1)\"\r\n        >\r\n          <gog-icon name=\"chevron-up\" />\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-input__spin-btn gog-input__spin-btn--down\"\r\n          tabindex=\"-1\"\r\n          [attr.aria-label]=\"resolvedDecrementLabel()\"\r\n          [disabled]=\"isDisabled() || isAtMin()\"\r\n          (mousedown)=\"$event.preventDefault()\"\r\n          (click)=\"stepValue(-1)\"\r\n        >\r\n          <gog-icon name=\"chevron-down\" />\r\n        </button>\r\n      </span>\r\n    }\r\n    <!--\r\n      The clear button sits outside the stepper's `@if` rather than in an `@else` branch: on a\r\n      number field the two have to coexist, and the stepper owns the field's right edge while\r\n      the clear button shifts left of it (`--spin-clear` on the wrapper widens the gutter). It\r\n      still outranks a projected addon or a decorative end icon \u2014 those share one slot with it\r\n      and only get it when there is nothing to clear.\r\n    -->\r\n    @if (showClear() && !isPasswordField()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"gog-input__icon gog-inline-center gog-input__icon--end gog-input__icon--action gog-input__clear\"\r\n        [attr.aria-label]=\"resolvedClearLabel()\"\r\n        (click)=\"clearValue($event)\"\r\n      >\r\n        <gog-icon name=\"close\" />\r\n      </button>\r\n    } @else if (!hasSpinButtons()) {\r\n      @if (addonEnd() && !isPasswordField()) {\r\n        <span class=\"gog-input__icon gog-inline-center gog-input__icon--end gog-input__addon\">\r\n          <ng-content select=\"[gogInputAddonEnd]\" />\r\n        </span>\r\n      } @else if (effectiveIconEnd(); as iconEndName) {\r\n        @if (isPasswordField()) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"gog-input__icon gog-inline-center gog-input__icon--end gog-input__icon--action\"\r\n            [attr.aria-label]=\"effectiveIconEndLabel() || null\"\r\n            (click)=\"togglePasswordVisibility()\"\r\n          >\r\n            <gog-icon [name]=\"iconEndName\" />\r\n          </button>\r\n        } @else {\r\n          <span class=\"gog-input__icon gog-inline-center gog-input__icon--end\" aria-hidden=\"true\">\r\n            <gog-icon [name]=\"iconEndName\" />\r\n          </span>\r\n        }\r\n      }\r\n    }\r\n  </div>\r\n  @if (visibleError()) {\r\n    <span class=\"gog-input__error\" [attr.id]=\"errorId()\" role=\"alert\">{{ visibleError() }}</span>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.gog-input-wrapper{display:flex;flex-direction:column;gap:var(--gog-input-gap);width:100%}:host(.gog-host--auto-width){width:fit-content}:host(.gog-host--auto-width) .gog-input-wrapper{width:fit-content}.gog-input__label{font-family:var(--gog-input-label-font-family);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing)}.gog-input__field-container{position:relative;display:flex;align-items:center}.gog-input__field{width:100%;padding-block:var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y)));padding-inline:var(--gog-input-ps, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))) var(--gog-input-pe, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x)));font-family:var(--gog-input-font-family);font-size:var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-input-field-color);background-color:var(--gog-input-field-bg);border:var(--gog-input-field-border-width) var(--gog-input-field-border-style) var(--gog-input-field-border);border-radius:var(--gog-input-radius);outline:none;transition:border-color var(--gog-input-transition-duration) var(--gog-easing),box-shadow var(--gog-input-transition-duration) var(--gog-easing)}.gog-input-wrapper--xsm{--gog-input-size-padding-y: var(--gog-field-xsm-padding-y);--gog-input-size-padding-x: var(--gog-field-xsm-padding-x);--gog-input-size-font-size: var(--gog-field-xsm-font-size);--gog-input-size-icon-offset: var(--gog-field-xsm-icon-offset);--gog-input-size-icon-inset: var(--gog-field-xsm-icon-inset)}.gog-input-wrapper--sm{--gog-input-size-padding-y: var(--gog-field-sm-padding-y);--gog-input-size-padding-x: var(--gog-field-sm-padding-x);--gog-input-size-font-size: var(--gog-field-sm-font-size);--gog-input-size-icon-offset: var(--gog-field-sm-icon-offset);--gog-input-size-icon-inset: var(--gog-field-sm-icon-inset)}.gog-input-wrapper--lg{--gog-input-size-padding-y: var(--gog-field-lg-padding-y);--gog-input-size-padding-x: var(--gog-field-lg-padding-x);--gog-input-size-font-size: var(--gog-field-lg-font-size);--gog-input-size-icon-offset: var(--gog-field-lg-icon-offset);--gog-input-size-icon-inset: var(--gog-field-lg-icon-inset)}.gog-input-wrapper--slg{--gog-input-size-padding-y: var(--gog-field-slg-padding-y);--gog-input-size-padding-x: var(--gog-field-slg-padding-x);--gog-input-size-font-size: var(--gog-field-slg-font-size);--gog-input-size-icon-offset: var(--gog-field-slg-icon-offset);--gog-input-size-icon-inset: var(--gog-field-slg-icon-inset)}.gog-input-wrapper--icon-start .gog-input__field-container{--gog-input-ps: var(--gog-input-size-icon-inset, var(--gog-field-md-icon-inset))}.gog-input-wrapper--icon-end .gog-input__field-container{--gog-input-pe: var(--gog-input-size-icon-inset, var(--gog-field-md-icon-inset))}.gog-input-wrapper--spin-clear .gog-input__field-container{--gog-input-pe: calc( var(--gog-input-size-icon-inset, var(--gog-field-md-icon-inset)) + var(--gog-input-spin-width) )}.gog-input-wrapper--spin-clear .gog-input__clear{inset-inline-end:calc(var(--gog-input-size-icon-offset, var(--gog-field-md-icon-offset)) + var(--gog-input-spin-width))}.gog-input__field::placeholder{color:var(--gog-input-placeholder-color)}.gog-input__field:focus{border-color:var(--gog-input-focus-border);box-shadow:var(--gog-input-focus-glow)}.gog-input__field:focus-visible{outline:var(--gog-input-focus-ring-width) solid var(--gog-input-focus-border);outline-offset:var(--gog-input-focus-ring-offset)}.gog-input__field:disabled{opacity:var(--gog-input-disabled-opacity);cursor:not-allowed}.gog-input__field--error{border-color:var(--gog-input-error-color)}.gog-input__icon{position:absolute;color:var(--gog-input-icon-color);font-size:var(--gog-input-size-font-size, var(--gog-field-md-font-size));pointer-events:none;line-height:1}.gog-input__addon{pointer-events:auto}.gog-input__icon--action{padding:0;background:none;border:none;cursor:pointer;pointer-events:auto;border-radius:var(--gog-input-icon-action-radius);color:var(--gog-input-icon-color);transition:color var(--gog-input-transition-duration) var(--gog-easing)}.gog-input__icon--action:hover{color:var(--gog-input-icon-hover-color)}.gog-input__icon--action:focus-visible{outline:var(--gog-input-icon-focus-ring-width) solid var(--gog-input-icon-hover-color);outline-offset:var(--gog-input-focus-ring-offset)}.gog-input__icon--start{inset-inline-start:var(--gog-input-size-icon-offset, var(--gog-field-md-icon-offset))}.gog-input__icon--end{inset-inline-end:var(--gog-input-size-icon-offset, var(--gog-field-md-icon-offset))}.gog-input__error{font-family:var(--gog-input-font-family);font-size:var(--gog-input-error-font-size);color:var(--gog-input-error-color);margin-top:var(--gog-input-error-offset)}.gog-input__field--spin-hidden::-webkit-inner-spin-button,.gog-input__field--spin-hidden::-webkit-outer-spin-button{margin:0;-webkit-appearance:none;appearance:none}.gog-input__field--spin-hidden{appearance:textfield;-moz-appearance:textfield}.gog-input__spin{position:absolute;top:0;bottom:0;inset-inline-end:0;display:flex;flex-direction:column;pointer-events:auto;border-inline-start:var(--gog-input-field-border-width) var(--gog-input-field-border-style) var(--gog-input-field-border)}.gog-input__spin-btn{display:flex;flex:1 1 0;align-items:center;justify-content:center;width:var(--gog-input-spin-width);padding:0;border:none;background:none;color:var(--gog-input-icon-color);line-height:0;cursor:pointer;transition:color var(--gog-input-transition-duration) var(--gog-easing),background-color var(--gog-input-transition-duration) var(--gog-easing)}.gog-input__spin-btn--up{border-start-end-radius:calc(var(--gog-input-radius) - var(--gog-input-field-border-width));border-block-end:var(--gog-input-field-border-width) var(--gog-input-field-border-style) var(--gog-input-field-border)}.gog-input__spin-btn--down{border-end-end-radius:calc(var(--gog-input-radius) - var(--gog-input-field-border-width))}.gog-input__spin-btn gog-icon{font-size:calc(var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size))) * .7)}.gog-input__spin-btn:hover:not(:disabled){color:var(--gog-input-icon-hover-color);background-color:var(--gog-input-spin-hover-bg)}.gog-input__spin-btn:focus-visible{outline:var(--gog-input-icon-focus-ring-width) solid var(--gog-input-icon-hover-color);outline-offset:calc(-1 * var(--gog-input-icon-focus-ring-width))}.gog-input__spin-btn:disabled{opacity:var(--gog-input-disabled-opacity);cursor:not-allowed}.gog-input__label--float{position:absolute;inset-inline-start:var(--gog-input-ps, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - var(--gog-input-ps, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))) - var(--gog-input-pe, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;color:var(--gog-input-placeholder-color);font-size:var(--gog-input-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-input-transition-duration) var(--gog-easing),font-size var(--gog-input-transition-duration) var(--gog-easing),color var(--gog-input-transition-duration) var(--gog-easing),top var(--gog-input-transition-duration) var(--gog-easing),background-color var(--gog-input-transition-duration) var(--gog-easing)}.gog-input-wrapper--float-in,.gog-input-wrapper--float-on{--gog-input-float-top-padding: calc(var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-input-float-label-reserve))}.gog-input-wrapper--float-in .gog-input__field,.gog-input-wrapper--float-on .gog-input__field{padding-top:var(--gog-input-float-top-padding)}.gog-input-wrapper--float-in .gog-input__label--float,.gog-input-wrapper--float-on .gog-input__label--float{top:var(--gog-input-float-top-padding);transform:none}.gog-input-wrapper--float-in.gog-input-wrapper--floated .gog-input__label--float{top:var(--gog-input-float-label-in-top);transform:translateY(0);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing)}.gog-input-wrapper--float-on.gog-input-wrapper--floated .gog-input__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing);background-color:var(--gog-input-float-label-on-bg, var(--gog-input-field-bg));padding:0 4px;inset-inline-start:calc(var(--gog-input-ps, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-input-wrapper--float-over.gog-input-wrapper--floated .gog-input__label--float{top:calc(-1 * var(--gog-input-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-input-label-font-size);color:var(--gog-input-label-color);text-transform:var(--gog-input-label-text-transform);letter-spacing:var(--gog-input-label-letter-spacing)}.gog-input-wrapper--float-over .gog-input__field-container{margin-top:var(--gog-input-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-input__field,.gog-input__label--float{transition:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], minlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minlength", required: false }] }], pattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "pattern", required: false }] }], inputMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputMode", required: false }] }], spellcheck: [{ type: i0.Input, args: [{ isSignal: true, alias: "spellcheck", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], showSpinButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSpinButtons", required: false }] }], incrementLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "incrementLabel", required: false }] }], decrementLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "decrementLabel", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], errorDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorDisplay", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], iconStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconStart", required: false }] }], iconEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconEnd", required: false }] }], showPasswordLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPasswordLabel", required: false }] }], hidePasswordLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePasswordLabel", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAriaLabel", required: false }] }], floatLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatLabel", required: false }] }], floatLabelShowPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatLabelShowPlaceholder", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], addonStart: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GogInputAddonStartDirective), { isSignal: true }] }], addonEnd: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GogInputAddonEndDirective), { isSignal: true }] }] } });
 
 /** Built-in defaults, used when neither the instance input nor `GOG_CONFIG` supplies one. */
@@ -5979,18 +6009,24 @@ class SelectComponent extends GogDropdownBase {
         this.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SelectComponent, isStandalone: true, selector: "gog-select", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "style.--gog-select-min-width": "minWidth()" } }, viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panelTpl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!--\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 and lets whatever follows on the page\r\n  paint over the open dropdown.\r\n-->\r\n<div\r\n  class=\"gog-select\"\r\n  [class.gog-select--clearable]=\"showClear()\"\r\n  [class]=\"sizeClass()\"\r\n  [class.gog-select--disabled]=\"isDisabled()\"\r\n  [class.gog-select--open]=\"isOpen()\"\r\n  [class.gog-select--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n  [class.gog-select--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n  [class.gog-select--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n  [class.gog-select--floated]=\"isFloatLabelFloated()\"\r\n>\r\n  <!--\r\n    Associated with aria-labelledby rather than `for`: the trigger is a <button>, which is\r\n    not a labelable element, so `for` pointing at it is silently ignored by browsers and\r\n    assistive tech alike.\r\n  -->\r\n  @if (label() && resolvedFloatLabel() === 'none') {\r\n    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\r\n    <label class=\"gog-select__label\" [id]=\"labelId()\">{{ label() }}</label>\r\n  }\r\n\r\n  <div class=\"gog-select__field\">\r\n    @if (label() && isFloatLabelActive()) {\r\n      <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\r\n      <label class=\"gog-select__label gog-select__label--float\" [id]=\"labelId()\">{{\r\n        label()\r\n      }}</label>\r\n    }\r\n    <button\r\n      type=\"button\"\r\n      class=\"gog-select__control\"\r\n      [id]=\"triggerId()\"\r\n      [disabled]=\"isDisabled()\"\r\n      [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n      [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\r\n      [attr.aria-controls]=\"listboxId()\"\r\n      [attr.aria-expanded]=\"isOpen()\"\r\n      [attr.aria-haspopup]=\"'listbox'\"\r\n      [attr.aria-invalid]=\"hasError()\"\r\n      [attr.aria-describedby]=\"errorId()\"\r\n      (click)=\"toggle()\"\r\n      (focus)=\"onFocusIn()\"\r\n      (blur)=\"onFocusOut()\"\r\n      (keydown.enter)=\"toggle(); $event.preventDefault()\"\r\n      (keydown.space)=\"toggle(); $event.preventDefault()\"\r\n      (keydown.escape)=\"close()\"\r\n      (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\r\n      (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\r\n    >\r\n      <span class=\"gog-select__value\" [class.gog-select__value--placeholder]=\"!selectedOption()\">\r\n        {{ selectedLabel() || effectivePlaceholder() }}\r\n      </span>\r\n\r\n      <span class=\"gog-select__chevron\" aria-hidden=\"true\">\r\n        <gog-icon [template]=\"chevronSlot()?.templateRef ?? null\" name=\"chevron-down\" />\r\n      </span>\r\n    </button>\r\n\r\n    <!--\r\n      A sibling of the trigger, not a child: `.gog-select__control` is a <button>, and nesting\r\n      one button inside another is invalid HTML. It is positioned over the trigger's right edge\r\n      by the stylesheet, which also reserves room for it so it never covers the value text.\r\n    -->\r\n    @if (showClear()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"gog-select__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\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-select__error\" [attr.id]=\"errorId()\" role=\"alert\">\r\n      {{ visibleError() }}\r\n    </span>\r\n  }\r\n</div>\r\n\r\n<!--\r\n  One template for both render modes. When `appendToBody` is set it is stamped into\r\n  <body> by the overlay, which is why the portal-only modifier and the resolved\r\n  coordinates are applied conditionally: outside the component's subtree the panel can\r\n  no longer inherit the size tokens from the `.gog-select--sm/--lg` wrapper.\r\n-->\r\n<ng-template #panelTpl>\r\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation, not an interactive handler; the focusable/keyboard-operable elements are the options inside -->\r\n  <div\r\n    [id]=\"listboxId()\"\r\n    class=\"gog-select__dropdown\"\r\n    [class.gog-select__dropdown--up]=\"!resolvedAppendToBody() && dropdownDirectionState() === 'up'\"\r\n    [class.gog-select__dropdown--portal]=\"resolvedAppendToBody()\"\r\n    [class]=\"panelSizeClass()\"\r\n    [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\r\n    [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\r\n    [style.width]=\"resolvedAppendToBody() ? resolvedPanelWidth() : null\"\r\n    [style.min-width]=\"resolvedAppendToBody() ? resolvedPanelMinWidth() : null\"\r\n    [style.max-height]=\"resolvedAppendToBody() ? resolvedPanelMaxHeight() : null\"\r\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\r\n    role=\"listbox\"\r\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    <!--\r\n      Not a tab stop of its own: the listbox pattern's only stop is the trigger, with\r\n      focus moved between options via the arrow keys (roving-focus.ts), which already\r\n      scrolls the focused option into view natively \u2014 no separate keyboard-scroll target\r\n      needed here.\r\n    -->\r\n    @if (resolvedFilter() && resolvedFilterPosition() === 'top') {\r\n      <div class=\"gog-select__filter gog-select__filter--top\">\r\n        <input\r\n          type=\"text\"\r\n          class=\"gog-select__filter-input\"\r\n          [placeholder]=\"filterPlaceholder()\"\r\n          [value]=\"filterQuery()\"\r\n          (input)=\"onFilterInput($event)\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          (keydown.escape)=\"close(); focusTrigger()\"\r\n        />\r\n      </div>\r\n    }\r\n    <gog-scroll\r\n      size=\"thin\"\r\n      [focusable]=\"false\"\r\n      overscrollBehavior=\"contain\"\r\n      class=\"gog-select__scroll\"\r\n    >\r\n      @if (visibleOptions().length === 0) {\r\n        <p class=\"gog-select__empty\">{{ filterEmptyMessage() }}</p>\r\n      }\r\n      @for (option of visibleOptions(); track valueOf(option)) {\r\n        <!--\r\n          tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern expects:\r\n          focus is moved between options with the arrow keys, not by tabbing through every\r\n          one of them. Programmatic .focus() still works on a negative tabindex.\r\n        -->\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-select__option\"\r\n          role=\"option\"\r\n          tabindex=\"-1\"\r\n          [attr.aria-selected]=\"isSelected(option)\"\r\n          [attr.aria-disabled]=\"isOptionDisabled(option)\"\r\n          [class.gog-select__option--selected]=\"isSelected(option)\"\r\n          [class.gog-select__option--disabled]=\"isOptionDisabled(option)\"\r\n          (click)=\"selectOption(option, $event)\"\r\n          (keydown)=\"onOptionKeydown($event)\"\r\n        >\r\n          @if (optionSlot(); as slot) {\r\n            <ng-container\r\n              *ngTemplateOutlet=\"\r\n                slot.templateRef;\r\n                context: optionContext(option, isSelected(option))\r\n              \"\r\n            />\r\n          } @else {\r\n            <span class=\"gog-select__option-mark\" aria-hidden=\"true\">\r\n              @if (isSelected(option)) {\r\n                <gog-icon name=\"check\" />\r\n              }\r\n            </span>\r\n            <span class=\"gog-select__option-label\">{{ labelOf(option) }}</span>\r\n          }\r\n        </button>\r\n      }\r\n    </gog-scroll>\r\n    @if (resolvedFilter() && resolvedFilterPosition() === 'bottom') {\r\n      <div class=\"gog-select__filter gog-select__filter--bottom\">\r\n        <input\r\n          type=\"text\"\r\n          class=\"gog-select__filter-input\"\r\n          [placeholder]=\"filterPlaceholder()\"\r\n          [value]=\"filterQuery()\"\r\n          (input)=\"onFilterInput($event)\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          (keydown.escape)=\"close(); focusTrigger()\"\r\n        />\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}:host(.gog-host--auto-width){width:fit-content}.gog-select{display:flex;flex-direction:column;gap:var(--gog-select-gap);width:100%}.gog-select--xsm,.gog-select__dropdown--xsm{--gog-select-size-padding-y: var(--gog-field-xsm-padding-y);--gog-select-size-padding-x: var(--gog-field-xsm-padding-x);--gog-select-size-font-size: var(--gog-field-xsm-font-size)}.gog-select--sm,.gog-select__dropdown--sm{--gog-select-size-padding-y: var(--gog-field-sm-padding-y);--gog-select-size-padding-x: var(--gog-field-sm-padding-x);--gog-select-size-font-size: var(--gog-field-sm-font-size)}.gog-select--lg,.gog-select__dropdown--lg{--gog-select-size-padding-y: var(--gog-field-lg-padding-y);--gog-select-size-padding-x: var(--gog-field-lg-padding-x);--gog-select-size-font-size: var(--gog-field-lg-font-size)}.gog-select--slg,.gog-select__dropdown--slg{--gog-select-size-padding-y: var(--gog-field-slg-padding-y);--gog-select-size-padding-x: var(--gog-field-slg-padding-x);--gog-select-size-font-size: var(--gog-field-slg-font-size)}.gog-select--disabled{opacity:var(--gog-select-disabled-opacity)}.gog-select--disabled .gog-select__label,.gog-select--disabled .gog-select__field{cursor:not-allowed}.gog-select__label{font-family:var(--gog-select-label-font-family);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing);cursor:pointer}.gog-select__field{position:relative;cursor:pointer}.gog-select__control{width:100%;padding:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-chevron-inset) var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));display:flex;align-items:center;justify-content:space-between;gap:var(--gog-select-control-gap);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-field-color);background-color:var(--gog-select-field-bg);border:var(--gog-select-field-border-width) var(--gog-select-field-border-style) var(--gog-select-field-border);border-radius:var(--gog-select-radius);outline:none;cursor:pointer;transition:border-color var(--gog-select-transition-duration) var(--gog-easing),box-shadow var(--gog-select-transition-duration) var(--gog-easing)}.gog-select__control:focus{border-color:var(--gog-select-focus-border);box-shadow:var(--gog-select-focus-glow)}.gog-select__control:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:var(--gog-select-focus-ring-offset)}.gog-select__control:disabled{cursor:not-allowed}.gog-select--open .gog-select__control{border-color:var(--gog-select-focus-border)}.gog-select__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start}.gog-select__value--placeholder{color:var(--gog-select-placeholder-color)}.gog-select__chevron{width:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));display:flex;align-items:center;justify-content:center;color:var(--gog-select-chevron-color);pointer-events:none;flex-shrink:0}.gog-select__chevron gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-chevron-icon-ratio))}.gog-select__dropdown{position:absolute;top:calc(100% + var(--gog-select-panel-offset));inset-inline-start:0;inset-inline-end:auto;min-width:100%;width:max-content;max-width:var(--gog-select-panel-max-width);z-index:var(--gog-dropdown-z);display:flex;flex-direction:column;background-color:var(--gog-select-panel-bg);border:var(--gog-select-field-border-width) var(--gog-select-field-border-style) var(--gog-select-field-border);border-radius:var(--gog-select-radius);max-height:var(--gog-select-panel-max-height);overflow:hidden;box-shadow:var(--gog-select-panel-shadow)}.gog-select__scroll{flex:1;min-height:0}.gog-select__dropdown--up{top:auto;bottom:calc(100% + var(--gog-select-panel-offset))}.gog-select__dropdown--portal{position:fixed;top:unset;bottom:unset;inset-inline:unset}.gog-select__option{width:100%;display:flex;align-items:center;gap:var(--gog-select-option-gap);padding:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:start;font:inherit;font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-option-color);cursor:pointer;transition:background-color var(--gog-select-option-transition-duration) var(--gog-easing)}.gog-select__option:hover{background-color:var(--gog-select-option-hover-bg)}.gog-select__option--selected{color:var(--gog-select-option-selected-color)}.gog-select__option--disabled{opacity:var(--gog-select-option-disabled-opacity);cursor:not-allowed}.gog-select__option:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:calc(var(--gog-select-focus-ring-width) * -1)}.gog-select__option-mark{display:inline-flex;align-items:center;justify-content:center;width:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));height:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));flex-shrink:0}.gog-select__option-mark gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-icon-ratio))}.gog-select__error{font-family:var(--gog-select-font-family);font-size:var(--gog-select-error-font-size);color:var(--gog-select-error-color)}.gog-select__label--float{position:absolute;inset-inline-start:var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - 2 * var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;cursor:default;color:var(--gog-select-placeholder-color);font-size:var(--gog-select-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-select-transition-duration) var(--gog-easing),font-size var(--gog-select-transition-duration) var(--gog-easing),color var(--gog-select-transition-duration) var(--gog-easing),top var(--gog-select-transition-duration) var(--gog-easing),background-color var(--gog-select-transition-duration) var(--gog-easing)}.gog-select--float-in,.gog-select--float-on{--gog-select-float-top-padding: calc(var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-select-float-label-reserve))}.gog-select--float-in .gog-select__control,.gog-select--float-on .gog-select__control{padding-top:var(--gog-select-float-top-padding)}.gog-select--float-in .gog-select__label--float,.gog-select--float-on .gog-select__label--float{top:var(--gog-select-float-top-padding);transform:none}.gog-select--float-in.gog-select--floated .gog-select__label--float{top:var(--gog-select-float-label-in-top);transform:translateY(0);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing)}.gog-select--float-on.gog-select--floated .gog-select__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing);background-color:var(--gog-select-float-label-on-bg, var(--gog-select-field-bg));padding:0 4px;inset-inline-start:calc(var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-select--float-over.gog-select--floated .gog-select__label--float{top:calc(-1 * var(--gog-select-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing)}.gog-select--float-over .gog-select__field{margin-top:var(--gog-select-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-select__control,.gog-select__option,.gog-select__label--float{transition:none}}.gog-select__clear{position:absolute;top:50%;inset-inline-end:var(--gog-select-chevron-inset);transform:translateY(-50%);width:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));padding:0;border:0;border-radius:var(--gog-select-clear-radius);background:transparent;color:var(--gog-select-clear-color);line-height:1;cursor:pointer;transition:color var(--gog-select-transition-duration) var(--gog-easing)}.gog-select__clear:hover{color:var(--gog-select-clear-hover-color)}.gog-select__clear:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:var(--gog-select-focus-ring-offset)}.gog-select__clear gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-clear-icon-ratio))}.gog-select--clearable .gog-select__control{padding-inline-end:calc(var(--gog-select-chevron-inset) + var(--gog-select-clear-gap) + var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))))}.gog-select__filter{position:sticky;top:0;z-index:1;padding:var(--gog-select-filter-padding);background:var(--gog-select-panel-bg)}.gog-select__filter-input{width:100%;padding:var(--gog-select-filter-input-padding-y) var(--gog-select-filter-input-padding-x);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-filter-input-color);background:var(--gog-select-filter-input-bg);border:var(--gog-control-border-width) var(--gog-control-border-style) var(--gog-select-filter-input-border);border-radius:var(--gog-select-filter-input-radius);outline:none}.gog-select__filter-input:focus{border-color:var(--gog-select-focus-border)}.gog-select__empty{margin:0;padding:var(--gog-select-filter-empty-padding);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-filter-empty-color);text-align:center}.gog-select__filter--top{border-bottom:var(--gog-select-filter-border-width) var(--gog-select-filter-border-style) var(--gog-select-filter-border-color)}.gog-select__filter--bottom{top:auto;bottom:0;border-top:var(--gog-select-filter-border-width) var(--gog-select-filter-border-style) var(--gog-select-filter-border-color)}:host(.gog-host--auto-width),:host(.gog-host--auto-width) .gog-select__control{min-width:var(--gog-select-min-width)}.gog-select__dropdown--portal{max-width:var(--gog-select-panel-max-width)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ScrollComponent, selector: "gog-scroll", inputs: ["axis", "size", "autoHide", "hideDelay", "reachThreshold", "focusable", "ariaLabel", "overscrollBehavior", "showTrack"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SelectComponent, isStandalone: true, selector: "gog-select", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "style.--gog-select-min-width": "minWidth()" } }, viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panelTpl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!--\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 and lets whatever follows on the page\r\n  paint over the open dropdown.\r\n-->\r\n<div\r\n  class=\"gog-select\"\r\n  [class.gog-select--clearable]=\"showClear()\"\r\n  [class]=\"sizeClass()\"\r\n  [class.gog-select--disabled]=\"isDisabled()\"\r\n  [class.gog-select--open]=\"isOpen()\"\r\n  [class.gog-select--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n  [class.gog-select--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n  [class.gog-select--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n  [class.gog-select--floated]=\"isFloatLabelFloated()\"\r\n>\r\n  <!--\r\n    Associated with aria-labelledby rather than `for`: the trigger is a <button>, which is\r\n    not a labelable element, so `for` pointing at it is silently ignored by browsers and\r\n    assistive tech alike.\r\n  -->\r\n  @if (label() && resolvedFloatLabel() === 'none') {\r\n    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\r\n    <label class=\"gog-select__label\" [id]=\"labelId()\">{{ label() }}</label>\r\n  }\r\n\r\n  <div class=\"gog-select__field\">\r\n    @if (label() && isFloatLabelActive()) {\r\n      <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\r\n      <label class=\"gog-select__label gog-select__label--float\" [id]=\"labelId()\">{{\r\n        label()\r\n      }}</label>\r\n    }\r\n    <button\r\n      type=\"button\"\r\n      class=\"gog-select__control\"\r\n      [id]=\"triggerId()\"\r\n      [disabled]=\"isDisabled()\"\r\n      [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n      [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\r\n      [attr.aria-controls]=\"listboxId()\"\r\n      [attr.aria-expanded]=\"isOpen()\"\r\n      [attr.aria-haspopup]=\"'listbox'\"\r\n      [attr.aria-invalid]=\"hasError()\"\r\n      [attr.aria-describedby]=\"errorId()\"\r\n      (click)=\"toggle()\"\r\n      (focus)=\"onFocusIn()\"\r\n      (blur)=\"onFocusOut()\"\r\n      (keydown.enter)=\"toggle(); $event.preventDefault()\"\r\n      (keydown.space)=\"toggle(); $event.preventDefault()\"\r\n      (keydown.escape)=\"close()\"\r\n      (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\r\n      (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\r\n    >\r\n      <span class=\"gog-select__value\" [class.gog-select__value--placeholder]=\"!selectedOption()\">\r\n        {{ selectedLabel() || effectivePlaceholder() }}\r\n      </span>\r\n\r\n      <span class=\"gog-select__chevron\" aria-hidden=\"true\">\r\n        <gog-icon [template]=\"chevronSlot()?.templateRef ?? null\" name=\"chevron-down\" />\r\n      </span>\r\n    </button>\r\n\r\n    <!--\r\n      A sibling of the trigger, not a child: `.gog-select__control` is a <button>, and nesting\r\n      one button inside another is invalid HTML. It is positioned over the trigger's right edge\r\n      by the stylesheet, which also reserves room for it so it never covers the value text.\r\n    -->\r\n    @if (showClear()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"gog-select__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\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-select__error\" [attr.id]=\"errorId()\" role=\"alert\">\r\n      {{ visibleError() }}\r\n    </span>\r\n  }\r\n</div>\r\n\r\n<!--\r\n  One template for both render modes. When `appendToBody` is set it is stamped into\r\n  <body> by the overlay, which is why the portal-only modifier and the resolved\r\n  coordinates are applied conditionally: outside the component's subtree the panel can\r\n  no longer inherit the size tokens from the `.gog-select--sm/--lg` wrapper.\r\n-->\r\n<ng-template #panelTpl>\r\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation, not an interactive handler; the focusable/keyboard-operable elements are the options inside -->\r\n  <div\r\n    [id]=\"listboxId()\"\r\n    class=\"gog-select__dropdown\"\r\n    [class.gog-select__dropdown--up]=\"!resolvedAppendToBody() && dropdownDirectionState() === 'up'\"\r\n    [class.gog-select__dropdown--portal]=\"resolvedAppendToBody()\"\r\n    [class]=\"panelSizeClass()\"\r\n    [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\r\n    [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\r\n    [style.width]=\"resolvedAppendToBody() ? resolvedPanelWidth() : null\"\r\n    [style.min-width]=\"resolvedAppendToBody() ? resolvedPanelMinWidth() : null\"\r\n    [style.max-height]=\"resolvedAppendToBody() ? resolvedPanelMaxHeight() : null\"\r\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\r\n    role=\"listbox\"\r\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    <!--\r\n      Not a tab stop of its own: the listbox pattern's only stop is the trigger, with\r\n      focus moved between options via the arrow keys (roving-focus.ts), which already\r\n      scrolls the focused option into view natively \u2014 no separate keyboard-scroll target\r\n      needed here.\r\n    -->\r\n    @if (resolvedFilter() && resolvedFilterPosition() === 'top') {\r\n      <div class=\"gog-select__filter gog-select__filter--top\">\r\n        <input\r\n          type=\"text\"\r\n          class=\"gog-select__filter-input\"\r\n          [placeholder]=\"filterPlaceholder()\"\r\n          [value]=\"filterQuery()\"\r\n          (input)=\"onFilterInput($event)\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          (keydown.escape)=\"close(); focusTrigger()\"\r\n        />\r\n      </div>\r\n    }\r\n    <gog-scroll\r\n      size=\"thin\"\r\n      [focusable]=\"false\"\r\n      overscrollBehavior=\"contain\"\r\n      class=\"gog-select__scroll\"\r\n    >\r\n      @if (visibleOptions().length === 0) {\r\n        <p class=\"gog-select__empty\">{{ filterEmptyMessage() }}</p>\r\n      }\r\n      @for (option of visibleOptions(); track valueOf(option)) {\r\n        <!--\r\n          tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern expects:\r\n          focus is moved between options with the arrow keys, not by tabbing through every\r\n          one of them. Programmatic .focus() still works on a negative tabindex.\r\n        -->\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-select__option\"\r\n          role=\"option\"\r\n          tabindex=\"-1\"\r\n          [attr.aria-selected]=\"isSelected(option)\"\r\n          [attr.aria-disabled]=\"isOptionDisabled(option)\"\r\n          [class.gog-select__option--selected]=\"isSelected(option)\"\r\n          [class.gog-select__option--disabled]=\"isOptionDisabled(option)\"\r\n          (click)=\"selectOption(option, $event)\"\r\n          (keydown)=\"onOptionKeydown($event)\"\r\n        >\r\n          @if (optionSlot(); as slot) {\r\n            <ng-container\r\n              *ngTemplateOutlet=\"\r\n                slot.templateRef;\r\n                context: optionContext(option, isSelected(option))\r\n              \"\r\n            />\r\n          } @else {\r\n            <span class=\"gog-select__option-mark\" aria-hidden=\"true\">\r\n              @if (isSelected(option)) {\r\n                <gog-icon name=\"check\" />\r\n              }\r\n            </span>\r\n            <span class=\"gog-select__option-label\">{{ labelOf(option) }}</span>\r\n          }\r\n        </button>\r\n      }\r\n    </gog-scroll>\r\n    @if (resolvedFilter() && resolvedFilterPosition() === 'bottom') {\r\n      <div class=\"gog-select__filter gog-select__filter--bottom\">\r\n        <input\r\n          type=\"text\"\r\n          class=\"gog-select__filter-input\"\r\n          [placeholder]=\"filterPlaceholder()\"\r\n          [value]=\"filterQuery()\"\r\n          (input)=\"onFilterInput($event)\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          (keydown.escape)=\"close(); focusTrigger()\"\r\n        />\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}:host(.gog-host--auto-width){width:fit-content}.gog-select{display:flex;flex-direction:column;gap:var(--gog-select-gap);width:100%}.gog-select--xsm,.gog-select__dropdown--xsm{--gog-select-size-padding-y: var(--gog-field-xsm-padding-y);--gog-select-size-padding-x: var(--gog-field-xsm-padding-x);--gog-select-size-font-size: var(--gog-field-xsm-font-size)}.gog-select--sm,.gog-select__dropdown--sm{--gog-select-size-padding-y: var(--gog-field-sm-padding-y);--gog-select-size-padding-x: var(--gog-field-sm-padding-x);--gog-select-size-font-size: var(--gog-field-sm-font-size)}.gog-select--lg,.gog-select__dropdown--lg{--gog-select-size-padding-y: var(--gog-field-lg-padding-y);--gog-select-size-padding-x: var(--gog-field-lg-padding-x);--gog-select-size-font-size: var(--gog-field-lg-font-size)}.gog-select--slg,.gog-select__dropdown--slg{--gog-select-size-padding-y: var(--gog-field-slg-padding-y);--gog-select-size-padding-x: var(--gog-field-slg-padding-x);--gog-select-size-font-size: var(--gog-field-slg-font-size)}.gog-select--disabled{opacity:var(--gog-select-disabled-opacity)}.gog-select--disabled .gog-select__label,.gog-select--disabled .gog-select__field{cursor:not-allowed}.gog-select__label{font-family:var(--gog-select-label-font-family);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing);cursor:pointer}.gog-select__field{position:relative;cursor:pointer}.gog-select__control{width:100%;padding-block:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y)));padding-inline:var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x))) var(--gog-select-chevron-inset);display:flex;align-items:center;justify-content:space-between;gap:var(--gog-select-control-gap);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-field-color);background-color:var(--gog-select-field-bg);border:var(--gog-select-field-border-width) var(--gog-select-field-border-style) var(--gog-select-field-border);border-radius:var(--gog-select-radius);outline:none;cursor:pointer;transition:border-color var(--gog-select-transition-duration) var(--gog-easing),box-shadow var(--gog-select-transition-duration) var(--gog-easing)}.gog-select__control:focus{border-color:var(--gog-select-focus-border);box-shadow:var(--gog-select-focus-glow)}.gog-select__control:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:var(--gog-select-focus-ring-offset)}.gog-select__control:disabled{cursor:not-allowed}.gog-select--open .gog-select__control{border-color:var(--gog-select-focus-border)}.gog-select__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start}.gog-select__value--placeholder{color:var(--gog-select-placeholder-color)}.gog-select__chevron{width:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));display:flex;align-items:center;justify-content:center;color:var(--gog-select-chevron-color);pointer-events:none;flex-shrink:0}.gog-select__chevron gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-chevron-icon-ratio))}.gog-select__dropdown{position:absolute;top:calc(100% + var(--gog-select-panel-offset));inset-inline-start:0;inset-inline-end:auto;min-width:100%;width:max-content;max-width:var(--gog-select-panel-max-width);z-index:var(--gog-dropdown-z);display:flex;flex-direction:column;background-color:var(--gog-select-panel-bg);border:var(--gog-select-field-border-width) var(--gog-select-field-border-style) var(--gog-select-field-border);border-radius:var(--gog-select-radius);max-height:var(--gog-select-panel-max-height);overflow:hidden;box-shadow:var(--gog-select-panel-shadow)}.gog-select__scroll{flex:1;min-height:0}.gog-select__dropdown--up{top:auto;bottom:calc(100% + var(--gog-select-panel-offset))}.gog-select__dropdown--portal{position:fixed;top:unset;bottom:unset;inset-inline:unset}.gog-select__option{width:100%;display:flex;align-items:center;gap:var(--gog-select-option-gap);padding:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:start;font:inherit;font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-option-color);cursor:pointer;transition:background-color var(--gog-select-option-transition-duration) var(--gog-easing)}.gog-select__option:hover{background-color:var(--gog-select-option-hover-bg)}.gog-select__option--selected{color:var(--gog-select-option-selected-color)}.gog-select__option--disabled{opacity:var(--gog-select-option-disabled-opacity);cursor:not-allowed}.gog-select__option:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:calc(var(--gog-select-focus-ring-width) * -1)}.gog-select__option-mark{display:inline-flex;align-items:center;justify-content:center;width:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));height:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));flex-shrink:0}.gog-select__option-mark gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-icon-ratio))}.gog-select__error{font-family:var(--gog-select-font-family);font-size:var(--gog-select-error-font-size);color:var(--gog-select-error-color)}.gog-select__label--float{position:absolute;inset-inline-start:var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - 2 * var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;cursor:default;color:var(--gog-select-placeholder-color);font-size:var(--gog-select-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-select-transition-duration) var(--gog-easing),font-size var(--gog-select-transition-duration) var(--gog-easing),color var(--gog-select-transition-duration) var(--gog-easing),top var(--gog-select-transition-duration) var(--gog-easing),background-color var(--gog-select-transition-duration) var(--gog-easing)}.gog-select--float-in,.gog-select--float-on{--gog-select-float-top-padding: calc(var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-select-float-label-reserve))}.gog-select--float-in .gog-select__control,.gog-select--float-on .gog-select__control{padding-top:var(--gog-select-float-top-padding)}.gog-select--float-in .gog-select__label--float,.gog-select--float-on .gog-select__label--float{top:var(--gog-select-float-top-padding);transform:none}.gog-select--float-in.gog-select--floated .gog-select__label--float{top:var(--gog-select-float-label-in-top);transform:translateY(0);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing)}.gog-select--float-on.gog-select--floated .gog-select__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing);background-color:var(--gog-select-float-label-on-bg, var(--gog-select-field-bg));padding:0 4px;inset-inline-start:calc(var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-select--float-over.gog-select--floated .gog-select__label--float{top:calc(-1 * var(--gog-select-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing)}.gog-select--float-over .gog-select__field{margin-top:var(--gog-select-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-select__control,.gog-select__option,.gog-select__label--float{transition:none}}.gog-select__clear{position:absolute;top:50%;inset-inline-end:var(--gog-select-chevron-inset);transform:translateY(-50%);width:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));padding:0;border:0;border-radius:var(--gog-select-clear-radius);background:transparent;color:var(--gog-select-clear-color);line-height:1;cursor:pointer;transition:color var(--gog-select-transition-duration) var(--gog-easing)}.gog-select__clear:hover{color:var(--gog-select-clear-hover-color)}.gog-select__clear:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:var(--gog-select-focus-ring-offset)}.gog-select__clear gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-clear-icon-ratio))}.gog-select--clearable .gog-select__control{padding-inline-end:calc(var(--gog-select-chevron-inset) + var(--gog-select-clear-gap) + var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))))}.gog-select__filter{position:sticky;top:0;z-index:1;padding:var(--gog-select-filter-padding);background:var(--gog-select-panel-bg)}.gog-select__filter-input{width:100%;padding:var(--gog-select-filter-input-padding-y) var(--gog-select-filter-input-padding-x);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-filter-input-color);background:var(--gog-select-filter-input-bg);border:var(--gog-control-border-width) var(--gog-control-border-style) var(--gog-select-filter-input-border);border-radius:var(--gog-select-filter-input-radius);outline:none}.gog-select__filter-input:focus{border-color:var(--gog-select-focus-border)}.gog-select__empty{margin:0;padding:var(--gog-select-filter-empty-padding);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-filter-empty-color);text-align:center}.gog-select__filter--top{border-bottom:var(--gog-select-filter-border-width) var(--gog-select-filter-border-style) var(--gog-select-filter-border-color)}.gog-select__filter--bottom{top:auto;bottom:0;border-top:var(--gog-select-filter-border-width) var(--gog-select-filter-border-style) var(--gog-select-filter-border-color)}:host(.gog-host--auto-width),:host(.gog-host--auto-width) .gog-select__control{min-width:var(--gog-select-min-width)}.gog-select__dropdown--portal{max-width:var(--gog-select-panel-max-width)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ScrollComponent, selector: "gog-scroll", inputs: ["axis", "size", "autoHide", "hideDelay", "reachThreshold", "focusable", "ariaLabel", "overscrollBehavior", "showTrack"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gog-select', imports: [IconComponent, NgTemplateOutlet, ScrollComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         // Only bites when the control has opted out of full width; otherwise the container decides.
                         '[style.--gog-select-min-width]': 'minWidth()',
-                    }, template: "<!--\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 and lets whatever follows on the page\r\n  paint over the open dropdown.\r\n-->\r\n<div\r\n  class=\"gog-select\"\r\n  [class.gog-select--clearable]=\"showClear()\"\r\n  [class]=\"sizeClass()\"\r\n  [class.gog-select--disabled]=\"isDisabled()\"\r\n  [class.gog-select--open]=\"isOpen()\"\r\n  [class.gog-select--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n  [class.gog-select--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n  [class.gog-select--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n  [class.gog-select--floated]=\"isFloatLabelFloated()\"\r\n>\r\n  <!--\r\n    Associated with aria-labelledby rather than `for`: the trigger is a <button>, which is\r\n    not a labelable element, so `for` pointing at it is silently ignored by browsers and\r\n    assistive tech alike.\r\n  -->\r\n  @if (label() && resolvedFloatLabel() === 'none') {\r\n    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\r\n    <label class=\"gog-select__label\" [id]=\"labelId()\">{{ label() }}</label>\r\n  }\r\n\r\n  <div class=\"gog-select__field\">\r\n    @if (label() && isFloatLabelActive()) {\r\n      <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\r\n      <label class=\"gog-select__label gog-select__label--float\" [id]=\"labelId()\">{{\r\n        label()\r\n      }}</label>\r\n    }\r\n    <button\r\n      type=\"button\"\r\n      class=\"gog-select__control\"\r\n      [id]=\"triggerId()\"\r\n      [disabled]=\"isDisabled()\"\r\n      [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n      [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\r\n      [attr.aria-controls]=\"listboxId()\"\r\n      [attr.aria-expanded]=\"isOpen()\"\r\n      [attr.aria-haspopup]=\"'listbox'\"\r\n      [attr.aria-invalid]=\"hasError()\"\r\n      [attr.aria-describedby]=\"errorId()\"\r\n      (click)=\"toggle()\"\r\n      (focus)=\"onFocusIn()\"\r\n      (blur)=\"onFocusOut()\"\r\n      (keydown.enter)=\"toggle(); $event.preventDefault()\"\r\n      (keydown.space)=\"toggle(); $event.preventDefault()\"\r\n      (keydown.escape)=\"close()\"\r\n      (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\r\n      (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\r\n    >\r\n      <span class=\"gog-select__value\" [class.gog-select__value--placeholder]=\"!selectedOption()\">\r\n        {{ selectedLabel() || effectivePlaceholder() }}\r\n      </span>\r\n\r\n      <span class=\"gog-select__chevron\" aria-hidden=\"true\">\r\n        <gog-icon [template]=\"chevronSlot()?.templateRef ?? null\" name=\"chevron-down\" />\r\n      </span>\r\n    </button>\r\n\r\n    <!--\r\n      A sibling of the trigger, not a child: `.gog-select__control` is a <button>, and nesting\r\n      one button inside another is invalid HTML. It is positioned over the trigger's right edge\r\n      by the stylesheet, which also reserves room for it so it never covers the value text.\r\n    -->\r\n    @if (showClear()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"gog-select__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\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-select__error\" [attr.id]=\"errorId()\" role=\"alert\">\r\n      {{ visibleError() }}\r\n    </span>\r\n  }\r\n</div>\r\n\r\n<!--\r\n  One template for both render modes. When `appendToBody` is set it is stamped into\r\n  <body> by the overlay, which is why the portal-only modifier and the resolved\r\n  coordinates are applied conditionally: outside the component's subtree the panel can\r\n  no longer inherit the size tokens from the `.gog-select--sm/--lg` wrapper.\r\n-->\r\n<ng-template #panelTpl>\r\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation, not an interactive handler; the focusable/keyboard-operable elements are the options inside -->\r\n  <div\r\n    [id]=\"listboxId()\"\r\n    class=\"gog-select__dropdown\"\r\n    [class.gog-select__dropdown--up]=\"!resolvedAppendToBody() && dropdownDirectionState() === 'up'\"\r\n    [class.gog-select__dropdown--portal]=\"resolvedAppendToBody()\"\r\n    [class]=\"panelSizeClass()\"\r\n    [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\r\n    [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\r\n    [style.width]=\"resolvedAppendToBody() ? resolvedPanelWidth() : null\"\r\n    [style.min-width]=\"resolvedAppendToBody() ? resolvedPanelMinWidth() : null\"\r\n    [style.max-height]=\"resolvedAppendToBody() ? resolvedPanelMaxHeight() : null\"\r\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\r\n    role=\"listbox\"\r\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    <!--\r\n      Not a tab stop of its own: the listbox pattern's only stop is the trigger, with\r\n      focus moved between options via the arrow keys (roving-focus.ts), which already\r\n      scrolls the focused option into view natively \u2014 no separate keyboard-scroll target\r\n      needed here.\r\n    -->\r\n    @if (resolvedFilter() && resolvedFilterPosition() === 'top') {\r\n      <div class=\"gog-select__filter gog-select__filter--top\">\r\n        <input\r\n          type=\"text\"\r\n          class=\"gog-select__filter-input\"\r\n          [placeholder]=\"filterPlaceholder()\"\r\n          [value]=\"filterQuery()\"\r\n          (input)=\"onFilterInput($event)\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          (keydown.escape)=\"close(); focusTrigger()\"\r\n        />\r\n      </div>\r\n    }\r\n    <gog-scroll\r\n      size=\"thin\"\r\n      [focusable]=\"false\"\r\n      overscrollBehavior=\"contain\"\r\n      class=\"gog-select__scroll\"\r\n    >\r\n      @if (visibleOptions().length === 0) {\r\n        <p class=\"gog-select__empty\">{{ filterEmptyMessage() }}</p>\r\n      }\r\n      @for (option of visibleOptions(); track valueOf(option)) {\r\n        <!--\r\n          tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern expects:\r\n          focus is moved between options with the arrow keys, not by tabbing through every\r\n          one of them. Programmatic .focus() still works on a negative tabindex.\r\n        -->\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-select__option\"\r\n          role=\"option\"\r\n          tabindex=\"-1\"\r\n          [attr.aria-selected]=\"isSelected(option)\"\r\n          [attr.aria-disabled]=\"isOptionDisabled(option)\"\r\n          [class.gog-select__option--selected]=\"isSelected(option)\"\r\n          [class.gog-select__option--disabled]=\"isOptionDisabled(option)\"\r\n          (click)=\"selectOption(option, $event)\"\r\n          (keydown)=\"onOptionKeydown($event)\"\r\n        >\r\n          @if (optionSlot(); as slot) {\r\n            <ng-container\r\n              *ngTemplateOutlet=\"\r\n                slot.templateRef;\r\n                context: optionContext(option, isSelected(option))\r\n              \"\r\n            />\r\n          } @else {\r\n            <span class=\"gog-select__option-mark\" aria-hidden=\"true\">\r\n              @if (isSelected(option)) {\r\n                <gog-icon name=\"check\" />\r\n              }\r\n            </span>\r\n            <span class=\"gog-select__option-label\">{{ labelOf(option) }}</span>\r\n          }\r\n        </button>\r\n      }\r\n    </gog-scroll>\r\n    @if (resolvedFilter() && resolvedFilterPosition() === 'bottom') {\r\n      <div class=\"gog-select__filter gog-select__filter--bottom\">\r\n        <input\r\n          type=\"text\"\r\n          class=\"gog-select__filter-input\"\r\n          [placeholder]=\"filterPlaceholder()\"\r\n          [value]=\"filterQuery()\"\r\n          (input)=\"onFilterInput($event)\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          (keydown.escape)=\"close(); focusTrigger()\"\r\n        />\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}:host(.gog-host--auto-width){width:fit-content}.gog-select{display:flex;flex-direction:column;gap:var(--gog-select-gap);width:100%}.gog-select--xsm,.gog-select__dropdown--xsm{--gog-select-size-padding-y: var(--gog-field-xsm-padding-y);--gog-select-size-padding-x: var(--gog-field-xsm-padding-x);--gog-select-size-font-size: var(--gog-field-xsm-font-size)}.gog-select--sm,.gog-select__dropdown--sm{--gog-select-size-padding-y: var(--gog-field-sm-padding-y);--gog-select-size-padding-x: var(--gog-field-sm-padding-x);--gog-select-size-font-size: var(--gog-field-sm-font-size)}.gog-select--lg,.gog-select__dropdown--lg{--gog-select-size-padding-y: var(--gog-field-lg-padding-y);--gog-select-size-padding-x: var(--gog-field-lg-padding-x);--gog-select-size-font-size: var(--gog-field-lg-font-size)}.gog-select--slg,.gog-select__dropdown--slg{--gog-select-size-padding-y: var(--gog-field-slg-padding-y);--gog-select-size-padding-x: var(--gog-field-slg-padding-x);--gog-select-size-font-size: var(--gog-field-slg-font-size)}.gog-select--disabled{opacity:var(--gog-select-disabled-opacity)}.gog-select--disabled .gog-select__label,.gog-select--disabled .gog-select__field{cursor:not-allowed}.gog-select__label{font-family:var(--gog-select-label-font-family);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing);cursor:pointer}.gog-select__field{position:relative;cursor:pointer}.gog-select__control{width:100%;padding:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-chevron-inset) var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));display:flex;align-items:center;justify-content:space-between;gap:var(--gog-select-control-gap);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-field-color);background-color:var(--gog-select-field-bg);border:var(--gog-select-field-border-width) var(--gog-select-field-border-style) var(--gog-select-field-border);border-radius:var(--gog-select-radius);outline:none;cursor:pointer;transition:border-color var(--gog-select-transition-duration) var(--gog-easing),box-shadow var(--gog-select-transition-duration) var(--gog-easing)}.gog-select__control:focus{border-color:var(--gog-select-focus-border);box-shadow:var(--gog-select-focus-glow)}.gog-select__control:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:var(--gog-select-focus-ring-offset)}.gog-select__control:disabled{cursor:not-allowed}.gog-select--open .gog-select__control{border-color:var(--gog-select-focus-border)}.gog-select__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start}.gog-select__value--placeholder{color:var(--gog-select-placeholder-color)}.gog-select__chevron{width:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));display:flex;align-items:center;justify-content:center;color:var(--gog-select-chevron-color);pointer-events:none;flex-shrink:0}.gog-select__chevron gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-chevron-icon-ratio))}.gog-select__dropdown{position:absolute;top:calc(100% + var(--gog-select-panel-offset));inset-inline-start:0;inset-inline-end:auto;min-width:100%;width:max-content;max-width:var(--gog-select-panel-max-width);z-index:var(--gog-dropdown-z);display:flex;flex-direction:column;background-color:var(--gog-select-panel-bg);border:var(--gog-select-field-border-width) var(--gog-select-field-border-style) var(--gog-select-field-border);border-radius:var(--gog-select-radius);max-height:var(--gog-select-panel-max-height);overflow:hidden;box-shadow:var(--gog-select-panel-shadow)}.gog-select__scroll{flex:1;min-height:0}.gog-select__dropdown--up{top:auto;bottom:calc(100% + var(--gog-select-panel-offset))}.gog-select__dropdown--portal{position:fixed;top:unset;bottom:unset;inset-inline:unset}.gog-select__option{width:100%;display:flex;align-items:center;gap:var(--gog-select-option-gap);padding:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:start;font:inherit;font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-option-color);cursor:pointer;transition:background-color var(--gog-select-option-transition-duration) var(--gog-easing)}.gog-select__option:hover{background-color:var(--gog-select-option-hover-bg)}.gog-select__option--selected{color:var(--gog-select-option-selected-color)}.gog-select__option--disabled{opacity:var(--gog-select-option-disabled-opacity);cursor:not-allowed}.gog-select__option:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:calc(var(--gog-select-focus-ring-width) * -1)}.gog-select__option-mark{display:inline-flex;align-items:center;justify-content:center;width:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));height:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));flex-shrink:0}.gog-select__option-mark gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-icon-ratio))}.gog-select__error{font-family:var(--gog-select-font-family);font-size:var(--gog-select-error-font-size);color:var(--gog-select-error-color)}.gog-select__label--float{position:absolute;inset-inline-start:var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - 2 * var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;cursor:default;color:var(--gog-select-placeholder-color);font-size:var(--gog-select-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-select-transition-duration) var(--gog-easing),font-size var(--gog-select-transition-duration) var(--gog-easing),color var(--gog-select-transition-duration) var(--gog-easing),top var(--gog-select-transition-duration) var(--gog-easing),background-color var(--gog-select-transition-duration) var(--gog-easing)}.gog-select--float-in,.gog-select--float-on{--gog-select-float-top-padding: calc(var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-select-float-label-reserve))}.gog-select--float-in .gog-select__control,.gog-select--float-on .gog-select__control{padding-top:var(--gog-select-float-top-padding)}.gog-select--float-in .gog-select__label--float,.gog-select--float-on .gog-select__label--float{top:var(--gog-select-float-top-padding);transform:none}.gog-select--float-in.gog-select--floated .gog-select__label--float{top:var(--gog-select-float-label-in-top);transform:translateY(0);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing)}.gog-select--float-on.gog-select--floated .gog-select__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing);background-color:var(--gog-select-float-label-on-bg, var(--gog-select-field-bg));padding:0 4px;inset-inline-start:calc(var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-select--float-over.gog-select--floated .gog-select__label--float{top:calc(-1 * var(--gog-select-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing)}.gog-select--float-over .gog-select__field{margin-top:var(--gog-select-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-select__control,.gog-select__option,.gog-select__label--float{transition:none}}.gog-select__clear{position:absolute;top:50%;inset-inline-end:var(--gog-select-chevron-inset);transform:translateY(-50%);width:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));padding:0;border:0;border-radius:var(--gog-select-clear-radius);background:transparent;color:var(--gog-select-clear-color);line-height:1;cursor:pointer;transition:color var(--gog-select-transition-duration) var(--gog-easing)}.gog-select__clear:hover{color:var(--gog-select-clear-hover-color)}.gog-select__clear:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:var(--gog-select-focus-ring-offset)}.gog-select__clear gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-clear-icon-ratio))}.gog-select--clearable .gog-select__control{padding-inline-end:calc(var(--gog-select-chevron-inset) + var(--gog-select-clear-gap) + var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))))}.gog-select__filter{position:sticky;top:0;z-index:1;padding:var(--gog-select-filter-padding);background:var(--gog-select-panel-bg)}.gog-select__filter-input{width:100%;padding:var(--gog-select-filter-input-padding-y) var(--gog-select-filter-input-padding-x);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-filter-input-color);background:var(--gog-select-filter-input-bg);border:var(--gog-control-border-width) var(--gog-control-border-style) var(--gog-select-filter-input-border);border-radius:var(--gog-select-filter-input-radius);outline:none}.gog-select__filter-input:focus{border-color:var(--gog-select-focus-border)}.gog-select__empty{margin:0;padding:var(--gog-select-filter-empty-padding);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-filter-empty-color);text-align:center}.gog-select__filter--top{border-bottom:var(--gog-select-filter-border-width) var(--gog-select-filter-border-style) var(--gog-select-filter-border-color)}.gog-select__filter--bottom{top:auto;bottom:0;border-top:var(--gog-select-filter-border-width) var(--gog-select-filter-border-style) var(--gog-select-filter-border-color)}:host(.gog-host--auto-width),:host(.gog-host--auto-width) .gog-select__control{min-width:var(--gog-select-min-width)}.gog-select__dropdown--portal{max-width:var(--gog-select-panel-max-width)}\n"] }]
+                    }, template: "<!--\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 and lets whatever follows on the page\r\n  paint over the open dropdown.\r\n-->\r\n<div\r\n  class=\"gog-select\"\r\n  [class.gog-select--clearable]=\"showClear()\"\r\n  [class]=\"sizeClass()\"\r\n  [class.gog-select--disabled]=\"isDisabled()\"\r\n  [class.gog-select--open]=\"isOpen()\"\r\n  [class.gog-select--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n  [class.gog-select--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n  [class.gog-select--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n  [class.gog-select--floated]=\"isFloatLabelFloated()\"\r\n>\r\n  <!--\r\n    Associated with aria-labelledby rather than `for`: the trigger is a <button>, which is\r\n    not a labelable element, so `for` pointing at it is silently ignored by browsers and\r\n    assistive tech alike.\r\n  -->\r\n  @if (label() && resolvedFloatLabel() === 'none') {\r\n    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\r\n    <label class=\"gog-select__label\" [id]=\"labelId()\">{{ label() }}</label>\r\n  }\r\n\r\n  <div class=\"gog-select__field\">\r\n    @if (label() && isFloatLabelActive()) {\r\n      <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- associated via aria-labelledby above instead, see comment -->\r\n      <label class=\"gog-select__label gog-select__label--float\" [id]=\"labelId()\">{{\r\n        label()\r\n      }}</label>\r\n    }\r\n    <button\r\n      type=\"button\"\r\n      class=\"gog-select__control\"\r\n      [id]=\"triggerId()\"\r\n      [disabled]=\"isDisabled()\"\r\n      [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n      [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\r\n      [attr.aria-controls]=\"listboxId()\"\r\n      [attr.aria-expanded]=\"isOpen()\"\r\n      [attr.aria-haspopup]=\"'listbox'\"\r\n      [attr.aria-invalid]=\"hasError()\"\r\n      [attr.aria-describedby]=\"errorId()\"\r\n      (click)=\"toggle()\"\r\n      (focus)=\"onFocusIn()\"\r\n      (blur)=\"onFocusOut()\"\r\n      (keydown.enter)=\"toggle(); $event.preventDefault()\"\r\n      (keydown.space)=\"toggle(); $event.preventDefault()\"\r\n      (keydown.escape)=\"close()\"\r\n      (keydown.arrowdown)=\"onTriggerArrowKeydown($event)\"\r\n      (keydown.arrowup)=\"onTriggerArrowKeydown($event)\"\r\n    >\r\n      <span class=\"gog-select__value\" [class.gog-select__value--placeholder]=\"!selectedOption()\">\r\n        {{ selectedLabel() || effectivePlaceholder() }}\r\n      </span>\r\n\r\n      <span class=\"gog-select__chevron\" aria-hidden=\"true\">\r\n        <gog-icon [template]=\"chevronSlot()?.templateRef ?? null\" name=\"chevron-down\" />\r\n      </span>\r\n    </button>\r\n\r\n    <!--\r\n      A sibling of the trigger, not a child: `.gog-select__control` is a <button>, and nesting\r\n      one button inside another is invalid HTML. It is positioned over the trigger's right edge\r\n      by the stylesheet, which also reserves room for it so it never covers the value text.\r\n    -->\r\n    @if (showClear()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"gog-select__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\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-select__error\" [attr.id]=\"errorId()\" role=\"alert\">\r\n      {{ visibleError() }}\r\n    </span>\r\n  }\r\n</div>\r\n\r\n<!--\r\n  One template for both render modes. When `appendToBody` is set it is stamped into\r\n  <body> by the overlay, which is why the portal-only modifier and the resolved\r\n  coordinates are applied conditionally: outside the component's subtree the panel can\r\n  no longer inherit the size tokens from the `.gog-select--sm/--lg` wrapper.\r\n-->\r\n<ng-template #panelTpl>\r\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- (click) below is housekeeping stopPropagation, not an interactive handler; the focusable/keyboard-operable elements are the options inside -->\r\n  <div\r\n    [id]=\"listboxId()\"\r\n    class=\"gog-select__dropdown\"\r\n    [class.gog-select__dropdown--up]=\"!resolvedAppendToBody() && dropdownDirectionState() === 'up'\"\r\n    [class.gog-select__dropdown--portal]=\"resolvedAppendToBody()\"\r\n    [class]=\"panelSizeClass()\"\r\n    [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\r\n    [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\r\n    [style.width]=\"resolvedAppendToBody() ? resolvedPanelWidth() : null\"\r\n    [style.min-width]=\"resolvedAppendToBody() ? resolvedPanelMinWidth() : null\"\r\n    [style.max-height]=\"resolvedAppendToBody() ? resolvedPanelMaxHeight() : null\"\r\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\r\n    role=\"listbox\"\r\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    <!--\r\n      Not a tab stop of its own: the listbox pattern's only stop is the trigger, with\r\n      focus moved between options via the arrow keys (roving-focus.ts), which already\r\n      scrolls the focused option into view natively \u2014 no separate keyboard-scroll target\r\n      needed here.\r\n    -->\r\n    @if (resolvedFilter() && resolvedFilterPosition() === 'top') {\r\n      <div class=\"gog-select__filter gog-select__filter--top\">\r\n        <input\r\n          type=\"text\"\r\n          class=\"gog-select__filter-input\"\r\n          [placeholder]=\"filterPlaceholder()\"\r\n          [value]=\"filterQuery()\"\r\n          (input)=\"onFilterInput($event)\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          (keydown.escape)=\"close(); focusTrigger()\"\r\n        />\r\n      </div>\r\n    }\r\n    <gog-scroll\r\n      size=\"thin\"\r\n      [focusable]=\"false\"\r\n      overscrollBehavior=\"contain\"\r\n      class=\"gog-select__scroll\"\r\n    >\r\n      @if (visibleOptions().length === 0) {\r\n        <p class=\"gog-select__empty\">{{ filterEmptyMessage() }}</p>\r\n      }\r\n      @for (option of visibleOptions(); track valueOf(option)) {\r\n        <!--\r\n          tabindex=\"-1\" keeps the list to a single tab stop, as the listbox pattern expects:\r\n          focus is moved between options with the arrow keys, not by tabbing through every\r\n          one of them. Programmatic .focus() still works on a negative tabindex.\r\n        -->\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-select__option\"\r\n          role=\"option\"\r\n          tabindex=\"-1\"\r\n          [attr.aria-selected]=\"isSelected(option)\"\r\n          [attr.aria-disabled]=\"isOptionDisabled(option)\"\r\n          [class.gog-select__option--selected]=\"isSelected(option)\"\r\n          [class.gog-select__option--disabled]=\"isOptionDisabled(option)\"\r\n          (click)=\"selectOption(option, $event)\"\r\n          (keydown)=\"onOptionKeydown($event)\"\r\n        >\r\n          @if (optionSlot(); as slot) {\r\n            <ng-container\r\n              *ngTemplateOutlet=\"\r\n                slot.templateRef;\r\n                context: optionContext(option, isSelected(option))\r\n              \"\r\n            />\r\n          } @else {\r\n            <span class=\"gog-select__option-mark\" aria-hidden=\"true\">\r\n              @if (isSelected(option)) {\r\n                <gog-icon name=\"check\" />\r\n              }\r\n            </span>\r\n            <span class=\"gog-select__option-label\">{{ labelOf(option) }}</span>\r\n          }\r\n        </button>\r\n      }\r\n    </gog-scroll>\r\n    @if (resolvedFilter() && resolvedFilterPosition() === 'bottom') {\r\n      <div class=\"gog-select__filter gog-select__filter--bottom\">\r\n        <input\r\n          type=\"text\"\r\n          class=\"gog-select__filter-input\"\r\n          [placeholder]=\"filterPlaceholder()\"\r\n          [value]=\"filterQuery()\"\r\n          (input)=\"onFilterInput($event)\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          (keydown.escape)=\"close(); focusTrigger()\"\r\n        />\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}:host(.gog-host--auto-width){width:fit-content}.gog-select{display:flex;flex-direction:column;gap:var(--gog-select-gap);width:100%}.gog-select--xsm,.gog-select__dropdown--xsm{--gog-select-size-padding-y: var(--gog-field-xsm-padding-y);--gog-select-size-padding-x: var(--gog-field-xsm-padding-x);--gog-select-size-font-size: var(--gog-field-xsm-font-size)}.gog-select--sm,.gog-select__dropdown--sm{--gog-select-size-padding-y: var(--gog-field-sm-padding-y);--gog-select-size-padding-x: var(--gog-field-sm-padding-x);--gog-select-size-font-size: var(--gog-field-sm-font-size)}.gog-select--lg,.gog-select__dropdown--lg{--gog-select-size-padding-y: var(--gog-field-lg-padding-y);--gog-select-size-padding-x: var(--gog-field-lg-padding-x);--gog-select-size-font-size: var(--gog-field-lg-font-size)}.gog-select--slg,.gog-select__dropdown--slg{--gog-select-size-padding-y: var(--gog-field-slg-padding-y);--gog-select-size-padding-x: var(--gog-field-slg-padding-x);--gog-select-size-font-size: var(--gog-field-slg-font-size)}.gog-select--disabled{opacity:var(--gog-select-disabled-opacity)}.gog-select--disabled .gog-select__label,.gog-select--disabled .gog-select__field{cursor:not-allowed}.gog-select__label{font-family:var(--gog-select-label-font-family);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing);cursor:pointer}.gog-select__field{position:relative;cursor:pointer}.gog-select__control{width:100%;padding-block:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y)));padding-inline:var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x))) var(--gog-select-chevron-inset);display:flex;align-items:center;justify-content:space-between;gap:var(--gog-select-control-gap);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-field-color);background-color:var(--gog-select-field-bg);border:var(--gog-select-field-border-width) var(--gog-select-field-border-style) var(--gog-select-field-border);border-radius:var(--gog-select-radius);outline:none;cursor:pointer;transition:border-color var(--gog-select-transition-duration) var(--gog-easing),box-shadow var(--gog-select-transition-duration) var(--gog-easing)}.gog-select__control:focus{border-color:var(--gog-select-focus-border);box-shadow:var(--gog-select-focus-glow)}.gog-select__control:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:var(--gog-select-focus-ring-offset)}.gog-select__control:disabled{cursor:not-allowed}.gog-select--open .gog-select__control{border-color:var(--gog-select-focus-border)}.gog-select__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start}.gog-select__value--placeholder{color:var(--gog-select-placeholder-color)}.gog-select__chevron{width:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));display:flex;align-items:center;justify-content:center;color:var(--gog-select-chevron-color);pointer-events:none;flex-shrink:0}.gog-select__chevron gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-chevron-icon-ratio))}.gog-select__dropdown{position:absolute;top:calc(100% + var(--gog-select-panel-offset));inset-inline-start:0;inset-inline-end:auto;min-width:100%;width:max-content;max-width:var(--gog-select-panel-max-width);z-index:var(--gog-dropdown-z);display:flex;flex-direction:column;background-color:var(--gog-select-panel-bg);border:var(--gog-select-field-border-width) var(--gog-select-field-border-style) var(--gog-select-field-border);border-radius:var(--gog-select-radius);max-height:var(--gog-select-panel-max-height);overflow:hidden;box-shadow:var(--gog-select-panel-shadow)}.gog-select__scroll{flex:1;min-height:0}.gog-select__dropdown--up{top:auto;bottom:calc(100% + var(--gog-select-panel-offset))}.gog-select__dropdown--portal{position:fixed;top:unset;bottom:unset;inset-inline:unset}.gog-select__option{width:100%;display:flex;align-items:center;gap:var(--gog-select-option-gap);padding:var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:start;font:inherit;font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-option-color);cursor:pointer;transition:background-color var(--gog-select-option-transition-duration) var(--gog-easing)}.gog-select__option:hover{background-color:var(--gog-select-option-hover-bg)}.gog-select__option--selected{color:var(--gog-select-option-selected-color)}.gog-select__option--disabled{opacity:var(--gog-select-option-disabled-opacity);cursor:not-allowed}.gog-select__option:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:calc(var(--gog-select-focus-ring-width) * -1)}.gog-select__option-mark{display:inline-flex;align-items:center;justify-content:center;width:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));height:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-size-ratio));flex-shrink:0}.gog-select__option-mark gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-mark-icon-ratio))}.gog-select__error{font-family:var(--gog-select-font-family);font-size:var(--gog-select-error-font-size);color:var(--gog-select-error-color)}.gog-select__label--float{position:absolute;inset-inline-start:var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - 2 * var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;cursor:default;color:var(--gog-select-placeholder-color);font-size:var(--gog-select-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-select-transition-duration) var(--gog-easing),font-size var(--gog-select-transition-duration) var(--gog-easing),color var(--gog-select-transition-duration) var(--gog-easing),top var(--gog-select-transition-duration) var(--gog-easing),background-color var(--gog-select-transition-duration) var(--gog-easing)}.gog-select--float-in,.gog-select--float-on{--gog-select-float-top-padding: calc(var(--gog-select-control-padding-y, var(--gog-select-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-select-float-label-reserve))}.gog-select--float-in .gog-select__control,.gog-select--float-on .gog-select__control{padding-top:var(--gog-select-float-top-padding)}.gog-select--float-in .gog-select__label--float,.gog-select--float-on .gog-select__label--float{top:var(--gog-select-float-top-padding);transform:none}.gog-select--float-in.gog-select--floated .gog-select__label--float{top:var(--gog-select-float-label-in-top);transform:translateY(0);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing)}.gog-select--float-on.gog-select--floated .gog-select__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing);background-color:var(--gog-select-float-label-on-bg, var(--gog-select-field-bg));padding:0 4px;inset-inline-start:calc(var(--gog-select-control-padding-x, var(--gog-select-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-select--float-over.gog-select--floated .gog-select__label--float{top:calc(-1 * var(--gog-select-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-select-label-font-size);color:var(--gog-select-label-color);text-transform:var(--gog-select-label-text-transform);letter-spacing:var(--gog-select-label-letter-spacing)}.gog-select--float-over .gog-select__field{margin-top:var(--gog-select-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-select__control,.gog-select__option,.gog-select__label--float{transition:none}}.gog-select__clear{position:absolute;top:50%;inset-inline-end:var(--gog-select-chevron-inset);transform:translateY(-50%);width:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));padding:0;border:0;border-radius:var(--gog-select-clear-radius);background:transparent;color:var(--gog-select-clear-color);line-height:1;cursor:pointer;transition:color var(--gog-select-transition-duration) var(--gog-easing)}.gog-select__clear:hover{color:var(--gog-select-clear-hover-color)}.gog-select__clear:focus-visible{outline:var(--gog-select-focus-ring-width) solid var(--gog-select-focus-border);outline-offset:var(--gog-select-focus-ring-offset)}.gog-select__clear gog-icon{font-size:calc(var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))) * var(--gog-select-clear-icon-ratio))}.gog-select--clearable .gog-select__control{padding-inline-end:calc(var(--gog-select-chevron-inset) + var(--gog-select-clear-gap) + var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size))))}.gog-select__filter{position:sticky;top:0;z-index:1;padding:var(--gog-select-filter-padding);background:var(--gog-select-panel-bg)}.gog-select__filter-input{width:100%;padding:var(--gog-select-filter-input-padding-y) var(--gog-select-filter-input-padding-x);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-filter-input-color);background:var(--gog-select-filter-input-bg);border:var(--gog-control-border-width) var(--gog-control-border-style) var(--gog-select-filter-input-border);border-radius:var(--gog-select-filter-input-radius);outline:none}.gog-select__filter-input:focus{border-color:var(--gog-select-focus-border)}.gog-select__empty{margin:0;padding:var(--gog-select-filter-empty-padding);font-family:var(--gog-select-font-family);font-size:var(--gog-select-control-font, var(--gog-select-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-select-filter-empty-color);text-align:center}.gog-select__filter--top{border-bottom:var(--gog-select-filter-border-width) var(--gog-select-filter-border-style) var(--gog-select-filter-border-color)}.gog-select__filter--bottom{top:auto;bottom:0;border-top:var(--gog-select-filter-border-width) var(--gog-select-filter-border-style) var(--gog-select-filter-border-color)}:host(.gog-host--auto-width),:host(.gog-host--auto-width) .gog-select__control{min-width:var(--gog-select-min-width)}.gog-select__dropdown--portal{max-width:var(--gog-select-panel-max-width)}\n"] }]
         }], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", 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 }] }] } });
 
 const DEFAULT_GAP$2 = 4;
 const DEFAULT_VIEWPORT_PADDING$1 = 8;
+/**
+ * Floor for `availableHeight`, so a forced `direction="up"` on a trigger already at the top of
+ * the viewport still shows a scrollable panel rather than a zero-height one. Roughly two items
+ * plus the panel's padding — enough to read and to arrow through.
+ */
+const MIN_AVAILABLE_HEIGHT = 88;
 /**
  * Where a menu panel goes relative to its trigger.
  *
@@ -6004,6 +6040,13 @@ const DEFAULT_VIEWPORT_PADDING$1 = 8;
  * `direction` mirrors the alignment: an RTL menu hangs from the trigger's right edge, so it opens
  * back under the trigger rather than away from it. Both are then clamped into the viewport, which
  * is what keeps an icon button in the last table column from opening a menu half off-screen.
+ *
+ * **This function does not decide the panel's height, only the room available for one.** It used
+ * to write that room onto the panel as an inline `max-height`, which beat the stylesheet rule
+ * `--gog-menu-max-height` feeds and made the token inert — a consumer could set it to `150px` on
+ * a page with 500px of room and nothing happened. Anchoring an up-menu by its `bottom` is what
+ * lets the cap move into CSS: with a `top` computed from a height the panel then does not take,
+ * a token-capped panel would float away from its trigger by the difference.
  */
 function resolveMenuPlacement(triggerRect, menuSize, viewport, direction = 'ltr', preferred = 'auto', gap = DEFAULT_GAP$2, viewportPadding = DEFAULT_VIEWPORT_PADDING$1) {
     const spaceAbove = Math.max(0, triggerRect.top - gap - viewportPadding);
@@ -6019,16 +6062,19 @@ function resolveMenuPlacement(triggerRect, menuSize, viewport, direction = 'ltr'
         : spaceBelow >= menuSize.height
             ? 'down'
             : resolveDropdownDirection('auto', triggerRect, menuSize.height, viewport.height, gap, viewportPadding);
-    const maxHeight = resolvedDirection === 'up'
-        ? Math.min(menuSize.height, spaceAbove || menuSize.height)
-        : spaceBelow;
-    const top = resolvedDirection === 'up'
-        ? Math.max(viewportPadding, triggerRect.top - gap - maxHeight)
-        : triggerRect.bottom + gap;
+    const availableHeight = Math.max(resolvedDirection === 'up' ? spaceAbove : spaceBelow, MIN_AVAILABLE_HEIGHT);
+    /*
+     * One edge each, never both: a `position: fixed` element given both `top` and `bottom` is
+     * stretched between them, which would override the height CSS just worked out.
+     */
+    const top = resolvedDirection === 'up' ? null : triggerRect.bottom + gap;
+    const bottom = resolvedDirection === 'up'
+        ? Math.max(viewportPadding, viewport.height - triggerRect.top + gap)
+        : null;
     const alignedLeft = direction === 'rtl' ? triggerRect.right - menuSize.width : triggerRect.left;
     const maxLeft = Math.max(viewportPadding, viewport.width - menuSize.width - viewportPadding);
     const left = Math.min(Math.max(alignedLeft, viewportPadding), maxLeft);
-    return { direction: resolvedDirection, top, left, maxHeight };
+    return { direction: resolvedDirection, top, bottom, left, availableHeight };
 }
 
 /**
@@ -6122,6 +6168,20 @@ class MenuComponent {
     triggerEl = null;
     pendingFocus = null;
     placement = signal(null, ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
+    /**
+     * The room measured between the trigger and the viewport edge, handed to CSS as a length so
+     * `menu.css` can take the smaller of it and `--gog-menu-max-height`. Written as a custom
+     * property rather than as the panel's `max-height`, because an inline `max-height` would beat
+     * the token's own rule and make it inert — which is exactly what it did until 21.5.1.
+     *
+     * The unit is appended here rather than through a `[style....px]` binding: the `.px` suffix
+     * is not applied to a custom-property binding, so the value would arrive unitless and be
+     * dropped by `min()`.
+     */
+    availableHeight = computed(() => {
+        const placement = this.placement();
+        return placement ? `${placement.availableHeight}px` : null;
+    }, ...(ngDevMode ? [{ debugName: "availableHeight" }] : /* istanbul ignore next */ []));
     /**
      * The stacking order the panel would have had where it was declared. `gog-dialog` sets
      * `--gog-dropdown-z` on its own panel for exactly this, so a menu opened inside a dialog
@@ -6352,11 +6412,11 @@ class MenuComponent {
         }, size, { width: window.innerWidth, height: window.innerHeight }, direction, this.direction()));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: MenuComponent, isStandalone: true, selector: "gog-menu", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { gogClosed: "gogClosed" }, queries: [{ propertyName: "items", predicate: GogMenuItemDirective, isSignal: true }], viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panelTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\r\n  The panel lives in a template because `GogDropdownOverlay` stamps it into `<body>`, never in\r\n  place \u2014 see the class comment for why a menu has no in-place mode.\r\n\r\n  `<ng-content>` sits inside that template on purpose: the consumer's items exist as soon as\r\n  their own view does, and stamping the panel is what attaches them \u2014 so a closed menu puts\r\n  nothing in the accessibility tree, rather than hiding it with CSS.\r\n-->\r\n<ng-template #panelTpl>\r\n  <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -- the panel is the menu container, not a control: its (keydown) drives roving focus between the items, and they are the focusable elements -->\r\n  <div\r\n    [id]=\"menuId\"\r\n    class=\"gog-menu\"\r\n    [class.gog-menu--up]=\"placement()?.direction === 'up'\"\r\n    [style.top.px]=\"placement()?.top\"\r\n    [style.left.px]=\"placement()?.left\"\r\n    [style.max-height.px]=\"placement()?.maxHeight\"\r\n    [style.z-index]=\"panelZIndex()\"\r\n    role=\"menu\"\r\n    [attr.aria-label]=\"ariaLabel() || null\"\r\n    (keydown)=\"onPanelKeydown($event)\"\r\n    (click)=\"onPanelClick($event)\"\r\n  >\r\n    <!--\r\n      The library's own scroller rather than `overflow: auto`: a menu long enough to scroll gets\r\n      the same thin, auto-hiding scrollbar as every other scrollable surface in the package, and\r\n      `overscrollBehavior=\"contain\"` stops a wheel at the end of the list from scrolling the page\r\n      behind the menu. `focusable` is off because the menu's only tab stop is its trigger \u2014 items\r\n      are reached with the arrow keys, and `focusElement()` scrolls them into view.\r\n    -->\r\n    <gog-scroll\r\n      class=\"gog-menu__scroll\"\r\n      size=\"thin\"\r\n      [focusable]=\"false\"\r\n      overscrollBehavior=\"contain\"\r\n    >\r\n      <ng-content />\r\n    </gog-scroll>\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:contents}\n"], dependencies: [{ kind: "component", type: ScrollComponent, selector: "gog-scroll", inputs: ["axis", "size", "autoHide", "hideDelay", "reachThreshold", "focusable", "ariaLabel", "overscrollBehavior", "showTrack"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: MenuComponent, isStandalone: true, selector: "gog-menu", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { gogClosed: "gogClosed" }, queries: [{ propertyName: "items", predicate: GogMenuItemDirective, isSignal: true }], viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panelTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\r\n  The panel lives in a template because `GogDropdownOverlay` stamps it into `<body>`, never in\r\n  place \u2014 see the class comment for why a menu has no in-place mode.\r\n\r\n  `<ng-content>` sits inside that template on purpose: the consumer's items exist as soon as\r\n  their own view does, and stamping the panel is what attaches them \u2014 so a closed menu puts\r\n  nothing in the accessibility tree, rather than hiding it with CSS.\r\n-->\r\n<ng-template #panelTpl>\r\n  <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -- the panel is the menu container, not a control: its (keydown) drives roving focus between the items, and they are the focusable elements -->\r\n  <div\r\n    [id]=\"menuId\"\r\n    class=\"gog-menu\"\r\n    [class.gog-menu--up]=\"placement()?.direction === 'up'\"\r\n    [style.top.px]=\"placement()?.top\"\r\n    [style.bottom.px]=\"placement()?.bottom\"\r\n    [style.left.px]=\"placement()?.left\"\r\n    [style.--gog-menu-available-height]=\"availableHeight()\"\r\n    [style.z-index]=\"panelZIndex()\"\r\n    role=\"menu\"\r\n    [attr.aria-label]=\"ariaLabel() || null\"\r\n    (keydown)=\"onPanelKeydown($event)\"\r\n    (click)=\"onPanelClick($event)\"\r\n  >\r\n    <!--\r\n      The library's own scroller rather than `overflow: auto`: a menu long enough to scroll gets\r\n      the same thin, auto-hiding scrollbar as every other scrollable surface in the package, and\r\n      `overscrollBehavior=\"contain\"` stops a wheel at the end of the list from scrolling the page\r\n      behind the menu. `focusable` is off because the menu's only tab stop is its trigger \u2014 items\r\n      are reached with the arrow keys, and `focusElement()` scrolls them into view.\r\n    -->\r\n    <gog-scroll\r\n      class=\"gog-menu__scroll\"\r\n      size=\"thin\"\r\n      [focusable]=\"false\"\r\n      overscrollBehavior=\"contain\"\r\n    >\r\n      <ng-content />\r\n    </gog-scroll>\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:contents}\n"], dependencies: [{ kind: "component", type: ScrollComponent, selector: "gog-scroll", inputs: ["axis", "size", "autoHide", "hideDelay", "reachThreshold", "focusable", "ariaLabel", "overscrollBehavior", "showTrack"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gog-menu', imports: [ScrollComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\r\n  The panel lives in a template because `GogDropdownOverlay` stamps it into `<body>`, never in\r\n  place \u2014 see the class comment for why a menu has no in-place mode.\r\n\r\n  `<ng-content>` sits inside that template on purpose: the consumer's items exist as soon as\r\n  their own view does, and stamping the panel is what attaches them \u2014 so a closed menu puts\r\n  nothing in the accessibility tree, rather than hiding it with CSS.\r\n-->\r\n<ng-template #panelTpl>\r\n  <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -- the panel is the menu container, not a control: its (keydown) drives roving focus between the items, and they are the focusable elements -->\r\n  <div\r\n    [id]=\"menuId\"\r\n    class=\"gog-menu\"\r\n    [class.gog-menu--up]=\"placement()?.direction === 'up'\"\r\n    [style.top.px]=\"placement()?.top\"\r\n    [style.left.px]=\"placement()?.left\"\r\n    [style.max-height.px]=\"placement()?.maxHeight\"\r\n    [style.z-index]=\"panelZIndex()\"\r\n    role=\"menu\"\r\n    [attr.aria-label]=\"ariaLabel() || null\"\r\n    (keydown)=\"onPanelKeydown($event)\"\r\n    (click)=\"onPanelClick($event)\"\r\n  >\r\n    <!--\r\n      The library's own scroller rather than `overflow: auto`: a menu long enough to scroll gets\r\n      the same thin, auto-hiding scrollbar as every other scrollable surface in the package, and\r\n      `overscrollBehavior=\"contain\"` stops a wheel at the end of the list from scrolling the page\r\n      behind the menu. `focusable` is off because the menu's only tab stop is its trigger \u2014 items\r\n      are reached with the arrow keys, and `focusElement()` scrolls them into view.\r\n    -->\r\n    <gog-scroll\r\n      class=\"gog-menu__scroll\"\r\n      size=\"thin\"\r\n      [focusable]=\"false\"\r\n      overscrollBehavior=\"contain\"\r\n    >\r\n      <ng-content />\r\n    </gog-scroll>\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:contents}\n"] }]
+            args: [{ selector: 'gog-menu', imports: [ScrollComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\r\n  The panel lives in a template because `GogDropdownOverlay` stamps it into `<body>`, never in\r\n  place \u2014 see the class comment for why a menu has no in-place mode.\r\n\r\n  `<ng-content>` sits inside that template on purpose: the consumer's items exist as soon as\r\n  their own view does, and stamping the panel is what attaches them \u2014 so a closed menu puts\r\n  nothing in the accessibility tree, rather than hiding it with CSS.\r\n-->\r\n<ng-template #panelTpl>\r\n  <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -- the panel is the menu container, not a control: its (keydown) drives roving focus between the items, and they are the focusable elements -->\r\n  <div\r\n    [id]=\"menuId\"\r\n    class=\"gog-menu\"\r\n    [class.gog-menu--up]=\"placement()?.direction === 'up'\"\r\n    [style.top.px]=\"placement()?.top\"\r\n    [style.bottom.px]=\"placement()?.bottom\"\r\n    [style.left.px]=\"placement()?.left\"\r\n    [style.--gog-menu-available-height]=\"availableHeight()\"\r\n    [style.z-index]=\"panelZIndex()\"\r\n    role=\"menu\"\r\n    [attr.aria-label]=\"ariaLabel() || null\"\r\n    (keydown)=\"onPanelKeydown($event)\"\r\n    (click)=\"onPanelClick($event)\"\r\n  >\r\n    <!--\r\n      The library's own scroller rather than `overflow: auto`: a menu long enough to scroll gets\r\n      the same thin, auto-hiding scrollbar as every other scrollable surface in the package, and\r\n      `overscrollBehavior=\"contain\"` stops a wheel at the end of the list from scrolling the page\r\n      behind the menu. `focusable` is off because the menu's only tab stop is its trigger \u2014 items\r\n      are reached with the arrow keys, and `focusElement()` scrolls them into view.\r\n    -->\r\n    <gog-scroll\r\n      class=\"gog-menu__scroll\"\r\n      size=\"thin\"\r\n      [focusable]=\"false\"\r\n      overscrollBehavior=\"contain\"\r\n    >\r\n      <ng-content />\r\n    </gog-scroll>\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:contents}\n"] }]
         }], ctorParameters: () => [], propDecorators: { direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], gogClosed: [{ type: i0.Output, args: ["gogClosed"] }], panelTemplate: [{ type: i0.ViewChild, args: ['panelTpl', { isSignal: true }] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => GogMenuItemDirective), { isSignal: true }] }] } });
 /**
  * First-pass estimates, replaced by the panel's own measurements a microtask later. The width
@@ -10945,6 +11005,7 @@ const GOG_TOKEN_GROUPS = [
             '--gog-input-font',
             '--gog-input-padding-x',
             '--gog-input-padding-y',
+            '--gog-menu-available-height',
             '--gog-multiselect-float-label-on-bg',
             '--gog-multiselect-font-size',
             '--gog-multiselect-padding-x',