@guildofgleks/ui 21.5.2 → 21.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/AGENTS.md +29 -1
  2. package/CHANGELOG.md +123 -0
  3. package/README.md +4 -0
  4. package/fesm2022/guildofgleks-ui.mjs +73 -8
  5. package/fesm2022/guildofgleks-ui.mjs.map +1 -1
  6. package/package.json +1 -1
  7. package/styles/button.css +19 -2
  8. package/styles/menu.css +13 -3
  9. package/styles/utilities.css +37 -1
  10. package/types/guildofgleks-ui.d.ts +50 -3
package/fesm2022/guildofgleks-ui.mjs CHANGED
@@ -606,6 +606,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
606
606
  }, template: "@switch (shape()) {\n @case ('text') {\n @for (isShort of lineList(); track $index) {\n <span\n class=\"gog-skeleton__bone gog-skeleton__line\"\n [class.gog-skeleton__line--short]=\"isShort\"\n ></span>\n }\n }\n @default {\n <span class=\"gog-skeleton__bone gog-skeleton__shape\"></span>\n }\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.gog-skeleton__bone{position:relative;display:block;overflow:hidden;background-color:var(--gog-skeleton-base);border-radius:var(--gog-skeleton-radius)}:host(.gog-skeleton--square) .gog-skeleton__bone{border-radius:var(--gog-skeleton-square-radius)}:host(.gog-skeleton--text){display:grid;gap:var(--gog-skeleton-line-gap)}.gog-skeleton__line{width:100%;height:var(--gog-skeleton-line-height, var(--gog-skeleton-line-height-md));border-radius:var(--gog-skeleton-line-radius)}:host(.gog-skeleton--square) .gog-skeleton__line{border-radius:var(--gog-skeleton-square-radius)}.gog-skeleton__line--short{width:var(--gog-skeleton-short-line-width)}:host(.gog-skeleton--text.gog-skeleton--xsm){--gog-skeleton-line-height: var(--gog-skeleton-line-height-xsm)}:host(.gog-skeleton--text.gog-skeleton--sm){--gog-skeleton-line-height: var(--gog-skeleton-line-height-sm)}:host(.gog-skeleton--text.gog-skeleton--md){--gog-skeleton-line-height: var(--gog-skeleton-line-height-md)}:host(.gog-skeleton--text.gog-skeleton--lg){--gog-skeleton-line-height: var(--gog-skeleton-line-height-lg)}:host(.gog-skeleton--text.gog-skeleton--slg){--gog-skeleton-line-height: var(--gog-skeleton-line-height-slg)}:host(.gog-skeleton--circle){display:inline-block;width:var(--gog-skeleton-circle-size, var(--gog-skeleton-circle-size-md));height:var(--gog-skeleton-circle-size, var(--gog-skeleton-circle-size-md))}:host(.gog-skeleton--circle) .gog-skeleton__shape{width:100%;height:100%;border-radius:50%}:host(.gog-skeleton--circle.gog-skeleton--xsm){--gog-skeleton-circle-size: var(--gog-skeleton-circle-size-xsm)}:host(.gog-skeleton--circle.gog-skeleton--sm){--gog-skeleton-circle-size: var(--gog-skeleton-circle-size-sm)}:host(.gog-skeleton--circle.gog-skeleton--md){--gog-skeleton-circle-size: var(--gog-skeleton-circle-size-md)}:host(.gog-skeleton--circle.gog-skeleton--lg){--gog-skeleton-circle-size: var(--gog-skeleton-circle-size-lg)}:host(.gog-skeleton--circle.gog-skeleton--slg){--gog-skeleton-circle-size: var(--gog-skeleton-circle-size-slg)}:host(.gog-skeleton--rect){display:block;width:100%;height:var(--gog-skeleton-rect-height, var(--gog-skeleton-rect-height-md))}:host(.gog-skeleton--rect) .gog-skeleton__shape{width:100%;height:100%}:host(.gog-skeleton--rect.gog-skeleton--xsm){--gog-skeleton-rect-height: var(--gog-skeleton-rect-height-xsm)}:host(.gog-skeleton--rect.gog-skeleton--sm){--gog-skeleton-rect-height: var(--gog-skeleton-rect-height-sm)}:host(.gog-skeleton--rect.gog-skeleton--md){--gog-skeleton-rect-height: var(--gog-skeleton-rect-height-md)}:host(.gog-skeleton--rect.gog-skeleton--lg){--gog-skeleton-rect-height: var(--gog-skeleton-rect-height-lg)}:host(.gog-skeleton--rect.gog-skeleton--slg){--gog-skeleton-rect-height: var(--gog-skeleton-rect-height-slg)}@keyframes gog-skeleton-pulse{0%,to{opacity:1}50%{opacity:var(--gog-skeleton-pulse-min-opacity)}}:host(.gog-skeleton--pulse) .gog-skeleton__bone{animation:gog-skeleton-pulse var(--gog-skeleton-pulse-duration) ease-in-out infinite}@keyframes gog-skeleton-wave{0%{transform:translate(-100%)}to{transform:translate(100%)}}:host(.gog-skeleton--wave) .gog-skeleton__bone:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--gog-skeleton-shine),transparent);animation:gog-skeleton-wave var(--gog-skeleton-wave-duration) ease-in-out infinite}@media(prefers-reduced-motion:reduce){.gog-skeleton__bone,.gog-skeleton__bone:after{animation:none!important}}\n"] }]
607
607
  }], propDecorators: { shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], animation: [{ type: i0.Input, args: [{ isSignal: true, alias: "animation", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], lines: [{ type: i0.Input, args: [{ isSignal: true, alias: "lines", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
608
608
 
609
+ /** Cycled by `skeletonWidth()` — see there for why these are fixed rather than random. */
610
+ const SKELETON_WIDTHS = ['62%', '45%', '71%', '53%'];
609
611
  class GogAccordionContentDirective {
610
612
  templateRef = inject(TemplateRef);
611
613
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GogAccordionContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -698,6 +700,17 @@ class AccordionComponent {
698
700
  const count = this.items().length || this.skeletonCount();
699
701
  return Array.from({ length: count }, (_, index) => index);
700
702
  }, ...(ngDevMode ? [{ debugName: "skeletonRows" }] : /* istanbul ignore next */ []));
703
+ /**
704
+ * Placeholder title widths, cycled by row index.
705
+ *
706
+ * Every bar used to be 55%, which reads as a repeating progress artifact rather than as text
707
+ * that has not arrived — real titles are not all the same length. Cycled rather than random:
708
+ * a random width would differ between the server-rendered pass and hydration, and would make
709
+ * every snapshot of this component unstable.
710
+ */
711
+ skeletonWidth(index) {
712
+ return SKELETON_WIDTHS[index % SKELETON_WIDTHS.length];
713
+ }
701
714
  constructor() {
702
715
  effect(() => {
703
716
  const items = this.items();
@@ -737,13 +750,20 @@ class AccordionComponent {
737
750
  handleRovingFocusKeydown(event, headers);
738
751
  }
739
752
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
740
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AccordionComponent, isStandalone: true, selector: "gog-accordion", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, expandFirst: { classPropertyName: "expandFirst", publicName: "expandFirst", isSignal: true, isRequired: false, transformFunction: null }, multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, skeletonCount: { classPropertyName: "skeletonCount", publicName: "skeletonCount", isSignal: true, isRequired: false, transformFunction: null }, showChevron: { classPropertyName: "showChevron", publicName: "showChevron", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null }, openIds: { classPropertyName: "openIds", publicName: "openIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openIds: "openIdsChange", gogToggle: "gogToggle" }, host: { classAttribute: "gog-accordion-host" }, queries: [{ propertyName: "headerTpl", first: true, predicate: GogAccordionHeaderDirective, descendants: true, isSignal: true }, { propertyName: "chevronTpl", first: true, predicate: GogAccordionChevronDirective, descendants: true, isSignal: true }, { propertyName: "contentTpl", first: true, predicate: GogAccordionContentDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n [class.gog-accordion--loading]=\"loading()\"\r\n class=\"gog-accordion gog-contained-layout\"\r\n [class]=\"sizeClass()\"\r\n>\r\n @if (loading()) {\r\n @for (row of skeletonRows(); track row) {\r\n <div class=\"gog-accordion__item gog-accordion__item--skeleton\">\r\n <div class=\"gog-accordion__header gog-accordion__header--skeleton\">\r\n <gog-skeleton shape=\"text\" [size]=\"size()\" width=\"55%\" />\r\n </div>\r\n </div>\r\n }\r\n } @else {\r\n @for (item of items(); track item.id) {\r\n <div\r\n class=\"gog-accordion__item\"\r\n [class.gog-accordion__item--open]=\"isOpen(item.id)\"\r\n [class.gog-accordion__item--disabled]=\"item.disabled\"\r\n >\r\n <ng-template #headerButton>\r\n <button\r\n [id]=\"uid + '-btn-' + item.id\"\r\n class=\"gog-accordion__header\"\r\n [class.gog-accordion__header--chevronless]=\"!showChevron()\"\r\n [class.gog-accordion__header--open]=\"isOpen(item.id)\"\r\n [attr.aria-expanded]=\"isOpen(item.id)\"\r\n [attr.aria-controls]=\"uid + '-body-' + item.id\"\r\n [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\r\n [disabled]=\"item.disabled || null\"\r\n (click)=\"toggle(item)\"\r\n (keydown)=\"onHeaderKeydown($event)\"\r\n type=\"button\"\r\n >\r\n <span class=\"gog-accordion__header-content\">\r\n @if (headerTpl(); as tpl) {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n tpl.templateRef;\r\n context: { $implicit: item, open: isOpen(item.id) }\r\n \"\r\n />\r\n } @else {\r\n <span class=\"gog-accordion__title\">{{ item.title }}</span>\r\n }\r\n </span>\r\n @if (showChevron()) {\r\n <span\r\n class=\"gog-accordion__chevron\"\r\n [class.gog-accordion__chevron--auto-rotate]=\"!chevronTpl()\"\r\n aria-hidden=\"true\"\r\n >\r\n @if (chevronTpl(); as tpl) {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n tpl.templateRef;\r\n context: { $implicit: item, open: isOpen(item.id) }\r\n \"\r\n />\r\n } @else {\r\n <gog-icon name=\"chevron-down\" />\r\n }\r\n </span>\r\n }\r\n </button>\r\n </ng-template>\r\n\r\n @if (headingLevel(); as level) {\r\n <div role=\"heading\" [attr.aria-level]=\"level\" class=\"gog-accordion__heading\">\r\n <ng-container [ngTemplateOutlet]=\"headerButton\" />\r\n </div>\r\n } @else {\r\n <ng-container [ngTemplateOutlet]=\"headerButton\" />\r\n }\r\n\r\n <div\r\n [id]=\"uid + '-body-' + item.id\"\r\n class=\"gog-accordion__body\"\r\n [class.gog-accordion__body--open]=\"isOpen(item.id)\"\r\n role=\"region\"\r\n [attr.aria-labelledby]=\"uid + '-btn-' + item.id\"\r\n [attr.aria-hidden]=\"!isOpen(item.id)\"\r\n [attr.inert]=\"!isOpen(item.id) ? '' : null\"\r\n >\r\n <div class=\"gog-accordion__body-inner\">\r\n @if (contentTpl(); as tpl) {\r\n <ng-container *ngTemplateOutlet=\"tpl.templateRef; context: { $implicit: item }\" />\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.gog-accordion{display:flex;flex-direction:column;width:100%}.gog-accordion__item{border-bottom:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color)}.gog-accordion__item:first-child{border-top:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color);border-top-left-radius:var(--gog-accordion-radius);border-top-right-radius:var(--gog-accordion-radius)}.gog-accordion__item:last-child{border-bottom-left-radius:var(--gog-accordion-radius);border-bottom-right-radius:var(--gog-accordion-radius);overflow:hidden}.gog-accordion__item--disabled .gog-accordion__header{cursor:not-allowed;opacity:var(--gog-accordion-disabled-opacity)}.gog-accordion__item--disabled .gog-accordion__header:hover{color:var(--gog-accordion-text-color);background-color:var(--gog-accordion-header-bg)}.gog-accordion__heading{display:contents}.gog-accordion__header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--gog-accordion-padding-y, var(--gog-accordion-size-padding-y, var(--gog-accordion-lg-padding-y))) var(--gog-accordion-padding-x, var(--gog-accordion-size-padding-x, var(--gog-accordion-lg-padding-x)));gap:var(--gog-accordion-header-gap);background:var(--gog-accordion-header-bg);border:none;color:var(--gog-accordion-text-color);text-align:start;cursor:pointer;font-family:var(--gog-accordion-font-family);text-transform:var(--gog-accordion-header-text-transform);letter-spacing:var(--gog-accordion-letter-spacing, var(--gog-accordion-size-letter-spacing, var(--gog-accordion-lg-letter-spacing)));font-size:var(--gog-accordion-font-size, var(--gog-accordion-size-font-size, var(--gog-accordion-lg-font-size)));transition:color var(--gog-accordion-transition-duration) var(--gog-easing),background-color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header:hover{color:var(--gog-accordion-accent-color);background-color:var(--gog-accordion-hover-bg)}.gog-accordion__header:focus-visible{outline:var(--gog-accordion-focus-ring-width) solid var(--gog-accordion-hover-ring);outline-offset:calc(var(--gog-accordion-focus-ring-width) * -1)}.gog-accordion__header--open{color:var(--gog-accordion-accent-color)}.gog-accordion__title{flex:1}.gog-accordion__header-content{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:var(--gog-accordion-content-gap, var(--gog-accordion-size-content-gap, var(--gog-accordion-lg-content-gap)));min-width:0}.gog-accordion__chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--gog-accordion-chevron-size, var(--gog-accordion-size-chevron-size, var(--gog-accordion-lg-chevron-size)));height:var(--gog-accordion-chevron-size, var(--gog-accordion-size-chevron-size, var(--gog-accordion-lg-chevron-size)));font-size:var(--gog-accordion-chevron-font-size, var(--gog-accordion-size-chevron-font-size, var(--gog-accordion-lg-chevron-font-size)));color:var(--gog-accordion-border-color);transition:color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header--open .gog-accordion__chevron{color:var(--gog-accordion-accent-color)}.gog-accordion__chevron--auto-rotate{transition:transform var(--gog-accordion-chevron-transition-duration) var(--gog-easing),color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header--open .gog-accordion__chevron--auto-rotate{transform:rotate(180deg)}.gog-accordion__body{display:grid;grid-template-rows:0fr;opacity:0;overflow:hidden;border-top:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color);transition:grid-template-rows var(--gog-accordion-body-transition-duration) var(--gog-easing),opacity var(--gog-accordion-body-transition-duration) var(--gog-easing)}.gog-accordion__body--open{grid-template-rows:1fr;opacity:1}.gog-accordion__body-inner{min-height:0;overflow:hidden;border-bottom-left-radius:var(--gog-accordion-body-radius);border-bottom-right-radius:var(--gog-accordion-body-radius);padding:0 var(--gog-accordion-padding-x, var(--gog-accordion-size-padding-x, var(--gog-accordion-lg-padding-x)));background:var(--gog-accordion-body-bg);color:var(--gog-accordion-body-color);font-family:var(--gog-accordion-body-font-family);font-size:var(--gog-accordion-body-font-size, var(--gog-accordion-size-body-font-size, var(--gog-accordion-lg-body-font-size)));line-height:var(--gog-accordion-size-body-line-height, var(--gog-accordion-lg-body-line-height));transform:translateY(var(--gog-accordion-body-lift));transition:transform var(--gog-accordion-body-transition-duration) var(--gog-easing),padding var(--gog-accordion-body-transition-duration) var(--gog-easing)}.gog-accordion__body--open .gog-accordion__body-inner{padding-top:var(--gog-accordion-body-padding-top, var(--gog-accordion-size-body-padding-top, var(--gog-accordion-lg-body-padding-top)));padding-bottom:var(--gog-accordion-body-padding-bottom, var(--gog-accordion-size-body-padding-bottom, var(--gog-accordion-lg-body-padding-bottom)));transform:translateY(0)}.gog-accordion--slg{--gog-accordion-size-padding-y: var(--gog-accordion-slg-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-slg-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-slg-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-slg-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-slg-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-slg-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-slg-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-slg-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-slg-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-slg-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-slg-chevron-font-size)}.gog-accordion--md{--gog-accordion-size-padding-y: var(--gog-accordion-md-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-md-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-md-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-md-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-md-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-md-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-md-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-md-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-md-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-md-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-md-chevron-font-size)}.gog-accordion--sm{--gog-accordion-size-padding-y: var(--gog-accordion-sm-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-sm-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-sm-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-sm-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-sm-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-sm-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-sm-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-sm-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-sm-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-sm-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-sm-chevron-font-size)}.gog-accordion--xsm{--gog-accordion-size-padding-y: var(--gog-accordion-xsm-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-xsm-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-xsm-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-xsm-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-xsm-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-xsm-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-xsm-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-xsm-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-xsm-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-xsm-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-xsm-chevron-font-size)}.gog-accordion__header--skeleton{cursor:default;pointer-events:none}@media(prefers-reduced-motion:reduce){.gog-accordion__header,.gog-accordion__chevron,.gog-accordion__body,.gog-accordion__body-inner{transition:none}}\n"], dependencies: [{ 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: SkeletonComponent, selector: "gog-skeleton", inputs: ["shape", "size", "animation", "width", "height", "lines", "rounded", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
753
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AccordionComponent, isStandalone: true, selector: "gog-accordion", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, expandFirst: { classPropertyName: "expandFirst", publicName: "expandFirst", isSignal: true, isRequired: false, transformFunction: null }, multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, skeletonCount: { classPropertyName: "skeletonCount", publicName: "skeletonCount", isSignal: true, isRequired: false, transformFunction: null }, showChevron: { classPropertyName: "showChevron", publicName: "showChevron", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null }, openIds: { classPropertyName: "openIds", publicName: "openIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openIds: "openIdsChange", gogToggle: "gogToggle" }, host: { properties: { "attr.aria-busy": "loading() ? \"true\" : null" }, classAttribute: "gog-accordion-host" }, queries: [{ propertyName: "headerTpl", first: true, predicate: GogAccordionHeaderDirective, descendants: true, isSignal: true }, { propertyName: "chevronTpl", first: true, predicate: GogAccordionChevronDirective, descendants: true, isSignal: true }, { propertyName: "contentTpl", first: true, predicate: GogAccordionContentDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n [class.gog-accordion--loading]=\"loading()\"\r\n class=\"gog-accordion gog-contained-layout\"\r\n [class]=\"sizeClass()\"\r\n>\r\n @if (loading()) {\r\n @for (row of skeletonRows(); track row) {\r\n <div class=\"gog-accordion__item gog-accordion__item--skeleton\">\r\n <div class=\"gog-accordion__header gog-accordion__header--skeleton\">\r\n <gog-skeleton shape=\"text\" [size]=\"size()\" [width]=\"skeletonWidth(row)\" />\r\n <!--\r\n The chevron gets a placeholder too, so the row's silhouette is the one that arrives.\r\n Without it the right-hand side is empty while loading and the chevron appears out of\r\n nowhere \u2014 the shape-matching placeholder failing at the one thing it is for.\r\n -->\r\n @if (showChevron()) {\r\n <span class=\"gog-accordion__chevron\" aria-hidden=\"true\">\r\n <!--\r\n `width=\"100%\"` rather than `[size]`: a skeleton's `size` is its *text* line\r\n height, so a circle given one came out 18px wide and 64px tall and streaked down\r\n the row. A circle takes its diameter from `width` and keeps itself round, so\r\n filling the chevron's own box is what matches it.\r\n -->\r\n <gog-skeleton shape=\"circle\" width=\"100%\" />\r\n </span>\r\n }\r\n </div>\r\n </div>\r\n }\r\n } @else {\r\n @for (item of items(); track item.id) {\r\n <div\r\n class=\"gog-accordion__item\"\r\n [class.gog-accordion__item--open]=\"isOpen(item.id)\"\r\n [class.gog-accordion__item--disabled]=\"item.disabled\"\r\n >\r\n <ng-template #headerButton>\r\n <button\r\n [id]=\"uid + '-btn-' + item.id\"\r\n class=\"gog-accordion__header\"\r\n [class.gog-accordion__header--chevronless]=\"!showChevron()\"\r\n [class.gog-accordion__header--open]=\"isOpen(item.id)\"\r\n [attr.aria-expanded]=\"isOpen(item.id)\"\r\n [attr.aria-controls]=\"uid + '-body-' + item.id\"\r\n [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\r\n [disabled]=\"item.disabled || null\"\r\n (click)=\"toggle(item)\"\r\n (keydown)=\"onHeaderKeydown($event)\"\r\n type=\"button\"\r\n >\r\n <span class=\"gog-accordion__header-content\">\r\n @if (headerTpl(); as tpl) {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n tpl.templateRef;\r\n context: { $implicit: item, open: isOpen(item.id) }\r\n \"\r\n />\r\n } @else {\r\n <span class=\"gog-accordion__title\">{{ item.title }}</span>\r\n }\r\n </span>\r\n @if (showChevron()) {\r\n <span\r\n class=\"gog-accordion__chevron\"\r\n [class.gog-accordion__chevron--auto-rotate]=\"!chevronTpl()\"\r\n aria-hidden=\"true\"\r\n >\r\n @if (chevronTpl(); as tpl) {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n tpl.templateRef;\r\n context: { $implicit: item, open: isOpen(item.id) }\r\n \"\r\n />\r\n } @else {\r\n <gog-icon name=\"chevron-down\" />\r\n }\r\n </span>\r\n }\r\n </button>\r\n </ng-template>\r\n\r\n @if (headingLevel(); as level) {\r\n <div role=\"heading\" [attr.aria-level]=\"level\" class=\"gog-accordion__heading\">\r\n <ng-container [ngTemplateOutlet]=\"headerButton\" />\r\n </div>\r\n } @else {\r\n <ng-container [ngTemplateOutlet]=\"headerButton\" />\r\n }\r\n\r\n <div\r\n [id]=\"uid + '-body-' + item.id\"\r\n class=\"gog-accordion__body\"\r\n [class.gog-accordion__body--open]=\"isOpen(item.id)\"\r\n role=\"region\"\r\n [attr.aria-labelledby]=\"uid + '-btn-' + item.id\"\r\n [attr.aria-hidden]=\"!isOpen(item.id)\"\r\n [attr.inert]=\"!isOpen(item.id) ? '' : null\"\r\n >\r\n <div class=\"gog-accordion__body-inner\">\r\n @if (contentTpl(); as tpl) {\r\n <ng-container *ngTemplateOutlet=\"tpl.templateRef; context: { $implicit: item }\" />\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.gog-accordion{display:flex;flex-direction:column;width:100%}.gog-accordion__item{border-bottom:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color)}.gog-accordion__item:first-child{border-top:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color);border-top-left-radius:var(--gog-accordion-radius);border-top-right-radius:var(--gog-accordion-radius)}.gog-accordion__item:last-child{border-bottom-left-radius:var(--gog-accordion-radius);border-bottom-right-radius:var(--gog-accordion-radius);overflow:hidden}.gog-accordion__item--disabled .gog-accordion__header{cursor:not-allowed;opacity:var(--gog-accordion-disabled-opacity)}.gog-accordion__item--disabled .gog-accordion__header:hover{color:var(--gog-accordion-text-color);background-color:var(--gog-accordion-header-bg)}.gog-accordion__heading{display:contents}.gog-accordion__header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--gog-accordion-padding-y, var(--gog-accordion-size-padding-y, var(--gog-accordion-lg-padding-y))) var(--gog-accordion-padding-x, var(--gog-accordion-size-padding-x, var(--gog-accordion-lg-padding-x)));gap:var(--gog-accordion-header-gap);background:var(--gog-accordion-header-bg);border:none;color:var(--gog-accordion-text-color);text-align:start;cursor:pointer;font-family:var(--gog-accordion-font-family);text-transform:var(--gog-accordion-header-text-transform);letter-spacing:var(--gog-accordion-letter-spacing, var(--gog-accordion-size-letter-spacing, var(--gog-accordion-lg-letter-spacing)));font-size:var(--gog-accordion-font-size, var(--gog-accordion-size-font-size, var(--gog-accordion-lg-font-size)));transition:color var(--gog-accordion-transition-duration) var(--gog-easing),background-color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header:hover{color:var(--gog-accordion-accent-color);background-color:var(--gog-accordion-hover-bg)}.gog-accordion__header:focus-visible{outline:var(--gog-accordion-focus-ring-width) solid var(--gog-accordion-hover-ring);outline-offset:calc(var(--gog-accordion-focus-ring-width) * -1)}.gog-accordion__header--open{color:var(--gog-accordion-accent-color)}.gog-accordion__title{flex:1}.gog-accordion__header-content{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:var(--gog-accordion-content-gap, var(--gog-accordion-size-content-gap, var(--gog-accordion-lg-content-gap)));min-width:0}.gog-accordion__chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--gog-accordion-chevron-size, var(--gog-accordion-size-chevron-size, var(--gog-accordion-lg-chevron-size)));height:var(--gog-accordion-chevron-size, var(--gog-accordion-size-chevron-size, var(--gog-accordion-lg-chevron-size)));font-size:var(--gog-accordion-chevron-font-size, var(--gog-accordion-size-chevron-font-size, var(--gog-accordion-lg-chevron-font-size)));color:var(--gog-accordion-border-color);transition:color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header--open .gog-accordion__chevron{color:var(--gog-accordion-accent-color)}.gog-accordion__chevron--auto-rotate{transition:transform var(--gog-accordion-chevron-transition-duration) var(--gog-easing),color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header--open .gog-accordion__chevron--auto-rotate{transform:rotate(180deg)}.gog-accordion__body{display:grid;grid-template-rows:0fr;opacity:0;overflow:hidden;border-top:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color);transition:grid-template-rows var(--gog-accordion-body-transition-duration) var(--gog-easing),opacity var(--gog-accordion-body-transition-duration) var(--gog-easing)}.gog-accordion__body--open{grid-template-rows:1fr;opacity:1}.gog-accordion__body-inner{min-height:0;overflow:hidden;border-bottom-left-radius:var(--gog-accordion-body-radius);border-bottom-right-radius:var(--gog-accordion-body-radius);padding:0 var(--gog-accordion-padding-x, var(--gog-accordion-size-padding-x, var(--gog-accordion-lg-padding-x)));background:var(--gog-accordion-body-bg);color:var(--gog-accordion-body-color);font-family:var(--gog-accordion-body-font-family);font-size:var(--gog-accordion-body-font-size, var(--gog-accordion-size-body-font-size, var(--gog-accordion-lg-body-font-size)));line-height:var(--gog-accordion-size-body-line-height, var(--gog-accordion-lg-body-line-height));transform:translateY(var(--gog-accordion-body-lift));transition:transform var(--gog-accordion-body-transition-duration) var(--gog-easing),padding var(--gog-accordion-body-transition-duration) var(--gog-easing)}.gog-accordion__body--open .gog-accordion__body-inner{padding-top:var(--gog-accordion-body-padding-top, var(--gog-accordion-size-body-padding-top, var(--gog-accordion-lg-body-padding-top)));padding-bottom:var(--gog-accordion-body-padding-bottom, var(--gog-accordion-size-body-padding-bottom, var(--gog-accordion-lg-body-padding-bottom)));transform:translateY(0)}.gog-accordion--slg{--gog-accordion-size-padding-y: var(--gog-accordion-slg-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-slg-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-slg-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-slg-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-slg-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-slg-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-slg-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-slg-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-slg-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-slg-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-slg-chevron-font-size)}.gog-accordion--md{--gog-accordion-size-padding-y: var(--gog-accordion-md-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-md-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-md-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-md-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-md-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-md-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-md-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-md-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-md-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-md-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-md-chevron-font-size)}.gog-accordion--sm{--gog-accordion-size-padding-y: var(--gog-accordion-sm-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-sm-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-sm-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-sm-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-sm-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-sm-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-sm-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-sm-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-sm-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-sm-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-sm-chevron-font-size)}.gog-accordion--xsm{--gog-accordion-size-padding-y: var(--gog-accordion-xsm-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-xsm-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-xsm-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-xsm-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-xsm-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-xsm-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-xsm-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-xsm-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-xsm-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-xsm-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-xsm-chevron-font-size)}.gog-accordion__header--skeleton{cursor:default;pointer-events:none}@media(prefers-reduced-motion:reduce){.gog-accordion__header,.gog-accordion__chevron,.gog-accordion__body,.gog-accordion__body-inner{transition:none}}\n"], dependencies: [{ 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: SkeletonComponent, selector: "gog-skeleton", inputs: ["shape", "size", "animation", "width", "height", "lines", "rounded", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
741
754
  }
742
755
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AccordionComponent, decorators: [{
743
756
  type: Component,
744
757
  args: [{ selector: 'gog-accordion', imports: [NgTemplateOutlet, IconComponent, SkeletonComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
745
758
  class: 'gog-accordion-host',
746
- }, template: "<div\r\n [class.gog-accordion--loading]=\"loading()\"\r\n class=\"gog-accordion gog-contained-layout\"\r\n [class]=\"sizeClass()\"\r\n>\r\n @if (loading()) {\r\n @for (row of skeletonRows(); track row) {\r\n <div class=\"gog-accordion__item gog-accordion__item--skeleton\">\r\n <div class=\"gog-accordion__header gog-accordion__header--skeleton\">\r\n <gog-skeleton shape=\"text\" [size]=\"size()\" width=\"55%\" />\r\n </div>\r\n </div>\r\n }\r\n } @else {\r\n @for (item of items(); track item.id) {\r\n <div\r\n class=\"gog-accordion__item\"\r\n [class.gog-accordion__item--open]=\"isOpen(item.id)\"\r\n [class.gog-accordion__item--disabled]=\"item.disabled\"\r\n >\r\n <ng-template #headerButton>\r\n <button\r\n [id]=\"uid + '-btn-' + item.id\"\r\n class=\"gog-accordion__header\"\r\n [class.gog-accordion__header--chevronless]=\"!showChevron()\"\r\n [class.gog-accordion__header--open]=\"isOpen(item.id)\"\r\n [attr.aria-expanded]=\"isOpen(item.id)\"\r\n [attr.aria-controls]=\"uid + '-body-' + item.id\"\r\n [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\r\n [disabled]=\"item.disabled || null\"\r\n (click)=\"toggle(item)\"\r\n (keydown)=\"onHeaderKeydown($event)\"\r\n type=\"button\"\r\n >\r\n <span class=\"gog-accordion__header-content\">\r\n @if (headerTpl(); as tpl) {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n tpl.templateRef;\r\n context: { $implicit: item, open: isOpen(item.id) }\r\n \"\r\n />\r\n } @else {\r\n <span class=\"gog-accordion__title\">{{ item.title }}</span>\r\n }\r\n </span>\r\n @if (showChevron()) {\r\n <span\r\n class=\"gog-accordion__chevron\"\r\n [class.gog-accordion__chevron--auto-rotate]=\"!chevronTpl()\"\r\n aria-hidden=\"true\"\r\n >\r\n @if (chevronTpl(); as tpl) {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n tpl.templateRef;\r\n context: { $implicit: item, open: isOpen(item.id) }\r\n \"\r\n />\r\n } @else {\r\n <gog-icon name=\"chevron-down\" />\r\n }\r\n </span>\r\n }\r\n </button>\r\n </ng-template>\r\n\r\n @if (headingLevel(); as level) {\r\n <div role=\"heading\" [attr.aria-level]=\"level\" class=\"gog-accordion__heading\">\r\n <ng-container [ngTemplateOutlet]=\"headerButton\" />\r\n </div>\r\n } @else {\r\n <ng-container [ngTemplateOutlet]=\"headerButton\" />\r\n }\r\n\r\n <div\r\n [id]=\"uid + '-body-' + item.id\"\r\n class=\"gog-accordion__body\"\r\n [class.gog-accordion__body--open]=\"isOpen(item.id)\"\r\n role=\"region\"\r\n [attr.aria-labelledby]=\"uid + '-btn-' + item.id\"\r\n [attr.aria-hidden]=\"!isOpen(item.id)\"\r\n [attr.inert]=\"!isOpen(item.id) ? '' : null\"\r\n >\r\n <div class=\"gog-accordion__body-inner\">\r\n @if (contentTpl(); as tpl) {\r\n <ng-container *ngTemplateOutlet=\"tpl.templateRef; context: { $implicit: item }\" />\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.gog-accordion{display:flex;flex-direction:column;width:100%}.gog-accordion__item{border-bottom:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color)}.gog-accordion__item:first-child{border-top:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color);border-top-left-radius:var(--gog-accordion-radius);border-top-right-radius:var(--gog-accordion-radius)}.gog-accordion__item:last-child{border-bottom-left-radius:var(--gog-accordion-radius);border-bottom-right-radius:var(--gog-accordion-radius);overflow:hidden}.gog-accordion__item--disabled .gog-accordion__header{cursor:not-allowed;opacity:var(--gog-accordion-disabled-opacity)}.gog-accordion__item--disabled .gog-accordion__header:hover{color:var(--gog-accordion-text-color);background-color:var(--gog-accordion-header-bg)}.gog-accordion__heading{display:contents}.gog-accordion__header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--gog-accordion-padding-y, var(--gog-accordion-size-padding-y, var(--gog-accordion-lg-padding-y))) var(--gog-accordion-padding-x, var(--gog-accordion-size-padding-x, var(--gog-accordion-lg-padding-x)));gap:var(--gog-accordion-header-gap);background:var(--gog-accordion-header-bg);border:none;color:var(--gog-accordion-text-color);text-align:start;cursor:pointer;font-family:var(--gog-accordion-font-family);text-transform:var(--gog-accordion-header-text-transform);letter-spacing:var(--gog-accordion-letter-spacing, var(--gog-accordion-size-letter-spacing, var(--gog-accordion-lg-letter-spacing)));font-size:var(--gog-accordion-font-size, var(--gog-accordion-size-font-size, var(--gog-accordion-lg-font-size)));transition:color var(--gog-accordion-transition-duration) var(--gog-easing),background-color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header:hover{color:var(--gog-accordion-accent-color);background-color:var(--gog-accordion-hover-bg)}.gog-accordion__header:focus-visible{outline:var(--gog-accordion-focus-ring-width) solid var(--gog-accordion-hover-ring);outline-offset:calc(var(--gog-accordion-focus-ring-width) * -1)}.gog-accordion__header--open{color:var(--gog-accordion-accent-color)}.gog-accordion__title{flex:1}.gog-accordion__header-content{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:var(--gog-accordion-content-gap, var(--gog-accordion-size-content-gap, var(--gog-accordion-lg-content-gap)));min-width:0}.gog-accordion__chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--gog-accordion-chevron-size, var(--gog-accordion-size-chevron-size, var(--gog-accordion-lg-chevron-size)));height:var(--gog-accordion-chevron-size, var(--gog-accordion-size-chevron-size, var(--gog-accordion-lg-chevron-size)));font-size:var(--gog-accordion-chevron-font-size, var(--gog-accordion-size-chevron-font-size, var(--gog-accordion-lg-chevron-font-size)));color:var(--gog-accordion-border-color);transition:color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header--open .gog-accordion__chevron{color:var(--gog-accordion-accent-color)}.gog-accordion__chevron--auto-rotate{transition:transform var(--gog-accordion-chevron-transition-duration) var(--gog-easing),color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header--open .gog-accordion__chevron--auto-rotate{transform:rotate(180deg)}.gog-accordion__body{display:grid;grid-template-rows:0fr;opacity:0;overflow:hidden;border-top:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color);transition:grid-template-rows var(--gog-accordion-body-transition-duration) var(--gog-easing),opacity var(--gog-accordion-body-transition-duration) var(--gog-easing)}.gog-accordion__body--open{grid-template-rows:1fr;opacity:1}.gog-accordion__body-inner{min-height:0;overflow:hidden;border-bottom-left-radius:var(--gog-accordion-body-radius);border-bottom-right-radius:var(--gog-accordion-body-radius);padding:0 var(--gog-accordion-padding-x, var(--gog-accordion-size-padding-x, var(--gog-accordion-lg-padding-x)));background:var(--gog-accordion-body-bg);color:var(--gog-accordion-body-color);font-family:var(--gog-accordion-body-font-family);font-size:var(--gog-accordion-body-font-size, var(--gog-accordion-size-body-font-size, var(--gog-accordion-lg-body-font-size)));line-height:var(--gog-accordion-size-body-line-height, var(--gog-accordion-lg-body-line-height));transform:translateY(var(--gog-accordion-body-lift));transition:transform var(--gog-accordion-body-transition-duration) var(--gog-easing),padding var(--gog-accordion-body-transition-duration) var(--gog-easing)}.gog-accordion__body--open .gog-accordion__body-inner{padding-top:var(--gog-accordion-body-padding-top, var(--gog-accordion-size-body-padding-top, var(--gog-accordion-lg-body-padding-top)));padding-bottom:var(--gog-accordion-body-padding-bottom, var(--gog-accordion-size-body-padding-bottom, var(--gog-accordion-lg-body-padding-bottom)));transform:translateY(0)}.gog-accordion--slg{--gog-accordion-size-padding-y: var(--gog-accordion-slg-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-slg-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-slg-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-slg-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-slg-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-slg-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-slg-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-slg-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-slg-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-slg-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-slg-chevron-font-size)}.gog-accordion--md{--gog-accordion-size-padding-y: var(--gog-accordion-md-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-md-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-md-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-md-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-md-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-md-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-md-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-md-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-md-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-md-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-md-chevron-font-size)}.gog-accordion--sm{--gog-accordion-size-padding-y: var(--gog-accordion-sm-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-sm-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-sm-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-sm-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-sm-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-sm-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-sm-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-sm-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-sm-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-sm-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-sm-chevron-font-size)}.gog-accordion--xsm{--gog-accordion-size-padding-y: var(--gog-accordion-xsm-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-xsm-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-xsm-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-xsm-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-xsm-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-xsm-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-xsm-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-xsm-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-xsm-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-xsm-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-xsm-chevron-font-size)}.gog-accordion__header--skeleton{cursor:default;pointer-events:none}@media(prefers-reduced-motion:reduce){.gog-accordion__header,.gog-accordion__chevron,.gog-accordion__body,.gog-accordion__body-inner{transition:none}}\n"] }]
759
+ /*
760
+ * The skeleton rows are `aria-hidden`, and the real headers are not rendered while loading —
761
+ * so without this the whole component is simply *empty* to a screen reader, which reads as
762
+ * "there is nothing here" rather than "this is coming". `gog-button` and `gog-spinner-overlay`
763
+ * already do this; see the loading-state rule in `api-design.instructions.md`.
764
+ */
765
+ '[attr.aria-busy]': 'loading() ? "true" : null',
766
+ }, template: "<div\r\n [class.gog-accordion--loading]=\"loading()\"\r\n class=\"gog-accordion gog-contained-layout\"\r\n [class]=\"sizeClass()\"\r\n>\r\n @if (loading()) {\r\n @for (row of skeletonRows(); track row) {\r\n <div class=\"gog-accordion__item gog-accordion__item--skeleton\">\r\n <div class=\"gog-accordion__header gog-accordion__header--skeleton\">\r\n <gog-skeleton shape=\"text\" [size]=\"size()\" [width]=\"skeletonWidth(row)\" />\r\n <!--\r\n The chevron gets a placeholder too, so the row's silhouette is the one that arrives.\r\n Without it the right-hand side is empty while loading and the chevron appears out of\r\n nowhere \u2014 the shape-matching placeholder failing at the one thing it is for.\r\n -->\r\n @if (showChevron()) {\r\n <span class=\"gog-accordion__chevron\" aria-hidden=\"true\">\r\n <!--\r\n `width=\"100%\"` rather than `[size]`: a skeleton's `size` is its *text* line\r\n height, so a circle given one came out 18px wide and 64px tall and streaked down\r\n the row. A circle takes its diameter from `width` and keeps itself round, so\r\n filling the chevron's own box is what matches it.\r\n -->\r\n <gog-skeleton shape=\"circle\" width=\"100%\" />\r\n </span>\r\n }\r\n </div>\r\n </div>\r\n }\r\n } @else {\r\n @for (item of items(); track item.id) {\r\n <div\r\n class=\"gog-accordion__item\"\r\n [class.gog-accordion__item--open]=\"isOpen(item.id)\"\r\n [class.gog-accordion__item--disabled]=\"item.disabled\"\r\n >\r\n <ng-template #headerButton>\r\n <button\r\n [id]=\"uid + '-btn-' + item.id\"\r\n class=\"gog-accordion__header\"\r\n [class.gog-accordion__header--chevronless]=\"!showChevron()\"\r\n [class.gog-accordion__header--open]=\"isOpen(item.id)\"\r\n [attr.aria-expanded]=\"isOpen(item.id)\"\r\n [attr.aria-controls]=\"uid + '-body-' + item.id\"\r\n [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\r\n [disabled]=\"item.disabled || null\"\r\n (click)=\"toggle(item)\"\r\n (keydown)=\"onHeaderKeydown($event)\"\r\n type=\"button\"\r\n >\r\n <span class=\"gog-accordion__header-content\">\r\n @if (headerTpl(); as tpl) {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n tpl.templateRef;\r\n context: { $implicit: item, open: isOpen(item.id) }\r\n \"\r\n />\r\n } @else {\r\n <span class=\"gog-accordion__title\">{{ item.title }}</span>\r\n }\r\n </span>\r\n @if (showChevron()) {\r\n <span\r\n class=\"gog-accordion__chevron\"\r\n [class.gog-accordion__chevron--auto-rotate]=\"!chevronTpl()\"\r\n aria-hidden=\"true\"\r\n >\r\n @if (chevronTpl(); as tpl) {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n tpl.templateRef;\r\n context: { $implicit: item, open: isOpen(item.id) }\r\n \"\r\n />\r\n } @else {\r\n <gog-icon name=\"chevron-down\" />\r\n }\r\n </span>\r\n }\r\n </button>\r\n </ng-template>\r\n\r\n @if (headingLevel(); as level) {\r\n <div role=\"heading\" [attr.aria-level]=\"level\" class=\"gog-accordion__heading\">\r\n <ng-container [ngTemplateOutlet]=\"headerButton\" />\r\n </div>\r\n } @else {\r\n <ng-container [ngTemplateOutlet]=\"headerButton\" />\r\n }\r\n\r\n <div\r\n [id]=\"uid + '-body-' + item.id\"\r\n class=\"gog-accordion__body\"\r\n [class.gog-accordion__body--open]=\"isOpen(item.id)\"\r\n role=\"region\"\r\n [attr.aria-labelledby]=\"uid + '-btn-' + item.id\"\r\n [attr.aria-hidden]=\"!isOpen(item.id)\"\r\n [attr.inert]=\"!isOpen(item.id) ? '' : null\"\r\n >\r\n <div class=\"gog-accordion__body-inner\">\r\n @if (contentTpl(); as tpl) {\r\n <ng-container *ngTemplateOutlet=\"tpl.templateRef; context: { $implicit: item }\" />\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.gog-accordion{display:flex;flex-direction:column;width:100%}.gog-accordion__item{border-bottom:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color)}.gog-accordion__item:first-child{border-top:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color);border-top-left-radius:var(--gog-accordion-radius);border-top-right-radius:var(--gog-accordion-radius)}.gog-accordion__item:last-child{border-bottom-left-radius:var(--gog-accordion-radius);border-bottom-right-radius:var(--gog-accordion-radius);overflow:hidden}.gog-accordion__item--disabled .gog-accordion__header{cursor:not-allowed;opacity:var(--gog-accordion-disabled-opacity)}.gog-accordion__item--disabled .gog-accordion__header:hover{color:var(--gog-accordion-text-color);background-color:var(--gog-accordion-header-bg)}.gog-accordion__heading{display:contents}.gog-accordion__header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--gog-accordion-padding-y, var(--gog-accordion-size-padding-y, var(--gog-accordion-lg-padding-y))) var(--gog-accordion-padding-x, var(--gog-accordion-size-padding-x, var(--gog-accordion-lg-padding-x)));gap:var(--gog-accordion-header-gap);background:var(--gog-accordion-header-bg);border:none;color:var(--gog-accordion-text-color);text-align:start;cursor:pointer;font-family:var(--gog-accordion-font-family);text-transform:var(--gog-accordion-header-text-transform);letter-spacing:var(--gog-accordion-letter-spacing, var(--gog-accordion-size-letter-spacing, var(--gog-accordion-lg-letter-spacing)));font-size:var(--gog-accordion-font-size, var(--gog-accordion-size-font-size, var(--gog-accordion-lg-font-size)));transition:color var(--gog-accordion-transition-duration) var(--gog-easing),background-color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header:hover{color:var(--gog-accordion-accent-color);background-color:var(--gog-accordion-hover-bg)}.gog-accordion__header:focus-visible{outline:var(--gog-accordion-focus-ring-width) solid var(--gog-accordion-hover-ring);outline-offset:calc(var(--gog-accordion-focus-ring-width) * -1)}.gog-accordion__header--open{color:var(--gog-accordion-accent-color)}.gog-accordion__title{flex:1}.gog-accordion__header-content{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:var(--gog-accordion-content-gap, var(--gog-accordion-size-content-gap, var(--gog-accordion-lg-content-gap)));min-width:0}.gog-accordion__chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--gog-accordion-chevron-size, var(--gog-accordion-size-chevron-size, var(--gog-accordion-lg-chevron-size)));height:var(--gog-accordion-chevron-size, var(--gog-accordion-size-chevron-size, var(--gog-accordion-lg-chevron-size)));font-size:var(--gog-accordion-chevron-font-size, var(--gog-accordion-size-chevron-font-size, var(--gog-accordion-lg-chevron-font-size)));color:var(--gog-accordion-border-color);transition:color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header--open .gog-accordion__chevron{color:var(--gog-accordion-accent-color)}.gog-accordion__chevron--auto-rotate{transition:transform var(--gog-accordion-chevron-transition-duration) var(--gog-easing),color var(--gog-accordion-transition-duration) var(--gog-easing)}.gog-accordion__header--open .gog-accordion__chevron--auto-rotate{transform:rotate(180deg)}.gog-accordion__body{display:grid;grid-template-rows:0fr;opacity:0;overflow:hidden;border-top:var(--gog-accordion-border-width) var(--gog-accordion-border-style) var(--gog-accordion-border-color);transition:grid-template-rows var(--gog-accordion-body-transition-duration) var(--gog-easing),opacity var(--gog-accordion-body-transition-duration) var(--gog-easing)}.gog-accordion__body--open{grid-template-rows:1fr;opacity:1}.gog-accordion__body-inner{min-height:0;overflow:hidden;border-bottom-left-radius:var(--gog-accordion-body-radius);border-bottom-right-radius:var(--gog-accordion-body-radius);padding:0 var(--gog-accordion-padding-x, var(--gog-accordion-size-padding-x, var(--gog-accordion-lg-padding-x)));background:var(--gog-accordion-body-bg);color:var(--gog-accordion-body-color);font-family:var(--gog-accordion-body-font-family);font-size:var(--gog-accordion-body-font-size, var(--gog-accordion-size-body-font-size, var(--gog-accordion-lg-body-font-size)));line-height:var(--gog-accordion-size-body-line-height, var(--gog-accordion-lg-body-line-height));transform:translateY(var(--gog-accordion-body-lift));transition:transform var(--gog-accordion-body-transition-duration) var(--gog-easing),padding var(--gog-accordion-body-transition-duration) var(--gog-easing)}.gog-accordion__body--open .gog-accordion__body-inner{padding-top:var(--gog-accordion-body-padding-top, var(--gog-accordion-size-body-padding-top, var(--gog-accordion-lg-body-padding-top)));padding-bottom:var(--gog-accordion-body-padding-bottom, var(--gog-accordion-size-body-padding-bottom, var(--gog-accordion-lg-body-padding-bottom)));transform:translateY(0)}.gog-accordion--slg{--gog-accordion-size-padding-y: var(--gog-accordion-slg-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-slg-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-slg-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-slg-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-slg-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-slg-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-slg-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-slg-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-slg-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-slg-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-slg-chevron-font-size)}.gog-accordion--md{--gog-accordion-size-padding-y: var(--gog-accordion-md-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-md-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-md-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-md-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-md-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-md-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-md-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-md-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-md-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-md-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-md-chevron-font-size)}.gog-accordion--sm{--gog-accordion-size-padding-y: var(--gog-accordion-sm-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-sm-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-sm-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-sm-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-sm-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-sm-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-sm-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-sm-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-sm-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-sm-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-sm-chevron-font-size)}.gog-accordion--xsm{--gog-accordion-size-padding-y: var(--gog-accordion-xsm-padding-y);--gog-accordion-size-padding-x: var(--gog-accordion-xsm-padding-x);--gog-accordion-size-font-size: var(--gog-accordion-xsm-font-size);--gog-accordion-size-letter-spacing: var(--gog-accordion-xsm-letter-spacing);--gog-accordion-size-content-gap: var(--gog-accordion-xsm-content-gap);--gog-accordion-size-body-font-size: var(--gog-accordion-xsm-body-font-size);--gog-accordion-size-body-line-height: var(--gog-accordion-xsm-body-line-height);--gog-accordion-size-body-padding-top: var(--gog-accordion-xsm-body-padding-top);--gog-accordion-size-body-padding-bottom: var(--gog-accordion-xsm-body-padding-bottom);--gog-accordion-size-chevron-size: var(--gog-accordion-xsm-chevron-size);--gog-accordion-size-chevron-font-size: var(--gog-accordion-xsm-chevron-font-size)}.gog-accordion__header--skeleton{cursor:default;pointer-events:none}@media(prefers-reduced-motion:reduce){.gog-accordion__header,.gog-accordion__chevron,.gog-accordion__body,.gog-accordion__body-inner{transition:none}}\n"] }]
747
767
  }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], expandFirst: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandFirst", required: false }] }], multi: [{ type: i0.Input, args: [{ isSignal: true, alias: "multi", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], skeletonCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "skeletonCount", required: false }] }], showChevron: [{ type: i0.Input, args: [{ isSignal: true, alias: "showChevron", required: false }] }], headingLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingLevel", required: false }] }], openIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "openIds", required: false }] }, { type: i0.Output, args: ["openIdsChange"] }], gogToggle: [{ type: i0.Output, args: ["gogToggle"] }], headerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GogAccordionHeaderDirective), { isSignal: true }] }], chevronTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GogAccordionChevronDirective), { isSignal: true }] }], contentTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GogAccordionContentDirective), { isSignal: true }] }] } });
748
768
 
749
769
  /**
@@ -2388,15 +2408,29 @@ class AutocompleteComponent extends GogDropdownBase {
2388
2408
  return index >= 0 && index < this.visibleOptions().length ? this.optionId(index) : null;
2389
2409
  }, ...(ngDevMode ? [{ debugName: "activeOptionId" }] : /* istanbul ignore next */ []));
2390
2410
  searchTimer = null;
2411
+ /**
2412
+ * True from the first keystroke until the edit is resolved — by blur, Escape, picking an
2413
+ * option, or the clear button. Deliberately a plain field, not a signal: the sync effect below
2414
+ * must not re-run when it changes, only consult it.
2415
+ *
2416
+ * It exists because the effect used to use `!isOpen()` to mean "the user is not mid-edit", and
2417
+ * the panel closes for reasons that are not that. Backspacing the last character takes the text
2418
+ * under `minLength`, which closes the panel — so the effect fired and wrote the selected label
2419
+ * straight back into the field. Nine backspaces on "Amsterdam" left "Amsterdam": the field
2420
+ * could not be cleared at all while a selection was held.
2421
+ */
2422
+ editing = false;
2391
2423
  constructor() {
2392
2424
  super();
2393
2425
  this.ownDestroyRef.onDestroy(() => this.cancelPendingSearch());
2394
2426
  // Keep the field showing the selection whenever the user is not mid-edit. Covers a value
2395
2427
  // written by a form, a `[(value)]` set from outside, and the options arriving after the
2396
- // value did — which is the normal order for a server-backed control.
2428
+ // value did — which is the normal order for a server-backed control. All three change
2429
+ // `selectedLabel()`, which is the only signal this reads, so it runs when the *value* moves
2430
+ // and never merely because the panel opened or closed.
2397
2431
  effect(() => {
2398
2432
  const label = this.selectedLabel();
2399
- if (!this.isOpen() && label !== '') {
2433
+ if (label !== '' && !this.editing) {
2400
2434
  this.query.set(label);
2401
2435
  }
2402
2436
  });
@@ -2406,6 +2440,7 @@ class AutocompleteComponent extends GogDropdownBase {
2406
2440
  }
2407
2441
  onInput(event) {
2408
2442
  const text = event.target.value;
2443
+ this.editing = true;
2409
2444
  this.browsingAll.set(false);
2410
2445
  this.query.set(text);
2411
2446
  this.activeIndex.set(-1);
@@ -2468,6 +2503,7 @@ class AutocompleteComponent extends GogDropdownBase {
2468
2503
  return;
2469
2504
  event.preventDefault();
2470
2505
  this.close();
2506
+ this.editing = false;
2471
2507
  this.restoreSelectedText();
2472
2508
  return;
2473
2509
  }
@@ -2500,6 +2536,7 @@ class AutocompleteComponent extends GogDropdownBase {
2500
2536
  onInputBlur() {
2501
2537
  this.onFocusOut();
2502
2538
  this.close();
2539
+ this.editing = false;
2503
2540
  if (this.forceSelection()) {
2504
2541
  this.restoreSelectedText();
2505
2542
  }
@@ -2512,6 +2549,7 @@ class AutocompleteComponent extends GogDropdownBase {
2512
2549
  /** Clearing has to empty the *text* as well; the base only knows about the value. */
2513
2550
  clearValue(event) {
2514
2551
  super.clearValue(event);
2552
+ this.editing = false;
2515
2553
  this.query.set('');
2516
2554
  this.cancelPendingSearch();
2517
2555
  this.gogSearch.emit('');
@@ -2519,6 +2557,7 @@ class AutocompleteComponent extends GogDropdownBase {
2519
2557
  pick(option) {
2520
2558
  if (this.isOptionDisabled(option))
2521
2559
  return;
2560
+ this.editing = false;
2522
2561
  this.commitValue(this.valueOf(option));
2523
2562
  this.query.set(this.labelOf(option));
2524
2563
  this.close();
@@ -7816,8 +7855,34 @@ class TableComponent {
7816
7855
  loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
7817
7856
  /** Show vertical borders between columns */
7818
7857
  showColumnBorders = input(false, ...(ngDevMode ? [{ debugName: "showColumnBorders" }] : /* istanbul ignore next */ []));
7819
- /** Stick header row to the top of the viewport while scrolling */
7858
+ /**
7859
+ * Stick the header row to the top of the table's own scroll viewport.
7860
+ *
7861
+ * **Needs `maxHeight` to be reliable.** A sticky element resolves against its nearest scroll
7862
+ * container, and the table wraps itself in a `gog-scroll`; the moment that scroller starts
7863
+ * scrolling sideways it is a scroll container on both axes — CSS coerces `overflow-y: visible`
7864
+ * to `auto` beside a scrolling `overflow-x`, and `clip` to `hidden`, so there is no value that
7865
+ * scrolls one axis and stays out of the sticky chain on the other. Without `maxHeight` that
7866
+ * viewport is exactly as tall as its content and never scrolls vertically, so a header pinned
7867
+ * to it rides out of view along with everything else.
7868
+ *
7869
+ * With `maxHeight` set the viewport is the vertical scrollport, and the header pins to it.
7870
+ */
7820
7871
  stickyHeader = input(false, ...(ngDevMode ? [{ debugName: "stickyHeader" }] : /* istanbul ignore next */ []));
7872
+ /**
7873
+ * Caps the table's own scroll viewport, in any CSS length — `'420px'`, `'60vh'`. The table then
7874
+ * owns its vertical scrolling instead of growing to its content and letting an ancestor scroll
7875
+ * it, which is what makes `stickyHeader` work (see above).
7876
+ *
7877
+ * An input rather than a `--gog-table-*` token, even though the value only ever lands in CSS:
7878
+ * it also decides whether the internal scroller handles the vertical axis at all. A capped
7879
+ * viewport has to scroll vertically; an uncapped one must *not* become a scroll container,
7880
+ * because that would put every table in the sticky chain of its own descendants and take the
7881
+ * consumer's own scrolling region out of it. That is behaviour, not appearance.
7882
+ *
7883
+ * `null` leaves the table exactly as it was: viewport at content height, vertical axis inert.
7884
+ */
7885
+ maxHeight = input(null, ...(ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []));
7821
7886
  /** Row density: lg (default) / md (compact) / sm (dense) */
7822
7887
  size = input('lg', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
7823
7888
  /**
@@ -8092,7 +8157,7 @@ class TableComponent {
8092
8157
  /** CSS grid-area for the pagination block */
8093
8158
  paginatorGridArea = computed(() => this.paginatorPosition(), ...(ngDevMode ? [{ debugName: "paginatorGridArea" }] : /* istanbul ignore next */ []));
8094
8159
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
8095
- 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 }, showPageSizeSelect: { classPropertyName: "showPageSizeSelect", publicName: "showPageSizeSelect", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: true, isRequired: false, transformFunction: null }, interactiveRows: { classPropertyName: "interactiveRows", publicName: "interactiveRows", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null }, showSelectionColumn: { classPropertyName: "showSelectionColumn", publicName: "showSelectionColumn", 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 } }, outputs: { pageSize: "pageSizeChange", selection: "selectionChange", gogSortChange: "gogSortChange", gogPageChange: "gogPageChange", gogRowClick: "gogRowClick" }, host: { properties: { "style.display": "\"block\"", "style.width": "fullWidth() ? \"100%\" : \"fit-content\"" }, classAttribute: "gog-table-host" }, queries: [{ propertyName: "columns", predicate: GogColumn, 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 (hasSelectionColumn()) {\r\n <col class=\"gog-table__col--select\" />\r\n }\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 (hasSelectionColumn()) {\r\n <th class=\"gog-table__th gog-table__th--select\" scope=\"col\">\r\n <!--\r\n Only `multiple` gets a select-all: in `single` mode there is nothing to select\r\n all of, and a checkbox that can only ever check one row is a lie.\r\n -->\r\n @if (selectionMode() === 'multiple') {\r\n <gog-checkbox\r\n [checked]=\"allPageRowsSelected()\"\r\n [indeterminate]=\"somePageRowsSelected()\"\r\n [disabled]=\"loading() || visibleRows().length === 0\"\r\n [ariaLabel]=\"resolvedLabels().selectAllRows\"\r\n (checkedChange)=\"toggleAllOnPage($event)\"\r\n />\r\n }\r\n </th>\r\n }\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 rowKey(row); let i = $index) {\r\n <tr\r\n class=\"gog-table__row\"\r\n [class.gog-table__row--interactive]=\"interactiveRows()\"\r\n [class.gog-table__row--selected]=\"isSelected(row)\"\r\n [attr.tabindex]=\"interactiveRows() ? 0 : null\"\r\n [attr.aria-selected]=\"hasSelection() ? isSelected(row) : null\"\r\n (click)=\"emitRowClick(row, i, $event)\"\r\n (keydown)=\"onRowKeydown(row, i, $event)\"\r\n >\r\n @if (hasSelectionColumn()) {\r\n <td class=\"gog-table__td gog-table__td--select\">\r\n <!--\r\n `$event.stopPropagation()` so ticking the box does not also count as a row\r\n click: with `interactiveRows` those are two different intents, and firing both\r\n from one gesture is how a \"select\" ends up navigating away.\r\n -->\r\n <gog-checkbox\r\n [checked]=\"isSelected(row)\"\r\n [ariaLabel]=\"resolvedLabels().selectRow\"\r\n (click)=\"$event.stopPropagation()\"\r\n (checkedChange)=\"toggleRowSelection(row, $event)\"\r\n />\r\n </td>\r\n }\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 {{ resolvedLabels().total }}: {{ rowCount() }}\r\n </span>\r\n }\r\n\r\n @if (hasPagination()) {\r\n <!--\r\n `[(pageSize)]` straight through to the table's own model: the rows-per-page select\r\n writes back here, and a consumer binding `[(pageSize)]` on the table sees it. No\r\n intermediate signal, in either direction.\r\n -->\r\n <gog-paginator\r\n class=\"gog-table__pagination\"\r\n [style.grid-area]=\"paginatorGridArea()\"\r\n [(page)]=\"currentPage\"\r\n [(pageSize)]=\"pageSize\"\r\n [totalPages]=\"totalPages()\"\r\n [showPageSizeSelect]=\"showPageSizeSelect()\"\r\n [pageSizeOptions]=\"pageSizeOptions()\"\r\n rangeMode=\"ellipsis\"\r\n size=\"sm\"\r\n [ariaLabel]=\"resolvedLabels().pagination\"\r\n />\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.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:start;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--select,.gog-table__td--select{width:var(--gog-table-select-col-width);text-align:center}.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--interactive{cursor:pointer}.gog-table__row--interactive: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__row:hover{background-color:var(--gog-table-hover-bg)}.gog-table__row--selected,.gog-table__row--selected:hover{background-color:var(--gog-table-selected-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-inline-end: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:end}.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", "totalRecords", "pageSize", "showPageSizeSelect", "pageSizeOptions", "rangeMode", "visiblePages", "showFirstPage", "showLastPage", "siblingCount", "size", "disabled", "ariaLabel"], outputs: ["pageChange", "pageSizeChange"] }, { 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"] }, { kind: "component", type: CheckboxComponent, selector: "gog-checkbox", inputs: ["label", "ariaLabel", "size", "indeterminate", "disabled", "fullWidth", "checked"], outputs: ["checkedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
8160
+ 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 }, showPageSizeSelect: { classPropertyName: "showPageSizeSelect", publicName: "showPageSizeSelect", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: true, isRequired: false, transformFunction: null }, interactiveRows: { classPropertyName: "interactiveRows", publicName: "interactiveRows", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null }, showSelectionColumn: { classPropertyName: "showSelectionColumn", publicName: "showSelectionColumn", 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 }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageSize: "pageSizeChange", selection: "selectionChange", gogSortChange: "gogSortChange", gogPageChange: "gogPageChange", gogRowClick: "gogRowClick" }, host: { properties: { "style.display": "\"block\"", "style.width": "fullWidth() ? \"100%\" : \"fit-content\"" }, classAttribute: "gog-table-host" }, queries: [{ propertyName: "columns", predicate: GogColumn, isSignal: true }], ngImport: i0, template: "<div class=\"gog-table-wrapper gog-contained-layout\">\r\n <!--\r\n The vertical axis is enabled only when the table has been capped. Left on for an uncapped\r\n table, `gog-scroll` would make this viewport a scroll container on both axes, which puts it\r\n in the sticky chain of everything inside it and takes the consumer's own scrolling region\r\n out of it \u2014 measured: a header that used to pin to that region rode away by 147px.\r\n -->\r\n <gog-scroll\r\n [axis]=\"maxHeight() ? 'both' : 'horizontal'\"\r\n [style.max-height]=\"maxHeight()\"\r\n class=\"gog-table-scroll\"\r\n >\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 [class.gog-table--auto-layout]=\"!fullWidth()\"\r\n [style.width]=\"fullWidth() ? '100%' : 'fit-content'\"\r\n >\r\n <colgroup>\r\n @if (hasSelectionColumn()) {\r\n <col class=\"gog-table__col--select\" />\r\n }\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 (hasSelectionColumn()) {\r\n <th class=\"gog-table__th gog-table__th--select\" scope=\"col\">\r\n <!--\r\n Only `multiple` gets a select-all: in `single` mode there is nothing to select\r\n all of, and a checkbox that can only ever check one row is a lie.\r\n -->\r\n @if (selectionMode() === 'multiple') {\r\n <gog-checkbox\r\n [checked]=\"allPageRowsSelected()\"\r\n [indeterminate]=\"somePageRowsSelected()\"\r\n [disabled]=\"loading() || visibleRows().length === 0\"\r\n [ariaLabel]=\"resolvedLabels().selectAllRows\"\r\n (checkedChange)=\"toggleAllOnPage($event)\"\r\n />\r\n }\r\n </th>\r\n }\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 rowKey(row); let i = $index) {\r\n <tr\r\n class=\"gog-table__row\"\r\n [class.gog-table__row--interactive]=\"interactiveRows()\"\r\n [class.gog-table__row--selected]=\"isSelected(row)\"\r\n [attr.tabindex]=\"interactiveRows() ? 0 : null\"\r\n [attr.aria-selected]=\"hasSelection() ? isSelected(row) : null\"\r\n (click)=\"emitRowClick(row, i, $event)\"\r\n (keydown)=\"onRowKeydown(row, i, $event)\"\r\n >\r\n @if (hasSelectionColumn()) {\r\n <td class=\"gog-table__td gog-table__td--select\">\r\n <!--\r\n `$event.stopPropagation()` so ticking the box does not also count as a row\r\n click: with `interactiveRows` those are two different intents, and firing both\r\n from one gesture is how a \"select\" ends up navigating away.\r\n -->\r\n <gog-checkbox\r\n [checked]=\"isSelected(row)\"\r\n [ariaLabel]=\"resolvedLabels().selectRow\"\r\n (click)=\"$event.stopPropagation()\"\r\n (checkedChange)=\"toggleRowSelection(row, $event)\"\r\n />\r\n </td>\r\n }\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 {{ resolvedLabels().total }}: {{ rowCount() }}\r\n </span>\r\n }\r\n\r\n @if (hasPagination()) {\r\n <!--\r\n `[(pageSize)]` straight through to the table's own model: the rows-per-page select\r\n writes back here, and a consumer binding `[(pageSize)]` on the table sees it. No\r\n intermediate signal, in either direction.\r\n -->\r\n <gog-paginator\r\n class=\"gog-table__pagination\"\r\n [style.grid-area]=\"paginatorGridArea()\"\r\n [(page)]=\"currentPage\"\r\n [(pageSize)]=\"pageSize\"\r\n [totalPages]=\"totalPages()\"\r\n [showPageSizeSelect]=\"showPageSizeSelect()\"\r\n [pageSizeOptions]=\"pageSizeOptions()\"\r\n rangeMode=\"ellipsis\"\r\n size=\"sm\"\r\n [ariaLabel]=\"resolvedLabels().pagination\"\r\n />\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.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--auto-layout{table-layout:auto}.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:start;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--select,.gog-table__td--select{width:var(--gog-table-select-col-width);text-align:center}.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--interactive{cursor:pointer}.gog-table__row--interactive: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__row:hover{background-color:var(--gog-table-hover-bg)}.gog-table__row--selected,.gog-table__row--selected:hover{background-color:var(--gog-table-selected-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-inline-end: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:end}.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", "totalRecords", "pageSize", "showPageSizeSelect", "pageSizeOptions", "rangeMode", "visiblePages", "showFirstPage", "showLastPage", "siblingCount", "size", "disabled", "ariaLabel"], outputs: ["pageChange", "pageSizeChange"] }, { 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"] }, { kind: "component", type: CheckboxComponent, selector: "gog-checkbox", inputs: ["label", "ariaLabel", "size", "indeterminate", "disabled", "fullWidth", "checked"], outputs: ["checkedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
8096
8161
  }
8097
8162
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TableComponent, decorators: [{
8098
8163
  type: Component,
@@ -8107,8 +8172,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
8107
8172
  class: 'gog-table-host',
8108
8173
  '[style.display]': '"block"',
8109
8174
  '[style.width]': 'fullWidth() ? "100%" : "fit-content"',
8110
- }, 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 (hasSelectionColumn()) {\r\n <col class=\"gog-table__col--select\" />\r\n }\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 (hasSelectionColumn()) {\r\n <th class=\"gog-table__th gog-table__th--select\" scope=\"col\">\r\n <!--\r\n Only `multiple` gets a select-all: in `single` mode there is nothing to select\r\n all of, and a checkbox that can only ever check one row is a lie.\r\n -->\r\n @if (selectionMode() === 'multiple') {\r\n <gog-checkbox\r\n [checked]=\"allPageRowsSelected()\"\r\n [indeterminate]=\"somePageRowsSelected()\"\r\n [disabled]=\"loading() || visibleRows().length === 0\"\r\n [ariaLabel]=\"resolvedLabels().selectAllRows\"\r\n (checkedChange)=\"toggleAllOnPage($event)\"\r\n />\r\n }\r\n </th>\r\n }\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 rowKey(row); let i = $index) {\r\n <tr\r\n class=\"gog-table__row\"\r\n [class.gog-table__row--interactive]=\"interactiveRows()\"\r\n [class.gog-table__row--selected]=\"isSelected(row)\"\r\n [attr.tabindex]=\"interactiveRows() ? 0 : null\"\r\n [attr.aria-selected]=\"hasSelection() ? isSelected(row) : null\"\r\n (click)=\"emitRowClick(row, i, $event)\"\r\n (keydown)=\"onRowKeydown(row, i, $event)\"\r\n >\r\n @if (hasSelectionColumn()) {\r\n <td class=\"gog-table__td gog-table__td--select\">\r\n <!--\r\n `$event.stopPropagation()` so ticking the box does not also count as a row\r\n click: with `interactiveRows` those are two different intents, and firing both\r\n from one gesture is how a \"select\" ends up navigating away.\r\n -->\r\n <gog-checkbox\r\n [checked]=\"isSelected(row)\"\r\n [ariaLabel]=\"resolvedLabels().selectRow\"\r\n (click)=\"$event.stopPropagation()\"\r\n (checkedChange)=\"toggleRowSelection(row, $event)\"\r\n />\r\n </td>\r\n }\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 {{ resolvedLabels().total }}: {{ rowCount() }}\r\n </span>\r\n }\r\n\r\n @if (hasPagination()) {\r\n <!--\r\n `[(pageSize)]` straight through to the table's own model: the rows-per-page select\r\n writes back here, and a consumer binding `[(pageSize)]` on the table sees it. No\r\n intermediate signal, in either direction.\r\n -->\r\n <gog-paginator\r\n class=\"gog-table__pagination\"\r\n [style.grid-area]=\"paginatorGridArea()\"\r\n [(page)]=\"currentPage\"\r\n [(pageSize)]=\"pageSize\"\r\n [totalPages]=\"totalPages()\"\r\n [showPageSizeSelect]=\"showPageSizeSelect()\"\r\n [pageSizeOptions]=\"pageSizeOptions()\"\r\n rangeMode=\"ellipsis\"\r\n size=\"sm\"\r\n [ariaLabel]=\"resolvedLabels().pagination\"\r\n />\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.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:start;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--select,.gog-table__td--select{width:var(--gog-table-select-col-width);text-align:center}.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--interactive{cursor:pointer}.gog-table__row--interactive: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__row:hover{background-color:var(--gog-table-hover-bg)}.gog-table__row--selected,.gog-table__row--selected:hover{background-color:var(--gog-table-selected-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-inline-end: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:end}.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"] }]
8111
- }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], showPageSizeSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageSizeSelect", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], totalRecords: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalRecords", required: false }] }], interactiveRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactiveRows", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], showSelectionColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSelectionColumn", required: false }] }], showRowNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRowNumbers", required: false }] }], showTotal: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTotal", required: false }] }], emptyPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyPlaceholder", required: false }] }], paginatorPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginatorPosition", required: false }] }], totalPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPosition", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], showColumnBorders: [{ type: i0.Input, args: [{ isSignal: true, alias: "showColumnBorders", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], gogSortChange: [{ type: i0.Output, args: ["gogSortChange"] }], gogPageChange: [{ type: i0.Output, args: ["gogPageChange"] }], gogRowClick: [{ type: i0.Output, args: ["gogRowClick"] }], columns: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => GogColumn), { isSignal: true }] }] } });
8175
+ }, template: "<div class=\"gog-table-wrapper gog-contained-layout\">\r\n <!--\r\n The vertical axis is enabled only when the table has been capped. Left on for an uncapped\r\n table, `gog-scroll` would make this viewport a scroll container on both axes, which puts it\r\n in the sticky chain of everything inside it and takes the consumer's own scrolling region\r\n out of it \u2014 measured: a header that used to pin to that region rode away by 147px.\r\n -->\r\n <gog-scroll\r\n [axis]=\"maxHeight() ? 'both' : 'horizontal'\"\r\n [style.max-height]=\"maxHeight()\"\r\n class=\"gog-table-scroll\"\r\n >\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 [class.gog-table--auto-layout]=\"!fullWidth()\"\r\n [style.width]=\"fullWidth() ? '100%' : 'fit-content'\"\r\n >\r\n <colgroup>\r\n @if (hasSelectionColumn()) {\r\n <col class=\"gog-table__col--select\" />\r\n }\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 (hasSelectionColumn()) {\r\n <th class=\"gog-table__th gog-table__th--select\" scope=\"col\">\r\n <!--\r\n Only `multiple` gets a select-all: in `single` mode there is nothing to select\r\n all of, and a checkbox that can only ever check one row is a lie.\r\n -->\r\n @if (selectionMode() === 'multiple') {\r\n <gog-checkbox\r\n [checked]=\"allPageRowsSelected()\"\r\n [indeterminate]=\"somePageRowsSelected()\"\r\n [disabled]=\"loading() || visibleRows().length === 0\"\r\n [ariaLabel]=\"resolvedLabels().selectAllRows\"\r\n (checkedChange)=\"toggleAllOnPage($event)\"\r\n />\r\n }\r\n </th>\r\n }\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 rowKey(row); let i = $index) {\r\n <tr\r\n class=\"gog-table__row\"\r\n [class.gog-table__row--interactive]=\"interactiveRows()\"\r\n [class.gog-table__row--selected]=\"isSelected(row)\"\r\n [attr.tabindex]=\"interactiveRows() ? 0 : null\"\r\n [attr.aria-selected]=\"hasSelection() ? isSelected(row) : null\"\r\n (click)=\"emitRowClick(row, i, $event)\"\r\n (keydown)=\"onRowKeydown(row, i, $event)\"\r\n >\r\n @if (hasSelectionColumn()) {\r\n <td class=\"gog-table__td gog-table__td--select\">\r\n <!--\r\n `$event.stopPropagation()` so ticking the box does not also count as a row\r\n click: with `interactiveRows` those are two different intents, and firing both\r\n from one gesture is how a \"select\" ends up navigating away.\r\n -->\r\n <gog-checkbox\r\n [checked]=\"isSelected(row)\"\r\n [ariaLabel]=\"resolvedLabels().selectRow\"\r\n (click)=\"$event.stopPropagation()\"\r\n (checkedChange)=\"toggleRowSelection(row, $event)\"\r\n />\r\n </td>\r\n }\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 {{ resolvedLabels().total }}: {{ rowCount() }}\r\n </span>\r\n }\r\n\r\n @if (hasPagination()) {\r\n <!--\r\n `[(pageSize)]` straight through to the table's own model: the rows-per-page select\r\n writes back here, and a consumer binding `[(pageSize)]` on the table sees it. No\r\n intermediate signal, in either direction.\r\n -->\r\n <gog-paginator\r\n class=\"gog-table__pagination\"\r\n [style.grid-area]=\"paginatorGridArea()\"\r\n [(page)]=\"currentPage\"\r\n [(pageSize)]=\"pageSize\"\r\n [totalPages]=\"totalPages()\"\r\n [showPageSizeSelect]=\"showPageSizeSelect()\"\r\n [pageSizeOptions]=\"pageSizeOptions()\"\r\n rangeMode=\"ellipsis\"\r\n size=\"sm\"\r\n [ariaLabel]=\"resolvedLabels().pagination\"\r\n />\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.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--auto-layout{table-layout:auto}.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:start;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--select,.gog-table__td--select{width:var(--gog-table-select-col-width);text-align:center}.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--interactive{cursor:pointer}.gog-table__row--interactive: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__row:hover{background-color:var(--gog-table-hover-bg)}.gog-table__row--selected,.gog-table__row--selected:hover{background-color:var(--gog-table-selected-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-inline-end: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:end}.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"] }]
8176
+ }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], showPageSizeSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageSizeSelect", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], totalRecords: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalRecords", required: false }] }], interactiveRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactiveRows", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], showSelectionColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSelectionColumn", required: false }] }], showRowNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRowNumbers", required: false }] }], showTotal: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTotal", required: false }] }], emptyPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyPlaceholder", required: false }] }], paginatorPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginatorPosition", required: false }] }], totalPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPosition", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], showColumnBorders: [{ type: i0.Input, args: [{ isSignal: true, alias: "showColumnBorders", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], gogSortChange: [{ type: i0.Output, args: ["gogSortChange"] }], gogPageChange: [{ type: i0.Output, args: ["gogPageChange"] }], gogRowClick: [{ type: i0.Output, args: ["gogRowClick"] }], columns: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => GogColumn), { isSignal: true }] }] } });
8112
8177
 
8113
8178
  /** Built-in defaults, used when `GOG_CONFIG.theme` doesn't supply one. */
8114
8179
  const DEFAULT_THEME = 'light';