@guildofgleks/ui 21.3.0 → 21.3.1

package/fesm2022/guildofgleks-ui.mjs

@@ -293,6 +293,7 @@ const ICON_DEFS = {
     'checkbox-checked': `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check-icon lucide-check"><path d="M20 6 9 17l-5-5"/></svg>`,
     eye: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye-icon lucide-eye"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>`,
     'eye-off': `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye-off-icon lucide-eye-off"><path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"/><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"/><path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"/><path d="m2 2 20 20"/></svg>`,
+    copy: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy-icon lucide-copy"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>`,
 };
 
 class IconComponent {
@@ -304,22 +305,22 @@ class IconComponent {
     ariaLabel = computed(() => this.ariaHidden() ? null : this.title() || this.name(), ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     iconSvg = computed(() => this.sanitizer.bypassSecurityTrustHtml(ICON_DEFS[this.name()]), ...(ngDevMode ? [{ debugName: "iconSvg" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: IconComponent, isStandalone: true, selector: "gog-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, ariaHidden: { classPropertyName: "ariaHidden", publicName: "ariaHidden", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-hidden": "ariaHidden() ? \"true\" : null", "attr.aria-label": "ariaHidden() ? null : ariaLabel()" }, classAttribute: "gog-icon" }, ngImport: i0, template: `
-    @if (template(); as iconTpl) {
-      <ng-container *ngTemplateOutlet="iconTpl" />
-    } @else {
-      <span [innerHTML]="iconSvg()"></span>
-    }
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: IconComponent, isStandalone: true, selector: "gog-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, ariaHidden: { classPropertyName: "ariaHidden", publicName: "ariaHidden", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-hidden": "ariaHidden() ? \"true\" : null", "attr.aria-label": "ariaHidden() ? null : ariaLabel()" }, classAttribute: "gog-icon" }, ngImport: i0, template: `
+    @if (template(); as iconTpl) {
+      <ng-container *ngTemplateOutlet="iconTpl" />
+    } @else {
+      <span [innerHTML]="iconSvg()"></span>
+    }
   `, isInline: true, styles: [":host{display:inline-flex;align-items:center;justify-content:center;line-height:0}:host ::ng-deep svg{width:var(--gog-icon-size, var(--gog-icon-fallback-size));height:var(--gog-icon-size, var(--gog-icon-fallback-size));display:block;color:currentColor}:host ::ng-deep svg path,:host ::ng-deep svg circle,:host ::ng-deep svg rect{stroke-width:var(--gog-icon-stroke-width)}\n"], dependencies: [{ 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: IconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gog-icon', imports: [NgTemplateOutlet], template: `
-    @if (template(); as iconTpl) {
-      <ng-container *ngTemplateOutlet="iconTpl" />
-    } @else {
-      <span [innerHTML]="iconSvg()"></span>
-    }
+            args: [{ selector: 'gog-icon', imports: [NgTemplateOutlet], template: `
+    @if (template(); as iconTpl) {
+      <ng-container *ngTemplateOutlet="iconTpl" />
+    } @else {
+      <span [innerHTML]="iconSvg()"></span>
+    }
   `, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'gog-icon',
                         '[attr.aria-hidden]': 'ariaHidden() ? "true" : null',
@@ -1534,6 +1535,7 @@ const DEFAULT_SIZE$7 = 'normal';
 const DEFAULT_AUTO_HIDE = true;
 const DEFAULT_HIDE_DELAY$1 = 800;
 const DEFAULT_OVERSCROLL_BEHAVIOR = 'auto';
+const DEFAULT_SHOW_TRACK = true;
 function readPx(raw, fallback) {
     const parsed = Number.parseFloat(raw.trim());
     return Number.isFinite(parsed) ? parsed : fallback;
@@ -1577,6 +1579,17 @@ class ScrollComponent {
      * for what each value does.
      */
     overscrollBehavior = input(undefined, ...(ngDevMode ? [{ debugName: "overscrollBehavior" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the overlay thumb/track ever renders. Native scrolling — wheel, touch, keyboard,
+     * focus-into-view, and any programmatic `scrollTo`/`scrollIntoView` — keeps working exactly
+     * the same either way; this only controls the visual affordance, not `overflow` or scroll
+     * containment (see `viewportOverflowY`/`X`). Off suits a viewport whose *position* is already
+     * driven some other way — `gog-tabs`' `scrollActiveIntoView` is the case this exists for,
+     * where a second, independent scroll indicator next to the active-tab underline reads as two
+     * conflicting signals for the same thing. Unset, falls back to `GOG_CONFIG.scroll.showTrack`,
+     * then to `true`.
+     */
+    showTrack = input(undefined, ...(ngDevMode ? [{ debugName: "showTrack" }] : /* istanbul ignore next */ []));
     gogScroll = output();
     gogReachStart = output();
     gogReachEnd = output();
@@ -1626,6 +1639,7 @@ class ScrollComponent {
     resolvedOverscrollBehavior = computed(() => this.overscrollBehavior() ??
         this.globalConfig.scroll?.overscrollBehavior ??
         DEFAULT_OVERSCROLL_BEHAVIOR, ...(ngDevMode ? [{ debugName: "resolvedOverscrollBehavior" }] : /* istanbul ignore next */ []));
+    resolvedShowTrack = computed(() => this.showTrack() ?? this.globalConfig.scroll?.showTrack ?? DEFAULT_SHOW_TRACK, ...(ngDevMode ? [{ debugName: "resolvedShowTrack" }] : /* istanbul ignore next */ []));
     /**
      * Only applies `resolvedOverscrollBehavior` on an axis that's actually acting as a scroll
      * container — on an axis that's `visible` (see viewportOverflowY/X above) there is no
@@ -1870,16 +1884,17 @@ class ScrollComponent {
         state.end = atEnd;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ScrollComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ScrollComponent, isStandalone: true, selector: "gog-scroll", inputs: { axis: { classPropertyName: "axis", publicName: "axis", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, autoHide: { classPropertyName: "autoHide", publicName: "autoHide", isSignal: true, isRequired: false, transformFunction: null }, hideDelay: { classPropertyName: "hideDelay", publicName: "hideDelay", isSignal: true, isRequired: false, transformFunction: null }, reachThreshold: { classPropertyName: "reachThreshold", publicName: "reachThreshold", isSignal: true, isRequired: false, transformFunction: null }, focusable: { classPropertyName: "focusable", publicName: "focusable", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, overscrollBehavior: { classPropertyName: "overscrollBehavior", publicName: "overscrollBehavior", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { gogScroll: "gogScroll", gogReachStart: "gogReachStart", gogReachEnd: "gogReachEnd" }, viewQueries: [{ propertyName: "viewportRef", first: true, predicate: ["viewport"], descendants: true, isSignal: true }, { propertyName: "contentRef", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  class=\"gog-scroll\"\r\n  [class.gog-scroll--thin]=\"resolvedSize() === 'thin'\"\r\n  [class.gog-scroll--v]=\"axis() !== 'horizontal'\"\r\n  [class.gog-scroll--h]=\"axis() !== 'vertical'\"\r\n  [class.gog-scroll--both]=\"axis() === 'both'\"\r\n  [class.gog-scroll--dragging]=\"dragAxis() !== null\"\r\n>\r\n  <div\r\n    #viewport\r\n    class=\"gog-scroll__viewport\"\r\n    [style.overflow-y]=\"viewportOverflowY()\"\r\n    [style.overflow-x]=\"viewportOverflowX()\"\r\n    [style.overscroll-behavior-y]=\"viewportOverscrollY()\"\r\n    [style.overscroll-behavior-x]=\"viewportOverscrollX()\"\r\n    [attr.tabindex]=\"focusable() ? 0 : null\"\r\n    [attr.role]=\"focusable() ? 'region' : null\"\r\n    [attr.aria-label]=\"focusable() && ariaLabel() ? ariaLabel() : null\"\r\n    (scroll)=\"onScroll()\"\r\n    (pointerenter)=\"onActivity()\"\r\n    (pointermove)=\"onActivity()\"\r\n  >\r\n    <div #content class=\"gog-scroll__content\">\r\n      <ng-content />\r\n    </div>\r\n  </div>\r\n\r\n  @if (showTrackV()) {\r\n    <div\r\n      class=\"gog-scroll__track gog-scroll__track--v\"\r\n      [class.gog-scroll__track--visible]=\"\r\n        !resolvedAutoHide() || interacting() || dragAxis() === 'vertical'\r\n      \"\r\n      (pointerdown)=\"onTrackPointerDown($event, 'vertical')\"\r\n    >\r\n      <div\r\n        class=\"gog-scroll__thumb gog-scroll__thumb--v\"\r\n        [class.gog-scroll__thumb--active]=\"dragAxis() === 'vertical'\"\r\n        [style.height.%]=\"thumbSizeV()\"\r\n        [style.top.%]=\"thumbPosV()\"\r\n        (pointerdown)=\"onThumbPointerDown($event, 'vertical')\"\r\n        (pointermove)=\"onThumbPointerMove($event, 'vertical')\"\r\n        (pointerup)=\"onThumbPointerUp($event)\"\r\n        (pointercancel)=\"onThumbPointerUp($event)\"\r\n      ></div>\r\n    </div>\r\n  }\r\n\r\n  @if (showTrackH()) {\r\n    <div\r\n      class=\"gog-scroll__track gog-scroll__track--h\"\r\n      [class.gog-scroll__track--visible]=\"\r\n        !resolvedAutoHide() || interacting() || dragAxis() === 'horizontal'\r\n      \"\r\n      (pointerdown)=\"onTrackPointerDown($event, 'horizontal')\"\r\n    >\r\n      <div\r\n        class=\"gog-scroll__thumb gog-scroll__thumb--h\"\r\n        [class.gog-scroll__thumb--active]=\"dragAxis() === 'horizontal'\"\r\n        [style.width.%]=\"thumbSizeH()\"\r\n        [style.left.%]=\"thumbPosH()\"\r\n        (pointerdown)=\"onThumbPointerDown($event, 'horizontal')\"\r\n        (pointermove)=\"onThumbPointerMove($event, 'horizontal')\"\r\n        (pointerup)=\"onThumbPointerUp($event)\"\r\n        (pointercancel)=\"onThumbPointerUp($event)\"\r\n      ></div>\r\n    </div>\r\n  }\r\n\r\n  @if (axis() === 'both' && showTrackV() && showTrackH()) {\r\n    <div class=\"gog-scroll__corner\" aria-hidden=\"true\"></div>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column}.gog-scroll{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;position:relative;width:100%;contain:layout style;--gog-scroll-track-width: var(--gog-scroll-normal-track-width);--gog-scroll-thumb-min-size: var(--gog-scroll-normal-thumb-min-size)}.gog-scroll--thin{--gog-scroll-track-width: var(--gog-scroll-thin-track-width);--gog-scroll-thumb-min-size: var(--gog-scroll-thin-thumb-min-size)}.gog-scroll__viewport{flex:1 1 auto;min-height:0;width:100%;overflow-anchor:none;scrollbar-width:none;-ms-overflow-style:none}.gog-scroll__viewport::-webkit-scrollbar{display:none;width:0;height:0}.gog-scroll__viewport:focus-visible{outline:var(--gog-scroll-focus-ring-width) solid var(--gog-scroll-focus-ring);outline-offset:calc(var(--gog-scroll-focus-ring-width) * -1)}.gog-scroll__track{position:absolute;z-index:1;background-color:var(--gog-scroll-track-bg);border-radius:var(--gog-scroll-track-radius);opacity:0;pointer-events:none;transition:opacity var(--gog-scroll-fade-duration) var(--gog-easing)}.gog-scroll__track--visible{opacity:1;pointer-events:auto}.gog-scroll__track--v{top:0;right:0;bottom:0;width:var(--gog-scroll-track-width)}.gog-scroll--both .gog-scroll__track--v{bottom:var(--gog-scroll-track-width)}.gog-scroll__track--h{left:0;right:0;bottom:0;height:var(--gog-scroll-track-width)}.gog-scroll--both .gog-scroll__track--h{right:var(--gog-scroll-track-width)}.gog-scroll__thumb{position:absolute;background-color:var(--gog-scroll-thumb-bg);border-radius:var(--gog-scroll-thumb-radius);cursor:pointer;touch-action:none;transition:background-color var(--gog-scroll-fade-duration) var(--gog-easing)}.gog-scroll__thumb--v{left:var(--gog-scroll-thumb-inset);right:var(--gog-scroll-thumb-inset);min-height:var(--gog-scroll-thumb-min-size)}.gog-scroll__thumb--h{top:var(--gog-scroll-thumb-inset);bottom:var(--gog-scroll-thumb-inset);min-width:var(--gog-scroll-thumb-min-size)}.gog-scroll__thumb:hover{background-color:var(--gog-scroll-thumb-hover-bg)}.gog-scroll__thumb--active{background-color:var(--gog-scroll-thumb-active-bg)}.gog-scroll__corner{position:absolute;right:0;bottom:0;z-index:1;width:var(--gog-scroll-track-width);height:var(--gog-scroll-track-width);background-color:var(--gog-scroll-corner-bg)}@media(prefers-reduced-motion:reduce){.gog-scroll__track,.gog-scroll__thumb{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ScrollComponent, isStandalone: true, selector: "gog-scroll", inputs: { axis: { classPropertyName: "axis", publicName: "axis", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, autoHide: { classPropertyName: "autoHide", publicName: "autoHide", isSignal: true, isRequired: false, transformFunction: null }, hideDelay: { classPropertyName: "hideDelay", publicName: "hideDelay", isSignal: true, isRequired: false, transformFunction: null }, reachThreshold: { classPropertyName: "reachThreshold", publicName: "reachThreshold", isSignal: true, isRequired: false, transformFunction: null }, focusable: { classPropertyName: "focusable", publicName: "focusable", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, overscrollBehavior: { classPropertyName: "overscrollBehavior", publicName: "overscrollBehavior", isSignal: true, isRequired: false, transformFunction: null }, showTrack: { classPropertyName: "showTrack", publicName: "showTrack", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { gogScroll: "gogScroll", gogReachStart: "gogReachStart", gogReachEnd: "gogReachEnd" }, viewQueries: [{ propertyName: "viewportRef", first: true, predicate: ["viewport"], descendants: true, isSignal: true }, { propertyName: "contentRef", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  class=\"gog-scroll\"\r\n  [class.gog-scroll--thin]=\"resolvedSize() === 'thin'\"\r\n  [class.gog-scroll--v]=\"axis() !== 'horizontal'\"\r\n  [class.gog-scroll--h]=\"axis() !== 'vertical'\"\r\n  [class.gog-scroll--both]=\"axis() === 'both'\"\r\n  [class.gog-scroll--dragging]=\"dragAxis() !== null\"\r\n>\r\n  <div\r\n    #viewport\r\n    class=\"gog-scroll__viewport\"\r\n    [style.overflow-y]=\"viewportOverflowY()\"\r\n    [style.overflow-x]=\"viewportOverflowX()\"\r\n    [style.overscroll-behavior-y]=\"viewportOverscrollY()\"\r\n    [style.overscroll-behavior-x]=\"viewportOverscrollX()\"\r\n    [attr.tabindex]=\"focusable() ? 0 : null\"\r\n    [attr.role]=\"focusable() ? 'region' : null\"\r\n    [attr.aria-label]=\"focusable() && ariaLabel() ? ariaLabel() : null\"\r\n    (scroll)=\"onScroll()\"\r\n    (pointerenter)=\"onActivity()\"\r\n    (pointermove)=\"onActivity()\"\r\n  >\r\n    <div #content class=\"gog-scroll__content\">\r\n      <ng-content />\r\n    </div>\r\n  </div>\r\n\r\n  @if (resolvedShowTrack() && showTrackV()) {\r\n    <div\r\n      class=\"gog-scroll__track gog-scroll__track--v\"\r\n      [class.gog-scroll__track--visible]=\"\r\n        !resolvedAutoHide() || interacting() || dragAxis() === 'vertical'\r\n      \"\r\n      (pointerdown)=\"onTrackPointerDown($event, 'vertical')\"\r\n    >\r\n      <div\r\n        class=\"gog-scroll__thumb gog-scroll__thumb--v\"\r\n        [class.gog-scroll__thumb--active]=\"dragAxis() === 'vertical'\"\r\n        [style.height.%]=\"thumbSizeV()\"\r\n        [style.top.%]=\"thumbPosV()\"\r\n        (pointerdown)=\"onThumbPointerDown($event, 'vertical')\"\r\n        (pointermove)=\"onThumbPointerMove($event, 'vertical')\"\r\n        (pointerup)=\"onThumbPointerUp($event)\"\r\n        (pointercancel)=\"onThumbPointerUp($event)\"\r\n      ></div>\r\n    </div>\r\n  }\r\n\r\n  @if (resolvedShowTrack() && showTrackH()) {\r\n    <div\r\n      class=\"gog-scroll__track gog-scroll__track--h\"\r\n      [class.gog-scroll__track--visible]=\"\r\n        !resolvedAutoHide() || interacting() || dragAxis() === 'horizontal'\r\n      \"\r\n      (pointerdown)=\"onTrackPointerDown($event, 'horizontal')\"\r\n    >\r\n      <div\r\n        class=\"gog-scroll__thumb gog-scroll__thumb--h\"\r\n        [class.gog-scroll__thumb--active]=\"dragAxis() === 'horizontal'\"\r\n        [style.width.%]=\"thumbSizeH()\"\r\n        [style.left.%]=\"thumbPosH()\"\r\n        (pointerdown)=\"onThumbPointerDown($event, 'horizontal')\"\r\n        (pointermove)=\"onThumbPointerMove($event, 'horizontal')\"\r\n        (pointerup)=\"onThumbPointerUp($event)\"\r\n        (pointercancel)=\"onThumbPointerUp($event)\"\r\n      ></div>\r\n    </div>\r\n  }\r\n\r\n  @if (resolvedShowTrack() && axis() === 'both' && showTrackV() && showTrackH()) {\r\n    <div class=\"gog-scroll__corner\" aria-hidden=\"true\"></div>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column}.gog-scroll{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;position:relative;width:100%;contain:layout style;--gog-scroll-track-width: var(--gog-scroll-normal-track-width);--gog-scroll-thumb-min-size: var(--gog-scroll-normal-thumb-min-size);--gog-scroll-thumb-hit-padding: var(--gog-scroll-normal-thumb-hit-padding)}.gog-scroll--thin{--gog-scroll-track-width: var(--gog-scroll-thin-track-width);--gog-scroll-thumb-min-size: var(--gog-scroll-thin-thumb-min-size);--gog-scroll-thumb-hit-padding: var(--gog-scroll-thin-thumb-hit-padding)}.gog-scroll__viewport{flex:1 1 auto;min-height:0;width:100%;overflow-anchor:none;scrollbar-width:none;-ms-overflow-style:none}.gog-scroll__viewport::-webkit-scrollbar{display:none;width:0;height:0}.gog-scroll__viewport:focus-visible{outline:var(--gog-scroll-focus-ring-width) solid var(--gog-scroll-focus-ring);outline-offset:calc(var(--gog-scroll-focus-ring-width) * -1)}.gog-scroll__track{position:absolute;z-index:1;background-color:var(--gog-scroll-track-bg);border-radius:var(--gog-scroll-track-radius);opacity:0;pointer-events:none;transition:opacity var(--gog-scroll-fade-duration) var(--gog-easing)}.gog-scroll__track--visible{opacity:1;pointer-events:auto}.gog-scroll__track--v{top:0;right:0;bottom:0;width:var(--gog-scroll-track-width)}.gog-scroll--both .gog-scroll__track--v{bottom:var(--gog-scroll-track-width)}.gog-scroll__track--h{left:0;right:0;bottom:0;height:var(--gog-scroll-track-width)}.gog-scroll--both .gog-scroll__track--h{right:var(--gog-scroll-track-width)}.gog-scroll__thumb{position:absolute;background-color:var(--gog-scroll-thumb-bg);border-radius:var(--gog-scroll-thumb-radius);cursor:pointer;touch-action:none;transition:background-color var(--gog-scroll-fade-duration) var(--gog-easing)}.gog-scroll__thumb:before{content:\"\";position:absolute;inset:calc(-1 * var(--gog-scroll-thumb-hit-padding))}.gog-scroll__thumb--v{left:var(--gog-scroll-thumb-inset);right:var(--gog-scroll-thumb-inset);min-height:var(--gog-scroll-thumb-min-size)}.gog-scroll__thumb--h{top:var(--gog-scroll-thumb-inset);bottom:var(--gog-scroll-thumb-inset);min-width:var(--gog-scroll-thumb-min-size)}.gog-scroll__thumb:hover{background-color:var(--gog-scroll-thumb-hover-bg)}.gog-scroll__thumb--active{background-color:var(--gog-scroll-thumb-active-bg)}.gog-scroll__corner{position:absolute;right:0;bottom:0;z-index:1;width:var(--gog-scroll-track-width);height:var(--gog-scroll-track-width);background-color:var(--gog-scroll-corner-bg)}@media(prefers-reduced-motion:reduce){.gog-scroll__track,.gog-scroll__thumb{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ScrollComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gog-scroll', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"gog-scroll\"\r\n  [class.gog-scroll--thin]=\"resolvedSize() === 'thin'\"\r\n  [class.gog-scroll--v]=\"axis() !== 'horizontal'\"\r\n  [class.gog-scroll--h]=\"axis() !== 'vertical'\"\r\n  [class.gog-scroll--both]=\"axis() === 'both'\"\r\n  [class.gog-scroll--dragging]=\"dragAxis() !== null\"\r\n>\r\n  <div\r\n    #viewport\r\n    class=\"gog-scroll__viewport\"\r\n    [style.overflow-y]=\"viewportOverflowY()\"\r\n    [style.overflow-x]=\"viewportOverflowX()\"\r\n    [style.overscroll-behavior-y]=\"viewportOverscrollY()\"\r\n    [style.overscroll-behavior-x]=\"viewportOverscrollX()\"\r\n    [attr.tabindex]=\"focusable() ? 0 : null\"\r\n    [attr.role]=\"focusable() ? 'region' : null\"\r\n    [attr.aria-label]=\"focusable() && ariaLabel() ? ariaLabel() : null\"\r\n    (scroll)=\"onScroll()\"\r\n    (pointerenter)=\"onActivity()\"\r\n    (pointermove)=\"onActivity()\"\r\n  >\r\n    <div #content class=\"gog-scroll__content\">\r\n      <ng-content />\r\n    </div>\r\n  </div>\r\n\r\n  @if (showTrackV()) {\r\n    <div\r\n      class=\"gog-scroll__track gog-scroll__track--v\"\r\n      [class.gog-scroll__track--visible]=\"\r\n        !resolvedAutoHide() || interacting() || dragAxis() === 'vertical'\r\n      \"\r\n      (pointerdown)=\"onTrackPointerDown($event, 'vertical')\"\r\n    >\r\n      <div\r\n        class=\"gog-scroll__thumb gog-scroll__thumb--v\"\r\n        [class.gog-scroll__thumb--active]=\"dragAxis() === 'vertical'\"\r\n        [style.height.%]=\"thumbSizeV()\"\r\n        [style.top.%]=\"thumbPosV()\"\r\n        (pointerdown)=\"onThumbPointerDown($event, 'vertical')\"\r\n        (pointermove)=\"onThumbPointerMove($event, 'vertical')\"\r\n        (pointerup)=\"onThumbPointerUp($event)\"\r\n        (pointercancel)=\"onThumbPointerUp($event)\"\r\n      ></div>\r\n    </div>\r\n  }\r\n\r\n  @if (showTrackH()) {\r\n    <div\r\n      class=\"gog-scroll__track gog-scroll__track--h\"\r\n      [class.gog-scroll__track--visible]=\"\r\n        !resolvedAutoHide() || interacting() || dragAxis() === 'horizontal'\r\n      \"\r\n      (pointerdown)=\"onTrackPointerDown($event, 'horizontal')\"\r\n    >\r\n      <div\r\n        class=\"gog-scroll__thumb gog-scroll__thumb--h\"\r\n        [class.gog-scroll__thumb--active]=\"dragAxis() === 'horizontal'\"\r\n        [style.width.%]=\"thumbSizeH()\"\r\n        [style.left.%]=\"thumbPosH()\"\r\n        (pointerdown)=\"onThumbPointerDown($event, 'horizontal')\"\r\n        (pointermove)=\"onThumbPointerMove($event, 'horizontal')\"\r\n        (pointerup)=\"onThumbPointerUp($event)\"\r\n        (pointercancel)=\"onThumbPointerUp($event)\"\r\n      ></div>\r\n    </div>\r\n  }\r\n\r\n  @if (axis() === 'both' && showTrackV() && showTrackH()) {\r\n    <div class=\"gog-scroll__corner\" aria-hidden=\"true\"></div>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column}.gog-scroll{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;position:relative;width:100%;contain:layout style;--gog-scroll-track-width: var(--gog-scroll-normal-track-width);--gog-scroll-thumb-min-size: var(--gog-scroll-normal-thumb-min-size)}.gog-scroll--thin{--gog-scroll-track-width: var(--gog-scroll-thin-track-width);--gog-scroll-thumb-min-size: var(--gog-scroll-thin-thumb-min-size)}.gog-scroll__viewport{flex:1 1 auto;min-height:0;width:100%;overflow-anchor:none;scrollbar-width:none;-ms-overflow-style:none}.gog-scroll__viewport::-webkit-scrollbar{display:none;width:0;height:0}.gog-scroll__viewport:focus-visible{outline:var(--gog-scroll-focus-ring-width) solid var(--gog-scroll-focus-ring);outline-offset:calc(var(--gog-scroll-focus-ring-width) * -1)}.gog-scroll__track{position:absolute;z-index:1;background-color:var(--gog-scroll-track-bg);border-radius:var(--gog-scroll-track-radius);opacity:0;pointer-events:none;transition:opacity var(--gog-scroll-fade-duration) var(--gog-easing)}.gog-scroll__track--visible{opacity:1;pointer-events:auto}.gog-scroll__track--v{top:0;right:0;bottom:0;width:var(--gog-scroll-track-width)}.gog-scroll--both .gog-scroll__track--v{bottom:var(--gog-scroll-track-width)}.gog-scroll__track--h{left:0;right:0;bottom:0;height:var(--gog-scroll-track-width)}.gog-scroll--both .gog-scroll__track--h{right:var(--gog-scroll-track-width)}.gog-scroll__thumb{position:absolute;background-color:var(--gog-scroll-thumb-bg);border-radius:var(--gog-scroll-thumb-radius);cursor:pointer;touch-action:none;transition:background-color var(--gog-scroll-fade-duration) var(--gog-easing)}.gog-scroll__thumb--v{left:var(--gog-scroll-thumb-inset);right:var(--gog-scroll-thumb-inset);min-height:var(--gog-scroll-thumb-min-size)}.gog-scroll__thumb--h{top:var(--gog-scroll-thumb-inset);bottom:var(--gog-scroll-thumb-inset);min-width:var(--gog-scroll-thumb-min-size)}.gog-scroll__thumb:hover{background-color:var(--gog-scroll-thumb-hover-bg)}.gog-scroll__thumb--active{background-color:var(--gog-scroll-thumb-active-bg)}.gog-scroll__corner{position:absolute;right:0;bottom:0;z-index:1;width:var(--gog-scroll-track-width);height:var(--gog-scroll-track-width);background-color:var(--gog-scroll-corner-bg)}@media(prefers-reduced-motion:reduce){.gog-scroll__track,.gog-scroll__thumb{transition:none}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { axis: [{ type: i0.Input, args: [{ isSignal: true, alias: "axis", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], autoHide: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoHide", required: false }] }], hideDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideDelay", required: false }] }], reachThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "reachThreshold", required: false }] }], focusable: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusable", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], overscrollBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "overscrollBehavior", required: false }] }], gogScroll: [{ type: i0.Output, args: ["gogScroll"] }], gogReachStart: [{ type: i0.Output, args: ["gogReachStart"] }], gogReachEnd: [{ type: i0.Output, args: ["gogReachEnd"] }], viewportRef: [{ type: i0.ViewChild, args: ['viewport', { isSignal: true }] }], contentRef: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }] } });
+            args: [{ selector: 'gog-scroll', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"gog-scroll\"\r\n  [class.gog-scroll--thin]=\"resolvedSize() === 'thin'\"\r\n  [class.gog-scroll--v]=\"axis() !== 'horizontal'\"\r\n  [class.gog-scroll--h]=\"axis() !== 'vertical'\"\r\n  [class.gog-scroll--both]=\"axis() === 'both'\"\r\n  [class.gog-scroll--dragging]=\"dragAxis() !== null\"\r\n>\r\n  <div\r\n    #viewport\r\n    class=\"gog-scroll__viewport\"\r\n    [style.overflow-y]=\"viewportOverflowY()\"\r\n    [style.overflow-x]=\"viewportOverflowX()\"\r\n    [style.overscroll-behavior-y]=\"viewportOverscrollY()\"\r\n    [style.overscroll-behavior-x]=\"viewportOverscrollX()\"\r\n    [attr.tabindex]=\"focusable() ? 0 : null\"\r\n    [attr.role]=\"focusable() ? 'region' : null\"\r\n    [attr.aria-label]=\"focusable() && ariaLabel() ? ariaLabel() : null\"\r\n    (scroll)=\"onScroll()\"\r\n    (pointerenter)=\"onActivity()\"\r\n    (pointermove)=\"onActivity()\"\r\n  >\r\n    <div #content class=\"gog-scroll__content\">\r\n      <ng-content />\r\n    </div>\r\n  </div>\r\n\r\n  @if (resolvedShowTrack() && showTrackV()) {\r\n    <div\r\n      class=\"gog-scroll__track gog-scroll__track--v\"\r\n      [class.gog-scroll__track--visible]=\"\r\n        !resolvedAutoHide() || interacting() || dragAxis() === 'vertical'\r\n      \"\r\n      (pointerdown)=\"onTrackPointerDown($event, 'vertical')\"\r\n    >\r\n      <div\r\n        class=\"gog-scroll__thumb gog-scroll__thumb--v\"\r\n        [class.gog-scroll__thumb--active]=\"dragAxis() === 'vertical'\"\r\n        [style.height.%]=\"thumbSizeV()\"\r\n        [style.top.%]=\"thumbPosV()\"\r\n        (pointerdown)=\"onThumbPointerDown($event, 'vertical')\"\r\n        (pointermove)=\"onThumbPointerMove($event, 'vertical')\"\r\n        (pointerup)=\"onThumbPointerUp($event)\"\r\n        (pointercancel)=\"onThumbPointerUp($event)\"\r\n      ></div>\r\n    </div>\r\n  }\r\n\r\n  @if (resolvedShowTrack() && showTrackH()) {\r\n    <div\r\n      class=\"gog-scroll__track gog-scroll__track--h\"\r\n      [class.gog-scroll__track--visible]=\"\r\n        !resolvedAutoHide() || interacting() || dragAxis() === 'horizontal'\r\n      \"\r\n      (pointerdown)=\"onTrackPointerDown($event, 'horizontal')\"\r\n    >\r\n      <div\r\n        class=\"gog-scroll__thumb gog-scroll__thumb--h\"\r\n        [class.gog-scroll__thumb--active]=\"dragAxis() === 'horizontal'\"\r\n        [style.width.%]=\"thumbSizeH()\"\r\n        [style.left.%]=\"thumbPosH()\"\r\n        (pointerdown)=\"onThumbPointerDown($event, 'horizontal')\"\r\n        (pointermove)=\"onThumbPointerMove($event, 'horizontal')\"\r\n        (pointerup)=\"onThumbPointerUp($event)\"\r\n        (pointercancel)=\"onThumbPointerUp($event)\"\r\n      ></div>\r\n    </div>\r\n  }\r\n\r\n  @if (resolvedShowTrack() && axis() === 'both' && showTrackV() && showTrackH()) {\r\n    <div class=\"gog-scroll__corner\" aria-hidden=\"true\"></div>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column}.gog-scroll{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;position:relative;width:100%;contain:layout style;--gog-scroll-track-width: var(--gog-scroll-normal-track-width);--gog-scroll-thumb-min-size: var(--gog-scroll-normal-thumb-min-size);--gog-scroll-thumb-hit-padding: var(--gog-scroll-normal-thumb-hit-padding)}.gog-scroll--thin{--gog-scroll-track-width: var(--gog-scroll-thin-track-width);--gog-scroll-thumb-min-size: var(--gog-scroll-thin-thumb-min-size);--gog-scroll-thumb-hit-padding: var(--gog-scroll-thin-thumb-hit-padding)}.gog-scroll__viewport{flex:1 1 auto;min-height:0;width:100%;overflow-anchor:none;scrollbar-width:none;-ms-overflow-style:none}.gog-scroll__viewport::-webkit-scrollbar{display:none;width:0;height:0}.gog-scroll__viewport:focus-visible{outline:var(--gog-scroll-focus-ring-width) solid var(--gog-scroll-focus-ring);outline-offset:calc(var(--gog-scroll-focus-ring-width) * -1)}.gog-scroll__track{position:absolute;z-index:1;background-color:var(--gog-scroll-track-bg);border-radius:var(--gog-scroll-track-radius);opacity:0;pointer-events:none;transition:opacity var(--gog-scroll-fade-duration) var(--gog-easing)}.gog-scroll__track--visible{opacity:1;pointer-events:auto}.gog-scroll__track--v{top:0;right:0;bottom:0;width:var(--gog-scroll-track-width)}.gog-scroll--both .gog-scroll__track--v{bottom:var(--gog-scroll-track-width)}.gog-scroll__track--h{left:0;right:0;bottom:0;height:var(--gog-scroll-track-width)}.gog-scroll--both .gog-scroll__track--h{right:var(--gog-scroll-track-width)}.gog-scroll__thumb{position:absolute;background-color:var(--gog-scroll-thumb-bg);border-radius:var(--gog-scroll-thumb-radius);cursor:pointer;touch-action:none;transition:background-color var(--gog-scroll-fade-duration) var(--gog-easing)}.gog-scroll__thumb:before{content:\"\";position:absolute;inset:calc(-1 * var(--gog-scroll-thumb-hit-padding))}.gog-scroll__thumb--v{left:var(--gog-scroll-thumb-inset);right:var(--gog-scroll-thumb-inset);min-height:var(--gog-scroll-thumb-min-size)}.gog-scroll__thumb--h{top:var(--gog-scroll-thumb-inset);bottom:var(--gog-scroll-thumb-inset);min-width:var(--gog-scroll-thumb-min-size)}.gog-scroll__thumb:hover{background-color:var(--gog-scroll-thumb-hover-bg)}.gog-scroll__thumb--active{background-color:var(--gog-scroll-thumb-active-bg)}.gog-scroll__corner{position:absolute;right:0;bottom:0;z-index:1;width:var(--gog-scroll-track-width);height:var(--gog-scroll-track-width);background-color:var(--gog-scroll-corner-bg)}@media(prefers-reduced-motion:reduce){.gog-scroll__track,.gog-scroll__thumb{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { axis: [{ type: i0.Input, args: [{ isSignal: true, alias: "axis", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], autoHide: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoHide", required: false }] }], hideDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideDelay", required: false }] }], reachThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "reachThreshold", required: false }] }], focusable: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusable", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], overscrollBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "overscrollBehavior", required: false }] }], showTrack: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTrack", required: false }] }], gogScroll: [{ type: i0.Output, args: ["gogScroll"] }], gogReachStart: [{ type: i0.Output, args: ["gogReachStart"] }], gogReachEnd: [{ type: i0.Output, args: ["gogReachEnd"] }], viewportRef: [{ type: i0.ViewChild, args: ['viewport', { isSignal: true }] }], contentRef: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }] } });
 
 /** Built-in defaults, used when neither the instance input nor `GOG_CONFIG` supplies one. */
 const DEFAULT_SEARCH_DEBOUNCE = 300;
 const DEFAULT_MIN_LENGTH = 1;
+const DEFAULT_OPEN_ON_FOCUS = true;
 /**
  * A text field that suggests options as you type.
  *
@@ -1919,6 +1934,13 @@ class AutocompleteComponent extends GogDropdownBase {
     filterLocal = input(true, ...(ngDevMode ? [{ debugName: "filterLocal" }] : /* istanbul ignore next */ []));
     /** How many characters before the panel opens at all. */
     minLength = input(undefined, ...(ngDevMode ? [{ debugName: "minLength" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether focusing the field opens the panel immediately, showing the full option list —
+     * before `minLength` would otherwise have let anything through. Off, the field behaves as
+     * before: nothing opens until enough has been typed. Unset, falls back to
+     * `GOG_CONFIG.autocomplete.openOnFocus`, then to `true`.
+     */
+    openOnFocus = input(undefined, ...(ngDevMode ? [{ debugName: "openOnFocus" }] : /* istanbul ignore next */ []));
     /** Milliseconds of quiet before `gogSearch` fires. `0` emits on every keystroke. */
     searchDebounce = input(undefined, ...(ngDevMode ? [{ debugName: "searchDebounce" }] : /* istanbul ignore next */ []));
     /** Shows a spinner in the trailing slot — for a server-backed source that is still loading. */
@@ -1939,6 +1961,12 @@ class AutocompleteComponent extends GogDropdownBase {
     forceSelection = input(true, ...(ngDevMode ? [{ debugName: "forceSelection" }] : /* istanbul ignore next */ []));
     /** The current query, debounced. Wire a server-side lookup to this. */
     gogSearch = output();
+    /**
+     * Fires when the panel is scrolled to the end of the option list — the signal to fetch and
+     * append another page of a large or server-backed source, rather than handing the whole
+     * thing over up front. Forwarded from the panel's own `gog-scroll`.
+     */
+    gogLoadMore = output();
     panelTemplate = viewChild('panelTpl', ...(ngDevMode ? [{ debugName: "panelTemplate" }] : /* istanbul ignore next */ []));
     /** A cleared autocomplete is `null`, whatever `TValue` the consumer bound. */
     emptyValue = null;
@@ -1962,8 +1990,17 @@ class AutocompleteComponent extends GogDropdownBase {
     }
     resolvedMinLength = computed(() => resolveConfigured(this.minLength(), this.config.autocomplete?.minLength, DEFAULT_MIN_LENGTH), ...(ngDevMode ? [{ debugName: "resolvedMinLength" }] : /* istanbul ignore next */ []));
     resolvedDebounce = computed(() => resolveConfigured(this.searchDebounce(), this.config.autocomplete?.searchDebounce, DEFAULT_SEARCH_DEBOUNCE), ...(ngDevMode ? [{ debugName: "resolvedDebounce" }] : /* istanbul ignore next */ []));
+    resolvedOpenOnFocus = computed(() => resolveConfigured(this.openOnFocus(), this.config.autocomplete?.openOnFocus, DEFAULT_OPEN_ON_FOCUS), ...(ngDevMode ? [{ debugName: "resolvedOpenOnFocus" }] : /* istanbul ignore next */ []));
     /** What is actually in the `<input>`. Not the same thing as the committed `value`. */
     query = signal('', ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+    /**
+     * True right after `openOnFocus` opens the panel, until the user actually types. The field
+     * may already be showing a previously-selected label at that point — this keeps the panel's
+     * list unfiltered by it, so focusing shows every option rather than just the one that
+     * happens to match the current text. Cleared on the first keystroke, so filtering resumes
+     * exactly as before.
+     */
+    browsingAll = signal(false, ...(ngDevMode ? [{ debugName: "browsingAll" }] : /* istanbul ignore next */ []));
     /**
      * Which option the arrows have highlighted. `-1` means none — Enter then does nothing rather
      * than committing whichever row happened to be first, which is what stops a fast typist from
@@ -1983,7 +2020,7 @@ class AutocompleteComponent extends GogDropdownBase {
      * estimate all reading the same set.
      */
     visibleOptions = computed(() => {
-        const query = this.query().trim();
+        const query = this.browsingAll() ? '' : this.query().trim();
         if (!this.filterLocal() || query === '')
             return this.options();
         const match = this.filterMatch();
@@ -2015,6 +2052,7 @@ class AutocompleteComponent extends GogDropdownBase {
     }
     onInput(event) {
         const text = event.target.value;
+        this.browsingAll.set(false);
         this.query.set(text);
         this.activeIndex.set(-1);
         // Whether editing over a selection drops it depends on which mode this is in.
@@ -2100,6 +2138,10 @@ class AutocompleteComponent extends GogDropdownBase {
     }
     onInputFocus() {
         this.onFocusIn();
+        if (this.resolvedOpenOnFocus() && !this.isOpen()) {
+            this.browsingAll.set(true);
+            this.open();
+        }
     }
     onInputBlur() {
         this.onFocusOut();
@@ -2111,6 +2153,7 @@ class AutocompleteComponent extends GogDropdownBase {
     close() {
         super.close();
         this.activeIndex.set(-1);
+        this.browsingAll.set(false);
     }
     /** Clearing has to empty the *text* as well; the base only knows about the value. */
     clearValue(event) {
@@ -2180,15 +2223,15 @@ 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 }, 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" }, host: { properties: { "style.--gog-autocomplete-min-width": "minWidth()" } }, viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panelTpl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!--\n  Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\n  context, which traps the panel's z-index inside it and lets whatever follows on the page\n  paint over the open dropdown.\n-->\n<div\n  class=\"gog-autocomplete\"\n  [class]=\"sizeClass()\"\n  [class.gog-autocomplete--clearable]=\"showClear()\"\n  [class.gog-autocomplete--disabled]=\"isDisabled()\"\n  [class.gog-autocomplete--open]=\"isOpen()\"\n  [class.gog-autocomplete--loading]=\"loading()\"\n  [class.gog-autocomplete--float-in]=\"resolvedFloatLabel() === 'in'\"\n  [class.gog-autocomplete--float-on]=\"resolvedFloatLabel() === 'on'\"\n  [class.gog-autocomplete--float-over]=\"resolvedFloatLabel() === 'over'\"\n  [class.gog-autocomplete--floated]=\"isFloatLabelFloated()\"\n>\n  @if (label() && resolvedFloatLabel() === 'none') {\n    <label class=\"gog-autocomplete__label\" [for]=\"triggerId()\">{{ label() }}</label>\n  }\n\n  <div class=\"gog-autocomplete__field\">\n    @if (label() && isFloatLabelActive()) {\n      <label class=\"gog-autocomplete__label gog-autocomplete__label--float\" [for]=\"triggerId()\">{{\n        label()\n      }}</label>\n    }\n\n    <!--\n      The input *is* the combobox \u2014 role, aria-autocomplete and aria-activedescendant all sit\n      here, and DOM focus never leaves it. That is the difference from gog-select, where the\n      trigger is a button and focus moves onto the option itself.\n    -->\n    <input\n      type=\"text\"\n      class=\"gog-autocomplete__control\"\n      autocomplete=\"off\"\n      role=\"combobox\"\n      aria-autocomplete=\"list\"\n      [id]=\"triggerId()\"\n      [disabled]=\"isDisabled()\"\n      [value]=\"query()\"\n      [placeholder]=\"effectivePlaceholder()\"\n      [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || null\"\n      [attr.aria-controls]=\"listboxId()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-activedescendant]=\"activeOptionId()\"\n      [attr.aria-invalid]=\"hasError()\"\n      [attr.aria-describedby]=\"errorId()\"\n      (input)=\"onInput($event)\"\n      (keydown)=\"onInputKeydown($event)\"\n      (focus)=\"onInputFocus()\"\n      (blur)=\"onInputBlur()\"\n    />\n\n    <span class=\"gog-autocomplete__actions\">\n      @if (loading()) {\n        <gog-spinner class=\"gog-autocomplete__spinner\" size=\"xsm\" ariaLabel=\"Loading\" />\n      }\n\n      @if (showClear()) {\n        <button\n          type=\"button\"\n          class=\"gog-autocomplete__clear gog-inline-center\"\n          [attr.aria-label]=\"clearAriaLabel()\"\n          (mousedown)=\"onOptionMousedown($event)\"\n          (click)=\"clearValue($event)\"\n        >\n          <gog-icon name=\"close\" />\n        </button>\n      }\n    </span>\n\n    @if (isOpen() && !resolvedAppendToBody()) {\n      <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n    }\n  </div>\n\n  @if (hasError()) {\n    <span class=\"gog-autocomplete__error\" [attr.id]=\"errorId()\" role=\"alert\">\n      {{ visibleError() }}\n    </span>\n  }\n</div>\n\n<!--\n  One template for both render modes \u2014 inline, or stamped into <body> by the overlay when\n  `appendToBody` is set, which is why the portal modifier and the resolved coordinates are\n  applied conditionally.\n-->\n<ng-template #panelTpl>\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 -->\n  <div\n    [id]=\"listboxId()\"\n    class=\"gog-autocomplete__dropdown\"\n    [class.gog-autocomplete__dropdown--up]=\"\n      !resolvedAppendToBody() && dropdownDirectionState() === 'up'\n    \"\n    [class.gog-autocomplete__dropdown--portal]=\"resolvedAppendToBody()\"\n    [class]=\"panelSizeClass()\"\n    [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\n    [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\n    [style.width]=\"resolvedAppendToBody() ? resolvedPanelWidth() : null\"\n    [style.min-width]=\"resolvedAppendToBody() ? resolvedPanelMinWidth() : null\"\n    [style.max-height]=\"resolvedAppendToBody() ? resolvedPanelMaxHeight() : null\"\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\n    role=\"listbox\"\n    [attr.aria-label]=\"label() || ariaLabel() || null\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <gog-scroll\n      size=\"thin\"\n      [focusable]=\"false\"\n      overscrollBehavior=\"contain\"\n      class=\"gog-autocomplete__scroll\"\n    >\n      @if (visibleOptions().length === 0) {\n        <p class=\"gog-autocomplete__empty\">{{ emptyMessage() }}</p>\n      }\n\n      @for (option of visibleOptions(); track valueOf(option); let i = $index) {\n        <!--\n          A div, not a button: focus stays in the input, so these rows are never focused and a\n          button would only add tab stops and a second Enter handler. The highlight is pointed\n          at with aria-activedescendant instead.\n\n          mousedown is prevented so clicking a row doesn't blur the input first \u2014 that blur\n          would close the panel and, under forceSelection, wipe the text before the click lands.\n        -->\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. -->\n        <div\n          class=\"gog-autocomplete__option\"\n          role=\"option\"\n          [id]=\"optionId(i)\"\n          [attr.aria-selected]=\"isSelected(option)\"\n          [attr.aria-disabled]=\"isOptionDisabled(option)\"\n          [class.gog-autocomplete__option--active]=\"i === activeIndex()\"\n          [class.gog-autocomplete__option--selected]=\"isSelected(option)\"\n          [class.gog-autocomplete__option--disabled]=\"isOptionDisabled(option)\"\n          (mousedown)=\"onOptionMousedown($event)\"\n          (click)=\"onOptionClick(option, $event)\"\n        >\n          @if (optionSlot(); as slot) {\n            <ng-container\n              [ngTemplateOutlet]=\"slot.templateRef\"\n              [ngTemplateOutletContext]=\"optionContext(option, isSelected(option))\"\n            />\n          } @else {\n            <span class=\"gog-autocomplete__option-label\">{{ labelOf(option) }}</span>\n          }\n        </div>\n      }\n    </gog-scroll>\n  </div>\n</ng-template>\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;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)}.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{display:block;max-height:var(--gog-autocomplete-panel-max-height)}.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;left: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;left: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"], 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]=\"clearAriaLabel()\"\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;left: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;left: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: "<!--\n  Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\n  context, which traps the panel's z-index inside it and lets whatever follows on the page\n  paint over the open dropdown.\n-->\n<div\n  class=\"gog-autocomplete\"\n  [class]=\"sizeClass()\"\n  [class.gog-autocomplete--clearable]=\"showClear()\"\n  [class.gog-autocomplete--disabled]=\"isDisabled()\"\n  [class.gog-autocomplete--open]=\"isOpen()\"\n  [class.gog-autocomplete--loading]=\"loading()\"\n  [class.gog-autocomplete--float-in]=\"resolvedFloatLabel() === 'in'\"\n  [class.gog-autocomplete--float-on]=\"resolvedFloatLabel() === 'on'\"\n  [class.gog-autocomplete--float-over]=\"resolvedFloatLabel() === 'over'\"\n  [class.gog-autocomplete--floated]=\"isFloatLabelFloated()\"\n>\n  @if (label() && resolvedFloatLabel() === 'none') {\n    <label class=\"gog-autocomplete__label\" [for]=\"triggerId()\">{{ label() }}</label>\n  }\n\n  <div class=\"gog-autocomplete__field\">\n    @if (label() && isFloatLabelActive()) {\n      <label class=\"gog-autocomplete__label gog-autocomplete__label--float\" [for]=\"triggerId()\">{{\n        label()\n      }}</label>\n    }\n\n    <!--\n      The input *is* the combobox \u2014 role, aria-autocomplete and aria-activedescendant all sit\n      here, and DOM focus never leaves it. That is the difference from gog-select, where the\n      trigger is a button and focus moves onto the option itself.\n    -->\n    <input\n      type=\"text\"\n      class=\"gog-autocomplete__control\"\n      autocomplete=\"off\"\n      role=\"combobox\"\n      aria-autocomplete=\"list\"\n      [id]=\"triggerId()\"\n      [disabled]=\"isDisabled()\"\n      [value]=\"query()\"\n      [placeholder]=\"effectivePlaceholder()\"\n      [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || null\"\n      [attr.aria-controls]=\"listboxId()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-activedescendant]=\"activeOptionId()\"\n      [attr.aria-invalid]=\"hasError()\"\n      [attr.aria-describedby]=\"errorId()\"\n      (input)=\"onInput($event)\"\n      (keydown)=\"onInputKeydown($event)\"\n      (focus)=\"onInputFocus()\"\n      (blur)=\"onInputBlur()\"\n    />\n\n    <span class=\"gog-autocomplete__actions\">\n      @if (loading()) {\n        <gog-spinner class=\"gog-autocomplete__spinner\" size=\"xsm\" ariaLabel=\"Loading\" />\n      }\n\n      @if (showClear()) {\n        <button\n          type=\"button\"\n          class=\"gog-autocomplete__clear gog-inline-center\"\n          [attr.aria-label]=\"clearAriaLabel()\"\n          (mousedown)=\"onOptionMousedown($event)\"\n          (click)=\"clearValue($event)\"\n        >\n          <gog-icon name=\"close\" />\n        </button>\n      }\n    </span>\n\n    @if (isOpen() && !resolvedAppendToBody()) {\n      <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n    }\n  </div>\n\n  @if (hasError()) {\n    <span class=\"gog-autocomplete__error\" [attr.id]=\"errorId()\" role=\"alert\">\n      {{ visibleError() }}\n    </span>\n  }\n</div>\n\n<!--\n  One template for both render modes \u2014 inline, or stamped into <body> by the overlay when\n  `appendToBody` is set, which is why the portal modifier and the resolved coordinates are\n  applied conditionally.\n-->\n<ng-template #panelTpl>\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 -->\n  <div\n    [id]=\"listboxId()\"\n    class=\"gog-autocomplete__dropdown\"\n    [class.gog-autocomplete__dropdown--up]=\"\n      !resolvedAppendToBody() && dropdownDirectionState() === 'up'\n    \"\n    [class.gog-autocomplete__dropdown--portal]=\"resolvedAppendToBody()\"\n    [class]=\"panelSizeClass()\"\n    [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\n    [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\n    [style.width]=\"resolvedAppendToBody() ? resolvedPanelWidth() : null\"\n    [style.min-width]=\"resolvedAppendToBody() ? resolvedPanelMinWidth() : null\"\n    [style.max-height]=\"resolvedAppendToBody() ? resolvedPanelMaxHeight() : null\"\n    [style.z-index]=\"dropdownZIndex() ?? panelZIndex()\"\n    role=\"listbox\"\n    [attr.aria-label]=\"label() || ariaLabel() || null\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <gog-scroll\n      size=\"thin\"\n      [focusable]=\"false\"\n      overscrollBehavior=\"contain\"\n      class=\"gog-autocomplete__scroll\"\n    >\n      @if (visibleOptions().length === 0) {\n        <p class=\"gog-autocomplete__empty\">{{ emptyMessage() }}</p>\n      }\n\n      @for (option of visibleOptions(); track valueOf(option); let i = $index) {\n        <!--\n          A div, not a button: focus stays in the input, so these rows are never focused and a\n          button would only add tab stops and a second Enter handler. The highlight is pointed\n          at with aria-activedescendant instead.\n\n          mousedown is prevented so clicking a row doesn't blur the input first \u2014 that blur\n          would close the panel and, under forceSelection, wipe the text before the click lands.\n        -->\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. -->\n        <div\n          class=\"gog-autocomplete__option\"\n          role=\"option\"\n          [id]=\"optionId(i)\"\n          [attr.aria-selected]=\"isSelected(option)\"\n          [attr.aria-disabled]=\"isOptionDisabled(option)\"\n          [class.gog-autocomplete__option--active]=\"i === activeIndex()\"\n          [class.gog-autocomplete__option--selected]=\"isSelected(option)\"\n          [class.gog-autocomplete__option--disabled]=\"isOptionDisabled(option)\"\n          (mousedown)=\"onOptionMousedown($event)\"\n          (click)=\"onOptionClick(option, $event)\"\n        >\n          @if (optionSlot(); as slot) {\n            <ng-container\n              [ngTemplateOutlet]=\"slot.templateRef\"\n              [ngTemplateOutletContext]=\"optionContext(option, isSelected(option))\"\n            />\n          } @else {\n            <span class=\"gog-autocomplete__option-label\">{{ labelOf(option) }}</span>\n          }\n        </div>\n      }\n    </gog-scroll>\n  </div>\n</ng-template>\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;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)}.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{display:block;max-height:var(--gog-autocomplete-panel-max-height)}.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;left: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;left: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 }] }], 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"] }], panelTemplate: [{ type: i0.ViewChild, args: ['panelTpl', { isSignal: true }] }] } });
+                    }, 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]=\"clearAriaLabel()\"\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;left: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;left: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. */
 const DEFAULT_MAX = 99;
@@ -2677,6 +2720,26 @@ class TabsComponent {
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether selecting a tab scrolls the (possibly overflowing) header row so the active tab
+     * stays in view — centered where there's room, so its neighbours on both sides stay visible
+     * too, the same "always show what's around the current position" idea `gog-paginator` uses
+     * for pages. Reacts to `activeIndex` however it changes: a click, the arrow keys, or a
+     * consumer setting it directly. On by default; turn it off for a header that never actually
+     * overflows, or to own the scroll position yourself.
+     */
+    scrollActiveIntoView = input(true, ...(ngDevMode ? [{ debugName: "scrollActiveIntoView" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the header row shows its own draggable scroll thumb/track. Native scrolling
+     * (wheel, touch, keyboard) works the same regardless; this is purely the visual affordance.
+     *
+     * Unset, it follows `scrollActiveIntoView`: hidden while that's on, since a second scroll
+     * indicator sitting right next to the active-tab underline reads as two conflicting signals
+     * for the same thing once selecting a tab already moves the row on its own; shown while it's
+     * off, since the track is then the only way to reach an off-screen tab without a keyboard.
+     * Set explicitly to pin it either way regardless of `scrollActiveIntoView`.
+     */
+    showScrollTrack = input(undefined, ...(ngDevMode ? [{ debugName: "showScrollTrack" }] : /* istanbul ignore next */ []));
     /** Emits the newly active index whenever it changes, including via keyboard. */
     gogTabChange = output();
     headerSlot = contentChild(GogTabHeaderDirective, ...(ngDevMode ? [{ debugName: "headerSlot" }] : /* istanbul ignore next */ []));
@@ -2702,6 +2765,32 @@ class TabsComponent {
         const index = this.resolvedIndex();
         return index === -1 ? null : (this.tabs()[index] ?? null);
     }, ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
+    /** See `showScrollTrack`'s doc for why this defaults off precisely when the other is on. */
+    resolvedShowScrollTrack = computed(() => this.showScrollTrack() ?? !this.scrollActiveIntoView(), ...(ngDevMode ? [{ debugName: "resolvedShowScrollTrack" }] : /* istanbul ignore next */ []));
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    /** Instant for the first scroll (page load shouldn't animate into place), smooth after. */
+    hasScrolledOnce = false;
+    constructor() {
+        effect(() => {
+            const index = this.resolvedIndex();
+            const header = this.headerRefs()[index]?.nativeElement;
+            if (!this.isBrowser || !this.scrollActiveIntoView() || !header)
+                return;
+            // Feature-detected: absent in jsdom (so: in unit tests) and in very old browsers, which
+            // then simply keep whatever scroll position they already had.
+            if (typeof header.scrollIntoView !== 'function')
+                return;
+            header.scrollIntoView({
+                inline: 'center',
+                block: 'nearest',
+                behavior: this.hasScrolledOnce && !this.prefersReducedMotion() ? 'smooth' : 'auto',
+            });
+            this.hasScrolledOnce = true;
+        });
+    }
+    prefersReducedMotion() {
+        return (typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches);
+    }
     hostClasses = computed(() => [
         'gog-tabs',
         `gog-tabs--${this.orientation()}`,
@@ -2746,10 +2835,10 @@ class TabsComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TabsComponent, isStandalone: true, selector: "gog-tabs", inputs: { activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", 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 }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange", gogTabChange: "gogTabChange" }, host: { properties: { "class": "hostClasses()" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TabsComponent, isStandalone: true, selector: "gog-tabs", inputs: { activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", 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 }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, scrollActiveIntoView: { classPropertyName: "scrollActiveIntoView", publicName: "scrollActiveIntoView", isSignal: true, isRequired: false, transformFunction: null }, showScrollTrack: { classPropertyName: "showScrollTrack", publicName: "showScrollTrack", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange", gogTabChange: "gogTabChange" }, host: { properties: { "class": "hostClasses()" } }, providers: [
             // forwardRef because the class is not yet defined when this decorator is evaluated.
             { provide: GOG_TABS_STATE, useExisting: forwardRef(() => TabsComponent) },
-        ], queries: [{ propertyName: "tabs", predicate: TabComponent, isSignal: true }, { propertyName: "headerSlot", first: true, predicate: GogTabHeaderDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "headerRefs", predicate: ["tabHeader"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"gog-tabs__header\">\n  <!--\n    gog-scroll rather than a raw overflow-x: a native scrollbar carries no --gog-* tokens and\n    would be the one un-themeable strip inside an otherwise fully themeable component.\n    focusable=false because the tablist already owns the keyboard here.\n  -->\n  <gog-scroll\n    class=\"gog-tabs__scroll\"\n    axis=\"horizontal\"\n    size=\"thin\"\n    [focusable]=\"false\"\n    overscrollBehavior=\"contain\"\n  >\n    <div\n      class=\"gog-tabs__list\"\n      role=\"tablist\"\n      [attr.aria-label]=\"ariaLabel() || null\"\n      [attr.aria-orientation]=\"orientation()\"\n    >\n      @for (tab of tabs(); track tab; let i = $index) {\n        <button\n          #tabHeader\n          type=\"button\"\n          role=\"tab\"\n          class=\"gog-tabs__tab\"\n          [class.gog-tabs__tab--active]=\"i === resolvedIndex()\"\n          [id]=\"tab.headerId\"\n          [attr.aria-selected]=\"i === resolvedIndex()\"\n          [attr.aria-controls]=\"tab.panelId\"\n          [attr.aria-disabled]=\"tab.disabled() ? 'true' : null\"\n          [disabled]=\"tab.disabled()\"\n          [tabindex]=\"i === resolvedIndex() ? 0 : -1\"\n          (click)=\"selectIndex(i)\"\n          (keydown)=\"onHeaderKeydown($event)\"\n        >\n          @if (headerSlot(); as slot) {\n            <ng-container\n              [ngTemplateOutlet]=\"slot.templateRef\"\n              [ngTemplateOutletContext]=\"headerContext(tab, i)\"\n            />\n          } @else {\n            @if (tab.iconName(); as icon) {\n              <gog-icon class=\"gog-tabs__icon\" [name]=\"icon\" [ariaHidden]=\"true\" />\n            }\n            <span class=\"gog-tabs__label\">{{ tab.label() }}</span>\n          }\n        </button>\n      }\n    </div>\n  </gog-scroll>\n</div>\n\n<div class=\"gog-tabs__panels\">\n  <ng-content></ng-content>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;box-sizing:border-box}.gog-tabs__header{position:relative;border-block-end:var(--gog-tabs-header-border-width) var(--gog-tabs-header-border-style) var(--gog-tabs-header-border-color)}.gog-tabs__list{position:relative;display:flex;gap:var(--gog-tabs-gap);min-width:max-content}.gog-tabs__tab{position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;gap:var(--gog-tabs-tab-gap);padding:var(--gog-tabs-tab-padding, var(--gog-tabs-size-padding, var(--gog-tabs-md-padding)));border:0;background-color:var(--gog-tabs-tab-bg, var(--gog-tabs-rest-bg));color:var(--gog-tabs-tab-color, var(--gog-tabs-rest-color));font-family:var(--gog-tabs-font-family);font-size:var(--gog-tabs-tab-font-size, var(--gog-tabs-size-font-size, var(--gog-tabs-md-font-size)));font-weight:var(--gog-tabs-font-weight);letter-spacing:var(--gog-tabs-letter-spacing);line-height:var(--gog-tabs-line-height);text-transform:var(--gog-tabs-text-transform);cursor:pointer;white-space:nowrap;transition:color var(--gog-tabs-transition-duration) var(--gog-easing)}.gog-tabs__tab:hover:not(:disabled){color:var(--gog-tabs-hover-color)}.gog-tabs__tab--active{color:var(--gog-tabs-active-color)}.gog-tabs__tab:disabled{opacity:var(--gog-tabs-disabled-opacity);cursor:not-allowed}.gog-tabs__tab:focus-visible{outline:var(--gog-tabs-focus-ring-width) solid var(--gog-tabs-focus-ring-color);outline-offset:var(--gog-tabs-focus-ring-offset)}.gog-tabs__icon{flex-shrink:0;font-size:var(--gog-tabs-icon-size)}.gog-tabs__tab--active:after{content:\"\";position:absolute;inset-inline:0;inset-block-end:calc(-1 * var(--gog-tabs-header-border-width));height:var(--gog-tabs-indicator-thickness);border-radius:var(--gog-tabs-indicator-radius);background-color:var(--gog-tabs-indicator-color)}.gog-tabs__panels{min-width:0}:host(.gog-tabs--align-center) .gog-tabs__list{justify-content:center}:host(.gog-tabs--align-end) .gog-tabs__list{justify-content:flex-end}:host(.gog-tabs--align-stretch) .gog-tabs__list{min-width:0}:host(.gog-tabs--align-stretch) .gog-tabs__tab{flex:1 1 0}:host(.gog-tabs--vertical){display:flex;align-items:stretch}:host(.gog-tabs--vertical) .gog-tabs__header{border-block-end:0;border-inline-end:var(--gog-tabs-header-border-width) var(--gog-tabs-header-border-style) var(--gog-tabs-header-border-color)}:host(.gog-tabs--vertical) .gog-tabs__list{flex-direction:column;min-width:0}:host(.gog-tabs--vertical) .gog-tabs__tab{justify-content:flex-start}:host(.gog-tabs--vertical) .gog-tabs__tab--active:after{inset-inline:auto calc(-1 * var(--gog-tabs-header-border-width));inset-block:0;width:var(--gog-tabs-indicator-thickness);height:auto}:host(.gog-tabs--vertical) .gog-tabs__panels{flex:1 1 auto}:host(.gog-tabs--xsm){--gog-tabs-size-padding: var(--gog-tabs-xsm-padding);--gog-tabs-size-font-size: var(--gog-tabs-xsm-font-size)}:host(.gog-tabs--sm){--gog-tabs-size-padding: var(--gog-tabs-sm-padding);--gog-tabs-size-font-size: var(--gog-tabs-sm-font-size)}:host(.gog-tabs--md){--gog-tabs-size-padding: var(--gog-tabs-md-padding);--gog-tabs-size-font-size: var(--gog-tabs-md-font-size)}:host(.gog-tabs--lg){--gog-tabs-size-padding: var(--gog-tabs-lg-padding);--gog-tabs-size-font-size: var(--gog-tabs-lg-font-size)}:host(.gog-tabs--slg){--gog-tabs-size-padding: var(--gog-tabs-slg-padding);--gog-tabs-size-font-size: var(--gog-tabs-slg-font-size)}:host(.gog-host--full-width){width:100%}@media(prefers-reduced-motion:reduce){.gog-tabs__tab{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"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], queries: [{ propertyName: "tabs", predicate: TabComponent, isSignal: true }, { propertyName: "headerSlot", first: true, predicate: GogTabHeaderDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "headerRefs", predicate: ["tabHeader"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"gog-tabs__header\">\r\n  <!--\r\n    gog-scroll rather than a raw overflow-x: a native scrollbar carries no --gog-* tokens and\r\n    would be the one un-themeable strip inside an otherwise fully themeable component.\r\n    focusable=false because the tablist already owns the keyboard here.\r\n  -->\r\n  <gog-scroll\r\n    class=\"gog-tabs__scroll\"\r\n    axis=\"horizontal\"\r\n    size=\"thin\"\r\n    [focusable]=\"false\"\r\n    [showTrack]=\"resolvedShowScrollTrack()\"\r\n    overscrollBehavior=\"contain\"\r\n  >\r\n    <div\r\n      class=\"gog-tabs__list\"\r\n      role=\"tablist\"\r\n      [attr.aria-label]=\"ariaLabel() || null\"\r\n      [attr.aria-orientation]=\"orientation()\"\r\n    >\r\n      @for (tab of tabs(); track tab; let i = $index) {\r\n        <button\r\n          #tabHeader\r\n          type=\"button\"\r\n          role=\"tab\"\r\n          class=\"gog-tabs__tab\"\r\n          [class.gog-tabs__tab--active]=\"i === resolvedIndex()\"\r\n          [id]=\"tab.headerId\"\r\n          [attr.aria-selected]=\"i === resolvedIndex()\"\r\n          [attr.aria-controls]=\"tab.panelId\"\r\n          [attr.aria-disabled]=\"tab.disabled() ? 'true' : null\"\r\n          [disabled]=\"tab.disabled()\"\r\n          [tabindex]=\"i === resolvedIndex() ? 0 : -1\"\r\n          (click)=\"selectIndex(i)\"\r\n          (keydown)=\"onHeaderKeydown($event)\"\r\n        >\r\n          @if (headerSlot(); as slot) {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"slot.templateRef\"\r\n              [ngTemplateOutletContext]=\"headerContext(tab, i)\"\r\n            />\r\n          } @else {\r\n            @if (tab.iconName(); as icon) {\r\n              <gog-icon class=\"gog-tabs__icon\" [name]=\"icon\" [ariaHidden]=\"true\" />\r\n            }\r\n            <span class=\"gog-tabs__label\">{{ tab.label() }}</span>\r\n          }\r\n        </button>\r\n      }\r\n    </div>\r\n  </gog-scroll>\r\n</div>\r\n\r\n<div class=\"gog-tabs__panels\">\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;box-sizing:border-box}.gog-tabs__header{position:relative;border-block-end:var(--gog-tabs-header-border-width) var(--gog-tabs-header-border-style) var(--gog-tabs-header-border-color)}.gog-tabs__list{position:relative;display:flex;gap:var(--gog-tabs-gap);min-width:max-content}.gog-tabs__tab{position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;gap:var(--gog-tabs-tab-gap);padding:var(--gog-tabs-tab-padding, var(--gog-tabs-size-padding, var(--gog-tabs-md-padding)));border:0;background-color:var(--gog-tabs-tab-bg, var(--gog-tabs-rest-bg));color:var(--gog-tabs-tab-color, var(--gog-tabs-rest-color));font-family:var(--gog-tabs-font-family);font-size:var(--gog-tabs-tab-font-size, var(--gog-tabs-size-font-size, var(--gog-tabs-md-font-size)));font-weight:var(--gog-tabs-font-weight);letter-spacing:var(--gog-tabs-letter-spacing);line-height:var(--gog-tabs-line-height);text-transform:var(--gog-tabs-text-transform);cursor:pointer;white-space:nowrap;transition:color var(--gog-tabs-transition-duration) var(--gog-easing)}.gog-tabs__tab:hover:not(:disabled){color:var(--gog-tabs-hover-color)}.gog-tabs__tab--active{color:var(--gog-tabs-active-color)}.gog-tabs__tab:disabled{opacity:var(--gog-tabs-disabled-opacity);cursor:not-allowed}.gog-tabs__tab:focus-visible{outline:var(--gog-tabs-focus-ring-width) solid var(--gog-tabs-focus-ring-color);outline-offset:var(--gog-tabs-focus-ring-offset)}.gog-tabs__icon{flex-shrink:0;font-size:var(--gog-tabs-icon-size)}.gog-tabs__tab--active:after{content:\"\";position:absolute;inset-inline:0;inset-block-end:calc(-1 * var(--gog-tabs-header-border-width));height:var(--gog-tabs-indicator-thickness);border-radius:var(--gog-tabs-indicator-radius);background-color:var(--gog-tabs-indicator-color)}.gog-tabs__panels{min-width:0}:host(.gog-tabs--align-center) .gog-tabs__list{justify-content:center}:host(.gog-tabs--align-end) .gog-tabs__list{justify-content:flex-end}:host(.gog-tabs--align-stretch) .gog-tabs__list{min-width:0}:host(.gog-tabs--align-stretch) .gog-tabs__tab{flex:1 1 0}:host(.gog-tabs--vertical){display:flex;align-items:stretch}:host(.gog-tabs--vertical) .gog-tabs__header{border-block-end:0;border-inline-end:var(--gog-tabs-header-border-width) var(--gog-tabs-header-border-style) var(--gog-tabs-header-border-color)}:host(.gog-tabs--vertical) .gog-tabs__list{flex-direction:column;min-width:0}:host(.gog-tabs--vertical) .gog-tabs__tab{justify-content:flex-start}:host(.gog-tabs--vertical) .gog-tabs__tab--active:after{inset-inline:auto calc(-1 * var(--gog-tabs-header-border-width));inset-block:0;width:var(--gog-tabs-indicator-thickness);height:auto}:host(.gog-tabs--vertical) .gog-tabs__panels{flex:1 1 auto}:host(.gog-tabs--xsm){--gog-tabs-size-padding: var(--gog-tabs-xsm-padding);--gog-tabs-size-font-size: var(--gog-tabs-xsm-font-size)}:host(.gog-tabs--sm){--gog-tabs-size-padding: var(--gog-tabs-sm-padding);--gog-tabs-size-font-size: var(--gog-tabs-sm-font-size)}:host(.gog-tabs--md){--gog-tabs-size-padding: var(--gog-tabs-md-padding);--gog-tabs-size-font-size: var(--gog-tabs-md-font-size)}:host(.gog-tabs--lg){--gog-tabs-size-padding: var(--gog-tabs-lg-padding);--gog-tabs-size-font-size: var(--gog-tabs-lg-font-size)}:host(.gog-tabs--slg){--gog-tabs-size-padding: var(--gog-tabs-slg-padding);--gog-tabs-size-font-size: var(--gog-tabs-slg-font-size)}:host(.gog-host--full-width){width:100%}@media(prefers-reduced-motion:reduce){.gog-tabs__tab{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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TabsComponent, decorators: [{
             type: Component,
@@ -2758,8 +2847,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         { provide: GOG_TABS_STATE, useExisting: forwardRef(() => TabsComponent) },
                     ], host: {
                         '[class]': 'hostClasses()',
-                    }, template: "<div class=\"gog-tabs__header\">\n  <!--\n    gog-scroll rather than a raw overflow-x: a native scrollbar carries no --gog-* tokens and\n    would be the one un-themeable strip inside an otherwise fully themeable component.\n    focusable=false because the tablist already owns the keyboard here.\n  -->\n  <gog-scroll\n    class=\"gog-tabs__scroll\"\n    axis=\"horizontal\"\n    size=\"thin\"\n    [focusable]=\"false\"\n    overscrollBehavior=\"contain\"\n  >\n    <div\n      class=\"gog-tabs__list\"\n      role=\"tablist\"\n      [attr.aria-label]=\"ariaLabel() || null\"\n      [attr.aria-orientation]=\"orientation()\"\n    >\n      @for (tab of tabs(); track tab; let i = $index) {\n        <button\n          #tabHeader\n          type=\"button\"\n          role=\"tab\"\n          class=\"gog-tabs__tab\"\n          [class.gog-tabs__tab--active]=\"i === resolvedIndex()\"\n          [id]=\"tab.headerId\"\n          [attr.aria-selected]=\"i === resolvedIndex()\"\n          [attr.aria-controls]=\"tab.panelId\"\n          [attr.aria-disabled]=\"tab.disabled() ? 'true' : null\"\n          [disabled]=\"tab.disabled()\"\n          [tabindex]=\"i === resolvedIndex() ? 0 : -1\"\n          (click)=\"selectIndex(i)\"\n          (keydown)=\"onHeaderKeydown($event)\"\n        >\n          @if (headerSlot(); as slot) {\n            <ng-container\n              [ngTemplateOutlet]=\"slot.templateRef\"\n              [ngTemplateOutletContext]=\"headerContext(tab, i)\"\n            />\n          } @else {\n            @if (tab.iconName(); as icon) {\n              <gog-icon class=\"gog-tabs__icon\" [name]=\"icon\" [ariaHidden]=\"true\" />\n            }\n            <span class=\"gog-tabs__label\">{{ tab.label() }}</span>\n          }\n        </button>\n      }\n    </div>\n  </gog-scroll>\n</div>\n\n<div class=\"gog-tabs__panels\">\n  <ng-content></ng-content>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;box-sizing:border-box}.gog-tabs__header{position:relative;border-block-end:var(--gog-tabs-header-border-width) var(--gog-tabs-header-border-style) var(--gog-tabs-header-border-color)}.gog-tabs__list{position:relative;display:flex;gap:var(--gog-tabs-gap);min-width:max-content}.gog-tabs__tab{position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;gap:var(--gog-tabs-tab-gap);padding:var(--gog-tabs-tab-padding, var(--gog-tabs-size-padding, var(--gog-tabs-md-padding)));border:0;background-color:var(--gog-tabs-tab-bg, var(--gog-tabs-rest-bg));color:var(--gog-tabs-tab-color, var(--gog-tabs-rest-color));font-family:var(--gog-tabs-font-family);font-size:var(--gog-tabs-tab-font-size, var(--gog-tabs-size-font-size, var(--gog-tabs-md-font-size)));font-weight:var(--gog-tabs-font-weight);letter-spacing:var(--gog-tabs-letter-spacing);line-height:var(--gog-tabs-line-height);text-transform:var(--gog-tabs-text-transform);cursor:pointer;white-space:nowrap;transition:color var(--gog-tabs-transition-duration) var(--gog-easing)}.gog-tabs__tab:hover:not(:disabled){color:var(--gog-tabs-hover-color)}.gog-tabs__tab--active{color:var(--gog-tabs-active-color)}.gog-tabs__tab:disabled{opacity:var(--gog-tabs-disabled-opacity);cursor:not-allowed}.gog-tabs__tab:focus-visible{outline:var(--gog-tabs-focus-ring-width) solid var(--gog-tabs-focus-ring-color);outline-offset:var(--gog-tabs-focus-ring-offset)}.gog-tabs__icon{flex-shrink:0;font-size:var(--gog-tabs-icon-size)}.gog-tabs__tab--active:after{content:\"\";position:absolute;inset-inline:0;inset-block-end:calc(-1 * var(--gog-tabs-header-border-width));height:var(--gog-tabs-indicator-thickness);border-radius:var(--gog-tabs-indicator-radius);background-color:var(--gog-tabs-indicator-color)}.gog-tabs__panels{min-width:0}:host(.gog-tabs--align-center) .gog-tabs__list{justify-content:center}:host(.gog-tabs--align-end) .gog-tabs__list{justify-content:flex-end}:host(.gog-tabs--align-stretch) .gog-tabs__list{min-width:0}:host(.gog-tabs--align-stretch) .gog-tabs__tab{flex:1 1 0}:host(.gog-tabs--vertical){display:flex;align-items:stretch}:host(.gog-tabs--vertical) .gog-tabs__header{border-block-end:0;border-inline-end:var(--gog-tabs-header-border-width) var(--gog-tabs-header-border-style) var(--gog-tabs-header-border-color)}:host(.gog-tabs--vertical) .gog-tabs__list{flex-direction:column;min-width:0}:host(.gog-tabs--vertical) .gog-tabs__tab{justify-content:flex-start}:host(.gog-tabs--vertical) .gog-tabs__tab--active:after{inset-inline:auto calc(-1 * var(--gog-tabs-header-border-width));inset-block:0;width:var(--gog-tabs-indicator-thickness);height:auto}:host(.gog-tabs--vertical) .gog-tabs__panels{flex:1 1 auto}:host(.gog-tabs--xsm){--gog-tabs-size-padding: var(--gog-tabs-xsm-padding);--gog-tabs-size-font-size: var(--gog-tabs-xsm-font-size)}:host(.gog-tabs--sm){--gog-tabs-size-padding: var(--gog-tabs-sm-padding);--gog-tabs-size-font-size: var(--gog-tabs-sm-font-size)}:host(.gog-tabs--md){--gog-tabs-size-padding: var(--gog-tabs-md-padding);--gog-tabs-size-font-size: var(--gog-tabs-md-font-size)}:host(.gog-tabs--lg){--gog-tabs-size-padding: var(--gog-tabs-lg-padding);--gog-tabs-size-font-size: var(--gog-tabs-lg-font-size)}:host(.gog-tabs--slg){--gog-tabs-size-padding: var(--gog-tabs-slg-padding);--gog-tabs-size-font-size: var(--gog-tabs-slg-font-size)}:host(.gog-host--full-width){width:100%}@media(prefers-reduced-motion:reduce){.gog-tabs__tab{transition:none}}\n"] }]
-        }], propDecorators: { tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TabComponent), { isSignal: true }] }], activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }, { type: i0.Output, args: ["activeIndexChange"] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], gogTabChange: [{ type: i0.Output, args: ["gogTabChange"] }], headerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GogTabHeaderDirective), { isSignal: true }] }], headerRefs: [{ type: i0.ViewChildren, args: ['tabHeader', { isSignal: true }] }] } });
+                    }, template: "<div class=\"gog-tabs__header\">\r\n  <!--\r\n    gog-scroll rather than a raw overflow-x: a native scrollbar carries no --gog-* tokens and\r\n    would be the one un-themeable strip inside an otherwise fully themeable component.\r\n    focusable=false because the tablist already owns the keyboard here.\r\n  -->\r\n  <gog-scroll\r\n    class=\"gog-tabs__scroll\"\r\n    axis=\"horizontal\"\r\n    size=\"thin\"\r\n    [focusable]=\"false\"\r\n    [showTrack]=\"resolvedShowScrollTrack()\"\r\n    overscrollBehavior=\"contain\"\r\n  >\r\n    <div\r\n      class=\"gog-tabs__list\"\r\n      role=\"tablist\"\r\n      [attr.aria-label]=\"ariaLabel() || null\"\r\n      [attr.aria-orientation]=\"orientation()\"\r\n    >\r\n      @for (tab of tabs(); track tab; let i = $index) {\r\n        <button\r\n          #tabHeader\r\n          type=\"button\"\r\n          role=\"tab\"\r\n          class=\"gog-tabs__tab\"\r\n          [class.gog-tabs__tab--active]=\"i === resolvedIndex()\"\r\n          [id]=\"tab.headerId\"\r\n          [attr.aria-selected]=\"i === resolvedIndex()\"\r\n          [attr.aria-controls]=\"tab.panelId\"\r\n          [attr.aria-disabled]=\"tab.disabled() ? 'true' : null\"\r\n          [disabled]=\"tab.disabled()\"\r\n          [tabindex]=\"i === resolvedIndex() ? 0 : -1\"\r\n          (click)=\"selectIndex(i)\"\r\n          (keydown)=\"onHeaderKeydown($event)\"\r\n        >\r\n          @if (headerSlot(); as slot) {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"slot.templateRef\"\r\n              [ngTemplateOutletContext]=\"headerContext(tab, i)\"\r\n            />\r\n          } @else {\r\n            @if (tab.iconName(); as icon) {\r\n              <gog-icon class=\"gog-tabs__icon\" [name]=\"icon\" [ariaHidden]=\"true\" />\r\n            }\r\n            <span class=\"gog-tabs__label\">{{ tab.label() }}</span>\r\n          }\r\n        </button>\r\n      }\r\n    </div>\r\n  </gog-scroll>\r\n</div>\r\n\r\n<div class=\"gog-tabs__panels\">\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;box-sizing:border-box}.gog-tabs__header{position:relative;border-block-end:var(--gog-tabs-header-border-width) var(--gog-tabs-header-border-style) var(--gog-tabs-header-border-color)}.gog-tabs__list{position:relative;display:flex;gap:var(--gog-tabs-gap);min-width:max-content}.gog-tabs__tab{position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;gap:var(--gog-tabs-tab-gap);padding:var(--gog-tabs-tab-padding, var(--gog-tabs-size-padding, var(--gog-tabs-md-padding)));border:0;background-color:var(--gog-tabs-tab-bg, var(--gog-tabs-rest-bg));color:var(--gog-tabs-tab-color, var(--gog-tabs-rest-color));font-family:var(--gog-tabs-font-family);font-size:var(--gog-tabs-tab-font-size, var(--gog-tabs-size-font-size, var(--gog-tabs-md-font-size)));font-weight:var(--gog-tabs-font-weight);letter-spacing:var(--gog-tabs-letter-spacing);line-height:var(--gog-tabs-line-height);text-transform:var(--gog-tabs-text-transform);cursor:pointer;white-space:nowrap;transition:color var(--gog-tabs-transition-duration) var(--gog-easing)}.gog-tabs__tab:hover:not(:disabled){color:var(--gog-tabs-hover-color)}.gog-tabs__tab--active{color:var(--gog-tabs-active-color)}.gog-tabs__tab:disabled{opacity:var(--gog-tabs-disabled-opacity);cursor:not-allowed}.gog-tabs__tab:focus-visible{outline:var(--gog-tabs-focus-ring-width) solid var(--gog-tabs-focus-ring-color);outline-offset:var(--gog-tabs-focus-ring-offset)}.gog-tabs__icon{flex-shrink:0;font-size:var(--gog-tabs-icon-size)}.gog-tabs__tab--active:after{content:\"\";position:absolute;inset-inline:0;inset-block-end:calc(-1 * var(--gog-tabs-header-border-width));height:var(--gog-tabs-indicator-thickness);border-radius:var(--gog-tabs-indicator-radius);background-color:var(--gog-tabs-indicator-color)}.gog-tabs__panels{min-width:0}:host(.gog-tabs--align-center) .gog-tabs__list{justify-content:center}:host(.gog-tabs--align-end) .gog-tabs__list{justify-content:flex-end}:host(.gog-tabs--align-stretch) .gog-tabs__list{min-width:0}:host(.gog-tabs--align-stretch) .gog-tabs__tab{flex:1 1 0}:host(.gog-tabs--vertical){display:flex;align-items:stretch}:host(.gog-tabs--vertical) .gog-tabs__header{border-block-end:0;border-inline-end:var(--gog-tabs-header-border-width) var(--gog-tabs-header-border-style) var(--gog-tabs-header-border-color)}:host(.gog-tabs--vertical) .gog-tabs__list{flex-direction:column;min-width:0}:host(.gog-tabs--vertical) .gog-tabs__tab{justify-content:flex-start}:host(.gog-tabs--vertical) .gog-tabs__tab--active:after{inset-inline:auto calc(-1 * var(--gog-tabs-header-border-width));inset-block:0;width:var(--gog-tabs-indicator-thickness);height:auto}:host(.gog-tabs--vertical) .gog-tabs__panels{flex:1 1 auto}:host(.gog-tabs--xsm){--gog-tabs-size-padding: var(--gog-tabs-xsm-padding);--gog-tabs-size-font-size: var(--gog-tabs-xsm-font-size)}:host(.gog-tabs--sm){--gog-tabs-size-padding: var(--gog-tabs-sm-padding);--gog-tabs-size-font-size: var(--gog-tabs-sm-font-size)}:host(.gog-tabs--md){--gog-tabs-size-padding: var(--gog-tabs-md-padding);--gog-tabs-size-font-size: var(--gog-tabs-md-font-size)}:host(.gog-tabs--lg){--gog-tabs-size-padding: var(--gog-tabs-lg-padding);--gog-tabs-size-font-size: var(--gog-tabs-lg-font-size)}:host(.gog-tabs--slg){--gog-tabs-size-padding: var(--gog-tabs-slg-padding);--gog-tabs-size-font-size: var(--gog-tabs-slg-font-size)}:host(.gog-host--full-width){width:100%}@media(prefers-reduced-motion:reduce){.gog-tabs__tab{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TabComponent), { isSignal: true }] }], activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }, { type: i0.Output, args: ["activeIndexChange"] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], scrollActiveIntoView: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollActiveIntoView", required: false }] }], showScrollTrack: [{ type: i0.Input, args: [{ isSignal: true, alias: "showScrollTrack", required: false }] }], gogTabChange: [{ type: i0.Output, args: ["gogTabChange"] }], headerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GogTabHeaderDirective), { isSignal: true }] }], headerRefs: [{ type: i0.ViewChildren, args: ['tabHeader', { isSignal: true }] }] } });
 
 const GOG_CHECKABLE_CONTROL_PADDING = 'var(--gog-control-checkbox-padding, 6px)';
 const GOG_CHECKABLE_CONTROL_SIZE_MAP = {
@@ -3482,13 +3571,13 @@ class CalendarComponent {
         return isSameDay(date, this.focusedDate());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: CalendarComponent, isStandalone: true, selector: "gog-calendar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, defaultMonth: { classPropertyName: "defaultMonth", publicName: "defaultMonth", isSignal: true, isRequired: false, transformFunction: null }, numberOfMonths: { classPropertyName: "numberOfMonths", publicName: "numberOfMonths", isSignal: true, isRequired: false, transformFunction: null }, showTime: { classPropertyName: "showTime", publicName: "showTime", isSignal: true, isRequired: false, transformFunction: null }, hourFormat: { classPropertyName: "hourFormat", publicName: "hourFormat", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, showTodayButton: { classPropertyName: "showTodayButton", publicName: "showTodayButton", isSignal: true, isRequired: false, transformFunction: null }, showThisMonthButton: { classPropertyName: "showThisMonthButton", publicName: "showThisMonthButton", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, todayLabel: { classPropertyName: "todayLabel", publicName: "todayLabel", isSignal: true, isRequired: false, transformFunction: null }, thisMonthLabel: { classPropertyName: "thisMonthLabel", publicName: "thisMonthLabel", isSignal: true, isRequired: false, transformFunction: null }, previousMonthLabel: { classPropertyName: "previousMonthLabel", publicName: "previousMonthLabel", isSignal: true, isRequired: false, transformFunction: null }, nextMonthLabel: { classPropertyName: "nextMonthLabel", publicName: "nextMonthLabel", isSignal: true, isRequired: false, transformFunction: null }, previousYearLabel: { classPropertyName: "previousYearLabel", publicName: "previousYearLabel", isSignal: true, isRequired: false, transformFunction: null }, nextYearLabel: { classPropertyName: "nextYearLabel", publicName: "nextYearLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", gogDateSelect: "gogDateSelect" }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "<div class=\"gog-calendar__header\">\n  <button\n    type=\"button\"\n    class=\"gog-calendar__nav gog-inline-center\"\n    [attr.aria-label]=\"previousYearLabel()\"\n    (click)=\"shiftViewYears(-1)\"\n  >\n    <gog-icon name=\"chevron-left\" />\n    <gog-icon name=\"chevron-left\" />\n  </button>\n  <button\n    type=\"button\"\n    class=\"gog-calendar__nav gog-inline-center\"\n    [attr.aria-label]=\"previousMonthLabel()\"\n    (click)=\"shiftView(-1)\"\n  >\n    <gog-icon name=\"chevron-left\" />\n  </button>\n\n  <div class=\"gog-calendar__titles\">\n    @for (month of monthViews(); track $index) {\n      <span class=\"gog-calendar__title\">{{ month.label }}</span>\n    }\n  </div>\n\n  <button\n    type=\"button\"\n    class=\"gog-calendar__nav gog-inline-center\"\n    [attr.aria-label]=\"nextMonthLabel()\"\n    (click)=\"shiftView(1)\"\n  >\n    <gog-icon name=\"chevron-right\" />\n  </button>\n  <button\n    type=\"button\"\n    class=\"gog-calendar__nav gog-inline-center\"\n    [attr.aria-label]=\"nextYearLabel()\"\n    (click)=\"shiftViewYears(1)\"\n  >\n    <gog-icon name=\"chevron-right\" />\n    <gog-icon name=\"chevron-right\" />\n  </button>\n</div>\n\n<div class=\"gog-calendar__months\" (mouseleave)=\"onGridLeave()\">\n  @for (month of monthViews(); track $index) {\n    <!--\n      role=\"grid\" rather than a list of buttons: a month is two-dimensional, and the arrow\n      keys have to mean \"next day\" and \"next week\" \u2014 which is what the grid role tells\n      assistive tech to expect. One keydown handler on the grid serves all 42 cells.\n    -->\n    <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -- the keydown handler is delegated here so 42 cells don't each carry one; the real keyboard targets are the day buttons inside, which are focusable and carry the roving tabindex. The grid itself must not be a tab stop. -->\n    <table\n      class=\"gog-calendar__grid\"\n      role=\"grid\"\n      [attr.aria-label]=\"month.label\"\n      (keydown)=\"onGridKeydown($event)\"\n    >\n      <thead>\n        <tr class=\"gog-calendar__weekdays\">\n          @for (weekday of weekdays(); track $index) {\n            <th class=\"gog-calendar__weekday\" scope=\"col\" [attr.abbr]=\"weekday\">{{ weekday }}</th>\n          }\n        </tr>\n      </thead>\n      <tbody>\n        @for (week of month.weeks; track $index) {\n          <tr class=\"gog-calendar__week\">\n            @for (day of week; track day.date.getTime()) {\n              <td class=\"gog-calendar__cell\" role=\"gridcell\" [attr.aria-selected]=\"day.selected\">\n                <!--\n                  A roving tabindex across 42 cells: exactly one is tabbable, and the arrows\n                  move it. Tabbing through every day of the month instead would put 42 stops\n                  between the field and whatever follows it.\n                -->\n                <button\n                  type=\"button\"\n                  class=\"gog-calendar__day\"\n                  [class.gog-calendar__day--outside]=\"day.outside\"\n                  [class.gog-calendar__day--today]=\"day.today\"\n                  [class.gog-calendar__day--selected]=\"day.selected\"\n                  [class.gog-calendar__day--range-start]=\"day.rangeStart\"\n                  [class.gog-calendar__day--range-end]=\"day.rangeEnd\"\n                  [class.gog-calendar__day--in-range]=\"day.inRange\"\n                  [disabled]=\"day.disabled\"\n                  [attr.aria-disabled]=\"day.disabled\"\n                  [attr.aria-current]=\"day.today ? 'date' : null\"\n                  [tabindex]=\"isFocusedDay(day.date) ? 0 : -1\"\n                  (click)=\"onDayClick(day)\"\n                  (mouseenter)=\"onDayHover(day)\"\n                >\n                  {{ day.label }}\n                </button>\n              </td>\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n  }\n</div>\n\n@if (showTime()) {\n  <div class=\"gog-calendar__time\">\n    <gog-icon class=\"gog-calendar__time-icon\" name=\"clock\" [ariaHidden]=\"true\" />\n\n    <input\n      type=\"number\"\n      class=\"gog-calendar__time-input\"\n      [min]=\"minHour()\"\n      [max]=\"maxHour()\"\n      [value]=\"hours()\"\n      aria-label=\"Hours\"\n      (input)=\"onHourInput($event)\"\n    />\n    <span class=\"gog-calendar__time-sep\" aria-hidden=\"true\">:</span>\n    <input\n      type=\"number\"\n      class=\"gog-calendar__time-input\"\n      min=\"0\"\n      max=\"59\"\n      [step]=\"minuteStep()\"\n      [value]=\"minutes()\"\n      aria-label=\"Minutes\"\n      (input)=\"onMinuteInput($event)\"\n    />\n\n    @if (showSeconds()) {\n      <span class=\"gog-calendar__time-sep\" aria-hidden=\"true\">:</span>\n      <input\n        type=\"number\"\n        class=\"gog-calendar__time-input\"\n        min=\"0\"\n        max=\"59\"\n        [value]=\"seconds()\"\n        aria-label=\"Seconds\"\n        (input)=\"onSecondInput($event)\"\n      />\n    }\n\n    @if (hourFormat() === '12') {\n      <button\n        type=\"button\"\n        class=\"gog-calendar__meridiem\"\n        [attr.aria-pressed]=\"isPm()\"\n        (click)=\"toggleMeridiem()\"\n      >\n        {{ isPm() ? 'PM' : 'AM' }}\n      </button>\n    }\n  </div>\n}\n\n@if (showTodayButton() || showThisMonthButton()) {\n  <!--\n    Two distinct actions, never one: \"Today\" picks a date, \"This month\" only moves the view.\n    Collapsing them into a single button is what made the control ambiguous \u2014 after paging\n    away, the same label reads as \"take me back\" to one person and \"set it to today\" to another.\n  -->\n  <div class=\"gog-calendar__footer\">\n    @if (showThisMonthButton()) {\n      <button\n        type=\"button\"\n        class=\"gog-calendar__action gog-calendar__action--this-month\"\n        (click)=\"goToThisMonth()\"\n      >\n        {{ thisMonthLabel() }}\n      </button>\n    }\n\n    @if (showTodayButton()) {\n      <button\n        type=\"button\"\n        class=\"gog-calendar__action gog-calendar__today\"\n        [disabled]=\"!isTodaySelectable()\"\n        (click)=\"selectToday()\"\n      >\n        {{ todayLabel() }}\n      </button>\n    }\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;box-sizing:border-box;padding:var(--gog-calendar-padding);color:var(--gog-calendar-color);font-family:var(--gog-calendar-font-family);font-size:var(--gog-calendar-size-font-size, var(--gog-calendar-md-font-size));contain:layout style}.gog-calendar__header{display:flex;align-items:center;gap:var(--gog-calendar-header-gap);margin-block-end:var(--gog-calendar-header-margin)}.gog-calendar__titles{display:flex;flex:1 1 auto;justify-content:space-around;gap:var(--gog-calendar-header-gap)}.gog-calendar__title{flex:1 1 0;color:var(--gog-calendar-title-color);font-weight:var(--gog-calendar-title-font-weight);text-align:center}.gog-calendar__nav{flex:0 0 auto;width:var(--gog-calendar-nav-size);height:var(--gog-calendar-nav-size);padding:0;border:0;border-radius:var(--gog-calendar-nav-radius);background-color:var(--gog-calendar-nav-bg);color:var(--gog-calendar-nav-color);font-size:var(--gog-calendar-nav-icon-size);letter-spacing:var(--gog-calendar-nav-icon-overlap);cursor:pointer}.gog-calendar__nav:hover{background-color:var(--gog-calendar-nav-hover-bg);color:var(--gog-calendar-nav-hover-color)}.gog-calendar__nav:focus-visible,.gog-calendar__day:focus-visible,.gog-calendar__action:focus-visible,.gog-calendar__meridiem:focus-visible,.gog-calendar__time-input:focus-visible{outline:var(--gog-calendar-focus-ring-width) solid var(--gog-calendar-focus-ring-color);outline-offset:var(--gog-calendar-focus-ring-offset)}.gog-calendar__months{display:flex;gap:var(--gog-calendar-months-gap)}.gog-calendar__grid{border-collapse:collapse;table-layout:fixed}.gog-calendar__weekday{padding:var(--gog-calendar-weekday-padding);color:var(--gog-calendar-weekday-color);font-size:var(--gog-calendar-weekday-font-size);font-weight:var(--gog-calendar-weekday-font-weight);text-align:center;text-transform:var(--gog-calendar-weekday-text-transform)}.gog-calendar__cell{padding:0}.gog-calendar__day{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--gog-calendar-day-size, var(--gog-calendar-size-day-size, var(--gog-calendar-md-day-size)));height:var(--gog-calendar-day-size, var(--gog-calendar-size-day-size, var(--gog-calendar-md-day-size)));border:var(--gog-calendar-day-border-width) var(--gog-calendar-day-border-style) transparent;border-radius:var(--gog-calendar-day-radius);background-color:var(--gog-calendar-day-bg, var(--gog-calendar-day-rest-bg));color:var(--gog-calendar-day-color, var(--gog-calendar-day-rest-color));font:inherit;cursor:pointer;transition:background-color var(--gog-calendar-transition-duration) var(--gog-easing),color var(--gog-calendar-transition-duration) var(--gog-easing)}.gog-calendar__day:hover:not(:disabled){background-color:var(--gog-calendar-day-hover-bg)}.gog-calendar__day--outside{color:var(--gog-calendar-day-outside-color)}.gog-calendar__day--today{border-color:var(--gog-calendar-today-border-color);font-weight:var(--gog-calendar-today-font-weight)}.gog-calendar__day--in-range{border-radius:0;background-color:var(--gog-calendar-range-bg);color:var(--gog-calendar-range-color)}.gog-calendar__day--range-start{border-start-end-radius:0;border-end-end-radius:0}.gog-calendar__day--range-end{border-start-start-radius:0;border-end-start-radius:0}.gog-calendar__day--selected{background-color:var(--gog-calendar-selected-bg);color:var(--gog-calendar-selected-color);font-weight:var(--gog-calendar-selected-font-weight)}.gog-calendar__day:disabled{opacity:var(--gog-calendar-disabled-opacity);cursor:not-allowed}.gog-calendar__time{display:flex;align-items:center;justify-content:center;gap:var(--gog-calendar-time-gap);margin-block-start:var(--gog-calendar-time-margin);padding-block-start:var(--gog-calendar-time-margin);border-block-start:var(--gog-calendar-divider-width) var(--gog-calendar-divider-style) var(--gog-calendar-divider-color)}.gog-calendar__time-icon{color:var(--gog-calendar-weekday-color)}.gog-calendar__time-input{box-sizing:border-box;width:var(--gog-calendar-time-input-width);padding:var(--gog-calendar-time-input-padding);border:var(--gog-calendar-day-border-width) var(--gog-calendar-day-border-style) var(--gog-calendar-divider-color);border-radius:var(--gog-calendar-day-radius);background-color:var(--gog-calendar-time-input-bg);color:var(--gog-calendar-color);font:inherit;text-align:center}.gog-calendar__time-sep{color:var(--gog-calendar-weekday-color)}.gog-calendar__meridiem,.gog-calendar__action{padding:var(--gog-calendar-action-padding);border:var(--gog-calendar-day-border-width) var(--gog-calendar-day-border-style) var(--gog-calendar-divider-color);border-radius:var(--gog-calendar-day-radius);background-color:var(--gog-calendar-nav-bg);color:var(--gog-calendar-nav-color);font:inherit;cursor:pointer}.gog-calendar__meridiem:hover:not(:disabled),.gog-calendar__action:hover:not(:disabled){background-color:var(--gog-calendar-nav-hover-bg);color:var(--gog-calendar-nav-hover-color)}.gog-calendar__footer{display:flex;justify-content:center;gap:var(--gog-calendar-footer-gap);margin-block-start:var(--gog-calendar-time-margin)}.gog-calendar__action:disabled{opacity:var(--gog-calendar-disabled-opacity);cursor:not-allowed}:host(.gog-calendar--xsm){--gog-calendar-size-font-size: var(--gog-calendar-xsm-font-size);--gog-calendar-size-day-size: var(--gog-calendar-xsm-day-size)}:host(.gog-calendar--sm){--gog-calendar-size-font-size: var(--gog-calendar-sm-font-size);--gog-calendar-size-day-size: var(--gog-calendar-sm-day-size)}:host(.gog-calendar--lg){--gog-calendar-size-font-size: var(--gog-calendar-lg-font-size);--gog-calendar-size-day-size: var(--gog-calendar-lg-day-size)}:host(.gog-calendar--slg){--gog-calendar-size-font-size: var(--gog-calendar-slg-font-size);--gog-calendar-size-day-size: var(--gog-calendar-slg-day-size)}@media(prefers-reduced-motion:reduce){.gog-calendar__day{transition:none}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: CalendarComponent, isStandalone: true, selector: "gog-calendar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, defaultMonth: { classPropertyName: "defaultMonth", publicName: "defaultMonth", isSignal: true, isRequired: false, transformFunction: null }, numberOfMonths: { classPropertyName: "numberOfMonths", publicName: "numberOfMonths", isSignal: true, isRequired: false, transformFunction: null }, showTime: { classPropertyName: "showTime", publicName: "showTime", isSignal: true, isRequired: false, transformFunction: null }, hourFormat: { classPropertyName: "hourFormat", publicName: "hourFormat", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, showTodayButton: { classPropertyName: "showTodayButton", publicName: "showTodayButton", isSignal: true, isRequired: false, transformFunction: null }, showThisMonthButton: { classPropertyName: "showThisMonthButton", publicName: "showThisMonthButton", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, todayLabel: { classPropertyName: "todayLabel", publicName: "todayLabel", isSignal: true, isRequired: false, transformFunction: null }, thisMonthLabel: { classPropertyName: "thisMonthLabel", publicName: "thisMonthLabel", isSignal: true, isRequired: false, transformFunction: null }, previousMonthLabel: { classPropertyName: "previousMonthLabel", publicName: "previousMonthLabel", isSignal: true, isRequired: false, transformFunction: null }, nextMonthLabel: { classPropertyName: "nextMonthLabel", publicName: "nextMonthLabel", isSignal: true, isRequired: false, transformFunction: null }, previousYearLabel: { classPropertyName: "previousYearLabel", publicName: "previousYearLabel", isSignal: true, isRequired: false, transformFunction: null }, nextYearLabel: { classPropertyName: "nextYearLabel", publicName: "nextYearLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", gogDateSelect: "gogDateSelect" }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "<div class=\"gog-calendar__header\">\r\n  <button\r\n    type=\"button\"\r\n    class=\"gog-calendar__nav gog-inline-center\"\r\n    [attr.aria-label]=\"previousYearLabel()\"\r\n    (click)=\"shiftViewYears(-1)\"\r\n  >\r\n    <gog-icon name=\"chevron-left\" />\r\n    <gog-icon name=\"chevron-left\" />\r\n  </button>\r\n  <button\r\n    type=\"button\"\r\n    class=\"gog-calendar__nav gog-inline-center\"\r\n    [attr.aria-label]=\"previousMonthLabel()\"\r\n    (click)=\"shiftView(-1)\"\r\n  >\r\n    <gog-icon name=\"chevron-left\" />\r\n  </button>\r\n\r\n  <div class=\"gog-calendar__titles\">\r\n    @for (month of monthViews(); track $index) {\r\n      <span class=\"gog-calendar__title\">{{ month.label }}</span>\r\n    }\r\n  </div>\r\n\r\n  <button\r\n    type=\"button\"\r\n    class=\"gog-calendar__nav gog-inline-center\"\r\n    [attr.aria-label]=\"nextMonthLabel()\"\r\n    (click)=\"shiftView(1)\"\r\n  >\r\n    <gog-icon name=\"chevron-right\" />\r\n  </button>\r\n  <button\r\n    type=\"button\"\r\n    class=\"gog-calendar__nav gog-inline-center\"\r\n    [attr.aria-label]=\"nextYearLabel()\"\r\n    (click)=\"shiftViewYears(1)\"\r\n  >\r\n    <gog-icon name=\"chevron-right\" />\r\n    <gog-icon name=\"chevron-right\" />\r\n  </button>\r\n</div>\r\n\r\n<div class=\"gog-calendar__months\" (mouseleave)=\"onGridLeave()\">\r\n  @for (month of monthViews(); track $index) {\r\n    <!--\r\n      role=\"grid\" rather than a list of buttons: a month is two-dimensional, and the arrow\r\n      keys have to mean \"next day\" and \"next week\" \u2014 which is what the grid role tells\r\n      assistive tech to expect. One keydown handler on the grid serves all 42 cells.\r\n    -->\r\n    <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -- the keydown handler is delegated here so 42 cells don't each carry one; the real keyboard targets are the day buttons inside, which are focusable and carry the roving tabindex. The grid itself must not be a tab stop. -->\r\n    <table\r\n      class=\"gog-calendar__grid\"\r\n      role=\"grid\"\r\n      [attr.aria-label]=\"month.label\"\r\n      (keydown)=\"onGridKeydown($event)\"\r\n    >\r\n      <thead>\r\n        <tr class=\"gog-calendar__weekdays\">\r\n          @for (weekday of weekdays(); track $index) {\r\n            <th class=\"gog-calendar__weekday\" scope=\"col\" [attr.abbr]=\"weekday\">{{ weekday }}</th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (week of month.weeks; track $index) {\r\n          <tr class=\"gog-calendar__week\">\r\n            @for (day of week; track day.date.getTime()) {\r\n              <td class=\"gog-calendar__cell\" role=\"gridcell\" [attr.aria-selected]=\"day.selected\">\r\n                <!--\r\n                  A roving tabindex across 42 cells: exactly one is tabbable, and the arrows\r\n                  move it. Tabbing through every day of the month instead would put 42 stops\r\n                  between the field and whatever follows it.\r\n                -->\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"gog-calendar__day\"\r\n                  [class.gog-calendar__day--outside]=\"day.outside\"\r\n                  [class.gog-calendar__day--today]=\"day.today\"\r\n                  [class.gog-calendar__day--selected]=\"day.selected\"\r\n                  [class.gog-calendar__day--range-start]=\"day.rangeStart\"\r\n                  [class.gog-calendar__day--range-end]=\"day.rangeEnd\"\r\n                  [class.gog-calendar__day--in-range]=\"day.inRange\"\r\n                  [disabled]=\"day.disabled\"\r\n                  [attr.aria-disabled]=\"day.disabled\"\r\n                  [attr.aria-current]=\"day.today ? 'date' : null\"\r\n                  [tabindex]=\"isFocusedDay(day.date) ? 0 : -1\"\r\n                  (click)=\"onDayClick(day)\"\r\n                  (mouseenter)=\"onDayHover(day)\"\r\n                >\r\n                  {{ day.label }}\r\n                </button>\r\n              </td>\r\n            }\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    </table>\r\n  }\r\n</div>\r\n\r\n@if (showTime()) {\r\n  <div class=\"gog-calendar__time\">\r\n    <gog-icon class=\"gog-calendar__time-icon\" name=\"clock\" [ariaHidden]=\"true\" />\r\n\r\n    <input\r\n      type=\"number\"\r\n      class=\"gog-calendar__time-input\"\r\n      [min]=\"minHour()\"\r\n      [max]=\"maxHour()\"\r\n      [value]=\"hours()\"\r\n      aria-label=\"Hours\"\r\n      (input)=\"onHourInput($event)\"\r\n    />\r\n    <span class=\"gog-calendar__time-sep\" aria-hidden=\"true\">:</span>\r\n    <input\r\n      type=\"number\"\r\n      class=\"gog-calendar__time-input\"\r\n      min=\"0\"\r\n      max=\"59\"\r\n      [step]=\"minuteStep()\"\r\n      [value]=\"minutes()\"\r\n      aria-label=\"Minutes\"\r\n      (input)=\"onMinuteInput($event)\"\r\n    />\r\n\r\n    @if (showSeconds()) {\r\n      <span class=\"gog-calendar__time-sep\" aria-hidden=\"true\">:</span>\r\n      <input\r\n        type=\"number\"\r\n        class=\"gog-calendar__time-input\"\r\n        min=\"0\"\r\n        max=\"59\"\r\n        [value]=\"seconds()\"\r\n        aria-label=\"Seconds\"\r\n        (input)=\"onSecondInput($event)\"\r\n      />\r\n    }\r\n\r\n    @if (hourFormat() === '12') {\r\n      <button\r\n        type=\"button\"\r\n        class=\"gog-calendar__meridiem\"\r\n        [attr.aria-pressed]=\"isPm()\"\r\n        (click)=\"toggleMeridiem()\"\r\n      >\r\n        {{ isPm() ? 'PM' : 'AM' }}\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n\r\n@if (showTodayButton() || showThisMonthButton()) {\r\n  <!--\r\n    Two distinct actions, never one: \"Today\" picks a date, \"This month\" only moves the view.\r\n    Collapsing them into a single button is what made the control ambiguous \u2014 after paging\r\n    away, the same label reads as \"take me back\" to one person and \"set it to today\" to another.\r\n  -->\r\n  <div class=\"gog-calendar__footer\">\r\n    @if (showThisMonthButton()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"gog-calendar__action gog-calendar__action--this-month\"\r\n        (click)=\"goToThisMonth()\"\r\n      >\r\n        {{ thisMonthLabel() }}\r\n      </button>\r\n    }\r\n\r\n    @if (showTodayButton()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"gog-calendar__action gog-calendar__today\"\r\n        [disabled]=\"!isTodaySelectable()\"\r\n        (click)=\"selectToday()\"\r\n      >\r\n        {{ todayLabel() }}\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block;box-sizing:border-box;padding:var(--gog-calendar-padding);color:var(--gog-calendar-color);font-family:var(--gog-calendar-font-family);font-size:var(--gog-calendar-size-font-size, var(--gog-calendar-md-font-size));contain:layout style}.gog-calendar__header{display:flex;align-items:center;gap:var(--gog-calendar-header-gap);margin-block-end:var(--gog-calendar-header-margin)}.gog-calendar__titles{display:flex;flex:1 1 auto;justify-content:space-around;gap:var(--gog-calendar-header-gap)}.gog-calendar__title{flex:1 1 0;color:var(--gog-calendar-title-color);font-weight:var(--gog-calendar-title-font-weight);text-align:center}.gog-calendar__nav{flex:0 0 auto;width:var(--gog-calendar-nav-size);height:var(--gog-calendar-nav-size);padding:0;border:0;border-radius:var(--gog-calendar-nav-radius);background-color:var(--gog-calendar-nav-bg);color:var(--gog-calendar-nav-color);font-size:var(--gog-calendar-nav-icon-size);letter-spacing:var(--gog-calendar-nav-icon-overlap);cursor:pointer}.gog-calendar__nav:hover{background-color:var(--gog-calendar-nav-hover-bg);color:var(--gog-calendar-nav-hover-color)}.gog-calendar__nav:focus-visible,.gog-calendar__day:focus-visible,.gog-calendar__action:focus-visible,.gog-calendar__meridiem:focus-visible,.gog-calendar__time-input:focus-visible{outline:var(--gog-calendar-focus-ring-width) solid var(--gog-calendar-focus-ring-color);outline-offset:var(--gog-calendar-focus-ring-offset)}.gog-calendar__months{display:flex;gap:var(--gog-calendar-months-gap)}.gog-calendar__grid{border-collapse:collapse;table-layout:fixed}.gog-calendar__weekday{padding:var(--gog-calendar-weekday-padding);color:var(--gog-calendar-weekday-color);font-size:var(--gog-calendar-weekday-font-size);font-weight:var(--gog-calendar-weekday-font-weight);text-align:center;text-transform:var(--gog-calendar-weekday-text-transform)}.gog-calendar__cell{padding:0}.gog-calendar__day{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--gog-calendar-day-size, var(--gog-calendar-size-day-size, var(--gog-calendar-md-day-size)));height:var(--gog-calendar-day-size, var(--gog-calendar-size-day-size, var(--gog-calendar-md-day-size)));border:var(--gog-calendar-day-border-width) var(--gog-calendar-day-border-style) transparent;border-radius:var(--gog-calendar-day-radius);background-color:var(--gog-calendar-day-bg, var(--gog-calendar-day-rest-bg));color:var(--gog-calendar-day-color, var(--gog-calendar-day-rest-color));font:inherit;cursor:pointer;transition:background-color var(--gog-calendar-transition-duration) var(--gog-easing),color var(--gog-calendar-transition-duration) var(--gog-easing)}.gog-calendar__day:hover:not(:disabled){background-color:var(--gog-calendar-day-hover-bg)}.gog-calendar__day--outside{color:var(--gog-calendar-day-outside-color)}.gog-calendar__day--today{border-color:var(--gog-calendar-today-border-color);font-weight:var(--gog-calendar-today-font-weight)}.gog-calendar__day--in-range{border-radius:0;background-color:var(--gog-calendar-range-bg);color:var(--gog-calendar-range-color)}.gog-calendar__day--range-start{border-start-end-radius:0;border-end-end-radius:0}.gog-calendar__day--range-end{border-start-start-radius:0;border-end-start-radius:0}.gog-calendar__day--selected{background-color:var(--gog-calendar-selected-bg);color:var(--gog-calendar-selected-color);font-weight:var(--gog-calendar-selected-font-weight)}.gog-calendar__day:disabled{opacity:var(--gog-calendar-disabled-opacity);cursor:not-allowed}.gog-calendar__time{display:flex;align-items:center;justify-content:center;gap:var(--gog-calendar-time-gap);margin-block-start:var(--gog-calendar-time-margin);padding-block-start:var(--gog-calendar-time-margin);border-block-start:var(--gog-calendar-divider-width) var(--gog-calendar-divider-style) var(--gog-calendar-divider-color)}.gog-calendar__time-icon{color:var(--gog-calendar-weekday-color)}.gog-calendar__time-input{box-sizing:border-box;width:var(--gog-calendar-time-input-width);padding:var(--gog-calendar-time-input-padding);border:var(--gog-calendar-day-border-width) var(--gog-calendar-day-border-style) var(--gog-calendar-divider-color);border-radius:var(--gog-calendar-day-radius);background-color:var(--gog-calendar-time-input-bg);color:var(--gog-calendar-color);font:inherit;text-align:center}.gog-calendar__time-sep{color:var(--gog-calendar-weekday-color)}.gog-calendar__meridiem,.gog-calendar__action{padding:var(--gog-calendar-action-padding);border:var(--gog-calendar-day-border-width) var(--gog-calendar-day-border-style) var(--gog-calendar-divider-color);border-radius:var(--gog-calendar-day-radius);background-color:var(--gog-calendar-nav-bg);color:var(--gog-calendar-nav-color);font:inherit;cursor:pointer}.gog-calendar__meridiem:hover:not(:disabled),.gog-calendar__action:hover:not(:disabled){background-color:var(--gog-calendar-nav-hover-bg);color:var(--gog-calendar-nav-hover-color)}.gog-calendar__footer{display:flex;justify-content:center;gap:var(--gog-calendar-footer-gap);margin-block-start:var(--gog-calendar-time-margin)}.gog-calendar__action:disabled{opacity:var(--gog-calendar-disabled-opacity);cursor:not-allowed}:host(.gog-calendar--xsm){--gog-calendar-size-font-size: var(--gog-calendar-xsm-font-size);--gog-calendar-size-day-size: var(--gog-calendar-xsm-day-size)}:host(.gog-calendar--sm){--gog-calendar-size-font-size: var(--gog-calendar-sm-font-size);--gog-calendar-size-day-size: var(--gog-calendar-sm-day-size)}:host(.gog-calendar--lg){--gog-calendar-size-font-size: var(--gog-calendar-lg-font-size);--gog-calendar-size-day-size: var(--gog-calendar-lg-day-size)}:host(.gog-calendar--slg){--gog-calendar-size-font-size: var(--gog-calendar-slg-font-size);--gog-calendar-size-day-size: var(--gog-calendar-slg-day-size)}@media(prefers-reduced-motion:reduce){.gog-calendar__day{transition:none}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gog-calendar', imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class]': 'hostClasses()',
-                    }, template: "<div class=\"gog-calendar__header\">\n  <button\n    type=\"button\"\n    class=\"gog-calendar__nav gog-inline-center\"\n    [attr.aria-label]=\"previousYearLabel()\"\n    (click)=\"shiftViewYears(-1)\"\n  >\n    <gog-icon name=\"chevron-left\" />\n    <gog-icon name=\"chevron-left\" />\n  </button>\n  <button\n    type=\"button\"\n    class=\"gog-calendar__nav gog-inline-center\"\n    [attr.aria-label]=\"previousMonthLabel()\"\n    (click)=\"shiftView(-1)\"\n  >\n    <gog-icon name=\"chevron-left\" />\n  </button>\n\n  <div class=\"gog-calendar__titles\">\n    @for (month of monthViews(); track $index) {\n      <span class=\"gog-calendar__title\">{{ month.label }}</span>\n    }\n  </div>\n\n  <button\n    type=\"button\"\n    class=\"gog-calendar__nav gog-inline-center\"\n    [attr.aria-label]=\"nextMonthLabel()\"\n    (click)=\"shiftView(1)\"\n  >\n    <gog-icon name=\"chevron-right\" />\n  </button>\n  <button\n    type=\"button\"\n    class=\"gog-calendar__nav gog-inline-center\"\n    [attr.aria-label]=\"nextYearLabel()\"\n    (click)=\"shiftViewYears(1)\"\n  >\n    <gog-icon name=\"chevron-right\" />\n    <gog-icon name=\"chevron-right\" />\n  </button>\n</div>\n\n<div class=\"gog-calendar__months\" (mouseleave)=\"onGridLeave()\">\n  @for (month of monthViews(); track $index) {\n    <!--\n      role=\"grid\" rather than a list of buttons: a month is two-dimensional, and the arrow\n      keys have to mean \"next day\" and \"next week\" \u2014 which is what the grid role tells\n      assistive tech to expect. One keydown handler on the grid serves all 42 cells.\n    -->\n    <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -- the keydown handler is delegated here so 42 cells don't each carry one; the real keyboard targets are the day buttons inside, which are focusable and carry the roving tabindex. The grid itself must not be a tab stop. -->\n    <table\n      class=\"gog-calendar__grid\"\n      role=\"grid\"\n      [attr.aria-label]=\"month.label\"\n      (keydown)=\"onGridKeydown($event)\"\n    >\n      <thead>\n        <tr class=\"gog-calendar__weekdays\">\n          @for (weekday of weekdays(); track $index) {\n            <th class=\"gog-calendar__weekday\" scope=\"col\" [attr.abbr]=\"weekday\">{{ weekday }}</th>\n          }\n        </tr>\n      </thead>\n      <tbody>\n        @for (week of month.weeks; track $index) {\n          <tr class=\"gog-calendar__week\">\n            @for (day of week; track day.date.getTime()) {\n              <td class=\"gog-calendar__cell\" role=\"gridcell\" [attr.aria-selected]=\"day.selected\">\n                <!--\n                  A roving tabindex across 42 cells: exactly one is tabbable, and the arrows\n                  move it. Tabbing through every day of the month instead would put 42 stops\n                  between the field and whatever follows it.\n                -->\n                <button\n                  type=\"button\"\n                  class=\"gog-calendar__day\"\n                  [class.gog-calendar__day--outside]=\"day.outside\"\n                  [class.gog-calendar__day--today]=\"day.today\"\n                  [class.gog-calendar__day--selected]=\"day.selected\"\n                  [class.gog-calendar__day--range-start]=\"day.rangeStart\"\n                  [class.gog-calendar__day--range-end]=\"day.rangeEnd\"\n                  [class.gog-calendar__day--in-range]=\"day.inRange\"\n                  [disabled]=\"day.disabled\"\n                  [attr.aria-disabled]=\"day.disabled\"\n                  [attr.aria-current]=\"day.today ? 'date' : null\"\n                  [tabindex]=\"isFocusedDay(day.date) ? 0 : -1\"\n                  (click)=\"onDayClick(day)\"\n                  (mouseenter)=\"onDayHover(day)\"\n                >\n                  {{ day.label }}\n                </button>\n              </td>\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n  }\n</div>\n\n@if (showTime()) {\n  <div class=\"gog-calendar__time\">\n    <gog-icon class=\"gog-calendar__time-icon\" name=\"clock\" [ariaHidden]=\"true\" />\n\n    <input\n      type=\"number\"\n      class=\"gog-calendar__time-input\"\n      [min]=\"minHour()\"\n      [max]=\"maxHour()\"\n      [value]=\"hours()\"\n      aria-label=\"Hours\"\n      (input)=\"onHourInput($event)\"\n    />\n    <span class=\"gog-calendar__time-sep\" aria-hidden=\"true\">:</span>\n    <input\n      type=\"number\"\n      class=\"gog-calendar__time-input\"\n      min=\"0\"\n      max=\"59\"\n      [step]=\"minuteStep()\"\n      [value]=\"minutes()\"\n      aria-label=\"Minutes\"\n      (input)=\"onMinuteInput($event)\"\n    />\n\n    @if (showSeconds()) {\n      <span class=\"gog-calendar__time-sep\" aria-hidden=\"true\">:</span>\n      <input\n        type=\"number\"\n        class=\"gog-calendar__time-input\"\n        min=\"0\"\n        max=\"59\"\n        [value]=\"seconds()\"\n        aria-label=\"Seconds\"\n        (input)=\"onSecondInput($event)\"\n      />\n    }\n\n    @if (hourFormat() === '12') {\n      <button\n        type=\"button\"\n        class=\"gog-calendar__meridiem\"\n        [attr.aria-pressed]=\"isPm()\"\n        (click)=\"toggleMeridiem()\"\n      >\n        {{ isPm() ? 'PM' : 'AM' }}\n      </button>\n    }\n  </div>\n}\n\n@if (showTodayButton() || showThisMonthButton()) {\n  <!--\n    Two distinct actions, never one: \"Today\" picks a date, \"This month\" only moves the view.\n    Collapsing them into a single button is what made the control ambiguous \u2014 after paging\n    away, the same label reads as \"take me back\" to one person and \"set it to today\" to another.\n  -->\n  <div class=\"gog-calendar__footer\">\n    @if (showThisMonthButton()) {\n      <button\n        type=\"button\"\n        class=\"gog-calendar__action gog-calendar__action--this-month\"\n        (click)=\"goToThisMonth()\"\n      >\n        {{ thisMonthLabel() }}\n      </button>\n    }\n\n    @if (showTodayButton()) {\n      <button\n        type=\"button\"\n        class=\"gog-calendar__action gog-calendar__today\"\n        [disabled]=\"!isTodaySelectable()\"\n        (click)=\"selectToday()\"\n      >\n        {{ todayLabel() }}\n      </button>\n    }\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;box-sizing:border-box;padding:var(--gog-calendar-padding);color:var(--gog-calendar-color);font-family:var(--gog-calendar-font-family);font-size:var(--gog-calendar-size-font-size, var(--gog-calendar-md-font-size));contain:layout style}.gog-calendar__header{display:flex;align-items:center;gap:var(--gog-calendar-header-gap);margin-block-end:var(--gog-calendar-header-margin)}.gog-calendar__titles{display:flex;flex:1 1 auto;justify-content:space-around;gap:var(--gog-calendar-header-gap)}.gog-calendar__title{flex:1 1 0;color:var(--gog-calendar-title-color);font-weight:var(--gog-calendar-title-font-weight);text-align:center}.gog-calendar__nav{flex:0 0 auto;width:var(--gog-calendar-nav-size);height:var(--gog-calendar-nav-size);padding:0;border:0;border-radius:var(--gog-calendar-nav-radius);background-color:var(--gog-calendar-nav-bg);color:var(--gog-calendar-nav-color);font-size:var(--gog-calendar-nav-icon-size);letter-spacing:var(--gog-calendar-nav-icon-overlap);cursor:pointer}.gog-calendar__nav:hover{background-color:var(--gog-calendar-nav-hover-bg);color:var(--gog-calendar-nav-hover-color)}.gog-calendar__nav:focus-visible,.gog-calendar__day:focus-visible,.gog-calendar__action:focus-visible,.gog-calendar__meridiem:focus-visible,.gog-calendar__time-input:focus-visible{outline:var(--gog-calendar-focus-ring-width) solid var(--gog-calendar-focus-ring-color);outline-offset:var(--gog-calendar-focus-ring-offset)}.gog-calendar__months{display:flex;gap:var(--gog-calendar-months-gap)}.gog-calendar__grid{border-collapse:collapse;table-layout:fixed}.gog-calendar__weekday{padding:var(--gog-calendar-weekday-padding);color:var(--gog-calendar-weekday-color);font-size:var(--gog-calendar-weekday-font-size);font-weight:var(--gog-calendar-weekday-font-weight);text-align:center;text-transform:var(--gog-calendar-weekday-text-transform)}.gog-calendar__cell{padding:0}.gog-calendar__day{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--gog-calendar-day-size, var(--gog-calendar-size-day-size, var(--gog-calendar-md-day-size)));height:var(--gog-calendar-day-size, var(--gog-calendar-size-day-size, var(--gog-calendar-md-day-size)));border:var(--gog-calendar-day-border-width) var(--gog-calendar-day-border-style) transparent;border-radius:var(--gog-calendar-day-radius);background-color:var(--gog-calendar-day-bg, var(--gog-calendar-day-rest-bg));color:var(--gog-calendar-day-color, var(--gog-calendar-day-rest-color));font:inherit;cursor:pointer;transition:background-color var(--gog-calendar-transition-duration) var(--gog-easing),color var(--gog-calendar-transition-duration) var(--gog-easing)}.gog-calendar__day:hover:not(:disabled){background-color:var(--gog-calendar-day-hover-bg)}.gog-calendar__day--outside{color:var(--gog-calendar-day-outside-color)}.gog-calendar__day--today{border-color:var(--gog-calendar-today-border-color);font-weight:var(--gog-calendar-today-font-weight)}.gog-calendar__day--in-range{border-radius:0;background-color:var(--gog-calendar-range-bg);color:var(--gog-calendar-range-color)}.gog-calendar__day--range-start{border-start-end-radius:0;border-end-end-radius:0}.gog-calendar__day--range-end{border-start-start-radius:0;border-end-start-radius:0}.gog-calendar__day--selected{background-color:var(--gog-calendar-selected-bg);color:var(--gog-calendar-selected-color);font-weight:var(--gog-calendar-selected-font-weight)}.gog-calendar__day:disabled{opacity:var(--gog-calendar-disabled-opacity);cursor:not-allowed}.gog-calendar__time{display:flex;align-items:center;justify-content:center;gap:var(--gog-calendar-time-gap);margin-block-start:var(--gog-calendar-time-margin);padding-block-start:var(--gog-calendar-time-margin);border-block-start:var(--gog-calendar-divider-width) var(--gog-calendar-divider-style) var(--gog-calendar-divider-color)}.gog-calendar__time-icon{color:var(--gog-calendar-weekday-color)}.gog-calendar__time-input{box-sizing:border-box;width:var(--gog-calendar-time-input-width);padding:var(--gog-calendar-time-input-padding);border:var(--gog-calendar-day-border-width) var(--gog-calendar-day-border-style) var(--gog-calendar-divider-color);border-radius:var(--gog-calendar-day-radius);background-color:var(--gog-calendar-time-input-bg);color:var(--gog-calendar-color);font:inherit;text-align:center}.gog-calendar__time-sep{color:var(--gog-calendar-weekday-color)}.gog-calendar__meridiem,.gog-calendar__action{padding:var(--gog-calendar-action-padding);border:var(--gog-calendar-day-border-width) var(--gog-calendar-day-border-style) var(--gog-calendar-divider-color);border-radius:var(--gog-calendar-day-radius);background-color:var(--gog-calendar-nav-bg);color:var(--gog-calendar-nav-color);font:inherit;cursor:pointer}.gog-calendar__meridiem:hover:not(:disabled),.gog-calendar__action:hover:not(:disabled){background-color:var(--gog-calendar-nav-hover-bg);color:var(--gog-calendar-nav-hover-color)}.gog-calendar__footer{display:flex;justify-content:center;gap:var(--gog-calendar-footer-gap);margin-block-start:var(--gog-calendar-time-margin)}.gog-calendar__action:disabled{opacity:var(--gog-calendar-disabled-opacity);cursor:not-allowed}:host(.gog-calendar--xsm){--gog-calendar-size-font-size: var(--gog-calendar-xsm-font-size);--gog-calendar-size-day-size: var(--gog-calendar-xsm-day-size)}:host(.gog-calendar--sm){--gog-calendar-size-font-size: var(--gog-calendar-sm-font-size);--gog-calendar-size-day-size: var(--gog-calendar-sm-day-size)}:host(.gog-calendar--lg){--gog-calendar-size-font-size: var(--gog-calendar-lg-font-size);--gog-calendar-size-day-size: var(--gog-calendar-lg-day-size)}:host(.gog-calendar--slg){--gog-calendar-size-font-size: var(--gog-calendar-slg-font-size);--gog-calendar-size-day-size: var(--gog-calendar-slg-day-size)}@media(prefers-reduced-motion:reduce){.gog-calendar__day{transition:none}}\n"] }]
+                    }, template: "<div class=\"gog-calendar__header\">\r\n  <button\r\n    type=\"button\"\r\n    class=\"gog-calendar__nav gog-inline-center\"\r\n    [attr.aria-label]=\"previousYearLabel()\"\r\n    (click)=\"shiftViewYears(-1)\"\r\n  >\r\n    <gog-icon name=\"chevron-left\" />\r\n    <gog-icon name=\"chevron-left\" />\r\n  </button>\r\n  <button\r\n    type=\"button\"\r\n    class=\"gog-calendar__nav gog-inline-center\"\r\n    [attr.aria-label]=\"previousMonthLabel()\"\r\n    (click)=\"shiftView(-1)\"\r\n  >\r\n    <gog-icon name=\"chevron-left\" />\r\n  </button>\r\n\r\n  <div class=\"gog-calendar__titles\">\r\n    @for (month of monthViews(); track $index) {\r\n      <span class=\"gog-calendar__title\">{{ month.label }}</span>\r\n    }\r\n  </div>\r\n\r\n  <button\r\n    type=\"button\"\r\n    class=\"gog-calendar__nav gog-inline-center\"\r\n    [attr.aria-label]=\"nextMonthLabel()\"\r\n    (click)=\"shiftView(1)\"\r\n  >\r\n    <gog-icon name=\"chevron-right\" />\r\n  </button>\r\n  <button\r\n    type=\"button\"\r\n    class=\"gog-calendar__nav gog-inline-center\"\r\n    [attr.aria-label]=\"nextYearLabel()\"\r\n    (click)=\"shiftViewYears(1)\"\r\n  >\r\n    <gog-icon name=\"chevron-right\" />\r\n    <gog-icon name=\"chevron-right\" />\r\n  </button>\r\n</div>\r\n\r\n<div class=\"gog-calendar__months\" (mouseleave)=\"onGridLeave()\">\r\n  @for (month of monthViews(); track $index) {\r\n    <!--\r\n      role=\"grid\" rather than a list of buttons: a month is two-dimensional, and the arrow\r\n      keys have to mean \"next day\" and \"next week\" \u2014 which is what the grid role tells\r\n      assistive tech to expect. One keydown handler on the grid serves all 42 cells.\r\n    -->\r\n    <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -- the keydown handler is delegated here so 42 cells don't each carry one; the real keyboard targets are the day buttons inside, which are focusable and carry the roving tabindex. The grid itself must not be a tab stop. -->\r\n    <table\r\n      class=\"gog-calendar__grid\"\r\n      role=\"grid\"\r\n      [attr.aria-label]=\"month.label\"\r\n      (keydown)=\"onGridKeydown($event)\"\r\n    >\r\n      <thead>\r\n        <tr class=\"gog-calendar__weekdays\">\r\n          @for (weekday of weekdays(); track $index) {\r\n            <th class=\"gog-calendar__weekday\" scope=\"col\" [attr.abbr]=\"weekday\">{{ weekday }}</th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @for (week of month.weeks; track $index) {\r\n          <tr class=\"gog-calendar__week\">\r\n            @for (day of week; track day.date.getTime()) {\r\n              <td class=\"gog-calendar__cell\" role=\"gridcell\" [attr.aria-selected]=\"day.selected\">\r\n                <!--\r\n                  A roving tabindex across 42 cells: exactly one is tabbable, and the arrows\r\n                  move it. Tabbing through every day of the month instead would put 42 stops\r\n                  between the field and whatever follows it.\r\n                -->\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"gog-calendar__day\"\r\n                  [class.gog-calendar__day--outside]=\"day.outside\"\r\n                  [class.gog-calendar__day--today]=\"day.today\"\r\n                  [class.gog-calendar__day--selected]=\"day.selected\"\r\n                  [class.gog-calendar__day--range-start]=\"day.rangeStart\"\r\n                  [class.gog-calendar__day--range-end]=\"day.rangeEnd\"\r\n                  [class.gog-calendar__day--in-range]=\"day.inRange\"\r\n                  [disabled]=\"day.disabled\"\r\n                  [attr.aria-disabled]=\"day.disabled\"\r\n                  [attr.aria-current]=\"day.today ? 'date' : null\"\r\n                  [tabindex]=\"isFocusedDay(day.date) ? 0 : -1\"\r\n                  (click)=\"onDayClick(day)\"\r\n                  (mouseenter)=\"onDayHover(day)\"\r\n                >\r\n                  {{ day.label }}\r\n                </button>\r\n              </td>\r\n            }\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    </table>\r\n  }\r\n</div>\r\n\r\n@if (showTime()) {\r\n  <div class=\"gog-calendar__time\">\r\n    <gog-icon class=\"gog-calendar__time-icon\" name=\"clock\" [ariaHidden]=\"true\" />\r\n\r\n    <input\r\n      type=\"number\"\r\n      class=\"gog-calendar__time-input\"\r\n      [min]=\"minHour()\"\r\n      [max]=\"maxHour()\"\r\n      [value]=\"hours()\"\r\n      aria-label=\"Hours\"\r\n      (input)=\"onHourInput($event)\"\r\n    />\r\n    <span class=\"gog-calendar__time-sep\" aria-hidden=\"true\">:</span>\r\n    <input\r\n      type=\"number\"\r\n      class=\"gog-calendar__time-input\"\r\n      min=\"0\"\r\n      max=\"59\"\r\n      [step]=\"minuteStep()\"\r\n      [value]=\"minutes()\"\r\n      aria-label=\"Minutes\"\r\n      (input)=\"onMinuteInput($event)\"\r\n    />\r\n\r\n    @if (showSeconds()) {\r\n      <span class=\"gog-calendar__time-sep\" aria-hidden=\"true\">:</span>\r\n      <input\r\n        type=\"number\"\r\n        class=\"gog-calendar__time-input\"\r\n        min=\"0\"\r\n        max=\"59\"\r\n        [value]=\"seconds()\"\r\n        aria-label=\"Seconds\"\r\n        (input)=\"onSecondInput($event)\"\r\n      />\r\n    }\r\n\r\n    @if (hourFormat() === '12') {\r\n      <button\r\n        type=\"button\"\r\n        class=\"gog-calendar__meridiem\"\r\n        [attr.aria-pressed]=\"isPm()\"\r\n        (click)=\"toggleMeridiem()\"\r\n      >\r\n        {{ isPm() ? 'PM' : 'AM' }}\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n\r\n@if (showTodayButton() || showThisMonthButton()) {\r\n  <!--\r\n    Two distinct actions, never one: \"Today\" picks a date, \"This month\" only moves the view.\r\n    Collapsing them into a single button is what made the control ambiguous \u2014 after paging\r\n    away, the same label reads as \"take me back\" to one person and \"set it to today\" to another.\r\n  -->\r\n  <div class=\"gog-calendar__footer\">\r\n    @if (showThisMonthButton()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"gog-calendar__action gog-calendar__action--this-month\"\r\n        (click)=\"goToThisMonth()\"\r\n      >\r\n        {{ thisMonthLabel() }}\r\n      </button>\r\n    }\r\n\r\n    @if (showTodayButton()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"gog-calendar__action gog-calendar__today\"\r\n        [disabled]=\"!isTodaySelectable()\"\r\n        (click)=\"selectToday()\"\r\n      >\r\n        {{ todayLabel() }}\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block;box-sizing:border-box;padding:var(--gog-calendar-padding);color:var(--gog-calendar-color);font-family:var(--gog-calendar-font-family);font-size:var(--gog-calendar-size-font-size, var(--gog-calendar-md-font-size));contain:layout style}.gog-calendar__header{display:flex;align-items:center;gap:var(--gog-calendar-header-gap);margin-block-end:var(--gog-calendar-header-margin)}.gog-calendar__titles{display:flex;flex:1 1 auto;justify-content:space-around;gap:var(--gog-calendar-header-gap)}.gog-calendar__title{flex:1 1 0;color:var(--gog-calendar-title-color);font-weight:var(--gog-calendar-title-font-weight);text-align:center}.gog-calendar__nav{flex:0 0 auto;width:var(--gog-calendar-nav-size);height:var(--gog-calendar-nav-size);padding:0;border:0;border-radius:var(--gog-calendar-nav-radius);background-color:var(--gog-calendar-nav-bg);color:var(--gog-calendar-nav-color);font-size:var(--gog-calendar-nav-icon-size);letter-spacing:var(--gog-calendar-nav-icon-overlap);cursor:pointer}.gog-calendar__nav:hover{background-color:var(--gog-calendar-nav-hover-bg);color:var(--gog-calendar-nav-hover-color)}.gog-calendar__nav:focus-visible,.gog-calendar__day:focus-visible,.gog-calendar__action:focus-visible,.gog-calendar__meridiem:focus-visible,.gog-calendar__time-input:focus-visible{outline:var(--gog-calendar-focus-ring-width) solid var(--gog-calendar-focus-ring-color);outline-offset:var(--gog-calendar-focus-ring-offset)}.gog-calendar__months{display:flex;gap:var(--gog-calendar-months-gap)}.gog-calendar__grid{border-collapse:collapse;table-layout:fixed}.gog-calendar__weekday{padding:var(--gog-calendar-weekday-padding);color:var(--gog-calendar-weekday-color);font-size:var(--gog-calendar-weekday-font-size);font-weight:var(--gog-calendar-weekday-font-weight);text-align:center;text-transform:var(--gog-calendar-weekday-text-transform)}.gog-calendar__cell{padding:0}.gog-calendar__day{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--gog-calendar-day-size, var(--gog-calendar-size-day-size, var(--gog-calendar-md-day-size)));height:var(--gog-calendar-day-size, var(--gog-calendar-size-day-size, var(--gog-calendar-md-day-size)));border:var(--gog-calendar-day-border-width) var(--gog-calendar-day-border-style) transparent;border-radius:var(--gog-calendar-day-radius);background-color:var(--gog-calendar-day-bg, var(--gog-calendar-day-rest-bg));color:var(--gog-calendar-day-color, var(--gog-calendar-day-rest-color));font:inherit;cursor:pointer;transition:background-color var(--gog-calendar-transition-duration) var(--gog-easing),color var(--gog-calendar-transition-duration) var(--gog-easing)}.gog-calendar__day:hover:not(:disabled){background-color:var(--gog-calendar-day-hover-bg)}.gog-calendar__day--outside{color:var(--gog-calendar-day-outside-color)}.gog-calendar__day--today{border-color:var(--gog-calendar-today-border-color);font-weight:var(--gog-calendar-today-font-weight)}.gog-calendar__day--in-range{border-radius:0;background-color:var(--gog-calendar-range-bg);color:var(--gog-calendar-range-color)}.gog-calendar__day--range-start{border-start-end-radius:0;border-end-end-radius:0}.gog-calendar__day--range-end{border-start-start-radius:0;border-end-start-radius:0}.gog-calendar__day--selected{background-color:var(--gog-calendar-selected-bg);color:var(--gog-calendar-selected-color);font-weight:var(--gog-calendar-selected-font-weight)}.gog-calendar__day:disabled{opacity:var(--gog-calendar-disabled-opacity);cursor:not-allowed}.gog-calendar__time{display:flex;align-items:center;justify-content:center;gap:var(--gog-calendar-time-gap);margin-block-start:var(--gog-calendar-time-margin);padding-block-start:var(--gog-calendar-time-margin);border-block-start:var(--gog-calendar-divider-width) var(--gog-calendar-divider-style) var(--gog-calendar-divider-color)}.gog-calendar__time-icon{color:var(--gog-calendar-weekday-color)}.gog-calendar__time-input{box-sizing:border-box;width:var(--gog-calendar-time-input-width);padding:var(--gog-calendar-time-input-padding);border:var(--gog-calendar-day-border-width) var(--gog-calendar-day-border-style) var(--gog-calendar-divider-color);border-radius:var(--gog-calendar-day-radius);background-color:var(--gog-calendar-time-input-bg);color:var(--gog-calendar-color);font:inherit;text-align:center}.gog-calendar__time-sep{color:var(--gog-calendar-weekday-color)}.gog-calendar__meridiem,.gog-calendar__action{padding:var(--gog-calendar-action-padding);border:var(--gog-calendar-day-border-width) var(--gog-calendar-day-border-style) var(--gog-calendar-divider-color);border-radius:var(--gog-calendar-day-radius);background-color:var(--gog-calendar-nav-bg);color:var(--gog-calendar-nav-color);font:inherit;cursor:pointer}.gog-calendar__meridiem:hover:not(:disabled),.gog-calendar__action:hover:not(:disabled){background-color:var(--gog-calendar-nav-hover-bg);color:var(--gog-calendar-nav-hover-color)}.gog-calendar__footer{display:flex;justify-content:center;gap:var(--gog-calendar-footer-gap);margin-block-start:var(--gog-calendar-time-margin)}.gog-calendar__action:disabled{opacity:var(--gog-calendar-disabled-opacity);cursor:not-allowed}:host(.gog-calendar--xsm){--gog-calendar-size-font-size: var(--gog-calendar-xsm-font-size);--gog-calendar-size-day-size: var(--gog-calendar-xsm-day-size)}:host(.gog-calendar--sm){--gog-calendar-size-font-size: var(--gog-calendar-sm-font-size);--gog-calendar-size-day-size: var(--gog-calendar-sm-day-size)}:host(.gog-calendar--lg){--gog-calendar-size-font-size: var(--gog-calendar-lg-font-size);--gog-calendar-size-day-size: var(--gog-calendar-lg-day-size)}:host(.gog-calendar--slg){--gog-calendar-size-font-size: var(--gog-calendar-slg-font-size);--gog-calendar-size-day-size: var(--gog-calendar-slg-day-size)}@media(prefers-reduced-motion:reduce){.gog-calendar__day{transition:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], defaultMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultMonth", required: false }] }], numberOfMonths: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberOfMonths", required: false }] }], showTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTime", required: false }] }], hourFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourFormat", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], showTodayButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTodayButton", required: false }] }], showThisMonthButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showThisMonthButton", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], todayLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "todayLabel", required: false }] }], thisMonthLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "thisMonthLabel", required: false }] }], previousMonthLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousMonthLabel", required: false }] }], nextMonthLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextMonthLabel", required: false }] }], previousYearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousYearLabel", required: false }] }], nextYearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextYearLabel", required: false }] }], gogDateSelect: [{ type: i0.Output, args: ["gogDateSelect"] }] } });
 /** How far into the week `date` sits, given which weekday the week starts on. */
 function weekdayOffset(date, firstDayOfWeek) {
@@ -3857,13 +3946,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()) {\n  <!--\n    Inline mode is literally `gog-calendar` with no field and no panel around it \u2014 which is why\n    the calendar is its own component rather than markup buried in this one.\n  -->\n  <gog-calendar\n    class=\"gog-datepicker__inline\"\n    [value]=\"value()\"\n    [selectionMode]=\"selectionMode()\"\n    [min]=\"min()\"\n    [max]=\"max()\"\n    [disabledDates]=\"disabledDates()\"\n    [locale]=\"resolvedLocale()\"\n    [firstDayOfWeek]=\"resolvedFirstDayOfWeek()\"\n    [defaultMonth]=\"defaultMonth()\"\n    [numberOfMonths]=\"numberOfMonths()\"\n    [showTime]=\"showTime()\"\n    [hourFormat]=\"hourFormat()\"\n    [minuteStep]=\"minuteStep()\"\n    [showSeconds]=\"showSeconds()\"\n    [showTodayButton]=\"showTodayButton()\"\n    [showThisMonthButton]=\"showThisMonthButton()\"\n    [todayLabel]=\"todayLabel()\"\n    [thisMonthLabel]=\"thisMonthLabel()\"\n    [size]=\"resolvedSize()\"\n    (valueChange)=\"onCalendarValue($event)\"\n    (gogDateSelect)=\"onCalendarSelect($event)\"\n  />\n} @else {\n  <!--\n    Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\n    context, which traps the panel's z-index inside it.\n  -->\n  <div\n    class=\"gog-datepicker\"\n    [class]=\"sizeClass()\"\n    [class.gog-datepicker--clearable]=\"showClear()\"\n    [class.gog-datepicker--disabled]=\"isDisabled()\"\n    [class.gog-datepicker--open]=\"isOpen()\"\n    [class.gog-datepicker--float-in]=\"resolvedFloatLabel() === 'in'\"\n    [class.gog-datepicker--float-on]=\"resolvedFloatLabel() === 'on'\"\n    [class.gog-datepicker--float-over]=\"resolvedFloatLabel() === 'over'\"\n    [class.gog-datepicker--floated]=\"isFloatLabelFloated()\"\n  >\n    @if (label() && resolvedFloatLabel() === 'none') {\n      <label class=\"gog-datepicker__label\" [for]=\"triggerId()\">{{ label() }}</label>\n    }\n\n    <div class=\"gog-datepicker__field\">\n      @if (label() && isFloatLabelActive()) {\n        <label class=\"gog-datepicker__label gog-datepicker__label--float\" [for]=\"triggerId()\">{{\n          label()\n        }}</label>\n      }\n\n      <input\n        type=\"text\"\n        class=\"gog-datepicker__control\"\n        autocomplete=\"off\"\n        [id]=\"triggerId()\"\n        [disabled]=\"isDisabled()\"\n        [readOnly]=\"!allowTextInput() || selectionMode() === 'range'\"\n        [value]=\"text()\"\n        [placeholder]=\"effectivePlaceholder()\"\n        [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-controls]=\"panelId()\"\n        [attr.aria-invalid]=\"hasError()\"\n        [attr.aria-describedby]=\"errorId()\"\n        (input)=\"onTextInput($event)\"\n        (keydown)=\"onTriggerKeydown($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n      />\n\n      <span class=\"gog-datepicker__actions\">\n        <button\n          type=\"button\"\n          class=\"gog-datepicker__toggle gog-inline-center\"\n          [disabled]=\"isDisabled()\"\n          [attr.aria-label]=\"openCalendarLabel()\"\n          [attr.aria-expanded]=\"isOpen()\"\n          [attr.aria-controls]=\"panelId()\"\n          (click)=\"toggle()\"\n        >\n          <gog-icon name=\"calendar\" />\n        </button>\n\n        @if (showClear()) {\n          <button\n            type=\"button\"\n            class=\"gog-datepicker__clear gog-inline-center\"\n            [attr.aria-label]=\"clearAriaLabel()\"\n            (click)=\"clearValue($event)\"\n          >\n            <gog-icon name=\"close\" />\n          </button>\n        }\n      </span>\n\n      @if (isOpen() && !resolvedAppendToBody()) {\n        <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n      }\n    </div>\n\n    @if (hasError()) {\n      <span class=\"gog-datepicker__error\" [attr.id]=\"errorId()\" role=\"alert\">\n        {{ visibleError() }}\n      </span>\n    }\n  </div>\n}\n\n<!--\n  One template for both render modes \u2014 inline under the field, or stamped into <body> by the\n  overlay when `appendToBody` is set, which also copies any scoped `data-theme` across.\n-->\n<ng-template #panelTpl>\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 -->\n  <div\n    [id]=\"panelId()\"\n    class=\"gog-datepicker__panel\"\n    role=\"dialog\"\n    [attr.aria-label]=\"label() || ariaLabel() || openCalendarLabel()\"\n    [class.gog-datepicker__panel--up]=\"!resolvedAppendToBody() && directionState() === 'up'\"\n    [class.gog-datepicker__panel--portal]=\"resolvedAppendToBody()\"\n    [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\n    [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\n    [style.z-index]=\"dropdownZIndex()\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <gog-calendar\n      [value]=\"value()\"\n      [selectionMode]=\"selectionMode()\"\n      [min]=\"min()\"\n      [max]=\"max()\"\n      [disabledDates]=\"disabledDates()\"\n      [locale]=\"resolvedLocale()\"\n      [firstDayOfWeek]=\"resolvedFirstDayOfWeek()\"\n      [defaultMonth]=\"defaultMonth()\"\n      [numberOfMonths]=\"numberOfMonths()\"\n      [showTime]=\"showTime()\"\n      [hourFormat]=\"hourFormat()\"\n      [minuteStep]=\"minuteStep()\"\n      [showSeconds]=\"showSeconds()\"\n      [showTodayButton]=\"showTodayButton()\"\n      [showThisMonthButton]=\"showThisMonthButton()\"\n      [todayLabel]=\"todayLabel()\"\n      [thisMonthLabel]=\"thisMonthLabel()\"\n      [size]=\"resolvedSize()\"\n      (valueChange)=\"onCalendarValue($event)\"\n      (gogDateSelect)=\"onCalendarSelect($event)\"\n    />\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block}.gog-datepicker{display:flex;flex-direction:column;gap:var(--gog-datepicker-gap);width:100%}.gog-datepicker__label{color:var(--gog-datepicker-label-color);font-family:var(--gog-datepicker-label-font-family);font-size:var(--gog-datepicker-label-font-size);letter-spacing:var(--gog-datepicker-label-letter-spacing);text-transform:var(--gog-datepicker-label-text-transform)}.gog-datepicker__field{position:relative;display:flex;align-items:center;width:100%;min-width:var(--gog-datepicker-min-width)}.gog-datepicker__control{box-sizing:border-box;width:100%;padding:var(--gog-datepicker-padding-y, var(--gog-datepicker-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-datepicker-actions-reserve) var(--gog-datepicker-padding-y, var(--gog-datepicker-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-datepicker-padding-x, var(--gog-datepicker-size-padding-x, var(--gog-field-md-padding-x)));border:var(--gog-datepicker-border-width) var(--gog-datepicker-border-style) var(--gog-datepicker-border-color);border-radius:var(--gog-datepicker-radius);background-color:var(--gog-datepicker-bg, var(--gog-datepicker-field-bg));color:var(--gog-datepicker-color, var(--gog-datepicker-text-color));font-family:var(--gog-datepicker-font-family);font-size:var(--gog-datepicker-font-size, var(--gog-datepicker-size-font-size, var(--gog-field-md-font-size)));line-height:var(--gog-datepicker-line-height);transition:border-color var(--gog-datepicker-transition-duration) var(--gog-easing)}.gog-datepicker__control::placeholder{color:var(--gog-datepicker-placeholder-color)}.gog-datepicker__control:hover:not(:disabled){border-color:var(--gog-datepicker-hover-border-color)}.gog-datepicker__control:focus-visible,.gog-datepicker__toggle:focus-visible,.gog-datepicker__clear:focus-visible{outline:var(--gog-datepicker-focus-ring-width) solid var(--gog-datepicker-focus-ring-color);outline-offset:var(--gog-datepicker-focus-ring-offset)}.gog-datepicker__control:disabled{opacity:var(--gog-datepicker-disabled-opacity);cursor:not-allowed}.gog-datepicker__control[aria-invalid=true]{border-color:var(--gog-datepicker-error-border-color)}.gog-datepicker__actions{position:absolute;inset-inline-end:var(--gog-datepicker-actions-inset);display:inline-flex;align-items:center;flex-direction:row-reverse;gap:var(--gog-datepicker-actions-gap)}.gog-datepicker__toggle,.gog-datepicker__clear{padding:0;border:0;background:none;color:var(--gog-datepicker-icon-color);cursor:pointer}.gog-datepicker__toggle{font-size:var(--gog-datepicker-toggle-icon-size)}.gog-datepicker__clear{color:var(--gog-datepicker-clear-color);font-size:calc(var(--gog-icon-size) * var(--gog-datepicker-clear-icon-ratio))}.gog-datepicker__toggle:hover,.gog-datepicker__clear:hover{color:var(--gog-datepicker-icon-hover-color)}.gog-datepicker__toggle:disabled{opacity:var(--gog-datepicker-disabled-opacity);cursor:not-allowed}.gog-datepicker__error{color:var(--gog-datepicker-error-color);font-family:var(--gog-datepicker-error-font-family);font-size:var(--gog-datepicker-error-font-size)}.gog-datepicker__panel{position:absolute;inset-inline-start:0;top:calc(100% + var(--gog-datepicker-panel-gap));z-index:var(--gog-dropdown-z);width:max-content;border:var(--gog-datepicker-panel-border-width) var(--gog-datepicker-panel-border-style) var(--gog-datepicker-panel-border-color);border-radius:var(--gog-datepicker-panel-radius);background-color:var(--gog-datepicker-panel-bg);box-shadow:var(--gog-datepicker-panel-shadow)}.gog-datepicker__panel--up{top:auto;bottom:calc(100% + var(--gog-datepicker-panel-gap))}.gog-datepicker__panel--portal{position:fixed;top:0;inset-inline-start:0}.gog-datepicker__inline{border:var(--gog-datepicker-panel-border-width) var(--gog-datepicker-panel-border-style) var(--gog-datepicker-panel-border-color);border-radius:var(--gog-datepicker-panel-radius);background-color:var(--gog-datepicker-panel-bg)}.gog-datepicker--xsm{--gog-datepicker-size-padding-y: var(--gog-field-xsm-padding-y);--gog-datepicker-size-padding-x: var(--gog-field-xsm-padding-x);--gog-datepicker-size-font-size: var(--gog-field-xsm-font-size)}.gog-datepicker--sm{--gog-datepicker-size-padding-y: var(--gog-field-sm-padding-y);--gog-datepicker-size-padding-x: var(--gog-field-sm-padding-x);--gog-datepicker-size-font-size: var(--gog-field-sm-font-size)}.gog-datepicker--lg{--gog-datepicker-size-padding-y: var(--gog-field-lg-padding-y);--gog-datepicker-size-padding-x: var(--gog-field-lg-padding-x);--gog-datepicker-size-font-size: var(--gog-field-lg-font-size)}.gog-datepicker--slg{--gog-datepicker-size-padding-y: var(--gog-field-slg-padding-y);--gog-datepicker-size-padding-x: var(--gog-field-slg-padding-x);--gog-datepicker-size-font-size: var(--gog-field-slg-font-size)}:host(.gog-host--auto-width) .gog-datepicker,:host(.gog-host--auto-width) .gog-datepicker__field,:host(.gog-host--auto-width) .gog-datepicker__control{width:auto}.gog-datepicker__label--float{position:absolute;left:var(--gog-datepicker-padding-x, var(--gog-datepicker-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - 2 * var(--gog-datepicker-padding-x, var(--gog-datepicker-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;color:var(--gog-datepicker-placeholder-color);font-size:var(--gog-datepicker-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-datepicker-transition-duration) var(--gog-easing),font-size var(--gog-datepicker-transition-duration) var(--gog-easing),color var(--gog-datepicker-transition-duration) var(--gog-easing),top var(--gog-datepicker-transition-duration) var(--gog-easing),background-color var(--gog-datepicker-transition-duration) var(--gog-easing)}.gog-datepicker--float-in,.gog-datepicker--float-on{--gog-datepicker-float-top-padding: calc(var(--gog-datepicker-padding-y, var(--gog-datepicker-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-datepicker-float-label-reserve))}.gog-datepicker--float-in .gog-datepicker__control,.gog-datepicker--float-on .gog-datepicker__control{padding-top:var(--gog-datepicker-float-top-padding)}.gog-datepicker--float-in .gog-datepicker__label--float,.gog-datepicker--float-on .gog-datepicker__label--float{top:var(--gog-datepicker-float-top-padding);transform:none}.gog-datepicker--float-in.gog-datepicker--floated .gog-datepicker__label--float{top:var(--gog-datepicker-float-label-in-top);transform:translateY(0);font-size:var(--gog-datepicker-label-font-size);color:var(--gog-datepicker-label-color);text-transform:var(--gog-datepicker-label-text-transform);letter-spacing:var(--gog-datepicker-label-letter-spacing)}.gog-datepicker--float-on.gog-datepicker--floated .gog-datepicker__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-datepicker-label-font-size);color:var(--gog-datepicker-label-color);text-transform:var(--gog-datepicker-label-text-transform);letter-spacing:var(--gog-datepicker-label-letter-spacing);background-color:var(--gog-datepicker-float-label-on-bg, var(--gog-datepicker-field-bg));padding:0 4px;left:calc(var(--gog-datepicker-padding-x, var(--gog-datepicker-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-datepicker--float-over.gog-datepicker--floated .gog-datepicker__label--float{top:calc(-1 * var(--gog-datepicker-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-datepicker-label-font-size);color:var(--gog-datepicker-label-color);text-transform:var(--gog-datepicker-label-text-transform);letter-spacing:var(--gog-datepicker-label-letter-spacing)}.gog-datepicker--float-over .gog-datepicker__field{margin-top:var(--gog-datepicker-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-datepicker__control{transition:none}}\n"], dependencies: [{ kind: "component", type: CalendarComponent, selector: "gog-calendar", inputs: ["value", "selectionMode", "min", "max", "disabledDates", "locale", "firstDayOfWeek", "defaultMonth", "numberOfMonths", "showTime", "hourFormat", "minuteStep", "showSeconds", "showTodayButton", "showThisMonthButton", "size", "todayLabel", "thisMonthLabel", "previousMonthLabel", "nextMonthLabel", "previousYearLabel", "nextYearLabel"], 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]=\"openCalendarLabel()\"\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]=\"clearAriaLabel()\"\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() || openCalendarLabel()\"\r\n    [class.gog-datepicker__panel--up]=\"!resolvedAppendToBody() && directionState() === 'up'\"\r\n    [class.gog-datepicker__panel--portal]=\"resolvedAppendToBody()\"\r\n    [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\r\n    [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\r\n    [style.z-index]=\"dropdownZIndex()\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    <gog-calendar\r\n      [value]=\"value()\"\r\n      [selectionMode]=\"selectionMode()\"\r\n      [min]=\"min()\"\r\n      [max]=\"max()\"\r\n      [disabledDates]=\"disabledDates()\"\r\n      [locale]=\"resolvedLocale()\"\r\n      [firstDayOfWeek]=\"resolvedFirstDayOfWeek()\"\r\n      [defaultMonth]=\"defaultMonth()\"\r\n      [numberOfMonths]=\"numberOfMonths()\"\r\n      [showTime]=\"showTime()\"\r\n      [hourFormat]=\"hourFormat()\"\r\n      [minuteStep]=\"minuteStep()\"\r\n      [showSeconds]=\"showSeconds()\"\r\n      [showTodayButton]=\"showTodayButton()\"\r\n      [showThisMonthButton]=\"showThisMonthButton()\"\r\n      [todayLabel]=\"todayLabel()\"\r\n      [thisMonthLabel]=\"thisMonthLabel()\"\r\n      [size]=\"resolvedSize()\"\r\n      (valueChange)=\"onCalendarValue($event)\"\r\n      (gogDateSelect)=\"onCalendarSelect($event)\"\r\n    />\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.gog-datepicker{display:flex;flex-direction:column;gap:var(--gog-datepicker-gap);width:100%}.gog-datepicker__label{color:var(--gog-datepicker-label-color);font-family:var(--gog-datepicker-label-font-family);font-size:var(--gog-datepicker-label-font-size);letter-spacing:var(--gog-datepicker-label-letter-spacing);text-transform:var(--gog-datepicker-label-text-transform)}.gog-datepicker__field{position:relative;display:flex;align-items:center;width:100%;min-width:var(--gog-datepicker-min-width)}.gog-datepicker__control{box-sizing:border-box;width:100%;padding:var(--gog-datepicker-padding-y, var(--gog-datepicker-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-datepicker-actions-reserve) var(--gog-datepicker-padding-y, var(--gog-datepicker-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-datepicker-padding-x, var(--gog-datepicker-size-padding-x, var(--gog-field-md-padding-x)));border:var(--gog-datepicker-border-width) var(--gog-datepicker-border-style) var(--gog-datepicker-border-color);border-radius:var(--gog-datepicker-radius);background-color:var(--gog-datepicker-bg, var(--gog-datepicker-field-bg));color:var(--gog-datepicker-color, var(--gog-datepicker-text-color));font-family:var(--gog-datepicker-font-family);font-size:var(--gog-datepicker-font-size, var(--gog-datepicker-size-font-size, var(--gog-field-md-font-size)));line-height:var(--gog-datepicker-line-height);transition:border-color var(--gog-datepicker-transition-duration) var(--gog-easing)}.gog-datepicker__control::placeholder{color:var(--gog-datepicker-placeholder-color)}.gog-datepicker__control:hover:not(:disabled){border-color:var(--gog-datepicker-hover-border-color)}.gog-datepicker__control:focus-visible,.gog-datepicker__toggle:focus-visible,.gog-datepicker__clear:focus-visible{outline:var(--gog-datepicker-focus-ring-width) solid var(--gog-datepicker-focus-ring-color);outline-offset:var(--gog-datepicker-focus-ring-offset)}.gog-datepicker__control:disabled{opacity:var(--gog-datepicker-disabled-opacity);cursor:not-allowed}.gog-datepicker__control[aria-invalid=true]{border-color:var(--gog-datepicker-error-border-color)}.gog-datepicker__actions{position:absolute;inset-inline-end:var(--gog-datepicker-actions-inset);display:inline-flex;align-items:center;flex-direction:row-reverse;gap:var(--gog-datepicker-actions-gap)}.gog-datepicker__toggle,.gog-datepicker__clear{padding:0;border:0;background:none;color:var(--gog-datepicker-icon-color);cursor:pointer}.gog-datepicker__toggle{font-size:var(--gog-datepicker-toggle-icon-size)}.gog-datepicker__clear{color:var(--gog-datepicker-clear-color);font-size:calc(var(--gog-icon-size) * var(--gog-datepicker-clear-icon-ratio))}.gog-datepicker__toggle:hover,.gog-datepicker__clear:hover{color:var(--gog-datepicker-icon-hover-color)}.gog-datepicker__toggle:disabled{opacity:var(--gog-datepicker-disabled-opacity);cursor:not-allowed}.gog-datepicker__error{color:var(--gog-datepicker-error-color);font-family:var(--gog-datepicker-error-font-family);font-size:var(--gog-datepicker-error-font-size)}.gog-datepicker__panel{position:absolute;inset-inline-start:0;top:calc(100% + var(--gog-datepicker-panel-gap));z-index:var(--gog-dropdown-z);width:max-content;border:var(--gog-datepicker-panel-border-width) var(--gog-datepicker-panel-border-style) var(--gog-datepicker-panel-border-color);border-radius:var(--gog-datepicker-panel-radius);background-color:var(--gog-datepicker-panel-bg);box-shadow:var(--gog-datepicker-panel-shadow)}.gog-datepicker__panel--up{top:auto;bottom:calc(100% + var(--gog-datepicker-panel-gap))}.gog-datepicker__panel--portal{position:fixed;top:0;inset-inline-start:0}.gog-datepicker__inline{border:var(--gog-datepicker-panel-border-width) var(--gog-datepicker-panel-border-style) var(--gog-datepicker-panel-border-color);border-radius:var(--gog-datepicker-panel-radius);background-color:var(--gog-datepicker-panel-bg)}.gog-datepicker--xsm{--gog-datepicker-size-padding-y: var(--gog-field-xsm-padding-y);--gog-datepicker-size-padding-x: var(--gog-field-xsm-padding-x);--gog-datepicker-size-font-size: var(--gog-field-xsm-font-size)}.gog-datepicker--sm{--gog-datepicker-size-padding-y: var(--gog-field-sm-padding-y);--gog-datepicker-size-padding-x: var(--gog-field-sm-padding-x);--gog-datepicker-size-font-size: var(--gog-field-sm-font-size)}.gog-datepicker--lg{--gog-datepicker-size-padding-y: var(--gog-field-lg-padding-y);--gog-datepicker-size-padding-x: var(--gog-field-lg-padding-x);--gog-datepicker-size-font-size: var(--gog-field-lg-font-size)}.gog-datepicker--slg{--gog-datepicker-size-padding-y: var(--gog-field-slg-padding-y);--gog-datepicker-size-padding-x: var(--gog-field-slg-padding-x);--gog-datepicker-size-font-size: var(--gog-field-slg-font-size)}:host(.gog-host--auto-width) .gog-datepicker,:host(.gog-host--auto-width) .gog-datepicker__field,:host(.gog-host--auto-width) .gog-datepicker__control{width:auto}.gog-datepicker__label--float{position:absolute;left:var(--gog-datepicker-padding-x, var(--gog-datepicker-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - 2 * var(--gog-datepicker-padding-x, var(--gog-datepicker-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;color:var(--gog-datepicker-placeholder-color);font-size:var(--gog-datepicker-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-datepicker-transition-duration) var(--gog-easing),font-size var(--gog-datepicker-transition-duration) var(--gog-easing),color var(--gog-datepicker-transition-duration) var(--gog-easing),top var(--gog-datepicker-transition-duration) var(--gog-easing),background-color var(--gog-datepicker-transition-duration) var(--gog-easing)}.gog-datepicker--float-in,.gog-datepicker--float-on{--gog-datepicker-float-top-padding: calc(var(--gog-datepicker-padding-y, var(--gog-datepicker-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-datepicker-float-label-reserve))}.gog-datepicker--float-in .gog-datepicker__control,.gog-datepicker--float-on .gog-datepicker__control{padding-top:var(--gog-datepicker-float-top-padding)}.gog-datepicker--float-in .gog-datepicker__label--float,.gog-datepicker--float-on .gog-datepicker__label--float{top:var(--gog-datepicker-float-top-padding);transform:none}.gog-datepicker--float-in.gog-datepicker--floated .gog-datepicker__label--float{top:var(--gog-datepicker-float-label-in-top);transform:translateY(0);font-size:var(--gog-datepicker-label-font-size);color:var(--gog-datepicker-label-color);text-transform:var(--gog-datepicker-label-text-transform);letter-spacing:var(--gog-datepicker-label-letter-spacing)}.gog-datepicker--float-on.gog-datepicker--floated .gog-datepicker__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-datepicker-label-font-size);color:var(--gog-datepicker-label-color);text-transform:var(--gog-datepicker-label-text-transform);letter-spacing:var(--gog-datepicker-label-letter-spacing);background-color:var(--gog-datepicker-float-label-on-bg, var(--gog-datepicker-field-bg));padding:0 4px;left:calc(var(--gog-datepicker-padding-x, var(--gog-datepicker-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-datepicker--float-over.gog-datepicker--floated .gog-datepicker__label--float{top:calc(-1 * var(--gog-datepicker-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-datepicker-label-font-size);color:var(--gog-datepicker-label-color);text-transform:var(--gog-datepicker-label-text-transform);letter-spacing:var(--gog-datepicker-label-letter-spacing)}.gog-datepicker--float-over .gog-datepicker__field{margin-top:var(--gog-datepicker-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-datepicker__control{transition:none}}\n"], dependencies: [{ kind: "component", type: CalendarComponent, selector: "gog-calendar", inputs: ["value", "selectionMode", "min", "max", "disabledDates", "locale", "firstDayOfWeek", "defaultMonth", "numberOfMonths", "showTime", "hourFormat", "minuteStep", "showSeconds", "showTodayButton", "showThisMonthButton", "size", "todayLabel", "thisMonthLabel", "previousMonthLabel", "nextMonthLabel", "previousYearLabel", "nextYearLabel"], 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()) {\n  <!--\n    Inline mode is literally `gog-calendar` with no field and no panel around it \u2014 which is why\n    the calendar is its own component rather than markup buried in this one.\n  -->\n  <gog-calendar\n    class=\"gog-datepicker__inline\"\n    [value]=\"value()\"\n    [selectionMode]=\"selectionMode()\"\n    [min]=\"min()\"\n    [max]=\"max()\"\n    [disabledDates]=\"disabledDates()\"\n    [locale]=\"resolvedLocale()\"\n    [firstDayOfWeek]=\"resolvedFirstDayOfWeek()\"\n    [defaultMonth]=\"defaultMonth()\"\n    [numberOfMonths]=\"numberOfMonths()\"\n    [showTime]=\"showTime()\"\n    [hourFormat]=\"hourFormat()\"\n    [minuteStep]=\"minuteStep()\"\n    [showSeconds]=\"showSeconds()\"\n    [showTodayButton]=\"showTodayButton()\"\n    [showThisMonthButton]=\"showThisMonthButton()\"\n    [todayLabel]=\"todayLabel()\"\n    [thisMonthLabel]=\"thisMonthLabel()\"\n    [size]=\"resolvedSize()\"\n    (valueChange)=\"onCalendarValue($event)\"\n    (gogDateSelect)=\"onCalendarSelect($event)\"\n  />\n} @else {\n  <!--\n    Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\n    context, which traps the panel's z-index inside it.\n  -->\n  <div\n    class=\"gog-datepicker\"\n    [class]=\"sizeClass()\"\n    [class.gog-datepicker--clearable]=\"showClear()\"\n    [class.gog-datepicker--disabled]=\"isDisabled()\"\n    [class.gog-datepicker--open]=\"isOpen()\"\n    [class.gog-datepicker--float-in]=\"resolvedFloatLabel() === 'in'\"\n    [class.gog-datepicker--float-on]=\"resolvedFloatLabel() === 'on'\"\n    [class.gog-datepicker--float-over]=\"resolvedFloatLabel() === 'over'\"\n    [class.gog-datepicker--floated]=\"isFloatLabelFloated()\"\n  >\n    @if (label() && resolvedFloatLabel() === 'none') {\n      <label class=\"gog-datepicker__label\" [for]=\"triggerId()\">{{ label() }}</label>\n    }\n\n    <div class=\"gog-datepicker__field\">\n      @if (label() && isFloatLabelActive()) {\n        <label class=\"gog-datepicker__label gog-datepicker__label--float\" [for]=\"triggerId()\">{{\n          label()\n        }}</label>\n      }\n\n      <input\n        type=\"text\"\n        class=\"gog-datepicker__control\"\n        autocomplete=\"off\"\n        [id]=\"triggerId()\"\n        [disabled]=\"isDisabled()\"\n        [readOnly]=\"!allowTextInput() || selectionMode() === 'range'\"\n        [value]=\"text()\"\n        [placeholder]=\"effectivePlaceholder()\"\n        [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-controls]=\"panelId()\"\n        [attr.aria-invalid]=\"hasError()\"\n        [attr.aria-describedby]=\"errorId()\"\n        (input)=\"onTextInput($event)\"\n        (keydown)=\"onTriggerKeydown($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n      />\n\n      <span class=\"gog-datepicker__actions\">\n        <button\n          type=\"button\"\n          class=\"gog-datepicker__toggle gog-inline-center\"\n          [disabled]=\"isDisabled()\"\n          [attr.aria-label]=\"openCalendarLabel()\"\n          [attr.aria-expanded]=\"isOpen()\"\n          [attr.aria-controls]=\"panelId()\"\n          (click)=\"toggle()\"\n        >\n          <gog-icon name=\"calendar\" />\n        </button>\n\n        @if (showClear()) {\n          <button\n            type=\"button\"\n            class=\"gog-datepicker__clear gog-inline-center\"\n            [attr.aria-label]=\"clearAriaLabel()\"\n            (click)=\"clearValue($event)\"\n          >\n            <gog-icon name=\"close\" />\n          </button>\n        }\n      </span>\n\n      @if (isOpen() && !resolvedAppendToBody()) {\n        <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n      }\n    </div>\n\n    @if (hasError()) {\n      <span class=\"gog-datepicker__error\" [attr.id]=\"errorId()\" role=\"alert\">\n        {{ visibleError() }}\n      </span>\n    }\n  </div>\n}\n\n<!--\n  One template for both render modes \u2014 inline under the field, or stamped into <body> by the\n  overlay when `appendToBody` is set, which also copies any scoped `data-theme` across.\n-->\n<ng-template #panelTpl>\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 -->\n  <div\n    [id]=\"panelId()\"\n    class=\"gog-datepicker__panel\"\n    role=\"dialog\"\n    [attr.aria-label]=\"label() || ariaLabel() || openCalendarLabel()\"\n    [class.gog-datepicker__panel--up]=\"!resolvedAppendToBody() && directionState() === 'up'\"\n    [class.gog-datepicker__panel--portal]=\"resolvedAppendToBody()\"\n    [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\n    [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\n    [style.z-index]=\"dropdownZIndex()\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <gog-calendar\n      [value]=\"value()\"\n      [selectionMode]=\"selectionMode()\"\n      [min]=\"min()\"\n      [max]=\"max()\"\n      [disabledDates]=\"disabledDates()\"\n      [locale]=\"resolvedLocale()\"\n      [firstDayOfWeek]=\"resolvedFirstDayOfWeek()\"\n      [defaultMonth]=\"defaultMonth()\"\n      [numberOfMonths]=\"numberOfMonths()\"\n      [showTime]=\"showTime()\"\n      [hourFormat]=\"hourFormat()\"\n      [minuteStep]=\"minuteStep()\"\n      [showSeconds]=\"showSeconds()\"\n      [showTodayButton]=\"showTodayButton()\"\n      [showThisMonthButton]=\"showThisMonthButton()\"\n      [todayLabel]=\"todayLabel()\"\n      [thisMonthLabel]=\"thisMonthLabel()\"\n      [size]=\"resolvedSize()\"\n      (valueChange)=\"onCalendarValue($event)\"\n      (gogDateSelect)=\"onCalendarSelect($event)\"\n    />\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:block}.gog-datepicker{display:flex;flex-direction:column;gap:var(--gog-datepicker-gap);width:100%}.gog-datepicker__label{color:var(--gog-datepicker-label-color);font-family:var(--gog-datepicker-label-font-family);font-size:var(--gog-datepicker-label-font-size);letter-spacing:var(--gog-datepicker-label-letter-spacing);text-transform:var(--gog-datepicker-label-text-transform)}.gog-datepicker__field{position:relative;display:flex;align-items:center;width:100%;min-width:var(--gog-datepicker-min-width)}.gog-datepicker__control{box-sizing:border-box;width:100%;padding:var(--gog-datepicker-padding-y, var(--gog-datepicker-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-datepicker-actions-reserve) var(--gog-datepicker-padding-y, var(--gog-datepicker-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-datepicker-padding-x, var(--gog-datepicker-size-padding-x, var(--gog-field-md-padding-x)));border:var(--gog-datepicker-border-width) var(--gog-datepicker-border-style) var(--gog-datepicker-border-color);border-radius:var(--gog-datepicker-radius);background-color:var(--gog-datepicker-bg, var(--gog-datepicker-field-bg));color:var(--gog-datepicker-color, var(--gog-datepicker-text-color));font-family:var(--gog-datepicker-font-family);font-size:var(--gog-datepicker-font-size, var(--gog-datepicker-size-font-size, var(--gog-field-md-font-size)));line-height:var(--gog-datepicker-line-height);transition:border-color var(--gog-datepicker-transition-duration) var(--gog-easing)}.gog-datepicker__control::placeholder{color:var(--gog-datepicker-placeholder-color)}.gog-datepicker__control:hover:not(:disabled){border-color:var(--gog-datepicker-hover-border-color)}.gog-datepicker__control:focus-visible,.gog-datepicker__toggle:focus-visible,.gog-datepicker__clear:focus-visible{outline:var(--gog-datepicker-focus-ring-width) solid var(--gog-datepicker-focus-ring-color);outline-offset:var(--gog-datepicker-focus-ring-offset)}.gog-datepicker__control:disabled{opacity:var(--gog-datepicker-disabled-opacity);cursor:not-allowed}.gog-datepicker__control[aria-invalid=true]{border-color:var(--gog-datepicker-error-border-color)}.gog-datepicker__actions{position:absolute;inset-inline-end:var(--gog-datepicker-actions-inset);display:inline-flex;align-items:center;flex-direction:row-reverse;gap:var(--gog-datepicker-actions-gap)}.gog-datepicker__toggle,.gog-datepicker__clear{padding:0;border:0;background:none;color:var(--gog-datepicker-icon-color);cursor:pointer}.gog-datepicker__toggle{font-size:var(--gog-datepicker-toggle-icon-size)}.gog-datepicker__clear{color:var(--gog-datepicker-clear-color);font-size:calc(var(--gog-icon-size) * var(--gog-datepicker-clear-icon-ratio))}.gog-datepicker__toggle:hover,.gog-datepicker__clear:hover{color:var(--gog-datepicker-icon-hover-color)}.gog-datepicker__toggle:disabled{opacity:var(--gog-datepicker-disabled-opacity);cursor:not-allowed}.gog-datepicker__error{color:var(--gog-datepicker-error-color);font-family:var(--gog-datepicker-error-font-family);font-size:var(--gog-datepicker-error-font-size)}.gog-datepicker__panel{position:absolute;inset-inline-start:0;top:calc(100% + var(--gog-datepicker-panel-gap));z-index:var(--gog-dropdown-z);width:max-content;border:var(--gog-datepicker-panel-border-width) var(--gog-datepicker-panel-border-style) var(--gog-datepicker-panel-border-color);border-radius:var(--gog-datepicker-panel-radius);background-color:var(--gog-datepicker-panel-bg);box-shadow:var(--gog-datepicker-panel-shadow)}.gog-datepicker__panel--up{top:auto;bottom:calc(100% + var(--gog-datepicker-panel-gap))}.gog-datepicker__panel--portal{position:fixed;top:0;inset-inline-start:0}.gog-datepicker__inline{border:var(--gog-datepicker-panel-border-width) var(--gog-datepicker-panel-border-style) var(--gog-datepicker-panel-border-color);border-radius:var(--gog-datepicker-panel-radius);background-color:var(--gog-datepicker-panel-bg)}.gog-datepicker--xsm{--gog-datepicker-size-padding-y: var(--gog-field-xsm-padding-y);--gog-datepicker-size-padding-x: var(--gog-field-xsm-padding-x);--gog-datepicker-size-font-size: var(--gog-field-xsm-font-size)}.gog-datepicker--sm{--gog-datepicker-size-padding-y: var(--gog-field-sm-padding-y);--gog-datepicker-size-padding-x: var(--gog-field-sm-padding-x);--gog-datepicker-size-font-size: var(--gog-field-sm-font-size)}.gog-datepicker--lg{--gog-datepicker-size-padding-y: var(--gog-field-lg-padding-y);--gog-datepicker-size-padding-x: var(--gog-field-lg-padding-x);--gog-datepicker-size-font-size: var(--gog-field-lg-font-size)}.gog-datepicker--slg{--gog-datepicker-size-padding-y: var(--gog-field-slg-padding-y);--gog-datepicker-size-padding-x: var(--gog-field-slg-padding-x);--gog-datepicker-size-font-size: var(--gog-field-slg-font-size)}:host(.gog-host--auto-width) .gog-datepicker,:host(.gog-host--auto-width) .gog-datepicker__field,:host(.gog-host--auto-width) .gog-datepicker__control{width:auto}.gog-datepicker__label--float{position:absolute;left:var(--gog-datepicker-padding-x, var(--gog-datepicker-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - 2 * var(--gog-datepicker-padding-x, var(--gog-datepicker-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;color:var(--gog-datepicker-placeholder-color);font-size:var(--gog-datepicker-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-datepicker-transition-duration) var(--gog-easing),font-size var(--gog-datepicker-transition-duration) var(--gog-easing),color var(--gog-datepicker-transition-duration) var(--gog-easing),top var(--gog-datepicker-transition-duration) var(--gog-easing),background-color var(--gog-datepicker-transition-duration) var(--gog-easing)}.gog-datepicker--float-in,.gog-datepicker--float-on{--gog-datepicker-float-top-padding: calc(var(--gog-datepicker-padding-y, var(--gog-datepicker-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-datepicker-float-label-reserve))}.gog-datepicker--float-in .gog-datepicker__control,.gog-datepicker--float-on .gog-datepicker__control{padding-top:var(--gog-datepicker-float-top-padding)}.gog-datepicker--float-in .gog-datepicker__label--float,.gog-datepicker--float-on .gog-datepicker__label--float{top:var(--gog-datepicker-float-top-padding);transform:none}.gog-datepicker--float-in.gog-datepicker--floated .gog-datepicker__label--float{top:var(--gog-datepicker-float-label-in-top);transform:translateY(0);font-size:var(--gog-datepicker-label-font-size);color:var(--gog-datepicker-label-color);text-transform:var(--gog-datepicker-label-text-transform);letter-spacing:var(--gog-datepicker-label-letter-spacing)}.gog-datepicker--float-on.gog-datepicker--floated .gog-datepicker__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-datepicker-label-font-size);color:var(--gog-datepicker-label-color);text-transform:var(--gog-datepicker-label-text-transform);letter-spacing:var(--gog-datepicker-label-letter-spacing);background-color:var(--gog-datepicker-float-label-on-bg, var(--gog-datepicker-field-bg));padding:0 4px;left:calc(var(--gog-datepicker-padding-x, var(--gog-datepicker-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-datepicker--float-over.gog-datepicker--floated .gog-datepicker__label--float{top:calc(-1 * var(--gog-datepicker-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-datepicker-label-font-size);color:var(--gog-datepicker-label-color);text-transform:var(--gog-datepicker-label-text-transform);letter-spacing:var(--gog-datepicker-label-letter-spacing)}.gog-datepicker--float-over .gog-datepicker__field{margin-top:var(--gog-datepicker-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-datepicker__control{transition:none}}\n"] }]
+                    }, template: "@if (inline()) {\r\n  <!--\r\n    Inline mode is literally `gog-calendar` with no field and no panel around it \u2014 which is why\r\n    the calendar is its own component rather than markup buried in this one.\r\n  -->\r\n  <gog-calendar\r\n    class=\"gog-datepicker__inline\"\r\n    [value]=\"value()\"\r\n    [selectionMode]=\"selectionMode()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [disabledDates]=\"disabledDates()\"\r\n    [locale]=\"resolvedLocale()\"\r\n    [firstDayOfWeek]=\"resolvedFirstDayOfWeek()\"\r\n    [defaultMonth]=\"defaultMonth()\"\r\n    [numberOfMonths]=\"numberOfMonths()\"\r\n    [showTime]=\"showTime()\"\r\n    [hourFormat]=\"hourFormat()\"\r\n    [minuteStep]=\"minuteStep()\"\r\n    [showSeconds]=\"showSeconds()\"\r\n    [showTodayButton]=\"showTodayButton()\"\r\n    [showThisMonthButton]=\"showThisMonthButton()\"\r\n    [todayLabel]=\"todayLabel()\"\r\n    [thisMonthLabel]=\"thisMonthLabel()\"\r\n    [size]=\"resolvedSize()\"\r\n    (valueChange)=\"onCalendarValue($event)\"\r\n    (gogDateSelect)=\"onCalendarSelect($event)\"\r\n  />\r\n} @else {\r\n  <!--\r\n    Deliberately not `gog-contained-layout`: `contain: layout` makes this element a stacking\r\n    context, which traps the panel's z-index inside it.\r\n  -->\r\n  <div\r\n    class=\"gog-datepicker\"\r\n    [class]=\"sizeClass()\"\r\n    [class.gog-datepicker--clearable]=\"showClear()\"\r\n    [class.gog-datepicker--disabled]=\"isDisabled()\"\r\n    [class.gog-datepicker--open]=\"isOpen()\"\r\n    [class.gog-datepicker--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n    [class.gog-datepicker--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n    [class.gog-datepicker--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n    [class.gog-datepicker--floated]=\"isFloatLabelFloated()\"\r\n  >\r\n    @if (label() && resolvedFloatLabel() === 'none') {\r\n      <label class=\"gog-datepicker__label\" [for]=\"triggerId()\">{{ label() }}</label>\r\n    }\r\n\r\n    <div class=\"gog-datepicker__field\">\r\n      @if (label() && isFloatLabelActive()) {\r\n        <label class=\"gog-datepicker__label gog-datepicker__label--float\" [for]=\"triggerId()\">{{\r\n          label()\r\n        }}</label>\r\n      }\r\n\r\n      <input\r\n        type=\"text\"\r\n        class=\"gog-datepicker__control\"\r\n        autocomplete=\"off\"\r\n        [id]=\"triggerId()\"\r\n        [disabled]=\"isDisabled()\"\r\n        [readOnly]=\"!allowTextInput() || selectionMode() === 'range'\"\r\n        [value]=\"text()\"\r\n        [placeholder]=\"effectivePlaceholder()\"\r\n        [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\r\n        [attr.aria-haspopup]=\"'dialog'\"\r\n        [attr.aria-expanded]=\"isOpen()\"\r\n        [attr.aria-controls]=\"panelId()\"\r\n        [attr.aria-invalid]=\"hasError()\"\r\n        [attr.aria-describedby]=\"errorId()\"\r\n        (input)=\"onTextInput($event)\"\r\n        (keydown)=\"onTriggerKeydown($event)\"\r\n        (focus)=\"onFocus()\"\r\n        (blur)=\"onBlur()\"\r\n      />\r\n\r\n      <span class=\"gog-datepicker__actions\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-datepicker__toggle gog-inline-center\"\r\n          [disabled]=\"isDisabled()\"\r\n          [attr.aria-label]=\"openCalendarLabel()\"\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]=\"clearAriaLabel()\"\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() || openCalendarLabel()\"\r\n    [class.gog-datepicker__panel--up]=\"!resolvedAppendToBody() && directionState() === 'up'\"\r\n    [class.gog-datepicker__panel--portal]=\"resolvedAppendToBody()\"\r\n    [style.top.px]=\"resolvedAppendToBody() ? panelPlacement()?.top : null\"\r\n    [style.left.px]=\"resolvedAppendToBody() ? panelPlacement()?.left : null\"\r\n    [style.z-index]=\"dropdownZIndex()\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    <gog-calendar\r\n      [value]=\"value()\"\r\n      [selectionMode]=\"selectionMode()\"\r\n      [min]=\"min()\"\r\n      [max]=\"max()\"\r\n      [disabledDates]=\"disabledDates()\"\r\n      [locale]=\"resolvedLocale()\"\r\n      [firstDayOfWeek]=\"resolvedFirstDayOfWeek()\"\r\n      [defaultMonth]=\"defaultMonth()\"\r\n      [numberOfMonths]=\"numberOfMonths()\"\r\n      [showTime]=\"showTime()\"\r\n      [hourFormat]=\"hourFormat()\"\r\n      [minuteStep]=\"minuteStep()\"\r\n      [showSeconds]=\"showSeconds()\"\r\n      [showTodayButton]=\"showTodayButton()\"\r\n      [showThisMonthButton]=\"showThisMonthButton()\"\r\n      [todayLabel]=\"todayLabel()\"\r\n      [thisMonthLabel]=\"thisMonthLabel()\"\r\n      [size]=\"resolvedSize()\"\r\n      (valueChange)=\"onCalendarValue($event)\"\r\n      (gogDateSelect)=\"onCalendarSelect($event)\"\r\n    />\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.gog-datepicker{display:flex;flex-direction:column;gap:var(--gog-datepicker-gap);width:100%}.gog-datepicker__label{color:var(--gog-datepicker-label-color);font-family:var(--gog-datepicker-label-font-family);font-size:var(--gog-datepicker-label-font-size);letter-spacing:var(--gog-datepicker-label-letter-spacing);text-transform:var(--gog-datepicker-label-text-transform)}.gog-datepicker__field{position:relative;display:flex;align-items:center;width:100%;min-width:var(--gog-datepicker-min-width)}.gog-datepicker__control{box-sizing:border-box;width:100%;padding:var(--gog-datepicker-padding-y, var(--gog-datepicker-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-datepicker-actions-reserve) var(--gog-datepicker-padding-y, var(--gog-datepicker-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-datepicker-padding-x, var(--gog-datepicker-size-padding-x, var(--gog-field-md-padding-x)));border:var(--gog-datepicker-border-width) var(--gog-datepicker-border-style) var(--gog-datepicker-border-color);border-radius:var(--gog-datepicker-radius);background-color:var(--gog-datepicker-bg, var(--gog-datepicker-field-bg));color:var(--gog-datepicker-color, var(--gog-datepicker-text-color));font-family:var(--gog-datepicker-font-family);font-size:var(--gog-datepicker-font-size, var(--gog-datepicker-size-font-size, var(--gog-field-md-font-size)));line-height:var(--gog-datepicker-line-height);transition:border-color var(--gog-datepicker-transition-duration) var(--gog-easing)}.gog-datepicker__control::placeholder{color:var(--gog-datepicker-placeholder-color)}.gog-datepicker__control:hover:not(:disabled){border-color:var(--gog-datepicker-hover-border-color)}.gog-datepicker__control:focus-visible,.gog-datepicker__toggle:focus-visible,.gog-datepicker__clear:focus-visible{outline:var(--gog-datepicker-focus-ring-width) solid var(--gog-datepicker-focus-ring-color);outline-offset:var(--gog-datepicker-focus-ring-offset)}.gog-datepicker__control:disabled{opacity:var(--gog-datepicker-disabled-opacity);cursor:not-allowed}.gog-datepicker__control[aria-invalid=true]{border-color:var(--gog-datepicker-error-border-color)}.gog-datepicker__actions{position:absolute;inset-inline-end:var(--gog-datepicker-actions-inset);display:inline-flex;align-items:center;flex-direction:row-reverse;gap:var(--gog-datepicker-actions-gap)}.gog-datepicker__toggle,.gog-datepicker__clear{padding:0;border:0;background:none;color:var(--gog-datepicker-icon-color);cursor:pointer}.gog-datepicker__toggle{font-size:var(--gog-datepicker-toggle-icon-size)}.gog-datepicker__clear{color:var(--gog-datepicker-clear-color);font-size:calc(var(--gog-icon-size) * var(--gog-datepicker-clear-icon-ratio))}.gog-datepicker__toggle:hover,.gog-datepicker__clear:hover{color:var(--gog-datepicker-icon-hover-color)}.gog-datepicker__toggle:disabled{opacity:var(--gog-datepicker-disabled-opacity);cursor:not-allowed}.gog-datepicker__error{color:var(--gog-datepicker-error-color);font-family:var(--gog-datepicker-error-font-family);font-size:var(--gog-datepicker-error-font-size)}.gog-datepicker__panel{position:absolute;inset-inline-start:0;top:calc(100% + var(--gog-datepicker-panel-gap));z-index:var(--gog-dropdown-z);width:max-content;border:var(--gog-datepicker-panel-border-width) var(--gog-datepicker-panel-border-style) var(--gog-datepicker-panel-border-color);border-radius:var(--gog-datepicker-panel-radius);background-color:var(--gog-datepicker-panel-bg);box-shadow:var(--gog-datepicker-panel-shadow)}.gog-datepicker__panel--up{top:auto;bottom:calc(100% + var(--gog-datepicker-panel-gap))}.gog-datepicker__panel--portal{position:fixed;top:0;inset-inline-start:0}.gog-datepicker__inline{border:var(--gog-datepicker-panel-border-width) var(--gog-datepicker-panel-border-style) var(--gog-datepicker-panel-border-color);border-radius:var(--gog-datepicker-panel-radius);background-color:var(--gog-datepicker-panel-bg)}.gog-datepicker--xsm{--gog-datepicker-size-padding-y: var(--gog-field-xsm-padding-y);--gog-datepicker-size-padding-x: var(--gog-field-xsm-padding-x);--gog-datepicker-size-font-size: var(--gog-field-xsm-font-size)}.gog-datepicker--sm{--gog-datepicker-size-padding-y: var(--gog-field-sm-padding-y);--gog-datepicker-size-padding-x: var(--gog-field-sm-padding-x);--gog-datepicker-size-font-size: var(--gog-field-sm-font-size)}.gog-datepicker--lg{--gog-datepicker-size-padding-y: var(--gog-field-lg-padding-y);--gog-datepicker-size-padding-x: var(--gog-field-lg-padding-x);--gog-datepicker-size-font-size: var(--gog-field-lg-font-size)}.gog-datepicker--slg{--gog-datepicker-size-padding-y: var(--gog-field-slg-padding-y);--gog-datepicker-size-padding-x: var(--gog-field-slg-padding-x);--gog-datepicker-size-font-size: var(--gog-field-slg-font-size)}:host(.gog-host--auto-width) .gog-datepicker,:host(.gog-host--auto-width) .gog-datepicker__field,:host(.gog-host--auto-width) .gog-datepicker__control{width:auto}.gog-datepicker__label--float{position:absolute;left:var(--gog-datepicker-padding-x, var(--gog-datepicker-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - 2 * var(--gog-datepicker-padding-x, var(--gog-datepicker-size-padding-x, var(--gog-field-md-padding-x))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;color:var(--gog-datepicker-placeholder-color);font-size:var(--gog-datepicker-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-datepicker-transition-duration) var(--gog-easing),font-size var(--gog-datepicker-transition-duration) var(--gog-easing),color var(--gog-datepicker-transition-duration) var(--gog-easing),top var(--gog-datepicker-transition-duration) var(--gog-easing),background-color var(--gog-datepicker-transition-duration) var(--gog-easing)}.gog-datepicker--float-in,.gog-datepicker--float-on{--gog-datepicker-float-top-padding: calc(var(--gog-datepicker-padding-y, var(--gog-datepicker-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-datepicker-float-label-reserve))}.gog-datepicker--float-in .gog-datepicker__control,.gog-datepicker--float-on .gog-datepicker__control{padding-top:var(--gog-datepicker-float-top-padding)}.gog-datepicker--float-in .gog-datepicker__label--float,.gog-datepicker--float-on .gog-datepicker__label--float{top:var(--gog-datepicker-float-top-padding);transform:none}.gog-datepicker--float-in.gog-datepicker--floated .gog-datepicker__label--float{top:var(--gog-datepicker-float-label-in-top);transform:translateY(0);font-size:var(--gog-datepicker-label-font-size);color:var(--gog-datepicker-label-color);text-transform:var(--gog-datepicker-label-text-transform);letter-spacing:var(--gog-datepicker-label-letter-spacing)}.gog-datepicker--float-on.gog-datepicker--floated .gog-datepicker__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-datepicker-label-font-size);color:var(--gog-datepicker-label-color);text-transform:var(--gog-datepicker-label-text-transform);letter-spacing:var(--gog-datepicker-label-letter-spacing);background-color:var(--gog-datepicker-float-label-on-bg, var(--gog-datepicker-field-bg));padding:0 4px;left:calc(var(--gog-datepicker-padding-x, var(--gog-datepicker-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-datepicker--float-over.gog-datepicker--floated .gog-datepicker__label--float{top:calc(-1 * var(--gog-datepicker-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-datepicker-label-font-size);color:var(--gog-datepicker-label-color);text-transform:var(--gog-datepicker-label-text-transform);letter-spacing:var(--gog-datepicker-label-letter-spacing)}.gog-datepicker--float-over .gog-datepicker__field{margin-top:var(--gog-datepicker-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-datepicker__control{transition:none}}\n"] }]
         }], 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 }] }] } });
 
 /**
@@ -4438,7 +4527,7 @@ class DialogComponent {
         return rect.width > 0 && rect.height > 0;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DialogComponent, isStandalone: true, selector: "gog-dialog", ngImport: i0, template: "@for (dialog of dialogService.dialogs(); track trackDialog($index, dialog)) {\r\n  <div\r\n    class=\"gog-dialog__backdrop\"\r\n    [class.gog-dialog__backdrop--modal]=\"dialog.config.modal !== false\"\r\n    [style.z-index]=\"panelZ(dialog)\"\r\n    (pointerdown)=\"onBackdropPointerDown($event, dialog)\"\r\n    (pointerup)=\"onBackdropPointerUp($event, dialog)\"\r\n    (pointercancel)=\"onBackdropPointerUp($event, dialog)\"\r\n  >\r\n    <div\r\n      #panel\r\n      class=\"gog-dialog__panel\"\r\n      [attr.data-dialog-id]=\"dialog.id\"\r\n      [style.--gog-dropdown-z]=\"panelZ(dialog) + 10\"\r\n      [style.--gog-tooltip-z]=\"panelZ(dialog) + 20\"\r\n      [style.--gog-dialog-offset-x]=\"dialog.offsetX + 'px'\"\r\n      [style.--gog-dialog-offset-y]=\"dialog.offsetY + 'px'\"\r\n      [style.width]=\"dialog.config.width ?? 'auto'\"\r\n      [style.max-width]=\"dialog.config.maxWidth ?? '90vw'\"\r\n      [attr.role]=\"dialog.config.role ?? 'dialog'\"\r\n      [attr.aria-modal]=\"dialog.config.modal === false ? null : 'true'\"\r\n      tabindex=\"-1\"\r\n      [attr.aria-labelledby]=\"dialog.config.title ? getTitleId(dialog) : null\"\r\n      (keydown)=\"onPanelKeydown($event, dialog, panel)\"\r\n    >\r\n      @if (dialog.config.title || dialog.config.closable !== false) {\r\n        <div\r\n          class=\"gog-dialog__header\"\r\n          [class.gog-dialog__header--draggable]=\"isDraggable(dialog)\"\r\n          (pointerdown)=\"startDrag($event, dialog)\"\r\n        >\r\n          @if (dialog.config.title) {\r\n            <h2 [id]=\"getTitleId(dialog)\" class=\"gog-dialog__title\">\r\n              {{ dialog.config.title }}\r\n            </h2>\r\n          }\r\n          @if (dialog.config.closable !== false) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"gog-dialog__close gog-inline-center\"\r\n              aria-label=\"Close dialog\"\r\n              (click)=\"close(dialog)\"\r\n            >\r\n              <gog-icon\r\n                [template]=\"dialog.config.closeIconTemplate ?? null\"\r\n                [name]=\"dialog.config.closeIconName ?? 'close'\"\r\n              />\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      <div class=\"gog-dialog__body\">\r\n        <!--\r\n          Not a tab stop: the panel runs its own focus trap over the projected content\r\n          (onPanelKeydown), keyed to a fixed focusable-element selector. Leaving this\r\n          focusable would insert an extra stop ahead of that content and change which\r\n          element the trap treats as \"first\".\r\n        -->\r\n        <gog-scroll\r\n          size=\"thin\"\r\n          [focusable]=\"false\"\r\n          overscrollBehavior=\"contain\"\r\n          class=\"gog-dialog__scroll\"\r\n        >\r\n          <ng-container\r\n            *ngComponentOutlet=\"dialog.config.component; injector: getInjector(dialog)\"\r\n          />\r\n        </gog-scroll>\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:contents}.gog-dialog__backdrop{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:var(--gog-dialog-backdrop-padding);animation:gog-fade-in var(--gog-dialog-backdrop-fade-duration) var(--gog-easing)}.gog-dialog__backdrop--modal{background:var(--gog-dialog-backdrop-bg);-webkit-backdrop-filter:blur(var(--gog-dialog-backdrop-blur));backdrop-filter:blur(var(--gog-dialog-backdrop-blur))}.gog-dialog__panel{display:flex;flex-direction:column;background:var(--gog-dialog-bg);color:var(--gog-dialog-color);border:var(--gog-dialog-border-width) var(--gog-dialog-border-style) var(--gog-dialog-border);box-shadow:var(--gog-dialog-shadow);overflow:visible;max-height:var(--gog-dialog-max-height);animation:gog-slide-in var(--gog-dialog-enter-duration) var(--gog-easing);min-width:var(--gog-dialog-min-width);border-radius:var(--gog-dialog-radius);transform:translate3d(var(--gog-dialog-offset-x, 0px),var(--gog-dialog-offset-y, 0px),0)}.gog-dialog__header{display:flex;align-items:center;justify-content:space-between;padding:var(--gog-dialog-header-padding);border-bottom:var(--gog-dialog-border-width) var(--gog-dialog-border-style) var(--gog-dialog-header-border-color);gap:var(--gog-dialog-header-gap);flex-shrink:0}.gog-dialog__header--draggable{cursor:move;touch-action:none;-webkit-user-select:none;user-select:none}.gog-dialog__title{margin:0;color:var(--gog-dialog-color);font-family:var(--gog-dialog-font-family)}.gog-dialog__close{justify-content:center;width:var(--gog-dialog-close-size);height:var(--gog-dialog-close-size);border:var(--gog-dialog-border-width) var(--gog-dialog-border-style) transparent;background:transparent;color:var(--gog-dialog-close-color);cursor:pointer;flex-shrink:0;padding:0;line-height:1;font-size:var(--gog-dialog-close-font-size)}.gog-dialog__close gog-icon{font-size:var(--gog-dialog-close-font-size)}.gog-dialog__close:hover{color:var(--gog-dialog-close-hover-color);border-color:var(--gog-dialog-close-hover-border);background:var(--gog-dialog-close-hover-bg)}.gog-dialog__close:focus-visible{outline:var(--gog-dialog-close-focus-ring-width) solid var(--gog-dialog-close-focus-ring);outline-offset:var(--gog-dialog-close-focus-ring-offset)}.gog-dialog__body{padding:var(--gog-dialog-body-padding);display:flex;flex-direction:column;flex:1;min-height:0;max-height:var(--gog-dialog-body-max-height);overflow:hidden}.gog-dialog__scroll{flex:1 1 auto;min-height:0}@keyframes gog-fade-in{0%{opacity:0}to{opacity:1}}@keyframes gog-slide-in{0%{transform:translateY(var(--gog-dialog-enter-distance));opacity:0}to{transform:translateY(0);opacity:1}}@media(prefers-reduced-motion:reduce){.gog-dialog__backdrop,.gog-dialog__panel,.gog-dialog__close{animation:none;transition:none}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "component", type: ScrollComponent, selector: "gog-scroll", inputs: ["axis", "size", "autoHide", "hideDelay", "reachThreshold", "focusable", "ariaLabel", "overscrollBehavior"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DialogComponent, isStandalone: true, selector: "gog-dialog", ngImport: i0, template: "@for (dialog of dialogService.dialogs(); track trackDialog($index, dialog)) {\r\n  <div\r\n    class=\"gog-dialog__backdrop\"\r\n    [class.gog-dialog__backdrop--modal]=\"dialog.config.modal !== false\"\r\n    [style.z-index]=\"panelZ(dialog)\"\r\n    (pointerdown)=\"onBackdropPointerDown($event, dialog)\"\r\n    (pointerup)=\"onBackdropPointerUp($event, dialog)\"\r\n    (pointercancel)=\"onBackdropPointerUp($event, dialog)\"\r\n  >\r\n    <div\r\n      #panel\r\n      class=\"gog-dialog__panel\"\r\n      [attr.data-dialog-id]=\"dialog.id\"\r\n      [style.--gog-dropdown-z]=\"panelZ(dialog) + 10\"\r\n      [style.--gog-tooltip-z]=\"panelZ(dialog) + 20\"\r\n      [style.--gog-dialog-offset-x]=\"dialog.offsetX + 'px'\"\r\n      [style.--gog-dialog-offset-y]=\"dialog.offsetY + 'px'\"\r\n      [style.width]=\"dialog.config.width ?? 'auto'\"\r\n      [style.max-width]=\"dialog.config.maxWidth ?? '90vw'\"\r\n      [attr.role]=\"dialog.config.role ?? 'dialog'\"\r\n      [attr.aria-modal]=\"dialog.config.modal === false ? null : 'true'\"\r\n      tabindex=\"-1\"\r\n      [attr.aria-labelledby]=\"dialog.config.title ? getTitleId(dialog) : null\"\r\n      (keydown)=\"onPanelKeydown($event, dialog, panel)\"\r\n    >\r\n      @if (dialog.config.title || dialog.config.closable !== false) {\r\n        <div\r\n          class=\"gog-dialog__header\"\r\n          [class.gog-dialog__header--draggable]=\"isDraggable(dialog)\"\r\n          (pointerdown)=\"startDrag($event, dialog)\"\r\n        >\r\n          @if (dialog.config.title) {\r\n            <h2 [id]=\"getTitleId(dialog)\" class=\"gog-dialog__title\">\r\n              {{ dialog.config.title }}\r\n            </h2>\r\n          }\r\n          @if (dialog.config.closable !== false) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"gog-dialog__close gog-inline-center\"\r\n              aria-label=\"Close dialog\"\r\n              (click)=\"close(dialog)\"\r\n            >\r\n              <gog-icon\r\n                [template]=\"dialog.config.closeIconTemplate ?? null\"\r\n                [name]=\"dialog.config.closeIconName ?? 'close'\"\r\n              />\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      <div class=\"gog-dialog__body\">\r\n        <!--\r\n          Not a tab stop: the panel runs its own focus trap over the projected content\r\n          (onPanelKeydown), keyed to a fixed focusable-element selector. Leaving this\r\n          focusable would insert an extra stop ahead of that content and change which\r\n          element the trap treats as \"first\".\r\n        -->\r\n        <gog-scroll\r\n          size=\"thin\"\r\n          [focusable]=\"false\"\r\n          overscrollBehavior=\"contain\"\r\n          class=\"gog-dialog__scroll\"\r\n        >\r\n          <ng-container\r\n            *ngComponentOutlet=\"dialog.config.component; injector: getInjector(dialog)\"\r\n          />\r\n        </gog-scroll>\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:contents}.gog-dialog__backdrop{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:var(--gog-dialog-backdrop-padding);animation:gog-fade-in var(--gog-dialog-backdrop-fade-duration) var(--gog-easing)}.gog-dialog__backdrop--modal{background:var(--gog-dialog-backdrop-bg);-webkit-backdrop-filter:blur(var(--gog-dialog-backdrop-blur));backdrop-filter:blur(var(--gog-dialog-backdrop-blur))}.gog-dialog__panel{display:flex;flex-direction:column;background:var(--gog-dialog-bg);color:var(--gog-dialog-color);border:var(--gog-dialog-border-width) var(--gog-dialog-border-style) var(--gog-dialog-border);box-shadow:var(--gog-dialog-shadow);overflow:visible;max-height:var(--gog-dialog-max-height);animation:gog-slide-in var(--gog-dialog-enter-duration) var(--gog-easing);min-width:var(--gog-dialog-min-width);border-radius:var(--gog-dialog-radius);transform:translate3d(var(--gog-dialog-offset-x, 0px),var(--gog-dialog-offset-y, 0px),0)}.gog-dialog__header{display:flex;align-items:center;justify-content:space-between;padding:var(--gog-dialog-header-padding);border-bottom:var(--gog-dialog-border-width) var(--gog-dialog-border-style) var(--gog-dialog-header-border-color);gap:var(--gog-dialog-header-gap);flex-shrink:0}.gog-dialog__header--draggable{cursor:move;touch-action:none;-webkit-user-select:none;user-select:none}.gog-dialog__title{margin:0;color:var(--gog-dialog-color);font-family:var(--gog-dialog-font-family)}.gog-dialog__close{justify-content:center;width:var(--gog-dialog-close-size);height:var(--gog-dialog-close-size);border:var(--gog-dialog-border-width) var(--gog-dialog-border-style) transparent;background:transparent;color:var(--gog-dialog-close-color);cursor:pointer;flex-shrink:0;padding:0;line-height:1;font-size:var(--gog-dialog-close-font-size)}.gog-dialog__close gog-icon{font-size:var(--gog-dialog-close-font-size)}.gog-dialog__close:hover{color:var(--gog-dialog-close-hover-color);border-color:var(--gog-dialog-close-hover-border);background:var(--gog-dialog-close-hover-bg)}.gog-dialog__close:focus-visible{outline:var(--gog-dialog-close-focus-ring-width) solid var(--gog-dialog-close-focus-ring);outline-offset:var(--gog-dialog-close-focus-ring-offset)}.gog-dialog__body{padding:var(--gog-dialog-body-padding);display:flex;flex-direction:column;flex:1;min-height:0;max-height:var(--gog-dialog-body-max-height);overflow:hidden}.gog-dialog__scroll{flex:1 1 auto;min-height:0}@keyframes gog-fade-in{0%{opacity:0}to{opacity:1}}@keyframes gog-slide-in{0%{transform:translateY(var(--gog-dialog-enter-distance));opacity:0}to{transform:translateY(0);opacity:1}}@media(prefers-reduced-motion:reduce){.gog-dialog__backdrop,.gog-dialog__panel,.gog-dialog__close{animation:none;transition:none}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { 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: DialogComponent, decorators: [{
             type: Component,
@@ -4560,7 +4649,7 @@ class ToastComponent {
         return (typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ToastComponent, isStandalone: true, selector: "gog-toast", inputs: { toast: { classPropertyName: "toast", publicName: "toast", isSignal: true, isRequired: true, transformFunction: null }, isFront: { classPropertyName: "isFront", publicName: "isFront", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, host: { properties: { "attr.role": "ariaRole()", "attr.aria-live": "ariaLive()", "attr.aria-atomic": "true" } }, viewQueries: [{ propertyName: "progressEl", first: true, predicate: ["progress"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"gog-toast\"\n  [class.gog-toast--paused]=\"isPaused()\"\n  [class.gog-toast--queued]=\"!isFront()\"\n  [class.gog-toast--success]=\"toast().type === 'success'\"\n  [class.gog-toast--error]=\"toast().type === 'error'\"\n  [class.gog-toast--warning]=\"toast().type === 'warning'\"\n  [class.gog-toast--info]=\"toast().type === 'info'\"\n  [class.gog-toast--visible]=\"visible()\"\n  [style.--toast-duration]=\"toast().duration + 'ms'\"\n  (mouseenter)=\"pauseAutoDismiss()\"\n  (mouseleave)=\"resumeAutoDismiss()\"\n  (transitionend)=\"onTransitionEnd($event)\"\n>\n  <div class=\"gog-toast__content\">\n    <span class=\"gog-toast__icon\" aria-hidden=\"true\">\n      <gog-icon [template]=\"toast().iconTemplate ?? null\" [name]=\"toast().iconName\" />\n    </span>\n    <div class=\"gog-toast__main\">\n      <span class=\"gog-toast__message\">{{ toast().message }}</span>\n      @if (hasActions()) {\n        <div class=\"gog-toast__actions\">\n          @for (action of toast().actions; track action.label) {\n            <gog-button\n              class=\"gog-toast__action\"\n              variant=\"ghost\"\n              size=\"sm\"\n              type=\"button\"\n              (gogClick)=\"runAction(action)\"\n            >\n              @if (action.iconName || action.iconTemplate) {\n                <gog-icon\n                  [template]=\"action.iconTemplate ?? null\"\n                  [name]=\"action.iconName ?? 'check'\"\n                />\n              }\n              {{ action.label }}\n            </gog-button>\n          }\n        </div>\n      }\n    </div>\n    <gog-button\n      class=\"gog-toast__close\"\n      variant=\"ghost\"\n      size=\"sm\"\n      type=\"button\"\n      aria-label=\"Close toast\"\n      (gogClick)=\"close()\"\n    >\n      <gog-icon name=\"close\" />\n    </gog-button>\n  </div>\n  @if (!toast().isSticky) {\n    <span #progress class=\"gog-toast__progress\" aria-hidden=\"true\"></span>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.gog-toast{--toast-border: var(--gog-toast-type-color, var(--gog-toast-border));--toast-icon-color: var(--gog-toast-type-color, var(--gog-toast-icon-color));--toast-enter-x: var(--gog-toast-enter-distance);--toast-progress-color: var(--toast-border);--toast-stack-depth: min(var(--toast-stack-index, 0), var(--gog-toast-stack-max-depth));--toast-stack-collapsed-y: calc( var(--toast-stack-depth) * var(--gog-toast-stack-peek) * var(--toast-stack-direction, 1) );--toast-stack-expanded-y: calc( var(--toast-stack-depth) * var(--gog-toast-stack-expanded-gap) * var(--toast-stack-direction, 1) );--toast-stack-y: calc( var(--toast-stack-collapsed-y) + (var(--toast-stack-expanded-y) - var(--toast-stack-collapsed-y)) * var(--toast-stack-expanded, 0) );--toast-stack-collapsed-scale: calc( 1 - (var(--toast-stack-depth) * var(--gog-toast-stack-scale-step)) );--toast-stack-scale: calc( var(--toast-stack-collapsed-scale) + (1 - var(--toast-stack-collapsed-scale)) * var(--toast-stack-expanded, 0) );--toast-stack-collapsed-opacity: max( var(--gog-toast-stack-min-opacity), calc(1 - (var(--toast-stack-depth) * var(--gog-toast-stack-opacity-step))) );--toast-stack-opacity: calc( var(--toast-stack-collapsed-opacity) + (1 - var(--toast-stack-collapsed-opacity)) * var(--toast-stack-expanded, 0) );position:relative;z-index:calc(var(--gog-toast-base-z) - var(--toast-stack-index, 0));display:block;padding:var(--gog-toast-padding);background:var(--gog-toast-bg);border-left:var(--gog-toast-accent-width) solid var(--toast-border);border-radius:var(--gog-toast-radius);color:var(--gog-toast-color);font-family:var(--gog-toast-font-family);box-shadow:var(--gog-toast-shadow);min-width:var(--gog-toast-min-width);max-width:var(--gog-toast-max-width);pointer-events:all;opacity:0;overflow:hidden;transform:translate3d(var(--toast-enter-x),var(--toast-stack-y),0) scale(var(--toast-stack-scale));transition:opacity var(--gog-toast-transition-duration) var(--gog-easing),transform var(--gog-toast-transition-duration) var(--gog-easing)}.gog-toast--visible{opacity:var(--toast-stack-opacity);transform:translate3d(0,var(--toast-stack-y),0) scale(var(--toast-stack-scale))}:host(.slide-left) .gog-toast{--toast-enter-x: calc(var(--gog-toast-enter-distance) * -1)}.gog-toast--success{--gog-toast-type-color: var(--gog-toast-success-color)}.gog-toast--error{--gog-toast-type-color: var(--gog-toast-error-color)}.gog-toast--warning{--gog-toast-type-color: var(--gog-toast-warning-color)}.gog-toast--info{--gog-toast-type-color: var(--gog-toast-info-color)}.gog-toast__icon{color:var(--toast-icon-color);font-size:var(--gog-toast-icon-size);line-height:var(--gog-toast-icon-line-height);flex-shrink:0}.gog-toast__icon gog-icon{font-size:var(--gog-toast-icon-size)}.gog-toast__content{display:flex;align-items:flex-start;gap:var(--gog-toast-content-gap)}.gog-toast__main{display:flex;flex:1;flex-direction:column;gap:var(--gog-toast-main-gap);min-width:0}.gog-toast__message{flex:1;font-size:var(--gog-toast-message-font-size);line-height:var(--gog-toast-message-line-height)}.gog-toast__actions{display:flex;flex-wrap:wrap;gap:var(--gog-toast-actions-gap)}.gog-toast__action{--gog-btn-padding: var(--gog-toast-action-padding);--gog-btn-font-size: var(--gog-toast-action-font-size)}.gog-toast__action gog-icon{font-size:var(--gog-toast-action-font-size)}.gog-toast__close{align-self:flex-start;flex-shrink:0;--gog-btn-padding: var(--gog-toast-close-padding);--gog-btn-font-size: var(--gog-toast-close-font-size)}.gog-toast__close gog-icon{font-size:var(--gog-toast-close-font-size)}.gog-toast__progress{position:absolute;right:0;bottom:0;left:0;height:var(--gog-toast-progress-height);background:color-mix(in srgb,var(--toast-progress-color) var(--gog-toast-progress-opacity),transparent);transform-origin:left center;animation:gog-toast-progress var(--toast-duration) linear forwards}.gog-toast--paused .gog-toast__progress,.gog-toast--queued .gog-toast__progress{animation-play-state:paused}@keyframes gog-toast-progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@media(prefers-reduced-motion:reduce){.gog-toast,.gog-toast__progress{transition:none;animation:none}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "loading", "debounce", "ariaLabel"], outputs: ["gogClick"] }, { 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: ToastComponent, isStandalone: true, selector: "gog-toast", inputs: { toast: { classPropertyName: "toast", publicName: "toast", isSignal: true, isRequired: true, transformFunction: null }, isFront: { classPropertyName: "isFront", publicName: "isFront", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, host: { properties: { "attr.role": "ariaRole()", "attr.aria-live": "ariaLive()", "attr.aria-atomic": "true" } }, viewQueries: [{ propertyName: "progressEl", first: true, predicate: ["progress"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  class=\"gog-toast\"\r\n  [class.gog-toast--paused]=\"isPaused()\"\r\n  [class.gog-toast--queued]=\"!isFront()\"\r\n  [class.gog-toast--success]=\"toast().type === 'success'\"\r\n  [class.gog-toast--error]=\"toast().type === 'error'\"\r\n  [class.gog-toast--warning]=\"toast().type === 'warning'\"\r\n  [class.gog-toast--info]=\"toast().type === 'info'\"\r\n  [class.gog-toast--visible]=\"visible()\"\r\n  [style.--toast-duration]=\"toast().duration + 'ms'\"\r\n  (mouseenter)=\"pauseAutoDismiss()\"\r\n  (mouseleave)=\"resumeAutoDismiss()\"\r\n  (transitionend)=\"onTransitionEnd($event)\"\r\n>\r\n  <div class=\"gog-toast__content\">\r\n    <span class=\"gog-toast__icon\" aria-hidden=\"true\">\r\n      <gog-icon [template]=\"toast().iconTemplate ?? null\" [name]=\"toast().iconName\" />\r\n    </span>\r\n    <div class=\"gog-toast__main\">\r\n      <span class=\"gog-toast__message\">{{ toast().message }}</span>\r\n      @if (hasActions()) {\r\n        <div class=\"gog-toast__actions\">\r\n          @for (action of toast().actions; track action.label) {\r\n            <gog-button\r\n              class=\"gog-toast__action\"\r\n              variant=\"ghost\"\r\n              size=\"sm\"\r\n              type=\"button\"\r\n              (gogClick)=\"runAction(action)\"\r\n            >\r\n              @if (action.iconName || action.iconTemplate) {\r\n                <gog-icon\r\n                  [template]=\"action.iconTemplate ?? null\"\r\n                  [name]=\"action.iconName ?? 'check'\"\r\n                />\r\n              }\r\n              {{ action.label }}\r\n            </gog-button>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n    <gog-button\r\n      class=\"gog-toast__close\"\r\n      variant=\"ghost\"\r\n      size=\"sm\"\r\n      type=\"button\"\r\n      aria-label=\"Close toast\"\r\n      (gogClick)=\"close()\"\r\n    >\r\n      <gog-icon name=\"close\" />\r\n    </gog-button>\r\n  </div>\r\n  @if (!toast().isSticky) {\r\n    <span #progress class=\"gog-toast__progress\" aria-hidden=\"true\"></span>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.gog-toast{--toast-border: var(--gog-toast-type-color, var(--gog-toast-border));--toast-icon-color: var(--gog-toast-type-color, var(--gog-toast-icon-color));--toast-enter-x: var(--gog-toast-enter-distance);--toast-progress-color: var(--toast-border);--toast-stack-depth: min(var(--toast-stack-index, 0), var(--gog-toast-stack-max-depth));--toast-stack-collapsed-y: calc( var(--toast-stack-depth) * var(--gog-toast-stack-peek) * var(--toast-stack-direction, 1) );--toast-stack-expanded-y: calc( var(--toast-stack-depth) * var(--gog-toast-stack-expanded-gap) * var(--toast-stack-direction, 1) );--toast-stack-y: calc( var(--toast-stack-collapsed-y) + (var(--toast-stack-expanded-y) - var(--toast-stack-collapsed-y)) * var(--toast-stack-expanded, 0) );--toast-stack-collapsed-scale: calc( 1 - (var(--toast-stack-depth) * var(--gog-toast-stack-scale-step)) );--toast-stack-scale: calc( var(--toast-stack-collapsed-scale) + (1 - var(--toast-stack-collapsed-scale)) * var(--toast-stack-expanded, 0) );--toast-stack-collapsed-opacity: max( var(--gog-toast-stack-min-opacity), calc(1 - (var(--toast-stack-depth) * var(--gog-toast-stack-opacity-step))) );--toast-stack-opacity: calc( var(--toast-stack-collapsed-opacity) + (1 - var(--toast-stack-collapsed-opacity)) * var(--toast-stack-expanded, 0) );position:relative;z-index:calc(var(--gog-toast-base-z) - var(--toast-stack-index, 0));display:block;padding:var(--gog-toast-padding);background:var(--gog-toast-bg);border-left:var(--gog-toast-accent-width) solid var(--toast-border);border-radius:var(--gog-toast-radius);color:var(--gog-toast-color);font-family:var(--gog-toast-font-family);box-shadow:var(--gog-toast-shadow);min-width:var(--gog-toast-min-width);max-width:var(--gog-toast-max-width);pointer-events:all;opacity:0;overflow:hidden;transform:translate3d(var(--toast-enter-x),var(--toast-stack-y),0) scale(var(--toast-stack-scale));transition:opacity var(--gog-toast-transition-duration) var(--gog-easing),transform var(--gog-toast-transition-duration) var(--gog-easing)}.gog-toast--visible{opacity:var(--toast-stack-opacity);transform:translate3d(0,var(--toast-stack-y),0) scale(var(--toast-stack-scale))}:host(.slide-left) .gog-toast{--toast-enter-x: calc(var(--gog-toast-enter-distance) * -1)}.gog-toast--success{--gog-toast-type-color: var(--gog-toast-success-color)}.gog-toast--error{--gog-toast-type-color: var(--gog-toast-error-color)}.gog-toast--warning{--gog-toast-type-color: var(--gog-toast-warning-color)}.gog-toast--info{--gog-toast-type-color: var(--gog-toast-info-color)}.gog-toast__icon{color:var(--toast-icon-color);font-size:var(--gog-toast-icon-size);line-height:var(--gog-toast-icon-line-height);flex-shrink:0}.gog-toast__icon gog-icon{font-size:var(--gog-toast-icon-size)}.gog-toast__content{display:flex;align-items:flex-start;gap:var(--gog-toast-content-gap)}.gog-toast__main{display:flex;flex:1;flex-direction:column;gap:var(--gog-toast-main-gap);min-width:0}.gog-toast__message{flex:1;font-size:var(--gog-toast-message-font-size);line-height:var(--gog-toast-message-line-height)}.gog-toast__actions{display:flex;flex-wrap:wrap;gap:var(--gog-toast-actions-gap)}.gog-toast__action{--gog-btn-padding: var(--gog-toast-action-padding);--gog-btn-font-size: var(--gog-toast-action-font-size)}.gog-toast__action gog-icon{font-size:var(--gog-toast-action-font-size)}.gog-toast__close{align-self:flex-start;flex-shrink:0;--gog-btn-padding: var(--gog-toast-close-padding);--gog-btn-font-size: var(--gog-toast-close-font-size)}.gog-toast__close gog-icon{font-size:var(--gog-toast-close-font-size)}.gog-toast__progress{position:absolute;right:0;bottom:0;left:0;height:var(--gog-toast-progress-height);background:color-mix(in srgb,var(--toast-progress-color) var(--gog-toast-progress-opacity),transparent);transform-origin:left center;animation:gog-toast-progress var(--toast-duration) linear forwards}.gog-toast--paused .gog-toast__progress,.gog-toast--queued .gog-toast__progress{animation-play-state:paused}@keyframes gog-toast-progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@media(prefers-reduced-motion:reduce){.gog-toast,.gog-toast__progress{transition:none;animation:none}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "loading", "debounce", "ariaLabel"], outputs: ["gogClick"] }, { 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: ToastComponent, decorators: [{
             type: Component,
@@ -4568,7 +4657,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         '[attr.role]': 'ariaRole()',
                         '[attr.aria-live]': 'ariaLive()',
                         '[attr.aria-atomic]': 'true',
-                    }, template: "<div\n  class=\"gog-toast\"\n  [class.gog-toast--paused]=\"isPaused()\"\n  [class.gog-toast--queued]=\"!isFront()\"\n  [class.gog-toast--success]=\"toast().type === 'success'\"\n  [class.gog-toast--error]=\"toast().type === 'error'\"\n  [class.gog-toast--warning]=\"toast().type === 'warning'\"\n  [class.gog-toast--info]=\"toast().type === 'info'\"\n  [class.gog-toast--visible]=\"visible()\"\n  [style.--toast-duration]=\"toast().duration + 'ms'\"\n  (mouseenter)=\"pauseAutoDismiss()\"\n  (mouseleave)=\"resumeAutoDismiss()\"\n  (transitionend)=\"onTransitionEnd($event)\"\n>\n  <div class=\"gog-toast__content\">\n    <span class=\"gog-toast__icon\" aria-hidden=\"true\">\n      <gog-icon [template]=\"toast().iconTemplate ?? null\" [name]=\"toast().iconName\" />\n    </span>\n    <div class=\"gog-toast__main\">\n      <span class=\"gog-toast__message\">{{ toast().message }}</span>\n      @if (hasActions()) {\n        <div class=\"gog-toast__actions\">\n          @for (action of toast().actions; track action.label) {\n            <gog-button\n              class=\"gog-toast__action\"\n              variant=\"ghost\"\n              size=\"sm\"\n              type=\"button\"\n              (gogClick)=\"runAction(action)\"\n            >\n              @if (action.iconName || action.iconTemplate) {\n                <gog-icon\n                  [template]=\"action.iconTemplate ?? null\"\n                  [name]=\"action.iconName ?? 'check'\"\n                />\n              }\n              {{ action.label }}\n            </gog-button>\n          }\n        </div>\n      }\n    </div>\n    <gog-button\n      class=\"gog-toast__close\"\n      variant=\"ghost\"\n      size=\"sm\"\n      type=\"button\"\n      aria-label=\"Close toast\"\n      (gogClick)=\"close()\"\n    >\n      <gog-icon name=\"close\" />\n    </gog-button>\n  </div>\n  @if (!toast().isSticky) {\n    <span #progress class=\"gog-toast__progress\" aria-hidden=\"true\"></span>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.gog-toast{--toast-border: var(--gog-toast-type-color, var(--gog-toast-border));--toast-icon-color: var(--gog-toast-type-color, var(--gog-toast-icon-color));--toast-enter-x: var(--gog-toast-enter-distance);--toast-progress-color: var(--toast-border);--toast-stack-depth: min(var(--toast-stack-index, 0), var(--gog-toast-stack-max-depth));--toast-stack-collapsed-y: calc( var(--toast-stack-depth) * var(--gog-toast-stack-peek) * var(--toast-stack-direction, 1) );--toast-stack-expanded-y: calc( var(--toast-stack-depth) * var(--gog-toast-stack-expanded-gap) * var(--toast-stack-direction, 1) );--toast-stack-y: calc( var(--toast-stack-collapsed-y) + (var(--toast-stack-expanded-y) - var(--toast-stack-collapsed-y)) * var(--toast-stack-expanded, 0) );--toast-stack-collapsed-scale: calc( 1 - (var(--toast-stack-depth) * var(--gog-toast-stack-scale-step)) );--toast-stack-scale: calc( var(--toast-stack-collapsed-scale) + (1 - var(--toast-stack-collapsed-scale)) * var(--toast-stack-expanded, 0) );--toast-stack-collapsed-opacity: max( var(--gog-toast-stack-min-opacity), calc(1 - (var(--toast-stack-depth) * var(--gog-toast-stack-opacity-step))) );--toast-stack-opacity: calc( var(--toast-stack-collapsed-opacity) + (1 - var(--toast-stack-collapsed-opacity)) * var(--toast-stack-expanded, 0) );position:relative;z-index:calc(var(--gog-toast-base-z) - var(--toast-stack-index, 0));display:block;padding:var(--gog-toast-padding);background:var(--gog-toast-bg);border-left:var(--gog-toast-accent-width) solid var(--toast-border);border-radius:var(--gog-toast-radius);color:var(--gog-toast-color);font-family:var(--gog-toast-font-family);box-shadow:var(--gog-toast-shadow);min-width:var(--gog-toast-min-width);max-width:var(--gog-toast-max-width);pointer-events:all;opacity:0;overflow:hidden;transform:translate3d(var(--toast-enter-x),var(--toast-stack-y),0) scale(var(--toast-stack-scale));transition:opacity var(--gog-toast-transition-duration) var(--gog-easing),transform var(--gog-toast-transition-duration) var(--gog-easing)}.gog-toast--visible{opacity:var(--toast-stack-opacity);transform:translate3d(0,var(--toast-stack-y),0) scale(var(--toast-stack-scale))}:host(.slide-left) .gog-toast{--toast-enter-x: calc(var(--gog-toast-enter-distance) * -1)}.gog-toast--success{--gog-toast-type-color: var(--gog-toast-success-color)}.gog-toast--error{--gog-toast-type-color: var(--gog-toast-error-color)}.gog-toast--warning{--gog-toast-type-color: var(--gog-toast-warning-color)}.gog-toast--info{--gog-toast-type-color: var(--gog-toast-info-color)}.gog-toast__icon{color:var(--toast-icon-color);font-size:var(--gog-toast-icon-size);line-height:var(--gog-toast-icon-line-height);flex-shrink:0}.gog-toast__icon gog-icon{font-size:var(--gog-toast-icon-size)}.gog-toast__content{display:flex;align-items:flex-start;gap:var(--gog-toast-content-gap)}.gog-toast__main{display:flex;flex:1;flex-direction:column;gap:var(--gog-toast-main-gap);min-width:0}.gog-toast__message{flex:1;font-size:var(--gog-toast-message-font-size);line-height:var(--gog-toast-message-line-height)}.gog-toast__actions{display:flex;flex-wrap:wrap;gap:var(--gog-toast-actions-gap)}.gog-toast__action{--gog-btn-padding: var(--gog-toast-action-padding);--gog-btn-font-size: var(--gog-toast-action-font-size)}.gog-toast__action gog-icon{font-size:var(--gog-toast-action-font-size)}.gog-toast__close{align-self:flex-start;flex-shrink:0;--gog-btn-padding: var(--gog-toast-close-padding);--gog-btn-font-size: var(--gog-toast-close-font-size)}.gog-toast__close gog-icon{font-size:var(--gog-toast-close-font-size)}.gog-toast__progress{position:absolute;right:0;bottom:0;left:0;height:var(--gog-toast-progress-height);background:color-mix(in srgb,var(--toast-progress-color) var(--gog-toast-progress-opacity),transparent);transform-origin:left center;animation:gog-toast-progress var(--toast-duration) linear forwards}.gog-toast--paused .gog-toast__progress,.gog-toast--queued .gog-toast__progress{animation-play-state:paused}@keyframes gog-toast-progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@media(prefers-reduced-motion:reduce){.gog-toast,.gog-toast__progress{transition:none;animation:none}}\n"] }]
+                    }, template: "<div\r\n  class=\"gog-toast\"\r\n  [class.gog-toast--paused]=\"isPaused()\"\r\n  [class.gog-toast--queued]=\"!isFront()\"\r\n  [class.gog-toast--success]=\"toast().type === 'success'\"\r\n  [class.gog-toast--error]=\"toast().type === 'error'\"\r\n  [class.gog-toast--warning]=\"toast().type === 'warning'\"\r\n  [class.gog-toast--info]=\"toast().type === 'info'\"\r\n  [class.gog-toast--visible]=\"visible()\"\r\n  [style.--toast-duration]=\"toast().duration + 'ms'\"\r\n  (mouseenter)=\"pauseAutoDismiss()\"\r\n  (mouseleave)=\"resumeAutoDismiss()\"\r\n  (transitionend)=\"onTransitionEnd($event)\"\r\n>\r\n  <div class=\"gog-toast__content\">\r\n    <span class=\"gog-toast__icon\" aria-hidden=\"true\">\r\n      <gog-icon [template]=\"toast().iconTemplate ?? null\" [name]=\"toast().iconName\" />\r\n    </span>\r\n    <div class=\"gog-toast__main\">\r\n      <span class=\"gog-toast__message\">{{ toast().message }}</span>\r\n      @if (hasActions()) {\r\n        <div class=\"gog-toast__actions\">\r\n          @for (action of toast().actions; track action.label) {\r\n            <gog-button\r\n              class=\"gog-toast__action\"\r\n              variant=\"ghost\"\r\n              size=\"sm\"\r\n              type=\"button\"\r\n              (gogClick)=\"runAction(action)\"\r\n            >\r\n              @if (action.iconName || action.iconTemplate) {\r\n                <gog-icon\r\n                  [template]=\"action.iconTemplate ?? null\"\r\n                  [name]=\"action.iconName ?? 'check'\"\r\n                />\r\n              }\r\n              {{ action.label }}\r\n            </gog-button>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n    <gog-button\r\n      class=\"gog-toast__close\"\r\n      variant=\"ghost\"\r\n      size=\"sm\"\r\n      type=\"button\"\r\n      aria-label=\"Close toast\"\r\n      (gogClick)=\"close()\"\r\n    >\r\n      <gog-icon name=\"close\" />\r\n    </gog-button>\r\n  </div>\r\n  @if (!toast().isSticky) {\r\n    <span #progress class=\"gog-toast__progress\" aria-hidden=\"true\"></span>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.gog-toast{--toast-border: var(--gog-toast-type-color, var(--gog-toast-border));--toast-icon-color: var(--gog-toast-type-color, var(--gog-toast-icon-color));--toast-enter-x: var(--gog-toast-enter-distance);--toast-progress-color: var(--toast-border);--toast-stack-depth: min(var(--toast-stack-index, 0), var(--gog-toast-stack-max-depth));--toast-stack-collapsed-y: calc( var(--toast-stack-depth) * var(--gog-toast-stack-peek) * var(--toast-stack-direction, 1) );--toast-stack-expanded-y: calc( var(--toast-stack-depth) * var(--gog-toast-stack-expanded-gap) * var(--toast-stack-direction, 1) );--toast-stack-y: calc( var(--toast-stack-collapsed-y) + (var(--toast-stack-expanded-y) - var(--toast-stack-collapsed-y)) * var(--toast-stack-expanded, 0) );--toast-stack-collapsed-scale: calc( 1 - (var(--toast-stack-depth) * var(--gog-toast-stack-scale-step)) );--toast-stack-scale: calc( var(--toast-stack-collapsed-scale) + (1 - var(--toast-stack-collapsed-scale)) * var(--toast-stack-expanded, 0) );--toast-stack-collapsed-opacity: max( var(--gog-toast-stack-min-opacity), calc(1 - (var(--toast-stack-depth) * var(--gog-toast-stack-opacity-step))) );--toast-stack-opacity: calc( var(--toast-stack-collapsed-opacity) + (1 - var(--toast-stack-collapsed-opacity)) * var(--toast-stack-expanded, 0) );position:relative;z-index:calc(var(--gog-toast-base-z) - var(--toast-stack-index, 0));display:block;padding:var(--gog-toast-padding);background:var(--gog-toast-bg);border-left:var(--gog-toast-accent-width) solid var(--toast-border);border-radius:var(--gog-toast-radius);color:var(--gog-toast-color);font-family:var(--gog-toast-font-family);box-shadow:var(--gog-toast-shadow);min-width:var(--gog-toast-min-width);max-width:var(--gog-toast-max-width);pointer-events:all;opacity:0;overflow:hidden;transform:translate3d(var(--toast-enter-x),var(--toast-stack-y),0) scale(var(--toast-stack-scale));transition:opacity var(--gog-toast-transition-duration) var(--gog-easing),transform var(--gog-toast-transition-duration) var(--gog-easing)}.gog-toast--visible{opacity:var(--toast-stack-opacity);transform:translate3d(0,var(--toast-stack-y),0) scale(var(--toast-stack-scale))}:host(.slide-left) .gog-toast{--toast-enter-x: calc(var(--gog-toast-enter-distance) * -1)}.gog-toast--success{--gog-toast-type-color: var(--gog-toast-success-color)}.gog-toast--error{--gog-toast-type-color: var(--gog-toast-error-color)}.gog-toast--warning{--gog-toast-type-color: var(--gog-toast-warning-color)}.gog-toast--info{--gog-toast-type-color: var(--gog-toast-info-color)}.gog-toast__icon{color:var(--toast-icon-color);font-size:var(--gog-toast-icon-size);line-height:var(--gog-toast-icon-line-height);flex-shrink:0}.gog-toast__icon gog-icon{font-size:var(--gog-toast-icon-size)}.gog-toast__content{display:flex;align-items:flex-start;gap:var(--gog-toast-content-gap)}.gog-toast__main{display:flex;flex:1;flex-direction:column;gap:var(--gog-toast-main-gap);min-width:0}.gog-toast__message{flex:1;font-size:var(--gog-toast-message-font-size);line-height:var(--gog-toast-message-line-height)}.gog-toast__actions{display:flex;flex-wrap:wrap;gap:var(--gog-toast-actions-gap)}.gog-toast__action{--gog-btn-padding: var(--gog-toast-action-padding);--gog-btn-font-size: var(--gog-toast-action-font-size)}.gog-toast__action gog-icon{font-size:var(--gog-toast-action-font-size)}.gog-toast__close{align-self:flex-start;flex-shrink:0;--gog-btn-padding: var(--gog-toast-close-padding);--gog-btn-font-size: var(--gog-toast-close-font-size)}.gog-toast__close gog-icon{font-size:var(--gog-toast-close-font-size)}.gog-toast__progress{position:absolute;right:0;bottom:0;left:0;height:var(--gog-toast-progress-height);background:color-mix(in srgb,var(--toast-progress-color) var(--gog-toast-progress-opacity),transparent);transform-origin:left center;animation:gog-toast-progress var(--toast-duration) linear forwards}.gog-toast--paused .gog-toast__progress,.gog-toast--queued .gog-toast__progress{animation-play-state:paused}@keyframes gog-toast-progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@media(prefers-reduced-motion:reduce){.gog-toast,.gog-toast__progress{transition:none;animation:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { toast: [{ type: i0.Input, args: [{ isSignal: true, alias: "toast", required: true }] }], isFront: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFront", required: false }] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }], progressEl: [{ type: i0.ViewChild, args: ['progress', { isSignal: true }] }] } });
 
 const DEFAULT_DURATION = 4000;
@@ -4709,16 +4798,25 @@ class ToastContainerComponent {
         this.toastService.dismiss(id);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ToastContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ToastContainerComponent, isStandalone: true, selector: "gog-toast-container", inputs: { maxVisiblePerPosition: { classPropertyName: "maxVisiblePerPosition", publicName: "maxVisiblePerPosition", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@for (group of groups(); track trackGroup($index, group)) {\n  <div class=\"gog-toast-container gog-toast-container--{{ group.position }}\">\n    @for (toast of group.toasts; track trackToast($index, toast); let toastIndex = $index) {\n      <gog-toast\n        [toast]=\"toast\"\n        [isFront]=\"toastIndex === 0\"\n        [class.slide-left]=\"isLeft(group.position)\"\n        [style.--toast-stack-index]=\"toastIndex\"\n        (dismissed)=\"dismiss($event)\"\n      />\n    }\n  </div>\n}\n", styles: [":host{display:contents}.gog-toast-container{position:fixed;z-index:var(--gog-toast-z-index);display:grid;padding:var(--gog-toast-stack-padding);pointer-events:none;max-width:var(--gog-toast-max-width)}.gog-toast-container>gog-toast{grid-column:1;grid-row:1}.gog-toast-container--top-right{top:0;right:0;justify-items:end}.gog-toast-container--top-left{top:0;left:0;justify-items:start}.gog-toast-container--bottom-right{bottom:0;right:0;justify-items:end}.gog-toast-container--bottom-left{bottom:0;left:0;justify-items:start}.gog-toast-container--top-left,.gog-toast-container--top-right{align-items:start;--toast-stack-direction: 1}.gog-toast-container--bottom-left,.gog-toast-container--bottom-right{align-items:end;--toast-stack-direction: -1}.gog-toast-container:hover{--toast-stack-expanded: 1}\n"], dependencies: [{ kind: "component", type: ToastComponent, selector: "gog-toast", inputs: ["toast", "isFront"], outputs: ["dismissed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ToastContainerComponent, isStandalone: true, selector: "gog-toast-container", inputs: { maxVisiblePerPosition: { classPropertyName: "maxVisiblePerPosition", publicName: "maxVisiblePerPosition", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@for (group of groups(); track trackGroup($index, group)) {\r\n  <div class=\"gog-toast-container gog-toast-container--{{ group.position }}\">\r\n    @for (toast of group.toasts; track trackToast($index, toast); let toastIndex = $index) {\r\n      <gog-toast\r\n        [toast]=\"toast\"\r\n        [isFront]=\"toastIndex === 0\"\r\n        [class.slide-left]=\"isLeft(group.position)\"\r\n        [style.--toast-stack-index]=\"toastIndex\"\r\n        (dismissed)=\"dismiss($event)\"\r\n      />\r\n    }\r\n  </div>\r\n}\r\n", styles: [":host{display:contents}.gog-toast-container{position:fixed;z-index:var(--gog-toast-z-index);display:grid;padding:var(--gog-toast-stack-padding);pointer-events:none;max-width:var(--gog-toast-max-width)}.gog-toast-container>gog-toast{grid-column:1;grid-row:1}.gog-toast-container--top-right{top:0;right:0;justify-items:end}.gog-toast-container--top-left{top:0;left:0;justify-items:start}.gog-toast-container--bottom-right{bottom:0;right:0;justify-items:end}.gog-toast-container--bottom-left{bottom:0;left:0;justify-items:start}.gog-toast-container--top-left,.gog-toast-container--top-right{align-items:start;--toast-stack-direction: 1}.gog-toast-container--bottom-left,.gog-toast-container--bottom-right{align-items:end;--toast-stack-direction: -1}.gog-toast-container:hover{--toast-stack-expanded: 1}\n"], dependencies: [{ kind: "component", type: ToastComponent, selector: "gog-toast", inputs: ["toast", "isFront"], outputs: ["dismissed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ToastContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gog-toast-container', imports: [ToastComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (group of groups(); track trackGroup($index, group)) {\n  <div class=\"gog-toast-container gog-toast-container--{{ group.position }}\">\n    @for (toast of group.toasts; track trackToast($index, toast); let toastIndex = $index) {\n      <gog-toast\n        [toast]=\"toast\"\n        [isFront]=\"toastIndex === 0\"\n        [class.slide-left]=\"isLeft(group.position)\"\n        [style.--toast-stack-index]=\"toastIndex\"\n        (dismissed)=\"dismiss($event)\"\n      />\n    }\n  </div>\n}\n", styles: [":host{display:contents}.gog-toast-container{position:fixed;z-index:var(--gog-toast-z-index);display:grid;padding:var(--gog-toast-stack-padding);pointer-events:none;max-width:var(--gog-toast-max-width)}.gog-toast-container>gog-toast{grid-column:1;grid-row:1}.gog-toast-container--top-right{top:0;right:0;justify-items:end}.gog-toast-container--top-left{top:0;left:0;justify-items:start}.gog-toast-container--bottom-right{bottom:0;right:0;justify-items:end}.gog-toast-container--bottom-left{bottom:0;left:0;justify-items:start}.gog-toast-container--top-left,.gog-toast-container--top-right{align-items:start;--toast-stack-direction: 1}.gog-toast-container--bottom-left,.gog-toast-container--bottom-right{align-items:end;--toast-stack-direction: -1}.gog-toast-container:hover{--toast-stack-expanded: 1}\n"] }]
+            args: [{ selector: 'gog-toast-container', imports: [ToastComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (group of groups(); track trackGroup($index, group)) {\r\n  <div class=\"gog-toast-container gog-toast-container--{{ group.position }}\">\r\n    @for (toast of group.toasts; track trackToast($index, toast); let toastIndex = $index) {\r\n      <gog-toast\r\n        [toast]=\"toast\"\r\n        [isFront]=\"toastIndex === 0\"\r\n        [class.slide-left]=\"isLeft(group.position)\"\r\n        [style.--toast-stack-index]=\"toastIndex\"\r\n        (dismissed)=\"dismiss($event)\"\r\n      />\r\n    }\r\n  </div>\r\n}\r\n", styles: [":host{display:contents}.gog-toast-container{position:fixed;z-index:var(--gog-toast-z-index);display:grid;padding:var(--gog-toast-stack-padding);pointer-events:none;max-width:var(--gog-toast-max-width)}.gog-toast-container>gog-toast{grid-column:1;grid-row:1}.gog-toast-container--top-right{top:0;right:0;justify-items:end}.gog-toast-container--top-left{top:0;left:0;justify-items:start}.gog-toast-container--bottom-right{bottom:0;right:0;justify-items:end}.gog-toast-container--bottom-left{bottom:0;left:0;justify-items:start}.gog-toast-container--top-left,.gog-toast-container--top-right{align-items:start;--toast-stack-direction: 1}.gog-toast-container--bottom-left,.gog-toast-container--bottom-right{align-items:end;--toast-stack-direction: -1}.gog-toast-container:hover{--toast-stack-expanded: 1}\n"] }]
         }], propDecorators: { maxVisiblePerPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisiblePerPosition", required: false }] }] } });
 
 /** Built-in defaults, used when neither the instance input nor `GOG_CONFIG` supplies one. */
 const DEFAULT_SIZE$1 = 'md';
 const DEFAULT_ERROR_DISPLAY$2 = 'manual';
+const DEFAULT_SHOW_SPIN_BUTTONS = true;
+/** Native `stepUp()`/`stepDown()` default when `step` is left unset. */
+const DEFAULT_STEP = 1;
+/** Rounds to `step`'s own decimal precision, so e.g. repeated `0.1` steps don't drift to
+ * `0.30000000000000004`. */
+function roundToStep(value, step) {
+    const decimals = (String(step).split('.')[1] ?? '').length;
+    return decimals === 0 ? Math.round(value) : Number(value.toFixed(decimals));
+}
 /**
  * Arbitrary markup in the field's leading slot — an icon, a button, a prefix label:
  *
@@ -4773,6 +4871,20 @@ class InputfieldComponent {
     max = input(null, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
     /** Only applied when `type="number"`. */
     step = input(null, ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether a `type="number"` field shows the library's own increment/decrement buttons in
+     * place of the browser's native (and inconsistently-styled across platforms) spin glyphs.
+     * The native glyphs are always hidden on a number field regardless of this — off just means
+     * no stepper UI at all, not a fallback to the native one. Arrow-key stepping on the focused
+     * field keeps working either way; that's native `<input type="number">` behaviour, unrelated
+     * to which glyphs are visible. Unset, falls back to `GOG_CONFIG.inputfield.showSpinButtons`,
+     * then to `true`.
+     */
+    showSpinButtons = input(undefined, ...(ngDevMode ? [{ debugName: "showSpinButtons" }] : /* istanbul ignore next */ []));
+    /** aria-label for the number field's increment button. */
+    incrementLabel = input('Increment', ...(ngDevMode ? [{ debugName: "incrementLabel" }] : /* istanbul ignore next */ []));
+    /** aria-label for the number field's decrement button. */
+    decrementLabel = input('Decrement', ...(ngDevMode ? [{ debugName: "decrementLabel" }] : /* istanbul ignore next */ []));
     errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
     /**
      * See `GogErrorDisplay`. Unset, falls back to `GOG_CONFIG.control.errorDisplay`, then to
@@ -4856,9 +4968,23 @@ class InputfieldComponent {
      * Empty for `'md'`: that is this component's default size and has no modifier rule of its own — every `gog-input-wrapper--*` chain bottoms out at it.
      */
     sizeClass = computed(() => this.resolvedSize() === 'md' ? '' : `gog-input-wrapper--${this.resolvedSize()}`, ...(ngDevMode ? [{ debugName: "sizeClass" }] : /* istanbul ignore next */ []));
+    resolvedShowSpinButtons = computed(() => resolveConfigured(this.showSpinButtons(), this.globalConfig.inputfield?.showSpinButtons, DEFAULT_SHOW_SPIN_BUTTONS), ...(ngDevMode ? [{ debugName: "resolvedShowSpinButtons" }] : /* istanbul ignore next */ []));
     isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
     isPasswordField = computed(() => this.type() === 'password', ...(ngDevMode ? [{ debugName: "isPasswordField" }] : /* istanbul ignore next */ []));
     isNumberField = computed(() => this.type() === 'number', ...(ngDevMode ? [{ debugName: "isNumberField" }] : /* istanbul ignore next */ []));
+    hasSpinButtons = computed(() => this.isNumberField() && this.resolvedShowSpinButtons(), ...(ngDevMode ? [{ debugName: "hasSpinButtons" }] : /* istanbul ignore next */ []));
+    /** Current field value as a number, or `null` while empty. */
+    numericValue = computed(() => (this.value() === '' ? null : Number(this.value())), ...(ngDevMode ? [{ debugName: "numericValue" }] : /* istanbul ignore next */ []));
+    isAtMin = computed(() => {
+        const min = this.min();
+        const current = this.numericValue();
+        return min !== null && current !== null && current <= min;
+    }, ...(ngDevMode ? [{ debugName: "isAtMin" }] : /* istanbul ignore next */ []));
+    isAtMax = computed(() => {
+        const max = this.max();
+        const current = this.numericValue();
+        return max !== null && current !== null && current >= max;
+    }, ...(ngDevMode ? [{ debugName: "isAtMax" }] : /* istanbul ignore next */ []));
     effectiveType = computed(() => this.isPasswordField() && this.passwordVisible() ? 'text' : this.type(), ...(ngDevMode ? [{ debugName: "effectiveType" }] : /* istanbul ignore next */ []));
     effectiveAutocomplete = computed(() => this.autocomplete() || (this.type() === 'password' ? 'current-password' : 'off'), ...(ngDevMode ? [{ debugName: "effectiveAutocomplete" }] : /* istanbul ignore next */ []));
     hasError = this.errorState.hasError;
@@ -4940,6 +5066,22 @@ class InputfieldComponent {
         }
         this._onChange(input.value);
     }
+    /** Increments (`direction: 1`) or decrements (`direction: -1`) by `step`, clamped to min/max. */
+    stepValue(direction) {
+        if (this.isDisabled())
+            return;
+        const step = this.step() ?? DEFAULT_STEP;
+        const current = this.numericValue() ?? this.min() ?? 0;
+        let next = roundToStep(current + direction * step, step);
+        const min = this.min();
+        const max = this.max();
+        if (min !== null)
+            next = Math.max(next, min);
+        if (max !== null)
+            next = Math.min(next, max);
+        this.value.set(String(next));
+        this._onChange(next);
+    }
     /** Clears the field and notifies any attached form, then returns focus to the input. */
     clearValue(event) {
         event.preventDefault();
@@ -4956,7 +5098,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 }, 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 }, 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 }, iconStartTemplate: { classPropertyName: "iconStartTemplate", publicName: "iconStartTemplate", isSignal: true, isRequired: false, transformFunction: null }, iconEndTemplate: { classPropertyName: "iconEndTemplate", publicName: "iconEndTemplate", isSignal: true, isRequired: false, transformFunction: null }, iconStartFn: { classPropertyName: "iconStartFn", publicName: "iconStartFn", isSignal: true, isRequired: false, transformFunction: null }, iconEndFn: { classPropertyName: "iconEndFn", publicName: "iconEndFn", isSignal: true, isRequired: false, transformFunction: null }, iconStartLabel: { classPropertyName: "iconStartLabel", publicName: "iconStartLabel", isSignal: true, isRequired: false, transformFunction: null }, iconEndLabel: { classPropertyName: "iconEndLabel", publicName: "iconEndLabel", 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()\"\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]=\"inputId() || null\">{{ 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]=\"inputId() || null\">{{\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 (hasIconStart()) {\r\n      @if (hasIconStartAction()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-input__icon gog-inline-center gog-input__icon--start gog-input__icon--action\"\r\n          [attr.aria-label]=\"iconStartLabel() || null\"\r\n          (click)=\"onIconStartClick()\"\r\n        >\r\n          <gog-icon [template]=\"iconStartTemplate()\" [name]=\"iconStart() || 'check'\" />\r\n        </button>\r\n      } @else {\r\n        <span class=\"gog-input__icon gog-inline-center gog-input__icon--start\" aria-hidden=\"true\">\r\n          <gog-icon [template]=\"iconStartTemplate()\" [name]=\"iconStart() || 'check'\" />\r\n        </span>\r\n      }\r\n    }\r\n    <input\r\n      class=\"gog-input__field\"\r\n      [class.gog-input__field--error]=\"hasError()\"\r\n      [attr.id]=\"inputId() || null\"\r\n      [type]=\"effectiveType()\"\r\n      [attr.name]=\"name() || null\"\r\n      [placeholder]=\"effectivePlaceholder()\"\r\n      [value]=\"value()\"\r\n      [disabled]=\"isDisabled()\"\r\n      [autocomplete]=\"effectiveAutocomplete()\"\r\n      [attr.min]=\"min()\"\r\n      [attr.max]=\"max()\"\r\n      [attr.step]=\"step()\"\r\n      [attr.aria-invalid]=\"hasError()\"\r\n      [attr.aria-describedby]=\"hasError() && inputId() ? inputId() + '-error' : null\"\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 (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]=\"clearAriaLabel()\"\r\n        (click)=\"clearValue($event)\"\r\n      >\r\n        <gog-icon name=\"close\" />\r\n      </button>\r\n    } @else 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 (hasIconEnd()) {\r\n      @if (hasIconEndAction()) {\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)=\"onIconEndClick()\"\r\n        >\r\n          <gog-icon [template]=\"iconEndTemplate()\" [name]=\"effectiveIconEnd() || 'check'\" />\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 [template]=\"iconEndTemplate()\" [name]=\"effectiveIconEnd() || 'check'\" />\r\n        </span>\r\n      }\r\n    }\r\n  </div>\r\n  @if (visibleError()) {\r\n    <span\r\n      class=\"gog-input__error\"\r\n      [attr.id]=\"inputId() ? inputId() + '-error' : null\"\r\n      role=\"alert\"\r\n      >{{ visibleError() }}</span\r\n    >\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__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{left:var(--gog-input-size-icon-offset, var(--gog-field-md-icon-offset))}.gog-input__icon--end{right: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__label--float{position:absolute;left: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;left: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 }, 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 }, iconStartTemplate: { classPropertyName: "iconStartTemplate", publicName: "iconStartTemplate", isSignal: true, isRequired: false, transformFunction: null }, iconEndTemplate: { classPropertyName: "iconEndTemplate", publicName: "iconEndTemplate", isSignal: true, isRequired: false, transformFunction: null }, iconStartFn: { classPropertyName: "iconStartFn", publicName: "iconStartFn", isSignal: true, isRequired: false, transformFunction: null }, iconEndFn: { classPropertyName: "iconEndFn", publicName: "iconEndFn", isSignal: true, isRequired: false, transformFunction: null }, iconStartLabel: { classPropertyName: "iconStartLabel", publicName: "iconStartLabel", isSignal: true, isRequired: false, transformFunction: null }, iconEndLabel: { classPropertyName: "iconEndLabel", publicName: "iconEndLabel", 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--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]=\"inputId() || null\">{{ 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]=\"inputId() || null\">{{\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 (hasIconStart()) {\r\n      @if (hasIconStartAction()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-input__icon gog-inline-center gog-input__icon--start gog-input__icon--action\"\r\n          [attr.aria-label]=\"iconStartLabel() || null\"\r\n          (click)=\"onIconStartClick()\"\r\n        >\r\n          <gog-icon [template]=\"iconStartTemplate()\" [name]=\"iconStart() || 'check'\" />\r\n        </button>\r\n      } @else {\r\n        <span class=\"gog-input__icon gog-inline-center gog-input__icon--start\" aria-hidden=\"true\">\r\n          <gog-icon [template]=\"iconStartTemplate()\" [name]=\"iconStart() || 'check'\" />\r\n        </span>\r\n      }\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]=\"inputId() || null\"\r\n      [type]=\"effectiveType()\"\r\n      [attr.name]=\"name() || null\"\r\n      [placeholder]=\"effectivePlaceholder()\"\r\n      [value]=\"value()\"\r\n      [disabled]=\"isDisabled()\"\r\n      [autocomplete]=\"effectiveAutocomplete()\"\r\n      [attr.min]=\"min()\"\r\n      [attr.max]=\"max()\"\r\n      [attr.step]=\"step()\"\r\n      [attr.aria-invalid]=\"hasError()\"\r\n      [attr.aria-describedby]=\"hasError() && inputId() ? inputId() + '-error' : null\"\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]=\"incrementLabel()\"\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]=\"decrementLabel()\"\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    } @else 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]=\"clearAriaLabel()\"\r\n        (click)=\"clearValue($event)\"\r\n      >\r\n        <gog-icon name=\"close\" />\r\n      </button>\r\n    } @else 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 (hasIconEnd()) {\r\n      @if (hasIconEndAction()) {\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)=\"onIconEndClick()\"\r\n        >\r\n          <gog-icon [template]=\"iconEndTemplate()\" [name]=\"effectiveIconEnd() || 'check'\" />\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 [template]=\"iconEndTemplate()\" [name]=\"effectiveIconEnd() || 'check'\" />\r\n        </span>\r\n      }\r\n    }\r\n  </div>\r\n  @if (visibleError()) {\r\n    <span\r\n      class=\"gog-input__error\"\r\n      [attr.id]=\"inputId() ? inputId() + '-error' : null\"\r\n      role=\"alert\"\r\n      >{{ visibleError() }}</span\r\n    >\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__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{left:var(--gog-input-size-icon-offset, var(--gog-field-md-icon-offset))}.gog-input__icon--end{right: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;right: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:calc(var(--gog-input-size-font-size, var(--gog-field-md-font-size)) * 1.35);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;left: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;left: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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: InputfieldComponent, decorators: [{
             type: Component,
@@ -4966,12 +5108,14 @@ 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()\"\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]=\"inputId() || null\">{{ 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]=\"inputId() || null\">{{\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 (hasIconStart()) {\r\n      @if (hasIconStartAction()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-input__icon gog-inline-center gog-input__icon--start gog-input__icon--action\"\r\n          [attr.aria-label]=\"iconStartLabel() || null\"\r\n          (click)=\"onIconStartClick()\"\r\n        >\r\n          <gog-icon [template]=\"iconStartTemplate()\" [name]=\"iconStart() || 'check'\" />\r\n        </button>\r\n      } @else {\r\n        <span class=\"gog-input__icon gog-inline-center gog-input__icon--start\" aria-hidden=\"true\">\r\n          <gog-icon [template]=\"iconStartTemplate()\" [name]=\"iconStart() || 'check'\" />\r\n        </span>\r\n      }\r\n    }\r\n    <input\r\n      class=\"gog-input__field\"\r\n      [class.gog-input__field--error]=\"hasError()\"\r\n      [attr.id]=\"inputId() || null\"\r\n      [type]=\"effectiveType()\"\r\n      [attr.name]=\"name() || null\"\r\n      [placeholder]=\"effectivePlaceholder()\"\r\n      [value]=\"value()\"\r\n      [disabled]=\"isDisabled()\"\r\n      [autocomplete]=\"effectiveAutocomplete()\"\r\n      [attr.min]=\"min()\"\r\n      [attr.max]=\"max()\"\r\n      [attr.step]=\"step()\"\r\n      [attr.aria-invalid]=\"hasError()\"\r\n      [attr.aria-describedby]=\"hasError() && inputId() ? inputId() + '-error' : null\"\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 (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]=\"clearAriaLabel()\"\r\n        (click)=\"clearValue($event)\"\r\n      >\r\n        <gog-icon name=\"close\" />\r\n      </button>\r\n    } @else 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 (hasIconEnd()) {\r\n      @if (hasIconEndAction()) {\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)=\"onIconEndClick()\"\r\n        >\r\n          <gog-icon [template]=\"iconEndTemplate()\" [name]=\"effectiveIconEnd() || 'check'\" />\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 [template]=\"iconEndTemplate()\" [name]=\"effectiveIconEnd() || 'check'\" />\r\n        </span>\r\n      }\r\n    }\r\n  </div>\r\n  @if (visibleError()) {\r\n    <span\r\n      class=\"gog-input__error\"\r\n      [attr.id]=\"inputId() ? inputId() + '-error' : null\"\r\n      role=\"alert\"\r\n      >{{ visibleError() }}</span\r\n    >\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__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{left:var(--gog-input-size-icon-offset, var(--gog-field-md-icon-offset))}.gog-input__icon--end{right: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__label--float{position:absolute;left: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;left: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"] }]
-        }], 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 }] }], 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 }] }], 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 }] }], iconStartTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconStartTemplate", required: false }] }], iconEndTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconEndTemplate", required: false }] }], iconStartFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconStartFn", required: false }] }], iconEndFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconEndFn", required: false }] }], iconStartLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconStartLabel", required: false }] }], iconEndLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconEndLabel", 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 }] }] } });
+                    }, 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--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]=\"inputId() || null\">{{ 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]=\"inputId() || null\">{{\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 (hasIconStart()) {\r\n      @if (hasIconStartAction()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-input__icon gog-inline-center gog-input__icon--start gog-input__icon--action\"\r\n          [attr.aria-label]=\"iconStartLabel() || null\"\r\n          (click)=\"onIconStartClick()\"\r\n        >\r\n          <gog-icon [template]=\"iconStartTemplate()\" [name]=\"iconStart() || 'check'\" />\r\n        </button>\r\n      } @else {\r\n        <span class=\"gog-input__icon gog-inline-center gog-input__icon--start\" aria-hidden=\"true\">\r\n          <gog-icon [template]=\"iconStartTemplate()\" [name]=\"iconStart() || 'check'\" />\r\n        </span>\r\n      }\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]=\"inputId() || null\"\r\n      [type]=\"effectiveType()\"\r\n      [attr.name]=\"name() || null\"\r\n      [placeholder]=\"effectivePlaceholder()\"\r\n      [value]=\"value()\"\r\n      [disabled]=\"isDisabled()\"\r\n      [autocomplete]=\"effectiveAutocomplete()\"\r\n      [attr.min]=\"min()\"\r\n      [attr.max]=\"max()\"\r\n      [attr.step]=\"step()\"\r\n      [attr.aria-invalid]=\"hasError()\"\r\n      [attr.aria-describedby]=\"hasError() && inputId() ? inputId() + '-error' : null\"\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]=\"incrementLabel()\"\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]=\"decrementLabel()\"\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    } @else 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]=\"clearAriaLabel()\"\r\n        (click)=\"clearValue($event)\"\r\n      >\r\n        <gog-icon name=\"close\" />\r\n      </button>\r\n    } @else 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 (hasIconEnd()) {\r\n      @if (hasIconEndAction()) {\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)=\"onIconEndClick()\"\r\n        >\r\n          <gog-icon [template]=\"iconEndTemplate()\" [name]=\"effectiveIconEnd() || 'check'\" />\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 [template]=\"iconEndTemplate()\" [name]=\"effectiveIconEnd() || 'check'\" />\r\n        </span>\r\n      }\r\n    }\r\n  </div>\r\n  @if (visibleError()) {\r\n    <span\r\n      class=\"gog-input__error\"\r\n      [attr.id]=\"inputId() ? inputId() + '-error' : null\"\r\n      role=\"alert\"\r\n      >{{ visibleError() }}</span\r\n    >\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__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{left:var(--gog-input-size-icon-offset, var(--gog-field-md-icon-offset))}.gog-input__icon--end{right: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;right: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:calc(var(--gog-input-size-font-size, var(--gog-field-md-font-size)) * 1.35);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;left: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;left: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"] }]
+        }], 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 }] }], 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 }] }], iconStartTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconStartTemplate", required: false }] }], iconEndTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconEndTemplate", required: false }] }], iconStartFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconStartFn", required: false }] }], iconEndFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconEndFn", required: false }] }], iconStartLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconStartLabel", required: false }] }], iconEndLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconEndLabel", 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. */
 const DEFAULT_SIZE = 'md';
 const DEFAULT_ERROR_DISPLAY$1 = 'manual';
+/** Matches the native `<textarea>`'s own out-of-the-box behaviour. */
+const DEFAULT_RESIZE = 'vertical';
 class TextareaComponent {
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
@@ -4988,6 +5132,14 @@ class TextareaComponent {
     size = input(undefined, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     /** Native `rows` attribute, controlling the field's initial height. */
     rows = input(4, ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    /**
+     * Which direction(s) the field's own drag handle resizes it in — matches the native CSS
+     * `resize` value space (`'vertical'`, `'horizontal'`, `'both'`, `'none'`). Unset, falls back
+     * to `GOG_CONFIG.textarea.resize`, then to `'vertical'`, matching a plain `<textarea>`. The
+     * handle itself is restyled to be more visible than the browser's default glyph; `'none'`
+     * removes it entirely.
+     */
+    resize = input(undefined, ...(ngDevMode ? [{ debugName: "resize" }] : /* istanbul ignore next */ []));
     /**
      * Full width of the container by default, matching every other field-style control.
      * Set to `false` to shrink the field to fit its content instead.
@@ -5008,9 +5160,11 @@ class TextareaComponent {
     value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     ngControl = inject(NgControl, { optional: true, self: true });
     globalConfig = inject(GOG_CONFIG);
+    destroyRef = inject(DestroyRef);
     cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
     /** Instance input → `GOG_CONFIG` → the component's own default. See `resolveConfigured`. */
     resolvedSize = computed(() => resolveConfigured(this.size(), this.globalConfig.control?.size, DEFAULT_SIZE), ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
+    resolvedResize = computed(() => resolveConfigured(this.resize(), this.globalConfig.textarea?.resize, DEFAULT_RESIZE), ...(ngDevMode ? [{ debugName: "resolvedResize" }] : /* istanbul ignore next */ []));
     resolvedErrorDisplay = computed(() => resolveConfigured(this.errorDisplay(), this.globalConfig.control?.errorDisplay, DEFAULT_ERROR_DISPLAY$1), ...(ngDevMode ? [{ debugName: "resolvedErrorDisplay" }] : /* istanbul ignore next */ []));
     errorState = new GogErrorState(this.errorMessage, this.resolvedErrorDisplay, this.ngControl);
     /** Set from `(focus)`/`(blur)` on the `<textarea>` — see `onFocus`/`onBlur`. */
@@ -5025,6 +5179,15 @@ class TextareaComponent {
      * isn't scrolling, which shifts the resting layout of every textarea.
      */
     scrollbarWidth = signal(0, ...(ngDevMode ? [{ debugName: "scrollbarWidth" }] : /* istanbul ignore next */ []));
+    /**
+     * How far the field's own right/bottom edge currently sits from its container's — 0 unless
+     * the user has dragged the resize handle to make the field narrower/shorter than its
+     * container. The resize grip is anchored to the container (a `<textarea>` can't reliably
+     * host `::after`), so without this it stays put at the container's original corner instead
+     * of following the field's own as it's resized.
+     */
+    resizeInsetRight = signal(0, ...(ngDevMode ? [{ debugName: "resizeInsetRight" }] : /* istanbul ignore next */ []));
+    resizeInsetBottom = signal(0, ...(ngDevMode ? [{ debugName: "resizeInsetBottom" }] : /* istanbul ignore next */ []));
     /**
      * The single size modifier, replacing one `[class.gog-input-wrapper--<size>]` binding per size.
      * Empty for `'md'`: that is this component's default size and has no modifier rule of its own — every `gog-input-wrapper--*` chain bottoms out at it.
@@ -5054,6 +5217,25 @@ class TextareaComponent {
             this.value();
             this.scrollbarWidth.set(el.offsetWidth - el.clientWidth);
         });
+        // Tracks manual drags of the resize handle — see `resizeInsetRight`/`resizeInsetBottom`.
+        // A plain `afterRenderEffect` can't see this: dragging the handle doesn't touch any
+        // Angular-owned state, so nothing would ever re-run it; a `ResizeObserver` is the only
+        // thing that actually notices the field's own box changing size.
+        afterNextRender(() => {
+            const el = this.fieldRef().nativeElement;
+            const container = el.parentElement;
+            // Not implemented by jsdom (so: absent in unit tests) and by very old browsers, which
+            // then simply keep the field glued to the container's own corner, as before this input.
+            if (typeof ResizeObserver === 'undefined')
+                return;
+            const measure = () => {
+                this.resizeInsetRight.set(Math.max(0, container.clientWidth - el.offsetWidth));
+                this.resizeInsetBottom.set(Math.max(0, container.clientHeight - el.offsetHeight));
+            };
+            const observer = new ResizeObserver(measure);
+            observer.observe(el);
+            this.destroyRef.onDestroy(() => observer.disconnect());
+        });
         // Registering through NgControl instead of NG_VALUE_ACCESSOR keeps `this.ngControl`
         // available for `hasError` — providing NG_VALUE_ACCESSOR on the component while also
         // injecting NgControl would be a dependency cycle.
@@ -5097,7 +5279,7 @@ class TextareaComponent {
         this._onTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TextareaComponent, isStandalone: true, selector: "gog-textarea", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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 }, rows: { classPropertyName: "rows", publicName: "rows", 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 }, 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()" } }, viewQueries: [{ propertyName: "fieldRef", first: true, predicate: ["field"], 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--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]=\"inputId() || null\">{{ 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]=\"inputId() || null\">{{\r\n        label()\r\n      }}</label>\r\n    }\r\n    <textarea\r\n      #field\r\n      class=\"gog-input__field gog-textarea__field\"\r\n      [class.gog-input__field--error]=\"hasError()\"\r\n      [attr.id]=\"inputId() || null\"\r\n      [attr.name]=\"name() || null\"\r\n      [placeholder]=\"effectivePlaceholder()\"\r\n      [rows]=\"rows()\"\r\n      [value]=\"value()\"\r\n      [disabled]=\"isDisabled()\"\r\n      [attr.aria-invalid]=\"hasError()\"\r\n      [attr.aria-describedby]=\"hasError() && inputId() ? inputId() + '-error' : null\"\r\n      (input)=\"onInput($event)\"\r\n      (focus)=\"onFocus()\"\r\n      (blur)=\"onBlur()\"\r\n    ></textarea>\r\n    @if (showClear()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"gog-input__clear gog-textarea__clear gog-inline-center\"\r\n        [style.--gog-textarea-scrollbar-width.px]=\"scrollbarWidth()\"\r\n        [attr.aria-label]=\"clearAriaLabel()\"\r\n        (click)=\"clearValue($event)\"\r\n      >\r\n        <gog-icon name=\"close\" />\r\n      </button>\r\n    }\r\n  </div>\r\n  @if (visibleError()) {\r\n    <span\r\n      class=\"gog-input__error\"\r\n      [attr.id]=\"inputId() ? inputId() + '-error' : null\"\r\n      role=\"alert\"\r\n      >{{ visibleError() }}</span\r\n    >\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{width:100%;padding:var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-input-padding-x, 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-textarea__field{resize:vertical;min-height:2.5em;line-height:1.5}.gog-input__field-container{position:relative}.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-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-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-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__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;resize:none}.gog-input__field--error{border-color:var(--gog-input-error-color)}.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__label--float{position:absolute;left:var(--gog-input-padding-x, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x)));top:var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y)));max-width:calc(100% - 2 * var(--gog-input-padding-x, 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)}.gog-input-wrapper--float-in.gog-input-wrapper--floated .gog-input__label--float{top:var(--gog-input-float-label-in-top);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;left:calc(var(--gog-input-padding-x, 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}}.gog-textarea__clear{position:absolute;top:var(--gog-input-clear-inset);right:calc(var(--gog-input-clear-inset) + var(--gog-textarea-scrollbar-width, 0px));width:var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size)));padding:0;border:0;border-radius:var(--gog-input-clear-radius);background:transparent;color:var(--gog-input-placeholder-color);line-height:1;cursor:pointer;transition:color var(--gog-input-transition-duration) var(--gog-easing)}.gog-textarea__clear:hover{color:var(--gog-input-icon-hover-color)}.gog-textarea__clear: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-textarea__clear gog-icon{font-size:calc(var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size))) * var(--gog-textarea-clear-icon-ratio))}\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: TextareaComponent, isStandalone: true, selector: "gog-textarea", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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 }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", 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 }, 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()" } }, viewQueries: [{ propertyName: "fieldRef", first: true, predicate: ["field"], 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--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]=\"inputId() || null\">{{ label() }}</label>\r\n  }\r\n  <div\r\n    class=\"gog-input__field-container\"\r\n    [class.gog-input__field-container--resizable]=\"resolvedResize() !== 'none' && !isDisabled()\"\r\n    [style.--gog-textarea-resize-inset-right.px]=\"resizeInsetRight()\"\r\n    [style.--gog-textarea-resize-inset-bottom.px]=\"resizeInsetBottom()\"\r\n  >\r\n    @if (label() && isFloatLabelActive()) {\r\n      <label class=\"gog-input__label gog-input__label--float\" [attr.for]=\"inputId() || null\">{{\r\n        label()\r\n      }}</label>\r\n    }\r\n    <textarea\r\n      #field\r\n      class=\"gog-input__field gog-textarea__field\"\r\n      [class.gog-input__field--error]=\"hasError()\"\r\n      [class.gog-textarea__field--resize-vertical]=\"resolvedResize() === 'vertical'\"\r\n      [class.gog-textarea__field--resize-horizontal]=\"resolvedResize() === 'horizontal'\"\r\n      [class.gog-textarea__field--resize-both]=\"resolvedResize() === 'both'\"\r\n      [class.gog-textarea__field--resize-none]=\"resolvedResize() === 'none'\"\r\n      [attr.id]=\"inputId() || null\"\r\n      [attr.name]=\"name() || null\"\r\n      [placeholder]=\"effectivePlaceholder()\"\r\n      [rows]=\"rows()\"\r\n      [value]=\"value()\"\r\n      [disabled]=\"isDisabled()\"\r\n      [attr.aria-invalid]=\"hasError()\"\r\n      [attr.aria-describedby]=\"hasError() && inputId() ? inputId() + '-error' : null\"\r\n      (input)=\"onInput($event)\"\r\n      (focus)=\"onFocus()\"\r\n      (blur)=\"onBlur()\"\r\n    ></textarea>\r\n    @if (showClear()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"gog-input__clear gog-textarea__clear gog-inline-center\"\r\n        [style.--gog-textarea-scrollbar-width.px]=\"scrollbarWidth()\"\r\n        [attr.aria-label]=\"clearAriaLabel()\"\r\n        (click)=\"clearValue($event)\"\r\n      >\r\n        <gog-icon name=\"close\" />\r\n      </button>\r\n    }\r\n  </div>\r\n  @if (visibleError()) {\r\n    <span\r\n      class=\"gog-input__error\"\r\n      [attr.id]=\"inputId() ? inputId() + '-error' : null\"\r\n      role=\"alert\"\r\n      >{{ visibleError() }}</span\r\n    >\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{width:100%;padding:var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-input-padding-x, 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-textarea__field{display:block;min-height:2.5em;line-height:1.5}.gog-textarea__field::-webkit-resizer{background:transparent}.gog-textarea__field--resize-vertical{resize:vertical}.gog-textarea__field--resize-horizontal{resize:horizontal}.gog-textarea__field--resize-both{resize:both}.gog-textarea__field--resize-none{resize:none}.gog-input__field-container{position:relative}.gog-input__field-container--resizable:after{content:\"\";position:absolute;right:calc(3px + var(--gog-textarea-resize-inset-right, 0px));bottom:calc(3px + var(--gog-textarea-resize-inset-bottom, 0px));width:var(--gog-textarea-resize-grip-size);height:var(--gog-textarea-resize-grip-size);clip-path:polygon(100% 0,100% 100%,0 100%);background-image:repeating-linear-gradient(135deg,transparent 0 var(--gog-textarea-resize-grip-stripe-gap),var(--gog-textarea-resize-grip-color) var(--gog-textarea-resize-grip-stripe-gap) calc(var(--gog-textarea-resize-grip-stripe-gap) + var(--gog-textarea-resize-grip-stripe-width)));opacity:var(--gog-textarea-resize-grip-opacity);pointer-events:none}.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-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-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-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__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;resize:none}.gog-input__field--error{border-color:var(--gog-input-error-color)}.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__label--float{position:absolute;left:var(--gog-input-padding-x, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x)));top:var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y)));max-width:calc(100% - 2 * var(--gog-input-padding-x, 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)}.gog-input-wrapper--float-in.gog-input-wrapper--floated .gog-input__label--float{top:var(--gog-input-float-label-in-top);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;left:calc(var(--gog-input-padding-x, 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}}.gog-textarea__clear{position:absolute;top:var(--gog-input-clear-inset);right:calc(var(--gog-input-clear-inset) + var(--gog-textarea-scrollbar-width, 0px));width:var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size)));padding:0;border:0;border-radius:var(--gog-input-clear-radius);background:transparent;color:var(--gog-input-placeholder-color);line-height:1;cursor:pointer;transition:color var(--gog-input-transition-duration) var(--gog-easing)}.gog-textarea__clear:hover{color:var(--gog-input-icon-hover-color)}.gog-textarea__clear: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-textarea__clear gog-icon{font-size:calc(var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size))) * var(--gog-textarea-clear-icon-ratio))}\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: TextareaComponent, decorators: [{
             type: Component,
@@ -5107,8 +5289,8 @@ 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--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]=\"inputId() || null\">{{ 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]=\"inputId() || null\">{{\r\n        label()\r\n      }}</label>\r\n    }\r\n    <textarea\r\n      #field\r\n      class=\"gog-input__field gog-textarea__field\"\r\n      [class.gog-input__field--error]=\"hasError()\"\r\n      [attr.id]=\"inputId() || null\"\r\n      [attr.name]=\"name() || null\"\r\n      [placeholder]=\"effectivePlaceholder()\"\r\n      [rows]=\"rows()\"\r\n      [value]=\"value()\"\r\n      [disabled]=\"isDisabled()\"\r\n      [attr.aria-invalid]=\"hasError()\"\r\n      [attr.aria-describedby]=\"hasError() && inputId() ? inputId() + '-error' : null\"\r\n      (input)=\"onInput($event)\"\r\n      (focus)=\"onFocus()\"\r\n      (blur)=\"onBlur()\"\r\n    ></textarea>\r\n    @if (showClear()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"gog-input__clear gog-textarea__clear gog-inline-center\"\r\n        [style.--gog-textarea-scrollbar-width.px]=\"scrollbarWidth()\"\r\n        [attr.aria-label]=\"clearAriaLabel()\"\r\n        (click)=\"clearValue($event)\"\r\n      >\r\n        <gog-icon name=\"close\" />\r\n      </button>\r\n    }\r\n  </div>\r\n  @if (visibleError()) {\r\n    <span\r\n      class=\"gog-input__error\"\r\n      [attr.id]=\"inputId() ? inputId() + '-error' : null\"\r\n      role=\"alert\"\r\n      >{{ visibleError() }}</span\r\n    >\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{width:100%;padding:var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-input-padding-x, 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-textarea__field{resize:vertical;min-height:2.5em;line-height:1.5}.gog-input__field-container{position:relative}.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-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-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-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__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;resize:none}.gog-input__field--error{border-color:var(--gog-input-error-color)}.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__label--float{position:absolute;left:var(--gog-input-padding-x, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x)));top:var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y)));max-width:calc(100% - 2 * var(--gog-input-padding-x, 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)}.gog-input-wrapper--float-in.gog-input-wrapper--floated .gog-input__label--float{top:var(--gog-input-float-label-in-top);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;left:calc(var(--gog-input-padding-x, 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}}.gog-textarea__clear{position:absolute;top:var(--gog-input-clear-inset);right:calc(var(--gog-input-clear-inset) + var(--gog-textarea-scrollbar-width, 0px));width:var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size)));padding:0;border:0;border-radius:var(--gog-input-clear-radius);background:transparent;color:var(--gog-input-placeholder-color);line-height:1;cursor:pointer;transition:color var(--gog-input-transition-duration) var(--gog-easing)}.gog-textarea__clear:hover{color:var(--gog-input-icon-hover-color)}.gog-textarea__clear: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-textarea__clear gog-icon{font-size:calc(var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size))) * var(--gog-textarea-clear-icon-ratio))}\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 }] }], 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 }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", 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 }] }], 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"] }], fieldRef: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }] } });
+                    }, template: "<div\r\n  class=\"gog-input-wrapper gog-contained-layout\"\r\n  [class]=\"sizeClass()\"\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]=\"inputId() || null\">{{ label() }}</label>\r\n  }\r\n  <div\r\n    class=\"gog-input__field-container\"\r\n    [class.gog-input__field-container--resizable]=\"resolvedResize() !== 'none' && !isDisabled()\"\r\n    [style.--gog-textarea-resize-inset-right.px]=\"resizeInsetRight()\"\r\n    [style.--gog-textarea-resize-inset-bottom.px]=\"resizeInsetBottom()\"\r\n  >\r\n    @if (label() && isFloatLabelActive()) {\r\n      <label class=\"gog-input__label gog-input__label--float\" [attr.for]=\"inputId() || null\">{{\r\n        label()\r\n      }}</label>\r\n    }\r\n    <textarea\r\n      #field\r\n      class=\"gog-input__field gog-textarea__field\"\r\n      [class.gog-input__field--error]=\"hasError()\"\r\n      [class.gog-textarea__field--resize-vertical]=\"resolvedResize() === 'vertical'\"\r\n      [class.gog-textarea__field--resize-horizontal]=\"resolvedResize() === 'horizontal'\"\r\n      [class.gog-textarea__field--resize-both]=\"resolvedResize() === 'both'\"\r\n      [class.gog-textarea__field--resize-none]=\"resolvedResize() === 'none'\"\r\n      [attr.id]=\"inputId() || null\"\r\n      [attr.name]=\"name() || null\"\r\n      [placeholder]=\"effectivePlaceholder()\"\r\n      [rows]=\"rows()\"\r\n      [value]=\"value()\"\r\n      [disabled]=\"isDisabled()\"\r\n      [attr.aria-invalid]=\"hasError()\"\r\n      [attr.aria-describedby]=\"hasError() && inputId() ? inputId() + '-error' : null\"\r\n      (input)=\"onInput($event)\"\r\n      (focus)=\"onFocus()\"\r\n      (blur)=\"onBlur()\"\r\n    ></textarea>\r\n    @if (showClear()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"gog-input__clear gog-textarea__clear gog-inline-center\"\r\n        [style.--gog-textarea-scrollbar-width.px]=\"scrollbarWidth()\"\r\n        [attr.aria-label]=\"clearAriaLabel()\"\r\n        (click)=\"clearValue($event)\"\r\n      >\r\n        <gog-icon name=\"close\" />\r\n      </button>\r\n    }\r\n  </div>\r\n  @if (visibleError()) {\r\n    <span\r\n      class=\"gog-input__error\"\r\n      [attr.id]=\"inputId() ? inputId() + '-error' : null\"\r\n      role=\"alert\"\r\n      >{{ visibleError() }}</span\r\n    >\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{width:100%;padding:var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-input-padding-x, 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-textarea__field{display:block;min-height:2.5em;line-height:1.5}.gog-textarea__field::-webkit-resizer{background:transparent}.gog-textarea__field--resize-vertical{resize:vertical}.gog-textarea__field--resize-horizontal{resize:horizontal}.gog-textarea__field--resize-both{resize:both}.gog-textarea__field--resize-none{resize:none}.gog-input__field-container{position:relative}.gog-input__field-container--resizable:after{content:\"\";position:absolute;right:calc(3px + var(--gog-textarea-resize-inset-right, 0px));bottom:calc(3px + var(--gog-textarea-resize-inset-bottom, 0px));width:var(--gog-textarea-resize-grip-size);height:var(--gog-textarea-resize-grip-size);clip-path:polygon(100% 0,100% 100%,0 100%);background-image:repeating-linear-gradient(135deg,transparent 0 var(--gog-textarea-resize-grip-stripe-gap),var(--gog-textarea-resize-grip-color) var(--gog-textarea-resize-grip-stripe-gap) calc(var(--gog-textarea-resize-grip-stripe-gap) + var(--gog-textarea-resize-grip-stripe-width)));opacity:var(--gog-textarea-resize-grip-opacity);pointer-events:none}.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-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-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-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__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;resize:none}.gog-input__field--error{border-color:var(--gog-input-error-color)}.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__label--float{position:absolute;left:var(--gog-input-padding-x, var(--gog-input-size-padding-x, var(--gog-field-md-padding-x)));top:var(--gog-input-padding-y, var(--gog-input-size-padding-y, var(--gog-field-md-padding-y)));max-width:calc(100% - 2 * var(--gog-input-padding-x, 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)}.gog-input-wrapper--float-in.gog-input-wrapper--floated .gog-input__label--float{top:var(--gog-input-float-label-in-top);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;left:calc(var(--gog-input-padding-x, 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}}.gog-textarea__clear{position:absolute;top:var(--gog-input-clear-inset);right:calc(var(--gog-input-clear-inset) + var(--gog-textarea-scrollbar-width, 0px));width:var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size)));padding:0;border:0;border-radius:var(--gog-input-clear-radius);background:transparent;color:var(--gog-input-placeholder-color);line-height:1;cursor:pointer;transition:color var(--gog-input-transition-duration) var(--gog-easing)}.gog-textarea__clear:hover{color:var(--gog-input-icon-hover-color)}.gog-textarea__clear: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-textarea__clear gog-icon{font-size:calc(var(--gog-input-font, var(--gog-input-size-font-size, var(--gog-field-md-font-size))) * var(--gog-textarea-clear-icon-ratio))}\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 }] }], 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 }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], resize: [{ type: i0.Input, args: [{ isSignal: true, alias: "resize", 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 }] }], 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"] }], fieldRef: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }] } });
 
 class ChipComponent {
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
@@ -5258,7 +5440,7 @@ 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\r\n          [template]=\"chevronSlot()?.templateRef ?? chevronTemplate()\"\r\n          name=\"chevron-down\"\r\n        />\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]=\"clearAriaLabel()\"\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:left}.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));left:0;right: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;left:unset;right: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:left;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;left: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;left: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%;right: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-right: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"], 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\r\n          [template]=\"chevronSlot()?.templateRef ?? chevronTemplate()\"\r\n          name=\"chevron-down\"\r\n        />\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]=\"clearAriaLabel()\"\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:left}.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));left:0;right: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;left:unset;right: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:left;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;left: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;left: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%;right: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-right: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,
@@ -5313,7 +5495,7 @@ class GogTooltipBubbleComponent {
         return typeof value === 'string' ? value : '';
     }, ...(ngDevMode ? [{ debugName: "textContent" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GogTooltipBubbleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GogTooltipBubbleComponent, isStandalone: true, selector: "gog-tooltip-bubble", inputs: { bubbleId: { classPropertyName: "bubbleId", publicName: "bubbleId", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, top: { classPropertyName: "top", publicName: "top", isSignal: true, isRequired: false, transformFunction: null }, left: { classPropertyName: "left", publicName: "left", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, extraClass: { classPropertyName: "extraClass", publicName: "extraClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tooltip" }, properties: { "attr.id": "bubbleId()", "class.gog-tooltip--top": "side() === 'top'", "class.gog-tooltip--bottom": "side() === 'bottom'", "class.gog-tooltip--left": "side() === 'left'", "class.gog-tooltip--right": "side() === 'right'", "class.gog-tooltip--visible": "visible()", "class": "extraClass()", "style.top.px": "top()", "style.left.px": "left()", "style.z-index": "zIndex()" }, classAttribute: "gog-tooltip" }, ngImport: i0, template: "<gog-scroll\r\n  class=\"gog-tooltip__scroll\"\r\n  size=\"thin\"\r\n  [focusable]=\"false\"\r\n  overscrollBehavior=\"contain\"\r\n>\r\n  @if (templateContent(); as template) {\r\n    <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\r\n  } @else {\r\n    {{ textContent() }}\r\n  }\r\n</gog-scroll>\r\n<span class=\"gog-tooltip__arrow\" aria-hidden=\"true\"></span>\r\n", styles: ["@charset \"UTF-8\";:host{position:fixed;top:0;left:0;z-index:var(--gog-tooltip-z);max-width:var(--gog-tooltip-max-width);padding:var(--gog-tooltip-padding);border-radius:var(--gog-tooltip-radius);border:var(--gog-tooltip-border-width) var(--gog-tooltip-border-style) var(--gog-tooltip-border-color);background:var(--gog-tooltip-bg);color:var(--gog-tooltip-color);font-family:var(--gog-tooltip-font-family);font-size:var(--gog-tooltip-font-size);line-height:var(--gog-tooltip-line-height);box-shadow:var(--gog-tooltip-shadow);word-wrap:break-word;opacity:0;transform:scale(.96);transition:opacity var(--gog-tooltip-transition-duration) var(--gog-easing),transform var(--gog-tooltip-transition-duration) var(--gog-easing)}:host(.gog-tooltip--visible){opacity:1;transform:scale(1)}.gog-tooltip__scroll{max-height:var(--gog-tooltip-max-height)}.gog-tooltip__arrow{position:absolute;width:0;height:0;border:var(--gog-tooltip-arrow-size) solid transparent}:host(.gog-tooltip--top) .gog-tooltip__arrow{top:100%;left:50%;transform:translate(-50%);border-top-color:var(--gog-tooltip-bg);border-bottom-width:0}:host(.gog-tooltip--bottom) .gog-tooltip__arrow{bottom:100%;left:50%;transform:translate(-50%);border-bottom-color:var(--gog-tooltip-bg);border-top-width:0}:host(.gog-tooltip--left) .gog-tooltip__arrow{left:100%;top:50%;transform:translateY(-50%);border-left-color:var(--gog-tooltip-bg);border-right-width:0}:host(.gog-tooltip--right) .gog-tooltip__arrow{right:100%;top:50%;transform:translateY(-50%);border-right-color:var(--gog-tooltip-bg);border-left-width:0}@media(prefers-reduced-motion:reduce){:host{transition:none}}\n"], dependencies: [{ 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"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: GogTooltipBubbleComponent, isStandalone: true, selector: "gog-tooltip-bubble", inputs: { bubbleId: { classPropertyName: "bubbleId", publicName: "bubbleId", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, top: { classPropertyName: "top", publicName: "top", isSignal: true, isRequired: false, transformFunction: null }, left: { classPropertyName: "left", publicName: "left", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, extraClass: { classPropertyName: "extraClass", publicName: "extraClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tooltip" }, properties: { "attr.id": "bubbleId()", "class.gog-tooltip--top": "side() === 'top'", "class.gog-tooltip--bottom": "side() === 'bottom'", "class.gog-tooltip--left": "side() === 'left'", "class.gog-tooltip--right": "side() === 'right'", "class.gog-tooltip--visible": "visible()", "class": "extraClass()", "style.top.px": "top()", "style.left.px": "left()", "style.z-index": "zIndex()" }, classAttribute: "gog-tooltip" }, ngImport: i0, template: "<gog-scroll\r\n  class=\"gog-tooltip__scroll\"\r\n  size=\"thin\"\r\n  [focusable]=\"false\"\r\n  overscrollBehavior=\"contain\"\r\n>\r\n  @if (templateContent(); as template) {\r\n    <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\r\n  } @else {\r\n    {{ textContent() }}\r\n  }\r\n</gog-scroll>\r\n<span class=\"gog-tooltip__arrow\" aria-hidden=\"true\"></span>\r\n", styles: ["@charset \"UTF-8\";:host{position:fixed;top:0;left:0;z-index:var(--gog-tooltip-z);max-width:var(--gog-tooltip-max-width);padding:var(--gog-tooltip-padding);border-radius:var(--gog-tooltip-radius);border:var(--gog-tooltip-border-width) var(--gog-tooltip-border-style) var(--gog-tooltip-border-color);background:var(--gog-tooltip-bg);color:var(--gog-tooltip-color);font-family:var(--gog-tooltip-font-family);font-size:var(--gog-tooltip-font-size);line-height:var(--gog-tooltip-line-height);box-shadow:var(--gog-tooltip-shadow);word-wrap:break-word;opacity:0;transform:scale(.96);transition:opacity var(--gog-tooltip-transition-duration) var(--gog-easing),transform var(--gog-tooltip-transition-duration) var(--gog-easing)}:host(.gog-tooltip--visible){opacity:1;transform:scale(1)}.gog-tooltip__scroll{max-height:var(--gog-tooltip-max-height)}.gog-tooltip__arrow{position:absolute;width:0;height:0;border:var(--gog-tooltip-arrow-size) solid transparent}:host(.gog-tooltip--top) .gog-tooltip__arrow{top:100%;left:50%;transform:translate(-50%);border-top-color:var(--gog-tooltip-bg);border-bottom-width:0}:host(.gog-tooltip--bottom) .gog-tooltip__arrow{bottom:100%;left:50%;transform:translate(-50%);border-bottom-color:var(--gog-tooltip-bg);border-top-width:0}:host(.gog-tooltip--left) .gog-tooltip__arrow{left:100%;top:50%;transform:translateY(-50%);border-left-color:var(--gog-tooltip-bg);border-right-width:0}:host(.gog-tooltip--right) .gog-tooltip__arrow{right:100%;top:50%;transform:translateY(-50%);border-right-color:var(--gog-tooltip-bg);border-left-width:0}@media(prefers-reduced-motion:reduce){:host{transition:none}}\n"], dependencies: [{ 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: GogTooltipBubbleComponent, decorators: [{
             type: Component,
@@ -5841,7 +6023,7 @@ class MultiselectComponent extends GogDropdownBase {
         return this.showControls() ? CONTROLS_ROW_HEIGHT : 0;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MultiselectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: MultiselectComponent, isStandalone: true, selector: "gog-multiselect", inputs: { showControls: { classPropertyName: "showControls", publicName: "showControls", isSignal: true, isRequired: false, transformFunction: null }, controlsPosition: { classPropertyName: "controlsPosition", publicName: "controlsPosition", isSignal: true, isRequired: false, transformFunction: null }, clearIconTemplate: { classPropertyName: "clearIconTemplate", publicName: "clearIconTemplate", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "style.--gog-multiselect-min-width": "minWidth()" } }, queries: [{ propertyName: "clearIconSlot", first: true, predicate: GogMultiselectClearIconDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panelTpl"], descendants: true, isSignal: true }, { propertyName: "valueRef", first: true, predicate: ["valueEl"], 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-ms-wrapper\"\r\n  [class]=\"sizeClass()\"\r\n  [class.gog-ms-wrapper--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n  [class.gog-ms-wrapper--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n  [class.gog-ms-wrapper--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n  [class.gog-ms-wrapper--floated]=\"isFloatLabelFloated()\"\r\n>\r\n  <!--\r\n    Associated with aria-labelledby rather than `for`: the trigger is a div with\r\n    role=\"combobox\", not a labelable element. Without this the trigger had no accessible\r\n    name at all whenever `label` was set, because that also suppresses the aria-label.\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-ms__label\" [id]=\"labelId()\">{{ label() }}</label>\r\n  }\r\n\r\n  <div\r\n    [gogTooltip]=\"summary().hidden > 0 ? selectedListTpl : null\"\r\n    class=\"gog-ms\"\r\n    role=\"combobox\"\r\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\r\n    [attr.aria-expanded]=\"isOpen()\"\r\n    aria-haspopup=\"listbox\"\r\n    [attr.aria-controls]=\"listboxId()\"\r\n    [attr.aria-disabled]=\"isDisabled()\"\r\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n    [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\r\n    [class.gog-ms--open]=\"isOpen()\"\r\n    [class.gog-ms--disabled]=\"isDisabled()\"\r\n    [class.gog-ms--error]=\"hasError()\"\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    @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-ms__label gog-ms__label--float\" [id]=\"labelId()\">{{ label() }}</label>\r\n    }\r\n    <span #valueEl class=\"gog-ms__value\" [class.gog-ms__value--placeholder]=\"!selectedNames()\">\r\n      {{ summary().text || effectivePlaceholder() }}\r\n    </span>\r\n    <!--\r\n      Only what fits is shown; the rest is collapsed into a count. The tooltip is the way to read\r\n      the whole selection back, so it is bound only while something is actually hidden.\r\n    -->\r\n    @if (summary().hidden > 0) {\r\n      <span class=\"gog-ms__overflow\" aria-hidden=\"true\">+{{ summary().hidden }}</span>\r\n    }\r\n\r\n    <span class=\"gog-ms__actions\">\r\n      <span class=\"gog-ms__arrow\" [class.gog-ms__arrow--up]=\"isOpen()\" aria-hidden=\"true\">\r\n        <gog-icon\r\n          [template]=\"chevronSlot()?.templateRef ?? chevronTemplate()\"\r\n          [name]=\"isOpen() ? 'chevron-up' : 'chevron-down'\"\r\n        />\r\n      </span>\r\n      @if (showClear()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-ms__clear gog-inline-center\"\r\n          (click)=\"clearValue($event)\"\r\n          [attr.aria-label]=\"clearAriaLabel()\"\r\n        >\r\n          <gog-icon [template]=\"clearIconSlot()?.templateRef ?? clearIconTemplate()\" name=\"close\" />\r\n        </button>\r\n      }\r\n    </span>\r\n  </div>\r\n\r\n  @if (isOpen() && !resolvedAppendToBody()) {\r\n    <ng-container [ngTemplateOutlet]=\"panelTpl\" />\r\n  }\r\n\r\n  @if (visibleError()) {\r\n    <span class=\"gog-ms__error\" role=\"alert\">{{ visibleError() }}</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-ms-wrapper--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-ms__dropdown\"\r\n    [class.gog-ms__dropdown--up]=\"!resolvedAppendToBody() && dropdownDirectionState() === 'up'\"\r\n    [class.gog-ms__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    aria-multiselectable=\"true\"\r\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    @if (showControls() && controlsPosition() === 'top') {\r\n      <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\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-ms__filter gog-ms__filter--top\">\r\n        <input\r\n          type=\"text\"\r\n          class=\"gog-ms__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 size=\"thin\" [focusable]=\"false\" overscrollBehavior=\"contain\" class=\"gog-ms__scroll\">\r\n      <div class=\"gog-ms__options\">\r\n        @if (visibleOptions().length === 0) {\r\n          <p class=\"gog-ms__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\r\n            expects: focus moves between options with the arrow keys, not by tabbing\r\n            through every one. Programmatic .focus() still works on a negative tabindex.\r\n          -->\r\n          <button\r\n            type=\"button\"\r\n            class=\"gog-ms__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-ms__option--selected]=\"isSelected(option)\"\r\n            [class.gog-ms__option--disabled]=\"isOptionDisabled(option)\"\r\n            (click)=\"toggleOption(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-ms__option-mark\" aria-hidden=\"true\">\r\n                <gog-icon [name]=\"isSelected(option) ? 'checkbox-checked' : 'checkbox'\" />\r\n              </span>\r\n              {{ labelOf(option) }}\r\n            }\r\n          </button>\r\n        }\r\n      </div>\r\n    </gog-scroll>\r\n    @if (resolvedFilter() && resolvedFilterPosition() === 'bottom') {\r\n      <div class=\"gog-ms__filter gog-ms__filter--bottom\">\r\n        <input\r\n          type=\"text\"\r\n          class=\"gog-ms__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    @if (showControls() && controlsPosition() === 'bottom') {\r\n      <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #controlsRowTpl>\r\n  <div class=\"gog-ms__controls\" [class.gog-ms__controls--bottom]=\"controlsPosition() === 'bottom'\">\r\n    <gog-button variant=\"ghost\" size=\"sm\" (click)=\"selectAll($event)\">Select all</gog-button>\r\n    <gog-button variant=\"ghost\" size=\"sm\" (click)=\"clearAll($event)\">Clear</gog-button>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Full selection, shown as a tooltip when the trigger can only fit part of it. -->\r\n<ng-template #selectedListTpl>\r\n  <ul class=\"gog-ms__tooltip-list\">\r\n    @for (label of selectedLabels(); track label) {\r\n      <li>{{ label }}</li>\r\n    }\r\n  </ul>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";.gog-ms-wrapper{display:flex;flex-direction:column;gap:var(--gog-multiselect-gap);position:relative;width:100%}:host(.gog-host--auto-width){width:fit-content}:host(.gog-host--auto-width) .gog-ms-wrapper{width:fit-content}.gog-ms-wrapper--xsm,.gog-ms__dropdown--xsm{--gog-multiselect-size-padding-y: var(--gog-field-xsm-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-xsm-padding-x);--gog-multiselect-size-font-size: var(--gog-field-xsm-font-size)}.gog-ms-wrapper--sm,.gog-ms__dropdown--sm{--gog-multiselect-size-padding-y: var(--gog-field-sm-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-sm-padding-x);--gog-multiselect-size-font-size: var(--gog-field-sm-font-size)}.gog-ms-wrapper--lg,.gog-ms__dropdown--lg{--gog-multiselect-size-padding-y: var(--gog-field-lg-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-lg-padding-x);--gog-multiselect-size-font-size: var(--gog-field-lg-font-size)}.gog-ms-wrapper--slg,.gog-ms__dropdown--slg{--gog-multiselect-size-padding-y: var(--gog-field-slg-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-slg-padding-x);--gog-multiselect-size-font-size: var(--gog-field-slg-font-size)}.gog-ms__label{font-family:var(--gog-multiselect-label-font-family);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing);cursor:pointer}.gog-ms{position:relative;display:flex;align-items:center;justify-content:space-between;padding:var(--gog-multiselect-padding-y, var(--gog-multiselect-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x)));background-color:var(--gog-multiselect-field-bg);border:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-field-border);border-radius:var(--gog-multiselect-radius);color:var(--gog-multiselect-field-color);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color var(--gog-multiselect-transition-duration) var(--gog-easing),box-shadow var(--gog-multiselect-transition-duration) var(--gog-easing)}.gog-ms:hover:not(.gog-ms--disabled){border-color:var(--gog-multiselect-focus-border)}.gog-ms:focus-visible{outline:var(--gog-multiselect-focus-ring-width) solid var(--gog-multiselect-focus-ring);outline-offset:var(--gog-multiselect-focus-ring-offset)}.gog-ms--open{border-color:var(--gog-multiselect-border-color);box-shadow:var(--gog-multiselect-focus-glow)}.gog-ms--disabled{opacity:var(--gog-multiselect-disabled-opacity);cursor:not-allowed}.gog-ms--disabled .gog-ms__label{cursor:not-allowed}.gog-ms--error{border-color:var(--gog-multiselect-error-color)}.gog-ms__value{font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gog-multiselect-value-color)}.gog-ms__value--placeholder{color:var(--gog-multiselect-placeholder-color)}.gog-ms{padding-right:var(--gog-multiselect-actions-inset)}.gog-ms__actions{display:flex;align-items:center;gap:var(--gog-multiselect-actions-gap);flex-shrink:0}.gog-ms__clear{width:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));padding:0;border:0;border-radius:var(--gog-multiselect-clear-radius);background:transparent;color:var(--gog-multiselect-placeholder-color);line-height:1;cursor:pointer;transition:color var(--gog-multiselect-transition-duration) var(--gog-easing)}.gog-ms__clear gog-icon{font-size:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-clear-icon-ratio))}.gog-ms__clear:hover{color:var(--gog-multiselect-field-color)}.gog-ms__clear:focus-visible{outline:var(--gog-multiselect-focus-ring-width) solid var(--gog-multiselect-focus-ring);outline-offset:var(--gog-multiselect-focus-ring-offset)}.gog-ms__arrow{color:var(--gog-multiselect-border-color);transition:transform var(--gog-multiselect-arrow-transition-duration) var(--gog-easing);display:inline-flex;align-items:center;justify-content:center;width:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)))}.gog-ms__arrow gog-icon{font-size:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-arrow-icon-ratio))}.gog-ms__arrow--up{transform:rotate(180deg)}.gog-ms__dropdown{position:absolute;top:calc(100% + var(--gog-multiselect-panel-offset));left:0;right:auto;min-width:100%;width:max-content;max-width:var(--gog-multiselect-panel-max-width);z-index:var(--gog-dropdown-z);display:flex;flex-direction:column;background-color:var(--gog-multiselect-panel-bg);border:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-panel-border);border-radius:var(--gog-multiselect-radius);max-height:var(--gog-multiselect-panel-max-height);overflow:hidden;box-shadow:var(--gog-multiselect-panel-shadow)}.gog-ms__scroll{flex:1;min-height:0}.gog-ms__dropdown--up{top:auto;bottom:calc(100% + var(--gog-multiselect-panel-offset))}.gog-ms__dropdown--portal{position:fixed;top:unset;bottom:unset;left:unset;right:unset}.gog-ms__controls{flex-shrink:0;display:flex;gap:var(--gog-multiselect-controls-gap);padding:var(--gog-multiselect-controls-padding);background-color:var(--gog-multiselect-panel-bg);border-bottom:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-field-border)}.gog-ms__controls--bottom{border-bottom:0;border-top:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-field-border)}.gog-ms__options{display:flex;flex-direction:column;padding:var(--gog-multiselect-options-padding);gap:var(--gog-multiselect-option-gap)}.gog-ms__option{width:100%;display:flex;align-items:center;gap:var(--gog-multiselect-option-gap-inline);padding:var(--gog-multiselect-padding-y, var(--gog-multiselect-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:left;font:inherit;font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));cursor:pointer;border-radius:var(--gog-multiselect-option-radius);transition:background-color var(--gog-multiselect-option-transition-duration) var(--gog-easing);color:var(--gog-multiselect-option-color)}.gog-ms__option--disabled{opacity:var(--gog-multiselect-option-disabled-opacity);cursor:not-allowed}.gog-ms__option:hover{background-color:var(--gog-multiselect-option-hover-bg)}.gog-ms__option--selected{color:var(--gog-multiselect-border-color)}.gog-ms__option:focus-visible{outline:var(--gog-multiselect-focus-ring-width) solid var(--gog-multiselect-focus-ring);outline-offset:calc(var(--gog-multiselect-focus-ring-width) * -1)}.gog-ms__option-mark{display:flex;align-items:center;justify-content:center;width:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-mark-size-ratio));height:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-mark-size-ratio));flex-shrink:0;font-size:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-mark-icon-ratio));color:var(--gog-multiselect-checkbox-border)}.gog-ms__option--selected .gog-ms__option-mark{color:var(--gog-multiselect-checkbox-checked-bg)}.gog-ms__error{font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-error-font-size);color:var(--gog-multiselect-error-color);margin-top:var(--gog-multiselect-error-offset)}.gog-ms__label--float{position:absolute;left:var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - 2 * var(--gog-multiselect-padding-x, var(--gog-multiselect-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-multiselect-placeholder-color);font-size:var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-multiselect-transition-duration) var(--gog-easing),font-size var(--gog-multiselect-transition-duration) var(--gog-easing),color var(--gog-multiselect-transition-duration) var(--gog-easing),top var(--gog-multiselect-transition-duration) var(--gog-easing),background-color var(--gog-multiselect-transition-duration) var(--gog-easing)}.gog-ms-wrapper--float-in,.gog-ms-wrapper--float-on{--gog-multiselect-float-top-padding: calc(var(--gog-multiselect-padding-y, var(--gog-multiselect-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-multiselect-float-label-reserve))}.gog-ms-wrapper--float-in .gog-ms,.gog-ms-wrapper--float-on .gog-ms{padding-top:var(--gog-multiselect-float-top-padding)}.gog-ms-wrapper--float-in .gog-ms__label--float,.gog-ms-wrapper--float-on .gog-ms__label--float{top:var(--gog-multiselect-float-top-padding);transform:none}.gog-ms-wrapper--float-in.gog-ms-wrapper--floated .gog-ms__label--float{top:var(--gog-multiselect-float-label-in-top);transform:translateY(0);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing)}.gog-ms-wrapper--float-on.gog-ms-wrapper--floated .gog-ms__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing);background-color:var(--gog-multiselect-float-label-on-bg, var(--gog-multiselect-field-bg));padding:0 4px;left:calc(var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-ms-wrapper--float-over.gog-ms-wrapper--floated .gog-ms__label--float{top:calc(-1 * var(--gog-multiselect-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing)}.gog-ms-wrapper--float-over .gog-ms{margin-top:var(--gog-multiselect-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-ms,.gog-ms__clear,.gog-ms__arrow,.gog-ms__option,.gog-ms__option-mark,.gog-ms__label--float{transition:none}}.gog-ms__filter{position:sticky;top:0;z-index:1;padding:var(--gog-multiselect-filter-padding);background:var(--gog-multiselect-panel-bg)}.gog-ms__filter-input{width:100%;padding:var(--gog-multiselect-filter-input-padding-y) var(--gog-multiselect-filter-input-padding-x);font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-multiselect-filter-input-color);background:var(--gog-multiselect-filter-input-bg);border:var(--gog-control-border-width) var(--gog-control-border-style) var(--gog-multiselect-filter-input-border);border-radius:var(--gog-multiselect-filter-input-radius);outline:none}.gog-ms__filter-input:focus{border-color:var(--gog-multiselect-focus-border)}.gog-ms__empty{margin:0;padding:var(--gog-multiselect-filter-empty-padding);font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-multiselect-filter-empty-color);text-align:center}.gog-ms__filter--top{border-bottom:var(--gog-multiselect-filter-border-width) var(--gog-multiselect-filter-border-style) var(--gog-multiselect-filter-border-color)}.gog-ms__filter--bottom{top:auto;bottom:0;border-top:var(--gog-multiselect-filter-border-width) var(--gog-multiselect-filter-border-style) var(--gog-multiselect-filter-border-color)}:host(.gog-host--auto-width),:host(.gog-host--auto-width) .gog-ms{min-width:var(--gog-multiselect-min-width)}.gog-ms__dropdown--portal{max-width:var(--gog-multiselect-panel-max-width)}.gog-ms__overflow{flex-shrink:0;margin-left:var(--gog-multiselect-overflow-gap);font-size:var(--gog-multiselect-overflow-font-size);color:var(--gog-multiselect-overflow-color)}.gog-ms__tooltip-list{margin:0;padding-left:1.1em;text-align:left}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "loading", "debounce", "ariaLabel"], outputs: ["gogClick"] }, { 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"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }, { kind: "directive", type: GogTooltipDirective, selector: "[gogTooltip]", inputs: ["gogTooltip", "gogTooltipPosition", "gogTooltipShowDelay", "gogTooltipHideDelay", "gogTooltipDisabled", "gogTooltipClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: MultiselectComponent, isStandalone: true, selector: "gog-multiselect", inputs: { showControls: { classPropertyName: "showControls", publicName: "showControls", isSignal: true, isRequired: false, transformFunction: null }, controlsPosition: { classPropertyName: "controlsPosition", publicName: "controlsPosition", isSignal: true, isRequired: false, transformFunction: null }, clearIconTemplate: { classPropertyName: "clearIconTemplate", publicName: "clearIconTemplate", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "style.--gog-multiselect-min-width": "minWidth()" } }, queries: [{ propertyName: "clearIconSlot", first: true, predicate: GogMultiselectClearIconDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panelTpl"], descendants: true, isSignal: true }, { propertyName: "valueRef", first: true, predicate: ["valueEl"], 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-ms-wrapper\"\r\n  [class]=\"sizeClass()\"\r\n  [class.gog-ms-wrapper--float-in]=\"resolvedFloatLabel() === 'in'\"\r\n  [class.gog-ms-wrapper--float-on]=\"resolvedFloatLabel() === 'on'\"\r\n  [class.gog-ms-wrapper--float-over]=\"resolvedFloatLabel() === 'over'\"\r\n  [class.gog-ms-wrapper--floated]=\"isFloatLabelFloated()\"\r\n>\r\n  <!--\r\n    Associated with aria-labelledby rather than `for`: the trigger is a div with\r\n    role=\"combobox\", not a labelable element. Without this the trigger had no accessible\r\n    name at all whenever `label` was set, because that also suppresses the aria-label.\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-ms__label\" [id]=\"labelId()\">{{ label() }}</label>\r\n  }\r\n\r\n  <div\r\n    [gogTooltip]=\"summary().hidden > 0 ? selectedListTpl : null\"\r\n    class=\"gog-ms\"\r\n    role=\"combobox\"\r\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\r\n    [attr.aria-expanded]=\"isOpen()\"\r\n    aria-haspopup=\"listbox\"\r\n    [attr.aria-controls]=\"listboxId()\"\r\n    [attr.aria-disabled]=\"isDisabled()\"\r\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n    [attr.aria-label]=\"label() ? null : ariaLabel() || placeholder() || 'Select'\"\r\n    [class.gog-ms--open]=\"isOpen()\"\r\n    [class.gog-ms--disabled]=\"isDisabled()\"\r\n    [class.gog-ms--error]=\"hasError()\"\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    @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-ms__label gog-ms__label--float\" [id]=\"labelId()\">{{ label() }}</label>\r\n    }\r\n    <span #valueEl class=\"gog-ms__value\" [class.gog-ms__value--placeholder]=\"!selectedNames()\">\r\n      {{ summary().text || effectivePlaceholder() }}\r\n    </span>\r\n    <!--\r\n      Only what fits is shown; the rest is collapsed into a count. The tooltip is the way to read\r\n      the whole selection back, so it is bound only while something is actually hidden.\r\n    -->\r\n    @if (summary().hidden > 0) {\r\n      <span class=\"gog-ms__overflow\" aria-hidden=\"true\">+{{ summary().hidden }}</span>\r\n    }\r\n\r\n    <span class=\"gog-ms__actions\">\r\n      <span class=\"gog-ms__arrow\" [class.gog-ms__arrow--up]=\"isOpen()\" aria-hidden=\"true\">\r\n        <gog-icon\r\n          [template]=\"chevronSlot()?.templateRef ?? chevronTemplate()\"\r\n          [name]=\"isOpen() ? 'chevron-up' : 'chevron-down'\"\r\n        />\r\n      </span>\r\n      @if (showClear()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"gog-ms__clear gog-inline-center\"\r\n          (click)=\"clearValue($event)\"\r\n          [attr.aria-label]=\"clearAriaLabel()\"\r\n        >\r\n          <gog-icon [template]=\"clearIconSlot()?.templateRef ?? clearIconTemplate()\" name=\"close\" />\r\n        </button>\r\n      }\r\n    </span>\r\n  </div>\r\n\r\n  @if (isOpen() && !resolvedAppendToBody()) {\r\n    <ng-container [ngTemplateOutlet]=\"panelTpl\" />\r\n  }\r\n\r\n  @if (visibleError()) {\r\n    <span class=\"gog-ms__error\" role=\"alert\">{{ visibleError() }}</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-ms-wrapper--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-ms__dropdown\"\r\n    [class.gog-ms__dropdown--up]=\"!resolvedAppendToBody() && dropdownDirectionState() === 'up'\"\r\n    [class.gog-ms__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    aria-multiselectable=\"true\"\r\n    [attr.aria-labelledby]=\"label() ? labelId() : null\"\r\n    (click)=\"$event.stopPropagation()\"\r\n  >\r\n    @if (showControls() && controlsPosition() === 'top') {\r\n      <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\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-ms__filter gog-ms__filter--top\">\r\n        <input\r\n          type=\"text\"\r\n          class=\"gog-ms__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 size=\"thin\" [focusable]=\"false\" overscrollBehavior=\"contain\" class=\"gog-ms__scroll\">\r\n      <div class=\"gog-ms__options\">\r\n        @if (visibleOptions().length === 0) {\r\n          <p class=\"gog-ms__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\r\n            expects: focus moves between options with the arrow keys, not by tabbing\r\n            through every one. Programmatic .focus() still works on a negative tabindex.\r\n          -->\r\n          <button\r\n            type=\"button\"\r\n            class=\"gog-ms__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-ms__option--selected]=\"isSelected(option)\"\r\n            [class.gog-ms__option--disabled]=\"isOptionDisabled(option)\"\r\n            (click)=\"toggleOption(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-ms__option-mark\" aria-hidden=\"true\">\r\n                <gog-icon [name]=\"isSelected(option) ? 'checkbox-checked' : 'checkbox'\" />\r\n              </span>\r\n              {{ labelOf(option) }}\r\n            }\r\n          </button>\r\n        }\r\n      </div>\r\n    </gog-scroll>\r\n    @if (resolvedFilter() && resolvedFilterPosition() === 'bottom') {\r\n      <div class=\"gog-ms__filter gog-ms__filter--bottom\">\r\n        <input\r\n          type=\"text\"\r\n          class=\"gog-ms__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    @if (showControls() && controlsPosition() === 'bottom') {\r\n      <ng-container [ngTemplateOutlet]=\"controlsRowTpl\" />\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #controlsRowTpl>\r\n  <div class=\"gog-ms__controls\" [class.gog-ms__controls--bottom]=\"controlsPosition() === 'bottom'\">\r\n    <gog-button variant=\"ghost\" size=\"sm\" (click)=\"selectAll($event)\">Select all</gog-button>\r\n    <gog-button variant=\"ghost\" size=\"sm\" (click)=\"clearAll($event)\">Clear</gog-button>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Full selection, shown as a tooltip when the trigger can only fit part of it. -->\r\n<ng-template #selectedListTpl>\r\n  <ul class=\"gog-ms__tooltip-list\">\r\n    @for (label of selectedLabels(); track label) {\r\n      <li>{{ label }}</li>\r\n    }\r\n  </ul>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";.gog-ms-wrapper{display:flex;flex-direction:column;gap:var(--gog-multiselect-gap);position:relative;width:100%}:host(.gog-host--auto-width){width:fit-content}:host(.gog-host--auto-width) .gog-ms-wrapper{width:fit-content}.gog-ms-wrapper--xsm,.gog-ms__dropdown--xsm{--gog-multiselect-size-padding-y: var(--gog-field-xsm-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-xsm-padding-x);--gog-multiselect-size-font-size: var(--gog-field-xsm-font-size)}.gog-ms-wrapper--sm,.gog-ms__dropdown--sm{--gog-multiselect-size-padding-y: var(--gog-field-sm-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-sm-padding-x);--gog-multiselect-size-font-size: var(--gog-field-sm-font-size)}.gog-ms-wrapper--lg,.gog-ms__dropdown--lg{--gog-multiselect-size-padding-y: var(--gog-field-lg-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-lg-padding-x);--gog-multiselect-size-font-size: var(--gog-field-lg-font-size)}.gog-ms-wrapper--slg,.gog-ms__dropdown--slg{--gog-multiselect-size-padding-y: var(--gog-field-slg-padding-y);--gog-multiselect-size-padding-x: var(--gog-field-slg-padding-x);--gog-multiselect-size-font-size: var(--gog-field-slg-font-size)}.gog-ms__label{font-family:var(--gog-multiselect-label-font-family);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing);cursor:pointer}.gog-ms{position:relative;display:flex;align-items:center;justify-content:space-between;padding:var(--gog-multiselect-padding-y, var(--gog-multiselect-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x)));background-color:var(--gog-multiselect-field-bg);border:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-field-border);border-radius:var(--gog-multiselect-radius);color:var(--gog-multiselect-field-color);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color var(--gog-multiselect-transition-duration) var(--gog-easing),box-shadow var(--gog-multiselect-transition-duration) var(--gog-easing)}.gog-ms:hover:not(.gog-ms--disabled){border-color:var(--gog-multiselect-focus-border)}.gog-ms:focus-visible{outline:var(--gog-multiselect-focus-ring-width) solid var(--gog-multiselect-focus-ring);outline-offset:var(--gog-multiselect-focus-ring-offset)}.gog-ms--open{border-color:var(--gog-multiselect-border-color);box-shadow:var(--gog-multiselect-focus-glow)}.gog-ms--disabled{opacity:var(--gog-multiselect-disabled-opacity);cursor:not-allowed}.gog-ms--disabled .gog-ms__label{cursor:not-allowed}.gog-ms--error{border-color:var(--gog-multiselect-error-color)}.gog-ms__value{font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gog-multiselect-value-color)}.gog-ms__value--placeholder{color:var(--gog-multiselect-placeholder-color)}.gog-ms{padding-right:var(--gog-multiselect-actions-inset)}.gog-ms__actions{display:flex;align-items:center;gap:var(--gog-multiselect-actions-gap);flex-shrink:0}.gog-ms__clear{width:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));padding:0;border:0;border-radius:var(--gog-multiselect-clear-radius);background:transparent;color:var(--gog-multiselect-placeholder-color);line-height:1;cursor:pointer;transition:color var(--gog-multiselect-transition-duration) var(--gog-easing)}.gog-ms__clear gog-icon{font-size:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-clear-icon-ratio))}.gog-ms__clear:hover{color:var(--gog-multiselect-field-color)}.gog-ms__clear:focus-visible{outline:var(--gog-multiselect-focus-ring-width) solid var(--gog-multiselect-focus-ring);outline-offset:var(--gog-multiselect-focus-ring-offset)}.gog-ms__arrow{color:var(--gog-multiselect-border-color);transition:transform var(--gog-multiselect-arrow-transition-duration) var(--gog-easing);display:inline-flex;align-items:center;justify-content:center;width:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));height:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)))}.gog-ms__arrow gog-icon{font-size:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-arrow-icon-ratio))}.gog-ms__arrow--up{transform:rotate(180deg)}.gog-ms__dropdown{position:absolute;top:calc(100% + var(--gog-multiselect-panel-offset));left:0;right:auto;min-width:100%;width:max-content;max-width:var(--gog-multiselect-panel-max-width);z-index:var(--gog-dropdown-z);display:flex;flex-direction:column;background-color:var(--gog-multiselect-panel-bg);border:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-panel-border);border-radius:var(--gog-multiselect-radius);max-height:var(--gog-multiselect-panel-max-height);overflow:hidden;box-shadow:var(--gog-multiselect-panel-shadow)}.gog-ms__scroll{flex:1;min-height:0}.gog-ms__dropdown--up{top:auto;bottom:calc(100% + var(--gog-multiselect-panel-offset))}.gog-ms__dropdown--portal{position:fixed;top:unset;bottom:unset;left:unset;right:unset}.gog-ms__controls{flex-shrink:0;display:flex;gap:var(--gog-multiselect-controls-gap);padding:var(--gog-multiselect-controls-padding);background-color:var(--gog-multiselect-panel-bg);border-bottom:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-field-border)}.gog-ms__controls--bottom{border-bottom:0;border-top:var(--gog-multiselect-field-border-width) var(--gog-multiselect-field-border-style) var(--gog-multiselect-field-border)}.gog-ms__options{display:flex;flex-direction:column;padding:var(--gog-multiselect-options-padding);gap:var(--gog-multiselect-option-gap)}.gog-ms__option{width:100%;display:flex;align-items:center;gap:var(--gog-multiselect-option-gap-inline);padding:var(--gog-multiselect-padding-y, var(--gog-multiselect-size-padding-y, var(--gog-field-md-padding-y))) var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x)));border:0;background:transparent;text-align:left;font:inherit;font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));cursor:pointer;border-radius:var(--gog-multiselect-option-radius);transition:background-color var(--gog-multiselect-option-transition-duration) var(--gog-easing);color:var(--gog-multiselect-option-color)}.gog-ms__option--disabled{opacity:var(--gog-multiselect-option-disabled-opacity);cursor:not-allowed}.gog-ms__option:hover{background-color:var(--gog-multiselect-option-hover-bg)}.gog-ms__option--selected{color:var(--gog-multiselect-border-color)}.gog-ms__option:focus-visible{outline:var(--gog-multiselect-focus-ring-width) solid var(--gog-multiselect-focus-ring);outline-offset:calc(var(--gog-multiselect-focus-ring-width) * -1)}.gog-ms__option-mark{display:flex;align-items:center;justify-content:center;width:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-mark-size-ratio));height:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-mark-size-ratio));flex-shrink:0;font-size:calc(var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size))) * var(--gog-multiselect-mark-icon-ratio));color:var(--gog-multiselect-checkbox-border)}.gog-ms__option--selected .gog-ms__option-mark{color:var(--gog-multiselect-checkbox-checked-bg)}.gog-ms__error{font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-error-font-size);color:var(--gog-multiselect-error-color);margin-top:var(--gog-multiselect-error-offset)}.gog-ms__label--float{position:absolute;left:var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x)));top:50%;transform:translateY(-50%);max-width:calc(100% - 2 * var(--gog-multiselect-padding-x, var(--gog-multiselect-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-multiselect-placeholder-color);font-size:var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size));text-transform:none;letter-spacing:normal;transition:transform var(--gog-multiselect-transition-duration) var(--gog-easing),font-size var(--gog-multiselect-transition-duration) var(--gog-easing),color var(--gog-multiselect-transition-duration) var(--gog-easing),top var(--gog-multiselect-transition-duration) var(--gog-easing),background-color var(--gog-multiselect-transition-duration) var(--gog-easing)}.gog-ms-wrapper--float-in,.gog-ms-wrapper--float-on{--gog-multiselect-float-top-padding: calc(var(--gog-multiselect-padding-y, var(--gog-multiselect-size-padding-y, var(--gog-field-md-padding-y))) + var(--gog-multiselect-float-label-reserve))}.gog-ms-wrapper--float-in .gog-ms,.gog-ms-wrapper--float-on .gog-ms{padding-top:var(--gog-multiselect-float-top-padding)}.gog-ms-wrapper--float-in .gog-ms__label--float,.gog-ms-wrapper--float-on .gog-ms__label--float{top:var(--gog-multiselect-float-top-padding);transform:none}.gog-ms-wrapper--float-in.gog-ms-wrapper--floated .gog-ms__label--float{top:var(--gog-multiselect-float-label-in-top);transform:translateY(0);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing)}.gog-ms-wrapper--float-on.gog-ms-wrapper--floated .gog-ms__label--float{top:0;transform:translateY(-50%);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing);background-color:var(--gog-multiselect-float-label-on-bg, var(--gog-multiselect-field-bg));padding:0 4px;left:calc(var(--gog-multiselect-padding-x, var(--gog-multiselect-size-padding-x, var(--gog-field-md-padding-x))) - 4px)}.gog-ms-wrapper--float-over.gog-ms-wrapper--floated .gog-ms__label--float{top:calc(-1 * var(--gog-multiselect-float-label-over-gap));transform:translateY(-100%);font-size:var(--gog-multiselect-label-font-size);color:var(--gog-multiselect-label-color);text-transform:var(--gog-multiselect-label-text-transform);letter-spacing:var(--gog-multiselect-label-letter-spacing)}.gog-ms-wrapper--float-over .gog-ms{margin-top:var(--gog-multiselect-float-label-over-reserve)}@media(prefers-reduced-motion:reduce){.gog-ms,.gog-ms__clear,.gog-ms__arrow,.gog-ms__option,.gog-ms__option-mark,.gog-ms__label--float{transition:none}}.gog-ms__filter{position:sticky;top:0;z-index:1;padding:var(--gog-multiselect-filter-padding);background:var(--gog-multiselect-panel-bg)}.gog-ms__filter-input{width:100%;padding:var(--gog-multiselect-filter-input-padding-y) var(--gog-multiselect-filter-input-padding-x);font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-multiselect-filter-input-color);background:var(--gog-multiselect-filter-input-bg);border:var(--gog-control-border-width) var(--gog-control-border-style) var(--gog-multiselect-filter-input-border);border-radius:var(--gog-multiselect-filter-input-radius);outline:none}.gog-ms__filter-input:focus{border-color:var(--gog-multiselect-focus-border)}.gog-ms__empty{margin:0;padding:var(--gog-multiselect-filter-empty-padding);font-family:var(--gog-multiselect-font-family);font-size:var(--gog-multiselect-font-size, var(--gog-multiselect-size-font-size, var(--gog-field-md-font-size)));color:var(--gog-multiselect-filter-empty-color);text-align:center}.gog-ms__filter--top{border-bottom:var(--gog-multiselect-filter-border-width) var(--gog-multiselect-filter-border-style) var(--gog-multiselect-filter-border-color)}.gog-ms__filter--bottom{top:auto;bottom:0;border-top:var(--gog-multiselect-filter-border-width) var(--gog-multiselect-filter-border-style) var(--gog-multiselect-filter-border-color)}:host(.gog-host--auto-width),:host(.gog-host--auto-width) .gog-ms{min-width:var(--gog-multiselect-min-width)}.gog-ms__dropdown--portal{max-width:var(--gog-multiselect-panel-max-width)}.gog-ms__overflow{flex-shrink:0;margin-left:var(--gog-multiselect-overflow-gap);font-size:var(--gog-multiselect-overflow-font-size);color:var(--gog-multiselect-overflow-color)}.gog-ms__tooltip-list{margin:0;padding-left:1.1em;text-align:left}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "loading", "debounce", "ariaLabel"], outputs: ["gogClick"] }, { 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: "directive", type: GogTooltipDirective, selector: "[gogTooltip]", inputs: ["gogTooltip", "gogTooltipPosition", "gogTooltipShowDelay", "gogTooltipHideDelay", "gogTooltipDisabled", "gogTooltipClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MultiselectComponent, decorators: [{
             type: Component,
@@ -6072,7 +6254,7 @@ class PaginatorComponent {
         this.goTo(this.page() + 1);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: PaginatorComponent, isStandalone: true, selector: "gog-paginator", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: false, transformFunction: null }, rangeMode: { classPropertyName: "rangeMode", publicName: "rangeMode", isSignal: true, isRequired: false, transformFunction: null }, visiblePages: { classPropertyName: "visiblePages", publicName: "visiblePages", isSignal: true, isRequired: false, transformFunction: null }, showFirstPage: { classPropertyName: "showFirstPage", publicName: "showFirstPage", isSignal: true, isRequired: false, transformFunction: null }, showLastPage: { classPropertyName: "showLastPage", publicName: "showLastPage", isSignal: true, isRequired: false, transformFunction: null }, siblingCount: { classPropertyName: "siblingCount", publicName: "siblingCount", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange" }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "ariaLabel()", "class.gog-host--auto-width": "!fullWidth()" }, classAttribute: "gog-paginator" }, ngImport: i0, template: "<gog-button\n  variant=\"ghost\"\n  [size]=\"size()\"\n  [disabled]=\"disabled() || page() === 1\"\n  ariaLabel=\"Previous page\"\n  (gogClick)=\"prev()\"\n  >\u2039</gog-button\n>\n\n@for (item of pageNumbers(); track $index) {\n  @if (isNumber(item)) {\n    <gog-button\n      [size]=\"size()\"\n      [variant]=\"item === page() ? 'primary' : 'ghost'\"\n      [disabled]=\"disabled()\"\n      [ariaLabel]=\"item === page() ? 'Page ' + item + ', current page' : 'Go to page ' + item\"\n      (gogClick)=\"goTo(item)\"\n      >{{ item }}</gog-button\n    >\n  } @else {\n    <span class=\"gog-paginator__ellipsis\">\u2026</span>\n  }\n}\n\n<gog-button\n  variant=\"ghost\"\n  [size]=\"size()\"\n  [disabled]=\"disabled() || page() === totalPages()\"\n  ariaLabel=\"Next page\"\n  (gogClick)=\"next()\"\n  >\u203A</gog-button\n>\n", styles: [":host{display:flex;align-items:center;gap:var(--gog-paginator-gap);flex-wrap:wrap}:host(.gog-host--auto-width){width:fit-content}.gog-paginator__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:var(--gog-paginator-ellipsis-min-width);color:var(--gog-paginator-ellipsis-color);font-family:var(--gog-paginator-ellipsis-font-family);font-size:var(--gog-paginator-ellipsis-font-size);-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "loading", "debounce", "ariaLabel"], outputs: ["gogClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: PaginatorComponent, isStandalone: true, selector: "gog-paginator", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, totalPages: { classPropertyName: "totalPages", publicName: "totalPages", isSignal: true, isRequired: false, transformFunction: null }, rangeMode: { classPropertyName: "rangeMode", publicName: "rangeMode", isSignal: true, isRequired: false, transformFunction: null }, visiblePages: { classPropertyName: "visiblePages", publicName: "visiblePages", isSignal: true, isRequired: false, transformFunction: null }, showFirstPage: { classPropertyName: "showFirstPage", publicName: "showFirstPage", isSignal: true, isRequired: false, transformFunction: null }, showLastPage: { classPropertyName: "showLastPage", publicName: "showLastPage", isSignal: true, isRequired: false, transformFunction: null }, siblingCount: { classPropertyName: "siblingCount", publicName: "siblingCount", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange" }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "ariaLabel()", "class.gog-host--auto-width": "!fullWidth()" }, classAttribute: "gog-paginator" }, ngImport: i0, template: "<gog-button\r\n  variant=\"ghost\"\r\n  [size]=\"size()\"\r\n  [disabled]=\"disabled() || page() === 1\"\r\n  ariaLabel=\"Previous page\"\r\n  (gogClick)=\"prev()\"\r\n  >\u2039</gog-button\r\n>\r\n\r\n@for (item of pageNumbers(); track $index) {\r\n  @if (isNumber(item)) {\r\n    <gog-button\r\n      [size]=\"size()\"\r\n      [variant]=\"item === page() ? 'primary' : 'ghost'\"\r\n      [disabled]=\"disabled()\"\r\n      [ariaLabel]=\"item === page() ? 'Page ' + item + ', current page' : 'Go to page ' + item\"\r\n      (gogClick)=\"goTo(item)\"\r\n      >{{ item }}</gog-button\r\n    >\r\n  } @else {\r\n    <span class=\"gog-paginator__ellipsis\">\u2026</span>\r\n  }\r\n}\r\n\r\n<gog-button\r\n  variant=\"ghost\"\r\n  [size]=\"size()\"\r\n  [disabled]=\"disabled() || page() === totalPages()\"\r\n  ariaLabel=\"Next page\"\r\n  (gogClick)=\"next()\"\r\n  >\u203A</gog-button\r\n>\r\n", styles: [":host{display:flex;align-items:center;gap:var(--gog-paginator-gap);flex-wrap:wrap}:host(.gog-host--auto-width){width:fit-content}.gog-paginator__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:var(--gog-paginator-ellipsis-min-width);color:var(--gog-paginator-ellipsis-color);font-family:var(--gog-paginator-ellipsis-font-family);font-size:var(--gog-paginator-ellipsis-font-size);-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gog-button", inputs: ["variant", "size", "disabled", "fullWidth", "type", "loading", "debounce", "ariaLabel"], outputs: ["gogClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PaginatorComponent, decorators: [{
             type: Component,
@@ -6085,7 +6267,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         // full-width class: this control is full width by default, so the class only
                         // appears once a consumer opts *out* of that.
                         '[class.gog-host--auto-width]': '!fullWidth()',
-                    }, template: "<gog-button\n  variant=\"ghost\"\n  [size]=\"size()\"\n  [disabled]=\"disabled() || page() === 1\"\n  ariaLabel=\"Previous page\"\n  (gogClick)=\"prev()\"\n  >\u2039</gog-button\n>\n\n@for (item of pageNumbers(); track $index) {\n  @if (isNumber(item)) {\n    <gog-button\n      [size]=\"size()\"\n      [variant]=\"item === page() ? 'primary' : 'ghost'\"\n      [disabled]=\"disabled()\"\n      [ariaLabel]=\"item === page() ? 'Page ' + item + ', current page' : 'Go to page ' + item\"\n      (gogClick)=\"goTo(item)\"\n      >{{ item }}</gog-button\n    >\n  } @else {\n    <span class=\"gog-paginator__ellipsis\">\u2026</span>\n  }\n}\n\n<gog-button\n  variant=\"ghost\"\n  [size]=\"size()\"\n  [disabled]=\"disabled() || page() === totalPages()\"\n  ariaLabel=\"Next page\"\n  (gogClick)=\"next()\"\n  >\u203A</gog-button\n>\n", styles: [":host{display:flex;align-items:center;gap:var(--gog-paginator-gap);flex-wrap:wrap}:host(.gog-host--auto-width){width:fit-content}.gog-paginator__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:var(--gog-paginator-ellipsis-min-width);color:var(--gog-paginator-ellipsis-color);font-family:var(--gog-paginator-ellipsis-font-family);font-size:var(--gog-paginator-ellipsis-font-size);-webkit-user-select:none;user-select:none}\n"] }]
+                    }, template: "<gog-button\r\n  variant=\"ghost\"\r\n  [size]=\"size()\"\r\n  [disabled]=\"disabled() || page() === 1\"\r\n  ariaLabel=\"Previous page\"\r\n  (gogClick)=\"prev()\"\r\n  >\u2039</gog-button\r\n>\r\n\r\n@for (item of pageNumbers(); track $index) {\r\n  @if (isNumber(item)) {\r\n    <gog-button\r\n      [size]=\"size()\"\r\n      [variant]=\"item === page() ? 'primary' : 'ghost'\"\r\n      [disabled]=\"disabled()\"\r\n      [ariaLabel]=\"item === page() ? 'Page ' + item + ', current page' : 'Go to page ' + item\"\r\n      (gogClick)=\"goTo(item)\"\r\n      >{{ item }}</gog-button\r\n    >\r\n  } @else {\r\n    <span class=\"gog-paginator__ellipsis\">\u2026</span>\r\n  }\r\n}\r\n\r\n<gog-button\r\n  variant=\"ghost\"\r\n  [size]=\"size()\"\r\n  [disabled]=\"disabled() || page() === totalPages()\"\r\n  ariaLabel=\"Next page\"\r\n  (gogClick)=\"next()\"\r\n  >\u203A</gog-button\r\n>\r\n", styles: [":host{display:flex;align-items:center;gap:var(--gog-paginator-gap);flex-wrap:wrap}:host(.gog-host--auto-width){width:fit-content}.gog-paginator__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:var(--gog-paginator-ellipsis-min-width);color:var(--gog-paginator-ellipsis-color);font-family:var(--gog-paginator-ellipsis-font-family);font-size:var(--gog-paginator-ellipsis-font-size);-webkit-user-select:none;user-select:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], totalPages: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPages", required: false }] }], rangeMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeMode", required: false }] }], visiblePages: [{ type: i0.Input, args: [{ isSignal: true, alias: "visiblePages", required: false }] }], showFirstPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFirstPage", required: false }] }], showLastPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLastPage", required: false }] }], siblingCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "siblingCount", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
 class SpinnerOverlayComponent {
@@ -6415,7 +6597,7 @@ class TableComponent {
         return map;
     }, ...(ngDevMode ? [{ debugName: "headerTemplateMap" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TableComponent, isStandalone: true, selector: "gog-table", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, showRowNumbers: { classPropertyName: "showRowNumbers", publicName: "showRowNumbers", isSignal: true, isRequired: false, transformFunction: null }, showTotal: { classPropertyName: "showTotal", publicName: "showTotal", isSignal: true, isRequired: false, transformFunction: null }, emptyPlaceholder: { classPropertyName: "emptyPlaceholder", publicName: "emptyPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, paginatorPosition: { classPropertyName: "paginatorPosition", publicName: "paginatorPosition", isSignal: true, isRequired: false, transformFunction: null }, totalPosition: { classPropertyName: "totalPosition", publicName: "totalPosition", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, showColumnBorders: { classPropertyName: "showColumnBorders", publicName: "showColumnBorders", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "\"block\"", "style.width": "fullWidth() ? \"100%\" : \"fit-content\"" }, classAttribute: "gog-table-host" }, queries: [{ propertyName: "columns", predicate: GogColumn, isSignal: true }, { propertyName: "templates", predicate: TemplateDirective, isSignal: true }], ngImport: i0, template: "<div class=\"gog-table-wrapper gog-contained-layout\">\r\n  <gog-scroll axis=\"horizontal\" class=\"gog-table-scroll\">\r\n    <table\r\n      class=\"gog-table\"\r\n      [class]=\"sizeClass()\"\r\n      [class.gog-table--col-borders]=\"showColumnBorders()\"\r\n      [class.gog-table--loading]=\"loading()\"\r\n      [class.gog-table--sticky-header]=\"stickyHeader()\"\r\n      [style.width]=\"fullWidth() ? '100%' : 'fit-content'\"\r\n    >\r\n      <colgroup>\r\n        @if (showRowNumbers()) {\r\n          <col class=\"gog-table__col--num\" />\r\n        }\r\n        @for (col of columns(); track col.field()) {\r\n          <col\r\n            [style.width]=\"col.width() || null\"\r\n            [style.min-width]=\"col.minWidth() || null\"\r\n            [style.max-width]=\"col.maxWidth() || null\"\r\n          />\r\n        }\r\n      </colgroup>\r\n      <thead>\r\n        <tr>\r\n          @if (showRowNumbers()) {\r\n            <th class=\"gog-table__th gog-table__th--num\" scope=\"col\">#</th>\r\n          }\r\n          @for (col of columns(); track col.field()) {\r\n            <th\r\n              class=\"gog-table__th\"\r\n              scope=\"col\"\r\n              [class.gog-table__th--sortable]=\"col.sortable() && !loading()\"\r\n              [class.gog-table__th--sorted]=\"getSortDirection(col.field())\"\r\n              [attr.aria-sort]=\"getAriaSort(col.field())\"\r\n              [attr.tabindex]=\"col.sortable() && !loading() ? 0 : null\"\r\n              (click)=\"handleSortClick(col)\"\r\n              (keydown.enter)=\"handleSortClick(col)\"\r\n              (keydown.space)=\"handleSortClick(col); $event.preventDefault()\"\r\n            >\r\n              @if (getHeaderTemplate(col); as headerTpl) {\r\n                <ng-container *ngTemplateOutlet=\"headerTpl; context: headerContext(col)\" />\r\n              } @else {\r\n                <span class=\"gog-table__th-inner\">\r\n                  {{ col.header() || col.field() }}\r\n                  @if (col.sortable() && !loading()) {\r\n                    <span class=\"gog-table__sort-icon\" aria-hidden=\"true\">\r\n                      @if (getSortDirection(col.field()) === 'asc') {\r\n                        <gog-icon name=\"sort-up\" />\r\n                      } @else if (getSortDirection(col.field()) === 'desc') {\r\n                        <gog-icon name=\"sort-down\" />\r\n                      } @else {\r\n                        <gog-icon name=\"sort\" />\r\n                      }\r\n                    </span>\r\n                  }\r\n                </span>\r\n              }\r\n            </th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @if (loading()) {\r\n          <tr>\r\n            <td class=\"gog-table__loading-cell\" [attr.colspan]=\"emptyColspan()\">\r\n              <gog-spinner size=\"md\" />\r\n            </td>\r\n          </tr>\r\n        } @else if (visibleRows().length === 0) {\r\n          <tr>\r\n            <td class=\"gog-table__empty\" [attr.colspan]=\"emptyColspan()\">\u2014</td>\r\n          </tr>\r\n        } @else {\r\n          @for (row of visibleRows(); track $index; let i = $index) {\r\n            <tr class=\"gog-table__row\">\r\n              @if (showRowNumbers()) {\r\n                <td class=\"gog-table__td gog-table__td--num\">{{ globalRowIndex(i) }}</td>\r\n              }\r\n              @for (col of columns(); track col.field()) {\r\n                <td class=\"gog-table__td\">\r\n                  @if (getBodyTemplate(col); as bodyTpl) {\r\n                    <ng-container *ngTemplateOutlet=\"bodyTpl; context: bodyContext(row, col, i)\" />\r\n                  } @else {\r\n                    {{ formatCellValue(row, col.field()) }}\r\n                  }\r\n                </td>\r\n              }\r\n            </tr>\r\n          }\r\n        }\r\n      </tbody>\r\n    </table>\r\n  </gog-scroll>\r\n\r\n  @if (hasPagination() || showTotal()) {\r\n    <div class=\"gog-table__footer\">\r\n      @if (showTotal()) {\r\n        <span class=\"gog-table__total\" [style.grid-area]=\"totalGridArea()\">\r\n          Total: {{ value().length }}\r\n        </span>\r\n      }\r\n\r\n      @if (hasPagination()) {\r\n        <gog-paginator\r\n          class=\"gog-table__pagination\"\r\n          [style.grid-area]=\"paginatorGridArea()\"\r\n          [(page)]=\"currentPage\"\r\n          [totalPages]=\"totalPages()\"\r\n          rangeMode=\"ellipsis\"\r\n          size=\"sm\"\r\n          ariaLabel=\"Table pagination\"\r\n        />\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".gog-table-wrapper{display:flex;flex-direction:column;gap:var(--gog-table-gap);width:100%;overflow-anchor:none}.gog-table-scroll{width:100%}.gog-table{width:100%;border-collapse:collapse;border:var(--gog-table-border-width) var(--gog-table-border-style) var(--gog-table-border-color);background-color:var(--gog-table-surface);color:var(--gog-table-text-color);font-family:var(--gog-table-font-family);table-layout:fixed}.gog-table--slg{--gog-table-size-th-padding-v: var(--gog-table-slg-padding-v);--gog-table-size-td-padding-v: var(--gog-table-slg-padding-v);--gog-table-size-th-font-size: var(--gog-table-slg-th-font-size);--gog-table-size-td-font-size: var(--gog-table-slg-td-font-size)}.gog-table--md{--gog-table-size-th-padding-v: var(--gog-table-md-padding-v);--gog-table-size-td-padding-v: var(--gog-table-md-padding-v);--gog-table-size-th-font-size: var(--gog-table-md-th-font-size);--gog-table-size-td-font-size: var(--gog-table-md-td-font-size)}.gog-table--sm{--gog-table-size-th-padding-v: var(--gog-table-sm-padding-v);--gog-table-size-td-padding-v: var(--gog-table-sm-padding-v);--gog-table-size-th-font-size: var(--gog-table-sm-th-font-size);--gog-table-size-td-font-size: var(--gog-table-sm-td-font-size)}.gog-table--xsm{--gog-table-size-th-padding-v: var(--gog-table-xsm-padding-v);--gog-table-size-td-padding-v: var(--gog-table-xsm-padding-v);--gog-table-size-th-font-size: var(--gog-table-xsm-th-font-size);--gog-table-size-td-font-size: var(--gog-table-xsm-td-font-size)}.gog-table__col--num{width:var(--gog-table-num-col-width)}.gog-table__th{padding:var(--gog-table-th-padding-v, var(--gog-table-size-th-padding-v, var(--gog-table-lg-padding-v))) var(--gog-table-padding-h);text-align:left;font-family:var(--gog-table-header-font-family);font-size:var(--gog-table-th-font-size, var(--gog-table-size-th-font-size, var(--gog-table-lg-th-font-size)));text-transform:var(--gog-table-header-text-transform);letter-spacing:var(--gog-table-header-letter-spacing);color:var(--gog-table-accent-color);background-color:var(--gog-table-surface);border-bottom:var(--gog-table-border-width) var(--gog-table-border-style) var(--gog-table-border-color);white-space:normal;overflow:hidden}.gog-table--sticky-header .gog-table__th{position:sticky;top:0;z-index:1}.gog-table__th--num{width:var(--gog-table-num-col-width);text-align:center;color:var(--gog-table-muted-color)}.gog-table__th--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.gog-table__th--sortable:focus-visible{outline:var(--gog-table-focus-ring-width) solid var(--gog-table-focus-ring);outline-offset:calc(var(--gog-table-focus-ring-width) * -1)}.gog-table__th--sortable:hover,.gog-table__th--sorted{color:var(--gog-table-accent-bright)}.gog-table__th-inner{display:inline-flex;align-items:center;gap:var(--gog-table-th-inner-gap);width:100%}.gog-table__sort-icon{display:inline-block;width:var(--gog-table-sort-icon-width);text-align:center;font-size:var(--gog-table-sort-icon-size);opacity:var(--gog-table-sort-icon-opacity);flex-shrink:0}.gog-table__th--sorted .gog-table__sort-icon{opacity:1}.gog-table__td{padding:var(--gog-table-td-padding-v, var(--gog-table-size-td-padding-v, var(--gog-table-lg-padding-v))) var(--gog-table-padding-h);font-size:var(--gog-table-td-font-size, var(--gog-table-size-td-font-size, var(--gog-table-lg-td-font-size)));border-bottom:var(--gog-table-row-border-width) var(--gog-table-border-style) var(--gog-table-border-color);vertical-align:middle;overflow-wrap:break-word;word-break:break-word;overflow:hidden}.gog-table__td--num{text-align:center;color:var(--gog-table-muted-color);font-size:var(--gog-table-num-font-size);font-family:var(--gog-table-numeric-font-family);width:var(--gog-table-num-col-width)}.gog-table__row:last-child .gog-table__td{border-bottom:none}.gog-table__row{transition:background-color var(--gog-table-row-transition-duration) var(--gog-easing)}.gog-table__row:hover{background-color:var(--gog-table-hover-bg)}.gog-table__empty{padding:var(--gog-table-empty-padding);text-align:center;color:var(--gog-table-muted-color);font-size:var(--gog-table-empty-font-size)}.gog-table--loading thead{opacity:var(--gog-table-loading-opacity);pointer-events:none}.gog-table__loading-cell{padding:var(--gog-table-loading-padding);text-align:center}.gog-table--col-borders .gog-table__th:not(:last-child),.gog-table--col-borders .gog-table__td:not(:last-child){border-right:var(--gog-table-row-border-width) var(--gog-table-border-style) var(--gog-table-border-color)}.gog-table__footer{display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:\"left center right\";align-items:center;min-height:var(--gog-table-footer-min-height);gap:var(--gog-table-footer-gap)}.gog-table__total{font-size:var(--gog-table-total-font-size);color:var(--gog-table-muted-color);font-family:var(--gog-table-numeric-font-family);text-transform:var(--gog-table-total-text-transform);letter-spacing:var(--gog-table-total-letter-spacing)}.gog-table__total[style*=\"grid-area: right\"]{text-align:right}.gog-table__pagination[style*=\"grid-area: left\"]{justify-content:flex-start}.gog-table__pagination[style*=\"grid-area: center\"]{justify-content:center}.gog-table__pagination[style*=\"grid-area: right\"]{justify-content:flex-end}@media(prefers-reduced-motion:reduce){.gog-table__row{transition:none}}\n"], dependencies: [{ kind: "component", type: SpinnerComponent, selector: "gog-spinner", inputs: ["size", "overlay", "ariaLabel", "variant"] }, { kind: "component", type: PaginatorComponent, selector: "gog-paginator", inputs: ["page", "fullWidth", "totalPages", "rangeMode", "visiblePages", "showFirstPage", "showLastPage", "siblingCount", "size", "disabled", "ariaLabel"], outputs: ["pageChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { kind: "component", type: ScrollComponent, selector: "gog-scroll", inputs: ["axis", "size", "autoHide", "hideDelay", "reachThreshold", "focusable", "ariaLabel", "overscrollBehavior"], outputs: ["gogScroll", "gogReachStart", "gogReachEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TableComponent, isStandalone: true, selector: "gog-table", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, showRowNumbers: { classPropertyName: "showRowNumbers", publicName: "showRowNumbers", isSignal: true, isRequired: false, transformFunction: null }, showTotal: { classPropertyName: "showTotal", publicName: "showTotal", isSignal: true, isRequired: false, transformFunction: null }, emptyPlaceholder: { classPropertyName: "emptyPlaceholder", publicName: "emptyPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, paginatorPosition: { classPropertyName: "paginatorPosition", publicName: "paginatorPosition", isSignal: true, isRequired: false, transformFunction: null }, totalPosition: { classPropertyName: "totalPosition", publicName: "totalPosition", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, showColumnBorders: { classPropertyName: "showColumnBorders", publicName: "showColumnBorders", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "\"block\"", "style.width": "fullWidth() ? \"100%\" : \"fit-content\"" }, classAttribute: "gog-table-host" }, queries: [{ propertyName: "columns", predicate: GogColumn, isSignal: true }, { propertyName: "templates", predicate: TemplateDirective, isSignal: true }], ngImport: i0, template: "<div class=\"gog-table-wrapper gog-contained-layout\">\r\n  <gog-scroll axis=\"horizontal\" class=\"gog-table-scroll\">\r\n    <table\r\n      class=\"gog-table\"\r\n      [class]=\"sizeClass()\"\r\n      [class.gog-table--col-borders]=\"showColumnBorders()\"\r\n      [class.gog-table--loading]=\"loading()\"\r\n      [class.gog-table--sticky-header]=\"stickyHeader()\"\r\n      [style.width]=\"fullWidth() ? '100%' : 'fit-content'\"\r\n    >\r\n      <colgroup>\r\n        @if (showRowNumbers()) {\r\n          <col class=\"gog-table__col--num\" />\r\n        }\r\n        @for (col of columns(); track col.field()) {\r\n          <col\r\n            [style.width]=\"col.width() || null\"\r\n            [style.min-width]=\"col.minWidth() || null\"\r\n            [style.max-width]=\"col.maxWidth() || null\"\r\n          />\r\n        }\r\n      </colgroup>\r\n      <thead>\r\n        <tr>\r\n          @if (showRowNumbers()) {\r\n            <th class=\"gog-table__th gog-table__th--num\" scope=\"col\">#</th>\r\n          }\r\n          @for (col of columns(); track col.field()) {\r\n            <th\r\n              class=\"gog-table__th\"\r\n              scope=\"col\"\r\n              [class.gog-table__th--sortable]=\"col.sortable() && !loading()\"\r\n              [class.gog-table__th--sorted]=\"getSortDirection(col.field())\"\r\n              [attr.aria-sort]=\"getAriaSort(col.field())\"\r\n              [attr.tabindex]=\"col.sortable() && !loading() ? 0 : null\"\r\n              (click)=\"handleSortClick(col)\"\r\n              (keydown.enter)=\"handleSortClick(col)\"\r\n              (keydown.space)=\"handleSortClick(col); $event.preventDefault()\"\r\n            >\r\n              @if (getHeaderTemplate(col); as headerTpl) {\r\n                <ng-container *ngTemplateOutlet=\"headerTpl; context: headerContext(col)\" />\r\n              } @else {\r\n                <span class=\"gog-table__th-inner\">\r\n                  {{ col.header() || col.field() }}\r\n                  @if (col.sortable() && !loading()) {\r\n                    <span class=\"gog-table__sort-icon\" aria-hidden=\"true\">\r\n                      @if (getSortDirection(col.field()) === 'asc') {\r\n                        <gog-icon name=\"sort-up\" />\r\n                      } @else if (getSortDirection(col.field()) === 'desc') {\r\n                        <gog-icon name=\"sort-down\" />\r\n                      } @else {\r\n                        <gog-icon name=\"sort\" />\r\n                      }\r\n                    </span>\r\n                  }\r\n                </span>\r\n              }\r\n            </th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        @if (loading()) {\r\n          <tr>\r\n            <td class=\"gog-table__loading-cell\" [attr.colspan]=\"emptyColspan()\">\r\n              <gog-spinner size=\"md\" />\r\n            </td>\r\n          </tr>\r\n        } @else if (visibleRows().length === 0) {\r\n          <tr>\r\n            <td class=\"gog-table__empty\" [attr.colspan]=\"emptyColspan()\">\u2014</td>\r\n          </tr>\r\n        } @else {\r\n          @for (row of visibleRows(); track $index; let i = $index) {\r\n            <tr class=\"gog-table__row\">\r\n              @if (showRowNumbers()) {\r\n                <td class=\"gog-table__td gog-table__td--num\">{{ globalRowIndex(i) }}</td>\r\n              }\r\n              @for (col of columns(); track col.field()) {\r\n                <td class=\"gog-table__td\">\r\n                  @if (getBodyTemplate(col); as bodyTpl) {\r\n                    <ng-container *ngTemplateOutlet=\"bodyTpl; context: bodyContext(row, col, i)\" />\r\n                  } @else {\r\n                    {{ formatCellValue(row, col.field()) }}\r\n                  }\r\n                </td>\r\n              }\r\n            </tr>\r\n          }\r\n        }\r\n      </tbody>\r\n    </table>\r\n  </gog-scroll>\r\n\r\n  @if (hasPagination() || showTotal()) {\r\n    <div class=\"gog-table__footer\">\r\n      @if (showTotal()) {\r\n        <span class=\"gog-table__total\" [style.grid-area]=\"totalGridArea()\">\r\n          Total: {{ value().length }}\r\n        </span>\r\n      }\r\n\r\n      @if (hasPagination()) {\r\n        <gog-paginator\r\n          class=\"gog-table__pagination\"\r\n          [style.grid-area]=\"paginatorGridArea()\"\r\n          [(page)]=\"currentPage\"\r\n          [totalPages]=\"totalPages()\"\r\n          rangeMode=\"ellipsis\"\r\n          size=\"sm\"\r\n          ariaLabel=\"Table pagination\"\r\n        />\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".gog-table-wrapper{display:flex;flex-direction:column;gap:var(--gog-table-gap);width:100%;overflow-anchor:none}.gog-table-scroll{width:100%}.gog-table{width:100%;border-collapse:collapse;border:var(--gog-table-border-width) var(--gog-table-border-style) var(--gog-table-border-color);background-color:var(--gog-table-surface);color:var(--gog-table-text-color);font-family:var(--gog-table-font-family);table-layout:fixed}.gog-table--slg{--gog-table-size-th-padding-v: var(--gog-table-slg-padding-v);--gog-table-size-td-padding-v: var(--gog-table-slg-padding-v);--gog-table-size-th-font-size: var(--gog-table-slg-th-font-size);--gog-table-size-td-font-size: var(--gog-table-slg-td-font-size)}.gog-table--md{--gog-table-size-th-padding-v: var(--gog-table-md-padding-v);--gog-table-size-td-padding-v: var(--gog-table-md-padding-v);--gog-table-size-th-font-size: var(--gog-table-md-th-font-size);--gog-table-size-td-font-size: var(--gog-table-md-td-font-size)}.gog-table--sm{--gog-table-size-th-padding-v: var(--gog-table-sm-padding-v);--gog-table-size-td-padding-v: var(--gog-table-sm-padding-v);--gog-table-size-th-font-size: var(--gog-table-sm-th-font-size);--gog-table-size-td-font-size: var(--gog-table-sm-td-font-size)}.gog-table--xsm{--gog-table-size-th-padding-v: var(--gog-table-xsm-padding-v);--gog-table-size-td-padding-v: var(--gog-table-xsm-padding-v);--gog-table-size-th-font-size: var(--gog-table-xsm-th-font-size);--gog-table-size-td-font-size: var(--gog-table-xsm-td-font-size)}.gog-table__col--num{width:var(--gog-table-num-col-width)}.gog-table__th{padding:var(--gog-table-th-padding-v, var(--gog-table-size-th-padding-v, var(--gog-table-lg-padding-v))) var(--gog-table-padding-h);text-align:left;font-family:var(--gog-table-header-font-family);font-size:var(--gog-table-th-font-size, var(--gog-table-size-th-font-size, var(--gog-table-lg-th-font-size)));text-transform:var(--gog-table-header-text-transform);letter-spacing:var(--gog-table-header-letter-spacing);color:var(--gog-table-accent-color);background-color:var(--gog-table-surface);border-bottom:var(--gog-table-border-width) var(--gog-table-border-style) var(--gog-table-border-color);white-space:normal;overflow:hidden}.gog-table--sticky-header .gog-table__th{position:sticky;top:0;z-index:1}.gog-table__th--num{width:var(--gog-table-num-col-width);text-align:center;color:var(--gog-table-muted-color)}.gog-table__th--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.gog-table__th--sortable:focus-visible{outline:var(--gog-table-focus-ring-width) solid var(--gog-table-focus-ring);outline-offset:calc(var(--gog-table-focus-ring-width) * -1)}.gog-table__th--sortable:hover,.gog-table__th--sorted{color:var(--gog-table-accent-bright)}.gog-table__th-inner{display:inline-flex;align-items:center;gap:var(--gog-table-th-inner-gap);width:100%}.gog-table__sort-icon{display:inline-block;width:var(--gog-table-sort-icon-width);text-align:center;font-size:var(--gog-table-sort-icon-size);opacity:var(--gog-table-sort-icon-opacity);flex-shrink:0}.gog-table__th--sorted .gog-table__sort-icon{opacity:1}.gog-table__td{padding:var(--gog-table-td-padding-v, var(--gog-table-size-td-padding-v, var(--gog-table-lg-padding-v))) var(--gog-table-padding-h);font-size:var(--gog-table-td-font-size, var(--gog-table-size-td-font-size, var(--gog-table-lg-td-font-size)));border-bottom:var(--gog-table-row-border-width) var(--gog-table-border-style) var(--gog-table-border-color);vertical-align:middle;overflow-wrap:break-word;word-break:break-word;overflow:hidden}.gog-table__td--num{text-align:center;color:var(--gog-table-muted-color);font-size:var(--gog-table-num-font-size);font-family:var(--gog-table-numeric-font-family);width:var(--gog-table-num-col-width)}.gog-table__row:last-child .gog-table__td{border-bottom:none}.gog-table__row{transition:background-color var(--gog-table-row-transition-duration) var(--gog-easing)}.gog-table__row:hover{background-color:var(--gog-table-hover-bg)}.gog-table__empty{padding:var(--gog-table-empty-padding);text-align:center;color:var(--gog-table-muted-color);font-size:var(--gog-table-empty-font-size)}.gog-table--loading thead{opacity:var(--gog-table-loading-opacity);pointer-events:none}.gog-table__loading-cell{padding:var(--gog-table-loading-padding);text-align:center}.gog-table--col-borders .gog-table__th:not(:last-child),.gog-table--col-borders .gog-table__td:not(:last-child){border-right:var(--gog-table-row-border-width) var(--gog-table-border-style) var(--gog-table-border-color)}.gog-table__footer{display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:\"left center right\";align-items:center;min-height:var(--gog-table-footer-min-height);gap:var(--gog-table-footer-gap)}.gog-table__total{font-size:var(--gog-table-total-font-size);color:var(--gog-table-muted-color);font-family:var(--gog-table-numeric-font-family);text-transform:var(--gog-table-total-text-transform);letter-spacing:var(--gog-table-total-letter-spacing)}.gog-table__total[style*=\"grid-area: right\"]{text-align:right}.gog-table__pagination[style*=\"grid-area: left\"]{justify-content:flex-start}.gog-table__pagination[style*=\"grid-area: center\"]{justify-content:center}.gog-table__pagination[style*=\"grid-area: right\"]{justify-content:flex-end}@media(prefers-reduced-motion:reduce){.gog-table__row{transition:none}}\n"], dependencies: [{ kind: "component", type: SpinnerComponent, selector: "gog-spinner", inputs: ["size", "overlay", "ariaLabel", "variant"] }, { kind: "component", type: PaginatorComponent, selector: "gog-paginator", inputs: ["page", "fullWidth", "totalPages", "rangeMode", "visiblePages", "showFirstPage", "showLastPage", "siblingCount", "size", "disabled", "ariaLabel"], outputs: ["pageChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "gog-icon", inputs: ["name", "template", "title", "ariaHidden"] }, { 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: TableComponent, decorators: [{
             type: Component,